@markdy/renderer-dom 0.5.7 → 0.6.0

package/README.md

@@ -5,10 +5,12 @@ Web Animations API renderer for [MarkdyScript](../../docs/SYNTAX.md) scenes. Tra
 ## Features
 
 - **Browser-native** — Web Animations API + CSS transforms, no Canvas or GSAP
-- **Emoji stick figures** — `figure` actor type with articulatable limbs (punch, kick, rotate_part)
+- **Emoji stick figures** — `figure` actor type with articulatable limbs, shoulder/hip joints, and body-part rig
+- **Expressive gestures** — built-in `wave`, `nod`, `jump`, `bounce`, and multi-part `pose` actions
 - **Seek-safe** — manual `currentTime` control enables reliable `seek()` in any direction
 - **Face expressions** — instant emoji face swaps that work correctly on seek-back
 - **Speech bubbles** — auto-positioned bubbles with fade-in/fade-out
+- **Z-index layering** — `z` modifier for actor depth ordering
 - **Single dependency** — only `@markdy/core`
 
 ## Installation

package/dist/index.js

@@ -29,7 +29,7 @@ function createFigureEl(def) {
   const skinColor = def.args[0] || "#ffdbac";
   const isFemale = def.args[1] === "f";
   const startFace = def.args[2] || (isFemale ? "\u{1F642}" : "\u{1F636}");
-  const ink = "#2a2a2a";
+  const ink = "currentColor";
   const WRAP_W = 80;
   const FACE_FS = 40;
   const SHIRT_FS = isFemale ? 48 : 44;
@@ -39,6 +39,7 @@ function createFigureEl(def) {
   const shY = Math.round(SHIRT_FS * 0.28);
   const ARM_W = 36, ARM_H = 22;
   const LEG_H = 54, LEG_STICK_H = 34;
+  const JOINT_SIZE = 6;
   const wrap = document.createElement("div");
   Object.assign(wrap.style, {
     position: "relative",
@@ -62,13 +63,13 @@ function createFigureEl(def) {
   });
   const neck = document.createElement("div");
   Object.assign(neck.style, {
-    width: "8px",
-    height: "8px",
+    width: "10px",
+    height: "10px",
     background: skinColor,
-    borderRadius: "3px",
+    borderRadius: "4px",
     flexShrink: "0",
-    marginTop: "-2px",
-    marginBottom: "-2px",
+    marginTop: "-3px",
+    marginBottom: "-3px",
     zIndex: "4"
   });
   const shirtRow = document.createElement("div");
@@ -91,6 +92,12 @@ function createFigureEl(def) {
     pointerEvents: "none"
   });
   shirtRow.appendChild(torso);
+  const shoulderL = buildJoint("left", skinColor, JOINT_SIZE, shLx, shY, WRAP_W);
+  const shoulderR = buildJoint("right", skinColor, JOINT_SIZE, shRx, shY, WRAP_W);
+  shoulderL.dataset.figShoulderL = "";
+  shoulderR.dataset.figShoulderR = "";
+  shirtRow.appendChild(shoulderL);
+  shirtRow.appendChild(shoulderR);
   const armHandEmoji = isFemale ? "\u{1F485}" : "\u{1F91C}";
   shirtRow.appendChild(
     buildArm("left", armHandEmoji, skinColor, {
@@ -112,21 +119,57 @@ function createFigureEl(def) {
       flipFist: false
     })
   );
+  const hipRow = document.createElement("div");
+  Object.assign(hipRow.style, {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    flexShrink: "0",
+    overflow: "visible"
+  });
+  const hipBridge = document.createElement("div");
+  Object.assign(hipBridge.style, {
+    width: "28px",
+    height: "4px",
+    background: skinColor,
+    borderRadius: "2px",
+    marginBottom: "1px",
+    zIndex: "3"
+  });
+  hipRow.appendChild(hipBridge);
   const legsRow = document.createElement("div");
   Object.assign(legsRow.style, {
     display: "flex",
     justifyContent: "center",
     gap: "10px",
     flexShrink: "0",
-    overflow: "visible"
+    overflow: "visible",
+    position: "relative"
   });
-  legsRow.append(
-    buildLeg(true, isFemale, ink, LEG_H, LEG_STICK_H),
-    buildLeg(false, isFemale, ink, LEG_H, LEG_STICK_H)
-  );
-  wrap.append(faceEl, neck, shirtRow, legsRow);
+  const legL = buildLeg(true, isFemale, ink, skinColor, LEG_H, LEG_STICK_H, JOINT_SIZE);
+  const legR = buildLeg(false, isFemale, ink, skinColor, LEG_H, LEG_STICK_H, JOINT_SIZE);
+  legsRow.append(legL, legR);
+  hipRow.appendChild(legsRow);
+  wrap.append(faceEl, neck, shirtRow, hipRow);
   return wrap;
 }
+function buildJoint(side, skinColor, size, anchorX, anchorY, wrapW) {
+  const joint = document.createElement("div");
+  const isLeft = side === "left";
+  Object.assign(joint.style, {
+    position: "absolute",
+    width: `${size}px`,
+    height: `${size}px`,
+    borderRadius: "50%",
+    background: skinColor,
+    ...isLeft ? { right: `${wrapW - anchorX - size / 2}px` } : { left: `${anchorX - size / 2}px` },
+    top: `${anchorY - size / 2}px`,
+    zIndex: "5",
+    pointerEvents: "none"
+  });
+  return joint;
+}
 function buildArm(side, handEmoji, skinColor, g) {
   const arm = document.createElement("div");
   const ds = arm.dataset;
@@ -150,7 +193,7 @@ function buildArm(side, handEmoji, skinColor, g) {
     ...isLeft ? { right: "5px" } : { left: "5px" },
     top: `${g.h / 2 - 2}px`,
     width: "18px",
-    height: "3px",
+    height: "4px",
     background: skinColor,
     borderRadius: "2px"
   });
@@ -169,7 +212,7 @@ function buildArm(side, handEmoji, skinColor, g) {
   arm.append(stick, fist);
   return arm;
 }
-function buildLeg(isLeft, isFemale, ink, legH, stickH) {
+function buildLeg(isLeft, isFemale, ink, skinColor, legH, stickH, jointSize) {
   const leg = document.createElement("div");
   const ds = leg.dataset;
   ds[isLeft ? "figLegL" : "figLegR"] = "";
@@ -181,17 +224,44 @@ function buildLeg(isLeft, isFemale, ink, legH, stickH) {
     transform: "rotate(0deg)",
     overflow: "visible"
   });
+  const hipJoint = document.createElement("div");
+  hipJoint.dataset[isLeft ? "figHipL" : "figHipR"] = "";
+  Object.assign(hipJoint.style, {
+    position: "absolute",
+    width: `${jointSize}px`,
+    height: `${jointSize}px`,
+    borderRadius: "50%",
+    background: skinColor,
+    left: "50%",
+    top: `-${jointSize / 2}px`,
+    transform: "translateX(-50%)",
+    zIndex: "3",
+    pointerEvents: "none"
+  });
   const stick = document.createElement("div");
   Object.assign(stick.style, {
     position: "absolute",
-    width: "3px",
+    width: "4px",
     height: `${stickH}px`,
     background: ink,
-    borderRadius: "1px",
+    borderRadius: "2px",
     left: "50%",
     top: "0",
     transform: "translateX(-50%)"
   });
+  const knee = document.createElement("div");
+  Object.assign(knee.style, {
+    position: "absolute",
+    width: "4px",
+    height: "4px",
+    borderRadius: "50%",
+    background: skinColor,
+    left: "50%",
+    top: `${stickH * 0.55}px`,
+    transform: "translateX(-50%)",
+    zIndex: "2",
+    pointerEvents: "none"
+  });
   const shoe = document.createElement("span");
   shoe.textContent = isFemale ? "\u{1F460}" : "\u{1F45F}";
   Object.assign(shoe.style, {
@@ -208,7 +278,7 @@ function buildLeg(isLeft, isFemale, ink, legH, stickH) {
   } else {
     shoe.style.right = "0";
   }
-  leg.append(stick, shoe);
+  leg.append(hipJoint, stick, knee, shoe);
   return leg;
 }
 var PART_SEL = {
@@ -286,10 +356,24 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
   el.style.transformOrigin = "center center";
   el.style.transform = tx(stateFrom(def));
   el.style.opacity = String(def.opacity ?? 1);
+  if (def.z !== void 0) el.style.zIndex = String(def.z);
   return el;
 }
 
 // src/animations.ts
+function isSceneDark(scene) {
+  const bg = scene.style.background || "white";
+  let hex = bg.trim().replace(/^#/, "");
+  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  if (hex.length === 6) {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return 0.299 * r + 0.587 * g + 0.114 * b <= 140;
+  }
+  const dark = { black: true, "#000": true, "#000000": true };
+  return dark[bg.toLowerCase()] ?? false;
+}
 function buildAnimations(ast, actorEls, scene, assetOverrides, faceSwaps) {
   const anims = [];
   const states = /* @__PURE__ */ new Map();
@@ -529,6 +613,11 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
     case "say": {
       const text = String(ev.params.text ?? "");
       const inverseScale = 1 / (s.scale || 1);
+      const sceneDark = isSceneDark(scene);
+      const bubbleBg = sceneDark ? "#1e2530" : "white";
+      const bubbleBorder = sceneDark ? "#475569" : "#222";
+      const bubbleText = sceneDark ? "#e2e8f0" : "#222";
+      const bubbleShadow = sceneDark ? "0 2px 8px rgba(0,0,0,0.35)" : "0 2px 8px rgba(0,0,0,0.12)";
       const bubble = document.createElement("div");
       bubble.textContent = text;
       bubble.style.opacity = "0";
@@ -538,9 +627,9 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
         left: "50%",
         transform: `translateX(-50%) scale(${inverseScale})`,
         transformOrigin: "center bottom",
-        background: "white",
-        border: "2px solid #222",
-        color: "#222",
+        background: bubbleBg,
+        border: `2px solid ${bubbleBorder}`,
+        color: bubbleText,
         borderRadius: "12px",
         padding: "6px 14px",
         fontFamily: "system-ui, sans-serif",
@@ -552,7 +641,7 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
         textOverflow: "ellipsis",
         pointerEvents: "none",
         zIndex: "10",
-        boxShadow: "0 2px 8px rgba(0,0,0,0.12)"
+        boxShadow: bubbleShadow
       });
       const tail = document.createElement("span");
       Object.assign(tail.style, {
@@ -564,7 +653,7 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
         height: "0",
         borderLeft: "7px solid transparent",
         borderRight: "7px solid transparent",
-        borderTop: "10px solid #222"
+        borderTop: `10px solid ${bubbleBorder}`
       });
       bubble.appendChild(tail);
       el.style.overflow = "visible";
@@ -584,6 +673,135 @@ function buildAction(ev, el, s, baseOpts, delayMs, durMs, ast, states, scene, as
       );
       break;
     }
+    // ── pose ────────────────────────────────────────────────────────────────
+    // Sets multiple body parts to target angles simultaneously.
+    // Usage: @1.0: hero.pose(arm_left=45, arm_right=-45, leg_left=10, dur=0.4)
+    case "pose": {
+      const poseParts = ["arm_left", "arm_right", "leg_left", "leg_right", "head", "body"];
+      for (const partName of poseParts) {
+        if (typeof ev.params[partName] !== "number") continue;
+        const pSel = PART_SEL[partName];
+        if (!pSel) continue;
+        const pEl = el.querySelector(pSel);
+        if (!pEl) continue;
+        const fromDeg = readRotation(pEl);
+        const toDeg = ev.params[partName];
+        anims.push(
+          pEl.animate(
+            [
+              { transform: `rotate(${fromDeg}deg)` },
+              { transform: `rotate(${toDeg}deg)` }
+            ],
+            { ...baseOpts, fill: "forwards" }
+          )
+        );
+        pEl.style.transform = pEl.style.transform.replace(
+          /rotate\([^)]*\)/,
+          `rotate(${toDeg}deg)`
+        );
+      }
+      break;
+    }
+    // ── wave ────────────────────────────────────────────────────────────────
+    // Built-in wave gesture: raises arm, oscillates, returns.
+    // Usage: @2.0: hero.wave(side=right, dur=0.8)
+    case "wave": {
+      const wSide = String(ev.params.side ?? "right");
+      const wArmEl = el.querySelector(
+        wSide === "left" ? "[data-fig-arm-l]" : "[data-fig-arm-r]"
+      );
+      if (!wArmEl) break;
+      const wRest = readRotation(wArmEl);
+      const wUp = wSide === "left" ? 70 : -70;
+      const wMid1 = wSide === "left" ? 50 : -50;
+      const wMid2 = wSide === "left" ? 70 : -70;
+      anims.push(
+        wArmEl.animate(
+          [
+            { transform: `rotate(${wRest}deg)`, offset: 0 },
+            { transform: `rotate(${wUp}deg)`, offset: 0.2 },
+            { transform: `rotate(${wMid1}deg)`, offset: 0.4 },
+            { transform: `rotate(${wMid2}deg)`, offset: 0.55 },
+            { transform: `rotate(${wMid1}deg)`, offset: 0.7 },
+            { transform: `rotate(${wMid2}deg)`, offset: 0.85 },
+            { transform: `rotate(${wRest}deg)`, offset: 1 }
+          ],
+          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
+        )
+      );
+      break;
+    }
+    // ── jump ────────────────────────────────────────────────────────────────
+    // Jumps the actor up with squash/stretch effect.
+    // Usage: @3.0: hero.jump(height=30, dur=0.5)
+    case "jump": {
+      const jHeight = typeof ev.params.height === "number" ? ev.params.height : 30;
+      anims.push(
+        el.animate(
+          [
+            { transform: tx(s), offset: 0 },
+            { transform: tx({ ...s, scale: s.scale * 0.9 }), offset: 0.1 },
+            { transform: tx({ ...s, y: s.y - jHeight, scale: s.scale * 1.1 }), offset: 0.45 },
+            { transform: tx({ ...s, y: s.y - jHeight * 0.3, scale: s.scale * 1.05 }), offset: 0.7 },
+            { transform: tx({ ...s, scale: s.scale * 0.92 }), offset: 0.88 },
+            { transform: tx(s), offset: 1 }
+          ],
+          { ...baseOpts, easing: "ease-in-out" }
+        )
+      );
+      break;
+    }
+    // ── nod ─────────────────────────────────────────────────────────────────
+    // Nods the head down and back up. Figure actors only.
+    // Usage: @2.0: hero.nod(dur=0.4)
+    case "nod": {
+      const nHeadEl = el.querySelector("[data-fig-head]");
+      if (!nHeadEl) break;
+      const nRest = readRotation(nHeadEl);
+      const nDown = 15;
+      anims.push(
+        nHeadEl.animate(
+          [
+            { transform: `rotate(${nRest}deg)`, offset: 0 },
+            { transform: `rotate(${nDown}deg)`, offset: 0.35 },
+            { transform: `rotate(${nRest}deg)`, offset: 0.65 },
+            { transform: `rotate(${nDown}deg)`, offset: 0.8 },
+            { transform: `rotate(${nRest}deg)`, offset: 1 }
+          ],
+          { ...baseOpts, easing: "ease-in-out", fill: "forwards" }
+        )
+      );
+      break;
+    }
+    // ── bounce ──────────────────────────────────────────────────────────────
+    // Bounces the actor vertically with diminishing amplitude.
+    // Usage: @1.0: hero.bounce(intensity=15, count=3, dur=0.6)
+    case "bounce": {
+      const bIntensity = typeof ev.params.intensity === "number" ? ev.params.intensity : 15;
+      const bCount = typeof ev.params.count === "number" ? ev.params.count : 3;
+      const keyframes = [{ transform: tx(s), offset: 0 }];
+      for (let bi = 0; bi < bCount; bi++) {
+        const amp = bIntensity * Math.pow(0.55, bi);
+        const baseOffset = (bi + 0.5) / (bCount + 0.5);
+        const peakOffset = Math.min(baseOffset, 0.98);
+        const valleyOffset = Math.min(baseOffset + 0.25 / (bCount + 0.5), 0.99);
+        keyframes.push({
+          transform: tx({ ...s, y: s.y - amp }),
+          offset: peakOffset
+        });
+        if (bi < bCount - 1) {
+          keyframes.push({
+            transform: tx(s),
+            offset: valleyOffset
+          });
+        }
+      }
+      keyframes.push({ transform: tx(s), offset: 1 });
+      anims.push(
+        el.animate(keyframes, { ...baseOpts, easing: "ease-out" })
+      );
+      break;
+    }
     // ── throw ───────────────────────────────────────────────────────────────
     case "throw": {
       const assetName = String(ev.params.asset ?? "");

package/package.json

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