@imenam/mcp-design 1.0.6 → 1.0.8

package/README.md

@@ -28,6 +28,18 @@ 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.
 
+Deux flags permettent de choisir directement comment la GUI sera exposée, sans éditer le JSON ensuite :
+
+```bash
+# GUI derrière le proxy central
+npx -y @imenam/mcp-design --claude-setup-mcp --proxy_url=http://localhost:3000
+
+# GUI en accès direct, sans proxy : http://localhost:4500
+npx -y @imenam/mcp-design --claude-setup-mcp --app_port=4500
+```
+
+Les deux flags sont exclusifs — la commande échoue si les deux sont passés.
+
 Exemple d'entrée générée :
 
 ```json
@@ -38,6 +50,7 @@ Exemple d'entrée générée :
       "args": ["-y", "@imenam/mcp-design"],
       "env": {
         "PROXY_URL": "http://localhost:3000",
+        "APP_PORT": "",
         "APP_GROUP": "Mon Projet",
         "APP_NAME": "Design Mon Projet",
         "APP_PATH": "/design-mon-projet",
@@ -53,13 +66,21 @@ Exemple d'entrée générée :
 
 | 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. |
+| `PROXY_URL` | URL du [proxy central](https://github.com/imenam/proxy-setup) : le proxy attribue le port et monte la GUI sous `APP_PATH`. |
+| `APP_PORT` | Port local utilisé **quand `PROXY_URL` est absent** : la GUI est servie directement sur `http://localhost:<port>`, à la racine. Permet d'utiliser l'interface sans le hub de centralisation. |
+| `APP_PATH` | Chemin de montage de la GUI derrière le proxy (défaut `/design-gui`). Ignoré en mode `APP_PORT`. `PROXY_APP_PATH` puis `GUI_PATH` sont acceptés en repli. |
+| `APP_NAME` | Nom affiché dans le dashboard du proxy. `PROXY_APP_NAME` puis `GUI_NAME` sont acceptés en repli. |
+| `APP_PATH_PREFIX` | Préfixe de namespace ajouté au chemin **par défaut** (ex. `/abc123` → `/abc123/design-gui`). Sert à isoler plusieurs instances sous un même 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`. |
 
+`PROXY_URL` et `APP_PORT` s'excluent : `PROXY_URL` prime si les deux sont renseignés. **Si aucune des deux n'est définie, la GUI est simplement désactivée** — les outils MCP continuent de fonctionner.
+
+`APP_PATH` / `APP_NAME` sont les noms canoniques ; `PROXY_APP_*` puis `GUI_*` restent acceptés, dans cet ordre de priorité décroissante. La règle de `APP_PATH_PREFIX` est simple : **il ne préfixe que le chemin par défaut**. Dès que `APP_PATH` (ou l'un de ses replis) est renseigné, cette valeur est prise telle quelle, sans préfixe — la saisie manuelle l'emporte toujours. Les chemins sont normalisés (un seul `/` de séparation, pas de `/` final) et le préfixage est idempotent. Le `<base href>` de l'interface suit le chemin réellement enregistré, assets compris.
+
+La résolution est assurée par le paquet partagé [`@imenam/mcp-gui-interface`](https://www.npmjs.com/package/@imenam/mcp-gui-interface), qui documente la règle en détail.
+
 Un design est un simple fichier JSON dans `<data>/designs/<id>.json` — lisible, diffable, versionnable.
 
 ---
@@ -146,6 +167,19 @@ Le texte n'est **jamais re-wrappé automatiquement** : seuls les `\n` explicites
 
 `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`.
 
+#### La boîte d'un texte épouse son texte
+
+Le bloc de lignes est **centré verticalement dans la boîte** du nœud : c'est ce qui permet de centrer un libellé dans un bouton sans calculer de décalage. Encore faut-il que la boîte soit celle qu'on croit — une hauteur par défaut plus grande que le texte le fait descendre sous le point posé.
+
+Donc : **un nœud `text` créé sans `height` prend la hauteur exacte de son texte** (`lignes x lineHeight`). Le centrage n'a alors plus rien à décaler, et la première ligne commence bien à `y`, à gauche de `x`. Ajouter une ligne agrandit la boîte au lieu de la faire déborder : une boîte qui épousait son texte continue de l'épouser, à chaque changement de `text`, `fontSize` ou `lineHeight`, à l'écriture par l'agent comme à l'édition dans la GUI.
+
+Une hauteur **explicite**, elle, n'est jamais retouchée — c'est le geste qui dit « centre ce libellé » :
+
+```jsonc
+{ "type": "text", "x": 40, "y": 120, "text": "Titre", "fontSize": 32 }          // boîte = 43.2px, texte posé à y
+{ "type": "text", "x": 40, "y": 100, "height": 26, "text": "OK", "fontSize": 12 } // libellé centré dans son bouton
+```
+
 ### Groupes réutilisables
 
 Quand un même bloc revient plusieurs fois — une carte, une ligne de liste, un bouton —, il ne se recopie pas : il se **construit une fois** en groupe, puis s'**instancie**. Une `instance` ne stocke aucun contenu, seulement l'identifiant du groupe qu'elle reproduit ; le sous-arbre est reconstitué au rendu. Éditer le groupe met donc à jour **toutes** ses instances d'un coup, et un bloc répété reste une seule chose à lire et à modifier. C'est le fonctionnement d'un composant principal dans Figma.
@@ -187,8 +221,12 @@ Un lot est intégralement validé avant la moindre écriture : une entrée inval
 |---|---|
 | `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. |
