@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/rules/lock-content.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) > [Rules](./rules.md) > [Lock Content](./rules/lock-content.md)
 
@@ -11,87 +11,59 @@ Lock design elements to prevent unwanted modifications using CE.SDK's scope-base
 > **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-rules-lock-content-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-rules-lock-content-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-rules-lock-content-browser/)
-
-![Lock Content Hero](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-rules-lock-content-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-rules-lock-content-server-js)
 
 CE.SDK uses **scopes** to control what users can modify in a design. Each scope gates a specific capability—moving, resizing, text editing, image replacement, and more. The permission system has two layers: **global scopes** set defaults for the entire editor, and **block-level scopes** override those defaults when the global scope is set to `Defer`.
 
-```typescript file=@cesdk_web_examples/guides-rules-lock-content-browser/browser.ts reference-only
-import type {
-  CreativeEngine,
-  EditorPlugin,
-  EditorPluginContext
-} from '@cesdk/cesdk-js';
-import packageJson from './package.json';
-
-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';
+```javascript file=@cesdk_web_examples/guides-rules-lock-content-server-js/index.js reference-only
+import CreativeEngine from '@cesdk/node';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
 
 /**
- * CE.SDK Plugin: Lock Content Guide
- *
- * Demonstrates how to use scopes to lock design elements and control what users can modify.
+ * Logs the effective permissions for a block
  */
