@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/import-media/retrieve-mimetype.md

@@ -1,4 +1,4 @@
-> 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).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Import Media Assets](./import-media.md) > [Retrieve Mimetype](./import-media/retrieve-mimetype.md)
 
@@ -6,52 +6,56 @@
 
 Detect the MIME type of resources loaded in the engine and relocate them to external URLs using `engine.editor.getMimeType()` and `engine.editor.relocateResource()`.
 
-![Retrieve MIME Type example showing a loaded scene with embedded images](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
-
 > **Reading time:** 5 minutes
 >
 > **Resources:**
 >
 > - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
-> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-retrieve-mimetype-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-retrieve-mimetype-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-import-media-retrieve-mimetype-browser/)
-
-When loading scene archives in CE.SDK, embedded media resources are stored with internal `buffer://` URIs rather than their original URLs. These resources include both images and fonts used in the scene. To process these resources correctly—for instance when uploading to a CDN, displaying previews, or exporting a clean scene file—you need to determine their MIME type and relocate them to external URLs.
-
-```typescript file=@cesdk_web_examples/guides-import-media-retrieve-mimetype-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
-
-import { DesignEditorConfig } from './design-editor/plugin';
-import packageJson from './package.json';
-
-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;
-
-    // Load an archive that contains embedded resources (images and fonts)
-    const archiveUrl =
-      'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip';
-    await engine.scene.loadFromArchiveURL(archiveUrl);
-
-    // Find all transient resources (embedded media with buffer:// URIs)
-    // This includes both images and fonts embedded in the archive
-    const transientResources = engine.editor.findAllTransientResources();
-    console.log(`Found ${transientResources.length} transient resources`);
-
-    if (transientResources.length === 0) {
-      console.log('No transient resources found in the loaded archive');
-      return;
-    }
-
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-import-media-retrieve-mimetype-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-import-media-retrieve-mimetype-server-js)
+
+When loading scene archives in CE.SDK, embedded media resources are stored with internal `buffer://` URIs rather than their original URLs. These resources include both images and fonts used in the scene. To process these resources correctly—for instance when uploading to a CDN or exporting a clean scene file—you need to determine their MIME type and relocate them to external URLs.
+
+```typescript file=@cesdk_web_examples/guides-import-media-retrieve-mimetype-server-js/server-js.ts reference-only
+import CreativeEngine from '@cesdk/node';
+import { config } from 'dotenv';
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+
+// Load environment variables
+config();
+
+/**
+ * CE.SDK Server Guide: Retrieve MIME Type
+ *
+ * This example demonstrates:
+ * - Loading a scene archive with embedded resources
+ * - Finding transient resources (buffer:// URIs) including images and fonts
+ * - Retrieving the MIME type of buffer resources
+ * - Relocating resources to external URLs for a clean scene export
+ */
+
+// Initialize CE.SDK engine with baseURL for asset loading
+const engine = await CreativeEngine.init({
+  // license: process.env.CESDK_LICENSE,
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+});
+
+try {
+  // Load an archive that contains embedded resources (images and fonts)
+  const archiveUrl =
+    'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip';
+  await engine.scene.loadFromArchiveURL(archiveUrl);
+
+  // Find all transient resources (embedded media with buffer:// URIs)
+  // This includes both images and fonts embedded in the archive
+  const transientResources = engine.editor.findAllTransientResources();
+  console.log(`Found ${transientResources.length} transient resources`);
+
+  if (transientResources.length === 0) {
+    console.log('No transient resources found in the loaded archive');
+  } else {
     // Get MIME types for all resources to see what's included
     const resourcesByType: Record<string, number> = {};
     for (const resource of transientResources) {
@@ -70,47 +74,96 @@ class Example implements EditorPlugin {
     }
     console.log(`Found ${imageResources.length} image resources`);
 
-    // Relocate all transient resources from buffer:// URIs to blob: URLs
-    // This is useful for displaying previews or preparing for upload
+    // Create output directory for extracted files
+    const outputDir = './output';
+    if (!existsSync(outputDir)) {
+      mkdirSync(outputDir, { recursive: true });
+    }
+
+    // Extension map for determining file extensions
+    const extensionMap: Record<string, string> = {
+      // Image types
+      'image/jpeg': '.jpg',
+      'image/png': '.png',
+      'image/webp': '.webp',
+      'image/gif': '.gif',
+      // Font types
+      'font/ttf': '.ttf',
+      'font/otf': '.otf',
+      'font/woff': '.woff',
+      'font/woff2': '.woff2'
+    };
+
+    // Extract and save all resources, simulating upload to storage
+    const uploadedUrls: Map<string, string> = new Map();
+    let fileIndex = 0;
+
     for (const resource of transientResources) {
       const bufferUri = resource.URL;
       // Skip internal bundle resources
       if (bufferUri.includes('bundle://ly.img.cesdk/')) continue;
 
       const mimeType = await engine.editor.getMimeType(bufferUri);
-      const length = engine.editor.getBufferLength(bufferUri);
-      const data = engine.editor.getBufferData(bufferUri, 0, length);
-
-      // Create a blob URL from the buffer data
-      const blob = new Blob([new Uint8Array(data)], { type: mimeType });
-      const blobUrl = URL.createObjectURL(blob);
-
-      // Update the scene to use the new URL instead of buffer://
-      engine.editor.relocateResource(bufferUri, blobUrl);
+      const bufferLength = engine.editor.getBufferLength(bufferUri);
+      const bufferData = engine.editor.getBufferData(
+        bufferUri,
+        0,
+        bufferLength
+      );
+
+      // Determine file extension and save
+      const extension = extensionMap[mimeType] || '.bin';
+      const filename = `resource-${fileIndex}${extension}`;
+      const outputPath = `${outputDir}/${filename}`;
+
+      writeFileSync(outputPath, Buffer.from(bufferData));
+      console.log(`Saved: ${filename} (${mimeType}, ${bufferLength} bytes)`);
+
+      // In production, you would upload to your storage/CDN here
+      // and get back a public URL. We simulate with a local file URL.
+      const simulatedCdnUrl = `https://your-cdn.com/assets/${filename}`;
+      uploadedUrls.set(bufferUri, simulatedCdnUrl);
+      fileIndex++;
     }
