@cosmicdrift/kumiko-renderer 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.14.0",
-    "@cosmicdrift/kumiko-headless": "0.14.0",
+    "@cosmicdrift/kumiko-framework": "0.21.0",
+    "@cosmicdrift/kumiko-headless": "0.21.0",
     "react": "^19.2.6"
   },
   "devDependencies": {

package/src/app/extension-sections.tsx

@@ -0,0 +1,62 @@
+// Extension-Section-Components-Map: client-side Lookup für entityEdit
+// sections vom Type `extension`. RenderEdit schaut hier nach dem
+// `__component`-Namen aus section.component und mountet die passende
+// Component mit { entityName, entityId } — die Bundled-Feature-Component
+// lädt + persistiert dann ihre eigenen Daten (z.B. custom-fields).
+//
+// Mounting analog zu CustomScreensProvider — createKumikoApp im
+// renderer-web sammelt alle clientFeatures.extensionSectionComponents und
+// mountet den Provider; Tests die einzelne Sections prüfen wollen
+// mounten den Provider direkt.
+
+import type { PlatformComponent } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ComponentType, createContext, type ReactNode, useContext } from "react";
+
+/** Extrahiert den `__component`-Namen aus einer PlatformComponent. Liest
+ *  react- und native-Branch (die App-Author registriert beide unter dem
+ *  gleichen Namen); returnt den ersten gefundenen string. Pure narrowing
+ *  via `in` — kein cast, kein assertion. */
+export function extensionSectionName(component: PlatformComponent): string | undefined {
+  for (const branch of [component.react, component.native]) {
+    if (branch !== null && typeof branch === "object" && "__component" in branch) {
+      const candidate = branch.__component;
+      if (typeof candidate === "string") return candidate;
+    }
+  }
+  return undefined;
+}
+
+export type ExtensionSectionProps = {
+  readonly entityName: string;
+  readonly entityId: string | null;
+};
+
+export type ExtensionSectionComponent = ComponentType<ExtensionSectionProps>;
+
+export type ExtensionSectionsMap = Readonly<Record<string, ExtensionSectionComponent>>;
+
+const ExtensionSectionsContext = createContext<ExtensionSectionsMap | undefined>(undefined);
+
+export type ExtensionSectionsProviderProps = {
+  readonly children: ReactNode;
+  readonly value: ExtensionSectionsMap;
+};
+
+export function ExtensionSectionsProvider({
+  children,
+  value,
+}: ExtensionSectionsProviderProps): ReactNode {
+  return (
+    <ExtensionSectionsContext.Provider value={value}>{children}</ExtensionSectionsContext.Provider>
+  );
+}
+
+/** Schaut die Component für einen extension-section-Namen nach. Returnt
+ *  undefined wenn weder Provider gemounted noch der Name in der Map
+ *  registriert ist — der Caller (RenderEdit) zeigt dann seinen
+ *  Placeholder-Banner. */
+export function useExtensionSectionComponent(name: string): ExtensionSectionComponent | undefined {
+  const map = useContext(ExtensionSectionsContext);
+  if (map === undefined) return undefined;
+  return map[name];
+}

package/src/components/render-edit.tsx

