@pixel-normal-edit/mcp 2.0.7 → 2.0.8

package/domains/art-tree/lessons.js

@@ -166,7 +166,7 @@ function lessonComposition(canvasSize = 32) {
 }
 
 /**
- * Lesson 8: Freehand — Luyện vẽ bằng tay, mô phỏng nét rung.
+ * Lesson 8: Freehand — Practice freehand drawing with simulated hand tremor.
  */
 function lessonFreehand(canvasSize = 32, color = '#795548') {
   const margin = Math.floor(canvasSize * 0.1);
@@ -179,7 +179,7 @@ function lessonFreehand(canvasSize = 32, color = '#795548') {
 }
 
 /**
- * Lesson 9: Proportions and Angles — Tập giữ tỉ lệ và góc.
+ * Lesson 9: Proportions and Angles — Practice maintaining proportions and angles.
  */
 function lessonProportionsAndAngles(canvasSize = 32, color = '#3f51b5') {
   const mid = Math.floor(canvasSize / 2);
@@ -193,7 +193,7 @@ function lessonProportionsAndAngles(canvasSize = 32, color = '#3f51b5') {
 }
 
 /**
- * Lesson 10: Curves — Đường cong C, S.
+ * Lesson 10: Curves — C-curves and S-curves.
  */
 function lessonCurves(canvasSize = 32, color = '#9c27b0') {
   const commands = [];
@@ -218,7 +218,7 @@ function lessonCurves(canvasSize = 32, color = '#9c27b0') {
 }
 
 /**
- * Lesson 11: Spiral — Đường xoắn ốc.
+ * Lesson 11: Spiral — Drawing spiral curves.
  */
 function lessonSpiral(canvasSize = 32, color = '#ff9800') {
   const mid = Math.floor(canvasSize / 2);
@@ -233,7 +233,7 @@ function lessonSpiral(canvasSize = 32, color = '#ff9800') {
 }
 
 /**
- * Lesson 12: Strokes — Nét dài, nét ngắn, nét đậm–nhạt.
+ * Lesson 12: Strokes — Long strokes, short strokes, thick and thin lines.
  */
 function lessonStrokes(canvasSize = 32, color = '#2196f3') {
   const margin = Math.floor(canvasSize * 0.1);
@@ -250,7 +250,7 @@ function lessonStrokes(canvasSize = 32, color = '#2196f3') {
 }
 
 /**
- * Lesson 13: Parallel & Intersecting — Các đường song song và giao nhau.
+ * Lesson 13: Parallel & Intersecting Lines — Drawing parallel and intersecting lines.
  */
 function lessonParallelAndIntersecting(canvasSize = 32, color = '#00bcd4') {
   const margin = Math.floor(canvasSize * 0.1);
@@ -271,19 +271,19 @@ function lessonParallelAndIntersecting(canvasSize = 32, color = '#00bcd4') {
  */
 function getLessonCatalog() {
   return [
-    { id: 'lines', name: 'Đường thẳng', description: 'Vẽ đường thẳng ngang, dọc và chéo', fn: lessonLines },
-    { id: 'squares', name: 'Hình vuông & Hình chữ nhật', description: 'Hiểu về góc vuông và tỷ lệ', fn: lessonSquares },
-    { id: 'circles', name: 'Hình tròn', description: 'Làm quen với đường cong và đối xứng', fn: lessonCircles },
-    { id: 'ellipses', name: 'Hình elip', description: 'Hiểu về hình bầu dục và tỷ lệ', fn: lessonEllipses },
-    { 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 },
+    { id: 'lines', name: 'Lines', description: 'Draw horizontal, vertical and diagonal lines', fn: lessonLines },
+    { id: 'squares', name: 'Squares & Rectangles', description: 'Understand right angles and proportions', fn: lessonSquares },
+    { id: 'circles', name: 'Circles', description: 'Learn curves and symmetry', fn: lessonCircles },
+    { id: 'ellipses', name: 'Ellipses', description: 'Understand oval shapes and proportions', fn: lessonEllipses },
+    { id: 'triangles', name: 'Triangles', description: 'Three-point shapes and stability', fn: lessonTriangles },
+    { id: 'polygons', name: 'Polygons', description: 'Multi-sided shapes', fn: lessonPolygons },
+    { id: 'composition', name: 'Composition', description: 'Combine basic shapes to create simple objects', fn: lessonComposition },
+    { id: 'freehand', name: 'Freehand Drawing', description: 'Practice freehand drawing without rulers', fn: lessonFreehand },
+    { id: 'proportions', name: 'Proportions & Angles', description: 'Practice maintaining proportions and angles', fn: lessonProportionsAndAngles },
+    { id: 'curves', name: 'Curves', description: 'C-curves and S-curves', fn: lessonCurves },
+    { id: 'spiral', name: 'Spiral', description: 'Drawing spiral curves', fn: lessonSpiral },
+    { id: 'strokes', name: 'Stroke Types', description: 'Long strokes, short strokes, thick and thin lines', fn: lessonStrokes },
+    { id: 'parallel_intersecting', name: 'Parallel & Intersecting', description: 'Draw parallel and intersecting lines', fn: lessonParallelAndIntersecting },
   ];
 }
 

package/domains/art-tree/light_lessons.js

@@ -2,7 +2,7 @@ const shapes = require('./shapes');
 const lightShapes = require('./light_shapes');
 
 /**
- * Lesson: 6 Zones of Light (Khối cầu)
+ * Lesson: 6 Zones of Light (Sphere)
  * Highlight, Light, Halftone, Core shadow, Reflected light, Cast shadow.
  */
 function lessonLightZones(canvasSize = 32) {
@@ -26,7 +26,7 @@ function lessonLightZones(canvasSize = 32) {
 }
 
 /**
- * Lesson: Light Direction & Intensity (Hướng ánh sáng và mặt phẳng)
+ * Lesson: Light Direction & Intensity (Light direction and plane values)
  * Shows a box with planes facing/turning away from light.
  */
 function lessonLightDirection(canvasSize = 32) {
@@ -50,7 +50,7 @@ function lessonLightDirection(canvasSize = 32) {
 }
 
 /**
- * Lesson: Contact Shadow (Bóng tiếp xúc)
+ * Lesson: Contact Shadow (Point of contact shadow)
  * The darkest area where an object touches the ground.
  */
 function lessonContactShadow(canvasSize = 32) {

package/domains/art-tree/light_shapes.js

@@ -28,7 +28,7 @@ function drawShadedSphere(cx, cy, r, lightAngle) {
   const offX = Math.cos(lightAngle);
   const offY = Math.sin(lightAngle);
 
-  // 1. Cast Shadow (Bóng đổ) on the ground
+  // 1. Cast Shadow on the ground
   // Drawn first so it's behind the sphere
   // Shift cast shadow away from light
   const castR = Math.floor(r * 1.2);
@@ -41,26 +41,26 @@ function drawShadedSphere(cx, cy, r, lightAngle) {
   // 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)
+  // 3. Core Shadow (main shadow zone)
   // 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)
+  // 4. Halftone (mid-tone zone)
   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)
+  // 5. Light zone
   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)
+  // 6. Highlight (bright spot)
   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);

package/domains/art-tree/material_lessons.js

@@ -0,0 +1,71 @@
+const materialShapes = require('./material_shapes');
+
+/**
+ * Lesson: Shiny vs Matte (Metal vs Plastic/Rubber)
+ * Compares high contrast sharp highlights vs low contrast diffused highlights.
+ */
+function lessonMaterialShiny(canvasSize = 32) {
+  const commands = [];
+  const cx1 = Math.floor(canvasSize * 0.3);
+  const cx2 = Math.floor(canvasSize * 0.7);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.2);
+
+  // 1. Metal Sphere (Left)
+  commands.push(...materialShapes.drawMetalSphere(cx1, cy, r));
+
+  // 2. Matte/Plastic Sphere (Right)
+  commands.push(...materialShapes.drawMatteSphere(cx2, cy, r, '#e65100'));
+
+  return commands;
+}
+
+/**
+ * Lesson: Transparent (Glass)
+ * Demonstrates Fresnel effect, sharp reflections, and light transmission.
+ */
+function lessonMaterialGlass(canvasSize = 32) {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.35);
+
+  commands.push(...materialShapes.drawGlassSphere(cx, cy, r));
+
+  return commands;
+}
+
+/**
+ * Lesson: Texture (Wood vs Stone)
+ * Compares organic lines vs rough cracks.
+ */
+function lessonMaterialTexture(canvasSize = 32) {
+  const commands = [];
+  const cx1 = Math.floor(canvasSize * 0.3);
+  const cx2 = Math.floor(canvasSize * 0.7);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.2);
+
+  // 1. Wood Sphere (Left)
+  commands.push(...materialShapes.drawTexturedSphere(cx1, cy, r, 'wood'));
+
+  // 2. Stone Sphere (Right)
+  commands.push(...materialShapes.drawTexturedSphere(cx2, cy, r, 'stone'));
+
+  return commands;
+}
+
+function getMaterialLessonCatalog() {
+  return [
+    { id: 'material_shiny', name: 'Metal vs Matte', description: 'Sharp highlights (Metal) vs Soft highlights (Plastic)', fn: lessonMaterialShiny },
+    { id: 'material_glass', name: 'Glass & Transparency', description: 'Fresnel effect and transmitted light', fn: lessonMaterialGlass },
+    { id: 'material_texture', name: 'Texture: Wood vs Stone', description: 'Grain lines vs cracks on a 3D form', fn: lessonMaterialTexture },
+  ];
+}
+
+module.exports = {
+  lessonMaterialShiny,
+  lessonMaterialGlass,
+  lessonMaterialTexture,
+  getMaterialLessonCatalog
+};

package/domains/art-tree/material_shapes.js

@@ -0,0 +1,130 @@
+const shapes = require('./shapes');
+
+function drawMetalSphere(cx, cy, r) {
+  const commands = [];
+  
+  // Base sphere (darkest shadow/environment reflection)
+  commands.push(shapes.drawCircle(cx, cy, r, '#263238', true));
+  
+  // High contrast core shadow
+  const coreR = Math.floor(r * 0.9);
+  commands.push(shapes.drawCircle(cx, cy + Math.floor(r*0.1), coreR, '#1a1a1a', true));
+
+  // Environment reflection (Ground bounce)
+  const envR = Math.floor(r * 0.7);
+  commands.push(shapes.drawCircle(cx, cy + Math.floor(r*0.3), envR, '#546e7a', true));
+
+  // Sharp light zone
+  const lightR = Math.floor(r * 0.6);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.2), cy - Math.floor(r*0.2), lightR, '#cfd8dc', true));
+
+  // VERY sharp highlight (Tiny and pure white)
+  const highR = Math.floor(r * 0.1);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.4), cy - Math.floor(r*0.4), highR, '#ffffff', true));
+
+  return commands;
+}
+
+function drawMatteSphere(cx, cy, r, colorBase) {
+  const commands = [];
+  
+  // Base sphere (shadow)
+  commands.push(shapes.drawCircle(cx, cy, r, '#795548', true)); // Dark brownish shadow
+
+  // Smooth gradation (Halftone)
+  const halfR = Math.floor(r * 0.85);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.05), cy - Math.floor(r*0.05), halfR, colorBase, true));
+
+  // Light area
+  const lightR = Math.floor(r * 0.6);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.15), cy - Math.floor(r*0.15), lightR, '#ffcc80', true)); // Lighter tone
+
+  // Soft highlight (Large and diffused)
+  const highR = Math.floor(r * 0.3);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.25), cy - Math.floor(r*0.25), highR, '#ffe0b2', true));
+
+  return commands;
+}
+
+function drawGlassSphere(cx, cy, r) {
+  const commands = [];
+  
+  // Fresnel effect: Edges are brighter/more reflective than the center
+  // Base (Outline & Rim light)
+  commands.push(shapes.drawCircle(cx, cy, r, '#80deea', true));
+  
+  // Darker inner area (light passes through)
+  const innerR = Math.floor(r * 0.9);
+  commands.push(shapes.drawCircle(cx, cy, innerR, '#006064', true));
+  
+  // Transmitted light hitting the back bottom
+  const transR = Math.floor(r * 0.7);
+  commands.push(shapes.drawCircle(cx + Math.floor(r*0.1), cy + Math.floor(r*0.2), transR, '#4dd0e1', true));
+
+  // Very center is darkest (least reflection)
+  const centerR = Math.floor(r * 0.5);
+  commands.push(shapes.drawCircle(cx, cy, centerR, '#00363a', true));
+
+  // Sharp Highlights (Primary and secondary reflections)
+  const highR1 = Math.floor(r * 0.15);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.4), cy - Math.floor(r*0.4), highR1, '#ffffff', true));
+  
+  const highR2 = Math.floor(r * 0.08);
+  commands.push(shapes.drawCircle(cx + Math.floor(r*0.3), cy + Math.floor(r*0.4), highR2, '#e0f7fa', true));
+
+  return commands;
+}
+
+function drawTexturedSphere(cx, cy, r, type) {
+  const commands = [];
+  
+  // Base sphere
+  const baseColor = type === 'wood' ? '#8d6e63' : '#9e9e9e';
+  commands.push(shapes.drawCircle(cx, cy, r, baseColor, true));
+
+  // Shadow
+  const shadowColor = type === 'wood' ? '#4e342e' : '#616161';
+  const shadowR = Math.floor(r * 0.85);
+  commands.push(shapes.drawCircle(cx + Math.floor(r*0.1), cy + Math.floor(r*0.1), shadowR, shadowColor, true));
+
+  // Texture application
+  if (type === 'wood') {
+    // Wood grain lines curving around the sphere
+    const grainColor = '#3e2723';
+    for (let i = -2; i <= 2; i++) {
+      const rx = r * 0.8;
+      const ry = r * 0.3 * Math.abs(i) + r * 0.2;
+      commands.push(shapes.drawEllipse(cx, cy + (i * Math.floor(r*0.3)), Math.floor(rx), Math.floor(ry), grainColor, false));
+    }
+  } else if (type === 'stone') {
+    // Stone cracks and rough patches
+    const crackColor = '#212121';
+    // Simplified cracks using polylines
+    commands.push(shapes.drawPolyline([
+      {x: cx - Math.floor(r*0.5), y: cy - Math.floor(r*0.5)},
+      {x: cx - Math.floor(r*0.2), y: cy - Math.floor(r*0.1)},
+      {x: cx + Math.floor(r*0.3), y: cy - Math.floor(r*0.2)},
+      {x: cx + Math.floor(r*0.6), y: cy + Math.floor(r*0.1)}
+    ], crackColor));
+    
+    commands.push(shapes.drawPolyline([
+      {x: cx - Math.floor(r*0.2), y: cy - Math.floor(r*0.1)},
+      {x: cx, y: cy + Math.floor(r*0.4)},
+      {x: cx - Math.floor(r*0.4), y: cy + Math.floor(r*0.7)}
+    ], crackColor));
+  }
+
+  // Soft Highlight over texture
+  const highColor = type === 'wood' ? '#d7ccc8' : '#e0e0e0';
+  const highR = Math.floor(r * 0.4);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.3), cy - Math.floor(r*0.3), highR, highColor, true));
+
+  return commands;
+}
+
+module.exports = {
+  drawMetalSphere,
+  drawMatteSphere,
+  drawGlassSphere,
+  drawTexturedSphere
+};

