@prenta/admin 0.92.0 → 0.94.0

package/src/lib/version-history.ts

@@ -0,0 +1,192 @@
+/**
+ * Version history data layer for the page editor.
+ *
+ * History in this editor is a **mode, not a popup**: selecting a version
+ * renders it on the canvas, so the panel needs the full section snapshot of
+ * every entry, not just its metadata. `GET /collections/:slug/:id/versions`
+ * already returns each version's whole `data` blob — the same blob the restore
+ * endpoint writes back — so the snapshots are read straight off the list
+ * response and no second request per row is needed.
+ */
+import { cmsApi } from './api.js'
+import { coerceSections, type PageSection } from '@prenta/core/page-sections'
+
+/**
+ * Mirrors the `ChangeType` enum in the Prisma schema.
+ *
+ * `PUBLISH` and `RESTORE` were declared there from the beginning and nothing
+ * ever wrote them; `cms-core` now does. Rows written before that read `UPDATE`
+ * whatever they actually were, which is why {@link versionKind} labels
+ * `UPDATE` as "Saved" rather than "Draft" — the neutral reading is the only
+ * one that is true for both old and new rows.
+ */
+export type VersionChangeType = 'CREATE' | 'UPDATE' | 'PUBLISH' | 'RESTORE' | 'DELETE'
+
+export interface VersionAuthor {
+  id: string
+  /** Display name, falling back to email and then to a non-blank placeholder. */
+  name: string
+}
+
+export interface PageVersion {
+  id: string
+  changeType: VersionChangeType
+  createdAt: string
+  author: VersionAuthor
+  /** Full page content as of this version — what the canvas renders. */
+  sections: PageSection[]
+}
+
+/** Versions sharing a calendar day, newest day first. */
+export interface VersionDayGroup {
+  /** `Today` / `Yesterday` / `Jul 27` — the sticky header text. */
+  label: string
+  versions: PageVersion[]
+}
+
+/** How one change type presents as a pill. */
+export interface VersionKind {
+  label: string
+  /** Semantic tone; the panel maps these onto token classes. */
+  tone: 'live' | 'draft' | 'neutral' | 'danger'
+}
+
+const KINDS: Record<VersionChangeType, VersionKind> = {
+  // "Published" is the one distinction that matters in a version list: which
+  // of these could a visitor have seen?
+  PUBLISH: { label: 'Published', tone: 'live' },
+  CREATE: { label: 'Created', tone: 'neutral' },
+  // NOT "Draft". Every version written before cms-core started recording
+  // PUBLISH is an UPDATE regardless of whether it went live, so calling this
+  // "Draft" would state something false about historical rows. "Saved" is true
+  // of all of them.
+  UPDATE: { label: 'Saved', tone: 'draft' },
+  RESTORE: { label: 'Restored', tone: 'neutral' },
+  DELETE: { label: 'Deleted', tone: 'danger' },
+}
+
+export function versionKind(changeType: string): VersionKind {
+  return KINDS[changeType as VersionChangeType] ?? { label: 'Saved', tone: 'draft' }
+}
+
+interface VersionApiRow {
+  id: string
+  changeType: string
+  createdAt: string
+  data: Record<string, unknown> | null
+  changedBy?: { id: string; name?: string | null; email?: string | null } | null
+}
+
+function toAuthor(row: VersionApiRow): VersionAuthor {
+  const by = row.changedBy
+  return {
+    id: by?.id ?? '',
+    // An avatar built from an empty string renders a blank circle, so the
+    // fallback has to be a real word rather than ''.
+    name: by?.name?.trim() || by?.email?.trim() || 'Unknown',
+  }
+}
+
+export function toPageVersion(row: VersionApiRow): PageVersion {
+  const data = row.data ?? {}
+  return {
+    id: row.id,
+    changeType: (row.changeType as VersionChangeType) ?? 'UPDATE',
+    createdAt: row.createdAt,
+    author: toAuthor(row),
+    // `preserve` matches how the editor reads the live document. Coercing a
+    // snapshot more strictly than the current page would make an unmanaged
+    // section look like it was deleted in every version that contains one.
+    sections: coerceSections(data.sections, { onUnknown: 'preserve' }),
+  }
+}
+
+/** Newest first, matching the API's own ordering. */
+export async function fetchPageVersions(
+  collectionSlug: string,
+  documentId: string,
+): Promise<PageVersion[]> {
+  const res = await cmsApi<{ versions: VersionApiRow[]; total: number }>(
+    `/collections/${collectionSlug}/${documentId}/versions?pageSize=50`,
+  )
+  if (res.error) throw new Error(res.error)
+  const rows = res.data?.versions ?? []
+  return rows.map(toPageVersion)
+}
+
+export async function restorePageVersion(
+  collectionSlug: string,
+  documentId: string,
+  versionId: string,
+): Promise<void> {
+  const res = await cmsApi(
+    `/collections/${collectionSlug}/${documentId}/versions/${versionId}/restore`,
+    { method: 'POST' },
+  )
+  if (res.error) throw new Error(res.error)
+}
+
+// ─── Presentation helpers ────────────────────────────────────────────
+
+function startOfDay(date: Date): number {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
+}
+
+/**
+ * `Today` / `Yesterday` / a short date.
+ *
+ * `now` is a parameter rather than a `Date.now()` call so the label is
+ * testable — "relative to today" is untestable when today is whatever the
+ * suite happens to run on.
+ */
+export function dayLabel(iso: string, now: Date = new Date()): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return 'Unknown date'
+
+  const days = Math.round((startOfDay(now) - startOfDay(date)) / 86_400_000)
+  if (days === 0) return 'Today'
+  if (days === 1) return 'Yesterday'
+
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    // Drop the year within the current one — "Jul 27, 2026" in a list where
+    // every entry is 2026 is four characters of noise per row.
+    ...(date.getFullYear() === now.getFullYear() ? {} : { year: 'numeric' }),
+  })
+}
+
+export function timeLabel(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })
+}
+
+/**
+ * Group an already-ordered list into consecutive runs sharing a day label.
+ *
+ * Consecutive runs, not a keyed bucket: the list arrives newest-first and must
+ * stay that way, and a `Map` keyed on the label would silently merge two runs
+ * that are not adjacent if the API ever returned an unsorted page.
+ */
+export function groupVersionsByDay(
+  versions: readonly PageVersion[],
+  now: Date = new Date(),
+): VersionDayGroup[] {
+  const groups: VersionDayGroup[] = []
+  for (const version of versions) {
+    const label = dayLabel(version.createdAt, now)
+    const last = groups[groups.length - 1]
+    if (last && last.label === label) last.versions.push(version)
+    else groups.push({ label, versions: [version] })
+  }
+  return groups
+}
+
+/** Two-letter monogram for the row avatar. */
+export function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return '?'
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase()
+  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase()
+}

