@lalalic/markcut 1.2.0 → 2.1.0

package/tests/fixtures/md/edge-cases.md

@@ -31,3 +31,12 @@ layout:parallel
 - image src:a.jpg duration:3 start:1
 - image src:b.jpg duration:2 start:0
 - image src:c.jpg duration:4 start:2
+## ScriptCodeFence
+layout:series
+- script
+  ~~~script
+  This is a longer narration
+  that goes across multiple lines
+  and uses a code fence instead of inline text.
+  ~~~
+- script "Inline text also works"

package/tests/fixtures/scenes.json

@@ -18,7 +18,8 @@
           "id": "scene-1-headline",
           "type": "component",
           "jsx": "<div style={{background:'linear-gradient(135deg,#667eea,#764ba2)',padding:'30px',borderRadius:'12px',textAlign:'center'}}><h2 style={{color:'white',fontSize:'28px',margin:0}}>Scene Rendering Works</h2><p style={{color:'rgba(255,255,255,0.7)',fontSize:'14px',marginTop:'8px'}}>Testing the scene type in stream tree</p></div>",
-          "actions": [{ "start": 0, "end": 3 }]
+          "start": 0,
+          "end": 3
         }
       ]
     },
@@ -32,7 +33,8 @@
           "id": "scene-2-headline",
           "type": "component",
           "jsx": "<div style={{background:'linear-gradient(135deg,#764ba2,#667eea)',padding:'30px',borderRadius:'12px',textAlign:'center'}}><h2 style={{color:'white',fontSize:'28px',margin:0}}>Test Complete</h2><p style={{color:'rgba(255,255,255,0.7)',fontSize:'14px',marginTop:'8px'}}>All scene types render correctly</p></div>",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         }
       ]
     }

package/tests/fixtures/subtitle.json

@@ -23,7 +23,8 @@
           "type": "image",
           "src": "https://picsum.photos/seed/sub1/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 4 }]
+          "start": 0,
+          "end": 4
         }
       ]
     },
@@ -37,7 +38,8 @@
           "type": "image",
           "src": "https://picsum.photos/seed/sub2/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 4 }]
+          "start": 0,
+          "end": 4
         }
       ]
     },
@@ -51,7 +53,8 @@
           "type": "image",
           "src": "https://picsum.photos/seed/sub3/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 5 }]
+          "start": 0,
+          "end": 5
         }
       ]
     }

package/tests/fixtures/subvideo.json

@@ -18,13 +18,15 @@
           "type": "image",
           "src": "https://picsum.photos/seed/subv-intro/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         },
         {
           "id": "title-intro",
           "type": "component",
           "jsx": "<div style={{background:'#667eea',color:'white',padding:'30px',borderRadius:'12px',textAlign:'center'}}><h2 style={{margin:0,fontSize:'28px'}}>Main Video</h2></div>",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         }
       ]
     },
@@ -32,8 +34,9 @@
       "id": "subvideo-chapter",
       "type": "include",
       "name": "Embedded-Reel",
