@7ots/cli 0.1.1 → 0.1.4

package/src/character/AvatarEditor.js

@@ -4,12 +4,15 @@
  *   const ed = createAvatarEditor(div, { value: identity.look, onChange: (look) => … });
  *   <ots-avatar-editor></ots-avatar-editor>  → el.value = {...}; el.addEventListener('change', e => e.detail)
  *
- * Valor: { kind: 'character'|'realistic'|'image', character: spec, avatar: { url, body }, image }
+ * Valor: { kind: 'character'|'plush'|'image', character: spec, material: 'plush'|'vinyl', avatar, image }
+ * (un 'realistic' heredado se abre como 'character'; `avatar` solo se conserva).
  *
  * - Personaje 2D: estilos, forma (se deforma arrastrando sus puntos, con simetría), color,
  *   acabado, ojos, boca, cara y accesorios (arrastrables). Deshacer/rehacer, aleatorio,
  *   exportar SVG/JSON, vista previa hablando/con ánimos/gestos.
- * - Realista 3D: modelo .glb para TalkingHead (rig Mixamo + blendshapes ARKit + visemas Oculus).
+ * - 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.
  *
  * Idioma: atributo `lang` (o la propiedad nativa `el.lang`, u `opts.locale` en createAvatarEditor).
@@ -20,18 +23,19 @@
 
 import {
   normalizeCharacter, renderCharacter, createCharacter, applyPreset, randomCharacter, layout, bodyPoints,
-  SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, ACCESSORIES, ACCESSORY_GROUPS, PRESETS, BODY_POINTS,
+  SHAPES, EYES, BROWS, MOUTHS, CHEEKS, PATTERNS, FINISHES, TEXTURES, ACCESSORIES, ACCESSORY_GROUPS, PRESETS, 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';
 
 const VIEW = [-20, -50, 240, 270];
 const AXIS = 100;
 const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
 
-export const SAMPLE_3D = [
-  { label: 'Brunette (TalkingHead, MIT)', url: 'https://cdn.jsdelivr.net/gh/met4citizen/TalkingHead@1.7.0/avatars/brunette.glb', body: 'F' },
-];
+const KINDS = ['character', 'plush', 'image'];
+const MATERIALS = ['plush', 'vinyl'];
 
 const TABS = ['styles', 'shape', 'color', 'eyes', 'mouth', 'face', 'acc'];
 const GESTURES = CHARACTER_GESTURES;
@@ -45,7 +49,7 @@ const CSS = `
   --ae-bg:#ffffff;--ae-soft:#f4f4fa;--ae-line:#e4e4ee;--ae-fg:#17171f;--ae-muted:#6b6f82;--ae-p:#6d5dfc;--ae-p-soft:#6d5dfc1f;--ae-stage:radial-gradient(circle at 50% 35%,#ffffff,#eceaf7)}
 @media (prefers-color-scheme:dark){:host{--ae-bg:#17171e;--ae-soft:#1f1f28;--ae-line:#2c2c38;--ae-fg:#ececf3;--ae-muted:#9a9db0;--ae-stage:radial-gradient(circle at 50% 35%,#2a2a36,#15151c)}}
 :host([theme=light]){--ae-bg:#ffffff;--ae-soft:#f4f4fa;--ae-line:#e4e4ee;--ae-fg:#17171f;--ae-muted:#6b6f82;--ae-stage:radial-gradient(circle at 50% 35%,#ffffff,#eceaf7)}
-:host([theme=dark]){--ae-bg:#17171e;--ae-soft:#1f1f28;--ae-line:#2c2c38;--ae-fg:#ececf3;--ae-muted:#9a9db0;--ae-stage:radial-gradient(circle at 50% 35%,#2a2a36,#15151c)}
+:host([theme=dark]){color-scheme:dark;--ae-bg:#17171e;--ae-soft:#1f1f28;--ae-line:#2c2c38;--ae-fg:#ececf3;--ae-muted:#9a9db0;--ae-stage:radial-gradient(circle at 50% 35%,#2a2a36,#15151c)}
 *{box-sizing:border-box}
 .wrap{background:var(--ae-bg);border:1px solid var(--ae-line);border-radius:16px;overflow:hidden}
 .kinds{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--ae-line);flex-wrap:wrap}
@@ -57,6 +61,7 @@ const CSS = `
 @media (max-width:760px){.left{border-right:0;border-bottom:1px solid var(--ae-line)}}
 .stage{position:relative;aspect-ratio:240/270;max-height:420px;margin:0 auto;width:100%;background:var(--ae-stage);touch-action:none;user-select:none}
 .stage>div,.stage>svg{position:absolute;inset:0;width:100%;height:100%}
+.stage .ch3{cursor:grab}
 .ov{overflow:visible}
 .h{cursor:grab;fill:#fff;stroke:var(--ae-p);stroke-width:2.2;outline:none}
 .h:hover,.h:focus-visible{fill:var(--ae-p)}
@@ -69,7 +74,8 @@ const CSS = `
 .btn:hover{border-color:var(--ae-p)}
 .btn:disabled{opacity:.4;cursor:default}
 .btn.p{background:var(--ae-p);border-color:var(--ae-p);color:#fff}
-select.btn{padding:5px 8px}
+select.btn{padding:6px 28px 6px 10px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9db0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
+select.btn option{background:var(--ae-soft);color:var(--ae-fg)}
 .right{display:flex;flex-direction:column;min-width:0}
 .tabs{display:flex;gap:2px;padding:8px 8px 0;overflow-x:auto;border-bottom:1px solid var(--ae-line);scrollbar-width:thin}
 .tabs button{border-radius:9px 9px 0 0;white-space:nowrap;padding:8px 11px}
@@ -81,6 +87,10 @@ select.btn{padding:5px 8px}
 .opt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .opt:hover{border-color:var(--ae-line)}
 .opt[aria-pressed=true]{border-color:var(--ae-p);background:var(--ae-p-soft);color:var(--ae-fg)}
+.arts{grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:minmax(78px,86px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin}
+.arts .opt{scroll-snap-align:start}
+.arts i{width:100%;aspect-ratio:1;display:block;border-radius:8px;background:var(--ae-line);opacity:.5}
+.arts img{width:100%;aspect-ratio:1;display:block}
 h4{margin:16px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ae-muted);font-weight:600}
 h4:first-child{margin-top:0}
 .row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 14px}
@@ -98,6 +108,8 @@ input[type=text],input[type=url]{font:inherit;width:100%;padding:7px 9px;border-
 .card{border:1px solid var(--ae-line);border-radius:12px;padding:12px;background:var(--ae-soft)}
 .sel-acc{margin-top:12px}
 .hidden{display:none!important}
+: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}
 .alt img{max-width:160px;border-radius:14px;border:1px solid var(--ae-line)}
 `;
@@ -106,10 +118,11 @@ const SWATCHES = ['#a0714f', '#f1c27d', '#fcd9b6', '#e0a97e', '#8d5524', '#ef444
 
 /** Valor completo del editor a partir de un `look` de identidad (o parcial). */
 export function normalizeEditorValue(v = {}) {
-  const kind = ['character', 'realistic', 'image'].includes(v.kind) ? v.kind : 'character';
+  const kind = KINDS.includes(v.kind) ? v.kind : 'character'; // 'realistic' (heredado) → character
   return {
     kind,
     character: normalizeCharacter(v.character || {}),
+    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 : '',
   };
@@ -117,12 +130,15 @@ export function normalizeEditorValue(v = {}) {
 
 /**
  * @param {HTMLElement} container
- * @param {{ value?: object, onChange?: (v:object)=>void, realistic?: boolean, locale?: string }} [opts]
+ * @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'`.
  */
 export function createAvatarEditor(container, opts = {}) {
   const el = document.createElement('ots-avatar-editor');
-  if (opts.realistic === false) el.setAttribute('no-realistic', '');
+  if (opts.plush === false || opts.realistic === false) el.setAttribute('no-plush', '');
+  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.value) el.value = opts.value;
   if (opts.onChange) el.addEventListener('change', (e) => opts.onChange(e.detail));
@@ -215,8 +231,10 @@ export class AvatarEditor extends Base {
           <div class="left">
             <div class="stage">
               <div class="ch"></div>
+              <div class="ch3 hidden"></div>
               <svg class="ov" viewBox="${VIEW.join(' ')}"></svg>
             </div>
+            <div class="bar hidden" data-bar="material"></div>
             <div class="bar" data-bar="play"></div>
             <div class="bar" data-bar="export"></div>
           </div>
@@ -225,7 +243,6 @@ export class AvatarEditor extends Base {
             <div class="panel" role="tabpanel"></div>
           </div>
         </div>
-        <div class="alt hidden" data-view="realistic"></div>
         <div class="alt hidden" data-view="image"></div>
       </div>`;
     this.$ = (s) => root.querySelector(s);
@@ -240,8 +257,8 @@ export class AvatarEditor extends Base {
     this._ov.addEventListener('pointerdown', (e) => this._onDown(e));
     this._ov.addEventListener('keydown', (e) => this._onHandleKey(e));
     this._ov.addEventListener('wheel', (e) => this._onWheel(e), { passive: false });
-    this.$('.stage').addEventListener('pointermove', (e) => { if (!this._drag) this._ch.lookAtPoint(e.clientX, e.clientY); });
-    this.$('.stage').addEventListener('pointerleave', () => this._ch.lookAt(0, 0));
+    this.$('.stage').addEventListener('pointermove', (e) => { if (!this._drag) this._pv.lookAtPoint(e.clientX, e.clientY); });
+    this.$('.stage').addEventListener('pointerleave', () => this._pv.lookAt(0, 0));
     this.addEventListener('keydown', (e) => {
       if (!(e.ctrlKey || e.metaKey) || e.key.toLowerCase() !== 'z') return;
       const t = e.composedPath()[0];
@@ -253,9 +270,55 @@ export class AvatarEditor extends Base {
   }
 
   disconnectedCallback() {
+    this._artIO?.disconnect();
     this._speech?.stop?.();
     this._offLocale?.();
     this._offLocale = null;
+    cancelAnimationFrame(this._raf3);
+    this._raf3 = 0;
+    this._ch3?.destroy();
+    this._ch3 = null;
+    this._ch3P = null;
+  }
+
+  // ───────────── vista previa 3D ─────────────
+
+  /** Vista previa activa: la 3D en «Personaje 3D» (si cargó), si no la 2D. Misma API. */
+  get _pv() {
+    return this._v.kind === 'plush' && this._ch3 ? this._ch3 : this._ch;
+  }
+
+  /** Carga (una vez) el ot 3D en la vista previa. Si falla, se queda la 2D con un aviso. */
+  _mount3d() {
+    if (this._ch3 || this._ch3P) return;
+    const p = (this._ch3P = loadCharacter3D()
+      .then((m) => {
+        if (!this.isConnected || this._ch3P !== p) return;
+        this._ch3 = m.createCharacter3D(this.$('.ch3'), this._v.character, {
+          material: this._v.material, orbit: true, stage: { key: 'overlay', zIndex: 2147483001, maxDpr: 1.5 },
+        });
+        if (this._ch3.fallback) throw new Error('webgl');
+        this._ch3.mood(this.$('[data-a=mood]')?.value || 'neutral', { fx: false });
+        this._renderKind();
+      })
+      .catch((err) => {
+        console.warn('[7ots] vista previa 3D no disponible:', err?.message || err);
+        this._ch3?.destroy?.();
+        this._ch3 = null;
+        this._failed3d = true;
+        if (!this.isConnected) return;
+        this._renderKind();
+        this._msg?.(this._t('editor.plush.unavailable'));
+      }));
+  }
+
+  /** Actualiza la vista 3D como mucho una vez por frame (reconstruir la geometría cuesta). */
+  _sync3d() {
+    if (!this._ch3 || this._raf3) return;
+    this._raf3 = requestAnimationFrame(() => {
+      this._raf3 = 0;
+      this._ch3?.update(this._v.character, { material: this._v.material });
+    });
   }
 
   // ───────────── estado ─────────────
@@ -269,6 +332,7 @@ export class AvatarEditor extends Base {
     mut(next);
     this._v.character = normalizeCharacter(next);
     this._ch.update(this._v.character);
+    this._sync3d();
     this._drawOverlay();
     if (commit) this._commit(panel);
   }
@@ -314,6 +378,7 @@ export class AvatarEditor extends Base {
 
   _renderAll() {
     this._ch.update(this._c);
+    this._sync3d();
     this._renderKind();
     this._renderPanel();
     this._drawOverlay();
@@ -325,7 +390,7 @@ export class AvatarEditor extends Base {
     const t = this._t;
     const kinds = this.$('.kinds');
     kinds.setAttribute('aria-label', t('editor.kinds.label'));
-    kinds.innerHTML = ['character', ...(this.hasAttribute('no-realistic') ? [] : ['realistic']), 'image']
+    kinds.innerHTML = KINDS.filter((k) => k !== 'plush' || !(this.hasAttribute('no-plush') || this.hasAttribute('no-realistic')))
       .map((k) => `<button type="button" data-kind="${k}">${esc(t(`editor.kinds.${k}`))}</button>`)
       .join('');
     this._ov.setAttribute('aria-label', t('editor.controls'));
@@ -341,6 +406,9 @@ export class AvatarEditor extends Base {
       <select class="btn" data-a="gesture" aria-label="${esc(t('editor.gesture'))}"><option value="">${esc(t('editor.gesturePick'))}</option>${GESTURES.map((g) => `<option value="${g}">${esc(partLabel(t, 'gestures', g))}</option>`).join('')}</select>
       <select class="btn" data-a="morph" aria-label="${esc(t('editor.morph'))}"><option value="">${esc(t('editor.morphPick'))}</option>${MORPHS.map((m) => `<option value="${m}">${esc(partLabel(t, 'morphs', m))}</option>`).join('')}</select>`;
     this.$('[data-a=mood]').value = mood;
+    this.$('[data-bar=material]').innerHTML = `<span class="hint" style="margin:0">${esc(t('editor.plush.material'))}</span>
+      <span class="chips">${MATERIALS.map((m) => `<button type="button" class="chip" data-material="${m}">${esc(t(`editor.plush.materials.${m}`))}</button>`).join('')}</span>
+      <span class="hint" style="margin:0">${esc(t('editor.plush.hint'))}</span>`;
     this.$('[data-bar=export]').innerHTML = `
       <button class="btn" type="button" data-a="svg">⬇ SVG</button>
       <button class="btn" type="button" data-a="png">⬇ PNG</button>
@@ -350,11 +418,6 @@ export class AvatarEditor extends Base {
     this.$('.tabs').innerHTML = TABS.map((id) => `<button type="button" role="tab" data-tab="${id}">${esc(t(`editor.tabs.${id}`))}</button>`).join('');
   }
 
-  /** Texto del catálogo escapado, con variables que ya son HTML (p. ej. `{name}` → <b>…</b>). */
-  _html(key, html = {}) {
-    return esc(this._t(key)).replace(/\{(\w+)\}/g, (m, k) => html[k] ?? m);
-  }
-
   _syncBar() {
     this.$('[data-a=undo]').disabled = !this._past.length;
     this.$('[data-a=redo]').disabled = !this._future.length;
@@ -362,30 +425,20 @@ export class AvatarEditor extends Base {
 
   _renderKind() {
     const k = this._v.kind;
+    const plush = k === 'plush';
     this.$$('[data-kind]').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.kind === k)));
-    this.$$('[data-view]').forEach((v) => v.classList.toggle('hidden', v.dataset.view !== k));
-    if (k === 'realistic') this._renderRealistic();
+    // «Personaje 3D» comparte la vista del 2D (mismas pestañas); solo cambia la vista previa
+    this.$$('[data-view]').forEach((v) => v.classList.toggle('hidden', v.dataset.view !== (plush ? 'character' : k)));
+    if (plush && !this._failed3d) this._mount3d();
+    const show3d = plush && !!this._ch3;
+    this.$('.ch').classList.toggle('hidden', show3d);
+    this.$('.ch3').classList.toggle('hidden', !show3d);
+    this.$('.ov').classList.toggle('hidden', plush);
+    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();
   }
 
-  _renderRealistic() {
-    const a = this._v.avatar;
-    const t = this._t;
-    this.$('[data-view=realistic]').innerHTML = `
-      <div><h4>${esc(t('editor.realistic.title'))}</h4>
-      <p class="hint" style="margin:0">${esc(t('editor.realistic.intro'))}</p></div>
-      <label class="f">${esc(t('editor.realistic.url'))}<input type="url" data-m="avatar.url" placeholder="https://…/avatar.glb" value="${esc(a.url)}"></label>
-      <div><h4>${esc(t('editor.realistic.body'))}</h4><div class="chips">
-        <button type="button" class="chip" data-m-body="F" aria-pressed="${a.body === 'F'}">${esc(t('editor.realistic.bodyF'))}</button>
-        <button type="button" class="chip" data-m-body="M" aria-pressed="${a.body === 'M'}">${esc(t('editor.realistic.bodyM'))}</button></div></div>
-      <div><h4>${esc(t('editor.realistic.samples'))}</h4><div class="chips">${SAMPLE_3D.map((s, i) => `<button type="button" class="chip" data-sample="${i}" aria-pressed="${a.url === s.url}">${esc(s.label)}</button>`).join('')}</div></div>
-      <div class="card"><strong>${esc(t('editor.realistic.ownTitle'))}</strong>
-        <p class="hint">· ${this._html('editor.realistic.ownMpfb', { name: '<b>MPFB2 / MakeHuman</b>' })}<br>
-        · ${this._html('editor.realistic.ownVroid', { name: '<b>VRoid Studio</b>' })}<br>
-        · ${esc(t('editor.realistic.ownCommercial'))}</p>
-        <p class="hint">${esc(t('editor.realistic.fallback'))}</p></div>`;
-  }
-
   _renderImage() {
     const img = this._v.image;
     const t = this._t;
@@ -409,11 +462,66 @@ export class AvatarEditor extends Base {
     return `<div class="grid">${items
       .map((it) => {
         const label = esc(partLabel(this._t, kind, it.id));
-        return `<button type="button" class="opt" ${attr}="${it.id}" aria-pressed="${pressed(it)}" title="${label}">${renderCharacter(mk(it), { open: 0 }, { viewBox: view })}<span>${label}</span></button>`;
+        return `<button type="button" class="opt" ${attr}="${it.id}" aria-pressed="${pressed(it)}" title="${label}">${renderCharacter({ ...mk(it), style: 'none' }, { open: 0 }, { viewBox: view })}<span>${label}</span></button>`;
       })
       .join('')}</div>`;
   }
 
+  /**
+   * 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
+   * cuando entra en vista, y se recuerda mientras el personaje (salvo el estilo) no cambie.
+   */
+  _artStyles() {
+    const cur = this._c.style || 'none';
+    const opts = ART_STYLES.map((st) => {
+      const label = esc(partLabel(this._t, 'styles', st.id));
+      const src = this._artThumbs?.get(st.id);
+      return `<button type="button" class="opt" data-artstyle="${st.id}" aria-pressed="${st.id === cur}" title="${label}">${src ? `<img alt="" src="${src}">` : '<i></i>'}<span>${label}</span></button>`;
+    });
+    return `<h4>${esc(this._t('editor.artStyle.title'))}</h4><div class="grid arts">${opts.join('')}</div><p class="hint">${esc(this._t('editor.artStyle.hint'))}</p>`;
+  }
+
+  /** Pinta las miniaturas pendientes de la tira según van apareciendo. */
+  _lazyArtThumbs() {
+    this._artIO?.disconnect();
+    const strip = this.$('.arts');
+    if (!strip) return;
+    const { style, ...rest } = this._c;
+    const view = this._thumbView('full');
+    const key = JSON.stringify(rest) + view;
+    if (this._artKey !== key) {
+      this._artKey = key;
+      this._artThumbs = new Map();
+      strip.querySelectorAll('img').forEach((img) => img.replaceWith(document.createElement('i')));
+    }
+    const fill = (btn) => {
+      const ph = btn.querySelector('i');
+      if (!ph) return;
+      const id = btn.dataset.artstyle;
+      let src = this._artThumbs.get(id);
+      if (!src) {
+        src = `data:image/svg+xml,${encodeURIComponent(renderCharacter({ ...rest, style: id }, { open: 0 }, { viewBox: view }))}`;
+        this._artThumbs.set(id, src);
+      }
+      const img = document.createElement('img');
+      img.alt = '';
+      img.src = src;
+      ph.replaceWith(img);
+    };
+    const todo = [...strip.querySelectorAll('.opt')].filter((b) => b.querySelector('i'));
+    if (!todo.length) return;
+    if (typeof IntersectionObserver !== 'function') return todo.forEach(fill);
+    this._artIO = new IntersectionObserver((entries, io) => {
+      for (const e of entries) {
+        if (!e.isIntersecting) continue;
+        io.unobserve(e.target);
+        fill(e.target);
+      }
+    }, { root: strip, rootMargin: '0px 90px' });
+    todo.forEach((b) => this._artIO.observe(b));
+  }
+
   _range(path, key, min, max, step, value) {
     return `<label class="f">${esc(this._t(key))}<input type="range" data-k="${path}" min="${min}" max="${max}" step="${step}" value="${value}"></label>`;
   }
@@ -432,7 +540,7 @@ export class AvatarEditor extends Base {
     let h = '';
     switch (this._tab) {
       case 'styles':
-        h = `<h4>${T('editor.styles.title')}</h4>${this._grid('presets', PRESETS, c.preset, 'data-preset', (p) => ({ preset: p.id }), full)}
+        h = `${this._artStyles()}<h4>${T('editor.styles.title')}</h4>${this._grid('presets', PRESETS, c.preset, 'data-preset', (p) => ({ preset: p.id }), 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;
@@ -451,6 +559,7 @@ export class AvatarEditor extends Base {
         h = `<h4>${T('editor.color.body')}</h4><div class="sw">${SWATCHES.map((s) => `<button type="button" data-swatch="${s}" style="background:${s}" title="${s}" aria-label="${T('editor.color.swatch', { color: s })}"></button>`).join('')}</div>
           <div class="row" style="margin-top:10px">${this._color('body.color', 'editor.color.custom', c.body.color)}</div>
           <h4>${T('editor.color.finish')}</h4>${this._grid('finishes', FINISHES, c.finish, 'data-finish', (f) => with_({ finish: f.id }), full)}
+          <h4>${T('editor.color.texture')}</h4>${this._grid('textures', TEXTURES, c.texture, 'data-texture', (x) => with_({ texture: x.id }), full)}
           <h4>${T('editor.color.outline')}</h4><div class="chips">${OUTLINES.map((v) => `<button type="button" class="chip" data-outline="${v}" aria-pressed="${c.outline === v}">${T(`editor.color.outlines.${v}`)}</button>`).join('')}</div>
           <h4>${T('editor.color.pattern')}</h4>${this._grid('patterns', PATTERNS, c.body.pattern, 'data-pattern', (p) => with_({ body: { ...c.body, pattern: p.id } }), full)}
           <div class="row" style="margin-top:10px">${this._color('body.patternColor', 'editor.color.patternColor', c.body.patternColor)}</div>`;
@@ -491,7 +600,13 @@ export class AvatarEditor extends Base {
         break;
       }
     }
+    const scroll = this.$('.arts')?.scrollLeft || 0;
     this.$('.panel').innerHTML = h;
+    const strip = this.$('.arts');
+    if (strip) {
+      strip.scrollLeft = scroll;
+      this._lazyArtThumbs();
+    } else this._artIO?.disconnect();
   }
 
   _accEditor() {
@@ -669,7 +784,10 @@ export class AvatarEditor extends Base {
     if (!b) return;
     const d = b.dataset;
     const c = this._c;
-    if (d.kind) return this._setMeta((v) => (v.kind = d.kind));
+    if (d.kind) {
+      this._setMeta((v) => (v.kind = d.kind));
+      return this._drawOverlay();
+    }
     if (d.tab) {
       this._tab = d.tab;
       this._renderPanel();
@@ -677,9 +795,11 @@ export class AvatarEditor extends Base {
       return;
     }
     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; });
     if (d.swatch) return this._set((n) => { n.body.color = d.swatch; });
     if (d.finish) return this._set((n) => { n.finish = d.finish; });
+    if (d.texture) return this._set((n) => { n.texture = d.texture; });
     if (d.outline) return this._set((n) => { n.outline = d.outline; });
     if (d.pattern) return this._set((n) => { n.body.pattern = d.pattern; });
     if (d.eyes) return this._set((n) => { n.eyes.type = d.eyes; });
@@ -705,8 +825,10 @@ export class AvatarEditor extends Base {
       this._renderPanel();
       return this._drawOverlay();
     }
-    if (d.mBody) return this._setMeta((v) => (v.avatar.body = d.mBody));
-    if (d.sample) return this._setMeta((v) => { v.avatar = { url: SAMPLE_3D[+d.sample].url, body: SAMPLE_3D[+d.sample].body }; });
+    if (d.material) {
+      this._setMeta((v) => (v.material = d.material));
+      return this._sync3d();
+    }
     const i = this._sel;
     switch (d.a) {
       case 'undo': return this._undo();
@@ -745,14 +867,17 @@ export class AvatarEditor extends Base {
 
   _onInput(e, final) {
     const t = e.target;
-    if (t.dataset?.a === 'mood' && final) return this._ch.mood(t.value);
+    if (t.dataset?.a === 'mood' && final) {
+      this._ch.mood(t.value);
+      return this._ch3?.mood(t.value);
+    }
     if (t.dataset?.a === 'gesture' && final) {
-      if (t.value) this._ch.gesture(t.value);
+      if (t.value) this._pv.gesture(t.value);
       t.value = '';
       return;
     }
     if (t.dataset?.a === 'morph' && final) {
-      if (t.value) this._ch.morph(t.value);
+      if (t.value) this._pv.morph(t.value);
       t.value = '';
       return;
     }
@@ -764,7 +889,6 @@ export class AvatarEditor extends Base {
       if (!final) return;
       return this._setMeta((v) => {
         if (t.dataset.m === 'image') v.image = t.value.trim();
-        else v.avatar.url = t.value.trim();
       });
     }
     const k = t.dataset?.k;
@@ -785,7 +909,7 @@ export class AvatarEditor extends Base {
   _talk() {
     // Lip-sync por visemas a partir de una frase de ejemplo (en el idioma del editor).
     this._speech?.stop?.();
-    this._speech = this._ch.speak(this._t('editor.talkSample'));
+    this._speech = this._pv.speak(this._t('editor.talkSample'));
   }
 
   _exportSVG() {