@imgly/codesign-mcp 0.1.5 → 0.1.6

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

@@ -1,127 +1,64 @@
-> 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) > [Image](./fills/image.md)
 
 ---
 
-Fill shapes, text, and design blocks with photos and images from URLs,
-uploads, or asset libraries using CE.SDK's versatile image fill system.
-
-![Image Fills example showing multiple images applied to design blocks with different fill modes](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Fill shapes, text, and design blocks with photos and images from URLs or data
+URIs using CE.SDK's versatile image fill system.
 
 > **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-image-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-fills-image-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-fills-image-browser/)
-
-Image fills paint design blocks with raster or vector image content, supporting various formats including PNG, JPEG, WebP, and SVG. You can load images from remote URLs, local files, data URIs, and asset libraries, with built-in support for responsive images through source sets and multiple content fill modes for flexible positioning.
-
-```typescript file=@cesdk_web_examples/guides-fills-image-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';
-
-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');
-    }
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-fills-image-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-fills-image-server-js)
 
-    // Fill features are enabled by default in CE.SDK
-    // You can check and control fill feature availability:
-    const isFillEnabled = cesdk.feature.isEnabled('ly.img.fill', {
-      engine: cesdk.engine
-    });
-    console.log('Fill feature enabled:', isFillEnabled);
-    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' }
-    });
+Image fills paint design blocks with raster or vector image content, supporting various formats including PNG, JPEG, WebP, and SVG. You can load images from remote URLs, data URIs, or file paths, with built-in support for responsive images through source sets and multiple content fill modes for flexible positioning.
 
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
+```typescript file=@cesdk_web_examples/guides-fills-image-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
 
-    // Calculate responsive grid layout for demonstrations
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-    const layout = calculateGridLayout(pageWidth, pageHeight, 7);
-    const { blockWidth, blockHeight, getPosition } = layout;
+config();
 
