@lalalic/markcut 1.0.0

package/tests/fixtures/md/basic.md

@@ -0,0 +1,6 @@
+# video
+width:640 height:480 fps:30 layout:series
+## Intro
+layout:parallel
+- image src:cover.jpg duration:2
+- video src:clip.mp4 volume:0.8

package/tests/fixtures/md/component-imports.md

@@ -0,0 +1,20 @@
+---
+width: 640
+height: 480
+fps: 30
+---
+# video
+layout:series
+## Demo
+layout:parallel
+- component duration:2 jsx:"<Hello name='World' />"
+- component duration:3 jsx:"<PieChart data={[{value:40,color:'#E38627'},{value:30,color:'#C13C37'},{value:20,color:'#6A2135'}]} lineWidth={20} />"
+
+```js imports
+import { PieChart } from "npm:react-minimal-pie-chart"
+import { Hello } from "git:user/repo/path/to/Hello.tsx"
+
+export function Hello({ name }) {
+  return <div style={{color: '#fff', fontSize: 24, textAlign: 'center'}}>Hello {name}!</div>
+}
+```

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

@@ -0,0 +1,33 @@
+# video
+width:640 height:480 fps:30 layout:series
+## Empty
+layout:parallel
+- include
+## SpecialChars
+layout:parallel
+- image src:"my photo.jpg" duration:2
+- audio src:"bgm (copy).mp3" duration:3 volume:0.5
+## QuotedScripts
+layout:parallel
+- image src:a.jpg duration:2
+- script "Special chars: #hash, $dollar, %percent, &ampersand"
+- video src:b.mp4 duration:3
+- script "Path with spaces: /Users/me/my video.mp4"
+## LongDuration
+layout:parallel
+- image src:long.jpg duration:60
+## ZeroDuration
+layout:parallel
+- component duration:0 jsx:"<Test />"
+## VisibleFalse
+layout:parallel
+- image src:hidden.jpg duration:2 visible:false
+- image src:shown.jpg duration:2
+## BackgroundAudio
+layout:parallel
+- audio src:bgm.mp3 duration:10 volume:0.2 isBackground:true
+## StartOffsets
+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

package/tests/fixtures/md/effects.md

@@ -0,0 +1,17 @@
+# video
+width:640 height:480 fps:30 layout:series
+## Fades
+layout:parallel
+- image src:card1.jpg duration:2 effects:[fadeIn(3)]
+- image src:card2.jpg duration:2 effects:[fadeOut(3)]
+## Slides
+layout:parallel
+- image src:card3.jpg duration:2 effects:[slideInLeft(3)]
+- image src:card4.jpg duration:2 effects:[slideInRight(3)]
+## Attention
+layout:parallel
+- image src:card5.jpg duration:2 effects:[bounceIn(,ease-out,2)]
+- image src:card6.jpg duration:2 effects:[pulse(,ease-in-out)]
+## CustomKeyframes
+layout:parallel
+- image src:card7.jpg duration:2 effects:[{"animation":"custom","duration":3,"customKeyframes":{"0":{"opacity":"0","transform":"scale(0.5)"},"50":{"opacity":"0.5","transform":"scale(1.2)"},"100":{"opacity":"1","transform":"scale(1)"}}}]

package/tests/fixtures/md/frontmatter.md

@@ -0,0 +1,20 @@
+---
+# (frontmatter is metadata only — video config comes from root key-value line)
+---
+# video
+width:640 height:480 fps:30 layout:series tts:"edge-tts --voice 'en-US-GuyNeural' --text '{input}' --write-media '{output}'" stt:"whisper '{input}' --output_format vtt --output_dir '{output}' --model whisper-1 --language zh"
+## Demo
+layout:parallel
+- component duration:2 jsx:"<StatCounter value={42} label='Test' />"
+- component duration:2 jsx:"<Banner text='Hello' />"
+- component duration:1 jsx:"<InlineBadge text='Hot' />"
+
+```js imports
+import { StatCounter } from "npm:stat-counter"
+import { Logo } from "github:foo/bar/src/Logo.tsx"
+import { Banner } from "https://cdn.example.com/banner.js"
+
+export function InlineBadge({ text }) {
+  return <span style={{color:"#fff",background:"#333",padding:"4px 8px",borderRadius:"4px"}}>{text}</span>
+}
+```