@@ -2,9 +2,10 @@ import type {
   EntityDefinition,
   EntityEditScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
-import { normalizeEditField } from "@cosmicdrift/kumiko-framework/ui-types";
+import { isExtensionEditSection, normalizeEditField } from "@cosmicdrift/kumiko-framework/ui-types";
 import type {
   DispatcherError,
+  EditExtensionSectionViewModel,
   EditFieldViewModel,
   EditSectionViewModel,
   FieldConditions,
@@ -17,6 +18,7 @@ import type {
 import { computeEditViewModel } from "@cosmicdrift/kumiko-headless";
 import { type ReactNode, useMemo, useState } from "react";
 import type { z } from "zod";
+import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections";
 import { useForm } from "../hooks/use-form";
 import { useTranslation } from "../i18n";
 import { usePrimitives } from "../primitives";
@@ -67,6 +69,7 @@ function deriveFormFields<TValues extends FormValues, TCtx>(
 ): Record<string, FieldConditions<TValues, TCtx>> {
   const out: Record<string, FieldConditions<TValues, TCtx>> = {};
   for (const section of screen.layout.sections) {
+    if (isExtensionEditSection(section)) continue;
     for (const spec of section.fields) {
       const normalized = normalizeEditField(spec);
       out[normalized.field] = {
@@ -85,6 +88,48 @@ function deriveFormFields<TValues extends FormValues, TCtx>(
   return out;
 }
 
+// Resolves an extension-section's `{ react: { __component: "X" } }` marker
+// to a registered React component via ExtensionSectionsProvider (filled in
+// createKumikoApp from clientFeatures.extensionSectionComponents) and
+// mounts it with the host entity name + id. Hook lives in its own
+// component so we don't call `use*` inside vm.sections.map (rules-of-
+// hooks would punish reordering sections between renders).
+function ExtensionSectionMount({
+  section,
+  entityName,
+  entityId,
+}: {
+  readonly section: EditExtensionSectionViewModel;
+  readonly entityName: string;
+  readonly entityId: string | null;
+}): ReactNode {
+  const { Banner, Section, Text } = usePrimitives();
+  const name = extensionSectionName(section.component);
+  const Component = useExtensionSectionComponent(name ?? "");
+  if (Component === undefined) {
+    return (
+      <Section
+        key={section.title}
+        title={section.title}
+        testId={`section-extension-${section.title}`}
+      >
+        <Banner variant="info" testId={`section-extension-placeholder-${section.title}`}>
+          <Text>
+            Extension section component{" "}
+            <Text variant="code">{name ?? "(no __component name)"}</Text> not registered in
+            clientFeatures.extensionSectionComponents.
+          </Text>
+        </Banner>
+      </Section>
+    );
+  }
+  return (
+    <Section title={section.title} testId={`section-extension-${section.title}`}>
+      <Component entityName={entityName} entityId={entityId} />
+    </Section>
+  );
+}
+
 export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   props: RenderEditProps<TValues, TCtx>,
 ): ReactNode {
@@ -258,29 +303,41 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
       actions={formActions}
       testId="render-edit-form"
     >
-      {vm.sections.map((section: EditSectionViewModel) => (
-        <Section key={section.title} title={section.title} testId={`section-${section.title}`}>
-          <Grid columns={section.columns}>
-            {section.fields.map((field: EditFieldViewModel) => (
-              <GridCellForField
-                key={field.field}
-                field={field}
-                columns={section.columns}
-                issues={snapshot.errors[field.field]}
-                onChange={(v) => {
-                  (controller.setField as (k: string, v: unknown) => void)(field.field, v);
-                }}
-                GridCell={GridCell}
-                featureName={featureName}
-                {...(fieldAppendix !== undefined && {
-                  labelAppendix: fieldAppendix(field.field),
-                  fieldAppendix: fieldAppendix(field.field),
-                })}
-              />
-            ))}
-          </Grid>
-        </Section>
-      ))}
+      {vm.sections.map((section: EditSectionViewModel) => {
+        if (section.kind === "extension") {
+          return (
+            <ExtensionSectionMount
+              key={section.title}
+              section={section}
+              entityName={vm.entityName}
+              entityId={vm.id}
+            />
+          );
+        }
+        return (
+          <Section key={section.title} title={section.title} testId={`section-${section.title}`}>
+            <Grid columns={section.columns}>
+              {section.fields.map((field: EditFieldViewModel) => (
+                <GridCellForField
+                  key={field.field}
+                  field={field}
+                  columns={section.columns}
+                  issues={snapshot.errors[field.field]}
+                  onChange={(v) => {
+                    (controller.setField as (k: string, v: unknown) => void)(field.field, v);
+                  }}
+                  GridCell={GridCell}
+                  featureName={featureName}
+                  {...(fieldAppendix !== undefined && {
+                    labelAppendix: fieldAppendix(field.field),
+                    fieldAppendix: fieldAppendix(field.field),
+                  })}
+                />
+              ))}
+            </Grid>
+          </Section>
+        );
+      })}
       {formError !== null && (
         <Banner
           variant="error"

package/src/index.ts

@@ -18,6 +18,17 @@ export type {
 export { ColumnRenderersProvider, useColumnRenderer } from "./app/column-renderers";
 export type { CustomScreensMap, CustomScreensProviderProps } from "./app/custom-screens";
 export { CustomScreensProvider, useCustomScreenComponent } from "./app/custom-screens";
+export type {
+  ExtensionSectionComponent,
+  ExtensionSectionProps,
+  ExtensionSectionsMap,
+  ExtensionSectionsProviderProps,
+} from "./app/extension-sections";
+export {
+  ExtensionSectionsProvider,
+  extensionSectionName,
+  useExtensionSectionComponent,
+} from "./app/extension-sections";
 export type { AppSchema, FeatureSchema, WorkspaceSchema } from "./app/feature-schema";
 export { isAppSchema, toAppSchema } from "./app/feature-schema";
 export type { KumikoScreenProps } from "./app/kumiko-screen";