@cohesivesystems/presentation-react-shadcn 0.1.0-alpha.1

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@cohesivesystems/presentation-react-shadcn",
+  "version": "0.1.0-alpha.1",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
+  ],
+  "dependencies": {
+    "@cohesivesystems/presentation-contracts": "0.1.0-alpha.1",
+    "@cohesivesystems/presentation-core": "0.1.0-alpha.1",
+    "@cohesivesystems/presentation-react": "0.1.0-alpha.1",
+    "@cohesivesystems/presentation-tailwind": "0.1.0-alpha.1"
+  },
+  "peerDependencies": {
+    "class-variance-authority": ">=0.7",
+    "clsx": ">=2",
+    "lucide-react": ">=1",
+    "radix-ui": ">=1",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-router": ">=7",
+    "@tanstack/react-table": ">=8",
+    "tailwind-merge": ">=3"
+  },
+  "devDependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "~5.9.3",
+    "vitest": "^4.1.7"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "shadcn/ui-oriented React renderers for Cohesive presentation modules.",
+  "keywords": [
+    "cohesive",
+    "presentation",
+    "react",
+    "shadcn"
+  ],
+  "author": "Cohesive Systems",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cohesivesystems/cohesive.git",
+    "directory": "src/frontend/presentation-react-shadcn"
+  },
+  "bugs": {
+    "url": "https://github.com/cohesivesystems/cohesive/issues"
+  },
+  "homepage": "https://github.com/cohesivesystems/cohesive#readme",
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node ../../../eng/fix-package-js-imports.mjs dist",
+    "test": "vitest run --passWithNoTests"
+  }
+}

package/src/document-workspace-surface-slot-renderers.tsx

