@cosmicdrift/kumiko-renderer-web 1.0.0 → 2.0.0

package/src/layout/shell-header.tsx

@@ -0,0 +1,114 @@
+// ShellHeader — die Inset-Kopfzeile für Sidebar-basierte Shells: SidebarTrigger
+// (Rail-/Mobile-Sheet-Toggle) + Breadcrumb mit dem aktiven Screen + optionale
+// rechtsbündige headerActions. Geteilt von DefaultAppShell und WorkspaceShell,
+// damit beide dieselbe Kopfzeile tragen (Höhe h-16, kollabiert auf h-12 mit
+// der Icon-Rail).
+
+import type { NavNode } from "@cosmicdrift/kumiko-headless";
+import { resolveNavigation } from "@cosmicdrift/kumiko-headless";
+import type { AppSchema, FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { toAppSchema, useNav, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useMemo } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../ui/breadcrumb";
+import { Separator } from "../ui/separator";
+import { SidebarTrigger } from "../ui/sidebar";
+import { buildNavRegistrySliceForApp, lastSegment } from "./nav-tree";
+import { type BreadcrumbCrumb, resolveDetailBreadcrumb } from "./shell-breadcrumb";
+
+type ShellHeaderUser = {
+  readonly id: string;
+  readonly roles: readonly string[];
+};
+
+export function ShellHeader({
+  schema,
+  user,
+  headerActions,
+}: {
+  readonly schema: AppSchema | FeatureSchema;
+  readonly user?: ShellHeaderUser;
+  readonly headerActions?: ReactNode;
+}): ReactNode {
+  const nav = useNav();
+  const t = useTranslation();
+  const appSchema = toAppSchema(schema);
+  const tree = useMemo(() => {
+    const source = buildNavRegistrySliceForApp(appSchema);
+    return resolveNavigation({ source, ...(user !== undefined && { user }) });
+  }, [appSchema, user]);
+
+  const allScreens = useMemo(
+    () => appSchema.features.flatMap((f) => f.screens),
+    [appSchema.features],
+  );
+  const screenId = nav.route?.screenId;
+  const crumbs = useMemo((): readonly BreadcrumbCrumb[] | undefined => {
+    if (screenId === undefined) return undefined;
+    const navLabel = activeNavLabel(tree, screenId, (k) => t(k));
+    if (navLabel !== undefined) return [{ label: navLabel }];
+    return resolveDetailBreadcrumb(allScreens, screenId, t);
+  }, [allScreens, screenId, t, tree]);
+
+  return (
+    <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+      <div className="flex items-center gap-2 px-4">
+        <SidebarTrigger className="-ml-1" />
+        <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+        {crumbs !== undefined && crumbs.length > 0 && (
+          <Breadcrumb>
+            <BreadcrumbList>
+              {crumbs.map((crumb, index) => {
+                const screenId = crumb.screenId;
+                return (
+                  <BreadcrumbItem key={screenId ?? crumb.label}>
+                    {index > 0 && <BreadcrumbSeparator />}
+                    {screenId !== undefined && index < crumbs.length - 1 ? (
+                      <BreadcrumbLink
+                        href="#"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          nav.navigate({ screenId });
+                        }}
+                      >
+                        {crumb.label}
+                      </BreadcrumbLink>
+                    ) : (
+                      <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                    )}
+                  </BreadcrumbItem>
+                );
+              })}
+            </BreadcrumbList>
+          </Breadcrumb>
+        )}
+      </div>
+      {headerActions !== undefined && (
+        <div data-kumiko-layout="header-actions" className="ml-auto flex items-center gap-2 px-4">
+          {headerActions}
+        </div>
+      )}
+    </header>
+  );
+}
+
+function activeNavLabel(
+  nodes: readonly NavNode[],
+  screenId: string,
+  t: (key: string) => string,
+): string | undefined {
+  for (const node of nodes) {
+    if (node.screen !== undefined && lastSegment(node.screen) === screenId) {
+      return node.label.includes(".") || node.label.includes(":") ? t(node.label) : node.label;
+    }
+    const child = activeNavLabel(node.children, screenId, t);
+    if (child !== undefined) return child;
+  }
+  return undefined;
+}

package/src/layout/workspace-shell.tsx

