@cosmicdrift/kumiko-renderer-web 0.65.0 → 0.66.0

package/src/layout/sidebar-brand.tsx

@@ -0,0 +1,40 @@
+// SidebarBrand — der TeamSwitcher-Header aus shadcns sidebar-07: Logo-Kachel +
+// Name + Plan/Tagline + ChevronsUpDown. App-Author reicht ihn als `brand` an
+// DefaultAppShell. Reiner Look (kein Team-Switch-Dropdown) — eine App hat
+// meist EINE Identität; wer wechseln will, baut den Dropdown selbst drumrum.
+
+import { ChevronsUpDown } from "lucide-react";
+import type { ReactNode } from "react";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
+
+export type SidebarBrandProps = {
+  /** Workspace-/App-Name (fett, erste Zeile). */
+  readonly name: string;
+  /** Zweite Zeile — Plan, Tagline, Tenant (klein, gedimmt). */
+  readonly plan?: string;
+  /** Logo in der Kachel — typisch ein Lucide-Icon. Fehlt es, steht der
+   *  erste Buchstabe des Namens. */
+  readonly logo?: ReactNode;
+};
+
+export function SidebarBrand({ name, plan, logo }: SidebarBrandProps): ReactNode {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <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">
+            <span className="truncate font-semibold">{name}</span>
+            {plan !== undefined && <span className="truncate text-xs">{plan}</span>}
+          </div>
+          <ChevronsUpDown className="ml-auto" />
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/layout/sidebar-user.tsx

@@ -0,0 +1,46 @@
+// SidebarUser — der NavUser-Footer aus shadcns sidebar-07: Avatar + Name +
+// Email + ChevronsUpDown. App-Author reicht ihn als `sidebarFooter` an
+// DefaultAppShell. Reiner Look (kein Account-Dropdown) — wer ein User-Menü
+// will, wrappt ihn in einen DropdownMenu.
+
+import { ChevronsUpDown } from "lucide-react";
+import type { ReactNode } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
+
+export type SidebarUserProps = {
+  readonly name: string;
+  readonly email?: string;
+  /** Avatar-URL. Fehlt sie, stehen die Initialen aus dem Namen. */
+  readonly avatar?: string;
+};
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0]?.charAt(0) ?? "";
+  const last = parts.length > 1 ? (parts[parts.length - 1]?.charAt(0) ?? "") : "";
+  return (first + last).toUpperCase() || name.slice(0, 2).toUpperCase();
+}
+
+export function SidebarUser({ name, email, avatar }: SidebarUserProps): ReactNode {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <Avatar className="size-8 rounded-lg">
+            {avatar !== undefined && <AvatarImage src={avatar} alt={name} />}
+            <AvatarFallback className="rounded-lg">{initials(name)}</AvatarFallback>
+          </Avatar>
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <span className="truncate font-semibold">{name}</span>
+            {email !== undefined && <span className="truncate text-xs">{email}</span>}
+          </div>
+          <ChevronsUpDown className="ml-auto size-4" />
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/layout/sidebar.tsx

@@ -28,7 +28,7 @@ export function Sidebar({ header, actions, children, footer, testId }: SidebarPr
     <aside
       data-testid={testId}
       data-kumiko-layout="sidebar"
-      className="w-60 flex-shrink-0 border-r bg-muted/30 flex flex-col text-sm"
+      className="hidden md:flex w-60 flex-shrink-0 bg-transparent flex-col text-sm"
     >
       {header !== undefined && (
         <div

package/src/layout/target-resolver-stub.tsx

@@ -12,11 +12,9 @@
 //      (damit unhandled Klicks sichtbar bleiben).
 //
 // **useDispatchTarget (V.1.4b)** ist der empfohlene Production-Pfad.
-// TreeNodeRenderer ruft den Hook in seinem Click-Handler — er schreibt
-// URL via nav.setSearchParams UND ruft den globalen dispatchTarget für
+// NavTree ruft den Hook im Click-Handler eines target-Knotens — er schreibt
+// die URL via nav.setSearchParams UND ruft den globalen dispatchTarget für
 // Test-Listener-Kompatibilität.
-//
-// Siehe visual-tree.md V.1.2 + V.1.4b.
 
 import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
 import { useNav } from "@cosmicdrift/kumiko-renderer";
@@ -40,7 +38,7 @@ export function dispatchTarget(target: TargetRef): void {
     return;
   }
   // biome-ignore lint/suspicious/noConsole: fallback wenn kein Subscriber registered
-  console.debug("[VisualTree] target dispatched (unhandled)", target);
+  console.debug("[NavTree] target dispatched (unhandled)", target);
 }
 
 /** Test-Hook: Exklusiver Spy. Returnt cleanup. */

package/src/layout/workspace-shell.tsx

@@ -34,12 +34,13 @@ import type { AppSchema, FeatureSchema, WorkspaceSchema } from "@cosmicdrift/kum
 import { qualifyNavId, toAppSchema, useNav } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useCallback, useLayoutEffect, useMemo } from "react";
 import { useResolvers } from "../app/resolvers-context";
+import { SidebarProvider } from "../ui/sidebar";
 import { AppLayout } from "./app-layout";
 import { EditorPanel } from "./editor-panel";
 import { lastSegment, NavTree } from "./nav-tree";
 import { Sidebar } from "./sidebar";
+import { parseTargetFromSearchParams } from "./target-url";
 import { Topbar } from "./topbar";
-import { VisualTree } from "./visual-tree";
 import { WorkspaceSwitcher } from "./workspace-switcher";
 
 export type WorkspaceShellUser = {
@@ -185,43 +186,40 @@ export function WorkspaceShell({
     <WorkspaceSwitcher workspaces={visible} activeId={activeId} onSelect={handleSelect} />
   );
 
-  // Sidebar-Content-Switch: workspace mit `navigation: "tree"` (opt-in)
-  // mountet die VisualTree-Component statt NavTree. Default (kein
-  // navigation gesetzt oder navigation="nav") behält das existing
-  // NavTree-Verhalten — kein Breaking-Change für Apps die Visual-Tree
-  // nicht aktivieren.
-  //
-  // VisualTree konsumiert TreeProviders via Context (siehe
-  // app/tree-providers-context.tsx) — App-Author registriert seine
-  // clientFeatures.treeProvider via createKumikoApp, kein zusätzlicher
-  // Prop hier nötig. Workspace-ID wird durchgereicht für die
-  // localStorage-Persistenz des expanded-Set.
-  // Siehe docs/plans/architecture/visual-tree.md A1 + V.1.1-A.
+  // EINE Nav: immer NavTree. Dynamische Knoten (r.nav({ provider: true }))
+  // ziehen ihre Children client-seitig aus den registrierten navProviders —
+  // der frühere navigation:"tree"/VisualTree-Zweig ist hier eingefaltet.
+  // Content-Bereich: ein aktives target (aus den nav.searchParams, gesetzt
+  // beim Klick auf einen target-Knoten) rendert den EditorPanel statt des
+  // RoutedScreen — sonst die normalen screen-children.
+  // (WorkspaceDefinition.navigation ist seitdem ein No-op; deferred removal.)
   const resolvers = useResolvers();
-  const isTreeMode = activeWorkspace?.definition.navigation === "tree";
+  const activeTarget = parseTargetFromSearchParams(nav.searchParams);
 
-  const sidebarContent =
-    activeWorkspace?.definition.navigation === "tree" ? (
-      <VisualTree workspaceId={activeWorkspace.definition.id} />
-    ) : (
-      <NavTree
-        schema={app}
-        {...(user !== undefined && { user })}
-        {...(allowedNavQns !== undefined && { allowedNavQns })}
-      />
-    );
+  const sidebarContent = (
+    <NavTree
+      schema={app}
+      {...(user !== undefined && { user })}
+      {...(allowedNavQns !== undefined && { allowedNavQns })}
+    />
+  );
 
+  // SidebarProvider: NavTree rendert vendored shadcn-SidebarMenuButtons, die
+  // useSidebar() rufen. WorkspaceShell behält sein eigenes Topbar-Layout
+  // (AppLayout + Sidebar), braucht aber den Context-Wrapper drumherum.
   return (
-    <AppLayout
-      topbar={<Topbar start={brand} center={switcher || undefined} end={topbarActions} />}
-      sidebar={
-        <Sidebar {...(sidebarFooter !== undefined && { footer: sidebarFooter })}>
-          {sidebarContent}
-        </Sidebar>
-      }
-    >
-      {isTreeMode ? <EditorPanel resolvers={resolvers} /> : children}
-    </AppLayout>
+    <SidebarProvider>
+      <AppLayout
+        topbar={<Topbar start={brand} center={switcher || undefined} end={topbarActions} />}
+        sidebar={
+          <Sidebar {...(sidebarFooter !== undefined && { footer: sidebarFooter })}>
+            {sidebarContent}
+          </Sidebar>
+        }
+      >
+        {activeTarget !== undefined ? <EditorPanel resolvers={resolvers} /> : children}
+      </AppLayout>
+    </SidebarProvider>
   );
 }
 

package/src/primitives/file-upload.tsx

@@ -0,0 +1,118 @@
+// File/Image-Upload-Widget für die Auto-Edit-Form. Lädt eine Datei per
+// multipart-POST an /api/files (vom Stack gemountet wenn ein storageProvider
+// gesetzt ist), bekommt die FileRef-UUID zurück und gibt sie als Field-Wert
+// hoch. Image → runde Avatar-Preview (GET /api/files/:id), file → Dateiname.
+
+import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-dispatcher-live";
+import { ImageIcon, Loader2, Upload } from "lucide-react";
+import { type ChangeEvent, type ReactNode, useRef, useState } from "react";
+import { Button as UiButton } from "../ui/button";
+
+export type FileUploadInputProps = {
+  readonly kind: "file" | "image";
+  readonly id: string;
+  readonly value: string | null;
+  readonly onChange: (fileId: string | null) => void;
+  readonly accept?: readonly string[];
+  readonly disabled?: boolean;
+  readonly entityType?: string;
+  readonly fieldName?: string;
+};
+
+// "jpg" → ".jpg", "image/png" bleibt. Leere Liste → kein accept-Attribut.
+function toAcceptAttr(accept?: readonly string[]): string | undefined {
+  if (accept === undefined || accept.length === 0) return undefined;
+  return accept.map((a) => (a.startsWith(".") || a.includes("/") ? a : `.${a}`)).join(",");
+}
+
+export function FileUploadInput({
+  kind,
+  id,
+  value,
+  onChange,
+  accept,
+  disabled,
+  entityType,
+  fieldName,
+}: FileUploadInputProps): ReactNode {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onPick(e: ChangeEvent<HTMLInputElement>): Promise<void> {
+    const file = e.target.files?.[0];
+    if (file === undefined) return;
+    setUploading(true);
+    setError(null);
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      if (entityType !== undefined) fd.append("entityType", entityType);
+      if (fieldName !== undefined) fd.append("fieldName", fieldName);
+      // Double-Submit-CSRF wie der Dispatcher: kumiko_csrf-Cookie → Header.
+      const csrf = readCsrfToken();
+      const res = await fetch("/api/files", {
+        method: "POST",
+        body: fd,
+        ...(csrf !== undefined && { headers: { [CSRF_HEADER_NAME]: csrf } }),
+      });
+      const json = (await res.json().catch(() => ({}))) as { id?: string; error?: string };
+      if (!res.ok || json.id === undefined) {
+        setError(json.error ?? "upload_failed");
+        return;
+      }
+      onChange(json.id);
+    } catch {
+      setError("upload_failed");
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  const acceptAttr = toAcceptAttr(accept);
+
+  return (
+    <div className="flex items-center gap-4">
+      {kind === "image" &&
+        (value !== null ? (
+          <img
+            src={`/api/files/${value}`}
+            alt=""
+            className="size-16 rounded-full border object-cover"
+          />
+        ) : (
+          <div className="bg-muted text-muted-foreground flex size-16 items-center justify-center rounded-full border">
+            <ImageIcon className="size-6" />
+          </div>
+        ))}
+      {kind === "file" && value !== null && (
+        <span className="text-muted-foreground text-sm">File attached</span>
+      )}
+      <input
+        ref={inputRef}
+        id={id}
+        type="file"
+        className="hidden"
+        {...(acceptAttr !== undefined && { accept: acceptAttr })}
+        onChange={(e) => void onPick(e)}
+        disabled={disabled}
+      />
+      <UiButton
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={disabled === true || uploading}
+        onClick={() => inputRef.current?.click()}
+      >
+        {uploading ? <Loader2 className="size-4 animate-spin" /> : <Upload className="size-4" />}
+        {value !== null ? "Change" : "Upload"}
+      </UiButton>
+      {value !== null && (
+        <UiButton type="button" variant="ghost" size="sm" onClick={() => onChange(null)}>
+          Remove
+        </UiButton>
+      )}
+      {error !== null && <span className="text-destructive text-xs">{error}</span>}
+    </div>
+  );
+}