@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/export-save-publish/export/with-color-mask.md

@@ -1,198 +1,370 @@
-> 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) > [Export Media Assets](./export-save-publish/export.md) > [With a Color Mask](./export-save-publish/export/with-color-mask.md)
 
 ---
 
-Remove specific colors from exported images and generate alpha masks using
-CE.SDK's color mask export API for print workflows, transparency creation, and
-compositing pipelines.
-
-![Export with Color Mask example showing color removal and alpha mask generation](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Export design blocks with specific colors masked to transparency, while generating separate alpha mask files for print workflows and automated processing.
 
 > **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)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-with-color-mask-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-export-save-publish-export-with-color-mask-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-with-color-mask-server-js)
 
 When exporting, CE.SDK can remove specific RGB colors by replacing matching pixels with transparency. The export generates two files: the masked image with transparent areas and an alpha mask showing removed pixels.
 
-```typescript file=@cesdk_web_examples/guides-export-save-publish-export-with-color-mask-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';
-
-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' }
+```typescript file=@cesdk_web_examples/guides-export-save-publish-export-with-color-mask-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+
+// Load environment variables
+config();
+
+/**
+ * CE.SDK Server Guide: Export with Color Mask
+ *
+ * Demonstrates color mask exports for removing specific colors:
+ * - Basic color mask export with RGB values
+ * - Specifying and converting mask colors
+ * - Export format options (PNG, compression)
+ * - Saving masked image and alpha mask files
+ * - Different block types (pages, groups, individual blocks)
+ * - Use cases (print workflows, transparency creation)
+ */
+
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE, // Optional (trial mode available)
+});
+
+try {
+  // Create a design scene with specific page dimensions
+  engine.scene.create('VerticalStack', {
+    page: { size: { width: 800, height: 600 } }
+  });
+  const page = engine.block.findByType('page')[0];
+
+  const pageWidth = engine.block.getWidth(page);
+  const pageHeight = engine.block.getHeight(page);
+
+  // Output directory for exported files
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
+
+  const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+
+  // Create an image with registration marks that we'll mask out
+  const imageBlock = await engine.block.addImage(imageUri, {
+    size: { width: pageWidth * 0.8, height: pageHeight * 0.8 }
+  });
+  engine.block.appendChild(page, imageBlock);
+
+  // Center the image on the page
+  const imageWidth = engine.block.getWidth(imageBlock);
+  const imageHeight = engine.block.getHeight(imageBlock);
+  engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2);
+  engine.block.setPositionY(imageBlock, (pageHeight - imageHeight) / 2);
+
+  // Add registration marks at the corners (pure red)
+  const markSize = 30;
+  const imageX = engine.block.getPositionX(imageBlock);
+  const imageY = engine.block.getPositionY(imageBlock);
+
+  const markPositions = [
+    { x: imageX - markSize - 10, y: imageY - markSize - 10 }, // Top-left
+    { x: imageX + imageWidth + 10, y: imageY - markSize - 10 }, // Top-right
+    { x: imageX - markSize - 10, y: imageY + imageHeight + 10 }, // Bottom-left
+    { x: imageX + imageWidth + 10, y: imageY + imageHeight + 10 } // Bottom-right
+  ];
+
+  markPositions.forEach((pos) => {
+    const mark = engine.block.create('graphic');
+    engine.block.setShape(mark, engine.block.createShape('rect'));
+    const redFill = engine.block.createFill('color');
+    engine.block.setColor(redFill, 'fill/color/value', {
+      r: 1.0,
+      g: 0.0,
+      b: 0.0,
+      a: 1.0
     });
+    engine.block.setFill(mark, redFill);
+    engine.block.setWidth(mark, markSize);
+    engine.block.setHeight(mark, markSize);
+    engine.block.setPositionX(mark, pos.x);
+    engine.block.setPositionY(mark, pos.y);
+    engine.block.appendChild(page, mark);
+  });
+
+  // Export with red color masked - removes registration marks
+  const [maskedImage1, alphaMask1] = await engine.block.exportWithColorMask(
+    page,
+    1.0, // Red component (0.0-1.0)
+    0.0, // Green component
+    0.0, // Blue component (RGB: pure red)
+    { mimeType: 'image/png' }
+  );
+
+  // Save both files to the file system
+  const buffer1 = Buffer.from(await maskedImage1.arrayBuffer());
+  writeFileSync(`${outputDir}/example1-masked.png`, buffer1);
+  const maskBuffer1 = Buffer.from(await alphaMask1.arrayBuffer());
+  writeFileSync(`${outputDir}/example1-mask.png`, maskBuffer1);
+
+  // Convert RGB values from 0-255 to 0.0-1.0 range
+  // Clear previous marks for new example
+  const allBlocks = engine.block.findByType('graphic');
+  allBlocks.forEach((block) => {
+    if (block !== imageBlock) {
+      engine.block.destroy(block);
+    }
+  });
 
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
+  // RGB values in 0-255 range
+  const rgb255 = { r: 255, g: 128, b: 64 };
+
+  // Convert to 0.0-1.0 range
+  const rgb01 = {
+    r: rgb255.r / 255, // 1.0
+    g: rgb255.g / 255, // 0.502
+    b: rgb255.b / 255 // 0.251
+  };
+
+  // Add custom color marks
+  markPositions.forEach((pos) => {
+    const mark = engine.block.create('graphic');
+    engine.block.setShape(mark, engine.block.createShape('rect'));
+    const customFill = engine.block.createFill('color');
+    engine.block.setColor(customFill, 'fill/color/value', {
+      r: rgb01.r,
+      g: rgb01.g,
+      b: rgb01.b,
+      a: 1.0
+    });
+    engine.block.setFill(mark, customFill);
+    engine.block.setWidth(mark, markSize);
+    engine.block.setHeight(mark, markSize);
+    engine.block.setPositionX(mark, pos.x);
+    engine.block.setPositionY(mark, pos.y);
+    engine.block.appendChild(page, mark);
+  });
 
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
+  // Export with custom color masked
+  const [maskedImage2, alphaMask2] = await engine.block.exportWithColorMask(
+    page,
+    rgb01.r,
+    rgb01.g,
+    rgb01.b,
+    { mimeType: 'image/png' }
+  );
 
