@pixel-normal-edit/mcp 2.0.6 → 2.0.8

package/domains/art-tree/transform_lessons_2.js

@@ -0,0 +1,102 @@
+const shapes = require('./shapes');
+const transformShapes = require('./transform_shapes');
+const structureLessons = require('./structure_lessons');
+
+/**
+ * Lesson: Rotate (Rotation)
+ * Analyzing how objects change when rotated around X, Y, Z axes.
+ * We can reuse the Axis Orientation lesson as it perfectly demonstrates rotation.
+ */
+function lessonRotate(canvasSize = 32, color = '#ff5722') {
+  // Reusing the axis orientation lesson which draws cylinders rotated along X, Y, Z
+  return structureLessons.lessonAxisOrientation(canvasSize, color);
+}
+
+/**
+ * Lesson: Cut (Slice a form)
+ * Sphere -> Truncated Sphere (exposing internal cross-section)
+ */
+function lessonCut(canvasSize = 32, color = '#8bc34a') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.35);
+
+  // Original sphere (ghost)
+  commands.push(shapes.drawCircle(cx, cy, r, '#bdbdbd', false));
+  
+  // Cut sphere
+  commands.push(...transformShapes.drawTruncatedSphere(cx, cy, r, color));
+
+  return commands;
+}
+
+/**
+ * Lesson: Hollow (Carve interior)
+ * Cylinder -> Pipe/Hole
+ */
+function lessonHollow(canvasSize = 32, color = '#3f51b5') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const outerR = Math.floor(canvasSize * 0.35);
+  const innerR = Math.floor(canvasSize * 0.25);
+  const h = Math.floor(canvasSize * 0.6);
+
+  // Hollow cylinder
+  commands.push(...transformShapes.drawHollowCylinder(cx, cy, outerR, innerR, h, color));
+
+  return commands;
+}
+
+/**
+ * Lesson: Combine (Merge forms)
+ * Box + Cylinder (e.g., a wheel on an axle, or a tower on a base)
+ */
+function lessonCombine(canvasSize = 32, color = '#607d8b') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  
+  // 1. Base Box
+  const w = Math.floor(canvasSize * 0.5);
+  const h = Math.floor(canvasSize * 0.2);
+  const d = Math.floor(canvasSize * 0.3);
+  const dx = Math.floor(d * 0.7);
+  const dy = Math.floor(d * 0.5);
+  
+  const fX = cx - Math.floor(w/2);
+  const fY = cy + Math.floor(canvasSize * 0.2);
+  
+  // Front face
+  commands.push(shapes.drawRectangle(fX, fY, w, h, color, false));
+  // Top face (oblique)
+  commands.push(shapes.drawLine(fX, fY, fX + dx, fY - dy, color));
+  commands.push(shapes.drawLine(fX + w, fY, fX + w + dx, fY - dy, color));
+  commands.push(shapes.drawLine(fX + dx, fY - dy, fX + w + dx, fY - dy, color));
+  
+  // 2. Intersecting Cylinder (Tower on top of box)
+  const cylR = Math.floor(canvasSize * 0.15);
+  const cylH = Math.floor(canvasSize * 0.4);
+  const cylX = cx + Math.floor(dx/2);
+  const cylY = fY - Math.floor(dy/2); // Center of the top face
+  
+  // Draw cylinder standing on the box
+  const topY = cylY - cylH;
+  // Top ellipse
+  commands.push(shapes.drawEllipse(cylX, topY, cylR, Math.floor(cylR * 0.3), '#ff9800', false));
+  // Base ellipse (intersecting the box top face)
+  commands.push(shapes.drawEllipse(cylX, cylY, cylR, Math.floor(cylR * 0.3), '#ff9800', false));
+  // Vertical edges
+  commands.push(shapes.drawLine(cylX - cylR, topY, cylX - cylR, cylY, '#ff9800'));
+  commands.push(shapes.drawLine(cylX + cylR, topY, cylX + cylR, cylY, '#ff9800'));
+
+  return commands;
+}
+
+module.exports = {
+  lessonRotate,
+  lessonCut,
+  lessonHollow,
+  lessonCombine
+};

