@cosmicdrift/kumiko-renderer 0.389.0 → 0.390.0

package/dist/app/projection-detail-body.js

@@ -1,132 +1,24 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isWriteFormEditSection } from "@cosmicdrift/kumiko-framework/ui-types";
-import { resolveActionIcon } from "@cosmicdrift/kumiko-types/action-icon";
-import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { useState } from "react";
 import { RenderEdit } from "../components/render-edit.js";
-import { resolveRecordTitle } from "../components/render-edit-helpers.js";
 import { useOptionalDispatcher } from "../context/dispatcher-context.js";
 import { useUserRoles } from "../context/user-roles-context.js";
-import { rendererWarn } from "../dev-console.js";
-import { isSafeHref } from "../headless/index.js";
-import { useQuery } from "../hooks/use-query.js";
 import { useTranslation } from "../i18n.js";
-import { requestLeave } from "../leave-guard.js";
 import { usePageHeaderCompact, usePageHeaderSlotAvailable } from "../page-header-slot.js";
-import { statusToneForOptionTone, statusToneForValue, usePrimitives, } from "../primitives.js";
+import { usePrimitives } from "../primitives.js";
 import { screenFillsHeight } from "../screen-fills-height.js";
-import { DrawerHost, useDrawerAction } from "./action-form-body.js";
+import { useDrawerAction } from "./action-form-body.js";
 import { useAppFeatures } from "./app-features-context.js";
 import { useClientActionRuntime } from "./client-actions.js";
-import { ErrorReference } from "./error-reference.js";
-import { HeaderActionsBar } from "./header-actions-bar.js";
 import { useNav } from "./nav.js";
