@hyperframes/studio 0.6.90 → 0.6.92

package/src/hooks/useDomEditSession.ts

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
-import { STUDIO_GSAP_PANEL_ENABLED } from "../components/editor/manualEditingAvailability";
+import {
+  STUDIO_GSAP_DRAG_INTERCEPT_ENABLED,
+  STUDIO_GSAP_PANEL_ENABLED,
+} from "../components/editor/manualEditingAvailability";
 import { type DomEditSelection } from "../components/editor/domEditing";
 import { useDomEditPreviewSync } from "./useDomEditPreviewSync";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
@@ -259,6 +262,7 @@ export function useDomEditSession({
     updateGsapProperty,
     updateGsapMeta,
     deleteGsapAnimation,
+    deleteAllForSelector,
     addGsapAnimation,
     addGsapProperty,
     removeGsapProperty,
@@ -326,7 +330,15 @@ export function useDomEditSession({
   // 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 hasGsapAnims = selectedGsapAnimations.length > 0;
+      if (hasGsapAnims && !STUDIO_GSAP_DRAG_INTERCEPT_ENABLED) {
+        showToast(
+          "This element is GSAP-animated — dragging via CSS would corrupt keyframes",
+          "error",
+        );
+        return;
+      }
+      if (STUDIO_GSAP_DRAG_INTERCEPT_ENABLED && gsapCommitMutation) {
         const handled = await tryGsapDragIntercept(
           selection,
           next,
@@ -353,6 +365,7 @@ export function useDomEditSession({
       previewIframeRef,
       projectId,
       gsapSourceFile,
+      showToast,
     ],
   );
 
@@ -372,7 +385,7 @@ export function useDomEditSession({
 
   const handleGsapAwareBoxSizeCommit = useCallback(
     async (selection: DomEditSelection, next: { width: number; height: number }) => {
-      if (gsapCommitMutation) {
+      if (STUDIO_GSAP_DRAG_INTERCEPT_ENABLED && gsapCommitMutation) {
         const handled = await tryGsapResizeIntercept(
           selection,
           next,
@@ -396,7 +409,7 @@ export function useDomEditSession({
 
   const handleGsapAwareRotationCommit = useCallback(
     async (selection: DomEditSelection, next: { angle: number }) => {
-      if (gsapCommitMutation) {
+      if (STUDIO_GSAP_DRAG_INTERCEPT_ENABLED && gsapCommitMutation) {
         const handled = await tryGsapRotationIntercept(
           selection,
           next.angle,
@@ -422,6 +435,7 @@ export function useDomEditSession({
     handleGsapUpdateProperty,
     handleGsapUpdateMeta,
     handleGsapDeleteAnimation,
+    handleGsapDeleteAllForElement,
     handleGsapAddAnimation,
     handleGsapAddProperty,
     handleGsapRemoveProperty,
@@ -439,6 +453,7 @@ export function useDomEditSession({
     updateGsapProperty,
     updateGsapMeta,
     deleteGsapAnimation,
+    deleteAllForSelector,
     addGsapAnimation,
     addGsapProperty,
     removeGsapProperty,
@@ -547,6 +562,7 @@ export function useDomEditSession({
     handleGsapUpdateProperty,
     handleGsapUpdateMeta,
     handleGsapDeleteAnimation,
+    handleGsapDeleteAllForElement,
     handleGsapAddAnimation,
     handleGsapAddProperty,
     handleGsapRemoveProperty,

package/src/hooks/useEnableKeyframes.ts

@@ -52,10 +52,12 @@ function readElementPosition(
   const element = sel.element;
   if (!element?.isConnected || !gsap?.getProperty) return result;
 
+  const POSITION_PROPS = new Set(["x", "y", "xPercent", "yPercent"]);
   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);
+    if (!Number.isFinite(val)) continue;
+    result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : Math.round(val * 1000) / 1000;
   }
 
   return result;

package/src/hooks/useGestureCommit.ts

@@ -7,10 +7,13 @@ import { useGestureRecording } from "./useGestureRecording";
 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 { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 
 // Minimal subset of the session used by gesture commit
 interface GestureSessionRef {
   domEditSelection: DomEditSelection | null;
+  selectedGsapAnimations?: GsapAnimation[];
   commitMutation?: (
     mutation: Record<string, unknown>,
     options: { label: string; softReload?: boolean },
@@ -43,6 +46,9 @@ export function useGestureCommit({
   const recordingAutoStopRef = useRef<ReturnType<typeof setInterval>>(undefined);
   const recordingStartTimeRef = useRef(0);
   const commitInFlightRef = useRef(false);
+  // Capture selection at recording start so commit always targets the recorded element,
+  // even if the user's selection changes mid-recording.
+  const capturedSelectionRef = useRef<DomEditSelection | null>(null);
 
   // Unmount: clear auto-stop interval
   useEffect(() => () => clearInterval(recordingAutoStopRef.current), []);
@@ -50,7 +56,9 @@ export function useGestureCommit({
   // fallow-ignore-next-line complexity
   const stopAndCommitRecording = useCallback(async () => {
     clearInterval(recordingAutoStopRef.current);
-    if (commitInFlightRef.current) return;
+    if (commitInFlightRef.current) {
+      return;
+    }
     commitInFlightRef.current = true;
     gestureStateRef.current = "idle";
     isGestureRecordingRef.current = false;
@@ -59,7 +67,7 @@ export function useGestureCommit({
     store.setIsPlaying(false);
     try {
       const liveSession = domEditSessionRef.current;
-      const sel = liveSession.domEditSelection;
+      const sel = capturedSelectionRef.current;
       if (!sel) {
         if (frozenSamples.length > 2) {
           showToast("Selection lost during recording", "error");
@@ -77,7 +85,13 @@ export function useGestureCommit({
         return;
       }
 
-      const simplified = simplifyGestureSamples(frozenSamples, duration, 5);
+      // Per-property epsilon: small-range properties (opacity 0–1, scale ~0.01–10)
+      // need a much tighter tolerance than positional properties (x/y in px).
+      const simplified = simplifyGestureSamples(frozenSamples, duration, (key) => {
+        if (key === "opacity") return 0.01;
+        if (key === "scale" || key === "scaleX" || key === "scaleY") return 0.01;
+        return 5;
+      });
       const sortedPcts = Array.from(simplified.keys()).sort((a, b) => a - b);
 
       // Ensure a 0% keyframe exists with the element's start-of-recording position
@@ -97,19 +111,90 @@ export function useGestureCommit({
           percentage: pct,
           properties: simplified.get(pct) as Record<string, number | string>,
         }));
-
-        await liveSession.commitMutation(
-          {
-            type: "add-with-keyframes",
-            targetSelector: selector,
-            position: Math.round(recStart * 1000) / 1000,
-            duration: Math.round(duration * 1000) / 1000,
-            keyframes,
-          },
-          { label: "Gesture recording", softReload: true },
+        const hasPositionProps = keyframes.some((kf) =>
+          Object.keys(kf.properties).some((k) => classifyPropertyGroup(k) === "position"),
         );
+        const allAnims = liveSession.selectedGsapAnimations ?? [];
+        const existingPositionTween = hasPositionProps
+          ? allAnims.find((a) => a.propertyGroup === "position" && a.targetSelector === selector)
+          : undefined;
+        if (existingPositionTween) {
+          const tweenStart = existingPositionTween.resolvedStart ?? 0;
+          const tweenDur = existingPositionTween.duration ?? duration;
+          const tweenEnd = tweenStart + tweenDur;
+          const recEnd = recStart + duration;
+
+          // Only merge if the recording overlaps the existing tween's time range.
+          // No overlap → fall through to add-with-keyframes (creates a separate tween).
+          const overlaps = recStart < tweenEnd + 0.05 && recEnd > tweenStart - 0.05;
+
+          if (overlaps) {
+            const existingKfs = existingPositionTween.keyframes?.keyframes ?? [];
+            const rangeStartPct =
+              tweenDur > 0 ? Math.max(0, ((recStart - tweenStart) / tweenDur) * 100) : 0;
+            const rangeEndPct =
+              tweenDur > 0 ? Math.min(100, ((recEnd - tweenStart) / tweenDur) * 100) : 100;
+
+            const preserved = existingKfs
+              .filter(
+                (kf) => kf.percentage < rangeStartPct - 0.5 || kf.percentage > rangeEndPct + 0.5,
+              )
+              .map((kf) => ({
+                percentage: kf.percentage,
+                properties: kf.properties,
+                ...(kf.ease ? { ease: kf.ease } : {}),
+              }));
+
+            const mapped = keyframes.map((kf) => ({
+              percentage: rangeStartPct + (kf.percentage / 100) * (rangeEndPct - rangeStartPct),
+              properties: kf.properties,
+            }));
+
+            const merged = [...preserved, ...mapped].sort((a, b) => a.percentage - b.percentage);
+
+            await liveSession.commitMutation(
+              {
+                type: "replace-with-keyframes",
+                animationId: existingPositionTween.id,
+                targetSelector: selector,
+                position:
+                  typeof existingPositionTween.position === "number"
+                    ? existingPositionTween.position
+                    : tweenStart,
+                duration: tweenDur,
+                keyframes: merged,
+              },
+              { label: "Gesture recording (merge)", softReload: true },
+            );
+          } else {
+            await liveSession.commitMutation(
+              {
+                type: "add-with-keyframes",
+                targetSelector: selector,
+                position: Math.round(recStart * 1000) / 1000,
+                duration: Math.round(duration * 1000) / 1000,
+                keyframes,
+              },
+              { label: "Gesture recording (new range)", softReload: true },
+            );
+          }
+        } else {
+          await liveSession.commitMutation(
+            {
+              type: "add-with-keyframes",
+              targetSelector: selector,
+              position: Math.round(recStart * 1000) / 1000,
+              duration: Math.round(duration * 1000) / 1000,
+              keyframes,
+            },
+            { label: "Gesture recording", softReload: true },
+          );
+        }
       }
       showToast(`Recorded ${sortedPcts.length} keyframes`, "info");
+    } catch (err) {
+      console.error("[GR:error]", err);
+      showToast(`Gesture commit failed: ${err}`, "error");
     } finally {
       store.requestSeek(recordingStartTimeRef.current);
       gestureRecording.clearSamples();
@@ -139,6 +224,7 @@ export function useGestureCommit({
     const elStart = Number.parseFloat(sel.dataAttributes?.start ?? "0") || 0;
     const elDur = Number.parseFloat(sel.dataAttributes?.duration ?? "0") || 0;
     const elementEnd = elDur > 0 ? elStart + elDur : undefined;
+    capturedSelectionRef.current = sel;
     gestureRecording.startRecording(sel.element, iframe, elementEnd);
     gestureStateRef.current = "recording";
     isGestureRecordingRef.current = true;

package/src/hooks/useGestureRecording.ts

@@ -126,8 +126,12 @@ function applyRuntimePreview(
 
 function recordSample(r: RecordingRefs, time: number, properties: Record<string, number>): void {
   const sampleProps = { ...properties };
-  if ("x" in sampleProps) sampleProps.x -= r.cssVarOffset.x;
-  if ("y" in sampleProps) sampleProps.y -= r.cssVarOffset.y;
+  // Subtract both the CSS var offset AND the pointer-element snap offset
+  // so the first sample doesn't include the snap-to-cursor jump.
+  if ("x" in sampleProps)
+    sampleProps.x -= r.cssVarOffset.x + r.pointerElementOffset.x / (r.scale || 1);
+  if ("y" in sampleProps)
+    sampleProps.y -= r.cssVarOffset.y + r.pointerElementOffset.y / (r.scale || 1);
   r.samples.push({ time, properties: sampleProps });
   r.trail.push({ x: r.pointer.x, y: r.pointer.y });
 }
@@ -307,6 +311,18 @@ export function useGestureRecording() {
       };
 
       const handleWheel = (e: WheelEvent) => {
+        // Capture startPointer on first wheel if no pointermove has fired yet,
+        // preventing an enormous bogus first keyframe from stale startPointer.
+        if (!r.hasMoved) {
+          r.startPointer = { x: r.pointer.x, y: r.pointer.y };
+          r.pointerElementOffset = {
+            x: r.pointer.x - elCenterViewport.x,
+            y: r.pointer.y - elCenterViewport.y,
+          };
+          r.basePosition.x += r.pointerElementOffset.x / iframeScale;
+          r.basePosition.y += r.pointerElementOffset.y / iframeScale;
+          r.hasMoved = true;
+        }
         r.scrollDelta += e.deltaY;
         r.modifiers = { shift: e.shiftKey, alt: e.altKey, meta: e.metaKey || e.ctrlKey };
       };

package/src/hooks/useGsapScriptCommits.ts

@@ -51,6 +51,7 @@ function ensureElementAddressable(selection: DomEditSelection): {
 
 interface MutationResult {
   ok: boolean;
+  changed?: boolean;
   parsed?: ParsedGsap;
   before?: string;
   after?: string;
@@ -131,9 +132,16 @@ export function useGsapScriptCommits({
       const pid = projectIdRef.current;
       if (!pid) return;
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
-
       const result = await mutateGsapScript(pid, targetPath, mutation);
-      if (!result?.ok) return;
+      if (!result) {
+        if (options.skipReload) return;
+        throw new Error(`Mutation failed: ${mutation.type}`);
+      }
+
+      if (result.changed === false) {
+        if (options.skipReload) return;
+        return;
+      }
 
       domEditSaveTimestampRef.current = Date.now();
 
@@ -252,6 +260,16 @@ export function useGsapScriptCommits({
     },
     [commitMutation],
   );
+  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(
     // fallow-ignore-next-line complexity
     async (
@@ -441,7 +459,9 @@ export function useGsapScriptCommits({
         apply: () => {
           const prev = readKeyframeSnapshot(sf, elementId);
           if (prev) {
-            const newKeyframes = prev.keyframes.filter((kf) => kf.percentage !== percentage);
+            const newKeyframes = prev.keyframes.filter(
+              (kf) => Math.abs((kf.tweenPercentage ?? kf.percentage) - percentage) > 0.2,
+            );
             writeKeyframeCache(sf, elementId, { ...prev, keyframes: newKeyframes });
           }
           return prev;
@@ -548,6 +568,7 @@ export function useGsapScriptCommits({
     updateGsapProperty,
     updateGsapMeta,
     deleteGsapAnimation,
+    deleteAllForSelector,
     addGsapAnimation,
     addGsapProperty,
     removeGsapProperty,

package/src/hooks/useGsapSelectionHandlers.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
 
@@ -13,6 +13,7 @@ export function useGsapSelectionHandlers({
   updateGsapProperty,
   updateGsapMeta,
   deleteGsapAnimation,
+  deleteAllForSelector,
   addGsapAnimation,
   addGsapProperty,
   removeGsapProperty,
@@ -40,6 +41,7 @@ export function useGsapSelectionHandlers({
     updates: { duration?: number; ease?: string; position?: number },
   ) => void;
   deleteGsapAnimation: (sel: DomEditSelection, animId: string) => void;
+  deleteAllForSelector: (sel: DomEditSelection, targetSelector: string) => void;
   addGsapAnimation: (
     sel: DomEditSelection,
     method: "to" | "from" | "set" | "fromTo",
@@ -79,6 +81,9 @@ export function useGsapSelectionHandlers({
   handleDomManualEditsReset: (sel: DomEditSelection) => void;
   selectedGsapAnimations: { id: string; keyframes?: unknown }[];
 }) {
+  const lastSelectionRef = useRef<DomEditSelection | null>(null);
+  if (domEditSelection) lastSelectionRef.current = domEditSelection;
+
   const handleGsapUpdateProperty = useCallback(
     (animId: string, prop: string, value: number | string) => {
       if (!domEditSelection) return;
@@ -97,12 +102,22 @@ export function useGsapSelectionHandlers({
 
   const handleGsapDeleteAnimation = useCallback(
     (animId: string) => {
-      if (!domEditSelection) return;
-      deleteGsapAnimation(domEditSelection, animId);
+      const sel = domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      deleteGsapAnimation(sel, animId);
     },
     [domEditSelection, deleteGsapAnimation],
   );
 
+  const handleGsapDeleteAllForElement = useCallback(
+    (targetSelector: string) => {
+      const sel = domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      deleteAllForSelector(sel, targetSelector);
+    },
+    [domEditSelection, deleteAllForSelector],
+  );
+
   const handleGsapAddAnimation = useCallback(
     (method: "to" | "from" | "set" | "fromTo") => {
       if (!domEditSelection) return;
@@ -205,6 +220,7 @@ export function useGsapSelectionHandlers({
     handleGsapUpdateProperty,
     handleGsapUpdateMeta,
     handleGsapDeleteAnimation,
+    handleGsapDeleteAllForElement,
     handleGsapAddAnimation,
     handleGsapAddProperty,
     handleGsapRemoveProperty,

package/src/hooks/useGsapTweenCache.ts

@@ -264,9 +264,11 @@ export function useGsapAnimationsForElement(
       (el) => el.domId === elementId || (el.key ?? el.id) === `${sourceFile}#${elementId}`,
     );
     const elStart = timelineEl?.start ?? 0;
-    const elDuration = timelineEl?.duration ?? 4;
+    const elDuration = timelineEl?.duration ?? 1;
 
-    const allKeyframes: GsapKeyframesData["keyframes"] = [];
+    const allKeyframes: Array<
+      GsapKeyframesData["keyframes"][0] & { tweenPercentage?: number; propertyGroup?: string }
+    > = [];
     let format: GsapKeyframesData["format"] = "percentage";
     let ease: string | undefined;
     let easeEach: string | undefined;
@@ -275,7 +277,8 @@ export function useGsapAnimationsForElement(
       if (!kf) continue;
       // Convert tween-relative percentages to clip-relative so diamonds
       // render at the correct position within the timeline clip.
-      const tweenPos = typeof anim.position === "number" ? anim.position : 0;
+      const tweenPos =
+        anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
       const tweenDur = anim.duration ?? elDuration;
       for (const k of kf.keyframes) {
         const absTime = tweenPos + (k.percentage / 100) * tweenDur;
@@ -283,7 +286,12 @@ export function useGsapAnimationsForElement(
           elDuration > 0
             ? Math.round(((absTime - elStart) / elDuration) * 1000) / 10
             : k.percentage;
-        allKeyframes.push({ ...k, percentage: clipPct });
+        allKeyframes.push({
+          ...k,
+          percentage: clipPct,
+          tweenPercentage: k.percentage,
+          propertyGroup: anim.propertyGroup,
+        });
       }
       format = kf.format;
       if (kf.ease) ease = kf.ease;
@@ -305,6 +313,9 @@ export function useGsapAnimationsForElement(
     };
     const { setKeyframeCache } = usePlayerStore.getState();
     setKeyframeCache(`${sourceFile}#${elementId}`, merged);
+    // PropertyPanel reads the cache by bare elementId (without sourceFile prefix),
+    // so write a duplicate entry under the bare key for cross-component lookups.
+    setKeyframeCache(elementId, merged);
   }, [elementId, sourceFile, animations]);
 
   return { animations, multipleTimelines, unsupportedTimelinePattern };
@@ -327,13 +338,14 @@ export function usePopulateKeyframeCacheForFile(
   version: number,
   iframeRef?: React.RefObject<HTMLIFrameElement | null>,
 ): void {
+  const elementCount = usePlayerStore((s) => s.elements.length);
   const lastFetchKeyRef = useRef("");
 
   const runtimeScanDoneRef = useRef("");
   const astFetchDoneRef = useRef("");
 
   useEffect(() => {
-    const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}`;
+    const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}:${elementCount}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
     runtimeScanDoneRef.current = "";
@@ -358,21 +370,26 @@ export function usePopulateKeyframeCacheForFile(
         if (!id) continue;
         const kfData = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
         if (!kfData) continue;
-        // Convert tween-relative percentages to clip-relative.
-        const tweenPos = typeof anim.position === "number" ? anim.position : 0;
+        const tweenPos =
+          anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
         const tweenDur = anim.duration ?? 1;
         const timelineEl = elements.find(
           (el) => el.domId === id || (el.key ?? el.id) === `${sf}#${id}`,
         );
         const elStart = timelineEl?.start ?? 0;
-        const elDuration = timelineEl?.duration ?? 4;
+        const elDuration = timelineEl?.duration ?? 1;
         const clipKeyframes = kfData.keyframes.map((kf) => {
           const absTime = tweenPos + (kf.percentage / 100) * tweenDur;
           const clipPct =
             elDuration > 0
               ? Math.round(((absTime - elStart) / elDuration) * 1000) / 10
               : kf.percentage;
-          return { ...kf, percentage: clipPct };
+          return {
+            ...kf,
+            percentage: clipPct,
+            tweenPercentage: kf.percentage,
+            propertyGroup: anim.propertyGroup,
+          };
         });
         const existing = mergedByElement.get(id);
         if (existing) {
@@ -388,7 +405,10 @@ export function usePopulateKeyframeCacheForFile(
       }
       astFetchDoneRef.current = fetchKey;
     });
-  }, [projectId, sourceFile, version]);
+    // elementCount is in the deps because new timeline elements (e.g. after a
+    // sub-composition expand) need their keyframe cache populated immediately;
+    // without it the effect won't re-run when elements appear/disappear.
+  }, [projectId, sourceFile, version, elementCount]);
 
   // Separate effect for runtime keyframe discovery — polls until the iframe
   // has loaded GSAP timelines, independent of the AST fetch lifecycle.