@hyperframes/studio 0.8.0 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "",
   "repository": {
     "type": "git",
@@ -47,11 +47,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.0",
-    "@hyperframes/player": "0.8.0",
-    "@hyperframes/studio-server": "0.8.0",
-    "@hyperframes/parsers": "0.8.0",
-    "@hyperframes/sdk": "0.8.0"
+    "@hyperframes/core": "0.8.2",
+    "@hyperframes/player": "0.8.2",
+    "@hyperframes/parsers": "0.8.2",
+    "@hyperframes/sdk": "0.8.2",
+    "@hyperframes/studio-server": "0.8.2"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -68,7 +68,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.0"
+    "@hyperframes/producer": "0.8.2"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioHeader.tsx

@@ -229,6 +229,7 @@ export function StudioHeader({
   // the shareable Studio URL, so a dead click would rewrite a link.
   const { effectiveRightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
   const isRendering = renderQueue.isRendering;
+  const ffmpegMissing = renderQueue.ffmpegMissing;
 
   return (
     <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
@@ -382,7 +383,11 @@ export function StudioHeader({
         </Tooltip>
         <Tooltip
           label={
-            isRendering ? "A render is already in progress" : "Render and export this composition"
+            ffmpegMissing
+              ? "FFmpeg is not installed. Opens the Renders panel with the install command."
+              : isRendering
+                ? "A render is already in progress"
+                : "Render and export this composition"
           }
           side="bottom"
         >
@@ -393,6 +398,12 @@ export function StudioHeader({
               if (isRendering) return;
               setRightPanelTab("renders");
               setRightCollapsed(false);
+              // Without an encoder this render cannot finish, so the click
+              // delivers the user to the prompt that fixes it instead of
+              // queueing a job that exists only to fail. Disabling the button
+              // would leave them staring at a dead control with no route to
+              // the explanation.
+              if (ffmpegMissing) return;
               onExport?.();
             }}
             className="h-7 flex items-center gap-1.5 px-3 rounded-md text-[11px] font-semibold bg-studio-accent text-[#09090B] enabled:hover:brightness-110 transition-[filter,transform] enabled:active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"

package/src/components/StudioLeftSidebar.tsx

@@ -43,6 +43,8 @@ export function StudioLeftSidebar({
     handlePanelResizeStart,
     handlePanelResizeMove,
     handlePanelResizeEnd,
+    setRightPanelTab,
+    setRightCollapsed,
   } = usePanelLayoutContext();
   const { projectId, renderQueue, waitForPendingDomEditSaves } = useStudioShellContext();
   const {
@@ -64,11 +66,22 @@ export function StudioLeftSidebar({
 
   const handleRenderComposition = useCallback(
     async (comp: string) => {
+      // startRender refuses without an encoder, so nothing unfinishable gets
+      // queued either way. What it cannot do from here is show the reason:
+      // its refusal lands as a row in the Renders panel, which may be
+      // collapsed or on another tab, so the click would look like nothing
+      // happened. Same move the header makes: put the prompt in front of the
+      // user, then stop.
+      if (renderQueue.ffmpegMissing) {
+        setRightPanelTab("renders");
+        setRightCollapsed(false);
+        return;
+      }
       await waitForPendingDomEditSaves();
       const { format, quality, fps } = getPersistedRenderSettings();
       await renderQueue.startRender({ composition: comp, format, quality, fps });
     },
-    [renderQueue, waitForPendingDomEditSaves],
+    [renderQueue, waitForPendingDomEditSaves, setRightPanelTab, setRightCollapsed],
   );
 
   if (effectiveLeftCollapsed) {

package/src/components/StudioRightPanel.tsx

@@ -6,11 +6,10 @@ import { PropertyPanel } from "./editor/PropertyPanel";
 import { LayersPanel } from "./editor/LayersPanel";
 import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
 import { BlockParamsPanel } from "./editor/BlockParamsPanel";
-import { RenderQueue } from "./renders/RenderQueue";
+import { RenderQueuePanel } from "./renders/RenderQueuePanel";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
 import { VariablesPanel } from "./panels/VariablesPanel";
 import { PanelTabButton } from "./PanelTabButton";
-import { usePreviewVariablesStore } from "../hooks/previewVariablesStore";
 import type { RenderJob } from "./renders/useRenderQueue";
 import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./editor/manualEditingAvailability";
 import { useSlideshowPersist } from "../hooks/useSlideshowPersist";
@@ -66,7 +65,6 @@ export function StudioRightPanel({
     projectId,
     activeCompPath,
     showToast,
-    compositionDimensions,
     waitForPendingDomEditSaves,
     renderQueue,
   } = useStudioShellContext();
@@ -385,36 +383,7 @@ export function StudioRightPanel({
     </DesignPanelPromoteProvider>
   );
 
-  const renderQueuePanel = (
-    <RenderQueue
-      jobs={renderJobs}
-      projectId={projectId}
-      onDelete={renderQueue.deleteRender}
-      onCancel={renderQueue.cancelRender}
-      loadError={renderQueue.loadError}
-      onRetryLoad={renderQueue.reloadRenders}
-      actionError={renderQueue.actionError}
-      onDismissActionError={renderQueue.dismissActionError}
-      onClearCompleted={renderQueue.clearCompleted}
-      onStartRender={async (format, quality, resolution, fps) => {
-        await waitForPendingDomEditSaves();
-        const composition =
-          activeCompPath && activeCompPath !== "index.html" ? activeCompPath : undefined;
-        await renderQueue.startRender({
-          fps,
-          quality,
-          format,
-          resolution,
-          composition,
-          // Render what the user is previewing: active variable overrides
-          // from the Variables panel ride along (undefined = defaults).
-          variables: usePreviewVariablesStore.getState().values ?? undefined,
-        });
-      }}
-      compositionDimensions={compositionDimensions}
-      isRendering={renderQueue.isRendering}
-    />
-  );
+  const renderQueuePanel = <RenderQueuePanel />;
 
   return (
     <>

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

@@ -0,0 +1,105 @@
+// @vitest-environment happy-dom
+
+// The card's job is to be actionable at the exact moment someone is stuck.
+// The case worth pinning is a recheck that finds nothing: it changes no other
+// pixel on screen, so without an explicit cue the button reads as broken.
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { FfmpegRequiredNotice } from "./FfmpegRequiredNotice";
+import type { FfmpegStatus } from "./useFfmpegStatus";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const MISSING: FfmpegStatus = {
+  ok: false,
+  title: "FFmpeg not found",
+  detail: "FFmpeg is required to encode video.",
+  hint: "brew install ffmpeg",
+  command: "brew install ffmpeg",
+};
+
+let root: Root | null = null;
+let host: HTMLElement;
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+  vi.useRealTimers();
+});
+
+function render(props: {
+  status?: FfmpegStatus;
+  checking?: boolean;
+  onRecheck?: () => void;
+}): void {
+  act(() => {
+    root?.render(
+      <FfmpegRequiredNotice
+        status={props.status ?? MISSING}
+        checking={props.checking ?? false}
+        onRecheck={props.onRecheck ?? vi.fn()}
+      />,
+    );
+  });
+}
+
+describe("FfmpegRequiredNotice", () => {
+  it("leads with the command, not the apology", () => {
+    render({});
+
+    expect(host.querySelector("code")?.textContent).toBe("brew install ffmpeg");
+    expect(host.textContent).toContain("FFmpeg not found");
+  });
+
+  it("says so when a recheck still finds nothing", () => {
+    render({ checking: false });
+    expect(host.textContent).not.toContain("Still not found");
+
+    render({ checking: true });
+    expect(host.textContent).toContain("Checking…");
+
+    render({ checking: false });
+    expect(host.textContent).toContain("Still not found");
+  });
+
+  it("retires the cue so it cannot be mistaken for the card's steady state", () => {
+    render({ checking: false });
+    render({ checking: true });
+    render({ checking: false });
+    expect(host.textContent).toContain("Still not found");
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(host.textContent).not.toContain("Still not found");
+  });
+
+  it("shows no cue before the user has ever asked for a recheck", () => {
+    render({ checking: false });
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(host.textContent).not.toContain("Still not found");
+  });
+
+  it("falls back to the prose hint on a platform with no single command", () => {
+    render({
+      status: { ok: false, title: "FFmpeg not found", hint: "See the download page." },
+    });
+
+    expect(host.querySelector("code")).toBeNull();
+    expect(host.textContent).toContain("See the download page.");
+  });
+});

package/src/components/renders/FfmpegRequiredNotice.tsx

@@ -0,0 +1,133 @@
+import { memo, useEffect, useRef, useState } from "react";
+import { copyTextToClipboard } from "../../utils/clipboard";
+import type { FfmpegStatus } from "./useFfmpegStatus";
+
+const DOWNLOAD_URL = "https://ffmpeg.org/download.html";
+const CUE_MS = 1600;
+
+// Matches the focus treatment every other button in this panel uses. A control
+// the keyboard can reach but not see focus on is unusable without a mouse.
+const FOCUS_RING =
+  "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent";
+
+/**
+ * Shown above Export when the dev server reports no usable FFmpeg.
+ *
+ * This exists because the failure it replaces was the single most reported
+ * Studio problem: the user built a composition, pressed Export, and got
+ * "Server error (503)". The encoder had never been installed, the server knew
+ * that, and nothing said so. Saying it before the work starts, with a command
+ * they can paste, is the whole point, so the command is the loudest element
+ * here and not the apology.
+ */
+export const FfmpegRequiredNotice = memo(function FfmpegRequiredNotice({
+  status,
+  checking,
+  onRecheck,
+}: {
+  status: FfmpegStatus;
+  checking: boolean;
+  onRecheck: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  // A recheck that finds nothing changes no other pixel on screen, so without
+  // this the button reads as broken at the exact moment the user is most
+  // unsure. Motion alone would not do: the result has to survive being missed.
+  const [recheckFailed, setRecheckFailed] = useState(false);
+  const wasChecking = useRef(false);
+  const cueTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    // Still mounted after a check finished means the answer was "still no":
+    // a success unmounts this card entirely.
+    if (wasChecking.current && !checking) setRecheckFailed(true);
+    wasChecking.current = checking;
+  }, [checking]);
+
+  useEffect(() => {
+    if (!recheckFailed) return;
+    cueTimer.current = setTimeout(() => setRecheckFailed(false), CUE_MS);
+    return () => clearTimeout(cueTimer.current);
+  }, [recheckFailed]);
+
+  useEffect(() => () => clearTimeout(cueTimer.current), []);
+
+  const copy = async (command: string) => {
+    const ok = await copyTextToClipboard(command);
+    if (!ok) return;
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), CUE_MS);
+  };
+
+  // Concentric: outer radius (12) minus padding (10) equals the inner radius
+  // (2). Mismatched nesting here is what makes a card look subtly wrong.
+  return (
+    <div
+      role="alert"
+      className="flex flex-col gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-2.5"
+    >
+      <div className="flex flex-col gap-0.5">
+        <span className="text-[11px] font-semibold text-amber-300">
+          {status.title ?? "FFmpeg not found"}
+        </span>
+        {/* text-2, not the panel's usual text-4 for secondary copy: the amber
+            wash lifts the background, and text-4 measures 2.2:1 on it against
+            the 4.5:1 minimum. This is the line that explains why Export is
+            off, so it has to be readable. text-2 measures 6.6:1. */}
+        <span className="text-[10px] leading-snug text-pretty text-panel-text-2">
+          {status.detail ?? "FFmpeg is required to encode video."}
+        </span>
+      </div>
+
+      {status.command ? (
+        <div className="flex items-center gap-1.5">
+          <code className="flex-1 overflow-x-auto whitespace-nowrap rounded-sm bg-black/40 px-2 py-1 text-[10px] text-panel-text-2">
+            {status.command}
+          </code>
+          {/* Fixed width so swapping the label to "Copied" cannot shift the
+              command block sideways under the pointer. */}
+          <button
+            type="button"
+            onClick={() => void copy(status.command ?? "")}
+            className={`h-6 w-14 flex-shrink-0 rounded-sm border border-amber-500/30 text-[10px] font-medium text-amber-200 transition-colors hover:bg-amber-500/20 active:scale-[0.98] ${FOCUS_RING}`}
+          >
+            {copied ? "Copied" : "Copy"}
+          </button>
+        </div>
+      ) : (
+        status.hint && (
+          <span className="text-[10px] leading-snug text-pretty text-panel-text-2">
+            {status.hint}
+          </span>
+        )
+      )}
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={onRecheck}
+          disabled={checking}
+          className={`rounded-sm py-0.5 text-[10px] font-medium text-amber-200 underline-offset-2 transition-colors hover:underline disabled:opacity-50 ${FOCUS_RING}`}
+        >
+          {checking ? "Checking…" : "Recheck"}
+        </button>
+        <a
+          href={DOWNLOAD_URL}
+          target="_blank"
+          rel="noreferrer"
+          className={`rounded-sm py-0.5 text-[10px] text-panel-text-2 underline-offset-2 transition-colors hover:text-panel-text-0 hover:underline ${FOCUS_RING}`}
+        >
+          Other install options
+        </a>
+        {/* Last in the row and only ever appended, so appearing and vanishing
+            moves nothing that sits before it. */}
+        <span
+          aria-live="polite"
+          className="ml-auto text-[10px] text-panel-text-2 transition-opacity"
+        >
+          {recheckFailed ? "Still not found" : ""}
+        </span>
+      </div>
+    </div>
+  );
+});

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

@@ -2,13 +2,24 @@
 
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { RenderQueue } from "./RenderQueue";
+import type { FfmpegStatus } from "./useFfmpegStatus";
+
+// Encoder availability arrives as a prop (useRenderQueue owns the probe), so
+// each case just states the environment it is about.
+let ffmpegStatus: FfmpegStatus | null = { ok: true };
+const recheck = vi.fn();
 
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
 let root: Root | null = null;
 
+beforeEach(() => {
+  ffmpegStatus = { ok: true };
+  recheck.mockClear();
+});
+
 afterEach(() => {
   if (root) act(() => root?.unmount());
   root = null;
@@ -29,6 +40,9 @@ function mountRenderQueue(onStartRender: ReturnType<typeof vi.fn>) {
         onStartRender={onStartRender}
         isRendering={false}
         compositionDimensions={{ width: 1920, height: 1080 }}
+        ffmpeg={ffmpegStatus}
+        ffmpegChecking={false}
+        onRecheckFfmpeg={recheck}
       />,
     );
   });
@@ -60,3 +74,71 @@ describe("RenderQueue resolution submission", () => {
     expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
   });
 });
+
+function exportButtonIn(host: HTMLElement): HTMLButtonElement {
+  const button = [...host.querySelectorAll("button")].find((b) => b.textContent === "Export");
+  if (!button) throw new Error("export button did not render");
+  return button;
+}
+
+describe("RenderQueue FFmpeg gate", () => {
+  it("refuses Export and shows the install command when the server reports no FFmpeg", () => {
+    ffmpegStatus = {
+      ok: false,
+      title: "FFmpeg not found",
+      detail: "FFmpeg is required to encode video.",
+      hint: "brew install ffmpeg",
+      command: "brew install ffmpeg",
+    };
+    const onStartRender = vi.fn();
+    const host = mountRenderQueue(onStartRender);
+
+    expect(host.textContent).toContain("FFmpeg not found");
+    expect(host.querySelector("code")?.textContent).toBe("brew install ffmpeg");
+
+    const exportButton = exportButtonIn(host);
+    expect(exportButton.disabled).toBe(true);
+    act(() => {
+      exportButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    expect(onStartRender).not.toHaveBeenCalled();
+  });
+
+  it("offers a recheck so installing FFmpeg does not require restarting Studio", () => {
+    ffmpegStatus = { ok: false, title: "FFmpeg not found", command: "brew install ffmpeg" };
+    const host = mountRenderQueue(vi.fn());
+
+    const recheckButton = [...host.querySelectorAll("button")].find(
+      (b) => b.textContent === "Recheck",
+    );
+    if (!recheckButton) throw new Error("recheck button did not render");
+    act(() => {
+      recheckButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(recheck).toHaveBeenCalledTimes(1);
+  });
+
+  // An unreachable or older dev server answers nothing. Treating "no answer"
+  // as "not installed" would lock Export for setups that render fine.
+  it("leaves Export usable when the probe returns no answer", () => {
+    ffmpegStatus = null;
+    const onStartRender = vi.fn();
+    const host = mountRenderQueue(onStartRender);
+
+    expect(host.textContent).not.toContain("FFmpeg not found");
+    const exportButton = exportButtonIn(host);
+    expect(exportButton.disabled).toBe(false);
+    act(() => {
+      exportButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    expect(onStartRender).toHaveBeenCalledTimes(1);
+  });
+
+  it("says nothing when FFmpeg is present", () => {
+    const host = mountRenderQueue(vi.fn());
+
+    expect(host.textContent).not.toContain("FFmpeg not found");
+    expect(exportButtonIn(host).disabled).toBe(false);
+  });
+});

package/src/components/renders/RenderQueue.tsx

@@ -2,6 +2,8 @@ import { memo, useState, useRef, useEffect, useLayoutEffect, useId } from "react
 import { createPortal } from "react-dom";
 import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 import { RenderQueueItem } from "./RenderQueueItem";
+import { FfmpegRequiredNotice } from "./FfmpegRequiredNotice";
+import type { FfmpegStatus } from "./useFfmpegStatus";
 import { Button } from "../ui/Button";
 import { resolveFloatingPanelPosition, type FloatingPosition } from "../editor/floatingPanel";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
@@ -41,6 +43,13 @@ interface RenderQueueProps {
    * a 1080p or 4K scale. `null` falls back to landscape (legacy default).
    */
   compositionDimensions?: CompositionDimensions | null;
+  /**
+   * Encoder availability, owned by useRenderQueue so the panel's Export button
+   * and the header's agree. `null` means "no answer", not "missing".
+   */
+  ffmpeg: FfmpegStatus | null;
+  ffmpegChecking: boolean;
+  onRecheckFfmpeg: () => void;
 }
 
 // Orientation is derived from the composition's authored aspect ratio,
@@ -266,11 +275,17 @@ function FormatExportButton({
   isRendering,
   compositionDimensions,
   lastRenderDurationMs,
+  ffmpeg,
+  ffmpegChecking,
+  onRecheckFfmpeg,
 }: {
   onStartRender: StartRenderHandler;
   isRendering: boolean;
   compositionDimensions?: CompositionDimensions | null;
   lastRenderDurationMs?: number;
+  ffmpeg: FfmpegStatus | null;
+  ffmpegChecking: boolean;
+  onRecheckFfmpeg: () => void;
 }) {
   const persisted = getPersistedRenderSettings();
   const [format, setFormat] = useState<"mp4" | "webm" | "mov">(persisted.format);
@@ -278,6 +293,12 @@ function FormatExportButton({
   const [resolution, setResolution] = useState<RenderScale>("auto");
   const [fps, setFps] = useState<24 | 30 | 60>(persisted.fps);
 
+  // Only a definite "not installed" blocks Export. A null status means the
+  // probe gave no answer, and refusing to export on no answer would break
+  // setups that are perfectly fine. Holding the narrowed value rather than a
+  // boolean keeps the notice from re-testing what this line already decided.
+  const missingFfmpeg = ffmpeg && !ffmpeg.ok ? ffmpeg : null;
+
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
   const showQuality = format !== "mov";
 
@@ -286,6 +307,13 @@ function FormatExportButton({
 
   return (
     <div className="flex flex-col gap-3">
+      {missingFfmpeg && (
+        <FfmpegRequiredNotice
+          status={missingFfmpeg}
+          checking={ffmpegChecking}
+          onRecheck={onRecheckFfmpeg}
+        />
+      )}
       <div className="grid grid-cols-2 gap-2">
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-1">
@@ -369,10 +397,12 @@ function FormatExportButton({
         variant="primary"
         size="md"
         loading={isRendering}
+        disabled={missingFfmpeg !== null}
+        title={missingFfmpeg ? "Install FFmpeg to export. See the note above." : undefined}
         onClick={() => {
           // loading already disables the button; this guard also stops a
           // double-click in the same frame from enqueueing two renders.
-          if (isRendering) return;
+          if (isRendering || missingFfmpeg) return;
           const outputResolution = resolveResolution(resolution, compositionDimensions);
           trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
           void onStartRender(format, quality, outputResolution, fps);
@@ -403,6 +433,9 @@ export const RenderQueue = memo(function RenderQueue({
   actionError,
   onDismissActionError,
   compositionDimensions,
+  ffmpeg,
+  ffmpegChecking,
+  onRecheckFfmpeg,
 }: RenderQueueProps) {
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -427,6 +460,9 @@ export const RenderQueue = memo(function RenderQueue({
           isRendering={isRendering}
           compositionDimensions={compositionDimensions}
           lastRenderDurationMs={lastRenderDurationMs}
+          ffmpeg={ffmpeg}
+          ffmpegChecking={ffmpegChecking}
+          onRecheckFfmpeg={onRecheckFfmpeg}
         />
       </div>
 

package/src/components/renders/RenderQueuePanel.tsx

@@ -0,0 +1,56 @@
+import { memo } from "react";
+import { RenderQueue } from "./RenderQueue";
+import type { RenderJob } from "./useRenderQueue";
+import { useStudioShellContext } from "../../contexts/StudioContext";
+import { usePreviewVariablesStore } from "../../hooks/previewVariablesStore";
+
+/**
+ * The Renders tab, wired to the shell context.
+ *
+ * Split out of StudioRightPanel because every field it needs already lives in
+ * that context, so routing them through the panel only made the panel longer
+ * without giving anything a second reader.
+ */
+export const RenderQueuePanel = memo(function RenderQueuePanel() {
+  const {
+    projectId,
+    activeCompPath,
+    compositionDimensions,
+    waitForPendingDomEditSaves,
+    renderQueue,
+  } = useStudioShellContext();
+
+  return (
+    <RenderQueue
+      jobs={renderQueue.jobs as RenderJob[]}
+      projectId={projectId}
+      onDelete={renderQueue.deleteRender}
+      onCancel={renderQueue.cancelRender}
+      loadError={renderQueue.loadError}
+      onRetryLoad={renderQueue.reloadRenders}
+      actionError={renderQueue.actionError}
+      onDismissActionError={renderQueue.dismissActionError}
+      onClearCompleted={renderQueue.clearCompleted}
+      ffmpeg={renderQueue.ffmpeg}
+      ffmpegChecking={renderQueue.ffmpegChecking}
+      onRecheckFfmpeg={renderQueue.recheckFfmpeg}
+      onStartRender={async (format, quality, resolution, fps) => {
+        await waitForPendingDomEditSaves();
+        const composition =
+          activeCompPath && activeCompPath !== "index.html" ? activeCompPath : undefined;
+        await renderQueue.startRender({
+          fps,
+          quality,
+          format,
+          resolution,
+          composition,
+          // Render what the user is previewing: active variable overrides
+          // from the Variables panel ride along (undefined = defaults).
+          variables: usePreviewVariablesStore.getState().values ?? undefined,
+        });
+      }}
+      compositionDimensions={compositionDimensions}
+      isRendering={renderQueue.isRendering}
+    />
+  );
+});