@cosmicdrift/kumiko-renderer 0.359.0 → 0.360.0

package/dist/components/embedded-list-field.js

@@ -263,5 +263,5 @@ function EmbeddedListFieldInner({ field, id, onChange, allIssues, featureName, }
         const recomputed = nextRows.map((row, i) => touchedIndices.has(i) ? withRecomputedDerived(row, derived, cells) : row);
         onChange(recomputed);
     }
-    return (_jsx(EmbeddedListInput, { id: id, columns: columns, rows: rows, totals: totals, currency: field.embeddedListCurrency, disabled: field.readOnly, minItems: field.embeddedListMinItems, maxItems: field.embeddedListMaxItems, listIssues: combinedListIssues, rowIssues: rowIssues, cellIssues: cellIssues, onCellChange: handleCellChange, onAddRow: handleAddRow, onRemoveRow: handleRemoveRow, onDuplicateRow: handleDuplicateRow, onMoveRow: handleMoveRow, onPasteCells: handlePasteCells, addLabel: t("kumiko.field.embedded-list.add-row"), removeLabel: t("kumiko.field.embedded-list.remove-row"), duplicateLabel: t("kumiko.field.embedded-list.duplicate-row"), moveUpLabel: t("kumiko.field.embedded-list.move-up"), moveDownLabel: t("kumiko.field.embedded-list.move-down"), emptyLabel: t("kumiko.field.embedded-list.empty"), emptyCtaLabel: t("kumiko.field.embedded-list.empty-cta"), testId: id }));
+    return (_jsx(EmbeddedListInput, { id: id, columns: columns, rows: rows, totals: totals, currency: field.embeddedListCurrency, disabled: field.readOnly, minItems: field.embeddedListMinItems, maxItems: field.embeddedListMaxItems, listIssues: combinedListIssues, rowIssues: rowIssues, cellIssues: cellIssues, onCellChange: handleCellChange, onAddRow: handleAddRow, onRemoveRow: handleRemoveRow, onDuplicateRow: handleDuplicateRow, onMoveRow: handleMoveRow, onPasteCells: handlePasteCells, addLabel: t("kumiko.field.embedded-list.add-row"), actionsLabel: t("kumiko.field.embedded-list.actions"), removeLabel: t("kumiko.field.embedded-list.remove-row"), duplicateLabel: t("kumiko.field.embedded-list.duplicate-row"), moveUpLabel: t("kumiko.field.embedded-list.move-up"), moveDownLabel: t("kumiko.field.embedded-list.move-down"), emptyLabel: t("kumiko.field.embedded-list.empty"), emptyCtaLabel: t("kumiko.field.embedded-list.empty-cta"), testId: id }));
 }

package/dist/components/file-list-field.d.ts

