@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/animate/DuringBlocks.tsx

@@ -1,85 +0,0 @@
-// The During list: the blocks the Animate gesture writes, plus a palette to add
-// one without a gesture.
-//
-// Each row FOCUSES rather than expanding inline. `state.selectedBlock` is the
-// same bit the dock's bars write, so clicking a row here highlights the bar
-// there and puts its timing in one editor below — instead of N accordion
-// editors that each claim to be "the" timing controls.
-import { motionPresets, presetsForSlot } from "@dailies-studio/shot/doc";
-import { InspectorSection } from "@dailies-studio/ui";
-import { useShotEditor, useStore } from "../../../state/context.js";
-import { useSelectedLayers } from "../useDocWrite.js";
-import { useBlocksInSlot } from "./useBlocks.js";
-
-const DEFAULT_FRAMES = 24;
-
-export function DuringBlocks() {
-  const store = useStore();
-  const layers = useSelectedLayers();
-  const blocks = useBlocksInSlot("during");
-  const focused = useShotEditor((s) => s.selectedBlock);
-  // The inspector's subject scene. Its layers are the selection's, so this is
-  // the scene every row here belongs to by construction.
-  const sceneId = useShotEditor((s) => s.sceneId);
-  const multi = layers.length > 1;
-  if (layers.length === 0 || sceneId === null) return null;
-
-  return (
-    <InspectorSection title="During" persistKey="shot:animate:during">
-      {blocks.length === 0 ? (
-        <p className="inspector-empty">
-          Press ⇧A, then drag on the canvas. The edit becomes a block ending at the playhead.
-        </p>
-      ) : (
-        <ul className="animate-blocks" aria-label="During blocks">
-          {blocks.map(({ layer, block }) => {
-            const on = focused?.layerId === layer.id && focused.blockId === block.id;
-            const label = motionPresets[block.preset]?.label ?? block.preset;
-            return (
-              <li key={`${layer.id}:${block.id}`}>
-                <button
-                  type="button"
-                  className="animate-block-row"
-                  aria-pressed={on}
-                  aria-label={`Block ${label} on ${layer.label}`}
-                  onClick={() => store.selectBlock({ sceneId, layerId: layer.id, blockId: block.id })}
-                >
-                  <span className="animate-block-name">
-                    {label}
-                    {/* Which layer, but only when there IS more than one — on a
-                        single selection the suffix would be noise on every row. */}
-                    {multi && <em className="animate-block-owner"> · {layer.label}</em>}
-                  </span>
-                  <span className="animate-block-span">
-                    f{block.frame}–{block.frame + Math.max(1, Math.trunc(block.durationFrames))}
-                  </span>
-                </button>
-                <button
-                  type="button"
-                  className="animate-block-remove"
-                  aria-label={`Remove ${label} on ${layer.label}`}
-                  onClick={() => store.removeBlock(layer.id, block.id)}
-                >
-                  ✕
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-      <div className="animate-palette" role="group" aria-label="During presets">
-        {presetsForSlot("during").map((preset) => (
-          <button
-            key={preset.id}
-            type="button"
-            className="animate-preset"
-            aria-label={`Add ${preset.label}`}
-            onClick={() => store.addBlock("during", preset.id, DEFAULT_FRAMES)}
-          >
-            + {preset.label}
-          </button>
-        ))}
-      </div>
-    </InspectorSection>
-  );
-}

package/src/panels/inspector/animate/InOutPresets.tsx

@@ -1,57 +0,0 @@
-// The In and Out palettes: click a preset, every selected layer gets that block.
-//
-// ── WHY THEY STACK RATHER THAN REPLACE ─────────────────────────────────
-//
-// Clicking Fade then Slide gives a layer that fades AND slides, because the
-// channel combinators commute — the fold has no ordering rule to get wrong. So
-// the palette is a set of buttons, not a radio group, and a preset already on
-// the layer shows as active and REMOVES on a second click. A replace-only
-// palette would make "fade and slide in" unauthorable, which is the single most
-// common entrance in the entire category.
-import { presetsForSlot } from "@dailies-studio/shot/doc";
-import type { BlockSlot } from "@dailies-studio/shot/doc";
-import { InspectorSection } from "@dailies-studio/ui";
-import { useStore } from "../../../state/context.js";
-import { useSelectedLayers } from "../useDocWrite.js";
-import { useBlocksInSlot } from "./useBlocks.js";
-
-/** The default window for a palette-added entrance or exit. */
-const DEFAULT_FRAMES = 12;
-
-export function InOutPresets(props: { slot: BlockSlot; title: string }) {
-  const store = useStore();
-  const layers = useSelectedLayers();
-  const present = useBlocksInSlot(props.slot);
-  if (layers.length === 0) return null;
-
-  // A preset counts as "on" when EVERY selected layer carries it. Partial
-  // coverage reads as off, so one more click completes the set rather than
-  // clearing the layers that already had it.
-  const coverage = new Map<string, number>();
-  for (const { block } of present) coverage.set(block.preset, (coverage.get(block.preset) ?? 0) + 1);
-
-  return (
-    <InspectorSection title={props.title} persistKey={`shot:animate:${props.slot}`}>
-      <div className="animate-palette" role="group" aria-label={`${props.title} presets`}>
-        {presetsForSlot(props.slot).map((preset) => {
-          const on = (coverage.get(preset.id) ?? 0) >= layers.length;
-          return (
-            <button
-              key={preset.id}
-              type="button"
-              className="animate-preset"
-              aria-label={`${props.title} ${preset.label}`}
-              aria-pressed={on}
-              onClick={() => {
-                if (on) store.removeBlocksByPreset(props.slot, preset.id);
-                else store.addBlock(props.slot, preset.id, DEFAULT_FRAMES);
-              }}
-            >
-              {preset.label}
-            </button>
-          );
-        })}
-      </div>
-    </InspectorSection>
-  );
-}

package/src/panels/inspector/animate/ResolvedChannels.tsx

@@ -1,150 +0,0 @@
-// What the block stack ADDS UP TO on this layer, at this frame.
-//
-// ── WHY A READOUT AND NOT SEVEN MORE FIELDS ─────────────────────────────
-//
-// Blocks are DELTA writers and they compose (resolve.ts). So "what is this
-// layer's opacity right now" has no single author: it is the base times every
-// active block's contribution, and there is nothing for a field to write into
-// that would not have to pick one of the contributors and hide the rest. The
-// Design tab already solves the writable half — `setEffectiveField` compensates
-// a typed value back through the fold — and this is the other half: a stacked
-// delta model where the author can see the sum is legible, and one where they
-// cannot is a pile of numbers that do not match the screen.
-//
-// ── IT CANNOT DISAGREE WITH THE STAGE, BY CONSTRUCTION ─────────────────
-//
-// Every number here comes out of `resolveLayerAt`, which is the same function
-// the runtime writes onto the mesh and the same one the renderer samples. There
-// is no second fold in this file and there must never be one: a readout that
-// re-derived the composition would be a second answer to a question that has
-// exactly one, and it would drift the first time a channel gained a combinator.
-//
-// ── "WRITING" MEANS DECLARED, NOT DIFFERENT ────────────────────────────
-//
-// A channel is marked when a live block's delta CONTAINS it, not when the
-// folded value happens to differ from identity. The two come apart constantly:
-// an out-fade at its first frame writes opacity 1, and an in-fade that finished
-// forty frames ago still writes opacity 1 and still owns the channel. Marking
-// on "differs from identity" would say "nothing is animating this" one frame
-// before a fade visibly starts, and would need a second copy of resolve.ts's
-// identity table to say it. Declared is both cheaper and truer: the mark means
-// "a block governs this channel", which is exactly what an author about to type
-// in the Design tab needs to know.
-import { InspectorSection, formatValue } from "@dailies-studio/ui";
-import {
-  blockProgressAt,
-  deltaFor,
-  layerDeltaAt,
-  motionPresets,
-  resolveLayerAt,
-} from "@dailies-studio/shot/doc";
-import type { Layer3D, LayerDelta } from "@dailies-studio/shot/doc";
-import type { Rational } from "@dailies-studio/engine";
-import { CHANNELS } from "../../../channels.js";
-import type { Channel } from "../../../channels.js";
-import { useShotEditor } from "../../../state/context.js";
-import { useInspectorFrame, useSelectedLayers } from "../useDocWrite.js";
-
-export function ResolvedChannels() {
-  const layers = useSelectedLayers();
-  const { sceneFrame } = useInspectorFrame();
-  const fps = useShotEditor((s) => s.doc?.fps ?? null);
-  // THE FIRST selected layer. A fan-out would have to answer "what is the
-  // resolved opacity of four layers", which is either four readouts or a
-  // "Mixed" that tells the author nothing about the composition they came here
-  // to understand. One subject, named in the header when there is a choice.
-  const layer = layers[0];
-  if (layer === undefined || fps === null) return null;
-
-  const state = resolveLayerAt(layer, sceneFrame, fps);
-  const delta = layerDeltaAt(layer, sceneFrame, fps);
-  const writers = writersAt(layer, sceneFrame, fps);
-
-  return (
-    <InspectorSection
-      title="Resolved"
-      persistKey="shot:animate:resolved"
-      action={
-        <span className="insp-dim">
-          {layers.length > 1 ? `${layer.label} · ` : ""}f{sceneFrame}
-        </span>
-      }
-    >
-      <dl className="resolved-list" aria-label="Resolved channels">
-        {CHANNELS.map((channel) => {
-          const by = writers.get(channel.key);
-          return (
-            <div
-              key={channel.key}
-              className="resolved-row"
-              data-channel={channel.key}
-              data-live={by !== undefined}
-            >
-              <dt className="resolved-label">{channel.label}</dt>
-              <dd className="resolved-value">{channel.read(state)}</dd>
-              <dd
-                className="resolved-by"
-                title={by === undefined ? undefined : `${by.join(", ")} → ${deltaText(channel.key, delta)}`}
-              >
-                {by?.join(", ") ?? ""}
-              </dd>
-            </div>
-          );
-        })}
-      </dl>
-    </InspectorSection>
-  );
-}
-
-/**
- * Which live blocks declare each channel, by preset label.
- *
- * `blockProgressAt` + `deltaFor` is the same pair `layerDeltaAt` folds with, so
- * a block counted here is exactly a block that contributed to the numbers
- * beside it — including the outside-the-window holds, which are the cases a
- * naive "is the playhead inside the bar" test gets wrong in both directions.
- */
-function writersAt(layer: Layer3D, sceneFrame: number, fps: Rational): Map<Channel, string[]> {
-  const out = new Map<Channel, string[]>();
-  for (const block of layer.blocks) {
-    const p = blockProgressAt(block, sceneFrame, fps);
-    if (p === null) continue;
-    const label = motionPresets[block.preset]?.label ?? block.preset;
-    for (const key of Object.keys(deltaFor(block.preset, block.slot, block.params, p)) as Channel[]) {
-      const at = out.get(key);
-      if (at === undefined) out.set(key, [label]);
-      // Two Fades on one channel are one name: the row says WHAT governs the
-      // channel, and the count is the dock's job.
-      else if (!at.includes(label)) at.push(label);
-    }
-  }
-  return out;
-}
-
-/** The fold's own contribution to one channel, in that channel's combinator's
- *  terms — a multiply reads "×", an add reads signed. It is the answer to "how
- *  much of this number is the blocks", which the resolved value alone hides. */
-function deltaText(key: Channel, d: Required<LayerDelta>): string {
-  switch (key) {
-    case "opacity":
-      return `×${formatValue(d.opacity, 0.01)}`;
-    case "offset":
-      return d.offset.map(signed).join(", ");
-    case "scale":
-      return d.scale.map((v) => `×${formatValue(v, 0.01)}`).join(", ");
-    case "tilt":
-      return d.tilt.map((v) => `${signed(v)}°`).join(", ");
-    case "roll":
-      return `${signed(d.roll)}°`;
-    case "blurPx":
-      return `${formatValue(d.blurPx, 0.1)} px`;
-    case "reveal":
-      return `${formatValue(d.reveal * 100, 1)}%`;
-    case "textPhase":
-      return `${formatValue(d.textPhase * 100, 1)}%`;
-  }
-}
-
-function signed(v: number): string {
-  return `${v >= 0 ? "+" : ""}${formatValue(v, 0.1)}`;
-}

package/src/panels/inspector/animate/useBlocks.ts

@@ -1,43 +0,0 @@
-// What the Animate panel reads: the selection's blocks, and the focused one.
-//
-// The focused block is `state.selectedBlock`, which the timeline dock ALSO
-// writes when a bar is clicked. One bit, two surfaces: clicking a bar in the
-// dock puts its timing and easing in the inspector, and adding a block from the
-// inspector focuses its bar. Two independent "which block" states would drift
-// apart within one session.
-import { useShotEditor } from "../../../state/context.js";
-import { useSelectedLayers } from "../useDocWrite.js";
-import type { AnimBlock, BlockSlot, Layer3D } from "@dailies-studio/shot/doc";
-
-export interface BlockRef {
-  layer: Layer3D;
-  block: AnimBlock;
-}
-
-/** Every block on the selection in one slot, layer-major then frame-major.
- *  Sorted, because a fan-out across four layers otherwise lists in whatever
- *  order each layer happened to accumulate its blocks. */
-export function useBlocksInSlot(slot: BlockSlot): BlockRef[] {
-  const layers = useSelectedLayers();
-  const out: BlockRef[] = [];
-  for (const layer of layers) {
-    for (const block of layer.blocks) {
-      if (block.slot === slot) out.push({ layer, block });
-    }
-  }
-  out.sort((a, b) => a.block.frame - b.block.frame || a.block.id.localeCompare(b.block.id));
-  return out;
-}
-
-/** The block the timing and easing controls are about, or null. */
-export function useFocusedBlock(): BlockRef | null {
-  const focused = useShotEditor((s) => s.selectedBlock);
-  const layers = useSelectedLayers();
-  if (focused === null) return null;
-  const layer = layers.find((l) => l.id === focused.layerId);
-  const block = layer?.blocks.find((b) => b.id === focused.blockId);
-  // A block whose layer left the selection is NOT shown: the panel's subject is
-  // the selection, and showing a stray block would let the author edit
-  // something the canvas is not highlighting.
-  return layer !== undefined && block !== undefined ? { layer, block } : null;
-}

package/src/panels/material/MaterialPicker.tsx

@@ -1,172 +0,0 @@
-// Pick a TSL generator to paint over a model's albedo.
-//
-// ── NO GL IN HERE, AND THAT IS NOT A COMPROMISE ─────────────────────────
-//
-// The shot chrome is three-free by test, so a live preview tile would have to
-// live in the stage iframe and be pushed across the bridge. It would also buy
-// nothing: the studio already SHIPS a rendered PNG for every catalog entry
-// (`packages/effects/thumbs`, served at the server's own thumbs route), made by
-// the same generators on the same renderer. A live tile would show the same
-// image for more machinery and one GL context per card.
-//
-// ── WHY IT IS A DIALOG AND NOT A PANEL ──────────────────────────────────
-//
-// Picking a material is a MODE the author enters from one place and leaves the
-// moment they choose — the same shape `ExportDialog` has. A permanent panel
-// would need a permanent home in a shell whose three columns are all spoken
-// for, and would ask "which layer is this for?" on every render instead of
-// once at the point the author asked.
-import { useEffect, useMemo, useState } from "react";
-import { useShotEditor, useStore } from "../../state/context.js";
-import type { ComponentRow } from "../../api.js";
-
-/** The one module whose builtins are TSL generators. Paper's shaders are DOM
- *  background layers and particles are emitters; neither is a surface a mesh
- *  can wear, and both would be a card that produced a document the runtime
- *  cannot resolve. */
-const EFFECTS_MODULE = "@dailies-studio/effects";
-
-/** Fixed shelf order, mirroring the 2D lane's Library. A category this chrome
- *  does not know (a newer server) appends after, alphabetically, rather than
- *  vanishing. */
-const CATEGORY_ORDER = ["noise", "patterns", "organic", "space", "material", "decor"];
-
-const CATEGORY_LABELS: Record<string, string> = {
-  noise: "Noise",
-  patterns: "Patterns",
-  organic: "Organic",
-  space: "Space",
-  material: "Material",
-  decor: "Decor",
-};
-
-function categoryLabel(category: string): string {
-  return CATEGORY_LABELS[category] ?? category.charAt(0).toUpperCase() + category.slice(1);
-}
-
-/** A stable colour per id, for a card whose thumbnail has not been generated.
- *  Deterministic so the same generator always wears the same placeholder. */
-function thumbGradient(id: string): string {
-  let h = 2166136261;
-  for (let i = 0; i < id.length; i += 1) {
-    h ^= id.charCodeAt(i);
-    h = Math.imul(h, 16777619);
-  }
-  h = h >>> 0;
-  const hue1 = h % 360;
-  const hue2 = (hue1 + 40 + ((h >>> 9) % 160)) % 360;
-  return `linear-gradient(${(h >>> 17) % 360}deg, hsl(${hue1} 45% 30%), hsl(${hue2} 60% 55%))`;
-}
-
-export function MaterialPicker() {
-  const store = useStore();
-  const request = useShotEditor((s) => s.materialPicker);
-  const library = useShotEditor((s) => s.library);
-  const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
-  const [query, setQuery] = useState("");
-
-  useEffect(() => {
-    if (!libraryLoaded) void store.refreshLibrary();
-  }, [libraryLoaded, store]);
-
-  const shelves = useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    const rows = library.filter(
-      (row): row is ComponentRow & { effect: NonNullable<ComponentRow["effect"]> } =>
-        row.builtin === true && row.host === "three" && row.rel === EFFECTS_MODULE && row.effect !== undefined,
-    );
-    const matching =
-      needle === ""
-        ? rows
-        : rows.filter(
-            (row) =>
-              row.name.toLowerCase().includes(needle) ||
-              row.effect.tags.some((t) => t.toLowerCase().includes(needle)),
-          );
-    const byCategory = new Map<string, typeof matching>();
-    for (const row of matching) {
-      const list = byCategory.get(row.effect.category);
-      if (list) list.push(row);
-      else byCategory.set(row.effect.category, [row]);
-    }
-    return [...byCategory.entries()].sort((a, b) => {
-      const ai = CATEGORY_ORDER.indexOf(a[0]);
-      const bi = CATEGORY_ORDER.indexOf(b[0]);
-      if (ai === bi) return a[0].localeCompare(b[0]);
-      // An unknown category sorts after every known one rather than at the top.
-      return (ai < 0 ? CATEGORY_ORDER.length : ai) - (bi < 0 ? CATEGORY_ORDER.length : bi);
-    });
-  }, [library, query]);
-
-  if (request === null) return null;
-  const count = request.layerIds.length;
-
-  return (
-    <div className="dialog-overlay" onPointerDown={() => store.closeMaterialPicker()}>
-      <div
-        className="dialog material-picker"
-        role="dialog"
-        aria-label="Choose a material"
-        onPointerDown={(e) => e.stopPropagation()}
-      >
-        <div className="dialog-title">Material</div>
-        <div className="dialog-field">
-          <span className="dialog-label">{count === 1 ? "1 mesh layer" : `${count} mesh layers`}</span>
-          <input
-            className="material-search"
-            type="search"
-            placeholder="Search materials"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            autoFocus
-          />
-        </div>
-        <div className="dialog-body">
-          {!libraryLoaded ? (
-            <p className="dialog-message">Loading…</p>
-          ) : shelves.length === 0 ? (
-            <p className="dialog-message">No material matches “{query}”.</p>
-          ) : (
-            shelves.map(([category, rows]) => (
-              <section key={category} className="material-shelf">
-                <h3>{categoryLabel(category)}</h3>
-                <div className="material-grid">
-                  {rows.map((row) => (
-                    <button
-                      key={row.id}
-                      type="button"
-                      className="material-card"
-                      title={
-                        row.effect.softwareRaster === "unfinished"
-                          ? `${row.name} — may not finish a software-rasterized render (--gl swangle); use --gl angle.`
-                          : row.name
-                      }
-                      onClick={() => store.applyMeshMaterial(request.layerIds, row.id)}
-                    >
-                      {row.effect.thumb === undefined ? (
-                        <span className="material-thumb" style={{ background: thumbGradient(row.id) }} />
-                      ) : (
-                        <img className="material-thumb" src={row.effect.thumb} alt="" />
-                      )}
-                      <span className="material-name">{row.name}</span>
-                      {row.effect.softwareRaster === "unfinished" ? (
-                        <span className="material-badge" aria-hidden="true">
-                          slow
-                        </span>
-                      ) : null}
-                    </button>
-                  ))}
-                </div>
-              </section>
-            ))
-          )}
-        </div>
-        <div className="dialog-actions">
-          <button type="button" onClick={() => store.closeMaterialPicker()}>
-            Cancel
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/panels/timeline/SceneStrip.tsx

@@ -1,145 +0,0 @@
-// The SCENE LANE: scenes back to back over the master strip.
-//
-// Slim and secondary, and the ONLY home for the three verbs that are about
-// scenes rather than about time — create, reorder, trim. The tracks below show
-// every scene at once now, so this lane no longer decides what is on screen; it
-// is the handle on the document's coarsest structure, sitting directly above the
-// boundaries it draws.
-//
-// A bar's WIDTH is `scene.durationFrames` and its POSITION is a prefix sum over
-// `doc.scenes` — derived, never stored. So trimming a bar writes one field and
-// every bar after it moves for free, and reordering is a splice. Storing
-// per-scene offsets would desync on both, and the desync only shows up in an
-// export.
-import { frameToPx, startDrag } from "@dailies-studio/timeline";
-import type { PointerEvent as ReactPointerEvent } from "react";
-import { useShotEditor, useStore } from "../../state/context.js";
-import { frameDelta, sceneBars } from "./model.js";
-
-/** Its own component so the per-frame tick re-renders one absolutely
- *  positioned div, not every scene bar above it. */
-function ScenePlayhead({ ppf }: { ppf: number }) {
-  const frame = useShotEditor((s) => s.frame);
-  return <div className="scene-playhead" style={{ left: frameToPx(frame, ppf) }} />;
-}
-
-export function SceneStrip({ ppf, labelWidth }: { ppf: number; labelWidth: number }) {
-  const store = useStore();
-  const doc = useShotEditor((s) => s.doc);
-  const sceneId = useShotEditor((s) => s.sceneId);
-  if (doc === null) return null;
-  const bars = sceneBars(doc);
-
-  return (
-    <div className="scene-strip" data-testid="scene-strip">
-      <div className="scene-strip-label" style={{ width: labelWidth }}>
-        <span>Shots</span>
-        <button
-          type="button"
-          className="scene-strip-add"
-          aria-label="Add shot"
-          title="Add a shot at the end, and go to it"
-          onClick={() => store.addScene()}
-        >
-          +
-        </button>
-      </div>
-      <div className="scene-strip-lane">
-        {bars.map((bar, index) => (
-          <div
-            key={bar.id}
-            className={`scene-bar${bar.id === sceneId ? " is-current" : ""}`}
-            style={{ left: frameToPx(bar.start, ppf), width: Math.max(8, frameToPx(bar.end - bar.start, ppf)) }}
-            data-scene={bar.id}
-            draggable
-            onDragStart={(e) => e.dataTransfer.setData("text/plain", bar.id)}
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={(e) => {
-              e.preventDefault();
-              const from = e.dataTransfer.getData("text/plain");
-              if (from.length > 0 && from !== bar.id) store.reorderScene(from, index);
-            }}
-            onClick={() => {
-              // Clicking a scene both SELECTS it and moves the playhead into
-              // it: the micro lane follows the playhead, so selecting without
-              // seeking would show one scene's tracks under another's ruler.
-              // The frame is read AT THE CLICK, not subscribed: a handler
-              // needs the current value once, and the subscription was what
-              // re-rendered every bar on every playback frame.
-              store.setScene(bar.id);
-              const frame = store.getState().frame;
-              if (frame < bar.start || frame >= bar.end) store.seek(bar.start);
-            }}
-            // Zoom the dock to this shot. A COMPOUND on purpose: the single
-            // click above fires first on both clicks, so the shot is selected
-            // and the playhead is inside it before the lane reframes around
-            // it. `\` (fit) is the way back out.
-            onDoubleClick={() => store.fitDock(bar.id)}
-            title="Double-click to zoom the timeline to this shot"
-          >
-            <span className="scene-bar-name">{bar.name}</span>
-            <SceneTrimHandle
-              onDrag={(deltaPx) => store.trimScene(bar.id, bar.end - bar.start + frameDelta(deltaPx, ppf))}
-              onStart={() => store.beginBlockDrag()}
-              onEnd={(commit) => store.endBlockDrag(commit)}
-            />
-          </div>
-        ))}
-        {/* The boundaries themselves. A diamond per cut, filled when the shot
-            before it blends into the one after — strip geometry rather than bar
-            geometry, because a transition is about the SEAM and the bars stay
-            scene-local. Nothing after the last bar: there is no seam there. */}
-        {bars.slice(0, -1).map((bar) => (
-          <button
-            key={`cut-${bar.id}`}
-            type="button"
-            className={`scene-cut${doc.scenesById[bar.id]?.transition !== undefined ? " is-blend" : ""}`}
-            style={{ left: frameToPx(bar.end, ppf) }}
-            aria-label={`Transition after ${bar.name}`}
-            title={
-              doc.scenesById[bar.id]?.transition === undefined
-                ? `Cut after ${bar.name}`
-                : `${doc.scenesById[bar.id]!.transition!.kind} after ${bar.name}`
-            }
-            onClick={(e) => {
-              e.stopPropagation();
-              // Select the OUTGOING shot: that is where the transition is
-              // stored and where the inspector edits it. The playhead goes to
-              // the last frame it owns, so the stage shows the frame the blend
-              // starts from.
-              store.setScene(bar.id);
-              store.seek(Math.max(bar.start, bar.end - 1));
-            }}
-          />
-        ))}
-        {/* One playhead across the whole master timeline, so the macro lane
-            always shows where the export is. */}
-        <ScenePlayhead ppf={ppf} />
-      </div>
-    </div>
-  );
-}
-
-function SceneTrimHandle({
-  onStart,
-  onDrag,
-  onEnd,
-}: {
-  onStart(): void;
-  onDrag(deltaPx: number): void;
-  onEnd(commit: boolean): void;
-}) {
-  const onPointerDown = (e: ReactPointerEvent<HTMLSpanElement>): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    const startX = e.clientX;
-    onStart();
-    // Absolute from the PRESS, never cumulative — the same rule every drag in
-    // this lane follows, and the reason a coalesced move cannot make it drift.
-    startDrag(e, {
-      onMove: (ev) => onDrag(ev.clientX - startX),
-      onEnd: (commit) => onEnd(commit),
-    });
-  };
-  return <span className="scene-trim" data-handle="scene-out" onPointerDown={onPointerDown} aria-hidden="true" />;
-}