feat(studio): s7.5 — make sdk cutover always-on, delete shadow scaffolding

SDK cutover is now unconditionally enabled. Removes STUDIO_SDK_SHADOW_ENABLED
and STUDIO_SDK_CUTOVER_ENABLED feature flags, deletes sdkShadow.ts and its
tests, moves patchOpsToSdkEditOps into sdkCutover.ts, and removes the
onDomEditPersisted shadow callback from useDomEditSession.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>

Author: vanceingalls

packages/studio/src/App.tsx

@@ -306,7 +306,6 @@ export function StudioApp() {
     openSourceForSelection: fileManager.openSourceForSelection,
     selectSidebarTab: selectSidebarTabStable,
     getSidebarTab: getSidebarTabStable,
-    sdkSession,
   });
   domEditSelectionBridgeRef.current = domEditSession.domEditSelection;
   clearDomSelectionRef.current = domEditSession.clearDomSelection;

packages/studio/src/components/editor/manualEditingAvailability.ts

@@ -94,22 +94,4 @@ export const STUDIO_GSAP_DRAG_INTERCEPT_ENABLED = resolveStudioBooleanEnvFlag(
 
 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.
-export const STUDIO_SDK_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_SDK_SHADOW_ENABLED"],
-  false,
-);
-
-// Stage 7 Step 3c: SDK cutover — routes inline-style ops through SDK dispatch
-// instead of the server patch-element API. Default false; enable via
-// VITE_STUDIO_SDK_CUTOVER_ENABLED=true. Requires SDK session to be open.
-export const STUDIO_SDK_CUTOVER_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_SDK_CUTOVER_ENABLED"],
-  false,
-);
-
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";

packages/studio/src/hooks/useDomEditSession.ts

@@ -1,4 +1,3 @@
-import type { Composition } from "@hyperframes/sdk";
 import type { TimelineElement } from "../player";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
@@ -9,7 +8,6 @@ import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
 import { usePreviewInteraction } from "./usePreviewInteraction";
 import { useDomEditCommits } from "./useDomEditCommits";
-import { runShadowDispatch, runShadowDelete } from "../utils/sdkShadow";
 import { useGsapScriptCommits } from "./useGsapScriptCommits";
 import { useGsapCacheVersion } from "./useGsapTweenCache";
 import { useDomEditWiring } from "./useDomEditWiring";
@@ -60,8 +58,6 @@ export interface UseDomEditSessionParams {
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
   selectSidebarTab?: (tab: SidebarTab) => void;
   getSidebarTab?: () => SidebarTab;
-  /** Stage 7 Step 3b: SDK session for shadow dispatch parity tracking. */
-  sdkSession?: Composition | null;
 }
 
 // ── Hook ──
