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

package/src/projected-navigation-shell.tsx

@@ -0,0 +1,219 @@
+import { type ReactNode, useCallback, useMemo } from 'react'
+
+import {
+  defaultNavigationShellSlotPlacements,
+  findPresentationView,
+  projectNavigationShellDiagnostics,
+  resolveProjectedNavigationShellSlots,
+} from '@cohesivesystems/presentation-core'
+import {
+  getNavigationShellFrameRendererRegistryKeys,
+  resolveNavigationShellFrameRenderer,
+  type NavigationShellFrameRendererRegistry,
+} from './navigation-shell-frame-renderer-registry'
+import {
+  projectNavigationShellLayoutDiagnostics,
+  resolveProjectedNavigationShellLayout,
+  resolveProjectedNavigationShellSlotLayout,
+} from '@cohesivesystems/presentation-tailwind'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import {
+  projectPresentationDesignSystemBindingDiagnostics,
+  projectPresentationComponentSystemDiagnostics,
+} from './presentation-component-system-diagnostics'
+import type { PresentationDesignSystem } from '@cohesivesystems/presentation-tailwind'
+import {
+  getNavigationShellSlotRendererRegistryKeys,
+  resolveNavigationShellSlotRenderer,
+  type NavigationShellSlotRendererRegistry,
+} from './navigation-shell-slot-renderer-registry'
+import {
+  usePresentationModule,
+  useRegisterPresentationProjectionDiagnostics,
+} from '@cohesivesystems/presentation-react'
+import {
+  standardNavigationShellSlotRenderers,
+} from '@cohesivesystems/presentation-react'
+import {
+  standardNavigationShellFrameRenderers,
+} from '@cohesivesystems/presentation-react'
+import type {
+  NavigationDefinition,
+  NavigationNodeDefinition,
+  NavigationShellRegionDefinition,
+  NavigationShellSlotDefinition,
+} from '@cohesivesystems/presentation-contracts'
+
+export interface ProjectedNavigationShellProps {
+  readonly activePath: string
+  readonly children: ReactNode
+  readonly componentSystem: PresentationComponentSystem
+  readonly defaultComponentSystem: PresentationComponentSystem
+  readonly designSystem: PresentationDesignSystem
+  readonly frameRendererRegistry?: NavigationShellFrameRendererRegistry
+  readonly isNodeIconSupported?: (icon: string) => boolean
+  readonly isShellRegionComponentBound?: (
+    componentKey: string,
+    region: NavigationShellRegionDefinition,
+  ) => boolean
+  readonly isShellRegionComponentTargetBound?: (
+    region: NavigationShellRegionDefinition,
+  ) => boolean
+  readonly isShellRegionSupported?: (region: NavigationShellRegionDefinition) => boolean
+  readonly navigation: NavigationDefinition
+  readonly renderNodeIcon?: (node: NavigationNodeDefinition) => ReactNode
+  readonly renderShellIcon?: (icon: string) => ReactNode
+  readonly renderShellRegion?: (region: NavigationShellRegionDefinition) => ReactNode
+  readonly slotRendererRegistry?: NavigationShellSlotRendererRegistry
+  readonly supportedSlotPlacements?: readonly string[]
+}
+
+/**
+ * Interprets a navigation shell from the presentation/navigation IR.
+ *
+ * The shell frame owns generic concerns such as brand chrome, primary
+ * navigation, placement slots, and the routed content slot. App-specific
+ * integrations remain attached through icon and shell-region renderers.
+ */
+export function ProjectedNavigationShell({
+  activePath,
+  children,
+  componentSystem,
+  defaultComponentSystem,
+  designSystem,
+  isNodeIconSupported,
+  isShellRegionComponentBound,
+  isShellRegionComponentTargetBound,
+  isShellRegionSupported,
+  navigation,
+  renderNodeIcon,
+  renderShellIcon,
+  renderShellRegion,
+  frameRendererRegistry = standardNavigationShellFrameRenderers,
+  slotRendererRegistry = standardNavigationShellSlotRenderers,
+  supportedSlotPlacements = defaultNavigationShellSlotPlacements,
+}: ProjectedNavigationShellProps) {
+  const module = usePresentationModule()
+  const shellSlots = useMemo(
+    () => resolveProjectedNavigationShellSlots(navigation),
+    [navigation],
+  )
+  const shellLayout = useMemo(
+    () => resolveProjectedNavigationShellLayout(navigation, shellSlots, designSystem),
+    [designSystem, navigation, shellSlots],
+  )
+  const shellFrameRendererKeys = useMemo(
+    () => getNavigationShellFrameRendererRegistryKeys(frameRendererRegistry),
+    [frameRendererRegistry],
+  )
+  const shellSlotRendererKeys = useMemo(
+    () => getNavigationShellSlotRendererRegistryKeys(slotRendererRegistry),
+    [slotRendererRegistry],
+  )
+  const renderSlot = useCallback(
+    (slot: NavigationShellSlotDefinition | null) => {
+      if (!slot) {
+        return null
+      }
+
+      const renderer = resolveNavigationShellSlotRenderer(slotRendererRegistry, slot)
+
+      return renderer?.({
+        activePath,
+        children,
+        componentSystem,
+        navigation,
+        renderNodeIcon,
+        renderShellIcon,
+        renderShellRegion,
+        slot,
+        slotLayout:
+          shellLayout.slotLayouts[slot.Id] ??
+          resolveProjectedNavigationShellSlotLayout(slot, designSystem),
+      }) ?? null
+    },
+    [
+      activePath,
+      children,
+      componentSystem,
+      designSystem,
+      navigation,
+      renderNodeIcon,
+      renderShellIcon,
+      renderShellRegion,
+      shellLayout,
+      slotRendererRegistry,
+    ],
+  )
+  const shellFrameRenderer = useMemo(
+    () => resolveNavigationShellFrameRenderer(frameRendererRegistry, navigation.Shell.Kind),
+    [frameRendererRegistry, navigation.Shell.Kind],
+  )
+  const diagnostics = useMemo(
+    () => [
+      ...projectPresentationComponentSystemDiagnostics({
+        componentSystem,
+        defaultComponentSystem,
+        sourceId: `navigation-shell:${navigation.Shell.Id}`,
+      }),
+      ...projectPresentationDesignSystemBindingDiagnostics({
+        componentSystem,
+        module,
+        sourceId: `navigation-shell:${navigation.Shell.Id}`,
+      }),
+      ...projectNavigationShellLayoutDiagnostics({
+        designSystem,
+        navigation,
+        shellFrameRendererKeys,
+        shellSlots,
+      }),
+      ...projectNavigationShellDiagnostics({
+        isNodeIconSupported,
+        isShellRegionComponentBound,
+        isShellRegionComponentTargetBound,
+        isShellRegionSupported,
+        isShellRegionViewBound: module
+          ? (viewId) => Boolean(findPresentationView(module, viewId))
+          : undefined,
+        navigation,
+        renderShellIconBound: Boolean(renderShellIcon),
+        shellSlotRendererKeys,
+        shellSlots,
+        supportedSlotPlacements,
+      }),
+    ],
+    [
+      componentSystem,
+      defaultComponentSystem,
+      designSystem,
+      isNodeIconSupported,
+      isShellRegionComponentBound,
+      isShellRegionComponentTargetBound,
+      isShellRegionSupported,
+      module,
+      navigation,
+      renderShellIcon,
+      shellFrameRendererKeys,
+      shellSlotRendererKeys,
+      shellSlots,
+      supportedSlotPlacements,
+    ],
+  )
+  useRegisterPresentationProjectionDiagnostics(
+    `navigation-shell:${navigation.Shell.Id}`,
+    diagnostics,
+  )
+
+  return shellFrameRenderer?.({
+    activePath,
+    children,
+    layout: shellLayout,
+    navigation,
+    renderNodeIcon,
+    renderShellIcon,
+    renderShellRegion,
+    renderSlot,
+  }) ?? children
+}

