@cosmicdrift/kumiko-renderer-web 0.1.0

package/src/layout/nav-tree.tsx

@@ -0,0 +1,281 @@
+// NavTree: Sidebar-Navigation aus dem Schema. Multi-Feature-aware —
+// jedes Feature trägt seinen Featurenamen, der zum Qualifizieren der
+// nav-ids genutzt wird. Pre-qualifizierte ids (enthält schon ":nav:")
+// gehen unverändert durch — so können einzelne Features Cross-Feature-
+// Referenzen einfügen ohne zur AppSchema migrieren zu müssen.
+//
+// Aktiver Eintrag bekommt die accent-Farben (hintergrund + foreground),
+// inaktive nur muted-foreground. Rekursiv mit Indentation pro Tiefe.
+//
+// Parent-Nodes mit children sind collapsible — Chevron rechts toggled
+// auf/zu. State lebt lokal im NavTree (useState); Default expanded
+// für alles, Caller kann später localStorage-Persistenz drüberlegen.
+
+import type { NavDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+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 { type ReactNode, useCallback, useMemo, useState } from "react";
+import { KumikoLink } from "../app/nav";
+import { cn } from "../lib/cn";
+
+export type NavTreeProps = {
+  // Akzeptiert beide Shapes — AppSchema (multi-feature) oder
+  // FeatureSchema (legacy single-feature). toAppSchema normalisiert
+  // intern, sodass die Pipeline nur AppSchema kennt.
+  readonly schema: AppSchema | FeatureSchema;
+  readonly user?: { readonly id: string; readonly roles: readonly string[] };
+  readonly testId?: string;
+  // Workspace membership filter — when set, only nav entries whose qualified
+  // id is in the set are visible. WorkspaceShell passes the active
+  // workspace's `navMembers` list. Undefined = no filter (legacy / non-
+  // workspace apps render every nav).
+  readonly allowedNavQns?: ReadonlySet<string>;
+};
+
+export function NavTree({ schema, user, testId, allowedNavQns }: NavTreeProps): ReactNode {
+  const app = useMemo(() => toAppSchema(schema), [schema]);
+  const tree = useMemo(() => {
+    const source = buildNavRegistrySliceForApp(app, allowedNavQns);
+    return resolveNavigation({ source, ...(user !== undefined && { user }) });
+  }, [app, user, allowedNavQns]);
+
+  // Collapsed-Set: nur die explizit zugeklappten qualified-names. Default
+  // ist also "alles auf" — neue Features tauchen sofort offen auf, ohne
+  // dass der User erst klicken muss.
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set());
+  const onToggle = useCallback((qn: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(qn)) next.delete(qn);
+      else next.add(qn);
+      return next;
+    });
+  }, []);
+
+  return (
+    <div data-testid={testId} data-kumiko-layout="nav-tree" className="flex flex-col gap-0.5">
+      {tree.map((node) => (
+        <NavNodeItem
+          key={node.qualifiedName}
+          node={node}
+          depth={0}
+          collapsed={collapsed}
+          onToggle={onToggle}
+        />
+      ))}
+    </div>
+  );
+}
+
+type NavNodeItemProps = {
+  readonly node: NavNode;
+  readonly depth: number;
+  readonly collapsed: ReadonlySet<string>;
+  readonly onToggle: (qn: string) => void;
+};
+
+function NavNodeItem({ node, depth, collapsed, onToggle }: NavNodeItemProps): ReactNode {
+  const nav = useNav();
+  const t = useTranslation();
+  const active = node.screen !== undefined && nav.route?.screenId === lastSegment(node.screen);
+
+  const hasChildren = node.children.length > 0;
+  const isCollapsed = collapsed.has(node.qualifiedName);
+  const indent = { paddingLeft: `${0.5 + depth * 1}rem` };
+
+  // i18n-Key Konvention: wenn label einen Punkt enthält, durchs t()
+  // laufen lassen — wenn Bundle den Key kennt, wird übersetzt, sonst
+  // bleibt der key selbst stehen (und der App-Dev sieht dass er eine
+  // Übersetzung vergessen hat). Reine String-Labels ("Dashboard")
+  // bleiben unangetastet durch das Mapping.
+  const displayLabel = node.label.includes(".") ? t(node.label) : node.label;
+
+  // In workspace mode the URL is /<ws>/<screen> — sidebar links must
+  // carry the active workspaceId, otherwise navigate({ screenId }) would
+  // produce /<screen> and the parser would interpret <screen> as a
+  // workspace id. Pulled from useNav().route so the link tracks switches.
+  const workspaceId = nav.route?.workspaceId;
+
+  // Chevron-Icon — nur wenn Node children hat. Rechts neben dem Label
+  // angeordnet; ein Click auf den Chevron alleine toggled die Section
+  // ohne zu navigieren (stopPropagation auf dem KumikoLink-Wrapper).
+  const chevron = hasChildren ? (
+    <button
+      type="button"
+      aria-label={t(isCollapsed ? "kumiko.nav.expand" : "kumiko.nav.collapse")}
+      aria-expanded={!isCollapsed}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onToggle(node.qualifiedName);
+      }}
+      className="ml-auto flex size-4 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+    >
+      {isCollapsed ? <ChevronRight className="size-3" /> : <ChevronDown className="size-3" />}
+    </button>
+  ) : null;
+
+  const children =
+    hasChildren && !isCollapsed
+      ? node.children.map((child) => (
+          <NavNodeItem
+            key={child.qualifiedName}
+            node={child}
+            depth={depth + 1}
+            collapsed={collapsed}
+            onToggle={onToggle}
+          />
+        ))
+      : null;
+
+  // Variante 1: Node hat einen Screen → KumikoLink. Wenn das Item auch
+  // children hat, sitzt der Chevron als Geschwister rechts NEBEN dem
+  // Link (nicht IM Link) — sonst würde ein <button> im <a> für invalid
+  // HTML sorgen. Wrapper-Div bekommt das hover/active-Styling, Link
+  // selbst ist nur die Klick-Fläche.
+  if (node.screen !== undefined) {
+    const screenId = lastSegment(node.screen);
+    const rowClass = cn(
+      "flex h-7 items-center gap-2 rounded-md text-[13px] transition-colors",
+      "hover:bg-accent/60 hover:text-foreground",
+      active
+        ? "bg-accent text-foreground font-medium"
+        : "text-muted-foreground hover:text-foreground",
+    );
+    return (
+      <>
+        <div style={indent} className={rowClass}>
+          <KumikoLink
+            to={{ ...(workspaceId !== undefined && { workspaceId }), screenId }}
+            className={cn(
+              "flex flex-1 min-w-0 items-center gap-2 px-2 h-full",
+              hasChildren && "pr-0",
+            )}
+            {...(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",
+              )}
+            />
+            <span className="truncate">{displayLabel}</span>
+          </KumikoLink>
+          {chevron !== null && <div className="pr-2">{chevron}</div>}
+        </div>
+        {children}
+      </>
+    );
+  }
+
+  // Variante 2: Node ist ein Section-Header (kein Screen). Mit children
+  // wird das Label zum Toggle-Button — Click klappt die ganze Section
+  // auf/zu. Chevron rendert hier als Span (kein nested button), weil
+  // der äußere Button schon das Toggle-Target ist. Ohne children
+  // rendert ein dezenter Section-Header (uppercase).
+  const chevronSpan = hasChildren ? (
+    <span aria-hidden="true" className="ml-auto flex size-4 items-center justify-center">
+      {isCollapsed ? <ChevronRight className="size-3" /> : <ChevronDown className="size-3" />}
+    </span>
+  ) : null;
+  return (
+    <>
+      {hasChildren ? (
+        <button
+          type="button"
+          onClick={() => onToggle(node.qualifiedName)}
+          aria-expanded={!isCollapsed}
+          style={indent}
+          className="flex h-7 items-center gap-2 rounded-md px-2 pt-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 hover:text-foreground transition-colors text-left"
+        >
+          <span className="truncate">{displayLabel}</span>
+          {chevronSpan}
+        </button>
+      ) : (
+        <div
+          style={indent}
+          className="px-2 pt-3 pb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70"
+        >
+          {displayLabel}
+        </div>
+      )}
+      {children}
+    </>
+  );
+}
+
+// Backwards-kompatibler Single-Feature-Builder. Convenience-Wrapper um
+// buildNavRegistrySliceForApp — bestehende Tests die direkt mit
+// FeatureSchema rufen brauchen keine Änderung.
+export function buildNavRegistrySlice(
+  schema: FeatureSchema,
+  allowedNavQns?: ReadonlySet<string>,
+): NavRegistrySlice {
+  return buildNavRegistrySliceForApp(toAppSchema(schema), allowedNavQns);
+}
+
+// Multi-Feature-Variante. Iteriert alle Features, qualifiziert pro
+// Feature mit dem eigenen featureName. Reihenfolge: Features in der
+// AppSchema-Ordnung, navs in der vom Feature deklarierten Reihenfolge.
+//
+// Cross-Feature-Workspaces sind hier nativ unterstützt — `navMembers`
+// referenzieren QNs, der Filter trifft die jeweils richtigen Einträge
+// egal in welchem Feature sie deklariert sind.
+export function buildNavRegistrySliceForApp(
+  app: AppSchema,
+  allowedNavQns?: ReadonlySet<string>,
+): NavRegistrySlice {
+  const qualified: NavDefinition[] = [];
+  for (const feature of app.features) {
+    for (const n of feature.navs ?? []) {
+      qualified.push({
+        ...n,
+        id: qualifyNavId(feature.featureName, n.id),
+        ...(n.parent !== undefined && { parent: qualifyNavId(feature.featureName, n.parent) }),
+        ...(n.screen !== undefined && { screen: qualifyScreenId(feature.featureName, n.screen) }),
+      });
+    }
+  }
+  // Workspace filter: drop nav entries whose qualified id isn't in the
+  // allow-set. A child whose parent gets dropped surfaces as a top-level
+  // entry — the workspace owner should list parents explicitly if they
+  // want the grouping preserved.
+  const filtered =
+    allowedNavQns !== undefined ? qualified.filter((n) => allowedNavQns.has(n.id)) : qualified;
+  const allowedQnSet = new Set(filtered.map((n) => n.id));
+  const topLevel: NavDefinition[] = [];
+  const byParentMap = new Map<string, NavDefinition[]>();
+  for (const nav of filtered) {
+    // Treat the entry as top-level when its parent isn't visible — keeps
+    // children visible after filtering, even if the workspace omits the
+    // parent group from its members list.
+    const hasVisibleParent = nav.parent !== undefined && allowedQnSet.has(nav.parent);
+    if (hasVisibleParent && nav.parent !== undefined) {
+      const list = byParentMap.get(nav.parent) ?? [];
+      list.push(nav);
+      byParentMap.set(nav.parent, list);
+    } else {
+      topLevel.push(nav);
+    }
+  }
+  return {
+    topLevel,
+    byParent: (parent) => byParentMap.get(parent) ?? [],
+  };
+}
+
+function qualifyNavId(feature: string, id: string): string {
+  return id.includes(":nav:") ? id : `${feature}:nav:${id}`;
+}
+
+function qualifyScreenId(feature: string, id: string): string {
+  return id.includes(":screen:") ? id : `${feature}:screen:${id}`;
+}
+
+// `lastSegment` lebt jetzt in @cosmicdrift/kumiko-renderer (./app/qn) — eine
+// Quelle, beide Pakete teilen sie.
+export { lastSegment };

