mcp-dndgrid 0.1.0

package/dist/stdio-FWYJXSU7.js

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+import {
+  JSONRPCMessageSchema
+} from "./chunk-QZHBI6ZI.js";
+import "./chunk-SEGVTWSK.js";
+
+// node_modules/@modelcontextprotocol/sdk/dist/esm/server/stdio.js
+import process from "process";
+
+// node_modules/@modelcontextprotocol/sdk/dist/esm/shared/stdio.js
+var ReadBuffer = class {
+  append(chunk) {
+    this._buffer = this._buffer ? Buffer.concat([this._buffer, chunk]) : chunk;
+  }
+  readMessage() {
+    if (!this._buffer) {
+      return null;
+    }
+    const index = this._buffer.indexOf("\n");
+    if (index === -1) {
+      return null;
+    }
+    const line = this._buffer.toString("utf8", 0, index).replace(/\r$/, "");
+    this._buffer = this._buffer.subarray(index + 1);
+    return deserializeMessage(line);
+  }
+  clear() {
+    this._buffer = void 0;
+  }
+};
+function deserializeMessage(line) {
+  return JSONRPCMessageSchema.parse(JSON.parse(line));
+}
+function serializeMessage(message) {
+  return JSON.stringify(message) + "\n";
+}
+
+// node_modules/@modelcontextprotocol/sdk/dist/esm/server/stdio.js
+var StdioServerTransport = class {
+  constructor(_stdin = process.stdin, _stdout = process.stdout) {
+    this._stdin = _stdin;
+    this._stdout = _stdout;
+    this._readBuffer = new ReadBuffer();
+    this._started = false;
+    this._ondata = (chunk) => {
+      this._readBuffer.append(chunk);
+      this.processReadBuffer();
+    };
+    this._onerror = (error) => {
+      this.onerror?.(error);
+    };
+  }
+  /**
+   * Starts listening for messages on stdin.
+   */
+  async start() {
+    if (this._started) {
+      throw new Error("StdioServerTransport already started! If using Server class, note that connect() calls start() automatically.");
+    }
+    this._started = true;
+    this._stdin.on("data", this._ondata);
+    this._stdin.on("error", this._onerror);
+  }
+  processReadBuffer() {
+    while (true) {
+      try {
+        const message = this._readBuffer.readMessage();
+        if (message === null) {
+          break;
+        }
+        this.onmessage?.(message);
+      } catch (error) {
+        this.onerror?.(error);
+      }
+    }
+  }
+  async close() {
+    this._stdin.off("data", this._ondata);
+    this._stdin.off("error", this._onerror);
+    const remainingDataListeners = this._stdin.listenerCount("data");
+    if (remainingDataListeners === 0) {
+      this._stdin.pause();
+    }
+    this._readBuffer.clear();
+    this.onclose?.();
+  }
+  send(message) {
+    return new Promise((resolve) => {
+      const json = serializeMessage(message);
+      if (this._stdout.write(json)) {
+        resolve();
+      } else {
+        this._stdout.once("drain", resolve);
+      }
+    });
+  }
+};
+export {
+  StdioServerTransport
+};
+//# sourceMappingURL=stdio-FWYJXSU7.js.map

