@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/open-the-editor/set-zoom-level.md

@@ -0,0 +1,303 @@
+> 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) > [Open the Editor](./open-the-editor.md) > [Set Zoom Level](./open-the-editor/set-zoom-level.md)
+
+---
+
+Control the canvas zoom level programmatically using CE.SDK. Learn how to use
+the zoom APIs to set specific levels, enable auto-fit, and zoom to blocks. You
+can also customize the navigation bar with your own zoom controls.
+
+![Set Zoom Level example showing canvas with zoom controls](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **Reading time:** 10 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-open-the-editor-set-zoom-level-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-set-zoom-level-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-open-the-editor-set-zoom-level-browser/)
+
+The zoom level is a ratio where 1.0 equals one design pixel per screen pixel. A zoom level of 2.0 makes content appear twice as large on screen, while 0.5 makes it appear half as large.
+
+```typescript file=@cesdk_web_examples/guides-open-the-editor-set-zoom-level-browser/src/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+import packageJson from '../package.json';
+import {
+  BlurAssetSource,
+  CaptionPresetsAssetSource,
+  ColorPaletteAssetSource,
+  CropPresetsAssetSource,
+  DemoAssetSources,
+  EffectsAssetSource,
+  FiltersAssetSource,
+  PagePresetsAssetSource,
+  StickerAssetSource,
+  TextAssetSource,
+  TypefaceAssetSource,
+  UploadAssetSources,
+  VectorShapeAssetSource
+} from '@cesdk/cesdk-js/plugins';
+import { DesignEditorConfig } from '../design-editor/plugin';
+
+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');
+    }
+
+    const engine = cesdk.engine;
+
+    await cesdk.addPlugin(new DesignEditorConfig());
+
+    // Load asset source plugins
+    await cesdk.addPlugin(new BlurAssetSource());
+    await cesdk.addPlugin(new CaptionPresetsAssetSource());
+    await cesdk.addPlugin(new ColorPaletteAssetSource());
+    await cesdk.addPlugin(new CropPresetsAssetSource());
+    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 TypefaceAssetSource());
+    await cesdk.addPlugin(new VectorShapeAssetSource());
+    await cesdk.addPlugin(
+      new UploadAssetSources({
+        include: ['ly.img.image.upload']
+      })
+    );
+    await cesdk.addPlugin(
+      new DemoAssetSources({
+        include: ['ly.img.image.*']
+      })
+    );
+    await cesdk.actions.run('scene.create', {
+      page: {
+        sourceId: 'ly.img.page.presets',
+        assetId: 'ly.img.page.presets.print.iso.a6.landscape'
+      }
+    });
+
+    const page = engine.block.findByType('page')[0];
+
+    // Set a specific zoom level (value 0.15 = 15%, 1.0 = 100%)
+    engine.scene.setZoomLevel(0.15);
+
+    // Enable auto-fit to keep content visible within the viewport
+    // Parameters: block, fitMode, paddingTop, paddingRight, paddingBottom, paddingLeft
+    engine.scene.enableZoomAutoFit(page, 'Both', 20, 20, 20, 20);
+
+    // Configure navigation bar with custom zoom buttons
+    // This replaces the default zoom controls
+    cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
+      'ly.img.spacer',
+      {
+        id: 'ly.img.action.navigationBar',
+        key: 'zoom-15',
+        label: 'Zoom 15%',
+        icon: '@imgly/ZoomOut',
+        onClick: () => {
+          engine.scene.setZoomLevel(0.15);
+        }
+      },
+      {
+        id: 'ly.img.action.navigationBar',
+        key: 'zoom-42',
+        label: 'Zoom 42%',
+        icon: '@imgly/Zoom',
+        onClick: () => {
+          engine.scene.setZoomLevel(0.42);
+        }
+      },
+      {
+        id: 'ly.img.action.navigationBar',
+        key: 'zoom-90',
+        label: 'Zoom 90%',
+        icon: '@imgly/ZoomIn',
+        onClick: () => {
+          engine.scene.setZoomLevel(0.9);
+        }
+      },
+      {
+        id: 'ly.img.action.navigationBar',
+        key: 'zoom-auto-fit',
+        label: 'Auto-Fit',
+        icon: '@imgly/Fit',
+        onClick: () => {
+          engine.scene.enableZoomAutoFit(page, 'Both', 20, 20, 20, 20);
+        }
+      }
+    ]);
+
+    // Zoom to show a specific block with smooth animation
+    await engine.scene.zoomToBlock(page, {
+      padding: 40,
+      animate: { duration: 0.3, easing: 'EaseOut' }
+    });
+  }
+}
+
+export default Example;
+```
+
+## Understanding the Zoom APIs
+
+CE.SDK provides three main approaches for controlling the zoom level.
+
+### Set Zoom Level
+
+Use `engine.scene.setZoomLevel()` to set a specific zoom level. The value is a ratio where:
+
+- `0.15` = 15% zoom (zoomed out)
+- `1.0` = 100% zoom (1:1 pixel ratio)
+- `2.0` = 200% zoom (zoomed in)
+
+```typescript highlight-set-zoom-level
+// Set a specific zoom level (value 0.15 = 15%, 1.0 = 100%)
+engine.scene.setZoomLevel(0.15);
+```
+
+### Auto-Fit Zoom
+
+Use `engine.scene.enableZoomAutoFit()` to continuously adjust zoom to fit a block in the viewport. The parameters are:
+
+- **blockOrScene**: The block ID to fit
+- **axis**: `'Both'`, `'Horizontal'`, or `'Vertical'`
+- **padding values**: Space around the block in screen pixels (top, right, bottom, left)
+
+```typescript highlight-auto-fit
+// Enable auto-fit to keep content visible within the viewport
+// Parameters: block, fitMode, paddingTop, paddingRight, paddingBottom, paddingLeft
+engine.scene.enableZoomAutoFit(page, 'Both', 20, 20, 20, 20);
+```
+
+When auto-fit is enabled, the viewport automatically adjusts when the block changes size. Calling `setZoomLevel()` or `zoomToBlock()` disables auto-fit.
+
+### Zoom to Block
+
+Use `engine.scene.zoomToBlock()` to focus the viewport on a specific block with animation:
+
+```typescript highlight-zoom-to-block
+// Zoom to show a specific block with smooth animation
+await engine.scene.zoomToBlock(page, {
+  padding: 40,
+  animate: { duration: 0.3, easing: 'EaseOut' }
+});
+```
+
+## Built-in Zoom Controls
+
+CE.SDK includes a built-in zoom component that provides a complete zoom interface out of the box. The `ly.img.zoom.navigationBar` component includes:
+
+- Zoom in and zoom out buttons
+- Auto-fit button
+- Fit-to-page option
+- Preset zoom levels (200%, 100%, 50%)
+- A dropdown with a numeric input for custom zoom values
+
+This component appears in the navigation bar by default. For most use cases, the built-in zoom controls provide everything users need without any additional code.
+
+## Customizing the Navigation Bar
+
+If you need custom zoom behavior beyond what the built-in component provides, use `cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, order)` to replace or extend the navigation bar controls.
+
+```typescript highlight-navigation-bar-buttons
+// Configure navigation bar with custom zoom buttons
+// This replaces the default zoom controls
+cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
+  'ly.img.spacer',
+  {
+    id: 'ly.img.action.navigationBar',
+    key: 'zoom-15',
+    label: 'Zoom 15%',
+    icon: '@imgly/ZoomOut',
+    onClick: () => {
+      engine.scene.setZoomLevel(0.15);
+    }
+  },
+  {
+    id: 'ly.img.action.navigationBar',
+    key: 'zoom-42',
+    label: 'Zoom 42%',
+    icon: '@imgly/Zoom',
+    onClick: () => {
+      engine.scene.setZoomLevel(0.42);
+    }
+  },
+  {
+    id: 'ly.img.action.navigationBar',
+    key: 'zoom-90',
+    label: 'Zoom 90%',
+    icon: '@imgly/ZoomIn',
+    onClick: () => {
+      engine.scene.setZoomLevel(0.9);
+    }
+  },
+  {
+    id: 'ly.img.action.navigationBar',
+    key: 'zoom-auto-fit',
+    label: 'Auto-Fit',
+    icon: '@imgly/Fit',
+    onClick: () => {
+      engine.scene.enableZoomAutoFit(page, 'Both', 20, 20, 20, 20);
+    }
+  }
+]);
+```
+
+Each action button requires:
+
+- **id**: Use `'ly.img.action.navigationBar'` for action buttons
+- **key**: Unique identifier for the button
+- **label**: Display text
+- **icon**: Icon from the `@imgly/` icon set
+- **onClick**: Handler function
+
+By defining your own order, you can remove default controls, add custom action buttons, and reorder existing components.
+
+## Troubleshooting
+
+### Zoom Level Doesn't Change
+
+- Check that no UI component is overriding zoom
+- Ensure a scene exists before calling zoom methods
+- Verify zoom clamping isn't limiting the range
+
+### Auto-Fit Not Working
+
+- Only one block can have auto-fit enabled at a time
+- Calling `setZoomLevel()` or `zoomToBlock()` disables auto-fit
+- Pass a valid block ID that exists in the scene
+
+### Custom Buttons Not Appearing
+
+- Ensure `setComponentOrder()` is called after the scene is created
+- Check that button keys are unique
+- Verify the icon name is correct
+
+## API Reference
+
+| Method                                                               | Description                       |
+| -------------------------------------------------------------------- | --------------------------------- |
+| `engine.scene.getZoomLevel()`                                        | Get current zoom level            |
+| `engine.scene.setZoomLevel()`                                        | Set zoom level directly           |
+| `engine.scene.zoomToBlock()`                                         | Zoom and pan to show a block      |
+| `engine.scene.enableZoomAutoFit()`                                   | Enable continuous zoom adjustment |
+| `engine.scene.disableZoomAutoFit()`                                  | Disable auto-fit                  |
+| `engine.scene.isZoomAutoFitEnabled()`                                | Query auto-fit state              |
+| `engine.scene.onZoomLevelChanged()`                                  | Subscribe to zoom changes         |
+| `cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, order)` | Customize navigation bar layout   |
+
+---
+
+## 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/open-the-editor/uri-resolver.md

