@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/edit-image/transform/move.md

@@ -0,0 +1,279 @@
+> 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).
+
+**Navigation:** [Guides](./guides.md) > [Create and Edit Images](./edit-image.md) > [Transform](./edit-image/transform.md) > [Move](./edit-image/transform/move.md)
+
+---
+
+Position images on the canvas using absolute pixel coordinates or percentage-based positioning for responsive layouts.
+
+![Move images example showing positioned images with labels](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-move-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-transform-move-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-transform-move-browser/)
+
+Position images on the canvas using coordinates that start at the top-left corner (0, 0). X increases right, Y increases down. Values are relative to the parent block, simplifying nested layouts.
+
+```typescript file=@cesdk_web_examples/guides-edit-image-transform-move-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-move-browser';
+
+  version = CreativeEditorSDK.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: 500, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+    const page = engine.block.findByType('page')[0];
+
+    // Demo 1: Movable Image - Can be freely repositioned by user
+    const movableImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_3.jpg',
+      {
+        size: { width: 200, height: 200 }
+      }
+    );
+    engine.block.appendChild(page, movableImage);
+    engine.block.setPositionX(movableImage, 0);
+    engine.block.setPositionY(movableImage, 100);
+
+    const text1 = engine.block.create('text');
+    engine.block.setString(text1, 'text/text', 'Movable');
+    engine.block.setFloat(text1, 'text/fontSize', 32);
+    engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text1, 200);
+    engine.block.setPositionX(text1, 50);
+    engine.block.setPositionY(text1, 360);
+    engine.block.appendChild(page, text1);
+
+    // Demo 2: Percentage Positioning - Responsive layout
+    const percentImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_5.jpg',
+      {
+        size: { width: 200, height: 200 }
+      }
+    );
+    engine.block.appendChild(page, percentImage);
+
+    // Set position mode to percentage (0.0 to 1.0)
+    engine.block.setPositionXMode(percentImage, 'Percent');
+    engine.block.setPositionYMode(percentImage, 'Percent');
+
+    // Position at 37.5% from left (300px), 30% from top (150px)
+    engine.block.setPositionX(percentImage, 0.375);
+    engine.block.setPositionY(percentImage, 0.3);
+
+    const text2 = engine.block.create('text');
+    engine.block.setString(text2, 'text/text', 'Percentage');
+    engine.block.setFloat(text2, 'text/fontSize', 32);
+    engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text2, 200);
+    engine.block.setPositionX(text2, 300);
+    engine.block.setPositionY(text2, 360);
+    engine.block.appendChild(page, text2);
+
+    // Demo 3: Locked Image - Cannot be moved, rotated, or scaled
+    const lockedImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_6.jpg',
+      {
+        size: { width: 200, height: 200 }
+      }
+    );
+    engine.block.appendChild(page, lockedImage);
+    engine.block.setPositionX(lockedImage, 550);
+    engine.block.setPositionY(lockedImage, 150);
+
+    // Lock the transform to prevent user interaction
+    engine.block.setBool(lockedImage, 'transformLocked', true);
+
+    const text3 = engine.block.create('text');
+    engine.block.setString(text3, 'text/text', 'Locked');
+    engine.block.setFloat(text3, 'text/fontSize', 32);
+    engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text3, 200);
+    engine.block.setPositionX(text3, 550);
+    engine.block.setPositionY(text3, 360);
+    engine.block.appendChild(page, text3);
+
+    // Get current position values
+    const currentX = engine.block.getPositionX(movableImage);
+    const currentY = engine.block.getPositionY(movableImage);
+    console.log('Current position:', currentX, currentY);
+
+    // Move relative to current position
+    const offsetX = engine.block.getPositionX(movableImage);
+    const offsetY = engine.block.getPositionY(movableImage);
+    engine.block.setPositionX(movableImage, offsetX + 50);
+    engine.block.setPositionY(movableImage, offsetY + 50);
+  }
+}
+
+export default Example;
+```
+
+This guide covers positioning images with absolute or percentage coordinates, configuring position modes, and locking transforms to prevent repositioning.
+
+## Position Coordinates
+
+Coordinates originate at the top-left (0, 0) of the parent container. Use **absolute** mode for fixed pixel values or **percentage** mode (0.0 to 1.0) for responsive layouts that adapt to parent size changes.
+
+## Positioning Images
+
+Position images using `engine.block.setPositionX()` and `engine.block.setPositionY()` with absolute pixel coordinates:
+
+```typescript highlight-movable-image
+engine.block.appendChild(page, movableImage);
+engine.block.setPositionX(movableImage, 0);
+engine.block.setPositionY(movableImage, 100);
+```
+
+## Getting Current Position
+
+Read current position values using `engine.block.getPositionX()` and `engine.block.getPositionY()`. Values are returned in the current position mode (absolute pixels or percentage 0.0-1.0):
+
+```typescript highlight-get-position
+// Get current position values
+const currentX = engine.block.getPositionX(movableImage);
+const currentY = engine.block.getPositionY(movableImage);
+```
+
+## Configuring Position Modes
+
+Control how position values are interpreted using `engine.block.setPositionXMode()` and `engine.block.setPositionYMode()`. Set to `'Absolute'` for pixels or `'Percent'` for percentage values (0.0 to 1.0). Check the current mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. The Percentage Positioning section below demonstrates setting these modes.
+
+## Percentage Positioning
+
+Position images using percentage values (0.0 to 1.0) for responsive layouts. Set the position mode to `'Percent'`, then use values between 0.0 and 1.0:
+
+```typescript highlight-percentage-positioning
+// Set position mode to percentage (0.0 to 1.0)
+engine.block.setPositionXMode(percentImage, 'Percent');
+engine.block.setPositionYMode(percentImage, 'Percent');
+```
+
+Percentage positioning adapts automatically when the parent block dimensions change, maintaining relative positions in responsive designs.
+
+## Relative Positioning
+
+Move images relative to their current position by getting the current coordinates and adding offset values:
+
+```typescript highlight-relative-positioning
+// Move relative to current position
+const offsetX = engine.block.getPositionX(movableImage);
+const offsetY = engine.block.getPositionY(movableImage);
+engine.block.setPositionX(movableImage, offsetX + 50);
+engine.block.setPositionY(movableImage, offsetY + 50);
+```
+
+## Locking Transforms
+
+Lock transforms to prevent repositioning, rotation, and scaling by setting `transformLocked` to true:
+
+```typescript highlight-locked-image
+// Lock the transform to prevent user interaction
+engine.block.setBool(lockedImage, 'transformLocked', true);
+```
+
+## Troubleshooting
+
+### Image Not Moving
+
+Check if transforms are locked using `engine.block.getBool(block, 'transformLocked')`. Ensure the image block exists and values are within parent bounds.
+
+### Unexpected Position Values
+
+Check position mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. Verify if using absolute (pixels) vs percentage (0.0-1.0) values. Review parent block dimensions if using percentage positioning.
+
+### Positioned Outside Visible Area
+
+Verify parent block dimensions and boundaries. Check coordinate system: origin is top-left, not center. Review X/Y values for calculation errors.
+
+### Percentage Positioning Not Responsive
+
+Ensure position mode is set to `'Percent'` using `engine.block.setPositionXMode(block, 'Percent')`. Verify percentage values are between 0.0 and 1.0. Check that parent block dimensions can change.
+
+## API Reference
+
+| Method                            | Description                                |
+| --------------------------------- | ------------------------------------------ |
+| `engine.block.addImage()`         | Create and position image in one operation |
+| `engine.block.setPositionX()`     | Set X coordinate value                     |
+| `engine.block.setPositionY()`     | Set Y coordinate value                     |
+| `engine.block.getPositionX()`     | Get current X coordinate value             |
+| `engine.block.getPositionY()`     | Get current Y coordinate value             |
+| `engine.block.setPositionXMode()` | Set position mode for X coordinate         |
+| `engine.block.setPositionYMode()` | Set position mode for Y coordinate         |
+| `engine.block.getPositionXMode()` | Get position mode for X coordinate         |
+| `engine.block.getPositionYMode()` | Get position mode for Y coordinate         |
+| `engine.block.setBool()`          | Set transform lock state                   |
+| `engine.block.getBool()`          | Get transform lock state                   |
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS 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

