@hyperframes/studio 0.6.7 → 0.6.8

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

@@ -0,0 +1,445 @@
+import { describe, expect, it } from "vitest";
+import { Window } from "happy-dom";
+import {
+  readStudioMotionFromElement,
+  writeStudioMotionToElement,
+  clearStudioMotionFromElement,
+} from "./studioMotionOps";
+import {
+  STUDIO_MOTION_ATTR,
+  STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR,
+  STUDIO_MOTION_ORIGINAL_OPACITY_ATTR,
+  STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR,
+} from "./studioMotionTypes";
+import { buildMotionPatches, buildClearMotionPatches } from "./manualEditsDom";
+import { applyPatchByTarget, readAttributeByTarget } from "../../utils/sourcePatcher";
+
+function createElement(markup: string): HTMLElement {
+  const window = new Window();
+  window.document.body.innerHTML = markup;
+  return window.document.body.firstElementChild as HTMLElement;
+}
+
+// ── readStudioMotionFromElement semantics ──
+
+describe("readStudioMotionFromElement", () => {
+  it("returns null for element with no attribute", () => {
+    const el = createElement(`<div id="test"></div>`);
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null for legacy marker value 'true'", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(STUDIO_MOTION_ATTR, "true");
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null for malformed JSON", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(STUDIO_MOTION_ATTR, "{not valid json");
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null for non-object JSON", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(STUDIO_MOTION_ATTR, '"just a string"');
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null when start < 0", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(
+      STUDIO_MOTION_ATTR,
+      JSON.stringify({
+        start: -0.5,
+        duration: 1,
+        ease: "none",
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+      }),
+    );
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null when duration <= 0", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(
+      STUDIO_MOTION_ATTR,
+      JSON.stringify({
+        start: 0,
+        duration: 0,
+        ease: "none",
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+      }),
+    );
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null when duration is negative", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(
+      STUDIO_MOTION_ATTR,
+      JSON.stringify({
+        start: 0,
+        duration: -1,
+        ease: "none",
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+      }),
+    );
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null when from is missing", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(
+      STUDIO_MOTION_ATTR,
+      JSON.stringify({
+        start: 0,
+        duration: 1,
+        ease: "none",
+        to: { opacity: 1 },
+      }),
+    );
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null when to is missing", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(
+      STUDIO_MOTION_ATTR,
+      JSON.stringify({
+        start: 0,
+        duration: 1,
+        ease: "none",
+        from: { opacity: 0 },
+      }),
+    );
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns null when from/to have no recognized motion properties", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(
+      STUDIO_MOTION_ATTR,
+      JSON.stringify({
+        start: 0,
+        duration: 1,
+        ease: "none",
+        from: { color: "red" },
+        to: { color: "blue" },
+      }),
+    );
+    expect(readStudioMotionFromElement(el)).toBeNull();
+  });
+
+  it("returns parsed motion for valid JSON", () => {
+    const el = createElement(`<div id="test"></div>`);
+    const motion = {
+      start: 0.5,
+      duration: 1,
+      ease: "power3.out",
+      from: { opacity: 0, y: 40 },
+      to: { opacity: 1, y: 0 },
+    };
+    el.setAttribute(STUDIO_MOTION_ATTR, JSON.stringify(motion));
+
+    const result = readStudioMotionFromElement(el);
+    expect(result).not.toBeNull();
+    expect(result).toEqual({
+      start: 0.5,
+      duration: 1,
+      ease: "power3.out",
+      customEase: undefined,
+      from: { opacity: 0, y: 40 },
+      to: { opacity: 1, y: 0 },
+    });
+  });
+
+  it("returns parsed motion with customEase", () => {
+    const el = createElement(`<div id="test"></div>`);
+    const motion = {
+      start: 0,
+      duration: 0.6,
+      ease: "studio-custom",
+      customEase: { id: "studio-custom", data: "M0,0 C0.2,0.9 0.28,1 1,1" },
+      from: { scale: 0.88, autoAlpha: 0 },
+      to: { scale: 1, autoAlpha: 1 },
+    };
+    el.setAttribute(STUDIO_MOTION_ATTR, JSON.stringify(motion));
+
+    const result = readStudioMotionFromElement(el);
+    expect(result).not.toBeNull();
+    expect(result!.customEase).toEqual({ id: "studio-custom", data: "M0,0 C0.2,0.9 0.28,1 1,1" });
+  });
+
+  it("defaults ease to 'none' when ease is empty string", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(
+      STUDIO_MOTION_ATTR,
+      JSON.stringify({
+        start: 0,
+        duration: 1,
+        ease: "",
+        from: { y: 40 },
+        to: { y: 0 },
+      }),
+    );
+
+    const result = readStudioMotionFromElement(el);
+    expect(result).not.toBeNull();
+    expect(result!.ease).toBe("none");
+  });
+
+  it("accepts start = 0 as valid", () => {
+    const el = createElement(`<div id="test"></div>`);
+    el.setAttribute(
+      STUDIO_MOTION_ATTR,
+      JSON.stringify({
+        start: 0,
+        duration: 0.5,
+        ease: "none",
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+      }),
+    );
+
+    const result = readStudioMotionFromElement(el);
+    expect(result).not.toBeNull();
+    expect(result!.start).toBe(0);
+  });
+});
+
+// ── writeStudioMotionToElement / readStudioMotionFromElement round-trip ──
+
+describe("write → read round-trip via DOM", () => {
+  it("round-trips motion through write and read", () => {
+    const el = createElement(`<div id="hero" style="transform: rotate(5deg); opacity: 0.8"></div>`);
+    const motion = {
+      start: 0.5,
+      duration: 1,
+      ease: "power3.out",
+      from: { opacity: 0, y: 40 },
+      to: { opacity: 1, y: 0 },
+    };
+
+    writeStudioMotionToElement(el, motion);
+    const result = readStudioMotionFromElement(el);
+
+    expect(result).not.toBeNull();
+    expect(result!.start).toBe(0.5);
+    expect(result!.duration).toBe(1);
+    expect(result!.ease).toBe("power3.out");
+    expect(result!.from).toEqual({ opacity: 0, y: 40 });
+    expect(result!.to).toEqual({ opacity: 1, y: 0 });
+  });
+
+  it("captures original styles on first write", () => {
+    const el = createElement(
+      `<div id="hero" style="transform: rotate(5deg); opacity: 0.8; visibility: hidden"></div>`,
+    );
+    const motion = {
+      start: 0,
+      duration: 0.6,
+      ease: "none",
+      from: { autoAlpha: 0 },
+      to: { autoAlpha: 1 },
+    };
+
+    writeStudioMotionToElement(el, motion);
+
+    expect(el.getAttribute(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR)).toBe("rotate(5deg)");
+    expect(el.getAttribute(STUDIO_MOTION_ORIGINAL_OPACITY_ATTR)).toBe("0.8");
+    expect(el.getAttribute(STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR)).toBe("hidden");
+  });
+
+  it("does not overwrite original styles on subsequent writes", () => {
+    const el = createElement(
+      `<div id="hero" style="transform: rotate(5deg); opacity: 0.8; visibility: visible"></div>`,
+    );
+    const first = { start: 0, duration: 0.6, ease: "none", from: { y: 40 }, to: { y: 0 } };
+    const second = { start: 0.2, duration: 1, ease: "power2.out", from: { y: 60 }, to: { y: 0 } };
+
+    writeStudioMotionToElement(el, first);
+    // Simulate GSAP modifying styles
+    el.style.transform = "matrix(1, 0, 0, 1, 0, 20)";
+    el.style.opacity = "0.3";
+
+    writeStudioMotionToElement(el, second);
+
+    // Original capture should be preserved from the first write
+    expect(el.getAttribute(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR)).toBe("rotate(5deg)");
+    expect(el.getAttribute(STUDIO_MOTION_ORIGINAL_OPACITY_ATTR)).toBe("0.8");
+  });
+});
+
+// ── clearStudioMotionFromElement ──
+
+describe("clearStudioMotionFromElement", () => {
+  it("removes all four motion-related attributes", () => {
+    const el = createElement(
+      `<div id="hero" style="transform: rotate(5deg); opacity: 0.8; visibility: visible"></div>`,
+    );
+    const motion = {
+      start: 0,
+      duration: 0.6,
+      ease: "none",
+      from: { autoAlpha: 0 },
+      to: { autoAlpha: 1 },
+    };
+    writeStudioMotionToElement(el, motion);
+
+    expect(el.hasAttribute(STUDIO_MOTION_ATTR)).toBe(true);
+    expect(el.hasAttribute(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR)).toBe(true);
+    expect(el.hasAttribute(STUDIO_MOTION_ORIGINAL_OPACITY_ATTR)).toBe(true);
+    expect(el.hasAttribute(STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR)).toBe(true);
+
+    clearStudioMotionFromElement(el);
+
+    expect(el.hasAttribute(STUDIO_MOTION_ATTR)).toBe(false);
+    expect(el.hasAttribute(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR)).toBe(false);
+    expect(el.hasAttribute(STUDIO_MOTION_ORIGINAL_OPACITY_ATTR)).toBe(false);
+    expect(el.hasAttribute(STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR)).toBe(false);
+  });
+
+  it("restores original inline styles after clearing", () => {
+    const el = createElement(
+      `<div id="hero" style="transform: rotate(5deg); opacity: 0.8; visibility: hidden"></div>`,
+    );
+    writeStudioMotionToElement(el, {
+      start: 0,
+      duration: 0.6,
+      ease: "none",
+      from: { autoAlpha: 0, y: 32 },
+      to: { autoAlpha: 1, y: 0 },
+    });
+
+    // Simulate GSAP overwriting styles
+    el.style.transform = "matrix(1, 0, 0, 1, 0, 16)";
+    el.style.opacity = "0.5";
+    el.style.visibility = "visible";
+
+    clearStudioMotionFromElement(el);
+
+    expect(el.style.transform).toBe("rotate(5deg)");
+    expect(el.style.opacity).toBe("0.8");
+    expect(el.style.visibility).toBe("hidden");
+  });
+
+  it("is a no-op when element has no motion attribute", () => {
+    const el = createElement(`<div id="hero" style="opacity: 1"></div>`);
+
+    clearStudioMotionFromElement(el);
+
+    expect(el.style.opacity).toBe("1");
+    expect(el.hasAttribute(STUDIO_MOTION_ATTR)).toBe(false);
+  });
+});
+
+// ── buildMotionPatches / buildClearMotionPatches ──
+
+describe("buildMotionPatches", () => {
+  it("produces patches for all motion-related attributes present on the element", () => {
+    const el = createElement(
+      `<div id="hero" style="transform: rotate(5deg); opacity: 0.8; visibility: visible"></div>`,
+    );
+    const motion = {
+      start: 0.5,
+      duration: 1,
+      ease: "power3.out",
+      from: { opacity: 0, y: 40 },
+      to: { opacity: 1, y: 0 },
+    };
+    writeStudioMotionToElement(el, motion);
+
+    const patches = buildMotionPatches(el);
+
+    // Should have at least the motion attribute patch
+    const motionPatch = patches.find((p) => p.property === STUDIO_MOTION_ATTR);
+    expect(motionPatch).toBeDefined();
+    expect(motionPatch!.type).toBe("attribute");
+    expect(JSON.parse(motionPatch!.value!)).toMatchObject(motion);
+
+    // Should include original style capture patches
+    expect(patches.find((p) => p.property === STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR)).toBeDefined();
+    expect(patches.find((p) => p.property === STUDIO_MOTION_ORIGINAL_OPACITY_ATTR)).toBeDefined();
+    expect(
+      patches.find((p) => p.property === STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR),
+    ).toBeDefined();
+  });
+
+  it("returns empty when element has no motion attribute", () => {
+    const el = createElement(`<div id="hero"></div>`);
+    expect(buildMotionPatches(el)).toEqual([]);
+  });
+});
+
+describe("buildClearMotionPatches round-trip", () => {
+  it("applying clear patches removes all four motion attributes from HTML", () => {
+    const el = createElement(
+      `<div id="hero" style="transform: rotate(5deg); opacity: 0.8; visibility: visible"></div>`,
+    );
+    writeStudioMotionToElement(el, {
+      start: 0,
+      duration: 0.6,
+      ease: "power2.out",
+      from: { autoAlpha: 0, y: 32 },
+      to: { autoAlpha: 1, y: 0 },
+    });
+
+    // First, apply the motion patches to an HTML string
+    const motionPatches = buildMotionPatches(el);
+    let html = `<div id="hero" style="transform: rotate(5deg); opacity: 0.8; visibility: visible"></div>`;
+    for (const patch of motionPatches) {
+      html = applyPatchByTarget(html, { id: "hero" }, patch);
+    }
+
+    // Verify all four attributes are present
+    expect(readAttributeByTarget(html, { id: "hero" }, STUDIO_MOTION_ATTR)).toBeDefined();
+    expect(
+      readAttributeByTarget(html, { id: "hero" }, STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR),
+    ).toBeDefined();
+    expect(
+      readAttributeByTarget(html, { id: "hero" }, STUDIO_MOTION_ORIGINAL_OPACITY_ATTR),
+    ).toBeDefined();
+    expect(
+      readAttributeByTarget(html, { id: "hero" }, STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR),
+    ).toBeDefined();
+
+    // Now apply clear patches
+    const clearPatches = buildClearMotionPatches(el);
+    for (const patch of clearPatches) {
+      html = applyPatchByTarget(html, { id: "hero" }, patch);
+    }
+
+    // All four should be gone
+    expect(readAttributeByTarget(html, { id: "hero" }, STUDIO_MOTION_ATTR)).toBeUndefined();
+    expect(
+      readAttributeByTarget(html, { id: "hero" }, STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR),
+    ).toBeUndefined();
+    expect(
+      readAttributeByTarget(html, { id: "hero" }, STUDIO_MOTION_ORIGINAL_OPACITY_ATTR),
+    ).toBeUndefined();
+    expect(
+      readAttributeByTarget(html, { id: "hero" }, STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR),
+    ).toBeUndefined();
+  });
+
+  it("clear patches produce exactly four null-value attribute operations", () => {
+    const el = createElement(`<div id="hero"></div>`);
+    const clearPatches = buildClearMotionPatches(el);
+
+    expect(clearPatches).toHaveLength(4);
+    for (const patch of clearPatches) {
+      expect(patch.type).toBe("attribute");
+      expect(patch.value).toBeNull();
+    }
+
+    const properties = clearPatches.map((p) => p.property);
+    expect(properties).toContain(STUDIO_MOTION_ATTR);
+    expect(properties).toContain(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR);
+    expect(properties).toContain(STUDIO_MOTION_ORIGINAL_OPACITY_ATTR);
+    expect(properties).toContain(STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR);
+  });
+});

