@imenam/mcp-design 1.0.10 → 1.0.11

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

@@ -0,0 +1,308 @@
+import fs from "fs";
+import path from "path";
+import { defaultRoundTitle, elementsInArea, nodeTarget, orderRemarks, roundBox, } from "../../shared/feedback.js";
+import { FeedbackFileSchema, migrateFeedbackFile } from "../../shared/schemas/feedback.schema.js";
+import { withFileLock } from "./file-lock.js";
+import { shortId } from "./ids.js";
+import { DesignError } from "./node-factory.js";
+import { screenshotDesign } from "./screenshot.js";
+/** Marge autour d'un élément capturé, comme `screenshot_design`. */
+const NODE_CAPTURE_PADDING = 16;
+function emptyFile() {
+    return { version: 2, remarks: [], rounds: [], lastNumbers: {} };
+}
+function requireText(text) {
+    const value = typeof text === "string" ? text.trim() : "";
+    if (value === "")
+        throw new DesignError("A remark needs some text.");
+    return value;
+}
+function requireTitle(title) {
+    const value = typeof title === "string" ? title.trim() : "";
+    if (value === "")
+        throw new DesignError("A feedback round needs a name.");
+    return value;
+}
+/**
+ * Remarques de l'utilisateur et retours transmis à l'agent, dans
+ * `<dataDir>/feedback/remarks.json`, captures dans `<dataDir>/feedback/captures`.
+ *
+ * Un seul fichier pour tout le projet : un retour peut couvrir plusieurs pages.
+ */
+export class FeedbackStore {
+    designs;
+    dir;
+    capturesDir;
+    file;
+    constructor(designs) {
+        this.designs = designs;
+        this.dir = path.join(designs.getDataDir(), "feedback");
+        this.capturesDir = path.join(this.dir, "captures");
+        this.file = path.join(this.dir, "remarks.json");
+        fs.mkdirSync(this.capturesDir, { recursive: true });
+    }
+    getFilePath() {
+        return this.file;
+    }
+    read() {
+        if (!fs.existsSync(this.file))
+            return emptyFile();
+        let raw;
+        try {
+            raw = JSON.parse(fs.readFileSync(this.file, "utf-8"));
+        }
+        catch (err) {
+            throw new DesignError(`The remarks file ${this.file} is not readable: ${err.message}`);
+        }
+        // Un fichier d'une version antérieure est lu au format courant ; il n'est
+        // réécrit qu'à la prochaine modification.
+        const parsed = FeedbackFileSchema.safeParse(migrateFeedbackFile(raw, defaultRoundTitle) ?? raw);
+        if (!parsed.success) {
+            throw new DesignError(`The remarks file ${this.file} does not match the expected schema: ${parsed.error.issues
+                .map((issue) => `${issue.path.join(".")} ${issue.message}`)
+                .join("; ")}`);
+        }
+        return parsed.data;
+    }
+    mutate(fn) {
+        return withFileLock(`${this.file}.lock`, "The remarks file", () => {
+            const draft = structuredClone(this.read());
+            const result = fn(draft);
+            const parsed = FeedbackFileSchema.safeParse(draft);
+            if (!parsed.success) {
+                throw new DesignError(`Resulting remarks file is invalid: ${parsed.error.issues
+                    .map((issue) => `${issue.path.join(".")} ${issue.message}`)
+                    .join("; ")}`);
+            }
+            const tmp = `${this.file}.tmp`;
+            fs.writeFileSync(tmp, JSON.stringify(parsed.data, null, 2), "utf-8");
+            fs.renameSync(tmp, this.file);
+            return result;
+        });
+    }
+    remarks(designId) {
+        const remarks = this.read().remarks;
+        return designId === undefined ? remarks : remarks.filter((remark) => remark.designId === designId);
+    }
+    rounds() {
+        return this.read().rounds;
+    }
+    capturePath(name) {
+        if (name !== path.basename(name))
+            throw new DesignError(`Invalid capture name "${name}".`);
+        return path.join(this.capturesDir, name);
+    }
+    readCapture(name) {
+        const file = this.capturePath(name);
+        if (!fs.existsSync(file))
+            throw new DesignError(`Capture "${name}" not found in ${this.capturesDir}.`);
+        return fs.readFileSync(file);
+    }
+    /** Complète la cible d'après l'état courant du design. */
+    resolveTarget(designId, input) {
+        const design = this.designs.get(designId);
+        if (input.kind === "page")
+            return { kind: "page" };
+        if (input.kind === "node") {
+            if (!design.nodes.some((node) => node.id === input.nodeId)) {
+                throw new DesignError(`Node "${input.nodeId}" not found in design "${design.name}" (${design.id}).`);
+            }
+            return nodeTarget(design.nodes, input.nodeId);
+        }
+        const box = roundBox(input.box);
+        if (!(box.width >= 1 && box.height >= 1))
+            throw new DesignError("A remark area must be at least 1 px wide and high.");
+        if (box.x < 0 || box.y < 0 || box.x + box.width > design.width || box.y + box.height > design.height) {
+            throw new DesignError(`A remark area must lie within the ${design.width}x${design.height} artboard.`);
+        }
+        const hits = new Map(elementsInArea(design.nodes, box).map((hit) => [hit.id, hit]));
+        const elements = input.elementIds.map((id) => {
+            const hit = hits.get(id);
+            if (!hit)
+                throw new DesignError(`Node "${id}" is not inside the remark area.`);
+            return { id: hit.id, name: hit.name, type: hit.type };
+        });
+        return { kind: "area", box, elements };
+    }
+    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;
+        }
+        if (target.kind === "area")
+            return screenshotDesign(design, { region: target.box }).png;
+        throw new DesignError("A page remark has no capture.");
+    }
+    add(input) {
+        const text = requireText(input.text);
+        const target = this.resolveTarget(input.designId, input.target);
+        const id = shortId("rm");
+        const capture = input.capture && target.kind !== "page" ? `${id}.png` : null;
+        // Rendue hors verrou : la capture ne dépend que du design, et resvg peut
+        // prendre plus de temps qu'un autre écrivain n'en accepte d'attendre.
+        const png = capture ? this.renderCapture(input.designId, target) : null;
+        return this.mutate((draft) => {
+            if (target.kind === "page" &&
+                draft.remarks.some((remark) => remark.designId === input.designId && remark.status === "draft" && remark.target.kind === "page")) {
+                throw new DesignError("This page already has a remark on the whole page: edit it instead of adding another one.");
+            }
+            let number = null;
+            if (target.kind !== "page") {
+                number = (draft.lastNumbers[input.designId] ?? 0) + 1;
+                draft.lastNumbers[input.designId] = number;
+            }
+            if (capture && png)
+                fs.writeFileSync(this.capturePath(capture), png);
+            const now = new Date().toISOString();
+            const remark = {
+                id,
+                designId: input.designId,
+                number,
+                target,
+                text,
+                capture,
+                status: "draft",
+                round: null,
+                createdAt: now,
+                updatedAt: now,
+            };
+            draft.remarks.push(remark);
+            return remark;
+        });
+    }
+    draftOf(file, id) {
+        const remark = file.remarks.find((candidate) => candidate.id === id);
+        if (!remark)
+            throw new DesignError(`Remark "${id}" not found.`);
+        if (remark.status !== "draft") {
+            throw new DesignError(`Remark "${id}" was sent with feedback round ${remark.round}: it can no longer be edited.`);
+        }
+        return remark;
+    }
+    updateText(id, text) {
+        const value = requireText(text);
+        return this.mutate((draft) => {
+            const remark = this.draftOf(draft, id);
+            remark.text = value;
+            remark.updatedAt = new Date().toISOString();
+            return remark;
+        });
+    }
+    /**
+     * Retire une remarque de la liste. La capture d'un brouillon part avec lui ;
+     * celle d'une remarque transmise reste, le retour qui la contient la cite.
+     */
+    delete(id) {
+        const removed = this.mutate((draft) => {
+            const remark = draft.remarks.find((candidate) => candidate.id === id);
+            if (!remark)
+                throw new DesignError(`Remark "${id}" not found.`);
+            draft.remarks = draft.remarks.filter((candidate) => candidate.id !== id);
+            return remark;
+        });
+        if (removed.status === "draft" && removed.capture)
+            fs.rmSync(this.capturePath(removed.capture), { force: true });
+    }
+    /** Retire les remarques d'un design supprimé, selon la même règle que `delete`. */
+    deleteDesign(designId) {
+        const removed = this.mutate((draft) => {
+            const gone = draft.remarks.filter((remark) => remark.designId === designId);
+            draft.remarks = draft.remarks.filter((remark) => remark.designId !== designId);
+            delete draft.lastNumbers[designId];
+            return gone;
+        });
+        for (const remark of removed) {
+            if (remark.status === "draft" && remark.capture)
+                fs.rmSync(this.capturePath(remark.capture), { force: true });
+        }
+    }
+    /** Fige les brouillons choisis dans un nouveau retour nommé, et les marque transmis. */
+    submit(remarkIds, title) {
+        if (remarkIds.length === 0)
+            throw new DesignError("Select at least one remark to send.");
+        const name = requireTitle(title);
+        const names = new Map(this.designs.list().map((design) => [design.id, design.name]));
+        return this.mutate((draft) => {
+            const number = draft.rounds.length + 1;
+            const submittedAt = new Date().toISOString();
+            const selected = new Set(remarkIds);
+            const remarks = orderRemarks(draft.remarks.filter((remark) => selected.has(remark.id)));
+            for (const id of selected)
+                this.draftOf(draft, id);
+            const round = {
+                number,
+                title: name,
+                submittedAt,
+                remarks: remarks.map((remark) => {
+                    const designName = names.get(remark.designId);
+                    if (designName === undefined)
+                        throw new DesignError(`Design "${remark.designId}" of remark "${remark.id}" no longer exists.`);
+                    return {
+                        id: remark.id,
+                        designId: remark.designId,
+                        designName,
+                        number: remark.number,
+                        target: remark.target,
+                        text: remark.text,
+                        capture: remark.capture,
+                        processed: null,
+                    };
+                }),
+            };
+            for (const remark of remarks) {
+                remark.status = "sent";
+                remark.round = number;
+                remark.updatedAt = submittedAt;
+            }
+            draft.rounds.push(round);
+            return round;
+        });
+    }
+    roundOf(file, number) {
+        const round = file.rounds.find((candidate) => candidate.number === number);
+        if (!round)
+            throw new DesignError(`Feedback round ${number} not found. Rounds 1 to ${file.rounds.length} exist.`);
+        return round;
+    }
+    rename(number, title) {
+        const name = requireTitle(title);
+        return this.mutate((draft) => {
+            const round = this.roundOf(draft, number);
+            round.title = name;
+            return round;
+        });
+    }
+    /**
+     * Déclare des remarques d'un retour traitées, ou les rouvre. Une remarque
+     * déjà traitée reste inchangée ; une nouvelle note remplace l'ancienne et
+     * son auteur, en gardant la date d'origine.
+     */
+    setProcessed(input) {
+        const note = typeof input.note === "string" && input.note.trim() !== "" ? input.note.trim() : null;
+        return this.mutate((draft) => {
+            const round = this.roundOf(draft, input.round);
+            const ids = input.remarkIds ?? round.remarks.map((remark) => remark.id);
+            if (ids.length === 0)
+                throw new DesignError("Name at least one remark of the round.");
+            const targets = ids.map((id) => {
+                const remark = round.remarks.find((candidate) => candidate.id === id);
+                if (!remark)
+                    throw new DesignError(`Remark "${id}" is not part of feedback round ${round.number}.`);
+                return remark;
+            });
+            const at = new Date().toISOString();
+            for (const remark of targets) {
+                if (!input.processed) {
+                    remark.processed = null;
+                    continue;
+                }
+                // Une remarque déjà traitée le reste telle quelle, sauf nouvelle note :
+                // tout marquer d'un coup ne réattribue pas le travail de l'agent.
+                if (remark.processed && note === null)
+                    continue;
+                remark.processed = { at: remark.processed?.at ?? at, by: input.by, note };
+            }
+            return round;
+        });
+    }
+}