package/dist/stdio-FWYJXSU7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../node_modules/@modelcontextprotocol/sdk/src/server/stdio.ts","../node_modules/@modelcontextprotocol/sdk/src/shared/stdio.ts"],"sourcesContent":[null,null],"mappings":";;;;;;;AAAA,OAAO,aAAa;;;ACKd,IAAO,aAAP,MAAiB;EAGnB,OAAO,OAAa;AAChB,SAAK,UAAU,KAAK,UAAU,OAAO,OAAO,CAAC,KAAK,SAAS,KAAK,CAAC,IAAI;EACzE;EAEA,cAAW;AACP,QAAI,CAAC,KAAK,SAAS;AACf,aAAO;IACX;AAEA,UAAM,QAAQ,KAAK,QAAQ,QAAQ,IAAI;AACvC,QAAI,UAAU,IAAI;AACd,aAAO;IACX;AAEA,UAAM,OAAO,KAAK,QAAQ,SAAS,QAAQ,GAAG,KAAK,EAAE,QAAQ,OAAO,EAAE;AACtE,SAAK,UAAU,KAAK,QAAQ,SAAS,QAAQ,CAAC;AAC9C,WAAO,mBAAmB,IAAI;EAClC;EAEA,QAAK;AACD,SAAK,UAAU;EACnB;;AAGE,SAAU,mBAAmB,MAAY;AAC3C,SAAO,qBAAqB,MAAM,KAAK,MAAM,IAAI,CAAC;AACtD;AAEM,SAAU,iBAAiB,SAAuB;AACpD,SAAO,KAAK,UAAU,OAAO,IAAI;AACrC;;;AD3BM,IAAO,uBAAP,MAA2B;EAI7B,YACY,SAAmB,QAAQ,OAC3B,UAAoB,QAAQ,QAAM;AADlC,SAAA,SAAA;AACA,SAAA,UAAA;AALJ,SAAA,cAA0B,IAAI,WAAU;AACxC,SAAA,WAAW;AAYnB,SAAA,UAAU,CAAC,UAAiB;AACxB,WAAK,YAAY,OAAO,KAAK;AAC7B,WAAK,kBAAiB;IAC1B;AACA,SAAA,WAAW,CAAC,UAAgB;AACxB,WAAK,UAAU,KAAK;IACxB;EAbG;;;;EAkBH,MAAM,QAAK;AACP,QAAI,KAAK,UAAU;AACf,YAAM,IAAI,MACN,+GAA+G;IAEvH;AAEA,SAAK,WAAW;AAChB,SAAK,OAAO,GAAG,QAAQ,KAAK,OAAO;AACnC,SAAK,OAAO,GAAG,SAAS,KAAK,QAAQ;EACzC;EAEQ,oBAAiB;AACrB,WAAO,MAAM;AACT,UAAI;AACA,cAAM,UAAU,KAAK,YAAY,YAAW;AAC5C,YAAI,YAAY,MAAM;AAClB;QACJ;AAEA,aAAK,YAAY,OAAO;MAC5B,SAAS,OAAO;AACZ,aAAK,UAAU,KAAc;MACjC;IACJ;EACJ;EAEA,MAAM,QAAK;AAEP,SAAK,OAAO,IAAI,QAAQ,KAAK,OAAO;AACpC,SAAK,OAAO,IAAI,SAAS,KAAK,QAAQ;AAGtC,UAAM,yBAAyB,KAAK,OAAO,cAAc,MAAM;AAC/D,QAAI,2BAA2B,GAAG;AAG9B,WAAK,OAAO,MAAK;IACrB;AAGA,SAAK,YAAY,MAAK;AACtB,SAAK,UAAS;EAClB;EAEA,KAAK,SAAuB;AACxB,WAAO,IAAI,QAAQ,aAAU;AACzB,YAAM,OAAO,iBAAiB,OAAO;AACrC,UAAI,KAAK,QAAQ,MAAM,IAAI,GAAG;AAC1B,gBAAO;MACX,OAAO;AACH,aAAK,QAAQ,KAAK,SAAS,OAAO;MACtC;IACJ,CAAC;EACL;;","names":[]}

package/dist/template-JDMAVVX7.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import {
+  BUILTIN_TEMPLATES
+} from "./chunk-CMGEAPA5.js";
+import "./chunk-SEGVTWSK.js";
+export {
+  BUILTIN_TEMPLATES
+};
+//# sourceMappingURL=template-JDMAVVX7.js.map

package/dist/template-JDMAVVX7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/examples/claude_desktop_config.example.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://modelcontextprotocol.io/schema/config.json",
+  "mcpServers": {
+    "dndgrid": {
+      "command": "node",
+      "args": [
+        "/absolute/path/to/zerojin-core/mcp/dist/index.js"
+      ],
+      "env": {}
+    }
+  }
+}

package/examples/example-complex-editor.tsx

