@7ots/cli 0.1.0 → 0.1.3

package/src/character/parts.js

@@ -16,14 +16,14 @@
  */
 
 import '../i18n/messages/character.js';
-import { t as globalT } from '../i18n/index.js';
+import { t as globalT, addCatalog } from '../i18n/index.js';
 
 const n = (v) => Math.round(v * 100) / 100;
 
 /**
  * Nombre traducido de una pieza del catálogo.
  * @param {(key:string, vars?:object)=>string} [t]  traductor (translator(locale)); por defecto el global
- * @param {'shapes'|'eyes'|'brows'|'mouths'|'cheeks'|'patterns'|'finishes'|'accessories'|'groups'|'presets'|'moods'|'gestures'|'morphs'|'effects'} kind
+ * @param {'shapes'|'eyes'|'brows'|'mouths'|'cheeks'|'patterns'|'finishes'|'textures'|'accessories'|'groups'|'presets'|'moods'|'gestures'|'morphs'|'effects'} kind
  * @param {string} id
  * @returns {string} el texto traducido, el `label` en español de la pieza o, en último caso, el id
  */
@@ -378,12 +378,43 @@ export const FINISHES = [
   { id: 'sketch', label: 'Boceto' },
 ];
 
+// ───────────────────────────── texturas ─────────────────────────────
+// Detalle de superficie (se dibuja en skin.js). 'auto' la elige según forma, color y acabado.
+
+export const TEXTURES = [
+  { id: 'auto', label: 'Automática' },
+  { id: 'none', label: 'Lisa' },
+  { id: 'fur', label: 'Pelo' },
+  { id: 'fuzz', label: 'Pelusa' },
+  { id: 'scales', label: 'Escamas' },
+  { id: 'feathers', label: 'Plumas' },
+  { id: 'speckles', label: 'Pecas' },
+  { id: 'ridges', label: 'Anillos' },
+  { id: 'gloss', label: 'Gelatina' },
+  { id: 'panels', label: 'Paneles' },
+];
+
+addCatalog({
+  es: { character: { textures: Object.fromEntries(TEXTURES.map((x) => [x.id, x.label])) }, editor: { color: { texture: 'Textura' } } },
+  en: { character: { textures: { auto: 'Auto', none: 'Smooth', fur: 'Fur', fuzz: 'Fuzz', scales: 'Scales', feathers: 'Feathers', speckles: 'Speckles', ridges: 'Ridges', gloss: 'Jelly', panels: 'Panels' } }, editor: { color: { texture: 'Texture' } } },
+  pt: { character: { textures: { auto: 'Automática', none: 'Lisa', fur: 'Pelo', fuzz: 'Penugem', scales: 'Escamas', feathers: 'Penas', speckles: 'Sardas', ridges: 'Anéis', gloss: 'Gelatina', panels: 'Painéis' } }, editor: { color: { texture: 'Textura' } } },
+});
+
 // ───────────────────────────── accesorios ─────────────────────────────
-// c = { k (escala por ancho de cabeza), w, h (caja del cuerpo), sp, r (ojos), color, color2, eyeDy, mouthDy }
-// Cada uno: { id, label, group, anchor, layer: 'back'|'front', color, color2, draw(c) }
+// c = { k (escala por ancho de cabeza), w, h (caja del cuerpo), sp, r (ojos), color, color2, eyeDy, mouthDy, grow }
+// Cada uno: { id, label, group, anchor, layer: 'back'|'front', color, color2, draw(c), grow?, shape?(c) }
 
 const S = (w) => `stroke="#1f2937" stroke-width="${w}" stroke-linejoin="round" stroke-linecap="round"`;
 
