@lalalic/markcut 1.1.1 → 2.0.0

package/templates/courseware/TEMPLATE.md

@@ -0,0 +1,317 @@
+---
+name: courseware
+description: Turn a topic or teaching material into a professional slide-based course video with TTS narration, bullet-reveal slides, and a reviewer quality gate.
+when-to-use: lessons, lectures, training, tutorials, explainers — 1-5 minute educational videos built from slides + narration
+test: 
+---
+
+# Courseware Template
+
+Follow this file top to bottom. It defines **what** a professional courseware video is and **how** to produce one. It does not re-teach the engine — markcut markdown syntax comes from the markcut skill (`SKILL.md` → `docs/markdown-descriptive.md`). Read those first if you have not.
+
+Layout of this template package:
+
+| Path | Runs in | Purpose |
+|---|---|---|
+| `TEMPLATE.md` | your context | everything: inputs, structure, rules, workflow, quality gate |
+| `prompts/*.md` | **your own (orchestrator) context** | fill-in prompt templates you execute yourself |
+| `agents/*.md` | **separate agent session** | subagent definitions (system prompt + task template) |
+
+## 0. Prerequisites
+
+- markcut skill loaded (engine contract: `SKILL.md` + `docs/markdown-descriptive.md`)
+- `npx @lalalic/markcut` runnable
+- For the reviewer gate: `ffmpeg`/`ffprobe`, an STT CLI (e.g. whisper), and image-understanding capability
+
+## 1. Inputs — collect before starting
+
+| Input | Required | Default | Notes |
+|---|---|---|---|
+| Topic / source material | **yes** | — | plain topic, outline, doc, or article |
+| Audience level | no | beginner | beginner / intermediate / expert |
+| Language(s) | no | en | extra languages become variants (see §3) |
+| Target duration | no | 2 min | 1–5 min |
+| Accent color | no | `#61dafb` | theme knob, see §4 |
+
+**Rule:** if the topic/material is missing or ambiguous, ask the user. Never invent course content beyond the given material plus well-established knowledge of the topic. Never invent facts, numbers, or citations.
+
+## 2. Scene grammar — mandatory structure
+
+```
+# video                          ← root: width:1920 height:1080 fps:30 layout:series
+│                                  subtitle:{fontSize:"20px"} tts:"<edge-tts CLI template>"
+├── ## Hook                      ← 3–5s attention grabber, fixed duration
+├── ## Slides                    ← layout:transitionSeries transition:fade(0.5)
+│   ├── ### TitleSlide           ← transitionSeries, bullet-reveal (1 beat)
+│   ├── ### <Concept> × 3–6     ← transitionSeries, bullet-reveal (1 beat per bullet)
+│   └── ### Summary              ← transitionSeries, bullet-reveal (1 beat per takeaway)
+└── ## Thanks                    ← fixed duration:6, no script
+```
+
+Scene rules:
+
+- **Hook**: `- image duration:3 prompt:"<vivid visual, cinematic>"` (or `video`). If no TTI/TTV CLI is configured, use a `<Slide>` hook with a provocative question instead — never leave a broken `prompt:` node.
+- **Every scene inside Slides (TitleSlide, concepts, Summary)** uses the **bullet-reveal pattern** — this is mandatory, not optional:
+
+  ```
+  ### <SceneName>
+  layout:transitionSeries transition:fade(0.5)
+  - component id:<shortId> isBackground:true jsx:"<Slide current={current}>{source}</Slide>"
+    ~~~md source
+    ## Title
+    - 🎯 **Key point 1** — elaboration
+    - 🎯 **Key point 2** — elaboration
+    - 🎯 **Key point 3** — elaboration
+    ~~~
+  - script "Paragraph expanding bullet 1..." on:(start, <shortId>.current=1)
+  - script "Paragraph expanding bullet 2..." on:(start, <shortId>.current=2)
+  - script "Paragraph expanding bullet 3..." on:(start, <shortId>.current=3)
+  ```
+
+  - `id` must be unique per scene (e.g. `t`, `c1`, `c2`, `s`). The `id` connects the component to the script events.
+  - `current={current}` on the Slide component reads the event-driven bullet index and highlights the matching `<li>`.
+  - Each `- script "..."` node is one beat in the `transitionSeries`, so it gets a fade transition. The TTS duration of that script determines the segment length.
+  - The component has `isBackground:true` so its `<Slide>` spans all beats of the scene.
+  - **Beat count = bullet count**: TitleSlide gets 1 beat (just the welcome line), concept scenes get 1 beat per bullet, Summary gets 1 beat per row in the comparison table or per major takeaway.
+
+- **Thanks**: fixed-visual, `duration:6`, no script.
+
+- **Mermaid diagrams inside slides**: Fenced mermaid code blocks (` ```mermaid `) inside `~~~md source` are rendered by the `<Slide>` component (see §4). Use for flowcharts, architecture diagrams, sequence diagrams, timeline visualizations. The diagram renders as inline SVG — place it after bullet points or on its own.
+
+- **Duration is TTS-driven**: never set explicit `duration` on scenes that have a script. Only fixed-visual scenes (Hook, Thanks) get `duration:`.
+
+### make expressful slide
+- use chart to explain when making sense
+- group script and images/videos to make slide more expressful
+- select different transition
+- apply effects
+- control tts with emotion,breaks, speed for natural speech
+
+## 3. Authoring rules — the professional bar
+
+Slide content:
+
+- One idea per slide. ≤ 6 bullets. Bullet shape: `🔹 **bold key phrase** — short elaboration`.
+- Emoji bullet prefixes for scannability (🤖 📊 🔄 🏷️ 💡 ⚡ …), consistent within the course.
+- Use a markdown **table** whenever content is comparative (applications, methods, milestones).
+- Use a `>` quote block for the one memorable takeaway line.
+- Code blocks only when actually teaching code; keep ≤ 10 lines per slide.
+
+Narration script:
+
+- **One paragraph per bullet.** Never merge bullets into a single monolithic script. Each bullet gets its own `- script "..."` node with `on:(start, id.current=N)`.
+- Paragraph length ≈ **15–30 words** per beat (≈6–12 seconds at 2.5 w/s). Total words = target minutes × 150.
+- Each paragraph **expands** that bullet — never reads it verbatim. The paragraph plus all sibling paragraphs must touch every bullet on the slide.
+- The concrete example gets its own bullet and its own script paragraph. Never bury the example in a generic paragraph.
+- Bullet ordering: concepts first (what/why), example last (concrete reinforcement). The example is the final beat before advancing to the next scene.
+- Summary: each row in the comparison table gets one beat. The final beat closes the course ("Thank you for watching…").
+
+Mermaid diagrams:
+
+- Use ` ```mermaid ` fenced code blocks inside `~~~md source` for charts, flowcharts, architecture diagrams, sequence diagrams, and timelines.
+- Place mermaid blocks after the bullet list, separated by a blank line.
+- The Slide component (see §4) renders mermaid code blocks as inline SVG. Ensure the diagram fits within the slide (keep node labels short, max 1–2 sentences per node).
+- For complex diagrams that take time to render, pre-render them as SVG files via `mmdc` (mermaid-cli) or your TTI CLI, and reference as `- image src:...` instead — this is more reliable for final render.
+
+Multi-language (variants):
+
+- For each extra language: a `<lang>:"..."` twin on every script node, a `~~~md <lang>-source` fence beside every `~~~md source`, and a `# <lang>` root block at the end of the file carrying that language's `tts:` voice.
+- See the worked example in §7 for the exact shape (`zh` variant).
+
+## 4. Components & styles — canonical, copy verbatim
+
+Copy both blocks into the generated `course.md` unchanged (except the theme knobs below).
+
+~~~~text
+~~~js imports
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm'
+import mermaid from 'mermaid'
+import React from 'react'
+import { delayRender, continueRender } from 'remotion'
+
+// Initialize mermaid once. Theme matches the slide deck's dark scheme.
+mermaid.initialize({ startOnLoad: false, theme: 'dark', securityLevel: 'loose' })
+
+/**
+ * Renders a mermaid diagram as inline SVG.
+ * Uses Remotion's delayRender/continueRender so the diagram is guaranteed
+ * to be ready before the frame is captured.
+ */
+export function Mermaid({ source }) {
+  const ref = React.useRef(null)
+
+  React.useEffect(() => {
+    if (!source || !ref.current) return
+    const handle = delayRender('Mermaid rendering')
+    mermaid.render('mmd-' + Math.random().toString(36).slice(2), source)
+      .then((result) => {
+        if (ref.current) ref.current.innerHTML = result.svg
+        continueRender(handle)
+      })
+      .catch((err) => {
+        console.error('Mermaid error:', err)
+        continueRender(handle)
+      })
+  }, [source])
+
+  return (<divref={ref}style={{ width: '100%', maxWidth: 960, margin: '20px auto' }}/>  )
+}
+
+/**
+ * Courseware slide component.
+ * - Renders markdown via react-markdown
+ * - Highlights the Nth bullet when `current=N`
+ * - Renders mermaid code blocks ( ```mermaid ...``` ) as inline diagrams
+ */
+export function Slide({ current = 0, children }) {
+  let idx = 1
+  return (
+    <div className="slide">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}
+        components={{
+          li: ({ children }) => {
+            const highlight = idx === current; idx++
+            return <li className={highlight ? 'highlight' : ''}>{children}</li>
+          },
+          // Fenced code blocks — detect mermaid, render as diagram
+          pre: ({ children }) => {
+            const code = React.Children.toArray(children)[0]
+            if (code?.props?.className === 'language-mermaid') {
+              return <Mermaid source={String(code.props.children)} />
+            }
+            return <pre>{children}</pre>
+          },
+        }}>{children}</ReactMarkdown>
+    </div>
+  )
+}
+~~~
+~~~~
+
+~~~~text
+~~~css stylesheet
+/* Container sizing for a perfect 16:9 widescreen presentation slide */
+.slide {
+  color: #f5f5f7;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  font-size: 30px;
+
+  /* Typography rules optimized for visibility from a distance */
+  h1 {
+    font-size: 2.8em;
+    color: #61dafb;
+    margin-top: 0;
+    margin-bottom: 20px;
+    line-height: 1.2;
+  }
+
+  h2 {
+    font-size: 2em;
+    color: #a8dadc;
+    margin-top: 0;
+    margin-bottom: 15px;
+  }
+
+  p {
+    font-size: 1.3em;
+    line-height: 1.6;
+    color: #e0e0e6;
+    margin-bottom: 15px;
+  }
+
+  /* List styling specific to presentation bullet points */
+  ul, ol {
+    margin-left: 25px;
+    margin-bottom: 20px;
+  }
+
+  li {
+    font-size: 1.3em;
+    line-height: 1.8;
+    margin-bottom: 10px;
+    color: #e0e0e6;
+    list-style-type: none; /* Remove default bullets for custom styling */
+
+    /* Highlighted list item for event-driven bullet reveal */
+    &.highlight {
+      color: red;
+      font-weight: 700;
+    }
+  }
+
+  /* Code block handling inside slides */
+  pre {
+    background-color: #2d2d34;
+    padding: 15px;
+    border-radius: 6px;
+    width: 100%;
+    box-sizing: border-box;
+    overflow-x: auto;
+  }
+
+  code {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 1.1em;
+    color: #ffb703;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+
+      th, td {
+        border: 1px solid #444;
+        padding: 10px;
+        text-align: left;
+      }
+  }
+}
+~~~
+~~~~
+
+Theme knobs — change **values only**, never the structure:
+
+| Knob | Selector | Default |
+|---|---|---|
+| Accent (h1) | `.slide h1 { color }` | `#61dafb` |
+| Secondary (h2) | `.slide h2 { color }` | `#a8dadc` |
+| Reveal highlight | `.slide li.highlight { color }` | `red` |
+| Deck background | `.slide { background }` | transparent |
+| Font | `.slide { font-family }` | Helvetica Neue |
+
+## 5. Workflow
+
+Prompts in `prompts/` are fill-in templates: replace every `{placeholder}`, then execute the prompt **in your own context**. `agents/` definitions run in a **separate session** (e.g. a fresh-context subagent).
+
+1. **Outline** — fill `prompts/outline.md` → course outline. **Present the outline to the user and get confirmation** before continuing.
+2. **Scenes** — for each outline section, fill `prompts/scene.md` → slide source + narration script (all languages).
+3. **Assemble** — write `course.md`: §2 grammar, §3 rules, §4 blocks verbatim, root config line with the user's width/height/fps/voice.
+4. **Render** — `npx @lalalic/markcut render course.md`. On engine errors: fix and re-render, max 3 attempts per error, then ask the user.
+5. **Review (quality gate)** — run `agents/reviewer.md` in a fresh separate session. Give it absolute paths to: `course.md`, the rendered MP4, this `TEMPLATE.md`, plus target duration and language(s). It returns `{verdict, findings[]}` and never edits anything.
+6. **Fix loop** — on FAIL: fill `prompts/fix.md` with the findings, apply the edits yourself, go back to step 4. Max **3** review iterations, then escalate to the user with the open findings.
+
+## 6. Quality gate — exit criteria
+
+Done only when ALL hold:
+
+- [ ] reviewer verdict = `PASS` (zero blocker/major findings)
+- [ ] total duration within ±15% of target
+- [ ] structure matches §2 (hook, title, 3–6 concepts, summary, thanks)
+- [ ] no blank/black frames at scene boundaries; slides legible at target resolution
+- [ ] STT transcript of rendered audio matches scripts (≥90% content match)
+- [ ] each bullet should be narrated
+- [ ] expressful slides applied
+- [ ] 80% slides have charts/image/...
+
+
+
+## 7. Reference — worked example
+
+Golden example: [`tests/fixtures/templates/courseware.md`](../../tests/fixtures/templates/courseware.md) — a bilingual (en + zh) "Introduction to Machine Learning" course demonstrating every rule above: hook with generated image, bullet-reveal with `on:(start, slide1.current=N)`, comparative tables, summary with selection guide, and the `# zh` variant block.

