@pixel-normal-edit/mcp 2.0.6 → 2.0.8

package/domains/art-tree/ellipse_lessons.js

@@ -0,0 +1,105 @@
+const shapes = require('./shapes');
+const ellipseShapes = require('./ellipse_shapes');
+
+/**
+ * Lesson: Ellipse Orientations (Horizontal, Vertical, Tilted)
+ */
+function lessonEllipseOrientations(canvasSize = 32, color = '#2196f3') {
+  const commands = [];
+  const midY = Math.floor(canvasSize / 2);
+  const qX = Math.floor(canvasSize / 4);
+  const rLong = Math.floor(canvasSize * 0.2);
+  const rShort = Math.floor(canvasSize * 0.1);
+
+  // Horizontal (Left)
+  commands.push(shapes.drawEllipse(qX, midY, rLong, rShort, color, false));
+  
+  // Vertical (Middle)
+  commands.push(shapes.drawEllipse(qX * 2, midY, rShort, rLong, '#e91e63', false));
+  
+  // Tilted (Right) - 45 degrees
+  commands.push(...ellipseShapes.drawRotatedEllipse(qX * 3, midY, rLong, rShort, Math.PI / 4, '#4caf50'));
+
+  return commands;
+}
+
+/**
+ * Lesson: Ellipse Proportions (Wide vs Narrow)
+ */
+function lessonEllipseProportions(canvasSize = 32, color = '#ff9800') {
+  const commands = [];
+  const midY = Math.floor(canvasSize / 2);
+  const qX = Math.floor(canvasSize / 4);
+  const rx = Math.floor(canvasSize * 0.2);
+
+  // Wide Ellipse (Closer to a circle)
+  commands.push(shapes.drawEllipse(qX, midY, rx, Math.floor(rx * 0.8), color, false));
+  
+  // Medium Ellipse
+  commands.push(shapes.drawEllipse(qX * 2, midY, rx, Math.floor(rx * 0.4), '#9c27b0', false));
+  
+  // Narrow Ellipse (Almost a line)
+  commands.push(shapes.drawEllipse(qX * 3, midY, rx, Math.floor(rx * 0.1), '#f44336', false));
+
+  return commands;
+}
+
+/**
+ * Lesson: Ellipse Anatomy (Symmetry, Major/Minor axes, Center)
+ */
+function lessonEllipseAnatomy(canvasSize = 32, color = '#00bcd4') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const rx = Math.floor(canvasSize * 0.35);
+  const ry = Math.floor(canvasSize * 0.2);
+  const angle = Math.PI / 6; // 30 degrees tilt to show axes clearly
+
+  // Draw ellipse
+  commands.push(...ellipseShapes.drawRotatedEllipse(cx, cy, rx, ry, angle, color));
+  
+  // Draw anatomy (axes and center)
+  commands.push(...ellipseShapes.drawEllipseAxes(cx, cy, rx, ry, angle));
+
+  return commands;
+}
+
+/**
+ * Lesson: Coaxial Ellipses (Multiple ellipses on the same axis)
+ */
+function lessonCoaxialEllipses(canvasSize = 32, color = '#795548') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const rx = Math.floor(canvasSize * 0.3);
+  
+  // Central axis line
+  commands.push(shapes.drawLine(cx, Math.floor(canvasSize * 0.1), cx, canvasSize - Math.floor(canvasSize * 0.1), '#bdbdbd'));
+  
+  // Top ellipse (narrower, viewed from steeper angle)
+  commands.push(shapes.drawEllipse(cx, Math.floor(canvasSize * 0.2), rx, Math.floor(rx * 0.2), color, false));
+  
+  // Middle ellipse
+  commands.push(shapes.drawEllipse(cx, Math.floor(canvasSize * 0.5), rx, Math.floor(rx * 0.3), color, false));
+  
+  // Bottom ellipse (wider, viewed from less steep angle)
+  commands.push(shapes.drawEllipse(cx, canvasSize - Math.floor(canvasSize * 0.2), rx, Math.floor(rx * 0.4), color, false));
+
+  return commands;
+}
+
+function getEllipseLessonCatalog() {
+  return [
+    { id: 'ellipse_orientations', name: 'Ellipse Orientations', description: 'Horizontal, Vertical, and Tilted ellipses', fn: lessonEllipseOrientations },
+    { id: 'ellipse_proportions', name: 'Ellipse Proportions', description: 'Wide vs Narrow ellipses', fn: lessonEllipseProportions },
+    { id: 'ellipse_anatomy', name: 'Ellipse Anatomy', description: 'Symmetry, Major/Minor axes, and Center', fn: lessonEllipseAnatomy },
+    { id: 'ellipse_coaxial', name: 'Coaxial Ellipses', description: 'Multiple ellipses sharing the same axis', fn: lessonCoaxialEllipses },
+  ];
+}
+
+module.exports = {
+  lessonEllipseOrientations,
+  lessonEllipseProportions,
+  lessonEllipseAnatomy,
+  lessonCoaxialEllipses,
+  getEllipseLessonCatalog
+};

