@actuate-media/cms-admin 0.59.0 → 0.61.0

package/src/lib/editor-preview.ts

@@ -0,0 +1,12 @@
+import type { AdminEditorConfig } from '@actuate-media/cms-core'
+
+/** Resolve whether a section editor should open with Site preview active. */
+export function resolveDefaultSitePreview(
+  editor: AdminEditorConfig | undefined,
+  kind: 'pages' | 'posts',
+): boolean {
+  const setting = editor?.defaultSitePreview
+  if (setting === true) return true
+  if (setting == null || setting === false) return false
+  return kind === 'pages' ? setting.pages === true : setting.posts === true
+}

package/src/lib/post-editor-service.ts

@@ -220,10 +220,13 @@ export function parseTags(raw: unknown): string[] {
 
 function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
   const data = doc.data ?? {}
+  const dataTitle = dataStr(data, 'title')
   return {
     id: doc.id,
     postType,
-    title: doc.title ?? dataStr(data, 'title'),
+    // Prefer the JSON field — the denormalized `doc.title` column can lag or
+    // reflect slug-derived fallbacks on imported/legacy rows.
+    title: dataTitle || (doc.title ?? ''),
     slug: doc.slug ?? dataStr(data, 'slug'),
     excerpt: dataStr(data, 'excerpt'),
     featuredImage: dataStr(data, 'featuredImage'),

package/src/lib/seo-service.ts

@@ -817,9 +817,20 @@ export async function fetchRedirectOverview(): Promise<RedirectOverview> {
 }
 
 export async function fetchRedirectRules(): Promise<RedirectRule[]> {
-  const res = await cmsApi<{ rules: RedirectRule[] }>('/seo/redirects')
-  throwIfError(res)
-  return res.data?.rules ?? []
+  const rules: RedirectRule[] = []
+  let page = 1
+  let totalPages = 1
+  do {
+    const res = await cmsApi<{
+      rules: RedirectRule[]
+      totalPages?: number
+    }>(`/seo/redirects?page=${page}&pageSize=500`)
+    throwIfError(res)
+    rules.push(...(res.data?.rules ?? []))
+    totalPages = res.data?.totalPages ?? 1
+    page += 1
+  } while (page <= totalPages)
+  return rules
 }
 
 export interface RedirectRulePayload {

package/src/views/Users.tsx

@@ -677,7 +677,7 @@ export interface UsersProps {
 }
 
 export function Users({ embedded = false }: UsersProps = {}) {
-  const members = useApiData<ApiMember[]>('/users')
+  const members = useApiData<ApiMember[]>('/users?pageSize=200')
   const invites = useApiData<ApiInvite[]>('/invites')
   const stats = useApiData<ApiStats>('/users/stats')
   const review = useApiData<ApiRecommendation[]>('/access-review')

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

@@ -15,6 +15,7 @@ interface EditorCanvasProps {
   onAddSection: () => void
   /** Section types rendered as placeholders — shows the "Structure view" notice. */
   structuralTypes?: string[]
+  sitePreviewAvailable?: boolean
 }
 
 /**
@@ -30,6 +31,7 @@ export function EditorCanvas({
   onSelect,
   onAddSection,
   structuralTypes = [],
+  sitePreviewAvailable = false,
 }: EditorCanvasProps) {
   const vp = getViewport(viewport)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -78,7 +80,10 @@ export function EditorCanvas({
         <EmptyCanvas onAddSection={onAddSection} />
       ) : (
         <>
-          <StructureNotice structuralTypes={structuralTypes} />
+          <StructureNotice
+            structuralTypes={structuralTypes}
+            sitePreviewAvailable={sitePreviewAvailable}
+          />
           <div
             className="mx-auto"
             style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}

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

@@ -28,6 +28,10 @@ interface EditorTopBarProps {
   publishing: boolean
   canEdit: boolean
   canPublish: boolean
+  /** When false, Publish stays disabled even if the user has publish permission. */
+  publishReady?: boolean
+  /** Shown on hover/focus when publish is blocked by validation (not role). */
+  publishDisabledReason?: string
   viewport: ViewportId
   /** Breadcrumb root label + back-button text (e.g. "Pages" or "Posts"). */
   backLabel?: string
@@ -86,6 +90,8 @@ export function EditorTopBar({
   publishing,
   canEdit,
   canPublish,
+  publishReady = true,
+  publishDisabledReason,
   viewport,
   backLabel = 'Pages',
   onViewport,
@@ -109,6 +115,17 @@ export function EditorTopBar({
     ? 'Preview structure (custom sections show placeholders)'
     : 'Preview page'
 
+  const publishBlocked = !canPublish || !publishReady || publishing || saveState === 'saving'
+  const publishTitle = publishing
+    ? 'Publishing…'
+    : saveState === 'saving'
+      ? 'Wait for the current save to finish'
+      : canPublish && !publishReady && publishDisabledReason
+        ? publishDisabledReason
+        : !canPublish
+          ? 'You do not have permission to publish'
+          : undefined
+
   return (
     <header className="bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
       {/* Breadcrumb + status */}
@@ -253,7 +270,9 @@ export function EditorTopBar({
         <button
           type="button"
           onClick={onPublish}
-          disabled={!canPublish || publishing || saveState === 'saving'}
+          disabled={publishBlocked}
+          title={publishTitle}
+          aria-disabled={publishBlocked}
           className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
         >
           {publishing && <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />}

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

@@ -43,6 +43,7 @@ import { SectionInspector } from './SectionInspector.js'
 import { AddSectionModal } from './AddSectionModal.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
+import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
 
 interface PageSectionEditorProps {
   /** undefined when creating a new page (`/pages/new`) */
@@ -113,6 +114,13 @@ export function PageSectionEditor({
     )
   }, [config])
 
+  const publishCheck = useMemo(
+    () => (page ? validatePage(page, true) : { errors: [''], warnings: [] }),
+    [page],
+  )
+  const publishReady = Boolean(page) && publishCheck.errors.length === 0
+  const publishDisabledReason = publishCheck.errors[0]
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
@@ -275,8 +283,11 @@ export function PageSectionEditor({
     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)
@@ -459,6 +470,8 @@ export function PageSectionEditor({
           publishing={publishing}
           canEdit={effectiveCanEdit}
           canPublish={canPublish && effectiveCanEdit}
+          publishReady={publishReady}
+          publishDisabledReason={publishDisabledReason}
           viewport={viewport}
           onViewport={setViewport}
           onBack={() => guardedNavigate('/pages')}
@@ -550,6 +563,7 @@ export function PageSectionEditor({
                 onSelect={setSelectedId}
                 onAddSection={() => setAddOpen(true)}
                 structuralTypes={structuralTypes}
+                sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
               />
             )}
           </div>

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

@@ -5,12 +5,47 @@ 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). Tells authors the canvas is a structural view — the real design
- * lives on the public site behind "View on site".
+ * types), or when Site preview is available for accurate styling.
  */
-export function StructureNotice({ structuralTypes }: { structuralTypes: string[] }) {
-  if (structuralTypes.length === 0) return null
-  const count = structuralTypes.length
+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>
+    )
+  }
+
   return (
     <div
       role="note"
@@ -18,9 +53,8 @@ export function StructureNotice({ structuralTypes }: { structuralTypes: string[]
     >
       <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. Use{' '}
-        <span className="text-foreground font-medium">View on site</span> for the real design.
+        <span className="text-foreground font-medium">Structure preview</span> — use{' '}
+        <span className="text-foreground font-medium">Site preview</span> for accurate styling.
       </span>
     </div>
   )

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

@@ -21,6 +21,8 @@ interface UseSitePreviewOptions {
   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 {
@@ -49,12 +51,55 @@ export function useSitePreview({
   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: resolveSiteUrl(siteUrl),
+          urlPrefix: urlPrefix ?? '',
+          slug,
+          token,
+        }),
+      )
+      return true
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to open site preview')
+      setActive(false)
+      return false
+    }
+  }, [collection, documentId, slug, urlPrefix, 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 may have changed in settings — the token is bound to the document
@@ -81,37 +126,8 @@ export function useSitePreview({
       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])
+    void activatePreview()
+  }, [active, activatePreview])
 
   return { active, url, reloadKey, toggle }
 }

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

@@ -18,6 +18,8 @@ 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
 }
 
 /**
@@ -35,6 +37,7 @@ export function PostEditorCanvas({
   onSelect,
   onAddSection,
   structuralTypes = [],
+  sitePreviewAvailable = false,
 }: PostEditorCanvasProps) {
   const vp = getViewport(viewport)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -74,7 +77,10 @@ export function PostEditorCanvas({
 
   return (
     <div ref={containerRef} className="bg-muted h-full overflow-auto p-6">
-      <StructureNotice structuralTypes={structuralTypes} />
+      <StructureNotice
+        structuralTypes={structuralTypes}
+        sitePreviewAvailable={sitePreviewAvailable}
+      />
       <div
         className="mx-auto"
         style={{ width: vp.width * scale, height: surfaceHeight ?? undefined }}

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

@@ -48,6 +48,7 @@ import { SectionsPanel } from '../page-editor/SectionsPanel.js'
 import { SectionInspector } from '../page-editor/SectionInspector.js'
 import { AddSectionModal } from '../page-editor/AddSectionModal.js'
 import { ValidationSummary } from '../page-editor/ValidationSummary.js'
+import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
 import { PostEditorCanvas } from './PostEditorCanvas.js'
 import { PostFieldsModal, type PostFieldConfig } from './PostFieldsModal.js'
 
@@ -63,6 +64,7 @@ interface EditorConfig {
     | undefined
   >
   seo?: { siteUrl?: string }
+  admin?: { editor?: { defaultSitePreview?: boolean | { pages?: boolean; posts?: boolean } } }
 }
 
 /** The slice of the admin session this editor reads. */
@@ -149,6 +151,13 @@ export function PostSectionEditor({
     )
   }, [config, postType])
 
+  const publishCheck = useMemo(
+    () => (post ? validatePost(post, true) : { errors: [''], warnings: [] }),
+    [post],
+  )
+  const publishReady = Boolean(post) && publishCheck.errors.length === 0
+  const publishDisabledReason = publishCheck.errors[0]
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
@@ -324,8 +333,11 @@ export function PostSectionEditor({
     dirty,
     saveState,
     saveDraft: handleSaveDraft,
+    defaultActive: resolveDefaultSitePreview(config?.admin?.editor, 'posts'),
   })
 
+  const sitePreviewAvailable = Boolean(post?.id && post?.slug)
+
   const requestPublish = useCallback(() => {
     if (!post) return
     const result = validatePost(post, true)
@@ -499,6 +511,8 @@ export function PostSectionEditor({
           publishing={publishing}
           canEdit={canEdit}
           canPublish={canPublish && canEdit}
+          publishReady={publishReady}
+          publishDisabledReason={publishDisabledReason}
           viewport={viewport}
           backLabel="Posts"
           onViewport={setViewport}
@@ -570,6 +584,7 @@ export function PostSectionEditor({
                 onSelect={setSelectedId}
                 onAddSection={() => setAddOpen(true)}
                 structuralTypes={structuralTypes}
+                sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
               />
             )}
           </div>