@cosmicdrift/kumiko-renderer-web 0.21.1 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.21.1",
+  "version": "0.22.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>",

package/src/__tests__/render-edit.test.tsx

@@ -4,7 +4,11 @@ import type {
   EntityEditScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher, SubmitResult } from "@cosmicdrift/kumiko-headless";
-import { DispatcherProvider, RenderEdit } from "@cosmicdrift/kumiko-renderer";
+import {
+  DispatcherProvider,
+  ExtensionSectionsProvider,
+  RenderEdit,
+} from "@cosmicdrift/kumiko-renderer";
 import { act, createMockDispatcher, fireEvent, render, screen } from "./test-utils";
 
 const orderEntity = {
@@ -174,4 +178,92 @@ describe("RenderEdit", () => {
     const actionsBar = screen.getByTestId("render-edit-form-actions");
     expect(actionsBar.textContent).toContain("orders:screen:order-edit");
   });
+
+  test("extension section renders the registered Component with entityName + entityId", () => {
+    const screenDef: EntityEditScreenDefinition = {
+      id: "orders:screen:order-edit",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        sections: [
+          {
+            title: "Basics",
+            columns: 2,
+            fields: [{ field: "title", span: 2 }],
+          },
+          {
+            kind: "extension",
+            title: "Custom Fields",
+            component: { react: { __component: "MyCustomFieldsForm" } },
+          },
+        ],
+      },
+    };
+    const MyCustomFieldsForm = ({
+      entityName,
+      entityId,
+    }: {
+      entityName: string;
+      entityId: string | null;
+    }) => (
+      <div data-testid="my-custom-fields-form">
+        {entityName}:{entityId ?? "(create)"}
+      </div>
+    );
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{ MyCustomFieldsForm }}>
+          <RenderEdit<TestValues>
+            screen={screenDef}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0, isUrgent: false, id: "row-42" } as TestValues}
+            writeCommand="order:update"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    expect(screen.getByTestId("section-extension-Custom Fields")).toBeTruthy();
+    const mounted = screen.getByTestId("my-custom-fields-form");
+    expect(mounted.textContent).toBe("order:row-42");
+  });
+
+  test("extension section without registered component shows the placeholder banner", () => {
+    const screenDef: EntityEditScreenDefinition = {
+      id: "orders:screen:order-edit",
+      type: "entityEdit",
+      entity: "order",
+      layout: {
+        sections: [
+          {
+            title: "Basics",
+            columns: 1,
+            fields: [{ field: "title", span: 1 }],
+          },
+          {
+            kind: "extension",
+            title: "Custom Fields",
+            component: { react: { __component: "UnregisteredComp" } },
+          },
+        ],
+      },
+    };
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <ExtensionSectionsProvider value={{}}>
+          <RenderEdit<TestValues>
+            screen={screenDef}
+            entity={orderEntity}
+            featureName="orders"
+            initial={{ title: "", count: 0, isUrgent: false }}
+            writeCommand="order:create"
+          />
+        </ExtensionSectionsProvider>
+      </DispatcherProvider>,
+    );
+
+    const placeholder = screen.getByTestId("section-extension-placeholder-Custom Fields");
+    expect(placeholder.textContent).toContain("UnregisteredComp");
+  });
 });

package/src/app/client-plugin.tsx

@@ -14,7 +14,11 @@ import type {
   TreeActionDef,
   TreeChildrenSubscribe,
 } from "@cosmicdrift/kumiko-framework/engine";
-import type { ColumnRendererComponent, TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+import type {
+  ColumnRendererComponent,
+  ExtensionSectionComponent,
+  TranslationsByLocale,
+} from "@cosmicdrift/kumiko-renderer";
 import type { ComponentType, ReactNode } from "react";
 
 export type ClientFeatureDefinition = {
@@ -50,6 +54,13 @@ export type ClientFeatureDefinition = {
    *  echte JSX-Renderer leben im Client-Bundle. Last-Wins bei Key-
    *  Kollision über mehrere Features. */
   readonly columnRenderers?: Readonly<Record<string, ColumnRendererComponent>>;
+  /** Extension-Section-Components — Map `__component`-name → React-
+   *  Component. Schema deklariert eine entityEdit-Section mit
+   *  `kind: "extension"` + `component: { react: { __component: "X" } }`;
+   *  RenderEdit zieht den Component hier raus und mountet ihn mit
+   *  `{ entityName, entityId }`. Pattern wie columnRenderers — Last-Wins
+   *  bei Key-Kollision über mehrere Features. */
+  readonly extensionSectionComponents?: Readonly<Record<string, ExtensionSectionComponent>>;
   /** Tree-Provider für `r.workspace({ navigation: "tree" })`-Workspaces
    *  (Visual-Tree). Wird beim Mount des Tree-Workspaces mit ctx aufgerufen,
    *  emittiert TreeNode[] die in der Sidebar gerendert werden. Closure-

package/src/app/create-app.tsx

@@ -12,6 +12,8 @@ import {
   ColumnRenderersProvider,
   CustomScreensProvider,
   DispatcherProvider,
+  type ExtensionSectionComponent,
+  ExtensionSectionsProvider,
   type FeatureSchema,
   KumikoScreen,
   kumikoDefaultTranslations,
@@ -194,6 +196,22 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
       columnRenderers[key] = value;
     }
   }
+  // Extension-Section-Components — same Last-Wins + Warn-Semantik wie
+  // columnRenderers. Mountet sich am ExtensionSectionsProvider; RenderEdit
+  // löst die Component aus dem `__component`-Marker der section.
+  const extensionSectionComponents: Record<string, ExtensionSectionComponent> = {};
+  for (const f of clientFeatures) {
+    if (f.extensionSectionComponents === undefined) continue;
+    for (const [key, value] of Object.entries(f.extensionSectionComponents)) {
+      if (extensionSectionComponents[key] !== undefined) {
+        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
+        console.warn(
+          `[kumiko] extensionSectionComponent "${key}" defined by multiple clientFeatures — last definition (from "${f.name}") wins.`,
+        );
+      }
+      extensionSectionComponents[key] = value;
+    }
+  }
 
   // Tree-Provider-Map aggregieren — keyed by clientFeature.name (matches
   // server-side FeatureDefinition.name). Mehrere clientFeatures mit
@@ -256,13 +274,15 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
             <LiveEventsProvider value={liveEvents}>
               <CustomScreensProvider value={customScreens}>
                 <ColumnRenderersProvider value={columnRenderers}>
-                  <TreeProvidersProvider value={treeProviders} entities={treeEntities}>
-                    <ResolversProvider resolvers={resolvers}>
-                      <ToastProvider>
-                        {stackWrappers(providers, stackWrappers(gates, screenNode))}
-                      </ToastProvider>
-                    </ResolversProvider>
-                  </TreeProvidersProvider>
+                  <ExtensionSectionsProvider value={extensionSectionComponents}>
+                    <TreeProvidersProvider value={treeProviders} entities={treeEntities}>
+                      <ResolversProvider resolvers={resolvers}>
+                        <ToastProvider>
+                          {stackWrappers(providers, stackWrappers(gates, screenNode))}
+                        </ToastProvider>
+                      </ResolversProvider>
+                    </TreeProvidersProvider>
+                  </ExtensionSectionsProvider>
                 </ColumnRenderersProvider>
               </CustomScreensProvider>
             </LiveEventsProvider>