@actuate-media/cms-admin 0.40.0 → 0.41.0

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

@@ -4,6 +4,7 @@ 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 { StructureNotice } from './StructureNotice.js'
 import { getViewport, type ViewportId } from './viewports.js'
 
 interface EditorCanvasProps {
@@ -12,6 +13,8 @@ interface EditorCanvasProps {
   viewport: ViewportId
   onSelect: (id: string) => void
   onAddSection: () => void
+  /** Section types rendered as placeholders — shows the "Structure view" notice. */
+  structuralTypes?: string[]
 }
 
 /**
@@ -26,6 +29,7 @@ export function EditorCanvas({
   viewport,
   onSelect,
   onAddSection,
+  structuralTypes = [],
 }: EditorCanvasProps) {
   const vp = getViewport(viewport)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -73,31 +77,34 @@ export function EditorCanvas({
       {sections.length === 0 ? (
         <EmptyCanvas onAddSection={onAddSection} />
       ) : (
-        <div
-          className="mx-auto"
-          style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}
-        >
+        <>
+          <StructureNotice structuralTypes={structuralTypes} />
           <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',
-            }}
+            className="mx-auto"
+            style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}
           >
-            {sections.map((section) => (
-              <SectionRenderer
-                key={section.id}
-                section={section}
-                editable
-                selected={section.id === selectedId}
-                onSelect={onSelect}
-                registerRef={registerRef}
-              />
-            ))}
+            <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>
+        </>
       )}
     </div>
   )

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

@@ -4,6 +4,7 @@ import {
   Check,
   ExternalLink,
   Eye,
+  History,
   Laptop,
   Loader2,
   type LucideIcon,
@@ -38,9 +39,21 @@ interface EditorTopBarProps {
    * or installs without a public URL.
    */
   onViewOnSite?: () => void
+  /**
+   * Open the version history panel. When omitted the History button is
+   * hidden — e.g. for unsaved documents that have no versions yet.
+   */
+  onHistory?: () => void
   onOpenSettings: () => void
   onSaveDraft: () => void
   onPublish: () => void
+  /**
+   * Section types the canvas renders as placeholders (custom / unmanaged).
+   * When non-empty the editor is in "structure" mode: the eye preview is
+   * labeled as a structure preview and "View on site" is promoted to a
+   * labeled button as the primary design preview.
+   */
+  structuralTypes?: string[]
 }
 
 const VIEWPORT_ICONS: Record<string, LucideIcon> = {
@@ -71,11 +84,20 @@ export function EditorTopBar({
   onBack,
   onPreview,
   onViewOnSite,
+  onHistory,
   onOpenSettings,
   onSaveDraft,
   onPublish,
+  structuralTypes = [],
 }: EditorTopBarProps) {
   const statusInfo = STATUS_TEXT[status]
+  // With custom section types on the page the canvas (and the eye preview,
+  // which reuses the admin renderers) only shows structure — the real design
+  // preview is the public site, so promote "View on site" to a labeled button.
+  const structural = structuralTypes.length > 0
+  const previewLabel = structural
+    ? 'Preview structure (custom sections show placeholders)'
+    : 'Preview page'
 
   return (
     <header className="bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
@@ -143,27 +165,50 @@ export function EditorTopBar({
           <Settings2 className="h-4 w-4" aria-hidden />
         </button>
 
+        {onHistory && (
+          <button
+            type="button"
+            onClick={onHistory}
+            aria-label="Version history"
+            title="Version history"
+            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
+          >
+            <History className="h-4 w-4" aria-hidden />
+          </button>
+        )}
+
         <button
           type="button"
           onClick={onPreview}
-          aria-label="Preview page"
-          title="Preview page"
+          aria-label={previewLabel}
+          title={previewLabel}
           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>
-        )}
+        {onViewOnSite &&
+          (structural ? (
+            <button
+              type="button"
+              onClick={onViewOnSite}
+              title="Open the draft on your public site — the real design preview"
+              className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors"
+            >
+              <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+              View on site
+            </button>
+          ) : (
+            <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"

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

@@ -5,6 +5,7 @@ import { AlertTriangle, Blocks, Loader2, Lock } 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,
@@ -32,6 +33,7 @@ import {
 } from '../../lib/preview-link.js'
 import type { SectionSettings, SectionTypeId } from './section-types.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from './viewports.js'
+import { hasCanvasRenderer } from './sections/index.js'
 import { EditorTopBar, type SaveState } from './EditorTopBar.js'
 import { SectionsPanel } from './SectionsPanel.js'
 import { EditorCanvas } from './EditorCanvas.js'
@@ -82,6 +84,7 @@ export function PageSectionEditor({
 
   const [addOpen, setAddOpen] = useState(false)
   const [settingsOpen, setSettingsOpen] = 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)
@@ -285,6 +288,23 @@ export function PageSectionEditor({
     }
   }, [page, documentId, 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 (!page?.id) return
+    fetchPageForEditor(page.id)
+      .then((p) => {
+        setPage(p)
+        setSelectedId(null)
+        setDirty(false)
+        setSaveState('idle')
+        setValidation(null)
+      })
+      .catch(() => {
+        toast.error('Version restored — refresh the page to see it.')
+      })
+  }, [page?.id])
+
   // ─── Navigation with unsaved guard ───────────────────────────────────
   const guardedNavigate = useCallback(
     (path: string) => {
@@ -398,6 +418,15 @@ export function PageSectionEditor({
     new Set(page.sections.filter((s) => s.unmanaged).map((s) => s.sectionType)),
   )
 
+  // 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(
+      page.sections.filter((s) => !hasCanvasRenderer(s.sectionType)).map((s) => s.sectionType),
+    ),
+  )
+
   return (
     <ErrorBoundary>
       <div className="bg-background flex h-full flex-col overflow-hidden">
@@ -414,9 +443,11 @@ export function PageSectionEditor({
           onBack={() => guardedNavigate('/pages')}
           onPreview={handlePreview}
           onViewOnSite={page.id ? handleViewOnSite : undefined}
+          onHistory={page.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
+          structuralTypes={structuralTypes}
         />
 
         {readOnly && (
@@ -487,6 +518,7 @@ export function PageSectionEditor({
               viewport={viewport}
               onSelect={setSelectedId}
               onAddSection={() => setAddOpen(true)}
+              structuralTypes={structuralTypes}
             />
           </div>
 
@@ -506,6 +538,16 @@ export function PageSectionEditor({
 
       <AddSectionModal open={addOpen} onClose={() => setAddOpen(false)} onAdd={handleAdd} />
 
+      {page.id && (
+        <VersionHistory
+          collectionSlug="pages"
+          documentId={page.id}
+          open={historyOpen}
+          onClose={() => setHistoryOpen(false)}
+          onRestore={handleRestored}
+        />
+      )}
+
       <PageSettingsModal
         open={settingsOpen}
         page={page}

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

@@ -0,0 +1,27 @@
+'use client'
+
+import { Puzzle } from 'lucide-react'
+
+/**
+ * Banner shown above the canvas surface when the document contains section
+ * types the canvas can only render as placeholders (custom / unmanaged
+ * types). Tells authors the canvas is a structural view — the real design
+ * lives on the public site behind "View on site".
+ */
+export function StructureNotice({ structuralTypes }: { structuralTypes: string[] }) {
+  if (structuralTypes.length === 0) return null
+  const count = structuralTypes.length
+  return (
+    <div
+      role="note"
+      className="border-border bg-card text-muted-foreground mx-auto mb-4 flex w-fit max-w-full items-center gap-2 rounded-lg border px-3 py-1.5 text-xs"
+    >
+      <Puzzle className="h-3.5 w-3.5 shrink-0" aria-hidden />
+      <span>
+        <span className="text-foreground font-medium">Structure view</span> — {count} custom section{' '}
+        type{count > 1 ? 's' : ''} shown as placeholders. Use{' '}
+        <span className="text-foreground font-medium">View on site</span> for the real design.
+      </span>
+    </div>
+  )
+}

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

@@ -15,6 +15,30 @@ import { AuthorBioSection } from './AuthorBioSection.js'
 import { RelatedPostsSection } from './RelatedPostsSection.js'
 import { GallerySection } from './GallerySection.js'
 
+/**
+ * Section types with a real canvas body component below. Anything else —
+ * config-declared custom types (`opal-*`), unmanaged sections, and the
+ * `form` embed — renders as a structural placeholder, so the editors use
+ * this set to tell authors the canvas shows structure, not design.
+ */
+const CANVAS_RENDERED_TYPES: ReadonlySet<string> = new Set([
+  'hero',
+  'text',
+  'feature',
+  'stats',
+  'cta',
+  'article-body',
+  'quote',
+  'author-bio',
+  'related-posts',
+  'gallery',
+])
+
+/** True when the canvas renders this type for real (not as a placeholder). */
+export function hasCanvasRenderer(sectionType: string): boolean {
+  return CANVAS_RENDERED_TYPES.has(sectionType)
+}
+
 /** Dispatch a section's body component by type. Shared by editor + preview. */
 function SectionBody({ section, context }: { section: PageSection; context?: PostRenderContext }) {
   switch (section.sectionType) {

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}

package/src/views/settings/SeoRobotsDefaultsCard.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import { Info } from 'lucide-react'
 import { ConfirmDangerousSettingDialog, SettingsCard, SettingsToggleRow } from './components.js'
 import type { GeneralSettingsForm, SiteIndexStatus } from './useGeneralSettings.js'
 
@@ -90,6 +91,14 @@ export function SeoRobotsDefaultsCard({
           disabled={!canEdit}
           onChange={(v) => requestToggle('noIndexNonProduction', v)}
         />
+        {isProduction && (
+          <p className="text-muted-foreground flex items-start gap-2 text-sm">
+            <Info size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+            This deployment is running in the production environment, so this setting does not
+            change pages served here — it forces noindex only on preview, staging, and development
+            deployments. To block search engines from this site, use Default No Index.
+          </p>
+        )}
       </div>
 
       <div className="border-border mt-4 space-y-2 border-t pt-4">

package/src/views/settings/components.tsx

@@ -246,6 +246,11 @@ export function SettingsSaveBar({
           <Check size={16} aria-hidden="true" /> Saved
         </span>
       )}
+      {dirty && !saving && (
+        <span className="text-muted-foreground text-sm" aria-live="polite">
+          Unsaved changes
+        </span>
+      )}
       <button
         type="button"
         onClick={onReset}