@prenta/admin 0.92.0 → 0.93.0

package/src/components/ZoomChip.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { Zoom } from '../lib/breakpoints.js'
+
+export interface ZoomChipProps {
+  /** Current zoom mode. */
+  zoom: Zoom
+  /** Actual rendered scale, 0–1 — what the canvas measured, not the mode. */
+  scale: number
+  onChange: (zoom: Zoom) => void
+}
+
+/**
+ * Reads out the canvas scale and toggles fit ↔ 100%.
+ *
+ * It shows the *measured* scale rather than the mode, because "fit" is not a
+ * number an editor can reason about — at 1920px in a narrow rail it might be
+ * 38%, and that is the fact that explains why the preview looks small.
+ */
+export function ZoomChip({ zoom, scale, onChange }: ZoomChipProps) {
+  const percent = Math.round(scale * 100)
+  const next: Zoom = zoom === 'fit' ? 1 : 'fit'
+
+  return (
+    <button
+      type="button"
+      onClick={() => onChange(next)}
+      aria-label={
+        zoom === 'fit'
+          ? `Canvas scaled to ${percent} percent to fit. Switch to actual size.`
+          : 'Canvas at actual size. Switch to fit.'
+      }
+      title={zoom === 'fit' ? 'Fit to window — click for 100%' : 'Actual size — click to fit'}
+      className="border-border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground h-[34px] min-w-[54px] rounded-lg border px-2 text-[11.5px] font-semibold tabular-nums transition-colors"
+    >
+      {percent}%
+    </button>
+  )
+}

package/src/components/breakpoint-icons.ts

@@ -0,0 +1,17 @@
+import { Laptop, Monitor, Smartphone, Tablet, type LucideIcon } from 'lucide-react'
+
+/**
+ * Maps a breakpoint's `icon` name to its component. Kept out of
+ * `lib/breakpoints.ts` so that module stays free of React imports — it is pure
+ * data and arithmetic, and its tests run without a DOM.
+ */
+const ICONS: Record<string, LucideIcon> = {
+  monitor: Monitor,
+  laptop: Laptop,
+  tablet: Tablet,
+  smartphone: Smartphone,
+}
+
+export function breakpointIcon(name: string): LucideIcon {
+  return ICONS[name] ?? Monitor
+}

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

