@cesdk/cesdk-js 1.10.0-preview.0 → 1.10.0

package/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="offscreencanvas" />
+
 /**
  * A11 Settings
  * @public
@@ -9,15 +11,9 @@ declare type A11y = {
     headingsHierarchyStart: 1 | 2 | 3 | 4 | 5 | 6;
 };
 
-/** @public */
-export declare class API {
-    asset: AssetAPI;
-    block: BlockAPI;
-    editor: EditorAPI;
-    event: EventAPI;
-    scene: SceneAPI;
-    variable: VariableAPI;
-}
+declare type ArbitraryString = string & {
+    arbitrary?: any;
+};
 
 /**
  * Generic asset information
@@ -123,8 +119,6 @@ export declare class AssetAPI {
      * @param assetId - The id of the asset to be removed.
      */
     removeAssetFromSource(sourceId: string, assetId: string): void;
-
-
     /**
      * Apply an asset result to the active scene.
      * The default behavior will instantiate a block and configure it according to the asset's properties.
@@ -152,6 +146,18 @@ export declare class AssetAPI {
      * @param block - The block to apply the asset result to.
      */
     defaultApplyAssetToBlock(assetResult: AssetResult, block: DesignBlockId): Promise<void>;
+    /**
+     * Register a callback to be called every time an asset source is added.
+     * @param callback - The function that is called whenever an asset source is added.
+     * @returns A method to unsubscribe.
+     */
+    onAssetSourceAdded: (callback: (sourceID: string) => void) => (() => void);
+    /**
+     * Register a callback to be called every time an asset source is removed.
+     * @param callback - The function that is called whenever an asset source is added.
+     * @returns A method to unsubscribe.
+     */
+    onAssetSourceRemoved: (callback: (sourceID: string) => void) => (() => void);
 
 }
 
@@ -197,7 +203,23 @@ declare interface AssetLibraryEntryData {
         group?: string;
         sourceId?: string;
     }) => string | undefined);
-    managed?: boolean;
+    /**
+     * If `true` an upload button will be shown and the uploaded file will be
+     * added to the source.
+     *
+     * If a function is used it will be called with the current asset source id.
+     *
+     * The asset source needs to support `addAsset`.
+     */
+    canAdd?: boolean | ((sourceId: string) => boolean);
+    /**
+     * If `true` the asset can be removed from the asset source.
+     *
+     * If a function is used it will be called with the current asset source id.
+     *
+     * The asset source needs to support `removeAsset`.
+     */
+    canRemove?: boolean | ((sourceId: string) => boolean);
 }
 
 /** @public */
@@ -367,14 +389,6 @@ export declare interface AssetSource {
         name: string;
         url?: string;
     };
-    /**
-     * Indicates if the asset shall be downloaded to handle the raw data instead
-     * of an URL reference. Do this if you do not want to depend on
-     * a service after adding the asset to the scene. If this is your own API
-     * with your own service, you do not need to set this and avoid downloading /
-     * re-uploading the assets.
-     */
-    downloadAssets?: (asset: AssetResult) => Promise<Blob>;
     /**
      * @returns the asset or undefined if no asset with the given id could be found
      */
