@hyperframes/studio 0.6.97 → 0.6.98

package/src/hooks/useFileManager.ts

@@ -1,16 +1,16 @@
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { useState, useCallback, useRef } from "react";
 import type { EditingFile } from "../utils/studioHelpers";
 import { FONT_EXT, isMediaFile } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
-import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import type { EditHistoryKind } from "../utils/editHistory";
 import { findTagByTarget, type PatchTarget } from "../utils/sourcePatcher";
-import { trackStudioEvent } from "../utils/studioTelemetry";
 import {
   createStudioSaveHttpError,
   retryStudioSave,
   StudioSaveNetworkError,
 } from "../utils/studioSaveDiagnostics";
+import { useFileTree } from "./useFileTree";
+import { useEditorSave } from "./useEditorSave";
 
 // ── Types ──
 
@@ -38,54 +38,31 @@ export function useFileManager({
   domEditSaveTimestampRef,
   setRefreshKey,
 }: UseFileManagerOptions) {
-  // ── State ──
+  // ── Shared refs ──
 
   const [editingFile, setEditingFile] = useState<EditingFile | null>(null);
-  const [projectDir, setProjectDir] = useState<string | null>(null);
-  const [fileTree, setFileTree] = useState<string[]>([]);
-  const [compositionPaths, setCompositionPaths] = useState<string[]>([]);
-  const [fileTreeLoaded, setFileTreeLoaded] = useState(false);
   const [revealSourceOffset, setRevealSourceOffset] = useState<number | null>(null);
 
-  // ── Refs ──
-
   const editingPathRef = useRef(editingFile?.path);
   editingPathRef.current = editingFile?.path;
 
   const projectIdRef = useRef(projectId);
   projectIdRef.current = projectId;
 
-  const saveRafRef = useRef<number | null>(null);
-  const refreshRafRef = useRef<number | null>(null);
   const importedFontAssetsRef = useRef<ImportedFontAsset[]>([]);
 
-  // ── Load file tree when projectId changes ──
+  // ── File tree ──
 
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (!projectId) {
-      setFileTreeLoaded(false);
-      return;
-    }
-    let cancelled = false;
-    setFileTreeLoaded(false);
-    fetch(`/api/projects/${projectId}`)
-      .then((r) => r.json())
-      .then((data: { files?: string[]; dir?: string; compositions?: string[] }) => {
-        if (!cancelled && data.files) setFileTree(data.files);
-        if (!cancelled && data.compositions) setCompositionPaths(data.compositions);
-        if (!cancelled) setProjectDir(typeof data.dir === "string" ? data.dir : null);
-      })
-      .catch(() => {
-        if (!cancelled) setProjectDir(null);
-      })
-      .finally(() => {
-        if (!cancelled) setFileTreeLoaded(true);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [projectId]);
+  const {
+    projectDir,
+    fileTree,
+    setFileTree,
+    fileTreeLoaded,
+    refreshFileTree,
+    compositions,
+    assets,
+    fontAssets,
+  } = useFileTree({ projectId, projectIdRef });
 
   // ── Core file I/O ──
 
@@ -139,8 +116,23 @@ export function useFileManager({
     return typeof data.content === "string" ? data.content : "";
   }, []);
 
+  // ── Editor save (debounced content change) ──
+
+  const { saveRafRef, handleContentChange } = useEditorSave({
+    editingPathRef,
+    projectIdRef,
+    readProjectFile,
+    writeProjectFile,
+    recordEdit,
+    domEditSaveTimestampRef,
+    setRefreshKey,
+  });
+
   // ── File select ──
 
+  const revealRequestIdRef = useRef(0);
+  const revealAbortRef = useRef<AbortController | null>(null);
+
   const handleFileSelect = useCallback((path: string) => {
     const pid = projectIdRef.current;
     if (!pid) return;
@@ -162,47 +154,7 @@ export function useFileManager({
       .catch(() => {});
   }, []);
 
-  // ── Content change (debounced save) ──
-
-  const handleContentChange = useCallback(
-    (content: string) => {
-      const pid = projectIdRef.current;
-      if (!pid) return;
-      const path = editingPathRef.current;
-      if (!path) return;
-
-      if (saveRafRef.current != null) cancelAnimationFrame(saveRafRef.current);
-      saveRafRef.current = requestAnimationFrame(() => {
-        domEditSaveTimestampRef.current = Date.now();
-        saveProjectFilesWithHistory({
-          projectId: pid,
-          label: "Edit source",
-          kind: "source",
-          coalesceKey: `source:${path}`,
-          files: { [path]: content },
-          readFile: readProjectFile,
-          writeFile: writeProjectFile,
-          recordEdit,
-        })
-          .then(() => {
-            if (refreshRafRef.current != null) cancelAnimationFrame(refreshRafRef.current);
-            refreshRafRef.current = requestAnimationFrame(() => setRefreshKey((k) => k + 1));
-          })
-          .catch((error) => {
-            trackStudioEvent("save_failure", {
-              source: "code_editor",
-              error_message: error instanceof Error ? error.message : "unknown",
-            });
-          });
-      });
-    },
-    [domEditSaveTimestampRef, readProjectFile, recordEdit, setRefreshKey, writeProjectFile],
-  );
-
-  // ── Open source for selection (click-to-source) ──
-
-  const revealRequestIdRef = useRef(0);
-  const revealAbortRef = useRef<AbortController | null>(null);
+  // ── Click-to-source ──
 
   const openSourceForSelection = useCallback(
     (sourceFile: string, target: PatchTarget) => {
@@ -235,16 +187,6 @@ export function useFileManager({
     [editingFile?.content],
   );
 
-  // ── File tree refresh ──
-
-  const refreshFileTree = useCallback(async () => {
-    const pid = projectIdRef.current;
-    if (!pid) return;
-    const res = await fetch(`/api/projects/${pid}`);
-    const data = await res.json();
-    if (data.files) setFileTree(data.files);
-  }, []);
-
   // ── Upload ──
 
   const uploadProjectFiles = useCallback(
@@ -289,7 +231,7 @@ export function useFileManager({
     [refreshFileTree, setRefreshKey, showToast],
   );
 
-  // ── File management handlers ──
+  // ── File CRUD ──
 
   const handleCreateFile = useCallback(
     async (path: string) => {
@@ -320,7 +262,6 @@ export function useFileManager({
     async (path: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      // Create a .gitkeep inside the folder so it appears in the tree
       const res = await fetch(
         `/api/projects/${pid}/files/${encodeURIComponent(path + "/.gitkeep")}`,
         {
@@ -371,7 +312,6 @@ export function useFileManager({
           handleFileSelect(newPath);
         }
         await refreshFileTree();
-        // Refresh preview — references in compositions may have been updated
         setRefreshKey((k) => k + 1);
       } else {
         const err = await res.json().catch(() => ({ error: "unknown" }));
@@ -437,28 +377,6 @@ export function useFileManager({
     [uploadProjectFiles],
   );
 
-  // ── Derived state ──
-
-  const compositions = compositionPaths;
-
-  const assets = useMemo(
-    () =>
-      fileTree.filter((f) => !f.endsWith(".html") && !f.endsWith(".md") && !f.endsWith(".json")),
-    [fileTree],
-  );
-
-  const fontAssets = useMemo<ImportedFontAsset[]>(
-    () =>
-      assets
-        .filter((asset) => FONT_EXT.test(asset))
-        .map((asset) => ({
-          family: fontFamilyFromAssetPath(asset),
-          path: asset,
-          url: `/api/projects/${projectId}/preview/${asset}`,
-        })),
-    [assets, projectId],
-  );
-
   // ── Return ──
 
   return {

package/src/hooks/useFileTree.ts

@@ -0,0 +1,80 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { FONT_EXT } from "../utils/mediaTypes";
+import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
+
+interface UseFileTreeOptions {
+  projectId: string | null;
+  projectIdRef: React.RefObject<string | null>;
+}
+
+export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
+  const [projectDir, setProjectDir] = useState<string | null>(null);
+  const [fileTree, setFileTree] = useState<string[]>([]);
+  const [compositionPaths, setCompositionPaths] = useState<string[]>([]);
+  const [fileTreeLoaded, setFileTreeLoaded] = useState(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!projectId) {
+      setFileTreeLoaded(false);
+      return;
+    }
+    let cancelled = false;
+    setFileTreeLoaded(false);
+    fetch(`/api/projects/${projectId}`)
+      .then((r) => r.json())
+      .then((data: { files?: string[]; dir?: string; compositions?: string[] }) => {
+        if (!cancelled && data.files) setFileTree(data.files);
+        if (!cancelled && data.compositions) setCompositionPaths(data.compositions);
+        if (!cancelled) setProjectDir(typeof data.dir === "string" ? data.dir : null);
+      })
+      .catch(() => {
+        if (!cancelled) setProjectDir(null);
+      })
+      .finally(() => {
+        if (!cancelled) setFileTreeLoaded(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId]);
+
+  const refreshFileTree = useCallback(async () => {
+    const pid = projectIdRef.current;
+    if (!pid) return;
+    const res = await fetch(`/api/projects/${pid}`);
+    const data = await res.json();
+    if (data.files) setFileTree(data.files);
+  }, [projectIdRef]);
+
+  const compositions = compositionPaths;
+
+  const assets = useMemo(
+    () =>
+      fileTree.filter((f) => !f.endsWith(".html") && !f.endsWith(".md") && !f.endsWith(".json")),
+    [fileTree],
+  );
+
+  const fontAssets = useMemo<ImportedFontAsset[]>(
+    () =>
+      assets
+        .filter((asset) => FONT_EXT.test(asset))
+        .map((asset) => ({
+          family: fontFamilyFromAssetPath(asset),
+          path: asset,
+          url: `/api/projects/${projectId}/preview/${asset}`,
+        })),
+    [assets, projectId],
+  );
+
+  return {
+    projectDir,
+    fileTree,
+    setFileTree,
+    fileTreeLoaded,
+    refreshFileTree,
+    compositions,
+    assets,
+    fontAssets,
+  };
+}

package/src/hooks/useGestureCommit.ts

@@ -8,6 +8,7 @@ import { simplifyGestureSamples } from "../utils/rdpSimplify";
 import { usePlayerStore } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { roundTo3 } from "../utils/rounding";
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 
 // Minimal subset of the session used by gesture commit
@@ -74,7 +75,8 @@ export function useGestureCommit({
         }
         return;
       }
-      const duration = frozenSamples.length > 0 ? frozenSamples[frozenSamples.length - 1]!.time : 0;
+      const duration =
+        frozenSamples.length > 0 ? (frozenSamples[frozenSamples.length - 1]?.time ?? 0) : 0;
 
       if (frozenSamples.length <= 2) {
         showToast("No gesture detected — move the pointer while recording", "error");
@@ -171,8 +173,8 @@ export function useGestureCommit({
               {
                 type: "add-with-keyframes",
                 targetSelector: selector,
-                position: Math.round(recStart * 1000) / 1000,
-                duration: Math.round(duration * 1000) / 1000,
+                position: roundTo3(recStart),
+                duration: roundTo3(duration),
                 keyframes,
               },
               { label: "Gesture recording (new range)", softReload: true },
@@ -183,8 +185,8 @@ export function useGestureCommit({
             {
               type: "add-with-keyframes",
               targetSelector: selector,
-              position: Math.round(recStart * 1000) / 1000,
-              duration: Math.round(duration * 1000) / 1000,
+              position: roundTo3(recStart),
+              duration: roundTo3(duration),
               keyframes,
             },
             { label: "Gesture recording", softReload: true },

package/src/hooks/useGestureRecording.ts

@@ -430,7 +430,7 @@ export function useGestureRecording() {
     r.cleanup?.();
     r.cleanup = null;
     const frozen = r.samples.slice();
-    setRecordingDuration(frozen.length > 0 ? frozen[frozen.length - 1]!.time : 0);
+    setRecordingDuration(frozen.length > 0 ? (frozen[frozen.length - 1]?.time ?? 0) : 0);
     setIsRecording(false);
     return frozen;
   }, []); // No deps — uses refs only

package/src/hooks/useGsapAnimationOps.ts

@@ -0,0 +1,122 @@
+import { useCallback } from "react";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { roundTo3 } from "../utils/rounding";
+import {
+  assignGsapTargetAutoIdIfNeeded,
+  ensureElementAddressable,
+} from "./gsapScriptCommitHelpers";
+import type { CommitMutation, SafeGsapCommitMutation } from "./gsapScriptCommitTypes";
+
+interface GsapAnimationOpsParams {
+  projectIdRef: React.MutableRefObject<string | null>;
+  activeCompPath: string | null;
+  commitMutation: CommitMutation;
+  commitMutationSafely: SafeGsapCommitMutation;
+  showToast: (message: string, tone?: "error" | "info") => void;
+}
+
+export function useGsapAnimationOps({
+  projectIdRef,
+  activeCompPath,
+  commitMutation,
+  commitMutationSafely,
+  showToast,
+}: GsapAnimationOpsParams) {
+  const updateGsapMeta = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      updates: { duration?: number; ease?: string; position?: number },
+    ) => {
+      commitMutationSafely(
+        selection,
+        { type: "update-meta", animationId, updates },
+        {
+          label: "Edit GSAP animation",
+          coalesceKey: `gsap:${animationId}:meta`,
+        },
+      );
+    },
+    [commitMutationSafely],
+  );
+
+  const deleteGsapAnimation = useCallback(
+    (selection: DomEditSelection, animationId: string) => {
+      commitMutationSafely(
+        selection,
+        { type: "delete", animationId, stripStudioEdits: true },
+        { label: "Delete GSAP animation" },
+      );
+    },
+    [commitMutationSafely],
+  );
+
+  const deleteAllForSelector = useCallback(
+    (selection: DomEditSelection, targetSelector: string) => {
+      void commitMutation(
+        selection,
+        { type: "delete-all-for-selector", targetSelector },
+        { label: "Delete all animations for element" },
+      );
+    },
+    [commitMutation],
+  );
+
+  const addGsapAnimation = useCallback(
+    async (
+      selection: DomEditSelection,
+      method: "to" | "from" | "set" | "fromTo",
+      _currentTime?: number,
+    ) => {
+      const { selector, autoId } = ensureElementAddressable(selection);
+
+      if (autoId) {
+        const pid = projectIdRef.current;
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        if (!pid) return;
+        const assigned = await assignGsapTargetAutoIdIfNeeded({
+          projectId: pid,
+          targetPath,
+          selection,
+          autoId,
+          showToast,
+        });
+        if (!assigned) return;
+      }
+
+      const elStart = Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0;
+      const elDuration = Number.parseFloat(selection.dataAttributes?.duration ?? "1") || 1;
+      const position = roundTo3(elStart);
+      const duration = roundTo3(elDuration);
+      const toDefaults: Record<string, Record<string, number>> = {
+        from: { opacity: 0 },
+        to: { x: 0, y: 0, opacity: 1 },
+        set: { opacity: 1 },
+        fromTo: { x: 0, y: 0, opacity: 1 },
+      };
+
+      await commitMutation(
+        selection,
+        {
+          type: "add",
+          targetSelector: selector,
+          method,
+          position,
+          duration: method === "set" ? undefined : duration,
+          ease: method === "set" ? undefined : "power2.out",
+          properties: toDefaults[method] ?? { opacity: 1 },
+          fromProperties: method === "fromTo" ? { opacity: 0 } : undefined,
+        },
+        { label: `Add GSAP ${method} animation` },
+      );
+    },
+    [activeCompPath, commitMutation, projectIdRef, showToast],
+  );
+
+  return {
+    updateGsapMeta,
+    deleteGsapAnimation,
+    deleteAllForSelector,
+    addGsapAnimation,
+  };
+}

package/src/hooks/useGsapArcPathOps.ts

@@ -0,0 +1,61 @@
+import { useCallback } from "react";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import type { SafeGsapCommitMutation } from "./gsapScriptCommitTypes";
+
+export function useGsapArcPathOps(commitMutationSafely: SafeGsapCommitMutation) {
+  const setArcPath = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      config: {
+        enabled: boolean;
+        autoRotate?: boolean | number;
+        segments?: Array<{
+          curviness: number;
+          cp1?: { x: number; y: number };
+          cp2?: { x: number; y: number };
+        }>;
+      },
+    ) => {
+      commitMutationSafely(
+        selection,
+        { type: "set-arc-path" as const, animationId, ...config },
+        { label: config.enabled ? "Enable arc path" : "Disable arc path", softReload: true },
+      );
+    },
+    [commitMutationSafely],
+  );
+
+  const updateArcSegment = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      segmentIndex: number,
+      update: {
+        curviness?: number;
+        cp1?: { x: number; y: number };
+        cp2?: { x: number; y: number };
+      },
+    ) => {
+      commitMutationSafely(
+        selection,
+        { type: "update-arc-segment" as const, animationId, segmentIndex, ...update },
+        { label: "Update arc segment", softReload: true },
+      );
+    },
+    [commitMutationSafely],
+  );
+
+  const removeArcPath = useCallback(
+    (selection: DomEditSelection, animationId: string) => {
+      commitMutationSafely(
+        selection,
+        { type: "remove-arc-path" as const, animationId },
+        { label: "Remove arc path", softReload: true },
+      );
+    },
+    [commitMutationSafely],
+  );
+
+  return { setArcPath, updateArcSegment, removeArcPath };
+}