fix(studio): journal source writebacks (#1388)

packages/studio/src/hooks/useDomEditCommits.ts

@@ -33,7 +33,6 @@ import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditO
 import type { EditHistoryKind } from "../utils/editHistory";
 import { useDomEditTextCommits } from "./useDomEditTextCommits";
 
-// ── Helpers ──
 type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
 
 export const GSAP_CSS_FALLBACK_BLOCKED_MESSAGE =
@@ -70,8 +69,6 @@ function isElementGsapTargeted(iframe: HTMLIFrameElement | null, element: HTMLEl
   return false;
 }
 
-// ── Types ──
-
 interface RecordEditInput {
   label: string;
   kind: EditHistoryKind;
@@ -105,7 +102,6 @@ export interface UseDomEditCommitsParams {
   projectIdRef: React.MutableRefObject<string | null>;
   reloadPreview: () => void;
 
-  // From useDomSelection
   domEditSelection: DomEditSelection | null;
   applyDomSelection: (
     selection: DomEditSelection | null,
@@ -119,8 +115,6 @@ export interface UseDomEditCommitsParams {
   ) => Promise<DomEditSelection | null>;
 }
 
-// ── Hook ──
-
 export function useDomEditCommits({
   activeCompPath,
   previewIframeRef,
@@ -209,6 +203,7 @@ export function useDomEditCommits({
         changed?: boolean;
         matched?: boolean;
         content?: string;
+        path?: string;
       };
 
       if (!patchData.changed) {
@@ -248,6 +243,7 @@ export function useDomEditCommits({
         coalesceKey: options?.coalesceKey,
         files: { [targetPath]: { before: originalContent, after: finalContent } },
       });
+      showToast(`Updated ${patchData.path ?? targetPath}`, "info");
 
       if (!options?.skipRefresh) {
         reloadPreview();
@@ -260,6 +256,7 @@ export function useDomEditCommits({
       projectIdRef,
       domEditSaveTimestampRef,
       reloadPreview,
+      showToast,
     ],
   );
 

packages/studio/src/hooks/useDomEditSession.ts

@@ -285,6 +285,7 @@ export function useDomEditSession({
     reloadPreview,
     onCacheInvalidate: bumpGsapCache,
     onFileContentChanged: updateEditingFileContent,
+    showToast,
   });
 
   // ── Commit handlers (delegated to useDomEditCommits) ──

packages/studio/src/hooks/useGsapScriptCommits.ts

@@ -56,6 +56,7 @@ interface MutationResult {
   before?: string;
   after?: string;
   scriptText?: string;
+  path?: string;
 }
 
 async function mutateGsapScript(
@@ -94,6 +95,7 @@ interface GsapScriptCommitsParams {
   reloadPreview: () => void;
   onCacheInvalidate: () => void;
   onFileContentChanged?: (path: string, content: string) => void;
+  showToast?: (message: string, tone?: "error" | "info") => void;
 }
 const DEBOUNCE_MS = 150;
 
@@ -107,6 +109,7 @@ export function useGsapScriptCommits({
   reloadPreview,
   onCacheInvalidate,
   onFileContentChanged,
+  showToast,
 }: GsapScriptCommitsParams) {
   const pendingPropertyEditRef = useRef<{
     selection: DomEditSelection;
@@ -157,6 +160,7 @@ export function useGsapScriptCommits({
       if (result.after != null) {
         onFileContentChanged?.(targetPath, result.after);
       }
+      showToast?.(`Updated ${result.path ?? targetPath}`, "info");
 
       if (options.skipReload) return;
 
@@ -195,6 +199,7 @@ export function useGsapScriptCommits({
       reloadPreview,
       onCacheInvalidate,
       onFileContentChanged,
+      showToast,
     ],
   );
   const flushPendingPropertyEdit = useCallback(() => {