@actuate-media/cms-admin 0.14.1 → 0.16.0

package/src/views/page-editor/SectionsPanel.tsx

@@ -0,0 +1,270 @@
+'use client'
+
+import {
+  Copy,
+  Eye,
+  EyeOff,
+  GripVertical,
+  type LucideIcon,
+  MoreVertical,
+  Plus,
+  Trash2,
+} from 'lucide-react'
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import type { PageSection } from '../../lib/page-editor-service.js'
+import { sectionIconFor } from './section-icons.js'
+
+interface SectionsPanelProps {
+  sections: PageSection[]
+  selectedId: string | null
+  canEdit: boolean
+  onSelect: (id: string) => void
+  onReorder: (orderedIds: string[]) => void
+  onToggleVisibility: (id: string) => void
+  onDuplicate: (id: string) => void
+  onRequestDelete: (id: string) => void
+  onAdd: () => void
+}
+
+export function SectionsPanel({
+  sections,
+  selectedId,
+  canEdit,
+  onSelect,
+  onReorder,
+  onToggleVisibility,
+  onDuplicate,
+  onRequestDelete,
+  onAdd,
+}: SectionsPanelProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    const ids = sections.map((s) => s.id)
+    const from = ids.indexOf(String(active.id))
+    const to = ids.indexOf(String(over.id))
+    if (from === -1 || to === -1) return
+    const next = ids.slice()
+    const [moved] = next.splice(from, 1)
+    next.splice(to, 0, moved!)
+    onReorder(next)
+  }
+
+  return (
+    <aside
+      className="bg-card border-border flex h-full w-72 shrink-0 flex-col border-r"
+      aria-label="Page sections"
+    >
+      <div className="border-border flex items-center justify-between border-b px-4 py-3">
+        <div className="flex items-center gap-2">
+          <h2 className="text-foreground text-sm font-medium">Sections</h2>
+          <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium tabular-nums">
+            {sections.length}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-2">
+        {sections.length === 0 ? (
+          <p className="text-muted-foreground px-2 py-6 text-center text-sm">
+            No sections yet. Add one below to get started.
+          </p>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={sections.map((s) => s.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <ul className="space-y-1">
+                {sections.map((section) => (
+                  <SortableSectionItem
+                    key={section.id}
+                    section={section}
+                    selected={section.id === selectedId}
+                    canEdit={canEdit}
+                    onSelect={onSelect}
+                    onToggleVisibility={onToggleVisibility}
+                    onDuplicate={onDuplicate}
+                    onRequestDelete={onRequestDelete}
+                  />
+                ))}
+              </ul>
+            </SortableContext>
+          </DndContext>
+        )}
+      </div>
+
+      <div className="border-border border-t p-3">
+        <button
+          type="button"
+          onClick={onAdd}
+          disabled={!canEdit}
+          className="border-border text-foreground hover:bg-accent flex w-full items-center justify-center gap-2 rounded-lg border border-dashed px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Plus className="h-4 w-4" aria-hidden />
+          Add Section
+        </button>
+      </div>
+    </aside>
+  )
+}
+
+interface SortableItemProps {
+  section: PageSection
+  selected: boolean
+  canEdit: boolean
+  onSelect: (id: string) => void
+  onToggleVisibility: (id: string) => void
+  onDuplicate: (id: string) => void
+  onRequestDelete: (id: string) => void
+}
+
+function SortableSectionItem({
+  section,
+  selected,
+  canEdit,
+  onSelect,
+  onToggleVisibility,
+  onDuplicate,
+  onRequestDelete,
+}: SortableItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: section.id,
+    disabled: !canEdit,
+  })
+  const Icon = sectionIconFor(section.sectionType)
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : undefined,
+  }
+
+  return (
+    <li ref={setNodeRef} style={style}>
+      <div
+        className={`group flex items-center gap-2 rounded-lg border px-2 py-2 ${
+          selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'
+        } ${isDragging ? 'shadow-md' : ''}`}
+      >
+        <button
+          type="button"
+          className="text-muted-foreground hover:text-foreground shrink-0 cursor-grab touch-none disabled:cursor-not-allowed disabled:opacity-40"
+          aria-label={`Drag to reorder ${section.name}`}
+          disabled={!canEdit}
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="h-4 w-4" aria-hidden />
+        </button>
+
+        <button
+          type="button"
+          onClick={() => onSelect(section.id)}
+          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+        >
+          <span className="bg-muted text-muted-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-md">
+            <Icon className="h-4 w-4" aria-hidden />
+          </span>
+          <span
+            className={`truncate text-sm ${section.visible ? 'text-foreground' : 'text-muted-foreground line-through'}`}
+          >
+            {section.name}
+          </span>
+        </button>
+
+        <button
+          type="button"
+          onClick={() => onToggleVisibility(section.id)}
+          disabled={!canEdit}
+          aria-pressed={!section.visible}
+          aria-label={section.visible ? `Hide ${section.name}` : `Show ${section.name}`}
+          className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
+        >
+          {section.visible ? (
+            <Eye className="h-4 w-4" aria-hidden />
+          ) : (
+            <EyeOff className="h-4 w-4" aria-hidden />
+          )}
+        </button>
+
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <button
+              type="button"
+              disabled={!canEdit}
+              aria-label={`More actions for ${section.name}`}
+              className="text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40"
+            >
+              <MoreVertical className="h-4 w-4" aria-hidden />
+            </button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content
+              align="end"
+              sideOffset={4}
+              className="border-border bg-popover z-[70] min-w-44 rounded-lg border p-1 shadow-md"
+            >
+              <MenuItem onSelect={() => onDuplicate(section.id)} icon={Copy}>
+                Duplicate
+              </MenuItem>
+              <DropdownMenu.Separator className="bg-border my-1 h-px" />
+              <MenuItem onSelect={() => onRequestDelete(section.id)} icon={Trash2} destructive>
+                Delete
+              </MenuItem>
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+      </div>
+    </li>
+  )
+}
+
+function MenuItem({
+  children,
+  icon: Icon,
+  onSelect,
+  destructive,
+}: {
+  children: React.ReactNode
+  icon: LucideIcon
+  onSelect: () => void
+  destructive?: boolean
+}) {
+  return (
+    <DropdownMenu.Item
+      onSelect={onSelect}
+      className={`flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none ${
+        destructive ? 'text-destructive focus:bg-destructive/10' : 'text-foreground focus:bg-accent'
+      }`}
+    >
+      <Icon className="h-4 w-4" aria-hidden />
+      {children}
+    </DropdownMenu.Item>
+  )
+}

