@imgly/codesign-mcp 0.1.5 → 0.1.6

package/assets/docs/guide/rules/enforce-brand-guidelines.md

@@ -1,495 +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).
+> 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) > [Rules](./rules.md) > [Enforce Brand Guidelines](./rules/enforce-brand-guidelines.md)
 
 ---
 
-Learn how to restrict users to approved brand assets—specific colors, fonts, and images—while preventing unauthorized modifications to brand elements like logos and legal text.
-
-![Brand guidelines enforcement showing locked logo and editable content with custom color palette](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+Learn how to restrict users to approved brand assets—specific colors, fonts, and images—while preventing unauthorized modifications to brand elements like logos and legal text in server-side processing.
 
 > **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-rules-enforce-brand-guidelines-browser)
-> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-rules-enforce-brand-guidelines-browser)
-> - [Live demo](https://img.ly/docs/cesdk/examples/guides-rules-enforce-brand-guidelines-browser/)
-
-Brand guidelines enforcement in CE.SDK combines two complementary approaches: restricting which assets users can access (colors, fonts, images) and controlling what editing operations are permitted on brand elements. Asset restrictions work through custom asset sources that replace default libraries, while editing constraints use the scopes system to lock specific elements.
-
-```typescript file=@cesdk_web_examples/guides-rules-enforce-brand-guidelines-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';
+>
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-rules-enforce-brand-guidelines-server-js)
+>
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-rules-enforce-brand-guidelines-server-js)
+
+Brand guidelines enforcement in CE.SDK combines two complementary approaches: restricting which assets can be used (colors, fonts, images) and controlling what editing operations are permitted on brand elements. In server-side contexts, you can create templates with locked brand elements and validate user designs against brand rules before processing.
+
+```typescript file=@cesdk_web_examples/guides-rules-enforce-brand-guidelines-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 Plugin: Enforce Brand Guidelines Guide
+ * CE.SDK Server Guide: Enforce Brand Guidelines
  *
  * Demonstrates how to restrict users to approved brand assets and prevent
  * unauthorized modifications to brand elements using asset restrictions
- * and the scopes system.
+ * and the scopes system in a server-side context.
  */
-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');
-    }
-
-    // Set up internationalized names for custom asset libraries
-    cesdk.i18n.setTranslations({
-      en: {
-        'libraries.brandColors.label': 'Brand Colors',
-        'libraries.brandFonts.label': 'Brand Fonts'
-      }
-    });
-    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: 1200, height: 800, unit: 'Pixel' }
-    });
-
-    const engine = cesdk.engine;
-    const page = engine.block.findByType('page')[0];
-
-    // Create brand color source with approved colors only
-    engine.asset.addLocalSource('brandColors');
-
-    engine.asset.addAssetToSource('brandColors', {
-      id: 'brand-primary',
-      label: { en: 'Brand Blue' },
-      payload: {
-        color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 }
-      }
-    });
-
-    engine.asset.addAssetToSource('brandColors', {
-      id: 'brand-secondary',
-      label: { en: 'Brand Orange' },
-      payload: {
-        color: { colorSpace: 'sRGB', r: 1.0, g: 0.6, b: 0.0 }
-      }
-    });
-
-    engine.asset.addAssetToSource('brandColors', {
-      id: 'brand-neutral-dark',
-      label: { en: 'Dark Gray' },
-      payload: {
-        color: { colorSpace: 'sRGB', r: 0.2, g: 0.2, b: 0.2 }
-      }
-    });
-
-    engine.asset.addAssetToSource('brandColors', {
-      id: 'brand-neutral-light',
-      label: { en: 'Light Gray' },
-      payload: {
-        color: { colorSpace: 'sRGB', r: 0.9, g: 0.9, b: 0.9 }
-      }
-    });
-
-    engine.asset.addAssetToSource('brandColors', {
-      id: 'brand-white',
-      label: { en: 'White' },
-      payload: {
-        color: { colorSpace: 'sRGB', r: 1.0, g: 1.0, b: 1.0 }
-      }
-    });
-
-    // Replace default color palette with brand colors only
-    cesdk.ui.updateAssetLibraryEntry('ly.img.colors', {
-      sourceIds: ['brandColors']
-    });
-
-    // Create brand font source with approved typefaces
-    engine.asset.addLocalSource('brandFonts');
-
-    engine.asset.addAssetToSource('brandFonts', {
-      id: 'brand-heading-font',
-      label: { en: 'Montserrat' },
-      payload: {
-        typeface: {
-          name: 'Montserrat',
-          fonts: [
-            {
-              uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Montserrat/Montserrat-Regular.ttf',
-              subFamily: 'Regular',
-              weight: 'normal',
-              style: 'normal'
-            },
-            {
-              uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Montserrat/Montserrat-Bold.ttf',
-              subFamily: 'Bold',
-              weight: 'bold',
-              style: 'normal'
-            }
-          ]
-        }
-      }
-    });
-
-    engine.asset.addAssetToSource('brandFonts', {
-      id: 'brand-body-font',
-      label: { en: 'Open Sans' },
-      payload: {
-        typeface: {
-          name: 'Open Sans',
-          fonts: [
-            {
-              uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/OpenSans/OpenSans-Regular.ttf',
-              subFamily: 'Regular',
-              weight: 'normal',
-              style: 'normal'
-            },
-            {
-              uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/OpenSans/OpenSans-Bold.ttf',
-              subFamily: 'Bold',
-              weight: 'bold',
-              style: 'normal'
-            }
-          ]
-        }
-      }
-    });
-
-    // Replace default font library with brand fonts only
-    cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', {
-      sourceIds: ['brandFonts']
-    });
-
-    // Set global scopes to Defer for block-level control
-    engine.editor.setGlobalScope('layer/move', 'Defer');
-    engine.editor.setGlobalScope('layer/resize', 'Defer');
-    engine.editor.setGlobalScope('fill/change', 'Defer');
-    engine.editor.setGlobalScope('fill/changeType', 'Defer');
-    engine.editor.setGlobalScope('lifecycle/destroy', 'Defer');
-    engine.editor.setGlobalScope('lifecycle/duplicate', 'Defer');
-    engine.editor.setGlobalScope('text/edit', 'Defer');
-
-    const pageWidth = engine.block.getWidth(page);
-    const pageHeight = engine.block.getHeight(page);
-
-    // Create a locked logo block that cannot be modified
-    const logoBlock = engine.block.create('graphic');
-    const logoShape = engine.block.createShape('rect');
-    engine.block.setShape(logoBlock, logoShape);
-    engine.block.setWidth(logoBlock, 200);
-    engine.block.setHeight(logoBlock, 80);
-    engine.block.setPositionX(logoBlock, 40);
-    engine.block.setPositionY(logoBlock, 40);
-
-    const logoFill = engine.block.createFill('color');
-    engine.block.setColor(logoFill, 'fill/color/value', {
-      r: 0.2,
-      g: 0.4,
-      b: 0.8,
-      a: 1.0
-    });
-    engine.block.setFill(logoBlock, logoFill);
-    engine.block.setName(logoBlock, 'Company Logo');
-    engine.block.appendChild(page, logoBlock);
-
-    // Lock all editing capabilities on the logo
-    engine.block.setScopeEnabled(logoBlock, 'layer/move', false);
-    engine.block.setScopeEnabled(logoBlock, 'layer/resize', false);
-    engine.block.setScopeEnabled(logoBlock, 'fill/change', false);
-    engine.block.setScopeEnabled(logoBlock, 'fill/changeType', false);
-    engine.block.setScopeEnabled(logoBlock, 'lifecycle/destroy', false);
-    engine.block.setScopeEnabled(logoBlock, 'lifecycle/duplicate', false);
-
-    // Create locked legal text
-    const legalText = engine.block.create('text');
-    engine.block.setWidth(legalText, pageWidth - 80);
-    engine.block.setHeight(legalText, 30);
-    engine.block.setPositionX(legalText, 40);
-    engine.block.setPositionY(legalText, pageHeight - 50);
-    engine.block.replaceText(
-      legalText,
-      '\u00A9 2024 Company Name. All rights reserved.'
-    );
-    engine.block.setFloat(legalText, 'text/fontSize', 36);
-    engine.block.setName(legalText, 'Legal Text');
-    engine.block.appendChild(page, legalText);
-
-    // Lock the legal text
-    engine.block.setScopeEnabled(legalText, 'layer/move', false);
-    engine.block.setScopeEnabled(legalText, 'layer/resize', false);
-    engine.block.setScopeEnabled(legalText, 'text/edit', false);
-    engine.block.setScopeEnabled(legalText, 'lifecycle/destroy', false);
-
-    // Create an editable content area where users can work with brand assets
-    const contentBlock = engine.block.create('graphic');
-    const contentShape = engine.block.createShape('rect');
-    engine.block.setShape(contentBlock, contentShape);
-    engine.block.setWidth(contentBlock, 400);
-    engine.block.setHeight(contentBlock, 300);
-    engine.block.setPositionX(contentBlock, (pageWidth - 400) / 2);
-    engine.block.setPositionY(contentBlock, (pageHeight - 300) / 2);
-
-    const contentFill = engine.block.createFill('color');
-    engine.block.setColor(contentFill, 'fill/color/value', {
-      r: 1.0,
-      g: 0.6,
-      b: 0.0,
-      a: 1.0
-    });
-    engine.block.setFill(contentBlock, contentFill);
-    engine.block.setName(contentBlock, 'Editable Content');
-    engine.block.appendChild(page, contentBlock);
-
-    // Enable all editing for the editable content block
-    engine.block.setScopeEnabled(contentBlock, 'layer/move', true);
-    engine.block.setScopeEnabled(contentBlock, 'layer/resize', true);
-    engine.block.setScopeEnabled(contentBlock, 'fill/change', true);
-    engine.block.setScopeEnabled(contentBlock, 'fill/changeType', true);
-    engine.block.setScopeEnabled(contentBlock, 'lifecycle/destroy', true);
-    engine.block.setScopeEnabled(contentBlock, 'lifecycle/duplicate', true);
-
-    // Create editable text that uses brand fonts
-    const editableText = engine.block.create('text');
-    engine.block.setWidth(editableText, 300);
-    engine.block.setHeight(editableText, 60);
-    engine.block.setPositionX(editableText, (pageWidth - 300) / 2);
-    engine.block.setPositionY(editableText, 150);
-    engine.block.replaceText(editableText, 'Edit This Headline');
-    engine.block.setFloat(editableText, 'text/fontSize', 64);
-    engine.block.setEnum(editableText, 'text/horizontalAlignment', 'Center');
-    engine.block.setName(editableText, 'Editable Headline');
-    engine.block.appendChild(page, editableText);
-
-    // Enable text editing with brand font restrictions
-    engine.block.setScopeEnabled(editableText, 'layer/move', true);
-    engine.block.setScopeEnabled(editableText, 'layer/resize', true);
-    engine.block.setScopeEnabled(editableText, 'text/edit', true);
-    engine.block.setScopeEnabled(editableText, 'lifecycle/destroy', true);
-
-    // Validate brand compliance
-    const isLogoLocked = !engine.block.isAllowedByScope(
-      logoBlock,
-      'layer/move'
-    );
-    const isLegalLocked = !engine.block.isAllowedByScope(
-      legalText,
-      'text/edit'
-    );
-    const isContentEditable = engine.block.isAllowedByScope(
-      contentBlock,
-      'fill/change'
-    );
-
-    console.log(`Logo is locked: ${isLogoLocked}`);
-    console.log(`Legal text is locked: ${isLegalLocked}`);
-    console.log(`Content block is editable: ${isContentEditable}`);
-
-    // Select the editable content block and zoom to page
-    engine.block.select(contentBlock);
-    await engine.scene.zoomToBlock(page, {
-      padding: { left: 40, top: 40, right: 40, bottom: 40 }
-    });
-
-    // Open fill panel to show brand color restriction
-    cesdk.ui.openPanel('//ly.img.panel/inspector/fill');
-  }
-}
-
-export default Example;
-```
-
-## Restricting Colors to Brand Palette
-
-Create a custom color library containing only approved brand colors and replace the default palette in the UI.
 
-### Creating Brand Color Sources
-
-Use `engine.asset.addLocalSource()` to create a custom asset source, then add color assets with `engine.asset.addAssetToSource()`:
-
-```typescript highlight-create-brand-colors
-// Create brand color source with approved colors only
-engine.asset.addLocalSource('brandColors');
-
-engine.asset.addAssetToSource('brandColors', {
-  id: 'brand-primary',
-  label: { en: 'Brand Blue' },
-  payload: {
-    color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 }
-  }
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
 });
 
