@cosmicdrift/kumiko-renderer 0.220.0 → 0.221.0

package/src/app/form-schema.ts

@@ -16,10 +16,6 @@ function isPresent(value: unknown): boolean {
   return true;
 }
 
-// A statically-`required: true` field with no bound widget is caught
-// loudly at boot — validateNoWidgetRequiredField in
-// packages/framework/src/engine/boot-validator/screens.ts, sharing
-// NO_WIDGET_FIELD_TYPES with the presence check below.
 function isEmbeddedListField(field: FieldDefinition): boolean {
   return field.type === "embedded" && field.multiple === true;
 }
@@ -67,7 +63,7 @@ export function buildFormSchema(
         const field = entity.fields[spec.field];
         if (!field) continue;
         // Not operable by the user — a presence error would be unresolvable,
-        // same reason as the FIELD_TYPES_WITHOUT_WIDGET check below.
+        // same reason as the NO_WIDGET_FIELD_TYPES check below.
         if (spec.readOnly !== undefined && evalFieldCondition(spec.readOnly, record)) continue;
         // Screen-spec `required` overrides the entity default, mirroring
         // `view-model/edit.ts` — the rendered form is the reference, and a
@@ -78,7 +74,9 @@ export function buildFormSchema(
         if (!isRequired) continue;
         // Embedded LIST fields get their own EmbeddedListField grid widget
         // (#1838) — they're fillable, so NO_WIDGET_FIELD_TYPES's "embedded"
-        // entry must not exempt them from the presence check below.
+        // entry must not exempt them. A statically-`required: true` field
+        // with no bound widget is also caught at boot
+        // (validateNoWidgetRequiredField in boot-validator/screens.ts).
         if (NO_WIDGET_FIELD_TYPES.includes(field.type) && !isEmbeddedListField(field)) continue;
         if (isPresent(record[spec.field])) continue;
         ctx.addIssue({

package/src/app/kumiko-screen.tsx

@@ -341,11 +341,24 @@ export function buildInitialValues(
       continue;
     }
     out[name] =
-      shape.type === "boolean" ? false : shape.type === "number" || shape.type === "money" ? 0 : "";
+      shape.type === "boolean"
+        ? false
+        : shape.type === "number" || shape.type === "money"
+          ? 0
+          : shape.type === "multiSelect"
+            ? []
+            : "";
   }
   return out;
 }
 
+function multiSelectOptionValues(shape: {
+  readonly options?: readonly (string | { readonly value: string })[];
+}): ReadonlySet<string> | undefined {
+  if (shape.options === undefined || shape.options.length === 0) return undefined;
+  return new Set(shape.options.map((o) => (typeof o === "string" ? o : o.value)));
+}
+
 export function mergeSearchParamsIntoInitial(
   fields: Readonly<Record<string, unknown>>,
   searchParams: Readonly<Record<string, string>>,
@@ -356,7 +369,11 @@ export function mergeSearchParamsIntoInitial(
   const merged: Record<string, unknown> = { ...defaults };
   for (const [name, fieldDef] of Object.entries(fields)) {
     if (renderableFields !== undefined && !renderableFields.has(name)) continue;
-    const shape = fieldDef as { type?: string; sensitive?: boolean };
+    const shape = fieldDef as {
+      type?: string;
+      sensitive?: boolean;
+      options?: readonly (string | { readonly value: string })[];
+    };
     if (shape.sensitive === true) continue;
     const raw = searchParams[name];
     if (raw === undefined) continue;
@@ -372,6 +389,39 @@ export function mergeSearchParamsIntoInitial(
           : parsed;
     } else if (shape.type === "boolean") {
       merged[name] = raw === "true";
+    } else if (shape.type === "multiSelect") {
+      // Row-action navigate stringifies arrays via String(arr) → "a,b" (or
+      // JSON when the navigate helper JSON.stringifies). Try JSON first
+      // (even without a "[" prefix), then comma-split; filter against
+      // field.options when present so unknown values never reach the form.
+      const optionValues = multiSelectOptionValues(shape);
+      let values: string[];
+      try {
+        const parsed: unknown = JSON.parse(raw);
+        if (Array.isArray(parsed)) {
+          values = parsed.map((v) => String(v));
+        } else if (typeof parsed === "string") {
+          values = [parsed];
+        } else {
+          values =
+            raw === ""
+              ? []
+              : raw
+                  .split(",")
+                  .map((s) => s.trim())
+                  .filter(Boolean);
+        }
+      } catch {
+        values =
+          raw === ""
+            ? []
+            : raw
+                .split(",")
+                .map((s) => s.trim())
+                .filter(Boolean);
+      }
+      merged[name] =
+        optionValues !== undefined ? values.filter((v) => optionValues.has(v)) : values;
     } else {
       merged[name] = raw;
     }
@@ -884,6 +934,27 @@ function buildFilterFacets(specs: readonly ResolvedFacetSpec[]): DataTableFacet[
 // server). Deliberately NOT gated on the field being a *facet* — entityList
 // passes through any field present in entity.fields, matching its
 // pre-fw#2224 behavior; only the boolean-coercion branch cares about type.
+
+function stringifyNavParams(params: Record<string, unknown>): Record<string, string | null> {
+  const out: Record<string, string | null> = {};
+  for (const [k, v] of Object.entries(params)) {
+    out[k] =
+      v === null || v === undefined ? null : Array.isArray(v) ? JSON.stringify(v) : String(v);
+  }
+  return out;
+}
+
+function isFacetI18nKey(label: string): boolean {
+  return !/\s/.test(label) && (label.includes(".") || label.includes(":"));
+}
+
+async function refetchAfterWrite(refetch: () => Promise<unknown>): Promise<void> {
+  await refetch().catch((err: unknown) => {
+    // biome-ignore lint/suspicious/noConsole: refetch must not poison the write-action error path
+    console.error("kumiko-screen: refetch after write action failed", err);
+  });
+}
+
 function buildFilterPayload(
   urlFilters: Readonly<Record<string, readonly string[]>>,
   typeOf: (field: string) => string | undefined,
@@ -961,24 +1032,25 @@ function resolveProjectionFacetSpecs(
   translate: Translate,
 ): ResolvedFacetSpec[] {
   if (facets === undefined) return [];
+  const tr = (label: string): string => (isFacetI18nKey(label) ? translate(label) : label);
   return facets.map((facet) =>
     facet.type === "select"
       ? {
           field: facet.field,
           type: "select",
-          label: translate(facet.label),
+          label: tr(facet.label),
           options: facet.options.map((opt) => ({
             value: opt.value,
-            label: translate(opt.label),
+            label: tr(opt.label),
           })),
         }
       : {
           field: facet.field,
           type: "boolean",
-          label: translate(facet.label),
+          label: tr(facet.label),
           options: [
-            { value: "true", label: translate(facet.trueLabel) },
-            { value: "false", label: translate(facet.falseLabel) },
+            { value: "true", label: tr(facet.trueLabel) },
+            { value: "false", label: tr(facet.falseLabel) },
           ],
         },
   );
@@ -1229,6 +1301,16 @@ function EntityListBody({
 
   const rowsQuery = useQuery<PagedRows>(queryType, queryPayload, { live: true });
 
+  const refreshRowsAfterWrite = useCallback(async () => {
+    if (useInfinite) {
+      setAccumulated([]);
+      setCursor(undefined);
+      setHasMore(true);
+      return;
+    }
+    await refetchAfterWrite(rowsQuery.refetch);
+  }, [useInfinite, rowsQuery.refetch]);
+
   // Infinite-Scroll: bei jedem erfolgreichen Result die rows appenden +
   // hasMore aus nextCursor ableiten. Live-Updates (postgres NOTIFY) und
   // initiale Loads laufen beide hier durch — das useEffect-Dep-Array
@@ -1313,7 +1395,11 @@ function EntityListBody({
         // detailFor cross-feature nicht selbst nachschlagen.
         const explicit =
           action.entityId !== undefined ? String(row.values[action.entityId] ?? "") : undefined;
-        const id = explicit ?? String(row.values["id"] ?? "");
+        // Same-entity only — cross-entity targets must declare entityId (boot-validator).
+        const fallback =
+          action.entity === screen.entity ? String(row.values["id"] ?? "") : undefined;
+        const id = explicit ?? fallback ?? "";
+        if (id === "") return;
         nav.navigate({ entity: action.entity, id });
       } else if (action.screen !== undefined) {
         // Default entityId für entityEdit-Targets: row["id"] wenn kein expliziter
@@ -1333,6 +1419,8 @@ function EntityListBody({
           screenId: action.screen,
           ...(entityId !== undefined && entityId !== "" && { entityId }),
         });
+      } else {
+        return;
       }
       const params =
         action.params !== undefined ? evalRowExtractor(action.params, row.values) : undefined;
@@ -1341,11 +1429,7 @@ function EntityListBody({
         // kennt via URL nur Strings). Known-edge: zielt die Action auf den
         // AKTUELLEN pathname, mergen die Params auf den alten ?-String (für
         // Row-Actions praktisch nicht erreichbar, Pfad differiert).
-        const stringified: Record<string, string | null> = {};
-        for (const [k, v] of Object.entries(params)) {
-          stringified[k] = v === null || v === undefined ? null : String(v);
-        }
-        nav.setSearchParams(stringified);
+        nav.setSearchParams(stringifyNavParams(params));
       }
     },
     [nav, schema.screens, screen.entity],
@@ -1400,9 +1484,7 @@ function EntityListBody({
                 dispatcherErrorText(result.error, effectiveTranslate),
               );
             }
-            // Refetch — without a redirect nothing else remounts the screen,
-            // so the list would otherwise keep showing stale rows.
-            await rowsQuery.refetch();
+            await refreshRowsAfterWrite();
           },
           isVisible:
             writeActionVisible !== undefined
@@ -1411,7 +1493,7 @@ function EntityListBody({
         };
       })
       .filter((a: DataTableRowAction | null): a is DataTableRowAction => a !== null);
-  }, [screen.rowActions, effectiveTranslate, dispatcher, runNavigate, rowsQuery.refetch]);
+  }, [screen.rowActions, effectiveTranslate, dispatcher, runNavigate, refreshRowsAfterWrite]);
 
   // ToolbarActions: Schema → Resolved-Form (analog rowActions).
   // navigate-kind → useNav().navigate({ screenId }), writeHandler-kind
@@ -1461,13 +1543,19 @@ function EntityListBody({
                 dispatcherErrorText(result.error, effectiveTranslate),
               );
             }
-            // Same refetch as rowActions above.
-            await rowsQuery.refetch();
+            await refreshRowsAfterWrite();
           },
         };
       })
       .filter((a: ToolbarActionButton | null): a is ToolbarActionButton => a !== null);
-  }, [screen.toolbarActions, effectiveTranslate, nav, dispatcher, rowsQuery.refetch, openDrawer]);
+  }, [
+    screen.toolbarActions,
+    effectiveTranslate,
+    nav,
+    dispatcher,
+    refreshRowsAfterWrite,
+    openDrawer,
+  ]);
 
   if (rowsQuery.loading && rowsQuery.data === null) {
     return (
@@ -1691,6 +1779,7 @@ function ProjectionListBody({
         // Validator erzwingt deshalb einen expliziten entityId für
         // projectionList-entity-Targets.
         const id = action.entityId !== undefined ? String(row.values[action.entityId] ?? "") : "";
+        if (id === "") return;
         nav.navigate({ entity: action.entity, id });
       } else if (action.screen !== undefined) {
         const entityId =
@@ -1699,15 +1788,13 @@ function ProjectionListBody({
           screenId: action.screen,
           ...(entityId !== undefined && entityId !== "" && { entityId }),
         });
+      } else {
+        return;
       }
       const params =
         action.params !== undefined ? evalRowExtractor(action.params, row.values) : undefined;
       if (params !== undefined) {
-        const stringified: Record<string, string | null> = {};
-        for (const [k, v] of Object.entries(params)) {
-          stringified[k] = v === null || v === undefined ? null : String(v);
-        }
-        nav.setSearchParams(stringified);
+        nav.setSearchParams(stringifyNavParams(params));
       }
     },
     [nav],
@@ -1760,7 +1847,7 @@ function ProjectionListBody({
             );
           }
           // Same refetch as EntityListBody's rowActions above.
-          await rowsQuery.refetch();
+          await refetchAfterWrite(rowsQuery.refetch);
         },
         ...(writeVisible !== undefined && {
           isVisible: (row: ListRowViewModel) => evalFieldCondition(writeVisible, row.values),
@@ -1815,7 +1902,7 @@ function ProjectionListBody({
             );
           }
           // Same refetch as rowActions above.
-          await rowsQuery.refetch();
+          await refetchAfterWrite(rowsQuery.refetch);
         },
       });
     }
