@hyperframes/studio 0.8.81 → 0.8.82

package/src/hooks/useGsapAnimationOps.ts

@@ -1,4 +1,8 @@
 import { useCallback } from "react";
+import {
+  serializeStudioFileMutation,
+  type StudioProjectFileWriter,
+} from "../utils/studioFileMutationCoordinator";
 import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { roundTo3 } from "../utils/rounding";
@@ -27,6 +31,7 @@ interface GsapAnimationOpsParams extends SdkAnimationDeps {
   commitMutation: CommitMutation;
   commitMutationSafely: SafeGsapCommitMutation;
   showToast: (message: string, tone?: "error" | "info") => void;
+  writeProjectFile?: StudioProjectFileWriter;
 }
 
 export function useGsapAnimationOps({
@@ -37,6 +42,7 @@ export function useGsapAnimationOps({
   showToast,
   sdkSession,
   sdkDeps,
+  writeProjectFile,
 }: GsapAnimationOpsParams) {
   const updateGsapMeta = useCallback(
     async (
@@ -122,13 +128,17 @@ export function useGsapAnimationOps({
         const pid = projectIdRef.current;
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
         if (!pid) return;
-        const assigned = await assignGsapTargetAutoIdIfNeeded({
-          projectId: pid,
-          targetPath,
-          selection,
-          autoId,
-          showToast,
-        });
+        const assign = () =>
+          assignGsapTargetAutoIdIfNeeded({
+            projectId: pid,
+            targetPath,
+            selection,
+            autoId,
+            showToast,
+          });
+        const assigned = await (writeProjectFile
+          ? serializeStudioFileMutation(writeProjectFile, targetPath, assign)
+          : assign());
         if (!assigned) return;
       }
 
@@ -181,7 +191,15 @@ export function useGsapAnimationOps({
         { label: `Add GSAP ${method} animation`, softReload: true },
       );
     },
-    [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession, sdkDeps],
+    [
+      activeCompPath,
+      commitMutation,
+      projectIdRef,
+      showToast,
+      sdkSession,
+      sdkDeps,
+      writeProjectFile,
+    ],
   );
 
   type KeyframeEntry = {

package/src/hooks/useGsapScriptCommits.ts

@@ -523,6 +523,7 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     showToast,
     sdkSession,
     sdkDeps,
+    writeProjectFile,
   });
   const keyframeOps = useGsapKeyframeOps({
     activeCompPath,

package/src/hooks/useThumbnailStripSize.test.tsx

@@ -0,0 +1,47 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it } from "vitest";
+import { MockResizeObserver, reportResize } from "./resizeObserverTestUtils";
+import { useThumbnailStripSize } from "./useThumbnailStripSize";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+it("does not re-render the strip when the observer reports the size it already holds", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const host = document.createElement("div");
+  document.body.append(host);
+  Object.defineProperty(host, "clientWidth", { configurable: true, value: 300 });
+  Object.defineProperty(host, "clientHeight", { configurable: true, value: 40 });
+  const root = createRoot(host);
+  let stripRenders = 0;
+  function Strip({ label }: { label: string }) {
+    stripRenders += 1;
+    return label;
+  }
+  function Harness() {
+    const [size, ref] = useThumbnailStripSize();
+    return (
+      <div ref={ref}>
+        <Strip label={`${size.width}x${size.height}`} />
+      </div>
+    );
+  }
+  try {
+    act(() => root.render(<Harness />));
+    expect(host.textContent).toBe("300x40");
+    const settled = stripRenders;
+
+    act(() => reportResize(300, 40));
+    expect(stripRenders).toBe(settled);
+
+    act(() => reportResize(320, 40));
+    expect(stripRenders).toBe(settled + 1);
+    expect(host.textContent).toBe("320x40");
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});

package/src/hooks/useThumbnailStripSize.ts

@@ -0,0 +1,31 @@
+import { useCallback, useRef, useState } from "react";
+import { useMountEffect } from "./useMountEffect";
+
+interface StripSize {
+  width: number;
+  height: number;
+}
+
+const resize = (width: number, height: number) => (prev: StripSize) =>
+  prev.width === width && prev.height === height ? prev : { width, height };
+
+/** Size of the thumbnail's parent, kept current by a ResizeObserver; 0x0 until measured. */
+export function useThumbnailStripSize() {
+  const [size, setSize] = useState<StripSize>({ width: 0, height: 0 });
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  const ref = useCallback((element: HTMLDivElement | null) => {
+    observerRef.current?.disconnect();
+    if (!element) return;
+    const target = element.parentElement ?? element;
+    setSize(resize(target.clientWidth, target.clientHeight));
+    observerRef.current = new ResizeObserver(([entry]) =>
+      setSize(resize(entry.contentRect.width, entry.contentRect.height)),
+    );
+    observerRef.current.observe(target);
+  }, []);
+
+  useMountEffect(() => () => observerRef.current?.disconnect());
+
+  return [size, ref] as const;
+}

package/src/hooks/useTimelineAssetDropOps.ts

@@ -109,8 +109,6 @@ export function useTimelineAssetDropOps({
       }
 
       try {
-        const originalContent = await readFileContent(pid, targetPath);
-
         const normalizedStart = Number(formatTimelineAttributeNumber(placement.start));
         const duration =
           Number.isFinite(durationOverride) && durationOverride != null && durationOverride > 0
@@ -120,7 +118,6 @@ export function useTimelineAssetDropOps({
         // A video with an audio stream lands audible; the mixer only hears a
         // <video> marked data-has-audio, and a muted drop was losing the sound.
         const hasAudio = await resolveDroppedAssetHasAudio(pid, assetPath, kind);
-        const newId = buildTimelineAssetId(assetPath, collectHtmlIds(originalContent));
         const resolvedAssetSrc = resolveTimelineAssetSrc(targetPath, assetPath);
 
         const resolvedTargetPath = targetPath || "index.html";
@@ -129,45 +126,51 @@ export function useTimelineAssetDropOps({
         );
         const newElementZIndex = Math.max(1, relevantElements.length + 1);
 
-        const { source: sourceWithRoom, track } = resolveDropTrack({
-          source: originalContent,
-          // insertRow counts the rows the timeline shows, so plan against those.
-          elements: relevantElements,
-          placement,
-          dropped: {
-            id: newId,
-            tag: kind === "image" ? "img" : kind,
-            start: normalizedStart,
-            duration: normalizedDuration,
-          },
-        });
-        const patchedContent = extendRootDurationInSource(
-          insertTimelineAssetIntoSource(
-            sourceWithRoom,
-            buildTimelineAssetInsertHtml({
+        let newId = "";
+        let track = 0;
+        const insertAsset = (originalContent: string) => {
+          newId = buildTimelineAssetId(assetPath, collectHtmlIds(originalContent));
+          const resolved = resolveDropTrack({
+            source: originalContent,
+            // insertRow counts the rows the timeline shows, so plan against those.
+            elements: relevantElements,
+            placement,
+            dropped: {
               id: newId,
-              hfId: `hf-${generateId()}`,
-              assetPath: resolvedAssetSrc,
-              kind,
+              tag: kind === "image" ? "img" : kind,
               start: normalizedStart,
               duration: normalizedDuration,
-              track,
-              zIndex: newElementZIndex,
-              hasAudio,
-              geometry: fitTimelineAssetGeometry(
-                null,
-                resolveTimelineAssetCompositionSize(originalContent),
-              ),
-            }),
-          ),
-          normalizedStart + normalizedDuration,
-        );
+            },
+          });
+          track = resolved.track;
+          return extendRootDurationInSource(
+            insertTimelineAssetIntoSource(
+              resolved.source,
+              buildTimelineAssetInsertHtml({
+                id: newId,
+                hfId: `hf-${generateId()}`,
+                assetPath: resolvedAssetSrc,
+                kind,
+                start: normalizedStart,
+                duration: normalizedDuration,
+                track,
+                zIndex: newElementZIndex,
+                hasAudio,
+                geometry: fitTimelineAssetGeometry(
+                  null,
+                  resolveTimelineAssetCompositionSize(originalContent),
+                ),
+              }),
+            ),
+            normalizedStart + normalizedDuration,
+          );
+        };
 
         await saveProjectFilesWithHistory({
           projectId: pid,
           label: "Add timeline asset",
-          files: { [targetPath]: patchedContent },
-          readFile: async () => originalContent,
+          files: { [targetPath]: insertAsset },
+          readFile: (path) => readFileContent(pid, path),
           writeFile: writeProjectFile,
           recordEdit,
         });

package/src/hooks/useTimelineDeleteOps.ts

@@ -5,11 +5,11 @@ import { buildProjectApiPath } from "../utils/projectRouting";
 import { useCallback, useRef, type MutableRefObject, type RefObject } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
-import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
+import { saveServerRewriteWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
 import { getTimelineElementLabel } from "../utils/studioHelpers";
 import { buildPatchTarget, removeIframeTimelineElements } from "./timelineEditingHelpers";
-import { captureDurationRollback, readFileContent } from "./timelineTimingSync";
+import { captureDurationRollback } from "./timelineTimingSync";
 import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
 import { furthestClipEndFromSource } from "../player/lib/timelineElementHelpers";
 import {
@@ -100,71 +100,68 @@ export function useTimelineDeleteOps({
         (candidate) => (candidate.sourceFile || activeCompPath || "index.html") === targetPath,
       );
       try {
-        const originalContent = await readFileContent(pid, targetPath);
-
-        // Remove every selected element before saving once. The server rewrites
-        // the file per call, so `removedContent` after the last one holds them
-        // all — which is what makes this a single history entry, and a single
-        // undo, rather than one per clip.
-        let removedContent = originalContent;
-        for (const target of sameFile) {
-          const patchTarget = buildPatchTarget(target);
-          if (!patchTarget) {
-            throw new Error(`Timeline element ${target.id} is missing a patchable target`);
-          }
-
-          const removeResponse = await fetch(
-            buildProjectApiPath(
-              pid,
-              `/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
-            ),
-            {
-              method: "POST",
-              headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-              body: JSON.stringify({ target: patchTarget }),
-            },
-          );
-          if (!removeResponse.ok) {
-            throw new Error(`Failed to delete ${target.id} from ${targetPath}`);
-          }
-
-          const removeData = (await removeResponse.json()) as {
-            changed?: boolean;
-            content?: string;
-          };
-          if (typeof removeData.content === "string") removedContent = removeData.content;
-        }
-        // Content-driven duration: shrink the composition to the furthest
-        // remaining clip end, read from the post-removal SOURCE (raw
-        // data-duration), so deleting the last/longest clip removes trailing
-        // empty space. Measured from the source, not the store, whose
-        // durations are runtime-truncated.
-        const deleteContentEnd = furthestClipEndFromSource(removedContent);
-        const patchedContent = setCompositionDurationToContent(removedContent, deleteContentEnd);
-        // Optimistically reflect the shrunk length in the readout/seek bar,
-        // rolling it back if the persist below fails (see captureDurationRollback).
-        const rollbackDuration = captureDurationRollback(previewIframeRef.current);
-        if (deleteContentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
-          usePlayerStore.getState().setDuration(deleteContentEnd);
-        }
-
         // Shared with the ripple move below so a folded ripple is one undo
         // step with the delete, not two (editHistory.ts coalesces by key +
         // window across separate recordEdit calls, not by label).
         const coalesceKey = `main-track-ripple-delete:${deleteGestureSeq++}`;
         const deleteHistoryLabel = "Delete timeline clip";
+        let rollbackDuration = () => {};
         try {
-          await saveProjectFilesWithHistory({
+          await saveServerRewriteWithHistory({
             projectId: pid,
+            path: targetPath,
             label: deleteHistoryLabel,
             coalesceKey,
-            files: { [targetPath]: patchedContent },
-            readFile: async () => originalContent,
-            // remove-element already wrote the removal, so disk holds THAT — not the
-            // content read at the top. Undo still goes back to the original.
-            diskContent: { [targetPath]: removedContent },
             writeFile: writeProjectFile,
             recordEdit,
+            rewrite: async (originalContent) => {
+              // Remove every selected element before saving once. The server rewrites
+              // the file per call, so `removedContent` after the last one holds them
+              // all — which is what makes this a single history entry, and a single
+              // undo, rather than one per clip.
+              let removedContent = originalContent;
+              for (const target of sameFile) {
+                const patchTarget = buildPatchTarget(target);
+                if (!patchTarget) {
+                  throw new Error(`Timeline element ${target.id} is missing a patchable target`);
+                }
+
+                const removeResponse = await fetch(
+                  buildProjectApiPath(
+                    pid,
+                    `/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
+                  ),
+                  {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+                    body: JSON.stringify({ target: patchTarget }),
+                  },
+                );
+                if (!removeResponse.ok) {
+                  throw new Error(`Failed to delete ${target.id} from ${targetPath}`);
+                }
+
+                const removeData = (await removeResponse.json()) as {
+                  changed?: boolean;
+                  content?: string;
+                };
+                if (typeof removeData.content === "string") removedContent = removeData.content;
+              }
+              // Shrink to the furthest remaining clip end, read from the post-removal source:
+              // store durations are runtime-truncated.
+              const deleteContentEnd = furthestClipEndFromSource(removedContent);
+              const patchedContent = setCompositionDurationToContent(
+                removedContent,
+                deleteContentEnd,
+              );
+              // Optimistically reflect the shrunk length in the readout/seek bar,
+              // rolling it back if the persist below fails (see captureDurationRollback).
+              rollbackDuration = captureDurationRollback(previewIframeRef.current);
+              if (deleteContentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
+                usePlayerStore.getState().setDuration(deleteContentEnd);
+              }
+              return { disk: removedContent, after: patchedContent };
+            },
           });
         } catch (error) {
           rollbackDuration();

package/src/hooks/useTimelineEditing.ts

@@ -8,7 +8,6 @@ import { useTimelineAssetDropOps } from "./useTimelineAssetDropOps";
 import {
   applyTimelineStackingReorder,
   patchIframeDomTiming,
-  playbackStartAttributeForElement,
   persistTimelineEdit,
   formatTimelineAttributeNumber,
   formatTimelineMediaOffset,
@@ -16,6 +15,7 @@ import {
   buildTimelineMoveTimingPatch,
   buildTimelineResizeTimingPatch,
 } from "./timelineEditingHelpers";
+import { playbackStartAttributeForElement } from "../player/lib/timelineElementHelpers";
 import {
   captureDurationRollback,
   finishClipTimingFallback,
@@ -243,6 +243,7 @@ export function useTimelineEditing({
             label: "Move timeline clip",
             coalesceKey,
             recordEdit,
+            writeProjectFile,
             edit: { kind: "shift", delta: updates.start - element.start },
           }).finally(() => invalidateGsapCache?.());
         const moveFallback = () =>
@@ -346,6 +347,7 @@ export function useTimelineEditing({
           label: "Resize timeline clip",
           coalesceKey,
           recordEdit,
+          writeProjectFile,
           edit: {
             kind: "scale",
             from: { start: element.start, duration: element.duration },

package/src/hooks/useTimelineGroupEditing.ts

@@ -15,11 +15,11 @@ import {
   formatTimelineAttributeNumber,
   formatTimelineMediaOffset,
   patchIframeDomTiming,
-  playbackStartAttributeForElement,
   persistTimelineBatchEdit,
   type PersistTimelineBatchChange,
   type RecordEditInput,
 } from "./timelineEditingHelpers";
+import { playbackStartAttributeForElement } from "../player/lib/timelineElementHelpers";
 import {
   captureDurationRollback,
   finishGroupTimingGsapFallback,
@@ -330,6 +330,7 @@ export function useTimelineGroupEditing({
             errorLabel: "Failed to shift GSAP positions",
             coalesceKey,
             recordEdit,
+            writeProjectFile,
             activeCompPath,
             changes,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
@@ -365,6 +366,7 @@ export function useTimelineGroupEditing({
       trySdkBatchPersist,
       showToast,
       invalidateGsapCache,
+      writeProjectFile,
     ],
   );
 
@@ -437,6 +439,7 @@ export function useTimelineGroupEditing({
             errorLabel: "Failed to scale GSAP positions",
             coalesceKey,
             recordEdit,
+            writeProjectFile,
             activeCompPath,
             changes,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
@@ -478,6 +481,7 @@ export function useTimelineGroupEditing({
       trySdkBatchPersist,
       showToast,
       invalidateGsapCache,
+      writeProjectFile,
     ],
   );
 

package/src/index.ts

@@ -184,6 +184,14 @@ export type { TimelinePaneProps } from "./components/nle/TimelinePane";
 export { TimelineEditProvider } from "./contexts/TimelineEditContext";
 export type { TimelineEditCallbacks } from "./player/components/timelineCallbacks";
 export type { BlockedTimelineEditIntent } from "./player/components/timelineEditing";
+export { TimelineToolbar } from "./components/TimelineToolbar";
+export type { TimelineToolbarProps } from "./components/TimelineToolbar";
+export { TimelineHistoryButtons } from "./components/TimelineHistoryButtons";
+export type { TimelineHistoryButtonsProps } from "./components/TimelineHistoryButtons";
+export { AudioMeterStrip } from "./components/nle/AudioMeterStrip";
+export type { AudioMeterStripProps } from "./components/nle/AudioMeterStrip";
+export { useClipboard } from "./hooks/useClipboard";
+export type { UseClipboardOptions } from "./hooks/useClipboard";
 
 export {
   playSeamTransitionLoop,

package/src/player/components/CompositionThumbnail.test.ts

@@ -3,6 +3,7 @@
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MockResizeObserver, reportResize } from "../../hooks/resizeObserverTestUtils";
 import { thumbnailScheduler } from "../lib/thumbnailScheduler";
 import { buildCompositionThumbnailUrl, CompositionThumbnail } from "./CompositionThumbnail";
 
@@ -11,12 +12,6 @@ Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
   value: true,
 });
 
-class MockResizeObserver {
-  observe() {}
-  disconnect() {}
-  unobserve() {}
-}
-
 class MockImage {
   static instances: MockImage[] = [];
   onload: (() => void) | null = null;
@@ -146,6 +141,45 @@ describe("CompositionThumbnail", () => {
     );
   });
 
+  it.each([
+    { name: "a wide", width: 2700, height: 1000, tileWidth: 108 },
+    { name: "a square", width: 1000, height: 1000, tileWidth: 48 },
+    { name: "a portrait", width: 1080, height: 1920, tileWidth: 48 },
+  ])(
+    "shows $name picture whole at the clip's measured height",
+    async ({ width, height, tileWidth }) => {
+      Object.defineProperty(host, "clientWidth", { configurable: true, value: 500 });
+      Object.defineProperty(host, "clientHeight", { configurable: true, value: 40 });
+      const probe = await renderThumbnail();
+
+      await act(async () => {
+        probe.naturalWidth = width;
+        probe.naturalHeight = height;
+        probe.onload?.();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      const img = host.querySelector("img")!;
+      expect(img.parentElement?.style.width).toBe(`${tileWidth}px`);
+      // A tile held at its minimum width letterboxes the picture instead of cropping it.
+      expect(img.classList.contains("object-contain")).toBe(true);
+    },
+  );
+
+  it("re-tiles at the height the resize observer reports", async () => {
+    const probe = await renderThumbnail();
+    await act(async () => {
+      probe.naturalWidth = 2700;
+      probe.naturalHeight = 1000;
+      probe.onload?.();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    act(() => reportResize(500, 40));
+
+    expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
+  });
+
   it("aborts its scheduled off-DOM image probe when unmounted", async () => {
     const probe = await renderThumbnail();
     expect(host.querySelector("img")).toBeNull();

package/src/player/components/CompositionThumbnail.tsx

@@ -1,6 +1,6 @@
-import { memo, useCallback, useMemo, useRef, useState, type CSSProperties } from "react";
-import { useMountEffect } from "../../hooks/useMountEffect";
+import { memo, useMemo, type CSSProperties } from "react";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
+import { useThumbnailStripSize } from "../../hooks/useThumbnailStripSize";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
 import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
 import { computeThumbnailStrip, probeImageAspect } from "./thumbnailUtils";
@@ -22,7 +22,6 @@ interface CompositionThumbnailProps {
   rich?: boolean;
 }
 
-const CLIP_HEIGHT = 66;
 const THUMBNAIL_URL_VERSION = "v3";
 export const THUMBNAIL_SEEK_TIME_SECONDS = 3;
 
@@ -122,8 +121,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
   contentRevision = 0,
   priority = "visible",
 }: CompositionThumbnailProps) {
-  const [containerWidth, setContainerWidth] = useState(0);
-  const observerRef = useRef<ResizeObserver | null>(null);
+  const [container, setContainerRef] = useThumbnailStripSize();
   const url = buildCompositionThumbnailUrl({
     previewUrl,
     seekTime,
@@ -149,25 +147,12 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
   const value =
     snapshot.status === "ready" && snapshot.value.kind === "image" ? snapshot.value : null;
   const { frameW, frameCount } = computeThumbnailStrip(
-    containerWidth,
+    container.width,
     value?.aspect ?? 16 / 9,
-    CLIP_HEIGHT,
+    container.height,
     48,
   );
 
-  const setContainerRef = useCallback((element: HTMLDivElement | null) => {
-    observerRef.current?.disconnect();
-    if (!element) return;
-    const target = element.parentElement ?? element;
-    setContainerWidth(target.clientWidth);
-    observerRef.current = new ResizeObserver(([entry]) =>
-      setContainerWidth(entry.contentRect.width),
-    );
-    observerRef.current.observe(target);
-  }, []);
-
-  useMountEffect(() => () => observerRef.current?.disconnect());
-
   return (
     <div ref={setContainerRef} className="absolute inset-0 overflow-hidden">
       {value && (
@@ -189,7 +174,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
                 src={value.url}
                 alt=""
                 draggable={false}
-                className="absolute inset-0 h-full w-full object-cover"
+                className="absolute inset-0 h-full w-full object-contain"
                 style={{ opacity: "var(--timeline-composition-thumbnail-opacity)" }}
               />
             </div>

package/src/player/components/ImageThumbnail.test.tsx

@@ -3,6 +3,7 @@
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { MockResizeObserver, reportResize } from "../../hooks/resizeObserverTestUtils";
 import { thumbnailScheduler } from "../lib/thumbnailScheduler";
 import { ImageThumbnail } from "./ImageThumbnail";
 
@@ -30,12 +31,6 @@ class MockIntersectionObserver {
   }
 }
 
-class MockResizeObserver {
-  observe() {}
-  disconnect() {}
-  unobserve() {}
-}
-
 // --- Image stub: captures instances so tests fire load/error deterministically ---
 class MockImage {
   static instances: MockImage[] = [];
@@ -171,6 +166,32 @@ describe("ImageThumbnail", () => {
     expect(host.querySelector(".animate-pulse")).toBeNull();
   });
 
+  it("tiles a wide picture at the clip's measured height, whole", async () => {
+    Object.defineProperty(host, "clientWidth", { configurable: true, value: 500 });
+    Object.defineProperty(host, "clientHeight", { configurable: true, value: 40 });
+    render({ imageSrc: "/api/projects/p/preview/assets/wide.png" });
+    await resolveProbe((probe) => {
+      probe.naturalWidth = 2700;
+      probe.naturalHeight = 1000;
+      probe.onload?.();
+    });
+
+    expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
+  });
+
+  it("re-tiles at the height the resize observer reports", async () => {
+    render({ imageSrc: "/api/projects/p/preview/assets/wide.png" });
+    await resolveProbe((probe) => {
+      probe.naturalWidth = 2700;
+      probe.naturalHeight = 1000;
+      probe.onload?.();
+    });
+
+    act(() => reportResize(500, 40));
+
+    expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
+  });
+
   it("renders the label above the strip when provided", async () => {
     render({ imageSrc: "/x.png", label: "hero", labelColor: "#abc" });
     await resolveProbe((probe) => {