@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/edit-image/transform/resize.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) > [Create and Edit Images](./edit-image.md) > [Transform](./edit-image/transform.md) > [Resize](./edit-image/transform/resize.md)
 
@@ -6,87 +6,44 @@
 
 Change image dimensions using absolute pixel values, percentage-based sizing for responsive layouts, or auto-sizing based on content.
 
-![Resize images example showing different sizing modes](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 8 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-edit-image-transform-resize-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-resize-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-resize-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-resize-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-resize-server-js)
 
 Image resizing changes actual dimensions rather than applying scale multipliers. Use `engine.block.setWidth()` and `engine.block.setHeight()` for individual dimensions, or `engine.block.setSize()` for both at once.
 
-```typescript file=@cesdk_web_examples/guides-edit-image-transform-resize-browser/browser.ts reference-only
-import CreativeEditorSDK, {
-  type EditorPlugin,
-  type EditorPluginContext
-} from '@cesdk/cesdk-js';
-
-import {
-  BlurAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { DesignEditorConfig } from './design-editor/plugin';
-
-class Example implements EditorPlugin {
-  name = 'guides-edit-image-transform-resize-browser';
-
-  version = CreativeEditorSDK.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+```typescript file=@cesdk_web_examples/guides-edit-image-transform-resize-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync } from 'fs';
+import { config } from 'dotenv';
 
