@cesdk/cesdk-js 1.5.1 → 1.6.0

package/cesdk-engine.umd.d.ts

@@ -1,84 +1,204 @@
-declare type Asset = {
-    src: string;
-};
+/// <reference types="offscreencanvas" />
 
 /**
- * Single asset result of a query from the engine.
+ * Generic asset information
+ * @public
  */
-declare interface AssetResult {
+export declare interface Asset {
     /**
-     *  A unique id of this asset
+     *  Is a combination of source id, extension pack id (optional), type and asset id
+     *  e.g. "extension://ly.img.cesdk.images.samples/ly.img.image/sample.1"
      */
     id: string;
+    /**   E.g. `ly.img.image` */
+    type: string;
+    /**  Groups of the asset.  */
+    groups?: Groups;
+    /** URI to a thumbnail of the asset used e.g. in the content library UI */
+    thumbUri: string;
+
+    /** Asset-specific and custom meta information */
+    meta?: {
+        uri?: string;
+        filename?: string;
+    } & Record<string, unknown>;
+}
+
+/**
+ * API to query for assets.
+ *
+ * Could be remote or local.
+ *
+ * @typeParam QData - The shape of queries made against this API
+ * @public
+ */
+export declare interface AssetAPI<QData extends AssetQueryData> {
+    /** The unique id of the API */
+    id: string;
+    /** Find all asset for the given type and the provided query data.  */
+    findAssets(type: string, queryData?: QData): Promise<AssetsQueryResult>;
+    /** For a given type return every available group */
+    getGroups: (type: string) => Promise<string[]>;
+    /** Return all registered/available types */
+    getTypes: () => string[];
+    /** The given type is registered. */
+    hasType: (type: string) => boolean;
+    /** Credits for the source/api */
+    credits?: {
+        name: string;
+        url?: string;
+    };
+    /** General license for all asset from this source */
+    license?: {
+        name: string;
+        url?: string;
+    };
+}
+
+/**
+ * Definition of an assets used if an asset is added to an asset source.
+ * @public
+ */
+export declare interface AssetDefinition extends Asset {
     /**
-     *  E.g. `ly.img.image`
+     * Label used to display in aria-label and as a tooltip.
+     * Will be also searched in a query and should be localized
      */
-    type: string;
+    label?: Record<Locale, string>;
     /**
-     * URI to a thumbnail of the asset used e.g. in the content library UI
+     * Tags for this asset. Can be used for filtering, but is also useful for
+     * free-text search. Since the label is searched as well as used for tooltips
+     * you do not want to overdo it, but still add things which are searched.
+     * Thus, it should be localized similar to the `label`.
      */
-    thumbUri: string;
+    tags?: Record<Locale, string[]>;
+}
+
+/**
+ * Defines a request for querying assets
+ * @public
+ */
+export declare interface AssetQueryData {
+    /** A query string used for (fuzzy) searching of labels and tags */
+    query?: string;
     /**
-     * Original size of the asset.
+     * Tags are searched with the query parameter, but this search is fuzzy.
+     * If one needs to get assets with exactly the tag (from a tag cloud or filter)
+     * this query parameter should be used.
      */
+    tags?: string | string[];
+    /** Query only these groups */
+    groups?: Groups;
+    /** Filter out assets with this groups */
+    excludeGroups?: Groups;
+    /** Choose the locale of the labels and tags for localized search and filtering */
+    locale?: Locale;
+    /**
+     * The number of results queried. How many assets shall be returned regardless
+     * of the total number of assets available.
+     *
+     * Together with `page` this can be used for pagination.
+     */
+    perPage: number;
+}
+
+/**
+ * The registry of all available assets and sources registered in the engine.
+ * @public
+ */
+export declare interface AssetRegistry {
+    /** Returns all sources available in the engine */
+    getSources(type?: string): AssetSource[];
+    /** Returns a source with the given id or undefined if not found */
+    getSource(id: string): AssetSource | undefined;
+    /** Adds a source to this registry. */
+    addSource(source: AssetSource): void;
+    /** Removes a source from this registry. */
+    removeSource(id: string): void;
+}
+
+/**
+ * Single asset result of a query from the engine.
+ * @public
+ */
+export declare interface AssetResult extends Asset {
+    /** The locale of the label and tags */
+    locale?: Locale;
+    /** The label of the result. Used for description and tooltips. */
+    label?: string;
+    /** The tags of this asset. Used for filtering and free-text searching. */
+    tags?: string[];
+
+    /** Credits for the artist of the asset */
+    credits?: {
+        name: string;
+        url?: string;
+    };
+    /** License for this asset. Overwrites the source license if present */
+    license?: {
+        name: string;
+        url?: string;
+    };
+    /** UTM parameters for the links inside the credits */
+    utm?: {
+        source?: string;
+        medium?: string;
+    };
+}
+
+/**
+ * Single asset result of a query from the engine.
+ * @public
+ */
+declare interface AssetResult_2 {
+    /** A unique id of this asset */
+    id: string;
+    /**  E.g. `ly.img.image` */
+    type: string;
+    /** URI to a thumbnail of the asset used e.g. in the content library UI */
+    thumbUri: string;
+    /** Original size of the asset. */
     size: {
         width: number;
         height: number;
     };
-    /**
-     * Asset-specific and custom meta information
-     */
+    /** Asset-specific and custom meta information */
     meta?: {
         uri?: string;
         filename?: string;
     } & Record<string, unknown>;
-    /**
-     * The locale of the label and tags
-     */
+    /** The locale of the label and tags */
     locale?: string;
-    /**
-     * The label of the result. Used for description and tooltips.
-     */
+    /** The label of the result. Used for description and tooltips.  */
     label?: string;
-    /**
-     * The tags of this asset. Used for filtering and free-text searching.
-     */
+    /** The tags of this asset. Used for filtering and free-text searching.  */
     tags?: string[];
     context: {
         sourceId: string;
     };
-    /**
-     * Credits for the artist of the asset
-     */
+    /** Credits for the artist of the asset */
     credits?: {
         name: string;
         url?: string;
     };
-    /**
-     * License for this asset. Overwrites the source license if present
-     */
+    /** License for this asset. Overwrites the source license if present */
     license?: {
         name: string;
         url?: string;
     };
 }
 
-declare type Assets = {
-    [id: string]: Asset;
-};
-
 /**
- * API to query for assets
+ * A source of assets
+ * @public
  */
-declare interface AssetSource {
+export declare interface AssetSource extends AssetAPI<PaginatedAssetQueryData> {
     /**
-     * The asset types returned by this source. Will default to ['ly.img.image'].
+     * Can the source add, update and remove assets dynamically? If `false`
+     * methods like `addAsset` `updateAsset` and `removeAsset` will throw and
+     * error.
      */
-    types?: string[];
-    /**
-     * Find all asset for the given type and the provided query data.
-     */
-    findAssets(type: string, queryData?: QueryData): Promise<AssetsQueryResult | undefined>;
+    canManageAssets?: boolean;
     /**
      * 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
@@ -88,47 +208,101 @@ declare interface AssetSource {
      */
     downloadAssets?: (asset: AssetResult) => Promise<Blob>;
     /**
-     * Credits for the source/api
+     * @returns the asset or undefined if no asset with the given id could be found
+     */
+    getAsset(id: string): Promise<AssetResult | undefined>;
+    /**
+     * Adds the given asset to this source. Throws an error if `canManageAssets`
+     * is `false`.
+     *
+     * @returns the id of the added asset
+     */
+    addAsset(type: string, asset: AssetDefinition): Promise<string>;
+    /**
+     * Updates the asset of this source. Throws an error if `canManageAssets`
+     * is `false` or no asset with the given id could not be found.
+     *
+     * @returns the id of the added asset
+     */
+    updateAsset(assetId: string, asset: AssetDefinition): Promise<void>;
+    /**
+     * Removes the given asset from this source.
+     *
+     * @returns true if asset was found and removed, and false otherwise
+     */
+    removeAsset(assetId: string): Promise<boolean>;
+}
+
+/**
+ * API to query for assets
+ * @public
+ */
+declare interface AssetSource_2 {
+    /** The asset types returned by this source. Will default to ['ly.img.image'].  */
+    types?: string[];
+    /** Find all asset for the given type and the provided query data.  */
+    findAssets(type: string, queryData?: QueryData): Promise<AssetsQueryResult_2 | undefined>;
+    /**
+     * 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;
         url?: string;
     };
-    /**
-     * General license for all asset from this source
-     */
+    /** General license for all asset from this source */
     license?: {
         name: string;
         url?: string;
     };
 }
 
+/** @public */
 declare type AssetSources = {
-    [id: string]: AssetSource;
+    [id: string]: AssetSource_2;
 };
 
 /**
  * Return type of a `findAssets` query.
+ * @public
  */
-declare interface AssetsQueryResult {
-    /**
-     * The assets in the requested page
-     */
+export declare interface AssetsQueryResult {
+    /** The assets in the requested page */
     assets: AssetResult[];
-    /**
-     * The current, requested page
-     */
+    /** The current, requested page */
     currentPage: number;
-    /**
-     * The next page to query if it exists
-     */
-    nextPage: number | undefined;
-    /**
-     * How many assets are there in total for the current query regardless of the page
-     */
+    /** The next page to query if it exists */
+    nextPage?: number;
+    /** How many assets are there in total for the current query regardless of the page */
+    total: number;
+}
+
+/**
+ * Return type of a `findAssets` query.
+ * @public
+ */
+declare interface AssetsQueryResult_2 {
+    /** The assets in the requested page */
+    assets: AssetResult_2[];
+    /** The current, requested page */
+    currentPage: number;
+    /** The next page to query if it exists */
+    nextPage?: number;
+    /** How many assets are there in total for the current query regardless of the page */
     total: number;
 }
 
+/**
+ * @public
+ */
+export declare type BlendMode = 'PassThrough' | 'Normal' | 'Darken' | 'Multiply' | 'ColorBurn' | 'Lighten' | 'Screen' | 'ColorDodge' | 'Overlay' | 'SoftLight' | 'HardLight' | 'Difference' | 'Exclusion' | 'Hue' | 'Saturation' | 'Color' | 'Luminosity';
+
+/** @public */
 declare type Block = number;
 
 /**
@@ -145,6 +319,7 @@ export declare class BlockAPI {
      * @returns A promise that resolves with the exported image or is rejected with an error.
      */
     export(handle: DesignBlockId, mimeType?: MimeType_2): Promise<Blob>;
+
     /**
      * Loads existing blocks from the given string.
      * The blocks are not attached by default and won't be visible until attached to a page or the scene.
@@ -165,8 +340,8 @@ export declare class BlockAPI {
      * @returns The created blocks handle.
      */
     create(type: DesignBlockType): DesignBlockId;
-    /**
 
+    /**
      * Get the type of the given block, fails if the block is invalid.
      * @param id - The block to query.
      * @returns The blocks type.
@@ -247,6 +422,11 @@ export declare class BlockAPI {
      * @returns A list of block ids.
      */
     findAll(): DesignBlockId[];
+    /**
+     * Return all placeholder blocks in the current scene.
+     * @returns A list of block ids.
+     */
+    findAllPlaceholders(): DesignBlockId[];
     /**
      * Query a block's visibility.
      * @param id - The block to query.
@@ -349,13 +529,13 @@ export declare class BlockAPI {
     /**
      * Update a block's horizontal flip.
      * @param id - The block to update.
-     * @param horizontal - Whether the block should be flipped along its x-axis.
+     * @param flip - If the flip should be enabled.
      */
     setFlipHorizontal(id: DesignBlockId, flip: boolean): void;
     /**
      * Update a block's vertical flip.
      * @param id - The block to update.
-     * @param vertical - Whether the block should be flipped along its y-axis.
+     * @param flip - If the flip should be enabled.
      */
     setFlipVertical(id: DesignBlockId, flip: boolean): void;
     /**
@@ -382,6 +562,12 @@ 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.
@@ -406,6 +592,12 @@ 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 layouted width. The layouted width is only available after an
      * internal update loop, which may not happen immediately.
@@ -498,6 +690,21 @@ export declare class BlockAPI {
      * @returns float The height of the axis-aligned bounding box.
      */
     getGlobalBoundingBoxHeight(id: DesignBlockId): number;
+    /**
+     * Scales the block and all of its children proportionally around the specified
+     * relative anchor point.
+     *
+     * This updates the position, size and style properties (e.g. stroke width) of
+     * the block and its children.
+     *
+     * @param id - The block that should be scaled.
+     * @param scale - The scale factor to be applied to the current properties of the block.
+     * @param anchorX - The relative position along the width of the block around which the
+     * scaling should occur. (0 = left edge, 0.5 = center, 1 = right edge)
+     * @param anchorY - The relative position along the height of the block around which the
+     * scaling should occur. (0 = top edge, 0.5 = center, 1 = bottom edge)
+     */
+    scale(id: DesignBlockId, scale: number, anchorX?: number, anchorY?: number): void;
     /**
      * Get all available properties of a block.
      * @param id - The block whose properties should be queried.
@@ -591,14 +798,14 @@ export declare class BlockAPI {
     getColorRGBA(id: DesignBlockId, property: string): RGBA;
     /**
      * Set an enum property of the given design block to the given value.
-     * @param block - The block whose property should be set.
+     * @param id - The block whose property should be set.
      * @param property - The name of the property to set.
      * @param value - The enum value as string.
      */
     setEnum(id: DesignBlockId, property: string, value: string): void;
     /**
      * Get the value of an enum property of the given design block.
-     * @param block - The block whose property should be queried.
+     * @param id - The block whose property should be queried.
      * @param property - The name of the property to query.
      * @returns The value as string.
      */
@@ -630,7 +837,7 @@ export declare class BlockAPI {
     /**
      * Set the crop translation in x direction of the given design block.
      * @param id - The block whose crop should be set.
-     * @param translationY - The translation in x direction.
+     * @param translationY - The translation in y direction.
      */
     setCropTranslationX(id: DesignBlockId, translationX: number): void;
     /**
@@ -678,7 +885,7 @@ export declare class BlockAPI {
     /**
      * Query if the given block has an opacity.
      * @param id - The block to query.
-     * @returns true, if the block has an opcity.
+     * @returns true, if the block has an opacity.
      */
     hasOpacity(id: DesignBlockId): boolean;
     /**
@@ -693,6 +900,19 @@ export declare class BlockAPI {
      * @returns The opacity.
      */
     getOpacity(id: DesignBlockId): number;
+    /**
+     * Set the blend mode of the given design block.
+     * @param id - The block whose blend mode should be set.
+     * @param blendMode - The blend mode to be set.
+     * @returns
+     */
+    setBlendMode(id: DesignBlockId, blendMode: BlendMode): void;
+    /**
+     * Get the blend mode of the given design block.
+     * @param id - The block whose blend mode should be queried.
+     * @returns The blend mode.
+     */
+    getBlendMode(id: DesignBlockId): BlendMode;
     /**
      * Query if the given block has fill color properties.
      * @param id - The block to query.
@@ -896,6 +1116,137 @@ export declare class BlockAPI {
      * @deprecated Use `getStrokeWidth`.
      */
     getOutlineWidth(id: DesignBlockId): number;
+    /**
+     * Query if the given block has fill color properties.
+     * @param id - The block to query.
+     * @returns true, if the block has fill color properties, an error otherwise.
+     */
+    hasFill(id: DesignBlockId): boolean;
+    /**
+     * Query if the fill of the given design block is enabled.
+     * @param id - The block whose fill state should be queried.
+     * @returns A result holding the fill state or an error.
+     */
+    isFillEnabled(id: DesignBlockId): boolean;
+    /**
+     * 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.
+     * @returns An empty result on success, an error otherwise.
+     */
+    setFillEnabled(id: DesignBlockId, enabled: boolean): void;
+    /**
+     * Set the fill type of the given design block.
+     * @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.
+     */
+    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.
+     */
+    getFillType(id: DesignBlockId): FillType;
+    /**
+     * Set the fill color of the given design block.
+     * @param id - The block whose fill color should be set.
+     * @param r - The red color component in the range of 0 to 1.
+     * @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.
+     * @returns An empty result on success, an error otherwise.
+     */
+    setFillSolidColor(id: DesignBlockId, r: number, b: number, g: number, a: number): void;
+    /**
+     * Get the fill color of the given design block.
+     * @param id - The block whose fill color should be queried.
+     * @returns A result holding the fill color or an error.
+     */
+    getFillSolidColor(id: DesignBlockId): RGBA;
+    /**
+     * Set the gradient type of the given design block.
+     * @param id - The block whose gradient type should be set.
+     * @param type - The gradient type.
+     * @returns An empty result on success, an error otherwise.
+     */
+    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.
+     */
+    getFillGradientType(id: DesignBlockId): GradientType;
+    /**
+     * Add a gradient color stop on a design block.
+     * @param id - The block on which a gradient color stop should be added.
+     * @param stop - Where to add a color stop in the range 0 to 1.
+     * @param r - The red color component in the range of 0 to 1.
+     * @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.
+     * @returns An empty result on success, an error otherwise.
+     */
+    addFillGradientColorStop(id: DesignBlockId, stop: number, r: number, g: number, b: number, a: number): void;
+    /**
+     * Remove a previously gradient color stop on a design block.
+     * @param id - The block from which to remvove the gradient color stop.
+     * @param stop - The stop's position.
+     * @returns An empty result on success, an error otherwise.
+     */
+    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.
+     */
+    getFillGradientColorStops(id: DesignBlockId): GradientstopRGBA[];
+    /**
+     * Set the gradient fill color stops of the given design block, overwriting previously set color stops.
+     * @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.
+     */
+    setFillGradientColorStops(id: DesignBlockId, stops: GradientstopRGBA[]): void;
+    /**
+     * Set the position of a gradient's control point.
+     * Note that Different gradient types of different control points.
+     * @param id - The block whose gradient control point should be set.
+     * @param gradientControlPointType - The type of control point.
+     * @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.
+     */
+    setFillGradientControlPoint(id: DesignBlockId, gradientControlPointType: GradientControlPointType, x: number, y: number): boolean;
+    /**
+     * Get the horizontal component of a gradient's control point.
+     * @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.
+     */
+    getFillGradientControlPointX(id: DesignBlockId, gradientControlPointType: GradientControlPointType): number;
+    /**
+     * Get the vertical component of a gradient's control point.
+     * @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.
+     */
+    getFillGradientControlPointY(id: DesignBlockId, gradientControlPointType: GradientControlPointType): number;
+    /**
+     * Set a gradient's radius.
+     * Note that Not all gradients have a radius.
+     * @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.
+     */
+    setFillGradientRadius(id: DesignBlockId, radius: number): boolean;
+    /**
+     * Get a gradient's radius.
+     * 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.
+     */
+    getFillGradientRadius(id: DesignBlockId): number;
 }
 
 /**
@@ -906,65 +1257,87 @@ export declare type BlockEvent = {
     type: 'Created' | 'Updated' | 'Destroyed';
 };
 
+/** @public */
 declare interface BlockEvent_2 {
     block: Block;
     type: 'Created' | 'Updated' | 'Destroyed';
 }
 
+/** @public */
 declare type Callbacks = {
     log?: Logger;
 };
 
-/** All components between 0 and 1 */
-declare interface CMYKColor {
+/**
+ * All components between 0 and 1
+ * @public
+ */
+export declare interface CMYKColor {
     c: number;
     m: number;
     y: number;
     k: number;
 }
 
-declare type ColorDefinition = Preset & {
-    value: ColorPaletteColor;
-};
-
 /**
  * A color definition for the custom color palette.
  * The RGB and CMYK components must all be specified in the range [0-1].
+ * @public
  */
-declare type ColorPaletteColor = HexColorString | RGBColor | RGBAColor | SpotColor;
+declare type Color_2 = HexColorString | RGBColor | RGBAColor | SpotColor;
 
-declare type ColorPaletteDefinition = Preset & {
-    entries: ColorPaletteColor[];
+/** @public */
+declare type ColorDefinition = Preset & {
+    value: Color_2;
 };
 
-declare type Command = {
-    identifier: string;
-    argumentTypes: string[];
-    returnType: string;
+/** @public */
+declare type ColorPaletteDefinition = Preset & {
+    entries: Color_2[];
 };
 
-/**
- * @public
- */
-export declare type Configuration = Partial<_Configuration>;
+declare namespace ConfigTypes {
+    export {
+        HexColorString,
+        Color_2 as Color,
+        AssetSources,
+        AssetSource_2 as AssetSource,
+        AssetResult_2 as AssetResult,
+        AssetsQueryResult_2 as AssetsQueryResult,
+        QueryData,
+        Preset,
+        VariableDefinition,
+        ColorDefinition,
+        ColorPaletteDefinition,
+        PageFormatDefinition,
+        TemplateDefinition,
+        TypefaceDefinition,
+        ImageDefinition,
+        Presets,
+        Variables,
+        Core,
+        Extensions,
+        Scene,
+        Page,
+        Callbacks
+    }
+}
+export { ConfigTypes }
 
-/**
- * @public
- */
-export declare interface _Configuration {
+/** @public */
+export declare interface Configuration {
     baseURL: string;
     license?: string;
-    role: string;
+    role: RoleString;
     featureFlags?: Record<string, string | boolean>;
-    extensions: Extensions;
-    core: Core;
-    scene: Scene;
-    page: Page;
-    assets: Assets;
-    assetSources: AssetSources;
-    presets: Presets;
-    variables: Variables;
-    callbacks: Callbacks;
+    extensions: ConfigTypes.Extensions;
+    core: ConfigTypes.Core;
+    scene: ConfigTypes.Scene;
+    page: ConfigTypes.Page;
+    assetSources: ConfigTypes.AssetSources;
+    presets: ConfigTypes.Presets;
+    variables: ConfigTypes.Variables;
+    callbacks: ConfigTypes.Callbacks;
     /**
      * The default font used by a text added to the scene. Needs to be the id of
      * the font from a extension pack including namespace, e.g.
@@ -976,14 +1349,20 @@ export declare interface _Configuration {
     defaultFont?: string;
 }
 
+/**
+ * - Crop: Manual crop.
+ * - Cover: Automatically cover the entire frame.
+ * - Contain: Automatically contain content inside frame.
+ *
+ * @public
+ */
+export declare type ContentFillMode = 'Crop' | 'Cover' | 'Contain';
+
+/** @public */
 declare type Core = {
     baseURL: string;
 };
 
-declare interface CreateSceneOptions {
-    layout: SceneLayout;
-}
-
 /**
  * A headless implementation that just initializes & exposes the Document API
  *
@@ -991,17 +1370,10 @@ declare interface CreateSceneOptions {
  */
 declare class CreativeEngine {
     #private;
-    static PositionMode: typeof PositionMode;
-    static SizeMode: typeof SizeMode;
-    static PropertyType: typeof PropertyType;
-    static DesignBlockType: typeof DesignBlockType;
-    static MimeType: typeof MimeType_2;
-    static StrokePosition: typeof StrokePosition;
-    static StrokeCornerGeometry: typeof StrokeCornerGeometry;
-    static StrokeStyle: typeof StrokeStyle;
     block: BlockAPI;
     scene: SceneAPI;
     variable: VariableAPI;
+    editor: EditorAPI;
 
     event: EventAPI;
 
@@ -1016,7 +1388,7 @@ declare class CreativeEngine {
      *                 the engine works with an internal offscreen-canvas.
      * @returns An engine instance.
      */
-    static init(config?: Configuration, canvas?: HTMLCanvasElement): Promise<CreativeEngine>;
+    static init(config?: Partial<Configuration>, canvas?: HTMLCanvasElement | OffscreenCanvas): Promise<CreativeEngine>;
 }
 export default CreativeEngine;
 
@@ -1031,6 +1403,7 @@ export declare type DesignBlockId = number;
  */
 export declare enum DesignBlockType {
     Scene = "//ly.img.ubq/scene",
+    Stack = "//ly.img.ubq/stack",
     Camera = "//ly.img.ubq/camera",
     Page = "//ly.img.ubq/page",
     Image = "//ly.img.ubq/image",
@@ -1046,10 +1419,167 @@ export declare enum DesignBlockType {
     Group = "//ly.img.ubq/group"
 }
 
-declare enum DesignUnit {
-    Pixel = "px",
-    Millimeter = "mm",
-    Inch = "in"
+/** @public */
+export declare type DesignUnit = 'mm' | 'px' | 'in';
+
+/**
+ * @public
+ */
+export declare class EditorAPI {
+    #private;
+
+    /**
+     * Subscribe to changes to the editor state.
+     * @param callback - This function is called at the end of the engine update, if the editor state has changed.
+     * @returns A method to unsubscribe.
+     */
+    onStateChanged(callback: () => void): () => void;
+    /**
+     * Set the edit mode of the editor.
+     * An edit mode defines what type of content can currently be edited by the user.
+     * Hint: the initial edit mode is "Transform".
+     * @param mode - "Transform", "Crop", "Text", or a custom value.
+     */
+    setEditMode(mode: 'Transform' | 'Crop' | 'Text' | string): void;
+    /**
+     * Get the current edit mode of the editor.
+     * An edit mode defines what type of content can currently be edited by the user.
+     * @returns "Transform", "Crop", "Text", or a custom value.
+     */
+    getEditMode(): 'Transform' | 'Crop' | 'Text' | string;
+    /**
+     * Get the type of cursor that should be displayed by the application.
+     * @returns The cursor type.
+     */
+    getCursorType(): 'Arrow' | 'Move' | 'MoveNotPermitted' | 'Resize' | 'Rotate' | 'Text';
+    /**
+     * Get the rotation with which to render the mouse cursor.
+     * @returns The angle in radians.
+     */
+    getCursorRotation(): number;
+    /**
+     * Get the current text cursor's x position in screen space.
+     * @returns The text cursor's x position in screen space.
+     */
+    getTextCursorPositionInScreenSpaceX(): number;
+    /**
+     * Get the current text cursor's y position in screen space.
+     * @returns The text cursor's y position in screen space.
+     */
+    getTextCursorPositionInScreenSpaceY(): number;
+    /**
+     * Sets the zoom level of the scene.
+     * @param zoomLevel - The new zoom level.
+     */
+    setZoomLevel(zoomLevel?: number): void;
+    /**
+     * Query a camera zoom level.
+     * @returns The zoom level of the block's (main) camera.
+     */
+    getZoomLevel(): number;
+    /**
+     * Adds a new history state to the stack, if undoable changes were made.
+     */
+    addUndoStep(): void;
+    /**
+     * Undo one step in the history if an undo step is available.
+     */
+    undo(): void;
+    /**
+     * Redo one step in the history if a redo step is available.
+     */
+    redo(): void;
+    /**
+     * If an undo step is available.
+     *
+     * @returns True if an undo step is available.
+     */
+    canUndo(): boolean;
+    /**
+     * If a redo step is available.
+     *
+     * @returns True if a redo step is available.
+     */
+    canRedo(): boolean;
+    /**
+     * Set a boolean setting.
+     * @param keypath - The settings keypath, e.g. `ubq://doubleClickToCropEnabled`
+     * @param value - The value to set.
+     * @throws An error, if the keypath is invalid.
+     */
+    setSettingBool(keypath: string, value: boolean): void;
+    /**
+     * Get a boolean setting.
+     * @param keypath - The settings keypath, e.g. `ubq://doubleClickToCropEnabled`
+     * @throws An error, if the keypath is invalid.
+     */
+    getSettingBool(keypath: string): boolean;
+    /**
+     * Set an integer setting.
+     * @param keypath - The settings keypath.
+     * @param value - The value to set.
+     * @throws An error, if the keypath is invalid.
+     */
+    setSettingInt(keypath: string, value: number): void;
+    /**
+     * Get an integer setting.
+     * @param keypath - The settings keypath.
+     * @throws An error, if the keypath is invalid.
+     */
+    getSettingInt(keypath: string): number;
+    /**
+     * Set a float setting.
+     * @param keypath - The settings keypath, e.g. `ubq://positionSnappingThreshold`
+     * @param value - The value to set.
+     * @throws An error, if the keypath is invalid.
+     */
+    setSettingFloat(keypath: string, value: number): void;
+    /**
+     * Get a float setting.
+     * @param keypath - The settings keypath, e.g. `ubq://positionSnappingThreshold`
+     * @throws An error, if the keypath is invalid.
+     */
+    getSettingFloat(keypath: string): number;
+    /**
+     * Set a string setting.
+     * @param keypath - The settings keypath, e.g. `ubq://license`
+     * @param value - The value to set.
+     * @throws An error, if the keypath is invalid.
+     */
+    setSettingString(keypath: string, value: string): void;
+    /**
+     * Get a string setting.
+     * @param keypath - The settings keypath, e.g. `ubq://license`
+     * @throws An error, if the keypath is invalid.
+     */
+    getSettingString(keypath: string): string;
+    /**
+     * Set a color setting.
+     * @param keypath - The settings keypath, e.g. `ubq://highlightColor`.
+     * @param r - The red color component in the range of 0 to 1.
+     * @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.
+     */
+    setSettingColorRGBA(keypath: string, r: number, g: number, b: number, a: number): void;
+    /**
+     * Get a color setting.
+     * @param keypath - The settings keypath, e.g. `ubq://highlightColor`.
+     * @returns A tuple of channels red, green, blue and alpha in the range of 0 to 1.
+     */
+    getSettingColorRGBA(keypath: string): RGBA;
+    /**
+     * Set an enum setting.
+     * @param keypath - The settings keypath, e.g. `ubq://role`.
+     * @param value - The enum value as string.
+     */
+    setSettingEnum(keypath: string, value: string): void;
+    /**
+     * Get an enum setting.
+     * @param keypath - The settings keypath, e.g. `ubq://role`.
+     * @returns The value as string.
+     */
+    getSettingEnum(keypath: string): string;
 }
 
 /**
@@ -1067,8 +1597,7 @@ export declare class EventAPI {
     subscribe(blocks: DesignBlockId[], callback: (events: BlockEvent[]) => void): () => void;
 }
 
-declare type EventSubscription = number;
-
+/** @public */
 declare interface ExportOptions {
     jpegQuality: number;
     pngCompressionLevel: number;
@@ -1077,26 +1606,79 @@ declare interface ExportOptions {
     targetHeight: number;
 }
 
+/** @public */
+declare interface ExportVideoOptions {
+    h264Profile: number;
+    h264Level: number;
+    framerate: number;
+    useTargetSize: boolean;
+    targetWidth: number;
+    targetHeight: number;
+}
+
+/** @public */
 declare type Extensions = {
     baseURL: string;
     entries: string[];
 };
 
+/**
+ * @public
+ */
+export declare type FillType = 'Solid' | 'Gradient';
+
+/** @public */
 declare interface Flip {
     horizontal: boolean;
     vertical: boolean;
 }
 
-declare type FontStyle = 'normal' | 'italic';
+/** @public */
+export declare type FontStyle = 'normal' | 'italic';
 
-declare type FontWeight = 'thin' | 'extraLight' | 'Light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
+/** @public */
+export declare type FontWeight = 'thin' | 'extraLight' | 'Light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
+
+/**
+ * @public
+ */
+export declare type GradientControlPointType = 'Start' | 'End' | 'Center';
+
+/**
+ * @public
+ */
+export declare type GradientstopRGBA = [
+stop: number,
+r: number,
+g: number,
+b: number,
+a: number
+];
+
+/**
+ * @public
+ */
+export declare type GradientType = 'Linear' | 'Radial' | 'Conical';
+
+/**
+ * An asset can be member of multiple groups. Groups have a semantic meaning
+ * used to build and group UIs exploring the assets, e.g.sections in the
+ * content library, or for things like topics in Unsplash for instance.
+ *
+ * Tags in comparison have are more loosely hold meaning used for extended
+ * searching/filtering.
+ * @public
+ */
+declare type Groups = string[];
 
 /**
  * A hexadecimal color value (RGB or RGBA) that starts with a '#'
  * @example #6686FF or #6686FFFF
+ * @public
  */
 declare type HexColorString = string;
 
+/** @public */
 declare type ImageDefinition = Preset & {
     imageURL: string;
     thumbnailURL?: string;
@@ -1107,9 +1689,17 @@ declare type ImageDefinition = Preset & {
     };
 };
 
-declare type Logger = (message: string, level: LogLevel) => void;
+/**
+ * e.g. `en`, `de`, etc.
+ * @public
+ */
+declare type Locale = string;
+
+/** @public */
+export declare type Logger = (message: string, level: LogLevel) => void;
 
-declare enum LogLevel {
+/** @public */
+export declare enum LogLevel {
     Info = "Info",
     Warning = "Warning",
     Error = "Error"
@@ -1120,23 +1710,14 @@ declare enum MimeType_2 {
     Png = "image/png",
     Jpeg = "image/jpeg",
     Tga = "image/x-tga",
+    Mp4 = "video/mp4",
     Binary = "application/octet-stream",
     Pdf = "application/pdf",
     Zip = "application/zip"
 }
 export { MimeType_2 as MimeType }
 
-declare interface NotificationEvent {
-    type: NotificationType;
-    i18n: string;
-}
-
-declare enum NotificationType {
-    Information = 0,
-    Warning = 1,
-    Error = 2
-}
-
+/** @public */
 declare type Page = {
     title: {
         /**
@@ -1155,6 +1736,7 @@ declare type Page = {
     dimOutOfPageAreas?: boolean;
 };
 
+/** @public */
 declare type PageFormatDefinition = Preset & {
     width: number;
     height: number;
@@ -1163,18 +1745,22 @@ declare type PageFormatDefinition = Preset & {
     bleedMargin?: number;
 };
 
+/** @public */
+export declare interface PaginatedAssetQueryData extends AssetQueryData {
+    /** The current page queried for paginated views. */
+    page: number;
+}
+
 /**
+ * - Absolute: Position in absolute design units.
+ * - Percent: Position in relation to the block's parent's size in percent, where 1.0 means 100%.
+ * - Auto: Position is automatically determined
+ *
  * @public
  */
-export declare enum PositionMode {
-    /** Position in absolute design units. */
-    Absolute = "Absolute",
-    /** Position in relation to the block's parent's size in percent, where 1.0 means 100%. */
-    Percent = "Percent",
-    /** Position is automatically determined. */
-    Undefined = "Auto"
-}
+export declare type PositionMode = 'Absolute' | 'Percent' | 'Auto';
 
+/** @public */
 declare type Preset = {
     meta?: {
         default?: boolean;
@@ -1183,6 +1769,7 @@ declare type Preset = {
     };
 };
 
+/** @public */
 declare type Presets = {
     colors?: {
         [id: string]: ColorDefinition;
@@ -1204,38 +1791,12 @@ declare type Presets = {
     };
 };
 
-/**
- * @public
- */
-export declare enum PropertyType {
-    Bool = "Bool",
-    Int = "Int",
-    Float = "Float",
-    String = "String",
-    Color = "Color",
-    Enum = "Enum",
-    Struct = "Struct"
-}
+/** @public */
+export declare type PropertyType = 'Bool' | 'Int' | 'Float' | 'String' | 'Color' | 'Enum' | 'Struct';
 
-/**
- * Please read this before you change anything in this file.
- *
- * Types in here are a sub-set of the types in `api/asset.ts` and are meant to be
- * exposed publicly.
- *
- * We do not use the types from `asset.ts` directly to handle (copy&paste) the
- * syncing of the public type declarations and what we actually use in the config.
- * This makes it easier to ensure that the customer is using the correct types and
- * any missmatch between this and the `asset.ts` file will be shown by our
- * type-checker.
- *
- * PLEASE NOTE: If you change anything in here, make the according changes in
- * the `release/types.d.ts` file.
- */
+/** @public */
 declare interface QueryData {
-    /**
-     * A query string used for (fuzzy) searching of labels and tags
-     */
+    /** A query string used for (fuzzy) searching of labels and tags */
     query?: string;
     /**
      * The number of results queried. How many assets shall be returned regardless
@@ -1244,41 +1805,42 @@ declare interface QueryData {
      * Together with `page` this can be used for pagination.
      */
     perPage: number;
-    /**
-     * The current page queried for paginated views.
-     */
+    /** The current page queried for paginated views. */
     page: number;
 }
 
-declare type RGBA = [r: number, g: number, b: number, a: number];
+/**
+ * @public
+ */
+export declare type RGBA = [r: number, g: number, b: number, a: number];
 
-/** All components between 0 and 1 */
-declare interface RGBAColor {
+/**
+ * All components between 0 and 1
+ * @public
+ */
+export declare interface RGBAColor {
     r: number;
     g: number;
     b: number;
     a: number;
 }
 
-/** All components between 0 and 1 */
-declare interface RGBColor {
+/**
+ * All components between 0 and 1
+ * @public
+ */
+export declare interface RGBColor {
     r: number;
     g: number;
     b: number;
 }
 
-/**
- * Enum for the engine-internal numerical representations of the roles
- */
-declare const enum Role {
-    Creator = 0,
-    Adopter = 1,
-    Viewer = 2,
-    Presenter = 3
-}
+/** @public */
+export declare type RoleString = 'Creator' | 'Adopter' | 'Viewer' | 'Presenter';
 
-/** Export Settings
- *
+/**
+ * Export Settings
+ * @public
  */
 declare type Scene = {
     maskSpotColor?: SpotColor;
@@ -1353,72 +1915,78 @@ export declare class SceneAPI {
      * @returns The scene or null, if none was created yet.
      */
     get(): DesignBlockId | null;
+    /**
+     * Applies the contents of the given template scene to the currently loaded scene.
+     * This loads the template scene while keeping the design unit and page dimensions
+     * of the current scene. Page contents remain centered when the pages are resized
+     * to fit the new dimensions.
+     * @param content - The template scene file contents, a base64 string.
+     * @returns A Promise that resolves once the template was applied or rejects if there was an error.
+     */
+    applyTemplateFromString(content: string): Promise<void>;
+    /**
+     * Applies the contents of the given template scene to the currently loaded scene.
+     * This loads the template scene while keeping the design unit and page dimensions
+     * of the current scene. Page contents remain centered when the pages are resized
+     * to fit the new dimensions.
+     * @param url - The url to the template scene file.
+     * @returns A Promise that resolves once the template was applied or rejects if there was an error.
+     */
+    applyTemplateFromURL(url: string): Promise<void>;
+    /**
+     * Converts all values of the current scene into the given design unit.
+     * @param designUnit - The new design unit of the scene
+     */
+    unstable_setDesignUnit(designUnit: DesignUnit): void;
+    /**
+     * Returns the design unit of the current scene.
+     * @returns The current design unit.
+     */
+    unstable_getDesignUnit(): DesignUnit;
 }
 
-declare enum SceneLayout {
-    Free = 0,
-    VerticalStack = 1,
-    HorizontalStack = 2
+/** @public */
+export declare interface Size2 {
+    width: number;
+    height: number;
 }
 
 /**
+ * - Absolute: Size in absolute design units.
+ * - Percent: Size in relation to the block's parent's size in percent, where 1.0 means 100%.
+ * - Auto: Size is automatically determined
+ *
  * @public
  */
-export declare enum SizeMode {
-    /** Size in absolute design units. */
-    Absolute = "Absolute",
-    /** Size in relation to the block's parent's size in percent, where 1.0 means 100%. */
-    Percent = "Percent",
-    /** Size is determined by the block's content. */
-    Auto = "Auto"
-}
+export declare type SizeMode = 'Absolute' | 'Percent' | 'Auto';
 
-declare type SpotColor = {
+/** @public */
+export declare interface SpotColor {
     name: string;
-    rgbApproximation: RGBColor;
+    rgbApproximation: RGBAColor;
     cmykApproximation: CMYKColor;
-};
-
-/**
- * @public
- */
-export declare enum StrokeCornerGeometry {
-    Bevel = "Bevel",
-    Miter = "Miter",
-    Round = "Round"
 }
 
-/**
- * @public
- */
-export declare enum StrokePosition {
-    Center = "Center",
-    Inner = "Inner",
-    Outer = "Outer"
-}
+/** @public */
+export declare type StrokeCornerGeometry = 'Bevel' | 'Miter' | 'Round';
 
-/**
- * @public
- */
-export declare enum StrokeStyle {
-    Dashed = "Dashed",
-    DashedRound = "DashedRound",
-    Dotted = "Dotted",
-    LongDashed = "LongDashed",
-    LongDashedRound = "LongDashedRound",
-    Solid = "Solid"
-}
+/**  @public */
+export declare type StrokePosition = 'Center' | 'Inner' | 'Outer';
+
+/**  @public */
+export declare type StrokeStyle = 'Dashed' | 'DashedRound' | 'Dotted' | 'LongDashed' | 'LongDashedRound' | 'Solid';
 
+/** @public */
+declare type Subscription = number;
+
+/** @public */
 declare type TemplateDefinition = Preset & {
+    label: string;
     scene: string | URL | (() => Promise<string>);
     thumbnailURL?: string | URL;
 };
 
-declare interface TypeDescription {
-    name: string;
-    members: Array<TypeMemberDescription>;
-}
-
+/** @public */
 declare type TypefaceDefinition = Preset & {
     family: string;
     fonts: [
@@ -1430,17 +1998,6 @@ declare type TypefaceDefinition = Preset & {
     ];
 };
 
-declare interface TypeMemberDescription {
-    name: string;
-    type: string;
-    props: Array<TypeProp>;
-}
-
-declare interface TypeProp {
-    key: string;
-    value: number | string;
-}
-
 /**
  * @public
  */
@@ -1471,29 +2028,35 @@ export declare class VariableAPI {
     remove(key: string): void;
 }
 
+/** @public */
 declare type VariableDefinition = Preset & {
     value: string | number;
 };
 
+/** @public */
 declare type Variables = {
     [id: string]: VariableDefinition;
 };
 
-declare interface Vec2 {
+/** @public */
+export declare interface Vec2 {
     x: number;
     y: number;
 }
 
-declare interface Vec3 {
+/** @public */
+export declare interface Vec3 {
     x: number;
     y: number;
     z: number;
 }
 
-declare interface Vector<T> {
-    size: () => number;
-    get: (index: number) => T;
-    delete: () => void;
+/** @public */
+export declare interface Vec4 {
+    x: number;
+    y: number;
+    z: number;
+    w: number;
 }
 
 export { }