@dailies-studio/shot-editor 0.1.0

package/src/panels/files/FilePanel.tsx

@@ -0,0 +1,564 @@
+// The left sidebar's File tab: scenes, the layer tree inside the open one, and
+// how to connect an agent (McpSection.tsx).
+//
+// TWO LEVELS, ONE BIT. `state.sceneId` decides which scene's layers are listed,
+// and it is the same bit the timeline's macro/micro split reads and the URL
+// mirrors. There is no second "which scene am I looking at" anywhere.
+//
+// THE TREE IS RENDERED FROM `scene.layers` AND `children`, never from
+// `layersById` — the outline is the forest, and `order` is a separate axis that
+// decides PAINT. Listing by `order` would put a group's children next to
+// strangers, and listing by `layersById` would have no order at all.
+import { useEffect, useState } from "react";
+import { IconChevron, useContextMenu } from "@dailies-studio/ui";
+import { componentDefsOf, homeOf, instancesOf, layerChildren, parentOf } from "@dailies-studio/shot/doc";
+import type { Layer3D } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { layerMenuEntries, menuTargetsFor } from "../../state/menu.js";
+import {
+  TRIANGLE_SOFT_BUDGET,
+  formatTriangles,
+  sceneBudgetWarning,
+  sumTriangles,
+} from "../../state/triangles.js";
+import { McpSection } from "./McpSection.js";
+import {
+  COMPONENT_ICON,
+  EYE_ICON,
+  EYE_OFF_ICON,
+  LOCK_ICON,
+  SCENE_ICON,
+  UNLOCK_ICON,
+  kindIcon,
+} from "./icons.js";
+
+export function FilePanel() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const sceneId = useShotEditor((s) => s.sceneId);
+  const isolation = useShotEditor((s) => s.isolation);
+  const editingDef = useShotEditor((s) => s.editingDef);
+  const [query, setQuery] = useState("");
+  /** Collapsed subtree roots. PER-SESSION on purpose, never a workspace pref:
+   *  prefs survive document switches and layer ids are document-scoped, so a
+   *  persisted set would carry stale ids into every other document. */
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
+  /** The last plainly-clicked row — shift-click ranges from it over the
+   *  VISIBLE flattened order, the Figma/Blender behaviour. */
+  const [anchor, setAnchor] = useState<string | null>(null);
+  /**
+   * BOTH ARE DROPPED WHEN THE DOCUMENT CHANGES, and that is not tidiness.
+   * This panel is mounted unconditionally and never keyed (App.tsx), and a
+   * document switch swaps `state.doc` underneath it rather than remounting
+   * it — while ids are deterministic slugs, so `l3_group` exists in nearly
+   * every shot. Kept, the set folds a group in the NEW document that nobody
+   * folded, and the anchor makes the author's first shift-click there a range
+   * measured from a click they made in a different document.
+   */
+  const docId = doc?.id ?? null;
+  useEffect(() => {
+    setCollapsed(new Set());
+    setAnchor(null);
+  }, [docId]);
+
+  if (doc === null) return null;
+  const scene = sceneId === null ? undefined : doc.scenesById[sceneId];
+  const defs = componentDefsOf(doc);
+  // The forest the outline shows: a definition's while one is being edited,
+  // the open shot's otherwise. ONE lookup, so the rows below never branch.
+  const home = homeOf(doc, editingDef ?? sceneId ?? "");
+  const trimmedQuery = query.trim().toLowerCase();
+  const rootIds =
+    home === null
+      ? []
+      : isolation === null || editingDef !== null
+        ? home.layers
+        : layerChildren(home.layersById[isolation] ?? ({} as Layer3D));
+
+  const toggleCollapse = (id: string): void => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const rowClick = (id: string, e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }): void => {
+    const selection = store.getState().selection;
+    if (e.shiftKey && anchor !== null && home !== null) {
+      // The range is over WHAT IS ON SCREEN — the same flattening the rows
+      // render from, so a collapsed group's invisible children are never
+      // swept into a selection the author cannot see.
+      const flat = flattenVisible(home, rootIds, collapsed, trimmedQuery);
+      const a = flat.indexOf(anchor);
+      const b = flat.indexOf(id);
+      if (a !== -1 && b !== -1) {
+        store.select(flat.slice(Math.min(a, b), Math.max(a, b) + 1));
+        return;
+      }
+      // A stale anchor (deleted, scoped away) falls through to a plain click.
+    }
+    if (e.ctrlKey || e.metaKey) {
+      store.select(selection.includes(id) ? selection.filter((x) => x !== id) : [...selection, id]);
+      setAnchor(id);
+      return;
+    }
+    store.select([id]);
+    setAnchor(id);
+  };
+
+  return (
+    <div className="file-panel" data-testid="file-panel">
+      <label className="file-search">
+        <input
+          type="search"
+          value={query}
+          placeholder="Search layers"
+          aria-label="Search layers"
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </label>
+
+      <div className="file-section-label">Shots</div>
+      <ul className="scene-list">
+        {doc.scenes.map((id) => {
+          const s = doc.scenesById[id];
+          if (s === undefined) return null;
+          return (
+            <li key={id}>
+              <button
+                type="button"
+                className={`scene-row${id === sceneId ? " is-current" : ""}`}
+                aria-current={id === sceneId}
+                // `focusScene`, not `setScene`: a bare pin leaves the playhead
+                // in whatever scene it was already in, and every store call
+                // that pairs `state.sceneId` with `masterToScene(state.frame)`
+                // — insertion, block placement, split, camera shots — then
+                // reads its scene from one scene and its frame from another.
+                // The stage renders the playhead's scene, so a pin the playhead
+                // is not in is also a scene the author cannot see.
+                onClick={() => store.focusScene(id)}
+              >
+                <span className="layer-kind" aria-hidden="true">
+                  {SCENE_ICON}
+                </span>
+                <span className="row-label">{s.name}</span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+
+      {/* COMPONENTS, above the layers and below the shots — a definition is
+          not in any shot, and the list is what makes a zero-instance one
+          reachable at all. Absent entirely when the document has none, so a
+          shot that never made one looks exactly as it did. */}
+      {Object.keys(defs).length === 0 ? null : (
+        <>
+          <div className="file-section-label">Components</div>
+          <ul className="component-list" data-testid="component-list">
+            {Object.values(defs).map((d) => (
+              <li key={d.id} className={`component-row${d.id === editingDef ? " is-current" : ""}`}>
+                <span className="layer-kind" aria-hidden="true">
+                  {COMPONENT_ICON}
+                </span>
+                <button
+                  type="button"
+                  className="layer-name"
+                  aria-current={d.id === editingDef}
+                  // Scoping the OUTLINE, not the stage: a definition's layers
+                  // are in no scene and have no camera to point at them.
+                  onClick={() => store.editComponent(d.id === editingDef ? null : d.id)}
+                >
+                  {d.name}
+                </button>
+                <span className="component-count" aria-hidden="true">
+                  {instancesOf(doc, d.id).length}
+                </span>
+                <button
+                  type="button"
+                  className="layer-flag"
+                  aria-label={`Place ${d.name}`}
+                  title="Place another one"
+                  onClick={() => store.placeComponent(d.id)}
+                >
+                  +
+                </button>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+
+      <div className="file-section-label">{editingDef === null ? "Layers" : "Inside"}</div>
+      {/* THE WAY BACK OUT. Isolation scopes the outline to one subtree, and a
+          scoped list with no path above it reads as "the rest of my layers are
+          gone" — which is exactly what an author reports. Each crumb is a
+          button, so leaving is one click from any depth rather than N presses
+          of Escape. */}
+      {scene !== undefined && isolation !== null ? (
+        <nav className="isolation-crumbs" data-testid="isolation-crumbs">
+          <button type="button" className="crumb" onClick={() => store.exitIsolationAll()}>
+            {scene.name}
+          </button>
+          {crumbsFor(scene, isolation).map((id, i, all) => (
+            <button
+              key={id}
+              type="button"
+              className={`crumb${i === all.length - 1 ? " is-current" : ""}`}
+              aria-current={i === all.length - 1}
+              onClick={() => store.enterIsolation(id)}
+            >
+              {scene.layersById[id]?.label ?? id}
+            </button>
+          ))}
+        </nav>
+      ) : null}
+      {home === null ? null : (
+        <ul className="layer-list" data-testid="layer-list">
+          <LayerRows
+            // The CONTAINER, which is a definition while one is being edited.
+            // Every op the rows drive takes a container id, so the drag, the
+            // rename and the flags all work inside a definition unchanged.
+            scene={home}
+            containerId={editingDef ?? sceneId ?? ""}
+            // SCOPED to the isolated subtree's own children, so the outline
+            // says the same thing the stage does about what is being edited.
+            ids={rootIds}
+            depth={0}
+            parent={editingDef === null ? isolation : null}
+            query={trimmedQuery}
+            collapsed={collapsed}
+            onToggleCollapse={toggleCollapse}
+            onRowClick={rowClick}
+          />
+        </ul>
+      )}
+
+      {/* Last, and below the layer tree: connecting an agent is about the
+          workspace, not the document being edited right now. */}
+      <McpSection />
+    </div>
+  );
+}
+
+function LayerRows({
+  scene,
+  containerId,
+  ids,
+  depth,
+  parent,
+  query,
+  collapsed,
+  onToggleCollapse,
+  onRowClick,
+}: {
+  scene: { layersById: Record<string, Layer3D> };
+  /** The scene OR component definition these layers live in. Every op the rows
+   *  drive takes one, so a definition's interior is editable through exactly
+   *  the same drag, rename and flag handlers. */
+  containerId: string;
+  ids: readonly string[];
+  depth: number;
+  /** The layer these rows are children of, or null at the scene root. A drop
+   *  BETWEEN rows lands here; a drop ON one lands inside that row. */
+  parent: string | null;
+  query: string;
+  collapsed: ReadonlySet<string>;
+  onToggleCollapse: (id: string) => void;
+  onRowClick: (id: string, e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) => void;
+}) {
+  return (
+    <>
+      {ids.map((id, index) => {
+        const layer = scene.layersById[id];
+        if (layer === undefined) return null;
+        const children = layerChildren(layer);
+        // A search hides a row only when NEITHER it nor anything below it
+        // matches — hiding a matching layer because its group did not match
+        // would make the search unable to find anything nested.
+        if (query.length > 0 && !subtreeMatches(scene, layer, query)) return null;
+        // A SEARCH OVERRIDES A COLLAPSE: a match under a collapsed group must
+        // still be findable, the same rule the subtree gate above states. The
+        // one flattening in `flattenVisible` mirrors both, so a range select
+        // and the rendered rows can never disagree about what is visible.
+        const open = !collapsed.has(id) || query.length > 0;
+        return (
+          <LayerRow
+            key={id}
+            layer={layer}
+            depth={depth}
+            index={index}
+            parent={parent}
+            containerId={containerId}
+            // NO DISCLOSURE WHILE FILTERING. `open` is forced true by the
+            // search, so a chevron here would be a control that visibly does
+            // nothing on click — and then folds the group the moment the
+            // search is cleared, from a press the author had already seen
+            // fail. The fold is not a meaningful state while a filter decides
+            // what is on screen, so the row simply does not offer one.
+            hasChildren={children.length > 0 && query.length === 0}
+            open={open}
+            onToggleCollapse={onToggleCollapse}
+            onRowClick={onRowClick}
+          >
+            {children.length > 0 && open ? (
+              <ul className="layer-children">
+                <LayerRows
+                  scene={scene}
+                  containerId={containerId}
+                  ids={children}
+                  depth={depth + 1}
+                  parent={layer.id}
+                  query={query}
+                  collapsed={collapsed}
+                  onToggleCollapse={onToggleCollapse}
+                  onRowClick={onRowClick}
+                />
+              </ul>
+            ) : null}
+          </LayerRow>
+        );
+      })}
+    </>
+  );
+}
+
+/**
+ * The row order AS RENDERED — same recursion, same predicates as `LayerRows`
+ * (subtree match, collapse-with-search-override) — for the shift range.
+ * Kept beside the renderer so a predicate change is one edit away from both.
+ */
+function flattenVisible(
+  scene: { layersById: Record<string, Layer3D> },
+  ids: readonly string[],
+  collapsed: ReadonlySet<string>,
+  query: string,
+): string[] {
+  const out: string[] = [];
+  for (const id of ids) {
+    const layer = scene.layersById[id];
+    if (layer === undefined) continue;
+    if (query.length > 0 && !subtreeMatches(scene, layer, query)) continue;
+    out.push(id);
+    const children = layerChildren(layer);
+    const open = !collapsed.has(id) || query.length > 0;
+    if (children.length > 0 && open) out.push(...flattenVisible(scene, children, collapsed, query));
+  }
+  return out;
+}
+
+/** The isolated layer and every ancestor above it, outermost first. The path
+ *  the breadcrumb walks, and the reason entering a nested subtree is reversible
+ *  one level at a time. */
+function crumbsFor(scene: { layersById: Record<string, Layer3D> }, id: string): string[] {
+  const out: string[] = [];
+  let at: string | null = id;
+  for (let i = 0; at !== null && i <= Object.keys(scene.layersById).length; i += 1) {
+    out.push(at);
+    at = parentOf(scene as never, at);
+  }
+  return out.reverse();
+}
+
+/** Which third of a row the pointer is over. The middle is the biggest, so
+ *  "drop it in there" is the easy gesture and reordering is the deliberate
+ *  one — Figma's proportions, and for the same reason. */
+function dropZone(e: { clientY: number }, row: HTMLElement): "before" | "into" | "after" {
+  const rect = row.getBoundingClientRect();
+  const t = (e.clientY - rect.top) / Math.max(1, rect.height);
+  if (t < 0.28) return "before";
+  if (t > 0.72) return "after";
+  return "into";
+}
+
+function subtreeMatches(
+  scene: { layersById: Record<string, Layer3D> },
+  layer: Layer3D,
+  query: string,
+): boolean {
+  if (layer.label.toLowerCase().includes(query)) return true;
+  return layerChildren(layer).some((id) => {
+    const child = scene.layersById[id];
+    return child !== undefined && subtreeMatches(scene, child, query);
+  });
+}
+
+function LayerRow({
+  layer,
+  depth,
+  index,
+  parent,
+  containerId,
+  hasChildren,
+  open,
+  onToggleCollapse,
+  onRowClick,
+  children,
+}: {
+  layer: Layer3D;
+  depth: number;
+  index: number;
+  parent: string | null;
+  /** Scene or definition — see `LayerRows`. */
+  containerId: string;
+  hasChildren: boolean;
+  open: boolean;
+  onToggleCollapse: (id: string) => void;
+  onRowClick: (id: string, e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean }) => void;
+  children: React.ReactNode;
+}) {
+  const store = useStore();
+  const selected = useShotEditor((s) => s.selection.includes(layer.id));
+  // Two primitives, never the record: `useShotEditor` compares with `Object.is`
+  // per notification, so returning a slice of the map would re-render every row
+  // on every unrelated change.
+  const triangles = useShotEditor((s) => s.meshTriangles[layer.id]);
+  const sceneTriangles = useShotEditor((s) => sumTriangles(s.meshTriangles));
+  const overBudget = triangles !== undefined && sceneTriangles > TRIANGLE_SOFT_BUDGET;
+  const [renaming, setRenaming] = useState(false);
+  const [over, setOver] = useState<"before" | "into" | "after" | null>(null);
+  const menu = useContextMenu();
+
+  return (
+    <li className="layer-item">
+      {menu.menu}
+      <div
+        className={`layer-row${selected ? " is-selected" : ""}${over === null ? "" : ` is-drop-${over}`}`}
+        style={{ paddingLeft: 8 + depth * 12 }}
+        data-layer={layer.id}
+        // The SAME menu the stage opens, from the same builder. A row and a
+        // click on the canvas are two ways of pointing at one layer, and a
+        // Delete that meant different things in the two would be worse than
+        // having only one of them.
+        onContextMenu={(e) => {
+          e.preventDefault();
+          // Select first, unless the row is already part of the selection — in
+          // which case the whole selection stands and the menu acts on all of
+          // it. The stage's `onContextMenu` policy, deliberately identical.
+          const state = store.getState();
+          const ids = state.selection.includes(layer.id) ? state.selection : [layer.id];
+          if (!state.selection.includes(layer.id)) store.select([layer.id]);
+          const next = store.getState();
+          menu.open({ x: e.clientX, y: e.clientY }, layerMenuEntries(store, next, menuTargetsFor(next, ids)));
+        }}
+        // THE OUTLINE DRAG. Dropping on the MIDDLE of a row puts the layer
+        // inside it; dropping near an edge puts it beside it, among that row's
+        // own siblings. Both go through `moveLayer`, which re-bases the
+        // transform so the tree changes and the picture does not.
+        draggable
+        onDragStart={(e) => e.dataTransfer.setData("text/plain", layer.id)}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setOver(dropZone(e, e.currentTarget));
+        }}
+        onDragLeave={() => setOver(null)}
+        onDrop={(e) => {
+          e.preventDefault();
+          const zone = dropZone(e, e.currentTarget);
+          setOver(null);
+          const from = e.dataTransfer.getData("text/plain");
+          if (from.length === 0 || from === layer.id) return;
+          if (zone === "into") store.moveLayerTo(from, { parent: layer.id });
+          else store.moveLayerTo(from, { parent, index: zone === "before" ? index : index + 1 });
+        }}
+      >
+        {/* The disclosure chevron, a SEPARATE button so the name button's
+            textContent stays the label alone. Leaf rows get a spacer, so the
+            kind icons line up whether or not a row can fold. */}
+        {hasChildren ? (
+          <button
+            type="button"
+            className={`layer-toggle${open ? " is-open" : ""}`}
+            aria-expanded={open}
+            aria-label={`${open ? "Collapse" : "Expand"} ${layer.label}`}
+            onClick={() => onToggleCollapse(layer.id)}
+          >
+            <IconChevron />
+          </button>
+        ) : (
+          <span className="layer-toggle-spacer" aria-hidden="true" />
+        )}
+        {/* OUTSIDE the name button, never inside it: the button's textContent is
+            the layer's label and nothing else — filePanel.test.tsx compares it
+            by equality, and the label is also what a screen reader announces. */}
+        <span className="layer-kind" aria-hidden="true">
+          {kindIcon(layer.kind)}
+        </span>
+        {renaming ? (
+          <input
+            className="layer-rename"
+            autoFocus
+            defaultValue={layer.label}
+            aria-label={`Rename ${layer.label}`}
+            onBlur={(e) => {
+              store.renameLayer(layer.id, e.target.value);
+              setRenaming(false);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") e.currentTarget.blur();
+              if (e.key === "Escape") setRenaming(false);
+            }}
+          />
+        ) : (
+          <button
+            type="button"
+            className="layer-name"
+            // The panel owns the click policy (shift = range over the visible
+            // order, ctrl/meta = toggle, plain = select + anchor) because only
+            // it knows the flattened row order a range is measured over.
+            onClick={(e) => onRowClick(layer.id, e)}
+            onDoubleClick={() => setRenaming(true)}
+          >
+            {layer.label}
+          </button>
+        )}
+        {/* The model's cost, for the layers that HAVE one. A sibling span for
+            the kind icon's reason: `layer-name`'s textContent is the label and
+            nothing else. Absent until the model has loaded, and absent forever
+            for a kind that carries no geometry — a badge reading 0 would be a
+            claim, and "not measured" is the honest state. */}
+        {triangles === undefined ? null : (
+          <span
+            className={`layer-tris${overBudget ? " is-over-budget" : ""}`}
+            aria-hidden="true"
+            title={overBudget ? sceneBudgetWarning(sceneTriangles) : `${triangles.toLocaleString()} triangles`}
+          >
+            {formatTriangles(triangles)}
+          </span>
+        )}
+        {/* The hover-eye and the lock. `aria-pressed` rather than a checkbox
+            because they are toggles on a row, and a screen reader should hear
+            the layer's name with them. */}
+        <button
+          type="button"
+          className="layer-flag"
+          aria-pressed={layer.hidden === true}
+          aria-label={`${layer.hidden === true ? "Show" : "Hide"} ${layer.label}`}
+          onClick={() => {
+            store.select([layer.id]);
+            store.toggleFlag("hidden");
+          }}
+        >
+          {layer.hidden === true ? EYE_OFF_ICON : EYE_ICON}
+        </button>
+        <button
+          type="button"
+          className="layer-flag"
+          aria-pressed={layer.locked === true}
+          aria-label={`${layer.locked === true ? "Unlock" : "Lock"} ${layer.label}`}
+          onClick={() => {
+            store.select([layer.id]);
+            store.toggleFlag("locked");
+          }}
+        >
+          {layer.locked === true ? LOCK_ICON : UNLOCK_ICON}
+        </button>
+      </div>
+      {children}
+    </li>
+  );
+}
+
+

package/src/panels/files/McpSection.tsx

@@ -0,0 +1,66 @@
+// The File tab's MCP section: how to attach a coding agent to this workspace.
+// Lives where History used to — connecting an agent is a thing an author does
+// every session, and buried at the bottom of the collapsed Manual nobody
+// found it.
+//
+// On a CLOUD workspace the Worker serves `GET /auth/mcp-token` (cookie-authed)
+// with a ready-to-paste `claude mcp add` command scoped to this user's own
+// /mcp endpoint — render that with a Copy button. A local server has no such
+// route, so any non-JSON answer, non-200, or missing field means "local": show
+// the `connect` instructions. The fallback needs no cloud-detection meta — the
+// route's absence IS the signal.
+import { useEffect, useState } from "react";
+
+export function McpSection() {
+  const [command, setCommand] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    void (async () => {
+      try {
+        const res = await fetch("/auth/mcp-token", { headers: { accept: "application/json" } });
+        if (!res.ok) return;
+        const body = (await res.json()) as { command?: unknown };
+        if (alive && typeof body.command === "string") setCommand(body.command);
+      } catch {
+        // Local server, offline, or an HTML answer — the static text below
+        // is already the right instruction set.
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  return (
+    <div className="mcp-section" data-testid="mcp-section">
+      <div className="file-section-label">MCP</div>
+      {command === null ? (
+        <p className="help-note">
+          Run <code>npx dailies-studio connect</code> in this project, then start Claude Code in the
+          same folder — it picks up <code>.mcp.json</code> and can edit this scene.
+        </p>
+      ) : (
+        <>
+          <p className="help-note">
+            Paste into your terminal — Claude Code connects to this workspace over MCP:
+          </p>
+          <div className="help-command">
+            <code>{command}</code>
+            <button
+              type="button"
+              onClick={() => {
+                void navigator.clipboard?.writeText(command);
+                setCopied(true);
+                window.setTimeout(() => setCopied(false), 1500);
+              }}
+            >
+              {copied ? "Copied" : "Copy"}
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}