@imenam/mcp-design 1.0.10 → 1.0.12

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,6 @@
 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.
  *
@@ -12,11 +14,15 @@ export declare const DEFAULT_MAX_DIMENSION = 1568;
 export interface ScreenshotOptions {
     /** Cadre la capture sur ce noeud (typiquement un groupe) au lieu de tout l'artboard. */
     nodeId?: string;
+    /** Cadre la capture sur cette zone, en coordonnées document. Exclusif de `nodeId`. */
+    region?: Box;
     /** Facteur de zoom appliqué avant l'écrêtage par maxDimension (défaut 1). */
     scale?: number;
     /** 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

@@ -1,5 +1,5 @@
 import { Resvg } from "@resvg/resvg-js";
-import { documentToSvg, subtreeToSvg } from "../../shared/render.js";
+import { regionToSvg, subtreeToSvg } from "../../shared/render.js";
 /**
  * Capture d'écran d'un design.
  *
@@ -40,10 +40,39 @@ export function rasterize(svg, scale) {
     const rendered = resvg.render();
     return { png: Buffer.from(rendered.asPng()), width: rendered.width, height: rendered.height };
 }
+function artboardOf(doc) {
+    return { x: 0, y: 0, width: doc.width, height: doc.height };
+}
+/**
+ * Rendu d'une zone de la planche, découpé dans le rendu de la planche entière.
+ *
+ * resvg panique, en emportant le processus, sur un élément semi-transparent
+ * dont le dessin tombe entièrement hors du cadre — et la boîte d'un élément ne
+ * dit pas où tombe son dessin : un texte occupe rarement toute la largeur de sa
+ * 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, 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}">` +
+        `<image x="0" y="0" width="${doc.width}" height="${doc.height}" preserveAspectRatio="none" ` +
+        `xlink:href="data:image/png;base64,${artboard.png.toString("base64")}" />` +
+        `</svg>`;
+    return rasterize(crop, scale);
+}
 export function screenshotDesign(design, options = {}) {
     const doc = toDocument(design);
     const padding = Math.max(0, options.padding ?? 0);
-    const svg = options.nodeId ? subtreeToSvg(doc, options.nodeId, padding) : documentToSvg(doc);
+    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, 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.");
@@ -52,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 = 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

@@ -115,7 +115,7 @@ function ipcRequest(type, data, timeout = 5000) {
         }
     });
 }
-const PUSHED_EVENTS = new Set(["INITIAL_STATE", "DESIGNS_UPDATED", "DESIGN_UPDATED"]);
+const PUSHED_EVENTS = new Set(["INITIAL_STATE", "DESIGNS_UPDATED", "DESIGN_UPDATED", "REMARKS_UPDATED"]);
 function setupIpcErrorHandlers() {
     process.on("error", (err) => {
         if (err.code === "ERR_IPC_CHANNEL_CLOSED")
@@ -270,6 +270,118 @@ app.delete("/api/designs/:id", async (c) => {
         return c.json({ error: result.error }, 404);
     return c.json(result.data);
 });
+app.get("/api/remarks", async (c) => {
+    const result = await ipcRequest("LIST_REMARKS");
+    if (result.error)
+        return c.json({ error: result.error }, 500);
+    return c.json(result.data);
+});
+app.post("/api/remarks", async (c) => {
+    let body;
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    // La capture est rendue côté serveur : un délai plus long qu'une simple écriture.
+    const result = await ipcRequest("ADD_REMARK", body, 20000);
+    if (result.error)
+        return c.json({ error: result.error }, 400);
+    return c.json(result.data);
+});
+app.put("/api/remarks/:id", async (c) => {
+    let body;
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    const result = await ipcRequest("UPDATE_REMARK", { id: c.req.param("id"), text: body?.text }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 400);
+    return c.json(result.data);
+});
+app.delete("/api/remarks/:id", async (c) => {
+    const result = await ipcRequest("DELETE_REMARK", { id: c.req.param("id") }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 404);
+    return c.json(result.data);
+});
+app.post("/api/feedback", async (c) => {
+    let body;
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    const result = await ipcRequest("SUBMIT_FEEDBACK", { remarkIds: body?.remarkIds, title: body?.title }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 400);
+    return c.json(result.data);
+});
+app.put("/api/rounds/:round", async (c) => {
+    let body;
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    const result = await ipcRequest("RENAME_ROUND", { round: c.req.param("round"), title: body?.title }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 400);
+    return c.json(result.data);
+});
+app.put("/api/rounds/:round/remarks/:id", async (c) => {
+    let body;
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    const result = await ipcRequest("SET_REMARK_PROCESSED", { round: c.req.param("round"), remarkId: c.req.param("id"), processed: body?.processed }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 400);
+    return c.json(result.data);
+});
+app.post("/api/feedback/processed", async (c) => {
+    let body;
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    // Sans numéro de retour, tous les retours sont visés.
+    const result = await ipcRequest("SET_ROUNDS_PROCESSED", { round: body?.round, processed: body?.processed }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 400);
+    return c.json(result.data);
+});
+app.get("/api/captures/:name", async (c) => {
+    const result = await ipcRequest("GET_CAPTURE", { name: c.req.param("name") }, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 404);
+    return c.body(Buffer.from(result.data.png, "base64"), 200, {
+        "Content-Type": "image/png",
+        // Une capture n'est jamais réécrite : son nom suit l'id de la remarque.
+        "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) {