-    console.log('Relocated all transient resources to blob URLs');
-
-    // After relocation, the scene references blob: URLs instead of buffer:// URIs
-    // Note: blob: URLs are still considered transient (runtime) resources
-    // For permanent storage, upload to a CDN and relocate to https:// URLs
-    console.log(
-      `Relocated ${transientResources.length} buffer:// URIs to blob: URLs`
-    );
-
-    // Zoom to fit the scene
-    const pages = engine.block.findByType('page');
-    if (pages.length > 0) {
-      await cesdk.engine.scene.zoomToBlock(pages[0], { padding: 40 });
+
+    // Relocate all buffer:// URIs to their new external URLs
+    // This updates the scene to reference the uploaded files instead
+    for (const [bufferUri, newUrl] of uploadedUrls) {
+      engine.editor.relocateResource(bufferUri, newUrl);
     }
+    console.log(`Relocated ${uploadedUrls.size} resources to external URLs`);
 
-    console.log('Retrieve MIME Type example loaded successfully');
+    // Verify relocation: transient resources should now be empty
+    const remainingResources = engine.editor.findAllTransientResources();
+    console.log(`Remaining transient resources: ${remainingResources.length}`);
+
+    // Export the scene - it now references external URLs instead of buffer:// URIs
+    const sceneString = await engine.scene.saveToString();
+    const sceneOutputPath = `${outputDir}/scene-relocated.scene`;
+    writeFileSync(sceneOutputPath, sceneString);
+    console.log(`Saved relocated scene to: ${sceneOutputPath}`);
   }
-}
 
