@hyperframes/studio 0.7.46 → 0.7.48

package/src/player/lib/layerOrdering.ts

@@ -0,0 +1,98 @@
+export interface StackingContextDescriptor {
+  parentCompositionId: string | null;
+  compositionAncestors: readonly string[];
+  stackingContextId?: string | null;
+}
+
+export interface ContextOrderItem extends StackingContextDescriptor {
+  zIndex: number;
+}
+
+// fallow-ignore-next-line complexity
+export function getElementZIndex(element: HTMLElement): number {
+  try {
+    const inline = element.style?.zIndex;
+    if (inline && inline !== "auto") {
+      const parsed = parseInt(inline, 10);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+    const win = element.ownerDocument?.defaultView;
+    if (!win) return 0;
+    const value = win.getComputedStyle(element).zIndex;
+    if (value === "auto" || value === "") return 0;
+    const parsed = parseInt(value, 10);
+    return Number.isFinite(parsed) ? parsed : 0;
+  } catch {
+    return 0;
+  }
+}
+
+// fallow-ignore-next-line complexity
+export function hasExplicitZIndex(element: HTMLElement): boolean {
+  try {
+    const inline = element.style?.zIndex;
+    if (inline) return inline !== "auto";
+    const win = element.ownerDocument?.defaultView;
+    if (!win) return false;
+    const value = win.getComputedStyle(element).zIndex;
+    return value !== "auto" && value !== "";
+  } catch {
+    return false;
+  }
+}
+
+export function computeReorderZValues(
+  existingValues: readonly number[],
+  fromIndex: number,
+  toIndex: number,
+): number[] {
+  const reordered = [...existingValues];
+  const [moved] = reordered.splice(fromIndex, 1);
+  reordered.splice(toIndex, 0, moved);
+
+  const sorted = [...existingValues].sort((a, b) => b - a);
+  const hasDupes = sorted.some((v, i) => i > 0 && v === sorted[i - 1]);
+  return hasDupes ? reordered.map((_, i) => reordered.length - i) : sorted;
+}
+
+export function resolveStackingContextKey(item: StackingContextDescriptor): string {
+  return item.stackingContextId ?? item.parentCompositionId ?? item.compositionAncestors[0] ?? "";
+}
+
+function resolveStackingContextDepth(item: StackingContextDescriptor): number {
+  const contextKey = resolveStackingContextKey(item);
+  if (!contextKey) return 0;
+  const index = item.compositionAncestors.indexOf(contextKey);
+  return index >= 0 ? index : 0;
+}
+
+export function resolveContextOrder<T extends ContextOrderItem>(items: readonly T[]): T[] {
+  if (items.length === 0) return [];
+
+  const groups = new Map<
+    string,
+    { firstIndex: number; depth: number; entries: Array<{ item: T; index: number }> }
+  >();
+
+  items.forEach((item, index) => {
+    const key = resolveStackingContextKey(item);
+    const group = groups.get(key);
+    if (group) {
+      group.entries.push({ item, index });
+      return;
+    }
+    groups.set(key, {
+      firstIndex: index,
+      depth: resolveStackingContextDepth(item),
+      entries: [{ item, index }],
+    });
+  });
+
+  return [...groups.values()]
+    .sort((a, b) => a.depth - b.depth || a.firstIndex - b.firstIndex)
+    .flatMap((group) =>
+      group.entries
+        .sort((a, b) => b.item.zIndex - a.item.zIndex || a.index - b.index)
+        .map((entry) => entry.item),
+    );
+}

package/src/player/lib/playbackTypes.ts

@@ -38,9 +38,12 @@ export interface ClipManifestClip {
   start: number;
   duration: number;
   track: number;
+  zIndex?: number;
+  stackingContextId?: string | null;
   kind: "video" | "audio" | "image" | "element" | "composition";
   tagName: string | null;
   compositionId: string | null;
+  compositionAncestors?: string[];
   parentCompositionId: string | null;
   compositionSrc: string | null;
   assetUrl: string | null;

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

@@ -4,6 +4,7 @@ import {
   createTimelineElementFromManifestClip,
   parseTimelineFromDOM,
   createImplicitTimelineLayersFromDOM,
+  buildStandaloneRootTimelineElement,
 } from "./timelineDOM";
 
 function makeDoc(html: string): Document {
@@ -12,6 +13,29 @@ function makeDoc(html: string): Document {
   return d;
 }
 
+function makeLiveDoc(html: string): Document {
+  document.head.innerHTML = "";
+  document.body.innerHTML = html;
+  return document;
+}
+
+function mockComputedZIndex(doc: Document, zIndexById: ReadonlyMap<string, string>): void {
+  const win = doc.defaultView;
+  if (!win) throw new Error("Expected document window");
+  const original = win.getComputedStyle.bind(win);
+  Object.defineProperty(win, "getComputedStyle", {
+    configurable: true,
+    value: (element: Element, pseudoElt?: string | null) => {
+      const style = original(element, pseudoElt);
+      const zIndex = zIndexById.get(element.id);
+      if (zIndex != null) {
+        Object.defineProperty(style, "zIndex", { configurable: true, value: zIndex });
+      }
+      return style;
+    },
+  });
+}
+
 describe("parseTimelineFromDOM — hfId from data-hf-id", () => {
   it("harvests hfId from a data-start element that has data-hf-id", () => {
     const doc = makeDoc(`
@@ -102,6 +126,58 @@ describe("parseTimelineFromDOM — hfId from data-hf-id", () => {
 
     expect(element.hidden).toBe(true);
   });
+
+  it("captures the effective z-index from the live element, not the runtime inline-only value", () => {
+    // The runtime reports inline-only z-index (0 for CSS-rule authored z-index),
+    // which must NOT override the live element's effective z-index — otherwise
+    // the timeline collapses every CSS-styled clip to a z=0 tie and mis-orders.
+    const doc = makeDoc(`
+      <div data-composition-id="root">
+        <div id="hero" class="clip" data-start="0" data-duration="5" style="z-index: 30"></div>
+      </div>
+    `);
+    const hostEl = doc.getElementById("hero");
+
+    const element = createTimelineElementFromManifestClip({
+      clip: {
+        id: "hero",
+        label: "Hero",
+        kind: "element",
+        tagName: "div",
+        start: 0,
+        duration: 5,
+        track: 0,
+        zIndex: 0,
+        compositionId: null,
+        parentCompositionId: null,
+        compositionSrc: null,
+        assetUrl: null,
+      },
+      fallbackIndex: 0,
+      doc,
+      hostEl,
+    });
+
+    expect(element.zIndex).toBe(30);
+    expect(element.hasExplicitZIndex).toBe(true);
+  });
+
+  it("marks parsed inline, CSS-rule, and auto z-index authorship accurately", () => {
+    const doc = makeLiveDoc(`
+      <div data-composition-id="root">
+        <div id="inline" class="clip" data-start="0" data-duration="2" style="z-index: 3"></div>
+        <div id="rule" class="clip" data-start="0" data-duration="2"></div>
+        <div id="auto" class="clip" data-start="0" data-duration="2"></div>
+      </div>
+    `);
+    mockComputedZIndex(doc, new Map([["rule", "12"]]));
+
+    const elements = parseTimelineFromDOM(doc, 10);
+
+    expect(elements.find((el) => el.id === "inline")?.hasExplicitZIndex).toBe(true);
+    expect(elements.find((el) => el.id === "rule")?.hasExplicitZIndex).toBe(true);
+    expect(elements.find((el) => el.id === "auto")?.hasExplicitZIndex).toBe(false);
+  });
 });
 
 describe("createImplicitTimelineLayersFromDOM — hfId from data-hf-id", () => {
@@ -135,4 +211,31 @@ describe("createImplicitTimelineLayersFromDOM — hfId from data-hf-id", () => {
 
     expect(layers).toEqual([]);
   });
+
+  it("marks implicit layer CSS z-index authorship from computed style", () => {
+    const doc = makeLiveDoc(`
+      <div data-composition-id="root">
+        <div id="layer" class="clip"></div>
+      </div>
+    `);
+    mockComputedZIndex(doc, new Map([["layer", "8"]]));
+
+    const layers = createImplicitTimelineLayersFromDOM(doc, 10);
+
+    expect(layers[0]?.zIndex).toBe(8);
+    expect(layers[0]?.hasExplicitZIndex).toBe(true);
+  });
+});
+
+describe("buildStandaloneRootTimelineElement", () => {
+  it("marks the standalone root as auto z-index", () => {
+    const root = buildStandaloneRootTimelineElement({
+      compositionId: "root",
+      tagName: "div",
+      rootDuration: 10,
+      iframeSrc: "/preview/comp/index.html",
+    });
+
+    expect(root?.hasExplicitZIndex).toBe(false);
+  });
 });

package/src/player/lib/timelineDOM.ts

@@ -10,6 +10,7 @@
 
 import type { TimelineElement } from "../store/playerStore";
 import type { ClipManifestClip } from "./playbackTypes";
+import { getElementZIndex, hasExplicitZIndex } from "./layerOrdering";
 import {
   resolveMediaElement,
   applyMediaMetadataFromElement,
@@ -65,6 +66,49 @@ function resolveClipTag(clip: ClipManifestClip): string {
   return clip.tagName || clip.kind || "div";
 }
 
+function resolveDomCompositionContext(
+  element: Element,
+  root: Element | null,
+): {
+  parentCompositionId: string | null;
+  compositionAncestors: string[];
+  stackingContextId: string | null;
+} {
+  const ancestors: string[] = [];
+  let parentCompositionId: string | null = null;
+  let cursor = element.parentElement;
+  while (cursor) {
+    const compositionId = cursor.getAttribute("data-composition-id");
+    if (compositionId) {
+      ancestors.push(compositionId);
+      if (!parentCompositionId && cursor !== root) {
+        parentCompositionId = compositionId;
+      }
+    }
+    cursor = cursor.parentElement;
+  }
+  const compositionAncestors = ancestors.reverse();
+  return {
+    parentCompositionId,
+    compositionAncestors,
+    stackingContextId: parentCompositionId ?? compositionAncestors[0] ?? null,
+  };
+}
+
+function isHTMLElement(element: Element | null): element is HTMLElement {
+  if (!element) return false;
+  const HtmlElementCtor = element.ownerDocument.defaultView?.HTMLElement ?? globalThis.HTMLElement;
+  return typeof HtmlElementCtor !== "undefined" && element instanceof HtmlElementCtor;
+}
+
+function getTimelineElementZIndex(element: Element | null): number | undefined {
+  return isHTMLElement(element) ? getElementZIndex(element) : undefined;
+}
+
+function getTimelineElementHasExplicitZIndex(element: Element | null): boolean {
+  return isHTMLElement(element) ? hasExplicitZIndex(element) : false;
+}
+
 // fallow-ignore-next-line complexity
 export function createTimelineElementFromManifestClip(params: {
   clip: ClipManifestClip;
@@ -86,6 +130,14 @@ export function createTimelineElementFromManifestClip(params: {
   let sourceFile: string | undefined;
 
   let hfId: string | undefined;
+  const domContext = hostEl
+    ? resolveDomCompositionContext(hostEl, doc?.querySelector("[data-composition-id]") ?? null)
+    : null;
+  const compositionAncestors = clip.compositionAncestors ?? domContext?.compositionAncestors;
+  const parentCompositionId = clip.parentCompositionId ?? domContext?.parentCompositionId;
+  const stackingContextId =
+    clip.stackingContextId ?? parentCompositionId ?? compositionAncestors?.[0] ?? null;
+
   if (hostEl) {
     domId = hostEl.id || undefined;
     hfId = hostEl.getAttribute("data-hf-id") || undefined;
@@ -112,6 +164,15 @@ export function createTimelineElementFromManifestClip(params: {
     start: clip.start,
     duration: clip.duration,
     track: clip.track,
+    // Prefer the effective (computed) z-index read from the live element — the
+    // same read the reorder commit uses — so CSS-rule z-index (not just inline)
+    // is captured. clip.zIndex from the runtime is inline-only (0 for CSS rules),
+    // so it can only serve as a fallback when the element isn't live.
+    zIndex: getTimelineElementZIndex(hostEl) ?? clip.zIndex ?? 0,
+    hasExplicitZIndex: getTimelineElementHasExplicitZIndex(hostEl),
+    stackingContextId,
+    parentCompositionId,
+    compositionAncestors,
     domId,
     hfId,
     selector,
@@ -146,6 +207,8 @@ export function createTimelineElementFromManifestClip(params: {
       }
     }
     if (hostEl) {
+      entry.zIndex = getTimelineElementZIndex(hostEl) ?? entry.zIndex;
+      entry.hasExplicitZIndex = getTimelineElementHasExplicitZIndex(hostEl);
       entry.domId = hostEl.id || undefined;
       entry.hfId = hostEl.getAttribute("data-hf-id") || undefined;
       entry.selector = getTimelineElementSelector(hostEl);
@@ -206,6 +269,7 @@ export function createImplicitTimelineLayersFromDOM(
     });
     if (existingKeys.has(identity.key) || existingKeys.has(identity.id)) continue;
 
+    const compositionContext = resolveDomCompositionContext(child, rootComp);
     layers.push({
       domId: child.id || undefined,
       hfId: child.getAttribute("data-hf-id") || undefined,
@@ -217,6 +281,11 @@ export function createImplicitTimelineLayersFromDOM(
       selectorIndex,
       sourceFile,
       start: 0,
+      zIndex: getTimelineElementZIndex(child),
+      hasExplicitZIndex: getTimelineElementHasExplicitZIndex(child),
+      stackingContextId: compositionContext.stackingContextId,
+      parentCompositionId: compositionContext.parentCompositionId,
+      compositionAncestors: compositionContext.compositionAncestors,
       tag: child.tagName.toLowerCase(),
       timingSource: "implicit",
       track: maxTrack + 1 + layers.length,
@@ -278,6 +347,7 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
       selectorIndex,
       sourceFile,
     });
+    const compositionContext = resolveDomCompositionContext(el, rootComp);
     const entry: TimelineElement = {
       id: identity.id,
       label,
@@ -286,6 +356,11 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
       start,
       duration: dur,
       track: isNaN(track) ? 0 : track,
+      zIndex: getTimelineElementZIndex(el),
+      hasExplicitZIndex: getTimelineElementHasExplicitZIndex(el),
+      stackingContextId: compositionContext.stackingContextId,
+      parentCompositionId: compositionContext.parentCompositionId,
+      compositionAncestors: compositionContext.compositionAncestors,
       domId: el.id || undefined,
       hfId: el.getAttribute("data-hf-id") || undefined,
       selector,
@@ -406,6 +481,11 @@ export function buildStandaloneRootTimelineElement(params: {
     start: 0,
     duration: params.rootDuration,
     track: 0,
+    zIndex: 0,
+    hasExplicitZIndex: false,
+    stackingContextId: params.compositionId,
+    parentCompositionId: null,
+    compositionAncestors: [params.compositionId],
     compositionSrc,
     selector: params.selector,
     selectorIndex: params.selectorIndex,

package/src/player/lib/timelineElementHelpers.ts

@@ -245,7 +245,7 @@ export function buildTimelineElementIdentity(params: {
   return { id, key };
 }
 
-export function getTimelineElementIdentity(element: TimelineElement): string {
+export function getTimelineElementIdentity(element: { key?: string | null; id: string }): string {
   return element.key ?? element.id;
 }
 

package/src/player/store/playerStore.test.ts

@@ -222,6 +222,98 @@ describe("usePlayerStore", () => {
     });
   });
 
+  describe("selectedElementIds", () => {
+    it("sets a multi-id selection with a coherent anchor", () => {
+      usePlayerStore.getState().setSelection(["el-1", "el-2", "el-3"], "el-2");
+
+      const state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual(["el-1", "el-2", "el-3"]);
+      expect(state.selectedElementId).toBe("el-2");
+    });
+
+    it("falls back to the first selected id when the anchor is outside the set", () => {
+      usePlayerStore.getState().setSelection(["el-1", "el-2"], "missing");
+
+      const state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual(["el-1", "el-2"]);
+      expect(state.selectedElementId).toBe("el-1");
+    });
+
+    it("single-click selection replaces the set with the selected id", () => {
+      const store = usePlayerStore.getState();
+      store.setSelection(["el-1", "el-2"], "el-2");
+      store.setSelectedElementId("el-3");
+
+      const state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual(["el-3"]);
+      expect(state.selectedElementId).toBe("el-3");
+    });
+
+    it("setSelectedElementId collapses to a single element even for a current member", () => {
+      const store = usePlayerStore.getState();
+      store.setSelection(["el-1", "el-2", "el-3"], "el-1");
+      // A genuine single selection (click) collapses the set, even if the id was a member.
+      store.setSelectedElementId("el-2");
+
+      const state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual(["el-2"]);
+      expect(state.selectedElementId).toBe("el-2");
+    });
+
+    it("setSelectionAnchor moves the anchor within a group without collapsing it", () => {
+      const store = usePlayerStore.getState();
+      store.setSelection(["el-1", "el-2", "el-3"], "el-1");
+      // A DOM->store echo during a group gesture only moves the anchor.
+      store.setSelectionAnchor("el-2");
+
+      let state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual(["el-1", "el-2", "el-3"]);
+      expect(state.selectedElementId).toBe("el-2");
+
+      // A non-member anchor is a genuine new single selection.
+      store.setSelectionAnchor("outside");
+      state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual(["outside"]);
+      expect(state.selectedElementId).toBe("outside");
+    });
+
+    it("clearing single selection empties the set", () => {
+      const store = usePlayerStore.getState();
+      store.setSelection(["el-1", "el-2"], "el-2");
+      store.setSelectedElementId(null);
+
+      const state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual([]);
+      expect(state.selectedElementId).toBeNull();
+    });
+
+    it("toggle adds and removes members while keeping the anchor in the set", () => {
+      const store = usePlayerStore.getState();
+      store.setSelectedElementId("el-1");
+      store.toggleSelectedElementId("el-2");
+
+      let state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual(["el-1", "el-2"]);
+      expect(state.selectedElementId).toBe("el-1");
+
+      store.toggleSelectedElementId("el-1");
+
+      state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual(["el-2"]);
+      expect(state.selectedElementId).toBe("el-2");
+    });
+
+    it("clearSelection empties the set and the anchor", () => {
+      const store = usePlayerStore.getState();
+      store.setSelection(["el-1", "el-2"], "el-2");
+      store.clearSelection();
+
+      const state = usePlayerStore.getState();
+      expect([...state.selectedElementIds]).toEqual([]);
+      expect(state.selectedElementId).toBeNull();
+    });
+  });
+
   describe("updateElement", () => {
     it("updates the start time of a specific element", () => {
       usePlayerStore.getState().setElements([

package/src/player/store/playerStore.ts

@@ -28,6 +28,16 @@ export interface TimelineElement {
   start: number;
   duration: number;
   track: number;
+  /** Resolved z-index for stacking-aware timeline ordering. */
+  zIndex?: number;
+  /** True when the effective z-index was authored inline or through CSS, not auto. */
+  hasExplicitZIndex?: boolean;
+  /** Stacking context this element belongs to; root clips use the root composition id. */
+  stackingContextId?: string | null;
+  /** Nearest parent composition context, matching RuntimeTimelineClip. */
+  parentCompositionId?: string | null;
+  /** Composition ancestry from root to nearest parent, matching RuntimeTimelineClip. */
+  compositionAncestors?: string[];
   domId?: string;
   /** Stable `data-hf-id` attribute value — used as primary patch target when present */
   hfId?: string;
@@ -65,6 +75,23 @@ export interface TimelineElement {
 export type ZoomMode = "fit" | "manual";
 type TimelineTool = "select" | "razor";
 
+function resolveElementSelection(
+  ids: Iterable<string>,
+  anchor?: string | null,
+): { selectedElementIds: Set<string>; selectedElementId: string | null } {
+  const selectedElementIds = new Set(ids);
+  if (selectedElementIds.size === 0) {
+    return { selectedElementIds, selectedElementId: null };
+  }
+  if (anchor && selectedElementIds.has(anchor)) {
+    return { selectedElementIds, selectedElementId: anchor };
+  }
+  return {
+    selectedElementIds,
+    selectedElementId: selectedElementIds.values().next().value ?? null,
+  };
+}
+
 interface PlayerState {
   isPlaying: boolean;
   currentTime: number;
@@ -115,8 +142,10 @@ interface PlayerState {
 
   /** Multi-select: additional selected elements beyond selectedElementId. */
   selectedElementIds: Set<string>;
+  setSelection: (ids: Iterable<string>, anchor?: string | null) => void;
+  addSelectedElementId: (id: string) => void;
   toggleSelectedElementId: (id: string) => void;
-  clearSelectedElementIds: () => void;
+  clearSelection: () => void;
 
   /** Keyframe data per element id, populated from parsed GSAP animations. */
   keyframeCache: Map<string, KeyframeCacheEntry>;
@@ -132,10 +161,15 @@ interface PlayerState {
   setBeatDragging: (dragging: boolean) => void;
   setElements: (elements: TimelineElement[]) => void;
   setSelectedElementId: (id: string | null) => void;
+  /** Move the selection anchor within an active multi-selection without collapsing it. */
+  setSelectionAnchor: (id: string | null) => void;
   updateElement: (
     elementId: string,
     updates: Partial<
-      Pick<TimelineElement, "start" | "duration" | "track" | "playbackStart" | "hidden">
+      Pick<
+        TimelineElement,
+        "start" | "duration" | "track" | "zIndex" | "hasExplicitZIndex" | "playbackStart" | "hidden"
+      >
     >,
   ) => void;
   setZoomMode: (mode: ZoomMode) => void;
@@ -252,14 +286,21 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   setAutoKeyframeEnabled: (enabled) => set({ autoKeyframeEnabled: enabled }),
 
   selectedElementIds: new Set<string>(),
+  setSelection: (ids, anchor) => set(resolveElementSelection(ids, anchor)),
+  addSelectedElementId: (id: string) =>
+    set((s) => {
+      const next = new Set(s.selectedElementIds);
+      next.add(id);
+      return resolveElementSelection(next, s.selectedElementId);
+    }),
   toggleSelectedElementId: (id: string) =>
     set((s) => {
       const next = new Set(s.selectedElementIds);
       if (next.has(id)) next.delete(id);
       else next.add(id);
-      return { selectedElementIds: next };
+      return resolveElementSelection(next, s.selectedElementId);
     }),
-  clearSelectedElementIds: () => set({ selectedElementIds: new Set() }),
+  clearSelection: () => set({ selectedElementId: null, selectedElementIds: new Set() }),
 
   keyframeCache: new Map(),
   setKeyframeCache: (elementId, data) =>
@@ -370,16 +411,35 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   setTimelineReady: (ready) => set({ timelineReady: ready }),
   setBeatDragging: (dragging) => set({ beatDragging: dragging }),
   setElements: (elements) => set({ elements }),
+  // A genuine single selection: always collapse the set to just this element. User
+  // intent (timeline click, preview click via applyDomSelection) flows here; DOM sync
+  // echoes that must preserve a group go through setSelectionAnchor instead.
   setSelectedElementId: (id) =>
-    set((s) =>
+    set((s) => {
+      const selectedElementIds = id ? new Set([id]) : new Set<string>();
       // Selecting a different element drops any active keyframe selection — otherwise
       // a stale activeKeyframePct from a prior diamond click would force the next drag
       // to "modify" a keyframe on the new element. A diamond click sets the pct AFTER
       // calling setSelectedElementId, so this never clobbers a genuine keyframe select.
-      id !== s.selectedElementId
-        ? { selectedElementId: id, activeKeyframePct: null, motionPathArmed: false }
-        : { selectedElementId: id },
-    ),
+      return id !== s.selectedElementId
+        ? {
+            selectedElementId: id,
+            selectedElementIds,
+            activeKeyframePct: null,
+            motionPathArmed: false,
+          }
+        : { selectedElementId: id, selectedElementIds };
+    }),
+  // Move the anchor within an active multi-selection WITHOUT collapsing it — used by
+  // DOM->store sync echoes while a group gesture re-patches the preview. A non-member
+  // id is treated as a genuine new single selection.
+  setSelectionAnchor: (id) =>
+    set((s) => {
+      if (id != null && s.selectedElementIds.size > 1 && s.selectedElementIds.has(id)) {
+        return { selectedElementId: id };
+      }
+      return { selectedElementId: id, selectedElementIds: id ? new Set([id]) : new Set<string>() };
+    }),
   updateElement: (elementId, updates) =>
     set((state) => ({
       elements: state.elements.map((el) =>

package/src/utils/blockInstaller.ts

@@ -8,6 +8,7 @@ import { collectHtmlIds } from "./studioHelpers";
 import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
 import { saveProjectFilesWithHistory } from "./studioFileHistory";
 import type { EditHistoryKind } from "./editHistory";
+import { extendRootDurationInSource } from "./rootDuration";
 
 function getMaxZIndexFromIframe(iframe: HTMLIFrameElement | null): number {
   try {
@@ -163,20 +164,7 @@ export async function addBlockToProject(
       ].join("\n");
 
       let patchedContent = insertTimelineAssetIntoSource(originalContent, subCompHtml);
-
-      const newEnd = start + duration;
-      const rootDurMatch = patchedContent.match(
-        /(<[^>]*data-composition-id="[^"]*"[^>]*data-duration=")([^"]*)(")/,
-      );
-      if (rootDurMatch) {
-        const rootDur = parseFloat(rootDurMatch[2]!);
-        if (newEnd > rootDur) {
-          patchedContent = patchedContent.replace(
-            rootDurMatch[0],
-            `${rootDurMatch[1]}${formatTimelineAttributeNumber(newEnd)}${rootDurMatch[3]}`,
-          );
-        }
-      }
+      patchedContent = extendRootDurationInSource(patchedContent, start + duration);
 
       await saveProjectFilesWithHistory({
         projectId,