@imenam/mcp-design 1.0.1

package/dist/shared/render.js

@@ -0,0 +1,215 @@
+/**
+ * Rendu SVG d'un noeud, partagé entre l'exporteur (côté serveur) et le canvas
+ * de la GUI (côté navigateur). Une seule implémentation : ce que l'utilisateur
+ * voit à l'écran est exactement ce que `export_design` produit.
+ *
+ * Ce module ne dépend volontairement d'aucune librairie (pas de zod) pour rester
+ * importable depuis le bundle GUI.
+ */
+import { boundsOf, childrenByParent, computeLayout, normalizedBox, spaceOriginOf } from "./tree.js";
+// La géométrie de base vit dans tree.ts (module bas-niveau, sans dépendance vers
+// celui-ci) ; elle reste exposée ici pour tous les appelants existants.
+export { normalizedBox };
+export function escapeXml(value) {
+    return value
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&apos;");
+}
+function round(value) {
+    return Math.round(value * 100) / 100;
+}
+export function nodeCenter(node) {
+    const box = normalizedBox(node);
+    return { cx: box.x + box.width / 2, cy: box.y + box.height / 2 };
+}
+/** Transform SVG de rotation autour du centre de la boîte, ou "" si pas de rotation. */
+export function rotationTransform(node) {
+    if (!node.rotation)
+        return "";
+    const { cx, cy } = nodeCenter(node);
+    return `rotate(${round(node.rotation)} ${round(cx)} ${round(cy)})`;
+}
+/**
+ * Le texte n'est pas re-wrappé automatiquement : seuls les retours à la ligne
+ * explicites créent une nouvelle ligne. Comportement prévisible pour l'agent
+ * comme pour l'utilisateur, et identique à l'export.
+ */
+export function textLines(node) {
+    return (node.text ?? "").split("\n");
+}
+export const DEFAULT_FONT_FAMILY = "Inter, system-ui, sans-serif";
+export const DEFAULT_FONT_SIZE = 24;
+/**
+ * Interligne appliqué quand `lineHeight` est absent, exprimé en multiple de la
+ * taille de police. C'est le seul endroit où un ratio subsiste : le champ
+ * stocké, lui, est toujours en pixels.
+ */
+export const DEFAULT_LINE_HEIGHT_RATIO = 1.35;
+/**
+ * En dessous de ce seuil, une valeur d'interligne ne peut pas être des pixels :
+ * 4px d'interligne écraserait n'importe quel texte lisible. C'est donc un ratio
+ * — refusé à l'écriture, converti à la lecture des anciens fichiers.
+ */
+export const MIN_LINE_HEIGHT_PX = 4;
+/** Interligne par défaut, en pixels, pour une taille de police donnée. */
+export function defaultLineHeight(fontSize) {
+    return Math.round(fontSize * DEFAULT_LINE_HEIGHT_RATIO * 100) / 100;
+}
+export function textMetrics(node) {
+    const fontSize = node.fontSize ?? DEFAULT_FONT_SIZE;
+    // `lineHeight` est une distance en pixels entre deux lignes de base, pas un
+    // multiplicateur : c'est l'unité que l'agent emploie spontanément, et la
+    // seule qui se lise directement dans la même échelle que x, y et fontSize.
+    const lineStep = node.lineHeight ?? defaultLineHeight(fontSize);
+    return {
+        fontSize,
+        lineStep,
+        /** Ligne de base de la première ligne, mesurée depuis le haut de la boîte. */
+        firstBaseline: lineStep * 0.5 + fontSize * 0.36,
+        anchor: node.textAlign === "center" ? "middle" : node.textAlign === "right" ? "end" : "start",
+        anchorX: node.textAlign === "center"
+            ? node.x + node.width / 2
+            : node.textAlign === "right"
+                ? node.x + node.width
+                : node.x,
+    };
+}
+/** Hauteur minimale nécessaire pour afficher tout le texte du noeud. */
+export function measuredTextHeight(node) {
+    const { lineStep } = textMetrics(node);
+    return Math.max(lineStep, textLines(node).length * lineStep);
+}
+function shapeAttributes(node) {
+    const parts = [];
+    if (node.type !== "line" && node.type !== "text") {
+        parts.push(`fill="${escapeXml(node.fill ?? "none")}"`);
+    }
+    if (node.stroke && (node.strokeWidth ?? 0) > 0) {
+        parts.push(`stroke="${escapeXml(node.stroke)}"`, `stroke-width="${round(node.strokeWidth ?? 1)}"`);
+    }
+    return parts.join(" ");
+}
+/**
+ * Transform SVG d'un groupe : translation vers son origine, puis rotation
+ * autour du centre de son contenu (exprime dans l'espace local du groupe).
+ */
+export function groupTransform(node, localCenter) {
+    const parts = [`translate(${round(node.x)} ${round(node.y)})`];
+    if (node.rotation)
+        parts.push(`rotate(${round(node.rotation)} ${round(localCenter.cx)} ${round(localCenter.cy)})`);
+    return parts.join(" ");
+}
+/**
+ * Markup SVG d'un seul noeud, sans wrapper — utilisé par l'export et par le canvas.
+ * Un groupe ne produit rien par lui-meme : c'est un conteneur, rendu par
+ * `documentToSvg` (serveur) ou par le canvas (navigateur).
+ */
+export function nodeToSvg(node) {
+    if (node.type === "group")
+        return "";
+    const transform = rotationTransform(node);
+    const transformAttr = transform ? ` transform="${transform}"` : "";
+    const opacityAttr = node.opacity >= 1 ? "" : ` opacity="${round(node.opacity)}"`;
+    const box = normalizedBox(node);
+    switch (node.type) {
+        case "rect": {
+            const radius = Math.max(0, Math.min(node.radius ?? 0, Math.min(box.width, box.height) / 2));
+            return (`<rect x="${round(box.x)}" y="${round(box.y)}" width="${round(box.width)}" height="${round(box.height)}"` +
+                (radius > 0 ? ` rx="${round(radius)}" ry="${round(radius)}"` : "") +
+                ` ${shapeAttributes(node)}${opacityAttr}${transformAttr} />`);
+        }
+        case "ellipse": {
+            return (`<ellipse cx="${round(box.x + box.width / 2)}" cy="${round(box.y + box.height / 2)}"` +
+                ` rx="${round(box.width / 2)}" ry="${round(box.height / 2)}"` +
+                ` ${shapeAttributes(node)}${opacityAttr}${transformAttr} />`);
+        }
+        case "line": {
+            return (`<line x1="${round(node.x)}" y1="${round(node.y)}" x2="${round(node.x + node.width)}" y2="${round(node.y + node.height)}"` +
+                ` ${shapeAttributes(node)} stroke-linecap="round"${opacityAttr}${transformAttr} />`);
+        }
+        case "text": {
+            const m = textMetrics(node);
+            const lines = textLines(node);
+            const tspans = lines
+                .map((line, index) => `<tspan x="${round(m.anchorX)}" y="${round(node.y + m.firstBaseline + index * m.lineStep)}">` +
+                `${escapeXml(line === "" ? " " : line)}</tspan>`)
+                .join("");
+            return (`<text font-family="${escapeXml(node.fontFamily ?? DEFAULT_FONT_FAMILY)}" font-size="${round(m.fontSize)}"` +
+                ` font-weight="${node.fontWeight ?? 400}" font-style="${node.fontStyle ?? "normal"}"` +
+                ` fill="${escapeXml(node.color ?? "#000000")}" text-anchor="${m.anchor}"` +
+                ` xml:space="preserve"${opacityAttr}${transformAttr}>${tspans}</text>`);
+        }
+    }
+}
+/**
+ * Rend une liste de noeuds frères, en descendant récursivement dans les groupes.
+ * Partagé par le rendu plein document et le rendu cadré sur un seul élément.
+ */
+function renderSiblings(nodes, children, layout, depth) {
+    const pad = "  ".repeat(depth + 1);
+    return nodes.flatMap((node) => {
+        if (node.type !== "group")
+            return [`${pad}${nodeToSvg(node)}`];
+        const bounds = boundsOf(layout, node.id);
+        const origin = layout.origin.get(node.id) ?? { x: 0, y: 0 };
+        const center = { cx: bounds.x + bounds.width / 2 - origin.x, cy: bounds.y + bounds.height / 2 - origin.y };
+        const opacity = node.opacity >= 1 ? "" : ` opacity="${round(node.opacity)}"`;
+        return [
+            `${pad}<g transform="${groupTransform(node, center)}"${opacity}>`,
+            ...renderSiblings(children.get(node.id) ?? [], children, layout, depth + 1),
+            `${pad}</g>`,
+        ];
+    });
+}
+export function documentToSvg(doc) {
+    const layout = computeLayout(doc.nodes);
+    const children = childrenByParent(doc.nodes);
+    // Un groupe devient un <g> : ses enfants gardent leurs coordonnées locales,
+    // c'est la transformation du conteneur qui les place.
+    const body = renderSiblings(children.get(null) ?? [], children, layout, 0).join("\n");
+    return (`<svg xmlns="http://www.w3.org/2000/svg" width="${doc.width}" height="${doc.height}" ` +
+        `viewBox="0 0 ${doc.width} ${doc.height}">\n` +
+        `  <rect x="0" y="0" width="${doc.width}" height="${doc.height}" fill="${escapeXml(doc.background)}" />\n` +
+        (body ? `${body}\n` : "") +
+        `</svg>`);
+}
+/**
+ * SVG cadré sur un seul élément — l'élément et son contenu, rien d'autre.
+ *
+ * Le sous-arbre est rendu dans ses coordonnées locales, puis translaté vers sa
+ * position document : le viewBox peut alors être exprimé dans le même repère
+ * que `computeLayout`, donc directement sur la boîte englobante de l'élément.
+ */
+export function subtreeToSvg(doc, nodeId, padding = 0) {
+    const node = doc.nodes.find((candidate) => candidate.id === nodeId);
+    if (!node)
+        throw new Error(`Node "${nodeId}" not found in design "${doc.name}".`);
+    const layout = computeLayout(doc.nodes);
+    const children = childrenByParent(doc.nodes);
+    const bounds = boundsOf(layout, nodeId);
+    const region = {
+        x: bounds.x - padding,
+        y: bounds.y - padding,
+        // Un groupe vide (ou un trait purement horizontal) a une dimension nulle :
+        // on garde au moins 1px pour que le PNG produit reste valide.
+        width: Math.max(1, bounds.width + padding * 2),
+        height: Math.max(1, bounds.height + padding * 2),
+    };
+    // Un groupe est rendu par son contenu, dans le repère du groupe ; tout autre
+    // noeud est rendu tel quel, dans le repère de son parent.
+    const origin = node.type === "group" ? (layout.origin.get(nodeId) ?? { x: 0, y: 0 }) : spaceOriginOf(layout, node.parentId);
+    const inner = node.type === "group"
+        ? renderSiblings([{ ...node, x: 0, y: 0 }], children, layout, 1).join("\n")
+        : `    ${nodeToSvg(node)}`;
+    return (`<svg xmlns="http://www.w3.org/2000/svg" width="${round(region.width)}" height="${round(region.height)}" ` +
+        `viewBox="${round(region.x)} ${round(region.y)} ${round(region.width)} ${round(region.height)}">\n` +
+        `  <rect x="${round(region.x)}" y="${round(region.y)}" width="${round(region.width)}" ` +
+        `height="${round(region.height)}" fill="${escapeXml(doc.background)}" />\n` +
+        `  <g transform="translate(${round(origin.x)} ${round(origin.y)})">\n` +
+        (inner ? `${inner}\n` : "") +
+        `  </g>\n` +
+        `</svg>`);
+}

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

