@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/concepts/scenes.md

@@ -1,55 +1,50 @@
-> 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:** [Concepts](./concepts.md) > [Scenes](./concepts/scenes.md)
 
 ---
 
 Scenes are the root container for all designs in CE.SDK. They hold pages,
-blocks, and the camera that controls what you see in the canvas—and the engine
+blocks, and configuration for how your design is structured—and the engine
 manages only one active scene at a time.
 
-![Scenes example showing a two-page design with different shapes on each page](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-concepts-scenes-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-scenes-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-scenes-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-concepts-scenes-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-concepts-scenes-server-js)
 
 Every design you create starts with a scene. Scenes contain pages, and pages contain the visible design elements—text, images, shapes, and other blocks. Understanding how scenes work is essential for building, saving, and restoring user designs.
 
-```typescript file=@cesdk_web_examples/guides-concepts-scenes-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+```typescript file=@cesdk_web_examples/guides-concepts-scenes-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
 
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
+// Load environment variables
+config();
 
 /**
- * CE.SDK Plugin: Scenes Guide
+ * CE.SDK Server Example: Scenes Guide
  *
  * Demonstrates the complete scene lifecycle in CE.SDK:
  * - Creating scenes with different layouts
  * - Managing pages within scenes
  * - Configuring scene properties
  * - Saving and loading scenes
- * - Camera control and zoom
+ * - Exporting scenes to files
  */