package/domains/art-tree/transform_shapes.js

@@ -0,0 +1,109 @@
+const shapes = require('./shapes');
+const ellipseShapes = require('./ellipse_shapes');
+
+function drawEgg(cx, cy, r, color) {
+  const commands = [];
+  // Approximating an egg by drawing two halves (top stretched, bottom semi-circle)
+  // We'll use multiple ellipses overlapping, or a polygon approximation
+  // Let's use a simpler polygon approximation for the egg contour
+  const points = [];
+  for (let i = 0; i <= 36; i++) {
+    const t = (i / 36) * 2 * Math.PI;
+    const px = r * Math.cos(t);
+    // Stretch the top half
+    const stretch = Math.sin(t) < 0 ? 1.5 : 1.0; 
+    const py = r * Math.sin(t) * stretch;
+    points.push({ x: Math.round(cx + px), y: Math.round(cy + py) });
+  }
+  commands.push(shapes.drawPolyline(points, color));
+  
+  // Add cross contour to show 3D volume
+  commands.push(shapes.drawEllipse(cx, cy + Math.floor(r * 0.2), r, Math.floor(r * 0.3), '#03a9f4', false));
+  return commands;
+}
+
+function drawBentTube(cx, cy, r, length, color) {
+  const commands = [];
+  // Draw a curved tube using a semicircular path
+  const pathR = length; // radius of the bend path
+  // We place ellipses along the arc
+  for (let i = 0; i <= 6; i++) {
+    const angle = (i / 6) * Math.PI; // 0 to 180 degrees
+    const ex = Math.round(cx + pathR * Math.cos(angle));
+    const ey = Math.round(cy - pathR * Math.sin(angle));
+    // Rotate the ellipse to be perpendicular to the path
+    commands.push(...ellipseShapes.drawRotatedEllipse(ex, ey, Math.floor(r * 0.3), r, angle, color));
+  }
+  // Connect inner and outer edges (approximate arcs)
+  const innerPts = [], outerPts = [];
+  for (let i = 0; i <= 18; i++) {
+    const a = (i / 18) * Math.PI;
+    innerPts.push({ x: Math.round(cx + (pathR - r) * Math.cos(a)), y: Math.round(cy - (pathR - r) * Math.sin(a)) });
+    outerPts.push({ x: Math.round(cx + (pathR + r) * Math.cos(a)), y: Math.round(cy - (pathR + r) * Math.sin(a)) });
+  }
+  commands.push(shapes.drawPolyline(innerPts, color));
+  commands.push(shapes.drawPolyline(outerPts, color));
+  
+  return commands;
+}
+
+function drawTruncatedSphere(cx, cy, r, color) {
+  const commands = [];
+  // Sphere outline (partial)
+  const points = [];
+  const cutAngle = Math.PI / 4; // Top section cut off
+  for (let i = 0; i <= 36; i++) {
+    const t = (i / 36) * 2 * Math.PI;
+    // Skip the top part
+    if (t > Math.PI + cutAngle && t < 2 * Math.PI - cutAngle) continue;
+    points.push({ x: Math.round(cx + r * Math.cos(t)), y: Math.round(cy + r * Math.sin(t)) });
+  }
+  commands.push(shapes.drawPolyline(points, color));
+  
+  // Cut surface (ellipse)
+  const cutY = Math.round(cy + r * Math.sin(Math.PI + cutAngle));
+  const cutRx = Math.round(r * Math.cos(cutAngle));
+  const cutRy = Math.floor(cutRx * 0.3);
+  commands.push(shapes.drawEllipse(cx, cutY, cutRx, cutRy, '#ff5722', false)); // Highlight cut surface
+  
+  // Cross contour to reinforce sphere shape
+  commands.push(shapes.drawEllipse(cx, cy + Math.floor(r*0.2), r, Math.floor(r*0.3), '#03a9f4', false));
+  
+  return commands;
+}
+
+function drawHollowCylinder(cx, cy, outerR, innerR, h, color) {
+  const commands = [];
+  const topY = cy - Math.floor(h/2);
+  const botY = cy + Math.floor(h/2);
+  
+  // Outer bottom
+  commands.push(shapes.drawEllipse(cx, botY, outerR, Math.floor(outerR * 0.3), color, false));
+  
+  // Outer top
+  commands.push(shapes.drawEllipse(cx, topY, outerR, Math.floor(outerR * 0.3), color, false));
+  // Inner top (the hole)
+  commands.push(shapes.drawEllipse(cx, topY, innerR, Math.floor(innerR * 0.3), '#e91e63', false));
+  
+  // Inner bottom (visible through hole - rough approximation)
+  // We just draw the back curve of the inner bottom ellipse
+  // For simplicity, we draw the full ellipse but lighter
+  commands.push(shapes.drawEllipse(cx, botY, innerR, Math.floor(innerR * 0.3), '#bdbdbd', false));
+  
+  // Vertical edges
+  commands.push(shapes.drawLine(cx - outerR, topY, cx - outerR, botY, color));
+  commands.push(shapes.drawLine(cx + outerR, topY, cx + outerR, botY, color));
+  
+  // Inner edges (depth)
+  commands.push(shapes.drawLine(cx - innerR, topY, cx - innerR, botY, '#9e9e9e'));
+  commands.push(shapes.drawLine(cx + innerR, topY, cx + innerR, botY, '#9e9e9e'));
+
+  return commands;
+}
+
+module.exports = {
+  drawEgg,
+  drawBentTube,
+  drawTruncatedSphere,
+  drawHollowCylinder
+};

