@pixel-normal-edit/mcp 2.0.6 → 2.0.7

package/domains/art-tree/3d_lessons.js

@@ -0,0 +1,114 @@
+const shapes3d = require('./3d_shapes');
+const advShapes = require('./advanced_shapes');
+
+/**
+ * Lesson: Box Properties (Width, Height, Depth, Planes, Edges)
+ */
+function lessonBoxProperties(canvasSize = 32, color = '#2196f3') {
+  const commands = [];
+  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.3);
+
+  // Draw wireframe box
+  commands.push(...shapes3d.drawWireframeBox(cx, cy, w, h, d, color));
+  
+  // Highlight dimensions
+  const fX = cx - Math.floor(w/2);
+  const fY = cy - Math.floor(h/2);
+  
+  // Width
+  commands.push(...advShapes.drawDistance(fX, fY + h + 2, fX + w, fY + h + 2, '#4caf50'));
+  // Height
+  commands.push(...advShapes.drawDistance(fX - 2, fY, fX - 2, fY + h, '#ff9800'));
+  
+  // Depth (approximate along the oblique edge)
+  const dx = Math.floor(d * 0.7);
+  const dy = Math.floor(d * 0.5);
+  commands.push(...advShapes.drawDistance(fX + w + 2, fY + h, fX + w + 2 + dx, fY + h - dy, '#e91e63'));
+
+  return commands;
+}
+
+/**
+ * Lesson: Sphere Properties (Center, Radius, Cross contours, Axis)
+ */
+function lessonSphereProperties(canvasSize = 32, color = '#9c27b0') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.35);
+
+  // Draw sphere with volume lines
+  commands.push(...shapes3d.drawSphereVolume(cx, cy, r, color));
+  
+  // Highlight radius
+  commands.push(...advShapes.drawDistance(cx, cy, cx + r, cy, '#ff9800'));
+
+  return commands;
+}
+
+/**
+ * Lesson: Cylinder Properties (Central axis, Bases, Perspective change)
+ */
+function lessonCylinderProperties(canvasSize = 32, color = '#00bcd4') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.3);
+  const h = Math.floor(canvasSize * 0.6);
+
+  // Draw cylinder volume
+  commands.push(...shapes3d.drawCylinderVolume(cx, cy, r, h, color));
+  
+  // Highlight Height
+  commands.push(...advShapes.drawDistance(cx + r + 4, cy - Math.floor(h/2), cx + r + 4, cy + Math.floor(h/2), '#4caf50'));
+
+  // Highlight Radius (top base)
+  commands.push(...advShapes.drawDistance(cx, cy - Math.floor(h/2), cx + r, cy - Math.floor(h/2), '#ff9800'));
+
+  return commands;
+}
+
+/**
+ * Lesson: Cone Properties (Apex, Base, Axis)
+ */
+function lessonConeProperties(canvasSize = 32, color = '#ff5722') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.35);
+  const h = Math.floor(canvasSize * 0.6);
+
+  // Draw cone volume
+  commands.push(...shapes3d.drawConeVolume(cx, cy, r, h, color));
+  
+  // Highlight Height
+  const apexY = cy - Math.floor(h/2);
+  const baseY = cy + Math.floor(h/2);
+  commands.push(...advShapes.drawDistance(cx + r + 4, apexY, cx + r + 4, baseY, '#4caf50'));
+  
+  // Highlight Radius (base)
+  commands.push(...advShapes.drawDistance(cx, baseY, cx + r, baseY, '#ff9800'));
+
+  return commands;
+}
+
+function get3DLessonCatalog() {
+  return [
+    { id: '3d_box', name: '3D Box Properties', description: 'Width, height, depth, planes, inner structure', fn: lessonBoxProperties },
+    { id: '3d_sphere', name: '3D Sphere Properties', description: 'Center, radius, axis, cross contours', fn: lessonSphereProperties },
+    { id: '3d_cylinder', name: '3D Cylinder Properties', description: 'Axis, bases, height, perspective changes', fn: lessonCylinderProperties },
+    { id: '3d_cone', name: '3D Cone Properties', description: 'Apex, base, axis, radius', fn: lessonConeProperties },
+  ];
+}
+
+module.exports = {
+  lessonBoxProperties,
+  lessonSphereProperties,
+  lessonCylinderProperties,
+  lessonConeProperties,
+  get3DLessonCatalog
+};

package/domains/art-tree/3d_shapes.js