@@ -0,0 +1,107 @@
+/**
+ * Example: Complex Editor Layout
+ *
+ * Generated using: generate-layout
+ * Description: Complex IDE with multiple nested panels
+ * Components: Navigation, FileTree, Editor, Preview, Console, Terminal, Properties
+ *
+ * This demonstrates a complex editor layout with:
+ * - Top navigation bar (8%)
+ * - Left sidebar (15%): File tree
+ * - Center (50%): Editor with preview (60/40 split)
+ * - Right sidebar (15%): Properties panel
+ * - Bottom panel (12%): Console and terminal (50/50 split)
+ */
+
+"use client";
+
+import { DndGridContainer, DndGridSplit, DndGridItem } from 'zerojin/components';
+import { Navigation } from './components/Navigation';
+import { FileTree } from './components/FileTree';
+import { Editor } from './components/Editor';
+import { Preview } from './components/Preview';
+import { Console } from './components/Console';
+import { Terminal } from './components/Terminal';
+import { Properties } from './components/Properties';
+
+export default function ComplexEditorLayout() {
+  return (
+    <DndGridContainer width={1920} height={1080}>
+      {/* Top: Navigation */}
+      <DndGridSplit direction="horizontal" ratio={0.08}>
+        <DndGridItem>
+          <Navigation />
+        </DndGridItem>
+
+        {/* Main content area */}
+        <DndGridSplit direction="vertical" ratio={0.15}>
+          {/* Left: File tree */}
+          <DndGridItem>
+            <FileTree />
+          </DndGridItem>
+
+          {/* Center + Right + Bottom */}
+          <DndGridSplit direction="vertical" ratio={0.77}>
+            {/* Center + Right */}
+            <DndGridSplit direction="horizontal" ratio={0.88}>
+              {/* Center: Editor + Preview */}
+              <DndGridSplit direction="vertical" ratio={0.6}>
+                <DndGridItem>
+                  <Editor />
+                </DndGridItem>
+                <DndGridItem>
+                  <Preview />
+                </DndGridItem>
+              </DndGridSplit>
+
+              {/* Bottom: Console + Terminal */}
+              <DndGridSplit direction="vertical" ratio={0.5}>
+                <DndGridItem>
+                  <Console />
+                </DndGridItem>
+                <DndGridItem>
+                  <Terminal />
+                </DndGridItem>
+              </DndGridSplit>
+            </DndGridSplit>
+
+            {/* Right: Properties */}
+            <DndGridItem>
+              <Properties />
+            </DndGridItem>
+          </DndGridSplit>
+        </DndGridSplit>
+      </DndGridSplit>
+    </DndGridContainer>
+  );
+}
+
+/**
+ * Performance Metrics:
+ * - Items: 7
+ * - Splits: 6
+ * - Max Depth: 4
+ * - Estimated Performance: Good
+ *
+ * Complexity Analysis:
+ * ⚠️ Approaching recommended depth limit (4 levels)
+ * ✅ Item count well within limits (< 20)
+ * ⚠️ Complex nesting - consider simplifying if adding more panels
+ *
+ * Refactoring Opportunities:
+ * - Consider extracting bottom panel into separate component
+ * - Could use composition for editor+preview section
+ * - May benefit from lazy loading for heavy components
+ *
+ * Best Practices Followed:
+ * ✅ "use client" directive
+ * ✅ Descriptive component names
+ * ✅ Logical grouping of related panels
+ * ✅ Ratios within usable ranges
+ *
+ * Usage Notes:
+ * - This is near the upper complexity limit
+ * - Adding more panels may impact performance
+ * - Consider user feedback on panel sizes
+ * - Test drag-and-drop performance with actual data
+ */

package/examples/example-dashboard.tsx

