@dailies-studio/shot-editor 0.1.0

package/src/panels/files/icons.tsx

@@ -0,0 +1,118 @@
+// The rail's icon set: hand-drawn 24-viewBox strokes at 1.5, tinted by the CSS
+// `color` of whatever wraps them. Still no icon dependency — but a family of
+// consistent strokes, where the old unicode glyphs never read as one voice.
+//
+// Sized by CSS (`.layer-kind svg`, `.layer-flag svg`), never by attributes, so
+// one rule owns the scale everywhere the set appears.
+import type { ReactElement, ReactNode } from "react";
+
+function icon(children: ReactNode): ReactElement {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  );
+}
+
+/** One icon per layer kind — the same grammar Figma settled: a lone diamond is
+ *  an instance, four diamonds are a definition. */
+const KIND_ICONS: Record<string, ReactElement> = {
+  text: icon(<path d="M6 6h12M12 6v13" />),
+  image: icon(
+    <>
+      <rect x="3.5" y="5" width="17" height="14" rx="2" />
+      <circle cx="9" cy="9.5" r="1.5" />
+      <path d="m4.5 17 4-4 4 4 3-3 4 4" />
+    </>,
+  ),
+  video: icon(
+    <>
+      <rect x="3.5" y="5" width="17" height="14" rx="2" />
+      <path d="M10.5 9.5v5l4-2.5z" />
+    </>,
+  ),
+  rect: icon(<rect x="4.5" y="6.5" width="15" height="11" rx="1.5" />),
+  ellipse: icon(<circle cx="12" cy="12" r="7.5" />),
+  line: icon(<path d="M5.5 18.5 18.5 5.5" />),
+  arrow: icon(<path d="M6 18 18 6M9 6h9v9" />),
+  path: icon(<path d="M4.5 19.5c7 0 8-15 15-15" />),
+  // Angle brackets: the one glyph nobody has to be told means markup.
+  html: icon(<path d="m9 8-4 4 4 4M15 8l4 4-4 4" />),
+  group: icon(
+    <>
+      <rect x="4" y="4" width="12" height="12" rx="2" />
+      <path d="M20 9v9a2 2 0 0 1-2 2H9" />
+    </>,
+  ),
+  device: icon(
+    <>
+      <rect x="7" y="3.5" width="10" height="17" rx="2" />
+      <path d="M10.5 17.5h3" />
+    </>,
+  ),
+  mesh: icon(<path d="M12 3.5 19.5 8v8L12 20.5 4.5 16V8z" />),
+  cloner: icon(
+    <>
+      <rect x="4.5" y="4.5" width="6" height="6" rx="1" />
+      <rect x="13.5" y="4.5" width="6" height="6" rx="1" />
+      <rect x="4.5" y="13.5" width="6" height="6" rx="1" />
+      <rect x="13.5" y="13.5" width="6" height="6" rx="1" />
+    </>,
+  ),
+  instance: icon(<path d="m12 4 8 8-8 8-8-8z" />),
+};
+
+const FALLBACK = icon(<path d="m12 6 6 6-6 6-6-6z" />);
+
+export function kindIcon(kind: string): ReactElement {
+  return KIND_ICONS[kind] ?? FALLBACK;
+}
+
+/** A shot row: a clapperboard. */
+export const SCENE_ICON = icon(
+  <>
+    <rect x="3.5" y="5" width="17" height="14" rx="2" />
+    <path d="M3.5 9.5h17M9 5.5l1.5 4M14 5.5l1.5 4" />
+  </>,
+);
+
+/** A component definition: the four-diamond glyph. */
+export const COMPONENT_ICON = icon(
+  <path d="M12 3.5 15 6.5 12 9.5 9 6.5zM17.5 9l3 3-3 3-3-3zM12 14.5l3 3-3 3-3-3zM6.5 9l3 3-3 3-3-3z" />,
+);
+
+export const EYE_ICON = icon(
+  <>
+    <path d="M3.5 12S6.5 6 12 6s8.5 6 8.5 6-3 6-8.5 6S3.5 12 3.5 12z" />
+    <circle cx="12" cy="12" r="2.5" />
+  </>,
+);
+
+export const EYE_OFF_ICON = icon(
+  <>
+    <path d="M3.5 12S6.5 6 12 6s8.5 6 8.5 6-3 6-8.5 6S3.5 12 3.5 12z" />
+    <path d="m5 4.5 14 15" />
+  </>,
+);
+
+export const LOCK_ICON = icon(
+  <>
+    <rect x="5.5" y="10.5" width="13" height="9" rx="2" />
+    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" />
+  </>,
+);
+
+export const UNLOCK_ICON = icon(
+  <>
+    <rect x="5.5" y="10.5" width="13" height="9" rx="2" />
+    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 6.8-1.2" />
+  </>,
+);

