@vibeo/renderer 0.1.0 → 0.2.0

package/dist/bundler.d.ts

@@ -7,4 +7,9 @@ import type { BundleResult } from "./types.js";
  * and mounts it with ReactDOM.createRoot.
  */
 export declare function bundle(entryPoint: string): Promise<BundleResult>;
+/**
+ * Bundle the user's React entry point for the visual editor.
+ * Same pattern as bundle() but renders <Editor> instead of <Player>.
+ */
+export declare function bundleForEditor(entryPoint: string, port?: number): Promise<BundleResult>;
 //# sourceMappingURL=bundler.d.ts.map

package/dist/bundler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bundler.d.ts","sourceRoot":"","sources":["../src/bundler.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;;;;;GAMG;AACH,wBAAsB,MAAM,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAqItE"}
+{"version":3,"file":"bundler.d.ts","sourceRoot":"","sources":["../src/bundler.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AA0D/C;;;;;;GAMG;AACH,wBAAsB,MAAM,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAyItE;AAED;;;GAGG;AACH,wBAAsB,eAAe,CACnC,UAAU,EAAE,MAAM,EAClB,IAAI,GAAE,MAAa,GAClB,OAAO,CAAC,YAAY,CAAC,CA6HvB"}

package/dist/bundler.js

@@ -1,6 +1,54 @@
 import { mkdtemp, rm } from "node:fs/promises";
-import { join, dirname } from "node:path";
+import { join, dirname, resolve } from "node:path";
 import { tmpdir } from "node:os";
+import { existsSync } from "node:fs";
+/**
+ * Find the monorepo root by walking up from the entry file until we find
+ * the packages/ directory. Returns null if not found.
+ */
+function findMonorepoRoot(startDir) {
+    let dir = startDir;
+    for (let i = 0; i < 10; i++) {
+        if (existsSync(join(dir, "packages", "core", "src", "index.ts"))) {
+            return dir;
+        }
+        const parent = dirname(dir);
+        if (parent === dir)
+            break;
+        dir = parent;
+    }
+    return null;
+}
+/**
+ * Bun.build plugin that resolves all @vibeo/* bare-specifier imports to
+ * their source .ts/.tsx files.  This prevents the bundler from pulling in
+ * BOTH the compiled dist/ AND the source for the same package, which
+ * would duplicate React contexts and break provider/consumer pairing.
+ */
+function vibeoSourcePlugin(monoRoot) {
+    const pkgMap = {};
+    for (const name of [
+        "core",
+        "player",
+        "audio",
+        "effects",
+        "extras",
+        "editor",
+    ]) {
+        pkgMap[`@vibeo/${name}`] = resolve(monoRoot, "packages", name, "src", "index.ts");
+    }
+    return {
+        name: "vibeo-source-resolver",
+        setup(build) {
+            build.onResolve({ filter: /^@vibeo\// }, (args) => {
+                const src = pkgMap[args.path];
+                if (src)
+                    return { path: src };
+                return undefined;
+            });
+        },
+    };
+}
 /**
  * Bundle the user's React entry point using Bun.build,
  * then serve it via a local HTTP server for the headless browser to load.
@@ -71,6 +119,8 @@ root.render(React.createElement(PreviewApp));
 window.vibeo_ready = true;
 `);
     try {
+        const monoRoot = findMonorepoRoot(entryDir);
+        const plugins = monoRoot ? [vibeoSourcePlugin(monoRoot)] : [];
         const result = await Bun.build({
             entrypoints: [bootstrapPath],
             outdir: outDir,
@@ -78,6 +128,7 @@ window.vibeo_ready = true;
             format: "esm",
             minify: false,
             splitting: false,
+            plugins,
             define: {
                 "process.env.NODE_ENV": JSON.stringify("production"),
             },
@@ -132,4 +183,119 @@ window.vibeo_ready = true;
         await rm(bootstrapPath, { force: true });
     }
 }
+/**
+ * Bundle the user's React entry point for the visual editor.
+ * Same pattern as bundle() but renders <Editor> instead of <Player>.
+ */
+export async function bundleForEditor(entryPoint, port = 3001) {
+    const outDir = await mkdtemp(join(tmpdir(), "vibeo-editor-bundle-"));
+    const entryDir = dirname(entryPoint);
+    const bootstrapPath = join(entryDir, "__vibeo_editor_entry.tsx");
+    await Bun.write(bootstrapPath, `import React from "react";
+import { createRoot } from "react-dom/client";
+import { Root } from ${JSON.stringify(entryPoint)};
+import { Editor } from "@vibeo/editor";
+import { VibeoRoot, useCompositionContext } from "@vibeo/core";
+
+function EditorShell() {
+  const { compositions } = useCompositionContext();
+
+  const entries = [];
+  for (const [, comp] of compositions) {
+    entries.push({
+      id: comp.id,
+      name: comp.id,
+      component: comp.component,
+      width: comp.width,
+      height: comp.height,
+      fps: comp.fps,
+      durationInFrames: comp.durationInFrames,
+    });
+  }
+
+  if (entries.length === 0) {
+    return React.createElement("div", {
+      style: { color: "#888", fontFamily: "sans-serif", padding: 40 }
+    }, "Loading compositions...");
+  }
+
+  return React.createElement(Editor, { compositions: entries });
+}
+
+function EditorApp() {
+  return React.createElement(VibeoRoot, null,
+    React.createElement(Root),
+    React.createElement(EditorShell),
+  );
+}
+
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(React.createElement(EditorApp));
+
+window.vibeo_ready = true;
+`);
+    try {
+        const monoRoot = findMonorepoRoot(entryDir);
+        const plugins = monoRoot ? [vibeoSourcePlugin(monoRoot)] : [];
+        const result = await Bun.build({
+            entrypoints: [bootstrapPath],
+            outdir: outDir,
+            target: "browser",
+            format: "esm",
+            minify: false,
+            splitting: false,
+            plugins,
+            define: {
+                "process.env.NODE_ENV": JSON.stringify("production"),
+            },
+        });
+        if (!result.success) {
+            const messages = result.logs.map((l) => l.message).join("\n");
+            throw new Error(`Editor bundle failed:\n${messages}`);
+        }
+        const bundleName = result.outputs[0]?.path.split("/").pop() ?? "__vibeo_editor_entry.js";
+        const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Vibeo Editor</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body, #root { width: 100%; height: 100%; overflow: hidden; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/${bundleName}"></script>
+</body>
+</html>`;
+        await Bun.write(join(outDir, "index.html"), html);
+        const server = Bun.serve({
+            port,
+            async fetch(req) {
+                const url = new URL(req.url);
+                const filePath = join(outDir, url.pathname === "/" ? "index.html" : url.pathname);
+                const file = Bun.file(filePath);
+                if (await file.exists()) {
+                    return new Response(file);
+                }
+                return new Response("Not found", { status: 404 });
+            },
+        });
+        const serverPort = server.port ?? port;
+        const cleanup = async () => {
+            server.stop(true);
+            await rm(outDir, { recursive: true, force: true });
+        };
+        return {
+            outDir,
+            url: `http://localhost:${serverPort}`,
+            cleanup,
+        };
+    }
+    finally {
+        await rm(bootstrapPath, { force: true });
+    }
+}
 //# sourceMappingURL=bundler.js.map

