@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/outlines/strokes.md

@@ -0,0 +1,292 @@
+> 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) > [Outlines](./outlines.md) > [Stroke (Outline)](./outlines/strokes.md)
+
+---
+
+Add outlines around shapes, text, and graphics to enhance visual definition and create decorative effects.
+
+![Using Strokes example showing a rectangle with a styled blue dashed stroke](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **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-outlines-stroke-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-outlines-stroke-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-outlines-stroke-browser/)
+
+Strokes add visual outlines that define block boundaries. You can customize their color, width, line style (solid, dashed, dotted), position relative to the block edge, and corner treatment. CE.SDK provides both built-in UI controls and programmatic APIs for stroke management.
+
+```typescript file=@cesdk_web_examples/guides-outlines-stroke-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';
+
+class Example implements EditorPlugin {
+  name = 'guides-outlines-stroke-browser';
+  version = '1.0.0';
+
+  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 graphic block with a rectangle shape
+    const block = engine.block.create('graphic');
+    engine.block.setShape(block, engine.block.createShape('rect'));
+    engine.block.appendChild(page, block);
+
+    // Position and size the block
+    engine.block.setPositionX(block, 200);
+    engine.block.setPositionY(block, 150);
+    engine.block.setWidth(block, 400);
+    engine.block.setHeight(block, 300);
+
+    // Add a fill so the shape is visible
+    const solidFill = engine.block.createFill('color');
+    engine.block.setFill(block, solidFill);
+    engine.block.setColor(solidFill, 'fill/color/value', {
+      r: 0.95,
+      g: 0.95,
+      b: 0.95,
+      a: 1.0
+    });
+
+    // Check if block supports strokes
+    const canHaveStroke = engine.block.supportsStroke(block);
+    console.log('Block supports stroke:', canHaveStroke);
+
+    if (canHaveStroke) {
+      // Enable stroke on the block
+      engine.block.setStrokeEnabled(block, true);
+      const strokeIsEnabled = engine.block.isStrokeEnabled(block);
+      console.log('Stroke enabled:', strokeIsEnabled);
+
+      // Set stroke color to blue
+      engine.block.setStrokeColor(block, { r: 0.0, g: 0.4, b: 0.9, a: 1.0 });
+      const strokeColor = engine.block.getStrokeColor(block);
+      console.log('Stroke color:', strokeColor);
+
+      // Set stroke width
+      engine.block.setStrokeWidth(block, 8);
+      const strokeWidth = engine.block.getStrokeWidth(block);
+      console.log('Stroke width:', strokeWidth);
+
+      // Apply a dashed stroke style
+      engine.block.setStrokeStyle(block, 'Dashed');
+      const strokeStyle = engine.block.getStrokeStyle(block);
+      console.log('Stroke style:', strokeStyle);
+
+      // Set stroke position to outer
+      engine.block.setStrokePosition(block, 'Outer');
+      const strokePosition = engine.block.getStrokePosition(block);
+      console.log('Stroke position:', strokePosition);
+
+      // Set corner geometry to round
+      engine.block.setStrokeCornerGeometry(block, 'Round');
+      const strokeCornerGeometry = engine.block.getStrokeCornerGeometry(block);
+      console.log('Stroke corner geometry:', strokeCornerGeometry);
+    }
+
+    // Select the block to show it in the inspector
+    engine.block.select(block);
+  }
+}
+
+export default Example;
+```
+
+This guide covers how to use the stroke inspector panel for interactive editing and how to apply and manage strokes programmatically using the block API.
+
+## Using the Built-in Stroke UI
+
+The CE.SDK editor includes a stroke inspector panel for interactive stroke editing. When you select a block that supports strokes, the inspector displays stroke controls:
+
+- **Enable toggle** - Turn strokes on or off for the selected block
+- **Color picker** - Choose the stroke color with full RGBA support
+- **Width control** - Adjust stroke thickness using a slider or input field
+- **Style dropdown** - Select from solid, dashed, or dotted line patterns
+- **Position options** - Choose where the stroke renders relative to the block edge (inner, center, or outer)
+
+These controls provide a visual interface for users to customize strokes without writing code.
+
+## Checking Stroke Support
+
+Before applying strokes programmatically, verify the block supports them using `supportsStroke()`. Not all block types have stroke capabilities.
+
+```typescript highlight=highlight-check-support
+// Check if block supports strokes
+const canHaveStroke = engine.block.supportsStroke(block);
+console.log('Block supports stroke:', canHaveStroke);
+```
+
+## Enabling Strokes
+
+Enable strokes on a block using `setStrokeEnabled()`. You can check the current state with `isStrokeEnabled()`.
+
+```typescript highlight=highlight-enable-stroke
+// Enable stroke on the block
+engine.block.setStrokeEnabled(block, true);
+const strokeIsEnabled = engine.block.isStrokeEnabled(block);
+console.log('Stroke enabled:', strokeIsEnabled);
+```
+
+## Setting Stroke Color
+
+Control stroke color using `setStrokeColor()` with an RGBA color object. Color values range from 0.0 to 1.0. Retrieve the current color with `getStrokeColor()`.
+
+```typescript highlight=highlight-stroke-color
+// Set stroke color to blue
+engine.block.setStrokeColor(block, { r: 0.0, g: 0.4, b: 0.9, a: 1.0 });
+const strokeColor = engine.block.getStrokeColor(block);
+console.log('Stroke color:', strokeColor);
+```
+
+## Setting Stroke Width
+
+Set stroke thickness in design units using `setStrokeWidth()`. Larger values create more prominent outlines. Get the current width with `getStrokeWidth()`.
+
+```typescript highlight=highlight-stroke-width
+// Set stroke width
+engine.block.setStrokeWidth(block, 8);
+const strokeWidth = engine.block.getStrokeWidth(block);
+console.log('Stroke width:', strokeWidth);
+```
+
+## Stroke Styles
+
+Control the line pattern using `setStrokeStyle()`. Available styles include:
+
+- **Solid** - Continuous line
+- **Dashed** - Square-ended dashes with gaps
+- **DashedRound** - Round-ended dashes with gaps
+- **Dotted** - Circular dots
+- **LongDashed** - Longer square-ended dashes
+- **LongDashedRound** - Longer round-ended dashes
+
+```typescript highlight=highlight-stroke-style
+// Apply a dashed stroke style
+engine.block.setStrokeStyle(block, 'Dashed');
+const strokeStyle = engine.block.getStrokeStyle(block);
+console.log('Stroke style:', strokeStyle);
+```
+
+## Stroke Position
+
+Control where the stroke renders relative to the block edge using `setStrokePosition()`:
+
+- **Center** - Stroke centered on the edge (default)
+- **Inner** - Stroke rendered inside the block boundary
+- **Outer** - Stroke rendered outside the block boundary
+
+Position affects how strokes interact with adjacent elements and overall layout dimensions. Inner strokes stay within the block bounds, while outer strokes extend beyond them.
+
+```typescript highlight=highlight-stroke-position
+// Set stroke position to outer
+engine.block.setStrokePosition(block, 'Outer');
+const strokePosition = engine.block.getStrokePosition(block);
+console.log('Stroke position:', strokePosition);
+```
+
+## Stroke Corner Geometry
+
+Control how stroke corners are rendered using `setStrokeCornerGeometry()`. This is particularly visible on rectangular shapes:
+
+- **Miter** - Sharp pointed corners (default)
+- **Round** - Smoothly curved corners
+- **Bevel** - Flat cut corners
+
+```typescript highlight=highlight-stroke-corner
+// Set corner geometry to round
+engine.block.setStrokeCornerGeometry(block, 'Round');
+const strokeCornerGeometry = engine.block.getStrokeCornerGeometry(block);
+console.log('Stroke corner geometry:', strokeCornerGeometry);
+```
+
+## Troubleshooting
+
+If strokes don't appear as expected, check these common issues:
+
+- **Stroke not visible** - Verify stroke is enabled with `isStrokeEnabled()` and width is greater than 0
+- **Stroke color appears wrong** - Ensure color values are in the 0.0-1.0 range, not 0-255
+- **Stroke affects layout unexpectedly** - Use Inner position to keep strokes within bounds, or Outer if you want strokes to extend beyond the block
+- **Block doesn't support strokes** - Use `supportsStroke()` to verify capability before applying stroke properties
+
+## API Reference
+
+| Method                                       | Description                                    |
+| -------------------------------------------- | ---------------------------------------------- |
+| `block.supportsStroke(block)`                | Check if a block supports strokes              |
+| `block.setStrokeEnabled(block, enabled)`     | Enable or disable stroke on a block            |
+| `block.isStrokeEnabled(block)`               | Check if stroke is enabled                     |
+| `block.setStrokeColor(block, color)`         | Set stroke color (RGBA, values 0.0-1.0)        |
+| `block.getStrokeColor(block)`                | Get current stroke color                       |
+| `block.setStrokeWidth(block, width)`         | Set stroke thickness in design units           |
+| `block.getStrokeWidth(block)`                | Get current stroke width                       |
+| `block.setStrokeStyle(block, style)`         | Set line pattern (Solid, Dashed, Dotted, etc.) |
+| `block.getStrokeStyle(block)`                | Get current stroke style                       |
+| `block.setStrokePosition(block, position)`   | Set stroke position (Center, Inner, Outer)     |
+| `block.getStrokePosition(block)`             | Get current stroke position                    |
+| `block.setStrokeCornerGeometry(block, type)` | Set corner rendering (Miter, Round, Bevel)     |
+| `block.getStrokeCornerGeometry(block)`       | Get current corner geometry                    |
+
+---
+
+## 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/outlines.md

