@cesdk/cesdk-js 1.64.0-nightly.20251027 → 1.64.0-nightly.20251028

package/index.d.ts

@@ -957,6 +957,8 @@ export declare interface BuiltinTranslations {
     'common.colorValue': string;
     'common.confirm': string;
     'common.controlKey': string;
+    'common.shiftKey': string;
+    'common.altKey': string;
     'common.custom': string;
     'common.defaultDuration': string;
     'common.defaultDuration.inUnit': string;
@@ -1166,6 +1168,8 @@ export declare interface BuiltinTranslations {
     'component.placeholder.appearance.description': string;
     'component.placeholder.arrange': string;
     'component.placeholder.arrange.description': string;
+    'component.placeholder.audio': string;
+    'component.placeholder.audio.description': string;
     'component.placeholder.create': string;
     'component.placeholder.disableAll': string;
     'component.placeholder.enableAll': string;
@@ -2016,6 +2020,8 @@ export declare interface BuiltinTranslations {
     'scope.appearance.filter.tooltip': string;
     'scope.appearance.shadow': string;
     'scope.appearance.shadow.tooltip': string;
+    'scope.audio.change': string;
+    'scope.audio.change.tooltip': string;
     'scope.editor.select': string;
     'scope.fill.change': string;
     'scope.fill.change.tooltip': string;
@@ -2023,8 +2029,6 @@ export declare interface BuiltinTranslations {
     'scope.fill.change.text.tooltip': string;
     'scope.fill.change.graphic': string;
     'scope.fill.change.graphic.tooltip': string;
-    'scope.fill.change.audio': string;
-    'scope.fill.change.audio.tooltip': string;
     'scope.fill.changeType': string;
     'scope.fill.changeType.tooltip': string;
     'scope.layer.blendMode': string;
@@ -2105,7 +2109,7 @@ export declare interface ButtonGroupOptions {
  * behavior and appearance of a button. These options include settings for the
  * input label, input label position, label, label alignment, tooltip, click
  * handler, variant, color, size, icon, trailing icon, active state, selected state,
- * disabled state, loading state, loading progress, and suffix.
+ * disabled state, loading state, loading progress, suffix, and keyboard shortcut.
  *
  * @public
  */
@@ -2127,6 +2131,12 @@ export declare interface ButtonOptions {
     isLoading?: boolean;
     loadingProgress?: number;
     suffix?: Suffix;
+    /**
+     * Keyboard shortcut to display (e.g., 'Meta+C', 'Meta+V', 'Alt+D').
+     * Automatically renders OS-appropriate modifiers (⌘ on macOS, Ctrl on Windows/Linux).
+     * Hidden on small viewports.
+     */
+    shortcut?: string;
 }
 
 /**
@@ -2196,14 +2206,75 @@ export { Canvas }
 export declare type CanvasBarComponentId = 'ly.img.separator' | 'ly.img.spacer' | 'ly.img.settings.canvasBar' | 'ly.img.page.add.canvasBar' | (string & {});
 
 /**
- * Represents the ID of a canvas menu component.
+ * @public
+ * Base interface for action buttons in the canvas menu.
+ * Contains common properties shared across all canvas menu button types.
  *
- * The CanvasMenuComponentId type defines the possible IDs for components that can be used in the canvas menu.
- * It includes predefined IDs for separators, spacers, and various menu items, as well as a catch-all type for custom IDs.
+ * - `onClick`: Handler invoked when the button is clicked.
+ * - `label`: Optional label for the button.
+ * - `icon`: Optional icon name to display on the button.
+ * - `variant`: Optional style variant of the button, either 'regular' or 'plain'.
+ * - `isDisabled`: Optional disabled property.
+ * - `shortcut`: Optional keyboard shortcut displayed alongside the action.
+ */
+export declare interface CanvasMenuActionButton extends OrderComponent {
+    id: 'ly.img.flipX.canvasMenu' | 'ly.img.flipY.canvasMenu' | 'ly.img.copy.canvasMenu' | 'ly.img.paste.canvasMenu';
+    onClick?: () => void | Promise<void>;
+    label?: string;
+    icon?: string;
+    variant?: 'regular' | 'plain';
+    isDisabled?: boolean;
+    shortcut?: string;
+}
+
+/**
+ * A list of the component IDs that can be used in the canvas menu.
+ * @public
+ */
+export declare type CanvasMenuComponentId = 'ly.img.separator' | 'ly.img.spacer' | 'ly.img.group.enter.canvasMenu' | 'ly.img.group.select.canvasMenu' | 'ly.img.page.moveUp.canvasMenu' | 'ly.img.page.moveDown.canvasMenu' | 'ly.img.text.edit.canvasMenu' | 'ly.img.replace.canvasMenu' | 'ly.img.placeholder.canvasMenu' | 'ly.img.bringForward.canvasMenu' | 'ly.img.sendBackward.canvasMenu' | 'ly.img.duplicate.canvasMenu' | 'ly.img.delete.canvasMenu' | 'ly.img.options.canvasMenu' | 'ly.img.flipX.canvasMenu' | 'ly.img.flipY.canvasMenu' | 'ly.img.copy.canvasMenu' | 'ly.img.paste.canvasMenu' | 'ly.img.text.color.canvasMenu' | 'ly.img.text.bold.canvasMenu' | 'ly.img.text.italic.canvasMenu' | 'ly.img.text.variables.canvasMenu' | (string & {});
+
+/**
+ * @public
+ */
+export declare type CanvasMenuComponents = CanvasMenuActionButton | CanvasMenuOptionsComponent | CanvasMenuCustomActionButton;
+
+/**
+ * @public
+ * Interface representing a custom canvas menu action button.
+ * Note: This component requires a key and has a required label, unlike other action buttons.
+ */
+export declare interface CanvasMenuCustomActionButton extends OrderComponent {
+    id: 'ly.img.action.canvasMenu';
+    key: string;
+    onClick: () => void | Promise<void>;
+    label: string;
+    icon?: string;
+    variant?: 'regular' | 'plain';
+    isDisabled?: boolean;
+    shortcut?: string;
+}
+
+/**
+ * @public
+ * Interface representing the canvas menu options dropdown component.
+ * This component can contain children components that are rendered in a dropdown menu.
  *
+ * - `children`: Optional array of child component IDs or components to render in the dropdown.
+ * - `icon`: Optional icon name to display on the dropdown button.
+ * - `variant`: Optional style variant of the dropdown button, either 'regular' or 'plain'.
+ * - `tooltip`: Optional tooltip text to display when hovering over the dropdown button.
+ */
+export declare interface CanvasMenuOptionsComponent extends OrderComponentWithChildren<CanvasMenuComponentId, CanvasMenuActionButton> {
+    id: 'ly.img.options.canvasMenu';
+    icon?: string;
+    variant?: 'regular' | 'plain';
+    tooltip?: string;
+}
+
+/**
  * @public
  */
-export declare type CanvasMenuComponentId = 'ly.img.separator' | 'ly.img.spacer' | 'ly.img.group.enter.canvasMenu' | 'ly.img.group.select.canvasMenu' | 'ly.img.page.moveUp.canvasMenu' | 'ly.img.page.moveDown.canvasMenu' | 'ly.img.text.edit.canvasMenu' | 'ly.img.replace.canvasMenu' | 'ly.img.placeholder.canvasMenu' | 'ly.img.bringForward.canvasMenu' | 'ly.img.sendBackward.canvasMenu' | 'ly.img.duplicate.canvasMenu' | 'ly.img.delete.canvasMenu' | 'ly.img.options.canvasMen' | 'ly.img.text.color.canvasMenu' | 'ly.img.text.bold.canvasMenu' | 'ly.img.text.italic.canvasMenu' | 'ly.img.text.variables.canvasMenu' | (string & {});
+export declare type CanvasMenuOrderComponent = CanvasMenuComponents | OrderComponentWithChildren<CanvasMenuComponentId, CanvasMenuComponents>;
 
 /**
  * @public
@@ -3621,7 +3692,7 @@ export declare class FeatureAPI {
  *
  * @public
  */
-export declare type FeatureId = 'ly.img.navigation.bar' | 'ly.img.navigation.back' | 'ly.img.navigation.close' | 'ly.img.navigation.undoRedo' | 'ly.img.navigation.zoom' | 'ly.img.navigation.actions' | 'ly.img.delete' | 'ly.img.duplicate' | 'ly.img.placeholder' | 'ly.img.preview' | 'ly.img.page.move' | 'ly.img.page.add' | 'ly.img.group' | 'ly.img.replace' | 'ly.img.text.edit' | 'ly.img.text.typeface' | 'ly.img.text.fontSize' | 'ly.img.text.fontStyle' | 'ly.img.text.alignment' | 'ly.img.text.advanced' | 'ly.img.text.background' | 'ly.img.adjustment' | 'ly.img.filter' | 'ly.img.filter.lut' | 'ly.img.filter.duotone' | 'ly.img.effect' | 'ly.img.blur' | 'ly.img.shadow' | 'ly.img.cutout' | 'ly.img.fill' | 'ly.img.shape.options' | 'ly.img.combine' | 'ly.img.trim' | 'ly.img.crop' | 'ly.img.crop.size' | 'ly.img.crop.rotation' | 'ly.img.crop.flip' | 'ly.img.crop.fillMode' | 'ly.img.crop.scale' | 'ly.img.crop.position' | 'ly.img.volume' | 'ly.img.stroke' | 'ly.img.position' | 'ly.img.animations' | 'ly.img.opacity' | 'ly.img.blendMode' | 'ly.img.video.timeline' | 'ly.img.video.clips' | 'ly.img.video.overlays' | 'ly.img.video.audio' | 'ly.img.video.addClip' | 'ly.img.video.controls' | 'ly.img.video.controls.toggle' | 'ly.img.video.controls.background' | 'ly.img.video.controls.playback' | 'ly.img.video.controls.loop' | 'ly.img.video.controls.split' | 'ly.img.video.controls.timelineZoom' | 'ly.img.video.caption' | 'ly.img.transform.position' | 'ly.img.transform.size' | 'ly.img.transform.rotation' | 'ly.img.transform.flip' | 'ly.img.inspector.bar' | 'ly.img.inspector.toggle' | 'ly.img.page.resize' | 'ly.img.dock' | 'ly.img.canvas.bar' | 'ly.img.canvas.menu' | 'ly.img.inspector' | 'ly.img.settings' | 'ly.img.library.panel' | (string & {});
+export declare type FeatureId = 'ly.img.navigation.bar' | 'ly.img.navigation.back' | 'ly.img.navigation.close' | 'ly.img.navigation.undoRedo' | 'ly.img.navigation.zoom' | 'ly.img.navigation.actions' | 'ly.img.delete' | 'ly.img.duplicate' | 'ly.img.placeholder' | 'ly.img.placeholder.general' | 'ly.img.placeholder.arrange' | 'ly.img.placeholder.fill' | 'ly.img.placeholder.shape' | 'ly.img.placeholder.stroke' | 'ly.img.placeholder.text' | 'ly.img.placeholder.appearance' | 'ly.img.placeholder.general.opacity' | 'ly.img.placeholder.general.blendMode' | 'ly.img.placeholder.general.duplicate' | 'ly.img.placeholder.general.delete' | 'ly.img.placeholder.arrange.move' | 'ly.img.placeholder.arrange.resize' | 'ly.img.placeholder.arrange.rotate' | 'ly.img.placeholder.arrange.flip' | 'ly.img.placeholder.fill.change' | 'ly.img.placeholder.fill.changeType' | 'ly.img.placeholder.fill.actAsPlaceholder' | 'ly.img.placeholder.fill.crop' | 'ly.img.placeholder.shape.change' | 'ly.img.placeholder.stroke.change' | 'ly.img.placeholder.text.edit' | 'ly.img.placeholder.text.actAsPlaceholder' | 'ly.img.placeholder.text.character' | 'ly.img.placeholder.appearance.adjustments' | 'ly.img.placeholder.appearance.filter' | 'ly.img.placeholder.appearance.effect' | 'ly.img.placeholder.appearance.blur' | 'ly.img.placeholder.appearance.shadow' | 'ly.img.placeholder.appearance.animations' | 'ly.img.preview' | 'ly.img.page.move' | 'ly.img.page.add' | 'ly.img.group' | 'ly.img.replace' | 'ly.img.text.edit' | 'ly.img.text.typeface' | 'ly.img.text.fontSize' | 'ly.img.text.fontStyle' | 'ly.img.text.alignment' | 'ly.img.text.advanced' | 'ly.img.text.background' | 'ly.img.adjustment' | 'ly.img.filter' | 'ly.img.filter.lut' | 'ly.img.filter.duotone' | 'ly.img.effect' | 'ly.img.blur' | 'ly.img.shadow' | 'ly.img.cutout' | 'ly.img.fill' | 'ly.img.shape.options' | 'ly.img.combine' | 'ly.img.trim' | 'ly.img.crop' | 'ly.img.crop.size' | 'ly.img.crop.rotation' | 'ly.img.crop.flip' | 'ly.img.crop.fillMode' | 'ly.img.crop.scale' | 'ly.img.crop.position' | 'ly.img.crop.panel.autoOpen' | 'ly.img.volume' | 'ly.img.stroke' | 'ly.img.position' | 'ly.img.animations' | 'ly.img.opacity' | 'ly.img.blendMode' | 'ly.img.video.timeline' | 'ly.img.video.clips' | 'ly.img.video.overlays' | 'ly.img.video.audio' | 'ly.img.video.addClip' | 'ly.img.video.controls' | 'ly.img.video.controls.toggle' | 'ly.img.video.controls.background' | 'ly.img.video.controls.playback' | 'ly.img.video.controls.loop' | 'ly.img.video.controls.split' | 'ly.img.video.controls.timelineZoom' | 'ly.img.video.caption' | 'ly.img.transform.position' | 'ly.img.transform.size' | 'ly.img.transform.rotation' | 'ly.img.transform.flip' | 'ly.img.inspector.bar' | 'ly.img.inspector.toggle' | 'ly.img.page.resize' | 'ly.img.dock' | 'ly.img.canvas.bar' | 'ly.img.canvas.menu' | 'ly.img.inspector' | 'ly.img.settings' | 'ly.img.library.panel' | (string & {});
 
 /**
  * The feature predicate is used to enable or disable a feature
@@ -5603,7 +5674,7 @@ export declare class UserInterfaceAPI {
      * @param canvasMenuOrder - Array of component IDs defining the canvas menu order.
      * @param orderContext - Optional context specifying when this order applies.
      */
-    setCanvasMenuOrder(canvasMenuOrder: (CanvasMenuComponentId | OrderComponent<CanvasMenuComponentId>)[], orderContext?: OrderContext): void;
+    setCanvasMenuOrder(canvasMenuOrder: (CanvasMenuComponentId | CanvasMenuOrderComponent)[], orderContext?: OrderContext): void;
     /**
      * Gets the current rendering order of canvas menu components.
      *
@@ -5615,7 +5686,7 @@ export declare class UserInterfaceAPI {
      * @param orderContext - Optional context specifying which order to retrieve.
      * @returns Array of component configurations defining the canvas menu order.
      */
-    getCanvasMenuOrder(orderContext?: OrderContext): OrderComponent[];
+    getCanvasMenuOrder(orderContext?: OrderContext): CanvasMenuOrderComponent[];
     /**
      * Updates a component in the render order of the canvas menu.
      *
@@ -5631,11 +5702,11 @@ export declare class UserInterfaceAPI {
      * @param matcher - Function or object to match the component to update.
      * @param update - New ID, partial properties, or updater function for the component.
      * @param orderContext - Optional context specifying which order to update.
-     * @returns The updated canvas menu order array.
+     * @returns An object containing the number of updated components and the updated canvas menu order array.
      */
-    updateCanvasMenuOrderComponent(matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>, update: CanvasMenuComponentId | Partial<OrderComponent<CanvasMenuComponentId>> | ((component: OrderComponent<CanvasMenuComponentId>) => Partial<OrderComponent<CanvasMenuComponentId>>), orderContext?: OrderContext): {
+    updateCanvasMenuOrderComponent(matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>, update: CanvasMenuComponentId | Partial<CanvasMenuOrderComponent> | ((component: CanvasMenuOrderComponent) => Partial<CanvasMenuOrderComponent>), orderContext?: OrderContext): {
         updated: number;
-        order: OrderComponent<CanvasMenuComponentId>[];
+        order: CanvasMenuOrderComponent[];
     };
     /**
      * Removes a component from the render order of the canvas menu.
@@ -5648,11 +5719,11 @@ export declare class UserInterfaceAPI {
      * @category UI Layout
      * @param matcher - Function or object to match the component to remove.
      * @param orderContext - Optional context specifying which order to update.
-     * @returns The updated canvas menu order array.
+     * @returns An object containing the number of removed components and the updated canvas menu order array.
      */
     removeCanvasMenuOrderComponent(matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>, orderContext?: OrderContext): {
         removed: number;
-        order: OrderComponent<CanvasMenuComponentId>[];
+        order: CanvasMenuOrderComponent[];
     };
     /**
      * Inserts a component into the render order of the canvas menu.
@@ -5670,7 +5741,7 @@ export declare class UserInterfaceAPI {
      * @param orderContext - Optional context specifying which order to update.
      * @returns The updated canvas menu order array.
      */
-    insertCanvasMenuOrderComponent(matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>, component: CanvasMenuComponentId | OrderComponent<CanvasMenuComponentId>, location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
+    insertCanvasMenuOrderComponent(matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>, component: CanvasMenuComponentId | CanvasMenuOrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
         inserted: boolean;
         order: OrderComponent<CanvasMenuComponentId>[];
     };