@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

package/src/components/editor/propertyPanelFxControls.tsx

@@ -88,7 +88,7 @@ export function AutomationToggle({
     <Tooltip label={automated ? "Automated" : "Automate"}>
       <button
         type="button"
-        className={`hf-fx-automate w-[16px] flex-shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${
+        className={`hf-fx-automate w-[16px] shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${
           automated
             ? "border-panel-accent text-panel-accent"
             : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"
@@ -192,10 +192,10 @@ export function FxParamRow({
             big the space is" — so 86px of truncation left "How big the sp…", and
             three rows of that read as the same word four times. A title only
             answers it on hover, one row at a time; wrapping answers it for the
-            whole column at rest. `break-words` so a long single token breaks
+            whole column at rest. `wrap-break-word` so a long single token breaks
             instead of widening the column. The row keeps `title={param.hint}`:
             the name and the explanation are different questions. */}
-        <span className="hf-fx-label w-[86px] flex-shrink-0 break-words text-[10px] leading-tight text-panel-text-2">
+        <span className="hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight text-panel-text-2">
           {param.label}
         </span>
         <select
@@ -236,7 +236,7 @@ export function FxParamRow({
     >
       {/* See the enum row above for why the name wraps instead of truncating. */}
       <span
-        className={`hf-fx-label w-[86px] flex-shrink-0 break-words text-[10px] leading-tight ${
+        className={`hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight ${
           automated ? "text-panel-accent" : "text-panel-text-2"
         }`}
       >
@@ -258,7 +258,7 @@ export function FxParamRow({
         onBlur={commit}
       />
       <input
-        className="hf-fx-number w-[54px] flex-shrink-0 rounded-[3px] bg-panel-surface px-1 py-0.5 text-right font-mono text-[10px] text-panel-text-0"
+        className="hf-fx-number w-[54px] shrink-0 rounded-[3px] bg-panel-surface px-1 py-0.5 text-right font-mono text-[10px] text-panel-text-0"
         type="number"
         min={param.min}
         max={param.max}
@@ -287,7 +287,7 @@ export function FxParamRow({
         }}
       />
       {param.unit ? (
-        <span className="hf-fx-unit w-[22px] flex-shrink-0 font-mono text-[9px] text-panel-text-2">
+        <span className="hf-fx-unit w-[22px] shrink-0 font-mono text-[9px] text-panel-text-2">
           {param.unit}
         </span>
       ) : null}

package/src/components/editor/propertyPanelFxEqModule.tsx

@@ -87,7 +87,7 @@ function Fader({
       <div className="relative h-[74px] w-full">
         <span className="pointer-events-none absolute inset-x-0 top-1/2 h-px bg-panel-border-input" />
         <span
-          className="pointer-events-none absolute left-1/2 w-[3px] -translate-x-1/2 rounded-sm bg-panel-accent"
+          className="pointer-events-none absolute left-1/2 w-[3px] -translate-x-1/2 rounded-xs bg-panel-accent"
           style={
             // `value`, not `band.gain`: mid-drag across zero the fill would
             // otherwise keep pointing the way it started.
@@ -95,7 +95,7 @@ function Fader({
           }
         />
         <input
-          className="hf-fx-eq-fader absolute left-1/2 h-[19px] w-[74px] -translate-x-1/2 -translate-y-1/2 rotate-[-90deg] cursor-ns-resize appearance-none bg-transparent"
+          className="hf-fx-eq-fader absolute left-1/2 h-[19px] w-[74px] -translate-x-1/2 -translate-y-1/2 -rotate-90 cursor-ns-resize appearance-none bg-transparent"
           style={{ top: "50%" }}
           type="range"
           min={-HF_AUDIO_EQ_RANGE_DB}

package/src/components/editor/propertyPanelFxPresetStyle.ts

@@ -146,7 +146,7 @@ export const FX_PRESET_STYLE: Record<string, FxPresetStyle> = {
   },
   // The name is a joke and the type is in on it.
   "doofus-worble": {
-    type: "text-[16px] tracking-[0.1em]",
+    type: "text-[16px] tracking-widest",
     color: "hsl(288, 85%, 72%)",
     family: FACE.theatrical,
   },
@@ -164,7 +164,7 @@ export const FX_PRESET_STYLE: Record<string, FxPresetStyle> = {
   },
   // Rough and too close — heavy industrial caps, growled rather than shouted.
   monster: {
-    type: "text-[15px] font-black uppercase tracking-[0.05em]",
+    type: "text-[15px] font-black uppercase tracking-wider",
     color: "hsl(350, 78%, 64%)",
     family: FACE.condensed,
   },

package/src/components/editor/propertyPanelGradingNumberField.tsx

@@ -109,7 +109,7 @@ export function GradingNumberField({
             event.currentTarget.blur();
           }
         }}
-        className={`border-b border-panel-border-input/50 bg-transparent py-0.5 text-right font-mono text-[9px] text-panel-text-2 outline-none focus:border-panel-accent disabled:opacity-40 ${inputClassName}`}
+        className={`border-b border-panel-border-input/50 bg-transparent py-0.5 text-right font-mono text-[9px] text-panel-text-2 outline-hidden focus:border-panel-accent disabled:opacity-40 ${inputClassName}`}
       />
     </label>
   );

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -182,7 +182,7 @@ export function MediaSection({
                   event.stopPropagation();
                   void runBackgroundRemoval();
                 }}
-                className="flex h-8 flex-shrink-0 items-center gap-1.5 rounded-md bg-panel-input px-2.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-panel-input px-2.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"
                 title={
                   canRemoveBackground
                     ? "Remove background and save a transparent asset"

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -70,21 +70,21 @@ export function MetricField({
     scrub && !disabled
       ? ({
           className:
-            "flex-shrink-0 text-[11px] font-medium text-neutral-500 cursor-ew-resize select-none",
+            "shrink-0 text-[11px] font-medium text-neutral-500 cursor-ew-resize select-none",
           onPointerDown: handleScrubPointerDown,
           onPointerMove: handleScrubPointerMove,
           onPointerUp: handleScrubPointerUp,
           onPointerCancel: handleScrubPointerUp,
           onLostPointerCapture: handleScrubPointerUp,
         } as const)
-      : ({ className: "flex-shrink-0 text-[11px] font-medium text-neutral-500" } as const);
+      : ({ className: "shrink-0 text-[11px] font-medium text-neutral-500" } as const);
 
   return (
     <div className={FIELD} title={tooltip}>
       <div className="flex min-w-0 items-center gap-3">
         <span {...scrubProps}>{label}</span>
         <CommitField value={value} disabled={disabled} liveCommit={liveCommit} onCommit={commit} />
-        {suffix && <span className="flex-shrink-0 text-[10px] text-neutral-600">{suffix}</span>}
+        {suffix && <span className="shrink-0 text-[10px] text-neutral-600">{suffix}</span>}
       </div>
     </div>
   );
@@ -262,7 +262,7 @@ export function SelectField({
   const renderedOptions = value && !options.includes(value) ? [value, ...options] : options;
   return (
     <label className={`${FIELD} flex items-center gap-3`}>
-      <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">{label}</span>
+      <span className="shrink-0 text-[11px] font-medium text-neutral-500">{label}</span>
       <select
         value={value}
         disabled={disabled}
@@ -270,7 +270,7 @@ export function SelectField({
           track("select", label);
           onChange(e.target.value);
         }}
-        className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+        className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
       >
         {renderedOptions.map((option) => (
           <option key={option} value={option}>
@@ -302,7 +302,7 @@ export function Section({
       height="10"
       viewBox="0 0 10 10"
       fill="currentColor"
-      className={`flex-shrink-0 text-panel-text-5 transition-transform duration-150 ${
+      className={`shrink-0 text-panel-text-5 transition-transform duration-150 ${
         collapsed ? "-rotate-90" : ""
       }`}
     >
@@ -324,7 +324,7 @@ export function Section({
             <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
             {collapseIcon}
           </button>
-          {accessory && <div className="flex flex-shrink-0 items-center">{accessory}</div>}
+          {accessory && <div className="flex shrink-0 items-center">{accessory}</div>}
         </div>
         {!collapsed && <div className="px-4 pb-3">{children}</div>}
       </section>

package/src/components/editor/propertyPanelSections.tsx

@@ -147,7 +147,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="[field-sizing:content] max-h-[40vh] min-h-12 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-none disabled:cursor-not-allowed disabled:text-panel-text-4"
+          className="field-sizing-content max-h-[40vh] min-h-12 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-hidden disabled:cursor-not-allowed disabled:text-panel-text-4"
         />
       </div>
     );
@@ -165,7 +165,7 @@ export function TextAreaField({
           onFocus={handleFocus}
           onChange={handleChange}
           onBlur={handleBlur}
-          className="[field-sizing:content] max-h-[40vh] min-h-20 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+          className="field-sizing-content max-h-[40vh] min-h-20 w-full resize-y overflow-x-hidden overflow-y-auto bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
         />
       </div>
     </label>
@@ -189,7 +189,7 @@ function FontWeightField({
   return (
     <div className={FIELD}>
       <div className="flex min-w-0 items-center gap-3">
-        <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">Weight</span>
+        <span className="shrink-0 text-[11px] font-medium text-neutral-500">Weight</span>
         <select
           value={value}
           disabled={disabled}
@@ -197,7 +197,7 @@ function FontWeightField({
             track("select", "Weight");
             onCommit(e.target.value);
           }}
-          className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+          className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-hidden disabled:cursor-not-allowed disabled:text-neutral-600"
         >
           {displayOptions.map((o) => (
             <option key={o} value={o}>
@@ -323,7 +323,7 @@ function TextFieldEditor({
               track("button", "Remove text field");
               onRemoveTextField(field.key);
             }}
-            className="inline-flex h-7 flex-shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+            className="inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
           >
             Remove
           </button>
@@ -476,7 +476,7 @@ export function TextSection({
             }}
             className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
           >
-            <Plus size={12} className="flex-shrink-0" />
+            <Plus size={12} className="shrink-0" />
             <span className="truncate">Add text</span>
           </button>
         </div>
@@ -497,14 +497,14 @@ export function TextSection({
                 <div className="flex min-w-0 items-center justify-between gap-2">
                   <div className="flex min-w-0 items-center gap-2">
                     <span
-                      className="h-4 w-4 flex-shrink-0 rounded border border-neutral-700 bg-neutral-950"
+                      className="h-4 w-4 shrink-0 rounded-sm border border-neutral-700 bg-neutral-950"
                       style={{ backgroundColor: getTextFieldColor(field, styles) }}
                     />
                     <span className="min-w-0 truncate text-[11px] font-medium text-neutral-100">
                       {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
                     </span>
                   </div>
-                  <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
+                  <span className="shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
                     {field.tagName}
                   </span>
                 </div>

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

@@ -4,6 +4,8 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
+import { runtimeProtocolMetadata } from "@hyperframes/core/runtime/protocol";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
 import { useColorGradingController } from "./useColorGradingController";
 import type { DomEditSelection } from "./domEditing";
 
@@ -22,6 +24,7 @@ function cleanStudioGrading() {
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
+  usePreviewIframeStore.setState({ iframe: null });
   document.body.innerHTML = "";
 });
 
@@ -737,3 +740,38 @@ describe("useColorGradingController", () => {
     vi.unstubAllGlobals();
   });
 });
+
+describe("useColorGradingController after the preview iframe is replaced", () => {
+  it("replays the grade to the new iframe on its ready message and ignores the old one", () => {
+    vi.useFakeTimers();
+    const a = createPreviewFrame();
+    const b = createPreviewFrame();
+    const ref = { current: a.iframe as HTMLIFrameElement | null };
+    usePreviewIframeStore.getState().setIframe(a.iframe);
+    const initialElement = makeElement({
+      dataAttributes: { "color-grading": JSON.stringify({ preset: "bright-pop", intensity: 1 }) },
+    });
+    const { root } = renderHook(vi.fn(), initialElement, ref);
+    act(() => vi.advanceTimersByTime(100));
+
+    const postToA = vi.spyOn(a.contentWindow, "postMessage");
+    const postToB = vi.spyOn(b.contentWindow, "postMessage");
+    act(() => {
+      ref.current = b.iframe;
+      usePreviewIframeStore.getState().setIframe(b.iframe);
+    });
+    const ready = { source: "hf-preview", type: "ready", ...runtimeProtocolMetadata(30) };
+    act(() => {
+      window.dispatchEvent(new MessageEvent("message", { data: ready, source: a.contentWindow }));
+    });
+    expect(colorGradingMessages(postToB.mock.calls)).toHaveLength(0);
+    act(() => {
+      window.dispatchEvent(new MessageEvent("message", { data: ready, source: b.contentWindow }));
+    });
+
+    expect(colorGradingMessages(postToB.mock.calls)).toHaveLength(1);
+    expect(postToA).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+});

package/src/components/editor/useColorGradingController.ts

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
@@ -430,6 +431,7 @@ export function useColorGradingController({
     [previewIframeRef, target],
   );
 
+  const livePreviewIframe = useLivePreviewIframe();
   useEffect(() => {
     const iframe = previewIframeRef?.current;
     if (!iframe) return;
@@ -455,7 +457,13 @@ export function useColorGradingController({
       window.removeEventListener("message", onMessage);
       window.clearTimeout(timer);
     };
-  }, [postColorGrading, postCompare, previewIframeRef, scheduleRuntimeStatusRefresh]);
+  }, [
+    postColorGrading,
+    postCompare,
+    previewIframeRef,
+    scheduleRuntimeStatusRefresh,
+    livePreviewIframe,
+  ]);
 
   useEffect(
     () => () => {

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

@@ -0,0 +1,76 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { useColorGradingPreviews } from "./useColorGradingPreviews";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  usePreviewIframeStore.setState({ iframe: null });
+  document.body.innerHTML = "";
+});
+
+function createFrame() {
+  return document.body.appendChild(document.createElement("iframe"));
+}
+
+function installRenderer(iframe: HTMLIFrameElement) {
+  const renderPreviews = vi.fn().mockResolvedValue({
+    width: 160,
+    height: 90,
+    images: [{ id: "bright-pop", dataUrl: "data:image/png;base64,x" }],
+  });
+  (iframe.contentWindow as unknown as { __hf: unknown }).__hf = {
+    colorGrading: { renderPreviews },
+  };
+  return renderPreviews;
+}
+
+describe("useColorGradingPreviews after the preview iframe is replaced", () => {
+  it("requests preset previews from the new iframe's runtime", async () => {
+    vi.useFakeTimers();
+    const a = createFrame();
+    const b = createFrame();
+    const renderOnB = installRenderer(b);
+    const ref = { current: a as HTMLIFrameElement | null };
+    usePreviewIframeStore.getState().setIframe(a);
+    const grading = normalizeHfColorGrading({ preset: "neutral" });
+    if (!grading) throw new Error("expected neutral grading");
+    const gradingRef = { current: grading };
+    const target = { selector: "#v" } as never;
+    const postColorGrading = vi.fn();
+    let requestPresetPreviews: () => void = () => {};
+    function Host() {
+      requestPresetPreviews = useColorGradingPreviews({
+        grading,
+        gradingRef,
+        identityKey: "k",
+        target,
+        previewIframeRef: ref,
+        postColorGrading,
+      }).requestPresetPreviews;
+      return null;
+    }
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    act(() => root.render(React.createElement(Host)));
+    act(() => requestPresetPreviews());
+    act(() => vi.advanceTimersByTime(0));
+
+    act(() => {
+      ref.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    act(() => vi.advanceTimersByTime(0));
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(renderOnB).toHaveBeenCalled();
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+});

package/src/components/editor/useColorGradingPreviews.ts

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
 import {
   HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
@@ -155,6 +156,7 @@ export function useColorGradingPreviews({
   }
   const previews = state.identityKey === identityKey ? state.previews : emptyPreviews();
 
+  const livePreviewIframe = useLivePreviewIframe();
   useEffect(() => {
     if (!request) return;
     const { kind } = request;
@@ -245,7 +247,15 @@ export function useColorGradingPreviews({
       iframe.removeEventListener("load", attempt);
       window.removeEventListener("message", onMessage);
     };
-  }, [grading.effects, grading.lut, grading.palette, previewIframeRef, request, target]);
+  }, [
+    grading.effects,
+    grading.lut,
+    grading.palette,
+    previewIframeRef,
+    livePreviewIframe,
+    request,
+    target,
+  ]);
 
   const stopAnimatedPreview = useCallback(() => {
     const session = animatedRef.current;

package/src/components/editor/usePreviewCompositionRect.test.tsx

@@ -0,0 +1,95 @@
+// @vitest-environment happy-dom
+
+import { act, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import {
+  usePreviewCompositionRect,
+  type PreviewCompositionRect,
+} from "./usePreviewCompositionRect";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  usePreviewIframeStore.getState().setIframe(null);
+  document.body.innerHTML = "";
+});
+
+function boxed<T extends HTMLElement>(el: T, box: [number, number, number, number]): T {
+  const [left, top, width, height] = box;
+  el.getBoundingClientRect = () => new DOMRect(left, top, width, height);
+  return el;
+}
+
+function mountProbe() {
+  let rect: PreviewCompositionRect | undefined;
+  function Probe() {
+    const ref = useRef<HTMLDivElement>(null);
+    rect = usePreviewCompositionRect(ref);
+    return (
+      <div
+        ref={(el) => {
+          ref.current = el;
+          if (el) boxed(el, [10, 20, 1000, 600]);
+        }}
+      />
+    );
+  }
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() => createRoot(host).render(<Probe />));
+  return () => rect;
+}
+
+function compositionFrame(box: [number, number, number, number], width: number, height: number) {
+  const iframe = boxed(document.createElement("iframe"), box);
+  document.body.append(iframe);
+  const root = iframe.contentDocument?.createElement("div");
+  root?.setAttribute("data-composition-id", "main");
+  root?.setAttribute("data-width", String(width));
+  root?.setAttribute("data-height", String(height));
+  if (root) iframe.contentDocument?.body.append(root);
+  return iframe;
+}
+
+const settle = () => new Promise((r) => setTimeout(r, 400));
+
+describe("usePreviewCompositionRect", () => {
+  it("reports the live preview iframe's box relative to the overlay, scaled to the composition", async () => {
+    const read = mountProbe();
+    const iframe = compositionFrame([110, 70, 960, 540], 1920, 1080);
+    await act(async () => {
+      usePreviewIframeStore.getState().setIframe(iframe);
+      await settle();
+    });
+    expect(read()).toEqual({
+      left: 100,
+      top: 50,
+      width: 960,
+      height: 540,
+      scaleX: 0.5,
+      scaleY: 0.5,
+    });
+  });
+
+  it("follows the iframe when a reload replaces it", async () => {
+    const read = mountProbe();
+    await act(async () => {
+      usePreviewIframeStore.getState().setIframe(compositionFrame([110, 70, 960, 540], 1920, 1080));
+      await settle();
+    });
+    await act(async () => {
+      usePreviewIframeStore.getState().setIframe(compositionFrame([60, 40, 500, 500], 1000, 1000));
+      await settle();
+    });
+    expect(read()).toEqual({
+      left: 50,
+      top: 20,
+      width: 500,
+      height: 500,
+      scaleX: 0.5,
+      scaleY: 0.5,
+    });
+  });
+});

package/src/components/editor/usePreviewCompositionRect.ts

@@ -0,0 +1,21 @@
+import { useMemo, type RefObject } from "react";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { useDomEditCompositionRect } from "./useDomEditCompositionRect";
+
+export type { DomEditCompositionRect as PreviewCompositionRect } from "./useDomEditCompositionRect";
+
+/**
+ * Where the composition sits inside `overlayRef`, in overlay pixels, plus the scale from
+ * composition units to pixels. Follows the live preview iframe across reloads.
+ */
+export function usePreviewCompositionRect(overlayRef: RefObject<HTMLDivElement | null>) {
+  const iframeRef = useMemo<RefObject<HTMLIFrameElement | null>>(
+    () => ({
+      get current() {
+        return usePreviewIframeStore.getState().iframe;
+      },
+    }),
+    [],
+  );
+  return useDomEditCompositionRect({ iframeRef, overlayRef });
+}

package/src/components/feedback/StudioFeedbackCard.tsx

@@ -243,7 +243,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 if (req) trackStudioFeedbackInterviewClick({ reason: req.reason });
                 close("sent");
               }}
-              className="h-6 flex-shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/[0.08] px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-white/35 hover:bg-white/[0.16] active:scale-[0.97] motion-reduce:transition-none"
+              className="h-6 shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/8 px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-white/35 hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none"
             >
               Talk to us, 30 min
             </a>
@@ -251,7 +251,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
           <button
             type="button"
             onClick={() => close("close")}
-            className="-mr-1 -mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-white/10 hover:text-neutral-200"
+            className="-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-white/10 hover:text-neutral-200"
             aria-label="Dismiss"
           >
             <svg
@@ -283,7 +283,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                   key={n}
                   // A resting fill, so the row reads as eleven controls rather
                   // than as a line of text that happens to be clickable.
-                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-white/[0.04] text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.14] hover:text-neutral-100 active:scale-[0.97] has-[:checked]:bg-white/90 has-[:checked]:text-neutral-900 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-white/50 motion-reduce:transition-none"
+                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-white/4 text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.14] hover:text-neutral-100 active:scale-[0.97] has-checked:bg-white/90 has-checked:text-neutral-900 has-focus-visible:ring-1 has-focus-visible:ring-white/50 motion-reduce:transition-none"
                 >
                   <input
                     type="radio"
@@ -328,8 +328,8 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                   // attached to nothing.
                   className={`h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${
                     failed
-                      ? "border-red-300/20 bg-red-100/[0.06] text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white"
-                      : "border-white/10 bg-white/[0.04] text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"
+                      ? "border-red-300/20 bg-red-100/6 text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white"
+                      : "border-white/10 bg-white/4 text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"
                   }`}
                 >
                   {preset.label}
@@ -355,12 +355,12 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 placeholder={followUp.placeholder}
                 aria-label={followUp.prompt}
                 maxLength={500}
-                className="h-7 min-w-0 flex-1 rounded-md border border-white/10 bg-black/20 px-2 text-[11px] text-neutral-100 outline-none transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
+                className="h-7 min-w-0 flex-1 rounded-md border border-white/10 bg-black/20 px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
               />
               <button
                 type="button"
                 onClick={() => submit()}
-                className="h-7 flex-shrink-0 rounded-md bg-white/10 px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-white/[0.16] active:scale-[0.97] motion-reduce:transition-none"
+                className="h-7 shrink-0 rounded-md bg-white/10 px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none"
               >
                 Send
               </button>

package/src/components/feedback/feedbackTrigger.ts

@@ -76,7 +76,6 @@ const FOLLOW_UPS: readonly FollowUpQuestion[] = [
       { label: "Layers panel", hint: "The layer tree on the right" },
       { label: "Variables panel", hint: "Composition variables on the right" },
       { label: "Blocks browser", hint: "The block library in the sidebar" },
-      { label: "Storyboard mode", hint: "The storyboard view next to Preview" },
       { label: "Caption editing", hint: "Editing caption words and presets in Studio" },
       { label: "Render history", hint: "The list of past exports" },
       { label: "Nothing", hint: "It all earns its place" },

package/src/components/nle/AssetPreviewOverlay.tsx

@@ -42,7 +42,11 @@ function AssetPreviewMedia({
 }) {
   if (kind === "image") {
     return (
-      <img src={serveUrl} alt={name} className="max-w-full max-h-[40vh] rounded object-contain" />
+      <img
+        src={serveUrl}
+        alt={name}
+        className="max-w-full max-h-[40vh] rounded-sm object-contain"
+      />
     );
   }
   if (kind === "video") {
@@ -53,7 +57,7 @@ function AssetPreviewMedia({
         autoPlay
         muted
         playsInline
-        className="max-w-full max-h-[40vh] rounded"
+        className="max-w-full max-h-[40vh] rounded-sm"
       />
     );
   }