@hyperframes/studio 0.6.88 → 0.6.89

package/src/hooks/gsapRuntimeBridge.ts

@@ -10,14 +10,15 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-
 import { usePlayerStore } from "../player/store/playerStore";
-import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeKeyframes";
+
+import { readAllAnimatedProperties, readGsapProperty } from "./gsapRuntimeReaders";
 import {
-  absoluteToPercentage,
-  resolveTweenStart,
-  resolveTweenDuration,
-} from "../utils/globalTimeCompiler";
+  commitGsapPositionFromDrag,
+  computeCurrentPercentage,
+  materializeIfDynamic,
+} from "./gsapDragCommit";
+import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
 
 // ── Runtime reads ──────────────────────────────────────────────────────────
 
@@ -59,31 +60,40 @@ function readGsapPositionFromIframe(
 // ── Animation matching ─────────────────────────────────────────────────────
 
 // fallow-ignore-next-line complexity
-function findGsapPositionAnimation(animations: GsapAnimation[]): GsapAnimation | null {
-  // Prefer animations that already have x/y
-  for (const anim of animations) {
-    if (anim.keyframes) {
-      const hasPos = anim.keyframes.keyframes.some(
-        (kf) => "x" in kf.properties || "y" in kf.properties,
-      );
-      if (hasPos) return anim;
-    }
-    const props = anim.properties;
-    const fromProps = anim.fromProperties;
-    if (anim.method === "fromTo") {
-      if ("x" in props || "y" in props || (fromProps && ("x" in fromProps || "y" in fromProps))) {
-        return anim;
-      }
-    } else if ("x" in props || "y" in props) {
-      return anim;
-    }
-  }
-  // Fall back to any keyframed animation — drag will add x/y to it
-  for (const anim of animations) {
-    if (anim.keyframes) return anim;
+function animHasPosition(anim: GsapAnimation): boolean {
+  if (anim.keyframes?.keyframes.some((kf) => "x" in kf.properties || "y" in kf.properties))
+    return true;
+  if (anim.method === "fromTo") {
+    const from = anim.fromProperties;
+    return (
+      "x" in anim.properties || "y" in anim.properties || !!(from && ("x" in from || "y" in from))
+    );
   }
-  // Fall back to any animation — will be converted to keyframes
-  return animations[0] ?? null;
+  return "x" in anim.properties || "y" in anim.properties;
+}
+
+function findGsapPositionAnimation(
+  animations: GsapAnimation[],
+  selector?: string,
+): GsapAnimation | null {
+  if (animations.length === 0) return null;
+  const currentTime = usePlayerStore.getState().currentTime;
+
+  const scored = animations
+    .filter((a) => animHasPosition(a) || a.keyframes || animations.length === 1)
+    .map((a) => {
+      let score = 0;
+      if (animHasPosition(a)) score += 10;
+      if (a.keyframes) score += 5;
+      if (selector && a.targetSelector === selector) score += 8;
+      else if (a.targetSelector.includes(",")) score -= 5;
+      const pos = typeof a.position === "number" ? a.position : 0;
+      const dur = a.duration ?? 0;
+      if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) score += 4;
+      return { anim: a, score };
+    });
+  scored.sort((a, b) => b.score - a.score);
+  return scored[0]?.anim ?? animations[0];
 }
 
 // ── Selector resolution ────────────────────────────────────────────────────
@@ -94,94 +104,16 @@ function selectorForSelection(selection: DomEditSelection): string | null {
   return null;
 }
 
-// ── Percentage computation ─────────────────────────────────────────────────
-
-function computeCurrentPercentage(selection: DomEditSelection, animation?: GsapAnimation): number {
-  const currentTime = usePlayerStore.getState().currentTime;
-  if (animation) {
-    const start = resolveTweenStart(animation);
-    const duration = resolveTweenDuration(animation);
-    if (start !== null) {
-      return absoluteToPercentage(currentTime, start, duration);
-    }
-  }
-  const elStart = Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0;
-  const elDuration = Number.parseFloat(selection.dataAttributes?.duration ?? "1") || 1;
-  return elDuration > 0
-    ? Math.max(0, Math.min(100, Math.round(((currentTime - elStart) / elDuration) * 1000) / 10))
-    : 0;
-}
-
-// ── Dynamic keyframe materialization ──────────────────────────────────────
-
-async function materializeIfDynamic(
-  anim: GsapAnimation,
-  iframe: HTMLIFrameElement | null,
-  commitMutation: GsapDragCommitCallbacks["commitMutation"],
-  selection: DomEditSelection,
-): Promise<string | void> {
-  if (!anim.hasUnresolvedKeyframes && !anim.hasUnresolvedSelector) return;
-
-  if (anim.hasUnresolvedSelector) {
-    // Unroll: read ALL elements' keyframes from runtime and replace the loop
-    const allScanned = scanAllRuntimeKeyframes(iframe);
-    if (allScanned.size === 0) return;
-    const allElements = Array.from(allScanned.entries()).map(([id, data]) => ({
-      selector: `#${id}`,
-      keyframes: data.keyframes,
-      easeEach: data.easeEach,
-    }));
-    await commitMutation(
-      selection,
-      {
-        type: "materialize-keyframes",
-        animationId: anim.id,
-        keyframes: allScanned.get(selection.id ?? "")?.keyframes ?? [],
-        allElements,
-      },
-      { label: "Unroll dynamic animations", skipReload: true },
-    );
-    return `${anim.targetSelector}-to-0`;
-  }
-
-  const runtime = readRuntimeKeyframes(iframe, anim.targetSelector);
-  if (!runtime || runtime.keyframes.length === 0) return;
-  await commitMutation(
-    selection,
-    {
-      type: "materialize-keyframes",
-      animationId: anim.id,
-      keyframes: runtime.keyframes,
-      easeEach: runtime.easeEach,
-    },
-    { label: "Materialize dynamic keyframes", skipReload: true },
-  );
-}
-
 // ── High-level intercept ───────────────────────────────────────────────────
 
-export interface GsapDragCommitCallbacks {
-  commitMutation: (
-    selection: DomEditSelection,
-    mutation: Record<string, unknown>,
-    options: {
-      label: string;
-      coalesceKey?: string;
-      softReload?: boolean;
-      skipReload?: boolean;
-      beforeReload?: () => void;
-    },
-  ) => Promise<void>;
-}
+export type { GsapDragCommitCallbacks };
 
 /**
  * Attempt to handle a drag commit via the GSAP script mutation path.
  *
  * Returns a Promise that resolves to true if the drag was handled via GSAP
  * (caller should skip the CSS path), or false if no GSAP position animation
- * exists. The promise resolves only AFTER the mutation has been persisted and
- * the preview soft-reloaded — the CSS offset stays visible until then so the
- * element doesn't snap back during the async gap.
+ * exists.
  */
 // fallow-ignore-next-line complexity
 export async function tryGsapDragIntercept(
@@ -192,16 +124,16 @@ export async function tryGsapDragIntercept(
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
 ): Promise<boolean> {
-  let posAnim = findGsapPositionAnimation(animations);
+  const selector = selectorForSelection(selection);
+  if (!selector) return false;
+
+  let posAnim = findGsapPositionAnimation(animations, selector);
   if (!posAnim && fetchFallbackAnimations) {
     const fresh = await fetchFallbackAnimations();
-    posAnim = findGsapPositionAnimation(fresh);
+    posAnim = findGsapPositionAnimation(fresh, selector);
   }
   if (!posAnim) return false;
 
-  const selector = selectorForSelection(selection);
-  if (!selector) return false;
-
   // Keyframe writes at 0%/100% when outside the tween range. Acceptable
   // trade-off — CSS path must NEVER touch GSAP-targeted elements because
   // changing the CSS offset corrupts all existing keyframes (baked mismatch).
@@ -215,294 +147,9 @@ export async function tryGsapDragIntercept(
   return true;
 }
 
-// ── Commit helpers ─────────────────────────────────────────────────────────
-
-/**
- * Compute the new GSAP position values from runtime-read positions + drag
- * offset, then commit the mutation to the GSAP script.
- *
- * `gsap.getProperty` reads from GSAP's internal cache (element._gsap), not
- * from the DOM transform matrix. The strip in `applyStudioPathOffset` does
- * not affect the cached values, so the formula is simply:
- *   newValue = cachedGsapValue + dragOffset
- *
- * For flat tweens (to/set), the mutation would change the tween endpoint,
- * which is invisible at t=0. Instead, we convert to keyframes first so the
- * position is set at the exact seek percentage via a keyframe.
- */
-// fallow-ignore-next-line complexity
-async function commitGsapPositionFromDrag(
-  selection: DomEditSelection,
-  anim: GsapAnimation,
-  studioOffset: { x: number; y: number },
-  gsapPos: { x: number; y: number },
-  iframe: HTMLIFrameElement | null,
-  selector: string,
-  callbacks: GsapDragCommitCallbacks,
-): Promise<void> {
-  // CSS composition: translate → rotate → transform. The studioOffset is in
-  // pre-rotation space (CSS translate), but GSAP x/y are in post-CSS-rotate
-  // space (CSS transform). Counter-rotate the offset to match GSAP's frame.
-  const rotStyle = selection.element.style.getPropertyValue("--hf-studio-rotation");
-  const rotDeg = Number.parseFloat(rotStyle) || 0;
-  const rad = (-rotDeg * Math.PI) / 180;
-  const cos = Math.cos(rad);
-  const sin = Math.sin(rad);
-  const el = selection.element;
-  const origX = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const deltaX = studioOffset.x - origX;
-  const deltaY = studioOffset.y - origY;
-  const adjX = deltaX * cos - deltaY * sin;
-  const adjY = deltaX * sin + deltaY * cos;
-  // Use the GSAP base captured at drag start — the live gsapPos is corrupted
-  // by the draft's gsap.set() calls during drag.
-  const baseGsapX =
-    Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-x") ?? "") || gsapPos.x;
-  const baseGsapY =
-    Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-y") ?? "") || gsapPos.y;
-  const newX = Math.round(baseGsapX + adjX);
-  const newY = Math.round(baseGsapY + adjY);
-  // Restore the CSS offset to pre-drag value so the baked translate stays
-  // consistent with existing keyframes. The drag is captured in the new keyframe.
-  const restoreOffset = () => {
-    el.style.setProperty("--hf-studio-offset-x", `${origX}px`);
-    el.style.setProperty("--hf-studio-offset-y", `${origY}px`);
-    el.removeAttribute("data-hf-drag-initial-offset-x");
-    el.removeAttribute("data-hf-drag-initial-offset-y");
-  };
-
-  if (anim.keyframes) {
-    const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
-    const effectiveAnim = newId ? { ...anim, id: newId } : anim;
-    const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
-
-    // Check if current time is outside the tween's range — extend the tween
-    // to cover the playhead, remap existing keyframes, then add the new one.
-    const ct = usePlayerStore.getState().currentTime;
-    const ts = resolveTweenStart(effectiveAnim);
-    const td = resolveTweenDuration(effectiveAnim);
-    if (ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01)) {
-      await extendTweenAndAddKeyframe(
-        selection,
-        effectiveAnim,
-        { ...runtimeProps, x: newX, y: newY },
-        ct,
-        ts,
-        td,
-        callbacks,
-        restoreOffset,
-      );
-    } else {
-      await commitKeyframedPosition(
-        selection,
-        effectiveAnim,
-        { ...runtimeProps, x: newX, y: newY },
-        callbacks,
-        restoreOffset,
-      );
-    }
-  } else if (anim.method === "from" || anim.method === "fromTo") {
-    // from()/fromTo() — convert to keyframes in a single mutation, placing
-    // the dragged position at the 100% (rest) keyframe. A single mutation
-    // avoids the stable-id flip (from→to) that breaks chained mutations.
-    await callbacks.commitMutation(
-      selection,
-      {
-        type: "convert-to-keyframes",
-        animationId: anim.id,
-        resolvedFromValues: { x: newX, y: newY },
-      },
-      { label: "Move layer (keyframe rest)", softReload: true, beforeReload: restoreOffset },
-    );
-  } else {
-    // Flat to()/set() — convert to keyframes then add at current percentage.
-    const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
-    await commitFlatViaKeyframes(
-      selection,
-      anim,
-      { ...runtimeProps, x: newX, y: newY },
-      callbacks,
-      restoreOffset,
-    );
-  }
-}
-
-/**
- * Extend a tween's time range to cover `targetTime`, remap all existing
- * keyframe percentages to preserve their absolute positions, then add
- * a new keyframe at the target time.
- */
-async function extendTweenAndAddKeyframe(
-  selection: DomEditSelection,
-  anim: GsapAnimation,
-  properties: Record<string, number>,
-  targetTime: number,
-  tweenStart: number,
-  tweenDuration: number,
-  callbacks: GsapDragCommitCallbacks,
-  beforeReload?: () => void,
-): Promise<void> {
-  const tweenEnd = tweenStart + tweenDuration;
-  const newStart = Math.min(targetTime, tweenStart);
-  const newEnd = Math.max(targetTime, tweenEnd);
-  const newDuration = Math.max(0.01, newEnd - newStart);
-
-  // Step 1: Remap all existing keyframes to preserve their absolute times
-  // in the new range, then add the new keyframe.
-  const existingKfs = anim.keyframes?.keyframes ?? [];
-  const remappedKfs: Array<{ percentage: number; properties: Record<string, number | string> }> =
-    [];
-  for (const kf of existingKfs) {
-    const absTime = tweenStart + (kf.percentage / 100) * tweenDuration;
-    const newPct = Math.round(((absTime - newStart) / newDuration) * 1000) / 10;
-    remappedKfs.push({ percentage: newPct, properties: { ...kf.properties } });
-  }
-
-  // Add the new keyframe at the target time
-  const targetPct = Math.round(((targetTime - newStart) / newDuration) * 1000) / 10;
-  remappedKfs.push({ percentage: targetPct, properties });
-
-  // Sort and dedupe
-  remappedKfs.sort((a, b) => a.percentage - b.percentage);
-
-  // Step 2: Delete the old tween and create a new one with the extended range
-  // and all remapped keyframes. Using delete + add-with-keyframes as an atomic pair.
-  await callbacks.commitMutation(
-    selection,
-    { type: "delete", animationId: anim.id },
-    { label: "Extend tween range", skipReload: true },
-  );
-
-  const selector = anim.targetSelector;
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "add-with-keyframes",
-      targetSelector: selector,
-      position: Math.round(newStart * 1000) / 1000,
-      duration: Math.round(newDuration * 1000) / 1000,
-      keyframes: remappedKfs,
-    },
-    { label: `Move layer (extended keyframe)`, softReload: true, beforeReload },
-  );
-}
-
-// fallow-ignore-next-line complexity
-async function commitKeyframedPosition(
-  selection: DomEditSelection,
-  anim: GsapAnimation,
-  properties: Record<string, number>,
-  callbacks: GsapDragCommitCallbacks,
-  beforeReload?: () => void,
-): Promise<void> {
-  const pct = computeCurrentPercentage(selection, anim);
-
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "add-keyframe",
-      animationId: anim.id,
-      percentage: pct,
-      properties,
-    },
-    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload },
-  );
-}
-
-/**
- * For flat to()/set() tweens, convert to keyframes first so we can place the
- * drag position at the current percentage. Without conversion, the mutation
- * only changes the tween endpoint, which is invisible at t=0.
- */
-// fallow-ignore-next-line complexity
-async function commitFlatViaKeyframes(
-  selection: DomEditSelection,
-  anim: GsapAnimation,
-  properties: Record<string, number>,
-  callbacks: GsapDragCommitCallbacks,
-  beforeReload?: () => void,
-): Promise<void> {
-  await callbacks.commitMutation(
-    selection,
-    { type: "convert-to-keyframes", animationId: anim.id },
-    { label: "Convert to keyframes for drag", skipReload: true },
-  );
+// ── Runtime property readers (re-exported for external callers) ───────────
 
-  const pct = computeCurrentPercentage(selection, anim);
-
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "add-keyframe",
-      animationId: anim.id,
-      percentage: pct,
-      properties,
-    },
-    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload },
-  );
-}
-
-// ── Runtime property reader ───────────────────────────────────────────────
-
-export function readGsapProperty(
-  iframe: HTMLIFrameElement | null,
-  selector: string | null,
-  prop: string,
-): number | null {
-  if (!iframe?.contentWindow || !selector) return null;
-  try {
-    const gsap = (iframe.contentWindow as unknown as { gsap?: IframeGsap }).gsap;
-    if (!gsap?.getProperty) return null;
-    const el = iframe.contentDocument?.querySelector(selector);
-    if (!el) return null;
-    const val = Number(gsap.getProperty(el, prop));
-    return Number.isFinite(val) ? Math.round(val) : null;
-  } catch {
-    return null;
-  }
-}
-
-export function readAllAnimatedProperties(
-  iframe: HTMLIFrameElement | null,
-  selector: string,
-  anim: GsapAnimation,
-): Record<string, number> {
-  const result: Record<string, number> = {};
-  if (!iframe?.contentWindow) return result;
-  let gsap: IframeGsap | undefined;
-  try {
-    gsap = (iframe.contentWindow as unknown as { gsap?: IframeGsap }).gsap;
-  } catch {
-    return result;
-  }
-  if (!gsap?.getProperty) return result;
-  let doc: Document | null = null;
-  try {
-    doc = iframe.contentDocument;
-  } catch {
-    return result;
-  }
-  const el = doc?.querySelector(selector);
-  if (!el) return result;
-
-  const propKeys = new Set<string>();
-  if (anim.keyframes) {
-    for (const kf of anim.keyframes.keyframes) {
-      for (const p of Object.keys(kf.properties)) {
-        if (typeof kf.properties[p] === "number") propKeys.add(p);
-      }
-    }
-  } else {
-    for (const p of Object.keys(anim.properties)) propKeys.add(p);
-  }
-
-  for (const prop of propKeys) {
-    const val = Number(gsap.getProperty(el, prop));
-    if (Number.isFinite(val)) result[prop] = Math.round(val);
-  }
-  return result;
-}
+export { readGsapProperty, readAllAnimatedProperties };
 
 // ── Resize intercept ──────────────────────────────────────────────────────
 

