@ignix-social/editor 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ignix-social/editor",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "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

@@ -114,7 +114,7 @@ Decide the zones once per video (e.g. header y 270–440, stage y 460–1300, ca
 
 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).
+**`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; pass `theme` in the state to `draw()` to switch it per frame, e.g. dark scene → white whiteboard, with the same figure).
 
 ```html
 <svg id="stage" viewBox="0 0 1080 1920" style="position:absolute;inset:0;width:1080px;height:1920px"></svg>
@@ -159,7 +159,7 @@ const chat = IgnixChat.create(document.getElementById('screen'), {
 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.
+**`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. `create(target, { paper })` also draws the board itself (`paper: '#F7F5F0'` or `{ color, x, y, w, h, radius, frame }`); `target` may be a `<g>` inside the `<svg>`, so scaling/translating that `<g>` moves a camera over the board. 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;
@@ -259,7 +259,7 @@ work/      transcripts, edit decisions (JSON)
 build.mjs  reads work/ + durations (ignix-editor ffprobe) → writes assets/timing.js and the <video>/<audio> tags between markers in index.html
 ```
 
-Re-run it whenever the voice or the cuts change; the animation code reads `window.R` from `assets/timing.js` and never hardcodes seconds.
+Re-run it whenever the voice or the cuts change; the animation code reads `window.R` from `assets/timing.js` and never hardcodes seconds. Keep any HTML template the script reads in `work/`, never next to `index.html`: a second root HTML with `data-composition-id` fails `check` (`multiple_root_compositions`).
 
 ## 6. Traps that do not error
 
@@ -279,5 +279,5 @@ Re-run it whenever the voice or the cuts change; the animation code reads `windo
 Only if the app offers no way, give the user ONE line to paste into Terminal, e.g. `cd ~/ignix-videos/<name> && ~/.ignix-editor/cli/node_modules/.bin/ignix-editor render`, never the contents of a script file (a `#!` line breaks zsh), then continue when they say it finished.
 
 1. `ignix-editor check` → 0 errors.
-2. `ignix-editor snapshot --at <every ~0.5 s and every cue>` and LOOK at the frames (or tile them: `ignix-editor ffmpeg -pattern_type glob -i 'snapshots/frame-*.png' -vf "scale=270:480,tile=8x2" sheet.jpg`). Check: hook readable at frame 0, nothing still for >1.5 s, every named thing pointed at on its word, captions never over what is pointed at, nothing outside the safe zone.
+2. `ignix-editor snapshot --at <every ~0.5 s and every cue>` and LOOK at the frames — it also writes them tiled as `snapshots/contact-sheet*.jpg`, the quickest to read. Check: hook readable at frame 0, nothing still for >1.5 s, every named thing pointed at on its word, captions never over what is pointed at, nothing outside the safe zone.
 3. `ignix-editor render` → it reviews the MP4 by itself and prints `✓ Review: ready to show` or `✗ Review: NOT READY` with what to fix and where (stretches where nothing on the stage moves, a mostly empty frame, silences between voice lines, no change of scene). NOT READY means it is not finished: fix every ✗, render again, and only then show it. The `!` lines are worth fixing too when it is quick. (`ignix-editor review <mp4>` runs the same check on any video.) Then open the MP4's first frame and a few cues again, and deliver as the playbook says.

package/src/runtime/blocks/stickman.js

@@ -182,10 +182,16 @@
   // 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;
+    // Colores según el tema; `draw` puede cambiar de tema en cada fotograma (escena oscura →
+    // pizarra blanca) sin crear otro monigote.
+    let ink, headFill, hairFill;
+    function palette(theme) {
+      const dark = theme === 'dark';
+      ink = dark ? '#F3F0EA' : '#1F1D1B';
+      headFill = dark ? '#2A3038' : '#FFFFFF';
+      hairFill = dark && lum(L.hairColor) <= 0.25 ? '#D9D4CC' : L.hairColor;
+    }
+    palette(L.theme);
     const tie = lum(L.color) > 0.2 ? '#2B2F3A' : '#E8E2D8';
     const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
     svg.appendChild(g);
@@ -263,9 +269,10 @@
       return s;
     }
 
-    // state: { x, ground, scale, facing, joints, face, mouth, eyesOpen, alpha, pop, lift }
+    // state: { x, ground, scale, facing, joints, face, mouth, eyesOpen, alpha, pop, lift, theme }
     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 st = { scale: 1, facing: 1, mouth: 0, eyesOpen: 1, alpha: 1, pop: 1, lift: 0, face: 'neutral', joints: 'idle', theme: L.theme, ...state };
+      palette(st.theme);
       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);

