@markdy/astro 0.8.1 → 0.8.3

package/README.md

@@ -7,6 +7,7 @@
 - **SSR placeholder** — correctly-sized `<div>` prevents layout shift before hydration
 - **Viewport-triggered hydration** — `IntersectionObserver` with 100px root margin
 - **View Transition compatible** — re-observes elements on `astro:page-load`
+- **Semantic node cards** — inherits renderer SVG glyphs for technical node kinds
 - **Zero config** — pass your MarkdyScript code as a prop
 
 ## Installation
@@ -36,7 +37,7 @@ Astro integration provides an island wrapper for lazy client-side hydration.
 import { Markdy } from "@markdy/astro";
 
 const code = `
-  scene "Request" theme=midnight width=800 height=400
+  scene "Request" theme=paper width=800 height=400
   browser Web
   service API
   beat main:
@@ -54,7 +55,7 @@ const code = `
 import { Markdy } from "@markdy/astro";
 
 export const code = `
-  scene "Request" theme=midnight width=600 height=300
+  scene "Request" theme=paper width=600 height=300
   browser Web
   service API
   beat main:
@@ -77,7 +78,9 @@ export const code = `
 | `autoplay` | `boolean` | `true` | Start playing on hydration |
 | `loop` | `boolean` | `true` | Loop the animation when it ends |
 | `copyright` | `boolean` | `true` | Show a "Powered by Markdy" badge below the animation |
-| `progressBar` | `boolean` | `true` | Show a rainbow progress bar around the viewport border |
+| `progressBar` | `boolean` | `true` | Deprecated compatibility flag for the rainbow scene-boundary progress bar |
+| `sceneBoundaryProgress` | `boolean` | `progressBar` | Preferred flag for the rainbow scene-boundary progress bar |
+| `playbackRate` | `number` | `1` | Timeline speed multiplier |
 | `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.1",
+  "version": "0.8.3",
   "description": "Astro island component for animated MarkdyScript architecture diagrams.",
   "license": "MIT",
   "type": "module",
@@ -37,7 +37,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/renderer-dom": "0.8.1"
+    "@markdy/renderer-dom": "0.8.3"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/Markdy.astro

@@ -42,6 +42,10 @@ export interface Props {
   copyright?: boolean;
   /** Show a rainbow progress bar around the viewport border. Defaults to true. */
   progressBar?: boolean;
+  /** Preferred flag to show/hide rainbow progress at scene boundary. Defaults to true. */
+  sceneBoundaryProgress?: boolean;
+  /** Playback speed multiplier. Defaults to 1. */
+  playbackRate?: number;
   class?: string;
   /**
    * Short human-readable title for the animation.
@@ -66,6 +70,8 @@ const {
   loop = true,
   copyright = true,
   progressBar = true,
+  sceneBoundaryProgress,
+  playbackRate = 1,
   class: className,
   title = "Markdy animation",
   description,
@@ -80,6 +86,8 @@ const {
   data-markdy-loop={String(loop)}
   data-markdy-copyright={String(copyright)}
   data-markdy-progress-bar={String(progressBar)}
+  data-markdy-scene-boundary-progress={String(sceneBoundaryProgress ?? progressBar)}
+  data-markdy-playback-rate={String(playbackRate)}
   role="img"
   aria-label={title}
   aria-busy="true"
@@ -243,6 +251,8 @@ const {
     const loop = el.dataset.markdyLoop !== "false";
     const copyright = el.dataset.markdyCopyright !== "false";
     const progressBar = el.dataset.markdyProgressBar !== "false";
+    const sceneBoundaryProgress = el.dataset.markdySceneBoundaryProgress !== "false";
+    const playbackRate = Number(el.dataset.markdyPlaybackRate ?? "1");
 
     // Code-split: renderer-dom is NOT part of the initial page bundle.
     const { createPlayer } = await import("@markdy/renderer-dom");
@@ -251,7 +261,17 @@ const {
     // async import resolves, so there is no flash of empty content.
     el.innerHTML = "";
 
-    createPlayer({ container: el, code, assets, autoplay, loop, copyright, progressBar });
+    createPlayer({
+      container: el,
+      code,
+      assets,
+      autoplay,
+      loop,
+      copyright,
+      progressBar,
+      sceneBoundaryProgress,
+      playbackRate: Number.isFinite(playbackRate) && playbackRate > 0 ? playbackRate : 1,
+    });
 
     el.dataset.markdyInit = "done";
     el.removeAttribute("aria-busy");