package/domains/art-tree/ellipse_shapes.js

@@ -0,0 +1,63 @@
+const shapes = require('./shapes');
+
+/**
+ * Draw a rotated ellipse using a polygon approximation
+ * @param {number} cx Center X
+ * @param {number} cy Center Y
+ * @param {number} rx X radius (major axis if rx > ry)
+ * @param {number} ry Y radius
+ * @param {number} angle Rotation angle in radians
+ * @param {string} color Hex color
+ * @param {number} segments Number of polygon segments
+ */
+function drawRotatedEllipse(cx, cy, rx, ry, angle, color, segments = 36) {
+  const points = [];
+  const cosA = Math.cos(angle);
+  const sinA = Math.sin(angle);
+  
+  for (let i = 0; i <= segments; i++) {
+    const t = (i / segments) * 2 * Math.PI;
+    const px = rx * Math.cos(t);
+    const py = ry * Math.sin(t);
+    
+    const x = Math.round(cx + px * cosA - py * sinA);
+    const y = Math.round(cy + px * sinA + py * cosA);
+    points.push({ x, y });
+  }
+  
+  return shapes.drawPolyline(points, color);
+}
+
+/**
+ * Draw major and minor axes for an ellipse
+ */
+function drawEllipseAxes(cx, cy, rx, ry, angle = 0) {
+  const commands = [];
+  const cosA = Math.cos(angle);
+  const sinA = Math.sin(angle);
+  
+  // Major/Minor Axis calculation based on rotation
+  const x1 = Math.round(cx - rx * cosA);
+  const y1 = Math.round(cy - rx * sinA);
+  const x2 = Math.round(cx + rx * cosA);
+  const y2 = Math.round(cy + rx * sinA);
+  
+  const y3_x = Math.round(cx + ry * sinA);
+  const y3_y = Math.round(cy - ry * cosA);
+  const y4_x = Math.round(cx - ry * sinA);
+  const y4_y = Math.round(cy + ry * cosA);
+
+  // Red for Major, Blue for Minor
+  commands.push(shapes.drawLine(x1, y1, x2, y2, '#ff0000'));
+  commands.push(shapes.drawLine(y3_x, y3_y, y4_x, y4_y, '#2196f3'));
+  
+  // Center dot
+  commands.push(shapes.drawCircle(cx, cy, 1, '#000000', true));
+  
+  return commands;
+}
+
+module.exports = {
+  drawRotatedEllipse,
+  drawEllipseAxes
+};

package/domains/art-tree/ellipse_tools.js

