@hypit/hypit 0.1.3 → 0.1.5

package/packages/studio/src/ui/timeline.ts

@@ -8,6 +8,7 @@ import { mountMaterialPreview } from "./material-preview.js";
 import type { State, Store } from "./selection.js";
 import { createHandle } from "./resize.js";
 import { createZoom } from "./zoom.js";
+import { chooseSemanticGesture, semanticGestureSpan } from "../temporal-edit.js";
 import { applyStudioMutation } from "./writeback.js";
 
 export type Timeline = {
@@ -17,7 +18,6 @@ export type Timeline = {
   readonly fit: () => void;
 };
 
-const opened = new Set<string>();
 const itemMetrics = {
   // Ordinary items fill their rows. Only the semantic lane owns compact word cells.
   insetYPx: 1,
@@ -147,11 +147,20 @@ export function createTimeline(store: Store): Timeline {
   let paintFrame = 0;
   let rebuildFrame = 0;
   const readableWordLabels = new Set<string>();
+  let selectedWord: string | undefined;
+  let overlapMenu: HTMLElement | undefined;
+  const closeOverlapMenu = () => { overlapMenu?.remove(); overlapMenu = undefined; };
+  element.addEventListener("pointerdown", event => {
+    if (!overlapMenu?.contains(event.target as Node)) closeOverlapMenu();
+  });
+  element.addEventListener("keydown", event => { if (event.key === "Escape") closeOverlapMenu(); });
+  body.addEventListener("scroll", closeOverlapMenu);
   let clipNodes: readonly {
     readonly node: HTMLElement;
     readonly start: number;
     readonly end: number;
     readonly id: string;
+    readonly selectionGroup?: string;
   }[] = [];
   let semanticNodes: readonly {
     readonly node: HTMLElement;
@@ -221,107 +230,17 @@ export function createTimeline(store: Store): Timeline {
     readonly clip: StudioSnapshot["tracks"][number]["clips"][number];
     readonly handle: StudioEditHandle;
     readonly startFrame: number;
-    readonly pointerAnchorIndex?: number;
     readonly pointerId: number;
     readonly node: HTMLElement;
     readonly originalLeft: string;
     readonly originalWidth: string;
   } | undefined;
 
-  const nearestAnchorIndex = (
-    frame: number,
-    indices: readonly number[],
-    preferredIndex?: number,
-  ): number | undefined => {
-    if (state === undefined) return undefined;
-    const anchors = state.snapshot.semantic?.anchors ?? [];
-    const preferredKind = preferredIndex === undefined ? undefined : anchors[preferredIndex]?.kind;
-    return [...indices].sort((left, right) => {
-      const leftAnchor = anchors[left]!;
-      const rightAnchor = anchors[right]!;
-      return Math.abs(leftAnchor.frame - frame) - Math.abs(rightAnchor.frame - frame)
-        || Number(leftAnchor.kind !== preferredKind) - Number(rightAnchor.kind !== preferredKind)
-        || Math.abs(left - (preferredIndex ?? left)) - Math.abs(right - (preferredIndex ?? right))
-        || left - right;
-    })[0];
-  };
-
-  const semanticTarget = (
-    edit: NonNullable<typeof activeEdit>,
-    nextFrame: number,
-  ): { readonly kind: "selection"; readonly startAnchorId: string; readonly endAnchorId: string }
-    | { readonly kind: "moment"; readonly anchorId: string }
-    | undefined => {
-    if (state === undefined || edit.handle.semantic === undefined) return undefined;
-    const semantic = edit.handle.semantic;
-    const anchors = state.snapshot.semantic?.anchors ?? [];
-    if (semantic.kind === "moment") {
-      const currentIndex = anchors.findIndex((anchor) => anchor.id === semantic.anchorId);
-      const anchorIndex = nearestAnchorIndex(
-        nextFrame,
-        anchors.map((_, index) => index),
-        currentIndex < 0 ? undefined : currentIndex,
-      );
-      return anchorIndex === undefined ? undefined : { kind: "moment", anchorId: anchors[anchorIndex]!.id };
-    }
-    const startIndex = anchors.findIndex((anchor) => anchor.id === semantic.startAnchorId);
-    const endIndex = anchors.findIndex((anchor) => anchor.id === semantic.endAnchorId);
-    if (startIndex < 0 || endIndex < 0 || startIndex >= endIndex) return undefined;
-    let nextStart = startIndex;
-    let nextEnd = endIndex;
-    if (edit.handle.gesture === "trim-start") {
-      const allowed = anchors.flatMap((anchor, index) =>
-        index < endIndex && anchor.frame < anchors[endIndex]!.frame ? [index] : []);
-      nextStart = nearestAnchorIndex(nextFrame, allowed, startIndex) ?? startIndex;
-    } else if (edit.handle.gesture === "trim-end") {
-      const allowed = anchors.flatMap((anchor, index) =>
-        index > startIndex && anchor.frame > anchors[startIndex]!.frame ? [index] : []);
-      nextEnd = nearestAnchorIndex(nextFrame, allowed, endIndex) ?? endIndex;
-    } else if (edit.handle.gesture === "move") {
-      const instantBoundary = edit.handle.temporal?.kind === "instant"
-        && edit.handle.temporal.authority.kind === "semantic"
-        && edit.handle.temporal.authority.source.kind === "selection"
-        ? edit.handle.temporal.authority.boundary
-        : undefined;
-      if (instantBoundary === "start") {
-        const allowed = anchors.flatMap((anchor, index) =>
-          index < endIndex && anchor.frame < anchors[endIndex]!.frame ? [index] : []);
-        nextStart = nearestAnchorIndex(nextFrame, allowed, startIndex) ?? startIndex;
-        return { kind: "selection", startAnchorId: anchors[nextStart]!.id, endAnchorId: anchors[nextEnd]!.id };
-      }
-      if (instantBoundary === "end") {
-        const allowed = anchors.flatMap((anchor, index) =>
-          index > startIndex && anchor.frame > anchors[startIndex]!.frame ? [index] : []);
-        nextEnd = nearestAnchorIndex(nextFrame, allowed, endIndex) ?? endIndex;
-        return { kind: "selection", startAnchorId: anchors[nextStart]!.id, endAnchorId: anchors[nextEnd]!.id };
-      }
-      const pointerIndex = edit.pointerAnchorIndex ?? startIndex;
-      const deltas = anchors.flatMap((_, index) => {
-        const delta = index - pointerIndex;
-        const movedStart = startIndex + delta;
-        const movedEnd = endIndex + delta;
-        return movedStart >= 0 && movedEnd < anchors.length
-          && anchors[movedStart]!.frame < anchors[movedEnd]!.frame
-          ? [delta]
-          : [];
-      });
-      const targetPointer = nearestAnchorIndex(
-        nextFrame,
-        deltas.map((delta) => pointerIndex + delta),
-        pointerIndex,
-      );
-      const delta = targetPointer === undefined ? 0 : targetPointer - pointerIndex;
-      nextStart += delta;
-      nextEnd += delta;
-    } else {
-      return undefined;
-    }
-    return {
-      kind: "selection",
-      startAnchorId: anchors[nextStart]!.id,
-      endAnchorId: anchors[nextEnd]!.id,
-    };
-  };
+  const semanticTarget = (edit: NonNullable<typeof activeEdit>, nextFrame: number) =>
+    state === undefined ? undefined : chooseSemanticGesture({
+      anchors: state.snapshot.semantic?.anchors ?? [], handle: edit.handle,
+      pointerStart: edit.startFrame, pointerNow: nextFrame, frameCount: state.snapshot.space.frameCount,
+    });
 
   const absoluteWindowTarget = (
     edit: NonNullable<typeof activeEdit>,
@@ -354,40 +273,8 @@ export function createTimeline(store: Store): Timeline {
   ): { readonly startFrame: number; readonly endFrameExclusive: number } | undefined => {
     if (state === undefined) return undefined;
     const target = semanticTarget(edit, nextFrame);
-    if (target?.kind === "selection" && edit.handle.semantic?.kind === "selection") {
-      const current = state.snapshot.semantic?.selections.find((selection) => selection.id === edit.handle.semantic!.id);
-      const nextStart = state.snapshot.semantic?.anchors.find((anchor) => anchor.id === target.startAnchorId)?.frame;
-      const nextEnd = state.snapshot.semantic?.anchors.find((anchor) => anchor.id === target.endAnchorId)?.frame;
-      if (current === undefined || nextStart === undefined || nextEnd === undefined) return undefined;
-      const instantBoundary = edit.handle.temporal?.kind === "instant"
-        && edit.handle.temporal.authority.kind === "semantic"
-        && edit.handle.temporal.authority.source.kind === "selection"
-        ? edit.handle.temporal.authority.boundary
-        : undefined;
-      if (instantBoundary === "start" || instantBoundary === "end") {
-        const frame = instantBoundary === "start" ? nextStart : nextEnd;
-        return { startFrame: frame, endFrameExclusive: frame + 1 };
-      }
-      return {
-        startFrame: nextStart + edit.clip.startFrame - current.startFrame,
-        endFrameExclusive: nextEnd + edit.clip.endFrameExclusive - current.endFrameExclusive,
-      };
-    }
-    if (target?.kind === "moment" && edit.handle.semantic?.kind === "moment") {
-      const current = state.snapshot.semantic?.moments.find((moment) => moment.id === edit.handle.semantic!.id);
-      const next = state.snapshot.semantic?.anchors.find((anchor) => anchor.id === target.anchorId)?.frame;
-      if (current === undefined || next === undefined) return undefined;
-      const delta = next - current.frame;
-      if (edit.handle.gesture === "trim-start") {
-        return { startFrame: next, endFrameExclusive: edit.clip.endFrameExclusive };
-      }
-      if (edit.handle.gesture === "trim-end") {
-        return { startFrame: edit.clip.startFrame, endFrameExclusive: next };
-      }
-      return edit.handle.moveEffect === "move-start"
-        ? { startFrame: edit.clip.startFrame + delta, endFrameExclusive: edit.clip.endFrameExclusive }
-        : { startFrame: edit.clip.startFrame + delta, endFrameExclusive: edit.clip.endFrameExclusive + delta };
-    }
+    if (target !== undefined) return semanticGestureSpan(state.snapshot.semantic?.anchors ?? [], edit.handle, target);
+    if (edit.handle.semantic !== undefined) return undefined;
     return edit.handle.temporal === undefined ? undefined : absoluteWindowTarget(edit, nextFrame);
   };
   lanes.addEventListener("pointerdown", (event) => {
@@ -423,7 +310,7 @@ export function createTimeline(store: Store): Timeline {
         const from = place(preview.startFrame, state.snapshot.space.frameCount, zoom.window());
         const to = place(preview.endFrameExclusive, state.snapshot.space.frameCount, zoom.window());
         activeEdit.node.style.left = `${from * 100}%`;
-        activeEdit.node.style.width = `max(2px, calc(${Math.max(0, to - from) * 100}% - ${itemMetrics.gapPx}px))`;
+        activeEdit.node.style.width = `max(2px, ${Math.max(0, to - from) * 100}%)`;
       }
       return;
     }
@@ -577,18 +464,15 @@ export function createTimeline(store: Store): Timeline {
     detail: string,
     height: number,
     attached = false,
-    hasState = false,
   ): HTMLElement => {
     const label = document.createElement("div");
-    label.className = `track-label track-${kind}${hasState ? " track-label-has-state" : ""}`;
+    label.className = `track-label track-${kind}`;
     if (attached) label.classList.add("track-label-attached");
     label.style.height = `${height}px`;
     label.title = `${name} · ${detail}`;
     label.innerHTML = `${attached
       ? '<span class="track-attachment-mark" aria-hidden="true"></span>'
-      : '<span class="track-icon"></span>'}<span class="track-copy"><strong></strong></span>${hasState
-        ? '<span class="track-state"></span>'
-        : ""}`;
+      : '<span class="track-icon"></span>'}<span class="track-copy"><strong></strong></span>`;
     if (!attached) setIcon(label.querySelector(".track-icon")!, iconName);
     label.querySelector("strong")!.textContent = name;
     return label;
@@ -608,25 +492,28 @@ export function createTimeline(store: Store): Timeline {
       return;
     }
     const presentation = snapshot.semantic.presentation;
-    // This is one semantic ruler group, not a regular Film lane. Its three
-    // bands share the same inner inset as ordinary items, so the first pixel
-    // of the semantic content aligns with the first pixel of the label card.
-    const laneHeight = presentation.lane.heightPx;
-    const bandHeight = Math.max(1, (laneHeight - itemMetrics.insetYPx * 2) / 3);
+    const bandHeight = Math.max(1, (presentation.lane.heightPx - itemMetrics.insetYPx * 2) / 3);
+    const bands = [
+      { kind: "segment", height: bandHeight },
+      ...(snapshot.semantic.tokens.length > 0 ? [{ kind: "word", height: bandHeight }] : []),
+      ...(snapshot.semantic.selections.length + snapshot.semantic.moments.length > 0
+        ? [{ kind: "intent", height: bandHeight }] : []),
+    ];
+    const laneHeight = bands.reduce((height, band) => height + band.height, itemMetrics.insetYPx * 2);
     const label = createTrackLabel(
-      presentation.label ?? "Semantic",
+      presentation.label ?? "Timeline",
       presentation.tone,
       presentation.icon,
-      `${snapshot.semantic.segments.length} take${snapshot.semantic.segments.length === 1 ? "" : "s"}`,
+      `${snapshot.semantic.segments.length} segment${snapshot.semantic.segments.length === 1 ? "" : "s"}`,
       laneHeight,
     );
     label.classList.add("track-label-semantic");
+    label.style.height = `calc(var(--timeline-ruler-height) + ${laneHeight}px)`;
     labels.append(label);
 
     const lane = document.createElement("div");
     lane.className = `lane semantic-lane track-tone-${presentation.tone}`;
     lane.style.height = `${laneHeight}px`;
-    lane.style.setProperty("--semantic-band-height", `${bandHeight}px`);
     const laneWidth = lanes.clientWidth;
     const nextSemanticNodes: {
       node: HTMLElement;
@@ -636,12 +523,15 @@ export function createTimeline(store: Store): Timeline {
       kind: "segment" | "word" | "selection" | "moment";
     }[] = [];
 
-    const bands = ["segment", "word", "intent"] as const;
-    for (const [index, kind] of bands.entries()) {
+    let bandTop = itemMetrics.insetYPx;
+    for (const { kind, height } of bands) {
       const band = document.createElement("div");
       band.className = `semantic-band semantic-band-${kind}`;
-      band.style.top = `${itemMetrics.insetYPx + index * bandHeight}px`;
+      band.style.top = `${bandTop}px`;
+      band.style.setProperty("--semantic-band-height", `${height}px`);
+      band.setAttribute("aria-label", kind === "intent" ? "Selections and Moments" : kind === "word" ? "Words" : "Segments");
       lane.append(band);
+      bandTop += height;
     }
     const segmentBand = lane.querySelector<HTMLElement>(".semantic-band-segment")!;
     const wordBand = lane.querySelector<HTMLElement>(".semantic-band-word")!;
@@ -660,7 +550,7 @@ export function createTimeline(store: Store): Timeline {
       node.dataset.semanticSegment = segment.id;
       node.style.left = `${from * 100}%`;
       const segmentWidth = Math.max(0, to - from) * 100;
-      node.style.width = `max(2px, calc(${segmentWidth}% - ${itemMetrics.gapPx}px))`;
+      node.style.width = `max(2px, ${segmentWidth}%)`;
       node.title = segment.id;
       const segmentLabel = document.createElement("span");
       segmentLabel.className = "semantic-segment-label";
@@ -700,12 +590,12 @@ export function createTimeline(store: Store): Timeline {
       word.setAttribute("aria-label", token.text);
       word.style.left = `${wordFrom * 100}%`;
       const wordWidth = Math.max(0, wordTo - wordFrom);
-      word.style.width = `max(1px, calc(${wordWidth * 100}% - ${itemMetrics.gapPx}px))`;
+      word.style.width = `max(1px, ${wordWidth * 100}%)`;
       word.title = token.text;
       const text = document.createElement("span");
       text.className = "semantic-word-label";
       text.textContent = token.text;
-      const wordWidthPx = Math.max(1, wordWidth * laneWidth - itemMetrics.gapPx);
+      const wordWidthPx = Math.max(1, wordWidth * laneWidth);
       const textWidthPx = measuredText(token.text);
       const contentWidthPx = Math.max(0, wordWidthPx - wordLabelPaddingPx * 2);
       const wasReadable = readableWordLabels.has(token.id);
@@ -721,6 +611,8 @@ export function createTimeline(store: Store): Timeline {
       word.append(wordContent);
       word.addEventListener("click", (event) => {
         event.stopPropagation();
+        store.clearSelection();
+        selectedWord = token.id;
         store.seek(token.startFrame, "timeline");
       });
       nextSemanticNodes.push({ node: word, id: token.id, start: token.startFrame, end: token.endFrameExclusive, kind: "word" });
@@ -736,7 +628,7 @@ export function createTimeline(store: Store): Timeline {
       node.tabIndex = 0;
       node.setAttribute("aria-label", `Selection ${selection.id}`);
       node.style.left = `${from * 100}%`;
-      node.style.width = `max(2px, calc(${Math.max(0, to - from) * 100}% - ${itemMetrics.gapPx}px))`;
+      node.style.width = `max(2px, ${Math.max(0, to - from) * 100}%)`;
       node.title = selection.id;
       const selectionLabel = document.createElement("span");
       selectionLabel.className = "semantic-selection-label";
@@ -770,6 +662,33 @@ export function createTimeline(store: Store): Timeline {
       intentBand.append(node);
       nextSemanticNodes.push({ node, id: moment.id, start: moment.frame, end: moment.frame + 1, kind: "moment" });
     }
+    lane.addEventListener("contextmenu", event => {
+      const hits = nextSemanticNodes.filter(({ node }) => {
+        const rect = node.getBoundingClientRect();
+        return event.clientX >= rect.left && event.clientX < rect.right
+          && event.clientY >= rect.top && event.clientY < rect.bottom;
+      });
+      if (hits.length < 2) return;
+      event.preventDefault();
+      closeOverlapMenu();
+      const menu = document.createElement("div");
+      menu.className = "timeline-overlap-menu";
+      menu.setAttribute("role", "menu");
+      menu.setAttribute("aria-label", "Overlapping timeline objects");
+      for (const hit of [...hits].reverse()) {
+        const option = document.createElement("button");
+        option.type = "button";
+        option.setAttribute("role", "menuitem");
+        option.textContent = hit.node.getAttribute("aria-label") ?? hit.id;
+        option.addEventListener("click", () => { closeOverlapMenu(); hit.node.click(); });
+        menu.append(option);
+      }
+      element.append(menu);
+      menu.style.left = `${Math.max(0, Math.min(event.clientX, window.innerWidth - menu.offsetWidth - 8))}px`;
+      menu.style.top = `${Math.max(0, Math.min(event.clientY, window.innerHeight - menu.offsetHeight - 8))}px`;
+      overlapMenu = menu;
+      menu.querySelector("button")?.focus();
+    });
     rows.append(lane);
     semanticNodes = nextSemanticNodes;
   };
@@ -777,155 +696,139 @@ export function createTimeline(store: Store): Timeline {
   const buildTrack = (
     snapshot: StudioSnapshot,
     track: StudioSnapshot["tracks"][number],
-    nextClipNodes: { node: HTMLElement; start: number; end: number; id: string }[],
+    nextClipNodes: { node: HTMLElement; start: number; end: number; id: string; selectionGroup?: string }[],
     attached = false,
   ): void => {
+    const trackBands = track.binding.bands ?? [];
+    const banded = trackBands.length > 0;
+    const layout = [
+      ...trackBands.filter(band => band.placement === "before"),
+      { id: undefined, heightPx: track.binding.lane.heightPx, display: "content" as const, tone: track.binding.tone },
+      ...trackBands.filter(band => band.placement === "after"),
+    ];
+    const totalHeight = layout.reduce((sum, band) => sum + band.heightPx, 0)
+      + (banded ? 2 * itemMetrics.insetYPx : 0);
     const tone = track.binding.tone;
-    const freeFrom: number[] = [];
-    const rowOf = new Map<string, number>();
-    for (const clip of [...track.clips].sort((a, b) => b.stackOrder - a.stackOrder || a.startFrame - b.startFrame)) {
-      let row = freeFrom.findIndex((free) => free <= clip.startFrame);
-      if (row < 0) { row = freeFrom.length; freeFrom.push(0); }
-      freeFrom[row] = clip.endFrameExclusive;
-      rowOf.set(clip.id, row);
-    }
-    const depth = Math.max(1, freeFrom.length);
-    const folded = depth > 1 && !opened.has(track.id);
-    const shownRows = folded ? 1 : depth;
-    const laneHeight = track.binding.lane.heightPx;
     const displayedItems = track.clips.length;
     const label = createTrackLabel(
       displayTrackName(track),
       tone,
       track.binding.icon,
       `${displayedItems} item${displayedItems === 1 ? "" : "s"}`,
-      shownRows * laneHeight,
+      totalHeight,
       attached,
-      depth > 1,
     );
     label.classList.add(`track-facet-${track.binding.facet}`);
-    if (depth > 1) {
-      const fold = document.createElement("button");
-      fold.type = "button";
-      fold.className = "track-fold";
-      fold.textContent = folded ? `+${depth - 1}` : "−";
-      fold.title = folded ? `Show ${depth} rows` : "Collapse rows";
-      fold.setAttribute("aria-expanded", String(!folded));
-      fold.addEventListener("click", (event) => {
-        event.stopPropagation();
-        if (opened.has(track.id)) opened.delete(track.id);
-        else opened.add(track.id);
-        build(snapshot);
-        paint();
-      });
-      label.querySelector(".track-state")!.append(fold);
-    }
     labels.append(label);
 
-    const lane = document.createElement("div");
-    lane.className = `lane track-tone-${tone} track-facet-${track.binding.facet}${attached ? " lane-attached" : ""}`;
-    lane.style.height = `${shownRows * laneHeight}px`;
-    lane.style.setProperty("--lane-height", `${laneHeight}px`);
-    const laneWidth = lanes.clientWidth;
+    const trackBody = document.createElement("div");
+    trackBody.className = banded ? "timeline-track timeline-track-banded" : "timeline-track";
+    trackBody.dataset.track = track.id;
+    trackBody.style.height = `${totalHeight}px`;
     const materialMounts: {
       readonly target: HTMLElement;
       readonly preview: Extract<StudioSnapshot["tracks"][number]["clips"][number]["display"]["layers"][number], { readonly kind: "preview" }>["preview"];
     }[] = [];
-    for (const clip of track.clips) {
-      const from = place(clip.startFrame, snapshot.space.frameCount, zoom.window());
-      const to = place(clip.endFrameExclusive, snapshot.space.frameCount, zoom.window());
-      if (to <= 0 || from >= 1) continue;
-      const row = rowOf.get(clip.id) ?? 0;
-      if (folded && row > 0) continue;
-      const node = document.createElement("button");
-      node.type = "button";
-      node.className = `clip clip-tone-${tone} clip-facet-${track.binding.facet} clip-chrome-${clip.presentation.chrome}`;
-      node.classList.toggle("clip-editable", clip.editHandles.some((handle) => handle.enabled));
-      node.dataset.clip = clip.id;
-      node.setAttribute("aria-label", clip.display.title);
-      node.style.left = `${from * 100}%`;
-      node.style.width = `max(2px, calc(${Math.max(0, to - from) * 100}% - ${itemMetrics.gapPx}px))`;
-      const visibleWidthPx = visibleItemWidth(from, to, laneWidth);
-      node.classList.toggle("clip-preview-wide", visibleWidthPx >= 92);
-      node.style.top = `${row * laneHeight}px`;
-      node.title = `${clip.display.title} · ${clip.startFrame}-${clip.endFrameExclusive}f`;
-      node.innerHTML = `<span class="clip-head"><span class="clip-name"></span><span class="clip-meta"></span></span><span class="clip-body"><span class="clip-layers" aria-hidden="true"></span><span class="clip-phases"></span></span><span class="clip-selection" aria-hidden="true"></span>`;
-      const layers = node.querySelector<HTMLElement>(".clip-layers")!;
-      clip.display.layers.forEach((layer, index) => {
-        const layerNode = document.createElement("span");
-        layerNode.className = `clip-layer clip-layer-${layer.kind} clip-layer-role-${layer.role}`;
-        layerNode.style.zIndex = String(index + 1);
-        if (layer.kind === "text") {
-          layerNode.textContent = layer.text;
-        } else {
-          layerNode.classList.add(`clip-layer-layout-${layer.layout}`);
-          materialMounts.push({ target: layerNode, preview: layer.preview });
+    for (const band of layout) {
+      const tone = band.tone ?? track.binding.tone;
+      const laneHeight = band.heightPx;
+      const lane = document.createElement("div");
+      lane.className = `lane track-tone-${tone} track-facet-${track.binding.facet}${attached ? " lane-attached" : ""}`;
+      lane.style.height = `${laneHeight}px`;
+      if (banded) lane.classList.add("track-band", `track-band-${band.display}`);
+      if (band.id !== undefined) lane.dataset.band = band.id;
+      lane.style.setProperty("--lane-height", `${laneHeight}px`);
+      const laneWidth = lanes.clientWidth;
+      // Stable order preserves Companion projection order when stack levels tie.
+      for (const clip of track.clips.filter(clip => clip.band === band.id).sort((a, b) => a.stackOrder - b.stackOrder)) {
+        const from = place(clip.startFrame, snapshot.space.frameCount, zoom.window());
+        const to = place(clip.endFrameExclusive, snapshot.space.frameCount, zoom.window());
+        if (to <= 0 || from >= 1) continue;
+        const node = document.createElement("button");
+        node.type = "button";
+        node.className = `clip clip-tone-${tone} clip-facet-${track.binding.facet} clip-chrome-${clip.presentation.chrome}`;
+        node.classList.toggle("clip-editable", clip.editHandles.some((handle) => handle.enabled));
+        node.dataset.clip = clip.id;
+        node.setAttribute("aria-label", clip.display.title);
+        node.style.left = `${from * 100}%`;
+        node.style.width = `max(2px, ${Math.max(0, to - from) * 100}%)`;
+        const visibleWidthPx = visibleItemWidth(from, to, laneWidth);
+        node.classList.toggle("clip-preview-wide", visibleWidthPx >= 92);
+        node.title = `${clip.display.title} · ${clip.startFrame}-${clip.endFrameExclusive}f`;
+        node.innerHTML = `<span class="clip-head"><span class="clip-name"></span><span class="clip-meta"></span></span><span class="clip-body"><span class="clip-layers" aria-hidden="true"></span><span class="clip-phases"></span></span><span class="clip-boundary" aria-hidden="true"></span><span class="clip-selection" aria-hidden="true"></span>`;
+        const layers = node.querySelector<HTMLElement>(".clip-layers")!;
+        clip.display.layers.forEach((layer, index) => {
+          const layerNode = document.createElement("span");
+          layerNode.className = `clip-layer clip-layer-${layer.kind} clip-layer-role-${layer.role}`;
+          layerNode.style.zIndex = String(index + 1);
+          if (layer.kind === "text") {
+            layerNode.textContent = layer.text;
+          } else {
+            layerNode.classList.add(`clip-layer-layout-${layer.layout}`);
+            materialMounts.push({ target: layerNode, preview: layer.preview });
+          }
+          layers.append(layerNode);
+        });
+        const phaseLayer = node.querySelector<HTMLElement>(".clip-phases")!;
+        for (const phase of clip.temporal?.phases ?? []) {
+          if (phase.endFrameExclusive <= clip.startFrame || phase.startFrame >= clip.endFrameExclusive) continue;
+          const phaseNode = document.createElement("span");
+          phaseNode.className = `clip-phase clip-phase-${phase.role}`;
+          phaseNode.style.left = `${(phase.startFrame - clip.startFrame) / Math.max(1, clip.endFrameExclusive - clip.startFrame) * 100}%`;
+          phaseNode.style.width = `${(phase.endFrameExclusive - phase.startFrame) / Math.max(1, clip.endFrameExclusive - clip.startFrame) * 100}%`;
+          phaseLayer.append(phaseNode);
         }
-        layers.append(layerNode);
-      });
-      const phaseLayer = node.querySelector<HTMLElement>(".clip-phases")!;
-      for (const phase of clip.temporal?.phases ?? []) {
-        if (phase.endFrameExclusive <= clip.startFrame || phase.startFrame >= clip.endFrameExclusive) continue;
-        const phaseNode = document.createElement("span");
-        phaseNode.className = `clip-phase clip-phase-${phase.role}`;
-        phaseNode.style.left = `${(phase.startFrame - clip.startFrame) / Math.max(1, clip.endFrameExclusive - clip.startFrame) * 100}%`;
-        phaseNode.style.width = `${(phase.endFrameExclusive - phase.startFrame) / Math.max(1, clip.endFrameExclusive - clip.startFrame) * 100}%`;
-        phaseLayer.append(phaseNode);
-      }
-      const metaText = clip.presentation.chrome === "point"
-        ? `${(clip.startFrame / fps(snapshot)).toFixed(2)}s`
-        : `${((clip.endFrameExclusive - clip.startFrame) / fps(snapshot)).toFixed(2)}s`;
-      const headerLabel = node.querySelector<HTMLElement>(".clip-name")!;
-      node.querySelector(".clip-meta")!.textContent = metaText;
-      headerLabel.textContent = clip.display.title;
-      node.addEventListener("pointerdown", (event) => {
-        const rect = node.getBoundingClientRect();
-        const edge = Math.min(8, Math.max(4, rect.width / 3));
-        const nearStart = event.clientX - rect.left <= edge;
-        const nearEnd = rect.right - event.clientX <= edge;
-        const handle = clip.editHandles.find((candidate) =>
-          candidate.enabled
-          && ((candidate.gesture === "trim-start" && nearStart)
-            || (candidate.gesture === "trim-end" && nearEnd)
-            || (candidate.gesture === "move" && !nearStart && !nearEnd)));
-        if (handle !== undefined
-          && (handle.gesture === "move" || handle.gesture === "trim-start" || handle.gesture === "trim-end")) {
-          event.stopPropagation();
-          const pointerFrame = handle.coordinate === "semantic-anchor"
-            ? rawFrameAt(event.clientX)
-            : frameAt(event.clientX);
-          const pointerAnchorIndex = handle.semantic !== undefined
-            ? nearestAnchorIndex(
-                pointerFrame,
-                state?.snapshot.semantic?.anchors.map((_, index) => index) ?? [],
-              )
-            : undefined;
-          activeEdit = {
-            clip,
-            handle,
-            startFrame: pointerFrame,
-            ...(pointerAnchorIndex === undefined ? {} : { pointerAnchorIndex }),
-            pointerId: event.pointerId,
-            node,
-            originalLeft: node.style.left,
-            originalWidth: node.style.width,
-          };
-          node.classList.add("editing");
-          try { lanes.setPointerCapture(event.pointerId); } catch { /* local pointer */ }
+        const metaText = clip.presentation.chrome === "point"
+          ? `${(clip.startFrame / fps(snapshot)).toFixed(2)}s`
+          : `${((clip.endFrameExclusive - clip.startFrame) / fps(snapshot)).toFixed(2)}s`;
+        const headerLabel = node.querySelector<HTMLElement>(".clip-name")!;
+        node.querySelector(".clip-meta")!.textContent = metaText;
+        headerLabel.textContent = clip.display.title;
+        node.addEventListener("pointerdown", (event) => {
+          const rect = node.getBoundingClientRect();
+          const edge = Math.min(8, Math.max(4, rect.width / 3));
+          const nearStart = event.clientX - rect.left <= edge;
+          const nearEnd = rect.right - event.clientX <= edge;
+          const handle = clip.editHandles.find((candidate) =>
+            candidate.enabled
+            && ((candidate.gesture === "trim-start" && nearStart)
+              || (candidate.gesture === "trim-end" && nearEnd)
+              || (candidate.gesture === "move" && !nearStart && !nearEnd)));
+          if (handle !== undefined
+            && (handle.gesture === "move" || handle.gesture === "trim-start" || handle.gesture === "trim-end")) {
+            event.stopPropagation();
+            const pointerFrame = handle.coordinate === "semantic-anchor"
+              ? rawFrameAt(event.clientX)
+              : frameAt(event.clientX);
+            activeEdit = {
+              clip,
+              handle,
+              startFrame: pointerFrame,
+              pointerId: event.pointerId,
+              node,
+              originalLeft: node.style.left,
+              originalWidth: node.style.width,
+            };
+            node.classList.add("editing");
+            try { lanes.setPointerCapture(event.pointerId); } catch { /* local pointer */ }
+            store.select(clip.id, "timeline");
+            return;
+          }
           store.select(clip.id, "timeline");
-          return;
-        }
-        store.select(clip.id, "timeline");
-      });
-      node.addEventListener("dblclick", () => store.seek(clip.startFrame, "timeline"));
-      nextClipNodes.push({ node, start: clip.startFrame, end: clip.endFrameExclusive, id: clip.id });
-      lane.append(node);
+        });
+        node.addEventListener("dblclick", () => store.seek(clip.startFrame, "timeline"));
+        nextClipNodes.push({ node, start: clip.startFrame, end: clip.endFrameExclusive, id: clip.id, ...(clip.selectionGroup === undefined ? {} : { selectionGroup: clip.selectionGroup }) });
+        lane.append(node);
+      }
+      trackBody.append(lane);
     }
-    rows.append(lane);
+    rows.append(trackBody);
+    // Cached storyboards render synchronously and need connected, measurable targets.
     for (const item of materialMounts) mountMaterialPreview(item.target, item.preview);
   };
 
   const build = (snapshot: StudioSnapshot): void => {
+    closeOverlapMenu();
     const scrollTop = body.scrollTop;
     labels.replaceChildren();
     rows.replaceChildren();
@@ -933,15 +836,14 @@ export function createTimeline(store: Store): Timeline {
     const corner = document.createElement("div");
     corner.className = "label-corner";
     corner.textContent = "";
-    labels.append(corner);
+    if (snapshot.semantic === undefined || snapshot.semantic.segments.length === 0) labels.append(corner);
     buildSemanticLane(snapshot);
-    const nextClipNodes: { node: HTMLElement; start: number; end: number; id: string }[] = [];
+    const nextClipNodes: { node: HTMLElement; start: number; end: number; id: string; selectionGroup?: string }[] = [];
     for (const track of snapshot.tracks) {
       const attachedTo = track.binding.lane.attachedTo;
       if (attachedTo !== undefined) continue;
       buildTrack(snapshot, track, nextClipNodes);
-      const slot = track.binding.lane.groupId;
-      if (slot === undefined) continue;
+      const slot = track.binding.lane.groupId ?? track.binding.groupId;
       const attachments = attachedTracks(snapshot, slot, track.binding.groupId);
       for (const attachment of attachments) {
         buildTrack(snapshot, attachment, nextClipNodes, true);
@@ -967,8 +869,10 @@ export function createTimeline(store: Store): Timeline {
     playhead.classList.toggle("outside", position < 0 || position > lanes.clientWidth);
     playheadGrip.classList.toggle("outside", position < 0 || position > lanes.clientWidth);
     timelineTime.textContent = frameTimecode(snapshot, head.frame);
+    const chosen = selection.kind === "clip" ? store.clip(selection.clipId) : undefined;
     for (const item of clipNodes) {
-      const selected = selection.kind === "clip" && selection.clipId === item.id;
+      const selected = chosen !== undefined && (chosen.id === item.id
+        || (chosen.selectionGroup !== undefined && chosen.selectionGroup === item.selectionGroup));
       item.node.classList.toggle("selected", selected);
       item.node.setAttribute("aria-pressed", String(selected));
       item.node.classList.toggle("live", head.frame >= item.start && head.frame < item.end);
@@ -978,7 +882,8 @@ export function createTimeline(store: Store): Timeline {
         (item.kind === "segment" || item.kind === "selection")
         && head.frame >= item.start && head.frame < item.end);
       item.node.classList.toggle("current", item.kind === "word" && head.frame >= item.start && head.frame < item.end);
-      const selected = (item.kind === "segment"
+      const selected = (item.kind === "word" && selectedWord === item.id && selection.kind === "none")
+        || (item.kind === "segment"
         && selection.kind === "semantic-segment" && selection.segmentId === item.id)
         || (item.kind === "selection"
           && selection.kind === "semantic-selection" && selection.selectionId === item.id)
@@ -1025,6 +930,7 @@ export function createTimeline(store: Store): Timeline {
   zoom.subscribe(scheduleBuild);
   store.subscribe((value) => {
     state = value;
+    if (value.selection.kind !== "none") selectedWord = undefined;
     if (value.snapshot.revision !== built) {
       built = value.snapshot.revision;
       build(value.snapshot);