package/src/panels/header/DocSwitcher.tsx

@@ -0,0 +1,85 @@
+// Which scene is open, and how to open another one.
+//
+// A `<select>` and not a custom popover, deliberately: it is the one control in
+// this chrome that has to work before anything else does (there is no document
+// yet), and the native element brings keyboard navigation, type-ahead and a
+// scrolling list that never leaves the viewport for free.
+import { useState } from "react";
+import { useShotEditor, useStore } from "../../state/context.js";
+
+export function DocSwitcher() {
+  const store = useStore();
+  const shots = useShotEditor((s) => s.shots);
+  const name = useShotEditor((s) => s.name);
+  const [creating, setCreating] = useState(false);
+  const [draft, setDraft] = useState("");
+
+  const create = (): void => {
+    const trimmed = draft.trim();
+    setCreating(false);
+    setDraft("");
+    if (trimmed.length > 0) void store.createShot(trimmed);
+  };
+
+  if (creating) {
+    return (
+      <form
+        className="doc-switcher"
+        onSubmit={(e) => {
+          e.preventDefault();
+          create();
+        }}
+      >
+        <input
+          className="doc-switcher-input"
+          autoFocus
+          value={draft}
+          placeholder="scene name"
+          aria-label="New scene name"
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              setCreating(false);
+              setDraft("");
+            }
+          }}
+        />
+      </form>
+    );
+  }
+
+  return (
+    <div className="doc-switcher">
+      <select
+        className="doc-switcher-select"
+        aria-label="Open scene"
+        value={name ?? ""}
+        onChange={(e) => {
+          const next = e.target.value;
+          // Closing DROPS the in-memory document, so the debounced autosave has
+          // to land first — the same order `openShot` uses. `flush` rejects
+          // when it could not write, which leaves the scene open with the
+          // failure already on screen instead of discarding it.
+          if (next === "") void store.flush().then(() => store.closeShot(), () => {});
+          else void store.openShot(next);
+        }}
+      >
+        <option value="">{shots.length === 0 ? "no scenes yet" : "choose a scene…"}</option>
+        {shots.map((s) => (
+          <option key={s.name} value={s.name}>
+            {s.name}
+          </option>
+        ))}
+      </select>
+      <button
+        type="button"
+        className="doc-switcher-new"
+        title="New scene"
+        onClick={() => setCreating(true)}
+      >
+        +
+      </button>
+    </div>
+  );
+}

package/src/panels/header/Header.tsx

