mochikao 0.1.3 → 0.2.1

package/README.fr.md

@@ -16,7 +16,7 @@ Un visage pour chaque nom. `mochikao` transforme n'importe quelle chaîne (pseud
 - 5 yeux, 6 bouches, 11 accessoires (joues, taches, antenne, pousse, reflet, lunettes, lunettes noires, nœud, couronne, chapeau de fête).
 - **10 axes continus** réglables (taille et proportion du corps, carrure, ondulation, taille/écart/inclinaison des yeux, regard x/y, taille de la bouche) et 6 préréglages de couleur.
 - **8 expressions** : `idle`, `happy`, `sad`, `mad`, `love`, `shy`, `sick`, `thinking`.
-- **Contraste visage/corps ≥ 4.5:1** pour toute teinte et tout ton (vérifié par les tests).
+- **Contraste visage/corps ≥ 4.5:1** pour toute teinte et tout ton (vérifié par les tests). L'avatar contre *ta* page n'est pas garanti : voir [Contraste](docs/editor.fr.md#8-contraste--ce-qui-est-garanti-et-ce-qui-ne-lest-pas).
 - **Animations CSS** (respiration, clignement, coups d'œil), **transition animée entre expressions** et **regard qui suit le pointeur**.
 - Fonction, composants **React / Vue / Svelte / Solid**, web component, API HTTP et CLI.
 
@@ -132,8 +132,93 @@ mochikao({ name: 'alex', family: produce, shape: 'lemon' });
 
 Choisir une famille ne change que la forme : yeux, bouche, accessoire et réglages restent ceux du nom. Là où les options arrivent en texte (attributs HTML, URL, CLI), on déclare les familles disponibles une fois : `defineMochikao({ families: [animals] })` puis `<mochikao-avatar family="animals">`, ou `parseParams(nom, params, [animals, produce])`. L'API et la CLI fournies acceptent les deux.
 
+**Mélanger des familles.** `mix()` combine plusieurs familles : le nom choisit alors parmi toutes leurs formes, chacune avec la même chance.
+
+```ts
+import { mochikao, blobs, mix } from 'mochikao';
+
+mochikao({ name: 'alex', family: mix(blobs, animals) });            // blobs + animaux
+mochikao({ name: 'alex', family: mix(animals, produce) });          // animaux + fruits & légumes
+mochikao({ name: 'alex', family: mix(blobs, animals, produce) });   // tout
+```
+
+| Mode | `family=` | Formes |
+| --- | --- | --- |
+| Blobs (défaut) | `blob` | 10 |
+| Animaux | `animals` | 6 |
+| Fruits & légumes | `produce` | 6 |
+| Blobs + animaux | `animals+blob` | 16 |
+| Blobs + fruits & légumes | `blob+produce` | 16 |
+| Animaux + fruits & légumes | `animals+produce` | 12 |
+| Tout | `all` (ou `animals+blob+produce`) | 22 |
+
+Dans les URL, attributs HTML et la CLI, on joint les noms avec `+` (`?family=blob+animals`) ; `all` prend toutes les familles déclarées plus les blobs. L'ordre n'a pas d'importance, et un mélange des mêmes familles donne toujours le même avatar pour un nom.
+
 Une famille, c'est un objet `ShapeFamily` (`name`, `shapes`, `silhouette`, et en option `decorate` et `hue`) : `src/families/` montre comment en écrire une.
 
+### Laisser les utilisateurs personnaliser leur avatar
+
+mochikao n'embarque pas de sélecteur : un avatar, c'est `nom + options épinglées`. Ton appli enregistre ce que l'utilisateur a touché et le repasse. Ne stocke que les clés épinglées ; supprimer une clé remet ce trait en « auto » (tiré du nom).
+
+```tsx
+import { useState } from 'react';
+import { Mochikao } from 'mochikao/react';
+import { EYES, MOUTHS, EXTRAS, resolve, mix, blobs, type MochikaoOptions } from 'mochikao';
+import { animals } from 'mochikao/animals';
+
+const family = mix(blobs, animals);               // les formes que tu proposes
+type Prefs = Omit<MochikaoOptions, 'name' | 'family'>;
+
+const CHOICES = { shape: family.shapes, eyes: EYES, mouth: MOUTHS, extra: EXTRAS } as const;
+
+export function AvatarEditor({ userId, saved, onSave }: {
+  userId: string;                                  // un id stable, pas un pseudo modifiable
+  saved: Prefs;                                    // lu en base
+  onSave: (prefs: Prefs) => void;
+}) {
+  const [prefs, setPrefs] = useState<Prefs>(saved);
+  const auto = resolve({ name: userId, family });  // ce que donne le nom quand rien n'est épinglé
+
+  // value === undefined remet le trait en « auto »
+  const pin = (key: keyof typeof CHOICES, value?: string) =>
+    setPrefs(({ [key]: _, ...rest }) => (value ? { ...rest, [key]: value } : rest));
+
+  return (
+    <div>
+      <Mochikao name={userId} family={family} size={128} {...prefs} />
+
+      {(Object.keys(CHOICES) as (keyof typeof CHOICES)[]).map((key) => (
+        <label key={key}>
+          {key}
+          <select value={prefs[key] ?? ''} onChange={(e) => pin(key, e.target.value || undefined)}>
+            <option value="">auto ({auto[key]})</option>
+            {CHOICES[key].map((v) => <option key={v}>{v}</option>)}
+          </select>
+        </label>
+      ))}
+
+      <label>
+        teinte
+        <input type="range" min={0} max={360} value={prefs.hue ?? auto.hue}
+               onChange={(e) => setPrefs({ ...prefs, hue: +e.target.value })} />
+      </label>
+
+      <button onClick={() => onSave(prefs)}>Enregistrer</button>
+      <button onClick={() => setPrefs({})}>Réinitialiser</button>
+    </div>
+  );
+}
+```
+
+Partout ailleurs dans l'appli, on l'affiche pareil : `<Mochikao name={user.id} family={family} {...user.avatarPrefs} />`.
+
+- **Stocker du texte** : `toParams(prefs).toString()` donne une chaîne compacte (`shape=frog&eyes=sleepy&hue=140`) et `parseParams(userId, new URLSearchParams(str), [animals])` la relit. Les valeurs invalides sont ignorées : c'est la bonne façon de valider ce qui vient du client.
+- **Même avatar ailleurs** : construis `/api/<id>.svg?family=animals+blob&<prefs>` pour les e-mails, les images OG ou les clients sans JS.
+- **Aperçus** : une tuile, c'est `mochikao({ name, family, ...prefs, eyes: 'wide' })`.
+- **Rester sobre** : plus on laisse épingler de traits, moins deux utilisateurs se distinguent.
+
+Le guide complet (modèle, pièges, référence sans framework, aperçus, validation côté serveur) est dans [docs/editor.fr.md](docs/editor.fr.md), avec aussi une version Vue 3. Un exemple Vue complet, proche de l'éditeur du site, est dans [examples/vue/AvatarEditor.vue](examples/vue/AvatarEditor.vue).
+
 ### Transition entre expressions
 
 En SVG en ligne (`animate`, `inline` ou `gaze`), changer `expression` déclenche une petite transition : les yeux clignent, la bouche se referme, le visage change pendant qu'ils sont fermés, puis tout se rouvre avec un rebond (~450 ms). Les composants et le web component le font tout seuls. Un `<img>` ne peut pas s'animer : en mode image, le changement est immédiat.
@@ -230,6 +315,44 @@ La CI (`.github/workflows/ci.yml`) vérifie types, tests et builds sur Node 22 e
 
 Une fois publié, le rendu des avatars est un contrat : voir Stabilité.
 
+## Crédit
+
+mochikao est sous licence MIT : tu l'utilises librement, la mention n'est pas obligatoire. Si tu l'embarques, une citation aide beaucoup, et j'aimerais voir où il atterrit :
+
+- **Dans ton appli** : une ligne en pied de page ou sur la page « à propos », par exemple `Avatars par <a href="https://mochikao.alexvolkihar.ovh">mochikao</a>`.
+- **Dans ton dépôt** : un lien vers <https://github.com/Alexvolkihar/mochikao> dans ton README (section crédits ou remerciements).
+- **Dis-le-moi** : [ouvre une issue](https://github.com/Alexvolkihar/mochikao/issues/new) avec un lien vers ton projet et j'envisagerai de le lister.
+
+### Badge
+
+Un petit badge SVG pour un README ou une page « à propos », en version **sombre** et **claire** (texte au-dessus de 4.5:1 dans les deux, et une bordure qui tient sur une page blanche ou sombre) :
+
+| Sombre | Clair |
+| --- | --- |
+| [![avatars by mochikao](https://mochikao.alexvolkihar.ovh/badge-dark.svg)](https://mochikao.alexvolkihar.ovh) | [![avatars by mochikao](https://mochikao.alexvolkihar.ovh/badge-light.svg)](https://mochikao.alexvolkihar.ovh) |
+| `badge-dark.svg` | `badge-light.svg` |
+
+```md
+[![avatars by mochikao](https://mochikao.alexvolkihar.ovh/badge-dark.svg)](https://mochikao.alexvolkihar.ovh)
+```
+
+```html
+<a href="https://mochikao.alexvolkihar.ovh"><img src="https://mochikao.alexvolkihar.ovh/badge-dark.svg" alt="avatars by mochikao" height="24"></a>
+```
+
+Pour suivre automatiquement le thème du lecteur (README GitHub et toute page qui gère `<picture>`) :
+
+```html
+<a href="https://mochikao.alexvolkihar.ovh">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://mochikao.alexvolkihar.ovh/badge-light.svg">
+    <img src="https://mochikao.alexvolkihar.ovh/badge-dark.svg" alt="avatars by mochikao" height="24">
+  </picture>
+</a>
+```
+
+`badge.svg` reste un alias de la version sombre. Les fichiers sont dans [`site/public/`](site/public/) si tu préfères en héberger une copie.
+
 ## Licence
 
 MIT

package/README.md

@@ -16,7 +16,7 @@ A face for every name. `mochikao` turns any string (username, email, ID) into a
 - 5 eyes, 6 mouths, 11 accessories (blush, freckles, antenna, sprout, shine, glasses, sunglasses, bow, crown, party hat).
 - **10 continuous axes** you can tune (body size and proportion, squareness, wobble, eye size/spacing/lean, gaze x/y, mouth size) and 6 color presets.
 - **8 expressions**: `idle`, `happy`, `sad`, `mad`, `love`, `shy`, `sick`, `thinking`.
-- **Face-to-body contrast ≥ 4.5:1** for every hue and tone (checked by the tests).
+- **Face-to-body contrast ≥ 4.5:1** for every hue and tone (checked by the tests). The avatar against *your* page is not guaranteed: see [Contrast](docs/editor.md#8-contrast-what-is-guaranteed-and-what-is-not).
 - **CSS animations** (breathing, blinking, glances), **animated transitions between expressions** and **eyes that follow the pointer**.
 - A function, **React / Vue / Svelte / Solid** components, a web component, an HTTP API and a CLI.
 
@@ -132,8 +132,93 @@ mochikao({ name: 'alex', family: produce, shape: 'lemon' });
 
 Picking a family only changes the shape: eyes, mouth, accessory and settings still come from the name. Where options arrive as text (HTML attributes, URLs, CLI), declare the available families once: `defineMochikao({ families: [animals] })` then `<mochikao-avatar family="animals">`, or `parseParams(name, params, [animals, produce])`. The bundled API and CLI accept both.
 
+**Mixing families.** `mix()` combines several families: the name then picks among all their shapes, each shape equally likely.
+
+```ts
+import { mochikao, blobs, mix } from 'mochikao';
+
+mochikao({ name: 'alex', family: mix(blobs, animals) });            // blobs + animals
+mochikao({ name: 'alex', family: mix(animals, produce) });          // animals + fruits & veggies
+mochikao({ name: 'alex', family: mix(blobs, animals, produce) });   // everything
+```
+
+| Mode | `family=` | Shapes |
+| --- | --- | --- |
+| Blobs (default) | `blob` | 10 |
+| Animals | `animals` | 6 |
+| Fruits & veggies | `produce` | 6 |
+| Blobs + animals | `animals+blob` | 16 |
+| Blobs + fruits & veggies | `blob+produce` | 16 |
+| Animals + fruits & veggies | `animals+produce` | 12 |
+| Everything | `all` (or `animals+blob+produce`) | 22 |
+
+In URLs, HTML attributes and the CLI, join names with `+` (`?family=blob+animals`); `all` takes every family you declared plus the blobs. The order doesn't matter, and a mix with the same families always gives the same avatar for a given name.
+
 A family is a `ShapeFamily` object (`name`, `shapes`, `silhouette`, and optionally `decorate` and `hue`): `src/families/` shows how to write one.
 
+### Letting users customize their avatar
+
+mochikao has no built-in picker: an avatar is `name + pinned options`, so your app stores what the user touched and passes it back. Store only the pinned keys; removing a key puts that trait back on "auto" (drawn from the name).
+
+```tsx
+import { useState } from 'react';
+import { Mochikao } from 'mochikao/react';
+import { EYES, MOUTHS, EXTRAS, resolve, mix, blobs, type MochikaoOptions } from 'mochikao';
+import { animals } from 'mochikao/animals';
+
+const family = mix(blobs, animals);               // the shapes you offer
+type Prefs = Omit<MochikaoOptions, 'name' | 'family'>;
+
+const CHOICES = { shape: family.shapes, eyes: EYES, mouth: MOUTHS, extra: EXTRAS } as const;
+
+export function AvatarEditor({ userId, saved, onSave }: {
+  userId: string;                                  // a stable ID, not a renamable pseudonym
+  saved: Prefs;                                    // loaded from your database
+  onSave: (prefs: Prefs) => void;
+}) {
+  const [prefs, setPrefs] = useState<Prefs>(saved);
+  const auto = resolve({ name: userId, family });  // what the name gives when nothing is pinned
+
+  // value === undefined puts the trait back to "auto"
+  const pin = (key: keyof typeof CHOICES, value?: string) =>
+    setPrefs(({ [key]: _, ...rest }) => (value ? { ...rest, [key]: value } : rest));
+
+  return (
+    <div>
+      <Mochikao name={userId} family={family} size={128} {...prefs} />
+
+      {(Object.keys(CHOICES) as (keyof typeof CHOICES)[]).map((key) => (
+        <label key={key}>
+          {key}
+          <select value={prefs[key] ?? ''} onChange={(e) => pin(key, e.target.value || undefined)}>
+            <option value="">auto ({auto[key]})</option>
+            {CHOICES[key].map((v) => <option key={v}>{v}</option>)}
+          </select>
+        </label>
+      ))}
+
+      <label>
+        hue
+        <input type="range" min={0} max={360} value={prefs.hue ?? auto.hue}
+               onChange={(e) => setPrefs({ ...prefs, hue: +e.target.value })} />
+      </label>
+
+      <button onClick={() => onSave(prefs)}>Save</button>
+      <button onClick={() => setPrefs({})}>Reset</button>
+    </div>
+  );
+}
+```
+
+Anywhere else in your app, display it the same way: `<Mochikao name={user.id} family={family} {...user.avatarPrefs} />`.
+
+- **Store text**: `toParams(prefs).toString()` gives a compact string (`shape=frog&eyes=sleepy&hue=140`) and `parseParams(userId, new URLSearchParams(str), [animals])` reads it back. Invalid values are ignored, which makes it the right way to validate what comes from the client.
+- **Same avatar elsewhere**: build `/api/<id>.svg?family=animals+blob&<prefs>` for emails, OG images or non-JS clients.
+- **Previews**: a tile is just `mochikao({ name, family, ...prefs, eyes: 'wide' })`.
+- **Keep it small**: the more traits you let people pin, the less two users differ.
+
+The full guide (model, pitfalls, a framework-free reference, previews, server-side validation) is in [docs/editor.md](docs/editor.md), with a Vue 3 version as well. A complete Vue example, close to the site's editor, is in [examples/vue/AvatarEditor.vue](examples/vue/AvatarEditor.vue).
+
 ### Transitions between expressions
 
 With inline SVG (`animate`, `inline` or `gaze`), changing `expression` plays a short transition: the eyes blink, the mouth closes, the face changes while they are shut, then everything reopens with a little bounce (~450 ms). The components and the web component do it on their own. An `<img>` cannot animate: in image mode the change is immediate.
@@ -230,6 +315,44 @@ CI (`.github/workflows/ci.yml`) checks types, tests and builds on Node 22 and 24
 
 Once published, the avatars' rendering is a contract: see Stability.
 
+## Credit
+
+mochikao is MIT: you can use it freely, credit is not required. If you ship it, though, a mention helps a lot, and I'd love to see where it ends up:
+
+- **In your app**: a line in the footer or the "about" page, such as `Avatars by <a href="https://mochikao.alexvolkihar.ovh">mochikao</a>`.
+- **In your repo**: a link to <https://github.com/Alexvolkihar/mochikao> in your README (credits or acknowledgements section).
+- **Tell me**: [open an issue](https://github.com/Alexvolkihar/mochikao/issues/new) with a link to your project and I'll consider listing it.
+
+### Badge
+
+A small SVG badge for a README or an "about" page, in a **dark** and a **light** version (text above 4.5:1 in both, and a border that holds on a white or a dark page):
+
+| Dark | Light |
+| --- | --- |
+| [![avatars by mochikao](https://mochikao.alexvolkihar.ovh/badge-dark.svg)](https://mochikao.alexvolkihar.ovh) | [![avatars by mochikao](https://mochikao.alexvolkihar.ovh/badge-light.svg)](https://mochikao.alexvolkihar.ovh) |
+| `badge-dark.svg` | `badge-light.svg` |
+
+```md
+[![avatars by mochikao](https://mochikao.alexvolkihar.ovh/badge-dark.svg)](https://mochikao.alexvolkihar.ovh)
+```
+
+```html
+<a href="https://mochikao.alexvolkihar.ovh"><img src="https://mochikao.alexvolkihar.ovh/badge-dark.svg" alt="avatars by mochikao" height="24"></a>
+```
+
+To follow the reader's theme automatically (GitHub READMEs and any page that supports `<picture>`):
+
+```html
+<a href="https://mochikao.alexvolkihar.ovh">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://mochikao.alexvolkihar.ovh/badge-light.svg">
+    <img src="https://mochikao.alexvolkihar.ovh/badge-dark.svg" alt="avatars by mochikao" height="24">
+  </picture>
+</a>
+```
+
+`badge.svg` is kept as an alias of the dark one. The files live in [`site/public/`](site/public/) if you prefer to host a copy.
+
 ## License
 
 MIT

package/dist/bin/mochikao.js

@@ -14,7 +14,7 @@ const USAGE = `usage : mochikao <nom> [options]
   --tone <0-1>           luminosité
   --expression <e>       idle | happy | sad | mad | love | shy | sick | thinking
   --animate <a>          none | hover | always
-  --family <f>           blob | animals | produce
+  --family <f>           blob | animals | produce | all, ou un mélange : blob+animals, animals+produce...
   --color <c>            pastel | pale | mid | deep | bright | ink
   --shape --eyes --mouth --extra   épingle un trait
   --info                 affiche les traits au lieu du SVG`;

package/dist/src/family.d.ts

@@ -49,3 +49,16 @@ export interface ShapeFamily<S extends string = string> {
     hue?(shape: S): number | undefined;
 }
 export declare function isFamily(value: unknown): value is ShapeFamily;
+/**
+ * Combine plusieurs familles en une : le nom choisit parmi toutes leurs formes.
+ *
+ *   mix(blobs, animals)            // blobs et animaux
+ *   mix(blobs, animals, produce)   // tout
+ *
+ * Chaque forme a la même chance d'être tirée, donc une famille pèse selon son
+ * nombre de formes. L'ordre des arguments ne compte pas : les familles sont
+ * triées par nom (le résultat s'appelle `animals+blob`), ce qui fixe la liste
+ * des formes et donc quel avatar sort pour quel nom. Si deux familles ont une
+ * forme du même nom, la première (dans l'ordre trié) l'emporte.
+ */
+export declare function mix(...families: ShapeFamily[]): ShapeFamily;

package/dist/src/family.js

@@ -3,3 +3,36 @@ export function isFamily(value) {
     return typeof f === 'object' && f !== null && typeof f.name === 'string' &&
         Array.isArray(f.shapes) && f.shapes.length > 0 && typeof f.silhouette === 'function';
 }
+/**
+ * Combine plusieurs familles en une : le nom choisit parmi toutes leurs formes.
+ *
+ *   mix(blobs, animals)            // blobs et animaux
+ *   mix(blobs, animals, produce)   // tout
+ *
+ * Chaque forme a la même chance d'être tirée, donc une famille pèse selon son
+ * nombre de formes. L'ordre des arguments ne compte pas : les familles sont
+ * triées par nom (le résultat s'appelle `animals+blob`), ce qui fixe la liste
+ * des formes et donc quel avatar sort pour quel nom. Si deux familles ont une
+ * forme du même nom, la première (dans l'ordre trié) l'emporte.
+ */
+export function mix(...families) {
+    const unique = [...new Map(families.filter(isFamily).map((f) => [f.name, f])).values()]
+        .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
+    if (unique.length === 0)
+        throw new TypeError('mix() attend au moins une famille');
+    if (unique.length === 1)
+        return unique[0];
+    const owner = new Map();
+    for (const f of unique)
+        for (const s of f.shapes)
+            if (!owner.has(s))
+                owner.set(s, f);
+    const of = (shape) => owner.get(shape) ?? unique[0];
+    return {
+        name: unique.map((f) => f.name).join('+'),
+        shapes: [...owner.keys()],
+        silhouette: (shape, traits) => of(shape).silhouette(shape, traits),
+        decorate: (shape, body, colors, eyeY) => of(shape).decorate?.(shape, body, colors, eyeY) ?? {},
+        hue: (shape) => of(shape).hue?.(shape),
+    };
+}

package/dist/src/index.d.ts

@@ -3,7 +3,7 @@ import { type ShapeFamily } from './family.ts';
 import { type Animation, type Background, type ColorPreset, type Expression, type ExtraName, type EyesName, type MouthName, type Traits } from './traits.ts';
 export * from './traits.ts';
 export { blobs } from './shape.ts';
-export { isFamily } from './family.ts';
+export { isFamily, mix } from './family.ts';
 export type { Decoration, ShapeDef, ShapeFamily } from './family.ts';
 export { palette, contrast, hslToRgb } from './color.ts';
 export type { Palette } from './color.ts';

package/dist/src/index.js

@@ -6,7 +6,7 @@ import { blobs, buildBody, superellipsePath } from "./shape.js";
 import { ANIMATIONS, BACKGROUNDS, COLORS, EXPRESSIONS, EXTRAS, EYES, MOUTHS, deriveTraits, pick, positionOf, } from "./traits.js";
 export * from "./traits.js";
 export { blobs } from "./shape.js";
-export { isFamily } from "./family.js";
+export { isFamily, mix } from "./family.js";
 export { palette, contrast, hslToRgb } from "./color.js";
 /** Ce que le nom donne, sans dessiner. */
 export function resolve(options) {

package/dist/src/params.d.ts

@@ -1,5 +1,5 @@
 import type { MochikaoOptions } from './index.ts';
-import type { ShapeFamily } from './family.ts';
+import { type ShapeFamily } from './family.ts';
 type Source = {
     get(key: string): string | null | undefined;
 };
@@ -8,6 +8,8 @@ type Source = {
  * Les valeurs invalides sont ignorées plutôt que de faire échouer le rendu.
  * `families` liste les familles qu'on accepte de désigner par leur nom
  * (`?family=animals`) ; sans elles, seuls les blobs sont disponibles.
+ * Plusieurs familles se combinent avec « + » (`?family=blob+animals`), et
+ * `family=all` prend toutes celles qu'on fournit.
  */
 export declare function parseParams(name: string, src: Source, families?: readonly ShapeFamily[]): MochikaoOptions;
 /**

package/dist/src/params.js

@@ -1,3 +1,4 @@
+import { mix } from "./family.js";
 import { blobs } from "./shape.js";
 import { ANIMATIONS, BACKGROUNDS, COLORS, CONTINUOUS_AXES, EXPRESSIONS, EXTRAS, EYES, MOUTHS } from "./traits.js";
 const oneOf = (list, v) => v != null && list.includes(v) ? v : undefined;
@@ -7,11 +8,27 @@ const num = (v, min, max) => {
     const n = Number(v);
     return Number.isFinite(n) ? Math.min(max, Math.max(min, n)) : undefined;
 };
+/**
+ * `animals`, `blob`, ou un mode combiné : `blob+animals`, `animals+produce`...
+ * `all` prend les blobs et toutes les familles fournies. Les noms inconnus
+ * sont ignorés ; sans aucun nom valide, on n'a pas de famille.
+ */
+function findFamily(value, families) {
+    if (!value)
+        return undefined;
+    const known = [blobs, ...families];
+    if (value === 'all')
+        return mix(...known);
+    const found = value.split(/[+ ]/).map((n) => known.find((f) => f.name === n)).filter((f) => f !== undefined);
+    return found.length ? mix(...found) : undefined;
+}
 /**
  * Options depuis des paramètres texte (query string, attributs HTML, flags CLI).
  * Les valeurs invalides sont ignorées plutôt que de faire échouer le rendu.
  * `families` liste les familles qu'on accepte de désigner par leur nom
  * (`?family=animals`) ; sans elles, seuls les blobs sont disponibles.
+ * Plusieurs familles se combinent avec « + » (`?family=blob+animals`), et
+ * `family=all` prend toutes celles qu'on fournit.
  */
 export function parseParams(name, src, families = []) {
     const options = { name };
@@ -26,7 +43,7 @@ export function parseParams(name, src, families = []) {
     set('expression', oneOf(EXPRESSIONS, src.get('expression')));
     set('animate', oneOf(ANIMATIONS, src.get('animate')));
     // `family` désigne une famille par son nom, parmi celles qu'on nous a confiées.
-    const family = families.find((fam) => fam.name === src.get('family'));
+    const family = findFamily(src.get('family'), families);
     set('family', family);
     set('shape', oneOf((family ?? blobs).shapes, src.get('shape')));
     set('eyes', oneOf(EYES, src.get('eyes')));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mochikao",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "description": "Deterministic avatars: any string becomes a cute, unique SVG character. Zero dependencies, React / Vue / Svelte / Solid / web component.",
   "keywords": [
     "avatar",