package/src/layout/profile-menu.tsx

@@ -0,0 +1,40 @@
+// Profile-Menu — dünner Wrapper über ActionMenu (siehe primitives/
+// action-menu.tsx). Der Trigger ist immer ein Avatar; alles weitere
+// (Items, Separators, Shortcut-Hints, Danger-Variant) kommt vom
+// generischen ActionMenu. Wenn jemand einen anderen Trigger braucht
+// (Three-Dots-Icon, Pill, Custom-Button), nimmt er ActionMenu direkt.
+//
+// ProfileMenuItem ist ein Alias für MenuItemDef — Bestehender Caller-
+// Code bleibt typsicher, ohne dass wir den Discriminated-Union doppelt
+// pflegen.
+//
+// Linear-Pattern: kompakter Avatar-Pill, Click öffnet Menü mit View-
+// Profile / Settings / Sign-out + optional Keyboard-Shortcut-Hints.
+
+import type { ReactNode } from "react";
+import { ActionMenu, type MenuItemDef } from "../primitives/action-menu";
+import { Avatar } from "./avatar";
+
+export type ProfileMenuItem = MenuItemDef;
+
+export type ProfileMenuProps = {
+  readonly user: {
+    readonly id: string;
+    /** Display-Name oder Email — Quelle für Initials. */
+    readonly label: string;
+  };
+  readonly items: readonly ProfileMenuItem[];
+  readonly testId?: string;
+};
+
+export function ProfileMenu({ user, items, testId }: ProfileMenuProps): ReactNode {
+  return (
+    <ActionMenu
+      trigger={<Avatar id={user.id} label={user.label} size="md" />}
+      triggerLabel={`Open ${user.label} menu`}
+      items={items}
+      align="end"
+      testId={testId ?? "profile-menu-trigger"}
+    />
+  );
+}

