@hyperframes/studio 0.6.6 → 0.6.7

package/src/hooks/useDomEditCommits.ts

@@ -6,12 +6,21 @@ import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { primaryFontFamilyValue } from "../utils/studioFontHelpers";
 import { getDomEditTargetKey, type DomEditSelection } from "../components/editor/domEditing";
 import {
-  removeStudioManualEditsForSelection,
-  type StudioManualEditManifest,
-  upsertStudioBoxSizeEdit,
-  upsertStudioPathOffsetEdit,
-  upsertStudioRotationEdit,
+  applyStudioPathOffset,
+  applyStudioBoxSize,
+  applyStudioRotation,
+  clearStudioPathOffset,
+  clearStudioBoxSize,
+  clearStudioRotation,
 } from "../components/editor/manualEdits";
+import {
+  buildPathOffsetPatches,
+  buildBoxSizePatches,
+  buildRotationPatches,
+  buildClearPathOffsetPatches,
+  buildClearBoxSizePatches,
+  buildClearRotationPatches,
+} from "../components/editor/manualEditsDom";
 import {
   removeStudioMotionForSelection,
   type StudioGsapMotion,
@@ -48,15 +57,11 @@ export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   showToast: (message: string, tone?: "error" | "info") => void;
-  commitStudioManualEditManifestOptimistically: (
-    updateManifest: (manifest: StudioManualEditManifest) => StudioManualEditManifest,
-    options: { label: string; coalesceKey: string },
-  ) => void;
+  queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
   commitStudioMotionManifestOptimistically: (
     updateManifest: (manifest: StudioMotionManifest) => StudioMotionManifest,
     options: { label: string; coalesceKey: string },
   ) => void;
-  applyCurrentStudioManualEditsToPreview: (iframe: HTMLIFrameElement | null) => void;
   applyCurrentStudioMotionToPreview: (iframe: HTMLIFrameElement | null) => void;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
@@ -69,15 +74,12 @@ export interface UseDomEditCommitsParams {
 
   // From useDomSelection
   domEditSelection: DomEditSelection | null;
-  domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
-  domEditGroupSelectionsRef: React.MutableRefObject<DomEditSelection[]>;
   applyDomSelection: (
     selection: DomEditSelection | null,
     options?: { revealPanel?: boolean; additive?: boolean; preserveGroup?: boolean },
   ) => void;
   clearDomSelection: () => void;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => void;
-  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => void;
   buildDomSelectionFromTarget: (
     target: HTMLElement,
     options?: { preferClipAncestor?: boolean },
@@ -90,9 +92,8 @@ export function useDomEditCommits({
   activeCompPath,
   previewIframeRef,
   showToast,
-  commitStudioManualEditManifestOptimistically,
+  queueDomEditSave,
   commitStudioMotionManifestOptimistically,
-  applyCurrentStudioManualEditsToPreview,
   applyCurrentStudioMotionToPreview,
   writeProjectFile,
   domEditSaveTimestampRef,
@@ -103,11 +104,9 @@ export function useDomEditCommits({
   projectIdRef,
   reloadPreview,
   domEditSelection,
-  domEditGroupSelectionsRef,
   applyDomSelection,
   clearDomSelection,
   refreshDomEditSelectionFromPreview,
-  refreshDomEditGroupSelectionsFromPreview,
   buildDomSelectionFromTarget,
 }: UseDomEditCommitsParams) {
   const resolveImportedFontAsset = useCallback(
@@ -211,98 +210,104 @@ export function useDomEditCommits({
     resolveImportedFontAsset,
   });
 
-  // ── Manifest commits ──
+  // ── Position patch helper ──
+
+  const commitPositionPatchToHtml = useCallback(
+    (
+      selection: DomEditSelection,
+      patches: Parameters<typeof applyPatchByTarget>[2][],
+      options: { label: string; coalesceKey: string; skipRefresh?: boolean },
+    ) => {
+      void queueDomEditSave(async () => {
+        await persistDomEditOperations(selection, patches, {
+          label: options.label,
+          coalesceKey: options.coalesceKey,
+          skipRefresh: options.skipRefresh ?? true,
+        });
+      }).catch((error) => {
+        const message = error instanceof Error ? error.message : "Failed to save position";
+        showToast(message);
+      });
+    },
+    [persistDomEditOperations, queueDomEditSave, showToast],
+  );
+
+  // ── Position commits ──
 
   const handleDomPathOffsetCommit = useCallback(
     (selection: DomEditSelection, next: { x: number; y: number }) => {
-      commitStudioManualEditManifestOptimistically(
-        (manifest) => upsertStudioPathOffsetEdit(manifest, selection, next),
-        {
-          label: "Move layer",
-          coalesceKey: `path-offset:${getDomEditTargetKey(selection)}`,
-        },
-      );
-      refreshDomEditSelectionFromPreview(selection);
+      applyStudioPathOffset(selection.element, next);
+      commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
+        label: "Move layer",
+        coalesceKey: `path-offset:${getDomEditTargetKey(selection)}`,
+      });
     },
-    [commitStudioManualEditManifestOptimistically, refreshDomEditSelectionFromPreview],
+    [commitPositionPatchToHtml],
   );
 
   const handleDomGroupPathOffsetCommit = useCallback(
     (updates: DomEditGroupPathOffsetCommit[]) => {
       if (updates.length === 0) return;
       const coalesceKey = updates
-        .map((update) => getDomEditTargetKey(update.selection))
+        .map((u) => getDomEditTargetKey(u.selection))
         .sort()
         .join(":");
-      commitStudioManualEditManifestOptimistically(
-        (manifest) =>
-          updates.reduce(
-            (nextManifest, update) =>
-              upsertStudioPathOffsetEdit(nextManifest, update.selection, update.next),
-            manifest,
-          ),
-        {
+      for (const { selection, next } of updates) {
+        applyStudioPathOffset(selection.element, next);
+        commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
           label: `Move ${updates.length} layers`,
           coalesceKey: `group-path-offset:${coalesceKey}`,
-        },
-      );
-      refreshDomEditGroupSelectionsFromPreview(domEditGroupSelectionsRef.current);
+        });
+      }
     },
-    [
-      commitStudioManualEditManifestOptimistically,
-      domEditGroupSelectionsRef,
-      refreshDomEditGroupSelectionsFromPreview,
-    ],
+    [commitPositionPatchToHtml],
   );
 
   const handleDomBoxSizeCommit = useCallback(
     (selection: DomEditSelection, next: { width: number; height: number }) => {
-      commitStudioManualEditManifestOptimistically(
-        (manifest) => upsertStudioBoxSizeEdit(manifest, selection, next),
-        {
-          label: "Resize layer box",
-          coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
-        },
-      );
-      refreshDomEditSelectionFromPreview(selection);
+      applyStudioBoxSize(selection.element, next);
+      commitPositionPatchToHtml(selection, buildBoxSizePatches(selection.element), {
+        label: "Resize layer box",
+        coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
+      });
     },
-    [commitStudioManualEditManifestOptimistically, refreshDomEditSelectionFromPreview],
+    [commitPositionPatchToHtml],
   );
 
   const handleDomRotationCommit = useCallback(
     (selection: DomEditSelection, next: { angle: number }) => {
-      commitStudioManualEditManifestOptimistically(
-        (manifest) => upsertStudioRotationEdit(manifest, selection, next),
-        {
-          label: "Rotate layer",
-          coalesceKey: `rotation:${getDomEditTargetKey(selection)}`,
-        },
-      );
-      refreshDomEditSelectionFromPreview(selection);
+      applyStudioRotation(selection.element, next);
+      commitPositionPatchToHtml(selection, buildRotationPatches(selection.element), {
+        label: "Rotate layer",
+        coalesceKey: `rotation:${getDomEditTargetKey(selection)}`,
+      });
     },
-    [commitStudioManualEditManifestOptimistically, refreshDomEditSelectionFromPreview],
+    [commitPositionPatchToHtml],
   );
 
   const handleDomManualEditsReset = useCallback(
     (selection: DomEditSelection) => {
-      commitStudioManualEditManifestOptimistically(
-        (manifest) => removeStudioManualEditsForSelection(manifest, selection),
-        {
-          label: "Reset layer edits",
-          coalesceKey: `manual-reset:${getDomEditTargetKey(selection)}`,
-        },
-      );
-      applyCurrentStudioManualEditsToPreview(previewIframeRef.current);
-      refreshDomEditSelectionFromPreview(selection);
+      const element = selection.element;
+      const clearPatches = [
+        ...buildClearPathOffsetPatches(element),
+        ...buildClearBoxSizePatches(element),
+        ...buildClearRotationPatches(element),
+      ];
+      clearStudioPathOffset(element);
+      clearStudioBoxSize(element);
+      clearStudioRotation(element);
+      // skipRefresh:false triggers reloadPreview() which re-syncs selection on load
+      commitPositionPatchToHtml(selection, clearPatches, {
+        label: "Reset layer edits",
+        coalesceKey: `manual-reset:${getDomEditTargetKey(selection)}`,
+        skipRefresh: false,
+      });
     },
-    [
-      applyCurrentStudioManualEditsToPreview,
-      commitStudioManualEditManifestOptimistically,
-      refreshDomEditSelectionFromPreview,
-      previewIframeRef,
-    ],
+    [commitPositionPatchToHtml],
   );
 
+  // ── Motion commits ──
+
   const handleDomMotionCommit = useCallback(
     (
       selection: DomEditSelection,

package/src/hooks/useDomEditSession.ts

@@ -2,7 +2,6 @@ import { useEffect } from "react";
 import type { TimelineElement } from "../player";
 import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
 import { findElementForSelection } from "../components/editor/domEditing";
-import type { StudioManualEditManifest } from "../components/editor/manualEdits";
 import type { StudioMotionManifest } from "../components/editor/studioMotion";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
@@ -36,15 +35,11 @@ export interface UseDomEditSessionParams {
   setRightPanelTab: (tab: RightPanelTab) => void;
   showToast: (message: string, tone?: "error" | "info") => void;
   refreshPreviewDocumentVersion: () => void;
-  commitStudioManualEditManifestOptimistically: (
-    updateManifest: (manifest: StudioManualEditManifest) => StudioManualEditManifest,
-    options: { label: string; coalesceKey: string },
-  ) => void;
+  queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
   commitStudioMotionManifestOptimistically: (
     updateManifest: (manifest: StudioMotionManifest) => StudioMotionManifest,
     options: { label: string; coalesceKey: string },
   ) => void;
-  applyCurrentStudioManualEditsToPreview: (iframe: HTMLIFrameElement | null) => void;
   applyCurrentStudioMotionToPreview: (iframe: HTMLIFrameElement | null) => void;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
@@ -85,9 +80,8 @@ export function useDomEditSession({
   setRightPanelTab,
   showToast,
   refreshPreviewDocumentVersion,
-  commitStudioManualEditManifestOptimistically,
+  queueDomEditSave,
   commitStudioMotionManifestOptimistically,
-  applyCurrentStudioManualEditsToPreview,
   applyCurrentStudioMotionToPreview,
   readProjectFile: _readProjectFile,
   writeProjectFile,
@@ -114,7 +108,6 @@ export function useDomEditSession({
     domEditGroupSelections,
     domEditHoverSelection,
     domEditSelectionRef,
-    domEditGroupSelectionsRef,
     applyDomSelection,
     clearDomSelection,
     buildDomSelectionFromTarget,
@@ -123,7 +116,6 @@ export function useDomEditSession({
     buildDomSelectionForTimelineElement,
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
-    refreshDomEditGroupSelectionsFromPreview,
   } = useDomSelection({
     projectId,
     activeCompPath,
@@ -176,7 +168,6 @@ export function useDomEditSession({
     captionEditMode,
     compositionLoading,
     previewIframeRef,
-    activeCompPath,
     showToast,
     applyDomSelection,
     resolveDomSelectionFromPreviewPoint,
@@ -208,9 +199,8 @@ export function useDomEditSession({
     activeCompPath,
     previewIframeRef,
     showToast,
-    commitStudioManualEditManifestOptimistically,
+    queueDomEditSave,
     commitStudioMotionManifestOptimistically,
-    applyCurrentStudioManualEditsToPreview,
     applyCurrentStudioMotionToPreview,
     writeProjectFile,
     domEditSaveTimestampRef,
@@ -221,12 +211,9 @@ export function useDomEditSession({
     projectIdRef,
     reloadPreview,
     domEditSelection,
-    domEditSelectionRef,
-    domEditGroupSelectionsRef,
     applyDomSelection,
     clearDomSelection,
     refreshDomEditSelectionFromPreview,
-    refreshDomEditGroupSelectionsFromPreview,
     buildDomSelectionFromTarget,
   });
 
@@ -333,6 +320,7 @@ export function useDomEditSession({
     handleBlockedDomMove,
     handleDomManualDragStart,
     handleDomEditElementDelete,
+    buildDomSelectionFromTarget,
     buildDomSelectionForTimelineElement,
     updateDomEditHoverSelection,
     resolveImportedFontAsset,

package/src/hooks/useFileManager.ts

@@ -36,6 +36,7 @@ export function useFileManager({
   const [editingFile, setEditingFile] = useState<EditingFile | null>(null);
   const [projectDir, setProjectDir] = useState<string | null>(null);
   const [fileTree, setFileTree] = useState<string[]>([]);
+  const [fileTreeLoaded, setFileTreeLoaded] = useState(false);
 
   // ── Refs ──
 
@@ -53,8 +54,12 @@ export function useFileManager({
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (!projectId) return;
+    if (!projectId) {
+      setFileTreeLoaded(false);
+      return;
+    }
     let cancelled = false;
+    setFileTreeLoaded(false);
     fetch(`/api/projects/${projectId}`)
       .then((r) => r.json())
       .then((data: { files?: string[]; dir?: string }) => {
@@ -63,6 +68,9 @@ export function useFileManager({
       })
       .catch(() => {
         if (!cancelled) setProjectDir(null);
+      })
+      .finally(() => {
+        if (!cancelled) setFileTreeLoaded(true);
       });
     return () => {
       cancelled = true;
@@ -396,6 +404,7 @@ export function useFileManager({
     setEditingFile,
     projectDir,
     fileTree,
+    fileTreeLoaded,
     setFileTree,
 
     // Refs