-      "src": "data:application/json;base64,eyJpZCI6InJvb3QiLCJ0eXBlIjoicm9vdCIsIndpZHRoIjo2NDAsImhlaWdodCI6NDgwLCJmcHMiOjMwLCJpc1NlcmllcyI6dHJ1ZSwidHJhbnNpdGlvbiI6ImZhZGUiLCJ0cmFuc2l0aW9uVGltZSI6MC4zLCJjaGlsZHJlbiI6W3siaWQiOiJzdWItc2NlbmUtMSIsInR5cGUiOiJmb2xkZXIiLCJpc1NlcmllcyI6ZmFsc2UsImNoaWxkcmVuIjpbeyJpZCI6InN1Yi1iZy0xIiwidHlwZSI6ImltYWdlIiwic3JjIjoiaHR0cHM6Ly9waWNzdW0ucGhvdG9zL3NlZWQvc3Vidi1pbm5lcjEvNjQwLzQ4MCIsImZpdCI6ImNvdmVyIiwiYWN0aW9ucyI6W3sic3RhcnQiOjAsImVuZCI6Mn1dfV19LHsiaWQiOiJzdWItc2NlbmUtMiIsInR5cGUiOiJmb2xkZXIiLCJpc1NlcmllcyI6ZmFsc2UsImNoaWxkcmVuIjpbeyJpZCI6InN1Yi1iZy0yIiwidHlwZSI6ImltYWdlIiwic3JjIjoiaHR0cHM6Ly9waWNzdW0ucGhvdG9zL3NlZWQvc3Vidi1pbm5lcjIvNjQwLzQ4MCIsImZpdCI6ImNvdmVyIiwiYWN0aW9ucyI6W3sic3RhcnQiOjAsImVuZCI6Mn1dfV19XX0=",
-      "actions": [{ "start": 0, "end": 4 }]
+      "src": "data:application/json;base64,eyJpZCI6InJvb3QiLCJ0eXBlIjoicm9vdCIsIndpZHRoIjo2NDAsImhlaWdodCI6NDgwLCJmcHMiOjMwLCJpc1NlcmllcyI6dHJ1ZSwidHJhbnNpdGlvbiI6ImZhZGUiLCJ0cmFuc2l0aW9uVGltZSI6MC4zLCJjaGlsZHJlbiI6W3siaWQiOiJzdWItc2NlbmUtMSIsInR5cGUiOiJmb2xkZXIiLCJpc1NlcmllcyI6ZmFsc2UsImNoaWxkcmVuIjpbeyJpZCI6InN1Yi1iZy0xIiwidHlwZSI6ImltYWdlIiwic3JjIjoiaHR0cHM6Ly9waWNzdW0ucGhvdG9zL3NlZWQvc3Vidi1pbm5lcjEvNjQwLzQ4MCIsImZpdCI6ImNvdmVyIiwic3RhcnQiOjAsImVuZCI6Mn1dfSx7ImlkIjoic3ViLXNjZW5lLTIiLCJ0eXBlIjoiZm9sZGVyIiwiaXNTZXJpZXMiOmZhbHNlLCJjaGlsZHJlbiI6W3siaWQiOiJzdWItYmctMiIsInR5cGUiOiJpbWFnZSIsInNyYyI6Imh0dHBzOi8vcGljc3VtLnBob3Rvcy9zZWVkL3N1YnYtaW5uZXIyLzY0MC80ODAiLCJmaXQiOiJjb3ZlciIsInN0YXJ0IjowLCJlbmQiOjJ9XX1dfQ==",
+      "start": 0,
+      "end": 4
     },
     {
       "id": "outro",
@@ -45,13 +48,15 @@
           "type": "image",
           "src": "https://picsum.photos/seed/subv-outro/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         },
         {
           "id": "title-outro",
           "type": "component",
           "jsx": "<div style={{background:'#764ba2',color:'white',padding:'30px',borderRadius:'12px',textAlign:'center'}}><h2 style={{margin:0,fontSize:'28px'}}>Back to Main</h2></div>",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         }
       ]
     }

package/tests/fixtures/templates/courseware.md

@@ -8,17 +8,67 @@ layout:series subtitle:{fontSize:"20px"} width:1920 height:1080 fps:30 tts:"edge
 ~~~js imports
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm'
+import mermaid from 'mermaid'
+import { delayRender, continueRender } from 'remotion'
+import React from "react"
+
+// Initialize mermaid once. Theme matches the slide deck's dark scheme.
+mermaid.initialize({ startOnLoad: false, theme: 'dark', securityLevel: 'loose' })
+
+/**
+ * Renders a mermaid diagram as inline SVG.
+ * Uses Remotion's delayRender/continueRender so the diagram is guaranteed
+ * to be ready before the frame is captured.
+ */
+export function Mermaid({ source }) {
+  const ref = React.useRef(null)
+
+  React.useEffect(() => {
+    if (!source || !ref.current) return
+    const handle = delayRender('Mermaid rendering')
+    mermaid.render('mmd-' + Math.random().toString(36).slice(2), source)
+      .then((result) => {
+        if (ref.current) ref.current.innerHTML = result.svg
+        continueRender(handle)
+      })
+      .catch((err) => {
+        console.error('Mermaid error:', err)
+        continueRender(handle)
+      })
+  }, [source])
 
+  return (
+    <div
+      ref={ref}
+      style={{ width: '100%', maxWidth: 960, margin: '20px auto' }}
+    />
+  )
+}
+
+/**
+ * Courseware slide component.
+ * - Renders markdown via react-markdown
+ * - Highlights the Nth bullet when `current=N`
+ * - Renders mermaid code blocks ( ```mermaid ...``` ) as inline diagrams
+ */
 export function Slide({ current = 0, children }) {
-  let idx = 1;
+  let idx = 1
   return (
     <div className="slide">
       <ReactMarkdown remarkPlugins={[remarkGfm]}
         components={{
           li: ({ children }) => {
-            const highlight = idx === current; idx++;
-            return <li className={highlight ? 'highlight' : ''}>{children}</li>;
-          }
+            const highlight = idx === current; idx++
+            return <li className={highlight ? 'highlight' : ''}>{children}</li>
+          },
+          // Fenced code blocks — detect mermaid, render as diagram
+          pre: ({ children }) => {
+            const code = React.Children.toArray(children)[0]
+            if (code?.props?.className === 'language-mermaid') {
+              return <Mermaid source={String(code.props.children)} />
+            }
+            return <pre>{children}</pre>
+          },
         }}>{children}</ReactMarkdown>
     </div>
   )