+| `export_design` | Rend la planche en `html`, `jsx`, `svg`, `json` ou `summary`. `destination_path` + `filename` écrivent un fichier **sur la machine de l'agent** 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, `destination_path` + `filename` écrivent un `.png` **sur la machine de l'agent** au lieu de renvoyer l'image. |
+
+> **Où le fichier est écrit.** `destination_path` est un **dossier absolu** sur la machine de l'agent, `filename` le nom que le fichier y prend. Omis, les deux outils se comportent comme avant : le contenu (ou l'image) revient dans la réponse, sans fichier.
+>
+> En stdio, ce MCP tourne à côté de l'agent et écrit lui-même. Derrière [`@imenam/mcp-http-gateway`](https://www.npmjs.com/package/@imenam/mcp-http-gateway), il tourne sur la machine du gateway et ne peut pas atteindre le disque de l'agent : il déclare alors la paire `destination_path` / `destination_relay`, renvoie les octets, et le relais — qui tourne, lui, sur la machine de l'agent — les y écrit. `destination_relay` est rempli par le relais, jamais par l'agent, et cette voie exige `GATEWAY_INLINE_WRITE_ROOTS` dans le bloc `env` du relais.
 
 **`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é.
 
@@ -225,7 +263,7 @@ Trois colonnes : la liste des planches, le canvas, l'inspecteur et les calques.
 - **Outils** — sélection, rectangle, ellipse, ligne, texte, icône. Glisser pour dimensionner, cliquer pour poser à la taille par défaut. L'outil icône ouvre d'abord son sélecteur : poser une icône suppose d'avoir choisi laquelle.
 - **É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.
+- **Texte** — double-clic pour éditer en place, avec la même métrique qu'au rendu final. Une boîte à la taille de son texte le reste : ajouter une ligne l'agrandit d'autant.
 - **Inspecteur** — position, taille, rotation, opacité, couleurs, épaisseur, arrondi, contenu, taille et graisse de police, interligne (en px), alignement, choix de l'icône. Pour un groupe, la taille est affichée en lecture seule puisqu'elle suit son contenu ; pour une icône, un seul champ de taille, puisqu'elle est carrée.
 - **Calques** — arbre repliable, ordre d'empilement, sélection, montée/descente d'un cran.
 

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

@@ -1,4 +1,4 @@
-import type { RenderNode } from "./render.js";
+import { type RenderNode } from "./render.js";
 /**
  * Valeurs par défaut et champs autorisés par type de noeud.
  *

package/dist/shared/node-defaults.js

@@ -1,3 +1,4 @@
+import { defaultLineHeight } from "./render.js";
 import { DEFAULT_ICON_STROKE_WIDTH, ICON_GRID } from "./icons/index.js";
 export const NODE_KINDS = ["rect", "ellipse", "line", "text", "icon", "group", "instance"];
 /** Types que l'utilisateur peut dessiner directement ; un groupe se cree a partir d'une selection. */
@@ -8,7 +9,11 @@ export const NODE_DEFAULTS = {
     line: { width: 200, height: 0, stroke: "#1a1a18", strokeWidth: 2 },
     text: {
         width: 260,
-        height: 40,
+        // Une ligne : la boîte par défaut épouse le texte par défaut. Toute autre
+        // hauteur ferait descendre la première ligne sous le point posé, puisque le
+        // bloc de lignes est centré dans sa boîte. Un texte créé sans hauteur la
+        // recalcule de toute façon sur son propre contenu.
+        height: defaultLineHeight(24),
         text: "Texte",
         color: "#1a1a18",
         fontSize: 24,
@@ -16,8 +21,9 @@ export const NODE_DEFAULTS = {
         fontWeight: 400,
         fontStyle: "normal",
         textAlign: "left",
-        // En pixels, comme x/y/fontSize — jamais un multiplicateur.
-        lineHeight: 32,
+        // `lineHeight` n'a volontairement pas de valeur par défaut : figée, elle
+        // rendrait un texte de 64px sur un interligne de 32. Absente, elle suit la
+        // taille de police (fontSize x 1.35), comme l'annonce sa documentation.
     },
     // Taille de la grille de Lucide : une icone posee sans consigne rend au
     // format pour lequel son trace a ete dessine.

package/dist/shared/node-fields.js

@@ -22,7 +22,10 @@ export const NODE_FIELD_DOCS = {
     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.",
+        "On a group, derived from the content and read-only. " +
+        "On a TEXT node, leave it out: the box then takes the exact height of the text (lines x lineHeight), " +
+        "so the first line starts at y. Set it only to centre a label inside a container — give the text node " +
+        "the container's y and height, and the block of lines is centred in it.",
     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, ellipse and icon. On an icon it is "none" by default — the shape is drawn by its stroke.',
@@ -42,7 +45,8 @@ export const NODE_FIELD_DOCS = {
         "node to read and to change. Whenever the same block appears more than once (cards, list rows, menu items, " +
         "buttons), build it once as a group and add instances of it instead of duplicating it. " +
         "Change this field to swap an instance over to another group; use detach_instances when one copy must diverge.",
-    text: "Text content. It is NEVER auto-wrapped: only explicit \\n characters start a new line.",
+    text: "Text content. It is NEVER auto-wrapped: only explicit \\n characters start a new line. " +
+        "A box that hugs its text keeps hugging it: adding a line grows the box instead of overflowing it.",
     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".',

package/dist/shared/render.d.ts

@@ -81,6 +81,24 @@ export declare function textMetrics(node: RenderNode): {
 };
 /** Hauteur minimale nécessaire pour afficher tout le texte du noeud. */
 export declare function measuredTextHeight(node: RenderNode): number;
+/**
+ * Vrai quand la boîte épouse déjà exactement son texte.
+ *
+ * C'est le signe qu'aucune hauteur n'a été voulue pour elle-même : la boîte
+ * suit son contenu, et doit continuer à le suivre quand le texte change. Une
+ * hauteur choisie (un libellé calé sur la hauteur de son bouton) ne vérifie pas
+ * cette égalité et n'est donc jamais réajustée.
+ */
+export declare function hugsText(node: RenderNode): boolean;
+/**
+ * Le noeud, avec la hauteur qui épouse son texte.
+ *
+ * Une boîte à la taille de son texte le place de fait en haut à gauche : le
+ * centrage vertical n'a plus rien à décaler. C'est ce qu'attend qui pose un
+ * texte sans penser à sa boîte ; un conteneur qui veut centrer son libellé,
+ * lui, donne une hauteur explicite.
+ */
+export declare function withFittedTextHeight<T extends RenderNode>(node: T): T;
 /**
  * Transform SVG d'un groupe : translation vers son origine, puis rotation
  * autour du centre de son contenu (exprime dans l'espace local du groupe).

package/dist/shared/render.js

@@ -98,6 +98,28 @@ export function measuredTextHeight(node) {
     const { lineStep } = textMetrics(node);
     return Math.max(lineStep, textLines(node).length * lineStep);
 }
+/**
+ * Vrai quand la boîte épouse déjà exactement son texte.
+ *
+ * C'est le signe qu'aucune hauteur n'a été voulue pour elle-même : la boîte
+ * suit son contenu, et doit continuer à le suivre quand le texte change. Une
+ * hauteur choisie (un libellé calé sur la hauteur de son bouton) ne vérifie pas
+ * cette égalité et n'est donc jamais réajustée.
+ */
+export function hugsText(node) {
+    return Math.abs(Math.abs(node.height) - measuredTextHeight(node)) < 0.5;
+}
+/**
+ * Le noeud, avec la hauteur qui épouse son texte.
+ *
+ * Une boîte à la taille de son texte le place de fait en haut à gauche : le
+ * centrage vertical n'a plus rien à décaler. C'est ce qu'attend qui pose un
+ * texte sans penser à sa boîte ; un conteneur qui veut centrer son libellé,
+ * lui, donne une hauteur explicite.
+ */
+export function withFittedTextHeight(node) {
+    return { ...node, height: measuredTextHeight(node) };
+}
 function shapeAttributes(node) {
     const parts = [];
     if (node.type !== "line" && node.type !== "text") {

package/dist/src/cli/setup-mcp.d.ts

@@ -1,5 +1,24 @@
+/**
+ * Comment la GUI sera exposée. `undefined` des deux côtés = rien n'a été passé
+ * en ligne de commande : on retombe sur le placeholder PROXY_URL à compléter.
+ */
+export interface GuiExposure {
+    proxyUrl?: string;
+    appPort?: number;
+}
+/**
+ * Traduit `--proxy_url=` / `--app_port=` en mode d'exposition de la GUI.
+ * Les deux ensemble sont refusés : au runtime PROXY_URL primerait toujours,
+ * donc un fichier portant les deux serait silencieusement trompeur.
+ */
+export declare function parseGuiExposure(argv: string[]): {
+    exposure: GuiExposure;
+} | {
+    error: string;
+};
 export interface SetupMcpOptions {
     cwd: string;
     force: boolean;
+    exposure?: GuiExposure;
 }
-export declare function runSetupMcp({ cwd, force }: SetupMcpOptions): number;
+export declare function runSetupMcp({ cwd, force, exposure }: SetupMcpOptions): number;

package/dist/src/cli/setup-mcp.js

@@ -16,16 +16,20 @@ function toDisplayName(folder) {
 }
 /**
  * Valeurs volontairement vides : chaque variable est inactive tant qu'elle n'est
- * pas remplie (PROXY_URL vide = GUI désactivée), donc le fichier généré est
- * utilisable tel quel, jamais à moitié cassé.
+ * pas remplie (PROXY_URL et APP_PORT vides = GUI désactivée), donc le fichier
+ * généré est utilisable tel quel, jamais à moitié cassé.
  */
-function buildServerEntry(codeRoot) {
+function buildServerEntry(codeRoot, exposure) {
     const folder = path.basename(codeRoot) || "design";
+    // Un port explicite désactive le placeholder proxy : les deux variables ne
+    // doivent jamais être renseignées ensemble, PROXY_URL primant au runtime.
+    const proxyUrl = exposure.appPort !== undefined ? "" : exposure.proxyUrl ?? "http://localhost:";
     return {
         command: "npx",
         args: ["-y", PACKAGE_NAME],
         env: {
-            PROXY_URL: "http://localhost:",
+            PROXY_URL: proxyUrl,
+            APP_PORT: exposure.appPort !== undefined ? String(exposure.appPort) : "",
             APP_GROUP: capitalize(folder),
             APP_NAME: `Design ${toDisplayName(folder)}`,
             APP_PATH: `/design-${folder}`,
@@ -36,13 +40,60 @@ function buildServerEntry(codeRoot) {
 }
 const GENERATED_VARS = [
     ["PROXY_URL", "URL du proxy pour exposer la GUI (compléter le port)"],
+    ["APP_PORT", "port local si aucun proxy — la GUI est servie sur http://localhost:<port>"],
     ["APP_GROUP", "groupe d'affichage dans le dashboard du proxy"],
     ["APP_NAME", "nom affiché de la GUI dans le dashboard du proxy"],
     ["APP_PATH", "chemin de montage de la GUI derrière le proxy"],
     ["MCP_DESIGN_DATA_DIR", "répertoire de stockage des designs (pré-rempli)"],
     ["MCP_LOG_DIR", "répertoire des logs (défaut : <data>/logs)"],
 ];
-export function runSetupMcp({ cwd, force }) {
+/** Lit `--flag=valeur` (tirets ou underscores acceptés). */
+function readFlag(argv, name) {
+    const prefixes = [`--${name}=`, `--${name.replace(/_/g, "-")}=`];
+    for (const arg of argv) {
+        const prefix = prefixes.find((p) => arg.startsWith(p));
+        if (prefix)
+            return arg.slice(prefix.length).trim();
+    }
+    return undefined;
+}
+/**
+ * Traduit `--proxy_url=` / `--app_port=` en mode d'exposition de la GUI.
+ * Les deux ensemble sont refusés : au runtime PROXY_URL primerait toujours,
+ * donc un fichier portant les deux serait silencieusement trompeur.
+ */
+export function parseGuiExposure(argv) {
+    const rawProxyUrl = readFlag(argv, "proxy_url");
+    const rawAppPort = readFlag(argv, "app_port");
+    if (rawProxyUrl !== undefined && rawAppPort !== undefined) {
+        return { error: "--proxy_url et --app_port sont exclusifs : la GUI passe par le proxy, ou écoute sur un port local." };
+    }
+    if (rawProxyUrl !== undefined) {
+        if (rawProxyUrl === "")
+            return { error: "--proxy_url attend une URL, ex : --proxy_url=http://localhost:3000" };
+        let parsed;
+        try {
+            parsed = new URL(rawProxyUrl);
+        }
+        catch {
+            return { error: `--proxy_url invalide : "${rawProxyUrl}" n'est pas une URL absolue (ex : http://localhost:3000).` };
+        }
+        if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+            return { error: `--proxy_url invalide : protocole "${parsed.protocol}" non supporté (http ou https attendu).` };
+        }
+        // Une barre finale casserait la concaténation PROXY_URL + APP_PATH.
+        return { exposure: { proxyUrl: rawProxyUrl.replace(/\/+$/, "") } };
+    }
+    if (rawAppPort !== undefined) {
+        const port = Number(rawAppPort);
+        if (!Number.isInteger(port) || port < 1 || port > 65535) {
+            return { error: `--app_port invalide : "${rawAppPort}" n'est pas un entier entre 1 et 65535.` };
+        }
+        return { exposure: { appPort: port } };
+    }
+    return { exposure: {} };
+}
+export function runSetupMcp({ cwd, force, exposure = {} }) {
     const target = path.join(cwd, ".mcp.json");
     let config = {};
     const exists = fs.existsSync(target);
@@ -72,16 +123,23 @@ export function runSetupMcp({ cwd, force }) {
         console.error("Relancez avec --force pour écraser cette entrée (les autres serveurs sont préservés).");
         return 1;
     }
-    config.mcpServers[SERVER_NAME] = buildServerEntry(cwd);
+    config.mcpServers[SERVER_NAME] = buildServerEntry(cwd, exposure);
     fs.writeFileSync(target, JSON.stringify(config, null, 2) + "\n", "utf-8");
     const action = alreadyPresent ? "remplacée" : exists ? "ajoutée" : "créée";
     console.log(`Configuration ${SERVER_NAME} ${action} dans ${target}`);
     console.log("");
+    if (exposure.appPort !== undefined) {
+        console.log(`GUI en accès direct : http://localhost:${exposure.appPort} (sans proxy).`);
+    }
+    else if (exposure.proxyUrl !== undefined) {
+        console.log(`GUI exposée via le proxy ${exposure.proxyUrl}.`);
+    }
     console.log('À compléter dans le champ "env" :');
     for (const [name, description] of GENERATED_VARS) {
         console.log(`  ${name.padEnd(24)} ${description}`);
     }
     console.log("");
     console.log("Une variable laissée vide est simplement inactive.");
+    console.log("PROXY_URL et APP_PORT s'excluent : PROXY_URL prime si les deux sont renseignés.");
     return 0;
 }

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

