@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/components/SEOPanel.tsx

@@ -1,7 +1,7 @@
-'use client';
+'use client'
 
-import * as Select from '@radix-ui/react-select';
-import { useState, useMemo } from 'react';
+import * as Select from '@radix-ui/react-select'
+import { useState, useMemo } from 'react'
 import {
   Search,
   RefreshCw,
@@ -19,84 +19,92 @@ import {
   XCircle,
   BarChart3,
   Star,
-} from 'lucide-react';
+} from 'lucide-react'
 
 export interface SEOData {
-  metaTitle?: string;
-  metaDescription?: string;
-  focusKeyphrase?: string;
-  canonical?: string;
-  robotsPolicy?: 'inherit' | 'index-follow' | 'noindex-follow' | 'index-nofollow' | 'noindex-nofollow';
-  noIndex?: boolean;
-  noFollow?: boolean;
-  ogTitle?: string;
-  ogDescription?: string;
-  ogImage?: string;
-  twitterTitle?: string;
-  twitterDescription?: string;
-  twitterImage?: string;
-  isCornerstone?: boolean;
-  schemaType?: string;
+  metaTitle?: string
+  metaDescription?: string
+  focusKeyphrase?: string
+  canonical?: string
+  robotsPolicy?:
+    | 'inherit'
+    | 'index-follow'
+    | 'noindex-follow'
+    | 'index-nofollow'
+    | 'noindex-nofollow'
+  noIndex?: boolean
+  noFollow?: boolean
+  ogTitle?: string
+  ogDescription?: string
+  ogImage?: string
+  twitterTitle?: string
+  twitterDescription?: string
+  twitterImage?: string
+  isCornerstone?: boolean
+  schemaType?: string
 }
 
 export interface SEOPanelProps {
-  title: string;
-  slug: string;
-  content?: string;
-  seoData: SEOData;
-  onChange: (data: SEOData) => void;
-  siteUrl?: string;
+  title: string
+  slug: string
+  content?: string
+  seoData: SEOData
+  onChange: (data: SEOData) => void
+  siteUrl?: string
 }
 
-const ROBOTS_POLICY_OPTIONS: Array<{ value: NonNullable<SEOData['robotsPolicy']>; label: string }> = [
-  { value: 'inherit', label: 'Inherit site default' },
-  { value: 'index-follow', label: 'Force index, follow' },
-  { value: 'noindex-follow', label: 'Force noindex, follow' },
-  { value: 'index-nofollow', label: 'Force index, nofollow' },
-  { value: 'noindex-nofollow', label: 'Force noindex, nofollow' },
-];
+const ROBOTS_POLICY_OPTIONS: Array<{ value: NonNullable<SEOData['robotsPolicy']>; label: string }> =
+  [
+    { value: 'inherit', label: 'Inherit site default' },
+    { value: 'index-follow', label: 'Force index, follow' },
+    { value: 'noindex-follow', label: 'Force noindex, follow' },
+    { value: 'index-nofollow', label: 'Force index, nofollow' },
+    { value: 'noindex-nofollow', label: 'Force noindex, nofollow' },
+  ]
 
 function getRobotsPolicy(seoData: SEOData): NonNullable<SEOData['robotsPolicy']> {
-  if (seoData.robotsPolicy) return seoData.robotsPolicy;
+  if (seoData.robotsPolicy) return seoData.robotsPolicy
   if (typeof seoData.noIndex === 'boolean' || typeof seoData.noFollow === 'boolean') {
-    const noIndex = seoData.noIndex === true;
-    const noFollow = seoData.noFollow === true;
-    if (noIndex && noFollow) return 'noindex-nofollow';
-    if (noIndex) return 'noindex-follow';
-    if (noFollow) return 'index-nofollow';
-    return 'index-follow';
+    const noIndex = seoData.noIndex === true
+    const noFollow = seoData.noFollow === true
+    if (noIndex && noFollow) return 'noindex-nofollow'
+    if (noIndex) return 'noindex-follow'
+    if (noFollow) return 'index-nofollow'
+    return 'index-follow'
   }
-  return 'inherit';
+  return 'inherit'
 }
 
