@democraft/remotion 0.1.0-beta.0

package/dist/client.d.ts

@@ -0,0 +1,116 @@
+import { V as VisualComponent, c as CaptionProps, a as CalloutProps, i as VisualRegistry } from './media-CILzIgah.js';
+export { C as Callout, b as Caption, d as CaptureDimensions, e as CreateProductDemoVideoPropsOptions, D as DEFAULT_DEMO_MEDIA_MODE, f as DemoMediaMode, G as GenericVisualComponent, g as GlassCallout, K as KineticCaption, O as OverlayLayer, P as ProductDemoVideo, h as ProductDemoVideoProps, S as StageLayout, j as createProductDemoVideoProps, k as defaultProductDemoProps, l as defaultVisualRegistry, s as stageLayout } from './media-CILzIgah.js';
+import React from 'react';
+import '@democraft/schema';
+
+declare const compositionId = "Democraft";
+
+type VisualDefinition<TProps> = {
+    readonly component: unknown;
+    readonly __visualProps?: (props: TProps) => TProps;
+};
+/**
+ * A single visual registration — maps a renderer ID to a React component.
+ *
+ * Used with {@link defineVisualRegistry} to build a custom registry that
+ * extends (or replaces) the built-in defaults.
+ *
+ * @example
+ * ```ts
+ * { kind: "caption", id: "local.my-caption", component: MyCaption }
+ * { kind: "callout", id: "remocn.pulse-callout", component: PulseCallout }
+ * ```
+ */
+type VisualEntry = {
+    kind: "caption";
+    id: string;
+    component: VisualComponent<CaptionProps>;
+} | {
+    kind: "callout";
+    id: string;
+    component: VisualComponent<CalloutProps>;
+} | {
+    kind: "visual";
+    id: string;
+    component: React.ComponentType<never>;
+};
+/** Declare any React/Remotion component while preserving its exact props. */
+declare function defineVisual<TProps>(component: React.ComponentType<TProps>): VisualDefinition<TProps>;
+/**
+ * Build a custom visual registry by extending the built-in defaults.
+ *
+ * Pass any number of {@link VisualEntry} objects. Each entry adds (or
+ * overrides) a renderer ID in the registry. The result is a complete
+ * `VisualRegistry` you can pass to `<ProductDemoVideo registry={...} />` from
+ * a user-authored entry point.
+ *
+ * IDs follow the `<namespace>.<component>` convention:
+ * - `motion.*` — framework defaults (override with caution).
+ * - `remocn.*` — remocn (Remotion + shadcn) components.
+ * - `local.*` — your own project components.
+ *
+ * @example
+ * ```ts
+ * import { defineVisualRegistry } from "@democraft/remotion";
+ * import { MyCaption } from "./my-caption";
+ *
+ * const registry = defineVisualRegistry(
+ *   { kind: "caption", id: "local.my-caption", component: MyCaption },
+ * );
+ * ```
+ *
+ * The returned registry includes all built-in renderers (`motion.*`,
+ * `remocn.*`) plus your additions. Entries with the same ID as a built-in
+ * renderer override the default.
+ */
+declare function defineVisualRegistry(...entries: VisualEntry[]): VisualRegistry;
+declare function visualRegistryFromDefinitions(definitions?: Record<string, {
+    readonly component: unknown;
+}>): VisualRegistry;
+
+/**
+ * A Democraft adapter bundles optional extensions to the rendering pipeline.
+ *
+ * Today the only field is `visualRegistry`, which adds or overrides renderer
+ * IDs (the strings authors pass as `renderer` on caption/callout steps). Future
+ * fields may include theme presets, cursor styles, browser frames, etc.
+ *
+ * The type lives in `@democraft/core` (as `DemocraftAdapter`) to avoid a
+ * circular dependency, but is re-exported here for convenience.
+ */
+type DemocraftAdapter = {
+    name: string;
+    visualRegistry?: VisualRegistry;
+};
+/**
+ * Create the remocn adapter — the recommended adapter for Democraft.
+ *
+ * Remocn ("Remotion + shadcn") is the primary source of cinematic components
+ * for overlays. The adapter ships with built-in renderers (`motion.*` defaults
+ * + `remocn.*` components). Pass a custom registry to add or replace
+ * renderers.
+ *
+ * @example
+ * ```ts
+ * import { remocnAdapter, defineVisualRegistry } from "@democraft/remotion";
+ * import { MyCaption } from "./my-caption";
+ *
+ * export default defineConfig({
+ *   adapters: [
+ *     remocnAdapter({
+ *       registry: defineVisualRegistry(
+ *         { kind: "caption", id: "local.my-caption", component: MyCaption },
+ *       ),
+ *     }),
+ *   ],
+ * });
+ * ```
+ *
+ * The adapter's registry is consumed by a user-authored entry point (see the
+ * "Custom entry" guide) to wire the components into `<ProductDemoVideo>`.
+ */
+declare function remocnAdapter(options?: {
+    registry?: VisualRegistry;
+}): DemocraftAdapter;
+
+export { CalloutProps, CaptionProps, type DemocraftAdapter, VisualComponent, type VisualEntry, VisualRegistry, compositionId, defineVisual, defineVisualRegistry, remocnAdapter, visualRegistryFromDefinitions };

