@ignix-social/editor 0.1.20 → 0.1.22

package/src/runtime/blocks/stickman.js

@@ -0,0 +1,310 @@
+/*
+ * stickman.js — bloque de Ignix Editor: un muñeco de palitos que habla, gesticula y anda,
+ * dibujado en SVG como función pura del tiempo (igual que IgnixFrame).
+ *
+ * Portado de dos proyectos MIT, cuyos avisos se conservan:
+ *   - stickman-explainers, Copyright (c) 2026 21cabbagee (esqueleto, poses como ángulos).
+ *   - stickman-ia, Copyright (c) 2026 David García (IA Que Trabaja) y colaboradores
+ *     (poses think/shrug/cheer/arms_crossed/present/sad, caras paramétricas, peinados,
+ *     accesorios, ciclo de andar).
+ *   MIT License: se permite usar, copiar, modificar y distribuir con este aviso incluido.
+ *
+ * Uso (en el run() de IgnixFrame):
+ *   const S = IgnixStickman;
+ *   const hero = S.create(document.getElementById('stage-svg'), { color: '#D24D1E', hair: 'short' });
+ *   run({ id, duration, fps }, (t) => {
+ *     hero.draw({
+ *       x: 540, ground: 1500, scale: 1.1, facing: 1,
+ *       joints: S.poseAt(t, [[0, 'idle'], [1.2, 'wave'], [3, 'point']]),
+ *       face: S.faceAt(t, [[0, 'neutral'], [1.2, 'happy']]),
+ *       mouth: S.talkAt(t, [[0.4, 2.6], [3.1, 5.0]]),   // tramos en los que habla (su voz)
+ *       eyesOpen: S.blinkAt(t),
+ *     });
+ *   });
+ */
+(function () {
+  const DEG = Math.PI / 180;
+  const BONES = { torso: 178, neck: 20, head_r: 60, upper_arm: 98, forearm: 92, thigh: 118, shin: 112, shoulder_drop: 16, foot: 26, shoulder_w: 12 };
+  const LINE = 11;
+  const DEFAULT = { spine: -90, neck: 0, l_sh: 104, l_el: 8, r_sh: 76, r_el: -8, l_hip: 97, l_knee: 0, r_hip: 83, r_knee: 0 };
+  const JOINT_KEYS = Object.keys(DEFAULT);
+
+  const proj = (o, a, len) => [o[0] + Math.cos(a * DEG) * len, o[1] + Math.sin(a * DEG) * len];
+
+  // Cinemática directa: cadera en (0,0), mirando a la derecha. Ángulos en grados (0 = derecha, 90 = abajo).
+  function forward(j) {
+    const g = (k) => (j[k] ?? DEFAULT[k]);
+    const hip = [0, 0];
+    const spine = g('spine');
+    const chest = proj(hip, spine, BONES.torso);
+    const shoulder = proj(hip, spine, BONES.torso - BONES.shoulder_drop);
+    const neckA = spine + g('neck');
+    const headBase = proj(chest, neckA, BONES.neck);
+    const head = proj(headBase, neckA, BONES.head_r);
+    const p = { hip, chest, shoulder, head_base: headBase, head, head_tilt: neckA + 90 };
+    const ux = Math.cos(spine * DEG), uy = Math.sin(spine * DEG);
+    for (const [side, sgn] of [['l', -1], ['r', 1]]) {
+      const sp = [shoulder[0] - uy * BONES.shoulder_w * sgn, shoulder[1] + ux * BONES.shoulder_w * sgn];
+      const sh = g(`${side}_sh`);
+      const el = proj(sp, sh, BONES.upper_arm);
+      const wr = proj(el, sh + g(`${side}_el`), BONES.forearm);
+      const hp = g(`${side}_hip`);
+      const kn = proj(hip, hp, BONES.thigh);
+      const an = proj(kn, hp + g(`${side}_knee`), BONES.shin);
+      Object.assign(p, { [`${side}_shoulder`]: sp, [`${side}_elbow`]: el, [`${side}_wrist`]: wr, [`${side}_knee`]: kn, [`${side}_ankle`]: an });
+    }
+    return p;
+  }
+
+  // IK analítica de dos huesos: [ángulo del hombro, ángulo relativo del codo].
+  function ik(target, l1, l2, bend) {
+    const [tx, ty] = target;
+    let d = Math.hypot(tx, ty);
+    d = Math.max(1e-6, Math.min(d, l1 + l2 - 1e-6, Math.max(Math.abs(l1 - l2) + 1e-6, d)));
+    const base = Math.atan2(ty, tx);
+    const a = Math.acos(Math.max(-1, Math.min(1, (l1 * l1 + d * d - l2 * l2) / (2 * l1 * d))));
+    const sh = base - bend * a;
+    const el = [Math.cos(sh) * l1, Math.sin(sh) * l1];
+    const fa = Math.atan2(ty - el[1], tx - el[0]);
+    let rel = (fa - sh) / DEG;
+    rel = ((rel + 180) % 360 + 360) % 360 - 180;
+    return [sh / DEG, rel];
+  }
+  function arm(side, target, elbow) {
+    let best = null;
+    for (const bend of [1, -1]) {
+      const [sh, el] = ik(target, BONES.upper_arm, BONES.forearm, bend);
+      const ex = Math.cos(sh * DEG) * BONES.upper_arm, ey = Math.sin(sh * DEG) * BONES.upper_arm;
+      const score = elbow === 'down' ? ey : side === 'r' ? ex : -ex;
+      if (!best || score > best[0]) best = [score, sh, el];
+    }
+    return { [`${side}_sh`]: best[1], [`${side}_el`]: best[2] };
+  }
+  const pose = (kw) => ({ ...DEFAULT, ...kw });
+
+  // El brazo/pierna «r» es el de delante cuando mira a la derecha.
+  const POSES = {
+    idle: pose({}),
+    talk: pose({ r_sh: 62, r_el: -58, l_sh: 108, l_el: 14 }),
+    wave: pose({ r_sh: -28, r_el: -62, l_sh: 106, l_el: 10, neck: -4 }),
+    point: pose({ r_sh: -12, r_el: -4, l_sh: 108, l_el: 12 }),
+    think: pose({ neck: 6, ...arm('r', [36, -30], 'down'), ...arm('l', [34, 70], 'out') }),
+    shrug: pose({ neck: -7, l_sh: 148, l_el: 78, r_sh: 32, r_el: -78 }),
+    cheer: pose({ l_sh: -134, l_el: 14, r_sh: -46, r_el: -14, spine: -91 }),
+    arms_crossed: pose({ ...arm('r', [-40, 52], 'out'), ...arm('l', [44, 60], 'out') }),
+    present: pose({ r_sh: 18, r_el: -48, l_sh: 110, l_el: 12 }),
+    sad: pose({ spine: -88, neck: 20, l_sh: 96, l_el: 2, r_sh: 84, r_el: -2, l_hip: 95, r_hip: 85 }),
+    sit: pose({ spine: -94, l_sh: 74, l_el: -30, r_sh: 64, r_el: -40, l_hip: -6, l_knee: 92, r_hip: 4, r_knee: 84 }),
+    jump_crouch: pose({ spine: -80, l_sh: 128, l_el: -16, r_sh: 52, r_el: 18, l_hip: 62, l_knee: 78, r_hip: 48, r_knee: 80 }),
+    jump_air: pose({ spine: -92, l_sh: -118, l_el: 12, r_sh: -62, r_el: -12, l_hip: 112, l_knee: 26, r_hip: 70, r_knee: 34 }),
+  };
+
+  // Caras paramétricas (interpolables). eye: escala de ojos; brow_in: + preocupado, − enfado;
+  // curve: + sonrisa; mw: ancho de boca; mo: apertura; px/py: mirada; blush; brow_tilt: ceja levantada.
+  const EXPRESSIONS = {
+    neutral: { eye: 1, brow_in: 0, brow_y: 0, curve: 0.25, mw: 22, mo: 0, mdx: 0, px: 0, py: 0, blush: 0, brow_tilt: 0 },
+    happy: { eye: 0.92, brow_in: 6, brow_y: -3, curve: 1, mw: 28, mo: 0.18, mdx: 0, px: 0, py: 0, blush: 1, brow_tilt: 0 },
+    sad: { eye: 0.9, brow_in: 22, brow_y: 2, curve: -0.85, mw: 20, mo: 0, mdx: 0, px: 0, py: 0.35, blush: 0, brow_tilt: 0 },
+    surprised: { eye: 1.28, brow_in: 4, brow_y: -9, curve: 0, mw: 13, mo: 0.55, mdx: 0, px: 0, py: -0.1, blush: 0, brow_tilt: 0 },
+    thinking: { eye: 0.95, brow_in: 0, brow_y: -2, curve: -0.15, mw: 16, mo: 0, mdx: 6, px: 0.55, py: -0.75, blush: 0, brow_tilt: 9 },
+    angry: { eye: 0.95, brow_in: -26, brow_y: 4, curve: -0.6, mw: 22, mo: 0, mdx: 0, px: 0, py: 0, blush: 0, brow_tilt: 0 },
+  };
+
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const easeInOut = (x) => (x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2);
+  const mix = (a, b, k) => {
+    const o = {};
+    for (const key of Object.keys(a)) o[key] = a[key] + ((b[key] ?? a[key]) - a[key]) * k;
+    return o;
+  };
+  const resolve = (table, v) => (typeof v === 'string' ? table[v] ?? Object.values(table)[0] : { ...Object.values(table)[0], ...v });
+
+  // Valor por tramos con mezcla suave: keys = [[t, 'pose' | {ángulos}], …]; pasa a cada una en `dur` s.
+  function keyedMix(table, t, keys, dur) {
+    let cur = resolve(table, keys[0][1]);
+    for (let i = 1; i < keys.length; i++) {
+      const [tk, v] = keys[i];
+      if (t < tk) break;
+      cur = mix(cur, resolve(table, v), easeInOut(clamp01((t - tk) / dur)));
+    }
+    return cur;
+  }
+  const poseAt = (t, keys, dur = 0.35) => {
+    const j = keyedMix(POSES, t, keys, dur);
+    // respiración: un vaivén mínimo para que nunca esté congelado del todo
+    return { ...j, spine: j.spine + Math.sin(t * 2.1) * 0.8, l_sh: j.l_sh + Math.sin(t * 2.1 + 1) * 1.2, r_sh: j.r_sh - Math.sin(t * 2.1 + 1) * 1.2 };
+  };
+  const faceAt = (t, keys, dur = 0.25) => keyedMix(EXPRESSIONS, t, keys, dur);
+
+  // Boca al hablar: dentro de cada tramo [inicio, fin] se abre y cierra a ritmo de sílabas
+  // (determinista: solo depende de t). 0 = cerrada, 1 = abierta del todo.
+  function talkAt(t, spans) {
+    for (const [a, b] of spans) {
+      if (t < a || t > b) continue;
+      const edge = Math.min(1, (t - a) / 0.08, (b - t) / 0.08);
+      const s = Math.abs(Math.sin(t * 13.7)) * 0.65 + Math.abs(Math.sin(t * 7.3 + 1.3)) * 0.35;
+      return Math.max(0, edge) * (0.25 + 0.6 * s);
+    }
+    return 0;
+  }
+  // Parpadeo cada ~3,4 s (la semilla separa a varios personajes).
+  function blinkAt(t, seed = 0) {
+    const period = 3.4 + (seed % 5) * 0.37;
+    const p = ((t + seed * 1.13) % period + period) % period;
+    return p < 0.07 ? 1 - p / 0.07 : p < 0.14 ? (p - 0.07) / 0.07 : 1;
+  }
+  // Andar de x0 (en t0) a x1 (en t1): devuelve { x, facing, joints } para mezclar con la pose.
+  function walk(t, [t0, x0], [t1, x1], base = 'idle') {
+    const k = clamp01((t - t0) / (t1 - t0));
+    const x = x0 + (x1 - x0) * k;
+    const facing = x1 >= x0 ? 1 : -1;
+    if (k <= 0 || k >= 1) return { x, facing, joints: POSES[base] ?? POSES.idle, walking: false };
+    const ph = (t - t0) * 9;
+    const s = Math.sin(ph), c = Math.cos(ph);
+    const j = {
+      ...(POSES[base] ?? POSES.idle),
+      l_hip: 90 + 26 * s, r_hip: 90 - 26 * s,
+      l_knee: Math.max(0, -c) * 38 * (s < 0.3 ? 1 : 0.6),
+      r_knee: Math.max(0, c) * 38 * (s > -0.3 ? 1 : 0.6),
+      l_sh: 90 - 24 * s, r_sh: 90 + 24 * s, l_el: -18, r_el: -18, spine: -87,
+    };
+    return { x, facing, joints: j, walking: true, lift: Math.abs(Math.sin(ph)) * 4 };
+  }
+
+  const f1 = (n) => Math.round(n * 10) / 10;
+  const pt = (p) => `${f1(p[0])},${f1(p[1])}`;
+  const lum = (h) => {
+    const x = h.replace('#', '');
+    const [r, g, b] = [0, 2, 4].map((i) => parseInt(x.slice(i, i + 2), 16) / 255);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+
+  // look: { color, hair: short|spiky|curly|long|bun|ponytail|none, hairColor, accessory: none|glasses|cap|headphones|bow|tie, theme: 'light'|'dark' }
+  function create(svg, look = {}) {
+    const L = { color: '#D24D1E', hair: 'short', hairColor: '#22201E', accessory: 'none', theme: 'light', ...look };
+    const dark = L.theme === 'dark';
+    const ink = dark ? '#F3F0EA' : '#1F1D1B';
+    const headFill = dark ? '#2A3038' : '#FFFFFF';
+    const hairFill = dark && lum(L.hairColor) <= 0.25 ? '#D9D4CC' : L.hairColor;
+    const tie = lum(L.color) > 0.2 ? '#2B2F3A' : '#E8E2D8';
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    svg.appendChild(g);
+    const R = BONES.head_r;
+
+    function hairBack() {
+      if (L.hair === 'long') return `<rect x="${-R - 9}" y="${-R - 6}" width="${2 * R + 18}" height="${R * 2.45 + 6}" rx="${R}" ry="${R * 0.6}" fill="${hairFill}"/>`;
+      if (L.hair === 'bun') return `<circle cx="${-R * 0.25}" cy="${-R * 1.22}" r="${R * 0.38}" fill="${hairFill}"/>`;
+      if (L.hair === 'ponytail') return `<g transform="translate(${-R * 0.95},${-R * 0.15}) rotate(25)"><ellipse cx="0" cy="${R * 0.375}" rx="${R * 0.32}" ry="${R * 0.575}" fill="${hairFill}"/></g>`;
+      return '';
+    }
+    function hairFront() {
+      const h = L.hair;
+      if (h === 'none' || (L.accessory === 'cap' && ['short', 'spiky', 'curly'].includes(h))) return '';
+      if (h === 'curly') {
+        let s = '';
+        for (let i = 0; i < 9; i++) {
+          const a = (192 + i * 19.5) * DEG;
+          s += `<circle cx="${f1(Math.cos(a) * R * 0.9)}" cy="${f1(Math.sin(a) * R * 0.9 - 2)}" r="${f1(R * 0.3)}" fill="${hairFill}"/>`;
+        }
+        return s;
+      }
+      const r = R + 5;
+      const a0 = 188 * DEG, a1 = 352 * DEG;
+      let s = `<path d="M${f1(Math.cos(a0) * r)},${f1(Math.sin(a0) * r)} A${r},${r} 0 0 1 ${f1(Math.cos(a1) * r)},${f1(Math.sin(a1) * r)} C${R * 0.55},${-R * 0.62} ${R * 0.05},${-R * 0.38} ${-R * 0.42},${-R * 0.52} Q${-R * 0.8},${-R * 0.45} ${-R - 4},${-R * 0.12} Z" fill="${hairFill}"/>`;
+      if (h === 'spiky') {
+        for (let i = 0; i < 5; i++) {
+          const b0 = (205 + i * 27) * DEG, bm = (218 + i * 27) * DEG, b1 = (232 + i * 27) * DEG;
+          s += `<path d="M${f1(Math.cos(b0) * (R + 2))},${f1(Math.sin(b0) * (R + 2))} L${f1(Math.cos(bm) * (R + 24))},${f1(Math.sin(bm) * (R + 24))} L${f1(Math.cos(b1) * (R + 2))},${f1(Math.sin(b1) * (R + 2))} Z" fill="${hairFill}"/>`;
+        }
+      }
+      return s;
+    }
+    function mouth(mx, my, f, talk) {
+      const curve = f.curve, o = Math.min(1, f.mo + talk);
+      const w = f.mw * (1 - 0.25 * Math.min(1, talk)), hw = w / 2, cy = curve * 11;
+      const st = `stroke="${ink}" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"`;
+      if (o < 0.06) return `<path d="M${f1(mx - hw)},${f1(my - cy * 0.5)} Q${f1(mx)},${f1(my + cy)} ${f1(mx + hw)},${f1(my - cy * 0.5)}" fill="none" ${st}/>`;
+      const depth = 6 + o * 26;
+      return `<path d="M${f1(mx - hw)},${f1(my - cy * 0.5)} Q${f1(mx)},${f1(my + cy * 0.55)} ${f1(mx + hw)},${f1(my - cy * 0.5)} C${f1(mx + hw)},${f1(my + depth * 0.9)} ${f1(mx - hw)},${f1(my + depth * 0.9)} ${f1(mx - hw)},${f1(my - cy * 0.5)} Z" fill="${ink}" ${st}/>`;
+    }
+    function head(f, eyesOpen, talk) {
+      const fx = 9, ex = 19, ey = -2;
+      const thin = `stroke="${ink}" stroke-width="5" fill="none" stroke-linecap="round"`;
+      let s = `<circle r="${R}" fill="${headFill}" stroke="${ink}" stroke-width="${LINE}"/>` + hairFront();
+      const open = Math.max(0.08, eyesOpen);
+      for (const sx of [-1, 1]) {
+        const cx = fx + sx * ex;
+        s += `<ellipse cx="${cx}" cy="${ey}" rx="${f1(6.6 * f.eye)}" ry="${f1(8.8 * f.eye * open)}" fill="${ink}"/>`;
+        if (open > 0.5) s += `<circle cx="${f1(cx + 2.2 + f.px * 1.5)}" cy="${f1(ey - 3 + f.py * 1.5)}" r="${f1(2.3 * f.eye)}" fill="#FFFFFF"/>`;
+      }
+      const by = -23 + f.brow_y;
+      for (const sx of [-1, 1]) {
+        const cx = fx + sx * ex;
+        const a = (f.brow_in + (sx === 1 ? f.brow_tilt : 0)) * DEG;
+        const dy = Math.sin(a) * 9;
+        s += `<line x1="${f1(cx + sx * 9)}" y1="${f1(by + dy)}" x2="${f1(cx - sx * 9)}" y2="${f1(by - dy - (sx === 1 ? f.brow_tilt * 0.35 : 0))}" stroke="${ink}" stroke-width="6.5" stroke-linecap="round"/>`;
+      }
+      if (f.blush > 0.02) for (const sx of [-1, 1]) s += `<ellipse cx="${fx + sx * 31}" cy="13.5" rx="8" ry="3.5" fill="#F08F7A" opacity="${f1(0.4 * Math.min(1, f.blush) * 100) / 100}"/>`;
+      s += mouth(fx + f.mdx, 25, f, talk);
+      if (L.accessory === 'glasses') {
+        for (const sx of [-1, 1]) s += `<circle cx="${fx + sx * ex}" cy="${ey}" r="13.5" ${thin}/>`;
+        s += `<line x1="${fx - ex + 13.5}" y1="${ey - 1}" x2="${fx + ex - 13.5}" y2="${ey - 1}" ${thin}/><line x1="${fx + ex + 13.5}" y1="${ey - 3}" x2="${R - 4}" y2="${ey - 6}" ${thin}/>`;
+      } else if (L.accessory === 'cap') {
+        const r = R + 4;
+        s += `<path d="M${f1(Math.cos(182 * DEG) * r)},${f1(Math.sin(182 * DEG) * r - 2)} A${r},${r} 0 0 1 ${f1(Math.cos(358 * DEG) * r)},${f1(Math.sin(358 * DEG) * r - 2)} Q0,${-R * 0.42} ${-R - 3},${-R * 0.24} Z" fill="${L.color}" ${thin.replace('fill="none"', '')}/>`;
+        s += `<path d="M${R * 0.2},${-R * 0.36} Q${R * 1.1},${-R * 0.42} ${R * 1.42},${-R * 0.2} Q${R},${-R * 0.12} ${R * 0.2},${-R * 0.2} Z" fill="${L.color}" stroke="${ink}" stroke-width="5"/>`;
+      } else if (L.accessory === 'headphones') {
+        const r = R + 9;
+        s += `<path d="M${f1(Math.cos(190 * DEG) * r)},${f1(Math.sin(190 * DEG) * r - 2)} A${r},${r} 0 0 1 ${f1(Math.cos(350 * DEG) * r)},${f1(Math.sin(350 * DEG) * r - 2)}" fill="none" stroke="${ink}" stroke-width="9" stroke-linecap="round"/>`;
+        for (const sx of [-1, 1]) s += `<rect x="${sx * (R + 2) - 10}" y="-20" width="20" height="38" rx="8" fill="${L.color}" stroke="${ink}" stroke-width="5"/>`;
+      } else if (L.accessory === 'bow') {
+        s += `<g transform="translate(${-R * 0.45},${-R * 0.9}) rotate(-20)"><path d="M0,0 L-20,-12 L-20,12 Z M0,0 L20,-12 L20,12 Z" fill="${L.color}" stroke="${ink}" stroke-width="5" stroke-linejoin="round"/><circle r="6" fill="${L.color}" stroke="${ink}" stroke-width="5"/></g>`;
+      }
+      return s;
+    }
+
+    // state: { x, ground, scale, facing, joints, face, mouth, eyesOpen, alpha, pop, lift }
+    function draw(state) {
+      const st = { scale: 1, facing: 1, mouth: 0, eyesOpen: 1, alpha: 1, pop: 1, lift: 0, face: 'neutral', joints: 'idle', ...state };
+      const joints = typeof st.joints === 'string' ? POSES[st.joints] ?? POSES.idle : { ...DEFAULT, ...st.joints };
+      const face = typeof st.face === 'string' ? EXPRESSIONS[st.face] ?? EXPRESSIONS.neutral : { ...EXPRESSIONS.neutral, ...st.face };
+      const p = forward(joints);
+      const dy = -Math.max(p.l_ankle[1], p.r_ankle[1]) - st.lift;
+      const s = st.scale * st.pop;
+      const line = `stroke="${ink}" stroke-width="${LINE}" stroke-linecap="round" stroke-linejoin="round" fill="none"`;
+      const shW = 70 * st.scale * Math.max(0.45, 1 - st.lift / 260);
+      let out = `<ellipse cx="${f1(st.x)}" cy="${f1(st.ground)}" rx="${f1(shW)}" ry="${f1(9 * st.scale)}" fill="#000" opacity="0.1"/>`;
+      out += `<g transform="translate(${f1(st.x)},${f1(st.ground)}) scale(${f1(s * st.facing * 1000) / 1000},${f1(s * 1000) / 1000}) translate(0,${f1(dy)})">`;
+      for (const side of ['l', 'r']) {
+        const a = p[`${side}_ankle`];
+        out += `<polyline points="${pt(p.hip)} ${pt(p[`${side}_knee`])} ${pt(a)}" ${line}/><line x1="${f1(a[0])}" y1="${f1(a[1])}" x2="${f1(a[0] + BONES.foot)}" y2="${f1(a[1] + 1)}" ${line}/>`;
+      }
+      out += `<g transform="translate(${pt(p.head)}) rotate(${f1(p.head_tilt)})">${hairBack()}</g>`;
+      const v = [p.chest[0] - p.hip[0], p.chest[1] - p.hip[1]];
+      const n = Math.hypot(v[0], v[1]) || 1;
+      const u = [v[0] / n, v[1] / n];
+      out += `<line x1="${f1(p.chest[0])}" y1="${f1(p.chest[1])}" x2="${f1(p.head_base[0])}" y2="${f1(p.head_base[1])}" ${line}/>`;
+      out += `<line x1="${f1(p.hip[0] + u[0] * 4)}" y1="${f1(p.hip[1] + u[1] * 4)}" x2="${f1(p.chest[0] - u[0] * 12)}" y2="${f1(p.chest[1] - u[1] * 12)}" stroke="${L.color}" stroke-width="44" stroke-linecap="round"/>`;
+      if (L.accessory === 'tie') {
+        const q = [-u[1], u[0]];
+        const top = [p.chest[0] - u[0] * 22, p.chest[1] - u[1] * 22];
+        const P = (k, w) => `${f1(top[0] - u[0] * k + q[0] * w)},${f1(top[1] - u[1] * k + q[1] * w)}`;
+        out += `<polygon points="${P(0, 6)} ${P(0, -6)} ${P(62, -9)} ${P(74, 0)} ${P(62, 9)}" fill="${tie}"/>`;
+      }
+      out += `<g transform="translate(${pt(p.head)}) rotate(${f1(p.head_tilt)})">${head(face, st.eyesOpen, st.mouth)}</g>`;
+      for (const side of ['l', 'r']) {
+        const w = p[`${side}_wrist`];
+        out += `<polyline points="${pt(p[`${side}_shoulder`])} ${pt(p[`${side}_elbow`])} ${pt(w)}" ${line}/><circle cx="${f1(w[0])}" cy="${f1(w[1])}" r="9.5" fill="${ink}"/>`;
+      }
+      out += '</g>';
+      g.setAttribute('opacity', String(f1(st.alpha * 1000) / 1000));
+      g.innerHTML = out;
+      // Dónde quedan las manos y la cabeza en la escena (para colgarles un objeto o un bocadillo).
+      const toScene = (q) => [st.x + st.facing * s * q[0], st.ground + s * (q[1] + dy)];
+      return { leftHand: toScene(p.l_wrist), rightHand: toScene(p.r_wrist), head: toScene(p.head), headTop: toScene([p.head[0], p.head[1] - R]) };
+    }
+    return { draw, look: L };
+  }
+
+  window.IgnixStickman = { create, poseAt, faceAt, talkAt, blinkAt, walk, forward, POSES, EXPRESSIONS, JOINT_KEYS };
+})();

package/src/runtime/blocks/whiteboard.js

@@ -0,0 +1,147 @@
+/*
+ * whiteboard.js — bloque de Ignix Editor: pizarra blanca. Trazos que se dibujan solos con
+ * un rotulador que los sigue, formas «a mano» (rectángulo, círculo, flecha, subrayado,
+ * tachado) y texto que se escribe. Función pura del tiempo.
+ *
+ * Las formas a mano llevan un temblor con semilla fija: el mismo dibujo en cada fotograma.
+ * La longitud de cada trazo es geometría del SVG (getTotalLength), no medida de la página.
+ *
+ *   const B = IgnixBoard;
+ *   const board = B.create(document.getElementById('board'), { ink: '#1F1D1B', marker: true });
+ *   board.shape(B.circle(540, 700, 180), 0.5, 0.8);                 // (path, empieza, dura)
+ *   board.shape(B.arrow(200, 1100, 470, 860), 1.4, 0.5, { color: '#E0452B' });
+ *   board.write('2× more bookings', 540, 1180, 1.9, 1.0, { size: 84 });
+ *   run({ id, duration, fps }, (t) => board.draw(t));
+ */
+(function () {
+  const NS = 'http://www.w3.org/2000/svg';
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const easeInOut = (x) => (x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2);
+  // Ruido con semilla: el mismo «pulso» de mano en cada fotograma.
+  function rng(seed) {
+    let s = seed >>> 0 || 1;
+    return () => ((s = (s * 1664525 + 1013904223) >>> 0) / 4294967296) * 2 - 1;
+  }
+  let seedN = 7;
+  const f1 = (n) => Math.round(n * 10) / 10;
+
+  // Una línea a mano: ligera curva y temblor.
+  function line(x1, y1, x2, y2, wobble = 4, seed = seedN++) {
+    const r = rng(seed);
+    const mx = (x1 + x2) / 2 + r() * wobble * 2, my = (y1 + y2) / 2 + r() * wobble * 2;
+    return `M${f1(x1 + r() * wobble)},${f1(y1 + r() * wobble)} Q${f1(mx)},${f1(my)} ${f1(x2 + r() * wobble)},${f1(y2 + r() * wobble)}`;
+  }
+  function rect(x, y, w, h, wobble = 5, seed = seedN++) {
+    const r = rng(seed);
+    const j = () => r() * wobble;
+    // Un solo trazo continuo que se pasa un poco al cerrar, como a mano.
+    return `M${f1(x + j())},${f1(y + j())} L${f1(x + w + j())},${f1(y + j())} L${f1(x + w + j())},${f1(y + h + j())} L${f1(x + j())},${f1(y + h + j())} L${f1(x + j())},${f1(y - h * 0.04 + j())} L${f1(x + w * 0.12 + j())},${f1(y + j())}`;
+  }
+  function circle(cx, cy, rx, ry = rx, wobble = 0.05, seed = seedN++) {
+    const r = rng(seed);
+    const pts = [];
+    const n = 28, a0 = -Math.PI / 2 + r() * 0.3;
+    for (let i = 0; i <= n + 3; i++) {
+      const a = a0 + (i / n) * Math.PI * 2;
+      const k = 1 + r() * wobble;
+      pts.push([cx + Math.cos(a) * rx * k, cy + Math.sin(a) * ry * k]);
+    }
+    return 'M' + pts.map((p) => `${f1(p[0])},${f1(p[1])}`).join(' L');
+  }
+  function arrow(x1, y1, x2, y2, head = 46, seed = seedN++) {
+    const a = Math.atan2(y2 - y1, x2 - x1);
+    const h1 = [x2 - Math.cos(a - 0.45) * head, y2 - Math.sin(a - 0.45) * head];
+    const h2 = [x2 - Math.cos(a + 0.45) * head, y2 - Math.sin(a + 0.45) * head];
+    return `${line(x1, y1, x2, y2, 4, seed)} M${f1(h1[0])},${f1(h1[1])} L${f1(x2)},${f1(y2)} L${f1(h2[0])},${f1(h2[1])}`;
+  }
+  const underline = (x, y, w, seed = seedN++) => line(x, y, x + w, y + 6, 5, seed);
+  const strike = (x, y, w, seed = seedN++) => `${line(x, y, x + w, y - 10, 4, seed)} ${line(x + w * 0.05, y + 14, x + w * 1.02, y + 2, 4, seed + 1)}`;
+
+  function create(svg, { ink = '#1F1D1B', width = 9, marker = true, markerColor = '#2B6CB0' } = {}) {
+    const items = [];
+    const layer = document.createElementNS(NS, 'g');
+    svg.appendChild(layer);
+    let pen = null;
+    if (marker) {
+      pen = document.createElementNS(NS, 'g');
+      pen.innerHTML = `<g transform="rotate(-35)"><rect x="-10" y="-150" width="20" height="120" rx="6" fill="${markerColor}"/><rect x="-12" y="-38" width="24" height="26" rx="4" fill="#E8E8E8"/><path d="M-8,-12 L0,6 L8,-12 Z" fill="${ink}"/></g>`;
+      pen.style.display = 'none';
+      svg.appendChild(pen);
+    }
+
+    // Un trazo que se dibuja de `at` a `at + dur`.
+    function shape(d, at, dur, { color = ink, stroke = width, fill = 'none' } = {}) {
+      const p = document.createElementNS(NS, 'path');
+      p.setAttribute('d', d);
+      p.setAttribute('fill', 'none');
+      p.setAttribute('stroke', color);
+      p.setAttribute('stroke-width', String(stroke));
+      p.setAttribute('stroke-linecap', 'round');
+      p.setAttribute('stroke-linejoin', 'round');
+      layer.appendChild(p);
+      const len = p.getTotalLength();
+      p.style.strokeDasharray = `${len} ${len}`;
+      let fillEl = null;
+      if (fill !== 'none') {
+        fillEl = p.cloneNode();
+        fillEl.setAttribute('fill', fill);
+        fillEl.setAttribute('stroke', 'none');
+        layer.insertBefore(fillEl, p);
+      }
+      items.push({ kind: 'path', el: p, fillEl, at, dur, len });
+      return p;
+    }
+    // Texto que se escribe de izquierda a derecha (se descubre con una máscara).
+    function write(text, x, y, at, dur, { size = 80, color = ink, font = "800 1em 'Montserrat'", anchor = 'middle' } = {}) {
+      const id = `wb-clip-${items.length}-${Math.random().toString(36).slice(2, 7)}`;
+      const clip = document.createElementNS(NS, 'clipPath');
+      clip.setAttribute('id', id);
+      const r = document.createElementNS(NS, 'rect');
+      clip.appendChild(r);
+      svg.appendChild(clip);
+      const tx = document.createElementNS(NS, 'text');
+      tx.textContent = text;
+      tx.setAttribute('x', String(x));
+      tx.setAttribute('y', String(y));
+      tx.setAttribute('fill', color);
+      tx.setAttribute('text-anchor', anchor);
+      tx.setAttribute('clip-path', `url(#${id})`);
+      tx.style.font = font;
+      tx.style.fontSize = `${size}px`;
+      layer.appendChild(tx);
+      // Ancho estimado sin medir, por lo alto (~0,8 em por carácter en una negrita): la
+      // máscara solo descubre, así que pasarse no corta nada; al acabar se quita.
+      const w = text.length * size * 0.8;
+      const x0 = anchor === 'middle' ? x - w / 2 : anchor === 'end' ? x - w : x;
+      items.push({ kind: 'text', el: tx, rect: r, at, dur, x0, w, y: y - size, h: size * 1.4 });
+      return tx;
+    }
+
+    function draw(t) {
+      let tip = null;
+      for (const it of items) {
+        const k = easeInOut(clamp01((t - it.at) / it.dur));
+        if (it.kind === 'path') {
+          it.el.style.strokeDashoffset = String(it.len * (1 - k));
+          it.el.style.opacity = t >= it.at ? '1' : '0';
+          if (it.fillEl) it.fillEl.style.opacity = String(clamp01((t - it.at - it.dur) / 0.3));
+          if (k > 0 && k < 1) tip = it.el.getPointAtLength(it.len * k);
+        } else {
+          it.rect.setAttribute('y', String(it.y));
+          it.rect.setAttribute('height', String(it.h));
+          // Terminado, sin máscara: que ninguna letra se quede fuera por la estimación.
+          it.rect.setAttribute('x', String(k >= 1 ? -1e5 : it.x0 - 10));
+          it.rect.setAttribute('width', String(k >= 1 ? 2e5 : Math.max(0, (it.w + 20) * k)));
+          if (k > 0 && k < 1) tip = { x: it.x0 + it.w * k, y: it.y + it.h * 0.75 };
+        }
+      }
+      if (pen) {
+        pen.style.display = tip ? 'block' : 'none';
+        if (tip) pen.setAttribute('transform', `translate(${f1(tip.x)},${f1(tip.y)})`);
+      }
+    }
+    return { shape, write, draw };
+  }
+
+  window.IgnixBoard = { create, line, rect, circle, arrow, underline, strike };
+})();

package/src/update-check.mjs

@@ -0,0 +1,81 @@
+// AVISO DE VERSIÓN NUEVA (2026-10-08, Fran: aviso, NO actualización automática).
+//
+// Ignix publica la versión que recomienda (la misma que fija su MCP, ya probada en CI):
+// https://ignix.social/api/editor/version. Como mucho una vez al día se consulta (2 s
+// de tope, sin red no pasa nada) y, si la instalada es más vieja, cada comando dice en
+// stderr cuál hay y el comando EXACTO para actualizar. Lo ejecuta el agente con el OK
+// de la persona; nunca se actualiza solo a mitad de un proyecto.
+//
+// Existe porque un agente puede usar la guía instalada (`skills add`) sin pasar por el
+// MCP, y entonces nadie comprobaba la versión (prueba en Windows, 2026-10-08).
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { basename, dirname, join, resolve } from 'node:path';
+import { HOME } from './binaries.mjs';
+
+const URL_VERSION = process.env.IGNIX_EDITOR_VERSION_URL || 'https://ignix.social/api/editor/version';
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/** a > b en versiones x.y.z. */
+export function newer(a, b) {
+  const pa = String(a).split('.').map(Number), pb = String(b).split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pa[i] || 0) !== (pb[i] || 0)) return (pa[i] || 0) > (pb[i] || 0);
+  }
+  return false;
+}
+
+/** La carpeta `--prefix` de esta instalación, si está instalada con npm (no en el repo). */
+export function installPrefix(pkgDir) {
+  const scope = dirname(pkgDir);
+  const nm = dirname(scope);
+  if (basename(scope) !== '@ignix-social' || basename(nm) !== 'node_modules') return null;
+  return dirname(nm);
+}
+
+/** Los comandos para actualizar en este sistema. */
+export function updateCommands(prefix, version, platform = process.platform) {
+  const pkg = `@ignix-social/editor@${version}`;
+  if (platform === 'win32') {
+    const bin = join(prefix, 'node_modules', '.bin', 'ignix-editor.cmd');
+    return [`npm.cmd install --prefix "${prefix}" ${pkg}`, `& "${bin}" skills add`];
+  }
+  const bin = join(prefix, 'node_modules', '.bin', 'ignix-editor');
+  return [`npm install --prefix "${prefix}" ${pkg}`, `"${bin}" skills add`];
+}
+
+async function recommended() {
+  const cache = join(HOME, 'update-check.json');
+  try {
+    const c = JSON.parse(readFileSync(cache, 'utf8'));
+    if (Date.now() - c.checkedAt < DAY_MS && c.version) return c.version;
+  } catch {
+    /* sin caché */
+  }
+  try {
+    const r = await fetch(URL_VERSION, { signal: AbortSignal.timeout(2000) });
+    if (!r.ok) return null;
+    const { version } = await r.json();
+    if (!/^\d+\.\d+\.\d+$/.test(String(version))) return null;
+    mkdirSync(HOME, { recursive: true });
+    writeFileSync(cache, JSON.stringify({ checkedAt: Date.now(), version }));
+    return version;
+  } catch {
+    return null;
+  }
+}
+
+/** Avisa (stderr) si Ignix recomienda una versión más nueva. Nunca lanza ni bloquea más de 2 s. */
+export async function warnIfOutdated({ current, pkgDir, write = (s) => process.stderr.write(s) }) {
+  if (process.env.IGNIX_EDITOR_NO_UPDATE_CHECK === '1' || process.env.CI) return null;
+  const prefix = installPrefix(resolve(pkgDir));
+  if (!prefix || !existsSync(prefix)) return null;
+  const latest = await recommended();
+  if (!latest || !newer(latest, current)) return null;
+  const [install, skills] = updateCommands(prefix, latest);
+  write(
+    `⬆ Ignix Editor ${latest} is available (this is ${current}). Update before going on — ask the user to approve these two commands:\n` +
+      `  ${install}\n  ${skills}\n` +
+      `  Then read the guide again (it may have changed).\n`,
+  );
+  return latest;
+}