@cosmicdrift/kumiko-renderer-web 0.157.0 → 0.157.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.157.0",
+  "version": "0.157.1",
   "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.157.0",
-    "@cosmicdrift/kumiko-headless": "0.157.0",
-    "@cosmicdrift/kumiko-renderer": "0.157.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.157.1",
+    "@cosmicdrift/kumiko-headless": "0.157.1",
+    "@cosmicdrift/kumiko-renderer": "0.157.1",
     "@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__/default-app-shell.test.tsx

@@ -7,9 +7,11 @@
 // pinst dass DefaultAppShell user nun akzeptiert UND durchreicht.
 
 import { describe, expect, test } from "bun:test";
+import type { EntityListScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
 import { DefaultAppShell } from "../layout/default-app-shell";
-import { render, screen } from "./test-utils";
+import { createMockDispatcher, render, screen } from "./test-utils";
 
 function makeSchema(): FeatureSchema {
   return {
@@ -84,3 +86,47 @@ describe("DefaultAppShell headerActions-Slot (Topbar rechts)", () => {
     expect(document.querySelector("[data-kumiko-layout='header-actions']")).toBeNull();
   });
 });
+
+// DefaultAppShell threads `user.roles` into a UserRolesProvider around
+// children (#1203) — KumikoScreen reads that to gate role-restricted
+// screens at render time, not just in nav.
+describe("DefaultAppShell wires user.roles into children for screen-level access (#1203)", () => {
+  const restrictedScreen: EntityListScreenDefinition = {
+    id: "restricted",
+    type: "entityList",
+    entity: "x",
+    columns: [],
+    access: { roles: ["SystemAdmin"] },
+  };
+  const restrictedSchema: FeatureSchema = {
+    featureName: "showcase",
+    entities: {},
+    screens: [restrictedScreen],
+  } as FeatureSchema;
+
+  test("no user prop → role-gated screen child shows access-denied", () => {
+    render(
+      <DispatcherProvider dispatcher={createMockDispatcher()}>
+        <DefaultAppShell brand={<span>Brand</span>} schema={restrictedSchema}>
+          <KumikoScreen schema={restrictedSchema} qn="showcase:screen:restricted" />
+        </DefaultAppShell>
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("kumiko-screen-access-denied")).toBeTruthy();
+  });
+
+  test("user prop with matching role → role-gated screen child renders", () => {
+    render(
+      <DispatcherProvider dispatcher={createMockDispatcher()}>
+        <DefaultAppShell
+          brand={<span>Brand</span>}
+          schema={restrictedSchema}
+          user={{ id: "u1", roles: ["SystemAdmin"] }}
+        >
+          <KumikoScreen schema={restrictedSchema} qn="showcase:screen:restricted" />
+        </DefaultAppShell>
+      </DispatcherProvider>,
+    );
+    expect(screen.queryByTestId("kumiko-screen-access-denied")).toBeNull();
+  });
+});

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

@@ -13,6 +13,7 @@ import {
   KumikoScreen,
   kumikoDefaultTranslations,
   NavProvider,
+  UserRolesProvider,
 } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
 import { createMockDispatcher, fireEvent, render, screen, waitFor } from "./test-utils";
@@ -41,10 +42,18 @@ const listScreen: EntityListScreenDefinition = {
   columns: ["title", "count", "done"],
 };
 
+const restrictedListScreen: EntityListScreenDefinition = {
+  id: "task-list-restricted",
+  type: "entityList",
+  entity: "task",
+  columns: ["title"],
+  access: { roles: ["Admin"] },
+};
+
 const schema: FeatureSchema = {
   featureName: "tasks",
   entities: { task: taskEntity },
-  screens: [editScreen, listScreen],
+  screens: [editScreen, listScreen, restrictedListScreen],
 };
 
 function makeDispatcher(overrides: Partial<Dispatcher> = {}): Dispatcher {
@@ -67,6 +76,39 @@ describe("KumikoScreen", () => {
     expect(screen.getByTestId("kumiko-screen-not-found")).toBeTruthy();
   });
 
+  test("role-gated screen, no UserRolesProvider mounted → access-denied placeholder", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <KumikoScreen schema={schema} qn="tasks:screen:task-list-restricted" />
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("kumiko-screen-access-denied")).toBeTruthy();
+  });
+
+  test("role-gated screen, user without matching role → access-denied placeholder", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <UserRolesProvider roles={["Viewer"]}>
+          <KumikoScreen schema={schema} qn="tasks:screen:task-list-restricted" />
+        </UserRolesProvider>
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("kumiko-screen-access-denied")).toBeTruthy();
+  });
+
+  test("role-gated screen, user with matching role → renders normally", async () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <UserRolesProvider roles={["Admin"]}>
+          <KumikoScreen schema={schema} qn="tasks:screen:task-list-restricted" />
+        </UserRolesProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+    expect(screen.queryByTestId("kumiko-screen-access-denied")).toBeNull();
+    expect(screen.getByTestId("render-list-table-toolbar")).toBeTruthy();
+  });
+
   test("entityEdit → renders RenderEdit form for the screen's entity", () => {
     render(
       <DispatcherProvider dispatcher={makeDispatcher()}>

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

@@ -1,7 +1,10 @@
 import { beforeEach, describe, expect, mock, test } from "bun:test";
+import type { EntityListScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
 import {
   createStaticLocaleResolver,
+  DispatcherProvider,
+  KumikoScreen,
   LocaleProvider,
   NavProvider,
   PrimitivesProvider,
@@ -17,7 +20,7 @@ import {
 } from "../layout/workspace-shell";
 import { WorkspaceSwitcher } from "../layout/workspace-switcher";
 import { defaultPrimitives } from "../primitives";
-import { fireEvent, render, screen } from "./test-utils";
+import { createMockDispatcher, fireEvent, render, screen } from "./test-utils";
 
 // jsdom shares window.history across tests in the same file. Reset to /
 // before each render so URL-driven workspace state from one test doesn't
@@ -871,3 +874,49 @@ describe("WorkspaceShell — EINE Nav", () => {
     expect(systemItems.every((el) => !el.closest("li")?.textContent?.includes("3"))).toBe(true);
   });
 });
+
+// WorkspaceShell threads `user.roles` into a UserRolesProvider around
+// children (#1203) — KumikoScreen reads that to gate role-restricted
+// screens at render time, not just via nav/workspace-switcher filtering.
+describe("WorkspaceShell wires user.roles into children for screen-level access (#1203)", () => {
+  const restrictedScreen: EntityListScreenDefinition = {
+    id: "restricted",
+    type: "entityList",
+    entity: "x",
+    columns: [],
+    access: { roles: ["admin"] },
+  };
+  const schema = {
+    featureName: "bmc",
+    entities: {},
+    screens: [restrictedScreen],
+    navs: [],
+    workspaces: [],
+  } as const;
+
+  test("no user prop → role-gated screen child shows access-denied", () => {
+    renderShell(
+      <DispatcherProvider dispatcher={createMockDispatcher()}>
+        <WorkspaceShell brand={<div>Brand</div>} schema={schema}>
+          <KumikoScreen schema={schema} qn="bmc:screen:restricted" />
+        </WorkspaceShell>
+      </DispatcherProvider>,
+    );
+    expect(screen.getByTestId("kumiko-screen-access-denied")).toBeTruthy();
+  });
+
+  test("user prop with matching role → role-gated screen child renders", () => {
+    renderShell(
+      <DispatcherProvider dispatcher={createMockDispatcher()}>
+        <WorkspaceShell
+          brand={<div>Brand</div>}
+          schema={schema}
+          user={{ id: "u1", roles: ["admin"] }}
+        >
+          <KumikoScreen schema={schema} qn="bmc:screen:restricted" />
+        </WorkspaceShell>
+      </DispatcherProvider>,
+    );
+    expect(screen.queryByTestId("kumiko-screen-access-denied")).toBeNull();
+  });
+});

package/src/index.ts

@@ -51,6 +51,7 @@ export type {
   UseFormResult,
   UseQueryOptions,
   UseQueryResult,
+  UserRolesProviderProps,
   WorkspaceSchema,
 } from "@cosmicdrift/kumiko-renderer";
 export {
@@ -69,6 +70,7 @@ export {
   RenderField,
   RenderList,
   TokensProvider,
+  UserRolesProvider,
   useDispatcher,
   useDispatcherStatus,
   useForm,
@@ -82,6 +84,7 @@ export {
   useTokenController,
   useTokens,
   useTranslation,
+  useUserRoles,
 } from "@cosmicdrift/kumiko-renderer";
 // --- Web-platform specifics ---
 export { createBrowserLocaleResolver } from "./app/browser-locale";

package/src/layout/default-app-shell.tsx

@@ -14,7 +14,11 @@
 // Apps die feingranulare Kontrolle wollen, gehen direkt auf die ui/-Teile.
 // Wer ein Topbar mit Workspace-Switcher braucht, nutzt <WorkspaceShell>.
 
-import type { AppSchema, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import {
+  type AppSchema,
+  type FeatureSchema,
+  UserRolesProvider,
+} from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 import {
   Sidebar,
@@ -112,7 +116,7 @@ export function DefaultAppShell({
           {...(headerActions !== undefined && { headerActions })}
         />
         <main className={fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto"}>
-          {children}
+          <UserRolesProvider roles={user?.roles}>{children}</UserRolesProvider>
         </main>
       </SidebarInset>
     </SidebarProvider>

package/src/layout/workspace-shell.tsx

@@ -31,7 +31,7 @@
 
 import type { AccessRule } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { AppSchema, FeatureSchema, WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
-import { qualifyNavId, toAppSchema, useNav } from "@cosmicdrift/kumiko-renderer";
+import { qualifyNavId, toAppSchema, UserRolesProvider, useNav } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useLayoutEffect, useMemo } from "react";
 import { useResolvers } from "../app/resolvers-context";
 import {
@@ -239,7 +239,11 @@ export function WorkspaceShell({
           {...(topbarActions !== undefined && { headerActions: topbarActions })}
         />
         <main className="flex-1 overflow-auto">
-          {activeTarget !== undefined ? <EditorPanel resolvers={resolvers} /> : children}
+          {activeTarget !== undefined ? (
+            <EditorPanel resolvers={resolvers} />
+          ) : (
+            <UserRolesProvider roles={user?.roles}>{children}</UserRolesProvider>
+          )}
         </main>
       </SidebarInset>
     </SidebarProvider>