@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/concepts/headless-mode/browser.md

@@ -1,291 +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:** [Concepts](./concepts.md) > [Headless Mode](./concepts/headless-mode/browser.md)
-
----
-
-CreativeEditor SDK (CE.SDK) **Headless Mode** allows your web app to control the Engine API without loading the built-in user interface.
-
-Instead of starting the full editor with panels and toolbars, your browser code talks directly to the Engine. That keeps the experience within your own design system—ideal for automation running on the client.
-
-## Common Use Cases
-
-- **Automating workflows:** Merge data into templates or generate variations with no user input.
-- **Automated exports:** Render custom images or videos in the browser and hand them off to storage or your backend.
-- **Custom interfaces:** Embed the Engine beneath your own UI components.
-- **Background actions:** Run batch jobs or event-driven edits without overlaying the default UI.
-
-### When to Use Headless Mode
-
-<HeadlessScenario />
-
-## How Headless Mode Works
-
-The standard editor wires UI events (button clicks, drag interactions) to the Engine under the hood. In headless mode, you call the same Engine APIs yourself.
-
-### Features Available in Headless Mode
-
-In headless mode, you keep access to the CE.SDK features while staying entirely within your app’s DOM lifecycle, such as:
-
-- Scene management
-- Asset manipulation
-- Rendering and export
-- Templates and dynamic content
-
-### Requirements to Run the CreativeEngine in the Client
-
-CE.SDK’s Engine needs a **WebGL-capable environment**. When you ship a headless build in the browser:
-
-- Point the `baseURL` in your config at a publicly reachable asset directory (CDN or self-hosted) so the browser can load fonts and other Engine files—even when you install the npm package.
-- Only start the Engine **after the DOM is available** (for example, inside `useEffect`, `mounted`, or `DOMContentLoaded`).
-- **Dispose** of the Engine during tear down with `engine.dispose()` to release WebGL resources.
-- Ensure iframes or workers that boot the Engine expose `document` and a WebGL context.
-
-## Set Up Headless Mode in a Web App
-
-1. Install the Engine package:
-
-   ```bash
-   npm install @cesdk/engine@$UBQ_VERSION$
-   ```
-
-````
-
-2. Configure your license and asset location. The global CDN works for prototypes; production apps commonly self-host the asset bundle for faster loads.
-
-   ```ts
-   const config = {
-     license: '<YOUR_LICENSE_KEY>',
-     baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets'
-   };
-
-````
-
-3. Start the Engine from client-side code and reuse the instance across interactions.
-
-> **Tip:** The CreativeEngine doesn’t attach a canvas automatically. If you want a live preview, append `engine.element` onto your own layout.
-
-## Quick Start: Initialize the Engine Headlessly
-
-When you import `@cesdk/engine`, you get the same runtime that powers the full editor. Using the CreativeEngine instead of the CreativeEditor allows you to expose the Engine interface while skipping all UI bootstrapping that comes with the editor.
-
-```js
-import CreativeEngine from '@cesdk/engine';
-
-const config = {
-  license: '<YOUR_LICENSE_KEY>',
-  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets'
-};
-
-let engine;
-
-export async function getEngine() {
-  if (!engine) {
-    engine = await CreativeEngine.init(config);
-  }
-  return engine;
-}
-```
-
-Once started, you can trigger Engine operations inside your app logic from:
-
-- Buttons
-- Keyboard shortcuts
-- Background tasks
-
-## Example: Build and Export a Scene on a Single Click
-
-The workflow below wires the Engine to a button, so the user automatically downloads an edited PNG when clicking on a button:
-
-1. Copy paste the following code (adjust to your stack as needed):
-
-```js
-// Grab the button element
-const downloadButton = document.querySelector('#download-headless');
-
-// Register an async click handler
-downloadButton?.addEventListener('click', async () => {
-  // Wait for the Engine
-  const engine = await getEngine();
-
-  // Build a fresh scene
-  const scene = engine.scene.create();
-  const page = engine.block.create('page');
-  engine.block.setWidth(page, 800);
-  engine.block.setHeight(page, 600);
-  // Attach the page to the scene
-  engine.block.appendChild(scene, page);
-
-  // Add an image layer
-  const imageBlock = engine.block.create('graphic');
-  engine.block.setShape(imageBlock, engine.block.createShape('rect'));
-  const imageFill = engine.block.createFill('image');
-  // Load an image fill from the CDN
-  engine.block.setString(
-    imageFill,
-    'fill/image/imageFileURI',
-    'https://img.ly/static/ubq_samples/sample_1.jpg'
-  );
-  engine.block.setFill(imageBlock, imageFill);
-  // Set position and dimensions
-  engine.block.setPosition(imageBlock, 100, 100);
-  engine.block.setWidth(imageBlock, 300);
-  engine.block.setHeight(imageBlock, 300);
-  // Append the image to the page
-  engine.block.appendChild(page, imageBlock);
-
-  // Add a text layer
-  const textBlock = engine.block.create('text');
-  // Set the text content
-  engine.block.setString(textBlock, 'text/text', 'Hello from Headless Mode!');
-  // Set position and dimensions
-  engine.block.setPosition(textBlock, 100, 450);
-  engine.block.setWidth(textBlock, 600);
-  // Append the text to the page
-  engine.block.appendChild(page, textBlock);
-
-  // Export the page as a PNG
-  const exportResult = await engine.block.export(page, 'image/png');
-  // Normalize the result to a blob
-  const blob =
-    exportResult instanceof Blob
-      ? exportResult
-      : new Blob([exportResult], { type: 'image/png' });
-
-  triggerDownload(blob, 'headless-output.png');
-});
-
-function triggerDownload(blob, filename) {
-  // Build a temporary object URL
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = filename;
-  document.body.appendChild(link);
-  // Start the download on click
-  link.click();
-  // Revoke the link and URL to release resources
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-}
-```
-
-2. Add a clickable element with the matching ID somewhere in your page’s markup. For example:
-
-<Tabs>
-  <TabItem label="Plain HTML">
-    ```js
-    <button id="download-headless">Download headless export</button>
-    ```
-  </TabItem>
-
-  <TabItem label="Component-based setup">
-    If you’re in a component-based setup (React, Vue, Svelte, etc.), include the same button inside the component’s render/template:
-
-    ```js
-    return (
-    <button id="download-headless">
-      Download headless export
-    </button>
-    );
-    ```
-
-  </TabItem>
-</Tabs>
-
-Once that element is in the DOM, the snippet’s querySelector('#download-headless') finds it and wires up the click handler that runs the export.
-
-<details>
-  <summary>See full module</summary>
-
-```js
-import CreativeEngine from '@cesdk/engine';
-
-const config = {
-  license: '<YOUR_LICENSE_KEY>',
-  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets'
-};
-
-let engine;
-
-export async function getEngine() {
-  if (!engine) {
-    engine = await CreativeEngine.init(config);
-  }
-  return engine;
-}
-
-const downloadButton = document.querySelector('#download-headless');
-
-downloadButton?.addEventListener('click', async () => {
-  const engine = await getEngine();
-
-  const scene = engine.scene.create();
-  const page = engine.block.create('page');
-  engine.block.setWidth(page, 800);
-  engine.block.setHeight(page, 600);
-  engine.block.appendChild(scene, page);
-
-  const imageBlock = engine.block.create('graphic');
-  engine.block.setShape(imageBlock, engine.block.createShape('rect'));
-  const imageFill = engine.block.createFill('image');
-  engine.block.setString(
-    imageFill,
-    'fill/image/imageFileURI',
-    'https://img.ly/static/ubq_samples/sample_1.jpg'
-  );
-  engine.block.setFill(imageBlock, imageFill);
-  engine.block.setPosition(imageBlock, 100, 100);
-  engine.block.setWidth(imageBlock, 300);
-  engine.block.setHeight(imageBlock, 300);
-  engine.block.appendChild(page, imageBlock);
-
-  const textBlock = engine.block.create('text');
-  engine.block.setString(textBlock, 'text/text', 'Hello from Headless Mode!');
-  engine.block.setPosition(textBlock, 100, 450);
-  engine.block.setWidth(textBlock, 600);
-  engine.block.appendChild(page, textBlock);
-
-  const exportResult = await engine.block.export(page, 'image/png');
-  const blob =
-    exportResult instanceof Blob
-      ? exportResult
-      : new Blob([exportResult], { type: 'image/png' });
-
-  triggerDownload(blob, 'headless-output.png');
-});
-
-function triggerDownload(blob, filename) {
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-}
-```
-
-</details>
-
-After you add the script to your app and run the dev server:
-
-1. Click the `#download-headless` button in your interface.
-2. The Engine assembles the scene in memory and exports it as a PNG.
-3. The PNG downloads locally (or you can upload it to your backend).
-
-<Picture src={greetingCard} style={{ width: '85%' }} alt="Greeting Card with image and text" formats={['webp']} />
-
-## Go Further
-
-Need a hybrid approach? [Engine interface guides](./engine-interface.md) show how to combine headless logic with the standard editor UI.
-
----
-
-## 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/create-audio/audio.md

