@hyperframes/studio 0.7.5 → 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

@@ -61,6 +61,9 @@ export interface DomEditActionsValue extends Pick<
   | "invalidateGsapCache"
   | "previewIframeRef"
   | "commitMutation"
+  | "applyMarqueeSelection"
+  | "handleUpdateKeyframeEase"
+  | "handleSetAllKeyframeEases"
 > {}
 
 export interface DomEditSelectionValue extends Pick<
@@ -167,6 +170,9 @@ export function DomEditProvider({
     invalidateGsapCache,
     previewIframeRef,
     commitMutation,
+    applyMarqueeSelection,
+    handleUpdateKeyframeEase,
+    handleSetAllKeyframeEases,
   },
   children,
 }: {
@@ -238,6 +244,9 @@ export function DomEditProvider({
       invalidateGsapCache,
       previewIframeRef,
       commitMutation: stableCommitMutation,
+      applyMarqueeSelection,
+      handleUpdateKeyframeEase,
+      handleSetAllKeyframeEases,
     }),
     [
       handleTimelineElementSelect,
@@ -295,6 +304,9 @@ export function DomEditProvider({
       invalidateGsapCache,
       previewIframeRef,
       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/gsapDragPositionCommit.ts

@@ -165,8 +165,7 @@ async function commitFlatViaKeyframes(
         if (Number.isFinite(v)) resolvedFromValues[key] = roundTo3(v);
       }
       mainTl.seek(ct);
-    } catch (err) {
-      console.warn("[gsap-drag] start-value read failed; using identity from values", err);
+    } catch {
       for (const key of Object.keys(resolvedFromValues)) delete resolvedFromValues[key];
     } finally {
       if (Object.keys(draggedValues).length > 0) gsapLib.set(el, draggedValues);

package/src/hooks/gsapRuntimeBridge.ts

@@ -18,6 +18,7 @@ import {
   commitStaticGsapPosition,
   commitStaticGsapRotation,
   commitStaticGsapSize,
+  commitKeyframedSizeFromResize,
   commitWholePathOffset,
   computeCurrentPercentage,
   findPositionSetAnimation,
@@ -239,7 +240,9 @@ export async function tryGsapDragIntercept(
   // `tl.set("#el",{x,y})`, not a keyframe conversion: re-nudge an existing set in
   // place (idempotent), else add a new one. This also covers the stale-cache
   // phantom — committing a set is correct because the element genuinely has no live motion.
-  if (!hasNonHoldTweenForElement(iframe, selector)) {
+  const hasNonHold = hasNonHoldTweenForElement(iframe, selector);
+
+  if (!hasNonHold) {
     const existingSet =
       posAnim && posAnim.method === "set" && posAnim.targetSelector === selector
         ? posAnim
@@ -251,7 +254,9 @@ export async function tryGsapDragIntercept(
     return true;
   }
 
-  if (!posAnim) return false;
+  if (!posAnim) {
+    return false;
+  }
 
   // Verify the anim ID is still valid in the current file. The React-state
   // `animations` list can lag behind the file after a prior mutation changed
@@ -325,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/gsapRuntimeReaders.ts

@@ -115,12 +115,7 @@ export function readAllAnimatedProperties(
         }
       }
     }
-  } catch (e) {
-    console.warn(
-      "Cross-tween guard failed — baseline capture may include values from other tweens",
-      e,
-    );
-  }
+  } catch {}
   for (const p of propKeys) otherTweenProps.delete(p);
 
   // Tier 1: Transform + visual properties with universal CSS defaults.

package/src/hooks/useDomEditCommits.ts

@@ -224,10 +224,6 @@ export function useDomEditCommits({
               target_source_file: selection.sourceFile ?? undefined,
               composition: activeCompPath ?? undefined,
             });
-            console.warn(
-              `[studio] Element not found in source: ${targetKey}. ` +
-                "This element may be generated at runtime and cannot be persisted.",
-            );
           }
         }
         return;

package/src/hooks/useDomEditPreviewSync.ts

@@ -68,6 +68,11 @@ export function useDomEditPreviewSync({
 
       const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
       if (!nextElement) {
+        // The selected element no longer resolves in the (re-synced) document
+        // — comp/hot reload, activeCompPath swap, or post-save replacement.
+        // Clear so overlay geometry isn't computed on a stale, detached node.
+        // (Drag-release-in-gray-zone is handled separately by
+        // suppressNextBoxClickRef; the dragged element still resolves here.)
         applyDomSelection(null, { revealPanel: false });
         return;
       }

package/src/hooks/useDomEditSession.ts

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import type { TimelineElement } from "../player";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
@@ -123,6 +124,7 @@ export function useDomEditSession({
     buildDomSelectionForTimelineElement,
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
+    applyMarqueeSelection,
   } = useDomSelection({
     projectId,
     activeCompPath,
@@ -389,6 +391,44 @@ export function useDomEditSession({
     updateArcSegment,
   });
 
+  const handleUpdateKeyframeEase = useCallback(
+    (animationId: string, percentage: number, ease: string) => {
+      const sel = domEditSelectionRef.current;
+      if (!sel) return;
+      gsapCommitMutation(
+        sel,
+        {
+          type: "update-keyframe",
+          animationId,
+          percentage,
+          properties: {},
+          ease,
+        },
+        { label: "Update keyframe ease", softReload: true },
+      );
+    },
+    [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,
@@ -429,6 +469,7 @@ export function useDomEditSession({
     buildDomSelectionFromTarget,
     buildDomSelectionForTimelineElement,
     updateDomEditHoverSelection,
+    applyMarqueeSelection,
     resolveImportedFontAsset,
     setAgentModalOpen,
     setAgentPromptSelectionContext,
@@ -454,6 +495,8 @@ export function useDomEditSession({
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
+    handleUpdateKeyframeEase,
+    handleSetAllKeyframeEases,
     commitAnimatedProperty,
     handleSetArcPath,
     handleUpdateArcSegment,

package/src/hooks/useDomEditTextCommits.ts

@@ -126,9 +126,7 @@ export function useDomEditTextCommits({
             ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
             : undefined,
         });
-      } catch (err) {
-        console.warn("[Studio] Style persist failed:", err instanceof Error ? err.message : err);
-      }
+      } catch {}
       refreshDomEditSelectionFromPreview(domEditSelection);
     },
     [
@@ -162,9 +160,7 @@ export function useDomEditTextCommits({
           coalesceKey: `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`,
           skipRefresh: options.skipRefresh,
         });
-      } catch (err) {
-        console.warn(options.warningMessage, err instanceof Error ? err.message : err);
-      }
+      } catch {}
       if (options.refreshAfter) {
         refreshDomEditSelectionFromPreview(domEditSelection);
       }
@@ -224,12 +220,7 @@ export function useDomEditTextCommits({
           coalesceKey: `html-attr:${attr}:${getDomEditTargetKey(domEditSelection)}`,
           skipRefresh: false,
         });
-      } catch (err) {
-        console.warn(
-          "[Studio] HTML attribute persist failed:",
-          err instanceof Error ? err.message : err,
-        );
-      }
+      } catch {}
       refreshDomEditSelectionFromPreview(domEditSelection);
     },
     [

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/useDomSelection.ts

@@ -85,6 +85,7 @@ export interface UseDomSelectionReturn {
   handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
   refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
+  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
 }
 
 // ── Hook ──
@@ -419,6 +420,50 @@ export function useDomSelection({
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
 
+  const applyMarqueeSelection = useCallback(
+    // fallow-ignore-next-line complexity
+    (selections: DomEditSelection[], additive: boolean) => {
+      // Honor the inspector-panels kill switch like applyDomSelection does, so
+      // marquee can't land selections while the inspector UI is suppressed.
+      if (!STUDIO_INSPECTOR_PANELS_ENABLED) {
+        domEditSelectionRef.current = null;
+        domEditGroupSelectionsRef.current = [];
+        setDomEditSelection(null);
+        setDomEditGroupSelections([]);
+        return;
+      }
+      if (selections.length === 0) {
+        if (!additive) applyDomSelection(null, { revealPanel: false });
+        return;
+      }
+      const current = domEditSelectionRef.current;
+      const currentGroup = domEditGroupSelectionsRef.current;
+      let nextGroup: DomEditSelection[];
+      if (additive) {
+        nextGroup = seedDomEditGroupWithSelection(currentGroup, current);
+        for (const s of selections) {
+          if (!domEditSelectionInGroup(nextGroup, s)) nextGroup = [...nextGroup, s];
+        }
+      } else {
+        nextGroup = selections;
+      }
+      const nextSelection = additive && current ? current : selections[0];
+      domEditSelectionRef.current = nextSelection;
+      domEditGroupSelectionsRef.current = nextGroup;
+      setDomEditSelection(nextSelection);
+      setDomEditGroupSelections(nextGroup);
+      const nextTimelineId =
+        findMatchingTimelineElementId(nextSelection, timelineElements) ??
+        findTimelineIdByAncestor(
+          nextSelection.element,
+          timelineElements,
+          nextSelection.sourceFile || "index.html",
+        );
+      setSelectedTimelineElementId(nextTimelineId);
+    },
+    [applyDomSelection, timelineElements, setSelectedTimelineElementId],
+  );
+
   // Disabled inspector effect
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -451,5 +496,6 @@ export function useDomSelection({
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
     refreshDomEditGroupSelectionsFromPreview,
+    applyMarqueeSelection,
   };
 }