@btopto/avatar-element

Web Components del sistema btopto/avatar: el character creator completo en un tag, usable en Angular, React, Vue o HTML plano (Shadow DOM, sin dependencias de framework).

import { registerArtPack, defineAvatarElements } from '@btopto/avatar-element';
import { basicArtPack } from '@btopto/avatar-art-basic';

registerArtPack(basicArtPack);
defineAvatarElements();

<!-- Editor completo. Los entitlements (grants) vienen de tu backend. -->
<avatar-editor pack="basic" entitlements="course.intro tier.color"></avatar-editor>

<!-- Solo mostrar un avatar (navbar, comentarios, ranking...) -->
<avatar-viewer pack="basic" config='{"version":1,...}' size="48"></avatar-viewer>

const editor = document.querySelector('avatar-editor')!;
editor.addEventListener('avatar-change', (e) => autosave(e.detail.config));
editor.addEventListener('avatar-save', async (e) => {
  await api.saveAvatar(e.detail.config, await editor.toPng(512));
});

• Si el usuario pierde grants, el editor sanitiza el avatar solo y emite avatar-change.
• Theming por CSS custom properties: --avatar-accent, --avatar-surface, --avatar-border, --avatar-text, --avatar-radius.
• Etiquetas personalizables vía la propiedad labels; atributos hide-random / hide-save.
• Helpers toSvg() y toPng(size) para persistir imagen junto al JSON.