package/dist/client.js

@@ -0,0 +1,40 @@
+import {
+  defineVisual,
+  defineVisualRegistry,
+  remocnAdapter,
+  visualRegistryFromDefinitions
+} from "./chunk-SER75PIJ.js";
+import {
+  Callout,
+  Caption,
+  GlassCallout,
+  KineticCaption,
+  OverlayLayer,
+  ProductDemoVideo,
+  defaultProductDemoProps,
+  defaultVisualRegistry,
+  stageLayout
+} from "./chunk-TWKRXLNL.js";
+import {
+  DEFAULT_DEMO_MEDIA_MODE,
+  compositionId,
+  createProductDemoVideoProps
+} from "./chunk-RINGSQ6X.js";
+export {
+  Callout,
+  Caption,
+  DEFAULT_DEMO_MEDIA_MODE,
+  GlassCallout,
+  KineticCaption,
+  OverlayLayer,
+  ProductDemoVideo,
+  compositionId,
+  createProductDemoVideoProps,
+  defaultProductDemoProps,
+  defaultVisualRegistry,
+  defineVisual,
+  defineVisualRegistry,
+  remocnAdapter,
+  stageLayout,
+  visualRegistryFromDefinitions
+};

package/dist/entry.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/entry.js

@@ -0,0 +1,34 @@
+import {
+  ProductDemoVideo,
+  defaultProductDemoProps
+} from "./chunk-TWKRXLNL.js";
+import {
+  compositionId
+} from "./chunk-RINGSQ6X.js";
+
+// src/entry.ts
+import React from "react";
+import { Composition, registerRoot } from "remotion";
+function Root() {
+  return React.createElement(Composition, {
+    id: compositionId,
+    component: ProductDemoVideo,
+    width: 1920,
+    height: 1080,
+    fps: 60,
+    durationInFrames: 1,
+    defaultProps: defaultProductDemoProps,
+    calculateMetadata: ({ props }) => ({
+      ...metadataFromProps(props)
+    })
+  });
+}
+function metadataFromProps(props) {
+  return {
+    durationInFrames: props.timeline.durationInFrames,
+    fps: props.timeline.fps,
+    width: props.width,
+    height: props.height
+  };
+}
+registerRoot(Root);

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { CreateRenderArtifactOptions, RenderArtifact, RenderDemoVideoOptions, cancelRenderArtifact, completeRenderArtifact, createDemoEntrySource, createRenderArtifact, failRenderArtifact, materializeDemoEntry, renderDemoVideo, renderSlug } from './server.js';
+export { DemocraftAdapter, VisualEntry, compositionId, defineVisual, defineVisualRegistry, remocnAdapter, visualRegistryFromDefinitions } from './client.js';
+export { C as Callout, a as CalloutProps, b as Caption, c as CaptionProps, d as CaptureDimensions, e as CreateProductDemoVideoPropsOptions, D as DEFAULT_DEMO_MEDIA_MODE, f as DemoMediaMode, G as GenericVisualComponent, g as GlassCallout, K as KineticCaption, O as OverlayLayer, P as ProductDemoVideo, h as ProductDemoVideoProps, S as StageLayout, V as VisualComponent, i as VisualRegistry, j as createProductDemoVideoProps, k as defaultProductDemoProps, l as defaultVisualRegistry, s as stageLayout } from './media-CILzIgah.js';
+export { RenderArtifactMetadata, RenderArtifactStatus } from '@democraft/schema';
+import '@remotion/renderer';
+import 'react';

package/dist/index.js

