@cosmicdrift/kumiko-renderer-web 0.67.0 → 0.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "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.67.0",
-    "@cosmicdrift/kumiko-headless": "0.67.0",
-    "@cosmicdrift/kumiko-renderer": "0.67.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.68.0",
+    "@cosmicdrift/kumiko-headless": "0.68.0",
+    "@cosmicdrift/kumiko-renderer": "0.68.0",
     "@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__/form-action-bar.test.tsx

@@ -9,7 +9,7 @@ import type {
   EntityEditScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import { DispatcherProvider, RenderEdit } from "@cosmicdrift/kumiko-renderer";
-import { defaultPrimitives } from "../primitives";
+import { BareFormProvider, defaultPrimitives } from "../primitives";
 import { createMockDispatcher, render, screen } from "./test-utils";
 
 const { Form, Section, Button } = defaultPrimitives;
@@ -55,11 +55,12 @@ describe("Form = eine Card, Sections als innere Abschnitte", () => {
         </Section>
       </Form>,
     );
-    // Inner-Region: keine eigene bg-card; die Divider zwischen Sections
-    // macht der divide-y-Wrapper, nicht die Section selbst.
+    // Inner-Region: keine eigene bg-card; beide Sections sind Geschwister im
+    // selben Body-Wrapper (der die Trennlinie ZWISCHEN ihnen per CSS macht).
     const s1 = screen.getByTestId("s1");
+    const s2 = screen.getByTestId("s2");
     expect(s1.className).not.toContain("bg-card");
-    expect(s1.closest(".divide-y")).toBeTruthy();
+    expect(s1.parentElement).toBe(s2.parentElement);
     // Das Form wrappt alles in GENAU eine Card-Fläche.
     const card = screen.getByTestId("f").querySelector(".bg-card");
     expect(card).toBeTruthy();
@@ -69,6 +70,21 @@ describe("Form = eine Card, Sections als innere Abschnitte", () => {
     expect(card?.querySelector("[data-testid='f-actions']")).toBeTruthy();
   });
 
+  test("BareFormProvider: Form rendert nackt (keine eigene Card) — gegen Card-in-Card im AuthCard", () => {
+    render(
+      <BareFormProvider>
+        <Form onSubmit={() => {}} testId="bare">
+          <div>a</div>
+        </Form>
+      </BareFormProvider>,
+    );
+    const form = screen.getByTestId("bare");
+    expect(form.tagName).toBe("FORM");
+    expect(form.className).not.toContain("max-w-3xl");
+    expect(form.querySelector(".bg-card")).toBeNull();
+    expect(form.className).toContain("gap-4");
+  });
+
   test("Section standalone (außerhalb Form) bleibt eine eigene Card", () => {
     render(
       <Section testId="solo" title="Solo">

package/src/__tests__/nav-tree.test.tsx

@@ -207,6 +207,23 @@ describe("NavTree", () => {
     expect(container.querySelectorAll("svg").length).toBe(1);
   });
 
+  test("layers + building (money-horse Kredit-Gruppen/Mandanten) lösen auf ein Icon auf", () => {
+    const schema = {
+      featureName: "showcase",
+      entities: {},
+      screens: [
+        { id: "groups", type: "entityList", entity: "x", columns: [] },
+        { id: "tenants", type: "entityList", entity: "x", columns: [] },
+      ],
+      navs: [
+        { id: "groups", label: "Gruppen", screen: "groups", order: 10, icon: "layers" },
+        { id: "tenants", label: "Mandanten", screen: "tenants", order: 20, icon: "building" },
+      ],
+    } as FeatureSchema;
+    const { container } = render(<NavTree schema={schema} />);
+    expect(container.querySelectorAll("svg").length).toBe(2);
+  });
+
   test("unbekannter icon-Key fällt sauber auf den Dot zurück (kein svg)", () => {
     const schema = {
       featureName: "showcase",

package/src/index.ts

@@ -122,7 +122,7 @@ export { filterByAccess, resolveDefaultId, WorkspaceShell } from "./layout/works
 export type { WorkspaceSwitcherProps } from "./layout/workspace-switcher";
 export { WorkspaceSwitcher } from "./layout/workspace-switcher";
 export { cn } from "./lib/cn";
-export { defaultPrimitives } from "./primitives";
+export { BareFormProvider, defaultPrimitives } from "./primitives";
 export type { ActionMenuProps, MenuItemDef } from "./primitives/action-menu";
 export { ActionMenu } from "./primitives/action-menu";
 export {
@@ -145,3 +145,4 @@ export {
   lightTokens,
   useBrowserTokensApi,
 } from "./tokens";
+export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";

package/src/layout/nav-tree.tsx

@@ -26,6 +26,7 @@ import {
 import {
   BarChart3,
   Bell,
+  Building,
   Calculator,
   CalendarDays,
   ChevronDown,
@@ -36,6 +37,7 @@ import {
   Folder,
   Gauge,
   Home,
+  Layers,
   LayoutDashboard,
   LineChart,
   List,
@@ -82,6 +84,8 @@ const NAV_ICONS: Readonly<Record<string, typeof Folder>> = {
   gauge: Gauge,
   list: List,
   table: Table,
+  layers: Layers,
+  building: Building,
   calculator: Calculator,
   wallet: Wallet,
   coins: Coins,

package/src/primitives/index.tsx

@@ -1292,6 +1292,16 @@ function DataTableCell({
 // eigene Card.
 const InsideFormContext = createContext(false);
 
+// Eingebettete Forms (z.B. im AuthCard) tragen ihre Card-Fläche schon vom
+// Container — der self-cardende DefaultForm würde sonst eine Card-in-Card
+// erzeugen. BareFormProvider schaltet DefaultForm auf ein nacktes <form>
+// (gestapelte Felder, kein eigener Rahmen/max-width).
+const BareFormContext = createContext(false);
+
+export function BareFormProvider({ children }: { children: ReactNode }): ReactNode {
+  return <BareFormContext.Provider value={true}>{children}</BareFormContext.Provider>;
+}
+
 function DefaultForm({
   onSubmit,
   children,
@@ -1300,6 +1310,26 @@ function DefaultForm({
   actions,
   testId,
 }: FormProps): ReactNode {
+  // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
+  // der Container trägt Card/Titel selbst, sonst Card-in-Card.
+  if (useContext(BareFormContext)) {
+    return (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onSubmit(e);
+        }}
+        data-testid={testId}
+        className="flex flex-col gap-4"
+      >
+        <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
+        {actions !== undefined && (
+          <div className="flex items-center justify-end gap-2">{actions}</div>
+        )}
+      </form>
+    );
+  }
+
   // shadcn-Form-Muster: das Formular ist EINE Card — Titel als Card-Header
   // OHNE Trennlinie darunter (Titel fließt in die erste Section). Sections
   // sind divide-y-getrennt (Linien nur ZWISCHEN ihnen). Action-Footer mit
@@ -1336,7 +1366,17 @@ function DefaultForm({
               )}
             </div>
           )}
-          <div className="divide-y">
+          <div
+            className={cn(
+              "flex flex-col",
+              // Section-Children (Auto-UI-Edit) trennt eine Linie ZWISCHEN
+              // ihnen — sie padden sich selbst. Flache Felder (Custom-Screens)
+              // kriegen Padding + Rhythmus, keine Linie zwischen jedem Feld.
+              "[&>section:not(:first-child)]:border-t",
+              "[&>:not(section)]:px-6 [&>:not(section)]:py-3",
+              "[&>:not(section):first-child]:pt-6 [&>:not(section):last-child]:pb-6",
+            )}
+          >
             <InsideFormContext.Provider value={true}>{children}</InsideFormContext.Provider>
           </div>
           {actions !== undefined && (