@cohesivesystems/presentation-tailwind 0.1.0-alpha.1

package/src/presentation-routed-surface-layout.ts

@@ -0,0 +1,87 @@
+import type {
+  DesignIntent,
+} from '@cohesivesystems/presentation-contracts'
+import type { PresentationDesignSystem } from './presentation-design-system'
+import {
+  projectPresentationDesignIntentDiagnostics,
+  type PresentationProjectionDiagnostic,
+  type PresentationSurface,
+} from '@cohesivesystems/presentation-core'
+
+export interface PresentationRoutedSurfaceLayoutContext {
+  readonly designSystem: PresentationDesignSystem
+  readonly surface: PresentationSurface | null
+}
+
+export interface PresentationRoutedSurfaceLayout {
+  readonly className: string
+  readonly contentClassName: string
+}
+
+export interface PresentationRoutedSurfaceLayoutDiagnosticsOptions {
+  readonly designSystem: PresentationDesignSystem
+  readonly sourceId: string
+  readonly surface: PresentationSurface | null
+}
+
+/**
+ * Resolves standard route-level layout chrome from presentation design intent.
+ */
+export function resolvePresentationRoutedSurfaceLayout({
+  designSystem,
+  surface,
+}: PresentationRoutedSurfaceLayoutContext): PresentationRoutedSurfaceLayout {
+  return {
+    className: resolvePresentationRoutedSurfaceClassName(
+      surface?.rootView?.Design,
+      designSystem,
+    ),
+    contentClassName: resolvePresentationRoutedSurfaceContentClassName(
+      surface?.rootView?.Design,
+      designSystem,
+    ),
+  }
+}
+
+export function resolvePresentationRoutedSurfaceClassName(
+  design: DesignIntent | null | undefined,
+  designSystem: PresentationDesignSystem,
+): string {
+  return designSystem.classNames.routedSurface.root({ design })
+}
+
+export function resolvePresentationRoutedSurfaceContentClassName(
+  design: DesignIntent | null | undefined,
+  designSystem: PresentationDesignSystem,
+): string {
+  return designSystem.classNames.routedSurface.content({ design })
+}
+
+export function projectPresentationRoutedSurfaceLayoutDiagnostics({
+  designSystem,
+  sourceId,
+  surface,
+}: PresentationRoutedSurfaceLayoutDiagnosticsOptions): readonly PresentationProjectionDiagnostic[] {
+  const rootView = surface?.rootView
+  if (!rootView) {
+    return []
+  }
+
+  return projectPresentationDesignIntentDiagnostics({
+    design: rootView.Design,
+    ignoredFields: designSystem.diagnostics.routedSurfaceLayout.ignoredFields,
+    interpretedFields: designSystem.diagnostics.routedSurfaceLayout.interpretedFields,
+    message:
+      `Routed surface root view '${rootView.Name}' has design intent fields ` +
+      'that the standard routed-surface layout interpreter does not yet project.',
+    source: sourceId,
+    subject: {
+      id: rootView.Id,
+      kind: 'ViewDefinition',
+      name: rootView.Name,
+    },
+    suggestedNextStep:
+      'Extend the routed-surface layout interpreter for these design fields or move the policy into the design system.',
+    target: 'react-routed-surface-layout',
+  })
+}

package/src/presentation-text-badge.ts

@@ -0,0 +1,28 @@
+/**
+ * Supported visual tones for compact text badges rendered with Tailwind
+ * utility classes.
+ */
+export type PresentationTextBadgeTone = 'amber' | 'red' | 'sky' | 'slate' | 'teal' | 'violet'
+
+/**
+ * Resolves the Tailwind utility classes for a compact presentation text badge.
+ *
+ * The returned classes are intentionally static so Tailwind can discover them
+ * during content scanning.
+ */
+export function getPresentationTextBadgeClassName(tone: PresentationTextBadgeTone) {
+  switch (tone) {
+    case 'amber':
+      return 'border-amber-700/15 bg-amber-50 text-amber-800'
+    case 'red':
+      return 'border-red-700/15 bg-red-50 text-red-700'
+    case 'sky':
+      return 'border-sky-700/15 bg-sky-50 text-sky-700'
+    case 'teal':
+      return 'border-teal-700/15 bg-teal-50 text-teal-700'
+    case 'violet':
+      return 'border-violet-700/15 bg-violet-50 text-violet-700'
+    default:
+      return 'border-slate-950/10 bg-slate-100 text-slate-700'
+  }
+}

package/src/theme.css

@@ -0,0 +1,7 @@
+@theme {
+  --color-cohesive-surface: hsl(0 0% 100%);
+  --color-cohesive-surface-muted: hsl(210 20% 98%);
+  --color-cohesive-border: hsl(214 32% 91%);
+  --color-cohesive-text: hsl(222 47% 11%);
+  --color-cohesive-text-muted: hsl(215 16% 47%);
+}