@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/fills/color.md

@@ -1,4 +1,4 @@
-> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Fills](./fills.md) > [Solid Color](./fills/color.md)
 
@@ -7,188 +7,87 @@
 Apply uniform solid colors to shapes, text, and design blocks using CE.SDK's
 comprehensive color fill system with support for multiple color spaces.
 
-![Color Fills example showing various colored shapes with RGB, CMYK, and Spot Colors](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 15 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-fills-color-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-fills-color-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-fills-color-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-color-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-fills-color-server-js)
 
 Color fills are one of the fundamental fill types in CE.SDK, allowing you to paint design blocks with solid, uniform colors. Unlike gradient fills that transition between colors or image fills that display photo content, color fills apply a single color across the entire block. The color fill system supports multiple color spaces including RGB for screen display, CMYK for print workflows, and Spot Colors for brand consistency.
 
-```typescript file=@cesdk_web_examples/guides-fills-color-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';
-import { calculateGridLayout } from './utils';
-
-/**
- * CE.SDK Plugin: Color Fills Guide
- *
- * This example demonstrates:
- * - Creating and applying color fills
- * - Working with RGB, CMYK, and Spot Colors
- * - Managing fill properties
- * - Enabling/disabling fills
- * - Sharing fills between blocks
- */
-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');
-    }
+```typescript file=@cesdk_web_examples/guides-fills-color-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
 
-    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());
-
-    // Create a design scene using CE.SDK cesdk method
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 600, unit: 'Pixel' }
-    });
+config();
 
-    const engine = cesdk.engine;
+async function main() {
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE,
+  });
 