@@ -128,6 +178,13 @@ layout:parallel
   Introduction to Machine Learning
 
   **Dr. AI** | AI Introductory Course
+  ```mermaid
+    graph TD;
+      A-->B;
+      A-->C;
+      B-->D;
+      C-->D;
+  ```
   ~~~
   ~~~md zh-source
   # 机器学习导论

package/tests/fixtures/tween-visual.json

@@ -15,12 +15,8 @@
           "id": "demo-tween",
           "type": "component",
           "jsx": "<div style={{width:'100%',height:'100%',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',background:'#1a1a2e',overflow:'hidden'}}><div style={{padding:'40px 60px',borderRadius:'20px',background:'linear-gradient(135deg,#667eea,#764ba2)',boxShadow:'0 8px 32px rgba(102,126,234,0.4)',opacity:tween(0,1),transform:'scale('+tween(0.3,1.2)+') rotate('+tween(-10,5)+'deg)'}}><span style={{color:'white',fontSize:tween(24,72)+'px',fontWeight:'bold',fontFamily:'sans-serif'}}>Hello Tween!</span></div><div style={{marginTop:'30px',opacity:tween(0,1),color:'rgba(255,255,255,0.6)',fontSize:'16px',fontFamily:'monospace'}}>frame: {useCurrentFrame()} / {useVideoConfig().durationInFrames}</div></div>",
-          "actions": [
-            {
-              "start": 0,
-              "end": 4
-            }
-          ]
+          "start": 0,
+          "end": 4
         }
       ]
     }

package/tests/fixtures/video-series.json

@@ -20,14 +20,10 @@
           "volume": 0,
           "width": 640,
           "height": 480,
-          "actions": [
-            {
-              "start": 0,
-              "end": 6,
-              "startFrom": 2,
-              "endAt": 8
-            }
-          ]
+          "start": 0,
+          "end": 6,
+          "startFrom": 2,
+          "endAt": 8
         }
       ]
     },
@@ -41,12 +37,8 @@
           "type": "image",
           "src": "https://picsum.photos/seed/video-series-photo/640/480",
           "fit": "cover",
-          "actions": [
-            {
-              "start": 0,
-              "end": 3
-            }
-          ]
+          "start": 0,
+          "end": 3
         }
       ]
     }

package/tests/md-descriptive.test.ts

@@ -635,6 +635,24 @@ describe("edge-cases fixture", () => {
     );
     expect(compiled.type).toBe("root");
   });
+
+  it("parses script code fence for longer text", () => {
+    const parsed = parseMarkdownDescriptive(fx.source);
+    const fenceScene = parsed.children.find((s: any) => s.name === "ScriptCodeFence");
+    expect(fenceScene).toBeDefined();
+    // First child: script with code fence content
+    expect(fenceScene!.children[0].type).toBe("audio");
+    expect(fenceScene!.children[0].script).toContain("longer narration");
+    expect(fenceScene!.children[0].script).toContain("multiple lines");
+    expect(fenceScene!.children[0].script).toContain("code fence");
+    // Second child: regular inline script
+    expect(fenceScene!.children[1].type).toBe("audio");
+    expect(fenceScene!.children[1].script).toBe("Inline text also works");
+
+    // Compile should succeed
+    const compiled = compileDescriptiveRoot(parsed);
+    expect(compiled.type).toBe("root");
+  });
 });
 
 // ── Full Feature ──────────────────────────────────────────────────────────
@@ -727,6 +745,158 @@ describe("component-imports fixture", () => {
   });
 });
 
