@hypit/hypit 0.1.4 → 0.1.6

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

@@ -1,3 +1,4 @@
+import { userText, uiAttribute, uiText, uiAttr } from "./i18n.js";
 import type {
   SemanticToken,
   StudioSnapshot,
@@ -89,13 +90,13 @@ export function createTimeline(store: Store): Timeline {
   element.innerHTML = `
     <div class="timeline-toolbar">
       <div class="timeline-tools">
-        <button type="button" class="tool-button active" aria-label="Select" title="Select">${icon("select")}</button>
+        <button type="button" class="tool-button active" ${uiAttribute("aria-label", "timeline.select")} ${uiAttribute("title", "timeline.select")}>${icon("select")}</button>
       </div>
       <div class="timeline-time" data-timeline-time>00:00:00</div>
       <div class="timeline-view-actions">
-        <button type="button" class="icon-button" data-zoom-out aria-label="Zoom out" title="Zoom out">${icon("minus")}</button>
-        <button type="button" class="icon-button" data-zoom-fit aria-label="Fit timeline" title="Fit timeline">${icon("fit")}</button>
-        <button type="button" class="icon-button" data-zoom-in aria-label="Zoom in" title="Zoom in">${icon("plus")}</button>
+        <button type="button" class="icon-button" data-zoom-out ${uiAttribute("aria-label", "timeline.zoom-out")} ${uiAttribute("title", "timeline.zoom-out")}>${icon("minus")}</button>
+        <button type="button" class="icon-button" data-zoom-fit ${uiAttribute("aria-label", "timeline.fit-timeline")} ${uiAttribute("title", "timeline.fit-timeline")}>${icon("fit")}</button>
+        <button type="button" class="icon-button" data-zoom-in ${uiAttribute("aria-label", "timeline.zoom-in")} ${uiAttribute("title", "timeline.zoom-in")}>${icon("plus")}</button>
       </div>
     </div>
     <div class="timeline-body" data-timeline-body>
@@ -138,8 +139,8 @@ export function createTimeline(store: Store): Timeline {
     remember: "hypit-studio.v4.timeline-label-width",
   });
   labelHandle.classList.add("timeline-label-handle");
-  labelHandle.setAttribute("aria-label", "Resize timeline track labels");
-  labelHandle.title = "Resize track labels";
+  uiAttr(labelHandle, "aria-label", "timeline.resize-timeline-track-labels");
+  uiAttr(labelHandle, "title", "timeline.resize-track-labels");
   body.insertBefore(labelHandle, lanes);
 
   let state: State | undefined;
@@ -147,11 +148,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;
@@ -301,7 +311,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;
     }
@@ -479,29 +489,34 @@ export function createTimeline(store: Store): Timeline {
     .sort((left, right) => (left.binding.lane.order ?? 0) - (right.binding.lane.order ?? 0));
 
   const buildSemanticLane = (snapshot: StudioSnapshot): void => {
-    if (snapshot.semantic === undefined) {
+    if (snapshot.semantic === undefined || snapshot.semantic.segments.length === 0) {
       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 ?? "",
       presentation.tone,
       presentation.icon,
-      `${snapshot.semantic.segments.length} take${snapshot.semantic.segments.length === 1 ? "" : "s"}`,
+      "",
       laneHeight,
     );
+    if (presentation.label === undefined) uiText(label.querySelector("strong")!, "inspector.timeline");
+    uiAttr(label, "title", "timeline.segment-count", { count: snapshot.semantic.segments.length });
     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;
@@ -511,12 +526,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`);
+      uiAttr(band, "aria-label", kind === "intent" ? "timeline.selections-and-moments" : kind === "word" ? "timeline.words" : "timeline.segments");
       lane.append(band);
+      bandTop += height;
     }
     const segmentBand = lane.querySelector<HTMLElement>(".semantic-band-segment")!;
     const wordBand = lane.querySelector<HTMLElement>(".semantic-band-word")!;