package/src/styles/prenta-tokens.css

@@ -1,29 +1,39 @@
 /*
  * PrentaCMS design tokens — scoped to the admin root.
- * Source: design-system/tokens.json (v1.0).
- * Appearance accent overrides set --acc / --primary at runtime.
+ * GENERATED FILE — DO NOT EDIT. Source: design-system/tokens.json.
+ * Regenerate: pnpm --filter @prenta/admin generate
+ *
+ * Scoped to .prenta-admin rather than :root on purpose: the admin renders
+ * inside consumer applications, and custom properties resolve by INHERITANCE,
+ * not by specificity — a host site's :root would otherwise win against every
+ * admin rule reading these names. Appearance settings mutate --acc / --primary
+ * at runtime on this same element.
  */
 
 .prenta-admin {
   /* Surfaces */
-  --bg: #f5f4fa;
-  --sb: #ffffff;
-  --card: #ffffff;
-  --bdr: #e8e6f2;
+  --bg: #f5f4fa; /* App background */
+  --sb: #ffffff; /* Sidebar / topbar surface */
+  --card: #ffffff; /* Card / panel surface */
+  --bdr: #e8e6f2; /* Hairline border */
 
   /* Text */
-  --txt: #1a1827;
-  --sub: #6b6878;
-  /* Deviates from tokens.json's #B0ADBE (2.2:1 on white — illegible). The
-     admin uses --muted as real text (section labels, hints, icons), so it
-     must meet WCAG AA (>=4.5:1) on --card and --bg while staying one step
-     lighter than --sub to preserve the text hierarchy. */
+  --txt: #1a1827; /* Primary text */
+  --sub: #6b6878; /* Secondary text */
+  /*
+   * Tertiary text. The handoff value #B0ADBE is 2.2:1 on --card — below WCAG
+   * AA. The admin uses --muted as real text (section labels, check hints,
+   * canvas meta line, character counters), so it is darkened to 4.6:1 while
+   * staying one step lighter than --sub to preserve the hierarchy. Do not
+   * revert without also changing every --muted consumer to decorative use.
+   * Handoff value: #b0adbe — deliberately overridden.
+   */
   --muted: #716e83;
 
   /* Accent */
-  --acc: #7c3aed;
-  --acc-l: #ede9fe;
-  --acc-m: #c4b5fd;
+  --acc: #7c3aed; /* Accent / interactive */
+  --acc-l: #ede9fe; /* Accent tint (hover/active bg) */
+  --acc-m: #c4b5fd; /* Accent mid (focus ring) */
 
   /* Semantic */
   --suc: #059669;
@@ -35,11 +45,7 @@
   --info: #0891b2;
   --info-l: #e0f7fa;
 
-  /*
-   * Page / post-type tag palette — distinct editorial hues.
-   * Kept separate from status tokens so "pink" is not warning orange and
-   * "blue" is not info cyan. Soft companions tint pill backgrounds.
-   */
+  /* Tag palette */
   --tag-purple: #7c3aed;
   --tag-purple-soft: #f3e8ff;
   --tag-green: #0f766e;
@@ -60,56 +66,123 @@
   --ai2: #c026d3;
   --ai-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07));
 
