@hyperframes/studio 0.6.0-alpha.9 → 0.6.0

package/src/components/editor/propertyPanelStyleSections.tsx

@@ -0,0 +1,411 @@
+import { useEffect, useState } from "react";
+import { Eye, Layers, Palette, Settings, Square, Zap } from "../../icons/SystemIcons";
+import { buildDefaultGradientModel, serializeGradient } from "./gradientValue";
+import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
+import {
+  buildBoxShadowPresetValue,
+  buildClipPathValue,
+  buildInsetClipPathValue,
+  buildStrokeStyleUpdates,
+  buildStrokeWidthStyleUpdates,
+  extractBackgroundImageUrl,
+  formatNumericValue,
+  formatPxMetricValue,
+  getCssFilterFunctionPx,
+  getClipPathInsetPx,
+  inferBoxShadowPreset,
+  inferClipPathPreset,
+  LABEL,
+  normalizePanelPxValue,
+  parseNumericValue,
+  parsePxMetricValue,
+  RESPONSIVE_GRID,
+  setCssFilterFunctionPx,
+  type BoxShadowPreset,
+} from "./propertyPanelHelpers";
+import {
+  DetailField,
+  MetricField,
+  Section,
+  SegmentedControl,
+  SelectField,
+  SliderControl,
+} from "./propertyPanelPrimitives";
+import { ColorField } from "./propertyPanelColor";
+import { GradientField, ImageFillField } from "./propertyPanelFill";
+
+export function StyleSections({
+  projectId,
+  element,
+  styles,
+  assets,
+  onSetStyle,
+  onImportAssets,
+}: {
+  projectId: string;
+  element: DomEditSelection;
+  styles: Record<string, string>;
+  assets: string[];
+  onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  onImportAssets?: (files: FileList) => Promise<string[]>;
+}) {
+  const styleEditingDisabled = !element.capabilities.canEditStyles;
+  const isFlex = styles.display === "flex" || styles.display === "inline-flex";
+  const radiusValue = parseNumericValue(styles["border-radius"]) ?? 0;
+  const opacityValue = Math.round((parseNumericValue(styles.opacity) ?? 1) * 100);
+  const borderWidthValue =
+    parsePxMetricValue(styles["border-width"] ?? "") ??
+    parsePxMetricValue(styles["border-top-width"] ?? "") ??
+    0;
+  const hasVisualBackground =
+    (styles.background != null && styles.background !== "none" && styles.background !== "") ||
+    (styles["background-color"] != null &&
+      styles["background-color"] !== "transparent" &&
+      styles["background-color"] !== "rgba(0, 0, 0, 0)" &&
+      styles["background-color"] !== "") ||
+    (styles["background-image"] != null &&
+      styles["background-image"] !== "none" &&
+      styles["background-image"] !== "") ||
+    borderWidthValue > 0;
+  const borderStyleValue = styles["border-style"] || styles["border-top-style"] || "none";
+  const borderColorValue =
+    styles["border-color"] || styles["border-top-color"] || "rgba(255, 255, 255, 0.18)";
+  const boxShadowPreset = inferBoxShadowPreset(styles["box-shadow"]);
+  const filterBlurValue = getCssFilterFunctionPx(styles.filter, "blur");
+  const backdropBlurValue = getCssFilterFunctionPx(styles["backdrop-filter"], "blur");
+  const clipPathValue = styles["clip-path"] || "none";
+  const clipPathPreset = inferClipPathPreset(clipPathValue);
+  const clipInsetValue = getClipPathInsetPx(clipPathValue);
+  const backgroundImage = styles["background-image"] ?? "none";
+  const hasTextControls = isTextEditableSelection(element);
+
+  const fillMode =
+    backgroundImage && backgroundImage !== "none"
+      ? backgroundImage.includes("gradient")
+        ? "Gradient"
+        : "Image"
+      : "Solid";
+  const [preferredFillMode, setPreferredFillMode] = useState(fillMode);
+  const imageUrl = extractBackgroundImageUrl(backgroundImage);
+
+  useEffect(() => {
+    setPreferredFillMode(fillMode);
+  }, [fillMode, element.id, element.selector, backgroundImage]);
+
+  const handleFillModeChange = (nextMode: string) => {
+    setPreferredFillMode(nextMode);
+    if (nextMode === "Solid") {
+      onSetStyle("background-image", "none");
+      return;
+    }
+    if (nextMode === "Gradient" && !backgroundImage.includes("gradient")) {
+      onSetStyle(
+        "background-image",
+        serializeGradient(buildDefaultGradientModel(styles["background-color"])),
+      );
+    }
+  };
+
+  return (
+    <>
+      {isFlex && (
+        <Section title="Flex" icon={<Layers size={15} />}>
+          <div className="space-y-4">
+            <SegmentedControl
+              disabled={styleEditingDisabled}
+              value={styles["flex-direction"] || "row"}
+              onChange={(next) => onSetStyle("flex-direction", next)}
+              options={[
+                { label: "→ Row", value: "row" },
+                { label: "↓ Column", value: "column" },
+              ]}
+            />
+            <div className={RESPONSIVE_GRID}>
+              <SelectField
+                label="Justify"
+                value={styles["justify-content"] || "flex-start"}
+                disabled={styleEditingDisabled}
+                onChange={(next) => onSetStyle("justify-content", next)}
+                options={[
+                  "flex-start",
+                  "center",
+                  "space-between",
+                  "space-around",
+                  "space-evenly",
+                  "flex-end",
+                ]}
+              />
+              <SelectField
+                label="Align"
+                value={styles["align-items"] || "stretch"}
+                disabled={styleEditingDisabled}
+                onChange={(next) => onSetStyle("align-items", next)}
+                options={["stretch", "flex-start", "center", "flex-end", "baseline"]}
+              />
+            </div>
+            <DetailField
+              label="Gap"
+              value={styles.gap ?? "0px"}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("gap", next.endsWith("px") ? next : `${next}px`)}
+            />
+          </div>
+        </Section>
+      )}
+
+      {hasVisualBackground && (
+        <Section title="Radius" icon={<Settings size={15} />}>
+          <SliderControl
+            value={radiusValue}
+            min={0}
+            max={Math.max(240, Math.ceil(radiusValue))}
+            step={1}
+            disabled={styleEditingDisabled}
+            displayValue={`${formatNumericValue(radiusValue)}px`}
+            formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+            onCommit={(next) => onSetStyle("border-radius", `${formatNumericValue(next)}px`)}
+          />
+        </Section>
+      )}
+
+      <Section title="Stroke" icon={<Square size={15} />}>
+        <div className="space-y-4">
+          <div className={RESPONSIVE_GRID}>
+            <MetricField
+              label="Width"
+              value={formatPxMetricValue(borderWidthValue)}
+              disabled={styleEditingDisabled}
+              liveCommit
+              onCommit={async (next) => {
+                const normalized = normalizePanelPxValue(next, {
+                  min: 0,
+                  max: 200,
+                  fallback: borderWidthValue,
+                });
+                if (!normalized) return;
+                for (const [property, value] of buildStrokeWidthStyleUpdates(
+                  normalized,
+                  borderStyleValue,
+                )) {
+                  await onSetStyle(property, value);
+                }
+              }}
+            />
+            <SelectField
+              label="Style"
+              value={borderStyleValue}
+              disabled={styleEditingDisabled}
+              onChange={async (next) => {
+                for (const [property, value] of buildStrokeStyleUpdates(
+                  next,
+                  formatPxMetricValue(borderWidthValue),
+                )) {
+                  await onSetStyle(property, value);
+                }
+              }}
+              options={[
+                "none",
+                "solid",
+                "dashed",
+                "dotted",
+                "double",
+                "hidden",
+                "groove",
+                "ridge",
+                "inset",
+                "outset",
+              ]}
+            />
+          </div>
+          <ColorField
+            label="Stroke color"
+            value={borderColorValue}
+            disabled={styleEditingDisabled}
+            onCommit={(next) => onSetStyle("border-color", next)}
+          />
+        </div>
+      </Section>
+
+      <Section title="Effects" icon={<Zap size={15} />}>
+        <div className="space-y-4">
+          <SelectField
+            label="Shadow"
+            value={boxShadowPreset}
+            disabled={styleEditingDisabled}
+            onChange={(next) => {
+              if (next === "custom") return;
+              onSetStyle(
+                "box-shadow",
+                buildBoxShadowPresetValue(next as BoxShadowPreset, styles["box-shadow"]),
+              );
+            }}
+            options={["custom", "none", "soft", "lift", "glow"]}
+          />
+          <div className={RESPONSIVE_GRID}>
+            <div className="grid min-w-0 gap-1.5">
+              <span className={LABEL}>Layer blur</span>
+              <SliderControl
+                value={filterBlurValue}
+                min={0}
+                max={Math.max(40, Math.ceil(filterBlurValue))}
+                step={1}
+                disabled={styleEditingDisabled}
+                displayValue={`${formatNumericValue(filterBlurValue)}px`}
+                formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+                onCommit={(next) =>
+                  onSetStyle("filter", setCssFilterFunctionPx(styles.filter, "blur", next))
+                }
+              />
+            </div>
+            <div className="grid min-w-0 gap-1.5">
+              <span className={LABEL}>Backdrop</span>
+              <SliderControl
+                value={backdropBlurValue}
+                min={0}
+                max={Math.max(60, Math.ceil(backdropBlurValue))}
+                step={1}
+                disabled={styleEditingDisabled}
+                displayValue={`${formatNumericValue(backdropBlurValue)}px`}
+                formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+                onCommit={(next) =>
+                  onSetStyle(
+                    "backdrop-filter",
+                    setCssFilterFunctionPx(styles["backdrop-filter"], "blur", next),
+                  )
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      <Section title="Clip" icon={<Layers size={15} />}>
+        <div className="space-y-4">
+          <div className={RESPONSIVE_GRID}>
+            <SelectField
+              label="Overflow"
+              value={styles.overflow || "visible"}
+              disabled={styleEditingDisabled}
+              onChange={(next) => onSetStyle("overflow", next)}
+              options={["visible", "hidden", "clip", "auto", "scroll"]}
+            />
+            <SelectField
+              label="Mask"
+              value={clipPathPreset}
+              disabled={styleEditingDisabled}
+              onChange={(next) => {
+                if (next === "custom") return;
+                onSetStyle(
+                  "clip-path",
+                  buildClipPathValue(
+                    next as "none" | "inset" | "circle",
+                    radiusValue,
+                    clipPathValue,
+                  ),
+                );
+              }}
+              options={["custom", "none", "inset", "circle"]}
+            />
+          </div>
+          <div className="grid min-w-0 gap-1.5">
+            <span className={LABEL}>Mask inset</span>
+            <SliderControl
+              value={clipInsetValue}
+              min={0}
+              max={Math.max(120, Math.ceil(clipInsetValue))}
+              step={1}
+              disabled={styleEditingDisabled}
+              displayValue={`${formatNumericValue(clipInsetValue)}px`}
+              formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+              onCommit={(next) =>
+                onSetStyle("clip-path", buildInsetClipPathValue(next, radiusValue))
+              }
+            />
+          </div>
+        </div>
+      </Section>
+
+      <Section title="Transparency" icon={<Eye size={15} />}>
+        <div className="space-y-4">
+          <SliderControl
+            value={opacityValue}
+            min={0}
+            max={100}
+            step={1}
+            disabled={styleEditingDisabled}
+            displayValue={`${opacityValue}%`}
+            formatDisplayValue={(next) => `${Math.round(next)}%`}
+            onCommit={(next) => onSetStyle("opacity", formatNumericValue(next / 100))}
+          />
+          <SelectField
+            label="Mode"
+            value={styles["mix-blend-mode"] || "normal"}
+            disabled={styleEditingDisabled}
+            onChange={(next) => onSetStyle("mix-blend-mode", next)}
+            options={["normal", "multiply", "screen", "overlay", "darken", "lighten"]}
+          />
+        </div>
+      </Section>
+
+      <Section
+        title="Fill"
+        icon={<Palette size={15} />}
+        accessory={
+          <div className="rounded-full border border-neutral-700 bg-neutral-900 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-400">
+            {preferredFillMode}
+          </div>
+        }
+      >
+        <div className="space-y-4">
+          <SegmentedControl
+            disabled={styleEditingDisabled}
+            value={preferredFillMode}
+            onChange={handleFillModeChange}
+            options={[
+              { label: "Solid", value: "Solid" },
+              { label: "Gradient", value: "Gradient" },
+              { label: "Image", value: "Image" },
+            ]}
+          />
+          {preferredFillMode === "Solid" ? (
+            <ColorField
+              label="Fill color"
+              value={styles["background-color"] ?? "transparent"}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("background-color", next)}
+            />
+          ) : preferredFillMode === "Gradient" ? (
+            <GradientField
+              value={
+                backgroundImage !== "none"
+                  ? backgroundImage
+                  : serializeGradient(buildDefaultGradientModel(styles["background-color"]))
+              }
+              fallbackColor={styles["background-color"]}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("background-image", next)}
+            />
+          ) : (
+            <ImageFillField
+              projectId={projectId}
+              sourceFile={element.sourceFile}
+              value={imageUrl}
+              assets={assets}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("background-image", next)}
+              onImportAssets={onImportAssets}
+            />
+          )}
+          {!hasTextControls && (
+            <ColorField
+              label="Text color"
+              value={styles.color ?? "rgb(0, 0, 0)"}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("color", next)}
+            />
+          )}
+        </div>
+      </Section>
+    </>
+  );
+}

