@pixel-normal-edit/mcp 2.0.7 → 2.0.8

package/domains/art-tree/advanced_lessons.js

@@ -2,7 +2,7 @@ const shapes = require('./shapes');
 const advShapes = require('./advanced_shapes');
 
 /**
- * Lesson: Tỉ lệ (Ratios)
+ * Lesson: Shape Ratios
  */
 function lessonShapeRatios(canvasSize = 32, color = '#2196f3') {
   const margin = Math.floor(canvasSize * 0.1);
@@ -20,7 +20,7 @@ function lessonShapeRatios(canvasSize = 32, color = '#2196f3') {
 }
 
 /**
- * Lesson: Đối xứng & Trục giữa (Symmetry & Axes)
+ * Lesson: Symmetry & Axes
  */
 function lessonSymmetryAndAxis(canvasSize = 32, color = '#9c27b0') {
   const mid = Math.floor(canvasSize / 2);
@@ -39,7 +39,7 @@ function lessonSymmetryAndAxis(canvasSize = 32, color = '#9c27b0') {
 }
 
 /**
- * Lesson: Góc (Angles)
+ * Lesson: Angles
  */
 function lessonAngles(canvasSize = 32, color = '#ff5722') {
   const mid = Math.floor(canvasSize / 2);
@@ -62,7 +62,7 @@ function lessonAngles(canvasSize = 32, color = '#ff5722') {
 }
 
 /**
- * Lesson: Khoảng cách (Distances)
+ * Lesson: Distances
  */
 function lessonDistances(canvasSize = 32, color = '#00bcd4') {
   const margin = Math.floor(canvasSize * 0.2);
@@ -81,7 +81,7 @@ function lessonDistances(canvasSize = 32, color = '#00bcd4') {
 }
 
 /**
- * Lesson: Quan hệ hình khối (Relationships)
+ * Lesson: Shape Relationships
  */
 function lessonShapeRelationships(canvasSize = 32, color = '#607d8b') {
   const mid = Math.floor(canvasSize / 2);
@@ -106,11 +106,11 @@ function lessonShapeRelationships(canvasSize = 32, color = '#607d8b') {
  */
 function getAdvancedLessonCatalog() {
   return [
-    { id: 'adv_ratios', name: 'Tỉ lệ hình', description: 'Tỉ lệ chiều rộng và chiều cao', fn: lessonShapeRatios },
-    { id: 'adv_symmetry', name: 'Đối xứng & Trục', description: 'Sự đối xứng và trục giữa', fn: lessonSymmetryAndAxis },
-    { id: 'adv_angles', name: 'Góc', description: 'Góc nhọn, góc vuông, góc tù', fn: lessonAngles },
-    { id: 'adv_distances', name: 'Khoảng cách', description: 'Khoảng cách giữa các điểm', fn: lessonDistances },
-    { id: 'adv_relationships', name: 'Quan hệ hình', description: 'Sự giao nhau và lồng nhau của các hình', fn: lessonShapeRelationships },
+    { id: 'adv_ratios', name: 'Shape Ratios', description: 'Width-to-height ratios of shapes', fn: lessonShapeRatios },
+    { id: 'adv_symmetry', name: 'Symmetry & Axes', description: 'Symmetry and central axes', fn: lessonSymmetryAndAxis },
+    { id: 'adv_angles', name: 'Angles', description: 'Acute, right, and obtuse angles', fn: lessonAngles },
+    { id: 'adv_distances', name: 'Distances', description: 'Distances between points', fn: lessonDistances },
+    { id: 'adv_relationships', name: 'Shape Relationships', description: 'Overlap and nesting of shapes', fn: lessonShapeRelationships },
   ];
 }
 
@@ -121,4 +121,4 @@ module.exports = {
   lessonDistances,
   lessonShapeRelationships,
   getAdvancedLessonCatalog
-};
+};

package/domains/art-tree/advanced_tools.js

@@ -10,48 +10,48 @@ const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g.
  */
 function register(server) {
   registerTool(server, 'art_tree_lesson_ratios',
-    'Lesson: Đặc tính - Tỉ lệ hình (Ratios)',
+    'Lesson: Properties - Shape Ratios',
     { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#2196f3') },
     async (p) => {
       const commands = advLessons.lessonShapeRatios(p.canvasSize, p.color);
       await Promise.all(commands.map(cmd => sendCommand(cmd)));
-      return { content: [{ type: 'text', text: `✓ Bài học tỉ lệ hình hoàn thành` }] };
+      return { content: [{ type: 'text', text: `✓ Shape Ratios lesson completed` }] };
     });
 
   registerTool(server, 'art_tree_lesson_symmetry',
-    'Lesson: Đặc tính - Đối xứng & Trục (Symmetry and Axes)',
+    'Lesson: Properties - Symmetry & Axes',
     { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#9c27b0') },
     async (p) => {
       const commands = advLessons.lessonSymmetryAndAxis(p.canvasSize, p.color);
       await Promise.all(commands.map(cmd => sendCommand(cmd)));
-      return { content: [{ type: 'text', text: `✓ Bài học đối xứng & trục hoàn thành` }] };
+      return { content: [{ type: 'text', text: `✓ Symmetry & Axes lesson completed` }] };
     });
 
   registerTool(server, 'art_tree_lesson_angles',
-    'Lesson: Đặc tính - Góc (Angles)',
+    'Lesson: Properties - Angles',
     { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#ff5722') },
     async (p) => {
       const commands = advLessons.lessonAngles(p.canvasSize, p.color);
       await Promise.all(commands.map(cmd => sendCommand(cmd)));
-      return { content: [{ type: 'text', text: `✓ Bài học góc hoàn thành` }] };
+      return { content: [{ type: 'text', text: `✓ Angles lesson completed` }] };
     });
 
   registerTool(server, 'art_tree_lesson_distances',
-    'Lesson: Đặc tính - Khoảng cách (Distances)',
+    'Lesson: Properties - Distances',
     { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#00bcd4') },
     async (p) => {
       const commands = advLessons.lessonDistances(p.canvasSize, p.color);
       await Promise.all(commands.map(cmd => sendCommand(cmd)));
-      return { content: [{ type: 'text', text: `✓ Bài học khoảng cách hoàn thành` }] };
+      return { content: [{ type: 'text', text: `✓ Distances lesson completed` }] };
     });
 
   registerTool(server, 'art_tree_lesson_relationships',
-    'Lesson: Đặc tính - Quan hệ hình (Relationships)',
+    'Lesson: Properties - Shape Relationships',
     { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#607d8b') },
     async (p) => {
       const commands = advLessons.lessonShapeRelationships(p.canvasSize, p.color);
       await Promise.all(commands.map(cmd => sendCommand(cmd)));
-      return { content: [{ type: 'text', text: `✓ Bài học quan hệ hình hoàn thành` }] };
+      return { content: [{ type: 'text', text: `✓ Shape Relationships lesson completed` }] };
     });
 
   registerTool(server, 'art_tree_lesson_adv_catalog',
@@ -62,8 +62,8 @@ function register(server) {
       const text = catalog.map(l =>
         `  • ${l.id}: ${l.name} — ${l.description}`
       ).join('\n');
-      return { content: [{ type: 'text', text: `📚 Danh sách bài học Art Tree (Đặc tính):\n\n${text}` }] };
+      return { content: [{ type: 'text', text: `📚 Advanced Art Tree Lesson Catalog:\n\n${text}` }] };
     });
 }
 
-module.exports = { register };
+module.exports = { register };

package/domains/art-tree/analysis_lessons.js

@@ -0,0 +1,32 @@
+const analysisShapes = require('./analysis_shapes');
+
+/**
+ * Lesson: Object Analysis (Capstone)
+ * A 10-step breakdown of a Teapot.
+ * Users can supply the step number (1 to 10) to see a specific layer of analysis.
+ */
+function lessonObjectAnalysis(canvasSize = 32, step = 1, color = '#2196f3') {
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  
+  // Ensure step is between 1 and 10
+  const validStep = Math.max(1, Math.min(10, step));
+
+  return analysisShapes.drawTeapotAnalysis(cx, cy, canvasSize, validStep, color);
+}
+
+function getAnalysisLessonCatalog() {
+  return [
+    { 
+      id: 'analysis_step', 
+      name: '10-Step Object Analysis', 
+      description: 'Break down a Teapot from Silhouette (1) to Lighting (10). Supply step=1..10', 
+      fn: lessonObjectAnalysis 
+    }
+  ];
+}
+
+module.exports = {
+  lessonObjectAnalysis,
+  getAnalysisLessonCatalog
+};

package/domains/art-tree/analysis_shapes.js

@@ -0,0 +1,146 @@
+const shapes = require('./shapes');
+const lightShapes = require('./light_shapes');
+
+// Master function to draw the Teapot at a specific analytical step
+function drawTeapotAnalysis(cx, cy, scale, step, color = '#2196f3') {
+  const commands = [];
+  const r = Math.floor(scale * 0.3); // Main body radius
+  
+  // Base outlines for the Teapot used across multiple steps
+  const drawBaseOutline = (c) => {
+    // Body (Sphere)
+    commands.push(shapes.drawCircle(cx, cy, r, c, false));
+    // Base/Foot
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.6), cy + r, cx + Math.floor(r*0.6), cy + r, c));
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.6), cy + r, cx - Math.floor(r*0.7), cy + r + 5, c));
+    commands.push(shapes.drawLine(cx + Math.floor(r*0.6), cy + r, cx + Math.floor(r*0.7), cy + r + 5, c));
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.7), cy + r + 5, cx + Math.floor(r*0.7), cy + r + 5, c));
+    // Lid
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.6), cy - r, cx + Math.floor(r*0.6), cy - r, c));
+    commands.push(shapes.drawEllipse(cx, cy - r - 5, Math.floor(r*0.6), Math.floor(r*0.2), c, false));
+    commands.push(shapes.drawCircle(cx, cy - r - 15, Math.floor(r*0.15), c, false)); // Knob
+    // Spout (Left)
+    commands.push(shapes.drawLine(cx - r, cy, cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), c));
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.8), cy + Math.floor(r*0.4), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), c));
+    commands.push(shapes.drawLine(cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), c));
+    // Handle (Right)
+    const handlePts1 = [], handlePts2 = [];
+    for(let i=0; i<=10; i++) {
+      const a = -Math.PI/2 + (i/10)*Math.PI; // -90 to 90
+      handlePts1.push({x: Math.round(cx + r + Math.floor(r*0.8)*Math.cos(a)), y: Math.round(cy - Math.floor(r*0.2) + Math.floor(r*0.6)*Math.sin(a))});
+      handlePts2.push({x: Math.round(cx + r + Math.floor(r*0.5)*Math.cos(a)), y: Math.round(cy - Math.floor(r*0.2) + Math.floor(r*0.6)*Math.sin(a))});
+    }
+    commands.push(shapes.drawPolyline(handlePts1, c));
+    commands.push(shapes.drawPolyline(handlePts2, c));
+  };
+
+  switch (step) {
+    case 1: // Silhouette (Flat black)
+      // Since we can't easily union-fill all paths, we simulate it by drawing the base thick
+      // For this, we just draw the outline in solid black with no inner details
+      drawBaseOutline('#000000');
+      break;
+    
+    case 2: // Proportions (Bounding box)
+      drawBaseOutline('#e0e0e0');
+      // Bounding box
+      const minX = cx - Math.floor(r*1.8) - 10;
+      const maxX = cx + Math.floor(r*1.8) + 10;
+      const minY = cy - r - 30;
+      const maxY = cy + r + 15;
+      commands.push(shapes.drawRectangle(minX, minY, maxX - minX, maxY - minY, color, false));
+      // Center lines of bounding box
+      commands.push(shapes.drawLine(cx, minY, cx, maxY, '#ff9800'));
+      commands.push(shapes.drawLine(minX, cy, maxX, cy, '#ff9800'));
+      break;
+
+    case 3: // Axis (X, Y, Z structural lines)
+      drawBaseOutline('#e0e0e0');
+      // Y axis
+      commands.push(shapes.drawLine(cx, cy - r - 40, cx, cy + r + 40, '#f44336'));
+      // X axis
+      commands.push(shapes.drawLine(cx - r - 40, cy, cx + r + 40, cy, '#4caf50'));
+      // Z axis (depth, diagonal)
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.5), cy + Math.floor(r*0.5), cx + Math.floor(r*0.5), cy - Math.floor(r*0.5), '#2196f3'));
+      break;
+
+    case 4: // Main Masses (Primitives)
+      drawBaseOutline('#e0e0e0');
+      // Highlight the sphere
+      commands.push(shapes.drawCircle(cx, cy, r, '#e91e63', false));
+      // Highlight the spout cylinder/cone
+      commands.push(shapes.drawLine(cx - r, cy, cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), '#00bcd4'));
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.8), cy + Math.floor(r*0.4), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), '#00bcd4'));
+      break;
+
+    case 5: // Cross-sections
+      drawBaseOutline('#e0e0e0');
+      // Slicing ellipses on the body
+      commands.push(shapes.drawEllipse(cx, cy, r, Math.floor(r*0.3), '#9c27b0', false));
+      commands.push(shapes.drawEllipse(cx, cy - Math.floor(r*0.5), Math.floor(r*0.86), Math.floor(r*0.25), '#9c27b0', false));
+      commands.push(shapes.drawEllipse(cx, cy + Math.floor(r*0.5), Math.floor(r*0.86), Math.floor(r*0.25), '#9c27b0', false));
+      break;
+
+    case 6: // Transformations (Bend, Taper)
+      drawBaseOutline('#e0e0e0');
+      // Highlight bending spout
+      commands.push(shapes.drawEllipse(cx - Math.floor(r*1.4), cy - Math.floor(r*0.4), Math.floor(r*0.4), Math.floor(r*0.2), '#ff9800', false));
+      // Tapering lid
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.6), cy - r, cx, cy - r - 15, '#ff9800'));
+      commands.push(shapes.drawLine(cx + Math.floor(r*0.6), cy - r, cx, cy - r - 15, '#ff9800'));
+      break;
+
+    case 7: // Secondary parts
+      drawBaseOutline('#e0e0e0');
+      // Boldly highlight spout and handle
+      commands.push(shapes.drawLine(cx - r, cy, cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), '#ff5722'));
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.8), cy + Math.floor(r*0.4), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), '#ff5722'));
+      const hPts = [];
+      for(let i=0; i<=10; i++) {
+        const a = -Math.PI/2 + (i/10)*Math.PI;
+        hPts.push({x: Math.round(cx + r + Math.floor(r*0.8)*Math.cos(a)), y: Math.round(cy - Math.floor(r*0.2) + Math.floor(r*0.6)*Math.sin(a))});
+      }
+      commands.push(shapes.drawPolyline(hPts, '#3f51b5'));
+      break;
+
+    case 8: // Surfaces (Convex, Concave)
+      drawBaseOutline('#e0e0e0');
+      // Convex body
+      commands.push(shapes.drawCircle(cx, cy, r, '#8bc34a', false));
+      // Concave inner handle space
+      commands.push(shapes.drawEllipse(cx + r + Math.floor(r*0.2), cy - Math.floor(r*0.2), Math.floor(r*0.3), Math.floor(r*0.5), '#00bcd4', false));
+      break;
+
+    case 9: // Perspective
+      drawBaseOutline(color);
+      // Horizon line above
+      const horizonY = cy - r - 50;
+      const vpX = cx + Math.floor(r*2);
+      commands.push(shapes.drawLine(0, horizonY, scale*2, horizonY, '#9e9e9e'));
+      commands.push(shapes.drawCircle(vpX, horizonY, 3, '#ff0000', true));
+      // Orthogonals from top and bottom to VP
+      commands.push(shapes.drawLine(cx, cy - r, vpX, horizonY, '#bdbdbd'));
+      commands.push(shapes.drawLine(cx, cy + r, vpX, horizonY, '#bdbdbd'));
+      break;
+
+    case 10: // Lighting
+      // Re-use shaded sphere for the main body
+      commands.push(...lightShapes.drawShadedSphere(cx, cy, r, -Math.PI*0.75));
+      // We skip the detailed spout/handle shading to stay within line limits, 
+      // but draw them solidly over the sphere to complete the form
+      const c = '#546e7a';
+      commands.push(shapes.drawLine(cx - r, cy, cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), c));
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.8), cy + Math.floor(r*0.4), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), c));
+      break;
+
+    default:
+      drawBaseOutline(color);
+      break;
+  }
+
+  return commands;
+}
+
+module.exports = {
+  drawTeapotAnalysis
+};

