@actuate-media/cms-admin 0.47.0 → 0.49.0

package/src/lib/root-chrome.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import type React from 'react'
+
+/**
+ * Full-viewport overlay style shared by the admin and login mounts so the CMS
+ * UI renders above any consumer page chrome, with its own stacking context.
+ */
+export const ISOLATION_STYLE: React.CSSProperties = {
+  position: 'fixed',
+  inset: '0',
+  zIndex: 50,
+  overflow: 'auto',
+  isolation: 'isolate',
+}
+
+/**
+ * The admin (and its login screens) are private application UI and must never
+ * be indexed. Ensure a `noindex, nofollow` robots meta tag is present while
+ * mounted, as defense-in-depth alongside the server `robots.txt` Disallow
+ * rule. This covers every consumer install (the admin page is typically a
+ * client component that can't export Next.js route metadata).
+ */
+export function useRobotsNoIndex(): void {
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const prev = document.querySelector<HTMLMetaElement>('meta[name="robots"]')
+    const prevContent = prev?.getAttribute('content') ?? null
+    const meta = prev ?? document.createElement('meta')
+    meta.setAttribute('name', 'robots')
+    meta.setAttribute('content', 'noindex, nofollow')
+    if (!prev) document.head.appendChild(meta)
+    return () => {
+      if (prevContent === null) {
+        meta.remove()
+      } else {
+        meta.setAttribute('content', prevContent)
+      }
+    }
+  }, [])
+}