@@ -0,0 +1,116 @@
+const shapes = require('./shapes');
+const ellipseShapes = require('./ellipse_shapes');
+const advShapes = require('./advanced_shapes');
+
+/**
+ * Draw a wireframe box (oblique projection)
+ */
+function drawWireframeBox(cx, cy, width, height, depth, color) {
+  const commands = [];
+  const dx = Math.floor(depth * 0.7);
+  const dy = Math.floor(depth * 0.5);
+
+  // Front face
+  const fX = cx - Math.floor(width/2);
+  const fY = cy - Math.floor(height/2);
+  commands.push(shapes.drawRectangle(fX, fY, width, height, color, false));
+  
+  // Back face (shifted by dx, -dy)
+  const bX = fX + dx;
+  const bY = fY - dy;
+  const backColor = '#9e9e9e'; // Lighter color for inner/back structure
+  commands.push(shapes.drawRectangle(bX, bY, width, height, backColor, false));
+  
+  // Connect corners (edges)
+  commands.push(shapes.drawLine(fX, fY, bX, bY, color)); // Top-left
+  commands.push(shapes.drawLine(fX + width, fY, bX + width, bY, color)); // Top-right
+  commands.push(shapes.drawLine(fX, fY + height, bX, bY + height, backColor)); // Bottom-left (hidden)
+  commands.push(shapes.drawLine(fX + width, fY + height, bX + width, bY + height, color)); // Bottom-right
+  
+  return commands;
+}
+
+/**
+ * Draw a sphere showing volume with cross contours
+ */
+function drawSphereVolume(cx, cy, r, color) {
+  const commands = [];
+  
+  // Silhouette
+  commands.push(shapes.drawCircle(cx, cy, r, color, false));
+  
+  // Horizontal cross contour (latitude)
+  commands.push(shapes.drawEllipse(cx, cy, r, Math.floor(r * 0.3), '#03a9f4', false));
+  
+  // Vertical cross contour (longitude)
+  commands.push(shapes.drawEllipse(cx, cy, Math.floor(r * 0.3), r, '#03a9f4', false));
+  
+  // Center
+  commands.push(shapes.drawCircle(cx, cy, 1, '#ff0000', true));
+  
+  // Axis
+  commands.push(advShapes.drawAxis(cx, cy - r - 5, cx, cy + r + 5));
+
+  return commands;
+}
+
+/**
+ * Draw a cylinder showing volume and perspective
+ */
+function drawCylinderVolume(cx, cy, r, h, color) {
+  const commands = [];
+  
+  const topRy = Math.floor(r * 0.2); // Top ellipse is narrower
+  const botRy = Math.floor(r * 0.3); // Bottom ellipse is wider (perspective)
+  
+  const topY = cy - Math.floor(h/2);
+  const botY = cy + Math.floor(h/2);
+  
+  // Central axis
+  commands.push(advShapes.drawAxis(cx, topY - 10, cx, botY + 10));
+  
+  // Back curve of bottom ellipse (lighter)
+  // Our drawEllipse draws the whole thing, we'll just draw the whole ellipse
+  commands.push(shapes.drawEllipse(cx, botY, r, botRy, color, false));
+  
+  // Vertical edges
+  commands.push(shapes.drawLine(cx - r, topY, cx - r, botY, color));
+  commands.push(shapes.drawLine(cx + r, topY, cx + r, botY, color));
+  
+  // Top ellipse
+  commands.push(shapes.drawEllipse(cx, topY, r, topRy, color, false));
+
+  return commands;
+}
+
+/**
+ * Draw a cone showing volume
+ */
+function drawConeVolume(cx, cy, r, h, color) {
+  const commands = [];
+  const baseRy = Math.floor(r * 0.3);
+  const apexY = cy - Math.floor(h/2);
+  const baseY = cy + Math.floor(h/2);
+  
+  // Central axis
+  commands.push(advShapes.drawAxis(cx, apexY - 10, cx, baseY + 10));
+  
+  // Base ellipse
+  commands.push(shapes.drawEllipse(cx, baseY, r, baseRy, color, false));
+  
+  // Tangent edges (approximate to the edges of the ellipse rx)
+  commands.push(shapes.drawLine(cx, apexY, cx - r, baseY, color));
+  commands.push(shapes.drawLine(cx, apexY, cx + r, baseY, color));
+  
+  // Apex
+  commands.push(shapes.drawCircle(cx, apexY, 2, '#ff0000', true));
+  
+  return commands;
+}
+
+module.exports = {
+  drawWireframeBox,
+  drawSphereVolume,
+  drawCylinderVolume,
+  drawConeVolume
+};

