@prenta/admin 0.92.0

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

@@ -0,0 +1,228 @@
+'use client'
+
+/**
+ * Shared SEO UI primitives — token-only, accessible building blocks used across
+ * the five SEO tabs. No raw palette colours: status uses the theme's
+ * success / warning / destructive / muted tokens.
+ */
+import type { ReactNode } from 'react'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/Card.js'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
+import type { SeoGrade, SeoSeverity } from '../../lib/seo-service.js'
+
+// ─── Grade + severity styling ────────────────────────────────────────
+
+export interface GradeMeta {
+  label: string
+  text: string
+  bg: string
+  dot: string
+}
+
+export function gradeMeta(grade: SeoGrade): GradeMeta {
+  switch (grade) {
+    case 'good':
+      return { label: 'Good', text: 'text-success', bg: 'bg-success/10', dot: 'bg-success' }
+    case 'fair':
+      return { label: 'Fair', text: 'text-warning', bg: 'bg-warning/10', dot: 'bg-warning' }
+    case 'poor':
+      return {
+        label: 'Poor',
+        text: 'text-destructive',
+        bg: 'bg-destructive/10',
+        dot: 'bg-destructive',
+      }
+    default:
+      return {
+        label: 'Critical',
+        text: 'text-destructive',
+        bg: 'bg-destructive/15',
+        dot: 'bg-destructive',
+      }
+  }
+}
+
+/** Grade band from a numeric 0-100 score. */
+export function gradeFromScore(score: number): SeoGrade {
+  if (score >= 80) return 'good'
+  if (score >= 60) return 'fair'
+  if (score >= 1) return 'poor'
+  return 'critical'
+}
+
+export function severityMeta(severity: SeoSeverity): GradeMeta {
+  switch (severity) {
+    case 'critical':
+      return {
+        label: 'Critical',
+        text: 'text-destructive',
+        bg: 'bg-destructive/10',
+        dot: 'bg-destructive',
+      }
+    case 'warning':
+      return { label: 'Warning', text: 'text-warning', bg: 'bg-warning/10', dot: 'bg-warning' }
+    default:
+      return {
+        label: 'Info',
+        text: 'text-muted-foreground',
+        bg: 'bg-muted',
+        dot: 'bg-muted-foreground',
+      }
+  }
+}
+
+// ─── Badges + bars ───────────────────────────────────────────────────
+
+const SEO_TONE: Record<'good' | 'fair' | 'poor' | 'critical' | 'neutral', StatusBadgeTone> = {
+  good: 'success',
+  fair: 'warning',
+  poor: 'danger',
+  critical: 'danger',
+  neutral: 'neutral',
+}
+
+export function SeoStatusBadge({
+  label,
+  tone,
+}: {
+  label: string
+  tone: 'good' | 'fair' | 'poor' | 'critical' | 'neutral'
+}) {
+  return <StatusBadge tone={SEO_TONE[tone]}>{label}</StatusBadge>
+}
+
+/** A horizontal score bar (0-100), coloured by grade. */
+export function SeoScoreBar({ score, className = '' }: { score: number; className?: string }) {
+  const grade = gradeFromScore(score)
+  const fill = grade === 'good' ? 'bg-success' : grade === 'fair' ? 'bg-warning' : 'bg-destructive'
+  const clamped = Math.max(0, Math.min(100, Math.round(score)))
+  return (
+    <div
+      className={`bg-muted h-2 w-full overflow-hidden rounded-full ${className}`}
+      role="progressbar"
+      aria-label="SEO score"
+      aria-valuenow={clamped}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuetext={`${clamped} out of 100`}
+    >
+      <div
+        className={`h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none ${fill}`}
+        style={{ width: `${Math.max(0, Math.min(100, score))}%` }}
+      />
+    </div>
+  )
+}
+
+export function ScorePill({ score }: { score: number }) {
+  const meta = gradeMeta(gradeFromScore(score))
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${meta.bg} ${meta.text}`}
+    >
+      <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
+      {score}
+    </span>
+  )
+}
+
+// ─── Layout cards + states ───────────────────────────────────────────
+
+export function SectionCard({
+  title,
+  description,
+  action,
+  children,
+  className = '',
+}: {
+  title?: string
+  description?: string
+  action?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <Card padding="none" className={className} role="region">
+      {(title || action) && (
+        <CardHeader className="flex items-center justify-between gap-3">
+          <div className="min-w-0">
+            {title && <CardTitle>{title}</CardTitle>}
+            {description && <CardDescription>{description}</CardDescription>}
+          </div>
+          {action}
+        </CardHeader>
+      )}
+      <CardContent className={title || action ? '' : 'pt-6!'}>{children}</CardContent>
+    </Card>
+  )
+}
+
+export function SeoLoading({ label = 'Loading…' }: { label?: string }) {
+  return (
+    <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>
+  )
+}
+
+export function SeoEmptyState({
+  icon,
+  title,
+  description,
+  action,
+}: {
+  icon?: ReactNode
+  title: string
+  description?: string
+  action?: ReactNode
+}) {
+  return (
+    <div className="border-border flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-12 text-center">
+      {icon && (
+        <div className="text-muted-foreground mb-3" aria-hidden>
+          {icon}
+        </div>
+      )}
+      <h3 className="text-foreground text-base font-medium">{title}</h3>
+      {description && <p className="text-muted-foreground mt-1 max-w-md text-sm">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}
+
+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-4"
+      role="alert"
+    >
+      <AlertTriangle className="text-destructive h-5 w-5 shrink-0" aria-hidden />
+      <span className="text-destructive flex-1 text-sm">{message}</span>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm transition-colors"
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ─── Button helpers (token-only) ─────────────────────────────────────
+
+export const btnPrimary =
+  'inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnSecondary =
+  'inline-flex items-center justify-center gap-2 rounded-md border border-border bg-card px-4 py-2 text-base font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60'
+
+export const btnGhostIcon =
+  'inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'

package/src/components/ui/AuthorAvatar.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+/**
+ * Deterministic per-author avatar: a colored circle with the author's
+ * initials, hashed from the name so the color is stable across renders
+ * and views without storing anything. Shared by the Dashboard activity
+ * feed and the Pages/Posts list tables so an author always looks the
+ * same everywhere.
+ *
+ * The palette is intentionally raw hex applied via inline style — the
+ * design-system exception for truly dynamic values (see Dashboard.tsx
+ * note). All swatches keep ≥4.5:1 contrast with white text.
+ */
+const AVATAR_COLORS = [
+  '#7C3AED', // purple
+  '#E11D48', // rose
+  '#059669', // emerald
+  '#0891B2', // cyan
+  '#D97706', // amber
+  '#4F46E5', // indigo
+  '#DC2626', // red
+] as const
+
+function hashString(s: string): number {
+  let h = 0
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0
+  return Math.abs(h)
+}
+
+export function authorAvatar(name: string | null | undefined): {
+  color: string
+  initials: string
+} {
+  const safe = (name ?? '').trim() || 'User'
+  const parts = safe.split(/\s+/).filter(Boolean)
+  const initials =
+    parts.length >= 2
+      ? `${parts[0]![0]}${parts[parts.length - 1]![0]}`.toUpperCase()
+      : safe.slice(0, 2).toUpperCase()
+  const color = AVATAR_COLORS[hashString(safe) % AVATAR_COLORS.length]!
+  return { color, initials }
+}
+
+export function AuthorAvatar({
+  name,
+  size = 28,
+  className = '',
+}: {
+  name: string | null | undefined
+  /** Diameter in px. Font size scales with it. */
+  size?: number
+  className?: string
+}) {
+  const { color, initials } = authorAvatar(name)
+  return (
+    <span
+      aria-hidden
+      className={`inline-flex shrink-0 items-center justify-center rounded-full font-medium text-white ${className}`}
+      style={{
+        width: size,
+        height: size,
+        background: color,
+        fontSize: Math.max(9, Math.round(size * 0.4)),
+      }}
+    >
+      {initials}
+    </span>
+  )
+}

package/src/components/ui/Avatar.tsx

@@ -0,0 +1,42 @@
+type AvatarSize = 'sm' | 'md' | 'lg'
+
+export interface AvatarProps {
+  src?: string | null
+  name?: string
+  size?: AvatarSize
+}
+
+const sizeClasses: Record<AvatarSize, string> = {
+  sm: 'h-6 w-6 text-[10px]',
+  md: 'h-9 w-9 text-xs',
+  lg: 'h-12 w-12 text-sm',
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((part) => part.charAt(0))
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+}
+
+export function Avatar({ src, name = '', size = 'md' }: AvatarProps) {
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={name}
+        className={`inline-block shrink-0 rounded-full object-cover ${sizeClasses[size]}`}
+      />
+    )
+  }
+
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--primary)] font-medium text-[var(--primary-foreground)] ${sizeClasses[size]}`}
+    >
+      {getInitials(name) || '?'}
+    </span>
+  )
+}

