@hyperframes/studio 0.7.63 → 0.7.65

package/dist/styles/tailwind-preset.js

@@ -1,3 +1,5 @@
+import "../chunk-PZ5AY32C.js";
+
 // src/styles/tailwind-preset.shared.js
 var studioPreset = {
   theme: {

package/dist/styles/tailwind-preset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/tailwind-preset.shared.js","../../src/styles/tailwind-preset.ts"],"sourcesContent":["const studioPreset = {\n  theme: {\n    extend: {\n      colors: {\n        studio: {\n          bg: \"#0a0a0a\",\n          surface: \"#141414\",\n          border: \"#262626\",\n          text: \"#e5e5e5\",\n          muted: \"#737373\",\n          accent: \"#3CE6AC\",\n        },\n        panel: {\n          bg: \"#0C0C0E\",\n          // Open inspector-section body — slightly lighter than headers (bg)\n          // so the recessed scrollable region reads distinct.\n          \"bg-inset\": \"#121214\",\n          input: \"#161618\",\n          surface: \"#18181B\",\n          hover: \"#27272A\",\n          border: \"#1E1E1E\",\n          \"border-input\": \"#27272A\",\n          hairline: \"#1A1A1C\",\n          \"text-0\": \"#FAFAFA\",\n          \"text-1\": \"#E4E4E7\",\n          \"text-2\": \"#A1A1AA\",\n          \"text-3\": \"#71717A\",\n          \"text-4\": \"#52525B\",\n          \"text-5\": \"#3F3F46\",\n          accent: \"#3CE6AC\",\n          danger: \"#EF4444\",\n          media: \"#00E3FF\",\n          container: \"#F5A623\",\n        },\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default studioPreset;\n","import studioPreset from \"./tailwind-preset.shared.js\";\n\nexport default studioPreset;\n"],"mappings":";AAAA,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,IAAI;AAAA;AAAA;AAAA,UAGJ,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AACZ;AAEA,IAAO,iCAAQ;;;ACtCf,IAAO,0BAAQ;","names":[]}
+{"version":3,"sources":["../../src/styles/tailwind-preset.shared.js","../../src/styles/tailwind-preset.ts"],"sourcesContent":["const studioPreset = {\n  theme: {\n    extend: {\n      colors: {\n        studio: {\n          bg: \"#0a0a0a\",\n          surface: \"#141414\",\n          border: \"#262626\",\n          text: \"#e5e5e5\",\n          muted: \"#737373\",\n          accent: \"#3CE6AC\",\n        },\n        panel: {\n          bg: \"#0C0C0E\",\n          // Open inspector-section body — slightly lighter than headers (bg)\n          // so the recessed scrollable region reads distinct.\n          \"bg-inset\": \"#121214\",\n          input: \"#161618\",\n          surface: \"#18181B\",\n          hover: \"#27272A\",\n          border: \"#1E1E1E\",\n          \"border-input\": \"#27272A\",\n          hairline: \"#1A1A1C\",\n          \"text-0\": \"#FAFAFA\",\n          \"text-1\": \"#E4E4E7\",\n          \"text-2\": \"#A1A1AA\",\n          \"text-3\": \"#71717A\",\n          \"text-4\": \"#52525B\",\n          \"text-5\": \"#3F3F46\",\n          accent: \"#3CE6AC\",\n          danger: \"#EF4444\",\n          media: \"#00E3FF\",\n          container: \"#F5A623\",\n        },\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default studioPreset;\n","import studioPreset from \"./tailwind-preset.shared.js\";\n\nexport default studioPreset;\n"],"mappings":";;;AAAA,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,IAAI;AAAA;AAAA;AAAA,UAGJ,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AACZ;AAEA,IAAO,iCAAQ;;;ACtCf,IAAO,0BAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.63",
+  "version": "0.7.65",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.63",
-    "@hyperframes/parsers": "0.7.63",
-    "@hyperframes/player": "0.7.63",
-    "@hyperframes/studio-server": "0.7.63",
-    "@hyperframes/sdk": "0.7.63"
+    "@hyperframes/parsers": "0.7.65",
+    "@hyperframes/player": "0.7.65",
+    "@hyperframes/core": "0.7.65",
+    "@hyperframes/studio-server": "0.7.65",
+    "@hyperframes/sdk": "0.7.65"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.63"
+    "@hyperframes/producer": "0.7.65"
   },
   "peerDependencies": {
     "react": "19",
@@ -77,6 +77,7 @@
     "build": "vite build && tsup",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "report:sdk-cutover": "bun src/utils/sdkCutoverPolicy.report.ts"
   }
 }

package/src/components/StudioRightPanel.tsx

@@ -5,7 +5,7 @@ import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPane
 import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueue } from "./renders/RenderQueue";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
-import { VariablesPanel } from "./panels/VariablesPanel";
+import { VariablesPanel, type StudioEditPersistenceProps } from "./panels/VariablesPanel";
 import { PanelTabButton } from "./PanelTabButton";
 import { usePreviewVariablesStore } from "../hooks/previewVariablesStore";
 import type { RenderJob } from "./renders/useRenderQueue";
@@ -35,7 +35,7 @@ import type { BackgroundRemovalProgress } from "./editor/propertyPanelTypes";
 import { timelineKeysForSelections, type ToggleHiddenHandler } from "../utils/studioHelpers";
 import { useInspectorSplitResize } from "../hooks/useInspectorSplitResize";
 
-export interface StudioRightPanelProps {
+export interface StudioRightPanelProps extends StudioEditPersistenceProps {
   designPanelActive: boolean;
   activeBlockParams?: {
     blockName: string;

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

@@ -9,6 +9,7 @@ const KEYFRAMES: RetimeKeyframe[] = [
   { percentage: 100, properties: { x: 100 }, ease: "power2.in" },
 ];
 const WINDOW = { tweenStart: 2, tweenDuration: 4 };
+const LEFT_BOUNDARY_DROP = { ...WINDOW, dropAbsTime: 0.5 };
 
 describe("resolveKeyframeRetime — move (within the tween window)", () => {
   it("re-keys an interior keyframe to the tween-% of the drop", () => {
@@ -32,15 +33,53 @@ describe("resolveKeyframeRetime — move (within the tween window)", () => {
     expect(r.kind).toBe("noop");
   });
 
-  it("moves a flat (keyframe-less) tween without needing the keyframes array", () => {
+  it("shortens a flat tween when its synthesized end diamond moves left", () => {
     const r = resolveKeyframeRetime({
       ...WINDOW,
       keyframes: [],
       draggedTweenPct: 100,
-      dropAbsTime: 5, // (5-2)/4 = 75%
+      dropAbsTime: 5,
     });
-    expect(r.kind).toBe("move");
-    expect(r.toTweenPct).toBeCloseTo(75, 5);
+    expect(r.kind).toBe("resize");
+    expect(r.position).toBe(2);
+    expect(r.duration).toBe(3);
+    expect(r.pctRemap).toEqual([]);
+  });
+
+  it("moves a flat tween's start while preserving its absolute end", () => {
+    const r = resolveKeyframeRetime({
+      ...WINDOW,
+      keyframes: [],
+      draggedTweenPct: 0,
+      dropAbsTime: 3,
+    });
+    expect(r.kind).toBe("resize");
+    expect(r.position).toBe(3);
+    expect(r.duration).toBe(3);
+    expect(r.pctRemap).toEqual([]);
+  });
+
+  it("no-ops an unexpected interior percentage on a flat tween", () => {
+    expect(
+      resolveKeyframeRetime({
+        ...WINDOW,
+        keyframes: [],
+        draggedTweenPct: 50,
+        dropAbsTime: 5,
+      }).kind,
+    ).toBe("noop");
+  });
+
+  it("no-ops instead of rounding a sub-10ms flat tween to zero", () => {
+    expect(
+      resolveKeyframeRetime({
+        tweenStart: 2,
+        tweenDuration: 4,
+        keyframes: [],
+        draggedTweenPct: 100,
+        dropAbsTime: 2.0004,
+      }).kind,
+    ).toBe("noop");
   });
 });
 
@@ -67,10 +106,9 @@ describe("resolveKeyframeRetime — resize (past the tween boundary)", () => {
 
   it("extends the FIRST keyframe before the start, shifting position earlier", () => {
     const r = resolveKeyframeRetime({
-      ...WINDOW,
+      ...LEFT_BOUNDARY_DROP,
       keyframes: KEYFRAMES,
       draggedTweenPct: 0,
-      dropAbsTime: 0.5, // before start (2) → move position back + grow duration
     });
     expect(r.kind).toBe("resize");
     expect(r.position).toBeCloseTo(0.5, 5);
@@ -102,10 +140,9 @@ describe("resolveKeyframeRetime — single keyframe (both first and last)", () =
 
   it("resizes left before the start", () => {
     const r = resolveKeyframeRetime({
-      ...WINDOW,
+      ...LEFT_BOUNDARY_DROP,
       keyframes: lone,
       draggedTweenPct: 100,
-      dropAbsTime: 0.5,
     });
     expect(r.kind).toBe("resize");
     expect(r.position).toBeCloseTo(0.5, 5);
@@ -127,14 +164,16 @@ describe("resolveKeyframeRetime — guards", () => {
     ).toBe("noop");
   });
 
-  it("no-ops a boundary drop on a flat tween (nothing to remap)", () => {
-    expect(
-      resolveKeyframeRetime({
-        ...WINDOW,
-        keyframes: [],
-        draggedTweenPct: 100,
-        dropAbsTime: 8,
-      }).kind,
-    ).toBe("noop");
+  it("extends a flat tween when its synthesized end diamond moves right", () => {
+    const r = resolveKeyframeRetime({
+      ...WINDOW,
+      keyframes: [],
+      draggedTweenPct: 100,
+      dropAbsTime: 8,
+    });
+    expect(r.kind).toBe("resize");
+    expect(r.position).toBe(2);
+    expect(r.duration).toBe(6);
+    expect(r.pctRemap).toEqual([]);
   });
 });

package/src/components/editor/keyframeRetime.ts

@@ -51,11 +51,40 @@ export interface KeyframeRetimeResult {
 const NOOP_EPSILON_PCT = 0.1;
 /** Slack (seconds) for the within-tween boundary test. */
 const EPSILON_TIME = 1e-4;
+/** Smallest authored tween window; avoids sub-millisecond/round-to-zero durations. */
+const MIN_TWEEN_DURATION = 0.01;
 
 const round3 = (n: number) => Math.round(n * 1000) / 1000;
 const round1 = (n: number) => Math.round(n * 10) / 10; // 0.1% precision
 const clamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, n));
 
+/** Resolve timing for a flat tween's synthesized start/end diamond. */
+function resolveFlatTweenBoundaryRetime(opts: {
+  keyframeCount: number;
+  draggedTweenPct: number;
+  tweenStart: number;
+  tweenEnd: number;
+  dropAbsTime: number;
+}): KeyframeRetimeResult | null {
+  const { keyframeCount, draggedTweenPct, tweenStart, tweenEnd, dropAbsTime } = opts;
+  if (keyframeCount > 0) return null;
+  // Flat tweens have only synthesized boundary diamonds. Never delegate an
+  // unexpected interior percentage to the authored-keyframe move path.
+  if (draggedTweenPct !== 0 && draggedTweenPct !== 100) return { kind: "noop" };
+  const draggedTime = draggedTweenPct === 0 ? tweenStart : tweenEnd;
+  if (Math.abs(dropAbsTime - draggedTime) <= EPSILON_TIME) return { kind: "noop" };
+  const newStart = draggedTweenPct === 0 ? dropAbsTime : tweenStart;
+  const newEnd = draggedTweenPct === 100 ? dropAbsTime : tweenEnd;
+  const newDuration = newEnd - newStart;
+  if (newDuration < MIN_TWEEN_DURATION) return { kind: "noop" };
+  return {
+    kind: "resize",
+    position: round3(newStart),
+    duration: round3(newDuration),
+    pctRemap: [],
+  };
+}
+
 /**
  * Decide move vs resize for a dragged keyframe and, for resize, return the new
  * tween window + remapped keyframes.
@@ -76,20 +105,35 @@ export function resolveKeyframeRetime(opts: {
   if (tweenDuration <= 0) return { kind: "noop" };
   const tweenEnd = tweenStart + tweenDuration;
 
-  // Within the tween window → plain move (re-key the tween-%). This branch never
-  // touches the keyframes array, so it still works for synthesized flat tweens.
+  // A flat tween's synthesized diamonds are its real start/end boundaries —
+  // there is no authored keyframe node to re-key. Moving either boundary must
+  // therefore resize the tween window while keeping the opposite endpoint at
+  // its absolute time. Returning `resize` with an empty remap lets the caller
+  // update the flat tween's position/duration instead of sending a keyframe
+  // mutation that would silently no-op.
+  const flatBoundary = resolveFlatTweenBoundaryRetime({
+    keyframeCount: keyframes.length,
+    draggedTweenPct,
+    tweenStart,
+    tweenEnd,
+    dropAbsTime,
+  });
+  if (flatBoundary) return flatBoundary;
+
+  // Within the tween window → plain move (re-key the tween-%).
   if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
     const toTweenPct = clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100);
     if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT) return { kind: "noop" };
     return { kind: "move", toTweenPct };
   }
 
-  // Boundary resize needs the real keyframes to remap; a flat tween has none here.
+  // Boundary resize needs the real keyframes to remap. Flat start/end boundaries
+  // were handled above.
   if (keyframes.length === 0) return { kind: "noop" };
 
   const newStart = Math.min(dropAbsTime, tweenStart);
   const newEnd = Math.max(dropAbsTime, tweenEnd);
-  const newDuration = Math.max(0.01, newEnd - newStart);
+  const newDuration = Math.max(MIN_TWEEN_DURATION, newEnd - newStart);
 
   // The dragged keyframe is the one whose tween-% is closest to draggedTweenPct.
   let draggedIdx = 0;

package/src/components/editor/manualEditingAvailability.ts

@@ -87,6 +87,12 @@ export const STUDIO_SDK_CUTOVER_ENABLED = resolveStudioBooleanEnvFlag(
   false,
 );
 
+/** Explicit per-operation-family canary selection; the master flag alone enables nothing. */
+export const STUDIO_SDK_CUTOVER_FAMILIES = resolveEnabledSdkFamilies(
+  env,
+  STUDIO_SDK_CUTOVER_ENABLED,
+);
+
 // Resolver-parity tripwire (telemetry-only, decoupled from cutover).
 // Runs the SDK resolver alongside any edit and emits sdk_resolver_shadow on
 // divergence. Default true; disable via VITE_STUDIO_SDK_RESOLVER_SHADOW_ENABLED=false.
@@ -109,3 +115,4 @@ export const STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
 );
 
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";
+import { resolveEnabledSdkFamilies } from "../../utils/sdkCutoverPolicy";

package/src/components/editor/manualEditsTypes.ts

@@ -5,7 +5,7 @@ export {
   STUDIO_WIDTH_PROP,
   STUDIO_HEIGHT_PROP,
   STUDIO_MANUAL_EDIT_GESTURE_ATTR,
-} from "@hyperframes/studio-server/draft-markers";
+} from "@hyperframes/core/editing/draft-markers";
 export const STUDIO_ROTATION_PROP = "--hf-studio-rotation";
 
 /* ── Internal DOM attribute names ─────────────────────────────────── */

package/src/components/nle/useTimelineEditCallbacks.test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { resolveTimelineKeyframeTarget } from "./useTimelineEditCallbacks";
+
+const FLAT_ANIMATION = {
+  id: "#title-fromTo-2900",
+  propertyGroup: null,
+};
+
+describe("resolveTimelineKeyframeTarget", () => {
+  it("resolves a synthesized diamond when one mixed flat tween is selected", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        8.75,
+        [{ percentage: 8.75, tweenPercentage: 100 }],
+        [FLAT_ANIMATION],
+      ),
+    ).toEqual({ animId: "#title-fromTo-2900", tweenPct: 100 });
+  });
+
+  it("keeps multiple ungrouped flat tweens unresolved instead of guessing", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        8.75,
+        [{ percentage: 8.75, tweenPercentage: 100 }],
+        [FLAT_ANIMATION, { id: "#title-to-2900", propertyGroup: null }],
+      ),
+    ).toBeNull();
+  });
+
+  it("keeps multiple flat tweens in the same property group unresolved", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        50,
+        [{ percentage: 50, tweenPercentage: 100, propertyGroup: "position" }],
+        [
+          { id: "position-a", propertyGroup: "position" },
+          { id: "position-b", propertyGroup: "position" },
+        ],
+      ),
+    ).toBeNull();
+  });
+
+  it("keeps a keyframed and flat tween in the same property group unresolved", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        50,
+        [{ percentage: 50, tweenPercentage: 25, propertyGroup: "position" }],
+        [
+          { id: "position-keyframed", propertyGroup: "position", keyframes: {} },
+          { id: "position-flat", propertyGroup: "position" },
+        ],
+      ),
+    ).toBeNull();
+  });
+
+  it("keeps multiple ungrouped keyframed tweens unresolved", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        50,
+        [{ percentage: 50, tweenPercentage: 25 }],
+        [
+          { id: "ungrouped-a", keyframes: {} },
+          { id: "ungrouped-b", keyframes: {} },
+        ],
+      ),
+    ).toBeNull();
+  });
+
+  it("does not infer an animation when the rendered diamond misses the cache", () => {
+    expect(resolveTimelineKeyframeTarget(60, [], [FLAT_ANIMATION])).toBeNull();
+  });
+
+  it("resolves the sole candidate in an explicit property group", () => {
+    expect(
+      resolveTimelineKeyframeTarget(
+        50,
+        [{ percentage: 50, tweenPercentage: 25, propertyGroup: "position" }],
+        [
+          { id: "opacity", propertyGroup: "opacity" },
+          { id: "position", propertyGroup: "position" },
+        ],
+      ),
+    ).toEqual({ animId: "position", tweenPct: 25 });
+  });
+});

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -36,6 +36,41 @@ export interface TimelineEditCallbackDeps {
   handleRazorSplitAll: (splitTime: number) => Promise<void> | void;
 }
 
