@prenta/admin 0.92.0 → 0.94.0

package/src/components/page-tab/DirectiveSwitch.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import * as Switch from '@radix-ui/react-switch'
+
+export interface DirectiveSwitchProps {
+  id: string
+  /** Human label, e.g. "Show in search results". */
+  label: string
+  /** One line on what turning it off actually costs. */
+  hint?: string
+  /** `true` = permissive. */
+  checked: boolean
+  onChange: (next: boolean) => void
+  /** Directive token when permitted, e.g. `index`. */
+  permissiveToken: string
+  /** Directive token when restricted, e.g. `noindex`. */
+  restrictiveToken: string
+  disabled?: boolean
+}
+
+/**
+ * A robots-directive switch.
+ *
+ * ── Why this is not the ordinary Toggle ───────────────────────────────────
+ *
+ * The admin's `Toggle` turns brand purple when on, because "on" is the state
+ * the product is nudging you towards. That reading is wrong here. These
+ * switches are not on/off, they are permissive/restrictive — and the meaningful
+ * distinction is not "did I enable something" but "is this page still allowed
+ * to be found". Purple would say "enabled" about a switch whose enabled state
+ * is simply the default, and say nothing about the one state worth noticing.
+ *
+ * So: green when permitted, red when restricted. And the literal directive
+ * token sits beside it, because the failure this UI has to prevent is an editor
+ * flipping something whose consequence they could not name. `noindex` next to
+ * the switch turns an abstract toggle into the thing it actually writes into
+ * the page's head.
+ *
+ * Colour never carries it alone — the token chip is text, and the switch's
+ * accessible name states the label and the token it will produce.
+ */
+export function DirectiveSwitch({
+  id,
+  label,
+  hint,
+  checked,
+  onChange,
+  permissiveToken,
+  restrictiveToken,
+  disabled = false,
+}: DirectiveSwitchProps) {
+  const token = checked ? permissiveToken : restrictiveToken
+
+  return (
+    <div className="flex items-start justify-between gap-3 py-1.5">
+      <div className="min-w-0">
+        <label htmlFor={id} className="text-foreground block text-[12.5px] font-medium">
+          {label}
+        </label>
+        {hint && <p className="text-muted-foreground mt-0.5 text-[11px] leading-snug">{hint}</p>}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2">
+        <code
+          className={`rounded px-1.5 py-0.5 font-mono text-[9.5px] font-bold ${
+            checked ? 'bg-success/12 text-success' : 'bg-destructive/12 text-destructive'
+          }`}
+        >
+          {token}
+        </code>
+        <Switch.Root
+          id={id}
+          checked={checked}
+          onCheckedChange={onChange}
+          disabled={disabled}
+          aria-label={`${label} — currently ${token}`}
+          // `prenta-touch-hit`, not `prenta-touch-target`: growing the track to
+          // 44px would strand the thumb, which is positioned against it. The
+          // hit area grows; the switch keeps its measured 34×19.
+          className={`prenta-touch-hit focus-visible:ring-ring relative h-[19px] w-[34px] shrink-0 rounded-full transition-colors duration-(--mo-base) focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50 ${
+            checked ? 'bg-success' : 'bg-destructive/55'
+          }`}
+        >
+          <Switch.Thumb className="block h-3.5 w-3.5 translate-x-[2.5px] rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.25)] transition-transform duration-(--mo-base) data-[state=checked]:translate-x-[18px]" />
+        </Switch.Root>
+      </div>
+    </div>
+  )
+}

package/src/components/seo/EditorSeoScoreBadge.tsx