package/dist/src/core/file-lock.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sérialise un cycle lire-modifier-écrire entre processus. `wx` échoue si le
+ * fichier de verrou existe déjà : c'est l'opération atomique qui départage deux
+ * écrivains concurrents. Non réentrant — ne jamais appeler depuis `fn`.
+ *
+ * `subject` nomme la ressource dans le message d'erreur, p.ex. `Design "landing"`.
+ */
+export declare function withFileLock<T>(lockPath: string, subject: string, fn: () => T): T;

package/dist/src/core/file-lock.js

@@ -0,0 +1,61 @@
+import fs from "fs";
+import { DesignError } from "./node-factory.js";
+/** Au-delà de ce délai, un verrou est réputé abandonné (processus tué en cours d'écriture). */
+const LOCK_STALE_MS = 10_000;
+const LOCK_RETRY_MS = 25;
+const LOCK_TIMEOUT_MS = 5_000;
+/**
+ * Pause bloquante. Les stores sont entièrement synchrones — les rendre
+ * asynchrones pour l'attente d'un verrou contaminerait tous les appelants.
+ */
+function sleepSync(ms) {
+    Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+}
+/**
+ * Sérialise un cycle lire-modifier-écrire entre processus. `wx` échoue si le
+ * fichier de verrou existe déjà : c'est l'opération atomique qui départage deux
+ * écrivains concurrents. Non réentrant — ne jamais appeler depuis `fn`.
+ *
+ * `subject` nomme la ressource dans le message d'erreur, p.ex. `Design "landing"`.
+ */
+export function withFileLock(lockPath, subject, fn) {
+    const deadline = Date.now() + LOCK_TIMEOUT_MS;
+    let fd;
+    for (;;) {
+        try {
+            fd = fs.openSync(lockPath, "wx");
+            break;
+        }
+        catch (err) {
+            if (err.code !== "EEXIST")
+                throw err;
+            try {
+                // Un processus tué laisse son verrou derrière lui : passé le délai
+                // d'obsolescence on le casse, sinon la ressource serait bloquée à vie.
+                if (Date.now() - fs.statSync(lockPath).mtimeMs > LOCK_STALE_MS) {
+                    fs.unlinkSync(lockPath);
+                    continue;
+                }
+            }
+            catch {
+                continue; // Verrou disparu entre le open et le stat : on retente aussitôt.
+            }
+            if (Date.now() > deadline) {
+                throw new DesignError(`${subject} is being written by another editor and did not free up in ${LOCK_TIMEOUT_MS} ms. Try again in a moment.`);
+            }
+            sleepSync(LOCK_RETRY_MS);
+        }
+    }
+    try {
+        return fn();
+    }
+    finally {
+        fs.closeSync(fd);
+        try {
+            fs.unlinkSync(lockPath);
+        }
+        catch {
+            // Verrou déjà cassé pour obsolescence par un autre processus.
+        }
+    }
+}

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

@@ -1,4 +1,5 @@
 import type { Design } from "../../shared/schemas/design.schema.js";
+import type { Box } from "../../shared/tree.js";
 /**
  * Capture d'écran d'un design.
  *
@@ -12,6 +13,8 @@ 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é. */

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,35 @@ 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) {
+    const artboard = rasterize(regionToSvg(doc, artboardOf(doc)), 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;
+    // 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 source = svgSize(svg);
     if (!(source.width > 0) || !(source.height > 0)) {
         throw new Error("Nothing to capture: the requested area has no size.");
@@ -52,7 +77,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) : 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,108 @@ 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",
+    });
+});
 // Fichiers statiques de la SPA
 app.use("/assets/*", serveStatic({ root: path.relative(process.cwd(), absoluteStaticRoot) }));
 function getHtmlBaseHref(appPath) {