-function robotsPolicyToBooleans(policy: NonNullable<SEOData['robotsPolicy']>): Pick<SEOData, 'noIndex' | 'noFollow'> {
+function robotsPolicyToBooleans(
+  policy: NonNullable<SEOData['robotsPolicy']>,
+): Pick<SEOData, 'noIndex' | 'noFollow'> {
   switch (policy) {
     case 'index-follow':
-      return { noIndex: false, noFollow: false };
+      return { noIndex: false, noFollow: false }
     case 'noindex-follow':
-      return { noIndex: true, noFollow: false };
+      return { noIndex: true, noFollow: false }
     case 'index-nofollow':
-      return { noIndex: false, noFollow: true };
+      return { noIndex: false, noFollow: true }
     case 'noindex-nofollow':
-      return { noIndex: true, noFollow: true };
+      return { noIndex: true, noFollow: true }
     default:
-      return { noIndex: undefined, noFollow: undefined };
+      return { noIndex: undefined, noFollow: undefined }
   }
 }
 
 interface SEOCheck {
-  id: string;
-  label: string;
-  status: 'good' | 'ok' | 'bad';
-  detail: string;
+  id: string
+  label: string
+  status: 'good' | 'ok' | 'bad'
+  detail: string
 }
 
 interface ReadabilityResult {
-  fleschScore: number;
-  avgSentenceLength: number;
-  wordCount: number;
-  readingTime: number;
-  passiveEstimate: number;
+  fleschScore: number
+  avgSentenceLength: number
+  wordCount: number
+  readingTime: number
+  passiveEstimate: number
 }
 
 const SCHEMA_TYPES = [
@@ -109,216 +117,284 @@ const SCHEMA_TYPES = [
   'LocalBusiness',
   'HowTo',
   'Recipe',
-] as const;
+] as const
 
 function stripHtml(html: string): string {
-  return html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
+  return html
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
 }
 
 function countWords(text: string): number {
-  if (!text.trim()) return 0;
-  return text.trim().split(/\s+/).length;
+  if (!text.trim()) return 0
+  return text.trim().split(/\s+/).length
 }
 
 function countSentences(text: string): number {
-  if (!text.trim()) return 0;
-  const matches = text.match(/[.!?]+/g);
-  return matches ? matches.length : 1;
+  if (!text.trim()) return 0
+  const matches = text.match(/[.!?]+/g)
+  return matches ? matches.length : 1
 }
 
 function countSyllables(word: string): number {
-  const w = word.toLowerCase().replace(/[^a-z]/g, '');
-  if (w.length <= 3) return 1;
-  let count = 0;
-  const vowels = 'aeiouy';
-  let prevVowel = false;
+  const w = word.toLowerCase().replace(/[^a-z]/g, '')
+  if (w.length <= 3) return 1
+  let count = 0
+  const vowels = 'aeiouy'
+  let prevVowel = false
   for (let i = 0; i < w.length; i++) {
-    const isVowel = vowels.includes(w[i] ?? '');
-    if (isVowel && !prevVowel) count++;
-    prevVowel = isVowel;
+    const isVowel = vowels.includes(w[i] ?? '')
+    if (isVowel && !prevVowel) count++
+    prevVowel = isVowel
   }
-  if (w.endsWith('e') && count > 1) count--;
-  return Math.max(count, 1);
+  if (w.endsWith('e') && count > 1) count--
+  return Math.max(count, 1)
 }
 
 function analyzeReadability(text: string): ReadabilityResult {
-  const plainText = stripHtml(text);
-  const wordCount = countWords(plainText);
-  const sentenceCount = countSentences(plainText);
-  const avgSentenceLength = sentenceCount > 0 ? wordCount / sentenceCount : 0;
-  const readingTime = Math.max(1, Math.ceil(wordCount / 200));
+  const plainText = stripHtml(text)
+  const wordCount = countWords(plainText)
+  const sentenceCount = countSentences(plainText)
+  const avgSentenceLength = sentenceCount > 0 ? wordCount / sentenceCount : 0
+  const readingTime = Math.max(1, Math.ceil(wordCount / 200))
 
-  let fleschScore = 0;
+  let fleschScore = 0
   if (wordCount > 0 && sentenceCount > 0) {
-    const words = plainText.split(/\s+/);
-    const totalSyllables = words.reduce((sum, w) => sum + countSyllables(w), 0);
+    const words = plainText.split(/\s+/)
+    const totalSyllables = words.reduce((sum, w) => sum + countSyllables(w), 0)
     fleschScore = Math.round(
-      206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount)
-    );
-    fleschScore = Math.max(0, Math.min(100, fleschScore));
+      206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount),
+    )
+    fleschScore = Math.max(0, Math.min(100, fleschScore))
   }
 
