@prenta/admin 0.98.1 → 1.1.0

package/src/lib/page-editor-service.ts

@@ -32,6 +32,8 @@ import {
   updateSectionMeta,
   coerceSections as coerceSectionsCore,
   validateSectionContent,
+  isPageBuilderTree,
+  layoutTreeToSections,
   type PageSection,
 } from '@prenta/core/page-sections'
 import { validateSlug } from '@prenta/core/client'
@@ -91,13 +93,6 @@ export interface EditorPage {
   authorName: string
   /** CMS user behind the byline, when it is one. Empty for generic/guest. */
   authorId: string
-  /**
-   * True when the document was authored in the visual Page Builder (it carries
-   * a `_layout` tree). Such a page's `sections` are *compiled* from the layout
-   * on every save (ADR 0002), so the flat editor opens it read-only and points
-   * the user to the Page Builder instead of silently fighting the next save.
-   */
-  builderOwned: boolean
 }
 
 export interface ValidationResult {
@@ -196,20 +191,20 @@ interface DocumentApiRow {
   scheduledUnpublishAt?: string | null
   updatedAt: string | null
   data: Record<string, unknown> | null
-  /** The page-builder tree, lifted out of `data` onto the wire envelope by the API. */
+  /** Lifted leftover page-builder tree from `getDocument` (ADR 0003). */
   layout?: unknown
 }
 
-function isPlainObject(v: unknown): v is Record<string, unknown> {
-  return !!v && typeof v === 'object' && !Array.isArray(v)
+function sectionsFromDocumentRow(doc: DocumentApiRow): PageSection[] {
+  const stored = coerceSectionsCore(doc.data?.sections, { onUnknown: 'preserve' })
+  if (stored.length > 0) return stored
+  if (isPageBuilderTree(doc.layout)) return layoutTreeToSections(doc.layout)
+  return stored
 }
 
 function rowToEditorPage(doc: DocumentApiRow): EditorPage {
   const data = doc.data ?? {}
   const slug = doc.slug ?? ''
-  // The API lifts the stored `_layout` onto `doc.layout`, but tolerate either
-  // shape so ownership detection is robust to response variations.
-  const builderOwned = isPlainObject(doc.layout) || isPlainObject(data._layout)
   return {
     id: doc.id,
     title: doc.title ?? '',
@@ -220,7 +215,7 @@ function rowToEditorPage(doc: DocumentApiRow): EditorPage {
       typeof data.parentPageId === 'string' && data.parentPageId ? data.parentPageId : null,
     // Preserve unknown (externally-managed) sections so the editor can show
     // them read-only and round-trip them on save instead of dropping them.
-    sections: coerceSectionsCore(data.sections, { onUnknown: 'preserve' }),
+    sections: sectionsFromDocumentRow(doc),
     seoTitle: typeof data.metaTitle === 'string' ? data.metaTitle : '',
     seoDescription: typeof data.metaDescription === 'string' ? data.metaDescription : '',
     publishedAt: doc.publishedAt ?? null,
@@ -229,7 +224,6 @@ function rowToEditorPage(doc: DocumentApiRow): EditorPage {
     scheduledUnpublishAt: doc.scheduledUnpublishAt ?? null,
     authorName: typeof data.authorName === 'string' ? data.authorName : '',
     authorId: typeof data.authorId === 'string' ? data.authorId : '',
-    builderOwned,
   }
 }
 
@@ -330,6 +324,5 @@ export function emptyPage(parentPageId: string | null = null): EditorPage {
     scheduledUnpublishAt: null,
     authorName: '',
     authorId: '',
-    builderOwned: false,
   }
 }

package/src/lib/view-site-chrome.ts

@@ -0,0 +1,34 @@
+import type { PageStatus } from './page-editor-service.js'
+
+export type ViewSiteIntent = 'preview-draft' | 'view-live'
+
+export const NO_PUBLIC_SITE_URL_REASON =
+  'Set the public site URL in Settings → SEO to open the live design.'
+
+export function resolveViewSiteChrome(input: {
+  status: PageStatus
+  dirty: boolean
+  hasPublicSiteUrl: boolean
+  hasIdentity: boolean
+}): {
+  viewEnabled: boolean
+  viewDisabledReason?: string
+  primaryIntent: ViewSiteIntent
+  showViewLive: boolean
+  shareVisible: boolean
+} {
+  const unpublished = input.status !== 'PUBLISHED' || input.dirty
+  const primaryIntent: ViewSiteIntent =
+    input.status === 'PUBLISHED' && !input.dirty ? 'view-live' : 'preview-draft'
+  const shareVisible = input.hasIdentity && unpublished
+  const viewEnabled = input.hasIdentity && input.hasPublicSiteUrl
+
+  return {
+    viewEnabled,
+    viewDisabledReason:
+      input.hasIdentity && !input.hasPublicSiteUrl ? NO_PUBLIC_SITE_URL_REASON : undefined,
+    primaryIntent,
+    showViewLive: input.hasIdentity && input.status === 'PUBLISHED' && input.dirty,
+    shareVisible,
+  }
+}

package/src/router/admin-routes.ts

@@ -40,14 +40,12 @@ export const ADMIN_STATIC_ROUTE_PATTERNS: readonly string[] = [
   '/pages',
   '/pages/:id',
   '/pages/:id/edit',
-  '/pages/:id/preview',
   '/pages/new',
   '/pages/tags',
   '/pages/tags/:id/edit',
   '/pages/tags/new',
   '/posts',
   '/posts/:type/:id/edit',
-  '/posts/:type/:id/preview',
   '/posts/:type/new',
   '/posts/new',
   '/posts/types',

package/src/styles/theme.css

@@ -174,8 +174,8 @@
  * `views/page-editor/sections/` must use `@pv-*`, never `sm:`/`md:`/`lg:`.
  *
  * Values come from the page-builder design handoff. Any element carrying
- * these variants needs an ancestor with `@container` — EditorCanvas,
- * PostEditorCanvas, PagePreview and PostPreview all declare it.
+ * these variants needs an ancestor with `@container` — EditorCanvas
+ * and PostEditorCanvas both declare it.
  */
 @theme {
   --container-pv-sm: 460px; /* below: stats 1-up, buttons full width */
@@ -281,8 +281,8 @@
   /*
    * The canvas is the query container for every previewed section (`@pv-*`
    * variants — see the step scale above). It lives here rather than as an
-   * `@container` utility on each host because FOUR surfaces render these
-   * sections — EditorCanvas, PostEditorCanvas, PagePreview, PostPreview — and
+   * `@container` utility on each host because TWO surfaces render these
+   * sections — EditorCanvas and PostEditorCanvas — and
    * a host that forgets it degrades silently: with no container ancestor,
    * every `@pv-*` variant simply never matches and the page renders at its
    * narrowest layout regardless of the selected breakpoint. Tying containment

package/src/views/PageEditor.tsx

@@ -13,8 +13,8 @@ export interface PageEditorProps {
 }
 
 /**
- * @deprecated Superseded by the visual page builder (`PageBuilder` and the
- * `views/page-editor/` section editor); will be removed in the next major.
+ * @deprecated Superseded by the section editor (`PageSectionEditor`); will be
+ * removed in the next major.
  */
 export function PageEditor({ id, onNavigate }: PageEditorProps) {
   const isNew = !id

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

@@ -18,7 +18,6 @@ interface EditorCanvasProps {
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
-  sitePreviewAvailable?: boolean
   /**
    * Read-only render of a past version. Suppresses selection and the editing
    * affordances, and turns on the changed-section outlines.
@@ -50,7 +49,6 @@ export function EditorCanvas({
   onScaleChange,
   onCanvasElement,
   structuralTypes = [],
-  sitePreviewAvailable = false,
   reviewing = false,
   changedSectionIds,
   reviewBar,
@@ -84,10 +82,7 @@ export function EditorCanvas({
           ) : (
             <>
               <CanvasEditTip />
-              <StructureNotice
-                structuralTypes={structuralTypes}
-                sitePreviewAvailable={sitePreviewAvailable}
-              />
+              <StructureNotice structuralTypes={structuralTypes} />
             </>
           )
         }

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

@@ -1,21 +1,24 @@
 'use client'
 
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {
   Calendar,
   Check,
+  ChevronDown,
   ExternalLink,
-  Eye,
-  Globe,
   History,
   Loader2,
   Settings2,
+  Share2,
   TriangleAlert,
 } from 'lucide-react'
 import { EditorSeoScoreBadge } from '../../components/seo/EditorSeoScoreBadge.js'
 import { BreakpointPicker } from '../../components/BreakpointPicker.js'
 import { ZoomChip } from '../../components/ZoomChip.js'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { PageStatus } from '../../lib/page-editor-service.js'
 import type { Zoom } from '../../lib/breakpoints.js'
+import { resolveViewSiteChrome, type ViewSiteIntent } from '../../lib/view-site-chrome.js'
 import { type ViewportId } from './viewports.js'
 
 export type SaveState = 'idle' | 'saving' | 'saved' | 'error'
@@ -33,7 +36,7 @@ interface EditorTopBarProps {
   /** Shown on hover/focus when publish is blocked by validation (not role). */
   publishDisabledReason?: string
   viewport: ViewportId
-  /** Canvas zoom mode; omit to hide the zoom chip (e.g. the site-preview iframe). */
+  /** Canvas zoom mode; omit to hide the zoom chip. */
   zoom?: Zoom
   /** Scale the canvas actually measured, 0–1 — displayed by the zoom chip. */
   canvasScale?: number
@@ -42,13 +45,16 @@ interface EditorTopBarProps {
   backLabel?: string
   onViewport: (v: ViewportId) => void
   onBack: () => void
-  onPreview: () => void
   /**
-   * Open the draft on the public site (real front-end) in a new tab. When
-   * omitted the "View on site" button is hidden — e.g. for unsaved documents
-   * or installs without a public URL.
+   * Open the public site in a new tab. Called with `preview-draft` or
+   * `view-live` depending on status and dirty. Omitted for unsaved documents
+   * (no id/slug yet) — View site / Share / View live are then hidden.
    */
-  onViewOnSite?: () => void
+  onViewOnSite?: (intent: ViewSiteIntent) => void
+  /** Copy a shareable draft preview link. Hidden when `shareVisible` is false. */
+  onShare?: () => void
+  /** When false, View site and Share are disabled with the SEO settings reason. */
+  hasPublicSiteUrl?: boolean
   /**
    * Toggle the version history panel. When omitted the History button is
    * hidden — e.g. for unsaved documents that have no versions yet.
@@ -60,13 +66,6 @@ interface EditorTopBarProps {
    * is nothing in the chrome saying which mode the editor is in.
    */
   historyOpen?: boolean
-  /** Whether the inline site preview (iframe of the public site) is showing. */
-  sitePreview?: boolean
-  /**
-   * Toggle the inline site preview — renders the draft through the consumer's
-   * real public route inside the editor. Hidden when omitted (unsaved docs).
-   */
-  onToggleSitePreview?: () => void
   onOpenSettings: () => void
   /** Open the document SEO panel (meta, social, schema, analysis). */
   onOpenSeo?: () => void
@@ -90,9 +89,8 @@ interface EditorTopBarProps {
   scheduledUnpublishAt?: string | null
   /**
    * Section types the canvas renders as placeholders (custom / unmanaged).
-   * When non-empty the editor is in "structure" mode: the eye preview is
-   * labeled as a structure preview and "View on site" is promoted to a
-   * labeled button as the primary design preview.
+   * Used for structure notice / other chrome. View site is always a labeled
+   * button regardless of this list.
    */
   structuralTypes?: string[]
 }
@@ -121,12 +119,11 @@ export function EditorTopBar({
   backLabel = 'Pages',
   onViewport,
   onBack,
-  onPreview,
   onViewOnSite,
+  onShare,
+  hasPublicSiteUrl,
   onHistory,
   historyOpen = false,
-  sitePreview = false,
-  onToggleSitePreview,
   onOpenSettings,
   onOpenSeo,
   seoOpen = false,
@@ -138,19 +135,16 @@ export function EditorTopBar({
   scheduleReady = true,
   scheduledAt = null,
   scheduledUnpublishAt = null,
-  structuralTypes = [],
 }: EditorTopBarProps) {
   const statusInfo = STATUS_TEXT[status]
-  // With custom section types on the page the canvas (and the eye preview,
-  // which reuses the admin renderers) only shows structure — the real design
-  // preview is the public site, so promote "View on site" to a labeled button.
-  const structural = structuralTypes.length > 0
-  const previewLabel = structural
-    ? 'Preview structure (custom sections show placeholders)'
-    : 'Preview page'
-  // For a published document the external-link button opens the LIVE page (no
-  // preview token); otherwise it opens a token-gated preview of the draft.
-  const isLive = status === 'PUBLISHED'
+  const chrome = onViewOnSite
+    ? resolveViewSiteChrome({
+        status,
+        dirty,
+        hasPublicSiteUrl: Boolean(hasPublicSiteUrl),
+        hasIdentity: true,
+      })
+    : null
 
   const publishBlocked = !canPublish || !publishReady || publishing || saveState === 'saving'
   const publishTitle = publishing
@@ -281,63 +275,68 @@ export function EditorTopBar({
           </button>
         )}
 
-        <button
-          type="button"
-          onClick={onPreview}
-          aria-label={previewLabel}
-          title={previewLabel}
-          className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
-        >
-          <Eye className="h-4 w-4" aria-hidden />
-        </button>
-
-        {onToggleSitePreview && (
-          <button
-            type="button"
-            onClick={onToggleSitePreview}
-            aria-pressed={sitePreview}
-            aria-label={sitePreview ? 'Back to editor canvas' : 'Inline site preview'}
-            title={
-              sitePreview
-                ? 'Back to editor canvas'
-                : 'Inline site preview — render the draft through your public site, in place'
-            }
-            className={`prenta-touch-target rounded-lg p-2 transition-colors ${
-              sitePreview
-                ? 'bg-primary text-primary-foreground'
-                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-            }`}
-          >
-            <Globe className="h-4 w-4" aria-hidden />
-          </button>
-        )}
-
-        {onViewOnSite &&
-          (structural ? (
+        {chrome && (
+          <>
             <button
               type="button"
-              onClick={onViewOnSite}
+              onClick={() => onViewOnSite?.(chrome.primaryIntent)}
+              disabled={!chrome.viewEnabled}
               title={
-                isLive
-                  ? 'Open the live published page in a new tab'
-                  : 'Open the draft on your public site — the real design preview'
+                chrome.viewDisabledReason ??
+                (chrome.primaryIntent === 'view-live'
+                  ? 'Open the published page in a new tab.'
+                  : 'Open the draft on your site in a new tab.')
               }
-              className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors"
+              className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
             >
               <ExternalLink className="h-3.5 w-3.5" aria-hidden />
-              {isLive ? 'View live' : 'View on site'}
+              {chrome.primaryIntent === 'view-live' ? 'View live' : 'View site'}
             </button>
-          ) : (
-            <button
-              type="button"
-              onClick={onViewOnSite}
-              aria-label={isLive ? 'View live page' : 'View draft on site'}
-              title={isLive ? 'View live page' : 'View draft on site'}
-              className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2"
-            >
-              <ExternalLink className="h-4 w-4" aria-hidden />
-            </button>
-          ))}
+            {chrome.showViewLive && (
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <button
+                    type="button"
+                    disabled={!chrome.viewEnabled}
+                    aria-label="More view options"
+                    className="prenta-touch-target border-border text-foreground hover:bg-accent inline-flex h-[34px] items-center rounded-lg border px-2 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    <ChevronDown className="h-3.5 w-3.5" aria-hidden />
+                  </button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Portal container={adminPortalContainer()}>
+                  <DropdownMenu.Content
+                    align="end"
+                    sideOffset={6}
+                    className="border-border bg-popover z-[120] rounded-[10px] border p-[5px] shadow-[0_12px_34px_rgba(26,24,39,0.17)]"
+                  >
+                    <DropdownMenu.Item
+                      onSelect={() => onViewOnSite?.('view-live')}
+                      className="hover:bg-accent focus:bg-accent cursor-pointer rounded-md px-2.5 py-1.5 text-sm outline-none"
+                    >
+                      View live
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Root>
+            )}
+            {chrome.shareVisible && onShare && (
+              <button
+                type="button"
+                onClick={onShare}
+                disabled={!chrome.viewEnabled}
+                title={
+                  chrome.viewDisabledReason ??
+                  'Copy a link so someone can view this draft without signing in.'
+                }
+                className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <Share2 className="h-3.5 w-3.5" aria-hidden />
+                Share
+              </button>
+            )}
+          </>
+        )}
 
         <button
           type="button"