package/domains/art-tree/3d_tools.js

@@ -0,0 +1,60 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const lessons3d = require('./3d_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all 3D tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_3d_box',
+    'Lesson: 3D Forms - Box Properties (Width, Height, Depth, Planes)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#2196f3') },
+    async (p) => {
+      const commands = lessons3d.lessonBoxProperties(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 3D Box Properties lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_3d_sphere',
+    'Lesson: 3D Forms - Sphere Properties (Center, Radius, Cross contours)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#9c27b0') },
+    async (p) => {
+      const commands = lessons3d.lessonSphereProperties(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 3D Sphere Properties lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_3d_cylinder',
+    'Lesson: 3D Forms - Cylinder Properties (Axis, Bases, Height)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#00bcd4') },
+    async (p) => {
+      const commands = lessons3d.lessonCylinderProperties(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 3D Cylinder Properties lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_3d_cone',
+    'Lesson: 3D Forms - Cone Properties (Apex, Base, Axis)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#ff5722') },
+    async (p) => {
+      const commands = lessons3d.lessonConeProperties(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 3D Cone Properties lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_3d_catalog',
+    'Get the catalog of all available 3D Form lessons',
+    {},
+    () => {
+      const catalog = lessons3d.get3DLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 3D Form Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/advanced_lessons.js

@@ -0,0 +1,124 @@
+const shapes = require('./shapes');
+const advShapes = require('./advanced_shapes');
+
+/**
+ * Lesson: Tỉ lệ (Ratios)
+ */
+function lessonShapeRatios(canvasSize = 32, color = '#2196f3') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const w1 = Math.floor(canvasSize * 0.2);
+  const h1 = w1; // 1:1
+  const w2 = Math.floor(canvasSize * 0.2);
+  const h2 = Math.floor(canvasSize * 0.4); // 1:2
+  
+  return [
+    shapes.drawRectangle(margin, margin, w1, h1, color, false),
+    shapes.drawRectangle(canvasSize - margin - w2, margin, w2, h2, '#4caf50', false),
+    ...advShapes.drawDistance(margin, margin + h1 + 2, margin + w1, margin + h1 + 2, '#888'),
+    ...advShapes.drawDistance(canvasSize - margin - w2, margin + h2 + 2, canvasSize - margin, margin + h2 + 2, '#888')
+  ];
+}
+
+/**
+ * Lesson: Đối xứng & Trục giữa (Symmetry & Axes)
+ */
+function lessonSymmetryAndAxis(canvasSize = 32, color = '#9c27b0') {
+  const mid = Math.floor(canvasSize / 2);
+  const w = Math.floor(canvasSize * 0.5);
+  const h = Math.floor(canvasSize * 0.5);
+  const commands = [];
+  
+  // Draw Rhombus
+  commands.push(advShapes.drawRhombus(mid, mid, w, h, color, false));
+  // Vertical axis
+  commands.push(advShapes.drawAxis(mid, Math.floor(canvasSize * 0.1), mid, canvasSize - Math.floor(canvasSize * 0.1)));
+  // Horizontal axis
+  commands.push(advShapes.drawAxis(Math.floor(canvasSize * 0.1), mid, canvasSize - Math.floor(canvasSize * 0.1), mid));
+  
+  return commands;
+}
+
+/**
+ * Lesson: Góc (Angles)
+ */
+function lessonAngles(canvasSize = 32, color = '#ff5722') {
+  const mid = Math.floor(canvasSize / 2);
+  const w = Math.floor(canvasSize * 0.6);
+  const h = Math.floor(canvasSize * 0.3);
+  const margin = Math.floor(canvasSize * 0.2);
+  
+  const commands = [];
+  // Trapezoid (shows acute and obtuse angles)
+  commands.push(advShapes.drawTrapezoid(margin, margin, Math.floor(w/2), w, h, color, false));
+  
+  // Right Triangle (shows 90 degree angle)
+  commands.push(shapes.drawTriangle([
+    { x: margin, y: canvasSize - margin },
+    { x: margin, y: mid + margin },
+    { x: margin + w, y: canvasSize - margin }
+  ], '#3f51b5', false));
+  
+  return commands;
+}
+
+/**
+ * Lesson: Khoảng cách (Distances)
+ */
+function lessonDistances(canvasSize = 32, color = '#00bcd4') {
+  const margin = Math.floor(canvasSize * 0.2);
+  const commands = [];
+  
+  // Points
+  commands.push(shapes.drawCircle(margin, margin, 1, color, true));
+  commands.push(shapes.drawCircle(canvasSize - margin, margin, 1, color, true));
+  commands.push(shapes.drawCircle(margin, canvasSize - margin, 1, color, true));
+  
+  // Distances between them
+  commands.push(...advShapes.drawDistance(margin, margin, canvasSize - margin, margin));
+  commands.push(...advShapes.drawDistance(margin, margin, margin, canvasSize - margin));
+  
+  return commands;
+}
+
+/**
+ * Lesson: Quan hệ hình khối (Relationships)
+ */
+function lessonShapeRelationships(canvasSize = 32, color = '#607d8b') {
+  const mid = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.2);
+  const commands = [];
+  
+  // Overlapping circles
+  commands.push(shapes.drawCircle(mid - Math.floor(r/2), mid, r, color, false));
+  commands.push(shapes.drawCircle(mid + Math.floor(r/2), mid, r, '#e91e63', false));
+  
+  // Nested squares (top left)
+  const margin = Math.floor(canvasSize * 0.1);
+  const size = Math.floor(canvasSize * 0.25);
+  commands.push(shapes.drawSquare(margin, margin, size, '#4caf50', false));
+  commands.push(shapes.drawSquare(margin + 2, margin + 2, size - 4, '#8bc34a', false));
+  
+  return commands;
+}
+
+/**
+ * Get catalog of advanced lessons
+ */
+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 },
+  ];
+}
+
+module.exports = {
+  lessonShapeRatios,
+  lessonSymmetryAndAxis,
+  lessonAngles,
+  lessonDistances,
+  lessonShapeRelationships,
+  getAdvancedLessonCatalog
+};

