fix(studio): exhaustively type RESOLUTION_OPTIONS and document layout coupling

packages/studio/src/components/renders/RenderQueue.tsx

@@ -15,22 +15,36 @@ interface RenderQueueProps {
   isRendering: boolean;
 }
 
-const RESOLUTION_OPTIONS: { value: ResolutionPreset | "auto"; label: string; title: string }[] = [
+// Indexing the table by `ResolutionPreset | "auto"` makes adding a new preset
-  { value: "auto", label: "Auto", title: "Render at the composition's authored resolution" },
+// to `core.types` (e.g. an 8K row) a TypeScript error here instead of a
-  { value: "landscape", label: "1080p", title: "1920×1080 landscape" },
+// silently missing dropdown entry. Order is fixed by the array below.
-  { value: "portrait", label: "1080p ↕", title: "1080×1920 portrait" },
+const RESOLUTION_LABELS: Record<ResolutionPreset | "auto", { label: string; title: string }> = {
-  {
+  auto: { label: "Auto", title: "Render at the composition's authored resolution" },
-    value: "landscape-4k",
+  landscape: { label: "1080p", title: "1920×1080 landscape" },
+  portrait: { label: "1080p ↕", title: "1080×1920 portrait" },
+  "landscape-4k": {
     label: "4K",
     title: "3840×2160 — supersamples a 1080p composition via Chrome DPR. Slower, larger files.",
   },
-  {
+  "portrait-4k": {
-    value: "portrait-4k",
     label: "4K ↕",
     title: "2160×3840 — supersamples a 1080p portrait composition via Chrome DPR.",
   },
+};
+
+const RESOLUTION_OPTION_ORDER: (ResolutionPreset | "auto")[] = [
+  "auto",
+  "landscape",
+  "portrait",
+  "landscape-4k",
+  "portrait-4k",
 ];
 
+const RESOLUTION_OPTIONS = RESOLUTION_OPTION_ORDER.map((value) => ({
+  value,
+  ...RESOLUTION_LABELS[value],
+}));
+
 const FORMAT_INFO: Record<"mp4" | "webm" | "mov", { label: string; desc: string }> = {
   mp4: { label: "MP4", desc: "Best for general use. Smallest file, universal playback." },
   mov: {
@@ -128,6 +142,10 @@ function FormatExportButton({
   return (
     <div className="flex items-center gap-1">
       <FormatInfoTooltip format={format} />
+      {/* Resolution must remain the leftmost <select> in this row — it
+          carries `rounded-l` for the joined-button look. If you ever hide it
+          (feature-flag, etc.), move `rounded-l` to whichever element ends up
+          leftmost. */}
       <select
         value={resolution}
         onChange={(e) => setResolution(e.target.value as ResolutionPreset | "auto")}