@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/liveCap.ts

@@ -0,0 +1,90 @@
+// A BUDGET OF LIVE PREVIEWS, shared by every door that mounts one: the second
+// shot stage (`ComponentStage`), on the board's component cards and in the
+// component sheet. Each live preview is a document
+// and, for anything WebGL, a context, so a module-level budget caps how many
+// run at once. A preview takes a slot by its key and hands it on when it
+// unmounts or scrolls away; one waiting wakes when a slot frees.
+//
+// ONE SLOT PER KEY, COUNTED. A card that holds the slot for its reference id
+// mounts a preview that asks for the same id, so the two share one slot, and
+// the slot frees only when the last holder lets go.
+// ponytail: a fixed cap; make it LRU by last selection if more doors mount it.
+import { useEffect, useState } from "react";
+
+export const LIVE_CAP = 6;
+const live = new Map<string, number>();
+const waiters = new Set<() => void>();
+
+function acquire(key: string): boolean {
+  const holders = live.get(key);
+  if (holders !== undefined) {
+    live.set(key, holders + 1);
+    return true;
+  }
+  if (live.size >= LIVE_CAP) return false;
+  live.set(key, 1);
+  return true;
+}
+
+function release(key: string): void {
+  const holders = live.get(key);
+  if (holders === undefined) return;
+  if (holders > 1) {
+    live.set(key, holders - 1);
+    return;
+  }
+  live.delete(key);
+  for (const wake of [...waiters]) wake();
+}
+
+/** For the suite, which must not inherit one file's live cards. */
+export function resetLivePreviews(): void {
+  live.clear();
+  waiters.clear();
+}
+
+/**
+ * Whether `key` holds a live slot. Asks while `want` is true, waits while the
+ * budget is full, and releases the moment `want` turns false or the caller
+ * unmounts.
+ */
+export function useLiveSlot(key: string, want: boolean): boolean {
+  const [slot, setSlot] = useState(false);
+  useEffect(() => {
+    if (!want) return;
+    let held = false;
+    const take = (): void => {
+      if (held || !acquire(key)) return;
+      held = true;
+      waiters.delete(take);
+      setSlot(true);
+    };
+    take();
+    if (!held) waiters.add(take);
+    return () => {
+      waiters.delete(take);
+      setSlot(false);
+      if (held) release(key);
+    };
+  }, [want, key]);
+  return slot && want;
+}
+
+/** Whether `el` is on screen. True where there is no `IntersectionObserver`
+ *  (a suite), so a test sees the live branch. */
+export function useInView(el: HTMLElement | null): boolean {
+  const [inView, setInView] = useState(false);
+  useEffect(() => {
+    if (el === null) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) setInView(entry.isIntersecting);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [el]);
+  return inView;
+}

package/src/panels/storyboard/plan.css