-engine.asset.addAssetToSource('brandColors', {
-  id: 'brand-secondary',
-  label: { en: 'Brand Orange' },
-  payload: {
-    color: { colorSpace: 'sRGB', r: 1.0, g: 0.6, b: 0.0 }
-  }
-});
+try {
+  // Create a design scene
+  engine.scene.create('VerticalStack', {
+    page: { size: { width: 1200, height: 800 } },
+  });
 
-engine.asset.addAssetToSource('brandColors', {
-  id: 'brand-neutral-dark',
-  label: { en: 'Dark Gray' },
-  payload: {
-    color: { colorSpace: 'sRGB', r: 0.2, g: 0.2, b: 0.2 }
+  const page = engine.block.findByType('page')[0];
+  if (!page) {
+    throw new Error('No page found');
   }
-});
 
-engine.asset.addAssetToSource('brandColors', {
-  id: 'brand-neutral-light',
-  label: { en: 'Light Gray' },
-  payload: {
-    color: { colorSpace: 'sRGB', r: 0.9, g: 0.9, b: 0.9 }
+  const pageWidth = engine.block.getWidth(page);
+  const pageHeight = engine.block.getHeight(page);
+
+  // Create brand color source with approved colors only
+  engine.asset.addLocalSource('brandColors');
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-primary',
+    label: { en: 'Brand Blue' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 },
+    },
+  });
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-secondary',
+    label: { en: 'Brand Orange' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 1.0, g: 0.6, b: 0.0 },
+    },
+  });
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-neutral-dark',
+    label: { en: 'Dark Gray' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 0.2, g: 0.2, b: 0.2 },
+    },
+  });
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-neutral-light',
+    label: { en: 'Light Gray' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 0.9, g: 0.9, b: 0.9 },
+    },
+  });
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-white',
+    label: { en: 'White' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 1.0, g: 1.0, b: 1.0 },
+    },
+  });
+
+  // Set global scopes to Defer for block-level control
+  engine.editor.setGlobalScope('layer/move', 'Defer');
+  engine.editor.setGlobalScope('layer/resize', 'Defer');
+  engine.editor.setGlobalScope('fill/change', 'Defer');
+  engine.editor.setGlobalScope('fill/changeType', 'Defer');
+  engine.editor.setGlobalScope('lifecycle/destroy', 'Defer');
+  engine.editor.setGlobalScope('lifecycle/duplicate', 'Defer');
+  engine.editor.setGlobalScope('text/edit', 'Defer');
+
+  // Create a locked logo block that cannot be modified
+  const logoBlock = engine.block.create('graphic');
+  const logoShape = engine.block.createShape('rect');
+  engine.block.setShape(logoBlock, logoShape);
+  engine.block.setWidth(logoBlock, 200);
+  engine.block.setHeight(logoBlock, 80);
+  engine.block.setPositionX(logoBlock, 40);
+  engine.block.setPositionY(logoBlock, 40);
+
+  const logoFill = engine.block.createFill('color');
+  engine.block.setColor(logoFill, 'fill/color/value', {
+    r: 0.2,
+    g: 0.4,
+    b: 0.8,
+    a: 1.0,
+  });
+  engine.block.setFill(logoBlock, logoFill);
+  engine.block.setName(logoBlock, 'Company Logo');
+  engine.block.appendChild(page, logoBlock);
+
+  // Lock all editing capabilities on the logo
+  engine.block.setScopeEnabled(logoBlock, 'layer/move', false);
+  engine.block.setScopeEnabled(logoBlock, 'layer/resize', false);
+  engine.block.setScopeEnabled(logoBlock, 'fill/change', false);
+  engine.block.setScopeEnabled(logoBlock, 'fill/changeType', false);
+  engine.block.setScopeEnabled(logoBlock, 'lifecycle/destroy', false);
+  engine.block.setScopeEnabled(logoBlock, 'lifecycle/duplicate', false);
+
+  // Create locked legal text
+  const legalText = engine.block.create('text');
+  engine.block.setWidth(legalText, pageWidth - 80);
+  engine.block.setHeight(legalText, 30);
+  engine.block.setPositionX(legalText, 40);
+  engine.block.setPositionY(legalText, pageHeight - 50);
+  engine.block.replaceText(
+    legalText,
+    '\u00A9 2024 Company Name. All rights reserved.'
+  );
+  engine.block.setFloat(legalText, 'text/fontSize', 36);
+  engine.block.setName(legalText, 'Legal Text');
+  engine.block.appendChild(page, legalText);
+
+  // Lock the legal text
+  engine.block.setScopeEnabled(legalText, 'layer/move', false);
+  engine.block.setScopeEnabled(legalText, 'layer/resize', false);
+  engine.block.setScopeEnabled(legalText, 'text/edit', false);
+  engine.block.setScopeEnabled(legalText, 'lifecycle/destroy', false);
+
+  // Create an editable content area where users can work with brand assets
+  const contentBlock = engine.block.create('graphic');
+  const contentShape = engine.block.createShape('rect');
+  engine.block.setShape(contentBlock, contentShape);
+  engine.block.setWidth(contentBlock, 400);
+  engine.block.setHeight(contentBlock, 300);
+  engine.block.setPositionX(contentBlock, (pageWidth - 400) / 2);
+  engine.block.setPositionY(contentBlock, (pageHeight - 300) / 2);
+
+  const contentFill = engine.block.createFill('color');
+  engine.block.setColor(contentFill, 'fill/color/value', {
+    r: 1.0,
+    g: 0.6,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.setFill(contentBlock, contentFill);
+  engine.block.setName(contentBlock, 'Editable Content');
+  engine.block.appendChild(page, contentBlock);
+
+  // Enable all editing for the editable content block
+  engine.block.setScopeEnabled(contentBlock, 'layer/move', true);
+  engine.block.setScopeEnabled(contentBlock, 'layer/resize', true);
+  engine.block.setScopeEnabled(contentBlock, 'fill/change', true);
+  engine.block.setScopeEnabled(contentBlock, 'fill/changeType', true);
+  engine.block.setScopeEnabled(contentBlock, 'lifecycle/destroy', true);
+  engine.block.setScopeEnabled(contentBlock, 'lifecycle/duplicate', true);
+
+  // Create editable text
+  const editableText = engine.block.create('text');
+  engine.block.setWidth(editableText, 300);
+  engine.block.setHeight(editableText, 60);
+  engine.block.setPositionX(editableText, (pageWidth - 300) / 2);
+  engine.block.setPositionY(editableText, 150);
+  engine.block.replaceText(editableText, 'Edit This Headline');
+  engine.block.setFloat(editableText, 'text/fontSize', 64);
+  engine.block.setEnum(editableText, 'text/horizontalAlignment', 'Center');
+  engine.block.setName(editableText, 'Editable Headline');
+  engine.block.appendChild(page, editableText);
+
+  // Enable text editing
+  engine.block.setScopeEnabled(editableText, 'layer/move', true);
+  engine.block.setScopeEnabled(editableText, 'layer/resize', true);
+  engine.block.setScopeEnabled(editableText, 'text/edit', true);
+  engine.block.setScopeEnabled(editableText, 'lifecycle/destroy', true);
+
+  // Validate brand compliance
+  const isLogoLocked = !engine.block.isAllowedByScope(logoBlock, 'layer/move');
+  const isLegalLocked = !engine.block.isAllowedByScope(legalText, 'text/edit');
+  const isContentEditable = engine.block.isAllowedByScope(
+    contentBlock,
+    'fill/change'
+  );
+
+  console.log('\n=== Brand Compliance Validation ===');
+  console.log(`Logo is locked: ${isLogoLocked}`);
+  console.log(`Legal text is locked: ${isLegalLocked}`);
+  console.log(`Content block is editable: ${isContentEditable}`);
+
+  // Create output directory
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
   }
-});
 