@@ -0,0 +1,395 @@
+import type { ReactNode } from 'react'
+
+import {
+  documentWorkspaceSurfaceSlotRoleKeys,
+  resolveDocumentWorkspaceSurfaceSlotRoleKey,
+  type ResolvedDocumentWorkspaceSurfaceSlot,
+} from '@cohesivesystems/presentation-core'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import {
+  createPresentationProjectionDiagnostic,
+  type PresentationProjectionDiagnostic,
+} from '@cohesivesystems/presentation-core'
+import { ProjectedViewSurface } from './projected-view-surface'
+import type {
+  ViewChromeSlotDefinition,
+  ViewDefinition,
+} from '@cohesivesystems/presentation-core'
+import {
+  documentWorkspaceSurfaceSlotComponentRoles,
+} from '@cohesivesystems/presentation-contracts'
+
+const standardDocumentWorkspaceSurfaceSlotComponentRoleIds = Object.values(
+  documentWorkspaceSurfaceSlotComponentRoles,
+)
+
+export type DocumentWorkspaceSurfaceSlotRenderer<TActionContext> = (
+  context: DocumentWorkspaceSurfaceSlotRenderContext<TActionContext>,
+) => ReactNode
+
+export interface DocumentWorkspaceSurfaceSlotRendererRegistry<TActionContext> {
+  readonly byComponentKey?: Readonly<Record<string, DocumentWorkspaceSurfaceSlotRenderer<TActionContext>>>
+  readonly byComponentRole?: Readonly<Record<string, DocumentWorkspaceSurfaceSlotRenderer<TActionContext>>>
+  readonly byRole?: Readonly<Record<string, DocumentWorkspaceSurfaceSlotRenderer<TActionContext>>>
+}
+
+export interface DocumentWorkspaceSurfaceSlotRenderContext<TActionContext> {
+  readonly actionContext: TActionContext
+  readonly auxiliaryContent?: ReactNode
+  readonly componentSystem: PresentationComponentSystem
+  readonly documentContent: ReactNode
+  readonly headerContent?: ReactNode
+  readonly headerDescription: string
+  readonly headerTitle: string
+  readonly pageView: ViewDefinition | null
+  readonly pageViewId: string
+  readonly renderChromeSlot: (
+    slot: ViewChromeSlotDefinition,
+    view: ViewDefinition | null,
+  ) => ReactNode
+  readonly renderDocumentViewState?: (content: ReactNode) => ReactNode
+  readonly slot: ResolvedDocumentWorkspaceSurfaceSlot
+  readonly workspaceTitle: string
+  readonly workspaceView: ViewDefinition | null
+}
+
+export interface ResolvedDocumentWorkspaceSurfaceSlotRenderer<TActionContext> {
+  readonly bindingSource: 'component-key' | 'component-role' | 'role'
+  readonly componentKey?: string | null
+  readonly componentRole?: string | null
+  readonly renderer: DocumentWorkspaceSurfaceSlotRenderer<TActionContext>
+  readonly roleKey: string
+}
+
+export const standardDocumentWorkspaceSurfaceSlotRenderers = {
+  byComponentRole: {
+    [documentWorkspaceSurfaceSlotComponentRoles.header]:
+      renderDocumentWorkspaceHeaderSurfaceSlot,
+    [documentWorkspaceSurfaceSlotComponentRoles.primarySurface]:
+      renderDocumentWorkspacePrimarySurfaceSlot,
+    [documentWorkspaceSurfaceSlotComponentRoles.auxiliary]:
+      renderDocumentWorkspaceAuxiliarySlot,
+  },
+  byRole: {
+    [documentWorkspaceSurfaceSlotRoleKeys.header]: renderDocumentWorkspaceHeaderSurfaceSlot,
+    [documentWorkspaceSurfaceSlotRoleKeys.primarySurface]:
+      renderDocumentWorkspacePrimarySurfaceSlot,
+    [documentWorkspaceSurfaceSlotRoleKeys.auxiliary]: renderDocumentWorkspaceAuxiliarySlot,
+  },
+} as const satisfies DocumentWorkspaceSurfaceSlotRendererRegistry<unknown>
+
+export function mergeDocumentWorkspaceSurfaceSlotRendererRegistries<TActionContext>(
+  ...registries: readonly (
+    DocumentWorkspaceSurfaceSlotRendererRegistry<TActionContext> | null | undefined
+  )[]
+): DocumentWorkspaceSurfaceSlotRendererRegistry<TActionContext> {
+  return {
+    byComponentKey: mergeRendererMaps(
+      registries.map((registry) => registry?.byComponentKey),
+    ),
+    byComponentRole: mergeRendererMaps(
+      registries.map((registry) => registry?.byComponentRole),
+    ),
+    byRole: mergeRendererMaps(registries.map((registry) => registry?.byRole)),
+  }
+}
+
+export function resolveDocumentWorkspaceSurfaceSlotRenderer<TActionContext>(
+  slot: ResolvedDocumentWorkspaceSurfaceSlot,
+  renderers: DocumentWorkspaceSurfaceSlotRendererRegistry<TActionContext>,
+): ResolvedDocumentWorkspaceSurfaceSlotRenderer<TActionContext> | null {
+  const roleKey = resolveDocumentWorkspaceSurfaceSlotRoleKey(slot.role, slot.roleLabel)
+  const componentRole = slot.renderer?.ComponentRole ?? null
+  const componentKey = slot.renderer?.ComponentKey ?? null
+
+  if (componentRole) {
+    const renderer = renderers.byComponentRole?.[componentRole]
+    if (renderer) {
+      return {
+        bindingSource: 'component-role',
+        componentRole,
+        renderer,
+        roleKey,
+      }
+    }
+  }
+
+  if (componentKey) {
+    const renderer = renderers.byComponentKey?.[componentKey]
+    if (renderer) {
+      return {
+        bindingSource: 'component-key',
+        componentKey,
+        renderer,
+        roleKey,
+      }
+    }
+  }
+
+  const roleRenderer = renderers.byRole?.[roleKey]
+  return roleRenderer
+    ? {
+        bindingSource: 'role',
+        componentKey,
+        componentRole,
+        renderer: roleRenderer,
+        roleKey,
+      }
+    : null
+}
+
+export function projectDocumentWorkspaceSurfaceSlotRendererDiagnostics<TActionContext>({
+  renderers,
+  slots,
+  sourceId,
+}: {
+  readonly renderers: DocumentWorkspaceSurfaceSlotRendererRegistry<TActionContext>
+  readonly slots: readonly ResolvedDocumentWorkspaceSurfaceSlot[]
+  readonly sourceId: string
+}): readonly PresentationProjectionDiagnostic[] {
+  const diagnostics: PresentationProjectionDiagnostic[] = []
+  diagnostics.push(...projectStandardDocumentWorkspaceSurfaceSlotRendererCoverageDiagnostics({
+    renderers,
+    sourceId,
+  }))
+
+  for (const slot of slots) {
+    const renderer = slot.renderer
+    if (!renderer) {
+      continue
+    }
+
+    const componentRole = renderer.ComponentRole ?? null
+    const componentKey = renderer.ComponentKey ?? null
+    const hasComponentRoleRenderer = componentRole
+      ? Boolean(renderers.byComponentRole?.[componentRole])
+      : false
+    const hasComponentKeyRenderer = componentKey
+      ? Boolean(renderers.byComponentKey?.[componentKey])
+      : false
+
+    if (!componentRole && !componentKey) {
+      diagnostics.push(createSurfaceSlotRendererDiagnostic({
+        id: `document-workspace-surface-slot:${slot.id}:renderer-missing-target`,
+        message:
+          `Document workspace surface slot '${slot.id}' declares a renderer binding ` +
+          'without ComponentRole or ComponentKey.',
+        severity: 'warning',
+        sourceId,
+        slot,
+        status: 'unbound',
+        suggestedNextStep:
+          'Set ComponentRole on the slot Renderer binding, or remove the binding and use role fallback.',
+      }))
+      continue
+    }
+
+    if (componentRole && !hasComponentRoleRenderer) {
+      diagnostics.push(createSurfaceSlotRendererDiagnostic({
+        details: { componentRole },
+        id: `document-workspace-surface-slot:${slot.id}:component-role-unbound`,
+        message:
+          `Document workspace surface slot '${slot.id}' targets ComponentRole ` +
+          `'${componentRole}', but no frontend renderer is registered for that role.`,
+        severity: 'warning',
+        sourceId,
+        slot,
+        status: renderers.byRole?.[
+          resolveDocumentWorkspaceSurfaceSlotRoleKey(slot.role, slot.roleLabel)
+        ]
+          ? 'locally-interpreted'
+          : 'unbound',
+        suggestedNextStep:
+          'Register a surface-slot renderer for this ComponentRole, or change the backend Renderer binding.',
+      }))
+    }
+
+    if (!hasComponentRoleRenderer && componentKey && !hasComponentKeyRenderer) {
+      diagnostics.push(createSurfaceSlotRendererDiagnostic({
+        details: { componentKey },
+        id: `document-workspace-surface-slot:${slot.id}:component-key-unbound`,
+        message:
+          `Document workspace surface slot '${slot.id}' targets ComponentKey ` +
+          `'${componentKey}', but no frontend renderer is registered for that key.`,
+        severity: 'warning',
+        sourceId,
+        slot,
+        status: renderers.byRole?.[
+          resolveDocumentWorkspaceSurfaceSlotRoleKey(slot.role, slot.roleLabel)
+        ]
+          ? 'locally-interpreted'
+          : 'unbound',
+        suggestedNextStep:
+          'Register a surface-slot renderer for this ComponentKey, or change the backend Renderer binding.',
+      }))
+    }
+  }
+
+  return diagnostics
+}
+
+function projectStandardDocumentWorkspaceSurfaceSlotRendererCoverageDiagnostics<TActionContext>({
+  renderers,
+  sourceId,
+}: {
+  readonly renderers: DocumentWorkspaceSurfaceSlotRendererRegistry<TActionContext>
+  readonly sourceId: string
+}): readonly PresentationProjectionDiagnostic[] {
+  return standardDocumentWorkspaceSurfaceSlotComponentRoleIds.flatMap((componentRole) => {
+    if (renderers.byComponentRole?.[componentRole]) {
+      return []
+    }
+
+    return [
+      createPresentationProjectionDiagnostic({
+        category: 'missing-binding',
+        details: { componentRole },
+        id: `document-workspace-surface-slot-renderer-role:${componentRole}:missing`,
+        interpretation: {
+          status: 'unbound',
+          target: 'react',
+        },
+        message:
+          `Standard document workspace surface-slot renderer role '${componentRole}' ` +
+          'has no frontend renderer binding.',
+        severity: 'warning',
+        source: sourceId,
+        subject: {
+          id: componentRole,
+          kind: 'document-workspace-surface-slot-renderer-role',
+        },
+        suggestedNextStep:
+          'Register a renderer in the document workspace surface-slot renderer registry.',
+      }),
+    ]
+  })
+}
+
+function renderDocumentWorkspaceHeaderSurfaceSlot<TActionContext>({
+  componentSystem,
+  headerContent,
+  headerDescription,
+  headerTitle,
+  renderChromeSlot,
+  slot,
+}: DocumentWorkspaceSurfaceSlotRenderContext<TActionContext>) {
+  const view = slot.view
+  const chrome = view?.Chrome ?? null
+
+  return componentSystem.documentWorkspaces.DocumentWorkspaceSurfaceSlot({
+    regionId: slot.region?.Id ?? null,
+    role: slot.role,
+    slot: slot.id,
+    viewId: view?.Id ?? null,
+    renderSurface: (surfaceOptions) => (
+      <ProjectedViewSurface
+        className={surfaceOptions.className}
+        collapsible={chrome?.Collapsible ?? surfaceOptions.collapsible}
+        componentSystem={componentSystem}
+        contentClassName={surfaceOptions.contentClassName}
+        description={headerDescription}
+        renderChromeSlot={renderChromeSlot}
+        title={headerTitle}
+        view={view}
+      >
+        {headerContent}
+      </ProjectedViewSurface>
+    ),
+  })
+}
+
+function renderDocumentWorkspacePrimarySurfaceSlot<TActionContext>({
+  componentSystem,
+  documentContent,
+  renderChromeSlot,
+  renderDocumentViewState,
+  slot,
+  workspaceTitle,
+}: DocumentWorkspaceSurfaceSlotRenderContext<TActionContext>) {
+  const view = slot.view
+
+  return componentSystem.documentWorkspaces.DocumentWorkspaceSurfaceSlot({
+    regionId: slot.region?.Id ?? null,
+    role: slot.role,
+    slot: slot.id,
+    viewId: view?.Id ?? null,
+    renderSurface: (surfaceOptions) => (
+      <ProjectedViewSurface
+        chromeHeaderClassName={surfaceOptions.chromeHeaderClassName}
+        className={surfaceOptions.className}
+        componentSystem={componentSystem}
+        contentClassName={surfaceOptions.contentClassName}
+        renderChromeSlot={renderChromeSlot}
+        title={workspaceTitle}
+        view={view}
+      >
+        {renderDocumentViewState ? renderDocumentViewState(documentContent) : documentContent}
+      </ProjectedViewSurface>
+    ),
+  })
+}
+
+function renderDocumentWorkspaceAuxiliarySlot<TActionContext>({
+  auxiliaryContent,
+  componentSystem,
+  pageView,
+  pageViewId,
+  slot,
+}: DocumentWorkspaceSurfaceSlotRenderContext<TActionContext>) {
+  return componentSystem.documentWorkspaces.DocumentWorkspaceSurfaceSlot({
+    children: auxiliaryContent,
+    role: slot.role,
+    slot: slot.id,
+    viewId: pageView?.Id ?? pageViewId,
+  })
+}
+
+function mergeRendererMaps<TActionContext>(
+  maps: readonly (
+    Readonly<Record<string, DocumentWorkspaceSurfaceSlotRenderer<TActionContext>>> |
+    null |
+    undefined
+  )[],
+) {
+  return Object.assign({}, ...maps.filter(Boolean))
+}
+
+function createSurfaceSlotRendererDiagnostic({
+  details,
+  id,
+  message,
+  severity,
+  slot,
+  sourceId,
+  status,
+  suggestedNextStep,
+}: {
+  readonly details?: Record<string, unknown>
+  readonly id: string
+  readonly message: string
+  readonly severity: PresentationProjectionDiagnostic['severity']
+  readonly slot: ResolvedDocumentWorkspaceSurfaceSlot
+  readonly sourceId: string
+  readonly status: NonNullable<PresentationProjectionDiagnostic['interpretation']>['status']
+  readonly suggestedNextStep: string
+}) {
+  return createPresentationProjectionDiagnostic({
+    category: 'incomplete-projection',
+    details,
+    id,
+    interpretation: {
+      status,
+      target: 'react',
+    },
+    message,
+    severity,
+    source: sourceId,
+    subject: {
+      id: slot.id,
+      kind: 'document-workspace-surface-slot-renderer',
+    },
+    suggestedNextStep,
+  })
+}

