@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/text/effects.md

@@ -1,230 +1,192 @@
-> 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) > [Create and Edit Text](./text.md) > [Text Effects](./text/effects.md)
 
 ---
 
-Add visual depth and interest to text blocks using drop shadows and stroke outlines.
-
-![Text Effects example showing text blocks with drop shadow and stroke outline](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Apply visual effects to text blocks programmatically including drop shadows and stroke outlines.
 
 > **Reading time:** 5 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-text-effects-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-text-effects-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-text-effects-browser/)
-
-Text effects in CE.SDK include drop shadows for depth and stroke outlines for text borders. These visual effects are distinct from text styling properties like colors, fonts, and backgrounds.
-
-```typescript file=@cesdk_web_examples/guides-text-effects-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';
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-text-effects-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-text-effects-server-js)
+
+CE.SDK provides visual effect capabilities for text blocks through the Block API. We can apply drop shadows for depth and stroke outlines for text borders.
+
+```typescript file=@cesdk_web_examples/guides-text-effects-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 Plugin: Text Effects Guide
+ * CE.SDK Server Guide: Text Effects
  *
  * Demonstrates applying visual effects to text blocks:
  * - Drop shadows for depth
  * - Outline effect for text borders
- * - Glow effect for luminous aura
  */
-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: 500, unit: 'Pixel' }
-    });
-
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
-
-    // Create a text block with drop shadow
-    const shadowText = engine.block.create('//ly.img.ubq/text');
-    engine.block.replaceText(shadowText, 'Drop Shadow');
-    engine.block.setTextFontSize(shadowText, 90);
-    engine.block.setWidthMode(shadowText, 'Auto');
-    engine.block.setHeightMode(shadowText, 'Auto');
-    engine.block.setPositionX(shadowText, 50);
-    engine.block.setPositionY(shadowText, 50);
-    engine.block.appendChild(page, shadowText);
-
-    // Enable and configure drop shadow
-    engine.block.setDropShadowEnabled(shadowText, true);
-    engine.block.setDropShadowColor(shadowText, {
-      r: 0,
-      g: 0,
-      b: 0,
-      a: 0.6
-    });
-    engine.block.setDropShadowOffsetX(shadowText, 5);
-    engine.block.setDropShadowOffsetY(shadowText, 5);
-    engine.block.setDropShadowBlurRadiusX(shadowText, 10);
-    engine.block.setDropShadowBlurRadiusY(shadowText, 10);
-
-    // Create a text block with stroke outline
-    const outlineText = engine.block.create('//ly.img.ubq/text');
-    engine.block.replaceText(outlineText, 'Outline');
-    engine.block.setTextFontSize(outlineText, 90);
-    engine.block.setWidthMode(outlineText, 'Auto');
-    engine.block.setHeightMode(outlineText, 'Auto');
-    engine.block.setPositionX(outlineText, 50);
-    engine.block.setPositionY(outlineText, 180);
-    engine.block.appendChild(page, outlineText);
-
-    // Enable and configure stroke
-    engine.block.setStrokeEnabled(outlineText, true);
-    engine.block.setStrokeWidth(outlineText, 2);
-    engine.block.setStrokeColor(outlineText, {
-      r: 0.2,
-      g: 0.4,
-      b: 0.9,
-      a: 1.0
-    });
-    engine.block.setStrokeStyle(outlineText, 'Solid');
-    engine.block.setStrokePosition(outlineText, 'Center');
-
-    // Select the first text block
-    engine.block.select(shadowText);
+
+// 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: 500 } }
+  });
+  const page = engine.block.findByType('page')[0];
+
+  // Create a text block with drop shadow
+  const shadowText = engine.block.create('text');
+  engine.block.replaceText(shadowText, 'Drop Shadow');
+  engine.block.setTextFontSize(shadowText, 90);
+  engine.block.setWidthMode(shadowText, 'Auto');
+  engine.block.setHeightMode(shadowText, 'Auto');
+  engine.block.setPositionX(shadowText, 50);
+  engine.block.setPositionY(shadowText, 50);
+  engine.block.appendChild(page, shadowText);
+
+  // Enable and configure drop shadow
+  engine.block.setDropShadowEnabled(shadowText, true);
+  engine.block.setDropShadowColor(shadowText, {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 0.6
+  });
+  engine.block.setDropShadowOffsetX(shadowText, 5);
+  engine.block.setDropShadowOffsetY(shadowText, 5);
+  engine.block.setDropShadowBlurRadiusX(shadowText, 10);
+  engine.block.setDropShadowBlurRadiusY(shadowText, 10);
+
+  // Create a text block with stroke outline
+  const outlineText = engine.block.create('text');
+  engine.block.replaceText(outlineText, 'Outline');
+  engine.block.setTextFontSize(outlineText, 90);
+  engine.block.setWidthMode(outlineText, 'Auto');
+  engine.block.setHeightMode(outlineText, 'Auto');
+  engine.block.setPositionX(outlineText, 50);
+  engine.block.setPositionY(outlineText, 180);
+  engine.block.appendChild(page, outlineText);
+
+  // Enable and configure stroke
+  engine.block.setStrokeEnabled(outlineText, true);
+  engine.block.setStrokeWidth(outlineText, 2);
+  engine.block.setStrokeColor(outlineText, {
+    r: 0.2,
+    g: 0.4,
+    b: 0.9,
+    a: 1.0
+  });
+  engine.block.setStrokeStyle(outlineText, 'Solid');
+  engine.block.setStrokePosition(outlineText, 'Center');
+
+  // Export the scene to PNG
+  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');
   }
