@hyperframes/studio 0.7.7 → 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/contexts/DomEditContext.tsx

@@ -55,6 +55,7 @@ export interface DomEditActionsValue extends Pick<
   | "handleGsapRemoveAllKeyframes"
   | "handleResetSelectedElementKeyframes"
   | "commitAnimatedProperty"
+  | "commitAnimatedProperties"
   | "handleSetArcPath"
   | "handleUpdateArcSegment"
   | "handleUnroll"
@@ -164,6 +165,7 @@ export function DomEditProvider({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     commitAnimatedProperty,
+    commitAnimatedProperties,
     handleSetArcPath,
     handleUpdateArcSegment,
     handleUnroll,
@@ -238,6 +240,7 @@ export function DomEditProvider({
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
       commitAnimatedProperty,
+      commitAnimatedProperties,
       handleSetArcPath,
       handleUpdateArcSegment,
       handleUnroll,
@@ -298,6 +301,7 @@ export function DomEditProvider({
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
       commitAnimatedProperty,
+      commitAnimatedProperties,
       handleSetArcPath,
       handleUpdateArcSegment,
       handleUnroll,

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

@@ -120,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);
 }
 
 /**
@@ -194,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,
     {
@@ -218,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 },
   );
 }
 
@@ -264,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,
     {
@@ -277,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 },
   );
 }
 

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -12,12 +12,23 @@ import { buildArcPath, type ArcPathConfig } from "@hyperframes/core/gsap-parser-
 import { parsePercentageKeyframes, toAbsoluteTime } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
 
+/**
+ * A GSAP tween's `vars` object — intentionally open: it mixes channel values
+ * (numbers), easing (strings), flags (booleans), nested keyframes (objects) and
+ * callbacks. Named so call sites read as "GSAP config", not an untyped escape hatch.
+ */
+export type GsapVars = Record<string, unknown>;
+
 export interface RuntimeTween {
   targets?: () => Element[];
-  vars?: Record<string, unknown>;
+  vars?: GsapVars;
   duration?: () => number;
   startTime?: () => number;
   invalidate?: () => RuntimeTween;
+  /** Remove this tween from its parent timeline (GSAP `kill()`). */
+  kill?: () => void;
+  /** The timeline this tween lives in — used to re-insert a rebuilt tween. */
+  parent?: RuntimeTimeline;
 }
 
 export interface RuntimeTimeline {
@@ -25,6 +36,8 @@ export interface RuntimeTimeline {
   duration?: () => number;
   time?: () => number;
   invalidate?: () => RuntimeTimeline;
+  /** Add a tween at an absolute position — used to rebuild a keyframe tween in place. */
+  to?: (targets: Element[], vars: GsapVars, position?: number) => RuntimeTween;
 }
 
 type Pct = { percentage: number; properties: Record<string, number | string> };
@@ -184,6 +197,26 @@ function varsCarryChannel(vars: Record<string, unknown> | undefined, channels: s
   return false;
 }
 
+/**
+ * Like `varsCarryChannel` but for a keyframe tween: the channels live inside the
+ * keyframe steps (`vars.keyframes`), not as own props of `vars`. Handles the object
+ * form (`{ "0%": {...} }`) and the array form (`[{...}, ...]`).
+ */
+function keyframeVarsCarryChannel(
+  vars: Record<string, unknown> | undefined,
+  channels: string[],
+): boolean {
+  const kf = vars?.keyframes;
+  if (!kf || typeof kf !== "object") return false;
+  const steps = Array.isArray(kf) ? kf : Object.values(kf);
+  return steps.some(
+    (step) =>
+      step != null &&
+      typeof step === "object" &&
+      channels.some((ch) => Object.prototype.hasOwnProperty.call(step, ch)),
+  );
+}
+
 /**
  * Resolve the live tween targeting `selector` using the SAME all-timelines scan
  * `readRuntimeKeyframes` uses, so read and write agree on "which tween". With
@@ -197,6 +230,7 @@ function varsCarryChannel(vars: Record<string, unknown> | undefined, channels: s
  * on a rotation-only set). With no channel-matching set, it falls back to the
  * first matching set (back-compat). `channels` is ignored for `kind: "keyframe"`.
  */
+// fallow-ignore-next-line complexity
 export function resolveRuntimeTween(
   iframe: HTMLIFrameElement | null,
   selector: string,
@@ -219,7 +253,12 @@ export function resolveRuntimeTween(
     ? [compositionId]
     : Object.keys(timelines).filter((k) => typeof timelines[k]?.getChildren === "function");
 
-  const wantChannels = kind === "set" && channels && channels.length > 0 ? channels : null;
+  // Channels disambiguate co-located tweens for BOTH kinds: a `set` carries them as
+  // own vars props, a keyframe tween carries them inside its keyframe steps. An
+  // element can have a rotation keyframe tween AND a position keyframe tween; a
+  // rotation edit must land on the former. The reader passes no channels, so its
+  // playhead-containment path below is unchanged.
+  const wantChannels = channels && channels.length > 0 ? channels : null;
 
   let first: ResolvedRuntimeTween | null = null;
   let channelMatch: ResolvedRuntimeTween | null = null;
@@ -233,11 +272,15 @@ export function resolveRuntimeTween(
       const isSet = !(dur > 0);
       if (kind === "set" ? !isSet : isSet) continue;
       if (wantChannels) {
-        if (varsCarryChannel(tween.vars, wantChannels)) {
+        const carries =
+          kind === "set"
+            ? varsCarryChannel(tween.vars, wantChannels)
+            : keyframeVarsCarryChannel(tween.vars, wantChannels);
+        if (carries) {
           if (channelMatch === null) channelMatch = { tween, timeline };
         } else if (first === null) {
-          // A set carrying only disjoint channels: remember as last-resort
-          // fallback, but never prefer it over a channel-matching set.
+          // A tween carrying only disjoint channels: remember as last-resort
+          // fallback, but never prefer it over a channel-matching one.
           first = { tween, timeline };
         }
         continue;
@@ -267,6 +310,7 @@ function readCarriesChannel(read: ReadTween, channels: string[]): boolean {
  * whenever the playhead sits in that tween's range but outside the position
  * tween's). Omitted → any keyframed tween qualifies (back-compat).
  */
+// fallow-ignore-next-line complexity
 export function readRuntimeKeyframes(
   iframe: HTMLIFrameElement | null,
   selector: string,
@@ -334,6 +378,7 @@ export function readRuntimeKeyframes(
  * only a hold may remain, and resurrecting the deleted tween from the stale parse
  * must be avoided.
  */
+// fallow-ignore-next-line complexity
 export function hasNonHoldTweenForElement(
   iframe: HTMLIFrameElement | null,
   selector: string,