@prenta/admin 1.0.0 → 1.1.0

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

@@ -1,105 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { AlertTriangle, Loader2, Pencil, X } from 'lucide-react'
-import { fetchPageForEditor, type EditorPage } from '../../lib/page-editor-service.js'
-import { SectionRenderer } from './sections/index.js'
-
-interface PagePreviewProps {
-  documentId: string
-  onNavigate: (path: string) => void
-}
-
-/**
- * Clean, chrome-free render of a page using the SAME section renderers as
- * the editor canvas — so the preview reflects what will actually ship.
- * Only visible sections are rendered (hidden sections are omitted, exactly
- * as the public page would behave).
- */
-export function PagePreview({ documentId, onNavigate }: PagePreviewProps) {
-  const [page, setPage] = useState<EditorPage | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    fetchPageForEditor(documentId)
-      .then((p) => !cancelled && setPage(p))
-      .catch((err) => !cancelled && setError(err instanceof Error ? err.message : 'Failed to load'))
-      .finally(() => !cancelled && setLoading(false))
-    return () => {
-      cancelled = true
-    }
-  }, [documentId])
-
-  if (loading) {
-    return (
-      <div className="bg-background flex h-full items-center justify-center">
-        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
-        <span className="sr-only">Loading preview…</span>
-      </div>
-    )
-  }
-
-  if (error || !page) {
-    return (
-      <div className="bg-background flex h-full items-center justify-center p-6">
-        <div className="border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4">
-          <AlertTriangle className="text-destructive shrink-0" size={20} aria-hidden />
-          <p className="text-foreground text-sm font-medium">{error ?? 'Page not found.'}</p>
-        </div>
-      </div>
-    )
-  }
-
-  const visible = page.sections.filter((s) => s.visible)
-
-  return (
-    <div className="flex h-full flex-col">
-      {/* Slim preview bar — the only chrome; the page itself renders clean.
-          This view opens in its own browser tab, so actions are tab-scoped. */}
-      <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
-        <button
-          type="button"
-          onClick={() => {
-            // Opened via the editor's "Preview" (script-opened tab) → close
-            // it. Opened by navigating to the URL directly (no opener, so
-            // `window.close()` is a no-op) → fall back to the editor so the
-            // button is never dead.
-            if (window.opener) window.close()
-            else onNavigate(`/pages/${documentId}/edit`)
-          }}
-          className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
-          aria-label="Close preview tab"
-        >
-          <X className="h-4 w-4" aria-hidden />
-          Close
-        </button>
-        <span className="text-muted-foreground text-xs">
-          Preview · {page.title || 'Untitled'} {page.path}
-        </span>
-        <button
-          type="button"
-          onClick={() => onNavigate(`/pages/${documentId}/edit`)}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
-        >
-          <Pencil className="h-3.5 w-3.5" aria-hidden />
-          Open editor
-        </button>
-      </div>
-
-      {/* The canvas is intentionally white regardless of the admin theme:
-          it emulates the public page surface, not admin chrome. */}
-      <div className="prenta-canvas bg-card flex-1 overflow-auto">
-        {visible.length === 0 ? (
-          <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
-            This page has no visible sections yet.
-          </div>
-        ) : (
-          visible.map((section) => <SectionRenderer key={section.id} section={section} />)
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,250 +0,0 @@
-'use client'
-
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { Loader2 } from 'lucide-react'
-import { injectPreviewEditChrome } from '../../lib/canvas-edit-chrome.js'
-import {
-  canvasOriginFromSrc,
-  isPreviewBridgeMessage,
-  isPreviewEditMessage,
-  isPreviewRequestMediaMessage,
-  PREVIEW_BRIDGE_VERSION,
-  PREVIEW_SECTIONS_DEBOUNCE_MS,
-  toPreviewSectionPayload,
-  type PreviewHighlightMessage,
-  type PreviewModeMessage,
-  type PreviewSectionPayload,
-  type PreviewSectionsMessage,
-} from '../../lib/preview-bridge.js'
-import { getViewport, type ViewportId } from './viewports.js'
-
-export interface CanvasEditPayload {
-  sectionId: string
-  fieldPath: string
-  value: string
-}
-
-export interface CanvasMediaRequestPayload {
-  sectionId: string
-  fieldPath: string
-}
-
-interface SitePreviewFrameProps {
-  /** Canvas draft URL; null while the preview token is still minting. */
-  src: string | null
-  viewport: ViewportId
-  /** Changing this remounts the iframe so it reloads the persisted draft. */
-  reloadKey: number
-  title?: string
-  /** Currently selected section in the editor — pushed to the canvas as a highlight. */
-  selectedId?: string | null
-  /** Live editor sections — debounced push after canvas ready (Phase 3). */
-  sections?: PreviewSectionPayload[]
-  /**
-   * Increment after a canvas-originated text edit so the next sections push is
-   * skipped (avoids remounting a focused contenteditable).
-   */
-  suppressSectionsEcho?: number
-  /** Canvas → admin: section (and optional field) clicked in the real design. */
-  onSelectSection?: (sectionId: string | null, fieldPath?: string) => void
-  /** Canvas → admin: inline text edit (Stage 3). */
-  onCanvasEdit?: (edit: CanvasEditPayload) => void
-  /** Canvas → admin: open media picker for a field (Stage 3 wave B). */
-  onCanvasRequestMedia?: (request: CanvasMediaRequestPayload) => void
-}
-
-/**
- * Inline branded preview surface — Next builder route in an iframe at the
- * selected viewport's *true* CSS width, CSS-`transform: scale()`'d to fit
- * (never crop). Stage 3: mode / edit / request-media + suppress-echo for
- * canvas-originated text edits.
- */
-export function SitePreviewFrame({
-  src,
-  viewport,
-  reloadKey,
-  title = 'Site preview',
-  selectedId = null,
-  sections,
-  suppressSectionsEcho = 0,
-  onSelectSection,
-  onCanvasEdit,
-  onCanvasRequestMedia,
-}: SitePreviewFrameProps) {
-  const vp = getViewport(viewport)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const sentinelRef = useRef<HTMLDivElement>(null)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-  const [scale, setScale] = useState(1)
-  const [frameHeight, setFrameHeight] = useState(600)
-  const [loaded, setLoaded] = useState(false)
-  const [canvasReady, setCanvasReady] = useState(false)
-  const canvasOrigin = canvasOriginFromSrc(src)
-  const lastSuppressRef = useRef(suppressSectionsEcho)
-
-  /**
-   * Measure from a zero-height sentinel, never `clientWidth - 48`.
-   *
-   * The 48 was `p-6` written down a second time, in a second unit, four
-   * hundred lines from the class it mirrors. It disagrees with reality the
-   * moment a scrollbar appears, and it rots silently if the gutter ever
-   * changes — nothing fails, the preview just scales slightly wrong.
-   *
-   * The sentinel is subject to the same padding, the same scrollbar and the
-   * same host scaling as the frame, so its `offsetWidth` IS the usable width
-   * and there is no arithmetic to get wrong. Same rule as `CanvasSurface`,
-   * which is where this was first learned; this file is the third copy of the
-   * arithmetic and the last one to go.
-   *
-   * Height still comes from the container, because the sentinel is
-   * deliberately zero-height and can say nothing about it — but it is read as
-   * `clientHeight - (clientWidth - sentinelWidth)`, deriving the vertical
-   * gutter from the measured horizontal one rather than hardcoding it again.
-   * That holds for the symmetric `p-6` this uses and degrades to the old
-   * behaviour rather than breaking if it ever stops being symmetric.
-   */
-  useLayoutEffect(() => {
-    const container = containerRef.current
-    const sentinel = sentinelRef.current
-    if (!container || !sentinel) return
-    const recompute = () => {
-      const availableW = sentinel.offsetWidth
-      if (availableW <= 0) return
-      const gutter = Math.max(0, container.clientWidth - availableW)
-      const availableH = container.clientHeight - gutter
-      const next = Math.min(1, availableW / vp.width)
-      setScale(next > 0 ? next : 1)
-      setFrameHeight(availableH > 0 ? availableH : 600)
-    }
-    recompute()
-    const ro = new ResizeObserver(recompute)
-    ro.observe(container)
-    ro.observe(sentinel)
-    return () => ro.disconnect()
-  }, [vp.width])
-
-  useEffect(() => {
-    setLoaded(false)
-    setCanvasReady(false)
-  }, [src, reloadKey])
-
-  // Canvas → admin: ready handshake + select + edit + request-media.
-  useEffect(() => {
-    if (!canvasOrigin) return
-    const onMessage = (event: MessageEvent) => {
-      if (event.origin !== canvasOrigin) return
-      if (!isPreviewBridgeMessage(event.data)) return
-      if (event.data.type === 'prenta-preview:ready') {
-        setCanvasReady(true)
-        return
-      }
-      if (event.data.type === 'prenta-preview:select' && onSelectSection) {
-        onSelectSection(event.data.sectionId, event.data.fieldPath)
-        return
-      }
-      if (isPreviewEditMessage(event.data) && onCanvasEdit) {
-        onCanvasEdit({
-          sectionId: event.data.sectionId,
-          fieldPath: event.data.fieldPath,
-          value: event.data.value,
-        })
-        return
-      }
-      if (isPreviewRequestMediaMessage(event.data) && onCanvasRequestMedia) {
-        onCanvasRequestMedia({
-          sectionId: event.data.sectionId,
-          fieldPath: event.data.fieldPath,
-        })
-      }
-    }
-    window.addEventListener('message', onMessage)
-    return () => window.removeEventListener('message', onMessage)
-  }, [canvasOrigin, onSelectSection, onCanvasEdit, onCanvasRequestMedia])
-
-  // Admin → canvas: enable inline editing once the canvas is ready.
-  useEffect(() => {
-    if (!canvasOrigin || !loaded || !canvasReady) return
-    const win = iframeRef.current?.contentWindow
-    if (!win) return
-    const msg: PreviewModeMessage = {
-      type: 'prenta-preview:mode',
-      v: PREVIEW_BRIDGE_VERSION,
-      editing: true,
-    }
-    win.postMessage(msg, canvasOrigin)
-    // Same-origin only — cross-origin previews skip silently.
-    injectPreviewEditChrome(iframeRef.current)
-  }, [canvasOrigin, loaded, canvasReady, reloadKey])
-
-  // Admin → canvas: highlight the selected section.
-  useEffect(() => {
-    if (!canvasOrigin || !loaded || !canvasReady) return
-    const win = iframeRef.current?.contentWindow
-    if (!win) return
-    const msg: PreviewHighlightMessage = {
-      type: 'prenta-preview:highlight',
-      v: PREVIEW_BRIDGE_VERSION,
-      sectionId: selectedId,
-    }
-    win.postMessage(msg, canvasOrigin)
-  }, [canvasOrigin, selectedId, loaded, canvasReady, reloadKey])
-
-  // Admin → canvas: live section content (debounced). Skip one cycle after
-  // canvas-originated text edits so contenteditable does not remount.
-  useEffect(() => {
-    if (!canvasOrigin || !loaded || !canvasReady || !sections) return
-    if (suppressSectionsEcho !== lastSuppressRef.current) {
-      lastSuppressRef.current = suppressSectionsEcho
-      return
-    }
-    const win = iframeRef.current?.contentWindow
-    if (!win) return
-    const timer = window.setTimeout(() => {
-      const msg: PreviewSectionsMessage = {
-        type: 'prenta-preview:sections',
-        v: PREVIEW_BRIDGE_VERSION,
-        sections: sections.map(toPreviewSectionPayload),
-      }
-      win.postMessage(msg, canvasOrigin)
-    }, PREVIEW_SECTIONS_DEBOUNCE_MS)
-    return () => window.clearTimeout(timer)
-  }, [canvasOrigin, loaded, canvasReady, sections, reloadKey, suppressSectionsEcho])
-
-  return (
-    <div ref={containerRef} className="bg-muted relative h-full overflow-hidden p-6">
-      {/*
-       * Zero-height sentinel — see the measurement effect above. Must stay the
-       * first child and must stay zero-height. `absolute` would defeat it: it
-       * has to sit in the padding box to inherit the gutter it is measuring.
-       */}
-      <div ref={sentinelRef} aria-hidden className="h-0" />
-      {(!src || !loaded) && (
-        <div
-          className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2"
-          aria-live="polite"
-        >
-          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
-          <span className="text-muted-foreground text-sm">Loading site preview…</span>
-        </div>
-      )}
-      {src && (
-        <div className="mx-auto" style={{ width: vp.width * scale, height: frameHeight }}>
-          <iframe
-            key={reloadKey}
-            ref={iframeRef}
-            src={src}
-            title={title}
-            onLoad={() => setLoaded(true)}
-            className="border-border bg-card rounded-xl border shadow-sm"
-            style={{
-              width: vp.width,
-              height: frameHeight / scale,
-              transform: `scale(${scale})`,
-              transformOrigin: 'top left',
-            }}
-          />
-        </div>
-      )}
-    </div>
-  )
-}

package/src/views/page-editor/useSitePreview.ts

@@ -1,158 +0,0 @@
-'use client'
-
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { toast } from 'sonner'
-import {
-  buildPublicPreviewUrl,
-  createPreviewToken,
-  resolveSiteUrl,
-} from '../../lib/preview-link.js'
-import type { SaveState } from './EditorTopBar.js'
-
-interface UseSitePreviewOptions {
-  collection: string
-  documentId?: string | null
-  slug?: string | null
-  /** Explicit public path (`data.path`); wins over slug when set. */
-  path?: string | null
-  /** Collection URL prefix (e.g. `blog`). Empty/null for top-level pages. */
-  urlPrefix?: string | null
-  /**
-   * Origin of the Next editing canvas (same host as the admin in Astro-split
-   * and 100% Next builds). Defaults to `window.location.origin` so Site
-   * preview loads the Next builder, not the Astro public apex.
-   */
-  canvasUrl?: string | null
-  /**
-   * @deprecated Prefer {@link canvasUrl}. Kept as a fallback when `canvasUrl`
-   * is unset and `window` is unavailable. "View on site" still uses the
-   * public apex via {@link buildPublicPreviewUrl} at the call site.
-   */
-  siteUrl?: string | null
-  dirty: boolean
-  saveState: SaveState
-  /** Persist the draft; resolves `false` when the save failed. */
-  saveDraft: () => Promise<boolean>
-  /** Open Site preview on load when the document is saved (has id + slug). */
-  defaultActive?: boolean
-}
-
-export interface SitePreviewState {
-  /** Whether the inline iframe preview replaces the editor canvas. */
-  active: boolean
-  /** Canvas draft URL (`/<slug>?preview=<jwt>`); null while the token mints. */
-  url: string | null
-  /** Bumped after each completed save so the iframe reloads the fresh draft. */
-  reloadKey: number
-  toggle: () => void
-}
-
-/** Prefer the Next canvas origin (admin host); fall back to siteUrl only offline. */
-function resolveCanvasOrigin(canvasUrl?: string | null, siteUrl?: string | null): string {
-  if (canvasUrl) return resolveSiteUrl(canvasUrl)
-  if (typeof window !== 'undefined' && window.location?.origin) {
-    return window.location.origin
-  }
-  return resolveSiteUrl(siteUrl)
-}
-
-/**
- * Inline branded preview — drives an in-editor iframe that renders the draft
- * through the consumer's Next builder route (same `?preview=<token>` contract
- * as "View on site"), so editors see actual site CSS without leaving the
- * admin. On Astro-split deploys the canvas is the CMS host, not the public
- * Astro apex. Saves first when dirty, and reloads the frame after each save.
- */
-export function useSitePreview({
-  collection,
-  documentId,
-  slug,
-  path,
-  urlPrefix,
-  canvasUrl,
-  siteUrl,
-  dirty,
-  saveState,
-  saveDraft,
-  defaultActive = false,
-}: UseSitePreviewOptions): SitePreviewState {
-  const [active, setActive] = useState(false)
-  const [url, setUrl] = useState<string | null>(null)
-  const [reloadKey, setReloadKey] = useState(0)
-  const tokenRef = useRef<string | null>(null)
-  const prevSaveState = useRef(saveState)
-  const autoOpenRef = useRef(false)
-
-  const activatePreview = useCallback(async () => {
-    if (!documentId || !slug) {
-      toast.error('Save the page before opening the site preview')
-      return false
-    }
-    setActive(true)
-    setUrl(null)
-    try {
-      if (dirty) {
-        const ok = await saveDraft()
-        if (!ok) {
-          setActive(false)
-          return false
-        }
-      }
-      const { token } = await createPreviewToken(collection, documentId)
-      tokenRef.current = token
-      setUrl(
-        buildPublicPreviewUrl({
-          siteUrl: resolveCanvasOrigin(canvasUrl, siteUrl),
-          urlPrefix: urlPrefix ?? '',
-          slug,
-          path,
-          token,
-        }),
-      )
-      return true
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : 'Failed to open site preview')
-      setActive(false)
-      return false
-    }
-  }, [collection, documentId, slug, path, urlPrefix, canvasUrl, siteUrl, dirty, saveDraft])
-
-  // Opt-in default: open the iframe once a saved document is loaded.
-  useEffect(() => {
-    if (!defaultActive || autoOpenRef.current) return
-    if (!documentId || !slug) return
-    autoOpenRef.current = true
-    void activatePreview()
-  }, [defaultActive, documentId, slug, activatePreview])
-
-  // After a save completes while the preview is open, rebuild the URL (the
-  // slug/path may have changed in settings — the token is bound to the document
-  // id, not the path) and reload the frame.
-  useEffect(() => {
-    if (active && prevSaveState.current === 'saving' && saveState === 'saved') {
-      if (tokenRef.current && slug) {
-        setUrl(
-          buildPublicPreviewUrl({
-            siteUrl: resolveCanvasOrigin(canvasUrl, siteUrl),
-            urlPrefix: urlPrefix ?? '',
-            slug,
-            path,
-            token: tokenRef.current,
-          }),
-        )
-      }
-      setReloadKey((k) => k + 1)
-    }
-    prevSaveState.current = saveState
-  }, [active, saveState, slug, path, canvasUrl, siteUrl, urlPrefix])
-
-  const toggle = useCallback(() => {
-    if (active) {
-      setActive(false)
-      return
-    }
-    void activatePreview()
-  }, [active, activatePreview])
-
-  return { active, url, reloadKey, toggle }
-}

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

@@ -1,125 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { AlertTriangle, Loader2, Pencil, X } from 'lucide-react'
-import {
-  fetchPostForEditor,
-  fetchTemplateForEditor,
-  type EditorPost,
-  type PostHeaderConfig,
-} from '../../lib/post-editor-service.js'
-import { defaultPostHeader } from '@prenta/core/page-sections'
-import { SectionRenderer, type PostRenderContext } from '../page-editor/sections/index.js'
-import { PostHeader } from './PostHeader.js'
-
-interface PostPreviewProps {
-  postType: string
-  documentId: string
-  session?: any
-  onNavigate: (path: string) => void
-}
-
-/**
- * Chrome-free render of a post using the same header + section renderers as
- * the editor canvas, so the preview reflects what ships. Only visible
- * sections render (hidden ones are omitted, like the public page).
- */
-export function PostPreview({ postType, documentId, session, onNavigate }: PostPreviewProps) {
-  const [post, setPost] = useState<EditorPost | null>(null)
-  const [header, setHeader] = useState<PostHeaderConfig>(defaultPostHeader())
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    fetchTemplateForEditor(postType)
-      .then((t) => !cancelled && setHeader(t.header))
-      .catch(() => {
-        /* default header */
-      })
-    fetchPostForEditor(postType, documentId)
-      .then((p) => !cancelled && setPost(p))
-      .catch((err) => !cancelled && setError(err instanceof Error ? err.message : 'Failed to load'))
-      .finally(() => !cancelled && setLoading(false))
-    return () => {
-      cancelled = true
-    }
-  }, [postType, documentId])
-
-  if (loading) {
-    return (
-      <div className="bg-background flex h-full items-center justify-center">
-        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
-        <span className="sr-only">Loading preview…</span>
-      </div>
-    )
-  }
-
-  if (error || !post) {
-    return (
-      <div className="bg-background flex h-full items-center justify-center p-6">
-        <div className="border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4">
-          <AlertTriangle className="text-destructive shrink-0" size={20} aria-hidden />
-          <p className="text-foreground text-sm font-medium">{error ?? 'Post not found.'}</p>
-        </div>
-      </div>
-    )
-  }
-
-  const context: PostRenderContext = {
-    title: post.title,
-    excerpt: post.excerpt,
-    body: post.body,
-    featuredImageUrl: post.featuredImage,
-    publishDate: post.publishDate ?? post.updatedAt ?? null,
-    category: post.category,
-    author: { name: session?.user?.name || session?.user?.email },
-  }
-  const visible = post.sections.filter((s) => s.visible)
-
-  // `window.close()` only works for tabs JS opened (the "View preview" action
-  // opens this view via window.open). When the user reached it through in-app
-  // navigation there is no opener, so close() is a silent no-op — fall back to
-  // the editor after a tick so the Close button always does something.
-  const handleClose = () => {
-    window.close()
-    setTimeout(() => {
-      onNavigate(`/posts/${postType}/${documentId}/edit`)
-    }, 120)
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      {/* Slim preview bar. This view opens in its own browser tab, so
-          actions are tab-scoped. */}
-      <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
-        <button
-          type="button"
-          onClick={handleClose}
-          className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
-          aria-label="Close preview tab"
-        >
-          <X className="h-4 w-4" aria-hidden />
-          Close
-        </button>
-        <span className="text-muted-foreground text-xs">Preview · {post.title || 'Untitled'}</span>
-        <button
-          type="button"
-          onClick={() => onNavigate(`/posts/${postType}/${documentId}/edit`)}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
-        >
-          <Pencil className="h-3.5 w-3.5" aria-hidden />
-          Open editor
-        </button>
-      </div>
-
-      <div className="prenta-canvas bg-card flex-1 overflow-auto">
-        <PostHeader config={header} context={context} />
-        {visible.map((section) => (
-          <SectionRenderer key={section.id} section={section} context={context} />
-        ))}
-      </div>
-    </div>
-  )
-}