package/tests/fixtures/md/full-feature.md

@@ -0,0 +1,58 @@
+---
+---
+# video
+width:1080 height:1920 fps:30 layout:series instruction:"Full feature demo video" metadata:"v2.0-feature-test" tts:"edge-tts --voice 'zh-CN-XiaoxiaoNeural' --text '{input}' --write-media '{output}'"
+## OpeningHook
+layout:parallel instruction:"Start with animated headline and BGM"
+- script "Welcome to this demo video"
+- component duration:3 jsx:"<AnimatedHeadline text='Welcome!' gradient='#667eea→#764ba2' />"
+- audio src:bgm/intro.mp3 duration:3 volume:0.3 isBackground:true
+## StatShowcase
+layout:series
+### Counter1
+layout:parallel
+- component duration:3 jsx:"<StatCounter value={100} label='Performance' />"
+### Counter2
+layout:parallel
+- component duration:3 jsx:"<StatCounter value={99} label='Quality' suffix='%' />"
+## MediaMontage
+layout:transitionSeries transition:fade transitionTime:0.5
+- script "Here are some highlights"
+- image src:photos/highlight1.jpg duration:2 fit:cover
+- video src:clips/moment1.mp4 duration:3 volume:0.8
+- image src:photos/highlight2.jpg duration:2 fit:cover
+- video src:clips/moment2.mp4 startFrom:0.5 endAt:4.5 volume:0.9
+## AnimatedEffects
+layout:parallel
+- image src:cards/card1.png duration:1.5 fit:contain effects:[fadeInUp(2)]
+- image src:cards/card2.png duration:1.5 fit:contain effects:[zoomIn(2,ease-out)]
+- image src:cards/card3.png duration:1.5 fit:contain effects:[flipInX(2,,1)]
+## InteractiveMap
+layout:parallel
+- script "Our journey across the continent"
+- map duration:6 travelMode:DRIVING waypoints:[37.77,-122.41,"San Francisco";40.7128,-74.006,"New York City"] routeColor:"#FF6B6B" routeWeight:5 zoom:4 mapType:roadmap routeMarker:"🚗"
+- audio src:bgm/map-music.mp3 duration:6 volume:0.25 isBackground:true
+## BeatSync
+layout:parallel
+- rhythm src:audio/drop.mp3 spots:[0.0,0.6,1.2,1.8,2.4,3.0] volume:0.8
+  - image src:flash/f1.jpg
+  - image src:flash/f2.jpg
+  - image src:flash/f3.jpg
+  - image src:flash/f4.jpg
+  - image src:flash/f5.jpg
+  - image src:flash/f6.jpg
+## Closing
+layout:parallel
+- script "Thanks for watching! Don't forget to subscribe"
+- image src:photos/ending.jpg duration:4 fit:cover
+- component duration:4 jsx:"<Logo variant='white' />"
+
+```js imports
+import { AnimatedHeadline } from "npm:@remotion-engine/headline"
+import { StatCounter } from "npm:stat-counter@2.1.0"
+
+export function Logo({ variant = 'white' }) {
+  const color = variant === 'white' ? '#ffffff' : '#667eea';
+  return <div style={{color, fontSize: 48, fontWeight: 'bold'}}>MyBrand</div>
+}
+```

package/tests/fixtures/md/imports-block.md

@@ -0,0 +1,19 @@
+---
+width: 640
+height: 480
+fps: 30
+---
+# video
+layout:series
+## Charts
+layout:parallel
+- component duration:2 jsx:"<PieChart data={[{name:'A',value:50},{name:'B',value:50}]} />"
+- component duration:2 jsx:"<Hello name='World' />"
+
+```js imports
+import { PieChart } from "npm:recharts"
+
+export function Hello({ name }) {
+  return <div style={{color: '#fff', fontSize: 24}}>Hello {name}</div>
+}
+```

