@prenta/admin 0.92.0 → 0.94.0

package/dist/views/page-editor/PageSectionEditor.js

@@ -1,32 +1,64 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { AlertTriangle, Blocks, Loader2, Lock } from 'lucide-react';
 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 } from '../../components/EditorRailTabs.js';
 import { ErrorBoundary } from '../../components/ErrorBoundary.js';
-import { VersionHistory } from '../../components/VersionHistory.js';
-import { addSection, createSection, duplicateSection, emptyPage, fetchPageForEditor, missingPageFields, publishPage, PAGES_COLLECTION, removeSection, reorderSections, savePageDraft, toggleSectionVisibility, updateSectionContent, updateSectionContentAtPath, updateSectionMeta, updateSectionSettings, validatePage, } from '../../lib/page-editor-service.js';
+import { VersionHistoryPanel } from './VersionHistoryPanel.js';
+import { ReviewBar } from './ReviewBar.js';
+import { fetchPageVersions, restorePageVersion, } from '../../lib/version-history.js';
+import { changedSectionIds, diffVersions } from '../../lib/version-diff.js';
+import { emptyPage, fetchPageForEditor, missingPageFields, publishPage, PAGES_COLLECTION, savePageDraft, toggleSectionVisibility, updateSectionContent, updateSectionContentAtPath, updateSectionMeta, updateSectionSettings, validatePage, } from '../../lib/page-editor-service.js';
 import { MediaPickerModal } from '../../components/MediaPickerModal.js';
 import { buildPublicPreviewUrl, buildPublicUrl, createPreviewToken, } from '../../lib/preview-link.js';
 import { usePublicSiteUrl } from '../../hooks/usePublicSiteUrl.js';
 import { DEFAULT_VIEWPORT } from './viewports.js';
+import { snapshotBaseline } from '../../lib/reflow-baseline.js';
+import { DEFAULT_DIRECTIVES, directivesFromData, } 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 } from '@prenta/core/seo/page-audit';
+import { usePageAudit } from '../../hooks/usePageAudit.js';
 import { hasCanvasRenderer, useAdminSectionRenderers } from './sections/index.js';
 import { EditorTopBar } 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';
+/**
+ * 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) {
+    if (!audit)
+        return undefined;
+    const scores = [audit.seo.score, audit.geo.score].filter((s) => s !== null);
+    return scores.length ? Math.min(...scores) : null;
+}
 function deriveCan(session) {
     const role = session?.user?.role;
     // Default closed: when we can't identify a role, hide the edit/publish
@@ -34,10 +66,18 @@ function deriveCan(session) {
     // 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 };
+        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({ documentId, initialParentId, config, session, onNavigate, onOpenPreview, }) {
     const [page, setPage] = useState(null);
@@ -51,19 +91,83 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
     /** Canvas image Replace — opens MediaPickerModal for this field path. */
     const [canvasMediaTarget, setCanvasMediaTarget] = useState(null);
     const [viewport, setViewport] = useState(DEFAULT_VIEWPORT);