-engine.asset.addAssetToSource('brandColors', {
-  id: 'brand-white',
-  label: { en: 'White' },
-  payload: {
-    color: { colorSpace: 'sRGB', r: 1.0, g: 1.0, b: 1.0 }
-  }
-});
+  // Export the result as PNG
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  writeFileSync(`${outputDir}/enforce-brand-guidelines-result.png`, buffer);
+
+  console.log(
+    '\n\u2713 Exported result to output/enforce-brand-guidelines-result.png'
+  );
+  console.log('\n=== Enforce Brand Guidelines Demo Complete ===');
+} finally {
+  // Always dispose the engine to free resources
+  engine.dispose();
+}
 ```
 
-Each color asset specifies an `id`, optional `label` for display, and a `payload` containing the color definition. Colors use the `sRGB` color space with `r`, `g`, `b` values from 0 to 1.
-
-### Replacing the Default Color Palette
+## Setting Up the Engine
 
-Configure the color library to display only brand colors using `cesdk.ui.updateAssetLibraryEntry()`:
+Initialize the headless engine for server-side processing:
 
-```typescript highlight-replace-color-library
-// Replace default color palette with brand colors only
-cesdk.ui.updateAssetLibraryEntry('ly.img.colors', {
-  sourceIds: ['brandColors']
+```typescript highlight-setup
+// Initialize CE.SDK engine in headless mode
+const engine = await CreativeEngine.init({
+  baseURL: process.env.IMGLY_LOCAL_ASSETS_URL,
 });
 ```
 
-By omitting the default color palette source ID (`ly.img.color.palette`), users can only select from your approved brand colors.
-
-## Restricting Fonts to Brand Typefaces
-
-Limit font selection to brand-approved typefaces by creating a custom font asset source.
-
-### Creating Brand Font Sources
-
-Register brand fonts as assets with typeface payloads containing font family names and available variants:
-
-```typescript highlight-create-brand-fonts
-// Create brand font source with approved typefaces
-engine.asset.addLocalSource('brandFonts');
-
-engine.asset.addAssetToSource('brandFonts', {
-  id: 'brand-heading-font',
-  label: { en: 'Montserrat' },
-  payload: {
-    typeface: {
-      name: 'Montserrat',
-      fonts: [
-        {
-          uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Montserrat/Montserrat-Regular.ttf',
-          subFamily: 'Regular',
-          weight: 'normal',
-          style: 'normal'
-        },
-        {
-          uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/Montserrat/Montserrat-Bold.ttf',
-          subFamily: 'Bold',
-          weight: 'bold',
-          style: 'normal'
-        }
-      ]
-    }
-  }
-});
-
-engine.asset.addAssetToSource('brandFonts', {
-  id: 'brand-body-font',
-  label: { en: 'Open Sans' },
-  payload: {
-    typeface: {
-      name: 'Open Sans',
-      fonts: [
-        {
-          uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/OpenSans/OpenSans-Regular.ttf',
-          subFamily: 'Regular',
-          weight: 'normal',
-          style: 'normal'
-        },
-        {
-          uri: 'https://cdn.img.ly/assets/v2/ly.img.typeface/fonts/OpenSans/OpenSans-Bold.ttf',
-          subFamily: 'Bold',
-          weight: 'bold',
-          style: 'normal'
-        }
-      ]
-    }
-  }
-});
-```
-
-Each font in the typeface array specifies a `uri` pointing to the font file, plus `weight` and `style` properties.
-
-### Replacing the Default Font Library
+## Restricting Colors to Brand Palette
 
-Configure the font library to show only brand fonts:
+Create a custom color source containing only approved brand colors:
 
-```typescript highlight-replace-font-library
-// Replace default font library with brand fonts only
-cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', {
-  sourceIds: ['brandFonts']
-});
+```typescript highlight-create-brand-colors
+  // Create brand color source with approved colors only
+  engine.asset.addLocalSource('brandColors');
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-primary',
+    label: { en: 'Brand Blue' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 0.2, g: 0.4, b: 0.8 },
+    },
+  });
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-secondary',
+    label: { en: 'Brand Orange' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 1.0, g: 0.6, b: 0.0 },
+    },
+  });
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-neutral-dark',
+    label: { en: 'Dark Gray' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 0.2, g: 0.2, b: 0.2 },
+    },
+  });
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-neutral-light',
+    label: { en: 'Light Gray' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 0.9, g: 0.9, b: 0.9 },
+    },
+  });
+
+  engine.asset.addAssetToSource('brandColors', {
+    id: 'brand-white',
+    label: { en: 'White' },
+    payload: {
+      color: { colorSpace: 'sRGB', r: 1.0, g: 1.0, b: 1.0 },
+    },
+  });
 ```
 
-## Locking Brand Elements
-
-Protect brand assets like logos and legal text from modification using the scopes system.
+Each color asset specifies an `id`, optional `label` for display, and a `payload` containing the color definition. Colors use the `sRGB` color space with `r`, `g`, `b` values from 0 to 1.
 
-### Setting Global Scopes to Defer
+## Setting Global Scopes to Defer
 
-First, set global scopes to `'Defer'` to enable block-level control:
+Set global scopes to `'Defer'` to enable block-level control over editing permissions:
 
 ```typescript highlight-global-scope-defer
 // Set global scopes to Defer for block-level control
