@cosmicdrift/kumiko-renderer-web 0.50.0 → 0.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.50.0",
+  "version": "0.51.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.45.0",
-    "@cosmicdrift/kumiko-headless": "0.45.0",
-    "@cosmicdrift/kumiko-renderer": "0.45.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.50.0",
+    "@cosmicdrift/kumiko-headless": "0.50.0",
+    "@cosmicdrift/kumiko-renderer": "0.50.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/__tests__/app-layout.test.tsx

@@ -0,0 +1,43 @@
+// AppLayout: pinnt den fill-Vertrag — Default ist der klassische
+// min-h-screen-Seitenflow, fill schaltet auf h-screen + innen-scrollendes
+// main (min-h-0). Plus die className/mainClassName-Erweiterungspunkte.
+
+import { describe, expect, test } from "bun:test";
+import { AppLayout } from "../layout/app-layout";
+import { render } from "./test-utils";
+
+function root(container: HTMLElement): HTMLElement {
+  const el = container.querySelector('[data-kumiko-layout="app"]');
+  if (el === null) throw new Error("AppLayout root not found");
+  return el as HTMLElement;
+}
+
+describe("AppLayout fill", () => {
+  test("Default → min-h-screen (Seiten-Scroll), kein fill-Marker", () => {
+    const { container } = render(<AppLayout>x</AppLayout>);
+    const el = root(container);
+    expect(el.className).toContain("min-h-screen");
+    expect(el.getAttribute("data-kumiko-fill")).toBeNull();
+    expect((container.querySelector("main") as HTMLElement).className).not.toContain("min-h-0");
+  });
+
+  test("fill → h-screen + main min-h-0 (Innen-Scroll), fill-Marker gesetzt", () => {
+    const { container } = render(<AppLayout fill>x</AppLayout>);
+    const el = root(container);
+    expect(el.className).not.toContain("min-h-screen");
+    expect(el.className).toContain("h-screen");
+    expect(el.getAttribute("data-kumiko-fill")).toBe("true");
+    expect((container.querySelector("main") as HTMLElement).className).toContain("min-h-0");
+  });
+
+  test("className/mainClassName werden an die Defaults angehängt", () => {
+    const { container } = render(
+      <AppLayout className="bg-gradient-test" mainClassName="main-test">
+        x
+      </AppLayout>,
+    );
+    expect(root(container).className).toContain("bg-gradient-test");
+    expect(root(container).className).toContain("flex");
+    expect((container.querySelector("main") as HTMLElement).className).toContain("main-test");
+  });
+});

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

@@ -179,4 +179,34 @@ describe("NavTree", () => {
     // Items selbst bleibt sichtbar
     expect(screen.getByText("Items")).toBeTruthy();
   });
+
+  test("Nav-Eintrag mit bekanntem icon rendert ein Lucide-Icon, ohne icon den Dot", () => {
+    const schema = {
+      featureName: "showcase",
+      entities: {},
+      screens: [
+        { id: "dash", type: "entityList", entity: "x", columns: [] },
+        { id: "plain", type: "entityList", entity: "x", columns: [] },
+      ],
+      navs: [
+        { id: "dash", label: "Dash", screen: "dash", order: 10, icon: "dashboard" },
+        { id: "plain", label: "Plain", screen: "plain", order: 20 },
+      ],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    // Flache Navigation ohne Sections → keine Chevrons. Genau EIN svg:
+    // das dashboard-Icon. Das icon-lose Item rendert den Dot (span, kein svg).
+    expect(container.querySelectorAll("svg").length).toBe(1);
+  });
+
+  test("unbekannter icon-Key fällt sauber auf den Dot zurück (kein svg)", () => {
+    const schema = {
+      featureName: "showcase",
+      entities: {},
+      screens: [{ id: "x", type: "entityList", entity: "x", columns: [] }],
+      navs: [{ id: "x", label: "X", screen: "x", order: 10, icon: "does-not-exist" }],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    expect(container.querySelectorAll("svg").length).toBe(0);
+  });
 });

package/src/layout/app-layout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
 
 // Linear-Pattern: Sidebar ist Geschwister von <Topbar+Main>-Spalte,
 // nimmt die volle Höhe. Wenn ein Topbar gesetzt ist, lebt er NUR über
@@ -12,23 +13,50 @@ export type AppLayoutProps = {
   readonly sidebar?: ReactNode;
   readonly children: ReactNode;
   readonly testId?: string;
+  /** Viewport-fit Shell. true → Wurzel = `h-screen` (fixe Viewport-Höhe),
+   *  Sidebar/Topbar bleiben stehen, der Main-Bereich scrollt INNEN
+   *  (`min-h-0` + `overflow-auto`). false (Default) → klassischer
+   *  `min-h-screen`-Flow, die ganze Seite scrollt. Dashboard-artige Apps
+   *  wollen `true`; eine öffentliche, lange Content-Seite eher `false`.
+   *  Clippt nie — der Content scrollt in `main` statt im Body. */
+  readonly fill?: boolean;
+  /** Optionaler Klassen-Append an die Wurzel (eigener Hintergrund etc.).
+   *  Erweitert die Defaults, ersetzt sie nicht (cn-merge). */
+  readonly className?: string;
+  /** Optionaler Klassen-Append an `<main>`. */
+  readonly mainClassName?: string;
 };
 