-export default Example;
+  console.log('\nRetrieve MIME Type example completed successfully!');
+} finally {
+  // Always dispose the engine to free resources
+  engine.dispose();
+}
 ```
 
-This guide covers loading a scene archive, finding transient resources, retrieving MIME types, filtering by resource type, and relocating resources to external URLs for a clean scene export.
+This guide covers loading a scene archive, finding transient resources, retrieving MIME types, saving resources to storage, and relocating them to external URLs for a clean scene export.
+
+## Setup
+
+Initialize the CE.SDK engine for server-side resource processing:
+
+```typescript highlight=highlight-setup
+// Initialize CE.SDK engine with baseURL for asset loading
+const engine = await CreativeEngine.init({
+  // license: process.env.CESDK_LICENSE,
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL
+});
+```
 
 ## Loading a Scene Archive
 
@@ -186,58 +239,102 @@ console.log(`Found ${imageResources.length} image resources`);
 
 This pattern allows you to separate image processing from font processing, or to handle each resource type differently.
 
-## Relocating Resources
+## Extracting and Uploading Resources
+
+Extract buffer data for each resource, save or upload it to your storage service, and track the mapping from buffer URIs to new external URLs.
+
+```typescript highlight=highlight-get-buffer-data
+    // Extension map for determining file extensions
+    const extensionMap: Record<string, string> = {
+      // Image types
+      'image/jpeg': '.jpg',
+      'image/png': '.png',
+      'image/webp': '.webp',
+      'image/gif': '.gif',
+      // Font types
+      'font/ttf': '.ttf',
+      'font/otf': '.otf',
+      'font/woff': '.woff',
+      'font/woff2': '.woff2'
+    };
+
+    // Extract and save all resources, simulating upload to storage
+    const uploadedUrls: Map<string, string> = new Map();
+    let fileIndex = 0;
 
-After extracting buffer data, use `relocateResource()` to update the scene to reference new URLs instead of `buffer://` URIs. This is essential when uploading resources to a CDN or storage service.
+    for (const resource of transientResources) {
+      const bufferUri = resource.URL;
+      // Skip internal bundle resources
+      if (bufferUri.includes('bundle://ly.img.cesdk/')) continue;
 
-```typescript highlight=highlight-relocate-resources
-// Relocate all transient resources from buffer:// URIs to blob: URLs
-// This is useful for displaying previews or preparing for upload
-for (const resource of transientResources) {
-  const bufferUri = resource.URL;
-  // Skip internal bundle resources
-  if (bufferUri.includes('bundle://ly.img.cesdk/')) continue;
+      const mimeType = await engine.editor.getMimeType(bufferUri);
+      const bufferLength = engine.editor.getBufferLength(bufferUri);
+      const bufferData = engine.editor.getBufferData(
+        bufferUri,
+        0,
+        bufferLength
+      );
+
+      // Determine file extension and save
+      const extension = extensionMap[mimeType] || '.bin';
+      const filename = `resource-${fileIndex}${extension}`;
+      const outputPath = `${outputDir}/${filename}`;
+
+      writeFileSync(outputPath, Buffer.from(bufferData));
+      console.log(`Saved: ${filename} (${mimeType}, ${bufferLength} bytes)`);
+
+      // In production, you would upload to your storage/CDN here
+      // and get back a public URL. We simulate with a local file URL.
+      const simulatedCdnUrl = `https://your-cdn.com/assets/${filename}`;
+      uploadedUrls.set(bufferUri, simulatedCdnUrl);
+      fileIndex++;
+    }
+```
+
+In production, replace the simulated CDN URL with the actual URL returned by your storage service (e.g., AWS S3, Google Cloud Storage, or your own CDN).
 
-  const mimeType = await engine.editor.getMimeType(bufferUri);
-  const length = engine.editor.getBufferLength(bufferUri);
-  const data = engine.editor.getBufferData(bufferUri, 0, length);
+## Relocating Resources
 
-  // Create a blob URL from the buffer data
-  const blob = new Blob([new Uint8Array(data)], { type: mimeType });
-  const blobUrl = URL.createObjectURL(blob);
+After uploading resources, use `relocateResource()` to update the scene to reference the new external URLs instead of `buffer://` URIs.
 
-  // Update the scene to use the new URL instead of buffer://
-  engine.editor.relocateResource(bufferUri, blobUrl);
+```typescript highlight=highlight-relocate-resources
+// Relocate all buffer:// URIs to their new external URLs
+// This updates the scene to reference the uploaded files instead
+for (const [bufferUri, newUrl] of uploadedUrls) {
+  engine.editor.relocateResource(bufferUri, newUrl);
 }
-console.log('Relocated all transient resources to blob URLs');
+console.log(`Relocated ${uploadedUrls.size} resources to external URLs`);
 ```
 
-In the browser, you can create blob URLs for immediate use. For production workflows, you would upload the blob data to your storage service and use the returned CDN URL.
+This step is essential for creating a portable scene file that references your hosted assets.
 