-}
 
-export default Example;
+  // Save to file
+  writeFileSync('output/text-effects.png', buffer);
+  console.log('✅ Exported text effects to output/text-effects.png');
+} finally {
+  engine.dispose();
+}
 ```
 
-This guide covers how to apply drop shadows and stroke outlines to text blocks programmatically using the Block API.
+This guide covers adding drop shadows and stroke outlines to text blocks programmatically.
 
 ## Drop Shadows
 
-Drop shadows add depth and emphasis to text. CE.SDK provides dedicated APIs for configuring shadow properties on text blocks.
+We add depth to text with drop shadows using dedicated shadow APIs. We enable with `setDropShadowEnabled()` and configure color, offset, and blur properties.
 
 ```typescript highlight-drop-shadow
-// Create a text block with drop shadow
-const shadowText = engine.block.create('//ly.img.ubq/text');
-engine.block.replaceText(shadowText, 'Drop Shadow');
-engine.block.setTextFontSize(shadowText, 90);
-engine.block.setWidthMode(shadowText, 'Auto');
-engine.block.setHeightMode(shadowText, 'Auto');
-engine.block.setPositionX(shadowText, 50);
-engine.block.setPositionY(shadowText, 50);
-engine.block.appendChild(page, shadowText);
-
-// Enable and configure drop shadow
-engine.block.setDropShadowEnabled(shadowText, true);
-engine.block.setDropShadowColor(shadowText, {
-  r: 0,
-  g: 0,
-  b: 0,
-  a: 0.6
-});
-engine.block.setDropShadowOffsetX(shadowText, 5);
-engine.block.setDropShadowOffsetY(shadowText, 5);
-engine.block.setDropShadowBlurRadiusX(shadowText, 10);
-engine.block.setDropShadowBlurRadiusY(shadowText, 10);
+  // Create a text block with drop shadow
+  const shadowText = engine.block.create('text');
+  engine.block.replaceText(shadowText, 'Drop Shadow');
+  engine.block.setTextFontSize(shadowText, 90);
+  engine.block.setWidthMode(shadowText, 'Auto');
+  engine.block.setHeightMode(shadowText, 'Auto');
+  engine.block.setPositionX(shadowText, 50);
+  engine.block.setPositionY(shadowText, 50);
+  engine.block.appendChild(page, shadowText);
+
+  // Enable and configure drop shadow
+  engine.block.setDropShadowEnabled(shadowText, true);
+  engine.block.setDropShadowColor(shadowText, {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 0.6
+  });
+  engine.block.setDropShadowOffsetX(shadowText, 5);
+  engine.block.setDropShadowOffsetY(shadowText, 5);
+  engine.block.setDropShadowBlurRadiusX(shadowText, 10);
+  engine.block.setDropShadowBlurRadiusY(shadowText, 10);
 ```
 
 The drop shadow API provides control over color, position, and blur. The offset values position the shadow relative to the text, while the blur radius controls shadow softness. Horizontal and vertical blur can be configured independently for asymmetric effects.
 
 ## Stroke Outlines
 
-Stroke outlines add a colored border around text. We enable stroke with `setStrokeEnabled()`, then configure width, color, style, and position.
+We add a colored border around text using stroke APIs. We enable stroke with `setStrokeEnabled()`, then configure width, color, style, and position.
 
 ```typescript highlight-stroke
