hyperframes 0.8.47 → 0.8.48

package/dist/studio/index.js

@@ -1338,6 +1338,9 @@ function readStorage(storage) {
     if (typeof parsed.timelineSnapEnabled === "boolean") {
       preferences.timelineSnapEnabled = parsed.timelineSnapEnabled;
     }
+    if (typeof parsed.rippleEditEnabled === "boolean") {
+      preferences.rippleEditEnabled = parsed.rippleEditEnabled;
+    }
     if (parsed.timeDisplayMode === "time" || parsed.timeDisplayMode === "frame") {
       preferences.timeDisplayMode = parsed.timeDisplayMode;
     }
@@ -1837,6 +1840,12 @@ var usePlayerStore = create2((set, get) => ({
     writeStudioUiPreferences({ timelineSnapEnabled: enabled });
     set({ timelineSnapEnabled: enabled });
   },
+  rippleEditEnabled: readStudioUiPreferences().rippleEditEnabled ?? true,
+  // default on
+  setRippleEditEnabled: (enabled) => {
+    writeStudioUiPreferences({ rippleEditEnabled: enabled });
+    set({ rippleEditEnabled: enabled });
+  },
   timeDisplayMode: readStudioUiPreferences().timeDisplayMode ?? "time",
   setTimeDisplayMode: (mode) => {
     writeStudioUiPreferences({ timeDisplayMode: mode });
@@ -3052,6 +3061,10 @@ function isAudioTimelineElement(element) {
   if (AUDIO_TIMELINE_TAGS.has(tag)) return true;
   return Boolean(element.src && AUDIO_SOURCE_EXT_RE.test(element.src));
 }
+function isAudioOrVideoTimelineElement(element) {
+  if (!element) return false;
+  return isAudioTimelineElement(element) || element.tag.trim().toLowerCase() === "video";
+}
 function isMusicTrack(element) {
   if (!element) return false;
   if (!isAudioTimelineElement(element)) return false;
@@ -3127,7 +3140,6 @@ function FileManagerProvider({
     projectDir,
     fileTree,
     fileTreeLoaded,
-    setFileTree,
     editingPathRef,
     projectIdRef,
     saveRafRef,
@@ -3168,7 +3180,6 @@ function FileManagerProvider({
       projectDir,
       fileTree,
       fileTreeLoaded,
-      setFileTree,
       editingPathRef,
       projectIdRef,
       saveRafRef,
@@ -3206,7 +3217,6 @@ function FileManagerProvider({
       projectDir,
       fileTree,
       fileTreeLoaded,
-      setFileTree,
       editingPathRef,
       projectIdRef,
       saveRafRef,
@@ -3962,6 +3972,7 @@ function buildMissingCompositionEntry(params) {
     start: window2.start,
     duration: window2.duration,
     track: timing.trackIndex,
+    authoredTrack: timing.trackIndex,
     domId: optionalNonEmpty(element.id),
     hfId: optionalNonEmpty(element.getAttribute("data-hf-id")),
     selector,
@@ -5237,10 +5248,7 @@ function resolveTimelineAssetDrop(input, clientX, clientY) {
   });
   const contentY = clientY - input.rectTop + input.scrollTop;
   const pointerStart = Math.round(x / Math.max(input.pixelsPerSecond, 1) * 100) / 100;
-  const start = Math.max(
-    0,
-    input.clampStartToDuration === false ? pointerStart : Math.min(input.duration, pointerStart)
-  );
+  const start = Math.max(0, pointerStart);
   const rowIndex = Math.floor(getTimelineRowFromY(contentY, input.rowHeights));
   return {
     start,
@@ -6602,10 +6610,6 @@ function invokeDropCallback(callback) {
   } catch {
   }
 }
-function resolveDropStart(usePointerStart, pointerStart) {
-  if (usePointerStart) return pointerStart;
-  return Math.max(0, usePlayerStore.getState().currentTime);
-}
 function applyFileDrop(transfer, onFileDrop, placement) {
   if (!onFileDrop || transfer.files.length === 0) return false;
   invokeDropCallback(() => onFileDrop(Array.from(transfer.files), placement));
@@ -6625,7 +6629,6 @@ function applyTypedJsonDrop(transfer, mime, field, apply, placement) {
 function useTimelineAssetDrop({
   scrollRef,
   ppsRef,
-  durationRef,
   trackOrderRef,
   rowGeometryRef,
   contentOrigin,
@@ -6706,10 +6709,10 @@ function useTimelineAssetDrop({
     [clearDropPreview]
   );
   const resolveDropPlacement2 = useCallback7(
-    (clientX, clientY, usePointerStart = false) => {
+    (clientX, clientY) => {
       const scroll = scrollRef.current;
       const rect = scroll?.getBoundingClientRect();
-      const pointer = resolveTimelineAssetDrop(
+      return resolveTimelineAssetDrop(
         {
           rectLeft: rect?.left ?? 0,
           rectTop: rect?.top ?? 0,
@@ -6717,20 +6720,14 @@ function useTimelineAssetDrop({
           scrollTop: scroll?.scrollTop ?? 0,
           contentOrigin,
           pixelsPerSecond: ppsRef.current,
-          duration: durationRef.current,
-          clampStartToDuration: !usePointerStart,
           rowHeights: rowGeometryRef.current.rowHeights,
           trackOrder: trackOrderRef.current
         },
         clientX,
         clientY
       );
-      return {
-        start: resolveDropStart(usePointerStart, pointer.start),
-        track: pointer.track
-      };
     },
-    [scrollRef, ppsRef, durationRef, trackOrderRef, rowGeometryRef, contentOrigin]
+    [scrollRef, ppsRef, trackOrderRef, rowGeometryRef, contentOrigin]
   );
   const handleAssetDrop = useCallback7(
     (e) => {
@@ -6738,15 +6735,14 @@ function useTimelineAssetDrop({
       const canCommit = activeDropEpochRef.current === sessionEpoch;
       clearDropPreview();
       if (!canCommit) return;
+      const placement = resolveDropPlacement2(e.clientX, e.clientY);
       const compositionPayload = parseTimelineCompositionPayload(
         e.dataTransfer.getData(TIMELINE_COMPOSITION_MIME)
       );
       if (compositionPayload && onCompositionDrop) {
-        const placement2 = resolveDropPlacement2(e.clientX, e.clientY, true);
-        invokeDropCallback(() => onCompositionDrop(compositionPayload.sourcePath, placement2));
+        invokeDropCallback(() => onCompositionDrop(compositionPayload.sourcePath, placement));
         return;
       }
-      const placement = resolveDropPlacement2(e.clientX, e.clientY);
       if (applyFileDrop(e.dataTransfer, onFileDrop, placement)) return;
       if (applyTypedJsonDrop(e.dataTransfer, TIMELINE_ASSET_MIME, "path", onAssetDrop, placement)) {
         return;
@@ -9065,6 +9061,11 @@ function keyframeTarget(keyframe) {
 
 // src/player/components/TimelineDiamondConnectors.tsx
 import { Fragment as Fragment10, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+var EASE_BUTTON_PX = 16;
+var EASE_BUTTON_REST_GAP_PX = 4;
+function hasRoomForRestingEase(connectorWidth) {
+  return connectorWidth >= EASE_BUTTON_PX + EASE_BUTTON_REST_GAP_PX * 2;
+}
 function TimelineDiamondConnectors({
   markers,
   centerY,
@@ -9123,6 +9124,7 @@ function TimelineDiamondConnectors({
             previous.keyframe.percentage
           ),
           roomForFullTarget: connectorWidth >= 24,
+          restingVisible: hasRoomForRestingEase(connectorWidth),
           onSelectSegment
         }
       )
@@ -9142,6 +9144,7 @@ function SegmentEaseControl({
   rovingTargetId,
   afterLabel,
   roomForFullTarget,
+  restingVisible,
   onSelectSegment
 }) {
   const pressXRef = useRef12(null);
@@ -9174,7 +9177,7 @@ function SegmentEaseControl({
           tabIndex: focusId === rovingTargetId ? 0 : -1,
           "aria-label": `Edit ${ease} easing after ${afterLabel}`,
           title: `Edit ${ease} easing`,
-          className: `absolute flex items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 ${roomForFullTarget ? "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']" : ""}`,
+          className: `absolute flex items-center justify-center rounded ${restingVisible ? "opacity-40" : "opacity-0"} transition-opacity hover:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 ${roomForFullTarget ? "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']" : ""}`,
           style: {
             left: "50%",
             top: "50%",
@@ -10919,6 +10922,11 @@ import {
 } from "@hyperframes/core/audio-automation";
 import { getAudioFxDef } from "@hyperframes/core/audio-fx";
 var POINT_MERGE_SEC = 0.02;
+function mergeInsertPoint(points, t, v) {
+  const kept = points.filter((p) => Math.abs(p.t - t) > POINT_MERGE_SEC);
+  const seeded = points.length === 0 && t > POINT_MERGE_SEC ? [{ t: 0, v }] : [];
+  return [...seeded, ...kept, { t, v }].sort((a, b) => a.t - b.t);
+}
 var MIN_POINT_GAP_SEC = 1e-3;
 var GRAB_PX = 7;
 var SEGMENT_GRAB_PX = 5;
@@ -11817,12 +11825,7 @@ function useAutomationLaneGestures({
         return;
       }
       const { t, v } = pointAt(e.clientX, e.clientY);
-      const kept = lane.points.filter((p) => Math.abs(p.t - t) > POINT_MERGE_SEC);
-      const seeded = lane.points.length === 0 && t > POINT_MERGE_SEC ? [{ t: 0, v }] : [];
-      commitPoints(
-        [...seeded, ...kept, { t, v }].sort((a, b) => a.t - b.t),
-        true
-      );
+      commitPoints(mergeInsertPoint(lane.points, t, v), true);
     },
     [lane, pointAt, commitPoints, readOnly, hitIndex, segmentIndex]
   );
@@ -12545,7 +12548,7 @@ function laneGroupKey(target, chain) {
 function groupAutomationLanes(elements) {
   const groups = /* @__PURE__ */ new Map();
   for (const element of elements) {
-    if (!isAudioTimelineElement(element)) continue;
+    if (!isAudioOrVideoTimelineElement(element)) continue;
     const chain = elementFxChain(element);
     for (const lane of elementAutomationLanes(element)) {
       const key2 = laneGroupKey(lane.target, chain);
@@ -12642,7 +12645,7 @@ function TimelineAutomationLaneSlot({
   currentTime,
   beatTimes
 }) {
-  const clips = elements.filter(isAudioTimelineElement);
+  const clips = elements.filter(isAudioOrVideoTimelineElement);
   const rowsByClip = /* @__PURE__ */ new Map();
   groupAutomationLanes(clips).forEach((group, rowIndex) => {
     for (const entry2 of group.entries) {
@@ -13074,6 +13077,10 @@ function matchesByDomId(selection, element, selectionSourceFile) {
   if (!selection.id) return false;
   return element.domId === selection.id && (element.sourceFile || "index.html") === selectionSourceFile;
 }
+function matchesByHfId(selection, element, selectionSourceFile) {
+  if (!selection.hfId) return false;
+  return element.hfId === selection.hfId && (element.sourceFile || "index.html") === selectionSourceFile;
+}
 function matchesByCompositionHost(selection, element) {
   if (!selection.isCompositionHost || !selection.compositionSrc) return false;
   return element.compositionSrc === selection.compositionSrc;
@@ -13086,6 +13093,8 @@ function findMatchingTimelineElementId(selection, elements) {
   const selectionSourceFile = selection.sourceFile || "index.html";
   const byId = selection.id ? elements.find((el) => matchesByDomId(selection, el, selectionSourceFile)) : void 0;
   if (byId) return byId.key ?? byId.id;
+  const byHfId = selection.hfId ? elements.find((el) => matchesByHfId(selection, el, selectionSourceFile)) : void 0;
+  if (byHfId) return byHfId.key ?? byHfId.id;
   const bySelector = selection.selector ? elements.find((el) => matchesBySelector(selection, el)) : void 0;
   if (bySelector) return bySelector.key ?? bySelector.id;
   const byHost = elements.find((el) => matchesByCompositionHost(selection, el));
@@ -13095,6 +13104,11 @@ function findMatchingTimelineElementId(selection, elements) {
   }
   return null;
 }
+function resolveElementTrack(element) {
+  return Math.round(
+    Number.isFinite(element.authoredTrack) ? element.authoredTrack : element.track
+  );
+}
 function findTimelineIdByAncestor(element, elements, sourceFile) {
   let ancestor = element?.parentElement ?? null;
   while (ancestor) {
@@ -15670,7 +15684,7 @@ function trackShowsBeatStrip(els, beatTimes, ctx3) {
   return ctx3.selectedElementId ? els.some((e) => (e.key ?? e.id) === ctx3.selectedElementId) : els.some((e) => ctx3.isMusicTrack(e));
 }
 function automationLaneCountOf(element) {
-  return isAudioTimelineElement(element) ? elementAutomationLanes(element).length : 0;
+  return isAudioOrVideoTimelineElement(element) ? elementAutomationLanes(element).length : 0;
 }
 function trackAutomationLaneCount(elements) {
   return groupAutomationLanes(elements).length;
@@ -19169,6 +19183,9 @@ import { useRef as useRef29, useState as useState17, useCallback as useCallback1
 function classifyZone(el) {
   return isAudioTimelineElement(el) ? "audio" : "visual";
 }
+function isMainTrackElement(el) {
+  return el.track === 0 && classifyZone(el) === "visual" && el.expandedParentStart == null;
+}
 var keyOf = (el) => el.key ?? el.id;
 var EPS = 1e-6;
 function overlaps2(a, b) {
@@ -21962,20 +21979,23 @@ function resolveCloseGapShifts(elements, gap) {
 // src/player/components/timelineGapCommit.ts
 var keyOf5 = (e) => e.key ?? e.id;
 var gapCloseGestureSeq = 0;
-function canShiftTrackGapClips(laneElements, shifts) {
-  const byKey = new Map(laneElements.map((e) => [keyOf5(e), e]));
-  return shifts.every((s) => {
+function resolveShiftedElements(elements, shifts) {
+  const byKey = new Map(elements.map((e) => [keyOf5(e), e]));
+  return shifts.flatMap((s) => {
     const element = byKey.get(s.key);
-    return element != null && getTimelineEditCapabilities(element).canMove;
+    return element ? [{ element, start: s.newStart }] : [];
   });
 }
+function canShiftTrackGapClips(laneElements, shifts) {
+  const resolved2 = resolveShiftedElements(laneElements, shifts);
+  return resolved2.length === shifts.length && resolved2.every((r) => getTimelineEditCapabilities(r.element).canMove);
+}
 function buildShiftEdits(laneElements, shifts) {
   if (shifts.length === 0 || !canShiftTrackGapClips(laneElements, shifts)) return null;
-  const byKey = new Map(laneElements.map((e) => [keyOf5(e), e]));
-  return shifts.map((s) => {
-    const element = byKey.get(s.key);
-    return { element, updates: { start: s.newStart, track: element.track } };
-  });
+  return resolveShiftedElements(laneElements, shifts).map(({ element, start }) => ({
+    element,
+    updates: { start, track: element.track }
+  }));
 }
 function commitShifts(laneElements, shifts, deps) {
   const edits = buildShiftEdits(laneElements, shifts);
@@ -21995,6 +22015,22 @@ function commitCloseAllTrackGaps(laneElements, deps) {
     deps
   );
 }
+function resolveMainTrackDeleteRippleShifts(survivingElements, deletedElements, rippleEnabled) {
+  const deletedMainTrack = deletedElements.filter(isMainTrackElement);
+  if (!rippleEnabled || deletedMainTrack.length === 0) return null;
+  const survivors = survivingElements.filter(isMainTrackElement);
+  const shifts = [];
+  for (const survivor of survivors) {
+    const width = deletedMainTrack.filter((d) => d.start < survivor.start).reduce((sum, d) => sum + d.duration, 0);
+    if (width <= 0) continue;
+    const newStart = round32(Math.max(laneGapFloor(survivors), survivor.start - width));
+    if (Math.abs(newStart - survivor.start) > TRACK_GAP_EPSILON_S) {
+      shifts.push({ key: keyOf5(survivor), newStart });
+    }
+  }
+  if (shifts.length === 0 || !canShiftTrackGapClips(survivors, shifts)) return null;
+  return shifts;
+}
 
 // src/player/components/useTrackGapMenu.ts
 function useTrackGapMenu({
@@ -23202,7 +23238,6 @@ var Timeline = memo16(function Timeline2({
   const assetDrop = useTimelineAssetDrop({
     scrollRef,
     ppsRef,
-    durationRef,
     trackOrderRef,
     rowGeometryRef,
     contentOrigin,
@@ -24684,6 +24719,9 @@ function canvasNudgeKeysClaimed() {
 }
 
 // src/player/hooks/usePlaybackKeyboard.ts
+function shouldRazorClaimPlainA(e) {
+  return !e.shiftKey && !e.altKey && usePlayerStore.getState().activeTool === "razor";
+}
 function usePlaybackKeyboard({
   iframeRef,
   shuttleDirectionRef,
@@ -24813,6 +24851,7 @@ function usePlaybackKeyboard({
         return;
       }
       if (key2 === "a") {
+        if (shouldRazorClaimPlainA(e)) return;
         e.preventDefault();
         seek(usePlayerStore.getState().inPoint ?? 0, { keepPlaying: true });
         return;
@@ -28547,6 +28586,13 @@ function pauseStudioPreviewPlayback(iframe) {
 }
 
 // src/components/editor/domEditingAgentPrompt.ts
+var GUARDRAIL_LINES = [
+  "Guardrails:",
+  "- Make a targeted change to this element only.",
+  "- Preserve the rest of the composition and its timing.",
+  "- Do not modify other elements' data-* attributes or positioning.",
+  "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors."
+];
 function formatBoundingBox(bounds) {
   return `x=${Math.round(bounds.x)}, y=${Math.round(bounds.y)}, width=${Math.round(bounds.width)}, height=${Math.round(bounds.height)}`;
 }
@@ -28558,6 +28604,35 @@ function formatTextFields(fields) {
     (field) => `- key=${field.key}; tag=<${field.tagName}>; source=${field.source}; text=${JSON.stringify(field.value)}`
   ).join("\n");
 }
+function formatSelectorTagLine(info) {
+  return `Selector: ${info.selector ?? "(none)"}  Tag: <${info.tagName}>`;
+}
+function formatTextLine(textContent) {
+  return textContent ? `Text: ${textContent}` : "";
+}
+function buildElementInfoLines(info) {
+  const lines = [
+    `DOM id: ${info.id ?? "(none)"}`,
+    `Selector: ${info.selector ?? "(none)"}`,
+    `Selector index: ${info.selectorIndex ?? 0}`,
+    `Tag: <${info.tagName}>`
+  ];
+  if (info.label) lines.push(`Label: ${info.label}`);
+  lines.push(`Bounds: ${formatBoundingBox(info.boundingBox)}`);
+  if (info.src) lines.push(`Source (media): ${info.src}`);
+  if (info.textContent) lines.push(`Text: ${info.textContent}`);
+  return lines;
+}
+function buildElementDetailLines(info) {
+  const lines = [];
+  const textFieldsBlock = info.textFields ? formatTextFields(info.textFields) : "";
+  if (textFieldsBlock) lines.push("", "Text fields:", textFieldsBlock);
+  const inlineStyleBlock = info.inlineStyles ? formatStyleBlock(info.inlineStyles) : "";
+  if (inlineStyleBlock) lines.push("", "Inline styles:", inlineStyleBlock);
+  const computedStyleBlock = info.computedStyles ? formatStyleBlock(info.computedStyles) : "";
+  if (computedStyleBlock) lines.push("", "Computed styles (browser-resolved):", computedStyleBlock);
+  return lines;
+}
 function buildElementAgentPrompt({
   selection,
   currentTime,
@@ -28567,6 +28642,17 @@ function buildElementAgentPrompt({
   sourceFilePath
 }) {
   const displayedSourceFile = sourceFilePath?.trim() || selection.sourceFile;
+  const info = {
+    id: selection.id ?? null,
+    selector: selection.selector,
+    selectorIndex: selection.selectorIndex,
+    tagName: selection.tagName,
+    boundingBox: selection.boundingBox,
+    textContent: selection.textContent,
+    textFields: selection.textFields,
+    inlineStyles: selection.inlineStyles,
+    computedStyles: selection.computedStyles
+  };
   const lines = [
     "## HyperFrames element edit request v1",
     "Schema version: 1",
@@ -28576,52 +28662,62 @@ function buildElementAgentPrompt({
     `Composition: ${selection.compositionPath}`,
     `Playback time: ${formatTime(currentTime)}`,
     `Source file: ${displayedSourceFile}`,
-    `DOM id: ${selection.id ?? "(none)"}`,
-    `Selector: ${selection.selector ?? "(none)"}`,
-    `Selector index: ${selection.selectorIndex ?? 0}`,
-    `Tag: <${selection.tagName}>`,
-    `Bounds: ${formatBoundingBox(selection.boundingBox)}`
+    ...buildElementInfoLines(info)
   ];
-  if (selection.textContent) {
-    lines.push(`Text: ${selection.textContent}`);
-  }
   const trimmedSelectionContext = selectionContext?.trim();
   if (trimmedSelectionContext) {
     lines.push("", "Selection context:", trimmedSelectionContext);
   }
-  const textFieldsBlock = formatTextFields(selection.textFields);
-  if (textFieldsBlock) {
-    lines.push("", "Text fields:", textFieldsBlock);
-  }
-  const inlineStyleBlock = formatStyleBlock(selection.inlineStyles);
-  if (inlineStyleBlock) {
-    lines.push("", "Inline styles:", inlineStyleBlock);
-  }
-  const computedStyleBlock = formatStyleBlock(selection.computedStyles);
-  if (computedStyleBlock) {
-    lines.push("", "Computed styles (browser-resolved):", computedStyleBlock);
-  }
+  lines.push(...buildElementDetailLines(info));
   if (tagSnippet) {
     lines.push("", "Target HTML:", tagSnippet);
   }
-  lines.push(
-    "",
-    "Guardrails:",
-    "- Make a targeted change to this element only.",
-    "- Preserve the rest of the composition and its timing.",
-    "- Do not modify other elements' data-* attributes or positioning.",
-    "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors."
-  );
+  lines.push("", ...GUARDRAIL_LINES);
   return lines.join("\n");
 }
+function buildSelectorAndTextLines(info) {
+  return [formatSelectorTagLine(info), formatTextLine(info.textContent)];
+}
 function buildAgentContextPreview(selection, activeCompPath) {
   return [
     `Composition: ${selection.compositionPath}`,
     `Source: ${selection.sourceFile || activeCompPath || "index.html"}`,
-    `Selector: ${selection.selector ?? "(none)"}  Tag: <${selection.tagName}>`,
-    selection.textContent ? `Text: ${selection.textContent}` : ""
+    ...buildSelectorAndTextLines(selection)
   ].filter(Boolean).join("\n");
 }
+function buildPickerAgentPrompt({
+  selection,
+  userInstruction
+}) {
+  const lines = [
+    "## HyperFrames element edit request v1",
+    "Schema version: 1",
+    "",
+    userInstruction?.trim() || "Edit this selected HyperFrames element."
+  ];
+  if (!selection) return lines.join("\n");
+  const info = {
+    id: selection.id,
+    selector: selection.selector,
+    tagName: selection.tagName,
+    label: selection.label,
+    boundingBox: selection.boundingBox,
+    textContent: selection.textContent,
+    src: selection.src
+  };
+  lines.push(
+    "",
+    ...buildElementInfoLines(info),
+    ...buildElementDetailLines(info),
+    "",
+    ...GUARDRAIL_LINES
+  );
+  return lines.join("\n");
+}
+function buildPickerAgentContextPreview(selection) {
+  if (!selection) return "";
+  return buildSelectorAndTextLines(selection).filter(Boolean).join("\n");
+}
 
 // src/components/editor/domEditOverlayBasis.ts
 function readPositiveDimension(value) {
@@ -39570,14 +39666,7 @@ function useElementLifecycleOps({
     },
     [commitDomEditPatchBatches, onReorderShadow]
   );
-  const handleDomEditElementDelete = useCallback54(
-    async (selection) => {
-      await handleDomEditElementsDelete([selection]);
-    },
-    [handleDomEditElementsDelete]
-  );
   return {
-    handleDomEditElementDelete,
     handleDomEditElementsDelete,
     handleDomZIndexReorderCommit
   };
@@ -54128,6 +54217,10 @@ function withLane2(automation, lane) {
     lanes: [...automation.lanes.filter((l) => l.target !== lane.target), lane]
   };
 }
+function withPointAt(automation, target, t, v) {
+  const points = automation.lanes.find((lane) => lane.target === target)?.points ?? [];
+  return withLane2(automation, { target, points: mergeInsertPoint(points, t, v) });
+}
 function automationAttrValue(automation) {
   return automation.lanes.length > 0 ? serializeAutomation2(automation) : "";
 }
@@ -56991,24 +57084,33 @@ function AudioFxGroup({
 }
 
 // src/components/editor/useVolumeAutomation.ts
-import { HF_AUDIO_AUTOMATION_DATA_KEY as HF_AUDIO_AUTOMATION_DATA_KEY2, VOLUME_TARGET as VOLUME_TARGET2 } from "@hyperframes/core/audio-automation";
-function useVolumeAutomation(element, onSetAttributeQuiet) {
+import {
+  HF_AUDIO_AUTOMATION_DATA_KEY as HF_AUDIO_AUTOMATION_DATA_KEY2,
+  sampleAutomationLane as sampleAutomationLane9,
+  VOLUME_TARGET as VOLUME_TARGET2
+} from "@hyperframes/core/audio-automation";
+function useVolumeAutomation(element, currentTime, onSetAttributeQuiet) {
   const automation = readPanelAutomation(
     element.dataAttributes?.[HF_AUDIO_AUTOMATION_DATA_KEY2],
     void 0
   );
+  const { start: elStart, duration: elDuration } = deriveElementTiming(element);
+  const clipTimeSec = clampNumber(currentTime - elStart, 0, elDuration > 0 ? elDuration : Infinity);
   const write = (next) => {
     void onSetAttributeQuiet(HF_AUDIO_AUTOMATION_ATTR3, automationAttrValue(next) || null);
   };
   const raw = element.dataAttributes?.["volume"];
   const parsed = raw ? Number(raw) : 1;
   const current = Number.isFinite(parsed) ? parsed : 1;
+  const volumeLane = automation.lanes.find((lane) => lane.target === VOLUME_TARGET2);
   return {
-    volumeAutomated: automation.lanes.some((lane) => lane.target === VOLUME_TARGET2),
+    volumeAutomated: volumeLane !== void 0,
+    automatedVolumeValue: volumeLane ? sampleAutomationLane9(volumeLane, clipTimeSec) : void 0,
     // Seeded at the level the slider already shows, so automating the track does
     // not change how loud it is.
     onAutomateVolume: () => write(withSeededLane(automation, VOLUME_TARGET2, Number.isFinite(current) ? current : 1)),
-    onRemoveVolumeAutomation: () => write(withoutLane(automation, VOLUME_TARGET2))
+    onRemoveVolumeAutomation: () => write(withoutLane(automation, VOLUME_TARGET2)),
+    onCommitVolumeAt: (v) => write(withPointAt(automation, VOLUME_TARGET2, clipTimeSec, v))
   };
 }
 
@@ -57101,7 +57203,9 @@ function FlatMediaSection({
   onRemoveBackground,
   volumeAutomated,
   onAutomateVolume,
-  onRemoveVolumeAutomation
+  onRemoveVolumeAutomation,
+  onCommitVolumeAt,
+  automatedVolumeValue
 }) {
   const track2 = useTrackDesignInput();
   const isVideo = element.tagName === "video";
@@ -57109,7 +57213,7 @@ function FlatMediaSection({
   const isImage = element.tagName === "img";
   const isVisualMedia = isVideo || isImage;
   const el = element.element;
-  const volume = parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
+  const volume = volumeAutomated && automatedVolumeValue !== void 0 ? automatedVolumeValue : parseNumericValue(element.dataAttributes.volume ?? "") ?? 1;
   const volumeFaderPosition = audioGainToFaderPosition2(volume);
   const mediaStart = Number.parseFloat(
     element.dataAttributes["media-start"] ?? element.dataAttributes["playback-start"] ?? "0"
@@ -57258,9 +57362,15 @@ function FlatMediaSection({
                 max: AUDIO_GAIN_FADER_MAX2,
                 tier: volume === 1 ? "default" : "explicitCustom",
                 displayValue: audioGainToText2(volume),
-                disabled: volumeAutomated,
                 centerTick: true,
-                onCommit: (next) => void onSetAttribute("volume", formatAudioGain2(audioFaderPositionToGain2(next)))
+                onCommit: (next) => {
+                  const gain = audioFaderPositionToGain2(next);
+                  if (volumeAutomated) {
+                    onCommitVolumeAt?.(gain);
+                  } else {
+                    void onSetAttribute("volume", formatAudioGain2(gain));
+                  }
+                }
               }
             ) }),
             /* @__PURE__ */ jsx142(
@@ -60939,7 +61049,11 @@ function PropertyPanelFlat({
   const audioSelection = isAudioDomElement(element.element);
   const showMotionEffects = gsapEffectHandlers !== null && !audioSelection;
   const showMotionGroup = showMotionTiming || showMotionEffects;
-  const volumeAutomation = useVolumeAutomation(element, onSetAttributeQuiet ?? onSetAttributeLive);
+  const volumeAutomation = useVolumeAutomation(
+    element,
+    currentTime,
+    onSetAttributeQuiet ?? onSetAttributeLive
+  );
   const audioGroupLabel = useMemo52(() => {
     const doc = element.element?.ownerDocument;
     const id = element.id;
@@ -62782,7 +62896,7 @@ var FileTree = memo34(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState156, useCallback as useCallback176, useRef as useRef171, useMemo as useMemo77, useLayoutEffect as useLayoutEffect11 } from "react";
+import { useState as useState157, useCallback as useCallback176, useRef as useRef175, useMemo as useMemo78, useLayoutEffect as useLayoutEffect11 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState95, useEffect as useEffect89, useCallback as useCallback80, useRef as useRef104, useMemo as useMemo56 } from "react";
@@ -65199,45 +65313,70 @@ function usePanelLayout(initialState2) {
 }
 
 // src/hooks/useFileManager.ts
-import { useState as useState103, useCallback as useCallback88, useMemo as useMemo59, useRef as useRef114 } from "react";
+import { useState as useState103, useCallback as useCallback88, useMemo as useMemo59, useRef as useRef115 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState102, useCallback as useCallback86, useEffect as useEffect94, useMemo as useMemo58 } from "react";
+import { useState as useState102, useCallback as useCallback86, useEffect as useEffect94, useMemo as useMemo58, useRef as useRef113 } from "react";
+var EMPTY_FILE_LIST = [];
 function useFileTree({ projectId, projectIdRef }) {
-  const [projectDir, setProjectDir] = useState102(null);
-  const [fileTree, setFileTree] = useState102([]);
-  const [compositionPaths, setCompositionPaths] = useState102([]);
-  const [fileTreeLoaded, setFileTreeLoaded] = useState102(false);
+  const [fetched, setFetched] = useState102(null);
+  const current = fetched?.projectId === projectId ? fetched : null;
+  const fileTree = current?.fileTree ?? EMPTY_FILE_LIST;
+  const compositionPaths = current?.compositionPaths ?? EMPTY_FILE_LIST;
+  const projectDir = current?.projectDir ?? null;
+  const fileTreeLoaded = current?.loaded ?? false;
   useEffect94(() => {
-    if (!projectId) {
-      setFileTreeLoaded(false);
-      return;
-    }
+    if (!projectId) return;
     let cancelled = false;
-    setFileTreeLoaded(false);
+    setFetched({ projectId, loaded: false, fileTree: [], compositionPaths: [], projectDir: null });
     fetch(buildProjectApiPath(projectId)).then((r) => r.json()).then((data) => {
       if (cancelled) return;
-      if (data.files) setFileTree(data.files);
-      if (data.compositions) setCompositionPaths(data.compositions);
-      setProjectDir(typeof data.dir === "string" ? data.dir : null);
+      setFetched({
+        projectId,
+        loaded: true,
+        fileTree: data.files ?? [],
+        compositionPaths: data.compositions ?? [],
+        projectDir: typeof data.dir === "string" ? data.dir : null
+      });
       void captureProjectProvenance(projectId, data.files ?? [], data.compositions ?? []);
     }).catch(() => {
-      if (!cancelled) setProjectDir(null);
-    }).finally(() => {
-      if (!cancelled) setFileTreeLoaded(true);
+      if (!cancelled) {
+        setFetched((prev) => prev?.projectId === projectId ? { ...prev, loaded: true } : prev);
+      }
     });
     return () => {
       cancelled = true;
     };
   }, [projectId]);
+  const refreshRequestRef = useRef113(0);
+  const refreshAbortRef = useRef113(null);
   const refreshFileTree = useCallback86(async () => {
     const pid = projectIdRef.current;
     if (!pid) return;
-    const res = await fetch(buildProjectApiPath(pid));
-    const data = await res.json();
-    if (data.files) setFileTree(data.files);
+    refreshAbortRef.current?.abort();
+    const requestId = ++refreshRequestRef.current;
+    const controller = new AbortController();
+    refreshAbortRef.current = controller;
+    let data;
+    try {
+      const res = await fetch(buildProjectApiPath(pid), { signal: controller.signal });
+      data = await res.json();
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      throw err;
+    }
+    if (data.files && requestId === refreshRequestRef.current) {
+      setFetched(
+        (prev) => prev?.projectId === pid ? {
+          ...prev,
+          fileTree: data.files ?? prev.fileTree,
+          // A response that omits `compositions` must not wipe out a
+          // known-good list — only replace it when the field is present.
+          compositionPaths: data.compositions ?? prev.compositionPaths
+        } : prev
+      );
+    }
   }, [projectIdRef]);
-  const compositions = compositionPaths;
   const assets = useMemo58(
     () => fileTree.filter((f) => !f.endsWith(".html") && !f.endsWith(".md") && !f.endsWith(".json")),
     [fileTree]
@@ -65253,17 +65392,16 @@ function useFileTree({ projectId, projectIdRef }) {
   return {
     projectDir,
     fileTree,
-    setFileTree,
     fileTreeLoaded,
     refreshFileTree,
-    compositions,
+    compositions: compositionPaths,
     assets,
     fontAssets
   };
 }
 
 // src/hooks/useEditorSave.ts
-import { useCallback as useCallback87, useRef as useRef113 } from "react";
+import { useCallback as useCallback87, useRef as useRef114 } from "react";
 var FAILURE_BURST_MS = 5e3;
 function useEditorSave({
   editingPathRef,
@@ -65274,13 +65412,13 @@ function useEditorSave({
   setRefreshKey,
   showToast
 }) {
-  const saveRafRef = useRef113(null);
-  const refreshRafRef = useRef113(null);
-  const lastFailureToastAtRef = useRef113(null);
-  const lastFailureReportRef = useRef113(null);
-  const pendingCandidateRef = useRef113(null);
-  const inFlightRef = useRef113(null);
-  const inFlightCandidateRef = useRef113(null);
+  const saveRafRef = useRef114(null);
+  const refreshRafRef = useRef114(null);
+  const lastFailureToastAtRef = useRef114(null);
+  const lastFailureReportRef = useRef114(null);
+  const pendingCandidateRef = useRef114(null);
+  const inFlightRef = useRef114(null);
+  const inFlightCandidateRef = useRef114(null);
   const reportFailure = useCallback87(
     (path, error) => {
       const now2 = Date.now();
@@ -65396,11 +65534,11 @@ function useFileManager({
 }) {
   const [editingFile, setEditingFile] = useState103(null);
   const [revealSourceOffset, setRevealSourceOffset] = useState103(null);
-  const editingPathRef = useRef114(editingFile?.path);
+  const editingPathRef = useRef115(editingFile?.path);
   editingPathRef.current = editingFile?.path;
-  const projectIdRef = useRef114(projectId);
+  const projectIdRef = useRef115(projectId);
   projectIdRef.current = projectId;
-  const importedFontAssetsRef = useRef114([]);
+  const importedFontAssetsRef = useRef115([]);
   const fileVersionScope = useMemo59(
     () => ({ projectId, versions: /* @__PURE__ */ new Map() }),
     [projectId]
@@ -65415,7 +65553,6 @@ function useFileManager({
   const {
     projectDir,
     fileTree,
-    setFileTree,
     fileTreeLoaded,
     refreshFileTree,
     compositions,
@@ -65550,8 +65687,8 @@ function useFileManager({
     },
     [fileVersions, updateEditingFileContent, writeProjectFile]
   );
-  const revealRequestIdRef = useRef114(0);
-  const revealAbortRef = useRef114(null);
+  const revealRequestIdRef = useRef115(0);
+  const revealAbortRef = useRef115(null);
   const handleFileSelect = useCallback88(
     (path) => {
       const pid = projectIdRef.current;
@@ -65799,7 +65936,6 @@ function useFileManager({
     projectDir,
     fileTree,
     fileTreeLoaded,
-    setFileTree,
     // Refs
     editingPathRef,
     projectIdRef,
@@ -65839,7 +65975,7 @@ function useFileManager({
 }
 
 // src/hooks/usePreviewPersistence.ts
-import { useCallback as useCallback89, useRef as useRef115, useState as useState104 } from "react";
+import { useCallback as useCallback89, useRef as useRef116, useState as useState104 } from "react";
 
 // src/utils/gsapUndoRestore.ts
 function elementIdentityKey(el) {
@@ -66075,11 +66211,11 @@ function usePreviewPersistence({
 }) {
   void _recordEdit;
   const [domEditSaveQueuePaused, setDomEditSaveQueuePaused] = useState104(null);
-  const domTextCommitVersionRef = useRef115(0);
-  const showToastRef = useRef115(showToast);
+  const domTextCommitVersionRef = useRef116(0);
+  const showToastRef = useRef116(showToast);
   showToastRef.current = showToast;
-  const domEditSaveQueueRef = useRef115(null);
-  const applyStudioManualEditsToPreviewRef = useRef115(async () => {
+  const domEditSaveQueueRef = useRef116(null);
+  const applyStudioManualEditsToPreviewRef = useRef116(async () => {
   });
   if (!domEditSaveQueueRef.current) {
     domEditSaveQueueRef.current = createDomEditSaveQueue({
@@ -66172,10 +66308,10 @@ function usePreviewPersistence({
 }
 
 // src/hooks/usePreviewDocumentVersion.ts
-import { useCallback as useCallback90, useEffect as useEffect95, useRef as useRef116, useState as useState105 } from "react";
+import { useCallback as useCallback90, useEffect as useEffect95, useRef as useRef117, useState as useState105 } from "react";
 function usePreviewDocumentVersion() {
   const [previewDocumentVersion, setPreviewDocumentVersion] = useState105(0);
-  const refreshTimersRef = useRef116([]);
+  const refreshTimersRef = useRef117([]);
   const refresh = useCallback90(() => {
     for (const id of refreshTimersRef.current) clearTimeout(id);
     refreshTimersRef.current = [];
@@ -66195,10 +66331,10 @@ function usePreviewDocumentVersion() {
 }
 
 // src/hooks/useTimelineEditing.ts
-import { useCallback as useCallback100, useRef as useRef119 } from "react";
+import { useCallback as useCallback100, useRef as useRef121 } from "react";
 
 // src/hooks/useRazorSplit.ts
-import { useCallback as useCallback91, useRef as useRef117 } from "react";
+import { useCallback as useCallback91, useRef as useRef118 } from "react";
 
 // src/utils/razorSplitTransaction.ts
 function targetIdentity(path, target) {
@@ -66216,7 +66352,10 @@ function buildCutTarget(element, target, splitTime) {
     elementDuration: element.duration,
     ...element.playbackStart != null ? { playbackStart: element.playbackStart } : {},
     ...element.playbackRate != null ? { playbackRate: element.playbackRate } : {},
-    ...element.kind === "composition" ? { isComposition: true } : {}
+    ...element.kind === "composition" ? { isComposition: true } : {},
+    // Pin both halves to the current track: unstamped, the runtime's positional
+    // fallback (parseAuthoredTrack) renumbers the new sibling onto a new row.
+    track: resolveElementTrack(element)
   };
 }
 function buildAtomicCutIntents(elements, splitTime, activeCompPath) {
@@ -66330,7 +66469,7 @@ function useRazorSplit({
   forceReloadSdkSession,
   isRecordingRef
 }) {
-  const projectIdRef = useRef117(projectId);
+  const projectIdRef = useRef118(projectId);
   projectIdRef.current = projectId;
   const synchronize = useCallback91(() => {
     let failure;
@@ -66531,22 +66670,25 @@ function useTimelineAssetDropOps({
           (te) => (te.sourceFile || activeCompPath || "index.html") === resolvedTargetPath
         );
         const newElementZIndex = Math.max(1, relevantElements.length + 1);
-        const patchedContent = insertTimelineAssetIntoSource(
-          originalContent,
-          buildTimelineAssetInsertHtml({
-            id: newId,
-            hfId: `hf-${generateId()}`,
-            assetPath: resolvedAssetSrc,
-            kind,
-            start: normalizedStart,
-            duration: normalizedDuration,
-            track: placement.track,
-            zIndex: newElementZIndex,
-            geometry: fitTimelineAssetGeometry(
-              null,
-              resolveTimelineAssetCompositionSize(originalContent)
-            )
-          })
+        const patchedContent = extendRootDurationInSource(
+          insertTimelineAssetIntoSource(
+            originalContent,
+            buildTimelineAssetInsertHtml({
+              id: newId,
+              hfId: `hf-${generateId()}`,
+              assetPath: resolvedAssetSrc,
+              kind,
+              start: normalizedStart,
+              duration: normalizedDuration,
+              track: placement.track,
+              zIndex: newElementZIndex,
+              geometry: fitTimelineAssetGeometry(
+                null,
+                resolveTimelineAssetCompositionSize(originalContent)
+              )
+            })
+          ),
+          normalizedStart + normalizedDuration
         );
         await saveProjectFilesWithHistory({
           projectId: pid,
@@ -66887,7 +67029,16 @@ function useSetElementAttribute({
 }
 
 // src/hooks/useTimelineDeleteOps.ts
-import { useCallback as useCallback95 } from "react";
+import { useCallback as useCallback95, useRef as useRef119 } from "react";
+function applyRippleShifts(survivors, changes) {
+  if (!changes) return survivors;
+  const newStartByElement = new Map(changes.map((c) => [c.element, c.start]));
+  return survivors.map((te) => {
+    const newStart = newStartByElement.get(te);
+    return newStart != null ? { ...te, start: newStart } : te;
+  });
+}
+var deleteGestureSeq = 0;
 function useTimelineDeleteOps({
   projectIdRef,
   activeCompPath,
@@ -66898,8 +67049,10 @@ function useTimelineDeleteOps({
   reloadPreview,
   isRecordingRef,
   forceReloadSdkSession,
-  previewIframeRef
+  previewIframeRef,
+  handleTimelineGroupMove
 }) {
+  const rippleNoticeShownRef = useRef119(false);
   const handleTimelineElementsDelete = useCallback95(
     // fallow-ignore-next-line complexity
     async (selection) => {
@@ -66947,11 +67100,14 @@ function useTimelineDeleteOps({
         if (deleteContentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
           usePlayerStore.getState().setDuration(deleteContentEnd);
         }
+        const coalesceKey = `main-track-ripple-delete:${deleteGestureSeq++}`;
+        const deleteHistoryLabel = "Delete timeline clip";
         try {
           await saveProjectFilesWithHistory({
             projectId: pid,
-            label: "Delete timeline clip",
+            label: deleteHistoryLabel,
             kind: "timeline",
+            coalesceKey,
             files: { [targetPath]: patchedContent },
             readFile: async () => originalContent,
             // remove-element already wrote the removal, so disk holds THAT — not the
@@ -66965,15 +67121,53 @@ function useTimelineDeleteOps({
           throw error;
         }
         const deletedKeys = new Set(sameFile.map((te) => te.key ?? te.id));
-        usePlayerStore.getState().setElements(timelineElements.filter((te) => !deletedKeys.has(te.key ?? te.id)));
+        const survivors = timelineElements.filter((te) => !deletedKeys.has(te.key ?? te.id));
+        const rippleShifts = resolveMainTrackDeleteRippleShifts(
+          survivors,
+          sameFile,
+          usePlayerStore.getState().rippleEditEnabled
+        );
+        let rippleApplied = null;
+        let rippleFailed = false;
+        if (rippleShifts) {
+          const rippleChanges = resolveShiftedElements(survivors, rippleShifts);
+          try {
+            await handleTimelineGroupMove(rippleChanges, {
+              coalesceKey,
+              coalesceMs: Number.POSITIVE_INFINITY,
+              // Coalescing keeps the LAST entry's label; without this the undo
+              // toast reads "Undid Move timeline clips" after a delete, naming
+              // the ripple's mechanics instead of what the user actually did.
+              label: deleteHistoryLabel,
+              // This call gets its own, more specific failure toast below —
+              // the generic one would tell the user about one action twice.
+              suppressFailureToast: true
+            });
+            rippleApplied = rippleChanges;
+          } catch (error) {
+            rippleFailed = true;
+            console.error("[Timeline] ripple-edit failed to persist after delete", error);
+            showToast("Clip deleted, but the gap could not be closed.", "error");
+          }
+        }
+        usePlayerStore.getState().setElements(applyRippleShifts(survivors, rippleApplied));
         usePlayerStore.getState().setSelectedElementId(null);
         usePlayerStore.getState().setSelectedElementIds(/* @__PURE__ */ new Set());
         forceReloadSdkSession?.();
         reloadPreview();
-        showToast(
-          `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
-          "info"
-        );
+        if (!rippleFailed) {
+          showToast(
+            `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
+            "info"
+          );
+        }
+        if (rippleApplied && !rippleNoticeShownRef.current) {
+          rippleNoticeShownRef.current = true;
+          showToast(
+            "Ripple closed the gap on the main track. Undo (\u2318Z) restores it, or turn off Ripple in the timeline toolbar.",
+            "info"
+          );
+        }
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete timeline clip";
         showToast(message);
@@ -66989,7 +67183,8 @@ function useTimelineDeleteOps({
       reloadPreview,
       isRecordingRef,
       forceReloadSdkSession,
-      previewIframeRef
+      previewIframeRef,
+      handleTimelineGroupMove
     ]
   );
   const handleTimelineElementDelete = useCallback95(
@@ -67593,21 +67788,22 @@ function useTimelineGroupEditing({
       syncPreviewContentDuration(previewIframeRef.current);
       const coalesceKey = options?.coalesceKey ?? moveCoalesceKey(changes);
       const coalesceMs = options?.coalesceMs;
-      return enqueueGroupOperation("Move timeline clips", async (projectId) => {
+      const label = options?.label ?? "Move timeline clips";
+      return enqueueGroupOperation(label, async (projectId) => {
         await options?.beforeTiming;
         const handledBySdk = await trySdkBatchPersist({
           changes,
           sdkChanges: toSdkTimingChanges(changes, (change) => ({ start: change.start })),
           eligible: changes.every((change) => change.track == null),
           needsExtension,
-          label: "Move timeline clips",
+          label,
           coalesceKey,
           coalesceMs
         });
         if (!handledBySdk) {
           await persistServerBatch(
             projectId,
-            "Move timeline clips",
+            label,
             changes.map((change) => ({
               element: change.element,
               buildPatches: (original, target) => buildTimelineMoveTimingPatch(
@@ -67628,7 +67824,7 @@ function useTimelineGroupEditing({
             projectId,
             iframe: previewIframeRef.current,
             reloadPreview,
-            label: "Move timeline clips",
+            label,
             errorLabel: "Failed to shift GSAP positions",
             coalesceKey,
             recordEdit,
@@ -67647,7 +67843,11 @@ function useTimelineGroupEditing({
         }
       }).catch((error) => {
         rollbackDuration();
-        showToast(getStudioSaveErrorMessage(error), "error");
+        if (options?.suppressFailureToast) {
+          console.error("[Timeline] group move failed to persist", error);
+        } else {
+          showToast(getStudioSaveErrorMessage(error), "error");
+        }
         throw error;
       });
     },
@@ -67765,10 +67965,10 @@ function useTimelineGroupEditing({
 }
 
 // src/hooks/useBlockedTimelineEditToast.ts
-import { useCallback as useCallback99, useRef as useRef118 } from "react";
+import { useCallback as useCallback99, useRef as useRef120 } from "react";
 var BLOCKED_TOAST_INTERVAL_MS = 1500;
 function useBlockedTimelineEditToast(showToast) {
-  const lastAtRef = useRef118(0);
+  const lastAtRef = useRef120(0);
   return useCallback99(
     (_element) => {
       const now2 = Date.now();
@@ -67800,9 +68000,9 @@ function useTimelineEditing({
   invalidateGsapCache,
   handleDomZIndexReorderCommitRef
 }) {
-  const projectIdRef = useRef119(projectId);
+  const projectIdRef = useRef121(projectId);
   projectIdRef.current = projectId;
-  const editQueueRef = useRef119(Promise.resolve());
+  const editQueueRef = useRef121(Promise.resolve());
   const enqueueEdit = useCallback100(
     (element, label, buildPatches, coalesceKey) => {
       if (isRecordingRef?.current) {
@@ -68104,7 +68304,8 @@ function useTimelineEditing({
     reloadPreview,
     isRecordingRef,
     forceReloadSdkSession,
-    previewIframeRef
+    previewIframeRef,
+    handleTimelineGroupMove: groupEditing.handleTimelineGroupMove
   });
   const { handleTimelineAssetDrop, handleTimelineFileDrop, handleTimelineCompositionDrop } = useTimelineAssetDropOps({
     projectIdRef,
@@ -68172,7 +68373,7 @@ function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps,
 import { useCallback as useCallback123 } from "react";
 
 // src/hooks/useAskAgentModal.ts
-import { useState as useState106, useCallback as useCallback101, useRef as useRef120, useEffect as useEffect96 } from "react";
+import { useState as useState106, useCallback as useCallback101, useRef as useRef122, useEffect as useEffect96 } from "react";
 function useAskAgentModal({
   activeCompPath,
   projectDir,
@@ -68188,7 +68389,7 @@ function useAskAgentModal({
   );
   const [copiedAgentPrompt, setCopiedAgentPrompt] = useState106(false);
   const [agentModalOpen, setAgentModalOpen] = useState106(false);
-  const copiedAgentTimerRef = useRef120(null);
+  const copiedAgentTimerRef = useRef122(null);
   const preloadAgentPromptSnippet = useCallback101(
     async (selection) => {
       const pid = projectIdRef.current;
@@ -68283,7 +68484,7 @@ function useAskAgentModal({
 }
 
 // src/hooks/useDomSelection.ts
-import { useState as useState107, useCallback as useCallback102, useRef as useRef121, useEffect as useEffect98 } from "react";
+import { useState as useState107, useCallback as useCallback102, useRef as useRef123, useEffect as useEffect98 } from "react";
 
 // src/utils/domEditHelpers.ts
 function domEditSelectionsTargetSame(a, b) {
@@ -68510,14 +68711,14 @@ function useDomSelection({
   const [domEditGroupSelections, setDomEditGroupSelections] = useState107([]);
   const [domEditHoverSelection, setDomEditHoverSelection] = useState107(null);
   const [activeGroupElement, setActiveGroupElementState] = useState107(null);
-  const rightPanelTabRef = useRef121(rightPanelTab);
+  const rightPanelTabRef = useRef123(rightPanelTab);
   rightPanelTabRef.current = rightPanelTab;
-  const domEditSelectionRef = useRef121(domEditSelection);
-  const domEditGroupSelectionsRef = useRef121(domEditGroupSelections);
-  const domEditHoverSelectionRef = useRef121(domEditHoverSelection);
-  const activeGroupElementRef = useRef121(activeGroupElement);
-  const compositionIdentityRef = useRef121({ activeCompPath, projectId });
-  const timelineSelectSeqRef = useRef121(0);
+  const domEditSelectionRef = useRef123(domEditSelection);
+  const domEditGroupSelectionsRef = useRef123(domEditGroupSelections);
+  const domEditHoverSelectionRef = useRef123(domEditHoverSelection);
+  const activeGroupElementRef = useRef123(activeGroupElement);
+  const compositionIdentityRef = useRef123({ activeCompPath, projectId });
+  const timelineSelectSeqRef = useRef123(0);
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   domEditHoverSelectionRef.current = domEditHoverSelection;
@@ -68712,7 +68913,7 @@ function useDomSelection({
     },
     [applyDomSelection, buildDomSelectionForTimelineElement]
   );
-  const refreshDomEditGroupSelectionsFromPreviewRef = useRef121(async () => {
+  const refreshDomEditGroupSelectionsFromPreviewRef = useRef123(async () => {
   });
   const refreshDomEditSelectionFromPreview = useCallback102(
     // fallow-ignore-next-line complexity
@@ -68870,7 +69071,7 @@ function useDomSelection({
 }
 
 // src/hooks/usePreviewInteraction.ts
-import { useCallback as useCallback103, useRef as useRef122 } from "react";
+import { useCallback as useCallback103, useRef as useRef124 } from "react";
 var CYCLE_RADIUS_PX = 6;
 var CYCLE_WINDOW_MS = 600;
 var DOUBLE_CLICK_MS = 400;
@@ -68887,8 +69088,8 @@ function usePreviewInteraction({
   setActiveGroupElement,
   onClickToSource
 }) {
-  const cycleRef = useRef122(null);
-  const lastDownRef = useRef122(null);
+  const cycleRef = useRef124(null);
+  const lastDownRef = useRef124(null);
   const pausePreviewPlayback = useCallback103(() => {
     const pausedTime = pauseStudioPreviewPlayback(previewIframeRef.current);
     const playerStore = usePlayerStore.getState();
@@ -69046,7 +69247,7 @@ function usePreviewInteraction({
 }
 
 // src/hooks/useDomEditCommits.ts
-import { useCallback as useCallback108, useRef as useRef125 } from "react";
+import { useCallback as useCallback108, useRef as useRef127 } from "react";
 import { findUnsafeDomPatchValues as findUnsafeDomPatchValues2 } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/utils/studioFontHelpers.ts
@@ -69207,7 +69408,7 @@ function useDomEditPositionPatchCommit({
 }
 
 // src/hooks/useDomEditTextCommits.ts
-import { useCallback as useCallback106, useRef as useRef124 } from "react";
+import { useCallback as useCallback106, useRef as useRef126 } from "react";
 
 // src/hooks/domEditTextFieldCommitOps.ts
 function hasSameKeysInSamePositions(originalFields, nextFields) {
@@ -69262,7 +69463,7 @@ function planDomTextCommit(originalTextFields, nextTextFields, plainTextContent)
 }
 
 // src/hooks/useDomEditAttributeCommits.ts
-import { useCallback as useCallback105, useRef as useRef123 } from "react";
+import { useCallback as useCallback105, useRef as useRef125 } from "react";
 import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR5, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG8 } from "@hyperframes/core/audio-groups";
 function resolveFullAttrName(attr, prefixData) {
   return prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
@@ -69302,7 +69503,7 @@ function useDomEditAttributeCommits({
   refreshDomEditSelectionFromPreview,
   persistDomEditOperations
 }) {
-  const domAttributeCommitVersionRef = useRef123(/* @__PURE__ */ new Map());
+  const domAttributeCommitVersionRef = useRef125(/* @__PURE__ */ new Map());
   const commitDataAttribute = useCallback105(
     async (attr, value, options) => {
       if (!domEditSelection) return;
@@ -69584,8 +69785,8 @@ function useDomEditTextCommits({
   persistDomEditOperations,
   resolveImportedFontAsset
 }) {
-  const domTextCommitVersionRef = useRef124(/* @__PURE__ */ new Map());
-  const domStyleCommitVersionRef = useRef124(/* @__PURE__ */ new Map());
+  const domTextCommitVersionRef = useRef126(/* @__PURE__ */ new Map());
+  const domStyleCommitVersionRef = useRef126(/* @__PURE__ */ new Map());
   const {
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
@@ -70496,7 +70697,7 @@ function useDomEditCommits({
     },
     [fileTree, projectId, importedFontAssetsRef]
   );
-  const reportedUnresolvableRef = useRef125(/* @__PURE__ */ new Set());
+  const reportedUnresolvableRef = useRef127(/* @__PURE__ */ new Set());
   const performPersistDomEditOperations = useCallback108(
     // fallow-ignore-next-line complexity
     async (selection, operations, options, expectedProjectId) => {
@@ -70741,7 +70942,7 @@ function useDomEditCommits({
     showToast,
     commitPositionPatchToHtml
   });
-  const { handleDomEditElementDelete, handleDomEditElementsDelete, handleDomZIndexReorderCommit } = useElementLifecycleOps({
+  const { handleDomEditElementsDelete, handleDomZIndexReorderCommit } = useElementLifecycleOps({
     activeCompPath,
     showToast,
     writeProjectFile,
@@ -70774,7 +70975,6 @@ function useDomEditCommits({
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,
-    handleDomEditElementDelete,
     handleDomEditElementsDelete,
     handleDomZIndexReorderCommit
   };
@@ -70782,13 +70982,21 @@ function useDomEditCommits({
 
 // src/hooks/useGroupCommits.ts
 import { useCallback as useCallback109 } from "react";
-function computeGroupGeometry(members) {
+function resolveAuthoredTrack(selection, timelineElements) {
+  const id = findMatchingTimelineElementId(selection, timelineElements);
+  if (!id) return void 0;
+  const match = timelineElements.find((el) => (el.key ?? el.id) === id);
+  if (!match) return void 0;
+  return resolveElementTrack(match);
+}
+function computeGroupGeometry(members, timelineElements) {
   const boxes = members.map((m) => ({
     target: buildDomEditPatchTarget(m),
     left: m.element.offsetLeft,
     top: m.element.offsetTop,
     right: m.element.offsetLeft + m.element.offsetWidth,
-    bottom: m.element.offsetTop + m.element.offsetHeight
+    bottom: m.element.offsetTop + m.element.offsetHeight,
+    track: resolveAuthoredTrack(m, timelineElements)
   }));
   const left = Math.min(...boxes.map((b) => b.left));
   const top = Math.min(...boxes.map((b) => b.top));
@@ -70797,9 +71005,29 @@ function computeGroupGeometry(members) {
   return {
     bbox: { left, top, width, height },
     targets: boxes.map((b) => b.target),
-    rebases: boxes.map((b) => ({ target: b.target, left: b.left - left, top: b.top - top }))
+    rebases: boxes.map((b) => ({
+      target: b.target,
+      left: b.left - left,
+      top: b.top - top,
+      track: b.track
+    }))
   };
 }
+function resolveGroupChildTracks(group, timelineElements) {
+  const sourceFile = group.sourceFile || "index.html";
+  const result = [];
+  for (const child of Array.from(group.element.children)) {
+    const id = child.id || void 0;
+    const hfId = readHfId(child);
+    if (!id && !hfId) continue;
+    const track2 = resolveAuthoredTrack(
+      { id, hfId, sourceFile, isCompositionHost: false },
+      timelineElements
+    );
+    result.push({ target: buildDomEditPatchTarget({ id, hfId }), track: track2 });
+  }
+  return result;
+}
 async function commitStructuralMutation(pid, targetPath, route, body, label, deps) {
   const originalContent = await readProjectFileContent(pid, targetPath);
   const mutateResponse = await fetch(
@@ -70831,7 +71059,7 @@ async function commitStructuralMutation(pid, targetPath, route, body, label, dep
   return mutateData;
 }
 function useGroupCommits(params) {
-  const { activeCompPath, showToast, projectIdRef } = params;
+  const { activeCompPath, showToast, projectIdRef, timelineElements } = params;
   const groupSelection = useCallback109(
     async (members) => {
       const pid = projectIdRef.current;
@@ -70843,7 +71071,7 @@ function useGroupCommits(params) {
       }
       const doc = members[0].element.ownerDocument;
       const groupId = `Group ${doc.querySelectorAll("[data-hf-group]").length + 1}`;
-      const { bbox, targets, rebases } = computeGroupGeometry(members);
+      const { bbox, targets, rebases } = computeGroupGeometry(members, timelineElements);
       try {
         const data = await commitStructuralMutation(
           pid,
@@ -70859,19 +71087,20 @@ function useGroupCommits(params) {
         return null;
       }
     },
-    [activeCompPath, projectIdRef, showToast, params]
+    [activeCompPath, projectIdRef, showToast, params, timelineElements]
   );
   const ungroupSelection = useCallback109(
     async (group) => {
       const pid = projectIdRef.current;
       if (!pid) return;
       const targetPath = group.sourceFile || activeCompPath || "index.html";
+      const childTracks = resolveGroupChildTracks(group, timelineElements);
       try {
         await commitStructuralMutation(
           pid,
           targetPath,
           "unwrap-elements",
-          { target: buildDomEditPatchTarget(group) },
+          { target: buildDomEditPatchTarget(group), childTracks },
           "Ungroup elements",
           params
         );
@@ -70879,13 +71108,13 @@ function useGroupCommits(params) {
         showToast(error instanceof Error ? error.message : "Failed to ungroup elements", "error");
       }
     },
-    [activeCompPath, projectIdRef, showToast, params]
+    [activeCompPath, projectIdRef, showToast, params, timelineElements]
   );
   return { groupSelection, ungroupSelection };
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback115, useMemo as useMemo60, useRef as useRef127 } from "react";
+import { useCallback as useCallback115, useMemo as useMemo60, useRef as useRef129 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -71680,7 +71909,7 @@ function useGsapKeyframeOps({
 }
 
 // src/hooks/useGsapPropertyDebounce.ts
-import { useCallback as useCallback113, useEffect as useEffect99, useRef as useRef126 } from "react";
+import { useCallback as useCallback113, useEffect as useEffect99, useRef as useRef128 } from "react";
 import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
@@ -71696,9 +71925,9 @@ function mergeTweenProperties(sdkSession, animationId, edited, kind) {
   }
 }
 function useGsapPropertyDebounce(commitMutationSafely, sdk) {
-  const pendingPropertyEditRef = useRef126(null);
-  const debounceTimerRef = useRef126(null);
-  const sdkRef = useRef126(sdk);
+  const pendingPropertyEditRef = useRef128(null);
+  const debounceTimerRef = useRef128(null);
+  const sdkRef = useRef128(sdk);
   sdkRef.current = sdk;
   const flushPendingPropertyEdit = useCallback113(async () => {
     const pending2 = pendingPropertyEditRef.current;
@@ -72129,9 +72358,9 @@ function instantPatchesFor(options) {
 }
 function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, publishSdkSession, writeProjectFile, forceReloadSdkSession }) {
   const activeProjectId = projectIdRef.current;
-  const activeCompPathRef = useRef127(activeCompPath);
+  const activeCompPathRef = useRef129(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const serializerRef = useRef127(createKeyedSerializer());
+  const serializerRef = useRef129(createKeyedSerializer());
   const recordMutationEdit = useCallback115(async (targetPath, result, options) => {
     if (result.before == null || result.after == null) return;
     await editHistory.recordEdit({
@@ -72312,10 +72541,10 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
 }
 
 // src/hooks/useDomEditWiring.ts
-import { useCallback as useCallback119, useEffect as useEffect101, useRef as useRef130 } from "react";
+import { useCallback as useCallback119, useEffect as useEffect101, useRef as useRef132 } from "react";
 
 // src/hooks/useDomEditPreviewSync.ts
-import { useEffect as useEffect100, useRef as useRef128 } from "react";
+import { useEffect as useEffect100, useRef as useRef130 } from "react";
 function useDomEditPreviewSync({
   previewIframe,
   activeCompPath,
@@ -72394,7 +72623,7 @@ function useDomEditPreviewSync({
     applyStudioManualEditsToPreviewRef,
     gsapCacheVersion
   ]);
-  const openSourceRef = useRef128(openSourceForSelection);
+  const openSourceRef = useRef130(openSourceForSelection);
   openSourceRef.current = openSourceForSelection;
   useEffect100(
     // fallow-ignore-next-line complexity
@@ -72492,7 +72721,7 @@ function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
 }
 
 // src/hooks/useGsapSelectionHandlers.ts
-import { useCallback as useCallback118, useRef as useRef129 } from "react";
+import { useCallback as useCallback118, useRef as useRef131 } from "react";
 function useGsapSelectionHandlers({
   domEditSelection,
   updateGsapProperty,
@@ -72516,7 +72745,7 @@ function useGsapSelectionHandlers({
   selectedGsapAnimations,
   showToast
 }) {
-  const lastSelectionRef = useRef129(null);
+  const lastSelectionRef = useRef131(null);
   if (domEditSelection) lastSelectionRef.current = domEditSelection;
   const resolveWriteSelection2 = useCallback118(
     (selectionOverride) => selectionOverride === void 0 ? domEditSelection ?? lastSelectionRef.current : selectionOverride,
@@ -72860,7 +73089,7 @@ function useDomEditWiring({
     const key2 = matchKey ? matchKey.key ?? matchKey.id : null;
     if (key2 && key2 !== selectedElementId) setSelectedElementId(key2);
   }, [domEditSelection?.id]);
-  const prevRefreshKeyRef = useRef130(refreshKey);
+  const prevRefreshKeyRef = useRef132(refreshKey);
   useEffect101(() => {
     if (refreshKey !== prevRefreshKeyRef.current) {
       prevRefreshKeyRef.current = refreshKey;
@@ -73961,7 +74190,7 @@ function useGsapAwareEditing({
 }
 
 // src/hooks/useStudioSelectionPublisher.ts
-import { useEffect as useEffect102, useRef as useRef131 } from "react";
+import { useEffect as useEffect102, useRef as useRef133 } from "react";
 
 // src/utils/studioSelectionSnapshot.ts
 function round34(value) {
@@ -74052,8 +74281,8 @@ function useStudioSelectionPublisher({
   previewDocumentVersion,
   refreshDomEditSelectionFromPreview
 }) {
-  const lastSelectionRefreshKeyRef = useRef131(refreshKey);
-  const pendingSelectionRefreshKeyRef = useRef131(null);
+  const lastSelectionRefreshKeyRef = useRef133(refreshKey);
+  const pendingSelectionRefreshKeyRef = useRef133(null);
   useEffect102(() => {
     if (!projectId) return;
     const selection = domEditSelection?.element.isConnected ? buildStudioSelectionSnapshot({
@@ -74156,6 +74385,16 @@ function useKeyframeEaseCommits({
 function membersForDelete(selection, group, options) {
   return options?.expandGroup && group.length > 0 ? group : [selection];
 }
+function timelineElementsForDelete(members, elements) {
+  const matches = [];
+  for (const member of members) {
+    const id = findMatchingTimelineElementId(member, elements);
+    const match = id ? elements.find((el) => (el.key ?? el.id) === id) : void 0;
+    if (!match) return null;
+    matches.push(match);
+  }
+  return matches;
+}
 
 // src/hooks/useDomEditSession.ts
 function useDomEditSession({
@@ -74196,7 +74435,8 @@ function useDomEditSession({
   getSidebarTab,
   sdkSession,
   publishSdkSession,
-  forceReloadSdkSession
+  forceReloadSdkSession,
+  handleTimelineElementsDelete
 }) {
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   void _setRefreshKey;
@@ -74366,9 +74606,8 @@ function useDomEditSession({
       readProjectFile,
       publishSession: publishSdkSession
     }) : void 0,
-    // Resolver shadow for the z-index reorder edit: it takes the server path (no
-    // SDK persist), but the tripwire is decoupled from cutover — record whether
-    // the SDK resolves each reordered element (the reorderElements op's targets).
+    // Z-index reorder takes the server path (no SDK persist); this decoupled
+    // tripwire still records whether the SDK resolves each reordered target.
     onReorderShadow: sdkSession ? (targets) => {
       let reorderSrcPromise;
       const reorderSrc = activeCompPath ? () => reorderSrcPromise ??= readProjectFile(activeCompPath) : void 0;
@@ -74384,7 +74623,8 @@ function useDomEditSession({
     projectIdRef,
     reloadPreview,
     clearDomSelection,
-    forceReloadSdkSession
+    forceReloadSdkSession,
+    timelineElements
   });
   const handleDomEditElementDelete = useCallback123(
     async (selection, options) => {
@@ -74393,9 +74633,21 @@ function useDomEditSession({
         return;
       }
       const members = membersForDelete(selection, domEditGroupSelectionsRef.current, options);
+      const timelineTargets = timelineElementsForDelete(members, timelineElements);
+      if (timelineTargets) {
+        await handleTimelineElementsDelete(timelineTargets);
+        return;
+      }
       await handleDomEditElementsDelete(members);
     },
-    [domEditGroupSelectionsRef, handleDomEditElementsDelete, isRecordingRef, showToast]
+    [
+      domEditGroupSelectionsRef,
+      handleDomEditElementsDelete,
+      handleTimelineElementsDelete,
+      isRecordingRef,
+      showToast,
+      timelineElements
+    ]
   );
   const handleGroupSelection = useCallback123(() => {
     const group = domEditGroupSelectionsRef.current;
@@ -74646,7 +74898,7 @@ function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections)
 import { useEffect as useEffect105 } from "react";
 
 // src/hooks/useSdkSession.ts
-import { useState as useState108, useEffect as useEffect104, useCallback as useCallback124, useRef as useRef132 } from "react";
+import { useState as useState108, useEffect as useEffect104, useCallback as useCallback124, useRef as useRef134 } from "react";
 import { openComposition as openComposition3 } from "@hyperframes/sdk";
 
 // src/hooks/externalFileReloadBus.ts
@@ -74696,15 +74948,15 @@ function disposeSdkSession(session) {
 }
 function useSdkSession(projectId, activeCompPath) {
   const [ownedSession, setOwnedSession] = useState108(null);
-  const ownedSessionRef = useRef132(null);
-  const sessionOwnersRef = useRef132(/* @__PURE__ */ new WeakMap());
-  const generationRef = useRef132(0);
-  const projectIdRef = useRef132(projectId);
+  const ownedSessionRef = useRef134(null);
+  const sessionOwnersRef = useRef134(/* @__PURE__ */ new WeakMap());
+  const generationRef = useRef134(0);
+  const projectIdRef = useRef134(projectId);
   projectIdRef.current = projectId;
-  const activeCompPathRef = useRef132(activeCompPath);
+  const activeCompPathRef = useRef134(activeCompPath);
   activeCompPathRef.current = activeCompPath;
   const [reloadToken, setReloadToken] = useState108(0);
-  const reloadTokenRef = useRef132(reloadToken);
+  const reloadTokenRef = useRef134(reloadToken);
   reloadTokenRef.current = reloadToken;
   useEffect104(
     () => addExternalFileReloadListener((changedPath) => {
@@ -74915,7 +75167,7 @@ async function deleteExternalConflictSnapshot(projectId, filePath) {
 }
 
 // src/hooks/useExternalFileChangeCoordinator.ts
-import { useCallback as useCallback125, useEffect as useEffect106, useRef as useRef133, useState as useState109 } from "react";
+import { useCallback as useCallback125, useEffect as useEffect106, useRef as useRef135, useState as useState109 } from "react";
 function testHotAdapter() {
   const value = globalThis.__HF_STUDIO_HOT_TEST_ADAPTER__;
   if (!value || typeof value !== "object") return null;
@@ -74967,13 +75219,13 @@ function useExternalFileChangeCoordinator({
   onAcceptedPersistedFileChange
 }) {
   const [blocked, setBlocked] = useState109(null);
-  const generationRef = useRef133(0);
-  const mountedRef = useRef133(true);
-  const lastEventIdentityRef = useRef133(null);
-  const blockedRef = useRef133(blocked);
-  const snapshotWriteTailRef = useRef133(Promise.resolve());
-  const drainingRef = useRef133(false);
-  const pendingPayloadRef = useRef133(null);
+  const generationRef = useRef135(0);
+  const mountedRef = useRef135(true);
+  const lastEventIdentityRef = useRef135(null);
+  const blockedRef = useRef135(blocked);
+  const snapshotWriteTailRef = useRef135(Promise.resolve());
+  const drainingRef = useRef135(false);
+  const pendingPayloadRef = useRef135(null);
   blockedRef.current = blocked;
   useEffect106(() => {
     mountedRef.current = true;
@@ -75330,7 +75582,7 @@ function useStudioExternalFileChanges({
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback127, useMemo as useMemo61, useRef as useRef134, useState as useState110 } from "react";
+import { useCallback as useCallback127, useMemo as useMemo61, useRef as useRef136, useState as useState110 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -75539,7 +75791,7 @@ function useBlockHandlers({
       blockCtxDeps.showToast
     ]
   );
-  const installingBlockRef = useRef134(false);
+  const installingBlockRef = useRef136(false);
   const runBlockInstall = useCallback127(
     async (blockName, install) => {
       if (installingBlockRef.current) {
@@ -75650,26 +75902,9 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback128, useEffect as useEffect107, useRef as useRef135 } from "react";
-function iframeContentWindow(iframe) {
-  try {
-    return iframe?.contentWindow ?? null;
-  } catch {
-    return null;
-  }
-}
-function safeAddListener(t, type, h, capture = false) {
-  try {
-    t?.addEventListener(type, h, capture);
-  } catch {
-  }
-}
-function safeRemoveListener(t, type, h) {
-  try {
-    t?.removeEventListener(type, h);
-  } catch {
-  }
-}
+import { useCallback as useCallback128, useEffect as useEffect107, useRef as useRef137 } from "react";
+
+// src/hooks/appHotkeysDispatch.ts
 function handleUndoRedoKey(event, onUndo, onRedo) {
   const key2 = event.key.toLowerCase();
   if (key2 === "z" && !event.shiftKey) {
@@ -75684,18 +75919,6 @@ function handleUndoRedoKey(event, onUndo, onRedo) {
   }
   return false;
 }
-function tryApplyBeatHistory(direction, fileState, showToast) {
-  const ps = usePlayerStore.getState();
-  const beatStack = direction === "undo" ? ps.beatUndo : ps.beatRedo;
-  const beatAt = beatStack[beatStack.length - 1]?.at ?? null;
-  if (beatAt === null) return false;
-  const fileStack = fileState[direction];
-  const fileAt = fileStack[fileStack.length - 1]?.createdAt ?? null;
-  if (fileAt !== null && (direction === "undo" ? beatAt < fileAt : beatAt > fileAt)) return false;
-  const label = direction === "undo" ? ps.undoBeatEdits() : ps.redoBeatEdits();
-  if (label) showToast(`${direction === "undo" ? "Undid" : "Redid"} ${label}`, "info");
-  return true;
-}
 function dispatchModifierKey(event, key2, cb) {
   if (!shouldIgnoreHistoryShortcut(event.target) && handleUndoRedoKey(
     event,
@@ -75787,6 +76010,14 @@ function dispatchPlainKey(event, key2, cb) {
     usePlayerStore.getState().setActiveTool("select");
     return;
   }
+  if (key2 === "a" && !event.shiftKey && !event.altKey) {
+    const { activeTool, setActiveTool } = usePlayerStore.getState();
+    if (activeTool === "razor") {
+      event.preventDefault();
+      setActiveTool("select");
+      return;
+    }
+  }
   if (event.key === "Escape") {
     const { activeTool, selectedElementId, setActiveTool, setSelectedElementId } = usePlayerStore.getState();
     if (activeTool === "razor") {
@@ -75832,6 +76063,39 @@ function dispatchPlainKey(event, key2, cb) {
     cb.onToggleRecording();
   }
 }
+
+// src/hooks/useAppHotkeys.ts
+function iframeContentWindow(iframe) {
+  try {
+    return iframe?.contentWindow ?? null;
+  } catch {
+    return null;
+  }
+}
+function safeAddListener(t, type, h, capture = false) {
+  try {
+    t?.addEventListener(type, h, capture);
+  } catch {
+  }
+}
+function safeRemoveListener(t, type, h) {
+  try {
+    t?.removeEventListener(type, h);
+  } catch {
+  }
+}
+function tryApplyBeatHistory(direction, fileState, showToast) {
+  const ps = usePlayerStore.getState();
+  const beatStack = direction === "undo" ? ps.beatUndo : ps.beatRedo;
+  const beatAt = beatStack[beatStack.length - 1]?.at ?? null;
+  if (beatAt === null) return false;
+  const fileStack = fileState[direction];
+  const fileAt = fileStack[fileStack.length - 1]?.createdAt ?? null;
+  if (fileAt !== null && (direction === "undo" ? beatAt < fileAt : beatAt > fileAt)) return false;
+  const label = direction === "undo" ? ps.undoBeatEdits() : ps.redoBeatEdits();
+  if (label) showToast(`${direction === "undo" ? "Undid" : "Redid"} ${label}`, "info");
+  return true;
+}
 function useAppHotkeys({
   handleTimelineElementsDelete,
   handleTimelineElementSplit,
@@ -75857,7 +76121,7 @@ function useAppHotkeys({
   activeCompPath,
   forceReloadSdkSession
 }) {
-  const previewHistoryCleanupRef = useRef135(null);
+  const previewHistoryCleanupRef = useRef137(null);
   const readHistoryFile = useCallback128(
     (path) => path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
     [readOptionalProjectFile, readProjectFile]
@@ -75921,7 +76185,7 @@ function useAppHotkeys({
   );
   const handleUndo = useCallback128(() => applyHistory("undo"), [applyHistory]);
   const handleRedo = useCallback128(() => applyHistory("redo"), [applyHistory]);
-  const cbRef = useRef135(null);
+  const cbRef = useRef137(null);
   cbRef.current = {
     handleTimelineElementsDelete,
     handleTimelineElementSplit,
@@ -76001,7 +76265,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback129, useRef as useRef136 } from "react";
+import { useCallback as useCallback129, useRef as useRef138 } from "react";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -76107,8 +76371,8 @@ function useClipboard({
   handleDomEditElementDelete,
   previewIframeRef
 }) {
-  const clipboardRef = useRef136(null);
-  const projectIdRef = useRef136(projectId);
+  const clipboardRef = useRef138(null);
+  const projectIdRef = useRef138(projectId);
   projectIdRef.current = projectId;
   const handleCopy2 = useCallback129(() => {
     const { selectedElementId, elements } = usePlayerStore.getState();
@@ -76234,7 +76498,7 @@ function useClipboard({
 }
 
 // src/hooks/useCaptionDetection.ts
-import { useEffect as useEffect108, useRef as useRef137 } from "react";
+import { useEffect as useEffect108, useRef as useRef139 } from "react";
 
 // src/captions/types.ts
 var DEFAULT_STYLE = {
@@ -76486,7 +76750,7 @@ function useCaptionDetection({
   captionSync,
   setRightCollapsed
 }) {
-  const prevCompPathRef = useRef137(activeCompPath);
+  const prevCompPathRef = useRef139(activeCompPath);
   useEffect108(() => {
     if (prevCompPathRef.current !== activeCompPath) {
       prevCompPathRef.current = activeCompPath;
@@ -76591,7 +76855,7 @@ import { useCallback as useCallback132 } from "react";
 import { createElement as createElement3 } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo36, useCallback as useCallback130, useMemo as useMemo62, useRef as useRef138 } from "react";
+import { memo as memo36, useCallback as useCallback130, useMemo as useMemo62, useRef as useRef140 } from "react";
 import { jsx as jsx169, jsxs as jsxs141 } from "react/jsx-runtime";
 var BAR_WIDTH = 2;
 var BAR_STEP = 3;
@@ -76648,8 +76912,8 @@ var AudioWaveform = memo36(function AudioWaveform2({
   sessionEpoch,
   priority
 }) {
-  const canvasRef = useRef138(null);
-  const observerRef = useRef138(null);
+  const canvasRef = useRef140(null);
+  const observerRef = useRef140(null);
   const cacheKey = waveformUrl ?? audioUrl;
   const request = useMemo62(
     () => ({
@@ -76760,7 +77024,7 @@ var AudioWaveform = memo36(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo37, useCallback as useCallback131, useMemo as useMemo63, useRef as useRef139, useState as useState111 } from "react";
+import { memo as memo37, useCallback as useCallback131, useMemo as useMemo63, useRef as useRef141, useState as useState111 } from "react";
 import { jsx as jsx170, jsxs as jsxs142 } from "react/jsx-runtime";
 var ImageThumbnail = memo37(function ImageThumbnail2({
   imageSrc,
@@ -76772,7 +77036,7 @@ var ImageThumbnail = memo37(function ImageThumbnail2({
   rich = false
 }) {
   const [containerWidth, setContainerWidth] = useState111(0);
-  const observerRef = useRef139(null);
+  const observerRef = useRef141(null);
   const request = useMemo63(
     () => ({
       key: createThumbnailKey({ kind: "image", source: imageSrc, rich: Number(rich) }),
@@ -77021,10 +77285,10 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback133, useEffect as useEffect109, useRef as useRef140, useState as useState112 } from "react";
+import { useCallback as useCallback133, useEffect as useEffect109, useRef as useRef142, useState as useState112 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState112(null);
-  const consoleErrorsRef = useRef140([]);
+  const consoleErrorsRef = useRef142([]);
   const resetErrors = useCallback133(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
@@ -77094,7 +77358,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useState as useState113, useCallback as useCallback134, useRef as useRef141 } from "react";
+import { useState as useState113, useCallback as useCallback134, useRef as useRef143 } from "react";
 function useFrameCapture({
   projectId,
   activeCompPath,
@@ -77103,7 +77367,7 @@ function useFrameCapture({
 }) {
   const [captureFrameTime, setCaptureFrameTime] = useState113(0);
   const [capturing, setCapturing] = useState113(false);
-  const capturingRef = useRef141(false);
+  const capturingRef = useRef143(false);
   useMountEffect(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
     return liveTime.subscribe(setCaptureFrameTime);
@@ -77188,7 +77452,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState114, useCallback as useCallback135, useEffect as useEffect110, useRef as useRef142, useMemo as useMemo64 } from "react";
+import { useState as useState114, useCallback as useCallback135, useEffect as useEffect110, useRef as useRef144, useMemo as useMemo64 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -77202,7 +77466,7 @@ function useLintModal(projectId, refreshKey) {
   const [lintModal, setLintModal] = useState114(null);
   const [linting, setLinting] = useState114(false);
   const [backgroundFindings, setBackgroundFindings] = useState114([]);
-  const autoLintRanRef = useRef142(false);
+  const autoLintRanRef = useRef144(false);
   const runLint = useCallback135(
     async (opts) => {
       if (!projectId) return;
@@ -77229,7 +77493,7 @@ function useLintModal(projectId, refreshKey) {
     [projectId]
   );
   const handleLint = useCallback135(() => runLint(), [runLint]);
-  const prevProjectIdRef = useRef142(projectId);
+  const prevProjectIdRef = useRef144(projectId);
   useEffect110(() => {
     if (projectId !== prevProjectIdRef.current) {
       autoLintRanRef.current = false;
@@ -77277,14 +77541,14 @@ function useLintModal(projectId, refreshKey) {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState115, useCallback as useCallback136, useRef as useRef143 } from "react";
+import { useState as useState115, useCallback as useCallback136, useRef as useRef145 } from "react";
 var AUTO_DISMISS_MS2 = 4e3;
 var EXIT_MS2 = 160;
 var MAX_TOASTS = 3;
 var nextToastId = 1;
 function useToast() {
   const [toasts, setToasts] = useState115([]);
-  const timersRef = useRef143(/* @__PURE__ */ new Map());
+  const timersRef = useRef145(/* @__PURE__ */ new Map());
   const clearTimer = useCallback136((id) => {
     const timer = timersRef.current.get(id);
     if (timer) {
@@ -77333,41 +77597,17 @@ function useToast() {
   return { toasts, showToast, dismissToast };
 }
 
-// src/hooks/useCompositionContentLoader.ts
-import { useCallback as useCallback137 } from "react";
-function useCompositionContentLoader({
-  projectId,
-  setEditingFile,
-  setActiveCompPath,
-  showToast
-}) {
-  return useCallback137(
-    (comp) => {
-      if (!projectId) return;
-      setActiveCompPath(comp.endsWith(".html") ? comp : null);
-      setEditingFile({ path: comp, content: null });
-      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`)).then(async (r) => {
-        if (!r.ok) throw new Error(`Failed to load ${comp} (${r.status})`);
-        return r.json();
-      }).then((data) => {
-        if (typeof data.content !== "string") throw new Error(`No content returned for ${comp}`);
-        setEditingFile({ path: comp, content: data.content });
-      }).catch((err) => {
-        showToast(err instanceof Error ? err.message : `Failed to load ${comp}`, "error");
-      });
-    },
-    [projectId, setEditingFile, setActiveCompPath, showToast]
-  );
-}
-
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback138, useEffect as useEffect111, useRef as useRef144, useState as useState116 } from "react";
+import { useCallback as useCallback137, useEffect as useEffect111, useRef as useRef146, useState as useState116 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
-function resolveMasterCompositionPath(fileTree) {
-  if (fileTree.includes("index.html")) return "index.html";
-  return fileTree.find((p) => p.endsWith(".html")) ?? null;
+function resolveMasterCompositionPath(compositions) {
+  if (compositions.includes("index.html")) return "index.html";
+  return compositions.find((p) => p.endsWith(".html")) ?? null;
+}
+function isHydratedFromUrlState(urlState) {
+  return urlState.activeCompPath == null;
 }
 function normalizeStudioUrlPanelTab(tab) {
   if (!tab) return null;
@@ -77590,14 +77830,14 @@ function useStudioUrlState({
   initialState: initialState2
 }) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const hydratedSeekRef = useRef144(initialState2.currentTime == null);
-  const hydratedInitialTimeRef = useRef144(initialState2.currentTime == null);
-  const hydratedSelectionRef = useRef144(initialState2.selection == null);
+  const hydratedSeekRef = useRef146(initialState2.currentTime == null);
+  const hydratedInitialTimeRef = useRef146(initialState2.currentTime == null);
+  const hydratedSelectionRef = useRef146(initialState2.selection == null);
   const [selectionHydrated, setSelectionHydrated] = useState116(initialState2.selection == null);
-  const pendingSelectionRef = useRef144(initialState2.selection);
-  const stableTimeRef = useRef144(initialState2.currentTime);
-  const selectionApplySeqRef = useRef144(0);
-  const buildUrlState = useCallback138(
+  const pendingSelectionRef = useRef146(initialState2.selection);
+  const stableTimeRef = useRef146(initialState2.currentTime);
+  const selectionApplySeqRef = useRef146(0);
+  const buildUrlState = useCallback137(
     () => ({
       activeCompPath,
       currentTime: stableTimeRef.current,
@@ -77608,7 +77848,7 @@ function useStudioUrlState({
     }),
     [activeCompPath, domEditGroupSelections, domEditSelection, rightCollapsed, rightPanelTab]
   );
-  const applyUrlSelection = useCallback138(
+  const applyUrlSelection = useCallback137(
     (selection) => {
       const applySeq = ++selectionApplySeqRef.current;
       if (!selection) {
@@ -77753,7 +77993,7 @@ function useEffectiveTimelineDuration(timelineDuration2, timelineElements) {
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback139, useMemo as useMemo66, useRef as useRef145, useState as useState117 } from "react";
+import { useCallback as useCallback138, useMemo as useMemo66, useRef as useRef147, useState as useState117 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -77812,22 +78052,22 @@ function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, i
 }
 function useDragOverlay(onImportFiles) {
   const [active, setActive] = useState117(false);
-  const counterRef = useRef145(0);
-  const onDragOver = useCallback139((e) => {
+  const counterRef = useRef147(0);
+  const onDragOver = useCallback138((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
   }, []);
-  const onDragEnter = useCallback139((e) => {
+  const onDragEnter = useCallback138((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
     counterRef.current++;
     setActive(true);
   }, []);
-  const onDragLeave = useCallback139(() => {
+  const onDragLeave = useCallback138(() => {
     counterRef.current--;
     if (counterRef.current === 0) setActive(false);
   }, []);
-  const onDrop = useCallback139(
+  const onDrop = useCallback138(
     (e) => {
       counterRef.current = 0;
       setActive(false);
@@ -77840,7 +78080,7 @@ function useDragOverlay(onImportFiles) {
   return { active, onDragOver, onDragEnter, onDragLeave, onDrop };
 }
 function useGlobalFileDrop(handleTimelineFileDrop) {
-  const onDrop = useCallback139(
+  const onDrop = useCallback138(
     (files) => {
       const start = usePlayerStore.getState().currentTime;
       void handleTimelineFileDrop(Array.from(files), { start, track: 0 });
@@ -77851,7 +78091,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 }
 
 // src/components/StudioHeader.tsx
-import { useRef as useRef147 } from "react";
+import { useRef as useRef149 } from "react";
 
 // src/contexts/PanelLayoutContext.tsx
 import { useContext as useContext8, useMemo as useMemo67 } from "react";
@@ -77929,11 +78169,11 @@ function PanelLayoutProvider({
 
 // src/contexts/ViewModeContext.tsx
 import {
-  useCallback as useCallback140,
+  useCallback as useCallback139,
   useContext as useContext9,
   useEffect as useEffect112,
   useMemo as useMemo68,
-  useRef as useRef146,
+  useRef as useRef148,
   useState as useState118
 } from "react";
 import { jsx as jsx172 } from "react/jsx-runtime";
@@ -77961,9 +78201,9 @@ function readHistoryLocation() {
 }
 function useViewModeState() {
   const [viewMode, setMode] = useState118(() => readViewModeFromUrl());
-  const guardsRef = useRef146(/* @__PURE__ */ new Set());
-  const acceptedLocationRef = useRef146(readHistoryLocation());
-  const canSetViewMode = useCallback140((mode) => {
+  const guardsRef = useRef148(/* @__PURE__ */ new Set());
+  const acceptedLocationRef = useRef148(readHistoryLocation());
+  const canSetViewMode = useCallback139((mode) => {
     for (const guard of guardsRef.current) {
       if (!guard(mode)) return false;
     }
@@ -77985,7 +78225,7 @@ function useViewModeState() {
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
   }, [canSetViewMode, viewMode]);
-  const setViewMode = useCallback140(
+  const setViewMode = useCallback139(
     (mode) => {
       if (!canSetViewMode(mode)) return false;
       setMode(mode);
@@ -77995,7 +78235,7 @@ function useViewModeState() {
     },
     [canSetViewMode]
   );
-  const registerViewModeGuard = useCallback140((guard) => {
+  const registerViewModeGuard = useCallback139((guard) => {
     guardsRef.current.add(guard);
     return () => {
       guardsRef.current.delete(guard);
@@ -78209,7 +78449,7 @@ var VIEW_MODE_OPTIONS = [
 ];
 function ViewModeToggle() {
   const { viewMode, setViewMode } = useViewMode();
-  const tabRefs = useRef147([]);
+  const tabRefs = useRef149([]);
   const selectMode = (mode) => {
     if (mode === viewMode) return;
     if (setViewMode(mode)) trackStudioEvent("view_mode_toggle", { mode });
@@ -78436,10 +78676,10 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState120, useCallback as useCallback142, useRef as useRef149, useEffect as useEffect114 } from "react";
+import { useState as useState120, useCallback as useCallback141, useRef as useRef151, useEffect as useEffect114 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback141, useEffect as useEffect113, useRef as useRef148, useState as useState119 } from "react";
+import { useCallback as useCallback140, useEffect as useEffect113, useRef as useRef150, useState as useState119 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -78584,10 +78824,10 @@ function releaseRuntimePreview(r) {
 function useGestureRecording() {
   const [isRecording, setIsRecording] = useState119(false);
   const [recordingDuration, setRecordingDuration] = useState119(0);
-  const isRecordingRef = useRef148(false);
-  const refs = useRef148(createRecordingRefs());
-  const samplesRef = useRef148(refs.current.samples);
-  const trailRef = useRef148(refs.current.trail);
+  const isRecordingRef = useRef150(false);
+  const refs = useRef150(createRecordingRefs());
+  const samplesRef = useRef150(refs.current.samples);
+  const trailRef = useRef150(refs.current.trail);
   useEffect113(() => {
     const r = refs.current;
     return () => {
@@ -78597,7 +78837,7 @@ function useGestureRecording() {
       r.cleanup = null;
     };
   }, []);
-  const startRecording = useCallback141(
+  const startRecording = useCallback140(
     (element, iframeEl, elementEndTime) => {
       if (isRecordingRef.current) return;
       isRecordingRef.current = true;
@@ -78697,7 +78937,7 @@ function useGestureRecording() {
     []
     // No deps — uses refs only for all mutable state
   );
-  const stopRecording = useCallback141(() => {
+  const stopRecording = useCallback140(() => {
     if (!isRecordingRef.current) return [];
     isRecordingRef.current = false;
     const r = refs.current;
@@ -78709,7 +78949,7 @@ function useGestureRecording() {
     setIsRecording(false);
     return frozen;
   }, []);
-  const clearSamples = useCallback141(() => {
+  const clearSamples = useCallback140(() => {
     const r = refs.current;
     r.samples = [];
     r.trail = [];
@@ -78966,13 +79206,13 @@ function useGestureCommit({
 }) {
   const gestureRecording = useGestureRecording();
   const [gestureState, setGestureState] = useState120("idle");
-  const gestureStateRef = useRef149("idle");
-  const recordingAutoStopRef = useRef149(void 0);
-  const recordingStartTimeRef = useRef149(0);
-  const commitInFlightRef = useRef149(false);
-  const capturedSelectionRef = useRef149(null);
+  const gestureStateRef = useRef151("idle");
+  const recordingAutoStopRef = useRef151(void 0);
+  const recordingStartTimeRef = useRef151(0);
+  const commitInFlightRef = useRef151(false);
+  const capturedSelectionRef = useRef151(null);
   useEffect114(() => () => clearInterval(recordingAutoStopRef.current), []);
-  const stopAndCommitRecording = useCallback142(async () => {
+  const stopAndCommitRecording = useCallback141(async () => {
     clearInterval(recordingAutoStopRef.current);
     if (commitInFlightRef.current) {
       return;
@@ -79145,7 +79385,7 @@ function useGestureCommit({
       commitInFlightRef.current = false;
     }
   }, [gestureRecording, showToast, isGestureRecordingRef, domEditSessionRef]);
-  const handleToggleRecording = useCallback142(() => {
+  const handleToggleRecording = useCallback141(() => {
     if (gestureStateRef.current === "recording") {
       void stopAndCommitRecording();
       return;
@@ -79303,20 +79543,21 @@ var GestureTrailOverlay = memo38(function GestureTrailOverlay2({
 });
 
 // src/components/StudioLeftSidebar.tsx
-import { useCallback as useCallback151 } from "react";
+import { useCallback as useCallback150 } from "react";
 
 // src/components/sidebar/LeftSidebar.tsx
 import {
   memo as memo42,
   useState as useState130,
-  useCallback as useCallback150,
+  useCallback as useCallback149,
   useImperativeHandle,
-  useRef as useRef157,
+  useMemo as useMemo72,
+  useRef as useRef159,
   forwardRef as forwardRef3
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo39, useCallback as useCallback143, useEffect as useEffect115, useRef as useRef150, useState as useState121 } from "react";
+import { memo as memo39, useCallback as useCallback142, useEffect as useEffect115, useRef as useRef152, useState as useState121 } from "react";
 import { jsx as jsx175, jsxs as jsxs145 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -79378,6 +79619,7 @@ function CompCard({
   projectId,
   comp,
   isActive,
+  isRoot,
   onSelect,
   onRender,
   isRendering,
@@ -79389,11 +79631,11 @@ function CompCard({
   const [stageSize, setStageSize] = useState121(DEFAULT_PREVIEW_STAGE);
   const [livePreviewLoaded, setLivePreviewLoaded] = useState121(false);
   const [failedThumbnailUrl, setFailedThumbnailUrl] = useState121(null);
-  const iframeRef = useRef150(null);
-  const hoverTimer = useRef150(null);
-  const syncTimer = useRef150(null);
-  const draggedRef = useRef150(false);
-  const requestIframePlaybackSync = useCallback143((shouldPlay) => {
+  const iframeRef = useRef152(null);
+  const hoverTimer = useRef152(null);
+  const syncTimer = useRef152(null);
+  const draggedRef = useRef152(false);
+  const requestIframePlaybackSync = useCallback142((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
       syncTimer.current = null;
@@ -79532,6 +79774,15 @@ function CompCard({
             children: [
               /* @__PURE__ */ jsxs145("div", { className: "flex items-center gap-1", children: [
                 /* @__PURE__ */ jsx175("span", { className: "text-[11px] font-medium text-neutral-300 truncate", children: name }),
+                isRoot && /* @__PURE__ */ jsx175(
+                  "span",
+                  {
+                    "aria-label": "Root composition \u2014 opens automatically on load",
+                    title: "Root composition \u2014 opens automatically on load",
+                    className: "flex-shrink-0 rounded-full bg-neutral-700/60 px-1.5 py-px text-[8px] font-bold uppercase tracking-wide text-neutral-300",
+                    children: "Root"
+                  }
+                ),
                 lintInfo && lintInfo.count > 0 && /* @__PURE__ */ jsx175(
                   "span",
                   {
@@ -79599,6 +79850,7 @@ var CompositionsTab = memo39(function CompositionsTab2({
   projectId,
   compositions,
   activeComposition,
+  masterCompositionPath = null,
   onSelect,
   onRenderComposition,
   onAddToTimeline,
@@ -79615,6 +79867,7 @@ var CompositionsTab = memo39(function CompositionsTab2({
       projectId,
       comp,
       isActive: activeComposition === comp,
+      isRoot: comp === masterCompositionPath,
       onSelect: () => onSelect(comp),
       onRender: onRenderComposition ? () => onRenderComposition(comp) : void 0,
       onAddToTimeline: onAddToTimeline ? () => onAddToTimeline(comp) : void 0,
@@ -79627,7 +79880,7 @@ var CompositionsTab = memo39(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo40, useState as useState127, useCallback as useCallback147, useRef as useRef154, useMemo as useMemo71, useEffect as useEffect121 } from "react";
+import { memo as memo40, useState as useState127, useCallback as useCallback146, useRef as useRef156, useMemo as useMemo71, useEffect as useEffect121 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx176, jsxs as jsxs146 } from "react/jsx-runtime";
@@ -79738,11 +79991,11 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState123, useRef as useRef152, useEffect as useEffect117, useCallback as useCallback145 } from "react";
+import { useState as useState123, useRef as useRef154, useEffect as useEffect117, useCallback as useCallback144 } from "react";
 import { classifyWebAudioMediaRoute } from "@hyperframes/core/runtime/web-audio-route";
 
 // src/components/sidebar/AssetContextMenu.tsx
-import { useCallback as useCallback144, useEffect as useEffect116, useLayoutEffect as useLayoutEffect9, useRef as useRef151, useState as useState122 } from "react";
+import { useCallback as useCallback143, useEffect as useEffect116, useLayoutEffect as useLayoutEffect9, useRef as useRef153, useState as useState122 } from "react";
 import { Fragment as Fragment51, jsx as jsx177, jsxs as jsxs147 } from "react/jsx-runtime";
 function isValidAssetName(name) {
   return name.length > 0 && !/[/\\]/.test(name) && !name.includes("..");
@@ -79757,7 +80010,7 @@ function ContextMenu2({
   onRename,
   onAddAtPlayhead
 }) {
-  const menuRef = useRef151(null);
+  const menuRef = useRef153(null);
   const [pos, setPos] = useState122({ x, y });
   const [mode, setMode] = useState122("menu");
   const [renameDraft, setRenameDraft] = useState122(() => filename(asset));
@@ -79802,7 +80055,7 @@ function ContextMenu2({
       menuRef.current?.querySelector('[role="menuitem"]')?.focus();
     }
   }, [mode]);
-  const commitRename = useCallback144(() => {
+  const commitRename = useCallback143(() => {
     const trimmed = renameDraft.trim();
     if (trimmed === filename(asset)) {
       onClose();
@@ -80008,28 +80261,28 @@ function AudioRow({
   const [contextMenu, setContextMenu] = useState123(null);
   const [playing, setPlaying] = useState123(false);
   const [bars, setBars] = useState123([]);
-  const audioRef = useRef152(null);
-  const actxRef = useRef152(null);
-  const analyserRef = useRef152(null);
-  const sourceRef = useRef152(null);
-  const animRef = useRef152(0);
+  const audioRef = useRef154(null);
+  const actxRef = useRef154(null);
+  const analyserRef = useRef154(null);
+  const sourceRef = useRef154(null);
+  const animRef = useRef154(0);
   const name = basename2(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = resolveMediaPreviewUrl(asset, projectId);
   const isCopied = copyFeedback?.path === asset && copyFeedback.ok;
   const copyFailed = copyFeedback?.path === asset && !copyFeedback.ok;
-  const stopPlayback = useCallback145(() => {
+  const stopPlayback = useCallback144(() => {
     audioRef.current?.pause();
     setPlaying(false);
     cancelAnimationFrame(animRef.current);
   }, []);
-  const pointerDownRef = useRef152(null);
+  const pointerDownRef = useRef154(null);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const requestTimelineFocus = usePlayerStore((s) => s.requestTimelineFocus);
   const elements = usePlayerStore((s) => s.elements);
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const activateRow = useCallback145(() => {
+  const activateRow = useCallback144(() => {
     if (used) {
       const clip = findClipForAsset(elements, asset);
       if (clip) {
@@ -80051,10 +80304,10 @@ function AudioRow({
     setPreviewAsset,
     clearPreviewAsset
   ]);
-  const handlePointerDown = useCallback145((e) => {
+  const handlePointerDown = useCallback144((e) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  const handlePointerUp = useCallback145(
+  const handlePointerUp = useCallback144(
     (e) => {
       const origin = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -80100,7 +80353,7 @@ function AudioRow({
     }
     return () => cancelAnimationFrame(animRef.current);
   }, [playing]);
-  const togglePlay = useCallback145(async () => {
+  const togglePlay = useCallback144(async () => {
     if (playing) {
       stopPlayback();
       if (stopCurrentPreview === stopPlayback) stopCurrentPreview = null;
@@ -80298,7 +80551,7 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState126, useEffect as useEffect120, useRef as useRef153, useCallback as useCallback146 } from "react";
+import { useState as useState126, useEffect as useEffect120, useRef as useRef155, useCallback as useCallback145 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
 import { useState as useState125, useEffect as useEffect119 } from "react";
@@ -80436,16 +80689,16 @@ function AssetCard({
   const probedDuration = useProbedDuration(serveUrl, !isVideo || duration != null);
   const resolvedDuration = duration ?? probedDuration ?? void 0;
   const durationLabel = formatDuration(resolvedDuration ?? 0);
-  const pointerDownRef = useRef153(null);
+  const pointerDownRef = useRef155(null);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const requestTimelineFocus = usePlayerStore((s) => s.requestTimelineFocus);
   const elements = usePlayerStore((s) => s.elements);
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const handlePointerDown = useCallback146((e) => {
+  const handlePointerDown = useCallback145((e) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  const activateCard = useCallback146(() => {
+  const activateCard = useCallback145(() => {
     if (used) {
       const clip = findClipForAsset(elements, asset);
       if (clip) {
@@ -80467,7 +80720,7 @@ function AssetCard({
     setPreviewAsset,
     clearPreviewAsset
   ]);
-  const handlePointerUp = useCallback146(
+  const handlePointerUp = useCallback145(
     (e) => {
       const origin = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -80761,7 +81014,7 @@ var AssetsTab = memo40(function AssetsTab2({
   onRename,
   onAddAssetToTimeline
 }) {
-  const fileInputRef = useRef154(null);
+  const fileInputRef = useRef156(null);
   const [dragOver, setDragOver] = useState127(false);
   const [copyFeedback, setCopyFeedback] = useState127(null);
   const [importing, setImporting] = useState127(false);
@@ -80770,7 +81023,7 @@ var AssetsTab = memo40(function AssetsTab2({
   const [searchQuery, setSearchQuery] = useState127("");
   const [viewMode, setViewMode] = useState127("local");
   const [manifest, setManifest] = useState127(/* @__PURE__ */ new Map());
-  const manifest404Ref = useRef154(/* @__PURE__ */ new Set());
+  const manifest404Ref = useRef156(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
   useEffect121(() => {
     if (manifest404Ref.current.has(projectId)) return;
@@ -80799,7 +81052,7 @@ var AssetsTab = memo40(function AssetsTab2({
       cancelled = true;
     };
   }, [projectId, assetsKey]);
-  const handleImport = useCallback147(
+  const handleImport = useCallback146(
     async (files) => {
       if (!onImport) return;
       setImporting(true);
@@ -80811,7 +81064,7 @@ var AssetsTab = memo40(function AssetsTab2({
     },
     [onImport]
   );
-  const handleDrop = useCallback147(
+  const handleDrop = useCallback146(
     (e) => {
       e.preventDefault();
       setDragOver(false);
@@ -80819,7 +81072,7 @@ var AssetsTab = memo40(function AssetsTab2({
     },
     [handleImport]
   );
-  const handleCopyPath = useCallback147(async (path) => {
+  const handleCopyPath = useCallback146(async (path) => {
     const copied = await copyTextToClipboard(path);
     setCopyFeedback({ path, ok: copied });
     setTimeout(() => setCopyFeedback(null), copied ? 1500 : 3e3);
@@ -81029,11 +81282,11 @@ var AssetsTab = memo40(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo41, useState as useState129, useCallback as useCallback149, useRef as useRef156, useEffect as useEffect123 } from "react";
+import { memo as memo41, useState as useState129, useCallback as useCallback148, useRef as useRef158, useEffect as useEffect123 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 
 // src/components/sidebar/PromptPreviewModal.tsx
-import { useState as useState128, useCallback as useCallback148, useEffect as useEffect122, useRef as useRef155 } from "react";
+import { useState as useState128, useCallback as useCallback147, useEffect as useEffect122, useRef as useRef157 } from "react";
 import { jsx as jsx183, jsxs as jsxs152 } from "react/jsx-runtime";
 function PromptPreviewModal({
   title,
@@ -81043,9 +81296,9 @@ function PromptPreviewModal({
   const [value, setValue] = useState128(prompt);
   const [copyState, setCopyState] = useState128("idle");
   const [entered, setEntered] = useState128(false);
-  const containerRef = useRef155(null);
-  const textareaRef = useRef155(null);
-  const valueRef = useRef155(value);
+  const containerRef = useRef157(null);
+  const textareaRef = useRef157(null);
+  const valueRef = useRef157(value);
   valueRef.current = value;
   const { requestClose } = useDialogBehavior({
     open: true,
@@ -81059,7 +81312,7 @@ function PromptPreviewModal({
       textareaRef.current?.focus();
     });
   }, []);
-  const handleCopy2 = useCallback148(async () => {
+  const handleCopy2 = useCallback147(async () => {
     try {
       await navigator.clipboard.writeText(valueRef.current);
       setCopyState("copied");
@@ -81342,16 +81595,16 @@ function BlockCard({
 }) {
   const [hovered, setHovered] = useState129(false);
   const [addState, setAddState] = useState129("idle");
-  const hoverTimer = useRef156(null);
+  const hoverTimer = useRef158(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
-  const handleEnter = useCallback149(() => {
+  const handleEnter = useCallback148(() => {
     hoverTimer.current = setTimeout(() => {
       setHovered(true);
       onPreview?.({ videoUrl, posterUrl, title });
     }, 300);
   }, [onPreview, videoUrl, posterUrl, title]);
-  const handleLeave = useCallback149(() => {
+  const handleLeave = useCallback148(() => {
     if (hoverTimer.current) {
       clearTimeout(hoverTimer.current);
       hoverTimer.current = null;
@@ -81364,7 +81617,7 @@ function BlockCard({
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
   }, []);
-  const handleAdd = useCallback149(
+  const handleAdd = useCallback148(
     async (e) => {
       e.stopPropagation();
       if (addState !== "idle" || !onAdd) return;
@@ -81380,7 +81633,7 @@ function BlockCard({
     [onAdd, addState]
   );
   const { activeCompPath, compositionDimensions } = useStudioShellContext();
-  const handleShowPrompt = useCallback149(
+  const handleShowPrompt = useCallback148(
     (e) => {
       e.stopPropagation();
       const state = usePlayerStore.getState();
@@ -81572,10 +81825,14 @@ var LeftSidebar = memo42(
     onAddCompositionToTimeline
   }, ref) {
     const [tab, setTab] = useState130(getPersistedTab);
-    const tabRef = useRef157(tab);
+    const tabRef = useRef159(tab);
     tabRef.current = tab;
-    const tablistRef = useRef157(null);
-    const selectTab = useCallback150((t) => {
+    const tablistRef = useRef159(null);
+    const masterCompositionPath = useMemo72(
+      () => resolveMasterCompositionPath(compositions),
+      [compositions]
+    );
+    const selectTab = useCallback149((t) => {
       setTab(t);
       try {
         safeLocalStorage()?.setItem(STORAGE_KEY, t);
@@ -81583,9 +81840,9 @@ var LeftSidebar = memo42(
       }
       trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
     }, []);
-    const getTab = useCallback150(() => tabRef.current, []);
+    const getTab = useCallback149(() => tabRef.current, []);
     useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
-    const handleTablistKeyDown = useCallback150(
+    const handleTablistKeyDown = useCallback149(
       (e) => {
         if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
         e.preventDefault();
@@ -81670,6 +81927,7 @@ var LeftSidebar = memo42(
                   projectId,
                   compositions,
                   activeComposition,
+                  masterCompositionPath,
                   onSelect: onSelectComposition,
                   onAddToTimeline: onAddCompositionToTimeline,
                   onRenderComposition,
@@ -81942,7 +82200,7 @@ function StudioLeftSidebar({
     handleImportFiles,
     handleContentChange
   } = useFileManagerContext();
-  const handleRenderComposition = useCallback151(
+  const handleRenderComposition = useCallback150(
     async (comp) => {
       if (renderQueue.ffmpegMissing) {
         setRightPanelTab("renders");
@@ -82067,13 +82325,13 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioRightPanel.tsx
-import { useCallback as useCallback168 } from "react";
+import { useCallback as useCallback167 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo43, useState as useState133, useCallback as useCallback153, useEffect as useEffect124, useRef as useRef159 } from "react";
+import { memo as memo43, useState as useState133, useCallback as useCallback152, useEffect as useEffect124, useRef as useRef161 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef158, useState as useState132, useCallback as useCallback152 } from "react";
+import { useRef as useRef160, useState as useState132, useCallback as useCallback151 } from "react";
 var DRAG_THRESHOLD_PX3 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -82140,10 +82398,10 @@ function useLayerDrag({
   onReorder,
   onSingleSibling
 }) {
-  const dragRef = useRef158(null);
+  const dragRef = useRef160(null);
   const [dragKey, setDragKey] = useState132(null);
   const [insertionLineY, setInsertionLineY] = useState132(null);
-  const handleRowPointerDown = useCallback152(
+  const handleRowPointerDown = useCallback151(
     (layerIndex, e) => {
       if (e.button !== 0) return;
       const layer = visibleLayers[layerIndex];
@@ -82170,7 +82428,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef, onSingleSibling]
   );
-  const handleContainerPointerMove = useCallback152(
+  const handleContainerPointerMove = useCallback151(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -82196,7 +82454,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef]
   );
-  const handleContainerPointerUp = useCallback152(() => {
+  const handleContainerPointerUp = useCallback151(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     setDragKey(null);
@@ -82346,15 +82604,15 @@ var LayersPanel = memo43(function LayersPanel2() {
   } = useDomEditContext();
   const [layers, setLayers] = useState133([]);
   const [collapsed, setCollapsed] = useState133({});
-  const prevDocVersionRef = useRef159(0);
-  const scrollContainerRef = useRef159(null);
+  const prevDocVersionRef = useRef161(0);
+  const scrollContainerRef = useRef161(null);
   const mirrorLayerReorderToTimeline = useLayerReorderTimelineMirror();
   const { scheduleReveal } = useLayerRevealOverride({
     isPlaying,
     selectedElement: domEditSelection?.element ?? null
   });
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
-  const collectLayers = useCallback153(() => {
+  const collectLayers = useCallback152(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     let doc = null;
@@ -82403,7 +82661,7 @@ var LayersPanel = memo43(function LayersPanel2() {
       throttle.cancel();
     };
   }, [collectLayers]);
-  const resolveSelection = useCallback153(
+  const resolveSelection = useCallback152(
     (layer) => {
       let el = layer.element;
       if (!el.isConnected) {
@@ -82423,7 +82681,7 @@ var LayersPanel = memo43(function LayersPanel2() {
     },
     [activeCompPath, isMasterView, previewIframeRef, activeGroupElement]
   );
-  const seekToLayer = useCallback153(
+  const seekToLayer = useCallback152(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -82452,7 +82710,7 @@ var LayersPanel = memo43(function LayersPanel2() {
     },
     [currentTime, resolveSelection, timelineElements]
   );
-  const handleSelectLayer = useCallback153(
+  const handleSelectLayer = useCallback152(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -82462,7 +82720,7 @@ var LayersPanel = memo43(function LayersPanel2() {
     },
     [resolveSelection, applyDomSelection, seekToLayer, scheduleReveal]
   );
-  const handleLayerDoubleClick = useCallback153(
+  const handleLayerDoubleClick = useCallback152(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (selection?.element.hasAttribute("data-hf-group")) {
@@ -82473,7 +82731,7 @@ var LayersPanel = memo43(function LayersPanel2() {
     },
     [resolveSelection, setActiveGroupElement, handleSelectLayer]
   );
-  const handleLayerHover = useCallback153(
+  const handleLayerHover = useCallback152(
     async (layer) => {
       if (!layer) {
         updateDomEditHoverSelection(null);
@@ -82484,11 +82742,11 @@ var LayersPanel = memo43(function LayersPanel2() {
     },
     [resolveSelection, updateDomEditHoverSelection]
   );
-  const toggleCollapse = useCallback153((key2, e) => {
+  const toggleCollapse = useCallback152((key2, e) => {
     e.stopPropagation();
     setCollapsed((prev) => ({ ...prev, [key2]: !prev[key2] }));
   }, []);
-  const handleReorder = useCallback153(
+  const handleReorder = useCallback152(
     (event) => {
       const { siblingLayers, fromIndex, toIndex } = event;
       const reordered = [...siblingLayers];
@@ -82551,7 +82809,7 @@ var LayersPanel = memo43(function LayersPanel2() {
   );
   const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
   const visibleLayers = getVisibleLayers(layers, collapsed);
-  const handleSingleSibling = useCallback153(() => {
+  const handleSingleSibling = useCallback152(() => {
     showToast("Only one layer at this level", "info");
   }, [showToast]);
   const {
@@ -82683,13 +82941,13 @@ var LayersPanel = memo43(function LayersPanel2() {
 });
 
 // src/captions/components/CaptionPropertyPanel.tsx
-import { memo as memo45, useCallback as useCallback155, useState as useState135 } from "react";
+import { memo as memo45, useCallback as useCallback154, useState as useState135 } from "react";
 
 // src/captions/components/CaptionAnimationPanel.tsx
-import { memo as memo44, useCallback as useCallback154 } from "react";
+import { memo as memo44, useCallback as useCallback153 } from "react";
 
 // src/captions/components/shared.tsx
-import { useEffect as useEffect125, useRef as useRef160, useState as useState134 } from "react";
+import { useEffect as useEffect125, useRef as useRef162, useState as useState134 } from "react";
 import { jsx as jsx189, jsxs as jsxs158 } from "react/jsx-runtime";
 var inputCls = "w-full bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-2xs text-neutral-200 font-mono outline-none focus:border-studio-accent disabled:opacity-40 disabled:cursor-not-allowed";
 function Section2({ label, children }) {
@@ -82715,7 +82973,7 @@ function NumberField({
   onCommit
 }) {
   const [draft, setDraft] = useState134(null);
-  const focusedRef = useRef160(false);
+  const focusedRef = useRef162(false);
   useEffect125(() => {
     if (!focusedRef.current) setDraft(null);
   }, [value]);
@@ -82911,25 +83169,25 @@ var CaptionAnimationPanel = memo44(function CaptionAnimationPanel2() {
   }
   const group = resolvedGroupId ? model?.groups.get(resolvedGroupId) : void 0;
   const animation = group?.animation;
-  const handleEntranceChange = useCallback154(
+  const handleEntranceChange = useCallback153(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "entrance", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleHighlightChange = useCallback154(
+  const handleHighlightChange = useCallback153(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "highlight", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleExitChange = useCallback154(
+  const handleExitChange = useCallback153(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "exit", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleApplyToAll = useCallback154(() => {
+  const handleApplyToAll = useCallback153(() => {
     if (animation) applyAnimationToAll(animation);
   }, [animation, applyAnimationToAll]);
   if (!group || !resolvedGroupId || !animation) {
@@ -83029,7 +83287,7 @@ var CaptionPropertyPanel = memo45(function CaptionPropertyPanel2({
     ...groupStyle,
     ...segmentOverrides
   };
-  const applyToIframeDom = useCallback155(
+  const applyToIframeDom = useCallback154(
     (updates) => {
       const iframe = iframeRef.current;
       if (!iframe || !model) return;
@@ -83103,7 +83361,7 @@ var CaptionPropertyPanel = memo45(function CaptionPropertyPanel2({
     },
     [iframeRef, model, selectedSegmentIds]
   );
-  const handleStyleChange = useCallback155(
+  const handleStyleChange = useCallback154(
     (updates) => {
       if (selectedGroupId) {
         updateGroupStyle(selectedGroupId, updates);
@@ -83208,7 +83466,7 @@ var CaptionPropertyPanel = memo45(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo46, useCallback as useCallback156, useEffect as useEffect126, useRef as useRef161, useState as useState136 } from "react";
+import { memo as memo46, useCallback as useCallback155, useEffect as useEffect126, useRef as useRef163, useState as useState136 } from "react";
 import { jsx as jsx192, jsxs as jsxs161 } from "react/jsx-runtime";
 var BlockParamsPanel = memo46(function BlockParamsPanel2({
   blockName,
@@ -83226,12 +83484,12 @@ var BlockParamsPanel = memo46(function BlockParamsPanel2({
     }
     return initial;
   });
-  const appliedRef = useRef161(
+  const appliedRef = useRef163(
     Object.fromEntries(params.map((p) => [p.key, p.default]))
   );
   const [commitState, setCommitState] = useState136({ tone: "idle" });
-  const commitTimersRef = useRef161(/* @__PURE__ */ new Map());
-  const commitParamNow = useCallback156(
+  const commitTimersRef = useRef163(/* @__PURE__ */ new Map());
+  const commitParamNow = useCallback155(
     async (key2, nextValue) => {
       if (!fileManager) return;
       const previous = appliedRef.current[key2];
@@ -83272,8 +83530,8 @@ var BlockParamsPanel = memo46(function BlockParamsPanel2({
     },
     [fileManager, compositionPath, setRefreshKey, blockName]
   );
-  const commitChainRef = useRef161(Promise.resolve());
-  const commitParam = useCallback156(
+  const commitChainRef = useRef163(Promise.resolve());
+  const commitParam = useCallback155(
     (key2, nextValue) => {
       const run = commitChainRef.current.then(() => commitParamNow(key2, nextValue));
       commitChainRef.current = run.catch(() => void 0);
@@ -83281,7 +83539,7 @@ var BlockParamsPanel = memo46(function BlockParamsPanel2({
     },
     [commitParamNow]
   );
-  const handleChange = useCallback156(
+  const handleChange = useCallback155(
     (key2, value) => {
       setValues((prev) => ({ ...prev, [key2]: value }));
       const timers = commitTimersRef.current;
@@ -83297,7 +83555,7 @@ var BlockParamsPanel = memo46(function BlockParamsPanel2({
     },
     [commitParam]
   );
-  const flushRef = useRef161(() => {
+  const flushRef = useRef163(() => {
   });
   flushRef.current = () => {
     for (const [key2, timer] of commitTimersRef.current) {
@@ -83439,12 +83697,12 @@ function ParamControl({
 import { memo as memo50 } from "react";
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo49, useState as useState139, useRef as useRef163, useEffect as useEffect128, useLayoutEffect as useLayoutEffect10, useId as useId7 } from "react";
+import { memo as memo49, useState as useState139, useRef as useRef165, useEffect as useEffect128, useLayoutEffect as useLayoutEffect10, useId as useId7 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 
 // src/components/renders/RenderQueueItem.tsx
-import { memo as memo47, useCallback as useCallback157, useState as useState137 } from "react";
+import { memo as memo47, useCallback as useCallback156, useState as useState137 } from "react";
 import { Fragment as Fragment57, jsx as jsx193, jsxs as jsxs162 } from "react/jsx-runtime";
 function formatDuration2(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -83467,10 +83725,10 @@ var RenderQueueItem = memo47(function RenderQueueItem2({
   const [videoReady, setVideoReady] = useState137(false);
   const [confirmingDelete, setConfirmingDelete] = useState137(false);
   const fileSrc = buildProjectApiPath(projectId, `/renders/file/${job.filename}`);
-  const handleOpen = useCallback157(() => {
+  const handleOpen = useCallback156(() => {
     window.open(fileSrc, "_blank");
   }, [fileSrc]);
-  const handleDownload = useCallback157(
+  const handleDownload = useCallback156(
     (e) => {
       e.stopPropagation();
       const a = document.createElement("a");
@@ -83670,7 +83928,7 @@ var RenderQueueItem = memo47(function RenderQueueItem2({
 });
 
 // src/components/renders/FfmpegRequiredNotice.tsx
-import { memo as memo48, useEffect as useEffect127, useRef as useRef162, useState as useState138 } from "react";
+import { memo as memo48, useEffect as useEffect127, useRef as useRef164, useState as useState138 } from "react";
 import { jsx as jsx194, jsxs as jsxs163 } from "react/jsx-runtime";
 var DOWNLOAD_URL = "https://ffmpeg.org/download.html";
 var CUE_MS = 1600;
@@ -83682,8 +83940,8 @@ var FfmpegRequiredNotice = memo48(function FfmpegRequiredNotice2({
 }) {
   const [copied, setCopied] = useState138(false);
   const [recheckFailed, setRecheckFailed] = useState138(false);
-  const wasChecking = useRef162(false);
-  const cueTimer = useRef162(void 0);
+  const wasChecking = useRef164(false);
+  const cueTimer = useRef164(void 0);
   useEffect127(() => {
     if (wasChecking.current && !checking) setRecheckFailed(true);
     wasChecking.current = checking;
@@ -83813,8 +84071,8 @@ var FORMAT_PANEL_SIZE = { width: 208, height: 150 };
 function FormatInfoTooltip({ format }) {
   const [open, setOpen] = useState139(false);
   const [position, setPosition] = useState139(null);
-  const triggerRef = useRef163(null);
-  const timeoutRef = useRef163(void 0);
+  const triggerRef = useRef165(null);
+  const timeoutRef = useRef165(void 0);
   const panelId = useId7();
   const show = () => {
     clearTimeout(timeoutRef.current);
@@ -84065,7 +84323,7 @@ var RenderQueue = memo49(function RenderQueue2({
   ffmpegChecking,
   onRecheckFfmpeg
 }) {
-  const listRef = useRef163(null);
+  const listRef = useRef165(null);
   useEffect128(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
@@ -84214,11 +84472,11 @@ var RenderQueuePanel = memo50(function RenderQueuePanel2() {
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState141, useEffect as useEffect129, useCallback as useCallback159, useRef as useRef164 } from "react";
+import { useState as useState141, useEffect as useEffect129, useCallback as useCallback158, useRef as useRef166 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
-import { useState as useState140, useCallback as useCallback158, useId as useId8 } from "react";
+import { useState as useState140, useCallback as useCallback157, useId as useId8 } from "react";
 import { jsx as jsx197, jsxs as jsxs165 } from "react/jsx-runtime";
 function SectionHeader({
   children,
@@ -84406,7 +84664,7 @@ function BranchTree({
 }) {
   const [newLabel, setNewLabel] = useState140("");
   const inputId = useId8();
-  const handleCreate = useCallback158(() => {
+  const handleCreate = useCallback157(() => {
     const label = newLabel.trim();
     if (!label) return;
     onCreateSequence(label);
@@ -84468,7 +84726,7 @@ function BranchItem({
   const [editing, setEditing] = useState140(false);
   const [draft, setDraft] = useState140(seq.label);
   const [confirmingDelete, setConfirmingDelete] = useState140(false);
-  const commitRename = useCallback158(() => {
+  const commitRename = useCallback157(() => {
     const label = draft.trim();
     if (label && label !== seq.label) onRename(seq.id, label);
     setEditing(false);
@@ -84601,7 +84859,7 @@ function HotspotTool({
   const selectedElementId = domEditSelection?.element?.id ?? null;
   const selectedHfId = domEditSelection?.hfId ?? null;
   const elementKey2 = selectedElementId || selectedHfId;
-  const handleMakeHotspot = useCallback158(() => {
+  const handleMakeHotspot = useCallback157(() => {
     if (!selectedSceneId || !targetSequenceId || !elementKey2) return;
     const id = `hotspot-${elementKey2}-${generateId()}`;
     const label = hotspotLabel.trim() || elementKey2;
@@ -84893,12 +85151,12 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   );
   const [persistError, setPersistError] = useState141(false);
   const [retrying, setRetrying] = useState141(false);
-  const undoStackRef = useRef164([]);
+  const undoStackRef = useRef166([]);
   const [undoDepth, setUndoDepth] = useState141(0);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
-  const manifestRef = useRef164(manifest);
-  const notesCtrlRef = useRef164(makeSlideshowNotesController());
+  const manifestRef = useRef166(manifest);
+  const notesCtrlRef = useRef166(makeSlideshowNotesController());
   useEffect129(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
@@ -84915,7 +85173,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     setUndoDepth(0);
     setPersistError(false);
   }, [compHtml]);
-  const applyManifest = useCallback159(
+  const applyManifest = useCallback158(
     async (next, opts) => {
       const merged = notesCtrlRef.current.mergeIntoDiscrete(next);
       if (!opts?.skipUndo) {
@@ -84935,14 +85193,14 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersist]
   );
-  const handleUndo = useCallback159(() => {
+  const handleUndo = useCallback158(() => {
     const prev = undoStackRef.current.pop();
     if (!prev) return;
     setUndoDepth(undoStackRef.current.length);
     applyManifest(prev, { skipUndo: true }).catch(() => {
     });
   }, [applyManifest]);
-  const handleRetryPersist = useCallback159(async () => {
+  const handleRetryPersist = useCallback158(async () => {
     setRetrying(true);
     try {
       await onPersist(manifestRef.current);
@@ -84953,7 +85211,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       setRetrying(false);
     }
   }, [onPersist]);
-  const applyNotesManifest = useCallback159(
+  const applyNotesManifest = useCallback158(
     (next) => {
       setManifest(next);
       manifestRef.current = next;
@@ -84967,7 +85225,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       ctrl.flush();
     };
   }, []);
-  const toggleSection = useCallback159((key2) => {
+  const toggleSection = useCallback158((key2) => {
     setExpandedSections((prev) => {
       const next = new Set(prev);
       if (next.has(key2)) {
@@ -84981,25 +85239,25 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const activeSlides = selectedSequenceId ? (manifest.slideSequences ?? []).find((s) => s.id === selectedSequenceId)?.slides ?? [] : manifest.slides;
   const selectedSlide = activeSlides.find((s) => s.sceneId === selectedSceneId);
   const sequences = manifest.slideSequences ?? [];
-  const handleSelectBranchSlide = useCallback159((sequenceId, sceneId) => {
+  const handleSelectBranchSlide = useCallback158((sequenceId, sceneId) => {
     setSelectedSceneId(sceneId);
     setSelectedSequenceId(sequenceId);
   }, []);
-  const handleToggleSlide = useCallback159(
+  const handleToggleSlide = useCallback158(
     (sceneId) => {
       applyManifest(toggleMainLineSlide(manifestRef.current, sceneId)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleReorder = useCallback159(
+  const handleReorder = useCallback158(
     (sceneId, dir) => {
       applyManifest(reorderMainLineSlide(manifestRef.current, sceneId, dir)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleSetNotes = useCallback159(
+  const handleSetNotes = useCallback158(
     (notes) => {
       if (!selectedSceneId) return;
       applyNotesManifest(
@@ -85008,7 +85266,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyNotesManifest]
   );
-  const handleMarkFragment = useCallback159(() => {
+  const handleMarkFragment = useCallback158(() => {
     if (!selectedSceneId) return;
     applyManifest(
       addFragment(
@@ -85020,7 +85278,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     ).catch(() => {
     });
   }, [selectedSceneId, selectedSequenceId, currentTime, applyManifest]);
-  const handleRemoveFragment = useCallback159(
+  const handleRemoveFragment = useCallback158(
     (time) => {
       if (!selectedSceneId) return;
       applyManifest(
@@ -85030,7 +85288,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyManifest]
   );
-  const handleCreateSequence = useCallback159(
+  const handleCreateSequence = useCallback158(
     (label) => {
       const id = `seq-${generateId()}`;
       applyManifest(createSequence(manifestRef.current, id, label)).catch(() => {
@@ -85038,21 +85296,21 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleRenameSequence = useCallback159(
+  const handleRenameSequence = useCallback158(
     (id, label) => {
       applyManifest(renameSequence(manifestRef.current, id, label)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleDeleteSequence = useCallback159(
+  const handleDeleteSequence = useCallback158(
     (id) => {
       applyManifest(deleteSequence(manifestRef.current, id)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleAssign = useCallback159(
+  const handleAssign = useCallback158(
     (sequenceId, sceneId, assign) => {
       applyManifest(assignToBranch(manifestRef.current, sequenceId, sceneId, assign)).catch(
         () => {
@@ -85061,7 +85319,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAddHotspot = useCallback159(
+  const handleAddHotspot = useCallback158(
     (sceneId, hotspot) => {
       applyManifest(
         addHotspot(manifestRef.current, sceneId, hotspot, selectedSequenceId ?? void 0)
@@ -85070,7 +85328,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSequenceId, applyManifest]
   );
-  const handleRemoveHotspot = useCallback159(
+  const handleRemoveHotspot = useCallback158(
     (sceneId, hotspotId) => {
       applyManifest(
         removeHotspot(manifestRef.current, sceneId, hotspotId, selectedSequenceId ?? void 0)
@@ -85223,10 +85481,10 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo51, useCallback as useCallback163, useEffect as useEffect131, useMemo as useMemo72, useState as useState145 } from "react";
+import { memo as memo51, useCallback as useCallback162, useEffect as useEffect131, useMemo as useMemo73, useState as useState145 } from "react";
 
 // src/hooks/useVariablesPersist.ts
-import { useCallback as useCallback160 } from "react";
+import { useCallback as useCallback159 } from "react";
 function useVariablesPersist({
   sdkSession,
   activeCompPath,
@@ -85236,7 +85494,7 @@ function useVariablesPersist({
   reloadPreview,
   publishSdkSession
 }) {
-  return useCallback160(
+  return useCallback159(
     async (label, mutate) => {
       if (!sdkSession) return false;
       const path = activeCompPath ?? "index.html";
@@ -85271,10 +85529,10 @@ function useVariablesPersist({
 }
 
 // src/components/panels/VariablesOtherCompositions.tsx
-import { useCallback as useCallback162, useState as useState144 } from "react";
+import { useCallback as useCallback161, useState as useState144 } from "react";
 
 // src/hooks/useProjectCompositionVariables.ts
-import { useCallback as useCallback161, useEffect as useEffect130, useState as useState142 } from "react";
+import { useCallback as useCallback160, useEffect as useEffect130, useState as useState142 } from "react";
 import { openComposition as openComposition4 } from "@hyperframes/sdk";
 async function readGroup(path, readProjectFile) {
   let content;
@@ -85317,7 +85575,7 @@ function useProjectCompositionVariables(fileTree, excludePath, readProjectFile,
 }
 function useEditVariablesInFile(deps) {
   const { readProjectFile, writeProjectFile, recordEdit, reloadPreview } = deps;
-  return useCallback161(
+  return useCallback160(
     async (path, label, mutate) => {
       const originalContent = await readProjectFile(path);
       await persistSdkSerialize(
@@ -85694,7 +85952,7 @@ function VariablesOtherCompositions({
     reloadPreview
   });
   const [editingKey, setEditingKey] = useState144(null);
-  const onSave = useCallback162(
+  const onSave = useCallback161(
     (path, decl) => {
       setEditingKey(null);
       void editInFile(
@@ -85705,7 +85963,7 @@ function VariablesOtherCompositions({
     },
     [editInFile]
   );
-  const onRemove = useCallback162(
+  const onRemove = useCallback161(
     (path, id) => {
       void editInFile(
         path,
@@ -85898,9 +86156,9 @@ var VariablesPanel = memo51(function VariablesPanel2({
 }) {
   const { activeCompPath, showToast } = useStudioShellContext();
   const { refreshKey } = useStudioPlaybackContext();
-  const { readProjectFile, writeProjectFile, fileTree } = useFileManagerContext();
+  const { readProjectFile, writeProjectFile, fileTree, compositions } = useFileManagerContext();
   const { domEditSelection } = useDomEditContext();
-  const effectiveCompPath = activeCompPath ?? resolveMasterCompositionPath(fileTree);
+  const effectiveCompPath = activeCompPath ?? resolveMasterCompositionPath(compositions);
   const previewValues = usePreviewVariablesStore((s) => s.values);
   const setPreviewValues = usePreviewVariablesStore((s) => s.setValues);
   const [revision, setRevision] = useState145(0);
@@ -85919,27 +86177,27 @@ var VariablesPanel = memo51(function VariablesPanel2({
     reloadPreview,
     publishSdkSession
   });
-  const declarations = useMemo72(
+  const declarations = useMemo73(
     () => sdkSession?.getVariableDeclarations() ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const usage = useMemo72(
+  const usage = useMemo73(
     () => sdkSession?.getVariableUsage() ?? null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const issues = useMemo72(
+  const issues = useMemo73(
     () => previewValues && sdkSession ? sdkSession.validateVariableValues(previewValues) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const effectiveValues = useMemo72(
+  const effectiveValues = useMemo73(
     () => sdkSession?.getVariableValues(previewValues ?? void 0) ?? {},
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const copyToClipboard = useCallback163(
+  const copyToClipboard = useCallback162(
     (text, what) => {
       void copyTextToClipboard(text).then(
         (ok) => showToast(
@@ -85950,7 +86208,7 @@ var VariablesPanel = memo51(function VariablesPanel2({
     },
     [showToast]
   );
-  const dropPreviewOverride = useCallback163(
+  const dropPreviewOverride = useCallback162(
     (id) => {
       if (previewValues && id in previewValues) {
         const next = { ...previewValues };
@@ -85960,7 +86218,7 @@ var VariablesPanel = memo51(function VariablesPanel2({
     },
     [previewValues, setPreviewValues]
   );
-  const commitPreviewValue = useCallback163(
+  const commitPreviewValue = useCallback162(
     (id, value, declDefault) => {
       const next = { ...previewValues ?? {} };
       if (JSON.stringify(value) === JSON.stringify(declDefault)) {
@@ -85973,7 +86231,7 @@ var VariablesPanel = memo51(function VariablesPanel2({
     },
     [previewValues, setPreviewValues, reloadPreview]
   );
-  const runSchemaEdit = useCallback163(
+  const runSchemaEdit = useCallback162(
     async (label, mutate) => {
       try {
         const changed = await persistVariables(label, mutate);
@@ -85987,7 +86245,7 @@ var VariablesPanel = memo51(function VariablesPanel2({
     },
     [persistVariables, showToast]
   );
-  const handleAdd = useCallback163(
+  const handleAdd = useCallback162(
     (decl) => {
       if (!sdkSession) return;
       const check = sdkSession.can({ type: "declareVariable", declaration: decl });
@@ -86000,7 +86258,7 @@ var VariablesPanel = memo51(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, showToast]
   );
-  const handleUpdate = useCallback163(
+  const handleUpdate = useCallback162(
     (decl) => {
       if (!sdkSession) return;
       const check = sdkSession.can({
@@ -86020,7 +86278,7 @@ var VariablesPanel = memo51(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, showToast]
   );
-  const handleRemove = useCallback163(
+  const handleRemove = useCallback162(
     (id) => {
       if (!sdkSession) return;
       const check = sdkSession.can({ type: "removeVariableDeclaration", id });
@@ -86036,18 +86294,18 @@ var VariablesPanel = memo51(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, dropPreviewOverride, showToast]
   );
-  const handleSetDefault = useCallback163(
+  const handleSetDefault = useCallback162(
     (id, value) => {
       void runSchemaEdit(`Set default for "${id}"`, (s) => s.setVariableValue(id, value));
       dropPreviewOverride(id);
     },
     [runSchemaEdit, dropPreviewOverride]
   );
-  const resetPreview = useCallback163(() => {
+  const resetPreview = useCallback162(() => {
     setPreviewValues(null);
     reloadPreview();
   }, [setPreviewValues, reloadPreview]);
-  const handleBind = useCallback163(
+  const handleBind = useCallback162(
     // Guard chain (session, selection, type-compat) — one branch per guard.
     // fallow-ignore-next-line complexity
     (action, id) => {
@@ -86179,7 +86437,7 @@ function PanelTabButton({
 }
 
 // src/hooks/useSlideshowPersist.ts
-import { useCallback as useCallback164 } from "react";
+import { useCallback as useCallback163 } from "react";
 
 // src/utils/setSlideshowManifest.ts
 import {
@@ -86236,7 +86494,7 @@ function useSlideshowPersist({
   publishSdkSession,
   coalesceKey
 }) {
-  return useCallback164(
+  return useCallback163(
     async (manifest) => {
       if (!sdkSession) return;
       const path = activeCompPath ?? "index.html";
@@ -86269,15 +86527,15 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useEffect as useEffect132, useMemo as useMemo73 } from "react";
+import { useEffect as useEffect132, useMemo as useMemo74 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, rightPanelTab, setRightPanelTab } = params;
-  const isSlideshowComposition = useMemo73(() => {
+  const isSlideshowComposition = useMemo74(() => {
     if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
     return slideshowIslandRegex2("i").test(editingFileContent);
   }, [editingFileContent]);
-  const slideshowScenes = useMemo73(() => {
+  const slideshowScenes = useMemo74(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -86299,7 +86557,7 @@ function useSlideshowTabState(params) {
 }
 
 // src/components/DesignPanelPromoteProvider.tsx
-import { useCallback as useCallback165 } from "react";
+import { useCallback as useCallback164 } from "react";
 import { jsx as jsx204 } from "react/jsx-runtime";
 function DesignPanelPromoteProvider({
   selection,
@@ -86318,7 +86576,7 @@ function DesignPanelPromoteProvider({
     publishSdkSession: handle.publish,
     activeCompPath: targetPath
   });
-  const persist2 = useCallback165(
+  const persist2 = useCallback164(
     async (label, mutate) => {
       const committed = await rawPersist(label, mutate);
       if (committed) forceReloadSharedSdkSession?.();
@@ -86326,7 +86584,7 @@ function DesignPanelPromoteProvider({
     },
     [rawPersist, forceReloadSharedSdkSession]
   );
-  const handlePersistError = useCallback165(
+  const handlePersistError = useCallback164(
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
@@ -86559,14 +86817,14 @@ async function applyColorGradingScopeUpdate({
 }
 
 // src/hooks/useInspectorSplitResize.ts
-import { useCallback as useCallback166, useRef as useRef165, useState as useState146 } from "react";
+import { useCallback as useCallback165, useRef as useRef167, useState as useState146 } from "react";
 var MIN_INSPECTOR_SPLIT_PERCENT = 20;
 var MAX_INSPECTOR_SPLIT_PERCENT = 75;
 function useInspectorSplitResize() {
   const [layersPanePercent, setLayersPanePercent] = useState146(40);
-  const splitContainerRef = useRef165(null);
-  const splitDragRef = useRef165(null);
-  const handleInspectorSplitResizeStart = useCallback166(
+  const splitContainerRef = useRef167(null);
+  const splitDragRef = useRef167(null);
+  const handleInspectorSplitResizeStart = useCallback165(
     (event) => {
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
@@ -86579,7 +86837,7 @@ function useInspectorSplitResize() {
     },
     [layersPanePercent]
   );
-  const handleInspectorSplitResizeMove = useCallback166((event) => {
+  const handleInspectorSplitResizeMove = useCallback165((event) => {
     const drag = splitDragRef.current;
     if (!drag || drag.height <= 0) return;
     const deltaPercent = (event.clientY - drag.startY) / drag.height * 100;
@@ -86589,7 +86847,7 @@ function useInspectorSplitResize() {
     );
     setLayersPanePercent(next);
   }, []);
-  const handleInspectorSplitResizeEnd = useCallback166(() => {
+  const handleInspectorSplitResizeEnd = useCallback165(() => {
     splitDragRef.current = null;
   }, []);
   return {
@@ -86602,16 +86860,16 @@ function useInspectorSplitResize() {
 }
 
 // src/hooks/useRemoveBackground.ts
-import { useCallback as useCallback167, useEffect as useEffect133, useRef as useRef166 } from "react";
+import { useCallback as useCallback166, useEffect as useEffect133, useRef as useRef168 } from "react";
 function useRemoveBackground(projectId, refreshFileTree, showToast) {
-  const abortRef = useRef166(null);
+  const abortRef = useRef168(null);
   useEffect133(
     () => () => {
       abortRef.current?.abort();
     },
     []
   );
-  return useCallback167(
+  return useCallback166(
     // fallow-ignore-next-line complexity
     async (inputPath, options) => {
       const response = await fetch(
@@ -86793,7 +87051,7 @@ function StudioRightPanel({
     }
     toggleRightInspectorPane(pane);
   };
-  const handleApplyColorGradingScope = useCallback168(
+  const handleApplyColorGradingScope = useCallback167(
     async (scope, value) => applyColorGradingScopeUpdate({
       scope,
       value,
@@ -86827,7 +87085,7 @@ function StudioRightPanel({
     ]
   );
   const handleRemoveBackground = useRemoveBackground(projectId, refreshFileTree, showToast);
-  const setAttributeWhileDragging = useCallback168(
+  const setAttributeWhileDragging = useCallback167(
     (attr, value) => handleDomAttributeLiveCommit(attr, value, void 0, { previewOnly: true }),
     [handleDomAttributeLiveCommit]
   );
@@ -87075,11 +87333,17 @@ function StudioRightPanel({
 }
 
 // src/components/TimelineToolbar.tsx
-import { useEffect as useEffect135, useRef as useRef167 } from "react";
-import { Image as Image2, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
+import { useEffect as useEffect135, useRef as useRef169 } from "react";
+import {
+  Image as Image2,
+  Magnet,
+  MagnifyingGlassMinus,
+  MagnifyingGlassPlus,
+  Waves
+} from "@phosphor-icons/react";
 
 // src/hooks/useEnableKeyframes.ts
-import { useCallback as useCallback169 } from "react";
+import { useCallback as useCallback168 } from "react";
 var enableKeyframesTransactionCounter = 0;
 function animatedProps(anim) {
   if (!anim) return ["x", "y"];
@@ -87332,7 +87596,7 @@ async function applyArcKeyframeAtPlayhead(session, sel, arcAnim, t, iframe) {
   );
 }
 function useEnableKeyframes(sessionRef) {
-  return useCallback169(async () => {
+  return useCallback168(async () => {
     const session = sessionRef.current;
     if (!session) return;
     const sel = session.domEditSelection;
@@ -87414,7 +87678,7 @@ function useEnableKeyframes(sessionRef) {
 }
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect134, useCallback as useCallback170 } from "react";
+import { useEffect as useEffect134, useCallback as useCallback169 } from "react";
 function isTextInput2(el) {
   if (!el) return false;
   const tag = el.tagName;
@@ -87431,7 +87695,7 @@ function useKeyframeKeyboard({
   onToggleExpand,
   onNudgeKeyframe
 }) {
-  const handler = useCallback170(
+  const handler = useCallback169(
     (e) => {
       if (!enabled) return;
       if (isTextInput2(document.activeElement)) return;
@@ -87532,7 +87796,7 @@ function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const elements = usePlayerStore((s) => s.elements);
-  const sessionRef = useRef167(session);
+  const sessionRef = useRef169(session);
   sessionRef.current = session;
   const onToggle = useEnableKeyframes(
     sessionRef
@@ -87550,6 +87814,8 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
   const setActiveTool = usePlayerStore((s) => s.setActiveTool);
   const timelineSnapEnabled = usePlayerStore((s) => s.timelineSnapEnabled);
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
+  const rippleEditEnabled = usePlayerStore((s) => s.rippleEditEnabled);
+  const setRippleEditEnabled = usePlayerStore((s) => s.setRippleEditEnabled);
   const autoKeyframeEnabled = usePlayerStore((s) => s.autoKeyframeEnabled);
   const setAutoKeyframeEnabled = usePlayerStore((s) => s.setAutoKeyframeEnabled);
   const thumbnailMode = usePlayerStore((s) => s.thumbnailMode);
@@ -87634,6 +87900,23 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
             children: /* @__PURE__ */ jsx206(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
           }
         ) }),
+        /* @__PURE__ */ jsx206(
+          Tooltip,
+          {
+            label: rippleEditEnabled ? "Ripple on \u2014 keeps the main track gapless" : "Ripple off \u2014 deleting a main-track clip leaves a gap",
+            children: /* @__PURE__ */ jsx206(
+              "button",
+              {
+                type: "button",
+                onClick: () => setRippleEditEnabled(!rippleEditEnabled),
+                "aria-label": "Toggle ripple edit",
+                "aria-pressed": rippleEditEnabled,
+                className: rippleEditEnabled ? flatActive : flatIdle,
+                children: /* @__PURE__ */ jsx206(Waves, { size: 16, weight: "bold", "aria-hidden": "true" })
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsx206(
           Tooltip,
           {
@@ -87855,15 +88138,15 @@ import { useState as useState154 } from "react";
 import { Copy as Copy2, Check as Check2 } from "@phosphor-icons/react";
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback171, useEffect as useEffect136, useRef as useRef168, useState as useState147 } from "react";
+import { useCallback as useCallback170, useEffect as useEffect136, useRef as useRef170, useState as useState147 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState147(null);
   const [loading, setLoading] = useState147(true);
   const [error, setError] = useState147(null);
   const [reloadKey, setReloadKey] = useState147(0);
-  const hasDataRef = useRef168(false);
-  const lastProjectRef = useRef168(null);
-  const reload = useCallback171(() => setReloadKey((k) => k + 1), []);
+  const hasDataRef = useRef170(false);
+  const lastProjectRef = useRef170(null);
+  const reload = useCallback170(() => setReloadKey((k) => k + 1), []);
   useEffect136(() => {
     if (!projectId) return;
     let cancelled = false;
@@ -87896,7 +88179,7 @@ function useStoryboard(projectId) {
 }
 
 // src/hooks/useProjectSignaturePoll.ts
-import { useEffect as useEffect137, useRef as useRef169 } from "react";
+import { useEffect as useEffect137, useRef as useRef171 } from "react";
 var POLL_INTERVAL_MS = 2e3;
 async function fetchProjectSignature(projectId) {
   try {
@@ -87909,8 +88192,8 @@ async function fetchProjectSignature(projectId) {
   }
 }
 function useProjectSignaturePoll(projectId, currentSignature, onChange) {
-  const signatureRef = useRef169(currentSignature);
-  const onChangeRef = useRef169(onChange);
+  const signatureRef = useRef171(currentSignature);
+  const onChangeRef = useRef171(onChange);
   signatureRef.current = currentSignature;
   onChangeRef.current = onChange;
   useEffect137(() => {
@@ -87940,7 +88223,7 @@ function useProjectSignaturePoll(projectId, currentSignature, onChange) {
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { useEffect as useEffect143, useMemo as useMemo76, useState as useState153 } from "react";
+import { useEffect as useEffect143, useMemo as useMemo77, useState as useState153 } from "react";
 
 // src/components/storyboard/StoryboardDirection.tsx
 import { jsx as jsx207, jsxs as jsxs172 } from "react/jsx-runtime";
@@ -88177,7 +88460,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback172, useEffect as useEffect139, useMemo as useMemo74, useRef as useRef170, useState as useState149 } from "react";
+import { useCallback as useCallback171, useEffect as useEffect139, useMemo as useMemo75, useRef as useRef172, useState as useState149 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx212, jsxs as jsxs175 } from "react/jsx-runtime";
@@ -88207,7 +88490,7 @@ function useEditableFile(path, onSaved) {
       cancelled = true;
     };
   }, [path, readProjectFile]);
-  const save = useCallback172(() => {
+  const save = useCallback171(() => {
     if (saving) return;
     setSaving(true);
     setError(null);
@@ -88226,7 +88509,7 @@ function hardenLinks(node) {
 }
 function useMarkdownPreview(source) {
   const [debounced, setDebounced] = useState149(source);
-  const primed = useRef170(false);
+  const primed = useRef172(false);
   useEffect139(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
@@ -88236,7 +88519,7 @@ function useMarkdownPreview(source) {
     const id = window.setTimeout(() => setDebounced(source), 200);
     return () => window.clearTimeout(id);
   }, [source]);
-  return useMemo74(() => {
+  return useMemo75(() => {
     const html2 = marked.parse(debounced, { async: false });
     DOMPurify.addHook("afterSanitizeAttributes", hardenLinks);
     try {
@@ -88332,7 +88615,7 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback173, useEffect as useEffect141, useState as useState151 } from "react";
+import { useCallback as useCallback172, useEffect as useEffect141, useState as useState151 } from "react";
 import { setFrameVoiceover } from "@hyperframes/core/storyboard";
 
 // src/components/storyboard/AgentChatMessageButton.tsx
@@ -88392,7 +88675,7 @@ function StoryboardFrameFocus({
   const [savedVoiceover, setSavedVoiceover] = useState151(frame.voiceover ?? "");
   const [busy, setBusy] = useState151(false);
   const [error, setError] = useState151(null);
-  const applyEdit = useCallback173(
+  const applyEdit = useCallback172(
     async (edit) => {
       if (busy) return false;
       setBusy(true);
@@ -88414,7 +88697,7 @@ function StoryboardFrameFocus({
   const title = frame.title ?? `Frame ${frame.index}`;
   const dirty = draft !== savedVoiceover;
   const canOpenPreview = frame.status !== "outline" && frame.srcExists && Boolean(frame.src);
-  const saveVoiceover = useCallback173(async () => {
+  const saveVoiceover = useCallback172(async () => {
     const saved2 = await applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
     if (saved2) setSavedVoiceover(draft);
   }, [applyEdit, frame.index, draft]);
@@ -88426,7 +88709,7 @@ function StoryboardFrameFocus({
     window.addEventListener("beforeunload", onBeforeUnload);
     return () => window.removeEventListener("beforeunload", onBeforeUnload);
   }, [dirty]);
-  const confirmLeave = useCallback173(
+  const confirmLeave = useCallback172(
     () => !dirty || window.confirm("Discard unsaved voiceover changes?"),
     [dirty]
   );
@@ -88908,7 +89191,7 @@ function progressLabel(summary) {
 }
 
 // src/components/storyboard/useFrameComments.ts
-import { useCallback as useCallback174, useEffect as useEffect142, useMemo as useMemo75, useState as useState152 } from "react";
+import { useCallback as useCallback173, useEffect as useEffect142, useMemo as useMemo76, useState as useState152 } from "react";
 
 // src/components/storyboard/frameComments.ts
 var FRAME_COMMENTS_PATH = ".hyperframes/frame-comments.json";
@@ -88974,7 +89257,7 @@ function useFrameComments(frames) {
   const [submitState, setSubmitState] = useState152("idle");
   const [submitError, setSubmitError] = useState152(null);
   const [pending2, setPending] = useState152(null);
-  const refreshPending = useCallback174(async () => {
+  const refreshPending = useCallback173(async () => {
     try {
       const parsed = parseCommentsFile(await readOptionalProjectFile(FRAME_COMMENTS_PATH));
       setPending(parsed && parsed.comments.length > 0 ? parsed.comments : null);
@@ -88987,14 +89270,14 @@ function useFrameComments(frames) {
     window.addEventListener("focus", onFocus);
     return () => window.removeEventListener("focus", onFocus);
   }, [refreshPending]);
-  const setDraft = useCallback174((index, text) => {
+  const setDraft = useCallback173((index, text) => {
     setDrafts((prev) => ({ ...prev, [index]: text }));
   }, []);
-  const draftCount = useMemo75(
+  const draftCount = useMemo76(
     () => Object.values(drafts).filter((text) => text.trim().length > 0).length,
     [drafts]
   );
-  const submit = useCallback174(async () => {
+  const submit = useCallback173(async () => {
     if (draftCount === 0 || submitState === "saving") return false;
     setSubmitState("saving");
     setSubmitError(null);
@@ -89058,7 +89341,7 @@ function StoryboardLoaded({
       setFeedbackMessageCopied(false);
     }
   };
-  const sourceFiles = useMemo76(() => {
+  const sourceFiles = useMemo77(() => {
     const files = [{ path: data.path, label: data.path }];
     if (data.script?.exists) files.push({ path: data.script.path, label: data.script.path });
     return files;
@@ -89457,18 +89740,21 @@ function useStudioSessionStart(projectId, resolving, waitingForServer) {
 }
 
 // src/hooks/useTimelineAddAtPlayhead.ts
-import { useCallback as useCallback175 } from "react";
+import { useCallback as useCallback174 } from "react";
 function useTimelineAddAtPlayhead(addAsset, addComposition) {
   const placement = () => ({ start: usePlayerStore.getState().currentTime, track: 0 });
   return {
-    addAssetAtPlayhead: useCallback175((path) => addAsset(path, placement()), [addAsset]),
-    addCompositionAtPlayhead: useCallback175(
+    addAssetAtPlayhead: useCallback174((path) => addAsset(path, placement()), [addAsset]),
+    addCompositionAtPlayhead: useCallback174(
       (path) => addComposition(path, placement()),
       [addComposition]
     )
   };
 }
 
+// src/hooks/useActiveComposition.ts
+import { useState as useState156 } from "react";
+
 // src/hooks/useHydrateActiveCompPathFromUrl.ts
 import { useEffect as useEffect146 } from "react";
 function useHydrateActiveCompPathFromUrl({
@@ -89491,29 +89777,136 @@ function useHydrateActiveCompPathFromUrl({
   }, [hydrated, fileTree, fileTreeLoaded, initialUrlStateRef, setActiveCompPath, setHydrated]);
 }
 
+// src/hooks/useAutoOpenRootComposition.ts
+import { useEffect as useEffect147, useRef as useRef173 } from "react";
+function useAutoOpenRootComposition({
+  projectId,
+  activeCompPath,
+  activeCompPathHydrated,
+  masterCompPath,
+  onSelectComposition
+}) {
+  const settledForProjectRef = useRef173(void 0);
+  useEffect147(() => {
+    if (settledForProjectRef.current === projectId) return;
+    if (!activeCompPathHydrated) return;
+    if (activeCompPath !== null) {
+      settledForProjectRef.current = projectId;
+      return;
+    }
+    if (!masterCompPath) return;
+    settledForProjectRef.current = projectId;
+    onSelectComposition(masterCompPath);
+  }, [projectId, activeCompPath, activeCompPathHydrated, masterCompPath, onSelectComposition]);
+}
+
+// src/hooks/useCompositionContentLoader.ts
+import { useCallback as useCallback175 } from "react";
+function useCompositionContentLoader({
+  projectId,
+  setEditingFile,
+  setActiveCompPath,
+  showToast
+}) {
+  return useCallback175(
+    (comp) => {
+      if (!projectId) return;
+      setActiveCompPath(comp.endsWith(".html") ? comp : null);
+      setEditingFile({ path: comp, content: null });
+      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`)).then(async (r) => {
+        if (!r.ok) throw new Error(`Failed to load ${comp} (${r.status})`);
+        return r.json();
+      }).then((data) => {
+        if (typeof data.content !== "string") throw new Error(`No content returned for ${comp}`);
+        setEditingFile({ path: comp, content: data.content });
+      }).catch((err) => {
+        showToast(err instanceof Error ? err.message : `Failed to load ${comp}`, "error");
+      });
+    },
+    [projectId, setEditingFile, setActiveCompPath, showToast]
+  );
+}
+
+// src/hooks/useResetSelectionOnProjectSwitch.ts
+import { useRef as useRef174 } from "react";
+function useResetSelectionOnProjectSwitch({
+  projectId,
+  initialUrlStateRef,
+  setActiveCompPath,
+  setActiveCompPathHydrated
+}) {
+  const previousProjectIdRef = useRef174(projectId);
+  if (previousProjectIdRef.current !== projectId) {
+    const isSwitch = previousProjectIdRef.current !== null;
+    previousProjectIdRef.current = projectId;
+    if (isSwitch) {
+      initialUrlStateRef.current = readStudioUrlStateFromWindow();
+      setActiveCompPath(null);
+      setActiveCompPathHydrated(isHydratedFromUrlState(initialUrlStateRef.current));
+    }
+  }
+}
+
+// src/hooks/useActiveComposition.ts
+function useActiveComposition({
+  projectId,
+  initialUrlStateRef,
+  fileTree,
+  fileTreeLoaded,
+  masterCompPath,
+  setEditingFile,
+  showToast
+}) {
+  const [activeCompPath, setActiveCompPath] = useState156(null);
+  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState156(
+    () => isHydratedFromUrlState(initialUrlStateRef.current)
+  );
+  useResetSelectionOnProjectSwitch({
+    projectId,
+    initialUrlStateRef,
+    setActiveCompPath,
+    setActiveCompPathHydrated
+  });
+  useHydrateActiveCompPathFromUrl({
+    hydrated: activeCompPathHydrated,
+    fileTreeLoaded,
+    fileTree,
+    initialUrlStateRef,
+    setActiveCompPath,
+    setHydrated: setActiveCompPathHydrated
+  });
+  const handleSelectComposition = useCompositionContentLoader({
+    projectId,
+    setEditingFile,
+    setActiveCompPath,
+    showToast
+  });
+  useAutoOpenRootComposition({
+    projectId,
+    activeCompPath,
+    activeCompPathHydrated,
+    masterCompPath,
+    onSelectComposition: handleSelectComposition
+  });
+  return { activeCompPath, activeCompPathHydrated, setActiveCompPath, handleSelectComposition };
+}
+
 // src/App.tsx
 import { jsx as jsx219, jsxs as jsxs181 } from "react/jsx-runtime";
 var getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
-  const initialUrlStateRef = useRef171(readStudioUrlStateFromWindow());
+  const initialUrlStateRef = useRef175(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState();
   useStudioSessionStart(projectId, resolving, waitingForServer);
-  const [activeCompPath, setActiveCompPath] = useState156(null);
-  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState156(
-    () => initialUrlStateRef.current.activeCompPath == null
-  );
-  const [compIdToSrc, setCompIdToSrc] = useState156(/* @__PURE__ */ new Map());
-  const [previewIframe, setPreviewIframe] = useState156(null);
-  const [compositionLoading, setCompositionLoading] = useState156(true);
-  const [refreshKey, setRefreshKey] = useState156(0);
+  const [compIdToSrc, setCompIdToSrc] = useState157(/* @__PURE__ */ new Map());
+  const [previewIframe, setPreviewIframe] = useState157(null);
+  const [compositionLoading, setCompositionLoading] = useState157(true);
+  const [refreshKey, setRefreshKey] = useState157(0);
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
-  const [blockPreview, setBlockPreview] = useState156(null);
-  const previewIframeRef = useRef171(null);
-  const activeCompPathRef = useRef171(activeCompPath);
-  activeCompPathRef.current = activeCompPath;
-  const leftSidebarRef = useRef171(null);
-  const renderQueue = useRenderQueue(projectId, activeCompPathRef);
+  const [blockPreview, setBlockPreview] = useState157(null);
+  const previewIframeRef = useRef175(null);
+  const leftSidebarRef = useRef175(null);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
   const captionSync = useCaptionSync(projectId);
@@ -89532,9 +89925,9 @@ function StudioApp() {
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = usePersistentEditHistory({ projectId });
-  const handleDomZIndexReorderCommitRef = useRef171(null);
-  const pendingTimelineEditPathRef = useRef171(/* @__PURE__ */ new Set());
-  const isGestureRecordingRef = useRef171(false);
+  const handleDomZIndexReorderCommitRef = useRef175(null);
+  const pendingTimelineEditPathRef = useRef175(/* @__PURE__ */ new Set());
+  const isGestureRecordingRef = useRef175(false);
   const reloadPreview = useCallback176(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
@@ -89542,23 +89935,27 @@ function StudioApp() {
     recordEdit: editHistory.recordEdit,
     setRefreshKey
   });
-  const masterCompPath = useMemo77(
-    () => resolveMasterCompositionPath(fileManager.fileTree),
-    [fileManager.fileTree]
+  const masterCompPath = useMemo78(
+    () => resolveMasterCompositionPath(fileManager.compositions),
+    [fileManager.compositions]
   );
+  const { activeCompPath, activeCompPathHydrated, setActiveCompPath, handleSelectComposition } = useActiveComposition({
+    projectId,
+    initialUrlStateRef,
+    fileTree: fileManager.fileTree,
+    fileTreeLoaded: fileManager.fileTreeLoaded,
+    masterCompPath,
+    setEditingFile: fileManager.setEditingFile,
+    showToast
+  });
   const { sdkHandle, editFlowSdkSession } = useStudioSdkSessions(
     projectId,
     activeCompPath,
     masterCompPath
   );
-  useHydrateActiveCompPathFromUrl({
-    hydrated: activeCompPathHydrated,
-    fileTreeLoaded: fileManager.fileTreeLoaded,
-    fileTree: fileManager.fileTree,
-    initialUrlStateRef,
-    setActiveCompPath,
-    setHydrated: setActiveCompPathHydrated
-  });
+  const activeCompPathRef = useRef175(activeCompPath);
+  activeCompPathRef.current = activeCompPath;
+  const renderQueue = useRenderQueue(projectId, activeCompPathRef);
   const previewPersistence = usePreviewPersistence({
     showToast,
     readOptionalProjectFile: fileManager.readOptionalProjectFile,
@@ -89577,7 +89974,7 @@ function StudioApp() {
     pendingTimelineEditPathRef,
     reloadPreview
   });
-  const invalidateGsapCacheRef = useRef171(() => {
+  const invalidateGsapCacheRef = useRef175(() => {
   });
   const invalidateGsapCache = useCallback176(() => invalidateGsapCacheRef.current(), []);
   const timelineEditing = useTimelineEditing({
@@ -89636,14 +90033,14 @@ function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab
   });
-  const clearDomSelectionRef = useRef171(() => {
+  const clearDomSelectionRef = useRef175(() => {
   });
-  const domEditSelectionBridgeRef = useRef171(null);
-  const handleDomEditElementDeleteRef = useRef171(async () => {
+  const domEditSelectionBridgeRef = useRef175(null);
+  const handleDomEditElementDeleteRef = useRef175(async () => {
   });
   const domEditDeleteBridge = (s, o) => handleDomEditElementDeleteRef.current(s, o);
-  const resetKeyframesRef = useRef171(() => false);
-  const deleteSelectedKeyframesRef = useRef171(() => {
+  const resetKeyframesRef = useRef175(() => false);
+  const deleteSelectedKeyframesRef = useRef175(() => {
   });
   const { handleCopy: handleCopy2, handlePaste: handlePaste2, handleCut } = useClipboard({
     projectId,
@@ -89683,7 +90080,7 @@ function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: () => handleToggleRecordingRef.current()
   });
-  const sidebarTabRef = useRef171({
+  const sidebarTabRef = useRef175({
     select: (t) => leftSidebarRef.current?.selectTab(t),
     get: () => leftSidebarRef.current?.getTab() ?? "compositions"
   });
@@ -89725,7 +90122,8 @@ function StudioApp() {
     getSidebarTab: sidebarTabRef.current.get,
     sdkSession: editFlowSdkSession,
     publishSdkSession: sdkHandle.publish,
-    forceReloadSdkSession: sdkHandle.forceReload
+    forceReloadSdkSession: sdkHandle.forceReload,
+    handleTimelineElementsDelete: timelineEditing.handleTimelineElementsDelete
   });
   domEditSelectionBridgeRef.current = domEditSession.domEditSelection;
   handleDomZIndexReorderCommitRef.current = domEditSession.handleDomZIndexReorderCommit;
@@ -89772,9 +90170,9 @@ function StudioApp() {
     resetErrors: resetConsoleErrors
   } = useConsoleErrorCapture(previewIframe);
   const dragOverlay = useGlobalFileDrop(timelineEditing.handleTimelineFileDrop);
-  const handleToggleRecordingRef = useRef171(() => {
+  const handleToggleRecordingRef = useRef175(() => {
   });
-  const domEditSessionRef = useRef171(domEditSession);
+  const domEditSessionRef = useRef175(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     domEditSessionRef,
@@ -89783,7 +90181,7 @@ function StudioApp() {
     isGestureRecordingRef
   });
   handleToggleRecordingRef.current = handleToggleRecording;
-  const canvasRectRef = useRef171(null);
+  const canvasRectRef = useRef175(null);
   useLayoutEffect11(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
@@ -89801,13 +90199,6 @@ function StudioApp() {
     },
     [appHotkeys, resetConsoleErrors, refreshPreviewDocumentVersion]
   );
-  const { setEditingFile } = fileManager;
-  const handleSelectComposition = useCompositionContentLoader({
-    projectId,
-    setEditingFile,
-    setActiveCompPath,
-    showToast
-  });
   const {
     designPanelActive,
     inspectorPanelActive,
@@ -89864,7 +90255,7 @@ function StudioApp() {
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo77(
+  const timelineToolbar = useMemo78(
     () => /* @__PURE__ */ jsx219(
       TimelineToolbar,
       {
@@ -90022,11 +90413,11 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState157, useCallback as useCallback177, useRef as useRef172 } from "react";
+import { useState as useState158, useCallback as useCallback177, useRef as useRef176 } from "react";
 function useElementPicker(iframeRef, options) {
-  const [isPickMode, setIsPickMode] = useState157(false);
-  const [pickedElement, setPickedElement] = useState157(null);
-  const activeOverrideRef = useRef172(null);
+  const [isPickMode, setIsPickMode] = useState158(false);
+  const [pickedElement, setPickedElement] = useState158(null);
+  const activeOverrideRef = useRef176(null);
   const getActiveIframe = useCallback177(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
@@ -90100,7 +90491,7 @@ function useElementPicker(iframeRef, options) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   });
-  const optionsRef = useRef172(options);
+  const optionsRef = useRef176(options);
   optionsRef.current = options;
   const syncToSource = useCallback177(
     (elementId2, selector, op) => {
@@ -90211,7 +90602,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const activeIframeRef = useRef172(null);
+  const activeIframeRef = useRef176(null);
   activeIframeRef.current = getActiveIframe();
   return {
     isPickMode,
@@ -90377,6 +90768,7 @@ function findElementBlock(html2, elementId2) {
   return null;
 }
 export {
+  AskAgentModal,
   CompositionBreadcrumb,
   CompositionThumbnail,
   EditorShell,
@@ -90390,6 +90782,8 @@ export {
   Timeline,
   VideoThumbnail,
   applyPatch,
+  buildPickerAgentContextPreview,
+  buildPickerAgentPrompt,
   findElementBlock,
   formatTime,
   liveTime,