@cosmicdrift/kumiko-renderer-web 0.232.0 → 0.234.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.232.0",
+  "version": "0.234.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.232.0",
-    "@cosmicdrift/kumiko-headless": "0.232.0",
-    "@cosmicdrift/kumiko-renderer": "0.232.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.234.0",
+    "@cosmicdrift/kumiko-headless": "0.234.0",
+    "@cosmicdrift/kumiko-renderer": "0.234.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.232.0"
+    "@cosmicdrift/kumiko-locale-de": "0.234.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/app-layout.test.tsx

@@ -1,6 +1,7 @@
-// AppLayout: pinnt den fill-Vertrag — Default ist der klassische
-// min-h-screen-Seitenflow, fill schaltet auf h-screen + innen-scrollendes
-// main (min-h-0). Plus die className/mainClassName-Erweiterungspunkte.
+// AppLayout: pinnt den fill-Vertrag — Default ist die viewport-hohe
+// Shell (h-screen, main scrollt innen via min-h-0), fill={false} ist der
+// Escape-Hatch auf den klassischen min-h-screen-Seitenflow.
+// Plus die className/mainClassName-Erweiterungspunkte.
 
 import { describe, expect, test } from "bun:test";
 import { AppLayout } from "../layout/app-layout";
@@ -13,23 +14,23 @@ function root(container: HTMLElement): HTMLElement {
 }
 
 describe("AppLayout fill", () => {
-  test("Default → min-h-screen (Seiten-Scroll), kein fill-Marker", () => {
+  test("Default → h-screen + main min-h-0 (Innen-Scroll), fill-Marker gesetzt", () => {
     const { container } = render(<AppLayout>x</AppLayout>);
     const el = root(container);
-    expect(el.className).toContain("min-h-screen");
-    expect(el.getAttribute("data-kumiko-fill")).toBeNull();
-    expect((container.querySelector("main") as HTMLElement).className).not.toContain("min-h-0");
-  });
-
-  test("fill → h-screen + main min-h-0 (Innen-Scroll), fill-Marker gesetzt", () => {
-    const { container } = render(<AppLayout fill>x</AppLayout>);
-    const el = root(container);
     expect(el.className).not.toContain("min-h-screen");
     expect(el.className).toContain("h-screen");
     expect(el.getAttribute("data-kumiko-fill")).toBe("true");
     expect((container.querySelector("main") as HTMLElement).className).toContain("min-h-0");
   });
 
+  test("fill={false} → min-h-screen (Seiten-Scroll), kein fill-Marker (Escape-Hatch)", () => {
+    const { container } = render(<AppLayout fill={false}>x</AppLayout>);
+    const el = root(container);
+    expect(el.className).toContain("min-h-screen");
+    expect(el.getAttribute("data-kumiko-fill")).toBeNull();
+    expect((container.querySelector("main") as HTMLElement).className).not.toContain("min-h-0");
+  });
+
   test("className/mainClassName werden an die Defaults angehängt", () => {
     const { container } = render(
       <AppLayout className="bg-gradient-test" mainClassName="main-test">

package/src/__tests__/default-app-shell.test.tsx

@@ -130,3 +130,36 @@ describe("DefaultAppShell wires user.roles into children for screen-level access
     expect(screen.queryByTestId("kumiko-screen-access-denied")).toBeNull();
   });
 });
+
+describe("DefaultAppShell fill default", () => {
+  test("fill defaults to true: applies h-svh on root and min-h-0 on inset/main", () => {
+    render(
+      <DefaultAppShell brand={<span>Brand</span>} schema={makeSchema()}>
+        <div>content</div>
+      </DefaultAppShell>,
+    );
+    const root = document.querySelector('[data-slot="sidebar-wrapper"]');
+    expect(root?.classList.contains("h-svh")).toBe(true);
+    const inset = document.querySelector('[data-slot="sidebar-inset"]');
+    expect(inset?.classList.contains("min-h-0")).toBe(true);
+    const mains = screen.getAllByRole("main");
+    const innerMain = mains.find((m) => m !== inset);
+    expect(innerMain?.classList.contains("min-h-0")).toBe(true);
+    expect(innerMain?.classList.contains("flex-1")).toBe(true);
+    expect(innerMain?.classList.contains("overflow-auto")).toBe(true);
+  });
+
+  // fill={false} is the escape hatch back to page-scroll: must not apply
+  // viewport-lock classes.
+  test("fill={false} does not apply h-svh or min-h-0", () => {
+    render(
+      <DefaultAppShell brand={<span>Brand</span>} schema={makeSchema()} fill={false}>
+        <div>content</div>
+      </DefaultAppShell>,
+    );
+    const root = document.querySelector('[data-slot="sidebar-wrapper"]');
+    expect(root?.classList.contains("h-svh")).toBe(false);
+    const inset = document.querySelector('[data-slot="sidebar-inset"]');
+    expect(inset?.classList.contains("min-h-0")).toBe(false);
+  });
+});

package/src/__tests__/form-action-bar.test.tsx

@@ -15,21 +15,70 @@ import { createMockDispatcher, render, screen } from "./test-utils";
 const { Form, Section, Button } = defaultPrimitives;
 
 describe("DefaultForm Action-Footer", () => {
-  test("Actions sitzen rechtsbündig am Form-Ende (border-t), Titel ist Heading", () => {
+  test("Actions sitzen am Form-Ende (border-t, sm:justify-between), Titel ist Heading", () => {
     render(
       <Form onSubmit={() => {}} title="Titel" actions={<Button>Save</Button>} testId="f">
         <div>body</div>
       </Form>,
     );
     const actions = screen.getByTestId("f-actions");
-    expect(actions.className).toContain("justify-end");
-    expect(actions.className).toContain("border-t");
+    // The border/layout classes live on the outer footer container (which
+    // also wraps the optional secondaryActions group), not on the inner
+    // `-actions` div itself.
+    const footer = actions.parentElement as HTMLElement;
+    expect(footer.className).toContain("sm:justify-between");
+    expect(footer.className).toContain("border-t");
     // Footer sits in the form shell (buttons align with the field edge).
-    expect(actions.closest(".max-w-full")).toBeTruthy();
+    expect(actions.closest(".max-w-4xl")).toBeTruthy();
     // Title is its own heading above — not inside the action bar.
     expect(actions.textContent).not.toContain("Titel");
     expect(screen.getByTestId("f-title").textContent).toBe("Titel");
   });
+
+  test("secondaryActions + actions: zwei Gruppen mit eigenen testIds, Container flex-col-reverse", () => {
+    render(
+      <Form
+        onSubmit={() => {}}
+        actions={<Button>Save</Button>}
+        secondaryActions={<Button variant="danger-ghost">Delete</Button>}
+        testId="f"
+      >
+        <div>body</div>
+      </Form>,
+    );
+    const secondary = screen.getByTestId("f-actions-secondary");
+    const main = screen.getByTestId("f-actions");
+    expect(secondary.textContent).toBe("Delete");
+    expect(main.textContent).toBe("Save");
+    // Same outer footer container wraps both groups.
+    expect(secondary.parentElement).toBe(main.parentElement);
+    const footer = main.parentElement as HTMLElement;
+    expect(footer.className).toContain("flex-col-reverse");
+    expect(footer.className).toContain("sm:justify-between");
+  });
+
+  test("nur actions (keine secondaryActions): keine -actions-secondary-Gruppe", () => {
+    render(
+      <Form onSubmit={() => {}} actions={<Button>Save</Button>} testId="f">
+        <div>body</div>
+      </Form>,
+    );
+    expect(screen.queryByTestId("f-actions-secondary")).toBeNull();
+    expect(screen.getByTestId("f-actions").textContent).toBe("Save");
+  });
+
+  test("nur actions (keine secondaryActions): Gruppe bleibt rechtsbündig (sm:ml-auto)", () => {
+    render(
+      <Form onSubmit={() => {}} actions={<Button>Save</Button>} testId="f">
+        <div>body</div>
+      </Form>,
+    );
+    // justify-between on the footer only pushes the lone group to the edge
+    // when there's a second flex child to push away from — with a single
+    // child it falls back to flex-start, so the actions group needs its own
+    // margin to stay right-aligned on desktop.
+    expect(screen.getByTestId("f-actions").className).toContain("sm:ml-auto");
+  });
 });
 
 describe("DefaultSection ohne Titel", () => {

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

@@ -4,6 +4,7 @@ import type {
   EntityDefinition,
   EntityEditScreenDefinition,
   EntityListScreenDefinition,
+  ProjectionListScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { FeatureSchema, NavApi, NavTarget } from "@cosmicdrift/kumiko-renderer";
@@ -438,9 +439,9 @@ describe("KumikoScreen", () => {
   // Issue #912 — Copy-Link-Action. KumikoScreen threads an already-bound
   // onCopyLink callback down to RenderEdit (the actual URL-build/clipboard
   // impl lives in renderer-web's RoutedScreen, outside this test — here we
-  // only verify the wiring: button renders in update-mode, fires the
-  // callback, and shows the "copied" label afterwards).
-  test("entityEdit update-mode: Copy-Link-Button feuert onCopyLink + zeigt 'copied'-Label", async () => {
+  // only verify the wiring: button renders icon-only in update-mode, fires
+  // the callback, and swaps its accessible name to "copied" afterwards.
+  test("entityEdit update-mode: Copy-Link-Button feuert onCopyLink + zeigt 'copied'-Accessible-Name", async () => {
     const user = userEvent.setup();
     const onCopyLink = mock(() => Promise.resolve());
     const dispatcher = makeDispatcher({
@@ -462,7 +463,9 @@ describe("KumikoScreen", () => {
     await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
 
     const button = screen.getByTestId("render-edit-copy-link");
+    // Icon + visible label; accessible name comes from the label text itself.
     expect(button.textContent).toBe("Copy link");
+    expect(button.querySelector("svg")).toBeTruthy();
     await user.click(button);
     expect(onCopyLink).toHaveBeenCalledTimes(1);
     await waitFor(() => expect(button.textContent).toBe("Copied!"));
@@ -2449,3 +2452,290 @@ describe("KumikoScreen: actionForm extension-section", () => {
     expect(screen.getByTestId("update-timeline").textContent).toBe("inc-7");
   });
 });
+
+// --- entityEdit header actions (fw entityEdit-actions) ---
+// EntityEditScreenDefinition.actions mirrors ProjectionDetailScreenDefinition.
+// actions — same RenderEdit `actions` prop, same icon-only collapse rule
+// (shouldRenderActionsIconOnly: >2 actions, every one resolves an icon).
+describe("KumikoScreen: entityEdit header actions", () => {
+  const threeActionsScreen: EntityEditScreenDefinition = {
+    id: "task-edit-actions-3",
+    type: "entityEdit",
+    entity: "task",
+    layout: { sections: [{ title: "Basics", fields: ["title"] }] },
+    // ids match ACTION_ICON_BY_ID entries (publish/archive/duplicate) so
+    // every action resolves an icon without an explicit `icon` field.
+    actions: [
+      { id: "publish", label: "Publish", handler: "tasks:write:task:publish" },
+      { id: "archive", label: "Archive", handler: "tasks:write:task:archive" },
+      { id: "duplicate", label: "Duplicate", handler: "tasks:write:task:duplicate" },
+    ],
+  };
+  const twoActionsScreen: EntityEditScreenDefinition = {
+    ...threeActionsScreen,
+    id: "task-edit-actions-2",
+    actions: threeActionsScreen.actions?.slice(0, 2),
+  };
+  const actionsSchema: FeatureSchema = {
+    featureName: "tasks",
+    entities: { task: taskEntity },
+    screens: [threeActionsScreen, twoActionsScreen],
+  };
+  const detailDispatcher = () =>
+    makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { id: "task-1", version: 1, title: "loaded", count: 0, done: false },
+      })) as unknown as Dispatcher["query"],
+    });
+
+  test("update-mode mit drei Header-Actions kollabiert auf Icon-only mit ariaLabel", async () => {
+    render(
+      <DispatcherProvider dispatcher={detailDispatcher()}>
+        <KumikoScreen
+          schema={actionsSchema}
+          qn="tasks:screen:task-edit-actions-3"
+          entityId="task-1"
+        />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const cases = [
+      ["publish", "Publish"],
+      ["archive", "Archive"],
+      ["duplicate", "Duplicate"],
+    ] as const;
+    for (const [id, label] of cases) {
+      const button = screen.getByTestId(`render-edit-action-${id}`);
+      expect(button.textContent).toBe("");
+      expect(button.getAttribute("aria-label")).toBe(label);
+    }
+  });
+
+  test("update-mode mit zwei Header-Actions zeigt weiterhin sichtbaren Text", async () => {
+    render(
+      <DispatcherProvider dispatcher={detailDispatcher()}>
+        <KumikoScreen
+          schema={actionsSchema}
+          qn="tasks:screen:task-edit-actions-2"
+          entityId="task-1"
+        />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    expect(screen.getByTestId("render-edit-action-publish").textContent).toBe("Publish");
+    expect(screen.getByTestId("render-edit-action-archive").textContent).toBe("Archive");
+  });
+
+  test("update-mode mit drei Header-Actions kollabiert auch den Copy-Link-Button auf Icon-only mit ariaLabel", async () => {
+    render(
+      <DispatcherProvider dispatcher={detailDispatcher()}>
+        <KumikoScreen
+          schema={actionsSchema}
+          qn="tasks:screen:task-edit-actions-3"
+          entityId="task-1"
+          onCopyLink={() => Promise.resolve()}
+        />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+    const button = screen.getByTestId("render-edit-copy-link");
+    expect(button.textContent).toBe("");
+    expect(button.getAttribute("aria-label")).toBe("Copy link");
+  });
+
+  // Design decision (fw entityEdit-actions): actions target an EXISTING
+  // record (publish/archive/duplicate and friends) — create mode has none
+  // yet, so EntityEditCreateBody never builds a headerActions prop at all.
+  test("create-mode (kein entityId) rendert keine Header-Actions", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <KumikoScreen schema={actionsSchema} qn="tasks:screen:task-edit-actions-3" />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    expect(screen.queryByTestId("render-edit-action-publish")).toBeNull();
+    expect(screen.queryByTestId("render-edit-action-archive")).toBeNull();
+    expect(screen.queryByTestId("render-edit-action-duplicate")).toBeNull();
+  });
+});
+
+// --- entityList status cells + row actions (fw#2579, fw#2580) ---
+// Both are leftovers from #2575: the tone heuristic and the icon-only
+// collapse existed, but neither reached a list cell. These render the real
+// entityList pipeline (KumikoScreen -> EntityListBody -> RenderList ->
+// DataTable) against the real web primitives.
+describe("KumikoScreen: entityList cell rendering", () => {
+  const orderEntity = {
+    fields: {
+      title: { type: "text", required: true },
+      status: { type: "select", options: ["active", "unmapped-value", "constructor"] },
+    },
+  } as unknown as EntityDefinition;
+
+  const statusListScreen: EntityListScreenDefinition = {
+    id: "order-list",
+    type: "entityList",
+    entity: "order",
+    columns: ["title", "status"],
+  };
+
+  // publish/archive/duplicate all resolve an icon from their id
+  // (ACTION_ICON_BY_ID), which is what arms the icon-only collapse.
+  const rowActionListScreen: EntityListScreenDefinition = {
+    id: "order-list-actions",
+    type: "entityList",
+    entity: "order",
+    columns: ["title"],
+    rowActions: [
+      { id: "publish", label: "Publish", handler: "orders:write:order:publish" },
+      { id: "archive", label: "Archive", handler: "orders:write:order:archive" },
+      { id: "duplicate", label: "Duplicate", handler: "orders:write:order:duplicate" },
+    ],
+  };
+
+  // "review" has no icon in ACTION_ICON_BY_ID, so this group must stay on
+  // the adaptive default (kebab) instead of collapsing.
+  const mixedActionListScreen: EntityListScreenDefinition = {
+    id: "order-list-mixed",
+    type: "entityList",
+    entity: "order",
+    columns: ["title"],
+    rowActions: [
+      { id: "publish", label: "Publish", handler: "orders:write:order:publish" },
+      { id: "archive", label: "Archive", handler: "orders:write:order:archive" },
+      { id: "review", label: "Review", handler: "orders:write:order:review" },
+    ],
+  };
+
+  // projectionList reaches the same RenderList/DataTable path, so the collapse
+  // has to hold there too.
+  const projectionActionListScreen: ProjectionListScreenDefinition = {
+    id: "order-projection-actions",
+    type: "projectionList",
+    query: "orders:query:order:list",
+    columns: [{ field: "title", label: "Title" }],
+    rowActions: [
+      {
+        kind: "writeHandler",
+        id: "publish",
+        label: "Publish",
+        handler: "orders:write:order:publish",
+      },
+      {
+        kind: "writeHandler",
+        id: "archive",
+        label: "Archive",
+        handler: "orders:write:order:archive",
+      },
+      {
+        kind: "writeHandler",
+        id: "duplicate",
+        label: "Duplicate",
+        handler: "orders:write:order:duplicate",
+      },
+    ],
+  };
+
+  const orderSchema: FeatureSchema = {
+    featureName: "orders",
+    entities: { order: orderEntity },
+    screens: [
+      statusListScreen,
+      rowActionListScreen,
+      mixedActionListScreen,
+      projectionActionListScreen,
+    ],
+  };
+
+  function orderDispatcher(rows: readonly Record<string, unknown>[]): Dispatcher {
+    return makeDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { rows, nextCursor: null },
+      })) as unknown as Dispatcher["query"],
+    });
+  }
+
+  async function renderOrderList(
+    qn: string,
+    rows: readonly Record<string, unknown>[],
+  ): Promise<void> {
+    render(
+      <DispatcherProvider dispatcher={orderDispatcher(rows)}>
+        <KumikoScreen schema={orderSchema} qn={qn} />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+  }
+
+  test("a known status value renders a toned badge, not the muted default (#2579)", async () => {
+    await renderOrderList("orders:screen:order-list", [
+      { id: "r1", title: "First", status: "active" },
+    ]);
+
+    const badge = screen.getByTestId("cell-r1-status").firstElementChild;
+    expect(badge?.className).toContain("text-status-ok");
+    expect(badge?.className).not.toContain("text-muted-foreground");
+    expect(badge?.textContent).toBe("Active");
+  });
+
+  test("an unmapped select value keeps the neutral pill (#2579)", async () => {
+    await renderOrderList("orders:screen:order-list", [
+      { id: "r1", title: "First", status: "unmapped-value" },
+    ]);
+
+    const badge = screen.getByTestId("cell-r1-status").firstElementChild;
+    expect(badge?.className).toContain("text-muted-foreground");
+    expect(badge?.className).not.toContain("text-status-ok");
+  });
+
+  test("an Object.prototype key is not mistaken for a tone (#2579)", async () => {
+    await renderOrderList("orders:screen:order-list", [
+      { id: "r1", title: "First", status: "constructor" },
+    ]);
+
+    const badge = screen.getByTestId("cell-r1-status").firstElementChild;
+    expect(badge?.className).toContain("text-muted-foreground");
+  });
+
+  test("three icon-bearing row actions collapse to icon-only buttons (#2580)", async () => {
+    await renderOrderList("orders:screen:order-list-actions", [{ id: "r1", title: "First" }]);
+
+    expect(screen.queryByTestId("row-r1-actions-menu")).toBeNull();
+    for (const [id, label] of [
+      ["publish", "Publish"],
+      ["archive", "Archive"],
+      ["duplicate", "Duplicate"],
+    ] as const) {
+      const button = screen.getByTestId(`row-r1-action-${id}`);
+      expect(button.textContent).toBe("");
+      expect(button.getAttribute("aria-label")).toBe(label);
+    }
+  });
+
+  test("projectionList row actions collapse the same way (#2580)", async () => {
+    await renderOrderList("orders:screen:order-projection-actions", [{ id: "r1", title: "First" }]);
+
+    expect(screen.queryByTestId("row-r1-actions-menu")).toBeNull();
+    for (const [id, label] of [
+      ["publish", "Publish"],
+      ["archive", "Archive"],
+      ["duplicate", "Duplicate"],
+    ] as const) {
+      const button = screen.getByTestId(`row-r1-action-${id}`);
+      expect(button.textContent).toBe("");
+      expect(button.getAttribute("aria-label")).toBe(label);
+    }
+  });
+
+  test("a row-action group with an icon-less member stays on the kebab (#2580)", async () => {
+    await renderOrderList("orders:screen:order-list-mixed", [{ id: "r1", title: "First" }]);
+
+    expect(screen.queryByTestId("row-r1-actions-menu")).not.toBeNull();
+    expect(screen.queryByTestId("row-r1-action-publish")).toBeNull();
+  });
+});