-    await cesdk.addPlugin(new DesignEditorConfig());
+// Load environment variables
+config();
 
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({ include: ['ly.img.image.upload'] })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.blank.*',
-          'ly.img.templates.presentation.*',
-          'ly.img.templates.print.*',
-          'ly.img.templates.social.*',
-          'ly.img.image.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(new PagePresetsAssetSource());
-    await cesdk.addPlugin(new StickerAssetSource());
-    await cesdk.addPlugin(new TextAssetSource());
-    await cesdk.addPlugin(new TextComponentAssetSource());
-    await cesdk.addPlugin(new TypefaceAssetSource());
-    await cesdk.addPlugin(new VectorShapeAssetSource());
-
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 500, unit: 'Pixel' }
+async function resizeImagesExample() {
+  let engine: CreativeEngine | null = null;
+
+  try {
+    // Initialize headless engine for programmatic creation
+    engine = await CreativeEngine.init({
+      baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+      // license: process.env.CESDK_LICENSE,
     });
 
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
+    // Create a new scene programmatically
+    const scene = engine.scene.create();
+
+    // Create and set up the page
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 500);
+    engine.block.appendChild(scene, page);
 
     // Demo 1: Absolute Sizing - Fixed dimensions
     const absoluteImage = await engine.block.addImage(
@@ -186,14 +143,56 @@ class Example implements EditorPlugin {
     engine.block.setPositionX(titleText, 0);
     engine.block.setPositionY(titleText, 20);
     engine.block.appendChild(page, titleText);
+
+    // Export the result as PNG
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync('resize-images-output.png', buffer);
+    console.log('✅ Successfully exported resize-images-output.png');
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  } finally {
+    // Always dispose the engine to free resources
+    if (engine) {
+      engine.dispose();
+    }
   }
 }
 
-export default Example;
+// Run the example
+resizeImagesExample();
 ```
 
 This guide covers resizing images with absolute or percentage sizing, configuring size modes, and maintaining crop settings during resize.
 
+## Initialize Headless Engine
+
+Create a headless engine instance for programmatic creation and manipulation of designs:
+
+```typescript highlight-setup
+// Initialize headless engine for programmatic creation
+engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE,
+});
+```
+
+## Create Scene
+
+Create a new scene and page to hold the resized images:
+
+```typescript highlight-create-scene
+    // Create a new scene programmatically
+    const scene = engine.scene.create();
+
+    // Create and set up the page
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 500);
+    engine.block.appendChild(scene, page);
+```
+
 ## Understanding Size Modes
 
 Size values are interpreted in three modes. 'Absolute' uses fixed design units, 'Percent' uses parent-relative values (0.0-1.0), and 'Auto' sizes based on content. Use `engine.block.getWidth()` for the configured value and `engine.block.getFrameWidth()` for actual rendered size after layout.
@@ -260,6 +259,29 @@ const frameHeight = engine.block.getFrameHeight(absoluteImage);
 
 The difference between configured values and frame dimensions matters when using percentage or auto sizing modes.
 
+## Export Result
+
+Export the scene as a PNG file to the filesystem:
+
+```typescript highlight-export
+// Export the result as PNG
+const blob = await engine.block.export(page, { mimeType: 'image/png' });
+const buffer = Buffer.from(await blob.arrayBuffer());
+writeFileSync('resize-images-output.png', buffer);
+console.log('✅ Successfully exported resize-images-output.png');
+```
+
+## Cleanup
+
+Always dispose the engine to free resources when done:
+
+```typescript highlight-cleanup
+// Always dispose the engine to free resources
+if (engine) {
+  engine.dispose();
+}
+```
+
 ## Troubleshooting
 
 ### Image Not Resizing
@@ -276,26 +298,34 @@ Calculate and set both dimensions proportionally. Use `maintainCrop: true` when
 
 ## API Reference
 
-| Method                          | Description                             |
-| ------------------------------- | --------------------------------------- |
-| `engine.block.addImage()`       | Create and size image in one operation  |
-| `engine.block.setSize()`        | Set width and height with optional mode |
-| `engine.block.setWidth()`       | Set width value                         |
-| `engine.block.setHeight()`      | Set height value                        |
-| `engine.block.getWidth()`       | Get current width value                 |
-| `engine.block.getHeight()`      | Get current height value                |
-| `engine.block.setWidthMode()`   | Set width interpretation mode           |
-| `engine.block.setHeightMode()`  | Set height interpretation mode          |
-| `engine.block.getWidthMode()`   | Get width interpretation mode           |
-| `engine.block.getHeightMode()`  | Get height interpretation mode          |
-| `engine.block.getFrameWidth()`  | Get calculated frame width              |
-| `engine.block.getFrameHeight()` | Get calculated frame height             |
+| Method                              | Description                                               |
+| ----------------------------------- | --------------------------------------------------------- |
+| `CreativeEngine.init()`             | Initializes the headless engine for programmatic creation |
+| `engine.scene.create()`             | Creates a new scene programmatically                      |
+| `engine.block.create()`             | Creates a new block of the specified type                 |
+| `engine.block.setWidth()`           | Sets the width of a block                                 |
+| `engine.block.setHeight()`          | Sets the height of a block                                |
+| `engine.block.appendChild()`        | Adds a block as a child of another block                  |
+| `engine.block.addImage()`           | Create and size image in one operation                    |
+| `engine.block.setSize()`            | Set width and height with optional mode                   |
+| `engine.block.getWidth()`           | Get current width value                                   |
+| `engine.block.getHeight()`          | Get current height value                                  |
+| `engine.block.setWidthMode()`       | Set width interpretation mode                             |
+| `engine.block.setHeightMode()`      | Set height interpretation mode                            |
+| `engine.block.getWidthMode()`       | Get width interpretation mode                             |
+| `engine.block.getHeightMode()`      | Get height interpretation mode                            |
+| `engine.block.getFrameWidth()`      | Get calculated frame width                                |
+| `engine.block.getFrameHeight()`     | Get calculated frame height                               |
+| `engine.block.export()`             | Export block as image                                     |
+| `engine.dispose()`                  | Dispose engine and free resources                         |
+
+
 
 ---
 
 ## 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/edit-image/transform/rotate.md

@@ -1,92 +1,49 @@
-> 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) > [Create and Edit Images](./edit-image.md) > [Transform](./edit-image/transform.md) > [Rotate](./edit-image/transform/rotate.md)
 
 ---
 
-Rotate images to adjust orientation, correct crooked photos, or create creative effects using CE.SDK's rotation APIs.
-
-![Rotate images example showing images at different rotation angles](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Rotate images programmatically in headless server-side processing for orientation correction, batch operations, and automated workflows.
 
 > **Reading time:** 8 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-edit-image-transform-rotate-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-rotate-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-rotate-browser/)
-
-Rotation uses radians where `Math.PI / 2` equals 90°, `Math.PI` equals 180°, and negative values rotate clockwise. Values are relative to the block's center point.
-
-```typescript file=@cesdk_web_examples/guides-edit-image-transform-rotate-browser/browser.ts reference-only
-import CreativeEditorSDK, {
-  type EditorPlugin,
-  type EditorPluginContext
-} from '@cesdk/cesdk-js';
-
-import {
-  BlurAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { DesignEditorConfig } from './design-editor/plugin';
-
-class Example implements EditorPlugin {
-  name = 'guides-edit-image-transform-rotate-browser';
-
-  version = CreativeEditorSDK.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-edit-image-transform-rotate-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-rotate-server-js)
 
-    await cesdk.addPlugin(new DesignEditorConfig());
+Rotation uses radians where `Math.PI / 2` equals 90°, `Math.PI` equals 180°, and negative values rotate clockwise. Server-side rotation is useful for normalizing uploads, generating asset variations, and enforcing template rules.
 
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({ include: ['ly.img.image.upload'] })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.blank.*',
-          'ly.img.templates.presentation.*',
-          'ly.img.templates.print.*',
-          'ly.img.templates.social.*',
-          'ly.img.image.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(new PagePresetsAssetSource());
-    await cesdk.addPlugin(new StickerAssetSource());
-    await cesdk.addPlugin(new TextAssetSource());
-    await cesdk.addPlugin(new TextComponentAssetSource());
-    await cesdk.addPlugin(new TypefaceAssetSource());
-    await cesdk.addPlugin(new VectorShapeAssetSource());
-
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 500, unit: 'Pixel' }
+```typescript file=@cesdk_web_examples/guides-edit-image-transform-rotate-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync } from 'fs';
+import { config } from 'dotenv';
+
+// Load environment variables
+config();
+
+async function rotateImagesExample() {
+  let engine: CreativeEngine | null = null;
+
+  try {
+    // Initialize headless engine for programmatic creation
+    engine = await CreativeEngine.init({
+      baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+      // license: process.env.CESDK_LICENSE,
     });
 
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
+    // Create a new scene programmatically
+    const scene = engine.scene.create();
+
+    // Create and set up the page
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 500);
+    engine.block.appendChild(scene, page);
 
     // Demo 1: Original image (no rotation)
     const originalImage = await engine.block.addImage(
@@ -211,30 +168,6 @@ class Example implements EditorPlugin {
     engine.block.setPositionY(text5, 440);
     engine.block.appendChild(page, text5);
 
-    // Demo 6: Locked rotation
-    const lockedImage = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/sample_3.jpg',
-      {
-        size: { width: 150, height: 150 }
-      }
-    );
-    engine.block.appendChild(page, lockedImage);
-    engine.block.setPositionX(lockedImage, 500);
-    engine.block.setPositionY(lockedImage, 300);
-    engine.block.setRotation(lockedImage, Math.PI / 6);
-
-    // Lock rotation for a single block
-    engine.block.setScopeEnabled(lockedImage, 'layer/rotate', false);
-
-    const text6 = engine.block.create('text');
-    engine.block.setString(text6, 'text/text', 'Locked');
-    engine.block.setFloat(text6, 'text/fontSize', 24);
-    engine.block.setEnum(text6, 'text/horizontalAlignment', 'Center');
-    engine.block.setWidth(text6, 150);
-    engine.block.setPositionX(text6, 500);
-    engine.block.setPositionY(text6, 460);
-    engine.block.appendChild(page, text6);
-
     // Get current rotation value
     const currentRotation = engine.block.getRotation(rotated45Image);
     console.log('Current rotation (radians):', currentRotation);
@@ -243,6 +176,9 @@ class Example implements EditorPlugin {
       (currentRotation * 180) / Math.PI
     );
 
+    // Reset rotation to original orientation
+    engine.block.setRotation(originalImage, 0);
+
     // Helpers for degree/radian conversion
     const toRadians = (degrees: number) => (degrees * Math.PI) / 180;
     const toDegrees = (radians: number) => (radians * 180) / Math.PI;
@@ -251,53 +187,56 @@ class Example implements EditorPlugin {
     const targetRadians = toRadians(30);
     console.log('30 degrees in radians:', targetRadians);
     console.log('Converted back to degrees:', toDegrees(targetRadians));
+
+    // Export the result as PNG
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync('rotate-images-output.png', buffer);
+    console.log('Successfully exported rotate-images-output.png');
+  } catch (error) {
+    console.error('Error:', error);
+    throw error;
+  } finally {
+    // Always dispose the engine to free resources
+    if (engine) {
+      engine.dispose();
+    }
   }
 }
 
-export default Example;
+// Run the example
+rotateImagesExample();
 ```
 