@@ -31,16 +31,22 @@
 
 import type { AccessRule } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { AppSchema, FeatureSchema, WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";
-import { qualifyNavId, toAppSchema, useNav } from "@cosmicdrift/kumiko-renderer";
+import { qualifyNavId, toAppSchema, UserRolesProvider, 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 {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarProvider,
+  SidebarRail,
+} from "../ui/sidebar";
 import { EditorPanel } from "./editor-panel";
 import { lastSegment, NavTree } from "./nav-tree";
-import { Sidebar } from "./sidebar";
+import { ShellHeader } from "./shell-header";
 import { parseTargetFromSearchParams } from "./target-url";
-import { Topbar } from "./topbar";
 import { WorkspaceSwitcher } from "./workspace-switcher";
 
 export type WorkspaceShellUser = {
@@ -69,6 +75,8 @@ export type WorkspaceShellProps = {
    *  Info. Klebt am unteren Rand via `mt-auto` (siehe Sidebar.footer).
    *  Symmetrisch zu DefaultAppShell.sidebarFooter. */
   readonly sidebarFooter?: ReactNode;
+  /** Runtime badge slot per nav leaf (bare nav id), same as DefaultAppShell. */
+  readonly navBadges?: ReadonlyMap<string, ReactNode>;
   /** Screen content. */
   readonly children: ReactNode;
 };
@@ -80,6 +88,7 @@ export function WorkspaceShell({
   user,
   initialWorkspaceId,
   sidebarFooter,
+  navBadges,
   children,
 }: WorkspaceShellProps): ReactNode {
   const app = useMemo(() => toAppSchema(schema), [schema]);
@@ -201,24 +210,42 @@ export function WorkspaceShell({
       schema={app}
       {...(user !== undefined && { user })}
       {...(allowedNavQns !== undefined && { allowedNavQns })}
+      {...(navBadges !== undefined && { navBadges })}
     />
   );
 
-  // SidebarProvider: NavTree rendert vendored shadcn-SidebarMenuButtons, die
-  // useSidebar() rufen. WorkspaceShell behält sein eigenes Topbar-Layout
-  // (AppLayout + Sidebar), braucht aber den Context-Wrapper drumherum.
+  // Modern shell (wie DefaultAppShell): collapsible Icon-Rail-Sidebar trägt
+  // Brand + Workspace-Switcher + Nav + Footer; der SidebarInset rendert die
+  // geteilte ShellHeader (Panel-Toggle + Breadcrumb + Actions) über dem
+  // Content. topbarActions landen rechts in der Header-Zeile statt in einer
+  // separaten Topbar — eine Kopfzeile statt zwei.
   return (
     <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>
+      <Sidebar collapsible="icon">
+        <SidebarHeader data-kumiko-layout="sidebar-header">
+          {brand}
+          {switcher}
+        </SidebarHeader>
+        <SidebarContent data-kumiko-layout="sidebar-nav">{sidebarContent}</SidebarContent>
+        {sidebarFooter !== undefined && (
+          <SidebarFooter data-kumiko-layout="sidebar-footer">{sidebarFooter}</SidebarFooter>
+        )}
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <ShellHeader
+          schema={app}
+          {...(user !== undefined && { user })}
+          {...(topbarActions !== undefined && { headerActions: topbarActions })}
+        />
+        <main className="flex-1 overflow-auto">
+          {activeTarget !== undefined ? (
+            <EditorPanel resolvers={resolvers} />
+          ) : (
+            <UserRolesProvider roles={user?.roles}>{children}</UserRolesProvider>
+          )}
+        </main>
+      </SidebarInset>
     </SidebarProvider>
   );
 }

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -164,4 +164,31 @@ describe("defaultCellRender", () => {
     expect(defaultCellRender("hallo", "text")).toBe("hallo");
     expect(defaultCellRender(42, "number")).toBe("42");
   });
+
+  test("money → { amount, currency } formatiert, kein [object Object]", () => {
+    const result = defaultCellRender({ amount: 45000, currency: "EUR" }, "money");
+    expect(result).not.toBe("[object Object]");
+    expect(result.replace(/[^0-9]/g, "")).toBe("45000");
+  });
+
+  test("money → JPY ohne Nachkommastellen (currencyDecimals)", () => {
+    const result = defaultCellRender({ amount: 1000, currency: "JPY" }, "money");
+    const expected = new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency: "JPY",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(1000);
+    expect(result).toBe(expected);
+    expect(result).not.toMatch(/[.,]\d\d$/);
+  });
+
+  test("money → unerwarteter Value-Shape fällt auf String zurück", () => {
+    expect(defaultCellRender(45000, "money")).toBe("45000");
+  });
+
+  test("money → invalid currency does not throw, falls back to [object Object] like pre-regression (#1494)", () => {
+    expect(() => defaultCellRender({ amount: 1, currency: "" }, "money")).not.toThrow();
+    expect(defaultCellRender({ amount: 1, currency: "" }, "money")).toBe("[object Object]");
+  });
 });

package/src/primitives/__tests__/input-testid.test.tsx

@@ -0,0 +1,45 @@
+// #950 — Input forwardet testId (→ data-testid) + readOnly ans echte <input>,
+// damit App-Tests getByTestId(...) + .readOnly/.disabled assertieren können.
+import { describe, expect, test } from "bun:test";
+import { render, screen } from "@testing-library/react";
+import { defaultPrimitives } from "../index";
+
+const { Input } = defaultPrimitives;
+const noop = () => {};
+
+describe("DefaultInput testId/readOnly forwarding (#950)", () => {
+  test("text: testId → data-testid, readOnly durchgereicht", () => {
+    render(
+      <Input
+        kind="text"
+        id="subdomain"
+        name="subdomain"
+        value="acme"
+        onChange={noop}
+        testId="url-settings-subdomain"
+        readOnly
+      />,
+    );
+    const input = screen.getByTestId("url-settings-subdomain");
+    expect(input.tagName).toBe("INPUT");
+    expect((input as HTMLInputElement).readOnly).toBe(true);
+  });
+
+  test("readOnly default false (nicht gesetzt = editierbar)", () => {
+    render(<Input kind="text" id="x" name="x" value="" onChange={noop} testId="plain" />);
+    expect((screen.getByTestId("plain") as HTMLInputElement).readOnly).toBe(false);
+  });
+
+  test("email/password/number: testId erreicht das Element", () => {
+    render(
+      <>
+        <Input kind="email" id="e" name="e" value="" onChange={noop} testId="tid-email" />
+        <Input kind="password" id="p" name="p" value="" onChange={noop} testId="tid-pw" />
+        <Input kind="number" id="n" name="n" value={1} onChange={noop} testId="tid-num" />
+      </>,
+    );
+    for (const tid of ["tid-email", "tid-pw", "tid-num"]) {
+      expect(screen.getByTestId(tid).tagName).toBe("INPUT");
+    }
+  });
+});

package/src/primitives/__tests__/money-input.test.tsx

@@ -8,7 +8,19 @@
 
 import { describe, expect, mock, test } from "bun:test";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { currencyDecimals, MoneyInput, parseLocaleNumber } from "../money-input";
+import { currencyDecimals, formatMoney, MoneyInput, parseLocaleNumber } from "../money-input";
+
+describe("formatMoney", () => {
+  test("formats a normal amount with the currency symbol", () => {
+    expect(formatMoney(199_99, "USD", "en-US")).toBe("$199.99");
+  });
+
+  test("falls back to the raw amount instead of throwing on an invalid currency (#1494)", () => {
+    expect(formatMoney(100, "", "en-US")).toBe("100");
+    expect(formatMoney(100, "EU", "en-US")).toBe("100");
+    expect(formatMoney(100, "€", "en-US")).toBe("100");
+  });
+});
 
 describe("currencyDecimals", () => {
   test("0-Decimal-Währungen (JPY/KRW/VND/ISK)", () => {

package/src/primitives/dialog.tsx

@@ -1,18 +1,13 @@
-// shadcn-Style Dialog via @radix-ui/react-dialog. Confirm-Button-
-// Variant kommt aus dem Standard-Button-Pattern; Cancel ist immer
-// secondary. Async-onConfirm wird über loading-State gerendert
-// (Spinner im Confirm-Button bis der Promise resolved).
-//
-// Ausgelagert von primitives/index.tsx weil das Radix-Setup mehrere
-// Dependencies und Sub-Exports zieht — hält das Primitives-Hauptfile
-// schlank.
+// Confirm dialog built on ModalShell. Cancel is always secondary; async
+// onConfirm shows a spinner on the confirm button until the promise settles.
 
 import type { DialogProps } from "@cosmicdrift/kumiko-renderer";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Loader2, X } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { cn } from "../lib/cn";
+import { ModalShell } from "./modal-shell";
 
 export function DefaultDialog({
   open,
@@ -38,9 +33,6 @@ export function DefaultDialog({
       await onConfirm();
     } finally {
       setLoading(false);
-      // Auch bei rejected onConfirm schließen — ein offen hängendes Modal
-      // ohne Botschaft wirkt eingefroren; der Fehler selbst wird vom
-      // onConfirm-Pfad surfaced (Row-Actions: Toast).
       onOpenChange(false);
     }
   }
@@ -51,72 +43,51 @@ export function DefaultDialog({
     : "bg-primary text-primary-foreground shadow hover:bg-primary/90";
 
   return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-        <DialogPrimitive.Content
-          data-testid={testId}
-          // Wenn description fehlt, signalisieren wir Radix explizit
-          // `aria-describedby={undefined}` — sonst warnt Radix zur
-          // Laufzeit (aria-Best-Practice: Modals sollen entweder eine
-          // Description haben oder den Hinweis tragen dass keine da ist).
-          {...(description === undefined && { "aria-describedby": undefined })}
+    <ModalShell
+      open={open}
+      onOpenChange={onOpenChange}
+      testId={testId}
+      closeLabel={t("kumiko.dialog.close")}
+      noAriaDescription={description === undefined}
+      contentClassName={cn("grid w-full max-w-lg gap-4 border bg-card p-6 shadow-lg rounded-lg")}
+    >
+      <div className="flex flex-col gap-1.5">
+        <DialogPrimitive.Title className="text-lg font-semibold tracking-tight">
+          {title}
+        </DialogPrimitive.Title>
+        {description !== undefined && (
+          <DialogPrimitive.Description className="text-sm text-muted-foreground">
+            {description}
+          </DialogPrimitive.Description>
+        )}
+      </div>
+      {children !== undefined && <div>{children}</div>}
+      <div className="flex items-center justify-end gap-2">
+        <DialogPrimitive.Close asChild>
+          <button
+            type="button"
+            disabled={loading}
+            data-testid={testId !== undefined ? `${testId}-cancel` : undefined}
+            className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+          >
+            {effectiveCancelLabel}
+          </button>
+        </DialogPrimitive.Close>
+        <button
+          type="button"
+          onClick={() => void handleConfirm()}
+          disabled={loading}
+          data-testid={testId !== undefined ? `${testId}-confirm` : undefined}
           className={cn(
-            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-            "rounded-lg",
+            "inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
+            "disabled:pointer-events-none disabled:opacity-50",
+            confirmClass,
           )}
         >
-          <div className="flex flex-col gap-1.5">
-            <DialogPrimitive.Title className="text-lg font-semibold tracking-tight">
-              {title}
-            </DialogPrimitive.Title>
-            {description !== undefined && (
-              <DialogPrimitive.Description className="text-sm text-muted-foreground">
-                {description}
-              </DialogPrimitive.Description>
-            )}
-          </div>
-          {children !== undefined && <div>{children}</div>}
-          <div className="flex items-center justify-end gap-2">
-            <DialogPrimitive.Close asChild>
-              <button
-                type="button"
-                disabled={loading}
-                data-testid={testId !== undefined ? `${testId}-cancel` : undefined}
-                className="inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-              >
-                {effectiveCancelLabel}
-              </button>
-            </DialogPrimitive.Close>
-            <button
-              type="button"
-              onClick={() => void handleConfirm()}
-              disabled={loading}
-              data-testid={testId !== undefined ? `${testId}-confirm` : undefined}
-              className={cn(
-                "inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium",
-                "disabled:pointer-events-none disabled:opacity-50",
-                confirmClass,
-              )}
-            >
-              {loading && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
-              {effectiveConfirmLabel}
-            </button>
-          </div>
-          <DialogPrimitive.Close asChild>
-            <button
-              type="button"
-              aria-label={t("kumiko.dialog.close")}
-              className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-            >
-              <X className="size-4" />
-            </button>
-          </DialogPrimitive.Close>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
+          {loading && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
+          {effectiveConfirmLabel}
+        </button>
+      </div>
+    </ModalShell>
   );
 }