@markdy/mdx 0.8.3 → 0.8.4

package/README.md

@@ -2,8 +2,8 @@
 
 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`.
+- `remarkMarkdy` converts fenced code blocks (` ```markdy `) into a diagram component.
+- `MarkdyDiagram` hydrates only when visible and lazy-loads `@markdy/renderer-dom`.
 - Rendered diagrams use the same semantic SVG node cards as `@markdy/renderer-dom`.
 
 ## Install
@@ -17,7 +17,7 @@ pnpm add @markdy/mdx react react-dom
 ```text
 @markdy/core -> @markdy/renderer-dom -> @markdy/mdx
 
-MDX integration transforms fenced markdy blocks into lazy player components.
+MDX integration transforms fenced markdy blocks into lazy diagram components.
 ```
 
 ## Output preview
@@ -33,16 +33,16 @@ MDX integration transforms fenced markdy blocks into lazy player components.
 import { remarkMarkdy } from "@markdy/mdx";
 
 export default {
-  remarkPlugins: [[remarkMarkdy, { componentName: "MarkdyPlayer" }]],
+  remarkPlugins: [[remarkMarkdy, { componentName: "MarkdyDiagram" }]],
 };
 ```
 
 ```tsx
 // shared MDX components map
-import { MarkdyPlayer } from "@markdy/mdx";
+import { MarkdyDiagram } from "@markdy/mdx";
 
 export const mdxComponents = {
-  MarkdyPlayer,
+  MarkdyDiagram,
 };
 ```
 
@@ -62,12 +62,12 @@ beat main:
 ## Performance Notes
 
 - Default transform options set `autoplay=false`, `loop=false`, `progressBar=false`.
-- Runtime player does not import renderer code until the block enters viewport.
+- Runtime diagram component 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:
+Fenced block metadata is passed as props to `MarkdyDiagram`. Snake-case aliases are normalized for renderer options:
 
 | Metadata | Prop | Description |
 |---|---|---|

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { Root } from 'mdast';
 
-type MarkdyPlayerProps = {
+type MarkdyDiagramProps = {
     code: string;
     width?: number | string;
     height?: number | string;
@@ -17,7 +17,7 @@ type MarkdyPlayerProps = {
     title?: string;
     description?: string;
 };
-declare function MarkdyPlayer({ code, width, height, bg, assets, autoplay, loop, copyright, progressBar, sceneBoundaryProgress, playbackRate, className, title, description, }: MarkdyPlayerProps): react.JSX.Element;
+declare function MarkdyDiagram({ code, width, height, bg, assets, autoplay, loop, copyright, progressBar, sceneBoundaryProgress, playbackRate, className, title, description, }: MarkdyDiagramProps): react.JSX.Element;
 
 type MarkdyFenceDefaults = Partial<{
     width: number;
@@ -36,4 +36,4 @@ type RemarkMarkdyOptions = {
 };
 declare function remarkMarkdy(opts?: RemarkMarkdyOptions): (tree: Root) => void;
 
-export { MarkdyPlayer, type MarkdyPlayerProps, type RemarkMarkdyOptions, remarkMarkdy };
+export { MarkdyDiagram, type MarkdyDiagramProps, type RemarkMarkdyOptions, remarkMarkdy };

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/player.tsx
+// src/diagram.tsx
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function scheduleBackgroundTask(work) {
@@ -28,7 +28,7 @@ function coerceNumber(value, fallback) {
   }
   return fallback;
 }
-function MarkdyPlayer({
+function MarkdyDiagram({
   code,
   width = 800,
   height = 400,
@@ -53,7 +53,7 @@ function MarkdyPlayer({
   const resolvedSceneBoundaryProgress = coerceBoolean(sceneBoundaryProgress, resolvedProgressBar);
   const resolvedPlaybackRate = coerceNumber(playbackRate, 1);
   const rootRef = useRef(null);
-  const playerRef = useRef(null);
+  const diagramRef = useRef(null);
   const hydratedRef = useRef(false);
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -70,9 +70,9 @@ function MarkdyPlayer({
           try {
             const renderer = await import("@markdy/renderer-dom");
             if (disposed) return;
-            const createPlayer = renderer.createPlayer;
+            const createDiagram = renderer.createDiagram;
             root.innerHTML = "";
-            playerRef.current = createPlayer({
+            diagramRef.current = createDiagram({
               container: root,
               code,
               assets,
@@ -89,7 +89,7 @@ function MarkdyPlayer({
             hydratedRef.current = false;
             root.dataset.markdyInit = "error";
             root.removeAttribute("aria-busy");
-            console.error("Failed to hydrate MarkdyPlayer", error);
+            console.error("Failed to hydrate MarkdyDiagram", error);
           }
         })();
       });
@@ -118,8 +118,8 @@ function MarkdyPlayer({
       disposed = true;
       observer?.disconnect();
       root.removeEventListener("click", onClick);
-      playerRef.current?.destroy();
-      playerRef.current = null;
+      diagramRef.current?.destroy();
+      diagramRef.current = null;
     };
   }, [
     assets,
@@ -254,7 +254,7 @@ function toCodeAttribute(code) {
   };
 }
 function remarkMarkdy(opts = {}) {
-  const componentName = opts.componentName ?? "MarkdyPlayer";
+  const componentName = opts.componentName ?? "MarkdyDiagram";
   const defaultProps = {
     autoplay: false,
     loop: false,
@@ -288,6 +288,6 @@ function remarkMarkdy(opts = {}) {
   };
 }
 export {
-  MarkdyPlayer,
+  MarkdyDiagram,
   remarkMarkdy
 };

package/package.json

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