package/tests/fixtures/md/include-main.md

@@ -0,0 +1,11 @@
+# main-video
+width:640 height:480 fps:30 layout:series
+## Intro
+layout:parallel
+- component duration:2 jsx:"<div style={{background:'#1a1a2e',width:'100%',height:'100%',display:'flex',alignItems:'center',justifyContent:'center'}}><h1 style={{color:'#e94560',fontSize:36}}>Main Video</h1></div>"
+## EmbeddedContent
+layout:parallel
+- include src:./include-sub.md
+## Outro
+layout:parallel
+- component duration:2 jsx:"<div style={{background:'#16213e',width:'100%',height:'100%',display:'flex',alignItems:'center',justifyContent:'center'}}><h1 style={{color:'#0f3460',fontSize:36}}>The End</h1></div>"

package/tests/fixtures/md/include-sub.md

@@ -0,0 +1,25 @@
+# sub-video
+width:640 height:480 fps:30 layout:series
+## SubScene1
+layout:parallel
+- component duration:3 jsx:"<SubSlide bg='#667eea' scene='1' />"
+## SubScene2
+layout:parallel
+- component duration:3 jsx:"<SubSlide bg='#764ba2' scene='2' />"
+
+```js imports
+export function SubSlide({ bg, scene }) {
+  return <div style={{
+    background: bg,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column'
+  }}>
+    <h1 style={{color:'white', fontSize:48, margin:0}}>Sub Video</h1>
+    <p style={{color:'rgba(255,255,255,0.8)', fontSize:24}}>Scene {scene}</p>
+  </div>;
+}
+```

package/tests/fixtures/md/jsx-code-fence.md

@@ -0,0 +1,21 @@
+---
+width: 640
+height: 480
+fps: 30
+---
+# video
+layout:series
+## Demo
+layout:parallel
+- component duration:2 jsx:"<Greeting name='World' />"
+- component duration:3 jsx:"<Counter value={100} />"
+
+```js imports
+export function Greeting({ name }) {
+  return <div style={{color: '#fff', fontSize: 28, textAlign: 'center'}}>Hello {name}!</div>
+}
+
+export function Counter({ value }) {
+  return <div style={{color: '#667eea', fontSize: 64, fontWeight: 'bold', textAlign: 'center'}}>{value}</div>
+}
+```

package/tests/fixtures/md/map.md

@@ -0,0 +1,11 @@
+# video
+width:640 height:480 fps:30 layout:series
+## RoadTrip
+layout:parallel
+- map duration:5 travelMode:DRIVING waypoints:[37.77,-122.41,"San Francisco";34.05,-118.24,"Los Angeles";36.16,-115.15,"Las Vegas"] routeColor:"#FF5733" routeWeight:6 zoom:8 mapType:roadmap routeMarker:"🚗"
+## WalkingTour
+layout:parallel
+- map duration:4 travelMode:WALKING waypoints:[48.8566,2.3522,"Paris";48.8575,2.3644,"Louvre"] mapType:hybrid zoom:15 routeMarker:"🚶" routeColor:"#33FF57" routeWeight:3
+## DetailedWaypoints
+layout:parallel
+- map duration:3 waypoints:[35.6762,139.6503,"Tokyo";35.7146,139.7967,"Asakusa";35.7101,139.8107,"Skytree"] travelMode:TRANSIT mapType:satellite zoom:12 routeMarker:"🗼"

package/tests/fixtures/md/nested-scenes.md

@@ -0,0 +1,25 @@
+# video
+width:640 height:480 fps:30 layout:series
+## Chapter1
+layout:series instruction:"Opening chapter" title:"The Beginning"
+### Shot1
+layout:parallel
+- image src:dawn.jpg duration:2
+- audio src:ambient.mp3 duration:2 volume:0.3
+### Shot2
+layout:parallel
+- image src:road.jpg duration:3
+- component duration:2 jsx:"<Narration text='A journey begins' />"
+## Chapter2
+layout:series
+### Shot3
+layout:parallel
+- image src:mountain.jpg duration:2
+### Shot4
+layout:transitionSeries transition:fade transitionTime:0.3
+- image src:peak1.jpg duration:2
+- image src:peak2.jpg duration:2
+- image src:peak3.jpg duration:2
+## Chapter3
+layout:parallel
+- image src:sunset.jpg duration:3