+// ── Dialogue fixture ──────────────────────────────────────────────────────
+// Tests multi-turn dialogue expansion in script fields
+
+describe("dialogue fixture", () => {
+  const fx = loadFixture("dialogue");
+
+  it("parses dialogue scenes with script field", () => {
+    const parsed = parseMarkdownDescriptive(fx.source);
+    const convScene = parsed.children.find((s: any) => s.name === "Conversation");
+    expect(convScene).toBeDefined();
+    expect(convScene.layout).toBe("series");
+    // The dialogue script is a single script node with multi-line content
+    const scriptNode = convScene.children.find((c: any) => c.type === "audio" && c.script);
+    expect(scriptNode).toBeDefined();
+    expect(scriptNode.script).toContain("Ray:");
+    expect(scriptNode.script).toContain("Alice:");
+  });
+
+  it("parses single-line script (not dialogue)", () => {
+    const parsed = parseMarkdownDescriptive(fx.source);
+    const singleScene = parsed.children.find((s: any) => s.name === "SingleLine");
+    expect(singleScene).toBeDefined();
+    const scriptNode = singleScene.children.find((c: any) => c.type === "audio" && c.script);
+    expect(scriptNode).toBeDefined();
+    expect(scriptNode.script).toBe("This is just a single line of narration, not dialogue");
+  });
+});
+
+// ── resolveDialogue unit tests ─────────────────────────────────────────────
+
+import { resolveDialogue, parseDialogueLines } from "../src/descriptive/resolve";
+
+describe("parseDialogueLines", () => {
+  it("detects multi-turn dialogue", () => {
+    const lines = parseDialogueLines("Ray: Hello\nAlice: Good day\nRay: Welcome");
+    expect(lines).toHaveLength(3);
+    expect(lines[0]).toEqual({ speaker: "Ray", text: "Hello" });
+    expect(lines[1]).toEqual({ speaker: "Alice", text: "Good day" });
+    expect(lines[2]).toEqual({ speaker: "Ray", text: "Welcome" });
+  });
+
+  it("returns empty array for single line", () => {
+    expect(parseDialogueLines("Just a single line")).toEqual([]);
+    expect(parseDialogueLines("Ray: Hello")).toEqual([]);
+  });
+
+  it("returns empty array for non-matching format", () => {
+    expect(parseDialogueLines("not a dialogue line")).toEqual([]);
+    expect(parseDialogueLines("No colon here")).toEqual([]);
+  });
+
+  it("handles multi-word speaker names", () => {
+    const lines = parseDialogueLines("Dr Smith: Hello\nMs Johnson: Hi there");
+    expect(lines).toHaveLength(2);
+    expect(lines[0]).toEqual({ speaker: "Dr Smith", text: "Hello" });
+    expect(lines[1]).toEqual({ speaker: "Ms Johnson", text: "Hi there" });
+  });
+
+  it("handles Chinese speaker names", () => {
+    const lines = parseDialogueLines("小王: 你好\n小李: 早上好");
+    expect(lines).toHaveLength(2);
+    expect(lines[0]).toEqual({ speaker: "小王", text: "你好" });
+    expect(lines[1]).toEqual({ speaker: "小李", text: "早上好" });
+  });
+
+  it("trims whitespace", () => {
+    const lines = parseDialogueLines("  Ray:  Hello  \n  Alice:  Hi  ");
+    expect(lines).toHaveLength(2);
+    expect(lines[0]).toEqual({ speaker: "Ray", text: "Hello" });
+    expect(lines[1]).toEqual({ speaker: "Alice", text: "Hi" });
+  });
+
+  it("requires at least 2 matching lines", () => {
+    expect(parseDialogueLines("Ray: One\nNot a dialogue line")).toEqual([]);
+  });
+});
+
+describe("resolveDialogue", () => {
+  it("expands dialogue script into sequential audio nodes wrapped in series", () => {
+    const root = {
+      children: [
+        {
+          type: "scene",
+          name: "Test",
+          children: [
+            {
+              type: "audio",
+              script: "Ray: Hello\nAlice: Good day",
+              volume: 1,
+            },
+          ],
+        },
+      ],
+    } as any;
+
+    const result = resolveDialogue(root);
+
+    const scene = result.children[0];
+    // Original audio node should be replaced with a series container
+    expect(scene.children[0].type).toBe("series");
+    expect(scene.children[0].children).toHaveLength(2);
+    expect(scene.children[0].children[0].script).toBe("Hello");
+    expect(scene.children[0].children[0].speaker).toBe("Ray");
+    expect(scene.children[0].children[1].script).toBe("Good day");
+    expect(scene.children[0].children[1].speaker).toBe("Alice");
+  });
+
+  it("does not modify single-line scripts", () => {
+    const root = {
+      children: [
+        {
+          type: "scene",
+          children: [
+            { type: "audio", script: "Just a single line", volume: 1 },
+          ],
+        },
+      ],
+    } as any;
+
+    const result = resolveDialogue(root);
+    expect(result.children[0].children).toHaveLength(1);
+    expect(result.children[0].children[0].type).toBe("audio");
+    expect(result.children[0].children[0].script).toBe("Just a single line");
+  });
+
+  it("wraps dialogue lines in series without tts/voices", () => {
+    const root = {
+      tts: "edge-tts --voice default --text {input} --write-media {output}",
+      voices: { Ray: "--voice en-US-GuyNeural", Alice: "--voice en-US-JennyNeural" },
+      children: [
+        {
+          type: "scene",
+          children: [
+            {
+              type: "audio",
+              script: "Ray: Hello\nAlice: Good day",
+              volume: 1,
+            },
+          ],
+        },
+      ],
+    } as any;
+
+    const result = resolveDialogue(root);
+    const series = result.children[0].children[0];
+    expect(series.tts).toBeUndefined();
+    expect(series.voices).toBeUndefined();
+    expect(series.type).toBe("series");
+    expect(series.children).toHaveLength(2);
+  });
+});
+
 // ── Helper ────────────────────────────────────────────────────────────────
 
 function findComponents(node: any): any[] {

package/tests/render.test.ts

@@ -492,14 +492,16 @@ describe("Multiple Aspect Ratios", () => {
             type: "image",
             src: "https://picsum.photos/seed/aspect-test/1920/1080",
             fit: "cover",
-            actions: [{ start: 0, end: 2 }],
+            start: 0,
+            end: 2,
           },
           {
             id: "title",
             type: "image",
             src: "https://picsum.photos/seed/aspect-title/1920/1080",
             fit: "cover",
-            actions: [{ start: 0.3, end: 1.7 }],
+            start: 0.3,
+            end: 1.7,
           },
         ],
       },
