@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/colors/adjust.md

@@ -1,105 +1,58 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Colors](./colors.md) > [Adjust Colors](./colors/adjust.md)
 
 ---
 
-Fine-tune images and design elements using CE.SDK's color adjustments system to control brightness, contrast, saturation, and other visual properties.
-
-![Adjust Colors example showing images with various color adjustments applied](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Fine-tune images programmatically using CE.SDK's color adjustments system to control brightness, contrast, saturation, and other visual properties in server-side applications.
 
 > **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-colors-adjust-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-adjust-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-adjust-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-adjust-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-adjust-server-js)
 
 Color adjustments allow you to modify the visual appearance of images and graphics by changing properties like brightness, contrast, saturation, and color temperature. CE.SDK implements color adjustments as an "adjustments" effect type that you can apply to compatible blocks.
 
-```typescript file=@cesdk_web_examples/guides-colors-adjust-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-
-import {
-  BlurAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
+```typescript file=@cesdk_web_examples/guides-colors-adjust-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
+
+// Load environment variables
+config();
 
 /**
- * CE.SDK Plugin: Adjust Colors Guide
+ * CE.SDK Server Guide: Adjust Colors
  *
- * Demonstrates how to adjust color properties of images and design elements:
+ * Demonstrates how to adjust color properties of images programmatically:
  * - Creating adjustments effects
  * - Setting brightness, contrast, saturation, and other properties
  * - Enabling/disabling adjustments
  * - Reading adjustment values
  * - Applying different adjustment styles
+ * - Exporting the result
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-
-  version = packageJson.version;
-
-  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
-    if (!cesdk) {
-      throw new Error('CE.SDK instance is required for this plugin');
-    }
-
-    await cesdk.addPlugin(new DesignEditorConfig());
-
-    // Add asset source plugins
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new ColorPaletteAssetSource());
-    await cesdk.addPlugin(new CropPresetsAssetSource());
-    await cesdk.addPlugin(
-      new UploadAssetSources({ include: ['ly.img.image.upload'] })
-    );
-    await cesdk.addPlugin(
-      new DemoAssetSources({
-        include: [
-          'ly.img.templates.blank.*',
-          'ly.img.templates.presentation.*',
-          'ly.img.templates.print.*',
-          'ly.img.templates.social.*',
-          'ly.img.image.*'
-        ]
-      })
-    );
-    await cesdk.addPlugin(new EffectsAssetSource());
-    await cesdk.addPlugin(new FiltersAssetSource());
-    await cesdk.addPlugin(new PagePresetsAssetSource());
-    await cesdk.addPlugin(new StickerAssetSource());
-    await cesdk.addPlugin(new TextAssetSource());
-    await cesdk.addPlugin(new TextComponentAssetSource());
-    await cesdk.addPlugin(new TypefaceAssetSource());
-    await cesdk.addPlugin(new VectorShapeAssetSource());
-
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 600, unit: 'Pixel' }
+async function main() {
+  // Initialize the headless Creative Engine
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
+
+  try {
+    // Create a scene with a page
+    engine.scene.create('VerticalStack', {
+      page: { size: { width: 800, height: 600 } }
     });
 
-    // Enable adjustments in the inspector panel
-    cesdk.feature.enable('ly.img.adjustment');
-
-    const engine = cesdk.engine;
     const page = engine.block.findByType('page')[0];
 
-    // Create a sample image to demonstrate color adjustments
+    // Sample image URL
     const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
 
     // Check if a block supports effects before applying adjustments
@@ -245,148 +198,165 @@ class Example implements EditorPlugin {
     // Shadows - adjusts dark areas
     engine.block.setFloat(refinementEffect, 'effect/adjustments/shadows', 0.3);
 
-    // Select the main image block to show adjustments panel
-    engine.block.select(imageBlock);
+    // Export the result to a file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
 
-    console.log(
-      'Color adjustments guide initialized. Select an image to see the adjustments panel.'
-    );
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/adjusted-colors.png`, buffer);
+
+    console.log('Exported result to output/adjusted-colors.png');
+  } finally {
+    // Always dispose of the engine to free resources
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
-This guide covers how to use the built-in adjustments UI panel and how to apply color adjustments programmatically using the block API.
+This guide covers how to apply color adjustments programmatically using the block API in server-side Node.js applications.
 
-## Using the Built-in Adjustments UI
+## Initialize the Engine
 
-CE.SDK provides a built-in adjustments panel that allows users to modify color properties interactively. Users can access this panel by selecting an image or graphic block in the editor.
+We start by initializing the headless Creative Engine with a scene and page for our image processing workflow.
 
-### Enable Adjustments Features
+```typescript highlight=highlight-setup
+  // Initialize the headless Creative Engine
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE
+  });
 
-To give users access to adjustments in the inspector panel, we enable the adjustments feature using CE.SDK's Feature API.
+  try {
+    // Create a scene with a page
+    engine.scene.create('VerticalStack', {
+      page: { size: { width: 800, height: 600 } }
+    });
 
-```typescript highlight=highlight-feature-enable
-// Enable adjustments in the inspector panel
-cesdk.feature.enable('ly.img.adjustment');
+    const page = engine.block.findByType('page')[0];
 ```
 
-With adjustments enabled, users can:
-
-- **Adjust sliders** for brightness, contrast, saturation, exposure, and more
-- **See real-time preview** of changes as they adjust values
-- **Reset adjustments** individually or all at once to restore defaults
-
-## Programmatic Color Adjustments
-
-For applications that need to apply adjustments programmatically—whether for automation, batch processing, or dynamic user experiences—we use the block API.
-
-### Check Block Compatibility
+## Check Block Compatibility
 
 Before applying adjustments, we verify the block supports effects. Not all block types support adjustments—for example, page blocks don't support effects directly, but image and graphic blocks do.
 
 ```typescript highlight=highlight-check-support
-// Check if a block supports effects before applying adjustments
-const imageBlock = await engine.block.addImage(imageUri, {
-  size: { width: 400, height: 300 }
-});
-engine.block.appendChild(page, imageBlock);
-engine.block.setPositionX(imageBlock, 200);
-engine.block.setPositionY(imageBlock, 150);
-
-const supportsEffects = engine.block.supportsEffects(imageBlock);
-console.log('Block supports effects:', supportsEffects);
+    // Check if a block supports effects before applying adjustments
+    const imageBlock = await engine.block.addImage(imageUri, {
+      size: { width: 400, height: 300 }
+    });
+    engine.block.appendChild(page, imageBlock);
+    engine.block.setPositionX(imageBlock, 200);
+    engine.block.setPositionY(imageBlock, 150);
+
+    const supportsEffects = engine.block.supportsEffects(imageBlock);
+    console.log('Block supports effects:', supportsEffects);
 ```
 
-### Create and Apply Adjustments Effect
+## Create and Apply Adjustments Effect
 
 Once we've confirmed a block supports effects, we create an adjustments effect and attach it to the block using `appendEffect()`.
 
 ```typescript highlight=highlight-create-adjustments
-// Create an adjustments effect
-const adjustmentsEffect = engine.block.createEffect('adjustments');
+    // Create an adjustments effect
+    const adjustmentsEffect = engine.block.createEffect('adjustments');
 
-// Attach the adjustments effect to the image block
-engine.block.appendEffect(imageBlock, adjustmentsEffect);
+    // Attach the adjustments effect to the image block
+    engine.block.appendEffect(imageBlock, adjustmentsEffect);
 ```
 
 Each block can have one adjustments effect in its effect stack. The adjustments effect provides access to all color adjustment properties through a single effect instance.
 
-### Modify Adjustment Properties
+## Modify Adjustment Properties
 
 We set individual adjustment values using `setFloat()` with the effect block ID and property path. Each property uses the `effect/adjustments/` prefix followed by the property name.
 
 ```typescript highlight=highlight-set-properties
-// Set brightness - positive values lighten, negative values darken
-engine.block.setFloat(adjustmentsEffect, 'effect/adjustments/brightness', 0.4);
+    // Set brightness - positive values lighten, negative values darken
+    engine.block.setFloat(
+      adjustmentsEffect,
+      'effect/adjustments/brightness',
+      0.4
+    );
 
-// Set contrast - increases or decreases tonal range
-engine.block.setFloat(adjustmentsEffect, 'effect/adjustments/contrast', 0.35);
+    // Set contrast - increases or decreases tonal range
+    engine.block.setFloat(
+      adjustmentsEffect,
+      'effect/adjustments/contrast',
+      0.35
+    );
 
-// Set saturation - increases or decreases color intensity
-engine.block.setFloat(adjustmentsEffect, 'effect/adjustments/saturation', 0.5);
+    // Set saturation - increases or decreases color intensity
+    engine.block.setFloat(
+      adjustmentsEffect,
+      'effect/adjustments/saturation',
+      0.5
+    );
 
-// Set temperature - positive for warmer, negative for cooler tones
-engine.block.setFloat(
-  adjustmentsEffect,
-  'effect/adjustments/temperature',
-  0.25
-);
+    // Set temperature - positive for warmer, negative for cooler tones
+    engine.block.setFloat(
+      adjustmentsEffect,
+      'effect/adjustments/temperature',
+      0.25
+    );
 ```
 
 CE.SDK provides the following adjustment properties:
 
-| Property      | Description                                                                   |
-| ------------- | ----------------------------------------------------------------------------- |
-| `brightness`  | Overall lightness—positive values lighten, negative values darken             |
-| `contrast`    | Tonal range—increases or decreases the difference between light and dark      |
-| `saturation`  | Color intensity—positive values increase vibrancy, negative values desaturate |
-| `exposure`    | Exposure compensation—simulates camera exposure adjustments                   |
-| `gamma`       | Gamma curve—adjusts midtone brightness                                        |
-| `highlights`  | Bright area intensity—controls the lightest parts of the image                |
-| `shadows`     | Dark area intensity—controls the darkest parts of the image                   |
-| `whites`      | White point—adjusts the brightest pixels                                      |
-| `blacks`      | Black point—adjusts the darkest pixels                                        |
-| `temperature` | Warm/cool color cast—positive for warmer, negative for cooler tones           |
-| `sharpness`   | Edge sharpness—enhances or softens edges                                      |
-| `clarity`     | Midtone contrast—increases local contrast for more definition                 |
+| Property | Description |
+|----------|-------------|
+| `brightness` | Overall lightness—positive values lighten, negative values darken |
+| `contrast` | Tonal range—increases or decreases the difference between light and dark |
+| `saturation` | Color intensity—positive values increase vibrancy, negative values desaturate |
+| `exposure` | Exposure compensation—simulates camera exposure adjustments |
+| `gamma` | Gamma curve—adjusts midtone brightness |
+| `highlights` | Bright area intensity—controls the lightest parts of the image |
+| `shadows` | Dark area intensity—controls the darkest parts of the image |
+| `whites` | White point—adjusts the brightest pixels |
+| `blacks` | Black point—adjusts the darkest pixels |
+| `temperature` | Warm/cool color cast—positive for warmer, negative for cooler tones |
+| `sharpness` | Edge sharpness—enhances or softens edges |
+| `clarity` | Midtone contrast—increases local contrast for more definition |
 
 All properties accept float values. Experiment with different values to achieve the desired visual result.
 
-### Read Adjustment Values
+## Read Adjustment Values
 
 We can read current adjustment values using `getFloat()` with the same property paths. Use `findAllProperties()` to discover all available properties on an adjustments effect.
 
 ```typescript highlight=highlight-read-values
-// Read current adjustment values
-const brightness = engine.block.getFloat(
-  adjustmentsEffect,
-  'effect/adjustments/brightness'
-);
-console.log('Current brightness:', brightness);
-
-// Discover all available adjustment properties
-const allProperties = engine.block.findAllProperties(adjustmentsEffect);
-console.log('Available adjustment properties:', allProperties);
+    // Read current adjustment values
+    const brightness = engine.block.getFloat(
+      adjustmentsEffect,
+      'effect/adjustments/brightness'
+    );
+    console.log('Current brightness:', brightness);
+
+    // Discover all available adjustment properties
+    const allProperties = engine.block.findAllProperties(adjustmentsEffect);
+    console.log('Available adjustment properties:', allProperties);
 ```
 
-This is useful for building custom UI controls or syncing adjustment values across your application.
+This is useful for building batch processing pipelines or logging adjustment configurations.
 
-### Enable and Disable Adjustments
+## Enable and Disable Adjustments
 
-CE.SDK allows you to temporarily toggle adjustments on and off without removing them from the block. This is useful for before/after comparisons.
+CE.SDK allows you to temporarily toggle adjustments on and off without removing them from the block. This is useful for before/after comparisons or conditional processing.
 
 ```typescript highlight=highlight-enable-disable
-// Disable adjustments temporarily (effect remains attached)
-engine.block.setEffectEnabled(adjustmentsEffect, false);
-console.log(
-  'Adjustments enabled:',
-  engine.block.isEffectEnabled(adjustmentsEffect)
-);
-
-// Re-enable adjustments
-engine.block.setEffectEnabled(adjustmentsEffect, true);
+    // Disable adjustments temporarily (effect remains attached)
+    engine.block.setEffectEnabled(adjustmentsEffect, false);
+    console.log(
+      'Adjustments enabled:',
+      engine.block.isEffectEnabled(adjustmentsEffect)
+    );
+
+    // Re-enable adjustments
+    engine.block.setEffectEnabled(adjustmentsEffect, true);
 ```
 
 When you disable an adjustments effect, it remains attached to the block but won't be rendered until you enable it again. This preserves all adjustment values while giving you control over when adjustments are applied.
@@ -396,32 +366,36 @@ When you disable an adjustments effect, it remains attached to the block but won
 You can apply different adjustment combinations to create distinct visual styles. This example demonstrates a contrasting moody look using negative brightness, high contrast, and desaturation.
 
 ```typescript highlight=highlight-combine-effects
-// Create a second image to demonstrate a different adjustment style
-const secondImageBlock = await engine.block.addImage(imageUri, {
-  size: { width: 200, height: 150 }
-});
-engine.block.appendChild(page, secondImageBlock);
-engine.block.setPositionX(secondImageBlock, 50);
-engine.block.setPositionY(secondImageBlock, 50);
-
-// Apply a contrasting style: darker, high contrast, desaturated (moody look)
-const combinedAdjustments = engine.block.createEffect('adjustments');
-engine.block.appendEffect(secondImageBlock, combinedAdjustments);
-engine.block.setFloat(
-  combinedAdjustments,
-  'effect/adjustments/brightness',
-  -0.15
-);
-engine.block.setFloat(combinedAdjustments, 'effect/adjustments/contrast', 0.4);
-engine.block.setFloat(
-  combinedAdjustments,
-  'effect/adjustments/saturation',
-  -0.3
-);
-
-// List all effects on the block
-const effects = engine.block.getEffects(secondImageBlock);
-console.log('Effects on second image:', effects.length);
+    // Create a second image to demonstrate a different adjustment style
+    const secondImageBlock = await engine.block.addImage(imageUri, {
+      size: { width: 200, height: 150 }
+    });
+    engine.block.appendChild(page, secondImageBlock);
+    engine.block.setPositionX(secondImageBlock, 50);
+    engine.block.setPositionY(secondImageBlock, 50);
+
+    // Apply a contrasting style: darker, high contrast, desaturated (moody look)
+    const combinedAdjustments = engine.block.createEffect('adjustments');
+    engine.block.appendEffect(secondImageBlock, combinedAdjustments);
+    engine.block.setFloat(
+      combinedAdjustments,
+      'effect/adjustments/brightness',
+      -0.15
+    );
+    engine.block.setFloat(
+      combinedAdjustments,
+      'effect/adjustments/contrast',
+      0.4
+    );
+    engine.block.setFloat(
+      combinedAdjustments,
+      'effect/adjustments/saturation',
+      -0.3
+    );
+
+    // List all effects on the block
+    const effects = engine.block.getEffects(secondImageBlock);
+    console.log('Effects on second image:', effects.length);
 ```
 
 By combining different adjustment properties, you can create warm and vibrant looks, cool and desaturated styles, or high-contrast dramatic effects.
@@ -431,21 +405,29 @@ By combining different adjustment properties, you can create warm and vibrant lo
 Beyond basic color corrections, CE.SDK provides refinement adjustments for fine-tuning image detail and tonal balance.
 
 ```typescript highlight=highlight-refinement-adjustments
-// Add refinement adjustments to demonstrate subtle enhancement properties
-const refinementEffect = engine.block.createEffect('adjustments');
-engine.block.appendEffect(tempBlock, refinementEffect);
+    // Add refinement adjustments to demonstrate subtle enhancement properties
+    const refinementEffect = engine.block.createEffect('adjustments');
+    engine.block.appendEffect(tempBlock, refinementEffect);
 
-// Sharpness - enhances edge definition
-engine.block.setFloat(refinementEffect, 'effect/adjustments/sharpness', 0.4);
+    // Sharpness - enhances edge definition
+    engine.block.setFloat(
+      refinementEffect,
+      'effect/adjustments/sharpness',
+      0.4
+    );
 
-// Clarity - increases mid-tone contrast for more detail
-engine.block.setFloat(refinementEffect, 'effect/adjustments/clarity', 0.35);
+    // Clarity - increases mid-tone contrast for more detail
+    engine.block.setFloat(refinementEffect, 'effect/adjustments/clarity', 0.35);
 
-// Highlights - adjusts bright areas
-engine.block.setFloat(refinementEffect, 'effect/adjustments/highlights', -0.2);
+    // Highlights - adjusts bright areas
+    engine.block.setFloat(
+      refinementEffect,
+      'effect/adjustments/highlights',
+      -0.2
+    );
 
-// Shadows - adjusts dark areas
-engine.block.setFloat(refinementEffect, 'effect/adjustments/shadows', 0.3);
+    // Shadows - adjusts dark areas
+    engine.block.setFloat(refinementEffect, 'effect/adjustments/shadows', 0.3);
 ```
 
 Refinement properties include:
@@ -455,54 +437,68 @@ Refinement properties include:
 - **Highlights** - Controls the intensity of bright areas
 - **Shadows** - Controls the intensity of dark areas
 
-These adjustments are particularly useful for enhancing photos or preparing images for print.
-
-## Managing Adjustments
+These adjustments are particularly useful for batch processing workflows where consistent enhancement is needed.
 
-### Remove Adjustments
+## Remove Adjustments
 
 When you no longer need adjustments, you can remove them from the effect stack and free resources. Always destroy effects that are no longer in use to prevent memory leaks.
 
 ```typescript highlight=highlight-remove-adjustments
-// Demonstrate removing an effect
-const tempBlock = await engine.block.addImage(imageUri, {
-  size: { width: 150, height: 100 }
-});
-engine.block.appendChild(page, tempBlock);
-engine.block.setPositionX(tempBlock, 550);
-engine.block.setPositionY(tempBlock, 50);
-
-const tempEffect = engine.block.createEffect('adjustments');
-engine.block.appendEffect(tempBlock, tempEffect);
-engine.block.setFloat(tempEffect, 'effect/adjustments/brightness', 0.5);
-
-// Remove the effect by index
-const tempEffects = engine.block.getEffects(tempBlock);
-const effectIndex = tempEffects.indexOf(tempEffect);
-if (effectIndex !== -1) {
-  engine.block.removeEffect(tempBlock, effectIndex);
-}
+    // Demonstrate removing an effect
+    const tempBlock = await engine.block.addImage(imageUri, {
+      size: { width: 150, height: 100 }
+    });
+    engine.block.appendChild(page, tempBlock);
+    engine.block.setPositionX(tempBlock, 550);
+    engine.block.setPositionY(tempBlock, 50);
 
-// Destroy the removed effect to free memory
-engine.block.destroy(tempEffect);
+    const tempEffect = engine.block.createEffect('adjustments');
+    engine.block.appendEffect(tempBlock, tempEffect);
+    engine.block.setFloat(tempEffect, 'effect/adjustments/brightness', 0.5);
+
+    // Remove the effect by index
+    const tempEffects = engine.block.getEffects(tempBlock);
+    const effectIndex = tempEffects.indexOf(tempEffect);
+    if (effectIndex !== -1) {
+      engine.block.removeEffect(tempBlock, effectIndex);
+    }
+
+    // Destroy the removed effect to free memory
+    engine.block.destroy(tempEffect);
 ```
 
 The `removeEffect()` method takes an index position. After removal, destroy the effect instance to ensure proper cleanup.
 
-### Reset Adjustments
+## Export and Cleanup
+
+After applying adjustments, we export the result to a file and dispose of the engine to free resources.
 
-To reset all adjustments to their default values, you can either:
+```typescript highlight=highlight-export
+    // Export the result to a file
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
 
-- Set each property to `0.0` individually using `setFloat()`
-- Remove the adjustments effect and create a new one
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+    writeFileSync(`${outputDir}/adjusted-colors.png`, buffer);
+
+    console.log('Exported result to output/adjusted-colors.png');
+```
 
-For most cases, setting properties to `0.0` is more efficient than recreating the effect.
+Always dispose of the engine in a finally block to ensure resources are freed even if an error occurs.
+
+```typescript highlight=highlight-cleanup
+// Always dispose of the engine to free resources
+engine.dispose();
+```
 
 ## Troubleshooting
 
 ### Adjustments Not Visible
 
-If adjustments don't appear after applying them:
+If adjustments don't appear in exported images:
 
 - Verify the block supports effects using `supportsEffects()`
 - Check that the effect is enabled with `isEffectEnabled()`
@@ -526,26 +522,28 @@ If you encounter property not found errors:
 
 ## API Reference
 
-| Method                                     | Description                               |
-| ------------------------------------------ | ----------------------------------------- |
-| `block.supportsEffects(block)`             | Check if a block supports effects         |
-| `block.createEffect('adjustments')`        | Create an adjustments effect              |
-| `block.appendEffect(block, effect)`        | Add effect to the end of the effect stack |
-| `block.insertEffect(block, effect, index)` | Insert effect at a specific position      |
-| `block.getEffects(block)`                  | Get all effects applied to a block        |
-| `block.removeEffect(block, index)`         | Remove effect at the specified index      |
-| `block.setEffectEnabled(effect, enabled)`  | Enable or disable an effect               |
-| `block.isEffectEnabled(effect)`            | Check if an effect is enabled             |
-| `block.setFloat(effect, property, value)`  | Set a float property value                |
-| `block.getFloat(effect, property)`         | Get a float property value                |
-| `block.findAllProperties(effect)`          | List all properties of an effect          |
-| `block.destroy(effect)`                    | Destroy an effect and free resources      |
+| Method | Description |
+|--------|-------------|
+| `block.supportsEffects(block)` | Check if a block supports effects |
+| `block.createEffect('adjustments')` | Create an adjustments effect |
+| `block.appendEffect(block, effect)` | Add effect to the end of the effect stack |
+| `block.insertEffect(block, effect, index)` | Insert effect at a specific position |
+| `block.getEffects(block)` | Get all effects applied to a block |
+| `block.removeEffect(block, index)` | Remove effect at the specified index |
+| `block.setEffectEnabled(effect, enabled)` | Enable or disable an effect |
+| `block.isEffectEnabled(effect)` | Check if an effect is enabled |
+| `block.setFloat(effect, property, value)` | Set a float property value |
+| `block.getFloat(effect, property)` | Get a float property value |
+| `block.findAllProperties(effect)` | List all properties of an effect |
+| `block.destroy(effect)` | Destroy an effect and free resources |
+
+
 
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js documentation
 - **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
-- **[Web Documentation](./js.md)** - Interactive documentation with examples
-- **[Support](mailto:support@img.ly)** - Contact IMG.LY support
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support