package/domains/art-tree/transform_tools.js

@@ -0,0 +1,104 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const lessons1 = require('./transform_lessons_1');
+const lessons2 = require('./transform_lessons_2');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all shape transformation tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  // --- Scale & Deform ---
+  registerTool(server, 'art_tree_lesson_transform_stretch',
+    'Lesson: Transform - Stretch (Elongate a sphere or box)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#2196f3') },
+    async (p) => {
+      const commands = lessons1.lessonStretch(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Stretch transformation lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_transform_squash',
+    'Lesson: Transform - Squash (Compress a sphere or box)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#ff9800') },
+    async (p) => {
+      const commands = lessons1.lessonSquash(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Squash transformation lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_transform_taper',
+    'Lesson: Transform - Taper/Swell (Cylinder to Bottle)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#00bcd4') },
+    async (p) => {
+      const commands = lessons1.lessonTaperSwell(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Taper/Swell transformation lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_transform_bend',
+    'Lesson: Transform - Bend (Cylinder to curved tube)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#e91e63') },
+    async (p) => {
+      const commands = lessons1.lessonBend(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Bend transformation lesson completed` }] };
+    });
+
+  // --- Boolean & Orientation ---
+  registerTool(server, 'art_tree_lesson_transform_rotate',
+    'Lesson: Transform - Rotate (Analyze rotation around X, Y, Z)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#ff5722') },
+    async (p) => {
+      const commands = lessons2.lessonRotate(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Rotate transformation lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_transform_cut',
+    'Lesson: Transform - Cut (Truncate a sphere)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#8bc34a') },
+    async (p) => {
+      const commands = lessons2.lessonCut(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Cut transformation lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_transform_hollow',
+    'Lesson: Transform - Hollow (Hollow out a cylinder)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#3f51b5') },
+    async (p) => {
+      const commands = lessons2.lessonHollow(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Hollow transformation lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_transform_combine',
+    'Lesson: Transform - Combine (Intersect a box and a cylinder)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#607d8b') },
+    async (p) => {
+      const commands = lessons2.lessonCombine(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Combine transformation lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_transform_catalog',
+    'Get the catalog of all available Transformation lessons',
+    {},
+    () => {
+      const text = `📚 Transformation Lessons:
+  • transform_stretch: Stretch/Elongate (Sphere -> Egg)
+  • transform_squash: Squash/Compress (Sphere -> Flat disc)
+  • transform_taper: Taper/Swell (Cylinder -> Bottle)
+  • transform_bend: Bend (Cylinder -> Bent tube)
+  • transform_rotate: Rotate (3D rotation analysis)
+  • transform_cut: Cut/Truncate (Slice a form)
+  • transform_hollow: Hollow out (Carve interior)
+  • transform_combine: Combine (Merge forms)`;
+      return { content: [{ type: 'text', text }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/vocab_lessons.js

@@ -0,0 +1,32 @@
+const vocabShapes = require('./vocab_shapes');
+
+/**
+ * Lesson: Visual Vocabulary - House Breakdown
+ * A 5-step process of recalling and drawing parts of an object.
+ * Users can supply the step number (1 to 5) to see the progressive breakdown.
+ */
+function lessonVocabHouse(canvasSize = 64, step = 1) {
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize * 0.45);
+  
+  // Ensure step is between 1 and 5
+  const validStep = Math.max(1, Math.min(5, step));
+
+  return vocabShapes.drawHouseBreakdown(cx, cy, canvasSize, validStep);
+}
+
+function getVocabLessonCatalog() {
+  return [
+    { 
+      id: 'vocab_house', 
+      name: 'House Breakdown (5 Steps)', 
+      description: 'Break down a house: Masses -> Structural -> Functional -> Identity -> Materials. Supply step=1..5', 
+      fn: lessonVocabHouse 
+    }
+  ];
+}
+
+module.exports = {
+  lessonVocabHouse,
+  getVocabLessonCatalog
+};

package/domains/art-tree/vocab_shapes.js

@@ -0,0 +1,116 @@
+const shapes = require('./shapes');
+
+/**
+ * Draws a 5-step breakdown of a House.
+ * Step 1: Main Masses (Thân + Mái)
+ * Step 2: Structural Parts (Cột, Móng, Hiên/Bậc thềm)
+ * Step 3: Functional Parts (Cửa, Cửa sổ)
+ * Step 4: Identifying Details (Ống khói, Viền mái, Khung cửa)
+ * Step 5: Materials (Ván gỗ, Gạch)
+ */
+function drawHouseBreakdown(cx, cy, scale, step) {
+  const commands = [];
+  const color = '#37474f';
+  
+  const w = Math.floor(scale * 0.5);
+  const h = Math.floor(scale * 0.4);
+  const roofH = Math.floor(scale * 0.25);
+  
+  const leftX = cx - Math.floor(w/2);
+  const rightX = cx + Math.floor(w/2);
+  const topY = cy;
+  const botY = cy + h;
+  const roofTipY = topY - roofH;
+
+  // STEP 1: MAIN MASSES
+  if (step >= 1) {
+    // Main Body Box
+    commands.push(shapes.drawRectangle(leftX, topY, w, h, color, false));
+    // Roof Triangle
+    commands.push(shapes.drawLine(leftX, topY, cx, roofTipY, color));
+    commands.push(shapes.drawLine(cx, roofTipY, rightX, topY, color));
+  }
+
+  // STEP 2: STRUCTURAL PARTS
+  if (step >= 2) {
+    // Corner Columns (Cột)
+    commands.push(shapes.drawLine(leftX - 4, topY, leftX - 4, botY, color));
+    commands.push(shapes.drawLine(rightX + 4, topY, rightX + 4, botY, color));
+    // Foundation (Móng)
+    commands.push(shapes.drawRectangle(leftX - 6, botY, w + 12, 5, color, false));
+    // Front Porch Steps (Bậc thềm)
+    const pW = Math.floor(w * 0.4);
+    const pX = cx - Math.floor(pW/2);
+    commands.push(shapes.drawRectangle(pX, botY + 5, pW, 4, color, false));
+    commands.push(shapes.drawRectangle(pX - 2, botY + 9, pW + 4, 4, color, false));
+  }
+
+  // STEP 3: FUNCTIONAL PARTS
+  if (step >= 3) {
+    // Door (Cửa ra vào)
+    const dW = Math.floor(w * 0.25);
+    const dH = Math.floor(h * 0.6);
+    const dX = cx - Math.floor(dW/2);
+    commands.push(shapes.drawRectangle(dX, botY - dH, dW, dH, color, false));
+    
+    // Windows (Cửa sổ)
+    const winW = Math.floor(w * 0.2);
+    const winH = Math.floor(h * 0.35);
+    const winY = topY + Math.floor(h * 0.2);
+    // Left window
+    commands.push(shapes.drawRectangle(leftX + 8, winY, winW, winH, color, false));
+    // Right window
+    commands.push(shapes.drawRectangle(rightX - 8 - winW, winY, winW, winH, color, false));
+  }
+
+  // STEP 4: IDENTIFYING DETAILS
+  if (step >= 4) {
+    // Chimney (Ống khói)
+    const chimW = Math.floor(w * 0.15);
+    const chimX = leftX + Math.floor(w * 0.1);
+    const chimY = topY - Math.floor(roofH * 0.6);
+    commands.push(shapes.drawRectangle(chimX, chimY, chimW, Math.floor(roofH * 0.5), color, false));
+    commands.push(shapes.drawRectangle(chimX - 2, chimY - 4, chimW + 4, 4, color, false)); // Chimney cap
+    
+    // Roof Trim (Viền mái)
+    commands.push(shapes.drawLine(leftX - 6, topY + 4, cx, roofTipY - 6, color));
+    commands.push(shapes.drawLine(cx, roofTipY - 6, rightX + 6, topY + 4, color));
+    
+    // Window/Door Frames & Knobs (Khung cửa)
+    const winW = Math.floor(w * 0.2);
+    const winH = Math.floor(h * 0.35);
+    const winY = topY + Math.floor(h * 0.2);
+    // Left window cross
+    commands.push(shapes.drawLine(leftX + 8 + Math.floor(winW/2), winY, leftX + 8 + Math.floor(winW/2), winY + winH, color));
+    commands.push(shapes.drawLine(leftX + 8, winY + Math.floor(winH/2), leftX + 8 + winW, winY + Math.floor(winH/2), color));
+    // Right window cross
+    commands.push(shapes.drawLine(rightX - 8 - Math.floor(winW/2), winY, rightX - 8 - Math.floor(winW/2), winY + winH, color));
+    commands.push(shapes.drawLine(rightX - 8 - winW, winY + Math.floor(winH/2), rightX - 8, winY + Math.floor(winH/2), color));
+    // Door knob
+    commands.push(shapes.drawCircle(cx + Math.floor(w * 0.08), botY - Math.floor(h * 0.3), 1, color, true));
+  }
+
+  // STEP 5: SURFACE MATERIALS
+  if (step >= 5) {
+    const matColor = '#9e9e9e';
+    // Wood Planks on the main body
+    for (let i = 1; i < 5; i++) {
+      const plankY = topY + i * Math.floor(h / 5);
+      commands.push(shapes.drawLine(leftX + 2, plankY, rightX - 2, plankY, matColor));
+    }
+    
+    // Brick lines on the chimney
+    const chimW = Math.floor(w * 0.15);
+    const chimX = leftX + Math.floor(w * 0.1);
+    const chimY = topY - Math.floor(roofH * 0.6);
+    commands.push(shapes.drawLine(chimX, chimY + 4, chimX + chimW, chimY + 4, matColor));
+    commands.push(shapes.drawLine(chimX, chimY + 8, chimX + chimW, chimY + 8, matColor));
+    commands.push(shapes.drawLine(chimX + 4, chimY + 4, chimX + 4, chimY + 8, matColor)); // vertical brick line
+  }
+
+  return commands;
+}
+
+module.exports = {
+  drawHouseBreakdown
+};

package/domains/art-tree/vocab_tools.js

@@ -0,0 +1,41 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const vocabLessons = require('./vocab_lessons');
+
+/**
+ * Register all visual vocabulary tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_vocab_house',
+    'Lesson: Visual Vocabulary - 5-Step Breakdown of a House. Pass step (1 to 5).',
+    { 
+      canvasSize: z.number().int().min(16).max(128).default(64),
+      step: z.number().int().min(1).max(5).describe('The breakdown step (1=Main Masses, 2=Structural, 3=Functional, 4=Identity, 5=Materials)')
+    },
+    async (p) => {
+      const commands = vocabLessons.lessonVocabHouse(p.canvasSize, p.step);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      const steps = [
+        "1. Main Masses (Khối chính: Thân nhà, Mái)",
+        "2. Structural Parts (Bộ phận lớn: Cột, Móng, Bậc thềm)",
+        "3. Functional Parts (Chức năng: Cửa, Cửa sổ)",
+        "4. Identifying Details (Nhận diện: Ống khói, Viền mái, Khung cửa)",
+        "5. Surface Materials (Vật liệu: Ván gỗ, Gạch)"
+      ];
+      return { content: [{ type: 'text', text: `✓ Step ${p.step} Vocabulary breakdown completed:\n${steps[p.step - 1]}` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_vocab_catalog',
+    'Get the catalog of all available Visual Vocabulary lessons',
+    {},
+    () => {
+      const catalog = vocabLessons.getVocabLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Visual Vocabulary Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixel-normal-edit/mcp",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "MCP server for Pixel Normal Edit canvas - enables AI agents to draw pixel art",
   "main": "index.js",
   "bin": {

package/tools/index.js

@@ -18,6 +18,7 @@ const history = require('./history');
 const modes = require('./modes');
 const colors = require('./colors');
 const health = require('./health');
+const layer = require('./layer');
 
 /**
  * Register all core tools on the given MCP server instance.
@@ -37,6 +38,7 @@ function registerAll(server) {
   modes.register(server);
   colors.register(server);
   health.register(server);
+  layer.register(server);
 }
 
 module.exports = { registerAll };

package/tools/layer.js

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+/**
+ * layer.js — MCP Tool Registration for Layers
+ *
+ * Exposes the layer management functionality to MCP clients.
+ */
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../core/server');
+
+/**
+ * Register all layer tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'layer_get_info',
+    'Get information about all current layers and the active layer index.',
+    {},
+    async () => {
+      const activeRes = await sendCommand({ action: 'layer.getActiveLayerIndex' });
+      const layersRes = await sendCommand({ action: 'layer.getLayers' });
+      return { 
+        content: [{ 
+          type: 'text', 
+          text: JSON.stringify({ 
+            activeLayerIndex: activeRes.result, 
+            layers: layersRes.result 
+          }, null, 2)
+        }] 
+      };
+    });
+
+  registerTool(server, 'layer_add',
+    'Add a new layer on top of existing layers.',
+    {},
+    async () => {
+      await sendCommand({ action: 'layer.add' });
+      return { content: [{ type: 'text', text: '✓ New layer added.' }] };
+    });
+
+  registerTool(server, 'layer_remove',
+    'Remove a layer by its index.',
+    { index: z.number().int().describe('The index of the layer to remove (0 is the bottom-most)') },
+    async (p) => {
+      await sendCommand({ action: 'layer.remove', index: p.index });
+      return { content: [{ type: 'text', text: `✓ Layer ${p.index} removed.` }] };
+    });
+
+  registerTool(server, 'layer_move',
+    'Move a layer up or down in the stack.',
+    { 
+      index: z.number().int().describe('The index of the layer to move'),
+      direction: z.enum(['up', 'down']).describe('Direction to move the layer')
+    },
+    async (p) => {
+      if (p.direction === 'up') {
+        await sendCommand({ action: 'layer.moveUp', index: p.index });
+      } else {
+        await sendCommand({ action: 'layer.moveDown', index: p.index });
+      }
+      return { content: [{ type: 'text', text: `✓ Layer ${p.index} moved ${p.direction}.` }] };
+    });
+
+  registerTool(server, 'layer_toggle_visibility',
+    'Toggle the visibility of a layer by its index.',
+    { index: z.number().int().describe('The index of the layer to toggle') },
+    async (p) => {
+      await sendCommand({ action: 'layer.toggle', index: p.index });
+      return { content: [{ type: 'text', text: `✓ Toggled visibility of layer ${p.index}.` }] };
+    });
+
+  registerTool(server, 'layer_select',
+    'Select an active layer for drawing operations.',
+    { index: z.number().int().describe('The index of the layer to select') },
+    async (p) => {
+      await sendCommand({ action: 'layer.select', index: p.index });
+      return { content: [{ type: 'text', text: `✓ Selected layer ${p.index}.` }] };
+    });
+}
+
+module.exports = { register };