package/src/hooks/gsapRuntimeReaders.ts

@@ -0,0 +1,201 @@
+/**
+ * Low-level GSAP runtime property readers shared by gsapRuntimeBridge and gsapDragCommit.
+ */
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+
+interface IframeGsap {
+  getProperty: (el: Element, prop: string) => number;
+}
+
+export function readGsapProperty(
+  iframe: HTMLIFrameElement | null,
+  selector: string | null,
+  prop: string,
+): number | null {
+  if (!iframe?.contentWindow || !selector) return null;
+  try {
+    const gsap = (iframe.contentWindow as unknown as { gsap?: IframeGsap }).gsap;
+    if (!gsap?.getProperty) return null;
+    const el = iframe.contentDocument?.querySelector(selector);
+    if (!el) return null;
+    const val = Number(gsap.getProperty(el, prop));
+    return Number.isFinite(val) ? Math.round(val) : null;
+  } catch {
+    return null;
+  }
+}
+
+const POSITION_PROPS = new Set(["x", "y", "xPercent", "yPercent"]);
+const GSAP_CONFIG_KEYS = new Set([
+  "duration",
+  "ease",
+  "delay",
+  "stagger",
+  "id",
+  "onComplete",
+  "onUpdate",
+  "onStart",
+  "onRepeat",
+  "repeat",
+  "yoyo",
+  "repeatDelay",
+  "paused",
+  "immediateRender",
+  "lazy",
+  "overwrite",
+  "keyframes",
+  "parent",
+]);
+
+export function readAllAnimatedProperties(
+  iframe: HTMLIFrameElement | null,
+  selector: string,
+  anim: GsapAnimation,
+): Record<string, number> {
+  const result: Record<string, number> = {};
+  if (!iframe?.contentWindow) return result;
+  let gsap: IframeGsap | undefined;
+  try {
+    gsap = (iframe.contentWindow as unknown as { gsap?: IframeGsap }).gsap;
+  } catch {
+    return result;
+  }
+  if (!gsap?.getProperty) return result;
+  let doc: Document | null = null;
+  try {
+    doc = iframe.contentDocument;
+  } catch {
+    return result;
+  }
+  const el = doc?.querySelector(selector);
+  if (!el) return result;
+
+  const propKeys = new Set<string>();
+  if (anim.keyframes) {
+    for (const kf of anim.keyframes.keyframes) {
+      for (const p of Object.keys(kf.properties)) {
+        if (typeof kf.properties[p] === "number") propKeys.add(p);
+      }
+    }
+  } else {
+    for (const p of Object.keys(anim.properties)) propKeys.add(p);
+  }
+
+  for (const prop of propKeys) {
+    const val = Number(gsap.getProperty(el, prop));
+    if (Number.isFinite(val)) {
+      result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : Math.round(val * 1000) / 1000;
+    }
+  }
+
+  const otherTweenProps = new Set<string>();
+  try {
+    const win = iframe.contentWindow as unknown as { __timelines?: Record<string, unknown> };
+    const timelines = win.__timelines;
+    if (timelines) {
+      for (const tl of Object.values(timelines)) {
+        const tlObj = tl as {
+          getChildren?: (
+            deep: boolean,
+          ) => Array<{ targets?: () => Element[]; vars?: Record<string, unknown> }>;
+        };
+        if (!tlObj?.getChildren) continue;
+        for (const child of tlObj.getChildren(true)) {
+          if (typeof child.targets !== "function") continue;
+          const targets = child.targets();
+          if (!targets.includes(el)) continue;
+          const vars = child.vars;
+          if (!vars) continue;
+          for (const k of Object.keys(vars)) {
+            if (!GSAP_CONFIG_KEYS.has(k)) otherTweenProps.add(k);
+          }
+        }
+      }
+    }
+  } catch (e) {
+    console.warn(
+      "Cross-tween guard failed — baseline capture may include values from other tweens",
+      e,
+    );
+  }
+  for (const p of propKeys) otherTweenProps.delete(p);
+
+  // Tier 1: Transform + visual properties with universal CSS defaults.
+  // Safe to compare against hardcoded values — these are always 0 or 1
+  // regardless of the element's stylesheet.
+  const UNIVERSAL_BASELINE: Record<string, number> = {
+    opacity: 1,
+    scale: 1,
+    scaleX: 1,
+    scaleY: 1,
+    scaleZ: 1,
+    rotation: 0,
+    rotationX: 0,
+    rotationY: 0,
+    skewX: 0,
+    skewY: 0,
+    z: 0,
+    xPercent: 0,
+    yPercent: 0,
+    transformPerspective: 0,
+    blur: 0,
+    brightness: 1,
+    contrast: 1,
+    saturate: 1,
+    hueRotate: 0,
+    grayscale: 0,
+    sepia: 0,
+    invert: 0,
+  };
+  for (const [prop, defaultVal] of Object.entries(UNIVERSAL_BASELINE)) {
+    if (prop in result) continue;
+    if (otherTweenProps.has(prop)) continue;
+    const val = Number(gsap.getProperty(el, prop));
+    if (Number.isFinite(val) && Math.round(val * 1000) !== Math.round(defaultVal * 1000)) {
+      result[prop] = Math.round(val * 1000) / 1000;
+    }
+  }
+
+  // Tier 2: Element-dependent properties — their "default" depends on the
+  // stylesheet, so we compare GSAP's runtime value against the element's
+  // computed CSS value. Only capture if GSAP has actively changed it.
+  const COMPUTED_BASELINE = [
+    "borderRadius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomLeftRadius",
+    "borderBottomRightRadius",
+    "letterSpacing",
+    "wordSpacing",
+    "lineHeight",
+    "fontSize",
+    "outlineOffset",
+    "outlineWidth",
+    "strokeDashoffset",
+    "strokeWidth",
+    "backgroundPositionX",
+    "backgroundPositionY",
+  ];
+  let computedStyle: CSSStyleDeclaration | null = null;
+  try {
+    computedStyle = doc?.defaultView?.getComputedStyle(el) ?? null;
+  } catch {}
+  for (const prop of COMPUTED_BASELINE) {
+    if (prop in result) continue;
+    if (otherTweenProps.has(prop)) continue;
+    const gsapVal = Number(gsap.getProperty(el, prop));
+    if (!Number.isFinite(gsapVal)) continue;
+    let cssVal = NaN;
+    if (computedStyle) {
+      const raw = computedStyle.getPropertyValue(
+        prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
+      );
+      cssVal = parseFloat(raw);
+    }
+    if (Number.isFinite(cssVal) && Math.round(gsapVal * 1000) === Math.round(cssVal * 1000))
+      continue;
+    result[prop] = Math.round(gsapVal * 1000) / 1000;
+  }
+
+  return result;
+}