package/src/index.ts

@@ -0,0 +1,53 @@
+export const cohesivePresentationReactShadcnAdapterId =
+  'cohesive.presentation.react-shadcn'
+export * from './document-workspace-surface-slot-renderers'
+export * from './navigation-shell-frame-renderer-registry'
+export * from './navigation-shell-slot-renderer-registry'
+export * from './page-host-unavailable-renderer'
+export * from './presentation-component-groups'
+export * from './presentation-action-group'
+export * from './presentation-badge-target-interpreter'
+export * from './presentation-component-system'
+export * from './presentation-component-system-diagnostics'
+export * from './presentation-icon-registry'
+export * from './presentation-icon-diagnostics'
+export * from './presentation-projection-trace-panel'
+export * from './presentation-routed-surface-host'
+export * from './presentation-shadcn-component-system'
+export * from './presentation-standard-renderers'
+export * from './presentation-surface-renderer'
+export * from './presentation-value-renderers'
+export * from './process-task-icons'
+export * from './projected-activity-state'
+export * from './projected-document-action-status-notices'
+export * from './projected-document-badges'
+export * from './projected-document-editor-surface'
+export * from './projected-document-workspace'
+export * from './projected-document-workspace-shell'
+export * from './projected-document-workspace-notices'
+export * from './projected-document-workspace-prompt-child-view-registry'
+export * from './projected-document-workspace-prompt-child-view-renderers'
+export * from './projected-collection-view'
+export * from './projected-collection-action-runtime-diagnostics'
+export * from './projected-field-value-rendering'
+export * from './projected-inline-list'
+export * from './projected-input-form'
+export * from './projected-metric-dashboard'
+export * from './projected-metric-strip'
+export * from './projected-navigation-shell'
+export * from './projected-navigation-shell-view-host'
+export * from './projected-presentation-badges'
+export * from './projected-presentation-diagnostics'
+export * from './projected-presentation-flow-layer'
+export * from './projected-prompt-document-preview'
+export * from './projected-prompt-child-view-renderer'
+export * from './projected-prompt-view'
+export * from './projected-record-details'
+export * from './projected-query-form'
+export * from './projected-routed-surface-runtime'
+export * from './projected-process-task-notices'
+export * from './projected-tabs-view'
+export * from './projected-view-chrome'
+export * from './projected-view-surface'
+export * from './standard-view-chrome-slot-renderers'
+export * from './standard-collection-chrome-slot-renderers'