-// Create a text block with stroke outline
-const outlineText = engine.block.create('//ly.img.ubq/text');
-engine.block.replaceText(outlineText, 'Outline');
-engine.block.setTextFontSize(outlineText, 90);
-engine.block.setWidthMode(outlineText, 'Auto');
-engine.block.setHeightMode(outlineText, 'Auto');
-engine.block.setPositionX(outlineText, 50);
-engine.block.setPositionY(outlineText, 180);
-engine.block.appendChild(page, outlineText);
-
-// Enable and configure stroke
-engine.block.setStrokeEnabled(outlineText, true);
-engine.block.setStrokeWidth(outlineText, 2);
-engine.block.setStrokeColor(outlineText, {
-  r: 0.2,
-  g: 0.4,
-  b: 0.9,
-  a: 1.0
-});
-engine.block.setStrokeStyle(outlineText, 'Solid');
-engine.block.setStrokePosition(outlineText, 'Center');
+  // Create a text block with stroke outline
+  const outlineText = engine.block.create('text');
+  engine.block.replaceText(outlineText, 'Outline');
+  engine.block.setTextFontSize(outlineText, 90);
+  engine.block.setWidthMode(outlineText, 'Auto');
+  engine.block.setHeightMode(outlineText, 'Auto');
+  engine.block.setPositionX(outlineText, 50);
+  engine.block.setPositionY(outlineText, 180);
+  engine.block.appendChild(page, outlineText);
+
+  // Enable and configure stroke
+  engine.block.setStrokeEnabled(outlineText, true);
+  engine.block.setStrokeWidth(outlineText, 2);
+  engine.block.setStrokeColor(outlineText, {
+    r: 0.2,
+    g: 0.4,
+    b: 0.9,
+    a: 1.0
+  });
+  engine.block.setStrokeStyle(outlineText, 'Solid');
+  engine.block.setStrokePosition(outlineText, 'Center');
 ```
 
-The stroke width is specified in pixels. Text blocks use centered stroke positioning. Stroke styles include `'Solid'`, `'Dashed'`, `'Dotted'`, and other line patterns.
+The stroke width is specified in pixels. Text blocks support `'Center'`, `'Inner'`, and `'Outer'` stroke positioning via `setStrokePosition()`. Stroke styles include `'Solid'`, `'Dashed'`, `'Dotted'`, and other line patterns.
 
 ## API Reference
 
-| Method                                    | Purpose                                |
-| ----------------------------------------- | -------------------------------------- |
-| `engine.block.supportsDropShadow()`       | Check if block supports drop shadows   |
-| `engine.block.setDropShadowEnabled()`     | Enable or disable drop shadow          |
-| `engine.block.setDropShadowColor()`       | Set shadow color                       |
-| `engine.block.setDropShadowOffsetX()`     | Set horizontal shadow offset           |
-| `engine.block.setDropShadowOffsetY()`     | Set vertical shadow offset             |
-| `engine.block.setDropShadowBlurRadiusX()` | Set horizontal blur radius             |
-| `engine.block.setDropShadowBlurRadiusY()` | Set vertical blur radius               |
-| `engine.block.setStrokeEnabled()`         | Enable or disable stroke               |
-| `engine.block.setStrokeWidth()`           | Set stroke width in pixels             |
-| `engine.block.setStrokeColor()`           | Set stroke color                       |
-| `engine.block.setStrokeStyle()`           | Set stroke style (Solid, Dashed, etc.) |
+| Method | Purpose |
+|--------|---------|
+| `engine.block.supportsDropShadow()` | Check if block supports drop shadows |
+| `engine.block.setDropShadowEnabled()` | Enable or disable drop shadow |
+| `engine.block.setDropShadowColor()` | Set shadow color |
+| `engine.block.setDropShadowOffsetX()` | Set horizontal shadow offset |
+| `engine.block.setDropShadowOffsetY()` | Set vertical shadow offset |
+| `engine.block.setDropShadowBlurRadiusX()` | Set horizontal blur radius |
+| `engine.block.setDropShadowBlurRadiusY()` | Set vertical blur radius |
+| `engine.block.setStrokeEnabled()` | Enable or disable stroke |
+| `engine.block.setStrokeWidth()` | Set stroke width in pixels |
+| `engine.block.setStrokeColor()` | Set stroke color |
+| `engine.block.setStrokeStyle()` | Set stroke style (Solid, Dashed, etc.) |
 
 ## Troubleshooting
 
@@ -234,11 +196,13 @@ The stroke width is specified in pixels. Text blocks use centered stroke positio
 
 **Stroke too thick or thin**: Adjust the value passed to `setStrokeWidth()` to control outline thickness.
 
+
+
 ---
 
 ## 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