@lalalic/markcut 2.9.0 → 3.1.0

package/src/components/Mermaid.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { delayRender, continueRender } from "remotion";
 import mermaid from "mermaid";
 
 /**
@@ -10,13 +9,23 @@ import mermaid from "mermaid";
  *   <Mermaid source={diagram} theme="dark" />
  *
  * Props:
- *   source   — Mermaid diagram definition string
- *   theme    — Mermaid theme: "default" | "dark" | "forest" | "neutral" (default: "dark")
- *  className — Optional container className
+ *   source       — Mermaid diagram definition string
+ *   theme        — Mermaid theme: "default" | "dark" | "forest" | "neutral" (default: "dark")
+ *   className    — Optional container className
+ *   style        — Container inline style
+ *   highlight    — Node name(s) to highlight. String or array of strings.
+ *                  Toggles CSS class `highlight` on matching SVG elements.
+ *                  The diagram source should define the class, e.g.:
+ *                    classDef highlight fill:#ffd700,stroke:#ff6600,stroke-width:3px
+ *   animateEdges — Edge(s) to animate with a flowing dash effect.
+ *                  true = animate all edges.
+ *                  string[] = animate specific edges by source->target alias,
+ *                  e.g. ["A->B", "D->C"]. Edge paths are found via Mermaid's
+ *                  SVG id pattern: {prefix}-L_{source}_{target}_{index}.
+ *                  Adds CSS class `edge-animated` with a stroke-dashoffset
+ *                  keyframe animation.
  *
  * The diagram is rendered asynchronously via the mermaid library.
- * Uses delayRender/continueRender to ensure the SVG is ready before
- * the frame is captured by Remotion.
  *
  * Built-in — no imports or frontmatter registration needed.
  */
@@ -24,20 +33,147 @@ export interface MermaidProps {
   source?: string;
   children?: string;
   theme?: "default" | "dark" | "forest" | "neutral";
-    className?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  highlight?: string | string[];
+  animateEdges?: boolean | string[];
 }
 
 let initialized = false;
 
