@hyperframes/studio 0.8.126 → 0.8.128

package/dist/player.js

@@ -1,8 +1,8 @@
 import {
   Player
-} from "./chunk-246VB2G3.js";
+} from "./chunk-DRVWEPO5.js";
 import "./chunk-5VSXRGIX.js";
-import "./chunk-5EKWJZLM.js";
+import "./chunk-TDWGXBUT.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Player

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.126",
+  "version": "0.8.128",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.126",
-    "@hyperframes/sdk": "0.8.126",
-    "@hyperframes/shader-transitions": "0.8.126",
-    "@hyperframes/player": "0.8.126",
-    "@hyperframes/parsers": "0.8.126",
-    "@hyperframes/studio-server": "0.8.126"
+    "@hyperframes/player": "0.8.128",
+    "@hyperframes/parsers": "0.8.128",
+    "@hyperframes/sdk": "0.8.128",
+    "@hyperframes/shader-transitions": "0.8.128",
+    "@hyperframes/studio-server": "0.8.128",
+    "@hyperframes/core": "0.8.128"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.126"
+    "@hyperframes/producer": "0.8.128"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/TimelineToolbar.tsx

@@ -11,7 +11,7 @@ import {
   isPlayheadWithinTween,
   type EnableKeyframesSession,
 } from "../hooks/useEnableKeyframes";
