@cosmicdrift/kumiko-renderer-web 0.133.0 → 0.134.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.133.0",
+  "version": "0.134.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.133.0",
-    "@cosmicdrift/kumiko-headless": "0.133.0",
-    "@cosmicdrift/kumiko-renderer": "0.133.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.134.0",
+    "@cosmicdrift/kumiko-headless": "0.134.0",
+    "@cosmicdrift/kumiko-renderer": "0.134.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__/dashboard-screen.test.tsx

@@ -1,12 +1,15 @@
 import { describe, expect, test } from "bun:test";
 import type { DashboardScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
-import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import type { ExtensionSectionProps, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
 import {
   DashboardBodyProvider,
   DispatcherProvider,
+  ExtensionSectionsProvider,
   KumikoScreen,
 } from "@cosmicdrift/kumiko-renderer";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
 import { WebDashboardBody } from "../app/dashboard-body";
 import { createMockDispatcher, render, screen, waitFor } from "./test-utils";
 
@@ -84,3 +87,206 @@ describe("KumikoScreen dashboard", () => {
     await waitFor(() => expect(screen.getByText("API-Ausfall")).toBeTruthy());
   });
 });
+
+const richScreen: DashboardScreenDefinition = {
+  id: "rich",
+  type: "dashboard",
+  filter: {
+    id: "region",
+    label: "widgets:dashboard:filter-region",
+    kind: "select",
+    options: [
+      { value: "eu", label: "widgets:dashboard:filter-region-eu" },
+      { value: "us", label: "widgets:dashboard:filter-region-us" },
+    ],
+  },
+  panels: [
+    {
+      kind: "stat",
+      id: "kpi",
+      label: "widgets:dashboard:kpi",
+      query: "widgets:query:metrics:kpi",
+      valueField: "value",
+    },
+    {
+      kind: "stat-group",
+      id: "net-worth",
+      label: "widgets:dashboard:net-worth",
+      stats: [
+        {
+          kind: "stat",
+          id: "assets",
+          label: "widgets:dashboard:assets",
+          query: "widgets:query:metrics:assets",
+          valueField: "value",
+        },
+      ],
+    },
+    {
+      kind: "feed",
+      id: "upcoming",
+      label: "widgets:dashboard:upcoming",
+      query: "widgets:query:metrics:upcoming",
+    },
+    {
+      kind: "progress-list",
+      id: "goal-progress",
+      label: "widgets:dashboard:goal-progress",
+      query: "widgets:query:metrics:goal-progress",
+    },
+    {
+      kind: "custom",
+      id: "custom-panel",
+      component: { react: { __component: "rich-dashboard-custom" } },
+    },
+  ],
+};
+
+const richSchema: FeatureSchema = {
+  featureName: "widgets",
+  entities: {},
+  screens: [richScreen],
+};
+
+describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
+  test("stat-group rendert Sektions-Titel + genestete Stat-Panels", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string) => {
+        if (type === "widgets:query:metrics:assets") {
+          return { isSuccess: true, data: { value: "120.000 €" } };
+        }
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+    expect(screen.getByText("widgets:dashboard:net-worth")).toBeTruthy();
+    await waitFor(() => expect(screen.getByText("120.000 €")).toBeTruthy());
+  });
+
+  test("feed-Panel rendert primary/trailing-Zeilen", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string) => {
+        if (type === "widgets:query:metrics:upcoming") {
+          return {
+            isSuccess: true,
+            data: { rows: [{ primary: "Zinsanpassung", trailing: "Aug 2026" }] },
+          };
+        }
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("Zinsanpassung")).toBeTruthy());
+    expect(screen.getByText("Aug 2026")).toBeTruthy();
+  });
+
+  test("progress-list-Panel rendert Label/Wert + Fortschrittsbalken", async () => {
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string) => {
+        if (type === "widgets:query:metrics:goal-progress") {
+          return {
+            isSuccess: true,
+            data: { rows: [{ label: "Baudarlehen", value: "42.000 € offen", fraction: 0.71 }] },
+          };
+        }
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["query"],
+    });
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("Baudarlehen")).toBeTruthy());
+    const bar = screen.getByRole("progressbar");
+    expect(bar.getAttribute("aria-valuenow")).toBe("71");
+  });
+
+  test("custom-Panel: registrierte Komponente rendert mit screenId + filterParams", async () => {
+    function CustomEcho({ screenId, filterParams }: ExtensionSectionProps): ReactNode {
+      return (
+        <div data-testid="custom-echo">
+          {screenId}:{String(filterParams?.["region"] ?? "none")}
+        </div>
+      );
+    }
+    const dispatcher = createMockDispatcher();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <ExtensionSectionsProvider value={{ "rich-dashboard-custom": CustomEcho }}>
+          <DashboardBodyProvider value={WebDashboardBody}>
+            <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+          </DashboardBodyProvider>
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByTestId("custom-echo")).toBeTruthy());
+    expect(screen.getByTestId("custom-echo").textContent).toBe("rich:none");
+  });
+
+  test("custom-Panel: unregistrierte Komponente rendert nichts, wirft nicht", async () => {
+    const dispatcher = createMockDispatcher();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByTestId("dashboard-panel-kpi")).toBeTruthy());
+    expect(screen.queryByTestId("custom-echo")).toBeNull();
+  });
+
+  test("Filter-Wechsel refetcht Stat- UND Feed-Panel mit neuem Payload", async () => {
+    const calls: { readonly type: string; readonly payload: unknown }[] = [];
+    const dispatcher = createMockDispatcher({
+      query: (async (type: string, payload: unknown) => {
+        calls.push({ type, payload });
+        const region = (payload as { readonly region?: string } | undefined)?.region;
+        if (type === "widgets:query:metrics:kpi") {
+          return { isSuccess: true, data: { value: region === "us" ? "38.120 $" : "92.753 €" } };
+        }
+        if (type === "widgets:query:metrics:upcoming") {
+          return {
+            isSuccess: true,
+            data: {
+              rows: [{ primary: region === "us" ? "US-Event" : "EU-Event" }],
+            },
+          };
+        }
+        return { isSuccess: true, data: {} };
+      }) as unknown as Dispatcher["query"],
+    });
+    const user = userEvent.setup();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <DashboardBodyProvider value={WebDashboardBody}>
+          <KumikoScreen schema={richSchema} qn="widgets:screen:rich" />
+        </DashboardBodyProvider>
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("92.753 €")).toBeTruthy());
+    await waitFor(() => expect(screen.getByText("EU-Event")).toBeTruthy());
+
+    await user.click(screen.getByTestId("combobox-dashboard-filter-region"));
+    const usOption = await screen.findByText("widgets:dashboard:filter-region-us");
+    await user.click(usOption);
+
+    await waitFor(() => expect(screen.getByText("38.120 $")).toBeTruthy());
+    await waitFor(() => expect(screen.getByText("US-Event")).toBeTruthy());
+  });
+});

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

