hyperframes 0.7.24 → 0.7.26

package/dist/studio/index.js

@@ -1305,6 +1305,8 @@ var usePlayerStore = create((set, get) => ({
   setMotionPathArmed: (armed) => set({ motionPathArmed: armed }),
   motionPathCreateAvailable: false,
   setMotionPathCreateAvailable: (available) => set({ motionPathCreateAvailable: available }),
+  autoKeyframeEnabled: true,
+  setAutoKeyframeEnabled: (enabled) => set({ autoKeyframeEnabled: enabled }),
   selectedElementIds: /* @__PURE__ */ new Set(),
   toggleSelectedElementId: (id) => set((s) => {
     const next = new Set(s.selectedElementIds);
@@ -4902,10 +4904,18 @@ var TimelineClipDiamonds = memo6(function TimelineClipDiamonds2({
   onClickKeyframe,
   onShiftClickKeyframe,
   onContextMenuKeyframe,
-  onMoveKeyframe
+  onMoveKeyframe,
+  suppressClickRef
 }) {
   const dragRef = useRef11(null);
   const [preview, setPreview] = useState10(null);
+  const suppressNextClick = () => {
+    if (!suppressClickRef) return;
+    suppressClickRef.current = true;
+    requestAnimationFrame(() => {
+      suppressClickRef.current = false;
+    });
+  };
   if (clipWidthPx < 20) return null;
   const diamondSize = Math.round(clipHeightPx * (beatsActive ? 0.45 : DIAMOND_RATIO));
   const half = diamondSize / 2;
@@ -4915,151 +4925,171 @@ var TimelineClipDiamonds = memo6(function TimelineClipDiamonds2({
   const baseColor = isSelected ? accentColor : "#a3a3a3";
   const baseOpacity = isSelected ? 0.4 : 0.25;
   const canDrag = isSelected && !!onMoveKeyframe;
-  return /* @__PURE__ */ jsxs11("div", { className: "absolute inset-0", style: { zIndex: 3, pointerEvents: "none" }, children: [
-    sorted.map((kf, i) => {
-      if (i === 0) return null;
-      const prev = sorted[i - 1];
-      const x1 = Math.max(0, Math.min(clipWidthPx, prev.percentage / 100 * clipWidthPx));
-      const x2 = Math.max(0, Math.min(clipWidthPx, kf.percentage / 100 * clipWidthPx));
-      if (x2 - x1 < 1) return null;
-      return /* @__PURE__ */ jsx14(
-        "div",
-        {
-          className: "absolute",
-          style: {
-            left: x1,
-            top: centerY,
-            width: x2 - x1,
-            height: 2,
-            transform: "translateY(-1px)",
-            background: baseColor,
-            opacity: baseOpacity,
-            borderRadius: 1
-          }
-        },
-        `line-${i}-${prev.percentage}-${kf.percentage}`
-      );
-    }),
-    sorted.map((kf, i) => {
-      const kfKey = `${elementId}:${kf.percentage}`;
-      const renderPct = preview?.kfKey === kfKey ? preview.clipPct : kf.percentage;
-      const leftPx = renderPct / 100 * clipWidthPx - half;
-      const isKfSelected = selectedKeyframes.has(kfKey);
-      const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
-      const isHighlighted = isKfSelected || atPlayhead;
-      const color = isHighlighted ? accentColor : "#a3a3a3";
-      const onPointerDown = (e) => {
-        if (e.button !== 0) return;
-        e.stopPropagation();
-        if (canDrag) {
-          e.currentTarget.setPointerCapture?.(e.pointerId);
-          dragRef.current = {
-            kfKey,
-            startX: e.clientX,
-            fromClipPct: kf.percentage,
-            moved: false
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        // Above the clip's trim-handle strips (TimelineClip.tsx, z-index 4) so
+        // a keyframe sitting in the first/last ~14px of the clip stays
+        // clickable instead of being covered by the resize handle. This div
+        // establishes its own stacking context (position + z-index), so the
+        // diamonds' own z-index (1/2) can't escape it on their own — the bump
+        // has to happen here.
+        zIndex: 5,
+        pointerEvents: "none"
+      },
+      children: [
+        sorted.map((kf, i) => {
+          if (i === 0) return null;
+          const prev = sorted[i - 1];
+          const x1 = Math.max(0, Math.min(clipWidthPx, prev.percentage / 100 * clipWidthPx));
+          const x2 = Math.max(0, Math.min(clipWidthPx, kf.percentage / 100 * clipWidthPx));
+          if (x2 - x1 < 1) return null;
+          return /* @__PURE__ */ jsx14(
+            "div",
+            {
+              className: "absolute",
+              style: {
+                left: x1,
+                top: centerY,
+                width: x2 - x1,
+                height: 2,
+                transform: "translateY(-1px)",
+                background: baseColor,
+                opacity: baseOpacity,
+                borderRadius: 1
+              }
+            },
+            `line-${i}-${prev.percentage}-${kf.percentage}`
+          );
+        }),
+        sorted.map((kf, i) => {
+          const kfKey = `${elementId}:${kf.percentage}`;
+          const renderPct = preview?.kfKey === kfKey ? preview.clipPct : kf.percentage;
+          const leftPx = renderPct / 100 * clipWidthPx - half;
+          const isKfSelected = selectedKeyframes.has(kfKey);
+          const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
+          const isHighlighted = isKfSelected || atPlayhead;
+          const color = isHighlighted ? accentColor : "#a3a3a3";
+          const onPointerDown = (e) => {
+            if (e.button !== 0) return;
+            e.stopPropagation();
+            if (canDrag) {
+              e.currentTarget.setPointerCapture?.(e.pointerId);
+              dragRef.current = {
+                kfKey,
+                startX: e.clientX,
+                fromClipPct: kf.percentage,
+                moved: false
+              };
+            }
           };
-        }
-      };
-      const onPointerMove = (e) => {
-        const d = dragRef.current;
-        if (!d || d.kfKey !== kfKey) return;
-        if (!d.moved && Math.abs(e.clientX - d.startX) >= KEYFRAME_DRAG_THRESHOLD_PX) {
-          d.moved = true;
-        }
-        if (d.moved) {
-          setPreview({
-            kfKey,
-            clipPct: previewClipPct({
+          const onPointerMove = (e) => {
+            const d = dragRef.current;
+            if (!d || d.kfKey !== kfKey) return;
+            if (!d.moved && Math.abs(e.clientX - d.startX) >= KEYFRAME_DRAG_THRESHOLD_PX) {
+              d.moved = true;
+            }
+            if (d.moved) {
+              setPreview({
+                kfKey,
+                clipPct: previewClipPct({
+                  pointerDownX: d.startX,
+                  pointerMoveX: e.clientX,
+                  clipWidthPx,
+                  draggedClipPct: d.fromClipPct,
+                  draggedIndex: i,
+                  sortedClipPcts
+                })
+              });
+            }
+          };
+          const onPointerUp = (e) => {
+            const d = dragRef.current;
+            if (!d || d.kfKey !== kfKey) {
+              if (e.button !== 0) return;
+              suppressNextClick();
+              if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
+              else onClickKeyframe?.(kf.percentage);
+              return;
+            }
+            e.stopPropagation();
+            dragRef.current = null;
+            setPreview(null);
+            e.currentTarget.releasePointerCapture?.(e.pointerId);
+            suppressNextClick();
+            const res = resolveKeyframeDrag({
               pointerDownX: d.startX,
-              pointerMoveX: e.clientX,
+              pointerUpX: e.clientX,
               clipWidthPx,
               draggedClipPct: d.fromClipPct,
               draggedIndex: i,
               sortedClipPcts
-            })
-          });
-        }
-      };
-      const onPointerUp = (e) => {
-        const d = dragRef.current;
-        if (!d || d.kfKey !== kfKey) {
-          if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
-          else onClickKeyframe?.(kf.percentage);
-          return;
-        }
-        e.stopPropagation();
-        dragRef.current = null;
-        setPreview(null);
-        e.currentTarget.releasePointerCapture?.(e.pointerId);
-        const res = resolveKeyframeDrag({
-          pointerDownX: d.startX,
-          pointerUpX: e.clientX,
-          clipWidthPx,
-          draggedClipPct: d.fromClipPct,
-          draggedIndex: i,
-          sortedClipPcts
-        });
-        if (res.kind === "click") {
-          if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
-          else onClickKeyframe?.(kf.percentage);
-        } else if (res.kind === "move" && res.toClipPct != null) {
-          onMoveKeyframe?.(elementId, d.fromClipPct, res.toClipPct);
-        }
-      };
-      return /* @__PURE__ */ jsx14(
-        "button",
-        {
-          type: "button",
-          className: "absolute",
-          style: {
-            left: leftPx,
-            top: centerY,
-            transform: "translateY(-50%)",
-            width: diamondSize,
-            height: diamondSize,
-            zIndex: isHighlighted ? 2 : 1,
-            pointerEvents: "auto",
-            background: "none",
-            border: "none",
-            cursor: canDrag ? "ew-resize" : "pointer",
-            padding: 0,
-            touchAction: "none"
-          },
-          onPointerDown,
-          onPointerMove,
-          onPointerUp,
-          onContextMenu: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            onContextMenuKeyframe?.(e, elementId, kf.percentage);
-          },
-          title: `${kf.percentage}%`,
-          children: /* @__PURE__ */ jsxs11("svg", { width: diamondSize, height: diamondSize, viewBox: "0 0 10 10", children: [
-            isKfSelected && /* @__PURE__ */ jsx14(
-              "path",
-              {
-                d: "M5 0L10 5L5 10L0 5Z",
-                fill: "none",
-                stroke: accentColor,
-                strokeWidth: "0.8",
-                opacity: 0.5
-              }
-            ),
-            /* @__PURE__ */ jsx14(
-              "path",
-              {
-                d: "M5 1L9 5L5 9L1 5Z",
-                fill: color,
-                opacity: isKfSelected || atPlayhead ? 1 : 0.55
-              }
-            )
-          ] })
-        },
-        `${i}-${kf.percentage}`
-      );
-    })
-  ] });
+            });
+            if (res.kind === "click" || res.kind === "noop") {
+              if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
+              else onClickKeyframe?.(kf.percentage);
+            } else if (res.kind === "move" && res.toClipPct != null) {
+              onMoveKeyframe?.(elementId, d.fromClipPct, res.toClipPct);
+              onClickKeyframe?.(res.toClipPct);
+            }
+          };
+          return /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "absolute",
+              style: {
+                left: leftPx,
+                top: centerY,
+                transform: "translateY(-50%)",
+                width: diamondSize,
+                height: diamondSize,
+                zIndex: isHighlighted ? 2 : 1,
+                pointerEvents: "auto",
+                background: "none",
+                border: "none",
+                cursor: canDrag ? "ew-resize" : "pointer",
+                padding: 0,
+                touchAction: "none"
+              },
+              onPointerDown,
+              onPointerMove,
+              onPointerUp,
+              onContextMenu: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onContextMenuKeyframe?.(e, elementId, kf.percentage);
+              },
+              title: `${kf.percentage}%`,
+              children: /* @__PURE__ */ jsxs11("svg", { width: diamondSize, height: diamondSize, viewBox: "0 0 10 10", children: [
+                isKfSelected && /* @__PURE__ */ jsx14(
+                  "path",
+                  {
+                    d: "M5 0L10 5L5 10L0 5Z",
+                    fill: "none",
+                    stroke: accentColor,
+                    strokeWidth: "0.8",
+                    opacity: 0.5
+                  }
+                ),
+                /* @__PURE__ */ jsx14(
+                  "path",
+                  {
+                    d: "M5 1L9 5L5 9L1 5Z",
+                    fill: color,
+                    opacity: isKfSelected || atPlayhead ? 1 : 0.55
+                  }
+                )
+              ] })
+            },
+            `${i}-${kf.percentage}`
+          );
+        })
+      ]
+    }
+  );
 });
 
 // src/player/components/TimelineRuler.tsx
@@ -6184,7 +6214,8 @@ var TimelineCanvas = memo8(function TimelineCanvas2({
                           onClickKeyframe: (pct) => onClickKeyframe?.(previewElement, pct),
                           onShiftClickKeyframe,
                           onContextMenuKeyframe,
-                          onMoveKeyframe
+                          onMoveKeyframe,
+                          suppressClickRef
                         }
                       )
                     ]
@@ -7214,8 +7245,6 @@ var Timeline = memo11(function Timeline2({
                     if (el) {
                       setSelectedElementId(elId);
                       onSelectElement?.(el);
-                      const absTime = el.start + pct / 100 * el.duration;
-                      onSeek?.(absTime);
                     }
                     const kfData = keyframeCache.get(elId);
                     const kf = kfData?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
@@ -9813,7 +9842,7 @@ function verifyTimelinesPopulated(win, targetKeys) {
   }
   return Object.keys(timelines).filter((k) => k !== "__proxied").length > 0;
 }
-function applySoftReload(iframe, scriptText, onAsyncFailure) {
+function applySoftReload(iframe, scriptText, onAsyncFailure, currentTimeOverride) {
   if (!iframe || !scriptText) return "cannot-soft-reload";
   const win = iframe.contentWindow;
   const doc = iframe.contentDocument;
@@ -9830,7 +9859,7 @@ function applySoftReload(iframe, scriptText, onAsyncFailure) {
     })
   );
   if (gsapScripts.length > 1 && staleScripts.length === 0) return "cannot-soft-reload";
-  const currentTime = win.__player?.getTime?.() ?? 0;
+  const currentTime = currentTimeOverride ?? win.__player?.getTime?.() ?? 0;
   let deferredToAsync = false;
   const doReload = () => {
     const timelines = win.__timelines;
@@ -9889,8 +9918,8 @@ function applySoftReload(iframe, scriptText, onAsyncFailure) {
       s.textContent = `(function(){${scriptText}
 })();`;
       doc.body.appendChild(s);
-      win.__hfForceTimelineRebind?.();
       win.__player?.seek?.(currentTime);
+      win.__hfForceTimelineRebind?.();
       win.__hfStudioManualEditsApply?.();
     };
     const needsMotionPath = /motionPath\s*[:{]/.test(scriptText);
@@ -26987,7 +27016,8 @@ async function mutateGsapScript(projectId, sourceFile, mutation) {
   return result;
 }
 function softReloadOrEscalate(iframe, scriptText, reloadPreview, origin) {
-  const result = applySoftReload(iframe, scriptText, reloadPreview);
+  const currentTime = usePlayerStore.getState().currentTime;
+  const result = applySoftReload(iframe, scriptText, reloadPreview, currentTime);
   if (result === "applied") return;
   trackStudioEvent("gsap_soft_reload_outcome", {
     origin,
@@ -27950,6 +27980,102 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
   }
 }
 
+// src/hooks/gsapTweenSynth.ts
+function deduplicateKeyframes(keyframes) {
+  const byPct = /* @__PURE__ */ new Map();
+  for (const kf of keyframes) {
+    const existing = byPct.get(kf.percentage);
+    if (existing) {
+      existing.properties = { ...existing.properties, ...kf.properties };
+      if (kf.ease) existing.ease = kf.ease;
+    } else {
+      byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } });
+    }
+  }
+  return Array.from(byPct.values()).sort((a, b) => a.percentage - b.percentage);
+}
+function synthesizeFlatTweenKeyframes(anim) {
+  const hasImmediateRenderHold = anim.extras?.immediateRender === "__raw:true";
+  if (anim.method === "set" || anim.duration === 0 && hasImmediateRenderHold) {
+    return null;
+  }
+  const toProps = anim.properties;
+  const fromProps = anim.fromProperties;
+  if (!toProps || Object.keys(toProps).length === 0) return null;
+  const startProps = {};
+  const endProps = {};
+  if (anim.method === "from") {
+    for (const [k, v] of Object.entries(toProps)) {
+      startProps[k] = v;
+      endProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
+    }
+  } else if (anim.method === "fromTo" && fromProps) {
+    Object.assign(startProps, fromProps);
+    Object.assign(endProps, toProps);
+  } else {
+    for (const [k, v] of Object.entries(toProps)) {
+      startProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
+      endProps[k] = v;
+    }
+  }
+  return {
+    format: "percentage",
+    keyframes: [
+      { percentage: 0, properties: startProps },
+      { percentage: 100, properties: endProps }
+    ],
+    ...anim.ease ? { ease: anim.ease } : {}
+  };
+}
+
+// src/hooks/gsapWholePropertyOffsetCommit.ts
+async function commitWholePropertyOffset(selection, anim, newValues, currentPct, iframe, callbacks, label) {
+  let effectiveAnim = anim;
+  if (anim.keyframes) {
+    const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
+    if (newId) effectiveAnim = { ...anim, id: newId };
+  }
+  const ts = resolveTweenStart(effectiveAnim);
+  const td = resolveTweenDuration(effectiveAnim);
+  const ease = effectiveAnim.keyframes?.easeEach ?? effectiveAnim.ease;
+  const keys = Object.keys(newValues);
+  const at = (props, key) => typeof props[key] === "number" ? props[key] : PROPERTY_DEFAULTS[key] ?? 0;
+  const kfs = effectiveAnim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(effectiveAnim)?.keyframes;
+  if (!kfs || kfs.length === 0) {
+    await callbacks.commitMutation(
+      selection,
+      { type: "update-properties", animationId: effectiveAnim.id, properties: newValues },
+      { label, softReload: true }
+    );
+    return;
+  }
+  const nearest = kfs.reduce(
+    (best, kf) => Math.abs(kf.percentage - currentPct) < Math.abs(best.percentage - currentPct) ? kf : best
+  );
+  const shifted = kfs.map((kf) => {
+    const properties = { ...kf.properties };
+    for (const key of keys) {
+      properties[key] = roundTo3(
+        at(properties, key) + (newValues[key] - at(nearest.properties, key))
+      );
+    }
+    return { percentage: kf.percentage, properties, ...kf.ease ? { ease: kf.ease } : {} };
+  });
+  await callbacks.commitMutation(
+    selection,
+    {
+      type: "replace-with-keyframes",
+      animationId: effectiveAnim.id,
+      targetSelector: effectiveAnim.targetSelector,
+      position: roundTo3(ts ?? 0),
+      duration: roundTo3(td || 1),
+      keyframes: shifted,
+      ease
+    },
+    { label, softReload: true }
+  );
+}
+
 // src/hooks/gsapPositionDetection.ts
 function readGsapPositionFromIframe(iframe, elementSelector) {
   const gsap2 = getIframeGsap(iframe);
@@ -28110,7 +28236,8 @@ async function tryGsapDragIntercept(selection, offset, animations, iframe, commi
     }
   }
   const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations };
-  if (options?.altKey) {
+  const autoKeyframeEnabled = usePlayerStore.getState().autoKeyframeEnabled;
+  if (options?.altKey || !autoKeyframeEnabled) {
     await commitWholePathOffset(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
   } else {
     await commitGsapPositionFromDrag(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
@@ -28182,6 +28309,19 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       height: Math.round(size.height)
     };
   }
+  if (!usePlayerStore.getState().autoKeyframeEnabled) {
+    if (activeKeyframePct != null) setActiveKeyframePct(null);
+    await commitWholePropertyOffset(
+      selection,
+      anim,
+      resizeProps,
+      pct,
+      iframe,
+      { commitMutation, fetchAnimations: fetchFallbackAnimations },
+      "Resize animation"
+    );
+    return true;
+  }
   const ct = usePlayerStore.getState().currentTime;
   const ts = resolveTweenStart(anim);
   const td = resolveTweenDuration(anim);
@@ -28296,6 +28436,18 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
     return true;
   }
   const pct = computeCurrentPercentage(selection, anim);
+  if (!usePlayerStore.getState().autoKeyframeEnabled) {
+    await commitWholePropertyOffset(
+      selection,
+      anim,
+      { rotation: newRotation },
+      pct,
+      iframe,
+      { commitMutation, fetchAnimations: fetchFallbackAnimations },
+      "Rotate animation"
+    );
+    return true;
+  }
   if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
     const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
     if (newId) anim = { ...anim, id: newId };
@@ -28327,53 +28479,6 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
   return true;
 }
 
-// src/hooks/gsapTweenSynth.ts
-function deduplicateKeyframes(keyframes) {
-  const byPct = /* @__PURE__ */ new Map();
-  for (const kf of keyframes) {
-    const existing = byPct.get(kf.percentage);
-    if (existing) {
-      existing.properties = { ...existing.properties, ...kf.properties };
-      if (kf.ease) existing.ease = kf.ease;
-    } else {
-      byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } });
-    }
-  }
-  return Array.from(byPct.values()).sort((a, b) => a.percentage - b.percentage);
-}
-function synthesizeFlatTweenKeyframes(anim) {
-  if (anim.method === "set") {
-    return null;
-  }
-  const toProps = anim.properties;
-  const fromProps = anim.fromProperties;
-  if (!toProps || Object.keys(toProps).length === 0) return null;
-  const startProps = {};
-  const endProps = {};
-  if (anim.method === "from") {
-    for (const [k, v] of Object.entries(toProps)) {
-      startProps[k] = v;
-      endProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
-    }
-  } else if (anim.method === "fromTo" && fromProps) {
-    Object.assign(startProps, fromProps);
-    Object.assign(endProps, toProps);
-  } else {
-    for (const [k, v] of Object.entries(toProps)) {
-      startProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
-      endProps[k] = v;
-    }
-  }
-  return {
-    format: "percentage",
-    keyframes: [
-      { percentage: 0, properties: startProps },
-      { percentage: 100, properties: endProps }
-    ],
-    ...anim.ease ? { ease: anim.ease } : {}
-  };
-}
-
 // src/hooks/useGsapTweenCache.ts
 function extractIdFromSelector(selector) {
   const match = selector.match(/^#([\w-]+)/);
@@ -29450,6 +29555,25 @@ function useAnimatedPropertyCommit(deps) {
       const elementHasKeyframes = selectedGsapAnimations.some((a) => !!a.keyframes);
       try {
         if (elementHasKeyframes && anim) {
+          if (!usePlayerStore.getState().autoKeyframeEnabled) {
+            const pct = computeElementPercentage(
+              usePlayerStore.getState().currentTime,
+              selection,
+              anim
+            );
+            await commitWholePropertyOffset(
+              selection,
+              anim,
+              Object.fromEntries(
+                propEntries.filter((e) => typeof e[1] === "number")
+              ),
+              pct,
+              iframe,
+              { commitMutation: gsapCommitMutation },
+              `Edit ${primaryProp} (whole animation)`
+            );
+            return;
+          }
           await commitKeyframeProps(
             selection,
             anim,
@@ -30731,16 +30855,15 @@ function dispatchPlainKey(event, key, cb) {
     return;
   }
   if (event.key === "s" && !event.altKey) {
+    event.preventDefault();
     const { selectedElementId, elements, currentTime } = usePlayerStore.getState();
     if (selectedElementId) {
       const el = elements.find((e) => (e.key ?? e.id) === selectedElementId);
       if (el && canSplitElement(el) && currentTime > el.start && currentTime < el.start + el.duration) {
-        event.preventDefault();
         void cb.handleTimelineElementSplit(el, currentTime);
         return;
       }
       if (!el && selectedElementId.includes("#")) {
-        event.preventDefault();
         cb.showToast("Use the razor tool (B) to split clips inside a sub-composition", "info");
         return;
       }
@@ -31812,6 +31935,9 @@ function useRenderClipContent({
           duration: el.duration
         });
       }
+      if (el.tag === "audio") {
+        return renderAudioClip(el, pid, style.label);
+      }
       if (activePreviewUrl && el.duration > 0) {
         return createElement(CompositionThumbnail, {
           previewUrl: activePreviewUrl,
@@ -31824,9 +31950,6 @@ function useRenderClipContent({
         });
       }
       const htmlPreviewEligible = el.duration > 0 && effectiveTimelineDuration > 0 && el.duration < effectiveTimelineDuration * 0.92 && !/(backdrop|background|overlay|scrim|mask)/i.test(el.id);
-      if (el.tag === "audio") {
-        return renderAudioClip(el, pid, style.label);
-      }
       if ((el.tag === "video" || el.tag === "img") && el.src) {
         const mediaSrc = el.src.startsWith("http") ? el.src : `/api/projects/${pid}/preview/${el.src}`;
         return createElement(VideoThumbnail, {
@@ -39725,18 +39848,30 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
         clearTimeout(parkTimerRef.current);
         if (e.detail < 2) {
           parkTimerRef.current = setTimeout(() => {
-            const anim = selectedGsapAnimations?.find((a) => a.id === animId);
-            if (anim) parkPlayheadOnKeyframe(anim, ref.pct);
+            const anim2 = selectedGsapAnimations?.find((a) => a.id === animId);
+            if (anim2) parkPlayheadOnKeyframe(anim2, ref.pct);
           }, 250);
         }
       }
       return;
     }
     if (x === Math.round(d.initX) && y === Math.round(d.initY)) return;
-    void commitNode(d.ref, x, y, animId, commitMutation);
-    if (d.ref.type === "keyframe") {
-      const anim = selectedGsapAnimations?.find((a) => a.id === animId);
-      if (anim) parkPlayheadOnKeyframe(anim, d.ref.pct);
+    const anim = d.ref.type === "keyframe" ? selectedGsapAnimations?.find((a) => a.id === animId) : void 0;
+    if (d.ref.type === "keyframe" && anim && selection && !usePlayerStore.getState().autoKeyframeEnabled) {
+      void commitWholePropertyOffset(
+        selection,
+        anim,
+        { x, y },
+        d.ref.pct,
+        iframeRef.current,
+        { commitMutation: (_sel, mutation, options) => commitMutation(mutation, options) },
+        "Move animation path"
+      );
+    } else {
+      void commitNode(d.ref, x, y, animId, commitMutation);
+    }
+    if (d.ref.type === "keyframe" && anim) {
+      parkPlayheadOnKeyframe(anim, d.ref.pct);
     }
   };
   const onPathHover = (e) => {
@@ -39935,6 +40070,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
   }, [prefs.gridVisible, updatePrefs]);
   useEffect56(() => {
     const handleKeyDown = (e) => {
+      if (e.defaultPrevented) return;
       const t = e.target;
       if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) return;
       if (t instanceof HTMLElement && t.isContentEditable) return;
@@ -43831,7 +43967,7 @@ function useKeyframeKeyboard({
 }
 
 // src/components/TimelineToolbar.tsx
-import { Fragment as Fragment34, jsx as jsx101, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs86 } from "react/jsx-runtime";
 function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
   const sessionRef = useRef88(session);
@@ -43863,6 +43999,8 @@ function TimelineToolbar({
 }) {
   const activeTool = usePlayerStore((s) => s.activeTool);
   const setActiveTool = usePlayerStore((s) => s.setActiveTool);
+  const autoKeyframeEnabled = usePlayerStore((s) => s.autoKeyframeEnabled);
+  const setAutoKeyframeEnabled = usePlayerStore((s) => s.setAutoKeyframeEnabled);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatAnalysisReady = usePlayerStore((s) => s.beatAnalysis !== null);
   const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
@@ -43899,10 +44037,10 @@ function TimelineToolbar({
           }
         ) })
       ] }),
-      STUDIO_KEYFRAMES_ENABLED && onToggleKeyframe && /* @__PURE__ */ jsx101(Fragment34, { children: /* @__PURE__ */ jsx101(
+      STUDIO_KEYFRAMES_ENABLED && onToggleKeyframe && /* @__PURE__ */ jsx101(
         Tooltip,
         {
-          label: keyframeState === "active" ? "Remove keyframe at playhead (K)" : keyframeState === "inactive" ? keyframeWillExtend ? "Add keyframe at playhead \u2014 extends animation (K)" : "Add keyframe at playhead (K)" : "Add keyframe (K)",
+          label: keyframeState === "active" ? "Remove keyframe at playhead (K)" : keyframeState === "inactive" ? keyframeWillExtend ? "Add keyframe at playhead, extends animation (K)" : "Add keyframe at playhead (K)" : "Add keyframe (K)",
           children: /* @__PURE__ */ jsx101(
             "button",
             {
@@ -43921,7 +44059,36 @@ function TimelineToolbar({
             }
           )
         }
-      ) }),
+      ),
+      STUDIO_KEYFRAMES_ENABLED && /* @__PURE__ */ jsx101(
+        Tooltip,
+        {
+          label: autoKeyframeEnabled ? "Auto-record manual edits as keyframes (click to turn off)" : "Manual edits will not be recorded as keyframes (click to turn on)",
+          children: /* @__PURE__ */ jsx101(
+            "button",
+            {
+              type: "button",
+              onClick: () => setAutoKeyframeEnabled(!autoKeyframeEnabled),
+              "aria-pressed": autoKeyframeEnabled,
+              className: `flex h-7 w-7 items-center justify-center rounded transition-colors ${autoKeyframeEnabled ? "text-red-400 hover:text-red-300" : "text-neutral-600 hover:text-neutral-400"}`,
+              children: /* @__PURE__ */ jsxs86("svg", { width: "18", height: "18", viewBox: "0 0 10 10", fill: "none", children: [
+                /* @__PURE__ */ jsx101("path", { d: "M5 0.7L9.3 5L5 9.3L0.7 5Z", stroke: "currentColor", strokeWidth: "1" }),
+                /* @__PURE__ */ jsx101(
+                  "circle",
+                  {
+                    cx: "5",
+                    cy: "5",
+                    r: "1.8",
+                    fill: autoKeyframeEnabled ? "currentColor" : "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1"
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      ),
       onSplitElement && (() => {
         const { selectedElementId, elements, currentTime: currentTime2 } = usePlayerStore.getState();
         const el = selectedElementId ? elements.find((e) => (e.key ?? e.id) === selectedElementId) : null;