@@ -0,0 +1,295 @@
+/* THE PLAN PANEL (PlanPanel.tsx, Paper SB1 and SB2). Wrapped in the
+   `component-sheets` cascade layer: the component imports it, and under the
+   /scene index's layer order it ranks below the house widgets, so it styles
+   its own classes and the layout around the widgets, never the widgets. The
+   rules it needs on a widget (the cut trigger's open caret, the bare fields'
+   inset) are in styles/modes/storyboard.css, in the chrome layer, where they
+   win. */
+@layer component-sheets {
+  .plan-panel {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    background: var(--surface-panel);
+  }
+
+  .plan-head-shot {
+    margin-left: auto;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-3);
+  }
+  .plan-head-number {
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+  /* The name is a button that opens its rename (`PartName`): it reads as the
+     title, ellipsized, and only its keyboard focus shows a ring. The heading
+     around it keeps the head's face, so the open rename's words are not set
+     in a heading's bold. */
+  .plan-head-title {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    display: flex;
+    font: inherit;
+  }
+  .plan-head-name {
+    min-width: 0;
+    max-width: 100%;
+    padding: 0;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-lg);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-1);
+    background: none;
+    border: 0;
+    border-radius: var(--radius-xs);
+    cursor: default;
+  }
+  .plan-head-name:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+  /* The open rename takes the name's place and the width it had. */
+  .plan-rename {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+  }
+
+  /* THE BODY on the inspector's scale: 12 in from the column's edges and 12
+     between blocks, a block's caps label 6 over its control. It holds its
+     scrollbar's gutter, so a body that grows past the fold does not narrow
+     every control under the pointer. */
+  .plan-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: var(--space-6);
+    min-height: 0;
+    padding: var(--space-6);
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+  .plan-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    min-width: 0;
+  }
+  .plan-field-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+  }
+  .plan-count {
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-3);
+  }
+  .plan-count.is-numeric {
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-weight: var(--weight-regular);
+  }
+
+  /* How it moves: one row per beat, its number in a chip, then its words in
+     the house box with its remove (the house row verb, `.insp-key`) inside
+     it, so the open draft's box, which has no remove, ends on the same edge. */
+  .plan-beats {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .plan-beat {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-height: var(--row-h);
+  }
+  .plan-beat[draggable="true"] { cursor: grab; }
+  .plan-beat-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--badge-h);
+    height: var(--badge-h);
+    border-radius: var(--radius-xs);
+    background: var(--surface-secondary);
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+  .plan-add-beat {
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+    gap: var(--space-4);
+    height: var(--row-h);
+    padding: 0;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-2);
+    background: none;
+    border: none;
+    border-radius: var(--radius-xs);
+    cursor: pointer;
+  }
+  .plan-add-beat:hover:not(:disabled) { color: var(--ink-1); }
+  .plan-add-beat-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--badge-h);
+    height: var(--badge-h);
+    color: var(--ink-3);
+  }
+  .plan-add-beat-icon > svg { width: 16px; height: 16px; }
+  .plan-add-beat:disabled { opacity: var(--opacity-disabled); cursor: default; }
+  .plan-add-beat:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+
+  /* Length and Cut to next share one row: a fixed Length, the cut the rest.
+     The cut is the house select trigger; the plan sets only its played
+     length, in the numeric face after the name. */
+  .plan-timing {
+    display: flex;
+    gap: var(--space-3);
+  }
+  .plan-length { flex: none; width: 96px; }
+  .plan-cut { flex: 1; }
+  .plan-cut-length {
+    flex: none;
+    font-family: var(--font-numeric);
+    font-variant-numeric: var(--numeric);
+    color: var(--ink-2);
+  }
+  .plan-cut-rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--line-soft);
+  }
+
+  /* Ground: a swatch before each word. */
+  .plan-swatch {
+    display: inline-block;
+    flex: none;
+    width: 10px;
+    height: 10px;
+    margin-inline-end: var(--space-3);
+    border-radius: var(--radius-2xs);
+    vertical-align: middle;
+  }
+  .plan-swatch.is-paper { background: var(--sketch-paper); }
+  .plan-swatch.is-dark { background: var(--surface-app); box-shadow: inset 0 0 0 1px var(--line-strong); }
+  .plan-swatch.is-brand { background: var(--accent); }
+
+  /* Pinned to this shot. */
+  .plan-pins {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .plan-pin {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    min-height: var(--row-h);
+    border-radius: var(--radius-sm);
+  }
+  .plan-pin[draggable="true"] { cursor: grab; }
+  .plan-pin:hover { background: var(--fill-rest); }
+  .plan-pin-thumb {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--badge-h);
+    height: var(--badge-h);
+    overflow: hidden;
+    border-radius: var(--radius-xs);
+    background: var(--surface-secondary);
+    font-size: var(--type-micro);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+  .plan-pin-thumb > img { width: 100%; height: 100%; object-fit: cover; }
+  .plan-pin-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-1);
+  }
+  .plan-pin-on {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex: none;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    font-weight: var(--weight-medium);
+    color: var(--ink-2);
+  }
+  .plan-pin-on::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: var(--success);
+  }
+  .plan-pin-kind {
+    flex: none;
+    width: 64px;
+    text-align: right;
+    font-size: var(--type-sm);
+    line-height: var(--leading-xs);
+    color: var(--ink-3);
+  }
+  .plan-none {
+    margin: 0;
+    font-size: var(--type-md);
+    line-height: var(--leading-sm);
+    color: var(--ink-3);
+  }
+
+  /* Style: the count, under a soft rule. */
+  .plan-style {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding-top: var(--space-6);
+    border-top: 1px solid var(--line-soft);
+  }
+  .plan-style-text {
+    margin: 0;
+    min-width: 0;
+    font-size: var(--type-md);
+    line-height: var(--leading-xs);
+    color: var(--ink-2);
+  }
+}

package/src/panels/storyboard/posterCache.ts