@@ -502,33 +310,37 @@ engine.editor.setGlobalScope('lifecycle/duplicate', 'Defer');
 engine.editor.setGlobalScope('text/edit', 'Defer');
 ```
 
-### Creating and Locking a Logo
+## Creating and Locking Brand Elements
 
-Create a brand element and disable all relevant scopes to lock it:
+### Creating a Logo Block
+
+Create a brand element that represents the company logo:
 
 ```typescript highlight-create-logo
-// Create a locked logo block that cannot be modified
-const logoBlock = engine.block.create('graphic');
-const logoShape = engine.block.createShape('rect');
-engine.block.setShape(logoBlock, logoShape);
-engine.block.setWidth(logoBlock, 200);
-engine.block.setHeight(logoBlock, 80);
-engine.block.setPositionX(logoBlock, 40);
-engine.block.setPositionY(logoBlock, 40);
-
-const logoFill = engine.block.createFill('color');
-engine.block.setColor(logoFill, 'fill/color/value', {
-  r: 0.2,
-  g: 0.4,
-  b: 0.8,
-  a: 1.0
-});
-engine.block.setFill(logoBlock, logoFill);
-engine.block.setName(logoBlock, 'Company Logo');
-engine.block.appendChild(page, logoBlock);
+  // Create a locked logo block that cannot be modified
+  const logoBlock = engine.block.create('graphic');
+  const logoShape = engine.block.createShape('rect');
+  engine.block.setShape(logoBlock, logoShape);
+  engine.block.setWidth(logoBlock, 200);
+  engine.block.setHeight(logoBlock, 80);
+  engine.block.setPositionX(logoBlock, 40);
+  engine.block.setPositionY(logoBlock, 40);
+
+  const logoFill = engine.block.createFill('color');
+  engine.block.setColor(logoFill, 'fill/color/value', {
+    r: 0.2,
+    g: 0.4,
+    b: 0.8,
+    a: 1.0,
+  });
+  engine.block.setFill(logoBlock, logoFill);
+  engine.block.setName(logoBlock, 'Company Logo');
+  engine.block.appendChild(page, logoBlock);
 ```
 
-Lock the logo by disabling editing scopes:
+### Locking the Logo
+
+Disable all relevant scopes to prevent any modifications:
 
 ```typescript highlight-lock-logo
 // Lock all editing capabilities on the logo
