@hyperframes/studio-server 0.7.37 → 0.7.39

package/dist/index.js

@@ -543,8 +543,8 @@ function querySelectorAllWithTemplates(root, selector) {
   if (matches.length > 0) return matches;
   const templates = Array.from(root.querySelectorAll("template"));
   for (const tmpl of templates) {
-    const inner = tmpl.querySelectorAll(selector);
-    if (inner.length > 0) return Array.from(inner);
+    const inner = querySelectorAllWithTemplates(tmpl, selector);
+    if (inner.length > 0) return inner;
   }
   return [];
 }
@@ -2330,9 +2330,14 @@ function extractElementAttrs(el) {
 }
 var NON_RENDERED_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "LINK", "META", "TEMPLATE", "NOSCRIPT"]);
 function promoteTemplateCompositionId(rawComp, body) {
-  const templateCompositionId = rawComp.match(
-    /<template[^>]*\sdata-composition-id\s*=\s*["']([^"']+)["']/i
-  )?.[1];
+  let templateCompositionId;
+  for (const tag of rawComp.matchAll(/<template\b[^>]*/gi)) {
+    const id = /\bdata-composition-id\s*=\s*["']([^"']+)["']/i.exec(tag[0] ?? "")?.[1];
+    if (id) {
+      templateCompositionId = id;
+      break;
+    }
+  }
   if (!templateCompositionId) return;
   if (body.querySelector("[data-composition-id]")) return;
   const root = Array.from(body.children).find((el) => !NON_RENDERED_TAGS.has(el.tagName));
@@ -2346,10 +2351,10 @@ function tagRootCompositionFile(bodyHtml, compPath) {
   if (bodyHtml.slice(match.index, tagEnd).includes("data-composition-file")) return bodyHtml;
   return bodyHtml.slice(0, tagEnd) + ` data-composition-file="${compPath}"` + bodyHtml.slice(tagEnd);
 }
-function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref) {
+function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref, rawOverride) {
   const compFile = join7(projectDir, compPath);
   if (!existsSync4(compFile)) return null;
-  const rawComp = readFileSync4(compFile, "utf-8");
+  const rawComp = rawOverride ?? readFileSync4(compFile, "utf-8");
   let compHeadContent = "";
   let rewrittenContent;
   let htmlAttrs = "";
@@ -2746,7 +2751,16 @@ import { ensureHfIds as ensureHfIds2 } from "@hyperframes/parsers/hf-ids";
 
 // src/helpers/hfIdPersist.ts
 import { ensureHfIds } from "@hyperframes/parsers/hf-ids";
-import { readFileSync as readFileSync6, writeFileSync as writeFileSync5 } from "fs";
+import {
+  closeSync,
+  constants,
+  fstatSync,
+  ftruncateSync,
+  openSync,
+  readFileSync as readFileSync6,
+  writeFileSync as writeFileSync5,
+  writeSync
+} from "fs";
 function persistHfIdsIfNeeded(filePath, html) {
   const normalized = ensureHfIds(html);
   const idsBefore = (html.match(/\bdata-hf-id=/g) ?? []).length;
@@ -2763,6 +2777,40 @@ function persistHfIdsIfNeeded(filePath, html) {
   }
   return normalized;
 }
+function openNoFollow(filePath, flags) {
+  const noFollow = constants.O_NOFOLLOW ?? 0;
+  try {
+    return openSync(filePath, flags | noFollow);
+  } catch {
+    return null;
+  }
+}
+function stampFileHfIds(filePath) {
+  let fd = openNoFollow(filePath, constants.O_RDWR);
+  let writable = true;
+  if (fd === null) {
+    fd = openNoFollow(filePath, constants.O_RDONLY);
+    writable = false;
+  }
+  if (fd === null) return null;
+  try {
+    if (!fstatSync(fd).isFile()) return null;
+    const html = readFileSync6(fd, "utf-8");
+    const normalized = ensureHfIds(html);
+    const idsBefore = (html.match(/\bdata-hf-id=/g) ?? []).length;
+    const idsAfter = (normalized.match(/\bdata-hf-id=/g) ?? []).length;
+    if (writable && idsAfter > idsBefore) {
+      ftruncateSync(fd, 0);
+      writeSync(fd, normalized, 0, "utf-8");
+    }
+    return normalized;
+  } catch (err) {
+    console.warn("[hyperframes] stampFileHfIds: failed to stamp ids:", err);
+    return null;
+  } finally {
+    closeSync(fd);
+  }
+}
 
 // src/routes/preview.ts
 var PROJECT_SIGNATURE_META = "hyperframes-project-signature";
@@ -2983,6 +3031,10 @@ ${runtimeTag}`;
       return c.text("not found", 404);
     }
   });
+  function pinSubCompHfIds(compFile, compPath) {
+    if (!/\.html?$/i.test(compPath)) return void 0;
+    return stampFileHfIds(compFile);
+  }
   api.get("/projects/:id/preview/comp/*", async (c) => {
     const project = await adapter.resolveProject(c.req.param("id"));
     if (!project) return c.json({ error: "not found" }, 404);
@@ -2994,13 +3046,21 @@ ${runtimeTag}`;
     if (!compFile || !existsSync5(compFile) || !statSync2(compFile).isFile()) {
       return c.text("not found", 404);
     }
-    const etag = `"comp:${compPath}:${signature}"`;
+    const etag = `"comp:v2:${compPath}:${signature}"`;
     const ifNoneMatch = c.req.header("If-None-Match");
     if (ifNoneMatch === etag) {
       return new Response(null, { status: 304, headers: previewCacheHeaders(etag) });
     }
+    const stamped = pinSubCompHfIds(compFile, compPath);
+    if (stamped === null) return c.text("not found", 404);
     const baseHref = `/api/projects/${project.id}/preview/`;
-    let html = buildSubCompositionHtml(project.dir, compPath, adapter.runtimeUrl, baseHref);
+    let html = buildSubCompositionHtml(
+      project.dir,
+      compPath,
+      adapter.runtimeUrl,
+      baseHref,
+      stamped
+    );
     if (!html) return c.text("not found", 404);
     html = ensureHfIds2(await transformPreviewHtml(html, adapter, project, compPath));
     return c.html(
@@ -3111,7 +3171,7 @@ function registerRenderRoutes(api, adapter) {
   const cleanupFinishedJobs = () => {
     const now = Date.now();
     for (const [key, job] of renderJobs) {
-      if ((job.status === "complete" || job.status === "failed") && now - job.createdAt > TTL_MS) {
+      if (job.status !== "rendering" && now - job.createdAt > TTL_MS) {
         renderJobs.delete(key);
       }
     }
@@ -3187,11 +3247,21 @@ function registerRenderRoutes(api, adapter) {
             error: current.error
           })
         });
-        if (current.status === "complete" || current.status === "failed") break;
+        if (current.status !== "rendering") break;
         await stream.sleep(500);
       }
     });
   });
