@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/guides.md

@@ -0,0 +1,49 @@
+> 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)
+
+---
+
+---
+
+## Related Pages
+
+- [Configuration](./configuration.md) - Learn how to configure CE.SDK to match your application's functional, visual, and performance requirements.
+- [Actions API](./actions.md) - Learn how to use the Actions API to register and customize action handlers in CE.SDK
+- [Settings](./settings.md) - Explore all configurable editor settings and learn how to read, update, and observe them via the Settings API.
+- [Serve Assets](./serve-assets.md) - Configure CE.SDK to load engine and content assets from your own servers instead of the IMG.LY CDN for production deployments.
+- [Engine Interface](./engine-interface.md) - Understand CE.SDK's architecture and learn when to use direct Engine access for automation workflows
+- [Automate Workflows](./automation.md) - Automate repetitive editing tasks using CE.SDK’s headless APIs to generate assets at scale.
+- [AI Integration](./user-interface/ai-integration.md) - Integrate external AI services into CE.SDK to enhance creative workflows and power advanced features.
+- [User Interface](./user-interface.md) - Use CE.SDK’s customizable, production-ready UI or replace it entirely with your own interface.
+- [Open the Editor](./open-the-editor.md) - Learn how to load and create scenes, set the zoom level, and configure file proxies or URI resolvers.
+- [Insert Media Into Scenes](./insert-media.md) - Understand how insertion works, how inserted media behave within scenes, and how to control them via UI or code.
+- [Import Media](./import-media.md) - Learn how to import, manage, and customize assets from local, remote, or camera sources in CE.SDK.
+- [Export](./export-save-publish/export.md) - Explore export options, supported formats, and configuration features for sharing or rendering output.
+- [Save](./export-save-publish/save.md) - Save design progress locally or to a backend service to allow for later editing or publishing.
+- [Store Custom Metadata](./export-save-publish/store-custom-metadata.md) - Attach, retrieve, and manage custom key-value metadata on design blocks in CE.SDK.
+- [Edit Image](./edit-image.md) - Use CE.SDK to crop, transform, annotate, or enhance images with editing tools and programmatic APIs.
+- [Create Videos](./create-video.md) - Learn how to create and customize videos in CE.SDK using scenes, assets, and time-based editing.
+- [Audio](./create-audio/audio.md) - Create audio in videos
+- [Text](./text.md) - Add, style, and customize text layers in your design using CE.SDK’s flexible text editing tools.
+- [Create and Edit Shapes](./shapes.md) - Draw custom vector shapes, combine them with boolean operations, and insert QR codes into your designs.
+- [Create and Edit Stickers](./stickers.md) - Create and customize stickers using image fills for icons, logos, emoji, and multi-color graphics.
+- [Create Compositions](./create-composition.md) - Combine and arrange multiple elements to create complex, multi-page, or layered design compositions.
+- [Create Templates](./create-templates.md) - Learn how to create, import, and manage reusable templates to streamline design creation in CE.SDK.
+- [Colors](./colors.md) - Manage color usage in your designs, from applying brand palettes to handling print and screen formats.
+- [Fills](./fills.md) - Apply solid colors, gradients, images, or videos as fills to shapes, text, and other design elements.
+- [Outlines](./outlines.md) - Enhance design elements with strokes, shadows, and glow effects to improve contrast and visual appeal.
+- [Filters and Effects](./filters-and-effects.md) - Enhance visual elements with filters and effects such as blur, duotone, LUTs, and chroma keying.
+- [Animation](./animation.md) - Add motion to designs with support for keyframes, timeline editing, and programmatic animation control.
+- [Rules](./rules.md) - Define and enforce layout, branding, and safety rules to ensure consistent and compliant designs.
+- [Conversion](./conversion.md) - Convert designs into different formats such as PDF, PNG, MP4, and more using CE.SDK tools.
+- [Improve Performance](./performance.md) - Optimize CE.SDK browser integration with code splitting, source sets for large assets, export workers, and lifecycle best practices.
+
+---
+
+## 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/import-media/asset-library.md