@@ -544,84 +356,84 @@ With these scopes disabled, the logo cannot be moved, resized, recolored, or del
 
 ### Locking Legal Text
 
-Similarly, protect legal text from modification:
+Create and protect legal text from modification:
 
 ```typescript highlight-create-legal-text
-// Create locked legal text
-const legalText = engine.block.create('text');
-engine.block.setWidth(legalText, pageWidth - 80);
-engine.block.setHeight(legalText, 30);
-engine.block.setPositionX(legalText, 40);
-engine.block.setPositionY(legalText, pageHeight - 50);
-engine.block.replaceText(
-  legalText,
-  '\u00A9 2024 Company Name. All rights reserved.'
-);
-engine.block.setFloat(legalText, 'text/fontSize', 36);
-engine.block.setName(legalText, 'Legal Text');
-engine.block.appendChild(page, legalText);
-
-// Lock the legal text
-engine.block.setScopeEnabled(legalText, 'layer/move', false);
-engine.block.setScopeEnabled(legalText, 'layer/resize', false);
-engine.block.setScopeEnabled(legalText, 'text/edit', false);
-engine.block.setScopeEnabled(legalText, 'lifecycle/destroy', false);
+  // Create locked legal text
+  const legalText = engine.block.create('text');
+  engine.block.setWidth(legalText, pageWidth - 80);
+  engine.block.setHeight(legalText, 30);
+  engine.block.setPositionX(legalText, 40);
+  engine.block.setPositionY(legalText, pageHeight - 50);
+  engine.block.replaceText(
+    legalText,
+    '\u00A9 2024 Company Name. All rights reserved.'
+  );
+  engine.block.setFloat(legalText, 'text/fontSize', 36);
+  engine.block.setName(legalText, 'Legal Text');
+  engine.block.appendChild(page, legalText);
+
+  // Lock the legal text
+  engine.block.setScopeEnabled(legalText, 'layer/move', false);
+  engine.block.setScopeEnabled(legalText, 'layer/resize', false);
+  engine.block.setScopeEnabled(legalText, 'text/edit', false);
+  engine.block.setScopeEnabled(legalText, 'lifecycle/destroy', false);
 ```
 
 ## Creating Editable Content Areas
 
