@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/api/VariableAPI.md

@@ -0,0 +1,59 @@
+# VariableAPI
+
+## Variable Management
+
+Create, update, retrieve, and remove text variables from the engine.
+
+### findAll()
+
+Get all text variable names currently stored in the engine.
+
+```typescript
+findAll(): string[]
+```
+
+**Returns:** List of variable names.
+
+### setString()
+
+Set a text variable's value.
+Creates a new variable if the key doesn't exist, or updates an existing one.
+
+```typescript
+setString(key: string, value: string): void
+```
+
+**Parameters:**
+
+- `key` - The variable's key.
+- `value` - The text value to assign to the variable.
+
+### getString()
+
+Get a text variable's value.
+
+```typescript
+getString(key: string): string
+```
+
+**Parameters:**
+
+- `key` - The variable's key.
+
+**Returns:** The text value of the variable.
+
+### remove()
+
+Remove a text variable from the engine.
+
+```typescript
+remove(key: string): void
+```
+
+**Parameters:**
+
+- `key` - The variable's key to remove.
+
+---
+
+For complete type definitions, see the [CE.SDK TypeScript API Reference](https://img.ly/docs/cesdk/engine/api/).

package/assets/docs/guide/api/types.md

@@ -0,0 +1,71 @@
+# Common Types
+
+Core type definitions used throughout the CE.SDK API.
+
+## Logger
+
+Types: LogLevel
+
+## MimeType
+
+Types: MimeType, ImageMimeType, AudioMimeType, VideoMimeType, ApplicationMimeType
+
+## asset
+
+Types: Locale, Groups, SortingOrder, Source, AssetMetaData, AssetRGBColor, AssetCMYKColor, AssetSpotColor, AssetColor, AssetFixedAspectRatio, AssetFreeAspectRatio, AssetFixedSize, AssetTransformPreset, AssetStringProperty, AssetNumberProperty, AssetBooleanProperty, AssetEnumProperty, AssetColorProperty, AssetProperty, AssetPayload, Asset, AssetDefinition, AssetResult, CompleteAssetResult, AssetQueryData, AssetsQueryResult, AssetSource
+
+## audioTrackInfo
+
+Types: AudioTrackInfo
+
+## blockTypes
+
+Types: DesignBlockTypeShorthand, DesignBlockTypeLonghand, DesignBlockType, ShapeTypeShorthand, ShapeTypeLonghand, ShapeType, FillTypeShorthand, FillTypeLonghand, FillType, EffectTypeShorthand, EffectTypeLonghand, EffectType, BlurTypeShorthand, BlurTypeLonghand, BlurType, AnimationTypeShorthand, AnimationTypeLonghand, AnimationType, ObjectTypeShorthand, ObjectTypeLonghand, ObjectType
+
+## canvas
+
+Types: OffscreenCanvas, Canvas
+
+## color
+
+Types: HexColorString, PaletteColor, Color, ColorSpace, RGBColor, HSLColor, HSVColor, ColorNameObject, RGBAColor, CMYKColor, SpotColor, ColorInternal, GradientColorStop
+
+## cutout
+
+Types: CutoutOperation
+
+## engine
+
+Types: Vector, DesignBlockId, HistoryId, NumberRange, Vec2, Vec3, Size2, Range, ClampArgs, ClampCameraCommandResult, EmscriptenClassHandle, UBQError, UBQResult, MouseButtonEvent, MouseMoveEvent, MouseWheelEvent, KeyboardKeyEvent, ZoomAutoFitAxis, EngineTouchEvent, TouchRotateEvent, TouchPanEvent, TouchPinchEvent, TrackingMetadata, EditMode
+
+## fontMetrics
+
+Types: FontMetrics
+
+## fonts
+
+Types: FontWeight, FontStyle, Font, Typeface
+
+## propertyTypes
+
+Types: BoolPropertyName, EnumPropertyName, FloatPropertyName, StringPropertyName, DoublePropertyName, ColorPropertyName, IntPropertyName, SourceSetPropertyName, BlendMode, ContentFillMode, HeightMode, PositionXMode, PositionYMode, SceneDesignUnit, SceneLayout, SceneMode, WidthMode, StrokeCornerGeometry, StrokePosition, StrokeStyle, TextHorizontalAlignment, TextVerticalAlignment, CutoutType, CaptionHorizontalAlignment, CaptionVerticalAlignment, AnimationEasing, TextAnimationWritingStyle, AnimationGrowDirection, AnimationScaleLoopDirection, AnimationWipeDirection, AnimationBaselineDirection, AnimationSpinDirection, AnimationSpinLoopDirection, AnimationJumpLoopDirection, AnimationTypewriterTextWritingStyle, AnimationBlockSwipeTextDirection, AnimationMergeTextDirection, AnimationKenBurnsDirection, FillPixelStreamOrientation, EnumValues, BlockEnumType
+
+## role
+
+Types: RoleString
+
+## scope
+
+Types: Scope
+
+## settingTypes
+
+Types: SettingStringPropertyName, SettingColorPropertyName, SettingBoolPropertyName, SettingFloatPropertyName, SettingEnumPropertyName, SettingIntPropertyName, TouchPinchAction, TouchRotateAction, CameraClampingOvershootMode, DoubleClickSelectionMode, ColorPickerColorMode, TimelineTrackVisibility, SettingEnumValues, SettingEnumType
+
+## settings
+
+Types: Settings, SettingKey, SettingValueType
+
+---
+
+For complete type definitions, see the [CE.SDK TypeScript API Reference](https://img.ly/docs/cesdk/engine/api/).

package/assets/docs/guide/api-reference/overview.md

@@ -0,0 +1,20 @@
+> 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).
+
+**Navigation:** [API Reference](./api-reference/overview.md)
+
+---
+
+For , the following packages are available:
+
+- [@cesdk/cesdk-js](https://img.ly/docs/cesdk/`${props.platform.slug}/api/cesdk-js/`)
+
+- [@cesdk/engine](https://img.ly/docs/cesdk/`${props.platform.slug}/api/engine/`)
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS 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

package/assets/docs/guide/automation/auto-resize.md

@@ -0,0 +1,412 @@
+> 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).
+
+**Navigation:** [Guides](./guides.md) > [Automate Workflows](./automation.md) > [Auto-Resize](./automation/auto-resize.md)
+
+---
+
+Configure blocks to dynamically adjust their dimensions using three sizing modes: Absolute for fixed values, Percent for parent-relative sizing, and Auto for content-driven expansion.
+
+![Auto-Resize example showing text blocks with automatic sizing](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-automation-auto-resize-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-automation-auto-resize-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-automation-auto-resize-browser/)
+
+CE.SDK provides three sizing modes for controlling block dimensions. Absolute mode uses fixed pixel values. Percent mode sizes blocks relative to their parent container. Auto mode automatically expands blocks to fit their content. You can set width and height modes independently, allowing flexible combinations like fixed width with auto height for text that wraps.
+
+```typescript file=@cesdk_web_examples/guides-automation-auto-resize-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';
+
+/**
+ * CE.SDK Plugin: Auto-Resize Guide
+ *
+ * Demonstrates block sizing modes and responsive layout patterns:
+ * - Setting width and height modes (Absolute, Percent, Auto)
+ * - Reading computed frame dimensions after layout
+ * - Centering text blocks based on computed dimensions
+ * - Creating responsive layouts with percentage-based sizing
+ */
+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: 600, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+    const page = engine.block.findByType('page')[0];
+
+    // Create a text block with Auto sizing mode
+    // Auto mode makes the block expand to fit its content
+    const titleBlock = engine.block.create('text');
+    engine.block.replaceText(titleBlock, 'Auto-Resize Demo');
+    engine.block.setFloat(titleBlock, 'text/fontSize', 64);
+
+    // Set width and height modes to Auto
+    // The block will automatically size to fit the text content
+    engine.block.setWidthMode(titleBlock, 'Auto');
+    engine.block.setHeightMode(titleBlock, 'Auto');
+    engine.block.appendChild(page, titleBlock);
+
+    // Read computed frame dimensions after layout
+    // getFrameWidth/getFrameHeight return the actual rendered size
+    const titleWidth = engine.block.getFrameWidth(titleBlock);
+    const titleHeight = engine.block.getFrameHeight(titleBlock);
+
+    console.log(
+      `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed(
+        0
+      )} pixels`
+    );
+
+    // Calculate centered position using frame dimensions
+    const pageWidth = engine.block.getWidth(page);
+    const pageHeight = engine.block.getHeight(page);
+    const centerX = (pageWidth - titleWidth) / 2;
+    const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout
+
+    // Position the title at center
+    engine.block.setPositionX(titleBlock, centerX);
+    engine.block.setPositionY(titleBlock, centerY);
+
+    // Create a block using Percent mode for responsive sizing
+    // Percent mode sizes the block relative to its parent
+    const backgroundBlock = engine.block.create('graphic');
+    engine.block.setShape(backgroundBlock, engine.block.createShape('rect'));
+    const fill = engine.block.createFill('color');
+    engine.block.setColor(fill, 'fill/color/value', {
+      r: 0.2,
+      g: 0.4,
+      b: 0.8,
+      a: 0.3
+    });
+    engine.block.setFill(backgroundBlock, fill);
+
+    // Set to Percent mode - values are normalized (0-1)
+    engine.block.setWidthMode(backgroundBlock, 'Percent');
+    engine.block.setHeightMode(backgroundBlock, 'Percent');
+    engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width
+    engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height
+
+    // Center the background block
+    engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin
+    engine.block.setPositionY(backgroundBlock, pageHeight * 0.6);
+    engine.block.appendChild(page, backgroundBlock);
+
+    // Create a subtitle with Auto mode
+    const subtitleBlock = engine.block.create('text');
+    engine.block.replaceText(
+      subtitleBlock,
+      'Text automatically sizes to fit content'
+    );
+    engine.block.setFloat(subtitleBlock, 'text/fontSize', 32);
+    engine.block.setWidthMode(subtitleBlock, 'Auto');
+    engine.block.setHeightMode(subtitleBlock, 'Auto');
+    engine.block.appendChild(page, subtitleBlock);
+
+    // Read computed dimensions and center
+    const subtitleWidth = engine.block.getFrameWidth(subtitleBlock);
+    const subtitleCenterX = (pageWidth - subtitleWidth) / 2;
+    engine.block.setPositionX(subtitleBlock, subtitleCenterX);
+    engine.block.setPositionY(subtitleBlock, pageHeight * 0.7);
+
+    // Verify sizing modes
+    const titleWidthMode = engine.block.getWidthMode(titleBlock);
+    const titleHeightMode = engine.block.getHeightMode(titleBlock);
+    const bgWidthMode = engine.block.getWidthMode(backgroundBlock);
+    const bgHeightMode = engine.block.getHeightMode(backgroundBlock);
+
+    console.log(
+      `Title modes: width=${titleWidthMode}, height=${titleHeightMode}`
+    );
+    console.log(
+      `Background modes: width=${bgWidthMode}, height=${bgHeightMode}`
+    );
+
+    // Select the title block to show the auto-sized result
+    engine.block.select(titleBlock);
+
+    console.log(
+      'Auto-resize guide initialized. Try changing text content to see auto-sizing in action.'
+    );
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to set and query sizing modes, read computed frame dimensions after layout, center blocks using frame dimensions, and create responsive layouts with percentage-based sizing.
+
+## Initialize the Editor
+
+We start by initializing CE.SDK with a Design scene and setting up the page dimensions for our layout.
+
+```typescript highlight=highlight-setup
+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' }
+});
+
+const engine = cesdk.engine;
+const page = engine.block.findByType('page')[0];
+```
+
+## Size Modes
+
+CE.SDK supports three sizing modes for block dimensions:
+
+- **Absolute**: Fixed dimensions in design units. The default mode where `setWidth()` and `setHeight()` set exact pixel values.
+- **Percent**: Dimensions relative to parent container. A value of 80 makes the block 80% of its parent's size.
+- **Auto**: Content-driven sizing. The block expands or contracts to fit its content, primarily useful for text blocks.
+
+## Setting Size Modes
+
+Use `setWidthMode()` and `setHeightMode()` to configure how a block calculates its dimensions. Width and height modes can be set independently.
+
+### Auto Mode for Text
+
+Auto mode makes text blocks expand to fit their content:
+
+```typescript highlight=highlight-auto-mode
+// Create a text block with Auto sizing mode
+// Auto mode makes the block expand to fit its content
+const titleBlock = engine.block.create('text');
+engine.block.replaceText(titleBlock, 'Auto-Resize Demo');
+engine.block.setFloat(titleBlock, 'text/fontSize', 64);
+
+// Set width and height modes to Auto
+// The block will automatically size to fit the text content
+engine.block.setWidthMode(titleBlock, 'Auto');
+engine.block.setHeightMode(titleBlock, 'Auto');
+engine.block.appendChild(page, titleBlock);
+```
+
+With Auto mode, the block's dimensions are calculated automatically based on the content. This is useful when the text content varies and you want the block to always fit exactly.
+
+### Percent Mode for Responsive Layouts
+
+Percent mode sizes blocks relative to their parent:
+
+```typescript highlight=highlight-percent-mode
+// Create a block using Percent mode for responsive sizing
+// Percent mode sizes the block relative to its parent
+const backgroundBlock = engine.block.create('graphic');
+engine.block.setShape(backgroundBlock, engine.block.createShape('rect'));
+const fill = engine.block.createFill('color');
+engine.block.setColor(fill, 'fill/color/value', {
+  r: 0.2,
+  g: 0.4,
+  b: 0.8,
+  a: 0.3
+});
+engine.block.setFill(backgroundBlock, fill);
+
+// Set to Percent mode - values are normalized (0-1)
+engine.block.setWidthMode(backgroundBlock, 'Percent');
+engine.block.setHeightMode(backgroundBlock, 'Percent');
+engine.block.setWidth(backgroundBlock, 0.8); // 80% of parent width
+engine.block.setHeight(backgroundBlock, 0.3); // 30% of parent height
+
+// Center the background block
+engine.block.setPositionX(backgroundBlock, pageWidth * 0.1); // 10% margin
+engine.block.setPositionY(backgroundBlock, pageHeight * 0.6);
+engine.block.appendChild(page, backgroundBlock);
+```
+
+Percent values represent the percentage of the parent container. A width of 80 with Percent mode means 80% of the parent's width.
+
+## Reading Frame Dimensions
+
+After layout, use `getFrameWidth()` and `getFrameHeight()` to read the computed dimensions:
+
+```typescript highlight=highlight-read-frame-dimensions
+// Read computed frame dimensions after layout
+// getFrameWidth/getFrameHeight return the actual rendered size
+const titleWidth = engine.block.getFrameWidth(titleBlock);
+const titleHeight = engine.block.getFrameHeight(titleBlock);
+
+console.log(
+  `Title dimensions: ${titleWidth.toFixed(0)}x${titleHeight.toFixed(0)} pixels`
+);
+```
+
+Frame dimensions return the actual rendered size regardless of the sizing mode. This is essential when using Auto mode since you need the computed size for positioning calculations.
+
+## Centering Blocks
+
+Combine Auto mode with frame dimensions to center blocks based on their actual size:
+
+```typescript highlight=highlight-center-block
+// Calculate centered position using frame dimensions
+const pageWidth = engine.block.getWidth(page);
+const pageHeight = engine.block.getHeight(page);
+const centerX = (pageWidth - titleWidth) / 2;
+const centerY = (pageHeight - titleHeight) / 2 - 100; // Offset up for layout
+
+// Position the title at center
+engine.block.setPositionX(titleBlock, centerX);
+engine.block.setPositionY(titleBlock, centerY);
+```
+
+This pattern reads the computed dimensions after Auto sizing and calculates the centered position.
+
+## Additional Auto-Sized Content
+
+You can create multiple auto-sized blocks and position them relative to each other:
+
+```typescript highlight=highlight-subtitle-auto
+// Create a subtitle with Auto mode
+const subtitleBlock = engine.block.create('text');
+engine.block.replaceText(
+  subtitleBlock,
+  'Text automatically sizes to fit content'
+);
+engine.block.setFloat(subtitleBlock, 'text/fontSize', 32);
+engine.block.setWidthMode(subtitleBlock, 'Auto');
+engine.block.setHeightMode(subtitleBlock, 'Auto');
+engine.block.appendChild(page, subtitleBlock);
+
+// Read computed dimensions and center
+const subtitleWidth = engine.block.getFrameWidth(subtitleBlock);
+const subtitleCenterX = (pageWidth - subtitleWidth) / 2;
+engine.block.setPositionX(subtitleBlock, subtitleCenterX);
+engine.block.setPositionY(subtitleBlock, pageHeight * 0.7);
+```
+
+## Verifying Size Modes
+
+Query the current size modes to verify your configuration:
+
+```typescript highlight=highlight-check-modes
+// Verify sizing modes
+const titleWidthMode = engine.block.getWidthMode(titleBlock);
+const titleHeightMode = engine.block.getHeightMode(titleBlock);
+const bgWidthMode = engine.block.getWidthMode(backgroundBlock);
+const bgHeightMode = engine.block.getHeightMode(backgroundBlock);
+
+console.log(`Title modes: width=${titleWidthMode}, height=${titleHeightMode}`);
+console.log(`Background modes: width=${bgWidthMode}, height=${bgHeightMode}`);
+```
+
+## Troubleshooting
+
+**Frame dimensions return 0**: Layout may not have updated yet. Read frame dimensions after all content is set and the block is attached to the scene hierarchy.
+
+**Percent mode not working**: The block must have a parent container. Percent mode calculates size relative to the parent's dimensions.
+
+**Auto mode not resizing**: Auto mode works with content that has intrinsic size, primarily text blocks. Graphics require explicit dimensions.
+
+**Unexpected dimensions**: Check which mode is active using `getWidthMode()` and `getHeightMode()`. The mode affects how width and height values are interpreted.
+
+## API Reference
+
+| Method                                    | Description                                         |
+| ----------------------------------------- | --------------------------------------------------- |
+| `engine.block.getWidth(block)`            | Get block width in current mode                     |
+| `engine.block.setWidth(block, value)`     | Set block width in current mode                     |
+| `engine.block.getWidthMode(block)`        | Get current width mode: Absolute, Percent, or Auto  |
+| `engine.block.setWidthMode(block, mode)`  | Set width mode: Absolute, Percent, or Auto          |
+| `engine.block.getHeight(block)`           | Get block height in current mode                    |
+| `engine.block.setHeight(block, value)`    | Set block height in current mode                    |
+| `engine.block.getHeightMode(block)`       | Get current height mode: Absolute, Percent, or Auto |
+| `engine.block.setHeightMode(block, mode)` | Set height mode: Absolute, Percent, or Auto         |
+| `engine.block.getFrameWidth(block)`       | Get computed width after layout                     |
+| `engine.block.getFrameHeight(block)`      | Get computed height after layout                    |
+| `engine.block.setPositionX(block, value)` | Set block X position                                |
+| `engine.block.setPositionY(block, value)` | Set block Y position                                |
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS 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