@7ots/cli 0.1.7 → 0.1.9

package/server/server.mjs

@@ -106,10 +106,20 @@ if (PLATFORM) {
 
 // ───────────────────────────── servidor ─────────────────────────────
 
+// Commit desplegado: scripts/deploy.sh escribe REVISION (JSON) en la raíz. Sin él (dev) → null.
+const REVISION = (() => {
+  try { return JSON.parse(readFileSync(join(ROOT, 'REVISION'), 'utf8')); } catch { return null; }
+})();
+
 const server = createServer(async (req, res) => {
   const url = new URL(req.url, `http://${req.headers.host || 'localhost'}`);
   const t = reqT(req);
+  if (REVISION?.commit) res.setHeader('X-7ots-Revision', REVISION.commit);
   try {
+    if (url.pathname === '/version.json' && (req.method === 'GET' || req.method === 'HEAD')) {
+      res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache', 'Access-Control-Allow-Origin': '*' });
+      return res.end(req.method === 'HEAD' ? undefined : JSON.stringify(REVISION || { commit: null }));
+    }
     if (platform && ((await platform(req, res, url)) || (await auth(req, res, url)))) return;
     if (PLATFORM && (url.pathname === '/app' || url.pathname.startsWith('/app/'))) return await serveApp(req, res, url.pathname);
     if (url.pathname === '/llms.txt' && (req.method === 'GET' || req.method === 'HEAD')) {
@@ -322,8 +332,8 @@ async function serveBackoffice(req, res, pathname, dir = 'backoffice') {
     if ((await stat(file)).isDirectory()) file = join(file, 'index.html');
     const data = await readFile(file);
     const headers = { 'Content-Type': MIME[extname(file)] || 'application/octet-stream', 'Cache-Control': 'no-cache', 'X-Content-Type-Options': 'nosniff', 'Referrer-Policy': 'no-referrer' };
-    // El panel no se puede enmarcar (clickjacking); la vista previa sí, desde el propio panel.
-    headers['Content-Security-Policy'] = file.endsWith('preview.html') ? "frame-ancestors 'self'" : "frame-ancestors 'none'";
+    // Nada se puede enmarcar (clickjacking).
+    headers['Content-Security-Policy'] = "frame-ancestors 'none'";
     res.writeHead(200, headers);
     res.end(data);
   } catch {

package/src/avatar/three.js

@@ -42,12 +42,13 @@ export function loadThree() {
   threeP ??= (async () => {
     if (globalThis.__OTS_THREE__?.three) return globalThis.__OTS_THREE__;
     const u = (p) => `${base()}/${p}/+esm`;
-    const [three, BufferGeometryUtils, RoomEnvironment] = await Promise.all([
+    const [three, BufferGeometryUtils, RoomEnvironment, GLTFLoader] = await Promise.all([
       import(/* @vite-ignore */ /* webpackIgnore: true */ `${base()}/+esm`),
       import(/* @vite-ignore */ /* webpackIgnore: true */ u('examples/jsm/utils/BufferGeometryUtils.js')),
       import(/* @vite-ignore */ /* webpackIgnore: true */ u('examples/jsm/environments/RoomEnvironment.js')),
+      import(/* @vite-ignore */ /* webpackIgnore: true */ u('examples/jsm/loaders/GLTFLoader.js')),
     ]);
-    return (globalThis.__OTS_THREE__ = { three, BufferGeometryUtils, RoomEnvironment });
+    return (globalThis.__OTS_THREE__ = { three, BufferGeometryUtils, RoomEnvironment, GLTFLoader });
   })();
   threeP.catch(() => { threeP = null; });
   return threeP;

package/src/character/AvatarEditor.js

@@ -13,7 +13,9 @@
  * - Personaje 3D: la MISMA spec y las mismas pestañas, con vista previa 3D (src/character3d, se
  *   arrastra para girarlo) y material peluche/vinilo. Los puntos arrastrables son del 2D: en 3D se
  *   ocultan (forma, ojos y boca se cambian desde las pestañas).
- * - Imagen: retrato fijo.
+ * - Carta: la carta coleccionable holográfica del ot (la del pet de escritorio) con su personaje, o
+ *   con una imagen propia como arte; se elige la lámina (holo, prisma, cosmos, oro, sin lámina).
+ *   Nombre, rol y bio de la carta: propiedad `el.identity` u `opts.identity` (+ `opts.otsId`).
  *
  * Idioma: atributo `lang` (o la propiedad nativa `el.lang`, u `opts.locale` en createAvatarEditor).
  * Cambiarlo vuelve a pintar los textos en caliente conservando el valor, la pestaña y el historial.
@@ -23,25 +25,27 @@
 
 import {
   normalizeCharacter, renderCharacter, createCharacter, applyPreset, randomCharacter, layout, bodyPoints,
-  SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, TEXTURES, ACCESSORIES, ACCESSORY_GROUPS, PRESETS, BODY_POINTS,
+  SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, TEXTURES, ACCESSORIES, ACCESSORY_GROUPS, BODY_POINTS,
   CHARACTER_MOODS, CHARACTER_GESTURES, CHARACTER_MORPHS, partLabel,
 } from './Character.js';
 import { translator, detectLocale, getLocale, onLocaleChange, formatNumber } from '../i18n/index.js';
 import { STYLES as ART_STYLES } from './styles.js';
 import { loadCharacter3D } from '../avatar/three.js';
+import { createTradingCard, CARD_FOILS } from './TradingCard.js';
 
 const VIEW = [-20, -50, 240, 270];
 const AXIS = 100;
 const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
 
 const KINDS = ['character', 'plush', 'image'];
+const RANDOM_N = 12;
 const MATERIALS = ['plush', 'vinyl'];
 
 const TABS = ['styles', 'shape', 'color', 'eyes', 'mouth', 'face', 'acc'];
 const GESTURES = CHARACTER_GESTURES;
 // Morphs temporales para la vista previa (las formas "shape:<id>" se ven ya en la pestaña de forma).
 const MORPHS = CHARACTER_MORPHS.filter((m) => !m.startsWith('shape'));
-const OUTLINES = ['auto', 'none', 'thin', 'bold'];
+const OUTLINES = ['auto', 'none', 'thin', 'bold', 'tone', 'sticker'];
 const MAX_ACC = 16;
 
 const CSS = `
@@ -111,7 +115,15 @@ input[type=text],input[type=url]{font:inherit;width:100%;padding:7px 9px;border-
 :host([simple]) [data-kind=image],:host([simple]) [data-bar=export]{display:none!important}
 :host([simple]) .wrap{border:0;border-radius:0;background:transparent}
 .alt{padding:18px;display:grid;gap:14px;max-width:640px}
+.rh{display:flex;align-items:center;gap:10px}
+.rh .chip{margin-left:auto}
+.opt i.ph{display:block;aspect-ratio:1;border-radius:10px;background:var(--ae-line);opacity:.5;animation:ph 1.2s ease-in-out infinite alternate}
+@keyframes ph{to{opacity:.15}}
 .alt img{max-width:160px;border-radius:14px;border:1px solid var(--ae-line)}
+.alt.cardv{max-width:none;grid-template-columns:minmax(220px,340px) minmax(220px,1fr);align-items:start;gap:22px}
+.alt .tcard{padding:8px 0}
+.alt .side{display:grid;gap:14px;align-content:start}
+@media (max-width:640px){.alt.cardv{grid-template-columns:1fr}}
 `;
 
 const SWATCHES = ['#a0714f', '#f1c27d', '#fcd9b6', '#e0a97e', '#8d5524', '#ef4444', '#f97316', '#facc15', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#a855f7', '#ec4899', '#f8fafc', '#94a3b8', '#1f2937'];
@@ -125,6 +137,7 @@ export function normalizeEditorValue(v = {}) {
     material: MATERIALS.includes(v.material) ? v.material : 'plush',
     avatar: { url: typeof v.avatar?.url === 'string' ? v.avatar.url : '', body: v.avatar?.body === 'M' ? 'M' : 'F' },
     image: typeof v.image === 'string' ? v.image : '',
+    card: { foil: CARD_FOILS.includes(v.card?.foil) ? v.card.foil : '' },
   };
 }
 
@@ -133,6 +146,8 @@ export function normalizeEditorValue(v = {}) {
  * @param {{ value?: object, onChange?: (v:object)=>void, plush?: boolean, simple?: boolean, theme?: 'light'|'dark', locale?: string }} [opts]
  *   plush: false oculta el tipo «Personaje 3D» (se acepta también el antiguo `realistic: false`).
  *   locale: idioma de la interfaz ('es', 'en', 'pt'…); se puede cambiar luego con `el.lang = 'en'`.
+ *   lookFree: async (characters[]) => boolean[]: qué caras están libres; las sugerencias al azar de la
+ *   pestaña Estilos solo muestran las libres (en 7ots.com cada ot es único). Sin ella se muestran todas.
  */
 export function createAvatarEditor(container, opts = {}) {
   const el = document.createElement('ots-avatar-editor');
@@ -140,6 +155,8 @@ export function createAvatarEditor(container, opts = {}) {
   if (opts.simple) el.setAttribute('simple', ''); // sin selector de tipo ni exportar (p. ej. la portada)
   if (opts.theme) el.setAttribute('theme', opts.theme);
   if (opts.locale) el.setAttribute('lang', opts.locale);
+  if (opts.identity || opts.otsId) el.identity = { ...(opts.identity || {}), id: opts.otsId, createdAt: opts.createdAt };
+  if (opts.lookFree) el.lookFree = opts.lookFree;
   if (opts.value) el.value = opts.value;
   if (opts.onChange) el.addEventListener('change', (e) => opts.onChange(e.detail));
   container.appendChild(el);
@@ -195,6 +212,13 @@ export class AvatarEditor extends Base {
     this._renderAll();
   }
 
+  /** Datos de la carta (name, role, bio, tagline, id, createdAt); no forman parte del valor. */
+  get identity() { return this._ident || {}; }
+  set identity(i) {
+    this._ident = { ...(i || {}) };
+    if (this._ready && this._v.kind === 'image') this._renderImage();
+  }
+
   get value() { return structuredClone(this._v); }
   set value(v) {
     this._v = normalizeEditorValue(v);
@@ -220,7 +244,7 @@ export class AvatarEditor extends Base {
         this._applyLocale();
       });
     });
-    if (this._ready) return;
+    if (this._ready) return this._renderKind();
     this._ready = true;
     this._t = translator(this._resolveLocale());
     const root = this.attachShadow({ mode: 'open' });
@@ -277,6 +301,7 @@ export class AvatarEditor extends Base {
     cancelAnimationFrame(this._raf3);
     this._raf3 = 0;
     this._ch3?.destroy();
+    this._dropCard();
     this._ch3 = null;
     this._ch3P = null;
   }
@@ -437,15 +462,36 @@ export class AvatarEditor extends Base {
     this.$('[data-bar=material]').classList.toggle('hidden', !plush);
     this.$$('[data-material]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.material === this._v.material)));
     if (k === 'image') this._renderImage();
+    else this._dropCard();
+  }
+
+  _dropCard() {
+    if (!this._card) return;
+    this._card.destroy();
+    this._card = null;
+    this.$('[data-view=image]').innerHTML = '';
   }
 
   _renderImage() {
     const img = this._v.image;
     const t = this._t;
-    this.$('[data-view=image]').innerHTML = `
+    const view = this.$('[data-view=image]');
+    const id = this.identity;
+    const look = { ...(id.look || {}), kind: 'image', image: /^https?:\/\//.test(img) ? img : '', character: this._v.character };
+    const data = { identity: { ...id, look }, id: id.id, createdAt: id.createdAt, foil: this._v.card.foil, locale: this.locale };
+    const foil = this._v.card.foil;
+    if (!view.querySelector('.tcard')) {
+      view.classList.add('cardv');
+      view.innerHTML = `<div class="tcard"></div><div class="side"></div>`;
+      this._card?.destroy();
+      this._card = createTradingCard(view.querySelector('.tcard'), data);
+    } else this._card.update(data);
+    view.querySelector('.side').innerHTML = `
       <div><h4>${esc(t('editor.image.title'))}</h4><p class="hint" style="margin:0">${esc(t('editor.image.intro'))}</p></div>
+      <div><span class="hint" style="margin:0 0 6px;display:block">${esc(t('editor.image.foil'))}</span>
+        <span class="chips"><button type="button" class="chip" data-foil="" aria-pressed="${!foil}">${esc(t('editor.image.foils.auto'))}</button>${CARD_FOILS.map((f) => `<button type="button" class="chip" data-foil="${f}" aria-pressed="${foil === f}">${esc(t(`editor.image.foils.${f}`))}</button>`).join('')}</span></div>
       <label class="f">${esc(t('editor.image.url'))}<input type="url" data-m="image" placeholder="${esc(t('editor.image.placeholder'))}" value="${esc(img)}"></label>
-      ${/^https?:\/\//.test(img) ? `<img src="${esc(img)}" alt="${esc(t('editor.image.alt'))}">` : ''}`;
+      <p class="hint" style="margin:0">${esc(t('editor.image.hint'))}</p>`;
   }
 
   _thumbView(kind) {
@@ -467,6 +513,38 @@ export class AvatarEditor extends Base {
       .join('')}</div>`;
   }
 
+  /**
+   * Sugerencias al azar que nadie tiene (si hay `lookFree`): reemplazan a los estilos fijos, que en
+   * 7ots.com ya estarían tomados. Se piden de a lotes y se guardan hasta que se pida «Otros».
+   */
+  _randomGrid(view) {
+    if (!this._rand) {
+      this._loadRandoms();
+      return `<div class="grid">${'<button type="button" class="opt" disabled><i class="ph"></i></button>'.repeat(RANDOM_N)}</div>`;
+    }
+    return `<div class="grid">${this._rand
+      .map((ch, i) => `<button type="button" class="opt" data-rand="${i}" title="🎲">${renderCharacter({ ...ch, style: 'none' }, { open: 0 }, { viewBox: view })}</button>`)
+      .join('')}</div>`;
+  }
+
+  async _loadRandoms() {
+    if (this._randBusy) return;
+    this._randBusy = true;
+    const out = [];
+    try {
+      for (let round = 0; round < 4 && out.length < RANDOM_N; round++) {
+        const batch = Array.from({ length: RANDOM_N + 4 }, () => normalizeCharacter(randomCharacter()));
+        let free = batch.map(() => true);
+        if (this.lookFree) free = await Promise.resolve(this.lookFree(batch)).catch(() => free);
+        out.push(...batch.filter((_, i) => free?.[i] !== false));
+      }
+    } finally {
+      this._randBusy = false;
+    }
+    this._rand = out.slice(0, RANDOM_N);
+    if (this._ready && this._tab === 'styles') this._renderPanel();
+  }
+
   /**
    * Tira de estilos artísticos (styles.js): el personaje actual en cada estilo, con su fondo.
    * Son muchos SVG con filtros: cada miniatura se rasteriza una vez como <img> estática, solo
@@ -540,7 +618,7 @@ export class AvatarEditor extends Base {
     let h = '';
     switch (this._tab) {
       case 'styles':
-        h = `${this._artStyles()}<h4>${T('editor.styles.title')}</h4>${this._grid('presets', PRESETS, c.preset, 'data-preset', (p) => ({ preset: p.id }), full)}
+        h = `${this._artStyles()}<h4 class="rh">${T('editor.styles.title')}<button type="button" class="chip" data-a="reroll">🎲 ${T('editor.styles.more')}</button></h4>${this._randomGrid(full)}
           <p class="hint">${T('editor.styles.hint')}</p>
           <label class="c" style="margin-top:8px"><input type="checkbox" data-keep-body ${this._keepBody ? 'checked' : ''}> ${T('editor.styles.keepBody')}</label>`;
         break;
@@ -794,6 +872,14 @@ export class AvatarEditor extends Base {
       this._drawOverlay();
       return;
     }
+    if (d.rand) {
+      const pick = structuredClone(this._rand?.[+d.rand]);
+      if (!pick) return;
+      return this._set((n) => {
+        const keep = this._keepBody ? { body: n.body, finish: n.finish } : {};
+        Object.assign(n, pick, keep, { style: n.style });
+      });
+    }
     if (d.preset) return this._set((n) => Object.assign(n, applyPreset(n, d.preset, this._keepBody ? ['body', 'finish'] : [])));
     if (d.artstyle) return this._set((n) => { n.style = d.artstyle; });
     if (d.shape) return this._set((n) => { n.body.shape = d.shape; n.body.points = null; });
@@ -825,6 +911,7 @@ export class AvatarEditor extends Base {
       this._renderPanel();
       return this._drawOverlay();
     }
+    if (d.foil !== undefined) return this._setMeta((v) => (v.card = { foil: d.foil }));
     if (d.material) {
       this._setMeta((v) => (v.material = d.material));
       return this._sync3d();
@@ -834,6 +921,7 @@ export class AvatarEditor extends Base {
       case 'undo': return this._undo();
       case 'redo': return this._redo();
       case 'random': return this._set((n) => Object.assign(n, randomCharacter()));
+      case 'reroll': this._rand = null; return this._renderPanel();
       case 'sym': this._sym = !this._sym; b.setAttribute('aria-pressed', String(this._sym)); return this._drawOverlay();
       case 'reshape': return this._set((n) => { n.body.points = null; });
       case 'squash':

package/src/character/Character.js

@@ -23,13 +23,15 @@
  * 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.
+ * colores #rrggbb y números acotados (normalizeCharacter), así que es seguro inyectarlo. Los mods
+ * (`mods`, mods.js) traen SVG propio: se reescribe con una lista cerrada de etiquetas y atributos.
  */
 
 import {
-  BODY_POINTS, SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, TEXTURES, ACCESSORIES, PRESETS, shade, luminance,
+  BODY_POINTS, SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, TEXTURES, ACCESSORIES, PRESETS, CATALOG_V1, shade, luminance,
 } from './parts.js';
 import { renderSkin, joinSVG } from './skin.js';
+import { normalizeMods, applyMods, modPart } from './mods.js';
 import { STYLE_IDS, stylizeSpec, styleLayers, styleSeed, backdropIn, backdropCSS } from './styles.js';
 import { translator } from '../i18n/index.js';
 import {
@@ -149,7 +151,7 @@ export function normalizeCharacter(input = {}) {
     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',
+    outline: OUTLINES.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: {
@@ -183,9 +185,15 @@ export function normalizeCharacter(input = {}) {
         color: hex(a.color, ACC[a.id].color || '#1f2937'),
         color2: hex(a.color2, ACC[a.id].color2 || '#ffffff'),
       })),
+    ...(Array.isArray(i.mods) && i.mods.length ? { mods: normalizeMods(i.mods) } : {}),
   };
 }
 
+/** La ficha que se pinta: la base con sus mods aplicados (mods.js). */
+export function resolveCharacter(spec) {
+  return applyMods(normalizeCharacter(spec), normalizeCharacter);
+}
+
 /** Aplica un estilo (preset) conservando lo que se indique en `keep` (p. ej. ['body']). */
 export function applyPreset(spec, id, keep = []) {
   const next = normalizeCharacter({ preset: id });
@@ -193,8 +201,13 @@ export function applyPreset(spec, id, keep = []) {
   return next;
 }
 
-/** Personaje aleatorio (determinista con `seed`). */
-export function randomCharacter(seed = Math.random() * 1e9) {
+/**
+ * Personaje aleatorio (determinista con `seed`).
+ * opts.legacy: sortea solo entre las piezas del catálogo 1 (CATALOG_V1), con la misma secuencia
+ * que antes de 2026-10: las semillas antiguas siguen dando exactamente el mismo ot.
+ */
+export function randomCharacter(seed = Math.random() * 1e9, { legacy = false } = {}) {
+  const v1 = (list, k) => (legacy ? list.slice(0, CATALOG_V1[k]) : list);
   let s = Math.floor(seed) >>> 0 || 1;
   const rnd = () => ((s = (s * 1664525 + 1013904223) >>> 0) / 2 ** 32);
   const pick = (list) => list[Math.floor(rnd() * list.length)];
@@ -208,16 +221,18 @@ export function randomCharacter(seed = Math.random() * 1e9) {
     return `#${[f(0), f(8), f(4)].map((v) => v.toString(16).padStart(2, '0')).join('')}`;
   };
   const groups = new Map();
-  for (const a of ACCESSORIES) if (a.group !== 'extra' && a.random !== false) groups.set(a.group, [...(groups.get(a.group) || []), a]);
+  // Los sombreros con `random: false` del catálogo 1 solo entran en el sorteo nuevo (no legacy).
+  const accPool = legacy ? v1(ACCESSORIES, 'accessories').filter((a) => a.random !== false) : ACCESSORIES.filter((a, i) => a.random !== false || i < CATALOG_V1.accessories);
+  for (const a of accPool) if (a.group !== 'extra') groups.set(a.group, [...(groups.get(a.group) || []), a]);
   const acc = [];
   for (const [, list] of groups) if (rnd() < 0.35) acc.push({ id: pick(list).id });
   return normalizeCharacter({
-    body: { shape: pick(SHAPES).id, color: hsl(hue, 0.55, 0.62), pattern: rnd() < 0.5 ? 'none' : pick(PATTERNS).id, patternColor: hsl((hue + 30) % 360, 0.5, 0.75) },
-    finish: pick(FINISHES.filter((f) => f.id !== 'sketch')).id,
-    eyes: { type: pick(EYES).id, iris: hsl(Math.floor(rnd() * 360), 0.7, 0.5), size: 0.85 + rnd() * 0.4, spacing: 0.85 + rnd() * 0.3 },
-    brows: { type: rnd() < 0.5 ? 'none' : pick(BROWS).id },
-    mouth: { type: pick(MOUTHS).id },
-    cheeks: { type: rnd() < 0.5 ? 'blush' : pick(CHEEKS).id },
+    body: { shape: pick(v1(SHAPES, 'shapes')).id, color: hsl(hue, 0.55, 0.62), pattern: rnd() < 0.5 ? 'none' : pick(v1(PATTERNS, 'patterns')).id, patternColor: hsl((hue + 30) % 360, 0.5, 0.75) },
+    finish: pick(v1(FINISHES, 'finishes').filter((f) => f.id !== 'sketch' && f.random !== false)).id,
+    eyes: { type: pick(v1(EYES, 'eyes')).id, iris: hsl(Math.floor(rnd() * 360), 0.7, 0.5), size: 0.85 + rnd() * 0.4, spacing: 0.85 + rnd() * 0.3 },
+    brows: { type: rnd() < 0.5 ? 'none' : pick(v1(BROWS, 'brows')).id },
+    mouth: { type: pick(v1(MOUTHS, 'mouths')).id },
+    cheeks: { type: rnd() < 0.5 ? 'blush' : pick(v1(CHEEKS, 'cheeks')).id },
     accessories: acc,
   });
 }
@@ -280,6 +295,9 @@ export function layout(spec, points = null) {
 let uidSeq = 0;
 const R = (v) => Math.round(v * 100) / 100;
 
+/** Contornos del cuerpo. 'tone': grueso, del color del cuerpo oscurecido; 'sticker': borde blanco de pegatina. */
+export const OUTLINES = ['auto', 'none', 'thin', 'bold', 'tone', 'sticker'];
+
 function palette(spec) {
   const body = spec.body.color;
   const dark = luminance(body) < 0.28;
@@ -293,14 +311,77 @@ function palette(spec) {
   };
 }
 
+/**
+ * Acabados del catálogo 2 (2026-10): degradado del cuerpo (stops [offset, color, opacidad?]) y
+ * capa interior recortada al cuerpo (brillos, reflejos). Los 7 originales siguen en renderLayers.
+ */
+const FINISH2 = {
+  pastel: {
+    grad: (c) => ({ stops: [[0, shade(c, 0.4)], [1, shade(c, 0.12)]] }),
+    inner: ({ d, box, col }) => `<path d="${d}" fill="none" stroke="#fff" stroke-width="${R(box.w * 0.05)}" opacity=".35"/><path d="${d}" fill="none" stroke="${shade(col, -0.2)}" stroke-width="${R(box.w * 0.035)}" opacity=".18" transform="translate(${R(box.w * 0.015)} ${R(box.h * 0.02)})"/>`,
+  },
+  metal: {
+    grad: (c) => ({ x2: 0.25, stops: [[0, shade(c, 0.6)], [0.3, shade(c, 0.12)], [0.48, shade(c, -0.38)], [0.56, shade(c, 0.32)], [0.8, shade(c, 0.05)], [1, shade(c, -0.42)]] }),
+    inner: ({ box }) => {
+      const x = box.x + box.w * 0.24;
+      const y = box.y + box.h * 0.3;
+      return `<ellipse cx="${R(x)}" cy="${R(y)}" rx="${R(box.w * 0.05)}" ry="${R(box.h * 0.2)}" transform="rotate(14 ${R(x)} ${R(y)})" fill="#fff" opacity=".7"/><circle cx="${R(box.x + box.w * 0.36)}" cy="${R(box.y + box.h * 0.1)}" r="${R(box.w * 0.03)}" fill="#fff" opacity=".85"/><ellipse cx="${R(box.x + box.w * 0.78)}" cy="${R(box.y + box.h * 0.62)}" rx="${R(box.w * 0.025)}" ry="${R(box.h * 0.12)}" fill="#fff" opacity=".35"/>`;
+    },
+  },
+  pearl: {
+    grad: (c) => ({ radial: true, stops: [[0, shade(c, 0.62)], [0.6, shade(c, 0.18)], [1, shade(c, -0.18)]] }),
+    defs: (id, c, box) => `<linearGradient id="${id}-iri" gradientUnits="userSpaceOnUse" x1="${R(box.x)}" y1="${R(box.y)}" x2="${R(box.x + box.w)}" y2="${R(box.y + box.h)}"><stop offset="0" stop-color="#f9a8d4"/><stop offset=".35" stop-color="#a5f3fc"/><stop offset=".65" stop-color="#fef08a"/><stop offset="1" stop-color="#c4b5fd"/></linearGradient>`,
+    inner: ({ id, d, box }) => `<path d="${d}" fill="url(#${id}-iri)" opacity=".26"/><ellipse cx="${R(box.x + box.w * 0.32)}" cy="${R(box.y + box.h * 0.22)}" rx="${R(box.w * 0.17)}" ry="${R(box.h * 0.09)}" transform="rotate(-30 ${R(box.x + box.w * 0.32)} ${R(box.y + box.h * 0.22)})" fill="#fff" opacity=".6"/><path d="${d}" fill="none" stroke="#fff" stroke-width="${R(box.w * 0.04)}" opacity=".3"/>`,
+  },
+  glass: {
+    grad: (c) => ({ radial: true, cx: 0.5, cy: 0.4, r: 0.7, stops: [[0, shade(c, 0.35), 0.5], [0.7, c, 0.66], [1, shade(c, -0.25), 0.88]] }),
+    inner: ({ d, box, col }) => {
+      const x = box.x + box.w * 0.2;
+      const y = box.y + box.h * 0.38;
+      return `<path d="${d}" fill="none" stroke="#fff" stroke-width="${R(box.w * 0.05)}" opacity=".45"/><ellipse cx="${R(box.x + box.w * 0.55)}" cy="${R(box.y + box.h * 0.95)}" rx="${R(box.w * 0.3)}" ry="${R(box.h * 0.1)}" fill="${shade(col, 0.6)}" opacity=".45"/><path d="M${R(x)} ${R(y + box.h * 0.12)}Q${R(x)} ${R(y - box.h * 0.12)} ${R(x + box.w * 0.16)} ${R(y - box.h * 0.22)}" stroke="#fff" stroke-width="${R(box.w * 0.045)}" fill="none" stroke-linecap="round" opacity=".85"/><circle cx="${R(x + box.w * 0.25)}" cy="${R(y - box.h * 0.25)}" r="${R(box.w * 0.025)}" fill="#fff" opacity=".9"/>`;
+    },
+  },
+  velvet: {
+    grad: (c) => ({ radial: true, cx: 0.48, cy: 0.42, r: 0.62, stops: [[0, shade(c, 0.1)], [0.7, shade(c, -0.08)], [1, shade(c, -0.42)]] }),
+    defs: (id) => `<filter id="${id}-vel" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="1.4" numOctaves="1" seed="11"/><feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0"/></filter>`,
+    inner: ({ id, d, box }) => `<rect x="${R(box.x - 5)}" y="${R(box.y - 5)}" width="${R(box.w + 10)}" height="${R(box.h + 10)}" filter="url(#${id}-vel)" opacity=".12"/><path d="${d}" fill="none" stroke="#fff" stroke-width="${R(box.w * 0.025)}" opacity=".25" transform="translate(${R(-box.w * 0.012)} ${R(-box.h * 0.012)})"/>`,
+  },
+  holo: {
+    grad: (c) => ({ radial: true, stops: [[0, shade(c, 0.45)], [0.55, shade(c, 0.1)], [1, shade(c, -0.22)]] }),
+    defs: (id, c, box) => `<linearGradient id="${id}-holo" gradientUnits="userSpaceOnUse" x1="${R(box.x)}" y1="${R(box.y + box.h)}" x2="${R(box.x + box.w)}" y2="${R(box.y)}"><stop offset="0" stop-color="#ff7ad9"/><stop offset=".25" stop-color="#ffd36e"/><stop offset=".5" stop-color="#7affc8"/><stop offset=".75" stop-color="#7ab8ff"/><stop offset="1" stop-color="#c47aff"/></linearGradient>`,
+    inner: ({ id, d, box }) => {
+      let bands = '';
+      for (let i = 0; i < 5; i++) {
+        const x = box.x - box.w * 0.3 + i * box.w * 0.32;
+        bands += `M${R(x)} ${R(box.y + box.h + 6)}L${R(x + box.w * 0.6)} ${R(box.y - 6)}`;
+      }
+      return `<path d="${d}" fill="url(#${id}-holo)" opacity=".42"/><path d="${bands}" stroke="#fff" stroke-width="${R(box.w * 0.05)}" opacity=".22"/><ellipse cx="${R(box.x + box.w * 0.3)}" cy="${R(box.y + box.h * 0.2)}" rx="${R(box.w * 0.14)}" ry="${R(box.h * 0.07)}" transform="rotate(-32 ${R(box.x + box.w * 0.3)} ${R(box.y + box.h * 0.2)})" fill="#fff" opacity=".6"/>`;
+    },
+  },
+  vinyl: {
+    grad: (c) => ({ stops: [[0, c], [1, c]] }),
+    inner: ({ d, box, col }) => {
+      const x = box.x + box.w * 0.3;
+      const y = box.y + box.h * 0.2;
+      return `<path d="${d}" fill="none" stroke="${shade(col, -0.18)}" stroke-width="${R(box.w * 0.09)}" transform="translate(${R(box.w * 0.035)} ${R(box.h * 0.035)})"/><ellipse cx="${R(x)}" cy="${R(y)}" rx="${R(box.w * 0.11)}" ry="${R(box.h * 0.055)}" transform="rotate(-30 ${R(x)} ${R(y)})" fill="#fff" opacity=".9"/><circle cx="${R(box.x + box.w * 0.44)}" cy="${R(box.y + box.h * 0.12)}" r="${R(box.w * 0.022)}" fill="#fff" opacity=".9"/>`;
+    },
+  },
+};
+
 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 === 'tone') return { color: shade(spec.body.color, -0.55), w: 4 };
+  if (o === 'sticker') return { color: '#ffffff', w: 6, under: { color: '#1f2937', w: 8.6 } };
   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 };
+  // acabados del catálogo 2
+  if (spec.finish === 'vinyl' && o === 'auto') return { color: shade(spec.body.color, -0.5), w: 3.2 };
+  if (spec.finish === 'glass' && o === 'auto') return { color: shade(spec.body.color, -0.3), w: 2, op: 0.7 };
+  if (spec.finish === 'metal' && o === 'auto') return { color: shade(spec.body.color, -0.6), w: 2.2, op: 0.8 };
   if (o === 'thin' || (o === 'auto' && spec.finish !== 'flat')) return { color: pal.line, w: 2.2, op: 0.55 };
   return null;
 }
@@ -355,8 +436,11 @@ 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;
 }
 
+/** Accesorio de catálogo o pieza de un mod. */
+const accOf = (spec, id) => ACC[id] || modPart(spec, id, shade);
+
 function accessorySVG(a, spec, L, pal, clipUrl, skin, key) {
-  const part = ACC[a.id];
+  const part = accOf(spec, a.id);
   const at = L.anchors[part.anchor] || L.anchors.center;
   const grow = growing(a, part);
   const c = {
@@ -445,6 +529,17 @@ export function renderLayers(spec, state = {}, opts = {}) {
     defs += `<filter id="${id}-rough"><feTurbulence type="turbulence" baseFrequency=".035" numOctaves="2" seed="3"/><feDisplacementMap in="SourceGraphic" scale="3.5"/></filter>`;
     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>`;
   }
+  const f2 = FINISH2[f];
+  if (f2) {
+    const g = f2.grad(col);
+    stops = g.stops;
+    const st = stops.map(([o, c, a]) => `<stop offset="${o}" stop-color="${c}"${a !== undefined ? ` stop-opacity="${a}"` : ''}/>`).join('');
+    const T = `gradientUnits="userSpaceOnUse" gradientTransform="translate(${R(box.x)} ${R(box.y)}) scale(${R(box.w)} ${R(box.h)})"`;
+    defs += g.radial ? `<radialGradient id="${id}-g" ${T} cx="${g.cx ?? 0.36}" cy="${g.cy ?? 0.28}" r="${g.r ?? 0.85}">${st}</radialGradient>` : `<linearGradient id="${id}-g" ${T} x1="0" y1="0" x2="${g.x2 ?? 0}" y2="1">${st}</linearGradient>`;
+    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>`;
+    defs += f2.defs ? f2.defs(id, col, box) : '';
+    fill = `url(#${id}-g)`;
+  }
 
   // Piel: textura de superficie y lo que comparten las piezas unidas (metamorfosis y accesorios)
   const bodyFill = f === 'neon' ? shade(col, -0.72) : fill;
@@ -461,7 +556,8 @@ export function renderLayers(spec, state = {}, opts = {}) {
   let front = '';
   let mask = '';
   spec.accessories.forEach((a, i) => {
-    const part = ACC[a.id];
+    const part = accOf(spec, a.id);
+    if (!part) return;
     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;
@@ -489,10 +585,12 @@ 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)})"/>`;
+  if (f2) inner += f2.inner({ id, d, box, col, L });
   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?.under) body += `<path d="${d}" fill="none" stroke="${ol.under.color}" stroke-width="${ol.under.w}" stroke-linejoin="round"${masked ? ` mask="url(#${id}-om)"` : ''}/>`;
   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;
 
@@ -525,7 +623,7 @@ export function renderLayers(spec, state = {}, opts = {}) {
  */
 export function renderCharacter(spec, state = {}, opts = {}) {
   const src = normalizeCharacter(spec);
-  const s = stylizeSpec(src);
+  const s = stylizeSpec(applyMods(src, normalizeCharacter));
   const x = renderLayers(s, state, opts);
   const title = opts.title ? `<title>${String(opts.title).replace(/[<>&"]/g, '')}</title>` : '';
   const parts = `${x.back}${x.body}${x.cheeks}${x.eyes}${x.brows}${x.mouth}${x.front}`;
@@ -596,7 +694,7 @@ export function createCharacter(container, spec, opts = {}) {
 
   // 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 s = stylizeSpec(applyMods(src, normalizeCharacter));
   let uid = `otsc${(++uidSeq).toString(36)}`;
   let g = {};
   let L = layout(s);
@@ -1307,7 +1405,7 @@ export function createCharacter(container, spec, opts = {}) {
     clearEffects,
     update(next) {
       src = normalizeCharacter(next);
-      s = stylizeSpec(src);
+      s = stylizeSpec(applyMods(src, normalizeCharacter));
       uid = `otsc${(++uidSeq).toString(36)}`;
       morphMask = '';
       build();
@@ -1327,3 +1425,4 @@ export function createCharacter(container, spec, opts = {}) {
 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';
+export { normalizeMods, normalizeMod, sanitizeSvg, modName, MOD_ANCHORS, MAX_MODS } from './mods.js';