@pixel-normal-edit/mcp 2.0.5 → 2.0.7

package/domains/art-tree/hidden_lessons.js

@@ -0,0 +1,55 @@
+const hiddenShapes = require('./hidden_shapes');
+
+/**
+ * Lesson: Hidden Box (Khối hộp 6 mặt)
+ * 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 (Đầu người và hộp sọ)
+ * 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 (Cái cốc và đáy bên trong)
+ * 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,17 @@
 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');
 
 /**
  * Register all Art Tree MCP tools on the server
@@ -17,6 +28,17 @@ 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);
 }
 
 module.exports = {

package/domains/art-tree/lessons.js

@@ -165,6 +165,106 @@ function lessonComposition(canvasSize = 32) {
   ];
 }
 
+/**
+ * Lesson 8: Freehand — Luyện vẽ bằng tay, mô phỏng nét rung.
+ */
+function lessonFreehand(canvasSize = 32, color = '#795548') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const points = [];
+  let y = Math.floor(canvasSize / 2);
+  for (let x = margin; x < canvasSize - margin; x += 2) {
+    points.push({ x, y: y + Math.floor(Math.random() * 3) - 1 });
+  }
+  return shapes.drawPolyline(points, color);
+}
+
+/**
+ * Lesson 9: Proportions and Angles — Tập giữ tỉ lệ và góc.
+ */
+function lessonProportionsAndAngles(canvasSize = 32, color = '#3f51b5') {
+  const mid = Math.floor(canvasSize / 2);
+  const size1 = Math.floor(canvasSize * 0.4);
+  const size2 = Math.floor(size1 / 2);
+  return [
+    shapes.drawSquare(mid - Math.floor(size1/2), mid - Math.floor(size1/2), size1, color, false),
+    shapes.drawSquare(mid - Math.floor(size2/2), mid - Math.floor(size2/2), size2, '#e91e63', false),
+    shapes.drawLine(mid, mid, mid + size1, mid - size1, '#009688')
+  ];
+}
+
+/**
+ * Lesson 10: Curves — Đường cong C, S.
+ */
+function lessonCurves(canvasSize = 32, color = '#9c27b0') {
+  const commands = [];
+  const mid = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.15);
+  // C curve
+  const cPoints = [];
+  for (let i = -Math.PI/2; i <= Math.PI/2; i += 0.2) {
+    cPoints.push({ x: Math.round(mid - r - r * Math.cos(i)), y: Math.round(mid / 2 + r * Math.sin(i)) });
+  }
+  commands.push(...shapes.drawPolyline(cPoints, color));
+  // S curve
+  const sPoints = [];
+  for (let i = -Math.PI/2; i <= Math.PI*1.5; i += 0.2) {
+    const isTop = i < Math.PI/2;
+    const cy = isTop ? (mid + Math.floor(canvasSize*0.1)) : (mid + Math.floor(canvasSize*0.1) + r*2);
+    const signX = isTop ? -1 : 1;
+    sPoints.push({ x: Math.round(mid + r + signX * r * Math.cos(i)), y: Math.round(cy + r * Math.sin(i)) });
+  }
+  commands.push(...shapes.drawPolyline(sPoints, '#e91e63'));
+  return commands;
+}
+
+/**
+ * Lesson 11: Spiral — Đường xoắn ốc.
+ */
+function lessonSpiral(canvasSize = 32, color = '#ff9800') {
+  const mid = Math.floor(canvasSize / 2);
+  const points = [];
+  const maxRadius = Math.floor(canvasSize * 0.4);
+  const loops = 3;
+  for (let angle = 0; angle < Math.PI * 2 * loops; angle += 0.3) {
+    const r = (angle / (Math.PI * 2 * loops)) * maxRadius;
+    points.push({ x: Math.round(mid + r * Math.cos(angle)), y: Math.round(mid + r * Math.sin(angle)) });
+  }
+  return shapes.drawPolyline(points, color);
+}
+
+/**
+ * Lesson 12: Strokes — Nét dài, nét ngắn, nét đậm–nhạt.
+ */
+function lessonStrokes(canvasSize = 32, color = '#2196f3') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const y1 = Math.floor(canvasSize * 0.3);
+  const y2 = Math.floor(canvasSize * 0.5);
+  const y3 = Math.floor(canvasSize * 0.7);
+  return [
+    shapes.drawLine(margin, y1, canvasSize - margin, y1, color),
+    shapes.drawLine(margin, y2, Math.floor(canvasSize / 2), y2, '#4caf50'),
+    shapes.drawLine(margin, y3, canvasSize - margin, y3, '#f44336'),
+    shapes.drawLine(margin, y3 + 1, canvasSize - margin, y3 + 1, '#f44336'),
+    shapes.drawLine(margin, y3 + 2, canvasSize - margin, y3 + 2, '#f44336'),
+  ];
+}
+
+/**
+ * Lesson 13: Parallel & Intersecting — Các đường song song và giao nhau.
+ */
+function lessonParallelAndIntersecting(canvasSize = 32, color = '#00bcd4') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const mid = Math.floor(canvasSize / 2);
+  const offset = 4;
+  return [
+    shapes.drawLine(margin, margin, canvasSize - margin, margin, color),
+    shapes.drawLine(margin, margin + offset, canvasSize - margin, margin + offset, color),
+    shapes.drawLine(margin, margin + offset * 2, canvasSize - margin, margin + offset * 2, color),
+    shapes.drawLine(mid - offset*2, mid, mid + offset*2, canvasSize - margin, '#ff5722'),
+    shapes.drawLine(mid + offset*2, mid, mid - offset*2, canvasSize - margin, '#ff5722')
+  ];
+}
+
 /**
  * Get all available lessons with metadata.
  * @returns {Array<{id: string, name: string, description: string, fn: Function}>}
@@ -178,6 +278,12 @@ function getLessonCatalog() {
     { id: 'triangles', name: 'Hình tam giác', description: 'Hình ba cạnh và sự ổn định', fn: lessonTriangles },
     { id: 'polygons', name: 'Đa giác', description: 'Hình nhiều cạnh', fn: lessonPolygons },
     { id: 'composition', name: 'Tổng hợp', description: 'Kết hợp các hình cơ bản tạo vật thể đơn giản', fn: lessonComposition },
+    { id: 'freehand', name: 'Vẽ bằng tay', description: 'Luyện vẽ bằng tay, hạn chế dùng thước', fn: lessonFreehand },
+    { id: 'proportions', name: 'Tỉ lệ và góc', description: 'Tập giữ tỉ lệ và góc', fn: lessonProportionsAndAngles },
+    { id: 'curves', name: 'Đường cong', description: 'Đường cong và nét: Đường cong C, S', fn: lessonCurves },
+    { id: 'spiral', name: 'Xoắn ốc', description: 'Đường xoắn ốc', fn: lessonSpiral },
+    { id: 'strokes', name: 'Các loại nét', description: 'Nét dài, nét ngắn, nét đậm–nhạt', fn: lessonStrokes },
+    { id: 'parallel_intersecting', name: 'Song song & giao nhau', description: 'Vẽ các đường song song và đường giao nhau', fn: lessonParallelAndIntersecting },
   ];
 }
 
@@ -189,5 +295,11 @@ module.exports = {
   lessonTriangles,
   lessonPolygons,
   lessonComposition,
+  lessonFreehand,
+  lessonProportionsAndAngles,
+  lessonCurves,
+  lessonSpiral,
+  lessonStrokes,
+  lessonParallelAndIntersecting,
   getLessonCatalog,
 };

package/domains/art-tree/light_lessons.js

@@ -0,0 +1,92 @@
+const shapes = require('./shapes');
+const lightShapes = require('./light_shapes');
+
+/**
+ * Lesson: 6 Zones of Light (Khối cầu)
+ * Highlight, Light, Halftone, Core shadow, Reflected light, Cast shadow.
+ */
+function lessonLightZones(canvasSize = 32) {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.25);
+  
+  // Light from top-left (approx -45 degrees or -135 degrees mathematically)
+  const lightAngle = -Math.PI * 0.75; 
+
+  // Draw light source
+  const lx = cx + Math.floor(r * 2 * Math.cos(lightAngle));
+  const ly = cy + Math.floor(r * 2 * Math.sin(lightAngle));
+  commands.push(...lightShapes.drawLightSource(lx, ly, Math.floor(canvasSize * 0.05)));
+
+  // Draw shaded sphere
+  commands.push(...lightShapes.drawShadedSphere(cx, cy, r, lightAngle));
+
+  return commands;
+}
+
+/**
+ * Lesson: Light Direction & Intensity (Hướng ánh sáng và mặt phẳng)
+ * Shows a box with planes facing/turning away from light.
+ */
+function lessonLightDirection(canvasSize = 32) {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const w = Math.floor(canvasSize * 0.25);
+  const h = Math.floor(canvasSize * 0.25);
+
+  // Light from top-left
+  const lightAngle = -Math.PI * 0.8; 
+  
+  const lx = cx - Math.floor(canvasSize * 0.35);
+  const ly = cy - Math.floor(canvasSize * 0.35);
+  commands.push(...lightShapes.drawLightSource(lx, ly, Math.floor(canvasSize * 0.05)));
+
+  // Draw shaded box
+  commands.push(...lightShapes.drawShadedBox(cx, cy, w, h, lightAngle));
+
+  return commands;
+}
+
+/**
+ * Lesson: Contact Shadow (Bóng tiếp xúc)
+ * The darkest area where an object touches the ground.
+ */
+function lessonContactShadow(canvasSize = 32) {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.3);
+
+  // Ground line
+  commands.push(shapes.drawLine(0, cy + r, canvasSize, cy + r, '#9e9e9e'));
+
+  // Sphere outline
+  commands.push(shapes.drawCircle(cx, cy, r, '#bdbdbd', false));
+
+  // Cast shadow (faint)
+  commands.push(shapes.drawEllipse(cx + Math.floor(r*0.5), cy + r, Math.floor(r*1.2), Math.floor(r*0.2), '#757575', true));
+
+  // CONTACT SHADOW (Pitch black, right at the touching point)
+  // Draw a very small, very dark ellipse directly under the center
+  commands.push(shapes.drawEllipse(cx, cy + r, Math.floor(r * 0.4), 2, '#000000', true));
+  commands.push(shapes.drawEllipse(cx, cy + r, Math.floor(r * 0.2), 1, '#000000', true));
+
+  return commands;
+}
+
+function getLightLessonCatalog() {
+  return [
+    { id: 'light_zones', name: '6 Zones of Light', description: 'Highlight to Cast shadow on a sphere', fn: lessonLightZones },
+    { id: 'light_dir', name: 'Light Direction', description: 'Planes facing vs turning away from light', fn: lessonLightDirection },
+    { id: 'light_contact', name: 'Contact Shadow', description: 'The darkest point where object touches ground', fn: lessonContactShadow },
+  ];
+}
+
+module.exports = {
+  lessonLightZones,
+  lessonLightDirection,
+  lessonContactShadow,
+  getLightLessonCatalog
+};

