@imenam/mcp-design 1.0.1 → 1.0.3

package/dist/shared/node-fields.js

@@ -11,7 +11,9 @@ export const NODE_FIELD_DOCS = {
     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.",
+        "Changing it reparents the node — its x/y are then read in the new parent's space, so it moves on screen. " +
+        "This is the field that builds the structure: nest sections, then blocks, then the nodes of a block, rather than dropping " +
+        "everything into one group. Only a handful of top-level sections should sit at the root.",
     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.",

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

@@ -115,9 +115,20 @@ export declare const BaselineSchema: z.ZodObject<{
     }, z.core.$strip>>;
 }, z.core.$strip>;
 export type Baseline = z.infer<typeof BaselineSchema>;
+/**
+ * Chemin du groupe de pages auquel appartient un design, ou null a la racine.
+ *
+ * C'est un simple chemin separe par des "/" plutot qu'une entite a part : un
+ * groupe n'existe que tant qu'une page s'y trouve, donc rien a creer, rien a
+ * nettoyer, et le classement reste lisible dans le JSON.
+ */
+export declare const DESIGN_GROUP_SEPARATOR = "/";
+/** "  Marketing / Landing  " -> "Marketing/Landing" ; "" ou null -> null. */
+export declare function normalizeDesignGroup(value: unknown): string | null;
 export declare const DesignSchema: z.ZodObject<{
     id: z.ZodString;
     name: z.ZodString;
+    group: z.ZodDefault<z.ZodNullable<z.ZodString>>;
     width: z.ZodNumber;
     height: z.ZodNumber;
     background: z.ZodString;
@@ -211,6 +222,8 @@ export type Design = z.infer<typeof DesignSchema>;
 export interface DesignSummary {
     id: string;
     name: string;
+    /** Groupe de pages, chemin "Parent/Enfant", ou null a la racine. */
+    group: string | null;
     width: number;
     height: number;
     nodeCount: number;

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

@@ -73,9 +73,29 @@ export const BaselineSchema = z.object({
     at: z.string(),
     nodes: z.array(DesignNodeSchema),
 });
+/**
+ * Chemin du groupe de pages auquel appartient un design, ou null a la racine.
+ *
+ * C'est un simple chemin separe par des "/" plutot qu'une entite a part : un
+ * groupe n'existe que tant qu'une page s'y trouve, donc rien a creer, rien a
+ * nettoyer, et le classement reste lisible dans le JSON.
+ */
+export const DESIGN_GROUP_SEPARATOR = "/";
+/** "  Marketing / Landing  " -> "Marketing/Landing" ; "" ou null -> null. */
+export function normalizeDesignGroup(value) {
+    if (value === null || value === undefined)
+        return null;
+    const segments = String(value)
+        .split(DESIGN_GROUP_SEPARATOR)
+        .map((segment) => segment.trim())
+        .filter((segment) => segment !== "");
+    return segments.length === 0 ? null : segments.join(DESIGN_GROUP_SEPARATOR);
+}
 export const DesignSchema = z.object({
     id: z.string(),
     name: z.string(),
+    /** Groupe de pages, chemin "Parent/Enfant", ou null a la racine. */
+    group: z.string().nullable().default(null),
     width: z.number().positive(),
     height: z.number().positive(),
     background: z.string(),

package/dist/src/core/design-store.d.ts

@@ -4,6 +4,8 @@ export interface CreateDesignInput {
     width?: number;
     height?: number;
     background?: string;
+    /** Groupe de pages, chemin "Parent/Enfant". Null ou omis : a la racine. */
+    group?: string | null;
 }
 export interface MutateOptions {
     /**

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

@@ -1,6 +1,6 @@
 import fs from "fs";
 import path from "path";
-import { DesignSchema, } from "../../shared/schemas/design.schema.js";
+import { DesignSchema, normalizeDesignGroup, } from "../../shared/schemas/design.schema.js";
 import { DesignError } from "./node-factory.js";
 import { normalizeHierarchy } from "./hierarchy.js";
 import { migrateDesign } from "./migrate.js";
@@ -151,6 +151,7 @@ export class DesignStore {
             summaries.push({
                 id: design.id,
                 name: design.name,
+                group: design.group,
                 width: design.width,
                 height: design.height,
                 nodeCount: design.nodes.length,
@@ -225,6 +226,7 @@ export class DesignStore {
         const design = {
             id: this.allocateId(name),
             name,
+            group: normalizeDesignGroup(input.group),
             width,
             height,
             background: input.background ?? "#ffffff",

package/dist/src/gui-worker.js

@@ -227,6 +227,19 @@ app.put("/api/designs/:id", async (c) => {
         return c.json({ error: result.error }, 400);
     return c.json(result.data);
 });
+app.put("/api/designs/:id/group", async (c) => {
+    let body = {};
+    try {
+        body = await c.req.json();
+    }
+    catch {
+        return c.json({ error: "Invalid JSON body" }, 400);
+    }
+    const result = await ipcRequest("SET_DESIGN_GROUP", { id: c.req.param("id"), group: body?.group ?? null }, 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)

package/dist/src/index.js

@@ -15,6 +15,7 @@ import { EXPORT_FORMATS } from "./core/export.js";
 import { MIN_LINE_HEIGHT_PX } from "../shared/render.js";
 import { NODE_FIELD_DOCS } from "../shared/node-fields.js";
 import { REORDER_DIRECTIONS } from "../shared/tree.js";
+import { normalizeDesignGroup } from "../shared/schemas/design.schema.js";
 import { listDesigns } from "./tools/list-designs.js";
 import { createDesign } from "./tools/create-design.js";
 import { getDesign } from "./tools/get-design.js";
@@ -23,7 +24,9 @@ import { deleteDesign } from "./tools/delete-design.js";
 import { addNodes } from "./tools/add-nodes.js";
 import { updateNodes } from "./tools/update-nodes.js";
 import { deleteNodes } from "./tools/delete-nodes.js";
+import { duplicateNodes, MAX_DUPLICATE_COPIES } from "./tools/duplicate-nodes.js";
 import { groupNodes } from "./tools/group-nodes.js";
+import { groupDesigns } from "./tools/group-designs.js";
 import { ungroupNodes } from "./tools/ungroup-nodes.js";
 import { getChanges } from "./tools/get-changes.js";
 import { markSynced } from "./tools/mark-synced.js";
@@ -131,6 +134,7 @@ function handleIPCMessage(msg) {
                     width: msg.data?.width === undefined ? undefined : Number(msg.data.width),
                     height: msg.data?.height === undefined ? undefined : Number(msg.data.height),
                     background: msg.data?.background,
+                    group: msg.data?.group ?? null,
                 });
                 reply(msg, "CREATE_DESIGN_RESPONSE", { design, designs: store.list() });
             }
@@ -155,6 +159,17 @@ function handleIPCMessage(msg) {
                 replyError(msg, "DELETE_DESIGN_RESPONSE", err.message);
             }
             return;
+        case "SET_DESIGN_GROUP":
+            try {
+                store.mutate(String(msg.data?.id), "user", (draft) => {
+                    draft.group = normalizeDesignGroup(msg.data?.group);
+                });
+                reply(msg, "SET_DESIGN_GROUP_RESPONSE", { designs: store.list() });
+            }
+            catch (err) {
+                replyError(msg, "SET_DESIGN_GROUP_RESPONSE", err.message);
+            }
+            return;
         case "GET_CONFIG":
             reply(msg, "GET_CONFIG_RESPONSE", { dataDir: store.getDataDir(), version: APP_VERSION });
             return;
@@ -334,7 +349,21 @@ const NODE_PROPERTIES = {
     textAlign: { type: "string", enum: ["left", "center", "right"], description: NODE_FIELD_DOCS.textAlign },
     lineHeight: { type: "number", minimum: MIN_LINE_HEIGHT_PX, description: NODE_FIELD_DOCS.lineHeight },
 };
+/**
+ * Consigne de structure, repetee dans les outils qui creent ou reorganisent des
+ * noeuds. Sans elle, un agent produit spontanement un seul groupe contenant
+ * quarante elements a plat : le design devient impossible a selectionner, a
+ * deplacer ou a exporter en composants.
+ */
+const HIERARCHY_DOC = "STRUCTURE THE ARTBOARD AS A TREE OF NESTED GROUPS, NOT AS ONE FLAT GROUP. " +
+    "A single group holding every element is the failure mode to avoid: nothing can then be moved, hidden, restyled or exported on its own. " +
+    "Mirror the structure real code would have — page > section (header, hero, feature list, footer) > repeated block (a card, a list row, a form field) > " +
+    "the few nodes of that block (icon, title, body, button). Three to four levels of nesting is normal, and any element that repeats deserves its own group. " +
+    "Build the hierarchy as you go: create a \"group\" node and, in the SAME add_nodes call, give its children that group's id as parentId — a child's x/y are then " +
+    "read from the group's origin, so the whole block moves as one. Name each group after what it is (\"Header\", \"Card / Pricing\", \"Nav item\"), never \"Groupe 1\": " +
+    "those names are what the user reads in the layer panel and what an export turns into component names.";
 const DESIGN_ID_DOC = "Id of the design, as returned by list_designs or create_design.";
+const GROUP_PATH_DOC = "Page group this design belongs to, as a path like \"Marketing\" or \"Marketing/Landing\" (the \"/\" nests sub-groups). Pages sharing a path are folded together in the sidebar, which is how a project with many pages stays readable. Omit or pass null to leave the page at the root.";
 server.setRequestHandler(ListToolsRequestSchema, async () => ({
     tools: [
         {
@@ -344,7 +373,8 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
         },
         {
             name: "create_design",
-            description: "Create an empty design (artboard). Returns its id, which every other tool needs. Default canvas is 1440x900 on a white background.",
+            description: "Create an empty design (artboard). Returns its id, which every other tool needs. Default canvas is 1440x900 on a white background. " +
+                "As soon as a project has more than a handful of pages, pass `group` so they are filed under a named page group instead of piling up flat in the sidebar.",
             inputSchema: {
                 type: "object",
                 properties: {
@@ -352,6 +382,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
                     width: { type: "number", description: "Canvas width in pixels (default 1440). Use 375 for mobile, 1440 for desktop." },
                     height: { type: "number", description: "Canvas height in pixels (default 900)." },
                     background: { type: "string", description: "CSS color of the canvas background (default #ffffff)." },
+                    group: { type: ["string", "null"], description: GROUP_PATH_DOC },
                 },
                 required: ["name"],
             },
@@ -370,12 +401,13 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
         },
         {
             name: "update_design",
-            description: "Change the artboard itself: its name, its dimensions or its background color. Does not touch the nodes.",
+            description: "Change the artboard itself: its name, its page group, its dimensions or its background color. Does not touch the nodes.",
             inputSchema: {
                 type: "object",
                 properties: {
                     design_id: { type: "string", description: DESIGN_ID_DOC },
                     name: { type: "string", description: "New name." },
+                    group: { type: ["string", "null"], description: `New page group. ${GROUP_PATH_DOC} Pass null to move the page back to the root.` },
                     width: { type: "number", description: "New canvas width in pixels." },
                     height: { type: "number", description: "New canvas height in pixels." },
                     background: { type: "string", description: "New CSS background color." },
@@ -396,7 +428,8 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
             name: "add_nodes",
             description: `Add one or more nodes on top of the design. Node types: ${Object.keys(NODE_DEFAULTS).join(", ")}. ` +
                 NODE_FIELDS_DOC +
-                " Nodes are drawn in array order, so the last one added sits on top.",
+                " Nodes are drawn in array order, so the last one added sits on top. " +
+                HIERARCHY_DOC,
             inputSchema: {
                 type: "object",
                 properties: {
@@ -421,6 +454,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
         {
             name: "update_nodes",
             description: "Patch existing nodes. Each entry needs an id plus only the fields to change; everything else is preserved. " +
+                "Changing parentId is how an existing element is moved into (or out of) a group, which is the way to deepen a structure that came out too flat. " +
                 NODE_FIELDS_DOC +
                 " The whole batch is validated before anything is written, so an invalid entry changes nothing.",
             inputSchema: {
@@ -456,9 +490,37 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
                 required: ["design_id", "node_ids"],
             },
         },
+        {
+            name: "duplicate_nodes",
+            description: "Copy elements or whole groups. A group is copied with everything inside it, and every copy gets fresh ids. " +
+                "This is the tool for repeated structures — a card, a list row, a section — build one carefully, then copy it and patch only what differs. " +
+                "Copies land next to the originals by default; use offset_x/offset_y to place them, count to lay out a series, and parent_id to drop them into another group.",
+            inputSchema: {
+                type: "object",
+                properties: {
+                    design_id: { type: "string", description: DESIGN_ID_DOC },
+                    node_ids: {
+                        type: "array",
+                        items: { type: "string" },
+                        description: "Ids of the elements or groups to copy. A node whose ancestor is also listed is ignored: the ancestor already carries it.",
+                        minItems: 1,
+                    },
+                    offset_x: { type: "number", description: "Horizontal shift of each copy, in pixels (default 20). Use the element width plus a gutter to lay copies out in a row." },
+                    offset_y: { type: "number", description: "Vertical shift of each copy, in pixels (default 20). Use the element height plus a gutter to stack copies in a column." },
+                    count: { type: "number", description: `How many copies to make (default 1, max ${MAX_DUPLICATE_COPIES}). Copy n is shifted by n times the offset, which lays out a regular series in one call.` },
+                    parent_id: {
+                        type: ["string", "null"],
+                        description: "Group the copies are dropped into. Their x/y are then read in that group's space. Omit to keep the original's parent, or pass null to place the copies at the root.",
+                    },
+                },
+                required: ["design_id", "node_ids"],
+            },
+        },
         {
             name: "group_nodes",
-            description: "Wrap existing nodes into a new group, so they can be moved, hidden or reordered together. The nodes must currently share the same parent, and nothing moves on screen: their coordinates are rebased onto the new group.",
+            description: "Wrap existing nodes into a new group, so they can be moved, hidden or reordered together. The nodes must currently share the same parent, and nothing moves on screen: their coordinates are rebased onto the new group. " +
+                "Call it repeatedly to build depth: group the nodes of one card, then group the cards into a row, then the row with its heading into a section. " +
+                HIERARCHY_DOC,
             inputSchema: {
                 type: "object",
                 properties: {
@@ -510,6 +572,28 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
                 required: ["design_id", "node_ids", "position"],
             },
         },
+        {
+            name: "group_designs",
+            description: "File several pages into the same page group, or pull them back to the root. This is how the sidebar gets reorganised after the fact: " +
+                "create the pages first, then sort them, or move a whole batch under a new heading. " +
+                GROUP_PATH_DOC,
+            inputSchema: {
+                type: "object",
+                properties: {
+                    design_ids: {
+                        type: "array",
+                        items: { type: "string" },
+                        description: "Ids of the pages to file, as returned by list_designs.",
+                        minItems: 1,
+                    },
+                    group: {
+                        type: ["string", "null"],
+                        description: `Destination page group. ${GROUP_PATH_DOC} Pass null to move the pages back to the root.`,
+                    },
+                },
+                required: ["design_ids", "group"],
+            },
+        },
         {
             name: "get_changes",
             description: "Show every node added, modified, removed or reordered since the last mark_synced — this is how you pick up what the user changed by hand in the GUI. Reading changes never acknowledges them; call mark_synced once the changes are integrated into the code.",
@@ -619,6 +703,11 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 notifyDesignChanged(result.design.id);
                 return result;
             }
+            case "duplicate_nodes": {
+                const result = duplicateNodes(store, params);
+                notifyDesignChanged(result.design.id);
+                return result;
+            }
             case "group_nodes": {
                 const result = groupNodes(store, params);
                 notifyDesignChanged(result.design.id);
@@ -634,6 +723,11 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 notifyDesignChanged(result.design.id);
                 return result;
             }
+            case "group_designs": {
+                const result = groupDesigns(store, params);
+                broadcastToGUI({ type: "DESIGNS_UPDATED", data: { designs: store.list() }, timestamp: new Date().toISOString() });
+                return result;
+            }
             case "get_changes":
                 return getChanges(store, params);
             case "mark_synced": {

package/dist/src/tools/create-design.js

@@ -6,9 +6,11 @@ export function createDesign(store, args) {
         width: args?.width === undefined ? undefined : Number(args.width),
         height: args?.height === undefined ? undefined : Number(args.height),
         background: typeof args?.background === "string" ? args.background : undefined,
+        group: args?.group === undefined ? null : args.group,
     });
     return {
-        ...textResult(`Design "${design.name}" created with id "${design.id}" (${design.width}x${design.height}, background ${design.background}).\n` +
+        ...textResult(`Design "${design.name}" created with id "${design.id}" (${design.width}x${design.height}, background ${design.background})` +
+            `${design.group === null ? "" : ` in page group "${design.group}"`}.\n` +
             `Add content with add_nodes, then open the GUI to let the user refine it.`),
         design,
     };

package/dist/src/tools/duplicate-nodes.d.ts

@@ -0,0 +1,11 @@
+import type { DesignStore } from "../core/design-store.js";
+import type { MutationResult } from "./add-nodes.js";
+export declare const MAX_DUPLICATE_COPIES = 50;
+/**
+ * Copie des éléments — un groupe emporte tout son contenu.
+ *
+ * Les identifiants sont réattribués et les liens parent/enfant recâblés sur les
+ * copies : sans cela, deux noeuds partageraient un id, ce qui casserait aussi
+ * bien le rendu que le diff relu par l'agent.
+ */
+export declare function duplicateNodes(store: DesignStore, args: Record<string, unknown> | undefined): MutationResult;

package/dist/src/tools/duplicate-nodes.js

@@ -0,0 +1,104 @@
+import { descendantIds, withoutRedundantDescendants } from "../../shared/tree.js";
+import { DesignError } from "../core/node-factory.js";
+import { shortId } from "../core/ids.js";
+import { requireString, textResult } from "./types.js";
+/** Décalage par défaut d'une copie, en pixels : assez pour la voir, assez peu pour la retrouver. */
+const DEFAULT_OFFSET = 20;
+export const MAX_DUPLICATE_COPIES = 50;
+function readNumber(args, field, fallback) {
+    if (args?.[field] === undefined)
+        return fallback;
+    const value = Number(args[field]);
+    if (!Number.isFinite(value))
+        throw new DesignError(`"${field}" must be a number.`);
+    return value;
+}
+/**
+ * Copie des éléments — un groupe emporte tout son contenu.
+ *
+ * Les identifiants sont réattribués et les liens parent/enfant recâblés sur les
+ * copies : sans cela, deux noeuds partageraient un id, ce qui casserait aussi
+ * bien le rendu que le diff relu par l'agent.
+ */
+export function duplicateNodes(store, args) {
+    const id = requireString(args, "design_id");
+    const nodeIds = args?.node_ids;
+    if (!Array.isArray(nodeIds) || nodeIds.length === 0) {
+        throw new Error(`"node_ids" is required and must be a non-empty array of node ids.`);
+    }
+    const current = store.get(id);
+    const byId = new Map(current.nodes.map((node) => [node.id, node]));
+    for (const raw of nodeIds) {
+        if (!byId.has(String(raw)))
+            throw new DesignError(`Node "${String(raw)}" not found in design "${id}".`);
+    }
+    // Un élément dont le groupe est aussi listé serait copié deux fois : une fois
+    // pour lui-même, une fois avec son groupe.
+    const roots = withoutRedundantDescendants(current.nodes, nodeIds.map((raw) => String(raw)));
+    const offsetX = readNumber(args, "offset_x", DEFAULT_OFFSET);
+    const offsetY = readNumber(args, "offset_y", DEFAULT_OFFSET);
+    const count = readNumber(args, "count", 1);
+    if (!Number.isInteger(count) || count < 1 || count > MAX_DUPLICATE_COPIES) {
+        throw new DesignError(`"count" must be an integer between 1 and ${MAX_DUPLICATE_COPIES}.`);
+    }
+    let parentId;
+    if (args?.parent_id !== undefined) {
+        if (args.parent_id === null) {
+            parentId = null;
+        }
+        else {
+            const parent = byId.get(String(args.parent_id));
+            if (!parent)
+                throw new DesignError(`Group "${String(args.parent_id)}" not found in design "${id}".`);
+            if (parent.type !== "group") {
+                throw new DesignError(`"parent_id" must reference a group, but "${parent.id}" is a "${parent.type}".`);
+            }
+            parentId = parent.id;
+        }
+    }
+    // Le sous-arbre complet de chaque racine, dans l'ordre du document : l'ordre
+    // d'empilement relatif des copies reste celui des originaux.
+    const included = new Set(roots);
+    for (const rootId of roots)
+        for (const descendant of descendantIds(current.nodes, rootId))
+            included.add(descendant);
+    const source = current.nodes.filter((node) => included.has(node.id));
+    const copies = [];
+    const createdRootIds = [];
+    for (let copyIndex = 1; copyIndex <= count; copyIndex++) {
+        const idMap = new Map(source.map((node) => [node.id, shortId(node.type === "group" ? "g" : "n")]));
+        for (const node of source) {
+            const isRoot = roots.includes(node.id);
+            const copy = {
+                ...structuredClone(node),
+                id: idMap.get(node.id),
+                // Seules les racines sont décalées et reparentées : les descendants sont
+                // exprimés dans l'espace de leur parent et suivent donc tout seuls.
+                parentId: isRoot
+                    ? parentId === undefined
+                        ? node.parentId
+                        : parentId
+                    : (idMap.get(node.parentId ?? "") ?? node.parentId),
+                x: node.x + (isRoot ? offsetX * copyIndex : 0),
+                y: node.y + (isRoot ? offsetY * copyIndex : 0),
+            };
+            copies.push(copy);
+            if (isRoot)
+                createdRootIds.push(copy.id);
+        }
+    }
+    const design = store.mutate(id, "agent", (draft) => {
+        draft.nodes.push(...copies);
+    });
+    const lines = copies
+        .filter((node) => createdRootIds.includes(node.id))
+        .map((node) => `- ${node.id} — "${node.name}" (${node.type}) at ${Math.round(node.x)},${Math.round(node.y)}`);
+    return {
+        ...textResult([
+            `Copied ${roots.length} node(s)${count > 1 ? ` ${count} times` : ""} in "${design.name}" ` +
+                `(${copies.length} node(s) created, content included). New top-level copies:`,
+            ...lines,
+        ].join("\n")),
+        design,
+    };
+}

package/dist/src/tools/group-designs.d.ts

@@ -0,0 +1,10 @@
+import type { DesignStore } from "../core/design-store.js";
+import { type ToolResult } from "./types.js";
+/**
+ * Range plusieurs pages dans un meme groupe, ou les en sort (group = null).
+ *
+ * Un outil dedie plutot qu'un appel a update_design par page : reorganiser la
+ * barre laterale se fait presque toujours par lots, et chaque appel est une
+ * ecriture disque verrouillee.
+ */
+export declare function groupDesigns(store: DesignStore, args: Record<string, unknown> | undefined): ToolResult;

package/dist/src/tools/group-designs.js

@@ -0,0 +1,33 @@
+import { normalizeDesignGroup } from "../../shared/schemas/design.schema.js";
+import { textResult } from "./types.js";
+/**
+ * Range plusieurs pages dans un meme groupe, ou les en sort (group = null).
+ *
+ * Un outil dedie plutot qu'un appel a update_design par page : reorganiser la
+ * barre laterale se fait presque toujours par lots, et chaque appel est une
+ * ecriture disque verrouillee.
+ */
+export function groupDesigns(store, args) {
+    const ids = args?.design_ids;
+    if (!Array.isArray(ids) || ids.length === 0) {
+        throw new Error(`"design_ids" is required and must be a non-empty array of design ids.`);
+    }
+    if (!("group" in (args ?? {}))) {
+        throw new Error(`"group" is required. Pass a path like "Marketing/Landing", or null to move the pages back to the root.`);
+    }
+    const group = normalizeDesignGroup(args.group);
+    // Toutes les pages sont verifiees avant la premiere ecriture : un id fautif
+    // ne doit pas laisser le classement a moitie applique.
+    const targets = ids.map((raw) => {
+        const id = String(raw);
+        if (!store.has(id))
+            throw new Error(`Design "${id}" not found. Use list_designs to see the available pages.`);
+        return id;
+    });
+    for (const id of targets) {
+        store.mutate(id, "agent", (draft) => {
+            draft.group = group;
+        });
+    }
+    return textResult(`Moved ${targets.length} page(s) ${group === null ? "back to the root" : `into page group "${group}"`}: ${targets.join(", ")}.`);
+}

package/dist/src/tools/list-designs.js

@@ -4,10 +4,27 @@ export function listDesigns(store) {
     if (designs.length === 0) {
         return textResult("No design yet. Use create_design to start one.");
     }
-    const lines = designs.map((d) => {
+    const describe = (d) => {
         const pending = d.pendingChanges > 0 ? ` — ${d.pendingChanges} unsynced change(s)` : "";
         return (`- ${d.id} — "${d.name}" ${d.width}x${d.height}, ${d.nodeCount} node(s), ` +
             `rev ${d.revision} last edited by ${d.lastEditor} at ${d.updatedAt}${pending}`);
-    });
+    };
+    // Presentées par groupe de pages : c'est la vue qu'a l'utilisateur dans la
+    // barre latérale, et celle qui montre à l'agent où ranger une nouvelle page.
+    const byGroup = new Map();
+    for (const design of designs) {
+        const key = design.group ?? "";
+        const bucket = byGroup.get(key);
+        if (bucket)
+            bucket.push(design);
+        else
+            byGroup.set(key, [design]);
+    }
+    const lines = [];
+    for (const key of [...byGroup.keys()].sort()) {
+        lines.push(key === "" ? "[no group]" : `[${key}]`);
+        for (const design of byGroup.get(key))
+            lines.push(`  ${describe(design)}`);
+    }
     return textResult([`${designs.length} design(s):`, ...lines].join("\n"));
 }

package/dist/src/tools/update-design.js

@@ -1,8 +1,9 @@
+import { normalizeDesignGroup } from "../../shared/schemas/design.schema.js";
 import { requireString, textResult } from "./types.js";
 /** Propriétés de la planche elle-même (nom, dimensions, fond) — pas de ses noeuds. */
 export function updateDesign(store, args) {
     const id = requireString(args, "design_id");
-    const fields = ["name", "width", "height", "background"];
+    const fields = ["name", "group", "width", "height", "background"];
     if (fields.every((field) => args?.[field] === undefined)) {
         throw new Error(`Nothing to update. Provide at least one of: ${fields.join(", ")}.`);
     }
@@ -24,6 +25,12 @@ export function updateDesign(store, args) {
             draft[field] = value;
             changed.push(`${field} -> ${value}`);
         }
+        if (args?.group !== undefined) {
+            // null (ou "") sort la page de tout groupe : c'est la seule facon de la
+            // remettre a la racine sans passer par un autre outil.
+            draft.group = normalizeDesignGroup(args.group);
+            changed.push(`group -> ${draft.group === null ? "(racine)" : `"${draft.group}"`}`);
+        }
         if (args?.background !== undefined) {
             draft.background = String(args.background);
             changed.push(`background -> ${draft.background}`);

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const APP_VERSION = "1.0.1";
+export declare const APP_VERSION = "1.0.3";

package/dist/src/version.js

@@ -1,2 +1,2 @@
 // Auto-generated version file - do not edit manually
-export const APP_VERSION = '1.0.1';
+export const APP_VERSION = '1.0.3';

package/gui/dist/assets/index-C6fXmzfu.css

@@ -0,0 +1 @@
+:root{--ink:#16161a;--ink-soft:#5c5c66;--ink-faint:#8e8e99;--paper:#fff;--shell:#f4f4f2;--line:#e0e0dc;--line-strong:#c9c9c3;--accent:#1b4dd6;--accent-soft:#e8edfc;--danger:#b4231f;--ok:#1f7a45;color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px}*{box-sizing:border-box}body,html,#root{height:100%;margin:0}body{background:var(--shell)}button{font:inherit;color:inherit;cursor:pointer}input,select,textarea{font:inherit;color:inherit}h1,h2{letter-spacing:.02em;margin:0;font-size:13px;font-weight:600}code{background:var(--shell);border-radius:3px;padding:0 3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.app{grid-template-columns:var(--left-panel,232px) 5px minmax(0, 1fr) 5px var(--right-panel,268px);height:100%;display:grid}.panel-resizer{background:var(--line);cursor:col-resize;touch-action:none;position:relative}.panel-resizer:after{content:"";position:absolute;inset:0 -3px}.panel-resizer:hover,.panel-resizer:active{background:var(--accent)}.sidebar,.right-rail{background:var(--paper);overflow-y:auto}.sidebar{border-right:1px solid var(--line);padding:14px}.right-rail{border-left:1px solid var(--line);flex-direction:column;display:flex}.workspace{flex-direction:column;min-width:0;display:flex}.workspace-empty{color:var(--ink-faint);flex:1;place-items:center;display:grid}.toolbar{background:var(--paper);border-bottom:1px solid var(--line);align-items:center;gap:16px;padding:8px 14px;display:flex}.tool-group{align-items:center;gap:4px;display:flex}.tool-button{background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;line-height:1;display:inline-flex}.tool-button:hover:not(:disabled){background:var(--shell)}.tool-button[data-active]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.tool-button:disabled{opacity:.35;cursor:default}.tool-glyph{text-align:center;flex-shrink:0;width:15px;font-size:15px}.tool-label{font-size:12px}.zoom-control{color:var(--ink-soft);align-items:center;gap:6px;font-size:12px;display:inline-flex}.zoom-control select{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:4px 6px}.toolbar-status{align-items:center;gap:8px;margin-left:auto;font-size:12px;display:flex}.status-name{font-weight:600}.status-chip{background:var(--shell);color:var(--ink-soft);border-radius:999px;padding:3px 8px}.status-chip[data-state=saved]{color:var(--ok)}.status-chip[data-state=error]{color:var(--danger)}.canvas-viewport{touch-action:none;overscroll-behavior:contain;flex:1;position:relative;overflow:hidden}.canvas-viewport[data-pan],.canvas-viewport[data-pan] .canvas-surface,.canvas-viewport[data-pan] .canvas-node{cursor:grab}.canvas-stage{transform-origin:0 0;position:absolute;top:0;left:0;box-shadow:0 1px 2px #00000014,0 12px 32px #00000014}.canvas-surface{transform-origin:0 0;position:absolute;top:0;left:0;overflow:hidden}.canvas-surface[data-tool=select]{cursor:default}.canvas-surface:not([data-tool=select]){cursor:crosshair}.canvas-svg{display:block}.canvas-node[data-hidden]{visibility:hidden}.canvas-group{pointer-events:none}.canvas-group .canvas-node{pointer-events:auto}.canvas-surface[data-tool=select] .canvas-node{cursor:move}.selection-frame{fill:none;stroke:var(--accent);stroke-width:1px;pointer-events:none}.creation-preview{fill:#1b4dd614;stroke:var(--accent);stroke-width:1px;stroke-dasharray:4 3;pointer-events:none}.marquee{fill:#1b4dd60f;stroke:var(--accent);stroke-width:1px;pointer-events:none}.handle{background:var(--paper);border:1px solid var(--accent);border-radius:2px;width:9px;height:9px;margin:-5px 0 0 -5px;position:absolute}.text-editor{border:1px solid var(--accent);resize:none;white-space:pre-wrap;background:#ffffffeb;outline:none;margin:0;padding:0;position:absolute;overflow:hidden}.design-tree{border-radius:6px;gap:2px;min-height:60px;display:grid}.design-tree[data-drop]{box-shadow:inset 0 0 0 1px var(--accent)}.design-group{gap:2px;display:grid}.design-group-header{width:100%;color:var(--ink-soft);text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:5px 6px;font-size:12px;font-weight:600;display:flex}.design-group-header:hover{background:var(--shell)}.design-group[data-drop]{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);border-radius:6px}.design-group[data-drop]>.design-group-header,.design-group[data-drop]>.design-group-header .design-group-caret,.design-group[data-drop]>.design-group-header .design-group-count{color:var(--accent)}.design-group-caret{width:10px;color:var(--ink-faint)}.design-group-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.design-group-count{color:var(--ink-faint);font-size:10px;font-weight:500}.sidebar-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.ghost-button{border:1px solid var(--line-strong);background:0 0;border-radius:6px;padding:4px 8px;font-size:12px}.ghost-button:hover{background:var(--shell)}.primary-button{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:6px 10px;font-size:12px}.primary-button:disabled{opacity:.4;cursor:default}.create-form{background:var(--shell);border-radius:8px;gap:6px;margin-bottom:12px;padding:10px;display:grid}.create-form input,.create-form select{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:6px 8px}.design-list{gap:2px;margin:0;padding:0;list-style:none;display:grid}.design-list li{align-items:center;gap:2px;display:flex}.design-item{text-align:left;background:0 0;border:1px solid #0000;border-radius:6px;flex:1;gap:2px;min-width:0;padding:8px;display:grid}.design-item:hover{background:var(--shell)}.design-item[data-active]{background:var(--accent-soft);border-color:var(--accent)}.design-name{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.design-meta{color:var(--ink-faint);font-size:11px}.design-badge{color:#8a5a00;background:#fdf1d6;border-radius:999px;justify-self:start;padding:1px 6px;font-size:10px}.icon-button{color:var(--ink-faint);background:0 0;border:none;border-radius:4px;padding:4px 6px;line-height:1}.icon-button:hover:not(:disabled){background:var(--shell);color:var(--ink)}.icon-button:disabled{opacity:.3;cursor:default}.empty-hint{color:var(--ink-faint);margin:12px 0 0;font-size:12px;line-height:1.5}.inspector{border-bottom:1px solid var(--line);align-content:start;gap:10px;padding:14px;display:grid}.inspector h2{justify-content:space-between;align-items:baseline;gap:8px;display:flex;overflow:hidden}.inspector-type{color:var(--ink-faint);flex-shrink:0;font-size:11px;font-weight:400}.field{gap:4px;min-width:0;display:grid}.field>span{color:var(--ink-soft);font-size:11px}.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--paper);border-radius:6px;width:100%;padding:5px 7px}.field textarea{resize:vertical;font-family:inherit}.field-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.color-input{align-items:center;gap:6px;display:flex}.color-input input[type=color]{flex-shrink:0;width:30px;height:28px;padding:2px}.toggle-button{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:5px 7px}.toggle-button[data-active]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.segmented{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.segmented button{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:5px 0}.segmented button[data-active]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.inspector-actions{grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;display:grid}.inspector-actions button{border:1px solid var(--line-strong);background:var(--paper);border-radius:6px;padding:6px 4px;font-size:12px}.inspector-actions button:hover{background:var(--shell)}.inspector-actions .danger{color:var(--danger);border-color:#e8c4c3}.layers{flex-direction:column;min-height:0;padding:14px;display:flex}.layers-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.layers-actions{gap:2px;display:flex}.layers ul{align-content:start;gap:1px;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.layer-row{align-items:center;gap:2px;display:flex}.layer-twisty{width:14px;color:var(--ink-faint);text-align:center;background:0 0;border:none;flex-shrink:0;padding:0;font-size:10px;line-height:1}.layer-twisty:hover{color:var(--ink)}.layer-count{color:var(--ink-faint);background:var(--shell);border-radius:999px;flex-shrink:0;margin-left:auto;padding:0 5px;font-size:10px}.layer-item[data-group] .layer-name{font-weight:600}.layer-item{text-align:left;background:0 0;border:1px solid #0000;border-radius:5px;align-items:baseline;gap:8px;width:100%;min-width:0;padding:5px 7px;display:flex}.layer-item:hover{background:var(--shell)}.layer-item[data-active]{background:var(--accent-soft);border-color:var(--accent)}.layer-kind{color:var(--ink-faint);flex-shrink:0;width:58px;font-size:10px}.layer-name{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.error-toast{background:var(--ink);color:#fff;border-radius:8px;align-items:center;gap:12px;padding:10px 14px;font-size:12px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0003}.error-toast button{color:inherit;opacity:.7;background:0 0;border:none}