-## Verifying Relocation
+## Verifying and Exporting
 
-After relocating all resources, verify that no `buffer://` URIs remain. Note that `blob:` URLs are still considered transient resources by the engine—they are runtime URLs that exist only in the current browser session.
+After relocating all resources, verify that no transient resources remain and export the clean scene.
 
 ```typescript highlight=highlight-verify-relocation
-// After relocation, the scene references blob: URLs instead of buffer:// URIs
-// Note: blob: URLs are still considered transient (runtime) resources
-// For permanent storage, upload to a CDN and relocate to https:// URLs
-console.log(
-  `Relocated ${transientResources.length} buffer:// URIs to blob: URLs`
-);
+    // Verify relocation: transient resources should now be empty
+    const remainingResources = engine.editor.findAllTransientResources();
+    console.log(`Remaining transient resources: ${remainingResources.length}`);
+
+    // Export the scene - it now references external URLs instead of buffer:// URIs
+    const sceneString = await engine.scene.saveToString();
+    const sceneOutputPath = `${outputDir}/scene-relocated.scene`;
+    writeFileSync(sceneOutputPath, sceneString);
+    console.log(`Saved relocated scene to: ${sceneOutputPath}`);
 ```
 
-For production use, upload resources to a CDN and relocate to permanent `https://` URLs. This produces a scene file that can be stored and loaded in future sessions.
+The exported scene file now references external URLs instead of embedded binary data, making it smaller and suitable for storage in a database or file system.
 
 ## API Reference
 
-| Method                                                     | Description                                                                                                                 |
-| ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `engine.editor.findAllTransientResources()`                | Returns an array of transient resources with `URL` and `size` properties. Includes images, fonts, and other embedded media. |
-| `engine.editor.getMimeType(uri)`                           | Returns the MIME type of the resource at the given URI. Downloads the resource if not already cached.                       |
-| `engine.editor.getBufferLength(uri)`                       | Returns the byte length of the buffer at the given URI.                                                                     |
-| `engine.editor.getBufferData(uri, offset, length)`         | Returns raw binary data from the buffer, starting at the specified offset for the given length.                             |
-| `engine.editor.relocateResource(currentUrl, relocatedUrl)` | Updates all references to `currentUrl` in the scene to use `relocatedUrl` instead.                                          |
+| Method | Description |
+|--------|-------------|
+| `engine.editor.findAllTransientResources()` | Returns an array of transient resources with `URL` and `size` properties. Includes images, fonts, and other embedded media. |
+| `engine.editor.getMimeType(uri)` | Returns the MIME type of the resource at the given URI. Downloads the resource if not already cached. |
+| `engine.editor.getBufferLength(uri)` | Returns the byte length of the buffer at the given URI. |
+| `engine.editor.getBufferData(uri, offset, length)` | Returns raw binary data from the buffer, starting at the specified offset for the given length. |
+| `engine.editor.relocateResource(currentUrl, relocatedUrl)` | Updates all references to `currentUrl` in the scene to use `relocatedUrl` instead. |
 
 ## Troubleshooting
 
@@ -264,11 +361,22 @@ If transient resources remain after calling `relocateResource()`:
 - Check that you're not skipping any resources in your loop
 - Bundle resources (`bundle://ly.img.cesdk/`) are internal and cannot be relocated
 
+## Cleanup
+
+Always dispose the engine when done to free resources:
+
+```typescript highlight=highlight-cleanup
+// Always dispose the engine to free resources
+engine.dispose();
+```
+
+
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js 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
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/import-media/size-limits.md

@@ -1,4 +1,4 @@
-> 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).
+> This is one page of the CE.SDK Node.js documentation. For a complete overview, see the [Node.js Documentation Index](https://img.ly/docs/cesdk/node.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
 
 **Navigation:** [Guides](./guides.md) > [Import Media Assets](./import-media.md) > [Size Limits](./import-media/size-limits.md)
 
@@ -10,11 +10,13 @@ CreativeEditor SDK (CE.SDK) supports importing high-resolution images, video, an
 
 ## Video Resolution & Duration Limits
 
+
+
 ---
 
 ## More Resources
 
-- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Node.js Documentation Index](https://img.ly/docs/cesdk/node.md)** - Browse all Node.js 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
+- **[Web Documentation](./node.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support