@prenta/admin 0.92.0 → 0.93.0

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

@@ -6,21 +6,17 @@ import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { useNavigationBlocker } from '../../router/index.js'
 import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js'
-import { EditorSeoAside } from '../../components/EditorSeoAside.js'
+import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
+import { EditorRail, RailHeader } from '../../components/EditorRail.js'
+import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistory } from '../../components/VersionHistory.js'
 import {
-  addSection,
-  createSection,
-  duplicateSection,
   emptyPage,
   fetchPageForEditor,
   missingPageFields,
-  moveSection,
   publishPage,
   PAGES_COLLECTION,
-  removeSection,
-  reorderSections,
   savePageDraft,
   toggleSectionVisibility,
   updateSectionContent,
@@ -38,20 +34,33 @@ import {
   createPreviewToken,
 } from '../../lib/preview-link.js'
 import { usePublicSiteUrl } from '../../hooks/usePublicSiteUrl.js'
-import type { SectionSettings, SectionTypeId } from './section-types.js'
+import type { SectionSettings } from './section-types.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from './viewports.js'
+import type { Zoom } from '../../lib/breakpoints.js'
+import { snapshotBaseline, type ReflowBaseline } from '../../lib/reflow-baseline.js'
+import {
+  DEFAULT_DIRECTIVES,
+  directivesFromData,
+  type RobotsPermissions,
+} from '@prenta/core/seo/robots-directives'
+import { createPublishRedirect, pendingSlugChange } from '../../lib/page-redirect.js'
+import { updateSeoFields } from '../../lib/seo-service.js'
+import { PageTab } from './PageTab.js'
+import { duplicatePage, deletePage } from '../../lib/pages-service.js'
+import { scoreBand, type PageAuditResult } from '@prenta/core/seo/page-audit'
+import { usePageAudit } from '../../hooks/usePageAudit.js'
 import { hasCanvasRenderer, useAdminSectionRenderers } from './sections/index.js'
 import { EditorTopBar, type SaveState } from './EditorTopBar.js'
-import { SectionsPanel } from './SectionsPanel.js'
+import { SectionsList } from './SectionsPanel.js'
 import { EditorCanvas } from './EditorCanvas.js'
+import { ReflowContext } from './reflow-context.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'
 import { ValidationSummary } from './ValidationSummary.js'
 import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
-import { computeLiveSeoScore } from '../../lib/editor-seo-content.js'
+import { buildEditorContentHtml } from '../../lib/editor-seo-content.js'
 import { companionDimensionPaths, inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 
 interface PageSectionEditorProps {
@@ -74,16 +83,47 @@ interface PageSectionEditorProps {
   onOpenPreview?: (path: string, prepare?: () => Promise<boolean | void> | boolean | void) => void
 }
 
-function deriveCan(session: any): { canEdit: boolean; canPublish: boolean } {
+/**
+ * The lower of the two audit scores — the tab dot should reflect the half that
+ * needs work, not an average that hides it.
+ *
+ * Three-valued on purpose, and it must NOT fall back to another scorer:
+ *   undefined — the audit has not reported yet (the SEO tab has never been
+ *               opened). No dot beats a dot from a different model.
+ *   null      — both groups are gated off, so there is genuinely nothing to
+ *               rate. An earlier version fell back to `computeLiveSeoScore`
+ *               here, which put a number from the content analyser — different
+ *               model, different bands — on a tab summarising the audit. That
+ *               is the disagreement this wiring exists to remove.
+ */
+function weakestAuditScore(audit: PageAuditResult | null): number | null | undefined {
+  if (!audit) return undefined
+  const scores = [audit.seo.score, audit.geo.score].filter((s): s is number => s !== null)
+  return scores.length ? Math.min(...scores) : null
+}
+
+function deriveCan(session: any): {
+  canEdit: boolean
+  canPublish: boolean
+  canCreateRedirect: boolean
+} {
   const role: string | undefined = session?.user?.role
   // Default closed: when we can't identify a role, hide the edit/publish
   // affordances rather than exposing them. The server independently enforces
   // access on every write, so this is a UX guard — but it should fail safe.
   // (Matches the Post editor's behavior.)
-  if (!role) return { canEdit: false, canPublish: false }
+  if (!role) return { canEdit: false, canPublish: false, canCreateRedirect: false }
   const editors = ['ADMIN', 'EDITOR', 'AUTHOR']
   const publishers = ['ADMIN', 'EDITOR']
-  return { canEdit: editors.includes(role), canPublish: publishers.includes(role) }
+  // Same roles that may publish a page may create the 301 that follows a
+  // slug move. Offering the checkbox to anyone else promises a redirect
+  // `POST /redirects` will reject.
+  const redirectCreators = ['OWNER', 'ADMIN', 'EDITOR']
+  return {
+    canEdit: editors.includes(role),
+    canPublish: publishers.includes(role),
+    canCreateRedirect: redirectCreators.includes(role),
+  }
 }
 
 export function PageSectionEditor({
@@ -109,21 +149,84 @@ export function PageSectionEditor({
     fieldPath: string
   } | null>(null)
   const [viewport, setViewport] = useState<ViewportId>(DEFAULT_VIEWPORT)
+  const [zoom, setZoom] = useState<Zoom>('fit')
+  /**
+   * Live audit reported by the SEO pane, built from unsaved form state. Null
+   * until that pane has mounted — `audit` below falls back to the saved-record
+   * audit so the header chip and tab dot always have a number.
+   */
+  const [liveAudit, setLiveAudit] = useState<PageAuditResult | null>(null)
+  /** Scale the canvas measured — reported upward so the zoom chip shows a real %. */
+  const [canvasScale, setCanvasScale] = useState(1)
+  /**
+   * The live canvas surface, for the reflow guard to clone. State rather than a
+   * ref because the context value has to update when it mounts — the canvas
+   * unmounts whenever the site-preview frame takes over.
+   */
+  const [canvasEl, setCanvasEl] = useState<HTMLElement | null>(null)
+  /**
+   * Section content as it is on the live site. Captured whenever the editor
+   * takes delivery of a PUBLISHED page — on load, and after each save and
+   * publish, both of which write straight through to the live content.
+   */
+  const [baseline, setBaseline] = useState<ReflowBaseline | null>(null)
+  /**
+   * Path as it is on the live site, captured with the reflow baseline and for
+   * the same reason: a slug change only breaks links if something is already
+   * live at the old address.
+   */
+  const [publishedPath, setPublishedPath] = useState<string | null>(null)
+  const [directives, setDirectives] = useState<RobotsPermissions>(DEFAULT_DIRECTIVES)
+  /**
+   * Defaults ON. The editor changing a live page's slug almost always wants the
+   * redirect, and the cost of an unwanted one is a rule they can delete, while
+   * the cost of a missing one is 404s discovered by visitors.
+   */
+  const [redirectOnPublish, setRedirectOnPublish] = useState(true)
+
+  // The reflow guard's inputs, gathered in one place. Memoised because a new
+  // object identity on every render would restart the debounce in every guarded
+  // field's effect — the measurement would then never settle while typing,
+  // which is precisely when it is wanted.
+  const reflowContext = useMemo(
+    () => ({
+      canvas: canvasEl,
+      sectionId: selectedId,
+      baseline,
+      device: viewport,
+      onProof: setViewport,
+    }),
+    [canvasEl, selectedId, baseline, viewport],
+  )
+
+  /**
+   * Take delivery of server state.
+   *
+   * Every path that receives a fresh page from the API goes through here so the
+   * reflow baseline is re-captured with it. Saving a PUBLISHED page writes
+   * straight through to the live content — there is no draft/published split —
+   * so a save moves the baseline exactly as a publish does. Missing one would
+   * leave the guard comparing against content that is no longer on the site.
+   */
+  const acceptPage = useCallback((p: EditorPage) => {
+    setPage(p)
+    setBaseline(snapshotBaseline(p.sections, p.status))
+    setPublishedPath(p.status === 'PUBLISHED' ? p.path : null)
+  }, [])
   const [dirty, setDirty] = useState(false)
   const [saveState, setSaveState] = useState<SaveState>('idle')
   const [publishing, setPublishing] = useState(false)
 
-  const [addOpen, setAddOpen] = useState(false)
   const [settingsOpen, setSettingsOpen] = useState(false)
-  const [seoOpen, setSeoOpen] = useState(false)
+  /** Active rail tab. Replaces the old boolean `seoOpen` right-hand aside. */
+  const [railTab, setRailTab] = useState<RailTabId>('sections')
   const [historyOpen, setHistoryOpen] = useState(false)
-  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [scheduleOpen, setScheduleOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
-  const { canEdit, canPublish } = useMemo(() => deriveCan(session), [session])
+  const { canEdit, canPublish, canCreateRedirect } = useMemo(() => deriveCan(session), [session])
   const customRenderers = useAdminSectionRenderers()
   const { siteUrl: publicSiteUrl } = usePublicSiteUrl(config?.seo?.siteUrl)
 
@@ -148,18 +251,80 @@ export function PageSectionEditor({
   )
   const publishReady = Boolean(page) && publishCheck.errors.length === 0
 
-  const liveSeoScore = useMemo(() => {
-    if (!page) return 0
-    return computeLiveSeoScore({
-      title: page.title,
-      slug: page.slug,
-      seoTitle: page.seoTitle,
-      seoDescription: page.seoDescription,
-      sections: page.sections,
-    })
-  }, [page])
   const publishDisabledReason = publishCheck.errors[0]
 
+  // Saved-record audit, available from first paint. Both this and the pane's
+  // live audit go through `buildPageAuditInput`, so they can differ only in
+  // saved-versus-unsaved metadata — never in how a check is decided.
+  const {
+    audit: savedAudit,
+    record: seoRecord,
+    reload: reloadAudit,
+  } = usePageAudit({
+    entityType: 'page',
+    entityId: page?.id ?? null,
+    sections: page?.sections ?? [],
+    slug: page?.slug ?? '',
+    fallback: { title: page?.seoTitle, description: page?.seoDescription },
+  })
+
+  // Seed directives from the saved record. Keyed on the record's identity, not
+  // on its fields — re-running on every field change would discard whatever the
+  // editor had just toggled and not yet saved.
+  useEffect(() => {
+    if (!seoRecord) return
+    setDirectives(
+      directivesFromData({
+        noindex: seoRecord.noindex,
+        nofollow: seoRecord.nofollow,
+        nosnippet: seoRecord.nosnippet,
+        noarchive: seoRecord.noarchive,
+        maxImagePreview: seoRecord.maxImagePreview,
+      }),
+    )
+  }, [seoRecord?.id])
+
+  // Unsaved edits win: while the SEO pane is open its number is the truthful
+  // one, and every surface reads this single value.
+  const audit = liveAudit ?? savedAudit
+
+  // Content the SEO pane analyses. Hoisted out of the old aside wrapper so the
+  // rail can render the pane directly — the aside only ever existed to supply
+  // a resizable container, which the rail now is.
+  const seoContentHtml = useMemo(
+    () => buildEditorContentHtml(page?.sections ?? []),
+    [page?.sections],
+  )
+
+  const railTabs = useMemo<RailTab[]>(
+    () => [
+      {
+        id: 'sections',
+        label: 'Sections',
+        title: 'Page content',
+        count: page?.sections.length ?? 0,
+      },
+      {
+        id: 'seo',
+        label: 'SEO & GEO',
+        title: 'Search & AI readiness',
+        // The weaker of the two: a page can be perfectly crawlable and still
+        // invisible to answer engines, and a dot that averaged them would hide
+        // whichever half is failing. `null` means a gate is off, which the tab
+        // reports as unrated rather than as a low score.
+        score: weakestAuditScore(audit),
+      },
+      {
+        id: 'page',
+        label: 'Page',
+        title: 'Page settings',
+      },
+    ],
+    [page?.sections.length, audit],
+  )
+
+  const activeRailTab = railTabs.find((tab) => tab.id === railTab) ?? railTabs[0]!
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
@@ -175,7 +340,7 @@ export function PageSectionEditor({
     }
 
     if (!documentId) {
-      setPage(emptyPage(initialParentId ?? null))
+      acceptPage(emptyPage(initialParentId ?? null))
       setLoading(false)
       // Start a brand-new page the way WordPress does: name it first. The
       // settings modal opens with the title focused and the slug/path
@@ -187,7 +352,7 @@ export function PageSectionEditor({
     fetchPageForEditor(documentId)
       .then((p) => {
         if (cancelled) return
-        setPage(p)
+        acceptPage(p)
         // Default to a clean canvas (no selection / no inspector) to match
         // the editor's default composition; the inspector opens only once
         // the user picks a section to edit.
@@ -218,38 +383,11 @@ export function PageSectionEditor({
     [],
   )
 
-  const handleAdd = useCallback(
-    (type: SectionTypeId) => {
-      const section = createSection(type)
-      mutateSections((s) => addSection(s, section))
-      setSelectedId(section.id)
-      setAddOpen(false)
-    },
-    [mutateSections],
-  )
-
-  const handleReorder = useCallback(
-    (orderedIds: string[]) => mutateSections((s) => reorderSections(s, orderedIds)),
-    [mutateSections],
-  )
-
   const handleToggleVisibility = useCallback(
     (id: string) => mutateSections((s) => toggleSectionVisibility(s, id)),
     [mutateSections],
   )
 
-  const handleDuplicate = useCallback(
-    (id: string) => mutateSections((s) => duplicateSection(s, id)),
-    [mutateSections],
-  )
-
-  const confirmDelete = useCallback(() => {
-    if (!deleteTargetId) return
-    mutateSections((s) => removeSection(s, deleteTargetId))
-    setSelectedId((cur) => (cur === deleteTargetId ? null : cur))
-    setDeleteTargetId(null)
-  }, [deleteTargetId, mutateSections])
-
   const handleContentChange = useCallback(
     (patch: Record<string, unknown>) => {
       if (!selectedId) return
@@ -282,6 +420,35 @@ export function PageSectionEditor({
   }, [])
 
   // ─── Save / publish ──────────────────────────────────────────────────
+  /**
+   * Persist robots directives. They live on the SEO record, not the document
+   * body, so they need their own write — and it has to happen on both save and
+   * publish, or a toggle would appear to stick until the next reload.
+   *
+   * Reported on failure rather than swallowed: a directive that silently failed
+   * to save is the same defect as one that never reached the head.
+   */
+  const saveDirectives = useCallback(
+    async (pageId: string) => {
+      const { error } = await updateSeoFields('page', pageId, {
+        noindex: !directives.index,
+        nofollow: !directives.follow,
+        nosnippet: !directives.snippet,
+        noarchive: !directives.archive,
+        maxImagePreview: directives.maxImagePreview,
+      })
+      if (error) {
+        toast.error(`Search directives were not saved: ${error}`)
+        return false
+      }
+      // The header chip and rail dot read the saved SEO record. Without a
+      // reload they keep the pre-save score after noindex/nosnippet flips.
+      await reloadAudit()
+      return true
+    },
+    [directives, reloadAudit],
+  )
+
   const handleSaveDraft = useCallback(async (): Promise<boolean> => {
     if (!page) return false
     const result = validatePage(page, false)
@@ -294,7 +461,8 @@ export function PageSectionEditor({
     setSaveState('saving')
     try {
       const saved = await savePageDraft(page)
-      setPage(saved)
+      if (saved.id) await saveDirectives(saved.id)
+      acceptPage(saved)
       setDirty(false)
       setSaveState('saved')
       setValidation(null)
@@ -306,7 +474,7 @@ export function PageSectionEditor({
       toast.error(err instanceof Error ? err.message : 'Failed to save draft')
       return false
     }
-  }, [page, documentId, onNavigate])
+  }, [page, documentId, onNavigate, saveDirectives, acceptPage])
 
   // Inline branded preview — Next builder canvas (same origin as admin), not
   // the Astro public apex. "View on site" still uses publicSiteUrl below.
@@ -375,8 +543,27 @@ export function PageSectionEditor({
     if (!page) return
     setPublishing(true)
     try {
+      // The move has to be read BEFORE publishing — `acceptPage` moves the
+      // published path to the new one, after which there is nothing to detect.
+      const move =
+        redirectOnPublish && canCreateRedirect ? pendingSlugChange(publishedPath, page.path) : null
+
       const published = await publishPage(page)
-      setPage(published)
+      if (published.id) await saveDirectives(published.id)
+
+      if (move) {
+        const { error } = await createPublishRedirect(move)
+        if (error) {
+          // Loud, and naming both paths: the page has already moved, so a
+          // silently-failed redirect leaves exactly the broken links the switch
+          // promised to prevent.
+          toast.error(`Published, but the redirect ${move.from} → ${move.to} failed: ${error}`)
+        } else {
+          toast.success(`Redirect created: ${move.from} → ${move.to}`)
+        }
+      }
+
+      acceptPage(published)
       setDirty(false)
       setSaveState('saved')
       setValidation(null)
@@ -387,7 +574,41 @@ export function PageSectionEditor({
     } finally {
       setPublishing(false)
     }
-  }, [page, documentId, onNavigate])
+  }, [
+    page,
+    documentId,
+    onNavigate,
+    saveDirectives,
+    redirectOnPublish,
+    canCreateRedirect,
+    publishedPath,
+    acceptPage,
+  ])
+
+  const handleDuplicate = useCallback(async () => {
+    if (!page?.id) return
+    const { id, error } = await duplicatePage(page.id)
+    if (error || !id) {
+      toast.error(error ?? 'Could not duplicate the page')
+      return
+    }
+    toast.success('Page duplicated')
+    // Navigate to the copy rather than staying put. The duplicate is a draft
+    // named "(Copy)", and leaving the editor on the original makes it look as
+    // though nothing happened.
+    onNavigate(`/pages/${id}/edit`)
+  }, [page?.id, onNavigate])
+
+  const handleTrash = useCallback(async () => {
+    if (!page?.id) return
+    const { error } = await deletePage(page.id)
+    if (error) {
+      toast.error(error)
+      return
+    }
+    toast.success('Page moved to trash')
+    onNavigate('/pages')
+  }, [page?.id, onNavigate])
 
   // After a version restore the server has already written the restored
   // data — refetch so the editor reflects it instead of the stale state.
@@ -395,9 +616,9 @@ export function PageSectionEditor({
     if (!page?.id) return
     fetchPageForEditor(page.id)
       .then((p) => {
-        setPage(p)
+        acceptPage(p)
         setSelectedId(null)
-        setSeoOpen(false)
+        setRailTab('sections')
         setDirty(false)
         setSaveState('idle')
         setValidation(null)
@@ -408,23 +629,29 @@ export function PageSectionEditor({
   }, [page?.id])
 
   const handleSeoSaved = useCallback(() => {
+    reloadAudit()
     if (!page?.id) return
     fetchPageForEditor(page.id)
-      .then((p) => setPage(p))
+      .then((p) => acceptPage(p))
       .catch(() => {
         /* SEO API saved; editor meta will sync on next full load */
       })
-  }, [page?.id])
+  }, [page?.id, reloadAudit])
 
+  // The header's SEO chip is a shortcut to the rail's SEO tab. Toggling back
+  // returns to Sections rather than leaving the rail on a tab the chip no
+  // longer appears to be showing.
   const handleToggleSeo = useCallback(() => {
-    setSeoOpen((open) => {
-      if (!open) setSelectedId(null)
-      return !open
+    setRailTab((tab) => {
+      if (tab !== 'seo') setSelectedId(null)
+      return tab === 'seo' ? 'sections' : 'seo'
     })
   }, [])
 
   const handleSelectSection = useCallback((id: string | null, fieldPath?: string) => {
-    setSeoOpen(false)
+    // Selecting on the canvas is a request to edit that section — show the
+    // outline it belongs to, whichever tab was open.
+    setRailTab('sections')
     setSelectedId(id)
     setPendingFocusPath(fieldPath ?? null)
   }, [])
@@ -620,6 +847,11 @@ export function PageSectionEditor({
           publishDisabledReason={publishDisabledReason}
           viewport={viewport}
           onViewport={setViewport}
+          {...(sitePreview.active
+            ? // The site preview is an iframe of the real front end, not a
+              // scaled canvas — a zoom percentage there would be a lie.
+              {}
+            : { zoom, canvasScale, onZoom: setZoom })}
           onBack={() => guardedNavigate('/pages')}
           onPreview={handlePreview}
           onViewOnSite={page.id ? handleViewOnSite : undefined}
@@ -628,8 +860,14 @@ export function PageSectionEditor({
           onHistory={page.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
           onOpenSeo={handleToggleSeo}
-          seoOpen={seoOpen}
-          seoScore={liveSeoScore}
+          seoOpen={railTab === 'seo'}
+          // The audit's SEO score, banded by the audit's own scale. Previously
+          // this chip showed `computeLiveSeoScore` — a different model — so the
+          // header read 53 while the rings beside it read 0 and 57.
+          seoScore={audit?.seo.score ?? undefined}
+          seoScoreBand={
+            typeof audit?.seo.score === 'number' ? scoreBand(audit.seo.score) : undefined
+          }
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
           onSchedule={page.id ? requestSchedule : undefined}
@@ -687,78 +925,121 @@ export function PageSectionEditor({
           />
         )}
 
-        <div className="relative flex flex-1 overflow-hidden">
-          <SectionsPanel
-            sections={page.sections}
-            selectedId={selectedId}
-            canEdit={effectiveCanEdit}
-            onSelect={handleSelectSection}
-            onReorder={handleReorder}
-            onToggleVisibility={handleToggleVisibility}
-            onDuplicate={handleDuplicate}
-            onRequestDelete={(id) => setDeleteTargetId(id)}
-            onAdd={() => setAddOpen(true)}
-          />
-
-          <div className="flex-1 overflow-hidden">
-            {sitePreview.active ? (
-              <SitePreviewFrame
-                src={sitePreview.url}
-                viewport={viewport}
-                reloadKey={sitePreview.reloadKey}
-                title={`Site preview: ${page.title || 'Untitled page'}`}
-                selectedId={selectedId}
-                sections={page.sections}
-                suppressSectionsEcho={suppressSectionsEcho}
-                onSelectSection={handleSelectSection}
-                onCanvasEdit={handleCanvasEdit}
-                onCanvasRequestMedia={handleCanvasRequestMedia}
-              />
-            ) : (
-              <EditorCanvas
-                sections={page.sections}
-                selectedId={selectedId}
-                viewport={viewport}
-                onSelect={handleSelectSection}
-                onAddSection={() => setAddOpen(true)}
-                structuralTypes={structuralTypes}
-                sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
+        <ReflowContext.Provider value={reflowContext}>
+          <div className="relative flex flex-1 overflow-hidden">
+            <EditorRail collapsedLabel={activeRailTab.label}>
+              {({ width, dragging, collapse }) => (
+                <>
+                  <EditorRailTabs tabs={railTabs} active={railTab} onChange={setRailTab} />
+                  <RailHeader
+                    title={activeRailTab.title}
+                    width={width}
+                    dragging={dragging}
+                    onCollapse={collapse}
+                  />
+
+                  <div
+                    role="tabpanel"
+                    id={`rail-panel-${railTab}`}
+                    aria-labelledby={`rail-tab-${railTab}`}
+                    className="flex min-h-0 flex-1 flex-col"
+                  >
+                    {railTab === 'sections' ? (
+                      <SectionsList
+                        sections={page.sections}
+                        selectedId={selectedId}
+                        canEdit={effectiveCanEdit}
+                        onSelect={handleSelectSection}
+                        onToggleVisibility={handleToggleVisibility}
+                      />
+                    ) : railTab === 'page' ? (
+                      <div className="min-h-0 flex-1 overflow-y-auto">
+                        <PageTab
+                          page={page}
+                          canEdit={effectiveCanEdit}
+                          publishedPath={publishedPath}
+                          siteUrl={publicSiteUrl}
+                          directives={directives}
+                          onDirectivesChange={(next) => {
+                            setDirectives(next)
+                            setDirty(true)
+                          }}
+                          redirectOnPublish={redirectOnPublish}
+                          onRedirectOnPublishChange={setRedirectOnPublish}
+                          canCreateRedirect={canCreateRedirect}
+                          onPageChange={handlePageSettings}
+                          onDuplicate={handleDuplicate}
+                          onTrash={handleTrash}
+                          schemaType={seoRecord?.structuredDataType ?? undefined}
+                          brandName={config?.seo?.siteName ?? undefined}
+                        />
+                      </div>
+                    ) : (
+                      <SeoEditorPane
+                        entityType="page"
+                        entityId={page.id}
+                        slug={page.slug}
+                        auditSections={page.sections}
+                        onAuditChange={setLiveAudit}
+                        contentHtml={seoContentHtml}
+                        draftMeta={{
+                          seoTitle: page.seoTitle,
+                          seoDescription: page.seoDescription,
+                        }}
+                        onDraftChange={handlePageSettings}
+                        onClose={() => setRailTab('sections')}
+                        onSaved={handleSeoSaved}
+                      />
+                    )}
+                  </div>
+                </>
+              )}
+            </EditorRail>
+
+            <div className="flex-1 overflow-hidden">
+              {sitePreview.active ? (
+                <SitePreviewFrame
+                  src={sitePreview.url}
+                  viewport={viewport}
+                  reloadKey={sitePreview.reloadKey}
+                  title={`Site preview: ${page.title || 'Untitled page'}`}
+                  selectedId={selectedId}
+                  sections={page.sections}
+                  suppressSectionsEcho={suppressSectionsEcho}
+                  onSelectSection={handleSelectSection}
+                  onCanvasEdit={handleCanvasEdit}
+                  onCanvasRequestMedia={handleCanvasRequestMedia}
+                />
+              ) : (
+                <EditorCanvas
+                  sections={page.sections}
+                  selectedId={selectedId}
+                  breakpoint={viewport}
+                  zoom={zoom}
+                  onScaleChange={setCanvasScale}
+                  onCanvasElement={setCanvasEl}
+                  onSelect={handleSelectSection}
+                  structuralTypes={structuralTypes}
+                  sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
+                />
+              )}
+            </div>
+
+            {selected && railTab === 'sections' && (
+              <SectionInspector
+                section={selected}
+                canEdit={effectiveCanEdit}
+                onClose={() => setSelectedId(null)}
+                onContentChange={handleContentChange}
+                onSettingsChange={handleSettingsChange}
+                onMetaChange={handleMetaChange}
+                onToggleVisibility={() => handleToggleVisibility(selected.id)}
               />
             )}
           </div>
-
-          {selected && !seoOpen && (
-            <SectionInspector
-              section={selected}
-              canEdit={effectiveCanEdit}
-              onClose={() => setSelectedId(null)}
-              onContentChange={handleContentChange}
-              onSettingsChange={handleSettingsChange}
-              onMetaChange={handleMetaChange}
-              onToggleVisibility={() => handleToggleVisibility(selected.id)}
-            />
-          )}
-
-          {seoOpen && (
-            <EditorSeoAside
-              entityType="page"
-              entityId={page.id}
-              title={page.title}
-              slug={page.slug}
-              seoTitle={page.seoTitle}
-              seoDescription={page.seoDescription}
-              sections={page.sections}
-              canEdit={effectiveCanEdit}
-              onClose={() => setSeoOpen(false)}
-              onDraftChange={handlePageSettings}
-              onSaved={handleSeoSaved}
-            />
-          )}
-        </div>
+        </ReflowContext.Provider>
       </div>
 
-      <AddSectionModal open={addOpen} onClose={() => setAddOpen(false)} onAdd={handleAdd} />
-
       {page.id && (
         <VersionHistory
           collectionSlug="pages"
@@ -777,16 +1058,6 @@ export function PageSectionEditor({
         onSave={handlePageSettings}
       />
 
-      <ConfirmDialog
-        open={deleteTargetId !== null}
-        onClose={() => setDeleteTargetId(null)}
-        onConfirm={confirmDelete}
-        title="Delete section?"
-        description="This removes the section from the page. You can undo by leaving without saving."
-        confirmLabel="Delete"
-        destructive
-      />
-
       <ConfirmDialog
         open={confirmPublish}
         onClose={() => setConfirmPublish(false)}