@cosmicdrift/kumiko-renderer-web 0.236.0 → 0.237.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.236.0",
+  "version": "0.237.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.236.0",
-    "@cosmicdrift/kumiko-headless": "0.236.0",
-    "@cosmicdrift/kumiko-renderer": "0.236.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.237.0",
+    "@cosmicdrift/kumiko-headless": "0.237.0",
+    "@cosmicdrift/kumiko-renderer": "0.237.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.236.0"
+    "@cosmicdrift/kumiko-locale-de": "0.237.0"
   },
   "repository": {
     "type": "git",

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

@@ -682,5 +682,46 @@ describe("createKumikoApp", () => {
 
       await waitFor(() => expect(window.location.pathname).toBe("/task-detail/r1"));
     });
+
+    // fw#2640: a list screen with no reachable click target must not look
+    // clickable either — the click handler was always defined before,
+    // silently no-op-ing on click. Row-testids stay independent of the
+    // handler (see primitives/index.tsx), so getByTestId still finds them.
+    test("no detailFor screen and no entityEdit screen → no row-click handler, row not clickable", async () => {
+      window.history.replaceState(null, "", "/task-list");
+      mountRoot();
+      const schema: FeatureSchema = {
+        featureName: "tasks",
+        entities: { task: taskEntity },
+        screens: [listScreen],
+      };
+      await mountApp({
+        schema,
+        dispatcher: makeRowDispatcher(),
+        screenQn: "tasks:screen:task-list",
+      });
+      await waitFor(() => expect(screen.getByTestId("row-r1")).toBeTruthy());
+
+      const row = screen.getByTestId("row-r1");
+      expect(row.className).not.toContain("cursor-pointer");
+
+      fireEvent.click(row);
+
+      // No target exists — the click must not navigate anywhere.
+      expect(window.location.pathname).toBe("/task-list");
+    });
+
+    test("entityEdit screen for the entity → row-click handler present, row looks clickable", async () => {
+      window.history.replaceState(null, "", "/task-list");
+      mountRoot();
+      await mountApp({
+        schema: baseSchema,
+        dispatcher: makeRowDispatcher(),
+        screenQn: "tasks:screen:task-list",
+      });
+      await waitFor(() => expect(screen.getByTestId("row-r1")).toBeTruthy());
+
+      expect(screen.getByTestId("row-r1").className).toContain("cursor-pointer");
+    });
   });
 });

package/src/__tests__/primitives.test.tsx

@@ -11,7 +11,7 @@ import { describe, expect, mock, test } from "bun:test";
 import { type ColumnRendererProps, ColumnRenderersProvider } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
-import { defaultPrimitives, END_LABEL_MIN_ROWS } from "../primitives";
+import { defaultPrimitives, END_LABEL_MIN_ROWS, FormScreenShell } from "../primitives";
 import { PageSection, Stack } from "../primitives/layout";
 import { fireEvent, render, screen, waitFor } from "./test-utils";
 
@@ -1725,4 +1725,24 @@ describe("PageSection", () => {
     expect(screen.getByTestId("p").className).toContain("p-6");
     expect(screen.getByTestId("child")).toBeDefined();
   });
+
+  test("maxWidth=4xl sets the same width class as FormScreenShell maxWidth=4xl (fw#2640)", () => {
+    render(
+      <>
+        <PageSection testId="page-4xl" maxWidth="4xl">
+          x
+        </PageSection>
+        <FormScreenShell testId="shell-4xl" maxWidth="4xl">
+          x
+        </FormScreenShell>
+      </>,
+    );
+    expect(screen.getByTestId("page-4xl").className).toContain("max-w-4xl");
+    expect(screen.getByTestId("shell-4xl").className).toContain("max-w-4xl");
+  });
+
+  test("default maxWidth stays full-width (existing behavior)", () => {
+    render(<PageSection testId="p-default">x</PageSection>);
+    expect(screen.getByTestId("p-default").className).toContain("max-w-full");
+  });
 });

package/src/app/create-app.tsx

