@cosmicdrift/kumiko-renderer-web 0.168.0 → 0.170.0

package/package.json

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

@@ -421,6 +421,28 @@ describe("WorkspaceShell", () => {
     expect(screen.queryByText("Orders")).toBeNull();
     expect(screen.queryByText("Tours")).toBeNull();
   });
+
+  test("fill=true applies h-svh on root and min-h-0 on inset/main", () => {
+    renderShell(
+      <WorkspaceShell
+        brand={<div>Brand</div>}
+        schema={schema}
+        user={{ id: "u1", roles: ["admin"] }}
+        fill
+      >
+        <div>content</div>
+      </WorkspaceShell>,
+    );
+    const root = document.querySelector('[data-slot="sidebar-wrapper"]');
+    expect(root?.classList.contains("h-svh")).toBe(true);
+    const inset = document.querySelector('[data-slot="sidebar-inset"]');
+    expect(inset?.classList.contains("min-h-0")).toBe(true);
+    const mains = screen.getAllByRole("main");
+    const innerMain = mains.find((m) => m !== inset);
+    expect(innerMain?.classList.contains("min-h-0")).toBe(true);
+    expect(innerMain?.classList.contains("flex-1")).toBe(true);
+    expect(innerMain?.classList.contains("overflow-auto")).toBe(true);
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/layout/workspace-shell.tsx

@@ -77,6 +77,9 @@ export type WorkspaceShellProps = {
   readonly sidebarFooter?: ReactNode;
   /** Runtime badge slot per nav leaf (bare nav id), same as DefaultAppShell. */
   readonly navBadges?: ReadonlyMap<string, ReactNode>;
+  /** Viewport-fit shell. true → fixed viewport height (`h-svh`), content
+   *  scrolls INSIDE instead of the whole page. Default false (page scroll). */
+  readonly fill?: boolean;
   /** Screen content. */
   readonly children: ReactNode;
 };
@@ -89,6 +92,7 @@ export function WorkspaceShell({
   initialWorkspaceId,
   sidebarFooter,
   navBadges,
+  fill,
   children,
 }: WorkspaceShellProps): ReactNode {
   const app = useMemo(() => toAppSchema(schema), [schema]);
@@ -220,7 +224,7 @@ export function WorkspaceShell({
   // Content. topbarActions landen rechts in der Header-Zeile statt in einer
   // separaten Topbar — eine Kopfzeile statt zwei.
   return (
-    <SidebarProvider>
+    <SidebarProvider {...(fill === true && { className: "h-svh" })}>
       <Sidebar collapsible="icon">
         <SidebarHeader data-kumiko-layout="sidebar-header">
           {brand}
@@ -232,13 +236,13 @@ export function WorkspaceShell({
         )}
         <SidebarRail />
       </Sidebar>
-      <SidebarInset>
+      <SidebarInset className={fill === true ? "min-h-0" : undefined}>
         <ShellHeader
           schema={app}
           {...(user !== undefined && { user })}
           {...(topbarActions !== undefined && { headerActions: topbarActions })}
         />
-        <main className="flex-1 overflow-auto">
+        <main className={fill === true ? "min-h-0 flex-1 overflow-auto" : "flex-1 overflow-auto"}>
           {activeTarget !== undefined ? (
             <EditorPanel resolvers={resolvers} />
           ) : (