@@ -0,0 +1,133 @@
+// A COMPONENT CARD'S POSTER: the still a live preview shows at rest (S3).
+//
+// The board draws every component card from this picture and mounts a live
+// stage only on hover, focus or selection (`ComponentStage`, `LIVE_CAP`), so
+// a wall of cards costs pictures, not documents. A live stage captures the
+// poster once it is ready (`bridge.captureFrame`) and writes it here.
+//
+// KEYED ON WHAT THE PICTURE SHOWS: the component (or Studio definition), its
+// content hash and the card's own props, so a tweak or a code change asks for
+// a new poster rather than showing a stale one.
+//
+// MEMORY FIRST, THEN INDEXEDDB, so a reload shows the posters at once. Every
+// IndexedDB call is wrapped: a private window, blocked site data or a suite
+// with no IndexedDB leaves the memory cache, and the live stage still draws.
+// ponytail: the store grows with every key; prune by age if it ever matters.
+import { useEffect, useState } from "react";
+import { canonicalJSON, fnv1a64 } from "@dailies-studio/contract";
+
+const DB_NAME = "dailies-component-posters";
+const STORE = "posters";
+
+const memory = new Map<string, string>();
+const listeners = new Set<(key: string) => void>();
+
+/** `${component|def}|${contentHash}|${fnv1a64(canonicalJSON(props))}`. A
+ *  props value canonicalJSON refuses (a non-finite number) keys as "props". */
+export function posterKey(source: string, contentHash: string, props: Record<string, unknown>): string {
+  let hash: string;
+  try {
+    hash = fnv1a64(canonicalJSON(props));
+  } catch {
+    hash = "props";
+  }
+  return `${source}|${contentHash}|${hash}`;
+}
+
+let opened: Promise<IDBDatabase | null> | null = null;
+function openDb(): Promise<IDBDatabase | null> {
+  opened ??= new Promise<IDBDatabase | null>((resolve) => {
+    try {
+      if (typeof indexedDB === "undefined") {
+        resolve(null);
+        return;
+      }
+      const request = indexedDB.open(DB_NAME, 1);
+      request.onupgradeneeded = () => request.result.createObjectStore(STORE);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => resolve(null);
+      request.onblocked = () => resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+  return opened;
+}
+
+async function readStored(key: string): Promise<Blob | null> {
+  const db = await openDb();
+  if (db === null) return null;
+  return new Promise<Blob | null>((resolve) => {
+    try {
+      const request = db.transaction(STORE, "readonly").objectStore(STORE).get(key);
+      request.onsuccess = () => resolve(request.result instanceof Blob ? request.result : null);
+      request.onerror = () => resolve(null);
+    } catch {
+      resolve(null);
+    }
+  });
+}
+
+/** The poster's object URL, from memory, else from IndexedDB. Null for none. */
+export async function readPoster(key: string): Promise<string | null> {
+  const known = memory.get(key);
+  if (known !== undefined) return known;
+  const blob = await readStored(key);
+  if (blob === null) return null;
+  // A capture may have landed while IndexedDB answered: it is newer.
+  const raced = memory.get(key);
+  if (raced !== undefined) return raced;
+  const url = URL.createObjectURL(blob);
+  memory.set(key, url);
+  return url;
+}
+
+/** Keeps `blob` as the poster for `key`, replacing any older one. */
+export function writePoster(key: string, blob: Blob): string {
+  const old = memory.get(key);
+  if (old !== undefined) URL.revokeObjectURL(old);
+  const url = URL.createObjectURL(blob);
+  memory.set(key, url);
+  for (const listen of [...listeners]) listen(key);
+  void openDb().then((db) => {
+    try {
+      db?.transaction(STORE, "readwrite").objectStore(STORE).put(blob, key);
+    } catch {
+      // The memory copy stands; the next session captures again.
+    }
+  });
+  return url;
+}
+
+/** The poster for `key` as an object URL, following later writes. Null while
+ *  there is none (or `key` is null). */
+export function usePoster(key: string | null): string | null {
+  const [url, setUrl] = useState<string | null>(() => (key === null ? null : (memory.get(key) ?? null)));
+  useEffect(() => {
+    if (key === null) {
+      setUrl(null);
+      return;
+    }
+    let alive = true;
+    setUrl(memory.get(key) ?? null);
+    void readPoster(key).then((next) => {
+      if (alive && next !== null) setUrl(next);
+    });
+    const listen = (written: string): void => {
+      if (written === key) setUrl(memory.get(key) ?? null);
+    };
+    listeners.add(listen);
+    return () => {
+      alive = false;
+      listeners.delete(listen);
+    };
+  }, [key]);
+  return url;
+}
+
+/** For the suite: forget every poster in memory. */
+export function resetPosters(): void {
+  for (const url of memory.values()) URL.revokeObjectURL(url);
+  memory.clear();
+  listeners.clear();
+}