@actuate-media/cms-admin 0.14.1 → 0.16.0

package/src/views/Posts/post-type-presets.ts

@@ -0,0 +1,105 @@
+import type { PostTypeIconName } from '../../components/posts/icons.js'
+
+/**
+ * Quick Post Type presets — curated starter templates surfaced on the
+ * New Post Type screen. Picking one pre-fills the form (slug, labels,
+ * icon, accent color, description) AND a tailored set of extra fields
+ * that get injected into the generated `actuate.config.ts` snippet
+ * after the shared base fields (title / slug / body / SEO / …).
+ *
+ * Presets are NOT a runtime data model — they only seed the snippet.
+ * Collections stay code-defined; this just saves the developer from
+ * hand-authoring common field sets.
+ */
+
+export type PresetColor = 'purple' | 'green' | 'orange' | 'blue' | 'red' | 'pink'
+
+export interface QuickPreset {
+  key: string
+  /** Gallery card label, e.g. "Case Studies". */
+  label: string
+  singular: string
+  plural: string
+  slug: string
+  description: string
+  color: PresetColor
+  icon: PostTypeIconName
+  /**
+   * Field definition lines injected after the shared base fields.
+   * Each entry is a complete `key: { … },` line (no leading indent —
+   * the snippet generator indents them).
+   */
+  extraFields: string[]
+}
+
+export const POST_TYPE_PRESETS: QuickPreset[] = [
+  {
+    key: 'case-studies',
+    label: 'Case Studies',
+    singular: 'Case Study',
+    plural: 'Case Studies',
+    slug: 'case-studies',
+    description: 'Client success stories and detailed project case studies.',
+    color: 'green',
+    icon: 'briefcase',
+    extraFields: [
+      "client: { type: 'text', label: 'Client Name' },",
+      "industry: { type: 'text', label: 'Industry' },",
+      "results: { type: 'richText', label: 'Results & Outcomes' },",
+    ],
+  },
+  {
+    key: 'news',
+    label: 'News',
+    singular: 'News Item',
+    plural: 'News',
+    slug: 'news',
+    description: 'Company announcements, press releases, and industry news.',
+    color: 'orange',
+    icon: 'newspaper',
+    extraFields: ["source: { type: 'text', label: 'Source' },"],
+  },
+  {
+    key: 'portfolio',
+    label: 'Portfolio',
+    singular: 'Portfolio Item',
+    plural: 'Portfolio',
+    slug: 'portfolio',
+    description: 'Showcase projects, work samples, and creative pieces.',
+    color: 'blue',
+    icon: 'image',
+    extraFields: [
+      "projectUrl: { type: 'url', label: 'Project URL' },",
+      "gallery: { type: 'media', label: 'Gallery' },",
+    ],
+  },
+  {
+    key: 'events',
+    label: 'Events',
+    singular: 'Event',
+    plural: 'Events',
+    slug: 'events',
+    description: 'Webinars, conferences, and scheduled happenings.',
+    color: 'pink',
+    icon: 'calendar',
+    extraFields: [
+      "startDate: { type: 'date', label: 'Start Date', includeTime: true },",
+      "endDate: { type: 'date', label: 'End Date', includeTime: true },",
+      "location: { type: 'text', label: 'Location' },",
+    ],
+  },
+  {
+    key: 'team',
+    label: 'Team Members',
+    singular: 'Team Member',
+    plural: 'Team',
+    slug: 'team',
+    description: 'Staff bios, headshots, and role information.',
+    color: 'purple',
+    icon: 'users',
+    extraFields: [
+      "role: { type: 'text', label: 'Role' },",
+      "headshot: { type: 'media', label: 'Headshot' },",
+    ],
+  },
+]

