@imenam/mcp-design 1.0.11 → 1.0.13

package/README.md

@@ -93,7 +93,7 @@ Chaque requête traverse la garde de [`@imenam/mcp-gui-interface`](https://www.n
 - à tout en-tête `Host` autre que `localhost`, `127.0.0.1` ou `::1` (protection contre le DNS rebinding) ;
 - aux modifications (méthodes autres que `GET`, `HEAD`, `OPTIONS`) venues d'un autre site, d'après `Sec-Fetch-Site` ou, à défaut, `Origin` (sont admis : la machine elle-même, le proxy de `PROXY_URL`).
 
-Un design est un simple fichier JSON dans `<data>/designs/<id>.json` — lisible, diffable, versionnable.
+Un design est un simple fichier JSON dans `<data>/designs/<id>.json` — lisible, diffable, versionnable. Les images qu'il affiche sont dans `<data>/images/`.
 
 ---
 
@@ -115,6 +115,7 @@ Un design est un simple fichier JSON dans `<data>/designs/<id>.json` — lisible
 | Outil | Effet |
 |---|---|
 | `add_nodes` | Ajoute un ou plusieurs éléments par-dessus les autres. |
+| `add_image` | Importe une image (chemin absolu d'un fichier PNG, JPEG, GIF, WebP ou SVG) et la pose par-dessus les autres éléments. |
 | `update_nodes` | Patche des éléments existants — seuls les champs fournis changent. |
 | `delete_nodes` | Supprime des éléments par identifiant. Supprimer un groupe emporte son contenu. |
 | `duplicate_nodes` | Copie des éléments ou des groupes avec tout leur contenu, sous de nouveaux identifiants. `offset_x`/`offset_y` et `count` disposent une série de copies, `parent_id` les dépose dans un groupe. Avec `target_design_id`, la copie va dans une **autre planche** : les éléments gardent leur position à l'écran, et les composants reproduits par les instances copiées sont copiés avec elles, une seule fois, à la racine. |
@@ -122,7 +123,7 @@ Un design est un simple fichier JSON dans `<data>/designs/<id>.json` — lisible
 | `ungroup_nodes` | Dissout des groupes : leur contenu remonte d'un niveau, toujours sans bouger. |
 | `detach_instances` | Rompt le lien d'une instance avec son composant : son contenu devient des éléments ordinaires. |
 
-Sept types d'éléments : `rect`, `ellipse`, `line`, `text`, `icon`, `group` et `instance`. Seul `type` est obligatoire — sauf pour `icon`, qui a besoin du nom de l'icône ; tout le reste tombe sur des valeurs par défaut visibles, donc `{ "type": "rect" }` suffit à créer quelque chose qu'on voit à l'écran.
+Huit types d'éléments : `rect`, `ellipse`, `line`, `text`, `icon`, `image`, `group` et `instance`. Seul `type` est obligatoire — sauf pour `icon`, qui a besoin du nom de l'icône, et `image`, qui a besoin du nom d'une image importée ; tout le reste tombe sur des valeurs par défaut visibles, donc `{ "type": "rect" }` suffit à créer quelque chose qu'on voit à l'écran.
 
 **Champs communs** — `name`, `parentId`, `x`, `y`, `width`, `height` (en pixels, origine en haut à gauche), `rotation` (degrés, autour du centre de la boîte), `opacity` (0–1).
 
@@ -135,6 +136,7 @@ Sept types d'éléments : `rect`, `ellipse`, `line`, `text`, `icon`, `group` et
 | `line` | `stroke`, `strokeWidth` — le trait va de `(x, y)` à `(x + width, y + height)`, donc les deltas négatifs encodent la direction |
 | `text` | `text`, `color`, `fontSize`, `fontFamily`, `fontWeight`, `fontStyle`, `textAlign`, `lineHeight` (en px) |
 | `icon` | `icon` (obligatoire — le nom du dessin), `fill`, `stroke`, `strokeWidth` |
+| `image` | `image` (obligatoire — le nom de l'image dans la médiathèque), `fit` (`cover` par défaut, `contain`, `fill`) |
 | `group` | aucun — c'est un pur conteneur |
 | `instance` | `componentId` (obligatoire — le groupe reproduit) ; rien d'autre, son apparence vient de ce groupe |
 
@@ -164,6 +166,25 @@ Côté GUI, l'outil « Icône » de la barre d'outils (raccourci `I`) ouvre un s
 
 La bibliothèque est figée dans le dépôt par `npm run generate-icons` ([`scripts/generate-icons.js`](scripts/generate-icons.js)) : ni le serveur publié ni le bundle de la GUI ne dépendent de Lucide à l'exécution, et la géométrie d'un design ne peut pas changer au gré d'un `npm install`.
 
+### Images
+
+`add_image` pose une vraie image — photo, logo, illustration, capture — là où une icône ou des formes ne suffisent pas.
+
+```json
+{ "design_id": "landing", "file_path": "C:/projets/site/assets/hero.jpg", "x": 0, "y": 80, "width": 1440 }
+```
+
+- **Le fichier est copié** dans `<MCP_DESIGN_DATA_DIR>/images/`, sous un nom tiré de l'empreinte de son contenu (`img_3f9a1c2b7d4e5f60.jpg`). Le design ne stocke que ce nom : le JSON reste lisible, une même image importée deux fois n'est stockée qu'une fois, et la planche ne dépend plus de l'emplacement du fichier d'origine. La médiathèque est commune à toutes les planches du dossier de données.
+- **Taille** : sans `width` ni `height`, la boîte prend les dimensions naturelles de l'image ; avec une seule des deux, l'autre suit ses proportions.
+- **`fit`** dit comment l'image remplit sa boîte : `cover` la remplit en rognant le débordement, `contain` la montre en entier, `fill` l'étire.
+- **Réutiliser une image** : la réponse d'`add_image` donne son nom ; un nœud `{ "type": "image", "image": "img_…" }` dans `add_nodes` la repose sans second import. Un nom absent de la médiathèque est refusé à l'écriture.
+- Le format est reconnu d'après le contenu du fichier, pas d'après son extension ; 20 Mo au plus.
+- Derrière [`@imenam/mcp-http-gateway`](https://www.npmjs.com/package/@imenam/mcp-http-gateway), l'outil déclare la paire `file_path` / `file_content` : le relais lit le fichier sur la machine de l'agent et en transmet le contenu (dossier autorisé par `GATEWAY_INLINE_ROOTS`).
+
+Le canvas charge les images depuis le worker (`GET /api/images/<nom>`). `screenshot_design`, les captures des remarques et `export_design` les intègrent en data URI : un export `svg`, `html` ou `jsx` s'ouvre tel quel, sans la médiathèque — mais il pèse le poids des images qu'il contient ; pour une planche illustrée, préférez `destination_path` à un retour en ligne.
+
+Dans la GUI, une image se déplace, se redimensionne et se pivote comme les autres éléments ; l'inspecteur règle son cadrage.
+
 ### Hiérarchie
 
 Chaque élément porte un `parentId` : `null` à la racine de la planche, sinon l'identifiant d'un `group`. **Les coordonnées sont exprimées dans l'espace du parent** : un élément à la racine se positionne par rapport à la planche, un élément dans un groupe par rapport à l'origine de ce groupe.
@@ -292,6 +313,13 @@ mark_feedback_processed { round: 1, remark_ids: ["rm_…"], note: "…" }   ←
 
 Trois colonnes : la liste des planches, le canvas, l'inspecteur et les calques.
 
+- **Pages** — la barre de gauche présente l'arbre des groupes : chevron, dossier ouvert ou fermé et nombre de pages par groupe, avec un trait vertical qui relie chaque niveau à son parent. À chaque niveau, les sous-groupes viennent d'abord, puis les pages, chacun par ordre alphabétique ; les pages hors groupe sont regroupées en bas sous « Hors groupe ». À l'ouverture, l'interface rouvre la dernière page consultée dans ce navigateur (mémorisée localement, propre à chaque poste) ; à défaut, la première page de la liste.
+  - **Groupe affiché** — le sélecteur en tête montre « Tous les groupes » ou un seul groupe de premier niveau, avec son nombre de pages et de pages à synchroniser. Le choix est mémorisé dans le navigateur.
+  - **Recherche et filtres** — le champ de recherche porte sur les noms de pages et de dossiers, à toute profondeur, sans tenir compte des accents ni de la casse (`Échap` le vide) : un dossier dont le nom correspond reste affiché en entier, sinon seules ses pages et sous-dossiers qui correspondent restent. Les filtres « Toutes », « À synchroniser » et « Remarques » (remarques non transmises) portent leur compteur. Une recherche ou un filtre actif déplie tous les groupes.
+  - **Tout replier** — le bouton à droite de la recherche replie tous les dossiers du groupe affiché ; quand ils le sont déjà tous, il les déplie. Il est inactif pendant une recherche ou un filtre, qui gardent tout déplié.
+  - **Cartes de page** — un aperçu aux proportions de la planche, le nom, le format et la date de dernière modification ; à droite, la bulle violette des remarques non transmises et le point ambre des modifications à synchroniser. Le menu « … », visible au survol, propose **Déplacer vers…** (vide : hors groupe), **Dupliquer** (la copie s'ouvre aussitôt) et **Supprimer**. Une page se range aussi par glisser-déposer sur un groupe.
+  - **Nouvelle page** — le bouton en pied ouvre le formulaire de création ; le groupe est prérempli avec le groupe affiché.
+
 - **Outils** — sélection, rectangle, ellipse, ligne, texte, icône. Glisser pour dimensionner, cliquer pour poser à la taille par défaut. L'outil icône ouvre d'abord son sélecteur : poser une icône suppose d'avoir choisi laquelle.
 - **Édition** — déplacement au glisser, 8 poignées de redimensionnement (2 extrémités pour une ligne), sélection multiple au rectangle d'encadrement ou au Maj+clic.
 - **Groupes** — `Ctrl+G` groupe la sélection, `Ctrl+Maj+G` la dissout. Un clic dans le canvas sélectionne le **groupe le plus haut** ; `Alt+clic` vise l'élément exact à l'intérieur. Déplacer un groupe déplace tout son contenu.
@@ -309,7 +337,7 @@ Raccourcis : `V` `R` `O` `L` `T` `I` (outils), `Ctrl+Z` / `Ctrl+Y` (annuler/rét
 
 La sauvegarde est automatique et différée. Une modification faite par l'agent pendant que la GUI est ouverte y apparaît en direct, via SSE ; une modification faite dans la GUI est enregistrée comme venant de l'utilisateur, et c'est ce que `get_changes` restitue.
 
-Le badge « n à synchroniser » d'une planche indique le nombre de modifications que l'agent n'a pas encore acquittées.
+Le point ambre d'une page indique qu'elle porte des modifications que l'agent n'a pas encore acquittées avec `mark_synced` ; leur nombre s'affiche au survol.
 
 ### Mode Remarques
 

package/dist/shared/node-defaults.js

@@ -1,6 +1,6 @@
 import { defaultLineHeight } from "./render.js";
 import { DEFAULT_ICON_STROKE_WIDTH, ICON_GRID } from "./icons/index.js";
-export const NODE_KINDS = ["rect", "ellipse", "line", "text", "icon", "group", "instance"];
+export const NODE_KINDS = ["rect", "ellipse", "line", "text", "icon", "image", "group", "instance"];
 /** Types que l'utilisateur peut dessiner directement ; un groupe se cree a partir d'une selection. */
 export const DRAWABLE_KINDS = ["rect", "ellipse", "line", "text", "icon"];
 export const NODE_DEFAULTS = {
@@ -34,6 +34,9 @@ export const NODE_DEFAULTS = {
         stroke: "#1a1a18",
         strokeWidth: DEFAULT_ICON_STROKE_WIDTH,
     },
+    // Une image importee sans taille prend ses dimensions naturelles : celles-ci
+    // ne servent qu'a un noeud ecrit a la main sans largeur ni hauteur.
+    image: { width: 200, height: 150, fit: "cover" },
     // Un groupe n'a pas de taille propre : elle est deduite de son contenu.
     group: { width: 0, height: 0 },
     // Une instance non plus : sa taille est celle du composant qu'elle reproduit.
@@ -46,6 +49,7 @@ export const NODE_STYLE_FIELDS = {
     line: ["stroke", "strokeWidth"],
     text: ["text", "color", "fontSize", "fontFamily", "fontWeight", "fontStyle", "textAlign", "lineHeight"],
     icon: ["icon", "fill", "stroke", "strokeWidth"],
+    image: ["image", "fit"],
     group: [],
     // Rien ne se surcharge dans une instance : son apparence est celle de son
     // composant. Seul le lien lui-meme se change, ce qui l'echange de composant.
@@ -72,6 +76,7 @@ const LABELS = {
     line: "Ligne",
     text: "Texte",
     icon: "Icône",
+    image: "Image",
     group: "Groupe",
     instance: "Instance",
 };

package/dist/shared/node-fields.d.ts

@@ -22,6 +22,8 @@ export declare const NODE_FIELD_DOCS: {
     strokeWidth: string;
     radius: string;
     icon: string;
+    image: string;
+    fit: string;
     componentId: string;
     text: string;
     color: string;

package/dist/shared/node-fields.js

@@ -8,7 +8,7 @@
  */
 export const NODE_FIELD_DOCS = {
     id: "Explicit id. Generated when omitted; must be unique within the design.",
-    type: "Kind of node: rect, ellipse, line, text, icon, group or instance.",
+    type: "Kind of node: rect, ellipse, line, text, icon, image, group or instance.",
     name: "Layer name shown in the GUI. Purely descriptive.",
     parentId: "Id of the containing group, or null for the root level of the artboard. " +
         "Changing it reparents the node — its x/y are then read in the new parent's space, so it moves on screen. " +
@@ -40,6 +40,10 @@ export const NODE_FIELD_DOCS = {
         "the result is sharp at any size, restyles in one field, and stays readable to whoever reads the design later. " +
         "Call search_icons to find a name from a description (it also understands synonyms, so \"basket\" finds \"shopping-cart\"). " +
         "The node's box is square: the drawing is scaled uniformly to fit it and centred, never stretched.",
+    image: "Image nodes only: name of the stored image file, e.g. \"img_3f9a1c2b7d4e.png\". It is returned by add_image, which is the way " +
+        "to bring a new picture into the design; reuse the same name to place that picture again without importing it twice.",
+    fit: "Image nodes only: how the picture fills its box. cover (default) fills the whole box and crops the overflow, " +
+        "contain shows the whole picture inside the box, leaving empty bands, fill stretches it to the box.",
     componentId: "Instance nodes only: id of the GROUP this instance mirrors. The group's content is NOT copied — it is resolved " +
         "at render time, so editing the group updates every instance of it at once, and a repeated block stays a single " +
         "node to read and to change. Whenever the same block appears more than once (cards, list rows, menu items, " +

package/dist/shared/render.d.ts

@@ -12,7 +12,7 @@ export { normalizedBox };
 export type { Box, Point } from "./tree.js";
 export interface RenderNode {
     id: string;
-    type: "rect" | "ellipse" | "line" | "text" | "icon" | "group" | "instance";
+    type: "rect" | "ellipse" | "line" | "text" | "icon" | "image" | "group" | "instance";
     name: string;
     /** Groupe conteneur, ou null a la racine. Les coordonnees sont relatives a ce parent. */
     parentId: string | null;
@@ -30,6 +30,10 @@ export interface RenderNode {
     radius?: number;
     /** Nom de l'icone dans la bibliotheque embarquee, p.ex. "shopping-cart". Type `icon` uniquement. */
     icon?: string;
+    /** Nom du fichier dans la mediatheque, p.ex. "img_3f9a1c2b7d4e.png". Type `image` uniquement. */
+    image?: string;
+    /** Remplissage de la boite par l'image. Type `image` uniquement. */
+    fit?: "cover" | "contain" | "fill";
     text?: string;
     color?: string;
     fontSize?: number;
@@ -131,13 +135,28 @@ export declare function iconElementsOf(node: RenderNode): IconElement[];
  * en noir sur une icone blanche.
  */
 export declare function iconStyle(node: RenderNode): Record<string, string>;
+/**
+ * Adresse d'une image de la mediatheque dans le SVG produit.
+ *
+ * Elle depend de qui lit le SVG : le canvas la charge depuis l'API du worker,
+ * resvg et les exports autonomes ont besoin des octets en data URI.
+ */
+export type ImageHref = (image: string) => string;
+export interface RenderOptions {
+    /** Obligatoire des que la planche contient une image. */
+    imageHref?: ImageHref;
+}
+/** Valeur de `preserveAspectRatio` correspondant au `fit` du noeud. */
+export declare function imageAspect(node: RenderNode): string;
+/** Adresse de l'image du noeud ; echoue si l'appelant n'a pas dit comment la resoudre. */
+export declare function imageSource(node: RenderNode, options: RenderOptions): string;
 export declare function iconElementToSvg([tag, attributes]: IconElement): string;
 /**
  * Markup SVG d'un seul noeud, sans wrapper — utilisé par l'export et par le canvas.
  * Un groupe ne produit rien par lui-meme : c'est un conteneur, rendu par
  * `documentToSvg` (serveur) ou par le canvas (navigateur).
  */
-export declare function nodeToSvg(node: RenderNode): string;
+export declare function nodeToSvg(node: RenderNode, options?: RenderOptions): string;
 export interface RenderDocument {
     name: string;
     width: number;
@@ -145,13 +164,13 @@ export interface RenderDocument {
     background: string;
     nodes: RenderNode[];
 }
-export declare function documentToSvg(doc: RenderDocument): string;
+export declare function documentToSvg(doc: RenderDocument, options?: RenderOptions): string;
 /**
  * SVG cadré sur une zone rectangulaire de la planche, en coordonnées document.
  * Tout ce qui recoupe la zone y figure, coupé à ses bords ; les éléments
  * semi-transparents qui ne la recoupent pas sont omis.
  */
-export declare function regionToSvg(doc: RenderDocument, region: Box): string;
+export declare function regionToSvg(doc: RenderDocument, region: Box, options?: RenderOptions): string;
 /**
  * SVG cadré sur un seul élément — l'élément et son contenu, rien d'autre.
  *
@@ -159,4 +178,4 @@ export declare function regionToSvg(doc: RenderDocument, region: Box): string;
  * position document : le viewBox peut alors être exprimé dans le même repère
  * que `computeLayout`, donc directement sur la boîte englobante de l'élément.
  */
-export declare function subtreeToSvg(doc: RenderDocument, nodeId: string, padding?: number): string;
+export declare function subtreeToSvg(doc: RenderDocument, nodeId: string, padding?: number, options?: RenderOptions): string;

package/dist/shared/render.js

@@ -175,6 +175,22 @@ export function iconStyle(node) {
         "stroke-linejoin": "round",
     };
 }
+const IMAGE_ASPECT = {
+    cover: "xMidYMid slice",
+    contain: "xMidYMid meet",
+    fill: "none",
+};
+/** Valeur de `preserveAspectRatio` correspondant au `fit` du noeud. */
+export function imageAspect(node) {
+    return IMAGE_ASPECT[node.fit ?? "cover"];
+}
+/** Adresse de l'image du noeud ; echoue si l'appelant n'a pas dit comment la resoudre. */
+export function imageSource(node, options) {
+    if (!options.imageHref) {
+        throw new Error(`Node "${node.id}" is an image, but this render was given no way to resolve image files.`);
+    }
+    return options.imageHref(node.image ?? "");
+}
 function attributesToSvg(attributes) {
     return Object.entries(attributes)
         .map(([key, value]) => `${key}="${escapeXml(value)}"`)
@@ -188,7 +204,7 @@ export function iconElementToSvg([tag, attributes]) {
  * Un groupe ne produit rien par lui-meme : c'est un conteneur, rendu par
  * `documentToSvg` (serveur) ou par le canvas (navigateur).
  */
-export function nodeToSvg(node) {
+export function nodeToSvg(node, options = {}) {
     // Un groupe est un conteneur ; une instance n'atteint jamais le rendu, elle
     // est remplacee par un groupe en amont par `expandInstances`.
     if (node.type === "group" || node.type === "instance")
@@ -221,6 +237,11 @@ export function nodeToSvg(node) {
             const body = iconElementsOf(node).map(iconElementToSvg).join("");
             return `<g transform="${placement}" ${attributesToSvg(iconStyle(node))}${opacityAttr}>${body}</g>`;
         }
+        case "image": {
+            return (`<image x="${round(box.x)}" y="${round(box.y)}" width="${round(box.width)}" height="${round(box.height)}"` +
+                ` href="${escapeXml(imageSource(node, options))}" preserveAspectRatio="${imageAspect(node)}"` +
+                `${opacityAttr}${transformAttr} />`);
+        }
         case "text": {
             const m = textMetrics(node);
             const lines = textLines(node);
@@ -243,26 +264,26 @@ export function nodeToSvg(node) {
  * omis : il n'y serait pas visible, et resvg panique — en emportant le
  * processus — sur un élément semi-transparent dessiné entièrement hors du cadre.
  */
-function renderSiblings(nodes, children, layout, depth, frame) {
+function renderSiblings(nodes, children, layout, depth, options, frame) {
     const pad = "  ".repeat(depth + 1);
     return nodes.flatMap((node) => {
         const bounds = boundsOf(layout, node.id);
         if (frame && node.opacity < 1 && !boxesIntersect(bounds, frame))
             return [];
         if (node.type !== "group")
-            return [`${pad}${nodeToSvg(node)}`];
+            return [`${pad}${nodeToSvg(node, options)}`];
         const origin = layout.origin.get(node.id) ?? { x: 0, y: 0 };
         const center = { cx: bounds.x + bounds.width / 2 - origin.x, cy: bounds.y + bounds.height / 2 - origin.y };
         const opacity = node.opacity >= 1 ? "" : ` opacity="${round(node.opacity)}"`;
         return [
             `${pad}<g transform="${groupTransform(node, center)}"${opacity}>`,
-            ...renderSiblings(children.get(node.id) ?? [], children, layout, depth + 1, frame),
+            ...renderSiblings(children.get(node.id) ?? [], children, layout, depth + 1, options, frame),
             `${pad}</g>`,
         ];
     });
 }
 /** Contenu SVG de la planche, en coordonnées document, limité à `frame` s'il est donné. */
-function documentBody(doc, frame) {
+function documentBody(doc, options, frame) {
     // Les instances sont resolues ici, une fois pour toutes : en dessous, il n'y
     // a plus que des groupes ordinaires.
     const nodes = expandInstances(doc.nodes);
@@ -270,10 +291,10 @@ function documentBody(doc, frame) {
     const children = childrenByParent(nodes);
     // Un groupe devient un <g> : ses enfants gardent leurs coordonnées locales,
     // c'est la transformation du conteneur qui les place.
-    return renderSiblings(children.get(null) ?? [], children, layout, 0, frame).join("\n");
+    return renderSiblings(children.get(null) ?? [], children, layout, 0, options, frame).join("\n");
 }
-export function documentToSvg(doc) {
-    const body = documentBody(doc);
+export function documentToSvg(doc, options = {}) {
+    const body = documentBody(doc, options);
     return (`<svg xmlns="http://www.w3.org/2000/svg" width="${doc.width}" height="${doc.height}" ` +
         `viewBox="0 0 ${doc.width} ${doc.height}">\n` +
         `  <rect x="0" y="0" width="${doc.width}" height="${doc.height}" fill="${escapeXml(doc.background)}" />\n` +
@@ -285,8 +306,8 @@ export function documentToSvg(doc) {
  * Tout ce qui recoupe la zone y figure, coupé à ses bords ; les éléments
  * semi-transparents qui ne la recoupent pas sont omis.
  */
-export function regionToSvg(doc, region) {
-    const body = documentBody(doc, region);
+export function regionToSvg(doc, region, options = {}) {
+    const body = documentBody(doc, options, region);
     const width = round(Math.max(1, region.width));
     const height = round(Math.max(1, region.height));
     return (`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" ` +
@@ -303,7 +324,7 @@ export function regionToSvg(doc, region) {
  * position document : le viewBox peut alors être exprimé dans le même repère
  * que `computeLayout`, donc directement sur la boîte englobante de l'élément.
  */
-export function subtreeToSvg(doc, nodeId, padding = 0) {
+export function subtreeToSvg(doc, nodeId, padding = 0, options = {}) {
     const nodes = expandInstances(doc.nodes);
     const node = nodes.find((candidate) => candidate.id === nodeId);
     if (!node)
@@ -323,8 +344,8 @@ export function subtreeToSvg(doc, nodeId, padding = 0) {
     // noeud est rendu tel quel, dans le repère de son parent.
     const origin = node.type === "group" ? (layout.origin.get(nodeId) ?? { x: 0, y: 0 }) : spaceOriginOf(layout, node.parentId);
     const inner = node.type === "group"
-        ? renderSiblings([{ ...node, x: 0, y: 0 }], children, layout, 1).join("\n")
-        : `    ${nodeToSvg(node)}`;
+        ? renderSiblings([{ ...node, x: 0, y: 0 }], children, layout, 1, options).join("\n")
+        : `    ${nodeToSvg(node, options)}`;
     return (`<svg xmlns="http://www.w3.org/2000/svg" width="${round(region.width)}" height="${round(region.height)}" ` +
         `viewBox="${round(region.x)} ${round(region.y)} ${round(region.width)} ${round(region.height)}">\n` +
         `  <rect x="${round(region.x)}" y="${round(region.y)}" width="${round(region.width)}" ` +

package/dist/shared/schemas/design.schema.d.ts

@@ -14,11 +14,12 @@ import { z } from "zod";
  * stockage reste plat, donc diffable et lisible, tandis que les coordonnees
  * d'un noeud sont exprimees dans l'espace de son parent.
  */
-export declare const NODE_TYPES: readonly ["rect", "ellipse", "line", "text", "icon", "group", "instance"];
+export declare const NODE_TYPES: readonly ["rect", "ellipse", "line", "text", "icon", "image", "group", "instance"];
 export declare const NodeTypeSchema: z.ZodEnum<{
     ellipse: "ellipse";
     group: "group";
     icon: "icon";
+    image: "image";
     instance: "instance";
     line: "line";
     rect: "rect";
@@ -31,6 +32,12 @@ export declare const TextAlignSchema: z.ZodEnum<{
     left: "left";
     right: "right";
 }>;
+export declare const IMAGE_FITS: readonly ["cover", "contain", "fill"];
+export declare const ImageFitSchema: z.ZodEnum<{
+    contain: "contain";
+    cover: "cover";
+    fill: "fill";
+}>;
 /**
  * Un seul schéma pour tous les types de noeuds : les champs non pertinents pour
  * un type donné sont simplement absents. Un schéma discriminé obligerait l'agent
@@ -42,6 +49,7 @@ export declare const DesignNodeSchema: z.ZodObject<{
         ellipse: "ellipse";
         group: "group";
         icon: "icon";
+        image: "image";
         instance: "instance";
         line: "line";
         rect: "rect";
@@ -61,6 +69,12 @@ export declare const DesignNodeSchema: z.ZodObject<{
     strokeWidth: z.ZodOptional<z.ZodNumber>;
     radius: z.ZodOptional<z.ZodNumber>;
     icon: z.ZodOptional<z.ZodString>;
+    image: z.ZodOptional<z.ZodString>;
+    fit: z.ZodOptional<z.ZodEnum<{
+        contain: "contain";
+        cover: "cover";
+        fill: "fill";
+    }>>;
     text: z.ZodOptional<z.ZodString>;
     color: z.ZodOptional<z.ZodString>;
     fontSize: z.ZodOptional<z.ZodNumber>;
@@ -88,6 +102,7 @@ export declare const BaselineSchema: z.ZodObject<{
             ellipse: "ellipse";
             group: "group";
             icon: "icon";
+            image: "image";
             instance: "instance";
             line: "line";
             rect: "rect";
@@ -107,6 +122,12 @@ export declare const BaselineSchema: z.ZodObject<{
         strokeWidth: z.ZodOptional<z.ZodNumber>;
         radius: z.ZodOptional<z.ZodNumber>;
         icon: z.ZodOptional<z.ZodString>;
+        image: z.ZodOptional<z.ZodString>;
+        fit: z.ZodOptional<z.ZodEnum<{
+            contain: "contain";
+            cover: "cover";
+            fill: "fill";
+        }>>;
         text: z.ZodOptional<z.ZodString>;
         color: z.ZodOptional<z.ZodString>;
         fontSize: z.ZodOptional<z.ZodNumber>;
@@ -148,6 +169,7 @@ export declare const DesignSchema: z.ZodObject<{
             ellipse: "ellipse";
             group: "group";
             icon: "icon";
+            image: "image";
             instance: "instance";
             line: "line";
             rect: "rect";
@@ -167,6 +189,12 @@ export declare const DesignSchema: z.ZodObject<{
         strokeWidth: z.ZodOptional<z.ZodNumber>;
         radius: z.ZodOptional<z.ZodNumber>;
         icon: z.ZodOptional<z.ZodString>;
+        image: z.ZodOptional<z.ZodString>;
+        fit: z.ZodOptional<z.ZodEnum<{
+            contain: "contain";
+            cover: "cover";
+            fill: "fill";
+        }>>;
         text: z.ZodOptional<z.ZodString>;
         color: z.ZodOptional<z.ZodString>;
         fontSize: z.ZodOptional<z.ZodNumber>;
@@ -199,6 +227,7 @@ export declare const DesignSchema: z.ZodObject<{
                 ellipse: "ellipse";
                 group: "group";
                 icon: "icon";
+                image: "image";
                 instance: "instance";
                 line: "line";
                 rect: "rect";
@@ -218,6 +247,12 @@ export declare const DesignSchema: z.ZodObject<{
             strokeWidth: z.ZodOptional<z.ZodNumber>;
             radius: z.ZodOptional<z.ZodNumber>;
             icon: z.ZodOptional<z.ZodString>;
+            image: z.ZodOptional<z.ZodString>;
+            fit: z.ZodOptional<z.ZodEnum<{
+                contain: "contain";
+                cover: "cover";
+                fill: "fill";
+            }>>;
             text: z.ZodOptional<z.ZodString>;
             color: z.ZodOptional<z.ZodString>;
             fontSize: z.ZodOptional<z.ZodNumber>;

package/dist/shared/schemas/design.schema.js

@@ -16,10 +16,12 @@ import { NODE_FIELD_DOCS } from "../node-fields.js";
  * stockage reste plat, donc diffable et lisible, tandis que les coordonnees
  * d'un noeud sont exprimees dans l'espace de son parent.
  */
-export const NODE_TYPES = ["rect", "ellipse", "line", "text", "icon", "group", "instance"];
+export const NODE_TYPES = ["rect", "ellipse", "line", "text", "icon", "image", "group", "instance"];
 export const NodeTypeSchema = z.enum(NODE_TYPES);
 export const TEXT_ALIGNS = ["left", "center", "right"];
 export const TextAlignSchema = z.enum(TEXT_ALIGNS);
+export const IMAGE_FITS = ["cover", "contain", "fill"];
+export const ImageFitSchema = z.enum(IMAGE_FITS);
 /**
  * Un seul schéma pour tous les types de noeuds : les champs non pertinents pour
  * un type donné sont simplement absents. Un schéma discriminé obligerait l'agent
@@ -57,6 +59,13 @@ export const DesignNodeSchema = z.object({
      * se redessiner, et un agent qui relit le design sait ce qu'elle represente.
      */
     icon: z.string().describe(NODE_FIELD_DOCS.icon).optional(),
+    /**
+     * Image — le nom du fichier dans la mediatheque du dossier de donnees, jamais
+     * ses octets : le design reste un JSON lisible, et une meme image posee
+     * plusieurs fois n'est stockee qu'une fois.
+     */
+    image: z.string().describe(NODE_FIELD_DOCS.image).optional(),
+    fit: ImageFitSchema.describe(NODE_FIELD_DOCS.fit).optional(),
     // Texte — fontSize et lineHeight sont tous deux en PIXELS.
     text: z.string().describe(NODE_FIELD_DOCS.text).optional(),
     color: z.string().describe(NODE_FIELD_DOCS.color).optional(),

package/dist/shared/schemas/feedback.schema.d.ts

@@ -10,6 +10,7 @@ export declare const RemarkTargetSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
             ellipse: "ellipse";
             group: "group";
             icon: "icon";
+            image: "image";
             instance: "instance";
             line: "line";
             rect: "rect";
@@ -38,6 +39,7 @@ export declare const RemarkTargetSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
             ellipse: "ellipse";
             group: "group";
             icon: "icon";
+            image: "image";
             instance: "instance";
             line: "line";
             rect: "rect";
@@ -62,6 +64,7 @@ export declare const FeedbackFileSchema: z.ZodObject<{
                     ellipse: "ellipse";
                     group: "group";
                     icon: "icon";
+                    image: "image";
                     instance: "instance";
                     line: "line";
                     rect: "rect";
@@ -90,6 +93,7 @@ export declare const FeedbackFileSchema: z.ZodObject<{
                     ellipse: "ellipse";
                     group: "group";
                     icon: "icon";
+                    image: "image";
                     instance: "instance";
                     line: "line";
                     rect: "rect";
@@ -127,6 +131,7 @@ export declare const FeedbackFileSchema: z.ZodObject<{
                         ellipse: "ellipse";
                         group: "group";
                         icon: "icon";
+                        image: "image";
                         instance: "instance";
                         line: "line";
                         rect: "rect";
@@ -155,6 +160,7 @@ export declare const FeedbackFileSchema: z.ZodObject<{
                         ellipse: "ellipse";
                         group: "group";
                         icon: "icon";
+                        image: "image";
                         instance: "instance";
                         line: "line";
                         rect: "rect";

package/dist/src/core/design-store.d.ts

@@ -1,4 +1,5 @@
 import { type Design, type DesignSummary } from "../../shared/schemas/design.schema.js";
+import { ImageStore } from "./image-store.js";
 export interface CreateDesignInput {
     name: string;
     width?: number;
@@ -24,6 +25,8 @@ export interface MutateOptions {
 export declare class DesignStore {
     private readonly dataDir;
     private readonly designsDir;
+    /** Images posées sur les planches, partagées par tous les designs du dossier de données. */
+    readonly images: ImageStore;
     /**
      * Cache mémoire : la GUI sauvegarde à chaque geste, relire le disque à chaque
      * fois serait inutile. Chaque entrée retient la signature du fichier au moment

package/dist/src/core/design-store.js

@@ -7,6 +7,7 @@ import { normalizeHierarchy } from "./hierarchy.js";
 import { migrateDesign } from "./migrate.js";
 import { shortId, slugify } from "./ids.js";
 import { countChanges } from "./diff.js";
+import { ImageStore } from "./image-store.js";
 /**
  * Persistance des designs : un fichier JSON par design dans <dataDir>/designs.
  * Pas de base de données — un design tient dans quelques dizaines de Ko et le
@@ -15,6 +16,8 @@ import { countChanges } from "./diff.js";
 export class DesignStore {
     dataDir;
     designsDir;
+    /** Images posées sur les planches, partagées par tous les designs du dossier de données. */
+    images;
     /**
      * Cache mémoire : la GUI sauvegarde à chaque geste, relire le disque à chaque
      * fois serait inutile. Chaque entrée retient la signature du fichier au moment
@@ -29,6 +32,7 @@ export class DesignStore {
         this.dataDir = configured ? path.resolve(configured) : path.join(rootDir, ".design-data");
         this.designsDir = path.join(this.dataDir, "designs");
         fs.mkdirSync(this.designsDir, { recursive: true });
+        this.images = new ImageStore(this.dataDir);
     }
     getDataDir() {
         return this.dataDir;

package/dist/src/core/export.d.ts

@@ -1,6 +1,7 @@
 import type { Design } from "../../shared/schemas/design.schema.js";
+import type { ImageStore } from "./image-store.js";
 export declare const EXPORT_FORMATS: readonly ["svg", "html", "jsx", "json", "summary"];
 export type ExportFormat = (typeof EXPORT_FORMATS)[number];
 /** Inventaire textuel : ce que l'agent lit quand il veut comprendre sans parser du JSON. */
 export declare function toSummary(design: Design): string;
-export declare function exportDesign(design: Design, format: ExportFormat): string;
+export declare function exportDesign(design: Design, format: ExportFormat, images?: ImageStore): string;