-  const passivePatterns = /\b(is|are|was|were|been|being|be)\s+\w+ed\b/gi;
-  const passiveMatches = plainText.match(passivePatterns);
+  const passivePatterns = /\b(is|are|was|were|been|being|be)\s+\w+ed\b/gi
+  const passiveMatches = plainText.match(passivePatterns)
   const passiveEstimate = passiveMatches
     ? Math.round((passiveMatches.length / Math.max(sentenceCount, 1)) * 100)
-    : 0;
+    : 0
 
-  return { fleschScore, avgSentenceLength, wordCount, readingTime, passiveEstimate };
+  return { fleschScore, avgSentenceLength, wordCount, readingTime, passiveEstimate }
 }
 
-function runSEOChecks(
-  seoData: SEOData,
-  title: string,
-  slug: string,
-  content: string
-): SEOCheck[] {
-  const checks: SEOCheck[] = [];
-  const plainText = stripHtml(content);
-  const wordCount = countWords(plainText);
-  const keyphrase = (seoData.focusKeyphrase ?? '').toLowerCase().trim();
-  const metaTitle = seoData.metaTitle ?? '';
-  const metaDesc = seoData.metaDescription ?? '';
+function runSEOChecks(seoData: SEOData, title: string, slug: string, content: string): SEOCheck[] {
+  const checks: SEOCheck[] = []
+  const plainText = stripHtml(content)
+  const wordCount = countWords(plainText)
+  const keyphrase = (seoData.focusKeyphrase ?? '').toLowerCase().trim()
+  const metaTitle = seoData.metaTitle ?? ''
+  const metaDesc = seoData.metaDescription ?? ''
 
   // Meta title length
   if (!metaTitle) {
-    checks.push({ id: 'title-missing', label: 'Meta title', status: 'bad', detail: 'No meta title set' });
+    checks.push({
+      id: 'title-missing',
+      label: 'Meta title',
+      status: 'bad',
+      detail: 'No meta title set',
+    })
   } else if (metaTitle.length >= 30 && metaTitle.length <= 60) {
-    checks.push({ id: 'title-length', label: 'Meta title length', status: 'good', detail: `${metaTitle.length} chars (ideal: 30-60)` });
+    checks.push({
+      id: 'title-length',
+      label: 'Meta title length',
+      status: 'good',
+      detail: `${metaTitle.length} chars (ideal: 30-60)`,
+    })
   } else if (metaTitle.length > 60) {
-    checks.push({ id: 'title-length', label: 'Meta title length', status: 'ok', detail: `${metaTitle.length} chars — too long, may be truncated` });
+    checks.push({
+      id: 'title-length',
+      label: 'Meta title length',
+      status: 'ok',
+      detail: `${metaTitle.length} chars — too long, may be truncated`,
+    })
   } else {
-    checks.push({ id: 'title-length', label: 'Meta title length', status: 'ok', detail: `${metaTitle.length} chars — quite short` });
+    checks.push({
+      id: 'title-length',
+      label: 'Meta title length',
+      status: 'ok',
+      detail: `${metaTitle.length} chars — quite short`,
+    })
   }
 
   // Meta description length
   if (!metaDesc) {
-    checks.push({ id: 'desc-missing', label: 'Meta description', status: 'bad', detail: 'No meta description set' });
+    checks.push({
+      id: 'desc-missing',
+      label: 'Meta description',
+      status: 'bad',
+      detail: 'No meta description set',
+    })
   } else if (metaDesc.length >= 120 && metaDesc.length <= 160) {
-    checks.push({ id: 'desc-length', label: 'Meta description length', status: 'good', detail: `${metaDesc.length} chars (ideal: 120-160)` });
+    checks.push({
+      id: 'desc-length',
+      label: 'Meta description length',
+      status: 'good',
+      detail: `${metaDesc.length} chars (ideal: 120-160)`,
+    })
   } else if (metaDesc.length > 160) {
-    checks.push({ id: 'desc-length', label: 'Meta description length', status: 'ok', detail: `${metaDesc.length} chars — may be truncated` });
+    checks.push({
+      id: 'desc-length',
+      label: 'Meta description length',
+      status: 'ok',
+      detail: `${metaDesc.length} chars — may be truncated`,
+    })
   } else {
-    checks.push({ id: 'desc-length', label: 'Meta description length', status: 'ok', detail: `${metaDesc.length} chars — could be longer` });
+    checks.push({
+      id: 'desc-length',
+      label: 'Meta description length',
+      status: 'ok',
+      detail: `${metaDesc.length} chars — could be longer`,
+    })
   }
 
   // Content length
   if (wordCount >= 300) {
-    checks.push({ id: 'content-length', label: 'Content length', status: 'good', detail: `${wordCount} words` });
+    checks.push({
+      id: 'content-length',
+      label: 'Content length',
+      status: 'good',
+      detail: `${wordCount} words`,
+    })
   } else if (wordCount >= 150) {
-    checks.push({ id: 'content-length', label: 'Content length', status: 'ok', detail: `${wordCount} words — aim for 300+` });
+    checks.push({
+      id: 'content-length',
+      label: 'Content length',
+      status: 'ok',
+      detail: `${wordCount} words — aim for 300+`,
+    })
   } else {
-    checks.push({ id: 'content-length', label: 'Content length', status: 'bad', detail: `${wordCount} words — too short` });
+    checks.push({
+      id: 'content-length',
+      label: 'Content length',
+      status: 'bad',
+      detail: `${wordCount} words — too short`,
+    })
   }
 
   // Focus keyphrase checks
   if (!keyphrase) {
-    checks.push({ id: 'keyphrase-missing', label: 'Focus keyphrase', status: 'bad', detail: 'No focus keyphrase set' });
+    checks.push({
+      id: 'keyphrase-missing',
+      label: 'Focus keyphrase',
+      status: 'bad',
+      detail: 'No focus keyphrase set',
+    })
   } else {
-    const inTitle = metaTitle.toLowerCase().includes(keyphrase);
+    const inTitle = metaTitle.toLowerCase().includes(keyphrase)
     checks.push({
       id: 'keyphrase-title',
       label: 'Keyphrase in title',
       status: inTitle ? 'good' : 'bad',
       detail: inTitle ? 'Found in meta title' : 'Not found in meta title',
-    });
+    })
 
-    const inDesc = metaDesc.toLowerCase().includes(keyphrase);
+    const inDesc = metaDesc.toLowerCase().includes(keyphrase)
     checks.push({
       id: 'keyphrase-desc',
       label: 'Keyphrase in description',
       status: inDesc ? 'good' : 'ok',
       detail: inDesc ? 'Found in meta description' : 'Not found in meta description',
-    });
+    })
 
