@hyperframes/studio 0.8.19 → 0.8.21

package/dist/index.js

@@ -1618,7 +1618,8 @@ function createTimelineResetState() {
     beatPersist: null,
     clipManifest: null,
     clipParentMap: /* @__PURE__ */ new Map(),
-    domClipChildren: []
+    domClipChildren: [],
+    subCompositionHostState: /* @__PURE__ */ new Map()
   };
 }
 var usePlayerStore = create2((set, get) => ({
@@ -1744,6 +1745,8 @@ var usePlayerStore = create2((set, get) => ({
   setClipParentMap: (map) => set({ clipParentMap: map }),
   domClipChildren: [],
   setDomClipChildren: (children) => set({ domClipChildren: children }),
+  subCompositionHostState: /* @__PURE__ */ new Map(),
+  setSubCompositionHostState: (state) => set({ subCompositionHostState: state }),
   setIsPlaying: (playing) => {
     if (get().isPlaying === playing) return;
     set({ isPlaying: playing });
@@ -4352,22 +4355,12 @@ function childGroupState(flat, domChild) {
     audioGroupAutomation: source.audioGroupAutomation
   };
 }
-function hostElementState(flat) {
-  if (!flat) return {};
-  return {
-    hidden: flat.hidden,
-    timelineLocked: flat.timelineLocked,
-    timelineRole: flat.timelineRole,
-    // Same reason as the three above: these are read off the host element, which
-    // an expanded child is built without. Missing them, an audio child inside a
-    // sub-composition reserved no automation height and drew no lanes, while the
-    // property panel — reading the live DOM selection rather than this row —
-    // still showed the chain and its toggles.
-    fxChain: flat.fxChain,
-    automation: flat.automation
-  };
-}
-function buildChildElements(siblings, display2, editBasis, expandedHostKey, elements, domChildrenById) {
+function hostElementState(flat, live) {
+  if (!flat) return { ...live };
+  const { hidden, timelineLocked, timelineRole, fxChain, automation } = flat;
+  return { hidden, timelineLocked, timelineRole, fxChain, automation, ...live };
+}
+function buildChildElements(siblings, display2, editBasis, expandedHostKey, elements, domChildrenById, hostStateById) {
   const result = [];
   for (const child of siblings) {
     const clamped = clampChildToParent(child, display2.start, display2.end);
@@ -4388,7 +4381,10 @@ function buildChildElements(siblings, display2, editBasis, expandedHostKey, elem
     });
     result.push({
       ...base2,
-      ...hostElementState(elements.find((element) => element.key === key2)),
+      ...hostElementState(
+        elements.find((element) => element.key === key2),
+        domId ? hostStateById.get(domId) : void 0
+      ),
       ...childGroupState(
         elements.find((element) => element.key === key2),
         domId ? domChildrenById.get(domId) : void 0
@@ -4448,7 +4444,7 @@ function domSiblingClips(domClipChildren, siblingParentId, host) {
     })
   );
 }
-function buildExpandedElements(elements, manifest, parentMap, topLevelId, siblingParentId, domClipChildren = []) {
+function buildExpandedElements(elements, manifest, parentMap, topLevelId, siblingParentId, domClipChildren = [], subCompositionHostState = /* @__PURE__ */ new Map()) {
   const topLevelElement = elements.find((el) => el.id === topLevelId || el.domId === topLevelId);
   if (!topLevelElement) return filterToTopLevel(elements, parentMap);
   const parentHost = manifest.find((c) => c.id === siblingParentId);
@@ -4476,7 +4472,8 @@ function buildExpandedElements(elements, manifest, parentMap, topLevelId, siblin
     editBasis,
     parentKey,
     elements,
-    domChildrenById
+    domChildrenById,
+    subCompositionHostState
   );
   if (expanded.length === 0) return filterToTopLevel(elements, parentMap);
   const drillPath = /* @__PURE__ */ new Set();
@@ -4496,6 +4493,7 @@ function useExpandedTimelineElements() {
   const clipManifest = usePlayerStore((s) => s.clipManifest);
   const clipParentMap = usePlayerStore((s) => s.clipParentMap);
   const domClipChildren = usePlayerStore((s) => s.domClipChildren);
+  const subCompositionHostState = usePlayerStore((s) => s.subCompositionHostState);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { rawId, selectedRawId } = useMemo3(() => {
@@ -4526,9 +4524,18 @@ function useExpandedTimelineElements() {
       clipParentMap,
       topLevel,
       immediateParent,
-      domClipChildren
+      domClipChildren,
+      subCompositionHostState
     );
-  }, [elements, clipManifest, clipParentMap, domClipChildren, rawId, selectedRawId]);
+  }, [
+    elements,
+    clipManifest,
+    clipParentMap,
+    domClipChildren,
+    subCompositionHostState,
+    rawId,
+    selectedRawId
+  ]);
 }
 
 // src/player/components/timelineTheme.ts
@@ -16306,6 +16313,9 @@ function buildStudioSaveFailureProperties(input) {
 function trackStudioSaveFailure(input) {
   trackStudioEvent("save_failure", buildStudioSaveFailureProperties(input));
 }
+function trackStudioEditBlocked(input) {
+  trackStudioEvent("edit_blocked", buildStudioSaveFailureProperties(input));
+}
 async function createStudioSaveHttpError(response, fallbackMessage, options = {}) {
   let body = "";
   try {
@@ -16693,7 +16703,16 @@ async function studioExpectedFileVersion(versions, path, expectedContent) {
   return versions.get(path);
 }
 function createStudioWriteToken() {
-  return globalThis.crypto.randomUUID();
+  const webCrypto = globalThis.crypto;
+  if (typeof webCrypto?.randomUUID === "function") return webCrypto.randomUUID();
+  if (typeof webCrypto?.getRandomValues !== "function") {
+    throw new Error("Web Crypto getRandomValues is required for Studio write identity");
+  }
+  const bytes = webCrypto.getRandomValues(new Uint8Array(16));
+  bytes[6] = bytes[6] & 15 | 64;
+  bytes[8] = bytes[8] & 63 | 128;
+  const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
 }
 function studioWriteHeaders() {
   const token = createStudioWriteToken();
@@ -21192,6 +21211,7 @@ function StudioShellProvider({
     showToast,
     previewIframeRef,
     editHistory,
+    writeBlockedReason,
     handleUndo,
     handleRedo,
     renderQueue,
@@ -21207,6 +21227,7 @@ function StudioShellProvider({
       showToast,
       previewIframeRef,
       editHistory,
+      writeBlockedReason,
       handleUndo,
       handleRedo,
       renderQueue,
@@ -21223,6 +21244,7 @@ function StudioShellProvider({
       setActiveCompPath,
       showToast,
       previewIframeRef,
+      writeBlockedReason,
       handleUndo,
       handleRedo,
       waitForPendingDomEditSaves,
@@ -24831,6 +24853,32 @@ function collectSubCompositionDomChildren(iframeDoc, clips, parentMap) {
   }
   return out;
 }
+function readSubCompositionHostState(el) {
+  const state = {};
+  if (el.hasAttribute("data-hidden")) state.hidden = true;
+  if (el.hasAttribute("data-timeline-locked")) state.timelineLocked = true;
+  const timelineRole = el.getAttribute("data-timeline-role");
+  if (timelineRole) state.timelineRole = timelineRole;
+  const fxChain = el.getAttribute("data-fx-chain");
+  if (fxChain) state.fxChain = fxChain;
+  const automation = el.getAttribute("data-automation");
+  if (automation) state.automation = automation;
+  return Object.keys(state).length > 0 ? state : null;
+}
+function collectSubCompositionHostState(iframeDoc, clips) {
+  const out = /* @__PURE__ */ new Map();
+  if (!iframeDoc) return out;
+  for (const clip of clips) {
+    if (clip.kind !== "composition" || !clip.id) continue;
+    const hostEl = iframeDoc.getElementById(clip.id);
+    if (!hostEl) continue;
+    for (const el of Array.from(hostEl.querySelectorAll("[id]"))) {
+      const state = readSubCompositionHostState(el);
+      if (state) out.set(el.id, state);
+    }
+  }
+  return out;
+}
 function safeContentDocument(iframe) {
   try {
     return iframe?.contentDocument ?? null;
@@ -24988,6 +25036,7 @@ function useTimelineSyncCallbacks({
         const domClipChildren = collectSubCompositionDomChildren(iframeDoc, data.clips, parentMap);
         usePlayerStore.getState().setClipParentMap(parentMap);
         usePlayerStore.getState().setDomClipChildren(domClipChildren);
+        usePlayerStore.getState().setSubCompositionHostState(collectSubCompositionHostState(iframeDoc, data.clips));
       } catch {
       }
       const els = buildTimelineElementsFromClips(filtered, iframeDoc);
@@ -40572,7 +40621,7 @@ function useTimelineSelectionPreviewSync({
 }
 
 // src/webmcp/StudioAgentTools.tsx
-import { useCallback as useCallback60 } from "react";
+import { useCallback as useCallback60, useMemo as useMemo37 } from "react";
 
 // src/webmcp/useStudioAgentTools.ts
 import { useEffect as useEffect49, useRef as useRef68 } from "react";
@@ -40719,6 +40768,43 @@ function patchTargetAddress(target) {
     selectorIndex: target.selectorIndex
   };
 }
+function parseElementHandle(handle) {
+  const separatorAt = handle.indexOf(SEPARATOR);
+  if (separatorAt <= 0) return null;
+  const scheme = handle.slice(0, separatorAt);
+  const rest = handle.slice(separatorAt + 1);
+  if (!rest) return null;
+  if (scheme === "hf" || scheme === "dom") return { scheme, value: rest, index: 0 };
+  if (scheme !== "sel") return null;
+  const indexAt = rest.lastIndexOf(INDEX_SEPARATOR);
+  if (indexAt <= 0) return { scheme, value: rest, index: 0 };
+  const index = Number(rest.slice(indexAt + 1));
+  if (!Number.isInteger(index) || index < 0) return { scheme, value: rest, index: 0 };
+  return { scheme, value: rest.slice(0, indexAt), index };
+}
+function resolveElementHandle(doc, handle) {
+  const parsed = parseElementHandle(handle);
+  if (!parsed) return null;
+  if (parsed.scheme === "dom") return asHtmlElement(doc, doc.getElementById(parsed.value));
+  if (parsed.scheme === "hf") {
+    return asHtmlElement(doc, doc.querySelector(`[data-hf-id="${cssEscape(parsed.value)}"]`));
+  }
+  let matches;
+  try {
+    matches = doc.querySelectorAll(parsed.value);
+  } catch {
+    return null;
+  }
+  return asHtmlElement(doc, matches.item(parsed.index));
+}
+function cssEscape(value) {
+  return typeof CSS?.escape === "function" ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+}
+function asHtmlElement(doc, node) {
+  if (!node) return null;
+  const ctor = doc.defaultView?.HTMLElement;
+  return ctor && node instanceof ctor ? node : null;
+}
 
 // src/webmcp/tools/lookTools.ts
 var DEFAULT_LIMIT = 200;
@@ -40804,6 +40890,744 @@ var STUDIO_LOOK_DESCRIPTION = [
   "you did not do, a human pressed undo and your earlier edits are gone."
 ].join(" ");
 
+// src/webmcp/tools/selectionTools.ts
+async function studioSelect(deps, handle) {
+  if (typeof handle !== "string" || !handle.trim()) {
+    return toolFailure("invalid", "handle must be a non-empty string", "Call studio_look first.");
+  }
+  const doc = deps.getPreviewDocument();
+  if (!doc) {
+    return toolFailure(
+      "blocked",
+      "the preview is not mounted yet",
+      "Wait for the composition to load, then retry."
+    );
+  }
+  const element = resolveElementHandle(doc, handle);
+  if (!element) {
+    return toolFailure(
+      "invalid",
+      `no element matches handle ${handle}`,
+      "The composition may have changed. Call studio_look for current handles."
+    );
+  }
+  const selection = await deps.buildSelection(element);
+  if (!selection) {
+    return toolFailure(
+      "blocked",
+      `${handle} resolved to an element Studio cannot select`,
+      "Try a parent or child element from studio_look."
+    );
+  }
+  deps.applySelection(selection);
+  return toolOk({
+    handle: mintElementHandle(patchTargetAddress(selection)),
+    label: selection.label,
+    tagName: selection.tagName,
+    box: selection.boundingBox
+  });
+}
+function studioSeek(deps, time) {
+  if (typeof time !== "number" || !Number.isFinite(time)) {
+    return toolFailure("invalid", "time must be a finite number of seconds");
+  }
+  const before = deps.readPlayhead();
+  deps.requestSeek(time);
+  const after = deps.readPlayhead();
+  const moved = after.currentTime !== before.currentTime;
+  if (!moved && before.currentTime !== time) {
+    return toolFailure(
+      "blocked",
+      `the playhead did not move; it is still at ${after.currentTime}`,
+      "The preview may not be ready. Check studio_look, then retry."
+    );
+  }
+  return toolOk({
+    playhead: after.currentTime,
+    duration: after.duration,
+    isPlaying: after.isPlaying,
+    moved
+  });
+}
+var STUDIO_SELECT_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    handle: { type: "string", description: "An element handle from studio_look." }
+  },
+  required: ["handle"],
+  additionalProperties: false
+};
+var STUDIO_SELECT_DESCRIPTION = [
+  "Select an element in HyperFrames Studio, exactly as clicking it would:",
+  "the human sees the same selection box and inspector.",
+  "Takes a handle from studio_look. Most editing tools act on the CURRENT selection,",
+  "so call this first, then the edit.",
+  "Returns `ok: true` with the resulting selection, or `ok: false` with `kind`, `reason` and a `hint`."
+].join(" ");
+var STUDIO_SEEK_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    time: { type: "number", minimum: 0, description: "Playhead position in seconds." }
+  },
+  required: ["time"],
+  additionalProperties: false
+};
+var STUDIO_SEEK_DESCRIPTION = [
+  "Move the playhead to a time in seconds. Pauses playback.",
+  "Out-of-range times are clamped by the player, so check the returned `playhead`",
+  "for where it actually landed rather than assuming it matched your request.",
+  "Returns `ok: true`, or `ok: false` with `kind`, `reason` and a `hint`."
+].join(" ");
+
+// src/utils/projectRouting.ts
+var PROJECT_HASH_PREFIX = "#project/";
+function decodeHashProjectId(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function normalizeHashParams(params) {
+  if (!params) return new URLSearchParams();
+  if (params instanceof URLSearchParams) return params;
+  const next = new URLSearchParams();
+  for (const [key2, value] of Object.entries(params)) {
+    if (!key2 || value == null || value === "") continue;
+    next.set(key2, value);
+  }
+  return next;
+}
+function encodeProjectId(projectId) {
+  return encodeURIComponent(projectId);
+}
+function buildProjectHash(projectId, params) {
+  const search = normalizeHashParams(params).toString();
+  return `${PROJECT_HASH_PREFIX}${encodeProjectId(projectId)}${search ? `?${search}` : ""}`;
+}
+function parseProjectHashRoute(hash) {
+  if (!hash.startsWith(PROJECT_HASH_PREFIX)) return null;
+  const route = hash.slice(PROJECT_HASH_PREFIX.length);
+  const queryIndex = route.indexOf("?");
+  const encodedProjectId = queryIndex >= 0 ? route.slice(0, queryIndex) : route;
+  if (!encodedProjectId || encodedProjectId.includes("/")) return null;
+  const rawParams = queryIndex >= 0 ? route.slice(queryIndex + 1) : "";
+  return {
+    projectId: decodeHashProjectId(encodedProjectId),
+    params: new URLSearchParams(rawParams)
+  };
+}
+function parseProjectIdFromHash(hash) {
+  return parseProjectHashRoute(hash)?.projectId ?? null;
+}
+function buildProjectApiPath(projectId, suffix = "") {
+  const normalizedSuffix = suffix && !suffix.startsWith("/") ? `/${suffix}` : suffix;
+  return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;
+}
+
+// src/utils/frameCapture.ts
+function normalizeCompositionPath(compositionPath) {
+  return compositionPath && compositionPath !== "master" ? compositionPath : "index.html";
+}
+function buildFrameCaptureUrl({
+  projectId,
+  compositionPath,
+  currentTime,
+  origin = window.location.origin
+}) {
+  const compPath = normalizeCompositionPath(compositionPath);
+  const url = new URL(
+    buildProjectApiPath(projectId, `/thumbnail/${encodeURIComponent(compPath)}`),
+    origin
+  );
+  url.searchParams.set("t", Math.max(0, currentTime).toFixed(3));
+  url.searchParams.set("format", "png");
+  url.searchParams.set("output", "source");
+  url.searchParams.set("v", String(Date.now()));
+  return url.toString();
+}
+function buildFrameCaptureFilename(compositionPath, currentTime) {
+  const compPath = normalizeCompositionPath(compositionPath);
+  const base2 = compPath.split("/").pop()?.replace(/\.html$/i, "") || "frame";
+  const frameTime = Math.max(0, currentTime).toFixed(3).replace(".", "-");
+  return `${base2}-${frameTime}s.png`;
+}
+
+// src/webmcp/tools/frameTools.ts
+var DEFAULT_SETTLE_MS = 150;
+var MAX_SETTLE_MS = 5e3;
+async function studioFrame(deps, input = {}) {
+  const projectId = deps.getProjectId();
+  if (!projectId) {
+    return toolFailure("blocked", "no project is open");
+  }
+  if (input.time !== void 0) {
+    if (typeof input.time !== "number" || !Number.isFinite(input.time) || input.time < 0) {
+      return toolFailure("invalid", "time must be a non-negative, finite number of seconds");
+    }
+    deps.requestSeek(input.time);
+  }
+  const settledMs = clampSettle(input.settleMs);
+  if (settledMs > 0) await deps.wait(settledMs);
+  const { currentTime } = deps.readPlayhead();
+  const compositionPath = deps.getCompositionPath();
+  const url = buildFrameCaptureUrl({ projectId, compositionPath, currentTime });
+  const probe2 = await deps.probeFrame(url);
+  if (!probe2.ok) {
+    return toolFailure(
+      "failed",
+      `the renderer returned ${probe2.status} for this frame`,
+      "The composition may not build. Try `hyperframes check`."
+    );
+  }
+  return toolOk({
+    url,
+    time: currentTime,
+    compositionPath: compositionPath ?? "index.html",
+    settledMs
+  });
+}
+function clampSettle(requested) {
+  if (requested === void 0) return DEFAULT_SETTLE_MS;
+  if (typeof requested !== "number" || !Number.isFinite(requested) || requested < 0) {
+    return DEFAULT_SETTLE_MS;
+  }
+  return Math.min(requested, MAX_SETTLE_MS);
+}
+var STUDIO_FRAME_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    time: {
+      type: "number",
+      minimum: 0,
+      description: "Seconds. Omit to capture wherever the playhead already is."
+    },
+    settleMs: {
+      type: "integer",
+      minimum: 0,
+      maximum: MAX_SETTLE_MS,
+      description: `Wait this long before capturing so a just-made edit is included. Default ${DEFAULT_SETTLE_MS}.`
+    }
+  },
+  additionalProperties: false
+};
+var STUDIO_FRAME_DESCRIPTION = [
+  "Render the composition to a PNG at a given time and return its URL, so you can",
+  "SEE the result instead of inferring it from source. Use this to judge a change:",
+  "edit, capture the instant it affects, look, adjust.",
+  "The frame is rendered from the file on disk, not the live preview.",
+  "A capture taken immediately after an edit can therefore predate that edit, because",
+  "the render cache is cleared by a file watcher. The tool waits briefly to cover that;",
+  "raise `settleMs` if a frame still looks stale, rather than concluding the edit failed.",
+  "Returns `ok: true` with `url` and the `time` actually captured, or `ok: false`."
+].join(" ");
+
+// src/webmcp/tools/inspectTools.ts
+function describeAnimation(animation) {
+  return {
+    animationId: animation.id,
+    method: animation.method,
+    target: animation.targetSelector,
+    position: animation.position,
+    duration: animation.duration ?? null,
+    ease: animation.ease ?? null,
+    properties: animation.properties,
+    hasKeyframes: animation.keyframes !== void 0,
+    hasArcPath: animation.arcPath !== void 0
+  };
+}
+function describe(selection, deps, isCurrentSelection) {
+  const { capabilities } = selection;
+  const gsap3 = deps.getGsapDiagnostics();
+  const animations = isCurrentSelection ? gsap3.animations.map(describeAnimation) : [];
+  let animationEditingBlocked = null;
+  if (!isCurrentSelection) {
+    animationEditingBlocked = "animations are only readable for the current selection";
+  } else if (gsap3.multipleTimelines) {
+    animationEditingBlocked = "this composition has multiple GSAP timelines";
+  } else if (gsap3.unsupportedTimelinePattern) {
+    animationEditingBlocked = "this composition's timeline pattern is not editable by Studio";
+  }
+  return toolOk({
+    handle: mintElementHandle(patchTargetAddress(selection)),
+    label: selection.label,
+    tagName: selection.tagName,
+    sourceFile: selection.sourceFile,
+    box: selection.boundingBox,
+    text: selection.textContent,
+    textFields: selection.textFields.map((field) => ({
+      key: field.key,
+      label: field.label,
+      value: field.value,
+      tagName: field.tagName
+    })),
+    styles: selection.computedStyles,
+    inlineStyles: selection.inlineStyles,
+    dataAttributes: selection.dataAttributes,
+    can: {
+      editStyles: capabilities.canEditStyles,
+      move: capabilities.canMove || capabilities.canApplyManualOffset,
+      resize: capabilities.canResize || capabilities.canApplyManualSize,
+      rotate: capabilities.canApplyManualRotation,
+      crop: capabilities.canCrop,
+      editText: selection.textFields.length > 0,
+      reasonIfDisabled: capabilities.reasonIfDisabled ?? null
+    },
+    animations,
+    animationEditingBlocked,
+    isCurrentSelection
+  });
+}
+async function studioInspect(deps, input = {}) {
+  const current = deps.getCurrentSelection();
+  if (!input.handle) {
+    if (!current) {
+      return toolFailure(
+        "invalid",
+        "nothing is selected and no handle was given",
+        "Pass a handle from studio_look, or call studio_select first."
+      );
+    }
+    return describe(current, deps, true);
+  }
+  const doc = deps.getPreviewDocument();
+  if (!doc) return toolFailure("blocked", "the preview is not mounted yet");
+  const element = resolveElementHandle(doc, input.handle);
+  if (!element) {
+    return toolFailure(
+      "invalid",
+      `no element matches handle ${input.handle}`,
+      "Call studio_look for current handles."
+    );
+  }
+  const selection = await deps.buildSelection(element);
+  if (!selection) {
+    return toolFailure("blocked", `${input.handle} resolved to an element Studio cannot inspect`);
+  }
+  return describe(selection, deps, current?.element === element);
+}
+var STUDIO_INSPECT_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    handle: {
+      type: "string",
+      description: "An element handle from studio_look. Omit to inspect the current selection."
+    }
+  },
+  additionalProperties: false
+};
+var STUDIO_INSPECT_DESCRIPTION = [
+  "Everything about one element: its resolved styles, its text fields, its box,",
+  "its GSAP animations, and crucially what it will and will not accept.",
+  "Read this BEFORE editing. `can` tells you which edits are possible and",
+  "`can.reasonIfDisabled` says why one is not, so you can avoid a write that would be refused.",
+  "Animations are only readable for the CURRENT selection; `animationEditingBlocked` says when",
+  "and why animation editing is unavailable.",
+  "Returns `ok: true`, or `ok: false` with `kind`, `reason` and a `hint`."
+].join(" ");
+
+// src/webmcp/tools/contentTools.ts
+var DECLINE_HINTS = {
+  "no-selection": { kind: "invalid", hint: "Call studio_select first." },
+  "no-project": { kind: "blocked" },
+  "geometry-property": {
+    kind: "blocked",
+    hint: "Position and size are not editable as styles. Use the transform tools."
+  },
+  "styles-not-editable": {
+    kind: "blocked",
+    hint: "studio_inspect reports why, in can.reasonIfDisabled."
+  },
+  "not-text-editable": {
+    kind: "blocked",
+    hint: "This element has no editable text. studio_inspect lists its textFields."
+  },
+  "persist-failed": { kind: "failed", hint: "The write did not reach the file. Check Studio." }
+};
+function fromOutcome(outcome, what) {
+  if (outcome.ok) return null;
+  const mapped = DECLINE_HINTS[outcome.reason] ?? { kind: "failed" };
+  return toolFailure(mapped.kind, `${what} was not applied: ${outcome.reason}`, mapped.hint);
+}
+function guardWrite(deps) {
+  const blocked = deps.getWriteBlockedReason();
+  if (blocked) {
+    return toolFailure("blocked", blocked, "Resolve it in Studio, then retry.");
+  }
+  if (!deps.getCurrentSelection()) {
+    return toolFailure("invalid", "nothing is selected", "Call studio_select first.");
+  }
+  return null;
+}
+async function studioSetText(deps, input) {
+  if (typeof input.text !== "string") {
+    return toolFailure("invalid", "text must be a string");
+  }
+  const blocked = guardWrite(deps);
+  if (blocked) return blocked;
+  const selection = deps.getCurrentSelection();
+  if (!selection) return toolFailure("invalid", "nothing is selected");
+  const fields = selection.textFields;
+  const requested = typeof input.field === "string" && input.field ? input.field : void 0;
+  if (requested && !fields.some((candidate) => candidate.key === requested)) {
+    return toolFailure(
+      "invalid",
+      `this element has no text field "${requested}"`,
+      `Its fields are: ${fields.map((candidate) => candidate.key).join(", ") || "none"}.`
+    );
+  }
+  const field = requested ?? (fields.length === 1 ? fields[0]?.key : void 0);
+  if (!field) {
+    if (fields.length === 0) {
+      return toolFailure(
+        "blocked",
+        "this element has no editable text field",
+        "studio_inspect lists an element's textFields."
+      );
+    }
+    return toolFailure(
+      "invalid",
+      `this element has ${fields.length} text fields, so one must be named`,
+      `Pass field as one of: ${fields.map((candidate) => candidate.key).join(", ")}.`
+    );
+  }
+  const before = selection.textContent ?? null;
+  const outcome = await deps.setText(input.text, field);
+  const failure = fromOutcome(outcome, "the text");
+  if (failure) return failure;
+  return toolOk({ text: input.text, changed: before !== input.text });
+}
+async function studioSetStyle(deps, input) {
+  const styles = input.styles;
+  if (typeof styles !== "object" || styles === null || Array.isArray(styles)) {
+    return toolFailure("invalid", "styles must be an object of CSS property to value");
+  }
+  const entries = Object.entries(styles).filter(
+    (entry2) => typeof entry2[1] === "string"
+  );
+  if (entries.length === 0) {
+    return toolFailure("invalid", "styles must contain at least one string value");
+  }
+  const blocked = guardWrite(deps);
+  if (blocked) return blocked;
+  const applied = {};
+  const rejected = {};
+  for (const [property, value] of entries) {
+    const outcome = await deps.setStyle(property, value);
+    if (outcome.ok) applied[property] = value;
+    else rejected[property] = outcome.reason;
+  }
+  if (Object.keys(applied).length === 0) {
+    const reasons = Object.entries(rejected).map(([property, reason]) => `${property}: ${reason}`).join(", ");
+    return toolFailure("blocked", `no style was applied (${reasons})`);
+  }
+  return toolOk({ applied, rejected });
+}
+var STUDIO_SET_TEXT_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    text: { type: "string", description: "The new text content." },
+    field: {
+      type: "string",
+      description: "Which text field to write, from studio_inspect. Omit for the element's own text."
+    }
+  },
+  required: ["text"],
+  additionalProperties: false
+};
+var STUDIO_SET_TEXT_DESCRIPTION = [
+  "Set the text of the CURRENTLY SELECTED element. Call studio_select first.",
+  "This is the edit a synthetic double-click cannot reach, because Studio's canvas",
+  "takes pointer capture and recognises the double press itself.",
+  "Returns `ok: true` with the resulting text and whether it changed, or `ok: false`",
+  "with `kind`, `reason` and usually a `hint` naming what to do instead."
+].join(" ");
+var STUDIO_SET_STYLE_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    styles: {
+      type: "object",
+      description: 'CSS property to value, for example {"color": "red", "font-size": "48px"}.',
+      additionalProperties: { type: "string" }
+    }
+  },
+  required: ["styles"],
+  additionalProperties: false
+};
+var STUDIO_SET_STYLE_DESCRIPTION = [
+  "Set inline styles on the CURRENTLY SELECTED element. Call studio_select first.",
+  "Each property is a separate commit, so N properties produce N undo entries.",
+  "Position and size properties (left, top, width, height) are refused here on purpose;",
+  "they belong to the transform tools.",
+  "Returns `ok: true` with `applied` and `rejected` maps, so a partial success is visible",
+  "as a partial success rather than reported as a whole one."
+].join(" ");
+
+// src/webmcp/tools/transformTools.ts
+var NO_OP_HINT = "Move and rotate are written as GSAP code; a composition with no GSAP timeline has nothing to write to. studio_inspect reports the element's animations.";
+function readNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function guard(deps) {
+  const blocked = deps.getWriteBlockedReason();
+  if (blocked) return toolFailure("blocked", blocked, "Resolve it in Studio, then retry.");
+  if (!deps.getCurrentSelection()) {
+    return toolFailure("invalid", "nothing is selected", "Call studio_select first.");
+  }
+  return null;
+}
+function parsePair(a, b, names, min = Number.NEGATIVE_INFINITY) {
+  const first = readNumber(a);
+  const second = readNumber(b);
+  if (first === null && second === null) return { pair: null };
+  if (first === null || second === null) {
+    return toolFailure("invalid", `${names[0]} and ${names[1]} must be given together`);
+  }
+  if (first < min || second < min) {
+    return toolFailure("invalid", `${names[0]} and ${names[1]} must be at least ${min}`);
+  }
+  return { pair: [first, second] };
+}
+function isFailure(value) {
+  return "ok" in value;
+}
+function parseRequest(input) {
+  const move = parsePair(input.x, input.y, ["x", "y"]);
+  if (isFailure(move)) return move;
+  const size = parsePair(input.width, input.height, ["width", "height"], 0);
+  if (isFailure(size)) return size;
+  const rotate2 = readNumber(input.rotate);
+  if (!move.pair && !size.pair && rotate2 === null) {
+    return toolFailure(
+      "invalid",
+      "give at least one of x, y, width, height, rotate as a finite number"
+    );
+  }
+  return {
+    move: move.pair ? { x: move.pair[0], y: move.pair[1] } : null,
+    size: size.pair ? { width: size.pair[0], height: size.pair[1] } : null,
+    rotate: rotate2
+  };
+}
+async function studioTransform(deps, input) {
+  const request = parseRequest(input);
+  if (isFailure(request)) return request;
+  const blocked = guard(deps);
+  if (blocked) return blocked;
+  const selection = deps.getCurrentSelection();
+  if (!selection) return toolFailure("invalid", "nothing is selected");
+  const applied = [];
+  const unchanged = {};
+  if (request.size) {
+    const before = deps.readBox(selection);
+    await deps.resizeTo(selection, request.size);
+    const after = deps.readBox(selection);
+    if (after.width !== before.width || after.height !== before.height) applied.push("resize");
+    else unchanged.resize = "the element's size did not change";
+  }
+  if (request.move) {
+    const before = deps.readBox(selection);
+    await deps.moveTo(selection, request.move);
+    const after = deps.readBox(selection);
+    if (after.x !== before.x || after.y !== before.y) applied.push("move");
+    else unchanged.move = `the element did not move. ${NO_OP_HINT}`;
+  }
+  if (request.rotate !== null) {
+    await deps.rotateTo(selection, { angle: request.rotate });
+    applied.push("rotate");
+  }
+  if (applied.length === 0) {
+    return toolFailure(
+      "blocked",
+      `nothing changed: ${Object.values(unchanged).join("; ")}`,
+      NO_OP_HINT
+    );
+  }
+  return toolOk({ box: deps.readBox(selection), applied, unchanged });
+}
+var STUDIO_TRANSFORM_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    x: { type: "number", description: "New x offset in pixels. Must be paired with y." },
+    y: { type: "number", description: "New y offset in pixels. Must be paired with x." },
+    width: { type: "number", minimum: 0, description: "New width. Must be paired with height." },
+    height: { type: "number", minimum: 0, description: "New height. Must be paired with width." },
+    rotate: { type: "number", description: "Rotation in degrees." }
+  },
+  additionalProperties: false
+};
+var STUDIO_TRANSFORM_DESCRIPTION = [
+  "Move, resize or rotate the CURRENTLY SELECTED element, the way a drag would.",
+  "Call studio_select first. Give x with y, and width with height.",
+  "The result's `box` is READ BACK after the write, not echoed from your request, and",
+  "`applied` lists what actually took effect. Check it.",
+  "Move and rotate are written as GSAP code, so in a composition with no GSAP timeline they",
+  "do nothing; that shows up in `unchanged` rather than as a false success.",
+  "Rotation is reported as dispatched rather than verified, because the CSS `rotate` property",
+  "does not appear in the element's computed transform.",
+  "Returns `ok: true`, or `ok: false` with `kind`, `reason` and a `hint`."
+].join(" ");
+
+// src/webmcp/tools/animationTools.ts
+var METHODS = ["to", "from", "set", "fromTo"];
+var INSPECT_HINT = "Call studio_inspect to see the result.";
+function guard2(deps) {
+  const blocked = deps.getWriteBlockedReason();
+  if (blocked) return toolFailure("blocked", blocked, "Resolve it in Studio, then retry.");
+  if (!deps.getCurrentSelection()) {
+    return toolFailure("invalid", "nothing is selected", "Call studio_select first.");
+  }
+  return null;
+}
+function readAnimationId(value) {
+  return typeof value === "string" && value.trim() ? value : null;
+}
+async function studioAddAnimation(deps, input) {
+  const method = METHODS.find((candidate) => candidate === input.method);
+  if (!method) {
+    return toolFailure("invalid", `method must be one of ${METHODS.join(", ")}`);
+  }
+  const blocked = guard2(deps);
+  if (blocked) return blocked;
+  const { currentTime } = deps.readPlayhead();
+  deps.addAnimation(method);
+  return toolOk({
+    method,
+    insertedAtSeconds: currentTime,
+    dispatched: true
+  });
+}
+async function studioUpdateAnimation(deps, input) {
+  const animationId = readAnimationId(input.animationId);
+  if (!animationId) {
+    return toolFailure("invalid", "animationId must be a non-empty string", INSPECT_HINT);
+  }
+  const updates = {};
+  if (typeof input.duration === "number" && Number.isFinite(input.duration)) {
+    if (input.duration < 0) return toolFailure("invalid", "duration must not be negative");
+    updates.duration = input.duration;
+  }
+  if (typeof input.ease === "string" && input.ease.trim()) updates.ease = input.ease;
+  if (typeof input.position === "number" && Number.isFinite(input.position)) {
+    updates.position = input.position;
+  }
+  if (Object.keys(updates).length === 0) {
+    return toolFailure("invalid", "give at least one of duration, ease, position");
+  }
+  const blocked = guard2(deps);
+  if (blocked) return blocked;
+  const landed = await deps.updateAnimation(animationId, updates);
+  if (!landed) {
+    return toolFailure(
+      "failed",
+      `the update to ${animationId} did not land`,
+      "The animation id may be stale. studio_inspect lists the current ones."
+    );
+  }
+  return toolOk({ animationId, updated: updates });
+}
+async function studioAddKeyframe(deps, input) {
+  const animationId = readAnimationId(input.animationId);
+  if (!animationId) {
+    return toolFailure("invalid", "animationId must be a non-empty string", INSPECT_HINT);
+  }
+  const percent3 = input.percent;
+  if (typeof percent3 !== "number" || !Number.isFinite(percent3) || percent3 < 0 || percent3 > 100) {
+    return toolFailure("invalid", "percent must be a number between 0 and 100");
+  }
+  const raw = input.properties;
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) {
+    return toolFailure("invalid", "properties must be an object of GSAP property to value");
+  }
+  const properties = {};
+  for (const [key2, value] of Object.entries(raw)) {
+    if (typeof value === "number" || typeof value === "string") properties[key2] = value;
+  }
+  if (Object.keys(properties).length === 0) {
+    return toolFailure("invalid", "properties must contain at least one number or string value");
+  }
+  const blocked = guard2(deps);
+  if (blocked) return blocked;
+  await deps.addKeyframe(animationId, percent3, properties);
+  return toolOk({ animationId, percent: percent3, properties, dispatched: true });
+}
+async function studioDeleteAnimation(deps, input) {
+  const animationId = readAnimationId(input.animationId);
+  if (!animationId) {
+    return toolFailure("invalid", "animationId must be a non-empty string", INSPECT_HINT);
+  }
+  const blocked = guard2(deps);
+  if (blocked) return blocked;
+  deps.deleteAnimation(animationId);
+  return toolOk({ animationId, dispatched: true });
+}
+var DISPATCH_CAVEAT = `Reports what was dispatched, not what landed: the handler underneath does not report back. ${INSPECT_HINT}`;
+var STUDIO_ADD_ANIMATION_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    method: { type: "string", enum: METHODS, description: "The GSAP method to add." }
+  },
+  required: ["method"],
+  additionalProperties: false
+};
+var STUDIO_ADD_ANIMATION_DESCRIPTION = [
+  "Add a GSAP animation to the CURRENTLY SELECTED element. Call studio_select first.",
+  "It is inserted AT THE PLAYHEAD, which this tool does not control: call studio_seek first",
+  "to choose when it starts. The result reports where the playhead actually was.",
+  DISPATCH_CAVEAT
+].join(" ");
+var STUDIO_UPDATE_ANIMATION_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    animationId: { type: "string", description: "An animation id from studio_inspect." },
+    duration: { type: "number", minimum: 0, description: "Duration in seconds." },
+    ease: { type: "string", description: "A GSAP ease, for example power2.out." },
+    position: { type: "number", description: "Start position in seconds." }
+  },
+  required: ["animationId"],
+  additionalProperties: false
+};
+var STUDIO_UPDATE_ANIMATION_DESCRIPTION = [
+  "Change an existing animation's duration, ease or position.",
+  "This is the one animation tool that CONFIRMS its write, so a failure here is real",
+  "and usually means a stale animationId. Get current ids from studio_inspect."
+].join(" ");
+var STUDIO_ADD_KEYFRAME_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    animationId: { type: "string", description: "An animation id from studio_inspect." },
+    percent: {
+      type: "number",
+      minimum: 0,
+      maximum: 100,
+      description: "Where in the tween, 0 to 100."
+    },
+    properties: {
+      type: "object",
+      description: 'GSAP property to value, for example {"y": -50, "opacity": 0}.'
+    }
+  },
+  required: ["animationId", "percent", "properties"],
+  additionalProperties: false
+};
+var STUDIO_ADD_KEYFRAME_DESCRIPTION = [
+  "Add a keyframe to an existing animation at a percentage through it.",
+  "All the properties land in one commit, so they are one undo entry.",
+  DISPATCH_CAVEAT
+].join(" ");
+var STUDIO_DELETE_ANIMATION_INPUT_SCHEMA = {
+  type: "object",
+  properties: {
+    animationId: { type: "string", description: "An animation id from studio_inspect." }
+  },
+  required: ["animationId"],
+  additionalProperties: false
+};
+var STUDIO_DELETE_ANIMATION_DESCRIPTION = [
+  "Remove an animation from the currently selected element. Undo reverses it.",
+  DISPATCH_CAVEAT
+].join(" ");
+
 // src/webmcp/useStudioAgentTools.ts
 var log2 = makeStudioDebugLogger("webmcp");
 function reportRegistration(report, native) {
@@ -40832,9 +41656,117 @@ function buildStudioTools(depsRef) {
         "studio_look",
         async () => buildStudioLook(depsRef.current.getSnapshot(), input)
       )
+    },
+    {
+      name: "studio_select",
+      title: "Select an element",
+      description: STUDIO_SELECT_DESCRIPTION,
+      inputSchema: STUDIO_SELECT_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false, untrustedContentHint: true },
+      execute: (input) => runToolBody(
+        "studio_select",
+        () => studioSelect(depsRef.current, readStringInput(input, "handle"))
+      )
+    },
+    {
+      name: "studio_seek",
+      title: "Move the playhead",
+      description: STUDIO_SEEK_DESCRIPTION,
+      inputSchema: STUDIO_SEEK_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false },
+      execute: (input) => runToolBody(
+        "studio_seek",
+        async () => studioSeek(depsRef.current, readNumberInput(input, "time"))
+      )
+    },
+    {
+      name: "studio_frame",
+      title: "See the composition",
+      description: STUDIO_FRAME_DESCRIPTION,
+      inputSchema: STUDIO_FRAME_INPUT_SCHEMA,
+      annotations: { readOnlyHint: true, untrustedContentHint: true },
+      execute: (input) => runToolBody("studio_frame", () => studioFrame(depsRef.current, input))
+    },
+    {
+      name: "studio_inspect",
+      title: "Inspect one element",
+      description: STUDIO_INSPECT_DESCRIPTION,
+      inputSchema: STUDIO_INSPECT_INPUT_SCHEMA,
+      annotations: { readOnlyHint: true, untrustedContentHint: true },
+      execute: (input) => runToolBody(
+        "studio_inspect",
+        () => studioInspect(depsRef.current, input)
+      )
+    },
+    {
+      name: "studio_set_text",
+      title: "Set an element's text",
+      description: STUDIO_SET_TEXT_DESCRIPTION,
+      inputSchema: STUDIO_SET_TEXT_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false, untrustedContentHint: true },
+      execute: (input) => runToolBody("studio_set_text", () => studioSetText(depsRef.current, input))
+    },
+    {
+      name: "studio_set_style",
+      title: "Set an element's styles",
+      description: STUDIO_SET_STYLE_DESCRIPTION,
+      inputSchema: STUDIO_SET_STYLE_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false },
+      execute: (input) => runToolBody("studio_set_style", () => studioSetStyle(depsRef.current, input))
+    },
+    {
+      name: "studio_transform",
+      title: "Move, resize or rotate",
+      description: STUDIO_TRANSFORM_DESCRIPTION,
+      inputSchema: STUDIO_TRANSFORM_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false },
+      execute: (input) => runToolBody(
+        "studio_transform",
+        () => studioTransform(depsRef.current, input)
+      )
+    },
+    {
+      name: "studio_add_animation",
+      title: "Add an animation",
+      description: STUDIO_ADD_ANIMATION_DESCRIPTION,
+      inputSchema: STUDIO_ADD_ANIMATION_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false },
+      execute: (input) => runToolBody("studio_add_animation", () => studioAddAnimation(depsRef.current, input))
+    },
+    {
+      name: "studio_update_animation",
+      title: "Change an animation",
+      description: STUDIO_UPDATE_ANIMATION_DESCRIPTION,
+      inputSchema: STUDIO_UPDATE_ANIMATION_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false },
+      execute: (input) => runToolBody("studio_update_animation", () => studioUpdateAnimation(depsRef.current, input))
+    },
+    {
+      name: "studio_add_keyframe",
+      title: "Add a keyframe",
+      description: STUDIO_ADD_KEYFRAME_DESCRIPTION,
+      inputSchema: STUDIO_ADD_KEYFRAME_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false },
+      execute: (input) => runToolBody("studio_add_keyframe", () => studioAddKeyframe(depsRef.current, input))
+    },
+    {
+      name: "studio_delete_animation",
+      title: "Remove an animation",
+      description: STUDIO_DELETE_ANIMATION_DESCRIPTION,
+      inputSchema: STUDIO_DELETE_ANIMATION_INPUT_SCHEMA,
+      annotations: { readOnlyHint: false },
+      execute: (input) => runToolBody("studio_delete_animation", () => studioDeleteAnimation(depsRef.current, input))
     }
   ];
 }