package/src/components/ui/Badge.tsx

@@ -0,0 +1,79 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const badge = cv('inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', {
+  variants: {
+    tone: {
+      neutral: 'bg-muted text-muted-foreground',
+      success: 'bg-success/10 text-success',
+      warning: 'bg-warning/10 text-warning',
+      danger: 'bg-destructive/10 text-destructive',
+      info: 'bg-info/10 text-info',
+      primary: 'bg-[var(--primary)]/15 text-[var(--primary)] dark:bg-[var(--primary)]/25',
+    },
+    size: {
+      sm: 'px-2 py-0.5 text-[10px]',
+      md: 'px-2.5 py-0.5 text-xs',
+      lg: 'px-3 py-1 text-sm',
+    },
+  },
+  defaultVariants: { tone: 'neutral', size: 'md' },
+})
+
+export type BadgeVariants = VariantProps<typeof badge>
+
+/**
+ * Map document statuses to badge tones. Exposed so callers can reuse the
+ * mapping (e.g. for the same status rendered as a dot indicator).
+ */
+export const STATUS_TONE: Record<DocumentStatus, BadgeVariants['tone']> = {
+  published: 'success',
+  draft: 'neutral',
+  archived: 'warning',
+  scheduled: 'info',
+}
+
+export const STATUS_LABEL: Record<DocumentStatus, string> = {
+  published: 'Published',
+  draft: 'Draft',
+  archived: 'Archived',
+  scheduled: 'Scheduled',
+}
+
+export type DocumentStatus = 'published' | 'draft' | 'archived' | 'scheduled'
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BadgeVariants {
+  /**
+   * Shorthand for the canonical document status badge. When set, takes
+   * precedence over `tone` and uses the matching label.
+   */
+  status?: DocumentStatus
+  /** Render as outlined (border + transparent background). */
+  outline?: boolean
+  children?: ReactNode
+}
+
+const OUTLINE_CLASS = 'border border-current bg-transparent'
+
+/**
+ * Generic typed badge. Pass `status` for the canonical document-status
+ * variants (preserves the original Badge API), or `tone` / `outline` /
+ * `size` for everything else.
+ */
+export function Badge({ status, tone, outline, size, className, children, ...rest }: BadgeProps) {
+  const extras = [outline ? OUTLINE_CLASS : '', className].filter(Boolean).join(' ')
+  if (status) {
+    return (
+      <span className={badge({ tone: STATUS_TONE[status], size, class: extras })} {...rest}>
+        {children ?? STATUS_LABEL[status]}
+      </span>
+    )
+  }
+  return (
+    <span className={badge({ tone, size, class: extras })} {...rest}>
+      {children}
+    </span>
+  )
+}
+
+export { badge as badgeVariants }

