@hyperframes/studio 0.6.100 → 0.6.101

package/dist/assets/{index-CKWBqyRd.js → index-DvttAtOD.js}

@@ -1 +1 @@
-import{g as P}from"./index-BkT9VKwz.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
+import{g as P}from"./index-CTiqZ7XQ.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-BkT9VKwz.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B62bDCQv.css">
+    <script type="module" crossorigin src="/assets/index-CTiqZ7XQ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BITwbxi-.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.100",
+  "version": "0.6.101",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,9 +33,9 @@
     "@phosphor-icons/react": "^2.1.10",
     "bpm-detective": "^2.0.5",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.6.100",
-    "@hyperframes/sdk": "0.6.100",
-    "@hyperframes/player": "0.6.100"
+    "@hyperframes/core": "0.6.101",
+    "@hyperframes/player": "0.6.101",
+    "@hyperframes/sdk": "0.6.101"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -49,7 +49,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.100"
+    "@hyperframes/producer": "0.6.101"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -175,6 +175,7 @@ export function StudioApp() {
     reloadPreview: () => setRefreshKey((k) => k + 1),
     pendingTimelineEditPathRef,
   });
+  const sdkSession = useSdkSession(projectId, activeCompPath);
   const timelineEditing = useTimelineEditing({
     projectId,
     activeCompPath,
@@ -188,6 +189,7 @@ export function StudioApp() {
     pendingTimelineEditPathRef,
     uploadProjectFiles: fileManager.uploadProjectFiles,
     isRecordingRef: isGestureRecordingRef,
+    sdkSession,
   });
   const {
     activeBlockParams,
@@ -267,7 +269,6 @@ export function StudioApp() {
     () => leftSidebarRef.current?.getTab() ?? "compositions",
     [],
   );
-  const sdkSession = useSdkSession(projectId, activeCompPath);
   const domEditSession = useDomEditSession({
     projectId,
     activeCompPath,

package/src/components/editor/PropertyPanel.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Eye, Layers, Move, X } from "../../icons/SystemIcons";
 import { useStudioShellContext } from "../../contexts/StudioContext";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
@@ -111,6 +111,29 @@ export const PropertyPanel = memo(function PropertyPanel({
   const cacheElementKey = element?.id ?? element?.selector ?? "";
   const cacheEntry = usePlayerStore((s) => s.keyframeCache.get(cacheElementKey));
 
+  const iframeRef = previewIframeRef ?? { current: null };
+  const gsapAnimIdForMemo = element
+    ? (gsapAnimations?.find((a: { keyframes?: unknown }) => a.keyframes)?.id ??
+      gsapAnimations?.[0]?.id ??
+      null)
+    : null;
+  const gsapRuntimeValues = useMemo(
+    () =>
+      element
+        ? readGsapRuntimeValuesForPanel(gsapAnimIdForMemo, gsapAnimations, element, iframeRef)
+        : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- iframeRef is stable; currentTime drives re-reads during playback
+    [gsapAnimIdForMemo, gsapAnimations, element, currentTime],
+  );
+  const gsapBorderRadius = useMemo(
+    () =>
+      element
+        ? readGsapBorderRadiusForPanel(gsapRuntimeValues, gsapAnimations, element, iframeRef)
+        : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [gsapRuntimeValues, gsapAnimations, element, currentTime],
+  );
+
   if (!element) {
     return (
       <div className="flex h-full flex-col bg-neutral-900">
@@ -194,21 +217,6 @@ export const PropertyPanel = memo(function PropertyPanel({
     return gsapAnimId ?? "";
   };
 
-  // Read ALL GSAP-interpolated values at the current seek time.
-  const gsapRuntimeValues = readGsapRuntimeValuesForPanel(
-    gsapAnimId,
-    gsapAnimations,
-    element,
-    previewIframeRef ?? { current: null },
-  );
-
-  const gsapBorderRadius = readGsapBorderRadiusForPanel(
-    gsapRuntimeValues,
-    gsapAnimations,
-    element,
-    previewIframeRef ?? { current: null },
-  );
-
   const displayX = gsapRuntimeValues?.x ?? manualOffset.x;
   const displayY = gsapRuntimeValues?.y ?? manualOffset.y;
   const displayW = gsapRuntimeValues?.width ?? resolvedWidth;

package/src/components/editor/manualEditingAvailability.ts

@@ -73,7 +73,7 @@ export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
 export const STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_RAZOR_TOOL", "VITE_STUDIO_RAZOR_TOOL_ENABLED"],
-  false,
+  true,
 );
 
 // When disabled (the default), drag/resize/rotate commits always take the CSS
@@ -90,11 +90,13 @@ export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
 
 // Stage 7 Step 3b: shadow dispatch parity mode — dispatches ops to the SDK
 // session alongside the server patch path and logs mismatches via telemetry.
-// Default false in production; enable via VITE_STUDIO_SDK_SHADOW_ENABLED=true.
+// Default on: server stays authoritative (no user-visible change), so we want
+// the sdk_shadow_dispatch parity signal from all traffic. Disable via
+// VITE_STUDIO_SDK_SHADOW_ENABLED=false.
 export const STUDIO_SDK_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_SDK_SHADOW_ENABLED"],
-  false,
+  true,
 );
 
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";

package/src/components/nle/NLELayout.tsx

@@ -10,10 +10,13 @@ import {
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useTimelinePlayer, PlayerControls, Timeline, usePlayerStore } from "../../player";
 import type { TimelineElement } from "../../player";
+import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
 import { NLEPreview } from "./NLEPreview";
 import { CompositionBreadcrumb } from "./CompositionBreadcrumb";
 import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
 import { useCompositionStack } from "./useCompositionStack";
+import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
+import { trackStudioExpandedClipEdit } from "../../telemetry/events";
 import {
   TIMELINE_TOGGLE_SHORTCUT_LABEL,
   getTimelineToggleTitle,
@@ -58,6 +61,7 @@ interface NLELayoutProps {
     blockName: string,
     position: { left: number; top: number },
   ) => Promise<void> | void;
+  onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
@@ -103,6 +107,7 @@ export const NLELayout = memo(function NLELayout({
   onAssetDrop,
   onBlockDrop,
   onPreviewBlockDrop,
+  onBlockedEditAttempt,
   onSelectTimelineElement,
   onCompIdToSrcChange,
   timelineVisible,
@@ -175,6 +180,7 @@ export const NLELayout = memo(function NLELayout({
   const handleDrillDown = useCallback(
     (element: TimelineElement) => {
       if (!element.compositionSrc) return;
+      usePlayerStore.getState().setSelectedElementId(null);
       // Check compIdToSrc map first; then scan iframe DOM; then fall through to drillDown
       const compId = element.id;
       let resolvedPath = compIdToSrc.get(compId);
@@ -202,6 +208,73 @@ export const NLELayout = memo(function NLELayout({
     [compIdToSrc, drillDown, iframeRef_],
   );
 
+  // Move/resize/split come from the timeline edit context, not props — the
+  // wrappers below intercept expanded clips and must call the *real* handlers.
+  // (Delete is a direct prop; it stays that way.)
+  const { onMoveElement, onResizeElement, onSplitElement } = useTimelineEditContext();
+
+  // An expanded sub-comp child reaches the normal edit handlers in its own
+  // local coordinates: addressed by its real DOM id, with timeline time rebased
+  // onto the sub-comp it lives in. The handlers then save + reloadPreview exactly
+  // as they do for top-level clips — no separate live-DOM path.
+  const toLocalElement = useCallback(
+    (element: TimelineElement, basis: number): TimelineElement => ({
+      ...element,
+      id: element.domId ?? element.id,
+      start: element.start - basis,
+    }),
+    [],
+  );
+
+  const handleMoveElement = useCallback(
+    (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track">) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return onMoveElement?.(element, updates);
+      trackStudioExpandedClipEdit({ action: "move" });
+      onMoveElement?.(toLocalElement(element, basis), {
+        ...updates,
+        start: Math.max(0, updates.start - basis),
+      });
+    },
+    [onMoveElement, toLocalElement],
+  );
+
+  const handleResizeElement = useCallback(
+    (
+      element: TimelineElement,
+      updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
+    ) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return onResizeElement?.(element, updates);
+      trackStudioExpandedClipEdit({ action: "resize" });
+      onResizeElement?.(toLocalElement(element, basis), {
+        ...updates,
+        start: Math.max(0, updates.start - basis),
+      });
+    },
+    [onResizeElement, toLocalElement],
+  );
+
+  const handleDeleteElement = useCallback(
+    (element: TimelineElement) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return onDeleteElement?.(element);
+      trackStudioExpandedClipEdit({ action: "delete" });
+      return onDeleteElement?.(toLocalElement(element, basis));
+    },
+    [onDeleteElement, toLocalElement],
+  );
+
+  const handleSplitElement = useCallback(
+    (element: TimelineElement, splitTime: number) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return onSplitElement?.(element, splitTime);
+      trackStudioExpandedClipEdit({ action: "split" });
+      return onSplitElement?.(toLocalElement(element, basis), Math.max(0, splitTime - basis));
+    },
+    [onSplitElement, toLocalElement],
+  );
+
   // Composition ID → file path map from raw index.html
   const compIdToSrcRef = useRef(compIdToSrc);
   compIdToSrcRef.current = compIdToSrc;
@@ -356,6 +429,17 @@ export const NLELayout = memo(function NLELayout({
         <div
           className="flex-1 min-h-0 relative"
           data-preview-pan-surface="true"
+          onPointerDown={(e) => {
+            const el = iframeRef.current?.parentElement ?? iframeRef.current;
+            if (!el) return;
+            const rect = el.getBoundingClientRect();
+            const inside =
+              e.clientX >= rect.left &&
+              e.clientX <= rect.right &&
+              e.clientY >= rect.top &&
+              e.clientY <= rect.bottom;
+            if (!inside) onSelectTimelineElement?.(null);
+          }}
           onDragOver={handlePreviewDragOver}
           onDragLeave={handlePreviewDragLeave}
           onDrop={handlePreviewDrop}
@@ -429,9 +513,13 @@ export const NLELayout = memo(function NLELayout({
                 onDrillDown={handleDrillDown}
                 renderClipContent={renderClipContent}
                 onFileDrop={onFileDrop}
-                onDeleteElement={onDeleteElement}
+                onDeleteElement={handleDeleteElement}
                 onAssetDrop={onAssetDrop}
                 onBlockDrop={onBlockDrop}
+                onMoveElement={handleMoveElement}
+                onResizeElement={handleResizeElement}
+                onBlockedEditAttempt={onBlockedEditAttempt}
+                onSplitElement={handleSplitElement}
                 onSelectElement={onSelectTimelineElement}
               />
             </div>

package/src/hooks/gsapScriptCommitHelpers.ts

@@ -37,6 +37,13 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null;
 }
 
+export function formatFieldsSuffix(rawFields: unknown): string {
+  const fields = Array.isArray(rawFields)
+    ? rawFields.filter((f): f is string => typeof f === "string")
+    : [];
+  return fields.length > 0 ? ` (${fields.join(", ")})` : "";
+}
+
 export async function readJsonResponseBody(res: Response): Promise<unknown> {
   const contentType = res.headers.get("content-type") ?? "";
   if (!contentType.includes("application/json")) {
@@ -55,14 +62,10 @@ function formatGsapMutationHttpErrorMessage(statusCode: number, body: unknown):
 export function formatGsapMutationRejectionToast(error: GsapMutationHttpError): string {
   const body = error.responseBody;
   if (isRecord(body)) {
-    const fields = Array.isArray(body.fields)
-      ? body.fields.filter((field): field is string => typeof field === "string")
-      : [];
-    const suffix = fields.length > 0 ? ` (${fields.join(", ")})` : "";
     return `Couldn't save animation: ${formatGsapMutationHttpErrorMessage(
       error.statusCode,
       body,
-    )}${suffix}`;
+    )}${formatFieldsSuffix(body.fields)}`;
   }
   return `Couldn't save animation: ${error.message}`;
 }

package/src/hooks/gsapScriptCommitTypes.ts

@@ -1,4 +1,5 @@
 import type { ParsedGsap } from "@hyperframes/core/gsap-parser";
+import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { EditHistoryKind } from "../utils/editHistory";
 
@@ -55,4 +56,6 @@ export interface GsapScriptCommitsParams {
   onCacheInvalidate: () => void;
   onFileContentChanged?: (path: string, content: string) => void;
   showToast: (message: string, tone?: "error" | "info") => void;
+  /** Stage 7 Step 3b: SDK session for shadow GSAP dispatch (server stays authoritative). */
+  sdkSession?: Composition | null;
 }

package/src/hooks/gsapTargetCache.ts

@@ -0,0 +1,65 @@
+import { STUDIO_GSAP_DRAG_INTERCEPT_ENABLED } from "../components/editor/manualEditingAvailability";
+
+type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
+
+let _gsapCachedTimelines: Record<string, TimelineLike> | undefined;
+let _gsapTargetIds: Set<string> | undefined;
+let _gsapTargetNodes: WeakSet<Element> | undefined;
+
+function addTargetsFromTimeline(tl: TimelineLike, ids: Set<string>, nodes: WeakSet<Element>): void {
+  const children = tl.getChildren?.(true);
+  if (!children) return;
+  for (const child of children) {
+    const targets = child.targets?.();
+    if (!targets) continue;
+    for (const t of targets) {
+      nodes.add(t);
+      if (t.id) ids.add(t.id);
+    }
+  }
+}
+
+function collectGsapTargets(timelines: Record<string, TimelineLike>): {
+  ids: Set<string>;
+  nodes: WeakSet<Element>;
+} {
+  const ids = new Set<string>();
+  const nodes = new WeakSet<Element>();
+  for (const tl of Object.values(timelines)) {
+    if (!tl) continue;
+    try {
+      addTargetsFromTimeline(tl, ids, nodes);
+    } catch {
+      /* teardown race */
+    }
+  }
+  return { ids, nodes };
+}
+
+function readTimelines(iframe: HTMLIFrameElement | null): Record<string, TimelineLike> | undefined {
+  if (!iframe?.contentWindow) return undefined;
+  try {
+    return (iframe.contentWindow as Window & { __timelines?: Record<string, TimelineLike> })
+      .__timelines;
+  } catch {
+    return undefined;
+  }
+}
+
+export function isElementGsapTargeted(
+  iframe: HTMLIFrameElement | null,
+  element: HTMLElement,
+): boolean {
+  if (!STUDIO_GSAP_DRAG_INTERCEPT_ENABLED) return false;
+  const timelines = readTimelines(iframe);
+  if (!timelines) return false;
+
+  if (timelines !== _gsapCachedTimelines) {
+    const cache = collectGsapTargets(timelines);
+    _gsapTargetIds = cache.ids;
+    _gsapTargetNodes = cache.nodes;
+    _gsapCachedTimelines = timelines;
+  }
+
+  return _gsapTargetNodes!.has(element) || !!(element.id && _gsapTargetIds!.has(element.id));
+}

package/src/hooks/useAppHotkeys.ts

@@ -136,6 +136,7 @@ interface HotkeyCallbacks {
   onToggleRecording?: () => void;
   leftSidebarRef: React.RefObject<LeftSidebarHandle | null>;
   domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
+  showToast: (message: string, tone?: "error" | "info") => void;
 }
 
 function dispatchModifierKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks): boolean {
@@ -205,6 +206,14 @@ function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks
         void cb.handleTimelineElementSplit(el, currentTime);
         return;
       }
+      // Expanded sub-comp children carry a qualified `sourceFile#id` selection
+      // that isn't in the raw `elements` list, so the s-key can't resolve them.
+      // Nudge toward the razor tool instead of failing silently.
+      if (!el && selectedElementId.includes("#")) {
+        event.preventDefault();
+        cb.showToast("Use the razor tool (B) to split clips inside a sub-composition", "info");
+        return;
+      }
     }
   }
 
@@ -376,6 +385,7 @@ export function useAppHotkeys({
     onToggleRecording,
     leftSidebarRef,
     domEditSelectionRef,
+    showToast,
   };
 
   // ── Keydown dispatch ──

package/src/hooks/useDomEditCommits.ts

@@ -14,6 +14,7 @@ import { useDomEditPositionPatchCommit } from "./useDomEditPositionPatchCommit";
 import { useDomEditTextCommits } from "./useDomEditTextCommits";
 import { useDomGeometryCommits } from "./useDomGeometryCommits";
 import { useElementLifecycleOps } from "./useElementLifecycleOps";
+import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
 
 // ── Helpers ──
 
@@ -31,11 +32,7 @@ async function readErrorResponseBody(
 
 function formatPatchRejectionMessage(body: { error?: string; fields?: string[] } | null): string {
   if (!body?.error) return "Couldn't save edit";
-  const fields = Array.isArray(body.fields)
-    ? body.fields.filter((field): field is string => typeof field === "string")
-    : [];
-  const suffix = fields.length > 0 ? ` (${fields.join(", ")})` : "";
-  return `Couldn't save edit: ${body.error}${suffix}`;
+  return `Couldn't save edit: ${body.error}${formatFieldsSuffix(body.fields)}`;
 }
 
 interface RecordEditInput {
@@ -73,6 +70,8 @@ export interface UseDomEditCommitsParams {
   ) => Promise<DomEditSelection | null>;
   /** Stage 7 Step 3b: called after a successful server-side element patch. */
   onDomEditPersisted?: (selection: DomEditSelection, operations: PatchOperation[]) => void;
+  /** Stage 7 Step 3b: called after a successful server-side element delete. */
+  onElementDeleted?: (selection: DomEditSelection) => void;
 }
 
 export function useDomEditCommits({
@@ -94,6 +93,7 @@ export function useDomEditCommits({
   refreshDomEditSelectionFromPreview,
   buildDomSelectionFromTarget,
   onDomEditPersisted,
+  onElementDeleted,
 }: UseDomEditCommitsParams) {
   const resolveImportedFontAsset = useCallback(
     (fontFamilyValue: string): ImportedFontAsset | null => {
@@ -290,6 +290,7 @@ export function useDomEditCommits({
     reloadPreview,
     clearDomSelection,
     commitPositionPatchToHtml,
+    onElementDeleted,
   });
 
   return {

package/src/hooks/useDomEditSession.ts

@@ -9,7 +9,7 @@ import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
 import { usePreviewInteraction } from "./usePreviewInteraction";
 import { useDomEditCommits } from "./useDomEditCommits";
-import { runShadowDispatch } from "../utils/sdkShadow";
+import { runShadowDispatch, runShadowDelete } from "../utils/sdkShadow";
 import { useGsapScriptCommits } from "./useGsapScriptCommits";
 import { useGsapCacheVersion } from "./useGsapTweenCache";
 import { useDomEditWiring } from "./useDomEditWiring";
@@ -194,6 +194,7 @@ export function useDomEditSession({
     onCacheInvalidate: bumpGsapCache,
     onFileContentChanged: updateEditingFileContent,
     showToast,
+    sdkSession,
   });
 
   // ── DOM commit handlers ──
@@ -235,6 +236,7 @@ export function useDomEditSession({
     onDomEditPersisted: sdkSession
       ? (sel, ops) => runShadowDispatch(sdkSession, sel, ops)
       : undefined,
+    onElementDeleted: sdkSession ? (sel) => runShadowDelete(sdkSession, sel.hfId) : undefined,
   });
 
   // ── Wiring: selection sync, GSAP cache, preview sync, selection handlers ──
@@ -263,6 +265,9 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
   } = useDomEditWiring({
+    // Pre-existing prop-drilling clone (same param set forwarded to
+    // useDomEditWiring); surfaced by this PR's adjacent edits, not introduced.
+    // fallow-ignore-next-line code-duplication
     projectId,
     activeCompPath,
     domEditSelection,

package/src/hooks/useDomGeometryCommits.ts

@@ -1,5 +1,4 @@
 import { useCallback } from "react";
-import { STUDIO_GSAP_DRAG_INTERCEPT_ENABLED } from "../components/editor/manualEditingAvailability";
 import { getDomEditTargetKey, type DomEditSelection } from "../components/editor/domEditing";
 import {
   applyStudioPathOffset,
@@ -19,45 +18,11 @@ import {
 } from "../components/editor/manualEditsDomPatches";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
 import type { PatchOperation } from "../utils/sourcePatcher";
+import { isElementGsapTargeted } from "./gsapTargetCache";
 
 export const GSAP_CSS_FALLBACK_BLOCKED_MESSAGE =
   "This element is GSAP-animated — dragging via CSS would corrupt keyframes";
 
-// ── Helpers ──
-
-type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
-
-// fallow-ignore-next-line complexity
-function isElementGsapTargeted(iframe: HTMLIFrameElement | null, element: HTMLElement): boolean {
-  // When the GSAP drag intercept is disabled for debugging, treat every
-  // element as un-targeted so commits take the plain CSS persist path.
-  if (!STUDIO_GSAP_DRAG_INTERCEPT_ENABLED) return false;
-  if (!iframe?.contentWindow) return false;
-  let timelines: Record<string, TimelineLike> | undefined;
-  try {
-    timelines = (iframe.contentWindow as Window & { __timelines?: Record<string, TimelineLike> })
-      .__timelines;
-  } catch {
-    return false;
-  }
-  if (!timelines) return false;
-  const id = element.id;
-  for (const tl of Object.values(timelines)) {
-    if (!tl?.getChildren) continue;
-    try {
-      for (const child of tl.getChildren(true)) {
-        if (!child.targets) continue;
-        for (const t of child.targets()) {
-          if (t === element || (id && t.id === id)) return true;
-        }
-      }
-    } catch {
-      continue;
-    }
-  }
-  return false;
-}
-
 // ── Hook ──
 
 interface UseDomGeometryCommitsParams {

package/src/hooks/useElementLifecycleOps.ts

@@ -31,6 +31,8 @@ interface UseElementLifecycleOpsParams {
     patches: PatchOperation[],
     options: { label: string; coalesceKey: string; skipRefresh?: boolean },
   ) => Promise<void>;
+  /** Stage 7 Step 3b: called after a successful server-side element delete (shadow). */
+  onElementDeleted?: (selection: DomEditSelection) => void;
 }
 
 export function useElementLifecycleOps({
@@ -43,6 +45,7 @@ export function useElementLifecycleOps({
   reloadPreview,
   clearDomSelection,
   commitPositionPatchToHtml,
+  onElementDeleted,
 }: UseElementLifecycleOpsParams) {
   // fallow-ignore-next-line complexity
   const handleDomEditElementDelete = useCallback(
@@ -103,6 +106,7 @@ export function useElementLifecycleOps({
         clearDomSelection();
         usePlayerStore.getState().setSelectedElementId(null);
         reloadPreview();
+        onElementDeleted?.(selection);
         showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete element";
@@ -114,6 +118,7 @@ export function useElementLifecycleOps({
       clearDomSelection,
       domEditSaveTimestampRef,
       editHistory.recordEdit,
+      onElementDeleted,
       projectIdRef,
       reloadPreview,
       showToast,

package/src/hooks/useGsapAnimationOps.ts

@@ -1,6 +1,8 @@
 import { useCallback } from "react";
+import type { Composition, GsapTweenSpec } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { roundTo3 } from "../utils/rounding";
+import { runShadowGsapTween } from "../utils/sdkShadow";
 import {
   assignGsapTargetAutoIdIfNeeded,
   ensureElementAddressable,
@@ -13,6 +15,8 @@ interface GsapAnimationOpsParams {
   commitMutation: CommitMutation;
   commitMutationSafely: SafeGsapCommitMutation;
   showToast: (message: string, tone?: "error" | "info") => void;
+  /** Stage 7 Step 3b: SDK session for shadow GSAP dispatch (server stays authoritative). */
+  sdkSession?: Composition | null;
 }
 
 export function useGsapAnimationOps({
@@ -21,6 +25,7 @@ export function useGsapAnimationOps({
   commitMutation,
   commitMutationSafely,
   showToast,
+  sdkSession,
 }: GsapAnimationOpsParams) {
   const updateGsapMeta = useCallback(
     (
@@ -62,7 +67,10 @@ export function useGsapAnimationOps({
     [commitMutation],
   );
 
+  // Pre-existing complexity (auto-id assignment + per-method defaults); this PR
+  // adds only a guarded shadow-op construction at the tail.
   const addGsapAnimation = useCallback(
+    // fallow-ignore-next-line complexity
     async (
       selection: DomEditSelection,
       method: "to" | "from" | "set" | "fromTo",
@@ -109,8 +117,25 @@ export function useGsapAnimationOps({
         },
         { label: `Add GSAP ${method} animation` },
       );
+
+      // Shadow: dispatch the equivalent addGsapTween to the SDK (server stays
+      // authoritative). "set" has no SDK method, so it is not shadowed.
+      // ponytail: only add is shadowed — delete/update key on the server's
+      // animationId, which doesn't resolve in the SDK's independent id-space.
+      if (sdkSession && selection.hfId && method !== "set") {
+        const tween: GsapTweenSpec = {
+          method,
+          position,
+          duration,
+          ease: "power2.out",
+          ...(method === "fromTo"
+            ? { fromProperties: { opacity: 0 }, toProperties: toDefaults[method] }
+            : { properties: toDefaults[method] ?? { opacity: 1 } }),
+        };
+        runShadowGsapTween(sdkSession, { kind: "add", target: selection.hfId, tween });
+      }
     },
-    [activeCompPath, commitMutation, projectIdRef, showToast],
+    [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession],
   );
 
   return {