@@ -0,0 +1,132 @@
+// The floating header: which document, what state it is in, and the transport.
+//
+// Everything here reads the store and writes through it. No panel holds a copy
+// of the document, so there is no second place for the open document's identity
+// to live and drift.
+import { useEffect } from "react";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { DocSwitcher } from "./DocSwitcher.js";
+import { HistoryControls } from "./HistoryControls.js";
+import { StatusBadges } from "./StatusBadges.js";
+import { TransportBar } from "./TransportBar.js";
+import { ZoomControls } from "./ZoomControls.js";
+
+export function Header() {
+  const store = useStore();
+  useEffect(() => {
+    void store.refreshShots();
+  }, [store]);
+
+  const name = useShotEditor((s) => s.name);
+
+  return (
+    <header className="shell-header" data-testid="shot-header">
+      <DocSwitcher />
+      <HistoryControls />
+      {name === null ? null : <TransportBar />}
+      <div className="shell-header-spacer" />
+      {name === null ? null : <PanelToggles />}
+      <ZoomControls />
+      <StatusBadges />
+      <AgentToggle />
+      {name !== null && <ExportButton />}
+    </header>
+  );
+}
+
+/**
+ * Show and hide the three panels.
+ *
+ * IN THE HEADER, and not on the panels themselves, for one reason: a control
+ * that lives on the thing it hides disappears with it. A chevron on the left
+ * rail can collapse the rail and then has nowhere to be, which is how these
+ * end up needing a second floating "reopen" affordance nobody finds. The
+ * header never moves, so one button per panel is the whole story, and each is
+ * `aria-pressed` so its state is readable rather than inferred from the glyph.
+ */
+function PanelToggles() {
+  const store = useStore();
+  const rail = useShotEditor((s) => s.railCollapsed);
+  const inspector = useShotEditor((s) => s.inspectorCollapsed);
+  const dock = useShotEditor((s) => s.dockCollapsed);
+  const rows: ReadonlyArray<{ on: boolean; glyph: string; label: string; key: string; run: () => void }> = [
+    { on: !rail, glyph: "▙", label: "Left panel", key: "[", run: () => store.setRailCollapsed(!rail) },
+    { on: !dock, glyph: "▄", label: "Timeline", key: "", run: () => store.setDockCollapsed(!dock) },
+    {
+      on: !inspector,
+      glyph: "▟",
+      label: "Right panel",
+      key: "]",
+      run: () => store.setInspectorCollapsed(!inspector),
+    },
+  ];
+  return (
+    <div className="panel-toggles" role="group" aria-label="Panels">
+      {rows.map(({ on, glyph, label, key, run }) => (
+        <button
+          key={label}
+          type="button"
+          className={`btn btn-icon${on ? " is-active" : ""}`}
+          aria-pressed={on}
+          title={`${on ? "Hide" : "Show"} ${label.toLowerCase()}${key === "" ? "" : ` (${key})`}`}
+          onClick={run}
+        >
+          {glyph}
+        </button>
+      ))}
+      <button
+        type="button"
+        className="btn btn-icon"
+        title="Hide every panel (.)"
+        onClick={() => store.togglePanels()}
+      >
+        ⛶
+      </button>
+    </div>
+  );
+}
+
+/** Opens the drawer, which REPLACES the inspector rather than sitting beside
+ *  it. One right rail: the shell grid has one column there, and a second
+ *  floating panel over a 3D stage is a panel that covers the thing being
+ *  discussed. */
+function AgentToggle() {
+  const store = useStore();
+  const open = useShotEditor((s) => s.agentOpen);
+  const running = useShotEditor((s) => s.agentRunning);
+  return (
+    <button
+      type="button"
+      className={`btn${open ? " is-active" : ""}`}
+      aria-label="Agent"
+      aria-pressed={open}
+      title="Agent — describe the scene you want"
+      onClick={() => store.setAgentOpen(!open)}
+    >
+      {running ? "Agent…" : "Agent"}
+    </button>
+  );
+}
+
+/** The export button, doubling as the render's progress readout.
+ *
+ *  One control, because "export" and "how is my export going" are the same
+ *  question to the author — and because the dialog can be closed while a render
+ *  runs, so a button that forgot would be the only place the progress lived. */
+function ExportButton() {
+  const store = useStore();
+  const job = useShotEditor((s) => s.renderJob);
+  const running = job?.phase === "running";
+  const pct = running && job.total > 0 ? Math.round((job.done / job.total) * 100) : null;
+  return (
+    <button
+      type="button"
+      className={`btn is-primary header-export${running ? " is-running" : ""}`}
+      aria-label="Export"
+      title="Export (⌘E)"
+      onClick={() => store.setExportOpen(true)}
+    >
+      {pct === null ? "Export" : `Exporting ${pct}%`}
+    </button>
+  );
+}