@@ -0,0 +1,22 @@
+> 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) > [Outlines](./outlines.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Overview](./outlines/overview.md) - Enhance design elements with strokes, shadows, and glow effects to improve contrast and visual appeal.
+- [Using Strokes](./outlines/strokes.md) - Add and customize outlines around shapes, text, or images using stroke settings.
+- [Shadows and Glows](./outlines/shadows-and-glows.md) - Add visual depth and emphasis to design elements using drop shadows and glow effects.
+
+---
+
+## 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/overview.md

@@ -0,0 +1,22 @@
+> 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) > [Create and Edit Videos](./create-video.md) > [Editing Overview](./overview.md)
+
+---
+
+Use CreativeEditor SDK (CE.SDK) to build robust video editing experiences directly in your app. CE.SDK supports both video and audio editing — including trimming, joining, adding text, annotating, and more — all performed client-side without requiring a server. Developers can integrate editing functionality using a built-in UI or programmatically via the SDK API.
+
+CE.SDK also supports music and sound effects alongside video editing. You can integrate custom or third-party AI models to streamline creative workflows, such as converting image to video or generating clips from text.
+
+[Launch Web Demo](https://img.ly/showcases/cesdk)
+
+[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
+- **[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/performance.md

@@ -0,0 +1,217 @@
+> 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) > [Improve Performance](./performance.md)
+
+---
+
+Optimize CE.SDK integration for faster load times, efficient memory usage, and
+smooth runtime performance in browser environments.
+
+CE.SDK has a large bundle size that can impact initial page load. Optimizing how you load, use, and dispose of the editor improves application performance and user experience.
+
+This guide covers code splitting techniques to defer loading, source sets for managing large assets, export optimization with workers and quality settings, and proper lifecycle management.
+
+## Code Splitting
+
+Delay loading the engine module to improve initial page load time. Use dynamic imports to load the engine only when needed.
+
+### Using a Bundler
+
+Use dynamic `import()` with bundlers like Webpack, Rollup, or Vite to create separate chunks that load on demand. The bundler automatically handles code splitting when you use dynamic imports.
+
+```ts
+async function loadCreativeEditorSDK(): Promise<typeof CreativeEditorSDK> {
+  const { default: CreativeEditorSDK } = await import('@cesdk/cesdk-js');
+  return CreativeEditorSDK;
+}
+```
+
+This approach keeps CE.SDK in a separate bundle that loads only when `loadCreativeEditorSDK()` is called. Users who never open the editor avoid downloading the SDK entirely.
+
+### Using CDN
+
+Load CE.SDK directly from CDN using dynamic imports. This works in modern browsers without any build tooling.
+
+```ts
+async function loadCreativeEditorSDK(): Promise<typeof CreativeEditorSDK> {
+  const { default: CreativeEditorSDK } =
+    await import('https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ_VERSION$/index.js');
+  return CreativeEditorSDK;
+}
+```
+
+CDN loading offloads bandwidth from your servers and leverages global CDN caching for faster delivery.
+
+## Managing Large Assets
+
+High-resolution images and videos consume significant memory. Optimize asset loading to reduce memory pressure and improve performance.
+
+### Use Source Sets
+
+Source sets allow you to provide multiple resolution variants of the same image. The engine automatically selects the most appropriate resolution based on the current display size, loading smaller images for previews and higher resolution assets only when needed for exports.
+
+```ts
+const imageFill = engine.block.createFill('image');
+
+engine.block.setSourceSet(imageFill, 'fill/image/sourceSet', [
+  {
+    uri: 'https://img.ly/static/ubq_samples/sample_1_512x341.jpg',
+    width: 512,
+    height: 341
+  },
+  {
+    uri: 'https://img.ly/static/ubq_samples/sample_1_1024x683.jpg',
+    width: 1024,
+    height: 683
+  },
+  {
+    uri: 'https://img.ly/static/ubq_samples/sample_1_2048x1366.jpg',
+    width: 2048,
+    height: 1366
+  }
+]);
+
+engine.block.setFill(block, imageFill);
+```
+
+This approach reduces initial load times and memory usage during editing while ensuring high-quality exports. See [Source Sets](./import-media/source-sets.md) for more details.
+
+### Additional Optimization Tips
+
+- Remove unused assets from the scene when no longer needed
+- Dispose the engine when the editing session ends
+- Use optimized image formats (WebP, AVIF) for faster loading
+
+## Export Optimization
+
+Optimize export performance through worker configuration and export settings.
+
+### Use Export Workers
+
+CE.SDK uses Web Workers to offload export rendering to background threads, keeping the main thread responsive during exports. Workers are enabled by default for both image and video exports.
+
+For video exports, the `exportWorker` configuration option controls worker usage:
+
+```ts
+const config = {
+  license: 'YOUR_CESDK_LICENSE_KEY',
+  callbacks: {
+    exportWorker: true // Enabled by default
+  }
+};
+
+const cesdk = await CreativeEditorSDK.create('#cesdk_container', config);
+```
+
+### Optimize Export Settings
+
+Adjust export parameters to balance quality and performance:
+
+- **Lower resolution**: Reduce `targetWidth` and `targetHeight` for faster exports on slower devices
+- **Adjust quality**: Use lower JPEG quality (0.7-0.8) for smaller file sizes and faster encoding
+- **Choose efficient formats**: WebP typically offers better compression than PNG for images with transparency
+
+```ts
+// Export with optimized settings for performance
+const blob = await engine.block.export(page, 'image/jpeg', {
+  targetWidth: 1920,
+  targetHeight: 1080,
+  jpegQuality: 0.8
+});
+```
+
+### Export Size Limits
+
+Check device export capabilities before attempting large exports using `engine.editor.getMaxExportSize()`.
+
+```ts
+const maxExportSize = engine.editor.getMaxExportSize();
+
+// Verify design fits within limits
+const pageWidth = engine.block.getWidth(page);
+const pageHeight = engine.block.getHeight(page);
+
+if (pageWidth > maxExportSize || pageHeight > maxExportSize) {
+  console.warn(
+    'Design exceeds maximum export size - consider reducing dimensions'
+  );
+}
+```
+
+This returns the maximum dimension in pixels that the device can reliably export.
+
+## Engine Lifecycle
+
+Follow proper patterns for initializing and disposing the engine to prevent memory leaks and ensure consistent behavior.
+
+### Initialization
+
+Initialize the engine once and reuse the instance. Pass essential configuration including license key and baseURL.
+
+```ts
+import CreativeEditorSDK from '@cesdk/cesdk-js';
+
+const config = {
+  license: 'YOUR_CESDK_LICENSE_KEY',
+  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets'
+};
+
+const cesdk = await CreativeEditorSDK.create('#cesdk_container', config);
+const engine = cesdk.engine;
+```
+
+When using the full CE.SDK (not just the engine), the editor creates a managed canvas element accessible via `cesdk.engine`. Avoid creating multiple engine instances simultaneously.
+
+### Disposal
+
+Call `dispose()` when the editing session ends to free all resources including GPU memory, textures, and native allocations.
+
+```ts
+cesdk.dispose();
+```
+
+After disposal, the engine instance becomes unusable. Create a new instance if the user returns to the editor.
+
+## Asset Loading
+
+For production deployments, host engine assets on your own servers to improve reliability and reduce dependency on external CDNs. Configure `baseURL` to point to your asset location.
+
+See [Serve Assets From Your Server](./serve-assets.md) for detailed setup instructions.
+
+## Troubleshooting
+
+### Large Initial Load Time
+
+Implement code splitting to defer engine loading until needed. Use dynamic imports with bundlers or CDN loading to keep the main bundle small.
+
+### Slow Export Performance
+
+Enable export workers (default) and reduce export resolution or quality settings. For complex scenes, consider exporting at a lower resolution and scaling up if needed.
+
+### Memory Leaks
+
+Ensure `dispose()` is called when the editor is closed. In SPAs, use cleanup functions in component lifecycle hooks to dispose the engine on unmount.
+
+## API Reference
+
+| Method                             | Description                            |
+| ---------------------------------- | -------------------------------------- |
+| `CreativeEditorSDK.create()`       | Initialize a new CE.SDK instance       |
+| `cesdk.dispose()`                  | Clean up all resources                 |
+| `engine.editor.getMaxExportSize()` | Get maximum export dimension in pixels |
+| `engine.block.export()`            | Export a block to image or video       |
+
+## Next Steps
+
+- [Architecture](./concepts/architecture.md) - Understand CE.SDK structure and components
+- [Headless Mode](./concepts/headless-mode/browser.md) - Run the engine without UI for automation
+- [Export Overview](./export-save-publish/export/overview.md) - Learn about export formats and options
+
+---
+
+## 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