package/src/views/HiddenLoginNotFound.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+/**
+ * Rendered at the admin mount for signed-out visitors on split-login installs
+ * (`config.admin.loginPath` set). Mimics the framework's default 404 page so
+ * hitting `/admin` reveals nothing — no login form, no admin branding, and no
+ * redirect that would leak the real login location.
+ */
+export function HiddenLoginNotFound() {
+  return (
+    <div
+      style={{
+        fontFamily: 'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#fff',
+        color: '#000',
+        textAlign: 'center',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', lineHeight: '49px' }}>
+        <h1
+          style={{
+            display: 'inline-block',
+            margin: '0 20px 0 0',
+            paddingRight: 23,
+            fontSize: 24,
+            fontWeight: 500,
+            verticalAlign: 'top',
+            borderRight: '1px solid rgba(0, 0, 0, .3)',
+          }}
+        >
+          404
+        </h1>
+        <div style={{ display: 'inline-block' }}>
+          <h2 style={{ margin: 0, fontSize: 14, fontWeight: 400, lineHeight: '49px' }}>
+            This page could not be found.
+          </h2>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -4,6 +4,7 @@ import {
   Check,
   ExternalLink,
   Eye,
+  Globe,
   History,
   Laptop,
   Loader2,
@@ -44,6 +45,13 @@ interface EditorTopBarProps {
    * hidden — e.g. for unsaved documents that have no versions yet.
    */
   onHistory?: () => void
+  /** 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
   onSaveDraft: () => void
   onPublish: () => void
@@ -85,6 +93,8 @@ export function EditorTopBar({
   onPreview,
   onViewOnSite,
   onHistory,
+  sitePreview = false,
+  onToggleSitePreview,
   onOpenSettings,
   onSaveDraft,
   onPublish,
@@ -187,6 +197,27 @@ export function EditorTopBar({
           <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={`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 ? (
             <button

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

@@ -37,6 +37,8 @@ import { hasCanvasRenderer, useAdminSectionRenderers } from './sections/index.js
 import { EditorTopBar, type SaveState } from './EditorTopBar.js'
 import { SectionsPanel } from './SectionsPanel.js'
 import { EditorCanvas } from './EditorCanvas.js'
+import { SitePreviewFrame } from './SitePreviewFrame.js'
+import { useSitePreview } from './useSitePreview.js'
 import { SectionInspector } from './SectionInspector.js'
 import { AddSectionModal } from './AddSectionModal.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
@@ -263,6 +265,18 @@ export function PageSectionEditor({
     }
   }, [page, documentId, onNavigate])
 
+  // Inline branded preview — iframe of the public site rendering this draft.
+  const sitePreview = useSitePreview({
+    collection: 'pages',
+    documentId: page?.id,
+    slug: page?.slug,
+    urlPrefix: '',
+    siteUrl: config?.seo?.siteUrl,
+    dirty,
+    saveState,
+    saveDraft: handleSaveDraft,
+  })
+
   const requestPublish = useCallback(() => {
     if (!page) return
     const result = validatePage(page, true)
@@ -450,6 +464,8 @@ export function PageSectionEditor({
           onBack={() => guardedNavigate('/pages')}
           onPreview={handlePreview}
           onViewOnSite={page.id ? handleViewOnSite : undefined}
+          sitePreview={sitePreview.active}
+          onToggleSitePreview={page.id && page.slug ? sitePreview.toggle : undefined}
           onHistory={page.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
           onSaveDraft={handleSaveDraft}
@@ -519,14 +535,23 @@ export function PageSectionEditor({
           />
 
           <div className="flex-1 overflow-hidden">
-            <EditorCanvas
-              sections={page.sections}
-              selectedId={selectedId}
-              viewport={viewport}
-              onSelect={setSelectedId}
-              onAddSection={() => setAddOpen(true)}
-              structuralTypes={structuralTypes}
-            />
+            {sitePreview.active ? (
+              <SitePreviewFrame
+                src={sitePreview.url}
+                viewport={viewport}
+                reloadKey={sitePreview.reloadKey}
+                title={`Site preview: ${page.title || 'Untitled page'}`}
+              />
+            ) : (
+              <EditorCanvas
+                sections={page.sections}
+                selectedId={selectedId}
+                viewport={viewport}
+                onSelect={setSelectedId}
+                onAddSection={() => setAddOpen(true)}
+                structuralTypes={structuralTypes}
+              />
+            )}
           </div>
 
           {selected && (

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

@@ -0,0 +1,85 @@
+'use client'
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { Loader2 } from 'lucide-react'
+import { getViewport, type ViewportId } from './viewports.js'
+
+interface SitePreviewFrameProps {
+  /** Public 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
+}
+
+/**
+ * Inline branded preview surface — replaces the editor canvas with an iframe
+ * of the consumer's real public route rendering the draft (site CSS, real
+ * components). Sized to the selected viewport's logical width and scaled to
+ * fit the canvas column, mirroring {@link EditorCanvas}.
+ */
+export function SitePreviewFrame({
+  src,
+  viewport,
+  reloadKey,
+  title = 'Site preview',
+}: SitePreviewFrameProps) {
+  const vp = getViewport(viewport)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [scale, setScale] = useState(1)
+  const [frameHeight, setFrameHeight] = useState(600)
+  const [loaded, setLoaded] = useState(false)
+
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    const recompute = () => {
+      // 48px breathing room, matching EditorCanvas.
+      const availableW = container.clientWidth - 48
+      const availableH = container.clientHeight - 48
+      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)
+    return () => ro.disconnect()
+  }, [vp.width])
+
+  useEffect(() => {
+    setLoaded(false)
+  }, [src, reloadKey])
+
+  return (
+    <div ref={containerRef} className="bg-muted relative h-full overflow-hidden p-6">
+      {(!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}
+            src={src}
+            title={title}
+            onLoad={() => setLoaded(true)}
+            className="border-border rounded-xl border bg-white shadow-sm"
+            style={{
+              width: vp.width,
+              height: frameHeight / scale,
+              transform: `scale(${scale})`,
+              transformOrigin: 'top left',
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,117 @@
+'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
+  /** Collection URL prefix (e.g. `blog`). Empty/null for top-level pages. */
+  urlPrefix?: string | null
+  /** Raw `config.seo.siteUrl`; falls back to the current origin. */
+  siteUrl?: string | null
+  dirty: boolean
+  saveState: SaveState
+  /** Persist the draft; resolves `false` when the save failed. */
+  saveDraft: () => Promise<boolean>
+}
+
+export interface SitePreviewState {
+  /** Whether the inline iframe preview replaces the editor canvas. */
+  active: boolean
+  /** Public 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
+}
+
+/**
+ * Inline branded preview — drives an in-editor iframe that renders the draft
+ * through the consumer's REAL public route (same `?preview=<token>` contract
+ * as "View on site"), so editors see actual site CSS without leaving the
+ * admin. Saves first when dirty, and reloads the frame after each save so
+ * what you see always matches the persisted draft.
+ */
+export function useSitePreview({
+  collection,
+  documentId,
+  slug,
+  urlPrefix,
+  siteUrl,
+  dirty,
+  saveState,
+  saveDraft,
+}: 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)
+
+  // After a save completes while the preview is open, rebuild the URL (the
+  // slug 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: resolveSiteUrl(siteUrl),
+            urlPrefix: urlPrefix ?? '',
+            slug,
+            token: tokenRef.current,
+          }),
+        )
+      }
+      setReloadKey((k) => k + 1)
+    }
+    prevSaveState.current = saveState
+  }, [active, saveState, slug, siteUrl, urlPrefix])
+
+  const toggle = useCallback(() => {
+    if (active) {
+      setActive(false)
+      return
+    }
+    if (!documentId || !slug) {
+      toast.error('Save the page before opening the site preview')
+      return
+    }
+    setActive(true)
+    setUrl(null)
+    void (async () => {
+      try {
+        if (dirty) {
+          const ok = await saveDraft()
+          if (!ok) {
+            setActive(false)
+            return
+          }
+        }
+        const { token } = await createPreviewToken(collection, documentId)
+        tokenRef.current = token
+        setUrl(
+          buildPublicPreviewUrl({
+            siteUrl: resolveSiteUrl(siteUrl),
+            urlPrefix: urlPrefix ?? '',
+            slug,
+            token,
+          }),
+        )
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Failed to open site preview')
+        setActive(false)
+      }
+    })()
+  }, [active, collection, documentId, slug, urlPrefix, siteUrl, dirty, saveDraft])
+
+  return { active, url, reloadKey, toggle }
+}

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

@@ -42,6 +42,8 @@ import {
 } from '../page-editor/sections/index.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from '../page-editor/viewports.js'
 import { EditorTopBar, type SaveState } from '../page-editor/EditorTopBar.js'
+import { SitePreviewFrame } from '../page-editor/SitePreviewFrame.js'
+import { useSitePreview } from '../page-editor/useSitePreview.js'
 import { SectionsPanel } from '../page-editor/SectionsPanel.js'
 import { SectionInspector } from '../page-editor/SectionInspector.js'
 import { AddSectionModal } from '../page-editor/AddSectionModal.js'
@@ -312,6 +314,18 @@ export function PostSectionEditor({
     }
   }, [post, documentId, postType, onNavigate])
 
