@ignix-social/editor 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ignix-social/editor",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "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,120 @@ 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));
+```
+
+**`reviews`** — REAL reviews (the brand's, from Ignix: `list_reviews` / `list_booking_reviews`) arriving one after another while their stars fill; the last `max` (3) stay on screen. Author as the source shows it, text untouched except trimmed.
+
+```js
+const rv = IgnixReviews.create(document.getElementById('reviews'), {
+  reviews: [{ author: 'Marta G.', stars: 5, text: 'Best haircut in years.', source: 'Google', at: 0.4 }], accent: '#FFB400', fontSize: 40 });
+```
+
+**`slots`** — the REAL free slots (`get_booking_availability`) as a grid by day; some can get "booked" live (`taken`) to show how booking works — say it is an example if they were not really taken.
+
+```js
+const sl = IgnixSlots.create(document.getElementById('slots'), {
+  days: [{ label: 'Thu 9', slots: ['10:00', '12:30', '17:00'] }, { label: 'Fri 10', slots: ['09:30', '11:00'] }],
+  at: 0.3, taken: [{ day: 0, slot: 2, at: 2.4 }], accent: '#FF5A1F', takenLabel: 'Booked' });
+```
+
+**`menu`** — a menu or catalogue: REAL products and prices (`list_catalog` or the Ignix store), cascading in, one `highlight`ed. Optional `image` (local file) and `note` per item.
+
+```js
+const mn = IgnixMenu.create(document.getElementById('menu'), {
+  title: "Today's specials", items: [{ name: 'Croissant', price: '€1.80', note: 'fresh at 8 am' }],
+  at: 0.3, step: 0.35, highlight: { index: 0, at: 1.8 }, accent: '#FF5A1F' });
+```
+
+**`beforeafter`** — before and after with a sliding curtain and handle. PHOTOS only (videos must be written in the HTML), the client's real ones, same place and framing; never a generated or retouched "before/after". `moves`: `[t, position 0–1]`.
+
+```js
+const ba = IgnixBeforeAfter.create(document.getElementById('ba'), {
+  before: 'assets/before.jpg', after: 'assets/after.jpg', labels: ['BEFORE', 'AFTER'],
+  moves: [[0, 0.5], [1.2, 0.1], [2.4, 0.9], [3.4, 0.5]] });
+```
+
+
+**`infographic`** (`IgnixInfo`) — `bars(el, { items: [{ label, value, color }], unit, at, step })` that grow with their figure, `counter(el, { from, to, at, dur, prefix, suffix, decimals })` a big number counting up, `ring(el, { value 0–1, at, label })` a progress ring. Only REAL figures of the brand, or with their source on screen.
+
+**`photos`** (`IgnixPhotos.create(el, { photos: [{ src, at, dur, from: [scale, x%, y%], to: [...], caption }], fade })`) — photos with slow push/pan (Ken Burns) and crossfades. Local files only (the client's, or licensed stock).
+
+**`quiz`** (`IgnixQuiz.create(el, { question, options, correct, at, think })`) — a question, the options one by one, a countdown to think, then the right one highlighted (`.reveal` tells you when). Great before a "comment A, B or C". The right answer must really be right.
+
+**`offer`** (`IgnixOffer.create(el, { title, oldPrice, price, badge, endsIn, cta, at })`) — old price struck, new price pops, a badge, a live countdown (`endsIn` = seconds left when the video starts) and the call to action. ONLY real offers with their real end date: a fake countdown is misleading (and unlawful in the EU).
+
+**`map`** (`IgnixMap.create(el, { image, pin: [x, y], name, address, at, width, height })`) — "we are here": the client's map screenshot (or a drawn street plan if none), a pin that drops, a pulse and the address card. The business's real address.
+
+**`steps`** (`IgnixSteps.create(el, { steps: [{ title, text, at }] })`) — a numbered step-by-step: each lights up on its word, a line runs to the next, done ones get a ✓.
+
+**`headline`** (`IgnixHeadline.create(el, { style: 'tv' | 'paper', kicker, headline, source, ticker, at })`) — a news headline. Real news with its source visible, or the brand's own announcement said as such; never an invented headline dressed as a real outlet, never a real outlet's logo.
+
+**`character`** (`IgnixCharacter.create(el, { image, at, talk: [[start, end]], bubbles: [{ text, at, dur }], bubbleSide })`) — the brand's character image (from `list_characters`, best with a transparent background) that enters, breathes, moves while its voice plays and speaks in bubbles.
+
+**`ink`** (`IgnixInk.create(canvas)`) — the hand-drawn style of procedural-film on a `<canvas width="1080" height="1920">`: `ink.frame(t, (ctx, L) => { … })` with `L.paper(ctx)` or `L.blueprint(ctx)` as the background, `L.inkPath`/`L.inkLine`/`L.inkCircle` (inked lines that tremble like a hand drawing; `draw: 0–1` draws them on), `L.hatch`/`L.crossHatch`/`L.stipple` for tone, `L.hand` for handwritten words, and `L.glowDot`, `L.ticks`, `L.bracket`, `L.guideCircle`, `L.arcAnnotation` for blueprint diagrams. Each function documents its options inside `ink.js`. A whole explainer can live in this style, or one stretch of a video.
+
+Every block draws itself with `x.draw(t)` inside `run()`.
+
+**Mixing them.** Blocks combine with each other and with the normal direction (recreated screens, captions, the camera): one block per stretch (open with a stickman sketch, explain on the whiteboard, then the usual screens), or several at once (the stickman pointing at what the whiteboard draws, a chat inside a scene with captions over it). Give each its own container, show it only during its stretch (toggle `display` from `t`) and change on the word that motivates it, with a transition (a quick slide, wipe or scale) rather than a hard swap.
+
 ## 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/beforeafter.js

@@ -0,0 +1,53 @@
+/*
+ * beforeafter.js — bloque de Ignix Editor: antes y después con una cortina que se
+ * desliza entre las dos FOTOS, con su asa y sus etiquetas. Función pura del tiempo. Solo
+ * fotos: un <video> creado desde JS el motor no lo ve (para vídeos, escríbelos en el HTML
+ * y recórtalos igual con clip-path).
+ *
+ * Fotos REALES del cliente (el mismo sitio, persona u objeto, mismo encuadre). Nunca un
+ * «antes/después» generado o retocado para exagerar: en salud, belleza o reformas eso es
+ * engañoso.
+ *
+ *   const BA = IgnixBeforeAfter.create(document.getElementById('ba'), {
+ *     before: 'assets/before.jpg', after: 'assets/after.jpg',
+ *     labels: ['BEFORE', 'AFTER'],
+ *     moves: [[0.4, 0.5], [1.6, 0.08], [3.0, 0.92], [4.2, 0.5]],   // [t, posición 0-1 de la cortina]
+ *   });
+ *   run({ id, duration, fps }, (t) => BA.draw(t));
+ *
+ * El contenedor tiene el tamaño que le des en CSS; las fotos lo cubren (object-fit: cover).
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const inOut = (x) => (x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2);
+
+  function create(box, { before, after, labels = ['BEFORE', 'AFTER'], moves = [[0, 0.5]], dur = 0.9, handle = '#FFFFFF', fontSize = 40 } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { position: 'relative', overflow: 'hidden' });
+    const media = (src) => `<img src="${src}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">`;
+    const tag = (txt, side) => `<div style="position:absolute;top:${fontSize * 0.6}px;${side}:${fontSize * 0.6}px;background:rgba(0,0,0,.6);color:#fff;font-weight:900;font-size:${fontSize}px;padding:${fontSize * 0.2}px ${fontSize * 0.45}px;border-radius:${fontSize * 0.3}px;letter-spacing:.04em">${txt}</div>`;
+    box.innerHTML =
+      `<div class="a" style="position:absolute;inset:0">${media(after)}${tag(labels[1], 'right')}</div>` +
+      `<div class="b" style="position:absolute;inset:0;clip-path:inset(0 50% 0 0)">${media(before)}${tag(labels[0], 'left')}</div>` +
+      // El asa va en una capa del ancho del contenedor movida con transform (translateX en %
+      // es del propio ancho = el del contenedor): sin `left`, que salta de píxel en píxel.
+      `<div class="h" data-layout-allow-overflow style="position:absolute;inset:0;pointer-events:none;transform:translateX(50%)">` +
+      `<div style="position:absolute;top:0;bottom:0;left:0;width:${Math.max(4, fontSize * 0.14)}px;margin-left:-${Math.max(2, fontSize * 0.07)}px;background:${handle};box-shadow:0 0 18px rgba(0,0,0,.35)"></div>` +
+      `<div style="position:absolute;top:50%;left:0;width:${fontSize * 2}px;height:${fontSize * 2}px;margin:-${fontSize}px 0 0 -${fontSize}px;border-radius:50%;background:${handle};box-shadow:0 6px 18px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-size:${fontSize * 0.9}px;font-weight:900;color:#333">⇆</div></div>`;
+    const b = box.querySelector('.b'), h = box.querySelector('.h');
+
+    function draw(t) {
+      let pos = moves[0][1];
+      for (let i = 1; i < moves.length; i++) {
+        const [tk, v] = moves[i];
+        if (t < tk) break;
+        pos = pos + (v - pos) * inOut(clamp01((t - tk) / dur));
+      }
+      const pct = (clamp01(pos) * 100).toFixed(2);
+      b.style.clipPath = `inset(0 ${(100 - pct).toFixed(2)}% 0 0)`;
+      h.style.transform = `translateX(${pct}%)`;
+    }
+    return { draw };
+  }
+  window.IgnixBeforeAfter = { create };
+})();

package/src/runtime/blocks/character.js

@@ -0,0 +1,55 @@
+/*
+ * character.js — bloque de Ignix Editor: el personaje de la marca (una imagen: la del
+ * personaje de Ignix, list_characters, idealmente con fondo transparente) que entra,
+ * respira, se mueve al hablar y dice cosas en bocadillos. Función pura del tiempo.
+ *
+ *   const CH = IgnixCharacter.create(document.getElementById('char'), {
+ *     image: 'assets/fox.png', at: 0.2,
+ *     talk: [[0.6, 2.4], [3.0, 4.6]],                         // tramos en los que habla (su voz)
+ *     bubbles: [{ text: 'Hi! I answer your DMs at night.', at: 0.6, dur: 1.9 }],
+ *     bubbleSide: 'right',
+ *   });
+ *   run({ id, duration, fps }, (t) => CH.draw(t));
+ *
+ * El contenedor fija el tamaño del personaje; el bocadillo sale por encima de él.
+ */
+(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;
+
+  function create(box, { image, at = 0, talk = [], bubbles = [], bubbleSide = 'right', fontSize = 46, ink = '#1F1D1B', bubble = '#FFFFFF' } = {}) {
+    box.innerHTML = '';
+    Object.assign(box.style, { position: 'relative' });
+    const img = document.createElement('img');
+    img.src = image;
+    Object.assign(img.style, { position: 'absolute', inset: '0', width: '100%', height: '100%', objectFit: 'contain', objectPosition: '50% 100%', transformOrigin: '50% 100%', opacity: '0' });
+    box.appendChild(img);
+    const bs = bubbles.map((b) => {
+      const el = document.createElement('div');
+      Object.assign(el.style, {
+        position: 'absolute', bottom: '92%', [bubbleSide === 'left' ? 'right' : 'left']: '42%', width: 'max-content', maxWidth: `${fontSize * 13}px`,
+        background: bubble, color: ink, fontSize: `${fontSize}px`, fontWeight: '800', lineHeight: '1.25', padding: `${fontSize * 0.45}px ${fontSize * 0.6}px`,
+        borderRadius: `${fontSize * 0.7}px`, boxShadow: '0 14px 30px rgba(0,0,0,.18)', opacity: '0', transformOrigin: bubbleSide === 'left' ? '100% 100%' : '0% 100%',
+      });
+      el.textContent = b.text;
+      box.appendChild(el);
+      return { el, at: b.at, end: b.at + (b.dur ?? 2) };
+    });
+    return {
+      draw(t) {
+        const k = clamp01((t - at) / 0.45);
+        const speaking = talk.some(([a, b]) => t >= a && t <= b);
+        const breathe = Math.sin(t * 2.2) * 0.012;
+        const talkBob = speaking ? Math.abs(Math.sin(t * 11)) * 0.035 : 0;
+        img.style.opacity = clamp01(k * 2).toFixed(3);
+        img.style.transform = `translateY(${((1 - outBack(k)) * 120).toFixed(1)}px) scale(${(1 + breathe).toFixed(4)}, ${(1 - breathe + talkBob).toFixed(4)}) rotate(${(speaking ? Math.sin(t * 5) * 1.5 : 0).toFixed(2)}deg)`;
+        for (const b of bs) {
+          const kin = clamp01((t - b.at) / 0.25), kout = clamp01((t - b.end) / 0.2);
+          b.el.style.opacity = (kin * (1 - kout)).toFixed(3);
+          b.el.style.transform = `scale(${(0.6 + 0.4 * outBack(kin)).toFixed(4)})`;
+        }
+      },
+    };
+  }
+  window.IgnixCharacter = { create };
+})();

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/headline.js

@@ -0,0 +1,47 @@
+/*
+ * headline.js — bloque de Ignix Editor: titular de noticia. Estilo TV (franja «ÚLTIMA
+ * HORA» con titular y rótulo que corre) o estilo periódico (cabecera, titular grande y
+ * fuente). Función pura del tiempo.
+ *
+ * Solo noticias REALES y con su fuente a la vista, o un anuncio de la propia marca dicho
+ * como tal. Nunca un titular inventado con aspecto de medio real ni el logo de un medio.
+ *
+ *   const H = IgnixHeadline.create(document.getElementById('news'), {
+ *     style: 'tv',                                  // tv | paper
+ *     kicker: 'BREAKING', headline: 'Instagram now lets you schedule DMs',
+ *     source: 'Source: Instagram blog, 8 Oct 2026', ticker: 'Comment-to-DM · Auto replies · Bookings',
+ *     at: 0.3, accent: '#E0252B',
+ *   });
+ *   run({ id, duration, fps }, (t) => H.draw(t));
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outCubic = (x) => 1 - (1 - x) ** 3;
+
+  function create(box, { style = 'tv', kicker = 'BREAKING', headline = '', source = '', ticker = '', masthead = 'THE DAILY', at = 0, accent = '#E0252B', ink = '#1F1D1B', fontSize = 56 } = {}) {
+    box.innerHTML = '';
+    let parts;
+    if (style === 'paper') {
+      Object.assign(box.style, { background: '#F4EFE4', color: ink, padding: `${fontSize}px ${fontSize * 0.8}px`, fontFamily: "Georgia, 'Times New Roman', serif", boxShadow: '0 30px 60px rgba(0,0,0,.25)', opacity: '0' });
+      box.innerHTML = `<div style="text-align:center;font-size:${fontSize * 1.1}px;font-weight:700;letter-spacing:.06em;border-bottom:4px double ${ink};padding-bottom:${fontSize * 0.3}px">${masthead}</div><div class="h" style="font-size:${fontSize * 1.25}px;font-weight:700;line-height:1.1;margin-top:${fontSize * 0.6}px"></div>${source ? `<div class="s" style="margin-top:${fontSize * 0.5}px;font-size:${fontSize * 0.45}px;font-style:italic;opacity:0">${source}</div>` : ''}`;
+      parts = { h: box.querySelector('.h'), s: box.querySelector('.s') };
+    } else {
+      Object.assign(box.style, { color: '#fff', fontFamily: "'Montserrat', Arial, sans-serif", opacity: '0' });
+      box.innerHTML = `<div class="k" style="display:inline-block;background:${accent};font-weight:900;font-size:${fontSize * 0.7}px;padding:${fontSize * 0.15}px ${fontSize * 0.45}px;letter-spacing:.05em;transform-origin:0 50%">${kicker}</div><div style="background:${ink};padding:${fontSize * 0.35}px ${fontSize * 0.45}px"><div class="h" style="font-size:${fontSize}px;font-weight:900;line-height:1.15"></div>${source ? `<div class="s" style="font-size:${fontSize * 0.42}px;opacity:0;margin-top:6px">${source}</div>` : ''}</div>${ticker ? `<div style="background:#fff;color:${ink};overflow:hidden;white-space:nowrap;font-weight:800;font-size:${fontSize * 0.5}px;padding:${fontSize * 0.15}px 0"><span class="tk" style="display:inline-block;padding-left:100%">${ticker}   •   ${ticker}</span></div>` : ''}`;
+      parts = { h: box.querySelector('.h'), s: box.querySelector('.s'), k: box.querySelector('.k'), tk: box.querySelector('.tk') };
+    }
+    return {
+      draw(t) {
+        const k = clamp01((t - at) / 0.35);
+        box.style.opacity = clamp01(k * 2).toFixed(3);
+        box.style.transform = `translateY(${((1 - outCubic(k)) * 60).toFixed(1)}px)`;
+        if (parts.k) parts.k.style.transform = `scaleX(${outCubic(clamp01((t - at) / 0.3)).toFixed(4)})`;
+        const n = Math.round(clamp01((t - at - 0.3) / Math.max(0.4, headline.length * 0.035)) * headline.length);
+        parts.h.textContent = headline.slice(0, n) || '​';
+        if (parts.s) parts.s.style.opacity = clamp01((t - at - 0.4 - headline.length * 0.035) / 0.3).toFixed(3);
+        if (parts.tk) parts.tk.style.transform = `translateX(${(-((t - at) * 120) % 4000).toFixed(1)}px)`;
+      },
+    };
+  }
+  window.IgnixHeadline = { create };
+})();

package/src/runtime/blocks/infographic.js

@@ -0,0 +1,74 @@
+/*
+ * infographic.js — bloque de Ignix Editor: infografía. Barras que crecen con su cifra,
+ * un número grande que cuenta y un anillo de progreso. Función pura del tiempo.
+ *
+ * Solo cifras REALES de la marca o con su fuente (dila en pantalla): nunca inventadas.
+ *
+ *   const I = IgnixInfo;
+ *   const bars = I.bars(document.getElementById('bars'), {
+ *     items: [{ label: 'Before', value: 12 }, { label: 'With Ignix', value: 48, color: '#FF5A1F' }],
+ *     unit: ' bookings', at: 0.4, step: 0.35 });
+ *   const big = I.counter(document.getElementById('big'), { to: 312, at: 0.3, dur: 1.4, prefix: '+', suffix: '%' });
+ *   const ring = I.ring(document.getElementById('ring'), { value: 0.82, at: 0.5, label: 'answered in < 1 min' });
+ *   run({ id, duration, fps }, (t) => { bars.draw(t); big.draw(t); ring.draw(t); });
+ */
+(function () {
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const outCubic = (x) => 1 - (1 - x) ** 3;
+  const fmt = (v, decimals, sep) => {
+    const s = v.toFixed(decimals);
+    const [i, d] = s.split('.');
+    return i.replace(/\B(?=(\d{3})+(?!\d))/g, sep) + (d ? `.${d}` : '');
+  };
+
+  function bars(box, { items = [], max, unit = '', at = 0, step = 0.3, dur = 0.9, accent = '#1F1D1B', ink = '#1F1D1B', track = 'rgba(0,0,0,.08)', fontSize = 42, decimals = 0, sep = ',' } = {}) {
+    const top = max ?? Math.max(...items.map((i) => i.value), 1);
+    box.innerHTML = '';
+    Object.assign(box.style, { display: 'flex', flexDirection: 'column', gap: `${fontSize * 0.7}px` });
+    const rows = items.map((it, i) => {
+      const r = document.createElement('div');
+      r.innerHTML = `<div style="display:flex;justify-content:space-between;font-size:${fontSize}px;font-weight:800;color:${ink};margin-bottom:${fontSize * 0.25}px"><span>${it.label}</span><span class="v"></span></div><div style="height:${fontSize * 0.9}px;border-radius:${fontSize}px;background:${track};overflow:hidden"><div class="f" style="height:100%;width:100%;border-radius:${fontSize}px;background:${it.color ?? accent};transform-origin:0 50%;transform:scaleX(0)"></div></div>`;
+      r.style.opacity = '0';
+      box.appendChild(r);
+      return { el: r, v: r.querySelector('.v'), f: r.querySelector('.f'), at: at + i * step, value: it.value };
+    });
+    return {
+      draw(t) {
+        for (const r of rows) {
+          const k = outCubic(clamp01((t - r.at) / dur));
+          r.el.style.opacity = clamp01((t - r.at) / 0.2).toFixed(3);
+          r.f.style.transform = `scaleX(${((r.value / top) * k).toFixed(4)})`;
+          r.v.textContent = fmt(r.value * k, decimals, sep) + unit;
+        }
+      },
+    };
+  }
+
+  function counter(box, { from = 0, to, at = 0, dur = 1.2, prefix = '', suffix = '', decimals = 0, sep = ',', fontSize = 220, color = '#1F1D1B' } = {}) {
+    Object.assign(box.style, { fontSize: `${fontSize}px`, fontWeight: '900', color, lineHeight: '1', fontVariantNumeric: 'tabular-nums' });
+    return {
+      draw(t) {
+        const k = outCubic(clamp01((t - at) / dur));
+        box.style.opacity = t >= at ? '1' : '0';
+        box.textContent = prefix + fmt(from + (to - from) * k, decimals, sep) + suffix;
+        box.style.transform = `scale(${(0.85 + 0.15 * k).toFixed(4)})`;
+      },
+    };
+  }
+
+  function ring(box, { value = 0.75, at = 0, dur = 1.2, size = 420, width = 44, accent = '#FF5A1F', track = 'rgba(0,0,0,.08)', label = '', ink = '#1F1D1B', suffix = '%' } = {}) {
+    const r = (size - width) / 2, c = 2 * Math.PI * r;
+    box.innerHTML = `<div style="position:relative;width:${size}px;height:${size}px;margin:0 auto"><svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" style="transform:rotate(-90deg)"><circle cx="${size / 2}" cy="${size / 2}" r="${r}" fill="none" stroke="${track}" stroke-width="${width}"/><circle class="p" cx="${size / 2}" cy="${size / 2}" r="${r}" fill="none" stroke="${accent}" stroke-width="${width}" stroke-linecap="round" stroke-dasharray="${c} ${c}" stroke-dashoffset="${c}"/></svg><div class="n" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:${size * 0.24}px;font-weight:900;color:${ink}"></div></div>${label ? `<div style="text-align:center;margin-top:${size * 0.06}px;font-size:${size * 0.09}px;font-weight:700;color:${ink}">${label}</div>` : ''}`;
+    const p = box.querySelector('.p'), n = box.querySelector('.n');
+    return {
+      draw(t) {
+        const k = outCubic(clamp01((t - at) / dur));
+        box.style.opacity = t >= at ? '1' : '0';
+        p.setAttribute('stroke-dashoffset', String(c * (1 - value * k)));
+        n.textContent = `${Math.round(value * 100 * k)}${suffix}`;
+      },
+    };
+  }
+
+  window.IgnixInfo = { bars, counter, ring };
+})();