-This guide covers rotating images by specific angles, reading rotation values, converting between degrees and radians, rotating grouped elements together, and locking rotation on blocks.
+This guide covers rotating images by specific angles, reading rotation values, converting between degrees and radians, rotating grouped elements together, and resetting rotation to the original orientation.
 
-## Initialize the Editor
+## Initialize Headless Engine
 
-Set up the editor with default assets and create a design scene:
+Create a headless engine instance for programmatic manipulation:
 
 ```typescript highlight=highlight-setup
-await cesdk.addPlugin(new DesignEditorConfig());
-
-// Add asset source plugins
-await cesdk.addPlugin(new BlurAssetSource());
-await cesdk.addPlugin(new ColorPaletteAssetSource());
-await cesdk.addPlugin(new CropPresetsAssetSource());
-await cesdk.addPlugin(
-  new UploadAssetSources({ include: ['ly.img.image.upload'] })
-);
-await cesdk.addPlugin(
-  new DemoAssetSources({
-    include: [
-      'ly.img.templates.blank.*',
-      'ly.img.templates.presentation.*',
-      'ly.img.templates.print.*',
-      'ly.img.templates.social.*',
-      'ly.img.image.*'
-    ]
-  })
-);
-await cesdk.addPlugin(new EffectsAssetSource());
-await cesdk.addPlugin(new FiltersAssetSource());
-await cesdk.addPlugin(new PagePresetsAssetSource());
-await cesdk.addPlugin(new StickerAssetSource());
-await cesdk.addPlugin(new TextAssetSource());
-await cesdk.addPlugin(new TextComponentAssetSource());
-await cesdk.addPlugin(new TypefaceAssetSource());
-await cesdk.addPlugin(new VectorShapeAssetSource());
-
-await cesdk.actions.run('scene.create', {
-  page: { width: 800, height: 500, unit: 'Pixel' }
+// Initialize headless engine for programmatic creation
+engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE,
 });
 ```
 
