@actuate-media/cms-admin 0.14.1 → 0.16.0

package/src/views/page-editor/sections/HeroBannerSection.tsx

@@ -0,0 +1,44 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { PreviewButton, isDarkBackground, str } from './parts.js'
+
+export function HeroBannerSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const dark = isDarkBackground(section.settings)
+  const eyebrow = str(c, 'eyebrow')
+  const heading = str(c, 'heading')
+  const body = str(c, 'body')
+
+  return (
+    <div className="mx-auto max-w-3xl px-6 text-center">
+      {eyebrow && (
+        <p
+          className={`mb-3 text-sm font-medium tracking-wide uppercase ${dark ? 'text-violet-200' : 'text-violet-600'}`}
+        >
+          {eyebrow}
+        </p>
+      )}
+      <h1 className="text-3xl leading-tight font-semibold tracking-tight sm:text-5xl">
+        {heading || 'Your headline goes here'}
+      </h1>
+      {body && (
+        <p
+          className={`mx-auto mt-5 max-w-2xl text-base sm:text-lg ${dark ? 'text-violet-100' : 'text-zinc-600'}`}
+        >
+          {body}
+        </p>
+      )}
+      <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+        <PreviewButton
+          label={str(c, 'primaryButtonLabel')}
+          href={str(c, 'primaryButtonUrl')}
+          tone={dark ? 'onDark' : 'primary'}
+        />
+        <PreviewButton
+          label={str(c, 'secondaryButtonLabel')}
+          href={str(c, 'secondaryButtonUrl')}
+          tone="ghost"
+        />
+      </div>
+    </div>
+  )
+}

package/src/views/page-editor/sections/MissionSection.tsx

@@ -0,0 +1,22 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+/** Generic "Text Block" / mission statement section. */
+export function MissionSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const alignment = str(c, 'alignment', 'center')
+  const align = alignment === 'left' ? 'text-left' : 'text-center mx-auto'
+  const heading = str(c, 'heading')
+  const body = str(c, 'body')
+
+  return (
+    <div className={`max-w-3xl px-6 ${align}`}>
+      {heading && (
+        <h2 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
+          {heading}
+        </h2>
+      )}
+      {body && <p className="mt-4 text-base leading-relaxed text-zinc-600 sm:text-lg">{body}</p>}
+    </div>
+  )
+}

package/src/views/page-editor/sections/PullQuoteSection.tsx

@@ -0,0 +1,27 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+/** A highlighted pull quote with optional attribution. */
+export function PullQuoteSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const quote = str(c, 'quote')
+  const attribution = str(c, 'attribution')
+  const role = str(c, 'role')
+
+  if (!quote) return null
+
+  return (
+    <figure className="mx-auto max-w-3xl px-6">
+      <blockquote className="border-l-4 border-violet-500 pl-6">
+        <p className="text-xl leading-relaxed font-medium text-zinc-800 sm:text-2xl">“{quote}”</p>
+      </blockquote>
+      {(attribution || role) && (
+        <figcaption className="mt-3 pl-6 text-sm text-zinc-500">
+          {attribution && <span className="font-medium text-zinc-700">{attribution}</span>}
+          {attribution && role && <span aria-hidden> · </span>}
+          {role}
+        </figcaption>
+      )}
+    </figure>
+  )
+}

package/src/views/page-editor/sections/RelatedPostsSection.tsx

