@actuate-media/cms-admin 0.46.0 → 0.48.0

package/src/__tests__/views/collection-list-facets.render.test.tsx

@@ -0,0 +1,148 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+/**
+ * CollectionList facet filters + taxonomy columns (taxonomy Phase B).
+ * Pins: facet dropdowns appear for select fields (config options), free-text
+ * `category`, and tag-shaped arrays (in-use values via field-values API);
+ * picking one adds `filter.<field>=` to the list endpoint; and taxonomy
+ * columns surface category/tags values in the table.
+ */
+
+let fieldValues: Record<string, Array<{ value: string; count: number }>> = {}
+
+const cmsApi = vi.fn(async (endpoint: string, _options?: unknown) => {
+  const match = endpoint.match(/field-values\?field=([^&]+)/)
+  if (match) {
+    const field = decodeURIComponent(match[1] ?? '')
+    return { data: { field, values: fieldValues[field] ?? [] }, status: 200 }
+  }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (e: string, o?: unknown) => cmsApi(e, o as never),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+let lastEndpoint = ''
+let listDocs: any[] = []
+
+vi.mock('../../lib/useApiData.js', () => ({
+  useApiData: (endpoint: string) => {
+    lastEndpoint = endpoint
+    return {
+      data: { docs: listDocs, total: listDocs.length },
+      loading: false,
+      error: null,
+      refetch: vi.fn(),
+    }
+  },
+}))
+
+const { CollectionList } = await import('../../views/CollectionList.js')
+
+const CONFIG = {
+  collections: {
+    posts: {
+      slug: 'posts',
+      labels: { singular: 'Post', plural: 'Posts' },
+      fields: {
+        title: { type: 'text', label: 'Title' },
+        topic: {
+          type: 'select',
+          label: 'Topic',
+          options: [
+            { label: 'News', value: 'news' },
+            { label: 'Tutorials', value: 'tutorials' },
+          ],
+        },
+        category: { type: 'text', label: 'Category', maxLength: 80 },
+        body: { type: 'richText', label: 'Body' },
+        tags: {
+          type: 'array',
+          label: 'Tags',
+          fields: { tag: { type: 'text', label: 'Tag', required: true } },
+        },
+      },
+    },
+  },
+}
+
+function renderList() {
+  return render(<CollectionList collectionSlug="posts" config={CONFIG} onNavigate={vi.fn()} />)
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  fieldValues = {}
+  listDocs = []
+  lastEndpoint = ''
+})
+
+describe('CollectionList facets', () => {
+  it('renders facet dropdowns for select, category, and tag-shaped fields', async () => {
+    fieldValues = {
+      category: [{ value: 'Releases', count: 4 }],
+      tags: [{ value: 'AI', count: 3 }],
+    }
+    renderList()
+
+    expect(screen.getByLabelText('Filter by Topic')).toBeTruthy()
+    await waitFor(() => {
+      expect(screen.getByLabelText('Filter by Category')).toBeTruthy()
+      expect(screen.getByLabelText('Filter by Tags')).toBeTruthy()
+    })
+    // Select facets list config option labels, not in-use values.
+    expect(screen.getByRole('option', { name: 'Tutorials' })).toBeTruthy()
+    expect(screen.getByRole('option', { name: 'Releases' })).toBeTruthy()
+  })
+
+  it('adds filter.<field> to the list endpoint when a facet is picked', async () => {
+    fieldValues = { tags: [{ value: 'AI', count: 3 }] }
+    renderList()
+
+    fireEvent.change(screen.getByLabelText('Filter by Topic'), { target: { value: 'news' } })
+    await waitFor(() => expect(lastEndpoint).toContain('filter.topic=news'))
+
+    await waitFor(() => expect(screen.getByLabelText('Filter by Tags')).toBeTruthy())
+    fireEvent.change(screen.getByLabelText('Filter by Tags'), { target: { value: 'AI' } })
+    await waitFor(() => {
+      expect(lastEndpoint).toContain('filter.topic=news')
+      expect(lastEndpoint).toContain('filter.tags=AI')
+    })
+  })
+
+  it('clears all facets via the clear button', async () => {
+    renderList()
+    fireEvent.change(screen.getByLabelText('Filter by Topic'), { target: { value: 'news' } })
+    await waitFor(() => expect(lastEndpoint).toContain('filter.topic=news'))
+
+    fireEvent.click(screen.getByRole('button', { name: 'Clear filters' }))
+    await waitFor(() => expect(lastEndpoint).not.toContain('filter.'))
+  })
+
+  it('shows taxonomy columns with select labels and tag lists', async () => {
+    listDocs = [
+      {
+        id: '1',
+        title: 'Hello',
+        status: 'PUBLISHED',
+        updatedAt: '2026-06-01T00:00:00Z',
+        data: { topic: 'news', category: 'Releases', tags: [{ tag: 'AI' }, 'CMS'] },
+      },
+    ]
+    renderList()
+
+    // Column headers for each facet field.
+    expect(screen.getByRole('columnheader', { name: 'Topic' })).toBeTruthy()
+    expect(screen.getByRole('columnheader', { name: 'Category' })).toBeTruthy()
+    expect(screen.getByRole('columnheader', { name: 'Tags' })).toBeTruthy()
+    // Select value maps to its config label; tags render row + string shapes.
+    const table = within(screen.getByRole('table'))
+    expect(table.getByText('News')).toBeTruthy()
+    expect(table.getByText('Releases')).toBeTruthy()
+    expect(table.getByText('AI, CMS')).toBeTruthy()
+  })
+})

package/src/__tests__/views/use-site-preview.render.test.tsx

@@ -0,0 +1,122 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+/**
+ * useSitePreview — drives the inline branded preview (iframe of the public
+ * site rendering a draft). Pins: token minted + URL built on activation,
+ * unsaved drafts are persisted first (a failed save cancels activation), and
+ * the frame reloads (reloadKey bump) after each completed save.
+ */
+
+const createPreviewToken = vi.fn(async () => ({
+  token: 'tok-123',
+  expiresAt: '2026-06-19T00:00:00Z',
+}))
+
+vi.mock('../../lib/preview-link.js', () => ({
+  createPreviewToken: (...args: unknown[]) => createPreviewToken(...(args as [])),
+  buildPublicPreviewUrl: ({ siteUrl, urlPrefix, slug, token }: any) =>
+    `${siteUrl}${urlPrefix ? `/${urlPrefix}` : ''}/${slug}?preview=${token}`,
+  resolveSiteUrl: (u?: string | null) => u ?? 'https://fallback.test',
+}))
+
+vi.mock('sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}))
+
+const { useSitePreview } = await import('../../views/page-editor/useSitePreview.js')
+const { toast } = await import('sonner')
+
+import type { SaveState } from '../../views/page-editor/EditorTopBar.js'
+
+function Harness({
+  documentId = 'doc-1',
+  slug = 'about',
+  dirty = false,
+  saveState = 'idle' as SaveState,
+  saveDraft = vi.fn(async () => true),
+}: {
+  documentId?: string | null
+  slug?: string | null
+  dirty?: boolean
+  saveState?: SaveState
+  saveDraft?: () => Promise<boolean>
+}) {
+  const sp = useSitePreview({
+    collection: 'pages',
+    documentId,
+    slug,
+    urlPrefix: '',
+    siteUrl: 'https://site.test',
+    dirty,
+    saveState,
+    saveDraft,
+  })
+  return (
+    <div>
+      <button type="button" onClick={sp.toggle}>
+        toggle
+      </button>
+      <output data-testid="state">
+        {JSON.stringify({ active: sp.active, url: sp.url, reloadKey: sp.reloadKey })}
+      </output>
+    </div>
+  )
+}
+
+function state(): { active: boolean; url: string | null; reloadKey: number } {
+  return JSON.parse(screen.getByTestId('state').textContent ?? '{}')
+}
+
+beforeEach(() => {
+  createPreviewToken.mockClear()
+  vi.mocked(toast.error).mockClear()
+})
+
+describe('useSitePreview', () => {
+  it('mints a token and builds the public draft URL on activation', async () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByText('toggle'))
+    expect(state().active).toBe(true)
+    await waitFor(() => {
+      expect(state().url).toBe('https://site.test/about?preview=tok-123')
+    })
+    expect(createPreviewToken).toHaveBeenCalledWith('pages', 'doc-1')
+  })
+
+  it('saves a dirty draft before minting; a failed save cancels activation', async () => {
+    const saveDraft = vi.fn(async () => false)
+    render(<Harness dirty saveDraft={saveDraft} />)
+    fireEvent.click(screen.getByText('toggle'))
+    await waitFor(() => expect(saveDraft).toHaveBeenCalled())
+    await waitFor(() => expect(state().active).toBe(false))
+    expect(createPreviewToken).not.toHaveBeenCalled()
+  })
+
+  it('refuses to activate for unsaved documents', () => {
+    render(<Harness documentId={null} />)
+    fireEvent.click(screen.getByText('toggle'))
+    expect(state().active).toBe(false)
+    expect(toast.error).toHaveBeenCalled()
+  })
+
+  it('toggles back to the canvas on second click', async () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByText('toggle'))
+    await waitFor(() => expect(state().url).not.toBeNull())
+    fireEvent.click(screen.getByText('toggle'))
+    expect(state().active).toBe(false)
+  })
+
+  it('bumps reloadKey after a save completes while the preview is open', async () => {
+    const { rerender } = render(<Harness saveState="idle" />)
+    fireEvent.click(screen.getByText('toggle'))
+    await waitFor(() => expect(state().url).not.toBeNull())
+    expect(state().reloadKey).toBe(0)
+
+    rerender(<Harness saveState="saving" />)
+    rerender(<Harness saveState="saved" />)
+    await waitFor(() => expect(state().reloadKey).toBe(1))
+  })
+})

