diff --git a/packages/sdk-playground/README.md b/packages/sdk-playground/README.md
index eb8dd10312..98e9c91edf 100644
--- a/packages/sdk-playground/README.md
+++ b/packages/sdk-playground/README.md
@@ -10,75 +10,102 @@ bun run --cwd packages/sdk-playground dev
 
 Serves at `http://localhost:5173`. On first load it reads `packages/sdk-playground/composition.html` from disk (if present) or falls back to a built-in demo composition.
 
+## Stage coverage
+
+The playground exercises the full SDK surface end-to-end in a real browser against a
+file-backed persist adapter:
+
+| SDK stage              | What is exercised                                                                                                                                                                                                                         |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Stage 3a — Session API | `openComposition`, `dispatch`, `undo`/`redo`, `batch`, `on('patch')`, `on('selectionchange')`, `on('persist:error')`, `flush`                                                                                                             |
+| Stage 3b — GSAP engine | `addGsapTween`, `setGsapTween`, `removeGsapTween`, `addLabel`, `removeLabel`, `setClassStyle`, `setTiming` (GSAP-script sync)                                                                                                             |
+| Stage 4                | `canUndo()`/`canRedo()` (live button + Ops badge), `removeElement` GSAP cascade (logs override-set after cascade to confirm orphan cleanup), `can()` → `CanResult`, `getOverrides()`, `selection()` proxy, `find()`, `setVariableValue`   |
+| Stage 5                | `createHeadlessAdapter()` and `createMemoryAdapter()` exported from package root; `FsAdapter` — file-backed persistence with version history; `FileAdapter` — browser fetch adapter; `PlaygroundPreview` — concrete `PreviewAdapter` impl |
+| Stage 6                | Scoped ids (`hf-HOST/hf-LEAF`), `find({ composition })` filter, ops targeting sub-composition elements via `comp.setStyle("hf-card/hf-card-title", styles)`                                                                               |
+| Stage 7                | `createHttpAdapter({ projectFilesUrl })` — REST-backed persist adapter (read/write via fetch); `comp.setSelection(ids)` — programmatic selection that fires `selectionchange` without going through the preview iframe                    |
+
 ## Features
 
 ### File persistence
 
 Composition state is persisted to `packages/sdk-playground/composition.html` via a Vite dev-server plugin backed by `@hyperframes/sdk/adapters/fs`. Every save writes a timestamped snapshot to `.hf-versions/composition.html/` (capped at 20). Reload the page and your last state is restored.
 
+The Stage 7 HTTP Adapter section demos `createHttpAdapter` against the same underlying file via a matching REST endpoint the Vite plugin exposes at `/api/project/files/`.
+
 ### Preview iframe
 
 Full composition rendered in a sandboxed `<iframe>`. Supports:
 
 - **Play / Pause / Seek** via the transport bar
 - **Click-to-select** elements (highlights in the tree and properties panel)
-- **Drag-to-reposition** — drag any element to a new position; on drop the playground calls `comp.setStyle(id, { left, top })`
+- **Drag-to-reposition** — drag any element; on drop calls `comp.setStyle(id, { left, top })`
 
 ### Element tree
 
-Lists all non-root elements. Click any row to select it.
+Lists all non-root elements. Click any row to select it. Sub-composition elements show their scoped id (`hf-HOST/hf-LEAF`) in indigo alongside the bare element id.
 
 ### Properties panel
 
 Editable per-element properties for the selected element:
 
-| Section    | SDK op                                                                      |
-| ---------- | --------------------------------------------------------------------------- |
-| Content    | `comp.setText(id, value)`                                                   |
-| Typography | `comp.setStyle(id, { fontSize, fontWeight, color, fontFamily })`            |
-| Box        | `comp.setStyle(id, { top, left, width, height })`                           |
-| Attributes | `comp.element(id).setAttribute(name, value)` — shows all non-internal attrs |
-| Danger     | `comp.element(id).removeElement()`                                          |
-| Animations | `comp.setTiming(id, { start, duration })` — inline form per GSAP tween      |
+| Section    | SDK op                                                                                                                                                 |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Content    | `comp.setText(id, value)`                                                                                                                              |
+| Typography | `comp.setStyle(id, { fontSize, fontWeight, color })`                                                                                                   |
+| Box        | `comp.setStyle(id, { background, opacity, left, top })`                                                                                                |
+| Attributes | `comp.element(id).setAttribute(name, value)` — all non-internal attrs                                                                                  |
+| Danger     | `comp.element(id).removeElement()` — Stage 4: cascades to remove targeting GSAP animations; logs override-set so you can verify orphan keys are purged |
+| Animations | Lists tween IDs + inline "Add tween" form via `comp.addGsapTween(id, spec)`                                                                            |
 
 ### Timeline
 
-DAW-style per-element tween blocks. Drag handles to trim start/end; drag body to move. All edits go through `comp.setTiming(id, { start, duration })` which keeps the GSAP script and DOM attributes in sync.
+DAW-style per-element tween blocks. Drag handles to trim start/end; drag body to move. All edits go through `comp.setTiming(id, { start, duration })`, which keeps the GSAP script and `data-start`/`data-end` attributes in sync.
 
 ### Ops panel
 
 Full op surface, grouped by feature:
 
-| Section                      | SDK op                                                                            |
-| ---------------------------- | --------------------------------------------------------------------------------- |
-| PreviewAdapter.select()      | `preview.select([id])`                                                            |
-| setStyle                     | `comp.setStyle(id, styles)`                                                       |
-| setText                      | `comp.setText(id, value)`                                                         |
-| addGsapTween                 | `comp.addGsapTween(target, spec)`                                                 |
-| setTiming                    | `comp.setTiming(id, { start, duration })`                                         |
-| setGsapTween                 | `comp.setGsapTween(animId, updates)`                                              |
-| moveElement                  | `comp.moveElement(id, { parent, index })`                                         |
-| setClassStyle                | `comp.dispatch({ type: "setClassStyle", selector, styles })`                      |
-| setAttribute / removeElement | `comp.element(id).setAttribute()` / `.removeElement()`                            |
-| setVariableValue             | `comp.setVariableValue(id, value)`                                                |
-| find(query)                  | `comp.find({ tag, text, name, track })`                                           |
-| selection() proxy            | `comp.selection().setStyle()` / `.removeElement()`                                |
-| listVersions / loadFrom      | `adapter.listVersions()` / `adapter.loadFrom()`                                   |
-| History / inspect            | `comp.undo()`, `comp.redo()`, `comp.can()`, `comp.getOverrides()`, `comp.flush()` |
+| Section                        | SDK op                                                                                                                                                                                                                     |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| PreviewAdapter.select()        | `preview.select([id])`                                                                                                                                                                                                     |
+| setStyle                       | `comp.setStyle(id, styles)`                                                                                                                                                                                                |
+| setText                        | `comp.setText(id, value)`                                                                                                                                                                                                  |
+| addGsapTween                   | `comp.addGsapTween(target, spec)`                                                                                                                                                                                          |
+| setGsapTween / removeGsapTween | `comp.setGsapTween(animId, { duration })` / `comp.removeGsapTween(animId)`                                                                                                                                                 |
+| addLabel / removeLabel         | `comp.dispatch({ type: "addLabel", name, position })` / `removeLabel`                                                                                                                                                      |
+| setClassStyle                  | `comp.dispatch({ type: "setClassStyle", selector, styles })`                                                                                                                                                               |
+| setAttribute / removeElement   | `comp.element(id).setAttribute()` / `.removeElement()`                                                                                                                                                                     |
+| setVariableValue               | `comp.setVariableValue(id, value)`                                                                                                                                                                                         |
+| find(query)                    | `comp.find({ tag, text, name, track, composition })` — Stage 6: `composition` filter scopes results to a sub-composition host                                                                                              |
+| Scoped dispatch                | `comp.setStyle("hf-card/hf-card-title", styles)` — Stage 6: address elements inside inlined sub-compositions                                                                                                               |
+| selection() proxy              | `comp.selection().setStyle()` / `.removeElement()`                                                                                                                                                                         |
+| listVersions / loadFrom        | `adapter.listVersions(path)` / `adapter.loadFrom(path, key)`                                                                                                                                                               |
+| History / inspect              | `comp.canUndo()`/`comp.canRedo()` (live badges), `comp.undo()`, `comp.redo()`, `comp.can(op) → CanResult`, `comp.getOverrides()`, `comp.flush()`                                                                           |
+| Adapters                       | `createHeadlessAdapter()`, `createMemoryAdapter()` — Stage 5: exported from package root; both shown with live demo in the Adapters section                                                                                |
+| HTTP Adapter (Stage 7)         | `createHttpAdapter({ projectFilesUrl })` — reads via `GET /files/{path}?optional=1`, writes via `PUT /files/{path} {content}`; playground Vite server exposes matching routes at `/api/project` for a live end-to-end demo |
+| setSelection (Stage 7)         | `comp.setSelection(ids)` — direct programmatic selection on the session; fires `selectionchange` without going through the preview iframe (contrast with `preview.select()`)                                               |
+
+`canUndo()`/`canRedo()` drive both the header buttons (disabled when false) and live status badges in the Ops panel that update on every patch.
+
+`can(op)` returns a `CanResult`: `{ok: true}` or `{ok: false, code, message, hint?}`. The ops panel logs the full result object so you can inspect validation failures in real time.
 
 ### Editor modal
 
-Click "Open editor" to view and directly edit the raw composition HTML. Saving re-opens the composition through the SDK.
+Click "Open editor" to view and directly edit the raw composition HTML. Saving re-opens the composition through the SDK, so all patches and history are reset cleanly.
+
+### Event log
+
+Every `patch`, `undo`, `redo`, `selectionchange`, and `persist:error` event is logged with its payload. Useful for verifying RFC 6902 patch shape and override-set accumulation.
 
 ---
 
 ## Planned / not yet wired
 
+- `addGsapKeyframe` / `setGsapKeyframe` / `removeGsapKeyframe` — ops are implemented in the SDK; not yet exposed in the UI
 - `comp.setTrackVariable(trackId, variableId)` — variable binding per track
 - `comp.addElement(spec)` — create new elements from the UI
 - `comp.duplicateElement(id)` — duplicate with offset
 - Selection multi-select (current: single-select only)
 - Timeline zoom and horizontal scroll for long compositions