@@ -0,0 +1,231 @@
+import { z } from "zod";
+/**
+ * Modèle de données du canvas.
+ *
+ * Un `Design` est une planche (artboard) unique contenant une liste plate de
+ * noeuds. La liste est ordonnée : l'index = l'ordre d'empilement parmi les
+ * noeuds de meme parent (le dernier est au-dessus). C'est `reorder_nodes` — et
+ * le panneau de calques de la GUI — qui manipule cet ordre.
+ *
+ * **Toutes les longueurs sont en pixels** (x, y, width, height, strokeWidth,
+ * radius, fontSize, lineHeight), les angles en degres et l'opacite entre 0 et 1.
+ *
+ * La hierarchie est portee par `parentId` plutot que par de l'imbrication : le
+ * stockage reste plat, donc diffable et lisible, tandis que les coordonnees
+ * d'un noeud sont exprimees dans l'espace de son parent.
+ */
+export declare const NODE_TYPES: readonly ["rect", "ellipse", "line", "text", "group"];
+export declare const NodeTypeSchema: z.ZodEnum<{
+    ellipse: "ellipse";
+    group: "group";
+    line: "line";
+    rect: "rect";
+    text: "text";
+}>;
+export type NodeType = z.infer<typeof NodeTypeSchema>;
+export declare const TEXT_ALIGNS: readonly ["left", "center", "right"];
+export declare const TextAlignSchema: z.ZodEnum<{
+    center: "center";
+    left: "left";
+    right: "right";
+}>;
+/**
+ * Un seul schéma pour tous les types de noeuds : les champs non pertinents pour
+ * un type donné sont simplement absents. Un schéma discriminé obligerait l'agent
+ * à connaître quatre formes différentes pour un gain nul côté rendu.
+ */
+export declare const DesignNodeSchema: z.ZodObject<{
+    id: z.ZodString;
+    type: z.ZodEnum<{
+        ellipse: "ellipse";
+        group: "group";
+        line: "line";
+        rect: "rect";
+        text: "text";
+    }>;
+    name: z.ZodString;
+    parentId: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+    x: z.ZodNumber;
+    y: z.ZodNumber;
+    width: z.ZodNumber;
+    height: z.ZodNumber;
+    rotation: z.ZodDefault<z.ZodNumber>;
+    opacity: z.ZodDefault<z.ZodNumber>;
+    fill: z.ZodOptional<z.ZodString>;
+    stroke: z.ZodOptional<z.ZodString>;
+    strokeWidth: z.ZodOptional<z.ZodNumber>;
+    radius: z.ZodOptional<z.ZodNumber>;
+    text: z.ZodOptional<z.ZodString>;
+    color: z.ZodOptional<z.ZodString>;
+    fontSize: z.ZodOptional<z.ZodNumber>;
+    fontFamily: z.ZodOptional<z.ZodString>;
+    fontWeight: z.ZodOptional<z.ZodNumber>;
+    fontStyle: z.ZodOptional<z.ZodEnum<{
+        italic: "italic";
+        normal: "normal";
+    }>>;
+    textAlign: z.ZodOptional<z.ZodEnum<{
+        center: "center";
+        left: "left";
+        right: "right";
+    }>>;
+    lineHeight: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;
+export type DesignNode = z.infer<typeof DesignNodeSchema>;
+/** Snapshot servant de référence au calcul de `get_changes`. */
+export declare const BaselineSchema: z.ZodObject<{
+    revision: z.ZodNumber;
+    at: z.ZodString;
+    nodes: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        type: z.ZodEnum<{
+            ellipse: "ellipse";
+            group: "group";
+            line: "line";
+            rect: "rect";
+            text: "text";
+        }>;
+        name: z.ZodString;
+        parentId: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+        x: z.ZodNumber;
+        y: z.ZodNumber;
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+        rotation: z.ZodDefault<z.ZodNumber>;
+        opacity: z.ZodDefault<z.ZodNumber>;
+        fill: z.ZodOptional<z.ZodString>;
+        stroke: z.ZodOptional<z.ZodString>;
+        strokeWidth: z.ZodOptional<z.ZodNumber>;
+        radius: z.ZodOptional<z.ZodNumber>;
+        text: z.ZodOptional<z.ZodString>;
+        color: z.ZodOptional<z.ZodString>;
+        fontSize: z.ZodOptional<z.ZodNumber>;
+        fontFamily: z.ZodOptional<z.ZodString>;
+        fontWeight: z.ZodOptional<z.ZodNumber>;
+        fontStyle: z.ZodOptional<z.ZodEnum<{
+            italic: "italic";
+            normal: "normal";
+        }>>;
+        textAlign: z.ZodOptional<z.ZodEnum<{
+            center: "center";
+            left: "left";
+            right: "right";
+        }>>;
+        lineHeight: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
+export type Baseline = z.infer<typeof BaselineSchema>;
+export declare const DesignSchema: z.ZodObject<{
+    id: z.ZodString;
+    name: z.ZodString;
+    width: z.ZodNumber;
+    height: z.ZodNumber;
+    background: z.ZodString;
+    nodes: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        type: z.ZodEnum<{
+            ellipse: "ellipse";
+            group: "group";
+            line: "line";
+            rect: "rect";
+            text: "text";
+        }>;
+        name: z.ZodString;
+        parentId: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+        x: z.ZodNumber;
+        y: z.ZodNumber;
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+        rotation: z.ZodDefault<z.ZodNumber>;
+        opacity: z.ZodDefault<z.ZodNumber>;
+        fill: z.ZodOptional<z.ZodString>;
+        stroke: z.ZodOptional<z.ZodString>;
+        strokeWidth: z.ZodOptional<z.ZodNumber>;
+        radius: z.ZodOptional<z.ZodNumber>;
+        text: z.ZodOptional<z.ZodString>;
+        color: z.ZodOptional<z.ZodString>;
+        fontSize: z.ZodOptional<z.ZodNumber>;
+        fontFamily: z.ZodOptional<z.ZodString>;
+        fontWeight: z.ZodOptional<z.ZodNumber>;
+        fontStyle: z.ZodOptional<z.ZodEnum<{
+            italic: "italic";
+            normal: "normal";
+        }>>;
+        textAlign: z.ZodOptional<z.ZodEnum<{
+            center: "center";
+            left: "left";
+            right: "right";
+        }>>;
+        lineHeight: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
+    createdAt: z.ZodString;
+    updatedAt: z.ZodString;
+    revision: z.ZodNumber;
+    lastEditor: z.ZodEnum<{
+        agent: "agent";
+        user: "user";
+    }>;
+    baseline: z.ZodObject<{
+        revision: z.ZodNumber;
+        at: z.ZodString;
+        nodes: z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            type: z.ZodEnum<{
+                ellipse: "ellipse";
+                group: "group";
+                line: "line";
+                rect: "rect";
+                text: "text";
+            }>;
+            name: z.ZodString;
+            parentId: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+            x: z.ZodNumber;
+            y: z.ZodNumber;
+            width: z.ZodNumber;
+            height: z.ZodNumber;
+            rotation: z.ZodDefault<z.ZodNumber>;
+            opacity: z.ZodDefault<z.ZodNumber>;
+            fill: z.ZodOptional<z.ZodString>;
+            stroke: z.ZodOptional<z.ZodString>;
+            strokeWidth: z.ZodOptional<z.ZodNumber>;
+            radius: z.ZodOptional<z.ZodNumber>;
+            text: z.ZodOptional<z.ZodString>;
+            color: z.ZodOptional<z.ZodString>;
+            fontSize: z.ZodOptional<z.ZodNumber>;
+            fontFamily: z.ZodOptional<z.ZodString>;
+            fontWeight: z.ZodOptional<z.ZodNumber>;
+            fontStyle: z.ZodOptional<z.ZodEnum<{
+                italic: "italic";
+                normal: "normal";
+            }>>;
+            textAlign: z.ZodOptional<z.ZodEnum<{
+                center: "center";
+                left: "left";
+                right: "right";
+            }>>;
+            lineHeight: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+    }, z.core.$strip>;
+}, z.core.$strip>;
+export type Design = z.infer<typeof DesignSchema>;
+export interface DesignSummary {
+    id: string;
+    name: string;
+    width: number;
+    height: number;
+    nodeCount: number;
+    updatedAt: string;
+    revision: number;
+    lastEditor: "agent" | "user";
+    /** Nombre de noeuds ajoutés/modifiés/supprimés depuis le dernier mark_synced. */
+    pendingChanges: number;
+}
+/** Enveloppe IPC commune Master <-> GUI Worker (même contrat que les autres MCPs). */
+export declare const IPCMessageSchema: z.ZodObject<{
+    type: z.ZodString;
+    correlationId: z.ZodOptional<z.ZodString>;
+    data: z.ZodOptional<z.ZodAny>;
+    error: z.ZodOptional<z.ZodString>;
+    timestamp: z.ZodString;
+}, z.core.$strip>;
+export type IPCMessage = z.infer<typeof IPCMessageSchema>;

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

@@ -0,0 +1,98 @@
+import { z } from "zod";
+import { MIN_LINE_HEIGHT_PX } from "../render.js";
+import { NODE_FIELD_DOCS } from "../node-fields.js";
+/**
+ * Modèle de données du canvas.
+ *
+ * Un `Design` est une planche (artboard) unique contenant une liste plate de
+ * noeuds. La liste est ordonnée : l'index = l'ordre d'empilement parmi les
+ * noeuds de meme parent (le dernier est au-dessus). C'est `reorder_nodes` — et
+ * le panneau de calques de la GUI — qui manipule cet ordre.
+ *
+ * **Toutes les longueurs sont en pixels** (x, y, width, height, strokeWidth,
+ * radius, fontSize, lineHeight), les angles en degres et l'opacite entre 0 et 1.
+ *
+ * La hierarchie est portee par `parentId` plutot que par de l'imbrication : le
+ * stockage reste plat, donc diffable et lisible, tandis que les coordonnees
+ * d'un noeud sont exprimees dans l'espace de son parent.
+ */
+export const NODE_TYPES = ["rect", "ellipse", "line", "text", "group"];
+export const NodeTypeSchema = z.enum(NODE_TYPES);
+export const TEXT_ALIGNS = ["left", "center", "right"];
+export const TextAlignSchema = z.enum(TEXT_ALIGNS);
+/**
+ * Un seul schéma pour tous les types de noeuds : les champs non pertinents pour
+ * un type donné sont simplement absents. Un schéma discriminé obligerait l'agent
+ * à connaître quatre formes différentes pour un gain nul côté rendu.
+ */
+export const DesignNodeSchema = z.object({
+    id: z.string().describe(NODE_FIELD_DOCS.id),
+    type: NodeTypeSchema.describe(NODE_FIELD_DOCS.type),
+    name: z.string().describe(NODE_FIELD_DOCS.name),
+    /** Groupe conteneur, ou null a la racine de la planche. */
+    parentId: z.string().nullable().default(null).describe(NODE_FIELD_DOCS.parentId),
+    // Boîte englobante, en PIXELS, exprimée dans l'espace du parent. Pour `line`, le trait va de (x, y) à
+    // (x + width, y + height), ce qui autorise des largeurs/hauteurs négatives sur ce type uniquement.
+    x: z.number().describe(NODE_FIELD_DOCS.x),
+    y: z.number().describe(NODE_FIELD_DOCS.y),
+    width: z.number().describe(NODE_FIELD_DOCS.width),
+    height: z.number().describe(NODE_FIELD_DOCS.height),
+    /** Degrés, sens horaire, autour du centre de la boîte. */
+    rotation: z.number().default(0).describe(NODE_FIELD_DOCS.rotation),
+    opacity: z.number().min(0).max(1).default(1).describe(NODE_FIELD_DOCS.opacity),
+    // Formes — couleurs CSS, épaisseurs et rayons en pixels.
+    fill: z.string().describe(NODE_FIELD_DOCS.fill).optional(),
+    stroke: z.string().describe(NODE_FIELD_DOCS.stroke).optional(),
+    strokeWidth: z.number().min(0).describe(NODE_FIELD_DOCS.strokeWidth).optional(),
+    radius: z.number().min(0).describe(NODE_FIELD_DOCS.radius).optional(),
+    // Texte — fontSize et lineHeight sont tous deux en PIXELS.
+    text: z.string().describe(NODE_FIELD_DOCS.text).optional(),
+    color: z.string().describe(NODE_FIELD_DOCS.color).optional(),
+    fontSize: z.number().positive().describe(NODE_FIELD_DOCS.fontSize).optional(),
+    fontFamily: z.string().describe(NODE_FIELD_DOCS.fontFamily).optional(),
+    fontWeight: z.number().int().min(100).max(900).describe(NODE_FIELD_DOCS.fontWeight).optional(),
+    fontStyle: z.enum(["normal", "italic"]).describe(NODE_FIELD_DOCS.fontStyle).optional(),
+    textAlign: TextAlignSchema.describe(NODE_FIELD_DOCS.textAlign).optional(),
+    /**
+     * Distance entre deux lignes de base, **en pixels** — jamais un multiplicateur.
+     * Le plancher rejette a l'ecriture les valeurs en ratio (1.2, 1.35...) plutot
+     * que de rendre un paragraphe ecrase ; les anciens fichiers, eux, sont
+     * convertis a la lecture par src/core/migrate.ts.
+     */
+    lineHeight: z
+        .number()
+        .min(MIN_LINE_HEIGHT_PX, `lineHeight is a distance in PIXELS between baselines, not a multiplier of fontSize. ` +
+        `A value under ${MIN_LINE_HEIGHT_PX} is almost certainly a ratio: with fontSize 24 use about 32, ` +
+        `with fontSize 64 use about 86. Omit the field to get fontSize x 1.35 automatically.`)
+        .describe(NODE_FIELD_DOCS.lineHeight)
+        .optional(),
+});
+/** Snapshot servant de référence au calcul de `get_changes`. */
+export const BaselineSchema = z.object({
+    revision: z.number().int().nonnegative(),
+    at: z.string(),
+    nodes: z.array(DesignNodeSchema),
+});
+export const DesignSchema = z.object({
+    id: z.string(),
+    name: z.string(),
+    width: z.number().positive(),
+    height: z.number().positive(),
+    background: z.string(),
+    nodes: z.array(DesignNodeSchema),
+    createdAt: z.string(),
+    updatedAt: z.string(),
+    /** Incrémentée à chaque mutation, quelle qu'en soit l'origine. */
+    revision: z.number().int().nonnegative(),
+    /** Qui a produit la dernière mutation — sert à expliquer un diff. */
+    lastEditor: z.enum(["agent", "user"]),
+    baseline: BaselineSchema,
+});
+/** Enveloppe IPC commune Master <-> GUI Worker (même contrat que les autres MCPs). */
+export const IPCMessageSchema = z.object({
+    type: z.string(),
+    correlationId: z.string().optional(),
+    data: z.any().optional(),
+    error: z.string().optional(),
+    timestamp: z.string(),
+});

package/dist/shared/tree.d.ts

@@ -0,0 +1,93 @@
+import type { RenderNode } from "./render.js";
+/**
+ * Hiérarchie des éléments.
+ *
+ * Le stockage reste une liste plate — c'est ce qui garde le diff lisible et le
+ * fichier JSON diffable — mais chaque élément porte un `parentId`. Les
+ * coordonnées d'un élément sont exprimées **dans l'espace de son parent** :
+ * déplacer un groupe ne change donc qu'un seul champ, et l'export HTML devient
+ * une simple imbrication de div positionnées.
+ *
+ * Ce module ne dépend d'aucune librairie : il est importé aussi bien par le
+ * serveur MCP que par le canvas dans le navigateur.
+ */
+export interface Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+/** Boîte englobante normalisée (largeur/hauteur toujours positives). */
+export declare function normalizedBox(node: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): Box;
+export interface HierarchyNode {
+    id: string;
+    parentId: string | null;
+}
+/** Enfants directs de chaque parent, dans l'ordre du tableau (donc l'ordre d'empilement). */
+export declare function childrenByParent<T extends HierarchyNode>(nodes: T[]): Map<string | null, T[]>;
+export declare function rootNodes<T extends HierarchyNode>(nodes: T[]): T[];
+/** Chaîne des ancêtres, du parent direct jusqu'à la racine. */
+export declare function ancestorsOf<T extends HierarchyNode>(nodes: T[], id: string): T[];
+/** Ancêtre le plus haut d'un élément, ou l'élément lui-même s'il est à la racine. */
+export declare function outermostAncestor<T extends HierarchyNode>(nodes: T[], id: string): T | undefined;
+/** Identifiants de tous les descendants d'un élément (lui-même exclu). */
+export declare function descendantIds<T extends HierarchyNode>(nodes: T[], id: string): Set<string>;
+/**
+ * Réécrit la liste à plat en parcours préfixe : chaque parent est suivi de son
+ * sous-arbre. L'ordre relatif entre frères — donc l'empilement — est préservé.
+ *
+ * Le stockage garde ainsi une forme unique pour un même arbre, ce qui évite au
+ * diff de signaler un réordonnancement là où rien n'a bougé visuellement.
+ */
+export declare function flattenPreOrder<T extends HierarchyNode>(nodes: T[]): T[];
+export interface Layout {
+    /** Position, en coordonnées document, de l'origine de l'espace d'un groupe. */
+    origin: Map<string, Point>;
+    /** Boîte englobante, en coordonnées document, de chaque élément. */
+    bounds: Map<string, Box>;
+}
+/**
+ * Résout toute la hiérarchie en coordonnées document, en une passe.
+ *
+ * La rotation n'entre pas dans le calcul des boîtes : comme pour un rectangle
+ * pivoté, la boîte d'un groupe pivoté reste sa boîte non pivotée. C'est ce que
+ * le cadre de sélection affiche déjà, et le rendu, lui, applique bien la rotation.
+ */
+export declare function computeLayout(nodes: RenderNode[]): Layout;
+/** Origine de l'espace de coordonnées dans lequel vit un élément. */
+export declare function spaceOriginOf(layout: Layout, parentId: string | null): Point;
+export declare function boundsOf(layout: Layout, id: string): Box;
+/** Boîte englobante commune à plusieurs éléments, en coordonnées document. */
+export declare function unionBoundsOf(layout: Layout, ids: string[]): Box | null;
+export declare const REORDER_DIRECTIONS: readonly ["front", "back", "forward", "backward"];
+export type ReorderDirection = (typeof REORDER_DIRECTIONS)[number];
+/**
+ * Retire d'une sélection les éléments dont un ancêtre est déjà sélectionné.
+ *
+ * Déplacer un enfant en même temps que son groupe n'a pas de sens : le groupe
+ * emporte déjà son contenu, et les deux gestes s'appliqueraient dans des
+ * fratries différentes.
+ */
+export declare function withoutRedundantDescendants<T extends HierarchyNode>(nodes: T[], ids: string[]): string[];
+/**
+ * Change l'ordre d'empilement d'un ou plusieurs éléments.
+ *
+ * L'empilement est **relatif à la fratrie** : un élément ne peut passer devant
+ * que ses frères, jamais devant le contenu d'un autre groupe — c'est le groupe
+ * lui-même qu'il faut alors déplacer. Chaque fratrie concernée est réordonnée
+ * indépendamment, puis la liste plate est reconstruite en parcours préfixe.
+ *
+ * `forward`/`backward` décalent d'un cran ; `front`/`back` vont au bout. Un
+ * élément déjà au bout de sa fratrie ne bouge pas, et un lot d'éléments garde
+ * son ordre relatif d'origine.
+ */
+export declare function reorderNodes<T extends HierarchyNode>(nodes: T[], ids: string[], direction: ReorderDirection): T[];