-    const inSlug = slug.toLowerCase().includes(keyphrase.replace(/\s+/g, '-'));
+    const inSlug = slug.toLowerCase().includes(keyphrase.replace(/\s+/g, '-'))
     checks.push({
       id: 'keyphrase-slug',
       label: 'Keyphrase in slug',
       status: inSlug ? 'good' : 'ok',
       detail: inSlug ? 'Found in URL slug' : 'Not found in URL slug',
-    });
+    })
 
-    const firstParagraph = plainText.slice(0, 300).toLowerCase();
-    const inIntro = firstParagraph.includes(keyphrase);
+    const firstParagraph = plainText.slice(0, 300).toLowerCase()
+    const inIntro = firstParagraph.includes(keyphrase)
     checks.push({
       id: 'keyphrase-intro',
       label: 'Keyphrase in introduction',
       status: inIntro ? 'good' : 'ok',
       detail: inIntro ? 'Found in first paragraph' : 'Not found in first paragraph',
-    });
+    })
 
     if (wordCount > 0) {
-      const kpWords = keyphrase.split(/\s+/).length;
-      const regex = new RegExp(keyphrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
-      const matches = plainText.match(regex);
-      const occurrences = matches ? matches.length : 0;
-      const density = (occurrences * kpWords) / wordCount * 100;
-      const densityOk = density >= 0.5 && density <= 3;
+      const kpWords = keyphrase.split(/\s+/).length
+      const regex = new RegExp(keyphrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi')
+      const matches = plainText.match(regex)
+      const occurrences = matches ? matches.length : 0
+      const density = ((occurrences * kpWords) / wordCount) * 100
+      const densityOk = density >= 0.5 && density <= 3
       checks.push({
         id: 'keyphrase-density',
         label: 'Keyphrase density',
         status: densityOk ? 'good' : density === 0 ? 'bad' : 'ok',
         detail: `${density.toFixed(1)}% (aim for 0.5-3%)`,
-      });
+      })
     }
   }
 
   // Image alt text
