@cosmicdrift/kumiko-renderer 0.358.0 → 0.360.0

package/dist/app/action-form-shim.d.ts

@@ -4,6 +4,9 @@ import type { ActionFormScreenDefinition, EntityDefinition, EntityEditScreenDefi
  *  iterieren über entity.fields zur Render-Zeit; alle weiteren
  *  EntityDefinition-Felder bleiben undefined. */
 export declare function synthesizeActionFormEntity(fields: Readonly<Record<string, FieldDefinition>>): EntityDefinition;
+/** Fields the form may seed and submit. An excluded field the layout does not show
+ *  would otherwise reach the payload through its `default`, and the handler rejects it. */
+export declare function actionFormSubmittableFields(screen: ActionFormScreenDefinition): Readonly<Record<string, FieldDefinition>>;
 /** Wandelt ein ActionFormScreenDefinition oder SecretMintScreenDefinition in
  *  die EntityEditScreen-Shape die RenderEdit erwartet. type wird auf
  *  "entityEdit" gesetzt damit der Type-Constraint hält; entity wird auf den

package/dist/app/action-form-shim.js

@@ -14,6 +14,7 @@
 // RenderActionForm-Komponente, die `fields` direkt als Input nimmt.
 // Der Boot-Validator kennt actionForm bereits eigenständig (kein
 // entity-Lookup), also ist der Server-Pfad davon nicht betroffen.
+import { isFieldsEditSection, normalizeEditField, sectionFieldSpecs, } from "@cosmicdrift/kumiko-framework/ui-types";
 const ACTION_FORM_PSEUDO_ENTITY = "__action-form__";
 /** Baut eine minimale EntityDefinition aus den Inline-Fields eines
  *  ActionForm- oder SecretMint-Screens. RenderEdit + computeEditViewModel
@@ -22,6 +23,51 @@ const ACTION_FORM_PSEUDO_ENTITY = "__action-form__";
 export function synthesizeActionFormEntity(fields) {
     return { fields };
 }
+// An actionForm has no create/update mode, so the entityEdit `writeExcludedFields`
+// (which hides the field in create mode) does not fit. The values arrive via prefill
+// (row drawer, handoff, URL), so show them read-only: `submit: false` because the
+// handler does not accept the field, `required: false` so an empty one cannot block submit.
+function lockExcludedFieldSpec(spec, excluded) {
+    const normalized = normalizeEditField(spec);
+    if (!excluded.has(normalized.field))
+        return spec;
+    return { ...normalized, readOnly: true, required: false, submit: false };
+}
+function lockExcludedFieldsInSection(section, excluded) {
+    if (!isFieldsEditSection(section))
+        return section;
+    return {
+        ...section,
+        // kumiko-lint-ignore section-fields-raw rewrites both sources in place — the groups branch below does the same for groups[].fields
+        fields: section.fields.map((spec) => lockExcludedFieldSpec(spec, excluded)),
+        ...(section.groups !== undefined && {
+            groups: section.groups.map((group) => ({
+                ...group,
+                fields: group.fields.map((spec) => lockExcludedFieldSpec(spec, excluded)),
+            })),
+        }),
+    };
+}
+function layoutWithLockedExcludedFields(screen) {
+    if (screen.type !== "actionForm" || !screen.writeExcludedFields?.length)
+        return screen.layout;
+    const excluded = new Set(screen.writeExcludedFields);
+    return {
+        ...screen.layout,
+        sections: screen.layout.sections.map((section) => lockExcludedFieldsInSection(section, excluded)),
+    };
+}
+/** Fields the form may seed and submit. An excluded field the layout does not show
+ *  would otherwise reach the payload through its `default`, and the handler rejects it. */
+export function actionFormSubmittableFields(screen) {
+    const excluded = screen.writeExcludedFields;
+    if (!excluded?.length)
+        return screen.fields;
+    const inLayout = new Set(screen.layout.sections.flatMap((section) => isFieldsEditSection(section)
+        ? sectionFieldSpecs(section).map((spec) => normalizeEditField(spec).field)
+        : []));
+    return Object.fromEntries(Object.entries(screen.fields).filter(([name]) => inLayout.has(name) || !excluded.includes(name)));
+}
 /** Wandelt ein ActionFormScreenDefinition oder SecretMintScreenDefinition in
  *  die EntityEditScreen-Shape die RenderEdit erwartet. type wird auf
  *  "entityEdit" gesetzt damit der Type-Constraint hält; entity wird auf den
@@ -31,7 +77,7 @@ export function synthesizeActionFormScreen(screen) {
         id: screen.id,
         type: "entityEdit",
         entity: ACTION_FORM_PSEUDO_ENTITY,
-        layout: screen.layout,
+        layout: layoutWithLockedExcludedFields(screen),
         ...(screen.description !== undefined && { description: screen.description }),
         ...(screen.access !== undefined && { access: screen.access }),
         // Only ActionFormScreenDefinition carries slots/fieldLabels; `in` narrows

package/dist/app/kumiko-screen.js

@@ -23,7 +23,7 @@ import { InsideDrawerProvider, useInsideDrawer } from "../inside-drawer.js";
 import { PageHeaderSlotAvailableProvider, usePageHeaderCompact, usePageHeaderSlotAvailable, } from "../page-header-slot.js";
 import { statusToneForOptionTone, statusToneForValue, usePrimitives, } from "../primitives.js";
 import { screenFillsHeight } from "../screen-fills-height.js";
-import { synthesizeActionFormEntity, synthesizeActionFormScreen } from "./action-form-shim.js";
+import { actionFormSubmittableFields, synthesizeActionFormEntity, synthesizeActionFormScreen, } from "./action-form-shim.js";
 import { useAppFeatures } from "./app-features-context.js";
 import { buildConfigEditSchema, synthesizeConfigEditEntity, synthesizeConfigEditScreen, } from "./config-edit-shim.js";
 import { useCustomScreenComponent } from "./custom-screens.js";
@@ -2356,7 +2356,8 @@ function ActionFormBody({ schema, screen, translate, initialOverrides, onSuccess
     const { Banner } = usePrimitives();
     // Unused when drawer-hosted — onSuccess/onCancelOverride win below first.
     const returnTarget = useReturnTarget(screen.id);
-    const synthEntity = useMemo(() => synthesizeActionFormEntity(screen.fields), [screen.fields]);
+    const submittableFields = useMemo(() => actionFormSubmittableFields(screen), [screen]);
+    const synthEntity = useMemo(() => synthesizeActionFormEntity(submittableFields), [submittableFields]);
     const synthScreen = useMemo(() => synthesizeActionFormScreen(screen), [screen]);
     const pendingHandoff = useInitialValuesHandoff(screen.id);
     // A drawer-hosted form is not a navigation target, so it never takes a handoff.
@@ -2368,7 +2369,7 @@ function ActionFormBody({ schema, screen, translate, initialOverrides, onSuccess
     // submitting a guessed currency would mis-book the amount — block instead.
     const tenantCurrencyFieldNames = useMemo(() => tenantCurrencyMoneyFieldNames(screen.fields), [screen.fields]);
     const { overrides: moneyCurrencyOverrides, loading: currencyLoading, unresolved: currencyUnresolved, } = useMoneyCurrencyOverrides(screen.fields, tenantCurrencyFieldNames, undefined);
-    const initial = useMemo(() => mergeSearchParamsIntoInitial(screen.fields, {
+    const initial = useMemo(() => mergeSearchParamsIntoInitial(submittableFields, {
         searchParams: nav.searchParams,
         urlPrefillFields: screen.urlPrefillFields,
         renderableFields: layoutFieldNames(synthScreen),
@@ -2376,7 +2377,7 @@ function ActionFormBody({ schema, screen, translate, initialOverrides, onSuccess
         ...(initialOverrides !== undefined && { drawerOverrides: initialOverrides }),
         ...(handoffValues !== undefined && { handoffValues }),
     }), [
-        screen.fields,
+        submittableFields,
         screen.urlPrefillFields,
         nav.searchParams,
         synthScreen,

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.358.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.358.0",
-    "@cosmicdrift/kumiko-headless": "0.358.0",
-    "@cosmicdrift/kumiko-types": "0.358.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.358.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",