package/src/views/page-builder/Widgets.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { LayoutGrid } from 'lucide-react'
+
+export interface WidgetsProps {
+  onNavigate?: (path: string) => void
+}
+
+/**
+ * /widgets — placeholder for the embeddable Widgets library.
+ *
+ * Widgets are reusable, embeddable components (forms, CTAs, banners)
+ * that can be dropped into pages and saved sections. The management UI
+ * ships in a later release; this view establishes the route and nav
+ * entry with an honest empty state rather than a dead link.
+ */
+export function Widgets({ onNavigate }: WidgetsProps) {
+  return (
+    <div className="p-4 pr-8">
+      <div className="mb-4">
+        <h1 className="text-foreground mb-1 text-2xl font-medium">Widgets</h1>
+        <p className="text-muted-foreground text-sm">
+          Reusable, embeddable components for pages and saved sections.
+        </p>
+      </div>
+
+      <div className="border-border bg-card rounded-lg border p-8 text-center">
+        <LayoutGrid className="text-muted-foreground mx-auto mb-3 h-8 w-8" aria-hidden />
+        <h2 className="text-foreground mb-1 text-lg font-medium">Widgets are coming soon</h2>
+        <p className="text-muted-foreground mx-auto mb-4 max-w-md text-sm">
+          The widget library lets you build embeddable components once and reuse them across pages.
+          In the meantime, use Saved Sections for reusable content blocks.
+        </p>
+        <button
+          type="button"
+          onClick={() => onNavigate?.('/saved-sections')}
+          className="bg-primary text-primary-foreground rounded-md px-4 py-2 text-sm font-medium hover:opacity-90"
+        >
+          View Saved Sections
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,56 @@
+'use client'
+
+import { Modal } from '../../components/ui/Modal.js'
+import { getSectionTypesForScope, type SectionScope, type SectionTypeId } from './section-types.js'
+import { sectionIconFor } from './section-icons.js'
+
+interface AddSectionModalProps {
+  open: boolean
+  onClose: () => void
+  onAdd: (type: SectionTypeId) => void
+  /** Which editor surface this gallery serves. Defaults to the page editor. */
+  scope?: SectionScope
+}
+
+/**
+ * Predefined section gallery. Only types that have a working renderer +
+ * inspector are listed (the registry is the source of truth), so every
+ * card here actually inserts a usable section.
+ *
+ * (Saved-section / template insertion is a separate flow — deferred until
+ * the saved-section storage model is reconciled with the flat section
+ * model; see the page-editor changeset.)
+ */
+export function AddSectionModal({ open, onClose, onAdd, scope = 'page' }: AddSectionModalProps) {
+  const types = getSectionTypesForScope(scope)
+  return (
+    <Modal open={open} onClose={onClose} title="Add a section">
+      <p className="text-muted-foreground mb-4 text-sm">
+        Choose a section type. It will be added to the bottom and selected for editing.
+      </p>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        {types.map((type) => {
+          const Icon = sectionIconFor(type.id)
+          return (
+            <button
+              key={type.id}
+              type="button"
+              onClick={() => onAdd(type.id)}
+              className="border-border hover:border-primary hover:bg-accent/50 focus-visible:ring-ring flex items-start gap-3 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none"
+            >
+              <span className="bg-muted text-foreground flex h-9 w-9 shrink-0 items-center justify-center rounded-md">
+                <Icon className="h-5 w-5" aria-hidden />
+              </span>
+              <span className="min-w-0">
+                <span className="text-foreground block text-sm font-medium">{type.name}</span>
+                <span className="text-muted-foreground mt-0.5 block text-xs leading-snug">
+                  {type.description}
+                </span>
+              </span>
+            </button>
+          )
+        })}
+      </div>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,127 @@
+'use client'
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { LayoutTemplate, Plus } from 'lucide-react'
+import type { PageSection } from '../../lib/page-editor-service.js'
+import { SectionRenderer } from './sections/index.js'
+import { getViewport, type ViewportId } from './viewports.js'
+
+interface EditorCanvasProps {
+  sections: PageSection[]
+  selectedId: string | null
+  viewport: ViewportId
+  onSelect: (id: string) => void
+  onAddSection: () => void
+}
+
+/**
+ * The preview canvas. Renders the page at the selected viewport's logical
+ * width and scales it down with a CSS transform so wide viewports (1440px,
+ * 1920px) fit inside the available canvas column. Scale is recomputed from
+ * a ResizeObserver so it stays correct as panels open/close.
+ */
+export function EditorCanvas({
+  sections,
+  selectedId,
+  viewport,
+  onSelect,
+  onAddSection,
+}: EditorCanvasProps) {
+  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)
+  }, [])
+
+  // Recompute scale + scaled height from the container width.
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const recompute = () => {
+      // 48px breathing room so the surface never kisses the column edges.
+      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])
+
+  // Scroll the selected section into view within the canvas.
+  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">
+      {sections.length === 0 ? (
+        <EmptyCanvas onAddSection={onAddSection} />
+      ) : (
+        <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',
+            }}
+          >
+            {sections.map((section) => (
+              <SectionRenderer
+                key={section.id}
+                section={section}
+                editable
+                selected={section.id === selectedId}
+                onSelect={onSelect}
+                registerRef={registerRef}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function EmptyCanvas({ onAddSection }: { onAddSection: () => void }) {
+  return (
+    <div className="mx-auto flex h-full max-w-md flex-col items-center justify-center text-center">
+      <div className="bg-card border-border mb-4 flex h-14 w-14 items-center justify-center rounded-full border">
+        <LayoutTemplate className="text-muted-foreground h-6 w-6" aria-hidden />
+      </div>
+      <h2 className="text-foreground text-lg font-medium">This page has no sections yet</h2>
+      <p className="text-muted-foreground mt-1 mb-5 text-sm">
+        Add your first section to start building the page. You can reorder, hide, and edit sections
+        at any time.
+      </p>
+      <button
+        type="button"
+        onClick={onAddSection}
+        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+      >
+        <Plus className="h-4 w-4" aria-hidden />
+        Add Section
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,233 @@
+'use client'
+
+import {
+  Check,
+  ExternalLink,
+  Eye,
+  Laptop,
+  Loader2,
+  type LucideIcon,
+  Monitor,
+  Settings2,
+  Smartphone,
+  Tablet,
+  TriangleAlert,
+} from 'lucide-react'
+import type { PageStatus } from '../../lib/page-editor-service.js'
+import { VIEWPORTS, type ViewportId } from './viewports.js'
+
+export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
+
+interface EditorTopBarProps {
+  title: string
+  status: PageStatus
+  dirty: boolean
+  saveState: SaveState
+  publishing: boolean
+  canEdit: boolean
+  canPublish: boolean
+  viewport: ViewportId
+  /** Breadcrumb root label + back-button text (e.g. "Pages" or "Posts"). */
+  backLabel?: string
+  onViewport: (v: ViewportId) => void
+  onBack: () => void
+  onPreview: () => void
+  /**
+   * Open the draft on the public site (real front-end) in a new tab. When
+   * omitted the "View on site" button is hidden — e.g. for unsaved documents
+   * or installs without a public URL.
+   */
+  onViewOnSite?: () => void
+  onOpenSettings: () => void
+  onSaveDraft: () => void
+  onPublish: () => void
+}
+
+const VIEWPORT_ICONS: Record<string, LucideIcon> = {
+  monitor: Monitor,
+  laptop: Laptop,
+  tablet: Tablet,
+  smartphone: Smartphone,
+}
+
+const STATUS_TEXT: Record<PageStatus, { label: string; className: string }> = {
+  DRAFT: { label: 'Draft', className: 'text-amber-600 dark:text-amber-400' },
+  PUBLISHED: { label: 'Published', className: 'text-emerald-600 dark:text-emerald-400' },
+  SCHEDULED: { label: 'Scheduled', className: 'text-amber-600 dark:text-amber-400' },
+  ARCHIVED: { label: 'Archived', className: 'text-muted-foreground' },
+}
+
+export function EditorTopBar({
+  title,
+  status,
+  dirty,
+  saveState,
+  publishing,
+  canEdit,
+  canPublish,
+  viewport,
+  backLabel = 'Pages',
+  onViewport,
+  onBack,
+  onPreview,
+  onViewOnSite,
+  onOpenSettings,
+  onSaveDraft,
+  onPublish,
+}: EditorTopBarProps) {
+  const statusInfo = STATUS_TEXT[status]
+
+  return (
+    <header className="bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
+      {/* Breadcrumb + status */}
+      <div className="flex min-w-0 items-center gap-2">
+        <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1.5 text-sm">
+          <button
+            type="button"
+            onClick={onBack}
+            className="text-muted-foreground hover:text-foreground shrink-0"
+          >
+            {backLabel}
+          </button>
+          <span className="text-muted-foreground" aria-hidden>
+            /
+          </span>
+          <span className="text-foreground truncate font-medium">{title || 'Untitled page'}</span>
+        </nav>
+        <span
+          className={`ml-2 shrink-0 text-xs font-medium ${statusInfo.className}`}
+          aria-label={`Status: ${statusInfo.label}`}
+        >
+          {statusInfo.label}
+        </span>
+        <SaveStatus state={saveState} dirty={dirty} />
+      </div>
+
+      {/* Right controls */}
+      <div className="flex items-center gap-2">
+        <div
+          className="border-border bg-background hidden items-center gap-0.5 rounded-lg border p-0.5 md:flex"
+          role="group"
+          aria-label="Preview viewport"
+        >
+          {VIEWPORTS.map((v) => {
+            const Icon = VIEWPORT_ICONS[v.icon] ?? Monitor
+            const active = v.id === viewport
+            return (
+              <button
+                key={v.id}
+                type="button"
+                onClick={() => onViewport(v.id)}
+                aria-pressed={active}
+                title={`${v.label} (${v.width}px)`}
+                className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors ${
+                  active
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                }`}
+              >
+                <Icon className="h-3.5 w-3.5" aria-hidden />
+                <span className="hidden lg:inline">{v.label}</span>
+              </button>
+            )
+          })}
+        </div>
+
+        <button
+          type="button"
+          onClick={onOpenSettings}
+          aria-label="Page settings"
+          title="Page settings"
+          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+        >
+          <Settings2 className="h-4 w-4" aria-hidden />
+        </button>
+
+        <button
+          type="button"
+          onClick={onPreview}
+          aria-label="Preview page"
+          title="Preview page"
+          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+        >
+          <Eye className="h-4 w-4" aria-hidden />
+        </button>
+
+        {onViewOnSite && (
+          <button
+            type="button"
+            onClick={onViewOnSite}
+            aria-label="View draft on site"
+            title="View draft on site"
+            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+          >
+            <ExternalLink className="h-4 w-4" aria-hidden />
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={onSaveDraft}
+          disabled={!canEdit || saveState === 'saving' || (!dirty && saveState !== 'error')}
+          className="border-border text-foreground hover:bg-accent rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {saveState === 'saving' ? 'Saving…' : 'Save Draft'}
+        </button>
+
+        <button
+          type="button"
+          onClick={onPublish}
+          disabled={!canPublish || publishing || saveState === 'saving'}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {publishing && <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />}
+          Publish
+        </button>
+      </div>
+    </header>
+  )
+}
+
+function SaveStatus({ state, dirty }: { state: SaveState; dirty: boolean }) {
+  if (state === 'saving') {
+    return (
+      <span
+        className="text-muted-foreground ml-2 inline-flex items-center gap-1 text-xs"
+        aria-live="polite"
+      >
+        <Loader2 className="h-3 w-3 animate-spin" aria-hidden />
+        Saving…
+      </span>
+    )
+  }
+  if (state === 'error') {
+    return (
+      <span
+        className="text-destructive ml-2 inline-flex items-center gap-1 text-xs"
+        aria-live="polite"
+      >
+        <TriangleAlert className="h-3 w-3" aria-hidden />
+        Failed to save
+      </span>
+    )
+  }
+  if (dirty) {
+    return (
+      <span className="text-muted-foreground ml-2 text-xs" aria-live="polite">
+        Unsaved changes
+      </span>
+    )
+  }
+  if (state === 'saved') {
+    return (
+      <span
+        className="text-muted-foreground ml-2 inline-flex items-center gap-1 text-xs"
+        aria-live="polite"
+      >
+        <Check className="h-3 w-3" aria-hidden />
+        Saved
+      </span>
+    )
+  }
+  return null
+}

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

@@ -0,0 +1,96 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { AlertTriangle, Loader2, Pencil, X } from 'lucide-react'
+import { fetchPageForEditor, type EditorPage } from '../../lib/page-editor-service.js'
+import { SectionRenderer } from './sections/index.js'
+
+interface PagePreviewProps {
+  documentId: string
+  onNavigate: (path: string) => void
+}
+
+/**
+ * Clean, chrome-free render of a page using the SAME section renderers as
+ * the editor canvas — so the preview reflects what will actually ship.
+ * Only visible sections are rendered (hidden sections are omitted, exactly
+ * as the public page would behave).
+ */
+export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
+  const [page, setPage] = useState<EditorPage | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    fetchPageForEditor(documentId)
+      .then((p) => !cancelled && setPage(p))
+      .catch((err) => !cancelled && setError(err instanceof Error ? err.message : 'Failed to load'))
+      .finally(() => !cancelled && setLoading(false))
+    return () => {
+      cancelled = true
+    }
+  }, [documentId])
+
+  if (loading) {
+    return (
+      <div className="bg-background flex h-full items-center justify-center">
+        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+        <span className="sr-only">Loading preview…</span>
+      </div>
+    )
+  }
+
+  if (error || !page) {
+    return (
+      <div className="bg-background flex h-full items-center justify-center p-6">
+        <div className="border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4">
+          <AlertTriangle className="text-destructive shrink-0" size={20} aria-hidden />
+          <p className="text-foreground text-sm font-medium">{error ?? 'Page not found.'}</p>
+        </div>
+      </div>
+    )
+  }
+
+  const visible = page.sections.filter((s) => s.visible)
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Slim preview bar — the only chrome; the page itself renders clean.
+          This view opens in its own browser tab, so actions are tab-scoped. */}
+      <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
+        <button
+          type="button"
+          onClick={() => window.close()}
+          className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
+          aria-label="Close preview tab"
+        >
+          <X className="h-4 w-4" aria-hidden />
+          Close
+        </button>
+        <span className="text-muted-foreground text-xs">
+          Preview · {page.title || 'Untitled'} {page.path}
+        </span>
+        <button
+          type="button"
+          onClick={() => onNavigate(`/pages/${documentId}/edit`)}
+          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
+        >
+          <Pencil className="h-3.5 w-3.5" aria-hidden />
+          Open editor
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-auto bg-white">
+        {visible.length === 0 ? (
+          <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
+            This page has no visible sections yet.
+          </div>
+        ) : (
+          visible.map((section) => <SectionRenderer key={section.id} section={section} />)
+        )}
+      </div>
+    </div>
+  )
+}