@cosmicdrift/kumiko-renderer-web 0.126.0 → 0.127.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.126.0",
+  "version": "0.127.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.126.0",
-    "@cosmicdrift/kumiko-headless": "0.126.0",
-    "@cosmicdrift/kumiko-renderer": "0.126.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.127.0",
+    "@cosmicdrift/kumiko-headless": "0.127.0",
+    "@cosmicdrift/kumiko-renderer": "0.127.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/layout/__tests__/shell-breadcrumb.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, test } from "bun:test";
+import type { ScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import { resolveDetailBreadcrumb } from "../shell-breadcrumb";
+
+const t = (key: string): string => key;
+
+describe("resolveDetailBreadcrumb", () => {
+  test("entityEdit pairs with entityList on same entity", () => {
+    const screens: ScreenDefinition[] = [
+      {
+        id: "user-list",
+        type: "entityList",
+        entity: "user",
+        columns: ["email"],
+        rowActions: [],
+      },
+      {
+        id: "user-edit",
+        type: "entityEdit",
+        entity: "user",
+        layout: { sections: [{ fields: ["email"] }] },
+      },
+    ];
+    expect(resolveDetailBreadcrumb(screens, "user-edit", t)).toEqual([
+      { label: "screen:user-list.title", screenId: "user-list" },
+      { label: "screen:user-edit.title" },
+    ]);
+  });
+
+  test("entityList navigate rowAction links to detail screen", () => {
+    const screens: ScreenDefinition[] = [
+      {
+        id: "export-job-list",
+        type: "entityList",
+        entity: "export-job",
+        columns: ["status"],
+        rowActions: [
+          {
+            kind: "navigate",
+            id: "view",
+            label: "kumiko.actions.view",
+            screen: "export-job-detail",
+            entityId: "id",
+          },
+        ],
+      },
+      {
+        id: "export-job-detail",
+        type: "entityEdit",
+        entity: "export-job",
+        layout: { sections: [{ fields: ["status"] }] },
+      },
+    ];
+    expect(resolveDetailBreadcrumb(screens, "export-job-detail", t)?.[0]?.screenId).toBe(
+      "export-job-list",
+    );
+  });
+
+  test("custom detail uses listScreenId", () => {
+    const screens: ScreenDefinition[] = [
+      {
+        id: "sysadmin-users",
+        type: "custom",
+        renderer: { react: { __component: "SysadminUsersScreen" } },
+      },
+      {
+        id: "sysadmin-user-detail",
+        type: "custom",
+        listScreenId: "sysadmin-users",
+        renderer: { react: { __component: "SysadminUserDetailScreen" } },
+      },
+    ];
+    expect(resolveDetailBreadcrumb(screens, "sysadmin-user-detail", t)).toEqual([
+      { label: "screen:sysadmin-users.title", screenId: "sysadmin-users" },
+      { label: "screen:sysadmin-user-detail.title" },
+    ]);
+  });
+
+  test("unknown screen returns undefined", () => {
+    expect(resolveDetailBreadcrumb([], "missing", t)).toBeUndefined();
+  });
+});

package/src/layout/shell-breadcrumb.ts

@@ -0,0 +1,46 @@
+import type { ScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import { lastSegment } from "./nav-tree";
+
+export type BreadcrumbCrumb = {
+  readonly label: string;
+  readonly screenId?: string;
+};
+
+export function screenTitleKey(screenShortId: string): string {
+  return `screen:${screenShortId}.title`;
+}
+
+export function resolveDetailBreadcrumb(
+  screens: readonly ScreenDefinition[],
+  detailScreenId: string,
+  t: (key: string) => string,
+): readonly BreadcrumbCrumb[] | undefined {
+  const detail = screens.find((s) => lastSegment(s.id) === detailScreenId);
+  if (detail === undefined) return undefined;
+
+  const listFromRowAction = screens.find((s) => {
+    if (s.type !== "entityList") return false;
+    return (s.rowActions ?? []).some((a) => a.kind === "navigate" && a.screen === detailScreenId);
+  });
+
+  const listFromEntity =
+    detail.type === "entityEdit"
+      ? screens.find((s) => s.type === "entityList" && s.entity === detail.entity)
+      : undefined;
+
+  const listFromCustomParent =
+    detail.type === "custom" && detail.listScreenId !== undefined
+      ? screens.find((s) => lastSegment(s.id) === detail.listScreenId)
+      : undefined;
+
+  const list = listFromRowAction ?? listFromEntity ?? listFromCustomParent;
+  if (list === undefined) {
+    return [{ label: t(screenTitleKey(detailScreenId)) }];
+  }
+
+  const listId = lastSegment(list.id);
+  return [
+    { label: t(screenTitleKey(listId)), screenId: listId },
+    { label: t(screenTitleKey(detailScreenId)) },
+  ];
+}

package/src/layout/shell-header.tsx

@@ -9,10 +9,18 @@ import { resolveNavigation } from "@cosmicdrift/kumiko-headless";
 import type { AppSchema, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
 import { toAppSchema, useNav, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useMemo } from "react";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "../ui/breadcrumb";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../ui/breadcrumb";
 import { Separator } from "../ui/separator";
 import { SidebarTrigger } from "../ui/sidebar";
 import { buildNavRegistrySliceForApp, lastSegment } from "./nav-tree";
+import { type BreadcrumbCrumb, resolveDetailBreadcrumb } from "./shell-breadcrumb";
 
 type ShellHeaderUser = {
   readonly id: string;
@@ -30,25 +38,53 @@ export function ShellHeader({
 }): ReactNode {
   const nav = useNav();
   const t = useTranslation();
+  const appSchema = toAppSchema(schema);
   const tree = useMemo(() => {
-    const source = buildNavRegistrySliceForApp(toAppSchema(schema));
+    const source = buildNavRegistrySliceForApp(appSchema);
     return resolveNavigation({ source, ...(user !== undefined && { user }) });
-  }, [schema, user]);
+  }, [appSchema, user]);
 
+  const allScreens = useMemo(
+    () => appSchema.features.flatMap((f) => f.screens),
+    [appSchema.features],
+  );
   const screenId = nav.route?.screenId;
-  const label = screenId !== undefined ? activeNavLabel(tree, screenId, (k) => t(k)) : undefined;
+  const crumbs = useMemo((): readonly BreadcrumbCrumb[] | undefined => {
+    if (screenId === undefined) return undefined;
+    const navLabel = activeNavLabel(tree, screenId, (k) => t(k));
+    if (navLabel !== undefined) return [{ label: navLabel }];
+    return resolveDetailBreadcrumb(allScreens, screenId, t);
+  }, [allScreens, screenId, t, tree]);
 
   return (
     <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
       <div className="flex items-center gap-2 px-4">
         <SidebarTrigger className="-ml-1" />
         <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
-        {label !== undefined && (
+        {crumbs !== undefined && crumbs.length > 0 && (
           <Breadcrumb>
             <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>{label}</BreadcrumbPage>
-              </BreadcrumbItem>
+              {crumbs.map((crumb, index) => {
+                const screenId = crumb.screenId;
+                return (
+                  <BreadcrumbItem key={screenId ?? crumb.label}>
+                    {index > 0 && <BreadcrumbSeparator />}
+                    {screenId !== undefined && index < crumbs.length - 1 ? (
+                      <BreadcrumbLink
+                        href="#"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          nav.navigate({ screenId });
+                        }}
+                      >
+                        {crumb.label}
+                      </BreadcrumbLink>
+                    ) : (
+                      <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                    )}
+                  </BreadcrumbItem>
+                );
+              })}
             </BreadcrumbList>
           </Breadcrumb>
         )}
@@ -69,7 +105,7 @@ function activeNavLabel(
 ): string | undefined {
   for (const node of nodes) {
     if (node.screen !== undefined && lastSegment(node.screen) === screenId) {
-      return node.label.includes(".") ? t(node.label) : node.label;
+      return node.label.includes(".") || node.label.includes(":") ? t(node.label) : node.label;
     }
     const child = activeNavLabel(node.children, screenId, t);
     if (child !== undefined) return child;