@cosmicdrift/kumiko-renderer-web 0.258.0 → 0.259.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.258.0",
+  "version": "0.259.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.258.0",
-    "@cosmicdrift/kumiko-headless": "0.258.0",
-    "@cosmicdrift/kumiko-renderer": "0.258.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.259.0",
+    "@cosmicdrift/kumiko-headless": "0.259.0",
+    "@cosmicdrift/kumiko-renderer": "0.259.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -33,6 +33,7 @@
     "cmdk": "^1.1.1",
     "lucide-react": "^1.14.0",
     "qrcode": "^1.5.4",
+    "@types/qrcode": "^1.5.5",
     "radix-ui": "^1.4.3",
     "react": "^19.2.6",
     "react-day-picker": "^10.0.0",
@@ -61,12 +62,11 @@
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/qrcode": "^1.5.5",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.258.0"
+    "@cosmicdrift/kumiko-locale-de": "0.259.0"
   },
   "repository": {
     "type": "git",

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

@@ -3,11 +3,13 @@ import type { DashboardScreenDefinition } from "@cosmicdrift/kumiko-framework/ui
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { ExtensionSectionProps, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
 import {
+  AppFeaturesProvider,
   DashboardBodyProvider,
   DispatcherProvider,
   ExtensionSectionsProvider,
   KumikoScreen,
   NavProvider,
+  UserRolesProvider,
 } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
@@ -527,3 +529,151 @@ describe("KumikoScreen dashboard — neue Panel-Kinds", () => {
     expect(kpiCall?.payload).toEqual({ tenantId: "t-2" });
   });
 });
+
+const sessionsSchema: FeatureSchema = {
+  featureName: "sessions",
+  entities: {},
+  screens: [
+    {
+      id: "my-sessions",
+      type: "projectionList",
+      query: "sessions:query:user-session:mine",
+      columns: [{ field: "userAgent", label: "sessions.mine.col.userAgent" }],
+      access: { openToAll: true },
+    },
+    {
+      id: "session-list",
+      type: "projectionList",
+      query: "sessions:query:user-session:list",
+      columns: [{ field: "userAgent", label: "sessions.list.col.userAgent" }],
+      access: { roles: ["SystemAdmin"] },
+    },
+  ],
+};
+
+const mfaSchema: FeatureSchema = {
+  featureName: "auth-mfa",
+  entities: {},
+  screens: [
+    {
+      id: "auth-mfa-enable",
+      type: "secretMint",
+      handler: "auth-mfa:write:enable-start",
+      fields: {},
+      layout: { sections: [] },
+      submitLabel: "mfa.enable.start",
+      reveal: { fields: [{ field: "recoveryCodes", label: "codes", display: "list" }] },
+      access: { openToAll: true },
+    },
+    {
+      id: "auth-mfa-disable",
+      type: "actionForm",
+      handler: "auth-mfa:write:disable",
+      fields: { code: { type: "text", required: true } },
+      layout: { sections: [{ fields: ["code"] }] },
+      submitLabel: "mfa.disable.submit",
+      access: { openToAll: true },
+    },
+  ],
+};
+
+const mfaStatus = { query: "auth-mfa:query:user-mfa:status", field: "enabled" } as const;
+
+const accountSecuritySchema: FeatureSchema = {
+  featureName: "account-security",
+  entities: {},
+  screens: [
+    {
+      id: "account-security",
+      type: "dashboard",
+      panels: [
+        {
+          kind: "screen",
+          id: "mfa-enable",
+          screen: "auth-mfa:screen:auth-mfa-enable",
+          visibleWhen: { ...mfaStatus, eq: false },
+        },
+        {
+          kind: "screen",
+          id: "mfa-disable",
+          screen: "auth-mfa:screen:auth-mfa-disable",
+          visibleWhen: { ...mfaStatus, eq: true },
+        },
+        {
+          kind: "screen",
+          id: "sessions",
+          screen: "sessions:screen:my-sessions",
+          label: "account-security:panel:sessions",
+        },
+        { kind: "screen", id: "admin-sessions", screen: "sessions:screen:session-list" },
+      ],
+    },
+  ],
+};
+
+function renderAccountSecurity(mfaEnabled: boolean): void {
+  const dispatcher = createMockDispatcher({
+    query: (async (type: string) => {
+      if (type === mfaStatus.query) return { isSuccess: true, data: { enabled: mfaEnabled } };
+      if (type === "sessions:query:user-session:mine") {
+        return {
+          isSuccess: true,
+          data: { rows: [{ id: "s1", userAgent: "Firefox on Linux" }], nextCursor: null },
+        };
+      }
+      return {
+        isSuccess: true,
+        data: { rows: [{ id: "x", userAgent: "ADMIN ROW" }], nextCursor: null },
+      };
+    }) as unknown as Dispatcher["query"],
+  });
+  render(
+    <DispatcherProvider dispatcher={dispatcher}>
+      <AppFeaturesProvider features={[accountSecuritySchema, sessionsSchema, mfaSchema]}>
+        <UserRolesProvider roles={["User"]}>
+          <BrowserNav>
+            <DashboardBodyProvider value={WebDashboardBody}>
+              <KumikoScreen
+                schema={accountSecuritySchema}
+                qn="account-security:screen:account-security"
+              />
+            </DashboardBodyProvider>
+          </BrowserNav>
+        </UserRolesProvider>
+      </AppFeaturesProvider>
+    </DispatcherProvider>,
+  );
+}
+
+describe("KumikoScreen dashboard — screen-Panels (fw#2841)", () => {
+  afterEach(() => {
+    window.history.replaceState(null, "", "/");
+  });
+
+  test("bettet einen Cross-Feature-projectionList-Screen samt Label ein", async () => {
+    renderAccountSecurity(false);
+    await waitFor(() => expect(screen.getByText("Firefox on Linux")).toBeTruthy());
+    expect(screen.getByTestId("dashboard-panel-sessions")).toBeTruthy();
+    expect(screen.getByText("account-security:panel:sessions")).toBeTruthy();
+  });
+
+  test("visibleWhen zeigt nur das Panel, das zum Query-Wert passt", async () => {
+    renderAccountSecurity(false);
+    await waitFor(() => expect(screen.getByTestId("dashboard-panel-mfa-enable")).toBeTruthy());
+    expect(screen.queryByTestId("dashboard-panel-mfa-disable")).toBeNull();
+  });
+
+  test("visibleWhen mit umgekehrtem Status blendet das jeweils andere Panel ein", async () => {
+    renderAccountSecurity(true);
+    await waitFor(() => expect(screen.getByTestId("dashboard-panel-mfa-disable")).toBeTruthy());
+    expect(screen.queryByTestId("dashboard-panel-mfa-enable")).toBeNull();
+  });
+
+  test("ohne Zugriff auf den Ziel-Screen fällt die Kachel komplett weg (kein Access-Banner)", async () => {
+    renderAccountSecurity(false);
+    await waitFor(() => expect(screen.getByText("Firefox on Linux")).toBeTruthy());
+    expect(screen.queryByTestId("dashboard-panel-admin-sessions")).toBeNull();
+    expect(screen.queryByText("ADMIN ROW")).toBeNull();
+    expect(screen.queryByTestId("kumiko-screen-access-denied")).toBeNull();
+  });
+});