package/templates/courseware/agents/reviewer.md

@@ -0,0 +1,84 @@
+---
+name: courseware-reviewer
+description: Read-only quality gate for videos produced from the courseware template. Runs in a separate session with fresh context.
+context: fresh
+mode: read-only
+tools: read file, bash (ffmpeg/ffprobe, STT CLI), image understanding
+---
+
+# System prompt
+
+You are a strict, evidence-based QA reviewer for slide-based course videos. You review; you **never edit** any file. Every finding must cite concrete evidence (a frame image, an STT excerpt, a line in the source, a measured number). If you cannot verify a check, report it as a finding with severity `minor` and say why — never silently skip it.
+
+## Inputs (provided in the task)
+
+- `course_md` — absolute path to the generated courseware markdown
+- `mp4` — absolute path to the rendered video
+- `template_md` — absolute path to the courseware `TEMPLATE.md` (the rulebook: §2 grammar, §3 authoring rules, §6 exit criteria)
+- `duration_min` — target duration in minutes
+- `languages` — expected language(s)
+
+## Procedure
+
+### 1. Static review (source vs rulebook)
+
+Read `template_md` §2/§3, then check `course_md`:
+
+- structure: hook → title → 3–6 concepts → summary → thanks
+- every concept scene: `layout:parallel` (or `transitionSeries` when bullet-reveal), one `isBackground:true` slide component + script node(s)
+- bullet-reveal wiring: `id:slideN` ↔ `on:(start, slideN.current=K)` pairs are consistent and in order
+- slide rules: ≤6 bullets, bold-key-phrase shape, table where comparative, one idea per slide
+- script rules: word count ≈ scene budget (2.5 w/s), expands rather than reads the slide, concrete example present per concept
+- imports/stylesheet blocks match the template canon (only theme-knob values may differ)
+- language variants complete and mirrored (every script has its `<lang>:` twin, every source its `<lang>-source`)
+- factual sanity: no obviously invented facts, numbers, or citations
+
+### 2. Dynamic review (rendered artifact)
+
+- `ffprobe` the MP4: duration (compare to `duration_min` ±15%), resolution, fps, audio stream present
+- Extract frames: one at each scene midpoint plus each scene boundary ±0.5s (estimate boundaries from scene order and TTS-driven durations; evenly-spaced sampling of ~2× scene count is an acceptable fallback). For each frame, verify with image understanding:
+  - not blank/black
+  - it shows the expected slide for that timestamp (match heading/bullets against `course_md`)
+  - legibility: text within safe margins, no overflow/clipping, readable contrast
+- Extract audio (`ffmpeg` → wav), transcribe with the STT CLI, and compare against the scripts in `course_md`: ≥90% content match, correct language, scene order correct
+- Spot-check subtitle overlay in ≥2 frames if subtitles are configured
+
+### 3. Report
+
+Severity: `blocker` (broken output: blank frames, missing audio, wrong structure, unrendered scene) · `major` (professional-bar violation: slide/script mismatch, pacing off-budget >20%, illegible slide, missing example, variant out of sync) · `minor` (polish: emoji inconsistency, wording, small overflow).
+
+## Output — exactly this JSON, nothing after it
+
+```json
+{
+  "verdict": "PASS | FAIL",
+  "measured": { "duration_s": 0, "target_s": 0, "resolution": "", "stt_match_pct": 0 },
+  "findings": [
+    {
+      "id": "F1",
+      "severity": "blocker | major | minor",
+      "scene": "<scene heading or 'global'>",
+      "check": "<which rule/check from the procedure>",
+      "issue": "<what is wrong>",
+      "evidence": "<frame path / STT excerpt / source line / measurement>",
+      "fix_hint": "<one-line suggestion for the orchestrator>"
+    }
+  ]
+}
+```
+
+`PASS` requires zero `blocker` and zero `major` findings.
+
+# Task template (orchestrator fills and sends)
+
+```
+Review a courseware video against its template.
+
+course_md: {course_md}
+mp4: {mp4}
+template_md: {template_md}
+duration_min: {duration_min}
+languages: {languages}
+
+Follow your procedure. Output the verdict JSON only.
+```