@@ -0,0 +1,347 @@
+> 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) > [Open the Editor](./open-the-editor.md) > [URI Resolver](./open-the-editor/uri-resolver.md)
+
+---
+
+Learn how to intercept and transform asset URIs in CE.SDK, enabling authentication and custom resolution logic.
+
+![CE.SDK URI Resolver demonstration showing custom resolution behavior](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-open-the-editor-uri-resolver-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-open-the-editor-uri-resolver-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-open-the-editor-uri-resolver-browser/)
+
+When CE.SDK loads an asset, it resolves the URI to an absolute path before fetching. You can intercept this process to add authentication tokens or transform URIs based on your application's needs.
+
+```typescript file=@cesdk_web_examples/guides-open-the-editor-uri-resolver-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+import {
+  BlurAssetSource,
+  ColorPaletteAssetSource,
+  CropPresetsAssetSource,
+  DemoAssetSources,
+  EffectsAssetSource,
+  FiltersAssetSource,
+  PagePresetsAssetSource,
+  StickerAssetSource,
+  TextAssetSource,
+  TextComponentAssetSource,
+  TypefaceAssetSource,
+  UploadAssetSources,
+  VectorShapeAssetSource
+} from '@cesdk/cesdk-js/plugins';
+import { DesignEditorConfig } from './design-editor/plugin';
+import packageJson from './package.json';
+
+/**
+ * CE.SDK Plugin: URI Resolver Guide
+ *
+ * This example demonstrates:
+ * - Understanding default URI resolution behavior
+ * - Setting custom URI resolvers
+ * - Adding authentication tokens
+ * - Removing custom resolvers
+ */
+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());
+    // Add asset source plugins
+    await cesdk.addPlugin(new BlurAssetSource());
+    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.templates.blank.*',
+          'ly.img.templates.presentation.*',
+          'ly.img.templates.print.*',
+          'ly.img.templates.social.*',
+          '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 design scene
+    await cesdk.actions.run('scene.create', {
+      page: { width: 800, height: 600, unit: 'Pixel' }
+    });
+
+    const engine = cesdk.engine;
+
+    // Get the page
+    const pages = engine.block.findByType('page');
+    const page = pages[0];
+    if (!page) {
+      throw new Error('No page found');
+    }
+
+    // Set page background to light gray
+    const pageFill = engine.block.getFill(page);
+    engine.block.setColor(pageFill, 'fill/color/value', {
+      r: 0.96,
+      g: 0.96,
+      b: 0.96,
+      a: 1.0
+    });
+
+    // ========================================
+    // Section 1: Understanding Default URI Resolution
+    // ========================================
+
+    // Test resolution without loading assets
+    const relativeURI = '/images/photo.jpg';
+    const resolvedURI = await engine.editor.getAbsoluteURI(relativeURI);
+    // eslint-disable-next-line no-console
+    console.log('Default resolution:');
+    // eslint-disable-next-line no-console
+    console.log(`  Input:  ${relativeURI}`);
+    // eslint-disable-next-line no-console
+    console.log(`  Output: ${resolvedURI}`);
+
+    // ========================================
+    // Section 2: Setting a Custom URI Resolver
+    // ========================================
+
+    // Set a custom resolver that transforms specific file types
+    engine.editor.setURIResolver((uri, defaultURIResolver) => {
+      // Transform JPG files to a watermarked version
+      if (uri.endsWith('.jpg')) {
+        // eslint-disable-next-line no-console
+        console.log(`Custom resolver: Transforming ${uri}`);
+        return 'https://img.ly/static/ubq_samples/sample_1.jpg';
+      }
+      // Use default resolver for all other URIs
+      return defaultURIResolver(uri);
+    });
+
+    // Test the custom resolver
+    // ========================================
+    // Section 2: Adding Authentication with JWT Tokens
+    // ========================================
+
+    // Pre-generate token BEFORE setting the resolver (must be synchronous)
+    const authToken = 'demo-jwt-token-123';
+
+    // Set resolver that adds authentication to specific endpoints
+    engine.editor.setURIResolver((uri, defaultURIResolver) => {
+      // Only add auth token to URIs pointing to your stable link endpoint
+      if (uri.includes('your-server/image-stable-links/')) {
+        const authenticatedURI = `${uri}?auth=${authToken}`;
+        // eslint-disable-next-line no-console
+        console.log(`\nAuth resolver: Adding token to ${uri}`);
+        // eslint-disable-next-line no-console
+        console.log(`  Result: ${authenticatedURI}`);
+        return authenticatedURI;
+      }
+      // Use default resolver for all other URIs
+      return defaultURIResolver(uri);
+    });
+
+    // Test authentication with a protected URI
+    const protectedURI = 'https://your-server/image-stable-links/abc123';
+    await engine.editor.getAbsoluteURI(protectedURI);
+
+    // ========================================
+    // Section 3: Removing a Custom Resolver
+    // ========================================
+
+    // Remove the custom resolver to restore default behavior
+    engine.editor.setURIResolver((uri, defaultURIResolver) =>
+      defaultURIResolver(uri)
+    );
+    // eslint-disable-next-line no-console
+    console.log('\n✓ Removed custom resolver - back to default behavior');
+
+    // ========================================
+    // Visual Demonstration: Load Images
+    // ========================================
+
+    // Create a visual demonstration with actual image loading
+    // This shows that the resolver affects actual asset loading, not just getAbsoluteURI()
+
+    // Set a simple resolver for the demo
+    engine.editor.setURIResolver((uri, defaultURIResolver) => {
+      // For this demo, ensure all images resolve to valid URLs
+      if (uri.includes('sample')) {
+        return uri;
+      }
+      return defaultURIResolver(uri);
+    });
+
+    // Create three image blocks to demonstrate URI resolution in action
+    const imageSize = { width: 200, height: 150 };
+    const spacing = 40;
+    const startX = (800 - (imageSize.width * 3 + spacing * 2)) / 2;
+    const startY = (600 - imageSize.height) / 2;
+
+    // Image 1: Standard resolution
+    const image1 = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_1.jpg',
+      { size: imageSize }
+    );
+    engine.block.setPositionX(image1, startX);
+    engine.block.setPositionY(image1, startY);
+    engine.block.appendChild(page, image1);
+
+    // Image 2: Another sample
+    const image2 = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_2.jpg',
+      { size: imageSize }
+    );
+    engine.block.setPositionX(image2, startX + imageSize.width + spacing);
+    engine.block.setPositionY(image2, startY);
+    engine.block.appendChild(page, image2);
+
+    // Image 3: Third sample
+    const image3 = await engine.block.addImage(
+      'https://img.ly/static/ubq_samples/sample_3.jpg',
+      { size: imageSize }
+    );
+    engine.block.setPositionX(image3, startX + (imageSize.width + spacing) * 2);
+    engine.block.setPositionY(image3, startY);
+    engine.block.appendChild(page, image3);
+
+    // Zoom to fit all content
+    await engine.scene.zoomToBlock(page, {
+      padding: {
+        left: 40,
+        top: 40,
+        right: 40,
+        bottom: 40
+      }
+    });
+
+    // eslint-disable-next-line no-console
+    console.log('\n✓ URI Resolver guide loaded successfully!');
+  }
+}
+
+export default Example;
+```
+
+## Default URI Resolution
+
+By default, CE.SDK resolves URIs relative to the `basePath` setting. Absolute URIs (with http://, https://, data:) pass through unchanged, while relative paths get prepended with `basePath`.
+
+Use `getAbsoluteURI()` to test how URIs resolve without loading assets:
+
+```typescript highlight=highlight-test-resolution
+// Test resolution without loading assets
+const relativeURI = '/images/photo.jpg';
+const resolvedURI = await engine.editor.getAbsoluteURI(relativeURI);
+// eslint-disable-next-line no-console
+console.log('Default resolution:');
+// eslint-disable-next-line no-console
+console.log(`  Input:  ${relativeURI}`);
+// eslint-disable-next-line no-console
+console.log(`  Output: ${resolvedURI}`);
+```
+
+## Custom URI Resolver
+
+Set a custom resolver to intercept and transform URIs. The resolver receives the URI and a `defaultURIResolver` function for fallback behavior:
+
+```typescript highlight=highlight-set-resolver
+// Set a custom resolver that transforms specific file types
+engine.editor.setURIResolver((uri, defaultURIResolver) => {
+  // Transform JPG files to a watermarked version
+  if (uri.endsWith('.jpg')) {
+    // eslint-disable-next-line no-console
+    console.log(`Custom resolver: Transforming ${uri}`);
+    return 'https://img.ly/static/ubq_samples/sample_1.jpg';
+  }
+  // Use default resolver for all other URIs
+  return defaultURIResolver(uri);
+});
+```
+
+**Important:** The resolver must be synchronous—no `async`/`await` or Promises. Pre-compute any tokens or transformations before setting the resolver.
+
+## Adding Authentication
+
+A common use case is adding authentication tokens to asset URIs. Generate the token before setting the resolver, then append it as a query parameter:
+
+```typescript highlight=highlight-auth-resolver
+// Pre-generate token BEFORE setting the resolver (must be synchronous)
+const authToken = 'demo-jwt-token-123';
+
+// Set resolver that adds authentication to specific endpoints
+engine.editor.setURIResolver((uri, defaultURIResolver) => {
+  // Only add auth token to URIs pointing to your stable link endpoint
+  if (uri.includes('your-server/image-stable-links/')) {
+    const authenticatedURI = `${uri}?auth=${authToken}`;
+    // eslint-disable-next-line no-console
+    console.log(`\nAuth resolver: Adding token to ${uri}`);
+    // eslint-disable-next-line no-console
+    console.log(`  Result: ${authenticatedURI}`);
+    return authenticatedURI;
+  }
+  // Use default resolver for all other URIs
+  return defaultURIResolver(uri);
+});
+
+// Test authentication with a protected URI
+const protectedURI = 'https://your-server/image-stable-links/abc123';
+await engine.editor.getAbsoluteURI(protectedURI);
+```
+
+Your server validates the token and redirects to the actual asset (e.g., pre-signed S3 URL). CE.SDK follows redirects automatically.
+
+## Removing a Resolver
+
+Restore default behavior by setting a resolver that delegates to `defaultURIResolver`:
+
+```typescript highlight=highlight-remove-resolver
+// Remove the custom resolver to restore default behavior
+engine.editor.setURIResolver((uri, defaultURIResolver) =>
+  defaultURIResolver(uri)
+);
+// eslint-disable-next-line no-console
+console.log('\n✓ Removed custom resolver - back to default behavior');
+```
+
+## Key Constraints
+
+- **Sync vs async**: `setURIResolver` must be synchronous. Use `setURIResolverAsync` for async resolution.
+- **Must return absolute URIs**: Include scheme (http://, https://, data:)
+- **One resolver at a time**: New calls overwrite previous resolvers
+- **Delegate unmatched URIs**: Pass to `defaultURIResolver()` for unchanged paths
+
+## Next Steps
+
+- [Configuration](./configuration.md) — CE.SDK initialization and baseURL settings
+- [Load Assets from Remote](./import-media/from-remote-source.md) — Load assets from remote URLs and servers
+
+---
+
+## 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/open-the-editor.md

@@ -0,0 +1,29 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Open the Editor](./open-the-editor.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Overview](./open-the-editor/overview.md) - Learn how to load and create scenes, set the zoom level, and configure file proxies or URI resolvers.
+- [Load a Scene](./open-the-editor/load-scene.md) - Load existing design scenes into the editor to resume or modify previous work.
+- [Start With Blank Canvas](./open-the-editor/blank-canvas.md) - Launch the editor with an empty canvas as a starting point for new designs.
+- [Create From Image](./open-the-editor/from-image.md) - Create an editable scene from an image file, with automatic page dimensions matching the source image.
+- [Create From HTMLCanvas](./open-the-editor/from-htmlcanvas.md) - Start the editor from an HTMLCanvas element and enable editing on top of its rendered content.
+- [Create From Video](./open-the-editor/from-video.md) - Load a video file into the editor to start editing frame-based or time-based video content.
+- [Create From Template](./open-the-editor/from-template.md) - Start the editor with a pre-designed template for faster editing and consistent output.
+- [Import a Design](./open-the-editor/import-design.md) - Load previously saved scenes, self-contained archives, or create editable scenes from images and videos.
+- [Set Zoom Level](./open-the-editor/set-zoom-level.md) - Control the canvas zoom level programmatically to focus on specific areas of the design.
+- [URI Resolver](./open-the-editor/uri-resolver.md) - Take control over asset URI resolution in CE.SDK by intercepting and transforming URIs before the engine loads them.
+
+---
+
+## 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/outlines/overview.md

@@ -0,0 +1,14 @@
+> 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) > [Outlines](./outlines.md) > [Overview](./outlines/overview.md)
+
+---
+
+---
+
+## 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