@lalalic/markcut 3.0.0 → 3.1.1

package/src/utils/directions.ts

@@ -0,0 +1,101 @@
+/**
+ * Server-side Google Directions REST helper.
+ *
+ * Used at resolve time (Node) to compute per-leg travel durations so map
+ * overlay children (`at:"Label"`) can be auto-timed (arrival + dwell). This
+ * is the same Directions REST pattern the spots CLI uses — one request per
+ * consecutive waypoint pair so mixed travel modes (FLIGHT/BOAT synthetic)
+ * can be interspersed with road legs.
+ *
+ * Requires GOOGLE_MAPS_API_KEY (Directions API enabled).
+ */
+import { makeSyntheticLeg, haversineKm } from "./route-legs";
+
+export interface RouteLegTiming {
+  mode: string;
+  from: { lat: number; lng: number };
+  to: { lat: number; lng: number };
+  /** Estimated travel time for this leg, in seconds. */
+  durationSec: number;
+}
+
+function apiKey(): string {
+  return (
+    (typeof process !== "undefined" && process.env.GOOGLE_MAPS_API_KEY) || ""
+  );
+}
+
+/** Directions travel modes (non-synthetic). */
+const ROAD_MODES = new Set(["DRIVING", "WALKING", "BICYCLING", "TRANSIT"]);
+
+/**
+ * Compute the travel time (seconds) for one leg. Road modes hit the
+ * Directions REST API; synthetic modes (FLIGHT/BOAT) are estimated from
+ * haversine distance at cruise speed — no API call, deterministic.
+ *
+ * Returns null when the Directions call fails (caller falls back to a
+ * straight-line estimate so timing still works offline).
+ */
+export async function legDurationSec(
+  from: { lat: number; lng: number },
+  to: { lat: number; lng: number },
+  mode: string,
+  key = apiKey(),
+): Promise<number | null> {
+  const m = (mode || "").toUpperCase();
+  if (!ROAD_MODES.has(m)) {
+    // Synthetic: distance at cruise speed (same math as the renderer).
+    return makeSyntheticLeg(from, to, m).durationSec;
+  }
+  if (!key) {
+    // No key → straight-line estimate (consistent, deterministic).
+    return straightLineSec(from, to);
+  }
+
+  const url = new URL("https://maps.googleapis.com/maps/api/directions/json");
+  url.searchParams.set("origin", `${from.lat},${from.lng}`);
+  url.searchParams.set("destination", `${to.lat},${to.lng}`);
+  url.searchParams.set("mode", m.toLowerCase());
+  url.searchParams.set("key", key);
+
+  try {
+    const res = await fetch(url);
+    const data = await res.json();
+    const dur = data?.routes?.[0]?.legs?.[0]?.duration?.value;
+    if (typeof dur === "number" && dur > 0) return dur;
+    return straightLineSec(from, to);
+  } catch {
+    return straightLineSec(from, to);
+  }
+}
+
+/** Fallback straight-line estimate (~50 km/h), so timing works without the API. */
+function straightLineSec(
+  from: { lat: number; lng: number },
+  to: { lat: number; lng: number },
+): number {
+  return (haversineKm(from, to) / 50) * 3600;
+}
+
+/**
+ * Compute per-leg timing for a full route.
+ *
+ * `modes[i]` is the travel mode of the leg leaving waypoints[i]
+ * (defaults to `defaultMode`). Returns one timing per consecutive pair.
+ */
+export async function routeLegTimings(
+  waypoints: { lat: number; lng: number; mode?: string }[],
+  defaultMode = "DRIVING",
+  key = apiKey(),
+): Promise<RouteLegTiming[]> {
+  if (waypoints.length < 2) return [];
+  const out: RouteLegTiming[] = [];
+  for (let i = 0; i < waypoints.length - 1; i++) {
+    const from = waypoints[i]!;
+    const to = waypoints[i + 1]!;
+    const mode = (from.mode ?? defaultMode).toUpperCase();
+    const durationSec = (await legDurationSec(from, to, mode, key)) ?? 0;
+    out.push({ mode, from, to, durationSec });
+  }
+  return out;
+}

