@imgly/codesign-mcp 0.1.5 → 0.1.7

package/assets/docs/guide/user-interface/customization/reference/component-reference.md

@@ -1,333 +0,0 @@
-> 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) > [User Interface](./user-interface.md) > [Customization](./user-interface/customization.md) > [Component Reference](./user-interface/customization/reference/component-reference.md)
-
----
-
-This guide provides the complete list of all built-in component IDs for each of the five customizable UI areas in CE.SDK. Use this reference when you need to find the exact ID for a component to show, hide, reorder, or modify using the Component Order API.
-
-Component IDs in CE.SDK follow the pattern `ly.img.[feature].[area]` (for example, `ly.img.undoRedo.navigationBar`). Custom components you create can use any ID pattern.
-
-For information on how to use these IDs with the API methods, see the [Component Order API Reference](./user-interface/customization/reference/component-order-api.md). For task-focused tutorials, see the [Quick Start guides](./user-interface/customization/quick-start.md).
-
-## Layout Components
-
-These utility components are available across multiple UI areas:
-
-| ID                 | Description                                              | Available In |
-| ------------------ | -------------------------------------------------------- | ------------ |
-| `ly.img.separator` | Visual divider line                                      | All areas    |
-| `ly.img.spacer`    | Flexible empty space that expands to fill available room | All areas    |
-
-## Navigation Bar Components
-
-Components available in `'ly.img.navigation.bar'`:
-
-### Navigation Controls
-
-| ID                                | Description                           |
-| --------------------------------- | ------------------------------------- |
-| `ly.img.back.navigationBar`       | Back button (uses `onBack` handler)   |
-| `ly.img.close.navigationBar`      | Close button (uses `onClose` handler) |
-| `ly.img.undoRedo.navigationBar`   | Undo and redo buttons                 |
-| `ly.img.zoom.navigationBar`       | Zoom controls                         |
-| `ly.img.preview.navigationBar`    | Preview mode toggle                   |
-| `ly.img.pageResize.navigationBar` | Page size controls                    |
-| `ly.img.title.navigationBar`      | Editable document title               |
-
-### Action Buttons
-
-| ID                                   | Description                                                              |
-| ------------------------------------ | ------------------------------------------------------------------------ |
-| `ly.img.action.navigationBar`        | Generic action button (requires `key` property to distinguish instances) |
-| `ly.img.actions.navigationBar`       | Dropdown menu containing multiple actions                                |
-| `ly.img.saveScene.navigationBar`     | Save scene action                                                        |
-| `ly.img.exportImage.navigationBar`   | Export as image action                                                   |
-| `ly.img.exportPDF.navigationBar`     | Export as PDF action                                                     |
-| `ly.img.exportVideo.navigationBar`   | Export as video action                                                   |
-| `ly.img.shareScene.navigationBar`    | Share scene action                                                       |
-| `ly.img.exportScene.navigationBar`   | Export scene file action                                                 |
-| `ly.img.exportArchive.navigationBar` | Export as archive action                                                 |
-| `ly.img.importScene.navigationBar`   | Import scene file action                                                 |
-| `ly.img.importArchive.navigationBar` | Import from archive action                                               |
-
-Action buttons support inline configuration with `onClick` handlers:
-
-```javascript
-cesdk.ui.insertOrderComponent(
-  { in: 'ly.img.navigation.bar', position: 'end' },
-  {
-    id: 'ly.img.action.navigationBar',
-    key: 'my-export',
-    label: 'Export',
-    icon: '@imgly/Download',
-    onClick: async () => {
-      // Export logic here
-    }
-  }
-);
-```
-
-## Dock Components
-
-Components available in `'ly.img.dock'`:
-
-| ID                         | Description                                    |
-| -------------------------- | ---------------------------------------------- |
-| `ly.img.assetLibrary.dock` | Asset library button with configurable entries |
-
-The dock is primarily configured through the `ly.img.assetLibrary.dock` component. Use the `entries` array to specify which asset library panels appear:
-
-```javascript
-cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, [
-  'ly.img.spacer',
-  {
-    id: 'ly.img.assetLibrary.dock',
-    entries: ['ly.img.image', 'ly.img.text', 'ly.img.shape']
-  }
-]);
-```
-
-## Inspector Bar Components
-
-Components available in `'ly.img.inspector.bar'`. The inspector bar supports edit mode context via the `when` option.
-
-### Block Operations
-
-| ID                                  | Description                                      |
-| ----------------------------------- | ------------------------------------------------ |
-| `ly.img.group.create.inspectorBar`  | Create group from selection                      |
-| `ly.img.group.ungroup.inspectorBar` | Ungroup selected group                           |
-| `ly.img.combine.inspectorBar`       | Boolean shape operations (union, subtract, etc.) |
-| `ly.img.position.inspectorBar`      | Position and alignment controls                  |
-
-### Appearance & Effects
-
-| ID                                   | Description                                    |
-| ------------------------------------ | ---------------------------------------------- |
-| `ly.img.fill.inspectorBar`           | Fill color and type controls                   |
-| `ly.img.stroke.inspectorBar`         | Stroke and border controls                     |
-| `ly.img.shadow.inspectorBar`         | Drop shadow controls                           |
-| `ly.img.opacityOptions.inspectorBar` | Opacity and blend mode                         |
-| `ly.img.adjustment.inspectorBar`     | Color adjustments (brightness, contrast, etc.) |
-| `ly.img.filter.inspectorBar`         | Photo filters                                  |
-| `ly.img.effect.inspectorBar`         | Visual effects                                 |
-| `ly.img.blur.inspectorBar`           | Blur effects                                   |
-| `ly.img.animations.inspectorBar`     | Animation controls                             |
-
-### Text Controls
-
-| ID                                         | Description                                               |
-| ------------------------------------------ | --------------------------------------------------------- |
-| `ly.img.text.typeFace.inspectorBar`        | Font family selector                                      |
-| `ly.img.text.fontSize.inspectorBar`        | Font size control                                         |
-| `ly.img.text.bold.inspectorBar`            | Bold toggle                                               |
-| `ly.img.text.italic.inspectorBar`          | Italic toggle                                             |
-| `ly.img.text.underline.inspectorBar`       | Underline toggle                                          |
-| `ly.img.text.strikethrough.inspectorBar`   | Strikethrough toggle                                      |
-| `ly.img.text.alignHorizontal.inspectorBar` | Text alignment (left, center, right, justify)             |
-| `ly.img.text.style.inspectorBar`           | Text style presets                                        |
-| `ly.img.text.advanced.inspectorBar`        | Advanced text options (line height, letter spacing, etc.) |
-| `ly.img.text.background.inspectorBar`      | Text background highlight                                 |
-
-### Media Controls
-
-| ID                                          | Description                                                         |
-| ------------------------------------------- | ------------------------------------------------------------------- |
-| `ly.img.trim.inspectorBar`                  | Video trim button                                                   |
-| `ly.img.trimControls.inspectorBar`          | Video trim controls (shown in Trim edit mode)                       |
-| `ly.img.crop.inspectorBar`                  | Image crop button                                                   |
-| `ly.img.cropControls.inspectorBar`          | Image crop controls (shown in Crop edit mode)                       |
-| `ly.img.vectorEdit.moveMode.inspectorBar`   | Vector edit move mode toggle (shown in Vector edit mode)            |
-| `ly.img.vectorEdit.addMode.inspectorBar`    | Vector edit add node mode toggle (shown in Vector edit mode)        |
-| `ly.img.vectorEdit.deleteMode.inspectorBar` | Vector edit delete node mode toggle (shown in Vector edit mode)     |
-| `ly.img.vectorEdit.bendMode.inspectorBar`   | Vector edit bend mode toggle (shown in Vector edit mode)            |
-| `ly.img.vectorEdit.mirrorMode.inspectorBar` | Vector edit handle mirror mode dropdown (shown in Vector edit mode) |
-| `ly.img.vectorEdit.done.inspectorBar`       | Exit vector edit mode button (shown in Vector edit mode)            |
-| `ly.img.volume.inspectorBar`                | Audio volume control                                                |
-| `ly.img.playbackSpeed.inspectorBar`         | Video playback speed                                                |
-| `ly.img.audio.replace.inspectorBar`         | Replace audio source                                                |
-| `ly.img.video.caption.inspectorBar`         | Video caption controls                                              |
-
-### Shape & Cutout Controls
-
-| ID                                     | Description            |
-| -------------------------------------- | ---------------------- |
-| `ly.img.shape.options.inspectorBar`    | Shape-specific options |
-| `ly.img.cutout.type.inspectorBar`      | Cutout type selector   |
-| `ly.img.cutout.offset.inspectorBar`    | Cutout offset control  |
-| `ly.img.cutout.smoothing.inspectorBar` | Cutout edge smoothing  |
-
-### View Controls
-
-| ID                                    | Description                              |
-| ------------------------------------- | ---------------------------------------- |
-| `ly.img.inspectorToggle.inspectorBar` | Toggle between default and advanced view |
-
-## Canvas Menu Components
-
-Components available in `'ly.img.canvas.menu'`. The canvas menu appears on right-click (desktop) or long-press (mobile) and supports edit mode context.
-
-### Block Actions
-
-| ID                              | Description              |
-| ------------------------------- | ------------------------ |
-| `ly.img.delete.canvasMenu`      | Delete selected block    |
-| `ly.img.duplicate.canvasMenu`   | Duplicate selected block |
-| `ly.img.replace.canvasMenu`     | Replace block content    |
-| `ly.img.placeholder.canvasMenu` | Placeholder settings     |
-
-### Edit Actions
-
-| ID                        | Description          |
-| ------------------------- | -------------------- |
-| `ly.img.copy.canvasMenu`  | Copy to clipboard    |
-| `ly.img.paste.canvasMenu` | Paste from clipboard |
-| `ly.img.flipX.canvasMenu` | Flip horizontally    |
-| `ly.img.flipY.canvasMenu` | Flip vertically      |
-
-### Layer Ordering
-
-| ID                               | Description             |
-| -------------------------------- | ----------------------- |
-| `ly.img.bringForward.canvasMenu` | Bring forward one layer |
-| `ly.img.sendBackward.canvasMenu` | Send backward one layer |
-
-### Page Actions
-
-| ID                                | Description                 |
-| --------------------------------- | --------------------------- |
-| `ly.img.page.moveUp.canvasMenu`   | Move page up in page list   |
-| `ly.img.page.moveDown.canvasMenu` | Move page down in page list |
-
-### Group Actions
-
-| ID                               | Description                  |
-| -------------------------------- | ---------------------------- |
-| `ly.img.group.select.canvasMenu` | Select entire group          |
-| `ly.img.group.enter.canvasMenu`  | Enter group to edit children |
-
-### Text Actions
-
-| ID                                      | Description                              |
-| --------------------------------------- | ---------------------------------------- |
-| `ly.img.text.edit.canvasMenu`           | Enter text edit mode                     |
-| `ly.img.text.color.canvasMenu`          | Quick text color change                  |
-| `ly.img.text.bold.canvasMenu`           | Toggle bold (in Text edit mode)          |
-| `ly.img.text.italic.canvasMenu`         | Toggle italic (in Text edit mode)        |
-| `ly.img.text.list.unordered.canvasMenu` | Toggle bulleted list (in Text edit mode) |
-| `ly.img.text.list.ordered.canvasMenu`   | Toggle numbered list (in Text edit mode) |
-| `ly.img.text.variables.canvasMenu`      | Insert variable (in Text edit mode)      |
-
-### Other
-
-| ID                          | Description                              |
-| --------------------------- | ---------------------------------------- |
-| `ly.img.action.canvasMenu`  | Generic action (requires `key` property) |
-| `ly.img.options.canvasMenu` | Options submenu                          |
-
-## Canvas Bar Components
-
-Components available in `'ly.img.canvas.bar'`. This area requires the `at` option to specify position (`'top'` or `'bottom'`).
-
-| ID                          | Description                 |
-| --------------------------- | --------------------------- |
-| `ly.img.settings.canvasBar` | Settings/preferences button |
-| `ly.img.page.add.canvasBar` | Add new page button         |
-
-The canvas bar is the most minimal area, typically showing contextual controls based on the current edit mode.
-
-```javascript
-// Get top canvas bar order
-const topBar = cesdk.ui.getComponentOrder({
-  in: 'ly.img.canvas.bar',
-  at: 'top'
-});
-
-// Get bottom canvas bar order
-const bottomBar = cesdk.ui.getComponentOrder({
-  in: 'ly.img.canvas.bar',
-  at: 'bottom'
-});
-```
-
-## Component Configuration Options
-
-When components are passed as objects instead of string IDs, they support inline configuration.
-
-### Common Properties
-
-All components support these properties:
-
-| Property   | Type      | Description                                           |
-| ---------- | --------- | ----------------------------------------------------- |
-| `id`       | `string`  | Component identifier (required)                       |
-| `key`      | `string`  | Unique key when same component appears multiple times |
-| `disabled` | `boolean` | Disable the component                                 |
-| `hidden`   | `boolean` | Hide the component                                    |
-
-### Action Button Properties
-
-Components with ID `ly.img.action.*` support additional properties:
-
-| Property  | Type        | Description                                 |
-| --------- | ----------- | ------------------------------------------- | ------------------- |
-| `label`   | `string`    | Button label text                           |
-| `icon`    | `string`    | Icon identifier (e.g., `'@imgly/Download'`) |
-| `onClick` | `function`  | Click handler function                      |
-| `variant` | `'regular'` | `'accent'`                                  | Button visual style |
-
-### Asset Library Dock Properties
-
-The `ly.img.assetLibrary.dock` component supports:
-
-| Property  | Type       | Description                      |
-| --------- | ---------- | -------------------------------- |
-| `entries` | `string[]` | Array of asset library entry IDs |
-| `label`   | `string`   | Custom label for the button      |
-
-## Troubleshooting
-
-### Component not appearing
-
-1. Verify the component ID is spelled correctly with the right area suffix
-2. Check if the component is included in the current area's order using `getComponentOrder()`
-3. Confirm the component isn't hidden by a `hidden: true` property
-
-### Multiple components with same ID
-
-Use the `key` property to distinguish between instances:
-
-```javascript
-cesdk.ui.setComponentOrder({ in: 'ly.img.navigation.bar' }, [
-  { id: 'ly.img.action.navigationBar', key: 'save', label: 'Save' },
-  { id: 'ly.img.action.navigationBar', key: 'export', label: 'Export' }
-]);
-```
-
-### Component disabled unexpectedly
-
-Check if a feature flag is disabling it:
-
-```javascript
-// Check if feature is enabled
-const enabled = cesdk.feature.isEnabled('ly.img.navigation.bar');
-
-// Re-enable if needed
-cesdk.feature.enable('ly.img.navigation.bar');
-```
-
-## Next Steps
-
-- [Component Order API](./user-interface/customization/reference/component-order-api.md) — How to manipulate components using these IDs
-- [Show/Hide Components](./user-interface/customization/quick-start/show-hide-components.md) — Hide specific components from UI areas
-- [Register New Component](./user-interface/ui-extensions/register-new-component.md) — Create custom components with the builder API
-
----
-
-## 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/user-interface/customization/reference.md

