@hyperframes/studio 0.7.77 → 0.7.79

package/src/components/nle/TimelineResizeDivider.tsx

@@ -73,9 +73,9 @@ export function TimelineResizeDivider({
   );
 
   return (
-    // Horizontal resize divider: 3px visible seam (h-[3px]), 8px pointer-capture
+    // Horizontal resize divider: 3px visible seam (h-[3px]), 10px pointer-capture
     // zone via the absolutely-positioned inner hit area so the layout gap stays
-    // at 3px while draggability is preserved over the full 8px band.
+    // at 3px while draggability is preserved over the full band.
     <div
       role="separator"
       aria-orientation="horizontal"
@@ -94,8 +94,13 @@ export function TimelineResizeDivider({
       onPointerCancel={handlePointerUp}
       onKeyDown={handleKeyDown}
     >
-      {/* Expanded hit zone: 8px tall, centered on the 3px seam */}
-      <div className="absolute inset-x-0 -top-[2.5px] h-2" />
+      {/* Expanded hit zone, deliberately asymmetric: 4px up into the transport
+          row's vertical centring slack, the 3px seam, then 3px down into the
+          timeline card's border + toolbar padding. It stops at 10px rather than
+          the 24px WCAG 2.2 (2.5.8) target because that is all the dead space
+          there is: 28px transport buttons sit above and 28px toolbar buttons
+          below, and silently stealing their clicks is the worse bug. */}
+      <div className="absolute inset-x-0 -top-[4px] h-[10px]" />
       {/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
       <div className="h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" />
     </div>

package/src/components/pointerTargetSize.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { CompositionsTab } from "./sidebar/CompositionsTab";
+import { TimelineToolbar } from "./TimelineToolbar";
+
+// WCAG 2.2 (2.5.8) requires a 24x24 CSS pixel pointer target. happy-dom has no
+// CSS engine, so getBoundingClientRect() is 0x0 for everything here and the size
+// itself cannot be measured — these assert the utility classes that PRODUCE the
+// size instead, which is enough to fail if someone drops them. Real geometry
+// still needs a browser check.
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+(
+  window as unknown as { happyDOM: { settings: { disableIframePageLoading: boolean } } }
+).happyDOM.settings.disableIframePageLoading = true;
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+});
+
+function mount(element: React.ReactNode) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => root?.render(element));
+  return host;
+}
+
+describe("pointer target sizing classes (proxy for WCAG 2.5.8, not a geometry check)", () => {
+  it("gives the timeline zoom slider a 24px box without changing its 2px track or 10px thumb", () => {
+    const host = mount(<TimelineToolbar />);
+    const slider = host.querySelector<HTMLInputElement>('input[aria-label="Timeline zoom"]');
+    if (!slider) throw new Error("zoom slider did not render");
+
+    expect(slider.className).toContain("h-6");
+    expect(slider.className).toContain("[&::-webkit-slider-runnable-track]:h-[2px]");
+    expect(slider.className).toContain("[&::-webkit-slider-thumb]:h-[10px]");
+    expect(slider.className).toContain("[&::-webkit-slider-thumb]:w-[10px]");
+  });
+
+  it("gives the composition card's render button a 24x24 box around its 14px glyph", () => {
+    const host = mount(
+      <CompositionsTab
+        projectId="demo"
+        compositions={["compositions/headline.html"]}
+        activeComposition={null}
+        onSelect={vi.fn()}
+        onRenderComposition={vi.fn()}
+      />,
+    );
+    const button = host.querySelector<HTMLButtonElement>('button[aria-label="Render headline"]');
+    if (!button) throw new Error("render button did not render");
+
+    expect(button.className).toContain("h-6");
+    expect(button.className).toContain("w-6");
+    expect(button.querySelector("svg")?.getAttribute("width")).toBe("14");
+  });
+});

package/src/components/sidebar/CompositionsTab.drag.test.tsx

@@ -40,6 +40,47 @@ function mount(onSelect = vi.fn(), onAddToTimeline = vi.fn()) {
 }
 
 describe("composition card drag", () => {
+  it("uses a cached image instead of eagerly mounting a live preview iframe", () => {
+    const { host } = mount();
+    const thumbnail = host.querySelector<HTMLImageElement>('img[src*="/thumbnail/"]');
+    expect(thumbnail).not.toBeNull();
+    expect(new URL(thumbnail?.src ?? "").searchParams.get("t")).toBe("3.00");
+    expect(host.querySelector("iframe")).toBeNull();
+  });
+
+  it("shows a fallback when the cached thumbnail fails", () => {
+    const { host } = mount();
+    const thumbnail = host.querySelector<HTMLImageElement>('img[src*="/thumbnail/"]');
+    if (!thumbnail) throw new Error("composition thumbnail did not render");
+
+    act(() => thumbnail.dispatchEvent(new Event("error")));
+
+    expect(host.textContent).toContain("Preview unavailable");
+    expect(host.querySelector('img[src*="/thumbnail/"]')).toBeNull();
+  });
+
+  it("mounts one live preview only after sustained hover and removes it on leave", () => {
+    vi.useFakeTimers();
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const { host, card } = mount();
+      act(() => {
+        card.dispatchEvent(new Event("pointerover", { bubbles: true }));
+        vi.advanceTimersByTime(300);
+      });
+      expect(host.querySelectorAll("iframe")).toHaveLength(1);
+
+      act(() => {
+        card.dispatchEvent(new Event("pointerout", { bubbles: true }));
+      });
+      expect(host.querySelector("iframe")).toBeNull();
+      expect(vi.getTimerCount()).toBe(0);
+    } finally {
+      consoleError.mockRestore();
+      vi.useRealTimers();
+    }
+  });
+
   it("keeps ordinary click navigation", () => {
     const { card, onSelect } = mount();
     act(() => card.click());

package/src/components/sidebar/CompositionsTab.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { setPreviewMediaMuted } from "../../player/lib/timelineIframeHelpers";
+import { buildCompositionThumbnailUrl } from "../../player/components/CompositionThumbnail";
 import { TIMELINE_COMPOSITION_MIME } from "../../utils/timelineCompositionDrop";
 
 interface CompositionsTabProps {
@@ -130,6 +131,8 @@ function CompCard({
 }) {
   const [hovered, setHovered] = useState(false);
   const [stageSize, setStageSize] = useState(DEFAULT_PREVIEW_STAGE);
+  const [livePreviewLoaded, setLivePreviewLoaded] = useState(false);
+  const [thumbnailFailed, setThumbnailFailed] = useState(false);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const syncTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -158,10 +161,21 @@ function CompCard({
       clearTimeout(hoverTimer.current);
       hoverTimer.current = null;
     }
+    if (syncTimer.current) {
+      clearTimeout(syncTimer.current);
+      syncTimer.current = null;
+    }
     setHovered(false);
+    setLivePreviewLoaded(false);
   };
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
   const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
+  const thumbnailUrl = buildCompositionThumbnailUrl({
+    previewUrl,
+    seekTime: THUMBNAIL_SEEK_TIME_SECONDS,
+    duration: 0,
+    origin: window.location.origin,
+  });
   const previewScale = resolveCompositionPreviewScale({
     cardWidth: CARD_W,
     cardHeight: CARD_H,
@@ -172,7 +186,7 @@ function CompCard({
   const thumbnailOffsetY = (CARD_H - stageSize.height * previewScale) / 2;
 
   useEffect(() => {
-    requestIframePlaybackSync(hovered);
+    if (hovered) requestIframePlaybackSync(true);
   }, [hovered, requestIframePlaybackSync]);
 
   useEffect(() => {
@@ -216,36 +230,56 @@ function CompCard({
       }`}
     >
       <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
-        <iframe
-          ref={iframeRef}
-          src={previewUrl}
-          sandbox="allow-scripts allow-same-origin"
-          loading="lazy"
-          className="absolute border-none pointer-events-none"
-          style={{
-            transformOrigin: "0 0",
-            width: stageSize.width,
-            height: stageSize.height,
-            left: thumbnailOffsetX,
-            top: thumbnailOffsetY,
-            transform: `scale(${previewScale})`,
-          }}
-          onLoad={(e) => {
-            try {
-              const iframe = e.currentTarget;
-              const root = iframe.contentDocument?.querySelector("[data-composition-id]");
-              const width = Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
-              const height =
-                Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
-              setStageSize({ width, height });
-              requestIframePlaybackSync(hovered);
-            } catch {
-              setStageSize(DEFAULT_PREVIEW_STAGE);
-            }
-          }}
-          title={`${name} preview`}
-          tabIndex={-1}
-        />
+        {thumbnailFailed ? (
+          <div className="absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600">
+            Preview unavailable
+          </div>
+        ) : (
+          <img
+            src={thumbnailUrl}
+            alt=""
+            draggable={false}
+            loading="lazy"
+            decoding="async"
+            onError={() => setThumbnailFailed(true)}
+            className={`absolute inset-0 h-full w-full object-contain transition-opacity ${
+              livePreviewLoaded ? "opacity-0" : "opacity-100"
+            }`}
+          />
+        )}
+        {hovered && (
+          <iframe
+            ref={iframeRef}
+            src={previewUrl}
+            sandbox="allow-scripts allow-same-origin"
+            className="absolute border-none pointer-events-none"
+            style={{
+              transformOrigin: "0 0",
+              width: stageSize.width,
+              height: stageSize.height,
+              left: thumbnailOffsetX,
+              top: thumbnailOffsetY,
+              transform: `scale(${previewScale})`,
+            }}
+            onLoad={(e) => {
+              try {
+                const iframe = e.currentTarget;
+                const root = iframe.contentDocument?.querySelector("[data-composition-id]");
+                const width =
+                  Number(root?.getAttribute("data-width")) || DEFAULT_PREVIEW_STAGE.width;
+                const height =
+                  Number(root?.getAttribute("data-height")) || DEFAULT_PREVIEW_STAGE.height;
+                setStageSize({ width, height });
+                setLivePreviewLoaded(true);
+                requestIframePlaybackSync(true);
+              } catch {
+                setStageSize(DEFAULT_PREVIEW_STAGE);
+              }
+            }}
+            title={`${name} preview`}
+            tabIndex={-1}
+          />
+        )}
       </div>
       <div
         className="min-w-0 flex-1"
@@ -283,7 +317,10 @@ function CompCard({
             e.stopPropagation();
             onRender();
           }}
-          className={`flex-shrink-0 p-1 rounded transition-colors ${
+          // h-6 w-6 = the 24x24 WCAG 2.2 (2.5.8) minimum target; the 14px glyph
+          // is unchanged, only the box grows. The sibling "+" button is h-8 w-8,
+          // so the card row already has the room.
+          className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors ${
             isRendering
               ? "text-neutral-600 cursor-not-allowed"
               : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"
@@ -331,7 +368,7 @@ export const CompositionsTab = memo(function CompositionsTab({
     <div className="flex-1 overflow-y-auto">
       {compositions.map((comp) => (
         <CompCard
-          key={comp}
+          key={`${projectId}:${comp}`}
           projectId={projectId}
           comp={comp}
           isActive={activeComposition === comp}

package/src/hooks/gsapDragCommit.ts

@@ -12,7 +12,7 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeKeyframes";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3 } from "../utils/rounding";
-import { computeElementPercentage, idSelector } from "./gsapShared";
+import { computeElementPercentage, idSelector, writeTargetSelector } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
 import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction";
@@ -44,6 +44,23 @@ export interface GsapDragCommitCallbacks {
   fetchAnimations?: () => Promise<GsapAnimation[]>;
 }
 
+/**
+ * The target for a tween these helpers are about to CREATE. Callers derive
+ * `selector` with `selectorFromSelection`, which hands back a bare class for an
+ * id-less element: authoring that widens a one-element drag/resize/rotate into a
+ * write over every sibling sharing the class. Retargets of an EXISTING tween
+ * must NOT come through here (they keep `anim.targetSelector`, so a tween the
+ * author aimed at a group stays aimed at it).
+ *
+ * Null means no one-element form exists, and every caller drops the commit
+ * rather than falling back to `selector` (see writeTargetSelector): the drag
+ * reverts on the next reload, which is recoverable, where a `.group` write is
+ * not.
+ */
+function newTweenTarget(selection: DomEditSelection): string | null {
+  return writeTargetSelector(selection);
+}
+
 // Re-export for backward compatibility with existing imports.
 export function computeCurrentPercentage(
   selection: DomEditSelection,
@@ -65,17 +82,18 @@ export function parkPlayheadOnKeyframe(anim: GsapAnimation, pct: number): void {
 
 async function replaceKeyframedPositionHold(
   selection: DomEditSelection,
-  selector: string,
   existingSet: GsapAnimation,
   properties: { x: number; y: number },
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
 ): Promise<void> {
+  const target = newTweenTarget(selection);
+  if (!target) return;
   const persist = async (commit: GsapDragCommitCallbacks["commitMutation"]) => {
     await commit(
       selection,
       {
         type: "add",
-        targetSelector: selector,
+        targetSelector: target,
         method: "set",
         position: 0,
         properties,
@@ -174,7 +192,6 @@ export async function commitStaticGsapPosition(
       // least one hold on disk, then delete the corrupt tween in one transaction.
       await replaceKeyframedPositionHold(
         selection,
-        selector,
         existingSet,
         { x: newX, y: newY },
         callbacks.commitMutation,
@@ -199,11 +216,15 @@ export async function commitStaticGsapPosition(
   }
   // 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).
+  // The patch reuses the WRITTEN target so the runtime moves exactly the element
+  // the source write names.
+  const target = newTweenTarget(selection);
+  if (!target) return;
   await callbacks.commitMutation(
     selection,
     {
       type: "add",
-      targetSelector: selector,
+      targetSelector: target,
       method: "set",
       position: 0,
       properties: { x: newX, y: newY },
@@ -212,7 +233,10 @@ export async function commitStaticGsapPosition(
     {
       label: "Move layer",
       softReload: true,
-      instantPatch: { selector, change: { kind: "global-set", props: { x: newX, y: newY } } },
+      instantPatch: {
+        selector: target,
+        change: { kind: "global-set", props: { x: newX, y: newY } },
+      },
     },
   );
 }
@@ -252,11 +276,13 @@ export async function commitStaticGsapRotation(
     return;
   }
   // New static hold → off-timeline `gsap.set` (no 0% keyframe marker) + instant patch.
+  const target = newTweenTarget(selection);
+  if (!target) return;
   await callbacks.commitMutation(
     selection,
     {
       type: "add",
-      targetSelector: selector,
+      targetSelector: target,
       method: "set",
       position: 0,
       properties: { rotation: newRotation },
@@ -265,7 +291,10 @@ export async function commitStaticGsapRotation(
     {
       label: "Rotate layer",
       softReload: true,
-      instantPatch: { selector, change: { kind: "global-set", props: { rotation: newRotation } } },
+      instantPatch: {
+        selector: target,
+        change: { kind: "global-set", props: { rotation: newRotation } },
+      },
     },
   );
 }
@@ -301,11 +330,13 @@ export async function commitStaticGsapSize(
     );
     return;
   }
+  const target = newTweenTarget(selection);
+  if (!target) return;
   await callbacks.commitMutation(
     selection,
     {
       type: "add",
-      targetSelector: selector,
+      targetSelector: target,
       method: "set",
       position: 0,
       properties: { width, height },
@@ -389,11 +420,13 @@ export async function commitKeyframedSizeFromResize(
   // transport applies both in one ordered batch; a plain commit fallback keeps the
   // same recoverable ordering. Only the transaction's result triggers the reload.
   const addLabel = `Resize (size keyframe ${pct.toFixed(0)}%)`;
+  const target = newTweenTarget(selection);
+  if (!target) return false;
   await callbacks.commitMutation(
     selection,
     {
       type: "add-with-keyframes",
-      targetSelector: selector,
+      targetSelector: target,
       position: roundTo3(ts),
       duration: roundTo3(td),
       keyframes,

package/src/hooks/gsapDragStaticSetHelpers.ts

@@ -1,6 +1,6 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { RuntimeTweenChange, SetPatchProps } from "./gsapRuntimePatch";
-import { isInstantHold } from "./gsapShared";
+import { isInstantHold, tweenTargetsElement } from "./gsapShared";
 
 /** The shape of an `update-property` mutation a static-set nudge POSTs. */
 interface UpdatePropertyMutation {
@@ -34,12 +34,13 @@ export function setPatchFromUpdateProperty(
 function findPositionSetAnimation(
   animations: GsapAnimation[],
   selector: string,
+  element?: Element | null,
 ): GsapAnimation | null {
   return (
     animations.find(
       (a) =>
         a.method === "set" &&
-        a.targetSelector === selector &&
+        tweenTargetsElement(a.targetSelector, selector, element) &&
         ("x" in a.properties || "y" in a.properties),
     ) ?? null
   );
@@ -61,12 +62,16 @@ function findPositionSetAnimation(
 export function findExistingPositionWrite(
   animations: GsapAnimation[],
   selector: string,
+  element?: Element | null,
 ): GsapAnimation | null {
-  const set = findPositionSetAnimation(animations, selector);
+  const set = findPositionSetAnimation(animations, selector, element);
   if (set) return set;
   return (
     animations.find(
-      (a) => a.targetSelector === selector && a.propertyGroup === "position" && isInstantHold(a),
+      (a) =>
+        tweenTargetsElement(a.targetSelector, selector, element) &&
+        a.propertyGroup === "position" &&
+        isInstantHold(a),
     ) ?? null
   );
 }
@@ -74,10 +79,14 @@ export function findExistingPositionWrite(
 export function findRotationSetAnimation(
   animations: GsapAnimation[],
   selector: string,
+  element?: Element | null,
 ): GsapAnimation | null {
   return (
     animations.find(
-      (a) => isInstantHold(a) && a.targetSelector === selector && "rotation" in a.properties,
+      (a) =>
+        isInstantHold(a) &&
+        tweenTargetsElement(a.targetSelector, selector, element) &&
+        "rotation" in a.properties,
     ) ?? null
   );
 }
@@ -85,12 +94,13 @@ export function findRotationSetAnimation(
 export function findSizeSetAnimation(
   animations: GsapAnimation[],
   selector: string,
+  element?: Element | null,
 ): GsapAnimation | null {
   return (
     animations.find(
       (a) =>
         isInstantHold(a) &&
-        a.targetSelector === selector &&
+        tweenTargetsElement(a.targetSelector, selector, element) &&
         ("width" in a.properties || "height" in a.properties),
     ) ?? null
   );

package/src/hooks/gsapKeyframeCacheHelpers.test.ts

@@ -276,6 +276,69 @@ describe("updateKeyframeCacheFromParsed", () => {
     expect(usePlayerStore.getState().gsapAnimations.get("scene.html#box")).toEqual([animation]);
   });
 
+  // `#stat3 .block` animates the BLOCK inside #stat3, not #stat3. An unanchored
+  // `^#([\w-]+)/` prefix match filed it under "stat3", which both stole the
+  // child's diamonds and collided with #stat3's own tween at the shared
+  // percentage (dropping #stat3's ease as ambiguous).
+  it("attributes a descendant selector to the child, not to its ancestor", () => {
+    const parent: GsapAnimation = {
+      id: "stat3-fromTo",
+      targetSelector: "#stat3",
+      method: "fromTo",
+      position: 8.88,
+      resolvedStart: 8.88,
+      duration: 0.25,
+      fromProperties: { y: 20 },
+      properties: { y: 0 },
+      ease: "power2.out",
+      propertyGroup: "position",
+    };
+    const child: GsapAnimation = {
+      id: "block-from",
+      targetSelector: "#stat3 .block",
+      method: "from",
+      position: 9.13,
+      resolvedStart: 9.13,
+      duration: 0.3,
+      properties: { opacity: 0 },
+      ease: "power2.in",
+      propertyGroup: "visual",
+    };
+    usePlayerStore.setState({
+      elements: [
+        { id: "stat3-clip", domId: "stat3", tag: "div", start: 8.88, duration: 1, track: 0 },
+      ],
+    });
+    const doc = {
+      querySelectorAll: (selector: string) =>
+        (selector === "#stat3 .block"
+          ? [{ id: "stat3-block" }]
+          : []) as unknown as NodeListOf<Element>,
+    } as unknown as Document;
+
+    updateKeyframeCacheFromParsed([parent, child], "scene.html", "stat3", {}, doc);
+
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#stat3")).toEqual([parent]);
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#stat3-block")).toEqual([child]);
+    // With the collision gone, #stat3's own curve survives instead of being
+    // deleted as an ambiguous same-percentage merge.
+    const parentKeyframes = cache().get("scene.html#stat3")?.keyframes ?? [];
+    expect(parentKeyframes.at(-1)?.ease).toBe("power2.out");
+    expect(parentKeyframes.some((keyframe) => "easeAmbiguous" in keyframe)).toBe(false);
+  });
+
+  it("attributes a descendant selector to nothing when there is no document", () => {
+    const child: GsapAnimation = {
+      ...animWithKeyframes("block-from"),
+      targetSelector: "#stat3 .block",
+    };
+
+    updateKeyframeCacheFromParsed([child], "scene.html", "stat3", {});
+
+    expect(cache().has("scene.html#stat3")).toBe(false);
+    expect(usePlayerStore.getState().gsapAnimations.has("scene.html#stat3")).toBe(false);
+  });
+
   it("does not cache a flat tween without animatable numeric properties", () => {
     const animation: GsapAnimation = {
       id: "flat-box",