@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/licensing.md

@@ -1,4 +1,4 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Get Started](./get-started/overview.md) > [Licensing](./licensing.md)
 
@@ -35,11 +35,13 @@ If you need more time to evaluate, [contact our sales team](https://img.ly/forms
 
 Paid license keys can be used across development, staging, and production environments. Multiple domains or app identifiers can be added to support this setup.
 
+
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/llms-txt.md

@@ -1,16 +1,18 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Get Started](./get-started/overview.md) > [Build with AI](./get-started/build-with-ai.md) > [LLMs.txt](./llms-txt.md)
 
 ---
 
-> **Note:** You can also connect your AI assistant directly to our documentation using our [MCP Server](./get-started/mcp-server.md). This enables real-time search and retrieval without downloading large files.
+> **Note:** You can also connect your AI assistant directly to our documentation using our 
+> [MCP Server](./get-started/mcp-server.md). This enables real-time search and
+> retrieval without downloading large files.
 
 Our documentation is now available in LLMs.txt format, optimized for AI reasoning engines. To better support platform-specific development, we've created separate documentation files for each platform.
 
-For developers, this means you can now access documentation tailored to your specific platform, whether it's iOS, Android, Web, or any other supported platform. This approach allows for a more focused and efficient use of AI tools in your development workflow.
+For  developers, this means you can now access documentation tailored to your specific platform, whether it's iOS, Android, Web, or any other supported platform. This approach allows for a more focused and efficient use of AI tools in your development workflow.
 
-[Download](<https://img.ly/docs/cesdk/getFullUrl(`/${props.platform.slug}/llms-full.txt`)>)
+[Download](https://img.ly/docs/cesdk/getFullUrl\(`/$\{props.platform.slug}/llms-full.txt`\))
 
 These documentation files are substantial in size, with token counts exceeding the context windows of many AI models. This guide explains how to download and effectively use these platform-specific documentation files with AI tools to accelerate your development process.
 
@@ -43,11 +45,13 @@ Due to the size of our documentation files (upward of 500 000 tokens) most AI to
 
 To work with our complete documentation files, use an AI model with a large context window. Many current models support 200,000+ tokens, and some support over 1 million tokens. Check your model's context window limits when loading the full documentation file.
 
+
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/open-the-editor/blank-canvas.md

@@ -1,4 +1,4 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Open the Editor](./open-the-editor.md) > [Start With Blank Canvas](./open-the-editor/blank-canvas.md)
 
@@ -6,67 +6,90 @@
 
 Create a new scene from scratch to build designs with complete control over canvas dimensions and initial content.
 
-![Start With Blank Canvas example showing an empty page in the editor](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 5 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-open-the-editor-blank-canvas-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-blank-canvas-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-open-the-editor-blank-canvas-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-open-the-editor-blank-canvas-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-blank-canvas-server-js)
 
 Starting from a blank canvas lets you build new designs without pre-existing content. The `engine.scene.create()` method creates an empty scene with its own camera, ready for adding pages and content. This differs from loading templates or images, which start with existing content.
 
-> **Other Ways to Create Scenes:** You can also start with existing content:\* [Create From Image](./open-the-editor/from-image.md) — Start with an image as the base
->
-> - [Load a Scene](./open-the-editor/load-scene.md) — Resume editing a previously saved design
-
-```typescript file=@cesdk_web_examples/guides-open-the-editor-blank-canvas-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+> **Other Ways to Create Scenes:** You can also start with existing content:* [Create From Image](./open-the-editor/from-image.md) — Start with an image as the base
+> * [Load a Scene](./open-the-editor/load-scene.md) — Resume editing a previously saved design
 
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
+```typescript file=@cesdk_web_examples/guides-open-the-editor-blank-canvas-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { mkdirSync, writeFileSync } from 'fs';
 
-class Example implements EditorPlugin {
-  name = packageJson.name;
-  version = packageJson.version;
+// Load environment variables
+config();
 
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+/**
+ * CE.SDK Server Guide: Start With Blank Canvas
+ *
+ * Demonstrates how to create an empty scene from scratch
+ * in headless Node.js environments.
+ */
 
-    await cesdk.addPlugin(new DesignEditorConfig());
-    const engine = cesdk.engine;
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE, // Optional (trial mode available)
+});
 
