@prenta/admin 1.2.0 → 1.3.1

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

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { auditPage } from '@prenta/core/seo/page-audit'
 import type { PageSection } from '@prenta/core/page-sections'
+import { imageSlots } from '@prenta/core/seo/page-audit'
 import {
   buildPageAuditInput,
   buildPageAuditInputFromBuilder,
@@ -147,6 +148,104 @@ describe('page audit input', () => {
   })
 })
 
+const textOnlySections = [
+  {
+    id: 's-text',
+    sectionType: 'text',
+    name: 'Text',
+    visible: true,
+    content: {
+      heading: 'Section heading only',
+      body: 'Short.',
+    },
+    settings: {},
+  },
+] as unknown as PageSection[]
+
+const postMeta = {
+  metaTitle: 'Headless CMS for teams',
+  metaDescription: record.metaDescription!,
+  focusKeyword: 'unique post',
+  structuredDataType: 'Article',
+  noindex: false,
+  nosnippet: false,
+  llmsInclude: 'AUTO',
+  hasOgImage: false,
+}
+
+describe('post audit extras', () => {
+  it('uses the post title as H1 instead of only the first section heading', () => {
+    const sectionsOnly = auditPage(
+      buildPageAuditInput({
+        sections: textOnlySections,
+        meta: postMeta,
+        slug: 'a-post',
+        record: null,
+      }),
+    )
+    expect(sectionsOnly.seo.checks.find((c) => c.id === 'keyword-in-h1')?.outcome).toBe('fail')
+
+    const withTitle = auditPage(
+      buildPageAuditInput({
+        sections: textOnlySections,
+        meta: postMeta,
+        slug: 'a-post',
+        record: null,
+        post: { title: 'A unique post title' },
+      }),
+    )
+    expect(withTitle.seo.checks.find((c) => c.id === 'keyword-in-h1')?.outcome).toBe('pass')
+  })
+
+  it('uses stripped post body as the opening prose', () => {
+    const opening =
+      'Prenta is a headless CMS that gives developers an API-first architecture and editors a design-owned authoring surface for shipping content.'
+    expect(opening.length).toBeGreaterThanOrEqual(80)
+    expect(opening.length).toBeLessThanOrEqual(340)
+
+    const sectionsOnly = auditPage(
+      buildPageAuditInput({
+        sections: textOnlySections,
+        meta: postMeta,
+        slug: 'a-post',
+        record: null,
+      }),
+    )
+    expect(sectionsOnly.geo.checks.find((c) => c.id === 'direct-answer')?.outcome).toBe('fail')
+
+    const withBody = auditPage(
+      buildPageAuditInput({
+        sections: textOnlySections,
+        meta: postMeta,
+        slug: 'a-post',
+        record: null,
+        post: { bodyHtml: `<p>${opening}</p>` },
+      }),
+    )
+    expect(withBody.geo.checks.find((c) => c.id === 'direct-answer')?.outcome).toBe('pass')
+  })
+
+  it('counts a featured image as an image slot that sections-only would miss', () => {
+    const sectionsOnly = buildPageAuditInput({
+      sections: textOnlySections,
+      meta: postMeta,
+      slug: 'a-post',
+      record: null,
+    })
+    expect(imageSlots(sectionsOnly.sections)).toHaveLength(0)
+
+    const withImage = buildPageAuditInput({
+      sections: textOnlySections,
+      meta: postMeta,
+      slug: 'a-post',
+      record: null,
+      post: { featuredImage: 'https://cdn.example.com/hero.webp' },
+    })
+    expect(imageSlots(withImage.sections)).toHaveLength(1)
+    expect(imageSlots(withImage.sections)[0]?.sectionId).toBe('__post-featured-image')
+  })
+})
+
 function builderTree(heroData: Record<string, unknown>) {
   return {
     type: 'page',

package/src/__tests__/lib/version-history.test.ts

@@ -40,6 +40,26 @@ describe('toPageVersion', () => {
     expect(mapped.author.name).toBe('Sarah Mills')
   })
 
+  it('lifts post identity fields so canvas review can show the snapshot header', () => {
+    const mapped = toPageVersion({
+      id: 'v1',
+      changeType: 'UPDATE',
+      createdAt: '2026-08-02T12:00:00Z',
+      data: {
+        title: 'Snapshot title',
+        excerpt: 'Snapshot excerpt',
+        featuredImage: { url: 'https://cdn.example.com/hero.webp' },
+        body: '<p>Snapshot body</p>',
+        sections: [],
+      },
+    })
+
+    expect(mapped.title).toBe('Snapshot title')
+    expect(mapped.excerpt).toBe('Snapshot excerpt')
+    expect(mapped.featuredImage).toBe('https://cdn.example.com/hero.webp')
+    expect(mapped.body).toBe('<p>Snapshot body</p>')
+  })
+
   it('preserves an unmanaged section rather than dropping it from the snapshot', () => {
     // Coercing a snapshot more strictly than the live document reads would
     // make an externally-managed section look deleted in every version.

package/src/__tests__/no-server-barrel-imports.test.ts

@@ -9,9 +9,8 @@ import { describe, expect, it } from 'vitest'
 // the bug Opal hit where Turbopack pulled `pg`/`fs` into the browser build.
 //
 // Type-only imports (`import type` / `export type`) are erased by tsc and are
-// safe. Page-builder runtime utilities must come from the client-safe
-// `@prenta/core/page-builder` subpath instead. This test fails if
-// any source file reintroduces a value import from the bare barrel.
+// safe. This test fails if any source file reintroduces a value import from
+// the bare barrel.
 
 const SRC_DIR = fileURLToPath(new URL('../', import.meta.url))
 
@@ -52,7 +51,7 @@ describe('cms-admin client/server bundle boundary', () => {
 
     expect(
       offenders,
-      `Use '@prenta/core/page-builder' (or 'import type') instead:\n${offenders.join('\n')}`,
+      `Use 'import type' from '@prenta/core' or a client-safe subpath instead:\n${offenders.join('\n')}`,
     ).toEqual([])
   })
 })

package/src/__tests__/views/editor-top-bar.render.test.tsx

@@ -232,4 +232,10 @@ describe('EditorTopBar history button', () => {
       expect(button.className, `${name} has no touch target`).toContain('prenta-touch-target')
     }
   })
+
+  it('labels the gear Post settings when the editor is a post', () => {
+    render(<EditorTopBar {...baseProps} backLabel="Posts" />)
+    expect(screen.getByRole('button', { name: 'Post settings' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Page settings' })).toBeNull()
+  })
 })

package/src/__tests__/views/post-section-editor.test.tsx

@@ -51,6 +51,7 @@ function loadedPost(
     featuredImage: '',
     body: '',
     category: '',
+    tags: [],
     status: 'DRAFT',
     publishDate: null,
     sections: sections.map((s) => ({ ...s, visible: true, content: {}, settings: {} })),
@@ -276,6 +277,64 @@ describe('PostSectionEditor rail', () => {
 
     expect(screen.getByRole('tab', { name: /Sections/ })).toBeTruthy()
     expect(screen.getByRole('tab', { name: /SEO/ })).toBeTruthy()
+    expect(screen.getByRole('tab', { name: 'Post' })).toBeTruthy()
+  })
+
+  it('live-applies Post tab edits onto the editor', async () => {
+    fetchTemplateForEditor.mockRejectedValue(new Error('no template'))
+    fetchPostForEditor.mockResolvedValue(
+      loadedPost([{ id: 's1', sectionType: 'quote', name: 'Quote' }]),
+    )
+    render(
+      <PostSectionEditor
+        postType="blog"
+        documentId="p1"
+        config={validConfig}
+        onNavigate={() => {}}
+        session={{ user: { role: 'EDITOR' } }}
+      />,
+    )
+    await screen.findByRole('tablist', { name: 'Editor panels' })
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Post' }))
+    const title = document.getElementById('post-title') as HTMLInputElement
+    fireEvent.change(title, { target: { value: 'Renamed in rail' } })
+    expect(screen.getAllByText('Renamed in rail').length).toBeGreaterThan(0)
+  })
+
+  it('inlines post fields on the Post tab, and the gear still opens the modal', async () => {
+    await renderLoaded()
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Post' }))
+    const panel = document.getElementById('rail-panel-page')
+    expect(panel).toBeTruthy()
+    expect(panel!.querySelector('#post-title')).toBeTruthy()
+    expect(panel!.querySelector('#post-slug')).toBeTruthy()
+    expect(panel!.querySelector('#post-excerpt')).toBeTruthy()
+    expect(screen.queryByRole('dialog', { name: 'Post details' })).toBeNull()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Post settings' }))
+    expect(screen.getByRole('dialog', { name: 'Post details' })).toBeTruthy()
+  })
+
+  it('puts the audit score on the SEO tab and the header chip', async () => {
+    await renderLoaded()
+
+    expect(
+      screen.getByRole('tab', { name: /SEO(?:.|\s)*(score \d+ of 100|not rated)/i }),
+    ).toBeTruthy()
+    expect(screen.getByRole('button', { name: /SEO(?:, score \d+ out of 100)?/ })).toBeTruthy()
+  })
+
+  it('presses the History button while the overlay is open', async () => {
+    await renderLoaded()
+
+    const history = screen.getByRole('button', { name: 'Version history' })
+    expect(history.getAttribute('aria-pressed')).toBe('false')
+    fireEvent.click(history)
+    expect(history.getAttribute('aria-pressed')).toBe('true')
+    expect(screen.getByRole('region', { name: 'Version history' })).toBeTruthy()
+    expect(screen.queryByRole('dialog', { name: /version history/i })).toBeNull()
   })
 
   it('opens SEO inside the rail, not as a second panel beside it', async () => {

package/src/__tests__/views/post-tab.render.test.tsx

@@ -0,0 +1,116 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { EditorPost } from '../../lib/post-editor-service.js'
+
+const cmsApi = vi.fn(async () => ({ data: { field: 'tags', values: [] }, status: 200 }))
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApi(...(args as [])),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+vi.mock('../../lib/coauthor-client.js', () => ({
+  coauthorText: vi.fn(async () => ({
+    ok: true,
+    result: { action: 'compress', text: 'AI excerpt' },
+  })),
+}))
+
+const { PostTab } = await import('../../views/post-editor/PostTab.js')
+
+function basePost(over: Partial<EditorPost> = {}): EditorPost {
+  return {
+    id: 'p1',
+    postType: 'blog',
+    title: 'Hello',
+    slug: 'hello',
+    excerpt: 'A short summary.',
+    featuredImage: '',
+    body: '',
+    category: '',
+    tags: [],
+    status: 'DRAFT',
+    publishDate: null,
+    scheduledAt: null,
+    scheduledUnpublishAt: null,
+    sections: [],
+    seoTitle: '',
+    seoDescription: '',
+    publishedAt: null,
+    updatedAt: null,
+    ...over,
+  }
+}
+
+const SELECT_FIELDS = {
+  category: {
+    type: 'select' as const,
+    options: [
+      { label: 'News', value: 'news' },
+      { label: 'Tutorials', value: 'tutorials' },
+    ],
+  },
+  tags: { type: 'array' as const, maxRows: 12 },
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+})
+
+describe('PostTab', () => {
+  it('live-applies title, slug, and excerpt without a dialog', () => {
+    const onChange = vi.fn()
+    render(<PostTab post={basePost()} canEdit fields={SELECT_FIELDS} onChange={onChange} />)
+
+    expect(screen.queryByRole('dialog')).toBeNull()
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Renamed' } })
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ title: 'Renamed' }))
+
+    fireEvent.change(screen.getByLabelText(/^Slug/), { target: { value: 'custom-slug' } })
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ slug: 'custom-slug' }))
+
+    fireEvent.change(screen.getByLabelText(/^Excerpt/), { target: { value: 'New excerpt' } })
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ excerpt: 'New excerpt' }))
+  })
+
+  it('derives slug from title until the slug field is edited', () => {
+    const onChange = vi.fn()
+    const { rerender } = render(
+      <PostTab post={basePost({ title: '', slug: '' })} canEdit onChange={onChange} />,
+    )
+
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Hello World' } })
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ title: 'Hello World', slug: 'hello-world' }),
+    )
+
+    rerender(
+      <PostTab
+        post={basePost({ title: 'Hello World', slug: 'hello-world' })}
+        canEdit
+        onChange={onChange}
+      />,
+    )
+    fireEvent.change(screen.getByLabelText(/^Slug/), { target: { value: 'custom-slug' } })
+    onChange.mockClear()
+    rerender(
+      <PostTab
+        post={basePost({ title: 'Hello World', slug: 'custom-slug' })}
+        canEdit
+        onChange={onChange}
+      />,
+    )
+    fireEvent.change(screen.getByLabelText(/^Title/), { target: { value: 'Changed Title' } })
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ title: 'Changed Title' }))
+    expect(onChange).not.toHaveBeenCalledWith(expect.objectContaining({ slug: expect.anything() }))
+  })
+
+  it('does not offer page-only controls', () => {
+    render(<PostTab post={basePost()} canEdit onChange={() => {}} />)
+    expect(screen.queryByText(/301 redirect/)).toBeNull()
+    expect(screen.queryByText(/Danger zone/)).toBeNull()
+    expect(screen.queryByText(/Search directives/)).toBeNull()
+    expect(screen.queryByLabelText(/URL slug/)).toBeNull()
+  })
+})

