@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/colors/for-print.md

@@ -1,9 +1,13 @@
-> 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) > [For Print](./colors/for-print.md)
 
 ---
 
+
+
+
+
 ---
 
 ## Related Pages
@@ -11,11 +15,12 @@
 - [CMYK Colors](./colors/for-print/cmyk.md) - Work with CMYK colors in CE.SDK for professional print production workflows with support for color space conversion and tint control.
 - [Spot Colors](./colors/for-print/spot.md) - Define, apply, and manage spot colors for professional print workflows with premixed inks.
 
+
 ---
 
 ## 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/colors/for-screen/p3.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) > [Colors](./colors.md) > [For Screen](./colors/for-screen.md) > [P3 Colors](./colors/for-screen/p3.md)
 
@@ -38,23 +38,25 @@ On Web platforms, CE.SDK uses sRGB as the working color space. The Web binding s
 
 ## P3 vs sRGB: When to Use Each
 
-| Use Case                                | Recommended |
-| --------------------------------------- | ----------- |
-| Native mobile apps (Apple devices)      | P3          |
-| Photo/video editing with color accuracy | P3          |
-| Web applications                        | sRGB        |
-| Cross-platform consistency              | sRGB        |
+| Use Case | Recommended |
+| --- | --- |
+| Native mobile apps (Apple devices) | P3 |
+| Photo/video editing with color accuracy | P3 |
+| Server-side rendering | sRGB |
+| Cross-platform consistency | sRGB |
 
 ## Next Steps
 
 - [sRGB Colors](./colors/for-screen/srgb.md) — Apply sRGB colors for screen output
 - [Color Conversion](./colors/conversion.md) — Convert between color spaces
 
+
+
 ---
 
 ## 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/colors/for-screen/srgb.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) > [Colors](./colors.md) > [For Screen](./colors/for-screen.md) > [sRGB Colors](./colors/for-screen/srgb.md)
 
@@ -6,42 +6,28 @@
 
 Apply sRGB colors to design elements for screen-based output using RGBA color values with red, green, blue, and alpha components.
 
-![sRGB Colors example showing colored shapes with fills, strokes, shadows, and transparency](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 10 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-screen-srgb-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-for-screen-srgb-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-colors-for-screen-srgb-browser/)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-colors-for-screen-srgb-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-colors-for-screen-srgb-server-js)
 
 sRGB is the standard color space for screen displays. CE.SDK represents sRGB colors as RGBA objects where each component (red, green, blue, alpha) uses floating-point values between 0.0 and 1.0. This differs from the traditional 0-255 integer range used in many design tools.
 
-```typescript file=@cesdk_web_examples/guides-colors-for-screen-srgb-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-import { isRGBAColor } from '@cesdk/engine';
-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-for-screen-srgb-server-js/server-js.ts reference-only
+import CreativeEngine, { isRGBAColor } from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { config } from 'dotenv';
+
+// Load environment variables
+config();
 
 /**
- * CE.SDK Plugin: sRGB Colors Guide
+ * CE.SDK Server Example: sRGB Colors
  *
  * This example demonstrates:
  * - Creating sRGB/RGBA colors
@@ -51,51 +37,19 @@ import packageJson from './package.json';
  * - Working with alpha transparency
  * - Using type guards to identify RGBA colors
  */
-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());
-
-    // Create a design scene using CE.SDK
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 600, unit: 'Pixel' }
+async function main(): Promise<void> {
+  // Initialize the 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 } }
     });
 
-    const engine = cesdk.engine;
-
     // Get the page
     const pages = engine.block.findByType('page');
     const page = pages[0];
@@ -270,54 +224,43 @@ class Example implements EditorPlugin {
     );
     console.log('Converted to sRGB:', convertedToSrgb);
 
-    // Zoom to fit content
-    await engine.scene.zoomToBlock(page, {
-      padding: {
-        left: 40,
-        top: 40,
-        right: 40,
-        bottom: 40
-      }
-    });
-  }
-}
+    // Export the scene as a PNG image
+    const blob = await engine.block.export(page, { mimeType: 'image/png' });
+    const buffer = Buffer.from(await blob.arrayBuffer());
 
-export default Example;
-```
-
-This guide covers creating RGBA color objects, applying them to fills, strokes, and shadows, retrieving colors from elements, converting colors to sRGB, and working with transparency.
+    // Ensure output directory exists
+    if (!existsSync('./output')) {
+      mkdirSync('./output', { recursive: true });
+    }
 
-## Using the Built-in Color Picker UI
+    writeFileSync('./output/srgb-colors.png', buffer);
+    console.log('Exported: ./output/srgb-colors.png');
 
-The built-in color picker allows users to select sRGB colors visually. Users can pick colors from a gradient, enter hex values, or adjust RGB sliders. The color picker automatically handles value conversion between hex and floating-point formats.
+  } finally {
+    // Always dispose the engine
+    engine.dispose();
+  }
+}
 
-The UI includes:
+main().catch(console.error);
+```
 
-- Color picker gradient and hue slider
-- Hex value input field
-- RGB component sliders
-- Opacity/alpha slider for transparency control
+This guide covers creating RGBA color objects, applying them to fills, strokes, and shadows, retrieving colors from elements, converting colors to sRGB, and exporting the result.
 
-## Creating sRGB Colors Programmatically
+## Setting Up the Engine
 
-We first set up a design scene and get a reference to the page.
+We initialize the Creative Engine and create a scene with a page.
 
 ```typescript highlight=highlight-setup
-// Create a design scene using CE.SDK
-await cesdk.actions.run('scene.create', {
-  page: { width: 800, height: 600, unit: 'Pixel' }
+// Initialize the Creative Engine
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+  // license: process.env.CESDK_LICENSE,
 });
