@hyperframes/studio 0.7.61 → 0.7.62

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

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
-import { computeDragPreview, type DragPreviewContext } from "./timelineClipDragPreview";
+import {
+  computeDragPreview,
+  computeResizePreview,
+  type DragPreviewContext,
+} from "./timelineClipDragPreview";
 import type { DraggedClipState } from "./timelineClipDragTypes";
 import { RULER_H, TRACKS_TOP_PAD, TRACK_H } from "./timelineLayout";
 
@@ -142,3 +146,31 @@ describe("computeDragPreview — plain horizontal drag never arms a phantom inse
     expect(next.insertRow).toBe(0); // a new TOP track will be created on drop
   });
 });
+
+describe("computeResizePreview — composition source continuity", () => {
+  it("seeds a legacy composition offset and advances it at playback rate", () => {
+    const element = {
+      ...clip("comp", 0, 2, 4, 0, "div"),
+      kind: "composition" as const,
+      playbackRate: 2,
+    };
+    const result = computeResizePreview(
+      {
+        element,
+        edge: "start",
+        originClientX: 0,
+        previewStart: 2,
+        previewDuration: 4,
+        started: true,
+      },
+      100,
+      { scroll: fakeScroll(), pps: 100, buildSnapTargets: () => [] },
+    );
+
+    expect(result).toMatchObject({
+      previewStart: 3,
+      previewDuration: 3,
+      previewPlaybackStart: 2,
+    });
+  });
+});

package/src/player/components/timelineClipDragPreview.ts

@@ -221,7 +221,8 @@ export function computeResizePreview(
         )
       : Number.POSITIVE_INFINITY;
   const normalizedTag = resize.element.tag.toLowerCase();
-  const canSeedPlaybackStart = normalizedTag === "audio" || normalizedTag === "video";
+  const canSeedPlaybackStart =
+    resize.element.kind === "composition" || normalizedTag === "audio" || normalizedTag === "video";
   const playbackRate = Math.max(resize.element.playbackRate ?? 1, 0.1);
   // Trim limit = available source media only — NOT the composition length.
   // Duration is content-driven (the comp grows/shrinks to fit on commit), so

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

@@ -308,6 +308,24 @@ describe("resolveZoneDropPlacement (the whole drop decision, no same-track overl
     ).toEqual({ track: 2, insertRow: null });
   });
 
