@imenam/mcp-design 1.0.1

package/README.md

@@ -0,0 +1,231 @@
+# @imenam/mcp-design
+
+Un canvas de design pilotable par un agent, avec une interface graphique où l'utilisateur reprend la main.
+
+L'agent compose une planche (formes, texte) via des outils MCP. L'utilisateur ouvre la GUI, déplace, retaille, recolore, réécrit. L'agent relit ensuite **exactement ce qui a changé** et l'intègre dans le code de l'application.
+
+```
+Agent ──add_nodes/update_nodes──▶  Design  ◀──glisser-déposer──  Utilisateur (GUI)
+  ▲                                                                    │
+  └──────────── get_changes ──── diff depuis la dernière baseline ──────┘
+```
+
+---
+
+## Installation
+
+```bash
+npm install -g @imenam/mcp-design
+```
+
+Ou directement via `npx`, sans installation.
+
+### Déclaration dans un projet
+
+```bash
+npx -y @imenam/mcp-design --claude-setup-mcp
+```
+
+La commande crée (ou complète) le `.mcp.json` du répertoire courant avec une entrée `mcp-design` dont les variables sont pré-remplies. Ajoutez `--force` pour remplacer une entrée existante ; les autres serveurs sont préservés.
+
+Exemple d'entrée générée :
+
+```json
+{
+  "mcpServers": {
+    "mcp-design": {
+      "command": "npx",
+      "args": ["-y", "@imenam/mcp-design"],
+      "env": {
+        "PROXY_URL": "http://localhost:3000",
+        "APP_GROUP": "Mon Projet",
+        "APP_NAME": "Design Mon Projet",
+        "APP_PATH": "/design-mon-projet",
+        "MCP_DESIGN_DATA_DIR": "C:/dev/mon-projet/.design-data",
+        "MCP_LOG_DIR": ""
+      }
+    }
+  }
+}
+```
+
+### Variables d'environnement
+
+| Variable | Rôle |
+|---|---|
+| `PROXY_URL` | URL du [proxy central](https://github.com/imenam/proxy-setup). **Sans elle, la GUI est simplement désactivée** — les outils MCP continuent de fonctionner. |
+| `APP_PATH` | Chemin de montage de la GUI derrière le proxy (défaut `/design-gui`). |
+| `APP_NAME` | Nom affiché dans le dashboard du proxy. |
+| `APP_GROUP` | Section repliable du dashboard du proxy (facultatif). |
+| `MCP_DESIGN_DATA_DIR` | Répertoire de stockage des designs. `MCP_DATA_DIR` est accepté en repli. Défaut : `<package>/.design-data`. |
+| `MCP_LOG_DIR` | Répertoire des logs. Défaut : `<data>/logs`. |
+
+Un design est un simple fichier JSON dans `<data>/designs/<id>.json` — lisible, diffable, versionnable.
+
+---
+
+## Les outils
+
+### Planches
+
+| Outil | Effet |
+|---|---|
+| `list_designs` | Liste les planches, leur taille, leur nombre d'éléments et le nombre de modifications non encore récupérées. |
+| `create_design` | Crée une planche vide (`name`, et facultativement `width`, `height`, `background`). |
+| `get_design` | Lit une planche : `format: "summary"` (inventaire compact, défaut) ou `format: "json"` (valeurs exactes). |
+| `update_design` | Renomme la planche, change ses dimensions ou son fond. |
+| `delete_design` | Supprime définitivement une planche. |
+
+### Éléments
+
+| Outil | Effet |
+|---|---|
+| `add_nodes` | Ajoute un ou plusieurs éléments par-dessus les autres. |
+| `update_nodes` | Patche des éléments existants — seuls les champs fournis changent. |
+| `delete_nodes` | Supprime des éléments par identifiant. Supprimer un groupe emporte son contenu. |
+| `group_nodes` | Enveloppe des éléments dans un nouveau groupe, sans rien déplacer à l'écran. |
+| `ungroup_nodes` | Dissout des groupes : leur contenu remonte d'un niveau, toujours sans bouger. |
+
+Cinq types d'éléments : `rect`, `ellipse`, `line`, `text` et `group`. Seul `type` est obligatoire ; tout le reste tombe sur des valeurs par défaut visibles, donc `{ "type": "rect" }` suffit à créer quelque chose qu'on voit à l'écran.
+
+**Champs communs** — `name`, `parentId`, `x`, `y`, `width`, `height` (en pixels, origine en haut à gauche), `rotation` (degrés, autour du centre de la boîte), `opacity` (0–1).
+
+**Toute longueur est en pixels**, sans exception : `x`, `y`, `width`, `height`, `strokeWidth`, `radius`, `fontSize` et `lineHeight`. Chaque champ porte sa description et son unité dans [`shared/node-fields.ts`](shared/node-fields.ts), d'où le schéma zod **et** l'`inputSchema` MCP les tirent tous les deux — une unité n'est écrite qu'à un seul endroit.
+
+| Type | Champs propres |
+|---|---|
+| `rect` | `fill`, `stroke`, `strokeWidth`, `radius` |
+| `ellipse` | `fill`, `stroke`, `strokeWidth` |
+| `line` | `stroke`, `strokeWidth` — le trait va de `(x, y)` à `(x + width, y + height)`, donc les deltas négatifs encodent la direction |
+| `text` | `text`, `color`, `fontSize`, `fontFamily`, `fontWeight`, `fontStyle`, `textAlign`, `lineHeight` (en px) |
+| `group` | aucun — c'est un pur conteneur |
+
+### Hiérarchie
+
+Chaque élément porte un `parentId` : `null` à la racine de la planche, sinon l'identifiant d'un `group`. **Les coordonnées sont exprimées dans l'espace du parent** : un élément à la racine se positionne par rapport à la planche, un élément dans un groupe par rapport à l'origine de ce groupe.
+
+C'est ce qui rend un déplacement de groupe lisible côté agent — un seul champ change, pas les coordonnées de chaque membre :
+
+```
+- g_a1b2c3 — "Carte produit" (group)
+    x: 100 -> 260
+```
+
+La taille d'un groupe est **déduite de son contenu** : `width` et `height` sont recalculés à chaque mutation, ne peuvent pas être écrits, et n'apparaissent jamais dans un diff. Le stockage reste une liste plate, ordonnée en parcours préfixe — chaque parent suivi de son sous-arbre — ce qui garde le fichier JSON lisible et diffable.
+
+Le texte n'est **jamais re-wrappé automatiquement** : seuls les `\n` explicites créent une nouvelle ligne. Le comportement est ainsi identique à l'écran et à l'export.
+
+`lineHeight` est une **distance en pixels entre deux lignes de base**, pas un multiplicateur de `fontSize` : avec `fontSize: 64`, on écrit `76`, pas `1.2`. C'est l'unité que les agents emploient spontanément, et la seule qui se lise dans la même échelle que le reste. Une valeur sous 4 est donc refusée à l'écriture avec un message explicite, et les fichiers écrits avant ce changement sont convertis à la lecture (`ratio x fontSize`) par [`src/core/migrate.ts`](src/core/migrate.ts). Champ omis = `fontSize x 1.35`.
+
+### Ordre d'empilement
+
+L'index dans la liste **est** l'ordre d'empilement : le dernier élément d'une fratrie est celui du dessus. `add_nodes` empile au-dessus, et `reorder_nodes` déplace ensuite ce qui existe déjà.
+
+| Outil | Effet |
+|---|---|
+| `reorder_nodes` | `position: front / back / forward / backward` sur un ou plusieurs éléments. Un groupe emporte son contenu ; plusieurs éléments gardent leur ordre relatif. |
+
+L'empilement est **relatif à la fratrie** : un élément ne passe jamais devant le contenu d'un autre groupe — c'est ce groupe qu'il faut alors réordonner, ou l'élément qu'il faut en sortir via `parentId`. La logique vit dans [`shared/tree.ts`](shared/tree.ts) et sert aussi bien l'outil que le panneau de calques de la GUI : les deux ne peuvent pas diverger.
+
+Un lot est intégralement validé avant la moindre écriture : une entrée invalide ne laisse jamais un design à moitié modifié.
+
+### Récupérer le travail de l'utilisateur
+
+| Outil | Effet |
+|---|---|
+| `get_changes` | Liste tout ce qui a été ajouté, modifié, supprimé ou réordonné depuis la dernière baseline, champ par champ (`x: 40 -> 240`). |
+| `mark_synced` | Fige l'état courant comme nouvelle baseline. |
+| `export_design` | Rend la planche en `html`, `jsx`, `svg`, `json` ou `summary`. `output_path` écrit dans un fichier au lieu de renvoyer le contenu. |
+| `screenshot_design` | Rasterise la planche en PNG et le renvoie **en image** à l'agent. `node_id` cadre la capture sur un groupe (ou n'importe quel élément), `scale` zoome, `padding` ajoute de la marge, `output_path` écrit un `.png` au lieu de renvoyer l'image. |
+
+**`get_changes` n'acquitte jamais ce qu'il montre.** Seul `mark_synced` déplace la baseline, et il ne doit être appelé qu'une fois les modifications réellement reportées dans le code. Un simple appel de lecture ne peut donc pas faire disparaître un diff que l'agent n'a pas encore traité.
+
+### GUI
+
+| Outil | Effet |
+|---|---|
+| `reconnect_gui` | Relance le worker GUI et le réenregistre auprès du proxy. `force: true` redémarre même s'il semble vivant. |
+
+---
+
+## Boucle de travail type
+
+```
+create_design { name: "Landing" }
+add_nodes     { design_id: "landing", nodes: [...] }
+mark_synced   { design_id: "landing" }        ← point de départ de la comparaison
+
+  … l'utilisateur ouvre la GUI et retouche la maquette …
+
+get_changes      { design_id: "landing" }     ← ce qu'il a changé, champ par champ
+screenshot_design { design_id: "landing" }    ← ce que ça donne réellement, en image
+export_design { design_id: "landing", format: "html" }
+  … l'agent reporte les valeurs dans le code de l'application …
+mark_synced   { design_id: "landing" }        ← acquittement
+```
+
+---
+
+## L'interface
+
+Trois colonnes : la liste des planches, le canvas, l'inspecteur et les calques.
+
+- **Outils** — sélection, rectangle, ellipse, ligne, texte. Glisser pour dimensionner, cliquer pour poser à la taille par défaut.
+- **Édition** — déplacement au glisser, 8 poignées de redimensionnement (2 extrémités pour une ligne), sélection multiple au rectangle d'encadrement ou au Maj+clic.
+- **Groupes** — `Ctrl+G` groupe la sélection, `Ctrl+Maj+G` la dissout. Un clic dans le canvas sélectionne le **groupe le plus haut** ; `Alt+clic` vise l'élément exact à l'intérieur. Déplacer un groupe déplace tout son contenu.
+- **Texte** — double-clic pour éditer en place, avec la même métrique qu'au rendu final.
+- **Inspecteur** — position, taille, rotation, opacité, couleurs, épaisseur, arrondi, contenu, taille et graisse de police, interligne (en px), alignement. Pour un groupe, la taille est affichée en lecture seule puisqu'elle suit son contenu.
+- **Calques** — arbre repliable, ordre d'empilement, sélection, montée/descente d'un cran.
+
+### Naviguer dans la planche
+
+- **Zoom** : `Ctrl`/`Cmd` + molette, ancré sous le curseur — le point visé ne bouge pas.
+- **Déplacement** : molette seule, ou **barre espace maintenue + glisser**. Tant que la barre espace est enfoncée, aucun geste ne peut déplacer un élément, même en partant de l'un d'eux. Le clic molette fait la même chose.
+- Le sélecteur de zoom de la barre d'outils reste disponible pour revenir à une valeur ronde.
+
+Raccourcis : `V` `R` `O` `L` `T` (outils), `Ctrl+Z` / `Ctrl+Y` (annuler/rétablir), `Ctrl+G` / `Ctrl+Maj+G` (grouper / dissoudre), `Ctrl+D` (dupliquer), `Ctrl+A` (tout sélectionner), `Suppr`, flèches (déplacer d'1 px, 10 px avec `Maj`), `Échap`.
+
+La sauvegarde est automatique et différée. Une modification faite par l'agent pendant que la GUI est ouverte y apparaît en direct, via SSE ; une modification faite dans la GUI est enregistrée comme venant de l'utilisateur, et c'est ce que `get_changes` restitue.
+
+Le badge « n à synchroniser » d'une planche indique le nombre de modifications que l'agent n'a pas encore acquittées.
+
+---
+
+## Architecture
+
+Deux processus, conformément au standard de l'écosystème (`@imenam/mcp-gui-interface`) :
+
+- **MCP Master** (`src/index.ts`) — protocole JSON-RPC sur stdio, stockage des designs, cycle de vie du worker via `GuiLauncher`.
+- **GUI Worker** (`src/gui-worker.ts`) — serveur Hono, enregistrement auprès du proxy via `ProxyClient`, API REST + SSE, sert la SPA React.
+
+Les deux communiquent par IPC. Le worker se termine proprement quand le master disparaît (canal IPC fermé, PID parent absent) et quand une autre instance est déjà enregistrée (HTTP 409), ce qui évite les GUI orphelines.
+
+`shared/render.ts` contient le rendu SVG d'un élément, `shared/tree.ts` la résolution de la hiérarchie en coordonnées document, et `shared/node-defaults.ts` les valeurs par défaut. Les trois sont importés **à la fois** par l'exporteur côté serveur et par le canvas côté navigateur : ce que l'utilisateur voit est exactement ce que `export_design` — et donc `screenshot_design`, qui rasterise ce même SVG via resvg — produit.
+
+Les invariants de hiérarchie — parent existant et de type `group`, absence de cycle, taille des groupes recalculée, ordre préfixe — sont appliqués dans `DesignStore.mutate`, donc sur **tout** chemin d'écriture : outil MCP comme sauvegarde depuis la GUI.
+
+**Limite assumée de cette version** : un groupe se déplace, se pivote et change d'opacité, mais ne se redimensionne pas — mettre son contenu à l'échelle demanderait de propager un facteur dans tout le sous-arbre, ce qui dépasse le cadre d'un premier jet sobre.
+
+---
+
+## Développement
+
+```bash
+npm install
+npm run build          # backend (tsc) + GUI (vite)
+npm test               # suite complète
+```
+
+La suite comprend :
+
+- des tests unitaires du store, de la fabrique d'éléments, du moteur de diff et de l'export ;
+- des tests des outils MCP appelés directement ;
+- une suite de bout en bout (`test/e2e.test.ts`) qui lance un vrai serveur MCP sur stdio, attend l'enregistrement de son worker auprès du proxy, puis vérifie l'aller-retour complet agent → GUI → agent.
+
+La suite de bout en bout a besoin du proxy (`http://localhost:3000`, ou `E2E_PROXY_URL`). S'il est absent, elle est ignorée plutôt qu'en échec.
+
+Pour inspecter le worker sans traverser le proxy, ajoutez `?__direct=1` à son port local : les assets ne sont alors pas préfixés par le chemin de montage.
+
+### Méta-configurations du proxy
+
+`mcp-design` n'expose pas `GET /api/configurations` : il n'a pas de configuration métier (ni token, ni identifiant de ressource) qui justifierait des profils. Le proxy ignore simplement les MCPs qui n'implémentent pas ces routes.

package/dist/shared/node-defaults.d.ts

@@ -0,0 +1,30 @@
+import type { RenderNode } from "./render.js";
+/**
+ * Valeurs par défaut et champs autorisés par type de noeud.
+ *
+ * Partagé entre le serveur (validation des appels d'outils) et la GUI (création
+ * à la souris) : une forme créée par l'agent et une forme dessinée par
+ * l'utilisateur partent exactement du même état.
+ *
+ * Comme `render.ts`, ce module ne dépend d'aucune librairie.
+ */
+export type NodeKind = RenderNode["type"];
+export declare const NODE_KINDS: readonly NodeKind[];
+/** Types que l'utilisateur peut dessiner directement ; un groupe se cree a partir d'une selection. */
+export declare const DRAWABLE_KINDS: readonly NodeKind[];
+export declare const NODE_DEFAULTS: Record<NodeKind, Partial<RenderNode>>;
+/** Champs stylistiques acceptés par type — tout le reste est refusé à la création comme au patch. */
+export declare const NODE_STYLE_FIELDS: Record<NodeKind, ReadonlyArray<keyof RenderNode>>;
+/**
+ * Champs deduits du contenu d'un groupe. Ils sont recalcules a chaque mutation
+ * et ne peuvent pas etre ecrits directement — ni par l'agent, ni par la GUI.
+ */
+export declare const GROUP_DERIVED_FIELDS: ReadonlyArray<keyof RenderNode>;
+export declare const NODE_GEOMETRY_FIELDS: ReadonlyArray<keyof RenderNode>;
+export declare function defaultNodeName(type: NodeKind, index: number): string;
+export declare function nodeKindLabel(type: NodeKind): string;
+/** Taille minimale garantissant qu'un noeud reste sélectionnable à la souris. */
+export declare function clampNodeSize(type: NodeKind, width: number, height: number): {
+    width: number;
+    height: number;
+};

package/dist/shared/node-defaults.js

@@ -0,0 +1,67 @@
+export const NODE_KINDS = ["rect", "ellipse", "line", "text", "group"];
+/** Types que l'utilisateur peut dessiner directement ; un groupe se cree a partir d'une selection. */
+export const DRAWABLE_KINDS = ["rect", "ellipse", "line", "text"];
+export const NODE_DEFAULTS = {
+    rect: { width: 200, height: 120, fill: "#e8e8e6", stroke: "#1a1a18", strokeWidth: 1, radius: 8 },
+    ellipse: { width: 160, height: 160, fill: "#e8e8e6", stroke: "#1a1a18", strokeWidth: 1 },
+    line: { width: 200, height: 0, stroke: "#1a1a18", strokeWidth: 2 },
+    text: {
+        width: 260,
+        height: 40,
+        text: "Texte",
+        color: "#1a1a18",
+        fontSize: 24,
+        fontFamily: "Inter, system-ui, sans-serif",
+        fontWeight: 400,
+        fontStyle: "normal",
+        textAlign: "left",
+        // En pixels, comme x/y/fontSize — jamais un multiplicateur.
+        lineHeight: 32,
+    },
+    // Un groupe n'a pas de taille propre : elle est deduite de son contenu.
+    group: { width: 0, height: 0 },
+};
+/** Champs stylistiques acceptés par type — tout le reste est refusé à la création comme au patch. */
+export const NODE_STYLE_FIELDS = {
+    rect: ["fill", "stroke", "strokeWidth", "radius"],
+    ellipse: ["fill", "stroke", "strokeWidth"],
+    line: ["stroke", "strokeWidth"],
+    text: ["text", "color", "fontSize", "fontFamily", "fontWeight", "fontStyle", "textAlign", "lineHeight"],
+    group: [],
+};
+/**
+ * Champs deduits du contenu d'un groupe. Ils sont recalcules a chaque mutation
+ * et ne peuvent pas etre ecrits directement — ni par l'agent, ni par la GUI.
+ */
+export const GROUP_DERIVED_FIELDS = ["width", "height"];
+export const NODE_GEOMETRY_FIELDS = [
+    "x",
+    "y",
+    "width",
+    "height",
+    "rotation",
+    "opacity",
+];
+const LABELS = {
+    rect: "Rectangle",
+    ellipse: "Ellipse",
+    line: "Ligne",
+    text: "Texte",
+    group: "Groupe",
+};
+export function defaultNodeName(type, index) {
+    return `${LABELS[type]} ${index}`;
+}
+export function nodeKindLabel(type) {
+    return LABELS[type];
+}
+/** Taille minimale garantissant qu'un noeud reste sélectionnable à la souris. */
+export function clampNodeSize(type, width, height) {
+    if (type === "group")
+        return { width, height }; // taille deduite du contenu
+    if (type === "line")
+        return { width, height }; // les deltas négatifs encodent la direction
+    if (type === "text")
+        return { width: Math.max(20, Math.abs(width)), height: Math.max(16, Math.abs(height)) };
+    return { width: Math.max(1, Math.abs(width)), height: Math.max(1, Math.abs(height)) };
+}

package/dist/shared/node-fields.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Description de chaque champ d'un noeud, **avec son unité**.
+ *
+ * Source unique : le schéma zod l'attache via `.describe()`, et le serveur MCP
+ * en construit l'`inputSchema` exposé à l'agent. Une unité n'a donc qu'un seul
+ * endroit où être écrite — c'est précisément l'ambiguïté qui a fait interpréter
+ * `lineHeight` comme un multiplicateur d'un côté et des pixels de l'autre.
+ */
+export declare const NODE_FIELD_DOCS: {
+    id: string;
+    type: string;
+    name: string;
+    parentId: string;
+    x: string;
+    y: string;
+    width: string;
+    height: string;
+    rotation: string;
+    opacity: string;
+    fill: string;
+    stroke: string;
+    strokeWidth: string;
+    radius: string;
+    text: string;
+    color: string;
+    fontSize: string;
+    fontFamily: string;
+    fontWeight: string;
+    fontStyle: string;
+    textAlign: string;
+    lineHeight: string;
+};
+export type NodeFieldName = keyof typeof NODE_FIELD_DOCS;

package/dist/shared/node-fields.js

@@ -0,0 +1,40 @@
+/**
+ * Description de chaque champ d'un noeud, **avec son unité**.
+ *
+ * Source unique : le schéma zod l'attache via `.describe()`, et le serveur MCP
+ * en construit l'`inputSchema` exposé à l'agent. Une unité n'a donc qu'un seul
+ * endroit où être écrite — c'est précisément l'ambiguïté qui a fait interpréter
+ * `lineHeight` comme un multiplicateur d'un côté et des pixels de l'autre.
+ */
+export const NODE_FIELD_DOCS = {
+    id: "Explicit id. Generated when omitted; must be unique within the design.",
+    type: "Kind of node: rect, ellipse, line, text or group.",
+    name: "Layer name shown in the GUI. Purely descriptive.",
+    parentId: "Id of the containing group, or null for the root level of the artboard. " +
+        "Changing it reparents the node — its x/y are then read in the new parent's space, so it moves on screen.",
+    x: "Horizontal position of the bounding box's left edge, in pixels, in the PARENT's coordinate space " +
+        "(the artboard's top-left corner when parentId is null, the group's origin otherwise). " +
+        "On a line, this is the start point.",
+    y: "Vertical position of the bounding box's top edge, in pixels, in the PARENT's coordinate space, " +
+        "measured downwards. On a line, this is the start point.",
+    width: "Width of the bounding box, in pixels. On a line, the horizontal delta from start to end — it may be negative. " +
+        "On a group, derived from the content and read-only.",
+    height: "Height of the bounding box, in pixels. On a line, the vertical delta from start to end — it may be negative. " +
+        "On a group, derived from the content and read-only.",
+    rotation: "Rotation in degrees, clockwise, around the centre of the bounding box. 0 = upright.",
+    opacity: "Opacity, from 0 (fully transparent) to 1 (fully opaque).",
+    fill: 'CSS colour filling the interior, e.g. "#ffffff" or "rgba(0,0,0,0.4)". rect and ellipse only.',
+    stroke: "CSS colour of the outline — of the stroke itself on a line node.",
+    strokeWidth: "Thickness of the outline, in pixels. 0 or omitted means no outline.",
+    radius: "Corner radius, in pixels. rect only; clamped to half of the shortest side.",
+    text: "Text content. It is NEVER auto-wrapped: only explicit \\n characters start a new line.",
+    color: "CSS colour of the text.",
+    fontSize: "Font size, in pixels (same meaning as the CSS font-size property).",
+    fontFamily: 'CSS font stack, e.g. "Inter, system-ui, sans-serif".',
+    fontWeight: "CSS numeric font weight, from 100 to 900. 400 = regular, 700 = bold.",
+    fontStyle: "normal or italic.",
+    textAlign: "Horizontal alignment of each line within the node's width.",
+    lineHeight: "Distance between two consecutive baselines, IN PIXELS — NOT a multiplier of fontSize. " +
+        "With fontSize 64, a comfortable value is 76, not 1.2. " +
+        "Defaults to fontSize x 1.35 when omitted, which is usually what you want.",
+};

package/dist/shared/render.d.ts

@@ -0,0 +1,105 @@
+/**
+ * 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 { normalizedBox } from "./tree.js";
+export { normalizedBox };
+export type { Box, Point } from "./tree.js";
+export interface RenderNode {
+    id: string;
+    type: "rect" | "ellipse" | "line" | "text" | "group";
+    name: string;
+    /** Groupe conteneur, ou null a la racine. Les coordonnees sont relatives a ce parent. */
+    parentId: string | null;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    opacity: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    radius?: number;
+    text?: string;
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: number;
+    fontStyle?: "normal" | "italic";
+    textAlign?: "left" | "center" | "right";
+    lineHeight?: number;
+}
+export declare function escapeXml(value: string): string;
+export declare function nodeCenter(node: RenderNode): {
+    cx: number;
+    cy: number;
+};
+/** Transform SVG de rotation autour du centre de la boîte, ou "" si pas de rotation. */
+export declare function rotationTransform(node: RenderNode): string;
+/**
+ * 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 declare function textLines(node: RenderNode): string[];
+export declare const DEFAULT_FONT_FAMILY = "Inter, system-ui, sans-serif";
+export declare 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 declare 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 declare const MIN_LINE_HEIGHT_PX = 4;
+/** Interligne par défaut, en pixels, pour une taille de police donnée. */
+export declare function defaultLineHeight(fontSize: number): number;
+export declare function textMetrics(node: RenderNode): {
+    fontSize: number;
+    lineStep: number;
+    /** Ligne de base de la première ligne, mesurée depuis le haut de la boîte. */
+    firstBaseline: number;
+    anchor: string;
+    anchorX: number;
+};
+/** Hauteur minimale nécessaire pour afficher tout le texte du noeud. */
+export declare function measuredTextHeight(node: RenderNode): number;
+/**
+ * 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 declare function groupTransform(node: RenderNode, localCenter: {
+    cx: number;
+    cy: number;
+}): string;
+/**
+ * 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 declare function nodeToSvg(node: RenderNode): string;
+export interface RenderDocument {
+    name: string;
+    width: number;
+    height: number;
+    background: string;
+    nodes: RenderNode[];
+}
+export declare function documentToSvg(doc: RenderDocument): string;
+/**
+ * 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 declare function subtreeToSvg(doc: RenderDocument, nodeId: string, padding?: number): string;