package/domains/art-tree/analysis_tools.js

@@ -0,0 +1,49 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const analysisLessons = require('./analysis_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all analysis tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_analysis_step',
+    'Lesson: Capstone - 10-Step Object Analysis of a Teapot. Pass step (1 to 10).',
+    { 
+      canvasSize: z.number().int().min(16).max(64).default(32),
+      step: z.number().int().min(1).max(10).describe('The analysis step to view (1=Silhouette, 2=Proportions, ..., 10=Lighting)'),
+      color: hexColor.default('#2196f3')
+    },
+    async (p) => {
+      const commands = analysisLessons.lessonObjectAnalysis(p.canvasSize, p.step, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      const steps = [
+        "1. Silhouette (Hình bao ngoài)",
+        "2. Proportions (Tỉ lệ)",
+        "3. Axis (Trục)",
+        "4. Main masses (Khối lớn)",
+        "5. Cross-sections (Mặt cắt)",
+        "6. Transformations (Biến dạng)",
+        "7. Secondary parts (Các bộ phận phụ)",
+        "8. Surfaces (Bề mặt)",
+        "9. Perspective (Phối cảnh)",
+        "10. Lighting (Ánh sáng)"
+      ];
+      return { content: [{ type: 'text', text: `✓ Step ${p.step} Analysis completed: ${steps[p.step - 1]}` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_analysis_catalog',
+    'Get the catalog of all available Analysis lessons',
+    {},
+    () => {
+      const catalog = analysisLessons.getAnalysisLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Analysis Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/hidden_lessons.js

@@ -1,7 +1,7 @@
 const hiddenShapes = require('./hidden_shapes');
 
 /**
- * Lesson: Hidden Box (Khối hộp 6 mặt)
+ * Lesson: Hidden Box (6-sided box)
  * You see 3 faces, but you must understand all 6.
  */
 function lessonHiddenBox(canvasSize = 32, visibleColor = '#2196f3', hiddenColor = '#e0e0e0') {
@@ -15,7 +15,7 @@ function lessonHiddenBox(canvasSize = 32, visibleColor = '#2196f3', hiddenColor
 }
 
 /**
- * Lesson: Hidden Head (Đầu người và hộp sọ)
+ * Lesson: Hidden Head (Human head and skull)
  * You don't see the whole skull, but must understand the structure behind it.
  */
 function lessonHiddenHead(canvasSize = 32, visibleColor = '#ff5722', hiddenColor = '#e0e0e0') {
@@ -27,7 +27,7 @@ function lessonHiddenHead(canvasSize = 32, visibleColor = '#ff5722', hiddenColor
 }
 
 /**
- * Lesson: Hidden Cup (Cái cốc và đáy bên trong)
+ * Lesson: Hidden Cup (Cup and inner bottom)
  * You don't see the full inside bottom, but must understand how the wall goes down.
  */
 function lessonHiddenCup(canvasSize = 32, visibleColor = '#4caf50', hiddenColor = '#e0e0e0') {

package/domains/art-tree/index.js

@@ -21,6 +21,11 @@ const surfaceTools = require('./surface_tools');
 const perspTools = require('./perspective_tools');
 const hiddenTools = require('./hidden_tools');
 const lightTools = require('./light_tools');
+const materialTools = require('./material_tools');
+const analysisTools = require('./analysis_tools');
+const layerTools = require('./layer_tools');
+const skyTools = require('./sky_tools');
+const vocabTools = require('./vocab_tools');
 
 /**
  * Register all Art Tree MCP tools on the server
@@ -39,6 +44,11 @@ function registerAll(server) {
   perspTools.register(server);
   hiddenTools.register(server);
   lightTools.register(server);
+  materialTools.register(server);
+  analysisTools.register(server);
+  layerTools.register(server);
+  skyTools.register(server);
+  vocabTools.register(server);
 }
 
 module.exports = {

package/domains/art-tree/layer_lessons.js

@@ -0,0 +1,32 @@
+const layerShapes = require('./layer_shapes');
+
+/**
+ * Lesson: Layer Structure (Tư duy Layer)
+ * A 7-step progression showing what belongs on each layer.
+ * Users can supply the layer index (1 to 7) to see a specific layer's content.
+ */
+function lessonLayerStep(canvasSize = 32, layerIndex = 1) {
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  
+  // Ensure layerIndex is between 1 and 7
+  const validLayer = Math.max(1, Math.min(7, layerIndex));
+
+  return layerShapes.drawLayeredCup(cx, cy, canvasSize, validLayer);
+}
+
+function getLayerLessonCatalog() {
+  return [
+    { 
+      id: 'layer_step', 
+      name: '7-Layer Painting Structure', 
+      description: 'View the contents of a specific layer of a Cup (1=Ref, 2=Sketch, 3=Construction, 4=Lineart, 5=Color, 6=Shadow, 7=Light)', 
+      fn: lessonLayerStep 
+    }
+  ];
+}
+
+module.exports = {
+  lessonLayerStep,
+  getLayerLessonCatalog
+};

package/domains/art-tree/layer_shapes.js

@@ -0,0 +1,117 @@
+const shapes = require('./shapes');
+
+// Helper to draw a specific layer of a Cup
+function drawLayeredCup(cx, cy, scale, layerIndex) {
+  const commands = [];
+  const w = Math.floor(scale * 0.4);
+  const h = Math.floor(scale * 0.6);
+  const r = Math.floor(w / 2);
+  const topRy = Math.floor(r * 0.3);
+  const botRy = Math.floor(r * 0.25);
+  const topY = cy - Math.floor(h/2);
+  const botY = cy + Math.floor(h/2);
+
+  switch (layerIndex) {
+    case 1: // Reference
+      // Draw a "photo frame" indicating where a reference image goes
+      const refX = cx - Math.floor(scale*0.4);
+      const refY = cy - Math.floor(scale*0.4);
+      const refW = Math.floor(scale*0.3);
+      const refH = Math.floor(scale*0.3);
+      commands.push(shapes.drawRectangle(refX, refY, refW, refH, '#e0e0e0', true));
+      commands.push(shapes.drawRectangle(refX, refY, refW, refH, '#9e9e9e', false));
+      commands.push(shapes.drawLine(refX, refY, refX+refW, refY+refH, '#9e9e9e'));
+      commands.push(shapes.drawLine(refX+refW, refY, refX, refY+refH, '#9e9e9e'));
+      break;
+
+    case 2: // Sketch
+      // Loose, messy lines (Gesture, proportion bounds)
+      const sketchC = '#90caf9'; // Light blue sketch pencil
+      commands.push(shapes.drawRectangle(cx - r - 5, topY - topRy - 5, w + 10, h + botRy + 10, sketchC, false));
+      // Messy circles/ovals for top and bottom
+      commands.push(shapes.drawEllipse(cx, topY, Math.floor(r*1.1), Math.floor(topRy*1.2), sketchC, false));
+      commands.push(shapes.drawEllipse(cx+2, topY-2, Math.floor(r*0.9), Math.floor(topRy*0.8), sketchC, false));
+      // Messy walls
+      commands.push(shapes.drawLine(cx - r - 2, topY, cx - r + 3, botY, sketchC));
+      commands.push(shapes.drawLine(cx + r + 2, topY, cx + r - 3, botY, sketchC));
+      break;
+
+    case 3: // Construction
+      // Precise geometric primitives and axes
+      const axisC = '#f44336';
+      const constC = '#4caf50';
+      // Axis
+      commands.push(shapes.drawLine(cx, cy - h, cx, cy + h, axisC));
+      // Top ellipse
+      commands.push(shapes.drawEllipse(cx, topY, r, topRy, constC, false));
+      // Bottom ellipse (full, showing through)
+      commands.push(shapes.drawEllipse(cx, botY, r, botRy, constC, false));
+      // Straight walls connecting tangents
+      commands.push(shapes.drawLine(cx - r, topY, cx - r, botY, constC));
+      commands.push(shapes.drawLine(cx + r, topY, cx + r, botY, constC));
+      break;
+
+    case 4: // Lineart
+      // Clean, solid outer and inner contours
+      const lineC = '#000000';
+      // Walls
+      commands.push(shapes.drawLine(cx - r, topY, cx - r, botY, lineC));
+      commands.push(shapes.drawLine(cx + r, topY, cx + r, botY, lineC));
+      // Top rim
+      commands.push(shapes.drawEllipse(cx, topY, r, topRy, lineC, false));
+      // Inner lip
+      commands.push(shapes.drawEllipse(cx, topY, Math.floor(r*0.85), Math.floor(topRy*0.85), lineC, false));
+      // Front bottom curve (simulate by drawing half an ellipse manually, but we don't have arc tool)
+      // We use polyline for the front bottom curve to not show the hidden back
+      const frontCurve = [];
+      for (let i = 0; i <= 10; i++) {
+        const a = (i / 10) * Math.PI;
+        frontCurve.push({ x: Math.round(cx + r * Math.cos(a)), y: Math.round(botY + botRy * Math.sin(a)) });
+      }
+      commands.push(shapes.drawPolyline(frontCurve, lineC));
+      break;
+
+    case 5: // Base Color
+      // Flat solid colors for the cup body and interior
+      const bodyC = '#ff9800'; // Orange cup
+      const innerC = '#795548'; // Coffee inside
+      // Body fill (Using wireframe/thick lines to fake fill if needed, or assume SVG renders it)
+      // Actually, we can use drawEllipse and rectangle
+      commands.push(shapes.drawRectangle(cx - r, topY, w, h, bodyC, true));
+      commands.push(shapes.drawEllipse(cx, botY, r, botRy, bodyC, true));
+      // Fill the top area
+      commands.push(shapes.drawEllipse(cx, topY, r, topRy, bodyC, true));
+      // Coffee inside
+      commands.push(shapes.drawEllipse(cx, topY, Math.floor(r*0.85), Math.floor(topRy*0.85), innerC, true));
+      break;
+
+    case 6: // Shadow
+      // Core shadow and Cast shadow (Usually drawn with Multiply blend mode, but here we just draw dark shapes)
+      const shadowC = '#424242';
+      // Cast shadow on floor
+      commands.push(shapes.drawEllipse(cx - Math.floor(w*0.8), botY + Math.floor(botRy*0.5), Math.floor(w*1.2), Math.floor(botRy*1.2), shadowC, true));
+      // Core shadow on the left side of the cup body
+      commands.push(shapes.drawRectangle(cx - r, topY, Math.floor(r*0.6), h, '#3e2723', true));
+      break;
+
+    case 7: // Light
+      // Highlights and Rim light (Usually drawn with Screen/Add blend mode, here just bright white/yellow)
+      const lightC = '#ffffff';
+      // Rim light on the right edge
+      commands.push(shapes.drawLine(cx + r - 2, topY, cx + r - 2, botY, lightC));
+      // Strong sharp highlight on the body
+      commands.push(shapes.drawEllipse(cx + Math.floor(r*0.5), cy, Math.floor(r*0.1), Math.floor(h*0.3), lightC, true));
+      // Highlight on the rim
+      commands.push(shapes.drawEllipse(cx + Math.floor(r*0.7), topY - Math.floor(topRy*0.5), Math.floor(r*0.2), 2, lightC, true));
+      break;
+
+    default:
+      break;
+  }
+
+  return commands;
+}
+
+module.exports = {
+  drawLayeredCup
+};

package/domains/art-tree/layer_tools.js

@@ -0,0 +1,43 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const layerLessons = require('./layer_lessons');
+
+/**
+ * Register all layer tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_layer_step',
+    'Lesson: Layer Structure - See exactly what belongs on each layer of a Cup (1 to 7).',
+    { 
+      canvasSize: z.number().int().min(16).max(64).default(32),
+      layer: z.number().int().min(1).max(7).describe('The layer index (1=Ref, 2=Sketch, 3=Construction, 4=Lineart, 5=Color, 6=Shadow, 7=Light)')
+    },
+    async (p) => {
+      const commands = layerLessons.lessonLayerStep(p.canvasSize, p.layer);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      const layers = [
+        "1. Reference (Ảnh tham khảo)",
+        "2. Sketch (Phác thảo)",
+        "3. Construction (Dựng hình)",
+        "4. Lineart (Nét chính)",
+        "5. Base Color (Màu cơ bản)",
+        "6. Shadow (Bóng tối)",
+        "7. Light (Ánh sáng)"
+      ];
+      return { content: [{ type: 'text', text: `✓ Layer ${p.layer} visualization completed: ${layers[p.layer - 1]}` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_layer_catalog',
+    'Get the catalog of all available Layer Structure lessons',
+    {},
+    () => {
+      const catalog = layerLessons.getLayerLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Layer Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };