@cosmicdrift/kumiko-renderer-web 0.43.0 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.43.0",
+  "version": "0.45.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>",

package/src/__tests__/config-cascade.test.tsx

@@ -5,7 +5,7 @@
 // obwohl er nur die Tenant-Ebene beeinflussen kann. Jetzt: Keys leben
 // als kumiko.config.* in kumikoDefaultTranslations, und Nicht-System-
 // Screens kollabieren alles oberhalb des Screen-Scopes zu EINER
-// neutralen "Preset"-Zeile.
+// neutralen "Standard"-Zeile (Bug-Bash 3 #11: ein durchgängiger Begriff).
 
 import { describe, expect, test } from "bun:test";
 import type { ConfigCascade, ConfigCascadeLevel } from "@cosmicdrift/kumiko-framework/engine";
@@ -78,31 +78,31 @@ describe("ConfigCascadeView — i18n (Bug 7)", () => {
 });
 
 describe("ConfigCascadeView — Scope-Filter (Bug 8)", () => {
-  test("screenScope=tenant: Operator-Ebenen sind unsichtbar, EIN Preset-Fallback bleibt", async () => {
+  test("screenScope=tenant: Operator-Ebenen sind unsichtbar, EIN neutraler Standard-Fallback bleibt", async () => {
     const user = userEvent.setup();
     const view = render(<ConfigCascadeView cascade={tenantCascade()} screenScope="tenant" />);
     await user.click(screen.getByRole("button"));
 
-    // Sichtbar: Tenant-Zeile + genau eine neutrale Preset-Zeile.
+    // Sichtbar: Tenant-Zeile + genau eine neutrale "Standard"-Zeile (Bug-Bash 3
+    // #11: ein durchgängiger Begriff, EN-Locale → "Default").
     expect(view.container.textContent).toContain("Tenant");
-    expect(view.container.textContent).toContain("Preset");
+    expect(view.container.textContent).toContain("Default");
     // Unsichtbar: alles was nur der Operator steuert.
     expect(view.container.textContent).not.toContain("System");
     expect(view.container.textContent).not.toContain("App override");
     expect(view.container.textContent).not.toContain("Computed");
-    // Der deklarierte Default erscheint als Preset-Wert, nicht als
-    // eigene "Default"-Ebene.
+    // Der deklarierte Default erscheint als Wert der neutralen Standard-Zeile,
+    // nicht als eigene Operator-Ebene.
     expect(view.container.textContent).toContain("fallback");
-    expect(view.container.textContent).not.toContain("Default");
   });
 
-  test("screenScope=tenant mit aktivem System-Wert: Preset zeigt den effektiven Wert, nicht die Quelle", async () => {
+  test("screenScope=tenant mit aktivem System-Wert: Standard-Zeile zeigt den effektiven Wert, nicht die Quelle", async () => {
     const user = userEvent.setup();
     const view = render(
       <ConfigCascadeView cascade={tenantCascade({ systemActive: true })} screenScope="tenant" />,
     );
     // Collapsed-Header leakt die Operator-Quelle nicht …
-    expect(view.container.textContent).toContain("Preset");
+    expect(view.container.textContent).toContain("Default");
     expect(view.container.textContent).toContain("system-smtp");
     expect(view.container.textContent).not.toContain("System");
 

package/src/__tests__/config-edit.test.tsx

@@ -169,9 +169,9 @@ describe("KumikoScreen / configEdit", () => {
 
   // Regression Bug-Bash-2 (2026-06-08): RenderEdit reichte denselben
   // Appendix-Callback als labelAppendix UND fieldAppendix durch —
-  // Badge + Vorgabe-Disclosure erschienen doppelt (vor und nach dem
+  // Badge + Standard-Disclosure erschienen doppelt (vor und nach dem
   // Input) auf jedem Settings-Screen mit Default-Werten.
-  test("Source-Badge und Vorgabe-Disclosure erscheinen genau einmal pro Feld", async () => {
+  test("Source-Badge und Standard-Disclosure erscheinen genau einmal pro Feld", async () => {
     const dispatcher: Dispatcher = createMockDispatcher({
       query: (async (qn: string) => {
         if (qn === "config:query:cascade") {

package/src/__tests__/primitives.test.tsx

@@ -569,6 +569,41 @@ describe("DataTable", () => {
       expect(screen.queryByTestId("row-r1-action-a")).toBeNull();
     });
 
+    test("rowActionMode='inline': IMMER Inline-Buttons, kein Kebab auch bei >2 (#9)", () => {
+      render(
+        <DataTable
+          columns={cols}
+          rows={rows}
+          testId="dt"
+          rowActionMode="inline"
+          rowActions={[
+            { id: "a", label: "A", onTrigger: mock() },
+            { id: "b", label: "B", onTrigger: mock() },
+            { id: "c", label: "C", onTrigger: mock() },
+          ]}
+        />,
+      );
+      expect(screen.queryByTestId("row-r1-actions-menu")).toBeNull();
+      expect(screen.queryByTestId("row-r1-action-a")).not.toBeNull();
+      expect(screen.queryByTestId("row-r1-action-b")).not.toBeNull();
+      expect(screen.queryByTestId("row-r1-action-c")).not.toBeNull();
+    });
+
+    test("rowActionMode='inline': Buttons linksbündig + w-full (alignt über Rows, #8)", () => {
+      render(
+        <DataTable
+          columns={cols}
+          rows={rows}
+          testId="dt"
+          rowActionMode="inline"
+          rowActions={[{ id: "edit", label: "Edit", onTrigger: mock() }]}
+        />,
+      );
+      const group = screen.getByTestId("row-r1-action-edit").parentElement;
+      expect(group?.className).toContain("justify-start");
+      expect(group?.className).toContain("w-full");
+    });
+
     test("Kebab: Click auf Trigger öffnet Dropdown mit allen Items", async () => {
       const user = userEvent.setup();
       render(

package/src/__tests__/render-edit.test.tsx

@@ -7,8 +7,11 @@ import type { Dispatcher, SubmitResult } from "@cosmicdrift/kumiko-headless";
 import {
   DispatcherProvider,
   ExtensionSectionsProvider,
+  type ExtensionSubmitContext,
   RenderEdit,
+  useExtensionFormSubmit,
 } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
 import { act, createMockDispatcher, fireEvent, render, screen } from "./test-utils";
 
 const orderEntity = {
@@ -320,3 +323,81 @@ describe("RenderEdit", () => {
     expect(placeholder.textContent).toContain("UnregisteredComp");
   });
 });
+
+describe("RenderEdit — composed extension save (Bug-Bash 3 #1)", () => {
+  const screenDef: EntityEditScreenDefinition = {
+    id: "orders:screen:order-edit",
+    type: "entityEdit",
+    entity: "order",
+    layout: {
+      sections: [
+        { title: "Basics", columns: 2, fields: [{ field: "title", span: 2 }] },
+        {
+          kind: "extension",
+          title: "Custom Fields",
+          component: { react: { __component: "ComposedCF" } },
+        },
+      ],
+    },
+  };
+
+  function renderWith(
+    submitSpy: (ctx: ExtensionSubmitContext) => void,
+    writeSpy: Dispatcher["write"],
+  ): void {
+    const ComposedCF = (_: { entityName: string; entityId: string | null }) => {
+      const [touched, setTouched] = useState(false);
+      useExtensionFormSubmit({
+        dirty: touched,
+        onSubmit: async (ctx) => {
+          submitSpy(ctx);
+          return { isSuccess: true as const };
+        },
+      });
+      return (
+        <button type="button" data-testid="composed-touch" onClick={() => setTouched(true)}>
+          touch
+        </button>
+      );
+    };
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher(writeSpy)}>
+        <ExtensionSectionsProvider value={{ ComposedCF }}>
+          <RenderEdit<TestValues>
+            screen={screenDef}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "Existing", count: 0, isUrgent: false } as TestValues}
+            entityId="order-99"
+            writeCommand="order:update"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+  }
+
+  test("Section-dirty aktiviert den Haupt-Save; CF-only-Save ruft den Handler ohne Main-Write", async () => {
+    const submitSpy = mock();
+    const writeSpy = mock(async () => ({
+      isSuccess: true,
+      data: { id: "order-99" },
+    })) as unknown as Dispatcher["write"];
+    renderWith(submitSpy, writeSpy);
+
+    // Main unverändert + Section nicht dirty → Save disabled.
+    expect((screen.getByTestId("render-edit-submit") as HTMLButtonElement).disabled).toBe(true);
+
+    // Section dirty machen → Save enabled (composed-dirty propagiert hoch).
+    act(() => {
+      fireEvent.click(screen.getByTestId("composed-touch"));
+    });
+    expect((screen.getByTestId("render-edit-submit") as HTMLButtonElement).disabled).toBe(false);
+
+    // Save → Section-Handler mit entityId; KEIN Main-Write (main unverändert).
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("render-edit-submit"));
+    });
+    expect(submitSpy).toHaveBeenCalledWith({ entityId: "order-99" });
+    expect(writeSpy).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/render-list.test.tsx

@@ -161,7 +161,7 @@ describe("RenderList — slots.header", () => {
     slots: { header: { react: { __component: "list-cap-header" } } },
   };
 
-  test("rendert die registrierte header-Component über der Tabelle (entityId null)", () => {
+  test("rendert die header-Component in der Toolbar, nicht über dem Titel (#12)", () => {
     render(
       <ExtensionSectionsProvider value={{ "list-cap-header": ListHeader }}>
         <RenderList screen={screenWithHeader} entity={taskEntity} rows={[]} featureName="tasks" />
@@ -171,6 +171,11 @@ describe("RenderList — slots.header", () => {
     expect(header.textContent).toContain("header for task");
     // Listen-Kontext → keine Row → entityId null.
     expect(header.textContent).toContain("id=null");
+    // Placement-Regression (Bug-Bash 3 #12): der Header-Slot lebt IM
+    // Toolbar-Container (toolbarEnd), NICHT als loser Node über dem
+    // Screen-Titel.
+    const toolbar = screen.getByTestId("render-list-table-toolbar");
+    expect(toolbar.contains(header)).toBe(true);
   });
 
   test("ohne slots.header wird nichts gerendert (kein Crash)", () => {

package/src/components/config-cascade.tsx

@@ -102,10 +102,13 @@ function toDisplayLevels(
     {
       level: fallback,
       badgeSource: "default",
-      // Neutral "Vorgabe" statt System/Override/Computed — der Screen-
-      // Scope kann diese Ebenen weder setzen noch zurücksetzen, die
-      // Quelle ist für ihn Operator-Interna.
-      badgeLabelKey: "kumiko.config.cascade.preset",
+      // Ein durchgängiger Begriff "Standard" (DE) / "Default" (EN) — derselbe
+      // Key wie das Feld-Label-Badge (kumiko.config.source.default), damit
+      // Badge + Cascade-Disclosure NICHT zwei verschiedene Wörter zeigen
+      // (Bug-Bash 3 #11). Der Screen-Scope kann die Operator-Ebenen
+      // (System/Override/Computed) weder setzen noch zurücksetzen, deshalb
+      // erscheinen sie hier neutral als "Standard".
+      badgeLabelKey: "kumiko.config.source.default",
     },
   ];
 }

package/src/primitives/index.tsx

@@ -12,6 +12,7 @@ import type { ListRowViewModel } from "@cosmicdrift/kumiko-headless";
 import { applyFormatSpec } from "@cosmicdrift/kumiko-headless";
 import type {
   DataTableRowAction,
+  DataTableRowActionMode,
   DataTableSort,
   DataTableSortDir,
 } from "@cosmicdrift/kumiko-renderer";
@@ -393,6 +394,7 @@ function DefaultDataTable({
   loadingMore,
   hasMore,
   rowActions,
+  rowActionMode,
   testId,
 }: DataTableProps): ReactNode {
   // Toolbar-Wrapper: gemeinsamer Container für Toolbar+Tabelle damit
@@ -410,7 +412,7 @@ function DefaultDataTable({
     ) : (
       <div className="rounded-md border overflow-x-auto">
         <table data-testid={testId} className="w-full caption-bottom text-sm">
-          {tableInner(columns, rows, onRowClick, sort, onSortChange, rowActions)}
+          {tableInner(columns, rows, onRowClick, sort, onSortChange, rowActions, rowActionMode)}
         </table>
       </div>
     );
@@ -480,6 +482,7 @@ function tableInner(
   sort?: DataTableProps["sort"],
   onSortChange?: DataTableProps["onSortChange"],
   rowActions?: DataTableProps["rowActions"],
+  rowActionMode?: DataTableProps["rowActionMode"],
 ): ReactNode {
   const hasActions = rowActions !== undefined && rowActions.length > 0;
   return (
@@ -556,7 +559,7 @@ function tableInner(
                 onClick={(e) => e.stopPropagation()}
                 onKeyDown={(e) => e.stopPropagation()}
               >
-                <RowActionsCell row={row} actions={rowActions} />
+                <RowActionsCell row={row} actions={rowActions} mode={rowActionMode} />
               </td>
             )}
           </tr>
@@ -566,20 +569,36 @@ function tableInner(
   );
 }
 
-// RowActionsCell — entscheidet zwischen Inline-Buttons (≤2 actions) und
-// Kebab-Dropdown (>2). isVisible-Filter wird hier ausgeführt; eine action
-// die für eine Row unsichtbar ist, kommt nicht in den Render. Wenn alle
-// Actions für eine Row hidden sind, bleibt die Cell leer (keine
-// Phantom-Spalte).
+// RowActionsCell — rendert die Row-Actions je nach mode:
+//   - "adaptive" (Default): ≤2 sichtbare Actions inline (rechtsbündig),
+//     >2 als Kebab-Dropdown.
+//   - "inline": IMMER Inline-Buttons, linksbündig + full-width — auch bei
+//     >2 (kein Kebab). `w-full justify-start` heftet den ersten Button an
+//     die Spalten-Linkskante, damit er über alle Rows an derselben Position
+//     steht (sonst wandert er durch unterschiedlich breite Labels).
+// isVisible-Filter wird hier ausgeführt; eine action die für eine Row
+// unsichtbar ist, kommt nicht in den Render. Sind alle Actions hidden,
+// bleibt die Cell leer (keine Phantom-Spalte).
 function RowActionsCell({
   row,
   actions,
+  mode = "adaptive",
 }: {
   readonly row: ListRowViewModel;
   readonly actions: readonly DataTableRowAction[];
+  readonly mode?: DataTableRowActionMode;
 }): ReactNode {
   const visible = actions.filter((a) => a.isVisible === undefined || a.isVisible(row));
   if (visible.length === 0) return null;
+  if (mode === "inline") {
+    return (
+      <div className="flex w-full items-center gap-1 justify-start">
+        {visible.map((a) => (
+          <RowActionButton key={a.id} row={row} action={a} />
+        ))}
+      </div>
+    );
+  }
   if (visible.length <= 2) {
     return (
       <div className="inline-flex items-center gap-1 justify-end">