+  /* Controls */
+  /*
+   * Switch knob stays white in both themes per the design system; tokenized so
+   * a consumer theme can move it.
+   */
+  --toggle-thumb: #ffffff;
+
+  /* Type */
+  /*
+   * UI text. Self-hosted woff2 under design-system/fonts — never a third-party
+   * request, because the admin renders inside consumer applications.
+   */
+  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  /* Code, robots directives, token names */
+  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --fw-reg: 450;
+  --fw-med: 500;
+  --fw-semi: 600;
+  --fw-bold: 700;
+  --fs-page: 21px; /* Page title */
+  --fs-card: 14px; /* Card / section title */
+  --fs-body: 13px; /* Body, controls, table cells */
+  --fs-sub: 12px; /* Secondary / captions */
+  --fs-hint: 11.5px; /* Hints, metadata */
+  --fs-label: 10px; /* Section labels */
+
   /* Layout */
   --sbw: 224px;
   --sbw-col: 60px;
   --tbh: 56px;
-  --r: 10px;
-  --r-control: 8px;
-  --r-sm: 6px;
-  --r-pill: 99px;
 
-  /* Elevation */
-  --shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04);
-  --shd2: 0 4px 16px rgba(0, 0, 0, 0.1);
+  /* Radius */
+  --r-sm: 6px; /* Small buttons, badges, tags, chips-in-rows */
+  --r-field: 7px; /* Text inputs, textareas, selects */
+  /*
+   * Primary / secondary buttons, dropdowns. --r-control is the pre-2.0 name,
+   * kept resolving for existing rules.
+   */
+  --r-ctl: 8px;
+  --r-control: var(--r-ctl); /* deprecated alias */
+  --r: 10px; /* Cards and panels */
+  --r-fig: 12px; /* Canvas figures and media frames */
+  --r-pill: 99px; /* Toggles, meters, notice pills */
+
+  /* Spacing */
+  --sp-2: 2px;
+  --sp-4: 4px;
+  --sp-6: 6px;
+  --sp-8: 8px;
+  --sp-10: 10px;
+  --sp-12: 12px; /* Row padding-y */
+  --sp-14: 14px; /* Panel padding */
+  --sp-16: 16px; /* Editor header padding-x */
+  --sp-18: 18px; /* Canvas gutter top */
+  --sp-20: 20px;
+  --sp-24: 24px; /* Canvas gutter sides */
+  --sp-28: 28px;
+  --sp-32: 32px;
+  --sp-40: 40px; /* Canvas gutter bottom */
+
+  /* Control sizing */
+  --h-chip: 26px; /* Rail buttons, theme toggle */
+  --h-field: 33px; /* Text inputs and small buttons */
+  --h-ctl: 34px; /* Header controls: icon buttons, breakpoint trigger, zoom chip, SEO chip */
+
+  /* Border */
+  --bw: 1px;
+  --bw-ctl: 1.5px; /* Input and card border */
+  --bw-focus: 2px; /* Focus and active outline */
+  --ring: 0 0 0 3px var(--acc-m); /* Focus ring shadow */
 