@@ -2003,11 +2090,7 @@ function ProjectionDetailBody({
           const params =
             action.params !== undefined ? evalRowExtractor(action.params, record) : undefined;
           if (params !== undefined) {
-            const stringified: Record<string, string | null> = {};
-            for (const [k, v] of Object.entries(params)) {
-              stringified[k] = v === null || v === undefined ? null : String(v);
-            }
-            nav.setSearchParams(stringified);
+            nav.setSearchParams(stringifyNavParams(params));
           }
         };
         if (action.entity !== undefined) {
@@ -2023,6 +2106,7 @@ function ProjectionDetailBody({
             label: effectiveTranslate(action.label),
             ...(action.style !== undefined && { style: action.style }),
             onPress: () => {
+              if (id === "") return;
               nav.navigate({ entity: targetEntity, id });
               runParams();
             },
@@ -2202,14 +2286,19 @@ function ActionFormBody({
       // Author entscheidet bewusst ob "stay on form" (default) oder
       // "back to list" (typisch bei Create-style Aktionen).
       if (screen.redirect !== undefined) {
+        const targetId = lastSegment(screen.redirect);
+        const target = schema.screens.find((s) => lastSegment(s.id) === targetId);
         const entityId = extractCreatedId(result.data);
+        const carriesId =
+          target !== undefined &&
+          (target.type === "entityEdit" || target.type === "projectionDetail");
         nav.navigate({
-          screenId: lastSegment(screen.redirect),
-          ...(entityId !== undefined && { entityId }),
+          screenId: targetId,
+          ...(carriesId && entityId !== undefined && { entityId }),
         });
       }
     },
-    [nav, screen.redirect, onSuccess],
+    [nav, screen.redirect, onSuccess, schema.screens],
   );
   // Cancel ist nur sinnvoll wenn ein Navigations-Ziel existiert —
   // sonst hätte der Button nirgendwo hin zu navigieren. cancelTarget

package/src/components/__tests__/render-edit-action-button.test.tsx

@@ -117,6 +117,10 @@ describe("RenderEditActionButton", () => {
     expect(rtlScreen.queryByTestId("render-edit-action-delete-dialog-description")).toBeNull();
     expect(pressed).toBe(0);
 
+    expect(rtlScreen.getByTestId("render-edit-action-delete-dialog-confirm").textContent).toBe(
+      "Delete",
+    );
+
     fireEvent.click(rtlScreen.getByTestId("render-edit-action-delete-dialog-confirm"));
     await waitFor(() => expect(pressed).toBe(1));
   });
@@ -138,6 +142,7 @@ describe("RenderEditActionButton", () => {
 
     fireEvent.click(rtlScreen.getByTestId("render-edit-action-boom"));
     await waitFor(() => expect(errors).toContain("action exploded"));
+    // Cleared at the start of trigger, then set on failure.
     expect(errors[0]).toBeNull();
   });
 

package/src/components/__tests__/render-edit-submit-actions.test.tsx

@@ -292,8 +292,33 @@ describe("RenderEdit — submit path", () => {
     expect(submitted).toEqual({ validationBlocked: true, isSuccess: false });
     expect(customCalls).toBe(0);
   });
-});
+  test("failed writeCommand with field issues suppresses the form-error banner", async () => {
+    const writeFailure: DispatcherError = {
+      code: "validation_failed",
+      httpStatus: 422,
+      i18nKey: "kumiko.errors.validation",
+      message: "validation failed",
+      details: {
+        fields: [{ path: "name", code: "too_small", i18nKey: "kumiko.errors.required" }],
+      },
+    };
+    const { dispatcher } = stubDispatcher(async () => ({
+      isSuccess: false,
+      error: writeFailure,
+    }));
+    renderEdit(
+      oneFieldScreen,
+      { writeCommand: "contacts:write:contact:update" },
+      buildEntity(),
+      dispatcher,
+    );
 
+    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ada" } });
+    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(rtlScreen.queryByTestId("render-edit-form-error")).toBeNull());
+  });
+});
 describe("RenderEdit — custom actions", () => {
   test("renders an action button and runs its handler on click", async () => {
     let pressed = 0;
@@ -388,4 +413,30 @@ describe("RenderEdit — writeCommand path", () => {
     await waitFor(() => expect(rtlScreen.getByTestId("render-edit-form-error")).toBeTruthy());
     expect(submitted?.isSuccess).toBe(false);
   });
+  test("failed writeCommand with field issues suppresses the form-error banner", async () => {
+    const writeFailure: DispatcherError = {
+      code: "validation_failed",
+      httpStatus: 422,
+      i18nKey: "kumiko.errors.validation",
+      message: "validation failed",
+      details: {
+        fields: [{ path: "name", code: "too_small", i18nKey: "kumiko.errors.required" }],
+      },
+    };
+    const { dispatcher } = stubDispatcher(async () => ({
+      isSuccess: false,
+      error: writeFailure,
+    }));
+    renderEdit(
+      oneFieldScreen,
+      { writeCommand: "contacts:write:contact:update" },
+      buildEntity(),
+      dispatcher,
+    );
+
+    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ada" } });
+    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(rtlScreen.queryByTestId("render-edit-form-error")).toBeNull());
+  });
 });

package/src/components/render-edit-action-button.tsx

@@ -3,6 +3,10 @@ import { useState } from "react";
 import type { usePrimitives } from "../primitives";
 import type { RenderEditAction } from "./render-edit-types";
 
+// One header action + its own busy/confirm state — same pattern as
+// render-list.tsx's ToolbarActionView (each RenderEditAction is
+// independently bound by the caller, there is no shared trigger pipeline
+// to hook into like the built-in onDelete/onSubmit paths have).
 export function RenderEditActionButton({
   action,
   Button,