@actuate-media/cms-admin 0.73.0 → 0.74.0

package/src/views/SEO.tsx

@@ -15,6 +15,7 @@ import {
   ClipboardCheck,
   RefreshCw,
   Bot,
+  Link2,
 } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
@@ -30,6 +31,7 @@ import { ContentTab } from './seo/ContentTab.js'
 import { TechnicalTab } from './seo/TechnicalTab.js'
 import { RedirectsTab } from './seo/RedirectsTab.js'
 import { AuditTab } from './seo/AuditTab.js'
+import { LinksTab } from './seo/LinksTab.js'
 
 export interface SEOProps {
   onNavigate?: (path: string) => void
@@ -39,6 +41,7 @@ export interface SEOProps {
 const TABS = [
   { id: 'overview', label: 'Overview', icon: LayoutDashboard },
   { id: 'content', label: 'Content SEO', icon: FileText },
+  { id: 'links', label: 'Links', icon: Link2 },
   { id: 'technical', label: 'Technical', icon: Settings2 },
   { id: 'redirects', label: 'Redirects', icon: ArrowRightLeft },
   { id: 'audit', label: 'Audit', icon: ClipboardCheck },
@@ -212,6 +215,9 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
                 />
               )}
             </Tabs.Content>
+            <Tabs.Content value="links" tabIndex={-1}>
+              {activeTab === 'links' && <LinksTab onNavigate={onNavigate} />}
+            </Tabs.Content>
             <Tabs.Content value="technical" tabIndex={-1}>
               {activeTab === 'technical' && <TechnicalTab />}
             </Tabs.Content>

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

@@ -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}
@@ -550,7 +576,7 @@ export function PageSectionEditor({
             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

@@ -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/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>

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}
@@ -569,7 +595,7 @@ export function PostSectionEditor({
             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>