+  api.post("/render/:jobId/cancel", (c) => {
+    const { jobId } = c.req.param();
+    const job = renderJobs.get(jobId);
+    if (!job) return c.json({ error: "not found" }, 404);
+    if (job.status === "rendering") {
+      job.status = "cancelled";
+      job.cancel?.();
+    }
+    return c.json({ status: job.status });
+  });
   const RENDER_MIME = {
     ".mp4": "video/mp4",
     ".webm": "video/webm",
@@ -4031,7 +4101,7 @@ function registerWaveformRoutes(api, adapter) {
 }
 
 // src/routes/fonts.ts
-import { closeSync, constants, fstatSync, openSync, readSync } from "fs";
+import { closeSync as closeSync2, constants as constants2, fstatSync as fstatSync2, openSync as openSync2, readSync } from "fs";
 import {
   collectFontFileEntries,
   fontDirectories,
@@ -4138,12 +4208,12 @@ function registerFontRoutes(api) {
     if (!located) return c.json({ error: "font not found" }, 404);
     let fd;
     try {
-      fd = openSync(located.path, constants.O_RDONLY | constants.O_NOFOLLOW);
+      fd = openSync2(located.path, constants2.O_RDONLY | constants2.O_NOFOLLOW);
     } catch {
       return c.json({ error: "font file not accessible" }, 404);
     }
     try {
-      const stat = fstatSync(fd);
+      const stat = fstatSync2(fd);
       if (stat.size > SYSTEM_FONT_SIZE_LIMIT) {
         return c.json({ error: "font file too large" }, 413);
       }
@@ -4160,7 +4230,7 @@ function registerFontRoutes(api) {
     } catch {
       return c.json({ error: "failed to read font file" }, 500);
     } finally {
-      closeSync(fd);
+      closeSync2(fd);
     }
   });
 }
@@ -4292,6 +4362,308 @@ function registerSelectionRoutes(api, adapter) {
   });
 }
 