package/tests/fixtures/md/rhythm.md

@@ -0,0 +1,17 @@
+# video
+width:640 height:480 fps:30 layout:series
+## MusicDrop
+layout:parallel
+- rhythm src:beat.mp3 spots:[0.0,0.5,1.0,1.5] volume:0.9
+  - image src:flash1.jpg
+  - image src:flash2.jpg
+  - image src:flash3.jpg
+  - image src:flash4.jpg
+## SlowRhythm
+layout:parallel
+- rhythm src:ambient.mp3 spots:[0.0,1.2,2.5,3.8,5.0] volume:0.6
+  - image src:scene1.jpg
+  - image src:scene2.jpg
+  - image src:scene3.jpg
+  - image src:scene4.jpg
+  - image src:scene5.jpg

package/tests/fixtures/md/scenes.md

@@ -0,0 +1,16 @@
+# video
+width:640 height:480 fps:30 layout:series
+## Hook
+layout:parallel instruction:"Grab attention fast"
+- image src:opener.jpg duration:2 fit:cover
+- component duration:2 jsx:"<BigText text='Wow!' />"
+## Journey
+layout:transitionSeries transition:fade transitionTime:0.5
+- script "Follow along on this adventure"
+- image src:scene1.jpg duration:2
+- image src:scene2.jpg duration:2
+- image src:scene3.jpg duration:3
+## WrapUp
+layout:parallel
+- script "Thanks for watching"
+- image src:final.jpg duration:3 fit:cover

package/tests/fixtures/md/tween.md

@@ -0,0 +1,11 @@
+# video
+width:640 height:480 fps:30 layout:series
+## BarChartAnim
+layout:parallel
+- component duration:4 jsx:"<svg viewBox='0 0 400 300'><rect y={260-tween(0,200)} width={80} height={tween(0,200)} fill='#E38627' /><rect x={100} y={260-tween(0,160)} width={80} height={tween(0,160)} fill='#C13C37' /><rect x={200} y={260-tween(0,240)} width={80} height={tween(0,240)} fill='#6A2135' /></svg>"
+## NivoBarChart
+layout:parallel
+- component duration:4 jsx:"<BarChart data={[{name:'A',value:tween(0,80)},{name:'B',value:tween(0,60)},{name:'C',value:tween(0,100)}]} keys={['value']} indexBy='name' />"
+## ColorTween
+layout:parallel
+- component duration:3 jsx:"<div style={{background:tween('#000','#FFF'), width:200, height:200, borderRadius: tween(0,100)}} />"

package/tests/fixtures/md/vars-test.md

@@ -0,0 +1,6 @@
+# video
+width:640 height:480 fps:30 layout:series
+## Test
+layout:parallel
+- image src:photo_${width}x${height}.jpg duration:2
+- component duration:3 jsx:"<div style={{width:'100%',height:'100%',background:'#333',display:'flex',alignItems:'center',justifyContent:'center'}}><h1 style={{color:'white',fontSize:32}}>Size: ${width}x${height}</h1></div>"

package/tests/fixtures/scenes.json

@@ -0,0 +1,40 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": true,
+  "transition": "fade",
+  "transitionTime": 0.3,
+  "children": [
+    {
+      "id": "scene-1",
+      "type": "scene",
+      "name": "Intro",
+      "description": "Opening hook with headline animation",
+      "children": [
+        {
+          "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 }]
+        }
+      ]
+    },
+    {
+      "id": "scene-2",
+      "type": "scene",
+      "name": "Conclusion",
+      "description": "Final message",
+      "children": [
+        {
+          "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 }]
+        }
+      ]
+    }
+  ]
+}

package/tests/fixtures/subtitle.json

