@lalalic/markcut 2.9.0 → 3.0.0

package/B]

@@ -0,0 +1,2 @@
+[main 2b839d7] mermaid.animateEdges=true|[A-
+ 5 files changed, 162 insertions(+), 18 deletions(-)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lalalic/markcut",
-  "version": "2.9.0",
+  "version": "3.0.0",
   "description": "Markdown-to-video engine. Describe scenes in markdown, get a rendered video.",
   "bin": {
     "markcut": "bin/markcut"

package/skills/markcut/docs/components.md

@@ -9,6 +9,13 @@ These components are available directly in `jsx:".."` fields or importable from
 - Uses `react-markdown` + `remark-gfm` (tables, strikethrough, task lists)
 - Supports `plugins` and `components` props: define custom renderers in imports block and pass them in
 - ` ```mermaid ` code fences inside markdown are automatically rendered as Mermaid diagrams
+- **`highlight`** — array of 0-based list item indices to highlight (e.g., `highlight={[0,2]}`).
+  Matching `<li>` elements receive CSS class `highlight-list-item` with a default golden
+  left-border and background tint. Works for both ordered and unordered lists.
+  ```md
+  <Markdown highlight={[0,2]}
+    source={"1. First item\n2. Second item\n3. Third item\n4. Fourth item"} />
+  ```
 - Importable: `import {Markdown} from "@lalalic/markcut/components"`
 
 ### `<Mermaid />` — render Mermaid diagrams as SVG
@@ -16,7 +23,42 @@ These components are available directly in `jsx:".."` fields or importable from
 - component jsx:"<Mermaid source='graph TD; A-->B; A-->C; B-->D;' />"
 ```
 - Theme prop: `theme="default" | "dark" | "forest" | "neutral"` (default: `dark`)
-- Uses `delayRender`/`continueRender` for async rendering — diagram is ready before Remotion captures the frame
+- **`highlight`** — node name(s) to highlight. String or array of strings.
+  Toggles CSS class `highlight` on matching SVG elements. The diagram source
+  must define the class via `classDef`:
+  ```md
+  classDef highlight fill:#ffd700,stroke:#ff6600,stroke-width:3px,color:#000
+  ```
+- **`animateEdges`** — edge(s) to animate with a flowing dash effect.
+  `true` = animate all edges. `string[]` = specific edges by source→target alias:
+  ```md
+  animateEdges={["A->B","D->F","F->G"]}
+  ```
+  Animates matching edge `<path>` elements via CSS `stroke-dasharray` + `stroke-dashoffset` keyframes.
+- Source from code fences: use `~~~mermaid` to define the diagram source in a
+  separate block, then reference it as `source={mermaid}` in the JSX:
+  ```md
+  - component id:flowChart duration:12
+    ~~~jsx
+    <Mermaid highlight={highlight} animateEdges={animateEdges}
+             theme='dark' source={mermaid}/>
+    ~~~
+    ~~~mermaid
+    graph TD
+      A["Receive Request"] --> B["Validate Input"]
+      B --> C{"Valid?"}
+      classDef highlight fill:#ffd700,stroke:#ff6600,stroke-width:3px
+    ~~~
+    highlight:"A"
+    animateEdges:true
+  ```
+- Dynamic highlight/edges via events: define `on` specs that mutate the
+  component's registered id:
+  ```md
+  - event duration:3 start:3 on:(start, flowChart.highlight="B")
+  - event duration:3 start:6 on:(start, flowChart.highlight="C")
+  - event duration:3 start:9 on:(start, flowChart.highlight=["D","G"])
+  ```
 - Errors shown inline in the output
 - Importable: `import {Mermaid} from "@lalalic/markcut/components"`
 
@@ -43,4 +85,5 @@ export function SuperMarkdown({ source }) {
 - `@remotion/shapes` — render shapes like arrows, circles, rectangles, etc
 - `@remotion/starburst` — render starburst animations
 - `react-webcam-pro` — render webcam video
-- `react-chartjs-2` — render charts with Chart.js at https://react-chartjs-2.js.org/components
+- `react-chartjs-2` — render charts with Chart.js at `https://react-chartjs-2.js.org/components`
+- `@xyflow/react` - render diagrams with `https://reactflow.dev/api-reference`

package/skills/markcut/docs/markdown-descriptive.md

@@ -69,6 +69,7 @@ Where:
 | `audio` | `audio` | Voiceover, BGM, SFX | `src` + (`duration` or `endAt`) |
 | `script "..."` | `audio` | Narration/TTS (shorthand for audio with script) | `script` text (the `"..."` is the primary content) |
 | `component` | `component` | JSX React component | `jsx` (inline or code fence) + `duration` (unless `isBackground`) |
+| `event` | `component` (stub) | **Event-only** — renders nothing, fires JS on registered components at a specific frame | `on:(when, state)` + `start` + `duration` |
 | `rhythm` | `rhythm` | Beat-synced audio with timed children | `src`, `spots`, `children` |
 | `map` | `map` | Animated route visualization | `duration`, `waypoints` |
 | `include` | `include` | Embed external `.md` sub-video | `src` (path to another `.md` file) |
@@ -112,10 +113,13 @@ Fire JS expression at a specific frame to mutate component state.
 ```
 - script "Narration" on:(start, slide.current=0)
 - script "Beat" on:(50%, slide.current++)
+- event duration:3 start:6 on:(start, slide.current=1)
 ```
 
 `when`: `start`/`end`/`50%` (percent) / `2.5s` (seconds value). `state`: any JS expression.
 
+Use the `event` type token to create an **event-only stub** — a node that renders nothing and exists solely to fire an event at a specific time. This avoids boilerplate like `- component duration:3 jsx:"<></>" start:6 on:(...)`.
+
 #### Lists — `spots:[n,n,n]`, `start:n`
 
 ```
@@ -160,8 +164,7 @@ When a property value is too long for a single line (JSX, prompts, scripts, mark
 | `~~~jsx jsx` or `~~~jsx` | `jsx` | Component JSX expression |
 | `~~~prompt prompt` | `prompt` | TTI/TTV generation prompt |
 | `~~~script script` or `~~~script` | `script` | Narration text on audio nodes |
-| `~~~css stylesheet` | `stylesheet` | Global CSS (only valid at root level) |
-| `~~~md <key>` | arbitrary | Markdown content for a specific key (e.g., `source` for `react-markdown`) |
+| `~~~css stylesheet` | `stylesheet` | Global CSS (only valid at root level) || `~~~mermaid` | `mermaid` | Mermaid diagram source (referenced as `{mermaid}` in JSX) || `~~~md <key>` | arbitrary | Markdown content for a specific key (e.g., `source` for `react-markdown`) |
 
 ### 7. Scene Metadata Block
 

package/src/components/Markdown.tsx

@@ -11,39 +11,153 @@ import { Mermaid } from "./Mermaid";
  *
  * The `source` prop is the markdown string to render.
  *
+ * `highlight` is an array of 0-based list item indices to highlight.
+ * Works for both ordered (`ol`) and unordered (`ul`) lists. Matching
+ * `<li>` elements get CSS class `highlight-list-item` (intended for use
+ * with a `classDef` or a custom stylesheet).
+ *
  * Built-in — no imports or frontmatter registration needed.
  */
 export interface MarkdownProps {
-    children?: string;
+  children?: string;
   source?: string;
   className?: string;
   plugins?: any[];
   components?: any;
+  /** 0-based indices of list items to highlight. */
+  highlight?: number[];
+}
+
+// Context to pass highlightList down to list renderers
+const ListCtx = React.createContext<number[]>([]);
+
+function OrderedList({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"ol">) {
+  const hl = React.useContext(ListCtx);
+  const items = React.Children.toArray(children).filter(
+    (c): c is React.ReactElement => React.isValidElement(c) && c.type === "li",
+  );
+  return (
+    <ol {...props}>
+      {items.map((child, i) => {
+        if (hl.includes(i)) {
+          return React.cloneElement(child, { className: "highlight-list-item", key: (child as any).key } as any);
+        }
+        return child;
+      })}
+    </ol>
+  );
+}
+
+function UnorderedList({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"ul">) {
+  const hl = React.useContext(ListCtx);
+  const items = React.Children.toArray(children).filter(
+    (c): c is React.ReactElement => React.isValidElement(c) && c.type === "li",
+  );
+  return (
+    <ul {...props}>
+      {items.map((child, i) => {
+        if (hl.includes(i)) {
+          return React.cloneElement(child, { className: "highlight-list-item", key: (child as any).key } as any);
+        }
+        return child;
+      })}
+    </ul>
+  );
 }
 
-export function Markdown({ children, source=children, className, plugins, components }: MarkdownProps) {
+export function Markdown({
+  children,
+  source = children,
+  className,
+  plugins,
+  components: propComponents,
+  highlight,
+}: MarkdownProps) {
+  const hl = React.useMemo(() => highlight ?? [], [highlight]);
+
+  // Inject default styles once
+  React.useEffect(() => {
+    const id = "markcut-markdown-defaults";
+    if (document.getElementById(id)) return;
+    const el = document.createElement("style");
+    el.id = id;
+    el.textContent = `
+      .highlight-list-item {
+        background: rgba(255, 215, 0, 0.15);
+        border-left: 3px solid #ffd700;
+        padding-left: 8px;
+        border-radius: 0 4px 4px 0;
+      }
+      .slide {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 24px;
+        text-align: center;
+      }
+      .slide h1 { font-size: 2em; margin: 0.4em 0; font-weight: 700; }
+      .slide h2 { font-size: 1.6em; margin: 0.35em 0; font-weight: 600; }
+      .slide h3 { font-size: 1.3em; margin: 0.3em 0; font-weight: 600; }
+      .slide p { margin: 0.6em 0; line-height: 1.6; }
+      .slide ul, .slide ol { margin: 0.5em 0; padding-left: 1.5em; text-align: left; }
+      .slide li { margin: 0.3em 0; }
+      .slide blockquote {
+        margin: 0.6em 0;
+        padding: 0.4em 1em;
+        border-left: 3px solid rgba(255,255,255,.3);
+        font-style: italic;
+        opacity: .85;
+      }
+      .slide code {
+        background: rgba(255,255,255,.08);
+        padding: 0.15em 0.4em;
+        border-radius: 4px;
+        font-size: 0.9em;
+      }
+      .slide pre { margin: 0.6em 0; text-align: left; width: 100%; }
+      .slide a { color: #4a9eff; text-decoration: none; }
+      .slide a:hover { text-decoration: underline; }
+    `;
+    document.head.appendChild(el);
+    return () => { document.getElementById(id)?.remove(); };
+  }, []);
+
+  const mergedComponents = React.useMemo(
+    () => ({
+      ...propComponents,
+      ol: OrderedList,
+      ul: UnorderedList,
+      pre: ({ children: preChildren }: { children: React.ReactNode }) => {
+        const code = React.Children.toArray(preChildren)[0] as React.ReactElement<any>;
+        if (code?.props?.className === "language-mermaid") {
+          return <Mermaid source={String(code.props.children)} />;
+        }
+        if (propComponents?.pre) {
+          return (propComponents.pre as any)({ children: preChildren });
+        }
+        return <pre>{preChildren}</pre>;
+      },
+    }),
+    [propComponents],
+  );
+
   return (
-    <div className={className}>
-      <ReactMarkdown
-        remarkPlugins={React.useMemo(() => [remarkGfm, ...(plugins || [])], [plugins])}
-        components={React.useMemo(
-          () => ({
-            ...components,
-            pre: ({ children }) => {
-                const code = React.Children.toArray(children)[0] as React.ReactElement<any>;
-                if (code?.props?.className === 'language-mermaid') {
-                    return <Mermaid source={String(code.props.children)} />
-                } else if (components.pre) {
-                  return components.pre({ children });
-                }
-                return <pre>{children}</pre>;
-              },
-          }),
-          [components]  
-        )}
-      >
-        {source}
-      </ReactMarkdown>
-    </div>
+    <ListCtx.Provider value={hl}>
+      <div className={className}>
+        <ReactMarkdown
+          remarkPlugins={React.useMemo(() => [remarkGfm, ...(plugins || [])], [plugins])}
+          components={mergedComponents}
+        >
+          {source}
+        </ReactMarkdown>
+      </div>
+    </ListCtx.Provider>
   );
 }

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}"`);