@hyperframes/studio 0.8.62 → 0.8.64

package/src/hooks/useSdkSession.lifecycle.test.tsx

@@ -440,7 +440,9 @@ describe("useSdkSession unavailable telemetry", () => {
   // so this is what "the composition genuinely is not there" looks like on the
   // wire — previously indistinguishable from a broken request. The shim and a
   // real 0-byte file are the same response, hence the name.
-  it("separates a file that is not on disk", async () => {
+  // An older server sends no `missing` field, so the combined label stays —
+  // rather than guessing one of the two and quietly corrupting the series.
+  it("keeps the combined label when the server does not say which empty this is", async () => {
     vi.stubGlobal(
       "fetch",
       vi.fn(async () => ({ ok: true, json: async () => ({ content: "" }) }) as Response),
@@ -459,6 +461,81 @@ describe("useSdkSession unavailable telemetry", () => {
     await act(async () => root.unmount());
   });
 
+  // `missing: true` is the route's shim — nothing resolved at that path.
+  it("reports a file the server could not find as absent", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        async () => ({ ok: true, json: async () => ({ content: "", missing: true }) }) as Response,
+      ),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "absent",
+      path_in_tree: null,
+    });
+    await act(async () => root.unmount());
+  });
+
+  // `missing: false` with empty content is a real 0-byte file on disk — a
+  // placeholder somebody created and has not written yet, not a bad path.
+  it("reports a real zero-byte file separately from an absent one", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        async () => ({ ok: true, json: async () => ({ content: "", missing: false }) }) as Response,
+      ),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "empty_file",
+      path_in_tree: null,
+    });
+    await act(async () => root.unmount());
+  });
+
+  // A 200 carrying HTML is an SPA fallback or a proxy answering in the route's
+  // place. Before this, `res.json()` rejected outside any catch and the outer
+  // catch filed it as `stage: "open"` — blaming the user's composition for a
+  // response the composition had nothing to do with.
+  it("reports a non-JSON 200 as a read failure, not a composition parse failure", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        async () =>
+          ({
+            ok: true,
+            headers: { get: () => "text/html; charset=utf-8" },
+            json: async () => {
+              throw new SyntaxError(`Unexpected token '<', "<!-- /*!"... is not valid JSON`);
+            },
+          }) as unknown as Response,
+      ),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "invalid_json",
+      content_type: "text/html; charset=utf-8",
+    });
+    expect(trackMock).not.toHaveBeenCalledWith(
+      "sdk_session_unavailable",
+      expect.objectContaining({ stage: "open" }),
+    );
+    await act(async () => root.unmount());
+  });
+
   // The graveyard-refuted fix's proposed next step: instrument, don't act.
   // `path_in_tree` separates "genuinely not in the loaded tree" from
   // "concurrent/duplicate open" without deciding anything on Studio's behalf.

package/src/hooks/useSdkSession.ts

@@ -35,16 +35,46 @@ import { addExternalFileReloadListener } from "./externalFileReloadBus";
  * before it left the browser — CSP `connect-src`, Private Network Access, an
  * extension rewriting `fetch` (rejects near-instantly, tab stays visible and
  * alive). Telemetry before this change could not tell the two apart.