package/src/utils/index.ts

@@ -104,6 +104,17 @@ export function getDurationInSeconds(stream: DurationStream, update = true): num
     return stream.durationInSeconds ?? 0;
   }
 
+  // Map is a leaf whose overlay children are positioned INSIDE it — its own
+  // base timing (end) defines the duration, not max(child durations).
+  if (stream.type === "map") {
+    const d = leafEnd(stream);
+    if (update) {
+      stream.durationInSeconds = d;
+      for (const child of stream.children ?? []) getDurationInSeconds(child, update);
+    }
+    return d;
+  }
+
   // include: if src is set, treat as leaf (duration from base end).
   // Otherwise fall back to inline children (legacy).
   if (stream.type === "include") {

package/src/utils/route-legs.ts

@@ -0,0 +1,199 @@
+/**
+ * Multi-leg route math for the `map` stream (view:"route").
+ *
+ * A route is a sequence of legs — one per consecutive waypoint pair. Each
+ * waypoint may tag the leg that LEAVES it with its own travel mode
+ * (`waypoint.mode ?? map.travelMode`). Supported modes:
+ *
+ *   DRIVING | WALKING | BICYCLING | TRANSIT   → Google Directions API
+ *   FLIGHT | BOAT                             → synthetic great-circle arc
+ *     (Directions has no air/water routes; we draw a curved arc and time it
+ *      from haversine distance at a cruise speed)
+ *
+ * Pure functions only (deterministic per second) so the animated marker and
+ * any future camera can share the same route-time math.
+ */
+export interface RouteLegStep {
+  path: { lat: number; lng: number }[];
+  durationSec: number;
+}
+
+export interface RouteLeg {
+  mode: string;
+  from: { lat: number; lng: number };
+  to: { lat: number; lng: number };
+  durationSec: number;
+  steps: RouteLegStep[];
+}
+
+/** Cruise speeds used to estimate synthetic leg durations (km/h). */
+export const FLIGHT_SPEED_KMH = 850;
+export const BOAT_SPEED_KMH = 40;
+
+/** Modes with no Directions route — rendered as synthetic great-circle arcs. */
+export function isSyntheticMode(mode?: string): boolean {
+  const m = (mode ?? "").toUpperCase();
+  return m === "FLIGHT" || m === "BOAT";
+}
+
+const EARTH_RADIUS_KM = 6371;
+const toRad = (d: number) => (d * Math.PI) / 180;
+const toDeg = (d: number) => (d * 180) / Math.PI;
+
+/** Great-circle (haversine) distance between two lat/lng points, in km. */
+export function haversineKm(
+  a: { lat: number; lng: number },
+  b: { lat: number; lng: number },
+): number {
+  const dLat = toRad(b.lat - a.lat);
+  const dLng = toRad(b.lng - a.lng);
+  const h =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos(toRad(a.lat)) * Math.cos(toRad(b.lat)) * Math.sin(dLng / 2) ** 2;
+  return 2 * EARTH_RADIUS_KM * Math.asin(Math.sqrt(h));
+}
+
+/**
+ * Interpolate the great-circle arc between two lat/lng points (the "as the
+ * crow flies" flight path), returning `points + 1` points including both ends.
+ */
+export function greatCirclePath(
+  a: { lat: number; lng: number },
+  b: { lat: number; lng: number },
+  points = 64,
+): { lat: number; lng: number }[] {
+  const φ1 = toRad(a.lat);
+  const λ1 = toRad(a.lng);
+  const φ2 = toRad(b.lat);
+  const λ2 = toRad(b.lng);
+  const d = haversineKm(a, b) / EARTH_RADIUS_KM; // angular distance (radians)
+  const out: { lat: number; lng: number }[] = [];
+  for (let i = 0; i <= points; i++) {
+    if (d === 0) {
+      out.push({ lat: a.lat, lng: a.lng });
+      continue;
+    }
+    const f = i / points;
+    const A = Math.sin((1 - f) * d) / Math.sin(d);
+    const B = Math.sin(f * d) / Math.sin(d);
+    const x = A * Math.cos(φ1) * Math.cos(λ1) + B * Math.cos(φ2) * Math.cos(λ2);
+    const y = A * Math.cos(φ1) * Math.sin(λ1) + B * Math.cos(φ2) * Math.sin(λ2);
+    const z = A * Math.sin(φ1) + B * Math.sin(φ2);
+    out.push({ lat: toDeg(Math.atan2(z, Math.sqrt(x * x + y * y))), lng: toDeg(Math.atan2(y, x)) });
+  }
+  return out;
+}
+
+/** Build a synthetic leg (FLIGHT ✈️ / BOAT 🚢) between two waypoints. */
+export function makeSyntheticLeg(
+  from: { lat: number; lng: number },
+  to: { lat: number; lng: number },
+  mode: string,
+): RouteLeg {
+  const speedKmh = (mode || "").toUpperCase() === "BOAT" ? BOAT_SPEED_KMH : FLIGHT_SPEED_KMH;
+  const durationSec = (haversineKm(from, to) / speedKmh) * 3600;
+  return {
+    mode: mode.toUpperCase(),
+    from,
+    to,
+    durationSec,
+    steps: [{ path: greatCirclePath(from, to), durationSec }],
+  };
+}
+
+/** Emoji glyph for a leg's travel mode (used for the traveling marker). */
+export function modeEmoji(mode?: string): string {
+  switch ((mode ?? "").toUpperCase()) {
+    case "FLIGHT": return "✈️";
+    case "BOAT": return "🚢";
+    case "WALKING": return "🚶";
+    case "BICYCLING": return "🚲";
+    case "TRANSIT": return "🚌";
+    case "DRIVING": return "🚗";
+    default: return "📍";
+  }
+}
+
+/** Position within one leg at normalized progress t ∈ [0,1] (step-timed). */
+export function positionAlongLeg(
+  leg: RouteLeg,
+  t: number,
+): { lat: number; lng: number } | null {
+  if (leg.steps.length === 0) return null;
+  const currentInSecond = t * leg.durationSec;
+  let acc = 0;
+  for (const step of leg.steps) {
+    if (currentInSecond <= acc + step.durationSec) {
+      const stepElapsed = currentInSecond - acc;
+      const stepProgress = step.durationSec > 0 ? stepElapsed / step.durationSec : 0;
+      const idx = Math.min(
+        Math.max(0, Math.floor(stepProgress * step.path.length)),
+        step.path.length - 1,
+      );
+      return step.path[idx] ?? null;
+    }
+    acc += step.durationSec;
+  }
+  const last = leg.steps[leg.steps.length - 1]!;
+  return last.path[last.path.length - 1] ?? null;
+}
+
+/**
+ * A dwell window where the pin holds still at a waypoint (a map overlay
+ * child is showing). `fromSec`/`toSec` are in the same timeline as
+ * `routePositionAtLegs`'s `seconds`.
+ */
+export interface RouteStopWindow {
+  label: string;
+  at: { lat: number; lng: number };
+  mode: string;
+  fromSec: number;
+  toSec: number;
+}
+
+/**
+ * Position of the traveling marker at a given timeline second, plus the mode
+ * of the leg it is currently on. Time is split across legs proportionally to
+ * each leg's duration. When `stops` is provided, the marker holds still at a
+ * waypoint during its dwell window (drive time is compressed around the
+ * dwells, matching the resolver's arrival math). Returns null when there is
+ * no route.
+ */
+export function routePositionAtLegs(
+  legs: RouteLeg[],
+  actionDuration: number,
+  seconds: number,
+  stops: RouteStopWindow[] = [],
+): { lat: number; lng: number; mode: string } | null {
+  if (legs.length === 0) return null;
+
+  // Inside a dwell window → hold at that waypoint.
+  const inStop = stops.find((s) => seconds >= s.fromSec && seconds < s.toSec);
+  if (inStop) {
+    return { lat: inStop.at.lat, lng: inStop.at.lng, mode: inStop.mode };
+  }
+
+  // Drive time = timeline seconds with completed/overlapping dwells removed.
+  let dwellBefore = 0;
+  for (const s of stops) {
+    if (seconds >= s.toSec) dwellBefore += s.toSec - s.fromSec;
+    else if (seconds > s.fromSec) dwellBefore += seconds - s.fromSec;
+  }
+  const driveTime = Math.max(0, seconds - dwellBefore);
+  const totalDwell = stops.reduce((s, st) => s + (st.toSec - st.fromSec), 0);
+  const driveBudget = Math.max(0.1, actionDuration - totalDwell);
+  const total = legs.reduce((s, l) => s + l.durationSec, 0);
+  const currentInSecond = driveTime * (total / driveBudget);
+  let acc = 0;
+  for (const leg of legs) {
+    if (currentInSecond <= acc + leg.durationSec) {
+      const t = leg.durationSec > 0 ? Math.min(Math.max((currentInSecond - acc) / leg.durationSec, 0), 1) : 0;
+      const pos = positionAlongLeg(leg, t);
+      return pos ? { ...pos, mode: leg.mode } : null;
+    }
+    acc += leg.durationSec;
+  }
+  const last = legs[legs.length - 1]!;
+  const pos = positionAlongLeg(last, 1);
+  return pos ? { ...pos, mode: last.mode } : null;
+}

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,54 @@ 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("parses a bare travel mode without an empty media slot (smart)", () => {
+    expect(parseWaypoints('[40.7,-74.0,"NYC",FLIGHT; 34.05,-118.25,"LA","photo.jpg",BOAT]')).toEqual([
+      { lat: 40.7, lng: -74.0, label: "NYC", media: undefined, mode: "FLIGHT" },
+      { lat: 34.05, lng: -118.25, label: "LA", media: "photo.jpg", mode: "BOAT" },
+    ]);
+  });
+
+  it("parses a bare travel mode as the only trailing field", () => {
+    expect(parseWaypoints('[40.7,-74.0,FLIGHT]')).toEqual([
+      { lat: 40.7, lng: -74.0, label: undefined, media: undefined, mode: "FLIGHT" },
+    ]);
+  });
+
+  it("parses a bare mode even before the label", () => {
+    expect(parseWaypoints('[40.7,-74.0,BOAT,"Pier"]')).toEqual([
+      { lat: 40.7, lng: -74.0, label: "Pier", media: undefined, mode: "BOAT" },
+    ]);
+  });
+
+  it("uppercases a lowercase bare mode", () => {
+    expect(parseWaypoints('[40.7,-74.0,"NYC",flight]')[0]!.mode).toBe("FLIGHT");
+  });
+
+  it("still accepts empty quoted media slots (backward compat)", () => {
+    expect(parseWaypoints('[40.7,-74.0,"NYC","",BOAT]')).toEqual([
+      { lat: 40.7, lng: -74.0, label: "NYC", media: undefined, mode: "BOAT" },
+    ]);
+  });
+
+  it("treats a quoted mode word as a literal label/media (escape hatch)", () => {
+    expect(parseWaypoints('[40.7,-74.0,"NYC","FLIGHT"]')).toEqual([
+      { lat: 40.7, lng: -74.0, label: "NYC", media: "FLIGHT", mode: undefined },
+    ]);
+  });
+
   it("returns empty array for non-bracket input", () => {
     expect(parseWaypoints("not a list")).toEqual([]);
   });
@@ -133,6 +181,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/map-overlay.json

@@ -0,0 +1,56 @@
+{
+  "root": {
+    "type": "root",
+    "width": 640,
+    "height": 480,
+    "fps": 30,
+    "layout": "series",
+    "children": [
+      {
+        "type": "map",
+        "id": "map-overlay-test",
+        "view": "route",
+        "travelMode": "DRIVING",
+        "mapType": "roadmap",
+        "routeColor": "#4285F4",
+        "routeWeight": 5,
+        "waypoints": [
+          {
+            "lat": 37.8199,
+            "lng": -122.4783,
+            "label": "Golden Gate"
+          },
+          {
+            "lat": 37.6213,
+            "lng": -122.379,
+            "label": "SFO"
+          }
+        ],
+        "start": 0,
+        "end": 12,
+        "duration": 12,
+        "children": [
+          {
+            "type": "effect",
+            "animation": "zoomIn",
+            "animationIterationCount": 1,
+            "start": 0,
+            "end": 4,
+            "at": "Golden Gate",
+            "children": [
+              {
+                "type": "image",
+                "src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAACXBIWXMAAAAAAAAAAQCEeRdzAAAAYUlEQVR4nO3PwQkAIBDAMAX3X/kcwkcQmgnaPWvWz44OeNWA1oDWgNaA1oDWgNaA1oDWgNaA1oDWgNaA1oDWgNaA1oDWgNaA1oDWgNaA1oDWgNaA1oDWgNaA1oDWgNaAdgFCjAL8Lb/n7gAAAABJRU5ErkJggg==",
+                "fit": "contain",
+                "start": 0,
+                "end": 4,
+                "at": "Golden Gate"
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    "seed": 592821268
+  }
+}

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

@@ -13,8 +13,8 @@ layout:parallel
   ~~~
 
 ## FlowChart
-layout:parallel
-- component id:flowChart duration:12
+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>
@@ -33,8 +33,10 @@ layout:parallel
     F --> G["Send Response"]
     classDef highlight fill:#ffd700,stroke:#ff6600,stroke-width:3px,color:#000
   ~~~
-  highlight:"A"
-  animateEdges:true
-- event duration:3 start:3 on:(start, flowChart.highlight="B";flowChart.animateEdges=["B->C"])
-- event duration:3 start:6 on:(start, flowChart.highlight="C")
-- event duration:3 start:9 on:(start, flowChart.highlight=["D","G"])
+- 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/map-all-views.md

@@ -0,0 +1,35 @@
+# 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"]
+
+## Stops
+layout:parallel
+- script "The pin pauses at each landmark while a photo grows out of it."
+- map view:route duration:16 travelMode:DRIVING mapType:roadmap routeColor:"#4285F4" routeWeight:5 routeMarker:"🚗" waypoints:[37.8199,-122.4783,"Golden Gate"; 37.7749,-122.4194,"Civic Center"; 37.6213,-122.3790,"SFO"]
+  - image src:https://picsum.photos/seed/gg-photo/200/200 at:"Golden Gate" duration:3 effects:[zoomIn]
+  - image src:https://picsum.photos/seed/civic-photo/200/200 at:"Civic Center" duration:3 effects:[zoomIn]
+
+## 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.7785,lng:-122.4185}, {lat:37.7777,lng:-122.4178}], radius:50, pov:{heading:tween(0, 40, easeInOut), pitch:-5}}

package/tests/fixtures/md/map-children.md

@@ -0,0 +1,11 @@
+# video
+seed:42
+width:640 height:480 fps:30 layout:series transition:fade transitionTime:0.5
+
+## Route-Tour
+layout:parallel
+- script "We tour from the Golden Gate to the airport, stopping at each landmark."
+- map view:route travelMode:DRIVING mapType:roadmap routeColor:"#4285F4" routeWeight:5
+  waypoints:[37.8199,-122.4783,"Golden Gate"; 37.7749,-122.4194,"Civic Center"; 37.6213,-122.3790,"SFO"]
+  - image src:https://picsum.photos/seed/gg-photo/200/200 at:"Golden Gate" duration:3 effects:[zoomIn]
+  - image src:https://picsum.photos/seed/civic-photo/200/200 at:"Civic Center" duration:3 effects:[zoomIn]

package/tests/fixtures/md/map-multimode.md

@@ -0,0 +1,9 @@
+# video
+seed:1
+width:1080 height:1920 fps:30 layout:series transition:fade transitionTime:0.5
+
+## Multi-Leg-Trip
+layout:parallel
+- script "We fly to the coast, take a boat across the bay, walk the promenade, then drive to the airport."
+- map view:route duration:12 travelMode:DRIVING mapType:roadmap routeColor:"#4285F4" routeWeight:5
+  waypoints:[37.8199,-122.4783,"SFO",FLIGHT; 33.94,-118.41,"LAX",BOAT; 33.75,-118.28,"Long Beach",WALKING; 33.77,-118.19,"Promenade",DRIVING; 33.94,-118.41,"LAX"]