@cesdk/cesdk-js 1.69.0-nightly.20260130 → 1.69.0-nightly.20260131

package/index.d.ts

@@ -288,6 +288,13 @@ export { AnimationTypeLonghand }
 
 export { AnimationTypeShorthand }
 
+/**
+ * Union type for location options that handles canvas bar's special `at` requirement.
+ *
+ * @public
+ */
+export declare type AnyUILocationOptions<A extends UIArea = UIArea> = A extends 'ly.img.canvas.bar' ? CanvasBarLocationOptions : UILocationOptions<A>;
+
 export { ApplicationMimeType }
 
 export { ApplyAssetOptions }
@@ -643,6 +650,30 @@ export { AudioExportOptions }
 
 export { AudioMimeType }
 
+/**
+ * Base insert options for non-positional areas.
+ * @public
+ */
+export declare interface BaseInsertOptions<A extends Exclude<UIArea, PositionalUIArea> = Exclude<UIArea, PositionalUIArea>> {
+    /** The UI area to insert into. */
+    in: A;
+    /** Optional context for conditional ordering. */
+    when?: OrderContextFor<A>;
+}
+
+/**
+ * Base insert options for positional areas (require `at`).
+ * @public
+ */
+export declare interface BasePositionalInsertOptions<A extends PositionalUIArea> {
+    /** The UI area to insert into. */
+    in: A;
+    /** Which slot within the area (e.g., 'top' or 'bottom' for canvas bar). */
+    at: PositionFor<A>;
+    /** Optional context for conditional ordering. */
+    when?: OrderContextFor<A>;
+}
+
 /**
  * Represents the bleed margin configuration options for a single design unit type in the Creative Editor SDK.
  * This interface defines the dropdown options and the default bleed margin value.
@@ -2242,6 +2273,20 @@ export { Canvas }
  */
 export declare type CanvasBarComponentId = 'ly.img.separator' | 'ly.img.spacer' | 'ly.img.settings.canvasBar' | 'ly.img.page.add.canvasBar' | (string & {});
 
+/**
+ * Location options specifically for the canvas bar, which requires a position.
+ *
+ * @public
+ */
+export declare interface CanvasBarLocationOptions {
+    /** Target the canvas bar. */
+    in: 'ly.img.canvas.bar';
+    /** Position within the canvas bar. Required for canvas bar operations. */
+    at: 'top' | 'bottom';
+    /** Optional context for conditional ordering. */
+    when?: OrderContext;
+}
+
 /**
  * @public
  * Base interface for action buttons in the canvas menu.
@@ -2313,6 +2358,27 @@ export declare interface CanvasMenuOptionsComponent extends OrderComponentWithCh
  */
 export declare type CanvasMenuOrderComponent = CanvasMenuComponents | OrderComponentWithChildren<CanvasMenuComponentId, CanvasMenuComponents>;
 
+/**
+ * Represents the ID of a caption panel component.
+ *
+ * The CaptionPanelComponentId type defines the possible IDs for components that can be used in the caption panel.
+ * It includes predefined IDs for sections, separators, spacers, and various caption panel items, as well as a catch-all type for custom IDs.
+ *
+ * @public
+ */
+export declare type CaptionPanelComponentId = 'ly.img.section' | 'ly.img.separator' | 'ly.img.spacer' | 'ly.img.caption.panel.create' | 'ly.img.caption.panel.import' | 'ly.img.caption.panel.tabs' | 'ly.img.caption.panel.captions' | 'ly.img.caption.panel.add' | 'ly.img.caption.panel.presets' | (string & {});
+
+/**
+ * Context for the caption panel which adds view-based filtering.
+ *
+ * @public
+ */
+export declare interface CaptionPanelOrderContext extends OrderContext {
+    view?: 'create' | 'edit' | 'style' | (string & {});
+    /** Whether to show timing information for each caption in edit view. */
+    showTimings?: boolean;
+}
+
 /**
  * @public
  * Type representing the background of a card.
@@ -2442,6 +2508,17 @@ declare type CombinedConfiguration = CESDKConfiguration & Omit<_EngineConfigurat
 
 export { CompleteAssetResult }
 
+/**
+ * A glob pattern for matching component IDs.
+ *
+ * Examples:
+ * - `'ly.img.*'` matches all ly.img components
+ * - `'*.separator'` matches all separator components
+ *
+ * @public
+ */
+export declare type ComponentGlobPattern = `${string}*` | `*${string}` | `*${string}*`;
+
 /**
  * Represents the ID of a component.
  *
@@ -2450,7 +2527,56 @@ export { CompleteAssetResult }
  *
  * @public
  */
-export declare type ComponentId = DockOrderComponentId | CanvasMenuComponentId | NavigationBarComponentId | CanvasBarComponentId | InspectorBarComponentId;
+export declare type ComponentId = DockOrderComponentId | CanvasMenuComponentId | NavigationBarComponentId | CanvasBarComponentId | InspectorBarComponentId | CaptionPanelComponentId;
+
+/**
+ * Maps UI areas to their component ID types.
+ *
+ * @public
+ */
+export declare type ComponentIdFor<A extends UIArea> = {
+    'ly.img.dock': DockOrderComponentId;
+    'ly.img.inspector.bar': InspectorBarComponentId;
+    'ly.img.canvas.menu': CanvasMenuComponentId;
+    'ly.img.navigation.bar': NavigationBarComponentId;
+    'ly.img.canvas.bar': CanvasBarComponentId;
+    'ly.img.caption.panel': CaptionPanelComponentId;
+}[A];
+
+/**
+ * Unified component matcher type supporting all matching strategies.
+ *
+ * - `'first'` / `'last'` - Match first or last component
+ * - `number` - Match by index (0, 1, -1, etc.)
+ * - `C['id']` - Match by exact ID (with autocomplete for known IDs)
+ * - `ComponentGlobPattern` - Match by glob pattern (e.g., `'ly.img.*'`)
+ * - `Partial<C>` - Match by partial properties (e.g., `{ id: 'x', key: 'y' }`)
+ * - `(component, index) => boolean` - Custom predicate function
+ *
+ * @public
+ */
+export declare type ComponentMatcher<C extends OrderComponent = OrderComponent> = 'first' | 'last' | number | C['id'] | ComponentGlobPattern | Partial<C> | ((component: C, index: number) => boolean);
+
+/**
+ * Options for update and remove operations.
+ * Supports multi-area operations via arrays or glob patterns.
+ *
+ * @public
+ */
+export declare interface ComponentMatchOptions<A extends UIAreaSpecifier = UIAreaSpecifier> {
+    /** The UI area(s) to operate on. Can be a single area, array, or glob pattern. */
+    in: A;
+    /** The matcher to find components. Autocomplete is area-specific when targeting a single area. */
+    match: ComponentMatcher<InferComponentType<A>>;
+    /** Optional context filter. */
+    when?: InferOrderContext<A>;
+    /**
+     * Position for canvas bar operations.
+     * - For update/remove: Optional. If omitted, operates on BOTH top and bottom bars.
+     * - For insert: Required (enforced by InsertComponentOptions type).
+     */
+    at?: 'top' | 'bottom';
+}
 
 /**
  * Represents options for a component.
@@ -2488,6 +2614,20 @@ export declare interface ComponentPayload {
     [key: string]: unknown;
 }
 
+/**
+ * Specifies a component either by ID or as a full component object.
+ *
+ * @public
+ */
+export declare type ComponentSpec<A extends UIArea = UIArea> = ComponentIdFor<A> | OrderComponentFor<A>;
+
+/**
+ * Specifies one or more components for insertion.
+ *
+ * @public
+ */
+export declare type ComponentSpecOrArray<A extends UIArea = UIArea> = ComponentSpec<A> | ComponentSpec<A>[];
+
 declare namespace ConfigTypes {
     export {
         CombinedConfiguration,
@@ -3001,7 +3141,7 @@ declare type CustomCardSvgVectorPathBackground = {
  * @public
  */
 export declare interface CustomDockComponent extends ComponentPayload {
-    id: ComponentId;
+    id: DockOrderComponentId;
 }
 
 /**
@@ -3188,7 +3328,7 @@ export declare type DockOrderComponent = CustomDockComponent | AssetLibraryDockC
  *
  * @public
  */
-export declare type DockOrderComponentId = 'ly.img.separator' | 'ly.img.spacer' | (string & {});
+export declare type DockOrderComponentId = 'ly.img.separator' | 'ly.img.spacer' | 'ly.img.assetLibrary.dock' | (string & {});
 
 /**
  * Represents the context for the children of a dropdown.
@@ -4014,6 +4154,27 @@ export { FontStyle }
 
 export { FontWeight }
 
+/**
+ * Options for getting component order.
+ * Only single area queries are supported to ensure type-safe returns.
+ *
+ * @public
+ */
+export declare type GetOrderOptions<A extends UIArea = UIArea> = AnyUILocationOptions<A>;
+
+/**
+ * A glob pattern string for matching UI areas or component IDs.
+ * Supports `*` as a wildcard.
+ *
+ * Examples:
+ * - `'ly.img.canvas.*'` matches 'ly.img.canvas.bar' and 'ly.img.canvas.menu'
+ * - `'ly.img.*.bar'` matches 'ly.img.canvas.bar', 'ly.img.inspector.bar', 'ly.img.navigation.bar'
+ * - `'*'` matches all areas
+ *
+ * @public
+ */
+export declare type GlobPattern = `${string}*` | `*${string}` | `*${string}*` | '*';
+
 export { GradientColorStop }
 
 export { GradientstopRGBA }
@@ -4062,6 +4223,26 @@ export declare type ImportSceneAction = (options: {
     format?: 'scene' | 'archive';
 }) => void | Promise<void>;
 
+/**
+ * Infers the component type from a UI area specifier.
+ * - Single area: returns area-specific component type
+ * - Array of areas: returns union of component types
+ * - Glob pattern: returns base OrderComponent (all IDs)
+ *
+ * @public
+ */
+export declare type InferComponentType<A extends UIAreaSpecifier> = A extends UIArea ? OrderComponentFor<A> : A extends UIArea[] ? OrderComponentFor<A[number]> : OrderComponent;
+
+/**
+ * Infers the order context type from a UI area specifier.
+ * - Single area: returns area-specific context type
+ * - Array of areas: returns union of context types
+ * - Glob pattern: returns base OrderContext (all areas)
+ *
+ * @public
+ */
+export declare type InferOrderContext<A extends UIAreaSpecifier> = A extends UIArea ? OrderContextFor<A> : A extends UIArea[] ? OrderContextFor<A[number]> : OrderContext;
+
 /**
  * Represents options for an input.
  *
@@ -4080,6 +4261,58 @@ export declare interface InputOptions<T, P = 'top' | 'left'> {
     suffix?: Suffix;
 }
 
+/**
+ * Insert after a matched component.
+ * @public
+ */
+export declare interface InsertAfterOptions<A extends Exclude<UIArea, PositionalUIArea> = Exclude<UIArea, PositionalUIArea>> extends BaseInsertOptions<A> {
+    /** Insert after this component. */
+    after: ComponentMatcher;
+    before?: never;
+    position?: never;
+}
+
+/**
+ * Append to end (default behavior).
+ * @public
+ */
+export declare interface InsertAppendOptions<A extends Exclude<UIArea, PositionalUIArea> = Exclude<UIArea, PositionalUIArea>> extends BaseInsertOptions<A> {
+    before?: never;
+    after?: never;
+    position?: never;
+}
+
+/**
+ * Insert at a specific position.
+ * @public
+ */
+export declare interface InsertAtPositionOptions<A extends Exclude<UIArea, PositionalUIArea> = Exclude<UIArea, PositionalUIArea>> extends BaseInsertOptions<A> {
+    /** Insert at 'start', 'end', or a specific index. Negative indexes count from end. */
+    position: 'start' | 'end' | number;
+    before?: never;
+    after?: never;
+}
+
+/**
+ * Insert before a matched component.
+ * @public
+ */
+export declare interface InsertBeforeOptions<A extends Exclude<UIArea, PositionalUIArea> = Exclude<UIArea, PositionalUIArea>> extends BaseInsertOptions<A> {
+    /** Insert before this component. */
+    before: ComponentMatcher;
+    after?: never;
+    position?: never;
+}
+
+/**
+ * Options for inserting a component into a UI area.
+ * Supports mutual exclusion: only one of `before`, `after`, or `position` can be specified.
+ * Positional areas (like canvas bar) require the `at` property to specify which slot.
+ *
+ * @public
+ */
+export declare type InsertComponentOptions<A extends UIArea = UIArea> = A extends PositionalUIArea ? PositionalInsertBeforeOptions<A> | PositionalInsertAfterOptions<A> | PositionalInsertAtPositionOptions<A> | PositionalInsertAppendOptions<A> : A extends Exclude<UIArea, PositionalUIArea> ? InsertBeforeOptions<A> | InsertAfterOptions<A> | InsertAtPositionOptions<A> | InsertAppendOptions<A> : never;
+
 /**
  * Represents the location for inserting an order component.
  *
@@ -4095,6 +4328,20 @@ export declare interface InputOptions<T, P = 'top' | 'left'> {
  */
 export declare type InsertOrderComponentLocation = 'before' | 'after' | 'replace' | 'asChild';
 
+/**
+ * Result of an insert operation.
+ *
+ * @public
+ */
+export declare interface InsertResult<A extends UIArea = UIArea> {
+    /** Whether at least one component was successfully inserted. False if target not found. */
+    inserted: boolean;
+    /** Number of components that were inserted. */
+    insertedCount: number;
+    /** The new order after the insert. */
+    order: OrderComponentFor<A>[];
+}
+
 /**
  * Represents the ID of an inspector bar component.
  *
@@ -4229,6 +4476,16 @@ export declare type IsEnabledFeatureContext = {
     engine: CreativeEngine_2;
 };
 
+/**
+ * Checks if a string is a glob pattern (contains `*`).
+ *
+ * @param str - The string to check
+ * @returns True if the string contains a wildcard
+ *
+ * @public
+ */
+export declare function isGlobPattern(str: string): str is GlobPattern;
+
 /**
  * Represents options for a library.
  *
@@ -4264,6 +4521,17 @@ declare type Logger_2 = (message: string, level: 'Warning' | 'Error') => void;
 
 export { LogLevel }
 
+/**
+ * Matches a value against a glob pattern.
+ *
+ * @param pattern - The glob pattern (e.g., 'ly.img.*', '*.separator')
+ * @param value - The value to match against
+ * @returns True if the value matches the pattern
+ *
+ * @public
+ */
+export declare function matchGlob(pattern: string, value: string): boolean;
+
 /**
  * Represents options for a media preview.
  *
@@ -4281,6 +4549,24 @@ export declare interface MediaPreviewOptions {
 
 export { MimeType_2 as MimeType }
 
+/**
+ * Result of a multi-area remove operation.
+ *
+ * @public
+ */
+export declare type MultiAreaRemoveResult = {
+    [K in UIArea]?: RemoveResult<K>;
+};
+
+/**
+ * Result of a multi-area update operation.
+ *
+ * @public
+ */
+export declare type MultiAreaUpdateResult = {
+    [K in UIArea]?: UpdateResult<K>;
+};
+
 /**
  * @public
  * Base interface for action buttons in the navigation bar.
@@ -4510,6 +4796,20 @@ export declare interface OrderComponent<I = ComponentId> extends ComponentPayloa
     key?: string;
 }
 
+/**
+ * Maps UI areas to their order component types.
+ *
+ * @public
+ */
+export declare type OrderComponentFor<A extends UIArea> = {
+    'ly.img.dock': DockOrderComponent;
+    'ly.img.inspector.bar': OrderComponent<InspectorBarComponentId>;
+    'ly.img.canvas.menu': CanvasMenuOrderComponent;
+    'ly.img.navigation.bar': NavigationBarOrderComponent;
+    'ly.img.canvas.bar': OrderComponent<CanvasBarComponentId>;
+    'ly.img.caption.panel': OrderComponent<CaptionPanelComponentId>;
+}[A];
+
 /**
  * Represents a matcher for order components.
  *
@@ -4534,16 +4834,24 @@ export declare interface OrderComponentWithChildren<I extends ComponentId, C = O
 }
 
 /**
- * Interface representing the context for ordering components.
- *
- * - `editMode`: The current edit mode.
+ * Context for ordering components.
+ * Contains editMode which is used by most UI areas.
  *
  * @public
  */
 export declare interface OrderContext {
-    editMode: EditMode;
+    editMode?: EditMode;
 }
 
+/**
+ * Maps a UI area to its appropriate order context type for public API usage.
+ * - Caption panel uses CaptionPanelOrderContext (adds view property)
+ * - All other areas use OrderContext (editMode only)
+ *
+ * @public
+ */
+export declare type OrderContextFor<A extends UIArea> = A extends 'ly.img.caption.panel' ? CaptionPanelOrderContext : OrderContext;
+
 /**
  * Represents the definition of a page format in the Creative Editor SDK.
  * This interface defines the width, height, unit, and optional fixed orientation for a page format.
@@ -4646,6 +4954,62 @@ declare type PanelStates<T extends PanelId> = {
  */
 export declare type PasteAction = () => void | Promise<void>;
 
+/**
+ * Insert after a matched component (positional areas).
+ * @public
+ */
+export declare interface PositionalInsertAfterOptions<A extends PositionalUIArea> extends BasePositionalInsertOptions<A> {
+    /** Insert after this component. */
+    after: ComponentMatcher;
+    before?: never;
+    position?: never;
+}
+
+/**
+ * Append to end (positional areas).
+ * @public
+ */
+export declare interface PositionalInsertAppendOptions<A extends PositionalUIArea> extends BasePositionalInsertOptions<A> {
+    before?: never;
+    after?: never;
+    position?: never;
+}
+
+/**
+ * Insert at a specific position (positional areas).
+ * @public
+ */
+export declare interface PositionalInsertAtPositionOptions<A extends PositionalUIArea> extends BasePositionalInsertOptions<A> {
+    /** Insert at 'start', 'end', or a specific index. Negative indexes count from end. */
+    position: 'start' | 'end' | number;
+    before?: never;
+    after?: never;
+}
+
+/**
+ * Insert before a matched component (positional areas).
+ * @public
+ */
+export declare interface PositionalInsertBeforeOptions<A extends PositionalUIArea> extends BasePositionalInsertOptions<A> {
+    /** Insert before this component. */
+    before: ComponentMatcher;
+    after?: never;
+    position?: never;
+}
+
+/**
+ * UI areas that are positional (require `at` to specify which slot).
+ * @public
+ */
+export declare type PositionalUIArea = 'ly.img.canvas.bar';
+
+/**
+ * Maps positional UI areas to their valid `at` values.
+ * Extend this type when adding new positional areas.
+ * @public
+ */
+export declare type PositionFor<A extends PositionalUIArea> = A extends 'ly.img.canvas.bar' ? 'top' | 'bottom' : never;
+
 export { PositionMode }
 
 /**
@@ -4774,6 +5138,18 @@ export declare interface RegisteredActions {
     'video.encode.checkSupport': VideoEncodeCheckSupportAction;
 }
 
+/**
+ * Result of a remove operation on a single area.
+ *
+ * @public
+ */
+export declare interface RemoveResult<A extends UIArea = UIArea> {
+    /** Number of components that were removed. */
+    removed: number;
+    /** The new order after the removal. */
+    order: OrderComponentFor<A>[];
+}
+
 /**
  * @public
  * Provides context for replacing asset library entries, including selected blocks and default entry IDs.
@@ -4867,13 +5243,14 @@ export declare type ScrollToPageAction = (options?: {
  *
  * The `SectionOptions` interface provides a set of properties that control the
  * behavior and appearance of a section. These options include settings for the
- * title and children.
+ * title, children, and scrollable behavior.
  *
  * @public
  */
 export declare interface SectionOptions {
     title?: string;
-    children?: () => void;
+    children?: (() => void) | ChildrenOrder;
+    scrollable?: boolean;
 }
 
 /**
@@ -4911,6 +5288,14 @@ export declare interface SelectValue {
     icon?: CustomIcon;
 }
 
+/**
+ * Options for setting component order.
+ * Single area only for type safety with area-specific component types.
+ *
+ * @public
+ */
+export declare type SetOrderOptions<A extends UIArea = UIArea> = AnyUILocationOptions<A>;
+
 export { SettingsBool }
 
 export { SettingsColor }
@@ -5129,6 +5514,46 @@ export { Typeface }
 
 export { TypefaceDefinition }
 
+/**
+ * Represents a UI area where components can be ordered.
+ *
+ * Uses the `ly.img.*` naming convention consistent with Feature IDs.
+ *
+ * @public
+ */
+export declare type UIArea = 'ly.img.dock' | 'ly.img.inspector.bar' | 'ly.img.canvas.menu' | 'ly.img.navigation.bar' | 'ly.img.canvas.bar' | 'ly.img.caption.panel';
+
+/**
+ * UI area-specific context - excludes base OrderContext properties (like editMode)
+ * that are read-only and derived from the engine.
+ *
+ * For 'ly.img.caption.panel': `\{ view?: 'create' | 'edit' | 'style' \}`
+ * For other areas: `\{\}` (nothing area-specific)
+ *
+ * @public
+ */
+export declare type UIAreaContext<A extends UIArea> = Omit<OrderContextFor<A>, keyof OrderContext>;
+
+/**
+ * Specifies which UI area(s) to target.
+ * Can be a single area, an array of areas, or a glob pattern.
+ *
+ * @public
+ */
+export declare type UIAreaSpecifier = UIArea | UIArea[] | GlobPattern;
+
+/**
+ * Location options for non-canvas-bar UI areas.
+ *
+ * @public
+ */
+export declare interface UILocationOptions<A extends UIArea = UIArea> {
+    /** The UI area to target. Cannot be 'ly.img.canvas.bar' - use CanvasBarLocationOptions instead. */
+    in: A extends 'ly.img.canvas.bar' ? never : A;
+    /** Optional context for conditional ordering. */
+    when?: OrderContextFor<A>;
+}
+
 /**
  * Represents the UI options for a single design unit type in the Creative Editor SDK.
  * This interface defines the bleed margin options for a single design unit.
@@ -5169,6 +5594,25 @@ export declare type UnknownTranslations = {
     [key: string]: string | {};
 };
 
+/**
+ * Result of an update operation on a single area.
+ *
+ * @public
+ */
+export declare interface UpdateResult<A extends UIArea = UIArea> {
+    /** Number of components that were updated. */
+    updated: number;
+    /** The new order after the update. */
+    order: OrderComponentFor<A>[];
+}
+
+/**
+ * Specifies an update either as a new ID, partial update, or updater function.
+ *
+ * @public
+ */
+export declare type UpdateSpec<A extends UIArea = UIArea> = ComponentIdFor<A> | Partial<OrderComponentFor<A>> | ((component: OrderComponentFor<A>) => Partial<OrderComponentFor<A>>);
+
 /**
  * Action function for uploading files to asset sources.
  *
@@ -5191,6 +5635,29 @@ declare interface UploadCallbackContext {
     group?: string;
 }
 
+/**
+ * Hook for reading and setting order context for a UI area.
+ *
+ * Components wrapped with `observer` will automatically re-render when the context changes.
+ *
+ * @param area - The UI area to get/set context for
+ * @returns Object with `context` and `setContext`
+ *
+ * @example
+ * ```tsx
+ * function MyCaptionStyleButton() {
+ *   const { context, setContext } = useOrderContext('ly.img.caption.panel');
+ *   return <button onClick={() => setContext({ view: 'style' })}>Styles</button>;
+ * }
+ * ```
+ *
+ * @public
+ */
+export declare function useOrderContext<A extends UIArea>(area: A): {
+    context: UIAreaContext<A> | undefined;
+    setContext: (ctx: Partial<UIAreaContext<A>>) => void;
+};
+
 /**
  * Specifies the configuration for the user interface of the Creative Editor SDK.
  *
@@ -5832,6 +6299,7 @@ export declare class UserInterfaceAPI {
      * consists of the edit mode (e.g. `Transform` or `Text`) right now. If no
      * context is given, the default order is set for the `Transform` edit mode.
      *
+     * @deprecated Use `setComponentOrder({ in: 'ly.img.dock' }, order)` instead.
      * @category UI Layout
      * @param dockOrder - Array of component IDs defining the dock order.
      * @param orderContext - Optional context specifying when this order applies.
@@ -5848,6 +6316,7 @@ export declare class UserInterfaceAPI {
      * If no context is given, the default order (with `Transform` edit mode) is
      * returned.
      *
+     * @deprecated Use `getComponentOrder({ in: 'ly.img.dock' })` instead.
      * @category UI Layout
      * @param orderContext - Optional context specifying which order to retrieve.
      * @returns Array of component configurations defining the dock order.
@@ -5864,6 +6333,7 @@ export declare class UserInterfaceAPI {
      *
      * The update API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `updateOrderComponent({ in: 'ly.img.dock', match }, update)` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to update.
      * @param update - New ID, partial properties, or updater function for the component.
@@ -5882,6 +6352,7 @@ export declare class UserInterfaceAPI {
      *
      * The remove API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `removeOrderComponent({ in: 'ly.img.dock', match })` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to remove.
      * @param orderContext - Optional context specifying which order to update.
@@ -5894,12 +6365,13 @@ export declare class UserInterfaceAPI {
     /**
      * Inserts a component into the render order of the dock area.
      *
-     * This method inserts a new dock order component before, after, or to replace a component matching
+     * This method inserts a new dock order component before or after a component matching
      * the provided matcher. The matcher can be a function or an object describing the component to match.
-     * The location can be 'before', 'after', or 'replace'.
+     * The location can be 'before' or 'after'.
      *
      * The insert API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `insertOrderComponent({ in: 'ly.img.dock', before/after }, component)` instead.
      * @category UI Layout
      * @param component - The component ID or configuration to insert.
      * @param matcher - Function or object to match the component to insert relative to.
@@ -5909,7 +6381,9 @@ export declare class UserInterfaceAPI {
      */
     insertDockOrderComponent(matcher: OrderComponentMatcher<OrderComponent<DockOrderComponentId>>, component: DockOrderComponentId | OrderComponent<DockOrderComponentId>, location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
         inserted: boolean;
-        order: DockOrderComponent[];
+        order: (OrderComponent<string> | {
+            id: string;
+        })[];
     };
     /**
      * Sets the rendering order of components in the inspector bar.
@@ -5922,6 +6396,7 @@ export declare class UserInterfaceAPI {
      * consists of the edit mode (e.g. `Transform` or `Text`) right now. If no
      * context is given, the default order is set for the `Transform` edit mode.
      *
+     * @deprecated Use `setComponentOrder({ in: 'ly.img.inspector.bar' }, order)` instead.
      * @category UI Layout
      * @param inspectorBarOrder - Array of component IDs defining the inspector bar order.
      * @param orderContext - Optional context specifying when this order applies.
@@ -5934,6 +6409,7 @@ export declare class UserInterfaceAPI {
      * registerComponent. Returns the order for the specified context, or
      * defaults to Transform mode if no context is provided.
      *
+     * @deprecated Use `getComponentOrder({ in: 'ly.img.inspector.bar' })` instead.
      * @category UI Layout
      * @param orderContext - Optional context specifying which order to retrieve.
      * @returns Array of component configurations defining the inspector bar order.
@@ -5950,6 +6426,7 @@ export declare class UserInterfaceAPI {
      *
      * The update API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `updateOrderComponent({ in: 'ly.img.inspector.bar', match }, update)` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to update.
      * @param update - New ID, partial properties, or updater function for the component.
@@ -5968,6 +6445,7 @@ export declare class UserInterfaceAPI {
      *
      * The remove API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `removeOrderComponent({ in: 'ly.img.inspector.bar', match })` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to remove.
      * @param orderContext - Optional context specifying which order to update.
@@ -5980,12 +6458,13 @@ export declare class UserInterfaceAPI {
     /**
      * Inserts a component into the render order of the inspector bar.
      *
-     * This method inserts a new inspector bar order component before, after, or to replace a component matching
+     * This method inserts a new inspector bar order component before or after a component matching
      * the provided matcher. The matcher can be a function or an object describing the component to match.
-     * The location can be 'before', 'after', or 'replace'.
+     * The location can be 'before' or 'after'.
      *
      * The insert API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `insertOrderComponent({ in: 'ly.img.inspector.bar', before/after }, component)` instead.
      * @category UI Layout
      * @param component - The component ID or configuration to insert.
      * @param matcher - Function or object to match the component to insert relative to.
@@ -5995,7 +6474,9 @@ export declare class UserInterfaceAPI {
      */
     insertInspectorBarOrderComponent(matcher: OrderComponentMatcher<OrderComponent<InspectorBarComponentId>>, component: InspectorBarComponentId | OrderComponent<InspectorBarComponentId>, location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
         inserted: boolean;
-        order: OrderComponent<InspectorBarComponentId>[];
+        order: (OrderComponent<string> | {
+            id: string;
+        })[];
     };
     /**
      * Sets the rendering order of components in the canvas menu.
@@ -6004,6 +6485,7 @@ export declare class UserInterfaceAPI {
      * registerComponent. Different orders can be set for different contexts
      * (e.g., Transform or Text edit modes). Defaults to Transform mode if no context is provided.
      *
+     * @deprecated Use `setComponentOrder({ in: 'ly.img.canvas.menu' }, order)` instead.
      * @category UI Layout
      * @param canvasMenuOrder - Array of component IDs defining the canvas menu order.
      * @param orderContext - Optional context specifying when this order applies.
@@ -6016,6 +6498,7 @@ export declare class UserInterfaceAPI {
      * registerComponent. Returns the order for the specified context, or
      * defaults to Transform mode if no context is provided.
      *
+     * @deprecated Use `getComponentOrder({ in: 'ly.img.canvas.menu' })` instead.
      * @category UI Layout
      * @param orderContext - Optional context specifying which order to retrieve.
      * @returns Array of component configurations defining the canvas menu order.
@@ -6032,6 +6515,7 @@ export declare class UserInterfaceAPI {
      *
      * The update API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `updateOrderComponent({ in: 'ly.img.canvas.menu', match }, update)` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to update.
      * @param update - New ID, partial properties, or updater function for the component.
@@ -6050,6 +6534,7 @@ export declare class UserInterfaceAPI {
      *
      * The remove API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `removeOrderComponent({ in: 'ly.img.canvas.menu', match })` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to remove.
      * @param orderContext - Optional context specifying which order to update.
@@ -6062,12 +6547,13 @@ export declare class UserInterfaceAPI {
     /**
      * Inserts a component into the render order of the canvas menu.
      *
-     * This method inserts a new canvas menu order component before, after, or to replace a component matching
+     * This method inserts a new canvas menu order component before or after a component matching
      * the provided matcher. The matcher can be a function or an object describing the component to match.
-     * The location can be 'before', 'after', or 'replace'.
+     * The location can be 'before' or 'after'.
      *
      * The insert API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `insertOrderComponent({ in: 'ly.img.canvas.menu', before/after }, component)` instead.
      * @category UI Layout
      * @param component - The component ID or configuration to insert.
      * @param matcher - Function or object to match the component to insert relative to.
@@ -6077,7 +6563,9 @@ export declare class UserInterfaceAPI {
      */
     insertCanvasMenuOrderComponent(matcher: OrderComponentMatcher<OrderComponent<CanvasMenuComponentId>>, component: CanvasMenuComponentId | CanvasMenuOrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
         inserted: boolean;
-        order: OrderComponent<CanvasMenuComponentId>[];
+        order: (OrderComponent<string> | {
+            id: string;
+        })[];
     };
     /**
      * Sets the rendering order of components in the navigation bar.
@@ -6086,6 +6574,7 @@ export declare class UserInterfaceAPI {
      * registerComponent. Different orders can be set for different contexts
      * (e.g., Transform or Text edit modes). Defaults to Transform mode if no context is provided.
      *
+     * @deprecated Use `setComponentOrder({ in: 'ly.img.navigation.bar' }, order)` instead.
      * @category UI Layout
      * @param navigationBarOrder - Array of component IDs defining the navigation bar order.
      * @param orderContext - Optional context specifying when this order applies.
@@ -6102,6 +6591,7 @@ export declare class UserInterfaceAPI {
      *
      * The update API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `updateOrderComponent({ in: 'ly.img.navigation.bar', match }, update)` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to update.
      * @param update - New ID, partial properties, or updater function for the component.
@@ -6120,6 +6610,7 @@ export declare class UserInterfaceAPI {
      *
      * The remove API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `removeOrderComponent({ in: 'ly.img.navigation.bar', match })` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to remove.
      * @param orderContext - Optional context specifying which order to update.
@@ -6132,12 +6623,13 @@ export declare class UserInterfaceAPI {
     /**
      * Inserts a component into the render order of the navigation bar.
      *
-     * This method inserts a new navigation bar order component before, after, or to replace a component matching
+     * This method inserts a new navigation bar order component before or after a component matching
      * the provided matcher. The matcher can be a function or an object describing the component to match.
-     * The location can be 'before', 'after', or 'replace'.
+     * The location can be 'before' or 'after'.
      *
      * The insert API can be used in different contexts (such as edit modes).
      *
+     * @deprecated Use `insertOrderComponent({ in: 'ly.img.navigation.bar', before/after }, component)` instead.
      * @category UI Layout
      * @param component - The component ID or configuration to insert.
      * @param matcher - Function or object to match the component to insert relative to.
@@ -6147,7 +6639,9 @@ export declare class UserInterfaceAPI {
      */
     insertNavigationBarOrderComponent(matcher: OrderComponentMatcher<OrderComponent<NavigationBarComponentId>>, component: NavigationBarComponentId | NavigationBarOrderComponent, location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
         inserted: boolean;
-        order: OrderComponent<NavigationBarComponentId>[];
+        order: (OrderComponent<string> | {
+            id: string;
+        })[];
     };
     /**
      * Gets the current rendering order of navigation bar components.
@@ -6156,6 +6650,7 @@ export declare class UserInterfaceAPI {
      * registerComponent. Returns the order for the specified context, or
      * defaults to Transform mode if no context is provided.
      *
+     * @deprecated Use `getComponentOrder({ in: 'ly.img.navigation.bar' })` instead.
      * @category UI Layout
      * @param orderContext - Optional context specifying which order to retrieve.
      * @returns Array of component configurations defining the navigation bar order.
@@ -6169,6 +6664,7 @@ export declare class UserInterfaceAPI {
      * of the canvas. Different orders can be set for different contexts
      * (e.g., Transform or Text edit modes). Defaults to Transform mode if no context is provided.
      *
+     * @deprecated Use `setComponentOrder({ in: 'ly.img.canvas.bar', at: position }, order)` instead.
      * @category UI Layout
      * @param canvasBarOrder - Array of component IDs defining the canvas bar order.
      * @param position - The canvas bar position ('top' or 'bottom').
@@ -6182,6 +6678,7 @@ export declare class UserInterfaceAPI {
      * registerComponent. Returns the order for the specified context, or
      * defaults to Transform mode if no context is provided.
      *
+     * @deprecated Use `getComponentOrder({ in: 'ly.img.canvas.bar', at: position })` instead.
      * @category UI Layout
      * @param position - The canvas bar position ('top' or 'bottom').
      * @param orderContext - Optional context specifying which order to retrieve.
@@ -6199,6 +6696,7 @@ export declare class UserInterfaceAPI {
      *
      * The update API can be used in different contexts (such as edit modes and bar positions).
      *
+     * @deprecated Use `updateOrderComponent({ in: 'ly.img.canvas.bar', at: position, match }, update)` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to update.
      * @param update - New ID, partial properties, or updater function for the component.
@@ -6218,6 +6716,7 @@ export declare class UserInterfaceAPI {
      *
      * The remove API can be used in different contexts (such as edit modes and bar positions).
      *
+     * @deprecated Use `removeOrderComponent({ in: 'ly.img.canvas.bar', at: position, match })` instead.
      * @category UI Layout
      * @param matcher - Function or object to match the component to remove.
      * @param position - The canvas bar position ('top' or 'bottom').
@@ -6231,12 +6730,13 @@ export declare class UserInterfaceAPI {
     /**
      * Inserts a component into the render order of the canvas bar.
      *
-     * This method inserts a new canvas bar order component before, after, or to replace a component matching
+     * This method inserts a new canvas bar order component before or after a component matching
      * the provided matcher. The matcher can be a function or an object describing the component to match.
-     * The location can be 'before', 'after', or 'replace'.
+     * The location can be 'before' or 'after'.
      *
      * The insert API can be used in different contexts (such as edit modes and bar positions).
      *
+     * @deprecated Use `insertOrderComponent({ in: 'ly.img.canvas.bar', at: position, before/after }, component)` instead.
      * @category UI Layout
      * @param component - The component ID or configuration to insert.
      * @param matcher - Function or object to match the component to insert relative to.
@@ -6247,8 +6747,247 @@ export declare class UserInterfaceAPI {
      */
     insertCanvasBarOrderComponent(matcher: OrderComponentMatcher<OrderComponent<CanvasBarComponentId>>, component: CanvasBarComponentId | OrderComponent<CanvasBarComponentId>, position: 'top' | 'bottom', location?: InsertOrderComponentLocation, orderContext?: OrderContext): {
         inserted: boolean;
-        order: OrderComponent<CanvasBarComponentId>[];
+        order: (OrderComponent<string> | {
+            id: string;
+        })[];
     };
+    /**
+     * Sets the rendering order of components in a UI area.
+     *
+     * This unified method replaces area-specific methods like `setDockOrder`,
+     * `setInspectorBarOrder`, etc. It provides a consistent API for all UI areas.
+     *
+     * @category Unified Component Order API
+     * @param options - Location options specifying which area to set. For canvas bar, requires `at` position.
+     * @param order - Array of component IDs or component objects defining the order.
+     *
+     * @example
+     * ```typescript
+     * // Set dock order
+     * cesdk.ui.setComponentOrder({ in: 'ly.img.dock' }, ['ly.img.spacer', 'my.button']);
+     *
+     * // Set canvas bar order (requires position)
+     * cesdk.ui.setComponentOrder(
+     *   { in: 'ly.img.canvas.bar', at: 'top' },
+     *   ['ly.img.settings.canvasBar']
+     * );
+     *
+     * // Set order with edit mode context
+     * cesdk.ui.setComponentOrder(
+     *   { in: 'ly.img.inspector.bar', when: { editMode: 'Text' } },
+     *   ['ly.img.text.typeFace.inspectorBar', 'ly.img.text.bold.inspectorBar']
+     * );
+     * ```
+     */
+    setComponentOrder<A extends UIArea>(options: SetOrderOptions<A>, order: ComponentSpec<A>[]): void;
+    /**
+     * Gets the current rendering order of components in a UI area.
+     *
+     * This unified method replaces area-specific methods like `getDockOrder`,
+     * `getInspectorBarOrder`, etc.
+     *
+     * @category Unified Component Order API
+     * @param options - Location options specifying which area to get. For canvas bar, requires `at` position.
+     * @returns Array of components in the specified area.
+     *
+     * @example
+     * ```typescript
+     * // Get dock order
+     * const dockOrder = cesdk.ui.getComponentOrder({ in: 'ly.img.dock' });
+     *
+     * // Get canvas bar order (requires position)
+     * const canvasBarTop = cesdk.ui.getComponentOrder({ in: 'ly.img.canvas.bar', at: 'top' });
+     *
+     * // Get order with edit mode context
+     * const cropOrder = cesdk.ui.getComponentOrder({
+     *   in: 'ly.img.inspector.bar',
+     *   when: { editMode: 'Crop' }
+     * });
+     * ```
+     */
+    getComponentOrder<A extends UIArea>(options: GetOrderOptions<A>): OrderComponentFor<A>[];
+    /**
+     * Updates components matching a criteria in one or more UI areas.
+     *
+     * This unified method replaces area-specific update methods. Supports glob
+     * patterns for both areas and component matching.
+     *
+     * **Canvas Bar Note:** For `ly.img.canvas.bar`, if `options.at` is omitted,
+     * the update applies to BOTH top and bottom bars and results are combined.
+     *
+     * @category Unified Component Order API
+     * @param options - Match options specifying where and what to update.
+     * @param update - New ID, partial properties, or updater function.
+     * @returns For single area: UpdateResult. For multi-area: MultiAreaUpdateResult.
+     *
+     * @example
+     * ```typescript
+     * // Update by exact ID
+     * cesdk.ui.updateOrderComponent(
+     *   { in: 'ly.img.dock', match: 'ly.img.separator' },
+     *   { key: 'my-separator' }
+     * );
+     *
+     * // Update by glob pattern
+     * cesdk.ui.updateOrderComponent(
+     *   { in: 'ly.img.dock', match: 'ly.img.*' },
+     *   { disabled: true }
+     * );
+     *
+     * // Update using function
+     * cesdk.ui.updateOrderComponent(
+     *   { in: 'ly.img.inspector.bar', match: 'first' },
+     *   (component) => ({ key: `${component.id}-modified` })
+     * );
+     *
+     * // Update across multiple areas
+     * const results = cesdk.ui.updateOrderComponent(
+     *   { in: '*', match: 'ly.img.separator' },
+     *   { key: 'global-sep' }
+     * );
+     * ```
+     */
+    updateOrderComponent<A extends UIAreaSpecifier>(options: ComponentMatchOptions<A>, update: UpdateSpec<UIArea>): A extends UIArea ? UpdateResult<A> : MultiAreaUpdateResult;
+    /**
+     * Removes components matching a criteria from one or more UI areas.
+     *
+     * This unified method replaces area-specific remove methods. Supports glob
+     * patterns for both areas and component matching.
+     *
+     * **Canvas Bar Note:** For `ly.img.canvas.bar`, if `options.at` is omitted,
+     * the removal applies to BOTH top and bottom bars and results are combined.
+     *
+     * @category Unified Component Order API
+     * @param options - Match options specifying where and what to remove.
+     * @returns For single area: RemoveResult. For multi-area: MultiAreaRemoveResult.
+     *
+     * @example
+     * ```typescript
+     * // Remove by exact ID
+     * cesdk.ui.removeOrderComponent({ in: 'ly.img.dock', match: 'ly.img.separator' });
+     *
+     * // Remove by position
+     * cesdk.ui.removeOrderComponent({ in: 'ly.img.inspector.bar', match: 'last' });
+     *
+     * // Remove by glob pattern
+     * cesdk.ui.removeOrderComponent({ in: 'ly.img.dock', match: 'ly.img.*' });
+     *
+     * // Remove from all areas
+     * const results = cesdk.ui.removeOrderComponent({
+     *   in: '*',
+     *   match: 'ly.img.separator'
+     * });
+     * ```
+     */
+    removeOrderComponent<A extends UIAreaSpecifier>(options: ComponentMatchOptions<A>): A extends UIArea ? RemoveResult<A> : MultiAreaRemoveResult;
+    /**
+     * Inserts one or more components into a UI area at a specified position.
+     *
+     * This unified method replaces area-specific insert methods. Supports
+     * inserting before, after, or at a specific index. When inserting multiple
+     * components, they are inserted in order at the specified position.
+     *
+     * **Canvas Bar Note:** For `ly.img.canvas.bar`, `options.at` is required
+     * and must specify either 'top' or 'bottom'.
+     *
+     * @category Unified Component Order API
+     * @param options - Insert options specifying where to insert.
+     * @param components - The component ID(s) or object(s) to insert. Can be a single component or an array.
+     * @returns InsertResult with success status, count, and new order.
+     *
+     * @example
+     * ```typescript
+     * // Append single component to end (default)
+     * cesdk.ui.insertOrderComponent({ in: 'ly.img.dock' }, 'my.button');
+     *
+     * // Insert multiple components at once
+     * cesdk.ui.insertOrderComponent(
+     *   { in: 'ly.img.dock', after: 'ly.img.spacer' },
+     *   ['my.button.1', 'my.button.2', 'my.button.3']
+     * );
+     *
+     * // Insert before a component
+     * cesdk.ui.insertOrderComponent(
+     *   { in: 'ly.img.dock', before: 'ly.img.separator' },
+     *   'my.button'
+     * );
+     *
+     * // Insert after a component
+     * cesdk.ui.insertOrderComponent(
+     *   { in: 'ly.img.inspector.bar', after: 'ly.img.fill.inspectorBar' },
+     *   'my.fill.tool'
+     * );
+     *
+     * // Insert at specific position
+     * cesdk.ui.insertOrderComponent(
+     *   { in: 'ly.img.dock', position: 'start' },
+     *   ['first.button', 'second.button']
+     * );
+     *
+     * // Insert at index
+     * cesdk.ui.insertOrderComponent(
+     *   { in: 'ly.img.dock', position: 2 },
+     *   'my.third.button'
+     * );
+     *
+     * // Insert at negative index (from end)
+     * cesdk.ui.insertOrderComponent(
+     *   { in: 'ly.img.dock', position: -1 },
+     *   'my.before.last.button'
+     * );
+     * ```
+     */
+    insertOrderComponent<A extends UIArea>(options: InsertComponentOptions<A>, components: ComponentSpec<A> | ComponentSpec<A>[]): InsertResult<A>;
+    /**
+     * Gets the active order context for a UI area.
+     *
+     * Returns the full context including both settable properties (like `view` for
+     * the caption panel) and engine-derived properties (like `editMode`).
+     *
+     * @category Unified Component Order API
+     * @param options - Location options specifying which area to get context for.
+     * @returns The full order context for the area, or undefined if no context has been set.
+     *
+     * @example
+     * ```typescript
+     * // Get caption panel context
+     * const context = cesdk.ui.getOrderContext({ in: 'ly.img.caption.panel' });
+     * // → { view: 'edit', editMode: 'Transform' } | undefined
+     *
+     * // Get inspector bar context (editMode only, derived from engine)
+     * const inspectorContext = cesdk.ui.getOrderContext({ in: 'ly.img.inspector.bar' });
+     * // → { editMode: 'Crop' } | undefined
+     * ```
+     */
+    getOrderContext<A extends UIArea>(options: {
+        in: A;
+    }): OrderContextFor<A> | undefined;
+    /**
+     * Sets the active order context for a UI area.
+     *
+     * Only accepts settable properties (excludes base OrderContext properties like
+     * `editMode` which are derived from the engine). For the caption panel, this
+     * means you can set the `view` property.
+     *
+     * @category Unified Component Order API
+     * @param options - Location options specifying which area to set context for.
+     * @param context - The context properties to set. Only settable properties are accepted.
+     *
+     * @example
+     * ```typescript
+     * // Set caption panel to style view
+     * cesdk.ui.setOrderContext(
+     *   { in: 'ly.img.caption.panel' },
+     *   { view: 'style' }
+     * );
+     *
+     * // Note: editMode cannot be set via this API - it's engine-derived
+     * // Use cesdk.engine.editor.setEditMode('Crop') instead
+     * ```
+     */
+    setOrderContext<A extends UIArea>(options: {
+        in: A;
+    }, context: UIAreaContext<A>): void;
     /**
      * Adds a new asset library entry for display in asset libraries.
      *