@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/edit-image/vectorize.md

@@ -1,204 +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 Images](./edit-image.md) > [Vectorize](./edit-image/vectorize.md) > [Plugins](./plugins.md) > [Vectorizer](./edit-image/vectorize.md)
-
----
-
-Convert raster images into scalable vector graphics that resize without quality loss using CE.SDK's vectorizer plugin.
-
-![Vectorize Images example showing an image ready for vectorization](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-edit-image-vectorize-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-edit-image-vectorize-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-edit-image-vectorize-browser/)
-
-Vectorization transforms pixel-based images into vector paths that can be scaled to any size without losing quality. The `@imgly/plugin-vectorizer-web` plugin provides one-click UI conversion directly in the canvas menu. Common use cases include converting logos for scalable branding, creating cutout outlines from photographs, and extracting editable paths from illustrations.
-
-```typescript file=@cesdk_web_examples/guides-edit-image-vectorize-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-
-import { DesignEditorConfig } from './design-editor/plugin';
-import VectorizerPlugin from '@imgly/plugin-vectorizer-web';
-import packageJson from './package.json';
-
-/**
- * CE.SDK Plugin: Vectorize Images Guide
- *
- * Demonstrates converting raster images to vector graphics:
- * - Using the vectorizer plugin for UI-based conversion
- * - Programmatically vectorizing with createCutoutFromBlocks()
- * - Configuring threshold parameters for quality control
- */
-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());
-    const engine = cesdk.engine;
-
-    // Add the vectorizer plugin with configuration options
-    await cesdk.addPlugin(
-      VectorizerPlugin({
-        // Display the vectorize button in the canvas menu
-        ui: { locations: 'canvasMenu' },
-        // Set processing timeout to 30 seconds
-        timeout: 30000,
-        // Combine paths into a single shape when exceeding 500 paths
-        groupingThreshold: 500
-      })
-    );
-
-    // Show only the vectorizer button in the canvas menu
-    cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, [
-      '@imgly/plugin-vectorizer-web.canvasMenu'
-    ]);
-
-    // Create a design scene with a page
-    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);
-
-    // Create an image block to vectorize
-    const imageBlock = engine.block.create('graphic');
-    const rectShape = engine.block.createShape('rect');
-    engine.block.setShape(imageBlock, rectShape);
-
-    // Load a sample image with clear contours for vectorization
-    const imageFill = engine.block.createFill('image');
-    engine.block.setString(
-      imageFill,
-      'fill/image/imageFileURI',
-      'https://img.ly/static/ubq_samples/imgly_logo.jpg'
-    );
-    engine.block.setFill(imageBlock, imageFill);
-    engine.block.setContentFillMode(imageBlock, 'Contain');
-
-    // Center the image on the page
-    const imageWidth = 400;
-    const imageHeight = 300;
-    engine.block.setWidth(imageBlock, imageWidth);
-    engine.block.setHeight(imageBlock, imageHeight);
-    engine.block.setPositionX(imageBlock, (800 - imageWidth) / 2);
-    engine.block.setPositionY(imageBlock, (600 - imageHeight) / 2);
-    engine.block.appendChild(page, imageBlock);
-
-    // Select the image to reveal the vectorize button in the canvas menu
-    engine.block.select(imageBlock);
-
-    // Zoom to fit the page in view
-    await engine.scene.zoomToBlock(page, { padding: 40 });
-    engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40);
-  }
-}
-
-export default Example;
-```
-
-This guide covers how to install and configure the vectorizer plugin, customize the canvas menu, and troubleshoot common vectorization issues.
-
-## Using the Vectorizer Plugin
-
-The `@imgly/plugin-vectorizer-web` plugin adds a vectorize button to the canvas menu when you select an image block. Processing runs entirely in the browser using the [@imgly/vectorizer](https://www.npmjs.com/package/@imgly/vectorizer) library.
-
-### Installation
-
-Install the plugin via npm or yarn:
-
-```sh
-yarn add @imgly/plugin-vectorizer-web@$UBQ_VERSION$
-npm install @imgly/plugin-vectorizer-web@$UBQ_VERSION$
-```
-
-### Adding the Plugin
-
-We register the plugin using `cesdk.addPlugin()` with the `ui.locations` option to display the vectorize button in the canvas menu. To show only the vectorizer button, we use `setComponentOrder({ in: 'ly.img.canvas.menu' }, order)` to filter out other menu items.
-
-```typescript highlight-add-plugin
-// Add the vectorizer plugin with configuration options
-await cesdk.addPlugin(
-  VectorizerPlugin({
-    // Display the vectorize button in the canvas menu
-    ui: { locations: 'canvasMenu' },
-    // Set processing timeout to 30 seconds
-    timeout: 30000,
-    // Combine paths into a single shape when exceeding 500 paths
-    groupingThreshold: 500
-  })
-);
-
-// Show only the vectorizer button in the canvas menu
-cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, [
-  '@imgly/plugin-vectorizer-web.canvasMenu'
-]);
-```
-
-### Configuration Options
-
-You can customize the plugin behavior with two configuration options:
-
-- **timeout**: Processing time limit in milliseconds (default: 30000). Increase this for complex images that take longer to process.
-- **groupingThreshold**: Maximum path count before combining into a single shape (default: 500). Lower values combine paths earlier, reducing selectable elements.
-
-## Programmatic Vectorization
-
-For automation workflows, you can create cutout blocks from source blocks using `engine.block.createCutoutFromBlocks()`. This method traces rasterized content or extracts existing vector paths.
-
-### Threshold Parameters
-
-The `createCutoutFromBlocks()` method accepts three parameters that control vectorization quality:
-
-- **vectorizeDistanceThreshold** (default: 2): Maximum contour deviation during tracing. Lower values increase accuracy but produce more complex paths.
-- **simplifyDistanceThreshold** (default: 4): Maximum deviation for path smoothing. Set to 0 to disable smoothing entirely.
-- **useExistingShapeInformation** (default: true): When true, extracts existing vector paths from shapes and SVGs without re-tracing.
-
-### Threshold Recommendations
-
-Start with the default values (2, 4) and adjust based on your source content:
-
-| Content Type    | vectorizeDistanceThreshold | simplifyDistanceThreshold |
-| --------------- | -------------------------- | ------------------------- |
-| Photographs     | 4-8                        | 6-10                      |
-| Logos and icons | 1-2                        | 2-4                       |
-| Illustrations   | 2-4                        | 4-6                       |
-
-Lower thresholds increase path complexity and processing time. For photographs with many details, higher thresholds reduce the number of paths while maintaining overall shape recognition.
-
-## Troubleshooting
-
-Common issues and solutions:
-
-- **Processing timeout**: Increase the `timeout` option or use higher threshold values to reduce complexity.
-- **Jagged edges**: Increase `simplifyDistanceThreshold` to smooth the paths.
-- **Lost details**: Decrease both threshold values to capture finer contours.
-- **Vectorize button not appearing**: Verify `ui: { locations: 'canvasMenu' }` is set and that you've selected an image block.
-- **Memory issues with complex images**: Increase `groupingThreshold` to combine more paths into single shapes.
-
-## API Reference
-
-| Method                                                                                                                            | Category | Purpose                                       |
-| --------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------- |
-| `cesdk.addPlugin(VectorizerPlugin(options))`                                                                                      | Plugin   | Register the vectorizer plugin                |
-| `cesdk.ui.setComponentOrder({ in: 'ly.img.canvas.menu' }, ids)`                                                                   | UI       | Control which items appear in the canvas menu |
-| `engine.block.createCutoutFromBlocks(ids, vectorizeDistanceThreshold?, simplifyDistanceThreshold?, useExistingShapeInformation?)` | Block    | Create a cutout from block contours           |
-
----
-
-## 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/export-save-publish/export/to-html5.md

@@ -1,474 +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) > [Export Media Assets](./export-save-publish/export.md) > [To HTML5](./export-save-publish/export/to-html5.md) > [Plugins](./plugins.md) > [HTML5 Export](./export-save-publish/export/to-html5.md)
-
----
-
-Export CE.SDK designs as HTML5 bundles containing HTML, images and fonts — ready for distribution as display ads or interactive web content.
-
-![Export to HTML5](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
-> **Reading time:** 15 minutes
->
-> **Resources:**
->
-> - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-export-save-publish-export-to-html5-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-export-save-publish-export-to-html5-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-export-save-publish-export-to-html5-browser/)
-
-The `@imgly/html-exporter` package converts a CE.SDK scene page into an HTML5 bundle using `exportHtml(engine, options)`. The result is a `FileMap` — a standard `Map` extended with a `toZip()` method — that you can inspect, customize with additional files and scripts, then package as a ZIP for delivery.
-
-```typescript file=@cesdk_web_examples/guides-export-save-publish-export-to-html5-browser/browser.ts reference-only
-import type {
-  CreativeEngine,
-  EditorPlugin,
-  EditorPluginContext
-} from '@cesdk/cesdk-js';
-
-import {
-  BlurAssetSource,
-  CaptionPresetsAssetSource,
-  ColorPaletteAssetSource,
-  CropPresetsAssetSource,
-  DemoAssetSources,
-  EffectsAssetSource,
-  FiltersAssetSource,
-  PagePresetsAssetSource,
-  StickerAssetSource,
-  TextAssetSource,
-  TextComponentAssetSource,
-  TypefaceAssetSource,
-  UploadAssetSources,
-  VectorShapeAssetSource
-} from '@cesdk/cesdk-js/plugins';
-import { VideoEditorConfig } from './video-editor/plugin';
-import packageJson from './package.json';
-
-import { exportHtml, injectGsapPlayer } from '@imgly/html-exporter';
-
-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');
-    }
-
-    // Load the video editor config (provides full UI: navigation, dock, inspector, canvas, panels)
-    await cesdk.addPlugin(new VideoEditorConfig());
-
-    // Add asset source plugins (populates editor panels with content)
-    await cesdk.addPlugin(new BlurAssetSource());
-    await cesdk.addPlugin(new CaptionPresetsAssetSource());
-    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.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());
-
-    // Create a video scene (enables animation timeline)
-    await cesdk.actions.run('scene.create', { mode: 'Video' });
-
-    const engine = cesdk.engine;
-
-    // Register an "Export HTML5" button in the navigation bar
-    let isExporting = false;
-
-    cesdk.ui.registerComponent(
-      'ly.img.html5-export.navigationBar',
-      ({ builder }) => {
-        builder.Button('html5-export-preview', {
-          color: 'accent',
-          variant: 'regular',
-          label: 'Export and Preview HTML5',
-          isLoading: isExporting,
-          isDisabled: isExporting,
-          onClick: async () => {
-            if (isExporting) return;
-            isExporting = true;
-            try {
-              await previewHtml5(engine);
-            } finally {
-              isExporting = false;
-            }
-          }
-        });
-        builder.Button('html5-export-download', {
-          variant: 'regular',
-          label: 'Download ZIP',
-          isLoading: isExporting,
-          isDisabled: isExporting,
-          onClick: async () => {
-            if (isExporting) return;
-            isExporting = true;
-            try {
-              await downloadHtml5Zip(engine);
-            } finally {
-              isExporting = false;
-            }
-          }
-        });
-      }
-    );
-
-    // Add the export buttons to the navigation bar
-    cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
-      'ly.img.undoRedo.navigationBar',
-      'ly.img.spacer',
-      'ly.img.zoom.navigationBar',
-      'ly.img.html5-export.navigationBar'
-    ]);
-  }
-}
-
-async function previewHtml5(engine: CreativeEngine) {
-  // Export as a single self-contained HTML file (base64-embedded assets)
-  const embeddedResult = await exportHtml(engine, {
-    format: 'embedded',
-    pageIndex: 0
-  });
-
-  // Inject the GSAP library to make animations playable
-  const htmlFile = embeddedResult.files.get('index.html');
-  const htmlContent =
-    typeof htmlFile!.content === 'string'
-      ? htmlFile!.content
-      : new TextDecoder().decode(htmlFile!.content);
-
-  const playableHtml = injectGsapPlayer(htmlContent);
-
-  // Open a preview in a new browser tab
-  const previewBlob = new Blob([playableHtml], { type: 'text/html' });
-  window.open(URL.createObjectURL(previewBlob), '_blank');
-}
-
-async function downloadHtml5Zip(engine: CreativeEngine) {
-  const page = engine.block.findByType('page')[0];
-
-  // Export the first page as an external HTML5 bundle (HTML + separate assets)
-  const externalResult = await exportHtml(engine, {
-    format: 'external',
-    pageIndex: 0
-  });
-
-  // The result contains a FileMap with all generated files
-  console.log('External export files:');
-  for (const [path] of externalResult.files) {
-    console.log(`  ${path}`);
-  }
-
-  // Check for warnings or errors during export
-  if (externalResult.messages && externalResult.messages.length > 0) {
-    for (const msg of externalResult.messages) {
-      console.log(`[${msg.type}] ${msg.message}`);
-    }
-  }
-
-  // Read the index.html from the external export and inject metadata
-  let html = externalResult.files.get('index.html')!.content as string;
-
-  // Inject an ad.size meta tag into the <head>
-  const pageWidth = Math.round(engine.block.getWidth(page));
-  const pageHeight = Math.round(engine.block.getHeight(page));
-  html = html.replace(
-    '</head>',
-    `  <meta name="ad.size" content="width=${pageWidth},height=${pageHeight}">\n</head>`
-  );
-
-  // Inject a click-tracking script before </body>
-  const clickScript = `
-<script>
-  var clickTag = "https://example.com";
-  document.addEventListener("click", function() {
-    window.open(clickTag, "_blank");
-  });
-</script>`;
-  html = html.replace('</body>', clickScript + '\n</body>');
-
-  // Write the modified HTML back to the FileMap
-  externalResult.files.set('index.html', {
-    content: html,
-    mimeType: 'text/html'
-  });
-
-  // Add a manifest.json describing the bundle
-  externalResult.files.set('manifest.json', {
-    content: JSON.stringify(
-      {
-        version: '1.0',
-        title: 'My Creative',
-        width: pageWidth,
-        height: pageHeight,
-        source: 'index.html'
-      },
-      null,
-      2
-    ),
-    mimeType: 'application/json'
-  });
-
-  // Generate a static backup image and add it to the bundle
-  const backupBlob = await engine.block.export(page, {
-    mimeType: 'image/jpeg',
-    jpegQuality: 0.8,
-    targetWidth: pageWidth,
-    targetHeight: pageHeight
-  });
-  const backupBytes = new Uint8Array(await backupBlob.arrayBuffer());
-  externalResult.files.set('backup.jpg', {
-    content: backupBytes,
-    mimeType: 'image/jpeg'
-  });
-
-  // Package all files as a ZIP and trigger a browser download
-  const zip = await externalResult.files.toZip();
-  const downloadBlob = new Blob([zip.buffer as ArrayBuffer], {
-    type: 'application/zip'
-  });
-
-  const a = document.createElement('a');
-  a.href = URL.createObjectURL(downloadBlob);
-  a.download = 'html5-export.zip';
-  a.click();
-}
-
-export default Example;
-```
-
-This guide covers exporting scenes as HTML5, choosing between external and embedded formats, injecting GSAP for animated playback, and customizing the output with click tracking, metadata, and extra files.
-
-## Getting Started
-
-Install the `@imgly/html-exporter` package and import `exportHtml` and optionally `injectGsapPlayer`.
-
-```typescript highlight=highlight-import
-import { exportHtml, injectGsapPlayer } from '@imgly/html-exporter';
-```
-
-## Exporting a Scene Page
-
-Call `exportHtml()` with the engine instance and an options object. The `pageIndex` option (0-based) selects which page to export. Each call exports one page.
-
-```typescript highlight=highlight-export-external
-// Export the first page as an external HTML5 bundle (HTML + separate assets)
-const externalResult = await exportHtml(engine, {
-  format: 'external',
-  pageIndex: 0
-});
-
-// The result contains a FileMap with all generated files
-console.log('External export files:');
-for (const [path] of externalResult.files) {
-  console.log(`  ${path}`);
-}
-
-// Check for warnings or errors during export
-if (externalResult.messages && externalResult.messages.length > 0) {
-  for (const msg of externalResult.messages) {
-    console.log(`[${msg.type}] ${msg.message}`);
-  }
-}
-```
-
-The returned `ExportHtmlResult` contains `files` (a `FileMap` of generated files) and `messages` (an array of `LogMessage` objects with any warnings or errors from the export process).
-
-### Export Options
-
-| Option                     | Type                       | Default      | Description                         |
-| -------------------------- | -------------------------- | ------------ | ----------------------------------- |
-| `format`                   | `'external' \| 'embedded'` | `'external'` | Output format                       |
-| `pageIndex`                | `number`                   | (required)   | 0-based page index                  |
-| `quality`                  | `number`                   | `90`         | WebP image quality 0–100            |
-| `animated`                 | `boolean \| 'auto'`        | `'auto'`     | Generate GSAP animation timeline    |
-| `insertExplicitLineBreaks` | `boolean`                  | `true`       | Insert `<br>` at CE.SDK line breaks |
-| `useSyntheticIds`          | `boolean`                  | `false`      | Stable deterministic element IDs    |
-| `abortSignal`              | `AbortSignal`              | —            | Cancel the export                   |
-
-## Choosing a Format: External vs Embedded
-
-The **external** format (default) writes `index.html` plus separate image and font files. Use this for production delivery — each file is individually cacheable and the total size is transparent for validation.
-
-The **embedded** format inlines all assets as base64 data URLs into a single `index.html`. Use this for in-browser preview or sharing a single file.
-
-```typescript highlight=highlight-export-embedded
-// Export as a single self-contained HTML file (base64-embedded assets)
-const embeddedResult = await exportHtml(engine, {
-  format: 'embedded',
-  pageIndex: 0
-});
-```
-
-## Animated Exports and GSAP Injection
-
-When `animated` is `'auto'` (the default), the exporter checks the scene mode and generates a GSAP animation timeline for video scenes. The timeline is embedded as an inline script in the HTML output. To make it playable, inject the GSAP library from a CDN using `injectGsapPlayer()`.
-
-```typescript highlight=highlight-gsap-injection
-// Inject the GSAP library to make animations playable
-const htmlFile = embeddedResult.files.get('index.html');
-const htmlContent =
-  typeof htmlFile!.content === 'string'
-    ? htmlFile!.content
-    : new TextDecoder().decode(htmlFile!.content);
-
-const playableHtml = injectGsapPlayer(htmlContent);
-
-// Open a preview in a new browser tab
-const previewBlob = new Blob([playableHtml], { type: 'text/html' });
-window.open(URL.createObjectURL(previewBlob), '_blank');
-```
-
-`injectGsapPlayer()` accepts optional overrides:
-
-- **`gsapUrl`** — Custom GSAP CDN URL (default: jsDelivr 3.x). Some platforms whitelist specific CDN URLs and exempt them from file-size limits.
-- **`splitTextUrl`** — Custom SplitText CDN URL, or `false` to disable auto-injection.
-- **`autoplay`** — Whether to inject the autoplay loop script (default: `true`).
-
-## Customizing the Output
-
-The `FileMap` returned by `exportHtml()` is a standard `Map<string, ExportFile>` extended with `toZip()`. Use `files.get()`, `files.set()`, and `files.delete()` to read, add, or remove files before packaging. Each `ExportFile` has a `content` property (`string` or `Uint8Array`) and an optional `mimeType`.
-
-### Modifying the HTML
-
-We read the `index.html` content as a string, use `String.replace()` to inject an `ad.size` meta tag before `</head>` and a click-tracking script before `</body>`, then write it back with `files.set()`.
-
-```typescript highlight=highlight-customize-html
-// Read the index.html from the external export and inject metadata
-let html = externalResult.files.get('index.html')!.content as string;
-
-// Inject an ad.size meta tag into the <head>
-const pageWidth = Math.round(engine.block.getWidth(page));
-const pageHeight = Math.round(engine.block.getHeight(page));
-html = html.replace(
-  '</head>',
-  `  <meta name="ad.size" content="width=${pageWidth},height=${pageHeight}">\n</head>`
-);
-
-// Inject a click-tracking script before </body>
-const clickScript = `
-<script>
-  var clickTag = "https://example.com";
-  document.addEventListener("click", function() {
-    window.open(clickTag, "_blank");
-  });
-</script>`;
-html = html.replace('</body>', clickScript + '\n</body>');
-
-// Write the modified HTML back to the FileMap
-externalResult.files.set('index.html', {
-  content: html,
-  mimeType: 'text/html'
-});
-```
-
-The same pattern works for injecting any content — tracking pixels, analytics beacons, platform SDK scripts, or additional stylesheets.
-
-### Adding Extra Files
-
-We add a `manifest.json` describing the bundle dimensions and entry point, then generate a static JPEG backup image using `engine.block.export()` and include it in the bundle.
-
-```typescript highlight=highlight-add-files
-// Add a manifest.json describing the bundle
-externalResult.files.set('manifest.json', {
-  content: JSON.stringify(
-    {
-      version: '1.0',
-      title: 'My Creative',
-      width: pageWidth,
-      height: pageHeight,
-      source: 'index.html'
-    },
-    null,
-    2
-  ),
-  mimeType: 'application/json'
-});
-
-// Generate a static backup image and add it to the bundle
-const backupBlob = await engine.block.export(page, {
-  mimeType: 'image/jpeg',
-  jpegQuality: 0.8,
-  targetWidth: pageWidth,
-  targetHeight: pageHeight
-});
-const backupBytes = new Uint8Array(await backupBlob.arrayBuffer());
-externalResult.files.set('backup.jpg', {
-  content: backupBytes,
-  mimeType: 'image/jpeg'
-});
-```
-
-You can add any file to the bundle this way — data feed templates, custom fonts, or platform-specific configuration files.
-
-## Packaging and Downloading
-
-After all customizations, call `files.toZip()` to produce a `Uint8Array` containing the ZIP archive. We wrap it in a `Blob` and trigger a browser download.
-
-```typescript highlight=highlight-download-zip
-// Package all files as a ZIP and trigger a browser download
-const zip = await externalResult.files.toZip();
-const downloadBlob = new Blob([zip.buffer as ArrayBuffer], {
-  type: 'application/zip'
-});
-
-const a = document.createElement('a');
-a.href = URL.createObjectURL(downloadBlob);
-a.download = 'html5-export.zip';
-a.click();
-```
-
-## Troubleshooting
-
-**Exported HTML is blank** — Verify `pageIndex` is within bounds by checking `engine.block.findByType('page').length`. Review `result.messages` for warnings about unsupported blocks.
-
-**Animations do not play** — Ensure the scene mode is `'Video'` or set `animated: true` explicitly. Call `injectGsapPlayer()` on the HTML string before opening it in a browser. Verify the GSAP CDN URL is reachable.
-
-**Bundle rejected for file size** — Use the external format instead of embedded, which inflates size through base64 encoding. Reduce the `quality` option for smaller image assets. Remove unused files from the `FileMap` before calling `toZip()`.
-
-**Missing click tracking or metadata** — Inject the click-tracking script required by your target platform before `</body>`. Add required meta tags to `<head>` and include a `manifest.json` if the platform requires one.
-
-## API Reference
-
-| Method / Type                         | Description                                             |
-| ------------------------------------- | ------------------------------------------------------- |
-| `exportHtml(engine, options)`         | Export a scene page as HTML5                            |
-| `injectGsapPlayer(html, options?)`    | Inject GSAP CDN and autoplay script                     |
-| `FileMap`                             | Map of export files extending `Map<string, ExportFile>` |
-| `FileMap.prototype.toZip()`           | Package all files as a ZIP (`Uint8Array`)               |
-| `ExportHtmlOptions`                   | Options interface for `exportHtml()`                    |
-| `ExportHtmlResult`                    | Result with `files` and `messages`                      |
-| `ExportFile`                          | File entry with `content` and optional `mimeType`       |
-| `LogMessage`                          | Export message with `message` and `type`                |
-| `engine.block.export(block, options)` | Export a block as an image                              |
-| `engine.block.findByType('page')`     | Find all pages in the scene                             |
-
-## Next Steps
-
-- [Export Overview](./export-save-publish/export/overview.md) — Compare all available export formats
-- [Export to MP4](./export-save-publish/export/to-mp4.md) — Export animations as video
-- [Export to PNG](./export-save-publish/export/to-png.md) — Export as a static image
-- [Compress Exports](./export-save-publish/export/compress.md) — Optimize file sizes
-
----
-
-## 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