-While brand elements are locked, other areas can remain fully editable. Create content blocks with all scopes enabled:
+While brand elements are locked, other areas can remain fully editable:
 
 ```typescript highlight-create-editable-content
-// Create an editable content area where users can work with brand assets
-const contentBlock = engine.block.create('graphic');
-const contentShape = engine.block.createShape('rect');
-engine.block.setShape(contentBlock, contentShape);
-engine.block.setWidth(contentBlock, 400);
-engine.block.setHeight(contentBlock, 300);
-engine.block.setPositionX(contentBlock, (pageWidth - 400) / 2);
-engine.block.setPositionY(contentBlock, (pageHeight - 300) / 2);
-
-const contentFill = engine.block.createFill('color');
-engine.block.setColor(contentFill, 'fill/color/value', {
-  r: 1.0,
-  g: 0.6,
-  b: 0.0,
-  a: 1.0
-});
-engine.block.setFill(contentBlock, contentFill);
-engine.block.setName(contentBlock, 'Editable Content');
-engine.block.appendChild(page, contentBlock);
-
-// Enable all editing for the editable content block
-engine.block.setScopeEnabled(contentBlock, 'layer/move', true);
-engine.block.setScopeEnabled(contentBlock, 'layer/resize', true);
-engine.block.setScopeEnabled(contentBlock, 'fill/change', true);
-engine.block.setScopeEnabled(contentBlock, 'fill/changeType', true);
-engine.block.setScopeEnabled(contentBlock, 'lifecycle/destroy', true);
-engine.block.setScopeEnabled(contentBlock, 'lifecycle/duplicate', true);
+  // Create an editable content area where users can work with brand assets
+  const contentBlock = engine.block.create('graphic');
+  const contentShape = engine.block.createShape('rect');
+  engine.block.setShape(contentBlock, contentShape);
+  engine.block.setWidth(contentBlock, 400);
+  engine.block.setHeight(contentBlock, 300);
+  engine.block.setPositionX(contentBlock, (pageWidth - 400) / 2);
+  engine.block.setPositionY(contentBlock, (pageHeight - 300) / 2);
+
+  const contentFill = engine.block.createFill('color');
+  engine.block.setColor(contentFill, 'fill/color/value', {
+    r: 1.0,
+    g: 0.6,
+    b: 0.0,
+    a: 1.0,
+  });
+  engine.block.setFill(contentBlock, contentFill);
+  engine.block.setName(contentBlock, 'Editable Content');
+  engine.block.appendChild(page, contentBlock);
+
+  // Enable all editing for the editable content block
+  engine.block.setScopeEnabled(contentBlock, 'layer/move', true);
+  engine.block.setScopeEnabled(contentBlock, 'layer/resize', true);
+  engine.block.setScopeEnabled(contentBlock, 'fill/change', true);
+  engine.block.setScopeEnabled(contentBlock, 'fill/changeType', true);
+  engine.block.setScopeEnabled(contentBlock, 'lifecycle/destroy', true);
+  engine.block.setScopeEnabled(contentBlock, 'lifecycle/duplicate', true);
 ```
 
