@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/timeline/ChannelRow.tsx

@@ -1,36 +1,35 @@
-// 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.
+// The channel rows under an expanded layer: one row per keyframed property.
 //
-// ── 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.
+// Every row is one stored track (model.ts's `channelRows`), drawn as diamonds,
+// and every diamond gesture routes through the track ops. `dragKeyframe` shares
+// the dock's scrub bracket, so a diamond drag is one undo entry like everything
+// else in this dock.
 //
 // ── THE LIVE VALUE IS A LEAF ────────────────────────────────────────────
 //
-// The label cell shows the channel's resolved value AT THE PLAYHEAD. That
+// A transform row's label cell shows the 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 { EASE_PRESETS, frameToPx, matchPreset, startDrag } from "@dailies-studio/timeline";
+import { useContextMenu } from "@dailies-studio/ui";
 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 type { Layer3D, Scene3D } from "@dailies-studio/shot/doc";
+import type { Ease, Rational } from "@dailies-studio/engine";
+import type { CSSProperties, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from "react";
+import { memo, useMemo } from "react";
+import { TRANSFORM_CHANNELS } from "../../channels.js";
+import type { ChannelSpec } 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 { PropertyPicker } from "./PropertyPicker.js";
+import { keyframeMenuEntries, keyframeMenuTargets } from "./keyframeMenu.js";
+import { channelRowsCached, frameDelta, sceneChannelRows } from "./model.js";
+import type { ChannelRowModel, TrackKey } from "./model.js";
 import type { SnapPress } from "./snap.js";
 import { isSnapSuppressed } from "./snap.js";
+import { StaggerChip, setStaggerPreview, useStaggerReadout } from "./staggerPreview.js";
+import { sameKeyframeSel } from "../../state/types.js";
 
 export function ChannelRows({
   layer,
@@ -39,8 +38,8 @@ export function ChannelRows({
   ppf,
   labelWidth,
   offsetFrames,
+  originFrames,
   fps,
-  lifespan,
   beginSnap,
 }: {
   layer: Layer3D;
@@ -50,94 +49,276 @@ export function ChannelRows({
   labelWidth: number;
   /** The scene's master start. Drawing only, like every bar in this lane. */
   offsetFrames: number;
+  originFrames: 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]);
+  // tracks do, and the dock re-renders for ppf/guide
+  // changes that should not pay a re-derive.
+  const rows = channelRowsCached(layer);
+  // ONE MENU PER LAYER, not one per diamond. The hook holds an open/closed
+  // state and a focus-restore ref, and a document with a keyframed position
+  // over sixty frames would otherwise mount sixty of them for one menu that can
+  // only ever be open once.
+  const menu = useContextMenu();
+  const selectedKeys = useSelectedKeyframeSet();
+  const status = useMemo(() => selectedKeyStatus(rows, sceneId, layer.id, selectedKeys), [rows, sceneId, layer.id, selectedKeys]);
   // 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.
+  // the first keyframe comes from, and an empty expansion reads as broken. The
+  // picker below it is the answer to the hint, in reach of the sentence.
   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 className="channel-row channel-empty" data-testid="channel-empty">
+          <div className="channel-label-cell" style={{ width: labelWidth, "--depth": depth } as CSSProperties}>
+            <span className="channel-name">No animation</span>
+          </div>
+          <div className="channel-lane channel-empty-hint">
+            Pick a property below, turn on Animate (⇧A) and edit, or press ◆ in the inspector.
+          </div>
         </div>
-      </div>
+        <PropertyPicker
+          subject={{ kind: "layer", layer }}
+          containerId={sceneId}
+          labelWidth={labelWidth}
+          depth={depth}
+        />
+      </>
     );
   }
   return (
     <>
+      {menu.menu}
       {rows.map((row) => (
         <ChannelRow
-          key={row.key}
+          key={row.path}
           row={row}
           layer={layer}
+          layerId={layer.id}
           sceneId={sceneId}
           depth={depth}
           ppf={ppf}
           labelWidth={labelWidth}
           offsetFrames={offsetFrames}
+          originFrames={originFrames}
           fps={fps}
-          lifespan={lifespan}
           beginSnap={beginSnap}
+          openMenu={menu.open}
+          selectedKeys={selectedKeys}
         />
       ))}
+      <PropertyPicker
+        subject={{ kind: "layer", layer }}
+        containerId={sceneId}
+        labelWidth={labelWidth}
+        depth={depth}
+        status={status}
+      />
     </>
   );
 }
 
+/**
+ * The SHOT's own channel rows (P5): its background colour and its post stack.
+ *
+ * The same `ChannelRow`, with no layer: no transform readout corresponds to a
+ * background colour, so the live-value cell has nothing to show. Rendering nothing at all
+ * when the shot has no tracks is the opt-in the layer rows follow: a property
+ * lane appears once it carries animation and not before.
+ */
+export function SceneChannelRows({
+  scene,
+  depth,
+  ppf,
+  labelWidth,
+  offsetFrames,
+  originFrames,
+  fps,
+  beginSnap,
+}: {
+  scene: Scene3D;
+  depth: number;
+  ppf: number;
+  labelWidth: number;
+  offsetFrames: number;
+  originFrames: number;
+  fps: Rational;
+  beginSnap?: SnapPress | undefined;
+}) {
+  const rows = useMemo(() => sceneChannelRows(scene), [scene]);
+  const menu = useContextMenu();
+  const selectedKeys = useSelectedKeyframeSet();
+  const status = useMemo(() => selectedKeyStatus(rows, scene.id, null, selectedKeys), [rows, scene.id, selectedKeys]);
+  return (
+    <>
+      {menu.menu}
+      {rows.map((row) => (
+        <ChannelRow
+          key={row.path}
+          row={row}
+          layer={null}
+          layerId={null}
+          sceneId={scene.id}
+          depth={depth}
+          ppf={ppf}
+          labelWidth={labelWidth}
+          offsetFrames={offsetFrames}
+          originFrames={originFrames}
+          fps={fps}
+          beginSnap={beginSnap}
+          openMenu={menu.open}
+          selectedKeys={selectedKeys}
+        />
+      ))}
+      {/* Drawn even with no rows above it, which is why this component no
+          longer returns null on an untracked shot: the picker is the way a
+          shot's FIRST post-stack keyframe gets made from the timeline. */}
+      <PropertyPicker
+        subject={{ kind: "shot", scene }}
+        containerId={scene.id}
+        labelWidth={labelWidth}
+        depth={depth}
+        status={status}
+      />
+    </>
+  );
+}
+
+/** The `useContextMenu` opener, threaded down to the diamonds. */
+type OpenMenu = ReturnType<typeof useContextMenu>["open"];
+
+/**
+ * The selected keyframes as one set of addresses, built ONCE per selection
+ * change by the rows' parent.
+ *
+ * Every diamond used to hold its own `useShotEditor` selector scanning
+ * `selectedKeyframes` for itself: five hundred diamonds times ten selected
+ * keyframes was five thousand comparisons per cold notification, i.e. per
+ * rAF frame of a keyframe drag and per keystroke. Membership is now one `has`
+ * per diamond, and a memoised diamond re-renders only when ITS bit flips.
+ */
+function keyframeAddress(containerId: string, layerId: string | null, path: string, frame: number): string {
+  return `${containerId}|${layerId ?? ""}|${path}@${frame}`;
+}
+
+/**
+ * The status line beside "+ property": what is selected on THESE rows, in the
+ * words a diamond's own title uses. Null when nothing here is selected, so the
+ * line is absent rather than saying "nothing".
+ *
+ * Read from the selection set and the rows, never from the frame: it changes
+ * when the selection or the keys do, and playback does not touch it.
+ */
+function selectedKeyStatus(
+  rows: readonly ChannelRowModel[],
+  containerId: string,
+  layerId: string | null,
+  selected: ReadonlySet<string>,
+): string | null {
+  if (selected.size === 0) return null;
+  let count = 0;
+  let only: { label: string; key: TrackKey } | null = null;
+  for (const row of rows) {
+    for (const key of row.keys) {
+      if (!selected.has(keyframeAddress(containerId, layerId, row.path, key.frame))) continue;
+      count += 1;
+      only ??= { label: row.label, key };
+    }
+  }
+  if (only === null) return null;
+  if (count > 1) return `${count} keys selected`;
+  return `${only.label} ${only.key.value} · frame ${only.key.frame} · ${easeLabel(only.key.ease)}`;
+}
+
+function useSelectedKeyframeSet(): ReadonlySet<string> {
+  const selected = useShotEditor((s) => s.selectedKeyframes);
+  return useMemo(
+    () => new Set(selected.map((at) => keyframeAddress(at.containerId, at.layerId, at.path, at.frame))),
+    [selected],
+  );
+}
+
 function ChannelRow({
   row,
   layer,
+  layerId,
   sceneId,
   depth,
   ppf,
   labelWidth,
   offsetFrames,
+  originFrames,
   fps,
-  lifespan,
   beginSnap,
+  openMenu,
+  selectedKeys,
 }: {
   row: ChannelRowModel;
-  layer: Layer3D;
+  /** Null when the subject is the SHOT (P5): its background and its post stack
+   *  are tracked on the scene, and no transform readout corresponds to either,
+   *  so the live-value readout below simply has nothing to read. */
+  layer: Layer3D | null;
+  layerId: string | null;
   sceneId: string;
   depth: number;
   ppf: number;
   labelWidth: number;
   offsetFrames: number;
+  originFrames: number;
   fps: Rational;
-  lifespan?: Lifespan | undefined;
   beginSnap?: SnapPress | undefined;
+  openMenu: OpenMenu;
+  selectedKeys: ReadonlySet<string>;
 }) {
+  const store = useStore();
+  const readout = useStaggerReadout(staggerRowId(sceneId, layerId, row.path));
+  const spec = TRANSFORM_CHANNELS.get(row.path);
   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 }}>
+    <div className="channel-row" data-channel-row={row.path} data-row-scene={sceneId}>
+      <div className="channel-label-cell" style={{ width: labelWidth, "--depth": depth } as CSSProperties}>
         <span className="channel-name">{row.label}</span>
-        <ChannelValue layer={layer} channel={row.key} offsetFrames={offsetFrames} fps={fps} />
+        {/* NO `originFrames` HERE. This readout converts the MASTER playhead
+            into scene-local time (`frame - offsetFrames`), which is a real
+            clock conversion and not a drawing offset — the shot context's
+            re-zero must not reach it. */}
+        {spec === undefined || layer === null ? null : (
+          <ChannelValue layer={layer} path={row.path} spec={spec} offsetFrames={offsetFrames} fps={fps} />
+        )}
+        {/* REMOVE ANIMATION. The verb is on the row rather than only in the
+            inspector because this is where the author is looking at the thing
+            they want gone, and because deleting keys one at a time to clear a
+            track is a chore with a cliff at the last one (the last delete
+            removes the track anyway). */}
+        <button
+          type="button"
+          className="channel-clear"
+          data-testid={`channel-clear-${row.path}`}
+          title={`Remove the ${row.label} keyframes: the layer keeps the value it was authored with`}
+          aria-label={`Remove ${row.label} keyframes`}
+          onClick={() => store.clearTrack(sceneId, layerId, row.path)}
+        >
+          ×
+        </button>
       </div>
       <div className="channel-lane">
-        {row.spans.map((span) => (
-          <ChannelSpanView
-            key={span.blockId}
-            span={span}
-            channelLabel={row.label}
-            layerId={layer.id}
-            sceneId={sceneId}
+        {row.keys.map((key) => (
+          <TrackKeyView
+            key={key.id}
+            trackKey={key}
+            rowLabel={row.label}
+            path={row.path}
+            layerId={layerId}
+            containerId={sceneId}
+            selected={selectedKeys.has(keyframeAddress(sceneId, layerId, row.path, key.frame))}
             ppf={ppf}
             offsetFrames={offsetFrames}
-            lifespan={lifespan}
+            originFrames={originFrames}
             beginSnap={beginSnap}
+            openMenu={openMenu}
           />
         ))}
+        {readout === null ? null : <StaggerChip step={readout.step} left={readout.anchor ?? 0} />}
       </div>
     </div>
   );
@@ -148,119 +329,187 @@ function ChannelRow({
  *  outside this scene simply shows the layer's held value. */
 function ChannelValue({
   layer,
-  channel,
+  path,
+  spec,
   offsetFrames,
   fps,
 }: {
   layer: Layer3D;
-  channel: ChannelRowModel["key"];
+  path: string;
+  spec: ChannelSpec;
   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
+  // here for the inspector's reason: this runs a full `resolveLayerAt` track
   // 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}`}>
+    <span className="channel-value" data-testid={`channel-value-${path}`}>
       {spec.read(resolveLayerAt(layer, frame - offsetFrames, fps))}
     </span>
   );
 }
 
-function ChannelSpanView({
-  span,
-  channelLabel,
+/**
+ * ONE KEYFRAME.
+ *
+ * Drag moves it (through the dock's scrub bracket, so it is one undo
+ * entry and Escape restores the frame it started on), a plain press selects it,
+ * and a right-click sets the ease of the segment LEAVING it — which is what
+ * `easeOut` means and why the menu is on the key rather than between two.
+ */
+const TrackKeyView = memo(function TrackKeyView({
+  trackKey,
+  rowLabel,
+  path,
   layerId,
-  sceneId,
+  containerId,
   ppf,
   offsetFrames,
-  lifespan,
+  originFrames,
   beginSnap,
+  openMenu,
+  selected,
 }: {
-  span: ChannelSpan;
-  channelLabel: string;
-  layerId: string;
-  sceneId: string;
+  trackKey: TrackKey;
+  rowLabel: string;
+  path: string;
+  /** Membership in the selection, decided by the parent's one set. */
+  selected: boolean;
+  /** Null = the shot itself, the address `selectedKeyframe` and every keyframe
+   *  store verb already take. */
+  layerId: string | null;
+  containerId: string;
   ppf: number;
   offsetFrames: number;
-  lifespan?: Lifespan | undefined;
+  originFrames: number;
   beginSnap?: SnapPress | undefined;
+  openMenu: OpenMenu;
 }) {
   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 drag = (e: ReactPointerEvent<HTMLElement>): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    store.focusScene(containerId);
+    const at = { containerId, layerId, path, frame: trackKey.frame };
+    // ── ⌥ ON A SELECTED KEY, WITH OTHERS SELECTED, FANS THEM OUT ─────────
+    //
+    // Paper page 23, "8 · Stagger". ⌥ is free on a key otherwise, so a lone key
+    // or an unselected one falls through to the plain drag below. No snap: each
+    // key moves a different distance, so a guide would describe none of them.
+    const held = store.getState().selectedKeyframes;
+    if (e.altKey && held.length > 1 && held.some((k) => sameKeyframeSel(k, at))) {
       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();
+      const grabbed = staggerRowId(containerId, layerId, path);
+      const anchor = frameToPx(trackKey.frame + offsetFrames - originFrames, ppf);
+      if (!store.beginBlockDrag()) return;
+      setStaggerPreview({ from: {}, grabbed, step: 0, anchor });
       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));
+          const step = frameDelta(ev.clientX - startX, ppf);
+          // A refused capture leaves the keys on their press frames: +0f.
+          const took = store.dragKeyStagger(step);
+          setStaggerPreview({ from: {}, grabbed, step: took ? step : 0, anchor });
+        },
+        onEnd: (commit) => {
+          setStaggerPreview(null);
+          store.endBlockDrag(commit);
         },
-        onEnd: (commit) => store.endBlockDrag(commit),
       });
-    };
+      return;
+    }
+    // ── A MODIFIED PRESS EXTENDS THE SELECTION AND DOES NOT DRAG ──────────
+    //
+    // Shift adds, ctrl/meta toggles — the same two modifiers `CurveGraph`
+    // reads off a click, so building a selection means one thing on both faces
+    // of the dock. It returns BEFORE `startDrag`, deliberately: ctrl is also
+    // this row's snap suppressor (`isSnapSuppressed`), so a modified press that
+    // also began a drag would move the key the author was only trying to add.
+    if (e.shiftKey || e.ctrlKey || e.metaKey) {
+      store.selectKeyframes(at, e.shiftKey ? "add" : "toggle");
+      return;
+    }
+    store.selectKeyframe(at);
+    const startX = e.clientX;
+    const from = trackKey.frame;
+    // THE SAME SNAP the bars use, excluding NOTHING — and that is correct
+    // rather than an omission. A bar has to exclude itself because its own two
+    // edges are snap targets, so it would be pinned at zero travel; a keyframe
+    // frame is not a target at all (`collectSnapTargets` collects lifespans,
+    // clips, markers, the playhead and shot boundaries), so there is
+    // nothing of its own for it to catch on.
+    const snap = beginSnap?.(undefined, isSnapSuppressed(e));
+    store.beginBlockDrag();
+    startDrag(e, {
+      onMove(ev) {
+        const delta = frameDelta(ev.clientX - startX, ppf);
+        // Through `offsetFrames`, never `originFrames`: `beginSnap` freezes
+        // MASTER targets, so the conversion is to master time and back. The
+        // re-zero is a drawing offset and must not reach an edit.
+        const raw = from + delta;
+        const at = snap === undefined ? raw : snap(raw + offsetFrames) - offsetFrames;
+        store.dragKeyframe(containerId, layerId, path, from, at);
+      },
+      onEnd: (commit) => store.endBlockDrag(commit),
+    });
+  };
+
+  const contextMenu = (e: ReactMouseEvent<HTMLElement>): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Point at the key under the cursor, the way the strip's menu selects the
+    // bar it opened on. So the Delete item and a following Backspace address
+    // the same thing.
+    // POINT AT THE KEY UNDER THE CURSOR — unless it is already IN the
+    // selection, in which case the menu is about the whole set. Right-clicking
+    // one of four selected keys to ease all four is the gesture every timeline
+    // has; collapsing to one here would silently drop three.
+    const at = { containerId, layerId, path, frame: trackKey.frame };
+    const targets = keyframeMenuTargets(store.getState().selectedKeyframes, at);
+    if (targets.length === 1) store.selectKeyframe(at);
+    // THE SHARED BUILDER: the graph's circles open the same menu, and the three
+    // kind rules it enforces are not the sort that survive being written twice.
+    openMenu(
+      { x: e.clientX, y: e.clientY },
+      keyframeMenuEntries({
+        store,
+        key: { kind: trackKey.kind, ease: trackKey.ease, last: trackKey.last, curved: trackKey.curved },
+        targets,
+        at,
+      }),
+    );
+  };
 
   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>
+    <span
+      className={`channel-key ease-${trackKey.ease.type}${selected ? " is-selected" : ""}`}
+      style={{ left: frameToPx(trackKey.frame + offsetFrames - originFrames, ppf) }}
+      data-track-key={`${path}@${trackKey.frame}`}
+      data-testid={`track-key-${path}-${trackKey.frame}`}
+      role="button"
+      tabIndex={-1}
+      aria-label={`${rowLabel} keyframe at frame ${trackKey.frame}`}
+      title={`${rowLabel} ${trackKey.value} · frame ${trackKey.frame} · ${easeLabel(trackKey.ease)}`}
+      onPointerDown={drag}
+      onContextMenu={contextMenu}
+    />
   );
+});
+
+/** The readout's slot for a key row: one per track. */
+function staggerRowId(containerId: string, layerId: string | null, path: string): string {
+  return `keys:${containerId}|${layerId ?? ""}|${path}`;
+}
+
+/** The ease's own name, from the shared palette — never a second spelling of
+ *  "Ease In-Out" living in this file. `matchPreset` compares bezier handles
+ *  exactly, so a hand-authored curve comes back null and reads as "Custom". */
+function easeLabel(ease: Ease): string {
+  const id = matchPreset(ease);
+  return EASE_PRESETS.find((p) => p.id === id)?.label ?? "Custom";
 }