package/src/app/dashboard-body.tsx

@@ -23,6 +23,9 @@
 //   progress-list → { rows: { id, label, value, fraction }[] }
 //   custom        → keine Query — eine über extensionSectionComponents
 //                   registrierte App-Komponente holt sich ihre Daten selbst.
+//   screen        → no own query; embeds another declarative screen via
+//                   KumikoScreen. visibleWhen reads a flat record (live); the
+//                   tile is dropped when the user can't access the target.
 //
 // Screen-Filter (DashboardFilterDefinition): der gewählte Wert wird unter
 // `filter.id` in JEDE Panel-Query gemerged. useQuery refetcht automatisch
@@ -36,13 +39,17 @@ import type {
   DashboardPanelDefinition,
   DashboardProgressListPanel,
   DashboardScreenDefinition,
+  DashboardScreenPanel,
   DashboardStatGroupPanel,
   DashboardStatPanel,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Translate } from "@cosmicdrift/kumiko-headless";
 import {
   type DashboardBodyProps,
   extensionSectionName,
+  KumikoScreen,
+  useEmbeddedScreen,
   useExtensionSectionComponent,
   useNav,
   usePrimitives,
@@ -403,7 +410,7 @@ function PanelBody({
   screenId,
   filterParams,
 }: {
-  readonly panel: DashboardPanelDefinition;
+  readonly panel: Exclude<DashboardPanelDefinition, DashboardScreenPanel>;
   readonly label: string;
   readonly screenId: string;
   readonly filterParams: Readonly<Record<string, unknown>>;
@@ -434,7 +441,43 @@ function PanelBody({
   return <CustomPanelBody panel={panel} screenId={screenId} filterParams={filterParams} />;
 }
 
-export function WebDashboardBody({ screen, translate }: DashboardBodyProps): ReactNode {
+function ScreenPanelTile({
+  panel,
+  featureName,
+  translate,
+}: {
+  readonly panel: DashboardScreenPanel;
+  readonly featureName: string;
+  readonly translate: Translate;
+}): ReactNode {
+  const visibleWhen = panel.visibleWhen;
+  const visibility = useQuery<Readonly<Record<string, unknown>>>(
+    visibleWhen?.query ?? "",
+    {},
+    { enabled: visibleWhen !== undefined, live: true },
+  );
+  const target = useEmbeddedScreen(featureName, panel.screen);
+  if (target === undefined) return null;
+  if (visibleWhen !== undefined && visibility.data?.[visibleWhen.field] !== visibleWhen.eq) {
+    return null;
+  }
+  const embedded = <KumikoScreen schema={target.schema} qn={target.qn} translate={translate} />;
+  return (
+    <div className={WIDE_PANEL} data-testid={`dashboard-panel-${panel.id}`}>
+      {panel.label !== undefined ? (
+        <SectionCard title={translate(panel.label)}>{embedded}</SectionCard>
+      ) : (
+        embedded
+      )}
+    </div>
+  );
+}
+
+export function WebDashboardBody({
+  featureName,
+  screen,
+  translate,
+}: DashboardBodyProps): ReactNode {
   const t = useTranslation();
   const effectiveTranslate = translate ?? t;
   const { Text } = usePrimitives();
@@ -449,6 +492,16 @@ export function WebDashboardBody({ screen, translate }: DashboardBodyProps): Rea
       {picker}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {screen.panels.map((panel) => {
+          if (panel.kind === "screen") {
+            return (
+              <ScreenPanelTile
+                key={panel.id}
+                panel={panel}
+                featureName={featureName}
+                translate={effectiveTranslate}
+              />
+            );
+          }
           const label = panel.kind === "custom" ? "" : effectiveTranslate(panel.label);
           const span = panelSpanClassName(panel);
           return (

package/src/primitives/__tests__/data-table-alignment.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, mock, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { defaultPrimitives } from "../index";
+
+const { DataTable } = defaultPrimitives;
+
+interface InlinePadding {
+  readonly left: string | undefined;
+  readonly right: string | undefined;
+}
+
+// happy-dom doesn't compute Tailwind layout, so resolve the effective inline
+// padding the way Tailwind's cascade does: p-* < px-* < pl-*/pr-*. Variant-
+// prefixed utilities (e.g. `[&:has([role=checkbox])]:pr-0`) only apply
+// conditionally and are skipped.
+function resolveInlinePadding(element: HTMLElement): InlinePadding {
+  const tokens = element.className.split(/\s+/).filter((t) => t !== "" && !t.includes(":"));
+  const paddingFor = (prefix: string): string | undefined =>
+    tokens
+      .filter((t) => t.startsWith(`${prefix}-`))
+      .at(-1)
+      ?.slice(prefix.length + 1);
+  const all = paddingFor("p");
+  const x = paddingFor("px") ?? all;
+  return { left: paddingFor("pl") ?? x, right: paddingFor("pr") ?? x };
+}
+
+const columns = [
+  { field: "revision", label: "Revision", type: "number", sortable: false },
+  { field: "title", label: "Title", type: "string", sortable: true },
+] as const;
+
+const rows = [{ id: "r1", values: { revision: 1, title: "First" } }];
+
+describe("DataTable header cells align with body cells", () => {
+  test.each([
+    ["without sort wiring", undefined],
+    ["with sort wiring", mock()],
+  ] as const)(
+    "%s: every column header has the same inline padding as its cells",
+    (_, onSortChange) => {
+      render(
+        <DataTable
+          columns={columns}
+          rows={rows}
+          testId="t"
+          {...(onSortChange !== undefined && { onSortChange })}
+        />,
+      );
+
+      for (const col of columns) {
+        const header = resolveInlinePadding(screen.getByTestId(`column-${col.field}`));
+        const cell = resolveInlinePadding(screen.getByTestId(`cell-r1-${col.field}`));
+        expect(header.left).toBeDefined();
+        expect(header).toEqual(cell);
+      }
+    },
+  );
+});

package/src/primitives/index.tsx

@@ -1877,7 +1877,7 @@ function SortableHeader({
         data-testid={`column-${field}`}
         data-sortable={sortable === true ? true : undefined}
         data-highlighted={highlighted === true ? "true" : undefined}
-        className={cn("px-4 text-muted-foreground", highlighted === true && "bg-accent/40")}
+        className={cn("text-muted-foreground", highlighted === true && "bg-accent/40")}
       >
         {label}
       </TableHead>
@@ -1893,7 +1893,7 @@ function SortableHeader({
       data-sortable="true"
       data-highlighted={highlighted === true ? "true" : undefined}
       aria-sort={ariaSort}
-      className={cn("px-4 text-muted-foreground", highlighted === true && "bg-accent/40")}
+      className={cn("text-muted-foreground", highlighted === true && "bg-accent/40")}
     >
       <button
         type="button"