package/assets/docs/guide/edit-image/transform/resize.md

@@ -0,0 +1,301 @@
+> 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).
+
+**Navigation:** [Guides](./guides.md) > [Create and Edit Images](./edit-image.md) > [Transform](./edit-image/transform.md) > [Resize](./edit-image/transform/resize.md)
+
+---
+
+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/)
+
+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');
+    }
+
+    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' }
+    });
+
+    const engine = cesdk.engine;
+    const page = engine.block.findByType('page')[0];
+
+    // Demo 1: Absolute Sizing - Fixed dimensions
+    const absoluteImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_3.jpg',
+      {
+        size: { width: 180, height: 180 }
+      }
+    );
+    engine.block.appendChild(page, absoluteImage);
+    engine.block.setPositionX(absoluteImage, 20);
+    engine.block.setPositionY(absoluteImage, 80);
+
+    // Set explicit dimensions using setSize
+    engine.block.setSize(absoluteImage, 180, 180, {
+      sizeMode: 'Absolute'
+    });
+
+    const text1 = engine.block.create('text');
+    engine.block.setString(text1, 'text/text', 'Absolute');
+    engine.block.setFloat(text1, 'text/fontSize', 28);
+    engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text1, 180);
+    engine.block.setPositionX(text1, 20);
+    engine.block.setPositionY(text1, 280);
+    engine.block.appendChild(page, text1);
+
+    // Demo 2: Percentage Sizing - Responsive layout
+    const percentImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_5.jpg',
+      {
+        size: { width: 180, height: 180 }
+      }
+    );
+    engine.block.appendChild(page, percentImage);
+    engine.block.setPositionX(percentImage, 220);
+    engine.block.setPositionY(percentImage, 80);
+
+    // Set size mode to percentage for responsive sizing
+    engine.block.setWidthMode(percentImage, 'Percent');
+    engine.block.setHeightMode(percentImage, 'Percent');
+    // Values 0.0 to 1.0 represent percentage of parent
+    engine.block.setWidth(percentImage, 0.225);
+    engine.block.setHeight(percentImage, 0.36);
+
+    const text2 = engine.block.create('text');
+    engine.block.setString(text2, 'text/text', 'Percentage');
+    engine.block.setFloat(text2, 'text/fontSize', 28);
+    engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text2, 180);
+    engine.block.setPositionX(text2, 220);
+    engine.block.setPositionY(text2, 280);
+    engine.block.appendChild(page, text2);
+
+    // Demo 3: Resized with maintainCrop
+    const cropImage = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_6.jpg',
+      {
+        size: { width: 180, height: 180 }
+      }
+    );
+    engine.block.appendChild(page, cropImage);
+    engine.block.setPositionX(cropImage, 420);
+    engine.block.setPositionY(cropImage, 80);
+
+    // Resize while preserving crop settings
+    engine.block.setWidth(cropImage, 180, true);
+    engine.block.setHeight(cropImage, 180, true);
+
+    const text3 = engine.block.create('text');
+    engine.block.setString(text3, 'text/text', 'Maintain Crop');
+    engine.block.setFloat(text3, 'text/fontSize', 28);
+    engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(text3, 180);
+    engine.block.setPositionX(text3, 420);
+    engine.block.setPositionY(text3, 280);
+    engine.block.appendChild(page, text3);
+
+    // Get current dimensions
+    const currentWidth = engine.block.getWidth(absoluteImage);
+    const currentHeight = engine.block.getHeight(absoluteImage);
+    const widthMode = engine.block.getWidthMode(absoluteImage);
+    const heightMode = engine.block.getHeightMode(absoluteImage);
+    console.log('Current dimensions:', currentWidth, 'x', currentHeight);
+    console.log('Size modes:', widthMode, heightMode);
+
+    // Get calculated frame dimensions after layout
+    const frameWidth = engine.block.getFrameWidth(absoluteImage);
+    const frameHeight = engine.block.getFrameHeight(absoluteImage);
+    console.log('Frame dimensions:', frameWidth, 'x', frameHeight);
+
+    // Title text at top
+    const titleText = engine.block.create('text');
+    engine.block.setString(titleText, 'text/text', 'Image Resize Examples');
+    engine.block.setFloat(titleText, 'text/fontSize', 36);
+    engine.block.setEnum(titleText, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidth(titleText, 800);
+    engine.block.setPositionX(titleText, 0);
+    engine.block.setPositionY(titleText, 20);
+    engine.block.appendChild(page, titleText);
+  }
+}
+
+export default Example;
+```
+
+This guide covers resizing images with absolute or percentage sizing, configuring size modes, and maintaining crop settings during resize.
+
+## 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.
+
+## Setting Absolute Dimensions
+
+Set explicit dimensions using `engine.block.setSize()` with absolute pixel values:
+
+```typescript highlight-set-size
+// Set explicit dimensions using setSize
+engine.block.setSize(absoluteImage, 180, 180, {
+  sizeMode: 'Absolute'
+});
+```
+
+## Percentage Sizing
+
+Use percentage mode for responsive sizing. Values range from 0.0 to 1.0 representing percentage of parent container:
+
+```typescript highlight-percentage-mode
+// Set size mode to percentage for responsive sizing
+engine.block.setWidthMode(percentImage, 'Percent');
+engine.block.setHeightMode(percentImage, 'Percent');
+// Values 0.0 to 1.0 represent percentage of parent
+engine.block.setWidth(percentImage, 0.225);
+engine.block.setHeight(percentImage, 0.36);
+```
+
+Percentage sizing adapts automatically when the parent block dimensions change, maintaining relative sizes in responsive designs.
+
+## Maintaining Crop During Resize
+
+Use the `maintainCrop` parameter to preserve existing crop settings when resizing:
+
+```typescript highlight-maintain-crop
+// Resize while preserving crop settings
+engine.block.setWidth(cropImage, 180, true);
+engine.block.setHeight(cropImage, 180, true);
+```
+
+Setting `maintainCrop` to `true` automatically adjusts crop values to preserve the visible area.
+
+## Getting Current Dimensions
+
+Read current configured dimensions and size modes:
+
+```typescript highlight-get-dimensions
+// Get current dimensions
+const currentWidth = engine.block.getWidth(absoluteImage);
+const currentHeight = engine.block.getHeight(absoluteImage);
+const widthMode = engine.block.getWidthMode(absoluteImage);
+const heightMode = engine.block.getHeightMode(absoluteImage);
+```
+
+## Getting Frame Dimensions
+
+Get calculated frame dimensions after layout:
+
+```typescript highlight-frame-dimensions
+// Get calculated frame dimensions after layout
+const frameWidth = engine.block.getFrameWidth(absoluteImage);
+const frameHeight = engine.block.getFrameHeight(absoluteImage);
+```
+
+The difference between configured values and frame dimensions matters when using percentage or auto sizing modes.
+
+## Troubleshooting
+
+### Image Not Resizing
+
+Check if locked using `engine.block.getBool(block, 'constraints/size/locked')`. Verify size constraints aren't limiting changes. Ensure the block exists and confirm correct units for the size mode.
+
+### Unexpected Size Values
+
+Check mode using `engine.block.getWidthMode()` and `engine.block.getHeightMode()`. Verify absolute (design units) vs percentage (0.0-1.0) values. For percentage mode, review parent block dimensions.
+
+### Image Appears Stretched
+
+Calculate and set both dimensions proportionally. Use `maintainCrop: true` when resizing cropped images. Check `scene/aspectRatioLock` for scenes.
+
+## 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             |
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS 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