+    const [zoom, setZoom] = useState('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(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(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(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(null);
+    const [directives, setDirectives] = useState(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) => {
+        setPage(p);
+        setBaseline(snapshotBaseline(p.sections, p.status));
+        setPublishedPath(p.status === 'PUBLISHED' ? p.path : null);
+    }, []);
     const [dirty, setDirty] = useState(false);
     const [saveState, setSaveState] = useState('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('sections');
     const [historyOpen, setHistoryOpen] = useState(false);
-    const [deleteTargetId, setDeleteTargetId] = useState(null);
+    const [versions, setVersions] = useState([]);
+    const [versionsLoading, setVersionsLoading] = useState(false);
+    const [versionsError, setVersionsError] = useState(null);
+    /** Index into `versions`; 0 is the newest, which is the current content. */
+    const [versionIndex, setVersionIndex] = useState(0);
+    const [restoring, setRestoring] = useState(false);
     const [confirmPublish, setConfirmPublish] = useState(false);
     const [scheduleOpen, setScheduleOpen] = useState(false);
     const [leaveTarget, setLeaveTarget] = useState(null);
     const [validation, setValidation] = useState(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);
     // A misconfigured `pages` collection (missing the fields the editor
@@ -81,18 +185,152 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
     }, [config]);
     const publishCheck = useMemo(() => (page ? validatePage(page, true) : { errors: [''], warnings: [] }), [page]);
     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(() => [
+        {
+            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];
+    // ─── Version history ─────────────────────────────────────────────────
+    // History is a MODE, not a dialog: it overlays the rail and drives the
+    // canvas, so the version being reviewed is editor state rather than
+    // something owned by a panel that can be unmounted.
+    const loadVersions = useCallback(async (pageId) => {
+        setVersionsLoading(true);
+        setVersionsError(null);
+        try {
+            setVersions(await fetchPageVersions(PAGES_COLLECTION, pageId));
+        }
+        catch (err) {
+            setVersions([]);
+            setVersionsError(err instanceof Error ? err.message : 'Failed to load version history');
+        }
+        finally {
+            setVersionsLoading(false);
+        }
+    }, []);
+    const openHistory = useCallback(() => {
+        if (!page?.id)
+            return;
+        setHistoryOpen(true);
+        // Always land on "current" so opening history never silently swaps the
+        // canvas out from under the editor.
+        setVersionIndex(0);
+        void loadVersions(page.id);
+    }, [page?.id, loadVersions]);
+    const closeHistory = useCallback(() => {
+        setHistoryOpen(false);
+        setVersionIndex(0);
+    }, []);
+    /**
+     * Index 0 is the current content, which the canvas is already showing — so
+     * selecting it is "back to current", not a review. Only an older index puts
+     * the editor into review mode.
+     */
+    const reviewing = historyOpen && versionIndex > 0;
+    const reviewVersion = reviewing ? (versions[versionIndex] ?? null) : null;
+    // What that version's save CHANGED — diffed against the one before it, which
+    // is the question the outlines on the canvas answer.
+    const reviewChanges = useMemo(() => reviewVersion
+        ? diffVersions(reviewVersion.sections, versions[versionIndex + 1]?.sections)
+        : [], [reviewVersion, versions, versionIndex]);
+    const reviewChangedIds = useMemo(() => changedSectionIds(reviewChanges), [reviewChanges]);
+    const handleRestoreVersion = useCallback(async (version) => {
+        if (!page?.id)
+            return;
+        setRestoring(true);
+        try {
+            await restorePageVersion(PAGES_COLLECTION, page.id, version.id);
+            // Re-read rather than trusting the snapshot we already hold: the
+            // restore goes through the normal update path, so hooks and derived
+            // fields may have altered what actually landed.
+            const restored = await fetchPageForEditor(page.id);
+            acceptPage(restored);
+            setSelectedId(null);
+            setDirty(false);
+            setSaveState('idle');
+            setValidation(null);
+            closeHistory();
+            void loadVersions(page.id);
+            toast.success('Version restored');
+        }
+        catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to restore version');
+        }
+        finally {
+            setRestoring(false);
+        }
+    }, [page?.id, acceptPage, closeHistory, loadVersions]);
+    // ─── Edit permission ─────────────────────────────────────────────────
+    /**
+     * ADR 0002: a Page-Builder-owned page (it has a `_layout`) compiles its
+     * sections from the builder layout on every save, so editing them here would
+     * be overwritten. The server independently refuses such edits with 409.
+     */
+    const readOnly = page?.builderOwned ?? false;
+    /**
+     * The single gate every writing surface reads.
+     *
+     * Hoisted above the callbacks rather than derived at render time, because
+     * the two that were left behind were the ones that mattered: the site
+     * preview's in-place edit handlers close over `canEdit` (the raw role) and
+     * so kept accepting edits while a past version was under review — and while
+     * a builder-owned page was supposedly read-only. The iframe is a second
+     * editing surface, and a lock that only covers the rail is not a lock.
+     */
+    const effectiveCanEdit = canEdit && !readOnly && !reviewing;
+    /** Restoring is not editing: it is allowed precisely while reviewing. */
+    const canRestoreVersion = canEdit && !readOnly;
     // ─── Load ──────────────────────────────────────────────────────────
     useEffect(() => {
         let cancelled = false;
@@ -106,7 +344,7 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
             return;
         }
         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
@@ -118,7 +356,7 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
             .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.
@@ -144,22 +382,7 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
         setDirty(true);
         setSaveState('idle');
     }, []);