package/src/components/nle/NLELayout.tsx

@@ -52,9 +52,6 @@ interface NLELayoutProps {
   ) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
-  onInspectTimelineElement?: (element: TimelineElement) => void;
-  inspectedTimelineElementId?: string | null;
-  timelineLayerChildCounts?: ReadonlyMap<string, number>;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
   /** Whether the timeline panel is visible (default: true) */
@@ -91,9 +88,6 @@ export const NLELayout = memo(function NLELayout({
   onResizeElement,
   onBlockedEditAttempt,
   onSelectTimelineElement,
-  onInspectTimelineElement,
-  inspectedTimelineElementId,
-  timelineLayerChildCounts,
   onCompIdToSrcChange,
   timelineVisible,
   onToggleTimeline,
@@ -217,7 +211,13 @@ export const NLELayout = memo(function NLELayout({
 
   // Resizable timeline height
   const [timelineH, setTimelineH] = useState(DEFAULT_TIMELINE_H);
-  const [compositionLoading, setCompositionLoading] = useState(true);
+  const hasLoadedOnceRef = useRef(false);
+  const [compositionLoading, setCompositionLoadingRaw] = useState(true);
+  const setCompositionLoading = useCallback((loading: boolean) => {
+    if (!loading) hasLoadedOnceRef.current = true;
+    if (loading && hasLoadedOnceRef.current) return;
+    setCompositionLoadingRaw(loading);
+  }, []);
   const timelineDisabled = shouldDisableTimelineWhileCompositionLoading(compositionLoading);
 
   useEffect(() => {
@@ -395,6 +395,7 @@ export const NLELayout = memo(function NLELayout({
             portrait={portrait}
             directUrl={directUrl}
             refreshKey={refreshKey}
+            suppressLoadingOverlay={hasLoadedOnceRef.current}
           />
           {previewOverlay}
         </div>
@@ -453,10 +454,6 @@ export const NLELayout = memo(function NLELayout({
                 onResizeElement={onResizeElement}
                 onBlockedEditAttempt={onBlockedEditAttempt}
                 onSelectElement={onSelectTimelineElement}
-                onInspectElement={onInspectTimelineElement}
-                inspectedElementId={inspectedTimelineElementId}
-                layerChildCounts={timelineLayerChildCounts}
-                disabled={timelineDisabled}
               />
             </div>
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}

package/src/components/nle/NLEPreview.tsx

@@ -9,6 +9,7 @@ interface NLEPreviewProps {
   portrait?: boolean;
   directUrl?: string;
   refreshKey?: number;
+  suppressLoadingOverlay?: boolean;
 }
 
 export function getPreviewPlayerKey({
@@ -41,6 +42,7 @@ export const NLEPreview = memo(function NLEPreview({
   portrait,
   directUrl,
   refreshKey,
+  suppressLoadingOverlay,
 }: NLEPreviewProps) {
   const baseKey = getPreviewPlayerKey({ projectId, directUrl, refreshKey });
   const prevRefreshKeyRef = useRef(refreshKey);
@@ -93,6 +95,7 @@ export const NLEPreview = memo(function NLEPreview({
           onCompositionLoadingChange={onCompositionLoadingChange}
           portrait={portrait}
           style={retiringKey ? { position: "absolute", inset: 0, zIndex: 1 } : undefined}
+          suppressLoadingOverlay={suppressLoadingOverlay}
         />
       </div>
     </div>

package/src/components/renders/RenderQueue.tsx

@@ -2,6 +2,11 @@ import { memo, useState, useRef, useEffect } from "react";
 import { RenderQueueItem } from "./RenderQueueItem";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 
+export interface CompositionDimensions {
+  width: number;
+  height: number;
+}
+
 type StartRenderHandler = (
   format: "mp4" | "webm" | "mov",
   quality: "draft" | "standard" | "high",
@@ -16,37 +21,97 @@ interface RenderQueueProps {
   onClearCompleted: () => void;
   onStartRender: StartRenderHandler;
   isRendering: boolean;
+  /**
+   * Authored dimensions of the active composition. Used to pick the
+   * matching preset (landscape / portrait / square) when the user selects
+   * a 1080p or 4K scale. `null` falls back to landscape (legacy default).
+   */
+  compositionDimensions?: CompositionDimensions | null;
 }
 
-// Indexing the table by `ResolutionPreset | "auto"` makes adding a new preset
-// to `core.types` (e.g. an 8K row) a TypeScript error here instead of a
-// silently missing dropdown entry. Order is fixed by the array below.
-const RESOLUTION_LABELS: Record<ResolutionPreset | "auto", { label: string; title: string }> = {
-  auto: { label: "Auto", title: "Render at the composition's authored resolution" },
-  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": {
-    label: "4K ↕",
-    title: "2160×3840 — supersamples a 1080p portrait composition via Chrome DPR.",
-  },
+// Orientation is derived from the composition's authored aspect ratio,
+// not chosen by the user — picking "1080p portrait" for a landscape comp
+// would just produce a wrong-aspect render.
+type RenderScale = "auto" | "1080p" | "4k";
+
+const SCALE_OPTION_ORDER: RenderScale[] = ["auto", "1080p", "4k"];
+
+const SCALE_LABEL: Record<RenderScale, string> = {
+  auto: "Auto",
+  "1080p": "1080p",
+  "4k": "4K",
 };
 
-const RESOLUTION_OPTION_ORDER: (ResolutionPreset | "auto")[] = [
-  "auto",
-  "landscape",
-  "portrait",
-  "landscape-4k",
-  "portrait-4k",
-];
+// Mirrors `CANVAS_DIMENSIONS` in @hyperframes/core. Studio can't import from
+// the core barrel (it transitively pulls in node:fs) and the values are stable.
+const CANVAS_DIMENSIONS: Record<ResolutionPreset, CompositionDimensions> = {
+  landscape: { width: 1920, height: 1080 },
+  portrait: { width: 1080, height: 1920 },
+  "landscape-4k": { width: 3840, height: 2160 },
+  "portrait-4k": { width: 2160, height: 3840 },
+  square: { width: 1080, height: 1080 },
+  "square-4k": { width: 2160, height: 2160 },
+};
+
+type CompAspect = "landscape" | "portrait" | "square";
 
-const RESOLUTION_OPTIONS = RESOLUTION_OPTION_ORDER.map((value) => ({
-  value,
-  ...RESOLUTION_LABELS[value],
-}));
+function compAspect(dims: CompositionDimensions | null | undefined): CompAspect {
+  // Missing dims fall through to landscape (legacy default — "landscape" was
+  // the first preset). Studio shows resolved dims inline, so the user can see
+  // when this fallback is in effect.
+  if (dims == null) return "landscape";
+  if (dims.width === dims.height) return "square";
+  return dims.height > dims.width ? "portrait" : "landscape";
+}
+
+function resolveResolution(
+  scale: RenderScale,
+  dims: CompositionDimensions | null | undefined,
+): ResolutionPreset | "auto" {
+  if (scale === "auto") return "auto";
+  const aspect = compAspect(dims);
+  if (scale === "1080p") return aspect;
+  return aspect === "landscape"
+    ? "landscape-4k"
+    : aspect === "portrait"
+      ? "portrait-4k"
+      : "square-4k";
+}
+
+function resolvedDimensions(
+  scale: RenderScale,
+  dims: CompositionDimensions | null | undefined,
+): CompositionDimensions | null {
+  if (scale === "auto") return dims ?? null;
+  const preset = resolveResolution(scale, dims);
+  return preset === "auto" ? null : CANVAS_DIMENSIONS[preset];
+}
+
+// Mirrors the producer's resolveDeviceScaleFactor validation
+// (renderOrchestrator.ts:608): the chosen preset must match the comp's aspect
+// ratio exactly (cross-multiplied), can't downsample, and must be an integer
+// scale factor. Without this guard the user can pick a preset that throws at
+// render time — e.g. 1080p on a 1080×1080 square or 1080p on a 1280×720 comp
+// (1.5× isn't integer).
+function scaleApplies(scale: RenderScale, dims: CompositionDimensions | null | undefined): boolean {
+  if (scale === "auto" || dims == null) return true;
+  const preset = resolveResolution(scale, dims);
+  if (preset === "auto") return true;
+  const target = CANVAS_DIMENSIONS[preset];
+  if (target.width * dims.height !== target.height * dims.width) return false;
+  if (target.width < dims.width) return false;
+  return Number.isInteger(target.width / dims.width);
+}
+
+function scaleOptionLabel(
+  scale: RenderScale,
+  dims: CompositionDimensions | null | undefined,
+): string {
+  const resolved = resolvedDimensions(scale, dims);
+  return resolved
+    ? `${SCALE_LABEL[scale]} · ${resolved.width}×${resolved.height}`
+    : SCALE_LABEL[scale];
+}
 
 const FORMAT_INFO: Record<"mp4" | "webm" | "mov", { label: string; desc: string }> = {
   mp4: { label: "MP4", desc: "Best for general use. Smallest file, universal playback." },
@@ -127,9 +192,11 @@ const QUALITY_OPTIONS: {
 function FormatExportButton({
   onStartRender,
   isRendering,
+  compositionDimensions,
 }: {
   onStartRender: StartRenderHandler;
   isRendering: boolean;
+  compositionDimensions?: CompositionDimensions | null;
 }) {
   const [format, setFormat] = useState<"mp4" | "webm" | "mov">("mp4");
   const [quality, setQuality] = useState<"draft" | "standard" | "high">("standard");
@@ -150,12 +217,11 @@ function FormatExportButton({
         value={resolution}
         onChange={(e) => setResolution(e.target.value as ResolutionPreset | "auto")}
         disabled={isRendering}
-        title={RESOLUTION_OPTIONS.find((r) => r.value === resolution)?.title}
         className="h-5 px-1 text-[10px] rounded-l bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
       >
-        {RESOLUTION_OPTIONS.map((r) => (
-          <option key={r.value} value={r.value} title={r.title}>
-            {r.label}
+        {SCALE_OPTION_ORDER.map((value) => (
+          <option key={value} value={value} disabled={!scaleApplies(value, compositionDimensions)}>
+            {scaleOptionLabel(value, compositionDimensions)}
           </option>
         ))}
       </select>
@@ -215,6 +281,7 @@ export const RenderQueue = memo(function RenderQueue({
   onClearCompleted,
   onStartRender,
   isRendering,
+  compositionDimensions,
 }: RenderQueueProps) {
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -241,7 +308,11 @@ export const RenderQueue = memo(function RenderQueue({
               Clear
             </button>
           )}
-          <FormatExportButton onStartRender={onStartRender} isRendering={isRendering} />
+          <FormatExportButton
+            onStartRender={onStartRender}
+            isRendering={isRendering}
+            compositionDimensions={compositionDimensions}
+          />
         </div>
       </div>