@7ots/cli 0.1.1 → 0.1.4

package/src/character/Character.js

@@ -13,16 +13,24 @@
  *   const stop = ch.lipsync(analyserNode);              // …o del audio real (Web Audio)
  *   ch.mouth(0.7); ch.lookAt(0.5, -0.2); ch.update(otroSpec);
  *
+ * La piel (textura de superficie: pelo, escamas, plumas…, `texture`) y la unión de las piezas
+ * que crecen del cuerpo (pinchos, alas, brazos, orejas…) están en skin.js.
+ *
  * Gestos, metamorfosis, efectos y visemas están en motion.js. Todo es temporal salvo que se
  * pida { hold: true }, y con prefers-reduced-motion el cuerpo no se mueve.
  *
+ * Estilos artísticos (`style`: ukiyo-e, plastilina, vitral, Bauhaus, manuscrito, glitch, tinta)
+ * en styles.js: remapean la paleta, añaden un filtro y una capa al cuerpo y un fondo a juego.
+ *
  * Todo el SVG sale de catálogos propios; lo que llega del usuario se reduce a ids de catálogo,
  * colores #rrggbb y números acotados (normalizeCharacter), así que es seguro inyectarlo.
  */
 
 import {
-  BODY_POINTS, SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, ACCESSORIES, PRESETS, shade, luminance,
+  BODY_POINTS, SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, TEXTURES, ACCESSORIES, PRESETS, shade, luminance,
 } from './parts.js';
