@dailies-studio/shot-editor 0.1.0

package/src/panels/timeline/BlockRow.tsx

@@ -0,0 +1,242 @@
+// One track: a layer's blocks, or the camera's shots, as INTERVALS.
+//
+// ── THE THREE DRAGS, AND WHY THEY WRITE DIFFERENT FIELDS ────────────────
+//
+//   BODY   writes `frame`.
+//   IN     writes `frame` AND `durationFrames`, so the out edge stays put.
+//   OUT    writes `durationFrames`.
+//
+// One field for both edges is the classic version of this bug, and it makes a
+// left-trim slide the whole block. The document math is in
+// @dailies-studio/shot's timelineOps; this file only turns pixels into frames.
+//
+// ── SCENE-LOCAL BARS ON A MASTER STRIP ──────────────────────────────────
+//
+// `offsetFrames` is the scene's master start. It is added for DRAWING and
+// subtracted nowhere, because a drag never leaves scene-local space: what a
+// pointer produces is a signed DELTA, and a delta is the same number in both
+// clocks. Only SNAPPING needs the master frame — its targets come from other
+// scenes — so that is the one place the offset crosses, and it crosses in one
+// expression that converts straight back.
+//
+// ── THE SPRING'S OUT HANDLE IS DISABLED, AND SAYS SO ────────────────────
+//
+// `clipProgress01`'s spring arm measures elapsed SECONDS, because a spring has
+// an intrinsic settle time. So dragging that edge changes where the window
+// CLIPS, not how fast the spring settles. That is correct physics and it is
+// still surprising, so the handle is disabled and the tail is drawn dashed —
+// the author sees the block continuing past its window rather than discovering
+// the rule by dragging.
+import { frameToPx, startDrag } from "@dailies-studio/timeline";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { useShotEditor, useStore } from "../../state/context.js";
+import type { BlockBar, Lifespan } from "./model.js";
+import { CAMERA_ROW_ID, deadSpans, frameDelta } from "./model.js";
+import type { SnapPress } from "./snap.js";
+import { isSnapSuppressed } from "./snap.js";
+
+export function BlockRow({
+  label,
+  sceneId,
+  layerId,
+  depth,
+  bars,
+  ppf,
+  labelWidth,
+  offsetFrames = 0,
+  lifespan,
+  beginSnap,
+  onAdd,
+  addLabel,
+}: {
+  label: string;
+  /** WHICH SCENE this row's bars live in. Read from the row and never from
+   *  `state.sceneId`: the dock shows every scene at once, so the row under the
+   *  pointer is routinely not the one the playhead is in. */
+  sceneId: string;
+  layerId: string;
+  depth: number;
+  bars: readonly BlockBar[];
+  ppf: number;
+  labelWidth: number;
+  /** The scene's master start. Drawing only — see the header. */
+  offsetFrames?: number;
+  /** The owning layer's lifespan, when it has one. A block outside it is kept
+   *  and drawn dead rather than deleted. Absent on the camera row, which has no
+   *  layer and therefore no lifespan. */
+  lifespan?: Lifespan;
+  beginSnap?: SnapPress;
+  /** Give the row a create button in its label cell. Only the camera row has
+   *  one: a layer's blocks are added from the Animate palette, which is where
+   *  the author picks WHICH preset, and a bare "+" there would have to guess. */
+  onAdd?: () => void;
+  addLabel?: string;
+}) {
+  const store = useStore();
+  const selectedLayer = useShotEditor((s) => s.selection.includes(layerId));
+  const selectedBlock = useShotEditor((s) => s.selectedBlock);
+
+  return (
+    <div
+      className={`block-row${selectedLayer ? " is-selected" : ""}`}
+      data-track={layerId}
+      data-row-scene={sceneId}
+    >
+      {/* A CELL rather than a wide button, because the add control has to sit
+          beside the name and a button inside a button is not markup a browser
+          will keep. */}
+      <div className="block-row-label-cell" style={{ width: labelWidth }}>
+        <button
+          type="button"
+          className="block-row-label"
+          style={{ paddingLeft: 8 + depth * 12 }}
+          onClick={() => {
+            // NAVIGATE FIRST when the row belongs to another scene: the stage
+            // shows one scene, and `select` orders within the current one — so
+            // without this the selection resolves to empty and nothing happens.
+            store.focusScene(sceneId);
+            if (layerId !== CAMERA_ROW_ID) store.select([layerId]);
+          }}
+        >
+          {label}
+        </button>
+        {onAdd !== undefined && (
+          <button type="button" className="block-row-add" onClick={onAdd}>
+            {addLabel ?? "+"}
+          </button>
+        )}
+      </div>
+      <div className="block-row-lane">
+        {bars.map((bar) => (
+          <BlockBarView
+            key={bar.id}
+            bar={bar}
+            ppf={ppf}
+            offsetFrames={offsetFrames}
+            lifespan={lifespan}
+            beginSnap={beginSnap}
+            sceneId={sceneId}
+            selected={selectedBlock?.blockId === bar.id}
+            onSelect={() => {
+              store.focusScene(sceneId);
+              store.selectBlock({ sceneId, layerId: bar.layerId, blockId: bar.id });
+            }}
+            onDrag={(edge, toFrame) => store.dragBlock(sceneId, bar.layerId, bar.id, edge, toFrame)}
+            onDragEnd={(commit) => store.endBlockDrag(commit)}
+            onDragStart={() => store.beginBlockDrag()}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function BlockBarView({
+  bar,
+  ppf,
+  offsetFrames,
+  lifespan,
+  beginSnap,
+  sceneId,
+  selected,
+  onSelect,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+}: {
+  bar: BlockBar;
+  ppf: number;
+  offsetFrames: number;
+  lifespan: Lifespan | undefined;
+  beginSnap: SnapPress | undefined;
+  sceneId: string;
+  selected: boolean;
+  onSelect(): void;
+  onDragStart(): void;
+  onDrag(edge: "body" | "in" | "out", toFrame: number): void;
+  onDragEnd(commit: boolean): void;
+}) {
+  const left = frameToPx(bar.frame + offsetFrames, ppf);
+  const width = Math.max(4, frameToPx(bar.durationFrames, ppf));
+  const dead = deadSpans(bar, lifespan);
+
+  const drag =
+    (edge: "body" | "in" | "out") =>
+    (e: ReactPointerEvent<HTMLElement>): void => {
+      e.preventDefault();
+      e.stopPropagation();
+      onSelect();
+      const startX = e.clientX;
+      // The values AT PRESS, so every move is an absolute offset from them —
+      // never cumulative, which drifts the moment a move is coalesced. The
+      // modifier is read at press too: a gesture that changed meaning halfway
+      // through would be unusable.
+      const startFrame = bar.frame;
+      const startEnd = bar.frame + bar.durationFrames;
+      // THIS BAR, not this layer: only the two edges under the pointer are
+      // frozen, so the block can still land on its own siblings and on its
+      // layer's lifespan. LifespanRow passes no blockId, because there the whole
+      // layer is what moves.
+      const snap = beginSnap?.({ sceneId, layerId: bar.layerId, blockId: bar.id }, isSnapSuppressed(e));
+      const place = (anchor: number, delta: number): number =>
+        snap === undefined ? anchor + delta : snap(anchor + delta + offsetFrames) - offsetFrames;
+      onDragStart();
+      startDrag(e, {
+        onMove(ev) {
+          // A signed DELTA, so it must not go through `pxToFrame` — see
+          // frameDelta. A clamped delta drops every leftward drag.
+          const delta = frameDelta(ev.clientX - startX, ppf);
+          if (edge === "out") onDrag("out", place(startEnd, delta));
+          else onDrag(edge, place(startFrame, delta));
+        },
+        onEnd: (commit) => onDragEnd(commit),
+      });
+    };
+
+  return (
+    <div
+      className={`block-bar slot-${bar.slot}${selected ? " is-selected" : ""}${dead.length > 0 ? " is-clipped" : ""}`}
+      style={{ left, width }}
+      data-block={bar.id}
+      data-clipped={dead.length > 0 ? "true" : undefined}
+      onPointerDown={drag("body")}
+      title={
+        `${bar.preset} · ${bar.slot} · ${bar.frame}–${bar.frame + bar.durationFrames}` +
+        (dead.length > 0 ? " · outside the layer's lifespan, so this part never plays" : "")
+      }
+    >
+      {/* KEPT, NOT DELETED. Shortening a lifespan past a block is a trim, not a
+          request to throw the block away — refusal over corruption applies to
+          the editor too. The part that can never play is greyed in place, so the
+          author can see exactly how far to pull the edge back. */}
+      {dead.map((span) => (
+        <span
+          key={span.from}
+          className="block-dead"
+          aria-hidden="true"
+          style={{ left: frameToPx(span.from - bar.frame, ppf), width: frameToPx(span.to - span.from, ppf) }}
+        />
+      ))}
+      <span
+        className="block-handle block-handle-in"
+        data-handle="in"
+        onPointerDown={drag("in")}
+        aria-hidden="true"
+      />
+      <span className="block-label">{bar.preset}</span>
+      {bar.spring ? (
+        // The settle tail: the block keeps moving past its own window, which is
+        // what a spring does and what the disabled handle is about.
+        <span className="block-spring-tail" aria-hidden="true" />
+      ) : (
+        <span
+          className="block-handle block-handle-out"
+          data-handle="out"
+          onPointerDown={drag("out")}
+          aria-hidden="true"
+        />
+      )}
+    </div>
+  );
+}
+

package/src/panels/timeline/ChannelRow.tsx

@@ -0,0 +1,266 @@
+// The channel rows under an expanded layer: one row per animated property,
+// diamonds at the ends — the Figma/Lottie read, and since the preset-named
+// block lane left the expansion, the ONLY expanded read.
+//
+// ── A VIEW OVER BLOCKS, NEVER A SECOND MODEL ────────────────────────────
+//
+// Every span here is a block's footprint on one channel (model.ts's
+// `channelRows`), and every gesture routes through the SAME store ops the
+// block lane uses — `dragBlock`, `selectBlock`. Dragging the "opacity
+// keyframes" therefore moves the Fade block on every channel it writes, in one
+// undo entry. The preset's name lives in the span's tooltip and the Animate
+// tab. There is nothing a channel row can do that a block cannot, which is
+// what keeps the document blocks-not-tracks.
+//
+// ── THE LIVE VALUE IS A LEAF ────────────────────────────────────────────
+//
+// The label cell shows the channel's resolved value AT THE PLAYHEAD. That
+// number changes ~30 times a second during playback, so it is its own
+// component with its own `frame` subscription — the dock's DockTime rule. The
+// rows themselves never see the frame.
+import { frameToPx, startDrag } from "@dailies-studio/timeline";
+import { resolveLayerAt } from "@dailies-studio/shot/doc";
+import type { Layer3D } from "@dailies-studio/shot/doc";
+import type { Rational } from "@dailies-studio/engine";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { useMemo } from "react";
+import { CHANNEL_BY_KEY } from "../../channels.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { useCoalescedFrame } from "../inspector/useDocWrite.js";
+import { channelRows, deadSpans, frameDelta } from "./model.js";
+import type { ChannelRowModel, ChannelSpan, Lifespan } from "./model.js";
+import type { SnapPress } from "./snap.js";
+import { isSnapSuppressed } from "./snap.js";
+
+export function ChannelRows({
+  layer,
+  sceneId,
+  depth,
+  ppf,
+  labelWidth,
+  offsetFrames,
+  fps,
+  lifespan,
+  beginSnap,
+}: {
+  layer: Layer3D;
+  sceneId: string;
+  depth: number;
+  ppf: number;
+  labelWidth: number;
+  /** The scene's master start. Drawing only, like every bar in this lane. */
+  offsetFrames: number;
+  fps: Rational;
+  /** The owning layer's lifespan. A span outside it is kept and drawn dead,
+   *  the block lane's own rule. */
+  lifespan?: Lifespan | undefined;
+  beginSnap?: SnapPress | undefined;
+}) {
+  // Derived per layer identity: the rows change exactly when the layer's
+  // blocks or transform do, and the dock re-renders for ppf/guide changes
+  // that should not pay a re-derive.
+  const rows = useMemo(() => channelRows(layer, fps), [layer, fps]);
+  // A layer with no animation still answers the disclosure: the hint is where
+  // the first block comes from, and an empty expansion reads as broken.
+  if (rows.length === 0) {
+    return (
+      <div className="channel-row channel-empty" data-testid="channel-empty">
+        <div className="channel-label-cell" style={{ width: labelWidth, paddingLeft: 8 + depth * 12 }}>
+          <span className="channel-name">No animation</span>
+        </div>
+        <div className="channel-lane channel-empty-hint">
+          Toggle ⇧A and edit — the change becomes keyframes ending at the playhead.
+        </div>
+      </div>
+    );
+  }
+  return (
+    <>
+      {rows.map((row) => (
+        <ChannelRow
+          key={row.key}
+          row={row}
+          layer={layer}
+          sceneId={sceneId}
+          depth={depth}
+          ppf={ppf}
+          labelWidth={labelWidth}
+          offsetFrames={offsetFrames}
+          fps={fps}
+          lifespan={lifespan}
+          beginSnap={beginSnap}
+        />
+      ))}
+    </>
+  );
+}
+
+function ChannelRow({
+  row,
+  layer,
+  sceneId,
+  depth,
+  ppf,
+  labelWidth,
+  offsetFrames,
+  fps,
+  lifespan,
+  beginSnap,
+}: {
+  row: ChannelRowModel;
+  layer: Layer3D;
+  sceneId: string;
+  depth: number;
+  ppf: number;
+  labelWidth: number;
+  offsetFrames: number;
+  fps: Rational;
+  lifespan?: Lifespan | undefined;
+  beginSnap?: SnapPress | undefined;
+}) {
+  return (
+    <div className="channel-row" data-channel-row={row.key} data-row-scene={sceneId}>
+      <div className="channel-label-cell" style={{ width: labelWidth, paddingLeft: 8 + depth * 12 }}>
+        <span className="channel-name">{row.label}</span>
+        <ChannelValue layer={layer} channel={row.key} offsetFrames={offsetFrames} fps={fps} />
+      </div>
+      <div className="channel-lane">
+        {row.spans.map((span) => (
+          <ChannelSpanView
+            key={span.blockId}
+            span={span}
+            channelLabel={row.label}
+            layerId={layer.id}
+            sceneId={sceneId}
+            ppf={ppf}
+            offsetFrames={offsetFrames}
+            lifespan={lifespan}
+            beginSnap={beginSnap}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** The resolved value at the playhead — the same fold the stage draws, through
+ *  the shared channel table's formatter. Total at every frame, so a playhead
+ *  outside this scene simply shows the layer's held value. */
+function ChannelValue({
+  layer,
+  channel,
+  offsetFrames,
+  fps,
+}: {
+  layer: Layer3D;
+  channel: ChannelRowModel["key"];
+  offsetFrames: number;
+  fps: Rational;
+}) {
+  // The COALESCED frame, not the raw one — the inspector's posture, applied
+  // here for the inspector's reason: this runs a full `resolveLayerAt` block
+  // fold in render, one instance per open channel row, and the raw frame ran
+  // every one of them per playback tick (~750 folds/s with five layers
+  // expanded). Held while playing, ~10 Hz while scrubbing, leading edge on a
+  // lone seek — a readout, not an animation.
+  const frame = useCoalescedFrame();
+  const spec = CHANNEL_BY_KEY.get(channel);
+  if (spec === undefined) return null;
+  return (
+    <span className="channel-value" data-testid={`channel-value-${channel}`}>
+      {spec.read(resolveLayerAt(layer, frame - offsetFrames, fps))}
+    </span>
+  );
+}
+
+function ChannelSpanView({
+  span,
+  channelLabel,
+  layerId,
+  sceneId,
+  ppf,
+  offsetFrames,
+  lifespan,
+  beginSnap,
+}: {
+  span: ChannelSpan;
+  channelLabel: string;
+  layerId: string;
+  sceneId: string;
+  ppf: number;
+  offsetFrames: number;
+  lifespan?: Lifespan | undefined;
+  beginSnap?: SnapPress | undefined;
+}) {
+  const store = useStore();
+  const selected = useShotEditor((s) => s.selectedBlock?.blockId === span.blockId);
+  const left = frameToPx(span.frame + offsetFrames, ppf);
+  const width = Math.max(4, frameToPx(span.durationFrames, ppf));
+  const dead = deadSpans(span, lifespan);
+
+  // BlockBarView's drag, verbatim in shape: values read at press, a signed
+  // delta never through pxToFrame, the snap frozen with THIS block excluded.
+  const drag =
+    (edge: "body" | "in" | "out") =>
+    (e: ReactPointerEvent<HTMLElement>): void => {
+      e.preventDefault();
+      e.stopPropagation();
+      store.focusScene(sceneId);
+      store.selectBlock({ sceneId, layerId, blockId: span.blockId });
+      const startX = e.clientX;
+      const startFrame = span.frame;
+      const startEnd = span.frame + span.durationFrames;
+      const snap = beginSnap?.({ sceneId, layerId, blockId: span.blockId }, isSnapSuppressed(e));
+      const place = (anchor: number, delta: number): number =>
+        snap === undefined ? anchor + delta : snap(anchor + delta + offsetFrames) - offsetFrames;
+      store.beginBlockDrag();
+      startDrag(e, {
+        onMove(ev) {
+          const delta = frameDelta(ev.clientX - startX, ppf);
+          if (edge === "out") store.dragBlock(sceneId, layerId, span.blockId, "out", place(startEnd, delta));
+          else store.dragBlock(sceneId, layerId, span.blockId, edge, place(startFrame, delta));
+        },
+        onEnd: (commit) => store.endBlockDrag(commit),
+      });
+    };
+
+  return (
+    <div
+      className={`channel-span slot-${span.slot}${selected ? " is-selected" : ""}${dead.length > 0 ? " is-clipped" : ""}`}
+      style={{ left, width }}
+      data-channel-span={span.blockId}
+      data-clipped={dead.length > 0 ? "true" : undefined}
+      onPointerDown={drag("body")}
+      title={
+        `${span.preset} · ${channelLabel}: ${span.from} → ${span.to}` +
+        (dead.length > 0 ? " · outside the layer's lifespan, so this part never plays" : "")
+      }
+    >
+      <span className="channel-connector" aria-hidden="true" />
+      {/* KEPT, NOT DELETED — the block lane's rule, restated per channel:
+          shortening a lifespan is a trim, and the part that can never play is
+          dashed in place so the author can see how far to pull the edge back. */}
+      {dead.map((d) => (
+        <span
+          key={d.from}
+          className="channel-dead"
+          aria-hidden="true"
+          style={{ left: frameToPx(d.from - span.frame, ppf), width: frameToPx(d.to - d.from, ppf) }}
+        />
+      ))}
+      <span className="channel-key channel-key-in" data-key="in" onPointerDown={drag("in")} aria-hidden="true" />
+      {span.spring ? (
+        // The settle tail, same statement the block bar makes: a spring keeps
+        // moving past its window, and its end is physics rather than a handle.
+        <span className="channel-spring-tail" aria-hidden="true" />
+      ) : (
+        <span
+          className="channel-key channel-key-out"
+          data-key="out"
+          onPointerDown={drag("out")}
+          aria-hidden="true"
+        />
+      )}
+    </div>
+  );
+}

package/src/panels/timeline/LifespanRow.tsx

@@ -0,0 +1,165 @@
+// A layer's LIFESPAN bar: one rounded bar per layer, at its master position.
+//
+// ── THE BLOCK IS THE ATOM, AND THE LIFESPAN IS THE LAYER ────────────────
+//
+// The disclosure triangle expands this row into one DERIVED row per channel
+// the layer's blocks write (ChannelRow.tsx) — property rows with keyframe
+// diamonds, the Figma/Lottie read. The channel rows are views, never storage:
+// every gesture on one drags the whole BLOCK, in one undo entry, and the
+// preset's name lives in the span's tooltip and the Animate tab. The block is
+// still where this timeline's DOCUMENT stops.
+//
+// ── THREE GESTURES, AND WHY THE THIRD IS NOT OPTIONAL ───────────────────
+//
+//   BODY drags the bar AND every block on the layer with it.
+//   IN / OUT move one end and touch no block.
+//   SLIP (⌥ held) moves every block and leaves the bar exactly where it is.
+//
+// Body-versus-edge is After Effects verbatim, and no tool makes it a preference
+// — so there is no setting here either. SLIP is the one every two-gesture
+// timeline gets filed against for: AE draws it as the hollow slip bar, Premiere
+// gives it its own tool, Cavalry splits it into offset and crop. Without it,
+// "this animation should start a beat later, but the layer must stay where it
+// is" has no gesture at all.
+//
+// All three go through `history.scrub()`, so each is ONE undo entry and Escape
+// restores the document by reference — every capture re-derives from the base,
+// which is also why the delta below is measured from the press and never
+// accumulated.
+import { frameToPx, startDrag } from "@dailies-studio/timeline";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { useShotEditor, useStore } from "../../state/context.js";
+import type { LifespanDrag, MasterRow } from "./model.js";
+import { frameDelta } from "./model.js";
+import type { SnapPress } from "./snap.js";
+import { isSnapSuppressed } from "./snap.js";
+
+/** ⌥ turns a body drag into a slip. Alt is the modifier both AE and Premiere
+ *  put on the timeline's third gesture, and it does not collide with the snap
+ *  suppressor (⌘/ctrl) — so a slip can be snapped or not, like every other
+ *  drag. */
+function isSlip(event: { altKey: boolean }): boolean {
+  return event.altKey;
+}
+
+export function LifespanRow({
+  row,
+  sceneId,
+  sceneStart,
+  ppf,
+  labelWidth,
+  expanded,
+  onToggle,
+  beginSnap,
+}: {
+  row: MasterRow;
+  sceneId: string;
+  /** The scene's master start. Drawing only: the store takes a scene-local
+   *  DELTA, which is the same number in both clocks. */
+  sceneStart: number;
+  ppf: number;
+  labelWidth: number;
+  expanded: boolean;
+  onToggle(): void;
+  beginSnap?: SnapPress;
+}) {
+  const store = useStore();
+  const selected = useShotEditor((s) => s.selection.includes(row.layerId));
+  const { lifespan } = row;
+
+  /** Selecting a row in another scene NAVIGATES first: the stage shows one
+   *  scene, so handles on a layer three scenes away would be handles on
+   *  nothing — and `select` orders within the current scene, so the selection
+   *  would resolve to empty. */
+  const pick = (): void => {
+    store.focusScene(sceneId);
+    store.select([row.layerId]);
+  };
+
+  const drag =
+    (mode: LifespanDrag) =>
+    (e: ReactPointerEvent<HTMLElement>): void => {
+      e.preventDefault();
+      e.stopPropagation();
+      pick();
+      const startX = e.clientX;
+      // Read at the PRESS: the pose the drag is measured from, and the two
+      // modifiers. A gesture whose meaning changed under a held key mid-drag
+      // would retime an animation the author was only moving.
+      const slipping = mode === "body" && isSlip(e);
+      const effective: LifespanDrag = slipping ? "slip" : mode;
+      const snap = beginSnap?.({ sceneId, layerId: row.layerId }, isSnapSuppressed(e));
+      // WHAT THE POINTER IS CARRYING is what snaps: the out edge for an out
+      // drag, the earliest block for a slip (the bar is not moving), the in
+      // edge for everything else.
+      const anchor =
+        effective === "out"
+          ? lifespan.out
+          : effective === "slip"
+            ? row.blocks.reduce((min, b) => Math.min(min, b.frame), Infinity)
+            : lifespan.in;
+      store.beginBlockDrag();
+      startDrag(e, {
+        onMove(ev) {
+          const raw = frameDelta(ev.clientX - startX, ppf);
+          // A signed delta into master space and straight back, so the store
+          // still only ever sees a scene-local number.
+          const delta =
+            snap === undefined || !Number.isFinite(anchor)
+              ? raw
+              : snap(anchor + raw + sceneStart) - sceneStart - anchor;
+          store.dragLifespan(sceneId, row.layerId, effective, delta);
+        },
+        onEnd: (commit) => store.endBlockDrag(commit),
+      });
+    };
+
+  const left = frameToPx(sceneStart + lifespan.in, ppf);
+  const width = Math.max(8, frameToPx(lifespan.out - lifespan.in, ppf));
+
+  return (
+    <div
+      className={`lifespan-row${selected ? " is-selected" : ""}`}
+      data-lifespan={row.layerId}
+      data-row-scene={sceneId}
+    >
+      <div className="lifespan-label-cell" style={{ width: labelWidth, paddingLeft: 4 + row.depth * 12 }}>
+        <button
+          type="button"
+          className="lifespan-disclosure"
+          aria-expanded={expanded}
+          aria-label={expanded ? `Hide ${row.label}'s blocks` : `Show ${row.label}'s blocks`}
+          onClick={onToggle}
+        >
+          {expanded ? "▾" : "▸"}
+        </button>
+        <button type="button" className="lifespan-name" onClick={pick}>
+          {row.label}
+        </button>
+      </div>
+      <div className="lifespan-lane">
+        <div
+          className={`lifespan-bar${selected ? " is-selected" : ""}`}
+          style={{ left, width }}
+          data-bar={row.layerId}
+          onPointerDown={drag("body")}
+          title={`${row.label} · ${lifespan.in}–${lifespan.out} · drag to move it and its blocks, ⌥drag to slip the blocks alone, ⌘drag to ignore snapping`}
+        >
+          <span
+            className="lifespan-handle lifespan-handle-in"
+            data-handle="lifespan-in"
+            onPointerDown={drag("in")}
+            aria-hidden="true"
+          />
+          <span className="lifespan-bar-name">{row.label}</span>
+          <span
+            className="lifespan-handle lifespan-handle-out"
+            data-handle="lifespan-out"
+            onPointerDown={drag("out")}
+            aria-hidden="true"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}