package/src/projected-presentation-badges.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react'
+import type { PresentationBadgeVariant } from './presentation-component-groups'
+
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import type { PresentationDesignSystem } from '@cohesivesystems/presentation-tailwind'
+import type {
+  ResolvedPresentationBadge,
+} from '@cohesivesystems/presentation-core'
+
+export interface ProjectedPresentationBadgeItem
+  extends Omit<ResolvedPresentationBadge, 'label'> {
+  readonly className?: string
+  readonly label: ReactNode
+}
+
+export interface ProjectedPresentationBadgeProps {
+  readonly badge: ProjectedPresentationBadgeItem
+  readonly className?: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly designSystem: PresentationDesignSystem
+  readonly variant?: PresentationBadgeVariant
+}
+
+export interface ProjectedPresentationBadgesProps {
+  readonly badgeClassName?: string
+  readonly badges: readonly ProjectedPresentationBadgeItem[]
+  readonly className?: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly designSystem: PresentationDesignSystem
+  readonly variant?: PresentationBadgeVariant
+}
+
+/**
+ * Standard badge interpreter for resolved presentation badge semantics.
+ *
+ * The badge model carries semantic tone and content only; this component is
+ * where the target component system and design system decide how that becomes
+ * concrete UI.
+ */
+export function ProjectedPresentationBadge({
+  badge,
+  className,
+  componentSystem,
+  designSystem,
+  variant = 'outline',
+}: ProjectedPresentationBadgeProps) {
+  const BadgeComponent = componentSystem.badges.Badge
+
+  return (
+    <BadgeComponent
+      className={cn(
+        designSystem.classNames.badge.tone({ tone: badge.tone }),
+        className,
+        badge.className,
+      )}
+      variant={variant}
+    >
+      {badge.label}
+    </BadgeComponent>
+  )
+}
+
+export function ProjectedPresentationBadges({
+  badgeClassName,
+  badges,
+  className,
+  componentSystem,
+  designSystem,
+  variant = 'outline',
+}: ProjectedPresentationBadgesProps) {
+  if (badges.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={cn('flex flex-wrap items-center gap-2', className)}>
+      {badges.map((badge, index) => (
+        <ProjectedPresentationBadge
+          badge={badge}
+          className={badgeClassName}
+          componentSystem={componentSystem}
+          designSystem={designSystem}
+          key={badge.id ?? index}
+          variant={variant}
+        />
+      ))}
+    </div>
+  )
+}
+
+function cn(...values: readonly (false | null | string | undefined)[]) {
+  return values.filter(Boolean).join(' ')
+}

