@cosmicdrift/kumiko-renderer 0.224.2 → 0.226.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.224.2",
+  "version": "0.226.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.224.2",
-    "@cosmicdrift/kumiko-headless": "0.224.2",
+    "@cosmicdrift/kumiko-framework": "0.226.0",
+    "@cosmicdrift/kumiko-headless": "0.226.0",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -25,7 +25,7 @@
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "jsdom": "^29.1.1",
-    "@cosmicdrift/kumiko-locale-de": "0.224.2"
+    "@cosmicdrift/kumiko-locale-de": "0.226.0"
   },
   "repository": {
     "type": "git",

package/src/app/kumiko-screen.tsx

@@ -2021,13 +2021,38 @@ function ProjectionDetailBody({
   readonly translate?: Translate;
   readonly entityId?: string;
 }): ReactNode {
-  const { Banner, Text } = usePrimitives();
+  const { Banner, Text, Heading, Grid, GridCell, Tabs, StatusBadge } = usePrimitives();
   const t = useTranslation();
   const effectiveTranslate = translate ?? t;
   const nav = useNav();
   const idParam = screen.idParam ?? "id";
+  const isTabsMode = screen.layout.mode === "tabs";
+  const activeSection = useMemo(() => {
+    if (!isTabsMode) return undefined;
+    const tabParam = nav.searchParams["tab"];
+    return (
+      screen.layout.sections.find((section) => section.id === tabParam) ?? screen.layout.sections[0]
+    );
+  }, [isTabsMode, screen.layout.sections, nav.searchParams]);
+  // Tabs is an optional Core-Primitive (additive rollout) — same "skip +
+  // warn once" precedent as Drawer above, instead of crashing when a web
+  // app hasn't upgraded its createKumikoApp wiring yet.
+  useEffect(() => {
+    if (isTabsMode && Tabs === undefined) {
+      // biome-ignore lint/suspicious/noConsole: dev-warning for a setup error
+      console.warn(
+        `[kumiko] screen "${screen.id}" uses layout.mode: "tabs", but no <Tabs> primitive is registered — the tab strip will not render. createKumikoApp() from kumiko-renderer-web wires it automatically.`,
+      );
+    }
+  }, [isTabsMode, Tabs, screen.id]);
   const entity = useMemo(() => synthesizeProjectionDetailEntity(screen.layout), [screen.layout]);
-  const detailScreen = useMemo(() => synthesizeProjectionDetailScreen(screen), [screen]);
+  const detailScreen = useMemo(() => {
+    const source =
+      activeSection !== undefined
+        ? { ...screen, layout: { ...screen.layout, sections: [activeSection] } }
+        : screen;
+    return synthesizeProjectionDetailScreen(source);
+  }, [screen, activeSection]);
   const detailQuery = useQuery<Readonly<Record<string, unknown>>>(
     screen.query,
     entityId !== undefined ? { [idParam]: entityId } : {},
@@ -2221,17 +2246,74 @@ function ProjectionDetailBody({
     );
   }
   return (
-    <RenderEdit
-      screen={detailScreen}
-      entity={entity}
-      featureName={schema.featureName}
-      initial={record as FormValues}
-      entityId={entityId}
-      customSubmit={async () => ({ isSuccess: true, validationBlocked: false, data: undefined })}
-      {...(headerActions !== undefined && { actions: headerActions })}
-      {...(translate !== undefined && { translate })}
-      valueDisplay={screen.valueDisplay ?? "text"}
-    />
+    <>
+      {screen.header !== undefined && (
+        <>
+          <Heading variant="page" testId="kumiko-screen-projection-detail-title">
+            {String(record[screen.header.title] ?? "")}
+          </Heading>
+          {screen.header.subtitle !== undefined && (
+            <Text variant="muted" testId="kumiko-screen-projection-detail-subtitle">
+              {String(record[screen.header.subtitle] ?? "")}
+            </Text>
+          )}
+          {screen.header.status !== undefined &&
+            (StatusBadge !== undefined ? (
+              <StatusBadge
+                value={String(record[screen.header.status] ?? "")}
+                testId="kumiko-screen-projection-detail-status"
+              />
+            ) : (
+              <Text testId="kumiko-screen-projection-detail-status">
+                {String(record[screen.header.status] ?? "")}
+              </Text>
+            ))}
+        </>
+      )}
+      {screen.metrics !== undefined && screen.metrics.length > 0 && (
+        <Grid columns={screen.metrics.length} testId="kumiko-screen-projection-detail-metrics">
+          {screen.metrics.map((metric) => {
+            const labelKey = screen.fieldLabels?.[metric];
+            return (
+              <GridCell key={metric}>
+                <Text
+                  variant="small"
+                  testId={`kumiko-screen-projection-detail-metric-${metric}-label`}
+                >
+                  {labelKey !== undefined ? effectiveTranslate(labelKey) : metric}
+                </Text>
+                <Text testId={`kumiko-screen-projection-detail-metric-${metric}-value`}>
+                  {String(record[metric] ?? "")}
+                </Text>
+              </GridCell>
+            );
+          })}
+        </Grid>
+      )}
+      {isTabsMode && Tabs !== undefined && activeSection !== undefined && (
+        <Tabs
+          testId="kumiko-screen-projection-detail-tabs"
+          items={screen.layout.sections.map((section) => ({
+            id: section.id ?? "",
+            label: effectiveTranslate(section.title ?? section.id ?? ""),
+          }))}
+          activeId={activeSection.id ?? ""}
+          onSelect={(id) => nav.setSearchParams({ tab: id })}
+        />
+      )}
+      <RenderEdit
+        screen={detailScreen}
+        entity={entity}
+        featureName={schema.featureName}
+        initial={record as FormValues}
+        entityId={entityId}
+        customSubmit={async () => ({ isSuccess: true, validationBlocked: false, data: undefined })}
+        {...(headerActions !== undefined && { actions: headerActions })}
+        {...(translate !== undefined && { translate })}
+        {...(isTabsMode && { hideSectionTitles: true })}
+        valueDisplay={screen.valueDisplay ?? "text"}
+      />
+    </>
   );
 }
 // ---- actionForm (Tier 2.7d) ----

package/src/components/related-list-section.tsx

@@ -45,11 +45,13 @@ export function RelatedListSection({
   parentId,
   featureName,
   translate,
+  hideTitle,
 }: {
   readonly section: EditRelatedListSectionViewModel;
   readonly parentId: string;
   readonly featureName: string;
   readonly translate?: Translate;
+  readonly hideTitle?: boolean;
 }): ReactNode {
   const { Banner, Section } = usePrimitives();
   const t = useTranslation();
@@ -92,7 +94,7 @@ export function RelatedListSection({
       : undefined;
 
   return (
-    <Section title={section.title} testId={`related-list-${section.title}`}>
+    <Section title={hideTitle ? undefined : section.title} testId={`related-list-${section.title}`}>
       {rowsQuery.loading && rowsQuery.data === null ? (
         <Banner padded variant="loading" testId="related-list-loading">
           Loading…

package/src/components/render-edit-types.ts

@@ -132,6 +132,11 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
    *  unaffected either way, so this only changes forms that already have
    *  readOnly fields. */
   readonly valueDisplay?: "form" | "text";
+  /** Suppresses every section's own title (fields-section header, relatedList
+   *  Section title) — for a host that already renders the section label
+   *  itself elsewhere (e.g. a tab strip whose label duplicates it).
+   *  Omitting this prop keeps unchanged behavior. */
+  readonly hideSectionTitles?: boolean;
 };
 
 export type RenderEditAction = {

package/src/components/render-edit.tsx

@@ -221,6 +221,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
     disabled = false,
     hideActions,
     valueDisplay = "form",
+    hideSectionTitles,
   } = props;
   const { customSubmit } = props;
   // Translate-Fallback: wenn der Caller keine Translate-Fn übergibt,
@@ -1162,6 +1163,7 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
                 parentId={parentId}
                 featureName={featureName}
                 translate={translate}
+                hideTitle={hideSectionTitles}
               />
             );
           }
@@ -1169,7 +1171,11 @@ export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
           // Section-Header unterdrücken wenn er den Form-Titel der
           // Action-Bar 1:1 wiederholen würde (typisch bei Single-Section-
           // ActionForms, deren Section-Label = Screen-Titel ist).
-          const sectionTitle = section.title === formTitle ? undefined : section.title;
+          const sectionTitle = hideSectionTitles
+            ? undefined
+            : section.title === formTitle
+              ? undefined
+              : section.title;
           // Titellose Sections kollidieren sonst auf key/testId — Index-Fallback.
           const sectionKey = section.title ?? `section-${sectionIndex}`;
           const sectionEl = (

package/src/index.ts

@@ -198,7 +198,10 @@ export type {
   ProgressProps,
   RuntimeRenderer,
   SectionProps,
+  StatusBadgeProps,
+  StatusTone,
   StepBarProps,
+  TabsProps,
   TextProps,
   WizardStepGroupProps,
 } from "./primitives";

package/src/primitives.tsx

@@ -907,9 +907,12 @@ export type CardProps = {
 };
 
 /** Determinate progress bar (e.g. wizard step progress). `value` is a
- *  0..1 fraction, not a percentage — implementations scale for display. */
+ *  0..1 fraction, not a percentage — implementations scale for display.
+ *  `tone` controls the fill color; omitted defaults to "default" (backward
+ *  compatible with callers predating this field). */
 export type ProgressProps = {
   readonly value: number;
+  readonly tone?: "default" | "warn" | "danger";
   readonly testId?: string;
 };
 
@@ -941,6 +944,26 @@ export type WizardStepGroupProps = {
   readonly children: ReactNode;
 };
 
+/** Tab strip for a projectionDetail `layout.mode: "tabs"`. Renders only the
+ *  strip, not the content — the caller mounts the active section separately.
+ *  Keyboard/ARIA (role=tablist/tab, arrow-key navigation) is the
+ *  implementation's job. */
+export type TabsProps = {
+  readonly items: readonly { readonly id: string; readonly label: string }[];
+  readonly activeId: string;
+  readonly onSelect: (id: string) => void;
+  readonly testId?: string;
+};
+
+export type StatusTone = "ok" | "warn" | "bad" | "critical" | "muted";
+
+/** Status pill. `value` is the raw column value — tone-mapping is the app's job. */
+export type StatusBadgeProps = {
+  readonly value: string;
+  readonly tone?: StatusTone;
+  readonly testId?: string;
+};
+
 // ---- Core-Registry (Kumiko-eigene Primitives) ----
 
 export type CorePrimitives = {
@@ -982,6 +1005,14 @@ export type CorePrimitives = {
    *  CorePrimitives mocks in tests keep compiling — additive rollout of
    *  a new primitive shouldn't force every test double to grow a stub. */
   readonly WizardStepGroup?: ComponentType<WizardStepGroupProps>;
+  /** Optional (unlike the other Core-Primitives) so existing partial
+   *  CorePrimitives mocks in tests keep compiling — additive rollout of
+   *  a new primitive shouldn't force every test double to grow a stub. */
+  readonly Tabs?: ComponentType<TabsProps>;
+  /** Optional (unlike the other Core-Primitives) so existing partial
+   *  CorePrimitives mocks in tests keep compiling — additive rollout of
+   *  a new primitive shouldn't force every test double to grow a stub. */
+  readonly StatusBadge?: ComponentType<StatusBadgeProps>;
 };
 
 /** Offene Extension-Zone für App-eigene Primitives. Devs erweitern