@imenam/mcp-design 1.0.1

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

@@ -0,0 +1,103 @@
+import { DesignNodeSchema } from "../../shared/schemas/design.schema.js";
+import { GROUP_DERIVED_FIELDS, NODE_DEFAULTS, NODE_GEOMETRY_FIELDS, NODE_STYLE_FIELDS, clampNodeSize, defaultNodeName, } from "../../shared/node-defaults.js";
+import { shortId } from "./ids.js";
+export class DesignError extends Error {
+}
+const GEOMETRY = NODE_GEOMETRY_FIELDS;
+const ALLOWED = NODE_STYLE_FIELDS;
+const DERIVED = GROUP_DERIVED_FIELDS;
+/** Champs geometriques réellement modifiables pour un type donné. */
+function geometryFieldsFor(type) {
+    return type === "group" ? GEOMETRY.filter((field) => !DERIVED.includes(field)) : GEOMETRY;
+}
+function readParentId(value) {
+    if (value === null)
+        return null;
+    if (typeof value === "string" && value.trim() !== "")
+        return value.trim();
+    throw new DesignError(`"parentId" must be the id of an existing group, or null for the root level.`);
+}
+function requireFiniteNumber(value, field) {
+    const num = typeof value === "number" ? value : Number(value);
+    if (!Number.isFinite(num)) {
+        throw new DesignError(`"${field}" must be a finite number (received: ${JSON.stringify(value)})`);
+    }
+    return num;
+}
+/**
+ * Construit un noeud complet et valide à partir d'une entrée partielle d'agent :
+ * seul `type` est obligatoire, tout le reste vient des valeurs par défaut, ce qui
+ * évite les noeuds invisibles (taille nulle, pas de remplissage).
+ *
+ * `existingIds` empêche une collision d'identifiants fournis explicitement.
+ */
+export function buildNode(input, existingIds, index) {
+    const type = input.type;
+    if (!type || !(type in NODE_DEFAULTS)) {
+        throw new DesignError(`Unknown node type "${String(input.type)}". Expected one of: rect, ellipse, line, text.`);
+    }
+    const id = typeof input.id === "string" && input.id.trim() !== "" ? input.id.trim() : shortId("n");
+    if (existingIds.has(id))
+        throw new DesignError(`Node id "${id}" already exists in this design.`);
+    const draft = {
+        id,
+        type,
+        name: typeof input.name === "string" && input.name.trim() !== "" ? input.name.trim() : defaultNodeName(type, index),
+        parentId: input.parentId === undefined ? null : readParentId(input.parentId),
+        x: 0,
+        y: 0,
+        rotation: 0,
+        opacity: 1,
+        ...NODE_DEFAULTS[type],
+    };
+    for (const field of geometryFieldsFor(type)) {
+        if (input[field] !== undefined)
+            draft[field] = requireFiniteNumber(input[field], field);
+    }
+    for (const field of ALLOWED[type]) {
+        if (input[field] !== undefined)
+            draft[field] = input[field];
+    }
+    const size = clampNodeSize(type, Number(draft.width), Number(draft.height));
+    draft.width = size.width;
+    draft.height = size.height;
+    const parsed = DesignNodeSchema.safeParse(draft);
+    if (!parsed.success) {
+        throw new DesignError(`Invalid node: ${parsed.error.issues.map((i) => `${i.path.join(".")} ${i.message}`).join("; ")}`);
+    }
+    return parsed.data;
+}
+/** Applique un patch partiel en ne conservant que les champs valides pour le type du noeud. */
+export function applyPatch(node, patch) {
+    const next = { ...node };
+    if (patch.name !== undefined) {
+        if (typeof patch.name !== "string" || patch.name.trim() === "") {
+            throw new DesignError(`"name" must be a non-empty string.`);
+        }
+        next.name = patch.name.trim();
+    }
+    if (patch.parentId !== undefined)
+        next.parentId = readParentId(patch.parentId);
+    for (const field of geometryFieldsFor(node.type)) {
+        if (patch[field] !== undefined)
+            next[field] = requireFiniteNumber(patch[field], field);
+    }
+    for (const field of ALLOWED[node.type]) {
+        if (patch[field] !== undefined)
+            next[field] = patch[field];
+    }
+    const editable = ["name", "parentId", ...geometryFieldsFor(node.type), ...ALLOWED[node.type]];
+    const unknownFields = Object.keys(patch).filter((key) => key !== "id" && !editable.includes(key));
+    if (unknownFields.length > 0) {
+        const derived = unknownFields.filter((key) => node.type === "group" && DERIVED.includes(key));
+        const reason = derived.length > 0 ? ` The size of a group is derived from its content and cannot be set.` : "";
+        throw new DesignError(`Field(s) [${unknownFields.join(", ")}] cannot be set on a "${node.type}" node.${reason} ` +
+            `Allowed: ${editable.join(", ")}.`);
+    }
+    const parsed = DesignNodeSchema.safeParse(next);
+    if (!parsed.success) {
+        throw new DesignError(`Invalid patch: ${parsed.error.issues.map((i) => `${i.path.join(".")} ${i.message}`).join("; ")}`);
+    }
+    return parsed.data;
+}
+export { NODE_DEFAULTS };

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

