@hyperframes/studio 0.6.106 → 0.6.107

package/dist/assets/{index-CRCE5Dz_.js → index-P52mbTRb.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-koqvg-_0.js";/*!
+import{n as Qi}from"./index-CVHV-S-B.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/assets/{index-CBS_7p5W.js → index-zIK7PWvk.js}

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

package/dist/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-koqvg-_0.js"></script>
+    <script type="module" crossorigin src="/assets/index-CVHV-S-B.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BrhJl2JY.css">
   </head>
   <body>

package/package.json

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

package/src/hooks/gsapScriptCommitTypes.ts

@@ -3,6 +3,7 @@ import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { ShadowGsapOp } from "../utils/sdkShadow";
+import type { ShadowKeyframeOp } from "../utils/sdkShadowGsapKeyframe";
 
 export interface MutationResult {
   ok: boolean;
@@ -19,8 +20,18 @@ export interface CommitMutationOptions {
   softReload?: boolean;
   skipReload?: boolean;
   beforeReload?: () => void;
+  /**
+   * Serialize this commit against others sharing the same key. Used to chain
+   * per-animationId GSAP meta updates so overlapping read-modify-write POSTs to
+   * one file can't interleave — which would pair the shadow fidelity diff with a
+   * stale server result and report false ease mismatches. Commits without a key
+   * (and under distinct keys) run concurrently as before.
+   */
+  serializeKey?: string;
   /** Stage 7 Step 3b: typed SDK equivalent of this mutation for value-fidelity shadow. */
   shadowGsapOp?: ShadowGsapOp;
+  /** Typed SDK equivalent of a keyframe mutation for keyframe value-fidelity shadow (gsap_keyframe). */
+  shadowKeyframeOp?: ShadowKeyframeOp;
 }
 
 export type CommitMutation = (

package/src/hooks/serializeByKey.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import { createKeyedSerializer } from "./serializeByKey";
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+describe("createKeyedSerializer", () => {
+  it("runs same-key tasks strictly in order (second awaits the first)", async () => {
+    const run = createKeyedSerializer();
+    const order: string[] = [];
+    const first = deferred<void>();
+
+    const p1 = run("k", async () => {
+      order.push("1-start");
+      await first.promise;
+      order.push("1-end");
+    });
+    const p2 = run("k", async () => {
+      order.push("2-start");
+    });
+
+    // Second task must not start until the first finishes.
+    await Promise.resolve();
+    expect(order).toEqual(["1-start"]);
+
+    first.resolve();
+    await Promise.all([p1, p2]);
+    expect(order).toEqual(["1-start", "1-end", "2-start"]);
+  });
+
+  it("does not block tasks under different keys", async () => {
+    const run = createKeyedSerializer();
+    const order: string[] = [];
+    const blockA = deferred<void>();
+
+    const pa = run("a", async () => {
+      order.push("a-start");
+      await blockA.promise;
+      order.push("a-end");
+    });
+    const pb = run("b", async () => {
+      order.push("b-start");
+      order.push("b-end");
+    });
+
+    // Different key runs to completion while "a" is still blocked.
+    await pb;
+    expect(order).toEqual(["a-start", "b-start", "b-end"]);
+
+    blockA.resolve();
+    await pa;
+    expect(order).toEqual(["a-start", "b-start", "b-end", "a-end"]);
+  });
+
+  it("does not wedge a key when a prior task rejects", async () => {
+    const run = createKeyedSerializer();
+    const order: string[] = [];
+
+    const p1 = run("k", async () => {
+      order.push("1");
+      throw new Error("boom");
+    });
+    await expect(p1).rejects.toThrow("boom");
+
+    const p2 = run("k", async () => {
+      order.push("2");
+    });
+    await p2;
+    expect(order).toEqual(["1", "2"]);
+  });
+
+  it("propagates the task's resolved value to its caller", async () => {
+    const run = createKeyedSerializer();
+    await expect(run("k", async () => 42)).resolves.toBe(42);
+  });
+});

package/src/hooks/serializeByKey.ts

@@ -0,0 +1,33 @@
+/**
+ * Per-key task serializer. Tasks sharing a key run strictly in order: a new
+ * task for a key awaits the prior task for that key before starting, so their
+ * effects (e.g. overlapping read-modify-write POSTs to one file) can't
+ * interleave. Tasks under different keys are independent and never block each
+ * other.
+ *
+ * Used to serialize GSAP meta-update commits per animationId so the shadow
+ * fidelity diff always pairs an op with the server result that includes it —
+ * without globally serializing unrelated commits.
+ */
+export function createKeyedSerializer() {
+  const inFlight = new Map<string, Promise<unknown>>();
+
+  return function run<T>(key: string, task: () => Promise<T>): Promise<T> {
+    const prior = inFlight.get(key) ?? Promise.resolve();
+    // Chain onto the prior task regardless of how it settled; a rejected prior
+    // commit must not wedge the key forever.
+    const next = prior.then(task, task);
+    inFlight.set(key, next);
+    // Once this task settles, drop it from the map if nothing newer replaced it,
+    // so completed keys don't leak.
+    void next.then(
+      () => {
+        if (inFlight.get(key) === next) inFlight.delete(key);
+      },
+      () => {
+        if (inFlight.get(key) === next) inFlight.delete(key);
+      },
+    );
+    return next;
+  };
+}

package/src/hooks/useGsapAnimationOps.ts

@@ -40,10 +40,14 @@ export function useGsapAnimationOps({
         animationId,
         properties: { duration: updates.duration, ease: updates.ease, position: updates.position },
       };
+      // coalesceKey groups rapid meta edits into one history entry. Request
+      // serialization is now handled per-file at the commitMutation chokepoint
+      // (useGsapScriptCommits), so no per-op serializeKey is needed here.
+      const metaKey = `gsap:${animationId}:meta`;
       commitMutationSafely(
         selection,
         { type: "update-meta", animationId, updates },
-        { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta`, shadowGsapOp },
+        { label: "Edit GSAP animation", coalesceKey: metaKey, shadowGsapOp },
       );
       if (sdkSession) runShadowGsapTween(sdkSession, shadowGsapOp);
     },

package/src/hooks/useGsapKeyframeOps.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { ShadowKeyframeOp } from "../utils/sdkShadowGsapKeyframe";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { executeOptimistic } from "../utils/optimisticUpdate";
 import type { KeyframeCacheEntry } from "../player/store/playerStore";
@@ -58,6 +59,13 @@ export function useGsapKeyframeOps({
         percentage,
         properties: { [property]: value },
       };
+      // Shadow op (gsap_keyframe): SDK equivalent diffed via the commit chokepoint.
+      const shadowKeyframeOp: ShadowKeyframeOp = {
+        kind: "add",
+        animationId,
+        percentage,
+        properties: { [property]: value },
+      };
       void executeOptimisticKeyframeCacheUpdate({
         sourceFile,
         elementId: selection.id,
@@ -71,6 +79,7 @@ export function useGsapKeyframeOps({
           commitMutation(selection, mutation, {
             label: `Add keyframe at ${percentage}%`,
             softReload: true,
+            shadowKeyframeOp,
           }),
       }).catch((error) => {
         trackGsapSaveFailure(error, selection, mutation, `Add keyframe at ${percentage}%`);
@@ -86,10 +95,16 @@ export function useGsapKeyframeOps({
       percentage: number,
       properties: Record<string, number | string>,
     ) => {
+      const shadowKeyframeOp: ShadowKeyframeOp = {
+        kind: "add",
+        animationId,
+        percentage,
+        properties,
+      };
       return commitMutation(
         selection,
         { type: "add-keyframe", animationId, percentage, properties },
-        { label: `Add keyframe at ${percentage}%`, softReload: true },
+        { label: `Add keyframe at ${percentage}%`, softReload: true, shadowKeyframeOp },
       );
     },
     [commitMutation],
@@ -99,6 +114,10 @@ export function useGsapKeyframeOps({
     (selection: DomEditSelection, animationId: string, percentage: number) => {
       const sourceFile = selection.sourceFile || activeCompPath || "index.html";
       const mutation = { type: "remove-keyframe", animationId, percentage };
+      // Shadow op (gsap_keyframe): SDK has no %-based removeGsapKeyframe on main,
+      // so the runner resolves percentage → keyframeIndex against the pre-op
+      // script and no-ops on ambiguity (duplicate-percentage keyframes).
+      const shadowKeyframeOp: ShadowKeyframeOp = { kind: "remove", animationId, percentage };
       void executeOptimisticKeyframeCacheUpdate({
         sourceFile,
         elementId: selection.id,
@@ -112,6 +131,7 @@ export function useGsapKeyframeOps({
           commitMutation(selection, mutation, {
             label: `Remove keyframe at ${percentage}%`,
             softReload: true,
+            shadowKeyframeOp,
           }),
       }).catch((error) => {
         trackGsapSaveFailure(error, selection, mutation, `Remove keyframe at ${percentage}%`);

package/src/hooks/useGsapScriptCommits.ts

@@ -1,9 +1,11 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { applySoftReload } from "../utils/gsapSoftReload";
 import { resolveGsapFidelityArgs, runShadowGsapFidelity } from "../utils/sdkShadowGsapFidelity";
+import { runShadowGsapKeyframeFidelity } from "../utils/sdkShadowGsapKeyframe";
 import { updateKeyframeCacheFromParsed } from "./gsapKeyframeCacheHelpers";
+import { createKeyedSerializer } from "./serializeByKey";
 import {
   GsapMutationHttpError,
   formatGsapMutationRejectionToast,
@@ -45,10 +47,16 @@ async function mutateGsapScript(
 // oxfmt-ignore
 // fallow-ignore-next-line complexity
 export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession }: GsapScriptCommitsParams) {
+  // Serializer for per-key commits (options.serializeKey). Keyed by
+  // `gsap:${animationId}:meta`, it chains a meta commit onto the prior one for
+  // the same animationId so their POSTs can't interleave — which is what made
+  // the shadow fidelity diff pair an op with a stale server result and report
+  // false ease mismatches. Held in a ref so the chain survives re-renders.
+  const serializerRef = useRef(createKeyedSerializer());
   // Pre-existing complexity (server mutate + history + reload branches); this PR
   // adds only a guarded shadow-fidelity dispatch.
   // fallow-ignore-next-line complexity
-  const commitMutation = useCallback(async (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
+  const runCommit = useCallback(async (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
     const pid = projectIdRef.current;
     if (!pid) return;
     const unsafeFields = findUnsafeMutationValues(mutation);
@@ -70,9 +78,10 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     domEditSaveTimestampRef.current = Date.now();
     // Shadow value fidelity: diff the SDK's GSAP writer output against the
     // server's, from the same pre-op file. Fire-and-forget; server authoritative.
-    // Only meta-level ops carry shadowGsapOp today (add / update-meta / delete via
-    // useGsapAnimationOps). Per-property and keyframe handlers (useGsapPropertyDebounce,
-    // useGsapKeyframeOps) intentionally don't synthesize one yet — deferred follow-up.
+    // Meta-level ops carry shadowGsapOp (add / update-meta / delete via
+    // useGsapAnimationOps); keyframe ops carry shadowKeyframeOp (add/remove via
+    // useGsapKeyframeOps, handled by the gsap_keyframe block below). Per-property
+    // handlers (useGsapPropertyDebounce) don't synthesize one yet — deferred follow-up.
     // scriptText is null when the composition has no GSAP script; nothing to diff.
     const fidelityArgs = resolveGsapFidelityArgs(
       sdkSession,
@@ -83,6 +92,12 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     if (fidelityArgs) {
       void runShadowGsapFidelity(fidelityArgs.before, fidelityArgs.op, fidelityArgs.serverScript);
     }
+    // Keyframe value fidelity (gsap_keyframe): same serialize-diff approach, but
+    // the SDK has no keyframe reader so there is no live-existence path — the diff
+    // is the only signal. Guarded on a live session + both scripts to diff.
+    if (sdkSession && options.shadowKeyframeOp && result.before != null && result.scriptText != null) {
+      void runShadowGsapKeyframeFidelity(result.before, options.shadowKeyframeOp, result.scriptText);
+    }
     if (result.before != null && result.after != null) {
       await editHistory.recordEdit({ label: options.label, kind: "manual", coalesceKey: options.coalesceKey, files: { [targetPath]: { before: result.before, after: result.after } } });
     }
@@ -97,6 +112,19 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     }
     onCacheInvalidate();
   }, [projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession]);
+  // Every GSAP-script commit is a read-modify-write of one file. Overlapping
+  // commits to the SAME file (any op type, any animation) interleave server-side
+  // and make the shadow fidelity diff pair an op with a stale server result —
+  // the false ease/value mismatches this serializer exists to prevent. So
+  // serialize per target file by default; an explicit serializeKey overrides.
+  const commitMutation = useCallback(
+    (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
+      const file = selection.sourceFile || activeCompPath || "index.html";
+      const key = options.serializeKey ?? `gsap-file:${file}`;
+      return serializerRef.current(key, () => runCommit(selection, mutation, options));
+    },
+    [runCommit, activeCompPath],
+  );
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(activeCompPath);
   const commitMutationSafely = useSafeGsapCommitMutation(commitMutation, trackGsapSaveFailure, showToast);
   const propertyOps = useGsapPropertyDebounce(commitMutationSafely);

package/src/utils/sdkShadow.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi, beforeEach } from "vitest";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import {
   patchOpsToSdkEditOps,
   runShadowDelete,
@@ -10,8 +10,10 @@ import {
   SdkShadowMismatch,
 } from "./sdkShadow";
 import type { ShadowGsapOp } from "./sdkShadow";
+import { makeSelectorResolver } from "./sdkShadowGsapFidelity";
 import type { PatchOperation } from "./sourcePatcher";
 import { openComposition } from "@hyperframes/sdk";
+import { Window } from "happy-dom";
 
 // Capture sdk_shadow_dispatch telemetry for the non-PatchOperation runners.
 const trackedEvents: Array<{ event: string; props: Record<string, unknown> }> = [];
@@ -108,6 +110,7 @@ describe("sdkShadowDispatch (integration)", () => {
     expect(session.getElement("hf-box")?.inlineStyles.color).toBe("#00f");
   });
 
+  // fallow-ignore-next-line code-duplication
   it("does NOT false-mismatch a hyphenated style property (kebab op vs camelCase snapshot)", async () => {
     const { sdkShadowDispatch } = await import("./sdkShadow");
     const session = await openComposition(BASE_HTML);
@@ -147,6 +150,59 @@ describe("sdkShadowDispatch (integration)", () => {
     expect(session.getElement("hf-box")?.text).toBe("Updated");
   });
 
+  // Fix 2: text parity normalization. snapshot.text is trimmed by the SDK, so a
+  // trailing-whitespace-only difference between the op value and the snapshot must
+  // not flag.
+  it("does NOT false-mismatch trailing-whitespace-only text difference", async () => {
+    const { sdkShadowDispatch } = await import("./sdkShadow");
+    const session = await openComposition(BASE_HTML);
+
+    const ops: PatchOperation[] = [{ type: "text-content", property: "text", value: "World   " }];
+    const result = sdkShadowDispatch(session, "hf-box", ops);
+
+    expect(result.dispatched).toBe(true);
+    expect(result.mismatches).toHaveLength(0); // trimmed both sides
+  });
+
+  // Empty-string op value vs an absent (null) snapshot text must collapse to equal
+  // — both mean "no text content".
+  it("treats empty-string text op and null snapshot text as equal", async () => {
+    const { sdkShadowDispatch } = await import("./sdkShadow");
+    const EMPTY_HTML = /* html */ `<!DOCTYPE html>
+<html><body><img data-hf-id="hf-img" src="x.png" /></body></html>`;
+    const session = await openComposition(EMPTY_HTML);
+
+    const ops: PatchOperation[] = [{ type: "text-content", property: "text", value: "" }];
+    const result = sdkShadowDispatch(session, "hf-img", ops);
+
+    expect(result.dispatched).toBe(true);
+    expect(result.mismatches).toHaveLength(0); // "" vs null → both null
+  });
+
+  // Fix 3 verdict (REAL DIVERGENCE, not a readback artifact): the inline-style
+  // read-back already reads only the AUTHORED style attribute (getElementStyles →
+  // parseStyleAttr), never computed styles. The transform-origin divergence
+  // (expected null actual "center center") was a genuine SDK bug — setStyle
+  // removal of a HYPHENATED property silently no-opped because setElementStyles
+  // deleted the kebab key while the style map is keyed camelCase. Now FIXED in
+  // the SDK (model.ts setElementStyles normalizes the key via toCamel), so the
+  // shadow sees parity: removal applies and there is no mismatch.
+  it("reports clean removal of a hyphenated style (SDK setStyle kebab/camel fix)", async () => {
+    const { sdkShadowDispatch } = await import("./sdkShadow");
+    const TO_HTML = /* html */ `<!DOCTYPE html>
+<html><body><div data-hf-id="hf-box" style="transform-origin: center center">x</div></body></html>`;
+    const session = await openComposition(TO_HTML);
+
+    const ops: PatchOperation[] = [
+      { type: "inline-style", property: "transform-origin", value: null },
+    ];
+    const result = sdkShadowDispatch(session, "hf-box", ops);
+
+    // The SDK now removes the hyphenated property, so the shadow read-back agrees.
+    expect(result.dispatched).toBe(true);
+    expect(result.mismatches).toHaveLength(0);
+  });
+
   it("applies attribute op and reads back via session.getElement", async () => {
     const { sdkShadowDispatch } = await import("./sdkShadow");
     const session = await openComposition(BASE_HTML);
@@ -237,6 +293,35 @@ describe("runShadowDelete", () => {
       reason: "cannot_dispatch",
     });
   });
+
+  // Fix 4 verdict (REAL SDK id-resolution divergence, NOT a readback bug): when a
+  // bare hf-id collides between a sub-composition element (scopedId
+  // "hf-host/hf-dup") and a top-level sibling (scopedId "hf-dup"), removeElement
+  // resolves the bare id via resolveScoped → querySelector (document-order-first,
+  // removes the INNER instance), but getElement prefers the canonical top-level
+  // match (scopedId === id) which SURVIVES. The shadow then correctly reports
+  // expected "removed" / actual "present". The readback here is correct (it checks
+  // the same id it dispatched); the fix belongs in the SDK's id resolution
+  // (resolveScoped vs getElement agreement), not in this file.
+  const DUP_ID_HTML = /* html */ `<!DOCTYPE html><html><body>
+    <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-dup">inner</div>
+      </div>
+      <div data-hf-id="hf-dup">outer</div>
+    </div>
+  </body></html>`;
+
+  it("reports clean delete for a duplicate bare id (SDK resolves removeElement/getElement to the same instance)", async () => {
+    const session = await openComposition(DUP_ID_HTML);
+    runShadowDelete(session, "hf-dup");
+    // SDK fix (agree removeElement/getElement on duplicate bare ids): both now
+    // resolve a bare id to the canonical (top-level) instance, so removeElement
+    // drops exactly the element the readback checks → no mismatch. (Previously
+    // removeElement dropped the inner instance while the top-level survived,
+    // which this shadow correctly flagged; that divergence is now fixed.)
+    expect(lastShadow()).toMatchObject({ op: "delete", dispatched: true, mismatchCount: 0 });
+  });
 });
 
 describe("runShadowTiming", () => {
@@ -249,6 +334,38 @@ describe("runShadowTiming", () => {
     expect(el?.trackIndex).toBe(1);
     expect(lastShadow()).toMatchObject({ op: "timing", dispatched: true, mismatchCount: 0 });
   });
+
+  // Fix 1: float-precision tolerance. The SDK computes durations arithmetically
+  // (returning e.g. 3.0999999999999996); the server stores the rounded literal
+  // (3.1). A relative epsilon must treat these as equal, while a real difference
+  // still flags. A fake session returns the imprecise value on read-back.
+  type FakeTiming = { start?: number; duration?: number; trackIndex?: number };
+  function fakeTimingSession(readback: FakeTiming) {
+    return {
+      can: () => ({ ok: true }),
+      batch: (fn: () => void) => fn(),
+      dispatch: () => {},
+      getElement: () => readback,
+    } as unknown as Parameters<typeof runShadowTiming>[0];
+  }
+
+  it("does NOT flag float-precision duration drift (3.1 vs 3.0999999999999996)", () => {
+    const session = fakeTimingSession({ duration: 3.0999999999999996 });
+    runShadowTiming(session, "hf-clip", { duration: 3.1 });
+    expect(lastShadow()).toMatchObject({ op: "timing", dispatched: true, mismatchCount: 0 });
+  });
+
+  it("does NOT flag float-precision start drift (21.36 vs 21.360000000000014)", () => {
+    const session = fakeTimingSession({ start: 21.360000000000014 });
+    runShadowTiming(session, "hf-clip", { start: 21.36 });
+    expect(lastShadow()).toMatchObject({ op: "timing", dispatched: true, mismatchCount: 0 });
+  });
+
+  it("STILL flags a real duration difference (3.1 vs 3.5)", () => {
+    const session = fakeTimingSession({ duration: 3.5 });
+    runShadowTiming(session, "hf-clip", { duration: 3.1 });
+    expect(lastShadow()).toMatchObject({ op: "timing", dispatched: true, mismatchCount: 1 });
+  });
 });
 
 describe("runShadowGsapTween", () => {
@@ -304,6 +421,29 @@ describe("gsapFidelityMismatches", () => {
     expect(mismatches.some((m) => m.property === "duration")).toBe(true);
   });
 
+  it("does NOT flag sub-ULP float-formatting noise in duration", () => {
+    // 3.1 vs 3.0999999999999996 is the same value after writer round-trips;
+    // relative-epsilon compare must treat it as equal, not drift.
+    const sdk = `var tl = gsap.timeline({ paused: true });
+tl.to("[data-hf-id=\\"hf-box\\"]", { opacity: 1, duration: 3.1 }, 0);
+window.__timelines["t"] = tl;`;
+    const server = `var tl = gsap.timeline({ paused: true });
+tl.to("[data-hf-id=\\"hf-box\\"]", { opacity: 1, duration: 3.0999999999999996 }, 0);
+window.__timelines["t"] = tl;`;
+    expect(gsapFidelityMismatches(sdk, server)).toEqual([]);
+  });
+
+  it("STILL flags a real integer duration drift (2 vs 1) past the epsilon", () => {
+    const sdk = `var tl = gsap.timeline({ paused: true });
+tl.to("[data-hf-id=\\"hf-box\\"]", { opacity: 1, duration: 1 }, 0);
+window.__timelines["t"] = tl;`;
+    const server = `var tl = gsap.timeline({ paused: true });
+tl.to("[data-hf-id=\\"hf-box\\"]", { opacity: 1, duration: 2 }, 0);
+window.__timelines["t"] = tl;`;
+    const mismatches = gsapFidelityMismatches(sdk, server);
+    expect(mismatches.some((m) => m.property === "duration")).toBe(true);
+  });
+
   it("flags a tween present in one script but not the other", () => {
     const empty = `var tl = gsap.timeline({ paused: true });
 window.__timelines["t"] = tl;`;
@@ -345,6 +485,52 @@ window.__timelines["t"] = tl;`;
     // With a resolver: matched by element → no mismatch.
     expect(gsapFidelityMismatches(sdk, server, resolve)).toEqual([]);
   });
+
+  // Drive makeSelectorResolver against a real DOM (happy-dom shims the
+  // browser-only DOMParser the resolver depends on; the studio test env is node).
+  describe("makeSelectorResolver unifies selector forms (real DOM)", () => {
+    const origDomParser = (globalThis as { DOMParser?: unknown }).DOMParser;
+    beforeEach(() => {
+      (globalThis as { DOMParser?: unknown }).DOMParser = new Window().DOMParser;
+    });
+    afterEach(() => {
+      (globalThis as { DOMParser?: unknown }).DOMParser = origDomParser;
+    });
+
+    it("collapses #id / .class / [data-hf-id] for the SAME element to one key", () => {
+      // Element carries all three forms; the server may emit #id or .class while
+      // the SDK emits [data-hf-id]. All must resolve to the same canonical key.
+      const html = `<div data-hf-id="hf-9flp" class="caption-layer" id="intro-layer"></div>`;
+      const resolve = makeSelectorResolver(html);
+      const viaHfId = resolve('[data-hf-id="hf-9flp"]');
+      expect(resolve(".caption-layer")).toBe(viaHfId);
+      expect(resolve("#intro-layer")).toBe(viaHfId);
+    });
+
+    it("unifies SDK [data-hf-id] and server .class tweens in the fidelity diff", () => {
+      const html = `<div data-hf-id="hf-9flp" class="caption-layer"></div>`;
+      const resolve = makeSelectorResolver(html);
+      const sdkScript = `var tl = gsap.timeline({ paused: true });
+tl.from("[data-hf-id=\\"hf-9flp\\"]", { opacity: 0, duration: 1 }, 0);
+window.__timelines["t"] = tl;`;
+      const serverScript = `var tl = gsap.timeline({ paused: true });
+tl.from(".caption-layer", { opacity: 0, duration: 1 }, 0);
+window.__timelines["t"] = tl;`;
+      // Without unification these flag present/absent; the resolver collapses them.
+      expect(gsapFidelityMismatches(sdkScript, serverScript).length).toBeGreaterThan(0);
+      expect(gsapFidelityMismatches(sdkScript, serverScript, resolve)).toEqual([]);
+    });
+
+    it("collapses different selector forms for an element WITHOUT a data-hf-id", () => {
+      // No hf-id present: the resolver must still key both forms to the same node
+      // (not leave .class vs #id as distinct raw-selector keys).
+      const html = `<div class="caption-layer" id="intro-layer"></div>`;
+      const resolve = makeSelectorResolver(html);
+      expect(resolve(".caption-layer")).toBe(resolve("#intro-layer"));
+      // And it is NOT the raw selector fallback.
+      expect(resolve(".caption-layer")).not.toBe(".caption-layer");
+    });
+  });
 });
 
 describe("runShadowGsapFidelity", () => {