@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/versions/VersionHistoryPanel.tsx

@@ -0,0 +1,274 @@
+// The Version history panel: the right column's occupant while it is open
+// (RightColumn). The open autosave group heads the list as "Current version";
+// the closed groups and the named versions follow under their days, newest
+// first. A click previews a row on the stage, read-only; Restore writes it
+// back as one undo step. A viewer reads and previews, and nothing else.
+import { useEffect, useRef, useState } from "react";
+import { Avatar, useContextMenu, usePrompt } from "@dailies-studio/ui";
+import type { MenuEntry } from "@dailies-studio/ui";
+import type { ShotVersion } from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { shortcutFor } from "../../state/shortcuts.js";
+import { VIEW_ONLY } from "../../state/workspace.js";
+import {
+  authorLine,
+  groupByDay,
+  personHue,
+  personName,
+  versionNameError,
+  versionSub,
+  versionTitle,
+} from "./versionModel.js";
+
+export function VersionHistoryPanel() {
+  const store = useStore();
+  const list = useShotEditor((s) => s.versionList);
+  const preview = useShotEditor((s) => s.versionPreview);
+  const roleReadOnly = useShotEditor((s) => s.versionPreview?.roleReadOnly ?? s.readOnly);
+  const menu = useContextMenu();
+  const { prompt, dialog } = usePrompt();
+  const people = list?.people ?? {};
+  const versions = list?.versions ?? [];
+  const head = list?.head ?? null;
+  const previewId = preview?.version.id ?? null;
+
+  const openMenu = (v: ShotVersion, button: HTMLElement): void => {
+    const r = button.getBoundingClientRect();
+    const locked = roleReadOnly ? { disabled: true, title: VIEW_ONLY } : {};
+    const items: MenuEntry[] = [
+      {
+        kind: "action",
+        id: "version.rename",
+        label: "Rename…",
+        ...locked,
+        onSelect: () => {
+          void prompt({
+            title: v.name === undefined ? "Name this version" : "Rename version",
+            label: "Name",
+            initialValue: v.name ?? "",
+            confirmLabel: v.name === undefined ? "Name" : "Rename",
+            validate: versionNameError,
+          }).then((label) => {
+            if (label !== null) void store.renameVersion(v.id, label.trim());
+          });
+        },
+      },
+      {
+        kind: "action",
+        id: "version.preview",
+        label: "Preview",
+        onSelect: () => void store.previewVersion(v.id),
+      },
+      {
+        kind: "action",
+        id: "version.restore",
+        label: "Restore",
+        ...locked,
+        onSelect: () => void store.restoreVersion(v.id),
+      },
+    ];
+    menu.open({ x: r.right, y: r.bottom + 6 }, items);
+  };
+
+  return (
+    <section className="versions-panel" data-testid="versions-panel" aria-label="Version history">
+      {dialog}
+      {menu.menu}
+      <header className="versions-head">
+        <h2 className="versions-title">Version history</h2>
+        <button
+          type="button"
+          className="btn is-icon"
+          data-testid="versions-close"
+          aria-label="Close the version history"
+          title="Close the version history"
+          onClick={() => store.openVersions(false)}
+        >
+          ×
+        </button>
+      </header>
+      {roleReadOnly ? null : <SaveVersion />}
+      <div className="versions-list" data-testid="versions-list">
+        <button
+          type="button"
+          className="version-row is-current"
+          aria-pressed={previewId === null}
+          data-testid="version-current"
+          onClick={() => store.exitVersionPreview()}
+        >
+          <Faces ids={head?.authors ?? []} people={people} />
+          <span className="version-text">
+            <span className="version-name">Current version</span>
+            <span className="version-sub">
+              {head === null || head.authors.length === 0
+                ? "Editing now"
+                : `${authorLine(head.authors, people)} · editing now`}
+            </span>
+          </span>
+        </button>
+        {list === null ? (
+          <p className="versions-note">Loading versions…</p>
+        ) : versions.length === 0 ? (
+          <p className="versions-note">No earlier versions yet. Autosaves gather here as you work.</p>
+        ) : (
+          groupByDay(versions, Date.now()).map((group) => (
+            <div key={group.day} className="versions-day" role="group" aria-label={group.day}>
+              <h3 className="versions-day-head">{group.day}</h3>
+              {group.versions.map((v) => (
+                <div key={v.id} className="version-item" data-selected={v.id === previewId ? "" : undefined}>
+                  <button
+                    type="button"
+                    className={`version-row${v.name === undefined ? "" : " is-named"}`}
+                    aria-pressed={v.id === previewId}
+                    data-testid={`version-row-${v.id}`}
+                    onClick={() => void store.previewVersion(v.id)}
+                  >
+                    <Faces ids={v.authors} people={people} />
+                    <span className="version-text">
+                      <span className="version-name">{versionTitle(v, versions)}</span>
+                      <span className="version-sub">{versionSub(v, people)}</span>
+                    </span>
+                    {v.name === undefined ? null : <span className="version-badge">Named</span>}
+                  </button>
+                  <button
+                    type="button"
+                    className="btn is-icon version-more"
+                    data-testid={`version-more-${v.id}`}
+                    aria-label={`More for ${versionTitle(v, versions)}`}
+                    title="More"
+                    onClick={(e) => openMenu(v, e.currentTarget)}
+                  >
+                    …
+                  </button>
+                </div>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+      {preview === null ? null : (
+        <footer className="versions-preview" data-testid="versions-preview">
+          <span className="versions-caps">Previewing</span>
+          <span className="versions-preview-what">
+            {`${preview.version.name === undefined ? versionTitle(preview.version, versions) : `"${preview.version.name}"`} · ${versionSub(preview.version, people)}`}
+          </span>
+          <div className="versions-preview-verbs">
+            <button
+              type="button"
+              className="btn is-outline"
+              data-testid="versions-back"
+              onClick={() => store.exitVersionPreview()}
+            >
+              Back to current
+            </button>
+            <button
+              type="button"
+              className="btn is-primary"
+              data-testid="versions-restore"
+              disabled={roleReadOnly}
+              title={roleReadOnly ? VIEW_ONLY : "Restore this version. Undo takes it back."}
+              onClick={() => void store.restoreVersion(preview.version.id)}
+            >
+              Restore
+            </button>
+          </div>
+        </footer>
+      )}
+    </section>
+  );
+}
+
+/** ⌘S lands here: the name field, focused. Otherwise one button opens it. */
+function SaveVersion() {
+  const store = useStore();
+  const ask = useShotEditor((s) => s.versionNameAsk);
+  const [label, setLabel] = useState("");
+  const [busy, setBusy] = useState(false);
+  const field = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (!ask) return;
+    // A second ⌘S while the field is up selects what is typed, ready to retype.
+    field.current?.focus();
+    field.current?.select();
+  }, [ask]);
+  const error = label === "" ? null : versionNameError(label);
+  const save = async (): Promise<void> => {
+    if (busy || label.trim() === "" || error !== null) return;
+    setBusy(true);
+    try {
+      if (await store.saveVersionNamed(label.trim())) setLabel("");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const combo = shortcutFor("file.save");
+  if (!ask) {
+    return (
+      <div className="versions-save">
+        <button
+          type="button"
+          className="btn is-outline"
+          data-testid="versions-save-open"
+          title={combo === undefined ? undefined : `Save version (${combo})`}
+          onClick={() => store.setVersionNameAsk(true)}
+        >
+          Save version…
+        </button>
+      </div>
+    );
+  }
+  return (
+    <div className="versions-save">
+      <label className="versions-caps" htmlFor="versions-save-name">
+        Save version
+      </label>
+      <div className="versions-save-field">
+        <input
+          ref={field}
+          id="versions-save-name"
+          className="text-input"
+          data-testid="versions-save-name"
+          placeholder="Name this version"
+          value={label}
+          maxLength={80}
+          aria-invalid={error !== null}
+          onChange={(e) => setLabel(e.currentTarget.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              void save();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              e.stopPropagation();
+              store.setVersionNameAsk(false);
+            }
+          }}
+        />
+        <button
+          type="button"
+          className="btn is-primary"
+          data-testid="versions-save"
+          disabled={busy || label.trim() === "" || error !== null}
+          onClick={() => void save()}
+        >
+          Save
+        </button>
+      </div>
+      <p className="versions-hint">{error ?? "Enter saves. Esc closes the field."}</p>
+    </div>
+  );
+}
+
+/** The writers of a row, overlapped, first writer on top. */
+function Faces({ ids, people }: { ids: readonly string[]; people: Readonly<Record<string, string>> }) {
+  const shown = ids.slice(0, 3);
+  return (
+    <span className="version-faces" aria-hidden="true">
+      {shown.map((id) => (
+        <span key={id} className="version-face" style={{ background: `hsl(${personHue(id)} 45% 45%)` }}>
+          <Avatar url={null} label={personName(id, people)} className="version-face-mark" />
+        </span>
+      ))}
+    </span>
+  );
+}

package/src/panels/versions/versionModel.ts

@@ -0,0 +1,103 @@
+// What the Version history panel says about each row: who, when, and under
+// which day. Pure, so the words are tested without a DOM.
+import type { ShotVersion, ShotVersionHead } from "../../api.js";
+
+/** The CLI's one user (packages/store/src/shotVersions.ts). */
+const LOCAL_USER = "local";
+
+/** A person's display name. The CLI's one user is "You"; a hosted id the
+ *  server could not name (a member who left) is "Former member". */
+export function personName(id: string, people: Readonly<Record<string, string>>): string {
+  if (id === LOCAL_USER) return "You";
+  return people[id] ?? "Former member";
+}
+
+/** "Priya", "Tom, Kanishak", "Tom, Kanishak +2". Empty when no writer was
+ *  recorded (an agent apply, a save from before authors). */
+export function authorLine(ids: readonly string[], people: Readonly<Record<string, string>>): string {
+  const names = ids.map((id) => personName(id, people));
+  return names.length <= 2 ? names.join(", ") : `${names.slice(0, 2).join(", ")} +${names.length - 2}`;
+}
+
+const TIME = new Intl.DateTimeFormat("en-US", {
+  hour: "numeric",
+  minute: "2-digit",
+});
+
+/** "6:05 PM", or "3:40 to 3:52 PM" for a group that ran across minutes. */
+export function timeSpan(from: number, at: number): string {
+  const end = TIME.format(at);
+  const start = TIME.format(from);
+  if (start === end) return end;
+  const period = (s: string): string => s.slice(s.lastIndexOf(" ") + 1);
+  return `${period(start) === period(end) ? start.slice(0, start.lastIndexOf(" ")) : start} to ${end}`;
+}
+
+const DAY = new Intl.DateTimeFormat("en-US", {
+  weekday: "short",
+  month: "short",
+  day: "numeric",
+});
+const DAY_YEAR = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+
+/** The group header a row sits under: "Today", "Yesterday", "Mon, Oct 6",
+ *  or "Oct 6, 2025" for another year. Local days. */
+export function dayLabel(at: number, now: number): string {
+  const day = new Date(at);
+  const today = new Date(now);
+  const startOf = (d: Date): number => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  const days = Math.round((startOf(today) - startOf(day)) / 86_400_000);
+  if (days === 0) return "Today";
+  if (days === 1) return "Yesterday";
+  return day.getFullYear() === today.getFullYear() ? DAY.format(day) : DAY_YEAR.format(day);
+}
+
+/** Rows under their day headers, newest first, as the list arrives. */
+export function groupByDay(versions: readonly ShotVersion[], now: number): { day: string; versions: ShotVersion[] }[] {
+  const groups: { day: string; versions: ShotVersion[] }[] = [];
+  for (const v of versions) {
+    const day = dayLabel(v.at, now);
+    const last = groups.at(-1);
+    if (last?.day === day) last.versions.push(v);
+    else groups.push({ day, versions: [v] });
+  }
+  return groups;
+}
+
+/** A row's title: its name, what a restore brought back, or "Autosaved". */
+export function versionTitle(v: ShotVersion, all: readonly ShotVersion[]): string {
+  if (v.name !== undefined) return v.name;
+  if (v.restoredFrom !== undefined) {
+    const from = all.find((r) => r.id === v.restoredFrom);
+    return from?.name === undefined ? "Restored an earlier version" : `Restored "${from.name}"`;
+  }
+  return "Autosaved";
+}
+
+/** "Priya · 3:40 to 3:52 PM", or the time alone with no recorded writer. */
+export function versionSub(v: ShotVersionHead, people: Readonly<Record<string, string>>): string {
+  const who = authorLine(v.authors, people);
+  const when = timeSpan(v.from, v.at);
+  return who === "" ? when : `${who} · ${when}`;
+}
+
+/** The server's rule (packages/store/src/shotVersions.ts `versionName`):
+ *  trimmed, 1 to 80 characters, one line. Null when it passes. */
+export function versionNameError(raw: string): string | null {
+  const name = raw.trim();
+  if (name === "") return "Give the version a name.";
+  if (name.length > 80) return "A version name is at most 80 characters.";
+  if (/[\u0000-\u001f\u007f]/.test(name)) return "A version name is one line.";
+  return null;
+}
+
+/** A stable hue per person, so one face keeps one colour in every row. */
+export function personHue(id: string): number {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
+  return h % 360;
+}

package/src/panels/virtualWindow.ts

@@ -0,0 +1,271 @@
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { RefObject } from "react";
+
+export interface VirtualWindow {
+  start: number;
+  end: number;
+  before: number;
+  after: number;
+}
+
+function prefixHeights(heights: readonly number[]): number[] {
+  const prefix = [0];
+  for (const height of heights) prefix.push(prefix[prefix.length - 1]! + Math.max(1, height));
+  return prefix;
+}
+
+function lowerBound(values: readonly number[], target: number): number {
+  let low = 0;
+  let high = values.length;
+  while (low < high) {
+    const middle = (low + high) >>> 1;
+    if (values[middle]! < target) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+
+function upperBound(values: readonly number[], target: number): number {
+  let low = 0;
+  let high = values.length;
+  while (low < high) {
+    const middle = (low + high) >>> 1;
+    if (values[middle]! <= target) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+}
+
+/** Variable-height form used where one expanded timeline row contains child
+ * lanes. Prefix sums keep scroll updates logarithmic. */
+function variableVirtualWindowFromPrefix(
+  prefix: readonly number[],
+  viewportStart: number,
+  viewportHeight: number,
+  overscanPx: number,
+): VirtualWindow {
+  const count = prefix.length - 1;
+  if (count <= 0) return { start: 0, end: 0, before: 0, after: 0 };
+  const total = prefix[prefix.length - 1]!;
+  const from = Math.max(0, viewportStart - overscanPx);
+  const to = Math.min(total, Math.max(from + 1, viewportStart + viewportHeight + overscanPx));
+  const start = Math.min(count - 1, Math.max(0, upperBound(prefix, from) - 1));
+  const end = Math.min(count, Math.max(start + 1, lowerBound(prefix, to)));
+  return { start, end, before: prefix[start]!, after: total - prefix[end]! };
+}
+
+const INITIAL_ROWS = 24;
+
+/** Fixed-height range math shared by the outline and timeline. `end` is
+ * exclusive and spacers retain the full scroll geometry. */
+export function fixedVirtualWindow(
+  count: number,
+  rowHeight: number,
+  viewportStart: number,
+  viewportHeight: number,
+  overscanRows = 8,
+): VirtualWindow {
+  if (count <= 0) return { start: 0, end: 0, before: 0, after: 0 };
+  const safeHeight = Math.max(1, rowHeight);
+  const first = Math.min(count - 1, Math.floor(Math.max(0, viewportStart) / safeHeight));
+  const visible = Math.max(1, Math.ceil(Math.max(0, viewportHeight) / safeHeight));
+  const start = Math.max(0, first - overscanRows);
+  const end = Math.min(count, first + visible + overscanRows);
+  return {
+    start,
+    end,
+    before: start * safeHeight,
+    after: Math.max(0, (count - end) * safeHeight),
+  };
+}
+
+export interface WindowSpan {
+  start: number;
+  end: number;
+}
+
+/** Merge the viewport with the few rows whose DOM identity is currently
+ * load-bearing (a focused, renamed or dragged outline row, the picker's active
+ * option). Disjoint spacers keep the list's exact fixed-row geometry, so
+ * pinning a row costs one row rather than filling the entire distance between
+ * it and the viewport. */
+export function pinnedWindowSpans(
+  range: { start: number; end: number },
+  count: number,
+  pinnedIndexes: readonly number[],
+): WindowSpan[] {
+  const windowStart = Math.min(count, Math.max(0, range.start));
+  const windowEnd = Math.min(count, Math.max(windowStart, range.end));
+  const candidates: WindowSpan[] = [
+    { start: windowStart, end: windowEnd },
+    ...pinnedIndexes
+      .filter((index) => index >= 0 && index < count)
+      .map((index) => ({ start: index, end: index + 1 })),
+  ]
+    .filter((span) => span.end > span.start)
+    .sort((a, b) => a.start - b.start);
+  const merged: WindowSpan[] = [];
+  for (const candidate of candidates) {
+    const previous = merged[merged.length - 1];
+    if (previous === undefined || candidate.start > previous.end) {
+      merged.push({ ...candidate });
+    } else {
+      previous.end = Math.max(previous.end, candidate.end);
+    }
+  }
+  return merged;
+}
+
+/** Internal fixed-row windowing with no dependency. The list keeps its total
+ * height through spacers, while scroll and resize only update the mounted
+ * slice. Small lists retain their complete DOM for compatibility. */
+export function useFixedVirtualWindow(args: {
+  listRef: RefObject<HTMLElement | null>;
+  scrollSelector: string;
+  count: number;
+  rowHeight: number;
+  enabled: boolean;
+  overscanRows?: number;
+}): VirtualWindow {
+  const { listRef, scrollSelector, count, rowHeight, enabled, overscanRows = 8 } = args;
+  const [range, setRange] = useState<VirtualWindow>(() =>
+    enabled
+      ? fixedVirtualWindow(count, rowHeight, 0, INITIAL_ROWS * rowHeight, overscanRows)
+      : { start: 0, end: count, before: 0, after: 0 },
+  );
+
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setRange((current) =>
+        current.start === 0 && current.end === count && current.before === 0 && current.after === 0
+          ? current
+          : { start: 0, end: count, before: 0, after: 0 },
+      );
+      return;
+    }
+    const list = listRef.current;
+    const scroller = list?.closest(scrollSelector);
+    if (!(list instanceof HTMLElement) || !(scroller instanceof HTMLElement)) {
+      setRange(fixedVirtualWindow(count, rowHeight, 0, INITIAL_ROWS * rowHeight, overscanRows));
+      return;
+    }
+    let lastScrollTop = scroller.scrollTop;
+    const measure = (): void => {
+      lastScrollTop = scroller.scrollTop;
+      const listBox = list.getBoundingClientRect();
+      const scrollBox = scroller.getBoundingClientRect();
+      const viewportStart = Math.max(0, scrollBox.top - listBox.top);
+      const viewportHeight = scroller.clientHeight || INITIAL_ROWS * rowHeight;
+      const next = fixedVirtualWindow(count, rowHeight, viewportStart, viewportHeight, overscanRows);
+      setRange((current) =>
+        current.start === next.start && current.end === next.end &&
+        current.before === next.before && current.after === next.after
+          ? current
+          : next,
+      );
+    };
+    const onScroll = (): void => {
+      // The timeline's playhead follow writes `scrollLeft` while playing. A
+      // native scroll event does not say which axis moved, so measuring here
+      // unconditionally forced two vertical layout reads per followed frame
+      // for every mounted window. Vertical range math changes only with the
+      // vertical axis; resize/layout changes have their observer below.
+      if (scroller.scrollTop === lastScrollTop) return;
+      measure();
+    };
+    measure();
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(scroller);
+    observer?.observe(list);
+    window.addEventListener("resize", measure);
+    return () => {
+      scroller.removeEventListener("scroll", onScroll);
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [count, enabled, listRef, overscanRows, rowHeight, scrollSelector]);
+
+  return range;
+}
+
+export function useVariableVirtualWindow(args: {
+  listRef: RefObject<HTMLElement | null>;
+  scrollSelector: string;
+  heights: readonly number[];
+  enabled: boolean;
+  overscanPx?: number;
+}): VirtualWindow {
+  const { listRef, scrollSelector, heights, enabled, overscanPx = 224 } = args;
+  const prefix = useMemo(() => prefixHeights(heights), [heights]);
+  const [range, setRange] = useState<VirtualWindow>(() =>
+    enabled
+      ? variableVirtualWindowFromPrefix(prefix, 0, INITIAL_ROWS * 28, overscanPx)
+      : { start: 0, end: heights.length, before: 0, after: 0 },
+  );
+
+  // The heights change identity on every document edit (they are derived from
+  // the document), and the observer effect below used to list them as a
+  // dependency: every rAF frame of a keyframe drag tore down and rebuilt the
+  // scroll listener and a two-element `ResizeObserver`, then measured twice.
+  // The prefix rides a ref instead, and a change to it re-measures once.
+  const prefixRef = useRef(prefix);
+  prefixRef.current = prefix;
+  const measureRef = useRef<(() => void) | null>(null);
+  useLayoutEffect(() => {
+    measureRef.current?.();
+  }, [prefix]);
+
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setRange((current) =>
+        current.start === 0 && current.end === heights.length && current.before === 0 && current.after === 0
+          ? current
+          : { start: 0, end: heights.length, before: 0, after: 0 },
+      );
+      return;
+    }
+    const list = listRef.current;
+    const scroller = list?.closest(scrollSelector);
+    if (!(list instanceof HTMLElement) || !(scroller instanceof HTMLElement)) {
+      setRange(variableVirtualWindowFromPrefix(prefixRef.current, 0, INITIAL_ROWS * 28, overscanPx));
+      return;
+    }
+    let lastScrollTop = scroller.scrollTop;
+    const measure = (): void => {
+      lastScrollTop = scroller.scrollTop;
+      const listBox = list.getBoundingClientRect();
+      const scrollBox = scroller.getBoundingClientRect();
+      const viewportStart = Math.max(0, scrollBox.top - listBox.top);
+      const viewportHeight = scroller.clientHeight || INITIAL_ROWS * 28;
+      const next = variableVirtualWindowFromPrefix(prefixRef.current, viewportStart, viewportHeight, overscanPx);
+      setRange((current) =>
+        current.start === next.start && current.end === next.end &&
+        current.before === next.before && current.after === next.after
+          ? current
+          : next,
+      );
+    };
+    const onScroll = (): void => {
+      // See the fixed-row form above. Horizontal follow must stay a single
+      // `scrollLeft` write, never a vertical virtualization measurement.
+      if (scroller.scrollTop === lastScrollTop) return;
+      measure();
+    };
+    measureRef.current = measure;
+    measure();
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(scroller);
+    observer?.observe(list);
+    window.addEventListener("resize", measure);
+    return () => {
+      if (measureRef.current === measure) measureRef.current = null;
+      scroller.removeEventListener("scroll", onScroll);
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [enabled, heights.length, listRef, overscanPx, scrollSelector]);
+
+  return range;
+}