@actuate-media/cms-admin 0.72.3 → 0.74.0

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

@@ -10,6 +10,7 @@ import {
   Loader2,
   type LucideIcon,
   Monitor,
+  Search,
   Settings2,
   Smartphone,
   Tablet,
@@ -57,6 +58,9 @@ interface EditorTopBarProps {
    */
   onToggleSitePreview?: () => void
   onOpenSettings: () => void
+  /** Open the document SEO panel (meta, social, schema, analysis). */
+  onOpenSeo?: () => void
+  seoOpen?: boolean
   onSaveDraft: () => void
   onPublish: () => void
   /**
@@ -102,6 +106,8 @@ export function EditorTopBar({
   sitePreview = false,
   onToggleSitePreview,
   onOpenSettings,
+  onOpenSeo,
+  seoOpen = false,
   onSaveDraft,
   onPublish,
   structuralTypes = [],
@@ -192,6 +198,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"
+            title="SEO — 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'
+            }`}
+          >
+            <Search className="h-4 w-4 shrink-0" aria-hidden />
+            <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 {
@@ -97,6 +98,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)
@@ -336,6 +338,7 @@ export function PageSectionEditor({
       .then((p) => {
         setPage(p)
         setSelectedId(null)
+        setSeoOpen(false)
         setDirty(false)
         setSaveState('idle')
         setValidation(null)
@@ -345,6 +348,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 +516,8 @@ export function PageSectionEditor({
           onToggleSitePreview={page.id && page.slug ? sitePreview.toggle : undefined}
           onHistory={page.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setSettingsOpen(true)}
+          onOpenSeo={handleToggleSeo}
+          seoOpen={seoOpen}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
           structuralTypes={structuralTypes}
@@ -545,12 +571,12 @@ export function PageSectionEditor({
           />
         )}
 
-        <div className="flex flex-1 overflow-hidden">
+        <div className="relative flex flex-1 overflow-hidden">
           <SectionsPanel
             sections={page.sections}
             selectedId={selectedId}
             canEdit={effectiveCanEdit}
-            onSelect={setSelectedId}
+            onSelect={handleSelectSection}
             onReorder={handleReorder}
             onToggleVisibility={handleToggleVisibility}
             onDuplicate={handleDuplicate}
@@ -571,7 +597,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 +605,7 @@ export function PageSectionEditor({
             )}
           </div>
 
-          {selected && (
+          {selected && !seoOpen && (
             <SectionInspector
               section={selected}
               canEdit={effectiveCanEdit}
@@ -590,6 +616,20 @@ export function PageSectionEditor({
               onToggleVisibility={() => handleToggleVisibility(selected.id)}
             />
           )}
+
+          {seoOpen && (
+            <EditorSeoAside
+              entityType="page"
+              entityId={page.id}
+              title={page.title}
+              seoTitle={page.seoTitle}
+              seoDescription={page.seoDescription}
+              canEdit={effectiveCanEdit}
+              onClose={() => setSeoOpen(false)}
+              onDraftChange={handlePageSettings}
+              onSaved={handleSeoSaved}
+            />
+          )}
         </div>
       </div>
 

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

@@ -19,6 +19,7 @@ import {
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js'
 import { Toggle } from '../../components/ui/Toggle.js'
 import { RichTextField } from '../../fields/RichTextField.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
@@ -46,6 +47,29 @@ interface SectionInspectorProps {
 const LABEL = 'text-foreground mb-1 block text-xs font-medium'
 const INPUT =
   'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
+
+function InspectorHeaderActions({
+  onClose,
+  closeLabel = 'Close inspector',
+}: {
+  onClose: () => void
+  closeLabel?: string
+}) {
+  return (
+    <div className="flex shrink-0 items-center gap-0.5">
+      <InspectorExpandButton />
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label={closeLabel}
+        className="text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7"
+      >
+        <X className="h-4 w-4" aria-hidden />
+      </button>
+    </div>
+  )
+}
 
 export function SectionInspector({
   section,
@@ -80,24 +104,17 @@ export function SectionInspector({
   // editable controls, so the externally-managed content is never altered here.
   if (section.unmanaged) {
     return (
-      <aside
+      <ResizableAside
         role="dialog"
         aria-label={`${section.name} (read-only)`}
-        className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
+        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>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close inspector"
-            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
-          >
-            <X className="h-4 w-4" aria-hidden />
-          </button>
+          <InspectorHeaderActions onClose={onClose} />
         </div>
         <div className="flex-1 space-y-3 overflow-y-auto p-4">
           <div className="border-border bg-muted text-muted-foreground space-y-2 rounded-md border p-3 text-sm">
@@ -119,29 +136,18 @@ export function SectionInspector({
             </p>
           </div>
         </div>
-      </aside>
+      </ResizableAside>
     )
   }
 
   return (
-    <aside
-      role="dialog"
-      aria-label={`Edit ${section.name}`}
-      className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
-    >
-      <div className="border-border flex items-center justify-between border-b px-4 py-3">
+    <ResizableAside role="dialog" aria-label={`Edit ${section.name}`} className={INSPECTOR_SHELL}>
+      <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>
         </div>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close inspector"
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
-        >
-          <X className="h-4 w-4" aria-hidden />
-        </button>
+        <InspectorHeaderActions onClose={onClose} />
       </div>
 
       <div className="flex-1 space-y-6 overflow-y-auto p-4">
@@ -316,7 +322,7 @@ export function SectionInspector({
           </div>
         </fieldset>
       </div>
-    </aside>
+    </ResizableAside>
   )
 }
 

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/PostHeaderPanel.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { X } from 'lucide-react'
+import { InspectorExpandButton, ResizableAside } from '../../components/ui/ResizableAside.js'
 import { Toggle } from '../../components/ui/Toggle.js'
 import type { PostHeaderConfig } from '../../lib/post-editor-service.js'
 
@@ -27,24 +28,27 @@ const TOGGLES: Array<{ key: keyof PostHeaderConfig; label: string }> = [
 /** Inspector panel for the post header layout (template-level design config). */
 export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHeaderPanelProps) {
   return (
-    <aside
+    <ResizableAside
       role="dialog"
       aria-label="Edit post header"
-      className="bg-card border-border flex h-full w-80 shrink-0 flex-col border-l"
+      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>
         </div>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close header panel"
-          className="text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1"
-        >
-          <X className="h-4 w-4" aria-hidden />
-        </button>
+        <div className="flex shrink-0 items-center gap-0.5">
+          <InspectorExpandButton />
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close header panel"
+            className="text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7"
+          >
+            <X className="h-4 w-4" aria-hidden />
+          </button>
+        </div>
       </div>
 
       <div className="flex-1 space-y-6 overflow-y-auto p-4">
@@ -92,6 +96,6 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
           })}
         </fieldset>
       </div>