-import { computeElementPercentage, KEYFRAME_PCT_MATCH } from "../hooks/gsapShared";
+import { computeElementPercentage, playsNear } from "../hooks/gsapShared";
 import { useKeyframeKeyboard } from "../hooks/useKeyframeKeyboard";
 import {
   getNextTimelineZoomPercent,
@@ -73,9 +73,8 @@ const NO_KEYFRAME_TOGGLE: KeyframeToggleState = {
 function isMotionPathEndpoint(animation: GsapAnimation | undefined, percentage: number): boolean {
   if (!animation?.keyframes) return false;
   const keyframes = animation.keyframes.keyframes;
-  return (
-    Math.abs((keyframes[0]?.percentage ?? -Infinity) - percentage) <= KEYFRAME_PCT_MATCH ||
-    Math.abs((keyframes.at(-1)?.percentage ?? Infinity) - percentage) <= KEYFRAME_PCT_MATCH
+  return [keyframes[0], keyframes.at(-1)].some(
+    (keyframe) => keyframe && playsNear(animation, keyframe.percentage, percentage),
   );
 }
 
@@ -93,14 +92,14 @@ function resolveKeyframeToggleState(
   if (!animation?.keyframes) return NO_KEYFRAME_TOGGLE;
 
   const isMotionPath = Boolean(arcAnimation);
-  if (!isPlayheadWithinTween(animation, currentTime, session.domEditSelection)) {
+  if (!isPlayheadWithinTween(animation, currentTime)) {
     return { state: "inactive", isMotionPath, pathEndpoint: false, willExtend: true };
   }
 
   const percentage = computeElementPercentage(currentTime, session.domEditSelection, animation);
   const pathEndpoint = isMotionPathEndpoint(arcAnimation, percentage);
-  const active = animation.keyframes.keyframes.some(
-    (keyframe) => Math.abs(keyframe.percentage - percentage) <= KEYFRAME_PCT_MATCH,
+  const active = animation.keyframes.keyframes.some((keyframe) =>
+    playsNear(animation, keyframe.percentage, percentage),
   );
   return {
     state: pathEndpoint ? "none" : active ? "active" : "inactive",

package/src/components/editor/MotionPathOverlay.layerPress.test.tsx

@@ -2,8 +2,10 @@
 import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, expect, it, vi } from "vitest";
+import { GsapEditBlockedError } from "../../hooks/gsapEditOutcome";
 import { usePlayerStore } from "../../player/store/playerStore";
 import { MotionPathOverlay } from "./MotionPathOverlay";
+import { commitNodeDrop } from "./motionPathCommit";
 import type { DomEditSelection } from "./domEditing";
 
 Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
@@ -14,6 +16,14 @@ const { commitMutation } = vi.hoisted(() => ({
 vi.mock("../../contexts/DomEditContext", () => ({
   useDomEditContext: () => ({ selectedGsapAnimations: [], commitMutation }),
 }));
+const showToast = vi.hoisted(() => vi.fn());
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContextOptional: () => ({ showToast }),
+}));
+vi.mock("./motionPathCommit", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./motionPathCommit")>()),
+  commitNodeDrop: vi.fn(),
+}));
 vi.mock("./motionPathSelection", () => ({
   selectorFor: () => "#box",
   editableAnimationId: () => "a1",
@@ -189,3 +199,35 @@ it("draws where GSAP started the tween before the first keyframe, as a mark that
   const drawn = host.querySelector("polyline:not(.pointer-events-auto)")!;
   expect(drawn.getAttribute("points")).toBe("50,30 60,30 140,30");
 });
+
+it("a node drop the writer refuses says why", async () => {
+  const refusal = new GsapEditBlockedError("keyframes-uneditable");
+  vi.mocked(commitNodeDrop).mockRejectedValue(refusal);
+  vi.spyOn(Element.prototype, "setPointerCapture").mockImplementation(() => {});
+  const host = document.body.appendChild(document.createElement("div"));
+  const root = createRoot(host);
+  const selection = { element: document.createElement("div") } as unknown as DomEditSelection;
+  try {
+    act(() =>
+      root.render(
+        <MotionPathOverlay
+          iframeRef={{ current: null }}
+          selection={selection}
+          compositionSize={{ width: 1920, height: 1080 }}
+          isPlaying={false}
+        />,
+      ),
+    );
+    const node = host.querySelector('circle.pointer-events-auto[cx="140"]')!;
+    document.elementsFromPoint = () => [node];
+    const at = (clientX: number) => ({ bubbles: true, button: 0, clientX, clientY: 30 });
+    act(() => void node.dispatchEvent(new PointerEvent("pointerdown", at(140))));
+    act(() => void node.dispatchEvent(new PointerEvent("pointermove", at(180))));
+    await act(async () => void node.dispatchEvent(new PointerEvent("pointerup", at(180))));
+    expect(commitNodeDrop).toHaveBeenCalledTimes(1);
+    expect(showToast).toHaveBeenCalledWith(refusal.message, "error");
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+  }
+});

package/src/components/editor/MotionPathOverlay.tsx

@@ -1,13 +1,12 @@
-import { observeGsapGesture } from "../../hooks/gsapGestureOutcome";
-import { trackPreviewEditResult } from "../../utils/previewFeatureUsage";
 import { scopedElementKey } from "../../hooks/gsapKeyframeCacheHelpers";
 import { memo, useEffect, useRef, useState, type RefObject } from "react";
 import type { DomEditSelection } from "./domEditing";
 import { useDomEditContext } from "../../contexts/DomEditContext";
+import { useStudioShellContextOptional } from "../../contexts/StudioContext";
+import { useGsapInteractionFailureTelemetry } from "../../hooks/useGsapInteractionFailureTelemetry";
 import { usePlayerStore } from "../../player/store/playerStore";
 import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { parkPlayheadOnKeyframe } from "../../hooks/gsapDragCommit";
-import { commitWholePropertyOffset } from "../../hooks/gsapWholePropertyOffsetCommit";
 import { nearestPointOnPath, nodeCentre, type MotionNodeRef } from "./motionPathGeometry";
 import { editableAnimationId, selectorFor } from "./motionPathSelection";
 import { controlForNode, controlUnder, pressControl } from "./motionPathLayerNode";
@@ -23,8 +22,9 @@ import {
   commitAddKeyframe,
   commitAddWaypoint,
   commitCreatePath,
-  commitNode,
+  commitNodeDrop,
   commitRemoveWaypoint,
+  nodeDropLabel,
 } from "./motionPathCommit";
 import { elementHome } from "./motionPathHome";
 import { hasMotionPathPlugin, transformWDivisor, useMotionPathData } from "./useMotionPathData";
@@ -66,6 +66,7 @@ const NODE_PX = 6; // node radius in screen pixels (kept constant across zoom)
 // (select the keyframe); at or above it the gesture commits a move. Screen-space
 // (not composition px) so it behaves identically at any zoom.
 const DRAG_THRESHOLD_PX = 3;
+const noToast = () => {};
 
 /**
  * Draws the selected element's GSAP motion path over the canvas — a dashed
@@ -91,6 +92,11 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
     handleGsapRemoveAllKeyframes,
     handleGsapMoveKeyframeToPlayhead,
   } = useDomEditContext();
+  const shell = useStudioShellContextOptional();
+  const reportFailure = useGsapInteractionFailureTelemetry(
+    shell?.activeCompPath ?? null,
+    shell?.showToast ?? noToast,
+  );
   const { rect, geometry, geometryResolved, visibleInPreview, home, pScale } = useMotionPathData(
     iframeRef,
     selectorFor(selection),
@@ -373,30 +379,18 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
     // high zoom) would commit an identical value — a no-op undo entry. Skip the
     // commit, but don't treat it as a click either (the user did drag).
     if (x === Math.round(d.initX) && y === Math.round(d.initY)) return;
-    // Auto-keyframe off (#1808): dragging a keyframe's node shifts the whole path.
     const anim =
       d.ref.type === "keyframe" ? selectedGsapAnimations?.find((a) => a.id === animId) : undefined;
-    if (
-      d.ref.type === "keyframe" &&
-      anim &&
-      selection &&
-      !usePlayerStore.getState().autoKeyframeEnabled
-    ) {
-      const writes = observeGsapGesture((_sel, mutation, options) =>
-        commitMutation(mutation, options),
-      );
-      void commitWholePropertyOffset(
-        selection,
-        anim,
-        { x, y },
-        d.ref.pct,
-        iframeRef.current,
-        { commitMutation: writes.commit! },
-        "Move animation path",
-      ).then(() => trackPreviewEditResult("motion_path", "drag", writes.finish()));
-    } else {
-      void commitNode(d.ref, x, y, animId, commitMutation);
-    }
+    const label = nodeDropLabel(d.ref);
+    commitNodeDrop({
+      ref: d.ref,
+      at: { x, y },
+      animId,
+      anim,
+      selection,
+      iframe: iframeRef.current,
+      commitMutation,
+    }).catch((error: unknown) => reportFailure(error, selection, "drag", label));
     // Park on the edited keyframe, or a playhead before the tween hides the edit.
     if (d.ref.type === "keyframe" && anim) {
       parkPlayheadOnKeyframe(anim, d.ref.pct);

package/src/components/editor/commitPreflightHandles.test.tsx

@@ -207,6 +207,13 @@ async function select(animations: GsapAnimation[] | null, props: Partial<EditorP
   return view;
 }
 
+async function selectLoopedPair() {
+  const a = resolved(element("a"));
+  const b = resolved(element("b"));
+  const view = await select([loop({ x: 120 }, "#a")], { selection: a, groups: [a, b] });
+  return { a, b, ...view };
+}
+
 describe("handles follow what Studio would commit", () => {
   beforeEach(() => {
     HTMLElement.prototype.setPointerCapture = () => undefined;
@@ -442,6 +449,31 @@ describe("handles follow what Studio would commit", () => {
     expect(spies.onManualDragStart).not.toHaveBeenCalled();
   });
 
+  it("re-checks only the members that changed when the group is handed back anew", async () => {
+    const { a, b, seen, render } = await selectLoopedPair();
+    const [narrowedA, narrowedB] = seen.groups;
+
+    render({ selection: a, groups: [a, b] });
+    expect(seen.groups[0]).toBe(narrowedA);
+    expect(seen.groups[1]).toBe(narrowedB);
+    const movedA = resolved(a.element);
+    render({ selection: movedA, groups: [movedA, b] });
+    expect(seen.groups[0]).not.toBe(narrowedA);
+    expect(flags(seen.groups[0]!)[0]).toBe(false);
+    expect(seen.groups[1]).toBe(narrowedB);
+  });
+
+  it("checks again on a new cache version even when that re-read fails", async () => {
+    const { a, b, seen, render } = await selectLoopedPair();
+    const [narrowedA] = seen.groups;
+
+    parses.fetch.mockResolvedValueOnce(null);
+    render({ selection: a, groups: [a, b], version: 1 });
+    await settle();
+    expect(seen.groups[0]).not.toBe(narrowedA);
+    expect(flags(seen.groups[0]!)[0]).toBe(false);
+  });
+
   it.each([
     ["rotation", loop({ rotation: 90 }), [true, true, false], { dots: 4, rotate: false }],
     ["resize", loop({ width: 320, height: 90 }), [true, false, true], { dots: 0, rotate: true }],

package/src/components/editor/domEditingLayers.test.ts

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   collectDomEditLayerItems,
   resolveDomEditSelection,
@@ -100,6 +100,37 @@ describe("resolveDomEditSelection — hfId from data-hf-id", () => {
   });
 });
 
+describe("resolveDomEditSelection — source probe on re-resolve", () => {
+  afterEach(() => vi.unstubAllGlobals());
+  const probing = { activeCompositionPath: "index.html", isMasterView: true, projectId: "p" };
+
+  it("asks the server once per node and target; re-resolving the same pair keeps the answer", async () => {
+    const fetchMock = vi.fn(() =>
+      Promise.resolve({ ok: true, json: () => Promise.resolve({ exists: [false] }) }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+    const el = document.createElement("div");
+    el.id = "generated";
+    document.body.appendChild(el);
+
+    const first = await resolveDomEditSelection(el, probing);
+    const again = await resolveDomEditSelection(el, { ...probing, previous: first });
+    el.id = "renamed";
+    await resolveDomEditSelection(el, { ...probing, previous: again });
+    el.id = "generated";
+    const replaced = document.createElement("div");
+    replaced.id = "generated";
+    el.replaceWith(replaced);
+    await resolveDomEditSelection(replaced, { ...probing, previous: again });
+    replaced.remove();
+
+    expect(first?.existsInSource).toBe(false);
+    expect(again?.existsInSource).toBe(false);
+    expect(again?.capabilities.canMove).toBe(false);
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+  });
+});
+
 describe("resolveDomEditSelection — data-hf-group capture", () => {
   // <div id="parent"><div data-hf-group="Group 1"><div data-hf-group="Group 2">
   //   <span id="child"/></div></div></div>
@@ -236,17 +267,19 @@ describe("buildTextFieldChildLocator", () => {
   });
 });
 
-describe("collectDomEditLayerItems item budget", () => {
-  function documentWith(count: number): HTMLElement {
-    const root = document.createElement("div");
-    root.setAttribute("data-composition-id", "index.html");
-    for (let i = 0; i < count; i++) {
-      const child = document.createElement("div");
-      child.id = `el-${i}`;
-      root.append(child);
-    }
-    return root;
+function compositionWith(count: number, child: (el: HTMLElement, i: number) => void): HTMLElement {
+  const root = document.createElement("div");
+  root.setAttribute("data-composition-id", "index.html");
+  for (let i = 0; i < count; i++) {
+    const el = document.createElement("div");
+    child(el, i);
+    root.append(el);
   }
+  return root;
+}
+
+describe("collectDomEditLayerItems item budget", () => {
+  const documentWith = (count: number) => compositionWith(count, (el, i) => (el.id = `el-${i}`));
 
   it("returns the whole document by default", () => {
     // A default cap here silently truncated the marquee's candidate list: a drag
@@ -264,13 +297,7 @@ describe("collectDomEditLayerItems selector-index cost", () => {
   // Attached, unlike the fixture above: a detached subtree is invisible to
   // document.querySelectorAll, so the occurrence lookup would find nothing.
   function attachedRootWithSharedClass(count: number): HTMLElement {
-    const root = document.createElement("div");
-    root.setAttribute("data-composition-id", "index.html");
-    for (let i = 0; i < count; i++) {
-      const child = document.createElement("div");
-      child.className = "box";
-      root.append(child);
-    }
+    const root = compositionWith(count, (el) => (el.className = "box"));
     document.body.append(root);
     return root;
   }

package/src/components/editor/domEditingLayers.ts

@@ -1,4 +1,4 @@
-import { probeSourceElement } from "./probeSourceElement";
+import { knownSourceAnswer, probeSourceElement, type ProbeTarget } from "./probeSourceElement";
 import { isAudibleVideoNode } from "../../player/lib/timelineElementHelpers";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import {
@@ -288,6 +288,7 @@ export async function resolveDomEditSelection(
     projectId?: string | null;
     skipSourceProbe?: boolean;
     exactTarget?: boolean;
+    previous?: DomEditSelection | null;
   },
 ): Promise<DomEditSelection | null> {
   if (!startEl) return null;
@@ -330,14 +331,14 @@ export async function resolveDomEditSelection(
       isCompositionRootLayer(current, doc, computedStyles);
     const textFields = collectDomEditTextFields(current);
     const isInsideLocked = Boolean(findClosestByAttribute(current, ["data-timeline-locked"]));
-    let existsInSource: boolean | undefined;
-    if (!options.skipSourceProbe && options.projectId && (current.id || selector || hfId)) {
-      const probeTarget: { id?: string; hfId?: string; selector?: string; selectorIndex?: number } =
-        {};
-      if (current.id) probeTarget.id = current.id;
-      if (hfId) probeTarget.hfId = hfId;
-      if (selector) probeTarget.selector = selector;
-      if (selectorIndex != null) probeTarget.selectorIndex = selectorIndex;
+    const probeTarget: ProbeTarget = {};
+    if (current.id) probeTarget.id = current.id;
+    if (hfId) probeTarget.hfId = hfId;
+    if (selector) probeTarget.selector = selector;
+    if (selectorIndex != null) probeTarget.selectorIndex = selectorIndex;
+    let existsInSource = knownSourceAnswer(options.previous, current, sourceFile, probeTarget);
+    const probe = existsInSource === undefined && !options.skipSourceProbe;
+    if (probe && options.projectId && (current.id || selector || hfId)) {
       existsInSource = await probeSourceElement(options.projectId, sourceFile, probeTarget);
     }
     const capabilities = resolveEditingAffordances(
@@ -380,6 +381,7 @@ export async function resolveDomEditSelection(
       computedStyles,
       textFields,
       capabilities,
+      existsInSource,
     };
   }
 

package/src/components/editor/domEditingTypes.ts

@@ -92,6 +92,7 @@ export interface DomEditSelection extends PatchTarget {
   computedStyles: Record<string, string>;
   textFields: DomEditTextField[];
   capabilities: DomEditCapabilities;
+  existsInSource?: boolean;
   gsapAnimations?: GsapAnimation[];
 }
 

package/src/components/editor/keyframeRetime.ts

@@ -14,6 +14,7 @@
  * Kept pure (no React/store/GSAP) so the trickiest math is unit-testable. The
  * caller supplies the resolved tween window + the drop's absolute time.
  */
+import { progressAtTime, timeAtProgress } from "../../utils/gsapKeyframeEases";
 
 export interface RetimeKeyframe {
   /** Tween-relative percentage (the writer/runtime key on this). */
@@ -92,6 +93,7 @@ function resolveFlatTweenBoundaryRetime(opts: {
  * - `draggedTweenPct`: identifies which keyframe is being dragged (closest match).
  * - `tweenStart` / `tweenDuration`: the tween's resolved absolute window.
  * - `dropAbsTime`: the drop's absolute time (handler converts clip-% → seconds).
+ * - `runEase`: the tween's run ease, which decides when each keyframe plays.
  */
 export function resolveKeyframeRetime(opts: {
   keyframes: ReadonlyArray<RetimeKeyframe>;
@@ -99,8 +101,9 @@ export function resolveKeyframeRetime(opts: {
   tweenStart: number;
   tweenDuration: number;
   dropAbsTime: number;
+  runEase?: string;
 }): KeyframeRetimeResult {
-  const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime } = opts;
+  const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime, runEase } = opts;
   if (tweenDuration <= 0) return { kind: "noop" };
   const tweenEnd = tweenStart + tweenDuration;
 
@@ -124,7 +127,8 @@ export function resolveKeyframeRetime(opts: {
     // Round here, not at the return: the no-op test below and the value written
     // to source must be the same number. The resize branch already rounds, so
     // this keeps both write paths at the authored 3dp precision.
-    const toTweenPct = round3(clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100));
+    const dropTimePct = clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100);
+    const toTweenPct = round3(progressAtTime(runEase, dropTimePct));
     if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT) return { kind: "noop" };
     return { kind: "move", toTweenPct };
   }
@@ -154,8 +158,11 @@ export function resolveKeyframeRetime(opts: {
   // survive verbatim (no rebuilt keyframes array).
   const pctRemap: KeyframePctRemap[] = keyframes.map((kf, i) => {
     const absTime =
-      i === draggedIdx ? dropAbsTime : tweenStart + (kf.percentage / 100) * tweenDuration;
-    return { from: kf.percentage, to: round3(((absTime - newStart) / newDuration) * 100) };
+      i === draggedIdx
+        ? dropAbsTime
+        : tweenStart + (timeAtProgress(runEase, kf.percentage) / 100) * tweenDuration;
+    const newTimePct = ((absTime - newStart) / newDuration) * 100;
+    return { from: kf.percentage, to: round3(progressAtTime(runEase, newTimePct)) };
   });
 
   return {