package/templates/courseware/prompts/fix.md

@@ -0,0 +1,30 @@
+# Prompt: Apply Reviewer Findings
+
+> Fill every `{placeholder}`, then execute in your own (orchestrator) context.
+> Used in TEMPLATE.md §5 step 6 after a FAIL verdict. You edit; the reviewer never does.
+
+---
+
+You are fixing a courseware video that failed review. Apply the findings below to `{course_md_path}` with **minimal, targeted edits** — do not rewrite passing scenes.
+
+Reviewer findings (JSON):
+
+{findings_json}
+
+Rules:
+
+- Address every `blocker` and `major` finding. Address `minor` findings only when the fix is trivial and local.
+- Each fix must respect TEMPLATE.md §2 scene grammar and §3 authoring rules — a fix that breaks a rule elsewhere is not a fix.
+- Slide/script mismatch → prefer fixing the **script** (cheaper: TTS regenerates; slide layout stays validated).
+- Pacing/duration findings → adjust script word counts toward budget (target duration × 150 words total).
+- Blank/illegible frame findings → check the scene's node (missing `isBackground:true`, broken `src`/`prompt`, oversized content) before touching styles.
+- Never modify the `~~~js imports` or `~~~css stylesheet` blocks except the documented theme knobs (TEMPLATE.md §4).
+- Keep all language variants in sync: an edit to a script or slide must be mirrored in every `<lang>:`/`<lang>-source` twin.
+
+After editing, list what changed:
+
+```
+- <finding id>: <file location> — <one-line description of the edit>
+```
+
+Then re-render and re-review (TEMPLATE.md §5 steps 4–5).

