@prenta/admin 1.0.0 → 1.2.0

package/src/lib/preview-bridge.ts

@@ -1,140 +1,11 @@
 /**
- * Versioned postMessage protocol between the page editor (parent) and the
- * Next editing canvas (iframe). Namespaced with colons so it does not collide
- * with the legacy `prenta-preview-update` DocumentEdit bus.
+ * Field-path helpers shared by the editor canvas and the inspector.
  *
- * @see prenta docs/superpowers/specs/2026-07-29-visual-editing-design.md
+ * The old `prenta-preview:*` postMessage protocol is gone — View site opens a
+ * normal tab and does not talk back. `data-cms-field` on first-party section
+ * renderers still feeds the reflow guard and canvas field-focus.
  */
 
-export const PREVIEW_BRIDGE_VERSION = 1 as const
-
-/** Debounce for live section pushes while typing in the inspector. */
-export const PREVIEW_SECTIONS_DEBOUNCE_MS = 120
-
-export type PreviewBridgeMessageType =
-  | 'prenta-preview:ready'
-  | 'prenta-preview:select'
-  | 'prenta-preview:highlight'
-  | 'prenta-preview:sections'
-  | 'prenta-preview:mode'
-  | 'prenta-preview:edit'
-  | 'prenta-preview:request-media'
-
-export interface PreviewBridgeEnvelope {
-  type: PreviewBridgeMessageType
-  v: typeof PREVIEW_BRIDGE_VERSION
-}
-
-export interface PreviewReadyMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:ready'
-}
-
-export interface PreviewSelectMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:select'
-  sectionId: string
-  fieldPath?: string
-}
-
-export interface PreviewHighlightMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:highlight'
-  sectionId: string | null
-}
-
-/**
- * Opaque JSON object on the wire. Uses `object` (not `Record<string, unknown>`)
- * so concrete editor interfaces like `SectionSettings` remain assignable.
- */
-export type PreviewObjectPayload = object
-
-/** Wire shape for live canvas updates — matches `PublicSection` / editor sections. */
-export interface PreviewSectionPayload {
-  id: string
-  sectionType: string
-  name?: string
-  visible?: boolean
-  content?: PreviewObjectPayload
-  settings?: PreviewObjectPayload
-  unmanaged?: boolean
-}
-
-export interface PreviewSectionsMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:sections'
-  sections: PreviewSectionPayload[]
-}
-
-/** Admin → canvas: enable/disable inline editing affordances. */
-export interface PreviewModeMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:mode'
-  editing: boolean
-}
-
-/** Canvas → admin: text field edit from contenteditable. */
-export interface PreviewEditMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:edit'
-  sectionId: string
-  fieldPath: string
-  value: string
-}
-
-/** Canvas → admin: open media picker for an image field. */
-export interface PreviewRequestMediaMessage extends PreviewBridgeEnvelope {
-  type: 'prenta-preview:request-media'
-  sectionId: string
-  fieldPath: string
-}
-
-export type PreviewBridgeMessage =
-  | PreviewReadyMessage
-  | PreviewSelectMessage
-  | PreviewHighlightMessage
-  | PreviewSectionsMessage
-  | PreviewModeMessage
-  | PreviewEditMessage
-  | PreviewRequestMediaMessage
-
-export function isPreviewBridgeMessage(data: unknown): data is PreviewBridgeMessage {
-  if (!data || typeof data !== 'object') return false
-  const msg = data as Record<string, unknown>
-  if (msg.v !== PREVIEW_BRIDGE_VERSION) return false
-  if (typeof msg.type !== 'string' || !msg.type.startsWith('prenta-preview:')) return false
-  return true
-}
-
-export function isPreviewEditMessage(data: unknown): data is PreviewEditMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:edit') return false
-  return (
-    typeof data.sectionId === 'string' &&
-    data.sectionId.length > 0 &&
-    typeof data.fieldPath === 'string' &&
-    data.fieldPath.length > 0 &&
-    typeof data.value === 'string'
-  )
-}
-
-export function isPreviewRequestMediaMessage(data: unknown): data is PreviewRequestMediaMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:request-media') return false
-  return (
-    typeof data.sectionId === 'string' &&
-    data.sectionId.length > 0 &&
-    typeof data.fieldPath === 'string' &&
-    data.fieldPath.length > 0
-  )
-}
-
-export function isPreviewModeMessage(data: unknown): data is PreviewModeMessage {
-  if (!isPreviewBridgeMessage(data) || data.type !== 'prenta-preview:mode') return false
-  return typeof data.editing === 'boolean'
-}
-
-export function canvasOriginFromSrc(src: string | null | undefined): string | null {
-  if (!src) return null
-  try {
-    return new URL(src, typeof window !== 'undefined' ? window.location.origin : undefined).origin
-  } catch {
-    return null
-  }
-}
-
 /**
  * Map a dotted content field path (`lead`, `stats.0.num`) to the inspector
  * input id (`insp-field-lead`, `insp-field-stats-0-num`). Same string shape
@@ -181,29 +52,12 @@ export function companionDimensionPaths(fieldPath: string): {
 }
 
 /**
- * Media URL slots are not contenteditable. Prefer `data-cms-field-kind="media"`
- * on the canvas; fall back to common image field leaf names.
+ * Read `data-cms-field` from a canvas click target (or its ancestor).
+ * Used so a field click opens the accordion on the matching inspector input.
  */