@@ -383,6 +397,8 @@ export declare interface AssetSource {
      * Can the source add and remove assets dynamically? If `false`
      * methods like `addAsset` and `removeAsset` will throw an
      * error.
+     *
+     * @deprecated Will be removed in v1.11. Use `canAdd` and `canRemove` in the asset library configuration
      */
     canManageAssets?: boolean;
     /**
@@ -397,17 +413,14 @@ export declare interface AssetSource {
      */
     applyAssetToBlock?: (asset: AssetResult, block: DesignBlockId) => Promise<void>;
     /**
-     * Adds the given asset to this source. Throws an error if `canManageAssets`
-     * is `false`.
-     *
+     * Adds the given asset to this source. Throws an error if the asset source
+     * does not support adding assets.
      */
     addAsset?(asset: AssetDefinition): void;
     /**
      * Removes the given asset from this source.
-     *
-     * @returns true if asset was found and removed, and false otherwise
      */
-    removeAsset?(assetId: string): Promise<boolean>;
+    removeAsset?(assetId: string): void;
     /**
      * Generates a list of supported mime types for this source.
      *
@@ -436,14 +449,6 @@ declare interface AssetSource_2 {
 
     /** Return every available group */
     getGroups?: () => Promise<string[]>;
-    /**
-     * Indicates if the asset shall be downloaded to handle the raw data instead
-     * of an URL reference. Do this if you do not want to depend on
-     * a service after adding the asset to the scene. If this is your own API
-     * with your own service, you do not need to set this and avoid downloading /
-     * re-uploading the assets.
-     */
-    downloadAssets?: (asset: AssetResult_2) => Promise<Blob>;
     /** Credits for the source/api */
     credits?: {
         name: string;
@@ -659,9 +664,14 @@ export declare class BlockAPI {
     setName(id: DesignBlockId, name: string): void;
     /**
      * Get a block's name.
-     * @param id - The block to update.
+     * @param id - The block to query.
      */
     getName(id: DesignBlockId): string;
+    /**
+     * Get a block's UUID.
+     * @param id - The block to query.
+     */
+    getUUID(id: DesignBlockId): string;
     /**
      * Finds all blocks with the given name.
      * @param name - The name to search for.
@@ -759,6 +769,46 @@ export declare class BlockAPI {
      * @param mode - The y position mode: absolute, percent or undefined.
      */
     setPositionYMode(id: DesignBlockId, mode: PositionMode): void;
+    /**
+     * Update the block's always-on-top property. If true, this blocks's global sorting order is automatically
+     * adjusted to be higher than all other siblings
+     * without this property. If more than one block is set to be always-on-top, the child order decides which is on top.
+     *
+     * @param id - the block to update.
+     * @param enabled - whether the block shall be always-on-top.
+     */
+    setAlwaysOnTop(id: DesignBlockId, enabled: boolean): void;
+    /**
+     * Query a block's always-on-top property.
+     *
+     * @param id - the block to query.
+     * @returns true if the block is set to be always-on-top, false otherwise.
+     */
+    isAlwaysOnTop(id: DesignBlockId): boolean;
+    /**
+     * Updates the sorting order of this block and all of its manually created siblings
+     * so that the given block has the highest sorting order.
+     * @param id - The id of the block to be given the highest sorting order among its siblings.
+     */
+    bringToFront(id: DesignBlockId): void;
+    /**
+     * Updates the sorting order of this block and all of its manually created siblings
+     * so that the given block has the lowest sorting order.
+     * @param id - The id of the block to be given the lowest sorting order among its siblings.
+     */
+    sendToBack(id: DesignBlockId): void;
+    /**
+     * Updates the sorting order of this block and all of its superjacent siblings
+     * so that the given block has a higher sorting order than the next superjacent sibling.
+     * @param id - The id of the block to be given a higher sorting than the next superjacent sibling.
+     */
+    bringForward(id: DesignBlockId): void;
+    /**
+     * Updates the sorting order of this block and all of its manually created and subjacent siblings
+     * so that the given block will have a lower sorting order than the next subjacent sibling.
+     * @param id - The id of the block to be given a lower sorting order than the next subjacent sibling.
+     */
+    sendBackward(id: DesignBlockId): void;
     /**
      * Query a block's rotation in radians.
      * @param id - The block to query.
@@ -825,12 +875,6 @@ export declare class BlockAPI {
      * @returns The current mode for the height: absolute, percent or auto.
      */
     getHeightMode(id: DesignBlockId): SizeMode;
-    /**
-     * Query a block's content fill mode.
-     * @param id - The block to query.
-     * @returns The current mode: crop, cover or contain.
-     */
-    getContentFillMode(id: DesignBlockId): ContentFillMode;
     /**
      * Update a block's width.
      * @param id - The block to update.
@@ -855,12 +899,6 @@ export declare class BlockAPI {
      * @param mode - The height mode: absolute, percent or auto.
      */
     setHeightMode(id: DesignBlockId, mode: SizeMode): void;
-    /**
-     * Set a block's content fill mode.
-     * @param id - The block to update.
-     * @param mode - The content fill mode mode: crop, cover or contain.
-     */
-    setContentFillMode(id: DesignBlockId, mode: ContentFillMode): void;
     /**
      * Get a block's layout position on the x-axis. The position is only available after an
      * internal update loop which only occurs if the `features/implicitUpdatesEnabled` setting is set.
@@ -889,6 +927,18 @@ export declare class BlockAPI {
      * @returns The layout height.
      */
     getFrameHeight(id: DesignBlockId): number;
+    /**
+     * Set a block's content fill mode.
+     * @param id - The block to update.
+     * @param mode - The content fill mode mode: crop, cover or contain.
+     */
+    setContentFillMode(id: DesignBlockId, mode: ContentFillMode): void;
+    /**
+     * Query a block's content fill mode.
+     * @param id - The block to query.
+     * @returns The current mode: crop, cover or contain.
+     */
+    getContentFillMode(id: DesignBlockId): ContentFillMode;
     /**
      * Duplicates a block including its children.
      * @param id - The block to duplicate.
@@ -967,6 +1017,12 @@ export declare class BlockAPI {
      * @returns float The height of the axis-aligned bounding box.
      */
     getGlobalBoundingBoxHeight(id: DesignBlockId): number;
+    /**
+     * Get the position and size of the axis-aligned bounding box for the given blocks in screen space.
+     * @param ids - The block to query.
+     * @returns The position and size of the bounding box.
+     */
+    getScreenSpaceBoundingBoxXYWH(ids: DesignBlockId[]): XYWH;
     /**
      * Scales the block and all of its children proportionally around the specified
      * relative anchor point.
@@ -1277,6 +1333,7 @@ export declare class BlockAPI {
      * Query if the given block has fill color properties.
      * @param id - The block to query.
      * @returns true, if the block has fill color properties.
+     * @deprecated Query the fills type using getFill() and getType() instead.
      */
     hasFillColor(id: DesignBlockId): boolean;
     /**
@@ -1287,24 +1344,28 @@ export declare class BlockAPI {
      * @param g - The green color component in the range of 0 to 1.
      * @param b - The blue color component in the range of 0 to 1.
      * @param a - The alpha color component in the range of 0 to 1.
+     * @deprecated Use setFillSolidColor() instead.
      */
     setFillColorRGBA(id: DesignBlockId, r: number, g: number, b: number, a?: number): void;
     /**
      * Get the fill color of the given design block.
      * @param id - The block whose fill color should be queried.
      * @returns The fill color.
+     * @deprecated Use getFillSolidColor() instead.
      */
     getFillColorRGBA(id: DesignBlockId): RGBA;
     /**
      * Enable or disable the fill of the given design block.
      * @param id - The block whose fill should be enabled or disabled.
      * @param enabled - If true, the fill will be enabled.
+     * @deprecated Use setFillEnabled() instead.
      */
     setFillColorEnabled(id: DesignBlockId, enabled: boolean): void;
     /**
      * Query if the fill of the given design block is enabled.
      * @param id - The block whose fill state should be queried.
      * @returns True, if fill is enabled.
+     * @deprecated Use isFillEnabled() instead."
      */
     isFillColorEnabled(id: DesignBlockId): boolean;
     /**
@@ -1699,12 +1760,14 @@ export declare class BlockAPI {
      * @param id - The block whose fill type should be set.
      * @param type - The fill type to set.
      * @returns An empty result on success, an error otherwise.
+     * @deprecated Use `createFill`, e.g., with type 'color' and then apply the fill block with `setFill` to the block instead.  If the block has a fill, it should be removed with `getFill` and `destroy`.
      */
     setFillType(id: DesignBlockId, fillType: FillType): void;
     /**
      * Get the fill type of the given design block.
      * @param id - The block whose fill type should be queried.
      * @returns The block's fill type or an error.
+     * @deprecated Use `getEnum(id, 'fill/type')` instead.
      */
     getFillType(id: DesignBlockId): FillType;
     /**
@@ -1728,12 +1791,14 @@ export declare class BlockAPI {
      * @param id - The block whose gradient type should be set.
      * @param type - The gradient type.
      * @returns An empty result on success, an error otherwise.
+     * @deprecated Use `createFill`, e.g., with '//ly.img.ubq/fill/gradient/linear' and then apply the fill block with `setFill` to the block instead. If the block has a fill, it should be removed with `getFill` and `destroy`.
      */
     setFillGradientType(id: DesignBlockId, gradientType: GradientType): void;
     /**
      * Get the gradient type of the given design block.
      * @param id - The block whose gradient type should be queried.
      * @returns The gradient type.
+     * @deprecated Use `getEnum(id, 'fill/gradient/type')` instead.
      */
     getFillGradientType(id: DesignBlockId): GradientType;
     /**
@@ -1745,6 +1810,7 @@ export declare class BlockAPI {
      * @param b - The blue color component in the range of 0 to 1.
      * @param a - The alpha color component in the range of 0 to 1.
      * @returns An empty result on success, an error otherwise.
+     * @deprecated Removed without a direct replacement. Use `block.setFloat(fill, keypath, value)` with key paths 'fill/gradient/linear/startPointX/Y', 'fill/gradient/radial/centerPointX/Y', and 'fill/gradient/conical/centerPointX/Y' to move the control points.
      */
     addFillGradientColorStop(id: DesignBlockId, stop: number, r: number, g: number, b: number, a?: number): void;
     /**
@@ -1752,12 +1818,14 @@ export declare class BlockAPI {
      * @param id - The block from which to remove the gradient color stop.
      * @param stop - The stop's position.
      * @returns An empty result on success, an error otherwise.
+     * @deprecated Removed without a direct replacement. Use `block.setFloat(fill, keypath, value)` with key paths 'fill/gradient/linear/startPointX/Y', 'fill/gradient/radial/centerPointX/Y', and 'fill/gradient/conical/centerPointX/Y' to move the control points.
      */
     removeFillGradientColorStop(id: DesignBlockId, stop: number): void;
     /**
      * Get the gradient fill color stops of the given design block.
      * @param id - The block whose gradient color stop should be queried.
      * @returns All of the design block's gradient color stops.
+     * @deprecated Removed without a direct replacement. Use `block.getFloat(fill, keypath)` with key paths 'fill/gradient/linear/startPointX/Y', 'fill/gradient/radial/centerPointX/Y', and 'fill/gradient/conical/centerPointX/Y' instead.
      */
     getFillGradientColorStops(id: DesignBlockId): GradientstopRGBA[];
     /**
@@ -1765,6 +1833,7 @@ export declare class BlockAPI {
      * @param id - The block whose gradient color stop should be set.
      * @param stops - The gradient color stops to set.
      * @returns An empty result on success, an error otherwise.
+     * @deprecated Removed without a direct replacement. Use `block.setFloat(fill, keypath, value)` with key paths 'fill/gradient/linear/startPointX/Y', 'fill/gradient/radial/centerPointX/Y', and 'fill/gradient/conical/centerPointX/Y' to move the control points.
      */
     setFillGradientColorStops(id: DesignBlockId, stops: GradientstopRGBA[]): void;
     /**
@@ -1775,6 +1844,7 @@ export declare class BlockAPI {
      * @param x - The horizontal component of the control point.
      * @param y - The vertical component of the control point.
      * @returns true if the control point was set, an error otherwise.
+     * @deprecated Use, e.g., `block.setFloat(fill, 'fill/gradient/linear/startPointX', value)` and `startPointY` instead.
      */
     setFillGradientControlPoint(id: DesignBlockId, gradientControlPointType: GradientControlPointType, x: number, y: number): boolean;
     /**
@@ -1782,6 +1852,7 @@ export declare class BlockAPI {
      * @param id - The block whose gradient control point should be queried.
      * @param gradientControlPointType - The type of control point.
      * @returns The horizontal component of the control point, an error otherwise.
+     * @deprecated Use `block.getFloat(fill, keypath)` with key paths 'fill/gradient/linear/startPointX', 'fill/gradient/radial/centerPointX', and 'fill/gradient/conical/centerPointX' instead.
      */
     getFillGradientControlPointX(id: DesignBlockId, gradientControlPointType: GradientControlPointType): number;
     /**
@@ -1789,6 +1860,7 @@ export declare class BlockAPI {
      * @param id - The block whose gradient control point should be queried.
      * @param gradientControlPointType - The type of control point.
      * @returns The vertical component of the control point, an error otherwise.
+     * @deprecated Use `block.setFloat(fill, keypath, value)` with key paths 'fill/gradient/linear/startPointY', 'fill/gradient/radial/centerPointY', and 'fill/gradient/conical/centerPointY' instead.
      */
     getFillGradientControlPointY(id: DesignBlockId, gradientControlPointType: GradientControlPointType): number;
     /**
@@ -1797,6 +1869,7 @@ export declare class BlockAPI {
      * @param id - The block whose gradient radius should be set.
      * @param radius - The gradient's radius.
      * @returns true if the control point was set, an error otherwise.
+     * @deprecated Use, e.g., `block.setFloat(fill, 'fill/gradient/radial/radius', value)` instead.
      */
     setFillGradientRadius(id: DesignBlockId, radius: number): boolean;
     /**
@@ -1804,6 +1877,7 @@ export declare class BlockAPI {
      * Note that Not all gradients have a radius.
      * @param id - The block whose gradient radius should be queried.
      * @returns the gradient's radius, an error otherwise.
+     * @deprecated Use, e.g., `block.getFloat(fill, 'fill/gradient/radial/radius')` instead.
      */
     getFillGradientRadius(id: DesignBlockId): number;
     /**
@@ -1822,8 +1896,39 @@ export declare class BlockAPI {
      * Query if the given block shows placeholder content.
      * @param id - The block to query.
      * @returns true, if the block shows placeholder content.
+     * @deprecated Use placeholder controls functions.
      */
     showsPlaceholderContent(id: DesignBlockId): boolean;
+    /**
+     * Checks whether the block supports placeholder controls.
+     * @param block - The block to query.
+     * @returns True, if the block supports placeholder controls.
+     */
+    hasPlaceholderControls(id: DesignBlockId): boolean;
+    /**
+     * Enable or disable the visibility of the placeholder overlay pattern for a block.
+     * @param block - The block whose placeholder overlay should be enabled or disabled.
+     * @param enabled - Whether the placeholder overlay should be shown or not.
+     * @returns An empty result on success, an error otherwise.
+     */
+    setPlaceholderControlsOverlayEnabled(id: DesignBlockId, enabled: boolean): void;
+    /**
+     * Query whether the placeholder overlay pattern for a block is shown.
+     * @param block - The block whose placeholder overlay visibility state should be queried.
+     * @returns An error if the block was invalid, otherwise the visibility state of the block's placeholder overlay pattern.
+     */
+    isPlaceholderControlsOverlayEnabled(id: DesignBlockId): boolean;
+    /** Enable or disable the visibility of the placeholder button for a block.
+     * @param block - The block whose placeholder button should be shown or not.
+     * @param enabled - Whether the placeholder button should be shown or not.
+     * @returns An empty result on success, an error otherwise.
+     */
+    setPlaceholderControlsButtonEnabled(id: DesignBlockId, enabled: boolean): void;
+    /** Query whether the placeholder button for a block is shown.
+     * @param block - The block whose placeholder button visibility state should be queried.
+     * @returns An error if the block was invalid, otherwise
+     */
+    isPlaceholderControlsButtonEnabled(id: DesignBlockId): boolean;
     /**
      * Set a metadata value of a block identified by a key.
      * If the key does not exist, yet, it will be added.
@@ -1966,15 +2071,15 @@ export declare class BlockAPI {
      */
     getTotalSceneDuration(scene: DesignBlockId): number;
     /**
-     * Set whether the block should be during active playback.
+     * Set whether the block should be playing during active playback.
      * @param id - The block that should be updated.
      * @param enabled - Whether the block should be playing its contents.
      */
     setPlaying(id: DesignBlockId, enabled: boolean): void;
     /**
-     * Returns whether the block is currently during active playback.
+     * Returns whether the block is playing during active playback.
      * @param id - The block to query.
-     * @returns whether the block is during playback.
+     * @returns whether the block is playing during playback.
      */
     isPlaying(id: DesignBlockId): boolean;
     /**
@@ -2018,7 +2123,7 @@ export declare class BlockAPI {
      */
     hasPlaybackControl(id: DesignBlockId): boolean;
     /**
-     * Set whether the block should start from the beginning again or stop.
+     * Set whether the block should restart from the beginning again or stop.
      * @param block - The block or video fill to update.
      * @param looping - Whether the block should loop to the beginning or stop.
      */
@@ -2118,6 +2223,41 @@ declare type Callbacks_2 = _EngineConfigTypes.Callbacks & {
     onUnsupportedBrowser?: () => void;
 };
 
+declare type CameraSettings = {
+    /** Horizontal resolution in physical pixels */
+    width: number;
+    /** Vertical resolution in physical pixels */
+    height: number;
+    /** Physical pixels per CSS pixel */
+    pixelRatio: number;
+};
+
+/**
+ * A Channel represents a reactive data source consisting of three elements:
+ *
+ * * A `subscribe` method to register a callback for values coming from the
+ *   data source. Calling this method returns an `unsubscribe` method.
+ * * An (optional) `update` method to update the data source
+ * * An (optional) synchronous `value` method that can be used to retrieve
+ *   the current value.
+ * @public
+ */
+declare interface Channel<Out, In = Out> {
+    subscribe: Source<Out>;
+    update?: (v: In) => void;
+    value?: () => Out;
+}
+
+/**
+ * A {@link Channel} that is guaranteed to have a `value` method
+ * @public
+ */
+declare interface ChannelSync<Out, In = Out> extends Channel<Out, In> {
+    subscribe: Source<Out>;
+    update?: (v: In) => void;
+    value: () => Out;
+}
+
 /**
  * All components between 0 and 1
  * @public
@@ -2194,7 +2334,51 @@ declare type Core = {
  */
 declare class CreativeEditorSDK {
     #private;
-    engine: API;
+    engine: CreativeEngine;
+    /**
+     * Convenience function that registers a set of asset sources containing our
+     * example assets. These are
+     * - `'ly.img.image'` - Sample images
+     * - `'ly.img.sticker'` - Various stickers
+     * - `'ly.img.vectorpath'` - Shapes and arrows
+     * - `'ly.img.filter.lut'` - LUT effects of various kinds.
+     * - `'ly.img.filter.duotone'` - LUT effects of various kinds.
+     *
+     * These assets are parsed from the IMG.LY CDN at \{\{base_url\}\}/<id>/content.json, where
+     * `base_url` defaults to 'https://cdn.img.ly/assets/v1'.
+     * Each source is created via `addLocalSource` and populated with the parsed assets. To modify the available
+     * assets, you may either exclude certain IDs via `excludeAssetSourceIds` or alter the sources after creation.
+     *
+     * @param baseURL - The source of the asset definitions, must be absolute. Defaults to `'https://cdn.img.ly/assets/v1'`.
+     * @param excludeAssetSourceIds - A list of IDs, that will be ignored during load.
+     */
+    addDefaultAssetSources({ baseURL, excludeAssetSourceIds }?: {
+        baseURL?: string;
+        excludeAssetSourceIds?: DefaultAssetSourceId[];
+    }): Promise<void>;
+    /**
+     * Convenience function that registers a set of asset sources containing our
+     * example assets. These are
+     * - `'ly.img.image'` - Sample images
+     * - `'ly.img.sticker'` - Various stickers
+     * - `'ly.img.vectorpath'` - Shapes and arrows
+     * - `'ly.img.filter.lut'` - LUT effects of various kinds.
+     * - `'ly.img.filter.duotone'` - LUT effects of various kinds.
+     *
+     * These assets are parsed from the IMG.LY CDN at \{\{base_url\}\}/<id>/content.json, where
+     * `base_url` defaults to 'https://cdn.img.ly/assets/v1'.
+     * Each source is created via `addLocalSource` and populated with the parsed assets. To modify the available
+     * assets, you may either exclude certain IDs via `excludeAssetSourceIds` or alter the sources after creation.
+     *
+     * @param baseURL - The source of the asset definitions, must be absolute. Defaults to `'https://cdn.img.ly/assets/v1'`.
+     * @param excludeAssetSourceIds - A list of IDs, that will be ignored during load.
+     * @param sceneMode - if 'Video' video specific demo asset sources will be loaded as well.
+     */
+    addDemoAssetSources({ excludeAssetSourceIds, sceneMode }?: {
+        baseURL?: string;
+        excludeAssetSourceIds?: DemoAssetSourceId[];
+        sceneMode?: SceneMode;
+    }): Promise<void>;
     /**
      * Exports one or multiple page(s) as an file in the given mimeType
      *
@@ -2286,6 +2470,85 @@ declare class CreativeEditorSDK {
 }
 export default CreativeEditorSDK;
 
+/**
+ * A headless implementation that just initializes & exposes the Document API
+ *
+ * @public
+ */
+export declare class CreativeEngine {
+    #private;
+    asset: AssetAPI;
+    block: BlockAPI;
+    editor: EditorAPI;
+    event: EventAPI;
+    scene: SceneAPI;
+    variable: VariableAPI;
+
+
+    get element(): HTMLCreativeEngineCanvasElement | undefined;
+    /**
+     * Dispose the engine.
+     */
+    dispose(): void;
+    /**
+     * Initialize a `CreativeEngine` using the given `canvas` element and an optional config.
+     * @param config - An optional configuration object.
+     * @returns An engine instance.
+     */
+    static init<C extends Partial<_EngineConfiguration>>(config?: C): Promise<CreativeEngine & (C extends {
+        readonly canvas: any;
+    } ? {
+        readonly element: undefined;
+    } : {
+        readonly element: HTMLCreativeEngineCanvasElement;
+    })>;
+    /**
+     * Convenience function that registers a set of asset sources containing our
+     * default assets. These are
+     *
+     * - `'ly.img.sticker'` - Various stickers
+     * - `'ly.img.vectorpath'` - Shapes and arrows
+     * - `'ly.img.filter.lut'` - LUT effects of various kinds.
+     * - `'ly.img.filter.duotone'` - LUT effects of various kinds.
+     *
+     * These assets are parsed from the IMG.LY CDN at \{\{base_url\}\}/<id>/content.json, where
+     * `base_url` defaults to 'https://cdn.img.ly/assets/v1'.
+     * Each source is created via `addLocalSource` and populated with the parsed assets. To modify the available
+     * assets, you may either exclude certain IDs via `excludeAssetSourceIds` or alter the sources after creation.
+     *
+     * @param baseURL - The source of the asset definitions, must be absolute. Defaults to `'https://cdn.img.ly/assets/v1'`.
+     * @param excludeAssetSourceIds - A list of IDs, that will be ignored during load.
+     */
+    addDefaultAssetSources({ baseURL, excludeAssetSourceIds }?: {
+        baseURL?: string;
+        excludeAssetSourceIds?: DefaultAssetSourceId[];
+    }): Promise<void>;
+    /**
+     * Convenience function that registers a set of demo asset sources containing our
+     * example assets. These are not to meant to be used in your production code.
+     *
+     * These are
+     *
+     * - `'ly.img.image'` - Sample images
+     * - `'ly.img.image.upload'` - Demo source to upload image assets
+     * - `'ly.img.audio'` - Sample audios
+     * - `'ly.img.audio.upload'` - Demo source to upload audio assets
+     * - `'ly.img.video'` - Sample audios
+     * - `'ly.img.video.upload'` - Demo source to upload video assets
+     *
+     * @param excludeAssetSourceIds - A list of IDs, that will be ignored during load.
+     * @param sceneMode - if 'Video' video specific demo asset sources will be loaded as well (default 'Design')
+     * @param withUploadAssetSources - if 'true' asset sources for uploads are added (default false)
+     */
+    addDemoAssetSources({ excludeAssetSourceIds, sceneMode, withUploadAssetSources }?: {
+        excludeAssetSourceIds?: DemoAssetSourceId[];
+        sceneMode?: SceneMode;
+        withUploadAssetSources?: boolean;
+    }): Promise<void>;
+
+
+}
+
 /** @public */
 export declare type _DeepOptional<T, K extends keyof T> = Pick<_DeepPartial<T>, K> & Omit<T, K>;
 
@@ -2297,6 +2560,16 @@ export declare type _DeepPartial<T> = {
     [P in keyof T]?: _DeepPartial<T[P]>;
 };
 
+/**
+ * @public
+ */
+declare type DefaultAssetSourceId = 'ly.img.sticker' | 'ly.img.vectorpath' | 'ly.img.filter.lut' | 'ly.img.filter.duotone';
+
+/**
+ * @public
+ */
+declare type DemoAssetSourceId = 'ly.img.image.upload' | 'ly.img.video.upload' | 'ly.img.audio.upload' | 'ly.img.image' | 'ly.img.video' | 'ly.img.audio';
+
 /**
  * A numerical identifier for a design block
  * @public
@@ -2446,13 +2719,13 @@ export declare class EditorAPI {
      * @param value - The value to set.
      * @throws An error, if the keypath is invalid.
      */
-    setSettingBool(keypath: string, value: boolean): void;
+    setSettingBool(keypath: SettingsBool, value: boolean): void;
     /**
      * Get a boolean setting.
      * @param keypath - The settings keypath, e.g. `doubleClickToCropEnabled`
      * @throws An error, if the keypath is invalid.
      */
-    getSettingBool(keypath: string): boolean;
+    getSettingBool(keypath: SettingsBool): boolean;
     /**
      * Set an integer setting.
      * @param keypath - The settings keypath.
@@ -2472,26 +2745,26 @@ export declare class EditorAPI {
      * @param value - The value to set.
      * @throws An error, if the keypath is invalid.
      */
-    setSettingFloat(keypath: string, value: number): void;
+    setSettingFloat(keypath: SettingsFloat, value: number): void;
     /**
      * Get a float setting.
      * @param keypath - The settings keypath, e.g. `positionSnappingThreshold`
      * @throws An error, if the keypath is invalid.
      */
-    getSettingFloat(keypath: string): number;
+    getSettingFloat(keypath: SettingsFloat): number;
     /**
      * Set a string setting.
      * @param keypath - The settings keypath, e.g. `license`
      * @param value - The value to set.
      * @throws An error, if the keypath is invalid.
      */
-    setSettingString(keypath: string, value: string): void;
+    setSettingString(keypath: SettingsString, value: string): void;
     /**
      * Get a string setting.
      * @param keypath - The settings keypath, e.g. `license`
      * @throws An error, if the keypath is invalid.
      */
-    getSettingString(keypath: string): string;
+    getSettingString(keypath: SettingsString): string;
     /**
      * Set a color setting.
      * @param keypath - The settings keypath, e.g. `highlightColor`.
@@ -2500,25 +2773,25 @@ export declare class EditorAPI {
      * @param b - The blue color component in the range of 0 to 1.
      * @param a - The alpha color component in the range of 0 to 1.
      */
-    setSettingColorRGBA(keypath: string, r: number, g: number, b: number, a?: number): void;
+    setSettingColorRGBA(keypath: SettingsColorRGBA, r: number, g: number, b: number, a?: number): void;
     /**
      * Get a color setting.
      * @param keypath - The settings keypath, e.g. `highlightColor`.
      * @returns A tuple of channels red, green, blue and alpha in the range of 0 to 1.
      */
-    getSettingColorRGBA(keypath: string): RGBA;
+    getSettingColorRGBA(keypath: SettingsColorRGBA): RGBA;
     /**
      * Set an enum setting.
      * @param keypath - The settings keypath, e.g. `role`.
      * @param value - The enum value as string.
      */
-    setSettingEnum(keypath: string, value: string): void;
+    setSettingEnum<T extends keyof SettingsEnum>(keypath: T, value: SettingsEnum[T]): void;
     /**
      * Get an enum setting.
      * @param keypath - The settings keypath, e.g. `role`.
      * @returns The value as string.
      */
-    getSettingEnum(keypath: string): string;
+    getSettingEnum<T extends keyof SettingsEnum>(keypath: T): SettingsEnum[T];
     /**
      * Get the currently available memory in bytes.
      * @returns The currently available memory in bytes.
@@ -2611,7 +2884,6 @@ declare namespace _EngineConfigTypes {
         PageFormatDefinition,
         TemplateDefinition,
         TypefaceDefinition,
-        ImageDefinition,
         Presets,
         Variables,
         Core,
@@ -2629,6 +2901,9 @@ export declare interface _EngineConfiguration {
     license?: string;
     role: RoleString;
     featureFlags?: Record<string, string | boolean>;
+    /**
+     * @deprecated Extensions have been superseded by AssetSources and should no longer be used.
+     */
     extensions: _EngineConfigTypes.Extensions;
     core: _EngineConfigTypes.Core;
     scene: _EngineConfigTypes.Scene;
@@ -2825,6 +3100,12 @@ export declare type GradientType = 'Linear' | 'Radial' | 'Conical';
  */
 declare type Groups = string[];
 
+/**
+ * Will be called by a stream whenever a new value is available.
+ * @public
+ */
+declare type Handler<T> = (v: T) => void;
+
 /**
  * A hexadecimal color value (RGB or RGBA) that starts with a '#'
  * @example #6686FF or #6686FFFF
@@ -2838,6 +3119,33 @@ declare type HexColorString = string;
  */
 export declare type HistoryId = number;
 
+/**
+ * A wrapper around a plain canvas
+ *
+ * The idea is to shield the user from the weird semantics of changing width
+ * and height of a canvas by making this a opaque block element instead and
+ * managing the internal render resolution of the canvas dynamically
+ *
+ * @public
+ */
+export declare interface HTMLCreativeEngineCanvasElement extends HTMLElement {
+
+
+    /**
+     * Clear the canvas
+     *
+     * This is useful when mounting the canvas into a new position in the DOM.
+     * If the canvas is not cleared, it will appear in the new DOM position, with
+     * its contents stretched to the new size. It will re-render correctly during
+     * the next animation frame, but for a brief moment the canvas contents can
+     * flash distorted.
+     *
+     * Call `clear()` before mounting into the DOM to avoid this. This will cause
+     * the canvas to be cleared until rendering the next frame.
+     */
+    clear(): void;
+}
+
 /**
  * I18n Settings
  * Note: this will append keys and not override keys
@@ -2845,17 +3153,6 @@ export declare type HistoryId = number;
  */
 declare type I18n = Record<string, Translations>;
 
-/** @public */
-declare type ImageDefinition = Preset & {
-    imageURL: string;
-    thumbnailURL?: string;
-    width: number;
-    height: number;
-    levelOfDetail?: {
-        [lod: number]: string;
-    };
-};
-
 /**
  * e.g. `en`, `de`, etc.
  * @public
@@ -2928,8 +3225,6 @@ declare type PageFormatDefinition = Preset & {
     width: number;
     height: number;
     unit: DesignUnit;
-    dpi?: number;
-    bleedMargin?: number;
     fixedOrientation?: boolean;
 };
 
@@ -2965,9 +3260,6 @@ declare type Presets = {
     typefaces?: {
         [id: string]: TypefaceDefinition;
     };
-    images?: {
-        [id: string]: ImageDefinition;
-    };
     pageFormats?: {
         [id: string]: PageFormatDefinition;
     };
@@ -2997,6 +3289,44 @@ declare interface QueryData {
     page: number;
 }
 
+/**
+ * A Read only {@link Channel}
+ * @public
+ */
+declare interface ReadOnlyChannel<Out> extends Omit<Channel<Out>, 'update'> {
+    subscribe: Source<Out>;
+    value?: () => Out;
+}
+
+/**
+ * A {@link ReadOnlyChannel} that is guaranteed to have a `value`
+ * @public
+ */
+declare interface ReadOnlyChannelSync<Out> extends Omit<ChannelSync<Out>, 'update'>, ReadOnlyChannel<Out> {
+    subscribe: Source<Out>;
+    value: () => Out;
+}
+
+/**
+ * A {@link Channel} that is guaranteed to have an `update` method.
+ * @public
+ */
+declare interface ReadWriteChannel<Out, In = Out> extends Channel<Out, In> {
+    subscribe: Source<Out>;
+    update: (v: In) => void;
+    value?: () => Out;
+}
+
+/**
+ * A {@link ReadWriteChannel} that is guaranteed to have a `value` and an `update` method
+ * @public
+ */
+declare interface ReadWriteChannelSync<Out, In = Out> extends ChannelSync<Out, In>, ReadWriteChannel<Out, In> {
+    subscribe: Source<Out>;
+    update: (v: In) => void;
+    value: () => Out;
+}
+
 /** @public */
 export declare interface _RequiredConfiguration extends _EngineConfiguration {
     initialSceneMode?: SceneMode;
@@ -3178,6 +3508,47 @@ export declare class SceneAPI {
      * @returns A promise that resolves once the zoom was set or rejects with an error otherwise.
      */
     zoomToBlock(id: DesignBlockId, paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): Promise<void>;
+    /**
+     * Continually adjusts the zoom level to fit the width or height of a block's axis-aligned bounding box.
+     * Only has an effect if the zoom level is not handled by the UI.
+     * Without padding, this results in a tight view on the block.
+     * No more than one block per scene can have zoom auto-fit enabled.
+     * Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment.
+     *
+     * @param id - The block for which the zoom is adjusted.
+     * @param axis - The block axis for which the zoom is adjusted.
+     * @param paddingBefore - Optional padding in screen pixels before the block.
+     * @param paddingAfter - Optional padding in screen pixels after the block.
+     */
+    enableZoomAutoFit(id: DesignBlockId, axis: 'Horizontal' | 'Vertical', paddingBefore?: number, paddingAfter?: number): void;
+    /**
+     * Continually adjusts the zoom level to fit the width or height of a block's axis-aligned bounding box.
+     * Only has an effect if the zoom level is not handled by the UI.
+     * Without padding, this results in a tight view on the block.
+     * Calling `setZoomLevel` or `zoomToBlock` disables the continuous adjustment.
+     *
+     * @param id - The block for which the zoom is adjusted.
+     * @param axis - The block axis for which the zoom is adjusted.
+     * @param paddingLeft - Optional padding in screen pixels to the left of the block.
+     * @param paddingTop - Optional padding in screen pixels to the top of the block.
+     * @param paddingRight - Optional padding in screen pixels to the right of the block.
+     * @param paddingBottom - Optional padding in screen pixels to the bottom of the block.
+     */
+    enableZoomAutoFit(id: DesignBlockId, axis: 'Both', paddingLeft?: number, paddingTop?: number, paddingRight?: number, paddingBottom?: number): void;
+    /**
+     *  Disables any previously set zoom auto-fit.
+     *
+     * @param blockOrScene - The scene or a block in the scene for which to disable a zoom auto-fit.
+     */
+    disableZoomAutoFit(blockOrScene: DesignBlockId): void;
+    /**
+     *  Queries whether zoom auto-fit is enabled.
+     *
+     * @param blockOrScene - The scene or a block in the scene for which to disable a zoom auto-fit.
+     * @returns True if the given block has auto-fit set or the scene contains a block for which auto-fit is set, false
+     * otherwise.
+     */
+    isZoomAutoFitEnabled(blockOrScene: DesignBlockId): boolean;
     /**
      * Subscribe to changes to the zoom level.
      * @param callback - This function is called at the end of the engine update, if the zoom level has changed.
@@ -3215,6 +3586,25 @@ export declare type SceneLayout = 'Free' | 'VerticalStack' | 'HorizontalStack' |
  */
 export declare type SceneMode = 'Design' | 'Video';
 
+/** @public */
+export declare type SettingsBool = 'doubleClickToCropEnabled' | 'features/aiImageMattingEnabled' | 'features/aiImageMattingStagingEnabled' | 'features/aiInpaintingEnabled' | 'features/aiSmartCropEnabled' | 'features/aiSuperResolutionEnabled' | 'features/effectsEnabled' | 'features/hspSelectiveAdjustmentsEnabled' | 'features/layerListEnabled' | 'features/singlePageModeEnabled' | 'features/templatingEnabled' | 'page/dimOutOfPageAreas' | 'page/title/show' | 'placeholderControls/showButton' | 'placeholderControls/showOverlay' | 'showBuildVersion' | 'touch/dragStartCanSelect' | 'touch/singlePointPanning' | 'trackActivePage' | ArbitraryString;
+
+/** @public */
+export declare type SettingsColorRGBA = 'clearColor' | 'errorStateColor' | 'highlightColor' | 'page/title/color' | 'placeholderHighlightColor' | 'progressColor' | ArbitraryString;
+
+/** @public */
+export declare type SettingsEnum = {
+    role: RoleString;
+    doubleClickSelectionMode: 'Direct' | 'Hierarchical';
+    [key: ArbitraryString]: string;
+};
+
+/** @public */
+export declare type SettingsFloat = 'positionSnappingThreshold';
+
+/** @public */
+export declare type SettingsString = 'ai/apiStagingUrl' | 'ai/apiUrl' | 'ai/backendUrl' | 'basePath' | 'license' | 'page/title/fontFileUri' | ArbitraryString;
+
 /**
  * - Absolute: Size in absolute design units.
  * - Percent: Size in relation to the block's parent's size in percent, where 1.0 means 100%.
@@ -3224,6 +3614,17 @@ export declare type SceneMode = 'Design' | 'Video';
  */
 export declare type SizeMode = 'Absolute' | 'Percent' | 'Auto';
 
+/**
+ * A stream source.
+ *
+ * This is an ordinary function. Pass a handler to have that handler called by
+ * the source whenever a new value is available.
+ *
+ * Returns a function that unsubscribes the handler from the source
+ * @public
+ */
+declare type Source<T> = (handler: Handler<T>) => UnsubscribeFn;
+
 /** @public */
 export declare interface SpotColor {
     name: string;
@@ -3243,6 +3644,12 @@ export declare type StrokeStyle = 'Dashed' | 'DashedRound' | 'Dotted' | 'LongDas
 /** @public */
 declare type Subscription = number;
 
+/**
+ * Checks if the current browser supports necessary technologies to match our supported browsers
+ * @public
+ */
+export declare function supportsBrowser(): boolean;
+
 /**
  * Checks if the current browser supports video editing
  * @public
@@ -3292,6 +3699,12 @@ declare interface UIOptionsPerDesignUnit {
     in: UIOptionsForSingleDesignUnit;
 }
 
+/**
+ * Invoke to unsubscribe from a stream.
+ * @public
+ */
+declare type UnsubscribeFn = () => void;
+
 /** @public */
 export declare interface UserInterface {
     baseURL?: string;
@@ -3420,6 +3833,10 @@ declare interface UserInterfaceInspectorBlockImage extends UserInterfaceInspecto
 declare interface UserInterfaceInspectorBlockPage extends UserInterfaceInspectorBlock {
     format?: UserInterfaceElement | boolean;
     manage?: UserInterfaceElement | boolean;
+    /**
+     * Controls the maximum allowed duration of a page, if in video mode.
+     */
+    maxDuration?: number;
 }
 
 /** @public */
@@ -3436,8 +3853,8 @@ declare interface UserInterfaceInspectorBlocks {
     transform?: UserInterfaceElement | boolean;
     trim?: UserInterfaceElement | boolean;
     '//ly.img.ubq/image'?: UserInterfaceInspectorBlockImage;
-    '//ly.img.ubq/fill/video': UserInterfaceInspectorBlockVideoFill;
-    '//ly.img.ubq/shapes/rect': UserInterfaceInspectorBlockRectShape;
+    '//ly.img.ubq/fill/video'?: UserInterfaceInspectorBlockVideoFill;
+    '//ly.img.ubq/shapes/rect'?: UserInterfaceInspectorBlockRectShape;
     '//ly.img.ubq/text'?: UserInterfaceInspectorBlockText;
     '//ly.img.ubq/page'?: UserInterfaceInspectorBlockPage;
 }
@@ -3536,4 +3953,15 @@ declare enum ViewStyle {
     Default = "default"
 }
 
+/**
+ * Describes a rectangle on the screen
+ * - `x` and `y` indicate the position
+ * - `w` and `h` indicate the width and height
+ * @public
+ */
+export declare type XYWH = [x: number, y: number, w: number, h: number];
+
+/**  @public */
+export declare type ZoomAutoFitAxis = 'Horizontal' | 'Vertical' | 'Both';
+
 export { }