@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/import-media/capture-from-camera/record-video.md

@@ -0,0 +1,137 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Import Media Assets](./import-media.md) > [Capture From Camera](./import-media/capture-from-camera.md) > [Record Video](./import-media/capture-from-camera/record-video.md)
+
+---
+
+Display live camera feeds in CE.SDK scenes using `PixelStreamFill` and apply real-time effects to the video.
+
+This guide covers creating a scene with a pixel stream fill, controlling feed orientation, accessing the camera, and updating the fill with video frames.
+
+## Create a Scene with Camera Fill
+
+To display a camera feed, create a scene and set up a page with `PixelStreamFill`. The pixel stream fill accepts live pixel data that you provide frame by frame:
+
+```js
+engine.scene.create();
+const stack = engine.block.findByType('stack')[0];
+const page = engine.block.create('page');
+engine.block.appendChild(stack, page);
+
+const pixelStreamFill = engine.block.createFill('pixelStream');
+engine.block.setFill(page, pixelStreamFill);
+
+engine.block.appendEffect(page, engine.block.createEffect('half_tone'));
+```
+
+We create a scene, add a page to the stack, and assign a `PixelStreamFill` to receive camera data. The `PixelStreamFill` acts as a container that displays whatever pixel data you send to it. You can apply any CE.SDK effect to process the camera feed in real-time.
+
+## Control Feed Orientation
+
+The `fill/pixelStream/orientation` property controls how the camera feed is displayed. Use `UpMirrored` to horizontally flip the image, which is common for front-facing cameras to create a natural mirror-like selfie view:
+
+```js
+// Horizontal mirroring
+engine.block.setEnum(
+  pixelStreamFill,
+  'fill/pixelStream/orientation',
+  'UpMirrored'
+);
+```
+
+Available orientation values:
+
+| Value           | Effect                    |
+| --------------- | ------------------------- |
+| `Up`            | No rotation (default)     |
+| `Down`          | 180° rotation             |
+| `Left`          | 90° counter-clockwise     |
+| `Right`         | 90° clockwise             |
+| `UpMirrored`    | Horizontal flip           |
+| `DownMirrored`  | 180° + horizontal flip    |
+| `LeftMirrored`  | 90° CCW + horizontal flip |
+| `RightMirrored` | 90° CW + horizontal flip  |
+
+These orientations let you rotate or flip the feed without expensive CPU transformations.
+
+## Access Camera with Browser APIs
+
+Request camera access using the browser's `navigator.mediaDevices.getUserMedia()` API. Create an HTML video element to receive the MediaStream, then update the page dimensions to match the video:
+
+```js
+navigator.mediaDevices.getUserMedia({ video: true }).then(
+  (stream) => {
+    const video = document.createElement('video');
+    video.autoplay = true;
+    video.srcObject = stream;
+    video.addEventListener('loadedmetadata', () => {
+      engine.block.setWidth(page, video.videoWidth);
+      engine.block.setHeight(page, video.videoHeight);
+      engine.scene.zoomToBlock(page, 40, 40, 40, 40);
+      // Continue with frame updates...
+    });
+  },
+  (err) => {
+    console.error(err);
+  }
+);
+```
+
+The `facingMode` option in `getUserMedia()` lets you request the front-facing camera (`'user'`) or rear camera (`'environment'`) on mobile devices.
+
+## Update Fill with Video Frames
+
+Use `requestVideoFrameCallback()` to efficiently sync frame updates with the video's frame rate. Call `engine.block.setNativePixelBuffer()` in each callback to send the current video frame to CE.SDK:
+
+```js
+const onVideoFrame = () => {
+  engine.block.setNativePixelBuffer(pixelStreamFill, video);
+  video.requestVideoFrameCallback(onVideoFrame);
+};
+video.requestVideoFrameCallback(onVideoFrame);
+```
+
+The `setNativePixelBuffer()` method accepts either an `HTMLVideoElement` or `HTMLCanvasElement`, providing flexibility for different video processing workflows. Using `requestVideoFrameCallback` instead of `requestAnimationFrame` ensures frame updates are synchronized with the video's actual frame rate.
+
+## Troubleshooting
+
+### Camera Not Appearing
+
+Verify camera permissions are granted in the browser. Check that the video element has `autoplay` set to `true`. Ensure the `loadedmetadata` event fires before accessing video dimensions.
+
+### Mirrored or Rotated Incorrectly
+
+Check the `fill/pixelStream/orientation` enum value. Front-facing cameras typically need `UpMirrored`. Mobile devices may require rotation adjustments based on device orientation.
+
+### Effects Not Rendering
+
+Confirm effects are appended using `engine.block.appendEffect()`. Verify the effect block was created successfully with `engine.block.createEffect()`.
+
+### Performance Issues
+
+Ensure `requestVideoFrameCallback` is used instead of `requestAnimationFrame` for better frame synchronization. Check that only one callback loop is running. Consider reducing effect complexity for smoother preview.
+
+## API Reference
+
+| Method                                   | Description                                            |
+| ---------------------------------------- | ------------------------------------------------------ |
+| `engine.scene.create()`                  | Create a scene for camera preview                      |
+| `engine.block.create('page')`            | Create a page block to hold the camera fill            |
+| `engine.block.createFill('pixelStream')` | Create a fill that accepts live pixel data             |
+| `engine.block.setFill()`                 | Assign the pixel stream fill to a block                |
+| `engine.block.setNativePixelBuffer()`    | Send video frame data to the fill                      |
+| `engine.block.setEnum()`                 | Set the orientation property for mirroring or rotation |
+| `engine.block.createEffect()`            | Create an effect for real-time processing              |
+| `engine.block.appendEffect()`            | Apply an effect to the page                            |
+| `engine.block.setWidth()`                | Set block width to match video dimensions              |
+| `engine.block.setHeight()`               | Set block height to match video dimensions             |
+| `engine.scene.zoomToBlock()`             | Fit the camera view in the viewport                    |
+
+---
+
+## 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/import-media/capture-from-camera.md

