@cosmicdrift/kumiko-renderer-web 1.0.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "1.0.0",
+  "version": "2.0.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": "1.0.0",
-    "@cosmicdrift/kumiko-headless": "1.0.0",
-    "@cosmicdrift/kumiko-renderer": "1.0.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "2.0.0",
+    "@cosmicdrift/kumiko-headless": "2.0.0",
+    "@cosmicdrift/kumiko-renderer": "2.0.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__/action-menu.test.tsx

@@ -0,0 +1,75 @@
+import { describe, expect, mock, test } from "bun:test";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ActionMenu, type MenuItemDef } from "../primitives/action-menu";
+
+describe("ActionMenu", () => {
+  test("renders trigger with aria-label and default testId", () => {
+    render(
+      <ActionMenu
+        trigger={<span>Open</span>}
+        triggerLabel="More actions"
+        items={[{ kind: "item", id: "a", label: "Alpha", onSelect: () => {} }]}
+      />,
+    );
+    const trigger = screen.getByTestId("action-menu-trigger");
+    expect(trigger.getAttribute("aria-label")).toBe("More actions");
+    expect(screen.getByText("Open")).toBeTruthy();
+  });
+
+  test("opens menu: item, separator, label, shortcut, danger, icon", async () => {
+    const user = userEvent.setup();
+    const onSelect = mock(() => {});
+    const items: MenuItemDef[] = [
+      { kind: "label", label: "Section" },
+      {
+        kind: "item",
+        id: "edit",
+        label: "Edit",
+        icon: <span data-testid="edit-icon">✎</span>,
+        shortcut: "⌘E",
+        onSelect,
+      },
+      { kind: "separator" },
+      {
+        kind: "item",
+        id: "delete",
+        label: "Delete",
+        variant: "danger",
+        onSelect: () => {},
+      },
+      {
+        kind: "item",
+        id: "disabled",
+        label: "Disabled",
+        disabled: true,
+        onSelect: () => {},
+      },
+    ];
+
+    render(
+      <ActionMenu
+        trigger={<span>Menu</span>}
+        items={items}
+        align="start"
+        minWidth="12rem"
+        testId="am"
+      />,
+    );
+    await user.click(screen.getByTestId("am"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Section")).toBeTruthy();
+      expect(screen.getByTestId("action-menu-item-edit")).toBeTruthy();
+      expect(screen.getByTestId("edit-icon")).toBeTruthy();
+      expect(screen.getByText("⌘E")).toBeTruthy();
+      expect(screen.getByTestId("action-menu-item-delete").className).toContain("text-destructive");
+      expect(screen.getByTestId("action-menu-item-disabled").getAttribute("data-disabled")).toBe(
+        "",
+      );
+    });
+
+    await user.click(screen.getByTestId("action-menu-item-edit"));
+    expect(onSelect).toHaveBeenCalled();
+  });
+});

package/src/__tests__/breadcrumb.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../ui/breadcrumb";
+
+describe("Breadcrumb", () => {
+  test("renders nav list with links, separators, page, ellipsis", () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbEllipsis />
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>
+            <span data-testid="custom-sep">/</span>
+          </BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <a href="/docs">Docs</a>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+
+    expect(screen.getByLabelText("breadcrumb")).toBeTruthy();
+    expect(screen.getByText("Home").getAttribute("href")).toBe("/");
+    expect(screen.getByText("More")).toBeTruthy();
+    expect(screen.getByTestId("custom-sep")).toBeTruthy();
+    expect(screen.getByText("Docs").getAttribute("href")).toBe("/docs");
+    const page = screen.getByText("Current");
+    expect(page.getAttribute("aria-current")).toBe("page");
+    expect(page.getAttribute("aria-disabled")).toBe("true");
+  });
+});

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