+import { renderSkin, joinSVG } from './skin.js';
+import { STYLE_IDS, stylizeSpec, styleLayers, styleSeed, backdropIn, backdropCSS } from './styles.js';
 import { translator } from '../i18n/index.js';
 import {
   GESTURES, GESTURE_ALIAS, MORPHS, EFFECTS, VISEMES, POSE0, EASE, clamp, lerp, approach, seeded,
@@ -63,6 +71,7 @@ const MOUTH = byId(MOUTHS);
 const CHEEK = byId(CHEEKS);
 const PATTERN = byId(PATTERNS);
 const FINISH = byId(FINISHES);
+const TEXTURE = byId(TEXTURES);
 const ACC = byId(ACCESSORIES);
 const PRESET = byId(PRESETS);
 
@@ -70,6 +79,7 @@ export const DEFAULT_CHARACTER = Object.freeze({
   v: 1,
   body: { shape: 'pou', points: null, color: '#a0714f', pattern: 'belly', patternColor: '#c9a27e' },
   finish: 'glossy',
+  texture: 'auto',
   outline: 'auto',
   eyes: { type: 'round', size: 1, spacing: 1, y: 0, iris: '#3b82f6', white: '#ffffff', ink: '#1a1a24' },
   brows: { type: 'none', color: '' },
@@ -137,7 +147,11 @@ export function normalizeCharacter(input = {}) {
       patternColor: hex(body.patternColor, shade(bodyColor, 0.3)),
     },
     finish: pickId(FINISH, i.finish ?? base.finish, 'glossy'),
+    // textura de superficie; 'auto' (o ausente, specs antiguas) la elige la propia spec (skin.js)
+    texture: pickId(TEXTURE, i.texture ?? base.texture, 'auto'),
     outline: ['auto', 'none', 'thin', 'bold'].includes(i.outline) ? i.outline : 'auto',
+    // estilo artístico (styles.js); 'none' no se guarda: las specs de siempre no cambian
+    ...(STYLE_IDS.includes(i.style ?? base.style) && (i.style ?? base.style) !== 'none' ? { style: i.style ?? base.style } : {}),
     eyes: {
       type: pickId(EYE, eyes.type, 'round'),
       size: num(eyes.size, 1, 0.4, 2.2),
@@ -282,6 +296,8 @@ function palette(spec) {
 function outlineOf(spec, pal) {
   const o = spec.outline;
   if (o === 'none') return null;
+  // el estilo artístico manda en el trazo (lw 0: sin contorno, p. ej. plastilina)
+  if (spec._style) return spec._style.lw ? { color: spec._style.ink, w: spec._style.lw } : null;
   if (o === 'bold' || spec.finish === 'toon') return { color: '#1f2937', w: 4.5 };
   if (spec.finish === 'sketch') return { color: '#1f2937', w: 2.2 };
   if (spec.finish === 'neon') return { color: spec.body.color, w: 3.5 };
@@ -334,9 +350,15 @@ function mouthSVG(spec, L, st, pal) {
   return `<g transform="translate(${R(L.cx)} ${R(L.mouthY)})${sc}">${MOUTH[spec.mouth.type].draw(p)}</g>`;
 }
 
-function accessorySVG(a, spec, L, pal, clipUrl) {
+/** ¿Esta pieza crece del cuerpo? Solo si sigue cerca de su ancla (si el usuario la movió, va encima como antes). */
+function growing(a, part) {
+  return !!part.grow && !!part.shape && Math.abs(a.x) <= 24 && a.y <= 12 && a.y >= -40 && Math.abs(a.rot) <= 35 && a.scale >= 0.6;
+}
+
+function accessorySVG(a, spec, L, pal, clipUrl, skin, key) {
   const part = ACC[a.id];
   const at = L.anchors[part.anchor] || L.anchors.center;
+  const grow = growing(a, part);
   const c = {
     k: L.box.w / 120,
     m: L.mw / 16,
@@ -352,20 +374,45 @@ function accessorySVG(a, spec, L, pal, clipUrl) {
     body: pal.body,
     above: at.y - L.box.y,
     below: L.anchors.bottom.y - at.y,
+    grow,
   };
   const tf = `translate(${R(at.x + a.x)} ${R(at.y + a.y)}) rotate(${R(a.rot)}) scale(${R(a.flip ? -a.scale : a.scale)} ${R(a.scale)})`;
   const main = `<g transform="${tf}">${part.draw(c)}</g>`;
   const extra = part.extra ? `<g transform="${tf}">${part.extra(c)}</g>` : '';
   const clip = (s) => (s ? `<g clip-path="${clipUrl}">${s}</g>` : '');
-  if (part.clip) return clip(main) + extra;
-  if (part.clipExtra) return main + clip(extra);
-  return main + extra;
+  if (grow) {
+    // unida: luz del cuerpo (y su textura si es de piel, p. ej. orejas) + sombra de contacto
+    const shapes = part.shape(c).map((sh) => ({ ...sh, tf: sh.tf ? `${tf} ${sh.tf}` : tf }));
+    let over = '';
+    for (const sh of shapes) {
+      const T = ` transform="${sh.tf}"`;
+      if (sh.sw) {
+        if (skin.lit) over += `<path d="${sh.d}"${T} fill="none" stroke="${skin.lit}" stroke-width="${sh.sw}" stroke-linecap="round"/>`;
+        continue;
+      }
+      if (skin.lit) over += `<path d="${sh.d}"${T} fill="${skin.lit}"/>`;
+      if (part.grow === 'skin' && skin.tex) over += `<path d="${sh.d}"${T} fill="${skin.tex}"/>`;
+    }
+    const j = joinSVG(skin, shapes, key);
+    return { svg: main + over + j.shadow + extra, mask: j.mask };
+  }
+  if (part.clip) return { svg: clip(main) + extra, mask: '' };
+  if (part.clipExtra) return { svg: main + clip(extra), mask: '' };
+  return { svg: main + extra, mask: '' };
+}
+
+/** Máscara del contorno del cuerpo: blanco salvo donde nacen las piezas unidas (en negro). */
+export function outlineMask(uid, inner) {
+  return `<mask id="${uid}-om" maskUnits="userSpaceOnUse" x="-600" y="-600" width="1400" height="1400"><rect x="-600" y="-600" width="1400" height="1400" fill="#fff"/>${inner}</mask>`;
 }
 
 /**
  * Piezas del SVG por capas (lo usa createCharacter para animar sin re-renderizar todo).
  * opts.pts: contorno deformado (metamorfosis) en lugar del de la spec.
- * @returns {{ viewBox:string, defs:string, back:string, body:string, cheeks:string, eyes:string, brows:string, mouth:string, front:string, L:object }}
+ * opts.detail: 'full' | 'lite' (sin filtros en la textura) | 'off' (sin textura).
+ * opts.live: la máscara del contorno la gestiona quien llama (outlineMask con `mask` + la de las metamorfosis).
+ * opts.animate: animar los filtros del estilo (glitch); spec ya estilizada con stylizeSpec.
+ * @returns {{ viewBox:string, defs:string, back:string, body:string, cheeks:string, eyes:string, brows:string, mouth:string, front:string, mask:string, filter:string, skin:object, L:object }}
  */
 export function renderLayers(spec, state = {}, opts = {}) {
   const st = { open: 0, blink: 0, lx: 0, ly: 0, mood: 'neutral', browLift: 0, ...state };
@@ -381,9 +428,14 @@ export function renderLayers(spec, state = {}, opts = {}) {
 
   let defs = `<clipPath id="${id}-clip"><path d="${d}"/></clipPath>`;
   let fill = col;
+  let stops = null;
   if (f === 'glossy' || f === 'soft3d' || f === 'clay') {
     const [a, b] = f === 'glossy' ? [0.38, -0.28] : f === 'soft3d' ? [0.22, -0.2] : [0.14, -0.22];
-    defs += `<radialGradient id="${id}-g" cx="36%" cy="28%" r="85%"><stop offset="0" stop-color="${shade(col, a)}"/><stop offset=".55" stop-color="${col}"/><stop offset="1" stop-color="${shade(col, b)}"/></radialGradient>`;
+    stops = [[0, shade(col, a)], [0.55, col], [1, shade(col, b)]];
+    // en espacio de usuario (con la caja del cuerpo): las piezas unidas que lo usan siguen la misma luz
+    defs += `<radialGradient id="${id}-g" gradientUnits="userSpaceOnUse" cx=".36" cy=".28" r=".85" gradientTransform="translate(${R(box.x)} ${R(box.y)}) scale(${R(box.w)} ${R(box.h)})">${stops.map(([o, c]) => `<stop offset="${o}" stop-color="${c}"/>`).join('')}</radialGradient>`;
+    // la misma luz, en translúcido, para piezas de otro color (cuernos, orejas…)
+    defs += `<radialGradient id="${id}-lit" cx="32%" cy="24%" r="90%"><stop offset="0" stop-color="#fff" stop-opacity=".3"/><stop offset=".5" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#000" stop-opacity=".22"/></radialGradient>`;
     fill = `url(#${id}-g)`;
   }
   if (f === 'soft3d') defs += `<filter id="${id}-soft" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="${R(box.w * 0.06)}"/></filter>`;
@@ -394,13 +446,38 @@ export function renderLayers(spec, state = {}, opts = {}) {
     defs += `<pattern id="${id}-hatch" width="7" height="7" patternUnits="userSpaceOnUse" patternTransform="rotate(40)"><path d="M0 0V7" stroke="${shade(col, -0.35)}" stroke-width="1.4" opacity=".45"/></pattern>`;
   }
 
+  // Piel: textura de superficie y lo que comparten las piezas unidas (metamorfosis y accesorios)
+  const bodyFill = f === 'neon' ? shade(col, -0.72) : fill;
+  const sk = renderSkin(spec, L, opts.pts ? layout(spec) : L, { id, d, fill: bodyFill, col, line: ol, quality: opts.detail || 'full' });
+  defs += sk.defs;
+  const skin = {
+    uid: id, d, box, clip: clipUrl, fill: bodyFill, stops: f === 'neon' ? null : stops, solid: bodyFill.startsWith('#') ? bodyFill : col,
+    lit: stops ? `url(#${id}-lit)` : '', tex: sk.part, texture: sk.tex,
+    line: ol ? ol.color : '', lw: ol ? R(Math.min(ol.w, 3.2)) : 0, lineOp: ol?.op || 0,
+  };
+
+  // Accesorios (los que crecen del cuerpo van detrás y recortan su contorno)
+  let back = '';
+  let front = '';
+  let mask = '';
+  spec.accessories.forEach((a, i) => {
+    const part = ACC[a.id];
+    const x = accessorySVG(a, spec, L, pal, clipUrl, skin, `a${i}`);
+    if (part.layer === 'back' || growing(a, part)) back += x.svg;
+    else front += x.svg;
+    mask += x.mask;
+  });
+  const masked = opts.live || !!mask;
+  if (mask && !opts.live) defs += outlineMask(id, mask);
+
   // Capa del cuerpo
   let body = '';
   if (f !== 'flat' && f !== 'neon') body += `<ellipse cx="${R(L.anchors.bottom.x)}" cy="${R(L.anchors.bottom.y + 5)}" rx="${R(box.w * 0.36)}" ry="${R(Math.max(4, box.h * 0.045))}" fill="#000" opacity=".13"/>`;
-  body += `<path d="${d}" fill="${f === 'neon' ? shade(col, -0.72) : fill}"${f === 'neon' ? ` filter="url(#${id}-glow)"` : ''}/>`;
+  body += `<path d="${d}" fill="${bodyFill}"${f === 'neon' ? ` filter="url(#${id}-glow)"` : ''}/>`;
   let inner = '';
   if (f === 'toon') inner += `<path d="${d}" fill="${shade(col, -0.2)}"/><path d="${d}" fill="${col}" transform="translate(${R(-box.w * 0.06)} ${R(-box.h * 0.07)})"/>`;
   if (spec.body.pattern !== 'none') inner += PATTERN[spec.body.pattern].draw({ box, color: spec.body.patternColor, eyeY: L.eyeY, r: L.r });
+  inner += sk.inner;
   if (f === 'glossy') {
     inner += `<ellipse cx="${R(box.x + box.w * 0.3)}" cy="${R(box.y + box.h * 0.2)}" rx="${R(box.w * 0.15)}" ry="${R(box.h * 0.08)}" transform="rotate(-32 ${R(box.x + box.w * 0.3)} ${R(box.y + box.h * 0.2)})" fill="#fff" opacity=".5"/>`;
     inner += `<circle cx="${R(box.x + box.w * 0.44)}" cy="${R(box.y + box.h * 0.12)}" r="${R(box.w * 0.025)}" fill="#fff" opacity=".6"/>`;
@@ -412,14 +489,15 @@ export function renderLayers(spec, state = {}, opts = {}) {
   }
   if (f === 'clay') inner += `<rect x="${R(box.x - 5)}" y="${R(box.y - 5)}" width="${R(box.w + 10)}" height="${R(box.h + 10)}" filter="url(#${id}-noise)" opacity=".13"/>`;
   if (f === 'sketch') inner += `<path d="${d}" fill="url(#${id}-hatch)" transform="translate(${R(box.w * 0.05)} ${R(box.h * 0.06)})"/>`;
+  const sty = styleLayers(spec, L, { uid: id, d, quality: opts.detail || 'full', animate: opts.animate });
+  defs += sty.defs;
+  inner += sty.inner;
   if (inner) body += `<g clip-path="${clipUrl}">${inner}</g>`;
-  if (ol) body += `<path d="${d}" fill="none" stroke="${ol.color}" stroke-width="${ol.w}" stroke-linejoin="round"${ol.op ? ` stroke-opacity="${ol.op}"` : ''}${f === 'sketch' ? ` filter="url(#${id}-rough)"` : ''}${f === 'neon' ? ` filter="url(#${id}-glow)"` : ''}/>`;
+  if (ol) body += `<path d="${d}" fill="none" stroke="${ol.color}" stroke-width="${ol.w}" stroke-linejoin="round"${ol.op ? ` stroke-opacity="${ol.op}"` : ''}${f === 'sketch' ? ` filter="url(#${id}-rough)"` : ''}${f === 'neon' ? ` filter="url(#${id}-glow)"` : ''}${masked ? ` mask="url(#${id}-om)"` : ''}/>`;
+  body += sk.rim;
 
   const cheeks = spec.cheeks.type === 'none' ? '' : `<g transform="translate(${R(L.cx)} ${R(L.eyeY)})">${CHEEK[spec.cheeks.type].draw({ sp: L.sp, r: L.r, color: spec.cheeks.color })}</g>`;
 
-  const back = spec.accessories.filter((a) => ACC[a.id].layer === 'back').map((a) => accessorySVG(a, spec, L, pal, clipUrl)).join('');
-  const front = spec.accessories.filter((a) => ACC[a.id].layer !== 'back').map((a) => accessorySVG(a, spec, L, pal, clipUrl)).join('');
-
   return {
     L,
     uid: id,
@@ -432,6 +510,9 @@ export function renderLayers(spec, state = {}, opts = {}) {
     brows: browsSVG(spec, L, st, pal),
     mouth: mouthSVG(spec, L, st, pal),
     front,
+    mask,
+    filter: sty.filter,
+    skin,
   };
 }
 
@@ -439,13 +520,17 @@ export function renderLayers(spec, state = {}, opts = {}) {
  * SVG completo como string (sirve en Node, para miniaturas o para <img src="data:…">).
  * @param {object} spec  (se normaliza)
  * @param {{open?:number, blink?:number, lx?:number, ly?:number, mood?:string}} [state]
- * @param {{viewBox?:string, title?:string}} [opts]
+ * @param {{viewBox?:string, title?:string, backdrop?:boolean}} [opts]
+ *   backdrop: con estilo artístico, pintar su fondo detrás (defecto true).
  */
 export function renderCharacter(spec, state = {}, opts = {}) {
-  const s = normalizeCharacter(spec);
+  const src = normalizeCharacter(spec);
+  const s = stylizeSpec(src);
   const x = renderLayers(s, state, opts);
   const title = opts.title ? `<title>${String(opts.title).replace(/[<>&"]/g, '')}</title>` : '';
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${x.viewBox}" role="img"${opts.title ? '' : ' aria-hidden="true"'}>${title}<defs>${x.defs}</defs>${x.back}${x.body}${x.cheeks}${x.eyes}${x.brows}${x.mouth}${x.front}</svg>`;
+  const parts = `${x.back}${x.body}${x.cheeks}${x.eyes}${x.brows}${x.mouth}${x.front}`;
+  const bd = src.style && opts.backdrop !== false ? backdropIn(src.style, styleSeed(src), x.viewBox, `${x.uid}-bd`) : '';
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${x.viewBox}" role="img"${opts.title ? '' : ' aria-hidden="true"'}>${title}<defs>${x.defs}</defs>${bd}${x.filter ? `<g filter="${x.filter}">${parts}</g>` : parts}</svg>`;
 }
 
 // ───────────────────────────── vivo ─────────────────────────────
@@ -490,6 +575,7 @@ const mixPts = (a, b, k) => a.map((p, i) => [lerp(p[0], b[i][0], k), lerp(p[1],
  *   idle: respirar, parpadear y mirar alrededor solo (defecto true).
  *   moodFx: efectos al cambiar de ánimo (pinchos al enfadarse, zzz al dormir…; defecto true).
  *   zoom: alejar el encuadre cuando una metamorfosis no cabe (defecto true con fit 'all'/'body').
+ *   backdrop: con estilo artístico, su fondo como background del <svg> (defecto true).
  */
 export function createCharacter(container, spec, opts = {}) {
   const NS = 'http://www.w3.org/2000/svg';
@@ -505,8 +591,12 @@ export function createCharacter(container, spec, opts = {}) {
   const fitMode = opts.fit || 'all';
   const canZoom = opts.zoom !== false && (fitMode === 'all' || fitMode === 'body');
   const reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+  // equipos modestos: textura sin filtros
+  const lowEnd = typeof navigator !== 'undefined' && ((navigator.hardwareConcurrency || 8) <= 2 || (navigator.deviceMemory || 8) <= 2);
 
-  let s = normalizeCharacter(spec);
+  // src: la spec tal cual (la que se devuelve); s: la que se pinta (con el estilo artístico aplicado)
+  let src = normalizeCharacter(spec);
+  let s = stylizeSpec(src);
   let uid = `otsc${(++uidSeq).toString(36)}`;
   let g = {};
   let L = layout(s);
@@ -532,11 +622,25 @@ export function createCharacter(container, spec, opts = {}) {
   let speech = null;
   let zoom = 1;
   let vb = null;
-  const keys = { body: '', eyes: '', brows: '', mouth: '', rig: '', mback: '', mfront: '', fx: '', fxface: '' };
+  let skin = null;
+  let accMask = '';
+  let morphMask = '';
+  let px = 240;
+  const keys = { body: '', eyes: '', brows: '', mouth: '', rig: '', mback: '', mfront: '', fx: '', fxface: '', mask: '', detail: '' };
+
+  /**
+   * Nivel de detalle de la piel: sin textura si se ve diminuto; sin filtros mientras el contorno
+   * se deforma (se repinta cada frame), con movimiento reducido o en equipos modestos.
+   */
+  function detail(key) {
+    if (opts.detail === 'full' || opts.detail === 'lite' || opts.detail === 'off') return opts.detail;
+    if (px < 56) return 'off';
+    return key !== 'base' || lowEnd || reduced() ? 'lite' : 'full';
+  }
 
   function build() {
     pal = palette(s);
-    svg.innerHTML = `<style>${STYLE}</style><defs data-p="defs"></defs><g class="otsc-rig"><g data-p="fxback"></g><g class="otsc-sway"><g class="otsc-breathe"><g data-p="mback"></g><g data-p="back"></g><g data-p="body"></g><g data-p="cheeks"></g><g data-p="fxface"></g><g data-p="eyes"></g><g data-p="brows"></g><g data-p="mouth"></g><g data-p="front"></g><g data-p="mfront"></g></g></g><g data-p="fx"></g></g>`;
+    svg.innerHTML = `<style>${STYLE}</style><defs data-p="defs"></defs><defs data-p="mask"></defs><g data-p="styled"><g class="otsc-rig"><g data-p="fxback"></g><g class="otsc-sway"><g class="otsc-breathe"><g data-p="mback"></g><g data-p="back"></g><g data-p="body"></g><g data-p="cheeks"></g><g data-p="fxface"></g><g data-p="eyes"></g><g data-p="brows"></g><g data-p="mouth"></g><g data-p="front"></g><g data-p="mfront"></g></g></g><g data-p="fx"></g></g></g>`;
     g = { rig: svg.querySelector('.otsc-rig') };
     for (const el of svg.querySelectorAll('[data-p]')) g[el.dataset.p] = el;
     if (!idle) {
@@ -544,6 +648,11 @@ export function createCharacter(container, spec, opts = {}) {
       svg.querySelector('.otsc-sway').setAttribute('class', '');
     }
     for (const k in keys) keys[k] = '';
+    // fondo del estilo: imagen de fondo del <svg> (se rasteriza una vez, no se repinta al animar)
+    const bd = src.style && opts.backdrop !== false ? backdropCSS(src.style, styleSeed(src)) : '';
+    svg.style.backgroundImage = bd;
+    svg.style.backgroundSize = bd ? 'cover' : '';
+    svg.style.backgroundPosition = bd ? 'center bottom' : '';
     L0 = layout(s);
     paintBody(bodyPoints(s), 'base');
     paintFace(faceState());
@@ -551,15 +660,32 @@ export function createCharacter(container, spec, opts = {}) {
   }
 
   function paintBody(pts, key) {
-    const x = renderLayers(s, faceState(), { uid, pts });
+    const dt = detail(key);
+    const x = renderLayers(s, faceState(), { uid, pts, live: true, detail: dt, animate: !reduced() });
     L = x.L;
+    if ((g.styled.getAttribute('filter') || '') !== x.filter) {
+      if (x.filter) g.styled.setAttribute('filter', x.filter);
+      else g.styled.removeAttribute('filter');
+    }
+    skin = x.skin;
+    accMask = x.mask;
     g.defs.innerHTML = x.defs;
     g.back.innerHTML = x.back;
     g.body.innerHTML = x.body;
     g.cheeks.innerHTML = x.cheeks;
     g.front.innerHTML = x.front;
     keys.body = key;
+    keys.detail = dt;
     keys.eyes = keys.brows = keys.mouth = '';
+    paintMask();
+  }
+
+  /** Máscara del contorno: accesorios unidos + piezas de las metamorfosis activas. */
+  function paintMask() {
+    const m = accMask + morphMask;
+    if (m === keys.mask && g.mask.firstChild) return;
+    g.mask.innerHTML = outlineMask(uid, m);
+    keys.mask = m;
   }
 
   /** Estado de cara de este frame: ánimo interpolado + retoques del gesto + boca + mirada. */
@@ -736,30 +862,33 @@ export function createCharacter(container, spec, opts = {}) {
       }
     }
     const bodyKey = pts === base ? 'base' : pts.map((p) => `${Math.round(p[0] * 10)},${Math.round(p[1] * 10)}`).join(' ');
-    if (bodyKey !== keys.body) paintBody(pts, bodyKey);
+    if (bodyKey !== keys.body || detail(bodyKey) !== keys.detail) paintBody(pts, bodyKey);
 
     let mback = '';
     let mfront = '';
+    let mmask = '';
     if (drawn.length) {
       const ol = outlineOf(s, pal);
       const c = {
         pts: L.pts, cx: L.cx, top: L.box.y, W: L.box.w, H: L.box.h, mid: L.box.y + L.box.h * 0.55,
         eyeY: L.eyeY, mouthY: L.mouthY, sp: L.sp, r: L.r, mw: L.mw, pal,
         line: ol ? ol.color : pal.line, lw: ol ? R(Math.min(ol.w, 3.2)) : 1.8, fill: s.body.color,
-        hr: Math.max(6, L.box.w * 0.1),
+        hr: Math.max(6, L.box.w * 0.1), skin,
       };
       c.aw = c.hr * 0.55;
       // orden: alas detrás de todo, luego pinchos, cuernos y brazos
       const order = ['wings', 'spikes', 'horns', 'hands'];
       drawn.sort((a, b) => order.indexOf(a[0].name) - order.indexOf(b[0].name));
       for (const [m, age] of drawn) {
-        const [bk, fr] = m.def.draw(c, m.k, age, { ...m.o, still: rm });
+        const [bk, fr, mk] = m.def.draw(c, m.k, age, { ...m.o, still: rm });
         mback += bk;
         mfront += fr;
+        mmask += mk || '';
       }
     }
     if (mback !== keys.mback) { g.mback.innerHTML = mback; keys.mback = mback; }
     if (mfront !== keys.mfront) { g.mfront.innerHTML = mfront; keys.mfront = mfront; }
+    if (mmask !== morphMask) { morphMask = mmask; paintMask(); }
 
     // 8) efectos
     let fxFront = '';
@@ -1106,18 +1235,24 @@ export function createCharacter(container, spec, opts = {}) {
     if (speech) endSpeech();
   }
 
+  px = container.clientWidth || px;
   build();
   idleTick();
   // Si se montó oculto, reencuadrar al hacerse visible.
   let ro = null;
   if (typeof ResizeObserver !== 'undefined') {
-    ro = new ResizeObserver(() => fit());
+    ro = new ResizeObserver(() => {
+      // tamaño en pantalla: decide si la textura se ve (ver detail)
+      px = container.clientWidth || px;
+      fit();
+      if (detail(keys.body) !== keys.detail) wake();
+    });
     ro.observe(container);
   }
 
   return {
     svg,
-    get spec() { return structuredClone(s); },
+    get spec() { return structuredClone(src); },
     /** Lo que está pasando ahora: ánimo, gesto, metamorfosis y efectos activos. */
     get state() {
       return { mood: moodName, gesture: gest?.name || null, morphs: [...morphs.keys()].filter((k) => morphs.get(k).phase !== 'out'), effects: fxs.map((f) => f.name), speaking: !!speech };
@@ -1171,8 +1306,10 @@ export function createCharacter(container, spec, opts = {}) {
     effect,
     clearEffects,
     update(next) {
-      s = normalizeCharacter(next);
+      src = normalizeCharacter(next);
+      s = stylizeSpec(src);
       uid = `otsc${(++uidSeq).toString(36)}`;
+      morphMask = '';
       build();
       wake();
     },
@@ -1187,5 +1324,6 @@ export function createCharacter(container, spec, opts = {}) {
   };
 }
 
-export { SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, ACCESSORIES, PRESETS, BODY_POINTS };
+export { SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, TEXTURES, ACCESSORIES, PRESETS, BODY_POINTS };
 export { ACCESSORY_GROUPS, partLabel } from './parts.js';
+export { STYLES as CHARACTER_STYLES } from './styles.js';

package/src/character/motion.js

@@ -15,7 +15,8 @@
  * Aquí no se toca el DOM y todo lo que se pinta sale de números y colores ya saneados.
  */
 
-import { BODY_POINTS, SHAPES, shade } from './parts.js';
+import { BODY_POINTS, SHAPES } from './parts.js';
+import { skinPaths, skinAt, joinSVG } from './skin.js';
 
 const R = (v) => Math.round(v * 100) / 100;
 const TAU = Math.PI * 2;
@@ -312,37 +313,61 @@ function shoulder(c, s) {
   return { x: lerp(x, c.cx, 0.14), y };
 }
 
+/**
+ * Piel con la que se pintan las piezas (la da Character.js en c.skin). Sin ella (llamadas
+ * antiguas) se pinta con el color plano del cuerpo y sin unión.
+ */
+function skinOf(c) {
+  return c.skin || { fill: c.fill, solid: c.fill, stops: null, tex: '', lit: '', line: c.line, lw: c.lw, lineOp: 0, box: { x: c.cx - c.W / 2, y: c.top, w: c.W, h: c.H }, d: '', uid: '' };
+}
+const join = (sk, shapes, key) => (sk.uid ? joinSVG(sk, shapes, key) : { shadow: '', mask: '' });
+
 function handSVG(h, s, c) {
   const hr = c.hr * h.s;
-  const st = `fill="${c.fill}" stroke="${c.line}" stroke-width="${c.lw}" stroke-linejoin="round"`;
+  const sk = skinOf(c);
+  // la mano toma el color del degradado del cuerpo en su sitio (y su textura)
+  const fill = sk.stops ? skinAt(sk, h.x, h.y) : sk.solid;
+  const st = `fill="${fill}" stroke="${c.line}" stroke-width="${c.lw}" stroke-linejoin="round"`;
   const groove = (d) => `<path d="${d}" stroke="${c.line}" stroke-width="${R(c.lw * 0.8)}" fill="none" stroke-linecap="round" opacity=".55"/>`;
-  let g = '';
   let rot = h.ang;
-  if (h.type === 'open') {
-    g = `<ellipse cx="${R(-0.78 * hr)}" cy="${R(0.15 * hr)}" rx="${R(0.3 * hr)}" ry="${R(0.52 * hr)}" transform="rotate(-38 ${R(-0.78 * hr)} ${R(0.15 * hr)})" ${st}/>`;
-    g += `<ellipse rx="${R(0.88 * hr)}" ry="${R(1.05 * hr)}" ${st}/>`;
-    g += groove(`M${R(-0.28 * hr)} ${R(-0.98 * hr)}V${R(-0.45 * hr)}M${R(0.28 * hr)} ${R(-0.98 * hr)}V${R(-0.45 * hr)}`);
-  } else {
-    const fist = `<circle r="${R(0.82 * hr)}" ${st}/>${groove(`M${R(-0.5 * hr)} ${R(-0.2 * hr)}Q0 ${R(0.15 * hr)} ${R(0.5 * hr)} ${R(-0.2 * hr)}`)}`;
-    if (h.type === 'point') g = `<rect x="${R(-0.24 * hr)}" y="${R(-1.95 * hr)}" width="${R(0.48 * hr)}" height="${R(1.5 * hr)}" rx="${R(0.24 * hr)}" ${st}/>${fist}`;
-    else if (h.type === 'thumb' || h.type === 'thumbdown') {
-      rot = 0;
+  let shapes = '';
+  let grooves = '';
+  const mk = (a) => {
+    if (h.type === 'open') {
+      return `<ellipse cx="${R(-0.78 * hr)}" cy="${R(0.15 * hr)}" rx="${R(0.3 * hr)}" ry="${R(0.52 * hr)}" transform="rotate(-38 ${R(-0.78 * hr)} ${R(0.15 * hr)})" ${a}/><ellipse rx="${R(0.88 * hr)}" ry="${R(1.05 * hr)}" ${a}/>`;
+    }
+    const fist = `<circle r="${R(0.82 * hr)}" ${a}/>`;
+    if (h.type === 'point') return `<rect x="${R(-0.24 * hr)}" y="${R(-1.95 * hr)}" width="${R(0.48 * hr)}" height="${R(1.5 * hr)}" rx="${R(0.24 * hr)}" ${a}/>${fist}`;
+    if (h.type === 'thumb' || h.type === 'thumbdown') {
       const up = h.type === 'thumb' ? -1 : 1;
-      g = `<rect x="${R(-0.22 * hr)}" y="${R(up < 0 ? -1.75 * hr : 0.25 * hr)}" width="${R(0.44 * hr)}" height="${R(1.5 * hr)}" rx="${R(0.22 * hr)}" ${st}/>${fist}`;
-    } else g = fist;
-  }
-  return `<g transform="translate(${R(h.x)} ${R(h.y)}) scale(${s} 1) rotate(${R(rot)})">${g}</g>`;
+      return `<rect x="${R(-0.22 * hr)}" y="${R(up < 0 ? -1.75 * hr : 0.25 * hr)}" width="${R(0.44 * hr)}" height="${R(1.5 * hr)}" rx="${R(0.22 * hr)}" ${a}/>${fist}`;
+    }
+    return fist;
+  };
+  if (h.type === 'open') grooves = groove(`M${R(-0.28 * hr)} ${R(-0.98 * hr)}V${R(-0.45 * hr)}M${R(0.28 * hr)} ${R(-0.98 * hr)}V${R(-0.45 * hr)}`);
+  else grooves = groove(`M${R(-0.5 * hr)} ${R(-0.2 * hr)}Q0 ${R(0.15 * hr)} ${R(0.5 * hr)} ${R(-0.2 * hr)}`);
+  if (h.type === 'thumb' || h.type === 'thumbdown') rot = 0;
+  shapes = mk(st) + (sk.tex ? mk(`fill="${sk.tex}"`) : '');
+  // sombra de contacto: solo cae sobre el cuerpo (recortada a él)
+  const shadow = sk.clip && hr > 1 ? `<ellipse cx="${R(h.x + hr * 0.12)}" cy="${R(h.y + hr * 0.4)}" rx="${R(hr * 0.95)}" ry="${R(hr * 0.85)}" fill="#000" opacity=".14" clip-path="${sk.clip}"/>` : '';
+  return `${shadow}<g transform="translate(${R(h.x)} ${R(h.y)}) scale(${s} 1) rotate(${R(rot)})">${shapes}${grooves}</g>`;
 }
 
+/** Brazo de goma: nace dentro del cuerpo (detrás), con su piel, y corta el contorno al salir. */
 function armSVG(sh, h, s, c) {
   const dx = h.x - sh.x;
   const dy = h.y - sh.y;
   const d = Math.hypot(dx, dy) || 1;
+  const sk = skinOf(c);
   // codo hacia fuera y abajo (brazo de goma)
   const ex = (sh.x + h.x) / 2 + s * d * 0.16;
   const ey = (sh.y + h.y) / 2 + d * 0.12;
   const path = `M${R(sh.x)} ${R(sh.y)}Q${R(ex)} ${R(ey)} ${R(h.x)} ${R(h.y)}`;
-  return `<path d="${path}" stroke="${c.line}" stroke-width="${R(c.aw + c.lw * 2)}" fill="none" stroke-linecap="round"/><path d="${path}" stroke="${c.fill}" stroke-width="${R(c.aw)}" fill="none" stroke-linecap="round"/>`;
+  const w = R(c.aw);
+  let out = `<path d="${path}" stroke="${c.line}" stroke-width="${R(c.aw + c.lw * 2)}" fill="none" stroke-linecap="round"/><path d="${path}" stroke="${sk.fill}" stroke-width="${w}" fill="none" stroke-linecap="round"/>`;
+  if (sk.tex) out += `<path d="${path}" stroke="${sk.tex}" stroke-width="${w}" fill="none"/>`;
+  const j = join(sk, [{ d: path, sw: c.aw, sl: c.W * 0.12 }], 'arm');
+  return [out + j.shadow, j.mask];
 }
 
 function drawHands(c, k, age, o) {
@@ -350,39 +375,53 @@ function drawHands(c, k, age, o) {
   const kk = clamp(k, 0, 1.15);
   let back = '';
   let front = '';
+  let mask = '';
   for (const s of [-1, 1]) {
     const sh = shoulder(c, s);
     let h = handPos(o.pose || 'rest', s, age, dir, c);
     if (o.from && o.blend < 1) h = mixHand(handPos(o.from, s, age, dir, c), h, EASE.inOut(o.blend));
     // al aparecer, la mano sale del hombro
     const hh = { ...h, x: lerp(sh.x, h.x, Math.min(1, kk)), y: lerp(sh.y, h.y, Math.min(1, kk)), s: h.s * Math.max(0.01, kk) };
-    back += armSVG(sh, hh, s, { ...c, aw: c.aw * Math.min(1, kk) });
+    const [arm, am] = armSVG(sh, hh, s, { ...c, aw: c.aw * Math.min(1, kk) });
+    back += arm;
+    mask += am;
     front += handSVG(hh, s, c);
   }
-  return [back, front];
+  return [back, front, mask];
 }
 
 // ───────────────────────────── alas, pinchos, cuernos ─────────────────────────────
 
 const WING = 'M0 0C18 -36 64 -56 96 -44C88 -32 82 -28 72 -25C74 -14 66 -8 54 -8C54 3 42 8 30 6C20 11 7 9 0 0Z';
 const WING_LINES = 'M8 -4C30 -20 52 -30 76 -36M10 0C28 -10 42 -16 58 -20';
+/** Aplica f(x, y) a cada par de coordenadas de un path absoluto (M/C/L/Q). */
+const mapPath = (d, f) => d.replace(/(-?\d*\.?\d+)\s+(-?\d*\.?\d+)/g, (_, a, b) => f(+a, +b).map(R).join(' '));
 
 function drawWings(c, k, age, o) {
   const fast = o.flap === 'fast';
   const amp = o.still ? 0 : fast ? 32 : 11;
   const hz = fast ? 3.2 : 0.9;
   const sc = (c.W / 120) * 0.95 * Math.max(0.01, k);
-  const fill = c.pal.dark ? shade(c.pal.body, 0.35) : shade(c.pal.body, 0.55);
+  const sk = skinOf(c);
   let out = '';
+  const shapes = [];
   for (const s of [-1, 1]) {
     const p = c.pts;
     const [a, b] = s > 0 ? [p[3], p[4]] : [p[13], p[12]];
     const x = lerp(lerp(a[0], b[0], 0.5), c.cx, 0.16);
     const y = lerp(a[1], b[1], 0.5);
-    const flap = -12 + S(age, hz) * amp;
-    out += `<g transform="translate(${R(x)} ${R(y)}) scale(${s} 1) rotate(${R(flap)}) scale(${R(sc)})"><path d="${WING}" fill="${fill}" stroke="${c.line}" stroke-width="${R(c.lw / sc)}" stroke-linejoin="round"/><path d="${WING_LINES}" stroke="${c.line}" stroke-width="${R((c.lw * 0.8) / sc)}" fill="none" stroke-linecap="round" opacity=".45"/></g>`;
+    const flap = ((-12 + S(age, hz) * amp) * Math.PI) / 180;
+    const cs = Math.cos(flap) * sc;
+    const sn = Math.sin(flap) * sc;
+    // en coordenadas del cuerpo (no en un <g> transformado): así comparte degradado y textura
+    const f = (px, py) => [x + s * (px * cs - py * sn), y + px * sn + py * cs];
+    const d = mapPath(WING, f);
+    shapes.push({ d });
+    out += skinPaths(sk, d, { extra: `<path d="${d}" fill="#fff" fill-opacity=".14"/>` });
+    out += `<path d="${mapPath(WING_LINES, f)}" stroke="${sk.line || c.line}" stroke-width="${R(c.lw * 0.8)}" fill="none" stroke-linecap="round" opacity=".45"/>`;
   }
-  return [out, ''];
+  const j = join(sk, shapes, 'wg');
+  return [out + j.shadow, '', j.mask];
 }
 
 /** Normal exterior del punto i del contorno (los puntos van en sentido horario desde arriba). */
@@ -398,8 +437,8 @@ function normalAt(pts, i) {
 
 function drawSpikes(c, k, age, o) {
   const pts = c.pts;
-  const fill = shade(c.pal.body, c.pal.dark ? 0.2 : -0.18);
-  let out = '';
+  const sk = skinOf(c);
+  let d = '';
   for (let i = 0; i < BODY_POINTS; i++) {
     if (i >= 6 && i <= 10) continue; // abajo no: apoya en el suelo
     const order = Math.min(i, BODY_POINTS - i);
@@ -409,25 +448,46 @@ function drawSpikes(c, k, age, o) {
     const [x, y] = pts[i];
     const len = c.W * (0.17 + (order % 2) * 0.05) * ki * (1 + (o.still ? 0 : S(age, 2.5, i) * 0.06));
     const hb = c.W * 0.075;
-    const bx = x - nx * 4;
-    const by = y - ny * 4;
-    out += `<path d="M${R(bx - tx * hb)} ${R(by - ty * hb)}L${R(x + nx * len)} ${R(y + ny * len)}L${R(bx + tx * hb)} ${R(by + ty * hb)}Z" fill="${fill}" stroke="${c.line}" stroke-width="${c.lw}" stroke-linejoin="round"/>`;
+    // base hundida en el cuerpo y ensanchada (filete): los flancos cóncavos se funden con él
+    const sink = Math.max(4, hb * 0.8);
+    const fl = hb * (0.6 + 0.9 * Math.min(1, ki));
+    const bx = x - nx * sink;
+    const by = y - ny * sink;
+    const qx = x + nx * len * 0.3;
+    const qy = y + ny * len * 0.3;
+    const qw = hb * 0.42;
+    d += `M${R(bx - tx * fl)} ${R(by - ty * fl)}Q${R(qx - tx * qw)} ${R(qy - ty * qw)} ${R(x + nx * len)} ${R(y + ny * len)}Q${R(qx + tx * qw)} ${R(qy + ty * qw)} ${R(bx + tx * fl)} ${R(by + ty * fl)}Z`;
   }
-  return [out, ''];
+  if (!d) return ['', '', ''];
+  const j = join(sk, [{ d }], 'sp');
+  return [skinPaths(sk, d) + j.shadow, '', j.mask];
 }
 
 function drawHorns(c, k, age, o) {
   const pts = c.pts;
+  const sk = skinOf(c);
   const h = c.H * 0.24 * EASE.backOut(clamp(k));
   const w = c.W * 0.075;
-  const fill = o.color || '#f3e9d2';
-  let out = '';
+  let d = '';
+  let rings = '';
   for (const s of [-1, 1]) {
     const [x, y] = pts[s > 0 ? 1 : 15];
     const xx = lerp(x, c.cx, 0.1);
-    out += `<path d="M${R(xx - w)} ${R(y + 6)}Q${R(xx - w * 0.4)} ${R(y - h * 0.55)} ${R(xx + s * w * 1.1)} ${R(y - h)}Q${R(xx + w * 0.3)} ${R(y - h * 0.4)} ${R(xx + w)} ${R(y + 6)}Z" fill="${fill}" stroke="${c.line}" stroke-width="${c.lw}" stroke-linejoin="round"/>`;
+    const yb = y + Math.max(6, w * 1.3);
+    const tip = [xx + s * w * 1.1, y - h];
+    // base acampanada y hundida en la cabeza
+    d += `M${R(xx - w * 1.7)} ${R(yb)}Q${R(xx - w * 1.05)} ${R(y)} ${R(xx - w * 0.85)} ${R(y - h * 0.12)}Q${R(xx - w * 0.4)} ${R(y - h * 0.55)} ${R(tip[0])} ${R(tip[1])}Q${R(xx + w * 0.3)} ${R(y - h * 0.4)} ${R(xx + w * 0.85)} ${R(y - h * 0.1)}Q${R(xx + w * 1.05)} ${R(y)} ${R(xx + w * 1.7)} ${R(yb)}Z`;
+    // anillos del cuerno
+    for (const t of [0.28, 0.5]) {
+      const l = [lerp(xx - w * 0.85, tip[0], t), lerp(y - h * 0.12, tip[1], t)];
+      const r = [lerp(xx + w * 0.85, tip[0], t), lerp(y - h * 0.1, tip[1], t)];
+      rings += `M${R(l[0])} ${R(l[1])}Q${R((l[0] + r[0]) / 2)} ${R((l[1] + r[1]) / 2 + w * 0.35)} ${R(r[0])} ${R(r[1])}`;
+    }
   }
-  return [out, ''];
+  const furry = ['fur', 'fuzz', 'feathers'].includes(sk.texture);
+  const extra = h > 2 ? `<path d="${rings}" fill="none" stroke="${sk.line || c.line}" stroke-width="${R(c.lw * 0.7)}" stroke-linecap="round" opacity=".35"/>` : '';
+  const j = join(sk, [{ d }], 'hn');
+  return [skinPaths(sk, d, { fill: o.color, tex: !furry && !o.color, extra }) + j.shadow, '', j.mask];
 }
 
 // ───────────────────────────── deformaciones del contorno ─────────────────────────────
@@ -449,7 +509,8 @@ export function ptsBox(pts) {
 }
 
 /**
- * Metamorfosis. Las de dibujo devuelven [detrás, delante]; las de deformación transforman
+ * Metamorfosis. Las de dibujo devuelven [detrás, delante, máscara] (la máscara, siluetas en
+ * negro que recortan el contorno del cuerpo donde nace la pieza); las de deformación transforman
  * los 16 puntos del contorno (y con él cara y accesorios). `room`: cuánto alejar el encuadre.
  */
 export const MORPHS = {