@prenta/admin 0.98.1 → 1.1.0

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { AlertTriangle, Blocks, Loader2, Lock } from 'lucide-react'
+import { AlertTriangle, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { useNavigationBlocker } from '../../router/index.js'
@@ -34,11 +34,9 @@ import {
   type ValidationResult,
 } from '../../lib/page-editor-service.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
-import {
-  buildPublicPreviewUrl,
-  buildPublicUrl,
-  createPreviewToken,
-} from '../../lib/preview-link.js'
+import { SharePreviewLinkDialog } from '../../components/SharePreviewLinkDialog.js'
+import { openPublicSiteTab } from '../../lib/open-public-site-tab.js'
+import type { ViewSiteIntent } from '../../lib/view-site-chrome.js'
 import { usePublicSiteUrl } from '../../hooks/usePublicSiteUrl.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from './viewports.js'
 import type { Zoom } from '../../lib/breakpoints.js'
@@ -59,12 +57,9 @@ import { EditorTopBar, type SaveState } from './EditorTopBar.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 { SectionEditForm } from './SectionEditForm.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
-import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
 import { buildEditorContentHtml } from '../../lib/editor-seo-content.js'
 import { companionDimensionPaths, inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 
@@ -80,12 +75,6 @@ interface PageSectionEditorProps {
   config?: any
   session?: any
   onNavigate: (path: string) => void
-  /**
-   * Open a preview route in a new browser tab. `prepare` runs before the tab
-   * navigates (used to save an unsaved draft first); returning `false` cancels
-   * the open. Falls back to in-tab navigation when not provided.
-   */
-  onOpenPreview?: (path: string, prepare?: () => Promise<boolean | void> | boolean | void) => void
 }
 
 /**
@@ -137,7 +126,6 @@ export function PageSectionEditor({
   config,
   session,
   onNavigate,
-  onOpenPreview,
 }: PageSectionEditorProps) {
   const [page, setPage] = useState<EditorPage | null>(null)
   const [loading, setLoading] = useState(true)
@@ -165,8 +153,7 @@ export function PageSectionEditor({
   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.
+   * ref because the context value has to update when it mounts.
    */
   const [canvasEl, setCanvasEl] = useState<HTMLElement | null>(null)
   /**
@@ -234,6 +221,7 @@ export function PageSectionEditor({
   const [restoring, setRestoring] = useState(false)
   const [confirmPublish, setConfirmPublish] = useState(false)
   const [scheduleOpen, setScheduleOpen] = useState(false)
+  const [shareOpen, setShareOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
@@ -415,25 +403,19 @@ export function PageSectionEditor({
   )
 
   // ─── 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.
+   * so kept accepting edits while a past version was under review. The iframe
+   * is a second editing surface, and a lock that only covers the rail is not
+   * a lock.
    */
-  const effectiveCanEdit = canEdit && !readOnly && !reviewing
+  const effectiveCanEdit = canEdit && !reviewing
   /** Restoring is not editing: it is allowed precisely while reviewing. */
-  const canRestoreVersion = canEdit && !readOnly
+  const canRestoreVersion = canEdit
 
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
@@ -585,22 +567,6 @@ export function PageSectionEditor({
     }
   }, [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({
-    collection: 'pages',
-    documentId: page?.id,
-    slug: page?.slug,
-    path: page?.path,
-    urlPrefix: '',
-    dirty,
-    saveState,
-    saveDraft: handleSaveDraft,
-    defaultActive: resolveDefaultSitePreview(config?.admin?.editor, 'pages'),
-  })
-
-  const sitePreviewAvailable = Boolean(page?.id && page?.slug)
-
   const requestPublish = useCallback(() => {
     if (!page) return
     const result = validatePage(page, true)
@@ -803,82 +769,36 @@ export function PageSectionEditor({
     [dirty, onNavigate],
   )
 
-  const handlePreview = useCallback(() => {
-    if (!page?.id) {
-      toast.error('Save the page before previewing')
-      return
-    }
-    const path = `/pages/${page.id}/preview`
-    // New-tab preview: save first when there are unsaved edits so the preview
-    // (which reads the persisted document) reflects what's on screen.
-    if (onOpenPreview) {
-      onOpenPreview(path, dirty ? handleSaveDraft : undefined)
-    } else {
-      guardedNavigate(path)
-    }
-  }, [page, dirty, onOpenPreview, handleSaveDraft, guardedNavigate])
-
-  // "View on site": render the draft through the consumer's real public route
-  // via a signed preview token. The blank tab is opened synchronously inside
-  // the click (popup-safe), then pointed at the public URL once any unsaved
-  // draft is persisted and the token is minted.
-  const handleViewOnSite = useCallback(() => {
-    if (!page?.id || !page.slug) {
-      toast.error('Save the page before viewing it on the site')
-      return
-    }
-    // Published → jump straight to the LIVE page: no preview token, no forced
-    // save. This is the fast "see it live" path. Pending edits stay previewable
-    // via the eye (canvas) and globe (inline site preview).
-    if (page.status === 'PUBLISHED') {
-      window.open(
-        buildPublicUrl({
-          siteUrl: publicSiteUrl,
-          urlPrefix: '',
-          slug: page.slug,
-          path: page.path,
-        }),
-        '_blank',
-        'noopener',
-      )
-      return
-    }
-    // Not yet public (draft / scheduled / archived) → token-gated preview of
-    // the current draft through the real front-end.
-    const tab = window.open('about:blank', '_blank')
-    if (!tab) {
-      toast.error('Enable pop-ups for this site to open the preview in a new tab.')
-      return
-    }
-    void (async () => {
-      try {
-        if (dirty) {
-          const ok = await handleSaveDraft()
-          if (!ok) {
-            tab.close()
-            return
-          }
-        }
-        const { token } = await createPreviewToken('pages', page.id!)
-        const target = buildPublicPreviewUrl({
-          siteUrl: publicSiteUrl,
-          urlPrefix: '',
-          slug: page.slug,
-          path: page.path,
-          token,
-        })
-        try {
-          tab.opener = null
-        } catch {
-          /* same-origin guard */
-        }
-        tab.location.replace(target)
-      } catch (err) {
-        tab.close()
-        toast.error(err instanceof Error ? err.message : 'Failed to open site preview')
+  const handleViewOnSite = useCallback(
+    (intent: ViewSiteIntent) => {
+      if (!page?.id || !page.slug) {
+        toast.error('Save the page before viewing it on the site')
+        return
       }
-    })()
-  }, [page, dirty, handleSaveDraft, publicSiteUrl])
+      void openPublicSiteTab({
+        intent,
+        siteUrl: publicSiteUrl,
+        collection: 'pages',
+        documentId: page.id,
+        slug: page.slug,
+        path: page.path,
+        dirty,
+        saveDraft: handleSaveDraft,
+      }).catch((err) => {
+        toast.error(err instanceof Error ? err.message : 'Failed to open the site')
+      })
+    },
+    [page, dirty, handleSaveDraft, publicSiteUrl],
+  )
+
+  const handleShare = useCallback(async () => {
+    if (!page?.id) return
+    if (dirty) {
+      const ok = await handleSaveDraft()
+      if (!ok) return
+    }
+    setShareOpen(true)
+  }, [page, dirty, handleSaveDraft])
 
   // ─── Render states ───────────────────────────────────────────────────
   if (loading) {
@@ -911,8 +831,8 @@ export function PageSectionEditor({
     )
   }
 
-  // `readOnly` / `effectiveCanEdit` / `canRestoreVersion` are computed above,
-  // with the hooks, so the callbacks defined there share this one gate.
+  // `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.
@@ -951,16 +871,13 @@ export function PageSectionEditor({
           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 })}
+          zoom={zoom}
+          canvasScale={canvasScale}
+          onZoom={setZoom}
           onBack={() => guardedNavigate('/pages')}
-          onPreview={handlePreview}
-          onViewOnSite={page.id ? handleViewOnSite : undefined}
-          sitePreview={sitePreview.active}
-          onToggleSitePreview={page.id && page.slug ? sitePreview.toggle : undefined}
+          onViewOnSite={page.id && page.slug ? handleViewOnSite : undefined}
+          onShare={page.id ? handleShare : undefined}
+          hasPublicSiteUrl={Boolean(publicSiteUrl)}
           historyOpen={historyOpen}
           onHistory={page.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
@@ -982,29 +899,6 @@ export function PageSectionEditor({
           structuralTypes={structuralTypes}
         />
 
-        {readOnly && (
-          <div
-            role="status"
-            className="border-border bg-accent/40 flex items-center gap-3 border-b px-4 py-2.5"
-          >
-            <Blocks className="text-muted-foreground shrink-0" size={16} aria-hidden />
-            <p className="text-muted-foreground flex-1 text-sm">
-              This page is built in the{' '}
-              <span className="text-foreground font-medium">Page Builder</span>. Its sections are
-              generated from the builder layout and are read-only here.
-            </p>
-            {page.id && (
-              <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"
-              >
-                Open in Page Builder
-              </button>
-            )}
-          </div>
-        )}
-
         {unmanagedTypes.length > 0 && (
           <div
             role="status"
@@ -1134,46 +1028,30 @@ export function PageSectionEditor({
             </EditorRail>
 
             <div className="flex-1 overflow-hidden">
-              {sitePreview.active ? (
-                <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}
-                />
-              ) : (
-                <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 ? (
-                      <ReviewBar
-                        version={reviewVersion}
-                        changedCount={reviewChangedIds.size}
-                        onRestore={() => void handleRestoreVersion(reviewVersion)}
-                        onBackToCurrent={() => setVersionIndex(0)}
-                        restoring={restoring}
-                        canRestore={canRestoreVersion}
-                      />
-                    ) : null
-                  }
-                />
-              )}
+              <EditorCanvas
+                sections={canvasSections}
+                selectedId={selectedId}
+                breakpoint={viewport}
+                zoom={zoom}
+                onScaleChange={setCanvasScale}
+                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>
@@ -1208,6 +1086,19 @@ export function PageSectionEditor({
         />
       )}
 
+      {page.id && (
+        <SharePreviewLinkDialog
+          collectionSlug="pages"
+          documentId={page.id}
+          documentSlug={page.slug}
+          documentPath={page.path}
+          siteUrl={publicSiteUrl}
+          urlPrefix=""
+          open={shareOpen}
+          onClose={() => setShareOpen(false)}
+        />
+      )}
+
       <ConfirmDialog
         open={leaveTarget !== null}
         onClose={() => setLeaveTarget(null)}

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

@@ -4,48 +4,12 @@ import { Puzzle } from 'lucide-react'
 
 /**
  * Banner shown above the canvas surface when the document contains section
- * types the canvas can only render as placeholders (custom / unmanaged
- * types), or when Site preview is available for accurate styling.
+ * types the canvas can only render as placeholders (custom / unmanaged types).
  */
-export function StructureNotice({
-  structuralTypes,
-  sitePreviewAvailable = false,
-}: {
-  structuralTypes: string[]
-  /** When true, nudge editors toward the Site preview toggle for WYSIWYG. */
-  sitePreviewAvailable?: boolean
-}) {
-  if (structuralTypes.length === 0 && !sitePreviewAvailable) return null
-
-  if (structuralTypes.length > 0) {
-    const count = structuralTypes.length
-    return (
-      <div
-        role="note"
-        className="border-border bg-card text-muted-foreground mx-auto mb-4 flex w-fit max-w-full items-center gap-2 rounded-lg border px-3 py-1.5 text-xs"
-      >
-        <Puzzle className="h-3.5 w-3.5 shrink-0" aria-hidden />
-        <span>
-          <span className="text-foreground font-medium">Structure view</span> — {count} custom
-          section type{count > 1 ? 's' : ''} shown as placeholders.
-          {sitePreviewAvailable ? (
-            <>
-              {' '}
-              Use <span className="text-foreground font-medium">Site preview</span> for accurate
-              styling.
-            </>
-          ) : (
-            <>
-              {' '}
-              Use <span className="text-foreground font-medium">View on site</span> for the real
-              design.
-            </>
-          )}
-        </span>
-      </div>
-    )
-  }
+export function StructureNotice({ structuralTypes }: { structuralTypes: string[] }) {
+  if (structuralTypes.length === 0) return null
 
+  const count = structuralTypes.length
   return (
     <div
       role="note"
@@ -53,8 +17,9 @@ export function StructureNotice({
     >
       <Puzzle className="h-3.5 w-3.5 shrink-0" aria-hidden />
       <span>
-        <span className="text-foreground font-medium">Structure preview</span> — use{' '}
-        <span className="text-foreground font-medium">Site preview</span> for accurate styling.
+        <span className="text-foreground font-medium">Structure view</span> — {count} custom section
+        type{count > 1 ? 's' : ''} shown as placeholders. Use{' '}
+        <span className="text-foreground font-medium">View site</span> for the real design.
       </span>
     </div>
   )

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

@@ -24,8 +24,6 @@ interface PostEditorCanvasProps {
   onAddSection?: () => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
-  /** Site preview toggle is available — show WYSIWYG nudge on the canvas. */
-  sitePreviewAvailable?: boolean
 }
 
 /**
@@ -53,7 +51,6 @@ export function PostEditorCanvas({
   onCanvasElement,
   onAddSection,
   structuralTypes = [],
-  sitePreviewAvailable = false,
 }: PostEditorCanvasProps) {
   const registerRef = useSectionRefs(selectedId)
 
@@ -67,10 +64,7 @@ export function PostEditorCanvas({
         chrome={
           <>
             {sections.length > 0 && <CanvasEditTip />}
-            <StructureNotice
-              structuralTypes={structuralTypes}
-              sitePreviewAvailable={sitePreviewAvailable}
-            />
+            <StructureNotice structuralTypes={structuralTypes} />
           </>
         }
       >
@@ -109,7 +103,7 @@ function EmptyBody({ onAddSection }: { onAddSection?: () => void }) {
       </span>
       <p className="text-muted-foreground text-sm">
         {onAddSection
-          ? 'The header is set by the template. Add body sections to build out this post. Hover sections for a light outline, click to open its editor in the section list — or use Site preview to click text and images in place.'
+          ? 'The header is set by the template. Add body sections to build out this post. Hover sections for a light outline, click to open its editor in the section list.'
           : 'This post’s template renders no body sections. Layout is design-owned — sections come from the template in code. Pick a different template in Post settings, or edit the template itself.'}
       </p>
       {onAddSection && (