@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/automation/auto-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) > [Automate Workflows](./automation.md) > [Auto-Resize](./automation/auto-resize.md)
 
@@ -6,42 +6,28 @@
 
 Configure blocks to dynamically adjust their dimensions using three sizing modes: Absolute for fixed values, Percent for parent-relative sizing, and Auto for content-driven expansion.
 
-![Auto-Resize example showing text blocks with automatic sizing](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 10 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-automation-auto-resize-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-automation-auto-resize-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-automation-auto-resize-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-automation-auto-resize-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-automation-auto-resize-server-js)
 
 CE.SDK provides three sizing modes for controlling block dimensions. Absolute mode uses fixed pixel values. Percent mode sizes blocks relative to their parent container. Auto mode automatically expands blocks to fit their content. You can set width and height modes independently, allowing flexible combinations like fixed width with auto height for text that wraps.
 
-```typescript file=@cesdk_web_examples/guides-automation-auto-resize-browser/browser.ts reference-only
-import type { EditorPlugin, 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';
-import packageJson from './package.json';
+```typescript file=@cesdk_web_examples/guides-automation-auto-resize-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+
+// Load environment variables
+config();
 
 /**
- * CE.SDK Plugin: Auto-Resize Guide
+ * CE.SDK Server Guide: Auto-Resize
  *
  * Demonstrates block sizing modes and responsive layout patterns:
  * - Setting width and height modes (Absolute, Percent, Auto)
@@ -49,192 +35,148 @@ import packageJson from './package.json';
  * - Centering text blocks based on computed dimensions
  * - Creating responsive layouts with percentage-based sizing
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-
-  version = packageJson.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
-
-    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: 600, unit: 'Pixel' }
-    });
-
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
-
-    // Create a text block with Auto sizing mode
-    // Auto mode makes the block expand to fit its content
-    const titleBlock = engine.block.create('text');
-    engine.block.replaceText(titleBlock, 'Auto-Resize Demo');
-    engine.block.setFloat(titleBlock, 'text/fontSize', 64);
-
-    // Set width and height modes to Auto
-    // The block will automatically size to fit the text content
-    engine.block.setWidthMode(titleBlock, 'Auto');
-    engine.block.setHeightMode(titleBlock, 'Auto');
-    engine.block.appendChild(page, titleBlock);
-
-    // Read computed frame dimensions after layout
-    // getFrameWidth/getFrameHeight return the actual rendered size
-    const titleWidth = engine.block.getFrameWidth(titleBlock);
-    const titleHeight = engine.block.getFrameHeight(titleBlock);
-
-    console.log(
-      `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed(
-        0
-      )} pixels`
-    );
-
-    // Calculate centered position using frame dimensions
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-    const centerX = (pageWidth - titleWidth) / 2;
-    const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout
-
-    // Position the title at center
-    engine.block.setPositionX(titleBlock, centerX);
-    engine.block.setPositionY(titleBlock, centerY);
-
-    // Create a block using Percent mode for responsive sizing
-    // Percent mode sizes the block relative to its parent
-    const backgroundBlock = engine.block.create('graphic');
-    engine.block.setShape(backgroundBlock, engine.block.createShape('rect'));
-    const fill = engine.block.createFill('color');
-    engine.block.setColor(fill, 'fill/color/value', {
-      r: 0.2,
-      g: 0.4,
-      b: 0.8,
-      a: 0.3
-    });
-    engine.block.setFill(backgroundBlock, fill);
-
-    // Set to Percent mode - values are normalized (0-1)
-    engine.block.setWidthMode(backgroundBlock, 'Percent');
-    engine.block.setHeightMode(backgroundBlock, 'Percent');
-    engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width
-    engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height
-
-    // Center the background block
-    engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin
-    engine.block.setPositionY(backgroundBlock, pageHeight * 0.6);
-    engine.block.appendChild(page, backgroundBlock);
-
-    // Create a subtitle with Auto mode
-    const subtitleBlock = engine.block.create('text');
-    engine.block.replaceText(
-      subtitleBlock,
-      'Text automatically sizes to fit content'
-    );
-    engine.block.setFloat(subtitleBlock, 'text/fontSize', 32);
-    engine.block.setWidthMode(subtitleBlock, 'Auto');
-    engine.block.setHeightMode(subtitleBlock, 'Auto');
-    engine.block.appendChild(page, subtitleBlock);
-
-    // Read computed dimensions and center
-    const subtitleWidth = engine.block.getFrameWidth(subtitleBlock);
-    const subtitleCenterX = (pageWidth - subtitleWidth) / 2;
-    engine.block.setPositionX(subtitleBlock, subtitleCenterX);
-    engine.block.setPositionY(subtitleBlock, pageHeight * 0.7);
-
-    // Verify sizing modes
-    const titleWidthMode = engine.block.getWidthMode(titleBlock);
-    const titleHeightMode = engine.block.getHeightMode(titleBlock);
-    const bgWidthMode = engine.block.getWidthMode(backgroundBlock);
-    const bgHeightMode = engine.block.getHeightMode(backgroundBlock);
-
-    console.log(
-      `Title modes: width=${titleWidthMode}, height=${titleHeightMode}`
-    );
-    console.log(
-      `Background modes: width=${bgWidthMode}, height=${bgHeightMode}`
-    );
-
-    // Select the title block to show the auto-sized result
-    engine.block.select(titleBlock);
-
-    console.log(
-      'Auto-resize guide initialized. Try changing text content to see auto-sizing in action.'
-    );
+
+// 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)
+});
+
+try {
+  // Create output directory
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
   }
-}
 
-export default Example;
+  // Create a scene with a page
+  engine.scene.create('VerticalStack', {
+    page: { size: { width: 800, height: 600 } }
+  });
+  const page = engine.block.findByType('page')[0];
+
+  // Create a text block with Auto sizing mode
+  // Auto mode makes the block expand to fit its content
+  const titleBlock = engine.block.create('text');
+  engine.block.replaceText(titleBlock, 'Auto-Resize Demo');
+  engine.block.setTextFontSize(titleBlock, 64);
+
+  // Set width and height modes to Auto
+  // The block will automatically size to fit the text content
+  engine.block.setWidthMode(titleBlock, 'Auto');
+  engine.block.setHeightMode(titleBlock, 'Auto');
+  engine.block.appendChild(page, titleBlock);
+
+  // Read computed frame dimensions after layout
+  // getFrameWidth/getFrameHeight return the actual rendered size
+  const titleWidth = engine.block.getFrameWidth(titleBlock);
+  const titleHeight = engine.block.getFrameHeight(titleBlock);
+
+  // eslint-disable-next-line no-console
+  console.log(
+    `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed(0)} pixels`
+  );
+
+  // Calculate centered position using frame dimensions
+  const pageWidth = engine.block.getWidth(page);
+  const pageHeight = engine.block.getHeight(page);
+  const centerX = (pageWidth - titleWidth) / 2;
+  const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout
+
+  // Position the title at center
+  engine.block.setPositionX(titleBlock, centerX);
+  engine.block.setPositionY(titleBlock, centerY);
+
+  // Create a block using Percent mode for responsive sizing
+  // Percent mode sizes the block relative to its parent
+  const backgroundBlock = engine.block.create('graphic');
+  engine.block.setShape(backgroundBlock, engine.block.createShape('rect'));
+  const fill = engine.block.createFill('color');
+  engine.block.setColor(fill, 'fill/color/value', {
+    r: 0.2,
+    g: 0.4,
+    b: 0.8,
+    a: 0.3
+  });
+  engine.block.setFill(backgroundBlock, fill);
+
+  // Set to Percent mode - values are normalized (0-1)
+  engine.block.setWidthMode(backgroundBlock, 'Percent');
+  engine.block.setHeightMode(backgroundBlock, 'Percent');
+  engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width
+  engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height
+
+  // Center the background block
+  engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin
+  engine.block.setPositionY(backgroundBlock, pageHeight * 0.6);
+  engine.block.appendChild(page, backgroundBlock);
+
+  // Create a subtitle with Auto mode
+  const subtitleBlock = engine.block.create('text');
+  engine.block.replaceText(
+    subtitleBlock,
+    'Text automatically sizes to fit content'
+  );
+  engine.block.setTextFontSize(subtitleBlock, 32);
+  engine.block.setWidthMode(subtitleBlock, 'Auto');
+  engine.block.setHeightMode(subtitleBlock, 'Auto');
+  engine.block.appendChild(page, subtitleBlock);
+
+  // Read computed dimensions and center
+  const subtitleWidth = engine.block.getFrameWidth(subtitleBlock);
+  const subtitleCenterX = (pageWidth - subtitleWidth) / 2;
+  engine.block.setPositionX(subtitleBlock, subtitleCenterX);
+  engine.block.setPositionY(subtitleBlock, pageHeight * 0.7);
+
+  // Verify sizing modes
+  const titleWidthMode = engine.block.getWidthMode(titleBlock);
+  const titleHeightMode = engine.block.getHeightMode(titleBlock);
+  const bgWidthMode = engine.block.getWidthMode(backgroundBlock);
+  const bgHeightMode = engine.block.getHeightMode(backgroundBlock);
+
+  // eslint-disable-next-line no-console
+  console.log(
+    `Title modes: width=${titleWidthMode}, height=${titleHeightMode}`
+  );
+  // eslint-disable-next-line no-console
+  console.log(`Background modes: width=${bgWidthMode}, height=${bgHeightMode}`);
+
+  // Export the result
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  writeFileSync(`${outputDir}/auto-resize-demo.png`, buffer);
+
+  // eslint-disable-next-line no-console
+  console.log(`\n✓ Exported auto-resize-demo.png to ${outputDir}/`);
+} finally {
+  // Always dispose the engine to free resources
+  engine.dispose();
+}
 ```
 
 This guide covers how to set and query sizing modes, read computed frame dimensions after layout, center blocks using frame dimensions, and create responsive layouts with percentage-based sizing.
 
-## Initialize the Editor
-
-We start by initializing CE.SDK with a Design scene and setting up the page dimensions for our layout.
-
-```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: 600, unit: 'Pixel' }
+## Setup
+
+Initialize the CE.SDK engine for server-side automation:
+
+```typescript highlight-setup
+// 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 a Scene
+
+Create a scene with a page to work with:
 
-const engine = cesdk.engine;
+```typescript highlight-create-scene
+// Create a scene with a page
+engine.scene.create('VerticalStack', {
+  page: { size: { width: 800, height: 600 } }
+});
 const page = engine.block.findByType('page')[0];
 ```
 
@@ -254,18 +196,18 @@ Use `setWidthMode()` and `setHeightMode()` to configure how a block calculates i
 
 Auto mode makes text blocks expand to fit their content:
 
-```typescript highlight=highlight-auto-mode
-// Create a text block with Auto sizing mode
-// Auto mode makes the block expand to fit its content
-const titleBlock = engine.block.create('text');
-engine.block.replaceText(titleBlock, 'Auto-Resize Demo');
-engine.block.setFloat(titleBlock, 'text/fontSize', 64);
-
-// Set width and height modes to Auto
-// The block will automatically size to fit the text content
-engine.block.setWidthMode(titleBlock, 'Auto');
-engine.block.setHeightMode(titleBlock, 'Auto');
-engine.block.appendChild(page, titleBlock);
+```typescript highlight-auto-mode
+  // Create a text block with Auto sizing mode
+  // Auto mode makes the block expand to fit its content
+  const titleBlock = engine.block.create('text');
+  engine.block.replaceText(titleBlock, 'Auto-Resize Demo');
+  engine.block.setTextFontSize(titleBlock, 64);
+
+  // Set width and height modes to Auto
+  // The block will automatically size to fit the text content
+  engine.block.setWidthMode(titleBlock, 'Auto');
+  engine.block.setHeightMode(titleBlock, 'Auto');
+  engine.block.appendChild(page, titleBlock);
 ```
 
 With Auto mode, the block's dimensions are calculated automatically based on the content. This is useful when the text content varies and you want the block to always fit exactly.
@@ -274,30 +216,30 @@ With Auto mode, the block's dimensions are calculated automatically based on the
 
 Percent mode sizes blocks relative to their parent:
 
-```typescript highlight=highlight-percent-mode
-// Create a block using Percent mode for responsive sizing
-// Percent mode sizes the block relative to its parent
-const backgroundBlock = engine.block.create('graphic');
-engine.block.setShape(backgroundBlock, engine.block.createShape('rect'));
-const fill = engine.block.createFill('color');
-engine.block.setColor(fill, 'fill/color/value', {
-  r: 0.2,
-  g: 0.4,
-  b: 0.8,
-  a: 0.3
-});
-engine.block.setFill(backgroundBlock, fill);
-
-// Set to Percent mode - values are normalized (0-1)
-engine.block.setWidthMode(backgroundBlock, 'Percent');
-engine.block.setHeightMode(backgroundBlock, 'Percent');
-engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width
-engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height
-
-// Center the background block
-engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin
-engine.block.setPositionY(backgroundBlock, pageHeight * 0.6);
-engine.block.appendChild(page, backgroundBlock);
+```typescript highlight-percent-mode
+  // Create a block using Percent mode for responsive sizing
+  // Percent mode sizes the block relative to its parent
+  const backgroundBlock = engine.block.create('graphic');
+  engine.block.setShape(backgroundBlock, engine.block.createShape('rect'));
+  const fill = engine.block.createFill('color');
+  engine.block.setColor(fill, 'fill/color/value', {
+    r: 0.2,
+    g: 0.4,
+    b: 0.8,
+    a: 0.3
+  });
+  engine.block.setFill(backgroundBlock, fill);
+
+  // Set to Percent mode - values are normalized (0-1)
+  engine.block.setWidthMode(backgroundBlock, 'Percent');
+  engine.block.setHeightMode(backgroundBlock, 'Percent');
+  engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width
+  engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height
+
+  // Center the background block
+  engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin
+  engine.block.setPositionY(backgroundBlock, pageHeight * 0.6);
+  engine.block.appendChild(page, backgroundBlock);
 ```
 
 Percent values represent the percentage of the parent container. A width of 80 with Percent mode means 80% of the parent's width.
@@ -306,15 +248,16 @@ Percent values represent the percentage of the parent container. A width of 80 w
 
 After layout, use `getFrameWidth()` and `getFrameHeight()` to read the computed dimensions:
 
-```typescript highlight=highlight-read-frame-dimensions
-// Read computed frame dimensions after layout
-// getFrameWidth/getFrameHeight return the actual rendered size
-const titleWidth = engine.block.getFrameWidth(titleBlock);
-const titleHeight = engine.block.getFrameHeight(titleBlock);
+```typescript highlight-read-frame-dimensions
+  // Read computed frame dimensions after layout
+  // getFrameWidth/getFrameHeight return the actual rendered size
+  const titleWidth = engine.block.getFrameWidth(titleBlock);
+  const titleHeight = engine.block.getFrameHeight(titleBlock);
 
-console.log(
-  `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed(0)} pixels`
-);
+  // eslint-disable-next-line no-console
+  console.log(
+    `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed(0)} pixels`
+  );
 ```
 
 Frame dimensions return the actual rendered size regardless of the sizing mode. This is essential when using Auto mode since you need the computed size for positioning calculations.
@@ -323,16 +266,16 @@ Frame dimensions return the actual rendered size regardless of the sizing mode.
 
 Combine Auto mode with frame dimensions to center blocks based on their actual size:
 
-```typescript highlight=highlight-center-block
-// Calculate centered position using frame dimensions
-const pageWidth = engine.block.getWidth(page);
-const pageHeight = engine.block.getHeight(page);
-const centerX = (pageWidth - titleWidth) / 2;
-const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout
+```typescript highlight-center-block
+  // Calculate centered position using frame dimensions
+  const pageWidth = engine.block.getWidth(page);
+  const pageHeight = engine.block.getHeight(page);
+  const centerX = (pageWidth - titleWidth) / 2;
+  const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout
 
-// Position the title at center
-engine.block.setPositionX(titleBlock, centerX);
-engine.block.setPositionY(titleBlock, centerY);
+  // Position the title at center
+  engine.block.setPositionX(titleBlock, centerX);
+  engine.block.setPositionY(titleBlock, centerY);
 ```
 
 This pattern reads the computed dimensions after Auto sizing and calculates the centered position.
@@ -341,38 +284,56 @@ This pattern reads the computed dimensions after Auto sizing and calculates the
 
 You can create multiple auto-sized blocks and position them relative to each other:
 
-```typescript highlight=highlight-subtitle-auto
-// Create a subtitle with Auto mode
-const subtitleBlock = engine.block.create('text');
-engine.block.replaceText(
-  subtitleBlock,
-  'Text automatically sizes to fit content'
-);
-engine.block.setFloat(subtitleBlock, 'text/fontSize', 32);
-engine.block.setWidthMode(subtitleBlock, 'Auto');
-engine.block.setHeightMode(subtitleBlock, 'Auto');
-engine.block.appendChild(page, subtitleBlock);
-
-// Read computed dimensions and center
-const subtitleWidth = engine.block.getFrameWidth(subtitleBlock);
-const subtitleCenterX = (pageWidth - subtitleWidth) / 2;
-engine.block.setPositionX(subtitleBlock, subtitleCenterX);
-engine.block.setPositionY(subtitleBlock, pageHeight * 0.7);
+```typescript highlight-subtitle-auto
+  // Create a subtitle with Auto mode
+  const subtitleBlock = engine.block.create('text');
+  engine.block.replaceText(
+    subtitleBlock,
+    'Text automatically sizes to fit content'
+  );
+  engine.block.setTextFontSize(subtitleBlock, 32);
+  engine.block.setWidthMode(subtitleBlock, 'Auto');
+  engine.block.setHeightMode(subtitleBlock, 'Auto');
+  engine.block.appendChild(page, subtitleBlock);
+
+  // Read computed dimensions and center
+  const subtitleWidth = engine.block.getFrameWidth(subtitleBlock);
+  const subtitleCenterX = (pageWidth - subtitleWidth) / 2;
+  engine.block.setPositionX(subtitleBlock, subtitleCenterX);
+  engine.block.setPositionY(subtitleBlock, pageHeight * 0.7);
 ```
 
 ## Verifying Size Modes
 
 Query the current size modes to verify your configuration:
 
-```typescript highlight=highlight-check-modes
-// Verify sizing modes
-const titleWidthMode = engine.block.getWidthMode(titleBlock);
-const titleHeightMode = engine.block.getHeightMode(titleBlock);
-const bgWidthMode = engine.block.getWidthMode(backgroundBlock);
-const bgHeightMode = engine.block.getHeightMode(backgroundBlock);
+```typescript highlight-check-modes
+  // Verify sizing modes
+  const titleWidthMode = engine.block.getWidthMode(titleBlock);
+  const titleHeightMode = engine.block.getHeightMode(titleBlock);
+  const bgWidthMode = engine.block.getWidthMode(backgroundBlock);
+  const bgHeightMode = engine.block.getHeightMode(backgroundBlock);
+
+  // eslint-disable-next-line no-console
+  console.log(
+    `Title modes: width=${titleWidthMode}, height=${titleHeightMode}`
+  );
+  // eslint-disable-next-line no-console
+  console.log(`Background modes: width=${bgWidthMode}, height=${bgHeightMode}`);
+```
 
-console.log(`Title modes: width=${titleWidthMode}, height=${titleHeightMode}`);
-console.log(`Background modes: width=${bgWidthMode}, height=${bgHeightMode}`);
+## Export
+
+Export the result to verify the layout:
+
+```typescript highlight-export
+  // Export the result
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  writeFileSync(`${outputDir}/auto-resize-demo.png`, buffer);
+
+  // eslint-disable-next-line no-console
+  console.log(`\n✓ Exported auto-resize-demo.png to ${outputDir}/`);
 ```
 
 ## Troubleshooting
@@ -387,26 +348,28 @@ console.log(`Background modes: width=${bgWidthMode}, height=${bgHeightMode}`);
 
 ## API Reference
 
-| Method                                    | Description                                         |
-| ----------------------------------------- | --------------------------------------------------- |
-| `engine.block.getWidth(block)`            | Get block width in current mode                     |
-| `engine.block.setWidth(block, value)`     | Set block width in current mode                     |
-| `engine.block.getWidthMode(block)`        | Get current width mode: Absolute, Percent, or Auto  |
-| `engine.block.setWidthMode(block, mode)`  | Set width mode: Absolute, Percent, or Auto          |
-| `engine.block.getHeight(block)`           | Get block height in current mode                    |
-| `engine.block.setHeight(block, value)`    | Set block height in current mode                    |
-| `engine.block.getHeightMode(block)`       | Get current height mode: Absolute, Percent, or Auto |
-| `engine.block.setHeightMode(block, mode)` | Set height mode: Absolute, Percent, or Auto         |
-| `engine.block.getFrameWidth(block)`       | Get computed width after layout                     |
-| `engine.block.getFrameHeight(block)`      | Get computed height after layout                    |
-| `engine.block.setPositionX(block, value)` | Set block X position                                |
-| `engine.block.setPositionY(block, value)` | Set block Y position                                |
+| Method | Description |
+| ------ | ----------- |
+| `engine.block.getWidth(block)` | Get block width in current mode |
+| `engine.block.setWidth(block, value)` | Set block width in current mode |
+| `engine.block.getWidthMode(block)` | Get current width mode: Absolute, Percent, or Auto |
+| `engine.block.setWidthMode(block, mode)` | Set width mode: Absolute, Percent, or Auto |
+| `engine.block.getHeight(block)` | Get block height in current mode |
+| `engine.block.setHeight(block, value)` | Set block height in current mode |
+| `engine.block.getHeightMode(block)` | Get current height mode: Absolute, Percent, or Auto |
+| `engine.block.setHeightMode(block, mode)` | Set height mode: Absolute, Percent, or Auto |
+| `engine.block.getFrameWidth(block)` | Get computed width after layout |
+| `engine.block.getFrameHeight(block)` | Get computed height after layout |
+| `engine.block.setPositionX(block, value)` | Set block X position |
+| `engine.block.setPositionY(block, value)` | Set block Y position |
+
+
 
 ---
 
 ## 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