@cosmicdrift/kumiko-renderer 0.149.1 → 0.150.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.149.1",
+  "version": "0.150.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.149.1",
-    "@cosmicdrift/kumiko-headless": "0.149.1",
+    "@cosmicdrift/kumiko-framework": "0.150.0",
+    "@cosmicdrift/kumiko-headless": "0.150.0",
     "react": "^19.2.6"
   },
   "devDependencies": {

package/src/__tests__/qn.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, test } from "bun:test";
+import { toKebab as serverToKebab } from "@cosmicdrift/kumiko-framework/engine";
 import { lastSegment, toKebab } from "../app/qn";
 
 describe("lastSegment", () => {
@@ -52,4 +53,31 @@ describe("toKebab", () => {
   test("preserves colon segments", () => {
     expect(toKebab("driverModel:list")).toBe("driver-model:list");
   });
+
+  test("consecutive uppercase (acronym boundary)", () => {
+    expect(toKebab("SSEBroadcast")).toBe("sse-broadcast");
+  });
+
+  test("dot separators become dashes", () => {
+    expect(toKebab("billing-period.create")).toBe("billing-period-create");
+  });
+
+  // Drift guard: this file is a byte-identical copy of the server's toKebab
+  // (packages/framework/src/engine/qualified-name.ts) kept in sync only by
+  // convention/comment, not by import (avoids pulling server deps into the
+  // browser bundle). Table-driven against the server's own doc examples so a
+  // future edit to either copy that breaks parity fails loudly here.
+  test("matches the server implementation for its documented examples", () => {
+    const cases = [
+      "task.create",
+      "ticketAssigned",
+      "billing-period.create",
+      "monthlyReport",
+      "SSEBroadcast",
+      "driverModel:list",
+    ];
+    for (const input of cases) {
+      expect(toKebab(input)).toBe(serverToKebab(input));
+    }
+  });
 });

package/src/app/kumiko-screen.tsx

@@ -6,6 +6,7 @@ import type {
   EntityDefinition,
   EntityEditScreenDefinition,
   EntityListScreenDefinition,
+  ProjectionDetailScreenDefinition,
   ProjectionListScreenDefinition,
   RowAction,
   RowActionNavigate,
@@ -38,6 +39,10 @@ import { useCustomScreenComponent } from "./custom-screens";
 import { useDashboardBody } from "./dashboard-body";
 import type { FeatureSchema } from "./feature-schema";
 import { useNav } from "./nav";
+import {
+  synthesizeProjectionDetailEntity,
+  synthesizeProjectionDetailScreen,
+} from "./projection-detail-shim";
 import { synthesizeProjectionEntity, synthesizeProjectionScreen } from "./projection-list-shim";
 import { lastSegment, toKebab } from "./qn";
 import { dispatcherErrorText, WriteFailedError } from "./write-failed-error";
@@ -69,10 +74,11 @@ export type KumikoScreenProps = {
   readonly schema: FeatureSchema;
   readonly qn: string;
   readonly translate?: Translate;
-  // Optional entity-id. Only meaningful for entityEdit screens — when
-  // set, the edit screen loads the existing record via the detail
-  // query and submits an update command (`write:<entity>:update`)
-  // instead of a create. For entityList/custom screens it's ignored.
+  // Optional entity-id / row-id. Meaningful for entityEdit screens — when
+  // set, the edit screen loads the existing record via the detail query and
+  // submits an update command (`write:<entity>:update`) instead of a create.
+  // Also required for projectionDetail screens (which row to fetch — no
+  // create mode exists there). For entityList/custom screens it's ignored.
   readonly entityId?: string;
   // Fires when the user clicks a row on an entityList screen. The
   // second argument is the screen's entity name, threaded through so
@@ -152,6 +158,15 @@ export function KumikoScreen({
           {...(onRowClick !== undefined && { onRowClick })}
         />
       );
+    case "projectionDetail":
+      return (
+        <ProjectionDetailBody
+          schema={schema}
+          screen={screen}
+          translate={translate}
+          {...(entityId !== undefined && { entityId })}
+        />
+      );
     case "dashboard":
       return <DashboardScreenBody screen={screen} translate={translate} />;
     case "actionForm":
@@ -1239,6 +1254,85 @@ function ProjectionListBody({
   );
 }
 
+// Projection-Detail-Body — read-only single-row inspector über eine explizite
+// Query statt einer Entity (siehe projection-detail-shim.ts für die Schulden-
+// Doku). Fetcht selbst über `screen.query` + `idParam` (analog zu
+// EntityEditUpdateBody, das die Query-QN aus der Entity-Convention ableitet —
+// hier ist die QN Author-explizit, wie bei ProjectionListBody). Rendert über
+// RenderEdit MIT customSubmit-No-Op statt writeCommand: hasEditableSection()
+// blendet den Save-Button aus (jedes Feld ist readOnly), und selbst ein
+// natives Form-Submit (Enter-Keypress) würde ohne customSubmit gegen
+// controller.submit() ohne submit-config throwen — der No-Op macht diesen
+// Pfad harmlos statt ihn dem Zufall zu überlassen.
+function ProjectionDetailBody({
+  schema,
+  screen,
+  translate,
+  entityId,
+}: {
+  readonly schema: FeatureSchema;
+  readonly screen: ProjectionDetailScreenDefinition;
+  readonly translate?: Translate;
+  readonly entityId?: string;
+}): ReactNode {
+  const { Banner, Text } = usePrimitives();
+  const nav = useNav();
+  const idParam = screen.idParam ?? "id";
+  const entity = useMemo(() => synthesizeProjectionDetailEntity(screen.layout), [screen.layout]);
+  const detailScreen = useMemo(() => synthesizeProjectionDetailScreen(screen), [screen]);
+  const detailQuery = useQuery<Readonly<Record<string, unknown>>>(
+    screen.query,
+    entityId !== undefined ? { [idParam]: entityId } : {},
+  );
+
+  const navigateToList = useCallback(() => {
+    if (screen.listScreenId === undefined) return;
+    nav.navigate({ screenId: screen.listScreenId });
+  }, [nav, screen.listScreenId]);
+
+  if (entityId === undefined) {
+    return (
+      <Banner padded variant="error" testId="kumiko-screen-projection-detail-missing-id">
+        Screen <Text variant="code">{screen.id}</Text> (projectionDetail) needs a row id in the path
+        — open it from a row action.
+      </Banner>
+    );
+  }
+  if (detailQuery.loading && detailQuery.data === null) {
+    return (
+      <Banner padded variant="loading" testId="kumiko-screen-loading">
+        Loading…
+      </Banner>
+    );
+  }
+  if (detailQuery.error) {
+    return (
+      <Banner padded variant="error" testId="kumiko-screen-error">
+        {detailQuery.error.i18nKey}
+      </Banner>
+    );
+  }
+  const record = detailQuery.data;
+  if (!record) {
+    return (
+      <Banner padded variant="error" testId="kumiko-screen-record-missing">
+        Record <Text variant="code">{entityId}</Text> not found.
+      </Banner>
+    );
+  }
+  return (
+    <RenderEdit
+      screen={detailScreen}
+      entity={entity}
+      featureName={schema.featureName}
+      initial={record as FormValues}
+      entityId={entityId}
+      customSubmit={async () => ({ isSuccess: true, validationBlocked: false, data: undefined })}
+      onCancel={screen.listScreenId !== undefined ? navigateToList : undefined}
+      {...(translate !== undefined && { translate })}
+    />
+  );
+}
 // ---- actionForm (Tier 2.7d) ----
 
 // Action-Form-Body — non-CRUD Write-Handler-driven Form. Re-uses

package/src/app/projection-detail-shim.ts

@@ -0,0 +1,70 @@
+// Shim für ProjectionDetail-Renderer (analog zu projection-list-shim.ts /
+// config-edit-shim.ts).
+//
+// RenderEdit verlangt ein `entity: EntityDefinition` + ein
+// `screen: EntityEditScreenDefinition`-Pair, nutzt davon aber nur
+// `entity.fields` (Feld-Typ für den Input-Renderer) und `screen.layout`
+// (welche Felder in welchen Sections). Ein projectionDetail-Screen ist
+// query-getrieben und hat KEINE Entity — die zwei Helper hier shapen den
+// Input ad-hoc um, damit RenderEdit reused werden kann.
+//
+// Der strukturelle Read-Only-Beweis liegt in synthesizeProjectionDetailScreen:
+// JEDES Feld wird hart auf readOnly:true gesetzt (nicht nur was der Author im
+// Layout gesetzt hat) — hasEditableSection() liest genau dieses Flag und
+// blendet den Save-Button aus, wenn kein Feld editierbar ist. Der Author kann
+// diese Garantie nicht versehentlich umgehen.
+//
+// Selbe Schulden-Reservation wie bei den anderen Shims: greift RenderEdit
+// künftig auf weitere EntityDefinition-Felder (transitions, idType) zu, oder
+// cross-referenziert ein Boot-Validator die schema.entities-Map, brechen die
+// Type-Lies hier silent — dann ist Zeit für eine echte RenderProjectionDetail-
+// Komponente.
+
+import type {
+  EditLayout,
+  EntityDefinition,
+  EntityEditScreenDefinition,
+  ProjectionDetailScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { isExtensionEditSection, normalizeEditField } from "@cosmicdrift/kumiko-framework/ui-types";
+
+const PROJECTION_DETAIL_PSEUDO_ENTITY = "__projection-detail__";
+
+/** Minimale EntityDefinition aus den Layout-Feldern: jedes Feld ein Text-
+ *  Feld — computeEditViewModel liest nur `fields[<f>].type`, Text reicht für
+ *  eine reine Anzeige (kein Select/Number-spezifisches Rendering nötig). */
+export function synthesizeProjectionDetailEntity(layout: EditLayout): EntityDefinition {
+  const fields: Record<string, { type: "text" }> = {};
+  for (const section of layout.sections) {
+    if (isExtensionEditSection(section)) continue; // rejected at boot, defensive here
+    for (const spec of section.fields) {
+      fields[normalizeEditField(spec).field] = { type: "text" };
+    }
+  }
+  return { fields } as unknown as EntityDefinition;
+}
+
+/** Wandelt ein ProjectionDetailScreenDefinition in die EntityEditScreen-Shape
+ *  die RenderEdit erwartet — mit jedem Feld hart auf readOnly:true erzwungen. */
+export function synthesizeProjectionDetailScreen(
+  screen: ProjectionDetailScreenDefinition,
+): EntityEditScreenDefinition {
+  const sections = screen.layout.sections.map((section) => {
+    if (isExtensionEditSection(section)) return section; // rejected at boot, defensive here
+    return {
+      ...section,
+      fields: section.fields.map((spec) => ({ ...normalizeEditField(spec), readOnly: true })),
+    };
+  });
+  return {
+    id: screen.id,
+    type: "entityEdit",
+    entity: PROJECTION_DETAIL_PSEUDO_ENTITY,
+    layout: { sections },
+    allowCreate: false,
+    allowDelete: false,
+    ...(screen.fieldLabels !== undefined && { fieldLabels: screen.fieldLabels }),
+    ...(screen.slots !== undefined && { slots: screen.slots }),
+    ...(screen.access !== undefined && { access: screen.access }),
+  };
+}