package/src/navigation-shell-frame-renderer-registry.ts

@@ -0,0 +1,29 @@
+import type {
+  ProjectedNavigationShellLayout,
+} from '@cohesivesystems/presentation-tailwind'
+import type {
+  NavigationShellFrameRenderer as ReactNavigationShellFrameRenderer,
+  NavigationShellFrameRendererBinding as ReactNavigationShellFrameRendererBinding,
+  NavigationShellFrameRendererRegistry as ReactNavigationShellFrameRendererRegistry,
+  ProjectedNavigationShellFrameRenderContext as ReactProjectedNavigationShellFrameRenderContext,
+} from '@cohesivesystems/presentation-react'
+
+export {
+  createNavigationShellFrameRendererKey,
+  createNavigationShellFrameRendererRegistry,
+  getNavigationShellFrameRendererRegistryKeys,
+  hasNavigationShellFrameRendererBinding,
+  resolveNavigationShellFrameRenderer,
+} from '@cohesivesystems/presentation-react'
+
+export type ProjectedNavigationShellFrameRenderContext =
+  ReactProjectedNavigationShellFrameRenderContext<ProjectedNavigationShellLayout>
+
+export type NavigationShellFrameRenderer =
+  ReactNavigationShellFrameRenderer<ProjectedNavigationShellLayout>
+
+export type NavigationShellFrameRendererRegistry =
+  ReactNavigationShellFrameRendererRegistry<ProjectedNavigationShellLayout>
+
+export type NavigationShellFrameRendererBinding =
+  ReactNavigationShellFrameRendererBinding<ProjectedNavigationShellLayout>

