@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/create-templates/lock.md

@@ -1,325 +1,72 @@
-> 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) > [Create and Use Templates](./create-templates.md) > [Lock the Template](./create-templates/lock.md)
 
 ---
 
-Set up a two-surface integration where template creators have full editing access while template adopters can only modify designated areas.
+Understand why template locking is designed for browser-based workflows, and when you might configure scopes server-side for template preparation.
 
-![Lock the Template](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+## Browser-Focused Feature
 
-> **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-create-templates-lock-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-templates-lock-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-templates-lock-browser/)
+Template locking uses a two-surface pattern with two separate editor instances: one for designers (the Creator role) who build templates with full access, and another for end users (the Adopter role) who can only modify unlocked elements. This separation requires:
 
-Many integrations need two different editing experiences: one for designers who build templates, and one for end users who customize them. The Creator and Adopter roles make this possible—same CE.SDK, different permissions based on who's using it. For detailed scope configuration patterns, see [Lock Content](./rules/lock-content.md).
+- **User interaction**: Different people editing in different modes
+- **Multiple editor instances**: Separate surfaces for creators and adopters
+- **Visual feedback**: Users see what they can and cannot edit
 
-In the live example, the headline text is pre-selected and the Placeholder panel is open, showing the scope settings that control what Adopters can edit. Toggle the role to Adopter and try selecting the logo to see the restrictions in action.
+Server-side automation processes templates in a single execution context without user interaction. The two-surface pattern does not apply—when processing templates on the server, you work with pre-configured templates where scopes are already set.
 
