@markdy/renderer-dom 0.1.0 → 0.1.1

package/dist/index.js

@@ -234,6 +234,7 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
       const assetDef = assetDefs[assetName];
       if (assetDef?.type === "icon") {
         const span = document.createElement("span");
+        span.className = "iconify";
         span.style.display = "inline-block";
         span.style.fontSize = `${def.size ?? 32}px`;
         span.style.lineHeight = "1";
@@ -245,6 +246,9 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
         img.src = assetOverrides[assetName] ?? assetDef?.value ?? "";
         img.alt = assetName;
         img.style.display = "block";
+        img.style.maxWidth = "100%";
+        img.style.maxHeight = "200px";
+        img.style.objectFit = "contain";
         img.setAttribute("draggable", "false");
         el = img;
       }
@@ -530,20 +534,24 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
       bubble.style.opacity = "0";
       Object.assign(bubble.style, {
         position: "absolute",
-        bottom: "calc(100% + 8px)",
+        bottom: "calc(100% + 10px)",
         left: "50%",
         transform: `translateX(-50%) scale(${inverseScale})`,
         transformOrigin: "center bottom",
         background: "white",
         border: "2px solid #222",
-        borderRadius: "10px",
-        padding: "4px 10px",
-        fontFamily: "sans-serif",
-        fontSize: "14px",
+        borderRadius: "12px",
+        padding: "6px 14px",
+        fontFamily: "system-ui, sans-serif",
+        fontSize: "15px",
+        lineHeight: "1.3",
         whiteSpace: "nowrap",
+        maxWidth: "220px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
         pointerEvents: "none",
         zIndex: "10",
-        boxShadow: "0 2px 6px rgba(0,0,0,0.15)"
+        boxShadow: "0 2px 8px rgba(0,0,0,0.12)"
       });
       const tail = document.createElement("span");
       Object.assign(tail.style, {
@@ -553,8 +561,8 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
         transform: "translateX(-50%)",
         width: "0",
         height: "0",
-        borderLeft: "6px solid transparent",
-        borderRight: "6px solid transparent",
+        borderLeft: "7px solid transparent",
+        borderRight: "7px solid transparent",
         borderTop: "10px solid #222"
       });
       bubble.appendChild(tail);
@@ -593,6 +601,7 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
         projectile = img;
       } else {
         const span = document.createElement("span");
+        span.className = "iconify";
         span.dataset.icon = assetDef.value;
         span.style.fontSize = "32px";
         span.style.lineHeight = "1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Web Animations API renderer for MarkdyScript scenes.",
   "license": "MIT",
   "type": "module",
@@ -23,7 +23,11 @@
     "animation",
     "web-animations-api",
     "renderer",
-    "dom"
+    "dom",
+    "declarative-animation",
+    "motion",
+    "framer-motion-alternative",
+    "gsap-alternative"
   ],
   "author": "Hoang Yell <hoangyell@gmail.com> (https://hoangyell.com)",
   "homepage": "https://markdy.com",
@@ -39,11 +43,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.1.0"
+    "@markdy/core": "0.1.1"
   },
   "devDependencies": {
-    "tsup": "^8.3.0",
-    "typescript": "^5.4.0"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "build": "tsup",