+interface TimelineKeyframeTargetAnimation {
+  id: string;
+  propertyGroup?: string | null;
+  keyframes?: unknown;
+}
+
+interface TimelineCachedKeyframe {
+  percentage: number;
+  tweenPercentage?: number;
+  propertyGroup?: string;
+}
+
+/**
+ * Resolve a rendered timeline diamond back to the animation that authored it.
+ * Flat tweens use synthesized diamonds, so a mixed flat tween may have neither
+ * a property group nor real keyframes. The cache currently carries a property
+ * group, not an animation id, so resolution is safe only when that group has a
+ * single candidate. Ambiguous candidates remain unresolved rather than
+ * retiming an arbitrary tween.
+ */
+export function resolveTimelineKeyframeTarget(
+  pct: number,
+  keyframes: ReadonlyArray<TimelineCachedKeyframe>,
+  animations: ReadonlyArray<TimelineKeyframeTargetAnimation>,
+): { animId: string; tweenPct: number } | null {
+  const kf = keyframes.find((item) => Math.abs(item.percentage - pct) < 0.2);
+  if (!kf) return null;
+  const group = kf?.propertyGroup;
+  const candidates = group
+    ? animations.filter((animation) => animation.propertyGroup === group)
+    : animations.filter((animation) => !animation.propertyGroup);
+  const animation = candidates.length === 1 ? candidates[0] : undefined;
+  return animation ? { animId: animation.id, tweenPct: kf.tweenPercentage ?? pct } : null;
+}
+
 /**
  * Builds the timeline edit callback bag (move/resize/split/razor plus the
  * keyframe-diamond callbacks) provided to `<Timeline>` via TimelineEditProvider.
@@ -76,12 +111,7 @@ export function useTimelineEditCallbacks({
     // fallow-ignore-next-line complexity
     (pct: number): { animId: string; tweenPct: number } | null => {
       const cached = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
-      const kf = cached?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
-      const group = kf?.propertyGroup;
-      const anim =
-        (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : undefined) ??
-        selectedGsapAnimations.find((a) => a.keyframes);
-      return anim ? { animId: anim.id, tweenPct: kf?.tweenPercentage ?? pct } : null;
+      return resolveTimelineKeyframeTarget(pct, cached?.keyframes ?? [], selectedGsapAnimations);
     },
     [domEditSelection?.id, selectedGsapAnimations],
   );
@@ -154,12 +184,22 @@ export function useTimelineEditCallbacks({
           decision.position != null &&
           decision.duration != null
         ) {
-          handleGsapResizeKeyframedTween(
-            target.animId,
-            decision.position,
-            decision.duration,
-            decision.pctRemap,
-          );
+          if (anim.keyframes) {
+            handleGsapResizeKeyframedTween(
+              target.animId,
+              decision.position,
+              decision.duration,
+              decision.pctRemap,
+            );
+          } else {
+            // resize-keyframed-tween requires an authored `keyframes` AST node
+            // and intentionally no-ops for a flat tween. Update its real tween
+            // window through the metadata writer (and SDK cutover path) instead.
+            handleGsapUpdateMeta(target.animId, {
+              position: decision.position,
+              duration: decision.duration,
+            });
+          }
         }
       },
       onChangeKeyframeEase: (_elId: string, _pct: number, ease: string) => {

package/src/components/panels/VariablesPanel.tsx

@@ -31,7 +31,7 @@ function shellSingleQuote(value: string): string {
   return `'${value.replace(/'/g, `'\\''`)}'`;
 }
 
-interface VariablesPanelProps {
+export interface StudioEditPersistenceProps {
   sdkSession: Composition | null;
   publishSdkSession: PublishSdkSession;
   reloadPreview: () => void;
@@ -43,6 +43,8 @@ interface VariablesPanelProps {
   }) => Promise<void>;
 }
 
+type VariablesPanelProps = StudioEditPersistenceProps;
+
 function formatIssue(issue: VariableValidationIssue): string {
   switch (issue.kind) {
     case "undeclared":

package/src/contexts/FileManagerContext.tsx

@@ -17,6 +17,7 @@ export function useFileManagerContextOptional(): FileManagerValue | null {
 
 export function FileManagerProvider({
   value: {
+    // fallow-ignore-next-line code-duplication
     editingFile,
     setEditingFile,
     projectDir,

package/src/hooks/timelineEditingHelpers.test.ts

@@ -142,6 +142,32 @@ describe("applyTimelineStackingReorder", () => {
 });
 
 describe("patchIframeDomTiming", () => {
+  it("patches a top-level composition host in its parent source file", () => {
+    const iframe = makeIframeWith(`
+      <div data-composition-id="root">
+        <div
+          id="scene-host"
+          data-composition-id="scene"
+          data-composition-src="compositions/scene.html"
+          data-start="2"
+        ></div>
+      </div>
+    `);
+    const host = iframe.contentDocument?.getElementById("scene-host");
+    const target = el({
+      id: "scene-host",
+      tag: "div",
+      kind: "composition",
+      domId: "scene-host",
+      sourceFile: "index.html",
+      compositionSrc: "compositions/scene.html",
+    });
+
+    patchIframeDomTiming(iframe, target, [["data-start", "9"]], "index.html");
+
+    expect(host?.getAttribute("data-start")).toBe("9");
+  });
+
   it("resolves selectorIndex within the element's source file", () => {
     const iframe = makeIframeWith(`
       <div data-composition-id="root">

package/src/hooks/timelineEditingHelpers.ts

@@ -13,7 +13,10 @@ import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/stud
 import type { TimelineZIndexReorderCommit } from "./useTimelineEditingTypes";
 import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
 import { readFileContent } from "./timelineTimingSync";
-import { findElementForSelection } from "../components/editor/domEditingElement";
+import {
+  findElementForSelection,
+  findElementForTimelineElement,
+} from "../components/editor/domEditingElement";
 export { deleteSelectedKeyframes } from "./deleteSelectedKeyframes";
 export { readFileContent };
 function isHTMLElement(element: Element | null): element is HTMLElement {
@@ -137,6 +140,12 @@ export function findTimelineElementInIframe(
   try {
     const doc = iframe?.contentDocument;
     if (!doc) return null;
+    if (element.kind === "composition" && element.compositionSrc) {
+      return findElementForTimelineElement(doc, element, {
+        activeCompositionPath,
+        isMasterView: true,
+      });
+    }
     return findElementForSelection(
       doc,
       {

package/src/hooks/useGsapKeyframeOps.test.tsx

@@ -25,6 +25,7 @@ function renderKeyframeOps(over: {
 }) {
   const captured: { api: HookApi | null } = { api: null };
   function Probe() {
+    // fallow-ignore-next-line code-duplication
     captured.api = useGsapKeyframeOps({
       activeCompPath: "index.html",
       // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test doubles

package/src/hooks/useGsapKeyframeOps.ts

@@ -1,3 +1,5 @@
+// fallow-ignore-file code-duplication
+// Add/remove operation-family transaction shapes stay parallel until SDK graduation.
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { Composition } from "@hyperframes/sdk";

package/src/hooks/useGsapPropertyDebounce.ts

@@ -84,6 +84,7 @@ export function useGsapPropertyDebounce(
     const mutation = { type: "update-property", animationId, property, value };
     const label = `Edit GSAP ${property}`;
     try {
+      // fallow-ignore-next-line code-duplication
       const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";

package/src/hooks/useRazorSplit.ts

@@ -9,6 +9,7 @@ import type { RecordEditInput } from "./timelineEditingHelpers";
 
 interface UseRazorSplitOptions {
   projectId: string | null;
+  // fallow-ignore-next-line code-duplication
   activeCompPath: string | null;
   showToast: (message: string, tone?: "error" | "info") => void;
   writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;

package/src/hooks/useTimelineEditing.test.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 // @vitest-environment happy-dom
 
 import React, { act, useRef } from "react";

package/src/hooks/useTimelineGroupEditing.ts

@@ -1,3 +1,5 @@
+// fallow-ignore-file code-duplication
+// Move/resize operation families remain parallel until SDK graduation.
 import { useCallback, type MutableRefObject, type RefObject } from "react";
 import type { Composition } from "@hyperframes/sdk";
 import type { TimelineElement } from "../player";

package/src/player/index.ts

@@ -11,8 +11,6 @@ export { resolveIframe } from "./lib/timelineDOM";
 
 // Store
 export { usePlayerStore, liveTime } from "./store/playerStore";
-// Public library surface; external consumers are invisible to the workspace analyzer.
-// fallow-ignore-next-line unused-exports
 export type { SelectElementOptions, TimelineElement, ZoomMode } from "./store/playerStore";
 
 // Utils