package/src/components/editor/studioMotionOps.ts

@@ -5,11 +5,16 @@ import {
   DEFAULT_CUSTOM_EASE_POINTS,
   GSAP_EASE_CONTROL_POINTS,
   CUSTOM_EASE_DATA_PATTERN,
+  STUDIO_MOTION_ATTR,
+  STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR,
+  STUDIO_MOTION_ORIGINAL_OPACITY_ATTR,
+  STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR,
   type StudioCustomEaseControlPoints,
   type StudioGsapCustomEase,
   type StudioGsapMotion,
   type StudioGsapMotionPreset,
   type StudioGsapPresetMotionOptions,
+  type StudioGsapMotionValues,
   type StudioMotionManifest,
   type StudioMotionTarget,
 } from "./studioMotionTypes";
@@ -124,12 +129,10 @@ export function buildStudioGsapPresetMotion(
 
 // ── Manifest parse/serialize ──
 
-function parseMotionValues(
-  value: unknown,
-): import("./studioMotionTypes").StudioGsapMotionValues | null {
+export function parseMotionValues(value: unknown): StudioGsapMotionValues | null {
   if (!value || typeof value !== "object") return null;
   const record = value as Record<string, unknown>;
-  const parsed: import("./studioMotionTypes").StudioGsapMotionValues = {};
+  const parsed: StudioGsapMotionValues = {};
   for (const key of ["x", "y", "scale", "rotation", "opacity", "autoAlpha"] as const) {
     const next = finiteNumber(record[key]);
     if (next != null) parsed[key] = next;
@@ -297,3 +300,74 @@ export function getStudioMotionForSelection(
 ): StudioGsapMotion | null {
   return manifest.motions.find((motion) => sameSelectionTarget(motion, selection)) ?? null;
 }
+
+// ── HTML-attribute–backed motion storage ──
+
+/** The JSON stored in the attribute omits kind/target/updatedAt — those are derived from context. */
+interface StudioMotionAttrPayload {
+  start: number;
+  duration: number;
+  ease: string;
+  customEase?: StudioGsapCustomEase;
+  from: StudioGsapMotionValues;
+  to: StudioGsapMotionValues;
+}
+
+export function readStudioMotionFromElement(
+  element: HTMLElement,
+): Omit<StudioGsapMotion, "kind" | "target" | "updatedAt"> | null {
+  const json = element.getAttribute(STUDIO_MOTION_ATTR);
+  if (!json || json === "true") return null;
+  try {
+    const parsed = JSON.parse(json) as unknown;
+    if (!parsed || typeof parsed !== "object") return null;
+    const record = parsed as Record<string, unknown>;
+    const start = finiteNumber(record.start);
+    const duration = finiteNumber(record.duration);
+    if (start == null || duration == null || start < 0 || duration <= 0) return null;
+    const ease =
+      typeof record.ease === "string" && record.ease.trim() ? record.ease.trim() : "none";
+    const from = parseMotionValues(record.from);
+    const to = parseMotionValues(record.to);
+    if (!from || !to) return null;
+    return { start, duration, ease, customEase: parseCustomEase(record.customEase), from, to };
+  } catch {
+    return null;
+  }
+}
+
+export function writeStudioMotionToElement(
+  element: HTMLElement,
+  motion: Omit<StudioGsapMotion, "kind" | "target" | "updatedAt">,
+): void {
+  // Capture original styles before first write (only if not already captured)
+  if (!element.getAttribute(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR)) {
+    element.setAttribute(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR, element.style.transform);
+    element.setAttribute(STUDIO_MOTION_ORIGINAL_OPACITY_ATTR, element.style.opacity);
+    element.setAttribute(STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR, element.style.visibility);
+  }
+  const payload: StudioMotionAttrPayload = {
+    start: motion.start,
+    duration: motion.duration,
+    ease: motion.ease,
+    from: motion.from,
+    to: motion.to,
+  };
+  if (motion.customEase) payload.customEase = motion.customEase;
+  element.setAttribute(STUDIO_MOTION_ATTR, JSON.stringify(payload));
+}
+
+export function clearStudioMotionFromElement(
+  element: HTMLElement,
+  gsap?: { set?: (target: HTMLElement, vars: Record<string, unknown>) => void },
+): void {
+  if (!element.hasAttribute(STUDIO_MOTION_ATTR)) return;
+  gsap?.set?.(element, { clearProps: "transform,opacity,visibility" });
+  element.style.transform = element.getAttribute(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR) ?? "";
+  element.style.opacity = element.getAttribute(STUDIO_MOTION_ORIGINAL_OPACITY_ATTR) ?? "";
+  element.style.visibility = element.getAttribute(STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR) ?? "";
+  element.removeAttribute(STUDIO_MOTION_ATTR);
+  element.removeAttribute(STUDIO_MOTION_ORIGINAL_TRANSFORM_ATTR);
+  element.removeAttribute(STUDIO_MOTION_ORIGINAL_OPACITY_ATTR);
+  element.removeAttribute(STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR);
+}

package/src/components/renders/RenderQueue.tsx

@@ -1,6 +1,7 @@
 import { memo, useState, useRef, useEffect } from "react";
 import { RenderQueueItem } from "./RenderQueueItem";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
+import { getPersistedRenderSettings, persistRenderSettings } from "./renderSettings";
 
 export interface CompositionDimensions {
   width: number;
@@ -198,10 +199,11 @@ function FormatExportButton({
   isRendering: boolean;
   compositionDimensions?: CompositionDimensions | null;
 }) {
-  const [format, setFormat] = useState<"mp4" | "webm" | "mov">("mp4");
-  const [quality, setQuality] = useState<"draft" | "standard" | "high">("standard");
+  const persisted = getPersistedRenderSettings();
+  const [format, setFormat] = useState<"mp4" | "webm" | "mov">(persisted.format);
+  const [quality, setQuality] = useState<"draft" | "standard" | "high">(persisted.quality);
   const [resolution, setResolution] = useState<ResolutionPreset | "auto">("auto");
-  const [fps, setFps] = useState<24 | 30 | 60>(30);
+  const [fps, setFps] = useState<24 | 30 | 60>(persisted.fps);
 
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
   const showQuality = format !== "mov";
@@ -228,7 +230,11 @@ function FormatExportButton({
       {showQuality && (
         <select
           value={quality}
-          onChange={(e) => setQuality(e.target.value as "draft" | "standard" | "high")}
+          onChange={(e) => {
+            const v = e.target.value as "draft" | "standard" | "high";
+            setQuality(v);
+            persistRenderSettings(format, v, fps);
+          }}
           disabled={isRendering}
           title={QUALITY_OPTIONS.find((q) => q.value === quality)?.title}
           className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
@@ -242,7 +248,11 @@ function FormatExportButton({
       )}
       <select
         value={fps}
-        onChange={(e) => setFps(Number(e.target.value) as 24 | 30 | 60)}
+        onChange={(e) => {
+          const v = Number(e.target.value) as 24 | 30 | 60;
+          setFps(v);
+          persistRenderSettings(format, quality, v);
+        }}
         disabled={isRendering}
         title="Frames per second"
         className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
@@ -253,7 +263,11 @@ function FormatExportButton({
       </select>
       <select
         value={format}
-        onChange={(e) => setFormat(e.target.value as "mp4" | "webm" | "mov")}
+        onChange={(e) => {
+          const v = e.target.value as "mp4" | "webm" | "mov";
+          setFormat(v);
+          persistRenderSettings(v, quality, fps);
+        }}
         disabled={isRendering}
         className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
       >

package/src/components/renders/renderSettings.ts

@@ -0,0 +1,38 @@
+const RENDER_SETTINGS_KEY = "hf-studio-render-settings";
+
+export interface PersistedRenderSettings {
+  format: "mp4" | "webm" | "mov";
+  quality: "draft" | "standard" | "high";
+  fps: 24 | 30 | 60;
+}
+
+export function getPersistedRenderSettings(): PersistedRenderSettings {
+  try {
+    const raw = localStorage.getItem(RENDER_SETTINGS_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      return {
+        format: ["mp4", "webm", "mov"].includes(parsed.format) ? parsed.format : "mp4",
+        quality: ["draft", "standard", "high"].includes(parsed.quality)
+          ? parsed.quality
+          : "standard",
+        fps: [24, 30, 60].includes(parsed.fps) ? parsed.fps : 30,
+      };
+    }
+  } catch {
+    /* ignore */
+  }
+  return { format: "mp4", quality: "standard", fps: 30 };
+}
+
+export function persistRenderSettings(
+  format: PersistedRenderSettings["format"],
+  quality: PersistedRenderSettings["quality"],
+  fps: PersistedRenderSettings["fps"],
+): void {
+  try {
+    localStorage.setItem(RENDER_SETTINGS_KEY, JSON.stringify({ format, quality, fps }));
+  } catch {
+    /* ignore */
+  }
+}

package/src/components/renders/useRenderQueue.ts

@@ -29,6 +29,8 @@ export interface StartRenderOptions {
   format?: "mp4" | "webm" | "mov";
   /** `"auto"` (default) renders at the composition's authored dimensions. */
   resolution?: ResolutionPreset | "auto";
+  /** Render a specific composition file instead of index.html. */
+  composition?: string;
 }
 
 export function useRenderQueue(projectId: string | null) {
@@ -86,17 +88,25 @@ export function useRenderQueue(projectId: string | null) {
       const quality = opts.quality ?? "standard";
       const format = opts.format ?? "mp4";
       const resolution = opts.resolution;
+      const composition = opts.composition;
 
       const startTime = Date.now();
       // "auto" / undefined means "render at the composition's authored size".
       // Omit the field entirely — sending "auto" would trip the route's
       // enum validation set.
-      const body: { fps: number; quality: string; format: string; resolution?: string } = {
+      const body: {
+        fps: number;
+        quality: string;
+        format: string;
+        resolution?: string;
+        composition?: string;
+      } = {
         fps,
         quality,
         format,
       };
       if (resolution && resolution !== "auto") body.resolution = resolution;
+      if (composition) body.composition = composition;
       let res: Response;
       try {
         res = await fetch(`/api/projects/${projectId}/render`, {