@prenta/admin 0.92.0 → 0.93.0

package/src/components/EditorRail.tsx

@@ -0,0 +1,219 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
+import {
+  RAIL_COLLAPSED_WIDTH,
+  RAIL_DEFAULT_WIDTH,
+  RAIL_MAX_WIDTH,
+  RAIL_MIN_WIDTH,
+  clampRailWidth,
+  readRailWidth,
+  writeRailWidth,
+} from '../lib/rail-width.js'
+
+/** What the rail hands its children so they can render a header. */
+export interface RailState {
+  width: number
+  dragging: boolean
+  collapse: () => void
+}
+
+export interface EditorRailProps {
+  /** Short label for the collapsed strip — normally the active tab's name. */
+  collapsedLabel: string
+  children: (state: RailState) => React.ReactNode
+}
+
+/**
+ * The editor's left rail: resizable, collapsible, and width-persistent.
+ *
+ * Collapsing UNMOUNTS the rail and swaps in a narrow strip rather than
+ * animating its width to zero. A zero-width panel leaves a visible sliver of
+ * border and keeps its contents in the accessibility tree, so a screen-reader
+ * user lands inside a panel sighted users cannot see.
+ *
+ * Children are a render prop rather than plain nodes because the panel header
+ * needs the live width and drag state — the numbers the rail owns — and
+ * threading them through context for one consumer is more machinery than the
+ * problem deserves.
+ */
+export function EditorRail({ collapsedLabel, children }: EditorRailProps) {
+  const [width, setWidth] = useState(RAIL_DEFAULT_WIDTH)
+  const [open, setOpen] = useState(true)
+  const [dragging, setDragging] = useState(false)
+  const railRef = useRef<HTMLDivElement>(null)
+
+  // Read persisted width after mount, never during render: there is no
+  // localStorage on the server, and seeding initial state from it would
+  // hydrate-mismatch.
+  useEffect(() => {
+    setWidth(readRailWidth())
+  }, [])
+
+  const applyWidth = useCallback((next: number) => {
+    const clamped = clampRailWidth(next)
+    setWidth(clamped)
+    writeRailWidth(clamped)
+  }, [])
+
+  const collapse = useCallback(() => setOpen(false), [])
+
+  // Pointer listeners go on `window`, not the handle: the pointer routinely
+  // outruns a 7px target mid-drag, and a handle-local listener would drop the
+  // drag the moment it did.
+  useEffect(() => {
+    if (!dragging) return
+
+    const onMove = (event: PointerEvent) => {
+      const left = railRef.current?.getBoundingClientRect().left ?? 0
+      applyWidth(event.clientX - left)
+    }
+    const stop = () => setDragging(false)
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', stop)
+    window.addEventListener('pointercancel', stop)
+
+    // Lock cursor and selection for the duration. Without this the cursor
+    // flickers between col-resize and text as it crosses elements, and the
+    // drag selects the panel's copy.
+    const { body } = document
+    const prevCursor = body.style.cursor
+    const prevSelect = body.style.userSelect
+    body.style.cursor = 'col-resize'
+    body.style.userSelect = 'none'
+
+    return () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', stop)
+      window.removeEventListener('pointercancel', stop)
+      body.style.cursor = prevCursor
+      body.style.userSelect = prevSelect
+    }
+  }, [dragging, applyWidth])
+
+  if (!open) {
+    return (
+      <div
+        className="bg-card border-border flex shrink-0 flex-col items-center gap-3 border-r py-3"
+        style={{ width: RAIL_COLLAPSED_WIDTH }}
+      >
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          aria-label={`Expand ${collapsedLabel} panel`}
+          title={`Expand ${collapsedLabel} panel`}
+          className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
+        >
+          <PanelLeftOpen className="h-4 w-4" aria-hidden />
+        </button>
+        {/* Vertical label so the strip still says which panel is hidden. The
+            button's accessible name already carries it, hence aria-hidden. */}
+        <span
+          className="text-muted-foreground text-[10px] font-bold tracking-[0.8px] whitespace-nowrap uppercase [writing-mode:vertical-rl]"
+          aria-hidden
+        >
+          {collapsedLabel}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={railRef}
+      className={`bg-card border-border relative flex shrink-0 flex-col border-r ${
+        // A width transition during a drag fights the pointer: the panel
+        // chases the cursor a frame behind and the resize feels broken.
+        dragging ? '' : 'motion-safe:transition-[width] motion-safe:duration-(--mo-slow)'
+      }`}
+      style={{ width }}
+    >
+      <div className="flex min-h-0 flex-1 flex-col">{children({ width, dragging, collapse })}</div>
+
+      <div
+        // `separator` with an orientation and a value range is what makes this
+        // operable without a pointer. A bare div with a pointerdown handler is
+        // invisible to keyboard and assistive-tech users.
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize panel"
+        aria-valuenow={width}
+        aria-valuemin={RAIL_MIN_WIDTH}
+        aria-valuemax={RAIL_MAX_WIDTH}
+        tabIndex={0}
+        onPointerDown={(event) => {
+          event.preventDefault()
+          setDragging(true)
+        }}
+        onDoubleClick={() => applyWidth(RAIL_DEFAULT_WIDTH)}
+        onKeyDown={(event) => {
+          const step = event.shiftKey ? 48 : 16
+          if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            applyWidth(width - step)
+          } else if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            applyWidth(width + step)
+          } else if (event.key === 'Home') {
+            event.preventDefault()
+            applyWidth(RAIL_DEFAULT_WIDTH)
+          }
+        }}
+        className="group absolute inset-y-0 -right-[3px] z-30 w-[7px] cursor-col-resize focus-visible:outline-none"
+      >
+        {/* The 2px line it draws sits inside a 7px hit area on purpose — a 2px
+            pointer target is a coin flip. */}
+        <span
+          aria-hidden
+          className={`pointer-events-none absolute inset-y-0 left-[2.5px] w-0.5 transition-colors ${
+            dragging
+              ? 'bg-brand'
+              : 'group-hover:bg-brand group-focus-visible:bg-brand bg-transparent'
+          }`}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Header strip under the rail's tabs: panel title, the live width while
+ * dragging, and the collapse control.
+ */
+export function RailHeader({
+  title,
+  width,
+  dragging,
+  onCollapse,
+}: {
+  title: string
+  width: number
+  dragging: boolean
+  onCollapse: () => void
+}) {
+  return (
+    <div className="border-border flex items-center justify-between gap-2 border-b px-3.5 py-2.5">
+      <h2 className="text-foreground truncate text-[12.5px] font-semibold">{title}</h2>
+      <div className="flex shrink-0 items-center gap-1.5">
+        {/* Only while dragging: a permanent pixel readout is noise, but during
+            a resize it is the one number the user is actually aiming at. */}
+        {dragging && (
+          <span className="text-muted-foreground text-[11px] tabular-nums" aria-hidden>
+            {width}px
+          </span>
+        )}
+        <button
+          type="button"
+          onClick={onCollapse}
+          aria-label={`Collapse ${title} panel`}
+          title={`Collapse ${title} panel`}
+          className="text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors"
+        >
+          <PanelLeftClose className="h-4 w-4" aria-hidden />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/EditorRailTabs.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { scoreBand } from '@prenta/core/seo/page-audit'
+
+export type RailTabId = 'sections' | 'seo' | 'page'
+
+export interface RailTab {
+  id: RailTabId
+  label: string
+  /** Panel title shown in the header below the strip. */
+  title: string
+  /** Count pill (Sections). */
+  count?: number
+  /**
+   * Score for the dot, banded by the page audit's own scale.
+   *
+   * `undefined` — not known yet; no dot is shown rather than a misleading one.
+   * `null`      — deliberately not rated (a gate is off, e.g. the page is
+   *               noindexed). Renders neutral, never as a low score.
+   */
+  score?: number | null
+}
+
+export interface EditorRailTabsProps {
+  tabs: RailTab[]
+  active: RailTabId
+  onChange: (id: RailTabId) => void
+}
+
+/**
+ * Three equal tabs across the top of the rail.
+ *
+ * Each tab carries a status glyph so the rail reads at a glance without being
+ * opened: a count for Sections, a band-coloured dot for SEO. The dot is
+ * accompanied by text in the accessible name — colour alone is not a signal
+ * for anyone who cannot distinguish these hues.
+ */
+export function EditorRailTabs({ tabs, active, onChange }: EditorRailTabsProps) {
+  return (
+    <div role="tablist" aria-label="Editor panels" className="border-border flex border-b">
+      {tabs.map((tab) => {
+        const selected = tab.id === active
+        // Bands with `scoreBand` from the audit itself, NOT `gradeFromScore`.
+        // The two disagree between 55 and 59 — a page scoring 57 read "fair"
+        // in the rings and "poor" on the tab summarising them, which is the
+        // same class of disagreement this dot was rewired to eliminate.
+        const band = typeof tab.score === 'number' ? scoreBand(tab.score) : null
+        const unrated = tab.score === null
+
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            id={`rail-tab-${tab.id}`}
+            aria-selected={selected}
+            aria-controls={`rail-panel-${tab.id}`}
+            tabIndex={selected ? 0 : -1}
+            onClick={() => onChange(tab.id)}
+            onKeyDown={(event) => {
+              // Arrow keys move between tabs — expected of a tablist, and the
+              // only way to reach a tab whose tabIndex is -1.
+              const index = tabs.findIndex((t) => t.id === active)
+              if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+                event.preventDefault()
+                const delta = event.key === 'ArrowRight' ? 1 : -1
+                const next = tabs[(index + delta + tabs.length) % tabs.length]
+                if (next) {
+                  onChange(next.id)
+                  document.getElementById(`rail-tab-${next.id}`)?.focus()
+                }
+              }
+            }}
+            className={`flex flex-1 items-center justify-center gap-1.5 border-b-2 pt-2.5 pb-2 text-[12.5px] transition-colors ${
+              selected
+                ? 'border-brand text-brand font-semibold'
+                : 'text-muted-foreground hover:text-foreground border-transparent font-medium'
+            }`}
+          >
+            {tab.label}
+
+            {tab.count !== undefined && (
+              <span
+                className={`rounded-full px-1.5 text-[10.5px] font-semibold tabular-nums ${
+                  selected ? 'bg-accent text-accent-foreground' : 'bg-muted text-muted-foreground'
+                }`}
+              >
+                {tab.count}
+              </span>
+            )}
+
+            {(band || unrated) && (
+              <>
+                <span
+                  className={`h-[7px] w-[7px] shrink-0 rounded-full ${
+                    band === 'good'
+                      ? 'bg-success'
+                      : band === 'fair'
+                        ? 'bg-warning'
+                        : band === 'poor'
+                          ? 'bg-destructive'
+                          : 'bg-muted-foreground/40'
+                  }`}
+                  aria-hidden
+                />
+                {/* Colour alone cannot carry the score. */}
+                <span className="sr-only">
+                  {unrated ? 'not rated' : `score ${tab.score} of 100`}
+                </span>
+              </>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/MediaBlock.tsx

@@ -0,0 +1,223 @@
+'use client'
+
+import { useState, type ReactNode } from 'react'
+import { Check, ImageIcon, Trash2 } from 'lucide-react'
+import { useApiData } from '../lib/useApiData.js'
+import {
+  CROP_RATIO,
+  assetWash,
+  displayName,
+  formatBadge,
+  ratioLabel,
+  type MediaCrop,
+} from '../lib/media-format.js'
+
+interface MediaItem {
+  id: string
+  filename: string
+  storageKey: string
+  url?: string
+  altTag?: string
+  mimeType: string
+  width?: number
+  height?: number
+}
+
+export interface MediaBlockProps {
+  /** Current asset URL, or empty for the empty state. */
+  value: string
+  onChange: (url: string, item?: MediaItem) => void
+  /** The crop the template renders this image at. */
+  crop?: MediaCrop
+  /** Rows rendered between the frame and the toolbar (the social preview). */
+  children?: ReactNode
+  disabled?: boolean
+  /** Accessible label, e.g. "Hero image". */
+  label?: string
+}
+
+/**
+ * One component for every image — section slots and the social/OG card alike.
+ *
+ * ── The frame shows the TEMPLATE's crop, not the asset's ─────────────────
+ *
+ * A section image renders at 16:10 and a social card at 1.91:1 regardless of
+ * what was uploaded. Framing the asset's own ratio would tell an editor their
+ * portrait photo looks fine and then crop its subject out on the page. What
+ * the asset actually is gets reported in the toolbar instead, as a ratio label
+ * beside its filename, so both facts are visible and neither is implied.
+ *
+ * ── The toolbar is always visible ────────────────────────────────────────
+ *
+ * Never hover-only. Replace and Remove are the two things an editor comes here
+ * to do, and hiding them behind a hover makes them undiscoverable on touch and
+ * invisible to anyone scanning the panel.
+ *
+ * ── The picker opens inside the shell ────────────────────────────────────
+ *
+ * Not a modal. Choosing an image is a comparison against the slot it is going
+ * into, and a dialog covering the slot removes the only context that matters.
+ */
+export function MediaBlock({
+  value,
+  onChange,
+  crop = 'section',
+  children,
+  disabled = false,
+  label = 'Image',
+}: MediaBlockProps) {
+  const [picking, setPicking] = useState(false)
+  const { data } = useApiData<{ items?: MediaItem[] }>(picking ? '/media?pageSize=50' : null)
+  const items = (Array.isArray(data) ? data : (data?.items ?? [])).filter((i: MediaItem) =>
+    i.mimeType?.startsWith('image/'),
+  )
+
+  const ratio = CROP_RATIO[crop]
+  const name = value ? displayName(value) : ''
+
+  return (
+    <div className="border-border bg-card overflow-hidden rounded-[10px] border">
+      {value ? (
+        <div
+          className="w-full bg-cover bg-center"
+          style={{ aspectRatio: ratio, backgroundImage: assetWash(name) }}
+        >
+          <img
+            src={value}
+            alt=""
+            className="h-full w-full object-cover"
+            style={{ aspectRatio: ratio }}
+          />
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setPicking(true)}
+          disabled={disabled}
+          aria-label={`Choose ${label.toLowerCase()}`}
+          className="bg-muted hover:bg-accent group flex w-full items-center justify-center p-3 transition-colors disabled:opacity-50"
+          style={{ aspectRatio: ratio }}
+        >
+          <span className="border-border group-hover:border-primary group-hover:text-primary text-muted-foreground flex h-full w-full flex-col items-center justify-center gap-1.5 rounded-lg border-[1.5px] border-dashed transition-colors">
+            <ImageIcon size={22} aria-hidden />
+            <span className="text-foreground text-[12.5px] font-semibold">No image selected</span>
+            <span className="text-[10.5px]">Choose one from the library</span>
+          </span>
+        </button>
+      )}
+
+      {/* The social block puts its preview rows here — between the frame and
+          the toolbar — so the share card and its upload target read as one
+          object rather than two stacked controls. */}
+      {children}
+
+      <div className="border-border flex items-center gap-2 border-t px-2.5 py-2">
+        {value ? (
+          <>
+            <span
+              className="text-foreground min-w-0 flex-1 truncate text-[11.5px] font-semibold"
+              title={name}
+            >
+              {name}
+            </span>
+            <span className="text-muted-foreground shrink-0 text-[10.5px] tabular-nums">
+              {formatBadge(value)}
+            </span>
+            <button
+              type="button"
+              onClick={() => setPicking((v) => !v)}
+              disabled={disabled}
+              className="border-border hover:bg-accent shrink-0 rounded-md border px-2 py-1 text-[11px] font-medium disabled:opacity-50"
+            >
+              Replace
+            </button>
+            <button
+              type="button"
+              onClick={() => onChange('')}
+              disabled={disabled}
+              aria-label={`Remove ${label.toLowerCase()}`}
+              className="text-muted-foreground hover:text-destructive shrink-0 rounded p-1 disabled:opacity-50"
+            >
+              <Trash2 size={13} aria-hidden />
+            </button>
+          </>
+        ) : (
+          <>
+            <span className="text-muted-foreground min-w-0 flex-1 text-[11.5px]">
+              No image selected
+            </span>
+            <button
+              type="button"
+              onClick={() => setPicking((v) => !v)}
+              disabled={disabled}
+              className="border-border hover:bg-accent shrink-0 rounded-md border px-2 py-1 text-[11px] font-medium disabled:opacity-50"
+            >
+              Choose
+            </button>
+          </>
+        )}
+      </div>
+
+      {picking && (
+        <div className="border-border bg-muted max-h-[262px] overflow-y-auto border-t p-2">
+          {items.length === 0 ? (
+            <p className="text-muted-foreground px-1 py-3 text-center text-[11px]">
+              No images in the library yet.
+            </p>
+          ) : (
+            <ul className="grid grid-cols-2 gap-2">
+              {items.map((item) => {
+                const url = item.url || item.storageKey
+                const selected = url === value
+                const itemRatio = ratioLabel(item.width, item.height)
+                return (
+                  <li key={item.id}>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onChange(url, item)
+                        setPicking(false)
+                      }}
+                      aria-current={selected || undefined}
+                      className={`border-border bg-card w-full overflow-hidden rounded-lg border text-left transition-colors ${
+                        selected ? 'border-primary' : 'hover:border-ring'
+                      }`}
+                    >
+                      <span
+                        className="relative block w-full"
+                        style={{
+                          aspectRatio: '16 / 10',
+                          backgroundImage: assetWash(item.filename),
+                        }}
+                      >
+                        {url && <img src={url} alt="" className="h-full w-full object-cover" />}
+                        <span className="absolute top-1 left-1 rounded-[5px] bg-white/80 px-1.5 py-px text-[9.5px] font-extrabold tracking-wide text-zinc-800">
+                          {formatBadge(item.filename, item.mimeType)}
+                        </span>
+                        {selected && (
+                          <span className="bg-primary text-primary-foreground absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full">
+                            <Check size={10} aria-hidden />
+                          </span>
+                        )}
+                      </span>
+                      <span className="block px-1.5 py-1">
+                        <span className="text-foreground block truncate text-[10px] font-semibold">
+                          {item.filename}
+                        </span>
+                        <span className="text-muted-foreground block text-[9px] tabular-nums">
+                          {item.width && item.height
+                            ? `${item.width} × ${item.height}${itemRatio ? ` · ${itemRatio}` : ''}`
+                            : 'Dimensions unknown'}
+                        </span>
+                      </span>
+                    </button>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ReflowMeter.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { AlertTriangle } from 'lucide-react'
+import { BREAKPOINTS, getBreakpoint, type BreakpointId } from '../lib/breakpoints.js'
+import type { ReflowGuardResult } from '../hooks/useReflowGuard.js'
+
+export interface ReflowMeterProps {
+  guard: ReflowGuardResult
+  /** Character count of the current value. */
+  length: number
+  /** Breakpoint the canvas is currently showing — marked in the row of dots. */
+  device: BreakpointId
+  /** Switch the canvas to a breakpoint so the editor can look at the damage. */
+  onProof: (id: BreakpointId) => void
+}
+
+const DOT_TONE: Record<string, string> = {
+  same: 'bg-success/12 text-success',
+  grew: 'bg-warning/15 text-warning',
+  'grew-badly': 'bg-destructive/12 text-destructive',
+}
+
+/**
+ * Per-field reflow readout: character count, line count where you're looking,
+ * one dot per breakpoint, and a proof prompt when wrapping changed.
+ *
+ * ── Why the dots are buttons ──────────────────────────────────────────────
+ *
+ * The guard's whole value is that it reports damage at a width you are NOT
+ * looking at. Telling an editor "this now runs three lines on mobile" while
+ * making them hunt for the breakpoint switcher wastes the finding. Each dot
+ * takes the canvas there.
+ *
+ * Colour is never the only signal: every dot carries its breakpoint's initials
+ * and an accessible name stating the line count and what it was published at,
+ * and the alert below repeats the finding in words.
+ */
+export function ReflowMeter({ guard, length, device, onProof }: ReflowMeterProps) {
+  const here = guard.rows.find((r) => r.id === device)
+  const worst = guard.worst ? guard.rows.find((r) => r.id === guard.worst) : undefined
+
+  // Named breakpoints while the list is short enough to read; initials once it
+  // isn't; "every breakpoint" when it's all of them, which is shorter and is
+  // also the more useful statement.
+  const grown = guard.grown
+  const scope =
+    grown.length === BREAKPOINTS.length
+      ? 'every breakpoint'
+      : grown.length > 3
+        ? grown.map((r) => getBreakpoint(r.id).abbr).join(', ')
+        : grown.map((r) => getBreakpoint(r.id).name).join(', ')
+
+  return (
+    <>
+      <div className="mt-1.5 flex items-center gap-2">
+        <span className="text-muted-foreground text-[11px] whitespace-nowrap tabular-nums">
+          <b className="text-foreground/80 font-semibold">{length}</b> chars
+          {guard.delta !== 0 && (
+            <span className={guard.delta > 0 ? 'text-warning font-bold' : ''}>
+              {' '}
+              ({guard.delta > 0 ? '+' : ''}
+              {guard.delta})
+            </span>
+          )}
+          {here && (
+            <>
+              {' · '}
+              <b className="text-foreground/80 font-semibold">{here.lines}</b> line
+              {here.lines === 1 ? '' : 's'} here
+            </>
+          )}
+        </span>
+
+        {guard.rows.length > 0 && (
+          <div className="ml-auto flex gap-0.75">
+            {guard.rows.map((row) => {
+              const bp = getBreakpoint(row.id)
+              return (
+                <button
+                  key={row.id}
+                  type="button"
+                  onClick={() => onProof(row.id)}
+                  className={`flex h-4.25 w-4.25 items-center justify-center rounded-[5px] text-[8px] font-bold transition-transform hover:-translate-y-px ${
+                    DOT_TONE[row.state] ?? 'bg-muted text-muted-foreground'
+                  } ${device === row.id ? 'outline-primary outline-[1.5px] outline-offset-1' : ''}`}
+                  title={`${bp.name} — ${row.lines} line${row.lines === 1 ? '' : 's'}${
+                    row.diff > 0 ? ` (published: ${row.was}) — wrapping changed` : ''
+                  }. Click to proof.`}
+                >
+                  <span aria-hidden>{bp.abbr}</span>
+                  {/* Leads with the breakpoint and its finding, not with the
+                      action. The alert below carries a "Proof on ‹bp›" button,
+                      and two controls with the same accessible name in one
+                      region are indistinguishable to a screen reader. */}
+                  <span className="sr-only">
+                    {bp.name}: {row.lines} line{row.lines === 1 ? '' : 's'}
+                    {row.diff > 0 ? `, was ${row.was} when published` : ''} — proof here
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {worst && (
+        <div className="bg-warning/10 border-warning/30 mt-1.5 grid grid-cols-[auto_1fr] gap-x-2.5 gap-y-1 rounded-lg border p-2.5">
+          <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
+          <p className="text-[11.5px] leading-normal">
+            Wrapping changed on <b className="text-warning font-bold">{scope}</b> —{' '}
+            {getBreakpoint(worst.id).name} now runs {worst.lines} lines instead of {worst.was}.
+            Proof it before publishing.
+          </p>
+          <button
+            type="button"
+            onClick={() => onProof(worst.id)}
+            className="border-warning text-warning hover:bg-warning/15 col-start-2 mt-0.5 justify-self-start rounded-md border px-2.5 py-1 text-[11px] font-semibold whitespace-nowrap transition-colors"
+          >
+            Proof on {getBreakpoint(worst.id).name}
+          </button>
+        </div>
+      )}
+    </>
+  )
+}