package/src/layout/sidebar.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+
+export type SidebarProps = {
+  /** Header-Bereich oben — typisch Workspace-Avatar + Name + Badge.
+   *  Lebt VOR dem scroll-area, bleibt sichtbar wenn das nav scrollt. */
+  readonly header?: ReactNode;
+  /** Action-Cluster zwischen Header und Nav — typisch "+ Neu" Button
+   *  und Search-Icon. Linear-Pattern: prominent, nicht im scroll-area. */
+  readonly actions?: ReactNode;
+  /** NavTree + freie Sections (z.B. "Your teams" Header + Sub-Items).
+   *  Scrollt eigenständig wenn der Inhalt zu lang wird. */
+  readonly children: ReactNode;
+  /** Footer-Bereich unten — typisch Invite-Link, Help, Plan-Banner.
+   *  Klebt am unteren Rand via mt-auto. */
+  readonly footer?: ReactNode;
+  readonly testId?: string;
+};
+
+export function Sidebar({ header, actions, children, footer, testId }: SidebarProps): ReactNode {
+  // Linear-Pattern: 4 vertikale Bereiche
+  //   1. Header (Workspace-Identity)
+  //   2. Actions (Quick-Buttons, nicht-scrollend)
+  //   3. Nav-Scroll-Area (NavTree, scrollt wenn nötig)
+  //   4. Footer (klebt unten via mt-auto)
+  // bg-muted/40 + border-r für visuelle Distinction zur Main-Area;
+  // tighter padding (p-3) und kompakte gap-0.5 zwischen Items.
+  return (
+    <aside
+      data-testid={testId}
+      data-kumiko-layout="sidebar"
+      className="w-60 flex-shrink-0 border-r bg-muted/30 flex flex-col text-sm"
+    >
+      {header !== undefined && (
+        <div
+          data-kumiko-layout="sidebar-header"
+          className="h-12 flex items-center px-3 border-b border-border/50"
+        >
+          {header}
+        </div>
+      )}
+      {actions !== undefined && (
+        <div
+          data-kumiko-layout="sidebar-actions"
+          className="px-3 py-2 border-b border-border/50 flex flex-row items-center gap-1"
+        >
+          {actions}
+        </div>
+      )}
+      <div
+        data-kumiko-layout="sidebar-nav"
+        className="px-3 py-2 flex flex-col gap-0.5 overflow-auto flex-1"
+      >
+        {children}
+      </div>
+      {footer !== undefined && (
+        <div
+          data-kumiko-layout="sidebar-footer"
+          className="px-3 py-2 border-t mt-auto flex flex-col gap-1 text-xs text-muted-foreground"
+        >
+          {footer}
+        </div>
+      )}
+    </aside>
+  );
+}

