@markdy/renderer-dom 0.3.0 → 0.5.1

package/dist/index.d.ts

@@ -24,6 +24,10 @@ interface PlayerOptions {
     code: string;
     assets?: Record<string, string>;
     autoplay?: boolean;
+    /** Loop the animation when it reaches the end. Defaults to true. */
+    loop?: boolean;
+    /** Show a small "Powered by Markdy" badge below the animation. Defaults to true. */
+    copyright?: boolean;
 }
 interface Player {
     play(): void;

package/dist/index.js

@@ -637,18 +637,62 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
 
 // src/player.ts
 function createPlayer(opts) {
-  const { container, code, assets: assetOverrides = {}, autoplay = false } = opts;
+  const { container, code, assets: assetOverrides = {}, autoplay = true, loop = true, copyright = true } = opts;
   const ast = parse(code);
+  const viewport = document.createElement("div");
+  Object.assign(viewport.style, {
+    position: "relative",
+    width: "100%",
+    aspectRatio: `${ast.meta.width} / ${ast.meta.height}`,
+    overflow: "hidden"
+  });
+  container.appendChild(viewport);
+  let badge = null;
+  if (copyright) {
+    badge = document.createElement("a");
+    badge.href = "https://markdy.com";
+    badge.target = "_blank";
+    badge.rel = "noopener noreferrer";
+    badge.textContent = "Powered by Markdy";
+    Object.assign(badge.style, {
+      display: "block",
+      textAlign: "right",
+      fontSize: "10px",
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      color: "#999",
+      textDecoration: "none",
+      padding: "3px 6px 0",
+      opacity: "0.7",
+      transition: "opacity 0.2s"
+    });
+    badge.addEventListener("mouseenter", () => {
+      badge.style.opacity = "1";
+    });
+    badge.addEventListener("mouseleave", () => {
+      badge.style.opacity = "0.7";
+    });
+    container.appendChild(badge);
+  }
   const scene = document.createElement("div");
   Object.assign(scene.style, {
-    position: "relative",
+    position: "absolute",
+    top: "0",
+    left: "0",
     width: `${ast.meta.width}px`,
     height: `${ast.meta.height}px`,
     background: ast.meta.bg,
     overflow: "hidden",
-    userSelect: "none"
+    userSelect: "none",
+    transformOrigin: "0 0"
   });
-  container.appendChild(scene);
+  viewport.appendChild(scene);
+  function scaleScene() {
+    const s = viewport.clientWidth / ast.meta.width;
+    scene.style.transform = `scale(${s})`;
+  }
+  scaleScene();
+  const resizeObserver = new ResizeObserver(scaleScene);
+  resizeObserver.observe(viewport);
   const actorEls = /* @__PURE__ */ new Map();
   for (const [name, def] of Object.entries(ast.actors)) {
     const el = createActorEl(name, def, ast.assets, assetOverrides);
@@ -704,12 +748,16 @@ function createPlayer(opts) {
     lastRafTs = timestamp;
     const totalMs = (ast.meta.duration ?? 0) * 1e3;
     if (totalMs > 0 && sceneMs >= totalMs) {
-      sceneMs = totalMs;
-      applyCurrentTime();
-      isPlaying = false;
-      lastRafTs = null;
-      rafId = null;
-      return;
+      if (loop) {
+        sceneMs = sceneMs % totalMs;
+      } else {
+        sceneMs = totalMs;
+        applyCurrentTime();
+        isPlaying = false;
+        lastRafTs = null;
+        rafId = null;
+        return;
+      }
     }
     applyCurrentTime();
     rafId = requestAnimationFrame(rafTick);
@@ -737,7 +785,9 @@ function createPlayer(opts) {
     destroy() {
       player.pause();
       for (const anim of allAnims) anim.cancel();
-      if (scene.parentNode === container) container.removeChild(scene);
+      resizeObserver.disconnect();
+      if (badge?.parentNode === container) container.removeChild(badge);
+      if (viewport.parentNode === container) container.removeChild(viewport);
     }
   };
   if (autoplay) player.play();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "description": "Web Animations API renderer for MarkdyScript scenes.",
   "license": "MIT",
   "type": "module",
@@ -43,7 +43,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.3.0"
+    "@markdy/core": "0.5.1"
   },
   "devDependencies": {
     "tsup": "^8.5.1",