-    const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+  const buffer2 = Buffer.from(await maskedImage2.arrayBuffer());
+  writeFileSync(`${outputDir}/example2-masked.png`, buffer2);
+  const maskBuffer2 = Buffer.from(await alphaMask2.arrayBuffer());
+  writeFileSync(`${outputDir}/example2-mask.png`, maskBuffer2);
+  // Export with specific format options (compression, size)
+  // Clear previous marks
+  const blocks2 = engine.block.findByType('graphic');
+  blocks2.forEach((block) => {
+    if (block !== imageBlock) {
+      engine.block.destroy(block);
+    }
+  });
 
-    // Create a single image with registration marks
-    const imageBlock = await engine.block.addImage(imageUri, {
-      size: { width: pageWidth * 0.8, height: pageHeight * 0.8 }
+  // Add magenta marks
+  markPositions.forEach((pos) => {
+    const mark = engine.block.create('graphic');
+    engine.block.setShape(mark, engine.block.createShape('rect'));
+    const magentaFill = engine.block.createFill('color');
+    engine.block.setColor(magentaFill, 'fill/color/value', {
+      r: 1.0,
+      g: 0.0,
+      b: 1.0,
+      a: 1.0
     });
-    engine.block.appendChild(page, imageBlock);
-
-    // Center the image on the page
-    const imageWidth = engine.block.getWidth(imageBlock);
-    const imageHeight = engine.block.getHeight(imageBlock);
-    engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2);
-    engine.block.setPositionY(imageBlock, (pageHeight - imageHeight) / 2);
-
-    // Add registration marks at the corners (pure red for demonstration)
-    const markSize = 30;
-    const imageX = engine.block.getPositionX(imageBlock);
-    const imageY = engine.block.getPositionY(imageBlock);
-
-    const markPositions = [
-      { x: imageX - markSize - 10, y: imageY - markSize - 10 }, // Top-left
-      { x: imageX + imageWidth + 10, y: imageY - markSize - 10 }, // Top-right
-      { x: imageX - markSize - 10, y: imageY + imageHeight + 10 }, // Bottom-left
-      { x: imageX + imageWidth + 10, y: imageY + imageHeight + 10 } // Bottom-right
-    ];
-
-    markPositions.forEach((pos) => {
-      const mark = engine.block.create('//ly.img.ubq/graphic');
-      engine.block.setShape(
-        mark,
-        engine.block.createShape('//ly.img.ubq/shape/rect')
-      );
-      const redFill = engine.block.createFill('//ly.img.ubq/fill/color');
-      engine.block.setColor(redFill, 'fill/color/value', {
-        r: 1.0,
-        g: 0.0,
-        b: 0.0,
-        a: 1.0
-      });
-      engine.block.setFill(mark, redFill);
-      engine.block.setWidth(mark, markSize);
-      engine.block.setHeight(mark, markSize);
-      engine.block.setPositionX(mark, pos.x);
-      engine.block.setPositionY(mark, pos.y);
-      engine.block.appendChild(page, mark);
+    engine.block.setFill(mark, magentaFill);
+    engine.block.setWidth(mark, markSize);
+    engine.block.setHeight(mark, markSize);
+    engine.block.setPositionX(mark, pos.x);
+    engine.block.setPositionY(mark, pos.y);
+    engine.block.appendChild(page, mark);
+  });
+
+  // Export with format options
+  const [maskedImage3, alphaMask3] = await engine.block.exportWithColorMask(
+    page,
+    1.0,
+    0.0,
+    1.0, // Magenta
+    {
+      mimeType: 'image/png',
+      pngCompressionLevel: 9, // Maximum compression
+      targetWidth: 400,
+      targetHeight: 300
+    }
+  );
+
+  const buffer3 = Buffer.from(await maskedImage3.arrayBuffer());
+  writeFileSync(`${outputDir}/example3-masked.png`, buffer3);
+  const maskBuffer3 = Buffer.from(await alphaMask3.arrayBuffer());
+  writeFileSync(`${outputDir}/example3-mask.png`, maskBuffer3);
+  // Demonstrate saving both masked image and alpha mask
+  const blocks3 = engine.block.findByType('graphic');
+  blocks3.forEach((block) => {
+    if (block !== imageBlock) {
+      engine.block.destroy(block);
+    }
+  });
+
+  // Add cyan marks
+  markPositions.forEach((pos) => {
+    const mark = engine.block.create('graphic');
+    engine.block.setShape(mark, engine.block.createShape('rect'));
+    const cyanFill = engine.block.createFill('color');
+    engine.block.setColor(cyanFill, 'fill/color/value', {
+      r: 0.0,
+      g: 1.0,
+      b: 1.0,
+      a: 1.0
     });
+    engine.block.setFill(mark, cyanFill);
+    engine.block.setWidth(mark, markSize);
+    engine.block.setHeight(mark, markSize);
+    engine.block.setPositionX(mark, pos.x);
+    engine.block.setPositionY(mark, pos.y);
+    engine.block.appendChild(page, mark);
+  });
+
+  // Export and save both files
+  const [maskedImage, alphaMask] = await engine.block.exportWithColorMask(
+    page,
+    0.0,
+    1.0,
+    1.0, // Cyan
+    { mimeType: 'image/png' }
+  );
+
+  // Save masked image
+  const maskedBuffer = Buffer.from(await maskedImage.arrayBuffer());
+  writeFileSync(`${outputDir}/saved-masked.png`, maskedBuffer);
+
+  // Save alpha mask
+  const maskBuffer = Buffer.from(await alphaMask.arrayBuffer());
+  writeFileSync(`${outputDir}/saved-mask.png`, maskBuffer);
+
+  // eslint-disable-next-line no-console
+  console.log('✓ Saved masked image and alpha mask to output/');
+  // Export different block types with color masking
+  const blocks4 = engine.block.findByType('graphic');
+  blocks4.forEach((block) => {
+    if (block !== imageBlock) {
+      engine.block.destroy(block);
+    }
+  });
+
+  // Create a group of blocks with green element
+  const greenRect = engine.block.create('graphic');
+  engine.block.setShape(greenRect, engine.block.createShape('rect'));
+  const greenFill = engine.block.createFill('color');
+  engine.block.setColor(greenFill, 'fill/color/value', {
+    r: 0.0,
+    g: 1.0,
+    b: 0.0,
+    a: 1.0
+  });
+  engine.block.setFill(greenRect, greenFill);
+  engine.block.setWidth(greenRect, 200);
+  engine.block.setHeight(greenRect, 200);
+  engine.block.setPositionX(greenRect, (pageWidth - 200) / 2);
+  engine.block.setPositionY(greenRect, (pageHeight - 200) / 2);
+  engine.block.appendChild(page, greenRect);
+
+  // Group the image and rectangle
+  const group = engine.block.group([imageBlock, greenRect]);
+
+  // Export the entire group with green masked
+  const [groupMasked, groupMask] = await engine.block.exportWithColorMask(
+    group,
+    0.0,
+    1.0,
+    0.0, // Green
+    { mimeType: 'image/png' }
+  );
 
-    // Override the default image export action to use color mask export
-    cesdk.actions.register('exportDesign', async () => {
-      const currentPage = engine.scene.getCurrentPage();
-      if (!currentPage) return;
-
-      // Export with color mask - removes pure red pixels (registration marks)
-      const [maskedImage, alphaMask] = await engine.block.exportWithColorMask(
-        currentPage,
-        1.0, // Red component
-        0.0, // Green component
-        0.0, // Blue component (RGB: pure red)
-        { mimeType: 'image/png' }
-      );
-
-      // Download masked image using CE.SDK utils
-      await cesdk.utils.downloadFile(maskedImage, 'image/png');
-
-      // Download alpha mask
-      await cesdk.utils.downloadFile(alphaMask, 'image/png');
-
-      console.log('Color mask export completed:', {
-        maskedSize: maskedImage.size,
-        maskSize: alphaMask.size
-      });
+  const groupBuffer = Buffer.from(await groupMasked.arrayBuffer());
+  writeFileSync(`${outputDir}/group-masked.png`, groupBuffer);
+  const groupMaskBuffer = Buffer.from(await groupMask.arrayBuffer());
+  writeFileSync(`${outputDir}/group-mask.png`, groupMaskBuffer);
+  // Use case: Remove registration marks for print workflows
+  engine.block.ungroup(group);
+  engine.block.destroy(greenRect);
+
+  // Add red registration marks for print workflow example
+  markPositions.forEach((pos) => {
+    const mark = engine.block.create('graphic');
+    engine.block.setShape(mark, engine.block.createShape('rect'));
+    const markFill = engine.block.createFill('color');
+    engine.block.setColor(markFill, 'fill/color/value', {
+      r: 1.0,
+      g: 0.0,
+      b: 0.0,
+      a: 1.0
     });
+    engine.block.setFill(mark, markFill);
+    engine.block.setWidth(mark, markSize);
+    engine.block.setHeight(mark, markSize);
+    engine.block.setPositionX(mark, pos.x);
+    engine.block.setPositionY(mark, pos.y);
+    engine.block.appendChild(page, mark);
+  });
 
-    // Add export button to navigation bar
-    cesdk.ui.insertOrderComponent(
-      { in: 'ly.img.navigation.bar', position: 'end' },
-      {
-        id: 'ly.img.actions.navigationBar',
-        children: ['ly.img.exportImage.navigationBar']
-      }
-    );
-
-    // Log completion
-    console.log('Export with Color Mask example loaded successfully');
-    console.log(
-      'Click the export button in the navigation bar to export with color mask'
-    );
-  }
-}
+  // Export with registration marks removed
+  const [printReady, registrationMask] = await engine.block.exportWithColorMask(
+    page,
+    1.0,
+    0.0,
+    0.0, // Remove pure red
+    {
+      mimeType: 'image/png',
+      pngCompressionLevel: 0 // Fast export for print
+    }
+  );
+
+  const printBuffer = Buffer.from(await printReady.arrayBuffer());
+  writeFileSync(`${outputDir}/print-ready.png`, printBuffer);
+  const regMaskBuffer = Buffer.from(await registrationMask.arrayBuffer());
+  writeFileSync(`${outputDir}/registration-mask.png`, regMaskBuffer);
 
-export default Example;
+  // eslint-disable-next-line no-console
+  console.log('✓ Print-ready export with registration marks removed');
+
+  // eslint-disable-next-line no-console
+  console.log('✓ Exported all color mask examples to output/');
+} finally {
+  // Always dispose the engine to free resources
+  engine.dispose();
+}
 ```
 
-Color mask exports work through exact RGB color matching—pixels that precisely match your specified color values (0.0-1.0 range) are removed. This is useful for print workflows (removing registration marks), transparency creation (removing background colors), or generating alpha masks for compositing tools.
+Color mask exports work through exact RGB color matching—pixels that precisely match your specified color values (0.0-1.0 range) are removed. This is useful for print workflows (removing registration marks), batch processing (converting background colors to transparency), or generating alpha masks for compositing pipelines.
 
 ## Exporting with Color Masks
 
 We export blocks with color masking using the `exportWithColorMask` method. This method removes specific RGB colors from the rendered output and generates both a masked image and an alpha mask.
 
 ```typescript highlight-export-with-color-mask
-// Export with color mask - removes pure red pixels (registration marks)
-const [maskedImage, alphaMask] = await engine.block.exportWithColorMask(
-  currentPage,
-  1.0, // Red component
+// Export with red color masked - removes registration marks
+const [maskedImage1, alphaMask1] = await engine.block.exportWithColorMask(
+  page,
+  1.0, // Red component (0.0-1.0)
   0.0, // Green component
   0.0, // Blue component (RGB: pure red)
   { mimeType: 'image/png' }
@@ -203,7 +375,7 @@ The method accepts the block to export, three RGB color components (0.0-1.0 rang
 
 The export operation returns a Promise that resolves to an array containing two Blobs. The first Blob is the masked image with transparency applied where the specified color was found. The second Blob is the alpha mask—a black and white image showing which pixels were removed (black) and which remained (white).
 
-We then download both files using `cesdk.utils.downloadFile()`, which triggers browser downloads with appropriate file naming.
+We then convert both Blobs to buffers and save them to the file system using Node.js `writeFileSync()`.
 
 ### Specifying RGB Color Values
 
@@ -218,61 +390,45 @@ When converting from standard 0-255 RGB values, divide each component by 255. Fo
 
 ## How to Export with Color Masks
 
-We override the default export action to apply color masking when users click the export button. This integrates color mask functionality into your editor's workflow without requiring additional UI.
+We convert the exported Blobs to buffers and save both the masked image and alpha mask files to the file system. This allows you to use the files in automated workflows or send them to print services.
 
-```typescript highlight-register-export-action
-// Override the default image export action to use color mask export
-cesdk.actions.register('exportDesign', async () => {
-  const currentPage = engine.scene.getCurrentPage();
-  if (!currentPage) return;
-
-  // Export with color mask - removes pure red pixels (registration marks)
-  const [maskedImage, alphaMask] = await engine.block.exportWithColorMask(
-    currentPage,
-    1.0, // Red component
+```typescript highlight-save-export-files
+  // Export with red color masked - removes registration marks
+  const [maskedImage1, alphaMask1] = await engine.block.exportWithColorMask(
+    page,
+    1.0, // Red component (0.0-1.0)
     0.0, // Green component
     0.0, // Blue component (RGB: pure red)
     { mimeType: 'image/png' }
   );
 
-  // Download masked image using CE.SDK utils
-  await cesdk.utils.downloadFile(maskedImage, 'image/png');
-
-  // Download alpha mask
-  await cesdk.utils.downloadFile(alphaMask, 'image/png');
-
-  console.log('Color mask export completed:', {
-    maskedSize: maskedImage.size,
-    maskSize: alphaMask.size
-  });
-});
+  // Save both files to the file system
+  const buffer1 = Buffer.from(await maskedImage1.arrayBuffer());
+  writeFileSync(`${outputDir}/example1-masked.png`, buffer1);
+  const maskBuffer1 = Buffer.from(await alphaMask1.arrayBuffer());
+  writeFileSync(`${outputDir}/example1-mask.png`, maskBuffer1);
 ```
 
-The custom action registers as `'exportDesign'`, replacing the default export behavior. When triggered, it exports the current page with pure red `(1.0, 0.0, 0.0)` as the mask color, then downloads both the masked image and alpha mask files using `cesdk.utils.downloadFile()`.
+The masked image is print-ready with the specified color removed. The alpha mask shows exactly where pixels were removed, useful for verification or compositing in external applications.
 
 ## API Reference
 
-| Method                               | Description                                                                             |
-| ------------------------------------ | --------------------------------------------------------------------------------------- |
-| `cesdk.actions.register()`           | Registers a custom action that can be triggered by UI elements                          |
-| `cesdk.ui.insertOrderComponent()`    | Adds UI components to the editor's navigation bar                                       |
-| `cesdk.utils.downloadFile()`         | Triggers a browser download for a file blob                                             |
-| `engine.scene.getCurrentPage()`      | Gets the currently active page in the scene                                             |
+| Method                               | Description                                               |
+| ------------------------------------ | --------------------------------------------------------- |
 | `engine.block.exportWithColorMask()` | Exports a block with specific RGB color removed, generating masked image and alpha mask |
-| `engine.block.addImage()`            | Adds an image block to the scene                                                        |
-| `engine.block.create()`              | Creates a new block of the specified type                                               |
-| `engine.block.setShape()`            | Sets the shape for a graphic block                                                      |
-| `engine.block.createShape()`         | Creates a shape definition for graphic blocks                                           |
-| `engine.block.createFill()`          | Creates a fill definition for blocks                                                    |
-| `engine.block.setColor()`            | Sets the color value for a fill                                                         |
-| `engine.block.setFill()`             | Applies a fill to a block                                                               |
-| `engine.block.appendChild()`         | Adds a block as a child of another block                                                |
+| `engine.block.export()`              | Exports a block without color masking                     |
+| `engine.scene.getCurrentPage()`      | Gets the currently active page in the scene               |
+| `engine.block.create()`              | Creates a new block of the specified type                 |
+| `engine.block.createFill()`          | Creates a fill definition for blocks                      |
+| `engine.block.setColor()`            | Sets the color value for a fill                           |
+
+
 
 ---
 
 ## 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