@democraft/remotion 0.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Democraft contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# @democraft/remotion
+
+Remotion renderer for compiled Democraft timelines.
+
+```ts
+await renderDemoVideo({
+  manifest,
+  timeline,
+  outputFile: ".democraft/renders/create-project-live.mp4",
+  screenshotSrcByStepId,
+});
+```

package/dist/chunk-6AAAFZRJ.js

@@ -0,0 +1,265 @@
+import {
+  DEFAULT_DEMO_MEDIA_MODE,
+  compositionId,
+  createProductDemoVideoProps
+} from "./chunk-RINGSQ6X.js";
+
+// src/server.ts
+import { copyFile, mkdir as mkdir3, mkdtemp, rm as rm2 } from "fs/promises";
+import { dirname, join as join2 } from "path";
+import { tmpdir } from "os";
+import { fileURLToPath } from "url";
+import { bundle } from "@remotion/bundler";
+import {
+  renderMedia,
+  selectComposition
+} from "@remotion/renderer";
+
+// src/demo-entry.ts
+import { createHash } from "crypto";
+import { mkdir, writeFile } from "fs/promises";
+import path from "path";
+function createDemoEntrySource(demoPath) {
+  const demoImport = path.resolve(demoPath).replaceAll("\\", "/");
+  return `import React from "react";
+import {Composition, registerRoot} from "remotion";
+import demo from ${JSON.stringify(demoImport)};
+import {
+  ProductDemoVideo,
+  compositionId,
+  defaultProductDemoProps,
+  visualRegistryFromDefinitions,
+} from "@democraft/remotion/client";
+
+const registry = visualRegistryFromDefinitions(demo.visuals);
+const DemoVideo = (props) => React.createElement(ProductDemoVideo, {...props, registry});
+
+function Root() {
+  return React.createElement(Composition, {
+    id: compositionId,
+    component: DemoVideo,
+    width: 1920,
+    height: 1080,
+    fps: 60,
+    durationInFrames: 1,
+    defaultProps: defaultProductDemoProps,
+    calculateMetadata: ({props}) => ({
+      durationInFrames: props.timeline.durationInFrames,
+      fps: props.timeline.fps,
+      width: props.width,
+      height: props.height,
+    }),
+  });
+}
+
+registerRoot(Root);
+`;
+}
+async function materializeDemoEntry(demoPath) {
+  const absoluteDemoPath = path.resolve(demoPath);
+  const directory = path.join(
+    path.dirname(absoluteDemoPath),
+    ".democraft",
+    "entries"
+  );
+  const digest = createHash("sha256").update(absoluteDemoPath).digest("hex").slice(0, 16);
+  const entryPath = path.join(directory, `demo-${digest}.tsx`);
+  await mkdir(directory, { recursive: true });
+  await writeFile(entryPath, createDemoEntrySource(absoluteDemoPath), "utf8");
+  return entryPath;
+}
+
+// src/artifacts.ts
+import { randomBytes } from "crypto";
+import { mkdir as mkdir2, rename, rm, writeFile as writeFile2 } from "fs/promises";
+import { join } from "path";
+import {
+  parseRenderArtifactMetadata
+} from "@democraft/schema";
+var defaultDependencies = {
+  now: () => /* @__PURE__ */ new Date(),
+  shortId: () => randomBytes(4).toString("hex")
+};
+async function createRenderArtifact(options, dependencies = defaultDependencies) {
+  const slug = renderSlug(options.demoId);
+  const demoDirectory = join(options.rootDirectory, slug);
+  let demoDirectoryReady = false;
+  for (let attempt = 0; attempt < 5; attempt += 1) {
+    const now = dependencies.now();
+    const suffix = `${renderTimestamp(now)}-${dependencies.shortId()}`;
+    const renderId = `${slug}-${suffix}`;
+    const directory = join(demoDirectory, suffix);
+    const timestamp = now.toISOString();
+    const metadata = parseRenderArtifactMetadata({
+      schemaVersion: 1,
+      renderId,
+      demoId: options.demoId,
+      definitionHash: options.definitionHash,
+      captureHash: options.captureHash,
+      captureEnvironmentHash: options.captureEnvironmentHash,
+      status: "rendering",
+      createdAt: timestamp,
+      startedAt: timestamp,
+      updatedAt: timestamp,
+      output: { video: "video.mp4" },
+      render: options.render,
+      source: options.source
+    });
+    const artifact = {
+      directory,
+      metadataPath: join(directory, "metadata.json"),
+      outputFile: join(directory, "video.mp4"),
+      temporaryOutputFile: join(directory, `.video-${renderId}.tmp.mp4`),
+      metadata
+    };
+    if (!demoDirectoryReady) {
+      await mkdir2(demoDirectory, { recursive: true });
+      demoDirectoryReady = true;
+    }
+    try {
+      await mkdir2(directory);
+    } catch (error) {
+      if (isAlreadyExistsError(error)) continue;
+      throw error;
+    }
+    try {
+      await writeMetadata(artifact);
+      return artifact;
+    } catch (error) {
+      await rm(directory, { recursive: true, force: true });
+      throw error;
+    }
+  }
+  throw new Error(
+    `Could not allocate a unique render directory for "${options.demoId}".`
+  );
+}
+async function completeRenderArtifact(artifact, now = /* @__PURE__ */ new Date()) {
+  assertActive(artifact);
+  await rename(artifact.temporaryOutputFile, artifact.outputFile);
+  try {
+    await transitionArtifact(artifact, "completed", now);
+  } catch (error) {
+    artifact.metadata.status = "rendering";
+    artifact.metadata.finishedAt = void 0;
+    await rename(artifact.outputFile, artifact.temporaryOutputFile).catch(
+      () => void 0
+    );
+    throw error;
+  }
+}
+async function failRenderArtifact(artifact, error, now = /* @__PURE__ */ new Date()) {
+  await finishUnsuccessfulArtifact(artifact, "failed", error, now);
+}
+async function cancelRenderArtifact(artifact, now = /* @__PURE__ */ new Date()) {
+  await finishUnsuccessfulArtifact(artifact, "cancelled", void 0, now);
+}
+function renderSlug(value) {
+  const slug = value.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 80);
+  return slug || "demo";
+}
+function renderTimestamp(date) {
+  return date.toISOString().replace(/[:.]/g, "-");
+}
+async function finishUnsuccessfulArtifact(artifact, status, error, now) {
+  assertActive(artifact);
+  await rm(artifact.temporaryOutputFile, { force: true });
+  artifact.metadata.error = status === "failed" ? { message: errorMessage(error) } : void 0;
+  await transitionArtifact(artifact, status, now);
+}
+async function transitionArtifact(artifact, status, now) {
+  const timestamp = now.toISOString();
+  artifact.metadata.status = status;
+  artifact.metadata.updatedAt = timestamp;
+  artifact.metadata.finishedAt = timestamp;
+  await writeMetadata(artifact);
+}
+async function writeMetadata(artifact) {
+  parseRenderArtifactMetadata(artifact.metadata);
+  const temporaryPath = `${artifact.metadataPath}.${randomBytes(4).toString("hex")}.tmp`;
+  try {
+    await writeFile2(
+      temporaryPath,
+      `${JSON.stringify(artifact.metadata, null, 2)}
+`,
+      {
+        flag: "wx"
+      }
+    );
+    await rename(temporaryPath, artifact.metadataPath);
+  } finally {
+    await rm(temporaryPath, { force: true });
+  }
+}
+function assertActive(artifact) {
+  if (artifact.metadata.status !== "rendering") {
+    throw new Error(
+      `Render artifact "${artifact.metadata.renderId}" is already ${artifact.metadata.status}.`
+    );
+  }
+}
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function isAlreadyExistsError(error) {
+  return error instanceof Error && "code" in error && error.code === "EEXIST";
+}
+
+// src/server.ts
+async function renderDemoVideo(options) {
+  const mediaMode = options.mediaMode ?? (options.recordingFile ? "recording" : DEFAULT_DEMO_MEDIA_MODE);
+  const selectedRecordingFile = mediaMode === "recording" ? options.recordingFile : void 0;
+  const inputProps = createProductDemoVideoProps({
+    manifest: options.manifest,
+    mediaMode,
+    recordingSrc: selectedRecordingFile ? "recording.webm" : void 0,
+    timeline: options.timeline,
+    screenshotSrcByStepId: options.screenshotSrcByStepId,
+    width: options.width,
+    height: options.height
+  });
+  const publicDir = await createRenderPublicDir(selectedRecordingFile);
+  const scale = options.scale ?? 1;
+  try {
+    const entryPoint = options.entryPath ?? fileURLToPath(new URL("./entry.js", import.meta.url).href);
+    const serveUrl = await bundle({ entryPoint, publicDir });
+    const composition = await selectComposition({
+      serveUrl,
+      id: compositionId,
+      inputProps
+    });
+    await mkdir3(dirname(options.outputFile), { recursive: true });
+    await renderMedia({
+      composition,
+      serveUrl,
+      codec: "h264",
+      crf: options.crf ?? 15,
+      scale,
+      jpegQuality: 100,
+      outputLocation: options.outputFile,
+      inputProps,
+      onProgress: options.onProgress,
+      cancelSignal: options.cancelSignal,
+      frameRange: options.frameRange
+    });
+  } finally {
+    if (publicDir) await rm2(publicDir, { recursive: true, force: true });
+  }
+}
+async function createRenderPublicDir(recordingFile) {
+  if (!recordingFile) return null;
+  const publicDir = await mkdtemp(join2(tmpdir(), "democraft-remotion-"));
+  await copyFile(recordingFile, join2(publicDir, "recording.webm"));
+  return publicDir;
+}
+
+export {
+  createDemoEntrySource,
+  materializeDemoEntry,
+  createRenderArtifact,
+  completeRenderArtifact,
+  failRenderArtifact,
+  cancelRenderArtifact,
+  renderSlug,
+  renderDemoVideo
+};