@@ -0,0 +1,31 @@
+import type { Design } from "../../shared/schemas/design.schema.js";
+/**
+ * Capture d'écran d'un design.
+ *
+ * Le rendu passe par le même SVG que `export_design` — donc par la même
+ * géométrie que le canvas de la GUI — puis est rasterisé par resvg. Pas de
+ * navigateur headless : l'outil doit rester utilisable depuis un serveur MCP
+ * lancé en stdio, sans dépendance système.
+ */
+/** Côté maximal du PNG produit : au-delà, l'image coûte du contexte sans rien apporter. */
+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;
+    /** 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;
+}
+export interface Screenshot {
+    png: Buffer;
+    /** Dimensions du PNG produit. */
+    width: number;
+    height: number;
+    /** Dimensions de la zone capturée, en pixels du design. */
+    sourceWidth: number;
+    sourceHeight: number;
+    scale: number;
+}
+export declare function screenshotDesign(design: Design, options?: ScreenshotOptions): Screenshot;

package/dist/src/core/screenshot.js

@@ -0,0 +1,53 @@
+import { Resvg } from "@resvg/resvg-js";
+import { documentToSvg, subtreeToSvg } from "../../shared/render.js";
+/**
+ * Capture d'écran d'un design.
+ *
+ * Le rendu passe par le même SVG que `export_design` — donc par la même
+ * géométrie que le canvas de la GUI — puis est rasterisé par resvg. Pas de
+ * navigateur headless : l'outil doit rester utilisable depuis un serveur MCP
+ * lancé en stdio, sans dépendance système.
+ */
+/** Côté maximal du PNG produit : au-delà, l'image coûte du contexte sans rien apporter. */
+export const DEFAULT_MAX_DIMENSION = 1568;
+function toDocument(design) {
+    return {
+        name: design.name,
+        width: design.width,
+        height: design.height,
+        background: design.background,
+        nodes: design.nodes,
+    };
+}
+/** Lit width/height du SVG produit, seule source fiable de la taille de la zone capturée. */
+function svgSize(svg) {
+    const width = Number(/\bwidth="([\d.]+)"/.exec(svg)?.[1] ?? 0);
+    const height = Number(/\bheight="([\d.]+)"/.exec(svg)?.[1] ?? 0);
+    return { width, height };
+}
+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 source = svgSize(svg);
+    if (!(source.width > 0) || !(source.height > 0)) {
+        throw new Error("Nothing to capture: the requested area has no size.");
+    }
+    const maxDimension = Math.max(1, options.maxDimension ?? DEFAULT_MAX_DIMENSION);
+    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 resvg = new Resvg(svg, {
+        fitTo: { mode: "zoom", value: scale },
+        font: { loadSystemFonts: true, defaultFontFamily: "Segoe UI", sansSerifFamily: "Segoe UI" },
+    });
+    const rendered = resvg.render();
+    return {
+        png: Buffer.from(rendered.asPng()),
+        width: rendered.width,
+        height: rendered.height,
+        sourceWidth: source.width,
+        sourceHeight: source.height,
+        scale,
+    };
+}

package/dist/src/gui-worker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/gui-worker.js