package/src/projected-presentation-diagnostics.tsx

@@ -0,0 +1,120 @@
+import type {
+  PresentationProjectionDiagnostic,
+  PresentationProjectionDiagnosticSeverity,
+} from '@cohesivesystems/presentation-core'
+
+export interface ProjectedPresentationDiagnosticsProps {
+  readonly diagnostics: readonly PresentationProjectionDiagnostic[]
+  readonly emptyLabel?: string
+  readonly minSeverity?: PresentationProjectionDiagnosticSeverity
+  readonly title?: string | null
+}
+
+const severityRank: Record<PresentationProjectionDiagnosticSeverity, number> = {
+  info: 0,
+  warning: 1,
+  error: 2,
+}
+
+/** Renders projection TODOs emitted by frontend interpreters. */
+export function ProjectedPresentationDiagnostics({
+  diagnostics,
+  emptyLabel,
+  minSeverity = 'warning',
+  title = 'Projection diagnostics',
+}: ProjectedPresentationDiagnosticsProps) {
+  const visibleDiagnostics = diagnostics.filter(
+    (diagnostic) => severityRank[diagnostic.severity] >= severityRank[minSeverity],
+  )
+
+  if (visibleDiagnostics.length === 0) {
+    return emptyLabel ? (
+      <p className="rounded-md border border-slate-950/10 bg-slate-50 px-3 py-2 text-sm text-slate-500">
+        {emptyLabel}
+      </p>
+    ) : null
+  }
+
+  const hasError = visibleDiagnostics.some((diagnostic) => diagnostic.severity === 'error')
+  const hasWarning = visibleDiagnostics.some((diagnostic) => diagnostic.severity === 'warning')
+
+  return (
+    <section
+      className={getDiagnosticsPanelClassName({ hasError, hasWarning })}
+    >
+      {title ? <div className="font-medium">{title}</div> : null}
+      <ul className="mt-1 grid gap-1">
+        {visibleDiagnostics.map((diagnostic) => (
+          <li className="grid gap-0.5" key={`${diagnostic.source}:${diagnostic.id}`}>
+            <div className="flex flex-wrap items-center gap-1">
+              <span className={getDiagnosticSeverityClassName(diagnostic.severity)}>
+                {formatDiagnosticSeverity(diagnostic.severity)}
+              </span>
+              {diagnostic.category ? (
+                <span className="rounded bg-white/70 px-1.5 py-0.5 text-[0.65rem] font-medium uppercase tracking-wide opacity-80">
+                  {diagnostic.category}
+                </span>
+              ) : null}
+              {diagnostic.interpretation ? (
+                <span className="rounded bg-white/70 px-1.5 py-0.5 text-[0.65rem] font-medium uppercase tracking-wide opacity-80">
+                  {diagnostic.interpretation.status}
+                </span>
+              ) : null}
+              <span>{diagnostic.message}</span>
+            </div>
+            <span className="break-all font-mono text-[0.7rem] opacity-75">
+              {diagnostic.source}
+              {diagnostic.interpretation
+                ? ` - target:${diagnostic.interpretation.target}`
+                : ''}
+              {diagnostic.subject ? ` - ${diagnostic.subject.kind}:${diagnostic.subject.id}` : ''}
+            </span>
+            {diagnostic.suggestedNextStep ? (
+              <span className="text-[0.72rem] opacity-85">
+                {diagnostic.suggestedNextStep}
+              </span>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+function getDiagnosticsPanelClassName({
+  hasError,
+  hasWarning,
+}: {
+  readonly hasError: boolean
+  readonly hasWarning: boolean
+}) {
+  if (hasError) {
+    return 'rounded-md border border-red-300/70 bg-red-50 px-3 py-2 text-sm text-red-900'
+  }
+
+  if (hasWarning) {
+    return 'rounded-md border border-amber-300/70 bg-amber-50 px-3 py-2 text-sm text-amber-950'
+  }
+
+  return 'rounded-md border border-sky-200/80 bg-sky-50 px-3 py-2 text-sm text-sky-950'
+}
+
+function getDiagnosticSeverityClassName(
+  severity: PresentationProjectionDiagnosticSeverity,
+) {
+  if (severity === 'error') {
+    return 'rounded bg-red-100 px-1.5 py-0.5 text-[0.65rem] font-medium uppercase tracking-wide text-red-700'
+  }
+
+  if (severity === 'warning') {
+    return 'rounded bg-amber-100 px-1.5 py-0.5 text-[0.65rem] font-medium uppercase tracking-wide text-amber-800'
+  }
+
+  return 'rounded bg-sky-100 px-1.5 py-0.5 text-[0.65rem] font-medium uppercase tracking-wide text-sky-700'
+}
+
+function formatDiagnosticSeverity(
+  severity: PresentationProjectionDiagnosticSeverity,
+) {
+  return severity === 'warning' ? 'warn' : severity
+}

package/src/projected-presentation-flow-layer.tsx

@@ -0,0 +1,186 @@
+import { useMemo, type ReactNode } from 'react'
+
+import type {
+  PresentationDataSourceResolver,
+  PresentationModuleDefinition,
+  ViewChromeSlotDefinition,
+  ViewDefinition,
+} from '@cohesivesystems/presentation-core'
+import {
+  createPresentationTestAttributes,
+} from '@cohesivesystems/presentation-core'
+import type {
+  PresentationShadcnComponentSystem as PresentationComponentSystem,
+} from './presentation-shadcn-component-system'
+import type { PresentationDesignSystem } from '@cohesivesystems/presentation-tailwind'
+import type {
+  PresentationActionGroupOptions,
+} from './presentation-action-group'
+import type {
+  ProjectedDocumentActionStatusMap,
+} from '@cohesivesystems/presentation-core'
+import type {
+  ProjectedViewSurfaceChromeSlotRenderer,
+} from './projected-view-surface'
+import {
+  renderStandardViewChromeSlot,
+} from './standard-view-chrome-slot-renderers'
+import type {
+  PresentationFlowRuntimeEntry,
+  PresentationFlowRuntimeRegistrySnapshot,
+} from '@cohesivesystems/presentation-react'
+import {
+  createProjectedPromptChildViewRenderer,
+  projectPromptChildViewRendererDiagnostics,
+  type ProjectedPromptChildViewRendererRegistry,
+} from './projected-prompt-child-view-renderer'
+import { ProjectedPromptView } from './projected-prompt-view'
+import {
+  useRegisterPresentationProjectionDiagnostics,
+} from '@cohesivesystems/presentation-react'
+
+export interface ProjectedPresentationFlowLayerProps<TContext> {
+  readonly actionGroupOptions?: PresentationActionGroupOptions<TContext>
+  readonly actionStatuses?: ProjectedDocumentActionStatusMap
+  readonly actionRegionId?: string
+  readonly childViewRegistry: ProjectedPromptChildViewRendererRegistry<TContext>
+  readonly componentSet?: string
+  readonly componentSystem: PresentationComponentSystem
+  readonly context: TContext
+  readonly dataSourceResolver: PresentationDataSourceResolver
+  readonly designSystem: PresentationDesignSystem
+  readonly flowRegistry: PresentationFlowRuntimeRegistrySnapshot
+  readonly module: PresentationModuleDefinition | null
+  readonly renderChromeSlot?: (
+    context: ProjectedPresentationFlowLayerChromeSlotRenderContext<TContext>,
+  ) => ReactNode
+  readonly shouldRenderEntry?: (
+    context: ProjectedPresentationFlowLayerRenderContext,
+  ) => boolean
+}
+
+export interface ProjectedPresentationFlowLayerRenderContext
+  extends Omit<PresentationFlowRuntimeEntry, 'view'> {
+  readonly view: ViewDefinition
+}
+
+export interface ProjectedPresentationFlowLayerChromeSlotRenderContext<TContext>
+  extends ProjectedPresentationFlowLayerRenderContext {
+  readonly context: TContext
+  readonly dataSourceResolver: PresentationDataSourceResolver
+  readonly slot: ViewChromeSlotDefinition
+}
+
+export function ProjectedPresentationFlowLayer<TContext>({
+  actionGroupOptions,
+  actionStatuses,
+  actionRegionId,
+  childViewRegistry,
+  componentSet,
+  componentSystem,
+  context,
+  dataSourceResolver,
+  designSystem,
+  flowRegistry,
+  module,
+  renderChromeSlot,
+  shouldRenderEntry,
+}: ProjectedPresentationFlowLayerProps<TContext>) {
+  const promptChildViewRendererDiagnostics = useMemo(
+    () =>
+      module
+        ? flowRegistry.activeEntries.flatMap((entry) =>
+            entry.view
+              ? projectPromptChildViewRendererDiagnostics({
+                componentSet,
+                module,
+                promptView: entry.view,
+                registry: childViewRegistry,
+                sourceId: 'presentation-flow.prompt-child-view-renderers',
+              })
+              : [])
+        : [],
+    [childViewRegistry, componentSet, flowRegistry.activeEntries, module],
+  )
+  useRegisterPresentationProjectionDiagnostics(
+    'presentation-flow.prompt-child-view-renderers',
+    promptChildViewRendererDiagnostics,
+  )
+
+  if (!module) {
+    return null
+  }
+
+  return (
+    <>
+      {flowRegistry.activeEntries.map((entry) => {
+        if (!entry.view) {
+          return null
+        }
+
+        const promptView = entry.view
+        const renderContext = {
+          ...entry,
+          view: promptView,
+        } satisfies ProjectedPresentationFlowLayerRenderContext
+        if (shouldRenderEntry?.(renderContext) === false) {
+          return null
+        }
+
+        const renderPromptChildView = createProjectedPromptChildViewRenderer({
+          componentSet,
+          componentSystem,
+          context,
+          dataSourceResolver,
+          designSystem,
+          module,
+          promptView,
+          registry: childViewRegistry,
+        })
+        const renderPromptChromeSlot: ProjectedViewSurfaceChromeSlotRenderer = (slot, view) =>
+          renderChromeSlot?.({
+            ...renderContext,
+            context,
+            dataSourceResolver,
+            slot,
+          }) ?? renderStandardViewChromeSlot({
+            actionContext: context,
+            actionGroupOptions,
+            actionStatuses,
+            componentSystem,
+            dataSourceResolver,
+            designSystem,
+            module,
+            resource: dataSourceResolver.resolveViewPrimary(view ?? promptView)?.data,
+            slot,
+            view: view ?? promptView,
+            workspaceView: view ?? promptView,
+          })
+
+        return (
+          <div
+            key={entry.flow.Id}
+            {...createPresentationTestAttributes({
+              flowId: entry.flow.Id,
+              flowStateId: entry.state.Id,
+              viewId: promptView.Id,
+            })}
+          >
+            <ProjectedPromptView
+              actionGroupOptions={actionGroupOptions}
+              actionRegionId={actionRegionId}
+              componentSystem={componentSystem}
+              context={context}
+              dataSourceResolver={dataSourceResolver}
+              designSystem={designSystem}
+              module={module}
+              renderChromeSlot={renderPromptChromeSlot}
+              renderView={renderPromptChildView}
+              view={promptView}
+            />
+          </div>
+        )
+      })}
+    </>
+  )
+}