-```typescript file=@cesdk_web_examples/guides-create-templates-lock-browser/browser.ts reference-only
-import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+## When You Might Use Scopes Server-Side
 
-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';
+If you need to **prepare templates** for the two-surface workflow, you can configure scopes programmatically before distributing templates:
 
-/**
- * CE.SDK Plugin: Lock the Template
- *
- * This example demonstrates the two-surface pattern for template workflows:
- * - Creator role: Full editing access for designers building templates
- * - Adopter role: Restricted access for users customizing templates
- */
-class Example implements EditorPlugin {
-  name = packageJson.name;
+- Set `editor/select` and editing scopes on blocks that adopters should modify
+- Leave scopes disabled on protected elements like logos and brand assets
+- Save the configured template for use in browser-based adopter surfaces
 
-  version = packageJson.version;
+For scope configuration APIs, see [Lock Content](./rules/lock-content.md).
 
-  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());
-
-    await cesdk.actions.run('scene.create', {
-      page: { width: 800, height: 500, unit: 'Pixel' }
-    });
-
-    const engine = cesdk.engine;
-
-    // Get the page and set dimensions
-    const page = engine.block.findByType('page')[0];
-
-    // Create a brand template with a logo and headline
-    const logoBlock = await engine.block.addImage(
-      'https://img.ly/static/ubq_samples/imgly_logo.jpg',
-      { size: { width: 120, height: 30 } }
-    );
-    engine.block.appendChild(page, logoBlock);
-    engine.block.setPositionX(logoBlock, 40);
-    engine.block.setPositionY(logoBlock, 40);
-    engine.block.setName(logoBlock, 'Logo');
-
-    const headlineBlock = engine.block.create('text');
-    engine.block.replaceText(headlineBlock, 'Edit this headline');
-    engine.block.setWidth(headlineBlock, 720);
-    engine.block.setHeightMode(headlineBlock, 'Auto');
-    engine.block.setFloat(headlineBlock, 'text/fontSize', 48);
-    engine.block.setEnum(headlineBlock, 'text/horizontalAlignment', 'Center');
-    engine.block.appendChild(page, headlineBlock);
-    engine.block.setPositionX(headlineBlock, 40);
-    engine.block.setPositionY(headlineBlock, 200);
-    engine.block.setName(headlineBlock, 'Headline');
-
-    // Configure which elements Adopters can edit
-    // Enable selection and text editing on the headline
-    engine.block.setScopeEnabled(headlineBlock, 'editor/select', true);
-    engine.block.setScopeEnabled(headlineBlock, 'text/edit', true);
-
-    // Leave all scopes disabled on the logo (default state)
-    // This prevents Adopters from selecting or modifying the logo
-
-    // The Creator role ignores all scope restrictions
-    engine.editor.setRole('Creator');
-
-    // Add a role toggle to the navigation bar (engine calls are reactive)
-    cesdk.ui.registerComponent(
-      'ly.img.roleToggle.navigationBar',
-      ({ builder }) => {
-        const role = engine.editor.getRole();
-        builder.ButtonGroup('role-toggle', {
-          children: () => {
-            builder.Button('creator', {
-              label: 'Creator',
-              isActive: role === 'Creator',
-              onClick: () => engine.editor.setRole('Creator')
-            });
-            builder.Button('adopter', {
-              label: 'Adopter',
-              isActive: role === 'Adopter',
-              onClick: () => {
-                // Close the placeholder panel since Adopters can't configure scopes
-                cesdk.ui.closePanel(
-                  '//ly.img.panel/inspector/placeholderSettings'
-                );
-                engine.editor.setRole('Adopter');
-              }
-            });
-          }
-        });
-      }
-    );
-
-    cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
-      'ly.img.undoRedo.navigationBar',
-      'ly.img.spacer',
-      'ly.img.roleToggle.navigationBar',
-      'ly.img.spacer'
-    ]);
-
-    await engine.scene.zoomToBlock(page, { padding: 40 });
-
-    // Select the headline and open the placeholder panel so users see the scope settings
-    engine.block.select(headlineBlock);
-    setTimeout(() => {
-      cesdk.ui.openPanel('//ly.img.panel/inspector/placeholderSettings');
-    }, 300);
-  }
-}
-
-export default Example;
-```
-
-This guide covers how to understand the two-surface pattern, configure roles for different user groups, and set up scope restrictions that control what Adopters can edit.
-
-## Understanding the Two-Surface Pattern
-
-Template-based workflows typically involve two distinct user groups with different needs:
-
-| Surface         | Users                | Role      | What they can do                              |
-| --------------- | -------------------- | --------- | --------------------------------------------- |
-| Creator Surface | Designers, admins    | `Creator` | Full editing—build templates, set locks       |
-| Adopter Surface | End users, marketers | `Adopter` | Restricted editing—only modify unlocked areas |
-
-This separation protects design intent while enabling customization. The Creator role ignores all locks, giving full access. The Adopter role respects locks, restricting users to what's explicitly allowed.
-
-## Setting Up the Creator Surface
-
-The Creator surface is where templates are built. We use `engine.editor.setRole('Creator')` to give designers unrestricted access.
-
-```typescript highlight=highlight-creator-surface
-// The Creator role ignores all scope restrictions
-engine.editor.setRole('Creator');
-```
-
-In Creator mode, all operations are permitted regardless of scope settings. This is where designers build the template layout, configure which elements should be editable, set scope restrictions using `engine.block.setScopeEnabled()`, and save the template for distribution.
-
-## Setting Up the Adopter Surface
-
-The Adopter surface is where templates are used. Call `engine.editor.setRole('Adopter')` to enforce the restrictions configured by creators. In Adopter mode, users can only interact with blocks that have the appropriate scopes enabled. The Adopter role respects all lock configurations, ensuring brand consistency and design intent are maintained.
-
-## When to Use This Pattern
-
-This two-surface approach works well for:
-
-- **Brand template systems**: Marketing teams customize approved templates
-- **Design approval workflows**: Creators build, reviewers can't accidentally modify
-- **Self-service customization**: End users personalize within guardrails
-- **White-label products**: Customers can only edit designated areas
-
-For simpler use cases where all users have the same permissions, you may not need separate surfaces.
-
-## Configuring What Users Can Edit
-
-The scope system controls what Adopters can modify. In Creator mode, we enable specific scopes on blocks that should be editable.
-
-```typescript highlight=highlight-configure-scopes
-// Configure which elements Adopters can edit
-// Enable selection and text editing on the headline
-engine.block.setScopeEnabled(headlineBlock, 'editor/select', true);
-engine.block.setScopeEnabled(headlineBlock, 'text/edit', true);
-
-// Leave all scopes disabled on the logo (default state)
-// This prevents Adopters from selecting or modifying the logo
-```
-
-When Adopters load this template, they can edit the headline text but nothing else. The `editor/select` scope must be enabled for users to interact with a block at all. For comprehensive scope configuration patterns, see [Lock Content](./rules/lock-content.md).
-
-## Configuring Scopes in the Editor UI
-
-Designers can also configure scopes visually without writing code. In Creator mode, select any block and open the Placeholder panel in the inspector. This panel provides toggles for each scope:
-
-- **Allow selecting** (`editor/select`): Users can click to select the block
-- **Allow editing text** (`text/edit`): Users can modify text content
-- **Allow changing fill** (`fill/change`): Users can swap images or change colors
-- **Allow moving** (`layer/move`): Users can reposition the block
-- **Allow deleting** (`lifecycle/destroy`): Users can remove the block
+## API Reference
 
