@lalalic/markcut 1.2.0 → 2.1.0

package/src/render/cli.mjs

@@ -243,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 = "";
@@ -267,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 {

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>
   );
 }

package/src/types/Include.tsx

@@ -104,17 +104,20 @@ function useSubVideoRegistry(importsUrl: string | undefined):
  * registered by the sub-video are available during its rendering.
  *
  * Usage:
- *   { type: "include", src: "./path/to/video.json", actions: [{ start: 0, end: 5 }] }
+ *   { type: "include", src: "./path/to/video.json", start: 0, end: 5 }
  */
 export function IncludeLeaf({ stream }: { stream: IncludeStream }) {
   const { fps: parentFps, width: parentWidth, height: parentHeight } = useVideoConfig();
   const parentCompose = React.useContext(ComposeContext);
   const { Container } = parentCompose;
   const parentAudio = React.useContext(AudioContext);
-  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  const start = stream.start ?? 0;
+  const end = stream.end ?? (stream.durationInSeconds ?? (start + (stream.duration ?? 1)));
+  const totalDur = stream.durationInSeconds ?? end;
   useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * parentFps)));
 
-  if (!stream.actions?.length) return null;
+  const hasContent = !!stream.src || (stream.children?.length ?? 0) > 0;
+  if (!hasContent) return null;
 
   // ── External JSON loading ─────────────────────────────────────────────
   const [externalData, setExternalData] = React.useState<unknown | null>(null);
@@ -296,87 +299,78 @@ export function IncludeLeaf({ stream }: { stream: IncludeStream }) {
     );
   }, [externalData, loadError, parentFps, parentWidth, parentHeight]);
 
-  // ── Action-based rendering ───────────────────────────────────────
-  const renderAction = (a: IncludeStream["actions"][number]) => {
-    const start = a.start ?? 0;
-    const end = a.end ?? (stream.durationInSeconds ?? start + 1);
-    const dur = Math.max(0.1, end - start);
-    const durFrames = Math.max(1, Math.floor(parentFps * dur));
-
-    // ── Inline children fallback (legacy) ─────────────────────────
-    if (!stream.src && stream.children?.length) {
-      return (
-        <Sequence
-          key={a.id}
-          durationInFrames={durFrames}
-          from={Math.floor(parentFps * start)}
-          layout="none"
-          showInTimeline={false}
-        >
-          <Container
-            id={stream.id}
-            type="include"
-            style={{
-              ...cssJS(stream.style) as React.CSSProperties,
-              width: parentWidth,
-              height: parentHeight,
-              overflow: "hidden",
-              position: "relative",
-            }}
-            className={`include ${toClassName(stream.id ?? "")}`}
-          >
-            <FolderLeaf stream={stream as any} />
-          </Container>
-        </Sequence>
-      );
-    }
-
-    // ── External src rendering ─────────────────────────────────────
-    return (
-      <Sequence
-        key={a.id}
-        durationInFrames={durFrames}
-        from={Math.floor(parentFps * start)}
-        layout="none"
-        showInTimeline={false}
+  // ── Single-span rendering ────────────────────────────────────────
+  const dur = Math.max(0.1, end - start);
+  const durFrames = Math.max(1, Math.floor(parentFps * dur));
+
+  // ── Inline children fallback (legacy) ─────────────────────────
+  let innerNode: React.ReactNode;
+  if (!stream.src && stream.children?.length) {
+    innerNode = (
+      <Container
+        id={stream.id}
+        type="include"
+        style={{
+          ...cssJS(stream.style) as React.CSSProperties,
+          width: parentWidth,
+          height: parentHeight,
+          overflow: "hidden",
+          position: "relative",
+        }}
+        className={`include ${toClassName(stream.id ?? "")}`}
       >
-        {externalData || loadError ? (
-          <div
-            style={{
-              width: parentWidth,
-              height: parentHeight,
-              overflow: "hidden",
-              position: "relative",
-            }}
-          >
-            {renderExternalContent()}
-          </div>
-        ) : (
-          <div
-            style={{
-              width: parentWidth,
-              height: parentHeight,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "#666",
-              fontSize: 20,
-              fontFamily: "monospace",
-            }}
-          >
-            Loading… {stream.src}
-          </div>
-        )}
-      </Sequence>
+        <FolderLeaf stream={stream as any} />
+      </Container>
     );
-  };
+  } else if (externalData || loadError) {
+    innerNode = (
+      <div
+        style={{
+          width: parentWidth,
+          height: parentHeight,
+          overflow: "hidden",
+          position: "relative",
+        }}
+      >
+        {renderExternalContent()}
+      </div>
+    );
+  } else {
+    innerNode = (
+      <div
+        style={{
+          width: parentWidth,
+          height: parentHeight,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#666",
+          fontSize: 20,
+          fontFamily: "monospace",
+        }}
+      >
+        Loading… {stream.src}
+      </div>
+    );
+  }
+
+  const sequence = (
+    <Sequence
+      durationInFrames={durFrames}
+      from={Math.floor(parentFps * start)}
+      layout="none"
+      showInTimeline={false}
+    >
+      {innerNode}
+    </Sequence>
+  );
 
   // ── Determine if we need a nested ComposeContext ───────────────────
   const needsNestedContext = subRegistry !== null && subRegistry !== parentCompose.components;
 
   const inner = (
     <AudioContext.Provider value={audioCtx as any}>
-      {stream.actions.map(renderAction)}
+      {sequence}
     </AudioContext.Provider>
   );