@@ -0,0 +1,20 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Import Media Assets](./import-media.md) > [Capture From Camera](./import-media/capture-from-camera.md)
+
+---
+
+---
+
+## Related Pages
+
+- [Record Video](./import-media/capture-from-camera/record-video.md) - Display live camera feeds inside CE.SDK using PixelStreamFill for real-time preview with effects.
+
+---
+
+## 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/import-media/concepts.md

@@ -0,0 +1,173 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Import Media Assets](./import-media.md) > [Concepts](./import-media/concepts.md)
+
+---
+
+Understand the foundational architecture of CE.SDK's asset system and how asset sources organize content across platforms.
+
+Asset sources are CE.SDK's content delivery architecture. Instead of hardcoding asset knowledge into the editor, CE.SDK uses a modular system where any content can be provided through a standardized interface. This decouples what assets are available from how they're discovered and applied.
+
+```
+ PLATFORM-SPECIFIC UI (Web)
+┌─────────────────────────────────────────────────────────────────────────┐
+│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐                  │
+│  │ Dock Button │───▶│ Asset Panel │───▶│ Assets Grid │                  │
+│  └─────────────┘    └─────────────┘    └─────────────┘                  │
+│                                                                         │
+│  Configured via: Asset Library Entries, Dock config, Panel navigation   │
+└─────────────────────────────────────────────────────────────────────────┘
+                                   │
+                                   ▼
+ CROSS-PLATFORM ENGINE (engine.asset API)
+┌─────────────────────────────────────────────────────────────────────────┐
+│                                                                         │
+│   findAssets()    addSource()    addLocalSource()    apply()            │
+│                                                                         │
+│  ┌──────────────┐   ┌──────────────┐   ┌──────────────┐                 │
+│  │    Custom    │   │    Local     │   │  JSON-Based  │                 │
+│  │   Sources    │   │   Sources    │   │   Sources    │                 │
+│  ├──────────────┤   ├──────────────┤   ├──────────────┤                 │
+│  │ Your API     │   │ User Uploads │   │ Built-in     │                 │
+│  │ Database     │   │ Collections  │   │ Asset Packs  │                 │
+│  └──────────────┘   └──────────────┘   └──────────────┘                 │
+│                                                                         │
+│  Identical across Web, iOS, Android                                     │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+This guide covers the foundational concepts of asset sources. For implementation details, see the linked guides at the end.
+
+## Asset Source Fundamentals
+
+An asset source provides content to the editor through a common interface. Every source has a unique identifier (e.g., `ly.img.image`, `ly.img.sticker`) and implements methods for discovering and applying assets.
+
+Sources support:
+
+- **Query-based discovery** with pagination and filtering
+- **Optional grouping** (e.g., sticker groups: "emoji", "doodle", "hand")
+- **Metadata** including credits, licenses, and format information
+
+Sources are content-agnostic—images, fonts, templates, and custom content all use the same pattern.
+
+## Content Organized as Asset Sources
+
+Asset sources handle virtually all reusable creative content:
+
+| Category   | Examples                                 |
+| ---------- | ---------------------------------------- |
+| Media      | Images, videos, audio clips              |
+| Graphics   | Stickers, shapes, vectors, icons         |
+| Typography | Fonts, typefaces, text presets           |
+| Colors     | Color palettes, spot colors              |
+| Effects    | Blur types, filters, LUT effects         |
+| Templates  | Design templates, page presets           |
+| Custom     | User uploads, remote APIs, your own data |
+
+Built-in sources include `ly.img.image`, `ly.img.sticker`, `ly.img.template`, `ly.img.typeface`, `ly.img.filter`, `ly.img.blur`, `ly.img.effect`, and more.
+
+## Types of Asset Sources
+
+There are three ways to provide assets to CE.SDK:
+
+### Custom Sources
+
+Implement the source interface to connect any backend—database, API, or custom system. Custom sources provide full control over discovery and application logic. Use custom sources when you need to:
+
+- Connect to your existing content management system
+- Implement custom search or filtering logic
+- Control how assets are applied to the scene
+
+### Local Sources
+
+Managed by the engine with dynamic add/remove operations. Local sources are suitable for user uploads or custom collections that change during the editing session. The engine handles storage and retrieval.
+
+### JSON-Based Sources
+
+Pre-defined asset collections loaded from JSON files. All built-in asset packs use this approach. JSON sources are ideal for static content that doesn't change frequently.
+
+## Asset Sources and the User Interface
+
+Asset sources are backend providers—they don't know about UI. The connection between sources and what users see happens through platform-specific UI configuration.
+
+On Web, asset sources connect to the UI through:
+
+- **Asset Library Entries** — Group one or more sources for display, configure grid layout and preview
+- **Dock Buttons** — Sidebar icons that open asset panels
+- **Panel Navigation** — Entry → Source → Groups → Assets grid
+
+This separation means you can:
+
+- Show multiple sources in one UI panel
+- Show the same source in different UI locations
+- Change UI presentation without changing the source
+
+## Cross-Platform Architecture
+
+Asset sources use the `engine.asset` API consistently across all platforms (Web, iOS, Android).
+
+All platforms support:
+
+- Custom source registration
+- JSON-based asset loading
+- Local asset management
+- Group-based organization
+- Event subscriptions (source added, removed, updated)
+
+Code patterns transfer directly between platforms with only syntax changes.
+
+## Asset Structure
+
+Each asset contains:
+
+- **ID** — Unique identifier within the source
+- **Meta** — URI, thumbnail, MIME type, dimensions, block type hints
+- **Label** — Localized display name
+- **Tags** — Searchable keywords (localized)
+- **Groups** — Category membership
+- **Context** — Source reference for tracking origin
+
+The engine uses metadata hints (`blockType`, `fillType`, `shapeType`) to determine what block type to create when applying an asset.
+
+## Discovery and Application
+
+Assets are discovered through queries supporting pagination, text search, tag/group filtering, and sorting. When applied, assets either create new blocks or modify existing ones. Sources can customize application behavior or use the engine's default implementation.
+
+## Source Lifecycle Events
+
+The engine emits events when sources change: added, removed, or contents updated. Subscribe to these events to keep UI synchronized with available content.
+
+## Troubleshooting
+
+Common conceptual misunderstandings:
+
+- **Confusing sources with UI** — Asset sources are backend providers; they don't render UI. The UI (dock buttons, panels, grids) is configured separately and connects to sources.
+- **Expecting sources to filter themselves** — Sources return all matching assets; UI configuration determines what's displayed to users.
+- **Mixing source types** — Custom sources (your code), local sources (engine-managed), and JSON sources (static files) serve different purposes. Choose based on whether you need dynamic backend connections, runtime asset management, or static asset packs.
+
+## API Reference
+
+| Method                                | Category          | Purpose                                                           |
+| ------------------------------------- | ----------------- | ----------------------------------------------------------------- |
+| `engine.asset.addSource()`            | Source Management | Register a custom asset source with discovery and apply callbacks |
+| `engine.asset.addLocalSource()`       | Source Management | Create an engine-managed source for dynamic asset add/remove      |
+| `engine.asset.findAssets()`           | Discovery         | Query assets with pagination, search, filtering, and sorting      |
+| `engine.asset.apply()`                | Application       | Apply an asset to the active scene, creating a configured block   |
+| `engine.asset.onAssetSourceAdded()`   | Events            | Subscribe to source registration events                           |
+| `engine.asset.onAssetSourceRemoved()` | Events            | Subscribe to source removal events                                |
+| `engine.asset.onAssetSourceUpdated()` | Events            | Subscribe to source content change events                         |
+
+## Next Steps
+
+- [Your Server](./import-media/from-remote-source/your-server.md) — Connect your own backend as an asset source
+- [Asset Library Basics](./import-media/asset-panel/basics.md) — Configure the asset library UI on web
+- [Customize Asset Library](./import-media/asset-panel/customize.md) — Customize asset library appearance
+
+---
+
+## 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