@prenta/admin 0.95.1 → 0.97.0

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

@@ -6,7 +6,9 @@ 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 { 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 {
@@ -42,11 +44,14 @@ import { DEFAULT_VIEWPORT, type ViewportId } from '../page-editor/viewports.js'
 import { EditorTopBar, type SaveState } from '../page-editor/EditorTopBar.js'
 import { SitePreviewFrame } from '../page-editor/SitePreviewFrame.js'
 import { useSitePreview } from '../page-editor/useSitePreview.js'
-import { SectionsPanel } from '../page-editor/SectionsPanel.js'
+import { SectionsList } from '../page-editor/SectionsPanel.js'
 import { SectionEditForm } from '../page-editor/SectionEditForm.js'
 import { ValidationSummary } from '../page-editor/ValidationSummary.js'
 import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
-import { computeLiveSeoScore } from '../../lib/editor-seo-content.js'
+import { buildEditorContentHtml, computeLiveSeoScore } 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 { PostEditorCanvas } from './PostEditorCanvas.js'
 import { PostFieldsModal, type PostFieldConfig } from './PostFieldsModal.js'
@@ -124,18 +129,45 @@ export function PostSectionEditor({
     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 %. */
+  const [canvasScale, setCanvasScale] = useState(1)
+  /** The live canvas surface, for the reflow guard to clone. */
+  const [canvasEl, setCanvasEl] = useState<HTMLElement | null>(null)
+  /** Section content as it is on the live site, for the reflow guard's baseline. */
+  const [baseline, setBaseline] = useState<ReflowBaseline | null>(null)
   const [dirty, setDirty] = useState(false)
   const [saveState, setSaveState] = useState<SaveState>('idle')
   const [publishing, setPublishing] = useState(false)
 
   const [fieldsOpen, setFieldsOpen] = useState(false)
-  const [seoOpen, setSeoOpen] = useState(false)
+  /**
+   * Active rail tab. Replaces the boolean `seoOpen` that drove a right-hand
+   * aside — the same aside the page editor retired so the editor has one
+   * settings surface rather than two competing ones.
+   */
+  const [railTab, setRailTab] = useState<RailTabId>('sections')
+  const seoOpen = railTab === 'seo'
   const [historyOpen, setHistoryOpen] = useState(false)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [scheduleOpen, setScheduleOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
+  /**
+   * Take delivery of server state.
+   *
+   * Every path that receives a fresh post from the API goes through here so
+   * the reflow baseline is re-captured with it. Saving a PUBLISHED post writes
+   * straight through to the live content, so a save moves the baseline exactly
+   * as a publish does; missing one would leave the guard comparing against
+   * content no longer on the site.
+   */
+  const acceptPost = useCallback((p: EditorPost) => {
+    setPost(p)
+    setBaseline(snapshotBaseline(p.sections, p.status))
+  }, [])
+
   const { canEdit, canPublish } = useMemo(() => deriveCan(session), [session])
   const customRenderers = useAdminSectionRenderers()
   const { siteUrl: publicSiteUrl } = usePublicSiteUrl(config?.seo?.siteUrl)
@@ -166,6 +198,45 @@ export function PostSectionEditor({
   )
   const publishReady = Boolean(post) && publishCheck.errors.length === 0
 
+  const railTabs = useMemo<RailTab[]>(
+    () => [
+      {
+        id: 'sections',
+        label: 'Sections',
+        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' },
+    ],
+    [post?.sections.length],
+  )
+  const activeRailTab = railTabs.find((tab) => tab.id === railTab) ?? railTabs[0]!
+
+  // Content the SEO pane analyses — sections plus the post body.
+  const seoContentHtml = useMemo(
+    () => buildEditorContentHtml(post?.sections ?? [], post?.body ?? ''),
+    [post?.sections, post?.body],
+  )
+
+  // 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],
+  )
+
   const liveSeoScore = useMemo(() => {
     if (!post) return 0
     return computeLiveSeoScore({
@@ -210,7 +281,7 @@ export function PostSectionEditor({
     load
       .then((p) => {
         if (cancelled) return
-        setPost(p)
+        acceptPost(p)
         setSelectedId(null)
         if (!documentId) {
           setDirty(true)
@@ -305,7 +376,7 @@ export function PostSectionEditor({
     setSaveState('saving')
     try {
       const saved = await savePostDraft(post)
-      setPost(saved)
+      acceptPost(saved)
       setDirty(false)
       setSaveState('saved')
       setValidation(null)
@@ -387,7 +458,7 @@ export function PostSectionEditor({
     setPublishing(true)
     try {
       const published = await publishPost(post)
-      setPost(published)
+      acceptPost(published)
       setDirty(false)
       setSaveState('saved')
       setValidation(null)
@@ -406,9 +477,9 @@ export function PostSectionEditor({
     if (!post?.id) return
     fetchPostForEditor(postType, post.id)
       .then((p) => {
-        setPost(p)
+        acceptPost(p)
         setSelectedId(null)
-        setSeoOpen(false)
+        setRailTab('sections')
         setDirty(false)
         setSaveState('idle')
         setValidation(null)
@@ -421,21 +492,22 @@ export function PostSectionEditor({
   const handleSeoSaved = useCallback(() => {
     if (!post?.id) return
     fetchPostForEditor(postType, post.id)
-      .then((p) => setPost(p))
+      .then((p) => acceptPost(p))
       .catch(() => {
         /* SEO API saved; editor meta will sync on next full load */
       })
   }, [postType, post?.id])
 
   const handleToggleSeo = useCallback(() => {
-    setSeoOpen((open) => {
-      if (!open) setSelectedId(null)
-      return !open
+    setRailTab((tab) => {
+      if (tab === 'seo') return 'sections'
+      setSelectedId(null)
+      return 'seo'
     })
   }, [])
 
   const handleSelectSection = useCallback((id: string | null, fieldPath?: string) => {
-    setSeoOpen(false)
+    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
@@ -621,6 +693,11 @@ export function PostSectionEditor({
           viewport={viewport}
           backLabel="Posts"
           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('/posts')}
           onPreview={handlePreview}
           onViewOnSite={post.id ? handleViewOnSite : undefined}
@@ -665,74 +742,96 @@ export function PostSectionEditor({
           />
         )}
 
-        <div className="relative flex flex-1 overflow-hidden">
-          <SectionsPanel
-            sections={post.sections}
-            selectedId={selectedId}
-            canEdit={canEdit}
-            onSelect={handleSelectSection}
-            onToggleVisibility={handleToggleVisibility}
-            // Same inline editor as the page editor. The post editor still has
-            // its own standalone panel rather than the rail (followup 20), but
-            // where the FORM lives is a separate question from what contains
-            // the list, and the answer is the same on both screens.
-            renderEditor={(section) => (
-              <SectionEditForm
-                section={section}
-                canEdit={canEdit}
-                onContentChange={handleContentChange}
-                onMetaChange={handleMetaChange}
-                postBody={post.body}
-                onPostBodyChange={handlePostBodyChange}
-              />
-            )}
-          />
-
-          <div className="flex-1 overflow-hidden">
-            {sitePreview.active ? (
-              <SitePreviewFrame
-                src={sitePreview.url}
-                viewport={viewport}
-                reloadKey={sitePreview.reloadKey}
-                title={`Site preview: ${post.title || `New ${typeLabel}`}`}
-                selectedId={selectedId}
-                sections={post.sections}
-                suppressSectionsEcho={suppressSectionsEcho}
-                onSelectSection={handleSelectSection}
-                onCanvasEdit={handleCanvasEdit}
-                onCanvasRequestMedia={handleCanvasRequestMedia}
-              />
-            ) : (
-              <PostEditorCanvas
-                sections={post.sections}
-                header={header}
-                context={context}
-                selectedId={selectedId}
-                viewport={viewport}
-                onSelect={handleSelectSection}
-                structuralTypes={structuralTypes}
-                sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
-              />
-            )}
+        <ReflowContext.Provider value={reflowContext}>
+          <div className="prenta-editor-body 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={post.sections}
+                        selectedId={selectedId}
+                        canEdit={canEdit}
+                        onSelect={handleSelectSection}
+                        onToggleVisibility={handleToggleVisibility}
+                        renderEditor={(section) => (
+                          <SectionEditForm
+                            section={section}
+                            canEdit={canEdit}
+                            onContentChange={handleContentChange}
+                            onMetaChange={handleMetaChange}
+                            postBody={post.body}
+                            onPostBodyChange={handlePostBodyChange}
+                          />
+                        )}
+                      />
+                    ) : (
+                      <SeoEditorPane
+                        entityType="post"
+                        entityId={post.id}
+                        slug={post.slug}
+                        auditSections={post.sections}
+                        contentHtml={seoContentHtml}
+                        draftMeta={{
+                          seoTitle: post.seoTitle,
+                          seoDescription: post.seoDescription,
+                        }}
+                        onDraftChange={handleFields}
+                        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: ${post.title || `New ${typeLabel}`}`}
+                  selectedId={selectedId}
+                  sections={post.sections}
+                  suppressSectionsEcho={suppressSectionsEcho}
+                  onSelectSection={handleSelectSection}
+                  onCanvasEdit={handleCanvasEdit}
+                  onCanvasRequestMedia={handleCanvasRequestMedia}
+                />
+              ) : (
+                <PostEditorCanvas
+                  sections={post.sections}
+                  header={header}
+                  context={context}
+                  selectedId={selectedId}
+                  viewport={viewport}
+                  zoom={zoom}
+                  onScaleChange={setCanvasScale}
+                  onCanvasElement={setCanvasEl}
+                  onSelect={handleSelectSection}
+                  structuralTypes={structuralTypes}
+                  sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
+                />
+              )}
+            </div>
           </div>
-
-          {seoOpen && (
-            <EditorSeoAside
-              entityType="post"
-              entityId={post.id}
-              title={post.title}
-              slug={post.slug}
-              seoTitle={post.seoTitle}
-              seoDescription={post.seoDescription}
-              sections={post.sections}
-              bodyHtml={post.body}
-              canEdit={canEdit}
-              onClose={() => setSeoOpen(false)}
-              onDraftChange={handleFields}
-              onSaved={handleSeoSaved}
-            />
-          )}
-        </div>
+        </ReflowContext.Provider>
       </div>
 
       {post.id && (

package/dist/components/EditorSeoAside.d.ts

@@ -1,23 +0,0 @@
-import type { PageSection } from '@prenta/core/page-sections';
-export interface EditorSeoAsideProps {
-    entityType: 'page' | 'post';
-    /** Saved document id — when absent, draft mode with live analysis. */
-    entityId: string | null;
-    title: string;
-    slug: string;
-    seoTitle: string;
-    seoDescription: string;
-    /** Post body HTML and/or section content for live SEO analysis. */
-    sections?: PageSection[];
-    bodyHtml?: string;
-    canEdit: boolean;
-    onClose: () => void;
-    onDraftChange?: (patch: {
-        seoTitle?: string;
-        seoDescription?: string;
-    }) => void;
-    onSaved?: () => void;
-}
-/** Right-side SEO panel for the Page / Post section editors. */
-export declare function EditorSeoAside({ entityType, entityId, slug, seoTitle, seoDescription, sections, bodyHtml, onClose, onDraftChange, onSaved, }: EditorSeoAsideProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=EditorSeoAside.d.ts.map

package/dist/components/EditorSeoAside.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorSeoAside.d.ts","sourceRoot":"","sources":["../../src/components/EditorSeoAside.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAI7D,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sEAAsE;IACtE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,gEAAgE;AAChE,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,QAAa,EACb,QAAa,EACb,OAAO,EACP,aAAa,EACb,OAAO,GACR,EAAE,mBAAmB,2CA4BrB"}

package/dist/components/EditorSeoAside.js

@@ -1,21 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
-import { SeoEditorPane } from './seo/SeoEditorPane.js';
-import { ResizableAside } from './ui/ResizableAside.js';
-import { buildEditorContentHtml } from '../lib/editor-seo-content.js';
-const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l';
-/** Right-side SEO panel for the Page / Post section editors. */
-export function EditorSeoAside({ entityType, entityId, slug, seoTitle, seoDescription, sections = [], bodyHtml = '', onClose, onDraftChange, onSaved, }) {
-    const contentHtml = useMemo(() => buildEditorContentHtml(sections, bodyHtml), [sections, bodyHtml]);
-    useEffect(() => {
-        function onKey(e) {
-            if (e.key === 'Escape')
-                onClose();
-        }
-        document.addEventListener('keydown', onKey);
-        return () => document.removeEventListener('keydown', onKey);
-    }, [onClose]);
-    return (_jsx(ResizableAside, { role: "dialog", "aria-label": "SEO settings", className: INSPECTOR_SHELL, children: _jsx(SeoEditorPane, { entityType: entityType, entityId: entityId, slug: slug, contentHtml: contentHtml, draftMeta: { seoTitle, seoDescription }, onDraftChange: onDraftChange, onClose: onClose, onSaved: onSaved }) }));
-}
-//# sourceMappingURL=EditorSeoAside.js.map

package/dist/components/EditorSeoAside.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorSeoAside.js","sourceRoot":"","sources":["../../src/components/EditorSeoAside.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAGrE,MAAM,eAAe,GAAG,qDAAqD,CAAA;AAmB7E,gEAAgE;AAChE,MAAM,UAAU,cAAc,CAAC,EAC7B,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,EAAE,EACb,OAAO,EACP,aAAa,EACb,OAAO,GACa;IACpB,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAChD,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,KAAK,CAAC,CAAgB;YAC7B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,OAAO,EAAE,CAAA;QACnC,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;QAC3C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;IAC7D,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,KAAC,cAAc,IAAC,IAAI,EAAC,QAAQ,gBAAY,cAAc,EAAC,SAAS,EAAE,eAAe,YAChF,KAAC,aAAa,IACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,EACvC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,GACa,CAClB,CAAA;AACH,CAAC"}

package/src/components/EditorSeoAside.tsx

@@ -1,68 +0,0 @@
-'use client'
-
-import { useEffect, useMemo } from 'react'
-import { SeoEditorPane } from './seo/SeoEditorPane.js'
-import { ResizableAside } from './ui/ResizableAside.js'
-import { buildEditorContentHtml } from '../lib/editor-seo-content.js'
-import type { PageSection } from '@prenta/core/page-sections'
-
-const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
-
-export interface EditorSeoAsideProps {
-  entityType: 'page' | 'post'
-  /** Saved document id — when absent, draft mode with live analysis. */
-  entityId: string | null
-  title: string
-  slug: string
-  seoTitle: string
-  seoDescription: string
-  /** Post body HTML and/or section content for live SEO analysis. */
-  sections?: PageSection[]
-  bodyHtml?: string
-  canEdit: boolean
-  onClose: () => void
-  onDraftChange?: (patch: { seoTitle?: string; seoDescription?: string }) => void
-  onSaved?: () => void
-}
-
-/** Right-side SEO panel for the Page / Post section editors. */
-export function EditorSeoAside({
-  entityType,
-  entityId,
-  slug,
-  seoTitle,
-  seoDescription,
-  sections = [],
-  bodyHtml = '',
-  onClose,
-  onDraftChange,
-  onSaved,
-}: EditorSeoAsideProps) {
-  const contentHtml = useMemo(
-    () => buildEditorContentHtml(sections, bodyHtml),
-    [sections, bodyHtml],
-  )
-
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
-  }, [onClose])
-
-  return (
-    <ResizableAside role="dialog" aria-label="SEO settings" className={INSPECTOR_SHELL}>
-      <SeoEditorPane
-        entityType={entityType}
-        entityId={entityId}
-        slug={slug}
-        contentHtml={contentHtml}
-        draftMeta={{ seoTitle, seoDescription }}
-        onDraftChange={onDraftChange}
-        onClose={onClose}
-        onSaved={onSaved}
-      />
-    </ResizableAside>
-  )
-}