-export function isMediaFieldPath(fieldPath: string, kindAttr?: string | null): boolean {
-  if (kindAttr === 'media') return true
-  if (kindAttr === 'text') return false
-  const leaf = fieldPathLeaf(fieldPath)
-  if (leaf === 'imageUrl' || leaf.endsWith('ImageUrl') || leaf === 'featuredImage') return true
-  // Gallery rows use `images.N.url` (not link CTAs).
-  return leaf === 'url' && fieldPath.includes('images.')
-}
-
-/** Strip editor chrome to the public wire shape before posting to the canvas. */
-export function toPreviewSectionPayload(
-  section: PreviewSectionPayload & { internalLabel?: string },
-): PreviewSectionPayload {
-  return {
-    id: section.id,
-    sectionType: section.sectionType,
-    name: section.name,
-    visible: section.visible,
-    content: section.content ?? {},
-    settings: section.settings ?? {},
-    unmanaged: section.unmanaged,
-  }
+export function fieldPathFromEventTarget(target: EventTarget | null): string | undefined {
+  if (!(target instanceof Element)) return undefined
+  const field = target.closest('[data-cms-field]')
+  const path = field?.getAttribute('data-cms-field')?.trim()
+  return path || undefined
 }

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

@@ -0,0 +1,46 @@
+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 const ADMIN_ORIGIN_SITE_URL_REASON =
+  'This origin is the admin, not the public site. Set the public site URL in Settings → SEO.'
+
+export function resolveViewSiteChrome(input: {
+  status: PageStatus
+  dirty: boolean
+  hasPublicSiteUrl: boolean
+  hasIdentity: boolean
+  /** True when the configured site URL is the CMS host (Astro-split misconfig). */
+  matchesAdminOrigin?: 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 usablePublicUrl = input.hasPublicSiteUrl && !input.matchesAdminOrigin
+  const viewEnabled = input.hasIdentity && usablePublicUrl
+
+  let viewDisabledReason: string | undefined
+  if (input.hasIdentity && !input.hasPublicSiteUrl) {
+    viewDisabledReason = NO_PUBLIC_SITE_URL_REASON
+  } else if (input.hasIdentity && input.matchesAdminOrigin) {
+    viewDisabledReason = ADMIN_ORIGIN_SITE_URL_REASON
+  }
+
+  return {
+    viewEnabled,
+    viewDisabledReason,
+    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/page-editor/EditorCanvas.tsx

@@ -13,12 +13,11 @@ interface EditorCanvasProps {
   selectedId: string | null
   breakpoint: BreakpointId
   zoom?: Zoom
-  onSelect: (id: string) => void
+  onSelect: (id: string, fieldPath?: string) => void
   onScaleChange?: (scale: number) => void
   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,18 @@ 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
+  /** When true, View site and Share stay disabled — the URL is the CMS host. */
+  matchesAdminOrigin?: 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 +68,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 +91,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 +121,12 @@ export function EditorTopBar({
   backLabel = 'Pages',
   onViewport,
   onBack,
-  onPreview,
   onViewOnSite,
+  onShare,
+  hasPublicSiteUrl,
+  matchesAdminOrigin,
   onHistory,
   historyOpen = false,
-  sitePreview = false,
-  onToggleSitePreview,
   onOpenSettings,
   onOpenSeo,
   seoOpen = false,
@@ -138,19 +138,17 @@ 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),
+        matchesAdminOrigin: Boolean(matchesAdminOrigin),
+        hasIdentity: true,
+      })
+    : null
 
   const publishBlocked = !canPublish || !publishReady || publishing || saveState === 'saving'
   const publishTitle = publishing
@@ -281,63 +279,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"