+  // Inline branded preview — iframe of the public site rendering this draft.
+  const sitePreview = useSitePreview({
+    collection: postType,
+    documentId: post?.id,
+    slug: post?.slug,
+    urlPrefix: config?.collections?.[postType]?.urlPrefix ?? postType,
+    siteUrl: config?.seo?.siteUrl,
+    dirty,
+    saveState,
+    saveDraft: handleSaveDraft,
+  })
+
   const requestPublish = useCallback(() => {
     if (!post) return
     const result = validatePost(post, true)
@@ -491,6 +505,8 @@ export function PostSectionEditor({
           onBack={() => guardedNavigate('/posts')}
           onPreview={handlePreview}
           onViewOnSite={post.id ? handleViewOnSite : undefined}
+          sitePreview={sitePreview.active}
+          onToggleSitePreview={post.id && post.slug ? sitePreview.toggle : undefined}
           onHistory={post.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setFieldsOpen(true)}
           onSaveDraft={handleSaveDraft}
@@ -537,16 +553,25 @@ export function PostSectionEditor({
           />
 
           <div className="flex-1 overflow-hidden">
-            <PostEditorCanvas
-              sections={post.sections}
-              header={header}
-              context={context}
-              selectedId={selectedId}
-              viewport={viewport}
-              onSelect={setSelectedId}
-              onAddSection={() => setAddOpen(true)}
-              structuralTypes={structuralTypes}
-            />
+            {sitePreview.active ? (
+              <SitePreviewFrame
+                src={sitePreview.url}
+                viewport={viewport}
+                reloadKey={sitePreview.reloadKey}
+                title={`Site preview: ${post.title || `New ${typeLabel}`}`}
+              />
+            ) : (
+              <PostEditorCanvas
+                sections={post.sections}
+                header={header}
+                context={context}
+                selectedId={selectedId}
+                viewport={viewport}
+                onSelect={setSelectedId}
+                onAddSection={() => setAddOpen(true)}
+                structuralTypes={structuralTypes}
+              />
+            )}
           </div>
 
           {selected && (