package/templates/courseware/prompts/outline.md

@@ -0,0 +1,53 @@
+# Prompt: Course Outline
+
+> Fill every `{placeholder}`, then execute in your own (orchestrator) context.
+> Output feeds `prompts/scene.md` and must be confirmed by the user before scene writing.
+
+---
+
+You are an instructional designer planning a {duration_min}-minute video course.
+
+Topic / source material:
+
+{material}
+
+Audience: {audience}
+Language(s): {languages}
+
+Requirements:
+
+- Structure: 1 hook + 1 title slide + 3–6 concept sections + 1 summary.
+- Total narration budget ≈ {duration_min} × 150 words. Allocate a word budget per section; the sum must fit the budget.
+- Per concept section provide:
+  - title (≤ 5 words)
+  - 3–6 key points, each as `**bold key phrase** — short elaboration`
+  - one concrete example (real product, scenario, or story) — gets its own key point
+  - whether the content is comparative → table (if yes, name the columns)
+  - whether a mermaid diagram would help (flowchart, architecture, timeline)
+  - word budget
+- Summary: one comparison table spanning all concepts (name the columns) + a selection/decision guide ("If X → use Y").
+- Hook: one vivid visual idea usable as an image/video generation prompt, OR a provocative question if generation is unavailable.
+- Stay strictly within the given material plus well-established knowledge. No invented facts, numbers, or citations.
+
+Output format (markdown):
+
+```
+## Hook
+- visual: <generation prompt or question>
+
+## Concept 1: <title>
+- points:
+  - **<key phrase>** — <elaboration>
+  - ... (last point = the concrete example)
+- table: no | yes (<col1>, <col2>, ...)
+- mermaid: no | yes (<type and description of diagram>)
+- words: <n>
+
+## Concept 2: ...
+
+## Summary
+- table columns: <dimension>, <per-concept columns...>
+- guide:
+  - <condition> → <concept>
+- words: <n>
+```

