@hyperframes/studio 0.6.73 → 0.6.75

package/src/hooks/useDomEditSession.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import type { TimelineElement } from "../player";
+import { usePlayerStore } from "../player";
 import {
   STUDIO_INSPECTOR_PANELS_ENABLED,
   STUDIO_GSAP_PANEL_ENABLED,
@@ -16,7 +17,20 @@ import { useDomSelection } from "./useDomSelection";
 import { usePreviewInteraction } from "./usePreviewInteraction";
 import { useDomEditCommits } from "./useDomEditCommits";
 import { useGsapScriptCommits } from "./useGsapScriptCommits";
-import { useGsapAnimationsForElement, useGsapCacheVersion } from "./useGsapTweenCache";
+import {
+  useGsapAnimationsForElement,
+  useGsapCacheVersion,
+  usePopulateKeyframeCacheForFile,
+  fetchParsedAnimations,
+  getAnimationsForElement,
+} from "./useGsapTweenCache";
+import {
+  tryGsapDragIntercept,
+  tryGsapResizeIntercept,
+  tryGsapRotationIntercept,
+} from "./gsapRuntimeBridge";
+import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
+import { useGsapSelectionHandlers } from "./useGsapSelectionHandlers";
 
 // ── Types ──
 
@@ -194,17 +208,37 @@ export function useDomEditSession({
     onClickToSource,
   });
 
+  // Sync DOM selection → timeline selectedElementId so that clip selection
+  // highlights and diamond playhead fills work on cold-load URL restore.
+  useEffect(() => {
+    if (!domEditSelection?.id) return;
+    const { selectedElementId, elements, setSelectedElementId } = usePlayerStore.getState();
+    const matchKey = elements.find(
+      (el) => el.domId === domEditSelection.id || el.id === domEditSelection.id,
+    );
+    const key = matchKey ? (matchKey.key ?? matchKey.id) : null;
+    if (key && key !== selectedElementId) setSelectedElementId(key);
+  }, [domEditSelection?.id]);
+
   // ── GSAP script editing ──
 
   const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
 
+  const gsapSourceFile = domEditSelection?.sourceFile || activeCompPath || "index.html";
+
+  usePopulateKeyframeCacheForFile(
+    STUDIO_GSAP_PANEL_ENABLED ? (projectId ?? null) : null,
+    gsapSourceFile,
+    gsapCacheVersion,
+  );
+
   const {
     animations: selectedGsapAnimations,
     multipleTimelines: gsapMultipleTimelines,
     unsupportedTimelinePattern: gsapUnsupportedTimelinePattern,
   } = useGsapAnimationsForElement(
     STUDIO_GSAP_PANEL_ENABLED ? (projectId ?? null) : null,
-    domEditSelection?.sourceFile || activeCompPath || "index.html",
+    gsapSourceFile,
     domEditSelection
       ? { id: domEditSelection.id ?? null, selector: domEditSelection.selector ?? null }
       : null,
@@ -212,6 +246,7 @@ export function useDomEditSession({
   );
 
   const {
+    commitMutation: gsapCommitMutation,
     updateGsapProperty,
     updateGsapMeta,
     deleteGsapAnimation,
@@ -221,6 +256,10 @@ export function useDomEditSession({
     updateGsapFromProperty,
     addGsapFromProperty,
     removeGsapFromProperty,
+    addKeyframe,
+    removeKeyframe,
+    convertToKeyframes,
+    removeAllKeyframes,
   } = useGsapScriptCommits({
     projectIdRef,
     activeCompPath,
@@ -250,6 +289,7 @@ export function useDomEditSession({
     handleDomMotionCommit,
     handleDomMotionClear,
     handleDomEditElementDelete,
+    handleDomZIndexReorderCommit,
   } = useDomEditCommits({
     activeCompPath,
     previewIframeRef,
@@ -270,77 +310,144 @@ export function useDomEditSession({
     buildDomSelectionFromTarget,
   });
 
-  const handleGsapUpdateProperty = useCallback(
-    (animId: string, prop: string, value: number | string) => {
-      if (!domEditSelection) return;
-      updateGsapProperty(domEditSelection, animId, prop, value);
-    },
-    [domEditSelection, updateGsapProperty],
-  );
-
-  const handleGsapUpdateMeta = useCallback(
-    (animId: string, updates: { duration?: number; ease?: string; position?: number }) => {
-      if (!domEditSelection) return;
-      updateGsapMeta(domEditSelection, animId, updates);
-    },
-    [domEditSelection, updateGsapMeta],
-  );
-
-  const handleGsapDeleteAnimation = useCallback(
-    (animId: string) => {
-      if (!domEditSelection) return;
-      deleteGsapAnimation(domEditSelection, animId);
-    },
-    [domEditSelection, deleteGsapAnimation],
-  );
-
-  const handleGsapAddAnimation = useCallback(
-    (method: "to" | "from" | "set" | "fromTo") => {
-      if (!domEditSelection) return;
-      addGsapAnimation(domEditSelection, method, currentTime);
+  // GSAP-aware: intercept offset/resize/rotation to commit via script mutation when animated.
+  const handleGsapAwarePathOffsetCommit = useCallback(
+    async (selection: DomEditSelection, next: { x: number; y: number }) => {
+      if (gsapCommitMutation) {
+        const handled = await tryGsapDragIntercept(
+          selection,
+          next,
+          selectedGsapAnimations,
+          previewIframeRef.current,
+          gsapCommitMutation,
+          async () => {
+            const pid = projectId;
+            if (!pid) return [];
+            const parsed = await fetchParsedAnimations(pid, gsapSourceFile);
+            if (!parsed) return [];
+            const target = { id: selection.id ?? null, selector: selection.selector ?? null };
+            return getAnimationsForElement(parsed.animations, target);
+          },
+        );
+        if (handled) return;
+      }
+      handleDomPathOffsetCommit(selection, next);
     },
-    [domEditSelection, addGsapAnimation, currentTime],
+    [
+      handleDomPathOffsetCommit,
+      selectedGsapAnimations,
+      gsapCommitMutation,
+      previewIframeRef,
+      projectId,
+      gsapSourceFile,
+    ],
   );
 
-  const handleGsapAddProperty = useCallback(
-    (animId: string, prop: string) => {
-      if (!domEditSelection) return;
-      addGsapProperty(domEditSelection, animId, prop);
+  const makeFetchFallback = useCallback(
+    (selection: DomEditSelection) => async () => {
+      const pid = projectId;
+      if (!pid) return [];
+      const parsed = await fetchParsedAnimations(pid, gsapSourceFile);
+      if (!parsed) return [];
+      return getAnimationsForElement(parsed.animations, {
+        id: selection.id ?? null,
+        selector: selection.selector ?? null,
+      });
     },
-    [domEditSelection, addGsapProperty],
+    [projectId, gsapSourceFile],
   );
 
-  const handleGsapRemoveProperty = useCallback(
-    (animId: string, prop: string) => {
-      if (!domEditSelection) return;
-      removeGsapProperty(domEditSelection, animId, prop);
+  const handleGsapAwareBoxSizeCommit = useCallback(
+    async (selection: DomEditSelection, next: { width: number; height: number }) => {
+      if (gsapCommitMutation) {
+        const handled = await tryGsapResizeIntercept(
+          selection,
+          next,
+          selectedGsapAnimations,
+          previewIframeRef.current,
+          gsapCommitMutation,
+          makeFetchFallback(selection),
+        );
+        if (handled) return;
+      }
+      handleDomBoxSizeCommit(selection, next);
     },
-    [domEditSelection, removeGsapProperty],
+    [
+      handleDomBoxSizeCommit,
+      selectedGsapAnimations,
+      gsapCommitMutation,
+      previewIframeRef,
+      makeFetchFallback,
+    ],
   );
 
-  const handleGsapUpdateFromProperty = useCallback(
-    (animId: string, prop: string, value: number | string) => {
-      if (!domEditSelection) return;
-      updateGsapFromProperty(domEditSelection, animId, prop, value);
+  const handleGsapAwareRotationCommit = useCallback(
+    async (selection: DomEditSelection, next: { angle: number }) => {
+      if (gsapCommitMutation) {
+        const handled = await tryGsapRotationIntercept(
+          selection,
+          next.angle,
+          selectedGsapAnimations,
+          previewIframeRef.current,
+          gsapCommitMutation,
+          makeFetchFallback(selection),
+        );
+        if (handled) return;
+      }
+      handleDomRotationCommit(selection, next);
     },
-    [domEditSelection, updateGsapFromProperty],
+    [
+      handleDomRotationCommit,
+      selectedGsapAnimations,
+      gsapCommitMutation,
+      previewIframeRef,
+      makeFetchFallback,
+    ],
   );
 
-  const handleGsapAddFromProperty = useCallback(
-    (animId: string, prop: string) => {
-      if (!domEditSelection) return;
-      addGsapFromProperty(domEditSelection, animId, prop);
-    },
-    [domEditSelection, addGsapFromProperty],
-  );
+  const {
+    handleGsapUpdateProperty,
+    handleGsapUpdateMeta,
+    handleGsapDeleteAnimation,
+    handleGsapAddAnimation,
+    handleGsapAddProperty,
+    handleGsapRemoveProperty,
+    handleGsapUpdateFromProperty,
+    handleGsapAddFromProperty,
+    handleGsapRemoveFromProperty,
+    handleGsapAddKeyframe,
+    handleGsapRemoveKeyframe,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveAllKeyframes,
+    handleResetSelectedElementKeyframes,
+  } = useGsapSelectionHandlers({
+    domEditSelection,
+    updateGsapProperty,
+    updateGsapMeta,
+    deleteGsapAnimation,
+    addGsapAnimation,
+    addGsapProperty,
+    removeGsapProperty,
+    updateGsapFromProperty,
+    addGsapFromProperty,
+    removeGsapFromProperty,
+    addKeyframe,
+    removeKeyframe,
+    convertToKeyframes,
+    removeAllKeyframes,
+    currentTime,
+    handleDomManualEditsReset,
+    selectedGsapAnimations,
+  });
 
-  const handleGsapRemoveFromProperty = useCallback(
-    (animId: string, prop: string) => {
-      if (!domEditSelection) return;
-      removeGsapFromProperty(domEditSelection, animId, prop);
-    },
-    [domEditSelection, removeGsapFromProperty],
-  );
+  const commitAnimatedProperty = useAnimatedPropertyCommit({
+    selectedGsapAnimations,
+    gsapCommitMutation,
+    addGsapAnimation: (sel, method, time) => addGsapAnimation(sel, method, time),
+    convertToKeyframes: (sel, animId) => convertToKeyframes(sel, animId),
+    previewIframeRef,
+    bumpGsapCache,
+  });
 
   // Sync selection from preview document on load / refresh
   // eslint-disable-next-line no-restricted-syntax
@@ -431,10 +538,8 @@ export function useDomEditSession({
     agentModalAnchorPoint,
     copiedAgentPrompt,
     agentPromptSelectionContext,
-
     // Refs
     domEditSelectionRef,
-
     // Callbacks
     handleTimelineElementSelect,
     handlePreviewCanvasMouseDown,
@@ -445,10 +550,11 @@ export function useDomEditSession({
     handleDomStyleCommit,
     handleDomAttributeCommit,
     handleDomHtmlAttributeCommit,
-    handleDomPathOffsetCommit,
+    handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit,
-    handleDomBoxSizeCommit,
-    handleDomRotationCommit,
+    handleDomZIndexReorderCommit,
+    handleDomBoxSizeCommit: handleGsapAwareBoxSizeCommit,
+    handleDomRotationCommit: handleGsapAwareRotationCommit,
     handleDomManualEditsReset,
     handleDomMotionCommit,
     handleDomMotionClear,
@@ -482,5 +588,13 @@ export function useDomEditSession({
     handleGsapUpdateFromProperty,
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
+    handleGsapAddKeyframe,
+    handleGsapRemoveKeyframe,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveAllKeyframes,
+    handleResetSelectedElementKeyframes,
+    commitAnimatedProperty,
+    invalidateGsapCache: bumpGsapCache,
+    previewIframeRef,
   };
 }

package/src/hooks/useGsapScriptCommits.ts

@@ -3,6 +3,8 @@ import type { ParsedGsap } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { EditHistoryKind } from "../utils/editHistory";
 import { applySoftReload } from "../utils/gsapSoftReload";
+import { executeOptimistic } from "../utils/optimisticUpdate";
+import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore";
 
 const PROPERTY_DEFAULTS: Record<string, number> = {
   opacity: 1,
@@ -70,6 +72,27 @@ async function mutateGsapScript(
   }
 }
 
+function buildCacheKey(sourceFile: string, elementId: string): string {
+  return `${sourceFile}#${elementId}`;
+}
+
+function readKeyframeSnapshot(
+  sourceFile: string,
+  elementId: string | null | undefined,
+): KeyframeCacheEntry | undefined {
+  if (!elementId) return undefined;
+  return usePlayerStore.getState().keyframeCache.get(buildCacheKey(sourceFile, elementId));
+}
+
+function writeKeyframeCache(
+  sourceFile: string,
+  elementId: string | null | undefined,
+  data: KeyframeCacheEntry | undefined,
+): void {
+  if (!elementId) return;
+  usePlayerStore.getState().setKeyframeCache(buildCacheKey(sourceFile, elementId), data);
+}
+
 interface GsapScriptCommitsParams {
   projectIdRef: React.MutableRefObject<string | null>;
   activeCompPath: string | null;
@@ -113,7 +136,13 @@ export function useGsapScriptCommits({
     async (
       selection: DomEditSelection,
       mutation: Record<string, unknown>,
-      options: { label: string; coalesceKey?: string; softReload?: boolean },
+      options: {
+        label: string;
+        coalesceKey?: string;
+        softReload?: boolean;
+        skipReload?: boolean;
+        beforeReload?: () => void;
+      },
     ) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -135,6 +164,21 @@ export function useGsapScriptCommits({
 
       onCacheInvalidate();
 
+      if (result.parsed?.animations) {
+        const { setKeyframeCache } = usePlayerStore.getState();
+        for (const anim of result.parsed.animations) {
+          if (!anim.keyframes) continue;
+          const id = anim.targetSelector.match(/^#([\w-]+)/)?.[1];
+          if (!id) continue;
+          setKeyframeCache(`${targetPath}#${id}`, anim.keyframes);
+          if (targetPath !== "index.html") setKeyframeCache(`index.html#${id}`, anim.keyframes);
+        }
+      }
+
+      if (options.skipReload) return;
+
+      options.beforeReload?.();
+
       if (options.softReload && result.scriptText) {
         if (!applySoftReload(previewIframeRef.current, result.scriptText)) {
           reloadPreview();
@@ -225,7 +269,7 @@ export function useGsapScriptCommits({
     async (
       selection: DomEditSelection,
       method: "to" | "from" | "set" | "fromTo",
-      currentTime?: number,
+      _currentTime?: number,
     ) => {
       const { selector, autoId } = ensureElementAddressable(selection);
 
@@ -253,12 +297,15 @@ export function useGsapScriptCommits({
         if (!data.changed) return;
       }
 
-      const start = currentTime ?? (Number.parseFloat(selection.dataAttributes.start ?? "0") || 0);
+      const elStart = Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0;
+      const elDuration = Number.parseFloat(selection.dataAttributes?.duration ?? "1") || 1;
+      const position = Math.round(elStart * 1000) / 1000;
+      const duration = Math.round(elDuration * 1000) / 1000;
       const toDefaults: Record<string, Record<string, number>> = {
         from: { opacity: 0 },
-        to: { opacity: 1 },
+        to: { x: 0, y: 0, opacity: 1 },
         set: { opacity: 1 },
-        fromTo: { opacity: 1 },
+        fromTo: { x: 0, y: 0, opacity: 1 },
       };
 
       await commitMutation(
@@ -267,8 +314,8 @@ export function useGsapScriptCommits({
           type: "add",
           targetSelector: selector,
           method,
-          position: start,
-          duration: method === "set" ? undefined : 0.5,
+          position,
+          duration: method === "set" ? undefined : duration,
           ease: method === "set" ? undefined : "power2.out",
           properties: toDefaults[method] ?? { opacity: 1 },
           fromProperties: method === "fromTo" ? { opacity: 0 } : undefined,
@@ -353,7 +400,93 @@ export function useGsapScriptCommits({
     [commitMutation],
   );
 
+  const addKeyframe = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      percentage: number,
+      property: string,
+      value: number | string,
+    ) => {
+      const sf = selection.sourceFile || activeCompPath || "index.html";
+      const elementId = selection.id;
+      void executeOptimistic<KeyframeCacheEntry | undefined>({
+        apply: () => {
+          const prev = readKeyframeSnapshot(sf, elementId);
+          if (prev) {
+            const newKeyframes = [
+              ...prev.keyframes,
+              { percentage, properties: { [property]: value } },
+            ].sort((a, b) => a.percentage - b.percentage);
+            writeKeyframeCache(sf, elementId, { ...prev, keyframes: newKeyframes });
+          }
+          return prev;
+        },
+        persist: () =>
+          commitMutation(
+            selection,
+            { type: "add-keyframe", animationId, percentage, properties: { [property]: value } },
+            { label: `Add keyframe at ${percentage}%`, softReload: true },
+          ),
+        rollback: (prev) => {
+          writeKeyframeCache(sf, elementId, prev);
+        },
+      });
+    },
+    [commitMutation, activeCompPath],
+  );
+
+  const removeKeyframe = useCallback(
+    (selection: DomEditSelection, animationId: string, percentage: number) => {
+      const sf = selection.sourceFile || activeCompPath || "index.html";
+      const elementId = selection.id;
+      void executeOptimistic<KeyframeCacheEntry | undefined>({
+        apply: () => {
+          const prev = readKeyframeSnapshot(sf, elementId);
+          if (prev) {
+            const newKeyframes = prev.keyframes.filter((kf) => kf.percentage !== percentage);
+            writeKeyframeCache(sf, elementId, { ...prev, keyframes: newKeyframes });
+          }
+          return prev;
+        },
+        persist: () =>
+          commitMutation(
+            selection,
+            { type: "remove-keyframe", animationId, percentage },
+            { label: `Remove keyframe at ${percentage}%`, softReload: true },
+          ),
+        rollback: (prev) => {
+          writeKeyframeCache(sf, elementId, prev);
+        },
+      });
+    },
+    [commitMutation, activeCompPath],
+  );
+
+  const convertToKeyframes = useCallback(
+    (selection: DomEditSelection, animationId: string) => {
+      void commitMutation(
+        selection,
+        { type: "convert-to-keyframes", animationId },
+        { label: "Convert to keyframes" },
+      );
+    },
+    [commitMutation],
+  );
+
+  const removeAllKeyframes = useCallback(
+    (selection: DomEditSelection, animationId: string) => {
+      void commitMutation(
+        selection,
+        { type: "remove-all-keyframes", animationId },
+        { label: "Remove all keyframes", softReload: true },
+      );
+    },
+    [commitMutation],
+  );
+
   return {
+    commitMutation,
     updateGsapProperty,
     updateGsapMeta,
     deleteGsapAnimation,
@@ -363,5 +496,9 @@ export function useGsapScriptCommits({
     updateGsapFromProperty,
     addGsapFromProperty,
     removeGsapFromProperty,
+    addKeyframe,
+    removeKeyframe,
+    convertToKeyframes,
+    removeAllKeyframes,
   };
 }