package/src/navigation-shell-slot-renderer-registry.ts

@@ -0,0 +1,46 @@
+import type {
+  ProjectedNavigationShellSlotLayout,
+} from '@cohesivesystems/presentation-tailwind'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import type {
+  NavigationShellSlotRenderer as ReactNavigationShellSlotRenderer,
+  NavigationShellSlotRendererBinding as ReactNavigationShellSlotRendererBinding,
+  NavigationShellSlotRendererRegistry as ReactNavigationShellSlotRendererRegistry,
+  ProjectedNavigationShellSlotRenderContext as ReactProjectedNavigationShellSlotRenderContext,
+} from '@cohesivesystems/presentation-react'
+
+export {
+  createNavigationShellSlotRendererKey,
+  createNavigationShellSlotRendererRegistry,
+  getNavigationShellSlotRendererCandidateKeys,
+  getNavigationShellSlotRendererRegistryKeys,
+  hasNavigationShellSlotRendererBinding,
+  navigationShellSlotAnyPlacement,
+  resolveNavigationShellSlotRenderer,
+} from '@cohesivesystems/presentation-react'
+
+export type ProjectedNavigationShellSlotRenderContext =
+  ReactProjectedNavigationShellSlotRenderContext<
+    ProjectedNavigationShellSlotLayout,
+    PresentationComponentSystem
+  >
+
+export type NavigationShellSlotRenderer =
+  ReactNavigationShellSlotRenderer<
+    ProjectedNavigationShellSlotLayout,
+    PresentationComponentSystem
+  >
+
+export type NavigationShellSlotRendererRegistry =
+  ReactNavigationShellSlotRendererRegistry<
+    ProjectedNavigationShellSlotLayout,
+    PresentationComponentSystem
+  >
+
+export type NavigationShellSlotRendererBinding =
+  ReactNavigationShellSlotRendererBinding<
+    ProjectedNavigationShellSlotLayout,
+    PresentationComponentSystem
+  >