-export function Mermaid({ children, source=children, theme = "dark", className}: MermaidProps) {
+/**
+ * Recursively extract plain text from JsxParser children.
+ * JsxParser may wrap template literals in nested React elements.
+ */
+function extractText(x: unknown): string {
+  if (typeof x === "string") return x;
+  if (Array.isArray(x)) return x.map(extractText).join("");
+  if (x && typeof x === "object" && "props" in (x as any)) {
+    return extractText((x as any).props?.children);
+  }
+  return "";
+}
+
+/**
+ * Find the SVG element representing a named node.
+ * Strategy: search <text> + <title> elements by textContent,
+ * walk up to the containing <g> cluster.
+ */
+function findNodeGroup(svg: SVGSVGElement, name: string): Element | null {
+  // Strategy 1: SVG id containing the alias (e.g. `flowchart-A-1234` for "A")
+  // Mermaid embeds node aliases in auto-generated IDs.
+  const byId = svg.querySelector(`[id*="-${CSS.escape(name)}-"]`);
+  if (byId) {
+    let el: Element | null = byId;
+    while (el && el.tagName !== "g") el = el.parentElement;
+    return el || byId;
+  }
+  // Strategy 2: <text> elements whose text starts with the name
+  for (const t of svg.querySelectorAll<SVGTextElement>("text")) {
+    const text = t.textContent?.trim() ?? "";
+    if (text.startsWith(name)) {
+      let el: Element | null = t;
+      while (el && el.tagName !== "g") el = el.parentElement;
+      return el || t;
+    }
+  }
+  // Strategy 3: <title> elements (class diagram titles, state labels)
+  for (const t of svg.querySelectorAll("title")) {
+    if ((t.textContent?.trim() ?? "").startsWith(name) && t.parentElement) {
+      return t.parentElement;
+    }
+  }
+  return null;
+}
+
+/**
+ * Apply edge animation to matching paths in the rendered Mermaid SVG.
+ * Mermaid edge paths have IDs like `{prefix}-L_{source}_{target}_{index}`.
+ *
+ * @param svg - The rendered SVG element
+ * @param spec - true = animate all edges, string[] = specific edges by "A->B" pattern
+ */
+function applyEdgeAnimation(svg: SVGSVGElement, spec: boolean | string[] | undefined): void {
+  if (!spec) return;
+
+  const allEdges = Array.from(svg.querySelectorAll<SVGPathElement>(
+    'path[id*="-L_"]',
+  ));
+
+  if (spec === true) {
+    // Animate all edges
+    for (const path of allEdges) {
+      path.classList.add("edge-animated");
+    }
+    return;
+  }
+
+  // spec is string[] — parse patterns like "A->B"
+  for (const pattern of spec) {
+    const match = pattern.match(/^(\w+)\s*->\s*(\w+)$/);
+    if (!match) continue;
+    const source = match[1]!;
+    const target = match[2]!;
+
+    // Find matching path by ID pattern: *L_{source}_{target}_*
+    const suffix = `L_${source}_${target}_`;
+    for (const path of allEdges) {
+      if (path.id.includes(suffix)) {
+        path.classList.add("edge-animated");
+      }
+    }
+  }
+}
+
+export function Mermaid({
+  children,
+  source: sourceProp,
+  theme = "dark",
+  className,
+  style,
+  highlight,
+  animateEdges,
+}: MermaidProps) {
   const ref = React.useRef<HTMLDivElement>(null);
-  const [handle] = React.useState(() => delayRender("Mermaid rendering"));
+  const renderedRef = React.useRef(false);
+  const styleRef = React.useRef<HTMLStyleElement | null>(null);
 
+  // Inject edge animation CSS once
   React.useEffect(() => {
+    if (!styleRef.current) {
+      const el = document.createElement("style");
+      el.textContent = `
+        @keyframes mermaid-edge-flow {
+          to { stroke-dashoffset: -24; }
+        }
+        .edge-animated {
+          stroke-dasharray: 8 6 !important;
+          animation: mermaid-edge-flow 0.5s linear infinite !important;
+        }
+      `;
+      document.head.appendChild(el);
+      styleRef.current = el;
+    }
+    return () => {
+      if (styleRef.current) {
+        styleRef.current.remove();
+        styleRef.current = null;
+      }
+    };
+  }, []);
+
+  // Resolve source string: children from JsxParser may be nested React
+  // elements wrapping template literals.
+  const source = React.useMemo(
+    () => extractText(sourceProp ?? children),
+    [sourceProp, children],
+  );
+
+  // Render effect — runs once when source/theme changes
+  React.useEffect(() => {
+    let cancelled = false;
     if (!source || !ref.current) return;
 
-    // Initialize once — mermaid.initialize is idempotent but we guard to avoid
-    // redundant config writes on re-renders.
     if (!initialized) {
       mermaid.initialize({
         startOnLoad: false,
@@ -52,25 +188,90 @@ export function Mermaid({ children, source=children, theme = "dark", className}:
     mermaid
       .render(id, source)
       .then((result) => {
-        if (ref.current) ref.current.innerHTML = result.svg;
-        continueRender(handle);
+        if (cancelled || !ref.current) return;
+        ref.current.innerHTML = result.svg;
+        const svg = ref.current.querySelector<SVGSVGElement>("svg");
+        if (svg) {
+          svg.removeAttribute("width");
+          svg.removeAttribute("height");
+          svg.style.width = "100%";
+          svg.style.height = "100%";
+
+          // Apply initial highlight now that SVG exists.
+          // The highlight effect below only fires on prop changes, so the
+          // initial highlight would be missed if SVG wasn't ready yet.
+          if (highlight) {
+            const names = Array.isArray(highlight) ? highlight : [highlight];
+            for (const name of names) {
+              const node = findNodeGroup(svg, name);
+              if (node) node.classList.add("highlight");
+            }
+          }
+
+          // Apply edge animation now that SVG exists.
+          applyEdgeAnimation(svg, animateEdges);
+        }
+        renderedRef.current = true;
       })
       .catch((err) => {
+        if (cancelled) return;
         console.error("Mermaid error:", err);
-        // Show error inline so the user can diagnose diagram syntax
         if (ref.current) {
           ref.current.innerHTML = `<div style="color:#f87171;padding:1em;border:2px dashed #f87171;border-radius:8px;font-family:monospace;font-size:14px;">
             <strong>⚠ Mermaid Error</strong><br/>${String(err).replace(/</g, "&lt;").replace(/>/g, "&gt;")}
           </div>`;
         }
-        continueRender(handle);
       });
-  }, [source, theme, handle]);
 
-  return (
-    <div
-      ref={ref}
-      className={className}
-    />
-  );
+    return () => { cancelled = true; };
+  }, [source, theme]);
+
+  // Highlight effect — toggles CSS class `highlight` on matching nodes.
+  // The diagram source must define this class with desired styles, e.g.:
+  //   classDef highlight fill:#ffd700,stroke:#ff6600,stroke-width:3px
+  React.useEffect(() => {
+    const svg = ref.current?.querySelector<SVGSVGElement>("svg");
+    if (!svg) return;
+
+    // Remove class from all nodes
+    svg.querySelectorAll(".highlight").forEach((el) => {
+      el.classList.remove("highlight");
+    });
+
+    // Apply class to current highlight target(s)
+    const names = Array.isArray(highlight) ? highlight : (highlight ? [highlight] : []);
+    for (const name of names) {
+      const node = findNodeGroup(svg, name);
+      if (node) {
+        node.classList.add("highlight");
+      }
+    }
+  }, [highlight]);
+
+  // AnimateEdges effect — re-applies edge animation on prop changes.
+  // Runs in addition to the initial application in the render callback.
+  React.useEffect(() => {
+    const svg = ref.current?.querySelector<SVGSVGElement>("svg");
+    if (!svg) return;
+
+    // Remove animated class from all edges first
+    svg.querySelectorAll(".edge-animated").forEach((el) => {
+      el.classList.remove("edge-animated");
+    });
+
+    // Re-apply to current spec
+    applyEdgeAnimation(svg, animateEdges);
+  }, [animateEdges]);
+
+  // Default: center the SVG in the container. User style overrides individual properties.
+  const containerStyle: React.CSSProperties = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    ...style,
+  };
+
+  return <div ref={ref} className={className} style={containerStyle} />;
 }

package/src/context/EventContext.tsx

@@ -74,6 +74,9 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
     const keys = Object.keys(scope);
     const vals = Object.values(scope);
     try {
+      // Debug: log the exact code string
+      const codeChars = Array.from(code).map((c: string) => c.charCodeAt(0));
+      console.log(`EventContext.debug: keys=${JSON.stringify(keys)}, codeLen=${code.length}, codeChars=${JSON.stringify(codeChars)}, codeStr=${JSON.stringify(code)}`);
       const fn = new Function(...keys, code);
       fn(...vals);
       console.info(`Event evaluation succeeded: "${code}"`);

package/src/descriptive/compiler.ts

@@ -139,9 +139,18 @@ export interface DescriptiveMapWaypoint {
   media?: string;
 }
 
+/** A tween expression `tween(from, to, easing?)` parsed into a tagged spec. */
+export interface DescriptiveTween {
+  __tween: Array<number | string>;
+}
+
+/** A static number OR an animated tween expression. */
+export type DescriptiveTweenable = number | DescriptiveTween;
+
 export interface DescriptiveMap extends DescriptiveBaseNode {
   type: "map";
   waypoints: DescriptiveMapWaypoint[];
+  view?: "overview" | "route" | "cinematic" | "streetview";
   routeColor?: string;
   routeWeight?: number;
   zoom?: number;
@@ -151,6 +160,34 @@ export interface DescriptiveMap extends DescriptiveBaseNode {
   region?: string;
   travelMode?: "DRIVING" | "WALKING" | "BICYCLING" | "TRANSIT";
   routeMarker?: string;
+  camera?: {
+    zoom?: DescriptiveTweenable;
+    center?: { lat: DescriptiveTweenable; lng: DescriptiveTweenable };
+    heading?: DescriptiveTweenable;
+    tilt?: DescriptiveTweenable;
+  };
+  cinematic?: {
+    mode?: "flyAlong" | "flyTo" | "orbit";
+    followRoute?: boolean;
+    headingFollow?: boolean;
+    tilt?: DescriptiveTweenable;
+    range?: DescriptiveTweenable;
+    altitude?: number;
+    roll?: DescriptiveTweenable;
+    fallback?: "2d" | "none";
+  };
+  streetView?: {
+    pano?: string;
+    location?: { lat: number; lng: number };
+    route?: Array<{ lat: number; lng: number }>;
+    radius?: number;
+    source?: "default" | "outdoor" | "indoor";
+    zoom?: DescriptiveTweenable;
+    pov?: {
+      heading?: DescriptiveTweenable;
+      pitch?: DescriptiveTweenable;
+    };
+  };
 }
 
 export interface DescriptiveContainer extends DescriptiveBaseNode {
@@ -448,15 +485,21 @@ function wrapWithEffects(
   const absEnd = innerStream.end ?? result.duration;
   const duration = absEnd - absStart;
 
-  // Reset inner stream's timing to be relative (start=0) so the effect
-  // wrapper owns the absolute timing. The EffectWrapper renders children
-  // with their relative timing inside its own Sequence.
-  const resetStream = {
-    ...innerStream,
-    start: 0,
-    end: duration,
-    durationInSeconds: duration,
-  } as any;
+  // For background nodes without explicit end, keep original timing
+  // (start/end undefined) so parent back-propagation fills the correct
+  // scene duration. The effect wrapper handles animation timing via
+  // durationInSeconds and the parent fills end for proper visibility span.
+  // Other nodes: reset to relative timing so the effect wrapper owns
+  // the absolute positioning in the parent timeline.
+  const isBgNoEnd = innerStream.isBackground && innerStream.end == null;
+  const resetStream = isBgNoEnd
+    ? { ...innerStream }
+    : {
+        ...innerStream,
+        start: 0,
+        end: duration,
+        durationInSeconds: duration,
+      } as any;
 
   // Build nested effect wrappers from innermost → outermost.
   // The outermost effect uses the original absolute timing;
@@ -476,14 +519,18 @@ function wrapWithEffects(
       id: uid(),
       type: "effect",
       animation: spec.animation,
+      animationDurationSeconds: spec.duration,
       durationInSeconds: spec.duration,
       animationTimingFunction: spec.animationTimingFunction,
       animationIterationCount: spec.animationIterationCount ?? 1,
       customKeyframes: spec.customKeyframes,
       children: [currentStream],
-      start: effStart,
-      end: effEnd,
-      visible: true,
+      // For background inner nodes: propagate start/end as-is so parent
+      // back-propagation fills the correct scene duration. The effect's
+      // durationInSeconds (animation spec) controls animation timing.
+      start: isOutermost && isBgNoEnd ? innerStream.start : effStart,
+      end: isOutermost && isBgNoEnd ? undefined : effEnd,
+      visible: innerStream.visible ?? true,
       ...pickOn(node),
     } as Effect;
   }
@@ -492,7 +539,10 @@ function wrapWithEffects(
 }
 
 function compileLeaf(node: Exclude<DescriptiveNode, DescriptiveContainer | DescriptiveScene | DescriptiveInclude>, ctx: CompileContext, parentKind: "series" | "parallel" | "transitionSeries"): CompileResult {
-  const id = node.id ?? uid();
+  // Only set id when explicitly provided — auto-generated uids would register
+  // in EventContext and may create invalid JS identifiers (starting with digit).
+  const id = node.id;
+  const hasExplicitId = node.id != null;
 
   // Background nodes without explicit duration/endAt: let parent fill timing later
   const hasOwnDuration = typeof node.duration === "number" || typeof node.endAt === "number";
@@ -506,7 +556,7 @@ function compileLeaf(node: Exclude<DescriptiveNode, DescriptiveContainer | Descr
   const end = duration != null ? start! + duration : undefined;
 
   const base = {
-    id,
+    ...(id ? { id } : {}),
     style: node.style,
     visible: node.visible ?? true,
     isBackground: node.isBackground,
@@ -557,11 +607,10 @@ function compileLeaf(node: Exclude<DescriptiveNode, DescriptiveContainer | Descr
         "type", "jsx", "id", "instruction", "style", "visible",
         "isBackground", "duration", "start", "on",
       ]);
-      const bindings: Record<string, string> = {};
+      const bindings: Record<string, unknown> = {};
       for (const key of Object.keys(node)) {
         if (!KNOWN_COMPONENT_KEYS.has(key)) {
-          const val = (node as any)[key];
-          if (typeof val === "string") bindings[key] = val;
+          bindings[key] = (node as any)[key];
         }
       }
 
@@ -589,6 +638,7 @@ function compileLeaf(node: Exclude<DescriptiveNode, DescriptiveContainer | Descr
       const stream: MapStream = {
         ...base,
         type: "map",
+        view: node.view ?? "route",
         waypoints: node.waypoints,
         routeColor: node.routeColor ?? "#4285F4",
         routeWeight: node.routeWeight ?? 4,
@@ -599,6 +649,9 @@ function compileLeaf(node: Exclude<DescriptiveNode, DescriptiveContainer | Descr
         region: node.region,
         travelMode: node.travelMode ?? "DRIVING",
         routeMarker: node.routeMarker ?? "🚗",
+        camera: node.camera,
+        cinematic: node.cinematic,
+        streetView: node.streetView,
         googleMapsApiKey: ctx.googleMapsApiKey,
       };
       return { stream, duration: end ?? 0 };
@@ -690,13 +743,26 @@ function compileScene(
     : aggregateDuration(compiledChildren, sceneKind, resolved.time);
   const localDuration = Math.max(node.duration ?? 0, sceneContentDuration);
 
-  // Back-propagate parent duration to background children without own timing
-  for (const c of compiledChildren) {
-    if (c.stream.isBackground && c.stream.end == null) {
-      c.stream.end = localDuration;
-      c.stream.durationInSeconds = localDuration;
-      if (c.stream.start == null) c.stream.start = 0;
+  // Back-propagate parent duration to nodes without own timing.
+  // Also recurses into effect wrappers so nested background children
+  // (wrapped by effects) get the correct scene duration.
+  function backpropagate(stream: Record<string, any>, dur: number): void {
+    if (stream.end == null) {
+      stream.end = dur;
+      if (stream.durationInSeconds == null) {
+        stream.durationInSeconds = dur;
+      }
+      if (stream.start == null) stream.start = 0;
     }
+    // Recursively walk into effect wrapper children
+    if (stream.type === "effect" && Array.isArray(stream.children)) {
+      for (const child of stream.children) {
+        backpropagate(child, dur);
+      }
+    }
+  }
+  for (const c of compiledChildren) {
+    backpropagate(c.stream, localDuration);
   }
 
   const start = parentKind === "parallel" ? Math.max(0, node.start ?? 0) : 0;
@@ -837,13 +903,23 @@ function compileContainer(node: DescriptiveContainer, ctx: CompileContext, paren
   const children = compileChildren(node.children, ctx, node.type);
   const duration = aggregateDuration(children, node.type, resolved.time);
 
-  // Back-propagate parent duration to background children without own timing
-  for (const c of children) {
-    if (c.stream.isBackground && c.stream.end == null) {
-      c.stream.end = duration;
-      c.stream.durationInSeconds = duration;
-      if (c.stream.start == null) c.stream.start = 0;
+  // Back-propagate parent duration to nodes without own timing.
+  function backpropagate(stream: Record<string, any>, dur: number): void {
+    if (stream.end == null) {
+      stream.end = dur;
+      if (stream.durationInSeconds == null) {
+        stream.durationInSeconds = dur;
+      }
+      if (stream.start == null) stream.start = 0;
     }
+    if (stream.type === "effect" && Array.isArray(stream.children)) {
+      for (const child of stream.children) {
+        backpropagate(child, dur);
+      }
+    }
+  }
+  for (const c of children) {
+    backpropagate(c.stream, duration);
   }
 
   const stream: Folder = {

package/src/descriptive/dsl.ts

@@ -174,28 +174,65 @@ export function parseWaypoints(raw: string): DescriptiveMapWaypoint[] {
     const lat = Number(bits[0] ?? 0);
     const lng = Number(bits[1] ?? 0);
     const labelRaw = bits[2];
-    const label = labelRaw ? unquote(labelRaw) : undefined;
-    return { lat, lng, label };
+    const labelRawUq = labelRaw ? unquote(labelRaw) : undefined;
+    const label = labelRawUq ? labelRawUq : undefined;
+    const mediaRaw = bits[3];
+    const media = mediaRaw ? unquote(mediaRaw) : undefined;
+    return { lat, lng, label, media };
   });
 }
 
+/**
+ * Rewrite `tween(from, to, easing?)` expressions inside a JSON-ish string into
+ * a tagged literal `{"__tween":[from,to,"easing"]}` so the regular JSON parser
+ * can handle them. `from`/`to` may be numbers or quoted strings (e.g. colors);
+ * `easing` is a bare word or quoted string. No eval — deterministic, no scope.
+ *
+ *   tween(6, 12, easeInOut)  →  {"__tween":[6,12,"easeInOut"]}
+ */
+function rewriteTweenExprs(s: string): string {
+  return s.replace(
+    /tween\(\s*([^,()]+?)\s*,\s*([^,()]+?)\s*(?:,\s*([^()]+?))?\s*\)/g,
+    (_match, fromRaw: string, toRaw: string, easingRaw?: string) => {
+      // Scalar → JSON literal: numbers stay, quoted strings stay, bare words get quoted.
+      const scalar = (v: string): string => {
+        const t = v.trim();
+        if (/^[+-]?(\d+(\.\d+)?|\.\d+)$/.test(t)) return t;
+        if (/^"(?:[^"\\]|\\.)*"$/.test(t)) return t;
+        if (t === "true" || t === "false" || t === "null") return t;
+        return JSON.stringify(t);
+      };
+      const items = [scalar(fromRaw), scalar(toRaw)];
+      if (easingRaw !== undefined && easingRaw.trim()) {
+        items.push(scalar(easingRaw));
+      }
+      return `{"__tween":[${items.join(",")}]}`;
+    },
+  );
+}
+
 /**
  * Parse a JSON-like props/imports string into an object or array.
  *
  * Accepts standard JSON, then falls back to a lenient two-pass normalization
  * that quotes bare keys (`{foo:` → `{"foo":`) and bare string values, and
  * finally to `eval` for JSX-like expressions. Returns `{}` on total failure.
+ *
+ * Also understands `tween(from, to, easing?)` expressions (see
+ * {@link rewriteTweenExprs}), which are rewritten to a tagged JSON literal
+ * before parsing so camera/map configs can animate values.
  */
 export function parseProps(raw: string): unknown {
   const s = raw.trim();
   if (!s.startsWith("{") && !s.startsWith("[")) return {};
   if (!s.endsWith("}") && !s.endsWith("]")) return {};
+  const withTweens = rewriteTweenExprs(s);
   try {
-    return JSON.parse(s);
+    return JSON.parse(withTweens);
   } catch {
     // Lenient parse: add quotes around unquoted keys and string values.
     // First pass: quote bare keys: {foo: → {"foo":
-    let normalized = s.replace(
+    let normalized = withTweens.replace(
       /([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:(?=\s*["{[]?)/g,
       '$1"$2":',
     );
@@ -214,7 +251,7 @@ export function parseProps(raw: string): unknown {
     } catch {
       // Last resort: eval (safe since this is a CLI tool)
       try {
-        const result = (0, eval)("(" + s + ")");
+        const result = (0, eval)("(" + withTweens + ")");
         return typeof result === "object" && result !== null ? result : {};
       } catch {
         return {};

package/src/descriptive/markdown.ts

@@ -38,6 +38,7 @@ const TYPE_TOKENS: Record<string, string> = {
   video: "video",
   audio: "audio",
   component: "component",
+  event: "event",
   rhythm: "rhythm",
   include: "include",
   map: "map",
@@ -100,6 +101,7 @@ function preserveVariantAttrs(node: Record<string, unknown>, attrs: Record<strin
     "foreground", "visible", "isBackground", "instruction", "style", "effects", "on",
     "spots", "waypoints", "routeColor", "routeWeight", "routeMarker",
     "travelMode", "zoom", "center", "mapType", "data", "prompt",
+    "view", "camera", "cinematic", "streetView",
     "name", "title", "transition", "transitionTime", "layout",
     "componentName", "props", "speaker",
   ]);
@@ -251,6 +253,23 @@ function parseNodeLine(content: string, lineNum?: number): DescriptiveNode {
       preserveVariantAttrs(node, attrs);
       return node;
     }
+    case "event": {
+      // Event-only stub: compiles to a component with empty JSX (renders nothing),
+      // just fires events on other registered components via `on`.
+      const node: DescriptiveComponent = {
+        type: "component",
+        id: attrs.id as any,
+        jsx: "",
+        duration: attrs.duration as any,
+        start: attrs.start as any,
+        instruction: attrs.instruction as any,
+        style: attrs.style as any,
+        effects: attrs.effects as any,
+        on: attrs.on as any,
+      };
+      preserveVariantAttrs(node, attrs);
+      return node;
+    }
     case "rhythm": {
       const src = firstPositional ?? (attrs.src as string | undefined);
       if (!src) throw new DslError("rhythm requires src", ctx);
@@ -320,6 +339,7 @@ function parseNodeLine(content: string, lineNum?: number): DescriptiveNode {
         waypoints: (attrs.waypoints as DescriptiveMapWaypoint[] | undefined) ?? [],
         duration: attrs.duration as any,
         start: attrs.start as any,
+        view: attrs.view as any,
         routeMarker: attrs.routeMarker as any,
         travelMode: attrs.travelMode as any,
         routeColor: attrs.routeColor as any,
@@ -327,6 +347,9 @@ function parseNodeLine(content: string, lineNum?: number): DescriptiveNode {
         zoom: attrs.zoom as any,
         center: attrs.center as any,
         mapType: attrs.mapType as any,
+        camera: attrs.camera as any,
+        cinematic: attrs.cinematic as any,
+        streetView: attrs.streetView as any,
         language: (attrs.language as any) ?? (attrs.lang as any),
         region: attrs.region as any,
         instruction: attrs.instruction as any,