@lalalic/markcut 2.9.0 → 3.1.0

package/package.json

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

package/skills/markcut/SKILL.md

@@ -36,6 +36,11 @@ Implies `--edit` so you can chat to reshape the story and see live reloads.
 ### Video Variants
 - define variants for different video configurations, such as different languages, aspects, platforms
 
+### Route / Vlog videos (map clips)
+- For **route / travel-vlog clips** (drone flyover, route map with photo stops, Street View walks) use the `map` stream type with `view: overview | route | cinematic | streetview` and `tween(from,to,easing)` camera moves.
+- Discover interesting stops along a route with `markcut spots --waypoints "lat,lng;lat,lng" --photos --markdown`, then compose a `map` storyboard from the returned `waypoints:[...]` line.
+- See [docs/map-dynamic-camera.md](docs/map-dynamic-camera.md) — the agent guide with effects, spots workflow, and copy-paste markdown examples.
+
 ### Viral Story requires
 - **Hooks** : why should the viewer watch this?
 - **Conflict** : what challenges or obstacles do the characters face?
@@ -60,6 +65,7 @@ npx @lalalic/markcut preview <file> --storyboard # fast structure preview: repla
 npx @lalalic/markcut render <file> # render the video to mp4
 npx @lalalic/markcut vision <folder> # vision understanding medias in folder
 npx @lalalic/markcut vision <folder> --label # an extra step to provide UI to label the medias with text, time ranges