-Changes made in the Placeholder panel are equivalent to calling `engine.block.setScopeEnabled()` programmatically. When the template is saved, these settings persist and apply when Adopters load the template.
+### Role Management
 
-## Adding a Role Toggle
+| Method | Description |
+|--------|-------------|
+| `engine.editor.setRole(role)` | Set the editing role (`'Creator'`, `'Adopter'`, or `'Viewer'`) |
+| `engine.editor.getRole()` | Get the current editing role |
 
-Add a segmented control to the navigation bar that switches between Creator and Adopter modes. Engine calls inside the builder are automatically reactive—the component re-renders when the role changes.
+### Scope Configuration
 
-```typescript highlight=highlight-toggle-role
-// Add a role toggle to the navigation bar (engine calls are reactive)
-cesdk.ui.registerComponent('ly.img.roleToggle.navigationBar', ({ builder }) => {
-  const role = engine.editor.getRole();
-  builder.ButtonGroup('role-toggle', {
-    children: () => {
-      builder.Button('creator', {
-        label: 'Creator',
-        isActive: role === 'Creator',
-        onClick: () => engine.editor.setRole('Creator')
-      });
-      builder.Button('adopter', {
-        label: 'Adopter',
-        isActive: role === 'Adopter',
-        onClick: () => {
-          // Close the placeholder panel since Adopters can't configure scopes
-          cesdk.ui.closePanel('//ly.img.panel/inspector/placeholderSettings');
-          engine.editor.setRole('Adopter');
-        }
-      });
-    }
-  });
-});
+| Method | Description |
+|--------|-------------|
+| `engine.block.setScopeEnabled(block, scope, enabled)` | Enable or disable a scope on a block |
+| `engine.block.isScopeEnabled(block, scope)` | Check if a scope is enabled on a block |
 
-cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
-  'ly.img.undoRedo.navigationBar',
-  'ly.img.spacer',
-  'ly.img.roleToggle.navigationBar',
-  'ly.img.spacer'
-]);
-```
+### Common Scopes
 
-## Troubleshooting
+| Scope | Description |
+|-------|-------------|
+| `'editor/select'` | Allow selecting the block (required for any interaction) |
+| `'fill/change'` | Allow changing the block's fill (images, colors) |
+| `'text/edit'` | Allow editing text content |
+| `'text/character'` | Allow changing text formatting (font, size, color) |
+| `'layer/move'` | Allow moving the block |
+| `'layer/resize'` | Allow resizing the block |
+| `'layer/rotate'` | Allow rotating the block |
+| `'layer/crop'` | Allow cropping the block |
+| `'lifecycle/destroy'` | Allow deleting the block |
 
-| Issue                       | Cause                                  | Solution                                                    |
-| --------------------------- | -------------------------------------- | ----------------------------------------------------------- |
-| Adopter can edit everything | Wrong role or scopes not configured    | Verify role is `Adopter` and scopes are set in Creator mode |
-| Adopter can't edit anything | `editor/select` scope not enabled      | Enable `editor/select` on blocks users should interact with |
-| Creator can't set locks     | Wrong role                             | Switch to Creator role before configuring scopes            |
-| Changes not persisting      | Template not saved after scope changes | Save template after configuring scopes in Creator mode      |
+## See the Browser Guide
 
-## API Reference
+For the complete two-surface pattern implementation with interactive role switching, see the [browser guide](./create-templates/lock.md).
 
-| Method                                                | Description                                                    |
-| ----------------------------------------------------- | -------------------------------------------------------------- |
-| `engine.editor.setRole(role)`                         | Set the editing role (`'Creator'`, `'Adopter'`, or `'Viewer'`) |
-| `engine.editor.getRole()`                             | Get the current editing role                                   |
-| `engine.block.setScopeEnabled(block, scope, enabled)` | Enable or disable a scope on a block                           |
-| `engine.block.isScopeEnabled(block, scope)`           | Check if a scope is enabled on a block                         |
-| `cesdk.ui.registerComponent(id, renderFn)`            | Register a custom UI component                                 |
-| `builder.ButtonGroup(id, { children })`               | Create a segmented control                                     |
-| `builder.Button(id, { label, isActive, onClick })`    | Create a button                                                |
-
-### Common Scopes
 