package/src/components/ui/Button.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const button = cv(
+  // Base classes apply to every variant.
+  'focus-visible:ring-offset-background inline-flex items-center justify-center gap-2 rounded-[var(--r-control)] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:opacity-90',
+        secondary: 'bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:opacity-80',
+        danger: 'bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:opacity-90',
+        ghost: 'bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]',
+        outline:
+          'border border-[var(--border)] bg-transparent text-[var(--foreground)] hover:bg-[var(--accent)]',
+        link: 'bg-transparent text-[var(--primary)] underline-offset-4 hover:underline',
+      },
+      size: {
+        xs: 'h-7 px-2 text-xs',
+        sm: 'h-8 px-2.5 text-xs',
+        md: 'h-9 px-4 text-sm',
+        lg: 'h-10 px-6 text-base',
+        icon: 'h-9 w-9 p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof button>
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariants {
+  loading?: boolean
+  /** Stretch the button to fill its container width. */
+  full?: boolean
+  /** Icon rendered before the children. Use with `size="icon"` for icon-only buttons. */
+  leftIcon?: ReactNode
+  /** Icon rendered after the children. */
+  rightIcon?: ReactNode
+  children?: ReactNode
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant,
+    size,
+    full,
+    loading = false,
+    disabled,
+    leftIcon,
+    rightIcon,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      className={button({
+        variant,
+        size,
+        class: [full ? 'w-full' : '', className].filter(Boolean).join(' '),
+      })}
+      {...rest}
+    >
+      {loading ? (
+        <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden>
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+          />
+        </svg>
+      ) : (
+        leftIcon
+      )}
+      {children}
+      {!loading && rightIcon}
+    </button>
+  )
+})
+
+export { button as buttonVariants }