package/domains/art-tree/advanced_shapes.js

@@ -0,0 +1,73 @@
+const shapes = require('./shapes');
+
+/**
+ * Draw a trapezoid (isosceles usually) centered horizontally.
+ * @param {number} x - Top-left X of the bounding box
+ * @param {number} y - Top Y
+ * @param {number} topWidth - Width of the top edge
+ * @param {number} bottomWidth - Width of the bottom edge
+ * @param {number} height - Height of the trapezoid
+ * @param {string} color - Hex color
+ * @param {boolean} filled
+ */
+function drawTrapezoid(x, y, topWidth, bottomWidth, height, color, filled = false) {
+  const midX = x + Math.max(topWidth, bottomWidth) / 2;
+  const topX1 = Math.round(midX - topWidth / 2);
+  const topX2 = Math.round(midX + topWidth / 2);
+  const botX1 = Math.round(midX - bottomWidth / 2);
+  const botX2 = Math.round(midX + bottomWidth / 2);
+
+  const points = [
+    { x: topX1, y },
+    { x: topX2, y },
+    { x: botX2, y: y + height },
+    { x: botX1, y: y + height }
+  ];
+  return shapes.drawPolygon(points, color, filled);
+}
+
+/**
+ * Draw a rhombus given center and its two diagonals (width, height).
+ */
+function drawRhombus(cx, cy, width, height, color, filled = false) {
+  const points = [
+    { x: cx, y: cy - Math.floor(height / 2) },
+    { x: cx + Math.floor(width / 2), y: cy },
+    { x: cx, y: cy + Math.floor(height / 2) },
+    { x: cx - Math.floor(width / 2), y: cy }
+  ];
+  return shapes.drawPolygon(points, color, filled);
+}
+
+/**
+ * Draw a symmetry axis line (using a distinct color, e.g., light grey/red).
+ */
+function drawAxis(x0, y0, x1, y1) {
+  return shapes.drawLine(x0, y0, x1, y1, '#ffaaaa'); // Light red for axis
+}
+
+/**
+ * Draw a dimension/distance line with end ticks.
+ */
+function drawDistance(x0, y0, x1, y1, color = '#888888') {
+  const commands = [];
+  commands.push(shapes.drawLine(x0, y0, x1, y1, color));
+  
+  // Draw small ticks at ends (perpendicular)
+  const isHorizontal = Math.abs(x1 - x0) > Math.abs(y1 - y0);
+  if (isHorizontal) {
+    commands.push(shapes.drawLine(x0, y0 - 2, x0, y0 + 2, color));
+    commands.push(shapes.drawLine(x1, y1 - 2, x1, y1 + 2, color));
+  } else {
+    commands.push(shapes.drawLine(x0 - 2, y0, x0 + 2, y0, color));
+    commands.push(shapes.drawLine(x1 - 2, y1, x1 + 2, y1, color));
+  }
+  return commands;
+}
+
+module.exports = {
+  drawTrapezoid,
+  drawRhombus,
+  drawAxis,
+  drawDistance
+};

