@cosmicdrift/kumiko-renderer-web 0.205.0 → 0.207.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.205.0",
+  "version": "0.207.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.205.0",
-    "@cosmicdrift/kumiko-headless": "0.205.0",
-    "@cosmicdrift/kumiko-renderer": "0.205.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.207.0",
+    "@cosmicdrift/kumiko-headless": "0.207.0",
+    "@cosmicdrift/kumiko-renderer": "0.207.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__/create-app.test.tsx

@@ -4,6 +4,7 @@ import type {
   EntityDefinition,
   EntityEditScreenDefinition,
   EntityListScreenDefinition,
+  ScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type {
@@ -14,7 +15,7 @@ import type {
   NavApi,
 } from "@cosmicdrift/kumiko-renderer";
 import { createStaticLocaleResolver, useContentEditor } from "@cosmicdrift/kumiko-renderer";
-import { act, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import type { ClientFeatureDefinition } from "../app/client-plugin";
 import { type CreateKumikoAppOptions, createKumikoApp } from "../app/create-app";
@@ -594,4 +595,92 @@ describe("createKumikoApp", () => {
     // Und definitiv NICHT der Edit-Screen (der wäre die Default-Landing).
     expect(screen.queryByTestId("render-edit-form")).toBeNull();
   });
+
+  // fw#2164: default row-click target. A screen declaring `detailFor` for the
+  // entity is the "Akte" — the click should land there without anyone
+  // wiring rowActions/onRowClick, and it should win over both of the old
+  // defaults (entityEdit-search, app-wide onRowClick).
+  describe("default row click (fw#2164)", () => {
+    const taskDetailScreen: ScreenDefinition = {
+      id: "task-detail",
+      type: "custom",
+      detailFor: "task",
+      renderer: { react: { __component: "TaskDetail" } },
+    };
+
+    function TaskDetailStub(): ReactNode {
+      return <span data-testid="task-detail-mounted" />;
+    }
+
+    function makeRowDispatcher(): Dispatcher {
+      return createMockDispatcher({
+        query: (async () => ({
+          isSuccess: true,
+          data: { rows: [{ id: "r1", title: "Alpha" }], nextCursor: null },
+        })) as unknown as Dispatcher["query"],
+      });
+    }
+
+    test("declared detailFor screen wins over the entityEdit-search fallback", async () => {
+      window.history.replaceState(null, "", "/task-list");
+      mountRoot();
+      const schema: FeatureSchema = {
+        featureName: "tasks",
+        entities: { task: taskEntity },
+        screens: [editScreen, listScreen, taskDetailScreen],
+      };
+      await mountApp({
+        schema,
+        dispatcher: makeRowDispatcher(),
+        screenQn: "tasks:screen:task-list",
+        clientFeatures: [{ name: "tasks", components: { "task-detail": TaskDetailStub } }],
+      });
+      await waitFor(() => expect(screen.getByTestId("row-r1")).toBeTruthy());
+
+      fireEvent.click(screen.getByTestId("row-r1"));
+
+      await waitFor(() => expect(window.location.pathname).toBe("/task-detail/r1"));
+      expect(await screen.findByTestId("task-detail-mounted")).toBeTruthy();
+    });
+
+    test("no detailFor screen → unchanged fallback to the entity's entityEdit screen", 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());
+
+      fireEvent.click(screen.getByTestId("row-r1"));
+
+      await waitFor(() => expect(window.location.pathname).toBe("/task-edit/r1"));
+    });
+
+    test("declared detailFor screen wins even over an app-wide onRowClick option", async () => {
+      window.history.replaceState(null, "", "/task-list");
+      mountRoot();
+      const schema: FeatureSchema = {
+        featureName: "tasks",
+        entities: { task: taskEntity },
+        screens: [listScreen, taskDetailScreen],
+      };
+      const onRowClick = () => {
+        throw new Error("onRowClick must not fire when a detailFor screen resolves");
+      };
+      await mountApp({
+        schema,
+        dispatcher: makeRowDispatcher(),
+        screenQn: "tasks:screen:task-list",
+        onRowClick,
+        clientFeatures: [{ name: "tasks", components: { "task-detail": TaskDetailStub } }],
+      });
+      await waitFor(() => expect(screen.getByTestId("row-r1")).toBeTruthy());
+
+      fireEvent.click(screen.getByTestId("row-r1"));
+
+      await waitFor(() => expect(window.location.pathname).toBe("/task-detail/r1"));
+    });
+  });
 });