@@ -526,6 +526,29 @@ function findOwnerFeature(app: AppSchema, qn: string): FeatureSchema | undefined
   return undefined;
 }
 
+type ScreenDef = FeatureSchema["screens"][number];
+
+// fw#2640: a list screen with no reachable click target (no `detailFor`
+// screen for its entity, no app-wide onRowClick, no entityEdit screen)
+// must render without the row-click affordance instead of a silent no-op —
+// mirrors the precedence effectiveOnRowClick itself resolves at click time.
+// Only entityList/projectionList screens ever render RenderList; every other
+// screen type never wires onRowClick at all, so it can never have a target.
+function hasRowClickTarget(
+  app: AppSchema,
+  screen: ScreenDef | undefined,
+  onRowClick: ((row: ListRowViewModel, entityName: string) => void) | undefined,
+): boolean {
+  if (screen === undefined) return false;
+  if (screen.type !== "entityList" && screen.type !== "projectionList") return false;
+  if (onRowClick !== undefined) return true;
+  if (screen.type !== "entityList") return false;
+  if (hasDetailScreen(app.features, screen.entity)) return true;
+  return app.features.some((f) =>
+    f.screens.some((s) => s.type === "entityEdit" && s.entity === screen.entity),
+  );
+}
+
 function RoutedScreen({
   app,
   fallbackQn,
@@ -544,12 +567,16 @@ function RoutedScreen({
   // need to pin it to the right feature. Strategy: iterate through all
   // features until the matching screen decl turns up. No match →
   // fallback feature (the one from fallbackQn).
-  const { feature, qn, entityId } = useMemo(() => {
+  const { feature, qn, entityId, activeScreen } = useMemo(() => {
     if (nav.route === undefined) {
+      const ownerFeature = findOwnerFeature(app, fallbackQn);
       return {
-        feature: findOwnerFeature(app, fallbackQn),
+        feature: ownerFeature,
         qn: fallbackQn,
         entityId: undefined as string | undefined,
+        activeScreen: ownerFeature?.screens.find(
+          (s) => qualifyScreenId(ownerFeature.featureName, s.id) === fallbackQn,
+        ),
       };
     }
     const shortId = nav.route.screenId;
@@ -567,12 +594,16 @@ function RoutedScreen({
       feature: ownerFeature,
       qn: qualifiedQn,
       entityId: nav.route.entityId,
+      activeScreen: ownerFeature?.screens.find(
+        (s) => qualifyScreenId(ownerFeature.featureName, s.id) === qualifiedQn,
+      ),
     };
   }, [nav.route, app, fallbackQn]);
 
   const effectiveOnRowClick = useMemo<
     ((row: ListRowViewModel, entityName: string) => void) | undefined
   >(() => {
+    if (!hasRowClickTarget(app, activeScreen, onRowClick)) return undefined;
     return (row, entityName) => {
       // Precedence (fw#2164): detailFor screen, then onRowClick, then the
       // entityEdit-search fallback below. An explicit rowActions
@@ -603,7 +634,7 @@ function RoutedScreen({
         }
       }
     };
-  }, [onRowClick, app.features, nav]);
+  }, [app, activeScreen, onRowClick, nav]);
 
   // Copy-link action (Issue #912) for entityEdit update screens. Builds
   // the absolute permalink URL from the current route + copies it —

package/src/app/dashboard-body.tsx

@@ -50,6 +50,7 @@ import {
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useEffect } from "react";
+import { PageSection } from "../primitives/layout";
 import { TimeseriesChart, type TimeseriesPoint } from "../widgets/charts";
 import { FeedList, type FeedRow } from "../widgets/feed-list";
 import { ProgressList, type ProgressListRow } from "../widgets/progress-list";
@@ -434,7 +435,7 @@ export function WebDashboardBody({ screen, translate }: DashboardBodyProps): Rea
   const effectiveTranslate = translate ?? t;
   const { params: filterParams, picker } = useFilterParams(screen);
   return (
-    <div className="flex flex-col gap-4 p-6" data-testid={`dashboard-${screen.id}`}>
+    <PageSection className="flex flex-col gap-4" testId={`dashboard-${screen.id}`}>
       {picker}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {screen.panels.map((panel) => {
@@ -452,6 +453,6 @@ export function WebDashboardBody({ screen, translate }: DashboardBodyProps): Rea
           );
         })}
       </div>
-    </div>
+    </PageSection>
   );
 }

package/src/primitives/index.tsx

@@ -109,6 +109,7 @@ import {
 } from "./dropdown-menu";
 import { EmbeddedListInput } from "./embedded-list-input";
 import { FileUploadInput } from "./file-upload";
+import { screenWidthClassName } from "./layout";
 import { DefaultLightbox } from "./lightbox";
 import { LocatedTimestampInput } from "./located-timestamp-input";
 import { DefaultMetric } from "./metric";
@@ -2160,17 +2161,12 @@ function DefaultForm({
 }
 
 // Canonical form/settings shell shared by DefaultForm (configEdit/entityEdit)
-// and custom settings screens (profile, privacy-center). Default width matches
-// list chrome (full); override via maxWidth / layout.width when a screen
-// truly needs a narrow column (sm=auth-adjacent, 3xl/4xl=centered detail).
+// and custom settings screens (profile, privacy-center). Default width is
+// "4xl" — a centered column, narrower than list chrome (which runs full-
+// width) — override via maxWidth / layout.width, e.g. "full" to match list
+// chrome or "3xl" for a narrower auth-adjacent form.
 export type FormScreenShellWidth = FormWidth;
 
-const formScreenShellWidth: Record<FormScreenShellWidth, string> = {
-  "3xl": "max-w-3xl mx-auto",
-  "4xl": "max-w-4xl mx-auto",
-  full: "max-w-full",
-};
-
 export function FormScreenShell({
   children,
   className,
@@ -2185,7 +2181,7 @@ export function FormScreenShell({
   return (
     <div
       data-testid={testId}
-      className={cn("px-6 pt-6 pb-12 w-full", formScreenShellWidth[maxWidth], className)}
+      className={cn("px-6 pt-6 pb-12 w-full", screenWidthClassName[maxWidth], className)}
     >
       {children}
     </div>

package/src/primitives/layout.tsx

@@ -1,10 +1,22 @@
-// Layout-Primitives für Custom-Screens: ein Ort für vertikale Abstände und
-// Screen-Padding, damit Consumer nicht `flex flex-col gap-*` / `p-6` per Hand
-// streuen. Bewusst dünn — kein generisches Box-mit-20-props-System.
+// Layout primitives for custom screens: one place for vertical spacing and
+// screen padding, so consumers don't hand-roll `flex flex-col gap-*` / `p-6`.
+// Deliberately thin — not a generic box-with-20-props system.
 
+import type { FormWidth } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 
+export type ScreenWidth = FormWidth;
+
+// Shared 3xl/4xl/full → max-w-*/mx-auto map. FormScreenShell
+// (primitives/index.tsx) reuses this instead of keeping its own copy —
+// same width tokens must render the same class everywhere (fw#2640).
+export const screenWidthClassName: Record<ScreenWidth, string> = {
+  "3xl": "max-w-3xl mx-auto",
+  "4xl": "max-w-4xl mx-auto",
+  full: "max-w-full",
+};
+
 const STACK_GAP = { sm: "gap-2", md: "gap-4", lg: "gap-6" } as const;
 
 type StackGap = keyof typeof STACK_GAP;
@@ -28,11 +40,17 @@ type PageSectionProps = {
   readonly className?: string;
   readonly children?: ReactNode;
   readonly testId?: string;
+  readonly maxWidth?: ScreenWidth;
 };
 
-export function PageSection({ className, children, testId }: PageSectionProps): ReactNode {
+export function PageSection({
+  className,
+  children,
+  testId,
+  maxWidth = "full",
+}: PageSectionProps): ReactNode {
   return (
-    <div data-testid={testId} className={cn("p-6", className)}>
+    <div data-testid={testId} className={cn("p-6", screenWidthClassName[maxWidth], className)}>
       {children}
     </div>
   );