@hyperframes/studio 0.7.6 → 0.7.7

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

@@ -63,6 +63,7 @@ export interface DomEditActionsValue extends Pick<
   | "commitMutation"
   | "applyMarqueeSelection"
   | "handleUpdateKeyframeEase"
+  | "handleSetAllKeyframeEases"
 > {}
 
 export interface DomEditSelectionValue extends Pick<
@@ -171,6 +172,7 @@ export function DomEditProvider({
     commitMutation,
     applyMarqueeSelection,
     handleUpdateKeyframeEase,
+    handleSetAllKeyframeEases,
   },
   children,
 }: {
@@ -244,6 +246,7 @@ export function DomEditProvider({
       commitMutation: stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleSetAllKeyframeEases,
     }),
     [
       handleTimelineElementSelect,
@@ -303,6 +306,7 @@ export function DomEditProvider({
       stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleSetAllKeyframeEases,
     ],
   );
 

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";
@@ -342,6 +346,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 = {

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -252,14 +252,26 @@ export function resolveRuntimeTween(
   return channelMatch ?? first;
 }
 
+/** Whether a read carries at least one of `channels` as a keyframe property. */
+function readCarriesChannel(read: ReadTween, channels: string[]): boolean {
+  return read.keyframes.some((kf) => channels.some((c) => kf.properties[c] != null));
+}
+
 /**
  * Read keyframes (incl. motionPath arcs) for one selector from the live timeline.
  * Returns tween-relative percentages; callers convert to clip-relative.
+ *
+ * `requireChannels` restricts the scan to tweens whose read carries one of those
+ * properties — e.g. the motion-path overlay passes `["x","y"]` so it never picks
+ * up a co-located size/scale tween (which has no x/y and would blank the path
+ * whenever the playhead sits in that tween's range but outside the position
+ * tween's). Omitted → any keyframed tween qualifies (back-compat).
  */
 export function readRuntimeKeyframes(
   iframe: HTMLIFrameElement | null,
   selector: string,
   compositionId?: string,
+  requireChannels?: string[],
 ): ReadTween | null {
   const timelines = timelinesOf(iframe);
   if (!timelines) return null;
@@ -299,6 +311,7 @@ export function readRuntimeKeyframes(
       if (isZeroDurationSet(dur)) continue; // skip hold/set tweens (see isZeroDurationSet)
       const read = readTween(tween.vars);
       if (!read) continue;
+      if (requireChannels && !readCarriesChannel(read, requireChannels)) continue;
       if (firstRead === null) firstRead = read;
       // Prefer the tween whose [start, start+dur] contains the playhead.
       if (now != null) {

package/src/hooks/useDomEditSession.ts

@@ -410,6 +410,25 @@ export function useDomEditSession({
     [gsapCommitMutation, domEditSelectionRef],
   );
 
+  // Apply one ease to every segment at once (AE select-all + F9): set easeEach
+  // and strip per-keyframe overrides in a single mutation.
+  const handleSetAllKeyframeEases = useCallback(
+    (animationId: string, ease: string) => {
+      const sel = domEditSelectionRef.current;
+      if (!sel) return;
+      gsapCommitMutation(
+        sel,
+        {
+          type: "update-meta",
+          animationId,
+          updates: { easeEach: ease, resetKeyframeEases: true },
+        },
+        { label: "Apply ease to all segments", softReload: true },
+      );
+    },
+    [gsapCommitMutation, domEditSelectionRef],
+  );
+
   return {
     // State
     domEditSelection,
@@ -477,6 +496,7 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     handleUpdateKeyframeEase,
+    handleSetAllKeyframeEases,
     commitAnimatedProperty,
     handleSetArcPath,
     handleUpdateArcSegment,

package/src/hooks/useDomEditWiring.ts

@@ -197,6 +197,9 @@ export function useDomEditWiring({
       ? { id: domEditSelection.id ?? null, selector: domEditSelection.selector ?? null }
       : null,
     gsapCacheVersion,
+    // Pass the preview iframe so class/selector tweens (e.g. `.dot`) resolve to
+    // the live element and surface in the inspector — not just by #id match.
+    previewIframeRef,
   );
 
   // ── Telemetry & fallback ──

package/src/hooks/useGestureCommit.ts

@@ -3,7 +3,6 @@
  * Extracted from App.tsx to keep file sizes under the 600-line limit.
  */
 import { useState, useCallback, useRef, useEffect } from "react";
-import { editLog } from "../utils/editDebugLog";
 import { useGestureRecording } from "./useGestureRecording";
 import { simplifyGestureSamples } from "../utils/rdpSimplify";
 import { fitEasesFromVelocity } from "../utils/velocityEaseFitter";
@@ -294,9 +293,6 @@ export function useGestureCommit({
 
   // fallow-ignore-next-line complexity
   const handleToggleRecording = useCallback(() => {
-    editLog("gesture", gestureStateRef.current === "recording" ? "stop" : "start", {
-      id: domEditSessionRef.current.domEditSelection?.id,
-    });
     if (gestureStateRef.current === "recording") {
       void stopAndCommitRecording();
       return;

package/src/hooks/useGsapAwareEditing.ts

@@ -8,7 +8,6 @@
  * from the rest of the editing orchestration.
  */
 import { useCallback } from "react";
-import { editLog } from "../utils/editDebugLog";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import {
@@ -97,7 +96,6 @@ export function useGsapAwareEditing({
       next: { x: number; y: number },
       modifiers?: { altKey?: boolean },
     ) => {
-      editLog("manual-drag:move", { id: selection.id, next, altKey: modifiers?.altKey });
       if (gsapCommitMutation) {
         try {
           await tryGsapDragIntercept(
@@ -126,7 +124,6 @@ export function useGsapAwareEditing({
 
   const handleGsapAwareBoxSizeCommit = useCallback(
     async (selection: DomEditSelection, next: { width: number; height: number }) => {
-      editLog("manual-drag:resize", { id: selection.id, next });
       if (gsapCommitMutation) {
         try {
           const handled = await tryGsapResizeIntercept(
@@ -157,7 +154,6 @@ export function useGsapAwareEditing({
 
   const handleGsapAwareRotationCommit = useCallback(
     async (selection: DomEditSelection, next: { angle: number }) => {
-      editLog("manual-drag:rotate", { id: selection.id, next });
       if (gsapCommitMutation) {
         try {
           // Single source of truth for rotation too: tryGsapRotationIntercept handles

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/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([]);
+  });
 });