@@ -0,0 +1,10 @@
+import type { EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
+import type { ReactNode } from "react";
+export type FileListFieldProps = {
+    readonly field: EditFieldViewModel;
+    readonly id: string;
+    readonly kind: "file" | "image";
+    readonly onChange: (value: readonly string[]) => void;
+    readonly hasError: boolean;
+};
+export declare function FileListField({ field, id, kind, onChange, hasError, }: FileListFieldProps): ReactNode;

package/dist/components/file-list-field.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+function isFileIdList(value) {
+    return Array.isArray(value);
+}
+function readFileIds(value) {
+    if (!isFileIdList(value))
+        return [];
+    return value.filter((entry) => typeof entry === "string" && entry !== "");
+}
+export function FileListField({ field, id, kind, onChange, hasError, }) {
+    const { Input, Button, Grid, GridCell, Text } = usePrimitives();
+    const t = useTranslation();
+    const fileIds = readFileIds(field.value);
+    const disabled = field.readOnly;
+    const canAdd = !disabled && (field.maxCount === undefined || fileIds.length < field.maxCount);
+    const inputProps = {
+        kind,
+        name: field.field,
+        disabled,
+        hasError,
+        ...(field.accept !== undefined && { accept: field.accept }),
+        ...(field.maxSize !== undefined && { maxSize: field.maxSize }),
+        ...(field.entityType !== undefined && { entityType: field.entityType }),
+        ...(field.entityId !== undefined && { entityId: field.entityId }),
+        ...(field.fieldName !== undefined && { fieldName: field.fieldName }),
+        ...(kind === "image" &&
+            field.imageVariant !== undefined && { imageVariant: field.imageVariant }),
+        ...(kind === "image" && field.capture !== undefined && { capture: field.capture }),
+    };
+    function move(fromIndex, toIndex) {
+        const next = [...fileIds];
+        const [moved] = next.splice(fromIndex, 1);
+        if (moved === undefined)
+            return;
+        next.splice(toIndex, 0, moved);
+        onChange(next);
+    }
+    return (_jsxs(Grid, { columns: 1, testId: `${id}-file-list`, children: [fileIds.length === 0 && _jsx(Text, { variant: "muted", children: t("kumiko.field.file-list.empty") }), fileIds.map((fileId, index) => (_jsxs(GridCell, { children: [_jsx(Input, { ...inputProps, id: `${id}-${index}`, value: fileId, onChange: (next) => {
+                            if (next === null)
+                                onChange(fileIds.filter((_, i) => i !== index));
+                            else
+                                onChange(fileIds.map((existing, i) => (i === index ? next : existing)));
+                        } }), !disabled && (_jsxs(Grid, { columns: "auto", children: [index > 0 && (_jsx(Button, { variant: "ghost", size: "icon", icon: "chevron-up", ariaLabel: t("kumiko.field.file-list.move-up"), testId: `${id}-${index}-move-up`, onClick: () => move(index, index - 1) })), index < fileIds.length - 1 && (_jsx(Button, { variant: "ghost", size: "icon", icon: "chevron-down", ariaLabel: t("kumiko.field.file-list.move-down"), testId: `${id}-${index}-move-down`, onClick: () => move(index, index + 1) }))] }))] }, fileId))), canAdd && (_jsxs(GridCell, { children: [_jsx(Text, { variant: "muted", children: t("kumiko.field.file-list.add") }), _jsx(Input, { ...inputProps, id: `${id}-add`, value: null, onChange: (next) => {
+                            if (next !== null)
+                                onChange([...fileIds, next]);
+                        } })] }, "add"))] }));
+}

package/dist/components/render-edit.js

@@ -631,7 +631,17 @@ export function RenderEdit(props) {
         translate,
         featureName,
         mode: writeVerb,
-    }), [screen, entity, snapshot.values, translate, featureName, writeVerb]);
+        ...(!isCreateMode && entityIdProp != null && { entityId: entityIdProp }),
+    }), [
+        screen,
+        entity,
+        snapshot.values,
+        translate,
+        featureName,
+        writeVerb,
+        isCreateMode,
+        entityIdProp,
+    ]);
     const filteredSections = useMemo(
     // A fully-hidden "fields" section (every field in it currently
     // condition-hidden) must not occupy a wizard step; it would render

package/dist/components/render-field.js

@@ -15,6 +15,7 @@ import { useLocale, useTranslation } from "../i18n.js";
 import { usePrimitives } from "../primitives.js";
 import { AvailabilityOptionsMultiSelect, AvailabilityOptionsSelect, staticSelectOptions, } from "./availability-options-select.js";
 import { EmbeddedListField } from "./embedded-list-field.js";
+import { FileListField } from "./file-list-field.js";
 import { MultiSelectCheckboxes } from "./multi-select-checkboxes.js";
 import { QueryOptionsSelect } from "./query-options-select.js";
 import { ReferenceCreateDialog } from "./reference-create-dialog.js";
@@ -276,11 +277,11 @@ function ReadOnlyReferenceValue({ field, featureName, }) {
     return _jsx(Text, { testId: `field-value-${field.field}`, children: labels.join(", ") });
 }
 // Field types whose read display already isn't a boxed "disabled input" look
-// (embedded/jsonb render as an info Banner, files/images as an unsupported-
-// type Banner) — `readOnlyDisplayText` doesn't cover these, they keep going
-// through `renderInput`'s existing Banner branch in text-display mode too.
+// (embedded/jsonb render as an info Banner) — `readOnlyDisplayText` doesn't
+// cover these, they keep going through `renderInput`'s existing Banner branch
+// in text-display mode too.
 function isComplexFieldType(type) {
-    return type === "embedded" || type === "jsonb" || type === "files" || type === "images";
+    return type === "embedded" || type === "jsonb";
 }
 // Mirrors ACTION_ICON_BY_ID (kumiko-screen.tsx) for fields: only names with
 // an unambiguous matching FieldIconKey are listed here, everything else
@@ -383,22 +384,21 @@ function renderInput({ field, id, hasError, onChange, Input, appLocale, Banner,
         case "image": {
             const kind = field.type === "image" ? "image" : "file";
             const fileId = typeof field.value === "string" && field.value !== "" ? field.value : null;
-            return (_jsx(Input, { kind: kind, ...common, value: fileId, onChange: (v) => onChange(v), ...(field.accept !== undefined && { accept: field.accept }), ...(field.maxSize !== undefined && { maxSize: field.maxSize }), ...(field.entityType !== undefined && { entityType: field.entityType }), ...(field.fieldName !== undefined && { fieldName: field.fieldName }), ...(field.imageVariant !== undefined && { imageVariant: field.imageVariant }), ...(field.capture !== undefined && { capture: field.capture }) }));
+            return (_jsx(Input, { kind: kind, ...common, value: fileId, onChange: (v) => onChange(v), ...(field.accept !== undefined && { accept: field.accept }), ...(field.maxSize !== undefined && { maxSize: field.maxSize }), ...(field.entityType !== undefined && { entityType: field.entityType }), ...(field.entityId !== undefined && { entityId: field.entityId }), ...(field.fieldName !== undefined && { fieldName: field.fieldName }), ...(field.imageVariant !== undefined && { imageVariant: field.imageVariant }), ...(field.capture !== undefined && { capture: field.capture }) }));
         }
+        case "files":
+        case "images":
+            return (_jsx(FileListField, { field: field, id: id, kind: field.type === "images" ? "image" : "file", hasError: hasError, onChange: (ids) => onChange(ids) }));
         // embedded (without embeddedListCells — that's embeddedList, which has
         // had its own EmbeddedListField widget since #1838) and jsonb carry
-        // arbitrary objects; files/images carry a FileRef-UUID array and have
-        // no multi-upload widget yet (deliberately deferred, #1925). Without a
-        // dedicated widget these must NOT fall through to a text input:
-        // stringValue() turns them into "[object Object]" / a comma-joined
-        // string, and saving that overwrites the real data with the mangled
-        // string (#1834). A `required: true` on any of these is caught loudly
+        // arbitrary objects. Without a dedicated widget these must NOT fall
+        // through to a text input: stringValue() turns them into
+        // "[object Object]" and saving that overwrites the real data with the
+        // mangled string (#1834). A `required: true` on either is caught loudly
         // at boot (validateNoWidgetRequiredField in the framework package)
         // instead of silently failing here.
         case "embedded":
-        case "jsonb":
-        case "files":
-        case "images": {
+        case "jsonb": {
             const hasValue = field.value !== undefined && field.value !== null && field.value !== "";
             return (_jsxs(Banner, { id: id, variant: "info", children: [t("kumiko.field.unsupported"), hasValue &&
                         (JsonView !== undefined ? (_jsx(JsonView, { value: field.value, testId: `field-value-${field.field}` })) : (_jsx(Text, { variant: "code", children: JSON.stringify(field.value) })))] }));
@@ -559,6 +559,9 @@ function readOnlyDisplayText(field, appLocale, t) {
         case "file":
         case "image":
             return typeof value === "string" ? value : "—";
+        case "files":
+        case "images":
+            return Array.isArray(value) && value.length > 0 ? value.map(stringValue).join(", ") : "—";
         default:
             return stringValue(value);
     }

package/dist/i18n-defaults.js

@@ -45,6 +45,17 @@ export const kumikoDefaultTranslations = {
         "kumiko.field.writeOnly.setPlaceholder": "Set — leave empty to keep it",
         "kumiko.field.writeOnly.undo": "Undo",
         "kumiko.field.writeOnly.willRemove": "Removed on save",
+        "kumiko.field.embedded-list.actions": "Actions",
+        "kumiko.field.embedded-list.cell-label": "{column}, row {row}",
+        "kumiko.field.file-list.add": "Add file",
+        "kumiko.field.file-list.move-up": "Move file up",
+        "kumiko.field.file-list.move-down": "Move file down",
+        "kumiko.field.file-list.empty": "No files yet.",
+        "kumiko.field.file-upload.attached": "File attached",
+        "kumiko.field.file-upload.change": "Change",
+        "kumiko.field.file-upload.failed": "Upload failed",
+        "kumiko.field.file-upload.remove": "Remove",
+        "kumiko.field.file-upload.upload": "Upload",
         "kumiko.field.embedded-list.add-row": "Add row",
         "kumiko.field.embedded-list.remove-row": "Remove row",
         "kumiko.field.embedded-list.duplicate-row": "Duplicate row",

package/dist/primitives.d.ts

@@ -295,6 +295,9 @@ export type InputProps = {
     readonly name: string;
     /** FileRef-UUID (gespeicherte Datei) oder null (kein Upload). */
     readonly value: string | null;
+    /** Implementations must offer their own remove control that calls
+     *  `onChange(null)`: FileListField relies on it to drop a file from an
+     *  `images`/`files` field. */
     readonly onChange: (fileId: string | null) => void;
     readonly disabled?: boolean;
     readonly required?: boolean;
@@ -305,6 +308,9 @@ export type InputProps = {
     /** Für den Upload-POST `/api/files` — der Endpoint prüft maxSize/accept
      *  gegen die Field-Def von (entityType, fieldName). */
     readonly entityType?: string;
+    /** Must be sent as the `entityId` part of the upload so the FileRef is
+     *  attached to the record (qr overlays and access guards need it). */
+    readonly entityId?: string;
     readonly fieldName?: string;
     /** Only for kind:"image" — variant name for the preview
      *  (`/api/files/:id/variant/:name`). Absent → the original. */
@@ -810,6 +816,8 @@ export type EmbeddedListInputProps = {
      *  handling wired up. */
     readonly onPasteCells?: (rowIndex: number, columnIndex: number, grid: readonly (readonly string[])[]) => void;
     readonly addLabel: string;
+    /** Accessible name of the (otherwise headerless) row-actions column. */
+    readonly actionsLabel: string;
     readonly removeLabel: string;
     readonly duplicateLabel: string;
     readonly moveUpLabel: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.359.0",
+  "version": "0.360.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,9 +15,9 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.359.0",
-    "@cosmicdrift/kumiko-headless": "0.359.0",
-    "@cosmicdrift/kumiko-types": "0.359.0",
+    "@cosmicdrift/kumiko-framework": "0.360.0",
+    "@cosmicdrift/kumiko-headless": "0.360.0",
+    "@cosmicdrift/kumiko-types": "0.360.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -28,7 +28,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react-dom": "^19.2.6",
-    "@cosmicdrift/kumiko-locale-de": "0.359.0"
+    "@cosmicdrift/kumiko-locale-de": "0.360.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.360.0",
+    "type": "improvement",
+    "title": "FileListField edits images and files fields",
+    "detail": "RenderField renders type images and files as FileListField instead of the unsupported banner. One tile per stored FileRef id with move up, move down and remove buttons, one trailing empty tile to add a file (hidden at maxCount or when read-only). It is built from Input kind file or image, Button and the layout primitives, passes accept, maxSize, entityType, entityId, fieldName, imageVariant and capture to every tile, and reads only string ids from the stored value. The read-only text display of these fields lists the ids. New i18n keys kumiko.field.file-list.add, move-up, move-down and empty; kumiko.field.file-upload.upload, change, remove, attached and failed; kumiko.field.embedded-list.actions and cell-label. The file and image Input kinds accept entityId. EmbeddedListInput has a new required actionsLabel prop."
+  },
   {
     "version": "0.357.0",
     "type": "improvement",