@imenam/mcp-design 1.0.11 → 1.0.13

package/dist/src/core/export.js

@@ -1,4 +1,4 @@
-import { DEFAULT_FONT_FAMILY, documentToSvg, escapeXml, iconElementToSvg, iconElementsOf, iconStyle, normalizedBox, textLines, textMetrics, } from "../../shared/render.js";
+import { DEFAULT_FONT_FAMILY, documentToSvg, escapeXml, iconElementToSvg, iconElementsOf, iconStyle, imageSource, normalizedBox, textLines, textMetrics, } from "../../shared/render.js";
 import { ICON_GRID } from "../../shared/icons/index.js";
 import { boundsOf, childrenByParent, computeLayout } from "../../shared/tree.js";
 import { expandInstances } from "../../shared/instances.js";
@@ -131,7 +131,19 @@ function contextOf(design) {
     const nodes = toExpandedNodes(design);
     return { layout: computeLayout(nodes), children: childrenByParent(nodes) };
 }
-function toHtml(design) {
+/**
+ * Résolution des images en data URI : un export se suffit à lui-même, il
+ * s'ouvre tel quel sans la médiathèque du serveur.
+ */
+function renderOptions(images) {
+    return images ? { imageHref: (name) => images.dataUri(name) } : {};
+}
+/** Source et cadrage d'une image pour les exports HTML et JSX. */
+function imageTag(node, images) {
+    const render = node;
+    return { src: imageSource(render, renderOptions(images)), fit: render.fit ?? "cover" };
+}
+function toHtml(design, images) {
     const { layout, children } = contextOf(design);
     const rules = [];
     const walk = (nodes, parentBox, depth) => {
@@ -150,6 +162,12 @@ function toHtml(design) {
                 return [`${pad}<div class="${cls}">${escapeXml(node.text ?? "")}</div>`];
             if (node.type === "icon")
                 return [`${pad}<div class="${cls}">${iconSvg(node, identity)}</div>`];
+            if (node.type === "image") {
+                const image = imageTag(node, images);
+                return [
+                    `${pad}<img class="${cls}" src="${escapeXml(image.src)}" alt="${escapeXml(node.name)}" style="object-fit: ${image.fit}" />`,
+                ];
+            }
             return [`${pad}<div class="${cls}"></div>`];
         });
     };
@@ -189,7 +207,7 @@ function toComponentName(name) {
         .replace(/^[a-z]/, (letter) => letter.toUpperCase());
     return /^[A-Za-z]/.test(pascal) ? pascal : "Design";
 }
-function toJsx(design) {
+function toJsx(design, images) {
     const { layout, children } = contextOf(design);
     const styleOf = (node, parentBox) => nodeCss(node, layout, parentBox)
         .map((declaration) => {
@@ -218,6 +236,13 @@ function toJsx(design) {
             if (node.type === "icon") {
                 return [comment, `${pad}<div style={{ ${style} }}>${iconSvg(node, toCamelCase)}</div>`];
             }
+            if (node.type === "image") {
+                const image = imageTag(node, images);
+                return [
+                    comment,
+                    `${pad}<img src=${JSON.stringify(image.src)} alt=${JSON.stringify(node.name)} style={{ ${style}, objectFit: ${JSON.stringify(image.fit)} }} />`,
+                ];
+            }
             return [comment, `${pad}<div style={{ ${style} }} />`];
         });
     };
@@ -273,6 +298,9 @@ export function toSummary(design) {
                 lines.push(`${indent}- ${node.id} icon "${node.name}" @ ${geometry} — ${node.icon ?? "?"}, ` +
                     `stroke ${node.stroke ?? "none"} ${node.strokeWidth ?? 2}/24${node.fill && node.fill !== "none" ? `, fill ${node.fill}` : ""}`);
             }
+            else if (node.type === "image") {
+                lines.push(`${indent}- ${node.id} image "${node.name}" @ ${geometry} — ${node.image ?? "?"}, fit ${node.fit ?? "cover"}`);
+            }
             else if (node.type === "line") {
                 lines.push(`${indent}- ${node.id} line "${node.name}" @ ${geometry} — ${node.strokeWidth}px ${node.stroke}`);
             }
@@ -285,7 +313,7 @@ export function toSummary(design) {
     walk(children.get(null) ?? [], 0);
     return lines.join("\n");
 }
-export function exportDesign(design, format) {
+export function exportDesign(design, format, images) {
     switch (format) {
         case "svg":
             // `documentToSvg` resout les instances lui-meme : le canvas de la GUI
@@ -296,11 +324,11 @@ export function exportDesign(design, format) {
                 height: design.height,
                 background: design.background,
                 nodes: toRenderNodes(design),
-            });
+            }, renderOptions(images));
         case "html":
-            return toHtml(design);
+            return toHtml(design, images);
         case "jsx":
-            return toJsx(design);
+            return toJsx(design, images);
         case "json":
             return JSON.stringify({
                 id: design.id,

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

@@ -127,10 +127,10 @@ export class FeedbackStore {
     renderCapture(designId, target) {
         const design = this.designs.get(designId);
         if (target.kind === "node") {
-            return screenshotDesign(design, { nodeId: target.element.id, padding: NODE_CAPTURE_PADDING }).png;
+            return screenshotDesign(design, { nodeId: target.element.id, padding: NODE_CAPTURE_PADDING, images: this.designs.images }).png;
         }
         if (target.kind === "area")
-            return screenshotDesign(design, { region: target.box }).png;
+            return screenshotDesign(design, { region: target.box, images: this.designs.images }).png;
         throw new DesignError("A page remark has no capture.");
     }
     add(input) {

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

@@ -0,0 +1,45 @@
+/**
+ * Médiathèque des designs : `<dataDir>/images/<nom>`.
+ *
+ * Un fichier est nommé d'après l'empreinte de son contenu : importer deux fois
+ * la même image ne la stocke qu'une fois, et un nom ne désigne jamais deux
+ * contenus différents — ce qui permet de le servir avec un cache permanent.
+ * Les images sont partagées par toutes les planches du dossier de données.
+ */
+/** Taille maximale d'une image importée. */
+export declare const MAX_IMAGE_BYTES: number;
+export declare const IMAGE_FORMATS: {
+    readonly png: "image/png";
+    readonly jpg: "image/jpeg";
+    readonly gif: "image/gif";
+    readonly webp: "image/webp";
+    readonly svg: "image/svg+xml";
+};
+export type ImageFormat = keyof typeof IMAGE_FORMATS;
+export interface StoredImage {
+    /** Nom du fichier dans la médiathèque, à porter dans le champ `image` d'un noeud. */
+    name: string;
+    format: ImageFormat;
+    mimeType: string;
+    bytes: number;
+    /** Dimensions naturelles, en pixels. */
+    width: number;
+    height: number;
+}
+export declare class ImageStore {
+    private readonly dir;
+    constructor(dataDir: string);
+    getDir(): string;
+    /** Enregistre une image et renvoie sa fiche ; une image déjà présente n'est pas réécrite. */
+    save(data: Buffer): StoredImage;
+    private fileOf;
+    has(name: string): boolean;
+    /** Échoue si un noeud désigne une image absente de la médiathèque. */
+    requireStored(name: string): void;
+    read(name: string): {
+        data: Buffer;
+        mimeType: string;
+    };
+    /** L'image en data URI, pour un SVG ou un HTML qui doit se suffire à lui-même. */
+    dataUri(name: string): string;
+}

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

@@ -0,0 +1,175 @@
+import crypto from "crypto";
+import fs from "fs";
+import path from "path";
+import { DesignError } from "./node-factory.js";
+/**
+ * Médiathèque des designs : `<dataDir>/images/<nom>`.
+ *
+ * Un fichier est nommé d'après l'empreinte de son contenu : importer deux fois
+ * la même image ne la stocke qu'une fois, et un nom ne désigne jamais deux
+ * contenus différents — ce qui permet de le servir avec un cache permanent.
+ * Les images sont partagées par toutes les planches du dossier de données.
+ */
+/** Taille maximale d'une image importée. */
+export const MAX_IMAGE_BYTES = 20 * 1024 * 1024;
+export const IMAGE_FORMATS = {
+    png: "image/png",
+    jpg: "image/jpeg",
+    gif: "image/gif",
+    webp: "image/webp",
+    svg: "image/svg+xml",
+};
+const IMAGE_NAME = /^img_[0-9a-f]{16}\.(png|jpg|gif|webp|svg)$/;
+/** Format reconnu d'après les premiers octets, jamais d'après l'extension annoncée. */
+function detectFormat(data) {
+    if (data.length >= 8 && data.subarray(0, 8).equals(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])))
+        return "png";
+    if (data.length >= 3 && data[0] === 0xff && data[1] === 0xd8 && data[2] === 0xff)
+        return "jpg";
+    if (data.length >= 6 && /^GIF8[79]a$/.test(data.subarray(0, 6).toString("latin1")))
+        return "gif";
+    if (data.length >= 12 && data.subarray(0, 4).toString("latin1") === "RIFF" && data.subarray(8, 12).toString("latin1") === "WEBP") {
+        return "webp";
+    }
+    const head = data.subarray(0, 4096).toString("utf8").replace(/^/, "").trimStart();
+    if (/^(<\?xml[^>]*>\s*)?(<!--[\s\S]*?-->\s*)*(<!DOCTYPE[^>]*>\s*)?<svg[\s>]/i.test(head))
+        return "svg";
+    return null;
+}
+function jpegSize(data) {
+    let offset = 2;
+    while (offset + 9 < data.length) {
+        if (data[offset] !== 0xff)
+            return null;
+        const marker = data[offset + 1];
+        // Marqueurs sans longueur : remplissage, RST, SOI.
+        if (marker === 0xff) {
+            offset += 1;
+            continue;
+        }
+        if ((marker >= 0xd0 && marker <= 0xd9) || marker === 0x01) {
+            offset += 2;
+            continue;
+        }
+        const length = data.readUInt16BE(offset + 2);
+        // SOF0..SOF15, hors DHT (C4), JPG (C8) et DAC (CC).
+        if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+            return { height: data.readUInt16BE(offset + 5), width: data.readUInt16BE(offset + 7) };
+        }
+        offset += 2 + length;
+    }
+    return null;
+}
+function webpSize(data) {
+    const chunk = data.subarray(12, 16).toString("latin1");
+    if (chunk === "VP8X" && data.length >= 30) {
+        return { width: 1 + data.readUIntLE(24, 3), height: 1 + data.readUIntLE(27, 3) };
+    }
+    if (chunk === "VP8 " && data.length >= 30) {
+        return { width: data.readUInt16LE(26) & 0x3fff, height: data.readUInt16LE(28) & 0x3fff };
+    }
+    if (chunk === "VP8L" && data.length >= 25) {
+        const bits = data.readUInt32LE(21);
+        return { width: (bits & 0x3fff) + 1, height: ((bits >> 14) & 0x3fff) + 1 };
+    }
+    return null;
+}
+/** Longueur SVG en pixels ; null pour une valeur relative (%) ou absente. */
+function svgLength(value) {
+    if (value === undefined)
+        return null;
+    const match = /^\s*([\d.]+)\s*(px)?\s*$/.exec(value);
+    return match ? Number(match[1]) : null;
+}
+function svgSize(data) {
+    const tag = /<svg\b[^>]*>/i.exec(data.toString("utf8"))?.[0];
+    if (!tag)
+        return null;
+    const attribute = (name) => new RegExp(`\\s${name}\\s*=\\s*["']([^"']*)["']`, "i").exec(tag)?.[1];
+    const width = svgLength(attribute("width"));
+    const height = svgLength(attribute("height"));
+    const viewBox = attribute("viewBox")?.trim().split(/[\s,]+/).map(Number);
+    const box = viewBox && viewBox.length === 4 && viewBox[2] > 0 && viewBox[3] > 0 ? viewBox : null;
+    if (width && height)
+        return { width, height };
+    if (box && width)
+        return { width, height: (width * box[3]) / box[2] };
+    if (box && height)
+        return { width: (height * box[2]) / box[3], height };
+    if (box)
+        return { width: box[2], height: box[3] };
+    return null;
+}
+function naturalSize(data, format) {
+    switch (format) {
+        case "png":
+            return data.length >= 24 ? { width: data.readUInt32BE(16), height: data.readUInt32BE(20) } : null;
+        case "gif":
+            return data.length >= 10 ? { width: data.readUInt16LE(6), height: data.readUInt16LE(8) } : null;
+        case "jpg":
+            return jpegSize(data);
+        case "webp":
+            return webpSize(data);
+        case "svg":
+            return svgSize(data);
+    }
+}
+export class ImageStore {
+    dir;
+    constructor(dataDir) {
+        this.dir = path.join(dataDir, "images");
+    }
+    getDir() {
+        return this.dir;
+    }
+    /** Enregistre une image et renvoie sa fiche ; une image déjà présente n'est pas réécrite. */
+    save(data) {
+        if (data.length === 0)
+            throw new DesignError("The image file is empty.");
+        if (data.length > MAX_IMAGE_BYTES) {
+            throw new DesignError(`Image too large: ${data.length} bytes, the limit is ${MAX_IMAGE_BYTES}.`);
+        }
+        const format = detectFormat(data);
+        if (!format) {
+            throw new DesignError(`Unsupported image format. Accepted: ${Object.keys(IMAGE_FORMATS).join(", ")}.`);
+        }
+        const size = naturalSize(data, format);
+        if (!size || !(size.width > 0) || !(size.height > 0)) {
+            throw new DesignError(`Could not read the dimensions of this ${format} image: the file looks damaged.`);
+        }
+        const hash = crypto.createHash("sha256").update(data).digest("hex").slice(0, 16);
+        const name = `img_${hash}.${format}`;
+        const file = path.join(this.dir, name);
+        if (!fs.existsSync(file)) {
+            fs.mkdirSync(this.dir, { recursive: true });
+            fs.writeFileSync(file, data);
+        }
+        return { name, format, mimeType: IMAGE_FORMATS[format], bytes: data.length, ...size };
+    }
+    fileOf(name) {
+        if (!IMAGE_NAME.test(name))
+            throw new DesignError(`"${name}" is not an image name of the media library.`);
+        return path.join(this.dir, name);
+    }
+    has(name) {
+        return IMAGE_NAME.test(name) && fs.existsSync(path.join(this.dir, name));
+    }
+    /** Échoue si un noeud désigne une image absente de la médiathèque. */
+    requireStored(name) {
+        if (!this.has(name)) {
+            throw new DesignError(`Image "${name}" is not in the media library. Import the picture with add_image, which returns the name to use.`);
+        }
+    }
+    read(name) {
+        const file = this.fileOf(name);
+        if (!fs.existsSync(file))
+            throw new DesignError(`Image "${name}" is missing from ${this.dir}.`);
+        const format = path.extname(name).slice(1);
+        return { data: fs.readFileSync(file), mimeType: IMAGE_FORMATS[format] };
+    }
+    /** L'image en data URI, pour un SVG ou un HTML qui doit se suffire à lui-même. */
+    dataUri(name) {
+        const { data, mimeType } = this.read(name);
+        return `data:${mimeType};base64,${data.toString("base64")}`;
+    }
+}

package/dist/src/core/node-factory.js

@@ -30,6 +30,18 @@ function requireIconName(value) {
         (suggestions.length > 0 ? ` Closest matches: ${suggestions.join(", ")}.` : "") +
         ` Call search_icons to search the ${iconCount()} available icons by description.`);
 }
+/**
+ * Valide le champ `image` d'un noeud `image`. L'existence du fichier dans la
+ * mediatheque, elle, est verifiee par les outils, qui ont acces au stockage.
+ */
+function requireImageName(value) {
+    const name = typeof value === "string" ? value.trim() : "";
+    if (name === "") {
+        throw new DesignError(`An "image" node needs an "image" field naming a stored image, e.g. "img_3f9a1c2b7d4e5f60.png". ` +
+            `Call add_image to import a picture file: it stores the file and places the node in one step.`);
+    }
+    return name;
+}
 /** Champs geometriques réellement modifiables pour un type donné. */
 function geometryFieldsFor(type) {
     return SIZE_DERIVED_KINDS.includes(type) ? GEOMETRY.filter((field) => !DERIVED.includes(field)) : GEOMETRY;
@@ -97,6 +109,8 @@ export function buildNode(input, existingIds, index) {
     }
     if (type === "instance")
         draft.componentId = requireComponentId(draft.componentId);
+    if (type === "image")
+        draft.image = requireImageName(draft.image);
     if (type === "icon") {
         draft.icon = requireIconName(draft.icon);
         // Un calque nomme "Icône 7" ne dit rien au relecteur ; le nom de l'icone,
@@ -148,6 +162,8 @@ export function applyPatch(node, patch) {
     }
     if (node.type === "icon" && patch.icon !== undefined)
         next.icon = requireIconName(patch.icon);
+    if (node.type === "image" && patch.image !== undefined)
+        next.image = requireImageName(patch.image);
     // Changer le lien echange l'instance de composant, comme un "swap instance".
     if (node.type === "instance" && patch.componentId !== undefined)
         next.componentId = requireComponentId(patch.componentId);

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

@@ -1,4 +1,5 @@
 import type { Design } from "../../shared/schemas/design.schema.js";
+import type { ImageStore } from "./image-store.js";
 import type { Box } from "../../shared/tree.js";
 /**
  * Capture d'écran d'un design.
@@ -20,6 +21,8 @@ export interface ScreenshotOptions {
     /** Marge, en pixels du design, ajoutée autour du noeud capturé. */
     padding?: number;
     maxDimension?: number;
+    /** Médiathèque où lire les images de la planche. Obligatoire dès qu'elle en contient. */
+    images?: ImageStore;
 }
 export interface Screenshot {
     png: Buffer;

package/dist/src/core/screenshot.js

@@ -52,8 +52,8 @@ function artboardOf(doc) {
  * boîte. Dans la planche entière, tout ce qui est visible est dans le cadre ; la
  * zone en est ensuite extraite par une image, qui ne porte aucune opacité.
  */
-function rasterizeRegion(doc, region, scale) {
-    const artboard = rasterize(regionToSvg(doc, artboardOf(doc)), scale);
+function rasterizeRegion(doc, region, scale, render) {
+    const artboard = rasterize(regionToSvg(doc, artboardOf(doc), render), scale);
     const crop = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ` +
         `width="${region.width}" height="${region.height}" ` +
         `viewBox="${region.x} ${region.y} ${region.width} ${region.height}">` +
@@ -66,9 +66,13 @@ export function screenshotDesign(design, options = {}) {
     const doc = toDocument(design);
     const padding = Math.max(0, options.padding ?? 0);
     const region = options.region;
+    const images = options.images;
+    const render = images ? { imageHref: (name) => images.dataUri(name) } : {};
     // La planche entière est rendue comme une zone : un élément semi-transparent
     // posé hors de l'artboard en est omis.
-    const svg = options.nodeId ? subtreeToSvg(doc, options.nodeId, padding) : regionToSvg(doc, region ?? artboardOf(doc));
+    const svg = options.nodeId
+        ? subtreeToSvg(doc, options.nodeId, padding, render)
+        : regionToSvg(doc, region ?? artboardOf(doc), render);
     const source = svgSize(svg);
     if (!(source.width > 0) || !(source.height > 0)) {
         throw new Error("Nothing to capture: the requested area has no size.");
@@ -77,7 +81,7 @@ export function screenshotDesign(design, options = {}) {
     const requested = Math.max(0.05, Math.min(8, options.scale ?? 1));
     // L'écrêtage ne peut que réduire : un zoom demandé plus petit reste respecté.
     const scale = Math.min(requested, maxDimension / Math.max(source.width, source.height));
-    const rendered = region ? rasterizeRegion(doc, region, scale) : rasterize(svg, scale);
+    const rendered = region ? rasterizeRegion(doc, region, scale, render) : rasterize(svg, scale);
     return {
         png: rendered.png,
         width: rendered.width,

package/dist/src/gui-worker.js

@@ -264,6 +264,19 @@ app.put("/api/designs/:id/group", async (c) => {
         return c.json({ error: result.error }, 400);
     return c.json(result.data);
 });
+app.post("/api/designs/:id/duplicate", async (c) => {
+    let body = {};
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    const result = await ipcRequest("DUPLICATE_DESIGN", { id: c.req.param("id"), name: body?.name }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 400);
+    return c.json(result.data);
+});
 app.delete("/api/designs/:id", async (c) => {
     const result = await ipcRequest("DELETE_DESIGN", { id: c.req.param("id") }, 10000);
     if (result.error)
@@ -372,6 +385,16 @@ app.get("/api/captures/:name", async (c) => {
         "Cache-Control": "private, max-age=31536000, immutable",
     });
 });
+app.get("/api/images/:name", async (c) => {
+    const result = await ipcRequest("GET_IMAGE", { name: c.req.param("name") }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 404);
+    return c.body(Buffer.from(result.data.data, "base64"), 200, {
+        "Content-Type": result.data.mimeType,
+        // Le nom d'une image suit l'empreinte de son contenu : il ne désigne jamais deux fichiers différents.
+        "Cache-Control": "private, max-age=31536000, immutable",
+    });
+});
 // Fichiers statiques de la SPA
 app.use("/assets/*", serveStatic({ root: path.relative(process.cwd(), absoluteStaticRoot) }));
 function getHtmlBaseHref(appPath) {

package/dist/src/index.js

@@ -17,7 +17,7 @@ import { MIN_LINE_HEIGHT_PX } from "../shared/render.js";
 import { CORE_ICONS, iconCount } from "../shared/icons/index.js";
 import { NODE_FIELD_DOCS } from "../shared/node-fields.js";
 import { REORDER_DIRECTIONS } from "../shared/tree.js";
-import { normalizeDesignGroup } from "../shared/schemas/design.schema.js";
+import { IMAGE_FITS, NODE_TYPES, normalizeDesignGroup } from "../shared/schemas/design.schema.js";
 import { listDesigns } from "./tools/list-designs.js";
 import { createDesign } from "./tools/create-design.js";
 import { duplicateDesign } from "./tools/duplicate-design.js";
@@ -25,6 +25,8 @@ import { getDesign } from "./tools/get-design.js";
 import { updateDesign } from "./tools/update-design.js";
 import { deleteDesign } from "./tools/delete-design.js";
 import { addNodes } from "./tools/add-nodes.js";
+import { addImage } from "./tools/add-image.js";
+import { IMAGE_FORMATS } from "./core/image-store.js";
 import { updateNodes } from "./tools/update-nodes.js";
 import { deleteNodes } from "./tools/delete-nodes.js";
 import { duplicateNodes, MAX_DUPLICATE_COPIES } from "./tools/duplicate-nodes.js";
@@ -188,6 +190,16 @@ function handleIPCMessage(msg) {
                 replyError(msg, "DELETE_DESIGN_RESPONSE", err.message);
             }
             return;
+        case "DUPLICATE_DESIGN":
+            try {
+                const name = typeof msg.data?.name === "string" ? msg.data.name : undefined;
+                const design = store.duplicate(String(msg.data?.id), { name });
+                reply(msg, "DUPLICATE_DESIGN_RESPONSE", { design, designs: store.list() });
+            }
+            catch (err) {
+                replyError(msg, "DUPLICATE_DESIGN_RESPONSE", err.message);
+            }
+            return;
         case "SET_DESIGN_GROUP":
             try {
                 store.mutate(String(msg.data?.id), "user", (draft) => {
@@ -301,6 +313,15 @@ function handleIPCMessage(msg) {
                 replyError(msg, "GET_CAPTURE_RESPONSE", err.message);
             }
             return;
+        case "GET_IMAGE":
+            try {
+                const image = store.images.read(String(msg.data?.name ?? ""));
+                reply(msg, "GET_IMAGE_RESPONSE", { data: image.data.toString("base64"), mimeType: image.mimeType });
+            }
+            catch (err) {
+                replyError(msg, "GET_IMAGE_RESPONSE", err.message);
+            }
+            return;
         case "GET_CONFIG":
             reply(msg, "GET_CONFIG_RESPONSE", { dataDir: store.getDataDir(), version: APP_VERSION });
             return;
@@ -460,6 +481,7 @@ const NODE_FIELDS_DOC = "Every length is in PIXELS (x, y, width, height, strokeW
     "a text node given no height takes the exact height of its text, so its first line starts at y — " +
     "pass a height only to centre a label inside a container (same y and height as the container); " +
     "icon: icon (required — the name of the drawing), fill, stroke, strokeWidth; " +
+    "image: image (required — the stored name returned by add_image), fit; " +
     "instance: componentId (required — the id of the group it mirrors); nothing else, its look comes from that group. " +
     "Any field left out falls back to a sensible default, so a node can be created from its type alone.";
 /**
@@ -494,6 +516,8 @@ const NODE_PROPERTIES = {
     strokeWidth: { type: "number", minimum: 0, description: NODE_FIELD_DOCS.strokeWidth },
     radius: { type: "number", minimum: 0, description: NODE_FIELD_DOCS.radius },
     icon: { type: "string", description: NODE_FIELD_DOCS.icon },
+    image: { type: "string", description: NODE_FIELD_DOCS.image },
+    fit: { type: "string", enum: [...IMAGE_FITS], description: NODE_FIELD_DOCS.fit },
     componentId: { type: "string", description: NODE_FIELD_DOCS.componentId },
     text: { type: "string", description: NODE_FIELD_DOCS.text },
     color: { type: "string", description: NODE_FIELD_DOCS.color },
@@ -628,7 +652,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
                             properties: {
                                 type: {
                                     type: "string",
-                                    enum: ["rect", "ellipse", "line", "text", "icon", "group", "instance"],
+                                    enum: [...NODE_TYPES],
                                     description: NODE_FIELD_DOCS.type,
                                 },
                                 ...NODE_PROPERTIES,
@@ -641,6 +665,41 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
                 required: ["design_id", "nodes"],
             },
         },
+        {
+            name: "add_image",
+            description: "Place a picture (photo, logo, illustration, screenshot) on a design, on top of the other nodes. " +
+                `Give the ABSOLUTE path of the image file on the agent machine; accepted formats: ${Object.keys(IMAGE_FORMATS).join(", ")}. ` +
+                "The file is copied into the media library of the designs, so the design keeps working if the original moves. " +
+                "Without width and height the node takes the picture's natural size; with only one of them, the other follows the picture's proportions. " +
+                "Use it for real pictures only — icons come from the \"icon\" node, shapes from add_nodes. " +
+                "The answer gives the stored name of the picture: an image node in add_nodes with that name places it again without a second import.",
+            inputSchema: {
+                type: "object",
+                properties: {
+                    design_id: { type: "string", description: DESIGN_ID_DOC },
+                    file_path: { type: "string", description: "Absolute path to the image file on the agent machine." },
+                    file_content: {
+                        type: "string",
+                        description: "Filled in by the mcp-http-gateway relay, never by the agent: the base64 content of the file read on the agent machine.",
+                    },
+                    file_name: {
+                        type: "string",
+                        description: "Filled in by the mcp-http-gateway relay, never by the agent: the original name of the file read on the agent machine.",
+                    },
+                    id: NODE_PROPERTIES.id,
+                    name: { type: "string", description: `${NODE_FIELD_DOCS.name} Defaults to the file name without its extension.` },
+                    parentId: NODE_PROPERTIES.parentId,
+                    x: NODE_PROPERTIES.x,
+                    y: NODE_PROPERTIES.y,
+                    width: { type: "number", description: "Width of the box, in pixels. Defaults to the picture's natural width, or follows its proportions when only height is given." },
+                    height: { type: "number", description: "Height of the box, in pixels. Defaults to the picture's natural height, or follows its proportions when only width is given." },
+                    rotation: NODE_PROPERTIES.rotation,
+                    opacity: NODE_PROPERTIES.opacity,
+                    fit: NODE_PROPERTIES.fit,
+                },
+                required: ["design_id", "file_path"],
+            },
+        },
         {
             name: "update_nodes",
             description: "Patch existing nodes. Each entry needs an id plus only the fields to change; everything else is preserved. " +
@@ -995,6 +1054,11 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 notifyDesignChanged(result.design.id);
                 return { ...result, content: [{ type: "text", text: result.content[0].text + guiHint(result.design.id) }] };
             }
+            case "add_image": {
+                const result = addImage(store, params);
+                notifyDesignChanged(result.design.id);
+                return { ...result, content: [{ type: "text", text: result.content[0].text + guiHint(result.design.id) }] };
+            }
             case "update_nodes": {
                 const result = updateNodes(store, params);
                 notifyDesignChanged(result.design.id);

package/dist/src/tools/add-image.d.ts

@@ -0,0 +1,3 @@
+import type { DesignStore } from "../core/design-store.js";
+import type { MutationResult } from "./add-nodes.js";
+export declare function addImage(store: DesignStore, args: Record<string, unknown> | undefined): MutationResult;

package/dist/src/tools/add-image.js

@@ -0,0 +1,65 @@
+import fs from "fs";
+import path from "path";
+import { buildNode, DesignError } from "../core/node-factory.js";
+import { requireString, textResult } from "./types.js";
+/** Champs du noeud que l'appel peut fixer, en plus de l'image elle-même. */
+const NODE_FIELDS = ["id", "name", "parentId", "x", "y", "width", "height", "rotation", "opacity", "fit"];
+/**
+ * Octets de l'image : le contenu transmis par le relais du gateway quand il est
+ * présent, sinon le fichier désigné par `file_path`, lu sur cette machine.
+ */
+function readImageBytes(args) {
+    if (typeof args.file_content === "string" && args.file_content !== "") {
+        return Buffer.from(args.file_content, "base64");
+    }
+    const filePath = requireString(args, "file_path");
+    if (!path.isAbsolute(filePath))
+        throw new DesignError(`file_path must be an absolute path: ${filePath}`);
+    if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile())
+        throw new DesignError(`File not found: ${filePath}`);
+    return fs.readFileSync(filePath);
+}
+/**
+ * Taille de la boîte : celle demandée, sinon les dimensions naturelles de
+ * l'image. Une seule dimension donnée, l'autre suit les proportions de l'image.
+ */
+function boxSize(image, width, height) {
+    const w = width === undefined ? undefined : Number(width);
+    const h = height === undefined ? undefined : Number(height);
+    if (w !== undefined && h !== undefined)
+        return { width: w, height: h };
+    if (w !== undefined)
+        return { width: w, height: Math.round(((w * image.height) / image.width) * 100) / 100 };
+    if (h !== undefined)
+        return { width: Math.round(((h * image.width) / image.height) * 100) / 100, height: h };
+    return { width: image.width, height: image.height };
+}
+export function addImage(store, args) {
+    const params = args ?? {};
+    const id = requireString(params, "design_id");
+    const current = store.get(id);
+    const image = store.images.save(readImageBytes(params));
+    const input = { type: "image", image: image.name };
+    for (const field of NODE_FIELDS) {
+        if (params[field] !== undefined)
+            input[field] = params[field];
+    }
+    if (input.name === undefined) {
+        const original = typeof params.file_name === "string" ? params.file_name : String(params.file_path ?? "");
+        const base = path.basename(original.replace(/\\/g, "/")).replace(/\.[^.]+$/, "");
+        if (base !== "")
+            input.name = base;
+    }
+    Object.assign(input, boxSize(image, params.width, params.height));
+    const node = buildNode(input, new Set(current.nodes.map((n) => n.id)), current.nodes.length + 1);
+    const design = store.mutate(id, "agent", (draft) => {
+        draft.nodes.push(node);
+    });
+    return {
+        ...textResult(`Added image ${node.id} — "${node.name}" to "${design.name}" at ${Math.round(node.x)},${Math.round(node.y)} ` +
+            `size ${Math.round(node.width)}x${Math.round(node.height)}, fit ${node.fit}.\n` +
+            `Stored as "${image.name}" (${image.format}, ${image.width}x${image.height} px, ${image.bytes} bytes). ` +
+            `Use that name as the "image" field of an image node in add_nodes to place the same picture again.`),
+        design,
+    };
+}