@cosmicdrift/kumiko-renderer-web 0.115.1 → 0.116.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.115.1",
+  "version": "0.116.1",
   "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.115.1",
-    "@cosmicdrift/kumiko-headless": "0.115.1",
-    "@cosmicdrift/kumiko-renderer": "0.115.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.116.1",
+    "@cosmicdrift/kumiko-headless": "0.116.1",
+    "@cosmicdrift/kumiko-renderer": "0.116.1",
     "@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__/workspace-shell.test.tsx

@@ -329,10 +329,11 @@ describe("WorkspaceShell", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-    // admin → system + orders, NOT tours
-    expect(screen.getByText("System")).toBeTruthy();
-    expect(screen.getByText("Orders")).toBeTruthy();
-    expect(screen.queryByText("Tours")).toBeNull();
+    // admin → system + orders, NOT tours. getAllByText: die shadcn-Sidebar
+    // rendert Desktop + Mobile-Sheet, jeder Nav-Eintrag kommt also 2× vor.
+    expect(screen.getAllByText("System").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Orders").length).toBeGreaterThan(0);
+    expect(screen.queryAllByText("Tours").length).toBe(0);
   });
 
   test("clicking the dispatch tab swaps the visible nav set", () => {
@@ -346,10 +347,10 @@ describe("WorkspaceShell", () => {
       </WorkspaceShell>,
     );
     fireEvent.click(screen.getByTestId("workspace-tab-dispatch"));
-    // dispatch → orders + tours, NOT system
-    expect(screen.getByText("Orders")).toBeTruthy();
-    expect(screen.getByText("Tours")).toBeTruthy();
-    expect(screen.queryByText("System")).toBeNull();
+    // dispatch → orders + tours, NOT system (getAllByText: Desktop + Mobile-Sheet)
+    expect(screen.getAllByText("Orders").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Tours").length).toBeGreaterThan(0);
+    expect(screen.queryAllByText("System").length).toBe(0);
   });
 
   test("a driver lands on the driver workspace (their only one)", () => {
@@ -365,9 +366,9 @@ describe("WorkspaceShell", () => {
     // Only one workspace → switcher renders nothing, but the nav still
     // shows that workspace's members.
     expect(screen.queryByTestId("workspace-tab-driver")).toBeNull();
-    expect(screen.getByText("Tours")).toBeTruthy();
-    expect(screen.queryByText("System")).toBeNull();
-    expect(screen.queryByText("Orders")).toBeNull();
+    expect(screen.getAllByText("Tours").length).toBeGreaterThan(0);
+    expect(screen.queryAllByText("System").length).toBe(0);
+    expect(screen.queryAllByText("Orders").length).toBe(0);
   });
 
   test("schema without workspaces falls back to plain rendering (all navs visible)", () => {
@@ -710,8 +711,9 @@ describe("WorkspaceShell — AppSchema (multi-feature)", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-    expect(screen.getByTestId("sidebar-footer")).toBeTruthy();
-    expect(screen.getByTestId("sidebar-footer").textContent).toBe("v1.2.3");
+    const footers = screen.getAllByTestId("sidebar-footer");
+    expect(footers.length).toBeGreaterThan(0);
+    expect(footers[0]?.textContent).toBe("v1.2.3");
   });
 
   test("ohne sidebarFooter-Prop rendert die Sidebar ohne Footer-Slot (default)", () => {

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

@@ -14,13 +14,8 @@
 // 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 { ReactNode } from "react";
 import {
   Sidebar,
   SidebarContent,
@@ -30,9 +25,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;
@@ -123,64 +118,3 @@ export function DefaultAppShell({
     </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/shell-header.tsx

@@ -0,0 +1,78 @@
+// ShellHeader — die Inset-Kopfzeile für Sidebar-basierte Shells: SidebarTrigger
+// (Rail-/Mobile-Sheet-Toggle) + Breadcrumb mit dem aktiven Screen + optionale
+// rechtsbündige headerActions. Geteilt von DefaultAppShell und WorkspaceShell,
+// damit beide dieselbe Kopfzeile tragen (Höhe h-16, kollabiert auf h-12 mit
+// der Icon-Rail).
+
+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 { SidebarTrigger } from "../ui/sidebar";
+import { buildNavRegistrySliceForApp, lastSegment } from "./nav-tree";
+
+type ShellHeaderUser = {
+  readonly id: string;
+  readonly roles: readonly string[];
+};
+
+export function ShellHeader({
+  schema,
+  user,
+  headerActions,
+}: {
+  readonly schema: AppSchema | FeatureSchema;
+  readonly user?: ShellHeaderUser;
+  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/workspace-shell.tsx

@@ -34,13 +34,19 @@ import type { AppSchema, FeatureSchema, WorkspaceSchema } from "@cosmicdrift/kum
 import { qualifyNavId, toAppSchema, useNav } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useLayoutEffect, useMemo } from "react";
 import { useResolvers } from "../app/resolvers-context";
-import { SidebarProvider } from "../ui/sidebar";
-import { AppLayout } from "./app-layout";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarProvider,
+  SidebarRail,
+} from "../ui/sidebar";
 import { EditorPanel } from "./editor-panel";
 import { lastSegment, NavTree } from "./nav-tree";
-import { Sidebar } from "./sidebar";
+import { ShellHeader } from "./shell-header";
 import { parseTargetFromSearchParams } from "./target-url";
-import { Topbar } from "./topbar";
 import { WorkspaceSwitcher } from "./workspace-switcher";
 
 export type WorkspaceShellUser = {
@@ -204,21 +210,34 @@ export function WorkspaceShell({
     />
   );
 
-  // SidebarProvider: NavTree rendert vendored shadcn-SidebarMenuButtons, die
-  // useSidebar() rufen. WorkspaceShell behält sein eigenes Topbar-Layout
-  // (AppLayout + Sidebar), braucht aber den Context-Wrapper drumherum.
+  // Modern shell (wie DefaultAppShell): collapsible Icon-Rail-Sidebar trägt
+  // Brand + Workspace-Switcher + Nav + Footer; der SidebarInset rendert die
+  // geteilte ShellHeader (Panel-Toggle + Breadcrumb + Actions) über dem
+  // Content. topbarActions landen rechts in der Header-Zeile statt in einer
+  // separaten Topbar — eine Kopfzeile statt zwei.
   return (
     <SidebarProvider>
-      <AppLayout
-        topbar={<Topbar start={brand} center={switcher || undefined} end={topbarActions} />}
-        sidebar={
-          <Sidebar {...(sidebarFooter !== undefined && { footer: sidebarFooter })}>
-            {sidebarContent}
-          </Sidebar>
-        }
-      >
-        {activeTarget !== undefined ? <EditorPanel resolvers={resolvers} /> : children}
-      </AppLayout>
+      <Sidebar collapsible="icon">
+        <SidebarHeader data-kumiko-layout="sidebar-header">
+          {brand}
+          {switcher}
+        </SidebarHeader>
+        <SidebarContent data-kumiko-layout="sidebar-nav">{sidebarContent}</SidebarContent>
+        {sidebarFooter !== undefined && (
+          <SidebarFooter data-kumiko-layout="sidebar-footer">{sidebarFooter}</SidebarFooter>
+        )}
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <ShellHeader
+          schema={app}
+          {...(user !== undefined && { user })}
+          {...(topbarActions !== undefined && { headerActions: topbarActions })}
+        />
+        <main className="flex-1 overflow-auto">
+          {activeTarget !== undefined ? <EditorPanel resolvers={resolvers} /> : children}
+        </main>
+      </SidebarInset>
     </SidebarProvider>
   );
 }

package/src/primitives/index.tsx

@@ -1370,7 +1370,9 @@ function DefaultForm({
   // OHNE Trennlinie darunter (Titel fließt in die erste Section). Sections
   // sind divide-y-getrennt (Linien nur ZWISCHEN ihnen). Action-Footer mit
   // bg-muted/30 als Farb-Trenner statt harter Linie. main hat kein Padding;
-  // der max-w-3xl-Body rahmt die Card.
+  // der max-w-3xl-Body rahmt die Card, mx-auto zentriert ihn im Main statt
+  // linksbündig (sonst „eingesperrt" mit leerer rechter Hälfte auf breiten
+  // Screens).
   return (
     <form
       onSubmit={(e) => {
@@ -1380,7 +1382,7 @@ function DefaultForm({
       data-testid={testId}
       className="flex flex-col w-full"
     >
-      <div className="px-6 pt-6 pb-12 max-w-3xl w-full">
+      <div className="px-6 pt-6 pb-12 max-w-3xl w-full mx-auto">
         <div className={cn(cardSurface(), "overflow-hidden")}>
           {(title !== undefined || subtitle !== undefined) && (
             <div className="px-6 pb-2 pt-5">