@@ -57,7 +57,6 @@ function ws(
     openToAll?: boolean;
     isDefault?: boolean;
     navMembers?: readonly string[];
-    navigation?: "nav" | "tree";
   } = {},
 ): WorkspaceSchema {
   const access = options.openToAll
@@ -72,7 +71,6 @@ function ws(
       ...(options.order !== undefined && { order: options.order }),
       ...(access !== undefined && { access }),
       ...(options.isDefault === true && { default: true }),
-      ...(options.navigation !== undefined && { navigation: options.navigation }),
     },
     navMembers: options.navMembers ?? [],
   };
@@ -774,43 +772,13 @@ describe("WorkspaceShell — AppSchema (multi-feature)", () => {
 });
 
 // ---------------------------------------------------------------------------
-// EINE Nav (Visual-Tree-Merge). Der frühere navigation:"tree"/VisualTree-
-// Zweig ist gefaltet: WorkspaceShell rendert IMMER NavTree. Die
-// navigation-Property ist seitdem ein No-op (deferred removal aus
-// WorkspaceDefinition). Im Content-Bereich ersetzt ein aktives target
-// (aus den nav.searchParams) den RoutedScreen durch den EditorPanel.
+// EINE Nav. WorkspaceShell rendert IMMER NavTree. Im Content-Bereich
+// ersetzt ein aktives target (aus den nav.searchParams) den RoutedScreen
+// durch den EditorPanel.
 // ---------------------------------------------------------------------------
 
-describe("WorkspaceShell — EINE Nav (Visual-Tree gefaltet)", () => {
-  test('navigation: "tree" rendert NavTree (Tree-Stub ist gefaltet, kein Switch mehr)', () => {
-    const schema = {
-      featureName: "demo",
-      entities: {},
-      screens: [],
-      navs: [{ id: "list", label: "List" }],
-      workspaces: [
-        ws("visual", {
-          label: "Visual",
-          openToAll: true,
-          isDefault: true,
-          navigation: "tree",
-          navMembers: ["demo:nav:list"],
-        }),
-      ],
-    } as const;
-
-    renderShell(
-      <WorkspaceShell brand={<div>Brand</div>} schema={schema} user={{ id: "u1", roles: [] }}>
-        <div>content</div>
-      </WorkspaceShell>,
-    );
-    // NavTree rendert das nav-Item — auch bei navigation:"tree" (No-op).
-    expect(screen.getByText("List")).toBeTruthy();
-    // Der alte VisualTree-Stub existiert nicht mehr.
-    expect(screen.queryByLabelText("Visual Tree (no providers)")).toBeNull();
-  });
-
-  test("workspace ohne navigation-Property rendert NavTree (Backwards-Compat)", () => {
+describe("WorkspaceShell — EINE Nav", () => {
+  test("workspace rendert NavTree", () => {
     const schema = {
       featureName: "demo",
       entities: {},