+// src/routes/media.ts
+import { streamSSE as streamSSE2 } from "hono/streaming";
+import { existsSync as existsSync9, mkdirSync as mkdirSync7 } from "fs";
+import { basename as basename2, dirname as dirname2, extname as extname3, join as join13 } from "path";
+
+// src/helpers/mediaMetadata.ts
+import { spawnSync as spawnSync2 } from "child_process";
+import { extname as extname2 } from "path";
+var VIDEO_EXT2 = /* @__PURE__ */ new Set([".mp4", ".mov", ".webm", ".mkv", ".avi", ".m4v"]);
+var IMAGE_EXT = /* @__PURE__ */ new Set([".jpg", ".jpeg", ".png", ".webp", ".avif"]);
+var AUDIO_EXT2 = /* @__PURE__ */ new Set([".mp3", ".wav", ".ogg", ".m4a", ".aac"]);
+function lower(value) {
+  return value?.toLowerCase() ?? "";
+}
+function inferKindFromPath(path) {
+  const ext = extname2(path).toLowerCase();
+  if (VIDEO_EXT2.has(ext)) return "video";
+  if (IMAGE_EXT.has(ext)) return "image";
+  if (AUDIO_EXT2.has(ext)) return "audio";
+  return "unknown";
+}
+function colorLabel(input) {
+  if (input.isHdr) {
+    if (input.hdrTransfer === "pq") return "HDR PQ";
+    if (input.hdrTransfer === "hlg") return "HDR HLG";
+    return "HDR";
+  }
+  if (input.colorPrimaries.includes("bt709") || input.colorSpace.includes("bt709") || input.colorTransfer.includes("bt709")) {
+    return "SDR Rec.709";
+  }
+  return "SDR/unknown";
+}
+function classifyMediaColor(stream) {
+  const colorPrimaries = lower(stream?.color_primaries);
+  const colorSpace = lower(stream?.color_space);
+  const colorTransfer = lower(stream?.color_transfer);
+  const isHdr = colorPrimaries.includes("bt2020") || colorSpace.includes("bt2020") || colorTransfer === "smpte2084" || colorTransfer === "arib-std-b67";
+  const hdrTransfer = isHdr ? colorTransfer === "smpte2084" ? "pq" : colorTransfer === "arib-std-b67" ? "hlg" : "unknown" : null;
+  return {
+    dynamicRange: stream ? isHdr ? "hdr" : "sdr" : "unknown",
+    hdrTransfer,
+    label: stream ? colorLabel({ isHdr, hdrTransfer, colorPrimaries, colorSpace, colorTransfer }) : "Unknown",
+    isHdr,
+    codecName: stream?.codec_name,
+    profile: stream?.profile,
+    pixelFormat: stream?.pix_fmt,
+    colorSpace: stream?.color_space,
+    colorTransfer: stream?.color_transfer,
+    colorPrimaries: stream?.color_primaries,
+    bitsPerRawSample: stream?.bits_per_raw_sample
+  };
+}
+function probeMediaMetadata(filePath, runner = spawnSync2) {
+  const kind = inferKindFromPath(filePath);
+  if (kind === "audio" || kind === "unknown") {
+    return { kind, color: classifyMediaColor(null) };
+  }
+  const result = runner(
+    "ffprobe",
+    [
+      "-v",
+      "error",
+      "-show_entries",
+      "stream=codec_type,codec_name,profile,pix_fmt,color_space,color_transfer,color_primaries,bits_per_raw_sample",
+      "-of",
+      "json",
+      filePath
+    ],
+    { timeout: 15e3, maxBuffer: 1024 * 1024 }
+  );
+  if (result.error?.code === "ENOENT") {
+    return { kind, color: classifyMediaColor(null), probeError: "ffprobe unavailable" };
+  }
+  if (result.status !== 0) {
+    return { kind, color: classifyMediaColor(null), probeError: "ffprobe failed" };
+  }
+  try {
+    const parsed = JSON.parse(String(result.stdout || "{}"));
+    const stream = parsed.streams?.find(
+      (item) => kind === "image" ? item.codec_type === "video" : item.codec_type === kind
+    );
+    return { kind, color: classifyMediaColor(stream) };
+  } catch {
+    return { kind, color: classifyMediaColor(null), probeError: "ffprobe returned invalid json" };
+  }
+}
+
+// src/routes/media.ts
+var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set([".mp4", ".mov", ".webm", ".mkv", ".avi"]);
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([".jpg", ".jpeg", ".png", ".webp"]);
+var VIDEO_OUTPUT_EXTENSIONS = /* @__PURE__ */ new Set([".webm", ".mov"]);
+var QUALITIES = /* @__PURE__ */ new Set(["fast", "balanced", "best"]);
+var DEVICES = /* @__PURE__ */ new Set(["auto", "cpu", "coreml", "cuda"]);
+function isVideoPath(path) {
+  return VIDEO_EXTENSIONS.has(extname3(path).toLowerCase());
+}
+function isImagePath(path) {
+  return IMAGE_EXTENSIONS.has(extname3(path).toLowerCase());
+}
+function normalizeProjectAssetPath(path) {
+  return path.trim().replace(/^[.]\//, "").replace(/[?#].*$/, "");
+}
+function containsNullByte(path) {
+  return path.includes("\0");
+}
+function slugFileBase(path) {
+  const name = basename2(path, extname3(path)).replace(/[^a-zA-Z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
+  return name || "media";
+}
+function uniqueAssetPath(projectDir, assetPath) {
+  const ext = extname3(assetPath);
+  const withoutExt = assetPath.slice(0, -ext.length);
+  let candidate = assetPath;
+  for (let index = 2; existsSync9(join13(projectDir, candidate)); index++) {
+    candidate = `${withoutExt}-${index}${ext}`;
+  }
+  return candidate;
+}
+function defaultOutputPath(projectDir, inputPath) {
+  const ext = isImagePath(inputPath) ? ".png" : ".webm";
+  return uniqueAssetPath(projectDir, `assets/cutouts/${slugFileBase(inputPath)}-cutout${ext}`);
+}
+function defaultPlatePath(projectDir, inputPath) {
+  return uniqueAssetPath(projectDir, `assets/cutouts/${slugFileBase(inputPath)}-plate.webm`);
+}
+function makeJobId(projectId, mediaJobs) {
+  const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[-:.TZ]/g, "").slice(0, 14);
+  const safeProject = projectId.replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  const base = `${safeProject || "project"}_remove-bg_${stamp}`;
+  if (!mediaJobs.has(base)) return base;
+  for (let index = 2; ; index++) {
+    const candidate = `${base}-${index}`;
+    if (!mediaJobs.has(candidate)) return candidate;
+  }
+}
+function normalizeQuality(value) {
+  return QUALITIES.has(value ?? "") ? value : "balanced";
+}
+function normalizeDevice(value) {
+  return DEVICES.has(value ?? "") ? value : "auto";
+}
+function registerMediaRoutes(api, adapter, options = {}) {
+  const mediaJobs = /* @__PURE__ */ new Map();
+  const TTL_MS = 3e5;
+  const readMediaMetadata = options.probeMediaMetadata ?? probeMediaMetadata;
+  function cleanupFinishedJobs() {
+    const now = Date.now();
+    for (const [id, job] of mediaJobs) {
+      if ((job.status === "complete" || job.status === "failed") && now - job.createdAt > TTL_MS) {
+        mediaJobs.delete(id);
+      }
+    }
+  }
+  api.get("/projects/:id/media/metadata", async (c) => {
+    const project = await adapter.resolveProject(c.req.param("id"));
+    if (!project) return c.json({ error: "not found" }, 404);
+    const assetPath = normalizeProjectAssetPath(c.req.query("path") ?? "");
+    if (!assetPath) return c.json({ error: "path required" }, 400);
+    if (containsNullByte(assetPath)) return c.json({ error: "forbidden" }, 403);
+    if (/^(?:https?:|data:|blob:)/i.test(assetPath)) {
+      return c.json({ error: "media metadata requires a project-local asset" }, 400);
+    }
+    const filePath = resolveWithinProject(project.dir, assetPath);
+    if (!filePath) return c.json({ error: "forbidden" }, 403);
+    if (!existsSync9(filePath)) return c.json({ error: "media not found" }, 404);
+    return c.json({ path: assetPath, metadata: readMediaMetadata(filePath) });
+  });
+  api.post(
+    "/projects/:id/media/remove-background",
+    // fallow-ignore-next-line complexity
+    async (c) => {
+      cleanupFinishedJobs();
+      if (!adapter.startBackgroundRemoval) {
+        return c.json({ error: "background removal is not available in this Studio server" }, 501);
+      }
+      const project = await adapter.resolveProject(c.req.param("id"));
+      if (!project) return c.json({ error: "not found" }, 404);
+      const body = await c.req.json().catch(() => ({}));
+      const inputAssetPath = body.inputPath ? normalizeProjectAssetPath(body.inputPath) : "";
+      if (!inputAssetPath) return c.json({ error: "inputPath required" }, 400);
+      if (containsNullByte(inputAssetPath)) return c.json({ error: "forbidden" }, 403);
+      if (/^(?:https?:|data:|blob:)/i.test(inputAssetPath)) {
+        return c.json({ error: "background removal requires a project-local media asset" }, 400);
+      }
+      const inputPath = resolveWithinProject(project.dir, inputAssetPath);
+      if (!inputPath) return c.json({ error: "forbidden" }, 403);
+      if (!existsSync9(inputPath)) return c.json({ error: "input media not found" }, 404);
+      const inputIsVideo = isVideoPath(inputAssetPath);
+      const inputIsImage = isImagePath(inputAssetPath);
+      if (!inputIsVideo && !inputIsImage) {
+        return c.json({ error: "background removal supports video or image assets only" }, 400);
+      }
+      const requestedOutput = body.outputPath ? normalizeProjectAssetPath(body.outputPath) : "";
+      if (requestedOutput && containsNullByte(requestedOutput)) {
+        return c.json({ error: "forbidden" }, 403);
+      }
+      if (requestedOutput && !resolveWithinProject(project.dir, requestedOutput)) {
+        return c.json({ error: "forbidden" }, 403);
+      }
+      const outputAssetPath = requestedOutput ? uniqueAssetPath(project.dir, requestedOutput) : defaultOutputPath(project.dir, inputAssetPath);
+      const outputPath = resolveWithinProject(project.dir, outputAssetPath);
+      if (!outputPath) return c.json({ error: "forbidden" }, 403);
+      if (inputIsVideo && !VIDEO_OUTPUT_EXTENSIONS.has(extname3(outputAssetPath).toLowerCase())) {
+        return c.json({ error: "video background removal output must be .webm or .mov" }, 400);
+      }
+      if (inputIsImage && extname3(outputAssetPath).toLowerCase() !== ".png") {
+        return c.json({ error: "image background removal output must be .png" }, 400);
+      }
+      let backgroundOutputAssetPath;
+      let backgroundOutputPath;
+      if (body.createBackgroundPlate) {
+        if (!inputIsVideo) {
+          return c.json({ error: "background plates are only supported for video inputs" }, 400);
+        }
+        backgroundOutputAssetPath = defaultPlatePath(project.dir, inputAssetPath);
+        backgroundOutputPath = resolveWithinProject(project.dir, backgroundOutputAssetPath) ?? void 0;
+        if (!backgroundOutputPath) {
+          return c.json({ error: "forbidden" }, 403);
+        }
+      }
+      mkdirSync7(dirname2(outputPath), { recursive: true });
+      if (backgroundOutputPath) mkdirSync7(dirname2(backgroundOutputPath), { recursive: true });
+      const jobId = makeJobId(project.id, mediaJobs);
+      const state = adapter.startBackgroundRemoval({
+        project,
+        inputPath,
+        inputAssetPath,
+        outputPath,
+        outputAssetPath,
+        backgroundOutputPath,
+        backgroundOutputAssetPath,
+        quality: normalizeQuality(body.quality),
+        device: normalizeDevice(body.device),
+        jobId
+      });
+      state.createdAt = Date.now();
+      mediaJobs.set(jobId, state);
+      return c.json({
+        jobId,
+        status: state.status,
+        outputPath: outputAssetPath,
+        backgroundOutputPath: backgroundOutputAssetPath
+      });
+    }
+  );
+  api.get("/media-jobs/:jobId/progress", (c) => {
+    cleanupFinishedJobs();
+    const { jobId } = c.req.param();
+    const job = mediaJobs.get(jobId);
+    if (!job) return c.json({ error: "not found" }, 404);
+    return streamSSE2(c, async (stream) => {
+      while (true) {
+        const current = mediaJobs.get(jobId);
+        if (!current) break;
+        await stream.writeSSE({
+          event: "progress",
+          data: JSON.stringify({
+            id: current.id,
+            status: current.status,
+            progress: current.progress,
+            stage: current.stage,
+            outputPath: current.outputAssetPath,
+            backgroundOutputPath: current.backgroundOutputAssetPath,
+            error: current.error,
+            provider: current.provider,
+            framesProcessed: current.framesProcessed,
+            durationSeconds: current.durationSeconds,
+            avgMsPerFrame: current.avgMsPerFrame
+          })
+        });
+        if (current.status === "complete" || current.status === "failed") break;
+        await stream.sleep(500);
+      }
+    });
+  });
+}
+
+// src/routes/globalAssets.ts
+import { existsSync as existsSync10, readFileSync as readFileSync12 } from "fs";
+import { homedir } from "os";
+import { join as join14 } from "path";
+function readGlobalAssets(home = homedir()) {
+  const manifestPath = join14(home, ".media", "manifest.jsonl");
+  if (!existsSync10(manifestPath)) return [];
+  const out = [];
+  for (const line of readFileSync12(manifestPath, "utf8").split("\n")) {
+    if (!line.trim()) continue;
+    try {
+      const rec = JSON.parse(line);
+      if (rec && rec.reusable) out.push(rec);
+    } catch {
+    }
+  }
+  return out;
+}
+function toPublicAsset(r) {
+  return { id: r.id, type: r.type, description: r.description, sha: r.sha, entity: r.entity };
+}
+function registerGlobalAssetRoutes(api) {
+  api.get("/assets/global", (c) => c.json({ assets: readGlobalAssets().map(toPublicAsset) }));
+}
+
 // src/createStudioApi.ts
 function createStudioApi(adapter) {
   const api = new Hono();
@@ -4303,9 +4675,11 @@ function createStudioApi(adapter) {
   registerRenderRoutes(api, adapter);
   registerThumbnailRoutes(api, adapter);
   registerSelectionRoutes(api, adapter);
+  registerMediaRoutes(api, adapter);
   registerWaveformRoutes(api, adapter);
   registerFontRoutes(api);
   registerRegistryRoutes(api, adapter);
+  registerGlobalAssetRoutes(api);
   return api;
 }
 
@@ -4331,11 +4705,66 @@ function getElementScreenshotClip(selector, selectorIndex) {
     height: Math.max(1, Math.min(rect.height + pad * 2, maxHeight))
   };
 }
+
+// src/helpers/backgroundRemovalJob.ts
+function createBackgroundRemovalJob(opts, render) {
+  const state = {
+    id: opts.jobId,
+    status: "processing",
+    progress: 0,
+    stage: "Preparing background removal",
+    inputAssetPath: opts.inputAssetPath,
+    outputAssetPath: opts.outputAssetPath,
+    outputPath: opts.outputPath,
+    ...opts.backgroundOutputPath ? { backgroundOutputPath: opts.backgroundOutputPath } : {},
+    ...opts.backgroundOutputAssetPath ? { backgroundOutputAssetPath: opts.backgroundOutputAssetPath } : {}
+  };
+  void (async () => {
+    try {
+      const result = await render({
+        inputPath: opts.inputPath,
+        outputPath: opts.outputPath,
+        backgroundOutputPath: opts.backgroundOutputPath,
+        device: opts.device,
+        quality: opts.quality,
+        onProgress: (event) => updateBackgroundRemovalProgress(state, event)
+      });
+      state.status = "complete";
+      state.progress = 100;
+      state.stage = "Complete";
+      state.provider = result.provider;
+      state.framesProcessed = result.framesProcessed;
+      state.durationSeconds = result.durationSeconds;
+      state.avgMsPerFrame = result.avgMsPerFrame;
+    } catch (err) {
+      state.status = "failed";
+      state.error = err instanceof Error ? err.message : String(err);
+      state.stage = "Failed";
+    }
+  })();
+  return state;
+}
+function updateBackgroundRemovalProgress(state, event) {
+  if (event.kind === "info") {
+    state.stage = event.message;
+    return;
+  }
+  if (event.kind === "metadata") {
+    state.stage = `Source ${event.width}\xD7${event.height}`;
+    state.progress = 2;
+    return;
+  }
+  state.progress = event.total ? Math.min(99, Math.floor(event.index / event.total * 100)) : 0;
+  state.stage = event.total ? `Removing background ${event.index}/${event.total}` : `Removing background frame ${event.index}`;
+  state.framesProcessed = event.index;
+  state.avgMsPerFrame = event.avgMsPerFrame;
+}
 export {
   MIME_TYPES,
   STUDIO_MANUAL_EDITS_PATH,
   STUDIO_MOTION_PATH,
   buildSubCompositionHtml,
+  createBackgroundRemovalJob,
   createProjectSignature,
   createStudioApi,
   createStudioManualEditsRenderBodyScript,