-- Version history browser — list/preview/restore past versions inline (API is implemented; UI shows only list + load-oldest)
-- `comp.on('change', cb)` live event log fed from SDK event stream
+- Version history browser — list/preview/restore past versions inline (listVersions/loadFrom API is implemented; UI shows raw list + load-oldest button only)
 - Render to video via `@hyperframes/producer` integration
diff --git a/packages/sdk-playground/index.html b/packages/sdk-playground/index.html
index ae8b75f6da..1373bf302e 100644
--- a/packages/sdk-playground/index.html
+++ b/packages/sdk-playground/index.html
@@ -166,6 +166,12 @@
         white-space: nowrap;
         max-width: 100px;
       }
+      .el-item .el-scoped {
+        color: #6366f1;
+        font-family: monospace;
+        font-size: 10px;
+        margin-left: 4px;
+      }
 
       /* Properties / Ops content */
       #inspector-content {
@@ -334,6 +340,11 @@
         background: #1f2937;
         color: #d1d5db;
       }
+      button:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
       input[type="text"],
       input[type="number"] {
         padding: 3px 7px;
diff --git a/packages/sdk-playground/src/main.ts b/packages/sdk-playground/src/main.ts
index 8d3ab2e2d7..6049346f1d 100644
--- a/packages/sdk-playground/src/main.ts
+++ b/packages/sdk-playground/src/main.ts
@@ -1,4 +1,5 @@
-import { openComposition } from "@hyperframes/sdk";
+import { openComposition, createHeadlessAdapter, createMemoryAdapter } from "@hyperframes/sdk";
+import { createHttpAdapter } from "@hyperframes/sdk/adapters/http";
 import { createFileAdapter } from "./fileAdapter.js";
 import type { Composition, GsapTweenSpec, PreviewAdapter, FindQuery } from "@hyperframes/sdk";
 import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
@@ -9,18 +10,26 @@ import gsapRaw from "gsap/dist/gsap.min.js?raw";
 
 const DEMO_HTML = `
 <div data-hf-id="hf-stage" data-hf-root style="width:1280px;height:720px;background:#111827;position:relative;" data-duration="6">
-  <style>.badge{background:#3b82f6;border-radius:6px;}</style>
-  <div data-hf-id="hf-headline" style="position:absolute;top:200px;left:140px;font-size:72px;font-weight:700;color:#f9fafb;font-family:system-ui,sans-serif;">SDK Playground</div>
-  <div data-hf-id="hf-sub" style="position:absolute;top:300px;left:142px;font-size:28px;color:#9ca3af;font-family:system-ui,sans-serif;">@hyperframes/sdk &middot; Phase 3b</div>
-  <div data-hf-id="hf-badge" class="badge" style="position:absolute;top:390px;left:142px;padding:10px 24px;font-size:20px;font-weight:600;color:#fff;font-family:system-ui,sans-serif;">v0.6</div>
+  <style>.badge{background:#3b82f6;border-radius:6px;} .card{background:#1f2937;border-radius:12px;}</style>
+  <div data-hf-id="hf-headline" style="position:absolute;top:160px;left:140px;font-size:72px;font-weight:700;color:#f9fafb;font-family:system-ui,sans-serif;">SDK Playground</div>
+  <div data-hf-id="hf-sub" style="position:absolute;top:260px;left:142px;font-size:28px;color:#9ca3af;font-family:system-ui,sans-serif;">@hyperframes/sdk &middot; Stages 1–7</div>
+  <div data-hf-id="hf-badge" class="badge" style="position:absolute;top:350px;left:142px;padding:10px 24px;font-size:20px;font-weight:600;color:#fff;font-family:system-ui,sans-serif;">v0.6</div>
+  <!-- Simulated inlined sub-composition — data-composition-file marks the host boundary.
+       Elements inside get scoped ids: hf-card/hf-card-title, hf-card/hf-card-body. -->
+  <div data-hf-id="hf-card" data-composition-file="card.html" class="card" style="position:absolute;top:470px;left:140px;padding:24px 32px;width:400px;">
+    <div data-hf-id="hf-card-title" style="font-size:20px;font-weight:600;color:#f9fafb;font-family:system-ui,sans-serif;">Sub-composition</div>
+    <div data-hf-id="hf-card-body" style="font-size:14px;color:#9ca3af;font-family:system-ui,sans-serif;margin-top:8px;">Target with hf-card/hf-card-title</div>
+  </div>
   <script>
 var tl = gsap.timeline({ paused: true });
 var headline = document.querySelector("[data-hf-id='hf-headline']");
 var sub = document.querySelector("[data-hf-id='hf-sub']");
 var badge = document.querySelector("[data-hf-id='hf-badge']");
+var card = document.querySelector("[data-hf-id='hf-card']");
 tl.from(headline, { y: 40, opacity: 0, duration: 0.7, ease: "power3.out" }, 0);
 tl.from(sub, { y: 20, opacity: 0, duration: 0.5, ease: "power3.out" }, 0.2);
 tl.from(badge, { scale: 0.85, opacity: 0, duration: 0.4, ease: "back.out(1.5)" }, 0.4);
+tl.from(card, { y: 20, opacity: 0, duration: 0.4, ease: "power2.out" }, 0.6);
 window.__timelines = window.__timelines || {};
 window.__timelines["demo"] = tl;
   </script>
@@ -366,14 +375,21 @@ function renderTimeline() {
 
 // ── Element list ──────────────────────────────────────────────────────────────
 
-function buildElItem(el: { id: string; tag: string; text: string | null }): HTMLDivElement {
+function buildElItem(el: {
+  id: string;
+  scopedId: string;
+  tag: string;
+  text: string | null;
+}): HTMLDivElement {
   const item = document.createElement("div");
-  item.className = "el-item" + (el.id === selectedId ? " selected" : "");
+  item.className = "el-item" + (el.scopedId === selectedId ? " selected" : "");
+  const scopeLabel = el.scopedId !== el.id ? `<span class="el-scoped">${el.scopedId}</span>` : "";
   item.innerHTML =
     `<span class="el-tag">&lt;${el.tag}&gt;</span>` +
     `<span class="el-id">${el.id}</span>` +
+    scopeLabel +
     (el.text ? `<span class="el-text">${el.text}</span>` : "");
-  item.addEventListener("click", () => setSelection(el.id));
+  item.addEventListener("click", () => setSelection(el.scopedId));
   return item;
 }
 
@@ -589,6 +605,8 @@ function removeSelected() {
   const id = selectedId;
   comp.element(id).removeElement();
   logEntry("op", { removeElement: id });
+  // Stage 4: GSAP cascade + orphan cleanup — overrides show purged keys
+  logEntry("info", { "overrides after cascade": comp.getOverrides() });
   setSelection(null);
 }
 
@@ -899,21 +917,34 @@ function buildVariableSection(): HTMLDivElement {
   return opSection("setVariableValue", opRow(id, val, set));
 }
 
+function buildFindQuery(tag: string, text: string, composition: string): FindQuery {
+  const q: FindQuery = {};
+  if (tag) q.tag = tag;
+  if (text) q.text = text;
+  if (composition) q.composition = composition;
+  return q;
+}
+
 function buildFindSection(): HTMLDivElement {
   const tag = mkInput("tag", "");
   tag.style.width = "60px";
   const text = mkInput("text", "");
   text.style.width = "80px";
+  const composition = mkInput("composition (host id)", "");
+  composition.style.width = "140px";
   const results = mkNote("");
   const find = mkBtn("Find", "primary", () => {
-    const query: FindQuery = {};
-    if (tag.value.trim()) query.tag = tag.value.trim();
-    if (text.value.trim()) query.text = text.value.trim();
+    const query = buildFindQuery(tag.value.trim(), text.value.trim(), composition.value.trim());
     const ids = comp!.find(query);
-    results.textContent = ids.length ? ids.join(", ") : "(none)";
+    results.textContent = ids.join(", ") || "(none)";
     logEntry("op", { find: { query, result: ids } });
   });
-  return opSection("find(query)", opRow(mkLabel("tag"), tag, mkLabel("text"), text, find), results);
+  return opSection(
+    "find(query)",
+    opRow(mkLabel("tag"), tag, mkLabel("text"), text),
+    opRow(mkLabel("composition"), composition, find),
+    results,
+  );
 }
 
 function buildSelectionProxySection(): HTMLDivElement {
@@ -936,40 +967,63 @@ function buildSelectionProxySection(): HTMLDivElement {
 }
 
 function buildVersionsSection(): HTMLDivElement {
-  const display = mkNote("");
-  display.style.maxHeight = "80px";
-  display.style.overflowY = "auto";
+  const display = document.createElement("div");
+  display.style.cssText = "max-height:100px;overflow-y:auto;margin-top:4px;";
   const list = mkBtn("List versions", "", () => listVersionsInto(display));
-  const loadOldest = mkBtn("Load oldest", "", () => loadOldestVersion());
-  return opSection("listVersions / loadFrom", opRow(list, loadOldest), display);
+  return opSection("listVersions / loadFrom", opRow(list), display);
 }
 
 async function listVersionsInto(display: HTMLElement) {
   const { adapter } = await createFileAdapter();
   const versions = await adapter.listVersions("composition.html");
-  display.textContent = versions.length ? versions.map(versionLabel).join("\n") : "(no versions)";
+  display.innerHTML = "";
+  if (!versions.length) {
+    display.textContent = "(no versions saved yet)";
+    return;
+  }
   logEntry("info", { versions: versions.map((v) => v.key) });
+  for (const v of versions) {
+    const row = document.createElement("div");
+    row.className = "op-note";
+    row.style.cssText += "cursor:pointer;padding:3px 4px;border-radius:3px;";
+    row.textContent = versionLabel(v);
+    row.title = `Click to restore ${v.key}`;
+    row.addEventListener("mouseenter", () => (row.style.background = "#374151"));
+    row.addEventListener("mouseleave", () => (row.style.background = ""));
+    row.addEventListener("click", () => loadVersion(adapter, v.key));
+    display.appendChild(row);
+  }
 }
 
 function versionLabel(v: { key: string; timestamp?: number }): string {
-  return `${v.key} (${new Date(v.timestamp ?? 0).toLocaleTimeString()})`;
-}
-
-async function loadOldestVersion() {
-  const { adapter } = await createFileAdapter();
-  const versions = await adapter.listVersions("composition.html");
-  const oldest = versions[versions.length - 1];
-  if (!oldest) {
-    logEntry("info", "no versions");
+  const ts = v.timestamp ?? 0;
+  const time = ts > 0 ? new Date(ts).toLocaleTimeString() : "unknown time";
+  return `${time}  (${v.key})`;
+}
+
+async function loadVersion(
+  adapter: import("@hyperframes/sdk/adapters/types").PersistAdapter,
+  key: string,
+): Promise<void> {
+  const html = await adapter.loadFrom("composition.html", key);
+  if (!html) {
+    logEntry("info", `version ${key} not found`);
     return;
   }
-  const html = await adapter.loadFrom("composition.html", oldest.key);
-  if (!html) return;
-  await openEditor(html, `v${oldest.key}`);
-  logEntry("info", `loaded version ${oldest.key}`);
+  await openEditor(html, `restored ${key.split("_")[0]}`);
+  logEntry("info", `loaded version ${key}`);
+}
+
+function stateBadge(label: string, enabled: boolean): HTMLDivElement {
+  const n = mkNote(`${label}: ${enabled}`);
+  n.style.color = enabled ? "#34d399" : "#6b7280";
+  return n;
 }
 
 function buildHistorySection(): HTMLDivElement {
+  const undoState = stateBadge("canUndo", comp?.canUndo() ?? false);
+  const redoState = stateBadge("canRedo", comp?.canRedo() ?? false);
+
   const undo = mkBtn("← Undo", "", () => {
     comp!.undo();
     logEntry("undo", "dispatched");
@@ -978,6 +1032,12 @@ function buildHistorySection(): HTMLDivElement {
     comp!.redo();
     logEntry("redo", "dispatched");
   });
+
+  const canResult = document.createElement("div");
+  canResult.className = "op-note";
+  canResult.style.cssText += "font-size:10px;padding:2px 4px;";
+  canResult.textContent = "—";
+
   const canCheck = mkBtn("can(addGsapTween)?", "", () => {
     const r = comp!.can({
       type: "addGsapTween",
@@ -985,12 +1045,128 @@ function buildHistorySection(): HTMLDivElement {
       tween: { method: "to", duration: 0.5 },
     });
     logEntry("info", { "can(addGsapTween)": r });
+    if (r.ok) {
+      canResult.textContent = "✓ ok";
+      canResult.style.color = "#34d399";
+    } else {
+      canResult.textContent = `✗ ${r.code}: ${r.message}`;
+      canResult.style.color = "#f87171";
+    }
   });
+
   const overrides = mkBtn("getOverrides()", "", () => logEntry("info", comp!.getOverrides()));
   const flush = mkBtn("flush", "", () => {
     comp!.flush().then(() => logEntry("info", "flush complete"));
   });
-  return opSection("History / inspect", opRow(undo, redo), opRow(canCheck, overrides, flush));
+  return opSection(
+    "History / inspect",
+    opRow(undoState, redoState),
+    opRow(undo, redo),
+    opRow(canCheck, canResult),
+    opRow(overrides, flush),
+  );
+}
+
+function buildScopedDispatchSection(): HTMLDivElement {
+  const idInput = mkInput("scopedId (e.g. hf-card/hf-card-title)", "hf-card/hf-card-title");
+  idInput.style.width = "240px";
+  const prop = mkInput("prop", "color");
+  prop.style.width = "80px";
+  const val = mkInput("value", "#f59e0b");
+  val.style.width = "80px";
+  const apply = mkBtn("setStyle", "primary", () => {
+    const id = idInput.value.trim();
+    if (!id) return;
+    comp!.setStyle(id, { [prop.value.trim()]: val.value.trim() || null });
+    logEntry("op", { "setStyle(scopedId)": { id, [prop.value]: val.value } });
+  });
+  const note = mkNote(
+    "Scoped ids address elements inside inlined sub-comps: hf-HOST/hf-LEAF. " +
+      "The demo composition includes hf-card (data-composition-file) with hf-card-title and hf-card-body inside.",
+  );
+  return opSection(
+    "Scoped dispatch (Stage 6 / F9)",
+    opRow(idInput),
+    opRow(mkLabel("prop"), prop, mkLabel("value"), val, apply),
+    note,
+  );
+}
+
+function buildAdaptersSection(): HTMLDivElement {
+  const headless = mkBtn("headless round-trip", "", () => {
+    const preview = createHeadlessAdapter();
+    openComposition(comp!.serialize(), { preview }).then((c) => {
+      const ids = c.getElements().map((e) => e.scopedId);
+      logEntry("info", { "headless adapter — elements": ids });
+      c.dispose();
+    });
+  });
+  const memory = mkBtn("memory adapter", "", async () => {
+    const adapter = createMemoryAdapter();
+    const html = comp!.serialize();
+    await adapter.save("demo.html", html);
+    const loaded = await adapter.load("demo.html");
+    logEntry("info", { "memory adapter": { saved: html.length + " bytes", loaded: !!loaded } });
+  });
+  const note = mkNote(
+    "createHeadlessAdapter / createMemoryAdapter / createFsAdapter — all exported from @hyperframes/sdk (Stage 5).",
+  );
+  return opSection("Adapters (Stage 5)", opRow(headless, memory), note);
+}
+
+function buildHttpAdapterSection(): HTMLDivElement {
+  const readBtn = mkBtn("read via HTTP", "", async () => {
+    const adapter = createHttpAdapter({ projectFilesUrl: "/api/project" });
+    const html = await adapter.read("composition.html");
+    logEntry("info", {
+      "HTTP adapter read": html
+        ? { bytes: html.length, preview: html.slice(0, 80) + "…" }
+        : "not found",
+    });
+  });
+  const roundTrip = mkBtn("write + read round-trip", "", async () => {
+    const adapter = createHttpAdapter({ projectFilesUrl: "/api/project" });
+    const content = comp!.serialize();
+    await adapter.write("composition.html", content);
+    const readBack = await adapter.read("composition.html");
+    logEntry("info", {
+      "HTTP adapter write+read": {
+        wrote: content.length + " bytes",
+        readBack: readBack ? readBack.length + " bytes" : "null",
+        match: readBack === content,
+      },
+    });
+  });
+  const note = mkNote(
+    "createHttpAdapter({ projectFilesUrl }) — Stage 7. Reads/writes via REST: " +
+      "GET /files/{path}?optional=1 → {content}, PUT /files/{path} {content}. " +
+      "The playground's Vite server exposes matching routes at /api/project.",
+  );
+  return opSection("HTTP Adapter (Stage 7)", opRow(readBtn, roundTrip), note);
+}
+
+function buildSetSelectionSection(): HTMLDivElement {
+  const idInput = document.createElement("input");
+  idInput.type = "text";
+  idInput.placeholder = "hf-headline";
+  idInput.value = selectedId ?? "";
+  const setBtn = mkBtn("setSelection([id])", "", () => {
+    if (!comp) return;
+    const id = idInput.value.trim();
+    comp.setSelection(id ? [id] : []);
+    logEntry("op", { setSelection: id ? [id] : [] });
+  });
+  const clearBtn = mkBtn("clear", "", () => {
+    if (!comp) return;
+    comp.setSelection([]);
+    logEntry("op", { setSelection: [] });
+  });
+  const note = mkNote(
+    "comp.setSelection(ids) — Stage 7. Direct programmatic selection on the session; " +
+      "fires 'selectionchange' without going through the PreviewAdapter. " +
+      "Distinct from preview.select() which also syncs the iframe highlight.",
+  );
+  return opSection("setSelection (Stage 7)", opRow(idInput, setBtn, clearBtn), note);
 }
 
 const OPS_SECTIONS = [
@@ -1004,9 +1180,13 @@ const OPS_SECTIONS = [
   buildAttributeSection,
   buildVariableSection,
   buildFindSection,
+  buildScopedDispatchSection,
   buildSelectionProxySection,
   buildVersionsSection,
   buildHistorySection,
+  buildAdaptersSection,
+  buildHttpAdapterSection,
+  buildSetSelectionSection,
 ];
 
 function renderOpsContent(container: HTMLElement) {
@@ -1050,6 +1230,7 @@ function wireCompositionEvents(c: Composition) {
     renderElementList();
     renderInspectorContent();
     renderTimeline();
+    updateUndoRedoState();
   });
   c.on("persist:error", (e) => logEntry("persist:error", e));
   c.on("selectionchange", onSelectionChange);
@@ -1078,6 +1259,7 @@ async function openEditor(html: string, name = "untitled") {
 
   comp = await openComposition(html, { persist, preview, coalesceMs: 150 });
   wireCompositionEvents(comp);
+  updateUndoRedoState();
 
   renderElementList();
   renderInspectorContent();
@@ -1362,13 +1544,22 @@ function wireUndoRedo() {
   document.getElementById("btn-undo")!.addEventListener("click", () => {
     comp?.undo();
     logEntry("undo", "dispatched");
+    updateUndoRedoState();
   });
   document.getElementById("btn-redo")!.addEventListener("click", () => {
     comp?.redo();
     logEntry("redo", "dispatched");
+    updateUndoRedoState();
   });
 }
 
+function updateUndoRedoState() {
+  const undoBtn = document.getElementById("btn-undo") as HTMLButtonElement;
+  const redoBtn = document.getElementById("btn-redo") as HTMLButtonElement;
+  undoBtn.disabled = !(comp?.canUndo() ?? false);
+  redoBtn.disabled = !(comp?.canRedo() ?? false);
+}
+
 function wirePlayToggle() {
   const playBtn = document.getElementById("btn-play")!;
   playBtn.addEventListener("click", () => {
diff --git a/packages/sdk-playground/vite.config.ts b/packages/sdk-playground/vite.config.ts
index 300c6fc61f..641a37efcb 100644
--- a/packages/sdk-playground/vite.config.ts
+++ b/packages/sdk-playground/vite.config.ts
@@ -58,6 +58,39 @@ function methodNotAllowed(res: ServerResponse) {
   res.end();
 }
 
+async function handleHttpFileGet(
+  adapter: PersistAdapter,
+  filePath: string,
+  optional: boolean,
+  res: ServerResponse,
+) {
+  const content = await adapter.read(filePath);
+  if (content === undefined) {
+    res.statusCode = 404;
+    res.end(optional ? "{}" : "");
+    return;
+  }
+  res.setHeader("Content-Type", "application/json");
+  res.end(JSON.stringify({ content }));
+}
+
+async function handleHttpFilePut(
+  adapter: PersistAdapter,
+  filePath: string,
+  req: Connect.IncomingMessage,
+  res: ServerResponse,
+) {
+  const body = JSON.parse(await readBody(req)) as { content?: string };
+  if (typeof body.content !== "string") {
+    res.statusCode = 400;
+    res.end();
+    return;
+  }
+  await adapter.write(filePath, body.content);
+  res.statusCode = 200;
+  res.end();
+}
+
 function compositionPlugin(): Plugin {
   const adapter = createFsAdapter({ root: COMP_ROOT });
 
@@ -76,6 +109,26 @@ function compositionPlugin(): Plugin {
         if (req.method === "PUT") return handleCompositionPut(adapter, req, res);
         methodNotAllowed(res);
       });
+
+      // Stage 7: HTTP adapter-compatible REST routes.
+      // createHttpAdapter expects GET /files/{path}?optional=1 → { content } and
+      // PUT /files/{path} body { content } → 200.
+      // fallow-ignore-next-line complexity
+      server.middlewares.use("/api/project/files/", async (req, res) => {
+        const url = new URL(req.url ?? "/", "http://localhost");
+        const filePath = decodeURIComponent(url.pathname.replace(/^\/api\/project\/files\//, ""));
+        if (!filePath) return methodNotAllowed(res);
+        if (req.method === "GET") {
+          return handleHttpFileGet(
+            adapter,
+            filePath,
+            url.searchParams.get("optional") === "1",
+            res,
+          );
+        }
+        if (req.method === "PUT") return handleHttpFilePut(adapter, filePath, req, res);
+        methodNotAllowed(res);
+      });
     },
   };
 }
diff --git a/packages/sdk/examples/headless-agent.ts b/packages/sdk/examples/headless-agent.ts
index 95f450c6a2..6308ca86ad 100644
--- a/packages/sdk/examples/headless-agent.ts
+++ b/packages/sdk/examples/headless-agent.ts
@@ -121,10 +121,7 @@ export async function addStaggeredEntrance(html: string, staggerDelay = 0.15): P
     fromProperties: { opacity: 0, y: 30 },
   } as const;
   const first = textEls[0];
-  if (
-    !first ||
-    !comp.can({ type: "addGsapTween", target: first, id: "preflight", tween: probeTween })
-  ) {
+  if (!first || !comp.can({ type: "addGsapTween", target: first, tween: probeTween }).ok) {
     return comp.serialize();
   }
 
diff --git a/packages/sdk/examples/react-embed.ts b/packages/sdk/examples/react-embed.ts
index 69798276bc..34db25ef3d 100644
--- a/packages/sdk/examples/react-embed.ts
+++ b/packages/sdk/examples/react-embed.ts
@@ -98,12 +98,12 @@ export function addBounceIn(comp: Composition, targetId: string): string | null
     ease: "bounce.out",
     fromProperties: { y: 40, opacity: 0 },
   } as const;
-  if (!comp.can({ type: "addGsapTween", target: targetId, id: "preflight", tween })) return null;
+  if (!comp.can({ type: "addGsapTween", target: targetId, tween }).ok) return null;
   return comp.addGsapTween(targetId, tween);
 }
 
 export function updateEase(comp: Composition, animationId: string, ease: string): void {
-  if (!comp.can({ type: "setGsapTween", animationId, properties: { ease } })) return;
+  if (!comp.can({ type: "setGsapTween", animationId, properties: { ease } }).ok) return;
   comp.setGsapTween(animationId, { ease });
 }
 
diff --git a/packages/sdk/examples/vanilla-editor.ts b/packages/sdk/examples/vanilla-editor.ts
index bcd5f472b9..a2a1aa07a5 100644
--- a/packages/sdk/examples/vanilla-editor.ts
+++ b/packages/sdk/examples/vanilla-editor.ts
@@ -113,7 +113,7 @@ export function addFadeIn(comp: Composition, targetId: string, delay = 0): strin
     ease: "power2.out",
     fromProperties: { opacity: 0 },
   };
-  if (!comp.can({ type: "addGsapTween", target: targetId, id: "preflight", tween })) return null;
+  if (!comp.can({ type: "addGsapTween", target: targetId, tween }).ok) return null;
   return comp.addGsapTween(targetId, tween);
 }
 
@@ -130,7 +130,7 @@ export function addBounce(
     fromProperties: { y: 60, opacity: 0 },
     ...overrides,
   };
-  if (!comp.can({ type: "addGsapTween", target: targetId, id: "preflight", tween })) return null;
+  if (!comp.can({ type: "addGsapTween", target: targetId, tween }).ok) return null;
   return comp.addGsapTween(targetId, tween);
 }
 
diff --git a/packages/sdk/src/adapters/fs.ts b/packages/sdk/src/adapters/fs.ts
index 76d09edbed..b6a6cdd832 100644
--- a/packages/sdk/src/adapters/fs.ts
+++ b/packages/sdk/src/adapters/fs.ts
@@ -18,6 +18,7 @@ class FsAdapter implements PersistAdapter {
   private errorHandlers: Array<(e: PersistErrorEvent) => void> = [];
   private readonly inflightWrites = new Set<Promise<void>>();
   private versionCounter = 0;
+  private appendVersionQueue = Promise.resolve();
 
   constructor(opts: FsAdapterOptions) {
     this.root = opts.root;
@@ -61,7 +62,7 @@ class FsAdapter implements PersistAdapter {
   }
 
   async flush(): Promise<void> {
-    await Promise.all([...this.inflightWrites]);
+    await Promise.all([...this.inflightWrites, this.appendVersionQueue]);
   }
 
   async listVersions(path: string): Promise<PersistVersionEntry[]> {
@@ -109,7 +110,14 @@ class FsAdapter implements PersistAdapter {
     return join(this.root, ".hf-versions", path);
   }
 
-  private async appendVersion(path: string, content: string): Promise<void> {
+  private appendVersion(path: string, content: string): Promise<void> {
+    this.appendVersionQueue = this.appendVersionQueue
+      .then(() => this.doAppendVersion(path, content))
+      .catch(() => {});
+    return this.appendVersionQueue;
+  }
+
+  private async doAppendVersion(path: string, content: string): Promise<void> {
     const dir = this.versionsDir(path);
     await mkdir(dir, { recursive: true });
     // Pad counter to 6 digits so lexicographic sort = insertion order within same ms.
diff --git a/packages/sdk/src/adapters/http.test.ts b/packages/sdk/src/adapters/http.test.ts
index 19c39bb989..fbe52685c4 100644
--- a/packages/sdk/src/adapters/http.test.ts
+++ b/packages/sdk/src/adapters/http.test.ts
@@ -59,11 +59,32 @@ describe("read()", () => {
     expect(await adapter.read("missing.html")).toBeUndefined();
   });
 
-  it("returns undefined on non-ok response", async () => {
+  it("returns undefined on 404 response", async () => {
     stubFetch(() => ({ ok: false, status: 404 }));
     const adapter = createHttpAdapter({ projectFilesUrl: BASE });
     expect(await adapter.read("gone.html")).toBeUndefined();
   });
+
+  it("throws on 5xx server error", async () => {
+    stubFetch(() => ({ ok: false, status: 503 }));
+    const adapter = createHttpAdapter({ projectFilesUrl: BASE });
+    await expect(adapter.read("comp.html")).rejects.toThrow("HTTP 503");
+  });
+
+  it("returns undefined when 200 response body is not valid JSON", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue({
+        ok: true,
+        status: 200,
+        json: async () => {
+          throw new SyntaxError("Unexpected token");
+        },
+      }),
+    );
+    const adapter = createHttpAdapter({ projectFilesUrl: BASE });
+    await expect(adapter.read("comp.html")).resolves.toBeUndefined();
+  });
 });
 
 // ── write() ───────────────────────────────────────────────────────────────────
diff --git a/packages/sdk/src/adapters/http.ts b/packages/sdk/src/adapters/http.ts
index ed50a17fe1..fe57e00238 100644
--- a/packages/sdk/src/adapters/http.ts
+++ b/packages/sdk/src/adapters/http.ts
@@ -30,8 +30,14 @@ class HttpAdapter implements PersistAdapter {
   async read(path: string): Promise<string | undefined> {
     const url = `${this.baseUrl}/files/${encodeURIComponent(path)}?optional=1`;
     const res = await fetch(url);
-    if (!res.ok) return undefined;
-    const data = (await res.json()) as { content?: string };
+    if (res.status === 404) return undefined;
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    let data: { content?: string };
+    try {
+      data = (await res.json()) as { content?: string };
+    } catch {
+      return undefined;
+    }
     return typeof data.content === "string" ? data.content : undefined;
   }
 
diff --git a/packages/sdk/src/engine/apply-patches.ts b/packages/sdk/src/engine/apply-patches.ts
index 9bff69e78f..24fdd90167 100644
--- a/packages/sdk/src/engine/apply-patches.ts
+++ b/packages/sdk/src/engine/apply-patches.ts
@@ -18,7 +18,7 @@ import {
   setGsapScript,
   setStyleSheet,
 } from "./model.js";
-import { keyToPath } from "./patches.js";
+import { keyToPath, gsapScriptPath, styleSheetPath } from "./patches.js";
 
 // ─── Path parser ────────────────────────────────────────────────────────────
 
@@ -70,8 +70,8 @@ function parsePath(path: string): ParsedPath | null {
   const metaM = /^\/metadata\/(.+)$/.exec(path);
   if (metaM) return { type: "metadata", field: metaM[1] };
 
-  if (path === "/script/gsap") return { type: "script" };
-  if (path === "/style/css") return { type: "stylesheet" };
+  if (path === gsapScriptPath()) return { type: "script" };
+  if (path === styleSheetPath()) return { type: "stylesheet" };
 
   return null;
 }
diff --git a/packages/sdk/src/engine/mutate.gsap.test.ts b/packages/sdk/src/engine/mutate.gsap.test.ts
index 4e2596714a..88ff253c11 100644
--- a/packages/sdk/src/engine/mutate.gsap.test.ts
+++ b/packages/sdk/src/engine/mutate.gsap.test.ts
@@ -177,16 +177,34 @@ describe("addGsapTween", () => {
     expect(newScript).toContain("opacity: 1");
   });
 
-  it("returns EMPTY when no GSAP script", () => {
+  it("throws when no GSAP script block exists in composition", () => {
     const noScript = parseMutable(
       `<div data-hf-id="hf-stage" data-hf-root><div data-hf-id="hf-box"></div></div>`,
     );
-    const result = applyOp(noScript, {
+    expect(() =>
+      applyOp(noScript, {
+        type: "addGsapTween",
+        target: "hf-box",
+        tween: { method: "to", properties: { x: 1 } },
+      }),
+    ).toThrow("No GSAP script block found");
+  });
+
+  it("uses bare leaf id in selector when target is a scoped id", () => {
+    const html = `<div data-hf-id="hf-stage" data-hf-root>
+    <div data-hf-id="hf-box"></div>
+    <script>${GSAP_SCRIPT}</script>
+  </div>`.trim();
+    const parsed = parseMutable(html);
+    const result = applyOp(parsed, {
       type: "addGsapTween",
-      target: "hf-box",
-      tween: { method: "to", properties: { x: 1 } },
+      target: "hf-stage/hf-box",
+      tween: { method: "to", properties: { x: 100 } },
     });
-    expect(result.forward).toHaveLength(0);
+    expect(result.forward.length).toBeGreaterThan(0);
+    const newScript = String(result.forward[0]?.value ?? "");
+    expect(newScript).toContain("hf-box");
+    expect(newScript).not.toContain("hf-stage/hf-box");
   });
 });
 
@@ -477,3 +495,52 @@ window.__timelines["t"] = tl;`;
     expect(newScript).toContain("hf-stage");
   });
 });