-    const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
-    const blockSize = { width: blockWidth, height: blockHeight };
+async function main() {
+  const engine = await CreativeEngine.init({
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+    // license: process.env.CESDK_LICENSE,
+  });
 
-    // ===== Section 1: Check Fill Support =====
-    // Check if a block supports fills before accessing fill APIs
+  try {
+    // Create a scene with a page
+    engine.scene.create('VerticalStack', {
+      page: { size: { width: 800, height: 600 } }
+    });
+    const page = engine.block.findByType('page')[0];
+
+    // Check if block supports fills before accessing fill APIs
     const testBlock = engine.block.create('graphic');
     const canHaveFill = engine.block.supportsFill(testBlock);
     console.log('Block supports fills:', canHaveFill);
     engine.block.destroy(testBlock);
 
-    // ===== Section 2: Create and Apply Image Fill =====
+    const imageUri = 'https://img.ly/static/ubq_samples/sample_1.jpg';
+
+    // ===== Section 1: Create Image Fill with Convenience API =====
     // Create a new image fill using the convenience API
     const coverImageBlock = await engine.block.addImage(imageUri, {
-      size: blockSize
+      size: { width: 200, height: 150 }
     });
     engine.block.appendChild(page, coverImageBlock);
 
     // Or create manually for more control
     const manualBlock = engine.block.create('graphic');
     engine.block.setShape(manualBlock, engine.block.createShape('rect'));
-    engine.block.setWidth(manualBlock, blockWidth);
-    engine.block.setHeight(manualBlock, blockHeight);
+    engine.block.setWidth(manualBlock, 200);
+    engine.block.setHeight(manualBlock, 150);
 
     const imageFill = engine.block.createFill('image');
     engine.block.setString(
@@ -137,12 +74,12 @@ class Example implements EditorPlugin {
     const fillType = engine.block.getType(currentFill);
     console.log('Fill type:', fillType); // '//ly.img.ubq/fill/image'
 
-    // ===== Section 3: Content Fill Modes =====
+    // ===== Section 2: Content Fill Modes =====
     // Cover mode: Fill entire block, may crop image
     const coverBlock = await engine.block.addImage(
       'https://img.ly/static/ubq_samples/sample_3.jpg',
       {
-        size: blockSize
+        size: { width: 200, height: 150 }
       }
     );
     engine.block.appendChild(page, coverBlock);
@@ -152,7 +89,7 @@ class Example implements EditorPlugin {
     const containBlock = await engine.block.addImage(
       'https://img.ly/static/ubq_samples/sample_4.jpg',
       {
-        size: blockSize
+        size: { width: 200, height: 150 }
       }
     );
     engine.block.appendChild(page, containBlock);
@@ -162,12 +99,12 @@ class Example implements EditorPlugin {
     const currentMode = engine.block.getEnum(containBlock, 'contentFill/mode');
     console.log('Current fill mode:', currentMode);
 
-    // ===== Section 4: Source Sets (Responsive Images) =====
+    // ===== Section 3: Source Sets (Responsive Images) =====
     // Use source sets for responsive images
     const responsiveBlock = engine.block.create('graphic');
     engine.block.setShape(responsiveBlock, engine.block.createShape('rect'));
-    engine.block.setWidth(responsiveBlock, blockWidth);
-    engine.block.setHeight(responsiveBlock, blockHeight);
+    engine.block.setWidth(responsiveBlock, 200);
+    engine.block.setHeight(responsiveBlock, 150);
 
     const responsiveFill = engine.block.createFill('image');
     engine.block.setSourceSet(responsiveFill, 'fill/image/sourceSet', [
@@ -197,30 +134,36 @@ class Example implements EditorPlugin {
     );
     console.log('Source set entries:', sourceSet.length);
 
-    // ===== Section 5: Data URI / Base64 Images =====
-    // Use data URI for embedded images (small SVG example)
-    const svgContent = `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="50" cy="50" r="40" fill="#4CAF50"/>
-        <text x="50" y="55" text-anchor="middle" fill="white" font-size="20" font-weight="bold">SVG</text>
-      </svg>`;
-    const svgDataUri = `data:image/svg+xml;base64,${btoa(svgContent)}`;
+    // ===== Section 4: Data URI / Base64 Images =====
+    // Use data URI for embedded images
+    // Fetch an image and convert to base64 data URI
+    const imageResponse = await fetch(
+      'https://img.ly/static/ubq_samples/thumbnails/sample_1.jpg'
+    );
+    const imageBuffer = Buffer.from(await imageResponse.arrayBuffer());
+    const base64Image = imageBuffer.toString('base64');
+    const imageDataUri = `data:image/jpeg;base64,${base64Image}`;
 
     const dataUriBlock = engine.block.create('graphic');
     engine.block.setShape(dataUriBlock, engine.block.createShape('rect'));
-    engine.block.setWidth(dataUriBlock, blockWidth);
-    engine.block.setHeight(dataUriBlock, blockHeight);
+    engine.block.setWidth(dataUriBlock, 200);
+    engine.block.setHeight(dataUriBlock, 150);
 
     const dataUriFill = engine.block.createFill('image');
-    engine.block.setString(dataUriFill, 'fill/image/imageFileURI', svgDataUri);
+    engine.block.setString(
+      dataUriFill,
+      'fill/image/imageFileURI',
+      imageDataUri
+    );
     engine.block.setFill(dataUriBlock, dataUriFill);
     engine.block.appendChild(page, dataUriBlock);
 
-    // ===== Section 6: Opacity =====
+    // ===== Section 5: Opacity =====
     // Control opacity for transparency effects
     const opacityBlock = await engine.block.addImage(
       'https://img.ly/static/ubq_samples/sample_6.jpg',
       {
-        size: blockSize
+        size: { width: 200, height: 150 }
       }
     );
     engine.block.appendChild(page, opacityBlock);
@@ -237,18 +180,38 @@ class Example implements EditorPlugin {
       opacityBlock // Position 6
     ];
 
+    // Position blocks in a grid layout
+    const cols = 3;
+    const spacing = 10;
+    const margin = 50;
+    const blockWidth = 200;
+    const blockHeight = 150;
+
     blocks.forEach((block, index) => {
-      const pos = getPosition(index);
-      engine.block.setPositionX(block, pos.x);
-      engine.block.setPositionY(block, pos.y);
+      const col = index % cols;
+      const row = Math.floor(index / cols);
+      engine.block.setPositionX(block, margin + col * (blockWidth + spacing));
+      engine.block.setPositionY(block, margin + row * (blockHeight + spacing));
     });
 
-    // Zoom to show all content
-    await engine.scene.zoomToBlock(page);
+    // 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/image-fills.png', buffer);
+    console.log('Exported to ./output/image-fills.png');
+
+  } finally {
+    engine.dispose();
   }
 }
 
-export default Example;
+main().catch(console.error);
 ```
 
 This guide covers how to create and apply image fills programmatically, configure content fill modes, work with responsive images, and load images from different sources.
@@ -263,8 +226,8 @@ CE.SDK supports common image formats including PNG, JPEG, JPG, GIF, WebP, SVG, a
 
 Before working with fills, we should verify that a block supports fill operations. Not all blocks in CE.SDK can have fills—for example, scenes and pages typically don't support fills, while graphic blocks, shapes, and text blocks do.
 
-```typescript highlight-check-fill-support
-// Check if a block supports fills before accessing fill APIs
+```typescript highlight=highlight-check-fill-support
+// Check if block supports fills before accessing fill APIs
 const testBlock = engine.block.create('graphic');
 const canHaveFill = engine.block.supportsFill(testBlock);
 console.log('Block supports fills:', canHaveFill);
@@ -281,10 +244,10 @@ CE.SDK provides two approaches for creating image fills: a convenience API for q
 
 The fastest way to create a block with an image fill is using the `addImage()` method, which creates a graphic block, configures the image fill, and adds it to the scene in one operation:
 
-```typescript highlight-create-image-fill
+```typescript highlight=highlight-create-image-fill
 // Create a new image fill using the convenience API
 const coverImageBlock = await engine.block.addImage(imageUri, {
-  size: blockSize
+  size: { width: 200, height: 150 }
 });
 engine.block.appendChild(page, coverImageBlock);
 ```
@@ -295,21 +258,21 @@ This convenience method handles all the underlying setup automatically, includin
 
 For more control over the fill configuration or to apply fills to existing blocks, you can create fills manually:
 
-```typescript highlight-manual-fill-creation
-// Or create manually for more control
-const manualBlock = engine.block.create('graphic');
-engine.block.setShape(manualBlock, engine.block.createShape('rect'));
-engine.block.setWidth(manualBlock, blockWidth);
-engine.block.setHeight(manualBlock, blockHeight);
-
-const imageFill = engine.block.createFill('image');
-engine.block.setString(
-  imageFill,
-  'fill/image/imageFileURI',
-  'https://img.ly/static/ubq_samples/sample_2.jpg'
-);
-engine.block.setFill(manualBlock, imageFill);
-engine.block.appendChild(page, manualBlock);
+```typescript highlight=highlight-manual-fill-creation
+    // Or create manually for more control
+    const manualBlock = engine.block.create('graphic');
+    engine.block.setShape(manualBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(manualBlock, 200);
+    engine.block.setHeight(manualBlock, 150);
+
+    const imageFill = engine.block.createFill('image');
+    engine.block.setString(
+      imageFill,
+      'fill/image/imageFileURI',
+      'https://img.ly/static/ubq_samples/sample_2.jpg'
+    );
+    engine.block.setFill(manualBlock, imageFill);
+    engine.block.appendChild(page, manualBlock);
 ```
 
 When creating fills manually, 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 avoid memory leaks.
@@ -318,7 +281,7 @@ When creating fills manually, the fill exists independently until you attach it
 
 You can retrieve the fill from any block and inspect its type to verify it's an image fill:
 
-```typescript highlight-get-current-fill
+```typescript highlight=highlight-get-current-fill
 // Get the current fill from a block
 const currentFill = engine.block.getFill(coverImageBlock);
 const fillType = engine.block.getType(currentFill);
@@ -335,12 +298,12 @@ Content fill modes control how images scale and position within their containing
 
 Cover mode ensures the image fills the entire block while maintaining its aspect ratio. Parts of the image may be cropped if the aspect ratios don't match, but there will never be empty space in the block:
 
-```typescript highlight-fill-mode-cover
+```typescript highlight=highlight-fill-mode-cover
 // Cover mode: Fill entire block, may crop image
 const coverBlock = await engine.block.addImage(
   'https://img.ly/static/ubq_samples/sample_3.jpg',
   {
-    size: blockSize
+    size: { width: 200, height: 150 }
   }
 );
 engine.block.appendChild(page, coverBlock);
@@ -353,12 +316,12 @@ Cover mode is ideal for backgrounds, hero images, and photo frames where you wan
 
 Contain mode fits the entire image within the block while maintaining its aspect ratio. This may leave empty space if the aspect ratios don't match, but the entire image will always be visible:
 
-```typescript highlight-fill-mode-contain
+```typescript highlight=highlight-fill-mode-contain
 // Contain mode: Fit entire image, may leave empty space
 const containBlock = await engine.block.addImage(
   'https://img.ly/static/ubq_samples/sample_4.jpg',
   {
-    size: blockSize
+    size: { width: 200, height: 150 }
   }
 );
 engine.block.appendChild(page, containBlock);
@@ -371,7 +334,7 @@ Contain mode is best for logos, product images, and situations where preserving
 
 You can query the current fill mode to understand how the image is being displayed:
 
-```typescript highlight-get-fill-mode
+```typescript highlight=highlight-get-fill-mode
 // Get current fill mode
 const currentMode = engine.block.getEnum(containBlock, 'contentFill/mode');
 console.log('Current fill mode:', currentMode);
@@ -387,33 +350,33 @@ Source sets enable responsive images by providing multiple resolutions of the sa
 
 A source set is an array of image sources, each with a URI and dimensions:
 
-```typescript highlight-source-set
-// Use source sets for responsive images
-const responsiveBlock = engine.block.create('graphic');
-engine.block.setShape(responsiveBlock, engine.block.createShape('rect'));
-engine.block.setWidth(responsiveBlock, blockWidth);
-engine.block.setHeight(responsiveBlock, blockHeight);
+```typescript highlight=highlight-source-set
+    // Use source sets for responsive images
+    const responsiveBlock = engine.block.create('graphic');
+    engine.block.setShape(responsiveBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(responsiveBlock, 200);
+    engine.block.setHeight(responsiveBlock, 150);
 
-const responsiveFill = engine.block.createFill('image');
-engine.block.setSourceSet(responsiveFill, 'fill/image/sourceSet', [
-  {
-    uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
-    width: 512,
-    height: 341
-  },
-  {
-    uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
-    width: 1024,
-    height: 683
-  },
-  {
-    uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
-    width: 2048,
-    height: 1366
-  }
-]);
-engine.block.setFill(responsiveBlock, responsiveFill);
-engine.block.appendChild(page, responsiveBlock);
+    const responsiveFill = engine.block.createFill('image');
+    engine.block.setSourceSet(responsiveFill, 'fill/image/sourceSet', [
+      {
+        uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+        width: 512,
+        height: 341
+      },
+      {
+        uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+        width: 1024,
+        height: 683
+      },
+      {
+        uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+        width: 2048,
+        height: 1366
+      }
+    ]);
+    engine.block.setFill(responsiveBlock, responsiveFill);
+    engine.block.appendChild(page, responsiveBlock);
 ```
 
 Each entry in the source set specifies a URI and the image's width and height in pixels. The engine calculates the current drawing size and selects the source with the closest size that exceeds the required dimensions.
@@ -426,7 +389,7 @@ Each entry in the source set specifies a URI and the image's width and height in
 
 You can get the current source set from a fill to inspect or modify it:
 
-```typescript highlight-get-source-set
+```typescript highlight=highlight-get-source-set
 // Get current source set
 const sourceSet = engine.block.getSourceSet(
   responsiveFill,
@@ -443,23 +406,29 @@ CE.SDK's image fills support multiple image source types, giving you flexibility
 
 You can embed image data directly using data URIs, which is particularly useful for small images, icons, or dynamically generated graphics:
 
-```typescript highlight-data-uri
-// Use data URI for embedded images (small SVG example)
-const svgContent = `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="50" cy="50" r="40" fill="#4CAF50"/>
-        <text x="50" y="55" text-anchor="middle" fill="white" font-size="20" font-weight="bold">SVG</text>
-      </svg>`;
-const svgDataUri = `data:image/svg+xml;base64,${btoa(svgContent)}`;
-
-const dataUriBlock = engine.block.create('graphic');
-engine.block.setShape(dataUriBlock, engine.block.createShape('rect'));
-engine.block.setWidth(dataUriBlock, blockWidth);
-engine.block.setHeight(dataUriBlock, blockHeight);
-
-const dataUriFill = engine.block.createFill('image');
-engine.block.setString(dataUriFill, 'fill/image/imageFileURI', svgDataUri);
-engine.block.setFill(dataUriBlock, dataUriFill);
-engine.block.appendChild(page, dataUriBlock);
+```typescript highlight=highlight-data-uri
+    // Use data URI for embedded images
+    // Fetch an image and convert to base64 data URI
+    const imageResponse = await fetch(
+      'https://img.ly/static/ubq_samples/thumbnails/sample_1.jpg'
+    );
+    const imageBuffer = Buffer.from(await imageResponse.arrayBuffer());
+    const base64Image = imageBuffer.toString('base64');
+    const imageDataUri = `data:image/jpeg;base64,${base64Image}`;
+
+    const dataUriBlock = engine.block.create('graphic');
+    engine.block.setShape(dataUriBlock, engine.block.createShape('rect'));
+    engine.block.setWidth(dataUriBlock, 200);
+    engine.block.setHeight(dataUriBlock, 150);
+
+    const dataUriFill = engine.block.createFill('image');
+    engine.block.setString(
+      dataUriFill,
+      'fill/image/imageFileURI',
+      imageDataUri
+    );
+    engine.block.setFill(dataUriBlock, dataUriFill);
+    engine.block.appendChild(page, dataUriBlock);
 ```
 
 Data URIs embed the entire image within the URI string itself, eliminating the need for network requests. However, this increases the scene file size, so it's best reserved for smaller images or cases where you need guaranteed availability without network dependencies.
@@ -470,12 +439,12 @@ Data URIs embed the entire image within the URI string itself, eliminating the n
 
 You can control the overall opacity of blocks with image fills, affecting the entire block including its fill:
 
-```typescript highlight-opacity
+```typescript highlight=highlight-opacity
 // Control opacity for transparency effects
 const opacityBlock = await engine.block.addImage(
   'https://img.ly/static/ubq_samples/sample_6.jpg',
   {
-    size: blockSize
+    size: { width: 200, height: 150 }
   }
 );
 engine.block.appendChild(page, opacityBlock);
@@ -508,9 +477,9 @@ The opacity value ranges from 0 (fully transparent) to 1 (fully opaque). This af
 
 ### Image Fill Properties
 
-| Property                  | Type         | Description                                       |
-| ------------------------- | ------------ | ------------------------------------------------- |
-| `fill/image/imageFileURI` | String       | Single image URI (URL, data URI, or file path)    |
+| Property                  | Type        | Description                                       |
+| ------------------------- | ----------- | ------------------------------------------------- |
+| `fill/image/imageFileURI` | String      | Single image URI (URL, data URI, or file path)    |
 | `fill/image/sourceSet`    | SourceSet\[] | Array of responsive image sources with dimensions |
 
 ### Content Fill Properties
@@ -529,11 +498,13 @@ interface SourceSetEntry {
 }
 ```
 
+
+
 ---
 
 ## 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

package/assets/docs/guide/fills/overview.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) > [Overview](./fills/overview.md)
 
@@ -134,11 +134,13 @@ engine.block.appendChild(page, sharedFillBlock);
 engine.block.setFill(sharedFillBlock, engine.block.getFill(block));
 ```
 
+
+
 ---
 
 ## 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