@prenta/admin 1.1.0 → 1.3.0

package/src/lib/page-audit-input.ts

@@ -33,6 +33,20 @@ export interface AuditMetaSource {
   hasOgImage: boolean
 }
 
+/**
+ * Post identity the public template renders outside the section list.
+ *
+ * The audit engine only reads `sections`. Posts put the H1, opening prose, and
+ * featured image on the document itself, so both audit callers (saved record
+ * and live SEO pane) fold these into synthetic sections here — one mapping,
+ * so the header chip and the rings cannot disagree.
+ */
+export interface PostAuditExtras {
+  title?: string
+  bodyHtml?: string
+  featuredImage?: string
+}
+
 export interface BuildAuditInputArgs {
   sections: PageSection[]
   meta: AuditMetaSource
@@ -41,6 +55,57 @@ export interface BuildAuditInputArgs {
   record: Pick<SeoContentRecord, 'title' | 'siteName' | 'titleTemplate' | 'url'> | null
   /** Fallback title when there is no saved record yet. */
   fallbackTitle?: string
+  /** Post-only slots prepended so the same engine sees title / body / image. */
+  post?: PostAuditExtras
+}
+
+const POST_TITLE_SECTION_ID = '__post-title'
+const POST_IMAGE_SECTION_ID = '__post-featured-image'
+
+function stripHtml(html: string): string {
+  return html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+/**
+ * Prepend the post's own title, body, and featured image as sections the
+ * audit already knows how to read (H1, opening prose, image slot).
+ *
+ * A `text` section carries title + body so we do not invent a phantom hero
+ * image slot. The featured image is a separate `feature` section, and only
+ * when one is set — otherwise `imageSlots` would count an empty media field
+ * and fail alt-text for an image that is not on the page.
+ */
+export function withPostAuditSlots(sections: PageSection[], post?: PostAuditExtras): PageSection[] {
+  if (!post) return sections
+
+  const extras: PageSection[] = []
+  const title = post.title?.trim() ?? ''
+  const body = post.bodyHtml ? stripHtml(post.bodyHtml) : ''
+  if (title || body) {
+    extras.push({
+      id: POST_TITLE_SECTION_ID,
+      sectionType: 'text',
+      name: 'Post',
+      visible: true,
+      content: { heading: title, body },
+      settings: {},
+    })
+  }
+  const image = post.featuredImage?.trim() ?? ''
+  if (image) {
+    extras.push({
+      id: POST_IMAGE_SECTION_ID,
+      sectionType: 'feature',
+      name: 'Featured image',
+      visible: true,
+      content: { imageUrl: image, imageAlt: '' },
+      settings: {},
+    })
+  }
+  return extras.length ? [...extras, ...sections] : sections
 }
 
 export function buildPageAuditInput({
@@ -49,6 +114,7 @@ export function buildPageAuditInput({
   slug,
   record,
   fallbackTitle,
+  post,
 }: BuildAuditInputArgs): PageAuditInput {
   // Measure the title a searcher actually sees — the page meta title with the
   // site's template applied — not the raw field. Checking the raw field would
@@ -65,7 +131,7 @@ export function buildPageAuditInput({
     : meta.metaTitle.trim() || fallbackTitle || ''
 
   return {
-    sections,
+    sections: withPostAuditSlots(sections, post),
     seo: {
       title: renderedTitle,
       description: meta.metaDescription,

package/src/lib/preview-bridge.ts

@@ -1,140 +1,11 @@
 /**
- * Versioned postMessage protocol between the page editor (parent) and the
- * Next editing canvas (iframe). Namespaced with colons so it does not collide
- * with the legacy `prenta-preview-update` DocumentEdit bus.
+ * Field-path helpers shared by the editor canvas and the inspector.
  *
- * @see prenta docs/superpowers/specs/2026-07-29-visual-editing-design.md
+ * The old `prenta-preview:*` postMessage protocol is gone — View site opens a
+ * normal tab and does not talk back. `data-cms-field` on first-party section
+ * renderers still feeds the reflow guard and canvas field-focus.
  */
 
-export const PREVIEW_BRIDGE_VERSION = 1 as const
-
-/** Debounce for live section pushes while typing in the inspector. */
-export const PREVIEW_SECTIONS_DEBOUNCE_MS = 120
-
-export type PreviewBridgeMessageType =
-  | 'prenta-preview:ready'
-  | 'prenta-preview:select'
-  | 'prenta-preview:highlight'
-  | 'prenta-preview:sections'
-  | 'prenta-preview:mode'
-  | 'prenta-preview:edit'
-  | 'prenta-preview:request-media'
-
-export interface PreviewBridgeEnvelope {
-  type: PreviewBridgeMessageType
-  v: typeof PREVIEW_BRIDGE_VERSION
-}
-
-export interface PreviewReadyMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:ready'
-}
-
-export interface PreviewSelectMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:select'
-  sectionId: string
-  fieldPath?: string
-}
-
-export interface PreviewHighlightMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:highlight'
-  sectionId: string | null
-}
-
-/**
- * Opaque JSON object on the wire. Uses `object` (not `Record<string, unknown>`)
- * so concrete editor interfaces like `SectionSettings` remain assignable.
- */
-export type PreviewObjectPayload = object
-
-/** Wire shape for live canvas updates — matches `PublicSection` / editor sections. */
-export interface PreviewSectionPayload {
-  id: string
-  sectionType: string
-  name?: string
-  visible?: boolean
-  content?: PreviewObjectPayload
-  settings?: PreviewObjectPayload
-  unmanaged?: boolean
-}
-
-export interface PreviewSectionsMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:sections'
-  sections: PreviewSectionPayload[]
-}
-
-/** Admin → canvas: enable/disable inline editing affordances. */
-export interface PreviewModeMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:mode'
-  editing: boolean
-}
-
-/** Canvas → admin: text field edit from contenteditable. */
-export interface PreviewEditMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:edit'
-  sectionId: string
-  fieldPath: string
-  value: string
-}
-
-/** Canvas → admin: open media picker for an image field. */
-export interface PreviewRequestMediaMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:request-media'
-  sectionId: string
-  fieldPath: string
-}
-
-export type PreviewBridgeMessage =
-  | PreviewReadyMessage
-  | PreviewSelectMessage
-  | PreviewHighlightMessage
-  | PreviewSectionsMessage
-  | PreviewModeMessage
-  | PreviewEditMessage
-  | PreviewRequestMediaMessage
-
-export function isPreviewBridgeMessage(data: unknown): data is PreviewBridgeMessage {
-  if (!data || typeof data !== 'object') return false
-  const msg = data as Record<string, unknown>
-  if (msg.v !== PREVIEW_BRIDGE_VERSION) return false
-  if (typeof msg.type !== 'string' || !msg.type.startsWith('prenta-preview:')) return false
-  return true
-}
-
-export function isPreviewEditMessage(data: unknown): data is PreviewEditMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:edit') return false
-  return (
-    typeof data.sectionId === 'string' &&
-    data.sectionId.length > 0 &&
-    typeof data.fieldPath === 'string' &&
-    data.fieldPath.length > 0 &&
-    typeof data.value === 'string'
-  )
-}
-
-export function isPreviewRequestMediaMessage(data: unknown): data is PreviewRequestMediaMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:request-media') return false
-  return (
-    typeof data.sectionId === 'string' &&
-    data.sectionId.length > 0 &&
-    typeof data.fieldPath === 'string' &&
-    data.fieldPath.length > 0
-  )
-}
-
-export function isPreviewModeMessage(data: unknown): data is PreviewModeMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:mode') return false
-  return typeof data.editing === 'boolean'
-}
-
-export function canvasOriginFromSrc(src: string | null | undefined): string | null {
-  if (!src) return null
-  try {
-    return new URL(src, typeof window !== 'undefined' ? window.location.origin : undefined).origin
-  } catch {
-    return null
-  }
-}
-
 /**
  * Map a dotted content field path (`lead`, `stats.0.num`) to the inspector
  * input id (`insp-field-lead`, `insp-field-stats-0-num`). Same string shape
@@ -181,29 +52,12 @@ export function companionDimensionPaths(fieldPath: string): {
 }
 
 /**
- * Media URL slots are not contenteditable. Prefer `data-cms-field-kind="media"`
- * on the canvas; fall back to common image field leaf names.
+ * Read `data-cms-field` from a canvas click target (or its ancestor).
+ * Used so a field click opens the accordion on the matching inspector input.
  */