+
+// ─── GSAP ops on composition with no script block ────────────────────────────
+
+const NO_SCRIPT_HTML = `<div data-hf-id="hf-stage" data-hf-root style="width:1280px;height:720px">
+  <div data-hf-id="hf-box" style="opacity:0"></div>
+</div>`.trim();
+
+describe("GSAP ops on composition with no GSAP script block", () => {
+  function freshNoScript() {
+    return parseMutable(NO_SCRIPT_HTML);
+  }
+
+  it("addGsapTween throws instead of silent no-op", () => {
+    expect(() =>
+      applyOp(freshNoScript(), {
+        type: "addGsapTween",
+        target: "hf-box",
+        tween: { method: "to", properties: { x: 100 } },
+      }),
+    ).toThrow();
+  });
+
+  it("setGsapTween throws instead of silent no-op", () => {
+    expect(() =>
+      applyOp(freshNoScript(), {
+        type: "setGsapTween",
+        animationId: "anim-1",
+        properties: { ease: "power2.out" },
+      }),
+    ).toThrow();
+  });
+
+  it("removeGsapTween throws instead of silent no-op", () => {
+    expect(() =>
+      applyOp(freshNoScript(), { type: "removeGsapTween", animationId: "anim-1" }),
+    ).toThrow();
+  });
+
+  it("addGsapKeyframe throws when script element is null", () => {
+    expect(() =>
+      applyOp(freshNoScript(), {
+        type: "addGsapKeyframe",
+        animationId: "a1",
+        percentage: 0,
+        value: { opacity: 0 },
+      }),
+    ).toThrow("No GSAP script block found");
+  });
+});
diff --git a/packages/sdk/src/engine/mutate.test.ts b/packages/sdk/src/engine/mutate.test.ts
index 89be75d2a0..5323cdd501 100644
--- a/packages/sdk/src/engine/mutate.test.ts
+++ b/packages/sdk/src/engine/mutate.test.ts
@@ -389,14 +389,14 @@ describe("validateOp", () => {
 // ─── Phase 3b ops — graceful when no GSAP script, feature-detectable ────────
 
 describe("Phase 3b ops", () => {
-  it("applyOp returns EMPTY when no GSAP script is present", () => {
-    const result = applyOp(fresh(), {
-      type: "addGsapTween",
-      target: "hf-title",
-      tween: { method: "from", properties: { opacity: 0 } },
-    });
-    expect(result.forward).toHaveLength(0);
-    expect(result.inverse).toHaveLength(0);
+  it("applyOp throws when no GSAP script block is present", () => {
+    expect(() =>
+      applyOp(fresh(), {
+        type: "addGsapTween",
+        target: "hf-title",
+        tween: { method: "from", properties: { opacity: 0 } },
+      }),
+    ).toThrow("No GSAP script block found");
   });
 
   it("validateOp returns ok:false / E_NO_GSAP_SCRIPT when no GSAP script present", () => {
diff --git a/packages/sdk/src/engine/mutate.ts b/packages/sdk/src/engine/mutate.ts
index d6015ce160..011b950001 100644
--- a/packages/sdk/src/engine/mutate.ts
+++ b/packages/sdk/src/engine/mutate.ts
@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 /**
  * Op handlers for Phase 3a (non-parser ops).
  *
@@ -509,10 +510,15 @@ function handleSetVariableValue(
 // ─── GSAP selector helpers ───────────────────────────────────────────────────
 
 function selectorMatchesId(selector: string, id: HfId): boolean {
+  const bareId = id.includes("/") ? id.split("/").pop()! : id;
   return (
     selector === `[data-hf-id="${id}"]` ||
     selector === `[data-hf-id='${id}']` ||
-    selector === `#${id}`
+    selector === `#${id}` ||
+    (bareId !== id &&
+      (selector === `[data-hf-id="${bareId}"]` ||
+        selector === `[data-hf-id='${bareId}']` ||
+        selector === `#${bareId}`))
   );
 }
 
@@ -585,6 +591,8 @@ function handleAddGsapTween(
   tween: GsapTweenSpec,
 ): MutationResult {
   const script = getGsapScript(parsed.document);
+  if (script === null)
+    throw new Error("No GSAP script block found. Use comp.can(op) to check first.");
   if (!script) return EMPTY;
 
   const extras: Record<string, unknown> = {};
@@ -597,8 +605,9 @@ function handleAddGsapTween(
       ? ((tween.toProperties ?? {}) as Record<string, number | string>)
       : ((tween.toProperties ?? tween.properties ?? {}) as Record<string, number | string>);
 
+  const selectorId = target.includes("/") ? target.split("/").pop()! : target;
   const animation: Omit<GsapAnimation, "id"> = {
-    targetSelector: `[data-hf-id="${target}"]`,
+    targetSelector: `[data-hf-id="${selectorId}"]`,
     method: tween.method,
     position: tween.position ?? 0,
     ...(tween.duration !== undefined ? { duration: tween.duration } : {}),
@@ -623,6 +632,8 @@ function handleSetGsapTween(
   properties: Partial<GsapTweenSpec>,
 ): MutationResult {
   const script = getGsapScript(parsed.document);
+  if (script === null)
+    throw new Error("No GSAP script block found. Use comp.can(op) to check first.");
   if (!script) return EMPTY;
 
   const updates: Partial<GsapAnimation> = {};
@@ -649,6 +660,8 @@ function handleSetGsapTween(
 
 function handleRemoveGsapTween(parsed: ParsedDocument, animationId: string): MutationResult {
   const script = getGsapScript(parsed.document);
+  if (script === null)
+    throw new Error("No GSAP script block found. Use comp.can(op) to check first.");
   if (!script) return EMPTY;
   const newScript = removeAnimationFromScript(script, animationId);
   if (newScript === script) return EMPTY;
@@ -705,6 +718,8 @@ function handleAddGsapKeyframe(
   value: Record<string, unknown>,
 ): MutationResult {
   const script = getGsapScript(parsed.document);
+  if (script === null)
+    throw new Error("No GSAP script block found. Use comp.can(op) to check first.");
   if (!script) return EMPTY;
   const newScript = addKeyframeToScript(
     script,
diff --git a/packages/sdk/src/session.subcomp.test.ts b/packages/sdk/src/session.subcomp.test.ts
index 91a99e0dd2..1c3ce9ef5b 100644
--- a/packages/sdk/src/session.subcomp.test.ts
+++ b/packages/sdk/src/session.subcomp.test.ts
@@ -31,6 +31,12 @@ function makeDoc(html: string) {
   return document;
 }
 
+/** Parse inlined HTML and return the scopedId of the element with the given hf-id. */
+function scopedIdOf(inner: string, id: string): string | undefined {
+  const parsed = parseMutable(inlinedHtml(inner));
+  return flatElements(buildRoots(parsed.document)).find((e) => e.id === id)?.scopedId;
+}
+
 // ─── 1. resolveScoped ─────────────────────────────────────────────────────────
 
 describe("resolveScoped — flat id", () => {
@@ -128,50 +134,44 @@ describe("ElementSnapshot.scopedId", () => {
   });
 
   it("element inside sub-comp gets hf-HOST/hf-LEAF scopedId", () => {
-    const parsed = parseMutable(
-      inlinedHtml(`
-      <div data-hf-id="hf-root" data-hf-root>
-        <div data-hf-id="hf-host" data-composition-file="sub.html">
-          <p data-hf-id="hf-leaf">text</p>
-        </div>
-      </div>
-    `),
-    );
-    const elements = flatElements(buildRoots(parsed.document));
-    const leaf = elements.find((e) => e.id === "hf-leaf");
-    expect(leaf?.scopedId).toBe("hf-host/hf-leaf");
+    expect(
+      scopedIdOf(
+        `<div data-hf-id="hf-root" data-hf-root>
+          <div data-hf-id="hf-host" data-composition-file="sub.html">
+            <p data-hf-id="hf-leaf">text</p>
+          </div>
+        </div>`,
+        "hf-leaf",
+      ),
+    ).toBe("hf-host/hf-leaf");
   });
 
   it("host element itself has bare scopedId (it lives in parent scope)", () => {
-    const parsed = parseMutable(
-      inlinedHtml(`
-      <div data-hf-id="hf-root" data-hf-root>
-        <div data-hf-id="hf-host" data-composition-file="sub.html">
-          <p data-hf-id="hf-leaf">text</p>
-        </div>
-      </div>
-    `),
-    );
-    const elements = flatElements(buildRoots(parsed.document));
-    const host = elements.find((e) => e.id === "hf-host");
-    expect(host?.scopedId).toBe("hf-host");
+    expect(
+      scopedIdOf(
+        `<div data-hf-id="hf-root" data-hf-root>
+          <div data-hf-id="hf-host" data-composition-file="sub.html">
+            <p data-hf-id="hf-leaf">text</p>
+          </div>
+        </div>`,
+        "hf-host",
+      ),
+    ).toBe("hf-host");
   });
 
   it("3-level nesting produces hf-H1/hf-H2/hf-LEAF", () => {
-    const parsed = parseMutable(
-      inlinedHtml(`
-      <div data-hf-id="hf-root" data-hf-root>
-        <div data-hf-id="hf-h1" data-composition-file="sub1.html">
-          <div data-hf-id="hf-h2" data-composition-file="sub2.html">
-            <span data-hf-id="hf-leaf">deep</span>
+    expect(
+      scopedIdOf(
+        `<div data-hf-id="hf-root" data-hf-root>
+          <div data-hf-id="hf-h1" data-composition-file="sub1.html">
+            <div data-hf-id="hf-h2" data-composition-file="sub2.html">
+              <span data-hf-id="hf-leaf">deep</span>
+            </div>
           </div>
-        </div>
-      </div>
-    `),
-    );
-    const elements = flatElements(buildRoots(parsed.document));
-    const leaf = elements.find((e) => e.id === "hf-leaf");
-    expect(leaf?.scopedId).toBe("hf-h1/hf-h2/hf-leaf");
+        </div>`,
+        "hf-leaf",
+      ),
+    ).toBe("hf-h1/hf-h2/hf-leaf");
   });
 
   it("same sub-comp mounted twice gets different scopedIds", () => {
@@ -198,21 +198,19 @@ describe("ElementSnapshot.scopedId", () => {
 
   it("outerHTML innerRoot (same dcf as parent) is NOT itself a new host boundary", () => {
     // outerHTML case: host and innerRoot both get data-composition-file="sub.html"
-    const parsed = parseMutable(
-      inlinedHtml(`
-      <div data-hf-id="hf-root" data-hf-root>
-        <div data-hf-id="hf-host" data-composition-file="sub.html">
-          <div data-hf-id="hf-inner" data-composition-id="my-sub" data-composition-file="sub.html">
-            <p data-hf-id="hf-leaf">text</p>
-          </div>
-        </div>
-      </div>
-    `),
-    );
-    const elements = flatElements(buildRoots(parsed.document));
-    const leaf = elements.find((e) => e.id === "hf-leaf");
     // Leaf should be scoped under hf-host, not hf-host/hf-inner
-    expect(leaf?.scopedId).toBe("hf-host/hf-leaf");
+    expect(
+      scopedIdOf(
+        `<div data-hf-id="hf-root" data-hf-root>
+          <div data-hf-id="hf-host" data-composition-file="sub.html">
+            <div data-hf-id="hf-inner" data-composition-id="my-sub" data-composition-file="sub.html">
+              <p data-hf-id="hf-leaf">text</p>
+            </div>
+          </div>
+        </div>`,
+        "hf-leaf",
+      ),
+    ).toBe("hf-host/hf-leaf");
   });
 });
 
@@ -340,7 +338,7 @@ describe("find({ composition })", () => {
     const ids = comp.find({ composition: "hf-host" });
     expect(ids).toContain("hf-host/hf-leaf");
     expect(ids).not.toContain("hf-outer");
-    expect(ids).not.toContain("hf-host"); // host itself is in parent scope
+    expect(ids).toContain("hf-host"); // host element is included in its own composition scope
   });
 
   it("returns empty array for unknown host id", async () => {
@@ -351,6 +349,22 @@ describe("find({ composition })", () => {
     expect(comp.find({ composition: "hf-no-such" })).toEqual([]);
   });
 
+  it("find({ composition }) includes the host element itself", async () => {
+    const html = inlinedHtml(`
+      <div data-hf-id="hf-root" data-hf-root>
+        <div data-hf-id="hf-host" data-composition-file="sub.html">
+          <p data-hf-id="hf-leaf">inside</p>
+        </div>
+        <p data-hf-id="hf-outer">outside</p>
+      </div>
+    `);
+    const comp = await openComposition(html);
+    const ids = comp.find({ composition: "hf-host" });
+    expect(ids).toContain("hf-host");
+    expect(ids).toContain("hf-host/hf-leaf");
+    expect(ids).not.toContain("hf-outer");
+  });
+
   it("can combine composition filter with other query fields", async () => {
     const html = inlinedHtml(`
       <div data-hf-id="hf-root" data-hf-root>
diff --git a/packages/sdk/src/session.ts b/packages/sdk/src/session.ts
index 149b770b64..8473c60e46 100644
--- a/packages/sdk/src/session.ts
+++ b/packages/sdk/src/session.ts
@@ -188,7 +188,12 @@ class CompositionImpl implements Composition {
           if (query.text && !el.text?.includes(query.text)) return false;
           if (query.name && el.attributes["data-name"] !== query.name) return false;
           if (query.track !== undefined && el.trackIndex !== query.track) return false;
-          if (query.composition && !el.scopedId.startsWith(`${query.composition}/`)) return false;
+          if (
+            query.composition &&
+            el.scopedId !== query.composition &&
+            !el.scopedId.startsWith(`${query.composition}/`)
+          )
+            return false;
           return true;
         })
         .map((el) => el.scopedId)
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index 783d18753d..efe636e5a3 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -152,6 +152,9 @@ export function StudioApp() {
     domEditSaveTimestampRef,
     setRefreshKey,
   });
+
+  const sdkSession = useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef);
+
   useEffect(() => {
     if (activeCompPathHydrated) return;
     if (!fileManager.fileTreeLoaded) return;
@@ -266,7 +269,6 @@ export function StudioApp() {
     () => leftSidebarRef.current?.getTab() ?? "compositions",
     [],
   );
-  const sdkSession = useSdkSession(projectId, activeCompPath);
   const domEditSession = useDomEditSession({
     projectId,
     activeCompPath,
diff --git a/packages/studio/src/components/editor/manualEditingAvailability.ts b/packages/studio/src/components/editor/manualEditingAvailability.ts
index e2d74d8adb..8d8a49ba19 100644
--- a/packages/studio/src/components/editor/manualEditingAvailability.ts
+++ b/packages/studio/src/components/editor/manualEditingAvailability.ts
@@ -97,4 +97,13 @@ export const STUDIO_SDK_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
   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";
diff --git a/packages/studio/src/hooks/useDomEditCommits.ts b/packages/studio/src/hooks/useDomEditCommits.ts
index 51931b012b..20218328bd 100644
--- a/packages/studio/src/hooks/useDomEditCommits.ts
+++ b/packages/studio/src/hooks/useDomEditCommits.ts
@@ -78,6 +78,13 @@ 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 3c: called before the server-side patch path; returns true if SDK handled it. */
+  onTrySdkPersist?: (
+    selection: DomEditSelection,
+    operations: PatchOperation[],
+    originalContent: string,
+    targetPath: string,
+  ) => Promise<boolean>;
 }
 
 export function useDomEditCommits({
@@ -99,6 +106,7 @@ export function useDomEditCommits({
   refreshDomEditSelectionFromPreview,
   buildDomSelectionFromTarget,
   onDomEditPersisted,
+  onTrySdkPersist,
 }: UseDomEditCommitsParams) {
   const resolveImportedFontAsset = useCallback(
     (fontFamilyValue: string): ImportedFontAsset | null => {
@@ -134,7 +142,6 @@ export function useDomEditCommits({
       if (options?.shouldSave && !options.shouldSave()) return;
 
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
-
       const readResponse = await fetch(
         `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
       );
@@ -146,9 +153,14 @@ export function useDomEditCommits({
       if (typeof originalContent !== "string") {
         throw new Error(`Missing file contents for ${targetPath}`);
       }
-
       if (options?.shouldSave && !options.shouldSave()) return;
-
+      if (
+        onTrySdkPersist &&
+        (await onTrySdkPersist(selection, operations, originalContent, targetPath))
+      ) {
+        onDomEditPersisted?.(selection, operations);
+        return;
+      }
       const patchTarget = buildDomEditPatchTarget(selection);
       const patchBody = { target: patchTarget, operations };
       const unsafeFields = findUnsafeDomPatchValues(patchBody);
@@ -162,7 +174,6 @@ export function useDomEditCommits({
       // handler suppresses the reload even if the event arrives before the
       // response (the server writes the file and emits SSE during the fetch).
       domEditSaveTimestampRef.current = Date.now();
-
       const patchResponse = await fetch(
         `/api/projects/${pid}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
         {
@@ -235,6 +246,7 @@ export function useDomEditCommits({
       reloadPreview,
       showToast,
       onDomEditPersisted,
+      onTrySdkPersist,
     ],
   );
 
diff --git a/packages/studio/src/hooks/useDomEditSession.test.ts b/packages/studio/src/hooks/useDomEditSession.test.ts
new file mode 100644
index 0000000000..040d83b3b0
--- /dev/null
+++ b/packages/studio/src/hooks/useDomEditSession.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { shouldUseSdkCutover } from "../utils/sdkCutover";
+import type { PatchOperation } from "../utils/sourcePatcher";
+
+const styleOp = (property: string, value: string): PatchOperation => ({
+  type: "inline-style",
+  property,
+  value,
+});
+
+const attrOp = (property: string, value: string): PatchOperation => ({
+  type: "attribute",
+  property,
+  value,
+});
+
+describe("shouldUseSdkCutover", () => {
+  it("returns false when flag is disabled", () => {
+    expect(shouldUseSdkCutover(false, true, "hf-abc", [styleOp("color", "red")])).toBe(false);
+  });
+
+  it("returns false when no SDK session", () => {
+    expect(shouldUseSdkCutover(true, false, "hf-abc", [styleOp("color", "red")])).toBe(false);
+  });
+
+  it("returns false when selection has no hfId", () => {
+    expect(shouldUseSdkCutover(true, true, null, [styleOp("color", "red")])).toBe(false);
+    expect(shouldUseSdkCutover(true, true, undefined, [styleOp("color", "red")])).toBe(false);
+  });
+
+  it("returns false when ops array is empty", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [])).toBe(false);
+  });
+
+  it("returns true when all conditions met with supported op types", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [styleOp("color", "red")])).toBe(true);
+    expect(
+      shouldUseSdkCutover(true, true, "hf-abc", [styleOp("color", "red"), attrOp("data-x", "1")]),
+    ).toBe(true);
+  });
+});
diff --git a/packages/studio/src/hooks/useSdkSession.ts b/packages/studio/src/hooks/useSdkSession.ts
index 7a3fbf1ee8..c75632479d 100644
--- a/packages/studio/src/hooks/useSdkSession.ts
+++ b/packages/studio/src/hooks/useSdkSession.ts
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import type { MutableRefObject } from "react";
 import { openComposition } from "@hyperframes/sdk";
 import { createHttpAdapter } from "@hyperframes/sdk/adapters/http";
 import type { Composition } from "@hyperframes/sdk";
@@ -27,9 +28,18 @@ export function shouldReloadSdkSession(payload: unknown, activeCompPath: string
  * is therefore purely additive — no SDK self-write exists yet, so there is no
  * persist echo. Step 3c must add self-write suppression once dispatch writes.
  */
+// Time-window heuristic: suppress file-change reloads for 2 s after our own
+// SDK cutover write, to avoid an echo-reload on the write we just committed.
+// Footgun: if 2 s is too short (slow FS / network) the reload fires anyway;
+// if too long it masks a legitimate external edit. The long-term shape is a
+// sequence number or content hash threaded through the persist event so the
+// comparison is exact rather than time-based.
+const SELF_WRITE_SUPPRESS_MS = 2000;
+
 export function useSdkSession(
   projectId: string | null,
   activeCompPath: string | null,
+  domEditSaveTimestampRef?: MutableRefObject<number>,
 ): Composition | null {
   const [session, setSession] = useState<Composition | null>(null);
   const [reloadToken, setReloadToken] = useState(0);
@@ -38,9 +48,14 @@ export function useSdkSession(
   useEffect(() => {
     if (!activeCompPath) return;
     const handler = (payload?: unknown) => {
-      if (shouldReloadSdkSession(payload, activeCompPath)) {
-        setReloadToken((t) => t + 1);
-      }
+      if (!shouldReloadSdkSession(payload, activeCompPath)) return;
+      // Suppress reload triggered by our own SDK cutover write.
+      if (
+        domEditSaveTimestampRef &&
+        Date.now() - domEditSaveTimestampRef.current < SELF_WRITE_SUPPRESS_MS
+      )
+        return;
+      setReloadToken((t) => t + 1);
     };
     if (import.meta.hot) {
       import.meta.hot.on("hf:file-change", handler);
@@ -50,6 +65,7 @@ export function useSdkSession(
     const es = new EventSource("/api/events");
     es.addEventListener("file-change", handler);
     return () => es.close();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeCompPath]);
 
   // ── Open / re-open the session ──
@@ -60,7 +76,7 @@ export function useSdkSession(
     }
 
     let cancelled = false;
-    let comp: Composition | null = null;
+    const compRef = { current: null as Composition | null };
 
     const adapter = createHttpAdapter({
       projectFilesUrl: `/api/projects/${projectId}`,
@@ -69,7 +85,7 @@ export function useSdkSession(
       .read(activeCompPath)
       .then(async (content) => {
         if (cancelled || typeof content !== "string") return;
-        comp = await openComposition(content, {
+        const comp = await openComposition(content, {
           persist: adapter,
           persistPath: activeCompPath,
         });
@@ -81,6 +97,7 @@ export function useSdkSession(
           comp.dispose();
           return;
         }
+        compRef.current = comp;
         setSession(comp);
       })
       .catch(() => {
@@ -89,7 +106,7 @@ export function useSdkSession(
 
     return () => {
       cancelled = true;
-      const c = comp;
+      const c = compRef.current;
       if (c) void c.flush().finally(() => c.dispose());
     };
   }, [projectId, activeCompPath, reloadToken]);
diff --git a/packages/studio/src/utils/sdkCutover.test.ts b/packages/studio/src/utils/sdkCutover.test.ts
new file mode 100644
index 0000000000..489113cbe0
--- /dev/null
+++ b/packages/studio/src/utils/sdkCutover.test.ts
@@ -0,0 +1,335 @@
+import { describe, expect, it, vi } from "vitest";
+import { shouldUseSdkCutover, sdkCutoverPersist } from "./sdkCutover";
+import { openComposition } from "@hyperframes/sdk";
+import { createMemoryAdapter } from "@hyperframes/sdk/adapters/memory";
+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(),
+}));
+
+const styleOp = (property: string, value: string): PatchOperation => ({
+  type: "inline-style",
+  property,
+  value,
+});
+
+const textOp = (value: string): PatchOperation => ({
+  type: "text-content",
+  property: "text",
+  value,
+});
+
+const attrOp = (property: string, value: string): PatchOperation => ({
+  type: "attribute",
+  property,
+  value,
+});
+
+const htmlAttrOp = (property: string, value: string): PatchOperation => ({
+  type: "html-attribute",
+  property,
+  value,
+});
+
+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);
+  });
+
+  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);
+  });
+
+  it("returns false when ops empty", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [])).toBe(false);
+  });
+
+  it("returns true for inline-style ops", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [styleOp("color", "red")])).toBe(true);
+  });
+
+  it("returns true for text-content ops", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [textOp("hello")])).toBe(true);
+  });
+
+  it("returns true for attribute ops", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [attrOp("data-x", "10")])).toBe(true);
+  });
+
+  it("returns true for html-attribute ops", () => {
+    expect(shouldUseSdkCutover(true, true, "hf-abc", [htmlAttrOp("class", "foo")])).toBe(true);
+  });
+
+  it("returns true when ops mix all supported types", () => {
+    expect(
+      shouldUseSdkCutover(true, true, "hf-abc", [
+        styleOp("color", "red"),
+        textOp("hello"),
+        attrOp("x", "1"),
+        htmlAttrOp("class", "foo"),
+      ]),
+    ).toBe(true);
+  });
+});
+
+describe("sdkCutoverPersist", () => {
+  const makeRef = <T>(val: T): MutableRefObject<T> => ({ current: val });
+
+  const makeDeps = (overrides: Partial<Parameters<typeof sdkCutoverPersist>[5]> = {}) => ({
+    editHistory: { recordEdit: vi.fn().mockResolvedValue(undefined) },
+    writeProjectFile: vi.fn().mockResolvedValue(undefined),
+    reloadPreview: vi.fn(),
+    domEditSaveTimestampRef: makeRef(0),
+    ...overrides,
+  });
+
+  const makeSession = (hasEl = true) =>
+    ({
+      getElement: vi.fn().mockReturnValue(hasEl ? { inlineStyles: {} } : null),
+      dispatch: vi.fn(),
+      serialize: vi.fn().mockReturnValue("<html></html>"),
+      batch: vi.fn((fn: () => void) => fn()),
+    }) as unknown as Parameters<typeof sdkCutoverPersist>[4];
+
+  it("returns false when session is null", async () => {
+    const deps = makeDeps();
+    const sel = { hfId: "hf-abc" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red")],
+      "before",
+      "/path.html",
+      null,
+      deps,
+    );
+    expect(result).toBe(false);
+  });
+
+  it("returns false when element not found in session", async () => {
+    const deps = makeDeps();
+    const session = makeSession(false);
+    const sel = { hfId: "hf-abc" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red")],
+      "before",
+      "/path.html",
+      session,
+      deps,
+    );
+    expect(result).toBe(false);
+  });
+
+  it("dispatches setStyle for inline-style ops", async () => {
+    const deps = makeDeps();
+    const session = makeSession(true);
+    const sel = { hfId: "hf-abc" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red"), styleOp("opacity", "0.5")],
+      "before",
+      "/comp.html",
+      session,
+      deps,
+    );
+    expect(result).toBe(true);
+    expect(session!.dispatch).toHaveBeenCalledWith({
+      type: "setStyle",
+      target: "hf-abc",
+      styles: { color: "red", opacity: "0.5" },
+    });
+    expect(deps.writeProjectFile).toHaveBeenCalledWith("/comp.html", "<html></html>");
+    expect(deps.reloadPreview).toHaveBeenCalled();
+  });
+
+  it("dispatches setText for text-content op", async () => {
+    const deps = makeDeps();
+    const session = makeSession(true);
+    const sel = { hfId: "hf-abc" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [textOp("Hello world")],
+      "before",
+      "/comp.html",
+      session,
+      deps,
+    );
+    expect(result).toBe(true);
+    expect(session!.dispatch).toHaveBeenCalledWith({
+      type: "setText",
+      target: "hf-abc",
+      value: "Hello world",
+    });
+  });
+
+  it("dispatches setAttribute for attribute op with data- prefix", async () => {
+    const deps = makeDeps();
+    const session = makeSession(true);
+    const sel = { hfId: "hf-abc" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [attrOp("x", "42")],
+      "before",
+      "/comp.html",
+      session,
+      deps,
+    );
+    expect(result).toBe(true);
+    expect(session!.dispatch).toHaveBeenCalledWith({
+      type: "setAttribute",
+      target: "hf-abc",
+      name: "data-x",
+      value: "42",
+    });
+  });
+
+  it("dispatches setAttribute for html-attribute op", async () => {
+    const deps = makeDeps();
+    const session = makeSession(true);
+    const sel = { hfId: "hf-abc" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [htmlAttrOp("class", "foo bar")],
+      "before",
+      "/comp.html",
+      session,
+      deps,
+    );
+    expect(result).toBe(true);
+    expect(session!.dispatch).toHaveBeenCalledWith({
+      type: "setAttribute",
+      target: "hf-abc",
+      name: "class",
+      value: "foo bar",
+    });
+  });
+
+  it("passes caller label to recordEdit", async () => {
+    const deps = makeDeps();
+    const session = makeSession(true);
+    const sel = { hfId: "hf-abc" } as never;
+    await sdkCutoverPersist(sel, [styleOp("color", "red")], "before", "/comp.html", session, deps, {
+      label: "Resize layer box",
+    });
+    expect(deps.editHistory.recordEdit).toHaveBeenCalledWith(
+      expect.objectContaining({ label: "Resize layer box" }),
+    );
+  });
+
+  it("passes caller coalesceKey to recordEdit", async () => {
+    const deps = makeDeps();
+    const session = makeSession(true);
+    const sel = { hfId: "hf-abc" } as never;
+    await sdkCutoverPersist(sel, [styleOp("color", "red")], "before", "/comp.html", session, deps, {
+      coalesceKey: "my-key",
+    });
+    expect(deps.editHistory.recordEdit).toHaveBeenCalledWith(
+      expect.objectContaining({ coalesceKey: "my-key" }),
+    );
+  });
+
+  it("returns false and does not throw on dispatch error", async () => {
+    const deps = makeDeps();
+    const session = makeSession(true);
+    (session!.dispatch as ReturnType<typeof vi.fn>).mockImplementation(() => {
+      throw new Error("dispatch failed");
+    });
+    const sel = { hfId: "hf-abc" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red")],
+      "before",
+      "/comp.html",
+      session,
+      deps,
+    );
+    expect(result).toBe(false);
+    expect(deps.reloadPreview).not.toHaveBeenCalled();
+  });
+
+  it("wraps all dispatches in session.batch() for atomic rollback", async () => {
+    const deps = makeDeps();
+    const session = makeSession(true);
+    const sel = { hfId: "hf-abc" } as never;
+    await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red"), styleOp("opacity", "0.5")],
+      "before",
+      "/comp.html",
+      session,
+      deps,
+    );
+    expect(
+      (session as unknown as { batch: ReturnType<typeof vi.fn> }).batch,
+    ).toHaveBeenCalledOnce();
+  });
+
+  it("returns false when second dispatch throws (batch prevents partial mutation)", async () => {
+    // inline-style ops coalesce into one setStyle dispatch; use style+text to produce two dispatches.
+    const deps = makeDeps();
+    const session = makeSession(true);
+    let callCount = 0;
+    (session!.dispatch as ReturnType<typeof vi.fn>).mockImplementation(() => {
+      callCount++;
+      if (callCount === 2) throw new Error("2nd op failed");
+    });
+    const sel = { hfId: "hf-abc" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [styleOp("color", "red"), textOp("hello")],
+      "before",
+      "/comp.html",
+      session,
+      deps,
+    );
+    expect(result).toBe(false);
+    expect(deps.writeProjectFile).not.toHaveBeenCalled();
+    expect(deps.reloadPreview).not.toHaveBeenCalled();
+  });
+});
+
+describe("sdkCutoverPersist — GSAP script preservation (integration)", () => {
+  const makeRef = <T>(val: T): MutableRefObject<T> => ({ current: val });
+  const makeDeps = () => ({
+    editHistory: { recordEdit: vi.fn().mockResolvedValue(undefined) },
+    writeProjectFile: vi.fn().mockResolvedValue(undefined),
+    reloadPreview: vi.fn(),
+    domEditSaveTimestampRef: makeRef(0),
+  });
+
+  it("preserves GSAP <script> block and data-position-mode through setStyle dispatch", async () => {
+    const html = `<!DOCTYPE html><html><head></head><body>
+<div data-hf-id="hf-layer" style="color: blue; opacity: 1"></div>
+<script data-hf-gsap data-position-mode="relative">
+gsap.timeline().to('[data-hf-id="hf-layer"]', { duration: 1, x: 100 });
+</script>
+</body></html>`;
+    const comp = await openComposition(html, { persist: createMemoryAdapter() });
+    const deps = makeDeps();
+    const sel = { hfId: "hf-layer" } as never;
+    const result = await sdkCutoverPersist(
+      sel,
+      [{ type: "inline-style", property: "color", value: "red" }],
+      html,
+      "/comp.html",
+      comp,
+      deps,
+    );
+    expect(result).toBe(true);
+    const written = (deps.writeProjectFile as ReturnType<typeof vi.fn>).mock
+      .calls[0]?.[1] as string;
+    expect(written).toContain("data-hf-gsap");
+    expect(written).toContain('data-position-mode="relative"');
+    expect(written).toContain("gsap.timeline()");
+  });
+});
diff --git a/packages/studio/src/utils/sdkCutover.ts b/packages/studio/src/utils/sdkCutover.ts
new file mode 100644
index 0000000000..6bb3afee02
--- /dev/null
+++ b/packages/studio/src/utils/sdkCutover.ts
@@ -0,0 +1,91 @@
+import type { MutableRefObject } from "react";
+import type { Composition } 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"]>([
+  "inline-style",
+  "text-content",
+  "attribute",
+  "html-attribute",
+]);
+
+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))
+  );
+}
+
+interface CutoverDeps {
+  editHistory: {
+    recordEdit: (entry: {
+      label: string;
+      kind: EditHistoryKind;
+      coalesceKey?: string;
+      files: Record<string, { before: string; after: string }>;
+    }) => Promise<void>;
+  };
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  reloadPreview: () => void;
+  domEditSaveTimestampRef: MutableRefObject<number>;
+}
+
+interface CutoverOptions {
+  label?: string;
+  coalesceKey?: string;
+}
+
+export async function sdkCutoverPersist(
+  selection: DomEditSelection,
+  ops: PatchOperation[],
+  originalContent: string,
+  targetPath: string,
+  sdkSession: Composition | null | undefined,
+  deps: CutoverDeps,
+  options?: CutoverOptions,
+): Promise<boolean> {
+  if (!shouldUseSdkCutover(STUDIO_SDK_CUTOVER_ENABLED, !!sdkSession, selection.hfId, ops))
+    return false;
+  if (!sdkSession) return false;
+  const hfId = selection.hfId;
+  if (!hfId) return false;
+  if (!sdkSession.getElement(hfId)) return false;
+  try {
+    sdkSession.batch(() => {
+      for (const editOp of patchOpsToSdkEditOps(hfId, ops)) {
+        sdkSession.dispatch(editOp);
+      }
+    });
+    const after = sdkSession.serialize();
+    deps.domEditSaveTimestampRef.current = Date.now();
+    await deps.writeProjectFile(targetPath, after);
+    await deps.editHistory.recordEdit({
+      label: options?.label ?? "Edit layer",
+      kind: "manual",
+      ...(options?.coalesceKey ? { coalesceKey: options.coalesceKey } : {}),
+      files: { [targetPath]: { before: originalContent, after } },
+    });
+    deps.reloadPreview();
+    trackStudioEvent("sdk_cutover_success", { hfId, opCount: ops.length });
+    return true;
+  } catch (err) {
+    trackStudioEvent("sdk_cutover_fallback", {
+      hfId: selection.hfId ?? null,
+      error: String(err),
+    });
+    return false;
+  }
+}
diff --git a/packages/studio/src/utils/sdkShadow.test.ts b/packages/studio/src/utils/sdkShadow.test.ts
index 637ab9ba53..7f367e62a3 100644
--- a/packages/studio/src/utils/sdkShadow.test.ts
+++ b/packages/studio/src/utils/sdkShadow.test.ts
@@ -42,6 +42,20 @@ describe("patchOpsToSdkEditOps", () => {
     });
   });
 
+  it("does not double-prefix attribute op whose property already starts with data-", () => {
+    const ops: PatchOperation[] = [
+      { type: "attribute", property: "data-hf-studio-path-offset", value: "true" },
+    ];
+    const result = patchOpsToSdkEditOps("hf-box", ops);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual({
+      type: "setAttribute",
+      target: "hf-box",
+      name: "data-hf-studio-path-offset",
+      value: "true",
+    });
+  });
+
   it("maps html-attribute op to setAttribute without prefix", () => {
     const ops: PatchOperation[] = [
       { type: "html-attribute", property: "contenteditable", value: "true" },
diff --git a/packages/studio/src/utils/sdkShadow.ts b/packages/studio/src/utils/sdkShadow.ts
index 6167039ad1..d9c62c2405 100644
--- a/packages/studio/src/utils/sdkShadow.ts
+++ b/packages/studio/src/utils/sdkShadow.ts
@@ -38,7 +38,7 @@ export function patchOpsToSdkEditOps(hfId: string, ops: PatchOperation[]): EditO
       result.push({
         type: "setAttribute",
         target: hfId,
-        name: `data-${op.property}`,
+        name: op.property.startsWith("data-") ? op.property : `data-${op.property}`,
         value: op.value,
       });
     } else if (op.type === "html-attribute") {
@@ -98,18 +98,21 @@ function flattenSnapshot(snap: ElementSnapshot): FlatSnapshot {
 
 type OpFieldResolver = (op: PatchOperation, flat: FlatSnapshot) => OpFields;
 
-const OP_FIELD_RESOLVERS: Record<string, OpFieldResolver> = {
+const OP_FIELD_RESOLVERS: Record<PatchOperation["type"], OpFieldResolver> = {
   "inline-style": (op, flat) => ({
     property: op.property,
     expected: op.value,
     actual: flat.styles[op.property] ?? null,
   }),
   "text-content": (op, flat) => ({ property: "text", expected: op.value ?? "", actual: flat.text }),
-  attribute: (op, flat) => ({
-    property: `data-${op.property}`,
-    expected: op.value ?? null,
-    actual: flat.attrs[`data-${op.property}`] ?? null,
-  }),
+  attribute: (op, flat) => {
+    const attrName = op.property.startsWith("data-") ? op.property : `data-${op.property}`;
+    return {
+      property: attrName,
+      expected: op.value ?? null,
+      actual: flat.attrs[attrName] ?? null,
+    };
+  },
   "html-attribute": (op, flat) => ({
     property: op.property,
     expected: op.value ?? null,