+## Create Scene
+
+Create a scene and page to hold the images:
+
+```typescript highlight=highlight-create-scene
+    // Create a new scene programmatically
+    const scene = engine.scene.create();
+
+    // Create and set up the page
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 800);
+    engine.block.setHeight(page, 500);
+    engine.block.appendChild(scene, page);
+```
+
 ## Rotate an Image
 
 Rotate blocks using `engine.block.setRotation()` with angle values in radians. Use `Math.PI` for 180° or divide for smaller increments:
@@ -333,7 +272,19 @@ Read the current rotation value using `engine.block.getRotation()`. The returned
 // Get current rotation value
 const currentRotation = engine.block.getRotation(rotated45Image);
 console.log('Current rotation (radians):', currentRotation);
-console.log('Current rotation (degrees):', (currentRotation * 180) / Math.PI);
+console.log(
+  'Current rotation (degrees):',
+  (currentRotation * 180) / Math.PI
+);
+```
+
+## Reset Rotation
+
+Reset a block to its original orientation by setting rotation to 0:
+
+```typescript highlight=highlight-reset-rotation
+// Reset rotation to original orientation
+engine.block.setRotation(originalImage, 0);
 ```
 
 ## Convert Between Degrees and Radians
@@ -341,14 +292,14 @@ console.log('Current rotation (degrees):', (currentRotation * 180) / Math.PI);
 Create helper functions to convert between degrees and radians for more intuitive angle values:
 
 ```typescript highlight=highlight-convert-radians