@@ -0,0 +1,58 @@
+import {
+  defineVisual,
+  defineVisualRegistry,
+  remocnAdapter,
+  visualRegistryFromDefinitions
+} from "./chunk-SER75PIJ.js";
+import {
+  Callout,
+  Caption,
+  GlassCallout,
+  KineticCaption,
+  OverlayLayer,
+  ProductDemoVideo,
+  defaultProductDemoProps,
+  defaultVisualRegistry,
+  stageLayout
+} from "./chunk-TWKRXLNL.js";
+import {
+  cancelRenderArtifact,
+  completeRenderArtifact,
+  createDemoEntrySource,
+  createRenderArtifact,
+  failRenderArtifact,
+  materializeDemoEntry,
+  renderDemoVideo,
+  renderSlug
+} from "./chunk-6AAAFZRJ.js";
+import {
+  DEFAULT_DEMO_MEDIA_MODE,
+  compositionId,
+  createProductDemoVideoProps
+} from "./chunk-RINGSQ6X.js";
+export {
+  Callout,
+  Caption,
+  DEFAULT_DEMO_MEDIA_MODE,
+  GlassCallout,
+  KineticCaption,
+  OverlayLayer,
+  ProductDemoVideo,
+  cancelRenderArtifact,
+  completeRenderArtifact,
+  compositionId,
+  createDemoEntrySource,
+  createProductDemoVideoProps,
+  createRenderArtifact,
+  defaultProductDemoProps,
+  defaultVisualRegistry,
+  defineVisual,
+  defineVisualRegistry,
+  failRenderArtifact,
+  materializeDemoEntry,
+  remocnAdapter,
+  renderDemoVideo,
+  renderSlug,
+  stageLayout,
+  visualRegistryFromDefinitions
+};

package/dist/media-CILzIgah.d.ts

@@ -0,0 +1,146 @@
+import React from 'react';
+import { OverlayTrack, BoundingBox, RenderTimeline, RecordedDemoManifest } from '@democraft/schema';
+
+type StageLayout = {
+    scale: number;
+    x: number;
+    y: number;
+};
+/**
+ * The viewport dimensions used during Playwright capture. The stage layout
+ * maps the captured screenshot (at these CSS dimensions) into the render
+ * frame. Defaults to 1920×1080 to match the Remotion composition; older
+ * captures that used 1440×900 pass their own dimensions via the manifest's
+ * `capture` field.
+ *
+ * `deviceScaleFactor` records the pixel density the screenshot was captured
+ * at (Playwright `deviceScaleFactor`, default 2). The native PNG resolution is
+ * `width × height × deviceScaleFactor`. The renderer renders the `<Img>` at
+ * native resolution (with a compensating scale) so camera zoom amplifies a
+ * full-resolution bitmap instead of an already-downscaled one — preventing
+ * pixelation on focus shots. Defaults to 1 when absent (legacy captures).
+ */
+type CaptureDimensions = {
+    width: number;
+    height: number;
+    deviceScaleFactor?: number;
+};
+declare function stageLayout(width: number, height: number, capture?: CaptureDimensions): StageLayout;
+
+type CameraState = {
+    scale: number;
+    focusX: number;
+    focusY: number;
+    translateX: number;
+    translateY: number;
+};
+
+type VisualComponent<T> = React.FC<T>;
+type GenericVisualComponent = React.ComponentType<Record<string, unknown>>;
+type CaptionProps = {
+    overlay: Extract<OverlayTrack, {
+        kind: "caption";
+    }>;
+    opacity: number;
+};
+type CalloutProps = {
+    overlay: Extract<OverlayTrack, {
+        kind: "callout";
+    }>;
+    opacity: number;
+    box: BoundingBox;
+};
+type VisualRegistry = {
+    captions: Record<string, VisualComponent<CaptionProps>>;
+    callouts: Record<string, VisualComponent<CalloutProps>>;
+    visuals: Record<string, GenericVisualComponent>;
+};
+declare function OverlayLayer({ camera, frame, registry, stage, timeline, }: {
+    camera: CameraState;
+    frame: number;
+    registry: VisualRegistry;
+    stage: StageLayout;
+    timeline: RenderTimeline;
+}): React.FunctionComponentElement<React.FragmentProps>;
+declare function Caption({ opacity, overlay }: CaptionProps): React.DetailedReactHTMLElement<{
+    style: {
+        position: "absolute";
+        left: string;
+        bottom: number;
+        transform: "translateX(-50%)";
+        maxWidth: number;
+        padding: string;
+        borderRadius: number;
+        backgroundColor: "rgba(10,14,20,.84)";
+        color: "white";
+        font: "500 34px Inter, system-ui, sans-serif";
+        opacity: number;
+    };
+}, HTMLElement>;
+declare function KineticCaption({ opacity, overlay }: CaptionProps): React.DetailedReactHTMLElement<{
+    style: {
+        position: "absolute";
+        left: string;
+        bottom: number;
+        transform: `translateX(-50%) scale(${number})`;
+        width: number;
+        maxWidth: number;
+        height: number;
+        padding: string;
+        borderRadius: number;
+        backgroundColor: "rgba(10,14,20,.72)";
+        color: "white";
+        font: "800 38px Inter, system-ui, sans-serif";
+        letterSpacing: number;
+        opacity: number;
+        textShadow: "0 18px 50px rgba(0,0,0,.42)";
+    };
+}, HTMLElement>;
+declare function Callout({ box, opacity, overlay }: CalloutProps): React.DetailedReactHTMLElement<{
+    style: React.CSSProperties;
+}, HTMLElement>;
+declare function GlassCallout({ box, opacity, overlay, }: CalloutProps): React.ReactElement;
+/**
+ * The built-in visual registry. Maps renderer IDs (the strings authors pass as
+ * `renderer` on caption/callout steps) to React components.
+ *
+ * Convention: `<namespace>.<component>`
+ *   - `motion.*` — the framework's default styling (used when `renderer` is
+ *     omitted).
+ *   - `remocn.*` — components backed by remocn (Remotion + shadcn) building
+ *     blocks.
+ *
+ * A user-authored entry point can extend or replace this via
+ * `defineVisualRegistry()`.
+ */
+declare const defaultVisualRegistry: VisualRegistry;
+
+type ProductDemoVideoProps = {
+    manifest: RecordedDemoManifest;
+    recordingSrc?: string;
+    timeline: RenderTimeline;
+    screenshotSrcByStepId: Record<string, string>;
+    width: number;
+    height: number;
+    /**
+     * Override the visual registry (renderer ID → component map). When omitted,
+     * uses `defaultVisualRegistry` (the built-in `motion.*` + `remocn.*`
+     * components). Pass a custom registry from a user-authored entry point to
+     * add or replace renderers without editing the library.
+     */
+    registry?: VisualRegistry;
+};
+declare const defaultProductDemoProps: ProductDemoVideoProps;
+declare function ProductDemoVideo(props: ProductDemoVideoProps): React.FunctionComponentElement<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type DemoMediaMode = "screenshots" | "recording";
+declare const DEFAULT_DEMO_MEDIA_MODE: DemoMediaMode;
+type CreateProductDemoVideoPropsOptions = Omit<ProductDemoVideoProps, "recordingSrc" | "width" | "height"> & {
+    mediaMode?: DemoMediaMode;
+    recordingSrc?: string;
+    width?: number;
+    height?: number;
+};
+declare function createProductDemoVideoProps(options: CreateProductDemoVideoPropsOptions): ProductDemoVideoProps;
+
+export { Callout as C, DEFAULT_DEMO_MEDIA_MODE as D, type GenericVisualComponent as G, KineticCaption as K, OverlayLayer as O, ProductDemoVideo as P, type StageLayout as S, type VisualComponent as V, type CalloutProps as a, Caption as b, type CaptionProps as c, type CaptureDimensions as d, type CreateProductDemoVideoPropsOptions as e, type DemoMediaMode as f, GlassCallout as g, type ProductDemoVideoProps as h, type VisualRegistry as i, createProductDemoVideoProps as j, defaultProductDemoProps as k, defaultVisualRegistry as l, stageLayout as s };

package/dist/server.d.ts

@@ -0,0 +1,77 @@
+import { RenderMediaOnProgress, CancelSignal, FrameRange } from '@remotion/renderer';
+import { RenderArtifactMetadata, RecordedDemoManifest, RenderTimeline } from '@democraft/schema';
+export { RenderArtifactMetadata, RenderArtifactStatus } from '@democraft/schema';
+import { f as DemoMediaMode } from './media-CILzIgah.js';
+import 'react';
+
+/** Build the browser entry that wires visual definitions from a demo module. */
+declare function createDemoEntrySource(demoPath: string): string;
+/** Materialize a deterministic generated entry beside the demo module. */
+declare function materializeDemoEntry(demoPath: string): Promise<string>;
+
+type RenderArtifact = {
+    directory: string;
+    metadataPath: string;
+    outputFile: string;
+    temporaryOutputFile: string;
+    metadata: RenderArtifactMetadata;
+};
+type CreateRenderArtifactOptions = {
+    rootDirectory: string;
+    demoId: string;
+    definitionHash?: string;
+    captureHash?: string;
+    captureEnvironmentHash?: string;
+    render: RenderArtifactMetadata["render"];
+    source?: RenderArtifactMetadata["source"];
+};
+type ArtifactDependencies = {
+    now: () => Date;
+    shortId: () => string;
+};
+declare function createRenderArtifact(options: CreateRenderArtifactOptions, dependencies?: ArtifactDependencies): Promise<RenderArtifact>;
+declare function completeRenderArtifact(artifact: RenderArtifact, now?: Date): Promise<void>;
+declare function failRenderArtifact(artifact: RenderArtifact, error: unknown, now?: Date): Promise<void>;
+declare function cancelRenderArtifact(artifact: RenderArtifact, now?: Date): Promise<void>;
+declare function renderSlug(value: string): string;
+
+type RenderDemoVideoOptions = {
+    manifest: RecordedDemoManifest;
+    timeline: RenderTimeline;
+    screenshotSrcByStepId: Record<string, string>;
+    recordingFile?: string;
+    mediaMode?: DemoMediaMode;
+    outputFile: string;
+    width?: number;
+    height?: number;
+    scale?: number;
+    crf?: number;
+    /**
+     * Optional path to the bundled entry.js (the file that calls registerRoot).
+     * Defaults to dist/entry.js next to this module. Pass explicitly when
+     * calling from inside a webpack bundle (e.g. Next.js dev server) where
+     * import.meta.url is rewritten and the default resolution gives the
+     * wrong path.
+     */
+    entryPath?: string;
+    /**
+     * Live render progress. Receives Remotion's RenderMediaProgress
+     * ({ progress, renderedFrames, encodedFrames, stitchStage,
+     * renderEstimatedTime, … }). Forwarded verbatim to renderMedia.
+     */
+    onProgress?: RenderMediaOnProgress;
+    /**
+     * Cancellation handle from makeCancelSignal(). When the paired cancel()
+     * is invoked, renderMedia rejects with a cancel error.
+     */
+    cancelSignal?: CancelSignal;
+    /**
+     * Sub-range of frames to render ([startFrame, endFrame], inclusive). When
+     * omitted the whole composition renders. Used by the studio's in/out
+     * markers. See docs/architecture/studio-roadmap.md "Render range".
+     */
+    frameRange?: FrameRange;
+};
+declare function renderDemoVideo(options: RenderDemoVideoOptions): Promise<void>;
+
+export { type CreateRenderArtifactOptions, type RenderArtifact, type RenderDemoVideoOptions, cancelRenderArtifact, completeRenderArtifact, createDemoEntrySource, createRenderArtifact, failRenderArtifact, materializeDemoEntry, renderDemoVideo, renderSlug };

package/dist/server.js

@@ -0,0 +1,21 @@
+import {
+  cancelRenderArtifact,
+  completeRenderArtifact,
+  createDemoEntrySource,
+  createRenderArtifact,
+  failRenderArtifact,
+  materializeDemoEntry,
+  renderDemoVideo,
+  renderSlug
+} from "./chunk-6AAAFZRJ.js";
+import "./chunk-RINGSQ6X.js";
+export {
+  cancelRenderArtifact,
+  completeRenderArtifact,
+  createDemoEntrySource,
+  createRenderArtifact,
+  failRenderArtifact,
+  materializeDemoEntry,
+  renderDemoVideo,
+  renderSlug
+};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@democraft/remotion",
+  "version": "0.1.0-beta.0",
+  "description": "Remotion composition and video renderer for Democraft.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/felipersas/democraft.git",
+    "directory": "packages/remotion"
+  },
+  "homepage": "https://github.com/felipersas/democraft#readme",
+  "bugs": "https://github.com/felipersas/democraft/issues",
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "default": "./dist/client.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js",
+      "default": "./dist/server.js"
+    },
+    "./entry": {
+      "types": "./dist/entry.d.ts",
+      "import": "./dist/entry.js",
+      "default": "./dist/entry.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@remotion/bundler": "4.0.487",
+    "@remotion/renderer": "4.0.487",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "remotion": "4.0.487",
+    "@democraft/schema": "0.1.0-beta.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/entry.ts src/client.ts src/server.ts --format esm --dts --clean",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}