@cosmicdrift/kumiko-renderer-web 0.64.0 → 0.66.0

package/src/__tests__/workspace-shell.test.tsx

@@ -772,16 +772,15 @@ describe("WorkspaceShell — AppSchema (multi-feature)", () => {
 });
 
 // ---------------------------------------------------------------------------
-// navigation-Mode-Switch — Phase 0 Schicht 3 / V.1.
-// Workspace mit `navigation: "tree"` mountet den Visual-Tree-Stub statt
-// NavTree. Default (kein navigation oder navigation="nav") hält das
-// existing NavTree-Verhalten — kein Breaking-Change für Apps die Visual-
-// Tree nicht aktivieren. Echte Tree-Component kommt in V.1.1.
-// Siehe docs/plans/architecture/visual-tree.md A1.
+// EINE Nav (Visual-Tree-Merge). Der frühere navigation:"tree"/VisualTree-
+// Zweig ist gefaltet: WorkspaceShell rendert IMMER NavTree. Die
+// navigation-Property ist seitdem ein No-op (deferred removal aus
+// WorkspaceDefinition). Im Content-Bereich ersetzt ein aktives target
+// (aus den nav.searchParams) den RoutedScreen durch den EditorPanel.
 // ---------------------------------------------------------------------------
 
-describe("WorkspaceShell — navigation-Mode (Visual-Tree opt-in)", () => {
-  test('navigation: "tree" mountet den Visual-Tree-Stub statt NavTree', () => {
+describe("WorkspaceShell — EINE Nav (Visual-Tree gefaltet)", () => {
+  test('navigation: "tree" rendert NavTree (Tree-Stub ist gefaltet, kein Switch mehr)', () => {
     const schema = {
       featureName: "demo",
       entities: {},
@@ -803,48 +802,19 @@ describe("WorkspaceShell — navigation-Mode (Visual-Tree opt-in)", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-    // Stub-Marker rendert
-    expect(screen.getByLabelText("Visual Tree (no providers)")).toBeTruthy();
-    // NavTree wäre durch das nav-Item "List" sichtbar — darf hier NICHT
-    // rendern (Tree-Mode ersetzt NavTree komplett)
-    expect(screen.queryByText("List")).toBeNull();
-  });
-
-  test('navigation: "nav" mountet NavTree (default-äquivalent)', () => {
-    const schema = {
-      featureName: "demo",
-      entities: {},
-      screens: [],
-      navs: [{ id: "list", label: "List" }],
-      workspaces: [
-        ws("admin", {
-          label: "Admin",
-          openToAll: true,
-          isDefault: true,
-          navigation: "nav",
-          navMembers: ["demo:nav:list"],
-        }),
-      ],
-    } as const;
-
-    renderShell(
-      <WorkspaceShell brand={<div>Brand</div>} schema={schema} user={{ id: "u1", roles: [] }}>
-        <div>content</div>
-      </WorkspaceShell>,
-    );
+    // NavTree rendert das nav-Item — auch bei navigation:"tree" (No-op).
     expect(screen.getByText("List")).toBeTruthy();
+    // Der alte VisualTree-Stub existiert nicht mehr.
     expect(screen.queryByLabelText("Visual Tree (no providers)")).toBeNull();
   });
 
-  test("workspace ohne navigation-Property defaultet zu NavTree (Backwards-Compat)", () => {
+  test("workspace ohne navigation-Property rendert NavTree (Backwards-Compat)", () => {
     const schema = {
       featureName: "demo",
       entities: {},
       screens: [],
       navs: [{ id: "list", label: "List" }],
       workspaces: [
-        // Keine `navigation`-Property → existing Apps müssen exakt so
-        // weiter laufen wie vor V.1
         ws("admin", {
           label: "Admin",
           openToAll: true,
@@ -860,14 +830,15 @@ describe("WorkspaceShell — navigation-Mode (Visual-Tree opt-in)", () => {
       </WorkspaceShell>,
     );
     expect(screen.getByText("List")).toBeTruthy();
-    expect(screen.queryByLabelText("Visual Tree (no providers)")).toBeNull();
   });
 
-  test("Switcher-Toggle re-rendert Sidebar zwischen NavTree und Stub", () => {
-    // Multi-Workspace-Setup: beide accessible, einer nav, einer tree.
-    // Single-mount-Tests können nicht beweisen dass der conditional
-    // render bei prop-change sauber re-rendert — das ist die echte UX
-    // (User klickt im Switcher zwischen Modi). Dieser Test pinnt das.
+  test("aktives target in der URL rendert EditorPanel statt der screen-children", () => {
+    // Klick auf einen target-Knoten persistiert das target in den
+    // searchParams (?t=feat:action&a_*=...). WorkspaceShell rendert dann
+    // den EditorPanel statt des RoutedScreen. Voller workspace+screen-Pfad,
+    // damit der default-fill-Effect nicht replaced (sonst Verlust der
+    // searchParams). Kein Resolver registriert → EditorPanel-Fallback.
+    window.history.replaceState(null, "", "/admin/x?t=demo:edit&a_id=1");
     const schema = {
       featureName: "demo",
       entities: {},
@@ -878,14 +849,8 @@ describe("WorkspaceShell — navigation-Mode (Visual-Tree opt-in)", () => {
           label: "Admin",
           openToAll: true,
           isDefault: true,
-          navigation: "nav",
           navMembers: ["demo:nav:list"],
         }),
-        ws("visual", {
-          label: "Visual",
-          openToAll: true,
-          navigation: "tree",
-        }),
       ],
     } as const;
 
@@ -894,19 +859,9 @@ describe("WorkspaceShell — navigation-Mode (Visual-Tree opt-in)", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-
-    // Initial: admin-Workspace (default) aktiv → NavTree sichtbar, kein Stub
-    expect(screen.getByText("List")).toBeTruthy();
-    expect(screen.queryByLabelText("Visual Tree (no providers)")).toBeNull();
-
-    // Switch zu visual-Workspace via Switcher-Click
-    fireEvent.click(screen.getByTestId("workspace-tab-visual"));
-    expect(screen.getByLabelText("Visual Tree (no providers)")).toBeTruthy();
-    expect(screen.queryByText("List")).toBeNull();
-
-    // Zurück zu admin → NavTree wieder, Stub weg
-    fireEvent.click(screen.getByTestId("workspace-tab-admin"));
-    expect(screen.getByText("List")).toBeTruthy();
-    expect(screen.queryByLabelText("Visual Tree (no providers)")).toBeNull();
+    // EditorPanel-Fallback (kein Resolver für demo:edit) — beweist target→Editor.
+    expect(screen.getByRole("heading", { name: "Editor" })).toBeTruthy();
+    // Die screen-children sind ersetzt, nicht zusätzlich gerendert.
+    expect(screen.queryByText("content")).toBeNull();
   });
 });

package/src/app/__tests__/qualify-nav-provider-key.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, test } from "bun:test";
+import { qualifyNavId } from "@cosmicdrift/kumiko-renderer";
+import { qualifyNavProviderKey } from "../create-app";
+
+// Die Cross-Feature-Brücke des Tree→Nav-Merges: ein bundled-feature-Client
+// liefert seinen navProvider, die App besitzt den r.nav-Knoten. Findet der
+// NavTree-Knoten (Schema-QN) seinen Provider nicht, bricht der ganze
+// publicstatus-Pfad still post-release — daher hier gepinnt.
+
+describe("qualifyNavProviderKey", () => {
+  test("lokale id wird mit Feature-Namen qualifiziert (self-keyed)", () => {
+    expect(qualifyNavProviderKey("cms", "content")).toBe("cms:nav:content");
+  });
+
+  test("bereits qualifizierte QN geht unverändert durch (App registriert Nav für bundled-feature)", () => {
+    // text-content-Client bekommt navId = die publicstatus-QN. Darf NICHT zu
+    // "text-content:nav:publicstatus:nav:content" doppelt-qualifiziert werden.
+    expect(qualifyNavProviderKey("text-content", "publicstatus:nav:content")).toBe(
+      "publicstatus:nav:content",
+    );
+  });
+
+  test("self-keyed Fall ist konsistent mit qualifyNavId (Schema-Seite)", () => {
+    // Beide Seiten müssen denselben QN erzeugen, sonst kein Match.
+    expect(qualifyNavProviderKey("demo", "list")).toBe(qualifyNavId("demo", "list"));
+  });
+});

package/src/app/client-plugin.tsx

@@ -9,11 +9,7 @@
 // ganz außen gestackt, dann alle Gates nach innen. So hat jeder Gate
 // Zugriff auf jeden Provider, egal welches Feature ihn gebracht hat.
 
-import type {
-  TargetRef,
-  TreeActionDef,
-  TreeChildrenSubscribe,
-} from "@cosmicdrift/kumiko-framework/engine";
+import type { TargetRef, TreeChildrenSubscribe } from "@cosmicdrift/kumiko-framework/engine";
 import type {
   ColumnRendererComponent,
   ExtensionSectionComponent,
@@ -61,28 +57,17 @@ export type ClientFeatureDefinition = {
    *  `{ entityName, entityId }`. Pattern wie columnRenderers — Last-Wins
    *  bei Key-Kollision über mehrere Features. */
   readonly extensionSectionComponents?: Readonly<Record<string, ExtensionSectionComponent>>;
-  /** Tree-Provider für `r.workspace({ navigation: "tree" })`-Workspaces
-   *  (Visual-Tree). Wird beim Mount des Tree-Workspaces mit ctx aufgerufen,
-   *  emittiert TreeNode[] die in der Sidebar gerendert werden. Closure-
-   *  Distribution gleicher Mechanismus wie `columnRenderers` — Server-
-   *  Registry kennt nur „dass es das gibt", echte Function lebt
-   *  client-side. Spiegelt das server-side `r.tree(provider)` aus dem
-   *  Feature; bundled-features liefern beide Seiten konsistent.
-   *  Siehe visual-tree.md V.1.1-Distribution. */
-  readonly treeProvider?: TreeChildrenSubscribe;
-  /** Tree-Actions-Schema — die Action-Map die `buildTarget` compile-time
-   *  validiert. Erased-Runtime-Surface; typed Handle wandert separat
-   *  via Server-Feature setup-export (FeatureDefinition.exports.handle).
-   *  Identisch zur server-side `r.treeActions(...)`-Map; bundled-
-   *  features liefern beide Seiten konsistent. */
-  readonly treeActions?: Readonly<Record<string, TreeActionDef>>;
-
-  /** V.1.5b SSE-Tree-Refresh: Liste der Entity-Namen die der Provider
-   *  abdeckt. Bei Live-Events für eine dieser Entities (created/updated/
-   *  deleted/restored) wird der Provider neu aufgerufen → Tree refresht.
-   *  Optional + leer/undefined → kein SSE-Refresh (static Provider, z.B.
-   *  legal-pages). Beispiel text-content: `["text-block"]`. */
-  readonly treeEntities?: readonly string[];
+  /** Nav-Provider für die EINE Nav (Visual-Tree-Merge): hängt dynamische
+   *  Children an einen statischen `r.nav({ provider: true })`-Knoten. Keyed
+   *  auf die LOKALE nav-id (create-app qualifiziert zu `<feature>:nav:<id>`;
+   *  bereits qualifizierte QNs gehen durch). Anders als `treeProvider` (ein
+   *  Top-Level-Branch pro Feature) attacht ein navProvider an einen konkreten
+   *  Nav-Knoten — der idiomatic Weg seit dem Tree→Nav-Merge. */
+  readonly navProviders?: Readonly<Record<string, TreeChildrenSubscribe>>;
+  /** SSE-Entity-Listen pro nav-id für den Live-Refresh der navProviders
+   *  (analog `treeEntities`). Live-Event für eine Entity → Provider des
+   *  Knotens wird neu aufgerufen → neue Kinder erscheinen live. */
+  readonly navEntities?: Readonly<Record<string, readonly string[]>>;
 
   /** Editor-Resolver-Komponenten pro featureId:action-Key. Wenn ein
    *  TreeNode mit target angeklickt wird, schlägt der EditorPanel das

package/src/app/create-app.tsx

@@ -39,8 +39,18 @@ import { UpdateChecker } from "../version/update-checker";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
 import { useBrowserNavApi } from "./nav";
+import { NavProvidersProvider } from "./nav-providers-context";
 import { type ResolverComponent, ResolversProvider } from "./resolvers-context";
-import { TreeProvidersProvider } from "./tree-providers-context";
+
+// Qualifiziert den Key eines navProviders auf seine Nav-QN. Lokale ids
+// (z.B. "content") werden wie in r.nav mit dem Feature-Namen qualifiziert;
+// bereits qualifizierte QNs (App registriert die Nav für ein bundled-feature
+// und gibt die QN als navId rein, z.B. "publicstatus:nav:content") gehen
+// unverändert durch. MUSS konsistent zu qualifyNavId bleiben, sonst findet
+// der NavTree-Knoten (Schema-Seite) seinen Provider nicht.
+export function qualifyNavProviderKey(feature: string, id: string): string {
+  return id.includes(":nav:") ? id : `${feature}:nav:${id}`;
+}
 
 // Web-Bootstrap. Mounted den ganzen Kumiko-Render-Stack im Browser:
 // Tokens (class-based light/dark via <html>), Primitives (HTML),
@@ -214,24 +224,26 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
     }
   }
 
-  // Tree-Provider-Map aggregieren — keyed by clientFeature.name (matches
-  // server-side FeatureDefinition.name). Mehrere clientFeatures mit
-  // gleichem name + treeProvider sind ein Author-Bug (würde stillschweigend
-  // den Provider eines Features durch den eines anderen überschreiben);
-  // wir warnen einmal pro Kollision. Visual-Tree.md V.1.1-Distribution.
-  const treeProviders = new Map<string, TreeChildrenSubscribe>();
-  const treeEntities = new Map<string, readonly string[]>();
+  // Nav-Provider-Map: ein navProvider hängt dynamische Children an einen
+  // konkreten r.nav({provider:true})-Knoten (per QN). Lokale nav-ids werden
+  // wie in r.nav mit dem Feature-Namen qualifiziert; bereits qualifizierte
+  // QNs (cross-feature, z.B. App registriert Nav für ein bundled-feature)
+  // gehen unverändert durch.
+  const navProviders = new Map<string, TreeChildrenSubscribe>();
+  const navEntities = new Map<string, readonly string[]>();
   for (const f of clientFeatures) {
-    if (f.treeProvider === undefined) continue;
-    if (treeProviders.has(f.name)) {
-      // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
-      console.warn(
-        `[kumiko] treeProvider for "${f.name}" defined by multiple clientFeatures — last definition wins.`,
-      );
+    for (const [navId, provider] of Object.entries(f.navProviders ?? {})) {
+      const qn = qualifyNavProviderKey(f.name, navId);
+      if (navProviders.has(qn)) {
+        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
+        console.warn(
+          `[kumiko] navProvider for "${qn}" defined by multiple clientFeatures — last wins.`,
+        );
+      }
+      navProviders.set(qn, provider);
     }
-    treeProviders.set(f.name, f.treeProvider);
-    if (f.treeEntities !== undefined && f.treeEntities.length > 0) {
-      treeEntities.set(f.name, f.treeEntities);
+    for (const [navId, entities] of Object.entries(f.navEntities ?? {})) {
+      if (entities.length > 0) navEntities.set(qualifyNavProviderKey(f.name, navId), entities);
     }
   }
 
@@ -276,14 +288,14 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
               <CustomScreensProvider value={customScreens}>
                 <ColumnRenderersProvider value={columnRenderers}>
                   <ExtensionSectionsProvider value={extensionSectionComponents}>
-                    <TreeProvidersProvider value={treeProviders} entities={treeEntities}>
+                    <NavProvidersProvider value={navProviders} entities={navEntities}>
                       <ResolversProvider resolvers={resolvers}>
                         <ToastProvider>
                           <UpdateChecker />
                           {stackWrappers(providers, stackWrappers(gates, screenNode))}
                         </ToastProvider>
                       </ResolversProvider>
-                    </TreeProvidersProvider>
+                    </NavProvidersProvider>
                   </ExtensionSectionsProvider>
                 </ColumnRenderersProvider>
               </CustomScreensProvider>

package/src/app/nav-providers-context.tsx

@@ -0,0 +1,56 @@
+// NavProvidersContext — client-side Provider-Map für die EINE Nav. Anders
+// als der alte TreeProvidersContext (keyed auf featureName, ein Top-Level-
+// Branch pro Feature) sind diese Provider auf eine **Nav-QN** geschlüsselt:
+// ein statischer r.nav-Knoten mit `provider: true` bekommt seine Children
+// zur Laufzeit aus dem hier registrierten TreeChildrenSubscribe. So hängt
+// sich ein Feature lazy an einen konkreten Nav-Knoten (z.B. "Content") statt
+// einen eigenen Tree-Branch aufzumachen.
+//
+// `entities` (parallel-Context) ist die SSE-Entity-Liste pro Provider-QN:
+// NavTree abonniert sie via useLiveEvents und re-fired den Provider bei
+// Entity-Events — dadurch erscheinen neu erstellte Knoten live in der Nav.
+//
+// Default = leere Maps (Apps ohne dynamische Nav-Provider rendern nur die
+// statischen r.nav-Knoten). Aggregiert wird in create-app aus den
+// clientFeatures.
+
+import type { TreeChildrenSubscribe } from "@cosmicdrift/kumiko-framework/engine";
+import { createContext, type ReactNode, useContext } from "react";
+
+const EMPTY_PROVIDERS: ReadonlyMap<string, TreeChildrenSubscribe> = new Map();
+const EMPTY_ENTITIES: ReadonlyMap<string, readonly string[]> = new Map();
+
+const NavProvidersContext =
+  createContext<ReadonlyMap<string, TreeChildrenSubscribe>>(EMPTY_PROVIDERS);
+const NavEntitiesContext = createContext<ReadonlyMap<string, readonly string[]>>(EMPTY_ENTITIES);
+
+export type NavProvidersProviderProps = {
+  readonly value: ReadonlyMap<string, TreeChildrenSubscribe>;
+  readonly entities?: ReadonlyMap<string, readonly string[]>;
+  readonly children: ReactNode;
+};
+
+export function NavProvidersProvider({
+  value,
+  entities,
+  children,
+}: NavProvidersProviderProps): ReactNode {
+  return (
+    <NavProvidersContext.Provider value={value}>
+      <NavEntitiesContext.Provider value={entities ?? EMPTY_ENTITIES}>
+        {children}
+      </NavEntitiesContext.Provider>
+    </NavProvidersContext.Provider>
+  );
+}
+
+/** Provider-Map keyed auf Nav-QN. Empty-Map-Default → kein Crash ohne
+ *  registrierte Provider. */
+export function useNavProviders(): ReadonlyMap<string, TreeChildrenSubscribe> {
+  return useContext(NavProvidersContext);
+}
+
+/** SSE-Entity-Liste pro Provider-QN für Live-Refresh. Empty-Map-Default. */
+export function useNavEntities(): ReadonlyMap<string, readonly string[]> {
+  return useContext(NavEntitiesContext);
+}

package/src/index.ts

@@ -91,12 +91,15 @@ export type { CreatePublicSurfaceOptions, PublicRoute } from "./app/create-publi
 export { createPublicSurface } from "./app/create-public-surface";
 export type { KumikoLinkProps } from "./app/nav";
 export { KumikoLink, useBrowserNavApi } from "./app/nav";
+export { useResolvers } from "./app/resolvers-context";
 export type { AppLayoutProps } from "./layout/app-layout";
 export { AppLayout } from "./layout/app-layout";
 export type { AvatarProps, AvatarSize } from "./layout/avatar";
 export { Avatar } from "./layout/avatar";
 export type { DefaultAppShellProps } from "./layout/default-app-shell";
 export { DefaultAppShell } from "./layout/default-app-shell";
+export type { EditorPanelProps, ResolverComponent } from "./layout/editor-panel";
+export { EditorPanel } from "./layout/editor-panel";
 export type { LanguageSwitcherProps, LocaleOption } from "./layout/language-switcher";
 export { LanguageSwitcher } from "./layout/language-switcher";
 export type { NavTreeProps } from "./layout/nav-tree";
@@ -105,6 +108,11 @@ export type { ProfileMenuItem, ProfileMenuProps } from "./layout/profile-menu";
 export { ProfileMenu } from "./layout/profile-menu";
 export type { SidebarProps } from "./layout/sidebar";
 export { Sidebar } from "./layout/sidebar";
+export type { SidebarBrandProps } from "./layout/sidebar-brand";
+export { SidebarBrand } from "./layout/sidebar-brand";
+export type { SidebarUserProps } from "./layout/sidebar-user";
+export { SidebarUser } from "./layout/sidebar-user";
+export { parseTargetFromSearchParams } from "./layout/target-url";
 export type { ThemeToggleProps } from "./layout/theme-toggle";
 export { ThemeToggle } from "./layout/theme-toggle";
 export type { TopbarProps } from "./layout/topbar";

package/src/layout/app-layout.tsx

@@ -42,13 +42,20 @@ export function AppLayout({
       data-kumiko-layout="app"
       {...(fill === true && { "data-kumiko-fill": "true" })}
       className={cn(
-        "flex flex-row bg-background text-foreground",
+        // new-york inset-Frame: gedämpfter Rail-Background, die Sidebar sitzt
+        // transparent darauf, der Main-Bereich schwebt als eigenes Panel.
+        "flex flex-row bg-muted/40 text-foreground",
         fill === true ? "h-screen" : "min-h-screen",
         className,
       )}
     >
       {sidebar}
-      <div className={cn("flex flex-1 min-w-0 flex-col", fill === true && "min-h-0")}>
+      <div
+        className={cn(
+          "flex flex-1 min-w-0 flex-col overflow-hidden rounded-xl border bg-background shadow-sm m-2 md:ml-0",
+          fill === true && "min-h-0",
+        )}
+      >
         {topbar}
         {/* main hat KEIN Padding — Screens (Form, Liste, Demo-Pages)
              managen ihr Padding selber, damit Action-Bars edge-to-edge

package/src/layout/default-app-shell.tsx

@@ -1,23 +1,36 @@
-// DefaultAppShell — Linear-Pattern: kein globaler Topbar, Sidebar
-// nimmt full-height und trägt die ganze Chrome-Identität. 90% der
-// Apps brauchen exakt das hier.
+// DefaultAppShell — die 90%-App-Shell auf Basis der vendored shadcn-Sidebar
+// (src/ui/sidebar.tsx). SidebarProvider stellt den Context (Mobile-Sheet,
+// Rail, Cmd-B), die Sidebar trägt die Chrome-Identität, SidebarInset rendert
+// den schwebenden Content-Panel mit einem Header (Trigger + Breadcrumb).
 //
 // Sidebar-Slots:
-//   1. brand          — Workspace-Identity oben (z.B. Logo + Name)
-//   2. sidebarActions — Icon-Row mit Search/Theme/Tenant-Switch etc.
+//   1. brand          — Workspace-Identity oben (Logo + Name)
+//   2. sidebarActions — Icon-Row (Search/Theme/Tenant-Switch)
 //   3. NavTree        — automatisch aus dem Schema
 //   4. sidebarFooter  — Bottom-Slot für Profile/Help/Plan-Banner
 //
-// Apps die feingranulare Kontrolle wollen, gehen direkt auf
-// <AppLayout>/<Sidebar>/<NavTree>. Wer ein Topbar zurück will (z.B.
-// für Multi-Workspace mit Switcher in der Topbar), nutzt
-// <WorkspaceShell> oder baut den Shell selber.
+// 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 type { ReactNode } from "react";
-import { AppLayout } from "./app-layout";
-import { NavTree } from "./nav-tree";
-import { Sidebar } from "./sidebar";
+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 {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarInset,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "../ui/sidebar";
+import { buildNavRegistrySliceForApp, lastSegment, NavTree } from "./nav-tree";
 
 export type DefaultAppShellUser = {
   readonly id: string;
@@ -25,8 +38,8 @@ export type DefaultAppShellUser = {
 };
 
 export type DefaultAppShellProps = {
-  /** Header-Slot oben in der Sidebar — Workspace-Identity (Logo,
-   *  Name, Plan-Tag). Caller liefert frei. */
+  /** Header-Slot oben in der Sidebar — Workspace-Identity (Logo, Name,
+   *  Plan-Tag). Caller liefert frei. */
   readonly brand: ReactNode;
   /** Schema (AppSchema oder legacy FeatureSchema) wird an NavTree
    *  durchgereicht; Sidebar-Einträge bauen sich automatisch aus
@@ -35,20 +48,18 @@ export type DefaultAppShellProps = {
   /** Current user — drives nav role-gating. Ohne user-prop werden
    *  role-gated nav-einträge (`access: { roles: [...] }`) komplett
    *  ausgeblendet (resolveNavigation behandelt undefined-user als
-   *  anonymous). Symmetrisch zu WorkspaceShell.user. */
+   *  anonymous). */
   readonly user?: DefaultAppShellUser;
   /** Icon-Row zwischen Brand und NavTree — typisch Search-Trigger,
-   *  ThemeToggle, TenantSwitcher. Linear hat hier ~3 Icons in einer
-   *  horizontalen Reihe. */
+   *  ThemeToggle, TenantSwitcher. */
   readonly sidebarActions?: ReactNode;
   /** Footer-Slot unten in der Sidebar — Profile-Row, Help-Link,
-   *  Plan-Banner. Klebt am unteren Rand via `mt-auto`. */
+   *  Plan-Banner. */
   readonly sidebarFooter?: ReactNode;
-  /** Viewport-fit Shell — durchgereicht an AppLayout. true → fixe
-   *  Viewport-Höhe, Content scrollt innen statt der ganzen Seite.
-   *  Default false (klassischer Seiten-Scroll). Siehe AppLayout.fill. */
+  /** Viewport-fit Shell. true → fixe Viewport-Höhe (`h-svh`), der Content
+   *  scrollt INNEN statt der ganzen Seite. Default false (Seiten-Scroll). */
   readonly fill?: boolean;
-  /** Screen-Content der in `main` gerendert wird. */
+  /** Screen-Content der im SidebarInset gerendert wird. */
   readonly children: ReactNode;
 };
 
@@ -62,15 +73,87 @@ export function DefaultAppShell({
   children,
 }: DefaultAppShellProps): ReactNode {
   return (
-    <AppLayout
-      fill={fill}
-      sidebar={
-        <Sidebar header={brand} actions={sidebarActions} footer={sidebarFooter}>
-          <NavTree schema={schema} user={user} />
-        </Sidebar>
-      }
-    >
-      {children}
-    </AppLayout>
+    <SidebarProvider {...(fill === true && { className: "h-svh" })}>
+      {/* sidebar-07-Muster: Standard-Variante (border-r, flush content) +
+          collapsible="icon" — der Rail klappt auf Icon-Breite zu (Trigger/Rail). */}
+      <Sidebar collapsible="icon">
+        <SidebarHeader data-kumiko-layout="sidebar-header">{brand}</SidebarHeader>
+        {sidebarActions !== undefined && (
+          <SidebarGroup
+            data-kumiko-layout="sidebar-actions"
+            className="flex-row items-center gap-1 py-0"
+          >
+            {sidebarActions}
+          </SidebarGroup>
+        )}
+        <SidebarContent data-kumiko-layout="sidebar-nav">
+          <NavTree schema={schema} {...(user !== undefined && { user })} />
+        </SidebarContent>
+        {sidebarFooter !== undefined && (
+          <SidebarFooter data-kumiko-layout="sidebar-footer">{sidebarFooter}</SidebarFooter>
+        )}
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset className={fill === true ? "min-h-0" : undefined}>
+        <ShellHeader schema={schema} {...(user !== undefined && { user })} />
+        <main className={fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto"}>
+          {children}
+        </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,
+}: {
+  readonly schema: AppSchema | FeatureSchema;
+  readonly user?: DefaultAppShellUser;
+}): 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>
+    </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;
+}