@dailies-studio/shot-editor 0.1.0

package/src/state/menu.ts

@@ -0,0 +1,141 @@
+// What a right-click offers, as DATA.
+//
+// ── WHY IT IS A PURE FUNCTION AND NOT A COMPONENT ───────────────────────
+//
+// Two surfaces open this menu — the stage and the outliner's rows — and they
+// have to agree completely: a Delete that means one thing on the canvas and
+// another in the list is worse than having only one of them. A function from
+// (state, targets) to entries is the smallest thing both can call, and the
+// only thing a test can check without rendering either.
+//
+// ── AND WHY EVERY ENTRY IS AN EXISTING VERB ─────────────────────────────
+//
+// Not one of these does its own work. They are the store verbs the keymap
+// already binds, listed under names an author can read — so the menu cannot
+// drift from the shortcuts, and a fix to `duplicateSelection` fixes it in three
+// places at once. A menu entry that reached into the document itself would be a
+// second implementation of an edit that already exists.
+import type { MenuEntry } from "@dailies-studio/ui";
+import type { ShotEditorStore } from "./store.js";
+import type { ShotEditorState } from "./types.js";
+
+/** The layers a menu acts on, and what they are. Computed by the caller,
+ *  because the stage knows the raw hit stack and the outliner knows the row. */
+export interface MenuTargets {
+  /** Everything the verbs act on — the selection, in practice. */
+  ids: readonly string[];
+  /** Which of those are mesh layers, for the material entries. Empty means the
+   *  material rows are absent rather than disabled: a disabled row invites a
+   *  click and then explains, and there is nothing to explain here. */
+  meshIds: readonly string[];
+  /** Do any of the mesh targets already carry a material? Drives "Remove". */
+  hasMaterial: boolean;
+}
+
+export function layerMenuEntries(
+  store: ShotEditorStore,
+  state: ShotEditorState,
+  targets: MenuTargets,
+): MenuEntry[] {
+  if (targets.ids.length === 0) return [];
+  const layers = state.sceneId === null ? undefined : state.doc?.scenesById[state.sceneId]?.layersById;
+  const first = layers?.[targets.ids[0]!];
+  // The label follows what the FIRST target is, not what the whole set is. A
+  // mixed selection has no honest single word, and "Hide/Show" reading off the
+  // subject the author right-clicked is the behaviour every outliner has.
+  const hidden = first?.hidden === true;
+  const locked = first?.locked === true;
+
+  // The `id`s are STABLE and independent of the label, because the label flips
+  // (Hide/Show, Lock/Unlock) and the menu keys its rows on the id. A key that
+  // changed with the word would remount the row every time the flag did.
+  const entries: MenuEntry[] = [
+    { kind: "action", id: "duplicate", label: "Duplicate", onSelect: () => store.duplicateSelection() },
+    { kind: "separator" },
+    {
+      kind: "action",
+      id: "hidden",
+      label: hidden ? "Show" : "Hide",
+      onSelect: () => store.toggleFlag("hidden"),
+    },
+    {
+      kind: "action",
+      id: "locked",
+      label: locked ? "Unlock" : "Lock",
+      onSelect: () => store.toggleFlag("locked"),
+    },
+    { kind: "separator" },
+  ];
+
+  if (state.isolation !== null) {
+    entries.push({
+      kind: "action",
+      id: "isolation",
+      label: "Exit isolation",
+      onSelect: () => store.exitIsolation(),
+    });
+  } else {
+    entries.push({
+      kind: "action",
+      id: "isolation",
+      label: "Isolate",
+      onSelect: () => {
+        const id = targets.ids[0];
+        if (id !== undefined) store.enterIsolation(id);
+      },
+    });
+  }
+
+  if (targets.meshIds.length > 0) {
+    entries.push({ kind: "separator" });
+    entries.push({
+      kind: "action",
+      id: "material",
+      label: "Apply material…",
+      onSelect: () => store.openMaterialPicker(targets.meshIds),
+    });
+    if (targets.hasMaterial) {
+      entries.push({
+        kind: "action",
+        id: "material-remove",
+        label: "Remove material",
+        onSelect: () => store.removeMeshMaterial(targets.meshIds),
+      });
+    }
+  }
+
+  entries.push({ kind: "separator" });
+  entries.push({
+    kind: "action",
+    id: "delete",
+    label: "Delete",
+    danger: true,
+    onSelect: () => store.deleteSelection(),
+  });
+  return entries;
+}
+
+/**
+ * The targets for a set of layer ids, read off the open document.
+ *
+ * Shared by both callers so "which of these can take a material" is answered
+ * once. A component definition's interior is deliberately not searched: the
+ * menu acts on what the outline is showing, which `editingDef` already scopes.
+ */
+export function menuTargetsFor(state: ShotEditorState, ids: readonly string[]): MenuTargets {
+  const layers =
+    state.editingDef !== null
+      ? state.doc?.components?.[state.editingDef]?.layersById
+      : state.sceneId === null
+        ? undefined
+        : state.doc?.scenesById[state.sceneId]?.layersById;
+  const meshIds: string[] = [];
+  let hasMaterial = false;
+  for (const id of ids) {
+    const layer = layers?.[id];
+    if (layer === undefined || layer.kind !== "mesh") continue;
+    meshIds.push(id);
+    if (layer.mesh.material !== undefined) hasMaterial = true;
+  }
+  return { ids, meshIds, hasMaterial };
+}

package/src/state/panelSize.ts

