@hyperframes/studio 0.8.190 → 0.8.191

package/dist/index.js

@@ -48,7 +48,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-563JPIL4.js";
+} from "./chunk-IWO4UENE.js";
 import {
   Button,
   ContextMenu,
@@ -36337,11 +36337,11 @@ function ownNodeTransform(node, ops, getStyle) {
   const spin = individualRotateDegrees(style.rotate);
   return spin === 0 ? own : ops.compose(ops.fromRotate(spin), own);
 }
-function composeElementTransform(element, ops, getStyle, memo63) {
+function composeElementTransform(element, ops, getStyle, memo64) {
   const pending2 = [];
   let above;
   for (let node = element; node; node = node.parentElement) {
-    above = memo63?.get(node);
+    above = memo64?.get(node);
     if (above !== void 0) break;
     pending2.push(node);
     if (node.hasAttribute(COMPOSITION_ROOT_ATTR)) break;
@@ -36353,7 +36353,7 @@ function composeElementTransform(element, ops, getStyle, memo63) {
       const own = ownNodeTransform(node, ops, getStyle);
       acc = own === null ? null : ops.compose(acc, own);
     }
-    memo63?.set(node, acc);
+    memo64?.set(node, acc);
   }
   return acc;
 }
@@ -36636,11 +36636,11 @@ function createOverlayMeasurePass() {
     sourceBoundaryRect: /* @__PURE__ */ new Map()
   };
 }
-function readThroughPass(memo63, key2, compute) {
-  const answered = memo63.get(key2);
+function readThroughPass(memo64, key2, compute) {
+  const answered = memo64.get(key2);
   if (answered !== void 0) return answered;
   const value = compute();
-  memo63.set(key2, value);
+  memo64.set(key2, value);
   return value;
 }
 
@@ -51878,6 +51878,7 @@ function DockStripActions({
 // src/components/dock/DockTab.tsx
 import { useCallback as useCallback72, useSyncExternalStore as useSyncExternalStore9 } from "react";
 import {
+  Aperture,
   BracketsCurly,
   ChartBarHorizontal,
   Code,
@@ -51903,7 +51904,8 @@ var TAB_ICONS = {
   layers: Stack2,
   renders: FilmSlate,
   variables: BracketsCurly,
-  slideshow: Presentation
+  slideshow: Presentation,
+  motionBlur: Aperture
 };
 function DockTab({ api }) {
   const subscribe2 = useCallback72(
@@ -52041,7 +52043,7 @@ var MIN_SIDE_W = 200;
 var MIN_SIDE_W_FLOOR = 120;
 var DEFAULT_TIMELINE_H = 360;
 var DEFAULT_LEFT = ["compositions", "assets", "code", "catalog"];
-var DEFAULT_RIGHT = ["design", "layers", "renders", "variables"];
+var DEFAULT_RIGHT = ["design", "layers", "renders", "variables", "motionBlur"];
 function defaultSideWidths(viewportWidth) {
   const floor = sideMinimumWidth(viewportWidth);
   const left = Math.max(floor, Math.min(384, Math.round(viewportWidth * 0.257)));
@@ -72917,7 +72919,7 @@ var FileTree = memo43(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState164, useCallback as useCallback194, useRef as useRef189, useMemo as useMemo89 } from "react";
+import { useState as useState165, useCallback as useCallback195, useRef as useRef190, useMemo as useMemo90 } from "react";
 
 // src/hooks/useStableHandlers.ts
 import { useRef as useRef117 } from "react";
@@ -88887,19 +88889,26 @@ var DEFAULT_ANIMATION_SET = {
 
 // src/captions/parser.ts
 function buildCaptionModel(transcript, options) {
-  const { width, height, duration, wordsPerGroup = 5 } = options;
+  const { wordsPerGroup = 5 } = options;
+  const wordGroups = [];
+  for (let offset = 0; offset < transcript.length; offset += wordsPerGroup) {
+    wordGroups.push(transcript.slice(offset, offset + wordsPerGroup));
+  }
+  return buildGroupedCaptionModel(wordGroups, options);
+}
+function buildGroupedCaptionModel(wordGroups, { width, height, duration }) {
   const segments = /* @__PURE__ */ new Map();
   const groups = /* @__PURE__ */ new Map();
   const groupOrder = [];
-  for (let groupIdx = 0; groupIdx < transcript.length; groupIdx += wordsPerGroup) {
-    const chunk2 = transcript.slice(groupIdx, groupIdx + wordsPerGroup);
-    const groupId = `group-${groupIdx / wordsPerGroup}`;
+  for (const chunk2 of wordGroups) {
+    const groupId = `group-${groups.size}`;
     const segmentIds = [];
     chunk2.forEach((word, wordIdx) => {
-      const segmentId = `segment-${groupIdx + wordIdx}`;
+      const segmentIndex = segments.size;
+      const segmentId = `segment-${segmentIndex}`;
       const segment = {
         id: segmentId,
-        wordId: word.id ?? `w${groupIdx + wordIdx}`,
+        wordId: word.id ?? `w${segmentIndex}`,
         text: word.text,
         start: word.start,
         end: word.end,
@@ -88938,6 +88947,20 @@ function buildCaptionModel(transcript, options) {
     }
   };
 }
+var GROUP_SELECTOR = ".caption-group, .caption-line, .caption-block";
+var WORD_SELECTOR = ".word, .caption-word";
+function readTranscriptGroups(transcript, groupEls) {
+  const wordGroups = [];
+  let offset = 0;
+  for (const group of groupEls) {
+    if (group.parentElement?.closest(GROUP_SELECTOR)) continue;
+    const size = group.querySelectorAll(WORD_SELECTOR).length;
+    if (size === 0) continue;
+    wordGroups.push(transcript.slice(offset, offset + size));
+    offset += size;
+  }
+  return offset === transcript.length ? wordGroups : null;
+}
 function extractTranscript(source) {
   const varPattern = /(?:const|let|var)\s+(?:TRANSCRIPT|script)\s*=\s*(\[[\s\S]*?\]);/;
   const match = source.match(varPattern);
@@ -88956,21 +88979,15 @@ function parseCaptionComposition(iframeDoc, iframeWin, source, compositionWidth,
   if (transcript.length === 0) {
     return null;
   }
-  const groupEls = iframeDoc.querySelectorAll(".caption-group, .caption-line, .caption-block");
-  const wordEls = iframeDoc.querySelectorAll(".word, .caption-word");
-  let wordsPerGroup = 5;
-  if (groupEls.length > 0 && wordEls.length > 0) {
-    wordsPerGroup = Math.round(wordEls.length / groupEls.length);
-    if (wordsPerGroup < 1) {
-      wordsPerGroup = 1;
-    }
-  }
-  const model = buildCaptionModel(transcript, {
+  const groupEls = iframeDoc.querySelectorAll(GROUP_SELECTOR);
+  const wordEls = iframeDoc.querySelectorAll(WORD_SELECTOR);
+  const wordGroups = readTranscriptGroups(transcript, groupEls);
+  const options = {
     width: compositionWidth,
     height: compositionHeight,
-    duration: compositionDuration,
-    wordsPerGroup
-  });
+    duration: compositionDuration
+  };
+  const model = wordGroups ? buildGroupedCaptionModel(wordGroups, options) : buildCaptionModel(transcript, options);
   const firstWordEl = wordEls.item(0);
   const firstGroupEl = groupEls.item(0);
   const styleSourceEl = firstWordEl ?? firstGroupEl;
@@ -89517,7 +89534,14 @@ function useToast() {
 import { useCallback as useCallback160, useEffect as useEffect132, useRef as useRef166, useState as useState132 } from "react";
 
 // src/utils/studioUrlState.ts
-var VALID_TABS = ["layers", "design", "renders", "slideshow", "variables"];
+var VALID_TABS = [
+  "layers",
+  "design",
+  "renders",
+  "slideshow",
+  "variables",
+  "motionBlur"
+];
 function resolveMasterCompositionPath(compositions) {
   if (compositions.includes("index.html")) return "index.html";
   return compositions.find((p) => p.endsWith(".html")) ?? null;
@@ -91778,7 +91802,7 @@ function useGestureTrailOverlay({
 }
 
 // src/hooks/useStudioSidePanels.tsx
-import { useMemo as useMemo88 } from "react";
+import { useMemo as useMemo89 } from "react";
 
 // src/components/StudioLeftPanels.tsx
 import { memo as memo51, useCallback as useCallback172 } from "react";
@@ -94413,7 +94437,7 @@ function CodeBody({
 }
 
 // src/components/StudioRightPanels.tsx
-import { memo as memo61, useCallback as useCallback189 } from "react";
+import { memo as memo62, useCallback as useCallback190 } from "react";
 
 // src/components/editor/LayersPanel.tsx
 import { memo as memo52, useState as useState148, useCallback as useCallback174, useEffect as useEffect146, useRef as useRef179 } from "react";
@@ -98574,8 +98598,175 @@ var VariablesPanel = memo60(function VariablesPanel2({
   ] });
 });
 
+// src/components/panels/MotionBlurPanel.tsx
+import { memo as memo61, useCallback as useCallback185, useEffect as useEffect154, useMemo as useMemo87, useReducer as useReducer2, useRef as useRef185, useState as useState161 } from "react";
+
+// src/components/panels/motionBlurPanelModel.ts
+import {
+  MOTION_BLUR_ATTR,
+  MOTION_BLUR_LIMITS,
+  motionBlurAttributeEdits,
+  readMotionBlurSettings
+} from "@hyperframes/core/motion-blur-settings";
+function findCompositionRoot(roots) {
+  const root = roots.find((el) => "data-composition-id" in el.attributes) ?? roots[0];
+  return root ? { id: root.id, attributes: root.attributes } : null;
+}
+var settingsOf = (attributes) => readMotionBlurSettings((name) => attributes[name] ?? null);
+function changedEdits(attributes, next) {
+  return Object.entries(motionBlurAttributeEdits(next)).filter(([name, value]) => (attributes[name] ?? null) !== value).map(([name, value]) => ({ name, value }));
+}
+function withEdits(attributes, edits) {
+  const next = { ...attributes };
+  for (const { name, value } of edits) {
+    if (value === null) delete next[name];
+    else next[name] = value;
+  }
+  return next;
+}
+function readPreviewRootAttributes(iframe) {
+  try {
+    const root = iframe?.contentDocument?.querySelector("[data-composition-id]");
+    if (!root) return null;
+    const found = {};
+    for (const name of Object.values(MOTION_BLUR_ATTR)) {
+      const value = root.getAttribute(name);
+      if (value !== null) found[name] = value;
+    }
+    return found;
+  } catch {
+    return null;
+  }
+}
+var sameAttributes = (a, b) => a === b || a !== null && b !== null && Object.keys({ ...a, ...b }).every((name) => a[name] === b[name]);
+var BLUR_LEVELS = [
+  { level: "off", label: "Off" },
+  { level: "subtle", label: "Subtle" },
+  { level: "strong", label: "Strong" }
+];
+var LEVEL_SETTINGS = {
+  subtle: { shutterDeg: MOTION_BLUR_LIMITS.shutterDeg.default, samples: null },
+  strong: {
+    shutterDeg: MOTION_BLUR_LIMITS.shutterDeg.max,
+    samples: MOTION_BLUR_LIMITS.samples.max
+  }
+};
+var STRONG_ABOVE = (LEVEL_SETTINGS.subtle.shutterDeg + LEVEL_SETTINGS.strong.shutterDeg) / 2;
+function levelOf(settings) {
+  if (!settings.enabled) return "off";
+  return settings.shutterDeg > STRONG_ABOVE ? "strong" : "subtle";
+}
+function patchForLevel(level) {
+  return level === "off" ? { enabled: false } : { enabled: true, ...LEVEL_SETTINGS[level] };
+}
+
+// src/components/panels/MotionBlurPanel.tsx
+import { jsx as jsx244, jsxs as jsxs193 } from "react/jsx-runtime";
+var POLL_MS2 = 500;
+var SETTLE_MS = 1500;
+var NothingToChange = class extends Error {
+};
+function useLivePreviewAttributes(previewIframeRef, refreshKey) {
+  const [live, setLive] = useState161(null);
+  const holdUntil = useRef185(0);
+  useEffect154(() => {
+    const read2 = () => {
+      const found = readPreviewRootAttributes(previewIframeRef.current);
+      if (found && Date.now() >= holdUntil.current) {
+        setLive((current) => sameAttributes(current, found) ? current : found);
+      }
+    };
+    read2();
+    const timer = setInterval(read2, POLL_MS2);
+    return () => clearInterval(timer);
+  }, [previewIframeRef, refreshKey]);
+  const hold = useCallback185((next) => {
+    holdUntil.current = Date.now() + SETTLE_MS;
+    setLive(next);
+  }, []);
+  return [live, hold];
+}
+var MotionBlurPanel = memo61(function MotionBlurPanel2({
+  sdkSession,
+  publishSdkSession,
+  reloadPreview,
+  recordEdit
+}) {
+  const { activeCompPath, previewIframeRef, showToast } = useStudioShellContext();
+  const { refreshKey } = useStudioPlaybackContext();
+  const { readProjectFile, writeProjectFile, compositions } = useFileManagerContext();
+  const [, rerender] = useReducer2((n) => n + 1, 0);
+  const [live, hold] = useLivePreviewAttributes(previewIframeRef, refreshKey);
+  useEffect154(() => sdkSession?.on("change", rerender), [sdkSession]);
+  const root = sdkSession ? findCompositionRoot(sdkSession.getRootElements()) : null;
+  const attributes = live ?? root?.attributes ?? null;
+  const settings = useMemo87(() => attributes ? settingsOf(attributes) : null, [attributes]);
+  const isMain = activeCompPath == null || activeCompPath === resolveMasterCompositionPath(compositions);
+  const persist2 = useVariablesPersist({
+    sdkSession,
+    activeCompPath,
+    readProjectFile,
+    writeProjectFile,
+    recordEdit,
+    reloadPreview,
+    publishSdkSession
+  });
+  const apply = useCallback185(
+    async (patch) => {
+      if (!attributes) return;
+      let applied = [];
+      try {
+        await persist2("Edit motion blur", (session) => {
+          const target = findCompositionRoot(session.getRootElements());
+          if (!target) return;
+          const next = { ...settingsOf(target.attributes), ...patch };
+          applied = changedEdits(target.attributes, next);
+          if (applied.length === 0) throw new NothingToChange();
+          for (const e of applied) {
+            session.dispatch({
+              type: "setAttribute",
+              target: target.id,
+              name: e.name,
+              value: e.value
+            });
+          }
+        });
+        hold((current2) => withEdits(current2 ?? attributes, applied));
+        rerender();
+      } catch (err) {
+        if (err instanceof NothingToChange) return;
+        showToast(err instanceof Error ? err.message : String(err), "error");
+      }
+    },
+    [attributes, persist2, hold, showToast]
+  );
+  if (!settings) {
+    return /* @__PURE__ */ jsx244("p", { className: "p-3 text-[10px] leading-relaxed text-neutral-500", children: "Open a composition to set up motion blur." });
+  }
+  const locked = !isMain;
+  const current = locked ? null : levelOf(settings);
+  return /* @__PURE__ */ jsxs193("div", { className: "flex h-full flex-col gap-3 overflow-y-auto p-3 text-[11px] text-neutral-300", children: [
+    /* @__PURE__ */ jsx244("span", { className: "text-[12px] font-medium text-neutral-100", children: "Motion blur" }),
+    /* @__PURE__ */ jsx244("div", { role: "radiogroup", "aria-label": "Motion blur", className: "flex gap-1.5", children: BLUR_LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx244(
+      Button,
+      {
+        role: "radio",
+        "aria-checked": current === level,
+        size: "sm",
+        variant: current === level ? "secondary" : "ghost",
+        className: "flex-1",
+        disabled: locked,
+        onClick: () => void apply(patchForLevel(level)),
+        children: label
+      },
+      level
+    )) }),
+    locked ? /* @__PURE__ */ jsx244("p", { className: "text-[10px] leading-relaxed text-amber-400/90", children: "Motion blur is read from the main composition. Open it to change this setting." }) : null
+  ] });
+});
+
 // src/hooks/useSlideshowPersist.ts
-import { useCallback as useCallback185 } from "react";
+import { useCallback as useCallback186 } from "react";
 
 // src/utils/setSlideshowManifest.ts
 import {
@@ -98632,7 +98823,7 @@ function useSlideshowPersist({
   publishSdkSession,
   coalesceKey
 }) {
-  return useCallback185(
+  return useCallback186(
     async (manifest) => {
       if (!sdkSession) return;
       const path = activeCompPath ?? "index.html";
@@ -98665,15 +98856,15 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useMemo as useMemo87 } from "react";
+import { useMemo as useMemo88 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, slideshowVisible } = params;
-  const isSlideshowComposition = useMemo87(() => {
+  const isSlideshowComposition = useMemo88(() => {
     if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
     return slideshowIslandRegex2("i").test(editingFileContent);
   }, [editingFileContent]);
-  const slideshowScenes = useMemo87(() => {
+  const slideshowScenes = useMemo88(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -98690,8 +98881,8 @@ function useSlideshowTabState(params) {
 }
 
 // src/components/DesignPanelPromoteProvider.tsx
-import { useCallback as useCallback186 } from "react";
-import { jsx as jsx244 } from "react/jsx-runtime";
+import { useCallback as useCallback187 } from "react";
+import { jsx as jsx245 } from "react/jsx-runtime";
 function DesignPanelPromoteProvider({
   selection,
   projectId,
@@ -98709,7 +98900,7 @@ function DesignPanelPromoteProvider({
     publishSdkSession: handle.publish,
     activeCompPath: targetPath
   });
-  const persist2 = useCallback186(
+  const persist2 = useCallback187(
     async (label, mutate) => {
       const committed = await rawPersist(label, mutate);
       if (committed) forceReloadSharedSdkSession?.();
@@ -98717,11 +98908,11 @@ function DesignPanelPromoteProvider({
     },
     [rawPersist, forceReloadSharedSdkSession]
   );
-  const handlePersistError = useCallback186(
+  const handlePersistError = useCallback187(
     (error) => showToast(getStudioSaveErrorMessage(error), "error"),
     [showToast]
   );
-  return /* @__PURE__ */ jsx244(
+  return /* @__PURE__ */ jsx245(
     VariablePromoteProvider,
     {
       session: handle.session,
@@ -98734,7 +98925,7 @@ function DesignPanelPromoteProvider({
 }
 
 // src/hooks/useRemoveBackground.ts
-import { useCallback as useCallback187, useEffect as useEffect154, useRef as useRef185 } from "react";
+import { useCallback as useCallback188, useEffect as useEffect155, useRef as useRef186 } from "react";
 
 // src/components/studioMediaJobs.ts
 var MEDIA_JOB_RECONNECT_TIMEOUT_MS = 15e3;
@@ -98840,14 +99031,14 @@ function waitForMediaJob(jobId, onProgress, signal) {
 
 // src/hooks/useRemoveBackground.ts
 function useRemoveBackground(projectId, refreshFileTree, showToast) {
-  const abortRef = useRef185(null);
-  useEffect154(
+  const abortRef = useRef186(null);
+  useEffect155(
     () => () => {
       abortRef.current?.abort();
     },
     []
   );
-  return useCallback187(
+  return useCallback188(
     // fallow-ignore-next-line complexity
     async (inputPath, options) => {
       const response = await studioApiFetch(
@@ -98886,7 +99077,7 @@ function useRemoveBackground(projectId, refreshFileTree, showToast) {
 }
 
 // src/hooks/useApplyColorGradingScope.ts
-import { useCallback as useCallback188 } from "react";
+import { useCallback as useCallback189 } from "react";
 
 // src/components/editor/colorGradingScopePatch.ts
 var MEDIA_TAG_RE = /<\s*(video|img)\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
@@ -98990,7 +99181,7 @@ function useApplyColorGradingScope(recordEdit, reloadPreview) {
   const { projectId, activeCompPath, showToast, waitForPendingDomEditSaves } = useStudioShellContext();
   const { domEditSelection } = useDomEditContext();
   const { readProjectFile, writeProjectFile, compositions } = useFileManagerContext();
-  return useCallback188(
+  return useCallback189(
     async (scope, value) => applyColorGradingScopeUpdate({
       scope,
       value,
@@ -99026,9 +99217,9 @@ function useApplyColorGradingScope(recordEdit, reloadPreview) {
 }
 
 // src/components/StudioRightPanels.tsx
-import { Fragment as Fragment66, jsx as jsx245, jsxs as jsxs193 } from "react/jsx-runtime";
+import { Fragment as Fragment66, jsx as jsx246, jsxs as jsxs194 } from "react/jsx-runtime";
 var seekToTime = (t2) => usePlayerStore.getState().requestSeek(t2);
-var StudioRightPanels = memo61(function StudioRightPanels2({
+var StudioRightPanels = memo62(function StudioRightPanels2({
   activeBlockParams,
   onCloseBlockParams,
   onDismissBlockParams,
@@ -99138,11 +99329,11 @@ var StudioRightPanels = memo61(function StudioRightPanels2({
   useCaptionDesignFocus(captionEditMode);
   const handleApplyColorGradingScope = useApplyColorGradingScope(recordEdit, reloadPreview);
   const handleRemoveBackground = useRemoveBackground(projectId, refreshFileTree, showToast);
-  const setAttributeWhileDragging = useCallback189(
+  const setAttributeWhileDragging = useCallback190(
     (attr, value) => handleDomAttributeLiveCommit(attr, value, void 0, { previewOnly: true }),
     [handleDomAttributeLiveCommit]
   );
-  const handleHideAllSelected = useCallback189(() => {
+  const handleHideAllSelected = useCallback190(() => {
     if (!canHideSelections(domEditGroupSelections)) {
       showToast("Audio can't be hidden. Use the group's own controls", "info");
       return;
@@ -99151,11 +99342,11 @@ var StudioRightPanels = memo61(function StudioRightPanels2({
     const keys = timelineKeysForSelections(domEditGroupSelections, elements, activeCompPath);
     if (keys.length > 0) void onToggleElementHidden?.(keys, true);
   }, [domEditGroupSelections, showToast, activeCompPath, onToggleElementHidden]);
-  const convertToKeyframes = useCallback189(
+  const convertToKeyframes = useCallback190(
     (animId, duration) => handleGsapConvertToKeyframes(animId, void 0, duration),
     [handleGsapConvertToKeyframes]
   );
-  const propertyPanel = /* @__PURE__ */ jsx245(
+  const propertyPanel = /* @__PURE__ */ jsx246(
     DesignPanelPromoteProvider,
     {
       selection: domEditGroupSelections.length > 1 ? null : domEditSelection,
@@ -99167,7 +99358,7 @@ var StudioRightPanels = memo61(function StudioRightPanels2({
       recordEdit,
       reloadPreview,
       forceReloadSharedSdkSession: forceReloadSdkSession,
-      children: /* @__PURE__ */ jsx245(
+      children: /* @__PURE__ */ jsx246(
         PropertyPanel,
         {
           projectId,
@@ -99238,9 +99429,9 @@ var StudioRightPanels = memo61(function StudioRightPanels2({
   );
   let designBody = propertyPanel;
   if (captionEditMode) {
-    designBody = /* @__PURE__ */ jsx245(CaptionPropertyPanel, { iframeRef: previewIframeRef });
+    designBody = /* @__PURE__ */ jsx246(CaptionPropertyPanel, { iframeRef: previewIframeRef });
   } else if (activeBlockParams) {
-    designBody = /* @__PURE__ */ jsx245(
+    designBody = /* @__PURE__ */ jsx246(
       BlockParamsPanel,
       {
         blockName: activeBlockParams.blockName,
@@ -99252,18 +99443,18 @@ var StudioRightPanels = memo61(function StudioRightPanels2({
       }
     );
   }
-  return /* @__PURE__ */ jsxs193(Fragment66, { children: [
-    /* @__PURE__ */ jsx245(Dock.Panel, { id: "design", children: designBody }),
-    /* @__PURE__ */ jsx245(Dock.Panel, { id: "layers", children: /* @__PURE__ */ jsx245(LayersPanel, {}) }),
-    /* @__PURE__ */ jsx245(
+  return /* @__PURE__ */ jsxs194(Fragment66, { children: [
+    /* @__PURE__ */ jsx246(Dock.Panel, { id: "design", children: designBody }),
+    /* @__PURE__ */ jsx246(Dock.Panel, { id: "layers", children: /* @__PURE__ */ jsx246(LayersPanel, {}) }),
+    /* @__PURE__ */ jsx246(
       Dock.Panel,
       {
         id: "renders",
         title: renderJobs.length > 0 ? `Renders (${renderJobs.length})` : void 0,
-        children: /* @__PURE__ */ jsx245(RenderQueuePanel, {})
+        children: /* @__PURE__ */ jsx246(RenderQueuePanel, {})
       }
     ),
-    /* @__PURE__ */ jsx245(Dock.Panel, { id: "variables", children: /* @__PURE__ */ jsx245(
+    /* @__PURE__ */ jsx246(Dock.Panel, { id: "variables", children: /* @__PURE__ */ jsx246(
       VariablesPanel,
       {
         sdkSession,
@@ -99272,7 +99463,16 @@ var StudioRightPanels = memo61(function StudioRightPanels2({
         recordEdit
       }
     ) }),
-    /* @__PURE__ */ jsx245(Dock.Panel, { id: "slideshow", children: /* @__PURE__ */ jsx245(
+    /* @__PURE__ */ jsx246(Dock.Panel, { id: "motionBlur", children: /* @__PURE__ */ jsx246(
+      MotionBlurPanel,
+      {
+        sdkSession,
+        publishSdkSession,
+        reloadPreview,
+        recordEdit
+      }
+    ) }),
+    /* @__PURE__ */ jsx246(Dock.Panel, { id: "slideshow", children: /* @__PURE__ */ jsx246(
       SlideshowPanel,
       {
         scenes: slideshowScenes,
@@ -99284,21 +99484,21 @@ var StudioRightPanels = memo61(function StudioRightPanels2({
 });
 
 // src/hooks/useStudioSidePanels.tsx
-import { Fragment as Fragment67, jsx as jsx246, jsxs as jsxs194 } from "react/jsx-runtime";
+import { Fragment as Fragment67, jsx as jsx247, jsxs as jsxs195 } from "react/jsx-runtime";
 function useStudioSidePanels(left, right, projectId) {
   const stableLeft = useStableHandlers(left, projectId);
   const stableRight = useStableHandlers(right, projectId);
-  return useMemo88(
-    () => /* @__PURE__ */ jsxs194(Fragment67, { children: [
-      /* @__PURE__ */ jsx246(StudioLeftPanels, { ...stableLeft }),
-      /* @__PURE__ */ jsx246(StudioRightPanels, { ...stableRight })
+  return useMemo89(
+    () => /* @__PURE__ */ jsxs195(Fragment67, { children: [
+      /* @__PURE__ */ jsx247(StudioLeftPanels, { ...stableLeft }),
+      /* @__PURE__ */ jsx247(StudioRightPanels, { ...stableRight })
     ] }),
     [stableLeft, stableRight]
   );
 }
 
 // src/components/TimelineToolbar.tsx
-import { memo as memo62, useEffect as useEffect156, useRef as useRef186 } from "react";
+import { memo as memo63, useEffect as useEffect157, useRef as useRef187 } from "react";
 import {
   ArrowsOutLineHorizontal,
   Image as Image3,
@@ -99308,9 +99508,9 @@ import {
 } from "@phosphor-icons/react";
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect155, useCallback as useCallback190 } from "react";
+import { useEffect as useEffect156, useCallback as useCallback191 } from "react";
 function useKeyframeKeyboard({ enabled, onAddKeyframe }) {
-  const handler = useCallback190(
+  const handler = useCallback191(
     (e) => {
       if (!enabled || !onAddKeyframe) return;
       if (isTypingTarget(document.activeElement)) return;
@@ -99322,7 +99522,7 @@ function useKeyframeKeyboard({ enabled, onAddKeyframe }) {
     },
     [enabled, onAddKeyframe]
   );
-  useEffect155(() => {
+  useEffect156(() => {
     if (!enabled) return;
     window.addEventListener("keydown", handler, { capture: true });
     return () => window.removeEventListener("keydown", handler, { capture: true });
@@ -99330,9 +99530,9 @@ function useKeyframeKeyboard({ enabled, onAddKeyframe }) {
 }
 
 // src/components/icons/AudioMetersIcon.tsx
-import { jsx as jsx247 } from "react/jsx-runtime";
+import { jsx as jsx248 } from "react/jsx-runtime";
 function AudioMetersIcon({ size = 16 }) {
-  return /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsx248(
     "svg",
     {
       width: size,
@@ -99343,15 +99543,15 @@ function AudioMetersIcon({ size = 16 }) {
       strokeWidth: 1.5,
       strokeLinecap: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx247("path", { d: "M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" })
+      children: /* @__PURE__ */ jsx248("path", { d: "M2.5 13h2m-2-3h2M7 13h2m-2-3h2m-2-3h2m-2-3h2M11.5 13h2m-2-3h2m-2-3h2" })
     }
   );
 }
 
 // src/components/icons/RippleEditIcon.tsx
-import { jsx as jsx248, jsxs as jsxs195 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs196 } from "react/jsx-runtime";
 function RippleEditIcon({ size = 16 }) {
-  return /* @__PURE__ */ jsxs195(
+  return /* @__PURE__ */ jsxs196(
     "svg",
     {
       width: size,
@@ -99364,20 +99564,20 @@ function RippleEditIcon({ size = 16 }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx248("rect", { x: "1.5", y: "8", width: "4", height: "5", rx: "0.5" }),
-        /* @__PURE__ */ jsx248("rect", { x: "10.5", y: "8", width: "4", height: "5", rx: "0.5" }),
-        /* @__PURE__ */ jsx248("path", { d: "M13 4H6m2-2L6 4l2 2" })
+        /* @__PURE__ */ jsx249("rect", { x: "1.5", y: "8", width: "4", height: "5", rx: "0.5" }),
+        /* @__PURE__ */ jsx249("rect", { x: "10.5", y: "8", width: "4", height: "5", rx: "0.5" }),
+        /* @__PURE__ */ jsx249("path", { d: "M13 4H6m2-2L6 4l2 2" })
       ]
     }
   );
 }
 
 // src/components/TimelineHistoryButtons.tsx
-import { Fragment as Fragment68, jsx as jsx249, jsxs as jsxs196 } from "react/jsx-runtime";
+import { Fragment as Fragment68, jsx as jsx250, jsxs as jsxs197 } from "react/jsx-runtime";
 function HistoryButton({ action, can, label, onClick }) {
   const Icon = action === "undo" ? RotateCcw : RotateCw;
   const enabled = Boolean(onClick) && can;
-  return /* @__PURE__ */ jsx249(Tooltip, { label: historyTooltipLabel(action, label), children: /* @__PURE__ */ jsx249(
+  return /* @__PURE__ */ jsx250(Tooltip, { label: historyTooltipLabel(action, label), children: /* @__PURE__ */ jsx250(
     "button",
     {
       type: "button",
@@ -99388,7 +99588,7 @@ function HistoryButton({ action, can, label, onClick }) {
         trackStudioEvent("toolbar_action", { action });
         void onClick?.();
       },
-      children: /* @__PURE__ */ jsx249(Icon, { size: 16 })
+      children: /* @__PURE__ */ jsx250(Icon, { size: 16 })
     }
   ) });
 }
@@ -99396,8 +99596,8 @@ function TimelineHistoryButtons(props) {
   const shell = useStudioShellContextOptional();
   const onUndo = props.onUndo ?? shell?.handleUndo;
   const onRedo = props.onRedo ?? shell?.handleRedo;
-  return /* @__PURE__ */ jsxs196(Fragment68, { children: [
-    /* @__PURE__ */ jsx249(
+  return /* @__PURE__ */ jsxs197(Fragment68, { children: [
+    /* @__PURE__ */ jsx250(
       HistoryButton,
       {
         action: "undo",
@@ -99406,7 +99606,7 @@ function TimelineHistoryButtons(props) {
         onClick: onUndo
       }
     ),
-    /* @__PURE__ */ jsx249(
+    /* @__PURE__ */ jsx250(
       HistoryButton,
       {
         action: "redo",
@@ -99420,9 +99620,9 @@ function TimelineHistoryButtons(props) {
 
 // src/components/TimelineToolPicker.tsx
 import { ArrowLineLeft, ArrowLineRight, CaretDown } from "@phosphor-icons/react";
-import { jsx as jsx250, jsxs as jsxs197 } from "react/jsx-runtime";
+import { jsx as jsx251, jsxs as jsxs198 } from "react/jsx-runtime";
 function SelectIcon() {
-  return /* @__PURE__ */ jsx250("svg", { width: "16", height: "16", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx250("path", { d: "M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" }) });
+  return /* @__PURE__ */ jsx251("svg", { width: "16", height: "16", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx251("path", { d: "M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" }) });
 }
 function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
   const activeTool = usePlayerStore((s) => s.activeTool);
@@ -99431,14 +99631,14 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
     {
       label: "Select",
       shortcut: "V",
-      icon: /* @__PURE__ */ jsx250(SelectIcon, {}),
+      icon: /* @__PURE__ */ jsx251(SelectIcon, {}),
       active: activeTool === "select",
       run: () => store().setActiveTool("select")
     },
     {
       label: "Split",
       shortcut: "B",
-      icon: /* @__PURE__ */ jsx250(Scissors, { size: 16 }),
+      icon: /* @__PURE__ */ jsx251(Scissors, { size: 16 }),
       active: activeTool === "razor",
       run: () => store().setActiveTool("razor")
     }
@@ -99448,25 +99648,25 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
       {
         label: "Select leftward",
         shortcut: "[",
-        icon: /* @__PURE__ */ jsx250(ArrowLineLeft, { size: 16, "aria-hidden": "true" }),
+        icon: /* @__PURE__ */ jsx251(ArrowLineLeft, { size: 16, "aria-hidden": "true" }),
         active: false,
         run: () => store().selectLeftward()
       },
       {
         label: "Select rightward",
         shortcut: "]",
-        icon: /* @__PURE__ */ jsx250(ArrowLineRight, { size: 16, "aria-hidden": "true" }),
+        icon: /* @__PURE__ */ jsx251(ArrowLineRight, { size: 16, "aria-hidden": "true" }),
         active: false,
         run: () => store().selectRightward()
       }
     );
   }
   const current = rows.find((row) => row.active) ?? rows[0];
-  return /* @__PURE__ */ jsx250(
+  return /* @__PURE__ */ jsx251(
     Menu,
     {
       "aria-label": "Timeline tools",
-      trigger: /* @__PURE__ */ jsxs197(
+      trigger: /* @__PURE__ */ jsxs198(
         "button",
         {
           type: "button",
@@ -99474,18 +99674,18 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
           className: cn(flatIdle, "gap-0.5"),
           children: [
             current.icon,
-            /* @__PURE__ */ jsx250(CaretDown, { size: 10, weight: "bold", "aria-hidden": "true" })
+            /* @__PURE__ */ jsx251(CaretDown, { size: 10, weight: "bold", "aria-hidden": "true" })
           ]
         }
       ),
-      children: rows.map((row) => /* @__PURE__ */ jsx250(
+      children: rows.map((row) => /* @__PURE__ */ jsx251(
         MenuItem,
         {
           shortcut: row.shortcut,
           onClick: row.run,
           "data-active": row.active || void 0,
           className: row.active ? "bg-press text-text-0" : void 0,
-          children: /* @__PURE__ */ jsxs197("span", { className: "flex items-center gap-2", children: [
+          children: /* @__PURE__ */ jsxs198("span", { className: "flex items-center gap-2", children: [
             row.icon,
             row.label
           ] })
@@ -99497,17 +99697,17 @@ function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
 }
 
 // src/components/LinkedSelectionToggle.tsx
-import { useCallback as useCallback191, useState as useState161 } from "react";
+import { useCallback as useCallback192, useState as useState162 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
 import { LinkSimple } from "@phosphor-icons/react";
-import { Fragment as Fragment69, jsx as jsx251, jsxs as jsxs198 } from "react/jsx-runtime";
+import { Fragment as Fragment69, jsx as jsx252, jsxs as jsxs199 } from "react/jsx-runtime";
 function SyncIndicatorMenu({ x, y, onClose }) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
   const visible = useLinkedClipPreferences((s) => s.syncIndicatorsVisible);
   const setVisible = useLinkedClipPreferences((s) => s.setSyncIndicatorsVisible);
   return createPortal15(
-    /* @__PURE__ */ jsx251(
+    /* @__PURE__ */ jsx252(
       "div",
       {
         ref: menuRef,
@@ -99515,7 +99715,7 @@ function SyncIndicatorMenu({ x, y, onClose }) {
         "aria-label": "Linked clips",
         className: `${menuClasses.panel} fixed z-200 min-w-[200px]`,
         style: { left: x, top: y },
-        children: /* @__PURE__ */ jsxs198(
+        children: /* @__PURE__ */ jsxs199(
           "button",
           {
             type: "button",
@@ -99527,7 +99727,7 @@ function SyncIndicatorMenu({ x, y, onClose }) {
               onClose();
             },
             children: [
-              /* @__PURE__ */ jsx251("span", { className: "w-3 text-studio-accent", children: visible ? "\u2713" : "" }),
+              /* @__PURE__ */ jsx252("span", { className: "w-3 text-studio-accent", children: visible ? "\u2713" : "" }),
               "Show out-of-sync indicators"
             ]
           }
@@ -99540,14 +99740,14 @@ function SyncIndicatorMenu({ x, y, onClose }) {
 function LinkedSelectionToggle() {
   const linkedSelection = useLinkedClipPreferences((s) => s.linkedSelection);
   const setLinkedSelection = useLinkedClipPreferences((s) => s.setLinkedSelection);
-  const [menuAt, setMenuAt] = useState161(null);
-  const closeMenu = useCallback191(() => setMenuAt(null), []);
-  return /* @__PURE__ */ jsxs198(Fragment69, { children: [
-    /* @__PURE__ */ jsx251(
+  const [menuAt, setMenuAt] = useState162(null);
+  const closeMenu = useCallback192(() => setMenuAt(null), []);
+  return /* @__PURE__ */ jsxs199(Fragment69, { children: [
+    /* @__PURE__ */ jsx252(
       Tooltip,
       {
         label: linkedSelection ? "Linked Selection on: a click selects both halves (\u2325-click for one)" : "Linked Selection off: a click selects one clip",
-        children: /* @__PURE__ */ jsx251(
+        children: /* @__PURE__ */ jsx252(
           "button",
           {
             type: "button",
@@ -99559,17 +99759,17 @@ function LinkedSelectionToggle() {
             "aria-label": "Linked Selection",
             "aria-pressed": linkedSelection,
             className: linkedSelection ? flatActive : flatIdle,
-            children: /* @__PURE__ */ jsx251(LinkSimple, { size: 16, weight: "bold", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx252(LinkSimple, { size: 16, weight: "bold", "aria-hidden": "true" })
           }
         )
       }
     ),
-    menuAt && /* @__PURE__ */ jsx251(SyncIndicatorMenu, { x: menuAt.x, y: menuAt.y, onClose: closeMenu })
+    menuAt && /* @__PURE__ */ jsx252(SyncIndicatorMenu, { x: menuAt.x, y: menuAt.y, onClose: closeMenu })
   ] });
 }
 
 // src/components/TimelineToolbar.tsx
-import { Fragment as Fragment70, jsx as jsx252, jsxs as jsxs199 } from "react/jsx-runtime";
+import { Fragment as Fragment70, jsx as jsx253, jsxs as jsxs200 } from "react/jsx-runtime";
 var NO_KEYFRAME_TOGGLE = {
   state: "none",
   isMotionPath: false,
@@ -99613,7 +99813,7 @@ function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const elements = usePlayerStore((s) => s.elements);
-  const sessionRef = useRef186(session);
+  const sessionRef = useRef187(session);
   sessionRef.current = session;
   const onToggle = useEnableKeyframes(
     sessionRef
@@ -99626,7 +99826,7 @@ function useKeyframeToggle(session) {
     onToggle: session?.domEditSelection && !toggleState.pathEndpoint ? onToggle : void 0
   };
 }
-var TimelineToolbar = memo62(function TimelineToolbar2({
+var TimelineToolbar = memo63(function TimelineToolbar2({
   domEditSession,
   onSplitElement,
   splitShortcut = SPLIT_SHORTCUT_HINT,
@@ -99668,10 +99868,10 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
     enabled: showKeyframes && Boolean(onToggleKeyframe),
     onAddKeyframe: onToggleKeyframe
   });
-  useEffect156(() => {
+  useEffect157(() => {
     if (!showKeyframes) setAutoKeyframeEnabled(false);
   }, [showKeyframes, setAutoKeyframeEnabled]);
-  useEffect156(() => {
+  useEffect157(() => {
     const onKeyDown = (e) => {
       if (e.key !== "n" && e.key !== "N") return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
@@ -99682,13 +99882,13 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, []);
-  return /* @__PURE__ */ jsx252("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs199("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
-    /* @__PURE__ */ jsxs199("div", { className: "flex items-center gap-0.5", children: [
-      showHistory && /* @__PURE__ */ jsx252(TimelineHistoryButtons, { ...history2 }),
-      /* @__PURE__ */ jsx252(TimelineToolPicker, { showSelectAroundPlayhead }),
-      /* @__PURE__ */ jsx252("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
-      /* @__PURE__ */ jsx252(LinkedSelectionToggle, {}),
-      /* @__PURE__ */ jsx252(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx252(
+  return /* @__PURE__ */ jsx253("div", { className: "border-b border-neutral-800/60", children: /* @__PURE__ */ jsxs200("div", { className: "flex items-center justify-between px-2 py-0.5", children: [
+    /* @__PURE__ */ jsxs200("div", { className: "flex items-center gap-0.5", children: [
+      showHistory && /* @__PURE__ */ jsx253(TimelineHistoryButtons, { ...history2 }),
+      /* @__PURE__ */ jsx253(TimelineToolPicker, { showSelectAroundPlayhead }),
+      /* @__PURE__ */ jsx253("div", { "aria-hidden": "true", className: "mx-1 h-4 w-px bg-neutral-800" }),
+      /* @__PURE__ */ jsx253(LinkedSelectionToggle, {}),
+      /* @__PURE__ */ jsx253(Tooltip, { label: timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)", children: /* @__PURE__ */ jsx253(
         "button",
         {
           type: "button",
@@ -99696,14 +99896,14 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
           "aria-label": "Toggle timeline snapping",
           "aria-pressed": timelineSnapEnabled,
           className: timelineSnapEnabled ? flatActive : flatIdle,
-          children: /* @__PURE__ */ jsx252(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx253(Magnet, { size: 16, weight: "bold", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(
         Tooltip,
         {
           label: rippleEditEnabled ? "Ripple on: keeps the main track gapless" : "Ripple off: deleting a main-track clip leaves a gap",
-          children: /* @__PURE__ */ jsx252(
+          children: /* @__PURE__ */ jsx253(
             "button",
             {
               type: "button",
@@ -99711,12 +99911,12 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
               "aria-label": "Toggle ripple edit",
               "aria-pressed": rippleEditEnabled,
               className: rippleEditEnabled ? flatActive : flatIdle,
-              children: /* @__PURE__ */ jsx252(RippleEditIcon, { size: 16 })
+              children: /* @__PURE__ */ jsx253(RippleEditIcon, { size: 16 })
             }
           )
         }
       ),
-      projectHasAudio && /* @__PURE__ */ jsx252(Tooltip, { label: audioMetersVisible ? "Hide audio meters" : "Show audio meters", children: /* @__PURE__ */ jsx252(
+      projectHasAudio && /* @__PURE__ */ jsx253(Tooltip, { label: audioMetersVisible ? "Hide audio meters" : "Show audio meters", children: /* @__PURE__ */ jsx253(
         "button",
         {
           type: "button",
@@ -99724,15 +99924,15 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
           "aria-label": "Toggle audio meters",
           "aria-pressed": audioMetersVisible,
           className: audioMetersVisible ? flatActive : flatIdle,
-          children: /* @__PURE__ */ jsx252(AudioMetersIcon, { size: 16 })
+          children: /* @__PURE__ */ jsx253(AudioMetersIcon, { size: 16 })
         }
       ) }),
-      showKeyframes && /* @__PURE__ */ jsxs199(Fragment70, { children: [
-        /* @__PURE__ */ jsx252(
+      showKeyframes && /* @__PURE__ */ jsxs200(Fragment70, { children: [
+        /* @__PURE__ */ jsx253(
           Tooltip,
           {
             label: keyframePathEndpoint ? "Motion path endpoints cannot be removed" : !onToggleKeyframe ? "Select an animated element to add keyframes" : keyframeIsMotionPath ? keyframeWillExtend ? "Extend motion path to playhead (K)" : keyframeState === "active" ? "Remove waypoint from motion path (K)" : "Add waypoint to motion path (K)" : keyframeState === "active" ? "Remove keyframe at playhead (K)" : keyframeState === "inactive" ? keyframeWillExtend ? "Add keyframe at playhead, extends animation (K)" : "Add keyframe at playhead (K)" : "Add keyframe (K)",
-            children: /* @__PURE__ */ jsx252(
+            children: /* @__PURE__ */ jsx253(
               "button",
               {
                 type: "button",
@@ -99740,7 +99940,7 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
                 onClick: onToggleKeyframe,
                 "aria-label": keyframePathEndpoint ? "Motion path endpoint" : keyframeIsMotionPath ? keyframeState === "active" ? "Remove motion path waypoint" : keyframeWillExtend ? "Extend motion path to playhead" : "Add motion path waypoint" : keyframeState === "active" ? "Remove keyframe at playhead" : "Add keyframe at playhead",
                 className: !onToggleKeyframe ? flatDisabled : `${flatBtn} active:scale-[0.98] hover:bg-hover ${keyframeState === "active" ? "text-accent-ink" : keyframeState === "inactive" ? "text-neutral-400 hover:text-accent-ink" : "text-neutral-600 hover:text-neutral-400"}`,
-                children: /* @__PURE__ */ jsx252("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx252("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx252(
+                children: /* @__PURE__ */ jsx253("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "currentColor", children: keyframeState === "active" ? /* @__PURE__ */ jsx253("path", { d: "M5 0.5L9.5 5L5 9.5L0.5 5Z" }) : /* @__PURE__ */ jsx253(
                   "path",
                   {
                     d: "M5 1.2L8.8 5L5 8.8L1.2 5Z",
@@ -99753,11 +99953,11 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
             )
           }
         ),
-        /* @__PURE__ */ jsx252(
+        /* @__PURE__ */ jsx253(
           Tooltip,
           {
             label: autoKeyframeEnabled ? "Auto-record manual edits as keyframes (click to turn off)" : "Manual edits will not be recorded as keyframes (click to turn on)",
-            children: /* @__PURE__ */ jsx252(
+            children: /* @__PURE__ */ jsx253(
               "button",
               {
                 type: "button",
@@ -99765,9 +99965,9 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
                 "aria-label": "Auto-record manual edits as keyframes",
                 "aria-pressed": autoKeyframeEnabled,
                 className: `${flatBtn} active:scale-[0.98] hover:bg-hover ${autoKeyframeEnabled ? "text-danger-ink" : "text-neutral-600 hover:text-neutral-400"}`,
-                children: /* @__PURE__ */ jsxs199("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
-                  /* @__PURE__ */ jsx252("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsx252(
+                children: /* @__PURE__ */ jsxs200("svg", { width: "16", height: "16", viewBox: "0 0 10 10", fill: "none", children: [
+                  /* @__PURE__ */ jsx253("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx253(
                     "circle",
                     {
                       cx: "5",
@@ -99788,11 +99988,11 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
         const el = selectedElementId ? elements.find((e) => (e.key ?? e.id) === selectedElementId) : null;
         const splittable = el != null && canSplitElement(el);
         const canSplit = splittable && currentTime > el.start && currentTime < el.start + el.duration;
-        return /* @__PURE__ */ jsx252(
+        return /* @__PURE__ */ jsx253(
           Tooltip,
           {
             label: canSplit ? `Split at playhead (${splitShortcut})` : splittable ? "Move the playhead inside the clip to split" : "Select a clip to split",
-            children: /* @__PURE__ */ jsx252(
+            children: /* @__PURE__ */ jsx253(
               "button",
               {
                 type: "button",
@@ -99802,7 +100002,7 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
                   if (canSplit && el) onSplitElement(el, currentTime);
                 },
                 className: canSplit ? flatIdle : flatDisabled,
-                children: /* @__PURE__ */ jsxs199(
+                children: /* @__PURE__ */ jsxs200(
                   "svg",
                   {
                     width: "16",
@@ -99815,8 +100015,8 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
                     strokeLinejoin: "round",
                     "aria-hidden": "true",
                     children: [
-                      /* @__PURE__ */ jsx252("path", { d: "M5 3 L7 3 L7 13 L5 13" }),
-                      /* @__PURE__ */ jsx252("path", { d: "M11 3 L9 3 L9 13 L11 13" })
+                      /* @__PURE__ */ jsx253("path", { d: "M5 3 L7 3 L7 13 L5 13" }),
+                      /* @__PURE__ */ jsx253("path", { d: "M11 3 L9 3 L9 13 L11 13" })
                     ]
                   }
                 )
@@ -99828,11 +100028,11 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
       (() => {
         if (!showAddBeat) return null;
         const canAdd = beatAnalysisReady && canAddBeatAt(currentTime);
-        return /* @__PURE__ */ jsx252(
+        return /* @__PURE__ */ jsx253(
           Tooltip,
           {
             label: !beatAnalysisReady ? "Add a music track with beat analysis to place beats" : canAdd ? "Add beat at playhead" : "A beat already exists at the playhead",
-            children: /* @__PURE__ */ jsx252(
+            children: /* @__PURE__ */ jsx253(
               "button",
               {
                 type: "button",
@@ -99842,7 +100042,7 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
                   if (canAdd) addBeatAtCompositionTime(currentTime);
                 },
                 className: canAdd ? `${flatBtn} text-text-2 hover:bg-hover hover:text-accent-ink active:scale-[0.98]` : flatDisabled,
-                children: /* @__PURE__ */ jsx252("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx252(
+                children: /* @__PURE__ */ jsx253("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx253(
                   "path",
                   {
                     d: "M21 10C21 12.2091 16.9706 14 12 14M21 10C21 7.79086 16.9706 6 12 6C7.02944 6 3 7.79086 3 10M21 10V16C21 18.2091 16.9706 20 12 20M12 14C7.02944 14 3 12.2091 3 10M12 14V20M3 10V16C3 18.2091 7.02944 20 12 20M7 19.3264V13.3264M17 19.3264V13.3264M12 10L20 4",
@@ -99858,13 +100058,13 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
         );
       })()
     ] }),
-    /* @__PURE__ */ jsxs199("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxs200("div", { className: "flex items-center gap-0.5", children: [
       rightActions,
-      /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(
         Tooltip,
         {
           label: thumbnailsVisible ? "Hide thumbnails: labels only" : "Show thumbnails: posters stay visible; richer previews appear on interaction",
-          children: /* @__PURE__ */ jsx252(
+          children: /* @__PURE__ */ jsx253(
             "button",
             {
               type: "button",
@@ -99872,12 +100072,12 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
               "aria-pressed": thumbnailsVisible,
               onClick: () => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive"),
               className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${thumbnailsVisible ? "bg-studio-accent/10 text-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
-              children: /* @__PURE__ */ jsx252(Image3, { size: 16, "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx253(Image3, { size: 16, "aria-hidden": "true" })
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx252(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(Tooltip, { label: "Fit timeline to width", children: /* @__PURE__ */ jsx253(
         "button",
         {
           type: "button",
@@ -99885,20 +100085,20 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
           "aria-label": "Fit timeline to width",
           "aria-pressed": zoomMode === "fit",
           className: `h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${zoomMode === "fit" ? "bg-studio-accent/10 text-accent-ink" : "text-neutral-400 hover:bg-hover hover:text-neutral-200"}`,
-          children: /* @__PURE__ */ jsx252(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx253(ArrowsOutLineHorizontal, { size: 16, "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx252(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(Tooltip, { label: "Zoom out", children: /* @__PURE__ */ jsx253(
         "button",
         {
           type: "button",
           "aria-label": "Zoom out",
           onClick: () => zoomTimelineStep("out"),
           className: flatIdle,
-          children: /* @__PURE__ */ jsx252(MagnifyingGlassMinus, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx253(MagnifyingGlassMinus, { size: 16, "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(
         "input",
         {
           type: "range",
@@ -99913,17 +100113,17 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
           className: "mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-text-0 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
         }
       ),
-      /* @__PURE__ */ jsx252(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(Tooltip, { label: "Zoom in", children: /* @__PURE__ */ jsx253(
         "button",
         {
           type: "button",
           "aria-label": "Zoom in",
           onClick: () => zoomTimelineStep("in"),
           className: flatIdle,
-          children: /* @__PURE__ */ jsx252(MagnifyingGlassPlus, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx253(MagnifyingGlassPlus, { size: 16, "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(
         "span",
         {
           className: "ml-1 w-[38px] text-right font-mono text-[11px] tabular-nums text-neutral-500 select-none",
@@ -99936,23 +100136,23 @@ var TimelineToolbar = memo62(function TimelineToolbar2({
 });
 
 // src/components/StudioSplash.tsx
-import { jsx as jsx253, jsxs as jsxs200 } from "react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs201 } from "react/jsx-runtime";
 function StudioSplash({ waiting }) {
-  return /* @__PURE__ */ jsx253("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs200("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx253("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsxs200("p", { className: "text-xs text-neutral-600", children: [
+  return /* @__PURE__ */ jsx254("div", { className: "h-full w-full bg-neutral-950 flex items-center justify-center", children: waiting ? /* @__PURE__ */ jsxs201("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx254("div", { className: "w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsxs201("p", { className: "text-xs text-neutral-600", children: [
       "Waiting for preview server\u2026 run",
       " ",
-      /* @__PURE__ */ jsx253("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
+      /* @__PURE__ */ jsx254("code", { className: "text-neutral-500 font-mono", children: "npm run dev" })
     ] })
-  ] }) : /* @__PURE__ */ jsxs200("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
-    /* @__PURE__ */ jsx253("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
-    /* @__PURE__ */ jsx253("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
+  ] }) : /* @__PURE__ */ jsxs201("div", { className: "flex flex-col items-center gap-3 text-center px-6", role: "status", children: [
+    /* @__PURE__ */ jsx254("div", { className: "w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" }),
+    /* @__PURE__ */ jsx254("p", { className: "text-xs text-neutral-600", children: "Connecting to project\u2026" })
   ] }) });
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect157, useState as useState162 } from "react";
+import { useEffect as useEffect158, useState as useState163 } from "react";
 async function resolveHashProject(id) {
   try {
     const res = await studioApiFetch(`/api/projects/${encodeURIComponent(id)}`);
@@ -99982,9 +100182,9 @@ function reportHashVerdict(stage, verdict) {
   });
 }
 function useServerConnection() {
-  const [projectId, setProjectId] = useState162(null);
-  const [resolving, setResolving] = useState162(true);
-  const [waitingForServer, setWaitingForServer] = useState162(false);
+  const [projectId, setProjectId] = useState163(null);
+  const [resolving, setResolving] = useState163(true);
+  const [waitingForServer, setWaitingForServer] = useState163(false);
   useMountEffect(() => {
     const hashProjectId = parseProjectIdFromHash(window.location.hash);
     let cancelled = false;
@@ -100026,7 +100226,7 @@ function useServerConnection() {
       if (retryTimer !== null) clearTimeout(retryTimer);
     };
   });
-  useEffect157(() => {
+  useEffect158(() => {
     const onHashChange = () => {
       const next = parseProjectIdFromHash(window.location.hash);
       if (!next || next === projectId) return;
@@ -100052,9 +100252,9 @@ function useServerConnection() {
 }
 
 // src/hooks/useStudioSessionStart.ts
-import { useEffect as useEffect158 } from "react";
+import { useEffect as useEffect159 } from "react";
 function useStudioSessionStart(projectId, resolving, waitingForServer) {
-  useEffect158(() => {
+  useEffect159(() => {
     if (resolving || waitingForServer || hasFiredSessionStart()) return;
     markSessionStartFired();
     trackStudioSessionStart({ has_project: projectId != null });
@@ -100062,13 +100262,13 @@ function useStudioSessionStart(projectId, resolving, waitingForServer) {
 }
 
 // src/hooks/useTimelineAddAtPlayhead.ts
-import { useCallback as useCallback192 } from "react";
+import { useCallback as useCallback193 } from "react";
 function useTimelineAddAtPlayhead(addAsset, addComposition, projectId) {
   const placement = () => ({ start: usePlayerStore.getState().currentTime, track: 0 });
   return useStableHandlers(
     {
-      addAssetAtPlayhead: useCallback192((path) => addAsset(path, placement()), [addAsset]),
-      addCompositionAtPlayhead: useCallback192(
+      addAssetAtPlayhead: useCallback193((path) => addAsset(path, placement()), [addAsset]),
+      addCompositionAtPlayhead: useCallback193(
         (path) => addComposition(path, placement()),
         [addComposition]
       )
@@ -100078,10 +100278,10 @@ function useTimelineAddAtPlayhead(addAsset, addComposition, projectId) {
 }
 
 // src/hooks/useActiveComposition.ts
-import { useState as useState163 } from "react";
+import { useState as useState164 } from "react";
 
 // src/hooks/useHydrateActiveCompPathFromUrl.ts
-import { useEffect as useEffect159 } from "react";
+import { useEffect as useEffect160 } from "react";
 function useHydrateActiveCompPathFromUrl({
   hydrated,
   fileTreeLoaded,
@@ -100090,7 +100290,7 @@ function useHydrateActiveCompPathFromUrl({
   setActiveCompPath,
   setHydrated
 }) {
-  useEffect159(() => {
+  useEffect160(() => {
     if (hydrated) return;
     if (!fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
@@ -100103,7 +100303,7 @@ function useHydrateActiveCompPathFromUrl({
 }
 
 // src/hooks/useAutoOpenRootComposition.ts
-import { useEffect as useEffect160, useRef as useRef187 } from "react";
+import { useEffect as useEffect161, useRef as useRef188 } from "react";
 function useAutoOpenRootComposition({
   projectId,
   activeCompPath,
@@ -100111,8 +100311,8 @@ function useAutoOpenRootComposition({
   masterCompPath,
   onSelectComposition
 }) {
-  const settledForProjectRef = useRef187(void 0);
-  useEffect160(() => {
+  const settledForProjectRef = useRef188(void 0);
+  useEffect161(() => {
     if (settledForProjectRef.current === projectId) return;
     if (!activeCompPathHydrated) return;
     if (activeCompPath !== null) {
@@ -100126,14 +100326,14 @@ function useAutoOpenRootComposition({
 }
 
 // src/hooks/useCompositionContentLoader.ts
-import { useCallback as useCallback193 } from "react";
+import { useCallback as useCallback194 } from "react";
 function useCompositionContentLoader({
   projectId,
   setEditingFile,
   setActiveCompPath,
   showToast
 }) {
-  return useCallback193(
+  return useCallback194(
     (comp) => {
       if (!projectId) return;
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
@@ -100153,14 +100353,14 @@ function useCompositionContentLoader({
 }
 
 // src/hooks/useResetSelectionOnProjectSwitch.ts
-import { useRef as useRef188 } from "react";
+import { useRef as useRef189 } from "react";
 function useResetSelectionOnProjectSwitch({
   projectId,
   initialUrlStateRef,
   setActiveCompPath,
   setActiveCompPathHydrated
 }) {
-  const previousProjectIdRef = useRef188(projectId);
+  const previousProjectIdRef = useRef189(projectId);
   if (previousProjectIdRef.current !== projectId) {
     const isSwitch = previousProjectIdRef.current !== null;
     previousProjectIdRef.current = projectId;
@@ -100182,8 +100382,8 @@ function useActiveComposition({
   setEditingFile,
   showToast
 }) {
-  const [activeCompPath, setActiveCompPath] = useState163(null);
-  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState163(
+  const [activeCompPath, setActiveCompPath] = useState164(null);
+  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState164(
     () => isHydratedFromUrlState(initialUrlStateRef.current)
   );
   useResetSelectionOnProjectSwitch({
@@ -100217,19 +100417,19 @@ function useActiveComposition({
 }
 
 // src/App.tsx
-import { jsx as jsx254, jsxs as jsxs201 } from "react/jsx-runtime";
+import { jsx as jsx255, jsxs as jsxs202 } from "react/jsx-runtime";
 var getTimelineSelectionSet = () => usePlayerStore.getState().selectedElementIds;
 function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const { projectId, resolving, waitingForServer } = useServerConnection();
-  const initialUrlStateRef = useRef189(readStudioUrlStateFromWindow());
+  const initialUrlStateRef = useRef190(readStudioUrlStateFromWindow());
   useStudioSessionStart(projectId, resolving, waitingForServer);
-  const [compIdToSrc, setCompIdToSrc] = useState164(/* @__PURE__ */ new Map());
+  const [compIdToSrc, setCompIdToSrc] = useState165(/* @__PURE__ */ new Map());
   const previewIframe = useOwnPreviewIframe();
-  const [compositionLoading, setCompositionLoading] = useState164(true);
-  const [refreshKey, setRefreshKeyState] = useState164(0);
+  const [compositionLoading, setCompositionLoading] = useState165(true);
+  const [refreshKey, setRefreshKeyState] = useState165(0);
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
-  const [blockPreview, setBlockPreview] = useState164(null);
-  const previewIframeRef = useRef189(null);
+  const [blockPreview, setBlockPreview] = useState165(null);
+  const previewIframeRef = useRef190(null);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
   const captionSync = useCaptionSync(projectId);
@@ -100248,14 +100448,14 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = useStableHandlers(usePersistentEditHistory({ projectId }), projectId);
-  const handleDomZIndexReorderCommitRef = useRef189(null);
-  const pendingTimelineEditPathRef = useRef189(/* @__PURE__ */ new Set());
-  const isGestureRecordingRef = useRef189(false);
-  const setRefreshKey = useCallback194((next) => {
+  const handleDomZIndexReorderCommitRef = useRef190(null);
+  const pendingTimelineEditPathRef = useRef190(/* @__PURE__ */ new Set());
+  const isGestureRecordingRef = useRef190(false);
+  const setRefreshKey = useCallback195((next) => {
     requestPreviewReload();
     setRefreshKeyState(next);
   }, []);
-  const reloadPreview = useCallback194(() => setRefreshKey((k) => k + 1), [setRefreshKey]);
+  const reloadPreview = useCallback195(() => setRefreshKey((k) => k + 1), [setRefreshKey]);
   const fileManagerResult = useFileManager({
     projectId,
     showToast,
@@ -100263,7 +100463,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     setRefreshKey
   });
   const fileManager = useStableHandlers(fileManagerResult, projectId);
-  const masterCompPath = useMemo89(
+  const masterCompPath = useMemo90(
     () => resolveMasterCompositionPath(fileManager.compositions),
     [fileManager.compositions]
   );
@@ -100284,7 +100484,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     fileManager.fileTreeLoaded,
     fileManager.refreshFileTree
   );
-  const activeCompPathRef = useRef189(activeCompPath);
+  const activeCompPathRef = useRef190(activeCompPath);
   activeCompPathRef.current = activeCompPath;
   const renderQueue = useStableHandlers(useRenderQueue(projectId, activeCompPathRef), projectId);
   const previewPersistenceResult = usePreviewPersistence({
@@ -100307,9 +100507,9 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     reloadPreview,
     onOutsideChange: editHistory.noteOutsideChange
   });
-  const invalidateGsapCacheRef = useRef189(() => {
+  const invalidateGsapCacheRef = useRef190(() => {
   });
-  const invalidateGsapCache = useCallback194(() => invalidateGsapCacheRef.current(), []);
+  const invalidateGsapCache = useCallback195(() => invalidateGsapCacheRef.current(), []);
   const timelineEditing = useTimelineEditing({
     projectId,
     activeCompPath,
@@ -100365,20 +100565,20 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     handleAddMediaOverlay,
     handlePreviewBlockDrop
   } = useStableHandlers(blockHandlersResult, projectId);
-  const dismissBlockParams = useCallback194(() => setActiveBlockParams(null), [setActiveBlockParams]);
+  const dismissBlockParams = useCallback195(() => setActiveBlockParams(null), [setActiveBlockParams]);
   const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
-  const layout = useMemo89(
+  const layout = useMemo90(
     () => ({ ...panelLayout, setRightPanelTab }),
     [panelLayout, setRightPanelTab]
   );
-  const clearDomSelectionRef = useRef189(() => {
+  const clearDomSelectionRef = useRef190(() => {
   });
-  const domEditSelectionBridgeRef = useRef189(null);
-  const handleDomEditElementDeleteRef = useRef189(async () => {
+  const domEditSelectionBridgeRef = useRef190(null);
+  const handleDomEditElementDeleteRef = useRef190(async () => {
   });
   const domEditDeleteBridge = (s, o) => handleDomEditElementDeleteRef.current(s, o);
-  const resetKeyframesRef = useRef189(() => false);
-  const deleteSelectedKeyframesRef = useRef189(() => {
+  const resetKeyframesRef = useRef190(() => false);
+  const deleteSelectedKeyframesRef = useRef190(() => {
   });
   const { handleCopy: handleCopy2, handlePaste: handlePaste2, handleCut, handleDuplicate, canPaste } = useClipboard({
     projectId,
@@ -100508,9 +100708,9 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const frameCapture = useStableHandlers(frameCaptureResult, projectId);
   const { consoleErrors, setConsoleErrors } = useConsoleErrorCapture(previewIframe);
   const fileDrop = useGlobalFileDrop(timelineEditing.handleTimelineFileDrop);
-  const handleToggleRecordingRef = useRef189(() => {
+  const handleToggleRecordingRef = useRef190(() => {
   });
-  const domEditSessionRef = useRef189(domEditSession);
+  const domEditSessionRef = useRef190(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     projectId,
@@ -100526,7 +100726,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     previewIframe,
     compositionDimensions
   );
-  const handlePreviewIframeRef = useCallback194(
+  const handlePreviewIframeRef = useCallback195(
     (iframe) => {
       previewIframeRef.current = iframe;
       usePreviewIframeStore.getState().setIframe(iframe);
@@ -100587,8 +100787,8 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo89(
-    () => /* @__PURE__ */ jsx254(
+  const timelineToolbar = useMemo90(
+    () => /* @__PURE__ */ jsx255(
       TimelineToolbar,
       {
         domEditSession: toolbarSession,
@@ -100597,10 +100797,10 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     ),
     [toolbarSession, timelineEditing.handleTimelineElementSplit]
   );
-  const handleExport = useCallback194(() => {
+  const handleExport = useCallback195(() => {
     void previewPersistence.waitForPendingDomEditSaves().then(() => renderQueue.startRender(void 0));
   }, [previewPersistence, renderQueue]);
-  const clearConsoleErrors = useCallback194(() => setConsoleErrors(null), [setConsoleErrors]);
+  const clearConsoleErrors = useCallback195(() => setConsoleErrors(null), [setConsoleErrors]);
   const panels = useStudioSidePanels(
     {
       onSelectComposition: handleSelectComposition,
@@ -100636,15 +100836,15 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     projectId
   );
   if (resolving || waitingForServer || !projectId)
-    return /* @__PURE__ */ jsx254(StudioSplash, { waiting: waitingForServer });
-  return /* @__PURE__ */ jsx254(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx254(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx254(PanelLayoutProvider, { value: layout, children: /* @__PURE__ */ jsx254(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx254(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs201(
+    return /* @__PURE__ */ jsx255(StudioSplash, { waiting: waitingForServer });
+  return /* @__PURE__ */ jsx255(StudioShellProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx255(StudioPlaybackProvider, { value: studioCtxValue, children: /* @__PURE__ */ jsx255(PanelLayoutProvider, { value: layout, children: /* @__PURE__ */ jsx255(FileManagerProvider, { value: fileManager, children: /* @__PURE__ */ jsx255(DomEditProvider, { value: domEditSession, children: /* @__PURE__ */ jsxs202(
     "div",
     {
       className: "flex flex-col h-full w-full bg-neutral-950 relative",
       onDragOver: fileDrop.onDragOver,
       onDrop: fileDrop.onDrop,
       children: [
-        /* @__PURE__ */ jsx254(
+        /* @__PURE__ */ jsx255(
           StudioHeader,
           {
             captureFrameHref: frameCapture.captureFrameHref,
@@ -100657,17 +100857,17 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             onExport: handleExport
           }
         ),
-        previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && /* @__PURE__ */ jsx254(
+        previewPersistence.domEditSaveQueuePaused && !externalFileChanges.blocked && /* @__PURE__ */ jsx255(
           SaveQueuePausedBanner,
           {
             message: previewPersistence.domEditSaveQueuePaused,
             onRetry: previewPersistence.resetDomEditSaveQueueBreaker
           }
         ),
-        /* @__PURE__ */ jsx254(ExternalFileConflictBanner, { coordinator: externalFileChanges }),
-        sdkHandle.unreachableProject && /* @__PURE__ */ jsx254(ProjectUnreachableBanner, { projectId: sdkHandle.unreachableProject }),
-        sdkHandle.compositionMissing && activeCompPath && /* @__PURE__ */ jsx254(CompositionMissingBanner, { path: activeCompPath }),
-        /* @__PURE__ */ jsx254(
+        /* @__PURE__ */ jsx255(ExternalFileConflictBanner, { coordinator: externalFileChanges }),
+        sdkHandle.unreachableProject && /* @__PURE__ */ jsx255(ProjectUnreachableBanner, { projectId: sdkHandle.unreachableProject }),
+        sdkHandle.compositionMissing && activeCompPath && /* @__PURE__ */ jsx255(CompositionMissingBanner, { path: activeCompPath }),
+        /* @__PURE__ */ jsx255(
           EditorShell,
           {
             readOnlyPreview,
@@ -100711,7 +100911,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
             gestureOverlay
           }
         ),
-        /* @__PURE__ */ jsx254(
+        /* @__PURE__ */ jsx255(
           StudioOverlays,
           {
             projectId,
@@ -100732,35 +100932,35 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState165, useCallback as useCallback195, useRef as useRef190 } from "react";
+import { useState as useState166, useCallback as useCallback196, useRef as useRef191 } from "react";
 function useElementPicker(iframeRef, options) {
-  const [isPickMode, setIsPickMode] = useState165(false);
-  const [pickedElement, setPickedElement] = useState165(null);
-  const activeOverrideRef = useRef190(null);
-  const getActiveIframe = useCallback195(() => {
+  const [isPickMode, setIsPickMode] = useState166(false);
+  const [pickedElement, setPickedElement] = useState166(null);
+  const activeOverrideRef = useRef191(null);
+  const getActiveIframe = useCallback196(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
-  const setActiveIframe = useCallback195((el) => {
+  const setActiveIframe = useCallback196((el) => {
     activeOverrideRef.current = el;
   }, []);
-  const enablePick = useCallback195(() => {
+  const enablePick = useCallback196(() => {
     try {
       postRuntimeControlMessage(getActiveIframe()?.contentWindow, "enable-pick-mode");
       setIsPickMode(true);
     } catch {
     }
   }, [getActiveIframe]);
-  const disablePick = useCallback195(() => {
+  const disablePick = useCallback196(() => {
     try {
       postRuntimeControlMessage(getActiveIframe()?.contentWindow, "disable-pick-mode");
     } catch {
     }
     setIsPickMode(false);
   }, [getActiveIframe]);
-  const clearPick = useCallback195(() => {
+  const clearPick = useCallback196(() => {
     setPickedElement(null);
   }, []);
-  const windowsThatWerePrimary = useRef190(/* @__PURE__ */ new WeakSet());
+  const windowsThatWerePrimary = useRef191(/* @__PURE__ */ new WeakSet());
   useMountEffect(() => {
     const handleMessage = (e) => {
       const data = e.data;
@@ -100787,11 +100987,11 @@ function useElementPicker(iframeRef, options) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   });
-  const optionsRef = useRef190(options);
+  const optionsRef = useRef191(options);
   optionsRef.current = options;
-  const pendingWritesRef = useRef190(/* @__PURE__ */ new Map());
+  const pendingWritesRef = useRef191(/* @__PURE__ */ new Map());
   settlePendingWrites(pendingWritesRef.current, options?.workspaceFiles);
-  const syncToSource = useCallback195(
+  const syncToSource = useCallback196(
     (picked, live, iframe, op) => {
       const opts = optionsRef.current;
       if (!opts?.workspaceFiles || !opts.onSyncFiles) return;
@@ -100805,7 +101005,7 @@ function useElementPicker(iframeRef, options) {
     },
     []
   );
-  const setStyle = useCallback195(
+  const setStyle = useCallback196(
     (prop, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -100831,7 +101031,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setDataAttr = useCallback195(
+  const setDataAttr = useCallback196(
     (attr, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -100857,7 +101057,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setTextContent = useCallback195(
+  const setTextContent = useCallback196(
     (text) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -100878,7 +101078,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const activeIframeRef = useRef190(null);
+  const activeIframeRef = useRef191(null);
   activeIframeRef.current = getActiveIframe();
   return {
     isPickMode,
@@ -101096,7 +101296,7 @@ function findElementBlock(html2, elementId2) {
 }
 
 // src/hooks/useDomStyleCommit.ts
-import { useCallback as useCallback196, useMemo as useMemo90, useRef as useRef191, useState as useState166 } from "react";
+import { useCallback as useCallback197, useMemo as useMemo91, useRef as useRef192, useState as useState167 } from "react";
 var noop = () => {
 };
 function useDomStyleCommit({
@@ -101107,12 +101307,12 @@ function useDomStyleCommit({
   activeCompPath = null,
   showToast = noop
 }) {
-  const projectIdRef = useRef191(projectId);
+  const projectIdRef = useRef192(projectId);
   projectIdRef.current = projectId;
-  const [queue2] = useState166(createDomEditSaveQueue);
+  const [queue2] = useState167(createDomEditSaveQueue);
   useMountEffect(() => () => queue2.destroy());
-  const versions = useRef191(/* @__PURE__ */ new Map()).current;
-  const editHistory = useMemo90(() => ({ recordEdit }), [recordEdit]);
+  const versions = useRef192(/* @__PURE__ */ new Map()).current;
+  const editHistory = useMemo91(() => ({ recordEdit }), [recordEdit]);
   const persistDomEditOperations = useDomEditPersist({
     activeCompPath,
     previewIframeRef: iframeRef,
@@ -101123,7 +101323,7 @@ function useDomStyleCommit({
     projectIdRef,
     reloadPreview: noop
   });
-  const commitStyle = useCallback196(
+  const commitStyle = useCallback197(
     (selection, styles) => {
       queue2.reset();
       return projectIdRef.current ? commitDomStyles(
@@ -101144,7 +101344,7 @@ function useDomStyleCommit({
 }
 
 // src/hooks/useDomGeometryCommit.ts
-import { useCallback as useCallback197, useMemo as useMemo91, useRef as useRef192, useState as useState167 } from "react";
+import { useCallback as useCallback198, useMemo as useMemo92, useRef as useRef193, useState as useState168 } from "react";
 var noop2 = () => {
 };
 var NO_SELECTED_ANIMATIONS = [];
@@ -101157,10 +101357,10 @@ function useDomGeometryCommit({
   showToast = noop2,
   reloadPreview
 }) {
-  const projectIdRef = useRef192(projectId);
+  const projectIdRef = useRef193(projectId);
   projectIdRef.current = projectId;
-  const pending2 = useRef192(/* @__PURE__ */ new Set()).current;
-  const editHistory = useMemo91(() => ({ recordEdit }), [recordEdit]);
+  const pending2 = useRef193(/* @__PURE__ */ new Set()).current;
+  const editHistory = useMemo92(() => ({ recordEdit }), [recordEdit]);
   const { bump: bumpGsapCache } = useGsapCacheVersion();
   const gsap3 = useGsapScriptCommits({
     projectIdRef,
@@ -101172,7 +101372,7 @@ function useDomGeometryCommit({
     showToast,
     writeProjectFile
   });
-  const [queue2] = useState167(createDomEditSaveQueue);
+  const [queue2] = useState168(createDomEditSaveQueue);
   useMountEffect(() => () => queue2.destroy());
   const persistDomEditOperations = useDomEditPersist({
     activeCompPath,
@@ -101189,7 +101389,7 @@ function useDomGeometryCommit({
     persistDomEditOperations,
     showToast
   });
-  const commitWithFreshQueue = useCallback197(
+  const commitWithFreshQueue = useCallback198(
     (...args) => {
       queue2.reset();
       return commitPositionPatchToHtml(...args);
@@ -101228,7 +101428,7 @@ function useDomGeometryCommit({
     setArcPath: gsap3.setArcPath,
     updateArcSegment: gsap3.updateArcSegment
   });
-  const saved2 = useCallback197(
+  const saved2 = useCallback198(
     async (commit2, restore2 = noop2) => {
       const refusal2 = !projectIdRef.current ? "No project is open" : !isPreviewBooted(projectIdRef.current) ? "The preview for this project has not loaded yet" : null;
       if (refusal2) {
@@ -101246,7 +101446,7 @@ function useDomGeometryCommit({
     },
     [pending2, showToast]
   );
-  return useMemo91(
+  return useMemo92(
     () => ({
       commitPathOffset: (selection, next, modifiers) => saved2(() => handleGsapAwarePathOffsetCommit(selection, next, modifiers)),
       commitGroupPathOffset: (updates) => saved2(() => handleGsapAwareGroupPathOffsetCommit(updates)),