-export function isMediaFieldPath(fieldPath: string, kindAttr?: string | null): boolean {
-  if (kindAttr === 'media') return true
-  if (kindAttr === 'text') return false
-  const leaf = fieldPathLeaf(fieldPath)
-  if (leaf === 'imageUrl' || leaf.endsWith('ImageUrl') || leaf === 'featuredImage') return true
-  // Gallery rows use `images.N.url` (not link CTAs).
-  return leaf === 'url' && fieldPath.includes('images.')
-}
-
-/** Strip editor chrome to the public wire shape before posting to the canvas. */
-export function toPreviewSectionPayload(
-  section: PreviewSectionPayload & { internalLabel?: string },
-): PreviewSectionPayload {
-  return {
-    id: section.id,
-    sectionType: section.sectionType,
-    name: section.name,
-    visible: section.visible,
-    content: section.content ?? {},
-    settings: section.settings ?? {},
-    unmanaged: section.unmanaged,
-  }
+export function fieldPathFromEventTarget(target: EventTarget | null): string | undefined {
+  if (!(target instanceof Element)) return undefined
+  const field = target.closest('[data-cms-field]')
+  const path = field?.getAttribute('data-cms-field')?.trim()
+  return path || undefined
 }

package/src/lib/version-history.ts

@@ -35,6 +35,11 @@ export interface PageVersion {
   author: VersionAuthor
   /** Full page content as of this version — what the canvas renders. */
   sections: PageSection[]
+  /** Post identity fields, when the snapshot is a post. */
+  title?: string
+  excerpt?: string
+  featuredImage?: string
+  body?: string
 }
 
 /** Versions sharing a calendar day, newest day first. */
@@ -87,6 +92,20 @@ function toAuthor(row: VersionApiRow): VersionAuthor {
   }
 }
 
