@hyperframes/studio 0.7.7 → 0.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "",
   "repository": {
     "type": "git",
@@ -45,9 +45,9 @@
     "dompurify": "^3.2.4",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.7",
-    "@hyperframes/sdk": "0.7.7",
-    "@hyperframes/player": "0.7.7"
+    "@hyperframes/core": "0.7.9",
+    "@hyperframes/sdk": "0.7.9",
+    "@hyperframes/player": "0.7.9"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -62,7 +62,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.7"
+    "@hyperframes/producer": "0.7.9"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioRightPanel.tsx

@@ -118,6 +118,7 @@ export function StudioRightPanel({
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
     commitAnimatedProperty,
+    commitAnimatedProperties,
     handleSetArcPath,
     handleUpdateArcSegment,
     handleUnroll,
@@ -269,9 +270,12 @@ export function StudioRightPanel({
       onRemoveGsapFromProperty={handleGsapRemoveFromProperty}
       onAddGsapAnimation={handleGsapAddAnimation}
       onCommitAnimatedProperty={commitAnimatedProperty}
+      onCommitAnimatedProperties={commitAnimatedProperties}
       onAddKeyframe={handleGsapAddKeyframe}
       onRemoveKeyframe={handleGsapRemoveKeyframe}
-      onConvertToKeyframes={handleGsapConvertToKeyframes}
+      onConvertToKeyframes={(animId, duration) =>
+        handleGsapConvertToKeyframes(animId, undefined, duration)
+      }
       onSeekToTime={(t) => usePlayerStore.getState().requestSeek(t)}
       onSetArcPath={handleSetArcPath}
       onUpdateArcSegment={handleUpdateArcSegment}

package/src/components/editor/DomEditOverlay.tsx

@@ -2,6 +2,7 @@ import { memo, useEffect, useMemo, useRef, useState, type RefObject } from "reac
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { type DomEditSelection } from "./domEditing";
 import { useMarqueeGestures } from "./marqueeCommit";
+import { MarqueeOverlay } from "./MarqueeOverlay";
 import { resolveDomEditGroupOverlayRect, toOverlayRect } from "./domEditOverlayGeometry";
 import { collectDomEditLayerItems } from "./domEditingLayers";
 import { isElementComputedVisible } from "./domEditingElement";
@@ -101,6 +102,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   const onMarqueeSelectRef = useRef(onMarqueeSelect);
   onMarqueeSelectRef.current = onMarqueeSelect;
 
+  // fallow-ignore-next-line complexity
   const selectionShapeStyles = (() => {
     const fallback = {
       borderRadius: 8 as string | number,
@@ -226,6 +228,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   // outside the composition bounds so users can find them.
   const offCanvasElementsRef = useRef<Map<string, HTMLElement>>(new Map());
   const [offCanvasRects, setOffCanvasRects] = useState<OffCanvasRect[]>([]);
+  // fallow-ignore-next-line complexity
   useEffect(() => {
     const iframe = iframeRef.current;
     const overlay = overlayRef.current;
@@ -568,18 +571,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         activeCompositionPathRef={activeCompositionPathRef}
         onSelectionChangeRef={onSelectionChangeRef}
       />
-      {marquee.marqueeRect && (
-        <div
-          aria-hidden="true"
-          className="pointer-events-none absolute border border-dashed border-studio-accent bg-studio-accent/10"
-          style={{
-            left: marquee.marqueeRect.left,
-            top: marquee.marqueeRect.top,
-            width: marquee.marqueeRect.width,
-            height: marquee.marqueeRect.height,
-          }}
-        />
-      )}
+      <MarqueeOverlay candidateRects={marquee.candidateRects} marqueeRect={marquee.marqueeRect} />
       <GridOverlay
         visible={gridVisible}
         spacing={gridSpacing}

package/src/components/editor/MarqueeOverlay.tsx

@@ -0,0 +1,40 @@
+import type { Rect } from "../../utils/marqueeGeometry";
+
+interface MarqueeOverlayProps {
+  /** Elements the marquee currently intersects — outlined live before mouse-up. */
+  candidateRects: Rect[];
+  /** The marquee drag rectangle itself, or null when not marquee-selecting. */
+  marqueeRect: Rect | null;
+}
+
+/**
+ * The marquee selection visuals: a live "candidate" outline on each element the
+ * box currently touches, plus the dashed drag rectangle. Extracted from
+ * DomEditOverlay to keep that file under the 600-line cap.
+ */
+export function MarqueeOverlay({ candidateRects, marqueeRect }: MarqueeOverlayProps) {
+  return (
+    <>
+      {candidateRects.map((r, i) => (
+        <div
+          key={i}
+          aria-hidden="true"
+          className="pointer-events-none absolute rounded-sm border border-studio-accent bg-studio-accent/5"
+          style={{ left: r.left, top: r.top, width: r.width, height: r.height }}
+        />
+      ))}
+      {marqueeRect && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute border border-dashed border-studio-accent bg-studio-accent/10"
+          style={{
+            left: marqueeRect.left,
+            top: marqueeRect.top,
+            width: marqueeRect.width,
+            height: marqueeRect.height,
+          }}
+        />
+      )}
+    </>
+  );
+}

package/src/components/editor/OffCanvasIndicators.tsx

@@ -24,7 +24,8 @@ interface OffCanvasIndicatorsProps {
 /**
  * Dashed teal indicators for elements whose bounds extend past the composition
  * (the "gray zone"). The in-canvas portion is clipped away so only the
- * protruding sliver is dashed; the inside portion gets a solid outline.
+ * protruding sliver is dashed — the on-canvas part gets no outline, since a
+ * solid selection-style border on an unselected element reads as "selected".
  * Extracted from DomEditOverlay to keep that file under the 600-LOC cap.
  */
 export function OffCanvasIndicators({
@@ -57,7 +58,6 @@ export function OffCanvasIndicators({
           const clipOutside = hasInside
             ? `polygon(evenodd, 0 0, ${r.width}px 0, ${r.width}px ${r.height}px, 0 ${r.height}px, 0 0, ${cL}px ${cT}px, ${cR}px ${cT}px, ${cR}px ${cB}px, ${cL}px ${cB}px, ${cL}px ${cT}px)`
             : undefined;
-          const clipInside = `inset(${cT}px ${Math.max(0, r.width - cR)}px ${Math.max(0, r.height - cB)}px ${cL}px round 6px)`;
           const selectOffCanvas = async () => {
             const el = elements.current.get(r.key);
             if (!el) return;
@@ -98,11 +98,6 @@ export function OffCanvasIndicators({
                   }
                 }}
               />
-              {/* Solid layer — clipped to canvas bounds, covers inside portion */}
-              <div
-                className="pointer-events-none absolute inset-0 border border-studio-accent/80 rounded-md bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
-                style={{ clipPath: clipInside }}
-              />
             </div>
           );
         })}

package/src/components/editor/PropertyPanel.tsx

@@ -90,6 +90,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   onRemoveKeyframe,
   onConvertToKeyframes,
   onCommitAnimatedProperty,
+  onCommitAnimatedProperties,
   onSeekToTime,
   recordingState,
   recordingDuration,
@@ -523,9 +524,20 @@ export const PropertyPanel = memo(function PropertyPanel({
               elDuration={elDuration}
               element={element}
               onCommitAnimatedProperty={onCommitAnimatedProperty}
+              onCommitAnimatedProperties={onCommitAnimatedProperties}
               onSeekToTime={onSeekToTime}
               onRemoveKeyframe={onRemoveKeyframe}
               onConvertToKeyframes={onConvertToKeyframes}
+              onLivePreviewProps={(el, props) => {
+                const iframe = iframeRef.current;
+                const win = iframe?.contentWindow as
+                  | { gsap?: { set: (t: Element, v: Record<string, number>) => void } }
+                  | null
+                  | undefined;
+                const sel = el.id ? `#${el.id}` : el.selector;
+                const node = sel ? iframe?.contentDocument?.querySelector(sel) : null;
+                if (win?.gsap && node) win.gsap.set(node, props);
+              }}
             />
           )}
           <div className="mt-3">

package/src/components/editor/Transform3DCube.tsx

@@ -0,0 +1,313 @@
+import { useRef, useState } from "react";
+import { projectAxes, projectCubeFaces, wrapDeg } from "./transform3dProjection";
+
+export interface CubePose {
+  rotationX: number;
+  rotationY: number;
+  rotationZ: number;
+}
+
+const VIEW_W = 132;
+const VIEW_H = 112;
+const CX = VIEW_W / 2;
+const CY = 54;
+const RADIUS = 26;
+// The cube mirrors the element's orientation 1:1 — no decorative viewing camera,
+// so at rotation 0/0/0 it faces front (flat) exactly like the un-rotated element.
+// The X/Y/Z axis gizmo keeps the flat-at-rest state readable.
+const SENSITIVITY = 0.6; // degrees per pixel of drag
+
+/**
+ * Draggable 3D-orientation cube. Drag to tilt (X/Y); Shift-drag to roll (Z).
+ * Presentational only: emits a live draft pose while dragging and a final pose
+ * on release — the parent owns live-previewing and committing to GSAP props.
+ */
+// transformPerspective (px) is inversely related to effect strength, with 0 = off.
+// Map a 0..1 slider strength to px and to the cube's weak-perspective projection.
+const STRONG_PX = 200;
+const WEAK_PX = 1600;
+const PX_RANGE = WEAK_PX - STRONG_PX;
+const strengthToPx = (s: number) => (s <= 0.01 ? 0 : Math.round(WEAK_PX - s * PX_RANGE));
+const pxToStrength = (px: number) =>
+  px <= 0
+    ? 0
+    : Math.max(0, Math.min(1, (WEAK_PX - Math.max(STRONG_PX, Math.min(WEAK_PX, px))) / PX_RANGE));
+const pxToProjPersp = (px: number) => (px > 0 ? Math.max(2.2, Math.min(14, px / 130)) : 14);
+
+/** Horizontal "perspective strength" slider — left = none, right = dramatic. */
+function PerspectiveSlider({
+  value,
+  onDraft,
+  onCommit,
+}: {
+  value: number;
+  onDraft?: (px: number) => void;
+  onCommit: (px: number) => void;
+}) {
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const draggingRef = useRef(false);
+  const strength = pxToStrength(value);
+  const fromEvent = (clientX: number) => {
+    const r = trackRef.current?.getBoundingClientRect();
+    if (!r || r.width === 0) return 0;
+    return strengthToPx(Math.max(0, Math.min(1, (clientX - r.left) / r.width)));
+  };
+  return (
+    <div className="flex items-center gap-1.5 px-2 pb-1.5 pt-1">
+      <span className="text-[8px] font-medium uppercase tracking-wide text-neutral-600">Persp</span>
+      <div
+        ref={trackRef}
+        onPointerDown={(e) => {
+          e.currentTarget.setPointerCapture(e.pointerId);
+          draggingRef.current = true;
+          onDraft?.(fromEvent(e.clientX));
+        }}
+        onPointerMove={(e) => {
+          if (draggingRef.current) onDraft?.(fromEvent(e.clientX));
+        }}
+        onPointerUp={(e) => {
+          if (!draggingRef.current) return;
+          draggingRef.current = false;
+          onCommit(fromEvent(e.clientX));
+        }}
+        onPointerCancel={() => {
+          draggingRef.current = false;
+        }}
+        className="relative h-3 flex-1 cursor-ew-resize touch-none"
+      >
+        <div className="absolute top-1/2 h-0.5 w-full -translate-y-1/2 rounded-full bg-neutral-700" />
+        <div
+          className="absolute top-1/2 h-0.5 -translate-y-1/2 rounded-full bg-[#5ff0bf]"
+          style={{ width: `${strength * 100}%` }}
+        />
+        <div
+          className="absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-neutral-900 bg-[#5ff0bf]"
+          style={{ left: `${strength * 100}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function Transform3DCube({
+  pose,
+  perspective = 0,
+  onPoseDraft,
+  onPoseCommit,
+  onPerspectiveDraft,
+  onPerspectiveCommit,
+  onRecenter,
+  onKeyframe,
+  keyframed,
+}: {
+  pose: CubePose;
+  /** Element's transformPerspective (px); drives the cube's foreshortening. */
+  perspective?: number;
+  /** Fires on every drag move with the in-progress pose (parent live-previews). */
+  onPoseDraft?: (pose: CubePose) => void;
+  /** Fires once on pointer release with the final pose (commit). */
+  onPoseCommit: (pose: CubePose) => void;
+  /** Live + committed perspective (px) from the in-cube slider. */
+  onPerspectiveDraft?: (px: number) => void;
+  onPerspectiveCommit?: (px: number) => void;
+  /** Reset to identity orientation. */
+  onRecenter?: () => void;
+  /** Toggle keyframing the 3D transform (convert the static set → keyframes). */
+  onKeyframe?: () => void;
+  /** Whether the 3D transform is already keyframed (drives the toggle's state). */
+  keyframed?: boolean;
+}) {
+  const [draft, setDraft] = useState<CubePose | null>(null);
+  const dragRef = useRef<{ x: number; y: number; pose: CubePose } | null>(null);
+  const shown = draft ?? pose;
+  const projOpts = {
+    cx: CX,
+    cy: CY,
+    r: RADIUS,
+    persp: pxToProjPersp(perspective),
+  };
+  const faces = projectCubeFaces(shown.rotationX, shown.rotationY, shown.rotationZ, projOpts);
+  const axes = projectAxes(shown.rotationX, shown.rotationY, shown.rotationZ, projOpts);
+
+  const onPointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragRef.current = { x: e.clientX, y: e.clientY, pose: shown };
+    setDraft(shown);
+  };
+
+  const onPointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    const d = dragRef.current;
+    if (!d) return;
+    const dx = e.clientX - d.x;
+    const dy = e.clientY - d.y;
+    const next: CubePose = e.shiftKey
+      ? { ...d.pose, rotationZ: wrapDeg(d.pose.rotationZ + dx * SENSITIVITY) }
+      : {
+          rotationX: wrapDeg(d.pose.rotationX - dy * SENSITIVITY),
+          rotationY: wrapDeg(d.pose.rotationY + dx * SENSITIVITY),
+          rotationZ: d.pose.rotationZ,
+        };
+    setDraft(next);
+    onPoseDraft?.(next);
+  };
+
+  const onPointerUp = () => {
+    if (!dragRef.current) return;
+    dragRef.current = null;
+    if (draft) onPoseCommit(draft);
+    setDraft(null);
+  };
+
+  return (
+    <div className="relative overflow-hidden rounded-lg border border-neutral-800 bg-gradient-to-b from-neutral-900 to-neutral-950">
+      <svg
+        viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
+        className="block w-full cursor-grab touch-none select-none active:cursor-grabbing"
+        style={{ aspectRatio: `${VIEW_W} / ${VIEW_H}` }}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerUp}
+        role="slider"
+        aria-label="Drag to rotate in 3D; hold Shift to roll"
+        aria-valuetext={`X ${Math.round(shown.rotationX)}°, Y ${Math.round(
+          shown.rotationY,
+        )}°, Z ${Math.round(shown.rotationZ)}°`}
+      >
+        <defs>
+          <radialGradient id="cube3d-bg" cx="50%" cy="40%" r="65%">
+            <stop offset="0%" stopColor="#172220" />
+            <stop offset="100%" stopColor="#070a09" />
+          </radialGradient>
+          {/* Soft halo so the cube floats; SourceGraphic stays crisp on top. */}
+          <filter id="cube3d-glow" x="-40%" y="-40%" width="180%" height="180%">
+            <feGaussianBlur stdDeviation="1.4" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        <rect x="0" y="0" width={VIEW_W} height={VIEW_H} fill="url(#cube3d-bg)" />
+        {/* Grounding shadow under the cube. */}
+        <ellipse
+          cx={CX}
+          cy={CY + RADIUS + 22}
+          rx={RADIUS * 1.2}
+          ry={6.5}
+          fill="#000"
+          opacity={0.4}
+        />
+        {/* Away-facing axes are drawn behind the cube, dimmed. */}
+        {axes
+          .filter((a) => !a.front)
+          .map((a) => (
+            <line
+              key={a.id}
+              x1={CX}
+              y1={CY}
+              x2={a.x2}
+              y2={a.y2}
+              stroke={a.color}
+              strokeWidth={1.4}
+              strokeLinecap="round"
+              opacity={0.3}
+            />
+          ))}
+        <g filter="url(#cube3d-glow)">
+          {faces.map((f) => (
+            <polygon
+              key={f.id}
+              points={f.points}
+              // Muted teal face, lit by direction; edges are a soft mint that
+              // brightens with how front-facing the face is, so corners read as
+              // crisp bevels instead of flat neon outlines.
+              fill={`hsl(166 44% ${Math.round(17 + f.shade * 37)}%)`}
+              stroke={`hsl(164 72% ${Math.round(56 + f.shade * 22)}%)`}
+              strokeWidth={1.1}
+              strokeOpacity={0.82}
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              paintOrder="stroke"
+            />
+          ))}
+        </g>
+        {/* Toward-facing axes on top, with a tip dot + X/Y/Z label. */}
+        {axes
+          .filter((a) => a.front)
+          .map((a) => (
+            <g key={a.id}>
+              <line
+                x1={CX}
+                y1={CY}
+                x2={a.x2}
+                y2={a.y2}
+                stroke={a.color}
+                strokeWidth={1.6}
+                strokeLinecap="round"
+                opacity={0.95}
+              />
+              <circle cx={a.x2} cy={a.y2} r={2.4} fill={a.color} />
+              <text
+                x={a.x2 + (a.x2 - CX) * 0.12}
+                y={a.y2 + (a.y2 - CY) * 0.12 + 2}
+                fill={a.color}
+                fontSize={7}
+                fontWeight={700}
+                textAnchor="middle"
+              >
+                {a.id.toUpperCase()}
+              </text>
+            </g>
+          ))}
+      </svg>
+      {onRecenter && (
+        <button
+          type="button"
+          onClick={onRecenter}
+          title="Reset 3D orientation"
+          aria-label="Reset 3D orientation"
+          className="absolute right-1.5 top-1.5 rounded p-0.5 text-neutral-500 hover:bg-neutral-800 hover:text-neutral-200"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="12" cy="12" r="9" strokeWidth="2" />
+            <path d="M12 3v18M3 12h18" strokeWidth="1.5" />
+          </svg>
+        </button>
+      )}
+      {onKeyframe && (
+        <button
+          type="button"
+          onClick={onKeyframe}
+          title={
+            keyframed
+              ? "3D transform is keyframed — click a field diamond to add keyframes"
+              : "Keyframe the 3D transform (animate it over time)"
+          }
+          aria-label="Keyframe 3D transform"
+          aria-pressed={keyframed}
+          className={`absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${
+            keyframed ? "text-[#5ff0bf]" : "text-neutral-500 hover:text-neutral-200"
+          }`}
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill={keyframed ? "currentColor" : "none"}
+            stroke="currentColor"
+          >
+            <path d="M6 1.5L10.5 6 6 10.5 1.5 6z" strokeWidth="1.4" strokeLinejoin="round" />
+          </svg>
+        </button>
+      )}
+      {onPerspectiveCommit && (
+        <PerspectiveSlider
+          value={perspective}
+          onDraft={onPerspectiveDraft}
+          onCommit={onPerspectiveCommit}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/editor/gsapAnimationConstants.ts

@@ -25,6 +25,7 @@ export const PROP_LABELS: Record<string, string> = {
   rotationY: "Rotate Y",
   rotationZ: "Rotate Z",
   perspective: "Perspective",
+  transformPerspective: "Perspective",
   transformOrigin: "Transform Origin",
   opacity: "Opacity",
   scale: "Scale",
@@ -57,6 +58,7 @@ export const PROP_UNITS: Record<string, string> = {
   rotationY: "°",
   rotationZ: "°",
   perspective: "px",
+  transformPerspective: "px",
   transformOrigin: "",
   opacity: "%",
   scale: "×",
@@ -80,6 +82,8 @@ export const PROP_TOOLTIPS: Record<string, string> = {
   rotationZ: "Rotate around the screen-facing Z axis",
   perspective:
     "3D depth context for child elements; set it on a parent when rotating children in 3D",
+  transformPerspective:
+    "3D depth for THIS element's own X/Y rotation — lower = stronger perspective (try 600–1000)",
   transformOrigin: "Pivot point for transforms, for example center center or 50% 50%",
   width: "Element width",
   height: "Element height",
@@ -150,6 +154,7 @@ export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step
   rotationY: { step: 1 },
   rotationZ: { step: 1 },
   perspective: { min: 0, step: 1 },
+  transformPerspective: { min: 0, step: 1 },
   skewX: { min: -90, max: 90, step: 1 },
   skewY: { min: -90, max: 90, step: 1 },
   width: { min: 0, step: 1 },

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

@@ -2,6 +2,7 @@ import { Window } from "happy-dom";
 import { describe, expect, it } from "vitest";
 import {
   applyManualOffsetDragCommit,
+  applyManualOffsetDragDraft,
   applyManualOffsetDragMatrix,
   createManualOffsetDragMember,
   endManualOffsetDragMembers,
@@ -261,3 +262,101 @@ describe("createManualOffsetDragMember uses raw CSS var offset", () => {
     }
   });
 });
+
+// ── GSAP-element drag: the dot-a "flies" regressions ────────────────────────
+// A static element positioned via the legacy `--hf-studio-offset` CSS var, dragged
+// in a GSAP composition. Three independent failure modes, each fixed:
+//   1. live drag integrated off-screen (base read from the live transform)
+//   2. commit re-added the delta (stamped base wiped by a mid-drag re-render)
+//   3. drop left the element offset (stale --hf-studio-offset var composing with
+//      the committed GSAP transform until a full reload)
+function makeGsapDot(offsetX = 94, offsetY = 2) {
+  const window = new Window();
+  const element = window.document.createElement("div");
+  element.id = "dot-a";
+  element.setAttribute("data-hf-studio-path-offset", "true");
+  element.style.setProperty(STUDIO_OFFSET_X_PROP, `${offsetX}px`);
+  element.style.setProperty(STUDIO_OFFSET_Y_PROP, `${offsetY}px`);
+  element.style.translate = `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)`;
+  window.document.body.append(element);
+  // Constant rect → the screen-to-offset probe can't measure movement → member
+  // uses the deterministic preview-scale fallback matrix. Both branches set baseGsap.
+  element.getBoundingClientRect = () => new window.DOMRect(10, 20, 100, 50);
+  const sets: Array<Record<string, unknown>> = [];
+  const win = element.ownerDocument.defaultView as unknown as {
+    gsap?: unknown;
+    __timelines?: unknown;
+  };
+  win.gsap = {
+    set: (el: HTMLElement, vars: Record<string, unknown>) => {
+      sets.push({ ...vars });
+      if (typeof vars.x === "number") {
+        el.style.setProperty("transform", `translate(${vars.x}px, ${(vars.y as number) ?? 0}px)`);
+      }
+    },
+    // getProperty reads the LIVE transform — the exact value the old code fed back
+    // into `base + delta`, integrating the element off-screen.
+    getProperty: (el: HTMLElement, prop: string) => {
+      const m = /translate\(([-\d.]+)px,\s*([-\d.]+)px\)/.exec(
+        el.style.getPropertyValue("transform") || "",
+      );
+      if (!m) return 0;
+      return prop === "x" ? Number.parseFloat(m[1]!) : Number.parseFloat(m[2]!);
+    },
+  };
+  const member = () => {
+    const result = createManualOffsetDragMember({
+      key: "dot",
+      selection: { element } as never,
+      element,
+      rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
+    });
+    if (!result.ok) throw new Error("member not created");
+    return result.member;
+  };
+  return { element, sets, member };
+}
+
+describe("GSAP-element drag — dot-a flies regressions", () => {
+  it("live draft uses the stable gesture-start base, so repeated moves don't integrate", () => {
+    const { element, member } = makeGsapDot();
+    const m = member();
+    // Simulate a mid-drag re-render wiping the stamped base attr → the draft must
+    // fall back to the in-memory member.baseGsap, NOT the live (mutating) transform.
+    element.removeAttribute("data-hf-drag-gsap-base-x");
+    element.removeAttribute("data-hf-drag-gsap-base-y");
+    applyManualOffsetDragDraft(m, -50, 0);
+    const first = element.style.getPropertyValue("transform");
+    applyManualOffsetDragDraft(m, -50, 0);
+    const second = element.style.getPropertyValue("transform");
+    // Same pointer delta → same committed transform. The old bug integrated (the
+    // second frame added the delta on top of the first frame's result).
+    expect(second).toBe(first);
+  });
+
+  it("commit re-stamps the stable base/initial attrs even after they're wiped", () => {
+    const { element, member } = makeGsapDot();
+    const m = member();
+    element.removeAttribute("data-hf-drag-gsap-base-x");
+    element.removeAttribute("data-hf-drag-initial-offset-x");
+    applyManualOffsetDragCommit(m, -50, 0);
+    expect(element.getAttribute("data-hf-drag-gsap-base-x")).toBe(String(m.baseGsap.x));
+    expect(element.getAttribute("data-hf-drag-initial-offset-x")).toBe(String(m.initialOffset.x));
+  });
+
+  it("a GSAP-committed drag migrates the element off --hf-studio-offset", () => {
+    const { element, member } = makeGsapDot();
+    expect(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)).toBe("94px");
+    const m = member();
+    applyManualOffsetDragCommit(m, -160, 0);
+    endManualOffsetDragMembers([m]);
+    // The legacy CSS-offset channel is fully cleared (single-sourced in GSAP): the
+    // var is removed, so any lingering `translate: var(--hf-studio-offset-x, 0px)`
+    // resolves to its 0px fallback and can no longer compose with the GSAP transform.
+    expect(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)).toBe("");
+    expect(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)).toBe("");
+    expect(element.hasAttribute("data-hf-studio-path-offset")).toBe(false);
+    // ...and the position survives in the GSAP transform (no stale var to compose).
+    expect(element.style.getPropertyValue("transform")).toMatch(/translate\(/);
+  });
+});