@bycrux/editor 0.11.2 → 1.0.1

package/src/video/VersionCompare.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Slider } from '../ui'
+
+/**
+ * The editor-relevant slice of a version — matches `VersionEntry` in
+ * ../types, kept structural here so this file has no dependency direction on
+ * the caller's exact type (mirrors VersionPanel's own `ProjectVersion`).
+ */
+interface CompareVersionEntry {
+  hash: string
+  message: string
+  timestamp: string
+}
+
+export interface VersionCompareProps {
+  projectId: string
+  /** Dedup'd list from the panel (the same entries VersionPanel renders). */
+  versions: CompareVersionEntry[]
+  /** The version the user clicked "Compare" on — seeds the LEFT picker. */
+  initialLeftHash: string
+  /** Builds the `<img src>` for a rendered frame of `commit` (a version hash,
+   *  or the sentinel `"working"` for the live on-disk state) at `t` seconds. */
+  frameUrl: (id: string, commit: string, t: number) => string
+  /** Slider max, in seconds. Defaults to 30 when the host can't cheaply
+   *  compute the project's real duration. */
+  durationSeconds?: number
+  onClose: () => void
+  /** Editor theme mode — light/dark. Only affects the frame panes' load-error
+   *  text (red-400 is sub-AA on the light `--editor-bg` placeholder box).
+   *  Absent -> dark, matching every existing caller. */
+  mode?: 'light' | 'dark'
+}
+
+/** Sentinel commit id for "the live on-disk state", matching the backend's
+ *  `GET .../versions/:commit/frame` contract (T8a). Not a real git hash. */
+const WORKING = 'working'
+
+/** Slider ceiling when the host doesn't pass a real project duration. */
+const DEFAULT_DURATION_SECONDS = 30
+
+/** Debounce (ms) between the slider's raw drag value and the value that
+ *  actually drives the `<img src>` — mirrors RenderModal's cover-frame
+ *  slider debounce so dragging doesn't fire a frame render per pixel. */
+const SCRUB_DEBOUNCE_MS = 200
+
+/** Human label for a picker option / pane header: "Current (working)" for the
+ *  sentinel, else the version's message (falling back to a short hash). */
+function labelFor(hash: string, versions: CompareVersionEntry[]): string {
+  if (hash === WORKING) return 'Current (working)'
+  const v = versions.find(v => v.hash === hash)
+  return v?.message?.trim() || hash.slice(0, 8)
+}
+
+/** mm:ss.d for the scrub readout. */
+function formatT(sec: number): string {
+  return `${sec.toFixed(1)}s`
+}
+
+function VersionFramePane({
+  label,
+  projectId,
+  commit,
+  t,
+  frameUrl,
+  mode = 'dark',
+}: {
+  label: string
+  projectId: string
+  commit: string
+  t: number
+  frameUrl: (id: string, commit: string, t: number) => string
+  mode?: 'light' | 'dark'
+}) {
+  const src = frameUrl(projectId, commit, t)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+
+  // A new src (different commit/time) resets the pane to its loading state —
+  // `onLoadStart` doesn't fire reliably for every `<img>` src swap across
+  // browsers, so gate on the src changing directly.
+  useEffect(() => {
+    setLoading(true)
+    setError(false)
+  }, [src])
+
+  return (
+    <div className="flex-1 min-w-0 flex flex-col gap-1.5">
+      <span className="text-[11px] font-medium text-[var(--editor-text)]/60 truncate" title={label}>
+        {label}
+      </span>
+      <div className="relative aspect-video w-full overflow-hidden rounded-lg border border-[var(--editor-border)] bg-[var(--editor-bg)] flex items-center justify-center">
+        <img
+          key={src}
+          src={src}
+          alt={`${label} frame at ${formatT(t)}`}
+          onLoadStart={() => setLoading(true)}
+          onLoad={() => setLoading(false)}
+          onError={() => { setLoading(false); setError(true) }}
+          className="max-w-full max-h-full object-contain"
+          style={error ? { display: 'none' } : undefined}
+        />
+        {loading && !error && (
+          <span className="absolute inset-0 flex items-center justify-center text-xs text-[var(--editor-text)]/50">
+            Loading…
+          </span>
+        )}
+        {error && (
+          <span className={`absolute inset-0 flex items-center justify-center text-xs px-3 text-center ${mode === 'light' ? 'text-red-600' : 'text-red-400/90'}`}>
+            Error rendering frame
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Visual A/B compare for project versions — two rendered-frame panes, a
+ * shared time-scrub slider, and LEFT/RIGHT version pickers. Deliberately has
+ * NO textual diff/summary: comparison is purely "what does this frame look
+ * like" between two commits (or a commit and the live working state).
+ */
+export default function VersionCompare({
+  projectId,
+  versions,
+  initialLeftHash,
+  frameUrl,
+  durationSeconds,
+  onClose,
+  mode = 'dark',
+}: VersionCompareProps) {
+  const duration = durationSeconds && durationSeconds > 0 ? durationSeconds : DEFAULT_DURATION_SECONDS
+
+  // "Current (working)" always heads the list — it's a synthetic sentinel,
+  // not a real entry in `versions`.
+  const options = useMemo<CompareVersionEntry[]>(
+    () => [{ hash: WORKING, message: 'Current (working)', timestamp: '' }, ...versions],
+    [versions],
+  )
+
+  const [leftHash, setLeftHash] = useState(initialLeftHash)
+  const [rightHash, setRightHash] = useState<string>(() => {
+    // The common case: compare the clicked version against the live state.
+    // The only way `initialLeftHash` could already BE "working" is a future
+    // caller wiring Compare from somewhere other than a version-list entry —
+    // guard it anyway so RIGHT never silently mirrors LEFT.
+    if (initialLeftHash !== WORKING) return WORKING
+    const idx = versions.findIndex(v => v.hash === initialLeftHash)
+    return versions[idx + 1]?.hash ?? versions[0]?.hash ?? WORKING
+  })
+
+  // Slider value updates immediately for the readout; the value that drives
+  // the `<img src>` (and thus a frame render) is debounced so a drag doesn't
+  // fire one render per pixel.
+  const [t, setT] = useState(duration / 2)
+  const [sampleT, setSampleT] = useState(t)
+  useEffect(() => {
+    const id = setTimeout(() => setSampleT(t), SCRUB_DEBOUNCE_MS)
+    return () => clearTimeout(id)
+  }, [t])
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4">
+      <div className="w-full max-w-5xl bg-[var(--editor-surface)] border border-white/10 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+          <h2 className="text-sm font-semibold text-[var(--editor-text)]">Compare versions</h2>
+          <button
+            onClick={onClose}
+            aria-label="Close"
+            className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex flex-col gap-4 px-5 py-4 max-h-[75vh] overflow-y-auto">
+
+          {/* Picker row */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            <label className="flex-1 min-w-0 flex flex-col gap-1.5">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Left</span>
+              <select
+                value={leftHash}
+                onChange={(e) => setLeftHash(e.target.value)}
+                className="text-sm px-3 py-1.5 rounded-md bg-[var(--editor-bg)] border border-[var(--editor-border)] text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] transition-colors"
+              >
+                {options.map(o => (
+                  <option key={o.hash} value={o.hash}>{labelFor(o.hash, versions)}</option>
+                ))}
+              </select>
+            </label>
+            <label className="flex-1 min-w-0 flex flex-col gap-1.5">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Right</span>
+              <select
+                value={rightHash}
+                onChange={(e) => setRightHash(e.target.value)}
+                className="text-sm px-3 py-1.5 rounded-md bg-[var(--editor-bg)] border border-[var(--editor-border)] text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] transition-colors"
+              >
+                {options.map(o => (
+                  <option key={o.hash} value={o.hash}>{labelFor(o.hash, versions)}</option>
+                ))}
+              </select>
+            </label>
+          </div>
+
+          {/* Frame panes */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            <VersionFramePane
+              label={labelFor(leftHash, versions)}
+              projectId={projectId}
+              commit={leftHash}
+              t={sampleT}
+              frameUrl={frameUrl}
+              mode={mode}
+            />
+            <VersionFramePane
+              label={labelFor(rightHash, versions)}
+              projectId={projectId}
+              commit={rightHash}
+              t={sampleT}
+              frameUrl={frameUrl}
+              mode={mode}
+            />
+          </div>
+
+          {/* Time-scrub slider */}
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center justify-between">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">Time</span>
+              <span className="text-xs text-[var(--editor-text)]/60 tabular-nums">{formatT(t)}</span>
+            </div>
+            <Slider
+              min={0}
+              max={duration}
+              step={0.1}
+              value={t}
+              onChange={setT}
+              aria-label="Scrub time"
+            />
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/src/video/VersionPanel.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Save } from 'lucide-react'
 import type { VersionEntry } from '../types'
 
 // VersionPanel reads only the editor-relevant slice of a version — hash,
@@ -16,68 +17,142 @@ function parseVersion(v: ProjectVersion): { run: number; label: string } {
   return m ? { run: parseInt(m[1]), label: m[2] } : { run: 0, label: v.message }
 }
 
-function dedupeVersions(versions: ProjectVersion[]): ProjectVersion[] {
+const KNOWN_LABELS: Record<string, string> = {
+  draft: 'Draft',
+  final: 'Final',
+  pending: 'Pending',
+  export: 'Exported',
+  'autosave before restore': 'Auto-save before restore',
+}
+
+/** Turns a raw parsed label into what the operator sees. Known backend labels
+ *  get a human-readable name; an empty label (no message) reads as "Untitled
+ *  save" rather than blank; anything else is an operator-typed name and is
+ *  shown verbatim, unmangled apart from surrounding whitespace. Returns the
+ *  TRIMMED name, not the raw one: the save path already trims what it stores
+ *  (`nameInput.trim()` below), so stray padding here only ever comes from a
+ *  hand-edited commit message, and rendering it would just misalign the row. */
+export function humanizeLabel(label: string): string {
+  const trimmed = label.trim()
+  if (trimmed === '') return 'Untitled save'
+  const known = KNOWN_LABELS[trimmed.toLowerCase()]
+  return known ?? trimmed
+}
+
+function timestampMs(v: ProjectVersion): number {
+  const ms = Date.parse(v.timestamp)
+  return Number.isNaN(ms) ? 0 : ms
+}
+
+/** Every saved version gets its own row — no collapsing by backend "run".
+ *  Only the run-0 init baseline is filtered out. Sorted newest first by
+ *  timestamp; the sort is stable so same-timestamp entries keep their input
+ *  order, and it never mutates the caller's array. */
+export function listVersions(versions: ProjectVersion[]): ProjectVersion[] {
   const nonInit = versions.filter(v => parseVersion(v).run > 0)
-  const byRun = new Map<number, ProjectVersion>()
-  for (const v of nonInit) {
-    const { run, label } = parseVersion(v)
-    const existing = byRun.get(run)
-    const isDefault = label === 'draft' || label === 'final' || label === 'pending'
-    if (!existing) { byRun.set(run, v); continue }
-    const { label: existingLabel } = parseVersion(existing)
-    const existingIsDefault = existingLabel === 'draft' || existingLabel === 'final' || existingLabel === 'pending'
-    if (existingIsDefault && !isDefault) byRun.set(run, v)
-  }
-  return [...byRun.values()].sort((a, b) => parseVersion(b).run - parseVersion(a).run)
+  return [...nonInit].sort((a, b) => timestampMs(b) - timestampMs(a))
 }
 
 interface VersionPanelProps {
   versions: ProjectVersion[]
   restoring: string | null
   onRestore: (hash: string) => void
+  /** Saves the current project state as a new named version. Absent when the
+   *  host adapter doesn't support it — the Save affordance disables itself
+   *  rather than disappearing, so the panel's layout doesn't jump. */
+  onSaveVersion?: (name?: string) => void
+  saving?: boolean
+  /** Opens the visual A/B compare view seeded on this version's hash. Absent
+   *  when the host adapter has no `versionFrameUrl` — the Compare button then
+   *  just doesn't render, matching Restore/Save's degrade-gracefully pattern. */
+  onCompareVersion?: (hash: string) => void
+  /** Editor theme mode — light/dark. Only affects the Restore button's hue
+   *  (indigo-300 is sub-AA on a light `--editor-surface` card). Absent ->
+   *  dark, matching every existing caller. */
+  mode?: 'light' | 'dark'
 }
 
-export default function VersionPanel({ versions, restoring, onRestore }: VersionPanelProps) {
-  const [open, setOpen] = useState(true)
-  const deduped = dedupeVersions(versions)
+export default function VersionPanel({ versions, restoring, onRestore, onSaveVersion, saving, onCompareVersion, mode = 'dark' }: VersionPanelProps) {
+  const [nameInput, setNameInput] = useState('')
+  const rows = listVersions(versions)
+
+  function handleSaveClick() {
+    onSaveVersion?.(nameInput.trim() || undefined)
+    setNameInput('')
+  }
 
   return (
-    <div className="shrink-0 border-b border-[var(--editor-border)] flex flex-col overflow-hidden" style={{ maxHeight: open ? 224 : 0, transition: 'max-height 0.15s ease' }}>
-      <button
-        onClick={() => setOpen(o => !o)}
-        className="flex items-center justify-between px-3 py-2 border-b border-[var(--editor-border)] hover:bg-[var(--editor-surface)] transition-colors w-full text-left"
-      >
+    <div className="flex-1 min-h-0 border-b border-[var(--editor-border)] flex flex-col overflow-hidden">
+      {/* No collapse control: Versions has its own tab now, so the whole panel
+          IS the list. The count sits on the right as an explicit "N versions"
+          label so it reads as a quantity rather than part of the title. */}
+      <div className="shrink-0 flex items-center justify-between px-3 py-2 border-b border-[var(--editor-border)]">
         <span className="text-xs font-medium text-[var(--editor-text)]/60 uppercase tracking-wide">Versions</span>
-        <span className="text-[var(--editor-text)]/50 text-[10px]">{open ? '▲' : '▼'}</span>
-      </button>
-      <div className="overflow-y-auto p-2 flex flex-col gap-1.5">
-        {deduped.length === 0 ? (
-          <p className="text-xs text-[var(--editor-text)]/55 text-center mt-2 px-1 leading-relaxed">No saved versions yet.</p>
-        ) : deduped.map(v => {
-          const { run, label } = parseVersion(v)
-          const isDefault = label === 'draft' || label === 'final' || label === 'pending'
+        {rows.length > 0 && (
+          <span className="text-[10px] text-[var(--editor-text)] opacity-50">
+            {rows.length} {rows.length === 1 ? 'version' : 'versions'}
+          </span>
+        )}
+      </div>
+
+      {/* Save affordance — always visible (not gated on `open`) so saving a
+          version doesn't require expanding the list first. Disabled rather
+          than hidden when the host has no `onSaveVersion`, matching the
+          Restore buttons' pattern of degrading gracefully. */}
+      <div className="shrink-0 flex items-center gap-2 px-3 py-2.5 border-b border-[var(--editor-border)]">
+        <input
+          type="text"
+          value={nameInput}
+          onChange={e => setNameInput(e.target.value)}
+          placeholder="Name (optional)"
+          disabled={saving || !onSaveVersion}
+          className="min-w-0 flex-1 h-8 text-[11px] bg-[var(--editor-bg)] border border-[var(--editor-border)] rounded-md px-2 text-[var(--editor-text)] placeholder:text-[var(--editor-text)]/40 focus:outline-none focus:border-[var(--editor-accent)] disabled:opacity-40"
+        />
+        <button
+          onClick={handleSaveClick}
+          disabled={saving || !onSaveVersion}
+          className="shrink-0 flex items-center gap-1.5 h-8 px-3 rounded-md bg-[var(--editor-accent)] text-white text-xs font-medium hover:opacity-90 transition-opacity disabled:opacity-40 disabled:hover:opacity-40"
+        >
+          <Save size={13} />
+          {saving ? 'Saving…' : 'Save version'}
+        </button>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto">
+      <div className="p-2 flex flex-col gap-1.5">
+        {rows.length === 0 ? (
+          <p className="text-xs text-[var(--editor-text)] opacity-55 text-center mt-2 px-1 leading-relaxed">No saved versions yet.</p>
+        ) : rows.map(v => {
+          const { label } = parseVersion(v)
+          const name = humanizeLabel(label)
           return (
-            <div key={v.hash} className="rounded border border-[var(--editor-border)] bg-[var(--editor-surface)] p-2 flex flex-col gap-1">
+            <div key={v.hash} className="rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] p-2.5 flex flex-col gap-2">
+              <div className="flex flex-col gap-0.5">
+                <span className="text-xs font-medium text-[var(--editor-text)] truncate" title={name}>{name}</span>
+                <span className="text-[10px] text-[var(--editor-text)] opacity-55">{formatTime(v.timestamp)}</span>
+              </div>
               <div className="flex items-center gap-1.5">
-                <span className="text-[10px] text-[var(--editor-text)]/50 shrink-0">Run {run}</span>
-                {isDefault ? (
-                  <span className="text-[10px] text-[var(--editor-text)]/60 capitalize">{label}</span>
-                ) : (
-                  <span className="text-xs font-medium text-[var(--editor-text)] truncate capitalize" title={label}>{label}</span>
+                <button
+                  onClick={() => onRestore(v.hash)}
+                  disabled={restoring === v.hash}
+                  className={`flex items-center h-6 px-2 rounded border border-indigo-500/50 text-[10px] font-medium hover:bg-indigo-500/10 transition-colors disabled:opacity-40 ${mode === 'light' ? 'text-indigo-700' : 'text-indigo-300'}`}
+                >
+                  {restoring === v.hash ? 'Restoring…' : 'Restore →'}
+                </button>
+                {onCompareVersion && (
+                  <button
+                    onClick={() => onCompareVersion(v.hash)}
+                    className="flex items-center h-6 px-2 rounded border border-[var(--editor-border)] text-[10px] font-medium text-[var(--editor-text)] opacity-70 hover:opacity-100 transition-opacity"
+                  >
+                    Compare
+                  </button>
                 )}
               </div>
-              <span className="text-[10px] text-[var(--editor-text)]/55">{formatTime(v.timestamp)}</span>
-              <button
-                onClick={() => onRestore(v.hash)}
-                disabled={restoring === v.hash}
-                className="text-[10px] text-[var(--editor-accent)] hover:opacity-80 text-left transition-colors disabled:opacity-40"
-              >
-                {restoring === v.hash ? 'Restoring…' : 'Restore →'}
-              </button>
             </div>
           )
         })}
       </div>
+      </div>
     </div>
   )
 }