@@ -0,0 +1,23 @@
+> 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) > [Import Media Assets](./import-media.md) > [Asset Library](./import-media/asset-library.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Basics](./import-media/asset-panel/basics.md) - Explore the core functionality of the asset library and how users browse, search, and insert media.
+- [Customize](./import-media/asset-panel/customize.md) - Adapt the asset library UI and behavior to suit your application’s structure and user needs.
+- [Thumbnails](./import-media/asset-panel/thumbnails.md) - Configure thumbnail images for assets in CE.SDK's asset library with proper sizing, preview URIs for audio, and customized UI display.
+- [Refresh Assets](./import-media/asset-panel/refresh-assets.md) - Trigger asset reloads to ensure the library reflects newly uploaded or updated items.
+
+---
+
+## 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/import-media/asset-panel/basics.md

@@ -0,0 +1,324 @@
+> 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) > [Import Media Assets](./import-media.md) > [Asset Library](./import-media/asset-library.md) > [Basics](./import-media/asset-panel/basics.md)
+
+---
+
+CE.SDK treats all insertable content as assets—images, videos, audio, stickers, shapes, templates, and text presets flow through a unified asset system.
+
+![Asset Library Basics example showing the CE.SDK editor with a custom asset library entry in the dock](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-import-media-asset-library-basics-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-asset-library-basics-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-asset-library-basics-browser/)
+
+The asset library connects the engine to the user interface through three layers:
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  User Interface                                             │
+│  ┌─────────────┐    references    ┌──────────────────────┐  │
+│  │  Dock Entry │ ───────────────▶ │ Asset Library Entry  │  │
+│  │  (Button)   │                  │ (Display Config)     │  │
+│  └─────────────┘                  └──────────┬───────────┘  │
+│                                              │ queries      │
+├──────────────────────────────────────────────│──────────────┤
+│  Engine                                      ▼              │
+│                                   ┌──────────────────────┐  │
+│                                   │    Asset Source      │  │
+│                                   │    (Data Provider)   │  │
+│                                   └──────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+The following example demonstrates all three layers working together:
+
+```typescript file=@cesdk_web_examples/guides-import-media-asset-library-basics-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: Asset Library Basics Guide
+ *
+ * Demonstrates the asset library architecture:
+ * - Creating a custom asset source (engine layer)
+ * - Creating an asset library entry (UI configuration layer)
+ * - Connecting the entry to the dock (UI interaction layer)
+ */
+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: {
+        sourceId: 'ly.img.page.presets',
+        assetId: 'ly.img.page.presets.print.iso.a6.landscape'
+      }
+    });
+
+    // Layer 1: Asset Source - provides assets to the UI
+    cesdk.engine.asset.addSource({
+      id: 'my-custom-images',
+      findAssets: async () => ({
+        assets: [
+          {
+            id: 'sample-1',
+            meta: {
+              uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+              thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+              width: 1920,
+              height: 1280
+            }
+          },
+          {
+            id: 'sample-2',
+            meta: {
+              uri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+              thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+              width: 1920,
+              height: 1280
+            }
+          },
+          {
+            id: 'sample-3',
+            meta: {
+              uri: 'https://img.ly/static/ubq_samples/sample_3.jpg',
+              thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg',
+              width: 1920,
+              height: 1280
+            }
+          }
+        ],
+        total: 3,
+        currentPage: 1,
+        nextPage: undefined
+      }),
+      applyAsset: async (assetResult) =>
+        cesdk.engine.asset.defaultApplyAsset(assetResult)
+    });
+
+    // Layer 2: Asset Library Entry - connects sources to display settings
+    cesdk.ui.addAssetLibraryEntry({
+      id: 'my-images-entry',
+      sourceIds: ['my-custom-images'],
+      previewLength: 3,
+      gridColumns: 3,
+      gridItemHeight: 'square'
+    });
+
+    // Layer 3: Dock - adds button to access the entry
+    cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [
+      {
+        id: 'ly.img.assetLibrary.dock',
+        key: 'my-images-entry',
+        label: 'libraries.my-images-entry.label',
+        entries: ['my-images-entry']
+      },
+      ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' })
+    ]);
+    cesdk.i18n.setTranslations({
+      en: { 'libraries.my-images-entry.label': 'My Images' }
+    });
+
+    // Query registered entries
+    const allEntries = cesdk.ui.findAllAssetLibraryEntries();
+    console.log('Registered entries:', allEntries);
+
+    const myEntry = cesdk.ui.getAssetLibraryEntry('my-images-entry');
+    console.log('My entry:', myEntry);
+
+    // Open the panel to show the custom assets immediately
+    cesdk.ui.openPanel('//ly.img.panel/assetLibrary', {
+      payload: { entries: ['my-images-entry'] }
+    });
+  }
+}
+
+export default Example;
+```
+
+This guide covers:
+
+- Registering asset sources with the engine
+- Creating asset library entries to configure display settings
+- Adding entries to the dock for user access
+
+## Layer 1: Asset Source
+
+Asset sources provide data through `findAssets` and handle insertion through `applyAsset`. Register them with `engine.asset.addSource()`.
+
+```typescript highlight=highlight-asset-source
+// Layer 1: Asset Source - provides assets to the UI
+cesdk.engine.asset.addSource({
+  id: 'my-custom-images',
+  findAssets: async () => ({
+    assets: [
+      {
+        id: 'sample-1',
+        meta: {
+          uri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+          thumbUri: 'https://img.ly/static/ubq_samples/sample_1.jpg',
+          width: 1920,
+          height: 1280
+        }
+      },
+      {
+        id: 'sample-2',
+        meta: {
+          uri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+          thumbUri: 'https://img.ly/static/ubq_samples/sample_2.jpg',
+          width: 1920,
+          height: 1280
+        }
+      },
+      {
+        id: 'sample-3',
+        meta: {
+          uri: 'https://img.ly/static/ubq_samples/sample_3.jpg',
+          thumbUri: 'https://img.ly/static/ubq_samples/sample_3.jpg',
+          width: 1920,
+          height: 1280
+        }
+      }
+    ],
+    total: 3,
+    currentPage: 1,
+    nextPage: undefined
+  }),
+  applyAsset: async (assetResult) =>
+    cesdk.engine.asset.defaultApplyAsset(assetResult)
+});
+```
+
+For details on asset source configuration, see the [Asset Sources concept](./import-media/concepts.md).
+
+## Layer 2: Asset Library Entry
+
+Entries connect asset sources to display settings. Create them with `cesdk.ui.addAssetLibraryEntry()`.
+
+```typescript highlight=highlight-asset-entry
+// Layer 2: Asset Library Entry - connects sources to display settings
+cesdk.ui.addAssetLibraryEntry({
+  id: 'my-images-entry',
+  sourceIds: ['my-custom-images'],
+  previewLength: 3,
+  gridColumns: 3,
+  gridItemHeight: 'square'
+});
+```
+
+For display properties like `gridColumns` and `previewLength`, see the [Thumbnails](./import-media/asset-panel/thumbnails.md) guide.
+
+## Layer 3: Dock
+
+Add entries to the dock with `cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, order)` using the `ly.img.assetLibrary.dock` component type.
+
+```typescript highlight=highlight-dock-entry
+// Layer 3: Dock - adds button to access the entry
+cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [
+  {
+    id: 'ly.img.assetLibrary.dock',
+    key: 'my-images-entry',
+    label: 'libraries.my-images-entry.label',
+    entries: ['my-images-entry']
+  },
+  ...cesdk.ui.getComponentOrder({ in: 'ly.img.dock' })
+]);
+cesdk.i18n.setTranslations({
+  en: { 'libraries.my-images-entry.label': 'My Images' }
+});
+```
+
+## Managing Entries
+
+Query and inspect registered entries:
+
+```typescript highlight=highlight-list-entries
+// Query registered entries
+const allEntries = cesdk.ui.findAllAssetLibraryEntries();
+console.log('Registered entries:', allEntries);
+
+const myEntry = cesdk.ui.getAssetLibraryEntry('my-images-entry');
+console.log('My entry:', myEntry);
+```
+
+## API Reference
+
+| Method                         | Description                   |
+| ------------------------------ | ----------------------------- |
+| `findAllAssetLibraryEntries()` | List all registered entry IDs |
+| `getAssetLibraryEntry(id)`     | Get entry configuration       |
+| `addAssetLibraryEntry(entry)`  | Register a new entry          |
+| `removeAssetLibraryEntry(id)`  | Remove an entry               |
+
+## Next Steps
+
+- [Customize](./import-media/asset-panel/customize.md) — Icons, i18n, replace libraries
+- [Thumbnails](./import-media/asset-panel/thumbnails.md) — Thumbnail URIs, display settings
+- [Refresh Assets](./import-media/asset-panel/refresh-assets.md) — Trigger asset reloads
+- [Asset Sources](./import-media/concepts.md) — Creating asset sources
+
+---
+
+## 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