-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());
-    const engine = cesdk.engine;
+async function main() {
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
 
+  try {
     // Create a new design scene with VerticalStack layout
     // The layout controls how pages are arranged in the canvas
     engine.scene.create('VerticalStack');
@@ -107,61 +102,49 @@ class Example implements EditorPlugin {
 
     // Query scene properties
     const currentUnit = engine.scene.getDesignUnit();
-    // eslint-disable-next-line no-console
     console.log('Scene design unit:', currentUnit);
 
     // Get the scene layout
     const layout = engine.scene.getLayout();
-    // eslint-disable-next-line no-console
     console.log('Scene layout:', layout);
 
     // Access pages within the scene
     const pages = engine.scene.getPages();
-    // eslint-disable-next-line no-console
     console.log('Number of pages:', pages.length);
 
-    // Get the current page (nearest to viewport center)
-    const currentPage = engine.scene.getCurrentPage();
-    // eslint-disable-next-line no-console
-    console.log('Current page ID:', currentPage);
-
-    // Zoom to show all pages in the scene
-    const scene = engine.scene.get();
-    if (scene) {
-      await engine.scene.zoomToBlock(scene, { padding: 50 });
-    }
-
-    // Get the current zoom level
-    const zoomLevel = engine.scene.getZoomLevel();
-    // eslint-disable-next-line no-console
-    console.log('Current zoom level:', zoomLevel);
-
     // Save the scene to a string for persistence
     const sceneString = await engine.scene.saveToString();
-    // eslint-disable-next-line no-console
     console.log('Scene saved successfully. String length:', sceneString.length);
 
     // Demonstrate loading the scene from the saved string
     // This replaces the current scene with the saved version
     await engine.scene.loadFromString(sceneString);
-    // eslint-disable-next-line no-console
     console.log('Scene loaded from saved string');
 
-    // Zoom to show all loaded pages
-    const loadedScene = engine.scene.get();
-    if (loadedScene) {
-      await engine.scene.zoomToBlock(loadedScene, { padding: 50 });
+    // Export the first page to a PNG file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
     }
 
-    // eslint-disable-next-line no-console
-    console.log('Scenes guide initialized successfully.');
+    const loadedPages = engine.scene.getPages();
+    const blob = await engine.block.export(loadedPages[0], {
+      mimeType: 'image/png'
+    });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/scenes-page1.png`, buffer);
+    console.log('Exported to output/scenes-page1.png');
+
+    console.log('Scenes guide completed successfully.');
+  } finally {
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
-This guide covers how to create scenes from scratch, manage pages within scenes, configure scene properties, save and load designs, and control the camera's zoom and position.
+This guide covers how to create scenes from scratch, manage pages within scenes, configure scene properties, save and load designs, and export pages to image files.
 
 ## Scene Hierarchy
 
@@ -171,7 +154,7 @@ Scenes form the root of CE.SDK's design structure. The hierarchy works as follow
 - **Pages** — Direct children of scenes, arranged according to the scene's layout
 - **Blocks** — Design elements (text, images, shapes) that belong to pages
 
-Only blocks attached to pages within the active scene are rendered in the canvas. Use `engine.scene.get()` to retrieve the current scene and `engine.scene.getPages()` to access its pages.
+Only blocks attached to pages within the active scene are rendered when exported. Use `engine.scene.get()` to retrieve the current scene and `engine.scene.getPages()` to access its pages.
 
 ## Creating Scenes
 
@@ -180,14 +163,14 @@ Only blocks attached to pages within the active scene are rendered in the canvas
 Use `engine.scene.create()` to create a new design scene with a configurable page layout. The layout parameter controls how pages are arranged in the canvas.
 
 ```typescript highlight-create-scene
-// Create a new design scene with VerticalStack layout
-// The layout controls how pages are arranged in the canvas
-engine.scene.create('VerticalStack');
-
-// Get the stack container and add spacing between pages
-const stack = engine.block.findByType('stack')[0];
-engine.block.setFloat(stack, 'stack/spacing', 20);
-engine.block.setBool(stack, 'stack/spacingInScreenspace', true);
+    // Create a new design scene with VerticalStack layout
+    // The layout controls how pages are arranged in the canvas
+    engine.scene.create('VerticalStack');
+
+    // Get the stack container and add spacing between pages
+    const stack = engine.block.findByType('stack')[0];
+    engine.block.setFloat(stack, 'stack/spacing', 20);
+    engine.block.setBool(stack, 'stack/spacingInScreenspace', true);
 ```
 
 Available layouts include:
@@ -202,17 +185,17 @@ Available layouts include:
 After creating a scene, add pages using `engine.block.create('page')`. Configure the page dimensions and append it to the scene's stack container.
 
 ```typescript highlight-create-page
-// Create the first page
-const page1 = engine.block.create('page');
-engine.block.setWidth(page1, 800);
-engine.block.setHeight(page1, 600);
-engine.block.appendChild(stack, page1);
-
-// Create a second page
-const page2 = engine.block.create('page');
-engine.block.setWidth(page2, 800);
-engine.block.setHeight(page2, 600);
-engine.block.appendChild(stack, page2);
+    // Create the first page
+    const page1 = engine.block.create('page');
+    engine.block.setWidth(page1, 800);
+    engine.block.setHeight(page1, 600);
+    engine.block.appendChild(stack, page1);
+
+    // Create a second page
+    const page2 = engine.block.create('page');
+    engine.block.setWidth(page2, 800);
+    engine.block.setHeight(page2, 600);
+    engine.block.appendChild(stack, page2);
 ```
 
 ### Adding Blocks
@@ -220,39 +203,39 @@ engine.block.appendChild(stack, page2);
 With pages in place, add design elements like shapes, text, or images. Create a graphic block, configure its shape and fill, then append it to a page.
 
 ```typescript highlight-create-block
-// Add a shape to the first page
-const graphic1 = engine.block.create('graphic');
-engine.block.setShape(graphic1, engine.block.createShape('rect'));
-const fill1 = engine.block.createFill('color');
-engine.block.setColor(fill1, 'fill/color/value', {
-  r: 0.2,
-  g: 0.4,
-  b: 0.9,
-  a: 1
-});
-engine.block.setFill(graphic1, fill1);
-engine.block.setWidth(graphic1, 400);
-engine.block.setHeight(graphic1, 300);
-engine.block.setPositionX(graphic1, 200);
-engine.block.setPositionY(graphic1, 150);
-engine.block.appendChild(page1, graphic1);
-
-// Add a different shape to the second page
-const graphic2 = engine.block.create('graphic');
-engine.block.setShape(graphic2, engine.block.createShape('ellipse'));
-const fill2 = engine.block.createFill('color');
-engine.block.setColor(fill2, 'fill/color/value', {
-  r: 0.9,
-  g: 0.3,
-  b: 0.2,
-  a: 1
-});
-engine.block.setFill(graphic2, fill2);
-engine.block.setWidth(graphic2, 350);
-engine.block.setHeight(graphic2, 350);
-engine.block.setPositionX(graphic2, 225);
-engine.block.setPositionY(graphic2, 125);
-engine.block.appendChild(page2, graphic2);
+    // Add a shape to the first page
+    const graphic1 = engine.block.create('graphic');
+    engine.block.setShape(graphic1, engine.block.createShape('rect'));
+    const fill1 = engine.block.createFill('color');
+    engine.block.setColor(fill1, 'fill/color/value', {
+      r: 0.2,
+      g: 0.4,
+      b: 0.9,
+      a: 1
+    });
+    engine.block.setFill(graphic1, fill1);
+    engine.block.setWidth(graphic1, 400);
+    engine.block.setHeight(graphic1, 300);
+    engine.block.setPositionX(graphic1, 200);
+    engine.block.setPositionY(graphic1, 150);
+    engine.block.appendChild(page1, graphic1);
+
+    // Add a different shape to the second page
+    const graphic2 = engine.block.create('graphic');
+    engine.block.setShape(graphic2, engine.block.createShape('ellipse'));
+    const fill2 = engine.block.createFill('color');
+    engine.block.setColor(fill2, 'fill/color/value', {
+      r: 0.9,
+      g: 0.3,
+      b: 0.2,
+      a: 1
+    });
+    engine.block.setFill(graphic2, fill2);
+    engine.block.setWidth(graphic2, 350);
+    engine.block.setHeight(graphic2, 350);
+    engine.block.setPositionX(graphic2, 225);
+    engine.block.setPositionY(graphic2, 125);
+    engine.block.appendChild(page2, graphic2);
 ```
 
 ## Scene Properties
@@ -262,22 +245,20 @@ engine.block.appendChild(page2, graphic2);
 Query or configure how measurements are interpreted using `engine.scene.getDesignUnit()` and `engine.scene.setDesignUnit()`. This is useful for print workflows where precise physical dimensions matter.
 
 ```typescript highlight-scene-properties
-// Query scene properties
-const currentUnit = engine.scene.getDesignUnit();
-// eslint-disable-next-line no-console
-console.log('Scene design unit:', currentUnit);
-
-// Get the scene layout
-const layout = engine.scene.getLayout();
-// eslint-disable-next-line no-console
-console.log('Scene layout:', layout);
+    // Query scene properties
+    const currentUnit = engine.scene.getDesignUnit();
+    console.log('Scene design unit:', currentUnit);
+
+    // Get the scene layout
+    const layout = engine.scene.getLayout();
+    console.log('Scene layout:', layout);
 ```
 
 Supported units are `'Pixel'`, `'Millimeter'`, and `'Inch'`. For more details, see the [Design Units](./concepts/design-units.md) guide.
 
 ### Scene Layout
 
-Control how pages are arranged using `engine.scene.getLayout()` and `engine.scene.setLayout()`. The layout affects how users navigate between pages in multi-page designs.
+Control how pages are arranged using `engine.scene.getLayout()` and `engine.scene.setLayout()`. The layout affects how pages are organized in multi-page designs.
 
 ## Page Navigation
 
@@ -286,43 +267,10 @@ Access pages within your scene using these methods:
 ```typescript highlight-page-navigation
 // Access pages within the scene
 const pages = engine.scene.getPages();
-// eslint-disable-next-line no-console
 console.log('Number of pages:', pages.length);
-
-// Get the current page (nearest to viewport center)
-const currentPage = engine.scene.getCurrentPage();
-// eslint-disable-next-line no-console
-console.log('Current page ID:', currentPage);
 ```
 
-The `getCurrentPage()` method returns the page nearest to the viewport center—useful for determining which page the user is currently viewing.
-
-## Camera and Zoom
-
-### Zoom to Block
-
-Use `engine.scene.zoomToBlock()` to frame a specific block in the viewport with padding. Pass the scene block to show all pages:
-
-```typescript highlight-camera-zoom
-// Zoom to show all pages in the scene
-const scene = engine.scene.get();
-if (scene) {
-  await engine.scene.zoomToBlock(scene, { padding: 50 });
-}
-
-// Get the current zoom level
-const zoomLevel = engine.scene.getZoomLevel();
-// eslint-disable-next-line no-console
-console.log('Current zoom level:', zoomLevel);
-```
-
-### Zoom Level
-
-Get and set the zoom level directly with `engine.scene.getZoomLevel()` and `engine.scene.setZoomLevel()`. A zoom level of 1.0 means one design unit equals one screen pixel.
-
-### Auto-Fit Zoom
-
-For continuous auto-framing, use `engine.scene.enableZoomAutoFit()` to automatically keep a block centered as the viewport resizes.
+Use `engine.scene.getPages()` to get all pages in the scene. In server-side processing, you typically iterate through pages to export or modify each one.
 
 ## Saving Scenes
 
@@ -333,7 +281,6 @@ Use `engine.scene.saveToString()` to serialize the current scene. This captures
 ```typescript highlight-save-scene
 // Save the scene to a string for persistence
 const sceneString = await engine.scene.saveToString();
-// eslint-disable-next-line no-console
 console.log('Scene saved successfully. String length:', sceneString.length);
 ```
 
@@ -349,14 +296,7 @@ Use `engine.scene.loadFromString()` to restore a scene from a saved string:
 // Demonstrate loading the scene from the saved string
 // This replaces the current scene with the saved version
 await engine.scene.loadFromString(sceneString);
-// eslint-disable-next-line no-console
 console.log('Scene loaded from saved string');
-
-// Zoom to show all loaded pages
-const loadedScene = engine.scene.get();
-if (loadedScene) {
-  await engine.scene.zoomToBlock(loadedScene, { padding: 50 });
-}
 ```
 
 Loading a new scene replaces any existing scene. The engine only holds one active scene at a time.
@@ -369,19 +309,51 @@ Use `engine.scene.loadFromURL()` to load a scene directly from a remote location
 await engine.scene.loadFromURL('https://example.com/design.scene');
 ```
 
+## Exporting Scenes
+
+In server-side workflows, you typically export scenes to files for further processing or delivery:
+
+```typescript highlight-export
+    // Export the first page to a PNG file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+
+    const loadedPages = engine.scene.getPages();
+    const blob = await engine.block.export(loadedPages[0], {
+      mimeType: 'image/png'
+    });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/scenes-page1.png`, buffer);
+    console.log('Exported to output/scenes-page1.png');
+```
+
+Use `engine.block.export()` to render pages to PNG, JPEG, or PDF format. The exported blob can be saved to the file system or uploaded to cloud storage.
+
+## Engine Cleanup
+
+Always dispose of the engine when finished to free resources:
+
+```typescript highlight-cleanup
+engine.dispose();
+```
+
+Use a `try/finally` block to ensure cleanup happens even if an error occurs during processing.
+
 ## Troubleshooting
 
-### Blocks Not Visible
+### Blocks Not Visible in Export
 
-Ensure blocks are attached to pages, and pages are attached to the scene. Orphaned blocks that aren't part of the scene hierarchy won't render.
+Ensure blocks are attached to pages, and pages are attached to the scene. Orphaned blocks that aren't part of the scene hierarchy won't appear in exports.
 
 ### Scene Not Loading
 
-Check that the scene URL or string is valid. If assets fail to load, consider using the `waitForResources` option to ensure everything loads before rendering.
+Check that the scene URL or string is valid. If assets fail to load, consider using the `waitForResources` option to ensure everything loads before exporting.
 
-### Zoom Not Working
+### Export Fails
 
-Verify the scene has a valid camera. Some UI configurations may override programmatic zoom controls.
+Verify the page exists and is part of the active scene. Check that the output directory exists before writing files.
 
 ## Scene Type
 
@@ -389,55 +361,64 @@ Represents the scene and its global properties.
 
 This section describes the properties available for the **Scene Type** (`//ly.img.ubq/scene`) block type.
 
-| Property                       | Type     | Default      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| ------------------------------ | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `alwaysOnBottom`               | `Bool`   | `false`      | If true, this element's global sorting order is automatically adjusted to be lower than all other siblings.                                                                                                                                                                                                                                                                                                                                                               |
-| `alwaysOnTop`                  | `Bool`   | `false`      | If true, this element's global sorting order is automatically adjusted to be higher than all other siblings.                                                                                                                                                                                                                                                                                                                                                              |
-| `blend/mode`                   | `Enum`   | `"Normal"`   | The blend mode to use when compositing the block., Possible values: `"PassThrough"`, `"Normal"`, `"Darken"`, `"Multiply"`, `"ColorBurn"`, `"LinearBurn"`, `"DarkenColor"`, `"Lighten"`, `"Screen"`, `"ColorDodge"`, `"LinearDodge"`, `"LightenColor"`, `"Overlay"`, `"SoftLight"`, `"HardLight"`, `"VividLight"`, `"LinearLight"`, `"PinLight"`, `"HardMix"`, `"Difference"`, `"Exclusion"`, `"Subtract"`, `"Divide"`, `"Hue"`, `"Saturation"`, `"Color"`, `"Luminosity"` |
-| `clipped`                      | `Bool`   | `false`      | This component is used to identify elements whose contents and children should be clipped to their bounds.                                                                                                                                                                                                                                                                                                                                                                |
-| `contentFill/mode`             | `Enum`   | `"Cover"`    | Defines how content should be resized to fit its container (e.g., Crop, Cover, Contain)., Possible values: `"Crop"`, `"Cover"`, `"Contain"`                                                                                                                                                                                                                                                                                                                               |
-| `flip/horizontal`              | `Bool`   | `"-"`        | Whether the block is flipped horizontally.                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `flip/vertical`                | `Bool`   | `"-"`        | Whether the block is flipped vertically.                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| `globalBoundingBox/height`     | `Float`  | `"-"`        | The height of the block's axis-aligned bounding box in world coordinates., _(read-only)_                                                                                                                                                                                                                                                                                                                                                                                  |
-| `globalBoundingBox/width`      | `Float`  | `"-"`        | The width of the block's axis-aligned bounding box in world coordinates., _(read-only)_                                                                                                                                                                                                                                                                                                                                                                                   |
-| `globalBoundingBox/x`          | `Float`  | `"-"`        | The x-coordinate of the block's axis-aligned bounding box in world coordinates., _(read-only)_                                                                                                                                                                                                                                                                                                                                                                            |
-| `globalBoundingBox/y`          | `Float`  | `"-"`        | The y-coordinate of the block's axis-aligned bounding box in world coordinates., _(read-only)_                                                                                                                                                                                                                                                                                                                                                                            |
-| `height`                       | `Float`  | `0`          | The height of the block's frame.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `height/mode`                  | `Enum`   | `"Auto"`     | A mode describing how the height dimension may be interpreted (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`                                                                                                                                                                                                                                                                                                                            |
-| `highlightEnabled`             | `Bool`   | `true`       | Show highlighting when selected or hovered                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `lastFrame/height`             | `Float`  | `"-"`        | The height of the block's frame from the previous layout pass., _(read-only)_                                                                                                                                                                                                                                                                                                                                                                                             |
-| `lastFrame/width`              | `Float`  | `"-"`        | The width of the block's frame from the previous layout pass., _(read-only)_                                                                                                                                                                                                                                                                                                                                                                                              |
-| `lastFrame/x`                  | `Float`  | `"-"`        | The x-coordinate of the block's frame from the previous layout pass., _(read-only)_                                                                                                                                                                                                                                                                                                                                                                                       |
-| `lastFrame/y`                  | `Float`  | `"-"`        | The y-coordinate of the block's frame from the previous layout pass., _(read-only)_                                                                                                                                                                                                                                                                                                                                                                                       |
-| `placeholder/enabled`          | `Bool`   | `false`      | Whether the placeholder behavior is enabled or not.                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `playback/playing`             | `Bool`   | `false`      | A tag that can be set on elements for their playback time to be progressed.                                                                                                                                                                                                                                                                                                                                                                                               |
-| `playback/soloPlaybackEnabled` | `Bool`   | `false`      | A tag for blocks where playback should progress while the scene is paused.                                                                                                                                                                                                                                                                                                                                                                                                |
-| `playback/time`                | `Double` | `0`          | The current playback time of the block contents in seconds.                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `position/x`                   | `Float`  | `0`          | The x-coordinate of the block's origin.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `position/x/mode`              | `Enum`   | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`                                                                                                                                                                                                                                                                                                                                                            |
-| `position/y`                   | `Float`  | `0`          | The y-coordinate of the block's origin.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `position/y/mode`              | `Enum`   | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`                                                                                                                                                                                                                                                                                                                                                            |
-| `rotation`                     | `Float`  | `0`          | The rotation of the block in radians.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `scene/aspectRatioLock`        | `Bool`   | `true`       | Whether the ratio of the pageDimensions' width and height should remain constant when changing either dimension.                                                                                                                                                                                                                                                                                                                                                          |
-| `scene/designUnit`             | `Enum`   | `"Pixel"`    | The unit type in which the page values (size, distances, etc.) are defined., Possible values: `"Pixel"`, `"Millimeter"`, `"Inch"`                                                                                                                                                                                                                                                                                                                                         |
-| `scene/dpi`                    | `Float`  | `300`        | The DPI value to use when exporting and when converting between pixels and inches or millimeter units.                                                                                                                                                                                                                                                                                                                                                                    |
-| `scene/layout`                 | `Enum`   | `"Free"`     | A value describing how the scene's children are laid out., Possible values: `"Free"`, `"VerticalStack"`, `"HorizontalStack"`, `"DepthStack"`                                                                                                                                                                                                                                                                                                                              |
-| `scene/mode`                   | `Enum`   | `"Video"`    | The mode of this scene and all elements inside of it., _(read-only)_, Possible values: `"Design"`, `"Video"`                                                                                                                                                                                                                                                                                                                                                              |
-| `scene/pageDimensions/height`  | `Float`  | `1`          | The height of all pages in this scene.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `scene/pageDimensions/width`   | `Float`  | `1`          | The width of all pages in this scene.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `scene/pageFormatId`           | `String` | `""`         | The identifier of the page format configuration that was most recently selected for the pages in this scene.                                                                                                                                                                                                                                                                                                                                                              |
-| `scene/pixelScaleFactor`       | `Float`  | `1`          | A scale factor that is applied to the final export resolution if the design unit is Pixel.                                                                                                                                                                                                                                                                                                                                                                                |
-| `selected`                     | `Bool`   | `false`      | Indicates if the block is currently selected.                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `transformLocked`              | `Bool`   | `false`      | DesignBlocks with this tag can't be transformed (moved, rotated, scaled, cropped, or flipped).                                                                                                                                                                                                                                                                                                                                                                            |
-| `visible`                      | `Bool`   | `true`       | If the block is visible in the editor.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `width`                        | `Float`  | `0`          | The width of the block's frame.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `width/mode`                   | `Enum`   | `"Auto"`     | A mode describing how the width dimension may be interpreted (Absolute, Percent, Auto)., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`                                                                                                                                                                                                                                                                                                                             |
+| Property                          | Type     | Default      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `alwaysOnBottom`                  | `Bool`   | `false`      | If true, this element's global sorting order is automatically adjusted to be lower than all other siblings.                                                                                                                                                                                                                                                                                                                                                               |
+| `alwaysOnTop`                     | `Bool`   | `false`      | If true, this element's global sorting order is automatically adjusted to be higher than all other siblings.                                                                                                                                                                                                                                                                                                                                                              |
+| `blend/mode`                      | `Enum`   | `"Normal"`   | The blend mode to use when compositing the block., Possible values: `"PassThrough"`, `"Normal"`, `"Darken"`, `"Multiply"`, `"ColorBurn"`, `"LinearBurn"`, `"DarkenColor"`, `"Lighten"`, `"Screen"`, `"ColorDodge"`, `"LinearDodge"`, `"LightenColor"`, `"Overlay"`, `"SoftLight"`, `"HardLight"`, `"VividLight"`, `"LinearLight"`, `"PinLight"`, `"HardMix"`, `"Difference"`, `"Exclusion"`, `"Subtract"`, `"Divide"`, `"Hue"`, `"Saturation"`, `"Color"`, `"Luminosity"` |
+| `clipped`                         | `Bool`   | `false`      | This component is used to identify elements whose contents and children should be clipped to their bounds.                                                                                                                                                                                                                                                                                                                                                                |
+| `contentFill/horizontalAlignment` | `Enum`   | `"Center"`   | The horizontal alignment of the content fill inside the block. Only affects `Contain` and `Cover` fill modes; has no visible effect in `Crop` mode., Possible values: `"Left"`, `"Center"`, `"Right"`                                                                                                                                                                                                                                                                     |
+| `contentFill/mode`                | `Enum`   | `"Cover"`    | Defines how content should be resized to fit its container., Possible values: `"Crop"`, `"Cover"`, `"Contain"`                                                                                                                                                                                                                                                                                                                                                            |
+| `contentFill/verticalAlignment`   | `Enum`   | `"Center"`   | The vertical alignment of the content fill inside the block. Only affects `Contain` and `Cover` fill modes; has no visible effect in `Crop` mode., Possible values: `"Top"`, `"Center"`, `"Bottom"`                                                                                                                                                                                                                                                                       |
+| `flip/horizontal`                 | `Bool`   | `"-"`        | Whether the block is flipped horizontally.                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `flip/vertical`                   | `Bool`   | `"-"`        | Whether the block is flipped vertically.                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `globalBoundingBox/height`        | `Float`  | `"-"`        | The height of the block's axis-aligned bounding box in world coordinates., *(read-only)*                                                                                                                                                                                                                                                                                                                                                                                  |
+| `globalBoundingBox/width`         | `Float`  | `"-"`        | The width of the block's axis-aligned bounding box in world coordinates., *(read-only)*                                                                                                                                                                                                                                                                                                                                                                                   |
+| `globalBoundingBox/x`             | `Float`  | `"-"`        | The x-coordinate of the block's axis-aligned bounding box in world coordinates., *(read-only)*                                                                                                                                                                                                                                                                                                                                                                            |
+| `globalBoundingBox/y`             | `Float`  | `"-"`        | The y-coordinate of the block's axis-aligned bounding box in world coordinates., *(read-only)*                                                                                                                                                                                                                                                                                                                                                                            |
+| `height`                          | `Float`  | `0`          | The height of the block's frame.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `height/mode`                     | `Enum`   | `"Auto"`     | A mode describing how the height dimension may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`                                                                                                                                                                                                                                                                                                                                                      |
+| `highlightEnabled`                | `Bool`   | `true`       | Show highlighting when selected or hovered                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `lastFrame/height`                | `Float`  | `"-"`        | The height of the block's frame from the previous layout pass., *(read-only)*                                                                                                                                                                                                                                                                                                                                                                                             |
+| `lastFrame/width`                 | `Float`  | `"-"`        | The width of the block's frame from the previous layout pass., *(read-only)*                                                                                                                                                                                                                                                                                                                                                                                              |
+| `lastFrame/x`                     | `Float`  | `"-"`        | The x-coordinate of the block's frame from the previous layout pass., *(read-only)*                                                                                                                                                                                                                                                                                                                                                                                       |
+| `lastFrame/y`                     | `Float`  | `"-"`        | The y-coordinate of the block's frame from the previous layout pass., *(read-only)*                                                                                                                                                                                                                                                                                                                                                                                       |
+| `movement/constraint`             | `Float`  | `-1`         | The fraction of the block's own size that may be positioned outside the parent page boundary. A value of -1 means "not set" (fall through to the next priority level). A value of 0 means the block must stay fully inside the page. When set on a page, applies to the page's children as a default constraint.                                                                                                                                                          |
+| `placeholder/enabled`             | `Bool`   | `false`      | Whether the placeholder behavior is enabled or not.                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `playback/playing`                | `Bool`   | `false`      | A tag that can be set on elements for their playback time to be progressed.                                                                                                                                                                                                                                                                                                                                                                                               |
+| `playback/soloPlaybackEnabled`    | `Bool`   | `false`      | A tag for blocks where playback should progress while the scene is paused.                                                                                                                                                                                                                                                                                                                                                                                                |
+| `playback/time`                   | `Double` | `0`          | The current playback time of the block contents in seconds.                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `position/x`                      | `Float`  | `0`          | The x-coordinate of the block's origin.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `position/x/mode`                 | `Enum`   | `"Absolute"` | A mode describing how the x-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`                                                                                                                                                                                                                                                                                                                                                            |
+| `position/y`                      | `Float`  | `0`          | The y-coordinate of the block's origin.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `position/y/mode`                 | `Enum`   | `"Absolute"` | A mode describing how the y-position may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`                                                                                                                                                                                                                                                                                                                                                            |
+| `rotation`                        | `Float`  | `0`          | The rotation of the block in radians.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `scene/aspectRatioLock`           | `Bool`   | `true`       | Whether the ratio of the pageDimensions' width and height should remain constant when changing either dimension.                                                                                                                                                                                                                                                                                                                                                          |
+| `scene/designUnit`                | `Enum`   | `"Pixel"`    | The unit type in which the page values (size, distances, etc.) are defined., Possible values: `"Pixel"`, `"Millimeter"`, `"Inch"`                                                                                                                                                                                                                                                                                                                                         |
+| `scene/dpi`                       | `Float`  | `300`        | The DPI value to use when exporting and when converting between pixels and inches or millimeter units.                                                                                                                                                                                                                                                                                                                                                                    |
+| `scene/extendedPanningArea`       | `Bool`   | `false`      | Whether the scrollable/pannable area extends far beyond the content bounds, creating a large canvas workspace. When false, panning is limited to the content area.                                                                                                                                                                                                                                                                                                        |
+| `scene/fontSizeUnit`              | `Enum`   | `"Point"`    | The unit in which font sizes for `setTextFontSize`/`getTextFontSizes` are interpreted., Possible values: `"Pixel"`, `"Point"`                                                                                                                                                                                                                                                                                                                                             |
+| `scene/layout`                    | `Enum`   | `"Free"`     | A value describing how the scene's children are laid out., Possible values: `"Free"`, `"VerticalStack"`, `"HorizontalStack"`, `"DepthStack"`                                                                                                                                                                                                                                                                                                                              |
+| `scene/mode`                      | `Enum`   | `"Video"`    | The mode of this scene and all elements inside of it., Possible values: `"Design"`, `"Video"`                                                                                                                                                                                                                                                                                                                                                                             |
+| `scene/pageDimensions/height`     | `Float`  | `1`          | The height of all pages in this scene.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `scene/pageDimensions/width`      | `Float`  | `1`          | The width of all pages in this scene.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `scene/pageFormatId`              | `String` | `""`         | The identifier of the page format configuration that was most recently selected for the pages in this scene.                                                                                                                                                                                                                                                                                                                                                              |
+| `scene/pixelScaleFactor`          | `Float`  | `1`          | A scale factor that is applied to the final export resolution if the design unit is Pixel.                                                                                                                                                                                                                                                                                                                                                                                |
+| `selected`                        | `Bool`   | `false`      | Indicates if the block is currently selected.                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `selectionEnabled`                | `Bool`   | `false`      | Whether the block can be selected in the editor.                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `transformLocked`                 | `Bool`   | `false`      | DesignBlocks with this tag can't be transformed (moved, rotated, scaled, cropped, or flipped).                                                                                                                                                                                                                                                                                                                                                                            |
+| `visible`                         | `Bool`   | `true`       | If the block is visible in the editor.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `width`                           | `Float`  | `0`          | The width of the block's frame.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `width/mode`                      | `Enum`   | `"Auto"`     | A mode describing how the width dimension may be interpreted., Possible values: `"Absolute"`, `"Percent"`, `"Auto"`                                                                                                                                                                                                                                                                                                                                                       |
+
+
+
 
 ---
 
 ## 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