package/domains/art-tree/light_shapes.js

@@ -0,0 +1,136 @@
+const shapes = require('./shapes');
+
+function drawLightSource(cx, cy, r) {
+  const commands = [];
+  const color = '#ffeb3b'; // Yellow sun
+  commands.push(shapes.drawCircle(cx, cy, r, color, true));
+  
+  // Rays
+  const rayL = Math.floor(r * 1.5);
+  for (let i = 0; i < 8; i++) {
+    const a = (i / 8) * 2 * Math.PI;
+    const x1 = Math.round(cx + (r + 2) * Math.cos(a));
+    const y1 = Math.round(cy + (r + 2) * Math.sin(a));
+    const x2 = Math.round(cx + (r + rayL) * Math.cos(a));
+    const y2 = Math.round(cy + (r + rayL) * Math.sin(a));
+    commands.push(shapes.drawLine(x1, y1, x2, y2, color));
+  }
+  return commands;
+}
+
+function drawShadedSphere(cx, cy, r, lightAngle) {
+  const commands = [];
+  
+  // We simulate shading using overlapping crescent shapes or offset circles
+  // Since we have limited primitives, we'll draw concentric offset circles
+  // from dark to light towards the light source.
+
+  const offX = Math.cos(lightAngle);
+  const offY = Math.sin(lightAngle);
+
+  // 1. Cast Shadow (Bóng đổ) on the ground
+  // Drawn first so it's behind the sphere
+  // Shift cast shadow away from light
+  const castR = Math.floor(r * 1.2);
+  const castRy = Math.floor(r * 0.3);
+  const castX = cx - Math.floor(offX * r * 0.8);
+  const castY = cy + r - Math.floor(castRy/2);
+  commands.push(shapes.drawEllipse(castX, castY, castR, castRy, '#424242', true));
+
+  // 2. Base Sphere (Reflected Light zone color)
+  // The very edge away from light gets some bounce light
+  commands.push(shapes.drawCircle(cx, cy, r, '#78909c', true));
+
+  // 3. Core Shadow (Vùng tối chính)
+  // Offset slightly away from light
+  const coreR = Math.floor(r * 0.9);
+  const coreX = cx - Math.floor(offX * r * 0.1);
+  const coreY = cy - Math.floor(offY * r * 0.1);
+  commands.push(shapes.drawCircle(coreX, coreY, coreR, '#263238', true));
+
+  // 4. Halftone (Vùng trung gian)
+  const halfR = Math.floor(r * 0.75);
+  const halfX = cx + Math.floor(offX * r * 0.1);
+  const halfY = cy + Math.floor(offY * r * 0.1);
+  commands.push(shapes.drawCircle(halfX, halfY, halfR, '#546e7a', true));
+
+  // 5. Light (Vùng sáng)
+  const lightR = Math.floor(r * 0.5);
+  const lightX = cx + Math.floor(offX * r * 0.3);
+  const lightY = cy + Math.floor(offY * r * 0.3);
+  commands.push(shapes.drawCircle(lightX, lightY, lightR, '#90a4ae', true));
+
+  // 6. Highlight (Điểm sáng)
+  const highR = Math.floor(r * 0.15);
+  const highX = cx + Math.floor(offX * r * 0.5);
+  const highY = cy + Math.floor(offY * r * 0.5);
+  commands.push(shapes.drawCircle(highX, highY, highR, '#ffffff', true));
+
+  return commands;
+}
+
+function drawShadedBox(cx, cy, w, h, lightAngle) {
+  const commands = [];
+  const d = Math.floor(w * 0.6);
+  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);
+  const bX = fX + dx;
+  const bY = fY - dy;
+
+  // Assume light is from Top-Left or Top-Right
+  const isLightLeft = Math.cos(lightAngle) < 0;
+
+  // Determine values (colors) for planes based on light
+  // Top is usually Light (facing up towards light source)
+  const topColor = '#cfd8dc';
+  // Front and Side depend on left/right light
+  const frontColor = isLightLeft ? '#90a4ae' : '#455a64'; // If light is left, front gets some light. If right, front is darker.
+  const sideColor = isLightLeft ? '#455a64' : '#90a4ae';
+
+  // Cast Shadow
+  const castX = isLightLeft ? bX + w : fX - w;
+  const castY = fY;
+  // A simple polygon for cast shadow
+  const shadowPts = [
+    {x: fX, y: fY},
+    {x: fX + w, y: fY},
+    {x: castX, y: castY - dy},
+    {x: castX - w, y: castY - dy}
+  ];
+  commands.push(shapes.drawPolyline(shadowPts, '#424242'));
+
+  // Draw solid planes
+  // Note: Since we don't have a fillPolygon tool natively exposed that supports all shapes easily,
+  // we will draw wireframes with heavy lines or crosshatching to represent values.
+  // Actually, we can just use drawRectangle for front.
+  
+  // Front face (solid)
+  commands.push(shapes.drawRectangle(fX, fY - h, w, h, frontColor, true));
+  
+  // Side face (Right) (wireframe/hatch for now, or just outline)
+  // Let's use outline with thick color
+  const rightSidePts = [
+    {x: fX+w, y: fY-h}, {x: bX+w, y: bY-h}, {x: bX+w, y: bY}, {x: fX+w, y: fY}
+  ];
+  commands.push(shapes.drawPolyline(rightSidePts, sideColor));
+  // Add some hatch lines to simulate fill
+  commands.push(shapes.drawLine(fX+w, fY-Math.floor(h/2), bX+w, bY-Math.floor(h/2), sideColor));
+
+  // Top face
+  const topPts = [
+    {x: fX, y: fY-h}, {x: bX, y: bY-h}, {x: bX+w, y: bY-h}, {x: fX+w, y: fY-h}
+  ];
+  commands.push(shapes.drawPolyline(topPts, topColor));
+  commands.push(shapes.drawLine(fX+Math.floor(w/2), fY-h, bX+Math.floor(w/2), bY-h, topColor));
+
+  return commands;
+}
+
+module.exports = {
+  drawLightSource,
+  drawShadedSphere,
+  drawShadedBox
+};

package/domains/art-tree/light_tools.js

@@ -0,0 +1,49 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const lightLessons = require('./light_lessons');
+
+/**
+ * Register all lighting & shading tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_light_zones',
+    'Lesson: Lighting - 6 Zones of Light and Shadow on a Sphere',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = lightLessons.lessonLightZones(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 6 Zones of Light lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_light_dir',
+    'Lesson: Lighting - Light Direction and Plane values on a Box',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = lightLessons.lessonLightDirection(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Light Direction lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_light_contact',
+    'Lesson: Lighting - Contact Shadow (Darkest point of intersection)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = lightLessons.lessonContactShadow(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Contact Shadow lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_light_catalog',
+    'Get the catalog of all available Lighting lessons',
+    {},
+    () => {
+      const catalog = lightLessons.getLightLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Lighting Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };