@cesdk/cesdk-js 1.60.0-rc.0 → 1.60.0-rc.1

package/index.d.ts

@@ -132,6 +132,7 @@ import { SizeMode } from '@cesdk/engine';
 import { SortingOrder } from '@cesdk/engine';
 import { Source } from '@cesdk/engine';
 import { _Source } from '@cesdk/engine';
+import { SplitOptions } from '@cesdk/engine';
 import { SpotColor } from '@cesdk/engine';
 import { StrokeCornerGeometry } from '@cesdk/engine';
 import { StrokePosition } from '@cesdk/engine';
@@ -167,6 +168,92 @@ declare type A11y = {
     headingsHierarchyStart: 1 | 2 | 3 | 4 | 5 | 6;
 };
 
+/**
+ * Type helper for retrieving the correct action function type based on the action ID.
+ * Returns the strongly-typed action for known actions, or a custom action type for unknown IDs.
+ *
+ * @typeParam T - The action ID type
+ * @typeParam C - The custom action function type (defaults to CustomActionFunction)
+ * @public
+ */
+export declare type ActionFunction<T extends ActionId, C = CustomActionFunction> = T extends keyof RegisteredActions ? RegisteredActions[T] : C;
+
+/**
+ * Available action event types that can be registered with the ActionsAPI.
+ * These correspond to different UI actions that can be customized.
+ * Supports both predefined action types from the Actions interface and custom string identifiers.
+ *
+ * @public
+ */
+export declare type ActionId = keyof RegisteredActions | (string & {});
+
+/**
+ * ActionsAPI provides a centralized way to manage and customize actions
+ * for various user interactions in the Creative Engine SDK.
+ *
+ * This API allows you to:
+ * - Register custom actions for events (export, load, download, etc.)
+ * - Use default implementations when no custom action is registered
+ * - Maintain consistent behavior across different UI components
+ * @public
+ */
+export declare class ActionsAPI {
+    #private;
+
+    /**
+     * Registers a custom action for a specific event type.
+     *
+     * @param actionId - The event type to register an action for
+     * @param action - The custom action function
+     *
+     * @example
+     * ```typescript
+     * actionsAPI.register('downloadFile', async (blob, mimeType) => {
+     *   // Custom download logic
+     *   await customDownloadAction(blob, mimeType);
+     * });
+     * ```
+     * @public
+     */
+    register<T extends ActionId>(actionId: T, action: ActionFunction<T>): void;
+    /**
+     * Returns the custom export video action if registered, otherwise returns the default.
+     *
+     * @param actionId - The event type to get an action for
+     *
+     * @example
+     * ```typescript
+     * const exportAction = actionsAPI.get('export');
+     * if (exportAction) {
+     *   const result = await exportAction(options);
+     * }
+     * ```
+     * @public
+     */
+    get<T extends ActionId, C = CustomActionFunction>(actionId: T): ActionFunction<T, C> | undefined;
+    /**
+     * Executes a registered action with the provided parameters.
+     * Throws an error if the action is not registered.
+     *
+     * @param actionId - The event type to execute
+     * @param args - The arguments to pass to the action
+     * @returns The result of the action execution
+     * @throws Error if the action is not registered
+     *
+     * @example
+     * ```typescript
+     * try {
+     *   const result = await actionsAPI.run('exportDesign', exportOptions);
+     *   console.log('Export completed', result);
+     * } catch (error) {
+     *   console.error('Export action not registered');
+     * }
+     * ```
+     * @public
+     */
+    run<T extends ActionId, C = CustomActionFunction>(actionId: T, ...args: ActionFunction<T, C> extends CustomActionFunction ? Parameters<ActionFunction<T, C>> : never[]): Promise<ActionFunction<T, C> extends (...args: any[]) => infer R ? R : never>;
+}
+
 export { AddImageOptions }
 
 export { AddVideoOptions }
