@ignix-social/editor 0.1.20 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ignix-social/editor",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Ignix Editor: render HTML video compositions (reels, edits, clips) on your own computer. Based on HyperFrames.",
   "license": "Apache-2.0",
   "type": "module",

package/skills/ignix-editor/SKILL.md

@@ -24,6 +24,8 @@ Commands. `ignix-editor` means the copy the Ignix playbook installed: `~/.ignix-
 
 One project = one folder with `index.html` at its root and everything it uses inside `assets/`. Never work inside the user's code repository.
 
+**Version first.** If any `ignix-editor` command prints `⬆ Ignix Editor … is available`, stop and run the two update commands it prints (the user approves them), then read this guide again before going on: an old version can hang or lack fixes the guide counts on.
+
 ## 1. The composition contract
 
 ```html
@@ -108,6 +110,66 @@ Position the elements with the SAME numbers in CSS. Cursor paths, click ripples
 
 Decide the zones once per video (e.g. header y 270–440, stage y 460–1300, captions y 1335–1465 on a 1080×1920 reel) and keep them. Put zoomable content (an app window, a phone) inside a stage element with `overflow:hidden`, and move a camera by transforming the content inside it: zooming in then never covers the header or the captions. A soft mask on the stage edges hides the crop.
 
+### Optional blocks (only when they fit the script)
+
+Ready-made pieces that draw themselves from `t`, like everything else. They are options, not a format: use one when the idea is better told that way, never because it exists. `ignix-editor block` lists them; `ignix-editor block <name> <project>` copies `<name>.js` into the project; load it right after `ignix-frame.js`.
+
+**`stickman`** — stick-figure characters that walk, gesture, talk and react (explainers, "you vs. the smart way" sketches, a two-person dialogue, a story told by a character). Poses: `idle talk wave point think shrug cheer arms_crossed present sad sit jump_crouch jump_air`. Faces: `neutral happy sad surprised thinking angry`. Look: `color` (use the brand colour), `hair` (`short spiky curly long bun ponytail none`), `hairColor`, `accessory` (`none glasses cap headphones bow tie`), `theme` (`light`, or `dark` on a dark background).
+
+```html
+<svg id="stage" viewBox="0 0 1080 1920" style="position:absolute;inset:0;width:1080px;height:1920px"></svg>
+```
+```js
+const S = IgnixStickman;
+const ana = S.create(document.getElementById('stage'), { color: '#D24D1E', hair: 'ponytail' });
+run({ id, duration, fps }, (t) => {
+  const w = S.walk(t, [0, -150], [1.6, 380]);                 // walks in from the left, then stops
+  const at = ana.draw({
+    x: w.x, ground: 1300, scale: 1.5, facing: 1, lift: w.lift ?? 0,
+    joints: w.walking ? w.joints : S.poseAt(t, [[0, 'idle'], [1.7, 'wave'], [3, 'talk']]),
+    face: S.faceAt(t, [[0, 'neutral'], [1.7, 'happy']]),
+    mouth: S.talkAt(t, [[1.8, 2.9]]),                          // the spans where THIS character's voice line plays
+    eyesOpen: S.blinkAt(t, 1),                                 // a different seed per character
+  });
+  // `at.rightHand`, `at.leftHand`, `at.headTop` are scene coordinates: hang a prop or a speech bubble there.
+});
+```
+
+- Big: `scale` 1.4–1.6 on a 1080×1920 reel (a figure about 800 px tall); small figures leave the frame empty. Two characters face each other (`facing` 1 and −1).
+- The mouth moves only while its own voice line plays (`talkAt` with that line's start and end); everyone else keeps their mouth shut.
+- Change pose or face on the word that motivates it, as with any overlay. Put the brand's world around them (a desk, a phone, a chart) as simple shapes in the same SVG, drawn first so the characters stand in front.
+
+**`kinetic`** — kinetic typography: the words of a line pop in on the exact moment they are said (a hook, a punchline, a key promise). You decide the line breaks (no measuring); each word has its `at` (from the voice timings), and optionally `color`, `size` (relative, e.g. 1.4) or `box` (a filled label behind it). Styles: `pop` (default), `slide`, `punch` (a stamp from big to normal), `type` (typed letter by letter).
+
+```js
+const kt = IgnixKinetic.create(document.getElementById('kt'), {
+  lines: [[{ text: 'Stop', at: 0.2 }, { text: 'losing', at: 0.45 }], [{ text: 'bookings', at: 0.8, color: '#FF5A1F' }]],
+  style: 'pop', font: "900 130px 'Montserrat'", stroke: '#000', strokeWidth: 12,
+});
+run({ id, duration, fps }, (t) => kt.draw(t, { out: 3.0 }));   // out: when the whole block leaves
+```
+
+**`chat`** — a story told as a chat on a phone (a customer asking, the business answering, a booking made). Messages appear at their `at`; the other side shows "typing…" just before each of theirs. Themes: `imessage`, `whatsapp`, `instagram` (or your own `colors`). The container is the phone SCREEN; size it and draw the phone frame around it in CSS. Messages may carry an `image` (a local file in `assets/`). Invented conversations are examples: label them as such if they could pass for a real customer.
+
+```js
+const chat = IgnixChat.create(document.getElementById('screen'), {
+  theme: 'whatsapp', title: 'Laura', subtitle: 'online', fontSize: 46,
+  messages: [{ from: 'them', text: 'Are you open today?', at: 0.6 }, { from: 'me', text: 'Until 8 pm 😊', at: 1.8 }],
+});
+run({ id, duration, fps }, (t) => chat.draw(t));
+```
+
+**`whiteboard`** — a whiteboard explanation: shapes and words drawn by hand while a marker follows the stroke. Hand-drawn helpers (same wobble every frame): `IgnixBoard.line`, `rect`, `circle`, `arrow`, `underline`, `strike`; or any SVG path `d`. Each `shape(d, at, dur, { color, stroke, fill })` draws itself from `at` over `dur`; `write(text, x, y, at, dur, { size })` writes text left to right. One thing at a time, timed to the words, and big: on a 1080×1920 reel words of 70–110 px and shapes that use most of the width.
+
+```js
+const B = IgnixBoard;
+const board = B.create(document.getElementById('board'), { ink: '#1F1D1B', marker: true });
+board.write('Comments', 300, 640, 0.4, 0.6, { size: 90 });
+board.shape(B.circle(300, 610, 260, 120), 1.0, 0.7);
+board.shape(B.arrow(420, 780, 660, 1040), 1.8, 0.5, { color: '#E0452B' });
+run({ id, duration, fps }, (t) => board.draw(t));
+```
+
 ## 3. Recorded video (edits and clips)
 
 - Transcribe on the machine: `ignix-editor transcribe assets/take.mp4 --lang es -o work/words.json`. Show the user the text and fix obvious mishearings (names, brands) without rewriting what they said.

package/src/cli.mjs

@@ -3,7 +3,7 @@
 // Los mensajes van en inglés, como el manual y la skill: los lee sobre todo el agente.
 import './win-fs-preload.mjs'; // Windows: fs.cpSync con rutas no ASCII (win-fs.mjs)
 import { spawnSync } from 'node:child_process';
-import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { copyFileSync, cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { homedir } from 'node:os';
 import { basename, dirname, join, resolve } from 'node:path';
@@ -22,6 +22,7 @@ import { measureStyle } from './analysis/style.mjs';
 import { reviewVideo } from './analysis/review.mjs';
 import { pickAudio } from './pick-audio.mjs';
 import { importGiphy, openGiphySearch } from './giphy.mjs';
+import { warnIfOutdated } from './update-check.mjs';
 
 const PKG_DIR = join(dirname(fileURLToPath(import.meta.url)), '..');
 const PKG = JSON.parse(readFileSync(join(PKG_DIR, 'package.json'), 'utf8'));
@@ -255,6 +256,24 @@ const commands = {
 
   // GIFs, stickers y clips de GIPHY elegidos por la persona (src/giphy.mjs): abre la
   // búsqueda en su navegador, o trae el enlace que ha copiado.
+  // Bloques opcionales (src/runtime/blocks): plantillas sencillas que se copian al proyecto
+  // y se usan desde run(), como IgnixFrame. Sin nombre, lista los que hay.
+  async block(argv) {
+    const { pos } = parseArgs(argv, {});
+    const dir = join(PKG_DIR, 'src', 'runtime', 'blocks');
+    const all = readdirSync(dir).filter((f) => f.endsWith('.js')).map((f) => f.slice(0, -3)).sort();
+    const name = pos[0];
+    if (!name) {
+      console.log(all.join('\n'));
+      return;
+    }
+    if (!all.includes(name)) fail(`Unknown block "${name}". Blocks: ${all.join(', ')}`);
+    const project = resolve(pos[1] ?? '.');
+    if (!existsSync(join(project, 'index.html'))) fail(`${project} is not an Ignix Editor project (no index.html). Run it inside the project or pass its folder.`);
+    copyFileSync(join(dir, `${name}.js`), join(project, `${name}.js`));
+    console.log(`✓ ${name}.js copied to ${project}. Load it after ignix-frame.js: <script src="${name}.js"></script>`);
+  },
+
   async giphy(argv) {
     const { pos, opts } = parseArgs(argv, { search: 'str', kind: 'str', open: 'bool', json: 'bool' });
     const usage = 'Usage: ignix-editor giphy --search "thumbs up" [--kind gifs|stickers|clips]   or   ignix-editor giphy <link> [folder]';
@@ -420,6 +439,7 @@ const commands = {
   ignix-editor faces <video> [--every 0.2] [-o faces.json]   where the face is, smoothed
   ignix-editor pick-audio [folder] --kind music|sfx --query "inspiring" [--order trending]
                                                opens the Pixabay search in the browser, waits for the person's download, copies it into assets/
+  ignix-editor block [name] [folder]           lists the optional blocks, or copies one into the project (stickman…)
   ignix-editor giphy --search "thumbs up" [--kind gifs|stickers|clips]   opens the GIPHY search in the browser
   ignix-editor giphy <link> [folder]           brings the GIF (mp4), sticker (transparent frame sheet) or clip (mp4 with audio) into assets/
   ignix-editor style measure <video>… [--speech] [--stills dir] [-o style.json]   someone's editing style, measured on 2–3 of their videos
@@ -442,6 +462,11 @@ export async function main(argv) {
   const [cmd = 'help', ...rest] = argv;
   const fn = commands[cmd === '--version' || cmd === '-v' ? 'version' : cmd === '--help' || cmd === '-h' ? 'help' : cmd];
   if (!fn) fail(`Unknown command: ${cmd}. See: ignix-editor help`);
+  // Aviso de versión nueva (src/update-check.mjs): no en `help`/`--version`, que el
+  // agente usa justo para comprobar qué tiene.
+  if (!['help', 'version', '--version', '-v', '--help', '-h'].includes(cmd)) {
+    await warnIfOutdated({ current: PKG.version, pkgDir: PKG_DIR }).catch(() => {});
+  }
   try {
     await fn(rest);
   } catch (e) {

package/src/runtime/blocks/chat.js

@@ -0,0 +1,86 @@
+/*
+ * chat.js — bloque de Ignix Editor: una historia contada como conversación de chat en un
+ * móvil. Los mensajes aparecen a su hora, con «escribiendo…» antes de los del otro lado.
+ * Función pura del tiempo; el navegador apila los mensajes (los nuevos empujan arriba a
+ * los viejos) y aquí solo se decide cuáles se ven y cómo entran: nunca se mide la página.
+ *
+ *   const C = IgnixChat;
+ *   const chat = C.create(document.getElementById('phone'), {
+ *     theme: 'imessage',                     // imessage | whatsapp | instagram
+ *     title: 'Laura', subtitle: 'online',
+ *     messages: [
+ *       { from: 'them', text: 'Are you still open today?', at: 0.6 },
+ *       { from: 'me', text: 'Yes! Until 8 pm 😊', at: 2.0 },
+ *       { from: 'them', text: 'Perfect, booking now', at: 3.6 },
+ *     ],
+ *   });
+ *   run({ id, duration, fps }, (t) => chat.draw(t));
+ *
+ * El contenedor es la PANTALLA del móvil (p. ej. 820×1500): su tamaño lo pones tú en CSS.
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.4 * (x - 1) ** 3 + 1.4 * (x - 1) ** 2;
+  const THEMES = {
+    imessage: { bg: '#FFFFFF', head: '#F6F6F6', ink: '#111111', me: '#0A84FF', meInk: '#FFFFFF', them: '#E9E9EB', themInk: '#111111', font: "-apple-system, 'Helvetica Neue', Arial, sans-serif", radius: 38 },
+    whatsapp: { bg: '#EFE7DE', head: '#075E54', ink: '#FFFFFF', me: '#DCF8C6', meInk: '#111111', them: '#FFFFFF', themInk: '#111111', font: "'Helvetica Neue', Arial, sans-serif", radius: 22 },
+    instagram: { bg: '#FFFFFF', head: '#FFFFFF', ink: '#111111', me: 'linear-gradient(135deg,#7B2FF7,#F107A3)', meInk: '#FFFFFF', them: '#EFEFEF', themInk: '#111111', font: "-apple-system, 'Helvetica Neue', Arial, sans-serif", radius: 40 },
+  };
+
+  function create(screen, { theme = 'imessage', title = '', subtitle = '', messages = [], fontSize = 46, typing = 0.9, colors = {} } = {}) {
+    const T = { ...THEMES[theme], ...colors };
+    screen.innerHTML = '';
+    Object.assign(screen.style, { background: T.bg, display: 'flex', flexDirection: 'column', overflow: 'hidden', fontFamily: T.font });
+    const head = document.createElement('div');
+    Object.assign(head.style, { background: T.head, color: T.ink, padding: `${fontSize * 0.9}px ${fontSize}px ${fontSize * 0.6}px`, textAlign: 'center', borderBottom: '1px solid rgba(0,0,0,.08)', flex: '0 0 auto' });
+    head.innerHTML = `<div style="font-weight:700;font-size:${fontSize * 1.05}px">${esc(title)}</div>${subtitle ? `<div style="opacity:.6;font-size:${fontSize * 0.62}px;margin-top:4px">${esc(subtitle)}</div>` : ''}`;
+    screen.appendChild(head);
+    const list = document.createElement('div');
+    Object.assign(list.style, { flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: `${fontSize * 0.35}px`, padding: `${fontSize * 0.6}px ${fontSize * 0.55}px`, overflow: 'hidden' });
+    screen.appendChild(list);
+
+    const items = [];
+    for (const m of messages) {
+      const mine = m.from === 'me';
+      if (!mine && typing > 0) {
+        const dots = document.createElement('div');
+        Object.assign(dots.style, { alignSelf: 'flex-start', background: T.them, borderRadius: `${T.radius}px`, padding: `${fontSize * 0.42}px ${fontSize * 0.6}px`, display: 'none', gap: `${fontSize * 0.18}px` });
+        dots.innerHTML = [0, 1, 2].map(() => `<span style="display:inline-block;width:${fontSize * 0.3}px;height:${fontSize * 0.3}px;border-radius:50%;background:#8E8E93;margin:0 ${fontSize * 0.07}px"></span>`).join('');
+        list.appendChild(dots);
+        items.push({ kind: 'typing', el: dots, from: Math.max(0, m.at - typing), to: m.at });
+      }
+      const b = document.createElement('div');
+      Object.assign(b.style, {
+        alignSelf: mine ? 'flex-end' : 'flex-start', maxWidth: '78%', background: mine ? T.me : T.them, color: mine ? T.meInk : T.themInk,
+        borderRadius: `${T.radius}px`, padding: `${fontSize * 0.42}px ${fontSize * 0.62}px`, fontSize: `${fontSize}px`, lineHeight: '1.25',
+        transformOrigin: mine ? '100% 100%' : '0% 100%', display: 'none', whiteSpace: 'pre-wrap',
+      });
+      if (m.image) b.innerHTML = `<img src="${m.image}" style="display:block;width:100%;border-radius:${T.radius * 0.6}px;margin-bottom:${m.text ? 10 : 0}px">${esc(m.text ?? '')}`;
+      else b.textContent = m.text;
+      list.appendChild(b);
+      items.push({ kind: 'msg', el: b, at: m.at });
+    }
+
+    function draw(t) {
+      for (const it of items) {
+        if (it.kind === 'typing') {
+          const on = t >= it.from && t < it.to;
+          it.el.style.display = on ? 'flex' : 'none';
+          if (on) [...it.el.children].forEach((d, i) => (d.style.opacity = (0.35 + 0.65 * Math.max(0, Math.sin((t - it.from) * 9 - i * 0.9))).toFixed(3)));
+        } else {
+          const k = clamp01((t - it.at) / 0.28);
+          it.el.style.display = t >= it.at ? 'block' : 'none';
+          it.el.style.transform = `scale(${(0.6 + 0.4 * outBack(k)).toFixed(4)})`;
+          it.el.style.opacity = clamp01(k * 3).toFixed(3);
+        }
+      }
+    }
+    return { draw };
+  }
+
+  function esc(s) {
+    return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+  }
+
+  window.IgnixChat = { create };
+})();

package/src/runtime/blocks/kinetic.js

@@ -0,0 +1,78 @@
+/*
+ * kinetic.js — bloque de Ignix Editor: texto cinético. Las palabras entran cada una en
+ * su momento (el de la voz) y con su estilo; todo es función pura del tiempo.
+ *
+ * El navegador coloca las palabras (CSS, una línea por grupo que tú decides) y aquí solo
+ * se animan con transform/opacity: nunca se mide la página.
+ *
+ *   const K = IgnixKinetic;
+ *   const title = K.create(document.getElementById('kt'), {
+ *     lines: [
+ *       [{ text: 'STOP', at: 0.2 }, { text: 'SCROLLING', at: 0.5, color: '#FF5A1F' }],
+ *       [{ text: 'READ', at: 1.0 }, { text: 'THIS', at: 1.2, size: 1.4 }],
+ *     ],
+ *     style: 'pop',            // pop | slide | punch | type
+ *     font: "900 120px 'Montserrat'", color: '#fff', stroke: '#000',
+ *   });
+ *   run({ id, duration, fps }, (t) => title.draw(t, { out: 4.2 }));   // out: cuándo sale todo
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outBack = (x) => 1 + 2.7 * (x - 1) ** 3 + 1.7 * (x - 1) ** 2;
+  const outCubic = (x) => 1 - (1 - x) ** 3;
+
+  function create(box, { lines, style = 'pop', font = "900 110px 'Montserrat'", color = '#FFFFFF', stroke = '#000000', strokeWidth = 12, gap = 0.28, lineHeight = 1.02, align = 'center', uppercase = true } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { display: 'flex', flexDirection: 'column', alignItems: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center', gap: '0px' });
+    const words = [];
+    for (const line of lines) {
+      const row = document.createElement('div');
+      Object.assign(row.style, { display: 'flex', flexWrap: 'nowrap', justifyContent: 'center', alignItems: 'baseline', columnGap: `${gap}em`, lineHeight: String(lineHeight), font, whiteSpace: 'nowrap' });
+      for (const w of line) {
+        const el = document.createElement('span');
+        el.textContent = uppercase ? w.text.toUpperCase() : w.text;
+        Object.assign(el.style, {
+          display: 'inline-block', color: w.color ?? color, fontSize: w.size ? `${w.size}em` : undefined,
+          WebkitTextStroke: stroke ? `${strokeWidth}px ${stroke}` : undefined, paintOrder: 'stroke fill',
+          transformOrigin: '50% 80%', willChange: 'transform, opacity', opacity: '0',
+        });
+        if (w.box) Object.assign(el.style, { background: w.box, padding: '0 0.18em', borderRadius: '0.12em', WebkitTextStroke: '0' });
+        row.appendChild(el);
+        words.push({ el, at: w.at, text: el.textContent });
+      }
+      box.appendChild(row);
+    }
+
+    // opts.out: momento en que todo sale (fundido y un poco hacia arriba).
+    function draw(t, opts = {}) {
+      const outK = opts.out != null ? clamp01((t - opts.out) / 0.25) : 0;
+      for (const w of words) {
+        const k = clamp01((t - w.at) / (style === 'punch' ? 0.18 : 0.32));
+        let tr = '', op = k > 0 ? 1 : 0;
+        if (style === 'pop') {
+          tr = `scale(${(0.4 + 0.6 * outBack(k)).toFixed(4)})`;
+          op = clamp01(k * 3);
+        } else if (style === 'slide') {
+          tr = `translateY(${((1 - outCubic(k)) * 0.6).toFixed(4)}em)`;
+          op = clamp01(k * 2);
+        } else if (style === 'punch') {
+          tr = `scale(${(1.8 - 0.8 * outCubic(k)).toFixed(4)})`;
+          op = clamp01(k * 4);
+        } else if (style === 'type') {
+          const n = Math.round(clamp01((t - w.at) / Math.max(0.05, w.text.length * 0.045)) * w.text.length);
+          w.el.textContent = w.text.slice(0, n) || '​';
+          op = t >= w.at ? 1 : 0;
+        }
+        if (outK > 0) {
+          tr += ` translateY(${(-0.3 * outK).toFixed(4)}em)`;
+          op *= 1 - outK;
+        }
+        w.el.style.transform = tr;
+        w.el.style.opacity = op.toFixed(3);
+      }
+    }
+    return { draw, words };
+  }
+
+  window.IgnixKinetic = { create };
+})();

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;
+}