@markdy/renderer-dom 0.8.3 → 0.8.5

package/README.md

@@ -37,9 +37,9 @@ This package consumes parsed AST and drives DOM + Web Animations API timelines.
 ## Usage
 
 ```typescript
-import { createPlayer } from "@markdy/renderer-dom";
+import { createDiagram } from "@markdy/renderer-dom";
 
-const player = createPlayer({
+const diagram = createDiagram({
   container: document.getElementById("scene")!,
   code: `
     scene "Request" theme=paper
@@ -53,15 +53,15 @@ const player = createPlayer({
 });
 
 // Playback control
-player.pause();
-player.seek(1.5);   // jump to 1.5 seconds
-player.play();
-player.destroy();    // clean up DOM + cancel animations
+diagram.pause();
+diagram.seek(1.5);   // jump to 1.5 seconds
+diagram.play();
+diagram.destroy();    // clean up DOM + cancel animations
 ```
 
 ## API
 
-### `createPlayer(options: PlayerOptions): Player`
+### `createDiagram(options: DiagramOptions): Diagram`
 
 | Option | Type | Default | Description |
 |---|---|---|---|
@@ -77,7 +77,7 @@ player.destroy();    // clean up DOM + cancel animations
 | `onTimeUpdate` | `(seconds: number, durationSeconds: number) => void` | — | Called whenever playback or seek changes the current time |
 | `onPlayStateChange` | `(playing: boolean) => void` | — | Called when playback starts or pauses |
 
-### `Player`
+### `Diagram`
 
 | Method | Description |
 |---|---|
@@ -97,8 +97,8 @@ player.destroy();    // clean up DOM + cancel animations
 
 ```
 src/
-  index.ts        — Barrel exports (createPlayer)
-  player.ts       — Public API, rAF loop, progress bar, responsive scaling
+  index.ts        — Barrel exports (createDiagram)
+  diagram.ts      — Public API, rAF loop, progress bar, responsive scaling
   nodes.ts        — Node element factory + scene title
   edges.ts        — Flow-edge SVG runtime, routing, and cue animations
   geometry/

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { BeatRange, Diagnostic } from '@markdy/core';
 
 /**
- * Diagram-native Markdy player — renders RenderPlan via WAAPI.
+ * Markdy diagram runtime — renders a RenderPlan via WAAPI.
  */
 
-interface PlayerOptions {
+interface DiagramOptions {
     container: HTMLElement;
     code: string;
     autoplay?: boolean;
@@ -26,7 +26,7 @@ interface PlayerOptions {
     onTimeUpdate?: (seconds: number, durationSeconds: number) => void;
     onPlayStateChange?: (playing: boolean) => void;
 }
-interface Player {
+interface Diagram {
     play(): void;
     pause(): void;
     seek(seconds: number): void;
@@ -39,6 +39,6 @@ interface Player {
     seekToBeat(name: string): void;
     destroy(): void;
 }
-declare function createPlayer(opts: PlayerOptions): Player;
+declare function createDiagram(opts: DiagramOptions): Diagram;
 
-export { type Player, type PlayerOptions, createPlayer };
+export { type Diagram, type DiagramOptions, createDiagram };

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/player.ts
+// src/diagram.ts
 import { parseAndCompile } from "@markdy/core";
 
 // src/geometry/rect.ts
@@ -810,8 +810,8 @@ function createNodeMediaEl(doc, node, assets) {
 }
 function createNodeEl(node, theme, assets) {
   const el = document.createElement("div");
-  el.className = "markdy-node markdy-scene-actor";
-  el.dataset.actor = node.id;
+  el.className = "markdy-node markdy-scene-node";
+  el.dataset.node = node.id;
   el.dataset.role = node.role;
   el.style.left = `${node.x}px`;
   el.style.top = `${node.y}px`;
@@ -876,7 +876,7 @@ function ensureSceneStyles(doc) {
   opacity: 0.62;
 }
 .markdy-scene-content { z-index: 2; }
-.markdy-scene-actor-layer {
+.markdy-scene-node-layer {
   position: absolute;
   inset: 0;
   overflow: visible;
@@ -904,8 +904,8 @@ function applyThemeToScene(scene, theme) {
   scene.dataset.markdyTheme = theme.name;
 }
 
-// src/player.ts
-function createPlayer(opts) {
+// src/diagram.ts
+function createDiagram(opts) {
   const {
     container,
     code,
@@ -1000,15 +1000,15 @@ function createPlayer(opts) {
   sceneContent.className = "markdy-scene-content";
   Object.assign(sceneContent.style, { position: "absolute", inset: "0" });
   scene.appendChild(sceneContent);
-  const actorLayer = document.createElement("div");
-  actorLayer.className = "markdy-scene-actor-layer";
-  sceneContent.appendChild(actorLayer);
+  const nodeLayer = document.createElement("div");
+  nodeLayer.className = "markdy-scene-node-layer";
+  sceneContent.appendChild(nodeLayer);
   const titleEl = createTitleEl(plan.title);
-  actorLayer.appendChild(titleEl);
+  nodeLayer.appendChild(titleEl);
   const nodeEls = /* @__PURE__ */ new Map();
   for (const node of plan.nodes) {
     const el = createNodeEl(node, plan.theme, assets);
-    actorLayer.appendChild(el);
+    nodeLayer.appendChild(el);
     nodeEls.set(node.id, el);
   }
   function scaleScene() {
@@ -1054,7 +1054,7 @@ function createPlayer(opts) {
     if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
     rafId = requestAnimationFrame(rafTick);
   }
-  const player = {
+  const diagram = {
     play() {
       if (isPlaying) return;
       isPlaying = true;
@@ -1096,10 +1096,10 @@ function createPlayer(opts) {
     },
     seekToBeat(name) {
       const beat = plan.beats.find((b) => b.name === name);
-      if (beat) player.seek(beat.start);
+      if (beat) diagram.seek(beat.start);
     },
     destroy() {
-      player.pause();
+      diagram.pause();
       for (const anim of allAnims) anim.cancel();
       resizeObserver.disconnect();
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
@@ -1109,15 +1109,15 @@ function createPlayer(opts) {
   };
   viewport.style.cursor = "pointer";
   viewport.addEventListener("click", () => {
-    if (isPlaying) player.pause();
+    if (isPlaying) diagram.pause();
     else {
       if (!loop && sceneMs >= totalDurationMs) sceneMs = 0;
-      player.play();
+      diagram.play();
     }
   });
-  if (autoplay) player.play();
-  return player;
+  if (autoplay) diagram.play();
+  return diagram;
 }
 export {
-  createPlayer
+  createDiagram
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Browser renderer for animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -43,14 +43,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.3"
+    "@markdy/core": "0.8.5"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.3"
+    "@markdy/stdlib-systems": "0.8.5"
   },
   "scripts": {
     "build": "tsup",