@lalalic/markcut 1.1.1 → 2.0.0

package/src/render/cli.mjs

@@ -7,8 +7,9 @@
  *                                        (TTS/STT/durations)
  */
 import { execSync, spawn } from "node:child_process";
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
-import { resolve, dirname, join } from "node:path";
+import { readFileSync, writeFileSync, mkdirSync, existsSync, copyFileSync } from "node:fs";
+import { createHash } from "node:crypto";
+import { resolve, dirname, join, extname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -111,11 +112,42 @@ export function parseArgs(argv) {
  *
  * Use --verbose to see every frame line (original behavior).
  */
+/**
+ * Stage local absolute-path assets (TTS audio, TTI/TTV media, subtitles from
+ * .markcut/) into ROOT/public/.render-assets/ and rewrite srcs to relative
+ * paths, so `npx remotion render` (publicDir = ROOT/public) can serve them.
+ * The preview server handles these paths via multi-root serving; the render
+ * CLI needs them staged into the one public dir Remotion knows about.
+ */
+function stageLocalAssets(tree) {
+  const assetsDir = join(ROOT, "public", ".render-assets");
+  const seen = new Map();
+  const walk = (node) => {
+    if (!node || typeof node !== "object") return;
+    if (typeof node.src === "string" && node.src.startsWith("/") && !node.src.startsWith("//") && existsSync(node.src)) {
+      let staged = seen.get(node.src);
+      if (!staged) {
+        const name = createHash("md5").update(node.src).digest("hex").slice(0, 12) + extname(node.src);
+        mkdirSync(assetsDir, { recursive: true });
+        copyFileSync(node.src, join(assetsDir, name));
+        staged = `.render-assets/${name}`;
+        seen.set(node.src, staged);
+      }
+      node.src = staged;
+    }
+    for (const value of Object.values(node)) {
+      if (value && typeof value === "object") walk(value);
+    }
+  };
+  walk(tree);
+  return tree;
+}
+
 function renderOne(streamTree, aspect, outputPath, verbose) {
   const dims = ASPECTS[aspect];
   if (!dims) throw new Error(`Unknown aspect: ${aspect}`);
 
-  const adapted = { ...streamTree, width: dims.width, height: dims.height };
+  const adapted = stageLocalAssets(JSON.parse(JSON.stringify({ ...streamTree, width: dims.width, height: dims.height })));
   const tmpProps = join(ROOT, ".tmp", `render-${aspect}.json`);
   mkdirSync(dirname(tmpProps), { recursive: true });
   writeFileSync(tmpProps, JSON.stringify({ root: adapted }));
@@ -211,21 +243,19 @@ async function main() {
     }
 
     if (args.label || args.edit) {
-      const playerServer = args.label
-        ? join(__dirname, "..", "player", "label-server.mjs")
-        : join(__dirname, "..", "player", "server.mjs");
+      const playerServer = join(__dirname, "..", "player", "server.mjs");
       if (!existsSync(playerServer)) {
         console.error("Player server not found at", playerServer);
         process.exit(1);
       }
-      const modeFlags = args.noBrowser ? "--no-browser" : "";
+      const labelFlag = args.label ? "--label" : "";
       const editFlag = args.edit ? "--edit" : "";
       const portFlag = `--port=${args.port || 3001}`;
       const fileFlag = args.file || join(ROOT, "video.json");
       const port = args.port || 3001;
       // Pass variant flags to the server
       const variantFlags = args.variant.map(v => `--variant=${v}`);
-      const serverArgs = [playerServer, resolve(fileFlag), modeFlags, editFlag, `--port=${port}`, ...variantFlags].filter(Boolean);
+      const serverArgs = [playerServer, resolve(fileFlag), labelFlag, editFlag, portFlag, ...variantFlags].filter(Boolean);
       const child = spawn("node", serverArgs, { cwd: ROOT, stdio: ["ignore", "pipe", "inherit"] });
       let serverReady = false;
       let stdoutBuffer = "";
@@ -235,7 +265,7 @@ async function main() {
           process.stdout.write(chunk);
           if (!serverReady && !args.noBrowser) {
             stdoutBuffer += chunk.toString();
-            if (stdoutBuffer.includes("Player ready") || stdoutBuffer.includes("Label Preview")) {
+            if (stdoutBuffer.includes("Player ready")) {
               serverReady = true;
 
               try {
@@ -262,10 +292,12 @@ async function main() {
 
   if (args.command === "render") {
     let streamTree;
+    let rawInput = "";
 
     if (args.file) {
       const filePath = resolve(args.file);
       const raw = readFileSync(filePath, "utf-8");
+      rawInput = raw;
 
       // Helper: all generated artifacts live under .markcut/generated/
       function generatedDir(filePath, sub) {
@@ -285,14 +317,14 @@ async function main() {
       // Helper: resolve variants from the parsed descriptive root
       async function resolveWithVariants(descriptive, options) {
         const { resolveVariantOverrides, compileDescriptiveRoot, resolveAll } = await import("../player/pipeline.mjs");
-        const { parseMarkdownDescriptive } = await import("../player/pipeline.mjs");
+        const { parseMarkdownVariants } = await import("../player/pipeline.mjs");
 
         let resolved = descriptive;
 
         // If variants are specified, apply variant-prefixed overrides
         if (args.variant && args.variant.length > 0) {
           // Also apply root config overrides from variant sections
-          const parsed = parseMarkdownDescriptive(raw);
+          const parsed = parseMarkdownVariants(raw);
           const variantRoot = parsed.variants.get(args.variant[0]);
           if (variantRoot) {
             // Merge variant root config into base (tts, stt, width, height, etc.)
@@ -308,9 +340,9 @@ async function main() {
       }
 
       if (filePath.endsWith(".md")) {
-        const { parseMarkdownDescriptive } = await import("../player/pipeline.mjs");
+        const { parseMarkdownVariants } = await import("../player/pipeline.mjs");
         const fileDir = dirname(filePath);
-        const parsed = parseMarkdownDescriptive(raw);
+        const parsed = parseMarkdownVariants(raw);
         streamTree = await resolveWithVariants(parsed.base, {
           baseDir: fileDir,
           scriptOutputDir: generatedDir(filePath, "tts"),
@@ -340,6 +372,27 @@ async function main() {
       process.exit(1);
     }
 
+    // Bundle the ```js imports``` component block (the preview server does this
+    // post-compile; the render CLI must do it too, otherwise jsx components are
+    // unregistered and slides render as unstyled raw text).
+    if (!streamTree.imports) {
+      const fenceMatch = rawInput.match(/^(```|~~~)\s*js imports\s*\n([\s\S]*?)^\1\s*$/m);
+      const rawSource = fenceMatch ? fenceMatch[2] : (streamTree.importsBlock ?? null);
+      if (rawSource && rawSource.trim()) {
+        const { parseImportsBlock, extractDependencySpecs } = await import("../player/pipeline.mjs");
+        const { bundleFromEntries } = await import("../player/bundler.mjs");
+        const entries = parseImportsBlock(rawSource);
+        const extraSpecs = extractDependencySpecs(rawSource);
+        const bundleDir = join(ROOT, "public", ".render-assets");
+        mkdirSync(bundleDir, { recursive: true });
+        const bundle = await bundleFromEntries(entries, extraSpecs, rawSource, bundleDir);
+        if (bundle.url) {
+          streamTree.imports = ".render-assets/" + bundle.url.split("/").pop();
+          console.log(`  \u2705 components \u2192 ${bundle.exports.join(", ")}`);
+        }
+      }
+    }
+
     const output = args.output ? resolve(args.output) : join(ROOT, "out", "video.mp4");
     await renderOne(streamTree, "16x9", output, args.verbose);
 

package/src/schema/index.ts

@@ -6,25 +6,21 @@ import { uid } from "../utils/index";
  * Render-only — no prompts, no async transforms, no providers.
  *
  * A stream tree is rooted at `root`. Folders contain children.
- * Leaf streams (video/audio/image/component) have actions[]
- * describing when they appear on the timeline.
+ * Leaf streams (video/audio/image/component) carry timing on their base
+ * fields (start/end/duration/startFrom/endAt) describing when they appear
+ * on the timeline.
  *
  * Subtitles are a root-level overlay: root.subtitle points to a VTT file
  * that covers the full video duration. Generated by the TTS pipeline.
  */
 
-export const action = z.object({
-  id: z.string().default(() => uid()),
-  start: z.number().min(0).default(0).describe("seconds, relative to parent"),
-  end: z.number().min(0).default(1).describe("seconds, relative to parent"),
-  startFrom: z.number().optional().describe("trim seconds from source start"),
-  endAt: z.number().optional().describe("trim seconds at source end"),
-  loop: z.number().int().min(1).optional().describe(">1 = loop count"),
-  effectId: z.string().optional(),
-  style: z.string().optional().describe("inline css"),
-  volume: z.number().min(0).max(1).optional(),
-});
-export type Action = z.infer<typeof action>;
+/**
+ * Leaf timing lives directly on BaseShape (start/end/duration/startFrom/endAt).
+ * The old `actions[]` array has been removed — every leaf occupies exactly one
+ * span on its parent's timeline. `end` is the source of truth for duration;
+ * `duration` is a normalized convenience (end = start + duration when end is
+ * absent). `loop`/`volume`/`style` moved onto the stream type itself.
+ */
 
 export const eventSpec = z.object({
   when: z.string().describe("'start' | 'end' | '50%' | '2.5s'"),
@@ -39,6 +35,11 @@ const BaseShape = {
   style: z.string().optional().describe("inline css"),
   visible: z.boolean().default(true),
   isBackground: z.boolean().optional(),
+  start: z.number().min(0).default(0).describe("seconds, relative to parent timeline (0 inside series parents)"),
+  end: z.number().min(0).optional().describe("seconds, relative to parent timeline — source of truth for duration"),
+  duration: z.number().min(0).optional().describe("convenience; normalized to end = start + duration when end is absent"),
+  startFrom: z.number().min(0).optional().describe("trim seconds from source start (video/audio)"),
+  endAt: z.number().min(0).optional().describe("trim seconds at source end (video/audio)"),
   durationInSeconds: z.number().optional().describe("set by engine; do not edit by hand"),
   on: eventSpec.optional().describe("event that fires at a specific frame, mutating registered component state"),
 };
@@ -102,7 +103,7 @@ export const video = base.extend({
   playbackRate: z.number().optional(),
   width: z.number().default(1080),
   height: z.number().default(1920),
-  actions: z.array(action).min(1).default(() => [action.parse({})]),
+  loop: z.number().int().min(1).optional().describe(">1 = loop count"),
 });
 export type Video = z.infer<typeof video>;
 
@@ -111,7 +112,8 @@ export const audio = base.extend({
   src: z.string().optional(),
   volume: z.number().min(0).max(1).default(1),
   foreground: z.boolean().optional().describe("ducks parent video audio while playing"),
-  actions: z.array(action).min(1).default(() => [action.parse({})]),
+  loop: z.number().int().min(1).optional().describe(">1 = loop count"),
+  speaker: z.string().optional().describe("speaker name for multi-turn dialogue; set by resolveDialogue"),
 });
 export type Audio = z.infer<typeof audio>;
 
@@ -119,7 +121,6 @@ export const image = base.extend({
   type: z.literal("image").default("image"),
   src: z.string().optional(),
   fit: z.enum(["contain", "cover", "fill"]).default("contain"),
-  actions: z.array(action).min(1).default(() => [action.parse({})]),
 });
 export type Image = z.infer<typeof image>;
 
@@ -134,7 +135,6 @@ export const component = base.extend({
   type: z.literal("component").default("component"),
   jsx: z.string().describe("usage JSX expression compiled at runtime; tag names resolved from imports"),
   data: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional().describe("extra variables (e.g. from ~~~md source code fences) available in JSX scope"),
-  actions: z.array(action).min(1).default(() => [action.parse({})]),
 });
 export type Component = z.infer<typeof component>;
 
@@ -153,7 +153,6 @@ export const effect = base.extend({
     .optional()
     .describe('inline keyframes: { "0": { opacity: "0" }, "100": { opacity: "1" } }'),
   children: z.array(z.lazy((): z.ZodTypeAny => stream)).default(() => []),
-  actions: z.array(action).min(1).default(() => [action.parse({})]),
 });
 export type Effect = z.infer<typeof effect>;
 
@@ -166,7 +165,6 @@ export const rhythm = base.extend({
   volume: z.number().min(0).max(1).default(1),
   spots: z.array(z.number()).optional().describe("pre-computed beat timestamps in seconds"),
   children: z.array(z.lazy((): z.ZodTypeAny => stream)).default(() => []),
-  actions: z.array(action).min(1).default(() => [action.parse({})]),
 });
 export type Rhythm = z.infer<typeof rhythm>;
 
@@ -177,7 +175,7 @@ export type Rhythm = z.infer<typeof rhythm>;
 //   - A scene-based video.json (has `meta` and `scenes`)
 //
 // Usage:
-//   { type: "include", src: "./path/to/video.json", actions: [{ start: 0, end: 5 }] }
+//   { type: "include", src: "./path/to/video.json", start: 0, end: 5 }
 //
 // Falls back to inline `children` if `src` is not set (legacy behavior).
 // ---------------------------------------------------------------------------
@@ -186,7 +184,6 @@ export const include = base.extend({
   src: z.string().optional().describe("path or URL to video JSON file (stream tree or scene-based)"),
   volume: z.number().min(0).max(1).default(1),
   children: z.array(z.lazy((): z.ZodTypeAny => stream)).default(() => []),
-  actions: z.array(action).min(1).default(() => [action.parse({})]),
   imports: z.string().optional().describe("component bundle URL for sub-video (set by engine)"),
 });
 export type Include = z.infer<typeof include>;
@@ -234,7 +231,7 @@ export const mapStream = base.extend({
   mapType: z.enum(["roadmap", "satellite", "hybrid", "terrain"]).default("roadmap").describe("Google Maps style"),
   travelMode: z.enum(["DRIVING", "WALKING", "BICYCLING", "TRANSIT"]).default("DRIVING").describe("Directions API travel mode"),
   routeMarker: z.string().default("🚗").describe("emoji/character for the animated traveling marker"),
-  actions: z.array(action).min(1).default(() => [action.parse({})]),
+  googleMapsApiKey: z.string().optional().describe("injected by compiler from GOOGLE_MAPS_API_KEY env var"),
 });
 export type MapStream = z.infer<typeof mapStream>;
 

package/src/types/Audio.tsx

@@ -13,44 +13,36 @@ export function AudioLeaf({ stream }: { stream: Audio }) {
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
   const ctx = React.useContext(AudioContext);
-  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  const start = stream.start ?? 0;
+  const end = stream.end ?? start + (stream.duration ?? 1);
+  const totalDur = stream.durationInSeconds ?? end;
   useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * fps)));
   if (!stream.src) return null;
   if (environment.isStudio) return null;
 
   const resolvedSrc = resolveAudioSrc(stream.src);
-
+  const startFrom = stream.startFrom ?? 0;
+  const endAt = stream.endAt ?? totalDur;
+  const volume = stream.volume ?? 1;
+  const playbackRate = stream.loop ? 1 : toPlaybackRate((endAt - startFrom) / (end - start));
   return (
-    <>
-      {stream.actions.map((a) => {
-        const start = a.start ?? 0;
-        const end = a.end ?? start + 1;
-        const startFrom = a.startFrom ?? 0;
-        const endAt = a.endAt ?? stream.durationInSeconds ?? end - start;
-        const volume = a.volume ?? stream.volume ?? 1;
-        const playbackRate = a.loop ? 1 : toPlaybackRate((endAt - startFrom) / (end - start));
-        return (
-          <Sequence
-            key={a.id}
-            name={stream.src ?? "audio"}
-            durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
-            from={Math.floor(fps * start)}
-            layout="none"
-            showInTimeline={false}
-          >
-            <RemotionAudio
-              src={resolvedSrc}
-              startFrom={Math.floor(startFrom * fps)}
-              endAt={Math.floor(startFrom * fps) + Math.floor(((endAt - startFrom) * fps) / playbackRate)}
-              muted={volume === 0 || !!ctx?.foreground}
-              volume={volume}
-              loop={(a.loop ?? 1) > 1}
-              playbackRate={playbackRate}
-              showInTimeline={false}
-            />
-          </Sequence>
-        );
-      })}
-    </>
+    <Sequence
+      name={stream.src ?? "audio"}
+      durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
+      from={Math.floor(fps * start)}
+      layout="none"
+      showInTimeline={false}
+    >
+      <RemotionAudio
+        src={resolvedSrc}
+        startFrom={Math.floor(startFrom * fps)}
+        endAt={Math.floor(startFrom * fps) + Math.floor(((endAt - startFrom) * fps) / playbackRate)}
+        muted={volume === 0 || !!ctx?.foreground}
+        volume={volume}
+        loop={(stream.loop ?? 1) > 1}
+        playbackRate={playbackRate}
+        showInTimeline={false}
+      />
+    </Sequence>
   );
 }

package/src/types/Component.tsx

@@ -74,31 +74,25 @@ export function ComponentLeaf({ stream }: { stream: Component }) {
 
   if (!stream.jsx) return null;
 
+  const start = stream.start ?? 0;
+  const end = stream.end ?? start + (stream.duration ?? 1);
+  const durFrames = Math.max(1, Math.floor(fps * (end - start)));
+
   return (
-    <>
-      {stream.actions.map((a) => {
-        const start = a.start ?? 0;
-        const end = a.end ?? start + 1;
-        const durFrames = Math.max(1, Math.floor(fps * (end - start)));
-        return (
-          <Sequence
-            key={a.id}
-            durationInFrames={durFrames}
-            from={Math.floor(fps * start)}
-            layout="none"
-          >
-            <EventAwareComponent
-              jsx={stream.jsx}
-              components={components}
-              data={bindings}
-              action={a}
-              durFrames={durFrames}
-              on={stream.on}
-            />
-          </Sequence>
-        );
-      })}
-    </>
+    <Sequence
+      durationInFrames={durFrames}
+      from={Math.floor(fps * start)}
+      layout="none"
+    >
+      <EventAwareComponent
+        jsx={stream.jsx}
+        components={components}
+        data={bindings}
+        action={{ start, end }}
+        durFrames={durFrames}
+        on={stream.on}
+      />
+    </Sequence>
   );
 }
 

package/src/types/Effect.tsx

@@ -23,57 +23,49 @@ export function EffectWrapper({
 }) {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
-  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  const startSec = stream.start ?? 0;
+  const endSec = stream.end ?? startSec + (stream.duration ?? 1);
+  const totalDur = stream.durationInSeconds ?? endSec;
   useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * fps)));
 
-  const actions = stream.actions ?? [];
-
   const styles = React.useMemo(() => {
-    const result: Record<string, string>[] = [];
-
-    for (const action of actions) {
-      const start = Math.ceil(action.start * fps);
-      const end = Math.ceil(action.end * fps);
-      const durationInFrames = end - start;
-      if (durationInFrames <= 0) continue;
+    const start = Math.ceil(startSec * fps);
+    const end = Math.ceil(endSec * fps);
+    const durationInFrames = end - start;
+    if (durationInFrames <= 0) return [] as Record<string, string>[];
 
-      const animation = stream.animation;
-      const timingFn = stream.animationTimingFunction;
-      const iterCount = stream.animationIterationCount ?? 1;
-      const style = (cssJS(action.style) ?? {}) as Record<string, string>;
+    const animation = stream.animation;
+    const timingFn = stream.animationTimingFunction;
+    const iterCount = stream.animationIterationCount ?? 1;
+    const style = (cssJS(stream.style) ?? {}) as Record<string, string>;
 
-      // Handle iteration count: loop the animation within the action range
-      let currentFrame = frame;
-      if (iterCount > 0 && durationInFrames > 0) {
-        const iteration = Math.floor((frame - start) / durationInFrames);
-        if (iteration < iterCount) {
-          currentFrame = start + ((frame - start) % durationInFrames);
-        }
+    // Handle iteration count: loop the animation within the span
+    let currentFrame = frame;
+    if (iterCount > 0 && durationInFrames > 0) {
+      const iteration = Math.floor((frame - start) / durationInFrames);
+      if (iteration < iterCount) {
+        currentFrame = start + ((frame - start) % durationInFrames);
       }
+    }
 
-      if (currentFrame >= start && currentFrame < end) {
-        const actionFrame = currentFrame - start;
-
-        if (animation) {
-          const config = resolveAnimation(animation, stream.customKeyframes);
-          if (config) {
-            const animStyle = interpolateKeyframes(config, actionFrame, {
-              fps,
-              durationInSeconds: durationInFrames / fps,
-              timingFunction: timingFn,
-            });
-            if (animStyle) Object.assign(style, animStyle);
-          }
-        }
+    if (currentFrame >= start && currentFrame < end) {
+      const actionFrame = currentFrame - start;
 
-        if (Object.keys(style).length > 0) {
-          result.push(style);
+      if (animation) {
+        const config = resolveAnimation(animation, stream.customKeyframes);
+        if (config) {
+          const animStyle = interpolateKeyframes(config, actionFrame, {
+            fps,
+            durationInSeconds: durationInFrames / fps,
+            timingFunction: timingFn,
+          });
+          if (animStyle) Object.assign(style, animStyle);
         }
       }
     }
 
-    return result;
-  }, [frame, fps, actions, stream.animation, stream.animationTimingFunction, stream.animationIterationCount, stream.customKeyframes]);
+    return Object.keys(style).length > 0 ? [style] : [];
+  }, [frame, fps, startSec, endSec, stream.animation, stream.animationTimingFunction, stream.animationIterationCount, stream.customKeyframes, stream.style]);
 
   if (styles.length === 0) return <>{children}</>;
 

package/src/types/Image.tsx

@@ -12,40 +12,33 @@ function resolveImageSrc(src: string): string {
 
 export function ImageLeaf({ stream }: { stream: Image }) {
   const { fps } = useVideoConfig();
-  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  const start = stream.start ?? 0;
+  const end = stream.end ?? start + (stream.duration ?? 1);
+  const totalDur = stream.durationInSeconds ?? end;
   useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * fps)));
   if (!stream.src) return null;
   const resolvedSrc = resolveImageSrc(stream.src);
 
   return (
-    <>
-      {stream.actions.map((a) => {
-        const start = a.start ?? 0;
-        const end = a.end ?? start + 1;
-        return (
-          <Sequence
-            key={a.id}
-            durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
-            from={Math.floor(fps * start)}
-            layout="none"
-          >
-            <FrameSyncStyle style={cssJS(a.style)}>
-              <Img
-                src={resolvedSrc}
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  objectFit: stream.fit,
-                }}
-                onDragStart={(e) => {
-                  e.stopPropagation();
-                  return false;
-                }}
-              />
-            </FrameSyncStyle>
-          </Sequence>
-        );
-      })}
-    </>
+    <Sequence
+      durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
+      from={Math.floor(fps * start)}
+      layout="none"
+    >
+      <FrameSyncStyle style={cssJS(stream.style)}>
+        <Img
+          src={resolvedSrc}
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: stream.fit,
+          }}
+          onDragStart={(e) => {
+            e.stopPropagation();
+            return false;
+          }}
+        />
+      </FrameSyncStyle>
+    </Sequence>
   );
 }