@cosmicdrift/kumiko-renderer-web 0.149.1 → 0.150.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.149.1",
+  "version": "0.150.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.149.1",
-    "@cosmicdrift/kumiko-headless": "0.149.1",
-    "@cosmicdrift/kumiko-renderer": "0.149.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.150.0",
+    "@cosmicdrift/kumiko-headless": "0.150.0",
+    "@cosmicdrift/kumiko-renderer": "0.150.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/projection-detail.test.tsx

@@ -0,0 +1,101 @@
+// Unit-Tests für den projectionDetail-Screen-Type (read-only single-row
+// inspector, kumiko-framework#255). Deckt den Pfad ab, der Integration/E2E
+// nicht prüft (e2e-generator skippt projectionDetail explizit — kein CRUD):
+//   - Row wird über idParam gefetcht, Felder zeigen die Query-Response-Werte
+//   - jedes Feld ist readOnly, kein Submit-Button (hasEditableSection=false)
+//   - fehlende entityId → Error-Banner statt Crash
+
+import { describe, expect, test } from "bun:test";
+import type { ProjectionDetailScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
+import { act, createMockDispatcher, render, screen, waitFor } from "./test-utils";
+
+const detailScreen: ProjectionDetailScreenDefinition = {
+  id: "session-detail",
+  type: "projectionDetail",
+  query: "sessions:query:user-session:detail",
+  idParam: "id",
+  layout: {
+    sections: [{ title: "Session", fields: ["userId", "createdAt"] }],
+  },
+  fieldLabels: {
+    userId: "sessions.detail.field.userId",
+    createdAt: "sessions.detail.field.createdAt",
+  },
+};
+
+const schema: FeatureSchema = {
+  featureName: "sessions",
+  entities: {},
+  screens: [detailScreen],
+};
+
+describe("KumikoScreen / projectionDetail", () => {
+  test("fetches the row via idParam and renders its fields read-only, no submit button", async () => {
+    const querySpy = (async (_qn: string, payload: unknown) => {
+      expect(payload).toEqual({ id: "sess-1" });
+      return {
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      };
+    }) as unknown as Dispatcher["query"];
+    const dispatcher: Dispatcher = createMockDispatcher({ query: querySpy });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="sessions:screen:session-detail" entityId="sess-1" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const userIdInput = screen.getByTestId("field-userId").querySelector("input");
+    expect(userIdInput?.value).toBe("user-42");
+    expect(userIdInput?.disabled).toBe(true);
+
+    // hasEditableSection() reads readOnly on every field — projectionDetail
+    // forces it hard in the shim, so RenderEdit must never draw a Save button.
+    expect(screen.queryByTestId("render-edit-submit")).toBeNull();
+  });
+
+  test("missing entityId shows an error banner instead of crashing", async () => {
+    let resolveQuery: (value: unknown) => void = () => {};
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (() =>
+        new Promise((resolve) => {
+          resolveQuery = resolve;
+        })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="sessions:screen:session-detail" />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("kumiko-screen-projection-detail-missing-id")).toBeTruthy();
+
+    // Screen skips the record entirely without entityId, but useQuery's
+    // effect still fired (unconditional hook call) — settle it so its async
+    // setState doesn't land after the test unmounts.
+    await act(async () => {
+      resolveQuery({ isSuccess: true, data: {} });
+      await Promise.resolve();
+    });
+  });
+
+  test("record not found shows an error banner", async () => {
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({ isSuccess: true, data: null })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={schema} qn="sessions:screen:session-detail" entityId="sess-missing" />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("kumiko-screen-record-missing"));
+  });
+});

package/src/__tests__/workspace-shell.test.tsx

@@ -834,4 +834,40 @@ describe("WorkspaceShell — EINE Nav", () => {
     // Die screen-children sind ersetzt, nicht zusätzlich gerendert.
     expect(screen.queryByText("content")).toBeNull();
   });
+
+  test("navBadges pass through to NavTree leaf items", () => {
+    const schema = {
+      featureName: "bmc",
+      entities: {},
+      screens: [],
+      navs: [
+        { id: "system", label: "System", screen: "bmc:screen:system" },
+        { id: "orders", label: "Orders", screen: "bmc:screen:orders" },
+      ],
+      workspaces: [
+        ws("admin", {
+          label: "Admin",
+          roles: ["admin"],
+          order: 1,
+          isDefault: true,
+          navMembers: ["bmc:nav:system", "bmc:nav:orders"],
+        }),
+      ],
+    } as const;
+
+    renderShell(
+      <WorkspaceShell
+        brand={<div>Brand</div>}
+        schema={schema}
+        user={{ id: "u1", roles: ["admin"] }}
+        navBadges={new Map([["orders", <span>3</span>]])}
+      >
+        <div>content</div>
+      </WorkspaceShell>,
+    );
+    const ordersItems = screen.getAllByText("Orders");
+    const systemItems = screen.getAllByText("System");
+    expect(ordersItems.some((el) => el.closest("li")?.textContent?.includes("3"))).toBe(true);
+    expect(systemItems.every((el) => !el.closest("li")?.textContent?.includes("3"))).toBe(true);
+  });
 });

package/src/layout/workspace-shell.tsx

@@ -75,6 +75,8 @@ export type WorkspaceShellProps = {
    *  Info. Klebt am unteren Rand via `mt-auto` (siehe Sidebar.footer).
    *  Symmetrisch zu DefaultAppShell.sidebarFooter. */
   readonly sidebarFooter?: ReactNode;
+  /** Runtime badge slot per nav leaf (bare nav id), same as DefaultAppShell. */
+  readonly navBadges?: ReadonlyMap<string, ReactNode>;
   /** Screen content. */
   readonly children: ReactNode;
 };
@@ -86,6 +88,7 @@ export function WorkspaceShell({
   user,
   initialWorkspaceId,
   sidebarFooter,
+  navBadges,
   children,
 }: WorkspaceShellProps): ReactNode {
   const app = useMemo(() => toAppSchema(schema), [schema]);
@@ -207,6 +210,7 @@ export function WorkspaceShell({
       schema={app}
       {...(user !== undefined && { user })}
       {...(allowedNavQns !== undefined && { allowedNavQns })}
+      {...(navBadges !== undefined && { navBadges })}
     />
   );