@@ -1,336 +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:** [Guides](./guides.md) > [Create and Edit Audio](./create-audio/audio.md)
-
----
-
-The **CreativeEditor (CE.SDK)** provides different **audio features** you can leverage in web-based apps. This section covers how to **add audio blocks**, **extract** audio from videos, control **playback**, generate **waveforms**, and manage **multi-track audio**.
-
-## Use Cases
-
-Use the CE.SDK audio features when you need to create:
-
-- Background music
-- Voice-overs
-- Sound effects
-- Podcasts
-
-## How Audio Works in the CE.SDK
-
-The CE.SDK represents audio as audio blocks.
-
-Each block has:
-
-- Source (file or extracted track)
-
-- Playback properties (time, speed, volume, mute)
-
-- Time-based properties (offset, duration, trim length)
-
-- Optional waveform thumbnails for UI visualization
-
-### What Are the Time-Based Properties
-
-Each audio block has properties that determine when and how much of the sound plays:
-
-- **Offset:** the delay before an audio block begins playing inside the scene.
-
-- **Trim length**: cuts the audio to keep only a specific part of it.
-
-- **Duration**: defines how long the audio plays.
-
-### What Are Waveforms
-
-Waveforms are **visual representations** of the audio signal over time. They show the amplitude (volume level) of the sound at each moment, using peaks and valleys.
-
-The CE.SDK can generate sampled waveform data that you can render in your UI. This is especially helpful for editing tools.
-
-### When to Create VS. Extract Audio
-
-The CE.SDK allows you to either create a blank audio block or extract the audio from a video.
-
-- **Create an empty audio block** when you want to add external or standalone audio that doesn’t come from a video.
-
-- **Extract the audio** when it comes from a video block already in your scene.
-
-## CE.SDK Audio Features Overview
-
-The table below summarizes the main audio-related capabilities in CE.SDK.\
-Each feature is related to an example further down the page.
-
-| **Category**             | **Action**               | **API Name**                     | **Notes**                                         |
-| ------------------------ | ------------------------ | -------------------------------- | ------------------------------------------------- |
-| **Create Audio Blocks**  | Create empty audio block | `create`                         | Creates an audio block with no source.            |
-|                          | Extract audio from video | `createAudioFromVideo`           | Requires a video block ID and track index.        |
-| **Playback Control**     | Set playback position    | `setPlaybackTime`                | Time in seconds.                                  |
-|                          | Volume                   | `setVolume`                      | Range `0.0–1.0`.                                  |
-|                          | Mute                     | `setMuted`                       | Boolean.                                          |
-|                          | Playback speed           | `setPlaybackSpeed`               | Range `0.25–3.0`.                                 |
-| **Time Management**      | Offset                   | `setTimeOffset`                  | To move the playback starting point in the scene. |
-|                          | Duration                 | `setDuration`                    | Total length (seconds).                           |
-|                          | Trim length              | `setTrimLength`                  | Cuts content to a defined length.                 |
-| **Replace Audio Source** | Reload edited scene      | `scene.loadFromString`           | Used when replacing audio at runtime.             |
-| **Waveforms**            | Generate thumbnails      | `generateAudioThumbnailSequence` | Produces waveform sample data for UI.             |
-| **Export Audio**         | Export WAV               | `exportAudio`                    | MIME type: `audio/wav`.                           |
-|                          | Export MP4               | `exportAudio`                    | MIME type: `audio/mp4`.                           |
-
-## Examples
-
-Find in the following list of examples different API calls listed in the preceding table.
-
-### Create Audio
-
-<Tabs>
-  <TabItem label="Create Audio">
-    To create an empty audio block, use:
-
-    ```ts
-    const blockId = engine.block.create('audio');
-
-    ```
-
-  </TabItem>
-
-  <TabItem label="Extract Audio from a Video">
-    Use `engine.block.createAudioFromVideo(blockId, trackIndex: number);`.
-
-    This example:
-
-    1. Extracts the first audio track (1) from a video.
-    2. Appends it to the page for further manipulation.
-
-    > **Note:** `videoBlockId` and `pageId` must refer to existing blocks.
-
-    ```ts
-    const audioBlockId = engine.block.createAudioFromVideo(videoBlockId, 0);
-    // Attach to the page so it’s part of the scene
-    engine.block.appendChild(pageId, audioBlockId);
-    ```
-
-  </TabItem>
-
-  <TabItem label="Add Audio Sources">
-    This example:
-
-    1. Creates an audio block.
-    2. Attaches the audio block to the page.
-    3. Sets the source for the audio from a remote URL.
-
-    > **Note:** `pageId` must refer to an existing page.
-
-    ```ts
-    // Create an audio block
-      const audioBlockId = engine.block.create('audio');
-      await engine.block.appendChild(pageId, audioBlockId);
-      engine.block.setString(
-        audioBlockId,
-        'audio/fileURI',
-        'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'
-      );
-
-    ```
-
-    For details on loading sources, check [the dedicated guide](./import-media/from-remote-source/unsplash.md).
-
-  </TabItem>
-
-  <TabItem label="Export">
-    This example exports the audio block in **mp4** format:
-
-    > **Note:** `blockId` must refer to an existing audio block.
-
-    ```ts
-    engine.block.exportAudio(blockId, {
-      mymeType: 'audio/mp4'
-      }
-    );
-
-    ```
-
-    This example exports the audio in **wav** format:
-
-    ```ts
-    const audioData = await engine.block.exportAudio(blockId, {
-      mimeType: 'audio/wav'
-      }
-    );
-
-    ```
-
-  </TabItem>
-</Tabs>
-
-### Control Audio Playback
-
-<Tabs>
-  <TabItem label="Basic Playback Control">
-    Use `engine.block.setPlaybackTime(blockId, time: number)`.
-
-    This example sets the current playback at 3 seconds:
-
-    ```ts
-    engine.block.setPlaybackTime(blockId, 3)
-
-    ```
-
-  </TabItem>
-
-  <TabItem label="Volume">
-    Use `engine.block.setVolume(blockId, volume: number);`.
-
-    This example sets the volume at 1 (max value):
-
-    ```ts
-    engine.block.setVolume(blockId, 1);
-
-    ```
-
-  </TabItem>
-
-  <TabItem label="Mute">
-    Use `engine.block.setMuted(blockId, muted: boolean);`.
-
-    This example mutes the audio of the block:
-
-    ```ts
-    engine.block.setMuted(blockId, true);
-
-    ```
-
-  </TabItem>
-
-  <TabItem label="Speed">
-    Use `engine.block.setPlaybackSpeed(blockId, speed: number);`.
-
-    This example multiplies the speed by 0.25:
-
-    ```ts
-    engine.block.setPlaybackSpeed(blockId, 0.25);
-    ```
-
-  </TabItem>
-</Tabs>
-
-### Manage Audio Timing
-
-<Tabs>
-  <TabItem label="Offset">
-    If the audio has an offset of:
-
-    - 0 s → It plays immediately when the scene starts.
-
-    - 2 s → The CE.SDK waits 2 seconds before playing it.
-
-    - 10 s → The audio only starts at the 10-second mark.
-
-    Use `engine.block.setTimeOffset(blockId, offset: number)`.
-
-    This example starts the audio at 2 s in the composition:
-
-    ```ts
-    engine.block.setTimeOffset(blockId, 2);
-
-    ```
-
-  </TabItem>
-
-  <TabItem label="Duration">
-    Use `engine.block.setDuration(blockId, duration: number)`.
-
-    This example sets the audio duration for 300 seconds:
-
-    ```ts
-    engine.block.setDuration(blockId, 300)
-    ```
-
-  </TabItem>
-
-  <TabItem label="Trimming">
-    Use `engine.block.setTrimLength(blockId, length: number);`.
-
-    This example creates a new trim that:
-
-    1. Starts at the second 2 of the audio content.
-    2. Plays for 10 seconds.
-
-    ```ts
-    engine.block.setTrimOffset(blockId, 2)
-    engine.block.setTrimLength(blockId, 10);
-    ```
-
-  </TabItem>
-
-  <TabItem label="Generate Audio Thumbnails">
-    Use:
-
-    ```ts
-    engine.block.generateAudioThumbnailSequence(
-      blockId,
-      samplesPerChunk: number,
-      timeBegin: number,
-      timeEnd: number,
-      numberOfSamples: number,
-      numberOfChannels: number)
-
-    ```
-
-    This example generates 1 audio sample that:
-
-    - Produces 3 chunks of this sample.
-    - Start at second 8.
-    - End at second 18.
-    - Is stereo audio (1 for mono, 2 for stereo)
-
-    > **Note:** `audioBlockId` must refer to an existing block.
-
-    ```ts
-    const audioThumbnail = engine.block.generateAudioThumbnailSequence(
-      audioBlockId,
-      3,   // samplesPerChunk
-      8,   // timeBegin
-      18,  // timeEnd
-      1,   // numberOfSamples
-      2,   // numberOfChannels
-      // Return the result
-      (chunkIndex, result) => {
-        if (result instanceof Error) {
-        console.error('Thumbnail chunk failed', result);
-        audioThumbnail();
-        return;
-        }
-        console.log(`Chunk ${chunkIndex}`, result);
-      }
-    );
-
-    ```
-
-    Once generated, integrate the waveform into your UI.
-
-  </TabItem>
-</Tabs>
-
-## Next Steps
-
-For each feature’s detailed instructions and options:
-
-- Explore the [CE.SDK API options](./api-reference/overview.md).
-- Check the dedicated guides in the audio section.
-
----
-
-## Related Pages
-
-- [Add Sound Effects](./create-audio/audio/add-sound-effects.md) - Learn how to use buffers with arbitrary data to generate sound effects programmatically
-- [Add Music](./create-audio/audio/add-music.md) - Add background music and audio tracks to video projects using CE.SDK's audio block system.
-- [Adjust Audio Volume](./create-video/audio/adjust-volume.md) - Learn how to adjust audio volume in CE.SDK to control playback levels, mute audio, and balance multiple audio sources in video projects.
-- [Adjust Audio Playback Speed](./create-video/audio/adjust-speed.md) - Learn how to adjust audio playback speed in CE.SDK to create slow-motion, time-stretched, and fast-forward audio effects.
-- [Loop Audio](./create-audio/audio/loop.md) - Create seamless repeating audio playback for background music and sound effects using CE.SDK's audio looping system.
-
----
-
-## 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