@@ -1,12 +0,0 @@
-> 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).
-
----
-
----
-
-## 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/user-interface/customization.md

@@ -1,39 +0,0 @@
-> 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) > [User Interface](./user-interface.md) > [Customization](./user-interface/customization.md)
-
----
-
----
-
-## Related Pages
-
-- [Show/Hide Components](./user-interface/customization/quick-start/show-hide-components.md) - Learn how to hide UI components using the Feature API and Component Order API in CE.SDK.
-- [Reorder Components](./user-interface/customization/quick-start/reorder-components.md) - Learn how to rearrange UI components using getComponentOrder and setComponentOrder in CE.SDK.
-- [Add Action Buttons](./user-interface/customization/quick-start/add-action-buttons.md) - Learn how to add save, export, and custom action buttons to CE.SDK UI areas using built-in action components.
-- [Add Dock Buttons](./user-interface/customization/quick-start/add-dock-buttons.md) - Learn how to add asset library buttons to the CE.SDK dock using the built-in dock button component with custom entries, labels, icons, and click handlers.
-- [Create Custom Components](./user-interface/customization/quick-start/create-custom-components.md) - Learn how to register and place custom UI components in CE.SDK using registerComponent and insertOrderComponent.
-- [Page Format](./user-interface/customization/page-format.md) - Define default page size, orientation, and other format settings for your design canvas.
-- [Crop Presets](./user-interface/customization/crop-presets.md) - Define crop presets settings for your design.
-- [Force Crop](./user-interface/customization/force-crop.md) - Define crop presets settings for your design.
-- [Color Palette](./user-interface/customization/color-palette.md) - Customize the color palette available to users for consistent branding and styling.
-- [Disable or Enable Features](./user-interface/customization/disable-or-enable.md) - Control which editor features are available to users by enabling, disabling, or conditionally toggling them using the Feature API.
-- [Navigation Bar](./user-interface/customization/navigation-bar.md) - Show, hide, or customize the editor’s top navigation bar to match your app layout.
-- [Dock](./user-interface/customization/dock.md) - Configure the dock area to show or hide tools, panels, or quick access actions.
-- [Panel Customization](./user-interface/customization/panel.md) - Control CE.SDK's UI panels programmatically to create custom editor layouts and workflows.
-- [Inspector Bar](./user-interface/customization/inspector-bar.md) - Customize the inspector bar for editing properties like position, color, and size.
-- [Canvas Menu](./user-interface/customization/canvas-menu.md) - Control visibility and options in the canvas context menu.
-- [Customize the Clip Context Menu](./js.md) - Control which actions appear in the video timeline clip context menu, reorder built-in actions, and add custom entries per clip type.
-- [Canvas Bar](./user-interface/customization/canvas.md) - Edit or hide the floating bar above the canvas to streamline user interactions.
-- [Loading Indicator](./js.md) - Customize the loading screen that appears while the CE.SDK editor initializes by adding headings, body text, or removing the spinner.
-- [Component Order API](./user-interface/customization/reference/component-order-api.md) - Complete reference for the unified Component Order API that controls layout and composition of all CE.SDK UI areas.
-- [Component Reference](./user-interface/customization/reference/component-reference.md) - Complete list of all built-in component IDs for each CE.SDK UI area including navigation bar, dock, inspector bar, canvas menu, and canvas bar.
-
----
-
-## 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