+function optionalString(value: unknown): string | undefined {
+  return typeof value === 'string' ? value : undefined
+}
+
+function optionalFeaturedImage(value: unknown): string | undefined {
+  if (typeof value === 'string') return value
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const obj = value as Record<string, unknown>
+    const url = obj.url ?? obj.publicUrl ?? obj.src
+    if (typeof url === 'string') return url
+  }
+  return undefined
+}
+
 export function toPageVersion(row: VersionApiRow): PageVersion {
   const data = row.data ?? {}
   return {
@@ -98,6 +117,10 @@ export function toPageVersion(row: VersionApiRow): PageVersion {
     // snapshot more strictly than the current page would make an unmanaged
     // section look like it was deleted in every version that contains one.
     sections: coerceSections(data.sections, { onUnknown: 'preserve' }),
+    title: optionalString(data.title),
+    excerpt: optionalString(data.excerpt),
+    featuredImage: optionalFeaturedImage(data.featuredImage),
+    body: optionalString(data.body),
   }
 }
 

package/src/lib/view-site-chrome.ts

@@ -5,11 +5,16 @@ export type ViewSiteIntent = 'preview-draft' | 'view-live'
 export const NO_PUBLIC_SITE_URL_REASON =
   'Set the public site URL in Settings → SEO to open the live design.'
 
+export const ADMIN_ORIGIN_SITE_URL_REASON =
+  'This origin is the admin, not the public site. Set the public site URL in Settings → SEO.'
+
 export function resolveViewSiteChrome(input: {
   status: PageStatus
   dirty: boolean
   hasPublicSiteUrl: boolean
   hasIdentity: boolean
+  /** True when the configured site URL is the CMS host (Astro-split misconfig). */
+  matchesAdminOrigin?: boolean
 }): {
   viewEnabled: boolean
   viewDisabledReason?: string
@@ -21,12 +26,19 @@ export function resolveViewSiteChrome(input: {
   const primaryIntent: ViewSiteIntent =
     input.status === 'PUBLISHED' && !input.dirty ? 'view-live' : 'preview-draft'
   const shareVisible = input.hasIdentity && unpublished
-  const viewEnabled = input.hasIdentity && input.hasPublicSiteUrl
+  const usablePublicUrl = input.hasPublicSiteUrl && !input.matchesAdminOrigin
+  const viewEnabled = input.hasIdentity && usablePublicUrl
+
+  let viewDisabledReason: string | undefined
+  if (input.hasIdentity && !input.hasPublicSiteUrl) {
+    viewDisabledReason = NO_PUBLIC_SITE_URL_REASON
+  } else if (input.hasIdentity && input.matchesAdminOrigin) {
+    viewDisabledReason = ADMIN_ORIGIN_SITE_URL_REASON
+  }
 
   return {
     viewEnabled,
-    viewDisabledReason:
-      input.hasIdentity && !input.hasPublicSiteUrl ? NO_PUBLIC_SITE_URL_REASON : undefined,
+    viewDisabledReason,
     primaryIntent,
     showViewLive: input.hasIdentity && input.status === 'PUBLISHED' && input.dirty,
     shareVisible,

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

@@ -13,7 +13,7 @@ interface EditorCanvasProps {
   selectedId: string | null
   breakpoint: BreakpointId
   zoom?: Zoom
-  onSelect: (id: string) => void
+  onSelect: (id: string, fieldPath?: string) => void
   onScaleChange?: (scale: number) => void
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */

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

@@ -55,6 +55,8 @@ interface EditorTopBarProps {
   onShare?: () => void
   /** When false, View site and Share are disabled with the SEO settings reason. */
   hasPublicSiteUrl?: boolean
+  /** When true, View site and Share stay disabled — the URL is the CMS host. */
+  matchesAdminOrigin?: boolean
   /**
    * Toggle the version history panel. When omitted the History button is
    * hidden — e.g. for unsaved documents that have no versions yet.
@@ -122,6 +124,7 @@ export function EditorTopBar({
   onViewOnSite,
   onShare,
   hasPublicSiteUrl,
+  matchesAdminOrigin,
   onHistory,
   historyOpen = false,
   onOpenSettings,
@@ -142,6 +145,7 @@ export function EditorTopBar({
         status,
         dirty,
         hasPublicSiteUrl: Boolean(hasPublicSiteUrl),
+        matchesAdminOrigin: Boolean(matchesAdminOrigin),
         hasIdentity: true,
       })
     : null
@@ -227,8 +231,8 @@ export function EditorTopBar({
         <button
           type="button"
           onClick={onOpenSettings}
-          aria-label="Page settings"
-          title="Page settings"
+          aria-label={backLabel === 'Posts' ? 'Post settings' : 'Page settings'}
+          title={backLabel === 'Posts' ? 'Post settings' : 'Page settings'}
           className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
         >
           <Settings2 className="h-4 w-4" aria-hidden />

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

@@ -27,13 +27,11 @@ import {
   savePageDraft,
   toggleSectionVisibility,
   updateSectionContent,
-  updateSectionContentAtPath,
   updateSectionMeta,
   validatePage,
   type EditorPage,
   type ValidationResult,
 } from '../../lib/page-editor-service.js'
-import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SharePreviewLinkDialog } from '../../components/SharePreviewLinkDialog.js'
 import { openPublicSiteTab } from '../../lib/open-public-site-tab.js'
 import type { ViewSiteIntent } from '../../lib/view-site-chrome.js'
@@ -61,7 +59,7 @@ import { SectionEditForm } from './SectionEditForm.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
 import { buildEditorContentHtml } from '../../lib/editor-seo-content.js'
-import { companionDimensionPaths, inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
+import { inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 
 interface PageSectionEditorProps {
   /** undefined when creating a new page (`/pages/new`) */
@@ -134,13 +132,6 @@ export function PageSectionEditor({
   const [selectedId, setSelectedId] = useState<string | null>(null)
   /** Canvas field click — focused after the inspector mounts for `selectedId`. */
   const [pendingFocusPath, setPendingFocusPath] = useState<string | null>(null)
-  /** Bump to skip the next `prenta-preview:sections` echo after a canvas text edit. */
-  const [suppressSectionsEcho, setSuppressSectionsEcho] = useState(0)
-  /** Canvas image Replace — opens MediaPickerModal for this field path. */
-  const [canvasMediaTarget, setCanvasMediaTarget] = useState<{
-    sectionId: string
-    fieldPath: string
-  } | null>(null)
   const [viewport, setViewport] = useState<ViewportId>(DEFAULT_VIEWPORT)
   const [zoom, setZoom] = useState<Zoom>('fit')
   /**
@@ -227,7 +218,7 @@ export function PageSectionEditor({
 
   const { canEdit, canPublish, canCreateRedirect } = useMemo(() => deriveCan(session), [session])
   const customRenderers = useAdminSectionRenderers()
-  const { siteUrl: publicSiteUrl } = usePublicSiteUrl(config?.seo?.siteUrl)
+  const { siteUrl: publicSiteUrl, matchesAdminOrigin } = usePublicSiteUrl(config?.seo?.siteUrl)
 
   // A misconfigured `pages` collection (missing the fields the editor
   // writes) would silently drop content on save — detect it up front.
@@ -716,39 +707,14 @@ export function PageSectionEditor({
       // rail has no close affordance at all — the chevron and the row both
       // re-select what is already selected and nothing happens.
       //
-      // Except when a fieldPath came with it: that is the site preview saying
-      // "the editor clicked THIS field", which must open and focus it. Making
-      // that toggle would close the form on the second click of a field the
-      // user is trying to edit.
+      // Except when a fieldPath came with it: a canvas field click must open
+      // and focus that input. Toggling would close the form on the second
+      // click of a field the user is trying to inspect.
       if (fieldPath) return id
       return current === id ? null : id
     })
   }, [])
 
-  // `effectiveCanEdit`, not `canEdit`: the site preview is a second editing
-  // surface, so a role check alone let it write through both the version-review
-  // lock and the builder-owned lock the rest of the editor honours.
-  const handleCanvasEdit = useCallback(
-    (edit: { sectionId: string; fieldPath: string; value: string }) => {
-      if (!effectiveCanEdit) return
-      setSuppressSectionsEcho((n) => n + 1)
-      mutateSections((s) =>
-        updateSectionContentAtPath(s, edit.sectionId, edit.fieldPath, edit.value),
-      )
-      setSelectedId(edit.sectionId)
-    },
-    [effectiveCanEdit, mutateSections],
-  )
-
-  const handleCanvasRequestMedia = useCallback(
-    (request: { sectionId: string; fieldPath: string }) => {
-      if (!effectiveCanEdit) return
-      setSelectedId(request.sectionId)
-      setCanvasMediaTarget(request)
-    },
-    [effectiveCanEdit],
-  )
-
   // After a canvas field click, focus the matching inspector input once painted.
   useEffect(() => {
     if (!pendingFocusPath || !selectedId) return
@@ -878,6 +844,7 @@ export function PageSectionEditor({
           onViewOnSite={page.id && page.slug ? handleViewOnSite : undefined}
           onShare={page.id ? handleShare : undefined}
           hasPublicSiteUrl={Boolean(publicSiteUrl)}
+          matchesAdminOrigin={matchesAdminOrigin}
           historyOpen={historyOpen}
           onHistory={page.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
@@ -1114,30 +1081,6 @@ export function PageSectionEditor({
         cancelLabel="Stay"
         destructive
       />
-
-      <MediaPickerModal
-        open={canvasMediaTarget !== null}
-        onClose={() => setCanvasMediaTarget(null)}
-        accept="image/*"
-        onSelectItem={(item) => {
-          if (!canvasMediaTarget) return
-          const { sectionId, fieldPath } = canvasMediaTarget
-          const { widthPath, heightPath } = companionDimensionPaths(fieldPath)
-          // Media Replace must echo sections so the canvas image updates.
-          mutateSections((s) => {
-            let next = updateSectionContentAtPath(s, sectionId, fieldPath, item.url)
-            if (typeof item.width === 'number') {
-              next = updateSectionContentAtPath(next, sectionId, widthPath, item.width)
-            }
-            if (typeof item.height === 'number') {
-              next = updateSectionContentAtPath(next, sectionId, heightPath, item.height)
-            }
-            return next
-          })
-          setCanvasMediaTarget(null)
-        }}
-        onSelect={() => setCanvasMediaTarget(null)}
-      />
     </ErrorBoundary>
   )
 }

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

@@ -1,6 +1,7 @@
 'use client'
 
 import { Puzzle } from 'lucide-react'
+import { fieldPathFromEventTarget } from '../../../lib/preview-bridge.js'
 import type { PageSection } from '../../../lib/page-editor-service.js'
 import { ErrorBoundary } from '../../../components/ErrorBoundary.js'
 import { getSectionType } from '../section-types.js'
@@ -163,7 +164,7 @@ export interface SectionRendererProps {
    *  renders hidden sections muted instead of removing them. */
   editable?: boolean
   selected?: boolean
-  onSelect?: (id: string) => void
+  onSelect?: (id: string, fieldPath?: 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). */
@@ -234,7 +235,9 @@ export function SectionRenderer({
               ? 'outline-transparent hover:outline hover:outline-[color-mix(in_oklab,var(--acc)_40%,transparent)]'
               : 'outline-transparent'
       }`}
-      onClick={interactive ? () => onSelect?.(section.id) : undefined}
+      onClick={
+        interactive ? (e) => onSelect?.(section.id, fieldPathFromEventTarget(e.target)) : 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={

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

@@ -17,13 +17,26 @@ interface PostEditorCanvasProps {
   selectedId: string | null
   viewport: ViewportId
   zoom?: Zoom
-  onSelect: (id: string) => void
+  onSelect: (id: string, fieldPath?: string) => void
   onScaleChange?: (scale: number) => void
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Add-section CTA on the empty canvas. Omitted by design-owned editors. */
   onAddSection?: () => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
+  /**
+   * Read-only render of a past version. Suppresses selection and the editing
+   * affordances, and turns on the changed-section outlines.
+   */
+  reviewing?: boolean
+  /** Sections that differ from the version before the one being reviewed. */
+  changedSectionIds?: ReadonlySet<string>
+  /**
+   * Rendered in place of the editing tip / structure notice while reviewing.
+   * Passed in rather than built here because the review bar's actions belong
+   * to the editor's history state, which the canvas knows nothing about.
+   */
+  reviewBar?: React.ReactNode
 }
 
 /**
@@ -51,6 +64,9 @@ export function PostEditorCanvas({
   onCanvasElement,
   onAddSection,
   structuralTypes = [],
+  reviewing = false,
+  changedSectionIds,
+  reviewBar,
 }: PostEditorCanvasProps) {
   const registerRef = useSectionRefs(selectedId)
 
@@ -62,15 +78,19 @@ export function PostEditorCanvas({
         onScaleChange={onScaleChange}
         onCanvasElement={onCanvasElement}
         chrome={
-          <>
-            {sections.length > 0 && <CanvasEditTip />}
-            <StructureNotice structuralTypes={structuralTypes} />
-          </>
+          reviewing ? (
+            reviewBar
+          ) : (
+            <>
+              {sections.length > 0 && <CanvasEditTip />}
+              <StructureNotice structuralTypes={structuralTypes} />
+            </>
+          )
         }
       >
         <PostHeader config={header} context={context} />
         {sections.length === 0 ? (
-          <EmptyBody onAddSection={onAddSection} />
+          <EmptyBody onAddSection={reviewing ? undefined : onAddSection} />
         ) : (
           sections.map((section) => (
             <SectionRenderer
@@ -78,6 +98,8 @@ export function PostEditorCanvas({
               section={section}
               context={context}
               editable
+              reviewing={reviewing}
+              changed={changedSectionIds?.has(section.id) ?? false}
               selected={section.id === selectedId}
               onSelect={onSelect}
               registerRef={registerRef}