package/dist/bundler.js.map

@@ -1 +1 @@
-{"version":3,"file":"bundler.js","sourceRoot":"","sources":["../src/bundler.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"bundler.js","sourceRoot":"","sources":["../src/bundler.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export type { RenderConfig, RenderProgress, Codec, ImageFormat, FrameRange, StitchOptions, AudioMuxOptions, BundleResult, } from "./types.js";
 export { launchBrowser, closeBrowser, createPage } from "./browser.js";
-export { bundle } from "./bundler.js";
+export { bundle, bundleForEditor } from "./bundler.js";
 export { seekToFrame, loadBundle } from "./seek-to-frame.js";
 export { captureFrame } from "./capture-frame.js";
 export { parseFrameRange, getRealFrameRange, validateFrameRange } from "./frame-range.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,YAAY,EACZ,cAAc,EACd,KAAK,EACL,WAAW,EACX,UAAU,EACV,aAAa,EACb,eAAe,EACf,YAAY,GACb,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGvE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG1F,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,YAAY,EACZ,cAAc,EACd,KAAK,EACL,WAAW,EACX,UAAU,EACV,aAAa,EACb,eAAe,EACf,YAAY,GACb,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGvE,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG1F,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
 // Browser lifecycle
 export { launchBrowser, closeBrowser, createPage } from "./browser.js";
 // Bundler
-export { bundle } from "./bundler.js";
+export { bundle, bundleForEditor } from "./bundler.js";
 // Frame navigation
 export { seekToFrame, loadBundle } from "./seek-to-frame.js";
 // Frame capture

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,UAAU;AACV,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,mBAAmB;AACnB,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE7D,gBAAgB;AAChB,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,wBAAwB;AACxB,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE1F,mBAAmB;AACnB,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,qBAAqB;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,4BAA4B;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,UAAU;AACV,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEvD,mBAAmB;AACnB,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE7D,gBAAgB;AAChB,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,wBAAwB;AACxB,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE1F,mBAAmB;AACnB,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,qBAAqB;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,4BAA4B;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibeo/renderer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/bundler.ts

@@ -1,8 +1,64 @@
 import { mkdtemp, rm } from "node:fs/promises";
-import { join, dirname } from "node:path";
+import { join, dirname, resolve } from "node:path";
 import { tmpdir } from "node:os";
 import type { BundleResult } from "./types.js";
 
+import { existsSync } from "node:fs";
+
+/**
+ * Find the monorepo root by walking up from the entry file until we find
+ * the packages/ directory. Returns null if not found.
+ */
+function findMonorepoRoot(startDir: string): string | null {
+  let dir = startDir;
+  for (let i = 0; i < 10; i++) {
+    if (existsSync(join(dir, "packages", "core", "src", "index.ts"))) {
+      return dir;
+    }
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return null;
+}
+
+/**
+ * Bun.build plugin that resolves all @vibeo/* bare-specifier imports to
+ * their source .ts/.tsx files.  This prevents the bundler from pulling in
+ * BOTH the compiled dist/ AND the source for the same package, which
+ * would duplicate React contexts and break provider/consumer pairing.
+ */
+function vibeoSourcePlugin(monoRoot: string): import("bun").BunPlugin {
+  const pkgMap: Record<string, string> = {};
+  for (const name of [
+    "core",
+    "player",
+    "audio",
+    "effects",
+    "extras",
+    "editor",
+  ]) {
+    pkgMap[`@vibeo/${name}`] = resolve(
+      monoRoot,
+      "packages",
+      name,
+      "src",
+      "index.ts",
+    );
+  }
+
+  return {
+    name: "vibeo-source-resolver",
+    setup(build) {
+      build.onResolve({ filter: /^@vibeo\// }, (args) => {
+        const src = pkgMap[args.path];
+        if (src) return { path: src };
+        return undefined;
+      });
+    },
+  };
+}
+
 /**
  * Bundle the user's React entry point using Bun.build,
  * then serve it via a local HTTP server for the headless browser to load.
@@ -78,6 +134,9 @@ window.vibeo_ready = true;
   );
 
   try {
+  const monoRoot = findMonorepoRoot(entryDir);
+  const plugins = monoRoot ? [vibeoSourcePlugin(monoRoot)] : [];
+
   const result = await Bun.build({
     entrypoints: [bootstrapPath],
     outdir: outDir,
@@ -85,6 +144,7 @@ window.vibeo_ready = true;
     format: "esm",
     minify: false,
     splitting: false,
+    plugins,
     define: {
       "process.env.NODE_ENV": JSON.stringify("production"),
     },
@@ -144,3 +204,137 @@ window.vibeo_ready = true;
     await rm(bootstrapPath, { force: true });
   }
 }
+
+/**
+ * Bundle the user's React entry point for the visual editor.
+ * Same pattern as bundle() but renders <Editor> instead of <Player>.
+ */
+export async function bundleForEditor(
+  entryPoint: string,
+  port: number = 3001,
+): Promise<BundleResult> {
+  const outDir = await mkdtemp(join(tmpdir(), "vibeo-editor-bundle-"));
+
+  const entryDir = dirname(entryPoint);
+  const bootstrapPath = join(entryDir, "__vibeo_editor_entry.tsx");
+  await Bun.write(
+    bootstrapPath,
+    `import React from "react";
+import { createRoot } from "react-dom/client";
+import { Root } from ${JSON.stringify(entryPoint)};
+import { Editor } from "@vibeo/editor";
+import { VibeoRoot, useCompositionContext } from "@vibeo/core";
+
+function EditorShell() {
+  const { compositions } = useCompositionContext();
+
+  const entries = [];
+  for (const [, comp] of compositions) {
+    entries.push({
+      id: comp.id,
+      name: comp.id,
+      component: comp.component,
+      width: comp.width,
+      height: comp.height,
+      fps: comp.fps,
+      durationInFrames: comp.durationInFrames,
+    });
+  }
+
+  if (entries.length === 0) {
+    return React.createElement("div", {
+      style: { color: "#888", fontFamily: "sans-serif", padding: 40 }
+    }, "Loading compositions...");
+  }
+
+  return React.createElement(Editor, { compositions: entries });
+}
+
+function EditorApp() {
+  return React.createElement(VibeoRoot, null,
+    React.createElement(Root),
+    React.createElement(EditorShell),
+  );
+}
+
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(React.createElement(EditorApp));
+
+window.vibeo_ready = true;
+`,
+  );
+
+  try {
+    const monoRoot = findMonorepoRoot(entryDir);
+    const plugins = monoRoot ? [vibeoSourcePlugin(monoRoot)] : [];
+
+    const result = await Bun.build({
+      entrypoints: [bootstrapPath],
+      outdir: outDir,
+      target: "browser",
+      format: "esm",
+      minify: false,
+      splitting: false,
+      plugins,
+      define: {
+        "process.env.NODE_ENV": JSON.stringify("production"),
+      },
+    });
+
+    if (!result.success) {
+      const messages = result.logs.map((l) => l.message).join("\n");
+      throw new Error(`Editor bundle failed:\n${messages}`);
+    }
+
+    const bundleName =
+      result.outputs[0]?.path.split("/").pop() ?? "__vibeo_editor_entry.js";
+    const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Vibeo Editor</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body, #root { width: 100%; height: 100%; overflow: hidden; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/${bundleName}"></script>
+</body>
+</html>`;
+
+    await Bun.write(join(outDir, "index.html"), html);
+
+    const server = Bun.serve({
+      port,
+      async fetch(req) {
+        const url = new URL(req.url);
+        const filePath = join(
+          outDir,
+          url.pathname === "/" ? "index.html" : url.pathname,
+        );
+        const file = Bun.file(filePath);
+        if (await file.exists()) {
+          return new Response(file);
+        }
+        return new Response("Not found", { status: 404 });
+      },
+    });
+    const serverPort = server.port ?? port;
+
+    const cleanup = async () => {
+      server.stop(true);
+      await rm(outDir, { recursive: true, force: true });
+    };
+
+    return {
+      outDir,
+      url: `http://localhost:${serverPort}`,
+      cleanup,
+    };
+  } finally {
+    await rm(bootstrapPath, { force: true });
+  }
+}

package/src/index.ts

@@ -14,7 +14,7 @@ export type {
 export { launchBrowser, closeBrowser, createPage } from "./browser.js";
 
 // Bundler
-export { bundle } from "./bundler.js";
+export { bundle, bundleForEditor } from "./bundler.js";
 
 // Frame navigation
 export { seekToFrame, loadBundle } from "./seek-to-frame.js";