@actuate-media/cms-admin 0.73.0 → 0.75.0

package/src/components/seo/SeoInsightsMetrics.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import type { ReadabilityResult } from '@actuate-media/cms-core/seo/analysis'
+import { prominentWordsFromText } from '../../lib/editor-seo-content.js'
+
+export function SeoInsightsMetrics({
+  readability,
+  plainText,
+}: {
+  readability: ReadabilityResult
+  plainText: string
+}) {
+  const prominent = prominentWordsFromText(plainText)
+  const needsMoreCopy = readability.wordCount < 50
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h4 className="mb-1.5 text-[12.5px] font-medium text-[var(--txt)]">Prominent words</h4>
+        {needsMoreCopy ? (
+          <p className="text-[11.5px] text-[var(--sub)]">
+            Once you add more copy, we&apos;ll list the words that occur most in the content — a
+            quick read on what the page focuses on.
+          </p>
+        ) : prominent.length > 0 ? (
+          <div className="flex flex-wrap gap-1.5">
+            {prominent.map((word) => (
+              <span
+                key={word}
+                className="rounded-full border border-[var(--bdr)] bg-[var(--card)] px-2 py-0.5 text-[11.5px] text-[var(--txt)]"
+              >
+                {word}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <p className="text-[11.5px] text-[var(--sub)]">No recurring terms yet.</p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <MetricCard
+          label="Reading time"
+          value={String(readability.readingTimeMinutes)}
+          unit="minutes"
+          hint={
+            needsMoreCopy
+              ? 'Continue writing to estimate reading time.'
+              : `${readability.wordCount} words at ~200 wpm`
+          }
+        />
+        <MetricCard
+          label="Word count"
+          value={String(readability.wordCount)}
+          unit="words"
+          hint={needsMoreCopy ? 'Add body content to unlock metrics.' : undefined}
+        />
+      </div>
+
+      <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
+        <div className="mb-1 text-[12.5px] font-medium text-[var(--txt)]">Flesch reading ease</div>
+        {needsMoreCopy ? (
+          <p className="text-[11.5px] text-[var(--sub)]">
+            Your text should be slightly longer to calculate readability. Keep writing to unlock
+            this score.
+          </p>
+        ) : (
+          <>
+            <div className="flex items-baseline gap-2">
+              <span className="text-2xl font-medium text-[var(--acc)]">
+                {readability.fleschScore}
+              </span>
+              <span className="text-[11.5px] text-[var(--muted)]">out of 100</span>
+            </div>
+            <p className="mt-1 text-[11.5px] text-[var(--sub)]">
+              {readability.fleschLabel} —{' '}
+              {readability.fleschScore >= 60
+                ? 'Content is fairly easy to read.'
+                : 'Try shorter sentences and simpler words.'}
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function MetricCard({
+  label,
+  value,
+  unit,
+  hint,
+}: {
+  label: string
+  value: string
+  unit: string
+  hint?: string
+}) {
+  return (
+    <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
+      <div className="text-[11.5px] font-medium text-[var(--sub)]">{label}</div>
+      <div className="mt-1 flex items-baseline gap-1">
+        <span className="text-xl font-medium text-[var(--acc)]">{value}</span>
+        <span className="text-[11px] text-[var(--muted)]">{unit}</span>
+      </div>
+      {hint && <p className="mt-1 text-[10.5px] text-[var(--muted)]">{hint}</p>}
+    </div>
+  )
+}

package/src/components/seo/SeoIssueFixPanel.tsx

@@ -321,7 +321,11 @@ export function SeoIssueFixPanel({
       toast.error(res.error)
       return
     }
-    toast.success('Fix applied and issue resolved.')
+    toast.success(
+      suggestion?.fixStrategy === 'fix-link'
+        ? 'Link updated in content and issue resolved.'
+        : 'Redirect created and issue resolved.',
+    )
     onChanged?.()
   }
 
@@ -408,11 +412,15 @@ export function SeoIssueFixPanel({
                     {suggestion.source === 'ai' && !suggestion.aiUnavailable ? (
                       <span className="bg-primary/10 text-primary inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium">
                         <Sparkles className="h-3 w-3" aria-hidden />
-                        AI suggestion
+                        {suggestion.fixStrategy === 'fix-link'
+                          ? 'Fix link in content'
+                          : 'AI suggestion'}
                       </span>
                     ) : suggestion.source === 'deterministic' ? (
                       <span className="bg-muted text-muted-foreground rounded-full px-2.5 py-0.5 text-xs font-medium">
-                        Rule-based fix
+                        {suggestion.fixStrategy === 'fix-link'
+                          ? 'Content link fix'
+                          : 'Rule-based fix'}
                       </span>
                     ) : null}
                   </div>
@@ -483,7 +491,11 @@ export function SeoIssueFixPanel({
                     disabled={busy}
                   >
                     <Check className="h-4 w-4" aria-hidden />
-                    {busy ? 'Applying…' : 'Approve fix'}
+                    {busy
+                      ? 'Applying…'
+                      : suggestion.fixStrategy === 'fix-link'
+                        ? 'Fix link in content'
+                        : 'Approve redirect'}
                   </button>
                 ) : inlineFix && suggestion?.autoFixable && !inlineApplyEnabled ? (
                   <PlanUpgradeCallout feature="seo.inlineApply" upgradeUrl={planInfo?.upgradeUrl} />

package/src/components/seo/SeoLinkingSection.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Link2, Loader2, Sparkles } from 'lucide-react'
+import { fetchLinkSuggestions, type LinkSuggestion } from '../../lib/seo-service.js'
+
+export function SeoLinkingSection({
+  entityType,
+  entityId,
+  internalLinks,
+  externalLinks,
+  internalLinkOk,
+  externalLinkOk,
+}: {
+  entityType: 'page' | 'post'
+  entityId: string | null
+  internalLinks: number
+  externalLinks: number
+  internalLinkOk: boolean
+  externalLinkOk: boolean
+}) {
+  const [loading, setLoading] = useState(false)
+  const [suggestions, setSuggestions] = useState<LinkSuggestion[]>([])
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!entityId) {
+      setSuggestions([])
+      setError(null)
+      return
+    }
+    let alive = true
+    setLoading(true)
+    setError(null)
+    fetchLinkSuggestions({ targetEntityType: entityType, targetEntityId: entityId, limit: 5 })
+      .then((res) => {
+        if (!alive) return
+        if (res.error) {
+          setError(res.error)
+          setSuggestions([])
+          return
+        }
+        setSuggestions(res.data?.suggestions ?? [])
+      })
+      .finally(() => alive && setLoading(false))
+    return () => {
+      alive = false
+    }
+  }, [entityType, entityId])
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-3">
+        <LinkCountCard
+          label="Internal links"
+          count={internalLinks}
+          ok={internalLinkOk}
+          hint={
+            internalLinkOk
+              ? 'Links to other pages on your site.'
+              : 'Add links to related content — aim for at least one.'
+          }
+        />
+        <LinkCountCard
+          label="Outbound links"
+          count={externalLinks}
+          ok={externalLinkOk}
+          hint={
+            externalLinkOk
+              ? 'Links to external sources.'
+              : 'Consider linking to authoritative external sources.'
+          }
+        />
+      </div>
+
+      {!entityId ? (
+        <p className="rounded-[7px] border border-[var(--bdr)] bg-[var(--bg)] p-3 text-[11.5px] text-[var(--sub)]">
+          Save a draft first to load AI link opportunities for this page.
+        </p>
+      ) : loading ? (
+        <div className="flex items-center gap-2 text-[12px] text-[var(--muted)]">
+          <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+          Finding link opportunities…
+        </div>
+      ) : error ? (
+        <p className="text-[11.5px] text-[var(--err)]">{error}</p>
+      ) : suggestions.length > 0 ? (
+        <div>
+          <div className="mb-2 flex items-center gap-1.5 text-[12px] font-medium text-[var(--txt)]">
+            <Sparkles className="h-3.5 w-3.5 text-[var(--acc)]" aria-hidden />
+            Link opportunities
+          </div>
+          <ul className="space-y-2">
+            {suggestions.map((s) => (
+              <li
+                key={`${s.sourceEntityId}-${s.anchorText}`}
+                className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-2.5"
+              >
+                <div className="text-[12.5px] font-medium text-[var(--txt)]">{s.sourceTitle}</div>
+                <p className="mt-0.5 text-[11px] text-[var(--muted)]">{s.sourceUrl}</p>
+                <p className="mt-1 text-[11.5px] text-[var(--sub)]">
+                  Suggested anchor: <span className="text-[var(--txt)]">{s.anchorText}</span>
+                </p>
+                {s.excerpt && (
+                  <p className="mt-1 line-clamp-2 text-[11px] text-[var(--muted)]">{s.excerpt}</p>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <p className="text-[11.5px] text-[var(--sub)]">
+          No inbound link suggestions yet. Run the site link index from SEO → Links to improve AI
+          recommendations.
+        </p>
+      )}
+
+      <div className="flex items-start gap-2 rounded-[7px] border border-[var(--bdr)] bg-[var(--bg)] p-2.5 text-[11px] text-[var(--sub)]">
+        <Link2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--acc)]" aria-hidden />
+        <span>
+          Best practice: mix internal links (site structure + crawl paths) with selective outbound
+          links (trust signals). We flag counts here; apply links in the content editor.
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function LinkCountCard({
+  label,
+  count,
+  ok,
+  hint,
+}: {
+  label: string
+  count: number
+  ok: boolean
+  hint: string
+}) {
+  return (
+    <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[11.5px] font-medium text-[var(--sub)]">{label}</span>
+        <span className={`text-lg font-medium ${ok ? 'text-[var(--suc)]' : 'text-[var(--warn)]'}`}>
+          {count}
+        </span>
+      </div>
+      <p className="mt-1 text-[10.5px] text-[var(--muted)]">{hint}</p>
+    </div>
+  )
+}

package/src/components/seo/primitives.tsx

@@ -153,14 +153,18 @@ export function SectionCard({
           {action}
         </CardHeader>
       )}
-      <CardContent className={title || action ? 'pt-0' : ''}>{children}</CardContent>
+      <CardContent className={title || action ? '' : 'pt-6!'}>{children}</CardContent>
     </Card>
   )
 }
 
 export function SeoLoading({ label = 'Loading…' }: { label?: string }) {
   return (
-    <div className="flex h-64 items-center justify-center" role="status" aria-live="polite">
+    <div
+      className="flex min-h-32 items-center justify-center py-12"
+      role="status"
+      aria-live="polite"
+    >
       <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
       <span className="sr-only">{label}</span>
     </div>
@@ -195,7 +199,7 @@ export function SeoEmptyState({
 export function SeoErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
   return (
     <div
-      className="border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-3"
+      className="border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-4"
       role="alert"
     >
       <AlertTriangle className="text-destructive h-5 w-5 shrink-0" aria-hidden />

package/src/components/ui/Card.tsx

@@ -10,8 +10,8 @@ const card = cv(
         /** Stat / compact surfaces (`.dstat`). */
         sm: 'px-4 py-3.5',
         /** Simple padded panel (`.dcard-b`). */
-        md: 'px-[18px] py-4',
-        lg: 'px-[18px] py-6',
+        md: 'px-6 py-4',
+        lg: 'px-6 py-6',
       },
       elevation: {
         flat: 'shadow-none',
@@ -55,7 +55,7 @@ export function CardHeader({
 }: HTMLAttributes<HTMLDivElement> & { bordered?: boolean }) {
   return (
     <div
-      className={[bordered ? 'border-b border-[var(--bdr)] px-[18px] py-[14px]' : '', className]
+      className={[bordered ? 'border-b border-[var(--bdr)] px-6 pt-6 pb-4' : '', className]
         .filter(Boolean)
         .join(' ')}
       {...rest}
@@ -96,7 +96,7 @@ export function CardDescription({
 export function CardContent({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={`px-[18px] py-4 text-[length:var(--fs-body)] leading-[1.55] text-[var(--sub)] ${className}`}
+      className={`px-6 pt-4 pb-6 text-[length:var(--fs-body)] leading-[1.55] text-[var(--sub)] ${className}`}
       {...rest}
     >
       {children}
@@ -107,7 +107,7 @@ export function CardContent({ className = '', children, ...rest }: HTMLAttribute
 export function CardFooter({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={`flex items-center justify-end gap-2 border-t border-[var(--bdr)] px-[18px] py-3 ${className}`}
+      className={`flex items-center justify-end gap-2 border-t border-[var(--bdr)] px-6 py-4 ${className}`}
       {...rest}
     >
       {children}

package/src/components/ui/InspectorPane.tsx

@@ -86,7 +86,7 @@ export function InspectorPaneHeader({
   closeLabel?: string
 }) {
   return (
-    <div className="flex items-start gap-2 border-b border-[var(--bdr)] px-4 py-3.5">
+    <div className="flex items-start gap-2 border-b border-[var(--bdr)] px-5 py-4">
       <div className="min-w-0 flex-1">{children}</div>
       <button
         type="button"
@@ -115,7 +115,7 @@ export function InspectorPaneSection({
   children: ReactNode
 }) {
   return (
-    <div className="border-b border-[var(--bdr)] px-4 py-3.5 last:border-b-0">
+    <div className="border-b border-[var(--bdr)] px-5 py-4 last:border-b-0">
       {title && (
         <div className="mb-2.5 flex items-baseline gap-2">
           <span className="text-[10.5px] font-semibold tracking-[0.6px] text-[var(--muted)] uppercase">
@@ -130,5 +130,5 @@ export function InspectorPaneSection({
 }
 
 export function InspectorPaneFooter({ children }: { children: ReactNode }) {
-  return <div className="border-t border-[var(--bdr)] px-4 py-3.5">{children}</div>
+  return <div className="border-t border-[var(--bdr)] px-5 py-4">{children}</div>
 }

package/src/components/ui/PanelSection.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+/**
+ * Bordered panel with a header divider — Dashboard, modals, and list-heavy views.
+ * Matches Settings/Section card rhythm: `px-6` gutters, `py-4` header, body flush
+ * below the divider with its own padding.
+ */
+export function PanelSection({
+  title,
+  description,
+  action,
+  children,
+  className = '',
+}: {
+  title?: ReactNode
+  description?: ReactNode
+  action?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <section
+      className={`bg-card border-border overflow-hidden rounded-xl border shadow-sm ${className}`}
+    >
+      {(title || action) && (
+        <header className="border-border flex items-center justify-between gap-3 border-b px-6 py-4">
+          <div className="min-w-0">
+            {title &&
+              (typeof title === 'string' ? (
+                <h2 className="text-foreground text-sm font-medium">{title}</h2>
+              ) : (
+                title
+              ))}
+            {description &&
+              (typeof description === 'string' ? (
+                <p className="text-muted-foreground mt-0.5 text-xs">{description}</p>
+              ) : (
+                description
+              ))}
+          </div>
+          {action}
+        </header>
+      )}
+      {children}
+    </section>
+  )
+}
+
+/** Standard inset for list rows / table bodies inside a {@link PanelSection}. */
+export const PANEL_LIST_ROW_CLASS =
+  'hover:bg-accent/50 focus-visible:bg-accent/50 w-full px-6 py-4 text-left transition-colors'

package/src/lib/admin-root-element.ts

@@ -0,0 +1,15 @@
+/** Marks the canonical admin shell root (AdminRoot / LoginRoot). */
+export const ADMIN_ROOT_ATTR = 'data-actuate-admin-root'
+
+/**
+ * Resolve the element that owns admin theme tokens (accent, color mode, density).
+ * Prefer the marked shell root so a consumer wrapper `.actuate-admin` does not
+ * steal runtime overrides from the inner AdminRoot.
+ */
+export function getAdminRootElement(): HTMLElement | null {
+  if (typeof document === 'undefined') return null
+  return (
+    document.querySelector<HTMLElement>(`[${ADMIN_ROOT_ATTR}]`) ??
+    document.querySelector<HTMLElement>('.actuate-admin')
+  )
+}

package/src/lib/editor-seo-content.ts

@@ -0,0 +1,144 @@
+import { getSectionType, type PageSection } from '@actuate-media/cms-core/page-sections'
+import { analyzeContent } from '@actuate-media/cms-core/seo/analysis'
+
+const HTML_LIKE = /<\/?[a-z][\s\S]*>/i
+
+/** Build an HTML-ish string from editor sections (+ optional post body) for SEO analysis. */
+export function buildEditorContentHtml(sections: PageSection[], body = ''): string {
+  const parts: string[] = []
+  if (body.trim()) parts.push(body)
+  for (const section of sections) {
+    if (section.visible === false) continue
+    const chunk = extractSectionContentHtml(section)
+    if (chunk) parts.push(chunk)
+  }
+  return parts.join('\n')
+}
+
+/** Live 0–100 SEO score from the current in-editor document state. */
+export function computeLiveSeoScore(input: {
+  title: string
+  slug: string
+  seoTitle: string
+  seoDescription: string
+  focusKeyword?: string
+  sections: PageSection[]
+  bodyHtml?: string
+}): number {
+  const content = buildEditorContentHtml(input.sections, input.bodyHtml ?? '')
+  return analyzeContent({
+    title: input.title,
+    slug: input.slug,
+    content,
+    metaTitle: input.seoTitle,
+    metaDescription: input.seoDescription,
+    focusKeyphrase: input.focusKeyword,
+  }).score
+}
+
+function extractSectionContentHtml(section: PageSection): string {
+  const content = section.content
+  if (!content || typeof content !== 'object') return ''
+  const def = getSectionType(section.sectionType)
+  const chunks: string[] = []
+
+  if (def) {
+    for (const field of def.fields) {
+      const val = content[field.key]
+      if (typeof val !== 'string' || !val.trim()) continue
+      if (field.type === 'richText' || HTML_LIKE.test(val)) {
+        chunks.push(val)
+      } else if (/heading|title|subtitle|eyebrow/i.test(field.key)) {
+        chunks.push(`<h2>${escapeHtml(val.trim())}</h2>`)
+      } else if (/body|content|text|copy|description|excerpt|quote|answer/i.test(field.key)) {
+        chunks.push(`<p>${escapeHtml(val.trim())}</p>`)
+      }
+    }
+  } else {
+    collectStringValues(content, chunks, 0)
+  }
+
+  return chunks.join('\n')
+}
+
+function collectStringValues(obj: Record<string, unknown>, chunks: string[], depth: number): void {
+  if (depth > 6) return
+  for (const value of Object.values(obj)) {
+    if (typeof value === 'string' && value.trim()) {
+      chunks.push(HTML_LIKE.test(value) ? value : `<p>${escapeHtml(value.trim())}</p>`)
+    } else if (Array.isArray(value)) {
+      for (const item of value) {
+        if (item && typeof item === 'object') {
+          collectStringValues(item as Record<string, unknown>, chunks, depth + 1)
+        }
+      }
+    } else if (value && typeof value === 'object') {
+      collectStringValues(value as Record<string, unknown>, chunks, depth + 1)
+    }
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+const STOP_WORDS = new Set([
+  'about',
+  'after',
+  'also',
+  'been',
+  'before',
+  'being',
+  'between',
+  'both',
+  'could',
+  'each',
+  'from',
+  'have',
+  'into',
+  'more',
+  'most',
+  'other',
+  'over',
+  'some',
+  'such',
+  'than',
+  'that',
+  'their',
+  'them',
+  'then',
+  'there',
+  'these',
+  'they',
+  'this',
+  'through',
+  'under',
+  'very',
+  'were',
+  'what',
+  'when',
+  'where',
+  'which',
+  'while',
+  'with',
+  'would',
+  'your',
+])
+
+/** Top content words for the Insights accordion (excluding common stop words). */
+export function prominentWordsFromText(plainText: string, limit = 8): string[] {
+  const counts = new Map<string, number>()
+  for (const raw of plainText.toLowerCase().split(/\s+/)) {
+    const word = raw.replace(/[^a-z0-9'-]/g, '')
+    if (word.length < 4 || STOP_WORDS.has(word)) continue
+    counts.set(word, (counts.get(word) ?? 0) + 1)
+  }
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, limit)
+    .map(([word]) => word)
+}

package/src/lib/portal-container.ts

@@ -1,3 +1,5 @@
+import { getAdminRootElement } from './admin-root-element.js'
+
 /**
  * Admin theme tokens are scoped under `.actuate-admin` (styles/theme.css),
  * and dark mode / accent / density are applied as classes-attributes on that
@@ -9,6 +11,5 @@
  * Returns `undefined` during SSR (portals only materialize client-side).
  */
 export function adminPortalContainer(): HTMLElement | undefined {
-  if (typeof document === 'undefined') return undefined
-  return document.querySelector<HTMLElement>('.actuate-admin') ?? undefined
+  return getAdminRootElement() ?? undefined
 }