-For text blocks that should be editable but restricted to brand fonts:
+For text blocks that should be editable:
 
 ```typescript highlight-create-editable-text
-// Create editable text that uses brand fonts
-const editableText = engine.block.create('text');
-engine.block.setWidth(editableText, 300);
-engine.block.setHeight(editableText, 60);
-engine.block.setPositionX(editableText, (pageWidth - 300) / 2);
-engine.block.setPositionY(editableText, 150);
-engine.block.replaceText(editableText, 'Edit This Headline');
-engine.block.setFloat(editableText, 'text/fontSize', 64);
-engine.block.setEnum(editableText, 'text/horizontalAlignment', 'Center');
-engine.block.setName(editableText, 'Editable Headline');
-engine.block.appendChild(page, editableText);
-
-// Enable text editing with brand font restrictions
-engine.block.setScopeEnabled(editableText, 'layer/move', true);
-engine.block.setScopeEnabled(editableText, 'layer/resize', true);
-engine.block.setScopeEnabled(editableText, 'text/edit', true);
-engine.block.setScopeEnabled(editableText, 'lifecycle/destroy', true);
+  // Create editable text
+  const editableText = engine.block.create('text');
+  engine.block.setWidth(editableText, 300);
+  engine.block.setHeight(editableText, 60);
+  engine.block.setPositionX(editableText, (pageWidth - 300) / 2);
+  engine.block.setPositionY(editableText, 150);
+  engine.block.replaceText(editableText, 'Edit This Headline');
+  engine.block.setFloat(editableText, 'text/fontSize', 64);
+  engine.block.setEnum(editableText, 'text/horizontalAlignment', 'Center');
+  engine.block.setName(editableText, 'Editable Headline');
+  engine.block.appendChild(page, editableText);
+
+  // Enable text editing
+  engine.block.setScopeEnabled(editableText, 'layer/move', true);
+  engine.block.setScopeEnabled(editableText, 'layer/resize', true);
+  engine.block.setScopeEnabled(editableText, 'text/edit', true);
+  engine.block.setScopeEnabled(editableText, 'lifecycle/destroy', true);
 ```
 
 ## Validating Brand Compliance