@@ -0,0 +1,26 @@
+// How big the two resizable panels may be. Pure, so the bounds are one fact
+// the store, the tests and the reset-to-default all read from the same place.
+//
+// Both are stored in PIXELS even though the dock's old default was `42vh`.
+// A viewport-relative height cannot be dragged: the author sets a size in
+// pixels with their pointer, and re-deriving a percentage from it would make
+// the panel change size on the next window resize for no reason they asked
+// for. The one place the viewport still gets a say is the dock's UPPER bound,
+// which is passed in per drag — a dock taller than the window is a dock with
+// no stage behind it.
+
+export const RAIL_WIDTH = { min: 168, max: 460, default: 232 } as const;
+export const DOCK_HEIGHT = { min: 120, max: 640, default: 300 } as const;
+
+/** Clamp to whole pixels. Whole, because a fractional panel width puts every
+ *  box positioned off it on a half pixel and the seams stop being crisp. */
+export function clampSize(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) return min;
+  return Math.round(Math.min(max, Math.max(min, value)));
+}
+
+/** The dock's ceiling for a given window: its own max, or most of the window,
+ *  whichever is smaller. */
+export function dockCeiling(viewportHeight: number): number {
+  return Math.max(DOCK_HEIGHT.min, Math.min(DOCK_HEIGHT.max, Math.round(viewportHeight * 0.7)));
+}

package/src/state/renderEvents.ts

@@ -0,0 +1,100 @@
+// The studio's SSE bus, as this chrome consumes it: render progress, and
+// document changes made somewhere else.
+//
+// `/api/events` is the documented, versioned channel the whole studio already
+// publishes on, so neither of these needs a socket of its own — they need event
+// names. The alternative, polling, would be a second definition of "is it
+// running" / "has it moved" that can disagree with the first.
+//
+// ── WHY THE AGENT APPLY ARRIVES HERE AND NOT IN agentActions ───────────
+//
+// Every write emits `doc-changed`, including an agent apply. So this chrome
+// adopts an agent's change through EXACTLY the path it adopts a second tab's
+// save, which is also the only path that carries the "you have unsaved edits"
+// refusal. A bespoke re-read in the apply handler would be a second answer to
+// "the document moved underneath me", and only one of them would have that
+// refusal in it.
+//
+// EventSource reconnects on its own, and a missed frame costs a stale progress
+// number until the next one. For the document that is safe too: `doc-changed`
+// is a NOTIFICATION and `adoptExternalChange` re-reads from the server, so a
+// dropped frame costs a stale view until the next write, which the baseRev 409
+// protocol already makes safe.
+import type { ShotEditorStore } from "./store.js";
+import type { RenderJob } from "../api.js";
+
+/** The SSE event names; `docEvents.ts` is the other half of this contract. */
+const EVENT = "shot-render";
+const DOC_EVENT = "doc-changed";
+
+/**
+ * Subscribe until the returned function is called.
+ *
+ * `EventSource` absent (a test environment, an ancient browser) is a no-op
+ * rather than a throw: progress is a readout, and losing it must never stop the
+ * chrome from booting.
+ */
+export function subscribeStudioEvents(store: ShotEditorStore): () => void {
+  const Source = (globalThis as { EventSource?: typeof EventSource }).EventSource;
+  if (Source === undefined) return () => {};
+  const source = new Source("/api/events");
+  const onMessage = (e: MessageEvent<string>): void => {
+    const job = parseJob(e.data);
+    // Only THIS document's renders. The bus is project-wide and a second chrome
+    // may be exporting something else; showing its progress here would be a
+    // progress bar for a file this window is not making.
+    if (job !== null && job.name === store.getState().name) store.setRenderJob(job);
+  };
+  const onDoc = (e: MessageEvent<string>): void => {
+    const payload = parseDocChange(e.data);
+    // The SHOT lane only. The bus carries motion, canvas and scene writes too,
+    // and handing one of those to a shot store would ask it to reload a
+    // document that is not in its store at all.
+    if (payload !== null && payload.lane === "shot") store.adoptExternalChange(payload);
+  };
+  source.addEventListener(EVENT, onMessage as EventListener);
+  source.addEventListener(DOC_EVENT, onDoc as EventListener);
+  return () => {
+    source.removeEventListener(EVENT, onMessage as EventListener);
+    source.removeEventListener(DOC_EVENT, onDoc as EventListener);
+    source.close();
+  };
+}
+
+/** The subset of `DocChangedPayload` this chrome acts on. A malformed frame is
+ *  dropped for the same reason a malformed job frame is. */
+function parseDocChange(
+  raw: string,
+): { lane: string; name?: string; origin?: string; clientId?: string } | null {
+  try {
+    const data: unknown = JSON.parse(raw);
+    if (data === null || typeof data !== "object") return null;
+    const p = data as { lane?: unknown; name?: unknown; origin?: unknown; clientId?: unknown };
+    if (typeof p.lane !== "string") return null;
+    return {
+      lane: p.lane,
+      ...(typeof p.name === "string" ? { name: p.name } : {}),
+      ...(typeof p.origin === "string" ? { origin: p.origin } : {}),
+      ...(typeof p.clientId === "string" ? { clientId: p.clientId } : {}),
+    };
+  } catch {
+    return null;
+  }
+}
+
+/** Narrow the wire payload. A malformed frame is dropped, not thrown: the bus
+ *  is at-most-once by design and one bad frame must not kill the stream. */
+function parseJob(raw: string): (RenderJob & { name: string }) | null {
+  try {
+    const data: unknown = JSON.parse(raw);
+    if (data === null || typeof data !== "object") return null;
+    const job = data as RenderJob;
+    if (typeof job.id !== "string" || typeof job.name !== "string") return null;
+    if (job.phase !== "running" && job.phase !== "done" && job.phase !== "failed" && job.phase !== "cancelled") {
+      return null;
+    }
+    return job;
+  } catch {
+    return null;
+  }
+}