package/templates/courseware/prompts/scene.md

@@ -0,0 +1,64 @@
+# Prompt: Concept Scene (slide + script)
+
+> Fill every `{placeholder}`, then execute in your own (orchestrator) context.
+> Run once per outline section (TitleSlide, each Concept, Summary).
+> Constraints below mirror TEMPLATE.md §2/§3 — the reviewer checks against them.
+
+---
+
+You are writing one scene of a {duration_min}-minute course for a {audience} audience.
+
+Outline section:
+
+{outline_section}
+
+Course context (for continuity — do not repeat content already covered):
+
+{outline_full}
+
+Produce, for language(s) {languages}:
+
+**A. Slide source** (markdown, rendered by `<Slide>`):
+
+- `##` heading = section title
+- ≤ 6 bullets, shape: `<emoji> **bold key phrase** — short elaboration`
+- consistent emoji set across the course: {emoji_set}
+- markdown table if the outline marks this section comparative
+- `>` quote block only for a single memorable takeaway line
+- no bullet may exceed one line at 1.3em / 1920px width (~90 chars)
+- Optional mermaid diagram: add a fenced mermaid code block after the bullet list (` ```mermaid ...``` `) for flowcharts or architecture visuals.
+
+**B. Narration script** (per language, **one paragraph per bullet**):
+
+- **One paragraph per bullet** — never merge bullets into a single script. Each paragraph becomes a separate `- script "..."` node with `on:(start, <sceneId>.current=N)`.
+- Paragraph length ≈ **15–30 words** per beat (~6–12s at 2.5 w/s).
+- Each paragraph **expands** its bullet — never reads it verbatim.
+- Spoken register: short sentences, no markdown, no stage directions.
+- The concrete example gets its own bullet and its own paragraph. Place it last (final beat of the scene).
+- For TitleSlide: 1 paragraph (just the welcome/introduction line).
+- For Summary: 1 paragraph per row in the comparison table + 1 final closing paragraph ("Thank you for watching…").
+
+Output format:
+
+```
+### <SceneName (PascalCase, no spaces)>
+
+~~~md source
+<slide markdown>
+~~~
+<one extra fenced block per additional language: ~~~md <lang>-source>
+
+script (en):
+<p1: describes bullet 1>
+
+<p2: describes bullet 2>
+
+<p3: describes bullet 3 — concrete example>
+
+script (<lang>):
+<p1 translation>
+
+<p2 translation>
+
+<p3 translation>
+```