@@ -0,0 +1,59 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": true,
+  "transition": "fade",
+  "transitionTime": 0.3,
+  "stylesheet": ".caption { background: rgba(0,0,0,0.4); padding: 12px 24px; border-radius: 12px; }",
+  "subtitle": {
+    "src": "WEBVTT\n\n00:00:00.500 --> 00:00:03.500\nRoot-level subtitle overlay\n\n00:00:04.500 --> 00:00:07.500\nSecond scene caption\n\n00:00:08.500 --> 00:00:12.000\nThird scene caption",
+    "fontSize": 48
+  },
+  "children": [
+    {
+      "id": "scene-1",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "bg1",
+          "type": "image",
+          "src": "https://picsum.photos/seed/sub1/640/480",
+          "fit": "cover",
+          "actions": [{ "start": 0, "end": 4 }]
+        }
+      ]
+    },
+    {
+      "id": "scene-2",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "bg2",
+          "type": "image",
+          "src": "https://picsum.photos/seed/sub2/640/480",
+          "fit": "cover",
+          "actions": [{ "start": 0, "end": 4 }]
+        }
+      ]
+    },
+    {
+      "id": "scene-3",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "bg3",
+          "type": "image",
+          "src": "https://picsum.photos/seed/sub3/640/480",
+          "fit": "cover",
+          "actions": [{ "start": 0, "end": 5 }]
+        }
+      ]
+    }
+  ]
+}

package/tests/fixtures/subvideo.json

@@ -0,0 +1,59 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": true,
+  "transition": "fade",
+  "transitionTime": 0.3,
+  "children": [
+    {
+      "id": "intro",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "bg-intro",
+          "type": "image",
+          "src": "https://picsum.photos/seed/subv-intro/640/480",
+          "fit": "cover",
+          "actions": [{ "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 }]
+        }
+      ]
+    },
+    {
+      "id": "subvideo-chapter",
+      "type": "include",
+      "name": "Embedded-Reel",
+      "src": "data:application/json;base64,eyJpZCI6InJvb3QiLCJ0eXBlIjoicm9vdCIsIndpZHRoIjo2NDAsImhlaWdodCI6NDgwLCJmcHMiOjMwLCJpc1NlcmllcyI6dHJ1ZSwidHJhbnNpdGlvbiI6ImZhZGUiLCJ0cmFuc2l0aW9uVGltZSI6MC4zLCJjaGlsZHJlbiI6W3siaWQiOiJzdWItc2NlbmUtMSIsInR5cGUiOiJmb2xkZXIiLCJpc1NlcmllcyI6ZmFsc2UsImNoaWxkcmVuIjpbeyJpZCI6InN1Yi1iZy0xIiwidHlwZSI6ImltYWdlIiwic3JjIjoiaHR0cHM6Ly9waWNzdW0ucGhvdG9zL3NlZWQvc3Vidi1pbm5lcjEvNjQwLzQ4MCIsImZpdCI6ImNvdmVyIiwiYWN0aW9ucyI6W3sic3RhcnQiOjAsImVuZCI6Mn1dfV19LHsiaWQiOiJzdWItc2NlbmUtMiIsInR5cGUiOiJmb2xkZXIiLCJpc1NlcmllcyI6ZmFsc2UsImNoaWxkcmVuIjpbeyJpZCI6InN1Yi1iZy0yIiwidHlwZSI6ImltYWdlIiwic3JjIjoiaHR0cHM6Ly9waWNzdW0ucGhvdG9zL3NlZWQvc3Vidi1pbm5lcjIvNjQwLzQ4MCIsImZpdCI6ImNvdmVyIiwiYWN0aW9ucyI6W3sic3RhcnQiOjAsImVuZCI6Mn1dfV19XX0=",
+      "actions": [{ "start": 0, "end": 4 }]
+    },
+    {
+      "id": "outro",
+      "type": "folder",
+      "isSeries": false,
+      "children": [
+        {
+          "id": "bg-outro",
+          "type": "image",
+          "src": "https://picsum.photos/seed/subv-outro/640/480",
+          "fit": "cover",
+          "actions": [{ "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 }]
+        }
+      ]
+    }
+  ]
+}