+ *
+ * `absent` and `empty_file` split what `absent_or_empty` could not: the route
+ * answers `content: ""` both for a file it cannot find (the `optional=1` shim)
+ * and for a real 0-byte one, so the single label covered a composition nobody
+ * has written yet AND a path that does not resolve on this server. The route
+ * now marks the shim with `missing: true`. A server without that field still
+ * lands in `absent_or_empty`, so the old series stays honest rather than
+ * silently folding into one of the new ones.
+ *
+ * Measured on 0.8.62 before the split: 75 tabs hit this class and not one of
+ * them ever landed an SDK edit afterwards — it is terminal for the tab, while
+ * the tab itself keeps playing back and navigating, so nothing surfaces.
+ *
+ * `invalid_json` is a 200 whose body is not JSON at all — in production, an
+ * HTML page (`Unexpected token '<', "<!-- /*!"...`), i.e. an SPA fallback or a
+ * proxy answering in the route's place. `res.json()` rejected outside any
+ * catch until now, so it escaped this function and the effect's outer catch
+ * filed it as `stage: "open"` — which asserts the COMPOSITION failed to parse.
+ * Third label to make that same wrong claim, after `network` (#4240) and the
+ * fetch-rejection split; this one is the response shape, not the composition.
  */
 type ProjectFileReadFailure =
   | { ok: false; reason: "unsafe_path" }
   | { ok: false; reason: "http_error"; status: number; why?: string }
   | { ok: false; reason: "missing_content" }
   | { ok: false; reason: "absent_or_empty" }
+  | { ok: false; reason: "absent" }
+  | { ok: false; reason: "empty_file" }
+  | { ok: false; reason: "invalid_json"; contentType: string }
   | { ok: false; reason: "network"; elapsedMs: number; hidden: boolean };
 
 type ProjectFileReadResult = { ok: true; content: string } | ProjectFileReadFailure;
 
+/** The three ways a 200 can carry no composition — old combined label plus its split. */
+const EMPTY_READ_REASONS = new Set<ProjectFileReadFailure["reason"]>([
+  "absent_or_empty",
+  "absent",
+  "empty_file",
+]);
+
 /**
  * Record a read that produced no usable content, and answer which project — if
  * any — the failure identifies as unreachable.
@@ -73,12 +103,15 @@ function reportReadFailure(
     reason: read.reason,
     ...(read.reason === "http_error" ? { status: read.status, why: read.why } : {}),
     ...(read.reason === "network" ? { elapsed_ms: read.elapsedMs, hidden: read.hidden } : {}),
-    // Only meaningful for `absent_or_empty` — the graveyard-refuted "clear
+    ...(read.reason === "invalid_json" ? { content_type: read.contentType } : {}),
+    // Only meaningful for the empty-read reasons — the graveyard-refuted "clear
     // activeCompPath when it's not in the tree" fix's proposed next step,
     // scoped to instrumentation only. `null` while the tree hasn't loaded
     // yet: a false-negative there would read as "genuinely absent" when it is
-    // really "haven't looked".
-    ...(read.reason === "absent_or_empty" ? { path_in_tree: pathInTree } : {}),
+    // really "haven't looked". Carried on all three so the split keeps the
+    // signal that made it worth splitting: every measured case so far is
+    // `path_in_tree: true`, a file the tree lists and this read cannot get.
+    ...(EMPTY_READ_REASONS.has(read.reason) ? { path_in_tree: pathInTree } : {}),
   });
   if (read.reason !== "http_error") return null;
   return read.status === 404 ? projectId : null;
@@ -118,6 +151,30 @@ async function httpReadFailureWhy(res: Response): Promise<string | undefined> {
   return typeof body?.why === "string" ? body.why : undefined;
 }
 
+interface ProjectFileBody {
+  content?: string;
+  /** Present only from a server that separates its shim from a real 0-byte file. */
+  missing?: boolean;
+}
+
+/**
+ * Decide what a 200 with a JSON body actually delivered.
+ *
+ * `optional=1` answers a missing file with 200 + `content: ""`, so a non-string
+ * content is a response shape we did not expect, not absence. An empty string
+ * parses into a session with no elements, which declines every edit wholesale —
+ * not a session worth opening — and `missing` is the route saying which of the
+ * two empties it was. Without that field (older server) the combined label
+ * stands rather than guessing one and corrupting the series.
+ */
+function classifyProjectFileBody(data: ProjectFileBody): ProjectFileReadResult {
+  if (typeof data.content !== "string") return { ok: false, reason: "missing_content" };
+  if (data.content !== "") return { ok: true, content: data.content };
+  if (data.missing === true) return { ok: false, reason: "absent" };
+  if (data.missing === false) return { ok: false, reason: "empty_file" };
+  return { ok: false, reason: "absent_or_empty" };
+}
+
 /**
  * Read a project file's content (optional read — a missing file is not an
  * error). Replaces the removed SDK http adapter's `read()` — the only thing
@@ -146,16 +203,21 @@ async function readProjectFileOptional(
     const why = await httpReadFailureWhy(res);
     return { ok: false, reason: "http_error", status: res.status, ...(why ? { why } : {}) };
   }
-  const data = (await res.json()) as { content?: string };
-  // `optional=1` answers a missing file with 200 + `content: ""`, so a
-  // non-string here means a response shape we did not expect, not absence.
-  if (typeof data.content !== "string") return { ok: false, reason: "missing_content" };
-  // An empty body parses into a session with no elements, which declines every
-  // edit wholesale — not a session worth opening. The absent-file shim and a
-  // genuinely 0-byte file are the same 200 on the wire and cannot be told
-  // apart here, hence the name; for a composition it is always the former.
-  if (data.content === "") return { ok: false, reason: "absent_or_empty" };
-  return { ok: true, content: data.content };
+  // A 200 that is not JSON is a different failure from a JSON body missing its
+  // field: it means something other than this route answered — an SPA fallback
+  // or a proxy. Left unguarded, it rejected out of this function entirely and
+  // the effect's outer catch blamed the composition. See the type's comment.
+  let data: ProjectFileBody;
+  try {
+    data = (await res.json()) as ProjectFileBody;
+  } catch {
+    return {
+      ok: false,
+      reason: "invalid_json",
+      contentType: res.headers.get("content-type") ?? "",
+    };
+  }
+  return classifyProjectFileBody(data);
 }
 
 /**

package/src/index.ts

@@ -77,6 +77,16 @@ export {
 export { TimelineProvider, useTimelineContext } from "./player/components/TimelineProvider";
 export type { TimelineTheme } from "./player/components/timelineTheme";
 
+// Clip content thumbnails: used by a host rendering its own timeline lane.
+export { AudioWaveform } from "./player/components/AudioWaveform";
+export type { AudioWaveformProps } from "./player/components/AudioWaveform";
+export { ImageThumbnail } from "./player/components/ImageThumbnail";
+export type { ImageThumbnailProps } from "./player/components/ImageThumbnail";
+export { useRenderClipContent } from "./hooks/useRenderClipContent";
+export type { UseRenderClipContentOptions } from "./hooks/useRenderClipContent";
+export type { ThumbnailPriority } from "./player/lib/thumbnailScheduler";
+export type { TimelineClipRenderContext } from "./player/components/TimelineTypes";
+
 // Host overlays: draw over the preview in composition coordinates (see EditorShellProps.gestureOverlay)
 export { usePreviewCompositionRect } from "./components/editor/usePreviewCompositionRect";
 export type { PreviewCompositionRect } from "./components/editor/usePreviewCompositionRect";

package/src/player/components/AudioWaveform.tsx

@@ -4,7 +4,7 @@ import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
 import { decimatePeaks, loudnessToOpacity } from "./audioWaveformPeaks";
 
-interface AudioWaveformProps {
+export interface AudioWaveformProps {
   audioUrl: string;
   waveformUrl?: string;
   label: string;

package/src/player/components/CompositionThumbnail.test.ts

@@ -137,6 +137,13 @@ describe("CompositionThumbnail", () => {
     const tiles = [...host.querySelectorAll("img")];
     expect(tiles.length).toBeGreaterThan(0);
     expect(tiles.every((tile) => !tile.classList.contains("hidden"))).toBe(true);
+    // Pictures read untinted by default, like video filmstrips; the theme tokens own any dimming.
+    expect(
+      tiles.every((tile) => tile.style.opacity === "var(--timeline-composition-thumbnail-opacity)"),
+    ).toBe(true);
+    expect(tiles[0]?.parentElement?.parentElement?.style.mixBlendMode).toBe(
+      "var(--timeline-composition-thumbnail-blend)",
+    );
   });
 
   it("aborts its scheduled off-DOM image probe when unmounted", async () => {

package/src/player/components/CompositionThumbnail.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useMemo, useRef, useState, type CSSProperties } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
@@ -153,7 +153,11 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
       {value && (
         <div
           className="absolute inset-0 flex"
-          style={{ animation: "hf-thumb-fade 200ms ease-out", mixBlendMode: "lighten" }}
+          style={{
+            animation: "hf-thumb-fade 200ms ease-out",
+            mixBlendMode:
+              "var(--timeline-composition-thumbnail-blend)" as CSSProperties["mixBlendMode"],
+          }}
         >
           {Array.from({ length: frameCount }, (_, index) => (
             <div
@@ -166,7 +170,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
                 alt=""
                 draggable={false}
                 className="absolute inset-0 h-full w-full object-cover"
-                style={{ opacity: 0.7 }}
+                style={{ opacity: "var(--timeline-composition-thumbnail-opacity)" }}
               />
             </div>
           ))}

package/src/player/components/ImageThumbnail.tsx

@@ -5,7 +5,7 @@ import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailSche
 import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
 import { computeThumbnailStrip, probeImageAspect } from "./thumbnailUtils";
 
-interface ImageThumbnailProps {
+export interface ImageThumbnailProps {
   imageSrc: string;
   label: string;
   labelColor: string;

package/src/player/components/TimelineClipJoins.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { deriveTimelineClipJoins } from "./TimelineClipJoins";
+import type { TimelineElement } from "../store/playerStore";
+
+const clip = (id: string, start: number, duration: number): TimelineElement => ({
+  id,
+  tag: "video",
+  start,
+  duration,
+  track: 0,
+});
+
+describe("deriveTimelineClipJoins", () => {
+  it("finds joins in time order, whatever order the clips arrive in", () => {
+    expect(
+      deriveTimelineClipJoins([clip("c", 3, 1), clip("a", 0, 1.5), clip("b", 1.5, 1.5)]),
+    ).toEqual([1.5, 3]);
+  });
+
+  it("treats float noise as a join and a one-frame gap or an overlap as none", () => {
+    expect(deriveTimelineClipJoins([clip("a", 0, 0.1 + 0.2), clip("b", 0.3, 1)])).toEqual([
+      0.1 + 0.2,
+    ]);
+    expect(deriveTimelineClipJoins([clip("a", 0, 1), clip("b", 1 + 1 / 60, 1)])).toEqual([]);
+    expect(deriveTimelineClipJoins([clip("a", 0, 1), clip("b", 0.8, 1)])).toEqual([]);
+  });
+});

package/src/player/components/TimelineClipJoins.tsx

@@ -0,0 +1,52 @@
+import { CLIP_Y } from "./timelineLayout";
+import { sortedLaneClips, TRACK_GAP_EPSILON_S } from "./timelineGaps";
+import type { TimelineElement } from "../store/playerStore";
+
+/** Times where one clip on a row ends exactly where the next begins. */
+export function deriveTimelineClipJoins(elements: readonly TimelineElement[]): number[] {
+  const sorted = sortedLaneClips(elements);
+  const joins: number[] = [];
+  for (let index = 1; index < sorted.length; index += 1) {
+    const previous = sorted[index - 1]!;
+    const end = previous.start + previous.duration;
+    if (Math.abs(sorted[index]!.start - end) < TRACK_GAP_EPSILON_S) joins.push(end);
+  }
+  return joins;
+}
+
+interface TimelineClipJoinsProps {
+  elements: readonly TimelineElement[];
+  pixelsPerSecond: number;
+  rowHeight: number;
+  clipBarHeight?: number;
+  color: string;
+}
+
+/** A hairline in the row colour over each join, so touching clips read as two without moving either. */
+export function TimelineClipJoins({
+  elements,
+  pixelsPerSecond,
+  rowHeight,
+  clipBarHeight,
+  color,
+}: TimelineClipJoinsProps) {
+  const height = clipBarHeight ?? rowHeight - 2 * CLIP_Y;
+  return deriveTimelineClipJoins(elements).map((time) => (
+    <div
+      key={time}
+      data-timeline-clip-join=""
+      aria-hidden="true"
+      className="absolute pointer-events-none"
+      style={{
+        left: time * pixelsPerSecond,
+        top: CLIP_Y,
+        width: 1,
+        height,
+        transform: "translateX(-50%)",
+        background: color,
+        // Over an idle or hovered clip, under the diamonds (6) and a selected clip (10).
+        zIndex: 5,
+      }}
+    />
+  ));
+}

