@markdy/mdx 0.8.19 → 0.8.20

package/README.md

@@ -73,6 +73,9 @@ Fenced block metadata is passed as props to `MarkdyDiagram`. Snake-case aliases
 |---|---|---|
 | `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 |
+| `progress_color="#3b82f6"` | `progressColor="#3b82f6"` | Custom progress bar color or gradient |
 | `playback_rate=0.5` | `playbackRate={0.5}` | Normalized timeline speed multiplier; `1` is Markdy's normal pace |
 | `interactive_viewport=true` | `interactiveViewport={true}` | Enable wheel zoom and drag pan on the rendered viewport |
 | `controls=true` | `controls={true}` | Show a compact toolbar with play/pause, restart, speed, and view reset controls; also enables viewport interaction |
+
+> **Self-Contained MarkdyScript:** You can also declare `controls true`, `interactive true`, `progressColor "#3b82f6"`, `loop false`, etc. directly inside the Markdy code block without needing fence metadata attributes. Fence attributes act as explicit overrides.

package/dist/index.d.ts

@@ -12,6 +12,8 @@ type MarkdyDiagramProps = {
     copyright?: boolean | string;
     progressBar?: boolean | string;
     sceneBoundaryProgress?: boolean | string;
+    progressColor?: string;
+    progressBarColor?: string;
     playbackRate?: number | string;
     interactiveViewport?: boolean | string;
     controls?: boolean | string;
@@ -19,7 +21,7 @@ type MarkdyDiagramProps = {
     title?: string;
     description?: string;
 };
-declare function MarkdyDiagram({ code, width, height, bg, assets, autoplay, loop, copyright, progressBar, sceneBoundaryProgress, playbackRate, controls, interactiveViewport, className, title, description, }: MarkdyDiagramProps): react.JSX.Element;
+declare function MarkdyDiagram({ code, width, height, bg, assets, autoplay, loop, copyright, progressBar, sceneBoundaryProgress, progressColor, progressBarColor, playbackRate, controls, interactiveViewport, className, title, description, }: MarkdyDiagramProps): react.JSX.Element;
 
 type MarkdyFenceDefaults = Partial<{
     width: number;

package/dist/index.js

@@ -12,21 +12,21 @@ function scheduleBackgroundTask(work) {
   }
   globalThis.setTimeout(work, 0);
 }
-function coerceBoolean(value, fallback) {
+function coerceOptionalBoolean(value) {
   if (typeof value === "boolean") return value;
   if (typeof value === "string") {
-    if (value.toLowerCase() === "true") return true;
-    if (value.toLowerCase() === "false") return false;
+    if (value.toLowerCase() === "true" || value.toLowerCase() === "on") return true;
+    if (value.toLowerCase() === "false" || value.toLowerCase() === "off") return false;
   }
-  return fallback;
+  return void 0;
 }
-function coerceNumber(value, fallback) {
+function coerceOptionalNumber(value) {
   if (typeof value === "number") return value;
   if (typeof value === "string") {
     const parsed = Number(value);
-    if (!Number.isNaN(parsed)) return parsed;
+    if (!Number.isNaN(parsed) && parsed > 0) return parsed;
   }
-  return fallback;
+  return void 0;
 }
 function MarkdyDiagram({
   code,
@@ -34,28 +34,31 @@ function MarkdyDiagram({
   height = 400,
   bg = "#ffffff",
   assets = {},
-  autoplay = false,
-  loop = false,
-  copyright = false,
-  progressBar = false,
+  autoplay,
+  loop,
+  copyright,
+  progressBar,
   sceneBoundaryProgress,
-  playbackRate = 1,
-  controls = false,
-  interactiveViewport = controls,
+  progressColor,
+  progressBarColor,
+  playbackRate,
+  controls,
+  interactiveViewport,
   className,
   title = "Markdy animation",
   description
 }) {
-  const resolvedWidth = coerceNumber(width, 800);
-  const resolvedHeight = coerceNumber(height, 400);
-  const resolvedAutoplay = coerceBoolean(autoplay, false);
-  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 resolvedControls = coerceBoolean(controls, false);
-  const resolvedInteractiveViewport = resolvedControls || coerceBoolean(interactiveViewport, false);
+  const resolvedWidth = typeof width === "number" ? width : Number(width) || 800;
+  const resolvedHeight = typeof height === "number" ? height : Number(height) || 400;
+  const resolvedAutoplay = coerceOptionalBoolean(autoplay);
+  const resolvedLoop = coerceOptionalBoolean(loop);
+  const resolvedCopyright = coerceOptionalBoolean(copyright);
+  const resolvedProgressBar = typeof progressBar === "string" && progressBar !== "true" && progressBar !== "false" ? progressBar : coerceOptionalBoolean(progressBar);
+  const resolvedSceneBoundaryProgress = typeof sceneBoundaryProgress === "string" && sceneBoundaryProgress !== "true" && sceneBoundaryProgress !== "false" ? sceneBoundaryProgress : coerceOptionalBoolean(sceneBoundaryProgress);
+  const resolvedProgressColor = typeof progressColor === "string" ? progressColor : typeof progressBarColor === "string" ? progressBarColor : typeof resolvedSceneBoundaryProgress === "string" ? resolvedSceneBoundaryProgress : typeof resolvedProgressBar === "string" ? resolvedProgressBar : void 0;
+  const resolvedPlaybackRate = coerceOptionalNumber(playbackRate);
+  const resolvedControls = coerceOptionalBoolean(controls);
+  const resolvedInteractiveViewport = coerceOptionalBoolean(interactiveViewport);
   const rootRef = useRef(null);
   const diagramRef = useRef(null);
   const hydratedRef = useRef(false);
@@ -80,12 +83,13 @@ function MarkdyDiagram({
               container: root,
               code,
               assets,
-              autoplay: forceAutoplay || resolvedAutoplay,
+              autoplay: forceAutoplay ? true : resolvedAutoplay,
               loop: resolvedLoop,
               copyright: resolvedCopyright,
               progressBar: resolvedProgressBar,
               sceneBoundaryProgress: resolvedSceneBoundaryProgress,
-              playbackRate: resolvedPlaybackRate > 0 ? resolvedPlaybackRate : 1,
+              progressColor: resolvedProgressColor,
+              playbackRate: resolvedPlaybackRate,
               interactiveViewport: resolvedInteractiveViewport,
               controls: resolvedControls
             });
@@ -135,6 +139,7 @@ function MarkdyDiagram({
     resolvedLoop,
     resolvedProgressBar,
     resolvedSceneBoundaryProgress,
+    resolvedProgressColor,
     resolvedPlaybackRate,
     resolvedInteractiveViewport,
     resolvedControls
@@ -235,6 +240,7 @@ function parseMetaValue(raw) {
 function normalizeMetaKey(key) {
   if (key === "progress_bar") return "progressBar";
   if (key === "scene_boundary_progress") return "sceneBoundaryProgress";
+  if (key === "progress_color" || key === "progress_bar_color") return "progressColor";
   if (key === "playback_rate") return "playbackRate";
   if (key === "interactive_viewport") return "interactiveViewport";
   return key;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/mdx",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "description": "MDX plugin and lightweight React component for diagram-native animated Markdy diagrams.",
   "license": "MIT",
   "type": "module",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "unist-util-visit": "^5.0.0",
-    "@markdy/renderer-dom": "0.8.19"
+    "@markdy/renderer-dom": "0.8.20"
   },
   "peerDependencies": {
     "react": ">=18.0.0",