@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/starterkits/creative-automation.md

@@ -0,0 +1,28 @@
+> 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:** [Starter Kits](./starterkits.md) > [Creative Automation](./starterkits/creative-automation.md)
+
+---
+
+Create dynamic templates to auto-generate image and design variations from data sources.
+
+---
+
+## Related Pages
+
+- [3D Mockup Editor](./starterkits/3d-mockup-editor.md) - Integrate CE.SDK with 3D libraries for real-time, interactive design previews on products. Enhance accuracy and boost conversions with lifelike visuals.
+- [Mockup Editor](./starterkits/mockup-editor.md) - Easily visualize the final product with the Mockup Editor. Suitable for apparel, postcards, posters, business cards, and social media product designs.
+- [Automatic Design Generation](./starterkits/design-generation.md) - Automatically generate ready-to-use designs from a set of input parameters.
+- [Multi Image Generation](./starterkits/multi-image-generation.md) - Generate multiple image variants for a single data point.
+- [Data Merge](./starterkits/data-merge.md) - Generate a batch of images from a set of data, for instance team cards.
+- [Automated Resizing](./starterkits/auto-resize.md) - Automatically generate size variations of your design and easily scale your marketing materials across different platforms.
+- [Export Using Renderer](./starterkits/export-using-renderer.md) - The Renderer brings CE.SDK's design engine to your backend with fast, compliant, enterprise-ready export for images, PDFs, and video, enabling organizations to generate media at scale with full fidelity and predictable performance.
+
+---
+
+## 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/starterkits/custom-built-uis.md

@@ -0,0 +1,26 @@
+> 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:** [Starter Kits](./starterkits.md) > [Custom Built UIs](./starterkits/custom-built-uis.md)
+
+---
+
+Fully custom UIs built with React using the Engine API. Freely adapt to your use case.
+
+---
+
+## Related Pages
+
+- [Postcard UI](./starterkits/postcard-editor.md) - Built to facilitate optimal post- and greeting-card design, from changing accent colors and selecting fonts to custom messages and pictures.
+- [Photobook UI](./starterkits/photobook-ui.md) - Custom UI for building photo books focusing on theming, page layouts, and managing photo assets.
+- [Mobile UI](./starterkits/mobile-ui.md) - Easily build custom mobile UIs and provide a seamless design editing experience for your users, on both iOS and Android.
+- [Photo UI](./starterkits/photo-ui.md) - Photo UI is equipped with advanced photo editing options while remaining easy and intuitive to use. Try the demo and see for yourself.
+- [Apparel UI](./starterkits/apparel-ui.md) - Custom, mobile apparel UI for creating print-ready design.
+
+---
+
+## 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/starterkits/customization.md

@@ -0,0 +1,29 @@
+> 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:** [Starter Kits](./starterkits.md) > [Customization](./starterkits/customization.md)
+
+---
+
+Configure the editor UI to fit your design — theming, localization, export options, and layout controls.
+
+---
+
+## Related Pages
+
+- [Theming](./starterkits/theming.md) - Effortlessly adapt the UI of the CreativeEditor SDK to best match your app. With Theming you can easily change elements like theme, scaling, and background.
+- [Translation & Internationalization](./starterkits/translation-internationalization.md) - Ships with English and German. Supports translations for any language.
+- [Single Page Editor](./starterkits/single-page-editor.md) - The editor shows only one active page at a time.
+- [Start With Image](./starterkits/start-with-image.md) - Initialize the editor with an image matching the page size.
+- [Export Options Editor](./starterkits/export-options.md) - Export designs in JPG, PNG, or PDF with custom quality, page ranges, and dimensions using CE.SDK's advanced export features.
+- [Force Crop Editor](./starterkits/force-crop-editor.md) - Start editing with predefined crop presets to simplify content creation and maintain layout consistency.
+- [Print-Ready PDF Editor](./starterkits/print-ready-pdf-editor.md) - Deliver print-ready CMYK PDF/X-3 files straight from your web app. Perfect for web-to-print and marketing automation.
+- [Video Export Options](./starterkits/video-export-options.md) - Choose a suitable Frames per Second option and export videos in SD, HD, FHD, 2K, 4K, or define custom quality.
+
+---
+
+## 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/starterkits/cutout-lines-editor.md