@@ -0,0 +1,334 @@
+import { serve } from "@hono/node-server";
+import { serveStatic } from "@hono/node-server/serve-static";
+import { Hono } from "hono";
+import { streamSSE } from "hono/streaming";
+import { ProxyClient, createLogger, setupLogging } from "@imenam/mcp-gui-interface";
+import path from "path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+import { IPCMessageSchema } from "../shared/schemas/design.schema.js";
+import { resolveLogDir } from "./core/log-dir.js";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+function findProjectRoot(startDir) {
+    let current = startDir;
+    while (current !== path.dirname(current)) {
+        if (fs.existsSync(path.join(current, "gui")) || fs.existsSync(path.join(current, "package.json")))
+            return current;
+        current = path.dirname(current);
+    }
+    return startDir;
+}
+const rootDir = findProjectRoot(__dirname);
+const absoluteStaticRoot = path.resolve(path.join(rootDir, "gui/dist"));
+const configuredAppPath = process.env.APP_PATH || "/design-gui";
+setupLogging({ processLabel: "mcp-design:GUI", logDir: resolveLogDir(rootDir) });
+const logger = createLogger("mcp-design:GUI");
+process.on("uncaughtException", (err) => {
+    logger.error(`Uncaught Exception: ${err.message}`);
+    logger.error(err.stack || "No stack trace");
+    process.exit(1);
+});
+process.on("unhandledRejection", (reason) => {
+    logger.error(`Unhandled Rejection: ${reason}`);
+    process.exit(1);
+});
+// Le master peut disparaître sans que l'évènement `disconnect` ne parvienne au
+// worker (cas Windows). Deux garde-fous complémentaires : le canal IPC, qui se
+// ferme dès que le parent meurt, et le PID parent en dernier recours — les PID
+// étant recyclés sous Windows, le premier est le plus fiable des deux.
+const parentPid = process.ppid;
+const parentCheckInterval = setInterval(() => {
+    if (!process.connected) {
+        logger.info("IPC channel to the MCP master is closed. Exiting.");
+        clearInterval(parentCheckInterval);
+        process.exit(0);
+        return;
+    }
+    try {
+        process.kill(parentPid, 0);
+    }
+    catch {
+        logger.info(`Parent process (PID ${parentPid}) is gone. Exiting.`);
+        clearInterval(parentCheckInterval);
+        process.exit(0);
+    }
+}, 2000);
+const app = new Hono();
+let proxyClient = null;
+const sseControllers = new Set();
+const pendingRequests = new Map();
+function safeSend(message) {
+    if (process.send && process.connected) {
+        try {
+            return process.send(message);
+        }
+        catch (err) {
+            logger.error(`[IPC] Failed to send message: ${err.message}`);
+            return false;
+        }
+    }
+    return false;
+}
+/** Requête IPC vers le master. Ne rejette jamais : un timeout devient une réponse d'erreur. */
+function ipcRequest(type, data, timeout = 5000) {
+    const correlationId = Math.random().toString(36).substring(7);
+    const message = { type, correlationId, data, timestamp: new Date().toISOString() };
+    return new Promise((resolve) => {
+        const timer = setTimeout(() => {
+            if (pendingRequests.has(correlationId)) {
+                pendingRequests.delete(correlationId);
+                resolve({ error: "Request timed out" });
+            }
+        }, timeout);
+        pendingRequests.set(correlationId, (msg) => {
+            clearTimeout(timer);
+            resolve(msg);
+        });
+        if (!safeSend(message)) {
+            clearTimeout(timer);
+            pendingRequests.delete(correlationId);
+            resolve({ error: "IPC not available" });
+        }
+    });
+}
+const PUSHED_EVENTS = new Set(["INITIAL_STATE", "DESIGNS_UPDATED", "DESIGN_UPDATED"]);
+function setupIpcErrorHandlers() {
+    process.on("error", (err) => {
+        if (err.code === "ERR_IPC_CHANNEL_CLOSED")
+            return;
+        logger.error(`Process error: ${err.message}`);
+    });
+    process.on("disconnect", () => {
+        logger.warn("IPC disconnected from MCP master. GUI worker will exit; EventSource clients will show Disconnected.");
+        process.exit(0);
+    });
+    process.on("message", (msg) => {
+        if (msg && msg.correlationId && pendingRequests.has(msg.correlationId)) {
+            const resolve = pendingRequests.get(msg.correlationId);
+            pendingRequests.delete(msg.correlationId);
+            resolve(msg);
+            return;
+        }
+        if (msg && msg.type === "GET_HEALTH") {
+            const memory = process.memoryUsage();
+            safeSend({
+                type: "HEALTH_RESPONSE",
+                correlationId: msg.correlationId,
+                data: { status: "ok", uptime: process.uptime(), memory: { rss: memory.rss, heapUsed: memory.heapUsed } },
+                timestamp: new Date().toISOString(),
+            });
+            return;
+        }
+        if (msg && PUSHED_EVENTS.has(msg.type)) {
+            for (const controller of sseControllers) {
+                try {
+                    controller.writeSSE({ data: JSON.stringify(msg), event: "message" });
+                }
+                catch {
+                    sseControllers.delete(controller);
+                }
+            }
+        }
+    });
+}
+// --- Routes HTTP ------------------------------------------------------------
+app.get("/proxy/health", (c) => {
+    const memory = process.memoryUsage();
+    return c.json({
+        status: "ok",
+        proxy: proxyClient ? proxyClient.getStatus() : process.env.PROXY_URL ? "error" : "standalone",
+        uptime: process.uptime(),
+        memory: { rss: memory.rss, heapUsed: memory.heapUsed },
+        ipc: process.connected ? "connected" : "disconnected",
+        timestamp: new Date().toISOString(),
+    });
+});
+app.get("/api/events", (c) => streamSSE(c, async (stream) => {
+    const clientId = Math.random().toString(36).slice(2, 11);
+    sseControllers.add(stream);
+    logger.info(`SSE /api/events: client connected (id=${clientId})`);
+    stream.onAbort(() => {
+        sseControllers.delete(stream);
+        logger.warn(`SSE /api/events: stream aborted (id=${clientId}).`);
+    });
+    if (!safeSend({ type: "GET_INITIAL_STATE", timestamp: new Date().toISOString() })) {
+        logger.warn(`SSE /api/events: GET_INITIAL_STATE not sent (id=${clientId}) — IPC unavailable.`);
+    }
+    try {
+        await stream.writeSSE({ data: "connected", event: "ping" });
+    }
+    catch (err) {
+        logger.warn(`SSE /api/events: initial writeSSE failed (id=${clientId}): ${err?.message ?? err}`);
+        sseControllers.delete(stream);
+        return;
+    }
+    while (true) {
+        await stream.sleep(30000);
+        try {
+            await stream.writeSSE({ data: "ping", event: "ping" });
+        }
+        catch (err) {
+            logger.warn(`SSE /api/events: keepalive ping failed (id=${clientId}): ${err?.message ?? err}`);
+            sseControllers.delete(stream);
+            break;
+        }
+    }
+}));
+app.post("/api/client-diagnostics", async (c) => {
+    try {
+        logger.warn(`Client diagnostics (SSE/EventSource): ${JSON.stringify(await c.req.json())}`);
+    }
+    catch (e) {
+        logger.warn(`Client diagnostics: invalid JSON body (${e?.message ?? e})`);
+    }
+    return c.json({ ok: true });
+});
+app.get("/api/config", async (c) => {
+    const result = await ipcRequest("GET_CONFIG");
+    if (result.error)
+        return c.json({ error: result.error }, 500);
+    return c.json(result.data);
+});
+app.get("/api/designs", async (c) => {
+    const result = await ipcRequest("LIST_DESIGNS");
+    if (result.error)
+        return c.json({ error: result.error }, 500);
+    return c.json(result.data.designs);
+});
+app.post("/api/designs", async (c) => {
+    let body = {};
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        // Corps facultatif : la GUI peut créer un design avec les valeurs par défaut.
+    }
+    const result = await ipcRequest("CREATE_DESIGN", body, 10000);
+    if (result.error)
+        return c.json({ error: result.error }, 400);
+    return c.json(result.data);
+});
+app.get("/api/designs/:id", async (c) => {
+    const result = await ipcRequest("GET_DESIGN", { id: c.req.param("id") });
+    if (result.error)
+        return c.json({ error: result.error }, 404);
+    return c.json(result.data);
+});
+app.put("/api/designs/:id", async (c) => {
+    let body;
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    const result = await ipcRequest("SAVE_DESIGN", { ...body, id: c.req.param("id") }, 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)
+        return c.json({ error: result.error }, 404);
+    return c.json(result.data);
+});
+// Fichiers statiques de la SPA
+app.use("/assets/*", serveStatic({ root: path.relative(process.cwd(), absoluteStaticRoot) }));
+function getHtmlBaseHref(appPath) {
+    const normalized = appPath.startsWith("/") ? appPath : `/${appPath}`;
+    return normalized.endsWith("/") ? normalized : `${normalized}/`;
+}
+// Fallback SPA
+app.get("/*", (c, next) => {
+    const urlPath = c.req.path;
+    if (urlPath.startsWith("/api") || urlPath.startsWith("/proxy") || urlPath.startsWith("/assets"))
+        return next();
+    try {
+        const indexPath = path.join(absoluteStaticRoot, "index.html");
+        if (fs.existsSync(indexPath)) {
+            // ?__direct=1 : accès au worker sur son port local, sans passer par le
+            // proxy — le préfixe de montage ne doit alors pas préfixer les assets.
+            const baseHref = c.req.query("__direct") === "1" ? "/" : getHtmlBaseHref(configuredAppPath);
+            const html = fs.readFileSync(indexPath, "utf8").replace("<head>", `<head>\n    <base href="${baseHref}" />`);
+            return c.html(html);
+        }
+        return c.text("GUI build not found at " + absoluteStaticRoot, 404);
+    }
+    catch {
+        return next();
+    }
+});
+async function startServer() {
+    if (!process.env.PROXY_URL) {
+        process.stderr.write("[GUI] PROXY_URL non défini — arrêt.\n");
+        process.exit(0);
+    }
+    const proxyUrl = process.env.PROXY_URL;
+    const appPath = configuredAppPath;
+    const appName = process.env.APP_NAME || "MCP Design";
+    logger.info(`Starting server with proxyUrl=${proxyUrl}`);
+    proxyClient = new ProxyClient(proxyUrl);
+    let result;
+    try {
+        // APP_GROUP place la GUI dans une section repliable du proxy (facultatif).
+        const registerOptions = { path: appPath, name: appName, group: process.env.APP_GROUP };
+        result = await proxyClient.register(registerOptions);
+    }
+    catch (e) {
+        process.stderr.write("[GUI] Enregistrement proxy échoué — arrêt.\n");
+        logger.error(`Proxy registration error: ${e.message}`);
+        process.exit(1);
+        return;
+    }
+    if (result.error === "HTTP 409") {
+        logger.info("Another GUI instance already registered.");
+        safeSend(IPCMessageSchema.parse({
+            type: "ALREADY_RUNNING",
+            data: { url: `${proxyUrl}${appPath}` },
+            timestamp: new Date().toISOString(),
+        }));
+        process.exit(0);
+        return;
+    }
+    if (!result.success) {
+        process.stderr.write("[GUI] Enregistrement proxy échoué — arrêt.\n");
+        logger.error(`Proxy registration failed: ${result.error}`);
+        process.exit(1);
+        return;
+    }
+    const finalPort = result.port;
+    const publicUrl = result.url || `${proxyUrl}${appPath}`;
+    logger.info(`Registered with proxy. Public URL: ${publicUrl}, Local Port: ${finalPort}`);
+    const cleanupProxy = async () => {
+        if (proxyClient)
+            await proxyClient.unregister();
+        process.exit(0);
+    };
+    process.on("SIGTERM", cleanupProxy);
+    process.on("SIGINT", cleanupProxy);
+    setupIpcErrorHandlers();
+    const serverInstance = serve({ fetch: app.fetch, port: finalPort, hostname: "0.0.0.0" }, (info) => {
+        logger.info(`Design canvas server listening on port ${info.port}`);
+        safeSend(IPCMessageSchema.parse({
+            type: "READY",
+            data: { port: info.port, isProxied: true, url: publicUrl },
+            timestamp: new Date().toISOString(),
+        }));
+    });
+    serverInstance.on("error", (err) => {
+        if (err.code === "EADDRINUSE") {
+            // Sortie propre (code 0) : le master ne doit pas relancer un worker de plus.
+            logger.error(`Port ${finalPort} already in use — another GUI instance is running.`);
+            process.exit(0);
+        }
+        logger.error(`Server error: ${err.message}`);
+        process.exit(1);
+    });
+}
+startServer().catch((err) => {
+    logger.error(`Failed to start GUI Worker: ${err.message}`);
+    if (err.stack)
+        logger.error(err.stack);
+    process.exit(1);
+});

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};