package/src/__tests__/language-switcher.test.tsx

@@ -1,15 +1,19 @@
 import { describe, expect, mock, test } from "bun:test";
 import type { LocaleResolver } from "@cosmicdrift/kumiko-headless";
-import { createStaticLocaleResolver, LocaleProvider } from "@cosmicdrift/kumiko-renderer";
+import {
+  createStaticLocaleResolver,
+  kumikoDefaultTranslations,
+  LocaleProvider,
+} from "@cosmicdrift/kumiko-renderer";
 import { render as _render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { LanguageSwitcher } from "../layout/language-switcher";
 
-// Tests greifen den LanguageSwitcher mit einem stateful Stub-Resolver
-// (setLocale + subscribe) UND einem stateless Resolver, um die zwei
-// Verzweigungen abzudecken: Switcher rendert nur wenn setLocale da ist.
-// Radix-DropdownMenu öffnet auf pointerdown, daher userEvent statt
+// Tests exercise the LanguageSwitcher with both a stateful stub resolver
+// (setLocale + subscribe) and a stateless resolver, covering the two
+// branches: the switcher only renders when setLocale is present.
+// Radix DropdownMenu opens on pointerdown, so userEvent is used instead of
 // fireEvent.click.
 
 function makeStatefulResolver(initial: string): LocaleResolver {
@@ -33,7 +37,11 @@ function makeStatefulResolver(initial: string): LocaleResolver {
 }
 
 function renderWithResolver(resolver: LocaleResolver, ui: ReactNode) {
-  return _render(<LocaleProvider resolver={resolver}>{ui}</LocaleProvider>);
+  return _render(
+    <LocaleProvider resolver={resolver} fallbackBundles={[kumikoDefaultTranslations]}>
+      {ui}
+    </LocaleProvider>,
+  );
 }
 
 const locales = [
@@ -54,9 +62,9 @@ describe("LanguageSwitcher", () => {
   test("active locale shown via shorthand", () => {
     const resolver = makeStatefulResolver("de");
     renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
-    // Trigger zeigt den Locale-Code im DOM (Tailwind uppercased ihn nur
-    // visuell via CSS — der Text-Knoten bleibt lowercase). Das passt:
-    // getByText sieht den DOM-Text.
+    // The trigger shows the locale code in the DOM. Tailwind only
+    // uppercases it visually via CSS, the text node stays lowercase.
+    // That is fine, getByText sees the DOM text.
     expect(screen.getByText("de")).toBeTruthy();
   });
 
@@ -78,18 +86,23 @@ describe("LanguageSwitcher", () => {
     expect(resolver.setLocale).toHaveBeenCalledWith("en");
   });
 
+  test("trigger accessible name follows the active locale (en → Language)", () => {
+    const resolver = makeStatefulResolver("en");
+    renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
+    expect(screen.getByRole("button", { name: "Language" })).toBeTruthy();
+  });
+
   test("matches active locale via language-root (de-AT → de)", async () => {
     const user = userEvent.setup();
     const resolver = makeStatefulResolver("de-AT");
     renderWithResolver(resolver, <LanguageSwitcher locales={locales} testId="lang" />);
-    // Trigger zeigt "DE" (aus de-AT abgeleitet) — der active marker im
-    // Dropdown muss bei "Deutsch" sitzen, nicht bei "English".
+    // The trigger shows "DE", derived from de-AT. The active marker in the
+    // dropdown must sit on "Deutsch", not "English".
     await user.click(screen.getByRole("button", { name: "Sprache" }));
     await waitFor(() => {
-      // Radix-CheckboxItem markiert active via aria-checked="true". Der
-      // Check-Icon (lucide) sitzt im ItemIndicator und ist nur sichtbar
-      // wenn checked — die ARIA-Variante ist robust gegen Rendering-
-      // Tricks.
+      // Radix CheckboxItem marks active via aria-checked="true". The check
+      // icon (lucide) lives in the ItemIndicator and is only visible when
+      // checked, so the ARIA variant is robust against rendering quirks.
       const deItem = screen.getByText("Deutsch").closest('[role="menuitemcheckbox"]');
       expect(deItem?.getAttribute("aria-checked")).toBe("true");
       const enItem = screen.getByText("English").closest('[role="menuitemcheckbox"]');

package/src/app/create-app.tsx

@@ -19,6 +19,7 @@ import {
   DraftStorageProvider,
   ExtensionSectionsProvider,
   type FeatureSchema,
+  hasDetailScreen,
   KumikoScreen,
   kumikoDefaultTranslations,
   LiveEventsProvider,
@@ -143,6 +144,8 @@ export type CreateKumikoAppOptions = {
   readonly draftStorage?: DraftStorage;
   readonly screenQn?: string;
   readonly translate?: Translate;
+  /** Row-click fallback for entities with no declared `detailFor` screen
+   *  (fw#2164) — a `detailFor` screen always wins over this option. */
   readonly onRowClick?: (row: ListRowViewModel, entityName: string) => void;
   /** App-Shell. Bekommt das resolved `schema` als Prop — so können
    *  AppShell-Komponenten an WorkspaceShell/DefaultAppShell durchreichen
@@ -568,19 +571,31 @@ function RoutedScreen({
   const effectiveOnRowClick = useMemo<
     ((row: ListRowViewModel, entityName: string) => void) | undefined
   >(() => {
-    if (onRowClick !== undefined) return onRowClick;
     return (row, entityName) => {
-      // Search for the edit screen for the entity across all features —
-      // in a single-feature setup that's the same feature as the active
-      // one, in multi-feature the edit could theoretically live in a
-      // different feature (one that shares the entity).
+      // Precedence (fw#2164): detailFor screen, then onRowClick, then the
+      // entityEdit-search fallback below. An explicit rowActions
+      // rowClick:true already wins over all of this — kumiko-screen.tsx
+      // handles it before onRowClick is ever called.
+      if (hasDetailScreen(app.features, entityName)) {
+        nav.navigate({ entity: entityName, id: row.id });
+        return;
+      }
+      if (onRowClick !== undefined) {
+        onRowClick(row, entityName);
+        return;
+      }
+      // No declared detail screen and no app-wide onRowClick — search for
+      // the edit screen for the entity across all features — in a
+      // single-feature setup that's the same feature as the active one, in
+      // multi-feature the edit could theoretically live in a different
+      // feature (one that shares the entity).
       for (const f of app.features) {
         const editScreen = f.screens.find(
           (s) => s.type === "entityEdit" && s.entity === entityName,
         );
         if (editScreen) {
-          // editScreen.id is QN form (registry-stamped); nav.navigate
-          // expects the short form. Otherwise the URL gets double-qualified.
+          // editScreen.id is already short form; lastSegment is a no-op
+          // safety net here, kept for symmetry with the other call sites.
           nav.navigate({ screenId: lastSegment(editScreen.id), entityId: row.id });
           return;
         }

package/src/layout/language-switcher.tsx

@@ -1,17 +1,17 @@
-// LanguageSwitcher — Dropdown der die App-Locale via
-// LocaleResolver.setLocale umschaltet. Auf Radix-DropdownMenu, gleicher
-// Stack wie UserMenu/TenantSwitcher.
+// LanguageSwitcher — dropdown that switches the app locale via
+// LocaleResolver.setLocale. Built on Radix DropdownMenu, same stack
+// as UserMenu/TenantSwitcher.
 //
-// Rendert gar nix wenn der Resolver keine setLocale-Methode anbietet
-// (statischer Resolver) — App-Dev sieht dann sofort dass er einen
-// stateful Resolver verdrahten muss, bevor der Switcher UI-sichtbar
-// wird.
+// Renders nothing if the resolver doesn't offer a setLocale method
+// (static resolver) — the app dev then immediately sees they need to
+// wire up a stateful resolver before the switcher becomes visible in
+// the UI.
 //
-// Icon-Slot optional: das Framework zieht lucide-react nicht selbst
-// rein; eine App die keinen Icon-Import will, kriegt den Globe-
-// Unicode-Glyph (🌐) als Default.
+// Icon slot is optional: the framework doesn't pull in lucide-react
+// itself; an app that doesn't want an icon import gets the globe
+// unicode glyph (🌐) as default.
 
-import { useLocale } from "@cosmicdrift/kumiko-renderer";
+import { useLocale, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useMemo } from "react";
 import { cn } from "../lib/cn";
 import {
@@ -22,19 +22,19 @@ import {
 } from "../primitives/dropdown-menu";
 
 export type LocaleOption = {
-  /** BCP-47-Code, z.B. "de", "en-US", "fr-CA". Wird 1:1 an
-   *  resolver.setLocale() weitergereicht. */
+  /** BCP-47 code, e.g. "de", "en-US", "fr-CA". Passed through 1:1 to
+   *  resolver.setLocale(). */
   readonly code: string;
-  /** Menschenlesbare Anzeige im Dropdown. */
+  /** Human-readable label shown in the dropdown. */
   readonly label: string;
 };
 
 export type LanguageSwitcherProps = {
-  /** Auswählbare Locales. Reihenfolge = Anzeige-Reihenfolge im Menü. */
+  /** Selectable locales. Order = display order in the menu. */
   readonly locales: readonly LocaleOption[];
-  /** Icon-Slot links neben dem Button-Label. Default: 🌐. */
+  /** Icon slot left of the button label. Default: 🌐. */
   readonly icon?: ReactNode;
-  /** aria-label + title des Triggers. Default: "Sprache". */
+  /** aria-label + title of the trigger. Default: translated "kumiko.nav.language". */
   readonly label?: string;
   readonly testId?: string;
 };
@@ -42,15 +42,17 @@ export type LanguageSwitcherProps = {
 export function LanguageSwitcher({
   locales,
   icon = "🌐",
-  label = "Sprache",
+  label,
   testId,
 }: LanguageSwitcherProps): ReactNode {
   const resolver = useLocale();
+  const t = useTranslation();
+  const resolvedLabel = label ?? t("kumiko.nav.language");
 
   const activeLocale = resolver.locale();
-  // Match entweder exact ("de-DE") oder Language-Root ("de") gegen die
-  // verfügbaren Optionen. So zeigt der Switcher "Deutsch" aktiv wenn
-  // der Browser "de-AT" liefert und die Option nur "de" heißt.
+  // Matches either exact ("de-DE") or the language root ("de") against
+  // the available options. So the switcher shows "German" active when
+  // the browser reports "de-AT" but the option is just "de".
   const activeOption = useMemo(() => {
     const exact = locales.find((o) => o.code === activeLocale);
     if (exact) return exact;
@@ -59,7 +61,7 @@ export function LanguageSwitcher({
   }, [locales, activeLocale]);
 
   if (resolver.setLocale === undefined) {
-    // Stateless-Resolver → kein Wechsel möglich. Kein Noise im Topbar.
+    // Stateless resolver → no switching possible. No noise in the topbar.
     return null;
   }
 
@@ -70,8 +72,8 @@ export function LanguageSwitcher({
       <DropdownMenuTrigger asChild>
         <button
           type="button"
-          aria-label={label}
-          title={label}
+          aria-label={resolvedLabel}
+          title={resolvedLabel}
           data-testid={testId}
           className={cn(
             "inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2 text-sm",
@@ -85,7 +87,7 @@ export function LanguageSwitcher({
           </span>
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-[10rem]" aria-label={label}>
+      <DropdownMenuContent align="end" className="min-w-[10rem]" aria-label={resolvedLabel}>
         {locales.map((opt) => (
           <DropdownMenuCheckboxItem
             key={opt.code}