@markdy/astro 0.8.16 → 0.8.18

package/README.md

@@ -47,7 +47,7 @@ const code = `
 `;
 ---
 
-<Markdy code={code} width={800} height={400} bg="#07111f" autoplay />
+<Markdy code={code} width={800} height={400} bg="#07111f" autoplay controls />
 ```
 
 ### In MDX
@@ -64,7 +64,7 @@ export const code = `
     Web -> API "GET /users"
 `;
 
-<Markdy code={code} width={600} height={300} bg="#07111f" autoplay />
+<Markdy code={code} width={600} height={300} bg="#07111f" autoplay controls />
 ```
 
 ## Props
@@ -83,6 +83,7 @@ export const code = `
 | `sceneBoundaryProgress` | `boolean` | `progressBar` | Preferred flag for the rainbow scene-boundary progress bar |
 | `playbackRate` | `number` | `1` | Normalized timeline speed multiplier; `1` is Markdy's normal pace |
 | `interactiveViewport` | `boolean` | `false` | Enable wheel zoom and drag pan after hydration |
+| `controls` | `boolean` | `false` | Show a compact toolbar with play/pause, restart, speed, and view reset controls; also enables viewport interaction |
 | `class` | `string` | — | CSS class for the outer wrapper |
 
 > **Tip:** Match `width`, `height`, and `bg` props to your `scene` declaration values to avoid a visual flash on hydration.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/astro",
-  "version": "0.8.16",
+  "version": "0.8.18",
   "description": "Astro island component for diagram-native animated MarkdyScript architecture diagrams.",
   "license": "MIT",
   "type": "module",
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/renderer-dom": "0.8.16"
+    "@markdy/renderer-dom": "0.8.18"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/Markdy.astro

@@ -48,6 +48,8 @@ export interface Props {
   playbackRate?: number;
   /** Enable wheel zoom and drag pan after hydration. Defaults to false. */
   interactiveViewport?: boolean;
+  /** Show built-in playback and viewport controls. Also enables viewport interaction. Defaults to false. */
+  controls?: boolean;
   class?: string;
   /**
    * Short human-readable title for the animation.
@@ -74,7 +76,8 @@ const {
   progressBar = true,
   sceneBoundaryProgress,
   playbackRate = 1,
-  interactiveViewport = false,
+  controls = false,
+  interactiveViewport = controls,
   class: className,
   title = "Markdy animation",
   description,
@@ -99,6 +102,7 @@ const codeB64 =
   data-markdy-scene-boundary-progress={String(sceneBoundaryProgress ?? progressBar)}
   data-markdy-playback-rate={String(playbackRate)}
   data-markdy-interactive-viewport={String(interactiveViewport)}
+  data-markdy-controls={String(controls)}
   role="img"
   aria-label={title}
   aria-busy="true"
@@ -275,7 +279,8 @@ const codeB64 =
     const progressBar = el.dataset.markdyProgressBar !== "false";
     const sceneBoundaryProgress = el.dataset.markdySceneBoundaryProgress !== "false";
     const playbackRate = Number(el.dataset.markdyPlaybackRate ?? "1");
-    const interactiveViewport = el.dataset.markdyInteractiveViewport === "true";
+    const controls = el.dataset.markdyControls === "true";
+    const interactiveViewport = controls || el.dataset.markdyInteractiveViewport === "true";
 
     // Code-split: renderer-dom is NOT part of the initial page bundle.
     const { createDiagram } = await import("@markdy/renderer-dom");
@@ -295,6 +300,7 @@ const codeB64 =
       sceneBoundaryProgress,
       playbackRate: Number.isFinite(playbackRate) && playbackRate > 0 ? playbackRate : 1,
       interactiveViewport,
+      controls,
     });
 
     el.dataset.markdyInit = "done";