-import { synthesizeProjectionDetailEntity, synthesizeProjectionDetailScreen, } from "./projection-detail-shim.js";
-import { lastSegment } from "./qn.js";
-import { QueryErrorBanner, QueryLoadingBanner } from "./query-state-banners.js";
-import { navigateToReturnOr, navigateWithReturnTo, useReturnHost, useReturnTarget, } from "./return-to.js";
-import { buildRecordActions, refetchAfterWrite, runProjectionRowNavigate } from "./row-actions.js";
-import { findEditScreenFor, navigateTargetAllows } from "./screen-access.js";
-import { findEntityListScreen, navigateAfterRedirect, RecordNotFoundState, } from "./screen-shared.js";
-const HEADER_CARD_DEFAULT_WIDTH = "4xl";
-// Reuses runProjectionRowNavigate (row-actions.ts) instead of re-deriving
-// navigate execution — a metric click has the same entity/screen/params
-// shape as a RowActionNavigate, minus the fields (id, label, style) that
-// function never reads.
-function runMetricNavigate(nav, navigate, record, host) {
-    // tab alone (no screen/entity) stays on the current record and just
-    // activates that tab — no route change, so runProjectionRowNavigate
-    // (which always navigates) doesn't apply here.
-    if (navigate.screen === undefined && navigate.entity === undefined) {
-        const { tab } = navigate;
-        if (tab !== undefined)
-            requestLeave(() => nav.setSearchParams({ tab }));
-        return;
-    }
-    const base = { kind: "navigate", id: "metric-navigate", label: "" };
-    const action = navigate.entity !== undefined
-        ? {
-            ...base,
-            entity: navigate.entity,
-            ...(navigate.entityId !== undefined && { entityId: navigate.entityId }),
-            ...(navigate.params !== undefined && { params: navigate.params }),
-            ...(navigate.tab !== undefined && { tab: navigate.tab }),
-        }
-        : navigate.screen !== undefined
-            ? {
-                ...base,
-                screen: navigate.screen,
-                ...(navigate.entityId !== undefined && { entityId: navigate.entityId }),
-                ...(navigate.params !== undefined && { params: navigate.params }),
-                ...(navigate.tab !== undefined && { tab: navigate.tab }),
-            }
-            : undefined;
-    if (action === undefined)
-        return;
-    runProjectionRowNavigate(nav, action, { id: "", values: record }, host);
-}
-// Absolute http(s) check for RecordHeaderSpec.subtitleHref — deliberately
-// stricter than isSafeHref (which also allows relative paths and mailto:),
-// since a relative/mailto value here should render as plain text, not a
-// "_blank" external link.
-function isAbsoluteHttpUrl(value) {
-    return /^https?:\/\//i.test(value) && isSafeHref(value);
-}
-// hrefFor throws for an entity without a detailFor screen; outside
-// createKumikoApp the feature list is empty, so navigateTargetAllows can't
-// rule that out beforehand. The NavApi owns target resolution, so asking it
-// and falling back to plain text covers both cases.
-function hrefForNavigate(nav, navigate, record) {
-    const entityId = navigate.entityId !== undefined ? String(record[navigate.entityId] ?? "") : undefined;
-    try {
-        if (navigate.entity !== undefined) {
-            return entityId === undefined || entityId === ""
-                ? undefined
-                : nav.hrefFor({ entity: navigate.entity, id: entityId });
-        }
-        if (navigate.screen !== undefined) {
-            return nav.hrefFor({
-                screenId: navigate.screen,
-                ...(entityId !== undefined && entityId !== "" && { entityId }),
-            });
-        }
-    }
-    catch {
-        return undefined;
-    }
-    return undefined;
-}
-function buildSubtitleParts(parts, record, nav, appFeatures, userRoles, host) {
-    return parts.flatMap((part) => {
-        const field = typeof part === "string" ? part : part.field;
-        const text = String(record[field] ?? "");
-        if (text === "")
-            return [];
-        const navigate = typeof part === "string" ? undefined : part.navigate;
-        if (navigate === undefined || !navigateTargetAllows(navigate, appFeatures, userRoles)) {
-            return [{ field, text }];
-        }
-        const href = hrefForNavigate(nav, navigate, record);
-        if (href === undefined)
-            return [{ field, text }];
-        return [{ field, text, href, onPress: () => runMetricNavigate(nav, navigate, record, host) }];
-    });
-}
-function headerStatusTone(header, record) {
-    if (header.status === undefined)
-        return undefined;
-    const value = String(record[header.statusToneField ?? header.status] ?? "");
-    const declared = header.statusTones !== undefined && Object.hasOwn(header.statusTones, value)
-        ? header.statusTones[value]
-        : undefined;
-    const declaredTone = declared !== undefined ? statusToneForOptionTone(declared) : undefined;
-    return declaredTone ?? statusToneForValue(value);
-}
-function resolveSubtitleHref(header, record) {
-    if (header?.subtitleHref === undefined)
-        return undefined;
-    const value = record[header.subtitleHref];
-    return typeof value === "string" && isAbsoluteHttpUrl(value) ? value : undefined;
-}
+import { deriveDetailRegionPieces, renderDetailHeaderContent, } from "./projection-detail-header-region.js";
+import { renderDetailQueryError, renderMissingIdBanner, renderRecordNotFound, } from "./projection-detail-states.js";
+import { renderProjectionDrawerHost } from "./projection-drawer-host.js";
+import { QueryLoadingBanner } from "./query-state-banners.js";
+import { useReturnHost, useReturnTarget } from "./return-to.js";
+import { useProjectionDetailActions } from "./use-projection-detail-actions.js";
+import { useProjectionDetailData } from "./use-projection-detail-data.js";
+import { useProjectionDetailLayout } from "./use-projection-detail-layout.js";
 // Projection detail body: read-only single-row inspector over an explicit
 // query instead of an entity (see projection-detail-shim.ts for the debt
 // doc). Fetches itself via `screen.query` + `idParam` (like