package/domains/art-tree/advanced_tools.js

@@ -0,0 +1,69 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const advLessons = require('./advanced_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all advanced art-tree tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_ratios',
+    'Lesson: Đặc tính - Tỉ lệ hình (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` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_symmetry',
+    'Lesson: Đặc tính - Đối xứng & Trục (Symmetry and 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` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_angles',
+    'Lesson: Đặc tính - Góc (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` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_distances',
+    'Lesson: Đặc tính - Khoảng cách (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` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_relationships',
+    'Lesson: Đặc tính - Quan hệ hình (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` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_adv_catalog',
+    'Get the catalog of all available Advanced Art Tree lessons',
+    {},
+    () => {
+      const catalog = advLessons.getAdvancedLessonCatalog();
+      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}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/cross_section_lessons.js

@@ -0,0 +1,65 @@
+const csShapes = require('./cross_section_shapes');
+
+/**
+ * Lesson: Bottle Sections (Base, Body, Shoulder, Neck, Mouth)
+ */
+function lessonBottleSections(canvasSize = 32, color = '#2196f3') {
+  const cx = Math.floor(canvasSize / 2);
+  const totalH = Math.floor(canvasSize * 0.8);
+  const topY = Math.floor(canvasSize * 0.1);
+  const bottomY = topY + totalH;
+
+  const sections = [
+    { y: topY, r: Math.floor(canvasSize * 0.08) },                        // Mouth (slightly open)
+    { y: topY + Math.floor(totalH * 0.1), r: Math.floor(canvasSize * 0.06) }, // Neck (narrow)
+    { y: topY + Math.floor(totalH * 0.3), r: Math.floor(canvasSize * 0.2) },  // Shoulder (shrinking to body)
+    { y: topY + Math.floor(totalH * 0.6), r: Math.floor(canvasSize * 0.25) }, // Body (wide)
+    { y: bottomY, r: Math.floor(canvasSize * 0.25) }                      // Base (wide)
+  ];
+
+  return csShapes.drawLoftedForm(cx, topY, bottomY, sections, color, true);
+}
+
+/**
+ * Lesson: Glass Sections (Base, Mid, Mouth)
+ */
+function lessonGlassSections(canvasSize = 32, color = '#9c27b0') {
+  const cx = Math.floor(canvasSize / 2);
+  const totalH = Math.floor(canvasSize * 0.6);
+  const topY = Math.floor(canvasSize * 0.2);
+  const bottomY = topY + totalH;
+
+  const sections = [
+    { y: topY, r: Math.floor(canvasSize * 0.3) },                         // Mouth (wide)
+    { y: topY + Math.floor(totalH * 0.5), r: Math.floor(canvasSize * 0.2) },  // Mid body (widening)
+    { y: bottomY, r: Math.floor(canvasSize * 0.15) }                      // Base (small)
+  ];
+
+  return csShapes.drawLoftedForm(cx, topY, bottomY, sections, color, true);
+}
+
+/**
+ * Lesson: Head Sections (Cranium, Face, Jaw)
+ */
+function lessonHeadSections(canvasSize = 32, color = '#ff9800') {
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const height = Math.floor(canvasSize * 0.8);
+
+  return csShapes.drawHeadStructure(cx, cy, height, color);
+}
+
+function getCrossSectionLessonCatalog() {
+  return [
+    { id: 'cs_bottle', name: 'Bottle Cross-sections', description: 'Base, body, shoulder, neck, mouth', fn: lessonBottleSections },
+    { id: 'cs_glass', name: 'Glass Cross-sections', description: 'Base, body, mouth', fn: lessonGlassSections },
+    { id: 'cs_head', name: 'Head Cross-sections', description: 'Cranium, face, jaw', fn: lessonHeadSections },
+  ];
+}
+
+module.exports = {
+  lessonBottleSections,
+  lessonGlassSections,
+  lessonHeadSections,
+  getCrossSectionLessonCatalog
+};