package/dist/chunk-RINGSQ6X.js

@@ -0,0 +1,28 @@
+// src/constants.ts
+var compositionId = "Democraft";
+
+// src/media.ts
+var DEFAULT_DEMO_MEDIA_MODE = "screenshots";
+var DEFAULT_COMPOSITION_WIDTH = 1920;
+var DEFAULT_COMPOSITION_HEIGHT = 1080;
+function createProductDemoVideoProps(options) {
+  const mediaMode = options.mediaMode ?? DEFAULT_DEMO_MEDIA_MODE;
+  if (mediaMode === "recording" && !options.recordingSrc) {
+    throw new Error("Recording mode requires a recording source.");
+  }
+  return {
+    manifest: options.manifest,
+    timeline: options.timeline,
+    recordingSrc: mediaMode === "recording" ? options.recordingSrc : void 0,
+    screenshotSrcByStepId: options.screenshotSrcByStepId,
+    width: options.width ?? DEFAULT_COMPOSITION_WIDTH,
+    height: options.height ?? DEFAULT_COMPOSITION_HEIGHT,
+    registry: options.registry
+  };
+}
+
+export {
+  compositionId,
+  DEFAULT_DEMO_MEDIA_MODE,
+  createProductDemoVideoProps
+};

package/dist/chunk-SER75PIJ.js

