@7ots/cli 0.1.0

package/src/identity/ContactCard.js

@@ -0,0 +1,351 @@
+/**
+ * <ots-identity> — tarjeta de contacto de un agente: quién es y cómo hablar con él.
+ *
+ *   <ots-identity src="/api/agent/identity"></ots-identity>
+ *   <ots-identity src="https://otro-sitio.com/.well-known/7ots-agent.json" face></ots-identity>
+ *
+ * Atributos:
+ *   src       URL de la tarjeta (defecto /api/agent/identity). También: `el.identity = {...}`.
+ *   endpoint  proxy de 7ots para videollamadas y voz (defecto: el de `src` si acaba en /identity)
+ *   face      muestra la cara viva (createFace) con un botón «Escuchar»
+ *   greeting  lo que dice al pulsar «Escuchar» (defecto: se presenta)
+ *   compact   versión en una línea
+ *   lang      idioma de la interfaz ('es', 'en', 'pt'…). También `el.lang = 'en'`; se aplica en caliente.
+ *             Sin él: el del ancestro con [lang] / <html lang> / navegador (detectLocale), y sigue a
+ *             setLocale() si la página cambia el idioma global. No se usa `identity.language` para
+ *             los botones (la tarjeta la lee el visitante), pero sí para el saludo de «Escuchar»,
+ *             que dice la voz del agente en su idioma.
+ *
+ * Botones según la tarjeta: chatear aquí (si hay un <ots-agent> en la página), correo,
+ * @handle de apuchat (copiar), videollamada en meet.apuchat.com y guardar contacto (vCard).
+ * Eventos: `ots-identity:load` { identity }, `ots-identity:call` { url }, `ots-identity:error`.
+ */
+
+import { defineIdentity } from './schema.js';
+import { createFace } from './Face.js';
+import { translator, detectLocale, getLocale, onLocaleChange } from '../i18n/index.js';
+import '../i18n/messages/identity.js';
+
+export class IdentityCard extends HTMLElement {
+  static get observedAttributes() {
+    return ['src', 'endpoint', 'face', 'compact', 'greeting', 'lang'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._card = null;
+    this._face = null;
+    this._t = translator(detectLocale());
+  }
+
+  /** Idioma en uso (resuelto). Para cambiarlo, el atributo/propiedad `lang`. */
+  get locale() {
+    return this._t.locale;
+  }
+
+  /** lang propio → idioma global si la página lo cambió → ancestro [lang] / <html lang> / navegador. */
+  _resolveLocale() {
+    const own = this.getAttribute('lang');
+    if (own) return detectLocale(own);
+    if (this._followGlobal) return getLocale();
+    return detectLocale(this.parentElement?.closest?.('[lang]')?.getAttribute('lang'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('data-ots-ignore', ''); // la proactividad del widget no reacciona a la tarjeta
+    this._t = translator(this._resolveLocale());
+    this._offLocale?.();
+    this._g0 = getLocale();
+    this._offLocale = onLocaleChange((g) => {
+      if (g !== this._g0) {
+        this._g0 = g;
+        this._followGlobal = true;
+      }
+      if (this._localeQueued) return; // addMessages emite una vez por idioma: agrupar
+      this._localeQueued = true;
+      queueMicrotask(() => {
+        this._localeQueued = false;
+        this._relocalize();
+      });
+    });
+    if (!this._card && !this._loading) this._load();
+  }
+
+  disconnectedCallback() {
+    this._face?.destroy();
+    this._face = null;
+    this._offLocale?.();
+    this._offLocale = null;
+  }
+
+  attributeChangedCallback(name, prev, next) {
+    if (prev === next || !this.isConnected) return;
+    if (name === 'lang') this._relocalize();
+    else if (name === 'src') this._load();
+    else if (this._card) this._render();
+  }
+
+  /** Vuelve a pintar en el idioma actual (sin recargar la tarjeta). */
+  _relocalize() {
+    const next = translator(this._resolveLocale());
+    const changed = next.locale !== this._t.locale;
+    this._t = next;
+    if (!this.isConnected) return;
+    if (this._card) {
+      // La cara viva no tiene textos visibles: solo se rehace si cambia el idioma de verdad.
+      if (changed || !this.hasAttribute('face')) this._render();
+    } else if (this._failed) this._renderError();
+  }
+
+  _renderError() {
+    this.shadowRoot.innerHTML = `<style>${css()}</style><div class="card error">${esc(this._t('identity.card.loadError'))}</div>`;
+  }
+
+  /** Tarjeta actual (normalizada). Asignar un objeto la pinta sin pedir nada a la red. */
+  get identity() {
+    return this._card;
+  }
+  set identity(v) {
+    this._gen = (this._gen || 0) + 1; // una carga en curso ya no pisa lo asignado
+    this._raw = v;
+    this._card = normalizeCard(v);
+    this._render();
+  }
+
+  get endpoint() {
+    const e = this.getAttribute('endpoint');
+    if (e) return e.replace(/\/$/, '');
+    const src = this.getAttribute('src') || '/api/agent/identity';
+    return /\/identity$/.test(src) ? src.replace(/\/identity$/, '') : '';
+  }
+
+  async _load() {
+    if (this._raw && !this.hasAttribute('src')) return this._render();
+    const src = this.getAttribute('src') || '/api/agent/identity';
+    const gen = (this._gen = (this._gen || 0) + 1);
+    this._loading = true;
+    this._failed = false;
+    this.shadowRoot.innerHTML = `<style>${css()}</style><div class="card loading" aria-busy="true" aria-label="${esc(this._t('identity.card.loading'))}"><div class="sk"></div></div>`;
+    try {
+      const r = await fetch(src, { credentials: 'omit' });
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      const data = await r.json();
+      if (gen !== this._gen) return;
+      this._card = normalizeCard(data);
+      this._render();
+      this.dispatchEvent(new CustomEvent('ots-identity:load', { detail: { identity: this._card }, bubbles: true }));
+    } catch (e) {
+      if (gen !== this._gen) return;
+      this._failed = true;
+      this._renderError();
+      this.dispatchEvent(new CustomEvent('ots-identity:error', { detail: { error: e }, bubbles: true }));
+    } finally {
+      this._loading = false;
+    }
+  }
+
+  _render() {
+    const c = this._card;
+    if (!c) return;
+    this._face?.destroy();
+    this._face = null;
+    const compact = this.hasAttribute('compact');
+    const live = this.hasAttribute('face');
+    const ep = this.endpoint;
+    const hasWidget = !!document.querySelector('ots-agent');
+    const initial = esc((c.look.emoji || c.name.slice(0, 1)).toUpperCase());
+    const portrait = c.look.image ? `<img src="${esc(c.look.image)}" alt="" referrerpolicy="no-referrer">` : `<span>${initial}</span>`;
+    const ans = c.contact.answers || {};
+    const t = this._t;
+    const btn = (act, icon, label, sub = '') =>
+      `<button class="act" data-act="${act}">${ICON[icon]}<span><b>${esc(label)}</b>${sub ? `<small>${esc(sub)}</small>` : ''}</span></button>`;
+    const actions = [
+      hasWidget ? btn('chat', 'chat', t('identity.card.chat'), t('identity.card.chatSub')) : '',
+      c.contact.email ? btn('mail', 'mail', t('identity.card.mail'), ans.email ? t('identity.card.mailInstant', { email: c.contact.email }) : c.contact.email) : '',
+      c.contact.apuchat ? btn('apuchat', 'at', `@${c.contact.apuchat}`, ans.apuchat ? t('identity.card.apuchatInstant') : t('identity.card.apuchatSub')) : '',
+      c.contact.call && ep ? btn('call', 'video', t('identity.card.call'), t('identity.card.callSub')) : '',
+      live ? btn('listen', 'voice', t('identity.card.listen')) : '',
+      ep ? `<a class="act" href="${esc(`${ep}/identity.vcf`)}" download="${esc(c.id)}.vcf">${ICON.card}<span><b>${esc(t('identity.card.save'))}</b><small>${esc(t('identity.card.saveSub'))}</small></span></a>` : '',
+    ].filter(Boolean);
+    const langs = [...new Set([c.language, ...c.languages].filter(Boolean))];
+
+    this.shadowRoot.innerHTML = `<style>${css()}</style>
+      <article class="card ${compact ? 'compact' : ''}" style="--p:${esc(c.look.color)};--a:${esc(c.look.accent)}" aria-label="${esc(t('identity.card.label', { name: c.name }))}">
+        <header>
+          <div class="pic ${live ? 'live' : ''}">${live ? '' : portrait}</div>
+          <div class="who">
+            <h2>${esc(c.name)}</h2>
+            ${c.role ? `<p class="role">${esc(c.role)}</p>` : ''}
+            ${c.tagline && !compact ? `<p class="tag">${esc(c.tagline)}</p>` : ''}
+          </div>
+        </header>
+        ${!compact && c.bio ? `<p class="bio">${esc(c.bio)}</p>` : ''}
+        ${!compact && (c.personality?.traits?.length || langs.length) ? `<ul class="chips">${langs.map((l) => `<li class="lang">${esc(l.toUpperCase())}</li>`).join('')}${(c.personality?.traits || []).map((t) => `<li>${esc(t)}</li>`).join('')}</ul>` : ''}
+        ${!compact && c.contact.hours ? `<p class="hours">${esc(c.contact.hours)}</p>` : ''}
+        ${actions.length ? `<nav class="acts">${actions.join('')}</nav>` : ''}
+        <p class="note" role="status" aria-live="polite"></p>
+        <footer>${esc(t('identity.card.footer'))} · <a href="https://7ots.com" target="_blank" rel="noopener">7ots</a></footer>
+      </article>`;
+
+    this.shadowRoot.querySelectorAll('button.act').forEach((b) => b.addEventListener('click', () => this._act(b.dataset.act, b)));
+    if (live) this._mountFace();
+  }
+
+  async _mountFace() {
+    const pic = this.shadowRoot.querySelector('.pic');
+    try {
+      this._face = await createFace(pic, { identity: this._raw && !this.hasAttribute('src') ? this._raw : this._card, endpoint: this.endpoint, subtitles: false, locale: this._t.locale });
+    } catch (e) {
+      pic.innerHTML = this._card.look.image ? `<img src="${esc(this._card.look.image)}" alt="">` : `<span>${esc(this._card.name.slice(0, 1))}</span>`;
+    }
+  }
+
+  async _act(act, b) {
+    const c = this._card;
+    const t = this._t;
+    const note = (s) => (this.shadowRoot.querySelector('.note').textContent = s);
+    if (act === 'chat') {
+      const w = document.querySelector('ots-agent');
+      w?.api?.open();
+      return;
+    }
+    if (act === 'mail') {
+      location.href = `mailto:${c.contact.email}?subject=${encodeURIComponent(t('identity.card.mailSubject', { name: c.name }))}`;
+      return;
+    }
+    if (act === 'apuchat') {
+      try {
+        await navigator.clipboard.writeText(`@${c.contact.apuchat}`);
+        note(t('identity.card.apuchatCopied', { handle: c.contact.apuchat }));
+      } catch {
+        note(t('identity.card.apuchatSearch', { handle: c.contact.apuchat }));
+      }
+      return;
+    }
+    if (act === 'listen') {
+      b.disabled = true;
+      try {
+        await this._face?.say(this.getAttribute('greeting') || greetingFor(c));
+      } finally {
+        b.disabled = false;
+      }
+      return;
+    }
+    if (act === 'call') {
+      // La ventana se abre ya (dentro del clic) para que el navegador no la bloquee.
+      const win = window.open('', '_blank');
+      b.disabled = true;
+      note(t('identity.card.callPreparing', { name: c.name }));
+      try {
+        const r = await fetch(`${this.endpoint}/identity/call`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
+        const out = await r.json().catch(() => ({}));
+        if (!r.ok || !out.call_url) throw new Error(out.error || `HTTP ${r.status}`);
+        if (win) {
+          win.opener = null;
+          win.location.href = out.call_url;
+        } else location.href = out.call_url;
+        note(t('identity.card.callReady', { name: c.name }));
+        this.dispatchEvent(new CustomEvent('ots-identity:call', { detail: { url: out.call_url }, bubbles: true }));
+      } catch (e) {
+        win?.close();
+        note(t('identity.card.callError', { error: e.message }));
+      } finally {
+        b.disabled = false;
+      }
+    }
+  }
+}
+
+/** Presentación por defecto de «Escuchar»: la dice la voz del agente, así que va en su idioma. */
+function greetingFor(c) {
+  const t = translator(c.language || 'es');
+  const intro = c.role ? t('identity.greeting.introRole', { name: c.name, role: c.role }) : t('identity.greeting.intro', { name: c.name });
+  return `${intro} ${c.tagline || t('identity.greeting.offer')}`;
+}
+
+/** Acepta una tarjeta pública o una identidad completa y devuelve la forma de la tarjeta. */
+function normalizeCard(raw) {
+  const id = defineIdentity(raw || {});
+  const contact = raw?.contact || {};
+  return {
+    ...id,
+    contact: {
+      ...id.contact,
+      call: !!contact.call,
+      meet: !!contact.meet,
+      answers: contact.answers || {},
+    },
+  };
+}
+
+function esc(s) {
+  return String(s ?? '').replace(/[&<>"']/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch]);
+}
+
+const svg = (d) => `<svg viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`;
+const ICON = {
+  chat: svg('<path d="M4 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-6l-4.5 3.6A.9.9 0 0 1 5 18.9V16a3 3 0 0 1-1-2.2Z"/>'),
+  mail: svg('<path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5Z"/>'),
+  at: svg('<path d="M12 2a10 10 0 1 0 5 18.7l-1-1.7A8 8 0 1 1 20 12v1a2 2 0 0 1-4 0V8h-2v.8A5 5 0 1 0 15 16a4 4 0 0 0 7-3v-1A10 10 0 0 0 12 2Zm0 13a3 3 0 1 1 3-3 3 3 0 0 1-3 3Z"/>'),
+  video: svg('<path d="M15 8a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-2.5l5 3.5V7l-5 3.5Z"/>'),
+  voice: svg('<path d="M4 9v6h4l5 4V5L8 9H4Zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4Z"/>'),
+  card: svg('<path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM9 8a2.5 2.5 0 1 1-2.5 2.5A2.5 2.5 0 0 1 9 8Zm5 9H4v-.8C4 14.3 7.3 13.5 9 13.5s5 .8 5 2.7Zm6-3h-4v-2h4Zm0-4h-4V8h4Z"/>'),
+};
+
+function css() {
+  return `
+  :host { all: initial; display: block; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ots-fg, #14141f); }
+  * { box-sizing: border-box; }
+  .card { --p: #6d5dfc; --a: #22d3ee; max-width: 380px; background: var(--ots-bg, #fff); border: 1px solid var(--ots-line, #e7e7ef); border-radius: 18px;
+    padding: 18px; box-shadow: 0 8px 30px rgba(20,20,40,.08); position: relative; overflow: hidden; }
+  .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 64px; background: linear-gradient(120deg, var(--p), var(--a)); opacity: .14; }
+  .card.loading .sk { height: 120px; border-radius: 12px; background: linear-gradient(90deg, #f1f1f6, #e7e7ef, #f1f1f6); background-size: 200% 100%; animation: sk 1.2s infinite linear; }
+  @keyframes sk { to { background-position: -200% 0; } }
+  .card.error { color: #9b1c1c; font-size: 14px; }
+  header { display: flex; gap: 14px; align-items: center; position: relative; }
+  .pic { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--p); display: grid; place-items: center; overflow: hidden;
+    box-shadow: 0 0 0 4px var(--ots-bg, #fff), 0 0 0 6px color-mix(in srgb, var(--p) 45%, transparent); position: relative; }
+  .pic.live { width: 96px; height: 96px; background: color-mix(in srgb, var(--p) 18%, #fff); }
+  .pic img { width: 100%; height: 100%; object-fit: cover; }
+  .pic span { color: #fff; font-size: 30px; font-weight: 700; }
+  h2 { margin: 0; font-size: 20px; line-height: 1.2; }
+  .role { margin: 2px 0 0; color: var(--p); font-weight: 600; font-size: 14px; }
+  .tag { margin: 4px 0 0; color: #5b5b6b; font-size: 13px; }
+  .bio { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: #33334a; }
+  .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
+  .chips li { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--p) 10%, #fff); color: #33334a; }
+  .chips li.lang { background: var(--p); color: #fff; font-weight: 600; }
+  .hours { margin: 10px 0 0; font-size: 12px; color: #6b6b7b; }
+  .acts { display: grid; gap: 8px; margin-top: 16px; }
+  .act { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ots-line, #e7e7ef);
+    border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; color: inherit; text-decoration: none; }
+  .act:hover { border-color: var(--p); background: color-mix(in srgb, var(--p) 6%, #fff); }
+  .act:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
+  .act[disabled] { opacity: .6; cursor: progress; }
+  .act svg { width: 20px; height: 20px; fill: var(--p); flex: none; }
+  .act span { display: flex; flex-direction: column; min-width: 0; }
+  .act b { font-size: 14px; font-weight: 600; }
+  .act small { font-size: 12px; color: #6b6b7b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .note { min-height: 0; margin: 10px 0 0; font-size: 13px; color: #33334a; }
+  .note:empty { display: none; }
+  footer { margin-top: 14px; font-size: 11px; color: #8b8b9b; text-align: right; }
+  footer a { color: inherit; }
+  .compact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; }
+  .compact::before { display: none; }
+  .compact .pic { width: 48px; height: 48px; }
+  .compact h2 { font-size: 16px; }
+  .compact .acts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+  .compact .act small, .compact footer { display: none; }
+  .compact .act { padding: 6px 10px; }
+  @media (prefers-color-scheme: dark) {
+    :host { --ots-fg: #ececf4; --ots-bg: #17171f; --ots-line: #2c2c3a; }
+    .bio, .chips li, .note { color: #d0d0dc; }
+    .chips li { background: color-mix(in srgb, var(--p) 22%, #17171f); }
+    .act:hover { background: color-mix(in srgb, var(--p) 14%, #17171f); }
+    .tag, .act small, .hours { color: #9d9dad; }
+  }
+  `;
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('ots-identity')) customElements.define('ots-identity', IdentityCard);

package/src/identity/Face.js

@@ -0,0 +1,148 @@
+/**
+ * createFace — la cara y la voz de una identidad, sin chat ni cerebro.
+ *
+ * Para quien ya tiene su agente (propio backend, otro framework…) y solo quiere darle un
+ * rostro que habla con lip-sync y la voz de su identidad:
+ *
+ *   const face = await SevenOts.createFace(document.querySelector('#cara'), {
+ *     identity: '/api/agent/identity',        // o el objeto de identidad
+ *     endpoint: '/api/agent',                 // proxy de 7ots para el TTS (opcional: sin él, voz del navegador)
+ *   });
+ *   await face.say('Hola, soy Nube. ¿En qué te ayudo?');
+ *   face.mood('happy'); face.gesture('thumbup'); face.morph('wings'); face.effect('hearts');
+ *   const texto = await face.listen();        // micrófono → texto (Web Speech API)
+ *
+ * El avatar 3D necesita el importmap de three en la página (ver AvatarStage); sin WebGL
+ * se muestra el retrato de la identidad o la cara 2D.
+ */
+
+import { AvatarStage } from '../avatar/AvatarStage.js';
+import { VoiceEngine } from '../voice/VoiceEngine.js';
+import { EventBus } from '../core/EventBus.js';
+import { createStore } from '../core/storage.js';
+import { defineIdentity, identityToWidgetConfig } from './schema.js';
+import { translator, detectLocale } from '../i18n/index.js';
+import '../i18n/messages/identity.js';
+
+/**
+ * @param {HTMLElement} container
+ * @param {object} [o]
+ * @param {object|string} [o.identity]   identidad o URL de su tarjeta (defecto: {endpoint}/identity si hay endpoint)
+ * @param {string} [o.endpoint]          proxy de 7ots (TTS con la voz de la identidad)
+ * @param {string} [o.siteKey]
+ * @param {object|false} [o.avatar]      sobrescribe el avatar de la identidad ({ mode: '2d' } fuerza retrato/cara)
+ * @param {object|false} [o.voice]       sobrescribe la voz ({ tts: 'browser' }, false = muda)
+ * @param {number} [o.size]              alto en px (defecto: el del contenedor, mínimo 160)
+ * @param {boolean} [o.subtitles=true]   muestra lo que dice
+ * @param {string} [o.locale]            idioma de los textos de interfaz (etiquetas, errores); defecto: detectLocale()
+ *                                       (la voz y el lip-sync siguen el `language` de la identidad)
+ */
+export async function createFace(container, o = {}) {
+  if (!container) throw new Error('createFace necesita un elemento contenedor');
+  const endpoint = o.endpoint ? o.endpoint.replace(/\/$/, '') : '';
+  const t = translator(detectLocale(o.locale));
+  const src = o.identity ?? (endpoint ? `${endpoint}/identity` : {});
+  let identity = defineIdentity(typeof src === 'string' ? await fetchJson(src, t) : src);
+  let ic = identityToWidgetConfig(identity);
+
+  const host = document.createElement('div');
+  host.setAttribute('data-ots-root', 'face');
+  host.style.cssText = `display:block;position:relative;width:100%;height:${o.size ? `${o.size}px` : '100%'};min-height:160px;`;
+  container.appendChild(host);
+  const root = host.attachShadow({ mode: 'open' });
+  root.innerHTML = `<style>${faceCss()}</style><div class="wrap"><div class="stage"></div><div class="subs" aria-live="polite" aria-label="${escAttr(t('identity.face.subtitles'))}"></div></div>`;
+  const wrap = root.querySelector('.wrap');
+  const subs = root.querySelector('.subs');
+  const applyColor = () => wrap.style.setProperty('--p', identity.look.color);
+  applyColor();
+
+  const bus = new EventBus();
+  const avatarCfg = o.avatar === false ? { mode: '2d' } : { ...ic.avatar, ...(o.avatar || {}) };
+  const avatar = new AvatarStage({ container: root.querySelector('.stage'), config: avatarCfg, language: identity.language });
+  const voice =
+    o.voice === false
+      ? null
+      : new VoiceEngine({
+          bus,
+          avatar,
+          store: createStore(`face:${identity.id}`),
+          config: { endpoint, siteKey: o.siteKey, tts: endpoint ? 'proxy' : 'browser', stt: true, ...ic.voice, ...(o.voice || {}) },
+        });
+  if (voice?.muted) voice.setMuted(false); // la cara existe para hablar: no hereda silencios viejos
+  const mode = await avatar.load();
+  wrap.dataset.mode = mode;
+
+  let subsTimer = 0;
+  const face = {
+    get identity() {
+      return identity;
+    },
+    mode,
+    /** Dice un texto con la voz de la identidad; resuelve al terminar. */
+    async say(text) {
+      await avatar.unlockAudio();
+      if (o.subtitles !== false) {
+        clearTimeout(subsTimer);
+        subs.textContent = String(text || '');
+      }
+      await (voice ? voice.say(text) : Promise.resolve());
+      if (o.subtitles !== false) subsTimer = setTimeout(() => (subs.textContent = ''), 1200);
+    },
+    /** Escucha por el micrófono y devuelve el texto reconocido ('' si nada). */
+    listen: (opt) => voice?.listen(opt) ?? Promise.resolve(''),
+    interrupt: () => voice?.interrupt(),
+    mute: (on = true) => voice?.setMuted(on),
+    // AvatarStage valida los nombres (moods 2D/3D, gestos del personaje + alias de TalkingHead).
+    mood: (m) => avatar.setMood(m),
+    gesture: (g, seconds) => avatar.gesture(g, seconds),
+    morph: (name, opts) => avatar.morph(name, opts),
+    effect: (name, opts) => avatar.effect(name, opts),
+    lookAt: (x, y, ms) => avatar.lookAt(x, y, ms),
+    /** Cambia de identidad en caliente (voz, color, retrato; .glb distinto → recarga). */
+    async setIdentity(next) {
+      identity = defineIdentity(typeof next === 'string' ? await fetchJson(next, t) : next);
+      ic = identityToWidgetConfig(identity);
+      applyColor();
+      voice?.configure({ ...ic.voice, ...(o.voice || {}) });
+      wrap.dataset.mode = await avatar.applyLook({ ...ic.avatar, ...(o.avatar || {}) });
+      return identity;
+    },
+    on: (event, fn) => bus.on(event, fn), // voice:start, voice:end, voice:listen
+    destroy() {
+      voice?.interrupt();
+      avatar.dispose();
+      host.remove();
+    },
+  };
+  return face;
+}
+
+async function fetchJson(url, t) {
+  const r = await fetch(url, { credentials: 'omit' });
+  if (!r.ok) throw new Error(t('identity.face.loadError', { status: r.status }));
+  return r.json();
+}
+
+function escAttr(s) {
+  return String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+}
+
+function faceCss() {
+  return `
+  :host { all: initial; display: block; }
+  .wrap { --p: #6d5dfc; position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
+    background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--p) 22%, transparent), transparent 70%); font-family: system-ui, sans-serif; }
+  .stage { position: absolute; inset: 0; }
+  .ots-face, .ots-portrait { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(70%, 70vmin, 220px); aspect-ratio: 1; height: auto; }
+  .ots-face-bg { fill: var(--face-bg, var(--p)); }
+  .ots-eyes, .ots-mouth { fill: var(--face-fg, #fff); }
+  .ots-mouth { transition: ry .06s; }
+  .ots-portrait { border-radius: 50%; overflow: hidden; background: var(--p);
+    box-shadow: 0 0 0 calc(4px + var(--ots-talk, 0) * 16px) color-mix(in srgb, var(--p) 40%, transparent); transition: box-shadow .08s linear; }
+  .ots-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .subs { position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: center; font-size: 14px; line-height: 1.35; color: #fff;
+    text-shadow: 0 1px 3px rgba(0,0,0,.85); pointer-events: none; }
+  .subs:empty { display: none; }
+  @media (prefers-reduced-motion: reduce) { .ots-portrait { transition: none; } }
+  `;
+}

package/src/identity/random.js

@@ -0,0 +1,112 @@
+/**
+ * Identidades aleatorias reproducibles: la misma semilla da siempre el mismo ot (cara, nombre,
+ * carácter, voz y avatar de meet). Así la web, el CLI, la mascota y apuchat meet comparten una
+ * identidad sin guardarla en ningún servidor: basta con la semilla («k7x2qa»).
+ * Código puro (sin DOM ni Node).
+ */
+
+import { randomCharacter } from '../character/Character.js';
+import { defineIdentity, MEET_AVATARS, MEET_SCENES } from './schema.js';
+
+const START = ['b', 'd', 'f', 'g', 'k', 'l', 'm', 'n', 'p', 'r', 's', 't', 'v', 'z', 'ch', 'br', 'tr', 'gl', 'pl', 'qu'];
+const VOWEL = ['a', 'e', 'i', 'o', 'u', 'a', 'o', 'i'];
+const END = ['', '', '', 'n', 'l', 's', 'r', 'x', 'k', 'm'];
+
+const TEXT = {
+  es: {
+    roles: ['asistente de la casa', 'guía curioso', 'compañero de código', 'anfitrión digital', 'ayudante incansable', 'explorador de páginas', 'mascota con opiniones', 'vigía de la terminal'],
+    tones: ['cercano y juguetón', 'tranquilo y claro', 'entusiasta y directo', 'irónico pero amable', 'tierno y curioso', 'serio con chispa'],
+    traits: ['curioso', 'paciente', 'bromista', 'ordenado', 'dramático', 'optimista', 'despistado', 'leal', 'mandón', 'dormilón', 'glotón', 'valiente'],
+    tagline: (n) => `Hola, soy ${n}.`,
+  },
+  en: {
+    roles: ['house assistant', 'curious guide', 'coding buddy', 'digital host', 'tireless helper', 'page explorer', 'opinionated pet', 'terminal lookout'],
+    tones: ['warm and playful', 'calm and clear', 'eager and direct', 'wry but kind', 'sweet and curious', 'serious with a spark'],
+    traits: ['curious', 'patient', 'cheeky', 'tidy', 'dramatic', 'optimistic', 'scatterbrained', 'loyal', 'bossy', 'sleepy', 'hungry', 'brave'],
+    tagline: (n) => `Hi, I'm ${n}.`,
+  },
+  pt: {
+    roles: ['assistente da casa', 'guia curioso', 'parceiro de código', 'anfitrião digital', 'ajudante incansável', 'explorador de páginas', 'mascote com opiniões', 'vigia do terminal'],
+    tones: ['próximo e brincalhão', 'calmo e claro', 'entusiasmado e direto', 'irônico mas gentil', 'fofo e curioso', 'sério com faísca'],
+    traits: ['curioso', 'paciente', 'brincalhão', 'organizado', 'dramático', 'otimista', 'distraído', 'leal', 'mandão', 'dorminhoco', 'guloso', 'corajoso'],
+    tagline: (n) => `Oi, eu sou ${n}.`,
+  },
+};
+
+/** Semilla corta y legible (6 caracteres base36). */
+export function newSeed() {
+  let s = '';
+  for (let i = 0; i < 6; i++) s += Math.floor(Math.random() * 36).toString(36);
+  return s;
+}
+
+/** Normaliza una semilla escrita por una persona: minúsculas, [a-z0-9-], máx. 32. */
+export function cleanSeed(seed) {
+  return String(seed ?? '').toLowerCase().replace(/[^a-z0-9-]/g, '').slice(0, 32);
+}
+
+/** Texto → entero de 32 bits (FNV-1a). */
+export function seedNumber(seed) {
+  let h = 2166136261;
+  for (const c of cleanSeed(seed) || '7ots') h = Math.imul(h ^ c.charCodeAt(0), 16777619) >>> 0;
+  return h || 1;
+}
+
+function rng(n) {
+  let s = n >>> 0 || 1;
+  const rnd = () => ((s = (Math.imul(s ^ (s >>> 15), 2246822507) + 0x9e3779b9) >>> 0) / 2 ** 32);
+  return { rnd, pick: (l) => l[Math.floor(rnd() * l.length)] };
+}
+
+/** Nombre pronunciable a partir de la semilla («Tobix», «Mirel»…). */
+export function randomName(seed) {
+  const { rnd, pick } = rng(seedNumber(seed) ^ 0x51ed);
+  const syl = rnd() < 0.55 ? 2 : rnd() < 0.8 ? 1 : 3;
+  let n = '';
+  for (let i = 0; i < syl; i++) n += pick(START) + pick(VOWEL);
+  n += pick(END);
+  return n.charAt(0).toUpperCase() + n.slice(1);
+}
+
+/**
+ * Identidad completa y válida (pasa por defineIdentity).
+ * @param {string} seed
+ * @param {{ lang?: 'en'|'es'|'pt', name?: string }} [opts] el nombre puede fijarse; el resto sale de la semilla
+ */
+export function randomIdentity(seed, { lang = 'en', name } = {}) {
+  const sd = cleanSeed(seed) || newSeed();
+  const L = TEXT[lang] ? lang : 'en';
+  const tx = TEXT[L];
+  const { rnd, pick } = rng(seedNumber(sd));
+  const character = randomCharacter(seedNumber(sd));
+  const nm = String(name || '').trim().slice(0, 40) || randomName(sd);
+  const traits = [];
+  while (traits.length < 3) {
+    const t = pick(tx.traits);
+    if (!traits.includes(t)) traits.push(t);
+  }
+  const female = rnd() < 0.5;
+  return defineIdentity({
+    id: `${nm}-${sd}`,
+    name: nm,
+    role: pick(tx.roles),
+    tagline: tx.tagline(nm),
+    language: L,
+    personality: { tone: pick(tx.tones), traits },
+    look: {
+      kind: 'character',
+      character,
+      color: character.body.color,
+      accent: character.eyes.iris,
+      meetAvatar: pick(MEET_AVATARS),
+      meetScene: pick(MEET_SCENES),
+    },
+    voice: {
+      provider: 'auto',
+      lang: { es: 'es-ES', en: 'en-US', pt: 'pt-BR' }[L],
+      rate: Math.round((0.95 + rnd() * 0.2) * 100) / 100,
+      pitch: Math.round((female ? 1.05 + rnd() * 0.3 : 0.8 + rnd() * 0.25) * 100) / 100,
+    },
+    seed: sd,
+  });
+}