package/src/player/components/TimelineLanes.test.tsx

@@ -462,3 +462,38 @@ describe("TimelineLanes clip thumbnails", () => {
     act(() => view.root.unmount());
   });
 });
+
+describe("TimelineLanes clip joins", () => {
+  const at = (id: string, start: number, duration: number): TimelineElement => ({
+    ...element(id, TRACK_A),
+    start,
+    duration,
+  });
+
+  it("draws one row-coloured hairline where clips touch, and leaves the clips where they are", () => {
+    const view = renderLanes({
+      elements: [at("clip-a", 0, 2), at("clip-b", 2, 1.5), at("clip-c", 4, 1)],
+    });
+
+    const joins = view.host.querySelectorAll<HTMLElement>("[data-timeline-clip-join]");
+    expect(joins).toHaveLength(1);
+    expect(joins[0]?.style.left).toBe("200px");
+    expect(joins[0]?.style.width).toBe("1px");
+    expect(joins[0]?.style.background).toBe(defaultTimelineTheme.rowBackground);
+    const clipB = view.host.querySelector<HTMLElement>('[data-el-id="clip-b"]');
+    expect(clipB?.style.left).toBe("200px");
+    expect(clipB?.style.width).toBe("150px");
+    act(() => view.root.unmount());
+  });
+
+  it("draws no join while a clip is being moved, since the moved clip is drawn elsewhere", () => {
+    const clipA = at("clip-a", 0, 2);
+    const view = renderLanes({
+      elements: [clipA, at("clip-b", 2, 1.5)],
+      draggedClip: { element: clipA, started: true } as DraggedClipState,
+    });
+
+    expect(view.host.querySelectorAll("[data-timeline-clip-join]")).toHaveLength(0);
+    act(() => view.root.unmount());
+  });
+});

