@prenta/admin 1.1.0 → 1.3.0

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

@@ -10,7 +10,16 @@ import { EditorRail, RailHeader } from '../../components/EditorRail.js'
 import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
 import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
-import { VersionHistory } from '../../components/VersionHistory.js'
+import { VersionHistoryPanel } from '../page-editor/VersionHistoryPanel.js'
+import { ReviewBar } from '../page-editor/ReviewBar.js'
+import {
+  fetchPageVersions,
+  restorePageVersion,
+  type PageVersion,
+} from '../../lib/version-history.js'
+import { changedSectionIds, diffVersions } from '../../lib/version-diff.js'
+import { scoreBand, type PageAuditResult } from '@prenta/core/seo/page-audit'
+import { usePageAudit } from '../../hooks/usePageAudit.js'
 import {
   emptyPostFromTemplate,
   fetchPostForEditor,
@@ -20,14 +29,12 @@ import {
   savePostDraft,
   toggleSectionVisibility,
   updateSectionContent,
-  updateSectionContentAtPath,
   updateSectionMeta,
   validatePost,
   type EditorPost,
   type PostHeaderConfig,
   type ValidationResult,
 } from '../../lib/post-editor-service.js'
-import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SharePreviewLinkDialog } from '../../components/SharePreviewLinkDialog.js'
 import { defaultPostHeader } from '@prenta/core/page-sections'
 import { openPublicSiteTab } from '../../lib/open-public-site-tab.js'
@@ -43,13 +50,25 @@ import { EditorTopBar, type SaveState } from '../page-editor/EditorTopBar.js'
 import { SectionsList } from '../page-editor/SectionsPanel.js'
 import { SectionEditForm } from '../page-editor/SectionEditForm.js'
 import { ValidationSummary } from '../page-editor/ValidationSummary.js'
-import { buildEditorContentHtml, computeLiveSeoScore } from '../../lib/editor-seo-content.js'
+import { buildEditorContentHtml } from '../../lib/editor-seo-content.js'
 import { snapshotBaseline, type ReflowBaseline } from '../../lib/reflow-baseline.js'
 import { ReflowContext } from '../page-editor/reflow-context.js'
 import type { Zoom } from '../../lib/breakpoints.js'
