@actuate-media/cms-admin 0.73.0 → 0.75.0

package/src/views/ScriptTags.tsx

@@ -236,7 +236,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
     <div className="flex h-full min-h-0 flex-col">
       <div className="p-3 pr-6 pb-0 sm:p-4 sm:pr-8 sm:pb-0">
         {error && (
-          <div className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-3">
+          <div className="border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-4">
             <AlertTriangle className="text-destructive h-5 w-5 shrink-0" />
             <span className="text-destructive flex-1 text-sm">{error}</span>
             <button
@@ -334,7 +334,7 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
       </div>
 
       <SplitPaneLayout>
-        <SplitPaneList className="p-3 pt-0 pr-6 sm:p-4 sm:pt-0 sm:pr-8">
+        <SplitPaneList className="p-4 pr-8 sm:pr-8">
           {tags.length === 0 && !error ? (
             <div className="rounded-lg border border-[var(--bdr)] bg-[var(--card)] p-12 text-center">
               <Code2 className="mx-auto mb-3 h-10 w-10 text-[var(--sub)]" />

package/src/views/Users.tsx

@@ -982,7 +982,7 @@ export function Users({ embedded = false, currentPath }: UsersProps = {}) {
 
         {/* Role filter pills */}
         <div
-          className="border-border flex flex-wrap gap-2 border-b px-4 py-3"
+          className="border-border flex flex-wrap gap-2 border-b px-6 py-4"
           role="group"
           aria-label="Filter by role"
         >

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

@@ -15,6 +15,7 @@ import {
   Tablet,
   TriangleAlert,
 } from 'lucide-react'
+import { EditorSeoScoreBadge } from '../../components/seo/EditorSeoScoreBadge.js'
 import type { PageStatus } from '../../lib/page-editor-service.js'
 import { VIEWPORTS, type ViewportId } from './viewports.js'
 
@@ -57,6 +58,11 @@ interface EditorTopBarProps {
    */
   onToggleSitePreview?: () => void
   onOpenSettings: () => void
+  /** Open the document SEO panel (meta, social, schema, analysis). */
+  onOpenSeo?: () => void
+  seoOpen?: boolean
+  /** Live 0–100 SEO score shown left of the SEO label. */
+  seoScore?: number
   onSaveDraft: () => void
   onPublish: () => void
   /**
@@ -102,6 +108,9 @@ export function EditorTopBar({
   sitePreview = false,
   onToggleSitePreview,
   onOpenSettings,
+  onOpenSeo,
+  seoOpen = false,
+  seoScore = 0,
   onSaveDraft,
   onPublish,
   structuralTypes = [],
@@ -192,6 +201,24 @@ export function EditorTopBar({
           <Settings2 className="h-4 w-4" aria-hidden />
         </button>
 
+        {onOpenSeo && (
+          <button
+            type="button"
+            onClick={onOpenSeo}
+            aria-pressed={seoOpen}
+            aria-label={`SEO, score ${seoScore} out of 100`}
+            title={`SEO — score ${seoScore}/100. Meta tags, social preview, schema, and analysis.`}
+            className={`inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors ${
+              seoOpen
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+            }`}
+          >
+            <EditorSeoScoreBadge score={seoScore} inverted={seoOpen} />
+            <span className="hidden sm:inline">SEO</span>
+          </button>
+        )}
+
         {onHistory && (
           <button
             type="button"

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, Blocks, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { EditorSeoAside } from '../../components/EditorSeoAside.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistory } from '../../components/VersionHistory.js'
 import {
@@ -44,6 +45,7 @@ import { AddSectionModal } from './AddSectionModal.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
 import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
+import { computeLiveSeoScore } from '../../lib/editor-seo-content.js'
 
 interface PageSectionEditorProps {
   /** undefined when creating a new page (`/pages/new`) */
@@ -97,6 +99,7 @@ export function PageSectionEditor({
 
   const [addOpen, setAddOpen] = useState(false)
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const [seoOpen, setSeoOpen] = useState(false)
   const [historyOpen, setHistoryOpen] = useState(false)
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
@@ -126,6 +129,17 @@ export function PageSectionEditor({
     [page],
   )
   const publishReady = Boolean(page) && publishCheck.errors.length === 0
+
+  const liveSeoScore = useMemo(() => {
+    if (!page) return 0
+    return computeLiveSeoScore({
+      title: page.title,
+      slug: page.slug,
+      seoTitle: page.seoTitle,
+      seoDescription: page.seoDescription,
+      sections: page.sections,
+    })
+  }, [page])
   const publishDisabledReason = publishCheck.errors[0]
 
   // ─── Load ──────────────────────────────────────────────────────────
@@ -336,6 +350,7 @@ export function PageSectionEditor({
       .then((p) => {
         setPage(p)
         setSelectedId(null)
+        setSeoOpen(false)
         setDirty(false)
         setSaveState('idle')
         setValidation(null)
@@ -345,6 +360,27 @@ export function PageSectionEditor({
       })
   }, [page?.id])
 
+  const handleSeoSaved = useCallback(() => {
+    if (!page?.id) return
+    fetchPageForEditor(page.id)
+      .then((p) => setPage(p))
+      .catch(() => {
+        /* SEO API saved; editor meta will sync on next full load */
+      })
+  }, [page?.id])
+
+  const handleToggleSeo = useCallback(() => {
+    setSeoOpen((open) => {
+      if (!open) setSelectedId(null)
+      return !open
+    })
+  }, [])
+
+  const handleSelectSection = useCallback((id: string | null) => {
+    setSeoOpen(false)
+    setSelectedId(id)
+  }, [])
+
   // ─── Navigation with unsaved guard ───────────────────────────────────
   const guardedNavigate = useCallback(
     (path: string) => {
@@ -492,6 +528,9 @@ export function PageSectionEditor({
           onToggleSitePreview={page.id && page.slug ? sitePreview.toggle : undefined}
           onHistory={page.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
+          onOpenSeo={handleToggleSeo}
+          seoOpen={seoOpen}
+          seoScore={liveSeoScore}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
           structuralTypes={structuralTypes}
@@ -550,7 +589,7 @@ export function PageSectionEditor({
             sections={page.sections}
             selectedId={selectedId}
             canEdit={effectiveCanEdit}
-            onSelect={setSelectedId}
+            onSelect={handleSelectSection}
             onReorder={handleReorder}
             onToggleVisibility={handleToggleVisibility}
             onDuplicate={handleDuplicate}
@@ -571,7 +610,7 @@ export function PageSectionEditor({
                 sections={page.sections}
                 selectedId={selectedId}
                 viewport={viewport}
-                onSelect={setSelectedId}
+                onSelect={handleSelectSection}
                 onAddSection={() => setAddOpen(true)}
                 structuralTypes={structuralTypes}
                 sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
@@ -579,7 +618,7 @@ export function PageSectionEditor({
             )}
           </div>
 
-          {selected && (
+          {selected && !seoOpen && (
             <SectionInspector
               section={selected}
               canEdit={effectiveCanEdit}
@@ -590,6 +629,22 @@ export function PageSectionEditor({
               onToggleVisibility={() => handleToggleVisibility(selected.id)}
             />
           )}
+
+          {seoOpen && (
+            <EditorSeoAside
+              entityType="page"
+              entityId={page.id}
+              title={page.title}
+              slug={page.slug}
+              seoTitle={page.seoTitle}
+              seoDescription={page.seoDescription}
+              sections={page.sections}
+              canEdit={effectiveCanEdit}
+              onClose={() => setSeoOpen(false)}
+              onDraftChange={handlePageSettings}
+              onSaved={handleSeoSaved}
+            />
+          )}
         </div>
       </div>
 

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

@@ -4,15 +4,9 @@ import { useEffect, useRef, useState } from 'react'
 import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
-import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 import { cmsApi } from '../../lib/api.js'
 import type { EditorPage } from '../../lib/page-editor-service.js'
 
-const SEO_TITLE_MIN = 30
-const SEO_TITLE_MAX = 60
-const SEO_DESC_MIN = 120
-const SEO_DESC_MAX = 160
-
 interface PageSettingsModalProps {
   open: boolean
   page: EditorPage
@@ -32,7 +26,7 @@ interface ParentOption {
   title: string
 }
 
-/** Edits page-level fields: title, slug, path, parent page, and SEO. */
+/** Edits page-level fields: title, slug, path, and parent page. SEO lives in the SEO tab. */
 export function PageSettingsModal({
   open,
   page,
@@ -44,8 +38,6 @@ export function PageSettingsModal({
   const [slug, setSlug] = useState(page.slug)
   const [path, setPath] = useState(page.path)
   const [parentPageId, setParentPageId] = useState(page.parentPageId ?? '')
-  const [seoTitle, setSeoTitle] = useState(page.seoTitle)
-  const [seoDescription, setSeoDescription] = useState(page.seoDescription)
   // Auto-derive slug/path from title until the user edits slug manually.
   const [slugTouched, setSlugTouched] = useState(Boolean(page.slug))
   const [parentOptions, setParentOptions] = useState<ParentOption[] | null>(null)
@@ -59,8 +51,6 @@ export function PageSettingsModal({
     setSlug(page.slug)
     setPath(page.path)
     setParentPageId(page.parentPageId ?? '')
-    setSeoTitle(page.seoTitle)
-    setSeoDescription(page.seoDescription)
     setSlugTouched(Boolean(page.slug))
   }, [open, page])
 
@@ -110,8 +100,6 @@ export function PageSettingsModal({
       slug,
       path: path || (slug ? `/${slug}` : '/'),
       parentPageId: parentPageId || null,
-      seoTitle,
-      seoDescription,
     })
     onClose()
   }
@@ -231,38 +219,6 @@ export function PageSettingsModal({
             Nests this page under a parent in the Pages tree view.
           </p>
         </div>
-        <div>
-          <div className="mb-1 flex items-center justify-between">
-            <label className={`${LABEL} mb-0`} htmlFor="ps-seo-title">
-              SEO title
-            </label>
-            <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
-          </div>
-          <input
-            id="ps-seo-title"
-            className={INPUT}
-            value={seoTitle}
-            disabled={!canEdit}
-            placeholder={title || 'Defaults to the page title'}
-            onChange={(e) => setSeoTitle(e.target.value)}
-          />
-        </div>
-        <div>
-          <div className="mb-1 flex items-center justify-between">
-            <label className={`${LABEL} mb-0`} htmlFor="ps-seo-desc">
-              SEO description
-            </label>
-            <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
-          </div>
-          <textarea
-            id="ps-seo-desc"
-            className={`${INPUT} min-h-[64px] resize-y`}
-            value={seoDescription}
-            disabled={!canEdit}
-            placeholder="Summarize the page for search results (120–160 characters)"
-            onChange={(e) => setSeoDescription(e.target.value)}
-          />
-        </div>
       </form>
     </Modal>
   )

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

@@ -109,7 +109,7 @@ export function SectionInspector({
         aria-label={`${section.name} (read-only)`}
         className={INSPECTOR_SHELL}
       >
-        <div className="border-border flex items-center justify-between border-b px-4 py-3">
+        <div className="border-border flex items-center justify-between border-b px-6 py-4">
           <div className="min-w-0">
             <h2 className="text-foreground truncate text-sm font-medium">{section.name}</h2>
             <p className="text-muted-foreground text-xs">Managed outside the editor</p>
@@ -142,7 +142,7 @@ export function SectionInspector({
 
   return (
     <ResizableAside role="dialog" aria-label={`Edit ${section.name}`} className={INSPECTOR_SHELL}>
-      <div className="border-border flex items-center justify-between border-b px-4 py-3">
+      <div className="border-border flex items-center justify-between border-b px-6 py-4">
         <div className="min-w-0">
           <h2 className="text-foreground truncate text-sm font-medium">{section.name}</h2>
           <p className="text-muted-foreground text-xs">{def?.name ?? 'Section'}</p>

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

@@ -78,7 +78,7 @@ export function SectionsPanel({
       className="bg-card border-border flex h-full w-72 shrink-0 flex-col border-r"
       aria-label="Page sections"
     >
-      <div className="border-border flex items-center justify-between border-b px-4 py-3">
+      <div className="border-border flex items-center justify-between border-b px-6 py-4">
         <div className="flex items-center gap-2">
           <h2 className="text-foreground text-sm font-medium">Sections</h2>
           <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium tabular-nums">

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

@@ -9,16 +9,9 @@ import { Button } from '../../components/ui/Button.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 import { TagInput } from '../../components/TagInput.js'
-import { SeoCharCount } from '../../components/seo/SeoCharCount.js'
 import { coauthorText } from '../../lib/coauthor-client.js'
-import { generateSeoField } from '../../lib/seo-service.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
-const SEO_TITLE_MIN = 30
-const SEO_TITLE_MAX = 60
-const SEO_DESC_MIN = 120
-const SEO_DESC_MAX = 160
-
 /**
  * The slice of a collection's field config the modal reads to pick controls:
  * a `select` category renders a dropdown (structured vocabulary), an `array`
@@ -47,8 +40,6 @@ const INPUT =
 
 const slugify = normalizeSlug
 
-type AiTarget = 'excerpt' | 'seoTitle' | 'seoDescription'
-
 type FormSnapshot = {
   title: string
   slug: string
@@ -56,8 +47,6 @@ type FormSnapshot = {
   featuredImage: string
   category: string
   tags: string
-  seoTitle: string
-  seoDescription: string
 }
 
 function snapshotFromPost(post: EditorPost): FormSnapshot {
@@ -68,8 +57,6 @@ function snapshotFromPost(post: EditorPost): FormSnapshot {
     featuredImage: post.featuredImage,
     category: post.category,
     tags: [...post.tags].sort().join('\0'),
-    seoTitle: post.seoTitle,
-    seoDescription: post.seoDescription,
   }
 }
 
@@ -80,8 +67,6 @@ function snapshotFromFields(input: {
   featuredImage: string
   category: string
   tags: string[]
-  seoTitle: string
-  seoDescription: string
 }): FormSnapshot {
   return {
     ...input,
@@ -132,7 +117,7 @@ function AiFieldButton({
   )
 }
 
-/** Edits post metadata: title, slug, excerpt, featured image, category, tags, SEO. */
+/** Edits post metadata: title, slug, excerpt, featured image, category, and tags. SEO lives in the SEO tab. */
 export function PostFieldsModal({
   open,
   post,
@@ -147,11 +132,9 @@ export function PostFieldsModal({
   const [featuredImage, setFeaturedImage] = useState(post.featuredImage)
   const [category, setCategory] = useState(post.category)
   const [tags, setTags] = useState<string[]>(post.tags)
-  const [seoTitle, setSeoTitle] = useState(post.seoTitle)
-  const [seoDescription, setSeoDescription] = useState(post.seoDescription)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
   const [mediaOpen, setMediaOpen] = useState(false)
-  const [aiBusy, setAiBusy] = useState<AiTarget | null>(null)
+  const [aiBusy, setAiBusy] = useState(false)
   const [confirmDiscard, setConfirmDiscard] = useState(false)
   const baselineRef = useRef<FormSnapshot | null>(null)
   // Land the user in the Title field (name-it-first flow for new posts).
@@ -177,10 +160,8 @@ export function PostFieldsModal({
     setFeaturedImage(post.featuredImage)
     setCategory(post.category)
     setTags(post.tags)
-    setSeoTitle(post.seoTitle)
-    setSeoDescription(post.seoDescription)
     setSlugTouched(Boolean(post.slug))
-    setAiBusy(null)
+    setAiBusy(false)
     baselineRef.current = snapshotFromPost(post)
   }, [open, post])
 
@@ -193,11 +174,9 @@ export function PostFieldsModal({
       featuredImage,
       category,
       tags,
-      seoTitle,
-      seoDescription,
     })
     return JSON.stringify(current) !== JSON.stringify(baselineRef.current)
-  }, [open, title, slug, excerpt, featuredImage, category, tags, seoTitle, seoDescription])
+  }, [open, title, slug, excerpt, featuredImage, category, tags])
 
   function requestDismiss() {
     if (isDirty) {
@@ -214,7 +193,7 @@ export function PostFieldsModal({
 
   const slugError = validateSlug(slug)
 
-  async function handleAiGenerate(target: AiTarget) {
+  async function handleAiGenerateExcerpt() {
     const context = buildContentContext(title, post.body, excerpt)
     if (!context.trim()) {
       toast.error(
@@ -223,77 +202,29 @@ export function PostFieldsModal({
       return
     }
 
-    setAiBusy(target)
+    setAiBusy(true)
     try {
-      if (target === 'excerpt') {
-        const outcome = await coauthorText('compress', context, {
-          instructions:
-            'Write a 1–2 sentence excerpt for blog listings and cards. Return only the excerpt text.',
-          targetLength: 45,
-        })
-        if (!outcome.ok) {
-          toast.error(outcome.error)
-          return
-        }
-        setExcerpt(outcome.result.text.trim())
-        toast.success('Excerpt generated — review before saving.')
+      const outcome = await coauthorText('compress', context, {
+        instructions:
+          'Write a 1–2 sentence excerpt for blog listings and cards. Return only the excerpt text.',
+        targetLength: 45,
+      })
+      if (!outcome.ok) {
+        toast.error(outcome.error)
         return
       }
-
-      if (post.id) {
-        const field = target === 'seoTitle' ? 'metaTitle' : 'metaDescription'
-        const result = await generateSeoField(field, {
-          entityType: post.postType,
-          entityId: post.id,
-        })
-        if (result.unavailable) {
-          toast.error('AI is not configured. Add an AI provider to enable suggestions.')
-          return
-        }
-        if (result.text) {
-          if (target === 'seoTitle') setSeoTitle(result.text)
-          else setSeoDescription(result.text)
-          toast.success('AI suggestion applied — review before saving.')
-        } else {
-          toast.error('No suggestion was returned.')
-        }
-        return
-      }
-
-      if (target === 'seoTitle') {
-        const outcome = await coauthorText('rewrite', context, {
-          style: 'seo-optimized',
-          instructions:
-            'Write a single SEO page title under 60 characters. Return only the title — no quotes.',
-        })
-        if (!outcome.ok) {
-          toast.error(outcome.error)
-          return
-        }
-        setSeoTitle(outcome.result.text.trim().slice(0, SEO_TITLE_MAX))
-      } else {
-        const outcome = await coauthorText('compress', context, {
-          instructions:
-            'Write a compelling SEO meta description of 120–160 characters for search results. Return only the description.',
-          targetLength: 155,
-        })
-        if (!outcome.ok) {
-          toast.error(outcome.error)
-          return
-        }
-        setSeoDescription(outcome.result.text.trim().slice(0, SEO_DESC_MAX))
-      }
-      toast.success('AI suggestion applied — review before saving.')
+      setExcerpt(outcome.result.text.trim())
+      toast.success('Excerpt generated — review before saving.')
     } catch {
       toast.error('AI request failed.')
     } finally {
-      setAiBusy(null)
+      setAiBusy(false)
     }
   }
 
   function handleSave() {
     if (slugError) return
-    onSave({ title, slug, excerpt, featuredImage, category, tags, seoTitle, seoDescription })
+    onSave({ title, slug, excerpt, featuredImage, category, tags })
     onClose()
   }
 
@@ -421,9 +352,9 @@ export function PostFieldsModal({
               </label>
               <AiFieldButton
                 label="Generate excerpt from content"
-                busy={aiBusy === 'excerpt'}
+                busy={aiBusy}
                 disabled={!canEdit}
-                onClick={() => void handleAiGenerate('excerpt')}
+                onClick={() => void handleAiGenerateExcerpt()}
               />
             </div>
             <textarea
@@ -464,56 +395,6 @@ export function PostFieldsModal({
               </div>
             )}
           </div>
-
-          <div>
-            <div className="mb-1 flex items-center justify-between gap-2">
-              <div className="flex min-w-0 items-center gap-2">
-                <label className={`${LABEL} mb-0`} htmlFor="pf-seo-title">
-                  SEO title
-                </label>
-                <AiFieldButton
-                  label="Generate SEO title from content"
-                  busy={aiBusy === 'seoTitle'}
-                  disabled={!canEdit}
-                  onClick={() => void handleAiGenerate('seoTitle')}
-                />
-              </div>
-              <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
-            </div>
-            <input
-              id="pf-seo-title"
-              className={INPUT}
-              value={seoTitle}
-              disabled={!canEdit}
-              placeholder={title || 'Defaults to the post title'}
-              onChange={(e) => setSeoTitle(e.target.value)}
-            />
-          </div>
-
-          <div>
-            <div className="mb-1 flex items-center justify-between gap-2">
-              <div className="flex min-w-0 items-center gap-2">
-                <label className={`${LABEL} mb-0`} htmlFor="pf-seo-desc">
-                  SEO description
-                </label>
-                <AiFieldButton
-                  label="Generate SEO description from content"
-                  busy={aiBusy === 'seoDescription'}
-                  disabled={!canEdit}
-                  onClick={() => void handleAiGenerate('seoDescription')}
-                />
-              </div>
-              <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
-            </div>
-            <textarea
-              id="pf-seo-desc"
-              className={`${INPUT} min-h-[72px] resize-y`}
-              value={seoDescription}
-              disabled={!canEdit}
-              placeholder={excerpt || 'Summarize the post for search results (120–160 characters)'}
-              onChange={(e) => setSeoDescription(e.target.value)}
-            />
-          </div>
         </div>
       </Modal>
 

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

@@ -33,7 +33,7 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
       aria-label="Edit post header"
       className="bg-card border-border flex h-full flex-col border-l"
     >
-      <div className="border-border flex items-center justify-between border-b px-4 py-3">
+      <div className="border-border flex items-center justify-between border-b px-6 py-4">
         <div className="min-w-0">
           <h2 className="text-foreground truncate text-sm font-medium">Post header</h2>
           <p className="text-muted-foreground text-xs">Layout for every post of this type</p>