@@ -0,0 +1,47 @@
+import {
+  defaultVisualRegistry
+} from "./chunk-TWKRXLNL.js";
+
+// src/registry.ts
+function defineVisual(component) {
+  return { component };
+}
+function defineVisualRegistry(...entries) {
+  const registry = {
+    captions: { ...defaultVisualRegistry.captions },
+    callouts: { ...defaultVisualRegistry.callouts },
+    visuals: { ...defaultVisualRegistry.visuals }
+  };
+  for (const entry of entries) {
+    if (entry.kind === "caption") {
+      registry.captions[entry.id] = entry.component;
+    } else if (entry.kind === "callout") {
+      registry.callouts[entry.id] = entry.component;
+    } else {
+      registry.visuals[entry.id] = entry.component;
+    }
+  }
+  return registry;
+}
+function visualRegistryFromDefinitions(definitions) {
+  const registry = defineVisualRegistry();
+  for (const [id, definition] of Object.entries(definitions ?? {})) {
+    registry.visuals[id] = definition.component;
+  }
+  return registry;
+}
+
+// src/adapters/remocn.ts
+function remocnAdapter(options) {
+  return {
+    name: "remocn",
+    visualRegistry: options?.registry ?? defaultVisualRegistry
+  };
+}
+
+export {
+  defineVisual,
+  defineVisualRegistry,
+  visualRegistryFromDefinitions,
+  remocnAdapter
+};