mcp-dndgrid 0.1.0

package/src/tools/generate-layout.ts

@@ -0,0 +1,235 @@
+import { z } from 'zod';
+import { LayoutBuilder, L } from '../utils/layout-builder.js';
+import { CodeGenerator } from '../utils/code-generator.js';
+import { LayoutAnalyzer } from '../utils/layout-analyzer.js';
+import { Validator } from '../utils/validator.js';
+import type { LayoutNode } from '../types/layout.js';
+
+/**
+ * Input schema for generate-layout tool
+ */
+export const GenerateLayoutInputSchema = z.object({
+  description: z
+    .string()
+    .describe(
+      'Natural language description of desired layout (e.g., "3-panel IDE layout with sidebar, editor, and terminal")'
+    ),
+  components: z.array(z.string()).describe('List of component names to place in the layout'),
+  containerWidth: z.number().optional().default(1200).describe('Container width in pixels'),
+  containerHeight: z.number().optional().default(800).describe('Container height in pixels'),
+  framework: z
+    .enum(['react', 'nextjs-app', 'nextjs-pages'])
+    .optional()
+    .default('nextjs-app')
+    .describe('Target framework (affects "use client" directive)'),
+});
+
+export type GenerateLayoutInput = z.infer<typeof GenerateLayoutInputSchema>;
+
+/**
+ * generate-layout tool implementation
+ */
+export async function generateLayout(args: GenerateLayoutInput) {
+  const { description, components, containerWidth, containerHeight, framework } = args;
+
+  // Analyze description to determine layout pattern
+  const pattern = analyzeDescription(description, components);
+
+  // Build layout based on pattern
+  let layoutNode: LayoutNode;
+
+  try {
+    layoutNode = buildLayoutFromPattern(pattern, components);
+  } catch (error) {
+    return {
+      content: [
+        {
+          type: 'text' as const,
+          text: `❌ Failed to generate layout: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        },
+      ],
+    };
+  }
+
+  // Create LayoutTree
+  const layout = new LayoutBuilder(containerWidth, containerHeight)
+    .setRoot(layoutNode)
+    .build();
+
+  // Generate code
+  const generator = new CodeGenerator({
+    framework,
+    width: containerWidth,
+    height: containerHeight,
+  });
+  const code = generator.generate(layout);
+
+  // Analyze metadata
+  const metadata = LayoutAnalyzer.calculateMetadata(layout);
+
+  // Validate
+  const validator = new Validator();
+  const validation = validator.validate(layout, false);
+
+  // Format output
+  let output = `# Generated DndGrid Layout\n\n`;
+  output += `**Description:** ${description}\n\n`;
+
+  output += `## Layout Metadata\n\n`;
+  output += `- **Items:** ${metadata.itemCount}\n`;
+  output += `- **Splits:** ${metadata.splitCount}\n`;
+  output += `- **Max Depth:** ${metadata.maxDepth}\n`;
+  output += `- **Performance:** ${metadata.estimatedPerformance}\n`;
+  output += `- **Pattern:** ${pattern.type}\n\n`;
+
+  if (validation.warnings.length > 0) {
+    output += `## Warnings\n\n`;
+    validation.warnings.forEach((warn, i) => {
+      output += `${i + 1}. ${warn.message}\n`;
+    });
+    output += '\n';
+  }
+
+  if (validation.suggestions.length > 0) {
+    output += `## Suggestions\n\n`;
+    validation.suggestions.forEach((sugg, i) => {
+      output += `${i + 1}. ${sugg}\n`;
+    });
+    output += '\n';
+  }
+
+  output += `## Generated Code\n\n\`\`\`tsx\n${code}\`\`\`\n`;
+
+  return {
+    content: [{ type: 'text' as const, text: output }],
+  };
+}
+
+/**
+ * Layout patterns
+ */
+type LayoutPattern =
+  | { type: 'ide'; sidebar: string; main: string; bottom: string }
+  | { type: 'dashboard'; items: string[] }
+  | { type: 'three-column'; left: string; center: string; right: string }
+  | { type: 'split'; left: string; right: string; direction: 'horizontal' | 'vertical' }
+  | { type: 'custom'; items: string[] };
+
+/**
+ * Analyze description to determine layout pattern
+ */
+function analyzeDescription(description: string, components: string[]): LayoutPattern {
+  const lower = description.toLowerCase();
+
+  // IDE pattern
+  if (
+    (lower.includes('ide') ||
+      (lower.includes('sidebar') && lower.includes('editor')) ||
+      lower.includes('3-panel')) &&
+    components.length === 3
+  ) {
+    return {
+      type: 'ide',
+      sidebar: components[0],
+      main: components[1],
+      bottom: components[2],
+    };
+  }
+
+  // Dashboard pattern (2x2 or grid)
+  if (
+    (lower.includes('dashboard') || lower.includes('grid') || lower.includes('2x2')) &&
+    components.length === 4
+  ) {
+    return {
+      type: 'dashboard',
+      items: components,
+    };
+  }
+
+  // Three column
+  if (
+    (lower.includes('three') || lower.includes('3')) &&
+    lower.includes('column') &&
+    components.length === 3
+  ) {
+    return {
+      type: 'three-column',
+      left: components[0],
+      center: components[1],
+      right: components[2],
+    };
+  }
+
+  // Split view
+  if (components.length === 2 && (lower.includes('split') || lower.includes('two'))) {
+    const direction = lower.includes('horizontal') || lower.includes('top')
+      ? 'horizontal'
+      : 'vertical';
+    return {
+      type: 'split',
+      left: components[0],
+      right: components[1],
+      direction,
+    };
+  }
+
+  // Custom/fallback
+  return {
+    type: 'custom',
+    items: components,
+  };
+}
+
+/**
+ * Build layout node from pattern
+ */
+function buildLayoutFromPattern(pattern: LayoutPattern, components: string[]): LayoutNode {
+  switch (pattern.type) {
+    case 'ide':
+      return L.v(
+        0.2,
+        L.item(pattern.sidebar),
+        L.h(0.7, L.item(pattern.main), L.item(pattern.bottom))
+      );
+
+    case 'dashboard':
+      return L.h(
+        0.5,
+        L.v(0.5, L.item(pattern.items[0]), L.item(pattern.items[1])),
+        L.v(0.5, L.item(pattern.items[2]), L.item(pattern.items[3]))
+      );
+
+    case 'three-column':
+      return L.v(
+        0.2,
+        L.item(pattern.left),
+        L.v(0.75, L.item(pattern.center), L.item(pattern.right))
+      );
+
+    case 'split':
+      if (pattern.direction === 'horizontal') {
+        return L.h(0.5, L.item(pattern.left), L.item(pattern.right));
+      } else {
+        return L.v(0.5, L.item(pattern.left), L.item(pattern.right));
+      }
+
+    case 'custom':
+      // Simple fallback: vertical splits for all components
+      if (components.length === 1) {
+        return L.item(components[0]);
+      }
+      if (components.length === 2) {
+        return L.v(0.5, L.item(components[0]), L.item(components[1]));
+      }
+      // For 3+ components, create nested vertical splits
+      let node: LayoutNode = L.item(components[components.length - 1]);
+      for (let i = components.length - 2; i >= 0; i--) {
+        node = L.v(1 / (i + 2), L.item(components[i]), node);
+      }
+      return node;
+
+    default:
+      throw new Error(`Unknown pattern type: ${(pattern as any).type}`);
+  }
+}

package/src/tools/interactive-builder.ts

@@ -0,0 +1,100 @@
+import { z } from 'zod';
+import { BUILTIN_TEMPLATES } from '../types/template.js';
+
+/**
+ * Input schema for interactive-builder tool
+ */
+export const InteractiveBuilderInputSchema = z.object({
+  action: z
+    .enum(['list-templates', 'select-template', 'help'])
+    .describe('Action to perform'),
+  templateName: z.string().optional().describe('Template name (for select-template action)'),
+});
+
+export type InteractiveBuilderInput = z.infer<typeof InteractiveBuilderInputSchema>;
+
+/**
+ * interactive-builder tool implementation
+ *
+ * Simplified version that guides users through template selection
+ */
+export async function interactiveBuilder(args: InteractiveBuilderInput) {
+  const { action, templateName } = args;
+
+  let output = '';
+
+  switch (action) {
+    case 'list-templates':
+      output = `# Available Templates\n\n`;
+      Object.entries(BUILTIN_TEMPLATES).forEach(([key, template]) => {
+        output += `## ${template.name} (\`${key}\`)\n\n`;
+        output += `${template.description}\n\n`;
+        output += `**Preview:**\n\`\`\`\n${template.preview}\n\`\`\`\n\n`;
+        output += `**Required Components:**\n`;
+        template.slots.forEach((slot) => {
+          output += `- \`${slot}\`\n`;
+        });
+        output += `\n---\n\n`;
+      });
+      output += `## Next Steps\n\n`;
+      output += `1. Choose a template that matches your needs\n`;
+      output += `2. Use the \`apply-template\` tool with your component names\n`;
+      output += `\nExample:\n\`\`\`\napply-template --templateName ide-layout --components '{"sidebar": "Sidebar", "editor": "CodeEditor", "terminal": "Terminal"}'\n\`\`\`\n`;
+      break;
+
+    case 'select-template':
+      if (!templateName) {
+        output = `❌ Please provide a template name.\n\nUse action="list-templates" to see available templates.`;
+        break;
+      }
+
+      const template = BUILTIN_TEMPLATES[templateName];
+      if (!template) {
+        output = `❌ Template "${templateName}" not found.\n\nAvailable: ${Object.keys(BUILTIN_TEMPLATES).join(', ')}`;
+        break;
+      }
+
+      output = `# Selected Template: ${template.name}\n\n`;
+      output += `${template.description}\n\n`;
+      output += `**Preview:**\n\`\`\`\n${template.preview}\n\`\`\`\n\n`;
+      output += `## Required Components\n\n`;
+      output += `You need to provide ${template.slots.length} components:\n\n`;
+      template.slots.forEach((slot, i) => {
+        output += `${i + 1}. **${slot}**: Your component name here\n`;
+      });
+      output += `\n## Apply This Template\n\n`;
+      output += `Use the \`apply-template\` tool:\n\n`;
+      output += `\`\`\`\n`;
+      output += `templateName: "${templateName}"\n`;
+      output += `components:\n`;
+      template.slots.forEach((slot) => {
+        output += `  ${slot}: "YourComponentName"\n`;
+      });
+      output += `\`\`\`\n`;
+      break;
+
+    case 'help':
+      output = `# Interactive Layout Builder - Help\n\n`;
+      output += `This tool helps you build DndGrid layouts interactively.\n\n`;
+      output += `## Available Actions\n\n`;
+      output += `1. **list-templates** - Show all available templates\n`;
+      output += `2. **select-template** - Get details about a specific template\n`;
+      output += `3. **help** - Show this help message\n\n`;
+      output += `## Workflow\n\n`;
+      output += `1. List templates to see what's available\n`;
+      output += `2. Select a template that fits your needs\n`;
+      output += `3. Use \`apply-template\` with your component names\n\n`;
+      output += `## Other Tools\n\n`;
+      output += `- **generate-layout** - Generate from natural language description\n`;
+      output += `- **validate-layout** - Validate existing code\n`;
+      output += `- **analyze-layout** - Analyze existing layout\n`;
+      break;
+
+    default:
+      output = `❌ Unknown action: ${action}`;
+  }
+
+  return {
+    content: [{ type: 'text' as const, text: output }],
+  };
+}

package/src/tools/validate-layout.ts

@@ -0,0 +1,113 @@
+import { z } from 'zod';
+import { Validator } from '../utils/validator.js';
+import { ASTParser } from '../utils/ast-parser.js';
+
+/**
+ * Input schema for validate-layout tool
+ */
+export const ValidateLayoutInputSchema = z.object({
+  code: z.string().describe('DndGrid code to validate'),
+  strict: z.boolean().optional().default(false).describe('Enable strict validation (includes performance checks)'),
+});
+
+export type ValidateLayoutInput = z.infer<typeof ValidateLayoutInputSchema>;
+
+/**
+ * validate-layout tool implementation
+ */
+export async function validateLayout(args: ValidateLayoutInput) {
+  const { code, strict } = args;
+
+  // First, validate code syntax
+  const validator = new Validator();
+  const codeValidation = validator.validateCode(code, strict);
+
+  // Try to parse the code to get layout tree
+  const parser = new ASTParser();
+  const layout = parser.parse(code);
+
+  let treeValidation = null;
+  if (layout) {
+    treeValidation = validator.validate(layout, strict);
+  }
+
+  // Combine results
+  const allErrors = [...codeValidation.errors, ...(treeValidation?.errors || [])];
+  const allWarnings = [...codeValidation.warnings, ...(treeValidation?.warnings || [])];
+  const allSuggestions = [...codeValidation.suggestions, ...(treeValidation?.suggestions || [])];
+
+  const valid = allErrors.length === 0;
+
+  // Format output
+  let output = `# DndGrid Layout Validation\n\n`;
+
+  output += `**Status:** ${valid ? '✅ Valid' : '❌ Invalid'}\n\n`;
+
+  if (allErrors.length > 0) {
+    output += `## Errors (${allErrors.length})\n\n`;
+    allErrors.forEach((err, i) => {
+      output += `${i + 1}. **[${err.type}]** ${err.message}\n`;
+      if (err.fix) {
+        output += `   - Fix: \`${err.fix}\`\n`;
+      }
+      if (err.line) {
+        output += `   - Line: ${err.line}\n`;
+      }
+      output += '\n';
+    });
+  }
+
+  if (allWarnings.length > 0) {
+    output += `## Warnings (${allWarnings.length})\n\n`;
+    allWarnings.forEach((warn, i) => {
+      output += `${i + 1}. ${warn.message}\n`;
+      if (warn.suggestion) {
+        output += `   - Suggestion: ${warn.suggestion}\n`;
+      }
+      output += '\n';
+    });
+  }
+
+  if (allSuggestions.length > 0) {
+    output += `## Suggestions\n\n`;
+    allSuggestions.forEach((sugg, i) => {
+      output += `${i + 1}. ${sugg}\n`;
+    });
+    output += '\n';
+  }
+
+  if (layout) {
+    output += `## Layout Structure\n\n`;
+    output += `- Items: ${countItems(layout.child)}\n`;
+    output += `- Splits: ${countSplits(layout.child)}\n`;
+    output += `- Max Depth: ${getMaxDepth(layout.child)}\n`;
+  }
+
+  return {
+    content: [
+      {
+        type: 'text' as const,
+        text: output,
+      },
+    ],
+  };
+}
+
+// Helper functions
+function countItems(node: any): number {
+  if (node.type === 'item') return 1;
+  return countItems(node.primary) + countItems(node.secondary);
+}
+
+function countSplits(node: any): number {
+  if (node.type === 'item') return 0;
+  return 1 + countSplits(node.primary) + countSplits(node.secondary);
+}
+
+function getMaxDepth(node: any, depth: number = 1): number {
+  if (node.type === 'item') return depth;
+  return Math.max(
+    getMaxDepth(node.primary, depth + 1),
+    getMaxDepth(node.secondary, depth + 1)
+  );
+}

package/src/types/layout.ts

@@ -0,0 +1,48 @@
+/**
+ * Layout type definitions for DndGrid MCP server
+ */
+
+export type DndSplitDirection = 'horizontal' | 'vertical';
+
+export interface LayoutItem {
+  type: 'item';
+  component: string;
+}
+
+export interface LayoutSplit {
+  type: 'split';
+  direction: DndSplitDirection;
+  ratio: number; // 0 < ratio < 1
+  primary: LayoutNode;
+  secondary: LayoutNode;
+}
+
+export type LayoutNode = LayoutItem | LayoutSplit;
+
+export interface LayoutTree {
+  type: 'container';
+  width: number;
+  height: number;
+  child: LayoutNode;
+}
+
+export interface LayoutMetadata {
+  splitCount: number;
+  itemCount: number;
+  maxDepth: number;
+  estimatedPerformance: 'excellent' | 'good' | 'fair' | 'poor';
+}
+
+export interface ValidationError {
+  type: 'syntax' | 'structure' | 'constraint';
+  message: string;
+  line?: number;
+  column?: number;
+  fix?: string;
+}
+
+export interface ValidationWarning {
+  message: string;
+  line?: number;
+  suggestion?: string;
+}

package/src/types/template.ts

@@ -0,0 +1,181 @@
+import type { LayoutNode } from './layout.js';
+
+/**
+ * Template node with slots for components
+ */
+export interface TemplateNode {
+  type: 'split' | 'item';
+  direction?: 'horizontal' | 'vertical';
+  ratio?: number;
+  slot?: string; // For item nodes
+  primary?: TemplateNode;
+  secondary?: TemplateNode;
+}
+
+/**
+ * Layout template definition
+ */
+export interface LayoutTemplate {
+  name: string;
+  description: string;
+  preview: string; // ASCII art preview
+  slots: string[]; // Required component slots
+  defaultRatios: Record<string, number>;
+  tree: TemplateNode;
+}
+
+/**
+ * Built-in templates
+ */
+export const BUILTIN_TEMPLATES: Record<string, LayoutTemplate> = {
+  'ide-layout': {
+    name: 'IDE Layout',
+    description: '3-panel layout: sidebar (20%), editor (56%), terminal (24%)',
+    preview: `┌────┬────────────┐
+│    │            │
+│ S  │   Editor   │
+│ I  │            │
+│ D  ├────────────┤
+│ E  │  Terminal  │
+└────┴────────────┘`,
+    slots: ['sidebar', 'editor', 'terminal'],
+    defaultRatios: {
+      'vertical-main': 0.2,
+      'horizontal-content': 0.7,
+    },
+    tree: {
+      type: 'split',
+      direction: 'vertical',
+      ratio: 0.2,
+      primary: {
+        type: 'item',
+        slot: 'sidebar',
+      },
+      secondary: {
+        type: 'split',
+        direction: 'horizontal',
+        ratio: 0.7,
+        primary: {
+          type: 'item',
+          slot: 'editor',
+        },
+        secondary: {
+          type: 'item',
+          slot: 'terminal',
+        },
+      },
+    },
+  },
+
+  'dashboard-2x2': {
+    name: 'Dashboard 2x2',
+    description: '2x2 grid layout for dashboard widgets',
+    preview: `┌──────┬──────┐
+│  W1  │  W2  │
+├──────┼──────┤
+│  W3  │  W4  │
+└──────┴──────┘`,
+    slots: ['widget1', 'widget2', 'widget3', 'widget4'],
+    defaultRatios: {
+      'horizontal-top': 0.5,
+      'horizontal-bottom': 0.5,
+      'vertical-left': 0.5,
+      'vertical-right': 0.5,
+    },
+    tree: {
+      type: 'split',
+      direction: 'horizontal',
+      ratio: 0.5,
+      primary: {
+        type: 'split',
+        direction: 'vertical',
+        ratio: 0.5,
+        primary: {
+          type: 'item',
+          slot: 'widget1',
+        },
+        secondary: {
+          type: 'item',
+          slot: 'widget2',
+        },
+      },
+      secondary: {
+        type: 'split',
+        direction: 'vertical',
+        ratio: 0.5,
+        primary: {
+          type: 'item',
+          slot: 'widget3',
+        },
+        secondary: {
+          type: 'item',
+          slot: 'widget4',
+        },
+      },
+    },
+  },
+
+  'three-column': {
+    name: 'Three Column',
+    description: '3-column layout (20% / 60% / 20%)',
+    preview: `┌───┬────────┬───┐
+│   │        │   │
+│ L │ Center │ R │
+│   │        │   │
+└───┴────────┴───┘`,
+    slots: ['left', 'center', 'right'],
+    defaultRatios: {
+      'vertical-left': 0.2,
+      'vertical-right': 0.75,
+    },
+    tree: {
+      type: 'split',
+      direction: 'vertical',
+      ratio: 0.2,
+      primary: {
+        type: 'item',
+        slot: 'left',
+      },
+      secondary: {
+        type: 'split',
+        direction: 'vertical',
+        ratio: 0.75,
+        primary: {
+          type: 'item',
+          slot: 'center',
+        },
+        secondary: {
+          type: 'item',
+          slot: 'right',
+        },
+      },
+    },
+  },
+
+  'split-view': {
+    name: 'Split View',
+    description: 'Simple 50/50 split (horizontal or vertical)',
+    preview: `┌──────────┬──────────┐
+│          │          │
+│   Left   │   Right  │
+│          │          │
+└──────────┴──────────┘`,
+    slots: ['left', 'right'],
+    defaultRatios: {
+      'vertical-main': 0.5,
+    },
+    tree: {
+      type: 'split',
+      direction: 'vertical',
+      ratio: 0.5,
+      primary: {
+        type: 'item',
+        slot: 'left',
+      },
+      secondary: {
+        type: 'item',
+        slot: 'right',
+      },
+    },
+  },
+};