@@ -100,7 +96,6 @@ export function useDomEditSession({
   openSourceForSelection,
   selectSidebarTab,
   getSidebarTab,
-  sdkSession,
 }: UseDomEditSessionParams) {
   void _setRefreshKey;
   void _readProjectFile;
@@ -234,10 +229,6 @@ export function useDomEditSession({
     clearDomSelection,
     refreshDomEditSelectionFromPreview,
     buildDomSelectionFromTarget,
-    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 ──

packages/studio/src/utils/sdkCutover.test.ts

@@ -3,9 +3,6 @@ import { shouldUseSdkCutover, sdkCutoverPersist } from "./sdkCutover";
 import type { PatchOperation } from "./sourcePatcher";
 import type { MutableRefObject } from "react";
 
-vi.mock("../components/editor/manualEditingAvailability", () => ({
-  STUDIO_SDK_CUTOVER_ENABLED: true,
-}));
 vi.mock("./studioTelemetry", () => ({
   trackStudioEvent: vi.fn(),
 }));
@@ -23,17 +20,13 @@ const attrOp = (property: string, value: string): PatchOperation => ({
 });
 
 describe("shouldUseSdkCutover", () => {
-  it("returns false when flag disabled", () => {
-    expect(shouldUseSdkCutover(false, true, "hf-abc", [styleOp("color", "red")])).toBe(false);
-  });
-
   it("returns false when no session", () => {
-    expect(shouldUseSdkCutover(true, false, "hf-abc", [styleOp("color", "red")])).toBe(false);
+    expect(shouldUseSdkCutover(false, "hf-abc", [styleOp("color", "red")])).toBe(false);
   });
 
   it("returns false when no hfId", () => {
-    expect(shouldUseSdkCutover(true, true, null, [styleOp("color", "red")])).toBe(false);
-    expect(shouldUseSdkCutover(true, true, undefined, [styleOp("color", "red")])).toBe(false);
+    expect(shouldUseSdkCutover(true, null, [styleOp("color", "red")])).toBe(false);
+    expect(shouldUseSdkCutover(true, undefined, [styleOp("color", "red")])).toBe(false);
   });
 
   it("returns false when ops include non-inline-style types", () => {
@@ -43,11 +36,34 @@ describe("shouldUseSdkCutover", () => {
   });
 
   it("returns false when ops empty", () => {
-    expect(shouldUseSdkCutover(true, true, "hf-abc", [])).toBe(false);
+    expect(shouldUseSdkCutover(true, "hf-abc", [])).toBe(false);
+  });
+
+  it("returns true for inline-style ops", () => {
+    expect(shouldUseSdkCutover(true, "hf-abc", [styleOp("color", "red")])).toBe(true);
+  });
+
+  it("returns true for text-content ops", () => {
+    expect(shouldUseSdkCutover(true, "hf-abc", [textOp("hello")])).toBe(true);
+  });
+
+  it("returns true for attribute ops", () => {
+    expect(shouldUseSdkCutover(true, "hf-abc", [attrOp("data-x", "10")])).toBe(true);
   });
 
-  it("returns true when all conditions met", () => {
-    expect(shouldUseSdkCutover(true, true, "hf-abc", [styleOp("color", "red")])).toBe(true);
+  it("returns true for html-attribute ops", () => {
+    expect(shouldUseSdkCutover(true, "hf-abc", [htmlAttrOp("class", "foo")])).toBe(true);
+  });
+
+  it("returns true when ops mix all supported types", () => {
+    expect(
+      shouldUseSdkCutover(true, "hf-abc", [
+        styleOp("color", "red"),
+        textOp("hello"),
+        attrOp("x", "1"),
+        htmlAttrOp("class", "foo"),
+      ]),
+    ).toBe(true);
   });
 });
 

packages/studio/src/utils/sdkCutover.ts

@@ -1,10 +1,9 @@
 import type { MutableRefObject } from "react";
 import type { Composition } from "@hyperframes/sdk";
+import type { EditOp } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { EditHistoryKind } from "./editHistory";
 import type { PatchOperation } from "./sourcePatcher";
-import { STUDIO_SDK_CUTOVER_ENABLED } from "../components/editor/manualEditingAvailability";
-import { patchOpsToSdkEditOps } from "./sdkShadow";
 import { trackStudioEvent } from "./studioTelemetry";
 
 const CUTOVER_OP_TYPES = new Set<PatchOperation["type"]>([
@@ -14,19 +13,48 @@ const CUTOVER_OP_TYPES = new Set<PatchOperation["type"]>([
   "html-attribute",
 ]);
 
+/**
+ * Map Studio PatchOperations for a given hf-id to SDK EditOps.
+ *
+ * Multiple inline-style ops are coalesced into a single setStyle (SDK batches
+ * style changes naturally). One SDK op is emitted per non-style op.
+ */
+function patchOpsToSdkEditOps(hfId: string, ops: PatchOperation[]): EditOp[] {
+  const result: EditOp[] = [];
+  const styles: Record<string, string | null> = {};
+  let hasStyles = false;
+
+  for (const op of ops) {
+    if (op.type === "inline-style") {
+      styles[op.property] = op.value;
+      hasStyles = true;
+    } else if (op.type === "text-content") {
+      result.push({ type: "setText", target: hfId, value: op.value ?? "" });
+    } else if (op.type === "attribute") {
+      result.push({
+        type: "setAttribute",
+        target: hfId,
+        name: op.property.startsWith("data-") ? op.property : `data-${op.property}`,
+        value: op.value,
+      });
+    } else if (op.type === "html-attribute") {
+      result.push({ type: "setAttribute", target: hfId, name: op.property, value: op.value });
+    }
+  }
+
+  if (hasStyles) {
+    result.unshift({ type: "setStyle", target: hfId, styles });
+  }
+
+  return result;
+}
+
 export function shouldUseSdkCutover(
-  flagEnabled: boolean,
   hasSession: boolean,
   hfId: string | null | undefined,
   ops: PatchOperation[],
 ): boolean {
-  return (
-    flagEnabled &&
-    hasSession &&
-    !!hfId &&
-    ops.length > 0 &&
-    ops.every((o) => CUTOVER_OP_TYPES.has(o.type))
-  );
+  return hasSession && !!hfId && ops.length > 0 && ops.every((o) => CUTOVER_OP_TYPES.has(o.type));
 }
 
 interface CutoverDeps {
@@ -57,8 +85,7 @@ export async function sdkCutoverPersist(
   deps: CutoverDeps,
   options?: CutoverOptions,
 ): Promise<boolean> {
-  if (!shouldUseSdkCutover(STUDIO_SDK_CUTOVER_ENABLED, !!sdkSession, selection.hfId, ops))
-    return false;
+  if (!shouldUseSdkCutover(!!sdkSession, selection.hfId, ops)) return false;
   if (!sdkSession) return false;
   const hfId = selection.hfId;
   if (!hfId) return false;