mcp-dndgrid 0.1.0

package/src/utils/ast-parser.ts

@@ -0,0 +1,264 @@
+import { parse } from '@typescript-eslint/typescript-estree';
+import type { TSESTree } from '@typescript-eslint/typescript-estree';
+import type { LayoutTree, LayoutNode, DndSplitDirection } from '../types/layout.js';
+
+/**
+ * Parses TypeScript/JSX code to extract DndGrid layout structure
+ */
+export class ASTParser {
+  /**
+   * Parse DndGrid code and extract LayoutTree
+   */
+  parse(code: string): LayoutTree | null {
+    try {
+      const ast = parse(code, {
+        jsx: true,
+        loc: true,
+        range: true,
+      });
+
+      const container = this.findDndGridContainer(ast);
+      if (!container) {
+        return null;
+      }
+
+      return this.buildLayoutTree(container);
+    } catch (error) {
+      console.error('Failed to parse code:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Find DndGridContainer in AST
+   */
+  private findDndGridContainer(ast: TSESTree.Program): TSESTree.JSXElement | null {
+    let container: TSESTree.JSXElement | null = null;
+
+    const visit = (node: TSESTree.Node) => {
+      if (node.type === 'JSXElement') {
+        const openingElement = node.openingElement;
+        if (this.isComponentName(openingElement.name, 'DndGridContainer')) {
+          container = node;
+          return;
+        }
+      }
+
+      // Recursively visit children
+      for (const key in node) {
+        const child = (node as any)[key];
+        if (child && typeof child === 'object') {
+          if (Array.isArray(child)) {
+            child.forEach(visit);
+          } else if (child.type) {
+            visit(child);
+          }
+        }
+      }
+    };
+
+    visit(ast);
+    return container;
+  }
+
+  /**
+   * Build LayoutTree from DndGridContainer element
+   */
+  private buildLayoutTree(containerElement: TSESTree.JSXElement): LayoutTree | null {
+    const props = this.extractProps(containerElement.openingElement);
+    const width = this.getPropValue(props, 'width') as number;
+    const height = this.getPropValue(props, 'height') as number;
+
+    if (!width || !height) {
+      return null;
+    }
+
+    // Find the child node
+    const child = this.findFirstElementChild(containerElement);
+    if (!child) {
+      return null;
+    }
+
+    const childNode = this.buildLayoutNode(child);
+    if (!childNode) {
+      return null;
+    }
+
+    return {
+      type: 'container',
+      width,
+      height,
+      child: childNode,
+    };
+  }
+
+  /**
+   * Build LayoutNode from JSXElement
+   */
+  private buildLayoutNode(element: TSESTree.JSXElement): LayoutNode | null {
+    const openingElement = element.openingElement;
+
+    // Check if it's a DndGridSplit
+    if (this.isComponentName(openingElement.name, 'DndGridSplit')) {
+      return this.buildSplitNode(element);
+    }
+
+    // Check if it's a DndGridItem
+    if (this.isComponentName(openingElement.name, 'DndGridItem')) {
+      return this.buildItemNode(element);
+    }
+
+    return null;
+  }
+
+  /**
+   * Build Split node
+   */
+  private buildSplitNode(element: TSESTree.JSXElement): LayoutNode | null {
+    const props = this.extractProps(element.openingElement);
+    const direction = this.getPropValue(props, 'direction') as DndSplitDirection;
+    const ratio = this.getPropValue(props, 'ratio') as number;
+
+    if (!direction || typeof ratio !== 'number') {
+      return null;
+    }
+
+    // Get children (should be exactly 2)
+    const children = this.findElementChildren(element);
+    if (children.length !== 2) {
+      return null;
+    }
+
+    const primary = this.buildLayoutNode(children[0]);
+    const secondary = this.buildLayoutNode(children[1]);
+
+    if (!primary || !secondary) {
+      return null;
+    }
+
+    return {
+      type: 'split',
+      direction,
+      ratio,
+      primary,
+      secondary,
+    };
+  }
+
+  /**
+   * Build Item node
+   */
+  private buildItemNode(element: TSESTree.JSXElement): LayoutNode | null {
+    // Find the first child component
+    const child = this.findFirstElementChild(element);
+    if (!child) {
+      return null;
+    }
+
+    const componentName = this.getComponentName(child.openingElement.name);
+    if (!componentName) {
+      return null;
+    }
+
+    return {
+      type: 'item',
+      component: componentName,
+    };
+  }
+
+  /**
+   * Extract props from JSXOpeningElement
+   */
+  private extractProps(
+    openingElement: TSESTree.JSXOpeningElement
+  ): Map<string, TSESTree.Expression | TSESTree.Literal> {
+    const props = new Map<string, TSESTree.Expression | TSESTree.Literal>();
+
+    for (const attr of openingElement.attributes) {
+      if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
+        const name = attr.name.name;
+        const value = attr.value;
+
+        if (value?.type === 'JSXExpressionContainer') {
+          props.set(name, value.expression as TSESTree.Expression);
+        } else if (value?.type === 'Literal') {
+          props.set(name, value);
+        }
+      }
+    }
+
+    return props;
+  }
+
+  /**
+   * Get prop value
+   */
+  private getPropValue(
+    props: Map<string, TSESTree.Expression | TSESTree.Literal>,
+    name: string
+  ): string | number | boolean | null {
+    const value = props.get(name);
+    if (!value) return null;
+
+    if (value.type === 'Literal') {
+      return value.value as string | number | boolean;
+    }
+
+    // Handle simple cases
+    if (value.type === 'Identifier') {
+      return value.name;
+    }
+
+    return null;
+  }
+
+  /**
+   * Find element children (excluding text nodes)
+   */
+  private findElementChildren(element: TSESTree.JSXElement): TSESTree.JSXElement[] {
+    const children: TSESTree.JSXElement[] = [];
+
+    for (const child of element.children) {
+      if (child.type === 'JSXElement') {
+        children.push(child);
+      }
+    }
+
+    return children;
+  }
+
+  /**
+   * Find first element child
+   */
+  private findFirstElementChild(element: TSESTree.JSXElement): TSESTree.JSXElement | null {
+    for (const child of element.children) {
+      if (child.type === 'JSXElement') {
+        return child;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Check if a JSX name matches a component name
+   */
+  private isComponentName(
+    name: TSESTree.JSXTagNameExpression,
+    componentName: string
+  ): boolean {
+    if (name.type === 'JSXIdentifier') {
+      return name.name === componentName;
+    }
+    return false;
+  }
+
+  /**
+   * Get component name from JSX name
+   */
+  private getComponentName(name: TSESTree.JSXTagNameExpression): string | null {
+    if (name.type === 'JSXIdentifier') {
+      return name.name;
+    }
+    return null;
+  }
+}

package/src/utils/code-generator.ts

@@ -0,0 +1,123 @@
+import type { LayoutTree, LayoutNode, LayoutSplit, LayoutItem } from '../types/layout.js';
+
+export interface GenerateOptions {
+  framework: 'react' | 'nextjs-app' | 'nextjs-pages';
+  width: number;
+  height: number;
+  componentPrefix?: string;
+}
+
+/**
+ * Generates TypeScript/JSX code from LayoutTree
+ */
+export class CodeGenerator {
+  private options: GenerateOptions;
+
+  constructor(options: GenerateOptions) {
+    this.options = options;
+  }
+
+  /**
+   * Generate complete component code
+   */
+  generate(layout: LayoutTree): string {
+    const useClient = this.shouldAddUseClient();
+    const imports = this.generateImports();
+    const jsx = this.generateJSX(layout.child, 2);
+
+    const code = `${useClient}${imports}
+
+export default function DndGridLayout() {
+  return (
+    <DndGridContainer width={${layout.width}} height={${layout.height}}>
+${jsx}
+    </DndGridContainer>
+  );
+}
+`;
+
+    return this.formatCode(code);
+  }
+
+  /**
+   * Check if "use client" directive is needed
+   */
+  private shouldAddUseClient(): string {
+    if (this.options.framework === 'nextjs-app') {
+      return '"use client";\n\n';
+    }
+    return '';
+  }
+
+  /**
+   * Generate import statements
+   */
+  private generateImports(): string {
+    const imports: string[] = [];
+
+    // DndGrid components import
+    imports.push(
+      `import { DndGridContainer, DndGridSplit, DndGridItem } from 'zerojin/components';`
+    );
+
+    return imports.join('\n');
+  }
+
+  /**
+   * Generate JSX for a layout node
+   */
+  private generateJSX(node: LayoutNode, indent: number): string {
+    const spaces = ' '.repeat(indent);
+
+    if (node.type === 'item') {
+      return this.generateItemJSX(node, indent);
+    }
+
+    return this.generateSplitJSX(node, indent);
+  }
+
+  /**
+   * Generate JSX for a GridItem
+   */
+  private generateItemJSX(node: LayoutItem, indent: number): string {
+    const spaces = ' '.repeat(indent);
+    const innerSpaces = ' '.repeat(indent + 2);
+    const componentName = this.options.componentPrefix
+      ? `${this.options.componentPrefix}${node.component}`
+      : node.component;
+
+    return `${spaces}<DndGridItem>
+${innerSpaces}<${componentName} />
+${spaces}</DndGridItem>`;
+  }
+
+  /**
+   * Generate JSX for a GridSplit
+   */
+  private generateSplitJSX(node: LayoutSplit, indent: number): string {
+    const spaces = ' '.repeat(indent);
+    const primaryJSX = this.generateJSX(node.primary, indent + 2);
+    const secondaryJSX = this.generateJSX(node.secondary, indent + 2);
+
+    return `${spaces}<DndGridSplit direction="${node.direction}" ratio={${node.ratio}}>
+${primaryJSX}
+${secondaryJSX}
+${spaces}</DndGridSplit>`;
+  }
+
+  /**
+   * Format generated code
+   */
+  private formatCode(code: string): string {
+    // Basic formatting - can be enhanced with prettier later
+    return code.trim() + '\n';
+  }
+}
+
+/**
+ * Helper function to quickly generate code
+ */
+export function generateCode(layout: LayoutTree, options: GenerateOptions): string {
+  const generator = new CodeGenerator(options);
+  return generator.generate(layout);
+}

package/src/utils/layout-analyzer.ts

@@ -0,0 +1,105 @@
+import type { LayoutTree, LayoutNode, LayoutMetadata } from '../types/layout.js';
+
+/**
+ * Analyzes layout tree and extracts metadata
+ */
+export class LayoutAnalyzer {
+  /**
+   * Calculate layout metadata
+   */
+  static calculateMetadata(layout: LayoutTree): LayoutMetadata {
+    const stats = this.analyzeNode(layout.child);
+
+    const itemCount = stats.itemCount;
+    const maxDepth = stats.maxDepth;
+
+    // Estimate performance based on complexity
+    let estimatedPerformance: LayoutMetadata['estimatedPerformance'];
+    if (itemCount <= 10 && maxDepth <= 3) {
+      estimatedPerformance = 'excellent';
+    } else if (itemCount <= 20 && maxDepth <= 4) {
+      estimatedPerformance = 'good';
+    } else if (itemCount <= 50 && maxDepth <= 6) {
+      estimatedPerformance = 'fair';
+    } else {
+      estimatedPerformance = 'poor';
+    }
+
+    return {
+      splitCount: stats.splitCount,
+      itemCount: stats.itemCount,
+      maxDepth: stats.maxDepth,
+      estimatedPerformance,
+    };
+  }
+
+  /**
+   * Recursively analyze a node
+   */
+  private static analyzeNode(
+    node: LayoutNode,
+    depth: number = 1
+  ): {
+    splitCount: number;
+    itemCount: number;
+    maxDepth: number;
+  } {
+    if (node.type === 'item') {
+      return {
+        splitCount: 0,
+        itemCount: 1,
+        maxDepth: depth,
+      };
+    }
+
+    // Split node
+    const primaryStats = this.analyzeNode(node.primary, depth + 1);
+    const secondaryStats = this.analyzeNode(node.secondary, depth + 1);
+
+    return {
+      splitCount: 1 + primaryStats.splitCount + secondaryStats.splitCount,
+      itemCount: primaryStats.itemCount + secondaryStats.itemCount,
+      maxDepth: Math.max(primaryStats.maxDepth, secondaryStats.maxDepth),
+    };
+  }
+
+  /**
+   * Count total items in tree
+   */
+  static countItems(node: LayoutNode): number {
+    if (node.type === 'item') return 1;
+    return this.countItems(node.primary) + this.countItems(node.secondary);
+  }
+
+  /**
+   * Count total splits in tree
+   */
+  static countSplits(node: LayoutNode): number {
+    if (node.type === 'item') return 0;
+    return 1 + this.countSplits(node.primary) + this.countSplits(node.secondary);
+  }
+
+  /**
+   * Calculate maximum depth
+   */
+  static getMaxDepth(node: LayoutNode, currentDepth: number = 1): number {
+    if (node.type === 'item') return currentDepth;
+    return Math.max(
+      this.getMaxDepth(node.primary, currentDepth + 1),
+      this.getMaxDepth(node.secondary, currentDepth + 1)
+    );
+  }
+
+  /**
+   * Collect all component names
+   */
+  static collectComponents(node: LayoutNode): string[] {
+    if (node.type === 'item') {
+      return [node.component];
+    }
+    return [
+      ...this.collectComponents(node.primary),
+      ...this.collectComponents(node.secondary),
+    ];
+  }
+}

package/src/utils/layout-builder.ts

@@ -0,0 +1,127 @@
+import type {
+  LayoutTree,
+  LayoutNode,
+  LayoutSplit,
+  LayoutItem,
+  DndSplitDirection,
+} from '../types/layout.js';
+
+/**
+ * Builder for constructing LayoutTree programmatically
+ */
+export class LayoutBuilder {
+  private width: number;
+  private height: number;
+  private root: LayoutNode | null = null;
+
+  constructor(width: number, height: number) {
+    this.width = width;
+    this.height = height;
+  }
+
+  /**
+   * Create an Item node
+   */
+  static item(component: string): LayoutItem {
+    return {
+      type: 'item',
+      component,
+    };
+  }
+
+  /**
+   * Create a Split node
+   */
+  static split(
+    direction: DndSplitDirection,
+    ratio: number,
+    primary: LayoutNode,
+    secondary: LayoutNode
+  ): LayoutSplit {
+    // Validate ratio
+    if (ratio <= 0 || ratio >= 1) {
+      throw new Error(`Invalid ratio ${ratio}. Must be between 0 and 1 (exclusive)`);
+    }
+
+    return {
+      type: 'split',
+      direction,
+      ratio,
+      primary,
+      secondary,
+    };
+  }
+
+  /**
+   * Set the root node
+   */
+  setRoot(node: LayoutNode): this {
+    this.root = node;
+    return this;
+  }
+
+  /**
+   * Build the final LayoutTree
+   */
+  build(): LayoutTree {
+    if (!this.root) {
+      throw new Error('Root node not set. Call setRoot() first.');
+    }
+
+    return {
+      type: 'container',
+      width: this.width,
+      height: this.height,
+      child: this.root,
+    };
+  }
+
+  /**
+   * Helper: Create horizontal split (top/bottom)
+   */
+  static horizontalSplit(
+    ratio: number,
+    top: LayoutNode,
+    bottom: LayoutNode
+  ): LayoutSplit {
+    return this.split('horizontal', ratio, top, bottom);
+  }
+
+  /**
+   * Helper: Create vertical split (left/right)
+   */
+  static verticalSplit(
+    ratio: number,
+    left: LayoutNode,
+    right: LayoutNode
+  ): LayoutSplit {
+    return this.split('vertical', ratio, left, right);
+  }
+}
+
+/**
+ * Quick builder functions
+ */
+export const L = {
+  item: LayoutBuilder.item,
+  split: LayoutBuilder.split,
+  h: LayoutBuilder.horizontalSplit,
+  v: LayoutBuilder.verticalSplit,
+};
+
+/**
+ * Example usage:
+ * ```ts
+ * const tree = new LayoutBuilder(1200, 800)
+ *   .setRoot(
+ *     L.v(0.2,
+ *       L.item('Sidebar'),
+ *       L.h(0.7,
+ *         L.item('Editor'),
+ *         L.item('Terminal')
+ *       )
+ *     )
+ *   )
+ *   .build();
+ * ```
+ */