@@ -1,5 +1,6 @@
 import { DesignNodeSchema } from "../../shared/schemas/design.schema.js";
 import { GROUP_DERIVED_FIELDS, NODE_DEFAULTS, NODE_GEOMETRY_FIELDS, NODE_STYLE_FIELDS, SIZE_DERIVED_KINDS, clampNodeSize, defaultNodeName, } from "../../shared/node-defaults.js";
+import { hugsText, measuredTextHeight } from "../../shared/render.js";
 import { CORE_ICONS, hasIcon, iconCount } from "../../shared/icons/index.js";
 import { suggestIcons } from "../../shared/icons/search.js";
 import { shortId } from "./ids.js";
@@ -106,6 +107,14 @@ export function buildNode(input, existingIds, index) {
     const size = clampNodeSize(type, Number(draft.width), Number(draft.height));
     draft.width = size.width;
     draft.height = size.height;
+    // Sans hauteur demandée, la boîte d'un texte est celle de son texte : le bloc
+    // de lignes, centré dans une boîte à sa taille, se pose alors exactement au
+    // point donné — ce que l'appelant attend quand il n'a parlé que de x et y.
+    // Après le clamp, donc : ce plancher garde une boîte dessinée sélectionnable,
+    // il n'a pas à gonfler une boîte qui n'a jamais été dimensionnée à la souris.
+    if (type === "text" && input.height === undefined) {
+        draft.height = measuredTextHeight(draft);
+    }
     const parsed = DesignNodeSchema.safeParse(draft);
     if (!parsed.success) {
         throw new DesignError(`Invalid node: ${parsed.error.issues.map((i) => `${i.path.join(".")} ${i.message}`).join("; ")}`);
@@ -131,6 +140,12 @@ export function applyPatch(node, patch) {
         if (patch[field] !== undefined)
             next[field] = patch[field];
     }
+    // Une boîte qui épousait son texte continue de l'épouser : rallonger le texte
+    // d'une ligne agrandit la boîte au lieu de la faire déborder. Une hauteur
+    // choisie — ou redonnée dans ce patch — reste intacte.
+    if (node.type === "text" && patch.height === undefined && hugsText(node)) {
+        next.height = measuredTextHeight(next);
+    }
     if (node.type === "icon" && patch.icon !== undefined)
         next.icon = requireIconName(patch.icon);
     // Changer le lien echange l'instance de composant, comme un "swap instance".

package/dist/src/gui-worker.js

@@ -21,6 +21,29 @@ function findProjectRoot(startDir) {
 const rootDir = findProjectRoot(__dirname);
 const absoluteStaticRoot = path.resolve(path.join(rootDir, "gui/dist"));
 const configuredAppPath = process.env.APP_PATH || "/design-gui";
+/**
+ * Chemin réellement monté par le proxy. Il peut différer de `configuredAppPath`
+ * quand `APP_PATH_PREFIX` est défini : le client partagé préfixe alors le chemin
+ * naturel et renvoie le chemin final dans `result.path`. Le `<base href>` doit
+ * suivre ce chemin, sinon les assets de la SPA sont demandés au mauvais endroit.
+ */
+let effectiveAppPath = configuredAppPath;
+function resolveGuiMode() {
+    const proxyUrl = process.env.PROXY_URL?.trim();
+    if (proxyUrl)
+        return { kind: "proxy", proxyUrl };
+    const rawPort = process.env.APP_PORT?.trim();
+    if (!rawPort) {
+        return { kind: "disabled", reason: "PROXY_URL et APP_PORT non définis" };
+    }
+    const port = Number(rawPort);
+    if (!Number.isInteger(port) || port < 1 || port > 65535) {
+        return { kind: "disabled", reason: `APP_PORT invalide (${rawPort}) — attendu : entier entre 1 et 65535` };
+    }
+    return { kind: "standalone", port };
+}
+const guiMode = resolveGuiMode();
+const isStandalone = guiMode.kind === "standalone";
 setupLogging({ processLabel: "mcp-design:GUI", logDir: resolveLogDir(rootDir) });
 const logger = createLogger("mcp-design:GUI");
 process.on("uncaughtException", (err) => {
@@ -136,7 +159,7 @@ app.get("/proxy/health", (c) => {
     const memory = process.memoryUsage();
     return c.json({
         status: "ok",
-        proxy: proxyClient ? proxyClient.getStatus() : process.env.PROXY_URL ? "error" : "standalone",
+        proxy: proxyClient ? proxyClient.getStatus() : isStandalone ? "standalone" : "error",
         uptime: process.uptime(),
         memory: { rss: memory.rss, heapUsed: memory.heapUsed },
         ipc: process.connected ? "connected" : "disconnected",
@@ -262,7 +285,8 @@ app.get("/*", (c, next) => {
         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);
+            // En mode standalone la GUI est déjà servie à la racine : même règle.
+            const baseHref = isStandalone || c.req.query("__direct") === "1" ? "/" : getHtmlBaseHref(effectiveAppPath);
             const html = fs.readFileSync(indexPath, "utf8").replace("<head>", `<head>\n    <base href="${baseHref}" />`);
             return c.html(html);
         }
@@ -272,12 +296,51 @@ app.get("/*", (c, next) => {
         return next();
     }
 });
+/**
+ * Lance Hono sur `port` et prévient le master. `publicUrl` est l'URL que
+ * l'utilisateur doit ouvrir : via le proxy, ou directement en localhost.
+ */
+function listen(port, publicUrl, isProxied) {
+    const serverInstance = serve({ fetch: app.fetch, port, 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, 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 ${port} already in use — another GUI instance is running.`);
+            safeSend(IPCMessageSchema.parse({
+                type: "ALREADY_RUNNING",
+                data: { url: publicUrl },
+                timestamp: new Date().toISOString(),
+            }));
+            process.exit(0);
+        }
+        logger.error(`Server error: ${err.message}`);
+        process.exit(1);
+    });
+}
+/** Sans proxy : la GUI écoute sur APP_PORT et est servie à la racine. */
+function startStandalone(port) {
+    const publicUrl = `http://localhost:${port}`;
+    logger.info(`Standalone mode (no PROXY_URL): serving GUI on ${publicUrl}`);
+    setupIpcErrorHandlers();
+    listen(port, publicUrl, false);
+}
 async function startServer() {
-    if (!process.env.PROXY_URL) {
-        process.stderr.write("[GUI] PROXY_URL non défini — arrêt.\n");
+    if (guiMode.kind === "disabled") {
+        process.stderr.write(`[GUI] ${guiMode.reason} — arrêt.\n`);
         process.exit(0);
     }
-    const proxyUrl = process.env.PROXY_URL;
+    if (guiMode.kind === "standalone") {
+        startStandalone(guiMode.port);
+        return;
+    }
+    const proxyUrl = guiMode.proxyUrl;
     const appPath = configuredAppPath;
     const appName = process.env.APP_NAME || "MCP Design";
     logger.info(`Starting server with proxyUrl=${proxyUrl}`);
@@ -311,7 +374,8 @@ async function startServer() {
         return;
     }
     const finalPort = result.port;
-    const publicUrl = result.url || `${proxyUrl}${appPath}`;
+    effectiveAppPath = result.path ?? appPath;
+    const publicUrl = result.url || `${proxyUrl}${effectiveAppPath}`;
     logger.info(`Registered with proxy. Public URL: ${publicUrl}, Local Port: ${finalPort}`);
     const cleanupProxy = async () => {
         if (proxyClient)
@@ -321,23 +385,7 @@ async function startServer() {
     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);
-    });
+    listen(finalPort, publicUrl, true);
 }
 startServer().catch((err) => {
     logger.error(`Failed to start GUI Worker: ${err.message}`);