@@ -531,11 +549,11 @@ export function createTimeline(store: Store): Timeline {
       node.className = "semantic-cell semantic-segment";
       node.tabIndex = 0;
       node.setAttribute("role", "button");
-      node.setAttribute("aria-label", `Segment ${segment.id}`);
+      uiAttr(node, "aria-label", "timeline.segment-name", { name: segment.id });
       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";
@@ -575,12 +593,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);
@@ -596,6 +614,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" });
@@ -609,9 +629,9 @@ export function createTimeline(store: Store): Timeline {
       node.type = "button";
       node.className = "semantic-cell semantic-selection";
       node.tabIndex = 0;
-      node.setAttribute("aria-label", `Selection ${selection.id}`);
+      uiAttr(node, "aria-label", "timeline.selection-name", { name: 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";
@@ -635,7 +655,7 @@ export function createTimeline(store: Store): Timeline {
       node.type = "button";
       node.className = "semantic-moment";
       node.tabIndex = 0;
-      node.setAttribute("aria-label", `Moment ${moment.id}`);
+      uiAttr(node, "aria-label", "timeline.moment-name", { name: moment.id });
       node.style.left = `${at * 100}%`;
       node.title = moment.id;
       node.addEventListener("click", (event) => {
@@ -645,6 +665,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");
+      uiAttr(menu, "aria-label", "timeline.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;
   };
@@ -652,128 +699,149 @@ 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 laneHeight = track.binding.lane.heightPx;
     const displayedItems = track.clips.length;
     const label = createTrackLabel(
       displayTrackName(track),
       tone,
       track.binding.icon,
       `${displayedItems} item${displayedItems === 1 ? "" : "s"}`,
-      laneHeight,
+      totalHeight,
       attached,
     );
     label.classList.add(`track-facet-${track.binding.facet}`);
     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 = `${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"];
     }[] = [];
-    // Stable order preserves Companion projection order when stack levels tie.
-    for (const clip of [...track.clips].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, 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.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);
-          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 */ }
+        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();
     semanticNodes = [];
     const corner = document.createElement("div");
     corner.className = "label-corner";
-    corner.textContent = "";
-    labels.append(corner);
+    userText(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;
@@ -804,8 +872,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);
@@ -815,7 +885,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)
@@ -862,6 +933,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);

package/packages/studio/start.ts

@@ -10,6 +10,14 @@ Open a Run in the browser to inspect its composition, Sources and Results.
 
   hypit studio --run <build.svrun> [--runtime <hypit.runtime.json>]
     [--port <number>] [--workspace <directory>] [--package-root <directory>]
+    [--locale-pack <./language.json | installed-package/language.json>]...
+
+  hypit studio --check-locale <./language.json | installed-package/language.json>
+    [--package-root <directory>]
+
+Language packs are explicit JSON data. Relative files use the current directory;
+package exports resolve from --package-root (the project by default).
+--check-locale lists missing translations and unknown IDs without opening a Run.
 
 Relative command-line paths start at the current directory; --workspace selects
 the project, without rebasing those paths. Otherwise the nearest package.json
@@ -24,9 +32,9 @@ function invalidArguments(message: string): never {
   throw new Error(`${message}. See hypit studio --help.`);
 }
 
-function argumentsByName(argv: readonly string[]): ReadonlyMap<string, string> {
-  const accepted = new Set(["run", "runtime", "port", "workspace", "package-root"]);
-  const result = new Map<string, string>();
+function argumentsByName(argv: readonly string[]): ReadonlyMap<string, readonly string[]> {
+  const accepted = new Set(["run", "runtime", "port", "workspace", "package-root", "locale-pack", "check-locale"]);
+  const result = new Map<string, string[]>();
   for (let index = 0; index < argv.length; index += 2) {
     const flag = argv[index];
     const value = argv[index + 1];
@@ -35,7 +43,7 @@ function argumentsByName(argv: readonly string[]): ReadonlyMap<string, string> {
     }
     const name = flag.slice(2);
     if (!accepted.has(name)) invalidArguments(`Unknown option --${name}`);
-    result.set(name, value);
+    result.set(name, [...result.get(name) ?? [], value]);
   }
   return result;
 }
@@ -47,21 +55,12 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
   }
   const values = argumentsByName(argv[0] === "--" ? argv.slice(1) : argv);
   const invokedFrom = process.env.INIT_CWD ?? process.cwd();
-  const runArgument = values.get("run");
-  if (runArgument === undefined || runArgument.trim().length === 0) invalidArguments("Missing --run");
-  const { createServer } = await import("vite");
-  const { findRuntimeProfile, resolveProjectRoot } = await import("@hypit/cli");
-  const { resolveDistributionPackageImport } = await import("@hypit/package-loader-node");
-  const { videoCliDistribution, videoStudioCompanionPackages } = await import("@hypit/video-cli");
-  const { openStudioBuildLibrary } = await import("./src/build-library.js");
-  const { loadStudioCompanionRegistry } = await import("./src/companion-assembly.js");
-  const { loadStudioDomain } = await import("./src/domain.js");
-  const { loadStudioRun } = await import("./src/run.js");
-  const { studioPlugin } = await import("./src/server.js");
-  const { inspectStudioRun } = await import("./src/studio-preflight.js");
-  const runPath = resolve(invokedFrom, runArgument);
-  const packageRootArgument = values.get("package-root");
-  const workspaceArgument = values.get("workspace");
+  const runArgument = values.get("run")?.at(-1);
+
+  const { findRuntimeProfile, resolveProjectRoot } = await import("@hypit/project-context-node");
+
+  const packageRootArgument = values.get("package-root")?.at(-1);
+  const workspaceArgument = values.get("workspace")?.at(-1);
   const requestedWorkspaceRoot = workspaceArgument === undefined
     ? undefined
     : resolve(invokedFrom, workspaceArgument);
@@ -72,7 +71,26 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
   const packageRoot = packageRootArgument === undefined
     ? workspaceRoot
     : resolve(invokedFrom, packageRootArgument);
-  const runtimeArgument = values.get("runtime");
+  const { describeLanguagePack, loadLanguagePack, studioLanguages, studioLocalizationPlugin } = await import("./src/localization-node.js");
+  const checkLocale = values.get("check-locale")?.at(-1);
+  if (checkLocale !== undefined) {
+    io.write(describeLanguagePack(await loadLanguagePack(checkLocale, invokedFrom, packageRoot)) + "\n");
+    return;
+  }
+  if (runArgument === undefined || runArgument.trim().length === 0) invalidArguments("Missing --run");
+  const runPath = resolve(invokedFrom, runArgument);
+  const { createServer } = await import("vite");
+  const { resolveDistributionPackageImport } = await import("@hypit/package-loader-node");
+  const { videoCliDistribution, videoStudioCompanionPackages } = await import("@hypit/video-cli");
+  const { openStudioBuildLibrary } = await import("./src/build-library.js");
+  const { loadStudioCompanionRegistry } = await import("./src/companion-assembly.js");
+  const { loadStudioDomain } = await import("./src/domain.js");
+  const { loadStudioRun } = await import("./src/run.js");
+  const { studioPlugin } = await import("./src/server.js");
+  const { studioFeedbackPlugin } = await import("./src/feedback-server.js");
+  const { inspectStudioRun } = await import("./src/studio-preflight.js");
+  const languages = await studioLanguages(values.get("locale-pack") ?? [], invokedFrom, packageRoot);
+  const runtimeArgument = values.get("runtime")?.at(-1);
   const selectedRuntime = runtimeArgument === undefined
     ? await findRuntimeProfile(workspaceRoot)
     : undefined;
@@ -88,7 +106,7 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
     ...(packageRoot === workspaceRoot ? [] : [`  Package root       ${packageRoot}`]),
     "",
   ].join("\n"));
-  const port = Number(values.get("port") ?? "5179");
+  const port = Number(values.get("port")?.at(-1) ?? "5179");
   if (!Number.isSafeInteger(port) || port <= 0) invalidArguments("--port must be a positive integer");
 
   const distributionPackageRoot = videoCliDistribution.packageRoot ?? resolve(here, "../..");
@@ -136,7 +154,7 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
       // available for Source and material previews.
       fs: { allow: [workspaceRoot, packageRoot, distributionPackageRoot, here] },
     },
-    plugins: [distributionImports, studioPlugin({
+    plugins: [distributionImports, studioLocalizationPlugin(languages), studioFeedbackPlugin(workspaceRoot, runPath), studioPlugin({
       source,
       runPath,
       workspaceRoot,
@@ -152,4 +170,5 @@ export async function runStudio(argv: readonly string[], io: Pick<CliIo, "write"
   });
   await server.listen();
   server.printUrls();
+  for (const url of server.resolvedUrls?.local ?? []) io.write(`  Comments           ${url}#comments\n`);
 }