+function readStringInput(input, key2) {
+  const value = Reflect.get(input, key2);
+  return typeof value === "string" ? value : "";
+}
+function readNumberInput(input, key2) {
+  const value = Reflect.get(input, key2);
+  return typeof value === "number" ? value : Number.NaN;
+}
 function useStudioAgentTools(deps) {
   const depsRef = useRef68(deps);
   depsRef.current = deps;
@@ -40866,8 +41798,27 @@ function useStudioAgentTools(deps) {
 
 // src/webmcp/StudioAgentTools.tsx
 function StudioAgentTools() {
-  const { projectId, activeCompPath, editHistory } = useStudioShellContext();
-  const { domEditSelection, selectedGsapAnimations } = useDomEditSelectionContext();
+  const { projectId, activeCompPath, editHistory, writeBlockedReason } = useStudioShellContext();
+  const {
+    domEditSelection,
+    selectedGsapAnimations,
+    gsapMultipleTimelines,
+    gsapUnsupportedTimelinePattern
+  } = useDomEditSelectionContext();
+  const {
+    previewIframeRef,
+    buildDomSelectionFromTarget,
+    applyDomSelection,
+    handleDomTextCommit,
+    handleDomStyleCommit,
+    handleDomPathOffsetCommit,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
+    handleGsapAddAnimation,
+    handleGsapUpdateMeta,
+    handleGsapAddKeyframeBatch,
+    handleGsapDeleteAnimation
+  } = useDomEditActionsContext();
   const getSnapshot = useCallback60(() => {
     const player = usePlayerStore.getState();
     return {
@@ -40887,7 +41838,82 @@ function StudioAgentTools() {
       }
     };
   }, [projectId, activeCompPath, domEditSelection, selectedGsapAnimations, editHistory]);
-  useStudioAgentTools({ getSnapshot });
+  const deps = useMemo37(
+    () => ({
+      getSnapshot,
+      getPreviewDocument: () => previewIframeRef.current?.contentDocument ?? null,
+      buildSelection: (element) => buildDomSelectionFromTarget(element),
+      applySelection: (selection) => applyDomSelection(selection, { revealPanel: true }),
+      requestSeek: (time) => usePlayerStore.getState().requestSeek(time),
+      readPlayhead: () => {
+        const player = usePlayerStore.getState();
+        return {
+          currentTime: player.currentTime,
+          duration: player.duration,
+          isPlaying: player.isPlaying
+        };
+      },
+      getProjectId: () => projectId,
+      getCompositionPath: () => activeCompPath,
+      // HEAD, not GET: the tool only needs to know the frame renders. Pulling
+      // the PNG here would download it once for nothing, since the agent
+      // fetches the URL itself.
+      probeFrame: async (url) => {
+        try {
+          const response = await fetch(url, { method: "HEAD" });
+          return { ok: response.ok, status: response.status };
+        } catch {
+          return { ok: false, status: 0 };
+        }
+      },
+      wait: (ms) => new Promise((resolve) => setTimeout(resolve, ms)),
+      getCurrentSelection: () => domEditSelection,
+      getWriteBlockedReason: () => writeBlockedReason,
+      setText: (value, fieldKey) => handleDomTextCommit(value, fieldKey),
+      setStyle: (property, value) => handleDomStyleCommit(property, value),
+      // Measured, not authored: the tool compares this before and after to
+      // tell a real change from a handler that did nothing and resolved.
+      readBox: (selection) => {
+        const rect = selection.element.getBoundingClientRect();
+        return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+      },
+      moveTo: (selection, next) => handleDomPathOffsetCommit(selection, next),
+      resizeTo: (selection, next) => handleDomBoxSizeCommit(selection, next),
+      rotateTo: (selection, next) => handleDomRotationCommit(selection, next),
+      addAnimation: (method) => handleGsapAddAnimation(method),
+      updateAnimation: (animationId, updates) => handleGsapUpdateMeta(animationId, updates),
+      addKeyframe: (animationId, percent3, properties) => handleGsapAddKeyframeBatch(animationId, percent3, properties),
+      deleteAnimation: (animationId) => handleGsapDeleteAnimation(animationId),
+      getGsapDiagnostics: () => ({
+        animations: selectedGsapAnimations,
+        multipleTimelines: gsapMultipleTimelines,
+        unsupportedTimelinePattern: gsapUnsupportedTimelinePattern
+      })
+    }),
+    [
+      getSnapshot,
+      previewIframeRef,
+      buildDomSelectionFromTarget,
+      applyDomSelection,
+      projectId,
+      activeCompPath,
+      writeBlockedReason,
+      handleDomTextCommit,
+      handleDomStyleCommit,
+      handleDomPathOffsetCommit,
+      handleDomBoxSizeCommit,
+      handleDomRotationCommit,
+      handleGsapAddAnimation,
+      handleGsapUpdateMeta,
+      handleGsapAddKeyframeBatch,
+      handleGsapDeleteAnimation,
+      domEditSelection,
+      selectedGsapAnimations,
+      gsapMultipleTimelines,
+      gsapUnsupportedTimelinePattern
+    ]
+  );
+  useStudioAgentTools(deps);
   return null;
 }
 
@@ -41215,13 +42241,13 @@ var SourceEditor = memo28(function SourceEditor2({
 });
 
 // src/components/editor/PropertyPanel.tsx
-import { memo as memo32, useMemo as useMemo52, useRef as useRef99, useState as useState90 } from "react";
+import { memo as memo32, useMemo as useMemo53, useRef as useRef99, useState as useState90 } from "react";
 
 // src/components/editor/InspectorHeaderActions.tsx
 import { Eye as Eye3, EyeSlash as EyeSlash2 } from "@phosphor-icons/react";
 
 // src/contexts/DesignPanelInputContext.tsx
-import { useCallback as useCallback63, useContext as useContext6, useMemo as useMemo37 } from "react";
+import { useCallback as useCallback63, useContext as useContext6, useMemo as useMemo38 } from "react";
 
 // src/utils/designInputTracking.ts
 var COALESCE_WINDOW_MS = 600;
@@ -41264,7 +42290,7 @@ function DesignPanelInputProvider({
   children
 }) {
   const parent = useContext6(DesignPanelInputContext);
-  const value = useMemo37(
+  const value = useMemo38(
     () => ({ ui: ui ?? parent.ui, section: section ?? parent.section }),
     [ui, section, parent.ui, parent.section]
   );
@@ -42879,7 +43905,7 @@ function MediaSection({
 import { isHfColorGradingActive as isHfColorGradingActive2 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingControls.tsx
-import { useMemo as useMemo38, useRef as useRef74, useState as useState53 } from "react";
+import { useMemo as useMemo39, useRef as useRef74, useState as useState53 } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   normalizeHfColorGrading
@@ -43323,7 +44349,7 @@ function ColorGradingControls({
   const [detailSettings, setDetailSettings] = useState53(null);
   const [lutImporting, setLutImporting] = useState53(false);
   const [lutImportError, setLutImportError] = useState53(null);
-  const lutAssets = useMemo38(
+  const lutAssets = useMemo39(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
   );
@@ -43603,7 +44629,7 @@ function ColorGradingControls({
 }
 
 // src/components/editor/useColorGradingController.ts
-import { useCallback as useCallback68, useEffect as useEffect57, useMemo as useMemo39, useRef as useRef76, useState as useState55 } from "react";
+import { useCallback as useCallback68, useEffect as useEffect57, useMemo as useMemo40, useRef as useRef76, useState as useState55 } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
   hasHfColorGradingAuthoredValues,
@@ -44015,7 +45041,7 @@ function useColorGradingController({
     state: "pending",
     message: "Waiting for runtime"
   }));
-  const selectedAssetPath = useMemo39(
+  const selectedAssetPath = useMemo40(
     () => selectedMediaAssetPath(element, projectId),
     [element, projectId]
   );
@@ -44062,7 +45088,7 @@ function useColorGradingController({
       trackStudioPendingEdit(onSetAttributeLive(COLOR_GRADING_DATA_KEY, value));
     };
   }, [identityKey]);
-  const target = useMemo39(
+  const target = useMemo40(
     () => ({
       id: element.id ?? null,
       hfId: element.hfId ?? null,
@@ -45040,7 +46066,7 @@ function ColorField({
 }
 
 // src/components/editor/propertyPanelFont.tsx
-import { useEffect as useEffect59, useMemo as useMemo40, useRef as useRef78, useState as useState57 } from "react";
+import { useEffect as useEffect59, useMemo as useMemo41, useRef as useRef78, useState as useState57 } from "react";
 
 // src/components/editor/fontAssets.ts
 var FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -45262,13 +46288,13 @@ function FontFamilyField({
       setImportingFonts(false);
     }
   };
-  const projectFontAssets = useMemo40(
+  const projectFontAssets = useMemo41(
     () => uniqueFontOptions(
       importedFonts.map((f) => ({ family: f.family, source: "Imported" }))
     ),
     [importedFonts]
   );
-  const options = useMemo40(() => {
+  const options = useMemo41(() => {
     const documentFonts = collectDocumentFontFamilies();
     const googleSet = new Set(googleFonts.map((f) => f.toLowerCase()));
     const taggedLocal = localFonts.map(
@@ -45288,7 +46314,7 @@ function FontFamilyField({
       ])
     );
   }, [currentFamily, googleFonts, localFonts, projectFontAssets]);
-  const filteredOptions = useMemo40(() => {
+  const filteredOptions = useMemo41(() => {
     const matches = options.filter((o) => fontMatchesQuery(o.family, query));
     if (query.trim()) return matches.slice(0, 200);
     const bySource = /* @__PURE__ */ new Map();
@@ -45524,7 +46550,7 @@ function FontFamilyField({
 import { useEffect as useEffect61 } from "react";
 
 // src/components/panels/VariablesBindElement.tsx
-import { useMemo as useMemo41, useState as useState59 } from "react";
+import { useMemo as useMemo42, useState as useState59 } from "react";
 
 // src/components/panels/VariablesValueControls.tsx
 import { useState as useState58 } from "react";
@@ -45806,7 +46832,7 @@ function VariablesBindElement({
 }) {
   const [activeKey, setActiveKey] = useState59(null);
   const [idDraft, setIdDraft] = useState59("");
-  const actions = useMemo41(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
+  const actions = useMemo42(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
   if (actions.length === 0) return null;
   const active = actions.find((a) => a.key === activeKey) ?? null;
   const trimmedId = sanitizeId(idDraft);
@@ -45917,7 +46943,7 @@ function uniqueId(base2, existing) {
 }
 
 // src/contexts/VariablePromoteContext.tsx
-import { useContext as useContext7, useEffect as useEffect60, useMemo as useMemo42, useState as useState60 } from "react";
+import { useContext as useContext7, useEffect as useEffect60, useMemo as useMemo43, useState as useState60 } from "react";
 import { jsx as jsx100 } from "react/jsx-runtime";
 var VariablePromoteContext = createStableContext(
   "VariablePromoteContext",
@@ -45940,15 +46966,15 @@ function VariablePromoteProvider({
     if (!session) return;
     return session.on("change", () => setRevision((r) => r + 1));
   }, [session]);
-  const actions = useMemo42(() => {
+  const actions = useMemo43(() => {
     if (!session || !selection) return [];
     return buildBindActions(selection, session);
   }, [session, selection, revision]);
-  const declarations = useMemo42(() => {
+  const declarations = useMemo43(() => {
     if (!session) return [];
     return session.getVariableDeclarations();
   }, [session, revision]);
-  const value = useMemo42(
+  const value = useMemo43(
     () => ({ session, selection, actions, declarations, persist: persist2, onPersistError }),
     [session, selection, actions, declarations, persist2, onPersistError]
   );
@@ -45957,7 +46983,7 @@ function VariablePromoteProvider({
 function useVariablePromoteChannel(channel) {
   const ctx3 = useContext7(VariablePromoteContext);
   const key2 = channel.kind === "style" ? `style:${channel.prop}` : channel.kind;
-  return useMemo42(() => {
+  return useMemo43(() => {
     if (!ctx3 || !ctx3.session || !ctx3.selection?.hfId) return null;
     const { session, selection, actions, declarations, persist: persist2, onPersistError } = ctx3;
     const hfId = selection.hfId;
@@ -46392,7 +47418,7 @@ function parseColorString(value) {
 }
 
 // src/components/editor/propertyPanelFill.tsx
-import { useMemo as useMemo43, useRef as useRef79, useState as useState61 } from "react";
+import { useMemo as useMemo44, useRef as useRef79, useState as useState61 } from "react";
 import { jsx as jsx102, jsxs as jsxs79 } from "react/jsx-runtime";
 function normalizeProjectPath(value) {
   const trimmed = value.trim();
@@ -46437,8 +47463,8 @@ function ImageFillField({
   const fileInputRef = useRef79(null);
   const [uploading, setUploading] = useState61(false);
   const [uploadError, setUploadError] = useState61(null);
-  const imageAssets = useMemo43(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
-  const selectedAsset = useMemo43(
+  const imageAssets = useMemo44(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
+  const selectedAsset = useMemo44(
     () => resolveSelectedAsset(value, sourceFile, imageAssets),
     [imageAssets, sourceFile, value]
   );
@@ -47920,7 +48946,7 @@ import { useCallback as useCallback73, useState as useState66 } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 // src/components/editor/AnimationCard.tsx
-import { memo as memo30, useCallback as useCallback72, useEffect as useEffect64, useMemo as useMemo44, useRef as useRef82, useState as useState65 } from "react";
+import { memo as memo30, useCallback as useCallback72, useEffect as useEffect64, useMemo as useMemo45, useRef as useRef82, useState as useState65 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -48461,21 +49487,21 @@ var AnimationCard = memo30(function AnimationCard2({
     segment?.scrollIntoView({ block: "nearest", behavior: "smooth" });
     pendingAutoScrollRef.current = false;
   }, [expandedKfPct]);
-  const usedProps = useMemo44(
+  const usedProps = useMemo45(
     () => new Set(Object.keys(animation.properties)),
     [animation.properties]
   );
-  const availableProps = useMemo44(
+  const availableProps = useMemo45(
     () => SUPPORTED_PROPS.filter(
       (p) => !usedProps.has(p) && (animation.method === "set" || !BOOLEAN_PROPS.has(p))
     ),
     [usedProps, animation.method]
   );
-  const usedFromProps = useMemo44(
+  const usedFromProps = useMemo45(
     () => new Set(Object.keys(animation.fromProperties ?? {})),
     [animation.fromProperties]
   );
-  const availableFromProps = useMemo44(
+  const availableFromProps = useMemo45(
     () => SUPPORTED_PROPS.filter((p) => !usedFromProps.has(p) && !BOOLEAN_PROPS.has(p)),
     [usedFromProps]
   );
@@ -48522,7 +49548,7 @@ var AnimationCard = memo30(function AnimationCard2({
   const easeName = (animation.keyframes ? animation.keyframes.easeEach : void 0) ?? animation.ease ?? "none";
   const easeLabel = easeName.startsWith("custom(") ? "Custom curve" : EASE_LABELS[easeName] ?? easeName;
   const endTime = typeof animation.position === "number" ? animation.position + (animation.duration ?? 0) : animation.position;
-  const summary = useMemo44(() => buildTweenSummary(animation), [animation]);
+  const summary = useMemo45(() => buildTweenSummary(animation), [animation]);
   const setKeys = Object.keys(animation.properties);
   if (animation.method === "set" && // `every` is vacuously true on an empty bag — require at least one key so a
   // property-less set doesn't masquerade as a position row.
@@ -49670,7 +50696,7 @@ function PropertyPanel3dTransform({
 }
 
 // src/components/editor/PropertyPanelFlat.tsx
-import { useEffect as useEffect84, useMemo as useMemo51, useRef as useRef98, useState as useState89 } from "react";
+import { useEffect as useEffect84, useMemo as useMemo52, useRef as useRef98, useState as useState89 } from "react";
 import { useShallow as useShallow2 } from "zustand/react/shallow";
 
 // src/components/editor/audioFxSummary.ts
@@ -51740,7 +52766,7 @@ function motionSectionLabel(args) {
 }
 
 // src/components/editor/propertyPanelAudioFxGroup.tsx
-import { useMemo as useMemo47, useState as useState77 } from "react";
+import { useMemo as useMemo48, useState as useState77 } from "react";
 import {
   HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR6,
   HF_AUDIO_FX_DATA_KEY as HF_AUDIO_FX_DATA_KEY2,
@@ -51799,7 +52825,7 @@ function automationAttrValue(automation) {
 }
 
 // src/components/editor/propertyPanelFxSection.tsx
-import { useCallback as useCallback76, useEffect as useEffect71, useMemo as useMemo46, useRef as useRef86, useState as useState75 } from "react";
+import { useCallback as useCallback76, useEffect as useEffect71, useMemo as useMemo47, useRef as useRef86, useState as useState75 } from "react";
 
 // src/components/editor/audioFxRevealTarget.ts
 import { parseAutomationTarget as parseAutomationTarget2 } from "@hyperframes/core/audio-automation";
@@ -52745,7 +53771,7 @@ function FxEqModule({
 import { getAudioFxPreset as getAudioFxPreset3 } from "@hyperframes/core/audio-fx-presets";
 
 // src/components/editor/propertyPanelFxNodeRow.tsx
-import { useMemo as useMemo45, useState as useState74 } from "react";
+import { useMemo as useMemo46, useState as useState74 } from "react";
 import {
   defaultAudioFxParams as defaultAudioFxParams3,
   getAudioFxDef as getAudioFxDef3
@@ -53171,11 +54197,11 @@ function FxNodeRow({
   trackKind
 }) {
   const registryDef = getAudioFxDef3(node.type);
-  const def = useMemo45(() => registryDef ? plainDef(registryDef) : null, [registryDef]);
+  const def = useMemo46(() => registryDef ? plainDef(registryDef) : null, [registryDef]);
   const primary = registryDef ? primaryParamOf(registryDef) : null;
   const profile = getAudioFxProfile2(node.type);
-  const derived = useMemo45(() => profileParam(node.type), [node.type]);
-  const onlyPrimary = useMemo45(
+  const derived = useMemo46(() => profileParam(node.type), [node.type]);
+  const onlyPrimary = useMemo46(
     () => def && primary ? { ...def, params: def.params.filter((p) => p.key === primary) } : def,
     [def, primary]
   );
@@ -53821,12 +54847,12 @@ function FxSection({
     [chain.nodes, mutate, onRemoveNodeAutomation, trackKind]
   );
   const [carveOpen, setCarveOpen] = useState75(true);
-  const carveNodes = useMemo46(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
-  const handBuilt = useMemo46(
+  const carveNodes = useMemo47(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
+  const handBuilt = useMemo47(
     () => chain.nodes.map((node, i) => ({ node, i })).filter(({ node }) => !node.fromCarve && !node.fromEq),
     [chain.nodes]
   );
-  const runs = useMemo46(() => {
+  const runs = useMemo47(() => {
     const out = [];
     for (const item of handBuilt) {
       const preset = item.node.fromPreset;
@@ -53837,8 +54863,8 @@ function FxSection({
     return out;
   }, [handBuilt]);
   const [collapsedRuns, setCollapsedRuns] = useState75(/* @__PURE__ */ new Set());
-  const eqIds = useMemo46(() => audioEqIds(chain), [chain]);
-  const positions = useMemo46(() => {
+  const eqIds = useMemo47(() => audioEqIds(chain), [chain]);
+  const positions = useMemo47(() => {
     const map = /* @__PURE__ */ new Map();
     let at = (showCarve ? 1 : 0) + eqIds.length;
     for (const { i } of handBuilt) map.set(i, ++at);
@@ -54574,7 +55600,7 @@ function AudioFxGroup({
   const removeNodeAutomation = (nodeId) => removeNodesAutomation([nodeId]);
   const [analysing, setAnalysing] = useState77(false);
   const storeElements = usePlayerStore((s) => s.elements);
-  const signalPath = useMemo47(() => {
+  const signalPath = useMemo48(() => {
     const doc = element.element?.ownerDocument;
     return audioFxSignalPath(
       element.tagName?.toLowerCase(),
@@ -55051,7 +56077,7 @@ function createGsapLivePreview(iframeRef) {
 }
 
 // src/components/editor/propertyPanelFlatColorGradingSection.tsx
-import { useEffect as useEffect81, useMemo as useMemo49, useRef as useRef97, useState as useState85 } from "react";
+import { useEffect as useEffect81, useMemo as useMemo50, useRef as useRef97, useState as useState85 } from "react";
 import {
   HF_COLOR_GRADING_GRADE_PRESETS,
   normalizeHfColorGrading as normalizeHfColorGrading5,
@@ -55086,7 +56112,7 @@ function presetPreviewHandlers({
 import { useState as useState81 } from "react";
 
 // src/components/editor/propertyPanelColorCurveGraph.tsx
-import { useMemo as useMemo48, useRef as useRef90 } from "react";
+import { useMemo as useMemo49, useRef as useRef90 } from "react";
 import {
   compileHfColorCurve,
   compileHfHueCurve,
@@ -55274,8 +56300,8 @@ function CurveGraph({
   onCancel
 }) {
   const pointerRef = useRef90(null);
-  const samples = useMemo48(() => samplesFor(points, tab), [points, tab]);
-  const path = useMemo48(() => curvePath(samples, tab), [samples, tab]);
+  const samples = useMemo49(() => samplesFor(points, tab), [points, tab]);
+  const path = useMemo49(() => curvePath(samples, tab), [samples, tab]);
   const selectRelativePoint = (offset) => {
     if (points.length === 0) return;
     const current = selectedIndex ?? (offset > 0 ? -1 : 0);
@@ -57072,14 +58098,14 @@ function FlatColorGradingSection({
   const lutInputRef = useRef97(null);
   const [lutOpen, setLutOpen] = useState85(false);
   const [detailSettingsOpen, setDetailSettingsOpen] = useState85(null);
-  const lutAssets = useMemo49(
+  const lutAssets = useMemo50(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
   );
   const lut = grading.lut;
   const selectedLutName = lut?.src ? lut.src.split("/").pop() ?? lut.src : null;
-  const resolvedGrading = useMemo49(() => resolveColorGrading(grading), [grading]);
-  const secondaryInputGrading = useMemo49(
+  const resolvedGrading = useMemo50(() => resolveColorGrading(grading), [grading]);
+  const secondaryInputGrading = useMemo50(
     () => resolveColorGrading({
       intensity: 1,
       adjust: resolvedGrading.adjust,
@@ -57097,7 +58123,7 @@ function FlatColorGradingSection({
     ]
   );
   const actions = createColorGradingActions(grading, onCommitColorGrading);
-  const scopesRefreshKey = useMemo49(() => serializeHfColorGrading2(grading), [grading]);
+  const scopesRefreshKey = useMemo50(() => serializeHfColorGrading2(grading), [grading]);
   useEffect81(() => {
     if (presetPreviews.status === "idle") onRequestPresetPreviews();
   }, [onRequestPresetPreviews, presetPreviews.status]);
@@ -58227,7 +59253,7 @@ function FlatEffectsSection({
 import { useState as useState88 } from "react";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState87, useEffect as useEffect83, useMemo as useMemo50 } from "react";
+import { useState as useState87, useEffect as useEffect83, useMemo as useMemo51 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -58294,7 +59320,7 @@ function useBlockCatalog() {
       cancelled = true;
     };
   }, []);
-  const filteredBlocks = useMemo50(() => {
+  const filteredBlocks = useMemo51(() => {
     let result = blocks;
     if (category) {
       result = result.filter((b) => b.category === category);
@@ -58606,7 +59632,7 @@ function PropertyPanelFlat({
   const showMotionEffects = gsapEffectHandlers !== null && !audioSelection;
   const showMotionGroup = showMotionTiming || showMotionEffects;
   const volumeAutomation = useVolumeAutomation(element, onSetAttributeQuiet ?? onSetAttributeLive);
-  const audioGroupLabel = useMemo51(() => {
+  const audioGroupLabel = useMemo52(() => {
     const doc = element.element?.ownerDocument;
     const id = element.id;
     if (!doc || !id) return void 0;
@@ -59167,12 +60193,12 @@ var PropertyPanel = memo32(function PropertyPanel2(props) {
   const cacheEntry = usePlayerStore((s) => s.keyframeCache.get(cacheElementKey));
   const iframeRef = previewIframeRef ?? { current: null };
   const gsapAnimIdForMemo = element ? gsapAnimations?.find((a) => a.keyframes)?.id ?? gsapAnimations?.[0]?.id ?? null : null;
-  const gsapRuntimeValues = useMemo52(
+  const gsapRuntimeValues = useMemo53(
     () => element ? readGsapRuntimeValuesForPanel(gsapAnimIdForMemo, gsapAnimations, element, iframeRef) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps -- iframeRef is stable; currentTime drives re-reads during playback
     [gsapAnimIdForMemo, gsapAnimations, element, currentTime]
   );
-  const gsapBorderRadius = useMemo52(
+  const gsapBorderRadius = useMemo53(
     () => element ? readGsapBorderRadiusForPanel(gsapRuntimeValues, gsapAnimations, element, iframeRef) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [gsapRuntimeValues, gsapAnimations, element, currentTime]
@@ -59562,11 +60588,11 @@ var PropertyPanel = memo32(function PropertyPanel2(props) {
 });
 
 // src/components/editor/FileTree.tsx
-import { memo as memo34, useState as useState92, useCallback as useCallback78, useMemo as useMemo54, useRef as useRef101 } from "react";
+import { memo as memo34, useState as useState92, useCallback as useCallback78, useMemo as useMemo55, useRef as useRef101 } from "react";
 import { Plus as Plus2, FolderSimplePlus as FolderSimplePlus2 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeNodes.tsx
-import { memo as memo33, useState as useState91, useCallback as useCallback77, useMemo as useMemo53, useRef as useRef100, useEffect as useEffect85 } from "react";
+import { memo as memo33, useState as useState91, useCallback as useCallback77, useMemo as useMemo54, useRef as useRef100, useEffect as useEffect85 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -60049,7 +61075,7 @@ var TreeFolder = memo33(function TreeFolder2({
 }) {
   const [isOpen, setIsOpen] = useState91(defaultOpen);
   const toggle = useCallback77(() => setIsOpen((v) => !v), []);
-  const children = useMemo53(() => sortChildren(node.children), [node.children]);
+  const children = useMemo54(() => sortChildren(node.children), [node.children]);
   const Chevron = isOpen ? ChevronDown : ChevronRight;
   const isDragOver = dragOverFolder === node.fullPath;
   const isRenaming = inlineInput?.mode === "rename" && inlineInput.originalPath === node.fullPath;
@@ -60180,8 +61206,8 @@ var FileTree = memo34(function FileTree2({
   onImportFiles,
   lintFindingsByFile
 }) {
-  const tree = useMemo54(() => buildTree(files), [files]);
-  const children = useMemo54(() => sortChildren(tree.children), [tree]);
+  const tree = useMemo55(() => buildTree(files), [files]);
+  const children = useMemo55(() => sortChildren(tree.children), [tree]);
   const [contextMenu, setContextMenu] = useState92(null);
   const [inlineInput, setInlineInput] = useState92(null);
   const [deleteTarget, setDeleteTarget] = useState92(null);
@@ -60448,10 +61474,10 @@ var FileTree = memo34(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState155, useCallback as useCallback176, useRef as useRef170, useMemo as useMemo76, useLayoutEffect as useLayoutEffect10 } from "react";
+import { useState as useState155, useCallback as useCallback176, useRef as useRef170, useMemo as useMemo77, useLayoutEffect as useLayoutEffect10 } from "react";
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState94, useEffect as useEffect87, useCallback as useCallback80, useRef as useRef103, useMemo as useMemo55 } from "react";
+import { useState as useState94, useEffect as useEffect87, useCallback as useCallback80, useRef as useRef103, useMemo as useMemo56 } from "react";
 
 // src/components/renders/serverError.ts
 async function readServerError(res) {
@@ -60975,7 +62001,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
     };
   }, [projectId]);
   const isRendering = jobs.some((j) => j.status === "rendering");
-  return useMemo55(
+  return useMemo56(
     () => ({
       jobs,
       isRendering,
@@ -61032,8 +62058,8 @@ function useDialogBehavior({
   const onCloseRef = useRef104(onClose);
   onCloseRef.current = onClose;
   const requestClose = useCallback81(() => {
-    const guard = canCloseRef.current;
-    if (guard && !guard()) return;
+    const guard3 = canCloseRef.current;
+    if (guard3 && !guard3()) return;
     onCloseRef.current();
   }, []);
   useEffect88(() => {
@@ -62242,7 +63268,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback84, useEffect as useEffect90, useMemo as useMemo56, useRef as useRef110, useState as useState99 } from "react";
+import { useCallback as useCallback84, useEffect as useEffect90, useMemo as useMemo57, useRef as useRef110, useState as useState99 } from "react";
 
 // src/utils/editHistory.ts
 var DEFAULT_MAX_ENTRIES = 100;
@@ -62594,7 +63620,7 @@ function createPersistentEditHistoryStore({
   };
 }
 function usePersistentEditHistory(options) {
-  const storage = useMemo56(
+  const storage = useMemo57(
     () => options.storage ?? createIndexedDbEditHistoryStorage(),
     [options.storage]
   );
@@ -62863,10 +63889,10 @@ function usePanelLayout(initialState2) {
 }
 
 // src/hooks/useFileManager.ts
-import { useState as useState102, useCallback as useCallback88, useMemo as useMemo58, useRef as useRef113 } from "react";
+import { useState as useState102, useCallback as useCallback88, useMemo as useMemo59, useRef as useRef113 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState101, useCallback as useCallback86, useEffect as useEffect92, useMemo as useMemo57 } from "react";
+import { useState as useState101, useCallback as useCallback86, useEffect as useEffect92, useMemo as useMemo58 } from "react";
 function useFileTree({ projectId, projectIdRef }) {
   const [projectDir, setProjectDir] = useState101(null);
   const [fileTree, setFileTree] = useState101([]);
@@ -62902,11 +63928,11 @@ function useFileTree({ projectId, projectIdRef }) {
     if (data.files) setFileTree(data.files);
   }, [projectIdRef]);
   const compositions = compositionPaths;
-  const assets = useMemo57(
+  const assets = useMemo58(
     () => fileTree.filter((f) => !f.endsWith(".html") && !f.endsWith(".md") && !f.endsWith(".json")),
     [fileTree]
   );
-  const fontAssets = useMemo57(
+  const fontAssets = useMemo58(
     () => assets.filter((asset) => FONT_EXT.test(asset)).map((asset) => ({
       family: fontFamilyFromAssetPath(asset),
       path: asset,
@@ -62928,6 +63954,7 @@ function useFileTree({ projectId, projectIdRef }) {
 
 // src/hooks/useEditorSave.ts
 import { useCallback as useCallback87, useRef as useRef112 } from "react";
+var FAILURE_BURST_MS = 5e3;
 function useEditorSave({
   editingPathRef,
   projectIdRef,
@@ -62940,18 +63967,32 @@ function useEditorSave({
 }) {
   const saveRafRef = useRef112(null);
   const refreshRafRef = useRef112(null);
-  const lastFailureToastAtRef = useRef112(0);
+  const lastFailureToastAtRef = useRef112(null);
+  const lastFailureReportRef = useRef112(null);
   const pendingCandidateRef = useRef112(null);
   const inFlightRef = useRef112(null);
   const inFlightCandidateRef = useRef112(null);
   const reportFailure = useCallback87(
     (path, error) => {
-      trackStudioEvent("save_failure", {
+      const now2 = Date.now();
+      const properties = buildStudioSaveFailureProperties({
         source: "code_editor",
-        error_message: error instanceof Error ? error.message : "unknown"
+        error,
+        filePath: path
       });
-      const now2 = Date.now();
-      if (now2 - lastFailureToastAtRef.current > 5e3) {
+      const errorName = error instanceof Error ? error.name : typeof error;
+      const fingerprint = JSON.stringify([
+        path,
+        errorName,
+        properties.error_message,
+        properties.status_code
+      ]);
+      const previous = lastFailureReportRef.current;
+      if (previous === null || previous.fingerprint !== fingerprint || now2 - previous.emittedAt >= FAILURE_BURST_MS) {
+        trackStudioSaveFailure({ source: "code_editor", error, filePath: path });
+        lastFailureReportRef.current = { fingerprint, emittedAt: now2 };
+      }
+      if (lastFailureToastAtRef.current === null || now2 - lastFailureToastAtRef.current >= FAILURE_BURST_MS) {
         lastFailureToastAtRef.current = now2;
         showToast(
           `Couldn't save ${path} \u2014 your latest edits are NOT persisted. Check the preview server; editing again retries the save.`,
@@ -62974,6 +64015,7 @@ function useEditorSave({
         recordEdit
       }).then(() => {
         if (pendingCandidateRef.current === candidate) pendingCandidateRef.current = null;
+        lastFailureReportRef.current = null;
         if (refreshRafRef.current != null) cancelAnimationFrame(refreshRafRef.current);
         refreshRafRef.current = requestAnimationFrame(() => setRefreshKey((k) => k + 1));
         return { status: "clean" };
@@ -63053,7 +64095,7 @@ function useFileManager({
   const projectIdRef = useRef113(projectId);
   projectIdRef.current = projectId;
   const importedFontAssetsRef = useRef113([]);
-  const fileVersionScope = useMemo58(
+  const fileVersionScope = useMemo59(
     () => ({ projectId, versions: /* @__PURE__ */ new Map() }),
     [projectId]
   );
@@ -63853,52 +64895,6 @@ import { useCallback as useCallback100, useRef as useRef118 } from "react";
 // src/hooks/useRazorSplit.ts
 import { useCallback as useCallback91, useRef as useRef116 } from "react";
 
-// src/utils/projectRouting.ts
-var PROJECT_HASH_PREFIX = "#project/";
-function decodeHashProjectId(value) {
-  try {
-    return decodeURIComponent(value);
-  } catch {
-    return value;
-  }
-}
-function normalizeHashParams(params) {
-  if (!params) return new URLSearchParams();
-  if (params instanceof URLSearchParams) return params;
-  const next = new URLSearchParams();
-  for (const [key2, value] of Object.entries(params)) {
-    if (!key2 || value == null || value === "") continue;
-    next.set(key2, value);
-  }
-  return next;
-}
-function encodeProjectId(projectId) {
-  return encodeURIComponent(projectId);
-}
-function buildProjectHash(projectId, params) {
-  const search = normalizeHashParams(params).toString();
-  return `${PROJECT_HASH_PREFIX}${encodeProjectId(projectId)}${search ? `?${search}` : ""}`;
-}
-function parseProjectHashRoute(hash) {
-  if (!hash.startsWith(PROJECT_HASH_PREFIX)) return null;
-  const route = hash.slice(PROJECT_HASH_PREFIX.length);
-  const queryIndex = route.indexOf("?");
-  const encodedProjectId = queryIndex >= 0 ? route.slice(0, queryIndex) : route;
-  if (!encodedProjectId || encodedProjectId.includes("/")) return null;
-  const rawParams = queryIndex >= 0 ? route.slice(queryIndex + 1) : "";
-  return {
-    projectId: decodeHashProjectId(encodedProjectId),
-    params: new URLSearchParams(rawParams)
-  };
-}
-function parseProjectIdFromHash(hash) {
-  return parseProjectHashRoute(hash)?.projectId ?? null;
-}
-function buildProjectApiPath(projectId, suffix = "") {
-  const normalizedSuffix = suffix && !suffix.startsWith("/") ? `/${suffix}` : suffix;
-  return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;
-}
-
 // src/utils/razorSplitTransaction.ts
 function targetIdentity(path, target) {
   if (target.hfId) return `${path}|hf:${target.hfId}`;
@@ -68603,7 +69599,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback115, useMemo as useMemo59, useRef as useRef126 } from "react";
+import { useCallback as useCallback115, useMemo as useMemo60, useRef as useRef126 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -69918,7 +70914,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     const { instantPatch: _instantPatch, ...batchOptions } = options;
     await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, instantPatches.length > 0 ? { ...batchOptions, instantPatches } : batchOptions);
   }, [showToast, finalizeSuccessfulMutation]);
-  const commitMutation = useMemo59(() => {
+  const commitMutation = useMemo60(() => {
     const serializeFile = (file, task) => {
       if (writeProjectFile) {
         return serializeStudioFileMutation(writeProjectFile, file, task);
@@ -69983,7 +70979,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     },
     [activeProjectId]
   );
-  const sdkDeps = useMemo59(
+  const sdkDeps = useMemo60(
     () => writeProjectFile ? {
       editHistory: { recordEdit: editHistory.recordEdit },
       writeProjectFile,
@@ -70189,7 +71185,8 @@ import { useCallback as useCallback117 } from "react";
 function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
   return useCallback117(
     (error, selection, mutationType, label) => {
-      trackStudioSaveFailure({
+      const report = isGsapEditBlockedError(error) ? trackStudioEditBlocked : trackStudioSaveFailure;
+      report({
         source: "gsap_commit",
         error,
         filePath: selection?.sourceFile ?? activeCompPath ?? "index.html",
@@ -72977,7 +73974,7 @@ function useStudioExternalFileChanges({
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback127, useMemo as useMemo60, useRef as useRef133, useState as useState109 } from "react";
+import { useCallback as useCallback127, useMemo as useMemo61, useRef as useRef133, useState as useState109 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -73163,7 +74160,7 @@ function useBlockHandlers({
   setRightPanelTab
 }) {
   const [activeBlockParams, setActiveBlockParams] = useState109(null);
-  const blockCtx = useMemo60(
+  const blockCtx = useMemo61(
     () => ({
       activeCompPath: blockCtxDeps.activeCompPath,
       timelineElements: blockCtxDeps.timelineElements,
@@ -74248,7 +75245,7 @@ import { useCallback as useCallback132 } from "react";
 import { createElement as createElement3 } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo36, useCallback as useCallback130, useMemo as useMemo61, useRef as useRef137 } from "react";
+import { memo as memo36, useCallback as useCallback130, useMemo as useMemo62, useRef as useRef137 } from "react";
 import { jsx as jsx167, jsxs as jsxs139 } from "react/jsx-runtime";
 var BAR_WIDTH = 2;
 var BAR_STEP = 3;
@@ -74308,7 +75305,7 @@ var AudioWaveform = memo36(function AudioWaveform2({
   const canvasRef = useRef137(null);
   const observerRef = useRef137(null);
   const cacheKey = waveformUrl ?? audioUrl;
-  const request = useMemo61(
+  const request = useMemo62(
     () => ({
       key: createThumbnailKey({ kind: "waveform", source: cacheKey }),
       projectId,
@@ -74417,7 +75414,7 @@ var AudioWaveform = memo36(function AudioWaveform2({
 });
 
 // src/player/components/ImageThumbnail.tsx
-import { memo as memo37, useCallback as useCallback131, useMemo as useMemo62, useRef as useRef138, useState as useState110 } from "react";
+import { memo as memo37, useCallback as useCallback131, useMemo as useMemo63, useRef as useRef138, useState as useState110 } from "react";
 import { jsx as jsx168, jsxs as jsxs140 } from "react/jsx-runtime";
 var ImageThumbnail = memo37(function ImageThumbnail2({
   imageSrc,
@@ -74430,7 +75427,7 @@ var ImageThumbnail = memo37(function ImageThumbnail2({
 }) {
   const [containerWidth, setContainerWidth] = useState110(0);
   const observerRef = useRef138(null);
-  const request = useMemo62(
+  const request = useMemo63(
     () => ({
       key: createThumbnailKey({ kind: "image", source: imageSrc, rich: Number(rich) }),
       projectId,
@@ -74747,36 +75744,6 @@ function useConsoleErrorCapture(previewIframe) {
 
 // src/hooks/useFrameCapture.ts
 import { useState as useState112, useCallback as useCallback134, useRef as useRef140 } from "react";
-
-// src/utils/frameCapture.ts
-function normalizeCompositionPath(compositionPath) {
-  return compositionPath && compositionPath !== "master" ? compositionPath : "index.html";
-}
-function buildFrameCaptureUrl({
-  projectId,
-  compositionPath,
-  currentTime,
-  origin = window.location.origin
-}) {
-  const compPath = normalizeCompositionPath(compositionPath);
-  const url = new URL(
-    buildProjectApiPath(projectId, `/thumbnail/${encodeURIComponent(compPath)}`),
-    origin
-  );
-  url.searchParams.set("t", Math.max(0, currentTime).toFixed(3));
-  url.searchParams.set("format", "png");
-  url.searchParams.set("output", "source");
-  url.searchParams.set("v", String(Date.now()));
-  return url.toString();
-}
-function buildFrameCaptureFilename(compositionPath, currentTime) {
-  const compPath = normalizeCompositionPath(compositionPath);
-  const base2 = compPath.split("/").pop()?.replace(/\.html$/i, "") || "frame";
-  const frameTime = Math.max(0, currentTime).toFixed(3).replace(".", "-");
-  return `${base2}-${frameTime}s.png`;
-}
-
-// src/hooks/useFrameCapture.ts
 function useFrameCapture({
   projectId,
   activeCompPath,
@@ -74870,7 +75837,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState113, useCallback as useCallback135, useEffect as useEffect108, useRef as useRef141, useMemo as useMemo63 } from "react";
+import { useState as useState113, useCallback as useCallback135, useEffect as useEffect108, useRef as useRef141, useMemo as useMemo64 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -74942,8 +75909,8 @@ function useLintModal(projectId, refreshKey) {
     },
     [backgroundFindings]
   );
-  const findingsByElement = useMemo63(() => groupFindings((f) => f.elementId), [groupFindings]);
-  const findingsByFile = useMemo63(() => groupFindings((f) => f.file), [groupFindings]);
+  const findingsByElement = useMemo64(() => groupFindings((f) => f.elementId), [groupFindings]);
+  const findingsByFile = useMemo64(() => groupFindings((f) => f.file), [groupFindings]);
   useEffect108(() => {
     usePlayerStore.getState().setLintFindingsByElement(findingsByElement);
   }, [findingsByElement]);
@@ -75425,16 +76392,16 @@ function useStudioUrlState({
 }
 
 // src/hooks/useEffectiveTimelineDuration.ts
-import { useMemo as useMemo64 } from "react";
+import { useMemo as useMemo65 } from "react";
 function useEffectiveTimelineDuration(timelineDuration2, timelineElements) {
-  return useMemo64(
+  return useMemo65(
     () => getEffectiveTimelineDuration(timelineDuration2, timelineElements),
     [timelineDuration2, timelineElements]
   );
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback139, useMemo as useMemo65, useRef as useRef144, useState as useState116 } from "react";
+import { useCallback as useCallback139, useMemo as useMemo66, useRef as useRef144, useState as useState116 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -75449,6 +76416,9 @@ function buildStudioContextValue(input) {
     timelineElements: input.timelineElements,
     isPlaying: input.isPlaying,
     editHistory: input.editHistory,
+    // Conflict first: when both are true the conflict is the one the user has
+    // been asked to decide, and resolving it is what unblocks the queue.
+    writeBlockedReason: input.externalFileConflict ? "an external change to this file is waiting to be resolved" : input.domEditSaveQueuePaused,
     handleUndo: input.handleUndo,
     handleRedo: input.handleRedo,
     renderQueue: input.renderQueue,
@@ -75459,7 +76429,7 @@ function buildStudioContextValue(input) {
   };
 }
 function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, isPlaying, domEditSelection, isGestureRecording) {
-  return useMemo65(() => {
+  return useMemo66(() => {
     const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
     const layersPanelActive = inspectorTabActive && rightInspectorPanes.layers;
     const designPanelActive = inspectorTabActive && rightInspectorPanes.design;
@@ -75532,7 +76502,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 import { useRef as useRef146 } from "react";
 
 // src/contexts/PanelLayoutContext.tsx
-import { useContext as useContext8, useMemo as useMemo66 } from "react";
+import { useContext as useContext8, useMemo as useMemo67 } from "react";
 import { jsx as jsx169 } from "react/jsx-runtime";
 var PanelLayoutContext = createStableContext("PanelLayoutContext", null);
 function usePanelLayoutContext() {
@@ -75562,7 +76532,7 @@ function PanelLayoutProvider({
   },
   children
 }) {
-  const stable = useMemo66(
+  const stable = useMemo67(
     () => ({
       leftWidth,
       rightWidth,
@@ -75610,7 +76580,7 @@ import {
   useCallback as useCallback140,
   useContext as useContext9,
   useEffect as useEffect110,
-  useMemo as useMemo67,
+  useMemo as useMemo68,
   useRef as useRef145,
   useState as useState117
 } from "react";
@@ -75642,8 +76612,8 @@ function useViewModeState() {
   const guardsRef = useRef145(/* @__PURE__ */ new Set());
   const acceptedLocationRef = useRef145(readHistoryLocation());
   const canSetViewMode = useCallback140((mode) => {
-    for (const guard of guardsRef.current) {
-      if (!guard(mode)) return false;
+    for (const guard3 of guardsRef.current) {
+      if (!guard3(mode)) return false;
     }
     return true;
   }, []);
@@ -75673,13 +76643,13 @@ function useViewModeState() {
     },
     [canSetViewMode]
   );
-  const registerViewModeGuard = useCallback140((guard) => {
-    guardsRef.current.add(guard);
+  const registerViewModeGuard = useCallback140((guard3) => {
+    guardsRef.current.add(guard3);
     return () => {
-      guardsRef.current.delete(guard);
+      guardsRef.current.delete(guard3);
     };
   }, []);
-  return useMemo67(
+  return useMemo68(
     () => ({ viewMode, setViewMode, registerViewModeGuard }),
     [viewMode, setViewMode, registerViewModeGuard]
   );
@@ -76869,7 +77839,7 @@ function useGestureCommit({
 }
 
 // src/components/editor/GestureTrailOverlay.tsx
-import { memo as memo38, useMemo as useMemo68 } from "react";
+import { memo as memo38, useMemo as useMemo69 } from "react";
 import { Fragment as Fragment49, jsx as jsx172, jsxs as jsxs142 } from "react/jsx-runtime";
 var GestureTrailOverlay = memo38(function GestureTrailOverlay2({
   samples,
@@ -76881,7 +77851,7 @@ var GestureTrailOverlay = memo38(function GestureTrailOverlay2({
   mode,
   accentColor = "#3CE6AC"
 }) {
-  const trailPoints = useMemo68(() => {
+  const trailPoints = useMemo69(() => {
     if (!canvasRect) return "";
     if (trail2 && trail2.length > 1) {
       return trail2.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");
@@ -76889,7 +77859,7 @@ var GestureTrailOverlay = memo38(function GestureTrailOverlay2({
     if (samples.length === 0) return "";
     return samples.filter((s) => s.properties.x != null && s.properties.y != null).map((s) => `${s.properties.x},${s.properties.y}`).join(" ");
   }, [samples, trail2, sampleCount, canvasRect?.left, canvasRect?.top]);
-  const simplifiedPath = useMemo68(() => {
+  const simplifiedPath = useMemo69(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return "";
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -76901,7 +77871,7 @@ var GestureTrailOverlay = memo38(function GestureTrailOverlay2({
     if (pts.length === 0) return "";
     return pts.map((p) => `${p.x},${p.y}`).join(" ");
   }, [simplifiedPoints]);
-  const diamondPositions = useMemo68(() => {
+  const diamondPositions = useMemo69(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return [];
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -77300,7 +78270,7 @@ var CompositionsTab = memo39(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo40, useState as useState126, useCallback as useCallback147, useRef as useRef153, useMemo as useMemo70, useEffect as useEffect119 } from "react";
+import { memo as memo40, useState as useState126, useCallback as useCallback147, useRef as useRef153, useMemo as useMemo71, useEffect as useEffect119 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx174, jsxs as jsxs144 } from "react/jsx-runtime";
@@ -77912,7 +78882,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect116, useMemo as useMemo69, useState as useState123 } from "react";
+import { useEffect as useEffect116, useMemo as useMemo70, useState as useState123 } from "react";
 import { jsx as jsx177, jsxs as jsxs147 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -77939,7 +78909,7 @@ function GlobalAssetsView({ searchQuery }) {
       cancelled = true;
     };
   }, []);
-  const rows = useMemo69(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
+  const rows = useMemo70(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
   if (records === null) {
     return /* @__PURE__ */ jsx177("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: "Loading global assets\u2026" });
   }
@@ -78498,12 +79468,12 @@ var AssetsTab = memo40(function AssetsTab2({
     setTimeout(() => setCopyFeedback(null), copied ? 1500 : 3e3);
   }, []);
   const elements = usePlayerStore((s) => s.elements);
-  const usedPaths = useMemo70(() => deriveUsedPaths(elements), [elements]);
-  const allMediaAssets = useMemo70(
+  const usedPaths = useMemo71(() => deriveUsedPaths(elements), [elements]);
+  const allMediaAssets = useMemo71(
     () => assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
     [assets]
   );
-  const mediaAssets = useMemo70(() => {
+  const mediaAssets = useMemo71(() => {
     const all = filterByUsage(allMediaAssets, usedPaths, usageFilter);
     if (!searchQuery) return all;
     const q = searchQuery.toLowerCase();
@@ -78513,7 +79483,7 @@ var AssetsTab = memo40(function AssetsTab2({
       return rec?.description?.toLowerCase().includes(q);
     });
   }, [allMediaAssets, searchQuery, manifest, usageFilter, usedPaths]);
-  const categorized = useMemo70(() => {
+  const categorized = useMemo71(() => {
     const groups = { audio: [], images: [], video: [], fonts: [] };
     for (const a of mediaAssets) {
       const cat = getCategory(a);
@@ -78528,12 +79498,12 @@ var AssetsTab = memo40(function AssetsTab2({
     }
     return groups;
   }, [mediaAssets, usedPaths]);
-  const counts = useMemo70(() => {
+  const counts = useMemo71(() => {
     const c = { all: mediaAssets.length };
     for (const cat of FILTER_ORDER) c[cat] = categorized[cat].length;
     return c;
   }, [mediaAssets, categorized]);
-  const usageCounts = useMemo70(
+  const usageCounts = useMemo71(
     () => countUsage(
       assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
       usedPaths
@@ -82896,7 +83866,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo51, useCallback as useCallback163, useEffect as useEffect129, useMemo as useMemo71, useState as useState144 } from "react";
+import { memo as memo51, useCallback as useCallback163, useEffect as useEffect129, useMemo as useMemo72, useState as useState144 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback160 } from "react";
@@ -83600,22 +84570,22 @@ var VariablesPanel = memo51(function VariablesPanel2({
     domEditSaveTimestampRef,
     publishSdkSession
   });
-  const declarations = useMemo71(
+  const declarations = useMemo72(
     () => sdkSession?.getVariableDeclarations() ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const usage = useMemo71(
+  const usage = useMemo72(
     () => sdkSession?.getVariableUsage() ?? null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const issues = useMemo71(
+  const issues = useMemo72(
     () => previewValues && sdkSession ? sdkSession.validateVariableValues(previewValues) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const effectiveValues = useMemo71(
+  const effectiveValues = useMemo72(
     () => sdkSession?.getVariableValues(previewValues ?? void 0) ?? {},
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
@@ -83954,15 +84924,15 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useEffect as useEffect130, useMemo as useMemo72 } from "react";
+import { useEffect as useEffect130, useMemo as useMemo73 } 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 = useMemo72(() => {
+  const isSlideshowComposition = useMemo73(() => {
     if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
     return slideshowIslandRegex2("i").test(editingFileContent);
   }, [editingFileContent]);
-  const slideshowScenes = useMemo72(() => {
+  const slideshowScenes = useMemo73(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -85634,7 +86604,7 @@ function useProjectSignaturePoll(projectId, currentSignature, onChange) {
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { useEffect as useEffect141, useMemo as useMemo75, useState as useState152 } from "react";
+import { useEffect as useEffect141, useMemo as useMemo76, useState as useState152 } from "react";
 
 // src/components/storyboard/StoryboardDirection.tsx
 import { jsx as jsx205, jsxs as jsxs170 } from "react/jsx-runtime";
@@ -85871,7 +86841,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback172, useEffect as useEffect137, useMemo as useMemo73, useRef as useRef169, useState as useState148 } from "react";
+import { useCallback as useCallback172, useEffect as useEffect137, useMemo as useMemo74, useRef as useRef169, useState as useState148 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx210, jsxs as jsxs173 } from "react/jsx-runtime";
@@ -85930,7 +86900,7 @@ function useMarkdownPreview(source) {
     const id = window.setTimeout(() => setDebounced(source), 200);
     return () => window.clearTimeout(id);
   }, [source]);
-  return useMemo73(() => {
+  return useMemo74(() => {
     const html2 = marked.parse(debounced, { async: false });
     DOMPurify.addHook("afterSanitizeAttributes", hardenLinks);
     try {
@@ -86602,7 +87572,7 @@ function progressLabel(summary) {
 }
 
 // src/components/storyboard/useFrameComments.ts
-import { useCallback as useCallback174, useEffect as useEffect140, useMemo as useMemo74, useState as useState151 } from "react";
+import { useCallback as useCallback174, useEffect as useEffect140, useMemo as useMemo75, useState as useState151 } from "react";
 
 // src/components/storyboard/frameComments.ts
 var FRAME_COMMENTS_PATH = ".hyperframes/frame-comments.json";
@@ -86684,7 +87654,7 @@ function useFrameComments(frames) {
   const setDraft = useCallback174((index, text) => {
     setDrafts((prev) => ({ ...prev, [index]: text }));
   }, []);
-  const draftCount = useMemo74(
+  const draftCount = useMemo75(
     () => Object.values(drafts).filter((text) => text.trim().length > 0).length,
     [drafts]
   );
@@ -86752,7 +87722,7 @@ function StoryboardLoaded({
       setFeedbackMessageCopied(false);
     }
   };
-  const sourceFiles = useMemo75(() => {
+  const sourceFiles = useMemo76(() => {
     const files = [{ path: data.path, label: data.path }];
     if (data.script?.exists) files.push({ path: data.script.path, label: data.script.path });
     return files;
@@ -87238,7 +88208,7 @@ function StudioApp() {
     domEditSaveTimestampRef,
     setRefreshKey
   });
-  const masterCompPath = useMemo76(
+  const masterCompPath = useMemo77(
     () => resolveMasterCompositionPath(fileManager.fileTree),
     [fileManager.fileTree]
   );
@@ -87558,11 +88528,13 @@ function StudioApp() {
     handleRedo: appHotkeys.handleRedo,
     renderQueue,
     compositionDimensions,
+    domEditSaveQueuePaused: previewPersistence.domEditSaveQueuePaused,
+    externalFileConflict: externalFileChanges.blocked !== null,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo76(
+  const timelineToolbar = useMemo77(
     () => /* @__PURE__ */ jsx217(
       TimelineToolbar,
       {