-// Helpers for degree/radian conversion
-const toRadians = (degrees: number) => (degrees * Math.PI) / 180;
-const toDegrees = (radians: number) => (radians * 180) / Math.PI;
-
-// Example: rotate by 30 degrees using helper
-const targetRadians = toRadians(30);
-console.log('30 degrees in radians:', targetRadians);
-console.log('Converted back to degrees:', toDegrees(targetRadians));
+    // Helpers for degree/radian conversion
+    const toRadians = (degrees: number) => (degrees * Math.PI) / 180;
+    const toDegrees = (radians: number) => (radians * 180) / Math.PI;
+
+    // Example: rotate by 30 degrees using helper
+    const targetRadians = toRadians(30);
+    console.log('30 degrees in radians:', targetRadians);
+    console.log('Converted back to degrees:', toDegrees(targetRadians));
 ```
 
 ## Rotate Groups Together
@@ -361,48 +312,64 @@ const groupId = engine.block.group([groupedImage1, groupedImage2]);
 engine.block.setRotation(groupId, Math.PI / 8);
 ```
 
-## Lock Rotation
+## Export Result
 
-Disable rotation for a specific block using `engine.block.setScopeEnabled()` with the `layer/rotate` scope:
+Export the scene as a PNG file:
 
-```typescript highlight=highlight-lock-rotation
-// Lock rotation for a single block
-engine.block.setScopeEnabled(lockedImage, 'layer/rotate', false);
+```typescript highlight=highlight-export
+// Export the result as PNG
+const blob = await engine.block.export(page, { mimeType: 'image/png' });
+const buffer = Buffer.from(await blob.arrayBuffer());
+writeFileSync('rotate-images-output.png', buffer);
+console.log('Successfully exported rotate-images-output.png');
+```
+
+## Cleanup
+
+Dispose the engine to free resources:
+
+```typescript highlight=highlight-cleanup
+// Always dispose the engine to free resources
+if (engine) {
+  engine.dispose();
+}
 ```
 
 ## Troubleshooting
 
 ### Rotation Has No Effect
 
-Ensure the block exists and is appended to a page before calling `setRotation()`. Verify the block ID is valid using `engine.block.isValid()`.
+Ensure the block exists and is appended to a page before calling `setRotation()`. Verify the block ID is valid.
 
-### Unexpected Rotation Direction
+### Image Fails to Load
 
-Positive values rotate counterclockwise, negative values rotate clockwise. Double-check your angle calculation if the rotation appears inverted.
+Verify the URI is reachable from your server or switch to a file URI inside the asset bundle.
 
-### Block Appears Skewed After Rotation
+### Engine Keeps Running
 
-Rotation uses the block's center as the pivot point. If the block appears off-center, check that no unexpected scaling or positioning was applied.
+Call `engine.dispose()` in a finally block to ensure resources are freed even if errors occur.
 
-### Locked Block Won't Rotate
+## API Reference
 
-Check if the block's `layer/rotate` scope is disabled using `engine.block.isScopeEnabled()`. Re-enable with `engine.block.setScopeEnabled(block, 'layer/rotate', true)`.
+| Method                       | Description                                |
+| ---------------------------- | ------------------------------------------ |
+| `CreativeEngine.init()`      | Initialize the headless engine             |
+| `engine.scene.create()`      | Create a new scene                         |
+| `engine.block.create()`      | Create a block of specified type           |
+| `engine.block.addImage()`    | Add an image block                         |
+| `engine.block.setRotation()` | Set rotation angle in radians              |
+| `engine.block.getRotation()` | Get current rotation angle in radians      |
+| `engine.block.group()`       | Group blocks for collective transforms     |
+| `engine.block.export()`      | Export block as image                      |
+| `engine.dispose()`           | Dispose engine and free resources          |
 
-## API Reference
 
-| Method                           | Description                             |
-| -------------------------------- | --------------------------------------- |
-| `engine.block.setRotation()`     | Set rotation angle in radians           |
-| `engine.block.getRotation()`     | Get current rotation angle in radians   |
-| `engine.block.group()`           | Group blocks for collective transforms  |
-| `engine.block.setScopeEnabled()` | Enable or disable specific block scopes |
-| `engine.block.isScopeEnabled()`  | Check if a scope is enabled for a block |
 
 ---
 
 ## 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