package/tests/fixtures/audio.json

@@ -12,14 +12,16 @@
       "src": "assets/bgm/ambient-loop.mp3",
       "volume": 0.3,
       "isBackground": true,
-      "actions": [{ "start": 0, "end": 3 }]
+      "start": 0,
+      "end": 3
     },
     {
       "id": "bg",
       "type": "image",
       "src": "https://picsum.photos/seed/audio-test/640/480",
       "fit": "cover",
-      "actions": [{ "start": 0, "end": 3 }]
+      "start": 0,
+      "end": 3
     }
   ]
 }

package/tests/fixtures/basic.json

@@ -19,7 +19,8 @@
           "type": "image",
           "src": "https://picsum.photos/seed/test-basic/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         }
       ]
     }

package/tests/fixtures/component-all.json

@@ -16,7 +16,8 @@
           "id": "c-hello",
           "type": "component",
           "jsx": "<div style={{color:'#fff',fontSize:28,textAlign:'center'}}>Hello World</div>",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         }
       ]
     },
@@ -30,7 +31,8 @@
           "id": "c-tween",
           "type": "component",
           "jsx": "<svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\"><rect x=\"0\" y={tween(0,150)} width=\"50\" height={tween(50,200)} fill=\"#667eea\" /><rect x=\"70\" y={tween(50,100)} width=\"50\" height={tween(100,50)} fill=\"#764ba2\" /><rect x=\"140\" y={tween(100,0)} width=\"50\" height={tween(50,200)} fill=\"#f093fb\" /></svg>",