package/domains/art-tree/material_tools.js

@@ -0,0 +1,49 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const materialLessons = require('./material_lessons');
+
+/**
+ * Register all material & surface rendering tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_material_shiny',
+    'Lesson: Materials - Metal vs Matte (High contrast vs diffused highlights)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = materialLessons.lessonMaterialShiny(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Metal vs Matte material lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_material_glass',
+    'Lesson: Materials - Glass (Transparency, Fresnel effect)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = materialLessons.lessonMaterialGlass(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Glass material lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_material_texture',
+    'Lesson: Materials - Texture (Wood grain vs Stone cracks)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = materialLessons.lessonMaterialTexture(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Wood vs Stone texture lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_material_catalog',
+    'Get the catalog of all available Material lessons',
+    {},
+    () => {
+      const catalog = materialLessons.getMaterialLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Material Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/perspective_lessons.js

@@ -89,7 +89,7 @@ function lesson3PointPerspective(canvasSize = 32, color = '#ff9800') {
 }
 
 /**
- * Lesson: Foreshortening (Sự rút ngắn theo chiều sâu)
+ * Lesson: Foreshortening (Depth foreshortening)
  * Drawing a cylinder pointing directly at the viewer
  */
 function lessonForeshortening(canvasSize = 32, color = '#9c27b0') {

package/domains/art-tree/perspective_tools.js

@@ -37,7 +37,7 @@ function register(server) {
     });
 
   registerTool(server, 'art_tree_lesson_persp_foreshorten',
-    'Lesson: Perspective - Foreshortening (Rút ngắn theo chiều sâu)',
+    'Lesson: Perspective - Foreshortening (Depth foreshortening)',
     { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#9c27b0') },
     async (p) => {
       const commands = perspLessons.lessonForeshortening(p.canvasSize, p.color);

package/domains/art-tree/sky_lessons_1.js

@@ -0,0 +1,82 @@
+const skyShapes1 = require('./sky_shapes_1');
+
+/**
+ * Lesson 1: Sun Shapes (Hình dạng mặt trời)
+ * Compares Basic, Soft, and Rays
+ */
+function lessonSunShapes(canvasSize = 32) {
+  const commands = [];
+  const y = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.15);
+
+  // Left: Basic
+  commands.push(...skyShapes1.drawSunBasic(Math.floor(canvasSize * 0.2), y, r));
+  // Center: Soft
+  commands.push(...skyShapes1.drawSunSoft(Math.floor(canvasSize * 0.5), y, r));
+  // Right: Rays
+  commands.push(...skyShapes1.drawSunRays(Math.floor(canvasSize * 0.8), y, r));
+
+  return commands;
+}
+
+/**
+ * Lesson 2: Sunset Colors (Màu sắc buổi chiều)
+ * Shows the progression of colors from blue to yellow
+ */
+function lessonSunsetColors(canvasSize = 32) {
+  const commands = [];
+  
+  // The classic sunset gradient: Blue -> Purple -> Pink -> Orange -> Yellow (top to bottom)
+  const sunsetPalette = [
+    '#3f51b5', // Blue
+    '#9c27b0', // Purple
+    '#e91e63', // Pink
+    '#ff9800', // Orange
+    '#ffeb3b'  // Yellow
+  ];
+
+  commands.push(...skyShapes1.drawSkyGradient(0, 0, canvasSize, canvasSize, sunsetPalette));
+
+  return commands;
+}
+
+/**
+ * Lesson 3: Sunset Sky (Bầu trời hoàng hôn)
+ * Combines the gradient sky with a soft sun setting at the bottom
+ */
+function lessonSunsetSky(canvasSize = 32) {
+  const commands = [];
+  
+  // 1. Draw the Sky
+  const sunsetPalette = [
+    '#1a237e', // Dark Blue
+    '#512da8', // Deep Purple
+    '#c2185b', // Magenta
+    '#ff5722', // Deep Orange
+    '#ffb300'  // Amber
+  ];
+  commands.push(...skyShapes1.drawSkyGradient(0, 0, canvasSize, canvasSize, sunsetPalette));
+
+  // 2. Draw the Sun (Soft glowing sun near the bottom)
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize * 0.8);
+  const r = Math.floor(canvasSize * 0.15);
+  commands.push(...skyShapes1.drawSunSoft(cx, cy, r));
+
+  return commands;
+}
+
+function getSkyLesson1Catalog() {
+  return [
+    { id: 'sky_sun_shapes', name: 'Sun Shapes', description: 'Basic vs Soft vs Rays', fn: lessonSunShapes },
+    { id: 'sky_sunset_colors', name: 'Sunset Colors', description: 'Gradient bands from Blue to Yellow', fn: lessonSunsetColors },
+    { id: 'sky_sunset_sky', name: 'Sunset Sky', description: 'Combining gradient sky with a soft sun', fn: lessonSunsetSky },
+  ];
+}
+
+module.exports = {
+  lessonSunShapes,
+  lessonSunsetColors,
+  lessonSunsetSky,
+  getSkyLesson1Catalog
+};

package/domains/art-tree/sky_shapes_1.js

@@ -0,0 +1,68 @@
+const shapes = require('./shapes');
+
+/**
+ * Draws a basic solid sun
+ */
+function drawSunBasic(cx, cy, r) {
+  return [shapes.drawCircle(cx, cy, r, '#ffeb3b', true)];
+}
+
+/**
+ * Draws a soft glowing sun using concentric circles with decreasing opacity
+ * Since we don't have true opacity in standard shapes yet, we use color stepping
+ * (white -> light yellow -> yellow -> orange)
+ */
+function drawSunSoft(cx, cy, r) {
+  const commands = [];
+  commands.push(shapes.drawCircle(cx, cy, Math.floor(r * 1.5), '#ffe082', true)); // Outer glow
+  commands.push(shapes.drawCircle(cx, cy, Math.floor(r * 1.2), '#ffeb3b', true)); // Mid glow
+  commands.push(shapes.drawCircle(cx, cy, Math.floor(r * 0.8), '#fff59d', true)); // Inner glow
+  commands.push(shapes.drawCircle(cx, cy, Math.floor(r * 0.4), '#ffffff', true)); // Core
+  return commands;
+}
+
+/**
+ * Draws a sun with distinct rays
+ */
+function drawSunRays(cx, cy, r) {
+  const commands = [];
+  const color = '#ffeb3b';
+  // Central body
+  commands.push(shapes.drawCircle(cx, cy, r, color, true));
+  
+  // Outer rays
+  const rayL = Math.floor(r * 2);
+  for (let i = 0; i < 12; i++) {
+    const a = (i / 12) * 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 + rayL * Math.cos(a));
+    const y2 = Math.round(cy + rayL * Math.sin(a));
+    commands.push(shapes.drawLine(x1, y1, x2, y2, color));
+  }
+  return commands;
+}
+
+/**
+ * Draws a simulated gradient sky using horizontal bands of color
+ * @param {Array<string>} colors - Array of hex colors from top to bottom
+ */
+function drawSkyGradient(x, y, w, h, colors) {
+  const commands = [];
+  const bandHeight = Math.ceil(h / colors.length);
+  
+  for (let i = 0; i < colors.length; i++) {
+    const bandY = y + i * bandHeight;
+    // To ensure we cover the total height, the last band fills the rest
+    const bh = (i === colors.length - 1) ? (y + h - bandY) : bandHeight;
+    commands.push(shapes.drawRectangle(x, bandY, w, bh, colors[i], true));
+  }
+  return commands;
+}
+
+module.exports = {
+  drawSunBasic,
+  drawSunSoft,
+  drawSunRays,
+  drawSkyGradient
+};

package/domains/art-tree/sky_tools.js

@@ -0,0 +1,51 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const skyLessons1 = require('./sky_lessons_1');
+
+/**
+ * Register all sky and sun tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  // Phase 1 Tools
+  registerTool(server, 'art_tree_lesson_sky_sun_shapes',
+    'Lesson: Sun & Sky - Compare Basic, Soft, and Rays sun shapes',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = skyLessons1.lessonSunShapes(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Sun Shapes lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_sky_sunset_colors',
+    'Lesson: Sun & Sky - Draw a sunset gradient (Blue to Yellow)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = skyLessons1.lessonSunsetColors(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Sunset Colors lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_sky_sunset_sky',
+    'Lesson: Sun & Sky - Combine gradient sky with a soft setting sun',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = skyLessons1.lessonSunsetSky(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Sunset Sky lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_sky_catalog',
+    'Get the catalog of all available Sun & Sky lessons',
+    {},
+    () => {
+      const cat1 = skyLessons1.getSkyLesson1Catalog();
+      const catalog = [...cat1];
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Sun & Sky Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };