@cosmicdrift/kumiko-renderer-web 0.247.0 → 0.249.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.247.0",
+  "version": "0.249.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.247.0",
-    "@cosmicdrift/kumiko-headless": "0.247.0",
-    "@cosmicdrift/kumiko-renderer": "0.247.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.249.0",
+    "@cosmicdrift/kumiko-headless": "0.249.0",
+    "@cosmicdrift/kumiko-renderer": "0.249.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.247.0"
+    "@cosmicdrift/kumiko-locale-de": "0.249.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/nav-tree.test.tsx

@@ -673,6 +673,105 @@ describe("NavTree dynamic provider nodes", () => {
     expect(dispatched).toEqual({ featureId: "cms", action: "create", args: { folder: "" } });
   });
 
+  // fw#2750: createAction/actions[] carry screen XOR target — same
+  // polymorphism as the node itself. A `screen` action renders a
+  // route-KumikoLink instead of a dispatch-button.
+  test("createAction mit screen rendert einen Link auf die richtige Route statt zu dispatchen", async () => {
+    let dispatched: TargetRef | undefined;
+    restoreDispatch = setDispatchListener((t) => {
+      dispatched = t;
+    });
+    const schema: FeatureSchema = {
+      featureName: "cms",
+      entities: {},
+      screens: [{ id: "new-page", type: "entityList", entity: "item", columns: [] }],
+      navs: [
+        {
+          id: "content",
+          label: "Content",
+          order: 10,
+          provider: true,
+          createAction: { icon: "plus", label: "New page", screen: "cms:screen:new-page" },
+        },
+      ],
+    } as FeatureSchema;
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([pageLeaf("apex")]);
+      return () => {};
+    };
+    await act(async () => {
+      renderDynamic({ schema, providers: new Map([["cms:nav:content", provider]]) });
+    });
+
+    const link = screen.getByRole("link", { name: "New page" });
+    expect(link.getAttribute("href")).toBe("/new-page");
+    fireEvent.click(link);
+    expect(dispatched).toBeUndefined();
+  });
+
+  // fw#2750: same screen/target polymorphism applies to actions[] entries
+  // (hover-actions), not just createAction.
+  test("actions[]-Eintrag mit screen rendert einen Link auf die richtige Route statt zu dispatchen", async () => {
+    let dispatched: TargetRef | undefined;
+    restoreDispatch = setDispatchListener((t) => {
+      dispatched = t;
+    });
+    const schema: FeatureSchema = {
+      featureName: "cms",
+      entities: {},
+      screens: [{ id: "hero", type: "entityList", entity: "item", columns: [] }],
+      navs: [
+        {
+          id: "hero",
+          label: "Hero",
+          order: 10,
+          actions: [{ icon: "edit", label: "Edit hero", screen: "cms:screen:hero" }],
+        },
+      ],
+    } as FeatureSchema;
+    await act(async () => {
+      renderDynamic({ schema, providers: new Map() });
+    });
+
+    const link = screen.getByRole("link", { name: "Edit hero" });
+    expect(link.getAttribute("href")).toBe("/hero");
+    fireEvent.click(link);
+    expect(dispatched).toBeUndefined();
+  });
+
+  // fw#2751: boot validates screen XOR target for NavDefinition actions, but
+  // a schema handed straight to NavTree (as here, and as a provider-emitted
+  // TreeNode at runtime) bypasses that — neither must not render a dead
+  // button, it must warn once and drop the action.
+  test("actions[]-Eintrag ohne screen und ohne target rendert nichts und warnt einmal", async () => {
+    const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const schema: FeatureSchema = {
+        featureName: "cms",
+        entities: {},
+        screens: [],
+        navs: [
+          {
+            id: "hero",
+            label: "Hero",
+            order: 10,
+            actions: [{ icon: "edit", label: "Broken action" }],
+          },
+        ],
+      } as FeatureSchema;
+      await act(async () => {
+        renderDynamic({ schema, providers: new Map() });
+      });
+
+      expect(screen.queryByRole("button", { name: "Broken action" })).toBeNull();
+      expect(screen.queryByRole("link", { name: "Broken action" })).toBeNull();
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(warnSpy.mock.calls[0]?.[0]).toContain("Broken action");
+    } finally {
+      warnSpy.mockRestore();
+    }
+  });
+
   test("target-Knoten dispatcht beim Klick (statt Route-Link)", async () => {
     let dispatched: TargetRef | undefined;
     restoreDispatch = setDispatchListener((t) => {
@@ -773,6 +872,58 @@ describe("NavTree dynamic provider nodes", () => {
   });
 });
 
+// fw#2750: the actions container clears the collapse chevron via `right-7`.
+// A node without a chevron (not expandable) has no chevron — the narrower
+// `right-1` spacing must only apply there.
+describe("NavTree Actions-Positionierung", () => {
+  test("expandable Knoten (mit Chevron) hält den weiten right-7-Abstand", async () => {
+    const provider: TreeChildrenSubscribe = () => (emit) => {
+      emit([pageLeaf("apex")]);
+      return () => {};
+    };
+    await act(async () => {
+      renderDynamic({
+        schema: dynamicSchema(),
+        providers: new Map([["cms:nav:content", provider]]),
+      });
+    });
+
+    const btn = screen.getByRole("button", { name: "New page" });
+    const actionsContainer = btn.parentElement;
+    expect(actionsContainer?.className).toContain("right-7");
+    expect(actionsContainer?.className).not.toContain("right-1");
+  });
+
+  test("nicht-expandable Knoten (kein Chevron) rückt auf right-1 auf", async () => {
+    const schema: FeatureSchema = {
+      featureName: "cms",
+      entities: {},
+      screens: [{ id: "hero", type: "entityList", entity: "item", columns: [] }],
+      navs: [
+        {
+          id: "hero",
+          label: "Hero",
+          order: 10,
+          screen: "hero",
+          createAction: {
+            icon: "plus",
+            label: "New sub-page",
+            target: { featureId: "cms", action: "create", args: {} },
+          },
+        },
+      ],
+    } as FeatureSchema;
+    await act(async () => {
+      renderDynamic({ schema, providers: new Map() });
+    });
+
+    const btn = screen.getByRole("button", { name: "New sub-page" });
+    const actionsContainer = btn.parentElement;
+    expect(actionsContainer?.className).toContain("right-1");
+    expect(actionsContainer?.className).not.toContain("right-7");
+  });
+});
+
 describe("NavTree Suchfeld", () => {
   // Das Suchfeld ist das einzige <input> im Baum; über die Rolle statt den
   // i18n-Placeholder gefunden (i18n-Bundle resolvt im Worktree gegen den

package/src/layout/nav-tree.tsx

@@ -493,11 +493,87 @@ function ActionGlyph({ icon }: { readonly icon: string }): ReactNode {
   );
 }
 
-// Hover-Actions + „+"-Affordance, absolut rechts (links vom Chevron via
-// right-7). createAction ist persistent (User-sichtbares „+"), übrige
-// Actions erst bei Hover. stopPropagation, damit der Row-Click (toggle/
-// dispatch) nicht zusätzlich feuert.
-function NodeActions({ node }: { node: NavNode }): ReactNode {
+// Boot validates screen XOR target for NavDefinition actions, but a
+// provider-emitted TreeNode reaches here without going through boot — warn
+// once per label instead of rendering a dead button (fw#2751 review).
+const warnedTreeActionLabels = new Set<string>();
+
+function warnTreeActionDropped(label: string): void {
+  // skip: already warned for this label — suppresses the repeat, not the warning itself.
+  if (warnedTreeActionLabels.has(label)) return;
+  warnedTreeActionLabels.add(label);
+  // biome-ignore lint/suspicious/noConsole: dev-warning for a setup error
+  console.warn(
+    `[kumiko] Nav action "${label}" has neither "screen" nor "target" set — it will not render.`,
+  );
+}
+
+// An action button carries screen XOR target (see TreeAction) — `screen`
+// renders a KumikoLink to the route, `target` a dispatch button. Same
+// classes/size either way, only the element changes.
+function TreeActionControl({
+  action,
+  ariaLabel,
+  className,
+  dispatch,
+  workspaceId,
+  children,
+}: {
+  readonly action: TreeAction;
+  readonly ariaLabel: string;
+  readonly className: string;
+  readonly dispatch: (target: TargetRef) => void;
+  readonly workspaceId: string | undefined;
+  readonly children: ReactNode;
+}): ReactNode {
+  if (action.screen !== undefined) {
+    const screenId = lastSegment(action.screen);
+    return (
+      <KumikoLink
+        to={{ ...(workspaceId !== undefined && { workspaceId }), screenId }}
+        aria-label={ariaLabel}
+        className={className}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </KumikoLink>
+    );
+  }
+  if (action.target !== undefined) {
+    const target = action.target;
+    return (
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        className={className}
+        onClick={(e) => {
+          e.stopPropagation();
+          dispatch(target);
+        }}
+      >
+        {children}
+      </button>
+    );
+  }
+  warnTreeActionDropped(action.label);
+  return null;
+}
+
+// Hover-actions + the "+" affordance, positioned absolute right.
+// createAction is persistent (a user-visible "+"), the other actions only
+// show on hover. stopPropagation so the row click (toggle/dispatch) doesn't
+// also fire. `expandable` comes from useNavNodeState (s.expandable) instead
+// of being re-derived here — a node without a chevron doesn't need the
+// right-7 gap, otherwise the "+" hangs 28px off the edge.
+function NodeActions({
+  node,
+  expandable,
+  workspaceId,
+}: {
+  readonly node: NavNode;
+  readonly expandable: boolean;
+  readonly workspaceId: string | undefined;
+}): ReactNode {
   const dispatch = useDispatchTarget();
   const t = useTranslation();
   const create = node.createAction;
@@ -509,33 +585,31 @@ function NodeActions({ node }: { node: NavNode }): ReactNode {
   const hover =
     "opacity-0 group-hover/menu-item:opacity-100 group-hover/menu-sub-item:opacity-100 group-focus-within/menu-item:opacity-100";
   return (
-    <div className="absolute top-1 right-7 flex items-center gap-0.5">
+    <div
+      className={cn("absolute top-1 flex items-center gap-0.5", expandable ? "right-7" : "right-1")}
+    >
       {create !== undefined && (
-        <button
-          type="button"
-          aria-label={label(create.label)}
+        <TreeActionControl
+          action={create}
+          ariaLabel={label(create.label)}
           className={btn}
-          onClick={(e) => {
-            e.stopPropagation();
-            dispatch(create.target);
-          }}
+          dispatch={dispatch}
+          workspaceId={workspaceId}
         >
           <Plus className="size-3.5" />
-        </button>
+        </TreeActionControl>
       )}
       {actions.map((a: TreeAction) => (
-        <button
+        <TreeActionControl
           key={a.label}
-          type="button"
-          aria-label={label(a.label)}
+          action={a}
+          ariaLabel={label(a.label)}
           className={cn(btn, hover)}
-          onClick={(e) => {
-            e.stopPropagation();
-            dispatch(a.target);
-          }}
+          dispatch={dispatch}
+          workspaceId={workspaceId}
         >
           <ActionGlyph icon={a.icon} />
-        </button>
+        </TreeActionControl>
       ))}
     </div>
   );
@@ -649,7 +723,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             <NavBadge node={node} />
           </KumikoLink>
         </SidebarMenuButton>
-        <NodeActions node={node} />
+        <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
         {chevron}
         {sub}
       </SidebarMenuItem>
@@ -674,7 +748,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
           </span>
           <NavBadge node={node} />
         </SidebarMenuButton>
-        <NodeActions node={node} />
+        <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
         {chevron}
         {sub}
       </SidebarMenuItem>
@@ -700,7 +774,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             <ChevronRight className="ml-auto" />
           ))}
       </SidebarMenuButton>
-      <NodeActions node={node} />
+      <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
       {sub}
     </SidebarMenuItem>
   );
@@ -769,7 +843,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             <NavBadge node={node} />
           </KumikoLink>
         </SidebarMenuSubButton>
-        <NodeActions node={node} />
+        <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
         {chevron}
         {deeper}
       </SidebarMenuSubItem>
@@ -792,7 +866,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             <NavBadge node={node} />
           </button>
         </SidebarMenuSubButton>
-        <NodeActions node={node} />
+        <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
         {chevron}
         {deeper}
       </SidebarMenuSubItem>
@@ -819,7 +893,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
           </span>
         </button>
       </SidebarMenuSubButton>
-      <NodeActions node={node} />
+      <NodeActions node={node} expandable={s.expandable} workspaceId={s.workspaceId} />
       {chevron}
       {deeper}
     </SidebarMenuSubItem>