@@ -0,0 +1,470 @@
+> 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:** [Starter Kits](./starterkits.md) > [Plugins](./starterkits/plugins.md) > [Cutout Lines Editor](./starterkits/cutout-lines-editor.md)
+
+---
+
+CE.SDK's cutout plugin enables effortless creation and customization of cutout shapes for web-to-print users.
+
+![Cutout Lines Editor starter kit showing cutout line creation interface](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **Reading time:** 10 minutes
+>
+> **Resources:**
+>
+> - [Download examples](https://github.com/imgly/starterkit-cutout-lines-editor-ts-web/archive/refs/tags/release-$UBQ_VERSION$.zip)
+> - [View source on GitHub](https://github.com/imgly/starterkit-cutout-lines-editor-ts-web/tree/release-$UBQ_VERSION$)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-cutout-lines-editor-ts-web/tree/release-$UBQ_VERSION$)
+> - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-cutout-lines-editor/)
+
+---
+
+## Prerequisites
+
+Before you begin, make sure you have the following:
+
+- **Node.js v20+** and npm installed locally – [Download Node.js](https://nodejs.org/)
+- A **supported browser** – Chrome 114+, Edge 114+, Firefox 115+, Safari 15.6+<br />
+  See [Browser Support](./browser-support.md) for the full list.
+
+---
+
+<Tabs syncKey="project-type">
+  <TabItem label="New Project">
+    ## Get Started
+
+    Run the Cutout Lines Editor starter kit directly with Vite.
+
+    ## Step 1: Clone the Starter Kit
+
+    <TerminalTabs>
+      <TerminalTab label="git">
+        git clone https://github.com/imgly/starterkit-cutout-lines-editor-ts-web.git
+        cd starterkit-cutout-lines-editor-ts-web
+      </TerminalTab>
+
+      <TerminalTab label="degit">
+        npx degit imgly/starterkit-cutout-lines-editor-ts-web my-project
+        cd my-project
+      </TerminalTab>
+    </TerminalTabs>
+
+    ## Step 2: Install Dependencies
+
+    <TerminalTabs syncKey="package-manager">
+      <TerminalTab label="npm">npm install</TerminalTab>
+      <TerminalTab label="pnpm">pnpm install</TerminalTab>
+      <TerminalTab label="yarn">yarn install</TerminalTab>
+    </TerminalTabs>
+
+    ## Step 3: Download Assets
+
+    CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `public/` directory.
+
+    <TerminalTabs>
+      <TerminalTab label="Download">
+        curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip
+        unzip imgly-assets.zip -d public/
+        rm imgly-assets.zip
+      </TerminalTab>
+    </TerminalTabs>
+
+    ## Step 4: Run the Development Server
+
+    <TerminalTabs syncKey="package-manager">
+      <TerminalTab label="npm">npm run dev</TerminalTab>
+      <TerminalTab label="pnpm">pnpm dev</TerminalTab>
+      <TerminalTab label="yarn">yarn dev</TerminalTab>
+    </TerminalTabs>
+
+    Open `http://localhost:5173` in your browser. Select a shape and right-click to create cutout lines.
+
+  </TabItem>
+
+  <TabItem label="Existing Project">
+    ## Get Started
+
+    Integrate the Cutout Lines Editor into an existing vanilla JavaScript/TypeScript project. This adds the editor configuration to your current project structure.
+
+    ## Step 1: Clone
+
+    <TerminalTabs>
+      <TerminalTab label="Navigate">
+        cd your-project
+      </TerminalTab>
+    </TerminalTabs>
+
+    Clone the starter kit and copy the editor configuration to your project:
+
+    <TerminalTabs>
+      <TerminalTab label="git">
+        git clone https://github.com/imgly/starterkit-cutout-lines-editor-ts-web.git
+        cp -r starterkit-cutout-lines-editor-ts-web/src/imgly ./src/imgly
+        rm -rf starterkit-cutout-lines-editor-ts-web
+      </TerminalTab>
+
+      <TerminalTab label="degit">
+        npx degit imgly/starterkit-cutout-lines-editor-ts-web/src/imgly ./src/imgly
+      </TerminalTab>
+    </TerminalTabs>
+
+    > **Adjust Path:** The default destination is `./src/imgly`. Adjust the path to match your project structure.
+
+    The `imgly/` folder contains the editor configuration:
+
+    ```
+    imgly/
+    ├── config/
+    │   ├── actions.ts                # Export/import actions
+    │   ├── features.ts               # Feature toggles
+    │   ├── i18n.ts                   # Translations
+    │   ├── plugin.ts                 # Main configuration plugin
+    │   ├── settings.ts               # Engine settings
+    │   └── ui/
+    │       ├── canvas.ts                 # Canvas configuration
+    │       ├── components.ts             # Custom component registration
+    │       ├── dock.ts                   # Dock layout configuration
+    │       ├── index.ts                  # Combines UI customization exports
+    │       ├── inspectorBar.ts           # Inspector bar layout
+    │       ├── navigationBar.ts          # Navigation bar layout
+    │       └── panel.ts                  # Panel configuration
+    ├── index.ts                  # Editor initialization function
+    └── plugins/
+        └── cutout-library.ts
+    ```
+
+    ## Step 2: Install Dependencies
+
+    Install the required packages for the editor:
+
+    ### Core Editor
+
+    Install the Creative Editor SDK:
+
+    <TerminalTabs syncKey="package-manager">
+      <TerminalTab label="npm">npm install @cesdk/cesdk-js@$UBQ\_VERSION$</TerminalTab>
+      <TerminalTab label="pnpm">pnpm add @cesdk/cesdk-js@$UBQ\_VERSION$</TerminalTab>
+      <TerminalTab label="yarn">yarn add @cesdk/cesdk-js@$UBQ\_VERSION$</TerminalTab>
+    </TerminalTabs>
+
+    ### Cutout Library Plugin
+
+    Add cutout line creation:
+
+    <TerminalTabs syncKey="package-manager">
+      <TerminalTab label="npm">npm install @imgly/plugin-cutout-library-web@$UBQ\_VERSION$</TerminalTab>
+      <TerminalTab label="pnpm">pnpm add @imgly/plugin-cutout-library-web@$UBQ\_VERSION$</TerminalTab>
+      <TerminalTab label="yarn">yarn add @imgly/plugin-cutout-library-web@$UBQ\_VERSION$</TerminalTab>
+    </TerminalTabs>
+
+    - `@imgly/plugin-cutout-library-web` – CE.SDK plugin that integrates cutout line creation into the editor UI (canvas menu and dock panel)
+
+    ## Step 3: Download Assets
+
+    CE.SDK requires engine assets (fonts, icons, UI elements) to function. These must be served as static files from your project's `public/` directory.
+
+    <TerminalTabs>
+      <TerminalTab label="Download">
+        curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ\_VERSION$/imgly-assets.zip
+        unzip imgly-assets.zip -d public/
+        rm imgly-assets.zip
+      </TerminalTab>
+    </TerminalTabs>
+
+    > **Asset Configuration:** The starter kit is pre-configured to load assets from `/assets`. If you place assets in a different location, update the `baseURL` in Step 4: Add a Container Element.
+
+    ## Step 4: Add a Container Element
+
+    Add a container element to your HTML where the editor will be mounted:
+
+    ```html
+    <div id="cesdk_container" style="width: 100%; height: 100vh;"></div>
+    ```
+
+    ## Step 5: Initialize the Editor
+
+    Import and call the initialization function from your entry point:
+
+    ```typescript title="src/index.ts"
+    import CreativeEditorSDK from '@cesdk/cesdk-js';
+    import { initCutoutLinesEditor } from './imgly';
+
+    const config = {
+      baseURL: '/assets'
+    };
+
+    CreativeEditorSDK.create('#cesdk_container', config)
+      .then(async (cesdk) => {
+        await initCutoutLinesEditor(cesdk);
+      })
+      .catch((error) => {
+        console.error('Failed to initialize CE.SDK:', error);
+      });
+    ```
+
+  </TabItem>
+</Tabs>
+
+## Using Cutout Line Creation
+
+The editor provides two ways to create cutout lines:
+
+### Via Canvas Menu
+
+1. Select a shape in the editor
+2. Right-click to open the canvas menu
+3. Click "Create Cutout" to generate die-cut lines
+
+### Via Cutout Panel
+
+1. Click the "Cutout" button in the dock (left sidebar)
+2. The Cutout panel opens showing saved cutouts
+3. Click on a cutout to apply it to your design
+
+> **Print-Ready Output:** Cutout lines are designed for PDF export. The lines are rendered as spot colors that professional printers can use for die-cutting stickers, labels, and packaging.
+
+## Set Up a Scene
+
+CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case:
+
+```typescript title="src/index.ts"
+// Create a blank design canvas - starts with an empty design scene
+await cesdk.actions.run('scene.create');
+
+// Load from a template archive - restores a previously saved project
+await cesdk.loadFromArchiveURL('https://example.com/template.zip');
+
+// Load from an image URL - creates a new scene with the image
+await cesdk.createFromImage('https://example.com/image.jpg');
+
+// Load from a scene file - restores a scene from JSON
+await cesdk.loadFromURL('https://example.com/scene.json');
+```
+
+The `createDesignScene()` method is ideal for design workflows, as it creates a blank canvas ready for content.
+
+> **More Loading Options:** See [Open the Editor](./open-the-editor.md) for all available loading methods.
+
+## Customize Assets
+
+The Cutout Lines Editor uses asset source plugins to provide built-in libraries for templates, stickers, shapes, and fonts. The starter kit includes a curated selection—customize what's included based on your needs.
+
+Asset sources are added via plugins in `src/imgly/index.ts`. Enable or disable individual sources:
+
+```typescript title="src/imgly/index.ts"
+import {
+  FiltersAssetSource,
+  StickerAssetSource,
+  TextAssetSource,
+  VectorShapeAssetSource,
+  EffectsAssetSource
+  // ...
+} from '@cesdk/cesdk-js/plugins';
+
+// Add only the sources you need
+await cesdk.addPlugin(new FiltersAssetSource());
+await cesdk.addPlugin(new StickerAssetSource());
+await cesdk.addPlugin(new TextAssetSource());
+await cesdk.addPlugin(new VectorShapeAssetSource());
+await cesdk.addPlugin(new EffectsAssetSource());
+// ...
+```
+
+> **Available Asset Sources:** See [Asset Source Plugins](./plugins/asset-sources.md) for the complete list of available sources.
+
+For production deployments, self-hosting assets is required—the IMG.LY CDN is intended for development only. See [Serve Assets](./serve-assets.md) for downloading assets, configuring `baseURL`, and excluding unused sources to optimize load times.
+
+## Configure Actions
+
+Actions are functions that handle user interactions like exporting designs, saving scenes, and importing files. CE.SDK provides built-in actions that you can run directly or override with custom implementations.
+
+**Key built-in actions:**
+
+- `exportDesign` – Export the current design to PNG, JPEG, PDF, or other formats
+- `saveScene` – Save the scene as a JSON string for later editing
+- `importScene` – Import a previously saved scene (supports `.scene` and `.cesdk` formats)
+- `exportScene` – Export the scene as a JSON file or `.cesdk` archive with all assets
+- `uploadFile` – Handle file uploads with progress tracking
+
+Use `cesdk.actions.run()` to execute any action:
+
+```typescript
+// Run a built-in action
+await cesdk.actions.run('exportDesign', { mimeType: 'application/pdf' });
+```
+
+#### Export and Save
+
+```typescript title="src/imgly/config/actions.ts"
+// Register export action that downloads the edited design
+cesdk.actions.register('exportDesign', async (exportOptions) => {
+  const { blobs, options } = await cesdk.utils.export(exportOptions);
+  await cesdk.utils.downloadFile(blobs[0], options.mimeType);
+});
+```
+
+> **Learn More:** See [Actions](./actions.md) for the full list of built-in actions, how to run them, and how to register custom actions.
+
+---
+
+## Customize (Optional)
+
+### Theming
+
+CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically:
+
+```typescript title="src/imgly/config/settings.ts"
+// 'light' | 'dark' | 'system' | (() => 'light' | 'dark')
+cesdk.ui.setTheme('dark');
+```
+
+See [Theming](./user-interface/appearance/theming.md) for custom color schemes, CSS variables, and advanced styling options.
+
+### Localization
+
+Customize UI labels and add support for multiple languages. The i18n system supports translation keys for all UI elements:
+
+```typescript title="src/imgly/config/i18n.ts"
+// Override specific labels
+cesdk.i18n.setTranslations({
+  en: {
+    'actions.export.image': 'Download Design',
+    'common.cancel': 'Cancel',
+    'common.apply': 'Apply'
+  }
+});
+
+// Add a new language
+cesdk.i18n.setTranslations({
+  de: {
+    'actions.export.image': 'Design herunterladen'
+  }
+});
+
+// Set the active locale
+cesdk.i18n.setLocale('de');
+```
+
+See [Localization](./user-interface/localization.md) for supported languages, translation key reference, and right-to-left language support.
+
+### UI Layout
+
+![CE.SDK Editor UI Areas](https://img.ly/docs/cesdk/../_shared/assets/CESDK-UI.png)
+
+Customize the editor interface by modifying the dock, inspector bar, navigation bar, and canvas menu. CE.SDK provides Order APIs to control which components appear and in what sequence.
+
+```typescript title="src/imgly/config/ui/navigationBar.ts"
+// Get current navigation bar components
+const navOrder = cesdk.ui.getNavigationBarOrder();
+
+// Add a custom button to the navigation bar
+cesdk.ui.insertNavigationBarOrderComponent(
+  'ly.img.spacer',
+  { id: 'my-custom-action' },
+  'after'
+);
+
+// Rearrange dock items
+cesdk.ui.setDockOrder([
+  'ly.img.assetLibrary.dock',
+  'ly.img.separator',
+  'my-custom-dock-item'
+]);
+```
+
+See [Dock](./user-interface/customization/dock.md), [Inspector Bar](./user-interface/customization/inspector-bar.md), [Navigation Bar](./user-interface/customization/navigation-bar.md), [Canvas Menu](./user-interface/customization/canvas-menu.md), and [Canvas](./user-interface/customization/canvas.md) for detailed layout customization options.
+
+---
+
+## Key Capabilities
+
+The Cutout Lines Editor includes cutout line creation plus full design editing capabilities.
+
+<CapabilityGrid
+features={[
+{
+title: 'Cutout Line Creation',
+description:
+'Create die-cut lines from any shape with a single click. Export to PDF for professional printing.',
+imageId: 'transform',
+},
+{
+title: 'Professional Filters',
+description:
+'Apply color grading with LUT filters, duotone effects, and customizable image adjustments.',
+imageId: 'filters',
+},
+{
+title: 'Text & Typography',
+description:
+'Add styled text with comprehensive typography controls, fonts, and visual effects.',
+imageId: 'text-editing',
+},
+{
+title: 'Asset Libraries',
+description:
+'Access built-in collections of templates, stickers, shapes, and graphics, plus import custom assets.',
+imageId: 'asset-libraries',
+},
+{
+title: 'Privacy-First',
+description:
+'All processing happens locally in the browser. No data is sent to external servers.',
+imageId: 'client-side',
+},
+{
+title: 'PDF Export',
+description:
+'Export to print-ready PDF with spot colors for professional die-cutting and packaging.',
+imageId: 'transform',
+},
+]}
+/>
+
+<br />
+
+> **Free Trial:** [Sign up for a free trial](https://img.ly/forms/free-trial) to get a license key and remove the watermark.
+
+---
+
+## Troubleshooting
+
+### Editor doesn't load
+
+- **Check the container element exists**: Ensure your container element is in the DOM before calling `create()`
+- **Verify the baseURL**: Assets must be accessible from the CDN or your self-hosted location
+- **Check console errors**: Look for CORS or network errors in browser developer tools
+
+### Assets don't appear
+
+- **Check network requests**: Open DevTools Network tab and look for failed requests to `cdn.img.ly`
+- **Self-host assets for production**: See [Serve Assets](./serve-assets.md) to host assets on your infrastructure
+
+### Cutout option not appearing
+
+- **Select a shape**: Cutout lines work with shapes, not images. Select a vector shape to see the option.
+- **Check plugin installation**: Ensure `@imgly/plugin-cutout-library-web` is installed
+
+### Watermark appears in production
+
+- **Add your license key**: Set the `license` property in your configuration
+- **Sign up for a trial**: Get a free trial license at [img.ly/forms/free-trial](https://img.ly/forms/free-trial)
+
+---
+
+## Next Steps
+
+- [Configuration](./configuration.md) – Complete list of initialization options
+- [Serve Assets](./serve-assets.md) – Self-host engine assets for production
+- [Actions](./actions.md) – Build custom export and save workflows
+- [Theming](./user-interface/appearance/theming.md) – Customize colors and appearance
+- [Localization](./user-interface/localization.md) – Add translations and language support
+
+---
+
+## 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