@hyperframes/studio 0.7.7 → 0.7.8

package/src/components/editor/propertyPanelHelpers.ts

@@ -68,12 +68,18 @@ export interface PropertyPanelProps {
   onRemoveKeyframe?: (animationId: string, percentage: number) => void;
   onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
   onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
-  onConvertToKeyframes?: (animationId: string) => void;
+  onConvertToKeyframes?: (animationId: string, duration?: number) => void;
   onCommitAnimatedProperty?: (
     selection: DomEditSelection,
     property: string,
     value: number | string,
   ) => Promise<void>;
+  /** Batched variant: commit several props into ONE keyframe (e.g. the 3D cube's
+   * rotationX/Y/Z) so multi-axis edits don't race into adjacent duplicates. */
+  onCommitAnimatedProperties?: (
+    selection: DomEditSelection,
+    props: Record<string, number | string>,
+  ) => Promise<void>;
   onSeekToTime?: (time: number) => void;
   recordingState?: "idle" | "recording" | "preview";
   recordingDuration?: number;
@@ -212,10 +218,8 @@ export const LABEL = "text-[11px] font-medium text-panel-text-3";
 export const RESPONSIVE_GRID = "grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3";
 export const EMPTY_STYLES: Record<string, string> = {};
 
-// fallow-ignore-next-line unused-exports -- pre-existing; surfaced in this file's diff by an unrelated line shift
-export const EMPTY_FILTER_VALUE = "none";
-// fallow-ignore-next-line unused-exports -- pre-existing; surfaced in this file's diff by an unrelated line shift
-export const BOX_SHADOW_PRESETS = {
+const EMPTY_FILTER_VALUE = "none";
+const BOX_SHADOW_PRESETS = {
   none: "none",
   soft: "0 12px 36px rgba(0, 0, 0, 0.28)",
   lift: "0 18px 54px rgba(0, 0, 0, 0.38)",
@@ -275,13 +279,7 @@ export function parsePxMetricValue(value: string): number | null {
   return token.value;
 }
 
-// fallow-ignore-next-line unused-exports -- pre-existing; surfaced in this file's diff by an unrelated line shift
-export function clampPanelNumber(
-  value: number,
-  min: number,
-  max: number,
-  fallback: number,
-): number {
+function clampPanelNumber(value: number, min: number, max: number, fallback: number): number {
   if (!Number.isFinite(value)) return fallback;
   return Math.max(min, Math.min(max, value));
 }
@@ -491,6 +489,38 @@ export function extractBackgroundImageUrl(value: string | undefined): string {
 // ── GSAP runtime value readers (used by PropertyPanel) ────────────────────
 
 // fallow-ignore-next-line complexity -- pre-existing; surfaced in this file's diff by an unrelated line shift
+// Core transform channels the panel ALWAYS reads live — even before a just-set
+// value (e.g. rotationX) has re-parsed into `gsapAnimations`. Without this the
+// cube + fields drop the prop and flicker to 0 on every commit; gsap.getProperty
+// reflects the in-place instant patch, so it's the true current value.
+const ALWAYS_READ_CHANNELS = [
+  "x",
+  "y",
+  "rotation",
+  "rotationX",
+  "rotationY",
+  "rotationZ",
+  "z",
+  "scale",
+  "transformPerspective",
+  "opacity",
+];
+
+/** Every property key the panel should read for an element: animated props + the
+ * always-read transform channels. */
+function collectPanelPropKeys(gsapAnimations: GsapAnimation[]): Set<string> {
+  const keys = new Set<string>(ALWAYS_READ_CHANNELS);
+  for (const anim of gsapAnimations) {
+    if (anim.keyframes) {
+      for (const kf of anim.keyframes.keyframes) {
+        for (const p of Object.keys(kf.properties)) keys.add(p);
+      }
+    }
+    for (const p of Object.keys(anim.properties)) keys.add(p);
+  }
+  return keys;
+}
+
 export function readGsapRuntimeValuesForPanel(
   gsapAnimId: string | null,
   gsapAnimations: GsapAnimation[],
@@ -511,15 +541,7 @@ export function readGsapRuntimeValuesForPanel(
     if (!gsap?.getProperty) return null;
     const el = iframe.contentDocument?.querySelector(selector);
     if (!el) return null;
-    const propKeys = new Set<string>();
-    for (const anim of gsapAnimations) {
-      if (anim.keyframes) {
-        for (const kf of anim.keyframes.keyframes) {
-          for (const p of Object.keys(kf.properties)) propKeys.add(p);
-        }
-      }
-      for (const p of Object.keys(anim.properties)) propKeys.add(p);
-    }
+    const propKeys = collectPanelPropKeys(gsapAnimations);
     const result: Record<string, number> = {};
     for (const prop of propKeys) {
       const v = Number(gsap.getProperty(el, prop));

package/src/components/editor/transform3dProjection.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { projectAxes, projectCubeFaces, rotate, wrapDeg } from "./transform3dProjection";
+
+const OPTS = { cx: 50, cy: 50, r: 30, persp: 4 };
+
+describe("projectCubeFaces", () => {
+  it("shows the front face (and only front-facing faces) at identity", () => {
+    const faces = projectCubeFaces(0, 0, 0, OPTS);
+    const ids = faces.map((f) => f.id);
+    expect(ids).toContain("front");
+    // Head-on: side/top/bottom normals are edge-on (n.z ≈ 0) → culled.
+    expect(ids).not.toContain("back");
+    expect(faces.length).toBeGreaterThanOrEqual(1);
+    expect(faces.length).toBeLessThanOrEqual(3);
+  });
+
+  it("reveals the top face when tilted forward on X", () => {
+    const ids = projectCubeFaces(45, 0, 0, OPTS).map((f) => f.id);
+    expect(ids).toContain("front");
+    expect(ids).toContain("top");
+    expect(ids).not.toContain("bottom");
+  });
+
+  it("reveals a side face when rotated on Y (CSS rotateY convention)", () => {
+    const ids = projectCubeFaces(0, 45, 0, OPTS).map((f) => f.id);
+    expect(ids).toContain("front");
+    expect(ids).toContain("left");
+    expect(ids).not.toContain("right");
+  });
+
+  it("never returns more than 3 faces (a cube shows at most 3 at once)", () => {
+    for (const [rx, ry, rz] of [
+      [30, 30, 0],
+      [60, 60, 45],
+      [135, 20, 90],
+    ]) {
+      expect(projectCubeFaces(rx, ry, rz, OPTS).length).toBeLessThanOrEqual(3);
+    }
+  });
+
+  it("rotationZ rolls the silhouette without changing which faces are visible", () => {
+    const a = projectCubeFaces(0, 0, 0, OPTS)
+      .map((f) => f.id)
+      .sort();
+    const b = projectCubeFaces(0, 0, 90, OPTS)
+      .map((f) => f.id)
+      .sort();
+    expect(b).toEqual(a);
+    // …but the projected coordinates differ (it rolled).
+    expect(projectCubeFaces(0, 0, 90, OPTS)[0]?.points).not.toEqual(
+      projectCubeFaces(0, 0, 0, OPTS)[0]?.points,
+    );
+  });
+
+  it("paints far faces before near faces (painter's order)", () => {
+    const faces = projectCubeFaces(35, 35, 0, OPTS);
+    for (let i = 1; i < faces.length; i++) {
+      expect(faces[i]!.depth).toBeGreaterThanOrEqual(faces[i - 1]!.depth);
+    }
+  });
+});
+
+describe("projectAxes", () => {
+  it("returns the three X/Y/Z axes with standard colors", () => {
+    const axes = projectAxes(0, 0, 0, OPTS);
+    expect(axes.map((a) => a.id).sort()).toEqual(["x", "y", "z"]);
+    const z = axes.find((a) => a.id === "z")!;
+    expect(z.color).toMatch(/#/);
+  });
+
+  it("flags the toward-viewer axis as front at identity (Z points at the camera)", () => {
+    const z = projectAxes(0, 0, 0, OPTS).find((a) => a.id === "z")!;
+    expect(z.front).toBe(true);
+  });
+
+  it("rotating 180° on Y flips the Z axis away from the viewer", () => {
+    const z = projectAxes(0, 180, 0, OPTS).find((a) => a.id === "z")!;
+    expect(z.front).toBe(false);
+  });
+});
+
+describe("rotate", () => {
+  it("90° on Y maps +x to -z (right edge swings to the back)", () => {
+    const v = rotate({ x: 1, y: 0, z: 0 }, 0, 90, 0);
+    expect(v.x).toBeCloseTo(0, 5);
+    expect(v.z).toBeCloseTo(-1, 5);
+  });
+});
+
+describe("wrapDeg", () => {
+  it("wraps into (-180, 180]", () => {
+    expect(wrapDeg(0)).toBe(0);
+    expect(wrapDeg(180)).toBe(180);
+    expect(wrapDeg(190)).toBe(-170);
+    expect(wrapDeg(-190)).toBe(170);
+    expect(wrapDeg(360)).toBe(0);
+    expect(wrapDeg(540)).toBe(180);
+  });
+});

package/src/components/editor/transform3dProjection.ts

@@ -0,0 +1,172 @@
+/**
+ * Pure cube projection for the 3D-transform widget. Given an element's
+ * rotationX/Y/Z (degrees), project a unit cube to 2D SVG polygons with
+ * back-face culling and painter's-order sorting — no DOM, no React, so it
+ * unit-tests in isolation. Used by Transform3DCube to draw a live preview of
+ * the element's orientation.
+ */
+
+export interface Vec3 {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface ProjectedFace {
+  /** Stable face id (front/back/left/right/top/bottom) for keying + theming. */
+  id: string;
+  /** SVG polygon points: "x,y x,y x,y x,y". */
+  points: string;
+  /** 0..1 brightness from how front-facing the rotated normal is (lighting cue). */
+  shade: number;
+  /** Mean depth of the face's corners; larger = nearer the viewer. */
+  depth: number;
+}
+
+const DEG = Math.PI / 180;
+
+/** Rotate a point intrinsically by X, then Y, then Z (degrees). */
+export function rotate(v: Vec3, rx: number, ry: number, rz: number): Vec3 {
+  let { x, y, z } = v;
+  const cx = Math.cos(rx * DEG);
+  const sx = Math.sin(rx * DEG);
+  [y, z] = [y * cx - z * sx, y * sx + z * cx];
+  const cy = Math.cos(ry * DEG);
+  const sy = Math.sin(ry * DEG);
+  [x, z] = [x * cy + z * sy, -x * sy + z * cy];
+  const cz = Math.cos(rz * DEG);
+  const sz = Math.sin(rz * DEG);
+  [x, y] = [x * cz - y * sz, x * sz + y * cz];
+  return { x, y, z };
+}
+
+// Unit-cube corners (±1) — 0-3 back face (z=-1), 4-7 front face (z=1).
+const CORNERS: Vec3[] = [
+  { x: -1, y: -1, z: -1 },
+  { x: 1, y: -1, z: -1 },
+  { x: 1, y: 1, z: -1 },
+  { x: -1, y: 1, z: -1 },
+  { x: -1, y: -1, z: 1 },
+  { x: 1, y: -1, z: 1 },
+  { x: 1, y: 1, z: 1 },
+  { x: -1, y: 1, z: 1 },
+];
+
+const FACES: { id: string; idx: [number, number, number, number]; normal: Vec3 }[] = [
+  { id: "front", idx: [4, 5, 6, 7], normal: { x: 0, y: 0, z: 1 } },
+  { id: "back", idx: [1, 0, 3, 2], normal: { x: 0, y: 0, z: -1 } },
+  { id: "left", idx: [0, 4, 7, 3], normal: { x: -1, y: 0, z: 0 } },
+  { id: "right", idx: [5, 1, 2, 6], normal: { x: 1, y: 0, z: 0 } },
+  // y=+1 corners project to screen-top (SVG y is flipped), so that face is "top".
+  { id: "top", idx: [7, 6, 2, 3], normal: { x: 0, y: 1, z: 0 } },
+  { id: "bottom", idx: [4, 5, 1, 0], normal: { x: 0, y: -1, z: 0 } },
+];
+
+export interface ProjectOpts {
+  /** Center of the SVG viewport. */
+  cx: number;
+  cy: number;
+  /** Half-extent of the cube in SVG units (drawn cube ≈ 2·r before perspective). */
+  r: number;
+  /** Weak-perspective strength in units of `r` (larger = flatter; ~3-6 reads as 3D). */
+  persp?: number;
+}
+
+function round(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+// Directional light (upper-front-right), normalized — drives per-face shading so
+// top/front/side read as distinct planes instead of one flat fill.
+const LIGHT = (() => {
+  const v = { x: 0.32, y: 0.56, z: 0.76 };
+  const m = Math.hypot(v.x, v.y, v.z);
+  return { x: v.x / m, y: v.y / m, z: v.z / m };
+})();
+
+/**
+ * Project the cube at the given orientation. Returns only the front-facing
+ * faces (≤3), painter-sorted far→near so the SVG draws nearer faces on top.
+ * Screen Y is flipped (SVG y grows downward). `shade` is a 0..1 lambert term
+ * from {@link LIGHT} for clean directional face tones.
+ */
+export function projectCubeFaces(
+  rx: number,
+  ry: number,
+  rz: number,
+  opts: ProjectOpts,
+): ProjectedFace[] {
+  const { cx, cy, r } = opts;
+  const persp = opts.persp ?? 4;
+  const view = (v: Vec3) => rotate(v, rx, ry, rz);
+  const rotated = CORNERS.map(view);
+  const faces: ProjectedFace[] = [];
+  for (const f of FACES) {
+    const n = view(f.normal);
+    if (n.z <= 1e-6) continue; // back-face cull: normal must point toward viewer
+    const corners = f.idx.map((i) => rotated[i]!);
+    const depth = corners.reduce((s, p) => s + p.z, 0) / 4;
+    const points = corners
+      .map((p) => {
+        // Weak perspective: nearer corners (higher z) project slightly larger.
+        const s = persp / (persp - p.z);
+        return `${round(cx + p.x * r * s)},${round(cy - p.y * r * s)}`;
+      })
+      .join(" ");
+    const lum = Math.max(0, n.x * LIGHT.x + n.y * LIGHT.y + n.z * LIGHT.z);
+    faces.push({ id: f.id, points, shade: 0.3 + lum * 0.7, depth });
+  }
+  faces.sort((a, b) => a.depth - b.depth);
+  return faces;
+}
+
+export interface ProjectedAxis {
+  id: "x" | "y" | "z";
+  /** Axis color (standard X=red, Y=green, Z=blue). */
+  color: string;
+  /** Tip position in SVG coords. */
+  x2: number;
+  y2: number;
+  /** Whether the tip points toward the viewer (drawn in front of the cube). */
+  front: boolean;
+}
+
+const AXES: { id: "x" | "y" | "z"; dir: Vec3; color: string }[] = [
+  { id: "x", dir: { x: 1, y: 0, z: 0 }, color: "#ff6b81" },
+  { id: "y", dir: { x: 0, y: 1, z: 0 }, color: "#5ff08a" },
+  { id: "z", dir: { x: 0, y: 0, z: 1 }, color: "#62b6ff" },
+];
+
+/**
+ * Project the 3 orientation axes (from the cube center) for an X/Y/Z gizmo.
+ * Orthographic — thin lines don't need perspective. `front` lets the caller draw
+ * away-facing axes behind the cube and toward-facing axes on top.
+ */
+export function projectAxes(
+  rx: number,
+  ry: number,
+  rz: number,
+  opts: ProjectOpts,
+): ProjectedAxis[] {
+  const { cx, cy, r } = opts;
+  const len = r * 1.5;
+  const view = (v: Vec3) => rotate(v, rx, ry, rz);
+  return AXES.map((a) => {
+    const p = view(a.dir);
+    return {
+      id: a.id,
+      color: a.color,
+      x2: round(cx + p.x * len),
+      y2: round(cy - p.y * len),
+      front: p.z >= -1e-6,
+    };
+  });
+}
+
+/** Wrap an angle to (-180, 180] so drag accumulation never runs away. */
+export function wrapDeg(deg: number): number {
+  let d = deg % 360;
+  if (d > 180) d -= 360;
+  if (d <= -180) d += 360;
+  return d;
+}

package/src/components/sidebar/AssetsTab.tsx

@@ -3,17 +3,17 @@ import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, FONT_EXT } from "../../utils/mediaTypes";
 import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
 import { copyTextToClipboard } from "../../utils/clipboard";
-import { ContextMenu, DeleteConfirm } from "./AssetContextMenu";
+import { ContextMenu } from "./AssetContextMenu";
 import { usePlayerStore } from "../../player/store/playerStore";
 import {
   type MediaCategory,
   getCategory,
-  getAudioSubtype,
   basename,
   ext,
   CATEGORY_LABELS,
   FILTER_ORDER,
 } from "./assetHelpers";
+import { AudioRow } from "./AudioRow";
 
 interface AssetsTabProps {
   projectId: string;
@@ -23,215 +23,7 @@ interface AssetsTabProps {
   onRename?: (oldPath: string, newPath: string) => void;
 }
 
-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 [confirmDelete, setConfirmDelete] = useState(false);
-  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}
-        />
-      )}
-      {confirmDelete && (
-        <DeleteConfirm
-          name={name}
-          onConfirm={() => {
-            onDelete?.(asset);
-            setConfirmDelete(false);
-          }}
-          onCancel={() => setConfirmDelete(false)}
-        />
-      )}
-    </>
-  );
-}
-
+// fallow-ignore-next-line complexity
 function ImageCard({
   projectId,
   asset,
@@ -396,10 +188,25 @@ export const AssetsTab = memo(function AssetsTab({
     Map<string, { description?: string; duration?: number; width?: number; height?: number }>
   >(new Map());
 
+  // Projects whose media manifest 404'd — most don't have one. Cache the miss so
+  // we don't re-fetch (and spam the console) on every re-render; the effect was
+  // also keyed on the `assets` array reference, which changes each render, so it
+  // re-fired constantly. Key on a stable join + skip known-missing manifests.
+  const manifest404Ref = useRef<Set<string>>(new Set());
+  const assetsKey = assets.join("|");
   useEffect(() => {
+    if (manifest404Ref.current.has(projectId)) return;
+    let cancelled = false;
     fetch(`/api/projects/${projectId}/preview/.media/manifest.jsonl`)
-      .then((r) => (r.ok ? r.text() : ""))
+      .then((r) => {
+        if (!r.ok) {
+          manifest404Ref.current.add(projectId);
+          return "";
+        }
+        return r.text();
+      })
       .then((text) => {
+        if (cancelled || !text) return;
         const m = new Map<
           string,
           { description?: string; duration?: number; width?: number; height?: number }
@@ -416,7 +223,10 @@ export const AssetsTab = memo(function AssetsTab({
         setManifest(m);
       })
       .catch(() => {});
-  }, [projectId, assets]);
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, assetsKey]);
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {