@hyperframes/studio 0.7.81 → 0.7.83

package/src/components/editor/EaseModeControls.tsx

@@ -0,0 +1,110 @@
+/**
+ * Ease editor mode primitives: the mode radio group and the preset grid.
+ *
+ * Split out of `EaseCurveSection.tsx` to keep it under the 600-line cap
+ * (CI's file size check). Both components are presentational and stateless —
+ * they take the current selection and emit a committed ease string — so they
+ * carry the mode vocabulary (`EASE_MODES`, labels, per-mode defaults) with
+ * them rather than importing it back from the parent.
+ */
+
+import { EASE_PRESETS } from "./easePresetLibrary";
+import { MiniCurveSvg } from "./easeCurveSvg";
+import { EASE_CURVES } from "./gsapAnimationConstants";
+
+const EASE_MODES = ["curve", "spring", "wiggle"] as const;
+export type EaseMode = (typeof EASE_MODES)[number];
+
+export type Pts = [number, number, number, number];
+export const DEFAULT_CURVE: Pts = EASE_CURVES["power2.out"];
+
+export const MODE_LABELS = { curve: "Curve", spring: "Spring", wiggle: "Wiggle" } satisfies Record<
+  EaseMode,
+  string
+>;
+
+const DEFAULT_EASE_BY_MODE = {
+  curve: `custom(M0,0 C${DEFAULT_CURVE[0]},${DEFAULT_CURVE[1]} ${DEFAULT_CURVE[2]},${DEFAULT_CURVE[3]} 1,1)`,
+  spring: "spring(0.42)",
+  wiggle: "wiggle(3,easeInOut,0.12)",
+} satisfies Record<EaseMode, string>;
+
+export const EasePresetGrid = function EasePresetGrid({
+  kind,
+  currentEase,
+  onSelect,
+}: {
+  kind: EaseMode;
+  currentEase: string;
+  onSelect: (ease: string) => void;
+}) {
+  return (
+    <div className="mb-2 grid max-h-56 grid-cols-4 gap-1 overflow-y-auto pr-0.5">
+      {EASE_PRESETS.filter((preset) => preset.kind === kind).map((preset) => {
+        const isActive = currentEase === preset.ease;
+        return (
+          <button
+            key={preset.id}
+            type="button"
+            data-ease-preset-id={preset.id}
+            role="menuitemradio"
+            aria-checked={isActive}
+            tabIndex={isActive ? 0 : -1}
+            onClick={() => onSelect(preset.ease)}
+            className={`flex flex-col items-center gap-0.5 rounded-md p-1 transition-colors ${
+              isActive ? "bg-panel-accent/10 ring-1 ring-panel-accent/30" : "hover:bg-neutral-800"
+            }`}
+            title={preset.label}
+          >
+            <MiniCurveSvg ease={preset.ease} active={isActive} />
+            <span
+              className={`text-center text-[8px] leading-none ${
+                isActive ? "text-panel-accent" : "text-neutral-500"
+              }`}
+            >
+              {preset.label}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export function EaseModeToggle({
+  mode,
+  onCommit,
+}: {
+  mode: EaseMode;
+  onCommit: (ease: string) => void;
+}) {
+  return (
+    <div
+      className="mb-2 grid grid-cols-3 rounded-md bg-black/20 p-0.5"
+      role="radiogroup"
+      aria-label="Ease editor mode"
+    >
+      {EASE_MODES.map((candidateMode) => {
+        const active = candidateMode === mode;
+        return (
+          <button
+            key={candidateMode}
+            type="button"
+            data-ease-mode={candidateMode}
+            role="radio"
+            aria-checked={active}
+            onClick={() => {
+              if (active) return;
+              onCommit(DEFAULT_EASE_BY_MODE[candidateMode]);
+            }}
+            className={`rounded px-2 py-1 text-[10px] font-medium transition-colors ${
+              active ? "bg-neutral-700 text-neutral-100" : "text-neutral-500 hover:text-neutral-300"
+            }`}
+          >
+            {MODE_LABELS[candidateMode]}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -447,9 +447,8 @@ describe("PropertyPanel — Motion group (Plan 3b)", () => {
   it(
     "hides the effect list (showEffects off) when the GSAP edit handlers are absent",
     async () => {
-      // STUDIO_GSAP_PANEL_ENABLED defaults on, but none of the five required
-      // edit handlers are supplied here, so the effect-list half of the
-      // double-gate stays closed — only the Timing row shows.
+      // None of the five required edit handlers are supplied here, so the
+      // effect list stays closed — only the Timing row shows.
       const { host, root } = await renderPanel(true, animatedElement());
       openFlatGroup(host, "Motion");
       const openGroup = openGroupText(host);

package/src/components/editor/PropertyPanel.tsx

@@ -26,11 +26,7 @@ import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
 import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
 import { KeyframeNavigation } from "./KeyframeNavigation";
-import {
-  STUDIO_FLAT_INSPECTOR_ENABLED,
-  STUDIO_GSAP_PANEL_ENABLED,
-  STUDIO_KEYFRAMES_ENABLED,
-} from "./manualEditingAvailability";
+import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./manualEditingAvailability";
 import { PropertyPanelFlat } from "./PropertyPanelFlat";
 import { createGsapLivePreview } from "./gsapLivePreview";
 import { usePlayerStore, liveTime } from "../../player";
@@ -396,7 +392,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                     onCommit={(next) => commitManualOffset("x", next)}
                   />
                 </div>
-                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                {gsapAnimId && (
                   <KeyframeNavigation
                     property="x"
                     keyframes={navKeyframes}
@@ -423,7 +419,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                     onCommit={(next) => commitManualOffset("y", next)}
                   />
                 </div>
-                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                {gsapAnimId && (
                   <KeyframeNavigation
                     property="y"
                     keyframes={navKeyframes}
@@ -450,7 +446,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                     onCommit={(next) => commitManualSize("width", next)}
                   />
                 </div>
-                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                {gsapAnimId && (
                   <KeyframeNavigation
                     property="width"
                     keyframes={navKeyframes}
@@ -477,7 +473,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                     onCommit={(next) => commitManualSize("height", next)}
                   />
                 </div>
-                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                {gsapAnimId && (
                   <KeyframeNavigation
                     property="height"
                     keyframes={navKeyframes}
@@ -503,7 +499,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                     onCommit={(next) => commitManualRotation(next.replace("°", ""))}
                   />
                 </div>
-                {STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
+                {gsapAnimId && (
                   <KeyframeNavigation
                     property="rotation"
                     keyframes={navKeyframes}
@@ -551,8 +547,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
           </Section>
         )}
 
-        {STUDIO_GSAP_PANEL_ENABLED &&
-          onUpdateGsapProperty &&
+        {onUpdateGsapProperty &&
           onUpdateGsapMeta &&
           onDeleteGsapAnimation &&
           onAddGsapProperty &&

package/src/components/editor/PropertyPanelFlat.tsx

@@ -16,7 +16,6 @@ import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
 import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
 import { createGsapLivePreview } from "./gsapLivePreview";
 import { formatTextFieldPreview } from "./propertyPanelSections";
-import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability";
 import { useColorGradingController } from "./useColorGradingController";
 import { usePlayerStore } from "../../player";
 import {
@@ -224,7 +223,6 @@ export function PropertyPanelFlat({
   // Match the legacy Motion gate while preserving TypeScript narrowing.
   const showMotionTiming = Boolean(sections.timing);
   const gsapEffectHandlers =
-    STUDIO_GSAP_PANEL_ENABLED &&
     onUpdateGsapProperty &&
     onUpdateGsapMeta &&
     onDeleteGsapAnimation &&

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

@@ -1,5 +1,24 @@
 import { describe, expect, it } from "vitest";
-import { resolveFloatingPanelPosition } from "./floatingPanel";
+import { clampCentredLeft, resolveFloatingPanelPosition } from "./floatingPanel";
+
+describe("clampCentredLeft", () => {
+  it("leaves a bubble that already fits alone", () => {
+    expect(clampCentredLeft(400, 104, 800, 8)).toBe(400);
+  });
+
+  it("pushes a bubble whose left half would leave the viewport", () => {
+    // Trigger centred at x=20 with a 104px bubble would render at left=-32.
+    expect(clampCentredLeft(20, 104, 800, 8)).toBe(60);
+  });
+
+  it("pushes a bubble whose right half would leave the viewport", () => {
+    expect(clampCentredLeft(790, 104, 800, 8)).toBe(740);
+  });
+
+  it("keeps the left edge visible when the bubble is wider than the viewport", () => {
+    expect(clampCentredLeft(10, 900, 800, 8)).toBe(458);
+  });
+});
 
 describe("resolveFloatingPanelPosition", () => {
   it("places the panel below the anchor when there is space", () => {

package/src/components/editor/floatingPanel.ts

@@ -22,6 +22,21 @@ function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
 
+/**
+ * Clamp the centre point of a centred bubble so the whole bubble stays in the
+ * viewport: clamping the centre alone lets a wide bubble hang off the edge.
+ */
+export function clampCentredLeft(
+  centreX: number,
+  bubbleWidth: number,
+  viewportWidth: number,
+  margin: number,
+): number {
+  const half = bubbleWidth / 2;
+  const min = half + margin;
+  return clamp(centreX, min, Math.max(min, viewportWidth - half - margin));
+}
+
 export function resolveFloatingPanelPosition(
   anchor: FloatingRect,
   viewport: FloatingSize,

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

@@ -16,35 +16,18 @@ describe("manual editing availability", () => {
     vi.resetModules();
   });
 
-  it("enables inspector selection and manual dragging by default", async () => {
-    const availability = await loadAvailabilityWithEnv({});
-
-    expect(availability.STUDIO_PREVIEW_MANUAL_EDITING_ENABLED).toBe(true);
-    expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(true);
-    expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
-  });
-
-  it("disables preview selection when the inspector panel flag is explicitly off", async () => {
-    const availability = await loadAvailabilityWithEnv({
-      VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "0",
-    });
-
-    expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(false);
-    expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(false);
-  });
-
   it("enables feature flags with explicit truthy env values", () => {
     expect(
       resolveStudioBooleanEnvFlag(
-        { VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING: "true" },
-        ["VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING"],
+        { VITE_STUDIO_ENABLE_FLAT_INSPECTOR: "true" },
+        ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR"],
         false,
       ),
     ).toBe(true);
     expect(
       resolveStudioBooleanEnvFlag(
-        { VITE_STUDIO_ENABLE_MOTION_PANEL: "1" },
-        ["VITE_STUDIO_ENABLE_MOTION_PANEL"],
+        { VITE_STUDIO_SDK_CUTOVER_ENABLED: "1" },
+        ["VITE_STUDIO_SDK_CUTOVER_ENABLED"],
         false,
       ),
     ).toBe(true);
@@ -53,15 +36,15 @@ describe("manual editing availability", () => {
   it("disables feature flags with explicit falsy env values", () => {
     expect(
       resolveStudioBooleanEnvFlag(
-        { VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING: "off" },
-        ["VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING"],
+        { VITE_STUDIO_ENABLE_FLAT_INSPECTOR: "off" },
+        ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR"],
         true,
       ),
     ).toBe(false);
     expect(
       resolveStudioBooleanEnvFlag(
-        { VITE_STUDIO_ENABLE_MOTION_PANEL: "0" },
-        ["VITE_STUDIO_ENABLE_MOTION_PANEL"],
+        { VITE_STUDIO_SDK_CUTOVER_ENABLED: "0" },
+        ["VITE_STUDIO_SDK_CUTOVER_ENABLED"],
         true,
       ),
     ).toBe(false);
@@ -70,18 +53,8 @@ describe("manual editing availability", () => {
   it("supports legacy flag aliases after the preferred name", () => {
     expect(
       resolveStudioBooleanEnvFlag(
-        { VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED: "yes" },
-        [
-          "VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING",
-          "VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED",
-        ],
-        false,
-      ),
-    ).toBe(true);
-    expect(
-      resolveStudioBooleanEnvFlag(
-        { VITE_STUDIO_MOTION_PANEL_ENABLED: "enabled" },
-        ["VITE_STUDIO_ENABLE_MOTION_PANEL", "VITE_STUDIO_MOTION_PANEL_ENABLED"],
+        { VITE_STUDIO_FLAT_INSPECTOR_ENABLED: "yes" },
+        ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
         false,
       ),
     ).toBe(true);
@@ -91,10 +64,10 @@ describe("manual editing availability", () => {
     expect(
       resolveStudioBooleanEnvFlag(
         {
-          VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "off",
-          VITE_STUDIO_INSPECTOR_PANELS_ENABLED: "on",
+          VITE_STUDIO_ENABLE_FLAT_INSPECTOR: "off",
+          VITE_STUDIO_FLAT_INSPECTOR_ENABLED: "on",
         },
-        ["VITE_STUDIO_ENABLE_INSPECTOR_PANELS", "VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],
+        ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
         true,
       ),
     ).toBe(false);

package/src/components/editor/manualEditingAvailability.ts

@@ -1,7 +1,5 @@
 export type StudioFeatureFlagEnv = Record<string, boolean | string | undefined>;
 
-const STUDIO_PREVIEW_MANUAL_DRAGGING_ENV = "VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING";
-const STUDIO_INSPECTOR_PANELS_ENV = "VITE_STUDIO_ENABLE_INSPECTOR_PANELS";
 const TRUTHY_ENV_VALUES = new Set(["1", "true", "yes", "on", "enabled"]);
 const FALSY_ENV_VALUES = new Set(["0", "false", "no", "off", "disabled"]);
 
@@ -40,44 +38,6 @@ const runtimeEnv =
     : {};
 const env = { ...(import.meta.env ?? {}), ...runtimeEnv } as StudioFeatureFlagEnv;
 
-export const STUDIO_PREVIEW_MANUAL_EDITING_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  [STUDIO_PREVIEW_MANUAL_DRAGGING_ENV, "VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED"],
-  true,
-);
-
-export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  [STUDIO_INSPECTOR_PANELS_ENV, "VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],
-  true,
-);
-
-export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_ENABLE_BLOCKS_PANEL", "VITE_STUDIO_BLOCKS_PANEL_ENABLED"],
-  true,
-);
-
-export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_ENABLE_GSAP_PANEL", "VITE_STUDIO_GSAP_PANEL_ENABLED"],
-  true,
-);
-
-export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
-  true,
-);
-
-export const STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_ENABLE_RAZOR_TOOL", "VITE_STUDIO_RAZOR_TOOL_ENABLED"],
-  true,
-);
-
-export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
-
 // Stage 7 Step 3c: SDK cutover — routes inline-style ops through SDK dispatch
 // instead of the server patch-element API. Default false; enable via
 // VITE_STUDIO_SDK_CUTOVER_ENABLED=true. Requires SDK session to be open.
@@ -114,5 +74,4 @@ export const STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
-export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";
 import { resolveEnabledSdkFamilies } from "../../utils/sdkCutoverPolicy";

package/src/components/editor/propertyPanel3dTransform.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import type { DomEditSelection } from "./domEditingTypes";
-import { STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
 import { MetricField } from "./propertyPanelPrimitives";
 import { KeyframeNavigation } from "./KeyframeNavigation";
 import { formatPxMetricValue, parsePxMetricValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
@@ -259,7 +258,7 @@ function Transform3dField({
           }}
         />
       </div>
-      {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
+      {(gsapAnimId || onCommitAnimatedProperty) && (
         <KeyframeNavigation
           property={prop}
           keyframes={ctx.gsapKeyframes}

package/src/components/editor/propertyPanelFlatLayoutSection.tsx

@@ -2,7 +2,6 @@ import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { FlatRow, FlatSegmentedRow, FlatSelectRow } from "./propertyPanelFlatPrimitives";
 import { KeyframeNavigation } from "./KeyframeNavigation";
 import { formatPxMetricValue } from "./propertyPanelHelpers";
-import { STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
 import { resolveValueTier } from "./propertyPanelValueTier";
 import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
 import type { DomEditSelection } from "./domEditingTypes";
@@ -69,7 +68,7 @@ function KeyframeGutter({
   | "onConvertToKeyframes"
 >) {
   const track = useTrackDesignInput();
-  if (!STUDIO_KEYFRAMES_ENABLED || !gsapAnimId) return null;
+  if (!gsapAnimId) return null;
   const hasKeyframesOnProp = Boolean(navKeyframes?.some((kf) => property in kf.properties));
   return (
     <span data-flat-kf-gutter="true" style={{ opacity: hasKeyframesOnProp ? 1 : 0.3 }}>

package/src/components/nle/PreviewOverlays.tsx

@@ -4,12 +4,6 @@ import { DomEditOverlay } from "../editor/DomEditOverlay";
 import { MotionPathOverlay } from "../editor/MotionPathOverlay";
 import { SnapToolbar } from "../editor/SnapToolbar";
 import { useCompositionDimensions } from "../../hooks/useCompositionDimensions";
-import {
-  STUDIO_INSPECTOR_PANELS_ENABLED,
-  STUDIO_KEYFRAMES_ENABLED,
-  STUDIO_PREVIEW_MANUAL_EDITING_ENABLED,
-  STUDIO_PREVIEW_SELECTION_ENABLED,
-} from "../editor/manualEditingAvailability";
 import { useStudioPlaybackContext, useStudioShellContext } from "../../contexts/StudioContext";
 import {
   useDomEditActionsContext,
@@ -203,21 +197,17 @@ export function PreviewOverlays({
     return <CaptionOverlay iframeRef={previewIframeRef} />;
   }
 
-  if (!STUDIO_INSPECTOR_PANELS_ENABLED) return null;
-
   return (
     <>
       <DomEditOverlay
         iframeRef={previewIframeRef}
         activeCompositionPath={activeCompPath}
         hoverSelection={
-          STUDIO_PREVIEW_SELECTION_ENABLED && !captionEditMode && !compositionLoading && !isPlaying
-            ? domEditHoverSelection
-            : null
+          !captionEditMode && !compositionLoading && !isPlaying ? domEditHoverSelection : null
         }
         selection={shouldShowSelectedDomBounds ? domEditSelection : null}
         groupSelections={shouldShowSelectedDomBounds ? domEditGroupSelections : []}
-        allowCanvasMovement={STUDIO_PREVIEW_MANUAL_EDITING_ENABLED && !isGestureRecording}
+        allowCanvasMovement={!isGestureRecording}
         onCanvasMouseDown={handlePreviewCanvasMouseDown}
         onCanvasPointerMove={handlePreviewCanvasPointerMove}
         onCanvasPointerLeave={handlePreviewCanvasPointerLeave}
@@ -273,14 +263,12 @@ export function PreviewOverlays({
         onMarqueeSelect={applyMarqueeSelection}
       />
       <SnapToolbar onSnapChange={setSnapPrefs} />
-      {STUDIO_KEYFRAMES_ENABLED && (
-        <MotionPathOverlay
-          iframeRef={previewIframeRef}
-          selection={shouldShowMotionPath ? domEditSelection : null}
-          compositionSize={compositionDimensions}
-          isPlaying={isPlaying}
-        />
-      )}
+      <MotionPathOverlay
+        iframeRef={previewIframeRef}
+        selection={shouldShowMotionPath ? domEditSelection : null}
+        compositionSize={compositionDimensions}
+        isPlaying={isPlaying}
+      />
       {gestureOverlay}
     </>
   );

package/src/components/renders/RenderQueue.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { RenderQueue } from "./RenderQueue";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+});
+
+function mountRenderQueue(onStartRender: ReturnType<typeof vi.fn>) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => {
+    root?.render(
+      <RenderQueue
+        jobs={[]}
+        projectId="demo"
+        onDelete={vi.fn()}
+        onClearCompleted={vi.fn()}
+        onStartRender={onStartRender}
+        isRendering={false}
+        compositionDimensions={{ width: 1920, height: 1080 }}
+      />,
+    );
+  });
+  return host;
+}
+
+describe("RenderQueue resolution submission", () => {
+  it("submits the canonical landscape 4K preset selected by the user", () => {
+    const onStartRender = vi.fn();
+    const host = mountRenderQueue(onStartRender);
+    const resolutionSelect = [...host.querySelectorAll("select")].find((select) =>
+      [...select.options].some((option) => option.textContent?.startsWith("4K")),
+    );
+    if (!resolutionSelect) throw new Error("resolution selector did not render");
+
+    act(() => {
+      resolutionSelect.value = "4k";
+      resolutionSelect.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    const exportButton = [...host.querySelectorAll("button")].find(
+      (button) => button.textContent === "Export",
+    );
+    if (!exportButton) throw new Error("export button did not render");
+    act(() => {
+      exportButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+  });
+});