@prenta/admin 0.92.0 → 0.94.0

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>
+      )}
+    </>
+  )
+}

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>
+  )
+}