@cosmicdrift/kumiko-renderer-web 1.0.0 → 2.0.0

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/default-app-shell.tsx

@@ -14,13 +14,12 @@
 // Apps die feingranulare Kontrolle wollen, gehen direkt auf die ui/-Teile.
 // Wer ein Topbar mit Workspace-Switcher braucht, nutzt <WorkspaceShell>.
 
-import type { NavNode } from "@cosmicdrift/kumiko-headless";
-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 { Separator } from "../ui/separator";
+import {
+  type AppSchema,
+  type FeatureSchema,
+  UserRolesProvider,
+} from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
 import {
   Sidebar,
   SidebarContent,
@@ -30,9 +29,9 @@ import {
   SidebarInset,
   SidebarProvider,
   SidebarRail,
-  SidebarTrigger,
 } from "../ui/sidebar";
-import { buildNavRegistrySliceForApp, lastSegment, NavTree } from "./nav-tree";
+import { NavTree } from "./nav-tree";
+import { ShellHeader } from "./shell-header";
 
 export type DefaultAppShellUser = {
   readonly id: string;
@@ -117,70 +116,9 @@ export function DefaultAppShell({
           {...(headerActions !== undefined && { headerActions })}
         />
         <main className={fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto"}>
-          {children}
+          <UserRolesProvider roles={user?.roles}>{children}</UserRolesProvider>
         </main>
       </SidebarInset>
     </SidebarProvider>
   );
 }
-
-// Inset-Header: hostet den SidebarTrigger (öffnet das Mobile-Sheet / toggled
-// die Rail) und einen Breadcrumb mit dem aktiven Screen. Höhe == Sidebar-
-// Header (h-12), damit Rail und Panel oben bündig sind.
-function ShellHeader({
-  schema,
-  user,
-  headerActions,
-}: {
-  readonly schema: AppSchema | FeatureSchema;
-  readonly user?: DefaultAppShellUser;
-  readonly headerActions?: ReactNode;
-}): ReactNode {
-  const nav = useNav();
-  const t = useTranslation();
-  const tree = useMemo(() => {
-    const source = buildNavRegistrySliceForApp(toAppSchema(schema));
-    return resolveNavigation({ source, ...(user !== undefined && { user }) });
-  }, [schema, user]);
-
-  const screenId = nav.route?.screenId;
-  const label = screenId !== undefined ? activeNavLabel(tree, screenId, (k) => t(k)) : undefined;
-
-  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 && (
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbPage>{label}</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        )}
-      </div>
-      {headerActions !== undefined && (
-        <div data-kumiko-layout="header-actions" className="ml-auto flex items-center gap-2 px-4">
-          {headerActions}
-        </div>
-      )}
-    </header>
-  );
-}
-
-function activeNavLabel(
-  nodes: readonly NavNode[],
-  screenId: string,
-  t: (key: string) => string,
-): string | undefined {
-  for (const node of nodes) {
-    if (node.screen !== undefined && lastSegment(node.screen) === screenId) {
-      return node.label.includes(".") ? t(node.label) : node.label;
-    }
-    const child = activeNavLabel(node.children, screenId, t);
-    if (child !== undefined) return child;
-  }
-  return undefined;
-}

package/src/layout/nav-tree.tsx

@@ -11,7 +11,12 @@
 // auf/zu. State lebt lokal im NavTree (useState); Default expanded
 // für alles, Caller kann später localStorage-Persistenz drüberlegen.
 
-import type { TargetRef, TreeAction, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
+import type {
+  AccessRule,
+  TargetRef,
+  TreeAction,
+  TreeNode,
+} from "@cosmicdrift/kumiko-framework/engine";
 import type { NavDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { NavNode, NavRegistrySlice } from "@cosmicdrift/kumiko-headless";
 import { resolveNavigation } from "@cosmicdrift/kumiko-headless";
@@ -33,22 +38,34 @@ import {
   ChevronRight,
   Coins,
   CreditCard,
+  Download,
   FileText,
   Folder,
+  FolderOpen,
   Gauge,
+  Hash,
   Home,
+  KeyRound,
   Layers,
   LayoutDashboard,
   LineChart,
+  Link,
   List,
+  Lock,
+  Mail,
+  Palette,
   PiggyBank,
   Plus,
   Receipt,
+  Rocket,
   Search,
+  Server,
   Settings,
+  Share2,
   Shield,
   Sparkles,
   Table,
+  Tag,
   TrendingUp,
   User,
   Users,
@@ -71,6 +88,7 @@ import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
+  SidebarInput,
   SidebarMenu,
   SidebarMenuAction,
   SidebarMenuButton,
@@ -108,6 +126,7 @@ const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   calendar: CalendarDays,
   file: FileText,
   folder: Folder,
+  "folder-open": FolderOpen,
   home: Home,
   bell: Bell,
   shield: Shield,
@@ -115,6 +134,17 @@ const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   users: Users,
   user: User,
   search: Search,
+  tag: Tag,
+  key: KeyRound,
+  link: Link,
+  palette: Palette,
+  share: Share2,
+  server: Server,
+  mail: Mail,
+  lock: Lock,
+  hash: Hash,
+  download: Download,
+  rocket: Rocket,
 };
 
 export type NavTreeProps = {
@@ -139,6 +169,22 @@ export type NavTreeProps = {
 const EMPTY_BADGES: ReadonlyMap<string, ReactNode> = new Map();
 const NavBadgesContext = createContext<ReadonlyMap<string, ReactNode>>(EMPTY_BADGES);
 
+// Sidebar-Filter: `q` leer = inaktiv (matches akzeptiert alles). `matches`
+// bekommt das ROHE Label (i18n-Key oder Klartext) und übersetzt intern — so
+// filtert das Suchfeld auf den sichtbaren Text, nicht den Key.
+type NavFilter = { readonly q: string; readonly matches: (rawLabel: string) => boolean };
+const NavFilterContext = createContext<NavFilter>({ q: "", matches: () => true });
+
+// Ein Knoten überlebt den Filter, wenn er selbst oder ein Nachfahre matcht.
+// Provider-Kinder sind zur Filterzeit schon materialisiert (Provider-Knoten
+// sind default-expanded → eager geladen), darum reicht die statische
+// children-Rekursion. ponytail: ein zur Filterzeit noch NICHT geladener
+// (user-zugeklappter) Provider wird über den force-expand in useNavNodeState
+// aufgeklappt, lädt und filtert dann mit.
+function subtreeMatches(node: NavNode, matches: (rawLabel: string) => boolean): boolean {
+  return matches(node.label) || node.children.some((c) => subtreeMatches(c, matches));
+}
+
 export function NavTree({
   schema,
   user,
@@ -165,25 +211,47 @@ export function NavTree({
     });
   }, []);
 
+  const t = useTranslation();
+  const [filter, setFilter] = useState("");
+  const q = filter.trim().toLowerCase();
+  const matches = useCallback(
+    (raw: string): boolean => {
+      const label = raw.includes(".") ? t(raw) : raw;
+      return label.toLowerCase().includes(q);
+    },
+    [t, q],
+  );
+  const navFilter = useMemo<NavFilter>(() => ({ q, matches }), [q, matches]);
+
   return (
-    <NavBadgesContext.Provider value={navBadges ?? EMPTY_BADGES}>
-      <div data-testid={testId} data-kumiko-layout="nav-tree" className="flex w-full flex-col">
-        {tree.map((node) =>
-          isPureSection(node) ? (
-            <NavSection
-              key={node.qualifiedName}
-              node={node}
-              collapsed={collapsed}
-              onToggle={onToggle}
+    <NavFilterContext.Provider value={navFilter}>
+      <NavBadgesContext.Provider value={navBadges ?? EMPTY_BADGES}>
+        <div data-testid={testId} data-kumiko-layout="nav-tree" className="flex w-full flex-col">
+          <div className="px-2 pt-2 pb-1">
+            <SidebarInput
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              placeholder={t("kumiko.nav.search")}
+              aria-label={t("kumiko.nav.search")}
             />
-          ) : (
-            <SidebarMenu key={node.qualifiedName} className="px-2 py-1">
-              <NavMenuNode node={node} collapsed={collapsed} onToggle={onToggle} />
-            </SidebarMenu>
-          ),
-        )}
-      </div>
-    </NavBadgesContext.Provider>
+          </div>
+          {tree.map((node) =>
+            isPureSection(node) ? (
+              <NavSection
+                key={node.qualifiedName}
+                node={node}
+                collapsed={collapsed}
+                onToggle={onToggle}
+              />
+            ) : (
+              <SidebarMenu key={node.qualifiedName} className="px-2 py-1">
+                <NavMenuNode node={node} collapsed={collapsed} onToggle={onToggle} />
+              </SidebarMenu>
+            ),
+          )}
+        </div>
+      </NavBadgesContext.Provider>
+    </NavFilterContext.Provider>
   );
 }
 
@@ -192,8 +260,14 @@ export function NavTree({
 // schiebt ihn ans rechte Ende; das truncate-Label gibt nach.
 // ponytail: nur an screen/target-Leaves verdrahtet, nicht an Container-
 // Knoten (die tragen den ml-auto-Chevron) — Tier-Badge ist ein Leaf.
+// Defense-in-depth (555/4): every current call site already guards on
+// node.screen/node.target !== undefined before rendering <NavBadge>, so this
+// early-return changes no current behavior — it's here so a future call
+// site added without that guard can't silently show a leaf's badge on an
+// unrelated container node that happens to share its last-segment.
 function NavBadge({ node }: { readonly node: NavNode }): ReactNode {
   const badges = useContext(NavBadgesContext);
+  if (node.screen === undefined && node.target === undefined) return null;
   const badge = badges.get(lastSegment(node.qualifiedName));
   if (badge === undefined) return null;
   return <span className="ml-auto shrink-0">{badge}</span>;
@@ -229,8 +303,17 @@ function useLabel(node: NavNode): string {
 
 // Icon-or-Dot: bekannter icon-Key → Lucide-Icon, sonst ein dezenter Dot.
 // Aktiv = accent-foreground, inaktiv = gedimmt.
-function NavLeadingIcon({ node, active }: { node: NavNode; active: boolean }): ReactNode {
-  const NavIcon = node.icon !== undefined ? NAV_ICONS[node.icon] : undefined;
+function NavLeadingIcon({
+  node,
+  active,
+  expanded = false,
+}: {
+  node: NavNode;
+  active: boolean;
+  expanded?: boolean;
+}): ReactNode {
+  const iconKey = expanded && node.icon === "folder" ? "folder-open" : node.icon;
+  const NavIcon = iconKey !== undefined ? NAV_ICONS[iconKey] : undefined;
   if (NavIcon !== undefined) return <NavIcon aria-hidden="true" className="shrink-0" />;
   return (
     <span
@@ -350,6 +433,7 @@ type NavNodeState = {
   readonly isExpanded: boolean;
   readonly active: boolean;
   readonly childNodes: readonly NavNode[];
+  readonly hidden: boolean;
   readonly providerLoading: boolean;
   readonly providerError: string | null;
   readonly workspaceId: string | undefined;
@@ -361,10 +445,14 @@ type NavNodeState = {
 // in den shadcn-Primitives, nicht in dieser Logik.
 function useNavNodeState(node: NavNode, collapsed: ReadonlySet<string>): NavNodeState {
   const nav = useNav();
+  const { q: filterQ, matches } = useContext(NavFilterContext);
+  const filterActive = filterQ !== "";
   const displayLabel = useLabel(node);
   const isCollapsed = collapsed.has(node.qualifiedName);
   const expandable = node.children.length > 0 || node.provider === true;
-  const isExpanded = expandable && !isCollapsed;
+  // Aktiver Filter klappt jeden Container auf, damit Treffer unter zugeklappten
+  // Ordnern sichtbar werden (und Provider-Kinder nachladen).
+  const isExpanded = expandable && (!isCollapsed || filterActive);
   const { nodes: providerChildren, error: providerError } = useNavProviderChildren(
     node.qualifiedName,
     node.provider === true && isExpanded,
@@ -377,13 +465,19 @@ function useNavNodeState(node: NavNode, collapsed: ReadonlySet<string>): NavNode
     node.screen !== undefined && nav.route?.screenId === lastSegment(node.screen);
   const targetActive = node.target !== undefined && targetsEqual(node.target, activeTarget);
   const childNodes = node.provider === true ? (providerChildren ?? []) : node.children;
+  const visibleChildNodes = filterActive
+    ? childNodes.filter((c) => subtreeMatches(c, matches))
+    : childNodes;
   return {
     displayLabel,
     isCollapsed,
     expandable,
     isExpanded,
     active: screenActive || targetActive,
-    childNodes,
+    childNodes: visibleChildNodes,
+    // Ein gefilterter Knoten verschwindet nur, wenn weder er selbst noch ein
+    // sichtbar gebliebenes Kind matcht — sonst bliebe ein leerer Ordner-Header.
+    hidden: filterActive && !matches(node.label) && visibleChildNodes.length === 0,
     providerLoading: node.provider === true && isExpanded && providerChildren === null,
     providerError,
     workspaceId: nav.route?.workspaceId,
@@ -472,6 +566,16 @@ function ProviderStatus({
 // gehört auf Items MIT children, nicht auf die Section selbst.
 function NavSection({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const displayLabel = useLabel(node);
+  const { q, matches } = useContext(NavFilterContext);
+  // Provider-Kinder (statisch leer bis geladen) halten die Section offen — ihr
+  // Match lässt sich hier nicht statisch prüfen; der Knoten selbst self-hidet.
+  if (
+    q !== "" &&
+    !matches(node.label) &&
+    !node.children.some((c) => c.provider === true || subtreeMatches(c, matches))
+  ) {
+    return null;
+  }
   return (
     <SidebarGroup className="py-1">
       <SidebarGroupLabel>{displayLabel}</SidebarGroupLabel>
@@ -502,6 +606,7 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const t = useTranslation();
   const dispatch = useDispatchTarget();
   const s = useNavNodeState(node, collapsed);
+  if (s.hidden) return null;
 
   const sub = s.isExpanded ? (
     <SidebarMenuSub>
@@ -519,11 +624,11 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
 
   const chevron = s.expandable ? (
     <SidebarMenuAction
-      aria-label={t(s.isCollapsed ? "kumiko.nav.expand" : "kumiko.nav.collapse")}
-      aria-expanded={!s.isCollapsed}
+      aria-label={t(s.isExpanded ? "kumiko.nav.collapse" : "kumiko.nav.expand")}
+      aria-expanded={s.isExpanded}
       onClick={() => onToggle(node.qualifiedName)}
     >
-      {s.isCollapsed ? <ChevronRight /> : <ChevronDown />}
+      {s.isExpanded ? <ChevronDown /> : <ChevronRight />}
     </SidebarMenuAction>
   ) : null;
 
@@ -575,15 +680,15 @@ function NavMenuNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
         onClick={() => {
           if (s.expandable) onToggle(node.qualifiedName);
         }}
-        {...(s.expandable && { "aria-expanded": !s.isCollapsed })}
+        {...(s.expandable && { "aria-expanded": s.isExpanded })}
       >
-        <NavLeadingIcon node={node} active={false} />
+        <NavLeadingIcon node={node} active={false} expanded={s.isExpanded} />
         <span className="truncate">{s.displayLabel}</span>
         {s.expandable &&
-          (s.isCollapsed ? (
-            <ChevronRight className="ml-auto" />
-          ) : (
+          (s.isExpanded ? (
             <ChevronDown className="ml-auto" />
+          ) : (
+            <ChevronRight className="ml-auto" />
           ))}
       </SidebarMenuButton>
       <NodeActions node={node} />
@@ -601,9 +706,14 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
   const t = useTranslation();
   const dispatch = useDispatchTarget();
   const s = useNavNodeState(node, collapsed);
+  if (s.hidden) return null;
 
+  // Kinder in ein eigenes SidebarMenuSub (<ul>) — ein Sub-Item ist ein <li>,
+  // verschachtelte <li> ohne <ul> dazwischen sind invalides HTML (nested
+  // Content-Ordner: Marketing/ > Block). Der <ul> trägt zugleich die
+  // Einrück-/Border-Stufe pro Tiefe.
   const deeper = s.isExpanded ? (
-    <>
+    <SidebarMenuSub>
       <ProviderStatus loading={s.providerLoading} error={s.providerError} />
       {s.childNodes.map((child) => (
         <NavSubNode
@@ -613,21 +723,21 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
           onToggle={onToggle}
         />
       ))}
-    </>
+    </SidebarMenuSub>
   ) : null;
 
   const chevron = s.expandable ? (
     <button
       type="button"
-      aria-label={t(s.isCollapsed ? "kumiko.nav.expand" : "kumiko.nav.collapse")}
-      aria-expanded={!s.isCollapsed}
+      aria-label={t(s.isExpanded ? "kumiko.nav.collapse" : "kumiko.nav.expand")}
+      aria-expanded={s.isExpanded}
       onClick={(e) => {
         e.stopPropagation();
         onToggle(node.qualifiedName);
       }}
       className="absolute top-1 right-1 flex size-5 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
     >
-      {s.isCollapsed ? <ChevronRight className="size-3.5" /> : <ChevronDown className="size-3.5" />}
+      {s.isExpanded ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
     </button>
   ) : null;
 
@@ -679,7 +789,7 @@ function NavSubNode({ node, collapsed, onToggle }: NavSubProps): ReactNode {
             if (s.expandable) onToggle(node.qualifiedName);
           }}
         >
-          <NavLeadingIcon node={node} active={false} />
+          <NavLeadingIcon node={node} active={false} expanded={s.isExpanded} />
           <span className="truncate">{s.displayLabel}</span>
         </button>
       </SidebarMenuSubButton>
@@ -711,14 +821,24 @@ export function buildNavRegistrySliceForApp(
   app: AppSchema,
   allowedNavQns?: ReadonlySet<string>,
 ): NavRegistrySlice {
+  const screenAccessByQn = buildScreenAccessMap(app);
   const qualified: NavDefinition[] = [];
   for (const feature of app.features) {
     for (const n of feature.navs ?? []) {
+      const screen =
+        n.screen !== undefined ? qualifyScreenId(feature.featureName, n.screen) : undefined;
+      // Nav entries without their own `access` inherit the referenced
+      // screen's access rule — otherwise a broader workspace/parent access
+      // lets a role see a nav entry whose target screen 403s them (#1099).
+      // An explicit `n.access` always wins; inheritance only fills the gap.
+      const inheritedAccess =
+        n.access ?? (screen !== undefined ? screenAccessByQn.get(screen) : undefined);
       qualified.push({
         ...n,
         id: qualifyNavId(feature.featureName, n.id),
         ...(n.parent !== undefined && { parent: qualifyNavId(feature.featureName, n.parent) }),
-        ...(n.screen !== undefined && { screen: qualifyScreenId(feature.featureName, n.screen) }),
+        ...(screen !== undefined && { screen }),
+        ...(inheritedAccess !== undefined && { access: inheritedAccess }),
       });
     }
   }
@@ -758,6 +878,16 @@ function qualifyScreenId(feature: string, id: string): string {
   return id.includes(":screen:") ? id : `${feature}:screen:${id}`;
 }
 
+function buildScreenAccessMap(app: AppSchema): Map<string, AccessRule | undefined> {
+  const map = new Map<string, AccessRule | undefined>();
+  for (const feature of app.features) {
+    for (const s of feature.screens) {
+      map.set(qualifyScreenId(feature.featureName, s.id), s.access);
+    }
+  }
+  return map;
+}
+
 // `lastSegment` lebt jetzt in @cosmicdrift/kumiko-renderer (./app/qn) — eine
 // Quelle, beide Pakete teilen sie.
 export { lastSegment };

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)) },
+  ];
+}