-
-const engine = cesdk.engine;
-
-// Get the page
-const pages = engine.block.findByType('page');
-const page = pages[0];
-if (!page) {
-  throw new Error('No page found');
-}
 ```
 
+## Creating sRGB Colors Programmatically
+
 We create RGBA color objects by specifying r, g, b, and a properties. All four components are required and use values from 0.0 to 1.0.
 
 ```typescript highlight=highlight-create-rgba
@@ -342,19 +285,19 @@ const semiTransparentOrange = { r: 1.0, g: 0.5, b: 0.0, a: 0.7 };
 We use `engine.block.setColor()` to apply colors to block properties. For fills, we first create a color fill and then set its color value.
 
 ```typescript highlight=highlight-apply-fill
-// Apply sRGB colors to block fills
-// First create a color fill, then set its color value
-const fill1 = engine.block.createFill('color');
-engine.block.setFill(block1, fill1);
-engine.block.setColor(fill1, 'fill/color/value', blueColor);
-
-const fill2 = engine.block.createFill('color');
-engine.block.setFill(block2, fill2);
-engine.block.setColor(fill2, 'fill/color/value', redColor);
-
-const fill3 = engine.block.createFill('color');
-engine.block.setFill(block3, fill3);
-engine.block.setColor(fill3, 'fill/color/value', greenColor);
+    // Apply sRGB colors to block fills
+    // First create a color fill, then set its color value
+    const fill1 = engine.block.createFill('color');
+    engine.block.setFill(block1, fill1);
+    engine.block.setColor(fill1, 'fill/color/value', blueColor);
+
+    const fill2 = engine.block.createFill('color');
+    engine.block.setFill(block2, fill2);
+    engine.block.setColor(fill2, 'fill/color/value', redColor);
+
+    const fill3 = engine.block.createFill('color');
+    engine.block.setFill(block3, fill3);
+    engine.block.setColor(fill3, 'fill/color/value', greenColor);
 ```
 
 ## Applying sRGB Colors to Strokes
@@ -431,19 +374,48 @@ const convertedToSrgb = engine.editor.convertColorToColorSpace(
 console.log('Converted to sRGB:', convertedToSrgb);
 ```
 
+## Exporting the Result
+
+We export the scene as a PNG image and save it to the filesystem.
+
+```typescript highlight=highlight-export
+    // Export the scene as a PNG image
+    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', { recursive: true });
+    }
+
+    writeFileSync('./output/srgb-colors.png', buffer);
+    console.log('Exported: ./output/srgb-colors.png');
+```
+
+## Cleanup
+
+We always dispose the engine when finished to free resources.
+
+```typescript highlight=highlight-cleanup
+} finally {
+  // Always dispose the engine
+  engine.dispose();
+}
+```
+
 ## API Reference
 
-| Method                                   | Description                            |
-| ---------------------------------------- | -------------------------------------- |
-| `createFill('color')`                    | Create a new color fill object         |
-| `setFill(block, fill)`                   | Assign fill to a block                 |
-| `setColor(block, property, color)`       | Set color value (RGBA)                 |
-| `getColor(block, property)`              | Get current color value                |
-| `setStrokeEnabled(block, enabled)`       | Enable or disable stroke rendering     |
-| `setStrokeWidth(block, width)`           | Set stroke width                       |
-| `setDropShadowEnabled(block, enabled)`   | Enable or disable drop shadow          |
-| `convertColorToColorSpace(color, space)` | Convert color to specified color space |
-| `isRGBAColor(color)`                     | Type guard to check if color is RGBA   |
+| Method                                   | Description                                    |
+| ---------------------------------------- | ---------------------------------------------- |
+| `createFill('color')`                    | Create a new color fill object                 |
+| `setFill(block, fill)`                   | Assign fill to a block                         |
+| `setColor(block, property, color)`       | Set color value (RGBA)                         |
+| `getColor(block, property)`              | Get current color value                        |
+| `setStrokeEnabled(block, enabled)`       | Enable or disable stroke rendering             |
+| `setStrokeWidth(block, width)`           | Set stroke width                               |
+| `setDropShadowEnabled(block, enabled)`   | Enable or disable drop shadow                  |
+| `convertColorToColorSpace(color, space)` | Convert color to specified color space         |
+| `isRGBAColor(color)`                     | Type guard to check if color is RGBA           |
 
 ## Troubleshooting
 
@@ -453,11 +425,13 @@ console.log('Converted to sRGB:', convertedToSrgb);
 
 **Type errors:** Ensure all four components (r, g, b, a) are provided for RGBA colors. Omitting alpha will cause validation errors.
 
+
+
 ---
 
 ## 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/colors/for-screen.md

@@ -1,9 +1,13 @@
-> 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) > [For Screen](./colors/for-screen.md)
 
 ---
 
+
+
+
+
 ---
 
 ## Related Pages
@@ -11,11 +15,12 @@
 - [sRGB Colors](./colors/for-screen/srgb.md) - Work with sRGB colors for screen-based designs including creating RGBA colors, applying them to design elements, and converting from other color spaces.
 - [P3 Colors](./colors/for-screen/p3.md) - Understand the P3 wide color gamut, its platform availability in CE.SDK, and alternatives for Web development.
 
+
 ---
 
 ## 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/colors/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) > [Colors](./colors.md) > [Overview](./colors/overview.md)
 
@@ -10,11 +10,13 @@ Colors are a fundamental part of design in the CreativeEditor SDK (CE.SDK). Whet
 
 [Get Started](./get-started/overview.md)
 
+
+
 ---
 
 ## 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