package/src/views/CollectionList.tsx

@@ -24,14 +24,79 @@ export interface CollectionListProps {
 type SortField = 'title' | 'status' | 'updatedAt'
 type SortOrder = 'asc' | 'desc'
 
-function resolveLabel(config: any, slug: string): { singular: string; plural: string } {
-  const fallback = { singular: slug, plural: slug }
-  if (!config?.collections) return fallback
+function resolveCollection(config: any, slug: string): any | undefined {
+  if (!config?.collections) return undefined
   const list = Array.isArray(config.collections)
     ? config.collections
     : Object.values(config.collections)
-  const match = (list as any[]).find((c: any) => c.slug === slug)
-  return match?.labels ?? fallback
+  return (list as any[]).find((c: any) => c.slug === slug)
+}
+
+function resolveLabel(config: any, slug: string): { singular: string; plural: string } {
+  return resolveCollection(config, slug)?.labels ?? { singular: slug, plural: slug }
+}
+
+/** One facet dropdown in the filter bar. */
+interface FacetDef {
+  name: string
+  label: string
+  /** `options` = fixed list from the config; `values` = in-use values from the field-values API. */
+  source: 'options' | 'values'
+  options?: Array<{ label: string; value: string }>
+}
+
+/** True for array fields shaped like tags: a single required text sub-field. */
+function isTagShapedArray(field: any): boolean {
+  if (field?.type !== 'array' || !field.fields) return false
+  const subs = Object.values(field.fields) as any[]
+  return subs.length === 1 && subs[0]?.type === 'text'
+}
+
+/**
+ * Facetable fields for the filter bar (taxonomy Phase B): structured selects
+ * use their config options; free-text `category` and tag-shaped arrays load
+ * the collection's in-use values. Capped so the bar stays scannable.
+ */
+function facetFieldsFor(config: any, slug: string): FacetDef[] {
+  const fields = resolveCollection(config, slug)?.fields
+  if (!fields || typeof fields !== 'object') return []
+  const out: FacetDef[] = []
+  for (const [name, field] of Object.entries(fields) as Array<[string, any]>) {
+    if (field?.hidden) continue
+    if (field?.type === 'select' && Array.isArray(field.options)) {
+      out.push({ name, label: field.label ?? name, source: 'options', options: field.options })
+    } else if (field?.type === 'text' && name === 'category') {
+      out.push({ name, label: field.label ?? 'Category', source: 'values' })
+    } else if (isTagShapedArray(field)) {
+      out.push({ name, label: field.label ?? name, source: 'values' })
+    }
+    if (out.length >= 3) break
+  }
+  return out
+}
+
+/** Read a doc's display value for a facet column (select values map to labels). */
+function facetCellValue(doc: any, facet: FacetDef): string {
+  const raw = doc?.data?.[facet.name]
+  if (typeof raw === 'string') {
+    if (!raw) return ''
+    const opt = facet.options?.find((o) => o.value === raw)
+    return opt?.label ?? raw
+  }
+  if (Array.isArray(raw)) {
+    const tags = raw
+      .map((item) =>
+        typeof item === 'string'
+          ? item
+          : item && typeof item === 'object'
+            ? Object.values(item).find((v) => typeof v === 'string')
+            : undefined,
+      )
+      .filter((v): v is string => Boolean(v))
+    if (tags.length === 0) return ''
+    return tags.length > 3 ? `${tags.slice(0, 3).join(', ')} +${tags.length - 3}` : tags.join(', ')
+  }
+  return ''
 }
 
 function statusColor(status: string): string {
@@ -75,6 +140,7 @@ function formatDate(d: string | undefined): string {
 
 export function CollectionList({ collectionSlug, config, onNavigate }: CollectionListProps) {
   const labels = useMemo(() => resolveLabel(config, collectionSlug), [config, collectionSlug])
+  const facets = useMemo(() => facetFieldsFor(config, collectionSlug), [config, collectionSlug])
 
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
@@ -82,6 +148,9 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   const [sort, setSort] = useState<SortField | null>(null)
   const [order, setOrder] = useState<SortOrder>('asc')
   const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [filters, setFilters] = useState<Record<string, string>>({})
+  // In-use values per `values`-sourced facet, fetched once per collection.
+  const [facetValues, setFacetValues] = useState<Record<string, string[]>>({})
   const searchTimer = useRef<ReturnType<typeof setTimeout>>(undefined)
 
   useEffect(() => {
@@ -97,8 +166,11 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
     let url = `/collections/${collectionSlug}?page=${page}&pageSize=25`
     if (debouncedSearch) url += `&search=${encodeURIComponent(debouncedSearch)}`
     if (sort) url += `&sort=${sort}&order=${order}`
+    for (const [field, value] of Object.entries(filters)) {
+      if (value) url += `&filter.${encodeURIComponent(field)}=${encodeURIComponent(value)}`
+    }
     return url
-  }, [collectionSlug, page, debouncedSearch, sort, order])
+  }, [collectionSlug, page, debouncedSearch, sort, order, filters])
 
   const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(endpoint)
   const docs = data?.docs ?? []
@@ -109,8 +181,40 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
     setPage(1)
     setSelected(new Set())
     setSearch('')
+    setFilters({})
+    setFacetValues({})
   }, [collectionSlug])
 
+  // Load in-use values for facets that aren't config-defined selects.
+  useEffect(() => {
+    let cancelled = false
+    for (const facet of facets) {
+      if (facet.source !== 'values') continue
+      cmsApi<{ field: string; values: Array<{ value: string; count: number }> }>(
+        `/collections/${collectionSlug}/field-values?field=${encodeURIComponent(facet.name)}`,
+      ).then((res) => {
+        if (cancelled || !res.data?.values) return
+        setFacetValues((prev) => ({
+          ...prev,
+          [facet.name]: res.data!.values.map((v) => v.value),
+        }))
+      })
+    }
+    return () => {
+      cancelled = true
+    }
+  }, [collectionSlug, facets])
+
+  const setFilter = useCallback((field: string, value: string) => {
+    setFilters((prev) => {
+      const next = { ...prev }
+      if (value) next[field] = value
+      else delete next[field]
+      return next
+    })
+    setPage(1)
+  }, [])
+
   const toggleSort = useCallback((field: SortField) => {
     setSort((prev) => {
       if (prev === field) {
@@ -198,23 +302,64 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
         </button>
       </div>
 
-      {/* Search */}
-      <div className="relative mb-4">
-        <Search
-          className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
-          style={{ color: 'var(--actuate-text-muted, #9ca3af)' }}
-        />
-        <input
-          type="text"
-          placeholder={`Search ${labels.plural.toLowerCase()}...`}
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
-          style={{
-            borderColor: 'var(--actuate-border, #d1d5db)',
-            color: 'var(--actuate-text, #111827)',
-          }}
-        />
+      {/* Search + facet filters */}
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <div className="relative min-w-[200px] flex-1">
+          <Search
+            className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            style={{ color: 'var(--actuate-text-muted, #9ca3af)' }}
+          />
+          <input
+            type="text"
+            placeholder={`Search ${labels.plural.toLowerCase()}...`}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
+            style={{
+              borderColor: 'var(--actuate-border, #d1d5db)',
+              color: 'var(--actuate-text, #111827)',
+            }}
+          />
+        </div>
+        {facets.map((facet) => {
+          const values =
+            facet.source === 'options'
+              ? (facet.options ?? [])
+              : (facetValues[facet.name] ?? []).map((v) => ({ label: v, value: v }))
+          if (values.length === 0) return null
+          return (
+            <select
+              key={facet.name}
+              aria-label={`Filter by ${facet.label}`}
+              value={filters[facet.name] ?? ''}
+              onChange={(e) => setFilter(facet.name, e.target.value)}
+              className="rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+              style={{
+                borderColor: 'var(--actuate-border, #d1d5db)',
+                color: filters[facet.name]
+                  ? 'var(--actuate-text, #111827)'
+                  : 'var(--actuate-text-secondary, #6b7280)',
+              }}
+            >
+              <option value="">All {facet.label.toLowerCase()}</option>
+              {values.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          )
+        })}
+        {Object.keys(filters).length > 0 && (
+          <button
+            type="button"
+            onClick={() => setFilters({})}
+            className="rounded-lg px-2 py-2 text-sm underline transition-opacity hover:opacity-75"
+            style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+          >
+            Clear filters
+          </button>
+        )}
       </div>
 
       {/* Bulk actions */}
@@ -317,6 +462,15 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                 <th className="px-3 py-2 text-left">
                   <SortCol field="title">Title</SortCol>
                 </th>
+                {facets.map((facet) => (
+                  <th
+                    key={facet.name}
+                    className="px-3 py-2 text-left text-xs font-medium"
+                    style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+                  >
+                    {facet.label}
+                  </th>
+                ))}
                 <th className="px-3 py-2 text-left">
                   <SortCol field="status">Status</SortCol>
                 </th>
@@ -356,6 +510,16 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
                       {doc.title || doc.name || `#${doc.id}`}
                     </button>
                   </td>
+                  {facets.map((facet) => (
+                    <td
+                      key={facet.name}
+                      className="max-w-[200px] truncate px-3 py-2"
+                      style={{ color: 'var(--actuate-text-secondary, #6b7280)' }}
+                      title={facetCellValue(doc, facet) || undefined}
+                    >
+                      {facetCellValue(doc, facet) || '—'}
+                    </td>
+                  ))}
                   <td className="px-3 py-2">
                     <span
                       className="inline-block rounded-full px-2 py-0.5 text-xs font-medium"

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

@@ -4,6 +4,7 @@ import {
   Check,
   ExternalLink,
   Eye,
+  Globe,
   History,
   Laptop,
   Loader2,
@@ -44,6 +45,13 @@ interface EditorTopBarProps {
    * hidden — e.g. for unsaved documents that have no versions yet.
    */
   onHistory?: () => void
+  /** Whether the inline site preview (iframe of the public site) is showing. */
+  sitePreview?: boolean
+  /**
+   * Toggle the inline site preview — renders the draft through the consumer's
+   * real public route inside the editor. Hidden when omitted (unsaved docs).
+   */
+  onToggleSitePreview?: () => void
   onOpenSettings: () => void
   onSaveDraft: () => void
   onPublish: () => void
@@ -85,6 +93,8 @@ export function EditorTopBar({
   onPreview,
   onViewOnSite,
   onHistory,
+  sitePreview = false,
+  onToggleSitePreview,
   onOpenSettings,
   onSaveDraft,
   onPublish,
@@ -187,6 +197,27 @@ export function EditorTopBar({
           <Eye className="h-4 w-4" aria-hidden />
         </button>
 
+        {onToggleSitePreview && (
+          <button
+            type="button"
+            onClick={onToggleSitePreview}
+            aria-pressed={sitePreview}
+            aria-label={sitePreview ? 'Back to editor canvas' : 'Inline site preview'}
+            title={
+              sitePreview
+                ? 'Back to editor canvas'
+                : 'Inline site preview — render the draft through your public site, in place'
+            }
+            className={`rounded-lg p-2 transition-colors ${
+              sitePreview
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+            }`}
+          >
+            <Globe className="h-4 w-4" aria-hidden />
+          </button>
+        )}
+
         {onViewOnSite &&
           (structural ? (
             <button

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

@@ -37,6 +37,8 @@ import { hasCanvasRenderer, useAdminSectionRenderers } from './sections/index.js
 import { EditorTopBar, type SaveState } from './EditorTopBar.js'
 import { SectionsPanel } from './SectionsPanel.js'
 import { EditorCanvas } from './EditorCanvas.js'
+import { SitePreviewFrame } from './SitePreviewFrame.js'
+import { useSitePreview } from './useSitePreview.js'
 import { SectionInspector } from './SectionInspector.js'
 import { AddSectionModal } from './AddSectionModal.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
@@ -263,6 +265,18 @@ export function PageSectionEditor({
     }
   }, [page, documentId, onNavigate])
 
+  // Inline branded preview — iframe of the public site rendering this draft.
+  const sitePreview = useSitePreview({
+    collection: 'pages',
+    documentId: page?.id,
+    slug: page?.slug,
+    urlPrefix: '',
+    siteUrl: config?.seo?.siteUrl,
+    dirty,
+    saveState,
+    saveDraft: handleSaveDraft,
+  })
+
   const requestPublish = useCallback(() => {
     if (!page) return
     const result = validatePage(page, true)
@@ -450,6 +464,8 @@ export function PageSectionEditor({
           onBack={() => guardedNavigate('/pages')}
           onPreview={handlePreview}
           onViewOnSite={page.id ? handleViewOnSite : undefined}
+          sitePreview={sitePreview.active}
+          onToggleSitePreview={page.id && page.slug ? sitePreview.toggle : undefined}
           onHistory={page.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
           onSaveDraft={handleSaveDraft}
@@ -519,14 +535,23 @@ export function PageSectionEditor({
           />
 
           <div className="flex-1 overflow-hidden">
-            <EditorCanvas
-              sections={page.sections}
-              selectedId={selectedId}
-              viewport={viewport}
-              onSelect={setSelectedId}
-              onAddSection={() => setAddOpen(true)}
-              structuralTypes={structuralTypes}
-            />
+            {sitePreview.active ? (
+              <SitePreviewFrame
+                src={sitePreview.url}
+                viewport={viewport}
+                reloadKey={sitePreview.reloadKey}
+                title={`Site preview: ${page.title || 'Untitled page'}`}
+              />
+            ) : (
+              <EditorCanvas
+                sections={page.sections}
+                selectedId={selectedId}
+                viewport={viewport}
+                onSelect={setSelectedId}
+                onAddSection={() => setAddOpen(true)}
+                structuralTypes={structuralTypes}
+              />
+            )}
           </div>
 
           {selected && (