-    // ========================================
-    // Create an Empty Scene
-    // ========================================
-    // Create a new empty scene with a page of specific dimensions
-    engine.scene.create('VerticalStack', {
-      page: { size: { width: 800, height: 600 } }
+try {
+  mkdirSync('output', { recursive: true });
+
+  // ========================================
+  // Create an Empty Scene
+  // ========================================
+  // Create a new empty scene with a page of specific dimensions
+  engine.scene.create('VerticalStack', {
+    page: { size: { width: 800, height: 600 } }
+  });
+
+  console.log('✓ Created empty scene');
+
+  // Find the page that was automatically created
+  const pages = engine.block.findByType('page');
+  const page = pages[0];
+
+  // ========================================
+  // Zoom to Fit the Page
+  // ========================================
+  // Set the zoom level to fit the page with padding
+  // This is useful for previewing the design before export
+  await engine.scene.zoomToBlock(page, { padding: 40 });
+
+  console.log('✓ Zoomed to fit page');
+
+  // ========================================
+  // Export the Result
+  // ========================================
+  // Export the scene to an image file
+  if (page) {
+    const exportBlob = await engine.block.export(page, {
+      mimeType: 'image/png'
     });
-
-    // Find the page that was automatically created
-    const pages = engine.block.findByType('page');
-    const page = pages[0];
-
-    // ========================================
-    // Enable Auto-Fit Zoom
-    // ========================================
-    // Enable auto-fit zoom to keep the page visible when resizing
-    // This continuously adjusts the zoom level to fit the page horizontally
-    engine.scene.zoomToBlock(page);
-    engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40);
+    const buffer = Buffer.from(await exportBlob.arrayBuffer());
+    writeFileSync('output/blank-canvas-result.png', buffer);
+    console.log('📄 Exported to: output/blank-canvas-result.png');
   }
-}
 
-export default Example;
+  console.log('\n✓ Start With Blank Canvas guide completed successfully!');
+} finally {
+  // Always dispose the engine when done
+  engine.dispose();
+  console.log('\n🧹 Engine disposed successfully');
+}
 ```
 
-This guide covers how to create an empty scene with custom page dimensions and configure the viewport for editing.
+This guide covers how to create an empty scene with custom page dimensions and export the result.
 
 ## Create an Empty Scene
 
@@ -81,30 +104,44 @@ engine.scene.create('VerticalStack', {
 
 The first parameter specifies the scene layout. Use `'Free'` for independent page positioning, `'VerticalStack'` or `'HorizontalStack'` for aligned layouts. The options object configures the initial page with a size in design units.
 
-## Enable Auto-Fit Zoom
+## Zoom to Fit the Page
 
-For interactive editing, we enable auto-fit zoom to keep the page visible when the viewport resizes. This provides a responsive editing experience where the canvas automatically adjusts to the available space.
+Before exporting, we set the zoom level to frame the page content. This step is optional for server-side rendering but useful for previewing the design.
 
 ```typescript highlight-zoom
-// Enable auto-fit zoom to keep the page visible when resizing
-// This continuously adjusts the zoom level to fit the page horizontally
-engine.scene.zoomToBlock(page);
-engine.scene.enableZoomAutoFit(page, 'Horizontal', 40, 40);
+// Set the zoom level to fit the page with padding
+// This is useful for previewing the design before export
+await engine.scene.zoomToBlock(page, { padding: 40 });
 ```
 
-The `enableZoomAutoFit()` method continuously adjusts the zoom level to fit the specified block. Use `'Horizontal'` to fit the width, `'Vertical'` to fit the height, or `'Both'` to fit both dimensions. The padding parameters add space around the content.
+The `zoomToBlock()` method adjusts the camera to frame the specified block with optional padding around it.
 
-For one-time zoom adjustments, use `zoomToBlock()` instead. The editor UI also provides built-in zoom controls that users can access through the canvas toolbar.
+## Export the Result
 
-## API Reference
+After building the design, we export it to a file. Server-side processing typically saves the output to the filesystem.
 
-| Method                                                                     | Description                                             |
-| -------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `engine.scene.create(layout, options)`                                     | Creates an empty scene with optional page configuration |
-| `engine.block.findByType('page')`                                          | Finds all pages in the current scene                    |
-| `engine.scene.enableZoomAutoFit(block, axis, paddingBefore, paddingAfter)` | Continuously adjusts zoom to fit a block                |
-| `engine.scene.zoomToBlock(block, options)`                                 | One-time zoom adjustment to frame a block               |
-| `engine.scene.disableZoomAutoFit(block)`                                   | Disables auto-fit zoom                                  |
+```typescript highlight-export
+// Export the scene to an image file
+if (page) {
+  const exportBlob = await engine.block.export(page, {
+    mimeType: 'image/png'
+  });
+  const buffer = Buffer.from(await exportBlob.arrayBuffer());
+  writeFileSync('output/blank-canvas-result.png', buffer);
+  console.log('📄 Exported to: output/blank-canvas-result.png');
+}
+```
+
+The `engine.block.export()` method renders the block to the specified format and returns a Blob, which we convert to a Buffer and write to disk.
+
+## Cleanup
+
+Always dispose the engine when processing is complete to free resources.
+
+```typescript highlight-cleanup
+// Always dispose the engine when done
+engine.dispose();
+```
 
 ## Next Steps
 
@@ -114,11 +151,13 @@ Now that you have created a design from a blank canvas, explore related topics:
 - [Blocks](./concepts/blocks.md) — Learn about scene hierarchy and block relationships
 - [Create From Image](./open-the-editor/from-image.md) — Start with an existing image instead of a blank canvas
 
+
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support