@@ -1,11 +1,18 @@
 import { afterAll, afterEach, describe, expect, spyOn, test } from "bun:test";
 import type {
+  DashboardScreenDefinition,
   EntityDefinition,
   EntityEditScreenDefinition,
   EntityListScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
-import type { ColumnRendererProps, FeatureSchema, NavApi } from "@cosmicdrift/kumiko-renderer";
+import type {
+  AppSchema,
+  ColumnRendererProps,
+  FeatureSchema,
+  NavApi,
+} from "@cosmicdrift/kumiko-renderer";
+import { createStaticLocaleResolver } from "@cosmicdrift/kumiko-renderer";
 import { act, screen, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import type { ClientFeatureDefinition } from "../app/client-plugin";
@@ -54,6 +61,7 @@ const baseSchema: FeatureSchema = {
   featureName: "tasks",
   entities: { task: taskEntity },
   screens: [editScreen, listScreen],
+  navs: [{ id: "task-edit", label: "tasks:nav.task-edit", screen: "tasks:screen:task-edit" }],
 };
 
 // createKumikoApp ruft createRoot(...).render(...) direkt auf — React 18+
@@ -148,6 +156,55 @@ describe("createKumikoApp", () => {
     );
   });
 
+  test("fallback screen skips access-restricted screens across features (#1176)", async () => {
+    mountRoot();
+    const restrictedFeature: FeatureSchema = {
+      featureName: "user",
+      entities: { task: taskEntity },
+      screens: [{ ...listScreen, id: "user-list", access: { roles: ["SystemAdmin"] } }],
+    };
+    const openFeature: FeatureSchema = { ...baseSchema, featureName: "tasks" };
+    const schema: AppSchema = { features: [restrictedFeature, openFeature] };
+    await mountApp({ schema, dispatcher: makeDispatcher() });
+    // Landing on user-list (SystemAdmin-only) would show an access-denied
+    // banner instead — the tasks:task-edit form must win instead.
+    await waitFor(() => expect(screen.getByTestId("render-edit-form")).toBeTruthy());
+  });
+
+  test("fallback screen: an openToAll screen counts as accessible", async () => {
+    mountRoot();
+    const restrictedFeature: FeatureSchema = {
+      featureName: "user",
+      entities: { task: taskEntity },
+      screens: [{ ...editScreen, id: "user-edit", access: { roles: ["SystemAdmin"] } }],
+    };
+    const openFeature: FeatureSchema = {
+      featureName: "tasks",
+      entities: { task: taskEntity },
+      screens: [{ ...listScreen, access: { openToAll: true } }],
+      navs: [{ id: "task-list", label: "tasks:nav.task-list", screen: "tasks:screen:task-list" }],
+    };
+    const schema: AppSchema = { features: [restrictedFeature, openFeature] };
+    await mountApp({ schema, dispatcher: makeDispatcher() });
+    expect(await screen.findByTestId("render-list-table-empty")).toBeTruthy();
+  });
+
+  test("all screens access-restricted → throws (no accessible fallback)", () => {
+    mountRoot();
+    const restrictedOnly: AppSchema = {
+      features: [
+        {
+          featureName: "user",
+          entities: { task: taskEntity },
+          screens: [{ ...editScreen, access: { roles: ["SystemAdmin"] } }],
+        },
+      ],
+    };
+    expect(() => createKumikoApp({ schema: restrictedOnly, dispatcher: makeDispatcher() })).toThrow(
+      /no screens/,
+    );
+  });
+
   test("clientFeatures.columnRenderers → bei Key-Kollision warnt + last-wins gewinnt", async () => {
     // Zwei Features liefern denselben Renderer-Key — der Merge in
     // create-app warnt und behält den späteren Eintrag (Last-Wins).
@@ -175,6 +232,9 @@ describe("createKumikoApp", () => {
           columns: [{ field: "color", renderer: { react: { __component: "Swatch" } } }],
         },
       ],
+      navs: [
+        { id: "color-list", label: "tasks:nav.color-list", screen: "tasks:screen:color-list" },
+      ],
     };
 
     mountRoot();
@@ -228,6 +288,9 @@ describe("createKumikoApp", () => {
       featureName: "tasks",
       entities: { task: colorEntity },
       screens: [colorListScreen],
+      navs: [
+        { id: "color-list", label: "tasks:nav.color-list", screen: "tasks:screen:color-list" },
+      ],
     };
     const dispatcher = createMockDispatcher({
       query: (async () => ({
@@ -252,6 +315,113 @@ describe("createKumikoApp", () => {
     expect(screen.getByTestId("ca-swatch-field").textContent).toBe("color");
   });
 
+  test("schema.translations (r.translations, #1059) resolves nav/dashboard labels without any clientFeatures duplication", async () => {
+    // Mirrors cap-counter's real shape: a feature that declares r.translations
+    // for its own nav label but ships NO web/i18n.ts / clientFeatures entry at
+    // all. Before #1059 this label rendered as the raw i18n key forever.
+    const dashboardScreen: DashboardScreenDefinition = {
+      id: "overview",
+      type: "dashboard",
+      panels: [
+        {
+          kind: "stat",
+          id: "cap-list",
+          label: "cap-counter:nav.cap-list",
+          query: "cap-counter:query:stat",
+          valueField: "value",
+        },
+      ],
+    };
+    const schema: FeatureSchema = {
+      featureName: "cap-counter",
+      entities: {},
+      screens: [dashboardScreen],
+      navs: [
+        {
+          id: "overview",
+          label: "cap-counter:nav.cap-list",
+          screen: "cap-counter:screen:overview",
+        },
+      ],
+      translations: {
+        "cap-counter:nav.cap-list": { de: "Limits", en: "Caps" },
+      },
+    };
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { value: "3" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    mountRoot();
+    await mountApp({
+      schema,
+      dispatcher,
+      locale: createStaticLocaleResolver({ locale: "en" }),
+    });
+
+    await waitFor(() => expect(screen.getByText("Caps")).toBeTruthy());
+    expect(screen.queryByText("cap-counter:nav.cap-list")).toBeNull();
+  });
+
+  test("clientFeatures.translations still overrides schema.translations for the same key (precedence)", async () => {
+    // App-Override muss auch gegen ein framework-eigenes Label gewinnen —
+    // sonst kann eine App ein bundled-feature-Label nicht mehr anpassen,
+    // sobald #1059 dessen r.translations automatisch mitliefert.
+    const dashboardScreen: DashboardScreenDefinition = {
+      id: "overview",
+      type: "dashboard",
+      panels: [
+        {
+          kind: "stat",
+          id: "cap-list",
+          label: "cap-counter:nav.cap-list",
+          query: "cap-counter:query:stat",
+          valueField: "value",
+        },
+      ],
+    };
+    const schema: FeatureSchema = {
+      featureName: "cap-counter",
+      entities: {},
+      screens: [dashboardScreen],
+      navs: [
+        {
+          id: "overview",
+          label: "cap-counter:nav.cap-list",
+          screen: "cap-counter:screen:overview",
+        },
+      ],
+      translations: {
+        "cap-counter:nav.cap-list": { de: "Limits", en: "Caps" },
+      },
+    };
+    const dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { value: "3" },
+      })) as unknown as Dispatcher["query"],
+    });
+    const override: ClientFeatureDefinition = {
+      name: "cap-counter-app-override",
+      translations: {
+        en: { "cap-counter:nav.cap-list": "Quota" },
+      },
+    };
+
+    mountRoot();
+    await mountApp({
+      schema,
+      dispatcher,
+      clientFeatures: [override],
+      locale: createStaticLocaleResolver({ locale: "en" }),
+    });
+
+    await waitFor(() => expect(screen.getByText("Quota")).toBeTruthy());
+    expect(screen.queryByText("Caps")).toBeNull();
+  });
+
   test("navAdapter override: eigener Router steuert den aktiven Screen", async () => {
     // Beweist den Nav-Seam: der Default-Adapter liest location.pathname,
     // dieser Memory-Adapter hardcoded die Route. Wenn swap funktioniert,