@@ -0,0 +1,65 @@
+/**
+ * Example: Dashboard 2x2 Grid
+ *
+ * Generated using: apply-template
+ * Template: dashboard-2x2
+ * Components: UserStats, RevenueChart, ActivityLog, QuickActions
+ *
+ * This demonstrates a 2x2 dashboard grid layout:
+ * - Top-left: User statistics
+ * - Top-right: Revenue chart
+ * - Bottom-left: Activity log
+ * - Bottom-right: Quick actions
+ */
+
+"use client";
+
+import { DndGridContainer, DndGridSplit, DndGridItem } from 'zerojin/components';
+import { UserStats } from './components/UserStats';
+import { RevenueChart } from './components/RevenueChart';
+import { ActivityLog } from './components/ActivityLog';
+import { QuickActions } from './components/QuickActions';
+
+export default function Dashboard() {
+  return (
+    <DndGridContainer width={1400} height={900}>
+      <DndGridSplit direction="horizontal" ratio={0.5}>
+        <DndGridSplit direction="vertical" ratio={0.5}>
+          <DndGridItem>
+            <UserStats />
+          </DndGridItem>
+          <DndGridItem>
+            <RevenueChart />
+          </DndGridItem>
+        </DndGridSplit>
+        <DndGridSplit direction="vertical" ratio={0.5}>
+          <DndGridItem>
+            <ActivityLog />
+          </DndGridItem>
+          <DndGridItem>
+            <QuickActions />
+          </DndGridItem>
+        </DndGridSplit>
+      </DndGridSplit>
+    </DndGridContainer>
+  );
+}
+
+/**
+ * Performance Metrics:
+ * - Items: 4
+ * - Splits: 3
+ * - Max Depth: 2
+ * - Estimated Performance: Excellent
+ *
+ * Best Practices:
+ * ✅ Equal ratios (0.5) for balanced grid
+ * ✅ Symmetrical structure
+ * ✅ Low complexity
+ * ✅ Easy to rearrange via drag-and-drop
+ *
+ * Usage Tips:
+ * - Perfect for admin dashboards
+ * - Can easily expand to 2x3 or 3x3 by adding more splits
+ * - Each widget is independently draggable
+ */

package/examples/example-ide-layout.tsx

@@ -0,0 +1,53 @@
+/**
+ * Example: IDE Layout
+ *
+ * Generated using: apply-template
+ * Template: ide-layout
+ * Components: FileExplorer, CodeEditor, Terminal
+ *
+ * This demonstrates a typical 3-panel IDE layout:
+ * - Left sidebar (20%): File explorer
+ * - Right top (56%): Code editor
+ * - Right bottom (24%): Terminal
+ */
+
+"use client";
+
+import { DndGridContainer, DndGridSplit, DndGridItem } from 'zerojin/components';
+import { FileExplorer } from './components/FileExplorer';
+import { CodeEditor } from './components/CodeEditor';
+import { Terminal } from './components/Terminal';
+
+export default function IDELayout() {
+  return (
+    <DndGridContainer width={1600} height={900}>
+      <DndGridSplit direction="vertical" ratio={0.2}>
+        <DndGridItem>
+          <FileExplorer />
+        </DndGridItem>
+        <DndGridSplit direction="horizontal" ratio={0.7}>
+          <DndGridItem>
+            <CodeEditor />
+          </DndGridItem>
+          <DndGridItem>
+            <Terminal />
+          </DndGridItem>
+        </DndGridSplit>
+      </DndGridSplit>
+    </DndGridContainer>
+  );
+}
+
+/**
+ * Performance Metrics:
+ * - Items: 3
+ * - Splits: 2
+ * - Max Depth: 2
+ * - Estimated Performance: Excellent
+ *
+ * Best Practices:
+ * ✅ "use client" directive for Next.js App Router
+ * ✅ Ratios within recommended range (0.2-0.8)
+ * ✅ Low item count (< 20)
+ * ✅ Shallow nesting (< 4 levels)
+ */

package/examples/test-generator.ts

@@ -0,0 +1,37 @@
+import { LayoutBuilder, L } from '../src/utils/layout-builder.js';
+import { CodeGenerator } from '../src/utils/code-generator.js';
+import { LayoutAnalyzer } from '../src/utils/layout-analyzer.js';
+
+/**
+ * Test the code generator with a simple IDE layout
+ */
+
+// Build an IDE layout
+const ideLayout = new LayoutBuilder(1200, 800)
+  .setRoot(
+    L.v(
+      0.2,
+      L.item('Sidebar'),
+      L.h(0.7, L.item('CodeEditor'), L.item('Terminal'))
+    )
+  )
+  .build();
+
+console.log('=== IDE Layout Tree ===');
+console.log(JSON.stringify(ideLayout, null, 2));
+
+// Analyze the layout
+const metadata = LayoutAnalyzer.calculateMetadata(ideLayout);
+console.log('\n=== Layout Metadata ===');
+console.log(metadata);
+
+// Generate code
+const generator = new CodeGenerator({
+  framework: 'nextjs-app',
+  width: ideLayout.width,
+  height: ideLayout.height,
+});
+
+const code = generator.generate(ideLayout);
+console.log('\n=== Generated Code ===');
+console.log(code);