+  it("crosses an occupied aim instead of snapping the dragged clip back to its origin", () => {
+    expect(
+      resolveZoneDropPlacement({
+        ...base,
+        elements: [el("a", 0, 0, 5), el("b", 1, 0, 5), el("x", 2, 0, 5)],
+        desiredTrack: 1,
+      }),
+    ).toEqual({ track: 1, insertRow: 1 });
+
+    expect(
+      resolveZoneDropPlacement({
+        ...base,
+        elements: [el("x", 0, 0, 5), el("b", 1, 0, 5), el("a", 2, 0, 5)],
+        desiredTrack: 1,
+      }),
+    ).toEqual({ track: 1, insertRow: 2 });
+  });
+
   it("auto-creates a new track when EVERY lane in the zone is occupied at that time", () => {
     expect(
       resolveZoneDropPlacement({

package/src/player/components/timelineCollision.ts

@@ -115,7 +115,10 @@ export function resolveZoneDropPlacement(input: {
     trackOrder: zoneTracks,
     excludeKey: dragKey,
   });
-  if (placement.needsInsert) {
+  const originTrack = elements.find((element) => (element.key ?? element.id) === dragKey)?.track;
+  const snappedBackToOrigin =
+    originTrack != null && desired !== originTrack && placement.track === originTrack;
+  if (placement.needsInsert || snappedBackToOrigin) {
     const desiredRow = order.indexOf(desired);
     if (desiredRow < 0) {
       return {
@@ -123,14 +126,14 @@ export function resolveZoneDropPlacement(input: {
         insertRow: outOfRangeZoneInsertRow(order, zoneTracks, audioRow, desired),
       };
     }
-    // Prefer the gap NEAREST the pointer: insert above the aimed row when the
-    // pointer sits in its upper half AND that boundary is in the clip's own zone
-    // (else the visual/audio split would be crossed) — otherwise fall to below.
-    // `desired` is clamped into the zone, so both boundaries stay in-zone.
-    const insertRow =
-      preferInsertAbove && isInsertAllowedForZone(desiredRow, audioRow, isAudio)
-        ? desiredRow
-        : desiredRow + 1;
+    // When collision fallback found only the origin lane, insert on the far side
+    // of the aimed lane so normalization cannot turn the gesture into a no-op.
+    // Otherwise prefer the gap nearest the pointer, preserving normal insertion.
+    const originRow = originTrack == null ? -1 : order.indexOf(originTrack);
+    const insertAbove = snappedBackToOrigin
+      ? originRow > desiredRow
+      : preferInsertAbove && isInsertAllowedForZone(desiredRow, audioRow, isAudio);
+    const insertRow = insertAbove ? desiredRow : desiredRow + 1;
     return { track: desired, insertRow };
   }
   return { track: placement.track, insertRow: null };

package/src/player/components/timelineDragDrop.ts

@@ -1,5 +1,9 @@
 import { useCallback, useState, type RefObject } from "react";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
+import {
+  parseTimelineCompositionPayload,
+  TIMELINE_COMPOSITION_MIME,
+} from "../../utils/timelineCompositionDrop";
 import { usePlayerStore } from "../store/playerStore";
 import { TRACK_H, resolveTimelineAssetDrop } from "./timelineLayout";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
@@ -32,6 +36,11 @@ function applyJsonDropPayload(
   }
 }
 
+function resolveDropStart(usePointerStart: boolean, pointerStart: number): number {
+  if (usePointerStart) return pointerStart;
+  return Math.max(0, usePlayerStore.getState().currentTime);
+}
+
 /**
  * Dropping an asset/file/block onto the timeline places it at the PLAYHEAD —
  * start is the current playhead time, only the track comes from the drop y.
@@ -48,6 +57,7 @@ export function useTimelineAssetDrop({
   onFileDrop,
   onAssetDrop,
   onBlockDrop,
+  onCompositionDrop,
 }: UseTimelineAssetDropOptions) {
   const [isDragOver, setIsDragOver] = useState(false);
 
@@ -56,7 +66,8 @@ export function useTimelineAssetDrop({
     const hasFiles = types.includes("Files");
     const hasAsset = types.includes(TIMELINE_ASSET_MIME);
     const hasBlock = types.includes(TIMELINE_BLOCK_MIME);
-    if (!hasFiles && !hasAsset && !hasBlock) return;
+    const hasComposition = types.includes(TIMELINE_COMPOSITION_MIME);
+    if (!hasFiles && !hasAsset && !hasBlock && !hasComposition) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
     setIsDragOver(true);
@@ -65,11 +76,10 @@ export function useTimelineAssetDrop({
   const clearDropPreview = useCallback(() => setIsDragOver(false), []);
 
   const resolveDropPlacement = useCallback(
-    (clientX: number, clientY: number): TimelinePlacement => {
+    (clientX: number, clientY: number, usePointerStart = false): TimelinePlacement => {
       const scroll = scrollRef.current;
       const rect = scroll?.getBoundingClientRect();
-      // Track comes from the vertical drop position; start is the playhead.
-      const { track } = resolveTimelineAssetDrop(
+      const pointer = resolveTimelineAssetDrop(
         {
           rectLeft: rect?.left ?? 0,
           rectTop: rect?.top ?? 0,
@@ -77,14 +87,17 @@ export function useTimelineAssetDrop({
           scrollTop: scroll?.scrollTop ?? 0,
           pixelsPerSecond: ppsRef.current,
           duration: durationRef.current,
+          clampStartToDuration: !usePointerStart,
           trackHeight: TRACK_H,
           trackOrder: trackOrderRef.current,
         },
         clientX,
         clientY,
       );
-      const start = Math.max(0, usePlayerStore.getState().currentTime);
-      return { start, track };
+      return {
+        start: resolveDropStart(usePointerStart, pointer.start),
+        track: pointer.track,
+      };
     },
     [scrollRef, ppsRef, durationRef, trackOrderRef],
   );
@@ -93,6 +106,14 @@ export function useTimelineAssetDrop({
     (e: React.DragEvent) => {
       e.preventDefault();
       setIsDragOver(false);
+      const compositionPayload = parseTimelineCompositionPayload(
+        e.dataTransfer.getData(TIMELINE_COMPOSITION_MIME),
+      );
+      if (compositionPayload && onCompositionDrop) {
+        const placement = resolveDropPlacement(e.clientX, e.clientY, true);
+        void onCompositionDrop(compositionPayload.sourcePath, placement);
+        return;
+      }
       const placement = resolveDropPlacement(e.clientX, e.clientY);
 
       if (onFileDrop && e.dataTransfer.files.length > 0) {
@@ -109,7 +130,7 @@ export function useTimelineAssetDrop({
         applyJsonDropPayload(blockPayload, (p) => p.name, onBlockDrop, placement);
       }
     },
-    [resolveDropPlacement, onFileDrop, onAssetDrop, onBlockDrop],
+    [resolveDropPlacement, onFileDrop, onAssetDrop, onBlockDrop, onCompositionDrop],
   );
 
   return { isDragOver, handleAssetDragOver, handleAssetDrop, clearDropPreview };

package/src/player/components/timelineEditCapabilities.ts

@@ -6,11 +6,13 @@ export interface TimelineEditCapabilities {
 
 function isDeterministicTimelineWindow(input: {
   tag: string;
+  kind?: "video" | "audio" | "image" | "element" | "composition";
   compositionSrc?: string;
   playbackStartAttr?: "media-start" | "playback-start";
   sourceDuration?: number;
 }): boolean {
-  if (input.compositionSrc || input.playbackStartAttr != null) return true;
+  if (input.kind === "composition" || input.compositionSrc || input.playbackStartAttr != null)
+    return true;
   if (
     input.sourceDuration != null &&
     Number.isFinite(input.sourceDuration) &&
@@ -27,6 +29,7 @@ export function hasPatchableTimelineTarget(input: { domId?: string; selector?: s
 
 export function getTimelineEditCapabilities(input: {
   tag: string;
+  kind?: "video" | "audio" | "image" | "element" | "composition";
   duration: number;
   domId?: string;
   selector?: string;

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

@@ -53,6 +53,16 @@ describe("buildTimelineGroupResizeMembers (legacy 36413da7f semantics)", () => {
     ]);
   });
 
+  it("seeds legacy composition offsets and advances them at playback rate", () => {
+    const a = el("a", { kind: "composition", tag: "div", start: 2, playbackRate: 2 });
+    const b = el("b", { kind: "composition", tag: "div", start: 5, playbackRate: 0.5 });
+    const members = buildTimelineGroupResizeMembers([a, b], keys("a", "b"), "a", "start")!;
+
+    expect(members.map((member) => member.playbackStart)).toEqual([0, 0]);
+    const changes = resolveTimelineGroupResizeChanges(members, "start", 1);
+    expect(changes.map((change) => change.playbackStart)).toEqual([2, 0.5]);
+  });
+
   it("does not seed playbackStart on the END edge", () => {
     const grabbed = el("a", { tag: "audio", start: 0, duration: 2 });
     const b = el("b", { tag: "audio", start: 3, duration: 2 });

package/src/player/components/timelineGroupEditing.ts

@@ -181,14 +181,15 @@ function elementKey(element: TimelineElement): string {
   return element.key ?? element.id;
 }
 
-function isMediaTimelineElement(element: TimelineElement): boolean {
+function hasSourcePlaybackOffset(element: TimelineElement): boolean {
   const tag = element.tag.toLowerCase();
-  return tag === "audio" || tag === "video";
+  return element.kind === "composition" || tag === "audio" || tag === "video";
 }
 
 function canTrimEdge(element: TimelineElement, edge: TimelineGroupResizeEdge): boolean {
   const caps = getTimelineEditCapabilities({
     tag: element.tag,
+    kind: element.kind,
     duration: element.duration,
     domId: element.domId,
     selector: element.selector,
@@ -228,7 +229,7 @@ export function buildTimelineGroupResizeMembers(
     start: element.start,
     duration: element.duration,
     playbackStart:
-      edge === "start" && isMediaTimelineElement(element)
+      edge === "start" && hasSourcePlaybackOffset(element)
         ? (element.playbackStart ?? 0)
         : element.playbackStart,
     playbackRate: element.playbackRate,

package/src/player/components/timelineLaneMoveRefresh.ts

@@ -0,0 +1,14 @@
+export interface LaneMoveRefreshDeps {
+  refreshAfterLaneMove?: () => void;
+}
+
+/** Refresh only after the complete lane transaction persisted successfully. */
+export function refreshAfterDurableLaneMove(
+  pending: Promise<boolean>,
+  deps: LaneMoveRefreshDeps,
+): Promise<boolean> {
+  return pending.then((persisted) => {
+    if (persisted) deps.refreshAfterLaneMove?.();
+    return persisted;
+  });
+}

package/src/player/components/timelineLayout.ts

@@ -383,6 +383,7 @@ export function resolveTimelineAssetDrop(
     scrollTop: number;
     pixelsPerSecond: number;
     duration: number;
+    clampStartToDuration?: boolean;
     trackHeight: number;
     trackOrder: number[];
   },
@@ -391,9 +392,10 @@ export function resolveTimelineAssetDrop(
 ): { start: number; track: number } {
   const x = clientX - input.rectLeft + input.scrollLeft - GUTTER - TRACKS_LEFT_PAD;
   const contentY = clientY - input.rectTop + input.scrollTop;
+  const pointerStart = Math.round((x / Math.max(input.pixelsPerSecond, 1)) * 100) / 100;
   const start = Math.max(
     0,
-    Math.min(input.duration, Math.round((x / Math.max(input.pixelsPerSecond, 1)) * 100) / 100),
+    input.clampStartToDuration === false ? pointerStart : Math.min(input.duration, pointerStart),
   );
   // Row from the shared row→y inverse so the top pad is honoured; a drop in the
   // pad above the first lane floors to row 0, a drop in the bottom pad rounds

package/src/player/components/timelineZMirror.ts

@@ -1,7 +1,7 @@
 import type { TimelineElement } from "../store/playerStore";
 import { classifyZone } from "./timelineZones";
 import { isLaneFree, timeRangesOverlap } from "./timelineCollision";
-import { authoredTrackForLane, sameSourceFile } from "./timelineClipDragCommit";
+import { authoredTrackForLane, sameSourceFile } from "./timelineAuthoredTrack";
 import { samePaintScope } from "./timelineStackingSync";
 
 /**

package/src/player/components/useTimelineClipDrag.ts

@@ -77,6 +77,7 @@ interface UseTimelineClipDragInput {
    */
   readZIndex?: (element: TimelineElement) => number;
   onStackingPatches?: (patches: StackingPatch[]) => Promise<unknown> | void;
+  refreshAfterLaneMove?: () => void;
 }
 
 export function useTimelineClipDrag({
@@ -93,6 +94,7 @@ export function useTimelineClipDrag({
   setRangeSelectionRef,
   readZIndex,
   onStackingPatches,
+  refreshAfterLaneMove,
 }: UseTimelineClipDragInput) {
   const updateElement = usePlayerStore((s) => s.updateElement);
   const rawBeatTimes = usePlayerStore((s) => s.beatAnalysis?.beatTimes ?? EMPTY_BEAT_TIMES);
@@ -213,6 +215,8 @@ export function useTimelineClipDrag({
   readZIndexRef.current = readZIndex;
   const onStackingPatchesRef = useRef(onStackingPatches);
   onStackingPatchesRef.current = onStackingPatches;
+  const refreshAfterLaneMoveRef = useRef(refreshAfterLaneMove);
+  refreshAfterLaneMoveRef.current = refreshAfterLaneMove;
 
   const clipDragScrollRaf = useRef(0);
   const clipDragPointerRef = useRef<{
@@ -499,6 +503,7 @@ export function useTimelineClipDrag({
         // deps (Timeline.tsx). Absent → commitDraggedClipMove skips the z-sync.
         readZIndex: readZIndexRef.current,
         onStackingPatches: onStackingPatchesRef.current,
+        refreshAfterLaneMove: refreshAfterLaneMoveRef.current,
       });
     };
 

package/src/player/components/useTimelineEditPinning.ts

@@ -12,6 +12,7 @@ interface UseTimelineEditPinningInput {
   onFileDrop: TimelineDropCallbacks["onFileDrop"];
   onAssetDrop: TimelineDropCallbacks["onAssetDrop"];
   onBlockDrop: TimelineDropCallbacks["onBlockDrop"];
+  onCompositionDrop: TimelineDropCallbacks["onCompositionDrop"];
 }
 
 // Wrap every mutating timeline edit so the zoom pins to the current on-screen
@@ -29,6 +30,7 @@ export function useTimelineEditPinning({
   onFileDrop,
   onAssetDrop,
   onBlockDrop,
+  onCompositionDrop,
 }: UseTimelineEditPinningInput) {
   const pinTimelineZoom = usePlayerStore((s) => s.pinTimelineZoom);
   // Pin the timeline zoom to the current on-screen scale on the FIRST edit, so a
@@ -106,6 +108,15 @@ export function useTimelineEditPinning({
       }),
     [onBlockDrop, pinZoomBeforeEdit],
   );
+  const pinnedOnCompositionDrop = useMemo(
+    () =>
+      onCompositionDrop &&
+      ((...args: Parameters<typeof onCompositionDrop>) => {
+        pinZoomBeforeEdit();
+        return onCompositionDrop(...args);
+      }),
+    [onCompositionDrop, pinZoomBeforeEdit],
+  );
 
   return {
     pinZoomBeforeEdit,
@@ -117,5 +128,6 @@ export function useTimelineEditPinning({
     pinnedOnFileDrop,
     pinnedOnAssetDrop,
     pinnedOnBlockDrop,
+    pinnedOnCompositionDrop,
   };
 }

package/src/player/hooks/useExpandedTimelineElements.test.ts

@@ -48,9 +48,51 @@ describe("buildExpandedElements", () => {
     const out = buildExpandedElements(elements, manifest, parentMap, "s3", "s3");
     const child = out.find((e) => e.domId === "stat-1")!;
     expect(child.expandedParentStart).toBe(16);
+    expect(child.expandedHostKey).toBe("s3");
     expect(child.sourceFile).toBe("stats.html");
   });
 
+  it("keeps repeated same-source composition hosts as distinct move identities", () => {
+    const elements = [
+      el({
+        id: "host-a",
+        key: "index.html#host-a",
+        start: 0,
+        duration: 5,
+        compositionSrc: "scene.html",
+      }),
+      el({
+        id: "host-b",
+        key: "index.html#host-b",
+        start: 8,
+        duration: 5,
+        compositionSrc: "scene.html",
+      }),
+    ];
+    const manifest = [
+      clip({ id: "host-a", start: 0, duration: 5, compositionSrc: "scene.html" }),
+      clip({ id: "child-a", start: 1, duration: 2 }),
+      clip({ id: "host-b", start: 8, duration: 5, compositionSrc: "scene.html" }),
+      clip({ id: "child-b", start: 9, duration: 2 }),
+    ];
+    const parentMap = new Map([
+      ["child-a", "host-a"],
+      ["child-b", "host-b"],
+    ]);
+
+    const childA = buildExpandedElements(elements, manifest, parentMap, "host-a", "host-a").find(
+      (element) => element.domId === "child-a",
+    );
+    const childB = buildExpandedElements(elements, manifest, parentMap, "host-b", "host-b").find(
+      (element) => element.domId === "child-b",
+    );
+
+    expect(childA?.sourceFile).toBe("scene.html");
+    expect(childB?.sourceFile).toBe("scene.html");
+    expect(childA?.expandedHostKey).toBe("index.html#host-a");
+    expect(childB?.expandedHostKey).toBe("index.html#host-b");
+  });
+
   // fallow-ignore-next-line code-duplication
   it("rebases a 2-level child onto its NESTED host, not the top-level scene", () => {
     // top host A@10 (a.html) embeds host B@12 (b.html); child C lives in b.html.

package/src/player/hooks/useExpandedTimelineElements.ts

@@ -133,6 +133,7 @@ function buildChildElements(
   siblings: ClipManifestClip[],
   display: DisplayBounds,
   editBasis: { start: number; sourceFile: string | undefined },
+  expandedHostKey: string,
 ): TimelineElement[] {
   const result: TimelineElement[] = [];
   for (const child of siblings) {
@@ -182,6 +183,7 @@ function buildChildElements(
       authoredTrack: base.authoredTrack,
       stackingContextId: base.stackingContextId,
       expandedParentStart: editBasis.start,
+      expandedHostKey,
       domId,
       selector,
       sourceFile: editBasis.sourceFile,
@@ -260,6 +262,7 @@ export function buildExpandedElements(
       track: topLevelElement.track,
     },
     editBasis,
+    parentKey,
   );
   if (expanded.length === 0) return filterToTopLevel(elements, parentMap);
 

package/src/player/lib/playbackTypes.ts

@@ -46,6 +46,8 @@ export interface ClipManifestClip {
   compositionAncestors?: string[];
   parentCompositionId: string | null;
   compositionSrc: string | null;
+  playbackStart?: number;
+  playbackRate?: number;
   assetUrl: string | null;
 }
 

package/src/player/lib/timelineDOM.test.ts

@@ -110,7 +110,65 @@ describe("parseTimelineFromDOM — hfId from data-hf-id", () => {
   });
 });
 
+describe("parseTimelineFromDOM — canonical playback rate", () => {
+  it.each([
+    ["10", 5],
+    ["0.01", 0.1],
+  ])("clamps authored rate %s to %s for trim and split math", (authored, expected) => {
+    const doc = makeDoc(`
+      <div data-composition-id="root">
+        <div id="nested" class="clip" data-composition-src="scene.html"
+          data-start="0" data-duration="5" data-playback-rate="${authored}"></div>
+      </div>
+    `);
+
+    const nested = parseTimelineFromDOM(doc, 10).find((entry) => entry.domId === "nested");
+
+    expect(nested?.playbackRate).toBe(expected);
+  });
+});
+
 describe("createTimelineElementFromManifestClip — source-scoped selector identity", () => {
+  it("preserves composition kind and source timing on first translation", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="root" data-composition-file="index.html">
+        <div id="host" data-composition-id="scene" data-composition-src="scene.html"
+          data-playback-start="1.5" data-playback-rate="2"></div>
+      </div>
+    `);
+    const host = doc.getElementById("host");
+
+    const element = createTimelineElementFromManifestClip({
+      clip: {
+        id: "host",
+        label: "Scene",
+        kind: "composition",
+        tagName: "div",
+        start: 2,
+        duration: 4,
+        track: 0,
+        compositionId: "scene",
+        parentCompositionId: "root",
+        compositionSrc: "scene.html",
+        playbackStart: 1.5,
+        playbackRate: 2,
+        assetUrl: null,
+      },
+      fallbackIndex: 0,
+      doc,
+      hostEl: host,
+    });
+
+    expect(element).toMatchObject({
+      kind: "composition",
+      compositionSrc: "scene.html",
+      playbackStart: 1.5,
+      playbackStartAttr: "playback-start",
+      playbackRate: 2,
+      domId: "host",
+    });
+  });
+
   it("ignores an index.html duplicate when indexing a scene.html selector", () => {
     const doc = makeDoc(`
       <div data-composition-id="root" data-composition-file="index.html">

package/src/player/lib/timelineDOM.ts

@@ -111,6 +111,7 @@ export function createTimelineElementFromManifestClip(params: {
     id: identity.id,
     label,
     key: identity.key,
+    kind: clip.kind,
     tag: resolveClipTag(clip),
     start: clip.start,
     duration: clip.duration,
@@ -129,6 +130,8 @@ export function createTimelineElementFromManifestClip(params: {
     selector,
     selectorIndex,
     sourceFile,
+    playbackStart: clip.playbackStart,
+    playbackRate: clip.playbackRate,
   };
 
   if (hostEl) {
@@ -140,6 +143,8 @@ export function createTimelineElementFromManifestClip(params: {
   }
   if (clip.assetUrl) entry.src = clip.assetUrl;
   if (clip.kind === "composition" && clip.compositionId) {
+    entry.playbackStart ??= 0;
+    entry.playbackRate ??= 1;
     let resolvedSrc = clip.compositionSrc;
     if (!resolvedSrc) {
       hostEl =
@@ -293,6 +298,14 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
       id: identity.id,
       label,
       key: identity.key,
+      kind:
+        compId && compId !== rootComp?.getAttribute("data-composition-id")
+          ? "composition"
+          : tagLower === "video" || tagLower === "audio"
+            ? tagLower
+            : tagLower === "img"
+              ? "image"
+              : "element",
       tag: tagLower,
       start,
       duration: dur,
@@ -308,13 +321,13 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
     };
 
     const mediaEl = resolveMediaElement(el);
+    applyMediaMetadataFromElement(entry, el);
     if (mediaEl) {
       if (mediaEl.tagName === "IMG") {
         entry.tag = "img";
       }
       const vol = el.getAttribute("data-volume") ?? mediaEl.getAttribute("data-volume");
       if (vol) entry.volume = parseFloat(vol);
-      applyMediaMetadataFromElement(entry, el);
       // Override AFTER the helper (which sets the raw relative attribute) so the
       // resolved absolute URL wins — the Studio can then fetch the asset
       // regardless of whether the attribute value was relative or absolute.
@@ -345,6 +358,10 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
         entry.tag = "video";
       }
     }
+    if (entry.kind === "composition") {
+      entry.playbackStart ??= 0;
+      entry.playbackRate ??= 1;
+    }
 
     els.push(entry);
   });