@@ -629,44 +441,63 @@ engine.block.setScopeEnabled(editableText, 'lifecycle/destroy', true);
 Check that brand constraints are properly enforced using `engine.block.isAllowedByScope()`:
 
 ```typescript highlight-validate-compliance
-// Validate brand compliance
-const isLogoLocked = !engine.block.isAllowedByScope(logoBlock, 'layer/move');
-const isLegalLocked = !engine.block.isAllowedByScope(legalText, 'text/edit');
-const isContentEditable = engine.block.isAllowedByScope(
-  contentBlock,
-  'fill/change'
-);
-
-console.log(`Logo is locked: ${isLogoLocked}`);
-console.log(`Legal text is locked: ${isLegalLocked}`);
-console.log(`Content block is editable: ${isContentEditable}`);
+  // Validate brand compliance
+  const isLogoLocked = !engine.block.isAllowedByScope(logoBlock, 'layer/move');
+  const isLegalLocked = !engine.block.isAllowedByScope(legalText, 'text/edit');
+  const isContentEditable = engine.block.isAllowedByScope(
+    contentBlock,
+    'fill/change'
+  );
+
+  console.log('\n=== Brand Compliance Validation ===');
+  console.log(`Logo is locked: ${isLogoLocked}`);
+  console.log(`Legal text is locked: ${isLegalLocked}`);
+  console.log(`Content block is editable: ${isContentEditable}`);
 ```
 
-This method considers both global and block-level scope settings to determine if an operation is permitted.
+This validation can be performed before processing user designs to ensure brand guidelines are respected.
+
+## Exporting the Result
+
+Export the design with brand guidelines enforced:
+
+```typescript highlight-export
+  // Create output directory
+  const outputDir = './output';
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Export the result as PNG
+  const blob = await engine.block.export(page, { mimeType: 'image/png' });
+  const buffer = Buffer.from(await blob.arrayBuffer());
+  writeFileSync(`${outputDir}/enforce-brand-guidelines-result.png`, buffer);
+```
 
 ## Troubleshooting
 
-- **Colors still editable**: Ensure the default color palette source is omitted from the `sourceIds` array in `updateAssetLibraryEntry()`
-- **Fonts not restricted**: Verify the font library configuration targets `'ly.img.typefaces'` and excludes default sources
+- **Colors still editable**: When saving templates, ensure color sources are properly configured
 - **Locked elements still movable**: Check that global scopes are set to `'Defer'` before setting block-level restrictions
 - **Brand elements deletable**: Confirm `lifecycle/destroy` scope is disabled on the specific blocks
+- **Validation failing**: Use `isAllowedByScope()` to debug which scopes are incorrectly configured
 
 ## API Reference
 
-| Method                                                | Category | Purpose                                           |
-| ----------------------------------------------------- | -------- | ------------------------------------------------- |
-| `engine.asset.addLocalSource(id)`                     | Asset    | Create a custom asset source for brand assets     |
-| `engine.asset.addAssetToSource(sourceId, asset)`      | Asset    | Add an asset to a local source                    |
-| `cesdk.ui.updateAssetLibraryEntry(libraryId, config)` | UI       | Configure which sources appear in asset libraries |
-| `engine.editor.setGlobalScope(scope, value)`          | Scope    | Set editor-wide scope permission to `'Defer'`     |
-| `engine.block.setScopeEnabled(id, scope, enabled)`    | Scope    | Enable or disable a scope for a specific block    |
-| `engine.block.isAllowedByScope(id, scope)`            | Scope    | Check if an operation is allowed                  |
+| Method | Category | Purpose |
+|--------|----------|---------|
+| `engine.asset.addLocalSource(id)` | Asset | Create a custom asset source for brand assets |
+| `engine.asset.addAssetToSource(sourceId, asset)` | Asset | Add an asset to a local source |
+| `engine.editor.setGlobalScope(scope, value)` | Scope | Set editor-wide scope permission to `'Defer'` |
+| `engine.block.setScopeEnabled(id, scope, enabled)` | Scope | Enable or disable a scope for a specific block |
+| `engine.block.isAllowedByScope(id, scope)` | Scope | Check if an operation is allowed |
+
+
 
 ---
 
 ## 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