@actuate-media/cms-admin 0.40.1 → 0.41.0

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

@@ -1,4 +1,4 @@
-export { SectionRenderer } from './SectionRenderer.js'
+export { SectionRenderer, hasCanvasRenderer } from './SectionRenderer.js'
 export type { SectionRendererProps } from './SectionRenderer.js'
 export type { PostRenderContext } from './parts.js'
 export { HeroBannerSection } from './HeroBannerSection.js'

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

@@ -4,6 +4,7 @@ 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 { StructureNotice } from '../page-editor/StructureNotice.js'
 import { getViewport, type ViewportId } from '../page-editor/viewports.js'
 import { PostHeader } from './PostHeader.js'
 
@@ -15,6 +16,8 @@ interface PostEditorCanvasProps {
   viewport: ViewportId
   onSelect: (id: string) => void
   onAddSection: () => void
+  /** Section types rendered as placeholders — shows the "Structure view" notice. */
+  structuralTypes?: string[]
 }
 
 /**
@@ -31,6 +34,7 @@ export function PostEditorCanvas({
   viewport,
   onSelect,
   onAddSection,
+  structuralTypes = [],
 }: PostEditorCanvasProps) {
   const vp = getViewport(viewport)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -70,6 +74,7 @@ export function PostEditorCanvas({
 
   return (
     <div ref={containerRef} className="bg-muted h-full overflow-auto p-6">
+      <StructureNotice structuralTypes={structuralTypes} />
       <div
         className="mx-auto"
         style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}

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

@@ -5,6 +5,7 @@ import { AlertTriangle, Loader2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
+import { VersionHistory } from '../../components/VersionHistory.js'
 import {
   addSection,
   createSection,
@@ -33,7 +34,7 @@ import {
   resolveSiteUrl,
 } from '../../lib/preview-link.js'
 import type { SectionSettings, SectionTypeId } from '../page-editor/section-types.js'
-import type { PostRenderContext } from '../page-editor/sections/index.js'
+import { hasCanvasRenderer, type PostRenderContext } from '../page-editor/sections/index.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from '../page-editor/viewports.js'
 import { EditorTopBar, type SaveState } from '../page-editor/EditorTopBar.js'
 import { SectionsPanel } from '../page-editor/SectionsPanel.js'
@@ -104,6 +105,7 @@ export function PostSectionEditor({
 
   const [addOpen, setAddOpen] = useState(false)
   const [fieldsOpen, setFieldsOpen] = useState(false)
+  const [historyOpen, setHistoryOpen] = useState(false)
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
@@ -302,6 +304,23 @@ export function PostSectionEditor({
     }
   }, [post, documentId, postType, onNavigate])
 
+  // After a version restore the server has already written the restored
+  // data — refetch so the editor reflects it instead of the stale state.
+  const handleRestored = useCallback(() => {
+    if (!post?.id) return
+    fetchPostForEditor(postType, post.id)
+      .then((p) => {
+        setPost(p)
+        setSelectedId(null)
+        setDirty(false)
+        setSaveState('idle')
+        setValidation(null)
+      })
+      .catch(() => {
+        toast.error('Version restored — refresh the page to see it.')
+      })
+  }, [postType, post?.id])
+
   const guardedNavigate = useCallback(
     (path: string) => {
       if (dirty) setLeaveTarget(path)
@@ -400,6 +419,15 @@ export function PostSectionEditor({
 
   const selected = post.sections.find((s) => s.id === selectedId) ?? null
 
+  // Section types the canvas renders as placeholders (custom + unmanaged).
+  // When present the editor surfaces "structure view" messaging and promotes
+  // "View on site" as the primary design preview.
+  const structuralTypes = Array.from(
+    new Set(
+      post.sections.filter((s) => !hasCanvasRenderer(s.sectionType)).map((s) => s.sectionType),
+    ),
+  )
+
   return (
     <ErrorBoundary>
       <div className="bg-background flex h-full flex-col overflow-hidden">
@@ -417,9 +445,11 @@ export function PostSectionEditor({
           onBack={() => guardedNavigate('/posts')}
           onPreview={handlePreview}
           onViewOnSite={post.id ? handleViewOnSite : undefined}
+          onHistory={post.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setFieldsOpen(true)}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
+          structuralTypes={structuralTypes}
         />
 
         {validation && (
@@ -452,6 +482,7 @@ export function PostSectionEditor({
               viewport={viewport}
               onSelect={setSelectedId}
               onAddSection={() => setAddOpen(true)}
+              structuralTypes={structuralTypes}
             />
           </div>
 
@@ -476,6 +507,16 @@ export function PostSectionEditor({
         onAdd={handleAdd}
       />
 
+      {post.id && (
+        <VersionHistory
+          collectionSlug={postType}
+          documentId={post.id}
+          open={historyOpen}
+          onClose={() => setHistoryOpen(false)}
+          onRestore={handleRestored}
+        />
+      )}
+
       <PostFieldsModal
         open={fieldsOpen}
         post={post}