@cosmicdrift/kumiko-renderer-web 0.182.1 → 0.183.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.182.1",
+  "version": "0.183.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.182.1",
-    "@cosmicdrift/kumiko-headless": "0.182.1",
-    "@cosmicdrift/kumiko-renderer": "0.182.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.183.1",
+    "@cosmicdrift/kumiko-headless": "0.183.1",
+    "@cosmicdrift/kumiko-renderer": "0.183.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -38,7 +38,11 @@
     "react-dom": "^19.2.6",
     "react-resizable-panels": "^4.12.2",
     "tailwind-merge": "^3.6.0",
-    "temporal-polyfill": "^0.3.2"
+    "temporal-polyfill": "^0.3.2",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/react": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2"
   },
   "peerDependencies": {
     "@tailwindcss/cli": "^4.3.0",

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/app/__tests__/rich-content-editor.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, test } from "bun:test";
+import { CONTENT_EDITOR_ELEMENT_ID } from "@cosmicdrift/kumiko-renderer";
+import { render, screen } from "../../__tests__/test-utils";
+import { RichContentEditor } from "../rich-content-editor";
+
+describe("RichContentEditor", () => {
+  test("falls back to the plain textarea while the tiptap chunk loads, then swaps in the editor", async () => {
+    render(
+      <RichContentEditor
+        value="<p>hello</p>"
+        onChange={() => {}}
+        variables={[]}
+        readOnly={false}
+      />,
+    );
+    // The textarea id proves #1794's "never an empty panel" fallback is the
+    // Suspense boundary — a null fallback would leave nothing to find here.
+    expect(document.getElementById(CONTENT_EDITOR_ELEMENT_ID)).not.toBeNull();
+    expect(await screen.findByText("hello")).toBeTruthy();
+  });
+});

package/src/app/__tests__/tiptap-editor.test.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, test } from "bun:test";
+import { CONTENT_EDITOR_ELEMENT_ID } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+import { fireEvent, render, screen } from "../../__tests__/test-utils";
+import TiptapEditor from "../tiptap-editor";
+
+function Controlled({ initial }: { readonly initial: string }): ReactNode {
+  const [value, setValue] = useState(initial);
+  return <TiptapEditor value={value} onChange={setValue} variables={["name"]} readOnly={false} />;
+}
+
+// Mirrors the real caller: TextBlockEditor mounts with value="" and only
+// gets the loaded content after its by-slug query resolves — value arrives
+// as a prop update, not at mount. A test that renders the final HTML
+// straight away would stay green even if the sync effect were missing.
+function LateValue({ loaded }: { readonly loaded: string }): ReactNode {
+  const [value, setValue] = useState("");
+  return (
+    <div>
+      <button type="button" onClick={() => setValue(loaded)}>
+        load
+      </button>
+      <TiptapEditor value={value} onChange={setValue} variables={[]} readOnly={false} />
+    </div>
+  );
+}
+
+describe("TiptapEditor — jsdom smoke", () => {
+  test("mounts a contenteditable surface for the given HTML", async () => {
+    render(
+      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+    );
+    const editable = await screen.findByText("hello");
+    expect(editable.closest('[contenteditable="true"]')).not.toBeNull();
+  });
+
+  test("the contenteditable surface carries CONTENT_EDITOR_ELEMENT_ID so the wrapping Field's label stays associated", async () => {
+    render(
+      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+    );
+    expect(document.getElementById(CONTENT_EDITOR_ELEMENT_ID)).not.toBeNull();
+  });
+
+  test("no variables → no chip bar", async () => {
+    render(
+      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+    );
+    await screen.findByText("hello");
+    expect(screen.queryAllByRole("button", { name: "Bold" })).toHaveLength(1);
+    expect(screen.queryByText(/^\{\{.*\}\}$/)).toBeNull();
+  });
+
+  test("every toolbar action resolves by its accessible name", async () => {
+    render(
+      <TiptapEditor value="<p>hello</p>" onChange={() => {}} variables={[]} readOnly={false} />,
+    );
+    await screen.findByText("hello");
+    for (const name of [
+      "Bold",
+      "Italic",
+      "Heading 1",
+      "Heading 2",
+      "Bullet list",
+      "Numbered list",
+    ]) {
+      expect(screen.getByRole("button", { name })).toBeTruthy();
+    }
+  });
+
+  test("a value arriving after mount (async load) still reaches the editor", async () => {
+    render(<LateValue loaded="<p>loaded content</p>" />);
+    expect(screen.queryByText("loaded content")).toBeNull();
+    fireEvent.click(screen.getByText("load"));
+    expect(await screen.findByText("loaded content")).toBeTruthy();
+  });
+
+  test("toolbar H1 toggles the block type and reports it via onChange", async () => {
+    // Block-type commands (headings) apply at the cursor's block, unlike
+    // inline marks (bold/italic) which need an explicit text selection —
+    // simulating a real range selection in happy-dom is unreliable, so this
+    // is the toolbar-wiring smoke test; the extension itself is tiptap's.
+    render(<Controlled initial="<p>hello</p>" />);
+    await screen.findByText("hello");
+    fireEvent.click(screen.getByRole("button", { name: "Heading 1" }));
+    const editable = (await screen.findByText("hello")).closest('[contenteditable="true"]');
+    expect(editable?.innerHTML).toContain("<h1");
+  });
+
+  test("variable chip inserts {{name}} as plain text at the cursor", async () => {
+    render(<Controlled initial="<p></p>" />);
+    fireEvent.click(screen.getByText("{{name}}"));
+    expect(await screen.findByText("{{name}}", { selector: "p" })).toBeTruthy();
+  });
+});

