@hyperframes/studio 0.6.85 → 0.6.87

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -126,45 +126,96 @@ export function scanAllRuntimeKeyframes(iframe: HTMLIFrameElement | null): Map<
 
   for (const timeline of Object.values(timelines)) {
     if (!timeline?.getChildren) continue;
+    const tlDuration = typeof timeline.duration === "function" ? timeline.duration() : 0;
+
     for (const tween of timeline.getChildren(true)) {
       if (!tween.targets || !tween.vars) continue;
       const vars = tween.vars;
-      if (!vars.keyframes || typeof vars.keyframes !== "object") continue;
 
-      const kfObj = vars.keyframes as Record<string, unknown>;
-      const keyframes: Array<{ percentage: number; properties: Record<string, number | string> }> =
-        [];
-      let easeEach: string | undefined;
+      if (vars.keyframes && typeof vars.keyframes === "object") {
+        const kfObj = vars.keyframes as Record<string, unknown>;
+        const keyframes: Array<{
+          percentage: number;
+          properties: Record<string, number | string>;
+        }> = [];
+        let easeEach: string | undefined;
+
+        for (const [key, val] of Object.entries(kfObj)) {
+          if (key === "easeEach") {
+            if (typeof val === "string") easeEach = val;
+            continue;
+          }
+          const pctMatch = key.match(/^(\d+(?:\.\d+)?)%$/);
+          if (!pctMatch || !val || typeof val !== "object") continue;
+          const percentage = parseFloat(pctMatch[1]);
+          const properties: Record<string, number | string> = {};
+          for (const [pk, pv] of Object.entries(val as Record<string, unknown>)) {
+            if (pk === "ease") continue;
+            if (typeof pv === "number") properties[pk] = Math.round(pv * 1000) / 1000;
+            else if (typeof pv === "string") properties[pk] = pv;
+          }
+          if (Object.keys(properties).length > 0) {
+            keyframes.push({ percentage, properties });
+          }
+        }
 
-      for (const [key, val] of Object.entries(kfObj)) {
-        if (key === "easeEach") {
-          if (typeof val === "string") easeEach = val;
+        if (keyframes.length > 0) {
+          keyframes.sort((a, b) => a.percentage - b.percentage);
+          for (const target of tween.targets()) {
+            const id = (target as HTMLElement).id;
+            if (id && !result.has(id)) {
+              result.set(id, { keyframes, easeEach });
+            }
+          }
           continue;
         }
-        const pctMatch = key.match(/^(\d+(?:\.\d+)?)%$/);
-        if (!pctMatch || !val || typeof val !== "object") continue;
-        const percentage = parseFloat(pctMatch[1]);
-        const properties: Record<string, number | string> = {};
-        for (const [pk, pv] of Object.entries(val as Record<string, unknown>)) {
-          if (pk === "ease") continue;
-          if (typeof pv === "number") properties[pk] = Math.round(pv * 1000) / 1000;
-          else if (typeof pv === "string") properties[pk] = pv;
-        }
-        if (Object.keys(properties).length > 0) {
-          keyframes.push({ percentage, properties });
-        }
       }
 
-      if (keyframes.length === 0) continue;
-      keyframes.sort((a, b) => a.percentage - b.percentage);
+      // Flat tweens: synthesize start + end keyframe entries
+      if (!tlDuration || tlDuration <= 0) continue;
+      const tweenStart = typeof tween.startTime === "function" ? tween.startTime() : undefined;
+      if (typeof tweenStart !== "number" || !Number.isFinite(tweenStart)) continue;
+      const tweenDur = typeof tween.duration === "function" ? tween.duration() : 0;
+
+      const startPct = Math.round((tweenStart / tlDuration) * 1000) / 10;
+      const endPct =
+        tweenDur > 0 ? Math.round(((tweenStart + tweenDur) / tlDuration) * 1000) / 10 : startPct;
+      const properties: Record<string, number | string> = {};
+      const skip = new Set([
+        "ease",
+        "duration",
+        "delay",
+        "stagger",
+        "motionPath",
+        "overwrite",
+        "immediateRender",
+        "onComplete",
+        "onUpdate",
+        "onStart",
+      ]);
+      for (const [k, v] of Object.entries(vars)) {
+        if (skip.has(k)) continue;
+        if (typeof v === "number") properties[k] = Math.round(v * 1000) / 1000;
+        else if (typeof v === "string") properties[k] = v;
+      }
+      if (Object.keys(properties).length === 0) continue;
 
       for (const target of tween.targets()) {
         const id = (target as HTMLElement).id;
-        if (id && !result.has(id)) {
-          result.set(id, { keyframes, easeEach });
+        if (!id) continue;
+        const existing = result.get(id);
+        const entries = existing ?? { keyframes: [] };
+        entries.keyframes.push({ percentage: startPct, properties });
+        if (endPct !== startPct) {
+          entries.keyframes.push({ percentage: endPct, properties });
         }
+        if (!existing) result.set(id, entries);
       }
     }
   }
+
+  for (const entry of result.values()) {
+    entry.keyframes.sort((a, b) => a.percentage - b.percentage);
+  }
   return result;
 }

package/src/hooks/gsapRuntimePreview.ts

@@ -0,0 +1,19 @@
+export function previewKeyframeChange(
+  iframe: HTMLIFrameElement | null,
+  selector: string,
+  properties: Record<string, number | string>,
+): boolean {
+  if (!iframe?.contentWindow) return false;
+  try {
+    const gsap = (
+      iframe.contentWindow as unknown as {
+        gsap?: { set: (target: string, vars: Record<string, number | string>) => void };
+      }
+    ).gsap;
+    if (!gsap?.set) return false;
+    gsap.set(selector, properties);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/hooks/useAppHotkeys.ts

@@ -81,6 +81,7 @@ interface UseAppHotkeysParams {
   onResetKeyframes: () => boolean;
   onDeleteSelectedKeyframes: () => void;
   onAfterUndoRedo?: () => void;
+  onToggleRecording?: () => void;
 }
 
 // ── Hook ──
@@ -106,6 +107,7 @@ export function useAppHotkeys({
   onResetKeyframes,
   onDeleteSelectedKeyframes,
   onAfterUndoRedo,
+  onToggleRecording,
 }: UseAppHotkeysParams) {
   const previewHotkeyWindowRef = useRef<Window | null>(null);
   const handleAppKeyDownRef = useRef<((event: KeyboardEvent) => void) | undefined>(undefined);
@@ -215,6 +217,8 @@ export function useAppHotkeys({
   onResetKeyframesRef.current = onResetKeyframes;
   const onDeleteSelectedKeyframesRef = useRef(onDeleteSelectedKeyframes);
   onDeleteSelectedKeyframesRef.current = onDeleteSelectedKeyframes;
+  const onToggleRecordingRef = useRef(onToggleRecording);
+  onToggleRecordingRef.current = onToggleRecording;
 
   // ── Consolidated keydown handler ──
 
@@ -377,6 +381,20 @@ export function useAppHotkeys({
         void handleDomEditDeleteRef.current(domSelection);
       }
     }
+
+    // R — toggle gesture recording
+    if (
+      event.key === "r" &&
+      !event.metaKey &&
+      !event.ctrlKey &&
+      !event.altKey &&
+      !event.shiftKey &&
+      !isEditableTarget(event.target) &&
+      onToggleRecordingRef.current
+    ) {
+      event.preventDefault();
+      onToggleRecordingRef.current();
+    }
   };
 
   // ── Window keydown listener ──

package/src/hooks/useAskAgentModal.ts

@@ -3,6 +3,7 @@ import { copyTextToClipboard } from "../utils/clipboard";
 import { readTagSnippetByTarget } from "../utils/sourcePatcher";
 import { toProjectAbsolutePath, type AgentModalAnchorPoint } from "../utils/studioHelpers";
 import { buildElementAgentPrompt, type DomEditSelection } from "../components/editor/domEditing";
+import { usePlayerStore } from "../player";
 
 // ── Types ──
 
@@ -11,7 +12,6 @@ export interface UseAskAgentModalParams {
   activeCompPath: string | null;
   projectDir: string | null;
   projectIdRef: React.MutableRefObject<string | null>;
-  currentTime: number;
   showToast: (message: string, tone?: "error" | "info") => void;
   domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
   domEditSelection: DomEditSelection | null;
@@ -23,7 +23,6 @@ export function useAskAgentModal({
   activeCompPath,
   projectDir,
   projectIdRef,
-  currentTime,
   showToast,
   domEditSelectionRef,
   domEditSelection,
@@ -91,7 +90,7 @@ export function useAskAgentModal({
       const tagSnippet = agentPromptTagSnippet ?? domEditSelection.element.outerHTML;
       const prompt = buildElementAgentPrompt({
         selection: domEditSelection,
-        currentTime,
+        currentTime: usePlayerStore.getState().currentTime,
         tagSnippet,
         selectionContext: agentPromptSelectionContext,
         userInstruction,
@@ -115,7 +114,6 @@ export function useAskAgentModal({
       activeCompPath,
       agentPromptSelectionContext,
       agentPromptTagSnippet,
-      currentTime,
       domEditSelection,
       projectDir,
       showToast,

package/src/hooks/useDomEditCommits.ts

@@ -5,7 +5,12 @@ import type { PatchOperation } from "../utils/sourcePatcher";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { primaryFontFamilyValue } from "../utils/studioFontHelpers";
-import { getDomEditTargetKey, type DomEditSelection } from "../components/editor/domEditing";
+import {
+  buildDomEditPatchTarget,
+  getDomEditTargetKey,
+  readHfId,
+  type DomEditSelection,
+} from "../components/editor/domEditing";
 import {
   applyStudioPathOffset,
   applyStudioBoxSize,
@@ -182,11 +187,7 @@ export function useDomEditCommits({
 
       if (options?.shouldSave && !options.shouldSave()) return;
 
-      const patchTarget: { id?: string | null; selector?: string; selectorIndex?: number } = {
-        id: selection.id,
-        selector: selection.selector,
-        selectorIndex: selection.selectorIndex,
-      };
+      const patchTarget = buildDomEditPatchTarget(selection);
 
       // Mark the save timestamp before the file write so the SSE file-change
       // handler suppresses the reload even if the event arrives before the
@@ -471,16 +472,8 @@ export function useDomEditCommits({
         if (typeof originalContent !== "string")
           throw new Error(`Missing file contents for ${targetPath}`);
 
-        const patchTarget: { id?: string; selector?: string; selectorIndex?: number } = selection.id
-          ? {
-              id: selection.id,
-              selector: selection.selector,
-              selectorIndex: selection.selectorIndex,
-            }
-          : selection.selector
-            ? { selector: selection.selector, selectorIndex: selection.selectorIndex }
-            : ({} as never);
-        if (!patchTarget.id && !patchTarget.selector) {
+        const patchTarget = buildDomEditPatchTarget(selection);
+        if (!patchTarget.id && !patchTarget.selector && !patchTarget.hfId) {
           throw new Error("Selected element has no patchable target");
         }
 
@@ -541,7 +534,7 @@ export function useDomEditCommits({
       }>,
     ) => {
       if (entries.length === 0) return;
-      const coalesceKey = `z-reorder:${entries.map((e) => e.id ?? e.selector ?? "el").join(":")}`;
+      const coalesceKey = `z-reorder:${entries.map((e) => e.id ?? e.selector ?? e.element.getAttribute("data-hf-id") ?? "el").join(":")}`;
       for (let i = 0; i < entries.length; i++) {
         const entry = entries[i];
         entry.element.style.zIndex = String(entry.zIndex);
@@ -561,6 +554,7 @@ export function useDomEditCommits({
           {
             element: entry.element,
             id: entry.id ?? null,
+            hfId: readHfId(entry.element),
             selector: entry.selector,
             selectorIndex: entry.selectorIndex,
             sourceFile: entry.sourceFile,

package/src/hooks/useDomEditSession.ts

@@ -50,7 +50,6 @@ export interface UseDomEditSessionParams {
   compositionLoading: boolean;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   timelineElements: TimelineElement[];
-  currentTime: number;
   setSelectedTimelineElementId: (id: string | null) => void;
   setRightCollapsed: (collapsed: boolean) => void;
   setRightPanelTab: (tab: RightPanelTab) => void;
@@ -59,6 +58,7 @@ export interface UseDomEditSessionParams {
   queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
+  updateEditingFileContent: (path: string, content: string) => void;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
   fileTree: string[];
@@ -91,7 +91,6 @@ export function useDomEditSession({
   compositionLoading,
   previewIframeRef,
   timelineElements,
-  currentTime,
   setSelectedTimelineElementId,
   setRightCollapsed,
   setRightPanelTab,
@@ -100,6 +99,7 @@ export function useDomEditSession({
   queueDomEditSave,
   readProjectFile: _readProjectFile,
   writeProjectFile,
+  updateEditingFileContent,
   domEditSaveTimestampRef,
   editHistory,
   fileTree,
@@ -182,7 +182,6 @@ export function useDomEditSession({
     activeCompPath,
     projectDir,
     projectIdRef,
-    currentTime,
     showToast,
     domEditSelectionRef,
     domEditSelection,
@@ -224,12 +223,25 @@ export function useDomEditSession({
 
   const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
 
+  // Bump GSAP cache when refreshKey changes (code-tab edits trigger iframe
+  // reload via refreshKey but don't go through commitMutation, so the cache
+  // would otherwise retain stale keyframe entries).
+  const prevRefreshKeyRef = useRef(refreshKey);
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (refreshKey !== prevRefreshKeyRef.current) {
+      prevRefreshKeyRef.current = refreshKey;
+      bumpGsapCache();
+    }
+  }, [refreshKey, bumpGsapCache]);
+
   const gsapSourceFile = domEditSelection?.sourceFile || activeCompPath || "index.html";
 
   usePopulateKeyframeCacheForFile(
     STUDIO_GSAP_PANEL_ENABLED ? (projectId ?? null) : null,
     gsapSourceFile,
     gsapCacheVersion,
+    previewIframeRef,
   );
 
   const {
@@ -257,9 +269,12 @@ export function useDomEditSession({
     addGsapFromProperty,
     removeGsapFromProperty,
     addKeyframe,
+    addKeyframeBatch,
     removeKeyframe,
     convertToKeyframes,
     removeAllKeyframes,
+    setArcPath,
+    updateArcSegment,
   } = useGsapScriptCommits({
     projectIdRef,
     activeCompPath,
@@ -268,6 +283,7 @@ export function useDomEditSession({
     domEditSaveTimestampRef,
     reloadPreview,
     onCacheInvalidate: bumpGsapCache,
+    onFileContentChanged: updateEditingFileContent,
   });
 
   // ── Commit handlers (delegated to useDomEditCommits) ──
@@ -416,6 +432,7 @@ export function useDomEditSession({
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
     handleGsapAddKeyframe,
+    handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
@@ -432,10 +449,10 @@ export function useDomEditSession({
     addGsapFromProperty,
     removeGsapFromProperty,
     addKeyframe,
+    addKeyframeBatch,
     removeKeyframe,
     convertToKeyframes,
     removeAllKeyframes,
-    currentTime,
     handleDomManualEditsReset,
     selectedGsapAnimations,
   });
@@ -449,6 +466,22 @@ export function useDomEditSession({
     bumpGsapCache,
   });
 
+  const handleSetArcPath = useCallback(
+    (animId: string, config: Parameters<typeof setArcPath>[2]) => {
+      if (!domEditSelection) return;
+      setArcPath(domEditSelection, animId, config);
+    },
+    [domEditSelection, setArcPath],
+  );
+
+  const handleUpdateArcSegment = useCallback(
+    (animId: string, segmentIndex: number, update: Parameters<typeof updateArcSegment>[3]) => {
+      if (!domEditSelection) return;
+      updateArcSegment(domEditSelection, animId, segmentIndex, update);
+    },
+    [domEditSelection, updateArcSegment],
+  );
+
   // Sync selection from preview document on load / refresh
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -589,12 +622,22 @@ export function useDomEditSession({
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
     handleGsapAddKeyframe,
+    handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     commitAnimatedProperty,
+    handleSetArcPath,
+    handleUpdateArcSegment,
     invalidateGsapCache: bumpGsapCache,
     previewIframeRef,
+    commitMutation: async (
+      mutation: Record<string, unknown>,
+      options: { label: string; softReload?: boolean },
+    ) => {
+      if (!domEditSelection) return;
+      await gsapCommitMutation(domEditSelection, mutation, options);
+    },
   };
 }

package/src/hooks/useEnableKeyframes.ts

@@ -0,0 +1,171 @@
+/**
+ * Centralized "Enable keyframes" logic that handles ALL scenarios:
+ * - Element has explicit keyframes → add/remove at seeked time
+ * - Element has a flat tween → convert + add at seeked time + propagate to end
+ * - Element has no animation (deleted) → create new tween with correct position + keyframes
+ *
+ * Always fetches fresh animation data to avoid stale session state.
+ * Reads GSAP runtime values only (no CSS offset — it applies separately via translate).
+ */
+import { useCallback } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { usePlayerStore } from "../player/store/playerStore";
+import { fetchParsedAnimations, getAnimationsForElement } from "./useGsapTweenCache";
+
+export interface EnableKeyframesSession {
+  domEditSelection: DomEditSelection | null;
+  selectedGsapAnimations: GsapAnimation[];
+  previewIframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  handleGsapAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
+  handleGsapConvertToKeyframes: (
+    animId: string,
+    resolvedFromValues?: Record<string, number | string>,
+  ) => void | Promise<void>;
+  handleGsapRemoveKeyframe: (animId: string, pct: number) => void;
+  handleGsapAddKeyframeBatch?: (
+    animId: string,
+    pct: number,
+    properties: Record<string, number | string>,
+  ) => Promise<void>;
+  commitMutation?: (
+    mutation: Record<string, unknown>,
+    options: { label: string; softReload?: boolean },
+  ) => Promise<void>;
+}
+
+function readElementPosition(
+  iframe: HTMLIFrameElement | null,
+  sel: DomEditSelection,
+  anim: GsapAnimation | null,
+): Record<string, number> {
+  const result: Record<string, number> = {};
+  if (!iframe?.contentWindow) return result;
+
+  let gsap: { getProperty?: (el: Element, prop: string) => number } | undefined;
+  try {
+    gsap = (iframe.contentWindow as Window & { gsap?: typeof gsap }).gsap;
+  } catch {
+    return result;
+  }
+
+  const element = sel.element;
+  if (!element?.isConnected || !gsap?.getProperty) return result;
+
+  const props = anim ? Object.keys(anim.properties) : ["x", "y", "opacity"];
+  for (const prop of props) {
+    const val = Number(gsap.getProperty(element, prop));
+    if (Number.isFinite(val)) result[prop] = Math.round(val);
+  }
+
+  return result;
+}
+
+async function fetchAnimationsForElement(sel: DomEditSelection): Promise<GsapAnimation[]> {
+  const projectId = window.location.hash.match(/project\/([^?/]+)/)?.[1];
+  if (!projectId) return [];
+  const sourceFile = sel.sourceFile || "index.html";
+  const parsed = await fetchParsedAnimations(projectId, sourceFile);
+  if (!parsed) return [];
+  return getAnimationsForElement(parsed.animations, {
+    id: sel.id,
+    selector: sel.selector,
+  });
+}
+
+function computePercentage(t: number, sel: DomEditSelection): number {
+  const elStart = Number.parseFloat(sel.dataAttributes?.start ?? "0") || 0;
+  const elDuration = Number.parseFloat(sel.dataAttributes?.duration ?? "1") || 1;
+  if (elDuration <= 0) return 0;
+  return Math.max(0, Math.min(100, Math.round(((t - elStart) / elDuration) * 1000) / 10));
+}
+
+// fallow-ignore-next-line complexity
+export function useEnableKeyframes(
+  sessionRef: React.RefObject<EnableKeyframesSession | undefined>,
+) {
+  return useCallback(async () => {
+    const session = sessionRef.current;
+    if (!session) return;
+    const sel = session.domEditSelection;
+    if (!sel) return;
+
+    const t = usePlayerStore.getState().currentTime;
+    const iframe = session.previewIframeRef?.current ?? null;
+
+    let anims = session.selectedGsapAnimations;
+    if (anims.length === 0) {
+      anims = await fetchAnimationsForElement(sel);
+    }
+
+    const kfAnim = anims.find((a) => a.keyframes);
+    const flatAnim = anims.find((a) => !a.keyframes);
+
+    if (kfAnim?.keyframes) {
+      const pct = computePercentage(t, sel);
+      const existing = kfAnim.keyframes.keyframes.find((k) => Math.abs(k.percentage - pct) <= 1);
+      if (existing) {
+        session.handleGsapRemoveKeyframe(kfAnim.id, existing.percentage);
+      } else if (session.handleGsapAddKeyframeBatch) {
+        const position = readElementPosition(iframe, sel, kfAnim);
+        if (Object.keys(position).length > 0) {
+          await session.handleGsapAddKeyframeBatch(kfAnim.id, pct, position);
+        }
+      }
+    } else if (flatAnim) {
+      const position = readElementPosition(iframe, sel, flatAnim);
+      const hasPosition = Object.keys(position).length > 0;
+
+      await session.handleGsapConvertToKeyframes(flatAnim.id, hasPosition ? position : undefined);
+
+      const pct = computePercentage(t, sel);
+      if (pct > 1 && pct < 99 && hasPosition && session.handleGsapAddKeyframeBatch) {
+        await session.handleGsapAddKeyframeBatch(flatAnim.id, pct, position);
+        await session.handleGsapAddKeyframeBatch(flatAnim.id, 100, position);
+      }
+    } else {
+      const position = readElementPosition(iframe, sel, null);
+      const pct = computePercentage(t, sel);
+      const elStart = Number.parseFloat(sel.dataAttributes?.start ?? "0") || 0;
+      const elDuration = Number.parseFloat(sel.dataAttributes?.duration ?? "1") || 1;
+      const selector = sel.id ? `#${sel.id}` : sel.selector;
+
+      if (!selector) {
+        session.handleGsapAddAnimation("to");
+        return;
+      }
+
+      if (Object.keys(position).length === 0) {
+        position.x = 0;
+        position.y = 0;
+        position.opacity = 1;
+      }
+
+      const keyframes: Array<{ percentage: number; properties: Record<string, number | string> }> =
+        [{ percentage: 0, properties: { ...position } }];
+      if (pct > 1 && pct < 99) {
+        keyframes.push({ percentage: pct, properties: { ...position } });
+      }
+      keyframes.push({
+        percentage: 100,
+        properties: { ...position },
+        auto: true,
+      } as (typeof keyframes)[number]);
+
+      if (session.commitMutation) {
+        await session.commitMutation(
+          {
+            type: "add-with-keyframes",
+            targetSelector: selector,
+            position: Math.round(elStart * 1000) / 1000,
+            duration: Math.round(elDuration * 1000) / 1000,
+            keyframes,
+          },
+          { label: "Enable keyframes", softReload: true },
+        );
+      } else {
+        session.handleGsapAddAnimation("to");
+      }
+    }
+  }, [sessionRef]);
+}

package/src/hooks/useFileManager.ts

@@ -108,6 +108,12 @@ export function useFileManager({
     }
   }, []);
 
+  const updateEditingFileContent = useCallback((path: string, content: string) => {
+    if (editingPathRef.current === path) {
+      setEditingFile({ path, content });
+    }
+  }, []);
+
   const readOptionalProjectFile = useCallback(async (path: string): Promise<string> => {
     const pid = projectIdRef.current;
     if (!pid) throw new Error("No active project");
@@ -460,6 +466,7 @@ export function useFileManager({
     readProjectFile,
     writeProjectFile,
     readOptionalProjectFile,
+    updateEditingFileContent,
 
     // Click-to-source
     revealSourceOffset,