@@ -0,0 +1,240 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ChevronDown, Globe } from 'lucide-react'
+import { cmsApi } from '../../lib/api.js'
+
+interface CmsUser {
+  id: string
+  name?: string | null
+  email?: string | null
+  role?: string | null
+}
+
+export interface AuthorValue {
+  /** Displayed byline. Empty means no byline is set. */
+  name: string
+  /** CMS user id, when the byline is one. Empty for generic and guest. */
+  id: string
+}
+
+export interface AuthorPickerProps {
+  value: AuthorValue
+  onChange: (next: AuthorValue) => void
+  /** Brand byline offered under GENERIC — usually the site or org name. */
+  brandName?: string
+  disabled?: boolean
+}
+
+/**
+ * Byline picker: a CMS user, the brand, or a one-off guest name.
+ *
+ * ── What this does and does not change ────────────────────────────────────
+ *
+ * It sets the page's DISPLAYED author, which reaches the page's structured
+ * data. It does not reassign the document's `createdById` — that records who
+ * created the record, and trading an audit trail for a label is not a swap
+ * worth making silently. A page written by a staff editor and bylined to the
+ * brand is a normal thing; a page whose history says someone else made it is
+ * not.
+ *
+ * The menu renders inline below the trigger rather than floating. The rail is
+ * narrow and scrollable, and a floating menu inside a scroll container either
+ * clips or detaches from its trigger on scroll.
+ */
+export function AuthorPicker({ value, onChange, brandName, disabled = false }: AuthorPickerProps) {
+  const [open, setOpen] = useState(false)
+  const [users, setUsers] = useState<CmsUser[]>([])
+  const [guest, setGuest] = useState('')
+
+  useEffect(() => {
+    if (!open || users.length > 0) return
+    let cancelled = false
+    cmsApi<CmsUser[] | { users?: CmsUser[] }>('/users').then((res) => {
+      if (cancelled || !res.data) return
+      const list = Array.isArray(res.data) ? res.data : (res.data.users ?? [])
+      setUsers(list)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [open, users.length])
+
+  const isGeneric = Boolean(brandName) && value.name === brandName && !value.id
+  const label = value.name || 'No byline'
+  const sub = value.id
+    ? (users.find((u) => u.id === value.id)?.role ?? 'CMS user')
+    : isGeneric
+      ? 'Brand byline'
+      : value.name
+        ? 'Guest byline'
+        : 'None set'
+
+  function pick(next: AuthorValue) {
+    onChange(next)
+    setOpen(false)
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        disabled={disabled}
+        aria-expanded={open}
+        className="border-border bg-card hover:border-ring flex w-full items-center gap-2.5 rounded-[7px] border-[1.5px] px-2.5 py-[7px] text-left transition-colors disabled:opacity-50"
+      >
+        <Avatar name={value.name} generic={isGeneric} />
+        <span className="min-w-0 flex-1">
+          <span className="text-foreground block truncate text-[12.5px] font-semibold">
+            {label}
+          </span>
+          <span className="text-muted-foreground block text-[10.5px]">{sub}</span>
+        </span>
+        <ChevronDown
+          size={14}
+          aria-hidden
+          className={`text-muted-foreground shrink-0 motion-safe:transition-transform ${open ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {open && (
+        <div className="border-border mt-1.5 space-y-2 rounded-[9px] border p-2">
+          <Group label="CMS users">
+            {users.length === 0 ? (
+              <p className="text-muted-foreground px-1 py-1.5 text-[11px]">Loading…</p>
+            ) : (
+              users.map((u) => {
+                const name = u.name || u.email || 'Unnamed user'
+                return (
+                  <Row
+                    key={u.id}
+                    selected={value.id === u.id}
+                    onClick={() => pick({ name, id: u.id })}
+                  >
+                    <Avatar name={name} />
+                    <span className="min-w-0">
+                      <span className="block truncate text-[12px] font-medium">{name}</span>
+                      <span className="text-muted-foreground block text-[10px]">
+                        {u.role ?? 'Author'}
+                      </span>
+                    </span>
+                  </Row>
+                )
+              })
+            )}
+          </Group>
+
+          {brandName && (
+            <Group label="Generic">
+              <Row selected={isGeneric} onClick={() => pick({ name: brandName, id: '' })}>
+                <Avatar name={brandName} generic />
+                <span className="text-[12px] font-medium">{brandName}</span>
+              </Row>
+            </Group>
+          )}
+
+          <Group label="Guest byline">
+            <div className="flex gap-1.5 px-1">
+              <input
+                value={guest}
+                onChange={(e) => setGuest(e.target.value)}
+                placeholder="Name to display"
+                aria-label="Guest byline name"
+                className="border-border bg-input-background focus-visible:border-ring min-w-0 flex-1 rounded-md border px-2 py-1 text-[11.5px] focus-visible:outline-none"
+              />
+              <button
+                type="button"
+                // Disabled until non-empty: an empty guest byline would clear
+                // the author while looking like it set one.
+                disabled={guest.trim().length === 0}
+                onClick={() => {
+                  pick({ name: guest.trim(), id: '' })
+                  setGuest('')
+                }}
+                className="bg-primary text-primary-foreground rounded-md px-2 py-1 text-[11px] font-semibold disabled:opacity-40"
+              >
+                Add
+              </button>
+            </div>
+          </Group>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function Group({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <p className="text-muted-foreground px-1 pb-1 text-[9.5px] font-bold tracking-wide uppercase">
+        {label}
+      </p>
+      <div className="space-y-0.5">{children}</div>
+    </div>
+  )
+}
+
+function Row({
+  selected,
+  onClick,
+  children,
+}: {
+  selected: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-current={selected || undefined}
+      className={`flex w-full items-center gap-2 rounded-md px-1.5 py-1.5 text-left transition-colors ${
+        selected ? 'bg-accent' : 'hover:bg-accent/60'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+
+/**
+ * Initials on a tint derived from the name, so the same person is the same
+ * colour everywhere without storing one. A globe replaces initials for the
+ * brand byline — "Ex" for "Example Inc" reads as a person, which is the one
+ * thing the generic option is not.
+ */
+function Avatar({ name, generic = false }: { name: string; generic?: boolean }) {
+  if (generic) {
+    return (
+      <span className="bg-muted text-muted-foreground flex h-[27px] w-[27px] shrink-0 items-center justify-center rounded-full">
+        <Globe size={14} aria-hidden />
+      </span>
+    )
+  }
+
+  const initials =
+    name
+      .trim()
+      .split(/\s+/)
+      .slice(0, 2)
+      .map((w) => w[0] ?? '')
+      .join('')
+      .toUpperCase() || '—'
+
+  let hash = 0
+  for (let i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) % 360
+
+  return (
+    <span
+      aria-hidden
+      className="flex h-[27px] w-[27px] shrink-0 items-center justify-center rounded-full text-[10px] font-bold"
+      style={{
+        backgroundColor: `oklch(0.92 0.05 ${hash})`,
+        color: `oklch(0.42 0.12 ${hash})`,
+      }}
+    >
+      {initials}
+    </span>
+  )
+}

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

@@ -0,0 +1,86 @@
+'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}`}
+          className={`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>
+  )
+}