@ignix-social/editor 0.1.21 → 0.1.22

package/package.json

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

@@ -170,6 +170,60 @@ 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/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/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 };
+})();