@hyperframes/studio 0.7.6 → 0.7.8

package/src/hooks/useGsapScriptCommits.ts

@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useRef } from "react";
-import { editLog } from "../utils/editDebugLog";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { applySoftReload, extractGsapScriptText } from "../utils/gsapSoftReload";
@@ -130,12 +129,6 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
   const runCommit = useCallback(async (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
     const pid = projectIdRef.current;
     if (!pid) return;
-    editLog("gsap-commit", {
-      type: mutation.type,
-      id: selection.id,
-      file: selection.sourceFile || activeCompPath,
-      label: options.label,
-    });
     const unsafeFields = findUnsafeMutationValues(mutation);
     if (unsafeFields.length > 0) {
       showToast?.("Couldn't read element layout — try again at a different playhead time", "error");
@@ -165,11 +158,6 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     options.beforeReload?.();
     applyPreviewSync(previewIframeRef.current, result, options, reloadPreview);
     onCacheInvalidate();
-    editLog("gsap-commit:done", {
-      type: mutation.type,
-      changed: result.changed,
-      instant: Boolean(options.instantPatch),
-    });
   }, [projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, forceReloadSdkSession]);
   // 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,

package/src/hooks/useGsapSelectionHandlers.ts

@@ -76,6 +76,7 @@ export function useGsapSelectionHandlers({
     sel: DomEditSelection,
     animId: string,
     resolvedFromValues?: Record<string, number | string>,
+    duration?: number,
   ) => Promise<void>;
   removeAllKeyframes: (sel: DomEditSelection, animId: string) => void;
 
@@ -229,16 +230,18 @@ export function useGsapSelectionHandlers({
   );
 
   const handleGsapConvertToKeyframes = useCallback(
-    (animId: string, resolvedFromValues?: Record<string, number | string>) => {
+    (animId: string, resolvedFromValues?: Record<string, number | string>, duration?: number) => {
       if (!domEditSelection) return Promise.resolve();
-      return convertToKeyframes(domEditSelection, animId, resolvedFromValues).catch((error) => {
-        trackGsapHandlerFailure(
-          error,
-          domEditSelection,
-          "convert-to-keyframes",
-          "Convert to keyframes",
-        );
-      });
+      return convertToKeyframes(domEditSelection, animId, resolvedFromValues, duration).catch(
+        (error) => {
+          trackGsapHandlerFailure(
+            error,
+            domEditSelection,
+            "convert-to-keyframes",
+            "Convert to keyframes",
+          );
+        },
+      );
     },
     [domEditSelection, convertToKeyframes, trackGsapHandlerFailure],
   );

package/src/hooks/useGsapTweenCache.test.ts

@@ -1,6 +1,13 @@
 import { describe, it, expect } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
-import { getAnimationsForElement } from "./useGsapTweenCache";
+import { getAnimationsForElement, resolveSelectorElementIds } from "./useGsapTweenCache";
+
+// Minimal Document stub: querySelectorAll returns the elements mapped per selector.
+function fakeDoc(map: Record<string, { id: string }[]>): Document {
+  return {
+    querySelectorAll: (sel: string) => (map[sel] ?? []) as unknown as NodeListOf<Element>,
+  } as unknown as Document;
+}
 
 function anim(targetSelector: string): GsapAnimation {
   return {
@@ -46,4 +53,41 @@ describe("getAnimationsForElement", () => {
     expect(getAnimationsForElement(grouped, { selector: ".clock-hand" })).toHaveLength(1);
     expect(getAnimationsForElement(grouped, { selector: ".unrelated" })).toHaveLength(0);
   });
+
+  it("attributes a class tween to an id-selected element via element.matches", () => {
+    // gsap.from(".dot", {stagger}) — the element is selected by id (#dot-a), so
+    // its selector string never equals ".dot", but the live element matches it.
+    const dots = [anim(".dot")];
+    const el = { matches: (s: string) => s === ".dot" || s === "#dot-a" } as unknown as Element;
+    expect(getAnimationsForElement(dots, { id: "dot-a", selector: "#dot-a" }, el)).toHaveLength(1);
+    // Without the live element the class tween is still missed (legacy behavior).
+    expect(getAnimationsForElement(dots, { id: "dot-a", selector: "#dot-a" })).toHaveLength(0);
+  });
+
+  it("element.matches gates attribution — no over-matching", () => {
+    const dots = [anim(".dot")];
+    const el = { matches: () => false } as unknown as Element;
+    expect(getAnimationsForElement(dots, { id: "other", selector: "#other" }, el)).toHaveLength(0);
+  });
+});
+
+describe("resolveSelectorElementIds", () => {
+  it("resolves a bare #id without touching the DOM", () => {
+    expect(resolveSelectorElementIds("#hero", null)).toEqual(["hero"]);
+  });
+
+  it("resolves a class selector to every matching element id (the .dot+stagger case)", () => {
+    const doc = fakeDoc({ ".dot": [{ id: "dot-a" }, { id: "dot-b" }] });
+    expect(resolveSelectorElementIds(".dot", doc)).toEqual(["dot-a", "dot-b"]);
+  });
+
+  it("resolves a group selector across its parts (deduped)", () => {
+    const doc = fakeDoc({ ".a": [{ id: "x" }], ".b": [{ id: "y" }, { id: "x" }] });
+    expect(resolveSelectorElementIds(".a, .b", doc).sort()).toEqual(["x", "y"]);
+  });
+
+  it("falls back to a leading #id when there is no DOM", () => {
+    expect(resolveSelectorElementIds("#card .label", null)).toEqual(["card"]);
+    expect(resolveSelectorElementIds(".dot", null)).toEqual([]);
+  });
 });

package/src/hooks/useGsapTweenCache.ts

@@ -27,10 +27,12 @@ function deduplicateKeyframes(keyframes: GsapPercentageKeyframe[]): GsapPercenta
 // fallow-ignore-next-line complexity
 function synthesizeFlatTweenKeyframes(anim: GsapAnimation): GsapKeyframesData | null {
   if (anim.method === "set") {
-    return {
-      format: "percentage",
-      keyframes: [{ percentage: 0, properties: { ...anim.properties } }],
-    };
+    // A `set` is a STATIC HOLD — a value applied at one point, not an animated
+    // keyframe. It must NOT synthesize a keyframe, or the timeline + panel show a
+    // phantom diamond for a value that doesn't animate. This holds for a base
+    // `gsap.set` (off-timeline) AND an on-timeline `tl.set`, and aligns the AST
+    // path with the runtime scan, which already skips every zero-duration set.
+    return null;
   }
   const toProps = anim.properties;
   const fromProps = anim.fromProperties;
@@ -69,6 +71,41 @@ function extractIdFromSelector(selector: string): string | null {
   return match ? match[1] : null;
 }
 
+/**
+ * Resolve a tween's target selector to the ids of the element(s) it animates.
+ * A bare `#id` resolves directly; anything else (a class like `.dot`, a group
+ * `.a, .b`, or a descendant selector) is matched against the live preview DOM so
+ * class/selector tweens (e.g. `gsap.from(".dot", {stagger})`) attribute to every
+ * element they animate — not just one parsed from the string. Falls back to a
+ * leading `#id` when there's no DOM (so the cache still populates pre-iframe).
+ */
+// fallow-ignore-next-line complexity
+export function resolveSelectorElementIds(
+  selector: string,
+  doc: Document | null | undefined,
+): string[] {
+  const bareId = selector.match(/^#([\w-]+)$/);
+  if (bareId) return [bareId[1]];
+  if (!doc) {
+    const lead = extractIdFromSelector(selector);
+    return lead ? [lead] : [];
+  }
+  const ids = new Set<string>();
+  for (const part of selector.split(",")) {
+    const sel = part.trim();
+    if (!sel) continue;
+    try {
+      for (const el of Array.from(doc.querySelectorAll(sel))) {
+        if (el.id) ids.add(el.id);
+      }
+    } catch {
+      const lead = extractIdFromSelector(sel);
+      if (lead) ids.add(lead);
+    }
+  }
+  return Array.from(ids);
+}
+
 /** The selected element's identity for matching tweens to it. */
 export interface GsapElementTarget {
   id?: string | null;
@@ -82,21 +119,37 @@ export interface GsapElementTarget {
  * (`.clock-face, .clock-hand`, emitted for array/`toArray` targets). Real
  * compositions target tweens by class via `querySelector`, so id-only matching
  * misses them.
+ *
+ * When the live DOM `element` is supplied, each comma-part of a tween's selector
+ * is also tested with `element.matches(part)` — true CSS semantics — so a
+ * class/descendant tween shared across elements (e.g. `gsap.from(".dot", {stagger})`)
+ * is attributed to *every* matching element, not just the one whose exact
+ * selector string happens to equal the tween's.
  */
 export function getAnimationsForElement(
   animations: GsapAnimation[],
   target: GsapElementTarget,
+  element?: Element | null,
 ): GsapAnimation[] {
   const matchers = new Set<string>();
   if (target.id) matchers.add(`#${target.id}`);
   if (target.selector) matchers.add(target.selector);
-  if (matchers.size === 0) return [];
+  if (matchers.size === 0 && !element) return [];
   return animations.filter((a) =>
     a.targetSelector.split(",").some((part) => {
       const trimmed = part.trim();
+      if (!trimmed) return false;
       if (matchers.has(trimmed)) return true;
       const lastSimple = trimmed.split(/\s+/).pop();
-      return lastSimple ? matchers.has(lastSimple) : false;
+      if (lastSimple && matchers.has(lastSimple)) return true;
+      if (element) {
+        try {
+          if (element.matches(trimmed)) return true;
+        } catch {
+          /* tween selector isn't a valid CSS selector for matches() — skip */
+        }
+      }
+      return false;
     }),
   );
 }
@@ -199,13 +252,30 @@ export function useGsapAnimationsForElement(
 
   const targetId = target?.id ?? null;
   const targetSelector = target?.selector ?? null;
-  const rawAnimations = useMemo(
-    () =>
-      targetId || targetSelector
-        ? getAnimationsForElement(allAnimations, { id: targetId, selector: targetSelector })
-        : [],
-    [allAnimations, targetId, targetSelector],
-  );
+  const rawAnimations = useMemo(() => {
+    if (!targetId && !targetSelector) return [];
+    // Resolve the live element so class / descendant tweens (e.g.
+    // gsap.from(".dot", {stagger})) attribute to every matching element, not
+    // just the one whose exact selector equals the tween's. `version` re-runs
+    // this after composition reloads.
+    let element: Element | null = null;
+    const doc = iframeRef?.current?.contentDocument;
+    if (doc) {
+      try {
+        element =
+          (targetId ? doc.getElementById(targetId) : null) ??
+          (targetSelector ? doc.querySelector(targetSelector) : null);
+      } catch {
+        element = null;
+      }
+    }
+    return getAnimationsForElement(
+      allAnimations,
+      { id: targetId, selector: targetSelector },
+      element,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allAnimations, targetId, targetSelector, version, iframeRef]);
 
   // fallow-ignore-next-line complexity
   const animations = useMemo(() => {
@@ -327,7 +397,14 @@ export function useGsapAnimationsForElement(
       if (kf.easeEach) easeEach = kf.easeEach;
     }
     if (allKeyframes.length === 0) {
-      clearKeyframeCacheForElement(sourceFile, elementId);
+      // The per-element parsed-animation match can transiently miss class /
+      // selector tweens (e.g. `.dot`) that the file-wide populate or runtime
+      // scan already cached. Only clear when no source cached this element —
+      // otherwise selecting it would wipe its diamonds.
+      const { keyframeCache } = usePlayerStore.getState();
+      const hasCached =
+        keyframeCache.has(`${sourceFile}#${elementId}`) || keyframeCache.has(elementId);
+      if (!hasCached) clearKeyframeCacheForElement(sourceFile, elementId);
       return;
     }
     const dedupedKeyframes = deduplicateKeyframes(allKeyframes);
@@ -385,10 +462,9 @@ export function usePopulateKeyframeCacheForFile(
       const { setKeyframeCache } = usePlayerStore.getState();
       clearKeyframeCacheForFile(sf);
       const { elements } = usePlayerStore.getState();
+      const doc = iframeRef?.current?.contentDocument;
       const mergedByElement = new Map<string, GsapKeyframesData>();
       for (const anim of parsed.animations) {
-        const id = extractIdFromSelector(anim.targetSelector);
-        if (!id) continue;
         if (anim.hasUnresolvedKeyframes) continue;
         // Position-only set tweens are static holds (created by drag), not
         // keyframed animations — skip them so they don't show timeline diamonds.
@@ -403,32 +479,36 @@ export function usePopulateKeyframeCacheForFile(
         const tweenPos =
           anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
         const tweenDur = anim.duration ?? 1;
-        const timelineEl = elements.find(
-          (el) => el.domId === id || (el.key ?? el.id) === `${sf}#${id}`,
-        );
-        const elStart = timelineEl?.start ?? 0;
-        const elDuration = timelineEl?.duration ?? 1;
-        const clipKeyframes = kfData.keyframes.map((kf) => {
-          const absTime = toAbsoluteTime(tweenPos, tweenDur, kf.percentage);
-          // 0.001% precision (matching useGsapAnimationsForElement above) so a
-          // beat-snapped keyframe centers exactly on the beat dot and the two
-          // caches agree on a keyframe's percentage.
-          const clipPct =
-            elDuration > 0
-              ? Math.round(((absTime - elStart) / elDuration) * 100000) / 1000
-              : kf.percentage;
-          return {
-            ...kf,
-            percentage: clipPct,
-            tweenPercentage: kf.percentage,
-            propertyGroup: anim.propertyGroup,
-          };
-        });
-        const existing = mergedByElement.get(id);
-        if (existing) {
-          existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
-        } else {
-          mergedByElement.set(id, { ...kfData, keyframes: clipKeyframes });
+        // Attribute the tween to every element it animates (handles class /
+        // group / descendant selectors, not just `#id`).
+        for (const id of resolveSelectorElementIds(anim.targetSelector, doc)) {
+          const timelineEl = elements.find(
+            (el) => el.domId === id || (el.key ?? el.id) === `${sf}#${id}`,
+          );
+          const elStart = timelineEl?.start ?? 0;
+          const elDuration = timelineEl?.duration ?? 1;
+          const clipKeyframes = kfData.keyframes.map((kf) => {
+            const absTime = toAbsoluteTime(tweenPos, tweenDur, kf.percentage);
+            // 0.001% precision (matching useGsapAnimationsForElement above) so a
+            // beat-snapped keyframe centers exactly on the beat dot and the two
+            // caches agree on a keyframe's percentage.
+            const clipPct =
+              elDuration > 0
+                ? Math.round(((absTime - elStart) / elDuration) * 100000) / 1000
+                : kf.percentage;
+            return {
+              ...kf,
+              percentage: clipPct,
+              tweenPercentage: kf.percentage,
+              propertyGroup: anim.propertyGroup,
+            };
+          });
+          const existing = mergedByElement.get(id);
+          if (existing) {
+            existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
+          } else {
+            mergedByElement.set(id, { ...kfData, keyframes: clipKeyframes });
+          }
         }
       }
       for (const [id, kfData] of mergedByElement) {
@@ -441,6 +521,9 @@ export function usePopulateKeyframeCacheForFile(
     // elementCount is in the deps because new timeline elements (e.g. after a
     // sub-composition expand) need their keyframe cache populated immediately;
     // without it the effect won't re-run when elements appear/disappear.
+    // iframeRef is read for DOM selector resolution but intentionally not a dep
+    // (it's a stable ref; the separate runtime-scan effect owns iframe timing).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId, sourceFile, version, elementCount]);
 
   // Separate effect for runtime keyframe discovery — polls until the iframe

package/src/hooks/useMusicBeatAnalysis.ts

@@ -92,33 +92,48 @@ export function useMusicBeatAnalysis(): void {
       return;
     }
     let cancelled = false;
-
-    let promise = analysisCache.get(musicSrc);
-    if (!promise) {
-      promise = analyzeMusicFromUrl(musicSrc);
-      cacheAnalysis(musicSrc, promise);
-    }
-
     const beatPath = beatFilePathForSrc(musicSrc);
-    promise
-      .then(async (analysis) => {
+    const io = ioRef.current;
+
+    // Only run expensive audio decode + beat analysis when the user has an
+    // explicit beats file saved. Without one, skip entirely — no surprise
+    // green lines on the timeline after dragging unrelated assets.
+    (async () => {
+      if (!beatPath || !io) return;
+      let hasSavedBeats = false;
+      try {
+        const content = await io.readOptionalProjectFile(beatPath);
+        const parsed = content ? parseBeats(content) : null;
+        hasSavedBeats = !!(parsed && parsed.times.length > 0);
+      } catch {
+        /* no file */
+      }
+      if (cancelled) return;
+      if (!hasSavedBeats) {
+        setBeatAnalysis(null);
+        return;
+      }
+
+      let promise = analysisCache.get(musicSrc);
+      if (!promise) {
+        promise = analyzeMusicFromUrl(musicSrc);
+        cacheAnalysis(musicSrc, promise);
+      }
+      try {
+        const analysis = await promise;
         const detected = { times: analysis.beatTimes, strengths: analysis.beatStrengths };
-        const io = ioRef.current;
-        if (!io) return;
-        const { times, strengths, hasFile } = await resolveBeats(beatPath, detected, io);
+        const { times, strengths } = await resolveBeats(beatPath, detected, io);
         if (cancelled) return;
         setBeatEdits(null);
         resetBeatHistory();
         setBeatAnalysis({ ...analysis, beatTimes: times, beatStrengths: strengths });
-        // Seed a missing file through the SAME debounced writer the edits use, so
-        // the initial write can't race a near-simultaneous edit's persist.
-        if (beatPath && !hasFile && times.length > 0) usePlayerStore.getState().beatPersist?.();
-      })
-      .catch(() => {
-        if (cancelled) return;
-        setBeatAnalysis(null);
-        analysisCache.delete(musicSrc);
-      });
+      } catch {
+        if (!cancelled) {
+          setBeatAnalysis(null);
+          analysisCache.delete(musicSrc);
+        }
+      }
+    })();
 
     return () => {
       cancelled = true;

package/src/hooks/useRazorSplit.ts

@@ -1,5 +1,4 @@
 import { useCallback, useRef } from "react";
-import { editLog } from "../utils/editDebugLog";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
@@ -120,7 +119,6 @@ async function executeSplit(
   if (!patchTarget) throw new Error("Clip is missing a patchable target.");
 
   const targetPath = element.sourceFile || activeCompPath || "index.html";
-  editLog("razor-split", { id: element.domId ?? element.id, splitTime, file: targetPath });
   const originalContent = await readFileContent(pid, targetPath);
   const newId = generateSplitId(collectHtmlIds(originalContent), element.domId || "clip");
 
@@ -134,7 +132,6 @@ async function executeSplit(
     element.duration,
   );
   if (!splitResult.ok) throw new Error("Failed to split clip.");
-  editLog("razor-split:done", { changed: splitResult.changed, newId });
   if (!splitResult.changed) {
     return { targetPath, originalContent, patchedContent: originalContent, changed: false };
   }

package/src/utils/marqueeGeometry.test.ts

@@ -1,34 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { marqueeIntersectsObb, rectsOverlap, type Point, type Rect } from "./marqueeGeometry";
-
-type Corners = [Point, Point, Point, Point];
-
-function rotateCorners(cx: number, cy: number, w: number, h: number, deg: number): Corners {
-  const rad = (deg * Math.PI) / 180;
-  const cos = Math.cos(rad);
-  const sin = Math.sin(rad);
-  const hw = w / 2;
-  const hh = h / 2;
-  const local: [number, number][] = [
-    [-hw, -hh],
-    [hw, -hh],
-    [hw, hh],
-    [-hw, hh],
-  ];
-  return local.map(([lx, ly]) => ({
-    x: cx + cos * lx - sin * ly,
-    y: cy + sin * lx + cos * ly,
-  })) as Corners;
-}
-
-function aabbCorners(r: Rect): Corners {
-  return [
-    { x: r.left, y: r.top },
-    { x: r.left + r.width, y: r.top },
-    { x: r.left + r.width, y: r.top + r.height },
-    { x: r.left, y: r.top + r.height },
-  ];
-}
+import { rectsOverlap } from "./marqueeGeometry";
 
 describe("rectsOverlap", () => {
   it("overlapping rects", () => {
@@ -48,76 +19,22 @@ describe("rectsOverlap", () => {
       ),
     ).toBe(false);
   });
-});
-
-describe("marqueeIntersectsObb", () => {
-  it("axis-aligned overlap", () => {
-    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
-    const corners = aabbCorners({ left: 50, top: 50, width: 80, height: 80 });
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
-  });
-
-  it("axis-aligned no overlap", () => {
-    const marquee: Rect = { left: 0, top: 0, width: 50, height: 50 };
-    const corners = aabbCorners({ left: 100, top: 100, width: 50, height: 50 });
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
-  });
 
-  it("marquee fully contains element", () => {
-    const marquee: Rect = { left: 0, top: 0, width: 200, height: 200 };
-    const corners = aabbCorners({ left: 50, top: 50, width: 20, height: 20 });
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
-  });
-
-  it("element fully contains marquee", () => {
-    const marquee: Rect = { left: 50, top: 50, width: 10, height: 10 };
-    const corners = aabbCorners({ left: 0, top: 0, width: 200, height: 200 });
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
-  });
-
-  it("45-degree rotated square: AABB overlaps but OBB does not", () => {
-    // 100x100 square rotated 45° centered at (200,200)
-    // Its AABB extends to ~(129,129)-(271,271)
-    // A marquee at (0,0)-(135,135) overlaps the AABB but NOT the diamond
-    const corners = rotateCorners(200, 200, 100, 100, 45);
-    const marquee: Rect = { left: 0, top: 0, width: 135, height: 135 };
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
-  });
-
-  it("45-degree rotated square: OBB overlaps", () => {
-    // Same rotated square, marquee reaches the diamond's left point
-    const corners = rotateCorners(200, 200, 100, 100, 45);
-    const marquee: Rect = { left: 0, top: 150, width: 155, height: 100 };
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
-  });
-
-  it("zero-width marquee returns false", () => {
-    const corners = aabbCorners({ left: 0, top: 0, width: 100, height: 100 });
-    expect(marqueeIntersectsObb({ left: 50, top: 50, width: 0, height: 50 }, corners)).toBe(false);
-  });
-
-  it("zero-area element returns false for degenerate OBB", () => {
-    const corners: Corners = [
-      { x: 50, y: 50 },
-      { x: 50, y: 50 },
-      { x: 50, y: 50 },
-      { x: 50, y: 50 },
-    ];
-    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
-    // Degenerate point — SAT still works (projections are zero-length intervals)
-    // A point inside the marquee should still intersect
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
-  });
-
-  it("30-degree rotated rectangle clips marquee corner", () => {
-    const corners = rotateCorners(150, 150, 200, 50, 30);
-    const marquee: Rect = { left: 0, top: 0, width: 80, height: 130 };
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  it("touching edges do not overlap", () => {
+    expect(
+      rectsOverlap(
+        { left: 0, top: 0, width: 10, height: 10 },
+        { left: 10, top: 0, width: 10, height: 10 },
+      ),
+    ).toBe(false);
   });
 
-  it("30-degree rotated rectangle misses marquee", () => {
-    const corners = rotateCorners(300, 300, 50, 50, 30);
-    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
-    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
+  it("one rect fully inside another overlaps", () => {
+    expect(
+      rectsOverlap(
+        { left: 0, top: 0, width: 100, height: 100 },
+        { left: 25, top: 25, width: 10, height: 10 },
+      ),
+    ).toBe(true);
   });
 });