+npx @lalalic/markcut spots --waypoints "lat,lng;lat,lng" # discover POIs along a route (for route/vlog map clips)
 
 ```
 
@@ -80,6 +86,7 @@ some common issues (photo or video can't be displayed, audio missing), take belo
 | Topic | File |
 |-------|------|
 | Markdown descriptive format (primary authoring format) | [docs/markdown-descriptive.md](docs/markdown-descriptive.md) |
+| Route / vlog map clips (effects, spots, examples) | [docs/map-dynamic-camera.md](docs/map-dynamic-camera.md) |
 | Built-in components & common npm packages | [docs/components.md](docs/components.md) |
 | Sound effects | [docs/sound-effects.md](docs/sound-effects.md) |
 

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/map-dynamic-camera.md

@@ -0,0 +1,244 @@
+# Route & Vlog Map Videos — Agent Guide
+
+> Make route / travel-vlog video clips with the `map` stream type: establishing
+> dolly shots, route flyovers with photo stops, cinematic chase cameras, and
+> immersive Street View moves — all narrated by TTS. This is the **agent-facing**
+> reference: what effects you can get, how to discover spots, and copy-paste
+> markdown. No implementation details.
+
+---
+
+## 1. When to reach for this
+
+Use `map` clips when the video is about **a place and getting around**:
+
+- travel vlog: "we drove from the Golden Gate to SFO, stopping for photos"
+- city tour: establishing shot → flyover → street level
+- route explainers: commute, road trip, walking tour, "how to get there"
+
+Every map clip can carry a `script` narration next to it (see §6 for the
+scene pattern that plays map + narration together).
+
+---
+
+## 2. The 4 views = 4 effects
+
+`view` is the one field that decides the whole feel. Default is `route`.
+
+| view | effect | best for |
+|---|---|---|
+| `overview` | **Dolly** — camera starts far (satellite) and flies down to the city/street | establishing shot, "this is where we are" |
+| `route` | **Route map** — path + animated marker + optional photo thumbnails at each stop | itinerary, travel log |
+| `cinematic` | **Chase flyover** — camera follows the route like a drone, road always "forward-up" | exciting transitions between stops |
+| `streetview` | **Street View** — immersive pan / tilt / walk at ground level | being on location, "here we are" |
+
+Example — one line each:
+
+```md
+- map view:overview duration:4 camera:{zoom:tween(6, 12, easeInOut)}
+- map view:route duration:6 waypoints:[...] 
+- map view:cinematic duration:8 waypoints:[...] cinematic:{tilt:tween(0, 45)}
+- map view:streetview duration:6 streetView:{location:{lat:37.77,lng:-122.41}, pov:{heading:tween(200, 320)}}
+```
+
+---
+
+## 3. Animating the camera — `tween()`
+
+Any camera value can be **static** (a number) or **animated** with a tween
+expression written directly in markdown:
+
+```
+tween(from, to, easing?)
+```
+
+| easing | feel |
+|---|---|
+| `easeInOut` (default) | smooth ease at both ends — default for camera moves |
+| `easeIn` | starts slow, finishes fast |
+| `easeOut` | starts fast, settles |
+| `linear` | constant speed — use for constant pan |
+
+Fields that accept `tween(...)`:
+
+- `camera.zoom` — `tween(6, 12)` = dolly in (higher zoom = closer)
+- `camera.heading` — `tween(0, 90)` = rotate the map
+- `camera.tilt` — `tween(0, 45)` = tilt reveal (top-down → perspective)
+- `camera.center.{lat,lng}` — fly across the map
+- `cinematic.tilt` / `cinematic.range` / `cinematic.roll` — 3D camera moves
+- `streetView.pov.heading` — pan: `tween(200, 320)` sweeps the view;
+  `tween(200, 560)` = whip pan
+- `streetView.pov.pitch` — `tween(0, -10)` tilts from sky to street
+- `streetView.zoom` — Street View field-of-view: `tween(0, 1)` = dolly-zoom feel
+
+Rules of thumb:
+
+- **Zoom is not linear in perceived distance** — use `easeInOut` to hide the
+  "pop". For a strong dolly: `zoom:tween(5, 13)` (city region → streets).
+- Combine tweens for a richer move, e.g. dolly + tilt reveal:
+  `camera:{zoom:tween(12, 14, easeInOut)} cinematic:{tilt:tween(0, 45, easeInOut)}`.
+
+---
+
+## 4. Photo stops (the vlog touch)
+
+`waypoints` take an optional **4th field = media** (image path or URL). It
+renders as a small thumbnail marker at that stop — perfect for "here's the
+place" moments in a vlog:
+
+```
+[lat,lng,"Label"]                       # plain stop
+[lat,lng,"Label","assets/photo.jpg"]    # stop with photo thumbnail
+[lat,lng,"","assets/photo.jpg"]         # empty label = thumbnail only
+```
+
+Full example:
+
+```md
+- 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/96/96"; 37.7749,-122.4194,"Civic Center","https://picsum.photos/seed/civic/96/96"; 37.6213,-122.3790,"SFO","https://picsum.photos/seed/sfo/96/96"]
+```
+
+---
+
+## 5. Discovering spots along a route — `markcut spots`
+
+Don't hand-pick coordinates for a route video — **discover** interesting stops
+with the spots CLI. It samples points along a route (Directions API) and ranks
+nearby places by `rating × log(ratings)`, then hands you ready-to-paste
+markdown.
+
+```bash
+npx @lalalic/markcut spots --waypoints "37.8199,-122.4783;37.6213,-122.3790" \
+  --travelMode DRIVING --limit 8 --photos --markdown
+```
+
+| flag | meaning |
+|---|---|
+| `--waypoints "lat,lng;lat,lng"` | route endpoints (semicolon-separated) — required |
+| `--travelMode DRIVING\|WALKING\|BICYCLING` | how you travel the route (default DRIVING) |
+| `--limit <n>` | max spots after ranking (default 8) |
+| `--photos` | attach a photo URL per spot (becomes `waypoint.media`) |
+| `--markdown` | print a copy-paste `waypoints:[...]` line to stderr |
+| `--output spots.json` | also save the full JSON |
+
+**Agent workflow — the tool only discovers, you compose:**
+
+1. Get route endpoints from the user's media/GPS or pick two landmarks.
+2. `markcut spots --waypoints "..." --photos --markdown`
+3. Pick the 2–5 spots that fit the narrative arc (opening, highlights, ending).
+4. Build a `map` storyboard with those `waypoints` + `script` narration.
+5. `markcut preview` to check, `markcut render` to export.
+
+---
+
+## 6. Markdown examples (copy-paste)
+
+### 6.1 Simple route clip with narration
+
+Map + narration play together inside a `layout:parallel` scene; scenes are
+sequenced by the root `layout:series`:
+
+```md
+# video
+width:1080 height:1920 layout:series transition:fade transitionTime:0.5
+
+## The-Drive
+layout:parallel
+- script "We leave the Golden Gate and head down to the airport."
+- map view:route duration:6 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"]
+```
+
+### 6.2 Establishing dolly → cinematic chase (two scenes)
+
+```md
+# video
+width:1080 height:1920 layout:series transition:fade
+
+## Opening-Dive-In
+layout:parallel
+- script "High above San Francisco, then we dive into the streets."
+- map view:overview mapType:satellite duration:4 camera:{zoom:tween(6, 12, easeInOut)}
+
+## Chase-The-Road
+layout:parallel
+- script "The camera chases the route 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"]
+```
+
+### 6.3 Street-level: pan, then walk
+
+```md
+# video
+width:1080 height:1920 layout:series transition:fade
+
+## On-The-Street-Pan
+layout:parallel
+- script "And here we are, right on the sidewalk."
+- 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)}
+
+## A-Quick-Walk
+layout:parallel
+- script "A short stroll down the block."
+- map view:streetview duration:6 streetView:{route:[{lat:37.7793,lng:-122.4193},{lat:37.7785,lng:-122.4185},{lat:37.7777,lng:-122.4178}], radius:50, pov:{heading:tween(0, 40, easeInOut), pitch:-5}}
+```
+
+### 6.4 Full route-vlog recipe (5 scenes)
+
+Combine everything for a complete vlog arc: **establish → route with photos →
+cinematic → street view pan → walk**.
+
+```md
+# video
+width:1080 height:1920 layout:series transition:fade transitionTime:0.5
+
+## Satellite-Dolly
+layout:parallel
+- script "We begin high above San Francisco, then dive into the city."
+- map view:overview mapType:satellite duration:4 center:{lat:37.7749,lng:-122.4194} camera:{zoom:tween(6, 12, easeInOut)}
+
+## Route
+layout:parallel
+- script "The route winds from the Golden Gate to the airport, with photos at each stop."
+- map view:route duration:6 travelMode:DRIVING mapType:roadmap routeColor:"#4285F4" routeWeight:5 routeMarker:"🚗" waypoints:[37.8199,-122.4783,"Golden Gate","https://picsum.photos/seed/gg-bridge/96/96"; 37.7749,-122.4194,"Civic Center","https://picsum.photos/seed/civic-center/96/96"; 37.6213,-122.3790,"SFO","https://picsum.photos/seed/sfo-airport/96/96"]
+
+## Cinematic
+layout:parallel
+- script "The camera tilts and chases the road like a drone."
+- map view:cinematic duration:8 travelMode:DRIVING mapType:satellite routeMarker:"🚗" cinematic:{mode:flyAlong, headingFollow:true, tilt:tween(0, 45, easeInOut)} camera:{zoom:tween(12, 14, easeInOut)} waypoints:[37.8199,-122.4783,"Golden Gate"; 37.7749,-122.4194,"Civic Center"; 37.6213,-122.3790,"SFO"]
+
+## Street-View
+layout:parallel
+- script "And finally, we land on the street itself."
+- map view:streetview duration:8 streetView:{location:{lat:37.7793,lng:-122.4193}, radius:50, pov:{heading:tween(200, 420, easeInOut), pitch:tween(0, -8)}, zoom:tween(0, 0.6, easeInOut)}
+
+## Street-View-Walk
+layout:parallel
+- script "A quick walk down the block."
+- map view:streetview duration:6 streetView:{route:[{lat:37.7793,lng:-122.4193},{lat:37.7785,lng:-122.4185},{lat:37.7777,lng:-122.4178},{lat:37.7769,lng:-122.4170}], radius:50, pov:{heading:tween(0, 40, easeInOut), pitch:-5}}
+```
+
+---
+
+## 7. Recipe — build a route/vlog clip
+
+1. **Get the route** — endpoints from the user's media/GPS, or two landmarks.
+2. **Discover spots** — `markcut spots --waypoints "lat,lng;lat,lng" --photos --markdown`; pick 2–5 that tell the story.
+3. **Pick views per scene** — overview (establish) → route with photo stops (log) → cinematic (transition) → streetview (arrive).
+4. **Write narration** — one `script` per scene; the resolver sizes the clip from the TTS audio automatically (don't hand-set durations that depend on script length).
+5. **Verify** — `markcut preview book.md` (screenshot key frames, check map/pano loaded and captions), then `markcut render book.md --output out/vlog.mp4`.
+
+---
+
+## 8. Tips & pitfalls
+
+- **Map + narration**: put `- map ...` and `- script "..."` as sibling bullets in a `layout:parallel` scene so they play together. If the scene is `series`, narration plays alone first and the map shows nothing while speaking.
+- **Street View coverage is not universal** — a spot may have no panorama. If a `streetview` scene looks dark/empty, pick a nearby well-covered location or use `view:cinematic` instead.
+- **Route maps need ≥2 waypoints**; a single point falls back to a plain marker.
+- **Media assets** — photo thumbnails (`waypoint.media`), images, bgm etc. should live in the md file's folder (e.g. `assets/...`). See the asset-path rules in `markdown-descriptive.md` §14 (verify enforces md-folder-relative paths).
+- **Don't set duration from script length** — the resolver computes it from TTS audio.
+- **3D (Map3D)** is experimental and opt-in (`cinematic.fallback:"none"`); the default `fallback:"2d"` gives the safe drone-chase look.

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
 
@@ -265,6 +268,8 @@ all src paths are resolved relative to the markdown file's location. For example
 ### 14. verify
 - all assets path are resolved relative to the markdown file's location. 
 - `npx @lalalic/markcut verify book.md` to verify the markdown document is valid and can be rendered. It will check for missing required fields, invalid values, and other common issues.
+- **Asset-relative check**: `verify` also walks the tree and requires every local asset (image/video/audio/subtitle `.vtt`, map `waypoints[].media`, root `subtitle.src`) to be a path **relative to the markdown file's folder** — no absolute paths (`/...`), no `..` escapes. Remote URLs (`https:`, `data:`, etc.) and inline subtitle text are fine. Violations are printed as actionable errors (exit 1) so an agent can fix the source and re-run.
+- `markcut render` runs the same check on the compiled tree right before rendering and aborts with errors instead of failing mid-render with 404s.
 
 
 ## Template Variables

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