@@ -5,13 +5,21 @@ 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,
+  band,
   inverted = false,
 }: {
   score: number
+  /**
+   * Band for the colour. Supplied by the caller because different scores use
+   * different scales: the page audit bands at 80/55, `analyzeContent` at
+   * 80/60/1. Deriving it here would colour one model's number with another
+   * model's thresholds — they disagree between 55 and 59.
+   */
+  band?: 'good' | 'fair' | 'poor'
   /** When the SEO toggle uses `bg-primary`, render score in primary-foreground. */
   inverted?: boolean
 }) {
-  const meta = gradeMeta(gradeFromScore(score))
+  const meta = gradeMeta(band ?? gradeFromScore(score))
   return (
     <span
       className={`inline-flex items-baseline gap-0.5 text-xs font-medium tabular-nums ${

package/src/components/seo/PageAuditPanel.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+import { useState } from 'react'
+import { ChevronDown, Search, Sparkles } from 'lucide-react'
+import {
+  scoreBand,
+  type AuditCheck,
+  type AuditGroupResult,
+  type PageAuditResult,
+} from '@prenta/core/seo/page-audit'
+
+const BAND_TEXT = { good: 'text-success', fair: 'text-warning', poor: 'text-destructive' } as const
+const BAND_STROKE = {
+  good: 'stroke-success',
+  fair: 'stroke-warning',
+  poor: 'stroke-destructive',
+} as const
+
+/**
+ * A 52px score ring.
+ *
+ * `null` is a real state, not an error: a page held back from search has no
+ * search performance to rate. It renders as a dash on a neutral track rather
+ * than an alarming zero.
+ */
+function ScoreRing({ score, label }: { score: number | null; label: string }) {
+  const R = 21
+  const CIRCUMFERENCE = 2 * Math.PI * R
+  const band = score === null ? null : scoreBand(score)
+  const dash = score === null ? 0 : (score / 100) * CIRCUMFERENCE
+
+  return (
+    <svg
+      width="52"
+      height="52"
+      viewBox="0 0 52 52"
+      role="img"
+      aria-label={score === null ? `${label}: not rated` : `${label} score: ${score} of 100`}
+    >
+      <circle cx="26" cy="26" r={R} className="stroke-border" strokeWidth="5" fill="none" />
+      {score !== null && (
+        <circle
+          cx="26"
+          cy="26"
+          r={R}
+          className={`${BAND_STROKE[band!]} motion-safe:transition-[stroke-dasharray,stroke] motion-safe:duration-350`}
+          strokeWidth="5"
+          fill="none"
+          strokeLinecap="round"
+          strokeDasharray={`${dash} ${CIRCUMFERENCE - dash}`}
+          // Start the arc at twelve o'clock instead of three.
+          transform="rotate(-90 26 26)"
+        />
+      )}
+      <text
+        x="26"
+        y="26"
+        textAnchor="middle"
+        dominantBaseline="central"
+        className={`fill-current text-[15px] font-bold tabular-nums ${
+          band ? BAND_TEXT[band] : 'text-muted-foreground'
+        }`}
+      >
+        {score === null ? '—' : score}
+      </text>
+    </svg>
+  )
+}
+
+function CheckRow({ check }: { check: AuditCheck }) {
+  const na = check.outcome === 'not-applicable'
+  const pass = check.outcome === 'pass'
+
+  return (
+    <li className="border-border flex gap-2 border-b py-[7px] last:border-b-0">
+      <span
+        aria-hidden
+        className={`mt-0.5 h-4 w-4 shrink-0 rounded ${
+          na ? 'bg-muted' : pass ? 'bg-success/15 text-success' : 'bg-warning/15 text-warning'
+        }`}
+      />
+      <div className="min-w-0">
+        <p className={`text-xs font-medium ${na ? 'text-muted-foreground' : 'text-foreground'}`}>
+          {check.label}
+          {/* The outcome must not rest on the colour of the square alone. */}
+          <span className="sr-only">
+            {na ? ' — not applicable' : pass ? ' — passing' : ' — needs attention'}
+          </span>
+        </p>
+        {/* A not-applicable check explains itself; a failing one says what to do.
+            A passing one needs neither. */}
+        {na ? (
+          <p className="text-muted-foreground text-[10.5px]">{check.naReason}</p>
+        ) : pass ? null : (
+          <p className="text-muted-foreground text-[10.5px]">{check.hint}</p>
+        )}
+      </div>
+    </li>
+  )
+}
+
+function CheckGroup({ result, title }: { result: AuditGroupResult; title: string }) {
+  const [open, setOpen] = useState(true)
+  const band = result.score === null ? null : scoreBand(result.score)
+
+  return (
+    <section className="border-border border-b">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        aria-expanded={open}
+        className="hover:bg-accent flex w-full items-center justify-between px-3.5 py-2.5 transition-colors"
+      >
+        <span className="text-muted-foreground text-[10px] font-bold tracking-[0.7px] uppercase">
+          {title}
+        </span>
+        <span className="flex items-center gap-1.5">
+          {/* The pill counts SCORED checks. Gates and not-applicable checks are
+              listed below but excluded, so the denominator matches the score. */}
+          <span
+            className={`rounded-full px-1.5 text-[10px] font-bold tabular-nums ${
+              band === 'good'
+                ? 'bg-success/15 text-success'
+                : band === 'fair'
+                  ? 'bg-warning/15 text-warning'
+                  : band === 'poor'
+                    ? 'bg-destructive/15 text-destructive'
+                    : 'bg-muted text-muted-foreground'
+            }`}
+          >
+            {result.score === null ? 'n/a' : `${result.passed}/${result.applicable}`}
+          </span>
+          <ChevronDown
+            className={`text-muted-foreground h-3.5 w-3.5 transition-transform ${open ? 'rotate-180' : ''}`}
+            aria-hidden
+          />
+        </span>
+      </button>
+      {open && (
+        <ul className="px-3.5 pb-3.5">
+          {result.checks.map((c) => (
+            <CheckRow key={c.id} check={c} />
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}
+
+export interface PageAuditPanelProps {
+  audit: PageAuditResult
+}
+
+/**
+ * Twin score rings over the SEO and GEO check lists.
+ *
+ * Both scores are reported the same way and neither is folded into a single
+ * headline: classic search and AI answer visibility fail for different reasons
+ * and are fixed by different edits, so averaging them would hide whichever is
+ * worse.
+ */
+export function PageAuditPanel({ audit }: PageAuditPanelProps) {
+  const { seo, geo } = audit
+
+  return (
+    <div className="border-border border-b">
+      <div className="flex items-start justify-around gap-3 px-3.5 py-4">
+        {[
+          { r: seo, icon: Search, label: 'SEO', sub: 'Classic search & crawlability' },
+          { r: geo, icon: Sparkles, label: 'GEO', sub: 'AI answer visibility' },
+        ].map(({ r, icon: Icon, label, sub }) => (
+          <div key={label} className="flex min-w-0 flex-col items-center gap-1.5 text-center">
+            <ScoreRing score={r.score} label={label} />
+            <span className="text-foreground flex items-center gap-1 text-xs font-bold">
+              <Icon className="h-3 w-3" aria-hidden />
+              {label}
+            </span>
+            <span className="text-muted-foreground text-[10.5px] leading-tight">{sub}</span>
+            {/* Names the denominator, so a score that moves because the set of
+                applicable checks changed is explainable rather than mysterious. */}
+            <span className="text-muted-foreground text-[10px] tabular-nums">
+              {r.score === null ? 'not rated' : `${r.applicable} of ${r.total} apply`}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <CheckGroup result={seo} title="SEO checks" />
+      <CheckGroup result={geo} title="GEO checks" />
+    </div>
+  )
+}

package/src/components/seo/SeoCharCount.tsx

@@ -1,44 +1,75 @@
 'use client'
 
-import { Check, AlertTriangle } from 'lucide-react'
+import { AlertTriangle, Check } from 'lucide-react'
 
 export interface SeoCharCountProps {
   value: string
-  /** Recommended minimum length (inclusive). */
-  min: number
+  /**
+   * Recommended minimum length (inclusive). Omit for cap-only fields, where
+   * short is not a fault — there is then no "too short" state and no "good",
+   * because there is no target to hit, only a ceiling not to cross.
+   */
+  min?: number
   /** Recommended/hard maximum length (inclusive). */
   max: number
+  /** Hide the meter bar where vertical space is tight. */
+  bar?: boolean
 }
 
 /**
- * A length counter with an accessible quality band for SEO fields. Color is
- * always paired with an icon + label so meaning is never conveyed by color
- * alone (WCAG). "Good" = within [min, max]; "long" (over max) is the only
- * destructive state; below min is a neutral hint.
+ * Length readout for an SEO field: a meter bar plus a stated count.
+ *
+ * Under and over are different problems and are named as such. "Too short"
+ * means search engines have less to match on; "will be truncated" means the
+ * tail is written but nobody will read it. The previous wording collapsed the
+ * short case into "aim for 30–60", which describes the target without saying
+ * which way to edit.
+ *
+ * Colour never carries meaning alone — the band is always spelled out in text,
+ * with an icon at the two decisive states.
  */
-export function SeoCharCount({ value, min, max }: SeoCharCountProps) {
+export function SeoCharCount({ value, min, max, bar = true }: SeoCharCountProps) {
   const len = value.trim().length
   const empty = len === 0
-  const long = len > max
-  const good = !empty && len >= min && len <= max
+  const over = len > max
+  const under = min !== undefined && !empty && len < min
+  const good = min !== undefined && !empty && !over && !under
 
-  const tone = long ? 'text-destructive' : 'text-muted-foreground'
-  const label = empty
-    ? `0/${max}`
-    : long
-      ? `${len}/${max} · too long`
+  const tone = over
+    ? 'text-destructive'
+    : under
+      ? 'text-warning'
       : good
-        ? `${len}/${max} · good`
-        : `${len}/${max} · aim for ${min}–${max}`
+        ? 'text-success'
+        : 'text-muted-foreground'
+
+  const fill = over ? 'bg-destructive' : under ? 'bg-warning' : good ? 'bg-success' : 'bg-border'
+
+  // Derived from `good`, not from "everything else": a cap-only field has no
+  // good state, and an unconditional else branch was labelling five characters
+  // in a 200-character field as "good".
+  const suffix = over ? ' · will be truncated' : under ? ' · too short' : good ? ' · good' : ''
 
   return (
-    <span className={`inline-flex items-center gap-1 text-xs ${tone}`}>
-      {long ? (
-        <AlertTriangle size={12} aria-hidden="true" />
-      ) : good ? (
-        <Check size={12} aria-hidden="true" />
-      ) : null}
-      {label}
+    <span className="inline-flex min-w-0 flex-col items-end gap-1">
+      {bar && (
+        <span className="bg-border h-0.75 w-20 overflow-hidden rounded-full" aria-hidden>
+          <span
+            className={`block h-full rounded-full transition-[width] ${fill}`}
+            // Past the maximum the bar stays full and the overflow is reported
+            // in words. A bar that kept growing would imply more is better.
+            style={{ width: `${Math.min(100, (len / max) * 100)}%` }}
+          />
+        </span>
+      )}
+      <span className={`inline-flex items-center gap-1 text-[11px] whitespace-nowrap ${tone}`}>
+        {over ? (
+          <AlertTriangle size={11} aria-hidden />
+        ) : good ? (
+          <Check size={11} aria-hidden />
+        ) : null}
+        {len} / {max} characters{suffix}
+      </span>
     </span>
   )
 }