@hyperframes/studio 0.7.6 → 0.7.8

package/src/components/sidebar/AudioRow.tsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { ContextMenu } from "./AssetContextMenu";
+import { basename, getAudioSubtype } from "./assetHelpers";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+
+export function AudioRow({
+  projectId,
+  asset,
+  used,
+  meta,
+  onCopy,
+  isCopied,
+  onDelete,
+  onRename,
+}: {
+  projectId: string;
+  asset: string;
+  used: boolean;
+  meta?: { description?: string; duration?: number };
+  onCopy: (path: string) => void;
+  isCopied: boolean;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+}) {
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const [playing, setPlaying] = useState(false);
+  const [bars, setBars] = useState<number[]>([]);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const actxRef = useRef<AudioContext | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
+  const animRef = useRef<number>(0);
+  const name = basename(asset);
+  const subtype = getAudioSubtype(asset);
+  const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
+
+  useEffect(() => {
+    return () => {
+      cancelAnimationFrame(animRef.current);
+      audioRef.current?.pause();
+      actxRef.current?.close();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (playing) {
+      const barCount = 24;
+      const loop = () => {
+        const analyser = analyserRef.current;
+        if (!analyser) {
+          animRef.current = requestAnimationFrame(loop);
+          return;
+        }
+        const data = new Uint8Array(analyser.frequencyBinCount);
+        analyser.getByteFrequencyData(data);
+        const step = Math.floor(data.length / barCount);
+        const next: number[] = [];
+        for (let i = 0; i < barCount; i++) {
+          let sum = 0;
+          for (let j = 0; j < step; j++) sum += data[i * step + j];
+          next.push(sum / step / 255);
+        }
+        setBars(next);
+        if (audioRef.current && !audioRef.current.paused)
+          animRef.current = requestAnimationFrame(loop);
+      };
+      animRef.current = requestAnimationFrame(loop);
+    } else {
+      setBars([]);
+    }
+    return () => cancelAnimationFrame(animRef.current);
+  }, [playing]);
+
+  const togglePlay = useCallback(async () => {
+    if (playing) {
+      audioRef.current?.pause();
+      setPlaying(false);
+      cancelAnimationFrame(animRef.current);
+      return;
+    }
+
+    if (!actxRef.current) {
+      actxRef.current = new AudioContext();
+      analyserRef.current = actxRef.current.createAnalyser();
+      analyserRef.current.fftSize = 256;
+      analyserRef.current.smoothingTimeConstant = 0.7;
+    }
+
+    if (!audioRef.current) {
+      const el = new Audio();
+      el.onended = () => {
+        setPlaying(false);
+        cancelAnimationFrame(animRef.current);
+      };
+      audioRef.current = el;
+      sourceRef.current = actxRef.current.createMediaElementSource(el);
+      sourceRef.current.connect(analyserRef.current!);
+      analyserRef.current!.connect(actxRef.current.destination);
+      el.src = serveUrl;
+    }
+
+    if (actxRef.current.state === "suspended") await actxRef.current.resume();
+    audioRef.current.currentTime = 0;
+    await audioRef.current.play();
+    setPlaying(true);
+  }, [serveUrl, playing]);
+
+  return (
+    <>
+      <div
+        draggable
+        onClick={() => onCopy(asset)}
+        onDragStart={(e) => {
+          e.dataTransfer.effectAllowed = "copy";
+          e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
+          e.dataTransfer.setData("text/plain", asset);
+        }}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setContextMenu({ x: e.clientX, y: e.clientY });
+        }}
+        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-all cursor-pointer ${
+          playing
+            ? "bg-panel-accent/[0.06]"
+            : isCopied
+              ? "bg-panel-accent/10"
+              : "hover:bg-panel-surface-hover"
+        }`}
+      >
+        <button
+          className={`w-7 h-7 rounded-md flex-shrink-0 flex items-center justify-center transition-all ${
+            playing
+              ? "bg-panel-accent/15 text-panel-accent"
+              : "text-panel-text-5 group-hover:text-panel-text-3"
+          }`}
+          onClick={(e) => {
+            e.stopPropagation();
+            togglePlay();
+          }}
+        >
+          {playing ? (
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+              <rect x="6" y="4" width="4" height="16" rx="1" />
+              <rect x="14" y="4" width="4" height="16" rx="1" />
+            </svg>
+          ) : (
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+              <polygon points="6,4 20,12 6,20" />
+            </svg>
+          )}
+        </button>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1.5">
+            <span
+              className={`text-[12px] font-medium truncate ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
+            >
+              {name}
+            </span>
+            {!playing && (
+              <span className="text-[11px] text-panel-text-5 flex-shrink-0">
+                {meta?.duration ? `${meta.duration}s · ` : ""}
+                {subtype}
+              </span>
+            )}
+            {used && (
+              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded flex-shrink-0">
+                in use
+              </span>
+            )}
+          </div>
+          {bars.length > 0 && (
+            <div className="flex items-end gap-[2px] h-[14px] mt-0.5">
+              {bars.map((v, i) => (
+                <div
+                  key={i}
+                  className="flex-1 rounded-[1px]"
+                  style={{
+                    height: `${Math.max(10, v * 100)}%`,
+                    background: `linear-gradient(to top, rgba(60, 230, 172, ${0.3 + v * 0.5}), rgba(60, 230, 172, ${0.5 + v * 0.5}))`,
+                    transition: "height 80ms ease-out",
+                  }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          asset={asset}
+          onClose={() => setContextMenu(null)}
+          onCopy={onCopy}
+          onDelete={onDelete}
+          onRename={onRename}
+        />
+      )}
+    </>
+  );
+}

package/src/components/sidebar/assetHelpers.ts

@@ -0,0 +1,40 @@
+import { AUDIO_EXT, IMAGE_EXT, VIDEO_EXT, FONT_EXT } from "../../utils/mediaTypes";
+
+export type MediaCategory = "audio" | "images" | "video" | "fonts";
+
+export function getCategory(path: string): MediaCategory | null {
+  if (AUDIO_EXT.test(path)) return "audio";
+  if (IMAGE_EXT.test(path)) return "images";
+  if (VIDEO_EXT.test(path)) return "video";
+  if (FONT_EXT.test(path)) return "fonts";
+  return null;
+}
+
+export function getAudioSubtype(path: string): string {
+  const lower = path.toLowerCase();
+  if (lower.includes("/bgm/") || lower.includes("/music/")) return "BGM";
+  if (lower.includes("/sfx/") || lower.includes("/sound")) return "SFX";
+  if (lower.includes("/voice/") || lower.includes("/narrat")) return "Voice";
+  return "Audio";
+}
+
+export function basename(path: string): string {
+  const name = path.split("/").pop() ?? path;
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(0, dot) : name;
+}
+
+export function ext(path: string): string {
+  const name = path.split("/").pop() ?? path;
+  const dot = name.lastIndexOf(".");
+  return dot > 0 ? name.slice(dot + 1).toUpperCase() : "";
+}
+
+export const CATEGORY_LABELS: Record<MediaCategory, string> = {
+  audio: "Audio",
+  images: "Images",
+  video: "Video",
+  fonts: "Fonts",
+};
+
+export const FILTER_ORDER: MediaCategory[] = ["audio", "images", "video", "fonts"];

package/src/contexts/DomEditContext.tsx

@@ -55,6 +55,7 @@ export interface DomEditActionsValue extends Pick<
   | "handleGsapRemoveAllKeyframes"
   | "handleResetSelectedElementKeyframes"
   | "commitAnimatedProperty"
+  | "commitAnimatedProperties"
   | "handleSetArcPath"
   | "handleUpdateArcSegment"
   | "handleUnroll"
@@ -63,6 +64,7 @@ export interface DomEditActionsValue extends Pick<
   | "commitMutation"
   | "applyMarqueeSelection"
   | "handleUpdateKeyframeEase"
+  | "handleSetAllKeyframeEases"
 > {}
 
 export interface DomEditSelectionValue extends Pick<
@@ -163,6 +165,7 @@ export function DomEditProvider({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     commitAnimatedProperty,
+    commitAnimatedProperties,
     handleSetArcPath,
     handleUpdateArcSegment,
     handleUnroll,
@@ -171,6 +174,7 @@ export function DomEditProvider({
     commitMutation,
     applyMarqueeSelection,
     handleUpdateKeyframeEase,
+    handleSetAllKeyframeEases,
   },
   children,
 }: {
@@ -236,6 +240,7 @@ export function DomEditProvider({
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
       commitAnimatedProperty,
+      commitAnimatedProperties,
       handleSetArcPath,
       handleUpdateArcSegment,
       handleUnroll,
@@ -244,6 +249,7 @@ export function DomEditProvider({
       commitMutation: stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleSetAllKeyframeEases,
     }),
     [
       handleTimelineElementSelect,
@@ -295,6 +301,7 @@ export function DomEditProvider({
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
       commitAnimatedProperty,
+      commitAnimatedProperties,
       handleSetArcPath,
       handleUpdateArcSegment,
       handleUnroll,
@@ -303,6 +310,7 @@ export function DomEditProvider({
       stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleSetAllKeyframeEases,
     ],
   );
 

package/src/hooks/gsapDragCommit.test.ts

@@ -332,7 +332,7 @@ describe("commitStaticGsapPosition — instantPatch (value-only set)", () => {
     expect(yPatch.change.props[xMutation.property]).toBe(xMutation.value);
   });
 
-  it("does NOT attach instantPatch when ADDING a new set (structural — new tween)", async () => {
+  it("ADDS a global gsap.set with a global-set instantPatch (off-timeline, no flash)", async () => {
     const { commits, callbacks } = optionRecordingCallbacks();
 
     await commitStaticGsapPosition(
@@ -340,13 +340,15 @@ describe("commitStaticGsapPosition — instantPatch (value-only set)", () => {
       { x: -50, y: 30 },
       { x: 0, y: 0 },
       "#puck-a",
-      null, // no existing set → `add` a new tween
+      null, // no existing set → `add` a new base gsap.set
       callbacks,
     );
 
     expect(commits).toHaveLength(1);
     expect(commits[0].mutation.type).toBe("add");
-    expect(commits[0].options.instantPatch).toBeUndefined();
+    expect((commits[0].mutation as { global?: boolean }).global).toBe(true);
+    const patch = commits[0].options.instantPatch as { change: { kind: string } } | undefined;
+    expect(patch?.change.kind).toBe("global-set");
   });
 });
 
@@ -372,14 +374,16 @@ describe("commitStaticGsapRotation — instantPatch (value-only set)", () => {
     expect(patch.change.props[m.property]).toBe(m.value);
   });
 
-  it("does NOT attach instantPatch when ADDING a new rotation set (structural)", async () => {
+  it("ADDS a global gsap.set with a global-set instantPatch (off-timeline, no flash)", async () => {
     const { commits, callbacks } = optionRecordingCallbacks();
 
     await commitStaticGsapRotation(selection(), 42, "#puck-a", null, callbacks);
 
     expect(commits).toHaveLength(1);
     expect(commits[0].mutation.type).toBe("add");
-    expect(commits[0].options.instantPatch).toBeUndefined();
+    expect((commits[0].mutation as { global?: boolean }).global).toBe(true);
+    const patch = commits[0].options.instantPatch as { change: { kind: string } } | undefined;
+    expect(patch?.change.kind).toBe("global-set");
   });
 });
 

package/src/hooks/gsapDragCommit.ts

@@ -4,6 +4,10 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import {
+  STUDIO_ORIGINAL_WIDTH_ATTR,
+  STUDIO_ORIGINAL_HEIGHT_ATTR,
+} from "../components/editor/manualEditsTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeKeyframes";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
@@ -116,18 +120,22 @@ interface UpdatePropertyMutation {
 function setPatchFromUpdateProperties(
   selector: string,
   mutations: UpdatePropertyMutation[],
+  global = false,
 ): { selector: string; change: RuntimeTweenChange } {
   const props: SetPatchProps = {};
   for (const m of mutations) props[m.property as keyof SetPatchProps] = m.value;
-  return { selector, change: { kind: "set", props } };
+  // An off-timeline `gsap.set` has no runtime tween to patch — apply it to the
+  // element directly. An on-timeline `tl.set` mutates its tween (so a re-seek keeps it).
+  return { selector, change: { kind: global ? "global-set" : "set", props } };
 }
 
 /** Single-mutation convenience over {@link setPatchFromUpdateProperties}. */
 function setPatchFromUpdateProperty(
   selector: string,
   mutation: UpdatePropertyMutation,
+  global = false,
 ): { selector: string; change: RuntimeTweenChange } {
-  return setPatchFromUpdateProperties(selector, [mutation]);
+  return setPatchFromUpdateProperties(selector, [mutation], global);
 }
 
 /**
@@ -190,22 +198,25 @@ export async function commitStaticGsapPosition(
     // preview still reflects what DID persist. The x commit carries skipReload
     // (no reload), so its instantPatch gives instant feedback without a reload;
     // the y commit triggers the soft reload (skipped when the patch applies).
+    const global = !!existingSet.global;
     await callbacks.commitMutation(selection, xMutation, {
       label: "Move layer",
       skipReload: true,
       coalesceKey,
-      instantPatch: setPatchFromUpdateProperty(selector, xMutation),
+      instantPatch: setPatchFromUpdateProperty(selector, xMutation, global),
     });
     await callbacks.commitMutation(selection, yMutation, {
       label: "Move layer",
       softReload: true,
       coalesceKey,
       // Final commit of the coalesced x/y pair: carry both channels so the
-      // runtime `tl.set` lands the complete {x,y} pose in place.
-      instantPatch: setPatchFromUpdateProperties(selector, [xMutation, yMutation]),
+      // runtime set lands the complete {x,y} pose in place.
+      instantPatch: setPatchFromUpdateProperties(selector, [xMutation, yMutation], global),
     });
     return;
   }
+  // New static hold → a base `gsap.set` (off-timeline, no 0% keyframe marker), with
+  // an instant patch so the first nudge shows immediately (no soft-reload flash).
   await callbacks.commitMutation(
     selection,
     {
@@ -214,8 +225,13 @@ export async function commitStaticGsapPosition(
       method: "set",
       position: 0,
       properties: { x: newX, y: newY },
+      global: true,
+    },
+    {
+      label: "Move layer",
+      softReload: true,
+      instantPatch: { selector, change: { kind: "global-set", props: { x: newX, y: newY } } },
     },
-    { label: "Move layer", softReload: true },
   );
 }
 
@@ -260,11 +276,13 @@ export async function commitStaticGsapRotation(
     await callbacks.commitMutation(selection, rotationMutation, {
       label: "Rotate layer",
       softReload: true,
-      // Value-only rotation set: patch the runtime `tl.set` rotation in place.
-      instantPatch: setPatchFromUpdateProperty(selector, rotationMutation),
+      // Value-only rotation set — patch the runtime in place (off-timeline gsap.set
+      // applies to the element directly; on-timeline tl.set patches its tween).
+      instantPatch: setPatchFromUpdateProperty(selector, rotationMutation, !!existingSet.global),
     });
     return;
   }
+  // New static hold → off-timeline `gsap.set` (no 0% keyframe marker) + instant patch.
   await callbacks.commitMutation(
     selection,
     {
@@ -273,8 +291,13 @@ export async function commitStaticGsapRotation(
       method: "set",
       position: 0,
       properties: { rotation: newRotation },
+      global: true,
+    },
+    {
+      label: "Rotate layer",
+      softReload: true,
+      instantPatch: { selector, change: { kind: "global-set", props: { rotation: newRotation } } },
     },
-    { label: "Rotate layer", softReload: true },
   );
 }
 
@@ -342,6 +365,103 @@ export async function commitStaticGsapSize(
   );
 }
 
+/** Rounded `n` when it's a positive finite number, else `fallback`. */
+function positiveOr(n: number, fallback: number): number {
+  return Number.isFinite(n) && n > 0 ? Math.round(n) : fallback;
+}
+
+/**
+ * Prior size for a keyframed resize: the existing global set's value, else the
+ * element's pre-resize size (the draft saved it on the element before mutating
+ * el.style.width/height). Falls back to the new size when neither is available.
+ */
+function resolvePriorSize(
+  sizeSet: GsapAnimation | null,
+  el: Element | null | undefined,
+  fallbackW: number,
+  fallbackH: number,
+): { width: number; height: number } {
+  if (sizeSet) {
+    return {
+      width: positiveOr(Number(sizeSet.properties.width), fallbackW),
+      height: positiveOr(Number(sizeSet.properties.height), fallbackH),
+    };
+  }
+  const ow = Number.parseFloat(el?.getAttribute(STUDIO_ORIGINAL_WIDTH_ATTR) ?? "");
+  const oh = Number.parseFloat(el?.getAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR) ?? "");
+  return { width: positiveOr(ow, fallbackW), height: positiveOr(oh, fallbackH) };
+}
+
+/**
+ * Resize an *animated* element by keyframing its size at the current playhead,
+ * instead of a global `gsap.set` hold. Builds a width/height keyframe tween
+ * aligned to the element's existing animation: every base keyframe keeps the
+ * prior size, only the keyframe nearest the playhead gets the new size — so
+ * resizing one keyframe leaves the others unchanged. Replaces any prior global
+ * size set. Returns false when there's no usable range (caller falls back to the
+ * static set).
+ */
+export async function commitKeyframedSizeFromResize(
+  selection: DomEditSelection,
+  size: { width: number; height: number },
+  selector: string,
+  sizeSet: GsapAnimation | null,
+  animatedTween: GsapAnimation,
+  callbacks: GsapDragCommitCallbacks,
+): Promise<boolean> {
+  const ts = resolveTweenStart(animatedTween) ?? 0;
+  const td = resolveTweenDuration(animatedTween);
+  if (!(td > 0)) return false;
+
+  const newW = Math.round(size.width);
+  const newH = Math.round(size.height);
+  const prior = resolvePriorSize(sizeSet, selection.element, newW, newH);
+
+  const ct = usePlayerStore.getState().currentTime;
+  const pct = Math.max(0, Math.min(100, Math.round(((ct - ts) / td) * 1000) / 10));
+
+  // Base keyframe percentages from the animated tween (flat tween → 0 & 100),
+  // plus the endpoints and the playhead. Each keeps the prior size except the
+  // keyframe at the playhead, which gets the new size.
+  const pcts = new Set<number>(
+    animatedTween.keyframes?.keyframes.map((k) => k.percentage) ?? [0, 100],
+  );
+  pcts.add(0);
+  pcts.add(100);
+  pcts.add(pct);
+  const keyframes = Array.from(pcts)
+    .sort((a, b) => a - b)
+    .map((p) => ({
+      percentage: p,
+      properties: Math.abs(p - pct) < 0.05 ? { width: newW, height: newH } : { ...prior },
+    }));
+
+  // Add the size keyframe tween FIRST, then delete the old global hold. The two
+  // commits aren't transactional, so ordering matters: if the delete fails the
+  // size is preserved (animated, recoverable) rather than lost. Only the last
+  // commit triggers the reload.
+  const addLabel = `Resize (size keyframe ${pct.toFixed(0)}%)`;
+  await callbacks.commitMutation(
+    selection,
+    {
+      type: "add-with-keyframes",
+      targetSelector: selector,
+      position: roundTo3(ts),
+      duration: roundTo3(td),
+      keyframes,
+    },
+    sizeSet ? { label: addLabel, skipReload: true } : { label: addLabel, softReload: true },
+  );
+  if (sizeSet) {
+    await callbacks.commitMutation(
+      selection,
+      { type: "delete", animationId: sizeSet.id },
+      { label: "Resize layer", softReload: true },
+    );
+  }
+  return true;
+}
+
 export { findSizeSetAnimation };
 
 // ── Whole-path offset (plain drag on animated element) ──────────────────

package/src/hooks/gsapRuntimeBridge.ts

@@ -18,6 +18,7 @@ import {
   commitStaticGsapPosition,
   commitStaticGsapRotation,
   commitStaticGsapSize,
+  commitKeyframedSizeFromResize,
   commitWholePathOffset,
   computeCurrentPercentage,
   findPositionSetAnimation,
@@ -329,6 +330,27 @@ export async function tryGsapResizeIntercept(
     const sel = selectorFromSelection(selection);
     if (!sel) return false;
     const sizeSet = anim?.method === "set" ? anim : findSizeSetAnimation(animations, sel);
+
+    // If the element is animated (has a real tween, not just a static size
+    // hold), keyframe the size at the playhead so other keyframes keep theirs —
+    // instead of a global set that resizes every frame.
+    if (resizeGroup === "size") {
+      const animatedTween = pickClosestToPlayhead(
+        animations.filter((a) => a.method !== "set" && resolveTweenDuration(a) > 0),
+      );
+      if (animatedTween) {
+        const handled = await commitKeyframedSizeFromResize(
+          selection,
+          size,
+          sel,
+          sizeSet,
+          animatedTween,
+          { commitMutation, fetchAnimations: fetchFallbackAnimations },
+        );
+        if (handled) return true;
+      }
+    }
+
     await commitStaticGsapSize(selection, size, sel, sizeSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,

package/src/hooks/gsapRuntimeKeyframes.test.ts

@@ -101,6 +101,53 @@ describe("readRuntimeKeyframes — multiple tweens pick the one under the playhe
   });
 });
 
+describe("readRuntimeKeyframes — requireChannels keeps the motion path on the positional tween", () => {
+  // An animated element with a position tween AND a (longer) size tween, both at
+  // start 0 — the shape the per-keyframe size resize produces.
+  const el = { id: "dot-a" };
+  const positionTween = {
+    targets: () => [el],
+    vars: {
+      keyframes: [
+        { x: -1252, y: -394 },
+        { x: 244, y: -316 },
+      ],
+      duration: 2.4,
+    },
+    duration: () => 2.4,
+    startTime: () => 0, // range [0, 2.4]
+  };
+  const sizeTween = {
+    targets: () => [el],
+    vars: {
+      keyframes: [
+        { width: 120, height: 96 },
+        { width: 325, height: 300 },
+      ],
+      duration: 3.243,
+    },
+    duration: () => 3.243,
+    startTime: () => 0, // range [0, 3.243] — outlives the position tween
+  };
+
+  it("playhead past the position range (2.4–3.243s) still returns the position tween, not size", () => {
+    // Without the filter the size tween (the only one containing the playhead)
+    // would win and blank the path.
+    const read = readRuntimeKeyframes(
+      fakeIframe(el, [positionTween, sizeTween], 3.0),
+      "#dot-a",
+      undefined,
+      ["x", "y"],
+    );
+    expect(read?.keyframes[0]?.properties).toHaveProperty("x");
+  });
+
+  it("without requireChannels the size tween shadows the path past the position range (documents the bug)", () => {
+    const read = readRuntimeKeyframes(fakeIframe(el, [positionTween, sizeTween], 3.0), "#dot-a");
+    expect(read?.keyframes[0]?.properties).toHaveProperty("width");
+  });
+});
+
 describe("hasNonHoldTweenForElement — strict live-tween existence (drag stale-parse guard)", () => {
   const el = { id: "puck-b" };
   const holdSet = {