@markdy/renderer-dom 1.0.23 → 1.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +18 -10
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -4,17 +4,15 @@ Web Animations API renderer for [MarkdyScript](../../docs/SYNTAX.md) scenes. Tra
4
4
 
5
5
  ## Features
6
6
 
7
- - **Browser-native** — Web Animations API + CSS transforms, no Canvas or GSAP
8
- - **Auto-layout diagrams** — renders positioned nodes and orthogonal, obstacle-aware edges from a compiled `RenderPlan`
9
- - **Flow edges** — `->` request, `<-` response, `~>` event, `--` dependency, each with its own stroke, plus a pulse that travels the edge as it draws
10
- - **Beat-driven cues** — `show`, `hide`, `glow`, and `focus`, sequenced by named beats
11
- - **Focused diagram visuals** — flowchart shapes, tree buses, state self-loops, sequence lifelines/messages, constellation orbits, group zones, and annotations
12
- - **Semantic node cards** — compact SVG glyphs for browsers, services, gateways, queues, workers, databases, storage, CDN, security, platform, and more
7
+ - **Browser-native** — Web Animations API + CSS transforms, no Canvas or GSAP (~24 KB minzipped)
8
+ - **17 Diagram Layout Topologies** — `architecture`, `flowchart`, `tree`, `sequence`, `state`, `layers`, `nested`, `swimlane`, `timeline`, `gantt`, `medallion`, `flywheel`, `constellation`, `quadrant`, `pyramid`, `radar`, `venn`
9
+ - **Dynamic Theme Switching** — live runtime switching across 8 semantic themes (`paper`, `editorial`, `midnight`, `blueprint`, `graphite`, `nebula`, `terminal`, `sketchy`)
10
+ - **Flow edges** — `->` request, `<-` response, `~>` event, `--` dependency, each with its own stroke, plus animated traveling pulse
11
+ - **Beat-driven cues** — `show`, `hide`, `glow`, `focus`, and `frame` camera zooms, sequenced by named beats
12
+ - **Media Exporters** — zero-dep animated GIF89a exporter with LZW compression and Figma-ready vector SVG export
13
13
  - **Seek-safe** — manual `currentTime` control enables reliable `seek()` in any direction
14
14
  - **Playback-rate controls** — set normalized timeline speed to slow down or speed up diagrams without rebuilding animations
15
- - **Interactive viewport** — opt into wheel zoom and drag pan while click-to-pause stays available
16
- - **Embed controls** — opt into only the playback, timeline, viewport, export, and sharing controls a scene needs
17
- - **Semantic themes** — `paper`, `editorial`, `nebula`, `midnight`, `blueprint`, and `graphite`, with per-role node and edge colors
15
+ - **Interactive viewport** — wheel zoom, drag pan, and double-click reset with responsive auto-fit
18
16
  - **Single dependency** — only `@markdy/core`
19
17
 
20
18
  ## Installation
@@ -34,7 +32,14 @@ This package consumes parsed AST and drives DOM + Web Animations API timelines.
34
32
  ## Output preview
35
33
 
36
34
  <p align="center">
37
- <img src="https://raw.githubusercontent.com/HoangYell/markdy-com/main/website/public/images/scene-kubernetes-cluster.webp" alt="Markdy DOM Renderer Output (Kubernetes Blueprint)" width="900" />
35
+ <a href="https://markdy.com/playground/">
36
+ <img src="https://raw.githubusercontent.com/HoangYell/markdy-com/main/website/public/images/scene-lakehouse-medallion.webp" alt="Markdy DOM Renderer Lakehouse Medallion Output" width="900" />
37
+ </a>
38
+ </p>
39
+ <p align="center">
40
+ <a href="https://markdy.com/playground/">
41
+ <img src="https://raw.githubusercontent.com/HoangYell/markdy-com/main/website/public/images/scene-nebula-constellation.webp" alt="Markdy DOM Renderer Nebula Constellation Output" width="900" />
42
+ </a>
38
43
  </p>
39
44
 
40
45
  ## Usage
@@ -98,6 +103,9 @@ diagram.destroy(); // clean up DOM + cancel animations
98
103
  | `currentTime()` | Current playback position in seconds |
99
104
  | `duration()` | Total scene duration in seconds |
100
105
  | `isPlaying()` | Whether the scene is currently playing |
106
+ | `setTheme(themeName)` | Switch theme dynamically at runtime across all 8 supported themes |
107
+ | `exportGif(options?)` | Render zero-dependency animated GIF89a with LZW compression |
108
+ | `exportSvg()` | Export Figma-compatible vector SVG snapshot of the current frame |
101
109
  | `beats()` | Named `beat` ranges, in author order (empty if none) |
102
110
  | `seekToBeat(name)` | Seek to the start of a named beat; no-op if the name doesn't match |
103
111
  | `destroy()` | Remove DOM elements and cancel all animations |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@markdy/renderer-dom",
3
- "version": "1.0.23",
3
+ "version": "1.0.25",
4
4
  "description": "Browser renderer for diagram-native animated MarkdyScript architecture diagrams, built on the Web Animations API.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -45,14 +45,14 @@
45
45
  },
46
46
  "dependencies": {
47
47
  "html2canvas": "^1.4.1",
48
- "@markdy/core": "1.0.23"
48
+ "@markdy/core": "1.0.25"
49
49
  },
50
50
  "devDependencies": {
51
51
  "jsdom": "^29.1.1",
52
52
  "tsup": "^8.5.1",
53
53
  "typescript": "^5.9.3",
54
54
  "vitest": "^4.1.7",
55
- "@markdy/stdlib-systems": "1.0.23"
55
+ "@markdy/stdlib-systems": "1.0.25"
56
56
  },
57
57
  "scripts": {
58
58
  "build": "tsup",