@cosmicdrift/kumiko-renderer-web 0.201.0 → 0.202.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.201.0",
+  "version": "0.202.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.201.0",
-    "@cosmicdrift/kumiko-headless": "0.201.0",
-    "@cosmicdrift/kumiko-renderer": "0.201.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.202.0",
+    "@cosmicdrift/kumiko-headless": "0.202.0",
+    "@cosmicdrift/kumiko-renderer": "0.202.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

@@ -576,10 +576,12 @@ describe("createKumikoApp", () => {
       route: { screenId: "task-list" },
       navigate: () => {},
       replace: () => {},
-      hrefFor: (target) =>
-        target.entityId !== undefined
+      hrefFor: (target) => {
+        if (!("screenId" in target)) return "";
+        return target.entityId !== undefined
           ? `/${target.screenId}/${target.entityId}`
-          : `/${target.screenId}`,
+          : `/${target.screenId}`;
+      },
       searchParams: {},
       setSearchParams: () => {},
     };

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

@@ -6,7 +6,7 @@ import type {
   EntityListScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
-import type { FeatureSchema, NavApi } from "@cosmicdrift/kumiko-renderer";
+import type { FeatureSchema, NavApi, NavTarget } from "@cosmicdrift/kumiko-renderer";
 import {
   DispatcherProvider,
   ExtensionSectionsProvider,
@@ -812,12 +812,12 @@ describe("KumikoScreen", () => {
     const searchParamUpdates: Record<string, string | null>[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => {
+      navigate: (target: NavTarget) => {
         calls.push({ kind: "navigate", value: target });
-        navigateCalls.push(target);
+        if ("screenId" in target) navigateCalls.push(target);
       },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: (u: Record<string, string | null>) => {
         calls.push({ kind: "setSearchParams", value: u });
@@ -941,9 +941,11 @@ describe("KumikoScreen", () => {
     const searchParamUpdates: Record<string, string | null>[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string; entityId?: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: (u: Record<string, string | null>) => searchParamUpdates.push(u),
     };
@@ -1000,9 +1002,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string; entityId?: string }[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string; entityId?: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1055,9 +1059,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string; entityId?: string }[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string; entityId?: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1114,9 +1120,11 @@ describe("KumikoScreen", () => {
     const searchParamUpdates: Record<string, string | null>[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: (u: Record<string, string | null>) => searchParamUpdates.push(u),
     };
@@ -1170,9 +1178,11 @@ describe("KumikoScreen", () => {
     });
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1306,7 +1316,7 @@ describe("KumikoScreen", () => {
       route: undefined,
       navigate: () => {},
       replace: () => {},
-      hrefFor: (t) => `/${t.screenId}`,
+      hrefFor: (t) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: { "task-list.f.id": "r1,r2" },
       setSearchParams: () => {},
     };
@@ -1448,9 +1458,11 @@ describe("KumikoScreen", () => {
     });
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1492,9 +1504,11 @@ describe("KumikoScreen", () => {
     });
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1576,9 +1590,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string }[] = [];
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1609,9 +1625,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string }[] = [];
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1747,9 +1765,11 @@ describe("KumikoScreen", () => {
     });
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1825,9 +1845,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string }[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1864,9 +1886,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string }[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -2209,7 +2233,7 @@ describe("KumikoScreen: actionForm extension-section", () => {
       route: { screenId: "post-update" },
       navigate: () => undefined,
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: { incidentId: "inc-7" },
       setSearchParams: () => undefined,
     };

package/src/__tests__/test-utils.tsx

@@ -53,10 +53,12 @@ const stubNav: NavApi = {
   route: undefined,
   navigate: () => {},
   replace: () => {},
-  hrefFor: (target) =>
-    target.entityId !== undefined
+  hrefFor: (target) => {
+    if (!("screenId" in target)) return "";
+    return target.entityId !== undefined
       ? `/${target.screenId}/${target.entityId}`
-      : `/${target.screenId}`,
+      : `/${target.screenId}`;
+  },
   searchParams: {},
   setSearchParams: () => {},
 };

package/src/app/create-app.tsx

@@ -177,8 +177,14 @@ export type CreateKumikoAppOptions = {
    *  `{ hasWorkspaces: true }` aufgerufen — der Default-Hook nutzt das
    *  um das URL-Pattern auf `/<workspace>/<screen>[/<entityId>]`
    *  umzustellen. Eigene Adapter dürfen die Option ignorieren wenn ihr
-   *  Router das anders löst. */
-  readonly navAdapter?: (options?: { readonly hasWorkspaces?: boolean }) => NavApi;
+   *  Router das anders löst. `features` ist `app.features` — der
+   *  Default-Hook braucht sie für resolveTarget() (ObjectTarget →
+   *  ScreenTarget); eigene Adapter die nie ein ObjectTarget bekommen,
+   *  dürfen sie ignorieren. */
+  readonly navAdapter?: (options?: {
+    readonly hasWorkspaces?: boolean;
+    readonly features?: readonly FeatureSchema[];
+  }) => NavApi;
 };
 
 // Reads the dev-server-injected schema from the global. Guarded for
@@ -474,7 +480,10 @@ function BrowserNavBoot({
 }: {
   readonly app: AppSchema;
   readonly fallbackQn: string;
-  readonly useNavApi: (options?: { readonly hasWorkspaces?: boolean }) => NavApi;
+  readonly useNavApi: (options?: {
+    readonly hasWorkspaces?: boolean;
+    readonly features?: readonly FeatureSchema[];
+  }) => NavApi;
   readonly hasWorkspaces: boolean;
   readonly translate?: Translate;
   readonly onRowClick?: (row: ListRowViewModel, entityName: string) => void;
@@ -483,7 +492,7 @@ function BrowserNavBoot({
     readonly schema: AppSchema;
   }) => ReactNode;
 }): ReactNode {
-  const navApi = useNavApi({ hasWorkspaces });
+  const navApi = useNavApi({ hasWorkspaces, features: app.features });
   const Shell = shell;
   const screen = (
     <RoutedScreen

package/src/app/nav.tsx

@@ -11,10 +11,13 @@
 // Notify-Trigger (eigenes pushPath, popstate-Event), nicht generalisierbar.
 
 import {
+  type FeatureSchema,
   formatPath,
   type NavApi,
   type NavTarget,
   parsePath,
+  resolveTarget,
+  type ScreenTarget,
   useNav,
 } from "@cosmicdrift/kumiko-renderer";
 import {
@@ -66,6 +69,11 @@ function prependBasePath(path: string, basePath: string): string {
 const listeners = new Set<() => void>();
 let popstateWired = false;
 
+// Stable identity for the omitted-features case — `?? []` would create a
+// fresh array every render, busting the useMemo below on every render for
+// every existing useBrowserNavApi() call site (none of which pass features).
+const NO_FEATURES: readonly FeatureSchema[] = [];
+
 function ensurePopstateWired(): void {
   if (popstateWired) return;
   if (typeof window === "undefined") return;
@@ -174,6 +182,10 @@ function replacePath(path: string): void {
 export function useBrowserNavApi(options?: {
   readonly hasWorkspaces?: boolean;
   readonly basePath?: string;
+  /** Feature list ObjectTarget resolution needs (resolveTarget). Omit when
+   *  the caller never passes an ObjectTarget — a ScreenTarget resolves
+   *  without looking at the feature list at all. */
+  readonly features?: readonly FeatureSchema[];
 }): NavApi {
   const path = useSyncExternalStore(subscribe, readPath, () => "/");
   // Search wird über denselben Listener-Set notifiziert (popstate +
@@ -185,6 +197,7 @@ export function useBrowserNavApi(options?: {
   const basePath = useMemo(() => normalizeBasePath(options?.basePath), [options?.basePath]);
   const searchParams = useMemo(() => parseSearchParams(search), [search]);
   const inAppPath = useMemo(() => stripBasePath(path, basePath), [path, basePath]);
+  const features = options?.features ?? NO_FEATURES;
   return useMemo<NavApi>(() => {
     const route = inAppPath === undefined ? undefined : parsePath(inAppPath, hasWorkspaces);
     // NavTarget-Contract: workspaceId weglassen = aktueller Workspace
@@ -192,21 +205,24 @@ export function useBrowserNavApi(options?: {
     // landet `/screen-id` in parsePath(hasWorkspaces) als workspaceId,
     // WorkspaceShell sieht einen unbekannten Workspace und revertet
     // sofort auf den Default-Screen ("Klick tut nichts"-Prod-Bug).
-    const inCurrentWorkspace = (target: NavTarget): NavTarget =>
+    const inCurrentWorkspace = (target: ScreenTarget): ScreenTarget =>
       hasWorkspaces && target.workspaceId === undefined && route?.workspaceId !== undefined
         ? { ...target, workspaceId: route.workspaceId }
         : target;
+    // resolveTarget runs first so an ObjectTarget never reaches formatPath —
+    // everything downstream (workspace-injection, path-building) only ever
+    // sees the ScreenTarget shape it already knew about.
+    const toPath = (target: NavTarget): string =>
+      prependBasePath(formatPath(inCurrentWorkspace(resolveTarget(features, target))), basePath);
     return {
       route,
-      navigate: (target) =>
-        pushPath(prependBasePath(formatPath(inCurrentWorkspace(target)), basePath)),
-      replace: (target) =>
-        replacePath(prependBasePath(formatPath(inCurrentWorkspace(target)), basePath)),
-      hrefFor: (target) => prependBasePath(formatPath(inCurrentWorkspace(target)), basePath),
+      navigate: (target) => pushPath(toPath(target)),
+      replace: (target) => replacePath(toPath(target)),
+      hrefFor: (target) => toPath(target),
       searchParams,
       setSearchParams: applySearchParamUpdates,
     };
-  }, [inAppPath, hasWorkspaces, basePath, searchParams]);
+  }, [inAppPath, hasWorkspaces, basePath, searchParams, features]);
 }
 
 // ---- KumikoLink (Anchor-basiert, nur Web) ----