-  const imgTags = content.match(/<img[^>]*>/gi) ?? [];
+  const imgTags = content.match(/<img[^>]*>/gi) ?? []
   if (imgTags.length > 0) {
-    const withoutAlt = imgTags.filter(tag => !tag.match(/alt\s*=\s*["'][^"']+["']/i));
+    const withoutAlt = imgTags.filter((tag) => !tag.match(/alt\s*=\s*["'][^"']+["']/i))
     if (withoutAlt.length === 0) {
-      checks.push({ id: 'img-alt', label: 'Image alt text', status: 'good', detail: 'All images have alt text' });
+      checks.push({
+        id: 'img-alt',
+        label: 'Image alt text',
+        status: 'good',
+        detail: 'All images have alt text',
+      })
     } else {
-      checks.push({ id: 'img-alt', label: 'Image alt text', status: 'ok', detail: `${withoutAlt.length} image(s) missing alt text` });
+      checks.push({
+        id: 'img-alt',
+        label: 'Image alt text',
+        status: 'ok',
+        detail: `${withoutAlt.length} image(s) missing alt text`,
+      })
     }
   }
 
   // OG checks
-  const hasOgTitle = !!(seoData.ogTitle || metaTitle);
-  const hasOgDesc = !!(seoData.ogDescription || metaDesc);
-  const hasOgImage = !!seoData.ogImage;
+  const hasOgTitle = !!(seoData.ogTitle || metaTitle)
+  const hasOgDesc = !!(seoData.ogDescription || metaDesc)
+  const hasOgImage = !!seoData.ogImage
   checks.push({
     id: 'og-title',
     label: 'Social title',
     status: hasOgTitle ? 'good' : 'ok',
     detail: hasOgTitle ? 'Set' : 'Missing — will fall back to page title',
-  });
+  })
   checks.push({
     id: 'og-desc',
     label: 'Social description',
     status: hasOgDesc ? 'good' : 'ok',
     detail: hasOgDesc ? 'Set' : 'Missing — will fall back to meta description',
-  });
+  })
   checks.push({
     id: 'og-image',
     label: 'Social image',
     status: hasOgImage ? 'good' : 'bad',
     detail: hasOgImage ? 'Set' : 'No OG image set — strongly recommended',
-  });
+  })
 