-  /* Typography */
-  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
-  --fs-page: 21px;
-  --fs-card: 14px;
-  --fs-body: 13px;
-  --fs-sub: 12px;
-  --fs-hint: 11.5px;
-  --fs-label: 10px;
+  /* Elevation */
+  --shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04); /* Card resting */
+  --shd2: 0 4px 16px rgba(0, 0, 0, 0.1); /* Popovers, modals, hover */
 
   /* Motion */
-  --motion-fast: 0.12s;
-  --motion-base: 0.18s;
+  --mo-fast: 0.12s; /* Hover, color */
+  --motion-fast: var(--mo-fast); /* deprecated alias */
+  --mo-base: 0.18s; /* Toggles, reveals */
+  --motion-base: var(--mo-base); /* deprecated alias */
+  --mo-slow: 0.22s; /* Panels, canvas scale */
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  /* Pre-2.0 composite. Use --mo-slow var(--ease) instead. */
   --motion-layout: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
 
-  /* Controls — the toggle thumb stays white in both modes per the design
-     system (.tog-thumb { background: #fff }), tokenized for themeability. */
-  --toggle-thumb: #ffffff;
+  /* Layering */
+  --z-raise: 2; /* Canvas section labels, sticky group headers */
+  --z-resizer: 30; /* Panel drag handle */
+  --z-overlay: 45; /* In-panel overlays (version history) */
+  --z-menu: 120; /* Dropdowns, flyouts */
+  --z-toast: 200;
 }
 
 .dark .prenta-admin,
 .prenta-admin.dark,
 .prenta-admin[data-theme='dark'] {
+  /* Surfaces */
   --bg: #0d0c18;
   --sb: #141222;
   --card: #1c1a2e;
   --bdr: #2c2a42;
 
+  /* Text */
   --txt: #eae8f5;
   --sub: #8e8ba8;
-  /* Same AA deviation as light mode (tokens.json #504E68 is 2.1:1 on card). */
+  /*
+   * Same AA correction as light mode — the handoff value #504E68 is 2.1:1 on
+   * --card. Handoff value: #504e68 — deliberately overridden.
+   */
   --muted: #8784a2;
 
+  /* Accent */
   --acc: #9d71f0;
   --acc-l: #231950;
   --acc-m: #5e3eaa;
 
+  /* Semantic */
   --suc: #10b981;
   --suc-l: #022c22;
   --warn: #fbbf24;
@@ -119,6 +192,7 @@
   --info: #38bdf8;
   --info-l: #0a2838;
 
+  /* Tag palette */
   --tag-purple: #a78bfa;
   --tag-purple-soft: #2e1065;
   --tag-green: #2dd4bf;
@@ -134,8 +208,12 @@
   --tag-gray: #94a3b8;
   --tag-gray-soft: #1e293b;
 
+  /* AI */
+  --ai1: #7c3aed;
+  --ai2: #c026d3;
   --ai-soft: linear-gradient(135deg, rgba(157, 113, 240, 0.16), rgba(192, 38, 211, 0.12));
 
+  /* Elevation */
   --shd: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
   --shd2: 0 4px 20px rgba(0, 0, 0, 0.45);
 }