package/src/components/CanvasEditTip.tsx

@@ -27,8 +27,8 @@ export function CanvasEditTip() {
         <span className="text-foreground font-medium">Editing tip</span>
         {' — '}
         Click a section on the canvas, or in the list, to open its copy and images in the section
-        list. Use <span className="text-foreground font-medium">View site</span> for the live
-        design.
+        list. The device picker sizes this canvas, not the live site. Use{' '}
+        <span className="text-foreground font-medium">View site</span> for the real design.
       </p>
       <button
         type="button"

package/src/components/seo/SeoEditorPane.tsx

@@ -154,6 +154,14 @@ export interface SeoEditorPaneProps {
   slug?: string
   draftMeta?: { seoTitle: string; seoDescription: string }
   onDraftChange?: (patch: { seoTitle?: string; seoDescription?: string }) => void
+  /**
+   * Post identity the template renders outside the section list. Folded into
+   * the same `buildPageAuditInput` path the saved-record audit uses, so live
+   * rings and the header chip cannot disagree on H1 / opening / featured image.
+   */
+  title?: string
+  bodyHtml?: string
+  featuredImage?: string
 }
 
 export function SeoEditorPane({
@@ -167,6 +175,9 @@ export function SeoEditorPane({
   slug = '',
   draftMeta,
   onDraftChange,
+  title,
+  bodyHtml,
+  featuredImage,
 }: SeoEditorPaneProps) {
   const isDraft = !entityId
   const [record, setRecord] = useState<SeoContentRecord | null>(null)
@@ -471,9 +482,13 @@ export function SeoEditorPane({
         slug,
         record,
         fallbackTitle: draftMeta?.seoTitle,
+        post:
+          title !== undefined || bodyHtml !== undefined || featuredImage !== undefined
+            ? { title, bodyHtml, featuredImage }
+            : undefined,
       }),
     )
-  }, [auditSections, form, slug, record, draftMeta?.seoTitle])
+  }, [auditSections, form, slug, record, draftMeta?.seoTitle, title, bodyHtml, featuredImage])
 
   useEffect(() => {
     onAuditChange?.(audit)

package/src/hooks/usePageAudit.ts

@@ -4,7 +4,11 @@ import { useCallback, useEffect, useState } from 'react'
 import type { PageSection } from '@prenta/core/page-sections'
 import { auditPage, type PageAuditResult } from '@prenta/core/seo/page-audit'
 import { fetchSeoContentRecord, type SeoContentRecord } from '../lib/seo-service.js'
-import { buildPageAuditInput, metaFromRecord } from '../lib/page-audit-input.js'
+import {
+  buildPageAuditInput,
+  metaFromRecord,
+  type PostAuditExtras,
+} from '../lib/page-audit-input.js'
 
 export interface UsePageAuditArgs {
   entityType: 'page' | 'post'
@@ -19,6 +23,8 @@ export interface UsePageAuditArgs {
    * exactly the pages that most need the nudge.
    */
   fallback?: { title?: string; description?: string }
+  /** Post identity the template renders outside the section list. */
+  post?: PostAuditExtras
 }
 
 /**
@@ -42,6 +48,7 @@ export function usePageAudit({
   sections,
   slug,
   fallback,
+  post,
 }: UsePageAuditArgs): {
   audit: PageAuditResult
   record: SeoContentRecord | null
@@ -90,7 +97,7 @@ export function usePageAudit({
         hasOgImage: false,
       }
 
-  const audit = auditPage(buildPageAuditInput({ sections, meta, slug, record }))
+  const audit = auditPage(buildPageAuditInput({ sections, meta, slug, record, post }))
 
   const reload = useCallback(() => setNonce((n) => n + 1), [])
 

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/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/styles/prenta-tokens.css

@@ -75,10 +75,10 @@
 
   /* Type */
   /*
-   * UI text. Self-hosted woff2 under design-system/fonts — never a third-party
-   * request, because the admin renders inside consumer applications.
+   * UI text. system-ui until OFL woff2 ships under design-system/fonts/. Never
+   * a third-party request — the admin renders inside consumer applications.
    */
-  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   /* Code, robots directives, token names */
   --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
   --fw-reg: 450;

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

@@ -231,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/post-editor/PostEditorCanvas.tsx

@@ -24,6 +24,19 @@ interface PostEditorCanvasProps {
   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}