@imgly/codesign-mcp 0.1.5 → 0.1.6

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

@@ -1,586 +0,0 @@
-> 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) > [Auto-Resizer](./starterkits/auto-resize.md)
-
----
-
-Automatically generate size variations of your design and easily scale your marketing materials across different platforms.
-
-![Automated Resizing starter kit showing multiple social media format outputs](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
-> **Reading time:** 10 minutes
->
-> **Resources:**
->
-> - [Download examples](https://github.com/imgly/starterkit-automated-resizing-react-web/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/starterkit-automated-resizing-react-web/tree/release-$UBQ_VERSION$)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/starterkit-automated-resizing-react-web/tree/release-$UBQ_VERSION$)
-> - [Live demo](https://img.ly/docs/cesdk/examples/starterkit-automated-resizing/)
-
----
-
-## Pre-requisites
-
-This guide assumes basic familiarity with React and TypeScript.
-
-- **Node.js v20+** with npm – [Download](https://nodejs.org/)
-- **React 18+** – The starterkit uses React for component architecture
-- **Supported browsers** – 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
-
-    Start fresh with a standalone Automated Resizing project. This creates a complete, ready-to-run React application that demonstrates content-aware resizing across multiple social media formats.
-
-    ## Step 1: Clone the Repository
-
-    <TerminalTabs>
-      <TerminalTab label="git">
-        git clone https://github.com/imgly/starterkit-automated-resizing-react-web.git
-      </TerminalTab>
-
-      <TerminalTab label="degit">
-        npx degit imgly/starterkit-automated-resizing-react-web starterkit-automated-resizing-react-web
-      </TerminalTab>
-    </TerminalTabs>
-
-    The `src/` folder contains the React application:
-
-    ```
-    src/
-    ├── app/                          # Demo application
-    ├── imgly/
-    │   ├── advanced-editor-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
-    │   ├── design-editor-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
-    │   ├── resizing.ts               # Content-aware resizing logic
-    │   └── types.ts                  # TypeScript type definitions
-    └── index.tsx                 # Application entry point
-    ```
-
-    ## Step 2: Install Dependencies
-
-    Install the required packages:
-
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        cd starterkit-automated-resizing-react-web
-        npm install
-      </TerminalTab>
-
-      <TerminalTab label="pnpm">
-        cd starterkit-automated-resizing-react-web
-        pnpm install
-      </TerminalTab>
-
-      <TerminalTab label="yarn">
-        cd starterkit-automated-resizing-react-web
-        yarn
-      </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>
-
-    > **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 `src/index.tsx`.
-
-    ```typescript title="src/index.tsx"
-    const config = {
-      // ...
-      baseURL: '/assets'
-      // ...
-    };
-    ```
-
-    ## Step 4: Run the Development Server
-
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">
-        npm run dev
-      </TerminalTab>
-
-      <TerminalTab label="pnpm">
-        pnpm run dev
-      </TerminalTab>
-
-      <TerminalTab label="yarn">
-        yarn dev
-      </TerminalTab>
-    </TerminalTabs>
-
-    Open `http://localhost:5173` in your browser.
-
-  </TabItem>
-
-  <TabItem label="Existing Project">
-    ## Get Started
-
-    Integrate the Automated Resizing functionality into an existing React application. This adds the resizing configuration and components 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-automated-resizing-react-web.git
-        cp -r starterkit-automated-resizing-react-web/src/imgly ./src/imgly
-        rm -rf starterkit-automated-resizing-react-web
-      </TerminalTab>
-
-      <TerminalTab label="degit">
-        npx degit imgly/starterkit-automated-resizing-react-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 resizing configuration:
-
-    ```
-    imgly/
-    ├── advanced-editor-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
-    ├── design-editor-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
-    ├── resizing.ts               # Content-aware resizing logic
-    └── types.ts                  # TypeScript type definitions
-    ```
-
-    ## Step 2: Install Dependencies
-
-    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>
-
-    ### Headless Engine
-
-    The starter kit boots a headless `CreativeEngine` for variant generation. Install the engine package alongside the editor:
-
-    <TerminalTabs syncKey="package-manager">
-      <TerminalTab label="npm">npm install @cesdk/engine@$UBQ\_VERSION$</TerminalTab>
-      <TerminalTab label="pnpm">pnpm add @cesdk/engine@$UBQ\_VERSION$</TerminalTab>
-      <TerminalTab label="yarn">yarn add @cesdk/engine@$UBQ\_VERSION$</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>
-
-    > **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 5: Initialize the Editor.
-
-    ## 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
-
-    Choose your editing mode and initialize the editor accordingly:
-
-    <Tabs syncKey="editor-mode">
-      <TabItem label="Design Editor">
-        ```typescript title="src/index.ts"
-        import CreativeEditorSDK from '@cesdk/cesdk-js';
-
-        import { initAutomatedResizingDesignEditor } from './imgly';
-
-        const config = {
-          userId: 'your-user-id',
-          baseURL: '/assets'
-          // license: 'YOUR_LICENSE_KEY',
-        };
-
-        CreativeEditorSDK.create('#cesdk_container', config)
-          .then(async (cesdk) => {
-            await initAutomatedResizingDesignEditor(cesdk);
-          })
-          .catch((error) => {
-            console.error('Failed to initialize CE.SDK:', error);
-          });
-        ```
-      </TabItem>
-
-      <TabItem label="Advanced Editor">
-        ```typescript title="src/index.ts"
-        import CreativeEditorSDK from '@cesdk/cesdk-js';
-
-        import { initAutomatedResizingAdvancedEditor } from './imgly';
-
-        const config = {
-          userId: 'your-user-id',
-          baseURL: '/assets'
-          // license: 'YOUR_LICENSE_KEY',
-        };
-
-        CreativeEditorSDK.create('#cesdk_container', config)
-          .then(async (cesdk) => {
-            await initAutomatedResizingAdvancedEditor(cesdk);
-          })
-          .catch((error) => {
-            console.error('Failed to initialize CE.SDK:', error);
-          });
-        ```
-      </TabItem>
-    </Tabs>
-
-  </TabItem>
-</Tabs>
-
----
-
-## Auto Resize
-
-The starterkit provides the `resize` function for content-aware resizing:
-
-```tsx title="src/imgly/index.ts"
-import { resize, DEFAULT_SIZES } from './imgly';
-```
-
-`DEFAULT_SIZES` contains preset dimensions for common social media formats (Instagram Story, Instagram Post 4:5, X Post, Facebook Post). Each size follows this structure:
-
-```tsx title="src/imgly/constants.ts"
-{
-  id: 'ig-story',
-  label: 'Instagram Story',
-  width: 1080,
-  height: 1920,
-  designUnit: 'Pixel',
-  platform: 'instagram'
-}
-```
-
-### resize
-
-Generate resized variants for all specified sizes. Returns blobs—the caller handles URL creation and cleanup:
-
-```tsx title="src/imgly/resizing.ts"
-const variants = await resize({
-  engine: cesdk.engine,
-  sizes: DEFAULT_SIZES,
-  scene: templateSceneString,
-  exportOptions: { mimeType: 'image/png' },
-  onProgress: (completed, total, variant) => {
-    // Create URL for rendering
-    const url = URL.createObjectURL(variant.blob);
-    console.log(`Generated ${completed}/${total}: ${variant.size.label}`);
-  }
-});
-```
-
-The `exportOptions` parameter accepts CE.SDK's `ExportOptions` type, supporting formats like `image/png`, `image/jpeg`, `image/webp`, and quality settings.
-
----
-
-## Customize Assets
-
-The editor uses asset source plugins to provide built-in libraries for templates, stickers, shapes, and fonts. Customize what's included based on your needs.
-
-Asset sources are added via plugins in `src/imgly/index.ts`. Enable or disable individual sources:
-
-```tsx title="src/imgly/index.ts"
-import {
-  FiltersAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  VectorShapeAssetSource,
-  EffectsAssetSource,
-  DemoAssetSources
-  // ...
-} 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());
-
-// Demo assets include social media templates
-await cesdk.addPlugin(
-  new DemoAssetSources({
-    include: [
-      'ly.img.templates.blank.*',
-      'ly.img.templates.social.*',
-      'ly.img.image.*'
-    ]
-  })
-);
-```
-
-> **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.
-
----
-
-## Customize (Optional)
-
-### Theming
-
-CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically:
-
-```tsx 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:
-
-```tsx title="src/imgly/config/i18n.ts"
-// Override specific labels
-cesdk.i18n.setTranslations({
-  en: {
-    'actions.export.image': 'Download Design',
-    'common.cancel': 'Cancel',
-    'common.apply': 'Apply'
-  }
-});
-
-// 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.
-
-```tsx 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.
-
-### Settings & Features
-
-Fine-tune editor behavior through settings and features.
-
-**Settings** configure core engine behavior—rendering, input handling, and history management:
-
-```tsx title="src/imgly/config/settings.ts"
-cesdk.engine.editor.setSettingBool('page/dimOutOfPageAreas', true);
-cesdk.engine.editor.setSettingBool('mouse/enableZoomControl', true);
-cesdk.engine.editor.setSettingBool('features/undoHistory', true);
-```
-
-**Features** toggle which editing tools and panels appear in the UI:
-
-```tsx title="src/imgly/config/features.ts"
-// Toggle editor features
-cesdk.feature.enable('ly.img.crop', true);
-cesdk.feature.enable('ly.img.filter', true);
-cesdk.feature.enable('ly.img.adjustment', true);
-```
-
-See [Settings](./settings.md) and [Features](./user-interface/customization/disable-or-enable.md) for the complete reference.
-
----
-
-## Key Capabilities
-
-The Automated Resizing starter kit includes everything needed for multi-format content generation.
-
-<CapabilityGrid
-features={[
-{
-title: 'Content-Aware Resizing',
-description:
-'Intelligently resize designs while maintaining visual balance and element positioning.',
-imageId: 'transform',
-},
-{
-title: 'Multi-Platform Output',
-description:
-'Generate variants for Instagram, Facebook, X, LinkedIn, YouTube, and custom sizes in one click.',
-imageId: 'green-screen',
-},
-{
-title: 'Editable Results',
-description:
-'Fine-tune any generated variant with the full editor—adjust layouts, text, and imagery.',
-imageId: 'text-editing',
-},
-{
-title: 'Template System',
-description:
-'Start from pre-designed templates or create custom designs as your resizing source.',
-imageId: 'asset-libraries',
-},
-{
-title: 'React Integration',
-description:
-'Built with React 18+ using custom hooks for clean state management and component architecture.',
-imageId: 'filters',
-},
-{
-title: 'Export Options',
-description:
-'Export to multiple formats including PNG, JPEG, and PDF with quality and size controls.',
-imageId: 'client-side',
-},
-]}
-/>
-
-<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
-
-### Export fails or produces blank images
-
-- **Wait for content to load**: Ensure images are fully loaded before exporting
-- **Check CORS on images**: Remote images must allow cross-origin access
-
-### 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