@@ -139,67 +31,23 @@ function resolveSubtitleHref(header, record) {
 // customSubmit; the no-op makes that path harmless instead of leaving it to
 // chance.
 export function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
-    const { Banner, Button, Dialog, Text, Grid, GridCell, Card, Tabs, StatusBadge, Metric, MetricBand, PageHeader, Link, ActionOverflowMenu, } = usePrimitives();
+    const primitives = usePrimitives();
     const t = useTranslation();
     const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
     const pageHeaderCompactContext = usePageHeaderCompact();
     const effectiveTranslate = translate ?? t;
     const nav = useNav();
-    const idParam = screen.idParam ?? "id";
     // Singleton screens ignore whatever id the path happens to carry — the
     // server picks the row from session/context, so forwarding a path id
     // (even a stray/spoofed one) into the query or into extension sections'
     // entityId fallback (resolveExtensionEntityId in render-edit.tsx) would
     // let a client-controlled value leak where none is meant to reach.
     const effectiveEntityId = screen.singleton === true ? undefined : entityId;
-    const isTabsMode = screen.layout.mode === "tabs";
-    const activeSection = useMemo(() => {
-        if (!isTabsMode || Tabs === undefined)
-            return undefined;
-        const tabParam = nav.searchParams["tab"];
-        return (screen.layout.sections.find((section) => section.id === tabParam) ?? screen.layout.sections[0]);
-    }, [isTabsMode, Tabs, screen.layout.sections, nav.searchParams]);
-    const hasTabs = isTabsMode && Tabs !== undefined && activeSection !== undefined;
-    // Tabs is an optional Core-Primitive: without it the screen falls back to
-    // the stacked all-sections layout instead of silently truncating to section 1.
-    useEffect(() => {
-        if (isTabsMode && Tabs === undefined) {
-            rendererWarn(`[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(() => {
-        const source = activeSection !== undefined
-            ? { ...screen, layout: { ...screen.layout, sections: [activeSection] } }
-            : screen;
-        return synthesizeProjectionDetailScreen(source);
-    }, [screen, activeSection]);
-    const detailQuery = useQuery(screen.query, effectiveEntityId !== undefined ? { [idParam]: effectiveEntityId } : {});
-    // A writeForm section's handler creates a new record (see EditWriteFormSection's
-    // doc) — both the outer record (header/metrics/other sections) and a sibling
-    // relatedList section's own independently-fetched rows must reflect it. A
-    // query refetch alone only refreshes `record` below; bumping this as
-    // <RenderEdit>'s refreshToken makes RelatedListSection's own useQuery
-    // re-run too (it has no `live` subscription of its own). Refetch instead of
-    // remount (a `key`) so unsaved input in the other writeForm sections and
-    // the related lists' local state survive.
-    const [reloadNonce, setReloadNonce] = useState(0);
-    const reloadDetail = useCallback(async () => {
-        await refetchAfterWrite(detailQuery.refetch);
-        setReloadNonce((n) => n + 1);
-    }, [detailQuery.refetch]);
+    const { activeSection, hasTabs, entity, detailScreen, detailQuery, reloadNonce, reloadDetail } = useProjectionDetailData({ screen, Tabs: primitives.Tabs, nav, effectiveEntityId });
     // Header actions render directly via RenderEditActionButton
     // headerActions moved out of RenderEdit's footer — this component owns
     // the failure-surfacing state RenderEdit used to own for them.
     const [actionError, setActionError] = useState(null);
-    // Default edit action: resolved cross-feature over ALL mounted
-    // features, not just this feature's own schema — detailFor itself is
-    // resolved cross-feature by the boot-validator (detail-screens.ts), and
-    // the motivating case is a projectionDetail whose query belongs to one
-    // feature while the entity's entityEdit screen lives in another. Unlike
-    // useNavigateToCreateFor this must NOT filter on allowCreate/singleton —
-    // those gate create-targets, we're resolving an update-target by a
-    // known id.
     const appFeatures = useAppFeatures();
     const userRoles = useUserRoles();
     const dispatcher = useOptionalDispatcher();
@@ -208,257 +56,74 @@ export function ProjectionDetailBody({ schema, screen, translate, entityId, }) {
     const returnTargetParam = useReturnTarget(screen.id);
     // A singleton has no record route to come back to — same as entityEdit.
     const returnTarget = screen.singleton === true ? undefined : returnTargetParam;
-    const { drawerAction, drawerScreen, drawerInitialValues, openDrawer, closeDrawer } = useDrawerAction(schema);
-    const handleRecordLeft = useCallback((action, resultData, deletedShownRecord) => {
-        const record = detailQuery.data ?? {};
-        // Never return onto the just-deleted record.
-        const target = deletedShownRecord && returnTarget?.entityId === effectiveEntityId
-            ? undefined
-            : returnTarget;
-        if (action.redirect !== undefined) {
-            navigateAfterRedirect({
-                nav,
-                schema,
-                appFeatures,
-                returnTarget: target,
-                redirect: action.redirect,
-                resultData,
-                record,
-            });
-            return;
-        }
-        navigateToReturnOr(nav, target, () => {
-            const listScreen = screen.listScreenId ??
-                (screen.detailFor !== undefined
-                    ? findEntityListScreen(schema, screen.detailFor)?.id
-                    : undefined);
-            if (listScreen !== undefined)
-                nav.navigate({ screenId: lastSegment(listScreen) });
-            else
-                void detailQuery.refetch();
-        });
-    }, [
-        detailQuery.data,
-        detailQuery.refetch,
-        nav,
+    const drawer = useDrawerAction(schema);
+    const { openDrawer } = drawer;
+    const { buildSectionActions, headerActions } = useProjectionDetailActions({
         schema,
-        appFeatures,
-        returnTarget,
-        effectiveEntityId,
-        screen.listScreenId,
-        screen.detailFor,
-    ]);
-    const editScreen = useMemo(() => {
-        const detailFor = screen.detailFor;
-        if (detailFor === undefined)
-            return undefined;
-        return findEditScreenFor(detailFor, appFeatures, userRoles);
-    }, [appFeatures, screen.detailFor, userRoles]);
-    const defaultEditAction = useMemo(() => {
-        if (editScreen === undefined)
-            return undefined;
-        // editScreen.id is registry-qualified ("feature:screen:contact-edit");
-        // nav.navigate expects the short form (see useNavigateToCreateFor above).
-        const targetScreenId = lastSegment(editScreen.id);
-        return {
-            id: "edit",
-            label: effectiveTranslate("kumiko.actions.edit"),
-            icon: resolveActionIcon("edit"),
-            onPress: () => {
-                const target = {
-                    screenId: targetScreenId,
-                    ...(effectiveEntityId !== undefined && { entityId: effectiveEntityId }),
-                };
-                navigateWithReturnTo(nav, target, host);
-            },
-        };
-    }, [editScreen, effectiveTranslate, nav, effectiveEntityId, host]);
-    // a navigate-screen action targeting an entityEdit screen for the
-    // SAME entity this projectionDetail shows (screen.detailFor) defaults its
-    // entityId to the shown record's own id — without this fallback the target
-    // opens an empty create-form instead of the shown record, silently.
-    // Searched cross-feature, consistent with editScreen above.
-    const sameEntityScreenId = useCallback((targetScreen) => {
-        const record = detailQuery.data ?? {};
-        const targetIsEntityEditSameEntity = screen.detailFor !== undefined &&
-            appFeatures.some((feature) => feature.screens.some((s) => s.type === "entityEdit" &&
-                s.entity === screen.detailFor &&
-                lastSegment(s.id) === targetScreen));
-        return targetIsEntityEditSameEntity ? String(record["id"] ?? "") : undefined;
-    }, [detailQuery.data, screen.detailFor, appFeatures]);
-    const buildSectionActions = useCallback((actions) => buildRecordActions({
-        actions,
-        record: detailQuery.data ?? {},
-        translate: effectiveTranslate,
-        nav,
-        host,
-        dispatcher,
-        openDrawer,
-        onWriteSuccess: reloadDetail,
-        onRecordLeft: handleRecordLeft,
-        sameEntityScreenId,
-        clientActions,
-    }), [
-        detailQuery.data,
-        reloadDetail,
+        screen,
         effectiveTranslate,
+        effectiveEntityId,
         nav,
         host,
         dispatcher,
         clientActions,
+        appFeatures,
+        userRoles,
+        returnTarget,
         openDrawer,
-        handleRecordLeft,
-        sameEntityScreenId,
-    ]);
-    const headerActions = useMemo(() => {
-        const declaredHasEdit = screen.actions?.some((a) => a.id === "edit") === true;
-        const resolved = buildRecordActions({
-            actions: screen.actions ?? [],
-            record: detailQuery.data ?? {},
-            translate: effectiveTranslate,
-            nav,
-            host,
-            dispatcher,
-            openDrawer,
-            onWriteSuccess: reloadDetail,
-            onRecordLeft: handleRecordLeft,
-            sameEntityScreenId,
-            clientActions,
-        });
-        if (defaultEditAction === undefined || declaredHasEdit)
-            return resolved;
-        return [defaultEditAction, ...(resolved ?? [])];
-    }, [
-        screen.actions,
-        defaultEditAction,
-        effectiveTranslate,
-        nav,
-        host,
-        dispatcher,
-        clientActions,
-        detailQuery.data,
+        detailQuery,
         reloadDetail,
-        openDrawer,
-        handleRecordLeft,
-        sameEntityScreenId,
-    ]);
-    const hasHeader = screen.header !== undefined;
-    const hasMetrics = screen.metrics !== undefined && screen.metrics.length > 0;
-    // ?? [] rather than threading `headerActions !== undefined` through every
-    // use below — an empty array is a safe no-op for .map/.length.
-    const headerActionsList = headerActions ?? [];
-    const hasHeaderActions = headerActionsList.length > 0;
-    const hasHeaderCard = hasHeader || hasMetrics || hasHeaderActions;
-    // A header card (metric band, status, actions) needs more room than the
-    // 640px form column; screens with only a record title keep the narrow one.
-    const widensScreenFormColumn = hasHeaderCard &&
-        !hasTabs &&
-        screenFillsHeight(screen) &&
-        detailScreen.layout.width === undefined;
-    const renderedDetailScreen = useMemo(() => widensScreenFormColumn
-        ? { ...detailScreen, layout: { ...detailScreen.layout, width: HEADER_CARD_DEFAULT_WIDTH } }
-        : detailScreen, [detailScreen, widensScreenFormColumn]);
+    });
+    const { hasMetrics, headerActionsList, hasHeaderActions, hasHeaderCard, renderedDetailScreen } = useProjectionDetailLayout({ screen, headerActions, hasTabs, detailScreen });
     if (effectiveEntityId === undefined && screen.singleton !== true) {
-        return (_jsxs(Banner, { padded: true, variant: "error", testId: "kumiko-screen-projection-detail-missing-id", children: ["Screen ", _jsx(Text, { variant: "code", children: screen.id }), " (projectionDetail) needs a row id in the path \u2014 open it from a row action."] }));
+        return renderMissingIdBanner(primitives, screen);
     }
     if (detailQuery.loading && detailQuery.data === null) {
         return _jsx(QueryLoadingBanner, {});
     }
     if (detailQuery.error && detailQuery.data === null) {
-        return (_jsx(QueryErrorBanner, { error: detailQuery.error, translate: effectiveTranslate, onRetry: detailQuery.refetch }));
+        return renderDetailQueryError(detailQuery.error, effectiveTranslate, detailQuery.refetch);
     }
     // A failed refetch keeps the last good record on screen.
-    const refetchErrorBanner = detailQuery.error ? (_jsx(QueryErrorBanner, { error: detailQuery.error, translate: effectiveTranslate, onRetry: detailQuery.refetch })) : null;
+    const refetchErrorBanner = detailQuery.error
+        ? renderDetailQueryError(detailQuery.error, effectiveTranslate, detailQuery.refetch)
+        : null;
     const record = detailQuery.data;
     if (!record) {
-        const backListScreen = screen.listScreenId ??
-            (screen.detailFor !== undefined
-                ? findEntityListScreen(schema, screen.detailFor)?.id
-                : undefined);
-        return (_jsx(RecordNotFoundState, { translate: effectiveTranslate, ...((returnTarget !== undefined || backListScreen !== undefined) && {
-                onBack: () => navigateToReturnOr(nav, returnTarget, () => {
-                    if (backListScreen !== undefined) {
-                        nav.navigate({ screenId: lastSegment(backListScreen) });
-                    }
-                }),
-            }) }));
+        return renderRecordNotFound({ schema, screen, nav, returnTarget, effectiveTranslate });
     }
-    // Grouped into the head Card alongside title/status/metrics:
-    // these are actions on the record the head shows, not on whichever tab is
-    // open, so they must stay in place across tab switches instead of
-    // trailing the active tab's content in the card footer.
-    const headerActionsContent = hasHeaderActions && (_jsx(Grid, { columns: "auto", testId: "kumiko-screen-projection-detail-actions", children: _jsx(HeaderActionsBar, { actions: headerActionsList, Button: Button, Dialog: Dialog, ActionOverflowMenu: ActionOverflowMenu, onError: setActionError, ...(screen.primaryAction !== undefined && { preferredPrimaryId: screen.primaryAction }) }) }));
-    // Rendered as RenderEdit's headerRegion (not as JSX siblings before it) so
-    // this shares the same page padding/width as the record's edit card below
-    // it, instead of sitting flush against the screen edge (fw record-screen
-    // header polish).
-    const recordTitle = screen.recordTitleField !== undefined
-        ? resolveRecordTitle(record[screen.recordTitleField])
-        : undefined;
-    const header = screen.header;
-    const subtitleHref = resolveSubtitleHref(header, record);
-    // Plain Text, not Heading — the Card title slot already renders as its own
-    // heading element (h3); nesting another heading (h1) inside it is invalid HTML.
-    const headerTitleSlot = header !== undefined ? (header.status !== undefined ? (_jsxs(Grid, { columns: "auto", children: [_jsx(Text, { testId: "kumiko-screen-projection-detail-title", children: String(record[header.title] ?? "") }), StatusBadge !== undefined ? (_jsx(StatusBadge, { value: String(record[header.status] ?? ""), tone: headerStatusTone(header, record), testId: "kumiko-screen-projection-detail-status" })) : (_jsx(Text, { testId: "kumiko-screen-projection-detail-status", children: String(record[header.status] ?? "") }))] })) : (_jsx(Text, { testId: "kumiko-screen-projection-detail-title", children: String(record[header.title] ?? "") }))) : undefined;
-    const subtitleParts = header !== undefined && typeof header.subtitle === "object"
-        ? buildSubtitleParts(header.subtitle, record, nav, appFeatures, userRoles, host)
-        : undefined;
-    const headerSubtitleSlot = subtitleParts !== undefined ? (subtitleParts.length > 0 ? (_jsx(Text, { testId: "kumiko-screen-projection-detail-subtitle", children: subtitleParts.map((part, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx(Text, { variant: "muted", decorative: true, children: " · " })), part.href !== undefined ? (_jsx(Link, { href: part.href, ...(part.onPress !== undefined && { onPress: part.onPress }), className: "underline", testId: `kumiko-screen-projection-detail-subtitle-${part.field}`, children: part.text })) : (_jsx(Text, { testId: `kumiko-screen-projection-detail-subtitle-${part.field}`, children: part.text }))] }, part.field))) })) : undefined) : typeof header?.subtitle === "string" ? (subtitleHref !== undefined ? (_jsx(Link, { href: subtitleHref, target: "_blank", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") })) : (_jsx(Text, { variant: "muted", testId: "kumiko-screen-projection-detail-subtitle", children: String(record[header.subtitle] ?? "") }))) : undefined;
-    // slots.header shares the header card with the actions (one card, actions
-    // top right) instead of rendering as an unframed block above it.
-    const metricItems = screen.metrics?.map((metric) => {
-        const field = metric.field;
-        const label = effectiveTranslate(metric.label);
-        const value = String(record[field] ?? "");
-        const testId = `kumiko-screen-projection-detail-metric-${field}`;
-        const navigate = metric.navigate;
-        const onPress = navigate !== undefined && navigateTargetAllows(navigate, appFeatures, userRoles)
-            ? () => runMetricNavigate(nav, navigate, record, host)
-            : undefined;
-        return Metric !== undefined ? (_jsx(Metric, { label: label, value: value, testId: testId, ...(onPress !== undefined && { onPress }) }, field)) : (_jsxs(GridCell, { children: [_jsx(Text, { variant: "small", testId: `${testId}-label`, children: label }), _jsx(Text, { testId: `${testId}-value`, children: value })] }, field));
-    });
-    // Metrics are a dl band when the primitive exists; the old Grid stays as the fallback.
-    const metricsBlock = (subtitle, lead) => MetricBand !== undefined ? (_jsx(MetricBand, { testId: "kumiko-screen-projection-detail-metrics", subtitle: subtitle, ...(lead !== undefined && { lead }), children: metricItems })) : (_jsx(Grid, { columns: screen.metrics?.length ?? 1, testId: "kumiko-screen-projection-detail-metrics", children: metricItems }));
-    const usesPageHeaderSlot = pageHeaderSlotAvailable && PageHeader !== undefined;
-    const pageHeaderCompact = pageHeaderCompactContext && usesPageHeaderSlot;
-    // The phone shell header clips a long status mid-word, so on phones the badge
-    // sits in the body instead of the shell header slot.
-    const statusBadge = header?.status !== undefined && StatusBadge !== undefined ? (_jsx(StatusBadge, { value: String(record[header.status] ?? ""), tone: headerStatusTone(header, record), testId: "kumiko-screen-projection-detail-status" })) : undefined;
-    // Lives in the band's subtitle row so it shares the metrics' horizontal inset.
-    const bandSubtitle = pageHeaderCompact && statusBadge !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Grid, { columns: "auto", testId: "kumiko-screen-projection-detail-status-row", children: statusBadge }), headerSubtitleSlot] })) : (headerSubtitleSlot);
-    const actionErrorBanner = actionError !== null && (_jsxs(Banner, { variant: "error", testId: "render-edit-action-error", children: [actionError.message, _jsx(ErrorReference, { requestId: actionError.requestId })] }));
-    const renderHeaderContent = (headerSlot) => (_jsxs(_Fragment, { children: [usesPageHeaderSlot ? (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...(header !== undefined && { title: String(record[header.title] ?? "") }), ...(header === undefined && recordTitle !== undefined && { title: recordTitle }), ...(!pageHeaderCompact && statusBadge !== undefined && { status: statusBadge }), ...(hasHeaderActions && {
-                            actions: (_jsx(Grid, { columns: "auto", testId: "kumiko-screen-projection-detail-actions", children: _jsx(HeaderActionsBar, { actions: headerActionsList, Button: Button, Dialog: Dialog, ActionOverflowMenu: ActionOverflowMenu, onError: setActionError, collapseAfterPrimary: true, compact: pageHeaderCompact, PageHeader: PageHeader, ...(screen.primaryAction !== undefined && {
-                                        preferredPrimaryId: screen.primaryAction,
-                                    }) }) })),
-                        }) }), MetricBand === undefined && bandSubtitle, MetricBand === undefined && headerSlot, (hasMetrics || bandSubtitle !== undefined || headerSlot !== undefined) &&
-                        (MetricBand !== undefined || hasMetrics) &&
-                        metricsBlock(bandSubtitle, MetricBand !== undefined ? headerSlot : undefined), actionErrorBanner] })) : ((hasHeaderCard || headerSlot !== undefined || recordTitle !== undefined) && (_jsxs(Card, { slots: {
-                    ...(headerTitleSlot !== undefined && { title: headerTitleSlot }),
-                    ...(headerTitleSlot === undefined &&
-                        recordTitle !== undefined && { title: recordTitle }),
-                    ...(headerSubtitleSlot !== undefined && { subtitle: headerSubtitleSlot }),
-                    ...(headerSlot !== undefined && { headerContent: headerSlot }),
-                    ...(hasHeaderActions && { headerActions: headerActionsContent }),
-                }, children: [hasMetrics && metricsBlock(), actionErrorBanner] }))), hasTabs && activeSection !== undefined && (_jsx(Tabs, { testId: "kumiko-screen-projection-detail-tabs", items: screen.layout.sections.map((section) => {
-                    const countField = isWriteFormEditSection(section) ? undefined : section.countField;
-                    const countValue = countField !== undefined ? record[countField] : undefined;
-                    const count = typeof countValue === "number" && Number.isFinite(countValue)
-                        ? countValue
-                        : undefined;
-                    return {
-                        id: section.id ?? "",
-                        label: effectiveTranslate(section.title ?? section.id ?? ""),
-                        ...(count !== undefined && { count }),
-                    };
-                }), activeId: activeSection.id ?? "", onSelect: (id) => requestLeave(() => nav.setSearchParams({ tab: id })) }))] }));
+    const regionModel = {
+        screen,
+        record,
+        primitives,
+        effectiveTranslate,
+        nav,
+        appFeatures,
+        userRoles,
+        host,
+        headerActionsList,
+        setActionError,
+        actionError,
+        pageHeaderSlotAvailable,
+        pageHeaderCompactContext,
+        hasHeaderActions,
+        hasMetrics,
+        hasHeaderCard,
+        hasTabs,
+        activeSection,
+    };
+    const regionPieces = deriveDetailRegionPieces(regionModel);
+    const renderHeaderContent = (headerSlot) => renderDetailHeaderContent(regionModel, regionPieces, headerSlot);
     return (_jsxs(_Fragment, { children: [refetchErrorBanner, _jsx(RenderEdit, { refreshToken: reloadNonce, screen: renderedDetailScreen, entity: entity, featureName: schema.featureName, initial: record, entityId: effectiveEntityId, customSubmit: async () => ({ isSuccess: true, validationBlocked: false, data: undefined }), onReload: reloadDetail, onRelatedListDrawerAction: openDrawer, ...(translate !== undefined && { translate }), ...(hasTabs && { hideSectionTitles: true }), ...(screenFillsHeight(screen) && { fillScreenHeight: true }), ...((hasHeaderCard ||
                     hasTabs ||
                     screen.slots?.header !== undefined ||
                     screen.recordTitleField !== undefined) && {
                     headerRegion: renderHeaderContent,
-                }), buildSectionActions: buildSectionActions, valueDisplay: screen.valueDisplay ?? "text" }, entityId), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
-                    closeDrawer();
-                    void reloadDetail();
-                } })] }));
+                }), buildSectionActions: buildSectionActions, valueDisplay: screen.valueDisplay ?? "text" }, entityId), renderProjectionDrawerHost({
+                schema,
+                translate,
+                userRoles,
+                drawer,
+                refreshRows: reloadDetail,
+            })] }));
 }

package/dist/app/projection-detail-header-model.d.ts

@@ -0,0 +1,11 @@
+import type { ProjectionDetailScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Translate } from "../headless/index.ts";
+import { type StatusTone } from "../primitives.tsx";
+export declare function headerStatusTone(header: NonNullable<ProjectionDetailScreenDefinition["header"]>, record: Readonly<Record<string, unknown>>): StatusTone | undefined;
+export declare function resolveSubtitleHref(header: ProjectionDetailScreenDefinition["header"], record: Readonly<Record<string, unknown>>): string | undefined;
+export type DetailTabItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly count?: number;
+};
+export declare function buildDetailTabItems(sections: ProjectionDetailScreenDefinition["layout"]["sections"], record: Readonly<Record<string, unknown>>, translate: Translate): DetailTabItem[];

package/dist/app/projection-detail-header-model.js

@@ -0,0 +1,33 @@
+import { isWriteFormEditSection } from "@cosmicdrift/kumiko-framework/ui-types";
+import { statusToneForOptionTone, statusToneForValue } from "../primitives.js";
+import { isAbsoluteHttpUrl } from "./projection-detail-navigation.js";
+export function headerStatusTone(header, record) {
+    // skip: a header without status has no tone
+    if (header.status === undefined)
+        return undefined;
+    const value = String(record[header.statusToneField ?? header.status] ?? "");
+    const declared = header.statusTones !== undefined && Object.hasOwn(header.statusTones, value)
+        ? header.statusTones[value]
+        : undefined;
+    const declaredTone = declared !== undefined ? statusToneForOptionTone(declared) : undefined;
+    return declaredTone ?? statusToneForValue(value);
+}
+export function resolveSubtitleHref(header, record) {
+    // skip: no subtitleHref declared
+    if (header?.subtitleHref === undefined)
+        return undefined;
+    const value = record[header.subtitleHref];
+    return typeof value === "string" && isAbsoluteHttpUrl(value) ? value : undefined;
+}
+export function buildDetailTabItems(sections, record, translate) {
+    return sections.map((section) => {
+        const countField = isWriteFormEditSection(section) ? undefined : section.countField;
+        const countValue = countField !== undefined ? record[countField] : undefined;
+        const count = typeof countValue === "number" && Number.isFinite(countValue) ? countValue : undefined;
+        return {
+            id: section.id ?? "",
+            label: translate(section.title ?? section.id ?? ""),
+            ...(count !== undefined && { count }),
+        };
+    });
+}

package/dist/app/projection-detail-header-region.d.ts

@@ -0,0 +1,28 @@
+import type { ProjectionDetailScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { ReactNode } from "react";
+import type { ErrorNotice } from "./error-reference.tsx";
+import { type DetailHeaderModel } from "./projection-detail-header.tsx";
+export type DetailRegionModel = DetailHeaderModel & {
+    readonly actionError: ErrorNotice | null;
+    readonly pageHeaderSlotAvailable: boolean;
+    readonly pageHeaderCompactContext: boolean;
+    readonly hasHeaderActions: boolean;
+    readonly hasMetrics: boolean;
+    readonly hasHeaderCard: boolean;
+    readonly hasTabs: boolean;
+    readonly activeSection: ProjectionDetailScreenDefinition["layout"]["sections"][number] | undefined;
+};
+export type DetailRegionPieces = {
+    readonly PageHeader: DetailHeaderModel["primitives"]["PageHeader"];
+    readonly pageHeaderCompact: boolean;
+    readonly recordTitle: string | undefined;
+    readonly headerTitleSlot: ReactNode;
+    readonly headerSubtitleSlot: ReactNode;
+    readonly headerActionsContent: ReactNode;
+    readonly statusBadge: ReactNode;
+    readonly bandSubtitle: ReactNode;
+    readonly metricItems: ReactNode[] | undefined;
+    readonly actionErrorBanner: ReactNode;
+};
+export declare function deriveDetailRegionPieces(model: DetailRegionModel): DetailRegionPieces;
+export declare function renderDetailHeaderContent(model: DetailRegionModel, pieces: DetailRegionPieces, headerSlot: ReactNode | undefined): ReactNode;