package/src/app/rich-content-editor.tsx

@@ -0,0 +1,21 @@
+// @runtime client
+//
+// "rich" contentFormat editor: WYSIWYG on tiptap. Public contract is the
+// same four props every ContentEditorComponent gets — no tiptap type
+// crosses this boundary. tiptap itself is dynamic-imported (TiptapEditor
+// lives in ./tiptap-editor) so an app that never mounts a "rich" collection
+// never pays for it; the fallback while the chunk loads is the same plain
+// textarea #1794 uses for a missing editor, never a blank panel.
+
+import { type ContentEditorProps, TextareaContentEditor } from "@cosmicdrift/kumiko-renderer";
+import { lazy, type ReactNode, Suspense } from "react";
+
+const TiptapEditor = lazy(() => import("./tiptap-editor"));
+
+export function RichContentEditor(props: ContentEditorProps): ReactNode {
+  return (
+    <Suspense fallback={<TextareaContentEditor {...props} />}>
+      <TiptapEditor {...props} />
+    </Suspense>
+  );
+}

package/src/app/tiptap-editor.tsx

@@ -0,0 +1,178 @@
+// @runtime client
+//
+// tiptap-backed implementation behind RichContentEditor's lazy() boundary —
+// never import this file directly, tiptap must only load when a "rich"
+// collection is actually rendered. StarterKit covers bold/italic/lists/
+// headings, and its bundled Link extension autolinks on type/paste — no
+// link button, so no URL-prompt UI to build or test.
+
+import {
+  CONTENT_EDITOR_ELEMENT_ID,
+  type ContentEditorProps,
+  TextareaContentEditor,
+  usePrimitives,
+  useTranslation,
+  VariableChips,
+} from "@cosmicdrift/kumiko-renderer";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import {
+  Bold as BoldIcon,
+  Heading1,
+  Heading2,
+  Italic as ItalicIcon,
+  List,
+  ListOrdered,
+} from "lucide-react";
+import { type ReactNode, useEffect } from "react";
+import { cn } from "../lib/cn";
+
+type ToolbarAction = {
+  readonly label: string;
+  readonly icon: typeof BoldIcon;
+  readonly isActive: boolean;
+  readonly onClick: () => void;
+};
+
+function Toolbar({
+  actions,
+  disabled,
+}: {
+  readonly actions: readonly ToolbarAction[];
+  readonly disabled: boolean;
+}): ReactNode {
+  const { Button } = usePrimitives();
+  return (
+    <div className="flex flex-wrap gap-1 border-b border-input p-1">
+      {actions.map((action) => (
+        <Button
+          key={action.label}
+          type="button"
+          variant={action.isActive ? "primary" : "secondary"}
+          size="icon"
+          disabled={disabled}
+          onClick={action.onClick}
+          ariaLabel={action.label}
+        >
+          <action.icon size={16} />
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+export default function TiptapEditor({
+  value,
+  onChange,
+  variables,
+  readOnly,
+}: ContentEditorProps): ReactNode {
+  const t = useTranslation();
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: value,
+    editable: !readOnly,
+    // Suspense (RichContentEditor's lazy boundary) speculatively mounts
+    // this component before committing it; immediate render would create
+    // an editor instance during that throwaway pass.
+    immediatelyRender: false,
+    // Same id the textarea fallback uses — the Field wrapping the editor
+    // (TextBlockEditor) associates its label via this id; the editor
+    // contract has no `id` prop of its own, see content-editors.tsx.
+    editorProps: { attributes: { id: CONTENT_EDITOR_ELEMENT_ID } },
+    onUpdate: ({ editor: e }) => onChange(e.getHTML()),
+  });
+
+  // TextBlockEditor loads the entry's content asynchronously (by-slug query
+  // resolves after mount), so `value` arrives after useEditor already read
+  // its initial (empty) content once. Sync it in — guarded against
+  // clobbering in-flight typing by comparing against the editor's own HTML.
+  useEffect(() => {
+    if (editor && value !== editor.getHTML()) {
+      editor.commands.setContent(value, { emitUpdate: false });
+    }
+  }, [value, editor]);
+
+  useEffect(() => {
+    editor?.setEditable(!readOnly);
+  }, [readOnly, editor]);
+
+  if (!editor)
+    return (
+      <TextareaContentEditor
+        value={value}
+        onChange={onChange}
+        variables={variables}
+        readOnly={readOnly}
+      />
+    );
+
+  const actions: readonly ToolbarAction[] = [
+    {
+      label: t("kumiko.contentEditor.bold"),
+      icon: BoldIcon,
+      isActive: editor.isActive("bold"),
+      onClick: () => editor.chain().focus().toggleBold().run(),
+    },
+    {
+      label: t("kumiko.contentEditor.italic"),
+      icon: ItalicIcon,
+      isActive: editor.isActive("italic"),
+      onClick: () => editor.chain().focus().toggleItalic().run(),
+    },
+    {
+      label: t("kumiko.contentEditor.heading1"),
+      icon: Heading1,
+      isActive: editor.isActive("heading", { level: 1 }),
+      onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+    },
+    {
+      label: t("kumiko.contentEditor.heading2"),
+      icon: Heading2,
+      isActive: editor.isActive("heading", { level: 2 }),
+      onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    },
+    {
+      label: t("kumiko.contentEditor.bulletList"),
+      icon: List,
+      isActive: editor.isActive("bulletList"),
+      onClick: () => editor.chain().focus().toggleBulletList().run(),
+    },
+    {
+      label: t("kumiko.contentEditor.orderedList"),
+      icon: ListOrdered,
+      isActive: editor.isActive("orderedList"),
+      onClick: () => editor.chain().focus().toggleOrderedList().run(),
+    },
+  ];
+
+  const insertVariable = (name: string): void => {
+    editor
+      .chain()
+      .focus()
+      .insertContent({ type: "text", text: `{{${name}}}` })
+      .run();
+  };
+
+  return (
+    <div className="rounded-md border border-input bg-transparent">
+      <Toolbar actions={actions} disabled={readOnly} />
+      <EditorContent
+        editor={editor}
+        className={cn(
+          "min-h-40 px-3 py-2 text-base outline-none md:text-sm",
+          "[&_.ProseMirror]:min-h-40 [&_.ProseMirror]:outline-none",
+          "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-6 [&_ol]:pl-6",
+          "[&_h1]:text-xl [&_h1]:font-bold [&_h2]:text-lg [&_h2]:font-bold",
+          "[&_a]:underline [&_a]:text-primary",
+          "[&_strong]:font-bold [&_em]:italic",
+        )}
+      />
+      {variables.length > 0 && (
+        <div className="border-t border-input p-1">
+          <VariableChips variables={variables} onInsert={insertVariable} disabled={readOnly} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -97,6 +97,7 @@ export type { KumikoLinkProps } from "./app/nav";
 export { KumikoLink, useBrowserNavApi } from "./app/nav";
 export { PlainContentEditor } from "./app/plain-content-editor";
 export { useResolvers } from "./app/resolvers-context";
+export { RichContentEditor } from "./app/rich-content-editor";
 export type { AppLayoutProps } from "./layout/app-layout";
 export { AppLayout } from "./layout/app-layout";
 export type { AvatarProps, AvatarSize } from "./layout/avatar";

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>
   );
 }