-import { companionDimensionPaths, inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
+import { inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 import { PostEditorCanvas } from './PostEditorCanvas.js'
 import { PostFieldsModal, type PostFieldConfig } from './PostFieldsModal.js'
+import { PostTab } from './PostTab.js'
+
+/**
+ * The lower of the two audit scores — the tab dot should reflect the half that
+ * needs work, not an average that hides it. Same three-valued contract as the
+ * page editor: undefined = not reported yet, null = gated off, number = score.
+ */
+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
+}
 
 /** The slice of the resolved CMS config this editor reads. */
 interface EditorConfig {
@@ -108,13 +127,6 @@ export function PostSectionEditor({
   const [selectedId, setSelectedId] = useState<string | null>(null)
   /** Canvas field click — focused after the inspector mounts for `selectedId`. */
   const [pendingFocusPath, setPendingFocusPath] = useState<string | null>(null)
-  /** Bump to skip the next `prenta-preview:sections` echo after a canvas text edit. */
-  const [suppressSectionsEcho, setSuppressSectionsEcho] = useState(0)
-  /** Canvas image Replace — opens MediaPickerModal for this field path. */
-  const [canvasMediaTarget, setCanvasMediaTarget] = useState<{
-    sectionId: string
-    fieldPath: string
-  } | null>(null)
   const [viewport, setViewport] = useState<ViewportId>(DEFAULT_VIEWPORT)
   const [zoom, setZoom] = useState<Zoom>('fit')
   /** Scale the canvas measured — reported upward so the zoom chip shows a real %. */
@@ -136,6 +148,18 @@ export function PostSectionEditor({
   const [railTab, setRailTab] = useState<RailTabId>('sections')
   const seoOpen = railTab === 'seo'
   const [historyOpen, setHistoryOpen] = useState(false)
+  const [versions, setVersions] = useState<PageVersion[]>([])
+  const [versionsLoading, setVersionsLoading] = useState(false)
+  const [versionsError, setVersionsError] = useState<string | null>(null)
+  /** Index into `versions`; 0 is the newest, which is the current content. */
+  const [versionIndex, setVersionIndex] = useState(0)
+  const [restoring, setRestoring] = useState(false)
+  /**
+   * 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)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [scheduleOpen, setScheduleOpen] = useState(false)
   const [shareOpen, setShareOpen] = useState(false)
@@ -158,7 +182,7 @@ export function PostSectionEditor({
 
   const { canEdit, canPublish } = useMemo(() => deriveCan(session), [session])
   const customRenderers = useAdminSectionRenderers()
-  const { siteUrl: publicSiteUrl } = usePublicSiteUrl(config?.seo?.siteUrl)
+  const { siteUrl: publicSiteUrl, matchesAdminOrigin } = usePublicSiteUrl(config?.seo?.siteUrl)
 
   const typeLabel = useMemo(() => {
     const col = config?.collections?.[postType]
@@ -188,6 +212,20 @@ export function PostSectionEditor({
   )
   const publishReady = Boolean(post) && publishCheck.errors.length === 0
 
+  const { audit: savedAudit } = usePageAudit({
+    entityType: 'post',
+    entityId: post?.id ?? null,
+    sections: post?.sections ?? [],
+    slug: post?.slug ?? '',
+    fallback: { title: post?.seoTitle, description: post?.seoDescription },
+    post: {
+      title: post?.title,
+      bodyHtml: post?.body,
+      featuredImage: post?.featuredImage,
+    },
+  })
+  const audit = liveAudit ?? savedAudit
+
   const railTabs = useMemo<RailTab[]>(
     () => [
       {
@@ -196,13 +234,19 @@ export function PostSectionEditor({
         title: 'Post content',
         count: post?.sections.length ?? 0,
       },
-      // No score dot yet. The page editor's comes from the page audit, which
-      // is page-scoped; wiring a number here from `computeLiveSeoScore` would
-      // put a different model's score on a tab, which is the disagreement the
-      // page editor was rewired to remove.
-      { id: 'seo', label: 'SEO & GEO', title: 'Search & AI readiness' },
+      {
+        id: 'seo',
+        label: 'SEO & GEO',
+        title: 'Search & AI readiness',
+        score: weakestAuditScore(audit),
+      },
+      {
+        id: 'page',
+        label: 'Post',
+        title: 'Post settings',
+      },
     ],
-    [post?.sections.length],
+    [post?.sections.length, audit],
   )
   const activeRailTab = railTabs.find((tab) => tab.id === railTab) ?? railTabs[0]!
 
@@ -227,17 +271,6 @@ export function PostSectionEditor({
     [canvasEl, selectedId, baseline, viewport],
   )
 
-  const liveSeoScore = useMemo(() => {
-    if (!post) return 0
-    return computeLiveSeoScore({
-      title: post.title,
-      slug: post.slug,
-      seoTitle: post.seoTitle,
-      seoDescription: post.seoDescription,
-      sections: post.sections,
-      bodyHtml: post.body,
-    })
-  }, [post])
   const publishDisabledReason = publishCheck.errors[0]
 
   // ─── Load ──────────────────────────────────────────────────────────
@@ -446,23 +479,77 @@ export function PostSectionEditor({
     }
   }, [post, documentId, postType, 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(() => {
+  // ─── 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 (postId: string) => {
+      setVersionsLoading(true)
+      setVersionsError(null)
+      try {
+        setVersions(await fetchPageVersions(postType, postId))
+      } catch (err) {
+        setVersions([])
+        setVersionsError(err instanceof Error ? err.message : 'Failed to load version history')
+      } finally {
+        setVersionsLoading(false)
+      }
+    },
+    [postType],
+  )
+
+  const openHistory = useCallback(() => {
     if (!post?.id) return
-    fetchPostForEditor(postType, post.id)
-      .then((p) => {
-        acceptPost(p)
+    setHistoryOpen(true)
+    setVersionIndex(0)
+    void loadVersions(post.id)
+  }, [post?.id, loadVersions])
+
+  const closeHistory = useCallback(() => {
+    setHistoryOpen(false)
+    setVersionIndex(0)
+  }, [])
+
+  const reviewing = historyOpen && versionIndex > 0
+  const reviewVersion = reviewing ? (versions[versionIndex] ?? null) : null
+
+  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: PageVersion) => {
+      if (!post?.id) return
+      setRestoring(true)
+      try {
+        await restorePageVersion(postType, post.id, version.id)
+        const restored = await fetchPostForEditor(postType, post.id)
+        acceptPost(restored)
         setSelectedId(null)
-        setRailTab('sections')
         setDirty(false)
         setSaveState('idle')
         setValidation(null)
-      })
-      .catch(() => {
-        toast.error('Version restored — refresh the page to see it.')
-      })
-  }, [postType, post?.id])
+        closeHistory()
+        void loadVersions(post.id)
+        toast.success('Version restored')
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Failed to restore version')
+      } finally {
+        setRestoring(false)
+      }
+    },
+    [post?.id, postType, acceptPost, closeHistory, loadVersions],
+  )
+
+  const effectiveCanEdit = canEdit && !reviewing
+  const canRestoreVersion = canEdit
 
   const handleSeoSaved = useCallback(() => {
     if (!post?.id) return
@@ -485,32 +572,11 @@ export function PostSectionEditor({
     setRailTab('sections')
     setPendingFocusPath(fieldPath ?? null)
     // Toggles, because selection is now disclosure — see the note on the page
-    // editor's copy. A `fieldPath` means the site preview is pointing at a
-    // specific field, which must open rather than toggle.
+    // editor's copy. A `fieldPath` means a canvas field click, which must
+    // open rather than toggle.
     setSelectedId((current) => (fieldPath ? id : current === id ? null : id))
   }, [])
 
-  const handleCanvasEdit = useCallback(
-    (edit: { sectionId: string; fieldPath: string; value: string }) => {
-      if (!canEdit) return
-      setSuppressSectionsEcho((n) => n + 1)
-      mutateSections((s) =>
-        updateSectionContentAtPath(s, edit.sectionId, edit.fieldPath, edit.value),
-      )
-      setSelectedId(edit.sectionId)
-    },
-    [canEdit, mutateSections],
-  )
-
-  const handleCanvasRequestMedia = useCallback(
-    (request: { sectionId: string; fieldPath: string }) => {
-      if (!canEdit) return
-      setSelectedId(request.sectionId)
-      setCanvasMediaTarget(request)
-    },
-    [canEdit],
-  )
-
   // After a canvas field click, focus the matching inspector input once painted.
   useEffect(() => {
     if (!pendingFocusPath || !selectedId) return
@@ -620,8 +686,8 @@ export function PostSectionEditor({
           dirty={dirty}
           saveState={saveState}
           publishing={publishing}
-          canEdit={canEdit}
-          canPublish={canPublish && canEdit}
+          canEdit={effectiveCanEdit}
+          canPublish={canPublish && effectiveCanEdit}
           publishReady={publishReady}
           publishDisabledReason={publishDisabledReason}
           viewport={viewport}
@@ -634,11 +700,16 @@ export function PostSectionEditor({
           onViewOnSite={post.id && post.slug ? handleViewOnSite : undefined}
           onShare={post.id ? handleShare : undefined}
           hasPublicSiteUrl={Boolean(publicSiteUrl)}
-          onHistory={post.id ? () => setHistoryOpen(true) : undefined}
+          matchesAdminOrigin={matchesAdminOrigin}
+          historyOpen={historyOpen}
+          onHistory={post.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined}
           onOpenSettings={() => setFieldsOpen(true)}
           onOpenSeo={handleToggleSeo}
           seoOpen={seoOpen}
-          seoScore={liveSeoScore}
+          seoScore={audit?.seo.score ?? undefined}
+          seoScoreBand={
+            typeof audit?.seo.score === 'number' ? scoreBand(audit.seo.score) : undefined
+          }
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
           onSchedule={post.id ? requestSchedule : undefined}
@@ -696,27 +767,44 @@ export function PostSectionEditor({
                       <SectionsList
                         sections={post.sections}
                         selectedId={selectedId}
-                        canEdit={canEdit}
+                        canEdit={effectiveCanEdit}
                         onSelect={handleSelectSection}
                         onToggleVisibility={handleToggleVisibility}
-                        renderEditor={(section) => (
-                          <SectionEditForm
-                            section={section}
-                            canEdit={canEdit}
-                            onContentChange={handleContentChange}
-                            onMetaChange={handleMetaChange}
-                            postBody={post.body}
-                            onPostBodyChange={handlePostBodyChange}
-                          />
-                        )}
+                        renderEditor={
+                          reviewing
+                            ? undefined
+                            : (section) => (
+                                <SectionEditForm
+                                  section={section}
+                                  canEdit={effectiveCanEdit}
+                                  onContentChange={handleContentChange}
+                                  onMetaChange={handleMetaChange}
+                                  postBody={post.body}
+                                  onPostBodyChange={handlePostBodyChange}
+                                />
+                              )
+                        }
                       />
+                    ) : railTab === 'page' ? (
+                      <div className="min-h-0 flex-1 overflow-y-auto">
+                        <PostTab
+                          post={post}
+                          canEdit={effectiveCanEdit}
+                          fields={config?.collections?.[postType]?.fields}
+                          onChange={handleFields}
+                        />
+                      </div>
                     ) : (
                       <SeoEditorPane
                         entityType="post"
                         entityId={post.id}
                         slug={post.slug}
                         auditSections={post.sections}
+                        onAuditChange={setLiveAudit}
                         contentHtml={seoContentHtml}
+                        title={post.title}
+                        bodyHtml={post.body}
+                        featuredImage={post.featuredImage}
                         draftMeta={{
                           seoTitle: post.seoTitle,
                           seoDescription: post.seoDescription,
@@ -727,15 +815,39 @@ export function PostSectionEditor({
                       />
                     )}
                   </div>
+
+                  {historyOpen && (
+                    <VersionHistoryPanel
+                      versions={versions}
+                      loading={versionsLoading}
+                      error={versionsError}
+                      selectedIndex={versionIndex}
+                      onSelect={setVersionIndex}
+                      onClose={closeHistory}
+                      onRestore={handleRestoreVersion}
+                      restoring={restoring}
+                      canRestore={canRestoreVersion}
+                    />
+                  )}
                 </>
               )}
             </EditorRail>
 
             <div className="flex-1 overflow-hidden">
               <PostEditorCanvas
-                sections={post.sections}
+                sections={reviewVersion ? reviewVersion.sections : post.sections}
                 header={header}
-                context={context}
+                context={
+                  reviewVersion
+                    ? {
+                        ...context,
+                        title: reviewVersion.title ?? context.title,
+                        excerpt: reviewVersion.excerpt ?? context.excerpt,
+                        body: reviewVersion.body ?? context.body,
+                        featuredImageUrl: reviewVersion.featuredImage ?? context.featuredImageUrl,
+                      }
+                    : context
+                }
                 selectedId={selectedId}
                 viewport={viewport}
                 zoom={zoom}
@@ -743,26 +855,30 @@ export function PostSectionEditor({
                 onCanvasElement={setCanvasEl}
                 onSelect={handleSelectSection}
                 structuralTypes={structuralTypes}
+                reviewing={reviewing}
+                changedSectionIds={reviewChangedIds}
+                reviewBar={
+                  reviewVersion ? (
+                    <ReviewBar
+                      version={reviewVersion}
+                      changedCount={reviewChangedIds.size}
+                      onRestore={() => void handleRestoreVersion(reviewVersion)}
+                      onBackToCurrent={() => setVersionIndex(0)}
+                      restoring={restoring}
+                      canRestore={canRestoreVersion}
+                    />
+                  ) : null
+                }
               />
             </div>
           </div>
         </ReflowContext.Provider>
       </div>
 
-      {post.id && (
-        <VersionHistory
-          collectionSlug={postType}
-          documentId={post.id}
-          open={historyOpen}
-          onClose={() => setHistoryOpen(false)}
-          onRestore={handleRestored}
-        />
-      )}
-
       <PostFieldsModal
         open={fieldsOpen}
         post={post}
-        canEdit={canEdit}
+        canEdit={effectiveCanEdit}
         fields={config?.collections?.[postType]?.fields}
         onClose={() => setFieldsOpen(false)}
         onSave={handleFields}
@@ -817,29 +933,6 @@ export function PostSectionEditor({
         cancelLabel="Stay"
         destructive
       />
-
-      <MediaPickerModal
-        open={canvasMediaTarget !== null}
-        onClose={() => setCanvasMediaTarget(null)}
-        accept="image/*"
-        onSelectItem={(item) => {
-          if (!canvasMediaTarget) return
-          const { sectionId, fieldPath } = canvasMediaTarget
-          const { widthPath, heightPath } = companionDimensionPaths(fieldPath)
-          mutateSections((s) => {
-            let next = updateSectionContentAtPath(s, sectionId, fieldPath, item.url)
-            if (typeof item.width === 'number') {
-              next = updateSectionContentAtPath(next, sectionId, widthPath, item.width)
-            }
-            if (typeof item.height === 'number') {
-              next = updateSectionContentAtPath(next, sectionId, heightPath, item.height)
-            }
-            return next
-          })
-          setCanvasMediaTarget(null)
-        }}
-        onSelect={() => setCanvasMediaTarget(null)}
-      />
     </ErrorBoundary>
   )
 }

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

@@ -0,0 +1,46 @@
+'use client'
+
+import { useState } from 'react'
+import type { EditorPost } from '../../lib/post-editor-service.js'
+import { PostFieldsForm, type PostFieldConfig } from './PostFieldsForm.js'
+
+export interface PostTabProps {
+  post: EditorPost
+  canEdit: boolean
+  fields?: Record<string, PostFieldConfig | undefined>
+  onChange: (patch: Partial<EditorPost>) => void
+}
+
+/**
+ * Rail tab 3 — post identity fields only.
+ *
+ * Title, slug, excerpt, featured image, category, and tags. Layout, header
+ * chrome, and template controls stay design-owned on the type template.
+ * Address / 301 / robots / author / danger-zone belong to pages, not posts.
+ */
+export function PostTab({ post, canEdit, fields, onChange }: PostTabProps) {
+  const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
+
+  return (
+    <div className="p-3">
+      <PostFieldsForm
+        idPrefix="post"
+        values={{
+          title: post.title,
+          slug: post.slug,
+          excerpt: post.excerpt,
+          featuredImage: post.featuredImage,
+          category: post.category,
+          tags: post.tags,
+        }}
+        canEdit={canEdit}
+        fields={fields}
+        postType={post.postType}
+        bodyHtml={post.body}
+        slugTouched={slugTouched}
+        onSlugTouched={() => setSlugTouched(true)}
+        onChange={(patch) => onChange(patch)}
+      />
+    </div>
+  )
+}

package/src/views/settings/SeoSettingsTab.tsx

@@ -13,6 +13,7 @@ import {
   Upload,
   X,
 } from 'lucide-react'
+import { siteUrlMatchesAdminOrigin } from '../../lib/preview-link.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { SEOConfigPanel } from '../../components/SEOConfigPanel.js'
 import {
@@ -125,6 +126,26 @@ export function SeoSettingsTab({ onNavigate, role }: SeoSettingsTabProps) {
 
       <SettingsValidationSummary issues={seo.issues} />
 
+      {!seo.siteUrl ? (
+        <div
+          role="status"
+          className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
+        >
+          <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+          Set the public site URL in Settings → General. View site and Share stay disabled until it
+          is set.
+        </div>
+      ) : siteUrlMatchesAdminOrigin(seo.siteUrl) ? (
+        <div
+          role="status"
+          className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-lg border p-4 text-sm"
+        >
+          <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
+          This origin is the admin, not the public site. Set the public site URL to the live apex —
+          View site and Share stay disabled while it matches this CMS host.
+        </div>
+      ) : null}
+
       <MetaDefaultsCard seo={seo} canEdit={canEdit} />
       <OrganizationCard seo={seo} canEdit={canEdit} />
       <SearchEngineVerificationCard seo={seo} canEdit={canEdit} />

package/src/views/settings/SiteInformationCard.tsx

@@ -2,6 +2,7 @@
 
 import { useId } from 'react'
 import { CheckCircle2 } from 'lucide-react'
+import { siteUrlMatchesAdminOrigin } from '../../lib/preview-link.js'
 import { SettingsCard, SettingsSourceBadge } from './components.js'
 import type {
   GeneralSettingsForm,
@@ -37,6 +38,7 @@ export function SiteInformationCard({
   const urlIssue = issues.find((i) => i.field === 'siteUrl')
   const urlEditable = sources.siteUrl?.editable !== false && canEdit
   const urlValid = !urlIssue && form.siteUrl.trim().length > 0
+  const urlIsAdminOrigin = siteUrlMatchesAdminOrigin(form.siteUrl)
 
   return (
     <SettingsCard title="Site Information" description="Your site's name, tagline, and public URL.">
@@ -99,6 +101,11 @@ export function SiteInformationCard({
             >
               {urlIssue.message}
             </p>
+          ) : urlIsAdminOrigin ? (
+            <p role="status" className="text-warning mt-1 text-sm">
+              This origin is the admin, not the public site. Set the public apex (Astro or the live
+              Next site), not this CMS host — View site and Share will stay disabled until you do.
+            </p>
           ) : urlValid ? (
             <p className="text-muted-foreground mt-1 flex items-center gap-1.5 text-sm">
               <CheckCircle2 size={13} className="text-success" aria-hidden="true" />