package/src/runtime/blocks/whiteboard.js

@@ -57,8 +57,19 @@
   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' } = {}) {
+  // `svg` puede ser el <svg> o un <g> dentro de él (para mover una «cámara» sobre la
+  // pizarra: escala/traslada el <g>). `paper` dibuja la pizarra en sí: un color, o
+  // { color, x, y, w, h, radius, frame } (por defecto 0,0,1080,1920 sin marco).
+  function create(svg, { ink = '#1F1D1B', width = 9, marker = true, markerColor = '#2B6CB0', paper = null } = {}) {
     const items = [];
+    if (paper) {
+      const P = typeof paper === 'string' ? { color: paper } : paper;
+      const bg = document.createElementNS(NS, 'rect');
+      const attrs = { x: P.x ?? 0, y: P.y ?? 0, width: P.w ?? 1080, height: P.h ?? 1920, rx: P.radius ?? 0, fill: P.color ?? '#F7F5F0' };
+      if (P.frame) Object.assign(attrs, { stroke: P.frame === true ? '#C9C4BA' : P.frame, 'stroke-width': P.frameWidth ?? 14 });
+      for (const [k, v] of Object.entries(attrs)) bg.setAttribute(k, String(v));
+      svg.appendChild(bg);
+    }
     const layer = document.createElementNS(NS, 'g');
     svg.appendChild(layer);
     let pen = null;
@@ -109,11 +120,12 @@
       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 });
+      // El ancho se MIDE en cada fotograma (getComputedTextLength: geometría del texto con
+      // la fuente ya cargada, igual en todos los fotogramas del render) para que el
+      // rotulador acabe donde acaba la palabra. Si aún no se puede medir, estimación por lo
+      // alto (~0,8 em por carácter): la máscara solo descubre y al acabar se quita.
+      const est = text.length * size * 0.8;
+      items.push({ kind: 'text', el: tx, rect: r, at, dur, x, anchor, est, y: y - size, h: size * 1.4 });
       return tx;
     }
 
@@ -127,6 +139,14 @@
           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 {
+          let w = it.est;
+          try {
+            w = it.el.getComputedTextLength() || it.est;
+          } catch {
+            /* sin medida: estimación */
+          }
+          it.w = w;
+          it.x0 = it.anchor === 'middle' ? it.x - w / 2 : it.anchor === 'end' ? it.x - w : it.x;
           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.

package/src/transcribe.mjs

@@ -95,7 +95,7 @@ export function alignToScript(script, tokens, end) {
   let i = 0;
   for (let j = 0; j < tokens.length && i < sw.length; j++) {
     const tk = tokens[j];
-    const tEnd = j + 1 < tokens.length ? tokens[j + 1].s : Math.max(tk.e, end);
+    const tEnd = j + 1 < tokens.length ? tokens[j + 1].s : end > 0 ? end : tk.e;
     // whisper juntó dos palabras en una («a DM» → «ADM»)
     if (i + 1 < sw.length && norm(sw[i] + sw[i + 1]) === norm(tk.t) && norm(sw[i]) !== norm(tk.t)) {
       const mid = tk.s + (tEnd - tk.s) * (sw[i].length / (sw[i].length + sw[i + 1].length));
@@ -118,7 +118,10 @@ export function alignToScript(script, tokens, end) {
       s = e;
     }
   }
-  return out.map((w) => ({ t: w.t, s: +w.s.toFixed(3), e: +w.e.toFixed(3) }));
+  // whisper trabaja en ventanas de 30 s y a veces pone el final de la última palabra más
+  // allá del audio (una frase de 2,76 s con «Ignix» acabando en 3,6 s): nada pasa del final.
+  const cap = end > 0 ? (x) => Math.min(x, end) : (x) => x;
+  return out.map((w) => ({ t: w.t, s: +cap(w.s).toFixed(3), e: +cap(w.e).toFixed(3) }));
 }
 
 /**