@cosmicdrift/kumiko-renderer-web 0.183.0 → 0.183.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.183.0",
+  "version": "0.183.2",
   "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.183.0",
-    "@cosmicdrift/kumiko-headless": "0.183.0",
-    "@cosmicdrift/kumiko-renderer": "0.183.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.183.2",
+    "@cosmicdrift/kumiko-headless": "0.183.2",
+    "@cosmicdrift/kumiko-renderer": "0.183.2",
     "@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

@@ -10,6 +10,7 @@ import {
   PrimitivesProvider,
 } from "@cosmicdrift/kumiko-renderer";
 import { render as _render, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { useBrowserNavApi } from "../app/nav";
 import {
@@ -20,7 +21,17 @@ import {
 } from "../layout/workspace-shell";
 import { WorkspaceSwitcher } from "../layout/workspace-switcher";
 import { defaultPrimitives } from "../primitives";
-import { createMockDispatcher, fireEvent, render, screen } from "./test-utils";
+import { createMockDispatcher, renderWithSidebar, screen } from "./test-utils";
+
+// Dropdown instead of a tab row (see workspace-switcher.tsx) — the
+// trigger always shows only the active label, Radix renders the list
+// only once open. Assertions that just check "which workspace is
+// active" read the trigger text instead of a per-tab aria-selected;
+// only tests that need the full list or click an entry open the
+// dropdown (userEvent, Radix reacts to pointerdown).
+function activeWorkspaceLabel(): string | null {
+  return screen.getByTestId("workspace-switcher-trigger").textContent;
+}
 
 // jsdom shares window.history across tests in the same file. Reset to /
 // before each render so URL-driven workspace state from one test doesn't
@@ -208,18 +219,19 @@ describe("firstNavScreenId", () => {
 
 describe("WorkspaceSwitcher", () => {
   test("renders nothing for a single workspace (no choice = no UI)", () => {
-    const { container } = render(
+    const { container } = renderWithSidebar(
       <WorkspaceSwitcher
         workspaces={[ws("only", { openToAll: true })]}
         activeId="only"
         onSelect={() => {}}
       />,
     );
-    expect(container.firstChild).toBeNull();
+    expect(container.querySelector('[data-testid="workspace-switcher-trigger"]')).toBeNull();
   });
 
-  test("renders a tab per workspace and marks the active one", () => {
-    render(
+  test("trigger shows the active workspace, dropdown lists all with aria-checked", async () => {
+    const user = userEvent.setup();
+    renderWithSidebar(
       <WorkspaceSwitcher
         workspaces={[
           ws("admin", { label: "Admin", openToAll: true }),
@@ -229,15 +241,16 @@ describe("WorkspaceSwitcher", () => {
         onSelect={() => {}}
       />,
     );
-    const adminTab = screen.getByTestId("workspace-tab-admin");
-    const driverTab = screen.getByTestId("workspace-tab-driver");
-    expect(adminTab.getAttribute("aria-selected")).toBe("true");
-    expect(driverTab.getAttribute("aria-selected")).toBe("false");
+    expect(activeWorkspaceLabel()).toBe("Admin");
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    expect(screen.getByTestId("workspace-tab-admin").getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByTestId("workspace-tab-driver").getAttribute("aria-checked")).toBe("false");
   });
 
-  test("clicking a tab calls onSelect with that workspace id", () => {
+  test("clicking a dropdown entry calls onSelect with that workspace id", async () => {
+    const user = userEvent.setup();
     const onSelect = mock();
-    render(
+    renderWithSidebar(
       <WorkspaceSwitcher
         workspaces={[
           ws("admin", { label: "Admin", openToAll: true }),
@@ -247,7 +260,8 @@ describe("WorkspaceSwitcher", () => {
         onSelect={onSelect}
       />,
     );
-    fireEvent.click(screen.getByTestId("workspace-tab-driver"));
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    await user.click(screen.getByTestId("workspace-tab-driver"));
     expect(onSelect).toHaveBeenCalledWith("driver");
   });
 });
@@ -292,7 +306,8 @@ describe("WorkspaceShell", () => {
     ],
   } as const;
 
-  test("an admin sees admin + dispatch in the switcher (driver hidden)", () => {
+  test("an admin sees admin + dispatch in the switcher (driver hidden)", async () => {
+    const user = userEvent.setup();
     renderShell(
       <WorkspaceShell
         brand={<div>Brand</div>}
@@ -302,6 +317,7 @@ describe("WorkspaceShell", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
     expect(screen.getByTestId("workspace-tab-admin")).toBeTruthy();
     expect(screen.getByTestId("workspace-tab-dispatch")).toBeTruthy();
     expect(screen.queryByTestId("workspace-tab-driver")).toBeNull();
@@ -317,7 +333,7 @@ describe("WorkspaceShell", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-    expect(screen.getByTestId("workspace-tab-admin").getAttribute("aria-selected")).toBe("true");
+    expect(activeWorkspaceLabel()).toBe("Admin");
   });
 
   test("only the active workspace's nav members appear in the sidebar", () => {
@@ -337,7 +353,8 @@ describe("WorkspaceShell", () => {
     expect(screen.queryAllByText("Tours").length).toBe(0);
   });
 
-  test("clicking the dispatch tab swaps the visible nav set", () => {
+  test("clicking the dispatch tab swaps the visible nav set", async () => {
+    const user = userEvent.setup();
     renderShell(
       <WorkspaceShell
         brand={<div>Brand</div>}
@@ -347,7 +364,8 @@ describe("WorkspaceShell", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-    fireEvent.click(screen.getByTestId("workspace-tab-dispatch"));
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    await user.click(screen.getByTestId("workspace-tab-dispatch"));
     // dispatch → orders + tours, NOT system (getAllByText: Desktop + Mobile-Sheet)
     expect(screen.getAllByText("Orders").length).toBeGreaterThan(0);
     expect(screen.getAllByText("Tours").length).toBeGreaterThan(0);
@@ -401,7 +419,7 @@ describe("WorkspaceShell", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-    expect(screen.getByTestId("workspace-tab-dispatch").getAttribute("aria-selected")).toBe("true");
+    expect(activeWorkspaceLabel()).toBe("Cockpit");
   });
 
   // Security regression — without the empty-allow-set branch, the NavTree
@@ -535,17 +553,18 @@ describe("WorkspaceShell — URL sync (path-based)", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-    expect(screen.getByTestId("workspace-tab-dispatch").getAttribute("aria-selected")).toBe("true");
-    expect(screen.getByTestId("workspace-tab-admin").getAttribute("aria-selected")).toBe("false");
+    expect(activeWorkspaceLabel()).toBe("dispatch");
   });
 
-  test("clicking a tab pushes /<workspace>/<screen> to the URL", () => {
+  test("clicking a tab pushes /<workspace>/<screen> to the URL", async () => {
+    const user = userEvent.setup();
     renderShell(
       <WorkspaceShell brand={<div>B</div>} schema={schema} user={{ id: "u1", roles: ["admin"] }}>
         <div>content</div>
       </WorkspaceShell>,
     );
-    fireEvent.click(screen.getByTestId("workspace-tab-dispatch"));
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    await user.click(screen.getByTestId("workspace-tab-dispatch"));
     // dispatch's first nav-member is bmc:nav:orders → screenId "orders"
     expect(window.location.pathname).toBe("/dispatch/orders");
   });
@@ -604,7 +623,7 @@ describe("WorkspaceShell — URL sync (path-based)", () => {
       </WorkspaceShell>,
     );
     // Default workspace = admin. Ghost id ignored, no error thrown.
-    expect(screen.getByTestId("workspace-tab-admin").getAttribute("aria-selected")).toBe("true");
+    expect(activeWorkspaceLabel()).toBe("admin");
   });
 
   test("popstate (back/forward) updates the active tab", () => {
@@ -614,7 +633,7 @@ describe("WorkspaceShell — URL sync (path-based)", () => {
         <div>content</div>
       </WorkspaceShell>,
     );
-    expect(screen.getByTestId("workspace-tab-admin").getAttribute("aria-selected")).toBe("true");
+    expect(activeWorkspaceLabel()).toBe("admin");
     // Simulate the user hitting "forward" to /dispatch/orders. pushState
     // alone doesn't fire popstate — we synthesize the event so the
     // hook's listener-set notifies subscribers. act() flushes the
@@ -623,7 +642,7 @@ describe("WorkspaceShell — URL sync (path-based)", () => {
       window.history.pushState(null, "", "/dispatch/orders");
       window.dispatchEvent(new PopStateEvent("popstate"));
     });
-    expect(screen.getByTestId("workspace-tab-dispatch").getAttribute("aria-selected")).toBe("true");
+    expect(activeWorkspaceLabel()).toBe("dispatch");
   });
 });
 

package/src/layout/__tests__/workspace-switcher.test.tsx

@@ -1,8 +1,10 @@
 // WorkspaceSwitcher Render-Tests (Phase 1, test-luecken-integration, Tier 2).
 //
-// Dumb presentational component (kein Radix). Pinnt: kein Switcher bei
-// <= 1 Workspace, tablist mit aria-selected am aktiven, onSelect-Callback.
-// Nutzt useTranslation → über test-utils mit LocaleProvider gerendert.
+// Dropdown built on Radix (like LanguageSwitcher/TenantSwitcher). Pins:
+// no switcher at <= 1 workspace, trigger shows the active label, dropdown
+// lists all workspaces with aria-checked on the active one, onSelect
+// callback. Radix opens on pointerdown → userEvent instead of
+// fireEvent.click, same as language-switcher.test.tsx.
 
 import { describe, expect, mock, test } from "bun:test";
 import {
@@ -10,7 +12,8 @@ import {
   LocaleProvider,
   type WorkspaceSchema,
 } from "@cosmicdrift/kumiko-renderer";
-import { fireEvent, render, screen } from "../../__tests__/test-utils";
+import userEvent from "@testing-library/user-event";
+import { renderWithSidebar, screen } from "../../__tests__/test-utils";
 import { WorkspaceSwitcher } from "../workspace-switcher";
 
 function ws(id: string, label = id): WorkspaceSchema {
@@ -19,14 +22,14 @@ function ws(id: string, label = id): WorkspaceSchema {
 
 describe("WorkspaceSwitcher — Render", () => {
   test("ein einziger Workspace → rendert nichts (kein nutzloser Switcher)", () => {
-    const { container } = render(
+    const { container } = renderWithSidebar(
       <WorkspaceSwitcher workspaces={[ws("a")]} activeId="a" onSelect={() => {}} />,
     );
-    expect(container.querySelector('[role="tablist"]')).toBeNull();
+    expect(container.querySelector('[data-testid="workspace-switcher-trigger"]')).toBeNull();
   });
 
-  test("mehrere Workspaces → tablist, aria-selected am aktiven Tab", () => {
-    render(
+  test("mehrere Workspaces → Trigger zeigt aktives Label", () => {
+    renderWithSidebar(
       <WorkspaceSwitcher
         workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
         activeId="b"
@@ -34,29 +37,45 @@ describe("WorkspaceSwitcher — Render", () => {
         testId="sw"
       />,
     );
-    expect(screen.getByTestId("sw").getAttribute("role")).toBe("tablist");
-    expect(screen.getByTestId("workspace-tab-a").getAttribute("aria-selected")).toBe("false");
-    expect(screen.getByTestId("workspace-tab-b").getAttribute("aria-selected")).toBe("true");
+    expect(screen.getByTestId("sw")).toBeTruthy();
+    expect(screen.getByText("Beta")).toBeTruthy();
   });
 
-  test("Click ruft onSelect mit der Workspace-id", () => {
+  test("Dropdown öffnen listet alle Workspaces, aria-checked am aktiven", async () => {
+    const user = userEvent.setup();
+    renderWithSidebar(
+      <WorkspaceSwitcher
+        workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
+        activeId="b"
+        onSelect={() => {}}
+      />,
+    );
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    expect(screen.getByTestId("workspace-tab-a").getAttribute("aria-checked")).toBe("false");
+    expect(screen.getByTestId("workspace-tab-b").getAttribute("aria-checked")).toBe("true");
+  });
+
+  test("Click auf einen Eintrag ruft onSelect mit der Workspace-id", async () => {
+    const user = userEvent.setup();
     const onSelect = mock((_id: string) => {});
-    render(
+    renderWithSidebar(
       <WorkspaceSwitcher
         workspaces={[ws("a", "Alpha"), ws("b", "Beta")]}
         activeId="a"
         onSelect={onSelect}
       />,
     );
-    fireEvent.click(screen.getByTestId("workspace-tab-b"));
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    await user.click(screen.getByTestId("workspace-tab-b"));
     expect(onSelect).toHaveBeenCalledWith("b");
   });
 });
 
 describe("WorkspaceSwitcher — i18n-Labels (Punkt-Konvention)", () => {
-  test("Label mit Punkt geht durch t() und rendert die Übersetzung", () => {
+  test("Label mit Punkt geht durch t() und rendert die Übersetzung", async () => {
+    const user = userEvent.setup();
     const bundle = { en: { "nav.adminArea": "Admin Area" } };
-    const { getByTestId } = render(
+    renderWithSidebar(
       <LocaleProvider
         resolver={createStaticLocaleResolver({ locale: "en" })}
         fallbackBundles={[bundle]}
@@ -68,8 +87,10 @@ describe("WorkspaceSwitcher — i18n-Labels (Punkt-Konvention)", () => {
         />
       </LocaleProvider>,
     );
-    expect(getByTestId("workspace-tab-a").textContent).toBe("Admin Area");
-    // ohne Punkt: verbatim, kein t()-Roundtrip
-    expect(getByTestId("workspace-tab-b").textContent).toBe("Plain Label");
+    // Trigger shows the translated active label.
+    expect(screen.getByText("Admin Area")).toBeTruthy();
+    await user.click(screen.getByTestId("workspace-switcher-trigger"));
+    // No dot: verbatim, no t() roundtrip.
+    expect(screen.getByTestId("workspace-tab-b").textContent).toBe("Plain Label");
   });
 });

package/src/layout/nav-tree.tsx

@@ -31,11 +31,13 @@ import {
 import {
   BarChart3,
   Bell,
+  BookOpen,
   Building,
   Calculator,
   CalendarDays,
   ChevronDown,
   ChevronRight,
+  ClipboardList,
   Coins,
   CreditCard,
   Download,
@@ -54,6 +56,7 @@ import {
   List,
   Lock,
   Mail,
+  Package,
   Palette,
   PiggyBank,
   Plus,
@@ -109,6 +112,9 @@ import { parseTargetFromSearchParams } from "./target-url";
 const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   dashboard: LayoutDashboard,
   "layout-grid": LayoutGrid,
+  "book-open": BookOpen,
+  "clipboard-list": ClipboardList,
+  package: Package,
   gauge: Gauge,
   list: List,
   table: Table,
@@ -231,7 +237,7 @@ export function NavTree({
     <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">
+          <div className="px-2 pt-2 pb-1 group-data-[collapsible=icon]:hidden">
             <SidebarInput
               value={filter}
               onChange={(e) => setFilter(e.target.value)}

package/src/layout/sidebar-brand.tsx

@@ -37,11 +37,13 @@ export function SidebarBrand({
           <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
             {logo ?? <span className="text-sm font-semibold">{name.charAt(0)}</span>}
           </div>
-          <div className="grid flex-1 text-left text-sm leading-tight">
+          <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
             <span className="truncate font-semibold">{name}</span>
             {plan !== undefined && <span className="truncate text-xs">{plan}</span>}
           </div>
-          {collapsible && <ChevronsUpDown className="ml-auto" />}
+          {collapsible && (
+            <ChevronsUpDown className="ml-auto group-data-[collapsible=icon]:hidden" />
+          )}
         </SidebarMenuButton>
       </SidebarMenuItem>
     </SidebarMenu>

package/src/layout/workspace-switcher.tsx

@@ -3,11 +3,28 @@
 // id, and a callback. Stays presentational so WorkspaceShell can own the
 // state (URL ?w=, defaults, role filtering) and tests can hand any list
 // in directly.
+//
+// Dropdown instead of a tab row: a row of fixed buttons overflowed the
+// sidebar width with 3+ workspaces (or even 2 longer names) —
+// truncate+scroll then hid the last entry entirely, unclickable. A
+// dropdown has constant trigger width regardless of count/length.
+//
+// Hidden entirely when collapsed instead of an icon/initial: a label at
+// icon width isn't readable anyway, and the user switches workspaces via
+// the full sidebar — no attempt to keep this operable in the icon rail
+// too (same as the search box in nav-tree.tsx).
 
 import type { WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { ChevronsUpDown } from "lucide-react";
 import type { ReactNode } from "react";
-import { cn } from "../lib/cn";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../primitives/dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
 
 export type WorkspaceSwitcherProps = {
   readonly workspaces: readonly WorkspaceSchema[];
@@ -26,37 +43,39 @@ export function WorkspaceSwitcher({
   // Single workspace doesn't need a switcher — the user has no choice
   // anyway. Render nothing instead of a useless one-button row.
   if (workspaces.length <= 1) return null;
+
+  const labelOf = (ws: WorkspaceSchema): string =>
+    ws.definition.label.includes(".") ? t(ws.definition.label) : ws.definition.label;
+  const active = workspaces.find((ws) => ws.definition.id === activeId);
+
   return (
-    <div
+    <SidebarMenu
       data-testid={testId}
       data-kumiko-layout="workspace-switcher"
-      role="tablist"
-      className="flex items-center gap-1"
+      className="group-data-[collapsible=icon]:hidden"
     >
-      {workspaces.map((ws) => {
-        const active = ws.definition.id === activeId;
-        const label = ws.definition.label.includes(".")
-          ? t(ws.definition.label)
-          : ws.definition.label;
-        return (
-          <button
-            type="button"
-            key={ws.definition.id}
-            role="tab"
-            aria-selected={active}
-            data-testid={`workspace-tab-${ws.definition.id}`}
-            onClick={() => onSelect(ws.definition.id)}
-            className={cn(
-              "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-              active
-                ? "bg-accent text-accent-foreground"
-                : "text-muted-foreground hover:bg-accent/40",
-            )}
-          >
-            {label}
-          </button>
-        );
-      })}
-    </div>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton data-testid="workspace-switcher-trigger">
+              <span className="truncate">{active !== undefined ? labelOf(active) : ""}</span>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="min-w-[10rem]">
+            {workspaces.map((ws) => (
+              <DropdownMenuCheckboxItem
+                key={ws.definition.id}
+                checked={ws.definition.id === activeId}
+                data-testid={`workspace-tab-${ws.definition.id}`}
+                onSelect={() => onSelect(ws.definition.id)}
+              >
+                <span className="truncate">{labelOf(ws)}</span>
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
   );
 }