package/src/views/page-editor/ValidationSummary.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { TriangleAlert, X } from 'lucide-react'
+
+interface ValidationSummaryProps {
+  errors: string[]
+  warnings: string[]
+  onDismiss: () => void
+}
+
+/** Inline banner listing blocking errors (and non-blocking warnings). */
+export function ValidationSummary({ errors, warnings, onDismiss }: ValidationSummaryProps) {
+  if (errors.length === 0 && warnings.length === 0) return null
+  return (
+    <div
+      role="alert"
+      className="border-destructive/30 bg-destructive/5 mx-4 mt-3 rounded-lg border p-3"
+    >
+      <div className="flex items-start gap-2">
+        <TriangleAlert className="text-destructive mt-0.5 h-4 w-4 shrink-0" aria-hidden />
+        <div className="min-w-0 flex-1">
+          {errors.length > 0 && (
+            <>
+              <p className="text-foreground text-sm font-medium">
+                Resolve {errors.length} issue{errors.length === 1 ? '' : 's'} before publishing
+              </p>
+              <ul className="text-muted-foreground mt-1 list-disc space-y-0.5 pl-4 text-xs">
+                {errors.map((e, i) => (
+                  <li key={`e-${i}`}>{e}</li>
+                ))}
+              </ul>
+            </>
+          )}
+          {warnings.length > 0 && (
+            <ul className="text-muted-foreground mt-2 list-disc space-y-0.5 pl-4 text-xs">
+              {warnings.map((w, i) => (
+                <li key={`w-${i}`}>{w}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label="Dismiss"
+          className="text-muted-foreground hover:text-foreground rounded p-0.5"
+        >
+          <X className="h-4 w-4" aria-hidden />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/views/page-editor/section-icons.ts

@@ -0,0 +1,33 @@
+import {
+  AlignLeft,
+  BarChart3,
+  Images,
+  LayoutGrid,
+  LayoutTemplate,
+  type LucideIcon,
+  Megaphone,
+  PanelsTopLeft,
+  Quote,
+  Type,
+  User,
+} from 'lucide-react'
+import { getSectionType } from './section-types.js'
+
+const SECTION_ICONS: Record<string, LucideIcon> = {
+  'layout-template': LayoutTemplate,
+  'align-left': AlignLeft,
+  'panels-top-left': PanelsTopLeft,
+  'bar-chart-3': BarChart3,
+  megaphone: Megaphone,
+  text: Type,
+  quote: Quote,
+  user: User,
+  'layout-grid': LayoutGrid,
+  images: Images,
+}
+
+/** Resolve a lucide icon for a section type id (with a safe fallback). */
+export function sectionIconFor(sectionType: string): LucideIcon {
+  const name = getSectionType(sectionType)?.icon
+  return (name && SECTION_ICONS[name]) || LayoutTemplate
+}

package/src/views/page-editor/section-types.ts

@@ -0,0 +1,27 @@
+/**
+ * Section-type registry for the flat, section-based Page Editor.
+ *
+ * The definitions now live in `@actuate-media/cms-core/page-sections` so the
+ * admin editor, the REST API, and the MCP server validate against ONE source
+ * of truth. This module re-exports them to preserve the historical import
+ * path (`../views/page-editor/section-types.js`) used across the editor.
+ */
+export {
+  SECTION_TYPES,
+  SECTION_TYPE_LIST,
+  getSectionType,
+  getSectionTypesForScope,
+  sectionTypeLabel,
+  isKnownSectionType,
+} from '@actuate-media/cms-core/page-sections'
+
+export type {
+  SectionTypeId,
+  SectionScope,
+  SectionFieldType,
+  SectionFieldDef,
+  SectionSettings,
+  SectionTypeDef,
+  PostHeaderConfig,
+  PostTemplate,
+} from '@actuate-media/cms-core/page-sections'

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

@@ -0,0 +1,57 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { bool, str, type PostRenderContext } from './parts.js'
+
+/**
+ * Renders the post's main body. When `source === 'field'` it shows the
+ * post's own Body field (passed via context); otherwise it renders the
+ * section's own `body` copy. Body text is treated as plain paragraphs split
+ * on blank lines — the renderer never injects raw HTML.
+ */
+export function ArticleBodySection({
+  section,
+  context,
+}: {
+  section: PageSection
+  context?: PostRenderContext
+}) {
+  const c = section.content
+  const source = str(c, 'source', 'field')
+  const raw = source === 'field' ? (context?.body ?? '') : str(c, 'body')
+  const wide = str(c, 'width', 'normal') === 'wide'
+  const showToc = bool(c, 'showToc')
+
+  const paragraphs = raw
+    .split(/\n{2,}/)
+    .map((p) => p.trim())
+    .filter(Boolean)
+
+  return (
+    <div className={`mx-auto px-6 ${wide ? 'max-w-4xl' : 'max-w-2xl'}`}>
+      {showToc && (
+        <div className="mb-8 rounded-lg border border-zinc-200 bg-zinc-50 p-4">
+          <p className="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
+            On this page
+          </p>
+          <p className="mt-1 text-sm text-zinc-400">
+            A table of contents will be generated from the body headings.
+          </p>
+        </div>
+      )}
+      {paragraphs.length > 0 ? (
+        <div className="space-y-4">
+          {paragraphs.map((p, i) => (
+            <p key={i} className="text-base leading-relaxed text-zinc-700">
+              {p}
+            </p>
+          ))}
+        </div>
+      ) : (
+        <p className="text-base leading-relaxed text-zinc-400 italic">
+          {source === 'field'
+            ? "This will show the post's Body content."
+            : 'Add body copy in the inspector.'}
+        </p>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,61 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { bool, str, type PostRenderContext } from './parts.js'
+
+/** A short author biography block, driven by the post's author context. */
+export function AuthorBioSection({
+  section,
+  context,
+}: {
+  section: PageSection
+  context?: PostRenderContext
+}) {
+  const c = section.content
+  const heading = str(c, 'heading', 'About the author')
+  const showAvatar = bool(c, 'showAvatar', true)
+  const showSocial = bool(c, 'showSocial', true)
+
+  const name = context?.author?.name || 'Author name'
+  const bio =
+    context?.author?.bio || "The author's bio will appear here once it is set on their profile."
+  const avatarUrl = context?.author?.avatarUrl
+  const initials = name
+    .split(/\s+/)
+    .map((p) => p[0] ?? '')
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+
+  return (
+    <div className="mx-auto max-w-3xl px-6">
+      <div className="flex items-start gap-4 rounded-xl border border-zinc-200 bg-zinc-50 p-5">
+        {showAvatar &&
+          (avatarUrl ? (
+            <img
+              src={avatarUrl}
+              alt={name}
+              className="h-14 w-14 shrink-0 rounded-full object-cover"
+            />
+          ) : (
+            <span className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-violet-100 text-sm font-medium text-violet-700">
+              {initials || '?'}
+            </span>
+          ))}
+        <div className="min-w-0">
+          {heading && (
+            <p className="text-xs font-semibold tracking-wider text-zinc-500 uppercase">
+              {heading}
+            </p>
+          )}
+          <p className="mt-0.5 text-base font-medium text-zinc-900">{name}</p>
+          <p className="mt-1 text-sm leading-relaxed text-zinc-600">{bio}</p>
+          {showSocial && (
+            <div className="mt-2 flex gap-3 text-sm text-violet-600">
+              <span>Twitter</span>
+              <span>LinkedIn</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,41 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+interface Stat {
+  value?: unknown
+  label?: unknown
+  description?: unknown
+}
+
+export function ByTheNumbersSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const heading = str(c, 'heading')
+  const body = str(c, 'body')
+  const stats = Array.isArray(c.stats) ? (c.stats as Stat[]) : []
+
+  return (
+    <div className="mx-auto max-w-5xl px-6 text-center">
+      {heading && (
+        <h2 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
+          {heading}
+        </h2>
+      )}
+      {body && <p className="mx-auto mt-4 max-w-2xl text-base text-zinc-600">{body}</p>}
+      {stats.length > 0 && (
+        <dl className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">
+          {stats.map((s, i) => (
+            <div key={i}>
+              <dt className="text-4xl font-semibold tracking-tight text-violet-600">
+                {String(s.value ?? '')}
+              </dt>
+              <dd className="mt-2 text-sm font-medium text-zinc-700">{String(s.label ?? '')}</dd>
+              {s.description ? (
+                <dd className="mt-1 text-xs text-zinc-500">{String(s.description)}</dd>
+              ) : null}
+            </div>
+          ))}
+        </dl>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,29 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { PreviewButton, isDarkBackground, str } from './parts.js'
+
+export function CtaBannerSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const dark = isDarkBackground(section.settings)
+  const heading = str(c, 'heading')
+  const body = str(c, 'body')
+
+  return (
+    <div className="mx-auto max-w-3xl px-6 text-center">
+      <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">{heading}</h2>
+      {body && (
+        <p
+          className={`mx-auto mt-3 max-w-xl text-base ${dark ? 'text-violet-100' : 'text-zinc-600'}`}
+        >
+          {body}
+        </p>
+      )}
+      <div className="mt-6 flex justify-center">
+        <PreviewButton
+          label={str(c, 'buttonLabel')}
+          href={str(c, 'buttonUrl')}
+          tone={dark ? 'onDark' : 'primary'}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,63 @@
+import { ImageIcon } from 'lucide-react'
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { PreviewButton, str } from './parts.js'
+
+export function FeatureHighlightSection({ section }: { section: PageSection }) {
+  const c = section.content
+  const label = str(c, 'label')
+  const heading = str(c, 'heading')
+  const body = str(c, 'body')
+  const imageUrl = str(c, 'imageUrl')
+  const imageAlt = str(c, 'imageAlt')
+  const imageLeft = str(c, 'imagePosition', 'right') === 'left'
+
+  const text = (
+    <div className="flex-1">
+      {label && (
+        <span className="mb-3 inline-block rounded bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
+          {label}
+        </span>
+      )}
+      <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">{body}</p>}
+      <div className="mt-6">
+        <PreviewButton label={str(c, 'buttonLabel')} href={str(c, 'buttonUrl')} tone="primary" />
+      </div>
+    </div>
+  )
+
+  const media = (
+    <div className="flex-1">
+      {imageUrl ? (
+        // Admin-only preview; next/image isn't in scope here.
+        <img
+          src={imageUrl}
+          alt={imageAlt}
+          className="aspect-[4/3] w-full rounded-xl object-cover"
+        />
+      ) : (
+        <div className="flex aspect-[4/3] w-full items-center justify-center rounded-xl bg-violet-50">
+          <ImageIcon className="h-10 w-10 text-violet-300" aria-hidden />
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <div className="mx-auto max-w-5xl px-6">
+      <div className="flex flex-col items-center gap-10 md:flex-row">
+        {imageLeft ? (
+          <>
+            {media}
+            {text}
+          </>
+        ) : (
+          <>
+            {text}
+            {media}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,54 @@
+import type { PageSection } from '../../../lib/page-editor-service.js'
+import { str } from './parts.js'
+
+interface GalleryImage {
+  url?: string
+  alt?: string
+  caption?: string
+}
+
+/** A responsive image grid with captions. */
+export function GallerySection({ section }: { section: PageSection }) {
+  const c = section.content
+  const heading = str(c, 'heading')
+  const columns = Number.parseInt(str(c, 'columns', '3'), 10) || 3
+  const images: GalleryImage[] = Array.isArray(c.images) ? (c.images as GalleryImage[]) : []
+  const withUrl = images.filter((img) => img && typeof img.url === 'string' && img.url)
+
+  const cols =
+    columns === 2
+      ? 'sm:grid-cols-2'
+      : columns === 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>
+      )}
+      {withUrl.length > 0 ? (
+        <div className={`grid grid-cols-1 gap-3 ${cols}`}>
+          {withUrl.map((img, i) => (
+            <figure key={i} className="overflow-hidden rounded-lg border border-zinc-200">
+              <img
+                src={img.url}
+                alt={img.alt ?? ''}
+                className="aspect-square w-full object-cover"
+              />
+              {img.caption && (
+                <figcaption className="px-2 py-1.5 text-xs text-zinc-500">{img.caption}</figcaption>
+              )}
+            </figure>
+          ))}
+        </div>
+      ) : (
+        <div className={`grid grid-cols-1 gap-3 ${cols}`}>
+          {Array.from({ length: columns }, (_, i) => (
+            <div key={i} className="aspect-square rounded-lg bg-zinc-100" aria-hidden />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}