package/src/page-host-unavailable-renderer.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react'
+
+import type {
+  NavigationDefinitionProjection,
+} from '@cohesivesystems/presentation-core'
+import type {
+  NavigationRouteDefinition,
+  PageHostDefinition,
+} from '@cohesivesystems/presentation-contracts'
+import type {
+  UnknownPageHostRenderContext,
+} from '@cohesivesystems/presentation-react'
+import { ProjectedStatusBlock } from './projected-activity-state'
+
+type UnavailablePageHostReason = UnknownPageHostRenderContext<
+  unknown,
+  NavigationDefinitionProjection<NavigationRouteDefinition, PageHostDefinition>,
+  NavigationRouteDefinition,
+  PageHostDefinition,
+  unknown
+>['reason']
+
+/**
+ * Diagnostic renderer used when a navigation target cannot be projected to a
+ * concrete page-host component.
+ */
+export function renderDefaultUnavailablePageHost<
+  TModule,
+  TNavigation extends NavigationDefinitionProjection<TRoute, TPageHost>,
+  TRoute extends NavigationRouteDefinition,
+  TPageHost extends PageHostDefinition,
+  TProjectionContext,
+>({
+  componentKey,
+  pageHost,
+  reason,
+  route,
+}: UnknownPageHostRenderContext<
+  TModule,
+  TNavigation,
+  TRoute,
+  TPageHost,
+  TProjectionContext
+>): ReactNode {
+  const label =
+    reason === 'unmatched-route'
+      ? 'This route is not available.'
+      : createUnavailablePageHostLabel({ componentKey, pageHost, reason, route })
+
+  return <ProjectedStatusBlock label={label} />
+}
+
+function createUnavailablePageHostLabel({
+  componentKey,
+  pageHost,
+  reason,
+  route,
+}: {
+  readonly componentKey?: string | null
+  readonly pageHost: PageHostDefinition | null
+  readonly reason: UnavailablePageHostReason
+  readonly route: NavigationRouteDefinition | null
+}) {
+  if (!pageHost) {
+    return route?.Label
+      ? `${route.Label} is not available.`
+      : 'This navigation target is not available.'
+  }
+
+  if (componentKey) {
+    return `Navigation target '${pageHost.Id}' is bound to unknown component '${componentKey}'.`
+  }
+
+  if (reason === 'missing-component-binding' && route?.Label) {
+    return `${route.Label} is not available yet.`
+  }
+
+  return `Navigation target '${pageHost.Id}' is not available.`
+}