@lalalic/markcut 2.9.0 → 3.1.0

package/src/utils/index.ts

@@ -4,7 +4,15 @@
  */
 
 export function uid(): string {
-  return Math.random().toString(36).slice(2, 10);
+  // Ensure the first character is a letter (valid JS identifier start)
+  const raw = Math.random().toString(36).slice(2, 10);
+  const first = raw[0]!;
+  // If first char is a digit, prepend a random letter
+  if (/^[0-9]/.test(first)) {
+    const letter = String.fromCharCode(97 + Math.floor(Math.random() * 26));
+    return letter + raw;
+  }
+  return raw;
 }
 
 const KEBAB = /[^a-zA-Z0-9_-]+/g;
@@ -135,7 +143,11 @@ export function getDurationInSeconds(stream: DurationStream, update = true): num
     getDurationInSeconds(child, update);
   }
 
-  const visible = stream.children.filter((c) => !c.isBackground);
+  // Effect wrappers encompass all children visually; background children
+  // still contribute to the effect's visible duration.
+  const visible = stream.type === "effect"
+    ? stream.children
+    : stream.children.filter((c) => !c.isBackground);
   if (stream.isSeries) {
     const overlap = stream.transition ? (stream.transitionTime ?? 0.5) : 0;
     for (let i = 0; i < visible.length; i++) {

package/src/utils/tween.ts

@@ -14,7 +14,7 @@ import * as React from "react";
 import { interpolate, useCurrentFrame, Easing } from "remotion";
 
 /** Built-in easing name → Remotion easing function. */
-const EASING_MAP: Record<string, ((t: number) => number) | undefined> = {
+export const EASING_MAP: Record<string, ((t: number) => number) | undefined> = {
   linear: undefined,
   ease: Easing.ease,
   easeIn: Easing.in(Easing.ease),
@@ -116,3 +116,51 @@ export function useTweenBindings(action: { start?: number; end?: number }): Reco
 
   return { tween, interpolate };
 }
+
+// ---------------------------------------------------------------------------
+// Tween spec resolution (used by stream leaf renderers, e.g. Map.tsx)
+// ---------------------------------------------------------------------------
+
+/**
+ * A tween expression as parsed by the descriptive DSL: `tween(from, to, easing?)`
+ * becomes `{ __tween: [from, to, easing?] }` (see parseProps in dsl.ts).
+ */
+export interface TweenSpec {
+  __tween: Array<number | string>;
+}
+
+/** A static number OR a tween spec. */
+export type Tweenable = number | TweenSpec;
+
+/**
+ * Resolve a `Tweenable` to a per-frame value — deterministic per frame.
+ *
+ * - A plain number is returned as-is (static).
+ * - A `{__tween:[from,to,easing?]}` spec is interpolated over the node's
+ *   `[start, end]` (seconds) using the current frame.
+ * - Anything malformed falls back to `fallback`.
+ */
+export function resolveTween(
+  frame: number,
+  fps: number,
+  spec: Tweenable | undefined,
+  start: number,
+  end: number,
+  fallback: number,
+): number {
+  if (typeof spec === "number") return spec;
+  const tween = spec?.__tween;
+  if (!tween || tween.length < 2) return fallback;
+  const from = Number(tween[0]);
+  const to = Number(tween[1]);
+  if (!Number.isFinite(from) || !Number.isFinite(to)) return fallback;
+  const easingName = typeof tween[2] === "string" ? tween[2] : undefined;
+  const easingFn = easingName ? EASING_MAP[easingName] : undefined;
+  const startF = Math.max(0, Math.floor(start * fps));
+  const endF = Math.max(startF + 1, Math.floor(end * fps));
+  return interpolate(frame, [startF, endF], [from, to], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: easingFn,
+  });
+}

package/tests/dsl.test.ts

@@ -100,6 +100,19 @@ describe("dsl — parseWaypoints", () => {
     expect(parseWaypoints("[40.7,-74.0]")).toEqual([{ lat: 40.7, lng: -74.0, label: undefined }]);
   });
 
+  it("parses waypoint media as a 4th field", () => {
+    expect(parseWaypoints('[40.7,-74.0,"NYC","photo1.jpg"; 34.05,-118.25,"LA","clip.mp4"]')).toEqual([
+      { lat: 40.7, lng: -74.0, label: "NYC", media: "photo1.jpg" },
+      { lat: 34.05, lng: -118.25, label: "LA", media: "clip.mp4" },
+    ]);
+  });
+
+  it("parses waypoint media without a label", () => {
+    expect(parseWaypoints('[40.7,-74.0,"","img.jpg"]')).toEqual([
+      { lat: 40.7, lng: -74.0, label: undefined, media: "img.jpg" },
+    ]);
+  });
+
   it("returns empty array for non-bracket input", () => {
     expect(parseWaypoints("not a list")).toEqual([]);
   });
@@ -133,6 +146,36 @@ describe("dsl — parseProps", () => {
   it("returns {} for unclosed object", () => {
     expect(parseProps("{a:1")).toEqual({});
   });
+
+  it("parses tween() expressions into tagged specs", () => {
+    expect(parseProps("{zoom:tween(6, 12)}")).toEqual({ zoom: { __tween: [6, 12] } });
+  });
+
+  it("parses tween() with easing", () => {
+    expect(parseProps("{zoom:tween(6, 12, easeInOut)}")).toEqual({
+      zoom: { __tween: [6, 12, "easeInOut"] },
+    });
+  });
+
+  it("parses tween() nested inside objects and arrays", () => {
+    expect(parseProps("{center:{lat:tween(37.0, 37.9), lng:120}, pov:{heading:tween(200, 320)}}")).toEqual({
+      center: { lat: { __tween: [37.0, 37.9] }, lng: 120 },
+      pov: { heading: { __tween: [200, 320] } },
+    });
+  });
+
+  it("parses tween() with quoted string values (colors)", () => {
+    expect(parseProps('{color:tween("#000000", "#FFFFFF", easeOut)}')).toEqual({
+      color: { __tween: ["#000000", "#FFFFFF", "easeOut"] },
+    });
+  });
+
+  it("keeps static numbers alongside tweens", () => {
+    expect(parseProps("{zoom:tween(6, 12), tilt:45}")).toEqual({
+      zoom: { __tween: [6, 12] },
+      tilt: 45,
+    });
+  });
 });
 
 describe("dsl — parseOnSpec", () => {

package/tests/fixtures/map-dynamic.json

@@ -0,0 +1,52 @@
+{
+  "id": "root",
+  "type": "root",
+  "width": 640,
+  "height": 480,
+  "fps": 30,
+  "isSeries": true,
+  "transition": "fade",
+  "transitionTime": 0.3,
+  "children": [
+    {
+      "id": "overview",
+      "type": "map",
+      "view": "overview",
+      "name": "satellite-dolly",
+      "mapType": "satellite",
+      "center": { "lat": 37.7749, "lng": -122.4194 },
+      "zoom": 6,
+      "camera": { "zoom": { "__tween": [6, 12, "easeInOut"] } },
+      "start": 0,
+      "end": 3
+    },
+    {
+      "id": "cinematic",
+      "type": "map",
+      "view": "cinematic",
+      "name": "cinematic-flyover",
+      "waypoints": [
+        { "lat": 37.7749, "lng": -122.4194, "label": "SF" },
+        { "lat": 34.0522, "lng": -118.2437, "label": "LA" }
+      ],
+      "cinematic": { "mode": "flyAlong", "headingFollow": true, "tilt": { "__tween": [20, 45] } },
+      "camera": { "zoom": { "__tween": [12, 14, "easeInOut"] } },
+      "start": 0,
+      "end": 8
+    },
+    {
+      "id": "streetview",
+      "type": "map",
+      "view": "streetview",
+      "name": "streetview-pan",
+      "streetView": {
+        "location": { "lat": 37.7749, "lng": -122.4194 },
+        "radius": 50,
+        "pov": { "heading": { "__tween": [200, 320, "easeInOut"] }, "pitch": 0 },
+        "zoom": { "__tween": [0, 0.5, "easeInOut"] }
+      },
+      "start": 0,
+      "end": 6
+    }
+  ]
+}

package/tests/fixtures/md/animate-diagrams.md

@@ -0,0 +1,42 @@
+# video
+seed:2660286133
+width:640 height:480 fps:30 layout:series
+
+## Title
+layout:parallel
+- component duration:3
+  ~~~jsx jsx
+  <div style={{position:'absolute',top:0,left:0,width:640,height:480,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',background:'linear-gradient(135deg,#1a1a2e,#16213e)'}}>
+    <h1 style={{color:'#00d4ff',fontSize:28,margin:0}}>Animated Diagrams</h1>
+    <p style={{color:'#aaa',fontSize:16,marginTop:10}}>Mermaid Diagrams with Dynamic Highlight</p>
+  </div>
+  ~~~
+
+## FlowChart
+layout:series
+- component id:flowChart isBackground:true 
+  ~~~jsx
+  <div style={{position:'absolute',top:0,left:0,width:640,height:480,background:'#1a1a2e',padding:10,fontFamily:'monospace',boxSizing:'border-box',display:'flex',flexDirection:'column'}}>
+    <p style={{color:'#00d4ff',fontSize:12,textAlign:'center',margin:'0 0 4px 0',flexShrink:0}}>Flow — {highlight}</p>
+    <div style={{flex:1,display:'flex',justifyContent:'center',alignItems:'center',overflow:'hidden'}}>
+      <Mermaid highlight={highlight} animateEdges={animateEdges} theme='dark' source={mermaid}/>
+    </div>
+  </div>
+  ~~~
+  ~~~mermaid
+  graph TD
+    A["Receive Request"] --> B["Validate Input"]
+    B --> C{"Valid?"}
+    C -->|Yes| D["Process Data"]
+    C -->|No| E["Return Error"]
+    D --> F["Format Response"]
+    F --> G["Send Response"]
+    classDef highlight fill:#ffd700,stroke:#ff6600,stroke-width:3px,color:#000
+  ~~~
+- script on:(start, flowChart.highlight="A")
+  ~~~script
+  
+  ~~~
+- script on:(start, flowChart.highlight="B")
+- script on:(start, flowChart.highlight="C")
+- script on:(start, flowChart.highlight=["D","G"])

package/tests/fixtures/md/electricity-grow.md

@@ -0,0 +1,130 @@
+# video
+seed:1793769080
+width:640 height:480 fps:30 layout:series
+
+## Title
+layout:parallel
+- component duration:3
+  ~~~jsx jsx
+  <div style={{width:'100%',height:'100%',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',background:'linear-gradient(135deg,#0c0c1d,#1a1a3e)'}}>
+    <h1 style={{color:'#ffd700',fontSize:36,margin:0}}>Global Electricity Generation</h1>
+    <p style={{color:'#88ccff',fontSize:20,marginTop:10}}>1985 → 2025</p>
+    <p style={{color:'#aaa',fontSize:14,marginTop:20}}>Data: Ember / Energy Institute (Our World in Data)</p>
+  </div>
+  ~~~
+
+## ChinaSurge
+layout:parallel
+- component duration:6
+  ~~~jsx jsx
+  <div style={{width:'100%',height:'100%',background:'#0c0c1d',padding:20,fontFamily:'Arial,sans-serif'}}>
+    <h2 style={{color:'#ffd700',fontSize:18,textAlign:'center',margin:'0 0 10px 0'}}>China's Electricity Generation (TWh)</h2>
+    <svg viewBox='0 0 580 380' width='100%' height='85%'>
+      {[1985,1990,1995,2000,2005,2010,2015,2020,2025].map((year,i)=>(
+        <g key={year}>
+          <rect x={20+i*62} y={350-tween(0,{1985:42,1990:63,1995:97,2000:137,2005:253,2010:425,2015:625,2020:786,2025:1069}[year])} width={42} height={tween(0,{1985:42,1990:63,1995:97,2000:137,2005:253,2010:425,2015:625,2020:786,2025:1069}[year])} fill='#ff4444' rx={3} />
+          <text x={20+i*62+21} y={365} textAnchor='middle' fill='#aaa' fontSize={9}>{year}</text>
+          <text x={20+i*62+21} y={345-tween(0,{1985:42,1990:63,1995:97,2000:137,2005:253,2010:425,2015:625,2020:786,2025:1069}[year])} textAnchor='middle' fill='#ff8888' fontSize={9}>{Math.round({1985:411,1990:621,1995:928,2000:1356,2005:2500,2010:4207,2015:6186,2020:7779,2025:10583}[year])}</text>
+        </g>
+      ))}
+      <text x={10} y={20} fill='#666' fontSize={10}>TWh</text>
+    </svg>
+  </div>
+  ~~~
+
+## World1985
+layout:parallel
+- component duration:5
+  ~~~jsx jsx
+  <div style={{width:'100%',height:'100%',background:'#0c0c1d',padding:20,fontFamily:'Arial,sans-serif'}}>
+    <h2 style={{color:'#ffd700',fontSize:18,textAlign:'center',margin:'0 0 10px 0'}}>Electricity Generation in 1985 (TWh)</h2>
+    <svg viewBox='0 0 580 380' width='100%' height='85%'>
+      {[
+        {name:'USA',val:2657,color:'#4477ff',scale:266},
+        {name:'Russia',val:962,color:'#cc4444',scale:96},
+        {name:'Japan',val:672,color:'#44cc44',scale:67},
+        {name:'Germany',val:523,color:'#ffaa00',scale:52},
+        {name:'Canada',val:459,color:'#ff66aa',scale:46},
+        {name:'France',val:344,color:'#aa66ff',scale:34},
+        {name:'UK',val:298,color:'#66cccc',scale:30},
+        {name:'Brazil',val:194,color:'#66ff66',scale:19},
+        {name:'India',val:186,color:'#ff8844',scale:19},
+        {name:'China',val:411,color:'#ff4444',scale:41},
+      ].map((c,i)=>(
+        <g key={c.name}>
+          <rect x={20+i*54} y={350-tween(0,c.scale)} width={40} height={tween(0,c.scale)} fill={c.color} rx={3}>
+            <animate attributeName='opacity' values='0;1' dur='2s' fill='freeze'/>
+          </rect>
+          <text x={20+i*54+20} y={365} textAnchor='middle' fill='#aaa' fontSize={9}>{c.name}</text>
+          <text x={20+i*54+20} y={345-tween(0,c.scale)} textAnchor='middle' fill='#fff' fontSize={9}>{c.val}</text>
+        </g>
+      ))}
+    </svg>
+  </div>
+  ~~~
+
+## World2025
+layout:parallel
+- component duration:5
+  ~~~jsx jsx
+  <div style={{width:'100%',height:'100%',background:'#0c0c1d',padding:20,fontFamily:'Arial,sans-serif'}}>
+    <h2 style={{color:'#ffd700',fontSize:18,textAlign:'center',margin:'0 0 10px 0'}}>Electricity Generation in 2025 (TWh)</h2>
+    <svg viewBox='0 0 580 380' width='100%' height='85%'>
+      {[
+        {name:'China',val:10583,color:'#ff4444',scale:280},
+        {name:'USA',val:4520,color:'#4477ff',scale:120},
+        {name:'India',val:2082,color:'#ff8844',scale:55},
+        {name:'Russia',val:1193,color:'#cc4444',scale:32},
+        {name:'Japan',val:1030,color:'#44cc44',scale:27},
+        {name:'Brazil',val:751,color:'#66ff66',scale:20},
+        {name:'Canada',val:652,color:'#ff66aa',scale:17},
+        {name:'S.Korea',val:625,color:'#66cccc',scale:17},
+        {name:'Germany',val:500,color:'#ffaa00',scale:13},
+        {name:'France',val:570,color:'#aa66ff',scale:15},
+      ].map((c,i)=>(
+        <g key={c.name}>
+          <rect x={20+i*54} y={350-tween(0,c.scale)} width={40} height={tween(0,c.scale)} fill={c.color} rx={3}/>
+          <text x={20+i*54+20} y={365} textAnchor='middle' fill='#aaa' fontSize={9}>{c.name}</text>
+          <text x={20+i*54+20} y={345-tween(0,c.scale)} textAnchor='middle' fill='#fff' fontSize={9}>{c.val}</text>
+        </g>
+      ))}
+    </svg>
+  </div>
+  ~~~
+
+## GrowthComparison
+layout:parallel
+- component duration:6
+  ~~~jsx jsx
+  <div style={{width:'100%',height:'100%',background:'#0c0c1d',padding:20,fontFamily:'Arial,sans-serif'}}>
+    <h2 style={{color:'#ffd700',fontSize:18,textAlign:'center',margin:'0 0 10px 0'}}>Growth: 1985 → 2025 (TWh)</h2>
+    <svg viewBox='0 0 580 380' width='100%' height='85%'>
+      {[
+        {name:'China',v1985:411,v2025:10583,growth:'+10172',color:'#ff4444',s1985:11,s2025:280},
+        {name:'USA',v1985:2657,v2025:4520,growth:'+1863',color:'#4477ff',s1985:70,s2025:120},
+        {name:'India',v1985:186,v2025:2082,growth:'+1896',color:'#ff8844',s1985:5,s2025:55},
+        {name:'Brazil',v1985:194,v2025:751,growth:'+557',color:'#66ff66',s1985:5,s2025:20},
+      ].map((c,i)=>(
+        <g key={c.name}>
+          <text x={20} y={50+i*80} fill='#aaa' fontSize={14}>{c.name}</text>
+          <rect x={20} y={58+i*80} width={tween(0,c.s1985)} height={14} fill={c.color} opacity={0.6} rx={2}/>
+          <rect x={20+tween(0,c.s1985)} y={58+i*80} width={tween(0,c.s2025-c.s1985)} height={14} fill={c.color} rx={2}/>
+          <text x={20+tween(0,c.s2025)+5} y={70+i*80} fill='#fff' fontSize={11}>{c.v1985} → {c.v2025}</text>
+          <text x={20} y={86+i*80} fill='#ffd700' fontSize={10}>Growth: {c.growth} TWh</text>
+        </g>
+      ))}
+      <text x={20} y={370} fill='#666' fontSize={9}>1985 bar (dim) → 2025 bar (bright)</text>
+    </svg>
+  </div>
+  ~~~
+
+## Closing
+layout:parallel
+- component duration:3
+  ~~~jsx jsx
+  <div style={{width:'100%',height:'100%',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',background:'linear-gradient(135deg,#0c0c1d,#1a1a3e)'}}>
+    <h2 style={{color:'#ffd700',fontSize:24,margin:0}}>China leads at 10,583 TWh</h2>
+    <p style={{color:'#88ccff',fontSize:16,marginTop:10}}>nearly 25x growth since 1985</p>
+    <p style={{color:'#aaa',fontSize:12,marginTop:30}}>Data: Our World in Data · Ember (2026) / Energy Institute (2025)</p>
+  </div>
+  ~~~

package/tests/fixtures/md/map-all-views.md

@@ -0,0 +1,28 @@
+# video
+seed:2668727180
+width:640 height:480 fps:30 layout:series transition:fade transitionTime:0.5
+
+## Satellite-Dolly
+layout:parallel
+- script "We begin high above San Francisco, then dive into the city."
+- map view:overview mapType:satellite duration:4 center:{lat:37.7749,lng:-122.4194} camera:{zoom:tween(6, 12, easeInOut)}
+
+## Route
+layout:parallel
+- script "The route winds from the Golden Gate to the airport, with photos at each stop."
+- map view:route duration:6 travelMode:DRIVING mapType:roadmap routeColor:"#4285F4" routeWeight:5 routeMarker:"🚗" waypoints:[37.8199,-122.4783,"Golden Gate","https://picsum.photos/seed/gg-bridge/96/96"; 37.7749,-122.4194,"Civic Center","https://picsum.photos/seed/civic-center/96/96"; 37.6213,-122.3790,"SFO","https://picsum.photos/seed/sfo-airport/96/96"]
+
+## Cinematic
+layout:parallel
+- script "The camera tilts and chases the road like a drone."
+- map view:cinematic duration:8 travelMode:DRIVING mapType:satellite routeMarker:"🚗" cinematic:{mode:flyAlong, headingFollow:true, tilt:tween(0, 45, easeInOut)} camera:{zoom:tween(12, 14, easeInOut)} waypoints:[37.8199,-122.4783,"Golden Gate"; 37.7749,-122.4194,"Civic Center"; 37.6213,-122.3790,"SFO"]
+
+## Street-View
+layout:parallel
+- script "And finally, we land on the street itself."
+- map view:streetview duration:8 streetView:{location:{lat:37.7793,lng:-122.4193}, radius:50, pov:{heading:tween(200, 420, easeInOut), pitch:tween(0, -8)}, zoom:tween(0, 0.6, easeInOut)}
+
+## Street-View-Walk
+layout:parallel
+- script "A quick walk down the block."
+- map view:streetview duration:6 streetView:{route:[{lat:37.7793,lng:-122.4193}, {lat:37.7785,lng:-122.4185}, {lat:37.7777,lng:-122.4178}, {lat:37.7769,lng:-122.4170}], radius:50, pov:{heading:tween(0, 40, easeInOut), pitch:-5}}

package/tests/md-descriptive.test.ts

@@ -897,6 +897,64 @@ describe("resolveDialogue", () => {
   });
 });
 
+// ── Map Dynamic Views ─────────────────────────────────────────────────────
+
+describe("map dynamic views (tween camera)", () => {
+  const md = `
+# video
+width:640 height:480 fps:30 layout:series
+
+## Overview
+layout:parallel
+- script "This is the city."
+- map view:overview mapType:satellite duration:4 camera:{zoom:tween(6, 12, easeInOut)}
+
+## Cinematic
+layout:parallel
+- script "Flying over."
+- map view:cinematic duration:8 cinematic:{mode:flyAlong, tilt:tween(0,45)} waypoints:[37.77,-122.41,"SF","photo1.jpg"; 34.05,-118.25,"LA","photo2.jpg"]
+
+## Streetview
+layout:parallel
+- script "On the ground."
+- map view:streetview duration:6 streetView:{location:{lat:37.77,lng:-122.41}, pov:{heading:tween(200,320)}, zoom:tween(0,1)}
+`;
+
+  it("parses view/camera/cinematic/streetView into descriptive nodes", () => {
+    const parsed = parseMarkdownDescriptive(md);
+    const scenes = parsed.children as any[];
+    const overview = scenes[0].children.find((c: any) => c.type === "map");
+    expect(overview.view).toBe("overview");
+    expect(overview.camera?.zoom).toEqual({ __tween: [6, 12, "easeInOut"] });
+
+    const cinematic = scenes[1].children.find((c: any) => c.type === "map");
+    expect(cinematic.view).toBe("cinematic");
+    expect(cinematic.cinematic?.mode).toBe("flyAlong");
+    expect(cinematic.cinematic?.tilt).toEqual({ __tween: [0, 45] });
+    expect(cinematic.waypoints[0].media).toBe("photo1.jpg");
+    expect(cinematic.waypoints[1].media).toBe("photo2.jpg");
+
+    const street = scenes[2].children.find((c: any) => c.type === "map");
+    expect(street.view).toBe("streetview");
+    expect(street.streetView?.pov?.heading).toEqual({ __tween: [200, 320] });
+    expect(street.streetView?.zoom).toEqual({ __tween: [0, 1] });
+  });
+
+  it("compiles view fields into the stream tree", () => {
+    const compiled = compileDescriptiveRoot(parseMarkdownDescriptive(md));
+    const maps = (compiled.children as any[]).flatMap((c: any) =>
+      (c.children ?? []).filter((ch: any) => ch.type === "map"),
+    );
+    expect(maps).toHaveLength(3);
+    expect(maps[0].view).toBe("overview");
+    expect(maps[0].camera?.zoom).toEqual({ __tween: [6, 12, "easeInOut"] });
+    expect(maps[1].view).toBe("cinematic");
+    expect(maps[1].cinematic?.tilt).toEqual({ __tween: [0, 45] });
+    expect(maps[2].view).toBe("streetview");
+    expect(maps[2].streetView?.pov?.heading).toEqual({ __tween: [200, 320] });
+  });
+});
+
 // ── Helper ────────────────────────────────────────────────────────────────
 
 function findComponents(node: any): any[] {

package/tests/render.test.ts

@@ -385,6 +385,7 @@ describe("Full Feature Combination", () => {
       "effects.json",
       "subtitle.json",
       "map.json",
+      "map-dynamic.json",
       "audio.json",
       "subvideo.json",
       "full.json",

package/tests/schema.test.ts

@@ -6,7 +6,7 @@
  * field that the player server sets after bundling frontmatter imports.
  */
 import { describe, it, expect } from "vitest";
-import { root, component } from "../src/schema/index";
+import { root, component, mapStream } from "../src/schema/index";
 
 describe("root.imports — component registry passthrough", () => {
   it("preserves a string bundle URL through root.parse()", () => {
@@ -69,3 +69,60 @@ describe("component node", () => {
     ).toThrow();
   });
 });
+
+describe("map stream — dynamic camera views", () => {
+  const base = { type: "map", waypoints: [{ lat: 37.77, lng: -122.41 }], start: 0, end: 5 };
+
+  it("defaults view to route", () => {
+    expect(mapStream.parse(base).view).toBe("route");
+  });
+
+  it("accepts all views", () => {
+    for (const view of ["overview", "route", "cinematic", "streetview"] as const) {
+      expect(mapStream.parse({ ...base, view }).view).toBe(view);
+    }
+  });
+
+  it("carries camera tween specs and static numbers", () => {
+    const m = mapStream.parse({
+      ...base,
+      view: "overview",
+      camera: { zoom: { __tween: [6, 12, "easeInOut"] }, tilt: 45 },
+    });
+    expect(m.camera?.zoom).toEqual({ __tween: [6, 12, "easeInOut"] });
+    expect(m.camera?.tilt).toBe(45);
+  });
+
+  it("carries cinematic config with tweenable tilt/range", () => {
+    const m = mapStream.parse({
+      ...base,
+      view: "cinematic",
+      cinematic: { mode: "flyTo", tilt: { __tween: [0, 45] }, range: 2000, fallback: "2d" },
+    });
+    expect(m.cinematic?.mode).toBe("flyTo");
+    expect(m.cinematic?.tilt).toEqual({ __tween: [0, 45] });
+    expect(m.cinematic?.range).toBe(2000);
+    expect(m.cinematic?.fallback).toBe("2d");
+  });
+
+  it("carries streetView config with pov tweens, zoom and walk route", () => {
+    const m = mapStream.parse({
+      ...base,
+      view: "streetview",
+      streetView: {
+        location: { lat: 37.77, lng: -122.41 },
+        pov: { heading: { __tween: [200, 320] }, pitch: -10 },
+        zoom: 0.5,
+        route: [{ lat: 37.77, lng: -122.41 }, { lat: 37.78, lng: -122.42 }],
+      },
+    });
+    expect(m.streetView?.pov?.heading).toEqual({ __tween: [200, 320] });
+    expect(m.streetView?.pov?.pitch).toBe(-10);
+    expect(m.streetView?.zoom).toBe(0.5);
+    expect(m.streetView?.route?.length).toBe(2);
+  });
+
+  it("rejects an invalid view", () => {
+    expect(() => mapStream.parse({ ...base, view: "drone" })).toThrow();
+  });
+});

package/tests/validate-assets.test.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect } from "vitest";
+import {
+  classifyAssetPath,
+  collectTreeAssets,
+  validateAssetsRelative,
+} from "../src/render/validate-assets.mjs";
+
+const BASE = "/proj/md";
+
+describe("classifyAssetPath", () => {
+  it("allows remote URIs", () => {
+    expect(classifyAssetPath("https://x/y.png")).toBe("remote");
+    expect(classifyAssetPath("http://x/y.mp4")).toBe("remote");
+    expect(classifyAssetPath("data:image/png;base64,AAA")).toBe("remote");
+    expect(classifyAssetPath("blob:https://x/id")).toBe("remote");
+    expect(classifyAssetPath("file:///tmp/a.png")).toBe("remote");
+  });
+
+  it("flags root-absolute and absolute paths", () => {
+    expect(classifyAssetPath("/Users/me/a.png")).toBe("root-absolute");
+    expect(classifyAssetPath("/a/b.png")).toBe("root-absolute");
+  });
+
+  it("flags .. escapes", () => {
+    expect(classifyAssetPath("../x.png")).toBe("escapes");
+    expect(classifyAssetPath("../../x.png")).toBe("escapes");
+  });
+
+  it("accepts source-folder-relative paths", () => {
+    expect(classifyAssetPath("assets/x.png")).toBe("relative");
+    expect(classifyAssetPath(".markcut/generated/tts/a.mp3")).toBe("relative");
+    expect(classifyAssetPath("a/b/c.png")).toBe("relative");
+  });
+
+  it("treats non-.vtt subtitle src as inline text (not a path)", () => {
+    expect(classifyAssetPath("Hello world", { subtitle: true })).toBe("text");
+    expect(classifyAssetPath("00:00:00.000 --> 00:00:02.000\nhi", { subtitle: true })).toBe("text");
+    expect(classifyAssetPath("subs.vtt", { subtitle: true })).toBe("relative");
+    expect(classifyAssetPath("subs.vtt?lang=en", { subtitle: true })).toBe("relative");
+  });
+});
+
+describe("validateAssetsRelative", () => {
+  const tree = {
+    type: "root",
+    subtitle: { src: ".markcut/sub/subtitles.vtt" },
+    children: [
+      { id: "bg", type: "image", src: "assets/bg.png" },
+      { id: "clip", type: "video", src: "/Users/me/abs.mp4" },
+      { id: "walk", type: "audio", src: "a/../../escape.mp3" },
+      { id: "m", type: "map", waypoints: [{ media: "../outside.png" }] },
+      { id: "sub", type: "subtitle", src: "caption text" },
+      { id: "inc", type: "include", src: "../other.md" },
+    ],
+  };
+
+  it("returns no errors when all assets are baseDir-relative", () => {
+    const ok = {
+      type: "root",
+      subtitle: { src: ".markcut/sub/subtitles.vtt" },
+      children: [
+        { id: "bg", type: "image", src: "assets/bg.png" },
+        { id: "clip", type: "video", src: ".markcut/generated/media/photo_1920x1080.jpg" },
+        { id: "a", type: "audio", src: "assets/tts/1.mp3" },
+        { id: "m", type: "map", waypoints: [{ media: "assets/thumb.png" }] },
+      ],
+    };
+    expect(validateAssetsRelative(ok, BASE)).toEqual([]);
+  });
+
+  it("flags absolute, root-absolute and escaping assets with node id + field", () => {
+    const errors = validateAssetsRelative(tree, BASE);
+    // clip (root-absolute), walk (nested ..), m.waypoints[0].media (..),
+    // inc.src (..) — subtitle text + bg are fine.
+    expect(errors).toHaveLength(4);
+    const joined = errors.join("\n");
+    expect(joined).toContain('node "clip" (type: video) — field src = "/Users/me/abs.mp4"');
+    expect(joined).toContain('node "walk" (type: audio)');
+    expect(joined).toContain("waypoints[0].media");
+    expect(joined).toContain('node "inc" (type: include)');
+    expect(joined).toContain("relative to the source folder");
+  });
+
+  it("skips include.src for descriptive trees (skipIncludeSrc)", () => {
+    const errors = validateAssetsRelative(tree, BASE, { skipIncludeSrc: true });
+    expect(errors).toHaveLength(3);
+    expect(errors.join("\n")).not.toContain('node "inc"');
+  });
+
+  it("collects root.subtitle.src as an asset reference", () => {
+    const refs = collectTreeAssets(tree);
+    expect(refs.some((r) => r.field === "subtitle.src" && r.value === ".markcut/sub/subtitles.vtt")).toBe(true);
+  });
+
+  it("flags a bad root subtitle path", () => {
+    const bad = { type: "root", subtitle: { src: "../shared/subs.vtt" }, children: [] };
+    const errors = validateAssetsRelative(bad, BASE);
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toContain("subtitle.src");
+  });
+
+  it("is robust to empty trees", () => {
+    expect(validateAssetsRelative({ type: "root" }, BASE)).toEqual([]);
+    expect(validateAssetsRelative(null, BASE)).toEqual([]);
+  });
+});