@markdy/mdx 0.8.0 → 0.8.2

package/README.md

@@ -4,6 +4,7 @@ MDX integration for MarkdyScript with Lighthouse-safe defaults:
 
 - `remarkMarkdy` converts fenced code blocks (` ```markdy `) into a player component.
 - `MarkdyPlayer` hydrates only when visible and lazy-loads `@markdy/renderer-dom`.
+- Rendered diagrams use the same semantic SVG node cards as `@markdy/renderer-dom`.
 
 ## Install
 
@@ -48,7 +49,7 @@ export const mdxComponents = {
 Then write Markdown:
 
 ````md
-```markdy width=800 height=400 bg="#07111f" autoplay=false loop=false
+```markdy width=800 height=400 bg="#07111f" autoplay=false loop=false playback_rate=0.5 scene_boundary_progress=false
 scene "Request" theme=midnight width=800 height=400
 browser Web
 service API
@@ -63,3 +64,13 @@ beat main:
 - Default transform options set `autoplay=false`, `loop=false`, `progressBar=false`.
 - Runtime player does not import renderer code until the block enters viewport.
 - Placeholder is SSR-safe and keeps stable layout ratio to avoid CLS.
+
+## Fence Metadata
+
+Fenced block metadata is passed as props to `MarkdyPlayer`. Snake-case aliases are normalized for renderer options:
+
+| Metadata | Prop | Description |
+|---|---|---|
+| `progress_bar=false` | `progressBar={false}` | Deprecated compatibility flag for the scene-boundary progress bar |
+| `scene_boundary_progress=false` | `sceneBoundaryProgress={false}` | Preferred flag for the scene-boundary progress bar |
+| `playback_rate=0.5` | `playbackRate={0.5}` | Timeline speed multiplier |

package/dist/index.d.ts

@@ -11,11 +11,13 @@ type MarkdyPlayerProps = {
     loop?: boolean | string;
     copyright?: boolean | string;
     progressBar?: boolean | string;
+    sceneBoundaryProgress?: boolean | string;
+    playbackRate?: number | string;
     className?: string;
     title?: string;
     description?: string;
 };
-declare function MarkdyPlayer({ code, width, height, bg, assets, autoplay, loop, copyright, progressBar, className, title, description, }: MarkdyPlayerProps): react.JSX.Element;
+declare function MarkdyPlayer({ code, width, height, bg, assets, autoplay, loop, copyright, progressBar, sceneBoundaryProgress, playbackRate, className, title, description, }: MarkdyPlayerProps): react.JSX.Element;
 
 type MarkdyFenceDefaults = Partial<{
     width: number;

package/dist/index.js

@@ -38,6 +38,8 @@ function MarkdyPlayer({
   loop = false,
   copyright = false,
   progressBar = false,
+  sceneBoundaryProgress,
+  playbackRate = 1,
   className,
   title = "Markdy animation",
   description
@@ -48,6 +50,8 @@ function MarkdyPlayer({
   const resolvedLoop = coerceBoolean(loop, false);
   const resolvedCopyright = coerceBoolean(copyright, false);
   const resolvedProgressBar = coerceBoolean(progressBar, false);
+  const resolvedSceneBoundaryProgress = coerceBoolean(sceneBoundaryProgress, resolvedProgressBar);
+  const resolvedPlaybackRate = coerceNumber(playbackRate, 1);
   const rootRef = useRef(null);
   const playerRef = useRef(null);
   const hydratedRef = useRef(false);
@@ -75,7 +79,9 @@ function MarkdyPlayer({
               autoplay: forceAutoplay || resolvedAutoplay,
               loop: resolvedLoop,
               copyright: resolvedCopyright,
-              progressBar: resolvedProgressBar
+              progressBar: resolvedProgressBar,
+              sceneBoundaryProgress: resolvedSceneBoundaryProgress,
+              playbackRate: resolvedPlaybackRate > 0 ? resolvedPlaybackRate : 1
             });
             root.dataset.markdyInit = "done";
             root.removeAttribute("aria-busy");
@@ -115,7 +121,16 @@ function MarkdyPlayer({
       playerRef.current?.destroy();
       playerRef.current = null;
     };
-  }, [assets, code, resolvedAutoplay, resolvedCopyright, resolvedLoop, resolvedProgressBar]);
+  }, [
+    assets,
+    code,
+    resolvedAutoplay,
+    resolvedCopyright,
+    resolvedLoop,
+    resolvedProgressBar,
+    resolvedSceneBoundaryProgress,
+    resolvedPlaybackRate
+  ]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -211,6 +226,8 @@ function parseMetaValue(raw) {
 }
 function normalizeMetaKey(key) {
   if (key === "progress_bar") return "progressBar";
+  if (key === "scene_boundary_progress") return "sceneBoundaryProgress";
+  if (key === "playback_rate") return "playbackRate";
   return key;
 }
 function parseMeta(meta) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@markdy/mdx",
-  "version": "0.8.0",
-  "description": "MDX integration plugin and lightweight React player for Markdy.",
+  "version": "0.8.2",
+  "description": "MDX plugin and lightweight React player for animated Markdy diagrams.",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -22,8 +22,9 @@
     "markdy",
     "mdx",
     "remark",
-    "react",
-    "animation"
+    "diagram-as-code",
+    "architecture-diagram",
+    "react"
   ],
   "author": "Hoang Yell <hoangyell@gmail.com> (https://hoangyell.com)",
   "homepage": "https://markdy.com",
@@ -40,7 +41,7 @@
   },
   "dependencies": {
     "unist-util-visit": "^5.0.0",
-    "@markdy/renderer-dom": "0.8.0"
+    "@markdy/renderer-dom": "0.8.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",