-| Scope                 | Description                                              |
-| --------------------- | -------------------------------------------------------- |
-| `'editor/select'`     | Allow selecting the block (required for any interaction) |
-| `'fill/change'`       | Allow changing the block's fill (images, colors)         |
-| `'text/edit'`         | Allow editing text content                               |
-| `'text/character'`    | Allow changing text formatting (font, size, color)       |
-| `'layer/move'`        | Allow moving the block                                   |
-| `'layer/resize'`      | Allow resizing the block                                 |
-| `'layer/rotate'`      | Allow rotating the block                                 |
-| `'layer/crop'`        | Allow cropping the block                                 |
-| `'lifecycle/destroy'` | Allow deleting the block                                 |
 
 ---
 
 ## 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/create-templates/overview.md

@@ -1,16 +1,45 @@
-> 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) > [Create and Use Templates](./create-templates.md) > [Overview](./create-templates/overview.md)
 
 ---
 
+In CE.SDK, a *template* is a reusable, structured design that defines editable areas and constraints for end users. Templates can be based on static visuals and are used to guide content creation, enable mass personalization, and enforce design consistency.
+
+Unlike a regular editable design, a template introduces structure through placeholders and constraints, allowing you to define which elements users can change and how. Templates support static output formats (like PNG, PDF) and can be created or applied using the API.
+
+Templates are a core part of enabling design automation, personalization, and streamlined workflows in any app that includes creative functionality.
+
+[Launch Web Demo](https://img.ly/showcases/cesdk)
+
+[Get Started](./get-started/overview.md)
+
 These imported designs can then be adapted into editable, structured templates inside CE.SDK.
 
+## Dynamic Content in Templates
+
+Templates support dynamic content to enable data-driven generation of assets. CE.SDK provides several mechanisms:
+
+- **Text Variables**: Bind text elements to dynamic values (e.g., user names, product SKUs).
+- **Image Placeholders**: Reserve space for images to be inserted later.
+
+This makes it easy to generate hundreds or thousands of personalized variations from a single design.
+
+## Working with Templates Programmatically
+
+You can manage templates using the API:
+
+- **Programmatic Access**: Use the SDK’s APIs to create, apply, or modify templates as part of an automated workflow.
+- **Asset Library Integration**: Templates can appear in the asset library, allowing users to browse and pick templates visually.
+  - The Asset Library's appearance and behavior can be fully customized to fit your app’s needs.
+
+
+
 ---
 
 ## 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/create-templates.md

@@ -1,9 +1,13 @@
-> 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) > [Create and Use Templates](./create-templates.md)
 
 ---
 
+
+
+
+
 ---
 
 ## Related Pages
@@ -16,17 +20,17 @@
 - [Edit or Remove Templates](./create-templates/edit-or-remove.md) - Modify existing templates and manage template lifecycle by loading, editing, saving, and removing templates from asset sources.
 - [Add to Template Library](./create-templates/add-to-template-library.md) - Save and organize templates in an asset source for users to browse and apply from the template library.
 - [Overview](./use-templates/overview.md) - Learn how to browse, apply, and dynamically populate templates in CE.SDK to streamline design workflows.
-- [Template Library](./use-templates/library.md) - Learn how to provide a set of predefined templates in the CreativeEditor SDK.
 - [Apply a Template](./use-templates/apply-template.md) - Learn how to apply template scenes via API in the CreativeEditor SDK.
 - [Generate From Template](./use-templates/generate.md) - Learn how to generate finished designs from templates by loading, populating variables, and exporting to images, PDFs, or videos.
 - [Replace Content](./use-templates/replace-content.md) - Learn how to dynamically replace content within templates using CE.SDK's placeholder and variable systems.
 - [Use Templates Programmatically](./use-templates/programmatic.md) - Work with templates programmatically through CE.SDK's engine APIs to load existing templates, build new templates from scratch, modify template structures, and populate templates with dynamic data for batch processing and automation.
 
+
 ---
 
 ## 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