-    </aside>
+    </ResizableAside>
   )
 }

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, 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 {
@@ -122,6 +123,7 @@ export function PostSectionEditor({
 
   const [addOpen, setAddOpen] = useState(false)
   const [fieldsOpen, setFieldsOpen] = useState(false)
+  const [seoOpen, setSeoOpen] = useState(false)
   const [historyOpen, setHistoryOpen] = useState(false)
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
@@ -386,6 +388,7 @@ export function PostSectionEditor({
       .then((p) => {
         setPost(p)
         setSelectedId(null)
+        setSeoOpen(false)
         setDirty(false)
         setSaveState('idle')
         setValidation(null)
@@ -395,6 +398,27 @@ export function PostSectionEditor({
       })
   }, [postType, post?.id])
 
+  const handleSeoSaved = useCallback(() => {
+    if (!post?.id) return
+    fetchPostForEditor(postType, post.id)
+      .then((p) => setPost(p))
+      .catch(() => {
+        /* SEO API saved; editor meta will sync on next full load */
+      })
+  }, [postType, post?.id])
+
+  const handleToggleSeo = useCallback(() => {
+    setSeoOpen((open) => {
+      if (!open) setSelectedId(null)
+      return !open
+    })
+  }, [])
+
+  const handleSelectSection = useCallback((id: string | null) => {
+    setSeoOpen(false)
+    setSelectedId(id)
+  }, [])
+
   const guardedNavigate = useCallback(
     (path: string) => {
       if (dirty) setLeaveTarget(path)
@@ -534,6 +558,8 @@ export function PostSectionEditor({
           onToggleSitePreview={post.id && post.slug ? sitePreview.toggle : undefined}
           onHistory={post.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setFieldsOpen(true)}
+          onOpenSeo={handleToggleSeo}
+          seoOpen={seoOpen}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
           structuralTypes={structuralTypes}
@@ -564,12 +590,12 @@ export function PostSectionEditor({
           />
         )}
 
-        <div className="flex flex-1 overflow-hidden">
+        <div className="relative flex flex-1 overflow-hidden">
           <SectionsPanel
             sections={post.sections}
             selectedId={selectedId}
             canEdit={canEdit}
-            onSelect={setSelectedId}
+            onSelect={handleSelectSection}
             onReorder={handleReorder}
             onToggleVisibility={handleToggleVisibility}
             onDuplicate={handleDuplicate}
@@ -592,7 +618,7 @@ export function PostSectionEditor({
                 context={context}
                 selectedId={selectedId}
                 viewport={viewport}
-                onSelect={setSelectedId}
+                onSelect={handleSelectSection}
                 onAddSection={() => setAddOpen(true)}
                 structuralTypes={structuralTypes}
                 sitePreviewAvailable={sitePreviewAvailable && !sitePreview.active}
@@ -600,7 +626,7 @@ export function PostSectionEditor({
             )}
           </div>
 
-          {selected && (
+          {selected && !seoOpen && (
             <SectionInspector
               section={selected}
               canEdit={canEdit}
@@ -613,6 +639,20 @@ export function PostSectionEditor({
               onPostBodyChange={handlePostBodyChange}
             />
           )}
+
+          {seoOpen && (
+            <EditorSeoAside
+              entityType="post"
+              entityId={post.id}
+              title={post.title}
+              seoTitle={post.seoTitle}
+              seoDescription={post.seoDescription}
+              canEdit={canEdit}
+              onClose={() => setSeoOpen(false)}
+              onDraftChange={handleFields}
+              onSaved={handleSeoSaved}
+            />
+          )}
         </div>
       </div>
 

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

@@ -248,7 +248,7 @@ export function PostTemplateEditor({
           </div>
         </header>
 
-        <div className="flex flex-1 overflow-hidden">
+        <div className="relative flex flex-1 overflow-hidden">
           <SectionsPanel
             sections={template.sections}
             selectedId={selectedSectionId}