@actuate-media/cms-admin 0.73.0 → 0.75.0

package/src/components/VersionHistory.tsx

@@ -98,7 +98,7 @@ export function VersionHistory({
           aria-describedby={undefined}
           className="bg-card text-card-foreground border-border animate-in slide-in-from-right fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l shadow-xl focus:outline-none"
         >
-          <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">
               <Clock className="text-muted-foreground h-5 w-5" aria-hidden />
               <Dialog.Title className="text-foreground text-lg font-medium">

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
+}