package/src/panels/header/HistoryControls.tsx

@@ -0,0 +1,20 @@
+import { useShotEditor, useStore } from "../../state/context.js";
+
+/** Undo/redo. The enabled state comes from engine's history, never from a
+ *  count this chrome keeps — a second source of truth for "can I undo" is a
+ *  button that lies exactly when it matters. */
+export function HistoryControls() {
+  const store = useStore();
+  const canUndo = useShotEditor((s) => s.canUndo);
+  const canRedo = useShotEditor((s) => s.canRedo);
+  return (
+    <div className="history-controls">
+      <button type="button" disabled={!canUndo} title="Undo (⌘Z)" onClick={() => store.undo()}>
+        ↶
+      </button>
+      <button type="button" disabled={!canRedo} title="Redo (⌘⇧Z)" onClick={() => store.redo()}>
+        ↷
+      </button>
+    </div>
+  );
+}

package/src/panels/header/StatusBadges.tsx

@@ -0,0 +1,49 @@
+// What the chrome knows and the author cannot see: save state, codegen refusal,
+// and which GL backend actually came up.
+//
+// The backend badge is not decoration, but read it for what it is: the shot
+// lane PINS WebGL (`SHOT_STAGE_BACKEND`, packages/shot/src/stageBackend.ts) so
+// the editor previews on the same backend the export renders on — "webgl" here
+// is the pin working, not a fallback event. The badge earns its keep on the
+// day something changes that pin: a backend the export lane cannot reproduce
+// is the first thing to check when an effect looks wrong in one place and
+// right in the other.
+import { useShotEditor } from "../../state/context.js";
+
+export function StatusBadges() {
+  const saveState = useShotEditor((s) => s.saveState);
+  const dirty = useShotEditor((s) => s.dirty);
+  const emitWarning = useShotEditor((s) => s.emitWarning);
+  const stageInfo = useShotEditor((s) => s.stageInfo);
+  const name = useShotEditor((s) => s.name);
+
+  return (
+    <div className="status-badges">
+      {stageInfo === null ? null : (
+        <span className="badge badge-quiet" title={`${stageInfo.width}x${stageInfo.height}`}>
+          {stageInfo.backend}
+        </span>
+      )}
+      {emitWarning === null ? null : (
+        <span className="badge badge-warn" title={emitWarning}>
+          codegen
+        </span>
+      )}
+      {name === null ? null : (
+        <span className={`badge badge-${saveState}`} title={saveLabel(saveState, dirty)}>
+          {saveLabel(saveState, dirty)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function saveLabel(saveState: string, dirty: boolean): string {
+  if (saveState === "error") return "save failed";
+  if (saveState === "saving") return "saving…";
+  // "saved" plus pending edits is not saved — the badge follows the DOCUMENT,
+  // not the last request, or an autosave debounce reads as "everything is on
+  // disk" for the whole 400ms an author might close the tab in.
+  if (dirty) return "unsaved";
+  return saveState === "saved" ? "saved" : "—";
+}

package/src/panels/header/TransportBar.tsx

@@ -0,0 +1,86 @@
+// Play, pause, and the playhead.
+//
+// ── THE ONE THING WORTH READING ──────────────────────────────────────────
+//
+// Playback is a rAF loop that converts WALL TIME into an INTEGER FRAME and
+// seeks to it. It never accumulates frames per tick.
+//
+// The difference matters: `frame++` per rAF makes playback speed a function of
+// the monitor's refresh rate (a 120Hz laptop plays a 30fps shot at double
+// speed) and makes a dropped frame permanently shift everything after it.
+// Deriving the frame from elapsed time instead means the preview plays at the
+// document's own rate on any display, drops frames under load rather than
+// slowing down, and — because the seek target is `round(elapsed * fps)` — puts
+// the same integer frame on screen that the export will render.
+import { useEffect, useRef } from "react";
+import { docDurationFrames } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+
+/** The slider and the readout — the two things that show the frame — in their
+ *  own component, so the per-frame tick during playback re-renders them alone
+ *  and never the play button or the rAF loop's owner above. */
+function TransportScrub({ total, playing }: { total: number; playing: boolean }) {
+  const store = useStore();
+  const frame = useShotEditor((s) => s.frame);
+  return (
+    <>
+      <input
+        className="transport-scrub"
+        type="range"
+        min={0}
+        max={Math.max(0, total - 1)}
+        step={1}
+        value={frame}
+        aria-label="Playhead"
+        onChange={(e) => {
+          // Scrubbing pauses. A transport that kept playing under the pointer
+          // would fight the drag on every rAF.
+          if (playing) store.setPlaying(false);
+          store.seek(Number(e.target.value));
+        }}
+      />
+      <span className="transport-readout" data-testid="frame-readout">
+        {frame} / {Math.max(0, total - 1)}
+      </span>
+    </>
+  );
+}
+
+export function TransportBar() {
+  const store = useStore();
+  const playing = useShotEditor((s) => s.playing);
+  const doc = useShotEditor((s) => s.doc);
+  const total = doc === null ? 0 : docDurationFrames(doc);
+  const fps = doc === null ? 30 : doc.fps.num / doc.fps.den;
+
+  const startedAt = useRef(0);
+  const startedFrame = useRef(0);
+  useEffect(() => {
+    if (!playing || doc === null || total <= 0) return;
+    startedAt.current = performance.now();
+    startedFrame.current = store.getState().frame;
+    let raf = 0;
+    const tick = (): void => {
+      const elapsed = (performance.now() - startedAt.current) / 1000;
+      const target = startedFrame.current + Math.round(elapsed * fps);
+      store.seek(((target % total) + total) % total);
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [playing, doc, total, fps, store]);
+
+  return (
+    <div className="transport">
+      <button
+        type="button"
+        className="transport-play"
+        title={playing ? "Pause (Space)" : "Play (Space)"}
+        onClick={() => store.setPlaying(!playing)}
+      >
+        {playing ? "❚❚" : "▶"}
+      </button>
+      <TransportScrub total={total} playing={playing} />
+    </div>
+  );
+}

package/src/panels/header/ZoomControls.tsx

@@ -0,0 +1,38 @@
+import { useShotEditor, useStore } from "../../state/context.js";
+
+/** Zoom readout, plus fit. Routed by the ACTIVE pane, exactly as ⌘+/⌘−/⇧Z
+ *  are: in a split the buttons address the pane the author last touched, and
+ *  in working mode they dolly the working view instead of silently writing a
+ *  camera-pane zoom nobody can see. The readout is a percentage only for the
+ *  camera pane — "100%" has no meaning for an orbit camera, so the working
+ *  pane shows which view the controls are pointed at instead. The stage OWNS
+ *  the views (it knows the pane sizes), so "fit" asks the stage and mirrors
+ *  what it answers rather than computing a second opinion here. */
+export function ZoomControls() {
+  const store = useStore();
+  // The ZOOM alone, never the whole view object: `onViewChange` fires per
+  // pointermove of a camera pan, and subscribing the object re-rendered this
+  // readout at pointer rate to display an unchanged percentage.
+  const zoom = useShotEditor((s) => s.view.zoom);
+  const working = useShotEditor((s) => s.activePane === "working");
+  const open = useShotEditor((s) => s.name !== null);
+  if (!open) return null;
+  return (
+    <div className="zoom-controls">
+      <button type="button" title="Zoom out" onClick={() => store.zoomActivePane(-1)}>
+        −
+      </button>
+      <button
+        type="button"
+        className="zoom-readout"
+        title={working ? "Fit the working view (⇧Z)" : "Fit (⇧Z)"}
+        onClick={() => store.fitActivePane()}
+      >
+        {working ? "3D" : `${Math.round(zoom * 100)}%`}
+      </button>
+      <button type="button" title="Zoom in" onClick={() => store.zoomActivePane(1)}>
+        +
+      </button>
+    </div>
+  );
+}