@markdy/renderer-dom 0.8.4 → 0.8.6

package/dist/index.js

@@ -199,6 +199,10 @@ var EDGE_STYLES = {
   event: { dash: "2 6", marker: "dot" },
   dependency: { dash: "4 4", marker: "none" }
 };
+var INITIAL_CAMERA_TRANSFORM = "translate(0px, 0px) scale(1)";
+var DEFAULT_FRAME_ZOOM = 1.18;
+var MAX_FRAME_ZOOM = 1.75;
+var FRAME_PADDING = 88;
 function dedupePoints(points) {
   const out = [];
   for (const p of points) {
@@ -362,6 +366,27 @@ function animateEdgeReveal(runtime, startMs, durMs) {
   }
   return anims;
 }
+function computeFrameTransform(targetIds, nodes, bounds, requestedZoom = DEFAULT_FRAME_ZOOM) {
+  const targets = new Set(targetIds);
+  const selected = nodes.filter((node) => targets.has(node.id));
+  if (selected.length === 0) return void 0;
+  const framesEveryNode = selected.length === nodes.length && nodes.every((node) => targets.has(node.id));
+  if (framesEveryNode) return INITIAL_CAMERA_TRANSFORM;
+  const zoom = Number.isFinite(requestedZoom) && requestedZoom > 0 ? requestedZoom : DEFAULT_FRAME_ZOOM;
+  const minX = Math.min(...selected.map((node) => node.x));
+  const minY = Math.min(...selected.map((node) => node.y));
+  const maxX = Math.max(...selected.map((node) => node.x + node.width));
+  const maxY = Math.max(...selected.map((node) => node.y + node.height));
+  const frameWidth = Math.max(1, maxX - minX + FRAME_PADDING * 2);
+  const frameHeight = Math.max(1, maxY - minY + FRAME_PADDING * 2);
+  const fitScale = Math.min(bounds.width / frameWidth, bounds.height / frameHeight);
+  const scale = Math.max(1, Math.min(zoom, fitScale, MAX_FRAME_ZOOM));
+  const centerX = (minX + maxX) / 2;
+  const centerY = (minY + maxY) / 2;
+  const tx = Math.round((bounds.width / 2 - centerX * scale) * 10) / 10;
+  const ty = Math.round((bounds.height / 2 - centerY * scale) * 10) / 10;
+  return `translate(${tx}px, ${ty}px) scale(${Math.round(scale * 1e3) / 1e3})`;
+}
 function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds) {
   const anims = [];
   const nodeById = new Map(nodes.map((n) => [n.id, n]));
@@ -371,6 +396,9 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
   const laneByPair = /* @__PURE__ */ new Map();
   const svg = ensureEdgeLayer(scene);
   const sceneId = `md-${Math.random().toString(36).slice(2, 8)}`;
+  let cameraTransform = scene.style.transform || INITIAL_CAMERA_TRANSFORM;
+  scene.style.transformOrigin = "0 0";
+  scene.style.transform = cameraTransform;
   anims.push(
     titleEl.animate(
       [{ opacity: 0, transform: "translateY(-6px)" }, { opacity: 1, transform: "translateY(0)" }],
@@ -418,19 +446,37 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
       continue;
     }
     if (cue.kind === "focus") {
+      const zoom = typeof cue.params.zoom === "number" && cue.params.zoom > 0 ? cue.params.zoom : 1.03;
       for (const id of cue.targets) {
         const el = nodeEls.get(id);
         if (!el) continue;
         el.dataset.focused = "1";
         anims.push(
           el.animate(
-            [{ transform: "scale(1)" }, { transform: "scale(1.03)" }, { transform: "scale(1)" }],
+            [{ transform: "scale(1)" }, { transform: `scale(${zoom})` }, { transform: "scale(1)" }],
             { duration: durMs, delay: startMs, fill: "forwards" }
           )
         );
       }
       continue;
     }
+    if (cue.kind === "frame") {
+      const nextTransform = computeFrameTransform(
+        cue.targets,
+        nodes,
+        bounds,
+        typeof cue.params.zoom === "number" ? cue.params.zoom : DEFAULT_FRAME_ZOOM
+      );
+      if (!nextTransform) continue;
+      anims.push(
+        scene.animate(
+          [{ transform: cameraTransform }, { transform: nextTransform }],
+          { duration: durMs, delay: startMs, fill: "forwards", easing: "ease-in-out" }
+        )
+      );
+      cameraTransform = nextTransform;
+      continue;
+    }
     if (cue.kind === "flow" && cue.segments?.[0]) {
       const seg = cue.segments[0];
       const from = nodeById.get(seg.from);
@@ -577,6 +623,7 @@ function ensureNodeStyles(doc) {
   left: 44px;
   top: 26px;
   right: 44px;
+  z-index: 130;
   font-size: 32px;
   font-weight: 700;
   line-height: 1.2;
@@ -808,6 +855,20 @@ function createNodeMediaEl(doc, node, assets) {
   appendGlyph(doc, wrap, ICONS[iconKeyForNode(node)] ?? ICONS.service);
   return wrap;
 }
+function applyDeclaredNodeStyle(el, style) {
+  if (!style) return;
+  const fill = typeof style.fill === "string" ? style.fill : void 0;
+  const surface = typeof style.surface === "string" ? style.surface : fill;
+  const surfaceRaised = typeof style.surfaceRaised === "string" ? style.surfaceRaised : surface ? `color-mix(in srgb, ${surface} 90%, #ffffff 10%)` : void 0;
+  const stroke = typeof style.stroke === "string" ? style.stroke : void 0;
+  const text = typeof style.text === "string" ? style.text : void 0;
+  const accent = typeof style.accent === "string" ? style.accent : void 0;
+  if (surface) el.style.setProperty("--md-node-surface", surface);
+  if (surfaceRaised) el.style.setProperty("--md-node-surface-raised", surfaceRaised);
+  if (stroke) el.style.setProperty("--md-hairline", stroke);
+  if (text) el.style.color = text;
+  if (accent) el.style.setProperty("--md-role-color", accent);
+}
 function createNodeEl(node, theme, assets) {
   const el = document.createElement("div");
   el.className = "markdy-node markdy-scene-node";
@@ -819,6 +880,7 @@ function createNodeEl(node, theme, assets) {
   el.style.setProperty("--md-node-h", `${node.height}px`);
   const roleColor = theme.roles[node.role] ?? theme.accent;
   el.style.setProperty("--md-role-color", roleColor);
+  applyDeclaredNodeStyle(el, node.style);
   const typeText = node.kind.replace(/_/g, " ");
   el.dataset.kind = node.kind;
   el.dataset.icon = iconKeyForNode(node);
@@ -876,11 +938,46 @@ function ensureSceneStyles(doc) {
   opacity: 0.62;
 }
 .markdy-scene-content { z-index: 2; }
+.markdy-camera-layer {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+  transform-origin: 0 0;
+  transform: translate(0px, 0px) scale(1);
+}
 .markdy-scene-node-layer {
   position: absolute;
   inset: 0;
   overflow: visible;
 }
+.markdy-beat-caption-layer {
+  position: absolute;
+  left: 44px;
+  right: 44px;
+  bottom: 30px;
+  z-index: 140;
+  display: grid;
+  justify-items: center;
+  align-items: end;
+  pointer-events: none;
+}
+.markdy-beat-caption {
+  grid-area: 1 / 1;
+  max-width: min(720px, 100%);
+  padding: 10px 16px;
+  border-radius: 999px;
+  color: var(--md-text);
+  background: color-mix(in srgb, var(--md-surface-raised) 88%, transparent);
+  backdrop-filter: blur(6px);
+  box-shadow:
+    0 14px 32px -20px var(--md-shadow, rgba(2, 6, 23, 0.55)),
+    inset 0 0 0 1px var(--md-hairline, color-mix(in srgb, var(--md-border) 50%, transparent));
+  font: 600 14px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
+  text-align: center;
+  opacity: 0;
+  transform: translateY(8px);
+  will-change: opacity, transform;
+}
 `;
   doc.head.appendChild(style);
 }
@@ -905,6 +1002,42 @@ function applyThemeToScene(scene, theme) {
 }
 
 // src/diagram.ts
+function createBeatCaptionLayer(doc, beats) {
+  const layer = doc.createElement("div");
+  layer.className = "markdy-beat-caption-layer";
+  for (const beat of beats) {
+    if (!beat.label) continue;
+    const caption = doc.createElement("div");
+    caption.className = "markdy-beat-caption";
+    caption.textContent = beat.label;
+    caption.dataset.beat = beat.name;
+    layer.appendChild(caption);
+  }
+  return layer;
+}
+function buildBeatCaptionAnimations(beats, layer) {
+  const anims = [];
+  const captions = Array.from(layer.querySelectorAll(".markdy-beat-caption"));
+  for (const beat of beats) {
+    if (!beat.label) continue;
+    const caption = captions.find((item) => item.dataset.beat === beat.name);
+    if (!caption) continue;
+    const startMs = beat.start * 1e3;
+    const durMs = Math.max((beat.end - beat.start) * 1e3, 650);
+    anims.push(
+      caption.animate(
+        [
+          { opacity: 0, transform: "translateY(8px)" },
+          { opacity: 1, transform: "translateY(0)", offset: 0.16 },
+          { opacity: 1, transform: "translateY(0)", offset: 0.82 },
+          { opacity: 0, transform: "translateY(-4px)" }
+        ],
+        { duration: durMs, delay: startMs, fill: "forwards", easing: "ease-out" }
+      )
+    );
+  }
+  return anims;
+}
 function createDiagram(opts) {
   const {
     container,
@@ -1000,11 +1133,16 @@ function createDiagram(opts) {
   sceneContent.className = "markdy-scene-content";
   Object.assign(sceneContent.style, { position: "absolute", inset: "0" });
   scene.appendChild(sceneContent);
+  const titleEl = createTitleEl(plan.title);
+  sceneContent.appendChild(titleEl);
+  const cameraLayer = document.createElement("div");
+  cameraLayer.className = "markdy-camera-layer";
+  sceneContent.appendChild(cameraLayer);
   const nodeLayer = document.createElement("div");
   nodeLayer.className = "markdy-scene-node-layer";
-  sceneContent.appendChild(nodeLayer);
-  const titleEl = createTitleEl(plan.title);
-  nodeLayer.appendChild(titleEl);
+  cameraLayer.appendChild(nodeLayer);
+  const captionLayer = createBeatCaptionLayer(document, plan.beats);
+  sceneContent.appendChild(captionLayer);
   const nodeEls = /* @__PURE__ */ new Map();
   for (const node of plan.nodes) {
     const el = createNodeEl(node, plan.theme, assets);
@@ -1018,10 +1156,13 @@ function createDiagram(opts) {
   scaleScene();
   const resizeObserver = new ResizeObserver(scaleScene);
   resizeObserver.observe(viewport);
-  const allAnims = buildCueAnimations(plan.cues, nodeEls, plan.nodes, plan.theme, sceneContent, titleEl, {
-    width: plan.meta.width,
-    height: plan.meta.height
-  });
+  const allAnims = [
+    ...buildCueAnimations(plan.cues, nodeEls, plan.nodes, plan.theme, cameraLayer, titleEl, {
+      width: plan.meta.width,
+      height: plan.meta.height
+    }),
+    ...buildBeatCaptionAnimations(plan.beats, captionLayer)
+  ];
   for (const anim of allAnims) {
     anim.pause();
     anim.currentTime = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "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.4"
+    "@markdy/core": "0.8.6"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.4"
+    "@markdy/stdlib-systems": "0.8.6"
   },
   "scripts": {
     "build": "tsup",