-    const handleAdd = useCallback((type) => {
-        const section = createSection(type);
-        mutateSections((s) => addSection(s, section));
-        setSelectedId(section.id);
-        setAddOpen(false);
-    }, [mutateSections]);
-    const handleReorder = useCallback((orderedIds) => mutateSections((s) => reorderSections(s, orderedIds)), [mutateSections]);
     const handleToggleVisibility = useCallback((id) => mutateSections((s) => toggleSectionVisibility(s, id)), [mutateSections]);
-    const handleDuplicate = useCallback((id) => 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) => {
         if (!selectedId)
             return;
@@ -182,6 +405,31 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
         setSaveState('idle');
     }, []);
     // ─── 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) => {
+        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 () => {
         if (!page)
             return false;
@@ -195,7 +443,9 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
         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);
@@ -209,7 +459,7 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
             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.
     const sitePreview = useSitePreview({
@@ -271,8 +521,25 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
             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);
@@ -286,59 +553,84 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
         finally {
             setPublishing(false);
         }
-    }, [page, documentId, onNavigate]);
-    // After a version restore the server has already written the restored
-    // data — refetch so the editor reflects it instead of the stale state.
-    const handleRestored = useCallback(() => {
+    }, [
+        page,
+        documentId,
+        onNavigate,
+        saveDirectives,
+        redirectOnPublish,
+        canCreateRedirect,
+        publishedPath,
+        acceptPage,
+    ]);
+    const handleDuplicate = useCallback(async () => {
         if (!page?.id)
             return;
-        fetchPageForEditor(page.id)
-            .then((p) => {
-            setPage(p);
-            setSelectedId(null);
-            setSeoOpen(false);
-            setDirty(false);
-            setSaveState('idle');
-            setValidation(null);
-        })
-            .catch(() => {
-            toast.error('Version restored — refresh the page to see it.');
-        });
-    }, [page?.id]);
+        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]);
     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)
+        setRailTab((tab) => {
+            if (tab !== 'seo')
                 setSelectedId(null);
-            return !open;
+            return tab === 'seo' ? 'sections' : 'seo';
         });
     }, []);
     const handleSelectSection = useCallback((id, fieldPath) => {
-        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);
     }, []);
+    // `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) => {
-        if (!canEdit)
+        if (!effectiveCanEdit)
             return;
         setSuppressSectionsEcho((n) => n + 1);
         mutateSections((s) => updateSectionContentAtPath(s, edit.sectionId, edit.fieldPath, edit.value));
         setSelectedId(edit.sectionId);
-    }, [canEdit, mutateSections]);
+    }, [effectiveCanEdit, mutateSections]);
     const handleCanvasRequestMedia = useCallback((request) => {
-        if (!canEdit)
+        if (!effectiveCanEdit)
             return;
         setSelectedId(request.sectionId);
         setCanvasMediaTarget(request);
-    }, [canEdit]);
+    }, [effectiveCanEdit]);
     // After a canvas field click, focus the matching inspector input once painted.
     useEffect(() => {
         if (!pendingFocusPath || !selectedId)
@@ -439,12 +731,11 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
         return (_jsx("div", { className: "bg-background flex h-full items-center justify-center p-6", children: _jsxs("div", { className: "border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4", children: [_jsx(AlertTriangle, { className: "text-destructive shrink-0", size: 20, "aria-hidden": true }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: "Failed to load page" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: loadError ?? 'Page not found.' }), _jsx("button", { type: "button", onClick: () => onNavigate('/pages'), className: "text-primary mt-2 text-sm font-medium hover:underline", children: "Back to Pages" })] })] }) }));
     }
     const selected = page.sections.find((s) => s.id === selectedId) ?? null;