@@ -0,0 +1,60 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const ellipseLessons = require('./ellipse_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all ellipse tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_ellipse_orientations',
+    'Lesson: Ellipses - Orientations (Horizontal, Vertical, Tilted)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#2196f3') },
+    async (p) => {
+      const commands = ellipseLessons.lessonEllipseOrientations(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Ellipse Orientations lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_ellipse_proportions',
+    'Lesson: Ellipses - Proportions (Wide vs Narrow)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#ff9800') },
+    async (p) => {
+      const commands = ellipseLessons.lessonEllipseProportions(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Ellipse Proportions lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_ellipse_anatomy',
+    'Lesson: Ellipses - Anatomy (Symmetry, Axes, Center)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#00bcd4') },
+    async (p) => {
+      const commands = ellipseLessons.lessonEllipseAnatomy(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Ellipse Anatomy lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_coaxial_ellipses',
+    'Lesson: Ellipses - Coaxial (Multiple ellipses on the same axis)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#795548') },
+    async (p) => {
+      const commands = ellipseLessons.lessonCoaxialEllipses(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Coaxial Ellipses lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_ellipse_catalog',
+    'Get the catalog of all available Ellipse lessons',
+    {},
+    () => {
+      const catalog = ellipseLessons.getEllipseLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Ellipse Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/hidden_lessons.js

@@ -0,0 +1,55 @@
+const hiddenShapes = require('./hidden_shapes');
+
+/**
+ * Lesson: Hidden Box (6-sided box)
+ * You see 3 faces, but you must understand all 6.
+ */
+function lessonHiddenBox(canvasSize = 32, visibleColor = '#2196f3', hiddenColor = '#e0e0e0') {
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const w = Math.floor(canvasSize * 0.4);
+  const h = Math.floor(canvasSize * 0.4);
+  const d = Math.floor(canvasSize * 0.4);
+
+  return hiddenShapes.drawXRayBox(cx, cy, w, h, d, visibleColor, hiddenColor);
+}
+
+/**
+ * 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') {
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize * 0.4);
+  const r = Math.floor(canvasSize * 0.25);
+
+  return hiddenShapes.drawXRayHead(cx, cy, r, visibleColor, hiddenColor);
+}
+
+/**
+ * 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') {
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.25);
+  const h = Math.floor(canvasSize * 0.5);
+
+  return hiddenShapes.drawXRayCup(cx, cy, r, h, visibleColor, hiddenColor);
+}
+
+function getHiddenLessonCatalog() {
+  return [
+    { id: 'hidden_box', name: 'Hidden Box', description: 'See all 6 faces of a box, not just 3', fn: lessonHiddenBox },
+    { id: 'hidden_head', name: 'Hidden Head', description: 'Understand the cranium sphere behind the face', fn: lessonHiddenHead },
+    { id: 'hidden_cup', name: 'Hidden Cup', description: 'Understand the inner depth and bottom of a cup', fn: lessonHiddenCup },
+  ];
+}
+
+module.exports = {
+  lessonHiddenBox,
+  lessonHiddenHead,
+  lessonHiddenCup,
+  getHiddenLessonCatalog
+};

package/domains/art-tree/hidden_shapes.js

@@ -0,0 +1,97 @@
+const shapes = require('./shapes');
+const ellipseShapes = require('./ellipse_shapes');
+
+function drawXRayBox(cx, cy, w, h, d, visibleColor, hiddenColor) {
+  const commands = [];
+  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(h/2);
+
+  // Hidden edges (Back, Bottom, Left side)
+  // Back face
+  const bX = fX + dx;
+  const bY = fY - dy;
+  commands.push(shapes.drawLine(fX, fY, bX, bY, hiddenColor)); // Bottom left depth
+  commands.push(shapes.drawLine(bX, bY, bX + w, bY, hiddenColor)); // Back bottom
+  commands.push(shapes.drawLine(bX, bY, bX, bY - h, hiddenColor)); // Back left vertical
+
+  // Visible edges (Front, Top, Right side)
+  // Front face
+  commands.push(shapes.drawRectangle(fX, fY - h, w, h, visibleColor, false));
+  // Top face
+  commands.push(shapes.drawLine(fX, fY - h, bX, bY - h, visibleColor));
+  commands.push(shapes.drawLine(fX + w, fY - h, bX + w, bY - h, visibleColor));
+  commands.push(shapes.drawLine(bX, bY - h, bX + w, bY - h, visibleColor));
+  // Right side depth
+  commands.push(shapes.drawLine(fX + w, fY, bX + w, bY, visibleColor));
+  // Right back vertical
+  commands.push(shapes.drawLine(bX + w, bY, bX + w, bY - h, visibleColor));
+
+  return commands;
+}
+
+function drawXRayHead(cx, cy, r, visibleColor, hiddenColor) {
+  const commands = [];
+  
+  // Hidden/Structural elements (Cranium sphere behind the face)
+  commands.push(shapes.drawCircle(cx, cy, r, hiddenColor, false));
+  // Cranium cross-contours (hidden structure)
+  commands.push(shapes.drawEllipse(cx, cy, r, Math.floor(r*0.3), hiddenColor, false)); // Equator
+  commands.push(shapes.drawEllipse(cx, cy, Math.floor(r*0.3), r, hiddenColor, false)); // Prime meridian
+
+  // Visible features (Face and Jaw)
+  const jawY = cy + Math.floor(r * 1.4);
+  const jawW = Math.floor(r * 0.6);
+  // Cheek lines dropping down
+  commands.push(shapes.drawLine(cx - r, cy, cx - jawW, jawY, visibleColor));
+  commands.push(shapes.drawLine(cx + r, cy, cx + jawW, jawY, visibleColor));
+  // Jaw line
+  commands.push(shapes.drawEllipse(cx, jawY, jawW, Math.floor(jawW * 0.4), visibleColor, false));
+  // Center facial axis
+  commands.push(shapes.drawLine(cx, cy - r, cx, jawY, visibleColor));
+
+  return commands;
+}
+
+function drawXRayCup(cx, cy, r, h, visibleColor, hiddenColor) {
+  const commands = [];
+  const topY = cy - Math.floor(h/2);
+  const botY = cy + Math.floor(h/2);
+  const ry = Math.floor(r * 0.3);
+
+  // Hidden elements (Inner bottom surface, back curve of outer base)
+  // Back curve of the outer base (hidden from viewer)
+  commands.push(shapes.drawEllipse(cx, botY, r, ry, hiddenColor, false));
+  
+  // Inner bottom surface (showing the depth/thickness of the cup bottom)
+  const innerBotY = botY - Math.floor(h * 0.1);
+  const innerR = Math.floor(r * 0.85);
+  const innerRy = Math.floor(ry * 0.85);
+  commands.push(shapes.drawEllipse(cx, innerBotY, innerR, innerRy, hiddenColor, false));
+  
+  // Visible elements (Outer walls, front curve of base, rim, inner wall)
+  // Walls
+  commands.push(shapes.drawLine(cx - r, topY, cx - r, botY, visibleColor));
+  commands.push(shapes.drawLine(cx + r, topY, cx + r, botY, visibleColor));
+  // Rim / Lip
+  commands.push(shapes.drawEllipse(cx, topY, r, ry, visibleColor, false));
+  commands.push(shapes.drawEllipse(cx, topY, innerR, innerRy, visibleColor, false));
+  
+  // To draw just the front curve of the base in visible color, we approximate with a polyline
+  const frontCurve = [];
+  for (let i = 0; i <= 18; i++) {
+    const angle = (i / 18) * Math.PI; // 0 to 180 degrees (bottom half)
+    frontCurve.push({ x: Math.round(cx + r * Math.cos(angle)), y: Math.round(botY + ry * Math.sin(angle)) });
+  }
+  commands.push(shapes.drawPolyline(frontCurve, visibleColor));
+
+  return commands;
+}
+
+module.exports = {
+  drawXRayBox,
+  drawXRayHead,
+  drawXRayCup
+};

package/domains/art-tree/hidden_tools.js

@@ -0,0 +1,51 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const hiddenLessons = require('./hidden_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all hidden shapes tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_hidden_box',
+    'Lesson: Hidden - Understand all 6 faces of a box (X-Ray vision)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), visibleColor: hexColor.default('#2196f3'), hiddenColor: hexColor.default('#e0e0e0') },
+    async (p) => {
+      const commands = hiddenLessons.lessonHiddenBox(p.canvasSize, p.visibleColor, p.hiddenColor);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Hidden Box lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_hidden_head',
+    'Lesson: Hidden - Understand the cranium sphere behind the face (X-Ray vision)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), visibleColor: hexColor.default('#ff5722'), hiddenColor: hexColor.default('#e0e0e0') },
+    async (p) => {
+      const commands = hiddenLessons.lessonHiddenHead(p.canvasSize, p.visibleColor, p.hiddenColor);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Hidden Head lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_hidden_cup',
+    'Lesson: Hidden - Understand the inner depth of a cup (X-Ray vision)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), visibleColor: hexColor.default('#4caf50'), hiddenColor: hexColor.default('#e0e0e0') },
+    async (p) => {
+      const commands = hiddenLessons.lessonHiddenCup(p.canvasSize, p.visibleColor, p.hiddenColor);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Hidden Cup lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_hidden_catalog',
+    'Get the catalog of all available Hidden Shapes lessons',
+    {},
+    () => {
+      const catalog = hiddenLessons.getHiddenLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Hidden Shapes Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/index.js

@@ -10,6 +10,22 @@
 const shapes = require('./shapes');
 const lessons = require('./lessons');
 const tools = require('./tools');
+const advTools = require('./advanced_tools');
+const curveTools = require('./curve_tools');
+const ellipseTools = require('./ellipse_tools');
+const tools3d = require('./3d_tools');
+const structureTools = require('./structure_tools');
+const csTools = require('./cross_section_tools');
+const transformTools = require('./transform_tools');
+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
@@ -17,6 +33,22 @@ const tools = require('./tools');
  */
 function registerAll(server) {
   tools.register(server);
+  advTools.register(server);
+  curveTools.register(server);
+  ellipseTools.register(server);
+  tools3d.register(server);
+  structureTools.register(server);
+  csTools.register(server);
+  transformTools.register(server);
+  surfaceTools.register(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 };