@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/concepts/headless-mode/browser.md

@@ -0,0 +1,291 @@
+> 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:** [Concepts](./concepts.md) > [Headless Mode](./concepts/headless-mode/browser.md)
+
+---
+
+CreativeEditor SDK (CE.SDK) **Headless Mode** allows your web app to control the Engine API without loading the built-in user interface.
+
+Instead of starting the full editor with panels and toolbars, your browser code talks directly to the Engine. That keeps the experience within your own design system—ideal for automation running on the client.
+
+## Common Use Cases
+
+- **Automating workflows:** Merge data into templates or generate variations with no user input.
+- **Automated exports:** Render custom images or videos in the browser and hand them off to storage or your backend.
+- **Custom interfaces:** Embed the Engine beneath your own UI components.
+- **Background actions:** Run batch jobs or event-driven edits without overlaying the default UI.
+
+### When to Use Headless Mode
+
+<HeadlessScenario />
+
+## How Headless Mode Works
+
+The standard editor wires UI events (button clicks, drag interactions) to the Engine under the hood. In headless mode, you call the same Engine APIs yourself.
+
+### Features Available in Headless Mode
+
+In headless mode, you keep access to the CE.SDK features while staying entirely within your app’s DOM lifecycle, such as:
+
+- Scene management
+- Asset manipulation
+- Rendering and export
+- Templates and dynamic content
+
+### Requirements to Run the CreativeEngine in the Client
+
+CE.SDK’s Engine needs a **WebGL-capable environment**. When you ship a headless build in the browser:
+
+- Point the `baseURL` in your config at a publicly reachable asset directory (CDN or self-hosted) so the browser can load fonts and other Engine files—even when you install the npm package.
+- Only start the Engine **after the DOM is available** (for example, inside `useEffect`, `mounted`, or `DOMContentLoaded`).
+- **Dispose** of the Engine during tear down with `engine.dispose()` to release WebGL resources.
+- Ensure iframes or workers that boot the Engine expose `document` and a WebGL context.
+
+## Set Up Headless Mode in a Web App
+
+1. Install the Engine package:
+
+   ```bash
+   npm install @cesdk/engine@$UBQ_VERSION$
+   ```
+
+````
+
+2. Configure your license and asset location. The global CDN works for prototypes; production apps commonly self-host the asset bundle for faster loads.
+
+   ```ts
+   const config = {
+     license: '<YOUR_LICENSE_KEY>',
+     baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets'
+   };
+
+````
+
+3. Start the Engine from client-side code and reuse the instance across interactions.
+
+> **Tip:** The CreativeEngine doesn’t attach a canvas automatically. If you want a live preview, append `engine.element` onto your own layout.
+
+## Quick Start: Initialize the Engine Headlessly
+
+When you import `@cesdk/engine`, you get the same runtime that powers the full editor. Using the CreativeEngine instead of the CreativeEditor allows you to expose the Engine interface while skipping all UI bootstrapping that comes with the editor.
+
+```js
+import CreativeEngine from '@cesdk/engine';
+
+const config = {
+  license: '<YOUR_LICENSE_KEY>',
+  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets'
+};
+
+let engine;
+
+export async function getEngine() {
+  if (!engine) {
+    engine = await CreativeEngine.init(config);
+  }
+  return engine;
+}
+```
+
+Once started, you can trigger Engine operations inside your app logic from:
+
+- Buttons
+- Keyboard shortcuts
+- Background tasks
+
+## Example: Build and Export a Scene on a Single Click
+
+The workflow below wires the Engine to a button, so the user automatically downloads an edited PNG when clicking on a button:
+
+1. Copy paste the following code (adjust to your stack as needed):
+
+```js
+// Grab the button element
+const downloadButton = document.querySelector('#download-headless');
+
+// Register an async click handler
+downloadButton?.addEventListener('click', async () => {
+  // Wait for the Engine
+  const engine = await getEngine();
+
+  // Build a fresh scene
+  const scene = engine.scene.create();
+  const page = engine.block.create('page');
+  engine.block.setWidth(page, 800);
+  engine.block.setHeight(page, 600);
+  // Attach the page to the scene
+  engine.block.appendChild(scene, page);
+
+  // Add an image layer
+  const imageBlock = engine.block.create('graphic');
+  engine.block.setShape(imageBlock, engine.block.createShape('rect'));
+  const imageFill = engine.block.createFill('image');
+  // Load an image fill from the CDN
+  engine.block.setString(
+    imageFill,
+    'fill/image/imageFileURI',
+    'https://img.ly/static/ubq_samples/sample_1.jpg'
+  );
+  engine.block.setFill(imageBlock, imageFill);
+  // Set position and dimensions
+  engine.block.setPosition(imageBlock, 100, 100);
+  engine.block.setWidth(imageBlock, 300);
+  engine.block.setHeight(imageBlock, 300);
+  // Append the image to the page
+  engine.block.appendChild(page, imageBlock);
+
+  // Add a text layer
+  const textBlock = engine.block.create('text');
+  // Set the text content
+  engine.block.setString(textBlock, 'text/text', 'Hello from Headless Mode!');
+  // Set position and dimensions
+  engine.block.setPosition(textBlock, 100, 450);
+  engine.block.setWidth(textBlock, 600);
+  // Append the text to the page
+  engine.block.appendChild(page, textBlock);
+
+  // Export the page as a PNG
+  const exportResult = await engine.block.export(page, 'image/png');
+  // Normalize the result to a blob
+  const blob =
+    exportResult instanceof Blob
+      ? exportResult
+      : new Blob([exportResult], { type: 'image/png' });
+
+  triggerDownload(blob, 'headless-output.png');
+});
+
+function triggerDownload(blob, filename) {
+  // Build a temporary object URL
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  // Start the download on click
+  link.click();
+  // Revoke the link and URL to release resources
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+```
+
+2. Add a clickable element with the matching ID somewhere in your page’s markup. For example:
+
+<Tabs>
+  <TabItem label="Plain HTML">
+    ```js
+    <button id="download-headless">Download headless export</button>
+    ```
+  </TabItem>
+
+  <TabItem label="Component-based setup">
+    If you’re in a component-based setup (React, Vue, Svelte, etc.), include the same button inside the component’s render/template:
+
+    ```js
+    return (
+    <button id="download-headless">
+      Download headless export
+    </button>
+    );
+    ```
+
+  </TabItem>
+</Tabs>
+
+Once that element is in the DOM, the snippet’s querySelector('#download-headless') finds it and wires up the click handler that runs the export.
+
+<details>
+  <summary>See full module</summary>
+
+```js
+import CreativeEngine from '@cesdk/engine';
+
+const config = {
+  license: '<YOUR_LICENSE_KEY>',
+  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/$UBQ_VERSION$/assets'
+};
+
+let engine;
+
+export async function getEngine() {
+  if (!engine) {
+    engine = await CreativeEngine.init(config);
+  }
+  return engine;
+}
+
+const downloadButton = document.querySelector('#download-headless');
+
+downloadButton?.addEventListener('click', async () => {
+  const engine = await getEngine();
+
+  const scene = engine.scene.create();
+  const page = engine.block.create('page');
+  engine.block.setWidth(page, 800);
+  engine.block.setHeight(page, 600);
+  engine.block.appendChild(scene, page);
+
+  const imageBlock = engine.block.create('graphic');
+  engine.block.setShape(imageBlock, engine.block.createShape('rect'));
+  const imageFill = engine.block.createFill('image');
+  engine.block.setString(
+    imageFill,
+    'fill/image/imageFileURI',
+    'https://img.ly/static/ubq_samples/sample_1.jpg'
+  );
+  engine.block.setFill(imageBlock, imageFill);
+  engine.block.setPosition(imageBlock, 100, 100);
+  engine.block.setWidth(imageBlock, 300);
+  engine.block.setHeight(imageBlock, 300);
+  engine.block.appendChild(page, imageBlock);
+
+  const textBlock = engine.block.create('text');
+  engine.block.setString(textBlock, 'text/text', 'Hello from Headless Mode!');
+  engine.block.setPosition(textBlock, 100, 450);
+  engine.block.setWidth(textBlock, 600);
+  engine.block.appendChild(page, textBlock);
+
+  const exportResult = await engine.block.export(page, 'image/png');
+  const blob =
+    exportResult instanceof Blob
+      ? exportResult
+      : new Blob([exportResult], { type: 'image/png' });
+
+  triggerDownload(blob, 'headless-output.png');
+});
+
+function triggerDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+```
+
+</details>
+
+After you add the script to your app and run the dev server:
+
+1. Click the `#download-headless` button in your interface.
+2. The Engine assembles the scene in memory and exports it as a PNG.
+3. The PNG downloads locally (or you can upload it to your backend).
+
+<Picture src={greetingCard} style={{ width: '85%' }} alt="Greeting Card with image and text" formats={['webp']} />
+
+## Go Further
+
+Need a hybrid approach? [Engine interface guides](./engine-interface.md) show how to combine headless logic with the standard editor UI.
+
+---
+
+## 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/concepts/pages.md

@@ -0,0 +1,396 @@
+> 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:** [Concepts](./concepts.md) > [Pages](./concepts/pages.md)
+
+---
+
+Pages define the format of your designs—every graphic block, text element, and media file lives inside a page. This guide covers how pages fit into the scene hierarchy, their properties like margins and title templates, and how to configure page dimensions for different layout modes.
+
+![CE.SDK Pages Hero Image](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)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-concepts-pages-browser/)
+
+Pages provide the canvas and frame for your designs. Whether you're building a multi-page document, a social media carousel, or a video composition, understanding how pages work will help you with structuring your content correctly.
+
+```typescript file=@cesdk_web_examples/guides-concepts-pages-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+import { DesignEditorConfig } from './design-editor/plugin';
+import packageJson from './package.json';
+
+/**
+ * CE.SDK Plugin: Pages Guide
+ *
+ * Demonstrates working with pages in CE.SDK:
+ * - Understanding the scene hierarchy (Scene → Pages → Blocks)
+ * - Creating and managing multiple pages
+ * - Setting page dimensions at the scene level
+ * - Configuring page properties (margins, title templates, fills)
+ * - Navigating between pages
+ */
+class Example implements EditorPlugin {
+  name = packageJson.name;
+
+  version = packageJson.version;
+
+  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
+    if (!cesdk) {
+      throw new Error('CE.SDK instance is required for this plugin');
+    }
+
+    await cesdk.addPlugin(new DesignEditorConfig());
+    const engine = cesdk.engine;
+
+    // Create a scene with VerticalStack layout for multi-page designs
+    engine.scene.create('VerticalStack');
+
+    // Get the stack container to configure spacing
+    const [stack] = engine.block.findByType('stack');
+    engine.block.setFloat(stack, 'stack/spacing', 20);
+    engine.block.setBool(stack, 'stack/spacingInScreenspace', true);
+
+    // Get the scene to set page dimensions
+    const scene = engine.scene.get();
+    if (scene === null) {
+      throw new Error('No scene available');
+    }
+
+    // Set page dimensions at the scene level (all pages share these dimensions)
+    engine.block.setFloat(scene, 'scene/pageDimensions/width', 800);
+    engine.block.setFloat(scene, 'scene/pageDimensions/height', 600);
+
+    // Create the first page and set its dimensions
+    const firstPage = engine.block.create('page');
+    engine.block.setWidth(firstPage, 800);
+    engine.block.setHeight(firstPage, 600);
+    engine.block.appendChild(stack, firstPage);
+
+    // Create the second page with the same dimensions
+    const secondPage = engine.block.create('page');
+    engine.block.setWidth(secondPage, 800);
+    engine.block.setHeight(secondPage, 600);
+    engine.block.appendChild(stack, secondPage);
+
+    // Add an image block to the first page
+    const imageBlock = engine.block.create('graphic');
+    engine.block.appendChild(firstPage, imageBlock);
+
+    // Create a rect shape for the graphic block
+    const rectShape = engine.block.createShape('rect');
+    engine.block.setShape(imageBlock, rectShape);
+
+    // Configure size and position after appending to the page
+    engine.block.setWidth(imageBlock, 400);
+    engine.block.setHeight(imageBlock, 300);
+    engine.block.setPositionX(imageBlock, 200);
+    engine.block.setPositionY(imageBlock, 150);
+
+    // Create and configure the image fill
+    const imageFill = engine.block.createFill('image');
+    engine.block.setString(
+      imageFill,
+      'fill/image/imageFileURI',
+      'https://img.ly/static/ubq_samples/sample_1.jpg'
+    );
+    engine.block.setFill(imageBlock, imageFill);
+
+    // Add a text block to the second page
+    const textBlock = engine.block.create('text');
+    engine.block.appendChild(secondPage, textBlock);
+
+    // Configure text properties after appending to the page
+    engine.block.replaceText(textBlock, 'Page 2');
+    engine.block.setTextFontSize(textBlock, 48);
+    engine.block.setTextColor(textBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 });
+    engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center');
+    engine.block.setWidthMode(textBlock, 'Auto');
+    engine.block.setHeightMode(textBlock, 'Auto');
+
+    // Center the text on the page
+    const textWidth = engine.block.getFrameWidth(textBlock);
+    const textHeight = engine.block.getFrameHeight(textBlock);
+    engine.block.setPositionX(textBlock, (800 - textWidth) / 2);
+    engine.block.setPositionY(textBlock, (600 - textHeight) / 2);
+
+    // Configure page properties on the first page
+    // Enable and set margins for print bleed
+    engine.block.setBool(firstPage, 'page/marginEnabled', true);
+    engine.block.setFloat(firstPage, 'page/margin/top', 10);
+    engine.block.setFloat(firstPage, 'page/margin/bottom', 10);
+    engine.block.setFloat(firstPage, 'page/margin/left', 10);
+    engine.block.setFloat(firstPage, 'page/margin/right', 10);
+
+    // Set a custom title template for the first page
+    engine.block.setString(firstPage, 'page/titleTemplate', 'Cover');
+
+    // Set a custom title template for the second page
+    engine.block.setString(secondPage, 'page/titleTemplate', 'Content');
+
+    // Set a background fill on the second page
+    const colorFill = engine.block.createFill('color');
+    engine.block.setColor(colorFill, 'fill/color/value', {
+      r: 0.95,
+      g: 0.95,
+      b: 1.0,
+      a: 1.0
+    });
+    engine.block.setFill(secondPage, colorFill);
+
+    // Demonstrate finding pages
+    const allPages = engine.scene.getPages();
+    console.log('All pages:', allPages);
+    console.log('Number of pages:', allPages.length);
+
+    // Get the current page (nearest to viewport center or containing selection)
+    const currentPage = engine.scene.getCurrentPage();
+    console.log('Current page:', currentPage);
+
+    // Alternative: Find pages using block API
+    const pagesByType = engine.block.findByType('page');
+    console.log('Pages found by type:', pagesByType);
+
+    // Select the first page and zoom to fit
+    engine.block.select(firstPage);
+    engine.scene.enableZoomAutoFit(firstPage, 'Both');
+
+    console.log('Pages guide initialized with a 2-page design.');
+  }
+}
+
+export default Example;
+```
+
+This guide covers:
+
+- Understanding the scene hierarchy: Scene → Pages → Blocks
+- Creating and managing multiple pages
+- Setting page dimensions at the scene level
+- Configuring page properties like margins and title templates
+- Navigating between pages programmatically
+
+## Pages in the Scene Hierarchy
+
+In CE.SDK, content follows a strict hierarchy: a **scene** contains **pages**, and pages contain **content blocks**. Only blocks attached to a page are rendered on the canvas.
+
+```typescript highlight=highlight-create-scene
+// Create a scene with VerticalStack layout for multi-page designs
+engine.scene.create('VerticalStack');
+
+// Get the stack container to configure spacing
+const [stack] = engine.block.findByType('stack');
+engine.block.setFloat(stack, 'stack/spacing', 20);
+engine.block.setBool(stack, 'stack/spacingInScreenspace', true);
+```
+
+When you create a scene with a layout mode like `VerticalStack`, pages are automatically arranged according to that mode. Create pages using `engine.block.create('page')`, set their dimensions with `setWidth()` and `setHeight()`, then attach them to the scene (or its stack container) with `engine.block.appendChild()`.
+
+```typescript highlight=highlight-create-pages
+// Create the first page and set its dimensions
+const firstPage = engine.block.create('page');
+engine.block.setWidth(firstPage, 800);
+engine.block.setHeight(firstPage, 600);
+engine.block.appendChild(stack, firstPage);
+
+// Create the second page with the same dimensions
+const secondPage = engine.block.create('page');
+engine.block.setWidth(secondPage, 800);
+engine.block.setHeight(secondPage, 600);
+engine.block.appendChild(stack, secondPage);
+```
+
+Content blocks must be added as children of a page to render. For graphic blocks, set both a shape and a fill for content to display. Append blocks to the page before configuring their properties.
+
+```typescript highlight=highlight-add-content
+// Add an image block to the first page
+const imageBlock = engine.block.create('graphic');
+engine.block.appendChild(firstPage, imageBlock);
+
+// Create a rect shape for the graphic block
+const rectShape = engine.block.createShape('rect');
+engine.block.setShape(imageBlock, rectShape);
+
+// Configure size and position after appending to the page
+engine.block.setWidth(imageBlock, 400);
+engine.block.setHeight(imageBlock, 300);
+engine.block.setPositionX(imageBlock, 200);
+engine.block.setPositionY(imageBlock, 150);
+
+// Create and configure the image fill
+const imageFill = engine.block.createFill('image');
+engine.block.setString(
+  imageFill,
+  'fill/image/imageFileURI',
+  'https://img.ly/static/ubq_samples/sample_1.jpg'
+);
+engine.block.setFill(imageBlock, imageFill);
+
+// Add a text block to the second page
+const textBlock = engine.block.create('text');
+engine.block.appendChild(secondPage, textBlock);
+
+// Configure text properties after appending to the page
+engine.block.replaceText(textBlock, 'Page 2');
+engine.block.setTextFontSize(textBlock, 48);
+engine.block.setTextColor(textBlock, { r: 0.2, g: 0.2, b: 0.2, a: 1.0 });
+engine.block.setEnum(textBlock, 'text/horizontalAlignment', 'Center');
+engine.block.setWidthMode(textBlock, 'Auto');
+engine.block.setHeightMode(textBlock, 'Auto');
+
+// Center the text on the page
+const textWidth = engine.block.getFrameWidth(textBlock);
+const textHeight = engine.block.getFrameHeight(textBlock);
+engine.block.setPositionX(textBlock, (800 - textWidth) / 2);
+engine.block.setPositionY(textBlock, (600 - textHeight) / 2);
+```
+
+## Page Dimensions and Consistency
+
+The CE.SDK engine supports pages with different dimensions. When using stacked layout modes (VerticalStack, HorizontalStack), the Editor UI expects all pages to share the same size. However, with the `Free` layout mode, you can set different dimensions for each page in the UI.
+
+```typescript highlight=highlight-set-dimensions
+// Get the scene to set page dimensions
+const scene = engine.scene.get();
+if (scene === null) {
+  throw new Error('No scene available');
+}
+
+// Set page dimensions at the scene level (all pages share these dimensions)
+engine.block.setFloat(scene, 'scene/pageDimensions/width', 800);
+engine.block.setFloat(scene, 'scene/pageDimensions/height', 600);
+```
+
+You can set default page dimensions at the scene level using `engine.block.setFloat()` with `scene/pageDimensions/width` and `scene/pageDimensions/height`. The `scene/aspectRatioLock` property controls whether changing one dimension automatically adjusts the other. Individual pages can also have their dimensions set directly with `setWidth()` and `setHeight()`.
+
+## Finding and Navigating Pages
+
+CE.SDK provides several methods to locate and navigate between pages in your scene.
+
+```typescript highlight=highlight-find-pages
+// Demonstrate finding pages
+const allPages = engine.scene.getPages();
+console.log('All pages:', allPages);
+console.log('Number of pages:', allPages.length);
+
+// Get the current page (nearest to viewport center or containing selection)
+const currentPage = engine.scene.getCurrentPage();
+console.log('Current page:', currentPage);
+
+// Alternative: Find pages using block API
+const pagesByType = engine.block.findByType('page');
+console.log('Pages found by type:', pagesByType);
+```
+
+Use these methods based on your needs:
+
+- `engine.scene.getPages()` returns all pages in sorted order
+- `engine.scene.getCurrentPage()` returns the page containing the current selection, or the page nearest to the viewport center
+- `engine.block.findByType('page')` finds all page blocks in the scene
+- `engine.scene.findNearestToViewPortCenterByType('page')` returns pages sorted by their distance from the viewport center
+
+## Page Properties
+
+Each page has its own properties that control its appearance and behavior. These are set on the page block itself, not on the scene.
+
+### Margins
+
+Page margins define bleed areas useful for print designs. Enable margins and configure each side individually:
+
+```typescript highlight=highlight-page-properties
+// Configure page properties on the first page
+// Enable and set margins for print bleed
+engine.block.setBool(firstPage, 'page/marginEnabled', true);
+engine.block.setFloat(firstPage, 'page/margin/top', 10);
+engine.block.setFloat(firstPage, 'page/margin/bottom', 10);
+engine.block.setFloat(firstPage, 'page/margin/left', 10);
+engine.block.setFloat(firstPage, 'page/margin/right', 10);
+
+// Set a custom title template for the first page
+engine.block.setString(firstPage, 'page/titleTemplate', 'Cover');
+
+// Set a custom title template for the second page
+engine.block.setString(secondPage, 'page/titleTemplate', 'Content');
+```
+
+Set `page/marginEnabled` to `true` to enable margins, then use `page/margin/top`, `page/margin/bottom`, `page/margin/left`, and `page/margin/right` to configure each side.
+
+### Title Template
+
+The `page/titleTemplate` property defines the display label shown for each page. It supports template variables like `{{ubq.page_index}}` for dynamic numbering.
+
+The default value is `"Page {{ubq.page_index}}"`. You can customize this to show labels like "Slide 1", "Cover", or any custom text.
+
+### Fill and Background
+
+Pages support fills for background colors or images using the standard fill system.
+
+```typescript highlight=highlight-page-background
+// Set a background fill on the second page
+const colorFill = engine.block.createFill('color');
+engine.block.setColor(colorFill, 'fill/color/value', {
+  r: 0.95,
+  g: 0.95,
+  b: 1.0,
+  a: 1.0
+});
+engine.block.setFill(secondPage, colorFill);
+```
+
+Create a fill using `engine.block.createFill('color')` or `engine.block.createFill('image')`, configure its properties, then apply it to the page with `engine.block.setFill(page, fill)`.
+
+## Page Layout Modes
+
+The scene's layout mode controls how multiple pages are arranged. Set this using `engine.block.setEnum()` on the scene with the `scene/layout` property:
+
+- **VerticalStack** (default): Pages stack vertically, one below the other
+- **HorizontalStack**: Pages arrange horizontally, side by side
+- **DepthStack**: Pages overlay each other, typically used for video editing
+- **Free**: Pages can be positioned freely without automatic arrangement
+
+## Pages for Static Designs vs. Video Editing
+
+Page behavior varies depending on how the scene is used.
+
+### Static Designs
+
+For static designs, pages act like artboards. Each page is a separate canvas ideal for multi-page documents, social media posts, or print layouts. Pages exist side by side and don't have time-based properties.
+
+### Video Editing
+
+For video editing, pages represent time-based compositions that transition sequentially during playback. Each page has playback properties:
+
+- `playback/duration` controls how long the page appears (in seconds)
+- `playback/time` tracks the current playback position
+
+## Troubleshooting
+
+### Content Not Visible
+
+If content blocks aren't appearing, check these common causes:
+
+- Verify the block is attached to a page with `engine.block.appendChild(page, block)`
+- For graphic blocks, ensure both a shape and fill are set
+- Append blocks to the page before setting their size and position
+
+### Dimension Inconsistencies
+
+If pages appear at unexpected sizes when using stacked layouts, ensure all pages have consistent dimensions. With `Free` layout mode, pages can have different sizes. Set dimensions on individual pages using `setWidth()` and `setHeight()`.
+
+### Page Not Found
+
+If `engine.scene.getPages()` returns an empty array, ensure a scene is loaded first. In headless mode, you must create both the scene and pages manually before querying 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