@cosmicdrift/kumiko-renderer-web 0.225.0 → 0.226.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.225.0",
+  "version": "0.226.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.225.0",
-    "@cosmicdrift/kumiko-headless": "0.225.0",
-    "@cosmicdrift/kumiko-renderer": "0.225.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.226.0",
+    "@cosmicdrift/kumiko-headless": "0.226.0",
+    "@cosmicdrift/kumiko-renderer": "0.226.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.225.0"
+    "@cosmicdrift/kumiko-locale-de": "0.226.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/kumiko-screen-singleton-entity-edit.test.tsx

@@ -0,0 +1,237 @@
+import { describe, expect, mock, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import {
+  DispatcherProvider,
+  KumikoScreen,
+  kumikoDefaultTranslations,
+} from "@cosmicdrift/kumiko-renderer";
+import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
+
+// Split out of kumiko-screen.test.tsx (#2495): the create->update submit
+// test below fires fireEvent.change immediately followed by fireEvent.click
+// right after an async data-load settles — exactly the pattern that trips
+// the #457 shared single-process happy-dom event-delegation corruption once
+// enough prior DOM test files have mounted/unmounted in the same process.
+// Isolating just this describe block (not the whole 2600+ line parent file)
+// keeps the coverage/dom blast radius small while still using the codebase's
+// established remedy (bunfig.ci-dom.toml, pathIgnorePatterns in
+// bunfig.dom.toml) for that bug class.
+
+const taskEntity = {
+  fields: {
+    title: { type: "text", required: true },
+    count: { type: "number" },
+    done: { type: "boolean" },
+  },
+} as unknown as EntityDefinition;
+
+function makeDispatcher(overrides: Partial<Dispatcher> = {}): Dispatcher {
+  const base = createMockDispatcher({
+    query: (async () => ({
+      isSuccess: true,
+      data: { rows: [], nextCursor: null },
+    })) as unknown as Dispatcher["query"],
+  });
+  return { ...base, ...overrides };
+}
+
+describe("KumikoScreen: singleton entityEdit", () => {
+  const singletonEdit: EntityEditScreenDefinition = {
+    id: "task-edit",
+    type: "entityEdit",
+    entity: "task",
+    singleton: true,
+    layout: { sections: [{ title: "Basics", fields: ["title"] }] },
+  };
+  const singletonSchema: FeatureSchema = {
+    featureName: "tasks",
+    entities: { task: taskEntity },
+    screens: [singletonEdit],
+  };
+
+  test("kein vorhandener Record → rendert leeres Create-Form", async () => {
+    const queryCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        queryCalls.push({ type, payload });
+        return { isSuccess: true, data: { rows: [], nextCursor: null } };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    expect(titleInput.value).toBe("");
+    expect(queryCalls).toEqual([{ type: "tasks:query:task:list", payload: { limit: 1 } }]);
+  });
+
+  test("vorhandener Record → lädt ihn (Update-Form, prefilled) statt Create", async () => {
+    const queryCalls: { type: string; payload: unknown }[] = [];
+    const dispatcher = makeDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        queryCalls.push({ type, payload });
+        if (type.endsWith(":list")) {
+          return {
+            isSuccess: true,
+            data: { rows: [{ id: "task-1", title: "loaded-title" }], nextCursor: null },
+          };
+        }
+        return {
+          isSuccess: true,
+          data: { id: "task-1", version: 1, title: "loaded-title", count: 0, done: false },
+        };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    // Two sequential loading cycles (list, then detail once the singleton
+    // wrapper hands off to EntityEditUpdateBody) — default waitFor timeout
+    // can be too tight under CI's shared-process test load.
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull(), {
+      timeout: 5000,
+    });
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    expect(titleInput.value).toBe("loaded-title");
+    // Anchor: the id resolved from list(limit:1) reaches the detail query —
+    // otherwise the form would render empty/create-mode instead of loading it.
+    expect(queryCalls).toContainEqual({
+      type: "tasks:query:task:detail",
+      payload: { id: "task-1" },
+    });
+  });
+
+  test("allowCreate:false + leere Tabelle → Fehler-Banner statt Create-Form", async () => {
+    const disabledSchema: FeatureSchema = {
+      featureName: "tasks",
+      entities: { task: taskEntity },
+      screens: [{ ...singletonEdit, allowCreate: false }],
+    };
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows: [], nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={disabledSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    expect(screen.getByTestId("kumiko-screen-create-disabled")).toBeTruthy();
+    expect(screen.queryByTestId("render-edit-form")).toBeNull();
+  });
+
+  // The singleton wrapper fires its own list(limit:1) query up front — a
+  // screen whose `list` handler has stricter access.roles than its `edit`
+  // handler used to render fine (no query ran before this feature) and now
+  // flips to an error banner instead. No test caught that regression.
+  test("list-Query schlägt fehl → Fehler-Banner statt Create-Form", async () => {
+    const dispatcher = makeDispatcher({
+      query: (async () => ({
+        isSuccess: false,
+        error: {
+          code: "access_denied",
+          httpStatus: 403,
+          i18nKey: "errors.access.denied",
+          message: "",
+        },
+      })) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    const bannerText = screen.getByTestId("kumiko-screen-error").textContent;
+    expect(bannerText).toBe(kumikoDefaultTranslations["en"]?.["errors.access.denied"] ?? "");
+    expect(screen.queryByTestId("render-edit-form")).toBeNull();
+  });
+
+  // kumiko-screen#1944: EntityEditSingletonBody runs without a wrapping
+  // entityList screen, so the create-body's default "navigate back to the
+  // list" success handler is a silent no-op — a successful create used to
+  // leave the form stuck on the just-submitted create values, and a second
+  // submit created a duplicate record ("exactly one record per tenant"
+  // broken). Create on an empty table must now switch straight to the
+  // update form of the newly created record.
+  test("erfolgreicher Create bei leerer Tabelle wechselt in Update-Form des neuen Records (kein zweiter Create möglich)", async () => {
+    let created = false;
+    const write = mock(async (type: string) => {
+      if (type === "tasks:write:task:create") {
+        created = true;
+        return { isSuccess: true, data: { id: "task-1" } };
+      }
+      return { isSuccess: true, data: {} };
+    });
+    const query = mock(async (type: string) => {
+      if (type === "tasks:query:task:list") {
+        return created
+          ? { isSuccess: true, data: { rows: [{ id: "task-1", title: "Created title" }] } }
+          : { isSuccess: true, data: { rows: [], nextCursor: null } };
+      }
+      if (type === "tasks:query:task:detail") {
+        return {
+          isSuccess: true,
+          data: { id: "task-1", version: 1, title: "Created title", count: 0, done: false },
+        };
+      }
+      return { isSuccess: true, data: { rows: [], nextCursor: null } };
+    });
+    const dispatcher = makeDispatcher({
+      write: write as unknown as Dispatcher["write"],
+      query: query as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "Created title" } });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    // The singleton wrapper refetches its list(limit:1) query after the
+    // create succeeds, sees the new row, and switches from the create body
+    // to the update body — which loads the record via its own detail
+    // query, landing on the same title through a different data path.
+    await waitFor(() => {
+      const input = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+      expect(input.value).toBe("Created title");
+    });
+    expect(query).toHaveBeenCalledWith(
+      "tasks:query:task:detail",
+      { id: "task-1" },
+      expect.anything(),
+    );
+
+    // A second submit on the (now update-mode) form must dispatch an
+    // update, never a second create.
+    fireEvent.change(screen.getByTestId("field-title").querySelector("input") as HTMLInputElement, {
+      target: { value: "Edited again" },
+    });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+    // Exactly one create (the first submit) followed by an update, never a
+    // second create — the singleton wrapper must have flipped branches.
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(2));
+    expect(write).toHaveBeenLastCalledWith("tasks:write:task:update", expect.anything());
+  });
+});

package/src/__tests__/kumiko-screen.test.tsx

@@ -2387,201 +2387,10 @@ describe("KumikoScreen: update-only entityEdit (allowCreate/allowDelete)", () =>
 // Singleton entities (exactly one record per tenant) have no nav path
 // that supplies an entityId. `singleton: true` resolves the existing
 // record via list(limit:1) before deciding create vs update.
-describe("KumikoScreen: singleton entityEdit", () => {
-  const singletonEdit: EntityEditScreenDefinition = {
-    id: "task-edit",
-    type: "entityEdit",
-    entity: "task",
-    singleton: true,
-    layout: { sections: [{ title: "Basics", fields: ["title"] }] },
-  };
-  const singletonSchema: FeatureSchema = {
-    featureName: "tasks",
-    entities: { task: taskEntity },
-    screens: [singletonEdit],
-  };
-
-  test("kein vorhandener Record → rendert leeres Create-Form", async () => {
-    const queryCalls: { type: string; payload: unknown }[] = [];
-    const dispatcher = makeDispatcher({
-      query: (async (type: string, payload: unknown) => {
-        queryCalls.push({ type, payload });
-        return { isSuccess: true, data: { rows: [], nextCursor: null } };
-      }) as unknown as Dispatcher["query"],
-    });
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
-    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
-    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
-    expect(titleInput.value).toBe("");
-    expect(queryCalls).toEqual([{ type: "tasks:query:task:list", payload: { limit: 1 } }]);
-  });
-
-  test("vorhandener Record → lädt ihn (Update-Form, prefilled) statt Create", async () => {
-    const queryCalls: { type: string; payload: unknown }[] = [];
-    const dispatcher = makeDispatcher({
-      query: (async (type: string, payload: unknown) => {
-        queryCalls.push({ type, payload });
-        if (type.endsWith(":list")) {
-          return {
-            isSuccess: true,
-            data: { rows: [{ id: "task-1", title: "loaded-title" }], nextCursor: null },
-          };
-        }
-        return {
-          isSuccess: true,
-          data: { id: "task-1", version: 1, title: "loaded-title", count: 0, done: false },
-        };
-      }) as unknown as Dispatcher["query"],
-    });
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    // Two sequential loading cycles (list, then detail once the singleton
-    // wrapper hands off to EntityEditUpdateBody) — default waitFor timeout
-    // can be too tight under CI's shared-process test load.
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull(), {
-      timeout: 5000,
-    });
-    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
-    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
-    expect(titleInput.value).toBe("loaded-title");
-    // Anchor: the id resolved from list(limit:1) reaches the detail query —
-    // otherwise the form would render empty/create-mode instead of loading it.
-    expect(queryCalls).toContainEqual({
-      type: "tasks:query:task:detail",
-      payload: { id: "task-1" },
-    });
-  });
-
-  test("allowCreate:false + leere Tabelle → Fehler-Banner statt Create-Form", async () => {
-    const disabledSchema: FeatureSchema = {
-      featureName: "tasks",
-      entities: { task: taskEntity },
-      screens: [{ ...singletonEdit, allowCreate: false }],
-    };
-    const dispatcher = makeDispatcher({
-      query: (async () => ({
-        isSuccess: true,
-        data: { rows: [], nextCursor: null },
-      })) as unknown as Dispatcher["query"],
-    });
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={disabledSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
-    expect(screen.getByTestId("kumiko-screen-create-disabled")).toBeTruthy();
-    expect(screen.queryByTestId("render-edit-form")).toBeNull();
-  });
-
-  // The singleton wrapper fires its own list(limit:1) query up front — a
-  // screen whose `list` handler has stricter access.roles than its `edit`
-  // handler used to render fine (no query ran before this feature) and now
-  // flips to an error banner instead. No test caught that regression.
-  test("list-Query schlägt fehl → Fehler-Banner statt Create-Form", async () => {
-    const dispatcher = makeDispatcher({
-      query: (async () => ({
-        isSuccess: false,
-        error: {
-          code: "access_denied",
-          httpStatus: 403,
-          i18nKey: "errors.access.denied",
-          message: "",
-        },
-      })) as unknown as Dispatcher["query"],
-    });
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
-    const bannerText = screen.getByTestId("kumiko-screen-error").textContent;
-    expect(bannerText).toBe(kumikoDefaultTranslations["en"]?.["errors.access.denied"] ?? "");
-    expect(screen.queryByTestId("render-edit-form")).toBeNull();
-  });
-
-  // kumiko-screen#1944: EntityEditSingletonBody runs without a wrapping
-  // entityList screen, so the create-body's default "navigate back to the
-  // list" success handler is a silent no-op — a successful create used to
-  // leave the form stuck on the just-submitted create values, and a second
-  // submit created a duplicate record ("exactly one record per tenant"
-  // broken). Create on an empty table must now switch straight to the
-  // update form of the newly created record.
-  test("erfolgreicher Create bei leerer Tabelle wechselt in Update-Form des neuen Records (kein zweiter Create möglich)", async () => {
-    let created = false;
-    const write = mock(async (type: string) => {
-      if (type === "tasks:write:task:create") {
-        created = true;
-        return { isSuccess: true, data: { id: "task-1" } };
-      }
-      return { isSuccess: true, data: {} };
-    });
-    const query = mock(async (type: string) => {
-      if (type === "tasks:query:task:list") {
-        return created
-          ? { isSuccess: true, data: { rows: [{ id: "task-1", title: "Created title" }] } }
-          : { isSuccess: true, data: { rows: [], nextCursor: null } };
-      }
-      if (type === "tasks:query:task:detail") {
-        return {
-          isSuccess: true,
-          data: { id: "task-1", version: 1, title: "Created title", count: 0, done: false },
-        };
-      }
-      return { isSuccess: true, data: { rows: [], nextCursor: null } };
-    });
-    const dispatcher = makeDispatcher({
-      write: write as unknown as Dispatcher["write"],
-      query: query as unknown as Dispatcher["query"],
-    });
-
-    render(
-      <DispatcherProvider dispatcher={dispatcher}>
-        <KumikoScreen schema={singletonSchema} qn="tasks:screen:task-edit" />
-      </DispatcherProvider>,
-    );
-    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
-
-    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
-    fireEvent.change(titleInput, { target: { value: "Created title" } });
-    fireEvent.click(screen.getByTestId("render-edit-submit"));
-
-    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
-    // The singleton wrapper refetches its list(limit:1) query after the
-    // create succeeds, sees the new row, and switches from the create body
-    // to the update body — which loads the record via its own detail
-    // query, landing on the same title through a different data path.
-    await waitFor(() => {
-      const input = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("Created title");
-    });
-    expect(query).toHaveBeenCalledWith(
-      "tasks:query:task:detail",
-      { id: "task-1" },
-      expect.anything(),
-    );
-
-    // A second submit on the (now update-mode) form must dispatch an
-    // update, never a second create.
-    fireEvent.change(screen.getByTestId("field-title").querySelector("input") as HTMLInputElement, {
-      target: { value: "Edited again" },
-    });
-    fireEvent.click(screen.getByTestId("render-edit-submit"));
-    // Exactly one create (the first submit) followed by an update, never a
-    // second create — the singleton wrapper must have flipped branches.
-    await waitFor(() => expect(write).toHaveBeenCalledTimes(2));
-    expect(write).toHaveBeenLastCalledWith("tasks:write:task:update", expect.anything());
-  });
-});
+// KumikoScreen: singleton entityEdit — moved to
+// kumiko-screen-singleton-entity-edit.test.tsx (#2495): its create->update
+// submit test needs its own isolated bun test process (#457 shared
+// single-process happy-dom event-delegation corruption).
 
 // --- actionForm extension-section (Wave J: Incident-Update-Timeline) ---
 // actionForm hat keinen record — Extension-Sections bekommen stattdessen

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -196,6 +196,22 @@ describe("defaultCellRender", () => {
     expect(defaultCellRender("op-x", "select", { "op-x": "Operativ X" })).toBe("Operativ X");
   });
 
+  test("multiSelect → Werte gejoint mit ', ', optionLabel gewinnt vor humanizeSlug pro Wert (fw#2491)", () => {
+    expect(
+      defaultCellRender(["op-x", "degraded-performance"], "multiSelect", {
+        "op-x": "Operativ X",
+      }),
+    ).toBe("Operativ X, Degraded performance");
+  });
+
+  test("multiSelect → leeres Array liefert leeren String", () => {
+    expect(defaultCellRender([], "multiSelect")).toBe("");
+  });
+
+  test("multiSelect → einzelner Nicht-Array-Wert wird wie select behandelt (defensive)", () => {
+    expect(defaultCellRender("op-x", "multiSelect", { "op-x": "Operativ X" })).toBe("Operativ X");
+  });
+
   test("text → String-Repräsentation", () => {
     expect(defaultCellRender("hallo", "text")).toBe("hallo");
   });

package/src/primitives/index.tsx

@@ -1445,7 +1445,7 @@ function isMoneyValue(value: unknown): value is MoneyCellValue {
 //   - boolean → ✓ / leer
 //   - timestamp/date → locale-formatiert (kein roher ISO-String)
 //   - number/decimal/bigInt → locale-formatted via Intl.NumberFormat (fw#2160)
-//   - select → human-lesbar (kebab-case → Title Case)
+//   - select/multiSelect → human-readable (kebab-case → Title Case), multiSelect values joined with ", "
 //   - money → { amount, currency } formatted via Intl (not "[object Object]")
 //   - text/else → toString
 export function defaultCellRender(
@@ -1473,15 +1473,19 @@ export function defaultCellRender(
     const minor = Math.round(value.amount * 10 ** currencyDecimals(value.currency));
     return formatMoney(minor, value.currency, locale);
   }
-  if (type === "select") {
-    const raw = String(value);
-    // Translated Label aus dem ViewModel-Builder (Convention-Key
-    // `<feature>:entity:<entity>:field:<field>:option:<value>`).
-    // Fallback humanizeSlug wenn kein Label registriert — gleiches
-    // Verhalten wie vor dem optionLabels-Patch.
-    const translated = optionLabels?.[raw];
-    if (translated !== undefined && translated !== raw) return translated;
-    return humanizeSlug(raw);
+  if (type === "select" || type === "multiSelect") {
+    const values = Array.isArray(value) ? value : [value];
+    return values
+      .map((v) => {
+        const raw = String(v);
+        // Translated label from the view-model builder (convention key
+        // `<feature>:entity:<entity>:field:<field>:option:<value>`).
+        // Fallback to humanizeSlug when no label is registered — same
+        // behavior as before the optionLabels patch.
+        const translated = optionLabels?.[raw];
+        return translated !== undefined && translated !== raw ? translated : humanizeSlug(raw);
+      })
+      .join(", ");
   }
   return typeof value === "string" ? value : String(value);
 }