@prenta/admin 1.0.0 → 1.2.0

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

@@ -27,18 +27,14 @@ import {
   savePageDraft,
   toggleSectionVisibility,
   updateSectionContent,
-  updateSectionContentAtPath,
   updateSectionMeta,
   validatePage,
   type EditorPage,
   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,14 +55,11 @@ 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'
+import { inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 
 interface PageSectionEditorProps {
   /** undefined when creating a new page (`/pages/new`) */
@@ -80,12 +73,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 +124,6 @@ export function PageSectionEditor({
   config,
   session,
   onNavigate,
-  onOpenPreview,
 }: PageSectionEditorProps) {
   const [page, setPage] = useState<EditorPage | null>(null)
   const [loading, setLoading] = useState(true)
@@ -146,13 +132,6 @@ export function PageSectionEditor({
   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')
   /**
@@ -165,8 +144,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,12 +212,13 @@ 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)
 
   const { canEdit, canPublish, canCreateRedirect } = useMemo(() => deriveCan(session), [session])
   const customRenderers = useAdminSectionRenderers()
-  const { siteUrl: publicSiteUrl } = usePublicSiteUrl(config?.seo?.siteUrl)
+  const { siteUrl: publicSiteUrl, matchesAdminOrigin } = usePublicSiteUrl(config?.seo?.siteUrl)
 
   // A misconfigured `pages` collection (missing the fields the editor
   // writes) would silently drop content on save — detect it up front.
@@ -579,22 +558,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)
@@ -744,39 +707,14 @@ export function PageSectionEditor({
       // rail has no close affordance at all — the chevron and the row both
       // re-select what is already selected and nothing happens.
       //
-      // Except when a fieldPath came with it: that is the site preview saying
-      // "the editor clicked THIS field", which must open and focus it. Making
-      // that toggle would close the form on the second click of a field the
-      // user is trying to edit.
+      // Except when a fieldPath came with it: a canvas field click must open
+      // and focus that input. Toggling would close the form on the second
+      // click of a field the user is trying to inspect.
       if (fieldPath) return id
       return current === id ? null : id
     })
   }, [])
 
-  // `effectiveCanEdit`, not `canEdit`: the site preview is a second editing
-  // surface, so a role check alone let it write through both the version-review
-  // lock and the builder-owned lock the rest of the editor honours.
-  const handleCanvasEdit = useCallback(
-    (edit: { sectionId: string; fieldPath: string; value: string }) => {
-      if (!effectiveCanEdit) return
-      setSuppressSectionsEcho((n) => n + 1)
-      mutateSections((s) =>
-        updateSectionContentAtPath(s, edit.sectionId, edit.fieldPath, edit.value),
-      )
-      setSelectedId(edit.sectionId)
-    },
-    [effectiveCanEdit, mutateSections],
-  )
-
-  const handleCanvasRequestMedia = useCallback(
-    (request: { sectionId: string; fieldPath: string }) => {
-      if (!effectiveCanEdit) return
-      setSelectedId(request.sectionId)
-      setCanvasMediaTarget(request)
-    },
-    [effectiveCanEdit],
-  )
-
   // After a canvas field click, focus the matching inspector input once painted.
   useEffect(() => {
     if (!pendingFocusPath || !selectedId) return
@@ -797,82 +735,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) {
@@ -945,16 +837,14 @@ 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)}
+          matchesAdminOrigin={matchesAdminOrigin}
           historyOpen={historyOpen}
           onHistory={page.id ? () => (historyOpen ? closeHistory() : openHistory()) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
@@ -1105,46 +995,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>
@@ -1179,6 +1053,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)}
@@ -1194,30 +1081,6 @@ export function PageSectionEditor({
         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)
-          // Media Replace must echo sections so the canvas image updates.
-          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/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/page-editor/sections/SectionRenderer.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Puzzle } from 'lucide-react'
+import { fieldPathFromEventTarget } from '../../../lib/preview-bridge.js'
 import type { PageSection } from '../../../lib/page-editor-service.js'
 import { ErrorBoundary } from '../../../components/ErrorBoundary.js'
 import { getSectionType } from '../section-types.js'
@@ -163,7 +164,7 @@ export interface SectionRendererProps {
    *  renders hidden sections muted instead of removing them. */
   editable?: boolean
   selected?: boolean
-  onSelect?: (id: string) => void
+  onSelect?: (id: string, fieldPath?: string) => void
   /** Lets the canvas register the DOM node for scroll-to-section. */
   registerRef?: (id: string, el: HTMLElement | null) => void
   /** Live post data for post-oriented section renderers (pages omit this). */
@@ -234,7 +235,9 @@ export function SectionRenderer({
               ? 'outline-transparent hover:outline hover:outline-[color-mix(in_oklab,var(--acc)_40%,transparent)]'
               : 'outline-transparent'
       }`}
-      onClick={interactive ? () => onSelect?.(section.id) : undefined}
+      onClick={
+        interactive ? (e) => onSelect?.(section.id, fieldPathFromEventTarget(e.target)) : undefined
+      }
       // Selection is a convenience in the editor; the section list is the
       // primary, fully-accessible control surface, so this stays a region.
       aria-label={

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

@@ -17,15 +17,13 @@ interface PostEditorCanvasProps {
   selectedId: string | null
   viewport: ViewportId
   zoom?: Zoom
-  onSelect: (id: string) => void
+  onSelect: (id: string, fieldPath?: string) => void
   onScaleChange?: (scale: number) => void
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Add-section CTA on the empty canvas. Omitted by design-owned editors. */
   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 && (