-          "actions": [{ "start": 0, "end": 3 }]
+          "start": 0,
+          "end": 3
         }
       ]
     }

package/tests/fixtures/components.json

@@ -17,7 +17,8 @@
           "id": "headline",
           "type": "component",
           "jsx": "<div style={{background:'linear-gradient(135deg,#667eea,#764ba2)',padding:'40px',borderRadius:'16px',textAlign:'center'}}><h1 style={{color:'white',fontSize:'36px',margin:0}}>Component Test</h1><p style={{color:'rgba(255,255,255,0.7)',fontSize:'18px'}}>Built-in components render correctly</p></div>",
-          "actions": [{ "start": 0, "end": 3 }]
+          "start": 0,
+          "end": 3
         }
       ]
     },
@@ -30,7 +31,8 @@
           "id": "stats",
           "type": "component",
           "jsx": "<div style={{background:'#1a1a2e',padding:'30px',borderRadius:'16px',textAlign:'center'}}><span style={{color:'#667eea',fontSize:'64px',fontWeight:'bold'}}>100%</span><p style={{color:'rgba(255,255,255,0.6)',fontSize:'16px'}}>Working</p></div>",
-          "actions": [{ "start": 0, "end": 3 }]
+          "start": 0,
+          "end": 3
         }
       ]
     }

package/tests/fixtures/effects.json

@@ -20,10 +20,12 @@
           "type": "image",
           "src": "https://picsum.photos/seed/effect-fade/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         }
       ],
-      "actions": [{ "start": 0, "end": 2 }]
+      "start": 0,
+      "end": 2
     },
     {
       "id": "bounce",
@@ -35,10 +37,12 @@
           "type": "image",
           "src": "https://picsum.photos/seed/effect-bounce/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         }
       ],
-      "actions": [{ "start": 0, "end": 2 }]
+      "start": 0,
+      "end": 2
     },
     {
       "id": "custom-kf",
@@ -55,10 +59,12 @@
           "type": "image",
           "src": "https://picsum.photos/seed/effect-custom/640/480",
           "fit": "cover",
-          "actions": [{ "start": 0, "end": 2 }]
+          "start": 0,
+          "end": 2
         }
       ],
-      "actions": [{ "start": 0, "end": 2 }]
+      "start": 0,
+      "end": 2
     }
   ]
 }