+// Piezas que «crecen» del cuerpo (grow: 'skin' lleva además la textura de la piel). Con c.grow
+// van detrás del cuerpo con la base hundida en él; shape(c) da su silueta para la unión.
+const ellD = (rx, ry, cy) => `M${-rx} ${cy}a${rx} ${ry} 0 1 0 ${rx * 2} 0a${rx} ${ry} 0 1 0 ${-rx * 2} 0Z`;
+const hornD = (s, grow) => (grow ? `M${31 * s} 28L${30 * s} 14Q${44 * s} -8 ${30 * s} -30Q${28 * s} -8 ${12 * s} 10L${10 * s} 26Z` : `M${30 * s} 14Q${44 * s} -8 ${30 * s} -30Q${28 * s} -8 ${12 * s} 10Z`);
+const catEarD = (s, grow) => (grow ? `M${n(46.2 * s)} 28L${36 * s} -28L${n(1.4 * s)} 14Z` : `M${44 * s} 16L${36 * s} -28L${8 * s} 6Z`);
+const tailD = (c) => `M${n(c.w * 0.3)} -12Q${n(c.w * 0.8)} 0 ${n(c.w * 0.62)} -40`;
+const ANGEL_WING = 'M0 0Q30 -40 70 -30Q58 -18 66 -10Q50 -4 58 8Q36 10 40 22Q14 18 0 10Z';
+const BAT_WING = 'M0 0L28 -36L70 -24Q60 -10 64 6Q50 -2 44 12Q34 2 24 16Q16 4 0 10Z';
+
 export const ACCESSORY_GROUPS = [
   ['head', 'Cabeza'],
   ['eyes', 'Ojos'],
@@ -456,10 +487,10 @@ export const ACCESSORIES = [
     draw: (c) => `<g transform="scale(${n(c.k)}) translate(-24 6)">${[0, 72, 144, 216, 288].map((a) => `<ellipse cx="0" cy="-11" rx="8" ry="11" transform="rotate(${a})" fill="${c.color}" stroke="#1f2937" stroke-width="2"/>`).join('')}<circle r="7" fill="${c.color2}" stroke="#1f2937" stroke-width="2"/></g>`,
   },
   { id: 'halo', label: 'Aureola', group: 'head', anchor: 'top', color: '#fde047', draw: (c) => `<g transform="scale(${n(c.k)})"><ellipse cy="-22" rx="34" ry="9" fill="none" stroke="${c.color}" stroke-width="7"/><ellipse cy="-22" rx="34" ry="9" fill="none" stroke="#fff" stroke-width="2" opacity=".6"/></g>` },
-  { id: 'horns', label: 'Cuernos', group: 'head', anchor: 'top', color: '#dc2626', draw: (c) => `<g transform="scale(${n(c.k)})"><path d="M-30 14Q-44 -8 -30 -30Q-28 -8 -12 10Z" fill="${c.color}" ${S(3)}/><path d="M30 14Q44 -8 30 -30Q28 -8 12 10Z" fill="${c.color}" ${S(3)}/></g>` },
-  { id: 'antenna', label: 'Antenas', group: 'head', anchor: 'top', color: '#1f2937', color2: '#22d3ee', draw: (c) => `<g transform="scale(${n(c.k)})"><path d="M-14 10Q-18 -14 -30 -28M14 10Q18 -14 30 -28" stroke="${c.color}" stroke-width="3.5" fill="none" stroke-linecap="round"/><circle cx="-30" cy="-30" r="7" fill="${c.color2}" ${S(2.5)}/><circle cx="30" cy="-30" r="7" fill="${c.color2}" ${S(2.5)}/></g>` },
-  { id: 'bunny', label: 'Orejas de conejo', group: 'head', anchor: 'top', color: '#f5f5f4', color2: '#fbcfe8', draw: (c) => `<g transform="scale(${n(c.k)})"><g transform="translate(-18 8) rotate(-12)"><ellipse cy="-34" rx="12" ry="36" fill="${c.color}" ${S(3)}/><ellipse cy="-32" rx="6" ry="26" fill="${c.color2}"/></g><g transform="translate(18 8) rotate(14)"><ellipse cy="-34" rx="12" ry="36" fill="${c.color}" ${S(3)}/><ellipse cy="-32" rx="6" ry="26" fill="${c.color2}"/></g></g>` },
-  { id: 'catears', label: 'Orejas de gato', group: 'head', anchor: 'top', color: '#1f2937', color2: '#f9a8d4', draw: (c) => `<g transform="scale(${n(c.k)})"><path d="M-44 16L-36 -28L-8 6Z" fill="${c.color}" ${S(3)}/><path d="M-36 6L-32 -14L-18 4Z" fill="${c.color2}"/><path d="M44 16L36 -28L8 6Z" fill="${c.color}" ${S(3)}/><path d="M36 6L32 -14L18 4Z" fill="${c.color2}"/></g>` },
+  { id: 'horns', label: 'Cuernos', group: 'head', anchor: 'top', color: '#dc2626', grow: 'part', shape: (c) => [-1, 1].map((s) => ({ d: hornD(s, c.grow), tf: `scale(${n(c.k)})` })), draw: (c) => `<g transform="scale(${n(c.k)})">${[-1, 1].map((s) => `<path d="${hornD(s, c.grow)}" fill="${c.color}" ${S(3)}/>`).join('')}</g>` },
+  { id: 'antenna', label: 'Antenas', group: 'head', anchor: 'top', color: '#1f2937', color2: '#22d3ee', grow: 'part', shape: (c) => [-1, 1].map((s) => ({ d: `M${s * 14} ${c.grow ? 22 : 10}Q${s * 18} -14 ${s * 30} -28`, tf: `scale(${n(c.k)})`, sw: 3.5, sl: 16 })), draw: (c) => `<g transform="scale(${n(c.k)})"><path d="M-14 ${c.grow ? 22 : 10}Q-18 -14 -30 -28M14 ${c.grow ? 22 : 10}Q18 -14 30 -28" stroke="${c.color}" stroke-width="3.5" fill="none" stroke-linecap="round"/><circle cx="-30" cy="-30" r="7" fill="${c.color2}" ${S(2.5)}/><circle cx="30" cy="-30" r="7" fill="${c.color2}" ${S(2.5)}/></g>` },
+  { id: 'bunny', label: 'Orejas de conejo', group: 'head', anchor: 'top', color: '#f5f5f4', color2: '#fbcfe8', grow: 'skin', shape: (c) => [[-18, -12], [18, 14]].map(([x, a]) => ({ d: ellD(12, 36, -34), tf: `scale(${n(c.k)}) translate(${x} 8) rotate(${a})` })), draw: (c) => `<g transform="scale(${n(c.k)})"><g transform="translate(-18 8) rotate(-12)"><ellipse cy="-34" rx="12" ry="36" fill="${c.color}" ${S(3)}/><ellipse cy="-32" rx="6" ry="26" fill="${c.color2}"/></g><g transform="translate(18 8) rotate(14)"><ellipse cy="-34" rx="12" ry="36" fill="${c.color}" ${S(3)}/><ellipse cy="-32" rx="6" ry="26" fill="${c.color2}"/></g></g>` },
+  { id: 'catears', label: 'Orejas de gato', group: 'head', anchor: 'top', color: '#1f2937', color2: '#f9a8d4', grow: 'skin', shape: (c) => [-1, 1].map((s) => ({ d: catEarD(s, c.grow), tf: `scale(${n(c.k)})` })), draw: (c) => `<g transform="scale(${n(c.k)})"><path d="${catEarD(-1, c.grow)}" fill="${c.color}" ${S(3)}/><path d="M-36 6L-32 -14L-18 4Z" fill="${c.color2}"/><path d="${catEarD(1, c.grow)}" fill="${c.color}" ${S(3)}/><path d="M36 6L32 -14L18 4Z" fill="${c.color2}"/></g>` },
   { id: 'santa', label: 'Papá Noel', group: 'head', anchor: 'top', color: '#dc2626', color2: '#fafafa', draw: (c) => `<g transform="scale(${n(c.k)})"><path d="M-42 10Q-30 -40 10 -44Q44 -44 56 -8Q40 -26 26 -20Q40 0 42 10Z" fill="${c.color}" ${S(3)}/><circle cx="56" cy="-6" r="10" fill="${c.color2}" ${S(2.5)}/><rect x="-48" y="2" width="96" height="18" rx="9" fill="${c.color2}" ${S(3)}/></g>` },
   { id: 'hardhat', label: 'Casco de obra', group: 'head', anchor: 'top', color: '#facc15', draw: (c) => `<g transform="scale(${n(c.k)})"><path d="M-40 12Q-40 -34 0 -34Q40 -34 40 12Z" fill="${c.color}" ${S(3)}/><path d="M-56 12H56Q56 20 0 20Q-56 20 -56 12Z" fill="${shade(c.color, -0.1)}" ${S(3)}/><path d="M-8 -34V10M8 -34V10" stroke="${shade(c.color, -0.2)}" stroke-width="4"/></g>` },
   { id: 'headband', label: 'Cinta ninja', group: 'head', anchor: 'eyes', clip: true, color: '#dc2626', color2: '#9ca3af', draw: (c) => `<rect x="${n(-c.w)}" y="${n(-c.r * 3.4)}" width="${n(c.w * 2)}" height="${n(c.r * 1.4)}" fill="${c.color}"/><rect x="-9" y="${n(-c.r * 3.25)}" width="18" height="${n(c.r * 1.1)}" rx="2" fill="${c.color2}"/>`, extra: (c) => `<path d="M${n(c.w * 0.5)} ${n(-c.r * 2.7)}q18 4 26 16M${n(c.w * 0.5)} ${n(-c.r * 2.7)}q22 -2 30 8" stroke="${c.color}" stroke-width="5" fill="none" stroke-linecap="round"/>` },
@@ -510,9 +541,9 @@ export const ACCESSORIES = [
     draw: (c) => `<path d="M${n(-c.w * 0.3)} ${n(-c.above * 0.7)}Q${n(-c.w * 0.62)} ${n(-c.above * 0.2)} ${n(-c.w * 0.62)} ${n(c.below)}H${n(c.w * 0.62)}Q${n(c.w * 0.62)} ${n(-c.above * 0.2)} ${n(c.w * 0.3)} ${n(-c.above * 0.7)}Z" fill="${c.color}" ${S(3)}/><path d="M${n(-c.w * 0.64)} ${n(c.below - 7)}H${n(c.w * 0.64)}V${n(c.below + 3)}H${n(-c.w * 0.64)}Z" fill="${c.color2}" ${S(2)}/>${[-0.5, -0.25, 0, 0.25, 0.5].map((k) => `<path d="M${n(k * c.w)} ${n(c.below - 4)}v5" stroke="#111" stroke-width="2.5"/>`).join('')}`,
   },
   { id: 'superhero', label: 'Capa de héroe', group: 'back', anchor: 'neck', layer: 'back', color: '#2563eb', draw: (c) => `<path d="M${n(-c.w * 0.3)} ${n(-c.above * 0.7)}Q${n(-c.w * 0.75)} ${n(0)} ${n(-c.w * 0.66)} ${n(c.below + 6)}Q0 ${n(c.below - 4)} ${n(c.w * 0.66)} ${n(c.below + 6)}Q${n(c.w * 0.75)} 0 ${n(c.w * 0.3)} ${n(-c.above * 0.7)}Z" fill="${c.color}" ${S(3)}/>` },
-  { id: 'wings', label: 'Alas de ángel', group: 'back', anchor: 'center', layer: 'back', color: '#fafafa', draw: (c) => [-1, 1].map((s) => `<g transform="translate(${n(s * c.w * 0.4)} -10) scale(${s} 1)"><path d="M0 0Q30 -40 70 -30Q58 -18 66 -10Q50 -4 58 8Q36 10 40 22Q14 18 0 10Z" fill="${c.color}" ${S(2.5)}/></g>`).join('') },
-  { id: 'batwings', label: 'Alas de murciélago', group: 'back', anchor: 'center', layer: 'back', color: '#3b0764', draw: (c) => [-1, 1].map((s) => `<g transform="translate(${n(s * c.w * 0.4)} -10) scale(${s} 1)"><path d="M0 0L28 -36L70 -24Q60 -10 64 6Q50 -2 44 12Q34 2 24 16Q16 4 0 10Z" fill="${c.color}" ${S(2.5)}/></g>`).join('') },
-  { id: 'tail', label: 'Cola de diablillo', group: 'back', anchor: 'bottom', layer: 'back', color: '#dc2626', draw: (c) => `<path d="M${n(c.w * 0.3)} -12Q${n(c.w * 0.8)} 0 ${n(c.w * 0.62)} -40" stroke="${c.color}" stroke-width="5" fill="none" stroke-linecap="round"/><path d="M${n(c.w * 0.62)} -52L${n(c.w * 0.54)} -36L${n(c.w * 0.72)} -38Z" fill="${c.color}" ${S(2)}/>` },
+  { id: 'wings', label: 'Alas de ángel', group: 'back', anchor: 'center', layer: 'back', color: '#fafafa', grow: 'part', shape: (c) => [-1, 1].map((s) => ({ d: ANGEL_WING, tf: `translate(${n(s * c.w * 0.4)} -10) scale(${s} 1)` })), draw: (c) => [-1, 1].map((s) => `<g transform="translate(${n(s * c.w * 0.4)} -10) scale(${s} 1)"><path d="${ANGEL_WING}" fill="${c.color}" ${S(2.5)}/></g>`).join('') },
+  { id: 'batwings', label: 'Alas de murciélago', group: 'back', anchor: 'center', layer: 'back', color: '#3b0764', grow: 'part', shape: (c) => [-1, 1].map((s) => ({ d: BAT_WING, tf: `translate(${n(s * c.w * 0.4)} -10) scale(${s} 1)` })), draw: (c) => [-1, 1].map((s) => `<g transform="translate(${n(s * c.w * 0.4)} -10) scale(${s} 1)"><path d="${BAT_WING}" fill="${c.color}" ${S(2.5)}/></g>`).join('') },
+  { id: 'tail', label: 'Cola de diablillo', group: 'back', anchor: 'bottom', layer: 'back', color: '#dc2626', grow: 'part', shape: (c) => [{ d: tailD(c), sw: 5, sl: c.w * 0.3 }], draw: (c) => `<path d="${tailD(c)}" stroke="${c.color}" stroke-width="5" fill="none" stroke-linecap="round"/><path d="M${n(c.w * 0.62)} -52L${n(c.w * 0.54)} -36L${n(c.w * 0.72)} -38Z" fill="${c.color}" ${S(2)}/>` },
   { id: 'jetpack', label: 'Mochila cohete', group: 'back', anchor: 'center', layer: 'back', color: '#94a3b8', draw: (c) => [-1, 1].map((s) => `<rect x="${n(s * c.w * 0.42 - 12)}" y="-30" width="24" height="56" rx="10" fill="${c.color}" ${S(2.5)}/><path d="M${n(s * c.w * 0.42 - 8)} 26L${n(s * c.w * 0.42)} 46L${n(s * c.w * 0.42 + 8)} 26Z" fill="#f97316"/>`).join('') },
   // ── extras ──
   { id: 'parrot', label: 'Loro', group: 'extra', anchor: 'shoulder', color: '#16a34a', color2: '#ef4444', draw: () => `<g transform="translate(0 -14)"><path d="M-4 16Q-14 -2 -2 -14Q12 -20 14 -4Q14 10 4 18Z" fill="#16a34a" stroke="#1f2937" stroke-width="2"/><path d="M-2 -14Q6 -24 14 -14" fill="#ef4444" stroke="#1f2937" stroke-width="2"/><circle cx="4" cy="-6" r="2.2" fill="#111"/><path d="M12 -6q8 2 4 8l-4 -2Z" fill="#facc15" stroke="#1f2937" stroke-width="1.5"/><path d="M-4 16l-6 12M2 18l-2 12" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round"/></g>` },
@@ -556,4 +587,4 @@ export const PRESETS = [
 ];
 
 /** Listas por tipo (para partLabel). Moods y gestos viven en Character.js y solo tienen catálogo. */
-const CATALOG = { shapes: SHAPES, eyes: EYES, brows: BROWS, mouths: MOUTHS, cheeks: CHEEKS, patterns: PATTERNS, finishes: FINISHES, accessories: ACCESSORIES, groups: ACCESSORY_GROUPS, presets: PRESETS };
+const CATALOG = { shapes: SHAPES, eyes: EYES, brows: BROWS, mouths: MOUTHS, cheeks: CHEEKS, patterns: PATTERNS, finishes: FINISHES, textures: TEXTURES, accessories: ACCESSORIES, groups: ACCESSORY_GROUPS, presets: PRESETS };

package/src/character/skin.js

@@ -0,0 +1,412 @@
+/**
+ * Piel del personaje 2D: texturas procedurales de superficie y uniones de las piezas que
+ * «crecen» del cuerpo (pinchos, cuernos, alas, brazos, orejas, colas).
+ *
+ * Texturas (spec.texture, catálogo TEXTURES de parts.js): pelo, pelusa, escamas, plumas, pecas,
+ * anillos, gelatina y paneles. 'auto' (o ausente) elige una según forma, patrón y acabado, y el
+ * azar de cada textura sale de un hash de la spec: el mismo personaje (la misma semilla de
+ * identidad) siempre tiene la misma piel, y las semillas antiguas no cambian de forma ni color.
+ *
+ * Todo es estático y barato: <pattern> en espacio de usuario (con la deformación del contorno
+ * aplicada por patternTransform), trazos recortados al cuerpo y, solo en calidad 'full', un
+ * grano feTurbulence que no se usa nunca mientras el contorno se anima. Calidades:
+ *   full · todo  ·  lite · sin filtros  ·  off · sin textura
+ *
+ * Piezas unidas: comparten el relleno del cuerpo (degradado en espacio de usuario + textura),
+ * van detrás del cuerpo con la base hundida en él y el contorno del cuerpo se recorta con una
+ * máscara donde nacen (silueta única, con «filete» en la base), más una sombra de contacto.
+ */
+
+import { shade, hexToRgb } from './parts.js';
+
+const n = (v) => Math.round(v * 100) / 100;
+
+/** Azar determinista (mulberry32). */
+function rng(seed) {
+  let a = seed >>> 0 || 1;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/** Hash FNV-1a de lo que define el aspecto (no los puntos editados: arrastrar no cambia la piel). */
+export function skinHash(spec) {
+  const s = `${spec.body.shape}|${spec.body.color}|${spec.finish}|${spec.body.pattern}|${spec.body.patternColor}|${spec.eyes.type}`;
+  let h = 0x811c9dc5;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return h >>> 0;
+}
+
+// Candidatas para 'auto' por forma (se elige con el hash; las repetidas pesan más).
+const AUTO = {
+  ghost: ['gloss', 'gloss', 'speckles'],
+  drop: ['gloss', 'gloss', 'scales'],
+  blob: ['gloss', 'fuzz', 'speckles'],
+  heart: ['gloss', 'fuzz'],
+  mushroom: ['speckles', 'fuzz'],
+  cloud: ['fuzz', 'fur'],
+  wide: ['scales', 'ridges', 'fuzz', 'speckles'],
+  tall: ['ridges', 'scales', 'fur', 'speckles'],
+  squircle: ['scales', 'fuzz', 'speckles', 'panels'],
+};
+const AUTO_ANY = ['fur', 'fuzz', 'scales', 'feathers', 'speckles', 'ridges', 'gloss', 'fuzz', 'fur', 'none'];
+
+/** Textura efectiva de una spec normalizada ('auto' → la que le va a ese personaje). */
+export function textureOf(spec) {
+  const t = spec.texture;
+  if (t && t !== 'auto') return t;
+  const f = spec.finish;
+  const sh = spec.body.shape;
+  if (f === 'neon' || f === 'sketch') return 'none';
+  if (sh === 'robot' || spec.body.pattern === 'circuit') return 'panels';
+  if (sh === 'cat' || spec.body.pattern === 'tiger' || spec.accessories.some((a) => a.id === 'catears' || a.id === 'bunny')) return 'fur';
+  const h = skinHash(spec);
+  if (f === 'clay') return h % 3 ? 'fuzz' : 'speckles';
+  const pool = AUTO[sh] || AUTO_ANY;
+  return pool[h % pool.length];
+}
+
+// ───────────────────────────── geometría del borde ─────────────────────────────
+
+/**
+ * Muestras sobre el contorno (la misma Catmull-Rom que splinePath): [x, y, nx, ny] con la
+ * normal exterior. `per`: muestras por tramo.
+ */
+export function edgeSamples(pts, per) {
+  const N = pts.length;
+  const P = (i) => pts[(i + N) % N];
+  const out = [];
+  for (let i = 0; i < N; i++) {
+    const [p0, p1, p2, p3] = [P(i - 1), P(i), P(i + 1), P(i + 2)];
+    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6];
+    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6];
+    for (let k = 0; k < per; k++) {
+      const t = (k + 0.5) / per;
+      const u = 1 - t;
+      const x = u * u * u * p1[0] + 3 * u * u * t * c1[0] + 3 * u * t * t * c2[0] + t * t * t * p2[0];
+      const y = u * u * u * p1[1] + 3 * u * u * t * c1[1] + 3 * u * t * t * c2[1] + t * t * t * p2[1];
+      const dx = 3 * u * u * (c1[0] - p1[0]) + 6 * u * t * (c2[0] - c1[0]) + 3 * t * t * (p2[0] - c2[0]);
+      const dy = 3 * u * u * (c1[1] - p1[1]) + 6 * u * t * (c2[1] - c1[1]) + 3 * t * t * (p2[1] - c2[1]);
+      const l = Math.hypot(dx, dy) || 1;
+      out.push([x, y, dy / l, -dx / l]);
+    }
+  }
+  return out;
+}
+
+// ───────────────────────────── teselas ─────────────────────────────
+
+/** Copias de un elemento (caja [x0,y0,x1,y1]) que caen dentro de la tesela W×H, para que no se corte. */
+function wrap(b, W, H) {
+  const out = [];
+  for (const dx of [-W, 0, W]) {
+    for (const dy of [-H, 0, H]) {
+      if (b[2] + dx < 0 || b[0] + dx > W || b[3] + dy < 0 || b[1] + dy > H) continue;
+      out.push([dx, dy]);
+    }
+  }
+  return out;
+}
+const dot = (x, y, r) => `M${n(x - r)} ${n(y)}a${n(r)} ${n(r)} 0 1 0 ${n(r * 2)} 0a${n(r)} ${n(r)} 0 1 0 ${n(-r * 2)} 0`;
+const ink = (d, color, op, w) => (d ? `<path d="${d}" fill="none" stroke="${color}" stroke-opacity="${op}" stroke-width="${n(w)}" stroke-linecap="round"/>` : '');
+const blot = (d, color, op) => (d ? `<path d="${d}" fill="${color}" fill-opacity="${op}"/>` : '');
+
+/** Mechones cortos, peinados hacia abajo. */
+function furTile(u, r) {
+  const W = 16 * u;
+  let dk = '';
+  let lt = '';
+  for (let i = 0; i < 11; i++) {
+    const x = r() * W;
+    const y = r() * W;
+    const a = Math.PI / 2 + (r() - 0.5) * 0.9;
+    const len = (3.5 + r() * 3.2) * u;
+    const dx = Math.cos(a) * len;
+    const dy = Math.sin(a) * len;
+    const bend = (r() - 0.5) * 2.2 * u;
+    const qx = dx / 2 - Math.sin(a) * bend;
+    const qy = dy / 2 + Math.cos(a) * bend;
+    for (const [ox, oy] of wrap([Math.min(x, x + dx) - u, Math.min(y, y + dy) - u, Math.max(x, x + dx) + u, Math.max(y, y + dy) + u], W, W)) {
+      dk += `M${n(x + ox)} ${n(y + oy)}q${n(qx)} ${n(qy)} ${n(dx)} ${n(dy)}`;
+      lt += `M${n(x + ox - 0.8 * u)} ${n(y + oy - 0.6 * u)}q${n(qx)} ${n(qy)} ${n(dx * 0.8)} ${n(dy * 0.8)}`;
+    }
+  }
+  return { W, H: W, body: ink(dk, '#000', 0.2, 0.85 * u) + ink(lt, '#fff', 0.22, 0.6 * u) };
+}
+
+/** Punteado fino de dos tonos. */
+function fuzzTile(u, r) {
+  const W = 9 * u;
+  let dk = '';
+  let lt = '';
+  for (let i = 0; i < 12; i++) {
+    const x = r() * W;
+    const y = r() * W;
+    const rr = (0.35 + r() * 0.45) * u;
+    for (const [ox, oy] of wrap([x - rr, y - rr, x + rr, y + rr], W, W)) {
+      if (i % 2) lt += dot(x + ox, y + oy, rr);
+      else dk += dot(x + ox, y + oy, rr);
+    }
+  }
+  return { W, H: W, body: blot(dk, '#000', 0.14) + blot(lt, '#fff', 0.2) };
+}
+
+/** Escamas solapadas: medias lunas con brillo interior. */
+function scalesTile(u) {
+  const rr = 5 * u;
+  const W = rr * 2;
+  const H = rr * 1.6;
+  let dk = '';
+  let lt = '';
+  for (const [cx, cy] of [[0, 0], [W, 0], [rr, H / 2]]) {
+    for (const [ox, oy] of wrap([cx - rr, cy, cx + rr, cy + rr], W, H)) {
+      const x = cx + ox;
+      const y = cy + oy;
+      dk += `M${n(x - rr)} ${n(y)}a${n(rr)} ${n(rr)} 0 0 0 ${n(rr * 2)} 0`;
+      lt += `M${n(x - rr * 0.55)} ${n(y + rr * 0.3)}a${n(rr * 0.6)} ${n(rr * 0.5)} 0 0 0 ${n(rr * 1.1)} 0`;
+    }
+  }
+  return { W, H, body: ink(dk, '#000', 0.2, 0.75 * u) + ink(lt, '#fff', 0.22, 0.6 * u) };
+}
+
+/** Plumas: U alargadas en filas alternas, con su cañón. */
+function feathersTile(u) {
+  const W = 12 * u;
+  const H = 10 * u;
+  const hw = 5.6 * u;
+  const hh = 9 * u;
+  let dk = '';
+  let lt = '';
+  for (const [cx, cy] of [[0, 0], [W, 0], [W / 2, H / 2]]) {
+    for (const [ox, oy] of wrap([cx - hw, cy, cx + hw, cy + hh], W, H)) {
+      const x = cx + ox;
+      const y = cy + oy;
+      dk += `M${n(x - hw)} ${n(y)}Q${n(x - hw)} ${n(y + hh * 0.9)} ${n(x)} ${n(y + hh)}Q${n(x + hw)} ${n(y + hh * 0.9)} ${n(x + hw)} ${n(y)}`;
+      lt += `M${n(x)} ${n(y + u)}V${n(y + hh * 0.75)}`;
+    }
+  }
+  return { W, H, body: ink(dk, '#000', 0.17, 0.8 * u) + ink(lt, '#fff', 0.24, 0.6 * u) };
+}
+
+/** Pecas sueltas (para piezas; el cuerpo las lleva repartidas a mano). */
+function speckTile(u, r) {
+  const W = 14 * u;
+  let dk = '';
+  for (let i = 0; i < 4; i++) {
+    const x = r() * W;
+    const y = r() * W;
+    const rr = (0.5 + r() * 0.9) * u;
+    for (const [ox, oy] of wrap([x - rr, y - rr, x + rr, y + rr], W, W)) dk += dot(x + ox, y + oy, rr);
+  }
+  return { W, H: W, body: blot(dk, '#000', 0.16) };
+}
+
+const TILES = { fur: furTile, fuzz: fuzzTile, scales: scalesTile, feathers: feathersTile, speckles: speckTile };
+
+// ───────────────────────────── piel del cuerpo ─────────────────────────────
+
+/**
+ * Textura de un cuerpo. L: layout actual (puede ir deformado); L0: el de reposo.
+ * o = { id, d (contorno), fill (relleno del cuerpo), col, line, lw (contorno o null), quality }
+ * @returns {{ tex:string, defs:string, inner:string, rim:string, part:string }}
+ *   inner va recortado al cuerpo (bajo los brillos del acabado); rim, tras el contorno;
+ *   part es el relleno de textura para piezas unidas ('' si esta textura no lleva).
+ */
+export function renderSkin(spec, L, L0, o) {
+  const tex = textureOf(spec);
+  const out = { tex, defs: '', inner: '', rim: '', part: '' };
+  if (tex === 'none' || o.quality === 'off') return out;
+  const r = rng(skinHash(spec) ^ 0x9e3779b9);
+  const u = Math.max(0.6, L0.unit);
+  const { box } = L0;
+  // la piel se estira con el contorno (aplastar, estirar, gelatina…) en vez de deslizarse
+  const sx = L.box.w / (box.w || 1);
+  const sy = L.box.h / (box.h || 1);
+  const by0 = box.y + box.h;
+  const by = L.box.y + L.box.h;
+  const same = Math.abs(sx - 1) < 1e-3 && Math.abs(sy - 1) < 1e-3 && Math.abs(L.cx - L0.cx) < 0.05 && Math.abs(by - by0) < 0.05;
+  const tf = same ? '' : `translate(${n(L.cx)} ${n(by)}) scale(${n(sx * 1000) / 1000} ${n(sy * 1000) / 1000}) translate(${n(-L0.cx)} ${n(-by0)})`;
+  const ptf = tf ? ` patternTransform="${tf}"` : '';
+  const gtf = tf ? ` transform="${tf}"` : '';
+  const lite = o.quality === 'lite';
+
+  const tile = TILES[tex]?.(u, r);
+  if (tile) {
+    out.defs += `<pattern id="${o.id}-tx" width="${n(tile.W)}" height="${n(tile.H)}" patternUnits="userSpaceOnUse"${ptf}>${tile.body}</pattern>`;
+    out.part = `url(#${o.id}-tx)`;
+    if (tex !== 'speckles') out.inner += `<path d="${o.d}" fill="${out.part}"/>`;
+  }
+  const W = box.w;
+  const H = box.h;
+  const X = box.x;
+  const Y = box.y;
+
+  if (tex === 'speckles') {
+    let dk = '';
+    let lt = '';
+    for (let i = 0; i < 34; i++) {
+      const x = X + r() * W;
+      const y = Y + r() ** 0.8 * H;
+      const rr = (0.5 + r() ** 2 * 1.7) * u;
+      if (i % 6 === 5) lt += dot(x, y, rr * 0.8);
+      else dk += dot(x, y, rr);
+    }
+    out.inner += `<g${gtf}>${blot(dk, '#000', 0.17)}${blot(lt, '#fff', 0.3)}</g>`;
+  }
+  if (tex === 'ridges') {
+    let dk = '';
+    let lt = '';
+    const k = 7;
+    for (let i = 0; i < k; i++) {
+      const y = Y + (H * (i + 0.75)) / (k + 0.5);
+      const sag = H * 0.05 * (1 - Math.abs(i / (k - 1) - 0.5));
+      dk += `M${n(X - 4)} ${n(y)}Q${n(X + W / 2)} ${n(y + sag * 2)} ${n(X + W + 4)} ${n(y)}`;
+      lt += `M${n(X - 4)} ${n(y + 1.6 * u)}Q${n(X + W / 2)} ${n(y + 1.6 * u + sag * 2)} ${n(X + W + 4)} ${n(y + 1.6 * u)}`;
+    }
+    out.inner += `<g${gtf}>${ink(dk, '#000', 0.15, 1.5 * u)}${ink(lt, '#fff', 0.2, 1.1 * u)}</g>`;
+    out.defs += `<pattern id="${o.id}-tx" width="${n(8 * u)}" height="${n(6 * u)}" patternUnits="userSpaceOnUse"${ptf}>${ink(`M0 ${n(3 * u)}H${n(8 * u)}`, '#000', 0.14, 1.2 * u)}</pattern>`;
+    out.part = `url(#${o.id}-tx)`;
+  }
+  if (tex === 'panels') {
+    const seam = (y) => `M${n(X - 4)} ${n(y)}H${n(X + W + 4)}`;
+    out.inner += `<g${gtf}>${ink(seam(Y + H * 0.3) + seam(Y + H * 0.84), '#000', 0.18, 1.1 * u)}${ink(seam(Y + H * 0.3 + 1.3 * u) + seam(Y + H * 0.84 + 1.3 * u), '#fff', 0.25, 0.9 * u)}`;
+    let rv = '';
+    let hl = '';
+    for (const [a, b] of [[0.13, 0.17], [0.87, 0.17], [0.1, 0.42], [0.9, 0.42], [0.1, 0.74], [0.9, 0.74]]) {
+      rv += dot(X + a * W, Y + b * H, 1.7 * u);
+      hl += dot(X + a * W - 0.5 * u, Y + b * H - 0.5 * u, 0.6 * u);
+    }
+    out.inner += `${blot(rv, '#000', 0.2)}${blot(hl, '#fff', 0.55)}</g>`;
+  }
+  if (tex === 'gloss') {
+    // gelatina: luz interior en el borde, reflejo curvo y burbujitas dentro (sobre el contorno actual)
+    const { box: b } = L;
+    out.inner += `<path d="${o.d}" fill="none" stroke="#fff" stroke-opacity=".28" stroke-width="${n(b.w * 0.07)}"/>`;
+    out.inner += `<ellipse cx="${n(L.cx)}" cy="${n(b.y + b.h * 0.86)}" rx="${n(b.w * 0.3)}" ry="${n(b.h * 0.1)}" fill="${shade(o.col, 0.5)}" opacity=".3"/>`;
+    out.inner += ink(`M${n(b.x + b.w * 0.16)} ${n(b.y + b.h * 0.5)}Q${n(b.x + b.w * 0.16)} ${n(b.y + b.h * 0.2)} ${n(b.x + b.w * 0.42)} ${n(b.y + b.h * 0.1)}`, '#fff', 0.55, 2.4 * u);
+    let bub = '';
+    let shine = '';
+    for (let i = 0; i < 5; i++) {
+      const x = b.x + b.w * (0.22 + r() * 0.56);
+      const y = b.y + b.h * (0.62 + r() * 0.26);
+      const rr = (1.4 + r() * 2.2) * u;
+      bub += dot(x, y, rr);
+      shine += dot(x - rr * 0.35, y - rr * 0.35, rr * 0.3);
+    }
+    out.inner += `<path d="${bub}" fill="#fff" fill-opacity=".1" stroke="#fff" stroke-opacity=".38" stroke-width="${n(0.6 * u)}"/>${blot(shine, '#fff', 0.7)}`;
+  }
+  if (tex === 'fuzz' && !lite && spec.finish !== 'clay') {
+    // grano fino (solo estático: en 'lite' y durante deformaciones no se pinta el filtro)
+    out.defs += `<filter id="${o.id}-grain" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="1.1" numOctaves="1" seed="${skinHash(spec) % 97}"/><feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .8 0"/></filter>`;
+    out.inner += `<rect x="${n(L.box.x - 5)}" y="${n(L.box.y - 5)}" width="${n(L.box.w + 10)}" height="${n(L.box.h + 10)}" filter="url(#${o.id}-grain)" opacity=".09"/>`;
+  }
+
+  // borde: mechones de pelo o pelusa que rompen la silueta (abajo no: apoya en el suelo)
+  if (tex === 'fur') {
+    // mismo nº de muestras y de tiradas siempre: al deformarse, cada mechón sigue siendo el mismo
+    const S = edgeSamples(L.pts, 3);
+    let d = '';
+    for (const [x, y, nx, ny] of S) {
+      const len = (2.6 + r() * 3) * u;
+      const tilt = (r() - 0.5) * 0.9 + 0.25 * Math.sign(nx || 1);
+      if (ny > 0.55) continue;
+      const bw = 2.3 * u;
+      const tx = -ny;
+      const ty = nx;
+      const ix = x - nx * 1.2 * u;
+      const iy = y - ny * 1.2 * u;
+      d += `M${n(ix - tx * bw)} ${n(iy - ty * bw)}L${n(x + nx * len + tx * len * tilt)} ${n(y + ny * len + ty * len * tilt + len * 0.2)}L${n(ix + tx * bw)} ${n(iy + ty * bw)}`;
+    }
+    const st = o.line ? ` stroke="${o.line.color}" stroke-width="${n(Math.min(o.line.w, 2.4) * 0.75)}"${o.line.op ? ` stroke-opacity="${o.line.op}"` : ''} stroke-linejoin="round"` : '';
+    out.rim = `<path d="${d}" fill="${o.fill}"${st}/>`;
+    if (tile) out.rim += `<path d="${d}" fill="${out.part}"/>`;
+  }
+  if (tex === 'fuzz') {
+    const S = edgeSamples(L.pts, 5);
+    let d = '';
+    for (const [x, y, nx, ny] of S) {
+      const len = (1.2 + r() * 1.6) * u;
+      const a = (r() - 0.5) * 0.8;
+      if (ny > 0.6) continue;
+      d += `M${n(x - nx * 0.6 * u)} ${n(y - ny * 0.6 * u)}l${n((nx - ny * a) * len)} ${n((ny + nx * a) * len)}`;
+    }
+    out.rim = ink(d, o.line ? o.line.color : shade(o.col, -0.35), o.line?.op ?? 0.5, 0.8 * u);
+  }
+  return out;
+}
+
+// ───────────────────────────── piezas unidas ─────────────────────────────
+
+const mixHex = (a, b, k) => {
+  const A = hexToRgb(a);
+  const B = hexToRgb(b);
+  return `#${A.map((v, i) => Math.round(v + (B[i] - v) * k).toString(16).padStart(2, '0')).join('')}`;
+};
+
+/** Color del degradado del cuerpo en un punto (para piezas con transformación propia, p. ej. manos). */
+export function skinAt(skin, x, y) {
+  if (!skin?.stops) return skin?.solid || '#888888';
+  const { box, stops } = skin;
+  const u = (x - box.x) / (box.w || 1);
+  const v = (y - box.y) / (box.h || 1);
+  const t = Math.min(1, Math.hypot(u - 0.36, v - 0.28) / 0.85);
+  for (let i = 1; i < stops.length; i++) {
+    if (t <= stops[i][0]) return mixHex(stops[i - 1][1], stops[i][1], (t - stops[i - 1][0]) / (stops[i][0] - stops[i - 1][0]));
+  }
+  return stops[stops.length - 1][1];
+}
+
+/** Atributos de un trazo de silueta para piezas de piel (sin contorno si el cuerpo no lo tiene). */
+export function skinStroke(skin, w = skin.lw) {
+  return skin.line ? ` stroke="${skin.line}" stroke-width="${n(w)}" stroke-linejoin="round"${skin.lineOp ? ` stroke-opacity="${skin.lineOp}"` : ''}` : '';
+}
+
+/**
+ * Una o varias siluetas (`d` en coordenadas del cuerpo) pintadas con la piel: relleno del cuerpo,
+ * luz, textura y por último el trazo (doble de ancho: la mitad interior la tapa el cuerpo).
+ */
+export function skinPaths(skin, d, o = {}) {
+  const fill = o.fill || skin.fill;
+  let s = `<path d="${d}" fill="${fill}"/>`;
+  if (o.lit !== false && skin.lit && o.fill) s += `<path d="${d}" fill="${skin.lit}"/>`;
+  if (skin.tex && o.tex !== false) s += `<path d="${d}" fill="${skin.tex}"/>`;
+  if (o.extra) s += o.extra;
+  if (skin.line) s += `<path d="${d}" fill="none"${skinStroke(skin)}/>`;
+  return s;
+}
+
+/**
+ * Unión de piezas al cuerpo. shapes: [{ d, tf?, sw?, sl? }] (sw: pieza de trazo con ese ancho;
+ * sl: largo de su raíz). Devuelve
+ *   shadow · sombra de contacto sobre las piezas, junto al borde del cuerpo (va detrás del cuerpo)
+ *   mask   · siluetas en negro que recortan el contorno del cuerpo donde nace cada pieza
+ */
+export function joinSVG(skin, shapes, key) {
+  if (!shapes.length) return { shadow: '', mask: '' };
+  const T = (s) => (s.tf ? ` transform="${s.tf}"` : '');
+  let mask = '';
+  let clip = '';
+  let roots = '';
+  for (const s of shapes) {
+    if (s.sw) {
+      mask += `<path d="${s.d}"${T(s)} fill="none" stroke="#000" stroke-width="${n(s.sw)}" stroke-linecap="round"/>`;
+      if (s.sl) roots += `<path d="${s.d}"${T(s)} fill="none" stroke="#000" stroke-opacity=".2" stroke-width="${n(s.sw)}" stroke-dasharray="${n(s.sl)} 9999"/>`;
+    } else {
+      mask += `<path d="${s.d}"${T(s)} fill="#000"/>`;
+      clip += `<path d="${s.d}"${T(s)}/>`;
+    }
+  }
+  let shadow = roots;
+  if (clip) {
+    const w = skin.box.w;
+    shadow += `<clipPath id="${skin.uid}-${key}">${clip}</clipPath><g clip-path="url(#${skin.uid}-${key})" fill="none" stroke="#000"><path d="${skin.d}" stroke-opacity=".1" stroke-width="${n(w * 0.16)}"/><path d="${skin.d}" stroke-opacity=".12" stroke-width="${n(w * 0.07)}"/></g>`;
+  }
+  return { shadow, mask };
+}