@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/toolbar/useAddRows.tsx

@@ -0,0 +1,326 @@
+// THE ADD ROWS, their file picker and the media tool's file claim, shared by
+// the Studio dock's Insert button (InsertButton.tsx) and the Insert drawer
+// (InsertDrawer.tsx). The drawer mounts beside the button and opts out of the
+// claim (`claimImagePick: false`), so there is still ONE claimant of
+// `imagePick` on screen at a time.
+//
+// ── THE ROWS ARE GATED ON THE SCHEMA AT RUNTIME ─────────────────────────
+//
+// `hasLayerKind` reads `LAYER_KINDS`, so a kind removed from the document model
+// removes its row here instead of leaving a button that mints a layer nothing
+// can render. It has to be a runtime test and not `LAYER_KINDS.includes("mesh")`
+// inline: against the literal tuple that call is a TYPE error the day the kind
+// goes, which is a build nobody can ship: the menu could not degrade, only
+// fail to compile.
+//
+// ── ONE FILE INPUT, TWO PICKERS ─────────────────────────────────────────
+//
+// The model row needs one, and so does the MEDIA TOOL (`image`, labelled
+// "Media" because the file it takes may be an image or a video), which draws
+// its box on the canvas and only then needs a file, so its geometry parks in
+// the store (`imagePick`) and is claimed here. A dialog can only be opened by a
+// click on a real `<input>`, and the store is not one.
+//
+// The rail's Audio button asks the same input for a sound (`pickAudio`), so
+// the rail still renders one input for every file it takes.
+import { useEffect, useRef, useState } from "react";
+import type { ReactElement } from "react";
+import { DEVICE_PRESET_IDS, MESH_PRIMITIVE_KINDS } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { hasLayerKind } from "../../state/insert.js";
+import { AUDIO_FILE_ACCEPT } from "../timeline/AudioLane.js";
+// The menu's grouping (the AUTHORING taxonomy, not the schema's) and the
+// particle builtins promoted onto its Generate shelf. Both were written out
+// here and again in `icons.tsx`, which keys its family and builtin glyph maps
+// on the same names; the classification rule and the promoted ids are stated
+// once in the leaf module both files now read.
+import { promotedBuiltinLabel } from "../../addFamilies.js";
+import type { AddFamily } from "../../addFamilies.js";
+
+/**
+ * What the hidden input is being asked for, or null when idle.
+ *
+ * An OBJECT and not a bare string, so asking for the same kind twice is a new
+ * value: a dialog the author cancelled fires no event at all, and with a string
+ * the second "image" would be `===` the stale first one, the effect would not
+ * re-run, and the picker would silently never open again.
+ */
+type Pick = { kind: "image" } | { kind: "model" } | { kind: "audio" };
+
+// EXTENSIONS, NOT `image/*` OR `video/*`. The "sniff" on the far end is a
+// filename extension map (`KIND_BY_EXT` in cli/src/assetStore.ts), and
+// `storeAsset` writes the bytes BEFORE the kind is consulted. So a file the
+// picker offered and the map does not know (.mkv, .heic) is stored, then
+// refused, leaving an orphan blob in the content-addressed store that nothing
+// ever collects. The lists are exactly what the map answers "image" or "video"
+// for. SVG is one: the map says image, and the player's texture loader sizes
+// an SVG explicitly and refuses one with no drawable size (textureCache.ts).
+const IMAGE_EXTENSIONS = ".png,.jpg,.jpeg,.webp,.avif,.gif,.svg";
+const VIDEO_EXTENSIONS = ".mp4,.webm,.mov,.m4v";
+const IMAGE_TYPES = "image/png,image/jpeg,image/webp,image/avif,image/gif,image/svg+xml";
+const VIDEO_TYPES = "video/mp4,video/webm,video/quicktime";
+const MODEL_ACCEPT = ".glb,.gltf,model/gltf-binary";
+/** One kind's picker filter. Shared with the inspector's Replace (MediaSection). */
+export const IMAGE_ACCEPT = `${IMAGE_EXTENSIONS},${IMAGE_TYPES}`;
+export const VIDEO_ACCEPT = `${VIDEO_EXTENSIONS},${VIDEO_TYPES}`;
+
+function acceptFor(want: Pick | null): string {
+  if (want?.kind === "model") return MODEL_ACCEPT;
+  if (want?.kind === "audio") return AUDIO_FILE_ACCEPT;
+  return `${IMAGE_EXTENSIONS},${VIDEO_EXTENSIONS},${IMAGE_TYPES},${VIDEO_TYPES}`;
+}
+
+/** One insert a menu or rail offers. `family` is the Add menu's shelf;
+ *  `section` is set on the rows the component picker lists (D3). */
+export interface AddRow {
+  key: string;
+  family: AddFamily;
+  section?: "In this project" | "Library" | "Effects" | "Particles";
+  label: string;
+  disabled?: boolean;
+  title?: string;
+  run: () => void;
+}
+
+export function useAddRows(o: {
+  /** Fetch the component registry now. The menu asks when it first opens,
+   *  the rail when it mounts, so a chrome that never adds a component never
+   *  makes the HTTP call. */
+  wantLibrary: boolean;
+  /** Called when a file pick starts an insert, so a host can close its menu. */
+  onPicked?: () => void;
+  /** Answer the media tool's parked box (`imagePick`). True by default. The
+   *  Insert drawer passes false: it mounts beside the dock's own claimant, and
+   *  two claimants would open the dialog twice. */
+  claimImagePick?: boolean;
+}): {
+  rows: AddRow[];
+  busy: boolean;
+  /** Open the picker for a sound, imported at the playhead into the entered
+   *  Shot (or onto the film's own lane when none is). */
+  pickAudio: () => void;
+  /** The ONE hidden input. The host renders it once. */
+  fileInput: ReactElement;
+} {
+  const store = useStore();
+  const imagePick = useShotEditor((s) => s.imagePick);
+  const hasSelection = useShotEditor((s) => s.selection.length > 0);
+  const definitions = useShotEditor((s) => s.doc?.components);
+  const library = useShotEditor((s) => s.library);
+  const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
+  const [busy, setBusy] = useState(false);
+  const [want, setWant] = useState<Pick | null>(null);
+  const fileRef = useRef<HTMLInputElement | null>(null);
+
+  // A drawn image box is waiting on a file: open the dialog for it. An EFFECT
+  // is the seam because the draw happened in the STAGE's document, so there is
+  // no click of ours to hang it off. User activation propagates from a
+  // same-origin iframe, so the dialog is still allowed to open; if a browser
+  // ever stops propagating it, the ceiling is that the image tool needs a
+  // second click here rather than anything breaking.
+  const claims = o.claimImagePick !== false;
+  useEffect(() => {
+    if (claims && imagePick !== null) setWant({ kind: "image" });
+  }, [claims, imagePick]);
+
+  useEffect(() => {
+    if (want !== null) fileRef.current?.click();
+  }, [want]);
+
+  // A failure leaves the instance rows absent (the error surfaces in the
+  // inspector, which is the surface that can say what it means for a layer).
+  useEffect(() => {
+    if (o.wantLibrary && !libraryLoaded) void store.refreshLibrary();
+  }, [o.wantLibrary, libraryLoaded, store]);
+
+  const report = (e: unknown): void =>
+    store.reportError(e instanceof Error ? e.message : String(e));
+
+  // SEVERAL MEDIA FILES, in the order picked. The first claims the parked box;
+  // each next one parks the same box again and goes through the same claim,
+  // so they land where the box was, one at a time. A failed file is reported
+  // and the rest still land.
+  const placeMedia = async (files: readonly File[]): Promise<void> => {
+    const box = store.getState().imagePick;
+    await store.completeImageDraw(files[0] ?? null).catch(report);
+    for (const file of files.slice(1)) {
+      if (box === null) return;
+      store.stageHandlers.onDraw("image", box);
+      await store.completeImageDraw(file).catch(report);
+    }
+  };
+
+  const chose = (files: readonly File[]): void => {
+    const asked = want;
+    setWant(null);
+    if (asked === null) return;
+    o.onPicked?.();
+    setBusy(true);
+    const s = store.getState();
+    const file = files[0] ?? null;
+    const done =
+      asked.kind === "image"
+        ? placeMedia(files)
+        : file === null
+          ? Promise.resolve()
+          : asked.kind === "audio"
+            ? store.importAudio(file, s.frame, s.enteredScene ?? undefined)
+            : store.addMeshLayer(file);
+    void done.catch(report).finally(() => setBusy(false));
+  };
+
+  // A CANCELLED dialog is a pick of nothing, so `imagePick` is released rather
+  // than left parked for the next mount to reopen the dialog over. Native,
+  // because React does not wire `onCancel` on an `<input>`.
+  useEffect(() => {
+    const el = fileRef.current;
+    if (el === null || want === null) return;
+    const onCancel = (): void => chose([]);
+    el.addEventListener("cancel", onCancel);
+    return () => el.removeEventListener("cancel", onCancel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [want]);
+
+  // It goes through `onDraw("image", …)` and not through a new store action,
+  // because that is where the box-waits-for-a-file handshake already lives:
+  // the geometry parks in `imagePick`, the effect above claims it, and the
+  // hidden input finishes the job. A second path would be a second place that
+  // knows how a media insert is staged.
+  //
+  // TWO IDENTICAL POINTS: a click, not a drag. `boxOf` re-shapes that to the
+  // source's own aspect once the file has been measured (insert.ts), which is
+  // a better box than any rectangle this menu could guess.
+  const pickMedia = (): void => {
+    // A menu row expresses no position: it lands centred on what the frame
+    // shows, like every other add (F54).
+    const centre = store.insertOrigin();
+    store.stageHandlers.onDraw("image", [centre, centre]);
+  };
+
+  // Rows carry their FAMILY, and the hosts group them, in the taxonomy's own
+  // order.
+  const rows: AddRow[] = [];
+  if (hasLayerKind("image") || hasLayerKind("video")) {
+    // THE ONE CAPABILITY THIS PRODUCT IS BUILT AROUND, and until this row it was
+    // reachable only by arming a dock tool labelled "Media" and rubber-banding a
+    // box. The Add menu listed html, every mesh primitive, a 3D model, every
+    // device preset, both particle builtins, a cloner, a group and the whole
+    // component registry, and not the one thing an author opens the app to do.
+    rows.push({ key: "media", family: "Draw", label: "Image or video…", run: () => pickMedia() });
+  }
+  if (hasLayerKind("html")) {
+    rows.push({ key: "html", family: "Draw", label: "Html snippet", run: () => store.addHtmlLayer() });
+  }
+  if (hasLayerKind("mesh")) {
+    // The parametric shapes (schema v11), from the schema's own list, by the
+    // DEVICE_PRESET_IDS rule: a hardcoded copy is a second place that knows
+    // what a shape is.
+    for (const kind of MESH_PRIMITIVE_KINDS) {
+      rows.push({
+        key: `shape:${kind}`,
+        family: "Solid",
+        label: kind.charAt(0).toUpperCase() + kind.slice(1),
+        run: () => store.addShapeLayer(kind),
+      });
+    }
+    rows.push({ key: "mesh", family: "Solid", label: "3D model…", run: () => setWant({ kind: "model" }) });
+  }
+  if (hasLayerKind("device")) {
+    // FROM THE REGISTRY, never a list written here: a hardcoded one is a second
+    // place that knows what a device is, and `validateShotDoc` refuses a preset
+    // the registry does not have, so the two disagreeing means a menu row that
+    // can only produce a document the author cannot save.
+    for (const preset of DEVICE_PRESET_IDS) {
+      rows.push({
+        key: `device:${preset}`,
+        family: "Solid",
+        label: preset.charAt(0).toUpperCase() + preset.slice(1),
+        run: () => store.addDeviceLayer(preset),
+      });
+    }
+  }
+  if (hasLayerKind("instance")) {
+    // The CURATED Generate shelf: the particle builtins surface as first-class
+    // basics with their own names, not as two entries lost in the component
+    // list. A chrome curation (which two ids read as "particles" is a product
+    // decision), while the rows themselves still come from the live registry:
+    // a build without the particles package simply has no rows to promote.
+    for (const row of library) {
+      if (row.host !== "three") continue;
+      const label = promotedBuiltinLabel(row.id);
+      if (label === null) continue;
+      rows.push({
+        key: `instance:${row.id}`,
+        family: "Generate",
+        section: "Particles",
+        label,
+        title: row.id,
+        run: () => void store.addInstanceLayer(row.id).catch(report),
+      });
+    }
+  }
+  if (hasLayerKind("cloner")) {
+    rows.push({
+      key: "cloner",
+      family: "Generate",
+      label: "Cloner",
+      // No empty cloner, ever: `validateShotDoc` refuses one with no children,
+      // so the row that inserted it would be a row that breaks saving.
+      disabled: !hasSelection,
+      title: hasSelection ? "Wrap the selection in a cloner" : "Select a layer to clone first",
+      run: () => store.addClonerLayer(),
+    });
+  }
+  // ONE COMPONENT PICKER (F56/F59): this Project's own definitions first, then
+  // the registry (its TSL effects and particles in sections of their own).
+  // Grouping the selection and making a component are verbs on a selection,
+  // not inserts, so they live on Ctrl/Cmd+G, the layer menu and the picker's
+  // "Make component" footer, never in this list.
+  if (hasLayerKind("instance")) {
+    for (const def of Object.values(definitions ?? {})) {
+      rows.push({
+        key: `def:${def.id}`,
+        family: "Structure",
+        section: "In this project",
+        label: def.name,
+        title: "A component of this Project",
+        run: () => store.placeComponent(def.id),
+      });
+    }
+    // FROM THE LIVE REGISTRY, filtered to the only host that can mount inside
+    // the shot's 3D canvas. Same reason the device rows come from
+    // DEVICE_PRESET_IDS: a hardcoded list would be a second place that knows
+    // what a component is, and the save gate refuses anything else, so a row
+    // offering a "dom" component could only ever produce a document the author
+    // cannot save.
+    for (const row of library.filter((r) => r.host === "three" && promotedBuiltinLabel(r.id) === null)) {
+      rows.push({
+        key: `instance:${row.id}`,
+        family: "Structure",
+        section: row.effect === undefined ? "Library" : "Effects",
+        label: row.name,
+        title: row.id,
+        run: () => void store.addInstanceLayer(row.id).catch(report),
+      });
+    }
+  }
+
+  const fileInput = (
+    <input
+      ref={fileRef}
+      className="audio-file-input"
+      type="file"
+      accept={acceptFor(want)}
+      multiple={want?.kind === "image"}
+      hidden
+      data-testid="add-file-input"
+      onChange={(e) => {
+        chose(Array.from(e.currentTarget.files ?? []));
+        // Cleared so re-picking the SAME file fires change again.
+        e.currentTarget.value = "";
+      }}
+    />
+  );
+
+  return { rows, busy, pickAudio: () => setWant({ kind: "audio" }), fileInput };
+}

package/src/panels/toolbar/useDismiss.ts

@@ -0,0 +1,122 @@
+// ONE DISMISS RULE for the tool menus (the dock's Shapes and Add, the board
+// rail's flyouts): while open, a press outside the anchor, Escape anywhere, or
+// the window losing focus closes it. The listeners mirror ui `Popover`'s pair.
+//
+// THE STAGE IS ANOTHER DOCUMENT. A press in its iframe never reaches this
+// window, so the pair is also set on each same-origin frame's window, in the
+// capture phase there, where the press and the Escape stop: an outside press
+// on the stage only dismisses, with no pick, no deselect and no drag under it.
+// The window `blur` is skipped when focus went INTO one of those frames (a
+// cross-origin one still dismisses through it): the stage takes
+// focus as the pointer crosses it (StagePanel `focusStage`), which closed a
+// menu the author was only moving towards.
+//
+// The stage's own capture-phase Escape lanes (pen, spline, G/R/S) were
+// registered on that window first, so they run before this one: while a menu
+// is open the frame's root carries `TOOL_MENU_ATTR` and they yield Escape
+// (`toolMenuOpen`).
+//
+// The frame half tells `close` which frame window the press or Escape came
+// from, so a menu can hand focus to that frame (the font picker does).
+//
+// A MENU ON A ui `Popover` (the font picker) takes only the frame half
+// (`window: false`): the Popover already closes on a press outside it and on
+// Escape in this window. It also keeps `blur: false` when it opens the OS file
+// dialog, which blurs the window.
+import { useEffect, useRef } from "react";
+import type { RefObject } from "react";
+
+const TOOL_MENU_ATTR = "data-tool-menu-open";
+
+/** A chrome tool menu is open over this document: Escape is the menu's. */
+export function toolMenuOpen(): boolean {
+  return document.documentElement.hasAttribute(TOOL_MENU_ATTR);
+}
+
+export interface DismissOptions {
+  /** Close on a press outside `anchor` and on Escape in this window. Default
+   *  true; false for a menu whose `Popover` does both already. */
+  window?: boolean;
+  /** Close when this window loses focus to anything but a stage frame.
+   *  Default true. */
+  blur?: boolean;
+}
+
+export function useDismiss(
+  open: boolean,
+  anchor: RefObject<HTMLElement | null>,
+  close: (frame?: Window) => void,
+  options: DismissOptions = {},
+): void {
+  const latest = useRef(close);
+  latest.current = close;
+  const onWindow = options.window ?? true;
+  const onBlurToo = options.blur ?? true;
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: PointerEvent): void => {
+      if (!(anchor.current?.contains(e.target as Node) ?? false)) latest.current();
+    };
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key !== "Escape") return;
+      // Escape closes the menu and nothing else (not a deselect under it).
+      e.stopPropagation();
+      latest.current();
+    };
+    const frames: { w: Window; down: (e: PointerEvent) => void; key: (e: KeyboardEvent) => void }[] = [];
+    const listened = new Set<Element>();
+    for (const frame of document.querySelectorAll("iframe")) {
+      try {
+        const w = frame.contentWindow;
+        if (w === null) continue;
+        // The loop's `w`, not `e.view`: a synthetic event has no view.
+        const down = (e: PointerEvent): void => {
+          e.preventDefault();
+          e.stopPropagation();
+          latest.current(w);
+        };
+        const key = (e: KeyboardEvent): void => {
+          if (e.key !== "Escape") return;
+          e.stopPropagation();
+          latest.current(w);
+        };
+        w.addEventListener("pointerdown", down, true);
+        w.addEventListener("keydown", key, true);
+        w.document.documentElement.setAttribute(TOOL_MENU_ATTR, "");
+        frames.push({ w, down, key });
+        listened.add(frame);
+      } catch {
+        // A cross-origin frame: a press there reaches this window as a blur.
+      }
+    }
+    // Read after the blur, once focus has landed: browsers differ on whether
+    // `activeElement` is the frame yet while the event runs.
+    let blurTimer: ReturnType<typeof setTimeout> | undefined;
+    const onBlur = (): void => {
+      blurTimer = setTimeout(() => {
+        const into = document.activeElement;
+        if (into === null || !listened.has(into)) latest.current();
+      }, 0);
+    };
+    if (onWindow) {
+      window.addEventListener("pointerdown", onDown, true);
+      window.addEventListener("keydown", onKey, true);
+    }
+    if (onBlurToo) window.addEventListener("blur", onBlur);
+    return () => {
+      clearTimeout(blurTimer);
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("blur", onBlur);
+      for (const { w, down, key } of frames) {
+        try {
+          w.removeEventListener("pointerdown", down, true);
+          w.removeEventListener("keydown", key, true);
+          w.document.documentElement.removeAttribute(TOOL_MENU_ATTR);
+        } catch {
+          // The frame navigated away and is cross-origin now.
+        }
+      }
+    };
+  }, [open, anchor, onWindow, onBlurToo]);
+}