-export function AppLayout({ topbar, sidebar, children, testId }: AppLayoutProps): ReactNode {
+export function AppLayout({
+  topbar,
+  sidebar,
+  children,
+  testId,
+  fill,
+  className,
+  mainClassName,
+}: AppLayoutProps): ReactNode {
   return (
     <div
       data-testid={testId}
       data-kumiko-layout="app"
-      className="flex min-h-screen flex-row bg-background text-foreground"
+      {...(fill === true && { "data-kumiko-fill": "true" })}
+      className={cn(
+        "flex flex-row bg-background text-foreground",
+        fill === true ? "h-screen" : "min-h-screen",
+        className,
+      )}
     >
       {sidebar}
-      <div className="flex flex-1 min-w-0 flex-col">
+      <div className={cn("flex flex-1 min-w-0 flex-col", 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
              spannen können ohne Negative-Margin-Tricks die mit
              `position: sticky` kollidieren. */}
-        <main className="flex-1 overflow-auto">{children}</main>
+        <main className={cn("flex-1 overflow-auto", fill === true && "min-h-0", mainClassName)}>
+          {children}
+        </main>
       </div>
     </div>
   );

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

@@ -44,6 +44,10 @@ export type DefaultAppShellProps = {
   /** Footer-Slot unten in der Sidebar — Profile-Row, Help-Link,
    *  Plan-Banner. Klebt am unteren Rand via `mt-auto`. */
   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. */
+  readonly fill?: boolean;
   /** Screen-Content der in `main` gerendert wird. */
   readonly children: ReactNode;
 };
@@ -54,10 +58,12 @@ export function DefaultAppShell({
   user,
   sidebarActions,
   sidebarFooter,
+  fill,
   children,
 }: DefaultAppShellProps): ReactNode {
   return (
     <AppLayout
+      {...(fill !== undefined && { fill })}
       sidebar={
         <Sidebar
           header={brand}

package/src/layout/nav-tree.tsx

@@ -16,11 +16,72 @@ import type { NavNode, NavRegistrySlice } from "@cosmicdrift/kumiko-headless";
 import { resolveNavigation } from "@cosmicdrift/kumiko-headless";
 import type { AppSchema, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
 import { lastSegment, toAppSchema, useNav, useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import {
+  BarChart3,
+  Bell,
+  Calculator,
+  CalendarDays,
+  ChevronDown,
+  ChevronRight,
+  Coins,
+  CreditCard,
+  FileText,
+  Folder,
+  Gauge,
+  Home,
+  LayoutDashboard,
+  LineChart,
+  List,
+  PiggyBank,
+  Receipt,
+  Search,
+  Settings,
+  Shield,
+  Sparkles,
+  Table,
+  TrendingUp,
+  User,
+  Users,
+  Wallet,
+  Wand2,
+} from "lucide-react";
 import { type ReactNode, useCallback, useMemo, useState } from "react";
 import { KumikoLink } from "../app/nav";
 import { cn } from "../lib/cn";
 
+// Nav-Icon-Registry: ein Nav-Eintrag setzt `icon: "<key>"` (im r.nav-Decl),
+// der Renderer mappt den symbolischen Key auf ein lucide-Component. Unknown
+// Keys → kein Icon (sauberer Fallback auf den Dot, kein Boot-Fail). Spiegelt
+// das NODE_ICONS-Muster vom Visual-Tree. App-Authors referenzieren nur diese
+// Keys; Erweiterung = neuer Eintrag hier (eine Quelle, alle Apps).
+const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
+  dashboard: LayoutDashboard,
+  gauge: Gauge,
+  list: List,
+  table: Table,
+  calculator: Calculator,
+  wallet: Wallet,
+  coins: Coins,
+  "credit-card": CreditCard,
+  "piggy-bank": PiggyBank,
+  receipt: Receipt,
+  chart: LineChart,
+  "bar-chart": BarChart3,
+  trending: TrendingUp,
+  sparkles: Sparkles,
+  wand: Wand2,
+  calendar: CalendarDays,
+  file: FileText,
+  folder: Folder,
+  home: Home,
+  bell: Bell,
+  shield: Shield,
+  settings: Settings,
+  users: Users,
+  user: User,
+  search: Search,
+};
+
 export type NavTreeProps = {
   // Akzeptiert beide Shapes — AppSchema (multi-feature) oder
   // FeatureSchema (legacy single-feature). toAppSchema normalisiert
@@ -82,6 +143,7 @@ function NavNodeItem({ node, depth, collapsed, onToggle }: NavNodeItemProps): Re
   const t = useTranslation();
   const active = node.screen !== undefined && nav.route?.screenId === lastSegment(node.screen);
 
+  const NavIcon = node.icon !== undefined ? NAV_ICONS[node.icon] : undefined;
   const hasChildren = node.children.length > 0;
   const isCollapsed = collapsed.has(node.qualifiedName);
   const indent = { paddingLeft: `${0.5 + depth * 1}rem` };
@@ -156,13 +218,23 @@ function NavNodeItem({ node, depth, collapsed, onToggle }: NavNodeItemProps): Re
             )}
             {...(active && { "aria-current": "page" })}
           >
-            <span
-              aria-hidden="true"
-              className={cn(
-                "inline-block size-1.5 rounded-full",
-                active ? "bg-accent-foreground" : "bg-muted-foreground/40",
-              )}
-            />
+            {NavIcon !== undefined ? (
+              <NavIcon
+                aria-hidden="true"
+                className={cn(
+                  "size-4 shrink-0",
+                  active ? "text-foreground" : "text-muted-foreground",
+                )}
+              />
+            ) : (
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "inline-block size-1.5 rounded-full",
+                  active ? "bg-accent-foreground" : "bg-muted-foreground/40",
+                )}
+              />
+            )}
             <span className="truncate">{displayLabel}</span>
           </KumikoLink>
           {chevron !== null && <div className="pr-2">{chevron}</div>}