@@ -703,19 +790,51 @@ export declare interface ButtonOptions {
  * upload, and unsupported browser events.
  *
  * @public
+ * @deprecated Use the `cesdk.actions` API and the Order API instead.
  */
 declare type Callbacks = {
+    /**
+     * @deprecated Use the onClick on `'ly.img.back.navigationBar'` and the Order API instead.
+     */
     onBack?: () => void | Promise<void>;
+    /**
+     * @deprecated Use the onClick on `'ly.img.close.navigationBar'` and the Order API instead.
+     */
     onClose?: () => void | Promise<void>;
+    /**
+     * @deprecated Use the onClick on `'ly.img.shareScene.navigationBar'` and the Order API instead.
+     */
     onShare?: (s: string) => void | Promise<void>;
+    /**
+     * @deprecated Use the onClick on `'ly.img.saveScene.navigationBar'` and the Order API instead.
+     */
     onSave?: (s: string) => void | Promise<void>;
+    /**
+     * @deprecated Use the onClick on `'ly.img.importScene.navigationBar'` and the Order API instead.
+     */
     onLoad?: (() => Promise<string>) | 'upload';
+    /**
+     * @deprecated Use the onClick on `'ly.img.importArchive.navigationBar'` and the Order API instead.
+     */
     onLoadArchive?: (() => Promise<string>) | 'uploadArchive';
+    /**
+     * @deprecated Use the onClick on `'ly.img.exportScene.navigationBar'` and the Order API instead.
+     */
     onDownload?: ((s: string) => void | Promise<void>) | 'download';
+    /**
+     * @deprecated Use the onClick on `'ly.img.export.navigationBar'` and the Order API instead.
+     */
     onExport?: ((blobs: Blob[], options: ExportOptions) => void | Promise<void>) | 'download';
+    /**
+     * @deprecated Use the `cesdk.actions.register('uploadFile', action)` and `engine.editor.setSetting('upload/supportedMimeTypes', '<mimeType>,<mimeType>')` instead.
+     * Note: If you are using `addDemoAssetSources`, now you will have to explicitly enable upload sources by setting `withUploadAssetSources: true`.
+     */
     onUpload?: OnUploadCallback | 'local' | (Partial<OnUploadOptions> & {
         callback: OnUploadCallback;
     });
+    /**
+     * @deprecated Use the `cesdk.actions.register('onUnsupportedBrowser', action)` instead.
+     */
     onUnsupportedBrowser?: () => void;
 };
 
@@ -775,6 +894,9 @@ export declare interface CESDKConfiguration {
      */
     i18n: I18n;
     a11y: A11y;
+    /**
+     * @deprecated The `callbacks` property is deprecated in favor of the `cesdk.actions` API and navigation bar order APIs.
+     */
     callbacks: Callbacks;
     featureFlags?: _EngineConfiguration['featureFlags'];
     logger: _EngineConfiguration['logger'];
@@ -1014,6 +1136,16 @@ declare class CreativeEditorSDK {
      * @category Members
      * */
     feature: FeatureAPI;
+    /**
+     * Access to the {@link ActionsAPI} to control event actions
+     * @category Members
+     */
+    actions: ActionsAPI;
+    /**
+     * Access to the {@link UtilsAPI} for utility functions
+     * @category Members
+     */
+    utils: UtilsAPI;
     /**
      * The version of the Creative Editor SDK
      * @category Members
@@ -1061,10 +1193,11 @@ declare class CreativeEditorSDK {
      * @category Asset Management
      * @param options - Configuration options for asset sources. Contains `baseURL` (defaults to 'https://cdn.img.ly/assets/demo/v2'), `excludeAssetSourceIds` (IDs to ignore during load), and `sceneMode` (loads video-specific sources if 'Video').
      */
-    addDemoAssetSources({ baseURL, excludeAssetSourceIds, sceneMode }?: {
+    addDemoAssetSources({ baseURL, excludeAssetSourceIds, sceneMode, withUploadAssetSources }?: {
         baseURL?: string;
         excludeAssetSourceIds?: DemoAssetSourceId[];
         sceneMode?: SceneMode;
+        withUploadAssetSources?: boolean;
     }): Promise<void>;
     /**
      * Exports one or multiple page(s) as an file in the given mimeType
@@ -1246,6 +1379,16 @@ export default CreativeEditorSDK;
 
 export { CreativeEngine }
 
+/**
+ * A generic action function type for custom actions.
+ * Supports both synchronous and asynchronous implementations with flexible parameters.
+ *
+ * @param args - Variable number of arguments of any type
+ * @returns Any value or a promise that resolves to any value
+ * @public
+ */
+export declare type CustomActionFunction = (...args: any[]) => any | Promise<any>;
+
 /**
  * @public
  * Type representing the background of a custom card, which can be either an image or an SVG vector path.
@@ -1770,6 +1913,18 @@ export declare namespace ExperimentalUserInterfaceAPI {
     }
 }
 
+/**
+ * Action function for handling export operations.
+ * Can be called with or without options to customize the export behavior.
+ * Supports both standard and video export workflows through a generic type parameter.
+ * The return type is automatically inferred based on the input options type.
+ *
+ * @param options - Optional export configuration for standard or video exports
+ * @returns A promise that resolves when the export operation is complete, or void for synchronous operations
+ * @public
+ */
+export declare type ExportAction = (options?: EngineExportOptions | VideoExportOptions) => void | Promise<void>;
+
 /**
  * @public
  * Type representing the export format.
@@ -1796,6 +1951,19 @@ export declare interface ExportOptions extends Pick<EngineExportOptions, 'pngCom
     pages?: number[];
 }
 
+/**
+ * Action function for handling scene export operations.
+ *
+ * @param options - Options for configuring the export operation
+ *                - options.format: The format of the exported scene data.
+ *                - options.scene: The scene data to export.
+ * @returns A promise that resolves when the export operation is complete, or void for synchronous operations
+ * @public
+ */
+export declare type ExportSceneAction = (options: {
+    format: 'scene' | 'archive';
+}) => void | Promise<void>;
+
 /**
  * Controls the availability of features within the Creative Editor SDK.
  *
@@ -1878,6 +2046,12 @@ export declare type FeaturePredicateContext = IsEnabledFeatureContext & {
     defaultPredicate: () => boolean;
 };
 
+/**
+ * Represents the MIME types for files supported by the file operations in UtilsAPI.
+ * @public
+ */
+export declare type FileMimeType = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/x-tga' | 'audio/wav' | 'video/mp4' | 'video/quicktime' | 'video/webm' | 'video/matroska' | 'application/octet-stream' | 'application/pdf' | 'application/zip' | 'text/plain;charset=UTF-8';
+
 export { FillType }
 
 export { FillTypeLonghand }
@@ -1944,6 +2118,18 @@ declare type ImageBlockConfig = {
 
 export { ImageMimeType }
 
+/**
+ * Action function for handling scene import operations.
+ *
+ * @param options - Options for configuring the import operation
+ *                - options.format: The format of the imported scene data.
+ * @returns A promise that resolves with the imported scene data as a string, or the scene data directly
+ * @public
+ */
+export declare type ImportSceneAction = (options: {
+    format?: 'scene' | 'archive';
+}) => void | Promise<void>;
+
 /**
  * Represents options for an input.
  *
@@ -2139,14 +2325,61 @@ export declare interface MediaPreviewOptions {
 export { MimeType_2 as MimeType }
 
 /**
- * Represents the ID of a navigation bar component.
- *
- * The NavigationBarComponentId type defines the possible IDs for components that can be used in the navigation bar.
- * It includes predefined IDs for separators, spacers, and various navigation items, as well as a catch-all type for custom IDs.
+ * @public
+ * Base interface for action buttons in the navigation bar.
+ * Contains common properties shared across all action button types.
  *
+ * - `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'.
+ * - `color`: Optional color which can be either 'accent' or 'danger'.
+ * - `isDisabled`: Optional disabled property.
+ * - `isLoading`: Optional loading property.
+ */
+export declare interface NavigationBarActionButton extends OrderComponent {
+    id: 'ly.img.saveScene.navigationBar' | 'ly.img.exportArchive.navigationBar' | 'ly.img.exportScene.navigationBar' | 'ly.img.exportImage.navigationBar' | 'ly.img.exportPDF.navigationBar' | 'ly.img.exportVideo.navigationBar' | 'ly.img.importScene.navigationBar' | 'ly.img.importArchive.navigationBar' | 'ly.img.shareScene.navigationBar' | 'ly.img.back.navigationBar' | 'ly.img.close.navigationBar';
+    onClick: () => void | Promise<void>;
+    label?: string;
+    icon?: string;
+    variant?: 'regular' | 'plain';
+    color?: 'accent' | 'danger';
+    isDisabled?: boolean;
+    isLoading?: boolean;
+}
+
+/**
+ * A list of the component IDs that can be used in the navigation bar.
+ * @public
+ */
+export declare type NavigationBarComponentId = 'ly.img.separator' | 'ly.img.spacer' | 'ly.img.back.navigationBar' | 'ly.img.undoRedo.navigationBar' | 'ly.img.pageResize.navigationBar' | 'ly.img.title.navigationBar' | 'ly.img.zoom.navigationBar' | 'ly.img.preview.navigationBar' | 'ly.img.actions.navigationBar' | 'ly.img.close.navigationBar' | 'ly.img.saveScene.navigationBar' | 'ly.img.exportImage.navigationBar' | 'ly.img.exportPDF.navigationBar' | 'ly.img.exportVideo.navigationBar' | 'ly.img.shareScene.navigationBar' | 'ly.img.exportScene.navigationBar' | 'ly.img.exportArchive.navigationBar' | 'ly.img.importScene.navigationBar' | 'ly.img.importArchive.navigationBar' | 'ly.img.action.navigationBar' | (string & {});
+
+/**
+ * @public
+ */
+export declare type NavigationBarComponents = NavigationBarActionButton | NavigationBarCustomActionButton;
+
+/**
+ * @public
+ * Interface representing a generic Action Button in the navigation bar component.
+ * Note: This component requires a key and has a required label, unlike other action buttons.
+ */
+export declare interface NavigationBarCustomActionButton extends OrderComponent {
+    id: 'ly.img.action.navigationBar';
+    key: string;
+    onClick: () => void | Promise<void>;
+    label: string;
+    icon?: string;
+    variant?: 'regular' | 'plain';
+    color?: 'accent' | 'danger';
+    isDisabled?: boolean;
+    isLoading?: boolean;
+}
+
+/**
  * @public
  */
-export declare type NavigationBarComponentId = 'ly.img.separator' | 'ly.img.spacer' | 'ly.img.back.navigationBar' | 'ly.img.undoRedo.navigationBar' | 'ly.img.pageResize.navigationBar' | 'ly.img.title.navigationBar' | 'ly.img.zoom.navigationBar' | 'ly.img.preview.navigationBar' | 'ly.img.actions.navigationBar' | 'ly.img.close.navigationBar' | 'ly.img.save.navigationBar' | 'ly.img.exportImage.navigationBar' | 'ly.img.exportPDF.navigationBar' | 'ly.img.exportVideo.navigationBar' | 'ly.img.share.navigationBar' | 'ly.img.download.navigationBar' | 'ly.img.archive.navigationBar' | 'ly.img.load.navigationBar' | 'ly.img.loadArchive.navigationBar' | (string & {});
+export declare type NavigationBarOrderComponent = NavigationBarComponents | OrderComponentWithChildren<NavigationBarComponentId, NavigationBarComponents>;
 
 /**
  * This enum is used to specify the position of the navigation bar within the user interface.
@@ -2240,6 +2473,41 @@ export { ObjectTypeShorthand }
 
 export { OffscreenCanvas_2 as OffscreenCanvas }
 
+/**
+ * This interface extends the base ExportOptions with additional information about the export,
+ * including which design blocks were exported and the mimeType.
+ *
+ * @see ExportOptions For base export configuration options
+ * @see DesignBlockId For design block identifier type
+ *
+ * @public
+ */
+export declare type OnExportOptions = EngineExportOptions & {
+    mimeType: Required<EngineExportOptions>['mimeType'];
+    exportedBlocks?: DesignBlockId[];
+};
+
+/**
+ * This interface extends the base VideoExportOptions with additional information about the export,
+ * including which design blocks were exported and the mimeType.
+ *
+ * @see VideoExportOptions For base export configuration options
+ * @see DesignBlockId For design block identifier type
+ * @public
+ */
+export declare type OnExportVideoOptions = VideoExportOptions & {
+    mimeType: VideoMimeType;
+    exportedBlocks?: DesignBlockId[];
+};
+
+/**
+ * Action function that is invoked when an unsupported browser is detected.
+ * This allows custom handling of unsupported browser scenarios.
+ *
+ * @public
+ */
+export declare type OnUnsupportedBrowserAction = () => void;
+
 /**
  * Represents the upload callback function for the Creative Editor SDK.
  * This type defines a function that handles file uploads, including progress updates and context.
@@ -2285,7 +2553,20 @@ export declare interface OrderComponent<I = ComponentId> extends ComponentPayloa
  *
  * @public
  */
-export declare type OrderComponentMatcher<C extends OrderComponent> = C['id'] | Partial<C> | ((component: C, index: number) => boolean);
+export declare type OrderComponentMatcher<C extends OrderComponent> = 'first' | 'last' | number | C['id'] | Partial<C> | ((component: C, index: number) => boolean);
+
+/**
+ * Represents a custom dock component.
+ *
+ * The CustomDockComponent interface defines the structure of a custom dock component.
+ * It includes properties for the ID and payload.
+ *
+ * @public
+ */
+export declare interface OrderComponentWithChildren<I extends ComponentId, C = OrderComponent<I>> extends OrderComponent<I> {
+    /** A list of children as order components */
+    children?: (OrderComponentWithChildren<I, C> | I | C)[];
+}
 
 /**
  * Interface representing the context for ordering components.
@@ -2446,6 +2727,33 @@ export { PropertyType }
 
 export { Range_2 as Range }
 
+/**
+ * Represents a collection of action functions used throughout the application.
+ * Each property corresponds to a specific UI action or event that can be customized.
+ *
+ * @public
+ */
+export declare interface RegisteredActions {
+    /** Action invoked to handle scene saving. */
+    saveScene: SaveSceneAction;
+    /** Action invoked to handle scene sharing. */
+    shareScene: ShareSceneAction;
+    /** Action invoked to handle export actions. */
+    exportDesign: ExportAction;
+    /** Action invoked to handle import actions. */
+    importScene: ImportSceneAction;
+    /** Action invoked to handle scene export actions. */
+    exportScene: ExportSceneAction;
+    /** Action invoked to handle file uploads. */
+    uploadFile: UploadAction;
+    /** Action invoked when an unsupported browser is detected. */
+    onUnsupportedBrowser: OnUnsupportedBrowserAction;
+    /**
+     * Action invoked when the add clip button is pressed in the video timeline
+     */
+    addClip: VoidFunction;
+}
+
 /**
  * @public
  * Provides context for replacing asset library entries, including selected blocks and default entry IDs.
@@ -2467,6 +2775,14 @@ export { RGBColor }
 
 export { RoleString }
 
+/**
+ * Action function for handling scene saving operations.
+ *
+ * @returns A promise that resolves when the save operation is complete, or void for synchronous operations
+ * @public
+ */
+export declare type SaveSceneAction = () => void | Promise<void>;
+
 /**
  * Represents the base scale values for the Creative Editor SDK.
  * This type defines the concrete scales that can be rendered.
@@ -2571,6 +2887,14 @@ export { ShapeTypeLonghand }
 
 export { ShapeTypeShorthand }
 
+/**
+ * Action function for handling scene sharing operations.
+ *
+ * @returns A promise that resolves when the share operation is complete, or void for synchronous operations
+ * @public
+ */
+export declare type ShareSceneAction = () => void | Promise<void>;
+
 export { SizeMode }
 
 /**
@@ -2594,6 +2918,8 @@ export { SortingOrder }
 
 export { Source }
 
+export { SplitOptions }
+
 export { SpotColor }
 
 export { StrokeCornerGeometry }
@@ -4020,6 +4346,17 @@ export declare type UnknownPanelPayload = {
     [key: string]: unknown;
 };
 
+/**
+ * Action function for uploading files to asset sources.
+ *
+ * @param file - The file to upload
+ * @param onProgress - Progress action that receives upload progress (0-100)
+ * @param context - Optional context information for the upload operation
+ * @returns A promise that resolves with the uploaded asset definition
+ * @public
+ */
+export declare type UploadAction = (file: File, onProgress: (progress: number) => void, context?: UploadCallbackContext) => Promise<AssetDefinition>;
+
 /**
  * Represents the context for the upload callback in the Creative Editor SDK.
  * This interface defines the source ID and an optional group for the upload context.
@@ -4663,7 +5000,7 @@ export declare class UserInterfaceAPI {
      * @param navigationBarOrder - Array of component IDs defining the navigation bar order.
      * @param orderContext - Optional context specifying when this order applies.
      */
-    setNavigationBarOrder(navigationBarOrder: (NavigationBarComponentId | OrderComponent<NavigationBarComponentId>)[], orderContext?: OrderContext): void;
+    setNavigationBarOrder(navigationBarOrder: (NavigationBarComponentId | NavigationBarOrderComponent)[], orderContext?: OrderContext): void;
     /**
      * Updates a component in the render order of the navigation bar.
      *
@@ -4681,9 +5018,9 @@ export declare class UserInterfaceAPI {
      * @param orderContext - Optional context specifying which order to update.
      * @returns An object containing the number of updated components and the updated navigation bar order array.
      */
-    updateNavigationBarOrderComponent(matcher: OrderComponentMatcher<OrderComponent<NavigationBarComponentId>>, update: NavigationBarComponentId | Partial<OrderComponent<NavigationBarComponentId>> | ((component: OrderComponent<NavigationBarComponentId>) => Partial<OrderComponent<NavigationBarComponentId>>), orderContext?: OrderContext): {
+    updateNavigationBarOrderComponent(matcher: OrderComponentMatcher<OrderComponent<NavigationBarComponentId>>, update: NavigationBarComponentId | Partial<NavigationBarOrderComponent> | ((component: NavigationBarOrderComponent) => Partial<NavigationBarOrderComponent>), orderContext?: OrderContext): {
         updated: number;
-        order: OrderComponent<NavigationBarComponentId>[];
+        order: NavigationBarOrderComponent[];
     };
     /**
      * Removes a component from the render order of the navigation bar.
@@ -4700,7 +5037,7 @@ export declare class UserInterfaceAPI {
      */
     removeNavigationBarOrderComponent(matcher: OrderComponentMatcher<OrderComponent<NavigationBarComponentId>>, orderContext?: OrderContext): {
         removed: number;
-        order: OrderComponent<NavigationBarComponentId>[];
+        order: NavigationBarOrderComponent[];
     };
     /**
      * Inserts a component into the render order of the navigation bar.
@@ -4718,7 +5055,7 @@ export declare class UserInterfaceAPI {
      * @param orderContext - Optional context specifying which order to update.
      * @returns The updated navigation bar order array.
      */
-    insertNavigationBarOrderComponent(matcher: OrderComponentMatcher<OrderComponent<NavigationBarComponentId>>, component: NavigationBarComponentId | OrderComponent<NavigationBarComponentId>, location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
+    insertNavigationBarOrderComponent(matcher: OrderComponentMatcher<OrderComponent<NavigationBarComponentId>>, component: NavigationBarComponentId | NavigationBarOrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
         inserted: boolean;
         order: OrderComponent<NavigationBarComponentId>[];
     };
@@ -4871,6 +5208,20 @@ export declare class UserInterfaceAPI {
      *
      * @category Asset Library
      * @param backgroundTrackAssetLibraryEntries - Array of asset library entry IDs for the background track.
+     * @deprecated please use the cesdk.actions API to register an action for 'addClip' and implement your own logic.
+     * @example
+     * ```ts
+     * // Before
+     * cesdk.ui.setBackgroundTrackAssetLibraryEntries(['ly.img.video', 'ly.img.image']);
+     * // After
+     * cesdk.actions.register('addClip', async () => {
+     *   cesdk.ui.openPanel('//ly.img.panel/assetLibrary', {
+     *     payload: {
+     *       entries: ['ly.img.video', 'ly.img.image']
+     *     }
+     *   });
+     * });
+     * ```
      */
     setBackgroundTrackAssetLibraryEntries(backgroundTrackAssetLibraryEntries: string[]): void;
     /**
@@ -4880,6 +5231,7 @@ export declare class UserInterfaceAPI {
      *
      * @category Asset Library
      * @returns Array of asset library entry IDs configured for the background track.
+     * @deprecated The background track entries are now defined via the cesdk.actions API.
      */
     getBackgroundTrackAssetLibraryEntries(): string[];
     /**
@@ -5054,6 +5406,19 @@ declare interface UserInterfaceElements_2 {
             entries?: AssetLibraryEntries;
             autoClose?: boolean | (() => boolean);
             floating?: boolean;
+            /**
+             * @deprecated please use the cesdk.actions API to register an action for 'addClip' and implement your own logic.
+             * @example
+             * ```ts
+             * cesdk.actions.register('addClip', async () => {
+             *   cesdk.ui.openPanel('//ly.img.panel/assetLibrary', {
+             *     payload: {
+             *       entries: ['ly.img.video', 'ly.img.image']
+             *     }
+             *   });
+             * });
+             * ```
+             */
             backgroundTrackLibraryEntries?: string[] | ((entries: AssetLibraryEntry[]) => string[]);
         };
         replace?: {
@@ -5240,14 +5605,41 @@ declare interface UserInterfaceInspectorBlockVideoFill extends UserInterfaceInsp
 declare interface UserInterfaceNavigation extends UserInterfaceElement {
     position?: NavigationPosition;
     title?: string | null;
+    /**
+     * @deprecated Use the Order API to configure the actions instead.
+     */
     action?: {
+        /**
+         * @deprecated Use the Order API to configure the actions instead.
+         */
         close?: UserInterfaceElement | boolean;
+        /**
+         * @deprecated Use the Order API to configure the actions instead.
+         */
         back?: UserInterfaceElement | boolean;
+        /**
+         * @deprecated Use the Order API to configure the actions instead.
+         */
         save?: UserInterfaceElement | boolean;
+        /**
+         * @deprecated Use the Order API to configure the actions instead.
+         */
         export?: UserInterfaceExportAction | boolean;
+        /**
+         * @deprecated Use the Order API to configure the actions instead.
+         */
         share?: UserInterfaceElement | boolean;
+        /**
+         * @deprecated Use the Order API to configure the actions instead.
+         */
         load?: UserInterfaceElement | boolean;
+        /**
+         * @deprecated Use the Order API to configure the actions instead.
+         */
         download?: UserInterfaceElement | boolean;
+        /**
+         * @deprecated Use the Order API to configure the actions instead.
+         */
         custom?: UserInterfaceCustomAction[];
     };
 }
@@ -5259,6 +5651,164 @@ declare interface UserInterfaceNavigation extends UserInterfaceElement {
 declare interface UserInterfaceSettings extends UserInterfaceElement {
 }
 
+/**
+ * UtilsAPI provides utility functions for common operations in the Creative Engine SDK.
+ *
+ * This API includes utilities for:
+ * - Creating and managing loading dialogs
+ * - Exporting content (images, PDFs, videos)
+ * - Loading and downloading files
+ * - Local file uploads
+ * @public
+ */
+export declare class UtilsAPI {
+    #private;
+
+    /**
+     * Shows and manages a loading dialog with progress tracking
+     *
+     * @param options - Options for configuring the loading dialog
+     * @returns A controller object for managing the dialog
+     *
+     * @example
+     * ```typescript
+     * const controller = cesdk.utils.showLoadingDialog({
+     *   title: 'Exporting',
+     *   message: 'Please wait...',
+     *   onAbort: () => console.log('Aborted')
+     * });
+     *
+     * // Update progress
+     * controller.updateProgress({ value: 50, max: 100 });
+     *
+     * // Show success
+     * controller.showSuccess({
+     *   title: 'Success',
+     *   message: 'Export completed!'
+     * });
+     * ```
+     * @public
+     */
+    showLoadingDialog(options?: {
+        title?: string;
+        message?: string | string[];
+        cancelLabel?: string;
+        abortLabel?: string;
+        abortTitle?: string;
+        abortMessage?: string | string[];
+        size?: 'regular' | 'large';
+        clickOutsideToClose?: boolean;
+        progress?: DialogProgress;
+        onDone?: () => void;
+        onAbort?: () => void;
+    }): {
+        dialogId: string;
+        updateProgress(progress: DialogProgress): void;
+        showSuccess(options: {
+            title?: string;
+            message: string | string[];
+        }): void;
+        showError(options: {
+            title?: string;
+            message: string | string[];
+        }): void;
+        close(): void;
+    };
+    /**
+     * Exports content with a loading dialog and progress tracking.
+     * Automatically handles both static exports (images, PDFs) and video exports based on MIME type.
+     *
+     * @param options - Export options. Type inference based on mimeType.
+     * @returns Export result - either blobs array for static or single blob for video
+     *
+     * @example
+     * ```typescript
+     * // Image export
+     * const imageResult = await cesdk.utils.export({
+     *   mimeType: 'image/png',
+     *   pngCompressionLevel: 7
+     * });
+     *
+     * // Video export
+     * const videoResult = await cesdk.utils.export({
+     *   mimeType: 'video/mp4',
+     *   onProgress: (rendered, encoded, total) => console.log(`${rendered}/${total}`)
+     * });
+     * ```
+     * @public
+     */
+    export<T extends EngineExportOptions | VideoExportOptions>(options?: T): Promise<{
+        blobs: Blob[];
+        options: T extends VideoExportOptions ? OnExportVideoOptions : OnExportOptions;
+    }>;
+
+
+    /**
+     * Opens a file picker dialog for the user to select a file
+     *
+     * @param options - Options for the file load operation
+     * @returns The loaded file content in the requested format
+     *
+     * @example
+     * ```typescript
+     * // Load a text file
+     * const text = await cesdk.utils.loadFile({
+     *   accept: '.txt',
+     *   returnType: 'text'
+     * });
+     *
+     * // Load an image as blob
+     * const blob = await cesdk.utils.loadFile({
+     *   accept: 'image/*',
+     *   returnType: 'blob'
+     * });
+     * ```
+     * @public
+     */
+    loadFile<T extends 'dataURL' | 'text' | 'blob' | 'arrayBuffer' | 'File'>({ accept, returnType }: {
+        accept: string;
+        returnType?: T;
+    }): Promise<T extends 'dataURL' ? string : T extends 'text' ? string : T extends 'blob' ? Blob : T extends 'arrayBuffer' ? ArrayBuffer : File>;
+    /**
+     * Downloads a blob or string as a file to the user's device
+     *
+     * @param file - The content to download (Blob or string)
+     * @param mimeType - The MIME type of the content
+     *
+     * @example
+     * ```typescript
+     * // Download a text file
+     * await cesdk.utils.downloadFile('Hello World', 'text/plain');
+     *
+     * // Download a blob
+     * const blob = new Blob(['content'], { type: 'text/plain' });
+     * await cesdk.utils.downloadFile(blob, 'text/plain');
+     * ```
+     * @public
+     */
+    downloadFile(file: Blob | string, mimeType?: FileMimeType): Promise<void>;
+    /**
+     * Performs a local upload of a file (development only)
+     *
+     * Note: This is meant for development testing only. In production,
+     * you should implement a proper upload handler using the callbacks API.
+     *
+     * @param file - The file to upload
+     * @param context - Optional context information for the upload operation
+     * @returns The asset definition for the uploaded file
+     *
+     * @example
+     * ```typescript
+     * const file = new File(['content'], 'test.txt');
+     * const asset = await cesdk.utils.localUpload(file, {
+     *   context: { source: 'user-upload' }
+     * });
+     * ```
+     * @public
+     */
+    localUpload(file: File, context?: UploadCallbackContext): Promise<AssetDefinition>;
+}
+
 export { VariableAPI }
 
 export { VerticalBlockAlignment }