package/examples/test-parser.ts

@@ -0,0 +1,121 @@
+import { ASTParser } from '../src/utils/ast-parser.js';
+import { Validator } from '../src/utils/validator.js';
+
+/**
+ * Test AST parser and validator
+ */
+
+const sampleCode = `
+"use client";
+
+import { DndGridContainer, DndGridSplit, DndGridItem } from 'zerojin/components';
+
+export default function Layout() {
+  return (
+    <DndGridContainer width={1200} height={800}>
+      <DndGridSplit direction="vertical" ratio={0.2}>
+        <DndGridItem>
+          <Sidebar />
+        </DndGridItem>
+        <DndGridSplit direction="horizontal" ratio={0.7}>
+          <DndGridItem>
+            <CodeEditor />
+          </DndGridItem>
+          <DndGridItem>
+            <Terminal />
+          </DndGridItem>
+        </DndGridSplit>
+      </DndGridSplit>
+    </DndGridContainer>
+  );
+}
+`;
+
+console.log('=== Testing AST Parser ===\n');
+
+// Parse the code
+const parser = new ASTParser();
+const layout = parser.parse(sampleCode);
+
+if (layout) {
+  console.log('✅ Successfully parsed layout tree:');
+  console.log(JSON.stringify(layout, null, 2));
+} else {
+  console.log('❌ Failed to parse layout');
+}
+
+console.log('\n=== Testing Validator ===\n');
+
+// Validate the code
+const validator = new Validator();
+const codeValidation = validator.validateCode(sampleCode, false);
+
+console.log('Code Validation:');
+console.log(`Valid: ${codeValidation.valid}`);
+console.log(`Errors: ${codeValidation.errors.length}`);
+console.log(`Warnings: ${codeValidation.warnings.length}`);
+
+if (codeValidation.errors.length > 0) {
+  console.log('\nErrors:');
+  codeValidation.errors.forEach((err, i) => {
+    console.log(`  ${i + 1}. [${err.type}] ${err.message}`);
+    if (err.fix) console.log(`     Fix: ${err.fix}`);
+  });
+}
+
+if (codeValidation.warnings.length > 0) {
+  console.log('\nWarnings:');
+  codeValidation.warnings.forEach((warn, i) => {
+    console.log(`  ${i + 1}. ${warn.message}`);
+    if (warn.suggestion) console.log(`     Suggestion: ${warn.suggestion}`);
+  });
+}
+
+// Validate the parsed layout tree
+if (layout) {
+  console.log('\n=== Validating Layout Tree ===\n');
+  const treeValidation = validator.validate(layout, true);
+
+  console.log(`Valid: ${treeValidation.valid}`);
+  console.log(`Errors: ${treeValidation.errors.length}`);
+  console.log(`Warnings: ${treeValidation.warnings.length}`);
+  console.log(`Suggestions: ${treeValidation.suggestions.length}`);
+
+  if (treeValidation.warnings.length > 0) {
+    console.log('\nWarnings:');
+    treeValidation.warnings.forEach((warn, i) => {
+      console.log(`  ${i + 1}. ${warn.message}`);
+    });
+  }
+
+  if (treeValidation.suggestions.length > 0) {
+    console.log('\nSuggestions:');
+    treeValidation.suggestions.forEach((sugg, i) => {
+      console.log(`  ${i + 1}. ${sugg}`);
+    });
+  }
+}
+
+// Test with invalid code
+console.log('\n=== Testing Invalid Code ===\n');
+
+const invalidCode = `
+<DndGridContainer width={1200} height={800}>
+  <DndGridSplit direction="vertical" ratio={1.5}>
+    <DndGridItem>
+      <ComponentA />
+    </DndGridItem>
+  </DndGridSplit>
+</DndGridContainer>
+`;
+
+const invalidValidation = validator.validateCode(invalidCode, false);
+console.log(`Valid: ${invalidValidation.valid}`);
+console.log(`Errors: ${invalidValidation.errors.length}`);
+
+if (invalidValidation.errors.length > 0) {
+  console.log('\nErrors found:');
+  invalidValidation.errors.forEach((err, i) => {
+    console.log(`  ${i + 1}. [${err.type}] ${err.message}`);
+  });
+}