package/src/layout/theme-toggle.tsx

@@ -0,0 +1,44 @@
+// ThemeToggle — Button der useTokenController().toggleMode() aufruft.
+// Icon-Slots als Props, damit renderer-web keine Icon-Lib als Hard-
+// Dependency zieht. Default: Unicode-Glyphs (☀ / ☾) — funktionieren in
+// jedem Browser, jede App kann lucide/heroicons/eigene SVG via Props
+// reinreichen.
+
+import { useTokenController } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+
+export type ThemeToggleProps = {
+  /** Icon für den hellen Modus (wird angezeigt WENN aktuell dark →
+   *  Klick wechselt zu light). Default: ☀ */
+  readonly lightIcon?: ReactNode;
+  /** Icon für den dunklen Modus (wird angezeigt WENN aktuell light →
+   *  Klick wechselt zu dark). Default: ☾ */
+  readonly darkIcon?: ReactNode;
+  /** Title/aria-label im dunklen Modus. Default: "Heller Modus" */
+  readonly titleInDark?: string;
+  /** Title/aria-label im hellen Modus. Default: "Dunkler Modus" */
+  readonly titleInLight?: string;
+  readonly testId?: string;
+};
+
+export function ThemeToggle({
+  lightIcon = "☀",
+  darkIcon = "☾",
+  titleInDark = "Heller Modus",
+  titleInLight = "Dunkler Modus",
+  testId,
+}: ThemeToggleProps): ReactNode {
+  const { mode, toggleMode } = useTokenController();
+  return (
+    <button
+      type="button"
+      onClick={toggleMode}
+      className="inline-flex h-8 w-8 items-center justify-center rounded-md border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      title={mode === "dark" ? titleInDark : titleInLight}
+      aria-label={mode === "dark" ? titleInDark : titleInLight}
+      data-testid={testId}
+    >
+      {mode === "dark" ? lightIcon : darkIcon}
+    </button>
+  );
+}

package/src/layout/topbar.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+export type TopbarProps = {
+  readonly start?: ReactNode;
+  readonly center?: ReactNode;
+  readonly end?: ReactNode;
+  readonly testId?: string;
+};
+
+export function Topbar({ start, center, end, testId }: TopbarProps): ReactNode {
+  return (
+    <header
+      data-testid={testId}
+      data-kumiko-layout="topbar"
+      className="flex h-12 items-center gap-4 border-b bg-background px-4 text-sm"
+    >
+      {start !== undefined && <div className="flex items-center gap-3">{start}</div>}
+      {center !== undefined && <nav className="flex flex-1 items-center gap-6">{center}</nav>}
+      {end !== undefined && <div className="ml-auto flex items-center gap-2">{end}</div>}
+    </header>
+  );
+}