npm - @imgly/codesign-mcp - Versions diffs - 0.1.5 → 0.1.6 - Mend

@imgly/codesign-mcp 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (973) hide show

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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