package/src/player/components/TimelineLanes.tsx

@@ -32,7 +32,6 @@ import { queryTimelineClipIndex } from "../lib/timelineClipIndex";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
 import { useTimelineKeyboardActor } from "./useTimelineKeyboardActor";
-import { deriveTimelineTransitionSeams } from "./timelineTransitionSeams";
 import { TimelineTransitionOverlays } from "./TimelineTransitionOverlays";
 
 export function TimelineLanes({
@@ -224,9 +223,6 @@ export function TimelineLanes({
           // right only while it is collapsed and the row is nothing but bar.
           const clipBarHeight = rowExpanded ? TRACK_H - 2 * CLIP_Y : undefined;
           const automationElements = els.map(getPreviewElement);
-          const transitionSeams = deriveTimelineTransitionSeams(allTransitionElements).filter(
-            (seam) => seam.incoming.track === trackNum,
-          );
           // Minted here because this is the only place that sees BOTH ends of
           // the disclosure: the caret in the sticky header and the diamond lanes
           // on the canvas. Keyed by display row, not by `trackNum`, which is a
@@ -555,7 +551,10 @@ export function TimelineLanes({
                   })
                 }
                 <TimelineTransitionOverlays
-                  seams={transitionSeams}
+                  transitionElements={allTransitionElements}
+                  track={trackNum}
+                  rowElements={draggedClip?.started ? [] : automationElements}
+                  rowBackground={rowBackground}
                   pixelsPerSecond={pps}
                   rowHeight={rowHeight}
                   clipBarHeight={clipBarHeight}

package/src/player/components/TimelineTransitionOverlays.tsx

@@ -1,30 +1,53 @@
 import { CLIP_Y } from "./timelineLayout";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
-import type { TimelineTransitionSeam } from "./timelineTransitionSeams";
+import type { TimelineElement } from "../store/playerStore";
+import { deriveTimelineTransitionSeams } from "./timelineTransitionSeams";
 import { TimelineTransitionBadge } from "./TimelineTransitionBadge";
+import { TimelineClipJoins } from "./TimelineClipJoins";
 
 interface TimelineTransitionOverlaysProps {
-  seams: readonly TimelineTransitionSeam[];
+  transitionElements: readonly TimelineElement[];
+  track: number;
+  rowElements: readonly TimelineElement[];
+  rowBackground: string;
   pixelsPerSecond: number;
   rowHeight: number;
   clipBarHeight?: number;
 }
 
+/** What a row draws where its clips meet: a hairline at an exact join, a badge over a transition. */
 export function TimelineTransitionOverlays({
-  seams,
+  transitionElements,
+  track,
+  rowElements,
+  rowBackground,
   pixelsPerSecond,
   rowHeight,
   clipBarHeight,
 }: TimelineTransitionOverlaysProps) {
   const top = CLIP_Y + (clipBarHeight ?? rowHeight - 2 * CLIP_Y) / 2;
-  return seams.map((seam) => (
-    <TimelineTransitionBadge
-      key={`${getTimelineElementIdentity(seam.outgoing)}-${getTimelineElementIdentity(seam.incoming)}`}
-      centerPx={seam.centerTime * pixelsPerSecond}
-      top={top}
-      widthPx={Math.min(Math.max(seam.duration * pixelsPerSecond, 24), 32)}
-      outgoingSrc={seam.outgoing.src}
-      incomingSrc={seam.incoming.src}
-    />
-  ));
+  const seams = deriveTimelineTransitionSeams(transitionElements).filter(
+    (seam) => seam.incoming.track === track,
+  );
+  return (
+    <>
+      <TimelineClipJoins
+        elements={rowElements}
+        pixelsPerSecond={pixelsPerSecond}
+        rowHeight={rowHeight}
+        clipBarHeight={clipBarHeight}
+        color={rowBackground}
+      />
+      {seams.map((seam) => (
+        <TimelineTransitionBadge
+          key={`${getTimelineElementIdentity(seam.outgoing)}-${getTimelineElementIdentity(seam.incoming)}`}
+          centerPx={seam.centerTime * pixelsPerSecond}
+          top={top}
+          widthPx={Math.min(Math.max(seam.duration * pixelsPerSecond, 24), 32)}
+          outgoingSrc={seam.outgoing.src}
+          incomingSrc={seam.incoming.src}
+        />
+      ))}
+    </>
+  );
 }

package/src/player/components/timelineDragLanding.ts

@@ -37,15 +37,11 @@ export function layoutAfterTrackInsert(
 } | null {
   const { elements, trackOrder } = deps;
   const editKey = keyOf(element);
-  // Expanded-child rows are synthetic host lanes, not source-file topology.
-  if (element.expandedParentStart != null) return null;
   const targetTrack = insertTrackValue(trackOrder, insertRow);
   // Foreign display rows and the opposite zone must not affect this topology.
   const writableZone = classifyZone(element);
   const writable = (src: TimelineElement): boolean =>
-    sameSourceFile(src, element) &&
-    classifyZone(src) === writableZone &&
-    src.expandedParentStart == null;
+    sameSourceFile(src, element) && classifyZone(src) === writableZone;
   const topologyOrder = [...new Set(elements.filter(writable).map((e) => e.track))].sort(
     (a, b) => a - b,
   );

package/src/player/components/timelineGaps.test.ts

@@ -183,39 +183,9 @@ describe("trackHasGaps", () => {
   });
 });
 
-describe("lane floor (expanded sub-comp children)", () => {
-  const child = (id: string, start: number, duration: number): TimelineElement => ({
-    ...el(id, start, duration),
-    expandedParentStart: 16,
-    sourceFile: "scene.html",
-  });
-
-  it("laneGapFloor is 0 for ordinary lanes and the host window start for child lanes", () => {
+describe("lane floor", () => {
+  it("laneGapFloor is always 0", () => {
     expect(laneGapFloor([el("a", 0, 2)])).toBe(0);
-    expect(laneGapFloor([child("c1", 16.5, 2), child("c2", 20, 2)])).toBe(16);
-  });
-
-  it("compaction lands the first child at the HOST window start, never absolute 0", () => {
-    const lane = [child("c1", 18, 2), child("c2", 22, 2)];
-    expect(resolveAllTrackGaps(lane, undefined, laneGapFloor(lane))).toEqual([
-      { key: "c1", newStart: 16 },
-      { key: "c2", newStart: 18 },
-    ]);
-  });
-
-  it("the leading gap starts at the floor for both close-one and the highlight intervals", () => {
-    const lane = [child("c1", 18, 2)];
-    const floor = laneGapFloor(lane);
-    expect(resolveTrackGapAt(lane, 17, undefined, floor)).toEqual({
-      gapStart: 16,
-      gapEnd: 18,
-      followingKeys: ["c1"],
-    });
-    expect(resolveAllGapIntervals(lane, undefined, floor)).toEqual([{ start: 16, end: 18 }]);
-  });
-
-  it("a child lane contiguous from its host start has no gaps", () => {
-    const lane = [child("c1", 16, 2), child("c2", 18, 2)];
-    expect(trackHasGaps(lane, undefined, laneGapFloor(lane))).toBe(false);
+    expect(laneGapFloor([])).toBe(0);
   });
 });

package/src/player/components/timelineGaps.ts

@@ -17,22 +17,15 @@ export const TRACK_GAP_EPSILON_S = 1e-3;
 
 const keyOf = (e: TimelineElement) => e.key ?? e.id;
 
-/**
- * The lane's time ORIGIN — the earliest start a clip on this lane may take.
- * 0 for ordinary lanes; for a lane of expanded sub-comp children (post-
- * collision-fix a lane is always single-origin) it is the children's host
- * window start (`expandedParentStart`): display times are host-absolute, so
- * compacting toward absolute 0 would drag a child BEFORE its host's window
- * and persist a wrong (even negative) local time.
- */
-export function laneGapFloor(elements: readonly TimelineElement[]): number {
-  return Math.max(0, ...elements.map((e) => e.expandedParentStart ?? 0));
+/** The lane's time ORIGIN — the earliest start a clip on this lane may take. */
+export function laneGapFloor(_elements: readonly TimelineElement[]): number {
+  return 0;
 }
 export const round3 = (v: number) => Math.round(v * 1000) / 1000;
 const endOf = (e: TimelineElement) => e.start + e.duration;
 
 /** Lane clips sorted by start (key as a deterministic tie-break). */
-function sortedLaneClips(elements: readonly TimelineElement[]): TimelineElement[] {
+export function sortedLaneClips(elements: readonly TimelineElement[]): TimelineElement[] {
   return [...elements].sort((a, b) => a.start - b.start || keyOf(a).localeCompare(keyOf(b)));
 }
 

package/src/player/components/timelineZones.test.ts

@@ -67,11 +67,6 @@ describe("isMainTrackElement", () => {
   it("is false for an audio clip even on track 0 (audio-only project has no main track)", () => {
     expect(isMainTrackElement(el("m", "audio", 0))).toBe(false);
   });
-
-  it("is false for an inline-expanded sub-composition child on track 0", () => {
-    const child: TimelineElement = { ...el("c", "video", 0), expandedParentStart: 4 };
-    expect(isMainTrackElement(child)).toBe(false);
-  });
 });
 
 describe("normalizeToZones — CapCut-stable lanes follow the track-index (never z)", () => {

package/src/player/components/timelineZones.ts

@@ -16,10 +16,9 @@ export function classifyZone(el: TimelineElement): TrackZone {
 }
 
 /** The "main track" is a convention, not a schema field: the first
- *  visual-zone display lane, matched only when it actually holds a visual
- *  clip and isn't an inline-expanded sub-composition child. */
+ *  visual-zone display lane, matched only when it actually holds a visual clip. */
 export function isMainTrackElement(el: TimelineElement): boolean {
-  return el.track === 0 && classifyZone(el) === "visual" && el.expandedParentStart == null;
+  return el.track === 0 && classifyZone(el) === "visual";
 }
 
 const keyOf = (el: TimelineElement) => el.key ?? el.id;

package/src/styles/theme.css

@@ -80,6 +80,9 @@
   --timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7);
   --timeline-clip-chip-text: #ffffff;
   --timeline-shortcut-bg: rgba(17, 23, 35, 0.84);
+  /* Composition and text clips draw their frame as it is, like video filmstrips; a host may dim them. */
+  --timeline-composition-thumbnail-opacity: 1;
+  --timeline-composition-thumbnail-blend: normal;
   --timeline-thumbnail-shimmer: linear-gradient(
     90deg,
     rgba(255, 255, 255, 0.02) 0%,