@@ -547,21 +549,24 @@ describe("Cross-Stream Type Compatibility", () => {
             src: "assets/bgm/ambient-loop.mp3",
             volume: 0.2,
             isBackground: true,
-            actions: [{ start: 0, end: 3 }],
+            start: 0,
+            end: 3,
           },
           {
             id: "img-test",
             type: "image",
             src: "https://picsum.photos/seed/cross1/640/480",
             fit: "cover",
-            actions: [{ start: 0, end: 3 }],
+            start: 0,
+            end: 3,
           },
           {
             id: "sub-test",
             type: "image",
             src: "https://picsum.photos/seed/cross-sub/640/480",
             fit: "cover",
-            actions: [{ start: 0.5, end: 2.5 }],
+            start: 0.5,
+            end: 2.5,
           },
         ],
       },
@@ -609,10 +614,12 @@ describe("Cross-Stream Type Compatibility", () => {
                 type: "image",
                 src: "https://picsum.photos/seed/eff-child/640/480",
                 fit: "cover",
-                actions: [{ start: 0, end: 2 }],
+                start: 0,
+                end: 2,
               },
             ],
-            actions: [{ start: 0, end: 2 }],
+            start: 0,
+            end: 2,
           },
         ],
       },
@@ -688,7 +695,8 @@ describe("Instruction Field", () => {
       type: "image",
       src: "https://picsum.photos/seed/desc/640/480",
       instruction: "A beautiful sunset",
-      actions: [{ start: 0, end: 3 }],
+      start: 0,
+      end: 3,
     });
     expect(withInst.instruction).toBe("A beautiful sunset");
 
@@ -696,7 +704,8 @@ describe("Instruction Field", () => {
       id: "test-img-2",
       type: "image",
       src: "https://picsum.photos/seed/no-desc/640/480",
-      actions: [{ start: 0, end: 3 }],
+      start: 0,
+      end: 3,
     });
     expect(withoutInst.instruction).toBeUndefined();
   });
@@ -709,7 +718,8 @@ describe("Instruction Field", () => {
       type: "video",
       src: "test.mp4",
       instruction: "label for video clip",
-      actions: [{ start: 0, end: 5 }],
+      start: 0,
+      end: 5,
     });
     expect(v.instruction).toBe("label for video clip");
 
@@ -718,7 +728,8 @@ describe("Instruction Field", () => {
       type: "component",
       jsx: "<StatCounter value={100} />",
       instruction: "stats component label",
-      actions: [{ start: 0, end: 3 }],
+      start: 0,
+      end: 3,
     });
     expect(c.instruction).toBe("stats component label");
   });