-    // Get the page
-    const pages = engine.block.findByType('page');
-    const page = pages[0];
-    if (!page) {
-      throw new Error('No page found');
-    }
-
-    // Set page background to light gray
-    const pageFill = engine.block.getFill(page);
-    engine.block.setColor(pageFill, 'fill/color/value', {
-      r: 0.96,
-      g: 0.96,
-      b: 0.96,
-      a: 1.0
+  try {
+    // Create a scene with a page
+    engine.scene.create('VerticalStack', {
+      page: { size: { width: 800, height: 600 } }
     });
+    const page = engine.block.findByType('page')[0];
 
-    // Calculate responsive grid layout based on page dimensions
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-    const layout = calculateGridLayout(pageWidth, pageHeight, 12);
-    const { blockWidth, blockHeight, getPosition } = layout;
-
-    // Helper function to create a shape with a fill
-    const createShapeWithFill = (
-      shapeType: 'rect' | 'ellipse' | 'polygon' | 'star' = 'rect'
-    ): { block: number; fill: number } => {
-      const block = engine.block.create('graphic');
-      const shape = engine.block.createShape(shapeType);
-      engine.block.setShape(block, shape);
-
-      // Set size
-      engine.block.setWidth(block, blockWidth);
-      engine.block.setHeight(block, blockHeight);
-
-      // Append to page
-      engine.block.appendChild(page, block);
-
-      // Check if block supports fills
-      const canHaveFill = engine.block.supportsFill(block);
-      if (!canHaveFill) {
-        throw new Error('Block does not support fills');
-      }
+    // Check if block supports fills
+    const canHaveFill = engine.block.supportsFill(page);
+    if (!canHaveFill) {
+      throw new Error('Block does not support fills');
+    }
 
-      // Create a color fill
-      const colorFill = engine.block.createFill('color');
+    // Create a color fill
+    const colorFill = engine.block.createFill('color');
 
-      // Apply the fill to the block
-      engine.block.setFill(block, colorFill);
+    // Create a graphic block with a shape
+    const block = engine.block.create('graphic');
+    engine.block.setShape(block, engine.block.createShape('rect'));
+    engine.block.setWidth(block, 200);
+    engine.block.setHeight(block, 150);
+    engine.block.setPositionX(block, 50);
+    engine.block.setPositionY(block, 50);
+    engine.block.appendChild(page, block);
 
-      return { block, fill: colorFill };
-    };
+    // Apply the fill to the block
+    engine.block.setFill(block, colorFill);
 
-    // Example 1: RGB Color Fill (Red)
-    const { block: rgbBlock, fill: rgbFill } = createShapeWithFill();
-    engine.block.setColor(rgbFill, 'fill/color/value', {
+    // Set the fill color using RGB values
+    engine.block.setColor(colorFill, 'fill/color/value', {
       r: 1.0, // Red (0.0 to 1.0)
       g: 0.0, // Green
       b: 0.0, // Blue
       a: 1.0 // Alpha (opacity)
     });
 
-    // Example 2: RGB Color Fill (Green with transparency)
-    const { block: transparentBlock, fill: transparentFill } =
-      createShapeWithFill();
-    engine.block.setColor(transparentFill, 'fill/color/value', {
-      r: 0.0,
-      g: 0.8,
-      b: 0.2,
-      a: 0.5 // 50% opacity
-    });
-
-    // Example 3: RGB Color Fill (Blue)
-    const { block: blueBlock, fill: blueFill } = createShapeWithFill();
-    engine.block.setColor(blueFill, 'fill/color/value', {
-      r: 0.2,
-      g: 0.4,
-      b: 0.9,
-      a: 1.0
-    });
-
     // Get the current fill from a block
-    const currentFill = engine.block.getFill(blueBlock);
+    const currentFill = engine.block.getFill(block);
     const fillType = engine.block.getType(currentFill);
-    // eslint-disable-next-line no-console
     console.log('Fill type:', fillType); // '//ly.img.ubq/fill/color'
 
     // Get the current color value
-    const currentColor = engine.block.getColor(blueFill, 'fill/color/value');
-    // eslint-disable-next-line no-console
+    const currentColor = engine.block.getColor(colorFill, 'fill/color/value');
     console.log('Current color:', currentColor);
 
-    // Example 4: CMYK Color Fill (Magenta)
-    const { block: cmykBlock, fill: cmykFill } = createShapeWithFill('ellipse');
+    // Create a block with CMYK color for print workflows
+    const cmykBlock = engine.block.create('graphic');
+    engine.block.setShape(cmykBlock, engine.block.createShape('ellipse'));
+    engine.block.setWidth(cmykBlock, 150);
+    engine.block.setHeight(cmykBlock, 150);
+    engine.block.setPositionX(cmykBlock, 300);
+    engine.block.setPositionY(cmykBlock, 50);
+    engine.block.appendChild(page, cmykBlock);
+
+    const cmykFill = engine.block.createFill('color');
+    engine.block.setFill(cmykBlock, cmykFill);
     engine.block.setColor(cmykFill, 'fill/color/value', {
       c: 0.0, // Cyan (0.0 to 1.0)
       m: 1.0, // Magenta
@@ -197,45 +96,37 @@ class Example implements EditorPlugin {
       tint: 1.0 // Tint value (0.0 to 1.0)
     });
 
-    // Example 5: Print-Ready CMYK Color
-    const { block: printBlock, fill: printFill } =
-      createShapeWithFill('ellipse');
-    engine.block.setColor(printFill, 'fill/color/value', {
-      c: 0.0,
-      m: 0.85,
-      y: 1.0,
-      k: 0.0,
-      tint: 1.0
-    });
-
-    // Example 6: Spot Color (Brand Color)
     // First define the spot color globally
     engine.editor.setSpotColorRGB('BrandRed', 0.9, 0.1, 0.1);
-    engine.editor.setSpotColorRGB('BrandBlue', 0.1, 0.3, 0.9);
 
     // Then apply to fill
-    const { block: spotBlock, fill: spotFill } = createShapeWithFill('ellipse');
+    const spotBlock = engine.block.create('graphic');
+    engine.block.setShape(spotBlock, engine.block.createShape('ellipse'));
+    engine.block.setWidth(spotBlock, 150);
+    engine.block.setHeight(spotBlock, 150);
+    engine.block.setPositionX(spotBlock, 500);
+    engine.block.setPositionY(spotBlock, 50);
+    engine.block.appendChild(page, spotBlock);
+
+    const spotFill = engine.block.createFill('color');
+    engine.block.setFill(spotBlock, spotFill);
     engine.block.setColor(spotFill, 'fill/color/value', {
       name: 'BrandRed',
       tint: 1.0,
       externalReference: '' // Optional reference system
     });
 
-    // Example 7: Brand Color Application
-    // Apply brand color to multiple elements
-    const { block: headerBlock, fill: headerFill } =
-      createShapeWithFill('star');
-    const brandColor = { name: 'BrandBlue', tint: 1.0, externalReference: '' };
-    engine.block.setColor(headerFill, 'fill/color/value', brandColor);
-
-    // Example 8: Second element with same brand color
-    const { block: buttonBlock, fill: buttonFill } =
-      createShapeWithFill('star');
-    engine.block.setColor(buttonFill, 'fill/color/value', brandColor);
-
-    // Example 9: Toggle fill visibility
-    const { block: toggleBlock, fill: toggleFill } =
-      createShapeWithFill('star');
+    // Toggle fill visibility
+    const toggleBlock = engine.block.create('graphic');
+    engine.block.setShape(toggleBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(toggleBlock, 150);
+    engine.block.setHeight(toggleBlock, 100);
+    engine.block.setPositionX(toggleBlock, 50);
+    engine.block.setPositionY(toggleBlock, 250);
+    engine.block.appendChild(page, toggleBlock);
+
+    const toggleFill = engine.block.createFill('color');
+    engine.block.setFill(toggleBlock, toggleFill);
     engine.block.setColor(toggleFill, 'fill/color/value', {
       r: 1.0,
       g: 0.5,
@@ -245,22 +136,29 @@ class Example implements EditorPlugin {
 
     // Check fill state
     const isEnabled = engine.block.isFillEnabled(toggleBlock);
-    // eslint-disable-next-line no-console
     console.log('Fill enabled:', isEnabled); // true
 
-    // Example 10: Shared Fill
+    // Disable the fill (block becomes transparent)
+    engine.block.setFillEnabled(toggleBlock, false);
+
+    // Re-enable
+    engine.block.setFillEnabled(toggleBlock, true);
+
+    // Share a single fill instance between multiple blocks
     const block1 = engine.block.create('graphic');
-    const shape1 = engine.block.createShape('rect');
-    engine.block.setShape(block1, shape1);
-    engine.block.setWidth(block1, blockWidth);
-    engine.block.setHeight(block1, blockHeight / 2);
+    engine.block.setShape(block1, engine.block.createShape('rect'));
+    engine.block.setWidth(block1, 100);
+    engine.block.setHeight(block1, 100);
+    engine.block.setPositionX(block1, 250);
+    engine.block.setPositionY(block1, 250);
     engine.block.appendChild(page, block1);
 
     const block2 = engine.block.create('graphic');
-    const shape2 = engine.block.createShape('rect');
-    engine.block.setShape(block2, shape2);
-    engine.block.setWidth(block2, blockWidth);
-    engine.block.setHeight(block2, blockHeight / 2);
+    engine.block.setShape(block2, engine.block.createShape('rect'));
+    engine.block.setWidth(block2, 100);
+    engine.block.setHeight(block2, 100);
+    engine.block.setPositionX(block2, 370);
+    engine.block.setPositionY(block2, 250);
     engine.block.appendChild(page, block2);
 
     // Create one fill
@@ -276,59 +174,101 @@ class Example implements EditorPlugin {
     engine.block.setFill(block1, sharedFill);
     engine.block.setFill(block2, sharedFill);
 
-    // Example 11: Yellow Star
-    const { block: replaceBlock, fill: replaceFill } =
-      createShapeWithFill('star');
-    engine.block.setColor(replaceFill, 'fill/color/value', {
-      r: 0.9,
-      g: 0.9,
-      b: 0.1,
+    // Now changing the fill affects both blocks
+    engine.block.setColor(sharedFill, 'fill/color/value', {
+      r: 0.0,
+      g: 0.5,
+      b: 0.5,
       a: 1.0
     });
 
-    // Example 12: Color Space Conversion (for demonstration)
+    // Convert colors between different color spaces
     const rgbColor = { r: 1.0, g: 0.0, b: 0.0, a: 1.0 };
 
     // Convert to CMYK
     const cmykColor = engine.editor.convertColorToColorSpace(rgbColor, 'CMYK');
-    // eslint-disable-next-line no-console
     console.log('Converted CMYK color:', cmykColor);
 
-    // ===== Position all blocks in grid layout =====
-    const blocks = [
-      rgbBlock, // Position 0
-      transparentBlock, // Position 1
-      blueBlock, // Position 2
-      cmykBlock, // Position 3
-      printBlock, // Position 4
-      spotBlock, // Position 5
-      headerBlock, // Position 6
-      buttonBlock, // Position 7
-      toggleBlock, // Position 8
-      block1, // Position 9
-      block2, // Position 10
-      replaceBlock // Position 11
-    ];
-
-    blocks.forEach((block, index) => {
-      const pos = getPosition(index);
-      engine.block.setPositionX(block, pos.x);
-      engine.block.setPositionY(block, pos.y);
-    });
+    // Define and apply brand colors as spot colors
+    engine.editor.setSpotColorRGB('PrimaryBrand', 0.2, 0.4, 0.8);
+    engine.editor.setSpotColorRGB('SecondaryBrand', 0.9, 0.5, 0.1);
+
+    const brandBlock = engine.block.create('graphic');
+    engine.block.setShape(brandBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(brandBlock, 150);
+    engine.block.setHeight(brandBlock, 100);
+    engine.block.setPositionX(brandBlock, 500);
+    engine.block.setPositionY(brandBlock, 250);
+    engine.block.appendChild(page, brandBlock);
 
-    // Zoom to fit all content
-    await engine.scene.zoomToBlock(page, {
-      padding: {
-        left: 40,
-        top: 40,
-        right: 40,
-        bottom: 40
-      }
+    const brandFill = engine.block.createFill('color');
+    engine.block.setFill(brandBlock, brandFill);
+
+    // Apply brand color
+    const brandColor = {
+      name: 'PrimaryBrand',
+      tint: 1.0,
+      externalReference: ''
+    };
+    engine.block.setColor(brandFill, 'fill/color/value', brandColor);
+
+    // Create semi-transparent overlay
+    const transparentBlock = engine.block.create('graphic');
+    engine.block.setShape(transparentBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(transparentBlock, 150);
+    engine.block.setHeight(transparentBlock, 100);
+    engine.block.setPositionX(transparentBlock, 50);
+    engine.block.setPositionY(transparentBlock, 400);
+    engine.block.appendChild(page, transparentBlock);
+
+    const transparentFill = engine.block.createFill('color');
+    engine.block.setFill(transparentBlock, transparentFill);
+    engine.block.setColor(transparentFill, 'fill/color/value', {
+      r: 0.0,
+      g: 0.8,
+      b: 0.2,
+      a: 0.5 // 50% opacity
     });
+
+    // Use CMYK color space for print production
+    const printBlock = engine.block.create('graphic');
+    engine.block.setShape(printBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(printBlock, 150);
+    engine.block.setHeight(printBlock, 100);
+    engine.block.setPositionX(printBlock, 250);
+    engine.block.setPositionY(printBlock, 400);
+    engine.block.appendChild(page, printBlock);
+
+    const printFill = engine.block.createFill('color');
+    engine.block.setFill(printBlock, printFill);
+
+    const printColor = {
+      c: 0.0,
+      m: 0.85,
+      y: 1.0,
+      k: 0.0,
+      tint: 1.0
+    };
+    engine.block.setColor(printFill, 'fill/color/value', printColor);
+
+    // Export the result
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
+
+    // Ensure output directory exists
+    if (!existsSync('./output')) {
+      mkdirSync('./output');
+    }
+
+    writeFileSync('./output/solid-color-fills.png', buffer);
+    console.log('Exported to ./output/solid-color-fills.png');
+
+  } finally {
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
 This guide demonstrates how to create, apply, and modify color fills programmatically, work with different color spaces, and manage fill properties for various design elements.
@@ -360,11 +300,11 @@ Each color space serves specific use cases—use RGB for digital designs, CMYK f
 
 ### Verifying Block Compatibility
 
-Before applying color fills to a block, verify that the block type supports fills. Not all block types can have fills—for example, scene and page blocks typically don't support fills.
+Before applying color fills to a block, verify that the block type supports fills. Not all block types can have fills—for example, scene blocks typically don't support fills.
 
-```typescript highlight-check-fill-support
+```typescript highlight=highlight-check-fill-support
 // Check if block supports fills
-const canHaveFill = engine.block.supportsFill(block);
+const canHaveFill = engine.block.supportsFill(page);
 if (!canHaveFill) {
   throw new Error('Block does not support fills');
 }
@@ -378,31 +318,31 @@ Graphic blocks, shapes, and text blocks typically support fills. Always check `s
 
 Create a new color fill instance using the `createFill()` method with the type `'color'` or the full type name `'//ly.img.ubq/fill/color'`.
 
-```typescript highlight-create-fill
+```typescript highlight=highlight-create-fill
 // Create a color fill
 const colorFill = engine.block.createFill('color');
 ```
 
 The `createFill()` method returns a numeric fill ID. The fill exists independently until you attach it to a block using `setFill()`. If you create a fill but don't attach it to a block, you must destroy it manually to prevent memory leaks.
 
-### Default Color Fill Properties
-
-New color fills have default properties—typically white or transparent. You can discover all available properties using `findAllProperties()`:
-
-```typescript
-const properties = engine.block.findAllProperties(colorFillId);
-console.log(properties); // ["fill/color/value", "type"]
-```
-
 ## Applying Color Fills
 
 ### Setting a Fill on a Block
 
 Once you've created a color fill, attach it to a block using `setFill()`:
 
-```typescript highlight-apply-fill
-// Apply the fill to the block
-engine.block.setFill(block, colorFill);
+```typescript highlight=highlight-apply-fill
+    // Create a graphic block with a shape
+    const block = engine.block.create('graphic');
+    engine.block.setShape(block, engine.block.createShape('rect'));
+    engine.block.setWidth(block, 200);
+    engine.block.setHeight(block, 150);
+    engine.block.setPositionX(block, 50);
+    engine.block.setPositionY(block, 50);
+    engine.block.appendChild(page, block);
+
+    // Apply the fill to the block
+    engine.block.setFill(block, colorFill);
 ```
 
 This example creates a graphic block with a rectangle shape and applies the color fill to it. The block will now render with the fill's color.
@@ -411,11 +351,10 @@ This example creates a graphic block with a rectangle shape and applies the colo
 
 Retrieve the current fill attached to a block using `getFill()` and inspect its type:
 
-```typescript highlight-get-fill
+```typescript highlight=highlight-get-fill
 // Get the current fill from a block
-const currentFill = engine.block.getFill(blueBlock);
+const currentFill = engine.block.getFill(block);
 const fillType = engine.block.getType(currentFill);
-// eslint-disable-next-line no-console
 console.log('Fill type:', fillType); // '//ly.img.ubq/fill/color'
 ```
 
@@ -425,9 +364,9 @@ console.log('Fill type:', fillType); // '//ly.img.ubq/fill/color'
 
 Set the fill color using RGB values with the `setColor()` method. RGB values are normalized floats from 0.0 to 1.0, and the alpha channel controls opacity.
 
-```typescript highlight-set-rgb
-const { block: rgbBlock, fill: rgbFill } = createShapeWithFill();
-engine.block.setColor(rgbFill, 'fill/color/value', {
+```typescript highlight=highlight-set-rgb
+// Set the fill color using RGB values
+engine.block.setColor(colorFill, 'fill/color/value', {
   r: 1.0, // Red (0.0 to 1.0)
   g: 0.0, // Green
   b: 0.0, // Blue
@@ -441,15 +380,25 @@ The alpha channel (a) controls opacity: 1.0 is fully opaque, 0.0 is fully transp
 
 For print workflows, use CMYK color space with the `setColor()` method. CMYK values are also normalized from 0.0 to 1.0, and include a tint value for partial color application.
 
-```typescript highlight-set-cmyk
-const { block: cmykBlock, fill: cmykFill } = createShapeWithFill('ellipse');
-engine.block.setColor(cmykFill, 'fill/color/value', {
-  c: 0.0, // Cyan (0.0 to 1.0)
-  m: 1.0, // Magenta
-  y: 0.0, // Yellow
-  k: 0.0, // Key/Black
-  tint: 1.0 // Tint value (0.0 to 1.0)
-});
+```typescript highlight=highlight-set-cmyk
+    // Create a block with CMYK color for print workflows
+    const cmykBlock = engine.block.create('graphic');
+    engine.block.setShape(cmykBlock, engine.block.createShape('ellipse'));
+    engine.block.setWidth(cmykBlock, 150);
+    engine.block.setHeight(cmykBlock, 150);
+    engine.block.setPositionX(cmykBlock, 300);
+    engine.block.setPositionY(cmykBlock, 50);
+    engine.block.appendChild(page, cmykBlock);
+
+    const cmykFill = engine.block.createFill('color');
+    engine.block.setFill(cmykBlock, cmykFill);
+    engine.block.setColor(cmykFill, 'fill/color/value', {
+      c: 0.0, // Cyan (0.0 to 1.0)
+      m: 1.0, // Magenta
+      y: 0.0, // Yellow
+      k: 0.0, // Key/Black
+      tint: 1.0 // Tint value (0.0 to 1.0)
+    });
 ```
 
 The tint value allows partial application of the color, useful for creating lighter variations without changing the base CMYK values.
@@ -458,18 +407,26 @@ The tint value allows partial application of the color, useful for creating ligh
 
 Spot colors are named colors that must be defined before use. They're ideal for maintaining brand consistency and can have both RGB and CMYK approximations for different output scenarios.
 
-```typescript highlight-set-spot
-// First define the spot color globally
-engine.editor.setSpotColorRGB('BrandRed', 0.9, 0.1, 0.1);
-engine.editor.setSpotColorRGB('BrandBlue', 0.1, 0.3, 0.9);
-
-// Then apply to fill
-const { block: spotBlock, fill: spotFill } = createShapeWithFill('ellipse');
-engine.block.setColor(spotFill, 'fill/color/value', {
-  name: 'BrandRed',
-  tint: 1.0,
-  externalReference: '' // Optional reference system
-});
+```typescript highlight=highlight-set-spot
+    // First define the spot color globally
+    engine.editor.setSpotColorRGB('BrandRed', 0.9, 0.1, 0.1);
+
+    // Then apply to fill
+    const spotBlock = engine.block.create('graphic');
+    engine.block.setShape(spotBlock, engine.block.createShape('ellipse'));
+    engine.block.setWidth(spotBlock, 150);
+    engine.block.setHeight(spotBlock, 150);
+    engine.block.setPositionX(spotBlock, 500);
+    engine.block.setPositionY(spotBlock, 50);
+    engine.block.appendChild(page, spotBlock);
+
+    const spotFill = engine.block.createFill('color');
+    engine.block.setFill(spotBlock, spotFill);
+    engine.block.setColor(spotFill, 'fill/color/value', {
+      name: 'BrandRed',
+      tint: 1.0,
+      externalReference: '' // Optional reference system
+    });
 ```
 
 First, define the spot color globally using `setSpotColorRGB()` or `setSpotColorCMYK()`, then apply it to your fill using the color name. The tint value controls intensity from 0.0 to 1.0.
@@ -478,10 +435,9 @@ First, define the spot color globally using `setSpotColorRGB()` or `setSpotColor
 
 Retrieve the current color value from a fill using `getColor()`:
 
-```typescript highlight-get-color
+```typescript highlight=highlight-get-color
 // Get the current color value
-const currentColor = engine.block.getColor(blueFill, 'fill/color/value');
-// eslint-disable-next-line no-console
+const currentColor = engine.block.getColor(colorFill, 'fill/color/value');
 console.log('Current color:', currentColor);
 ```
 
@@ -491,19 +447,34 @@ console.log('Current color:', currentColor);
 
 You can temporarily disable a fill without removing it from the block. This preserves all fill properties while making the block transparent:
 
-```typescript highlight-toggle-fill
-const { block: toggleBlock, fill: toggleFill } = createShapeWithFill('star');
-engine.block.setColor(toggleFill, 'fill/color/value', {
-  r: 1.0,
-  g: 0.5,
-  b: 0.0,
-  a: 1.0
-});
+```typescript highlight=highlight-toggle-fill
+    // Toggle fill visibility
+    const toggleBlock = engine.block.create('graphic');
+    engine.block.setShape(toggleBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(toggleBlock, 150);
+    engine.block.setHeight(toggleBlock, 100);
+    engine.block.setPositionX(toggleBlock, 50);
+    engine.block.setPositionY(toggleBlock, 250);
+    engine.block.appendChild(page, toggleBlock);
+
+    const toggleFill = engine.block.createFill('color');
+    engine.block.setFill(toggleBlock, toggleFill);
+    engine.block.setColor(toggleFill, 'fill/color/value', {
+      r: 1.0,
+      g: 0.5,
+      b: 0.0,
+      a: 1.0
+    });
 
-// Check fill state
-const isEnabled = engine.block.isFillEnabled(toggleBlock);
-// eslint-disable-next-line no-console
-console.log('Fill enabled:', isEnabled); // true
+    // Check fill state
+    const isEnabled = engine.block.isFillEnabled(toggleBlock);
+    console.log('Fill enabled:', isEnabled); // true
+
+    // Disable the fill (block becomes transparent)
+    engine.block.setFillEnabled(toggleBlock, false);
+
+    // Re-enable
+    engine.block.setFillEnabled(toggleBlock, true);
 ```
 
 Disabling fills is useful for creating stroke-only designs or for temporarily hiding fills during interactive editing sessions. The fill properties remain intact and can be re-enabled at any time.
@@ -514,33 +485,44 @@ Disabling fills is useful for creating stroke-only designs or for temporarily hi
 
 You can share a single fill instance between multiple blocks. Changes to the shared fill affect all blocks using it:
 
-```typescript highlight-share-fill
-const block1 = engine.block.create('graphic');
-const shape1 = engine.block.createShape('rect');
-engine.block.setShape(block1, shape1);
-engine.block.setWidth(block1, blockWidth);
-engine.block.setHeight(block1, blockHeight / 2);
-engine.block.appendChild(page, block1);
-
-const block2 = engine.block.create('graphic');
-const shape2 = engine.block.createShape('rect');
-engine.block.setShape(block2, shape2);
-engine.block.setWidth(block2, blockWidth);
-engine.block.setHeight(block2, blockHeight / 2);
-engine.block.appendChild(page, block2);
-
-// Create one fill
-const sharedFill = engine.block.createFill('color');
-engine.block.setColor(sharedFill, 'fill/color/value', {
-  r: 0.5,
-  g: 0.0,
-  b: 0.5,
-  a: 1.0
-});
+```typescript highlight=highlight-share-fill
+    // Share a single fill instance between multiple blocks
+    const block1 = engine.block.create('graphic');
+    engine.block.setShape(block1, engine.block.createShape('rect'));
+    engine.block.setWidth(block1, 100);
+    engine.block.setHeight(block1, 100);
+    engine.block.setPositionX(block1, 250);
+    engine.block.setPositionY(block1, 250);
+    engine.block.appendChild(page, block1);
+
+    const block2 = engine.block.create('graphic');
+    engine.block.setShape(block2, engine.block.createShape('rect'));
+    engine.block.setWidth(block2, 100);
+    engine.block.setHeight(block2, 100);
+    engine.block.setPositionX(block2, 370);
+    engine.block.setPositionY(block2, 250);
+    engine.block.appendChild(page, block2);
+
+    // Create one fill
+    const sharedFill = engine.block.createFill('color');
+    engine.block.setColor(sharedFill, 'fill/color/value', {
+      r: 0.5,
+      g: 0.0,
+      b: 0.5,
+      a: 1.0
+    });
 
-// Apply to both blocks
-engine.block.setFill(block1, sharedFill);
-engine.block.setFill(block2, sharedFill);
+    // Apply to both blocks
+    engine.block.setFill(block1, sharedFill);
+    engine.block.setFill(block2, sharedFill);
+
+    // Now changing the fill affects both blocks
+    engine.block.setColor(sharedFill, 'fill/color/value', {
+      r: 0.0,
+      g: 0.5,
+      b: 0.5,
+      a: 1.0
+    });
 ```
 
 With shared fills, modifying the fill's color updates all blocks simultaneously. The fill is only destroyed when the last block referencing it is destroyed.
@@ -549,13 +531,13 @@ With shared fills, modifying the fill's color updates all blocks simultaneously.
 
 Convert colors between different color spaces using `convertColorToColorSpace()`:
 
-```typescript highlight-convert-color
-const rgbColor = { r: 1.0, g: 0.0, b: 0.0, a: 1.0 };
+```typescript highlight=highlight-convert-color
+    // Convert colors between different color spaces
+    const rgbColor = { r: 1.0, g: 0.0, b: 0.0, a: 1.0 };
 
-// Convert to CMYK
-const cmykColor = engine.editor.convertColorToColorSpace(rgbColor, 'CMYK');
-// eslint-disable-next-line no-console
-console.log('Converted CMYK color:', cmykColor);
+    // Convert to CMYK
+    const cmykColor = engine.editor.convertColorToColorSpace(rgbColor, 'CMYK');
+    console.log('Converted CMYK color:', cmykColor);
 ```
 
 This is useful when you need to ensure color consistency across different output mediums (screen vs. print).
@@ -566,11 +548,29 @@ This is useful when you need to ensure color consistency across different output
 
 Define and apply brand colors as spot colors to maintain consistency across all design elements:
 
-```typescript highlight-brand-colors
-// Apply brand color to multiple elements
-const { block: headerBlock, fill: headerFill } = createShapeWithFill('star');
-const brandColor = { name: 'BrandBlue', tint: 1.0, externalReference: '' };
-engine.block.setColor(headerFill, 'fill/color/value', brandColor);
+```typescript highlight=highlight-brand-colors
+    // Define and apply brand colors as spot colors
+    engine.editor.setSpotColorRGB('PrimaryBrand', 0.2, 0.4, 0.8);
+    engine.editor.setSpotColorRGB('SecondaryBrand', 0.9, 0.5, 0.1);
+
+    const brandBlock = engine.block.create('graphic');
+    engine.block.setShape(brandBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(brandBlock, 150);
+    engine.block.setHeight(brandBlock, 100);
+    engine.block.setPositionX(brandBlock, 500);
+    engine.block.setPositionY(brandBlock, 250);
+    engine.block.appendChild(page, brandBlock);
+
+    const brandFill = engine.block.createFill('color');
+    engine.block.setFill(brandBlock, brandFill);
+
+    // Apply brand color
+    const brandColor = {
+      name: 'PrimaryBrand',
+      tint: 1.0,
+      externalReference: ''
+    };
+    engine.block.setColor(brandFill, 'fill/color/value', brandColor);
 ```
 
 Using spot colors ensures brand consistency and makes it easy to update all instances of a brand color by modifying the spot color definition.
@@ -579,30 +579,51 @@ Using spot colors ensures brand consistency and makes it easy to update all inst
 
 Create semi-transparent overlays and visual effects by adjusting the alpha channel:
 
-```typescript highlight-transparency
-const { block: transparentBlock, fill: transparentFill } =
-  createShapeWithFill();
-engine.block.setColor(transparentFill, 'fill/color/value', {
-  r: 0.0,
-  g: 0.8,
-  b: 0.2,
-  a: 0.5 // 50% opacity
-});
+```typescript highlight=highlight-transparency
+    // Create semi-transparent overlay
+    const transparentBlock = engine.block.create('graphic');
+    engine.block.setShape(transparentBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(transparentBlock, 150);
+    engine.block.setHeight(transparentBlock, 100);
+    engine.block.setPositionX(transparentBlock, 50);
+    engine.block.setPositionY(transparentBlock, 400);
+    engine.block.appendChild(page, transparentBlock);
+
+    const transparentFill = engine.block.createFill('color');
+    engine.block.setFill(transparentBlock, transparentFill);
+    engine.block.setColor(transparentFill, 'fill/color/value', {
+      r: 0.0,
+      g: 0.8,
+      b: 0.2,
+      a: 0.5 // 50% opacity
+    });
 ```
 
 ### Print-Ready Colors
 
 Use CMYK color space for designs destined for print production:
 
-```typescript highlight-print-colors
-const { block: printBlock, fill: printFill } = createShapeWithFill('ellipse');
-engine.block.setColor(printFill, 'fill/color/value', {
-  c: 0.0,
-  m: 0.85,
-  y: 1.0,
-  k: 0.0,
-  tint: 1.0
-});
+```typescript highlight=highlight-print-colors
+    // Use CMYK color space for print production
+    const printBlock = engine.block.create('graphic');
+    engine.block.setShape(printBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(printBlock, 150);
+    engine.block.setHeight(printBlock, 100);
+    engine.block.setPositionX(printBlock, 250);
+    engine.block.setPositionY(printBlock, 400);
+    engine.block.appendChild(page, printBlock);
+
+    const printFill = engine.block.createFill('color');
+    engine.block.setFill(printBlock, printFill);
+
+    const printColor = {
+      c: 0.0,
+      m: 0.85,
+      y: 1.0,
+      k: 0.0,
+      tint: 1.0
+    };
+    engine.block.setColor(printFill, 'fill/color/value', printColor);
 ```
 
 ## Troubleshooting
@@ -668,11 +689,13 @@ Now that you understand color fills, explore other fill types and color manageme
 - Review Apply Colors for color management across properties
 - Study Blocks Concept for understanding the block system
 
+
+
 ---
 
 ## 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