@actuate-media/cms-admin 0.74.0 → 0.76.0

package/src/__tests__/views/seo-content-pane.render.test.tsx

@@ -65,8 +65,10 @@ vi.mock('@actuate-media/cms-core/client', async (importOriginal) => {
 vi.mock('../../lib/seo-service.js', () => ({
   fetchSeoContentRecords: () => fetchSeoContentRecords(),
   fetchSeoContentRecord: (t: string, i: string) => fetchSeoContentRecord(t, i),
+  fetchDocumentSeoAnalysis: vi.fn(async () => ({ score: 72, checks: [] })),
   updateSeoFields: (t: string, i: string, p: unknown) => updateSeoFields(t, i, p),
   generateSeoField: vi.fn(async () => ({ unavailable: true })),
+  fetchLinkSuggestions: vi.fn(async () => ({ data: { suggestions: [] } })),
   SEO_SCHEMA_TYPES: ['Article', 'WebPage'],
   applyContentSeoQuery: (
     records: Array<{ entityType: string; title: string }>,

package/src/components/EditorSeoAside.tsx

@@ -1,101 +1,48 @@
 'use client'
 
-import { useEffect } from 'react'
-import { Search, X } from 'lucide-react'
-import { SeoCharCount } from './seo/SeoCharCount.js'
+import { useEffect, useMemo } from 'react'
 import { SeoEditorPane } from './seo/SeoEditorPane.js'
-import { InspectorExpandButton, ResizableAside } from './ui/ResizableAside.js'
-
-const SEO_TITLE_MIN = 30
-const SEO_TITLE_MAX = 60
-const SEO_DESC_MIN = 120
-const SEO_DESC_MAX = 160
+import { ResizableAside } from './ui/ResizableAside.js'
+import { buildEditorContentHtml } from '../lib/editor-seo-content.js'
+import type { PageSection } from '@actuate-media/cms-core/page-sections'
 
 const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
-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'
 
 export interface EditorSeoAsideProps {
   entityType: 'page' | 'post'
-  /** Saved document id — when absent, shows a draft-only meta form. */
+  /** Saved document id — when absent, draft mode with live analysis. */
   entityId: string | null
   title: string
+  slug: string
   seoTitle: string
   seoDescription: string
+  /** Post body HTML and/or section content for live SEO analysis. */
+  sections?: PageSection[]
+  bodyHtml?: string
   canEdit: boolean
   onClose: () => void
-  /** Sync basic meta fields on the in-memory editor model (draft flow). */
   onDraftChange?: (patch: { seoTitle?: string; seoDescription?: string }) => void
-  /** Refetch the editor document after SEO API save (saved flow). */
   onSaved?: () => void
 }
 
-function DraftSeoForm({
-  title,
-  seoTitle,
-  seoDescription,
-  canEdit,
-  onDraftChange,
-}: Pick<
-  EditorSeoAsideProps,
-  'title' | 'seoTitle' | 'seoDescription' | 'canEdit' | 'onDraftChange'
->) {
-  return (
-    <div className="flex-1 space-y-4 overflow-y-auto p-4">
-      <p className="border-border bg-muted text-muted-foreground rounded-md border p-4 text-sm">
-        Save a draft first to unlock the full SEO editor — focus keyword, social previews, schema,
-        robots, and AI assists. You can still set a basic title and description below; they are
-        saved with the document.
-      </p>
-      <div>
-        <div className="mb-1 flex items-center justify-between">
-          <label className={`${LABEL} mb-0`} htmlFor="editor-seo-title">
-            SEO title
-          </label>
-          <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
-        </div>
-        <input
-          id="editor-seo-title"
-          className={INPUT}
-          value={seoTitle}
-          disabled={!canEdit}
-          placeholder={title || 'Defaults to the page title'}
-          onChange={(e) => onDraftChange?.({ seoTitle: e.target.value })}
-        />
-      </div>
-      <div>
-        <div className="mb-1 flex items-center justify-between">
-          <label className={`${LABEL} mb-0`} htmlFor="editor-seo-desc">
-            SEO description
-          </label>
-          <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
-        </div>
-        <textarea
-          id="editor-seo-desc"
-          className={`${INPUT} min-h-[96px] resize-y`}
-          value={seoDescription}
-          disabled={!canEdit}
-          placeholder="Summarize this content for search results (120–160 characters)"
-          onChange={(e) => onDraftChange?.({ seoDescription: e.target.value })}
-        />
-      </div>
-    </div>
-  )
-}
-
 /** Right-side SEO panel for the Page / Post section editors. */
 export function EditorSeoAside({
   entityType,
   entityId,
-  title,
+  slug,
   seoTitle,
   seoDescription,
-  canEdit,
+  sections = [],
+  bodyHtml = '',
   onClose,
   onDraftChange,
   onSaved,
 }: EditorSeoAsideProps) {
+  const contentHtml = useMemo(
+    () => buildEditorContentHtml(sections, bodyHtml),
+    [sections, bodyHtml],
+  )
+
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
       if (e.key === 'Escape') onClose()
@@ -106,44 +53,16 @@ export function EditorSeoAside({
 
   return (
     <ResizableAside role="dialog" aria-label="SEO settings" className={INSPECTOR_SHELL}>
-      {entityId ? (
-        <SeoEditorPane
-          entityType={entityType}
-          entityId={entityId}
-          onClose={onClose}
-          onSaved={onSaved}
-        />
-      ) : (
-        <>
-          <div className="border-border flex items-center justify-between border-b px-6 py-4">
-            <div className="flex min-w-0 items-center gap-2">
-              <Search className="text-muted-foreground h-4 w-4 shrink-0" aria-hidden />
-              <div className="min-w-0">
-                <h2 className="text-foreground truncate text-sm font-medium">SEO</h2>
-                <p className="text-muted-foreground truncate text-xs">{title || 'Untitled'}</p>
-              </div>
-            </div>
-            <div className="flex shrink-0 items-center gap-0.5">
-              <InspectorExpandButton />
-              <button
-                type="button"
-                onClick={onClose}
-                aria-label="Close SEO 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>
-          <DraftSeoForm
-            title={title}
-            seoTitle={seoTitle}
-            seoDescription={seoDescription}
-            canEdit={canEdit}
-            onDraftChange={onDraftChange}
-          />
-        </>
-      )}
+      <SeoEditorPane
+        entityType={entityType}
+        entityId={entityId}
+        slug={slug}
+        contentHtml={contentHtml}
+        draftMeta={{ seoTitle, seoDescription }}
+        onDraftChange={onDraftChange}
+        onClose={onClose}
+        onSaved={onSaved}
+      />
     </ResizableAside>
   )
 }

package/src/components/seo/EditorSeoScoreBadge.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { gradeFromScore, gradeMeta } from './primitives.js'
+
+/** Compact color-coded score for the page/post editor toolbar (`77/100` left of "SEO"). */
+export function EditorSeoScoreBadge({
+  score,
+  inverted = false,
+}: {
+  score: number
+  /** When the SEO toggle uses `bg-primary`, render score in primary-foreground. */
+  inverted?: boolean
+}) {
+  const meta = gradeMeta(gradeFromScore(score))
+  return (
+    <span
+      className={`inline-flex items-baseline gap-0.5 text-xs font-medium tabular-nums ${
+        inverted ? 'text-primary-foreground' : meta.text
+      }`}
+      aria-hidden
+    >
+      {score}
+      <span className={inverted ? 'text-primary-foreground/80' : 'opacity-70'}>/100</span>
+    </span>
+  )
+}

package/src/components/seo/SeoAccordion.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import * as Accordion from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+
+export function SeoAccordion({
+  children,
+  defaultOpen = ['focus-keyword', 'search-appearance'],
+}: {
+  children: ReactNode
+  defaultOpen?: string[]
+}) {
+  return (
+    <Accordion.Root
+      type="multiple"
+      defaultValue={defaultOpen}
+      className="divide-y divide-[var(--bdr)]"
+    >
+      {children}
+    </Accordion.Root>
+  )
+}
+
+export function SeoAccordionItem({
+  value,
+  title,
+  badge,
+  children,
+}: {
+  value: string
+  title: string
+  badge?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <Accordion.Item value={value} className="border-[var(--bdr)] bg-[var(--sb)]">
+      <Accordion.Header>
+        <Accordion.Trigger className="group flex w-full items-center justify-between gap-2 px-5 py-3.5 text-left transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none">
+          <span className="flex min-w-0 items-center gap-2">
+            <span className="text-[13px] font-medium text-[var(--txt)]">{title}</span>
+            {badge}
+          </span>
+          <ChevronDown
+            size={16}
+            aria-hidden
+            className="shrink-0 text-[var(--muted)] group-data-[state=open]:rotate-180 motion-safe:transition-transform motion-safe:duration-200"
+          />
+        </Accordion.Trigger>
+      </Accordion.Header>
+      <Accordion.Content className="overflow-hidden data-[state=closed]:hidden">
+        <div className="space-y-3 px-5 pt-1 pb-4">{children}</div>
+      </Accordion.Content>
+    </Accordion.Item>
+  )
+}
+
+export function SeoAccordionBadge({
+  tone,
+  children,
+}: {
+  tone: 'neutral' | 'good' | 'warn' | 'bad'
+  children: ReactNode
+}) {
+  const cls =
+    tone === 'good'
+      ? 'bg-[var(--suc-l)] text-[var(--suc)]'
+      : tone === 'warn'
+        ? 'bg-[var(--warn-l)] text-[var(--warn)]'
+        : tone === 'bad'
+          ? 'bg-[var(--err-l)] text-[var(--err)]'
+          : 'bg-[var(--bg)] text-[var(--sub)]'
+  return (
+    <span className={`rounded-full px-2 py-0.5 text-[10.5px] font-medium ${cls}`}>{children}</span>
+  )
+}

package/src/components/seo/SeoAnalysisList.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { AlertCircle, CheckCircle2, Sparkles, Wand2 } from 'lucide-react'
+import type { SEOCheck } from '@actuate-media/cms-core/seo/analysis'
+
+export function SeoAnalysisList({
+  checks,
+  onAiFixField,
+  aiFixField,
+}: {
+  checks: SEOCheck[]
+  onAiFixField?: (field: 'metaTitle' | 'metaDescription' | 'focusKeyword') => void
+  aiFixField?: string | null
+}) {
+  const problems = checks.filter((c) => c.status === 'problem' || c.status === 'improvement')
+  const good = checks.filter((c) => c.status === 'good')
+
+  if (checks.length === 0) {
+    return (
+      <p className="text-[12px] text-[var(--muted)]">
+        Add content and a focus keyphrase to run SEO checks.
+      </p>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {problems.length > 0 && (
+        <div>
+          <h4 className="mb-2 text-[11px] font-semibold tracking-wide text-[var(--sub)] uppercase">
+            Problems ({problems.length})
+          </h4>
+          <ul className="space-y-2">
+            {problems.map((check) => (
+              <AnalysisRow
+                key={check.id}
+                check={check}
+                onAiFix={onAiFixField}
+                aiBusy={aiFixField}
+              />
+            ))}
+          </ul>
+        </div>
+      )}
+      {good.length > 0 && (
+        <div>
+          <h4 className="mb-2 text-[11px] font-semibold tracking-wide text-[var(--sub)] uppercase">
+            Good results ({good.length})
+          </h4>
+          <ul className="space-y-2">
+            {good.map((check) => (
+              <AnalysisRow key={check.id} check={check} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AnalysisRow({
+  check,
+  onAiFix,
+  aiBusy,
+}: {
+  check: SEOCheck
+  onAiFix?: (field: 'metaTitle' | 'metaDescription' | 'focusKeyword') => void
+  aiBusy?: string | null
+}) {
+  const tone =
+    check.status === 'good'
+      ? 'text-[var(--suc)]'
+      : check.status === 'improvement'
+        ? 'text-[var(--warn)]'
+        : 'text-[var(--err)]'
+  const Icon = check.status === 'good' ? CheckCircle2 : AlertCircle
+  const aiField = aiFieldForCheck(check.id)
+
+  return (
+    <li className="flex items-start gap-2 rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-2">
+      <Icon className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${tone}`} aria-hidden />
+      <div className="min-w-0 flex-1">
+        <div className="text-[12.5px] font-medium text-[var(--txt)]">{check.title}</div>
+        <p className="text-[11.5px] text-[var(--sub)]">{check.description}</p>
+      </div>
+      {onAiFix && aiField && check.status !== 'good' && (
+        <button
+          type="button"
+          aria-label={`AI help for ${check.title}`}
+          disabled={Boolean(aiBusy)}
+          onClick={() => onAiFix(aiField)}
+          className="inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-[var(--acc)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+        >
+          {aiBusy === aiField ? (
+            <Sparkles className="h-3 w-3 animate-pulse" aria-hidden />
+          ) : (
+            <Wand2 className="h-3 w-3" aria-hidden />
+          )}
+          AI
+        </button>
+      )}
+    </li>
+  )
+}
+
+function aiFieldForCheck(checkId: string): 'metaTitle' | 'metaDescription' | 'focusKeyword' | null {
+  if (checkId.includes('meta-title') || checkId.includes('keyphrase-in-title')) return 'metaTitle'
+  if (checkId.includes('meta-description') || checkId.includes('keyphrase-in-meta-description')) {
+    return 'metaDescription'
+  }
+  if (checkId.includes('keyphrase')) return 'focusKeyword'
+  return null
+}