@@ -0,0 +1,55 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str, type PostRenderContext } from './parts.js'
+
+/**
+ * A grid of related posts. Uses resolved posts from context when available;
+ * otherwise renders placeholder cards so the layout reads correctly in the
+ * editor before data is wired up.
+ */
+export function RelatedPostsSection({
+  section,
+  context,
+}: {
+  section: PageSection
+  context?: PostRenderContext
+}) {
+  const c = section.content
+  const heading = str(c, 'heading', 'Related posts')
+  const count = Number.parseInt(str(c, 'count', '3'), 10) || 3
+
+  const resolved = context?.relatedPosts ?? []
+  const cards =
+    resolved.length > 0
+      ? resolved.slice(0, count)
+      : Array.from({ length: count }, (_, i) => ({
+          title: `Related post ${i + 1}`,
+          excerpt: 'A short summary of the related post will appear here.',
+          url: undefined as string | undefined,
+        }))
+
+  const cols = count >= 4 ? 'sm:grid-cols-2 lg:grid-cols-4' : 'sm:grid-cols-3'
+
+  return (
+    <div className="mx-auto max-w-5xl px-6">
+      {heading && (
+        <h2 className="mb-6 text-2xl font-semibold tracking-tight text-zinc-900">{heading}</h2>
+      )}
+      <div className={`grid grid-cols-1 gap-4 ${cols}`}>
+        {cards.map((post, i) => (
+          <div
+            key={i}
+            className="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm"
+          >
+            <div className="aspect-[16/9] bg-zinc-100" aria-hidden />
+            <div className="p-4">
+              <p className="text-base font-medium text-zinc-900">{post.title}</p>
+              {post.excerpt && (
+                <p className="mt-1 line-clamp-2 text-sm text-zinc-500">{post.excerpt}</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/views/page-editor/sections/SectionRenderer.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { backgroundClass, paddingClass, type PostRenderContext } from './parts.js'
+import { HeroBannerSection } from './HeroBannerSection.js'
+import { MissionSection } from './MissionSection.js'
+import { FeatureHighlightSection } from './FeatureHighlightSection.js'
+import { ByTheNumbersSection } from './ByTheNumbersSection.js'
+import { CtaBannerSection } from './CtaBannerSection.js'
+import { ArticleBodySection } from './ArticleBodySection.js'
+import { PullQuoteSection } from './PullQuoteSection.js'
+import { AuthorBioSection } from './AuthorBioSection.js'
+import { RelatedPostsSection } from './RelatedPostsSection.js'
+import { GallerySection } from './GallerySection.js'
+
+/** Dispatch a section's body component by type. Shared by editor + preview. */
+function SectionBody({ section, context }: { section: PageSection; context?: PostRenderContext }) {
+  switch (section.sectionType) {
+    case 'hero':
+      return <HeroBannerSection section={section} />
+    case 'text':
+      return <MissionSection section={section} />
+    case 'feature':
+      return <FeatureHighlightSection section={section} />
+    case 'stats':
+      return <ByTheNumbersSection section={section} />
+    case 'cta':
+      return <CtaBannerSection section={section} />
+    case 'article-body':
+      return <ArticleBodySection section={section} context={context} />
+    case 'quote':
+      return <PullQuoteSection section={section} />
+    case 'author-bio':
+      return <AuthorBioSection section={section} context={context} />
+    case 'related-posts':
+      return <RelatedPostsSection section={section} context={context} />
+    case 'gallery':
+      return <GallerySection section={section} />
+    default:
+      return null
+  }
+}
+
+export interface SectionRendererProps {
+  section: PageSection
+  /** Editor mode: adds click-to-select, the selection outline + label, and
+   *  renders hidden sections muted instead of removing them. */
+  editable?: boolean
+  selected?: boolean
+  onSelect?: (id: string) => void
+  /** Lets the canvas register the DOM node for scroll-to-section. */
+  registerRef?: (id: string, el: HTMLElement | null) => void
+  /** Live post data for post-oriented section renderers (pages omit this). */
+  context?: PostRenderContext
+}
+
+/**
+ * Renders one section with its background + padding, dispatching to the
+ * shared body component. In `editable` mode it layers editor-only chrome
+ * (outline + a small purple type label) on top of the same markup the
+ * public preview uses — so what you edit is what ships.
+ */
+export function SectionRenderer({
+  section,
+  editable = false,
+  selected = false,
+  onSelect,
+  registerRef,
+  context,
+}: SectionRendererProps) {
+  const settings = section.settings ?? {}
+  const hidden = editable && !section.visible
+
+  return (
+    <section
+      ref={(el) => registerRef?.(section.id, el)}
+      data-section-id={section.id}
+      id={settings.anchorId || undefined}
+      className={`relative ${backgroundClass(settings)} ${paddingClass(settings)} ${
+        settings.cssClass ?? ''
+      } ${hidden ? 'opacity-40' : ''} ${
+        editable ? 'cursor-pointer outline-2 -outline-offset-2 transition-[outline]' : ''
+      } ${selected ? 'outline outline-violet-500' : 'outline-transparent'}`}
+      onClick={editable ? () => onSelect?.(section.id) : undefined}
+      // Selection is a convenience in the editor; the section list is the
+      // primary, fully-accessible control surface, so this stays a region.
+      aria-label={editable ? `${section.name} section` : undefined}
+    >
+      {editable && selected && (
+        <span className="pointer-events-none absolute top-0 left-0 z-10 rounded-br-md bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
+          {section.name}
+        </span>
+      )}
+      {editable && hidden && (
+        <span className="pointer-events-none absolute top-0 right-0 z-10 rounded-bl-md bg-zinc-700 px-2 py-0.5 text-xs font-medium text-white">
+          Hidden
+        </span>
+      )}
+      <SectionBody section={section} context={context} />
+    </section>
+  )
+}

package/src/views/page-editor/sections/index.ts

@@ -0,0 +1,13 @@
+export { SectionRenderer } from './SectionRenderer.js'
+export type { SectionRendererProps } from './SectionRenderer.js'
+export type { PostRenderContext } from './parts.js'
+export { HeroBannerSection } from './HeroBannerSection.js'
+export { MissionSection } from './MissionSection.js'
+export { FeatureHighlightSection } from './FeatureHighlightSection.js'
+export { ByTheNumbersSection } from './ByTheNumbersSection.js'
+export { CtaBannerSection } from './CtaBannerSection.js'
+export { ArticleBodySection } from './ArticleBodySection.js'
+export { PullQuoteSection } from './PullQuoteSection.js'
+export { AuthorBioSection } from './AuthorBioSection.js'
+export { RelatedPostsSection } from './RelatedPostsSection.js'
+export { GallerySection } from './GallerySection.js'

package/src/views/page-editor/sections/parts.tsx

@@ -0,0 +1,113 @@
+/**
+ * Shared building blocks for the section renderers.
+ *
+ * NOTE ON STYLING: the components under `sections/` render the consumer's
+ * *public website* content (purple hero, white prose bands, etc.), not the
+ * admin chrome. They therefore use a small, fixed website palette (violet
+ * for primary, zinc for neutrals) instead of the admin theme tokens. This
+ * is deliberate and scoped to this folder so the preview looks like a real
+ * page; the surrounding editor UI still uses the admin design tokens.
+ */
+import type { SectionSettings } from '../section-types.js'
+
+/**
+ * Live post data passed to the post-oriented section renderers
+ * (article body, author bio, related posts). Pages never supply this, so
+ * every consumer treats it as optional and falls back to placeholder copy.
+ */
+export interface PostRenderContext {
+  title?: string
+  excerpt?: string
+  /** the post's main body copy (rendered by the Article Body section) */
+  body?: string
+  featuredImageUrl?: string
+  publishDate?: string | null
+  category?: string
+  author?: { name?: string; bio?: string; avatarUrl?: string }
+  /** resolved related posts for the Related Posts section */
+  relatedPosts?: Array<{ title: string; url?: string; excerpt?: string }>
+}
+
+export function str(content: Record<string, unknown>, key: string, fallback = ''): string {
+  const v = content[key]
+  return typeof v === 'string' ? v : fallback
+}
+
+export function bool(content: Record<string, unknown>, key: string, fallback = false): boolean {
+  const v = content[key]
+  return typeof v === 'boolean' ? v : fallback
+}
+
+/** Vertical padding scale for a section. */
+export function paddingClass(settings: SectionSettings): string {
+  switch (settings.paddingY) {
+    case 'sm':
+      return 'py-8'
+    case 'md':
+      return 'py-12'
+    case 'xl':
+      return 'py-20 sm:py-28'
+    case 'lg':
+    default:
+      return 'py-16 sm:py-20'
+  }
+}
+
+/** Returns true when the section background is the dark/purple treatment. */
+export function isDarkBackground(settings: SectionSettings): boolean {
+  return (
+    (settings.backgroundType === 'solid' || settings.backgroundType === 'gradient') &&
+    settings.backgroundColor === 'purple'
+  )
+}
+
+/** Background utility classes derived from settings. */
+export function backgroundClass(settings: SectionSettings): string {
+  if (settings.backgroundType === 'gradient' && settings.backgroundColor === 'purple') {
+    return 'bg-gradient-to-br from-violet-600 to-violet-700 text-white'
+  }
+  if (settings.backgroundType === 'solid' && settings.backgroundColor === 'purple') {
+    return 'bg-violet-600 text-white'
+  }
+  if (settings.backgroundType === 'solid' && settings.backgroundColor === 'muted') {
+    return 'bg-zinc-50 text-zinc-900'
+  }
+  return 'bg-white text-zinc-900'
+}
+
+/**
+ * Preview-only button. `tone="onDark"` renders the white-on-purple button
+ * from the screenshot; `tone="primary"` renders a solid violet button for
+ * light backgrounds.
+ */
+export function PreviewButton({
+  label,
+  href,
+  tone = 'primary',
+}: {
+  label: string
+  href?: string
+  tone?: 'primary' | 'onDark' | 'ghost'
+}) {
+  if (!label) return null
+  const base =
+    'inline-flex items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium transition-colors'
+  const toneClass =
+    tone === 'onDark'
+      ? 'bg-white text-violet-700 hover:bg-violet-50'
+      : tone === 'ghost'
+        ? 'border border-zinc-300 text-zinc-700 hover:bg-zinc-50'
+        : 'bg-violet-600 text-white hover:bg-violet-700'
+  // Editor preview: links are inert (preventDefault) so clicking content
+  // selects the section instead of navigating away.
+  return (
+    <a
+      href={href || '#'}
+      onClick={(e) => e.preventDefault()}
+      className={`${base} ${toneClass}`}
+      tabIndex={-1}
+    >
+      {label}
+    </a>
+  )
+}

package/src/views/page-editor/viewports.ts

@@ -0,0 +1,25 @@
+/** Preview viewport presets for the page editor canvas. */
+export type ViewportId = '4k' | '1080p' | 'laptop' | 'tablet' | 'mobile'
+
+export interface Viewport {
+  id: ViewportId
+  label: string
+  /** lucide-react icon name */
+  icon: string
+  /** logical CSS width of the preview surface, in px */
+  width: number
+}
+
+export const VIEWPORTS: Viewport[] = [
+  { id: '4k', label: '4K', icon: 'monitor', width: 1920 },
+  { id: '1080p', label: '1080p', icon: 'monitor', width: 1440 },
+  { id: 'laptop', label: 'Laptop', icon: 'laptop', width: 1280 },
+  { id: 'tablet', label: 'Tablet', icon: 'tablet', width: 768 },
+  { id: 'mobile', label: 'Mobile', icon: 'smartphone', width: 390 },
+]
+
+export const DEFAULT_VIEWPORT: ViewportId = '1080p'
+
+export function getViewport(id: ViewportId): Viewport {
+  return VIEWPORTS.find((v) => v.id === id) ?? VIEWPORTS[1]!
+}

package/src/views/post-editor/PostEditorCanvas.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { FileText, Plus } from 'lucide-react'
+import type { PageSection, PostHeaderConfig } from '../../lib/post-editor-service.js'
+import { SectionRenderer, type PostRenderContext } from '../page-editor/sections/index.js'
+import { getViewport, type ViewportId } from '../page-editor/viewports.js'
+import { PostHeader } from './PostHeader.js'
+
+interface PostEditorCanvasProps {
+  sections: PageSection[]
+  header: PostHeaderConfig
+  context: PostRenderContext
+  selectedId: string | null
+  viewport: ViewportId
+  onSelect: (id: string) => void
+  onAddSection: () => void
+}
+
+/**
+ * Post preview canvas. Mirrors the Page editor canvas (scaled surface that
+ * fits the selected viewport) but renders the post header above the section
+ * list so the editor shows the full post layout — header regions plus body
+ * sections — exactly as it will ship.
+ */
+export function PostEditorCanvas({
+  sections,
+  header,
+  context,
+  selectedId,
+  viewport,
+  onSelect,
+  onAddSection,
+}: PostEditorCanvasProps) {
+  const vp = getViewport(viewport)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const surfaceRef = useRef<HTMLDivElement>(null)
+  const sectionRefs = useRef<Map<string, HTMLElement>>(new Map())
+  const [scale, setScale] = useState(1)
+  const [surfaceHeight, setSurfaceHeight] = useState<number | null>(null)
+
+  const registerRef = useCallback((id: string, el: HTMLElement | null) => {
+    if (el) sectionRefs.current.set(id, el)
+    else sectionRefs.current.delete(id)
+  }, [])
+
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    const recompute = () => {
+      const available = container.clientWidth - 48
+      const next = Math.min(1, available / vp.width)
+      setScale(next > 0 ? next : 1)
+      if (surfaceRef.current) {
+        setSurfaceHeight(surfaceRef.current.offsetHeight * (next > 0 ? next : 1))
+      }
+    }
+    recompute()
+    const ro = new ResizeObserver(recompute)
+    ro.observe(container)
+    if (surfaceRef.current) ro.observe(surfaceRef.current)
+    return () => ro.disconnect()
+  }, [vp.width, sections, header, context])
+
+  useEffect(() => {
+    if (!selectedId) return
+    const el = sectionRefs.current.get(selectedId)
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+  }, [selectedId])
+
+  return (
+    <div ref={containerRef} className="bg-muted h-full overflow-auto p-6">
+      <div
+        className="mx-auto"
+        style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}
+      >
+        <div
+          ref={surfaceRef}
+          className="border-border origin-top overflow-hidden rounded-xl border bg-white shadow-sm"
+          style={{ width: vp.width, transform: `scale(${scale})`, transformOrigin: 'top left' }}
+        >
+          <PostHeader config={header} context={context} />
+          {sections.length === 0 ? (
+            <EmptyBody onAddSection={onAddSection} />
+          ) : (
+            sections.map((section) => (
+              <SectionRenderer
+                key={section.id}
+                section={section}
+                context={context}
+                editable
+                selected={section.id === selectedId}
+                onSelect={onSelect}
+                registerRef={registerRef}
+              />
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function EmptyBody({ onAddSection }: { onAddSection: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 border-t border-zinc-100 px-6 py-16 text-center">
+      <span className="flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100">
+        <FileText className="h-5 w-5 text-zinc-400" aria-hidden />
+      </span>
+      <p className="text-sm text-zinc-500">
+        The header is set by the template. Add body sections to build out this post.
+      </p>
+      <button
+        type="button"
+        onClick={onAddSection}
+        className="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-violet-700"
+      >
+        <Plus className="h-4 w-4" aria-hidden />
+        Add Section
+      </button>
+    </div>
+  )
+}