-class Example implements EditorPlugin {
-  name = packageJson.name;
-  version = packageJson.version;
+function logPermissions(engine, name, blockId) {
+  const canMove = engine.block.isAllowedByScope(blockId, 'layer/move');
+  const canResize = engine.block.isAllowedByScope(blockId, 'layer/resize');
+  const canEditText = engine.block.isAllowedByScope(blockId, 'text/edit');
+  const canChangeFill = engine.block.isAllowedByScope(blockId, 'fill/change');
+  const canDelete = engine.block.isAllowedByScope(blockId, 'lifecycle/destroy');
+
+  console.log(`Permissions for "${name}":`);
+  console.log(`  - Move: ${canMove}`);
+  console.log(`  - Resize: ${canResize}`);
+  console.log(`  - Edit text: ${canEditText}`);
+  console.log(`  - Change fill: ${canChangeFill}`);
+  console.log(`  - Delete: ${canDelete}`);
+}
 
-  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: 1200, height: 800, unit: 'Pixel' }
-    });
+/**
+ * Main demonstration function
+ */
+async function main() {
+  console.log('Starting CE.SDK Lock Content Demo...\n');
+
+  // Initialize the engine
+  const config = {
+    baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
+    license: process.env.CESDK_LICENSE || ''
+  };
+
+  const engine = await CreativeEngine.init(config);
+  console.log('Engine initialized\n');
 
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
+  try {
+    // Create a design scene with a page
+    engine.scene.create('VerticalStack');
+    const page = engine.block.create('page');
+    engine.block.setWidth(page, 1200);
+    engine.block.setHeight(page, 800);
+
+    const scene = engine.scene.get();
+    engine.block.appendChild(scene, page);
 
     // Create sample content to demonstrate locking
     // Layout: 2x2 grid centered on page (1200x800)
@@ -190,17 +162,18 @@ class Example implements EditorPlugin {
     engine.block.setEnum(label4, 'text/horizontalAlignment', 'Center');
     engine.block.appendChild(page, label4);
 
+    console.log('Created sample content\n');
+
     // Get all available scopes
     const allScopes = engine.editor.findAllScopes();
-    // eslint-disable-next-line no-console
     console.log('Available scopes:', allScopes);
+    console.log('');
 
     // Step 1: Lock everything by setting all global scopes to 'Deny'
     for (const scope of allScopes) {
       engine.editor.setGlobalScope(scope, 'Deny');
     }
-    // eslint-disable-next-line no-console
-    console.log('All scopes locked globally');
+    console.log('All scopes locked globally\n');
 
     // Enable selection for interactive blocks (required for any interaction)
     engine.editor.setGlobalScope('editor/select', 'Defer');
@@ -216,7 +189,6 @@ class Example implements EditorPlugin {
     // Enable text editing on the editable text block
     engine.block.setScopeEnabled(editableText, 'text/edit', true);
     engine.block.setScopeEnabled(editableText, 'text/character', true);
-    // eslint-disable-next-line no-console
     console.log(
       'Text editing enabled for:',
       engine.block.getName(editableText)
@@ -228,7 +200,6 @@ class Example implements EditorPlugin {
 
     // Enable image replacement on the replaceable image block
     engine.block.setScopeEnabled(replaceableImage, 'fill/change', true);
-    // eslint-disable-next-line no-console
     console.log(
       'Image replacement enabled for:',
       engine.block.getName(replaceableImage)
@@ -242,54 +213,48 @@ class Example implements EditorPlugin {
     // Enable movement and resizing on the movable shape
     engine.block.setScopeEnabled(movableShape, 'layer/move', true);
     engine.block.setScopeEnabled(movableShape, 'layer/resize', true);
-    // eslint-disable-next-line no-console
     console.log(
       'Position adjustment enabled for:',
       engine.block.getName(movableShape)
     );
+    console.log('');
 
     // Step 5: Verify the effective permissions
-    this.logPermissions(engine, 'Locked Image', lockedImage);
-    this.logPermissions(engine, 'Editable Text', editableText);
-    this.logPermissions(engine, 'Replaceable Image', replaceableImage);
-    this.logPermissions(engine, 'Movable Shape', movableShape);
-
-    // Zoom to fit the page
-    await engine.scene.zoomToBlock(page, {
-      padding: { left: 40, top: 40, right: 40, bottom: 40 }
-    });
-  }
-
-  private logPermissions(
-    engine: CreativeEngine,
-    name: string,
-    blockId: number
-  ): void {
-    const canMove = engine.block.isAllowedByScope(blockId, 'layer/move');
-    const canResize = engine.block.isAllowedByScope(blockId, 'layer/resize');
-    const canEditText = engine.block.isAllowedByScope(blockId, 'text/edit');
-    const canChangeFill = engine.block.isAllowedByScope(blockId, 'fill/change');
-    const canDelete = engine.block.isAllowedByScope(
-      blockId,
-      'lifecycle/destroy'
-    );
-
-    // eslint-disable-next-line no-console
-    console.log(`Permissions for "${name}":`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Move: ${canMove}`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Resize: ${canResize}`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Edit text: ${canEditText}`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Change fill: ${canChangeFill}`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Delete: ${canDelete}`);
+    console.log('=== Permission Summary ===\n');
+    logPermissions(engine, 'Locked Image', lockedImage);
+    console.log('');
+    logPermissions(engine, 'Editable Text', editableText);
+    console.log('');
+    logPermissions(engine, 'Replaceable Image', replaceableImage);
+    console.log('');
+    logPermissions(engine, 'Movable Shape', movableShape);
+    console.log('');
+
+    // Export the design
+    console.log('Exporting design...');
+    const blob = await engine.block.export(page, 'image/png');
+    const buffer = Buffer.from(await blob.arrayBuffer());
+
+    // Save to output directory
+    if (!existsSync('./output')) {
+      mkdirSync('./output', { recursive: true });
+    }
+    writeFileSync('./output/locked-design.png', buffer);
+    console.log('Design exported to ./output/locked-design.png\n');
+
+    console.log('Demo complete!');
+  } finally {
+    // Clean up
+    engine.dispose();
+    console.log('Engine disposed');
   }
 }
 
-export default Example;
+// Run the demo
+main().catch((error) => {
+  console.error('Error:', error);
+  process.exit(1);
+});
 ```
 
 This guide covers how to discover available scopes, lock an entire design, and selectively enable specific editing capabilities on individual blocks.
@@ -298,12 +263,12 @@ This guide covers how to discover available scopes, lock an entire design, and s
 
 Global and block-level scopes combine to determine whether an operation is permitted. The global scope can be set to one of three values:
 
-| Global Scope | Block Scope | Result    |
-| ------------ | ----------- | --------- |
-| `Allow`      | any         | Permitted |
-| `Deny`       | any         | Blocked   |
-| `Defer`      | enabled     | Permitted |
-| `Defer`      | disabled    | Blocked   |
+| Global Scope | Block Scope | Result |
+|--------------|-------------|--------|
+| `Allow` | any | Permitted |
+| `Deny` | any | Blocked |
+| `Defer` | enabled | Permitted |
+| `Defer` | disabled | Blocked |
 
 When global is `Allow`, the operation is always permitted regardless of block settings. When global is `Deny`, it's always blocked. When global is `Defer`, the block-level enabled/disabled state determines the outcome.
 
@@ -311,24 +276,23 @@ When global is `Allow`, the operation is always permitted regardless of block se
 
 We can retrieve all available scope names using `engine.editor.findAllScopes()`. This returns an array of scope identifiers that can be used with the global and block-level scope APIs.
 
-```typescript highlight=highlight-find-all-scopes
+```javascript highlight=highlight-find-all-scopes
 // Get all available scopes
 const allScopes = engine.editor.findAllScopes();
-// eslint-disable-next-line no-console
 console.log('Available scopes:', allScopes);
+console.log('');
 ```
 
 ## Locking an Entire Design
 
 To lock everything, we iterate through all scopes and set each global scope to `Deny`. This prevents any editing operation on any block in the design.
 
-```typescript highlight=highlight-lock-all
+```javascript highlight=highlight-lock-all
 // Step 1: Lock everything by setting all global scopes to 'Deny'
 for (const scope of allScopes) {
   engine.editor.setGlobalScope(scope, 'Deny');
 }
-// eslint-disable-next-line no-console
-console.log('All scopes locked globally');
+console.log('All scopes locked globally\n');
 ```
 
 **Important:** When locking all scopes, the `editor/select` scope is also locked. Users cannot interact with a block they cannot select. Before enabling specific capabilities, you must also enable `editor/select` on blocks users should be able to interact with.
@@ -341,138 +305,131 @@ In most real-world scenarios, you want to lock some aspects while allowing other
 
 To allow users to edit text content but nothing else, we set the `text/edit` and `text/character` global scopes to `Defer`, then enable them on specific text blocks.
 
-```typescript highlight=highlight-text-edit
-// Step 2: Allow text editing on specific blocks
-// Set text/edit scope to 'Defer' so block-level settings take effect
-engine.editor.setGlobalScope('text/edit', 'Defer');
-engine.editor.setGlobalScope('text/character', 'Defer');
-
-// Enable text editing on the editable text block
-engine.block.setScopeEnabled(editableText, 'text/edit', true);
-engine.block.setScopeEnabled(editableText, 'text/character', true);
-// eslint-disable-next-line no-console
-console.log('Text editing enabled for:', engine.block.getName(editableText));
+```javascript highlight=highlight-text-edit
+    // Step 2: Allow text editing on specific blocks
+    // Set text/edit scope to 'Defer' so block-level settings take effect
+    engine.editor.setGlobalScope('text/edit', 'Defer');
+    engine.editor.setGlobalScope('text/character', 'Defer');
+
+    // Enable text editing on the editable text block
+    engine.block.setScopeEnabled(editableText, 'text/edit', true);
+    engine.block.setScopeEnabled(editableText, 'text/character', true);
+    console.log(
+      'Text editing enabled for:',
+      engine.block.getName(editableText)
+    );
 ```
 
 ### Allowing Image Replacement
 
 To allow users to swap images while protecting layout, we set the `fill/change` global scope to `Defer` and enable it on specific image blocks.
 
-```typescript highlight=highlight-image-replace
-// Step 3: Allow image replacement on specific blocks
-// Set fill/change scope to 'Defer'
-engine.editor.setGlobalScope('fill/change', 'Defer');
-
-// Enable image replacement on the replaceable image block
-engine.block.setScopeEnabled(replaceableImage, 'fill/change', true);
-// eslint-disable-next-line no-console
-console.log(
-  'Image replacement enabled for:',
-  engine.block.getName(replaceableImage)
-);
+```javascript highlight=highlight-image-replace
+    // Step 3: Allow image replacement on specific blocks
+    // Set fill/change scope to 'Defer'
+    engine.editor.setGlobalScope('fill/change', 'Defer');
+
+    // Enable image replacement on the replaceable image block
+    engine.block.setScopeEnabled(replaceableImage, 'fill/change', true);
+    console.log(
+      'Image replacement enabled for:',
+      engine.block.getName(replaceableImage)
+    );
 ```
 
 ### Allowing Position Adjustments
 
 To allow repositioning of specific elements, we set `layer/move` and `layer/resize` to `Defer` globally, then enable them on selected blocks.
 
-```typescript highlight=highlight-position-adjust
-// Step 4: Allow repositioning of specific blocks
-// Set layer/move scope to 'Defer'
-engine.editor.setGlobalScope('layer/move', 'Defer');
-engine.editor.setGlobalScope('layer/resize', 'Defer');
-
-// Enable movement and resizing on the movable shape
-engine.block.setScopeEnabled(movableShape, 'layer/move', true);
-engine.block.setScopeEnabled(movableShape, 'layer/resize', true);
-// eslint-disable-next-line no-console
-console.log(
-  'Position adjustment enabled for:',
-  engine.block.getName(movableShape)
-);
+```javascript highlight=highlight-position-adjust
+    // Step 4: Allow repositioning of specific blocks
+    // Set layer/move scope to 'Defer'
+    engine.editor.setGlobalScope('layer/move', 'Defer');
+    engine.editor.setGlobalScope('layer/resize', 'Defer');
+
+    // Enable movement and resizing on the movable shape
+    engine.block.setScopeEnabled(movableShape, 'layer/move', true);
+    engine.block.setScopeEnabled(movableShape, 'layer/resize', true);
+    console.log(
+      'Position adjustment enabled for:',
+      engine.block.getName(movableShape)
+    );
+    console.log('');
 ```
 
 ## Checking Permissions
 
 We can verify the effective permission on a block using `engine.block.isAllowedByScope()`. This returns `true` if the operation is permitted after evaluating both global and block-level settings.
 
-```typescript highlight=highlight-log-permissions
-  private logPermissions(
-    engine: CreativeEngine,
-    name: string,
-    blockId: number
-  ): void {
-    const canMove = engine.block.isAllowedByScope(blockId, 'layer/move');
-    const canResize = engine.block.isAllowedByScope(blockId, 'layer/resize');
-    const canEditText = engine.block.isAllowedByScope(blockId, 'text/edit');
-    const canChangeFill = engine.block.isAllowedByScope(blockId, 'fill/change');
-    const canDelete = engine.block.isAllowedByScope(
-      blockId,
-      'lifecycle/destroy'
-    );
-
-    // eslint-disable-next-line no-console
-    console.log(`Permissions for "${name}":`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Move: ${canMove}`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Resize: ${canResize}`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Edit text: ${canEditText}`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Change fill: ${canChangeFill}`);
-    // eslint-disable-next-line no-console
-    console.log(`  - Delete: ${canDelete}`);
-  }
+```javascript highlight=highlight-log-permissions
+/**
+ * Logs the effective permissions for a block
+ */
+function logPermissions(engine, name, blockId) {
+  const canMove = engine.block.isAllowedByScope(blockId, 'layer/move');
+  const canResize = engine.block.isAllowedByScope(blockId, 'layer/resize');
+  const canEditText = engine.block.isAllowedByScope(blockId, 'text/edit');
+  const canChangeFill = engine.block.isAllowedByScope(blockId, 'fill/change');
+  const canDelete = engine.block.isAllowedByScope(blockId, 'lifecycle/destroy');
+
+  console.log(`Permissions for "${name}":`);
+  console.log(`  - Move: ${canMove}`);
+  console.log(`  - Resize: ${canResize}`);
+  console.log(`  - Edit text: ${canEditText}`);
+  console.log(`  - Change fill: ${canChangeFill}`);
+  console.log(`  - Delete: ${canDelete}`);
+}
 ```
 
 Use `engine.block.isScopeEnabled()` to check just the block-level setting, and `engine.editor.getGlobalScope()` to check the global setting.
 
 ## Available Scopes Reference
 
-| Scope                    | Description                             |
-| ------------------------ | --------------------------------------- |
-| `layer/move`             | Move block position                     |
-| `layer/resize`           | Resize block dimensions                 |
-| `layer/rotate`           | Rotate block                            |
-| `layer/flip`             | Flip block horizontally or vertically   |
-| `layer/crop`             | Crop block content                      |
-| `layer/opacity`          | Change block opacity                    |
-| `layer/blendMode`        | Change blend mode                       |
-| `layer/visibility`       | Toggle block visibility                 |
-| `layer/clipping`         | Change clipping behavior                |
-| `fill/change`            | Change fill content                     |
-| `fill/changeType`        | Change fill type                        |
-| `stroke/change`          | Change stroke properties                |
-| `shape/change`           | Change shape type                       |
-| `text/edit`              | Edit text content                       |
-| `text/character`         | Change text styling (font, size, color) |
-| `appearance/adjustments` | Change color adjustments                |
-| `appearance/filter`      | Apply or change filters                 |
-| `appearance/effect`      | Apply or change effects                 |
-| `appearance/blur`        | Apply or change blur                    |
-| `appearance/shadow`      | Apply or change shadows                 |
-| `appearance/animation`   | Apply or change animations              |
-| `lifecycle/destroy`      | Delete the block                        |
-| `lifecycle/duplicate`    | Duplicate the block                     |
-| `editor/add`             | Add new blocks                          |
-| `editor/select`          | Select blocks                           |
+| Scope | Description |
+|-------|-------------|
+| `layer/move` | Move block position |
+| `layer/resize` | Resize block dimensions |
+| `layer/rotate` | Rotate block |
+| `layer/flip` | Flip block horizontally or vertically |
+| `layer/crop` | Crop block content |
+| `layer/opacity` | Change block opacity |
+| `layer/blendMode` | Change blend mode |
+| `layer/visibility` | Toggle block visibility |
+| `layer/clipping` | Change clipping behavior |
+| `fill/change` | Change fill content |
+| `fill/changeType` | Change fill type |
+| `stroke/change` | Change stroke properties |
+| `shape/change` | Change shape type |
+| `text/edit` | Edit text content |
+| `text/character` | Change text styling (font, size, color) |
+| `appearance/adjustments` | Change color adjustments |
+| `appearance/filter` | Apply or change filters |
+| `appearance/effect` | Apply or change effects |
+| `appearance/blur` | Apply or change blur |
+| `appearance/shadow` | Apply or change shadows |
+| `appearance/animation` | Apply or change animations |
+| `lifecycle/destroy` | Delete the block |
+| `lifecycle/duplicate` | Duplicate the block |
+| `editor/add` | Add new blocks |
+| `editor/select` | Select blocks |
 
 ## Troubleshooting
 
-| Issue                                | Cause                                 | Solution                                                    |
-| ------------------------------------ | ------------------------------------- | ----------------------------------------------------------- |
-| Block still editable                 | Global scope set to `Allow`           | Change global scope to `Deny` or `Defer`                    |
-| Block unexpectedly locked            | Global scope set to `Deny`            | Set global scope to `Defer` and enable block-level scope    |
-| Can't interact with unlocked block   | `editor/select` scope is locked       | Enable `editor/select` on blocks users should interact with |
-| Permission check returns wrong value | Checking wrong scope level            | Use `isAllowedByScope()` for effective permission           |
-| New SDK scopes not locked            | Locking code doesn't cover new scopes | Use `findAllScopes()` dynamically                           |
+| Issue | Cause | Solution |
+|-------|-------|----------|
+| Block still editable | Global scope set to `Allow` | Change global scope to `Deny` or `Defer` |
+| Block unexpectedly locked | Global scope set to `Deny` | Set global scope to `Defer` and enable block-level scope |
+| Can't interact with unlocked block | `editor/select` scope is locked | Enable `editor/select` on blocks users should interact with |
+| Permission check returns wrong value | Checking wrong scope level | Use `isAllowedByScope()` for effective permission |
+| New SDK scopes not locked | Locking code doesn't cover new scopes | Use `findAllScopes()` dynamically |
+
+
 
 ---
 
 ## 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