-  return checks;
+  return checks
 }
 
 function computeOverallScore(checks: SEOCheck[]): number {
-  if (checks.length === 0) return 0;
-  const scoreMap = { good: 100, ok: 50, bad: 0 };
-  const total = checks.reduce((sum, c) => sum + scoreMap[c.status], 0);
-  return Math.round(total / checks.length);
+  if (checks.length === 0) return 0
+  const scoreMap = { good: 100, ok: 50, bad: 0 }
+  const total = checks.reduce((sum, c) => sum + scoreMap[c.status], 0)
+  return Math.round(total / checks.length)
 }
 
 function StatusDot({ status }: { status: 'good' | 'ok' | 'bad' }) {
-  if (status === 'good') return <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />;
-  if (status === 'ok') return <AlertCircle className="h-4 w-4 shrink-0 text-amber-500" />;
-  return <XCircle className="h-4 w-4 shrink-0 text-red-500" />;
+  if (status === 'good') return <CheckCircle2 className="h-4 w-4 shrink-0 text-green-500" />
+  if (status === 'ok') return <AlertCircle className="h-4 w-4 shrink-0 text-amber-500" />
+  return <XCircle className="h-4 w-4 shrink-0 text-red-500" />
 }
 
 function ScoreRing({ score }: { score: number }) {
-  const radius = 28;
-  const circumference = 2 * Math.PI * radius;
-  const offset = circumference - (score / 100) * circumference;
-  const color = score >= 70 ? '#22c55e' : score >= 40 ? '#f59e0b' : '#ef4444';
+  const radius = 28
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (score / 100) * circumference
+  const color = score >= 70 ? '#22c55e' : score >= 40 ? '#f59e0b' : '#ef4444'
 
   return (
     <div className="relative inline-flex items-center justify-center">
@@ -337,9 +413,11 @@ function ScoreRing({ score }: { score: number }) {
           className="transition-all duration-500"
         />
       </svg>
-      <span className="absolute text-sm font-bold" style={{ color }}>{score}</span>
+      <span className="absolute text-sm font-bold" style={{ color }}>
+        {score}
+      </span>
     </div>
-  );
+  )
 }
 
 function Section({
@@ -351,13 +429,13 @@ function Section({
   children,
   badge,
 }: {
-  id: string;
-  title: string;
-  icon: React.ReactNode;
-  expanded: boolean;
-  onToggle: (id: string) => void;
-  children: React.ReactNode;
-  badge?: React.ReactNode;
+  id: string
+  title: string
+  icon: React.ReactNode
+  expanded: boolean
+  onToggle: (id: string) => void
+  children: React.ReactNode
+  badge?: React.ReactNode
 }) {
   return (
     <div className="border border-[var(--border)] rounded-lg overflow-hidden">
@@ -370,11 +448,15 @@ function Section({
           {title}
           {badge}
         </span>
-        {expanded ? <ChevronUp className="h-4 w-4 text-[var(--muted-foreground)]" /> : <ChevronDown className="h-4 w-4 text-[var(--muted-foreground)]" />}
+        {expanded ? (
+          <ChevronUp className="h-4 w-4 text-[var(--muted-foreground)]" />
+        ) : (
+          <ChevronDown className="h-4 w-4 text-[var(--muted-foreground)]" />
+        )}
       </button>
       {expanded && <div className="px-4 pb-4 pt-1">{children}</div>}
     </div>
-  );
+  )
 }
 
 function ToggleSwitch({
@@ -383,10 +465,10 @@ function ToggleSwitch({
   checked,
   onChange,
 }: {
-  label: string;
-  description: string;
-  checked: boolean;
-  onChange: (v: boolean) => void;
+  label: string
+  description: string
+  checked: boolean
+  onChange: (v: boolean) => void
 }) {
   return (
     <div className="flex items-center justify-between gap-3">
@@ -401,10 +483,12 @@ function ToggleSwitch({
         onClick={() => onChange(!checked)}
         className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors ${checked ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'}`}
       >
-        <span className={`pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm transition-transform mt-0.5 ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`} />
+        <span
+          className={`pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm transition-transform mt-0.5 ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`}
+        />
       </button>
     </div>
-  );
+  )
 }
 
 function InputField({
@@ -416,17 +500,19 @@ function InputField({
   charCount,
   charTarget,
 }: {
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  placeholder?: string;
-  type?: string;
-  charCount?: number;
-  charTarget?: string;
+  label: string
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string
+  type?: string
+  charCount?: number
+  charTarget?: string
 }) {
   return (
     <div>
-      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">{label}</label>
+      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+        {label}
+      </label>
       <input
         type={type}
         value={value}
@@ -435,10 +521,12 @@ function InputField({
         placeholder={placeholder}
       />
       {charCount !== undefined && charTarget && (
-        <p className="text-xs mt-1 text-[var(--muted-foreground)]">{charCount} chars {charTarget}</p>
+        <p className="text-xs mt-1 text-[var(--muted-foreground)]">
+          {charCount} chars {charTarget}
+        </p>
       )}
     </div>
-  );
+  )
 }
 
 function TextareaField({
@@ -450,17 +538,19 @@ function TextareaField({
   charCount,
   charTarget,
 }: {
-  label: string;
-  value: string;
-  onChange: (v: string) => void;
-  placeholder?: string;
-  rows?: number;
-  charCount?: number;
-  charTarget?: string;
+  label: string
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string
+  rows?: number
+  charCount?: number
+  charTarget?: string
 }) {
   return (
     <div>
-      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">{label}</label>
+      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+        {label}
+      </label>
       <textarea
         value={value}
         onChange={(e) => onChange(e.target.value)}
@@ -469,42 +559,65 @@ function TextareaField({
         placeholder={placeholder}
       />
       {charCount !== undefined && charTarget && (
-        <p className="text-xs mt-1 text-[var(--muted-foreground)]">{charCount} chars {charTarget}</p>
+        <p className="text-xs mt-1 text-[var(--muted-foreground)]">
+          {charCount} chars {charTarget}
+        </p>
       )}
     </div>
-  );
+  )
 }
 
-export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl = 'https://example.com' }: SEOPanelProps) {
-  const [expandedSections, setExpandedSections] = useState<string[]>(['analysis']);
+export function SEOPanel({
+  title,
+  slug,
+  content = '',
+  seoData,
+  onChange,
+  siteUrl = 'https://example.com',
+}: SEOPanelProps) {
+  const [expandedSections, setExpandedSections] = useState<string[]>(['analysis'])
 
   const update = (partial: Partial<SEOData>) => {
-    onChange({ ...seoData, ...partial });
-  };
+    onChange({ ...seoData, ...partial })
+  }
 
   const toggleSection = (id: string) => {
     setExpandedSections((prev) =>
-      prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
-    );
-  };
-
-  const checks = useMemo(() => runSEOChecks(seoData, title, slug, content), [seoData, title, slug, content]);
-  const readability = useMemo(() => analyzeReadability(content), [content]);
-  const score = useMemo(() => computeOverallScore(checks), [checks]);
-
-  const goodCount = checks.filter((c) => c.status === 'good').length;
-  const okCount = checks.filter((c) => c.status === 'ok').length;
-  const badCount = checks.filter((c) => c.status === 'bad').length;
-
-  const metaTitle = seoData.metaTitle ?? '';
-  const metaDesc = seoData.metaDescription ?? '';
-  const robotsPolicy = getRobotsPolicy(seoData);
-  const displayTitle = seoData.ogTitle || metaTitle || title || 'Page Title';
-  const displayDesc = seoData.ogDescription || metaDesc || 'Add a meta description to see how this page will appear in search results.';
+      prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id],
+    )
+  }
+
+  const checks = useMemo(
+    () => runSEOChecks(seoData, title, slug, content),
+    [seoData, title, slug, content],
+  )
+  const readability = useMemo(() => analyzeReadability(content), [content])
+  const score = useMemo(() => computeOverallScore(checks), [checks])
+
+  const goodCount = checks.filter((c) => c.status === 'good').length
+  const okCount = checks.filter((c) => c.status === 'ok').length
+  const badCount = checks.filter((c) => c.status === 'bad').length
+
+  const metaTitle = seoData.metaTitle ?? ''
+  const metaDesc = seoData.metaDescription ?? ''
+  const robotsPolicy = getRobotsPolicy(seoData)
+  const displayTitle = seoData.ogTitle || metaTitle || title || 'Page Title'
+  const displayDesc =
+    seoData.ogDescription ||
+    metaDesc ||
+    'Add a meta description to see how this page will appear in search results.'
   const fleschLabel =
-    readability.fleschScore >= 60 ? 'Easy to read' : readability.fleschScore >= 30 ? 'Fairly difficult' : 'Very difficult';
+    readability.fleschScore >= 60
+      ? 'Easy to read'
+      : readability.fleschScore >= 30
+        ? 'Fairly difficult'
+        : 'Very difficult'
   const fleschColor =
-    readability.fleschScore >= 60 ? 'text-green-500' : readability.fleschScore >= 30 ? 'text-amber-500' : 'text-red-500';
+    readability.fleschScore >= 60
+      ? 'text-green-500'
+      : readability.fleschScore >= 30
+        ? 'text-amber-500'
+        : 'text-red-500'
 
   return (
     <div className="rounded-lg border border-[var(--border)] bg-[var(--card)]">
@@ -527,9 +640,15 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
       <div className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)]">
         <ScoreRing score={score} />
         <div className="text-xs text-[var(--muted-foreground)] space-y-0.5">
-          <div className="flex items-center gap-1.5"><CheckCircle2 className="h-3 w-3 text-green-500" /> {goodCount} passed</div>
-          <div className="flex items-center gap-1.5"><AlertCircle className="h-3 w-3 text-amber-500" /> {okCount} improvements</div>
-          <div className="flex items-center gap-1.5"><XCircle className="h-3 w-3 text-red-500" /> {badCount} issues</div>
+          <div className="flex items-center gap-1.5">
+            <CheckCircle2 className="h-3 w-3 text-green-500" /> {goodCount} passed
+          </div>
+          <div className="flex items-center gap-1.5">
+            <AlertCircle className="h-3 w-3 text-amber-500" /> {okCount} improvements
+          </div>
+          <div className="flex items-center gap-1.5">
+            <XCircle className="h-3 w-3 text-red-500" /> {badCount} issues
+          </div>
         </div>
       </div>
 
@@ -582,18 +701,28 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
             </div>
             <div className="rounded-lg bg-[var(--muted)] p-2.5">
               <p className="text-xs text-[var(--muted-foreground)]">Avg. Sentence</p>
-              <p className="text-lg font-bold text-[var(--foreground)]">{readability.avgSentenceLength.toFixed(1)}</p>
+              <p className="text-lg font-bold text-[var(--foreground)]">
+                {readability.avgSentenceLength.toFixed(1)}
+              </p>
               <p className="text-[10px] text-[var(--muted-foreground)]">words/sentence</p>
             </div>
             <div className="rounded-lg bg-[var(--muted)] p-2.5">
               <p className="text-xs text-[var(--muted-foreground)]">Reading Time</p>
-              <p className="text-lg font-bold text-[var(--foreground)]">{readability.readingTime}</p>
+              <p className="text-lg font-bold text-[var(--foreground)]">
+                {readability.readingTime}
+              </p>
               <p className="text-[10px] text-[var(--muted-foreground)]">min</p>
             </div>
           </div>
           <div className="mt-3 flex items-center gap-2 text-xs text-[var(--muted-foreground)]">
             <span>Passive voice est.:</span>
-            <span className={readability.passiveEstimate > 15 ? 'text-amber-500 font-medium' : 'text-green-500 font-medium'}>
+            <span
+              className={
+                readability.passiveEstimate > 15
+                  ? 'text-amber-500 font-medium'
+                  : 'text-green-500 font-medium'
+              }
+            >
               {readability.passiveEstimate}%
             </span>
           </div>
@@ -650,14 +779,17 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
         >
           <div className="space-y-4">
             <div>
-              <label id="robots-policy-label" className="mb-1 block text-xs font-medium text-muted-foreground">
+              <label
+                id="robots-policy-label"
+                className="mb-1 block text-xs font-medium text-muted-foreground"
+              >
                 Robots Policy
               </label>
               <Select.Root
                 value={robotsPolicy}
                 onValueChange={(value) => {
-                  const policy = value as NonNullable<SEOData['robotsPolicy']>;
-                  update({ robotsPolicy: policy, ...robotsPolicyToBooleans(policy) });
+                  const policy = value as NonNullable<SEOData['robotsPolicy']>
+                  update({ robotsPolicy: policy, ...robotsPolicyToBooleans(policy) })
                 }}
               >
                 <Select.Trigger
@@ -689,7 +821,8 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
                 </Select.Portal>
               </Select.Root>
               <p className="mt-1 text-xs text-muted-foreground">
-                Use inheritance for most pages. Override only when a page needs different index/follow behavior.
+                Use inheritance for most pages. Override only when a page needs different
+                index/follow behavior.
               </p>
             </div>
           </div>
@@ -711,7 +844,8 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
               {siteUrl}/{slug}
             </div>
             <div className="text-sm text-[var(--muted-foreground)] mt-1 line-clamp-2">
-              {metaDesc || 'Add a meta description to see how this page will appear in search results.'}
+              {metaDesc ||
+                'Add a meta description to see how this page will appear in search results.'}
             </div>
           </div>
         </Section>
@@ -747,7 +881,9 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
             />
 
             <div className="border-t border-[var(--border)] pt-3 mt-3">
-              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">Twitter / X Overrides</p>
+              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">
+                Twitter / X Overrides
+              </p>
               <div className="space-y-3">
                 <InputField
                   label="Twitter Title"
@@ -774,11 +910,17 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
 
             {/* Social preview card */}
             <div className="mt-3">
-              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">Social Preview</p>
+              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">
+                Social Preview
+              </p>
               <div className="rounded-lg border border-[var(--border)] overflow-hidden bg-[var(--muted)]">
                 {seoData.ogImage ? (
                   <div className="aspect-video bg-[var(--muted)] flex items-center justify-center overflow-hidden">
-                    <img src={seoData.ogImage} alt="OG preview" className="w-full h-full object-cover" />
+                    <img
+                      src={seoData.ogImage}
+                      alt="OG preview"
+                      className="w-full h-full object-cover"
+                    />
                   </div>
                 ) : (
                   <div className="aspect-video bg-[var(--muted)] flex items-center justify-center text-[var(--muted-foreground)] text-sm">
@@ -786,11 +928,15 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
                   </div>
                 )}
                 <div className="p-3">
-                  <div className="text-sm font-medium text-[var(--foreground)] line-clamp-1">{displayTitle}</div>
+                  <div className="text-sm font-medium text-[var(--foreground)] line-clamp-1">
+                    {displayTitle}
+                  </div>
                   <div className="text-xs text-[var(--muted-foreground)] mt-1 line-clamp-2">
                     {displayDesc.slice(0, 100)}
                   </div>
-                  <div className="text-xs text-[var(--muted-foreground)] mt-1 truncate">{siteUrl}</div>
+                  <div className="text-xs text-[var(--muted-foreground)] mt-1 truncate">
+                    {siteUrl}
+                  </div>
                 </div>
               </div>
             </div>
@@ -819,14 +965,18 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
               </div>
             )}
             <div>
-              <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">Schema Type</label>
+              <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+                Schema Type
+              </label>
               <select
                 value={seoData.schemaType ?? 'Article'}
                 onChange={(e) => update({ schemaType: e.target.value })}
                 className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
               >
                 {SCHEMA_TYPES.map((t) => (
-                  <option key={t} value={t}>{t}</option>
+                  <option key={t} value={t}>
+                    {t}
+                  </option>
                 ))}
               </select>
             </div>
@@ -834,5 +984,5 @@ export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl
         </Section>
       </div>
     </div>
-  );
+  )
 }