@@ -740,7 +751,8 @@ describe("Instruction Field", () => {
             src: "https://picsum.photos/seed/desc-render/640/480",
             instruction: "Preserved instruction",
             fit: "cover",
-            actions: [{ start: 0, end: 2 }],
+            start: 0,
+            end: 2,
           },
         ],
       },
@@ -793,7 +805,8 @@ describe("Scene as Folder Alias", () => {
                 type: "image",
                 src: "https://picsum.photos/seed/scene-alias-1/640/480",
                 fit: "cover",
-                actions: [{ start: 0, end: 2 }],
+                start: 0,
+                end: 2,
               },
             ],
           },
@@ -808,7 +821,8 @@ describe("Scene as Folder Alias", () => {
                 type: "image",
                 src: "https://picsum.photos/seed/scene-alias-2/640/480",
                 fit: "cover",
-                actions: [{ start: 0, end: 2 }],
+                start: 0,
+                end: 2,
               },
             ],
           },
@@ -865,7 +879,8 @@ describe("Scene as Folder Alias", () => {
                 type: "image",
                 src: "https://picsum.photos/seed/mix-scene/640/480",
                 fit: "cover",
-                actions: [{ start: 0, end: 2 }],
+                start: 0,
+                end: 2,
               },
             ],
           },
@@ -879,7 +894,8 @@ describe("Scene as Folder Alias", () => {
                 type: "image",
                 src: "https://picsum.photos/seed/mix-folder/640/480",
                 fit: "cover",
-                actions: [{ start: 0, end: 2 }],
+                start: 0,
+                end: 2,
               },
             ],
           },

package/tests/schema.test.ts

@@ -41,7 +41,8 @@ describe("component node", () => {
     const c = component.parse({
       type: "component",
       jsx: "<BarChart data={[{value: 1}]} />",
-      actions: [{ start: 0, end: 2 }],
+      start: 0,
+      end: 2,
     });
     expect(c.type).toBe("component");
     expect(c.jsx).toContain("BarChart");
@@ -52,7 +53,8 @@ describe("component node", () => {
       type: "component",
       jsx: "<Hello name={who} />",
       data: { who: "World" },
-      actions: [{ start: 0, end: 1 }],
+      start: 0,
+      end: 1,
     });
     expect(c.data).toEqual({ who: "World" });
   });
@@ -61,7 +63,8 @@ describe("component node", () => {
     expect(() =>
       component.parse({
         type: "component",
-        actions: [{ start: 0, end: 1 }],
+        start: 0,
+        end: 1,
       }),
     ).toThrow();
   });

package/tests/server.test.ts

@@ -48,7 +48,8 @@ function makeFixture(name: string): string {
               type: "component",
               id: `comp-${name}`,
               jsx: `<div>${name}</div>`,
-              actions: [{ start: 0, end: 3 }],
+              start: 0,
+              end: 3,
             },
           ],
         },
@@ -274,16 +275,18 @@ describe("HTML page variant injection", () => {
     }
   });
 
-  it("shows variant switcher bar with all variant links", async () => {
-    const fixture = makeFixture("html-bar");
+  it("sets mode and variant in globals for client-side rendering", async () => {
+    const fixture = makeFixture("html-mode");
     const port = nextPort();
     const stop = await startServer(fixture, ["default", "zh-tiktok", "youtube"], port);
     try {
       const res = await fetchUrl(`http://localhost:${port}/`);
       expect(res.status).toBe(200);
-      expect(res.text).toContain('href="/"');
-      expect(res.text).toContain('href="/zh-tiktok"');
-      expect(res.text).toContain('href="/youtube"');
+      // Variant bar is now rendered client-side by React (VariantBar.tsx).
+      // Server only provides the config globals and loads player.js.
+      expect(res.text).toContain('window.VARIANT = "default"');
+      expect(res.text).toContain('window.MODE = "preview"');
+      expect(res.text).toContain('src="/player.js"');
     } finally {
       stop();
     }

package/tests/utils.ts

@@ -376,10 +376,10 @@ export function getExpectedDuration(fixtureData: any): number {
     }
   }
 
-  // Leaf action duration
-  if (fixtureData.actions?.length) {
-    return Math.max(...fixtureData.actions.map((a: any) => a.end ?? 1));
-  }
+  // Leaf duration from base timing fields (end is source of truth)
+  const leafStart = fixtureData.start ?? 0;
+  if (typeof fixtureData.end === "number") return fixtureData.end;
+  if (typeof fixtureData.duration === "number") return leafStart + fixtureData.duration;
 
   return 1;
 }