hyperframes 0.7.60 → 0.7.61

package/dist/studio/index.js

@@ -686,6 +686,9 @@ function formatFrameTime(time, duration, fps = STUDIO_PREVIEW_FPS) {
   return `${currentFrame}f / ${totalFrames}f`;
 }
 
+// src/player/lib/timelineIframeHelpers.ts
+import { readClipTiming } from "@hyperframes/core/composition-contract";
+
 // src/player/lib/playbackAdapter.ts
 function isFinitePositive(value) {
   return Number.isFinite(value) && value > 0;
@@ -1239,95 +1242,130 @@ function stopScrubPreviewAudio() {
   scrubPrevMuted = null;
   scrubPrevVolume = null;
 }
+function timelineDuration(iframeWin, compositionId) {
+  return iframeWin.__timelines?.[compositionId]?.duration?.() ?? 0;
+}
+function createTimedElementLookup(doc) {
+  const timedById = /* @__PURE__ */ new Map();
+  for (const timed of doc.querySelectorAll("[data-start]")) {
+    for (const id of [
+      timed.id,
+      timed.getAttribute("data-hf-id"),
+      timed.getAttribute("data-composition-id")
+    ]) {
+      if (id) timedById.set(id, timed);
+    }
+  }
+  return timedById;
+}
+function createReferenceEndResolver(timedById, iframeWin) {
+  const resolveEnd = (refId, visiting) => {
+    if (visiting.has(refId)) return null;
+    const referenced = timedById.get(refId);
+    if (!referenced) return null;
+    const next = new Set(visiting).add(refId);
+    const timing = readClipTiming(referenced, {
+      resolveReferenceEnd: (nestedId) => resolveEnd(nestedId, next)
+    });
+    if (timing.end != null) return timing.end;
+    const compositionId = referenced.getAttribute("data-composition-id");
+    const duration = compositionId ? timelineDuration(iframeWin, compositionId) : 0;
+    return timing.start == null || duration <= 0 ? null : timing.start + duration;
+  };
+  return resolveEnd;
+}
+function clampCompositionWindow(start, duration, rootDuration) {
+  if (!Number.isFinite(duration) || duration <= 0) return null;
+  const safeStart = Number.isFinite(start) ? start : 0;
+  if (!Number.isFinite(rootDuration) || rootDuration <= 0) {
+    return { start: safeStart, duration };
+  }
+  if (safeStart >= rootDuration) return null;
+  const clamped = Math.min(duration, Math.max(0, rootDuration - safeStart));
+  return clamped > 0 ? { start: safeStart, duration: clamped } : null;
+}
+function nonEmpty(value, fallback) {
+  return value || fallback;
+}
+function optionalNonEmpty(value) {
+  return value || void 0;
+}
+function attachCompositionSource(entry, element, compositionSrc) {
+  if (compositionSrc) return { ...entry, compositionSrc };
+  const innerVideo = element.querySelector("video[src]");
+  if (!innerVideo) return entry;
+  return { ...entry, src: optionalNonEmpty(innerVideo.getAttribute("src")), tag: "video" };
+}
+function buildMissingCompositionEntry(params) {
+  const { doc, iframeWin, element, compositionId, rootDuration, fallbackIndex, resolveEnd } = params;
+  const timing = readClipTiming(element, {
+    resolveReferenceEnd: (refId) => resolveEnd(refId, /* @__PURE__ */ new Set([compositionId]))
+  });
+  const window2 = clampCompositionWindow(
+    timing.start ?? 0,
+    timing.duration ?? timelineDuration(iframeWin, compositionId),
+    rootDuration
+  );
+  if (!window2) return null;
+  const preferredId = nonEmpty(element.id, compositionId);
+  const compositionSrc = element.getAttribute("data-composition-src") ?? element.getAttribute("data-composition-file");
+  const selector = getTimelineElementSelector(element);
+  const sourceFile = getTimelineElementSourceFile(element);
+  const selectorIndex = getTimelineElementSelectorIndex(doc, element, selector);
+  const label = getTimelineElementDisplayLabel({
+    id: preferredId,
+    label: element.getAttribute("data-timeline-label") ?? element.getAttribute("data-label"),
+    tag: element.tagName
+  });
+  const identity = buildTimelineElementIdentity({
+    preferredId,
+    label,
+    fallbackIndex,
+    domId: optionalNonEmpty(element.id),
+    selector,
+    selectorIndex,
+    sourceFile
+  });
+  const entry = {
+    id: identity.id,
+    label,
+    key: identity.key,
+    tag: element.tagName.toLowerCase(),
+    start: window2.start,
+    duration: window2.duration,
+    track: timing.trackIndex,
+    domId: optionalNonEmpty(element.id),
+    hfId: optionalNonEmpty(element.getAttribute("data-hf-id")),
+    selector,
+    selectorIndex,
+    sourceFile,
+    zIndex: readTimelineElementZIndex(element)
+  };
+  return attachCompositionSource(entry, element, compositionSrc);
+}
 function buildMissingCompositionElements(doc, iframeWin, currentEls, rootDuration) {
   const existingIds = new Set(currentEls.map((e) => e.id));
   const rootComp = doc.querySelector("[data-composition-id]");
   const rootCompId = rootComp?.getAttribute("data-composition-id");
   const hosts = doc.querySelectorAll("[data-composition-id][data-start]");
   const missing = [];
-  hosts.forEach((host) => {
+  const resolveEnd = createReferenceEndResolver(createTimedElementLookup(doc), iframeWin);
+  for (const host of hosts) {
     const el = host;
     const compId = el.getAttribute("data-composition-id");
-    if (!compId || compId === rootCompId) return;
-    if (existingIds.has(el.id) || existingIds.has(compId)) return;
-    const startAttr = el.getAttribute("data-start") ?? "0";
-    let start = parseFloat(startAttr);
-    if (isNaN(start)) {
-      const ref = doc.getElementById(startAttr) || doc.querySelector(`[data-composition-id="${CSS.escape(startAttr)}"]`);
-      if (ref) {
-        const refStartAttr = ref.getAttribute("data-start") ?? "0";
-        let refStart = parseFloat(refStartAttr);
-        if (isNaN(refStart)) {
-          const refRef = doc.getElementById(refStartAttr) || doc.querySelector(`[data-composition-id="${CSS.escape(refStartAttr)}"]`);
-          const rrStart = parseFloat(refRef?.getAttribute("data-start") ?? "0") || 0;
-          const rrCompId = refRef?.getAttribute("data-composition-id");
-          const rrDur = parseFloat(refRef?.getAttribute("data-duration") ?? "") || (rrCompId ? iframeWin.__timelines?.[rrCompId]?.duration?.() ?? 0 : 0);
-          refStart = rrStart + rrDur;
-        }
-        const refCompId = ref.getAttribute("data-composition-id");
-        const refDur = parseFloat(ref.getAttribute("data-duration") ?? "") || (refCompId ? iframeWin.__timelines?.[refCompId]?.duration?.() ?? 0 : 0);
-        start = refStart + refDur;
-      } else {
-        start = 0;
-      }
-    }
-    let dur = parseFloat(el.getAttribute("data-duration") ?? "");
-    if (isNaN(dur) || dur <= 0) {
-      dur = iframeWin.__timelines?.[compId]?.duration?.() ?? 0;
-    }
-    if (!Number.isFinite(dur) || dur <= 0) return;
-    if (!Number.isFinite(start)) start = 0;
-    if (Number.isFinite(rootDuration) && rootDuration > 0) {
-      if (start >= rootDuration) return;
-      dur = Math.min(dur, Math.max(0, rootDuration - start));
-      if (dur <= 0) return;
-    }
-    const trackStr = el.getAttribute("data-track-index");
-    const track = trackStr != null ? parseInt(trackStr, 10) : 0;
-    const compSrc = el.getAttribute("data-composition-src") || el.getAttribute("data-composition-file");
-    const selector = getTimelineElementSelector(el);
-    const sourceFile = getTimelineElementSourceFile(el);
-    const selectorIndex = getTimelineElementSelectorIndex(doc, el, selector);
-    const label = getTimelineElementDisplayLabel({
-      id: el.id || compId || null,
-      label: el.getAttribute("data-timeline-label") ?? el.getAttribute("data-label"),
-      tag: el.tagName
-    });
-    const identity = buildTimelineElementIdentity({
-      preferredId: el.id || compId || null,
-      label,
+    if (!compId || compId === rootCompId) continue;
+    if (existingIds.has(el.id) || existingIds.has(compId)) continue;
+    const entry = buildMissingCompositionEntry({
+      doc,
+      iframeWin,
+      element: el,
+      compositionId: compId,
+      rootDuration,
       fallbackIndex: missing.length,
-      domId: el.id || void 0,
-      selector,
-      selectorIndex,
-      sourceFile
+      resolveEnd
     });
-    const entry = {
-      id: identity.id,
-      label,
-      key: identity.key,
-      tag: el.tagName.toLowerCase(),
-      start,
-      duration: dur,
-      track: isNaN(track) ? 0 : track,
-      domId: el.id || void 0,
-      hfId: el.getAttribute("data-hf-id") || void 0,
-      selector,
-      selectorIndex,
-      sourceFile,
-      zIndex: readTimelineElementZIndex(el)
-    };
-    if (compSrc) {
-      entry.compositionSrc = compSrc;
-    } else {
-      const innerVideo = el.querySelector("video[src]");
-      if (innerVideo) {
-        entry.src = innerVideo.getAttribute("src") || void 0;
-        entry.tag = "video";
-      }
-    }
-    missing.push(entry);
-  });
+    if (entry) missing.push(entry);
+  }
   let patched = false;
   const updatedEls = currentEls.map((existing) => {
     if (existing.compositionSrc) return existing;
@@ -3311,6 +3349,7 @@ import { useMemo as useMemo3 } from "react";
 
 // src/player/lib/timelineDOM.ts
 import { resolveCssStackingContextId } from "@hyperframes/core/runtime/stacking-context";
+import { readClipTiming as readClipTiming2 } from "@hyperframes/core/composition-contract";
 function resolveClipTag(clip) {
   return clip.tagName || clip.kind || "div";
 }
@@ -3466,22 +3505,18 @@ function parseTimelineFromDOM(doc, rootDuration) {
     if (node === rootComp) return;
     if (isTimelineIgnoredElement(node)) return;
     const el = node;
-    const startStr = el.getAttribute("data-start");
-    if (startStr == null) return;
-    const start = parseFloat(startStr);
-    if (isNaN(start)) return;
+    const timing = readClipTiming2(el);
+    const start = timing.start;
+    if (start == null) return;
     if (Number.isFinite(rootDuration) && rootDuration > 0 && start >= rootDuration) return;
     const tagLower = el.tagName.toLowerCase();
-    let dur = 0;
-    const durStr = el.getAttribute("data-duration");
-    if (durStr != null) dur = parseFloat(durStr);
-    if (isNaN(dur) || dur <= 0) dur = Math.max(0, rootDuration - start);
+    let dur = timing.duration ?? 0;
+    if (dur <= 0) dur = Math.max(0, rootDuration - start);
     if (Number.isFinite(rootDuration) && rootDuration > 0) {
       dur = Math.min(dur, Math.max(0, rootDuration - start));
     }
     if (!Number.isFinite(dur) || dur <= 0) return;
-    const trackStr = el.getAttribute("data-track-index");
-    const track = trackStr != null ? parseInt(trackStr, 10) : trackCounter++;
+    const track = timing.trackSource === "default" ? trackCounter++ : timing.trackIndex;
     const compId = el.getAttribute("data-composition-id");
     const selector = getTimelineElementSelector(el);
     const sourceFile = getTimelineElementSourceFile(el);
@@ -3507,7 +3542,7 @@ function parseTimelineFromDOM(doc, rootDuration) {
       tag: tagLower,
       start,
       duration: dur,
-      track: isNaN(track) ? 0 : track,
+      track,
       domId: el.id || void 0,
       hfId: el.getAttribute("data-hf-id") || void 0,
       selector,
@@ -6498,7 +6533,7 @@ var STUDIO_SDK_RESOLVER_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
 var STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
-  false
+  true
 );
 var STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";
 
@@ -8765,7 +8800,7 @@ function snapTimelineTime(time, targets, thresholdSecs) {
   }
   return best ? { time: best.time, target: best } : { time, target: null };
 }
-function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDuration) {
+function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDuration2) {
   if (targets.length === 0) return { start, snapTime: null, snapType: null };
   const thresholdSecs = TIMELINE_SNAP_PX / Math.max(pixelsPerSecond, 1);
   const startSnap = snapTimelineTime(start, targets, thresholdSecs);
@@ -8781,7 +8816,7 @@ function snapMoveToTargets(start, duration, targets, pixelsPerSecond, timelineDu
     candidate = endSnap.time - duration;
     target = endSnap.target;
   }
-  const maxStart = Math.max(0, timelineDuration - duration);
+  const maxStart = Math.max(0, timelineDuration2 - duration);
   const roundedCandidate = Math.round(candidate * 1e3) / 1e3;
   const clamped = Math.max(0, Math.min(maxStart, roundedCandidate));
   if (target && Math.abs(clamped - roundedCandidate) > 1e-6) target = null;
@@ -28346,6 +28381,7 @@ function CommitField({
   value,
   disabled,
   liveCommit,
+  align = "left",
   onCommit
 }) {
   const [draft, setDraft] = useState35(value);
@@ -28418,7 +28454,7 @@ function CommitField({
         scheduleCommit(nextDraft);
       },
       title: parseNumericToken(value) ? "Scroll or use Arrow keys to adjust" : void 0,
-      className: "min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+      className: `min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600 ${align === "right" ? "text-right" : "text-left"}`
     }
   );
 }
@@ -31843,7 +31879,7 @@ function PromotableControl({
     bound && /* @__PURE__ */ jsxs58(
       "span",
       {
-        className: "pointer-events-none absolute right-1.5 top-0 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent",
+        className: "pointer-events-none absolute -top-2 right-1.5 z-10 inline-flex max-w-[60%] items-center gap-1 truncate rounded bg-studio-accent/20 px-1 py-px font-mono text-[8px] font-medium text-studio-accent",
         title: `Bound to variable "${promote.boundId}"`,
         children: [
           "\u25C6 ",
@@ -31860,7 +31896,7 @@ function PromotableControl({
           e.stopPropagation();
           promote.promote();
         },
-        className: "absolute right-1.5 top-0 z-10 inline-flex items-center gap-1 rounded bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100",
+        className: "absolute -top-2 right-1.5 z-10 inline-flex items-center gap-1 rounded bg-neutral-800/80 px-1 py-px font-mono text-[8px] font-medium text-neutral-400 opacity-70 transition-colors hover:bg-studio-accent/20 hover:text-studio-accent hover:opacity-100",
         children: "\u25C7 var"
       }
     )
@@ -36274,6 +36310,7 @@ function FlatRow({
               value,
               disabled,
               liveCommit,
+              align: "right",
               onCommit: (nextValue) => {
                 track("metric", label);
                 onCommit(nextValue);
@@ -36845,7 +36882,7 @@ function FlatTextSection({
   const activeField = textFields.find((field) => field.key === activeFieldKey) ?? textFields[0];
   if (!activeField) return null;
   if (textFields.length > 1) {
-    return /* @__PURE__ */ jsxs77("div", { className: "space-y-1.5", children: [
+    return /* @__PURE__ */ jsxs77("div", { className: "space-y-2.5", children: [
       /* @__PURE__ */ jsx90(
         FlatTextLayerList,
         {
@@ -36874,7 +36911,7 @@ function FlatTextSection({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs77("div", { className: "space-y-1.5", children: [
+  return /* @__PURE__ */ jsxs77("div", { className: "space-y-2.5", children: [
     /* @__PURE__ */ jsx90(
       FlatTextFieldEditor,
       {
@@ -36988,17 +37025,6 @@ var STROKE_STYLE_OPTIONS = [
   "inset",
   "outset"
 ];
-function formatStrokeSummary(widthPx, style) {
-  return `${widthPx}px ${style}`;
-}
-function parseStrokeSummary(text) {
-  const match = /^\s*(-?\d+(?:\.\d+)?)px\s+(\S+)\s*$/.exec(text);
-  if (!match) return null;
-  const widthPx = Number.parseFloat(match[1]);
-  const style = match[2];
-  if (!Number.isFinite(widthPx) || !style) return null;
-  return { widthPx, style };
-}
 
 // src/components/editor/propertyPanelFlatMaskInsetRows.tsx
 import { Fragment as Fragment28, jsx as jsx91, jsxs as jsxs78 } from "react/jsx-runtime";
@@ -37187,24 +37213,17 @@ function FlatStrokeRow({
   const borderWidthValue = parsePxMetricValue(styles["border-width"] ?? "") ?? parsePxMetricValue(styles["border-top-width"] ?? "") ?? 0;
   const borderStyleValue = styles["border-style"] || styles["border-top-style"] || "none";
   const borderColorValue = styles["border-color"] || styles["border-top-color"] || "rgba(255, 255, 255, 0.18)";
-  const summary = formatStrokeSummary(borderWidthValue, borderStyleValue);
-  const tier = resolveValueTier(
-    styles["border-width"] != null || styles["border-style"] != null ? summary : void 0,
-    formatStrokeSummary(0, "none")
-  );
+  const widthDisplay = formatPxMetricValue(borderWidthValue);
   return /* @__PURE__ */ jsxs79(Fragment29, { children: [
     /* @__PURE__ */ jsx92(
       FlatRow,
       {
-        label: "Stroke",
-        value: summary,
-        tier,
+        label: "Stroke width",
+        value: widthDisplay,
+        tier: resolveValueTier(styles["border-width"], "0px"),
         disabled,
         onCommit: async (next) => {
-          const parsed = parseStrokeSummary(next);
-          if (!parsed) return;
-          if (!STROKE_STYLE_OPTIONS.includes(parsed.style)) return;
-          const normalizedWidth = normalizePanelPxValue(`${parsed.widthPx}px`, {
+          const normalizedWidth = normalizePanelPxValue(next, {
             min: 0,
             max: 200,
             fallback: borderWidthValue
@@ -37212,24 +37231,11 @@ function FlatStrokeRow({
           if (!normalizedWidth) return;
           for (const [property, value] of buildStrokeWidthStyleUpdates(
             normalizedWidth,
-            parsed.style
+            borderStyleValue
           )) {
             await onSetStyle(property, value);
           }
-          for (const [property, value] of buildStrokeStyleUpdates(parsed.style, normalizedWidth)) {
-            await onSetStyle(property, value);
-          }
-        },
-        suffix: /* @__PURE__ */ jsxs79(Fragment29, { children: [
-          /* @__PURE__ */ jsx92(
-            "span",
-            {
-              className: "h-4 w-4 flex-shrink-0 rounded border border-panel-border-input",
-              style: { backgroundColor: borderColorValue }
-            }
-          ),
-          /* @__PURE__ */ jsx92("span", { className: "font-mono text-[10px] text-panel-text-3", children: borderColorValue })
-        ] })
+        }
       }
     ),
     /* @__PURE__ */ jsx92(
@@ -39114,49 +39120,51 @@ function PropertyPanelFlat({
       )
     });
   }
-  groups.push({
-    id: "layout",
-    title: "Layout",
-    // No scrub accessory: FlatRow/CommitField has no pointer-drag scrubbing
-    // (wheel/arrow keys only) — advertising "drag values to scrub" here lies.
-    summary: `${formatPxMetricValue(displayX)},${formatPxMetricValue(displayY)} \xB7 ${Math.round(displayW)}\xD7${Math.round(displayH)}`,
-    content: /* @__PURE__ */ jsx99(
-      FlatLayoutSection,
-      {
-        element,
-        styles,
-        onSetStyle,
-        disabled: !element.capabilities.canEditStyles,
-        displayX,
-        displayY,
-        displayW,
-        displayH,
-        displayR,
-        manualOffsetEditingDisabled,
-        manualSizeEditingDisabled,
-        manualRotationEditingDisabled,
-        commitManualOffset,
-        commitManualSize,
-        commitManualRotation,
-        gsapAnimId,
-        navKeyframes,
-        currentPct,
-        seekFromKfPct,
-        animIdForProp,
-        resolveAnimIdForProp: animIdForProp,
-        gsapRuntimeValues,
-        gsapKeyframes: navKeyframes,
-        elStart,
-        elDuration,
-        onCommitAnimatedProperty,
-        onCommitAnimatedProperties,
-        onSeekToTime,
-        onRemoveKeyframe,
-        onConvertToKeyframes,
-        onLivePreviewProps: createGsapLivePreview(previewIframeRef ?? { current: null })
-      }
-    )
-  });
+  if (sections.layout) {
+    groups.push({
+      id: "layout",
+      title: "Layout",
+      // No scrub accessory: FlatRow/CommitField has no pointer-drag scrubbing
+      // (wheel/arrow keys only) — advertising "drag values to scrub" here lies.
+      summary: `${formatPxMetricValue(displayX)},${formatPxMetricValue(displayY)} \xB7 ${Math.round(displayW)}\xD7${Math.round(displayH)}`,
+      content: /* @__PURE__ */ jsx99(
+        FlatLayoutSection,
+        {
+          element,
+          styles,
+          onSetStyle,
+          disabled: !element.capabilities.canEditStyles,
+          displayX,
+          displayY,
+          displayW,
+          displayH,
+          displayR,
+          manualOffsetEditingDisabled,
+          manualSizeEditingDisabled,
+          manualRotationEditingDisabled,
+          commitManualOffset,
+          commitManualSize,
+          commitManualRotation,
+          gsapAnimId,
+          navKeyframes,
+          currentPct,
+          seekFromKfPct,
+          animIdForProp,
+          resolveAnimIdForProp: animIdForProp,
+          gsapRuntimeValues,
+          gsapKeyframes: navKeyframes,
+          elStart,
+          elDuration,
+          onCommitAnimatedProperty,
+          onCommitAnimatedProperties,
+          onSeekToTime,
+          onRemoveKeyframe,
+          onConvertToKeyframes,
+          onLivePreviewProps: createGsapLivePreview(previewIframeRef ?? { current: null })
+        }
+      )
+    });
+  }
   if (showMotionGroup) {
     groups.push({
       id: "motion",
@@ -39623,8 +39631,8 @@ var PropertyPanel = memo31(function PropertyPanel2(props) {
   const manualSizeEditingDisabled = !element.capabilities.canApplyManualSize;
   const manualRotationEditingDisabled = !element.capabilities.canApplyManualRotation;
   const sourceLabel = element.id ? `#${element.id}` : element.selector ?? "";
-  const showEditableSections = element.capabilities.canEditStyles;
   const sections = resolveEditingSections(domEditSelectionToFacts(element, gsapAnimations.length));
+  const showEditableSections = element.capabilities.canEditStyles && sections.style;
   const manualOffset = readStudioPathOffset(element.element);
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth = manualSize.width > 0 ? manualSize.width : parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width;
@@ -39788,7 +39796,7 @@ var PropertyPanel = memo31(function PropertyPanel2(props) {
           onRemoveBackground
         }
       ),
-      /* @__PURE__ */ jsxs89(Section, { title: "Layout", icon: /* @__PURE__ */ jsx102(Move, { size: 15 }), children: [
+      sections.layout && /* @__PURE__ */ jsxs89(Section, { title: "Layout", icon: /* @__PURE__ */ jsx102(Move, { size: 15 }), children: [
         /* @__PURE__ */ jsxs89("div", { className: RESPONSIVE_GRID, children: [
           /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsx102("div", { className: "flex-1", children: /* @__PURE__ */ jsx102(
@@ -40788,7 +40796,7 @@ var FileTree = memo33(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState119, useCallback as useCallback141, useRef as useRef119, useMemo as useMemo50, useEffect as useEffect100, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useState as useState120, useCallback as useCallback142, useRef as useRef120, useMemo as useMemo50, useEffect as useEffect102, useLayoutEffect as useLayoutEffect4 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState64, useEffect as useEffect52, useCallback as useCallback58, useRef as useRef63, useMemo as useMemo31 } from "react";
@@ -50811,8 +50819,20 @@ function useBlockHandlers({
   };
 }
 
+// src/hooks/useAddAssetAtPlayhead.ts
+import { useCallback as useCallback97 } from "react";
+function useAddAssetAtPlayhead(handleTimelineAssetDrop) {
+  return useCallback97(
+    (assetPath) => handleTimelineAssetDrop(assetPath, {
+      start: usePlayerStore.getState().currentTime,
+      track: 0
+    }),
+    [handleTimelineAssetDrop]
+  );
+}
+
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback97, useEffect as useEffect66, useRef as useRef90 } from "react";
+import { useCallback as useCallback98, useEffect as useEffect66, useRef as useRef90 } from "react";
 function iframeContentWindow(iframe) {
   try {
     return iframe?.contentWindow ?? null;
@@ -51022,22 +51042,22 @@ function useAppHotkeys({
 }) {
   const previewHotkeyWindowRef = useRef90(null);
   const previewHistoryCleanupRef = useRef90(null);
-  const readHistoryFile = useCallback97(
+  const readHistoryFile = useCallback98(
     (path) => path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
     [readOptionalProjectFile, readProjectFile]
   );
-  const writeHistoryFile = useCallback97(
+  const writeHistoryFile = useCallback98(
     async (path, content) => {
       domEditSaveTimestampRef.current = Date.now();
       await writeProjectFile(path, content);
     },
     [domEditSaveTimestampRef, writeProjectFile]
   );
-  const serializeHistoryFiles = useCallback97(
+  const serializeHistoryFiles = useCallback98(
     (paths, task) => serializeStudioFileMutations(writeProjectFile, paths, task),
     [writeProjectFile]
   );
-  const applyHistory = useCallback97(
+  const applyHistory = useCallback98(
     async (direction) => {
       if (tryApplyBeatHistory(direction, editHistory.state, showToast)) return;
       await waitForPendingDomEditSaves();
@@ -51075,8 +51095,8 @@ function useAppHotkeys({
       forceReloadSdkSession
     ]
   );
-  const handleUndo = useCallback97(() => applyHistory("undo"), [applyHistory]);
-  const handleRedo = useCallback97(() => applyHistory("redo"), [applyHistory]);
+  const handleUndo = useCallback98(() => applyHistory("undo"), [applyHistory]);
+  const handleRedo = useCallback98(() => applyHistory("redo"), [applyHistory]);
   const cbRef = useRef90(null);
   cbRef.current = {
     handleTimelineElementDelete,
@@ -51096,7 +51116,7 @@ function useAppHotkeys({
     domEditSelectionRef,
     showToast
   };
-  const handleAppKeyDown = useCallback97((event) => {
+  const handleAppKeyDown = useCallback98((event) => {
     const cb = cbRef.current;
     const key = event.key.toLowerCase();
     if (event.metaKey || event.ctrlKey) {
@@ -51109,7 +51129,7 @@ function useAppHotkeys({
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
-  const syncPreviewTimelineHotkey = useCallback97(
+  const syncPreviewTimelineHotkey = useCallback98(
     (iframe) => {
       const nextWindow = iframeContentWindow(iframe);
       if (previewHotkeyWindowRef.current === nextWindow) return;
@@ -51134,7 +51154,7 @@ function useAppHotkeys({
     },
     [handleAppKeyDown]
   );
-  const handleHistoryHotkey = useCallback97((event) => {
+  const handleHistoryHotkey = useCallback98((event) => {
     if (!(event.metaKey || event.ctrlKey) || shouldIgnoreHistoryShortcut(event.target)) return;
     handleUndoRedoKey(
       event,
@@ -51142,7 +51162,7 @@ function useAppHotkeys({
       () => void cbRef.current.handleRedo()
     );
   }, []);
-  const syncPreviewHistoryHotkey = useCallback97(
+  const syncPreviewHistoryHotkey = useCallback98(
     (iframe) => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -51180,7 +51200,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback98, useRef as useRef91 } from "react";
+import { useCallback as useCallback99, useRef as useRef91 } from "react";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -51290,7 +51310,7 @@ function useClipboard({
   const clipboardRef = useRef91(null);
   const projectIdRef = useRef91(projectId);
   projectIdRef.current = projectId;
-  const handleCopy = useCallback98(() => {
+  const handleCopy = useCallback99(() => {
     const { selectedElementId, elements } = usePlayerStore.getState();
     if (selectedElementId) {
       const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
@@ -51344,7 +51364,7 @@ function useClipboard({
     }
     return false;
   }, [activeCompPath, domEditSelectionRef, previewIframeRef, showToast]);
-  const handlePaste = useCallback98(async () => {
+  const handlePaste = useCallback99(async () => {
     const payload = clipboardRef.current;
     if (!payload) {
       showToast("Nothing to paste.", "info");
@@ -51400,7 +51420,7 @@ function useClipboard({
     showToast,
     writeProjectFile
   ]);
-  const handleCut = useCallback98(async () => {
+  const handleCut = useCallback99(async () => {
     const copied = handleCopy();
     if (!copied) return false;
     const { selectedElementId, elements } = usePlayerStore.getState();
@@ -51762,11 +51782,11 @@ function useCaptionDetection({
 }
 
 // src/hooks/useRenderClipContent.ts
-import { useCallback as useCallback101 } from "react";
+import { useCallback as useCallback102 } from "react";
 import { createElement as createElement2 } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo34, useRef as useRef92, useState as useState77, useCallback as useCallback99, useEffect as useEffect68 } from "react";
+import { memo as memo34, useRef as useRef92, useState as useState77, useCallback as useCallback100, useEffect as useEffect68 } from "react";
 import { jsx as jsx112, jsxs as jsxs98 } from "react/jsx-runtime";
 var BAR_W = 2;
 var GAP = 1;
@@ -51843,7 +51863,7 @@ var AudioWaveform = memo34(function AudioWaveform2({
       cancelled = true;
     };
   }, [audioUrl, waveformUrl, cacheKey, peaks]);
-  const draw = useCallback99(() => {
+  const draw = useCallback100(() => {
     const container = containerRef.current;
     const barsEl = barsRef.current;
     if (!container || !barsEl || !peaks) return;
@@ -51864,7 +51884,7 @@ var AudioWaveform = memo34(function AudioWaveform2({
     }
     barsEl.innerHTML = html2;
   }, [peaks, trimStartFraction, trimEndFraction]);
-  const setContainerRef = useCallback99(
+  const setContainerRef = useCallback100(
     (el) => {
       roRef.current?.disconnect();
       containerRef.current = el;
@@ -51908,7 +51928,7 @@ var AudioWaveform = memo34(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo35, useRef as useRef93, useState as useState78, useCallback as useCallback100, useEffect as useEffect69 } from "react";
+import { memo as memo35, useRef as useRef93, useState as useState78, useCallback as useCallback101, useEffect as useEffect69 } from "react";
 import { jsx as jsx113, jsxs as jsxs99 } from "react/jsx-runtime";
 var ImageThumbnail = memo35(function ImageThumbnail2({
   imageSrc,
@@ -51921,7 +51941,7 @@ var ImageThumbnail = memo35(function ImageThumbnail2({
   const [aspect, setAspect] = useState78(16 / 9);
   const ioRef = useRef93(null);
   const roRef = useRef93(null);
-  const setContainerRef = useCallback100((el) => {
+  const setContainerRef = useCallback101((el) => {
     ioRef.current?.disconnect();
     roRef.current?.disconnect();
     if (!el) return;
@@ -52074,7 +52094,7 @@ function useRenderClipContent({
   activePreviewUrl,
   effectiveTimelineDuration
 }) {
-  return useCallback101(
+  return useCallback102(
     // Pre-existing clip-content dispatcher; reduced by extracting renderAudioClip.
     // fallow-ignore-next-line complexity
     (el, style) => {
@@ -52146,11 +52166,11 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback102, useEffect as useEffect70, useRef as useRef94, useState as useState79 } from "react";
+import { useCallback as useCallback103, useEffect as useEffect70, useRef as useRef94, useState as useState79 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState79(null);
   const consoleErrorsRef = useRef94([]);
-  const resetErrors = useCallback102(() => {
+  const resetErrors = useCallback103(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
   }, []);
@@ -52219,7 +52239,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useState as useState80, useCallback as useCallback103, useRef as useRef95 } from "react";
+import { useState as useState80, useCallback as useCallback104, useRef as useRef95 } from "react";
 
 // src/utils/projectRouting.ts
 var PROJECT_HASH_PREFIX = "#project/";
@@ -52308,10 +52328,10 @@ function useFrameCapture({
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
     return liveTime.subscribe(setCaptureFrameTime);
   });
-  const refreshCaptureFrameTime = useCallback103(() => {
+  const refreshCaptureFrameTime = useCallback104(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
   }, []);
-  const handleCaptureFrameClick = useCallback103(
+  const handleCaptureFrameClick = useCallback104(
     async (event) => {
       if (!projectId) return;
       event.preventDefault();
@@ -52388,7 +52408,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState81, useCallback as useCallback104, useEffect as useEffect71, useRef as useRef96, useMemo as useMemo37 } from "react";
+import { useState as useState81, useCallback as useCallback105, useEffect as useEffect71, useRef as useRef96, useMemo as useMemo37 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -52403,7 +52423,7 @@ function useLintModal(projectId, refreshKey) {
   const [linting, setLinting] = useState81(false);
   const [backgroundFindings, setBackgroundFindings] = useState81([]);
   const autoLintRanRef = useRef96(false);
-  const runLint = useCallback104(
+  const runLint = useCallback105(
     async (opts) => {
       if (!projectId) return;
       if (!opts?.background) setLinting(true);
@@ -52428,7 +52448,7 @@ function useLintModal(projectId, refreshKey) {
     },
     [projectId]
   );
-  const handleLint = useCallback104(() => runLint(), [runLint]);
+  const handleLint = useCallback105(() => runLint(), [runLint]);
   const prevProjectIdRef = useRef96(projectId);
   useEffect71(() => {
     if (projectId !== prevProjectIdRef.current) {
@@ -52444,8 +52464,8 @@ function useLintModal(projectId, refreshKey) {
     const timer = setTimeout(() => void runLint({ background: true }), 1e3);
     return () => clearTimeout(timer);
   }, [projectId, refreshKey, runLint]);
-  const closeLintModal = useCallback104(() => setLintModal(null), []);
-  const groupFindings = useCallback104(
+  const closeLintModal = useCallback105(() => setLintModal(null), []);
+  const groupFindings = useCallback105(
     (keyFn) => {
       const map = /* @__PURE__ */ new Map();
       for (const f of backgroundFindings) {
@@ -52477,7 +52497,7 @@ function useLintModal(projectId, refreshKey) {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState82, useCallback as useCallback105, useRef as useRef97 } from "react";
+import { useState as useState82, useCallback as useCallback106, useRef as useRef97 } from "react";
 var AUTO_DISMISS_MS2 = 4e3;
 var EXIT_MS = 160;
 var MAX_TOASTS = 3;
@@ -52485,21 +52505,21 @@ var nextToastId = 1;
 function useToast() {
   const [toasts, setToasts] = useState82([]);
   const timersRef = useRef97(/* @__PURE__ */ new Map());
-  const clearTimer = useCallback105((id) => {
+  const clearTimer = useCallback106((id) => {
     const timer = timersRef.current.get(id);
     if (timer) {
       clearTimeout(timer);
       timersRef.current.delete(id);
     }
   }, []);
-  const removeToast = useCallback105(
+  const removeToast = useCallback106(
     (id) => {
       clearTimer(id);
       setToasts((prev) => prev.filter((t) => t.id !== id));
     },
     [clearTimer]
   );
-  const dismissToast = useCallback105(
+  const dismissToast = useCallback106(
     (id) => {
       clearTimer(id);
       setToasts((prev) => prev.map((t) => t.id === id ? { ...t, leaving: true } : t));
@@ -52508,7 +52528,7 @@ function useToast() {
     },
     [clearTimer, removeToast]
   );
-  const showToast = useCallback105(
+  const showToast = useCallback106(
     (message, tone = "error") => {
       const id = nextToastId++;
       setToasts((prev) => {
@@ -52534,14 +52554,14 @@ function useToast() {
 }
 
 // src/hooks/useCompositionContentLoader.ts
-import { useCallback as useCallback106 } from "react";
+import { useCallback as useCallback107 } from "react";
 function useCompositionContentLoader({
   projectId,
   setEditingFile,
   setActiveCompPath,
   showToast
 }) {
-  return useCallback106(
+  return useCallback107(
     (comp) => {
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
       setEditingFile({ path: comp, content: null });
@@ -52560,7 +52580,7 @@ function useCompositionContentLoader({
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback107, useEffect as useEffect72, useRef as useRef98, useState as useState83 } from "react";
+import { useCallback as useCallback108, useEffect as useEffect72, useRef as useRef98, useState as useState83 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
@@ -52693,7 +52713,7 @@ function useStudioUrlState({
   const [selectionHydrated, setSelectionHydrated] = useState83(initialState2.selection == null);
   const pendingSelectionRef = useRef98(initialState2.selection);
   const stableTimeRef = useRef98(initialState2.currentTime);
-  const buildUrlState = useCallback107(
+  const buildUrlState = useCallback108(
     () => ({
       activeCompPath,
       currentTime: stableTimeRef.current,
@@ -52704,7 +52724,7 @@ function useStudioUrlState({
     }),
     [activeCompPath, domEditSelection, rightCollapsed, rightPanelTab]
   );
-  const applyUrlSelection = useCallback107(
+  const applyUrlSelection = useCallback108(
     (selection) => {
       if (!selection) {
         applyDomSelection(null, { revealPanel: false });
@@ -52820,7 +52840,7 @@ function useStudioUrlState({
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback108, useMemo as useMemo38, useRef as useRef99, useState as useState84 } from "react";
+import { useCallback as useCallback109, useMemo as useMemo38, useRef as useRef99, useState as useState84 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -52866,21 +52886,21 @@ function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, i
 function useDragOverlay(onImportFiles) {
   const [active, setActive] = useState84(false);
   const counterRef = useRef99(0);
-  const onDragOver = useCallback108((e) => {
+  const onDragOver = useCallback109((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
   }, []);
-  const onDragEnter = useCallback108((e) => {
+  const onDragEnter = useCallback109((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
     counterRef.current++;
     setActive(true);
   }, []);
-  const onDragLeave = useCallback108(() => {
+  const onDragLeave = useCallback109(() => {
     counterRef.current--;
     if (counterRef.current === 0) setActive(false);
   }, []);
-  const onDrop = useCallback108(
+  const onDrop = useCallback109(
     (e) => {
       counterRef.current = 0;
       setActive(false);
@@ -52893,7 +52913,7 @@ function useDragOverlay(onImportFiles) {
   return { active, onDragOver, onDragEnter, onDragLeave, onDrop };
 }
 function useGlobalFileDrop(handleTimelineFileDrop) {
-  const onDrop = useCallback108(
+  const onDrop = useCallback109(
     (files) => {
       const start = usePlayerStore.getState().currentTime;
       void handleTimelineFileDrop(Array.from(files), { start, track: 0 });
@@ -52904,7 +52924,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 }
 
 // src/components/StudioHeader.tsx
-import { useRef as useRef100 } from "react";
+import { useRef as useRef101 } from "react";
 
 // src/contexts/PanelLayoutContext.tsx
 import { createContext as createContext8, useContext as useContext8, useMemo as useMemo39 } from "react";
@@ -52983,10 +53003,11 @@ function PanelLayoutProvider({
 // src/contexts/ViewModeContext.tsx
 import {
   createContext as createContext9,
-  useCallback as useCallback109,
+  useCallback as useCallback110,
   useContext as useContext9,
   useEffect as useEffect73,
   useMemo as useMemo40,
+  useRef as useRef100,
   useState as useState85
 } from "react";
 import { jsx as jsx115 } from "react/jsx-runtime";
@@ -53005,18 +53026,59 @@ function writeViewModeToUrl(mode) {
   }
   window.history.replaceState(window.history.state, "", url);
 }
+function readHistoryLocation() {
+  if (typeof window === "undefined") return null;
+  return {
+    href: window.location.href,
+    state: window.history.state
+  };
+}
 function useViewModeState() {
   const [viewMode, setMode] = useState85(() => readViewModeFromUrl());
+  const guardsRef = useRef100(/* @__PURE__ */ new Set());
+  const acceptedLocationRef = useRef100(readHistoryLocation());
+  const canSetViewMode = useCallback110((mode) => {
+    for (const guard of guardsRef.current) {
+      if (!guard(mode)) return false;
+    }
+    return true;
+  }, []);
   useEffect73(() => {
-    const onPopState = () => setMode(readViewModeFromUrl());
+    const onPopState = () => {
+      const mode = readViewModeFromUrl();
+      if (mode !== viewMode && !canSetViewMode(mode)) {
+        const acceptedLocation = acceptedLocationRef.current;
+        if (acceptedLocation) {
+          window.history.pushState(acceptedLocation.state, "", acceptedLocation.href);
+        }
+        return;
+      }
+      setMode(mode);
+      acceptedLocationRef.current = readHistoryLocation();
+    };
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
+  }, [canSetViewMode, viewMode]);
+  const setViewMode = useCallback110(
+    (mode) => {
+      if (!canSetViewMode(mode)) return false;
+      setMode(mode);
+      writeViewModeToUrl(mode);
+      acceptedLocationRef.current = readHistoryLocation();
+      return true;
+    },
+    [canSetViewMode]
+  );
+  const registerViewModeGuard = useCallback110((guard) => {
+    guardsRef.current.add(guard);
+    return () => {
+      guardsRef.current.delete(guard);
+    };
   }, []);
-  const setViewMode = useCallback109((mode) => {
-    setMode(mode);
-    writeViewModeToUrl(mode);
-  }, []);
-  return useMemo40(() => ({ viewMode, setViewMode }), [viewMode, setViewMode]);
+  return useMemo40(
+    () => ({ viewMode, setViewMode, registerViewModeGuard }),
+    [viewMode, setViewMode, registerViewModeGuard]
+  );
 }
 var ViewModeContext = createContext9(null);
 function useViewMode() {
@@ -53221,11 +53283,10 @@ var VIEW_MODE_OPTIONS = [
 ];
 function ViewModeToggle() {
   const { viewMode, setViewMode } = useViewMode();
-  const tabRefs = useRef100([]);
+  const tabRefs = useRef101([]);
   const selectMode = (mode) => {
     if (mode === viewMode) return;
-    trackStudioEvent("view_mode_toggle", { mode });
-    setViewMode(mode);
+    if (setViewMode(mode)) trackStudioEvent("view_mode_toggle", { mode });
   };
   const handleKeyDown = (e, index) => {
     if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
@@ -53453,10 +53514,10 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState87, useCallback as useCallback111, useRef as useRef102, useEffect as useEffect75 } from "react";
+import { useState as useState87, useCallback as useCallback112, useRef as useRef103, useEffect as useEffect75 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback110, useEffect as useEffect74, useRef as useRef101, useState as useState86 } from "react";
+import { useCallback as useCallback111, useEffect as useEffect74, useRef as useRef102, useState as useState86 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -53575,10 +53636,10 @@ function createRecordingRefs() {
 function useGestureRecording() {
   const [isRecording, setIsRecording] = useState86(false);
   const [recordingDuration, setRecordingDuration] = useState86(0);
-  const isRecordingRef = useRef101(false);
-  const refs = useRef101(createRecordingRefs());
-  const samplesRef = useRef101(refs.current.samples);
-  const trailRef = useRef101(refs.current.trail);
+  const isRecordingRef = useRef102(false);
+  const refs = useRef102(createRecordingRefs());
+  const samplesRef = useRef102(refs.current.samples);
+  const trailRef = useRef102(refs.current.trail);
   useEffect74(() => {
     const r = refs.current;
     return () => {
@@ -53587,7 +53648,7 @@ function useGestureRecording() {
       isRecordingRef.current = false;
     };
   }, []);
-  const startRecording = useCallback110(
+  const startRecording = useCallback111(
     (element, iframeEl, elementEndTime) => {
       if (isRecordingRef.current) return;
       isRecordingRef.current = true;
@@ -53687,7 +53748,7 @@ function useGestureRecording() {
     []
     // No deps — uses refs only for all mutable state
   );
-  const stopRecording = useCallback110(() => {
+  const stopRecording = useCallback111(() => {
     if (!isRecordingRef.current) return [];
     isRecordingRef.current = false;
     const r = refs.current;
@@ -53717,7 +53778,7 @@ function useGestureRecording() {
     setIsRecording(false);
     return frozen;
   }, []);
-  const clearSamples = useCallback110(() => {
+  const clearSamples = useCallback111(() => {
     const r = refs.current;
     r.samples = [];
     r.trail = [];
@@ -53974,13 +54035,13 @@ function useGestureCommit({
 }) {
   const gestureRecording = useGestureRecording();
   const [gestureState, setGestureState] = useState87("idle");
-  const gestureStateRef = useRef102("idle");
-  const recordingAutoStopRef = useRef102(void 0);
-  const recordingStartTimeRef = useRef102(0);
-  const commitInFlightRef = useRef102(false);
-  const capturedSelectionRef = useRef102(null);
+  const gestureStateRef = useRef103("idle");
+  const recordingAutoStopRef = useRef103(void 0);
+  const recordingStartTimeRef = useRef103(0);
+  const commitInFlightRef = useRef103(false);
+  const capturedSelectionRef = useRef103(null);
   useEffect75(() => () => clearInterval(recordingAutoStopRef.current), []);
-  const stopAndCommitRecording = useCallback111(async () => {
+  const stopAndCommitRecording = useCallback112(async () => {
     clearInterval(recordingAutoStopRef.current);
     if (commitInFlightRef.current) {
       return;
@@ -54146,7 +54207,7 @@ function useGestureCommit({
       commitInFlightRef.current = false;
     }
   }, [gestureRecording, showToast, isGestureRecordingRef, domEditSessionRef]);
-  const handleToggleRecording = useCallback111(() => {
+  const handleToggleRecording = useCallback112(() => {
     if (gestureStateRef.current === "recording") {
       void stopAndCommitRecording();
       return;
@@ -54304,20 +54365,20 @@ var GestureTrailOverlay = memo36(function GestureTrailOverlay2({
 });
 
 // src/components/StudioLeftSidebar.tsx
-import { useCallback as useCallback118 } from "react";
+import { useCallback as useCallback119 } from "react";
 
 // src/components/sidebar/LeftSidebar.tsx
 import {
   memo as memo40,
   useState as useState96,
-  useCallback as useCallback117,
+  useCallback as useCallback118,
   useImperativeHandle,
-  useRef as useRef108,
+  useRef as useRef109,
   forwardRef as forwardRef3
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo37, useCallback as useCallback112, useEffect as useEffect76, useRef as useRef103, useState as useState88 } from "react";
+import { memo as memo37, useCallback as useCallback113, useEffect as useEffect76, useRef as useRef104, useState as useState88 } from "react";
 import { jsx as jsx118, jsxs as jsxs102 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -54386,10 +54447,10 @@ function CompCard({
 }) {
   const [hovered, setHovered] = useState88(false);
   const [stageSize, setStageSize] = useState88(DEFAULT_PREVIEW_STAGE);
-  const iframeRef = useRef103(null);
-  const hoverTimer = useRef103(null);
-  const syncTimer = useRef103(null);
-  const requestIframePlaybackSync = useCallback112((shouldPlay) => {
+  const iframeRef = useRef104(null);
+  const hoverTimer = useRef104(null);
+  const syncTimer = useRef104(null);
+  const requestIframePlaybackSync = useCallback113((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
       syncTimer.current = null;
@@ -54547,7 +54608,7 @@ var CompositionsTab = memo37(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo38, useState as useState93, useCallback as useCallback115, useRef as useRef106, useMemo as useMemo43, useEffect as useEffect81 } from "react";
+import { memo as memo38, useState as useState93, useCallback as useCallback116, useRef as useRef107, useMemo as useMemo43, useEffect as useEffect81 } from "react";
 
 // src/components/sidebar/assetHelpers.ts
 function getCategory(path) {
@@ -54597,7 +54658,7 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState89, useRef as useRef104, useEffect as useEffect77, useCallback as useCallback113 } from "react";
+import { useState as useState89, useRef as useRef105, useEffect as useEffect77, useCallback as useCallback114 } from "react";
 
 // src/components/sidebar/AssetContextMenu.tsx
 import { jsx as jsx119, jsxs as jsxs103 } from "react/jsx-runtime";
@@ -54726,24 +54787,24 @@ function AudioRow({
   const [contextMenu, setContextMenu] = useState89(null);
   const [playing, setPlaying] = useState89(false);
   const [bars, setBars] = useState89([]);
-  const audioRef = useRef104(null);
-  const actxRef = useRef104(null);
-  const analyserRef = useRef104(null);
-  const sourceRef = useRef104(null);
-  const animRef = useRef104(0);
+  const audioRef = useRef105(null);
+  const actxRef = useRef105(null);
+  const analyserRef = useRef105(null);
+  const sourceRef = useRef105(null);
+  const animRef = useRef105(0);
   const name = basename2(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = resolveMediaPreviewUrl(asset, projectId);
-  const pointerDownRef = useRef104(null);
+  const pointerDownRef = useRef105(null);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const requestClipReveal = usePlayerStore((s) => s.requestClipReveal);
   const elements = usePlayerStore((s) => s.elements);
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const handlePointerDown = useCallback113((e) => {
+  const handlePointerDown = useCallback114((e) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  const handlePointerUp = useCallback113(
+  const handlePointerUp = useCallback114(
     (e) => {
       const origin = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -54807,7 +54868,7 @@ function AudioRow({
     }
     return () => cancelAnimationFrame(animRef.current);
   }, [playing]);
-  const togglePlay = useCallback113(async () => {
+  const togglePlay = useCallback114(async () => {
     if (playing) {
       audioRef.current?.pause();
       setPlaying(false);
@@ -54976,7 +55037,7 @@ function GlobalAssetsView({ searchQuery }) {
 }
 
 // src/components/sidebar/AssetCard.tsx
-import { useState as useState92, useEffect as useEffect80, useRef as useRef105, useCallback as useCallback114 } from "react";
+import { useState as useState92, useEffect as useEffect80, useRef as useRef106, useCallback as useCallback115 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
 import { useState as useState91, useEffect as useEffect79 } from "react";
@@ -55101,16 +55162,16 @@ function AssetCard({
   const probedDuration = useProbedDuration(serveUrl, !isVideo || duration != null);
   const resolvedDuration = duration ?? probedDuration ?? void 0;
   const durationLabel = formatDuration(resolvedDuration ?? 0);
-  const pointerDownRef = useRef105(null);
+  const pointerDownRef = useRef106(null);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const requestClipReveal = usePlayerStore((s) => s.requestClipReveal);
   const elements = usePlayerStore((s) => s.elements);
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
-  const handlePointerDown = useCallback114((e) => {
+  const handlePointerDown = useCallback115((e) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
-  const handlePointerUp = useCallback114(
+  const handlePointerUp = useCallback115(
     (e) => {
       const origin = pointerDownRef.current;
       pointerDownRef.current = null;
@@ -55303,7 +55364,7 @@ var AssetsTab = memo38(function AssetsTab2({
   onRename,
   onAddAssetToTimeline
 }) {
-  const fileInputRef = useRef106(null);
+  const fileInputRef = useRef107(null);
   const [dragOver, setDragOver] = useState93(false);
   const [copiedPath, setCopiedPath] = useState93(null);
   const [activeFilter, setActiveFilter] = useState93("all");
@@ -55311,7 +55372,7 @@ var AssetsTab = memo38(function AssetsTab2({
   const [searchQuery, setSearchQuery] = useState93("");
   const [viewMode, setViewMode] = useState93("local");
   const [manifest, setManifest] = useState93(/* @__PURE__ */ new Map());
-  const manifest404Ref = useRef106(/* @__PURE__ */ new Set());
+  const manifest404Ref = useRef107(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
   useEffect81(() => {
     if (manifest404Ref.current.has(projectId)) return;
@@ -55340,7 +55401,7 @@ var AssetsTab = memo38(function AssetsTab2({
       cancelled = true;
     };
   }, [projectId, assetsKey]);
-  const handleDrop = useCallback115(
+  const handleDrop = useCallback116(
     (e) => {
       e.preventDefault();
       setDragOver(false);
@@ -55348,7 +55409,7 @@ var AssetsTab = memo38(function AssetsTab2({
     },
     [onImport]
   );
-  const handleCopyPath = useCallback115(async (path) => {
+  const handleCopyPath = useCallback116(async (path) => {
     const copied = await copyTextToClipboard(path);
     if (copied) {
       setCopiedPath(path);
@@ -55632,7 +55693,7 @@ var AssetsTab = memo38(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo39, useState as useState95, useCallback as useCallback116, useRef as useRef107, useEffect as useEffect83 } from "react";
+import { memo as memo39, useState as useState95, useCallback as useCallback117, useRef as useRef108, useEffect as useEffect83 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/hooks/useBlockCatalog.ts
@@ -55926,16 +55987,16 @@ function BlockCard({
 }) {
   const [hovered, setHovered] = useState95(false);
   const [adding, setAdding] = useState95(false);
-  const hoverTimer = useRef107(null);
+  const hoverTimer = useRef108(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
-  const handleEnter = useCallback116(() => {
+  const handleEnter = useCallback117(() => {
     hoverTimer.current = setTimeout(() => {
       setHovered(true);
       onPreview?.({ videoUrl, posterUrl, title });
     }, 300);
   }, [onPreview, videoUrl, posterUrl, title]);
-  const handleLeave = useCallback116(() => {
+  const handleLeave = useCallback117(() => {
     if (hoverTimer.current) {
       clearTimeout(hoverTimer.current);
       hoverTimer.current = null;
@@ -55948,7 +56009,7 @@ function BlockCard({
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
   }, []);
-  const handleAdd = useCallback116(
+  const handleAdd = useCallback117(
     (e) => {
       e.stopPropagation();
       if (adding || !onAdd) return;
@@ -55959,7 +56020,7 @@ function BlockCard({
     [onAdd, adding]
   );
   const { activeCompPath, compositionDimensions } = useStudioShellContext();
-  const handleShowPrompt = useCallback116(
+  const handleShowPrompt = useCallback117(
     (e) => {
       e.stopPropagation();
       const state = usePlayerStore.getState();
@@ -56104,11 +56165,11 @@ function PromptPreviewModal({
 }) {
   const [value, setValue] = useState95(prompt);
   const [copied, setCopied] = useState95(false);
-  const textareaRef = useRef107(null);
+  const textareaRef = useRef108(null);
   useEffect83(() => {
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, []);
-  const handleCopy = useCallback116(() => {
+  const handleCopy = useCallback117(() => {
     navigator.clipboard.writeText(value);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
@@ -56232,14 +56293,14 @@ var LeftSidebar = memo40(
     onAddAssetToTimeline
   }, ref) {
     const [tab, setTab] = useState96(getPersistedTab);
-    const tabRef = useRef108(tab);
+    const tabRef = useRef109(tab);
     tabRef.current = tab;
-    const selectTab = useCallback117((t) => {
+    const selectTab = useCallback118((t) => {
       setTab(t);
       localStorage.setItem(STORAGE_KEY, t);
       trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
     }, []);
-    const getTab = useCallback117(() => tabRef.current, []);
+    const getTab = useCallback118(() => tabRef.current, []);
     useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
     return /* @__PURE__ */ jsx126(
       "div",
@@ -56580,7 +56641,7 @@ function StudioLeftSidebar({
     handleImportFiles,
     handleContentChange
   } = useFileManagerContext();
-  const handleRenderComposition = useCallback118(
+  const handleRenderComposition = useCallback119(
     async (comp) => {
       await waitForPendingDomEditSaves();
       const { format, quality, fps } = getPersistedRenderSettings();
@@ -56700,13 +56761,13 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioRightPanel.tsx
-import { useCallback as useCallback134, useEffect as useEffect89, useMemo as useMemo46, useRef as useRef114 } from "react";
+import { useCallback as useCallback135, useEffect as useEffect90, useRef as useRef115 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo41, useState as useState99, useCallback as useCallback120, useEffect as useEffect84, useRef as useRef110 } from "react";
+import { memo as memo41, useState as useState99, useCallback as useCallback121, useEffect as useEffect84, useRef as useRef111 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef109, useState as useState98, useCallback as useCallback119 } from "react";
+import { useRef as useRef110, useState as useState98, useCallback as useCallback120 } from "react";
 var DRAG_THRESHOLD_PX3 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -56773,10 +56834,10 @@ function useLayerDrag({
   onReorder,
   onSingleSibling
 }) {
-  const dragRef = useRef109(null);
+  const dragRef = useRef110(null);
   const [dragKey, setDragKey] = useState98(null);
   const [insertionLineY, setInsertionLineY] = useState98(null);
-  const handleRowPointerDown = useCallback119(
+  const handleRowPointerDown = useCallback120(
     (layerIndex, e) => {
       if (e.button !== 0) return;
       const layer = visibleLayers[layerIndex];
@@ -56803,7 +56864,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef, onSingleSibling]
   );
-  const handleContainerPointerMove = useCallback119(
+  const handleContainerPointerMove = useCallback120(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -56829,7 +56890,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef]
   );
-  const handleContainerPointerUp = useCallback119(() => {
+  const handleContainerPointerUp = useCallback120(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     setDragKey(null);
@@ -56978,15 +57039,15 @@ var LayersPanel = memo41(function LayersPanel2() {
   } = useDomEditContext();
   const [layers, setLayers] = useState99([]);
   const [collapsed, setCollapsed] = useState99({});
-  const prevDocVersionRef = useRef110(0);
-  const scrollContainerRef = useRef110(null);
+  const prevDocVersionRef = useRef111(0);
+  const scrollContainerRef = useRef111(null);
   const mirrorLayerReorderToTimeline = useLayerReorderTimelineMirror();
   const { scheduleReveal } = useLayerRevealOverride({
     isPlaying,
     selectedElement: domEditSelection?.element ?? null
   });
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
-  const collectLayers = useCallback120(() => {
+  const collectLayers = useCallback121(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     let doc = null;
@@ -57033,7 +57094,7 @@ var LayersPanel = memo41(function LayersPanel2() {
       throttle.cancel();
     };
   }, [collectLayers]);
-  const resolveSelection = useCallback120(
+  const resolveSelection = useCallback121(
     (layer) => {
       let el = layer.element;
       if (!el.isConnected) {
@@ -57053,7 +57114,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [activeCompPath, isMasterView, previewIframeRef, activeGroupElement]
   );
-  const seekToLayer = useCallback120(
+  const seekToLayer = useCallback121(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -57082,7 +57143,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [currentTime, resolveSelection, timelineElements]
   );
-  const handleSelectLayer = useCallback120(
+  const handleSelectLayer = useCallback121(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -57092,7 +57153,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [resolveSelection, applyDomSelection, seekToLayer, scheduleReveal]
   );
-  const handleLayerDoubleClick = useCallback120(
+  const handleLayerDoubleClick = useCallback121(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (selection?.element.hasAttribute("data-hf-group")) {
@@ -57103,7 +57164,7 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [resolveSelection, setActiveGroupElement, handleSelectLayer]
   );
-  const handleLayerHover = useCallback120(
+  const handleLayerHover = useCallback121(
     async (layer) => {
       if (!layer) {
         updateDomEditHoverSelection(null);
@@ -57114,11 +57175,11 @@ var LayersPanel = memo41(function LayersPanel2() {
     },
     [resolveSelection, updateDomEditHoverSelection]
   );
-  const toggleCollapse = useCallback120((key, e) => {
+  const toggleCollapse = useCallback121((key, e) => {
     e.stopPropagation();
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
   }, []);
-  const handleReorder = useCallback120(
+  const handleReorder = useCallback121(
     (event) => {
       const { siblingLayers, fromIndex, toIndex } = event;
       const reordered = [...siblingLayers];
@@ -57181,7 +57242,7 @@ var LayersPanel = memo41(function LayersPanel2() {
   );
   const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
   const visibleLayers = getVisibleLayers(layers, collapsed);
-  const handleSingleSibling = useCallback120(() => {
+  const handleSingleSibling = useCallback121(() => {
     showToast("Only one layer at this level", "info");
   }, [showToast]);
   const {
@@ -57310,10 +57371,10 @@ var LayersPanel = memo41(function LayersPanel2() {
 });
 
 // src/captions/components/CaptionPropertyPanel.tsx
-import { memo as memo43, useCallback as useCallback122, useState as useState100 } from "react";
+import { memo as memo43, useCallback as useCallback123, useState as useState100 } from "react";
 
 // src/captions/components/CaptionAnimationPanel.tsx
-import { memo as memo42, useCallback as useCallback121 } from "react";
+import { memo as memo42, useCallback as useCallback122 } from "react";
 
 // src/captions/components/shared.tsx
 import { jsx as jsx130, jsxs as jsxs113 } from "react/jsx-runtime";
@@ -57476,25 +57537,25 @@ var CaptionAnimationPanel = memo42(function CaptionAnimationPanel2() {
   }
   const group = resolvedGroupId ? model?.groups.get(resolvedGroupId) : void 0;
   const animation = group?.animation;
-  const handleEntranceChange = useCallback121(
+  const handleEntranceChange = useCallback122(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "entrance", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleHighlightChange = useCallback121(
+  const handleHighlightChange = useCallback122(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "highlight", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleExitChange = useCallback121(
+  const handleExitChange = useCallback122(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "exit", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleApplyToAll = useCallback121(() => {
+  const handleApplyToAll = useCallback122(() => {
     if (animation) applyAnimationToAll(animation);
   }, [animation, applyAnimationToAll]);
   if (!group || !resolvedGroupId || !animation) {
@@ -57572,7 +57633,7 @@ var CaptionPropertyPanel = memo43(function CaptionPropertyPanel2({
     ...groupStyle,
     ...segmentOverrides
   };
-  const applyToIframeDom = useCallback122(
+  const applyToIframeDom = useCallback123(
     (updates) => {
       const iframe = iframeRef.current;
       if (!iframe || !model) return;
@@ -57646,7 +57707,7 @@ var CaptionPropertyPanel = memo43(function CaptionPropertyPanel2({
     },
     [iframeRef, model, selectedSegmentIds]
   );
-  const handleStyleChange = useCallback122(
+  const handleStyleChange = useCallback123(
     (updates) => {
       if (selectedGroupId) {
         updateGroupStyle(selectedGroupId, updates);
@@ -57746,7 +57807,7 @@ var CaptionPropertyPanel = memo43(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo44, useState as useState101, useCallback as useCallback123 } from "react";
+import { memo as memo44, useState as useState101, useCallback as useCallback124 } from "react";
 import { jsx as jsx133, jsxs as jsxs116 } from "react/jsx-runtime";
 var BlockParamsPanel = memo44(function BlockParamsPanel2({
   blockTitle,
@@ -57761,7 +57822,7 @@ var BlockParamsPanel = memo44(function BlockParamsPanel2({
     }
     return initial;
   });
-  const handleChange = useCallback123((key, value) => {
+  const handleChange = useCallback124((key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
   }, []);
   return /* @__PURE__ */ jsxs116("div", { className: "flex flex-col h-full", children: [
@@ -57871,10 +57932,10 @@ function ParamControl({
 }
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo46, useState as useState103, useRef as useRef111, useEffect as useEffect85, useId as useId2 } from "react";
+import { memo as memo46, useState as useState103, useRef as useRef112, useEffect as useEffect85, useId as useId2 } from "react";
 
 // src/components/renders/RenderQueueItem.tsx
-import { memo as memo45, useCallback as useCallback124, useState as useState102 } from "react";
+import { memo as memo45, useCallback as useCallback125, useState as useState102 } from "react";
 import { Fragment as Fragment42, jsx as jsx134, jsxs as jsxs117 } from "react/jsx-runtime";
 function formatDuration2(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -57897,10 +57958,10 @@ var RenderQueueItem = memo45(function RenderQueueItem2({
   const [videoReady, setVideoReady] = useState102(false);
   const [confirmingDelete, setConfirmingDelete] = useState102(false);
   const fileSrc = `/api/projects/${projectId}/renders/file/${job.filename}`;
-  const handleOpen = useCallback124(() => {
+  const handleOpen = useCallback125(() => {
     window.open(fileSrc, "_blank");
   }, [fileSrc]);
-  const handleDownload = useCallback124(
+  const handleDownload = useCallback125(
     (e) => {
       e.stopPropagation();
       const a = document.createElement("a");
@@ -58161,7 +58222,7 @@ var FORMAT_INFO = {
 };
 function FormatInfoTooltip({ format }) {
   const [open, setOpen] = useState103(false);
-  const timeoutRef = useRef111(void 0);
+  const timeoutRef = useRef112(void 0);
   const panelId = useId2();
   const show = () => {
     clearTimeout(timeoutRef.current);
@@ -58375,7 +58436,7 @@ var RenderQueue = memo46(function RenderQueue2({
   onDismissActionError,
   compositionDimensions
 }) {
-  const listRef = useRef111(null);
+  const listRef = useRef112(null);
   useEffect85(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
@@ -58484,11 +58545,11 @@ var RenderQueue = memo46(function RenderQueue2({
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState105, useEffect as useEffect86, useCallback as useCallback126, useRef as useRef112 } from "react";
+import { useState as useState105, useEffect as useEffect86, useCallback as useCallback127, useRef as useRef113 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
-import { useState as useState104, useCallback as useCallback125, useId as useId3 } from "react";
+import { useState as useState104, useCallback as useCallback126, useId as useId3 } from "react";
 import { jsx as jsx136, jsxs as jsxs119 } from "react/jsx-runtime";
 function SectionHeader({
   children,
@@ -58673,7 +58734,7 @@ function BranchTree({
 }) {
   const [newLabel, setNewLabel] = useState104("");
   const inputId = useId3();
-  const handleCreate = useCallback125(() => {
+  const handleCreate = useCallback126(() => {
     const label = newLabel.trim();
     if (!label) return;
     onCreateSequence(label);
@@ -58734,7 +58795,7 @@ function BranchItem({
 }) {
   const [editing, setEditing] = useState104(false);
   const [draft, setDraft] = useState104(seq.label);
-  const commitRename = useCallback125(() => {
+  const commitRename = useCallback126(() => {
     const label = draft.trim();
     if (label && label !== seq.label) onRename(seq.id, label);
     setEditing(false);
@@ -58832,7 +58893,7 @@ function HotspotTool({
   const selectedElementId = domEditSelection?.element?.id ?? null;
   const selectedHfId = domEditSelection?.hfId ?? null;
   const elementKey2 = selectedElementId || selectedHfId;
-  const handleMakeHotspot = useCallback125(() => {
+  const handleMakeHotspot = useCallback126(() => {
     if (!selectedSceneId || !targetSequenceId || !elementKey2) return;
     const id = `hotspot-${elementKey2}-${generateId()}`;
     const label = hotspotLabel.trim() || elementKey2;
@@ -59121,8 +59182,8 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   );
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
-  const manifestRef = useRef112(manifest);
-  const notesCtrlRef = useRef112(makeSlideshowNotesController());
+  const manifestRef = useRef113(manifest);
+  const notesCtrlRef = useRef113(makeSlideshowNotesController());
   useEffect86(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
@@ -59136,7 +59197,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     manifestRef.current = parsed;
     setSelectedSequenceId(null);
   }, [compHtml]);
-  const applyManifest = useCallback126(
+  const applyManifest = useCallback127(
     async (next) => {
       const merged = notesCtrlRef.current.mergeIntoDiscrete(next);
       setManifest(merged);
@@ -59149,7 +59210,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersist]
   );
-  const applyNotesManifest = useCallback126(
+  const applyNotesManifest = useCallback127(
     (next) => {
       setManifest(next);
       manifestRef.current = next;
@@ -59163,7 +59224,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       ctrl.flush();
     };
   }, []);
-  const toggleSection = useCallback126((key) => {
+  const toggleSection = useCallback127((key) => {
     setExpandedSections((prev) => {
       const next = new Set(prev);
       if (next.has(key)) {
@@ -59177,25 +59238,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 = useCallback126((sequenceId, sceneId) => {
+  const handleSelectBranchSlide = useCallback127((sequenceId, sceneId) => {
     setSelectedSceneId(sceneId);
     setSelectedSequenceId(sequenceId);
   }, []);
-  const handleToggleSlide = useCallback126(
+  const handleToggleSlide = useCallback127(
     (sceneId) => {
       applyManifest(toggleMainLineSlide(manifestRef.current, sceneId)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleReorder = useCallback126(
+  const handleReorder = useCallback127(
     (sceneId, dir) => {
       applyManifest(reorderMainLineSlide(manifestRef.current, sceneId, dir)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleSetNotes = useCallback126(
+  const handleSetNotes = useCallback127(
     (notes) => {
       if (!selectedSceneId) return;
       applyNotesManifest(
@@ -59204,7 +59265,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyNotesManifest]
   );
-  const handleMarkFragment = useCallback126(() => {
+  const handleMarkFragment = useCallback127(() => {
     if (!selectedSceneId) return;
     applyManifest(
       addFragment(
@@ -59216,7 +59277,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     ).catch(() => {
     });
   }, [selectedSceneId, selectedSequenceId, currentTime, applyManifest]);
-  const handleRemoveFragment = useCallback126(
+  const handleRemoveFragment = useCallback127(
     (time) => {
       if (!selectedSceneId) return;
       applyManifest(
@@ -59226,7 +59287,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyManifest]
   );
-  const handleCreateSequence = useCallback126(
+  const handleCreateSequence = useCallback127(
     (label) => {
       const id = `seq-${generateId()}`;
       applyManifest(createSequence(manifestRef.current, id, label)).catch(() => {
@@ -59234,14 +59295,14 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleRenameSequence = useCallback126(
+  const handleRenameSequence = useCallback127(
     (id, label) => {
       applyManifest(renameSequence(manifestRef.current, id, label)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleDeleteSequence = useCallback126(
+  const handleDeleteSequence = useCallback127(
     (id) => {
       const seq = (manifestRef.current.slideSequences ?? []).find((s) => s.id === id);
       const count = seq?.slides.length ?? 0;
@@ -59255,7 +59316,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAssign = useCallback126(
+  const handleAssign = useCallback127(
     (sequenceId, sceneId, assign) => {
       applyManifest(assignToBranch(manifestRef.current, sequenceId, sceneId, assign)).catch(
         () => {
@@ -59264,7 +59325,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAddHotspot = useCallback126(
+  const handleAddHotspot = useCallback127(
     (sceneId, hotspot) => {
       applyManifest(
         addHotspot(manifestRef.current, sceneId, hotspot, selectedSequenceId ?? void 0)
@@ -59273,7 +59334,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSequenceId, applyManifest]
   );
-  const handleRemoveHotspot = useCallback126(
+  const handleRemoveHotspot = useCallback127(
     (sceneId, hotspotId) => {
       applyManifest(
         removeHotspot(manifestRef.current, sceneId, hotspotId, selectedSequenceId ?? void 0)
@@ -59377,10 +59438,10 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo47, useCallback as useCallback130, useEffect as useEffect88, useMemo as useMemo45, useState as useState109 } from "react";
+import { memo as memo47, useCallback as useCallback131, useEffect as useEffect88, useMemo as useMemo45, useState as useState109 } from "react";
 
 // src/hooks/useVariablesPersist.ts
-import { useCallback as useCallback127 } from "react";
+import { useCallback as useCallback128 } from "react";
 function useVariablesPersist({
   sdkSession,
   activeCompPath,
@@ -59391,7 +59452,7 @@ function useVariablesPersist({
   domEditSaveTimestampRef,
   publishSdkSession
 }) {
-  return useCallback127(
+  return useCallback128(
     async (label, mutate) => {
       if (!sdkSession) return false;
       const path = activeCompPath ?? "index.html";
@@ -59428,10 +59489,10 @@ function useVariablesPersist({
 }
 
 // src/components/panels/VariablesOtherCompositions.tsx
-import { useCallback as useCallback129, useState as useState108 } from "react";
+import { useCallback as useCallback130, useState as useState108 } from "react";
 
 // src/hooks/useProjectCompositionVariables.ts
-import { useCallback as useCallback128, useEffect as useEffect87, useState as useState106 } from "react";
+import { useCallback as useCallback129, useEffect as useEffect87, useState as useState106 } from "react";
 import { openComposition as openComposition4 } from "@hyperframes/sdk";
 async function readGroup(path, readProjectFile) {
   let content;
@@ -59474,7 +59535,7 @@ function useProjectCompositionVariables(fileTree, excludePath, readProjectFile,
 }
 function useEditVariablesInFile(deps) {
   const { readProjectFile, writeProjectFile, recordEdit, reloadPreview, domEditSaveTimestampRef } = deps;
-  return useCallback128(
+  return useCallback129(
     async (path, label, mutate) => {
       const originalContent = await readProjectFile(path);
       await persistSdkSerialize(
@@ -59854,7 +59915,7 @@ function VariablesOtherCompositions({
     domEditSaveTimestampRef
   });
   const [editingKey, setEditingKey] = useState108(null);
-  const onSave = useCallback129(
+  const onSave = useCallback130(
     (path, decl) => {
       setEditingKey(null);
       void editInFile(
@@ -59865,7 +59926,7 @@ function VariablesOtherCompositions({
     },
     [editInFile]
   );
-  const onRemove = useCallback129(
+  const onRemove = useCallback130(
     (path, id) => {
       void editInFile(
         path,
@@ -60101,7 +60162,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const copyToClipboard = useCallback130(
+  const copyToClipboard = useCallback131(
     (text, what) => {
       void copyTextToClipboard(text).then(
         (ok) => showToast(
@@ -60112,7 +60173,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [showToast]
   );
-  const dropPreviewOverride = useCallback130(
+  const dropPreviewOverride = useCallback131(
     (id) => {
       if (previewValues && id in previewValues) {
         const next = { ...previewValues };
@@ -60122,7 +60183,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [previewValues, setPreviewValues]
   );
-  const commitPreviewValue = useCallback130(
+  const commitPreviewValue = useCallback131(
     (id, value, declDefault) => {
       const next = { ...previewValues ?? {} };
       if (JSON.stringify(value) === JSON.stringify(declDefault)) {
@@ -60135,7 +60196,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [previewValues, setPreviewValues, reloadPreview]
   );
-  const runSchemaEdit = useCallback130(
+  const runSchemaEdit = useCallback131(
     async (label, mutate) => {
       try {
         const changed = await persistVariables(label, mutate);
@@ -60149,7 +60210,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [persistVariables, showToast]
   );
-  const handleAdd = useCallback130(
+  const handleAdd = useCallback131(
     (decl) => {
       if (!sdkSession) return;
       const check = sdkSession.can({ type: "declareVariable", declaration: decl });
@@ -60162,7 +60223,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, showToast]
   );
-  const handleUpdate = useCallback130(
+  const handleUpdate = useCallback131(
     (decl) => {
       if (!sdkSession) return;
       const check = sdkSession.can({
@@ -60182,7 +60243,7 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, showToast]
   );
-  const handleRemove = useCallback130(
+  const handleRemove = useCallback131(
     (id) => {
       if (!sdkSession) return;
       const check = sdkSession.can({ type: "removeVariableDeclaration", id });
@@ -60198,18 +60259,18 @@ var VariablesPanel = memo47(function VariablesPanel2({
     },
     [sdkSession, runSchemaEdit, dropPreviewOverride, showToast]
   );
-  const handleSetDefault = useCallback130(
+  const handleSetDefault = useCallback131(
     (id, value) => {
       void runSchemaEdit(`Set default for "${id}"`, (s) => s.setVariableValue(id, value));
       dropPreviewOverride(id);
     },
     [runSchemaEdit, dropPreviewOverride]
   );
-  const resetPreview = useCallback130(() => {
+  const resetPreview = useCallback131(() => {
     setPreviewValues(null);
     reloadPreview();
   }, [setPreviewValues, reloadPreview]);
-  const handleBind = useCallback130(
+  const handleBind = useCallback131(
     // Guard chain (session, selection, type-compat) — one branch per guard.
     // fallow-ignore-next-line complexity
     (action, id) => {
@@ -60342,7 +60403,7 @@ function PanelTabButton({
 }
 
 // src/hooks/useSlideshowPersist.ts
-import { useCallback as useCallback131 } from "react";
+import { useCallback as useCallback132 } from "react";
 
 // src/utils/setSlideshowManifest.ts
 import {
@@ -60400,7 +60461,7 @@ function useSlideshowPersist({
   publishSdkSession,
   coalesceKey
 }) {
-  return useCallback131(
+  return useCallback132(
     async (manifest) => {
       if (!sdkSession) return;
       const path = activeCompPath ?? "index.html";
@@ -60434,26 +60495,65 @@ function useSlideshowPersist({
   );
 }
 
+// src/hooks/useSlideshowTabState.ts
+import { useEffect as useEffect89, useMemo as useMemo46 } 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 = useMemo46(() => {
+    if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
+    return slideshowIslandRegex2("i").test(editingFileContent);
+  }, [editingFileContent]);
+  const slideshowScenes = useMemo46(() => {
+    try {
+      const win = previewIframeRef.current?.contentWindow;
+      return (win?.__clipManifest?.scenes ?? []).map((s) => ({
+        id: s.id,
+        label: s.label,
+        start: s.start,
+        duration: s.duration
+      }));
+    } catch {
+      return [];
+    }
+  }, [previewIframeRef, rightPanelTab, refreshKey]);
+  useEffect89(() => {
+    if (rightPanelTab === "slideshow" && !isSlideshowComposition) {
+      setRightPanelTab("renders");
+    }
+  }, [rightPanelTab, isSlideshowComposition, setRightPanelTab]);
+  return { isSlideshowComposition, slideshowScenes };
+}
+
 // src/components/DesignPanelPromoteProvider.tsx
-import { useCallback as useCallback132 } from "react";
+import { useCallback as useCallback133 } from "react";
 import { jsx as jsx143 } from "react/jsx-runtime";
 function DesignPanelPromoteProvider({
   selection,
   projectId,
   activeCompPath,
   showToast,
+  forceReloadSharedSdkSession,
   children,
   ...persistDeps
 }) {
   const targetPath = selection?.sourceFile || activeCompPath || "index.html";
   const handle = useSdkSession(projectId, targetPath, persistDeps.domEditSaveTimestampRef);
-  const persist2 = useVariablesPersist({
+  const rawPersist = useVariablesPersist({
     ...persistDeps,
     sdkSession: handle.session,
     publishSdkSession: handle.publish,
     activeCompPath: targetPath
   });
-  const handlePersistError = useCallback132(
+  const persist2 = useCallback133(
+    async (label, mutate) => {
+      const committed = await rawPersist(label, mutate);
+      if (committed) forceReloadSharedSdkSession?.();
+      return committed;
+    },
+    [rawPersist, forceReloadSharedSdkSession]
+  );
+  const handlePersistError = useCallback133(
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
@@ -60688,14 +60788,14 @@ async function applyColorGradingScopeUpdate({
 }
 
 // src/hooks/useInspectorSplitResize.ts
-import { useCallback as useCallback133, useRef as useRef113, useState as useState110 } from "react";
+import { useCallback as useCallback134, useRef as useRef114, useState as useState110 } from "react";
 var MIN_INSPECTOR_SPLIT_PERCENT = 20;
 var MAX_INSPECTOR_SPLIT_PERCENT = 75;
 function useInspectorSplitResize() {
   const [layersPanePercent, setLayersPanePercent] = useState110(40);
-  const splitContainerRef = useRef113(null);
-  const splitDragRef = useRef113(null);
-  const handleInspectorSplitResizeStart = useCallback133(
+  const splitContainerRef = useRef114(null);
+  const splitDragRef = useRef114(null);
+  const handleInspectorSplitResizeStart = useCallback134(
     (event) => {
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
@@ -60708,7 +60808,7 @@ function useInspectorSplitResize() {
     },
     [layersPanePercent]
   );
-  const handleInspectorSplitResizeMove = useCallback133((event) => {
+  const handleInspectorSplitResizeMove = useCallback134((event) => {
     const drag = splitDragRef.current;
     if (!drag || drag.height <= 0) return;
     const deltaPercent = (event.clientY - drag.startY) / drag.height * 100;
@@ -60718,7 +60818,7 @@ function useInspectorSplitResize() {
     );
     setLayersPanePercent(next);
   }, []);
-  const handleInspectorSplitResizeEnd = useCallback133(() => {
+  const handleInspectorSplitResizeEnd = useCallback134(() => {
     splitDragRef.current = null;
   }, []);
   return {
@@ -60741,6 +60841,7 @@ function StudioRightPanel({
   onToggleRecording,
   sdkSession,
   publishSdkSession,
+  forceReloadSdkSession,
   reloadPreview,
   domEditSaveTimestampRef,
   recordEdit,
@@ -60820,7 +60921,8 @@ function StudioRightPanel({
     refreshFileTree,
     readProjectFile,
     writeProjectFile,
-    fileTree
+    fileTree,
+    editingFile
   } = useFileManagerContext();
   const onPersistSlideshow = useSlideshowPersist({
     sdkSession,
@@ -60850,8 +60952,8 @@ function StudioRightPanel({
     handleInspectorSplitResizeMove,
     handleInspectorSplitResizeEnd
   } = useInspectorSplitResize();
-  const backgroundRemovalAbortRef = useRef114(null);
-  useEffect89(
+  const backgroundRemovalAbortRef = useRef115(null);
+  useEffect90(
     () => () => {
       backgroundRemovalAbortRef.current?.abort();
     },
@@ -60859,19 +60961,13 @@ function StudioRightPanel({
   );
   const renderJobs = renderQueue.jobs;
   const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
-  const slideshowScenes = useMemo46(() => {
-    try {
-      const win = previewIframeRef.current?.contentWindow;
-      return (win?.__clipManifest?.scenes ?? []).map((s) => ({
-        id: s.id,
-        label: s.label,
-        start: s.start,
-        duration: s.duration
-      }));
-    } catch {
-      return [];
-    }
-  }, [previewIframeRef, rightPanelTab, refreshKey]);
+  const { isSlideshowComposition, slideshowScenes } = useSlideshowTabState({
+    editingFileContent: editingFile?.content,
+    previewIframeRef,
+    refreshKey,
+    rightPanelTab,
+    setRightPanelTab
+  });
   const designPaneOpen = inspectorTabActive && rightInspectorPanes.design && designPanelActive;
   const layersPaneOpen = inspectorTabActive && rightInspectorPanes.layers && STUDIO_INSPECTOR_PANELS_ENABLED;
   const handleInspectorPaneButtonClick = (pane) => {
@@ -60885,7 +60981,7 @@ function StudioRightPanel({
     }
     toggleRightInspectorPane(pane);
   };
-  const handleApplyColorGradingScope = useCallback134(
+  const handleApplyColorGradingScope = useCallback135(
     async (scope, value) => applyColorGradingScopeUpdate({
       scope,
       value,
@@ -60920,7 +61016,7 @@ function StudioRightPanel({
       writeProjectFile
     ]
   );
-  const handleRemoveBackground = useCallback134(
+  const handleRemoveBackground = useCallback135(
     // fallow-ignore-next-line complexity
     async (inputPath, options) => {
       const response = await fetch(
@@ -60973,6 +61069,7 @@ function StudioRightPanel({
       recordEdit,
       reloadPreview,
       domEditSaveTimestampRef,
+      forceReloadSharedSdkSession: forceReloadSdkSession,
       children: /* @__PURE__ */ jsx144(
         PropertyPanel,
         {
@@ -61129,7 +61226,7 @@ function StudioRightPanel({
                 onClick: () => setRightPanelTab("renders")
               }
             ),
-            /* @__PURE__ */ jsx144(
+            isSlideshowComposition && /* @__PURE__ */ jsx144(
               PanelTabButton,
               {
                 label: "Slideshow",
@@ -61158,7 +61255,7 @@ function StudioRightPanel({
               onClose: onCloseBlockParams ?? (() => {
               })
             }
-          ) : rightPanelTab === "slideshow" ? /* @__PURE__ */ jsx144(
+          ) : rightPanelTab === "slideshow" && isSlideshowComposition ? /* @__PURE__ */ jsx144(
             SlideshowPanel,
             {
               scenes: slideshowScenes,
@@ -61224,11 +61321,11 @@ function StudioRightPanel({
 }
 
 // src/components/TimelineToolbar.tsx
-import { useEffect as useEffect91, useRef as useRef115 } from "react";
+import { useEffect as useEffect92, useRef as useRef116 } from "react";
 import { Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 
 // src/hooks/useEnableKeyframes.ts
-import { useCallback as useCallback135 } from "react";
+import { useCallback as useCallback136 } from "react";
 var enableKeyframesTransactionCounter = 0;
 function animatedProps(anim) {
   if (!anim) return ["x", "y"];
@@ -61445,7 +61542,7 @@ async function applyArcWaypointAtPlayhead(session, sel, arcAnim, t, iframe) {
   );
 }
 function useEnableKeyframes(sessionRef) {
-  return useCallback135(async () => {
+  return useCallback136(async () => {
     const session = sessionRef.current;
     if (!session) return;
     const sel = session.domEditSelection;
@@ -61527,7 +61624,7 @@ function useEnableKeyframes(sessionRef) {
 }
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect90, useCallback as useCallback136 } from "react";
+import { useEffect as useEffect91, useCallback as useCallback137 } from "react";
 function isTextInput(el) {
   if (!el) return false;
   const tag = el.tagName;
@@ -61544,7 +61641,7 @@ function useKeyframeKeyboard({
   onToggleExpand,
   onNudgeKeyframe
 }) {
-  const handler = useCallback136(
+  const handler = useCallback137(
     (e) => {
       if (!enabled2) return;
       if (isTextInput(document.activeElement)) return;
@@ -61595,7 +61692,7 @@ function useKeyframeKeyboard({
       onNudgeKeyframe
     ]
   );
-  useEffect90(() => {
+  useEffect91(() => {
     if (!enabled2) return;
     window.addEventListener("keydown", handler, { capture: true });
     return () => window.removeEventListener("keydown", handler, { capture: true });
@@ -61606,7 +61703,7 @@ function useKeyframeKeyboard({
 import { Fragment as Fragment45, jsx as jsx145, jsxs as jsxs125 } from "react/jsx-runtime";
 function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const sessionRef = useRef115(session);
+  const sessionRef = useRef116(session);
   sessionRef.current = session;
   const onToggle = useEnableKeyframes(
     sessionRef
@@ -61650,7 +61747,7 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
     enabled: STUDIO_KEYFRAMES_ENABLED && Boolean(onToggleKeyframe),
     onAddKeyframe: onToggleKeyframe
   });
-  useEffect91(() => {
+  useEffect92(() => {
     const onKeyDown = (e) => {
       if (e.key !== "n" && e.key !== "N") return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
@@ -61908,20 +62005,20 @@ function TimelineToolbar({ domEditSession, onSplitElement }) {
 }
 
 // src/components/storyboard/StoryboardView.tsx
-import { useState as useState117 } from "react";
+import { useState as useState118 } from "react";
 import { Copy as Copy2, Check as Check2 } from "@phosphor-icons/react";
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback137, useEffect as useEffect92, useRef as useRef116, useState as useState111 } from "react";
+import { useCallback as useCallback138, useEffect as useEffect93, useRef as useRef117, useState as useState111 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState111(null);
   const [loading, setLoading] = useState111(true);
   const [error, setError] = useState111(null);
   const [reloadKey, setReloadKey] = useState111(0);
-  const hasDataRef = useRef116(false);
-  const lastProjectRef = useRef116(null);
-  const reload = useCallback137(() => setReloadKey((k) => k + 1), []);
-  useEffect92(() => {
+  const hasDataRef = useRef117(false);
+  const lastProjectRef = useRef117(null);
+  const reload = useCallback138(() => setReloadKey((k) => k + 1), []);
+  useEffect93(() => {
     if (!projectId) return;
     let cancelled = false;
     if (lastProjectRef.current !== projectId) {
@@ -61953,7 +62050,7 @@ function useStoryboard(projectId) {
 }
 
 // src/hooks/useProjectSignaturePoll.ts
-import { useEffect as useEffect93, useRef as useRef117 } from "react";
+import { useEffect as useEffect94, useRef as useRef118 } from "react";
 var POLL_INTERVAL_MS = 2e3;
 async function fetchProjectSignature(projectId) {
   try {
@@ -61966,11 +62063,11 @@ async function fetchProjectSignature(projectId) {
   }
 }
 function useProjectSignaturePoll(projectId, currentSignature, onChange) {
-  const signatureRef = useRef117(currentSignature);
-  const onChangeRef = useRef117(onChange);
+  const signatureRef = useRef118(currentSignature);
+  const onChangeRef = useRef118(onChange);
   signatureRef.current = currentSignature;
   onChangeRef.current = onChange;
-  useEffect93(() => {
+  useEffect94(() => {
     if (!projectId) return;
     let disposed = false;
     let inFlight = false;
@@ -61997,7 +62094,7 @@ function useProjectSignaturePoll(projectId, currentSignature, onChange) {
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { useEffect as useEffect98, useMemo as useMemo49, useState as useState116 } from "react";
+import { useEffect as useEffect100, useMemo as useMemo49, useState as useState117 } from "react";
 
 // src/components/storyboard/StoryboardDirection.tsx
 import { jsx as jsx146, jsxs as jsxs126 } from "react/jsx-runtime";
@@ -62020,7 +62117,7 @@ function StoryboardDirection({ globals, frameCount }) {
 }
 
 // src/components/storyboard/FramePoster.tsx
-import { useEffect as useEffect94, useState as useState112 } from "react";
+import { useEffect as useEffect95, useState as useState112 } from "react";
 import { jsx as jsx147 } from "react/jsx-runtime";
 function FramePoster({
   projectId,
@@ -62031,7 +62128,7 @@ function FramePoster({
   posterVersion
 }) {
   const [failed2, setFailed] = useState112(false);
-  useEffect94(() => setFailed(false), [src, seconds, posterVersion]);
+  useEffect95(() => setFailed(false), [src, seconds, posterVersion]);
   if (failed2) {
     return /* @__PURE__ */ jsx147("div", { className: "flex h-full w-full items-center justify-center text-[11px] text-neutral-600", children: "Preview unavailable" });
   }
@@ -62216,41 +62313,24 @@ function StoryboardGrid({
   )) });
 }
 
-// src/components/storyboard/StoryboardStatusLegend.tsx
-import { jsx as jsx150, jsxs as jsxs128 } from "react/jsx-runtime";
-function StoryboardStatusLegend() {
-  return /* @__PURE__ */ jsxs128("div", { className: "flex flex-wrap items-center gap-x-5 gap-y-1.5 text-[11px] text-neutral-500", children: [
-    /* @__PURE__ */ jsx150("span", { className: "uppercase tracking-wider text-neutral-600", children: "Status" }),
-    FRAME_STATUS_ORDER.map((status, i) => /* @__PURE__ */ jsxs128("span", { className: "flex items-center gap-1.5", children: [
-      i > 0 && /* @__PURE__ */ jsx150("span", { className: "text-neutral-700", children: "\u2192" }),
-      /* @__PURE__ */ jsx150("span", { className: `h-2 w-2 rounded-full ${FRAME_STATUS_META[status].dotClass}` }),
-      /* @__PURE__ */ jsx150("span", { className: "font-medium text-neutral-300", children: FRAME_STATUS_META[status].label }),
-      /* @__PURE__ */ jsxs128("span", { className: "text-neutral-500", children: [
-        "\u2014 ",
-        FRAME_STATUS_META[status].description
-      ] })
-    ] }, status))
-  ] });
-}
-
 // src/components/storyboard/StoryboardScriptPanel.tsx
-import { jsx as jsx151, jsxs as jsxs129 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs128 } from "react/jsx-runtime";
 function StoryboardScriptPanel({ script }) {
   if (!script.exists) return null;
-  return /* @__PURE__ */ jsxs129("details", { className: "mt-10 rounded-lg border border-neutral-800 bg-neutral-900/50", children: [
-    /* @__PURE__ */ jsxs129("summary", { className: "cursor-pointer select-none px-4 py-3 text-sm font-medium text-neutral-300", children: [
+  return /* @__PURE__ */ jsxs128("details", { className: "mt-10 rounded-lg border border-neutral-800 bg-neutral-900/50", children: [
+    /* @__PURE__ */ jsxs128("summary", { className: "cursor-pointer select-none px-4 py-3 text-sm font-medium text-neutral-300", children: [
       "Narration script",
-      /* @__PURE__ */ jsx151("span", { className: "ml-2 font-normal text-neutral-500", children: script.path })
+      /* @__PURE__ */ jsx150("span", { className: "ml-2 font-normal text-neutral-500", children: script.path })
     ] }),
-    /* @__PURE__ */ jsx151("pre", { className: "max-h-[420px] overflow-auto whitespace-pre-wrap border-t border-neutral-800 px-4 py-3 text-xs leading-relaxed text-neutral-400", children: script.content })
+    /* @__PURE__ */ jsx150("pre", { className: "max-h-[420px] overflow-auto whitespace-pre-wrap border-t border-neutral-800 px-4 py-3 text-xs leading-relaxed text-neutral-400", children: script.content })
   ] });
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback138, useEffect as useEffect95, useMemo as useMemo47, useRef as useRef118, useState as useState113 } from "react";
+import { useCallback as useCallback139, useEffect as useEffect96, useMemo as useMemo47, useRef as useRef119, useState as useState113 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
-import { jsx as jsx152, jsxs as jsxs130 } from "react/jsx-runtime";
+import { jsx as jsx151, jsxs as jsxs129 } from "react/jsx-runtime";
 var DISCARD_PROMPT = "Discard unsaved markdown changes?";
 function useEditableFile(path, onSaved) {
   const { readProjectFile, writeProjectFile } = useFileManagerContext();
@@ -62259,7 +62339,7 @@ function useEditableFile(path, onSaved) {
   const [loading, setLoading] = useState113(true);
   const [saving, setSaving] = useState113(false);
   const [error, setError] = useState113(null);
-  useEffect95(() => {
+  useEffect96(() => {
     if (!path) return;
     let cancelled = false;
     setLoading(true);
@@ -62277,7 +62357,7 @@ function useEditableFile(path, onSaved) {
       cancelled = true;
     };
   }, [path, readProjectFile]);
-  const save = useCallback138(() => {
+  const save = useCallback139(() => {
     if (saving) return;
     setSaving(true);
     setError(null);
@@ -62296,8 +62376,8 @@ function hardenLinks(node) {
 }
 function useMarkdownPreview(source) {
   const [debounced, setDebounced] = useState113(source);
-  const primed = useRef118(false);
-  useEffect95(() => {
+  const primed = useRef119(false);
+  useEffect96(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
       setDebounced(source);
@@ -62329,8 +62409,8 @@ function StoryboardSourceEditor({
   const activePath = files.some((f) => f.path === selected) ? selected : files[0]?.path ?? "";
   const file = useEditableFile(activePath, onSaved);
   const previewHtml = useMarkdownPreview(file.content);
-  useEffect95(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
-  useEffect95(() => {
+  useEffect96(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
+  useEffect96(() => {
     if (!file.dirty) return;
     const onBeforeUnload = (event) => {
       event.preventDefault();
@@ -62344,7 +62424,7 @@ function StoryboardSourceEditor({
     if (file.dirty && !window.confirm(DISCARD_PROMPT)) return;
     setSelected(path);
   };
-  return /* @__PURE__ */ jsxs130(
+  return /* @__PURE__ */ jsxs129(
     "div",
     {
       className: "flex flex-1 min-h-0 flex-col",
@@ -62354,8 +62434,8 @@ function StoryboardSourceEditor({
         if (file.dirty && !file.saving) file.save();
       },
       children: [
-        /* @__PURE__ */ jsxs130("div", { className: "flex items-center gap-1 border-b border-neutral-800 px-4 py-2", children: [
-          files.map((f) => /* @__PURE__ */ jsx152(
+        /* @__PURE__ */ jsxs129("div", { className: "flex items-center gap-1 border-b border-neutral-800 px-4 py-2", children: [
+          files.map((f) => /* @__PURE__ */ jsx151(
             "button",
             {
               type: "button",
@@ -62365,10 +62445,10 @@ function StoryboardSourceEditor({
             },
             f.path
           )),
-          /* @__PURE__ */ jsxs130("div", { className: "ml-auto flex items-center gap-3", children: [
-            file.error && /* @__PURE__ */ jsx152("span", { className: "text-xs text-red-400", children: file.error }),
-            /* @__PURE__ */ jsx152("span", { className: "text-xs text-neutral-500", children: file.saving ? "Saving\u2026" : file.dirty ? "Unsaved changes" : "Saved" }),
-            /* @__PURE__ */ jsx152(
+          /* @__PURE__ */ jsxs129("div", { className: "ml-auto flex items-center gap-3", children: [
+            file.error && /* @__PURE__ */ jsx151("span", { className: "text-xs text-red-400", children: file.error }),
+            /* @__PURE__ */ jsx151("span", { className: "text-xs text-neutral-500", children: file.saving ? "Saving\u2026" : file.dirty ? "Unsaved changes" : "Saved" }),
+            /* @__PURE__ */ jsx151(
               "button",
               {
                 type: "button",
@@ -62380,12 +62460,12 @@ function StoryboardSourceEditor({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs130("div", { className: "flex flex-1 min-h-0", children: [
-          /* @__PURE__ */ jsx152("div", { className: "w-1/2 min-w-0 border-r border-neutral-800", children: file.loading ? /* @__PURE__ */ jsxs130("div", { className: "p-4 text-sm text-neutral-500", children: [
+        /* @__PURE__ */ jsxs129("div", { className: "flex flex-1 min-h-0", children: [
+          /* @__PURE__ */ jsx151("div", { className: "w-1/2 min-w-0 border-r border-neutral-800", children: file.loading ? /* @__PURE__ */ jsxs129("div", { className: "p-4 text-sm text-neutral-500", children: [
             "Loading ",
             activePath,
             "\u2026"
-          ] }) : /* @__PURE__ */ jsx152(
+          ] }) : /* @__PURE__ */ jsx151(
             SourceEditor,
             {
               content: file.content,
@@ -62394,7 +62474,7 @@ function StoryboardSourceEditor({
               onChange: file.setContent
             }
           ) }),
-          /* @__PURE__ */ jsx152("div", { className: "w-1/2 min-w-0 overflow-auto bg-neutral-950 px-6 py-4", children: /* @__PURE__ */ jsx152("div", { className: PREVIEW_PROSE, dangerouslySetInnerHTML: { __html: previewHtml } }) })
+          /* @__PURE__ */ jsx151("div", { className: "w-1/2 min-w-0 overflow-auto bg-neutral-950 px-6 py-4", children: /* @__PURE__ */ jsx151("div", { className: PREVIEW_PROSE, dangerouslySetInnerHTML: { __html: previewHtml } }) })
         ] })
       ]
     }
@@ -62402,9 +62482,38 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback139, useEffect as useEffect96, useState as useState114 } from "react";
-import { setFrameStatus, setFrameVoiceover } from "@hyperframes/core/storyboard";
-import { jsx as jsx153, jsxs as jsxs131 } from "react/jsx-runtime";
+import { useCallback as useCallback140, useEffect as useEffect98, useState as useState115 } from "react";
+import { setFrameVoiceover } from "@hyperframes/core/storyboard";
+
+// src/components/storyboard/AgentChatMessageButton.tsx
+import { useEffect as useEffect97, useState as useState114 } from "react";
+import { jsx as jsx152 } from "react/jsx-runtime";
+var APPLY_STORYBOARD_FEEDBACK_MESSAGE = "Read the storyboard feedback I saved in .hyperframes/frame-comments.json and revise the frames.";
+function AgentChatMessageButton({
+  message,
+  label = "Copy prompt for agent",
+  onCopied
+}) {
+  const [copyState, setCopyState] = useState114("idle");
+  useEffect97(() => {
+    if (copyState !== "copied") return;
+    const timeout = window.setTimeout(() => setCopyState("again"), 3e3);
+    return () => window.clearTimeout(timeout);
+  }, [copyState]);
+  const copyMessage = async () => {
+    try {
+      await navigator.clipboard.writeText(message);
+      setCopyState("copied");
+      onCopied?.();
+    } catch {
+      setCopyState("failed");
+    }
+  };
+  return /* @__PURE__ */ jsx152(Button, { size: "sm", variant: "secondary", onClick: () => void copyMessage(), children: copyState === "copied" ? "Copied \u2014 paste in your agent chat" : copyState === "again" ? "Copy again" : copyState === "failed" ? "Copy failed" : label });
+}
+
+// src/components/storyboard/StoryboardFrameFocus.tsx
+import { jsx as jsx153, jsxs as jsxs130 } from "react/jsx-runtime";
 function StoryboardFrameFocus({
   projectId,
   storyboardPath,
@@ -62414,24 +62523,38 @@ function StoryboardFrameFocus({
   onNavigate,
   onSaved,
   onSelectComposition,
+  scriptExists,
+  commentDraft,
+  onCommentDraftChange,
+  pendingComment,
+  pendingCommentCount,
+  commentDraftCount,
+  commentsSubmitState,
+  commentsSubmitError,
+  feedbackMessageCopied,
+  onFeedbackMessageCopied,
+  onSaveFeedback,
   posterVersion
 }) {
   const { readProjectFile, writeProjectFile } = useFileManagerContext();
-  const { setViewMode } = useViewMode();
-  const [draft, setDraft] = useState114(frame.voiceover ?? "");
-  const [busy, setBusy] = useState114(false);
-  const [error, setError] = useState114(null);
-  const applyEdit = useCallback139(
+  const { setViewMode, registerViewModeGuard } = useViewMode();
+  const [draft, setDraft] = useState115(frame.voiceover ?? "");
+  const [savedVoiceover, setSavedVoiceover] = useState115(frame.voiceover ?? "");
+  const [busy, setBusy] = useState115(false);
+  const [error, setError] = useState115(null);
+  const applyEdit = useCallback140(
     async (edit) => {
-      if (busy) return;
+      if (busy) return false;
       setBusy(true);
       setError(null);
       try {
         const source = await readProjectFile(storyboardPath);
         await writeProjectFile(storyboardPath, edit(source));
         onSaved();
+        return true;
       } catch (err) {
         setError(err instanceof Error ? err.message : "failed to save");
+        return false;
       } finally {
         setBusy(false);
       }
@@ -62439,12 +62562,13 @@ function StoryboardFrameFocus({
     [readProjectFile, writeProjectFile, storyboardPath, onSaved, busy]
   );
   const title = frame.title ?? `Frame ${frame.index}`;
-  const dirty = draft !== (frame.voiceover ?? "");
-  const canOpenPreview = frame.srcExists && Boolean(frame.src);
-  const saveVoiceover = useCallback139(() => {
-    return applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
+  const dirty = draft !== savedVoiceover;
+  const canOpenPreview = frame.status !== "outline" && frame.srcExists && Boolean(frame.src);
+  const saveVoiceover = useCallback140(async () => {
+    const saved = await applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
+    if (saved) setSavedVoiceover(draft);
   }, [applyEdit, frame.index, draft]);
-  useEffect96(() => {
+  useEffect98(() => {
     if (!dirty) return;
     const onBeforeUnload = (e) => {
       e.preventDefault();
@@ -62452,14 +62576,18 @@ function StoryboardFrameFocus({
     window.addEventListener("beforeunload", onBeforeUnload);
     return () => window.removeEventListener("beforeunload", onBeforeUnload);
   }, [dirty]);
-  const confirmLeave = () => !dirty || window.confirm("Discard unsaved voiceover changes?");
+  const confirmLeave = useCallback140(
+    () => !dirty || window.confirm("Discard unsaved voiceover changes?"),
+    [dirty]
+  );
+  useEffect98(() => registerViewModeGuard(confirmLeave), [confirmLeave, registerViewModeGuard]);
   const handleBack = () => {
     if (confirmLeave()) onBack();
   };
   const handleNavigate = (delta) => {
     if (confirmLeave()) onNavigate(delta);
   };
-  useEffect96(() => {
+  useEffect98(() => {
     const onKey = (e) => {
       const el = document.activeElement;
       if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) return;
@@ -62471,11 +62599,11 @@ function StoryboardFrameFocus({
     return () => window.removeEventListener("keydown", onKey);
   });
   const openInPreview = () => {
+    if (!setViewMode("timeline")) return;
     if (frame.src) onSelectComposition(frame.src);
-    setViewMode("timeline");
   };
-  return /* @__PURE__ */ jsxs131("div", { className: "flex flex-1 min-h-0 flex-col bg-neutral-950 text-neutral-200", children: [
-    /* @__PURE__ */ jsxs131("div", { className: "flex items-center gap-3 border-b border-neutral-800 px-4 py-2", children: [
+  return /* @__PURE__ */ jsxs130("div", { className: "flex w-full max-w-[100vw] flex-1 min-h-0 min-w-0 flex-col overflow-hidden bg-neutral-950 text-neutral-200", children: [
+    /* @__PURE__ */ jsxs130("div", { className: "flex items-center gap-3 border-b border-neutral-800 px-4 py-2", children: [
       /* @__PURE__ */ jsx153(
         "button",
         {
@@ -62485,13 +62613,13 @@ function StoryboardFrameFocus({
           children: "\u2190 Board"
         }
       ),
-      /* @__PURE__ */ jsxs131("span", { className: "text-sm font-medium text-neutral-200", children: [
+      /* @__PURE__ */ jsxs130("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-neutral-200", children: [
         "Frame ",
         frame.number ?? frame.index,
         " \u2014 ",
         title
       ] }),
-      /* @__PURE__ */ jsxs131("div", { className: "ml-auto flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs130("div", { className: "flex shrink-0 items-center gap-1", children: [
         /* @__PURE__ */ jsx153(
           NavButton,
           {
@@ -62510,8 +62638,35 @@ function StoryboardFrameFocus({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs131("div", { className: "flex flex-1 min-h-0", children: [
-      /* @__PURE__ */ jsx153("div", { className: "flex w-3/5 min-w-0 items-center justify-center bg-neutral-900/40 p-8", children: /* @__PURE__ */ jsx153("div", { className: "aspect-video w-full max-w-[900px] overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900", children: canOpenPreview && frame.src ? /* @__PURE__ */ jsx153(
+    (commentDraftCount > 0 || pendingCommentCount > 0) && /* @__PURE__ */ jsxs130("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b border-neutral-800 bg-neutral-900/80 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs130("div", { children: [
+        /* @__PURE__ */ jsx153("div", { className: "text-xs font-medium text-neutral-200", children: commentDraftCount > 0 ? "Feedback ready to save" : "Feedback saved" }),
+        /* @__PURE__ */ jsx153("div", { className: "text-[11px] text-neutral-500", children: commentDraftCount > 0 ? "Save this batch and copy the message for your agent." : feedbackMessageCopied ? "Message copied \u2014 paste it in your terminal or IDE agent chat." : "The agent has not been notified yet." })
+      ] }),
+      commentDraftCount > 0 ? /* @__PURE__ */ jsxs130(
+        Button,
+        {
+          size: "sm",
+          variant: "primary",
+          onClick: onSaveFeedback,
+          loading: commentsSubmitState === "saving",
+          children: [
+            "Save & copy message (",
+            commentDraftCount,
+            ")"
+          ]
+        }
+      ) : /* @__PURE__ */ jsx153(
+        AgentChatMessageButton,
+        {
+          message: APPLY_STORYBOARD_FEEDBACK_MESSAGE,
+          label: feedbackMessageCopied ? "Copy again" : "Copy prompt for agent",
+          onCopied: onFeedbackMessageCopied
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs130("div", { className: "flex flex-1 min-h-0 flex-col overflow-auto lg:flex-row lg:overflow-hidden", children: [
+      /* @__PURE__ */ jsx153("div", { className: "flex w-full shrink-0 items-center justify-center bg-neutral-900/40 p-4 sm:p-8 lg:h-full lg:w-3/5", children: /* @__PURE__ */ jsx153("div", { className: "aspect-video w-full max-w-[900px] overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900", children: canOpenPreview && frame.src ? /* @__PURE__ */ jsx153(
         FramePoster,
         {
           projectId,
@@ -62521,32 +62676,32 @@ function StoryboardFrameFocus({
           fit: "contain",
           posterVersion
         }
-      ) : /* @__PURE__ */ jsx153("div", { className: "flex h-full w-full items-center justify-center text-sm text-neutral-600", children: frame.status === "outline" ? "Not built yet" : "No preview" }) }) }),
-      /* @__PURE__ */ jsxs131("div", { className: "w-2/5 min-w-0 space-y-6 overflow-auto border-l border-neutral-800 px-6 py-5", children: [
-        /* @__PURE__ */ jsx153(
-          StatusRow,
-          {
-            status: frame.status,
-            busy,
-            onSet: (s) => applyEdit((src) => setFrameStatus(src, frame.index, s))
-          }
-        ),
-        /* @__PURE__ */ jsxs131("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-[11px] text-neutral-500", children: [
-          frame.duration && /* @__PURE__ */ jsxs131("span", { children: [
+      ) : /* @__PURE__ */ jsx153(FramePlan, { frame }) }) }),
+      /* @__PURE__ */ jsxs130("div", { className: "w-full shrink-0 space-y-6 border-t border-neutral-800 px-4 py-5 sm:px-6 lg:h-full lg:w-2/5 lg:overflow-auto lg:border-t-0 lg:border-l", children: [
+        /* @__PURE__ */ jsx153(ReadOnlyStatus, { status: frame.status }),
+        /* @__PURE__ */ jsxs130("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-[11px] text-neutral-500", children: [
+          frame.duration && /* @__PURE__ */ jsxs130("span", { children: [
             "Duration ",
             frame.duration
           ] }),
-          frame.transitionIn && /* @__PURE__ */ jsxs131("span", { children: [
+          frame.transitionIn && /* @__PURE__ */ jsxs130("span", { children: [
             "Transition ",
             frame.transitionIn
           ] })
         ] }),
-        /* @__PURE__ */ jsxs131("section", { children: [
-          /* @__PURE__ */ jsxs131("div", { className: "mb-1 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs131("h3", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-400", children: [
-              "\u{1F399} Voiceover ",
-              /* @__PURE__ */ jsx153("span", { className: "font-normal normal-case text-neutral-600", children: "guide" })
-            ] }),
+        /* @__PURE__ */ jsxs130("section", { children: [
+          /* @__PURE__ */ jsxs130("div", { className: "mb-1 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs130(
+              "h3",
+              {
+                className: "text-xs font-semibold uppercase tracking-wider text-neutral-400",
+                title: "Storyboard voiceover is a guide; SCRIPT.md is the final TTS source.",
+                children: [
+                  "\u{1F399} Voiceover ",
+                  /* @__PURE__ */ jsx153("span", { className: "font-normal normal-case text-neutral-600", children: "guide" })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx153(
               Button,
               {
@@ -62555,8 +62710,7 @@ function StoryboardFrameFocus({
                 onClick: saveVoiceover,
                 disabled: !dirty,
                 loading: busy,
-                className: "bg-emerald-600 text-white enabled:hover:bg-emerald-500 shadow-none",
-                children: busy ? "Saving\u2026" : "Save"
+                children: busy ? "Saving\u2026" : "Save voiceover"
               }
             )
           ] }),
@@ -62565,22 +62719,53 @@ function StoryboardFrameFocus({
             {
               value: draft,
               onChange: (e) => setDraft(e.target.value),
-              onBlur: () => {
-                if (dirty && !busy) void saveVoiceover();
-              },
               rows: 3,
               placeholder: "What the narrator says over this frame\u2026",
               className: "w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-2 text-sm text-neutral-200 outline-none focus:border-neutral-600"
             }
           ),
-          /* @__PURE__ */ jsx153("p", { className: "mt-1 text-[11px] text-neutral-600", children: "A draft guide. SCRIPT.md locks the final narration that drives TTS." }),
+          /* @__PURE__ */ jsx153("p", { className: "mt-1 text-[11px] text-neutral-600", children: dirty ? "Unsaved changes" : scriptExists ? "Saved. SCRIPT.md drives final TTS." : "Saved to STORYBOARD.md. This voiceover guides narration for the frame." }),
           error && /* @__PURE__ */ jsx153("p", { className: "mt-1 text-[11px] text-red-400", children: error })
         ] }),
-        frame.narrative && /* @__PURE__ */ jsxs131("section", { children: [
+        /* @__PURE__ */ jsxs130("section", { children: [
+          /* @__PURE__ */ jsx153("div", { className: "mb-1", children: /* @__PURE__ */ jsx153("h3", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-400", children: "Frame feedback" }) }),
+          /* @__PURE__ */ jsx153(
+            "textarea",
+            {
+              value: commentDraft,
+              onChange: (e) => onCommentDraftChange(e.target.value),
+              rows: 3,
+              placeholder: "Tell your agent what to change in this frame\u2026",
+              "aria-label": `Comment on ${title}`,
+              className: "w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-2 text-sm text-neutral-200 placeholder:text-neutral-600 outline-none focus:border-sky-700"
+            }
+          ),
+          pendingCommentCount > 0 ? /* @__PURE__ */ jsxs130("div", { className: "mt-2 flex flex-wrap items-center justify-between gap-2 rounded-md border border-sky-900/70 bg-sky-950/20 px-2.5 py-2", children: [
+            /* @__PURE__ */ jsx153("p", { className: "text-[11px] text-sky-200", children: "Paste the agent prompt in your terminal or IDE chat." }),
+            /* @__PURE__ */ jsx153(
+              AgentChatMessageButton,
+              {
+                message: APPLY_STORYBOARD_FEEDBACK_MESSAGE,
+                onCopied: onFeedbackMessageCopied
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx153("p", { className: "mt-1 text-[11px] text-neutral-600", children: commentDraftCount > 0 ? "Your change is ready. Save it using the review bar above." : "Add a change to prepare feedback for the agent." }),
+          pendingComment && /* @__PURE__ */ jsxs130("p", { className: "mt-1 text-[11px] text-sky-400/90", children: [
+            /* @__PURE__ */ jsx153("span", { className: "font-medium", children: "Pending:" }),
+            " \u201C",
+            pendingComment,
+            "\u201D"
+          ] }),
+          commentsSubmitError && /* @__PURE__ */ jsxs130("p", { className: "mt-1 text-[11px] text-red-400", children: [
+            "Couldn\u2019t submit: ",
+            commentsSubmitError
+          ] })
+        ] }),
+        frame.narrative && /* @__PURE__ */ jsxs130("section", { children: [
           /* @__PURE__ */ jsx153("h3", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400", children: "Narrative" }),
           /* @__PURE__ */ jsx153("p", { className: "whitespace-pre-wrap text-sm text-neutral-300", children: frame.narrative })
         ] }),
-        /* @__PURE__ */ jsx153(Button, { size: "sm", variant: "secondary", onClick: openInPreview, disabled: !canOpenPreview, children: "Open in Preview \u2192" })
+        canOpenPreview ? /* @__PURE__ */ jsx153(Button, { size: "sm", variant: "secondary", onClick: openInPreview, children: "Open in Preview \u2192" }) : /* @__PURE__ */ jsx153("div", { className: "rounded-md border border-neutral-800 bg-neutral-900/60 px-3 py-2 text-xs text-neutral-500", children: "Preview becomes available after your agent builds this frame." })
       ] })
     ] })
   ] });
@@ -62601,31 +62786,280 @@ function NavButton({
     }
   );
 }
-function StatusRow({
-  status,
-  busy,
-  onSet
-}) {
-  return /* @__PURE__ */ jsxs131("div", { className: "flex items-center gap-2", children: [
+function ReadOnlyStatus({ status }) {
+  const meta = FRAME_STATUS_META[status];
+  return /* @__PURE__ */ jsxs130("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx153("span", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-500", children: "Status" }),
-    /* @__PURE__ */ jsx153("div", { className: "flex items-center gap-0.5 rounded-md bg-neutral-900 p-0.5", children: FRAME_STATUS_ORDER.map((option) => /* @__PURE__ */ jsx153(
-      "button",
+    /* @__PURE__ */ jsx153("span", { className: `rounded px-2 py-1 text-xs font-medium ${meta.chipClass}`, children: meta.label }),
+    /* @__PURE__ */ jsx153("span", { className: "text-[11px] text-neutral-600", children: "Updated by your agent" })
+  ] });
+}
+function FramePlan({ frame }) {
+  const title = frame.title ?? `Frame ${frame.index}`;
+  const isOutline = frame.status === "outline";
+  return /* @__PURE__ */ jsx153("div", { className: "flex h-full w-full items-center justify-center bg-[radial-gradient(circle_at_center,_rgba(38,38,38,0.8),_rgba(10,10,10,1))] p-10", children: /* @__PURE__ */ jsxs130("div", { className: "max-w-xl text-center", children: [
+    /* @__PURE__ */ jsx153("span", { className: "rounded-full border border-neutral-700 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-neutral-400", children: isOutline ? "Planned frame" : "Preview unavailable" }),
+    /* @__PURE__ */ jsx153("h2", { className: "mt-4 text-2xl font-semibold text-neutral-100", children: title }),
+    frame.scene && /* @__PURE__ */ jsx153("p", { className: "mt-3 text-base leading-relaxed text-neutral-300", children: frame.scene }),
+    !frame.scene && frame.narrative && /* @__PURE__ */ jsx153("p", { className: "mt-3 line-clamp-4 text-sm leading-relaxed text-neutral-400", children: frame.narrative }),
+    /* @__PURE__ */ jsx153("p", { className: "mt-5 text-xs text-neutral-600", children: isOutline ? "A visual preview will appear when your agent builds the sketch." : frame.src ? `Frame file not found: ${frame.src}` : "This frame does not link to a source file." })
+  ] }) });
+}
+
+// src/components/storyboard/storyboardReviewStage.ts
+function deriveStoryboardHandoffStep(draftCount, pendingCount) {
+  if (draftCount > 0) return 2;
+  if (pendingCount > 0) return 3;
+  return 1;
+}
+function deriveStoryboardReviewStage(frames) {
+  const counts = { outline: 0, built: 0, animated: 0 };
+  for (const frame of frames) counts[frame.status] += 1;
+  let stage;
+  if (frames.length === 0) stage = "empty";
+  else if (counts.outline === frames.length) stage = "plan-review";
+  else if (counts.outline > 0) stage = "sketch-in-progress";
+  else if (counts.built === frames.length) stage = "sketch-review";
+  else if (counts.built > 0) stage = "animation-in-progress";
+  else stage = "final-review";
+  return { stage, counts, frameCount: frames.length };
+}
+
+// src/components/storyboard/StoryboardReviewGuide.tsx
+import { jsx as jsx154, jsxs as jsxs131 } from "react/jsx-runtime";
+var GUIDE_COPY = {
+  empty: {
+    eyebrow: "Waiting for a plan",
+    title: "The storyboard has no frames yet",
+    body: "Ask your agent to draft the story plan. Frames will appear here automatically."
+  },
+  "plan-review": {
+    eyebrow: "Ready for review",
+    title: "Review the story plan",
+    body: "Check the sequence, scene direction, and voiceover before visual work begins. Leave frame comments, save them, then reply in your terminal or IDE agent chat."
+  },
+  "sketch-in-progress": {
+    eyebrow: "Build in progress",
+    title: "Visual sketches are in progress",
+    body: "New posters appear automatically as your agent builds them. You can comment now; wait until no frames remain in Outline before approving the layouts."
+  },
+  "sketch-review": {
+    eyebrow: "Ready for review",
+    title: "Review the visual direction",
+    body: "Check composition, hierarchy, and copy. Save frame comments, then reply in your terminal or IDE agent chat."
+  },
+  "animation-in-progress": {
+    eyebrow: "Build in progress",
+    title: "Animation is in progress",
+    body: "The board refreshes as frames advance. Review completed frames now; the final review is ready when every frame is Animated."
+  },
+  "final-review": {
+    eyebrow: "Ready for review",
+    title: "Review motion and timing",
+    body: "Every frame is animated. Open a frame in Preview to review it in the timeline, or leave frame comments for another revision."
+  }
+};
+var REVIEW_ACTION_COPY = {
+  empty: { body: "Add comments as previews arrive." },
+  "plan-review": {
+    body: "Add comments where you want changes. If everything looks right, approve this pass in agent chat.",
+    approvalMessage: "Approve this storyboard plan and continue to visual sketches."
+  },
+  "sketch-in-progress": {
+    body: "Add comments as previews arrive. You\u2019ll be prompted to approve when this pass is ready."
+  },
+  "sketch-review": {
+    body: "Add comments where you want changes. If everything looks right, approve this pass in agent chat.",
+    approvalMessage: "Approve these storyboard sketches and continue to animation."
+  },
+  "animation-in-progress": {
+    body: "Add comments as previews arrive. You\u2019ll be prompted to approve when this pass is ready."
+  },
+  "final-review": {
+    body: "Add comments where you want changes. If everything looks right, approve this pass in agent chat.",
+    approvalMessage: "Approve this final storyboard review and continue to rendering."
+  }
+};
+var REVIEW_STEP_STATES = {
+  [-1]: {
+    textClass: "text-emerald-400",
+    numberClass: "border-emerald-700 bg-emerald-500/10",
+    ariaCurrent: void 0,
+    marker: () => "\u2713"
+  },
+  [0]: {
+    textClass: "text-sky-300",
+    numberClass: "border-sky-500 bg-sky-500/15",
+    ariaCurrent: "step",
+    marker: (number) => number
+  },
+  [1]: {
+    textClass: "text-neutral-600",
+    numberClass: "border-neutral-700",
+    ariaCurrent: void 0,
+    marker: (number) => number
+  }
+};
+var REVIEW_STEP_SEPARATOR_CLASS = {
+  1: "invisible",
+  2: "",
+  3: ""
+};
+function StoryboardReviewGuide({
+  frames,
+  draftCount,
+  pendingCount,
+  onFeedbackMessageCopied
+}) {
+  const summary = deriveStoryboardReviewStage(frames);
+  const copy = GUIDE_COPY[summary.stage];
+  const handoffStep = deriveStoryboardHandoffStep(draftCount, pendingCount);
+  const progress = progressLabel(summary);
+  return /* @__PURE__ */ jsxs131("section", { className: "mt-5 rounded-lg border border-neutral-800 bg-neutral-900/60 px-4 py-3", children: [
+    /* @__PURE__ */ jsxs131("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs131("div", { className: "max-w-3xl", children: [
+        /* @__PURE__ */ jsx154("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-sky-400", children: copy.eyebrow }),
+        /* @__PURE__ */ jsx154("h2", { className: "mt-0.5 text-sm font-semibold text-neutral-100", children: copy.title }),
+        /* @__PURE__ */ jsx154("p", { className: "mt-1 text-xs leading-relaxed text-neutral-400", children: copy.body })
+      ] }),
+      summary.frameCount > 0 && /* @__PURE__ */ jsxs131("div", { className: "shrink-0", children: [
+        /* @__PURE__ */ jsx154("div", { className: "mb-1.5 text-right text-[11px] font-medium text-neutral-300", children: progress }),
+        /* @__PURE__ */ jsx154("div", { className: "flex flex-wrap justify-end gap-1.5", "aria-label": "Frame status summary", children: FRAME_STATUS_ORDER.map((status) => /* @__PURE__ */ jsxs131(
+          "span",
+          {
+            className: `rounded px-2 py-1 text-[10px] font-medium ${FRAME_STATUS_META[status].chipClass}`,
+            children: [
+              summary.counts[status],
+              " ",
+              FRAME_STATUS_META[status].label
+            ]
+          },
+          status
+        )) })
+      ] })
+    ] }),
+    summary.frameCount > 0 && /* @__PURE__ */ jsxs131("div", { className: "mt-3 border-t border-neutral-800 pt-3", children: [
+      /* @__PURE__ */ jsx154(ReviewSteps, { current: handoffStep }),
+      /* @__PURE__ */ jsx154(
+        NextAction,
+        {
+          stage: summary.stage,
+          step: handoffStep,
+          draftCount,
+          onFeedbackMessageCopied
+        }
+      )
+    ] })
+  ] });
+}
+function ReviewSteps({ current }) {
+  const steps = ["Review frames", "Save feedback", "Reply in agent chat"];
+  return /* @__PURE__ */ jsx154("ol", { className: "hidden items-center gap-2 sm:flex", "aria-label": "Storyboard review workflow", children: steps.map((label, index) => /* @__PURE__ */ jsx154(
+    ReviewStep,
+    {
+      label,
+      number: index + 1,
+      current
+    },
+    label
+  )) });
+}
+function ReviewStep({
+  label,
+  number,
+  current
+}) {
+  const offset = Math.sign(number - current);
+  const state = REVIEW_STEP_STATES[offset];
+  return /* @__PURE__ */ jsxs131("li", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx154(
+      "span",
       {
-        type: "button",
-        disabled: busy,
-        "aria-pressed": status === option,
-        title: FRAME_STATUS_META[option].tooltip,
-        onClick: () => onSet(option),
-        className: `rounded px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${status === option ? "bg-neutral-700 text-neutral-100" : "text-neutral-400 hover:text-neutral-200"}`,
-        children: FRAME_STATUS_META[option].label
-      },
-      option
-    )) })
+        className: `text-neutral-700 ${REVIEW_STEP_SEPARATOR_CLASS[number]}`,
+        "aria-hidden": "true",
+        children: "\u2192"
+      }
+    ),
+    /* @__PURE__ */ jsxs131(
+      "span",
+      {
+        "aria-current": state.ariaCurrent,
+        className: `flex items-center gap-1.5 text-[11px] font-medium ${state.textClass}`,
+        children: [
+          /* @__PURE__ */ jsx154(
+            "span",
+            {
+              className: `flex h-5 w-5 items-center justify-center rounded-full border text-[10px] ${state.numberClass}`,
+              children: state.marker(number)
+            }
+          ),
+          label
+        ]
+      }
+    )
+  ] });
+}
+function NextAction({
+  stage,
+  step,
+  draftCount,
+  onFeedbackMessageCopied
+}) {
+  if (step === 3) {
+    return /* @__PURE__ */ jsx154(AgentHandoffAction, { onFeedbackMessageCopied });
+  }
+  if (step === 2) return /* @__PURE__ */ jsx154(SaveFeedbackAction, { draftCount });
+  return /* @__PURE__ */ jsx154(ReviewFramesAction, { stage });
+}
+function AgentHandoffAction({ onFeedbackMessageCopied }) {
+  return /* @__PURE__ */ jsxs131("div", { className: "mt-3 flex flex-col gap-3 rounded-md border border-sky-900/70 bg-sky-950/20 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsxs131("div", { className: "max-w-3xl", children: [
+      /* @__PURE__ */ jsx154("div", { className: "text-xs font-semibold text-sky-200", children: "Next: return to your agent chat" }),
+      /* @__PURE__ */ jsx154("p", { className: "mt-0.5 text-[11px] text-neutral-400", children: "Feedback is saved, but the agent has not been notified. Paste this prompt in your terminal or IDE agent chat." })
+    ] }),
+    /* @__PURE__ */ jsx154(
+      AgentChatMessageButton,
+      {
+        message: APPLY_STORYBOARD_FEEDBACK_MESSAGE,
+        onCopied: onFeedbackMessageCopied
+      }
+    )
+  ] });
+}
+function SaveFeedbackAction({ draftCount }) {
+  return /* @__PURE__ */ jsx154("div", { className: "mt-3 rounded-md border border-neutral-800 bg-neutral-950/40 px-3 py-2.5", children: /* @__PURE__ */ jsxs131("div", { children: [
+    /* @__PURE__ */ jsx154("div", { className: "text-xs font-semibold text-neutral-200", children: "Next: save your feedback" }),
+    /* @__PURE__ */ jsxs131("p", { className: "mt-0.5 text-[11px] text-neutral-500", children: [
+      draftCount,
+      " frame",
+      draftCount === 1 ? " has" : "s have",
+      " feedback ready. Use Save & copy message above to prepare this batch for your agent."
+    ] })
+  ] }) });
+}
+function ReviewFramesAction({ stage }) {
+  const copy = REVIEW_ACTION_COPY[stage];
+  return /* @__PURE__ */ jsxs131("div", { className: "mt-3 flex flex-col gap-3 rounded-md border border-neutral-800 bg-neutral-950/40 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsxs131("div", { children: [
+      /* @__PURE__ */ jsx154("div", { className: "text-xs font-semibold text-neutral-200", children: "Next: review the frames" }),
+      /* @__PURE__ */ jsx154("p", { className: "mt-0.5 text-[11px] text-neutral-500", children: copy.body })
+    ] }),
+    copy.approvalMessage && /* @__PURE__ */ jsx154(AgentChatMessageButton, { message: copy.approvalMessage, label: "Copy approval message" })
   ] });
 }
+function progressLabel(summary) {
+  if (summary.stage === "sketch-in-progress" || summary.stage === "sketch-review") {
+    const ready = summary.frameCount - summary.counts.outline;
+    return `${ready} of ${summary.frameCount} visual sketches ready`;
+  }
+  if (summary.stage === "animation-in-progress" || summary.stage === "final-review") {
+    return `${summary.counts.animated} of ${summary.frameCount} animations ready`;
+  }
+  return `${summary.frameCount} plan frame${summary.frameCount === 1 ? "" : "s"} ready`;
+}
 
 // src/components/storyboard/useFrameComments.ts
-import { useCallback as useCallback140, useEffect as useEffect97, useMemo as useMemo48, useState as useState115 } from "react";
+import { useCallback as useCallback141, useEffect as useEffect99, useMemo as useMemo48, useState as useState116 } from "react";
 
 // src/components/storyboard/frameComments.ts
 var FRAME_COMMENTS_PATH = ".hyperframes/frame-comments.json";
@@ -62687,32 +63121,34 @@ function buildCommentsFile(frames, drafts, previous, submittedAt) {
 // src/components/storyboard/useFrameComments.ts
 function useFrameComments(frames) {
   const { writeProjectFile, readOptionalProjectFile } = useFileManagerContext();
-  const [drafts, setDrafts] = useState115({});
-  const [submitState, setSubmitState] = useState115("idle");
-  const [pending, setPending] = useState115(null);
-  const refreshPending = useCallback140(async () => {
+  const [drafts, setDrafts] = useState116({});
+  const [submitState, setSubmitState] = useState116("idle");
+  const [submitError, setSubmitError] = useState116(null);
+  const [pending, setPending] = useState116(null);
+  const refreshPending = useCallback141(async () => {
     try {
       const parsed = parseCommentsFile(await readOptionalProjectFile(FRAME_COMMENTS_PATH));
       setPending(parsed && parsed.comments.length > 0 ? parsed.comments : null);
     } catch {
     }
   }, [readOptionalProjectFile]);
-  useEffect97(() => {
+  useEffect99(() => {
     void refreshPending();
     const onFocus = () => void refreshPending();
     window.addEventListener("focus", onFocus);
     return () => window.removeEventListener("focus", onFocus);
   }, [refreshPending]);
-  const setDraft = useCallback140((index, text) => {
+  const setDraft = useCallback141((index, text) => {
     setDrafts((prev) => ({ ...prev, [index]: text }));
   }, []);
   const draftCount = useMemo48(
     () => Object.values(drafts).filter((text) => text.trim().length > 0).length,
     [drafts]
   );
-  const submit = useCallback140(async () => {
-    if (draftCount === 0 || submitState === "saving") return;
+  const submit = useCallback141(async () => {
+    if (draftCount === 0 || submitState === "saving") return false;
     setSubmitState("saving");
+    setSubmitError(null);
     try {
       const previous = parseCommentsFile(await readOptionalProjectFile(FRAME_COMMENTS_PATH));
       const file = buildCommentsFile(frames, drafts, previous, (/* @__PURE__ */ new Date()).toISOString());
@@ -62720,16 +63156,28 @@ function useFrameComments(frames) {
 `);
       setDrafts({});
       setPending(file.comments);
-    } catch {
+      return true;
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : "Failed to submit comments");
+      return false;
     } finally {
       setSubmitState("idle");
     }
   }, [draftCount, submitState, frames, drafts, readOptionalProjectFile, writeProjectFile]);
-  return { drafts, setDraft, draftCount, submitState, submit, pending, refreshPending };
+  return {
+    drafts,
+    setDraft,
+    draftCount,
+    submitState,
+    submitError,
+    submit,
+    pending,
+    refreshPending
+  };
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { jsx as jsx154, jsxs as jsxs132 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx155, jsxs as jsxs132 } from "react/jsx-runtime";
 function clampIndex(index, count) {
   return Math.max(1, Math.min(count, index));
 }
@@ -62739,14 +63187,28 @@ function StoryboardLoaded({
   reload,
   onSelectComposition
 }) {
-  const [subView, setSubView] = useState116("board");
-  const [sourceDirty, setSourceDirty] = useState116(false);
-  const [focusedIndex, setFocusedIndex] = useState116(null);
+  const [subView, setSubView] = useState117("board");
+  const [sourceDirty, setSourceDirty] = useState117(false);
+  const [focusedIndex, setFocusedIndex] = useState117(null);
+  const [feedbackMessageCopied, setFeedbackMessageCopied] = useState117(false);
   const comments = useFrameComments(data.frames);
   const { refreshPending } = comments;
-  useEffect98(() => {
+  useEffect100(() => {
     void refreshPending();
   }, [data.signature, refreshPending]);
+  useEffect100(() => {
+    if (comments.draftCount > 0) setFeedbackMessageCopied(false);
+  }, [comments.draftCount]);
+  const saveFeedbackAndCopyMessage = async () => {
+    const saved = await comments.submit();
+    if (!saved) return;
+    try {
+      await navigator.clipboard.writeText(APPLY_STORYBOARD_FEEDBACK_MESSAGE);
+      setFeedbackMessageCopied(true);
+    } catch {
+      setFeedbackMessageCopied(false);
+    }
+  };
   const sourceFiles = useMemo49(() => {
     const files = [{ path: data.path, label: data.path }];
     if (data.script?.exists) files.push({ path: data.script.path, label: data.script.path });
@@ -62761,7 +63223,7 @@ function StoryboardLoaded({
   };
   const focusedFrame = focusedIndex != null ? data.frames.find((f) => f.index === focusedIndex) ?? null : null;
   if (focusedFrame) {
-    return /* @__PURE__ */ jsx154(
+    return /* @__PURE__ */ jsx155(
       StoryboardFrameFocus,
       {
         projectId,
@@ -62772,28 +63234,57 @@ function StoryboardLoaded({
         onNavigate: (delta) => setFocusedIndex(clampIndex(focusedFrame.index + delta, data.frames.length)),
         onSaved: reload,
         onSelectComposition,
+        scriptExists: Boolean(data.script?.exists),
+        commentDraft: comments.drafts[focusedFrame.index] ?? "",
+        onCommentDraftChange: (text) => comments.setDraft(focusedFrame.index, text),
+        pendingComment: comments.pending?.find((entry) => entry.frame === focusedFrame.index)?.text ?? null,
+        pendingCommentCount: comments.pending?.length ?? 0,
+        commentDraftCount: comments.draftCount,
+        commentsSubmitState: comments.submitState,
+        commentsSubmitError: comments.submitError,
+        feedbackMessageCopied,
+        onFeedbackMessageCopied: () => setFeedbackMessageCopied(true),
+        onSaveFeedback: () => void saveFeedbackAndCopyMessage(),
         posterVersion: data.signature
       },
       focusedFrame.index
     );
   }
-  return /* @__PURE__ */ jsxs132("div", { className: "flex flex-1 min-h-0 flex-col bg-neutral-950 text-neutral-200", children: [
-    /* @__PURE__ */ jsxs132("div", { className: "flex items-center gap-3 border-b border-neutral-800 px-4 py-2", children: [
-      /* @__PURE__ */ jsx154(SubViewToggle, { value: subView, onChange: changeSubView }),
-      subView === "board" && /* @__PURE__ */ jsx154(
+  return /* @__PURE__ */ jsxs132("div", { className: "flex w-full max-w-[100vw] flex-1 min-h-0 min-w-0 flex-col overflow-hidden bg-neutral-950 text-neutral-200", children: [
+    /* @__PURE__ */ jsxs132("div", { className: "flex flex-wrap items-center gap-3 border-b border-neutral-800 px-4 py-2", children: [
+      /* @__PURE__ */ jsx155(SubViewToggle, { value: subView, onChange: changeSubView }),
+      subView === "board" && /* @__PURE__ */ jsx155(
         CommentsSubmitBar,
         {
           draftCount: comments.draftCount,
           pendingCount: comments.pending?.length ?? 0,
           submitState: comments.submitState,
-          onSubmit: () => void comments.submit()
+          submitError: comments.submitError,
+          messageCopied: feedbackMessageCopied,
+          onSave: () => void saveFeedbackAndCopyMessage(),
+          onMessageCopied: () => setFeedbackMessageCopied(true)
         }
       )
     ] }),
-    subView === "board" ? /* @__PURE__ */ jsx154("div", { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxs132("div", { className: "mx-auto max-w-[1400px] px-8 py-8", children: [
-      /* @__PURE__ */ jsx154(StoryboardDirection, { globals: data.globals, frameCount: data.frames.length }),
-      /* @__PURE__ */ jsx154("div", { className: "mt-5", children: /* @__PURE__ */ jsx154(StoryboardStatusLegend, {}) }),
-      /* @__PURE__ */ jsx154(
+    subView === "board" ? /* @__PURE__ */ jsx155("div", { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxs132("div", { className: "mx-auto max-w-[1400px] px-4 py-5 sm:px-8 sm:py-8", children: [
+      /* @__PURE__ */ jsx155(StoryboardDirection, { globals: data.globals, frameCount: data.frames.length }),
+      /* @__PURE__ */ jsx155(
+        StoryboardReviewGuide,
+        {
+          frames: data.frames,
+          draftCount: comments.draftCount,
+          pendingCount: comments.pending?.length ?? 0,
+          onFeedbackMessageCopied: () => setFeedbackMessageCopied(true)
+        }
+      ),
+      /* @__PURE__ */ jsx155(
+        StoryboardWarnings,
+        {
+          warnings: data.warnings,
+          onOpenSource: () => changeSubView("source")
+        }
+      ),
+      /* @__PURE__ */ jsx155(
         StoryboardGrid,
         {
           projectId,
@@ -62805,8 +63296,8 @@ function StoryboardLoaded({
           posterVersion: data.signature
         }
       ),
-      data.script && /* @__PURE__ */ jsx154(StoryboardScriptPanel, { script: data.script })
-    ] }) }) : /* @__PURE__ */ jsx154(
+      data.script && /* @__PURE__ */ jsx155(StoryboardScriptPanel, { script: data.script })
+    ] }) }) : /* @__PURE__ */ jsx155(
       StoryboardSourceEditor,
       {
         files: sourceFiles,
@@ -62820,24 +63311,67 @@ function CommentsSubmitBar({
   draftCount,
   pendingCount,
   submitState,
-  onSubmit
-}) {
-  return /* @__PURE__ */ jsxs132("div", { className: "ml-auto flex items-center gap-3", children: [
-    pendingCount > 0 && /* @__PURE__ */ jsxs132("span", { className: "text-xs text-sky-300", children: [
-      pendingCount,
-      " comment",
-      pendingCount > 1 ? "s" : "",
-      " pending \u2014 reply anything in your agent chat and it will apply them."
+  submitError,
+  messageCopied,
+  onSave,
+  onMessageCopied
+}) {
+  return /* @__PURE__ */ jsxs132("div", { className: "ml-auto flex min-w-0 flex-1 flex-wrap items-center justify-end gap-2 sm:flex-none", children: [
+    pendingCount > 0 && /* @__PURE__ */ jsxs132(Fragment46, { children: [
+      /* @__PURE__ */ jsx155("span", { className: "text-xs text-sky-300", children: messageCopied ? "Feedback saved \xB7 Message copied \u2014 paste it in your terminal or IDE agent chat." : "Feedback saved \xB7 Agent not notified." }),
+      /* @__PURE__ */ jsx155(
+        AgentChatMessageButton,
+        {
+          message: APPLY_STORYBOARD_FEEDBACK_MESSAGE,
+          label: messageCopied ? "Copy again" : "Copy prompt for agent",
+          onCopied: onMessageCopied
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx154(
+    pendingCount === 0 && draftCount === 0 && /* @__PURE__ */ jsx155("span", { className: "text-xs text-neutral-500", children: "Add frame comments to request changes." }),
+    submitError && /* @__PURE__ */ jsxs132("span", { className: "max-w-64 truncate text-xs text-red-400", title: submitError, children: [
+      "Couldn\u2019t submit: ",
+      submitError
+    ] }),
+    draftCount > 0 && /* @__PURE__ */ jsxs132(
       Button,
       {
         variant: "primary",
         size: "sm",
         loading: submitState === "saving",
-        disabled: draftCount === 0 || submitState === "saving",
-        onClick: onSubmit,
-        children: draftCount > 0 ? `Submit comments (${draftCount})` : "Submit comments"
+        disabled: submitState === "saving",
+        onClick: onSave,
+        children: [
+          "Save & copy message (",
+          draftCount,
+          ")"
+        ]
+      }
+    )
+  ] });
+}
+function StoryboardWarnings({
+  warnings,
+  onOpenSource
+}) {
+  if (warnings.length === 0) return null;
+  return /* @__PURE__ */ jsxs132("details", { className: "mt-3 rounded-lg border border-amber-900/60 bg-amber-950/20 px-4 py-2 text-xs text-amber-200", children: [
+    /* @__PURE__ */ jsxs132("summary", { className: "cursor-pointer font-medium", children: [
+      warnings.length,
+      " storyboard warning",
+      warnings.length === 1 ? "" : "s"
+    ] }),
+    /* @__PURE__ */ jsx155("ul", { className: "mt-2 space-y-1 text-amber-200/80", children: warnings.map((warning, index) => /* @__PURE__ */ jsxs132("li", { children: [
+      warning.line ? `Line ${warning.line}: ` : "",
+      warning.message
+    ] }, `${warning.line ?? "unknown"}-${index}`)) }),
+    /* @__PURE__ */ jsx155(
+      "button",
+      {
+        type: "button",
+        onClick: onOpenSource,
+        className: "mt-2 rounded text-amber-100 underline underline-offset-2 hover:text-white",
+        children: "Open source to fix"
       }
     )
   ] });
@@ -62855,14 +63389,14 @@ function SubViewToggle({ value, onChange }) {
     const next = SUB_VIEWS[(currentIndex + delta + SUB_VIEWS.length) % SUB_VIEWS.length];
     if (next) onChange(next.value);
   };
-  return /* @__PURE__ */ jsx154(
+  return /* @__PURE__ */ jsx155(
     "div",
     {
       className: "flex items-center gap-0.5 rounded-md bg-neutral-900 p-0.5",
       role: "tablist",
       "aria-label": "Storyboard view",
       onKeyDown: handleKeyDown,
-      children: SUB_VIEWS.map((option) => /* @__PURE__ */ jsx154(
+      children: SUB_VIEWS.map((option) => /* @__PURE__ */ jsx155(
         "button",
         {
           type: "button",
@@ -62880,25 +63414,25 @@ function SubViewToggle({ value, onChange }) {
 }
 
 // src/components/storyboard/StoryboardView.tsx
-import { jsx as jsx155, jsxs as jsxs133 } from "react/jsx-runtime";
+import { jsx as jsx156, jsxs as jsxs133 } from "react/jsx-runtime";
 function StoryboardView({ projectId, onSelectComposition }) {
   const { data, loading, error, reload } = useStoryboard(projectId);
   useProjectSignaturePoll(projectId, data?.signature, reload);
-  if (loading) return /* @__PURE__ */ jsx155(StoryboardFrame, { children: /* @__PURE__ */ jsx155(Message, { children: "Loading storyboard\u2026" }) });
+  if (loading) return /* @__PURE__ */ jsx156(StoryboardFrame, { children: /* @__PURE__ */ jsx156(Message, { children: "Loading storyboard\u2026" }) });
   if (error) {
     return /* @__PURE__ */ jsxs133(StoryboardFrame, { children: [
       /* @__PURE__ */ jsxs133(Message, { tone: "error", children: [
         "Couldn\u2019t load the storyboard: ",
         error
       ] }),
-      /* @__PURE__ */ jsx155("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx155(Button, { size: "sm", variant: "secondary", onClick: reload, children: "Retry" }) })
+      /* @__PURE__ */ jsx156("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx156(Button, { size: "sm", variant: "secondary", onClick: reload, children: "Retry" }) })
     ] });
   }
-  if (!data) return /* @__PURE__ */ jsx155(StoryboardFrame, { children: null });
+  if (!data) return /* @__PURE__ */ jsx156(StoryboardFrame, { children: null });
   if (!data.exists) {
-    return /* @__PURE__ */ jsx155(StoryboardFrame, { children: /* @__PURE__ */ jsx155(EmptyState, { path: data.path }) });
+    return /* @__PURE__ */ jsx156(StoryboardFrame, { children: /* @__PURE__ */ jsx156(EmptyState, { path: data.path }) });
   }
-  return /* @__PURE__ */ jsx155(
+  return /* @__PURE__ */ jsx156(
     StoryboardLoaded,
     {
       projectId,
@@ -62909,10 +63443,10 @@ function StoryboardView({ projectId, onSelectComposition }) {
   );
 }
 function StoryboardFrame({ children }) {
-  return /* @__PURE__ */ jsx155("div", { className: "flex-1 min-h-0 overflow-auto bg-neutral-950 text-neutral-200", children: /* @__PURE__ */ jsx155("div", { className: "mx-auto max-w-[1400px] px-8 py-8", children }) });
+  return /* @__PURE__ */ jsx156("div", { className: "flex-1 min-h-0 overflow-auto bg-neutral-950 text-neutral-200", children: /* @__PURE__ */ jsx156("div", { className: "mx-auto max-w-[1400px] px-8 py-8", children }) });
 }
 function Message({ children, tone = "muted" }) {
-  return /* @__PURE__ */ jsx155(
+  return /* @__PURE__ */ jsx156(
     "div",
     {
       className: `px-6 py-12 text-center text-sm ${tone === "error" ? "text-red-400" : "text-neutral-500"}`,
@@ -62945,7 +63479,7 @@ Add one \`## Frame N\` section per beat. Keep the arc tight.
 Then run the review loop from the hyperframes-core skill (references/review-loop.md): present the plan as a proposal, offer wireframe sketches on this board, and build on the confirmed layouts.`;
 }
 function EmptyState({ path }) {
-  const [copied, setCopied] = useState117(false);
+  const [copied, setCopied] = useState118(false);
   const prompt = handoffPrompt(path);
   const onCopy = async () => {
     if (await copyTextToClipboard(prompt)) {
@@ -62955,67 +63489,67 @@ function EmptyState({ path }) {
   };
   return /* @__PURE__ */ jsxs133("div", { children: [
     /* @__PURE__ */ jsxs133("div", { className: "rounded-lg border border-dashed border-neutral-800 px-6 py-10 text-center", children: [
-      /* @__PURE__ */ jsx155("h2", { className: "text-base font-semibold text-neutral-300", children: "No storyboard yet" }),
+      /* @__PURE__ */ jsx156("h2", { className: "text-base font-semibold text-neutral-300", children: "No storyboard yet" }),
       /* @__PURE__ */ jsxs133("p", { className: "mx-auto mt-2 max-w-md text-sm text-neutral-500", children: [
         "Add a ",
-        /* @__PURE__ */ jsx155("code", { className: "rounded bg-neutral-900 px-1 py-0.5 text-neutral-400", children: path }),
+        /* @__PURE__ */ jsx156("code", { className: "rounded bg-neutral-900 px-1 py-0.5 text-neutral-400", children: path }),
         " ",
         "at the project root to plan this video frame by frame. Hand this prompt to your coding agent to scaffold it."
       ] }),
       /* @__PURE__ */ jsxs133("div", { className: "mx-auto mt-6 max-w-2xl overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900 text-left", children: [
         /* @__PURE__ */ jsxs133("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
-          /* @__PURE__ */ jsx155("span", { className: "font-mono text-xs text-neutral-500", children: "Prompt for your agent" }),
-          /* @__PURE__ */ jsx155(
+          /* @__PURE__ */ jsx156("span", { className: "font-mono text-xs text-neutral-500", children: "Prompt for your agent" }),
+          /* @__PURE__ */ jsx156(
             Button,
             {
               size: "sm",
               variant: "secondary",
               onClick: onCopy,
-              icon: copied ? /* @__PURE__ */ jsx155(Check2, { size: 14 }) : /* @__PURE__ */ jsx155(Copy2, { size: 14 }),
+              icon: copied ? /* @__PURE__ */ jsx156(Check2, { size: 14 }) : /* @__PURE__ */ jsx156(Copy2, { size: 14 }),
               children: copied ? "Copied" : "Copy prompt"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx155("pre", { className: "max-h-64 overflow-auto px-4 py-3 font-mono text-xs leading-relaxed text-neutral-400 whitespace-pre-wrap", children: prompt })
+        /* @__PURE__ */ jsx156("pre", { className: "max-h-64 overflow-auto px-4 py-3 font-mono text-xs leading-relaxed text-neutral-400 whitespace-pre-wrap", children: prompt })
       ] })
     ] }),
-    /* @__PURE__ */ jsx155(SkeletonPreview, {})
+    /* @__PURE__ */ jsx156(SkeletonPreview, {})
   ] });
 }
 function SkeletonPreview() {
   return /* @__PURE__ */ jsxs133("div", { "aria-hidden": "true", className: "mt-10 select-none opacity-40", children: [
-    /* @__PURE__ */ jsx155("div", { className: "mb-4 text-center text-xs uppercase tracking-wide text-neutral-600", children: "Preview" }),
-    /* @__PURE__ */ jsx155("div", { className: "grid gap-x-6 gap-y-8 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs133("div", { className: "rounded-lg border border-neutral-800 bg-neutral-900/40 p-3", children: [
-      /* @__PURE__ */ jsx155("div", { className: "aspect-video w-full rounded bg-neutral-800/60" }),
-      /* @__PURE__ */ jsx155("div", { className: "mt-3 h-3 w-2/3 rounded bg-neutral-800/60" }),
-      /* @__PURE__ */ jsx155("div", { className: "mt-2 h-2.5 w-full rounded bg-neutral-800/40" }),
-      /* @__PURE__ */ jsx155("div", { className: "mt-1.5 h-2.5 w-4/5 rounded bg-neutral-800/40" })
+    /* @__PURE__ */ jsx156("div", { className: "mb-4 text-center text-xs uppercase tracking-wide text-neutral-600", children: "Preview" }),
+    /* @__PURE__ */ jsx156("div", { className: "grid gap-x-6 gap-y-8 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs133("div", { className: "rounded-lg border border-neutral-800 bg-neutral-900/40 p-3", children: [
+      /* @__PURE__ */ jsx156("div", { className: "aspect-video w-full rounded bg-neutral-800/60" }),
+      /* @__PURE__ */ jsx156("div", { className: "mt-3 h-3 w-2/3 rounded bg-neutral-800/60" }),
+      /* @__PURE__ */ jsx156("div", { className: "mt-2 h-2.5 w-full rounded bg-neutral-800/40" }),
+      /* @__PURE__ */ jsx156("div", { className: "mt-1.5 h-2.5 w-4/5 rounded bg-neutral-800/40" })
     ] }, i)) })
   ] });
 }
 
 // src/components/StudioSplash.tsx
-import { jsx as jsx156, jsxs as jsxs134 } from "react/jsx-runtime";
+import { jsx as jsx157, jsxs as jsxs134 } from "react/jsx-runtime";
 function StudioSplash({ waiting }) {
-  return /* @__PURE__ */ jsx156("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs134("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx156("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
+  return /* @__PURE__ */ jsx157("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs134("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx157("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
     /* @__PURE__ */ jsxs134("p", { className: "text-xs text-neutral-600", children: [
       "Waiting for preview server\u2026 run",
       " ",
-      /* @__PURE__ */ jsx156("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
+      /* @__PURE__ */ jsx157("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
     ] })
   ] }) : /* @__PURE__ */ jsxs134("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx156("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsx156("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
+    /* @__PURE__ */ jsx157("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsx157("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
   ] }) });
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect99, useState as useState118 } from "react";
+import { useEffect as useEffect101, useState as useState119 } from "react";
 function useServerConnection() {
-  const [projectId, setProjectId] = useState118(null);
-  const [resolving, setResolving] = useState118(true);
-  const [waitingForServer, setWaitingForServer] = useState118(false);
+  const [projectId, setProjectId] = useState119(null);
+  const [resolving, setResolving] = useState119(true);
+  const [waitingForServer, setWaitingForServer] = useState119(false);
   useMountEffect(() => {
     const hashProjectId = parseProjectIdFromHash(window.location.hash);
     let cancelled = false;
@@ -63052,7 +63586,7 @@ function useServerConnection() {
       if (retryTimer !== null) clearTimeout(retryTimer);
     };
   });
-  useEffect99(() => {
+  useEffect101(() => {
     const onHashChange = () => {
       const next = parseProjectIdFromHash(window.location.hash);
       if (next && next !== projectId) setProjectId(next);
@@ -63064,56 +63598,56 @@ function useServerConnection() {
 }
 
 // src/App.tsx
-import { jsx as jsx157, jsxs as jsxs135 } from "react/jsx-runtime";
+import { jsx as jsx158, jsxs as jsxs135 } from "react/jsx-runtime";
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
-  const initialUrlStateRef = useRef119(readStudioUrlStateFromWindow());
+  const initialUrlStateRef = useRef120(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState();
-  useEffect100(() => {
+  useEffect102(() => {
     if (resolving || waitingForServer) return;
     if (hasFiredSessionStart()) return;
     markSessionStartFired();
     trackStudioSessionStart({ has_project: projectId != null });
   }, [projectId, resolving, waitingForServer]);
-  const [activeCompPath, setActiveCompPath] = useState119(null);
-  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState119(
+  const [activeCompPath, setActiveCompPath] = useState120(null);
+  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState120(
     () => initialUrlStateRef.current.activeCompPath == null
   );
-  const [compIdToSrc, setCompIdToSrc] = useState119(/* @__PURE__ */ new Map());
-  const [previewIframe, setPreviewIframe] = useState119(null);
-  const [compositionLoading, setCompositionLoading] = useState119(true);
-  const [refreshKey, setRefreshKey] = useState119(0);
+  const [compIdToSrc, setCompIdToSrc] = useState120(/* @__PURE__ */ new Map());
+  const [previewIframe, setPreviewIframe] = useState120(null);
+  const [compositionLoading, setCompositionLoading] = useState120(true);
+  const [refreshKey, setRefreshKey] = useState120(0);
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
-  const [blockPreview, setBlockPreview] = useState119(null);
-  const previewIframeRef = useRef119(null);
-  const activeCompPathRef = useRef119(activeCompPath);
+  const [blockPreview, setBlockPreview] = useState120(null);
+  const previewIframeRef = useRef120(null);
+  const activeCompPathRef = useRef120(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const leftSidebarRef = useRef119(null);
+  const leftSidebarRef = useRef120(null);
   const renderQueue = useRenderQueue(projectId);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
   const captionSync = useCaptionSync(projectId);
   const timelineElements = usePlayerStore((s) => s.elements);
   const setSelectedTimelineElementId = usePlayerStore((s) => s.setSelectedElementId);
-  const timelineDuration = usePlayerStore((s) => s.duration);
+  const timelineDuration2 = usePlayerStore((s) => s.duration);
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   const activePreviewUrl = activeCompPath ? `/api/projects/${projectId}/preview/comp/${activeCompPath}` : null;
   const effectiveTimelineDuration = useMemo50(() => {
     const maxEnd = timelineElements.length > 0 ? Math.max(...timelineElements.map((el) => el.start + el.duration)) : 0;
-    return Math.max(timelineDuration, maxEnd);
-  }, [timelineDuration, timelineElements]);
+    return Math.max(timelineDuration2, maxEnd);
+  }, [timelineDuration2, timelineElements]);
   const { toasts, showToast, dismissToast } = useToast();
   const panelLayout = usePanelLayout({
     rightCollapsed: initialUrlStateRef.current.rightCollapsed,
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = usePersistentEditHistory({ projectId });
-  const domEditSaveTimestampRef = useRef119(0);
-  const handleDomZIndexReorderCommitRef = useRef119(null);
-  const pendingTimelineEditPathRef = useRef119(/* @__PURE__ */ new Set());
-  const isGestureRecordingRef = useRef119(false);
-  const reloadPreview = useCallback141(() => setRefreshKey((k) => k + 1), []);
+  const domEditSaveTimestampRef = useRef120(0);
+  const handleDomZIndexReorderCommitRef = useRef120(null);
+  const pendingTimelineEditPathRef = useRef120(/* @__PURE__ */ new Set());
+  const isGestureRecordingRef = useRef120(false);
+  const reloadPreview = useCallback142(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
     showToast,
@@ -63131,7 +63665,7 @@ function StudioApp() {
     domEditSaveTimestampRef,
     masterCompPath
   );
-  useEffect100(() => {
+  useEffect102(() => {
     if (activeCompPathHydrated) return;
     if (!fileManager.fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
@@ -63172,20 +63706,14 @@ function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     handleDomZIndexReorderCommitRef
   });
-  const handleTimelineElementsMove = useCallback141(
+  const handleTimelineElementsMove = useCallback142(
     async (edits, coalesceKey, operation = "timing", coalesceMs) => {
       const deps = { handleTimelineGroupMove: timelineEditing.handleTimelineGroupMove };
       await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
     },
     [timelineEditing.handleTimelineGroupMove]
   );
-  const handleAddAssetAtPlayhead = useCallback141(
-    (assetPath) => timelineEditing.handleTimelineAssetDrop(assetPath, {
-      start: usePlayerStore.getState().currentTime,
-      track: 0
-    }),
-    [timelineEditing]
-  );
+  const handleAddAssetAtPlayhead = useAddAssetAtPlayhead(timelineEditing.handleTimelineAssetDrop);
   const {
     activeBlockParams,
     setActiveBlockParams,
@@ -63208,18 +63736,18 @@ function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab
   });
-  const clearDomSelectionRef = useRef119(() => {
+  const clearDomSelectionRef = useRef120(() => {
   });
-  const domEditSelectionBridgeRef = useRef119(null);
-  const handleDomEditElementDeleteRef = useRef119(
+  const domEditSelectionBridgeRef = useRef120(null);
+  const handleDomEditElementDeleteRef = useRef120(
     async () => {
     }
   );
   const domEditDeleteBridge = (s) => handleDomEditElementDeleteRef.current(s);
-  const resetKeyframesRef = useRef119(() => false);
-  const deleteSelectedKeyframesRef = useRef119(() => {
+  const resetKeyframesRef = useRef120(() => false);
+  const deleteSelectedKeyframesRef = useRef120(() => {
   });
-  const invalidateGsapCacheRef = useRef119(() => {
+  const invalidateGsapCacheRef = useRef120(() => {
   });
   const { handleCopy, handlePaste, handleCut } = useClipboard({
     projectId,
@@ -63261,7 +63789,7 @@ function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: STUDIO_KEYFRAMES_ENABLED ? () => handleToggleRecordingRef.current() : void 0
   });
-  const sidebarTabRef = useRef119({
+  const sidebarTabRef = useRef120({
     select: (t) => leftSidebarRef.current?.selectTab(t),
     get: () => leftSidebarRef.current?.getTab() ?? "compositions"
   });
@@ -63349,9 +63877,9 @@ function StudioApp() {
     resetErrors: resetConsoleErrors
   } = useConsoleErrorCapture(previewIframe);
   const dragOverlay = useGlobalFileDrop(timelineEditing.handleTimelineFileDrop);
-  const handleToggleRecordingRef = useRef119(() => {
+  const handleToggleRecordingRef = useRef120(() => {
   });
-  const domEditSessionRef = useRef119(domEditSession);
+  const domEditSessionRef = useRef120(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     domEditSessionRef,
@@ -63361,7 +63889,7 @@ function StudioApp() {
   });
   handleToggleRecordingRef.current = handleToggleRecording;
   const recordingToggle = STUDIO_KEYFRAMES_ENABLED ? handleToggleRecording : void 0;
-  const canvasRectRef = useRef119(null);
+  const canvasRectRef = useRef120(null);
   useLayoutEffect4(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
@@ -63370,7 +63898,7 @@ function StudioApp() {
     const r = previewIframe.getBoundingClientRect();
     canvasRectRef.current = { left: r.left, top: r.top, width: r.width, height: r.height };
   }, [gestureState, previewIframe]);
-  const handlePreviewIframeRef = useCallback141(
+  const handlePreviewIframeRef = useCallback142(
     (iframe) => {
       previewIframeRef.current = iframe;
       setPreviewIframe(iframe);
@@ -63439,7 +63967,7 @@ function StudioApp() {
     refreshPreviewDocumentVersion
   });
   const timelineToolbar = useMemo50(
-    () => /* @__PURE__ */ jsx157(
+    () => /* @__PURE__ */ jsx158(
       TimelineToolbar,
       {
         domEditSession,
@@ -63449,8 +63977,8 @@ function StudioApp() {
     [domEditSession, timelineEditing.handleTimelineElementSplit]
   );
   if (resolving || waitingForServer || !projectId)
-    return /* @__PURE__ */ jsx157(StudioSplash, { waiting: waitingForServer });
-  return /* @__PURE__ */ jsx157(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx157(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx157(ViewModeProvider, { value: viewModeValue, children: /* @__PURE__ */ jsx157(PanelLayoutProvider, { value: panelLayout, children: /* @__PURE__ */ jsx157(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx157(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs135(
+    return /* @__PURE__ */ jsx158(StudioSplash, { waiting: waitingForServer });
+  return /* @__PURE__ */ jsx158(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx158(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx158(ViewModeProvider, { value: viewModeValue, children: /* @__PURE__ */ jsx158(PanelLayoutProvider, { value: panelLayout, children: /* @__PURE__ */ jsx158(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx158(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs135(
     "div",
     {
       className: "flex flex-col h-full w-full bg-neutral-950 relative",
@@ -63459,7 +63987,7 @@ function StudioApp() {
       onDragLeave: dragOverlay.onDragLeave,
       onDrop: dragOverlay.onDrop,
       children: [
-        /* @__PURE__ */ jsx157(
+        /* @__PURE__ */ jsx158(
           StudioHeader,
           {
             captureFrameHref: frameCapture.captureFrameHref,
@@ -63477,25 +64005,25 @@ function StudioApp() {
             }
           }
         ),
-        previewPersistence.domEditSaveQueuePaused && /* @__PURE__ */ jsx157(
+        previewPersistence.domEditSaveQueuePaused && /* @__PURE__ */ jsx158(
           SaveQueuePausedBanner,
           {
             message: previewPersistence.domEditSaveQueuePaused,
             onRetry: previewPersistence.resetDomEditSaveQueueBreaker
           }
         ),
-        viewModeValue.viewMode === "storyboard" && /* @__PURE__ */ jsx157(
+        viewModeValue.viewMode === "storyboard" && /* @__PURE__ */ jsx158(
           StoryboardView,
           {
             projectId,
             onSelectComposition: handleSelectComposition
           }
         ),
-        /* @__PURE__ */ jsx157(
+        /* @__PURE__ */ jsx158(
           EditorShell,
           {
             hidden: viewModeValue.viewMode === "storyboard",
-            left: /* @__PURE__ */ jsx157(
+            left: /* @__PURE__ */ jsx158(
               StudioLeftSidebar,
               {
                 leftSidebarRef,
@@ -63509,7 +64037,7 @@ function StudioApp() {
                 onAddAssetToTimeline: handleAddAssetAtPlayhead
               }
             ),
-            right: panelLayout.rightCollapsed ? null : /* @__PURE__ */ jsx157(
+            right: panelLayout.rightCollapsed ? null : /* @__PURE__ */ jsx158(
               StudioRightPanel,
               {
                 designPanelActive,
@@ -63523,6 +64051,7 @@ function StudioApp() {
                 onToggleRecording: recordingToggle,
                 sdkSession: sdkHandle.session,
                 publishSdkSession: sdkHandle.publish,
+                forceReloadSdkSession: sdkHandle.forceReload,
                 reloadPreview,
                 domEditSaveTimestampRef,
                 recordEdit: editHistory.recordEdit,
@@ -63552,7 +64081,7 @@ function StudioApp() {
             recordingState: gestureState,
             onToggleRecording: recordingToggle,
             blockPreview,
-            gestureOverlay: gestureState === "recording" && previewIframe ? /* @__PURE__ */ jsx157(
+            gestureOverlay: gestureState === "recording" && previewIframe ? /* @__PURE__ */ jsx158(
               GestureTrailOverlay,
               {
                 samples: gestureRecording.samplesRef.current,
@@ -63565,7 +64094,7 @@ function StudioApp() {
             ) : void 0
           }
         ),
-        /* @__PURE__ */ jsx157(
+        /* @__PURE__ */ jsx158(
           StudioOverlays,
           {
             projectId,
@@ -63587,32 +64116,32 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState120, useCallback as useCallback142, useRef as useRef120 } from "react";
+import { useState as useState121, useCallback as useCallback143, useRef as useRef121 } from "react";
 function useElementPicker(iframeRef, options) {
-  const [isPickMode, setIsPickMode] = useState120(false);
-  const [pickedElement, setPickedElement] = useState120(null);
-  const activeOverrideRef = useRef120(null);
-  const getActiveIframe = useCallback142(() => {
+  const [isPickMode, setIsPickMode] = useState121(false);
+  const [pickedElement, setPickedElement] = useState121(null);
+  const activeOverrideRef = useRef121(null);
+  const getActiveIframe = useCallback143(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
-  const setActiveIframe = useCallback142((el) => {
+  const setActiveIframe = useCallback143((el) => {
     activeOverrideRef.current = el;
   }, []);
-  const enablePick = useCallback142(() => {
+  const enablePick = useCallback143(() => {
     try {
       postRuntimeControlMessage(getActiveIframe()?.contentWindow, "enable-pick-mode");
       setIsPickMode(true);
     } catch {
     }
   }, [getActiveIframe]);
-  const disablePick = useCallback142(() => {
+  const disablePick = useCallback143(() => {
     try {
       postRuntimeControlMessage(getActiveIframe()?.contentWindow, "disable-pick-mode");
     } catch {
     }
     setIsPickMode(false);
   }, [getActiveIframe]);
-  const clearPick = useCallback142(() => {
+  const clearPick = useCallback143(() => {
     setPickedElement(null);
   }, []);
   useMountEffect(() => {
@@ -63665,9 +64194,9 @@ function useElementPicker(iframeRef, options) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   });
-  const optionsRef = useRef120(options);
+  const optionsRef = useRef121(options);
   optionsRef.current = options;
-  const syncToSource = useCallback142(
+  const syncToSource = useCallback143(
     (elementId, selector, op) => {
       const opts = optionsRef.current;
       if (!opts?.workspaceFiles || !opts.onSyncFiles || !elementId) return;
@@ -63683,7 +64212,7 @@ function useElementPicker(iframeRef, options) {
     },
     []
   );
-  const setStyle = useCallback142(
+  const setStyle = useCallback143(
     (prop, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -63725,7 +64254,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setDataAttr = useCallback142(
+  const setDataAttr = useCallback143(
     (attr, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -63753,7 +64282,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setTextContent = useCallback142(
+  const setTextContent = useCallback143(
     (text) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -63776,7 +64305,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const activeIframeRef = useRef120(null);
+  const activeIframeRef = useRef121(null);
   activeIframeRef.current = getActiveIframe();
   return {
     isPickMode,