-    // ADR 0002: a Page-Builder-owned page (it has a `_layout`) compiles its
-    // sections from the builder layout on every save, so editing them here would
-    // be overwritten. Open this editor read-only and route the user to the
-    // builder. The server independently refuses such edits with 409.
-    const readOnly = page.builderOwned;
-    const effectiveCanEdit = canEdit && !readOnly;
+    // `readOnly` / `effectiveCanEdit` / `canRestoreVersion` are computed above,
+    // with the hooks, so the callbacks defined there share this one gate.
+    // The canvas shows the reviewed snapshot, but `page.sections` stays the
+    // editor's own content throughout — nothing about review mode writes to it.
+    const canvasSections = reviewVersion ? reviewVersion.sections : page.sections;
     // Sections whose type has no registered definition (seed/code-owned, e.g.
     // `opal-*`). They are preserved verbatim on save but can't be edited here.
     const unmanagedTypes = Array.from(new Set(page.sections.filter((s) => s.unmanaged).map((s) => s.sectionType)));
@@ -455,7 +746,21 @@ export function PageSectionEditor({ documentId, initialParentId, config, session
     const structuralTypes = Array.from(new Set(page.sections
         .filter((s) => !hasCanvasRenderer(s.sectionType) && !customRenderers[s.sectionType])
         .map((s) => s.sectionType)));
-    return (_jsxs(ErrorBoundary, { children: [_jsxs("div", { className: "bg-background flex h-full flex-col overflow-hidden", children: [_jsx(EditorTopBar, { title: page.title, status: page.status, dirty: dirty, saveState: saveState, publishing: publishing, canEdit: effectiveCanEdit, canPublish: canPublish && effectiveCanEdit, publishReady: publishReady, publishDisabledReason: publishDisabledReason, viewport: viewport, onViewport: setViewport, 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), onOpenSeo: handleToggleSeo, seoOpen: seoOpen, seoScore: liveSeoScore, onSaveDraft: handleSaveDraft, onPublish: requestPublish, onSchedule: page.id ? requestSchedule : undefined, scheduleReady: Boolean(page.id), scheduledAt: page.scheduledAt, scheduledUnpublishAt: page.scheduledUnpublishAt, structuralTypes: structuralTypes }), readOnly && (_jsxs("div", { role: "status", className: "border-border bg-accent/40 flex items-center gap-3 border-b px-4 py-2.5", children: [_jsx(Blocks, { className: "text-muted-foreground shrink-0", size: 16, "aria-hidden": true }), _jsxs("p", { className: "text-muted-foreground flex-1 text-sm", children: ["This page is built in the", ' ', _jsx("span", { className: "text-foreground font-medium", children: "Page Builder" }), ". Its sections are generated from the builder layout and are read-only here."] }), page.id && (_jsx("button", { type: "button", onClick: () => guardedNavigate(`/page-builder/${page.id}`), className: "bg-primary text-primary-foreground hover:bg-primary/90 shrink-0 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors", children: "Open in Page Builder" }))] })), unmanagedTypes.length > 0 && (_jsxs("div", { role: "status", className: "border-border bg-muted/50 flex items-start gap-3 border-b px-4 py-2.5", children: [_jsx(Lock, { className: "text-muted-foreground mt-0.5 shrink-0", size: 16, "aria-hidden": true }), _jsxs("p", { className: "text-muted-foreground flex-1 text-sm", children: ["This page has", ' ', _jsxs("span", { className: "text-foreground font-medium", children: [unmanagedTypes.length, " section type", unmanagedTypes.length > 1 ? 's' : ''] }), ' ', "managed outside the editor (", unmanagedTypes.join(', '), "). They are preserved on save but edited in your seed script or code, not here."] })] })), validation && (_jsx(ValidationSummary, { errors: validation.errors, warnings: validation.warnings, onDismiss: () => setValidation(null) })), _jsxs("div", { className: "relative flex flex-1 overflow-hidden", children: [_jsx(SectionsPanel, { sections: page.sections, selectedId: selectedId, canEdit: effectiveCanEdit, onSelect: handleSelectSection, onReorder: handleReorder, onToggleVisibility: handleToggleVisibility, onDuplicate: handleDuplicate, onRequestDelete: (id) => setDeleteTargetId(id), onAdd: () => setAddOpen(true) }), _jsx("div", { className: "flex-1 overflow-hidden", children: sitePreview.active ? (_jsx(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 })) : (_jsx(EditorCanvas, { sections: page.sections, selectedId: selectedId, viewport: viewport, onSelect: handleSelectSection, onAddSection: () => setAddOpen(true), structuralTypes: structuralTypes, sitePreviewAvailable: sitePreviewAvailable && !sitePreview.active })) }), selected && !seoOpen && (_jsx(SectionInspector, { section: selected, canEdit: effectiveCanEdit, onClose: () => setSelectedId(null), onContentChange: handleContentChange, onSettingsChange: handleSettingsChange, onMetaChange: handleMetaChange, onToggleVisibility: () => handleToggleVisibility(selected.id) })), seoOpen && (_jsx(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 }))] })] }), _jsx(AddSectionModal, { open: addOpen, onClose: () => setAddOpen(false), onAdd: handleAdd }), page.id && (_jsx(VersionHistory, { collectionSlug: "pages", documentId: page.id, open: historyOpen, onClose: () => setHistoryOpen(false), onRestore: handleRestored })), _jsx(PageSettingsModal, { open: settingsOpen, page: page, canEdit: effectiveCanEdit, onClose: () => setSettingsOpen(false), onSave: handlePageSettings }), _jsx(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: true }), _jsx(ConfirmDialog, { open: confirmPublish, onClose: () => setConfirmPublish(false), onConfirm: doPublish, title: "Publish this page?", description: "The current content will go live and replace the published version.", confirmLabel: "Publish" }), page.id && (_jsx(SchedulePublishDialog, { collectionSlug: PAGES_COLLECTION, documentId: page.id, scheduledAt: page.scheduledAt, scheduledUnpublishAt: page.scheduledUnpublishAt, open: scheduleOpen, onClose: () => setScheduleOpen(false), onScheduled: handleScheduled })), _jsx(ConfirmDialog, { open: leaveTarget !== null, onClose: () => setLeaveTarget(null), onConfirm: () => {
+    return (_jsxs(ErrorBoundary, { children: [_jsxs("div", { className: "bg-background flex h-full flex-col overflow-hidden", children: [_jsx(EditorTopBar, { title: page.title, status: page.status, dirty: dirty, saveState: saveState, publishing: publishing, canEdit: effectiveCanEdit, canPublish: canPublish && effectiveCanEdit, publishReady: publishReady, 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, sitePreview: sitePreview.active, onToggleSitePreview: page.id && page.slug ? sitePreview.toggle : undefined, historyOpen: historyOpen, onHistory: page.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined, onOpenSettings: () => setSettingsOpen(true), onOpenSeo: handleToggleSeo, 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, scheduleReady: Boolean(page.id), scheduledAt: page.scheduledAt, scheduledUnpublishAt: page.scheduledUnpublishAt, structuralTypes: structuralTypes }), readOnly && (_jsxs("div", { role: "status", className: "border-border bg-accent/40 flex items-center gap-3 border-b px-4 py-2.5", children: [_jsx(Blocks, { className: "text-muted-foreground shrink-0", size: 16, "aria-hidden": true }), _jsxs("p", { className: "text-muted-foreground flex-1 text-sm", children: ["This page is built in the", ' ', _jsx("span", { className: "text-foreground font-medium", children: "Page Builder" }), ". Its sections are generated from the builder layout and are read-only here."] }), page.id && (_jsx("button", { type: "button", onClick: () => guardedNavigate(`/page-builder/${page.id}`), className: "bg-primary text-primary-foreground hover:bg-primary/90 shrink-0 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors", children: "Open in Page Builder" }))] })), unmanagedTypes.length > 0 && (_jsxs("div", { role: "status", className: "border-border bg-muted/50 flex items-start gap-3 border-b px-4 py-2.5", children: [_jsx(Lock, { className: "text-muted-foreground mt-0.5 shrink-0", size: 16, "aria-hidden": true }), _jsxs("p", { className: "text-muted-foreground flex-1 text-sm", children: ["This page has", ' ', _jsxs("span", { className: "text-foreground font-medium", children: [unmanagedTypes.length, " section type", unmanagedTypes.length > 1 ? 's' : ''] }), ' ', "managed outside the editor (", unmanagedTypes.join(', '), "). They are preserved on save but edited in your seed script or code, not here."] })] })), validation && (_jsx(ValidationSummary, { errors: validation.errors, warnings: validation.warnings, onDismiss: () => setValidation(null) })), _jsx(ReflowContext.Provider, { value: reflowContext, children: _jsxs("div", { className: "prenta-editor-body relative flex flex-1 overflow-hidden", children: [_jsx(EditorRail, { collapsedLabel: activeRailTab.label, children: ({ width, dragging, collapse }) => (_jsxs(_Fragment, { children: [_jsx(EditorRailTabs, { tabs: railTabs, active: railTab, onChange: setRailTab }), _jsx(RailHeader, { title: activeRailTab.title, width: width, dragging: dragging, onCollapse: collapse }), _jsx("div", { role: "tabpanel", id: `rail-panel-${railTab}`, "aria-labelledby": `rail-tab-${railTab}`, className: "flex min-h-0 flex-1 flex-col", children: railTab === 'sections' ? (_jsx(SectionsList, { sections: page.sections, selectedId: selectedId, canEdit: effectiveCanEdit, onSelect: handleSelectSection, onToggleVisibility: handleToggleVisibility })) : railTab === 'page' ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(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 }) })) : (_jsx(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 })) }), historyOpen && (_jsx(VersionHistoryPanel, { versions: versions, loading: versionsLoading, error: versionsError, selectedIndex: versionIndex, onSelect: setVersionIndex, onClose: closeHistory, onRestore: handleRestoreVersion, restoring: restoring, canRestore: canRestoreVersion }))] })) }), _jsx("div", { className: "flex-1 overflow-hidden", children: sitePreview.active ? (_jsx(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 })) : (_jsx(EditorCanvas, { sections: canvasSections, selectedId: selectedId, breakpoint: viewport, zoom: zoom, onScaleChange: setCanvasScale, onCanvasElement: setCanvasEl, onSelect: handleSelectSection, structuralTypes: structuralTypes, sitePreviewAvailable: sitePreviewAvailable && !sitePreview.active, reviewing: reviewing, changedSectionIds: reviewChangedIds, reviewBar: reviewVersion ? (_jsx(ReviewBar, { version: reviewVersion, changedCount: reviewChangedIds.size, onRestore: () => void handleRestoreVersion(reviewVersion), onBackToCurrent: () => setVersionIndex(0), restoring: restoring, canRestore: canRestoreVersion })) : null })) }), selected && railTab === 'sections' && !reviewing && (_jsx(SectionInspector, { section: selected, canEdit: effectiveCanEdit, onClose: () => setSelectedId(null), onContentChange: handleContentChange, onSettingsChange: handleSettingsChange, onMetaChange: handleMetaChange, onToggleVisibility: () => handleToggleVisibility(selected.id) }))] }) })] }), _jsx(PageSettingsModal, { open: settingsOpen, page: page, canEdit: effectiveCanEdit, onClose: () => setSettingsOpen(false), onSave: handlePageSettings }), _jsx(ConfirmDialog, { open: confirmPublish, onClose: () => setConfirmPublish(false), onConfirm: doPublish, title: "Publish this page?", description: "The current content will go live and replace the published version.", confirmLabel: "Publish" }), page.id && (_jsx(SchedulePublishDialog, { collectionSlug: PAGES_COLLECTION, documentId: page.id, scheduledAt: page.scheduledAt, scheduledUnpublishAt: page.scheduledUnpublishAt, open: scheduleOpen, onClose: () => setScheduleOpen(false), onScheduled: handleScheduled })), _jsx(ConfirmDialog, { open: leaveTarget !== null, onClose: () => setLeaveTarget(null), onConfirm: () => {
                     const target = leaveTarget;
                     setLeaveTarget(null);
                     setDirty(false);