@canva/design 1.10.0 → 2.0.0-beta.1

package/beta.d.ts

@@ -0,0 +1,2910 @@
+/**
+ * Adds an audio track to the user's design.
+ * @public
+ * @param audioTrack - The audio track to add to the user's design.
+ */
+export declare const addAudioTrack: (audioTrack: AudioTrack) => Promise<void>;
+
+/**
+ * @public
+ * Add element to responsive documents, which slot things into a text stream
+ */
+export declare const addElementAtCursor: (
+  element: ElementAtCursor | TableElement
+) => Promise<void>;
+
+/**
+ * @public
+ * Add element to fixed designs, which use a coordinate-based positioning system.
+ */
+export declare const addElementAtPoint: (
+  element: DesignElement | ElementAtPoint | TableElement | RichtextElement
+) => Promise<void>;
+
+/**
+ * @deprecated
+ * @public
+ * Adds a native element to the user's design.
+ * @param element - The element to add to the user's design.
+ */
+export declare const addNativeElement: (
+  element: NativeElement | NativeElementWithBox
+) => Promise<void>;
+
+/**
+ * @public
+ * Adds a new page immediately after the currently selected page.
+ * @param opts - Configuration for the new page to be added.
+ */
+export declare const addPage: (opts?: {
+  /**  Elements to be added to the page */
+  elements?: ElementAtPoint[];
+  /**
+   * The page background. This can be a solid color, an image or a video.
+   **/
+  background?: PageBackgroundFill;
+  /**  A page title which must be no longer than 255 characters */
+  title?: string;
+}) => Promise<void>;
+
+/**
+ * @public
+ * Alternative text for a11y compliance.
+ */
+export declare type AltText = {
+  /**
+   * The text content.
+   */
+  text: string;
+  /**
+   * Indicates where the alternative text should be displayed.
+   *
+   * @remarks
+   * - If `true`, the alternative text will only be displayed in the editor.
+   * - If `false`, the alternative text will be displayed in the editor and in view-only mode.
+   */
+  decorative: boolean | undefined;
+};
+
+/**
+ * @public
+ * A callback that runs when:
+ *
+ * - the app element is created
+ * - the app element's data is updated
+ * - the user selects an existing app element
+ *
+ * @param appElement - Information about the app element that was changed.
+ */
+export declare type AppElementChangeHandler<A extends AppElementData> = (
+  appElement:
+    | {
+        /**
+         * The app element data in its most recent state.
+         */
+        data: A;
+        /**
+         * The version number of the app.
+         */
+        version: number;
+      }
+    | undefined
+) => void;
+
+/**
+ * @public
+ * A client that provides methods for creating and managing the lifecycle of an app element.
+ */
+export declare interface AppElementClient<A extends AppElementData> {
+  /**
+   * If an app element is selected, the element's data is overwritten and the element is re-rendered.
+   * Otherwise, the provided data is used to create a new app element.
+   * @param appElementData - The data to attach to the app element. Existing data will be overwritten.
+   * @param placement - The position, dimensions, and rotation of the app element.
+   */
+  addOrUpdateElement(appElementData: A, placement?: Placement): Promise<void>;
+  /**
+   * A callback that runs when:
+   *
+   * - the app element is created
+   * - the app element's data is updated
+   * - the user selects an existing app element
+   *
+   * @param handler - The callback to run when the app element changes.
+   */
+  registerOnElementChange(handler: AppElementChangeHandler<A>): void;
+}
+
+/**
+ * @public
+ * Options for creating an app element client.
+ */
+export declare type AppElementClientConfiguration<A extends AppElementData> = {
+  /**
+   * Registers a callback that renders an app element based on the data it receives.
+   */
+  render: AppElementRenderer<A>;
+};
+
+/**
+ * @public
+ * The data associated with an app element.
+ */
+export declare type AppElementData = Record<string, Value>;
+
+/**
+ * @public
+ * A callback function that renders an app element based on the data it receives.
+ * @param appElementData - The data the callback must use to render the app element.
+ */
+export declare type AppElementRenderer<A extends AppElementData> = (
+  appElementData: A
+) => AppElementRendererOutput;
+
+/**
+ * @public
+ * An array of one or more elements to render as output of an app element.
+ */
+export declare type AppElementRendererOutput = NativeSimpleElementWithBox[];
+
+/**
+ * @public
+ * A unique identifier that references an app runtime process
+ */
+export declare type AppProcessId = string & {
+  __appProcessId: never;
+};
+
+/**
+ * @public
+ * Audio track to be added to the design at the end of a drag event.
+ */
+export declare type AudioDragConfig = {
+  /**
+   * The type of element.
+   */
+  type: "audio";
+  /**
+   * A function that returns a reference (ref) to an audio asset in Canva's backend.
+   */
+  resolveAudioRef: () => Promise<{
+    ref: AudioRef;
+  }>;
+  /**
+   * The duration of the audio track, in milliseconds.
+   */
+  durationMs: number;
+  /**
+   * A human readable title for the audio track.
+   */
+  title: string;
+};
+
+/**
+ * @public
+ * A unique identifier that references an audio asset in Canva's backend.
+ */
+export declare type AudioRef = string & {
+  __audioRef: never;
+};
+
+/**
+ * @public
+ * An audio track that can be added to a design.
+ */
+export declare type AudioTrack = {
+  /**
+   * A unique identifier that points to an audio asset in Canva's backend.
+   */
+  ref: AudioRef;
+};
+
+/**
+ * @public
+ * A segment of a richtext range.
+ */
+export declare type Bounds = {
+  /**
+   * The starting position of the segment.
+   *
+   * @remarks
+   * This is zero-based, meaning the first character of the range is at index 0.
+   */
+  index: number;
+  /**
+   * The number of characters in the segment, starting from the index.
+   */
+  length: number;
+};
+
+/**
+ * @deprecated
+ * @public
+ * A position, rotation, and set of dimensions.
+ *
+ * @remarks
+ * The position and dimensions are relative to the container.
+ */
+export declare type Box = Position & (WidthAndHeight | Width | Height);
+
+/**
+ * @public
+ * An individual cell in a table element.
+ */
+export declare type Cell = {
+  /**
+   * The attributes of the cell.
+   */
+  attributes?: CellAttributes;
+  /**
+   * The number of columns that the cell occupies.
+   */
+  colSpan?: number;
+  /**
+   * The number of rows that the cell occupies.
+   */
+  rowSpan?: number;
+} & CellContent;
+
+/**
+ * @public
+ * Additional attributes of table cell.
+ */
+declare type CellAttributes = {
+  /**
+   * The background color of the cell, as a hex code.
+   */
+  backgroundColor?: string;
+} & TextAttributes;
+
+/**
+ * @public
+ * The content of a table element's cell.
+ * Cell only supports plain text.
+ */
+declare type CellContent =
+  | {
+      /**
+       * Indicates that the cell doesn't have any content.
+       */
+      type: "empty";
+    }
+  | {
+      /**
+       * Indicates that the cell contains plaintext content.
+       */
+      type: "string";
+      /**
+       * The plaintext content of the cell.
+       *
+       * @remarks
+       * If an empty string is provided, the `type` will change to `"empty"`.
+       */
+      value: string;
+    };
+
+/**
+ * Image element or content to be added to the design at the end of a drag event.
+ */
+declare type CommonImageDragConfig = {
+  /**
+   * The type of element.
+   */
+  type: "image";
+  /**
+   * The dimensions of the preview image.
+   */
+  previewSize: Dimensions;
+};
+
+/**
+ * @public
+ * A snapshot of content from a user's design.
+ */
+export declare interface ContentDraft<T> {
+  /**
+   * The individual content items that exist within the snapshot.
+   *
+   * @remarks
+   * Any changes made to this array won't be reflected in the user's design until the `save` method is called.
+   */
+  readonly contents: readonly T[];
+  /**
+   * Saves changes made to the content items in the `contents` array.
+   *
+   * @remarks
+   * Once this method is called:
+   *
+   * - Any changes the app has made to to the content will be reflected in the user's design.
+   * - Any changes the user has made to the content since the snapshot was created may be overwritten.
+   * - Only properties that are different from the original state will be written to the design.
+   */
+  save(): Promise<void>;
+}
+
+/**
+ * @public
+ * A type of content that can be read from a user's design.
+ */
+export declare type ContentType = "richtext";
+
+/**
+ * @beta
+ * Options for configuring where content in a design should be queried from.
+ */
+declare type ContextOptions = {
+  context: "current_page";
+};
+
+/**
+ * @public
+ * A set of X and Y coordinates.
+ */
+export declare type Coordinates = {
+  /**
+   * X coordinate, in pixels.
+   */
+  x: number;
+  /**
+   * Y coordinate, in pixels.
+   */
+  y: number;
+};
+
+/**
+ * @public
+ * Creates a new RichtextRange object, which contains methods to manipulate text.
+ */
+export declare function createRichtextRange(): RichtextRange;
+
+/**
+ * @beta
+ * Describes a part of a design.
+ */
+export declare type DesignContext = DesignContextOptions["type"];
+
+/**
+ * @beta
+ * Options for configuring which part of a design to read.
+ */
+declare type DesignContextOptions = {
+  /**
+   * The type of context.
+   */
+  type: "current_page";
+};
+
+/**
+ * @beta
+ * Provides methods for reading and updating the structure and content of a design.
+ */
+export declare namespace DesignEditing {
+  /**
+   * @beta
+   * A snapshot containing a fragment of a design's structure and content.
+   */
+  export type DesignDraft<D> = Readonly<D> & {
+    /**
+     * Saves any changes made to the draft.
+     *
+     * @remarks
+     * - Any changes to the draft are only reflected in the design after this method is called.
+     * - Once this method is called, further changes to the draft are not possible.
+     */
+    save(): Promise<void>;
+  };
+  /**
+   * @beta
+   * Options for creating an image fill in the element builder
+   */
+  export type ImageFillOpts = Partial<ImageFill> &
+    Required<Pick<ImageFill, "type" | "imageRef">>;
+  /**
+   * @beta
+   * Options for creating a video fill in the element builder
+   */
+  export type VideoFillOpts = Partial<VideoFill> &
+    Required<Pick<VideoFill, "type" | "videoRef">>;
+  /**
+   * @beta
+   * Options for creating a media fill in the element builder
+   */
+  export type MediaFillOpts = ImageFillOpts | VideoFillOpts;
+  /**
+   * @beta
+   * Options for creating a fill in the element builder
+   */
+  export type FillOpts =
+    | {
+        color: ColorFillOpts;
+        media?: MediaFillOpts;
+      }
+    | {
+        color?: ColorFillOpts;
+        media: MediaFillOpts;
+      };
+  /**
+   * @beta
+   */
+  export type ColorFillOpts = Exclude<ColorFill, Unsupported>;
+  /**
+   * @beta
+   * Options for creating a stroke in the element builder
+   */
+  export type StrokeOpts = Pick<Stroke, "weight"> & {
+    color: ColorFillOpts;
+  };
+  /**
+   * @beta
+   * Options for creating a shape path in the element builder
+   */
+  export type ShapePathOpts = Pick<Path, "d"> & {
+    fill?: FillOpts;
+    stroke?: StrokeOpts;
+  };
+  /**
+   * @beta
+   * Options for creating a rect element.
+   */
+  export type CreateRectElementOpts = Required<
+    Pick<Element, "top" | "left" | "width" | "height">
+  > & {
+    fill?: FillOpts;
+  } & {
+    stroke?: StrokeOpts;
+  } & Partial<Omit<RectElement, "fill" | "stroke" | "type">>;
+  /**
+   * @beta
+   * Options for creating a shape element.
+   */
+  export type CreateShapeElementOpts = Required<
+    Pick<ShapeElement, "top" | "left" | "width" | "height" | "viewBox">
+  > & {
+    paths: ShapePathOpts[];
+  } & Partial<Omit<ShapeElement, "type" | "paths">>;
+  /**
+   * @beta
+   * Options for creating an embed element.
+   */ export type CreateEmbedElementOpts = Required<
+    Pick<EmbedElement, "top" | "left" | "width" | "height" | "url">
+  > &
+    Partial<Omit<EmbedElement, "type">>;
+  /**
+   * @beta
+   * Options for creating a text element.
+   */
+  export type CreateTextElementOpts = Required<
+    Pick<TextElement, "top" | "left" | "width" | "text">
+  > &
+    Partial<Omit<TextElement, "type" | "height">>;
+  /**
+   * @beta
+   * Provides methods for creating elements.
+   *
+   * @remarks
+   * These methods don't add the elements to the design. They only return elements that can
+   * be added to a design, such as with the `insertAfter` method.
+   */
+  export interface ElementBuilder {
+    /**
+     * Creates a rect element.
+     * @param opts - Options for creating the rect element.
+     */
+    createRectElement(opts: CreateRectElementOpts): RectElement;
+    /**
+     * Creates a shape element.
+     * @param opts - Options for creating the shape element.
+     */
+    createShapeElement(opts: CreateShapeElementOpts): ShapeElement;
+    /**
+     * Creates an embed element.
+     * @param opts - Options for creating the embed element.
+     */
+    createEmbedElement(opts: CreateEmbedElementOpts): EmbedElement;
+    /**
+     * Creates a text element.
+     * @param opts - Options for creating the text element.
+     */
+    createTextElement(opts: CreateTextElementOpts): TextElement;
+    /**
+     * Creates a richtext range.
+     */
+    createRichtextRange(): RichtextRange;
+  }
+  /**
+   * @beta
+   * The result of reading part of a design when the context is the current page.
+   */
+  export type CurrentPageResult = DesignDraft<{
+    /**
+     * The current page of the design.
+     */
+    page: FixedPage;
+  }>;
+  /**
+   * @beta
+   * The result of reading part of a design.
+   */
+  export type DesignOpenResult = CurrentPageResult;
+  /**
+   * A function called for each item in the list.
+   *
+   * @param item - The current item in the list.
+   * @param index - The index of the current item.
+   */
+  export type ForEachCallback<T> = (item: T, index: number) => void;
+  /**
+   * A function that determines if an item should be included in the result.
+   *
+   * @param item - The item to test.
+   * @returns `true` if the item should be included, otherwise `false`.
+   */
+  export type FilterPredicate<T> = (item: T) => boolean;
+  /**
+   * A type predicate function that determines if an item is of a specific type.
+   *
+   * @param item - The item to test.
+   * @returns `true` if the item is of type `C`, otherwise `false`.
+   */
+  export type TypeFilterPredicate<T, C extends T> = (item: T) => item is C;
+  /**
+   * A list that cannot be changed.
+   */
+  export interface ReadableList<T> {
+    /**
+     * Gets the number of items in the list.
+     *
+     * @returns The number of items.
+     */
+    count(): number;
+    /**
+     * Converts the list to an array.
+     *
+     * @returns An array containing all items. The items are the same as in the list.
+     */
+    toArray(): readonly T[];
+    /**
+     * Executes a function for each item in the list.
+     *
+     * @param callback - The function to run for each item.
+     */
+    forEach(callback: ForEachCallback<T>): void;
+    /**
+     * Creates a new array with items that match a specific type.
+     *
+     * @param filter - A function that checks if an item is of type `C`.
+     * @returns An array of items that are of type `C`.
+     */
+    filter<C extends T>(filter: TypeFilterPredicate<T, C>): readonly C[];
+    /**
+     * Creates a new array with items that pass a test.
+     *
+     * @param filter - A function that tests each item. Returns `true` to keep the item.
+     * @returns An array of items that passed the test.
+     */
+    filter(filter: FilterPredicate<T>): readonly T[];
+  }
+  /**
+   * @beta
+   * A list of items that can be changed.
+   */
+  export interface MutableList<T> {
+    /**
+     * Adds a copy of an item to the list and places it right before another item.
+     *
+     * @param ref - The existing item to place the new item before.
+     * If `ref` is `undefined`, the new item is added at the end of the list.
+     * If `ref` does not exist in the list, the operation fails.
+     *
+     * @param item - The item to add. A copy of this item will be inserted.
+     *
+     * @returns
+     * The added item, or `undefined` if the operation failed.
+     */
+    insertBefore(ref: T | undefined, item: T): T | undefined;
+    /**
+     * Adds a copy of an item to the list and places it right after another item.
+     *
+     * @param ref - The existing item to place the new item after.
+     * If `ref` is `undefined`, the new item is added at the end of the list.
+     * If `ref` does not exist in the list, the operation fails.
+     *
+     * @param item - The item to add. A copy of this item will be inserted.
+     *
+     * @returns
+     * The added item, or `undefined` if the operation failed.
+     */
+    insertAfter(ref: T | undefined, item: T): T | undefined;
+    /**
+     * Moves an existing item to a new position right before another item.
+     *
+     * @param ref - The existing item to move the item before.
+     * If `ref` is `undefined`, the item is moved to the end of the list.
+     * If `ref` does not exist in the list, the operation fails.
+     *
+     * @param item - The item to move.
+     * The operation fails if the item is not already in the list.
+     */
+    moveBefore(ref: T | undefined, item: T): void;
+    /**
+     * Moves an existing item to a new position right after another item.
+     *
+     * @param ref - The existing item to move the item after.
+     * If `ref` is `undefined`, the item is moved to the end of the list.
+     * If `ref` does not exist in the list, the operation fails.
+     *
+     * @param item - The item to move.
+     * The operation fails if the item is not already in the list.
+     */
+    moveAfter(ref: T | undefined, item: T): void;
+    /**
+     * Removes an item from the list.
+     *
+     * @param item - The item to remove from the list.
+     */
+    delete(item: T): void;
+  }
+  /**
+   * @beta
+   * A list of items that can be read and updated.
+   */
+  export interface List<T> extends ReadableList<T>, MutableList<T> {}
+  /**
+   * @beta
+   * Represents an element that's not supported by the Apps SDK.
+   */
+  export interface Unsupported {
+    /**
+     * The type of element.
+     */
+    readonly type: "unsupported";
+  }
+  /**
+   * @beta
+   * A single valid character in a hex code.
+   */
+  export type Hex = `123456790abcdef`[number];
+  /**
+   * @beta
+   * A six-character hexadecimal color code prefixed with a `#`.
+   */
+  export type HexCode = `#${Hex}${Hex}${Hex}${Hex}${Hex}${Hex}`;
+  /**
+   * @beta
+   * A set of dimensions.
+   */
+  export interface Dimensions {
+    /**
+     * A width, in pixels.
+     */
+    readonly width: number;
+    /**
+     * A height, in pixels.
+     */
+    readonly height: number;
+  }
+  /**
+   * @beta
+   * An image that fills the interior of a path.
+   */
+  export interface ImageFill {
+    /**
+     * The type of media.
+     */
+    readonly type: "image";
+    /**
+     * A unique identifier that points to an image asset in Canva's backend.
+     */
+    imageRef: string;
+    /**
+     * If `true`, the image is flipped horizontally.
+     */
+    flipX: boolean;
+    /**
+     * If `true`, the image is flipped vertically.
+     */
+    flipY: boolean;
+  }
+  /**
+   * @beta
+   * A video that fills the interior of a path.
+   */
+  export interface VideoFill {
+    /**
+     * The type of media.
+     */
+    readonly type: "video";
+    /**
+     * A unique identifier that points to a video asset in Canva's backend.
+     */
+    videoRef: string;
+    /**
+     * If `true`, the video is flipped horizontally.
+     */
+    flipX: boolean;
+    /**
+     * If `true`, the video is flipped vertically.
+     */
+    flipY: boolean;
+  }
+  /**
+   * @beta
+   * A media item that fills the interior of a path.
+   */
+  export type MediaFill = ImageFill | VideoFill;
+  /**
+   * @beta
+   * A solid color that fills the interior of a path.
+   */
+  export interface SolidFill {
+    /**
+     * The type of color.
+     */
+    readonly type: "solid";
+    /**
+     * The color of the fill, as a hex code.
+     *
+     * @remarks
+     * - Must be six characters long.
+     * - Must start with a `#`.
+     * - Must use lowercase letters.
+     */
+    color: HexCode;
+  }
+  /**
+   * @beta
+   * A color that fills the interior of a path.
+   */
+  export type ColorFill = SolidFill | Unsupported;
+  /**
+   * @beta
+   * Describes how a path is filled with color or media.
+   *
+   * @remarks
+   * If both `media` and `color` are defined, `media` takes precedence.
+   */
+  export interface Fill {
+    /**
+     * The media fill for the path, if any.
+     */
+    media: MediaFill | undefined;
+    /**
+     * The color fill for the path, if any.
+     */
+    color: ColorFill | undefined;
+  }
+  /**
+   * @beta
+   * The scale and cropping of a shape.
+   *
+   * @remarks
+   * This is similar to the `viewBox` attribute of an `SVGElement`.
+   */
+  export type AlignedBox = {
+    /**
+     * The distance of the shape from the top edge of the element, in pixels.
+     */
+    readonly top: number;
+    /**
+     * The distance of the shape from the left edge of the element, in pixels.
+     */
+    readonly left: number;
+    /**
+     * The width of the view box, in pixels.
+     */
+    readonly width: number;
+    /**
+     * The height of the view box, in pixels.
+     */
+    readonly height: number;
+  };
+  /**
+   * @beta
+   * A path that defines the structure of a shape element.
+   */
+  export interface Path {
+    /**
+     * The shape of the path.
+     *
+     * @remarks
+     * This is similar to the `d` attribute of an SVG's `path` element, with some limitations:
+     *
+     * - Must start with an `M` command.
+     * - Only one `M` command is allowed.
+     * - `Q` and `T` commands are not permitted.
+     * - The path must be closed using a `Z` command or matching start and end coordinates.
+     */
+    readonly d: string;
+    /**
+     * The appearance of the path's interior.
+     */
+    readonly fill: Fill;
+    /**
+     * The stroke (outline) of the path, if any.
+     */
+    readonly stroke: Stroke | undefined;
+  }
+  /**
+   * @beta
+   * Represents an outline, such as the border of an element.
+   */
+  export interface Stroke {
+    /**
+     * The weight (thickness) of the stroke.
+     *
+     * @remarks
+     * - Minimum: 0
+     * - Maximum: 100
+     */
+    weight: number;
+    /**
+     * The color of the stroke.
+     */
+    color: ColorFill;
+  }
+  /**
+   * @beta
+   * The basic properties of an element.
+   *
+   * @remarks
+   * These properties are shared by all elements in a design.
+   */
+  export interface Element extends Dimensions {
+    /**
+     * If `true`, the element is locked and cannot be modified.
+     */
+    readonly locked: boolean;
+    /**
+     * The distance from the top edge of the container, in pixels.
+     *
+     * @remarks
+     * - The pixels are relative to their container.
+     * - Minimum: -32768
+     * - Maximum: 32767
+     */
+    top: number;
+    /**
+     * The distance from the left edge of the container, in pixels.
+     *
+     * @remarks
+     * - The pixels are relative to their container.
+     * - Minimum: -32768
+     * - Maximum: 32767
+     */
+    left: number;
+    /**
+     * A rotation, in degrees.
+     *
+     * @remarks
+     * - Minimum: -180
+     * - Maximum: 180
+     */
+    rotation: number;
+    /**
+     * Transparency as a percentage.
+     *
+     * @remarks
+     * - Minimum: 0
+     * - Maximum: 1
+     */
+    transparency: number;
+  }
+  /**
+   * @beta
+   * Represents a rectangular element.
+   */
+  export interface Rect {
+    /**
+     * The type of content.
+     */
+    readonly type: "rect";
+    /**
+     * The appearance of the rectangle's interior.
+     */
+    readonly fill: Fill;
+    /**
+     * The outline of the rectangle.
+     */
+    readonly stroke: Stroke;
+  }
+  /**
+   * @beta
+   * Represents a vector shape element.
+   */
+  export interface Shape {
+    /**
+     * The type of content.
+     */
+    readonly type: "shape";
+    /**
+     * The scale and cropping of the shape.
+     */
+    viewBox: AlignedBox;
+    /**
+     * The paths that define the structure of the shape.
+     *
+     * @remarks
+     * - Must have between 1 and 30 paths.
+     * - Total size of all paths must not exceed 2kb.
+     * - Maximum of 6 unique fill colors across all paths.
+     */
+    readonly paths: ReadableList<Path>;
+  }
+  /**
+   * @beta
+   * Represents group content.
+   */
+  export interface Group<C> {
+    /**
+     * The type of content.
+     */
+    readonly type: "group";
+    /**
+     * The elements that exist within the group.
+     */
+    readonly contents: ReadableList<C>;
+  }
+  /**
+   * @beta
+   * Represents rich media content.
+   */
+  export interface Embed {
+    /**
+     * The type of content.
+     */
+    readonly type: "embed";
+    /**
+     * The URL of the rich media.
+     *
+     * @remarks
+     * This URL must be supported by the Iframely API.
+     */
+    readonly url: string;
+  }
+  /**
+   * @beta
+   * Represents text content.
+   */
+  export interface Text {
+    /**
+     * The type of content.
+     */
+    readonly type: "text";
+    /**
+     * The text content.
+     */
+    readonly text: RichtextRange;
+  }
+  /**
+   * @beta
+   * An element that renders a rectangle.
+   *
+   * @remarks
+   * The rectangle can be filled with image content, video content, or a solid color.
+   */
+  export interface RectElement extends Rect, Element {}
+  /**
+   * @beta
+   * An element that renders a vector shape.
+   */
+  export interface ShapeElement extends Shape, Element {}
+  /**
+   * @beta
+   * An element that renders a group of other elements.
+   */
+  export interface GroupElement extends Group<GroupContentElement>, Element {}
+  /**
+   * @beta
+   * An element that embeds rich media, such as a YouTube video.
+   */
+  export interface EmbedElement extends Embed, Element {}
+  /**
+   * @beta
+   * An element that renders text content.
+   */
+  export interface TextElement extends Text, Element {}
+  /**
+   * @beta
+   * An element that is not supported by the Apps SDK.
+   */
+  export interface UnsupportedElement extends Unsupported, Element {}
+  /**
+   * @beta
+   * An element that can exist in a group element.
+   */
+  export type GroupContentElement =
+    | RectElement
+    | ShapeElement
+    | EmbedElement
+    | TextElement
+    | UnsupportedElement;
+  /**
+   * @beta
+   * An element that can exist on a fixed page.
+   */
+  export type FixedElement =
+    | RectElement
+    | ShapeElement
+    | GroupElement
+    | EmbedElement
+    | TextElement
+    | UnsupportedElement;
+  /**
+   * @beta
+   * A page with fixed dimensions.
+   */
+  export interface FixedPage {
+    /**
+     * The type of page.
+     */
+    readonly type: "fixed";
+    /**
+     * If `true`, the page is locked and cannot be modified.
+     */
+    readonly locked: boolean;
+    /**
+     * The dimensions of the page. `dimensions` is undefined for whiteboard pages.
+     */
+    readonly dimensions: Dimensions | undefined;
+    /**
+     * The background of the page. `background` is undefined for whiteboard pages.
+     */
+    readonly background: Fill | undefined;
+    /**
+     * The elements on the page.
+     *
+     * @remarks
+     * Elements are rendered in the order they appear in the list.
+     * Later elements appear on top of earlier ones.
+     */
+    readonly elements: List<FixedElement>;
+  }
+  /**
+   * @beta
+   * A page in a design.
+   */
+  export type Page = FixedPage | Unsupported;
+
+  {
+  }
+}
+
+/**
+ * @public
+ * An element that's natively supported by the Canva editor.
+ */
+export declare type DesignElement = NativeElement;
+
+/**
+ * @beta
+ * A callback for reading and updating part of a design.
+ * @param draft - The result of reading part of a design.
+ * @param helpers - Helper methods for reading and updating the design.
+ */
+export declare type DesignOpenCallback = (
+  draft: DesignEditing.DesignOpenResult,
+  helpers: {
+    /**
+     * Provides methods for creating elements.
+     */
+    elementBuilder: DesignEditing.ElementBuilder;
+  }
+) => Promise<void> | void;
+
+/**
+ * @beta
+ * Options for configuring which part of a design to read.
+ */
+export declare type DesignOpenOptions = DesignContextOptions;
+
+/**
+ * @public
+ * Provides methods for managing the lifecycle of overlays, such as selected image overlays.
+ */
+export declare type DesignOverlay = {
+  /**
+   * Registers a callback that runs when the `canOpen` state of an overlay target changes.
+   * @param opts - Options for configuring the callback.
+   */
+  registerOnCanOpen<Target extends OverlayTarget>(opts: {
+    /**
+     * The target to check the `canOpen` state of.
+     */
+    target: Target;
+    /**
+     * A callback that runs when the `canOpen` state of the specified target changes.
+     *
+     * @param event - Information about whether or not an overlay can be opened for the specified target.
+     *
+     * @remarks
+     * This callback fires immediately.
+     */
+    onCanOpen(event: OverlayOpenableEvent<Target>): void;
+  }): () => void;
+};
+
+/**
+ * @public
+ * Provides methods for interacting with selected content.
+ */
+export declare type DesignSelection = {
+  /**
+   * Registers a callback that runs when the specified type of content is selected.
+   *
+   * @param opts - Options for configuring the content selection callback.
+   *
+   * @remarks
+   * This callback fires immediately if content is already selected when the callback is registered.
+   */
+  registerOnChange<Scope extends SelectionScope>(opts: {
+    /**
+     * The type of content that triggers a selection change event.
+     */
+    scope: Scope;
+    /**
+     * The callback to run when the selected content changes.
+     * @param event - Information about the selection change event.
+     */
+    onChange(event: SelectionEvent<Scope>): void;
+  }): () => void;
+};
+
+/**
+ * @public
+ * JWT that contains the Design ID and App ID.
+ */
+export declare type DesignToken = {
+  token: string;
+};
+
+/**
+ * @public
+ * A set of dimensions.
+ */
+export declare type Dimensions = {
+  /**
+   * A width, in pixels.
+   */
+  width: number;
+  /**
+   * A height, in pixels.
+   */
+  height: number;
+};
+
+/**
+ * @public
+ * Callbacks for handling drag and drop events.
+ */
+export declare type DragCallback = {
+  /**
+   * A callback that runs at the start of a drag event.
+   * @param element - The element being dragged.
+   */
+  onDragStart: (element: HTMLElement) => void;
+  /**
+   * A callback that runs at the end of a drag event.
+   * @param element - The element being dragged.
+   */
+  onDragEnd: (element: HTMLElement) => void;
+};
+
+/**
+ * @public
+ * Options for adding drag and drop behavior to an `HTMLElement`.
+ */
+export declare type DraggableElementData = ElementData | ImageElementData;
+
+/**
+ * @public
+ * An event that occurs when a user starts dragging an HTML element.
+ */
+export declare type DragStartEvent<E extends Element> = Pick<
+  DragEvent,
+  "dataTransfer" | "currentTarget" | "preventDefault" | "clientX" | "clientY"
+> & {
+  currentTarget: E;
+};
+
+/**
+ * @beta
+ * Options for configuring how a design is read.
+ */
+export declare type EditContentOptions<T extends ContentType> = {
+  contentType: T;
+} & ContextOptions;
+
+/**
+ * @public
+ * Elements targeting a cursor are a subset of the base Element
+ **/
+export declare type ElementAtCursor =
+  | ImageElement
+  | VideoElement
+  | EmbedElement
+  | TextElement
+  | RichtextElement;
+
+/**
+ * @public
+ * An element that's natively supported by the Canva editor and has positional properties.
+ */
+export declare type ElementAtPoint =
+  | NativeElementWithBox
+  | RichtextElementAtPoint;
+
+/**
+ * @public
+ * Options for adding drag and drop behavior to an `HTMLElement`.
+ */
+export declare type ElementData = DragCallback & {
+  /**
+   * The `HTMLElement` to be made draggable.
+   */
+  node: HTMLElement;
+};
+
+/**
+ * @public
+ * Embed element to be added to the design at the end of a drag event.
+ */
+export declare type EmbedDragConfig = {
+  /**
+   * The type of element.
+   */
+  type: "embed";
+  /**
+   * The dimensions of the preview image.
+   */
+  previewSize: Dimensions;
+  /**
+   * The URL of an image to display under the user's cursor during the drag and drop event.
+   */
+  previewUrl: string;
+  /**
+   * The URL of media that can be embedded, such as the URL of a YouTube video.
+   *
+   * @remarks
+   * This URL must be supported by the Iframely API.
+   */
+  embedUrl: string;
+};
+
+/**
+ * @public
+ * An element that renders rich media, such as a YouTube video.
+ */
+export declare type EmbedElement = NativeEmbedElement;
+
+/**
+ * @public
+ * An element that renders rich media, such as a YouTube video, and has positional properties.
+ */
+export declare type EmbedElementAtPoint = NativeEmbedElementWithBox;
+
+/**
+ * @public
+ * The result when a user abandons the export flow, such as by closing the export menu.
+ */
+export declare type ExportAborted = {
+  /**
+   * The status of the export flow.
+   */
+  status: "aborted";
+};
+
+/**
+ * @public
+ * The exported file.
+ */
+export declare type ExportBlob = {
+  /**
+   * The URL of the exported design.
+   *
+   * @remarks
+   * If a user's design contains multiple pages but is exported in a format that doesn't support multiple pages,
+   * this URL will point to a ZIP file that contains each page as a separate file.
+   *
+   * For example:
+   *
+   * - If a single-page design is exported as a JPG, the URL will point to a JPG file.
+   * - If a multi-page design is exported as a JPG, the URL will point to a ZIP file that contains a JPG file for each page.
+   * - If a multi-page design is exported as a PDF file, the URL will point to a PDF file.
+   *
+   * The following file types support multiple pages:
+   *
+   * - `"GIF"`
+   * - `"PDF_STANDARD"`
+   * - `"PPTX"`
+   * - `"VIDEO"`
+   *
+   * The following file types do not support multiple pages:
+   *
+   * - `"JPG"`
+   * - `"PNG"`
+   * - `"SVG"`
+   */
+  url: string;
+};
+
+/**
+ * @public
+ * The result when a user successfully completes an export flow.
+ */
+export declare type ExportCompleted = {
+  /**
+   * The status of the export flow.
+   */
+  status: "completed";
+  /**
+   * The title of the design, if set by the user.
+   */
+  title?: string;
+  /**
+   * The exported files.
+   *
+   * @remarks
+   * This array only contains one element. This is because, if a multi-page design is exported as multiple files, the files
+   * are exported in a ZIP file. In the future, there'll be an option for each file to be a separate element in the array.
+   */
+  exportBlobs: ExportBlob[];
+};
+
+/**
+ * @public
+ * The types of files that Canva supports for exported designs.
+ */
+export declare type ExportFileType =
+  | "png"
+  | "jpg"
+  | "pdf_standard"
+  | "video"
+  | "gif"
+  | "pptx"
+  | "svg";
+
+/**
+ * @public
+ * Options for configuring the export of a design.
+ */
+export declare type ExportRequest = {
+  /**
+   * The types of files the user can export their design as.
+   *
+   * @remarks
+   * You must provide at least one file type.
+   */
+  acceptedFileTypes: ExportFileType[];
+};
+
+/**
+ * @public
+ * The result of exporting a design.
+ */
+export declare type ExportResponse = ExportCompleted | ExportAborted;
+
+/**
+ * @public
+ * Image element or content to be added to the design at the end of a drag event.
+ *
+ * @remarks
+ * This type is only used when the image data is from an external URL.
+ */
+export declare type ExternalImageDragConfig = CommonImageDragConfig & {
+  /**
+   * A function that returns a reference (ref) to an audio asset in Canva's backend.
+   */
+  resolveImageRef: () => Promise<{
+    ref: ImageRef;
+  }>;
+  /**
+   * The URL of an image to display under the user's cursor during the drag and drop event.
+   */
+  previewUrl: string;
+  /**
+   * The dimensions of the full-size image.
+   */
+  fullSize?: Dimensions;
+};
+
+/**
+ * @public
+ * The appearance of a path's interior.
+ *
+ * @remarks
+ * The `color` and `asset` properties are mutually exclusive.
+ */
+export declare type Fill = {
+  /**
+   * If `true`, users can replace a fill by dropping an image or video onto it.
+   */
+  dropTarget?: boolean;
+  /**
+   * The color of the fill as a hex code.
+   *
+   * @remarks
+   * The hex code must include all six characters and be prefixed with a `#` symbol.
+   *
+   * @example
+   * " #ff0099"
+   */
+  color?: string;
+  /**
+   * An image or video to use as the fill.
+   */
+  asset?: ImageFill | VideoFill;
+};
+
+/**
+ * @public
+ * A reference to a font that can be used in other parts of the SDK.
+ */
+export declare type FontRef = string & {
+  __fontRef: never;
+};
+
+/**
+ * @public
+ * Font weights supported in the SDK.
+ **/
+export declare type FontWeight =
+  | "normal"
+  | "thin"
+  | "extralight"
+  | "light"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "ultrabold"
+  | "heavy";
+
+/**
+ * Allows to get the context of currently selected page.
+ * @public
+ * @returns Page context of currently selected page
+ */
+export declare const getCurrentPageContext: () => Promise<PageContext>;
+
+/**
+ * @public
+ * Gets the default dimensions that a new page will have when it is added to a design.
+ * It is possible for a user to resize a page without resizing the entire design, e.g. by clicking
+ * "Expand to Whiteboard". However, there will always be a single set of default dimensions for a
+ * design that is applied whenever a new page is created.
+ *
+ * Returns `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
+ */
+export declare const getDefaultPageDimensions: () => Promise<
+  Dimensions | undefined
+>;
+
+/**
+ * @public
+ * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
+ */
+export declare function getDesignToken(): Promise<DesignToken>;
+
+/**
+ * @public
+ * An element that's natively supported by the Canva editor, can exist within a group, and has positional properties.
+ */
+export declare type GroupContentAtPoint = NativeSimpleElementWithBox;
+
+/**
+ * @public
+ * An element that contains two or more elements.
+ */
+export declare type GroupElement = NativeGroupElement;
+
+/**
+ * @public
+ * An element that contains two or more elements and has positional properties.
+ */
+export declare type GroupElementAtPoint = NativeGroupElementWithBox;
+
+/**
+ * A set of dimensions with an auto-calculated width.
+ */
+declare type Height = {
+  /**
+   * Indicates that the width should be auto-calculated.
+   */
+  width: "auto";
+  /**
+   * A height, in pixels.
+   *
+   * @remarks
+   * - The pixels are relative to their container.
+   * - Minimum: 0
+   * - Maximum: 32767
+   */
+  height: number;
+};
+
+/**
+ * @public
+ * Image element or content to be added to the design at the end of a drag event.
+ */
+export declare type ImageDragConfig = ExternalImageDragConfig;
+
+/**
+ * @public
+ * Image element or content to be added to the design at the end of a drag event.
+ */
+export declare type ImageDragConfigForElement<E extends Element> =
+  E extends HTMLImageElement
+    ? Partial<ImageDragConfig> & Pick<ImageDragConfig, "type">
+    : ImageDragConfig;
+
+/**
+ * @public
+ * An element that renders image content.
+ */
+export declare type ImageElement = NativeImageElement;
+
+/**
+ * @public
+ * An element that renders image content and has positional properties.
+ */
+export declare type ImageElementAtPoint = NativeImageElementWithBox;
+
+/**
+ * @public
+ * Options for adding drag and drop behavior to an `HTMLImageElement`.
+ */
+export declare type ImageElementData = DragCallback & {
+  /**
+   * The `HTMLImageElement` to be made draggable.
+   */
+  node: HTMLImageElement;
+};
+
+/**
+ * @public
+ * An image asset that fills a path's interior.
+ */
+export declare type ImageFill = {
+  /**
+   * The type of fill.
+   */
+  type: "image";
+  /**
+   * A unique identifier that points to an image asset in Canva's backend.
+   */
+  ref: ImageRef;
+};
+
+/**
+ * @public
+ * A unique identifier that references an image asset in Canva's backend.
+ */
+export declare type ImageRef = string & {
+  __imageRef: never;
+};
+
+/**
+ * @public
+ * @param appElementConfig - Configuration for an AppElementClient
+ */
+export declare function initAppElement<A extends AppElementData>(
+  appElementConfig: AppElementClientConfiguration<A>
+): AppElementClient<A>;
+
+/**
+ * @public
+ * Options for formatting inline richtext.
+ */
+export declare type InlineFormatting = {
+  /**
+   * The color of the text as a hex code.
+   *
+   * @remarks
+   * The hex code must include all six characters and be prefixed with a `#` symbol.
+   *
+   * @example
+   * "#ff0099"
+   */
+  color?: string;
+  /**
+   * The weight (thickness) of the font.
+   *
+   * @remarks
+   * The available font weights depend on the font.
+   *
+   * @defaultValue "normal"
+   */
+  fontWeight?: FontWeight;
+  /**
+   * The style of the font.
+   * @defaultValue "normal"
+   */
+  fontStyle?: "normal" | "italic";
+  /**
+   * The decoration of the text.
+   * @defaultValue "none"
+   */
+  decoration?: "none" | "underline";
+  /**
+   * The strikethrough of the text.
+   * @defaultValue "none"
+   */
+  strikethrough?: "none" | "strikethrough";
+  /**
+   * An external URL that the text links to.
+   */
+  link?: string;
+};
+
+/**
+ * @deprecated
+ * @public
+ * An element that's natively supported by the Canva editor.
+ */
+export declare type NativeElement =
+  | NativeImageElement
+  | NativeVideoElement
+  | NativeEmbedElement
+  | NativeTextElement
+  | NativeShapeElement
+  | NativeGroupElement;
+
+/**
+ * @public
+ * The types of elements an app can add to a user's design.
+ */
+export declare type NativeElementType =
+  | "image"
+  | "embed"
+  | "text"
+  | "shape"
+  | "video";
+
+/**
+ * @deprecated The type has been superseded by `ElementAtPoint`.
+ * @public
+ * An element that's natively supported by the Canva editor and has positional properties.
+ */
+export declare type NativeElementWithBox =
+  | NativeImageElementWithBox
+  | NativeVideoElementWithBox
+  | NativeEmbedElementWithBox
+  | NativeTextElementWithBox
+  | NativeShapeElementWithBox
+  | NativeGroupElementWithBox;
+
+/**
+ * @deprecated The type has been superseded by `EmbedElement`.
+ * @public
+ * An element that renders rich media, such as a YouTube video.
+ */
+export declare type NativeEmbedElement = {
+  /**
+   * The type of element.
+   */
+  type: "embed";
+  /**
+   * The URL of the rich media.
+   *
+   * @remarks
+   * This URL must be supported by the Iframely API.
+   */
+  url: string;
+};
+
+/**
+ * @deprecated The type has been superseded by `EmbedElementAtPoint`.
+ * @public
+ * An element that renders rich media, such as a YouTube video, and has positional properties.
+ */
+export declare type NativeEmbedElementWithBox = {
+  /**
+   * The type of element.
+   */
+  type: "embed";
+  /**
+   * The URL of the rich media.
+   *
+   * @remarks
+   * This URL must be supported by the Iframely API.
+   */
+  url: string;
+} & Box;
+
+/**
+ * @deprecated The type has been superseded by `GroupElement`.
+ * @public
+ * An element that contains two or more elements.
+ */
+export declare type NativeGroupElement = {
+  /**
+   * The type of element.
+   */
+  type: "group";
+  /**
+   * The elements to render within the group.
+   *
+   * @remarks
+   * - Each element within a group must have dimensions and a position.
+   * - The dimensions and positions are relative to the dimensions and positions of the group.
+   */
+  children: NativeSimpleElementWithBox[];
+};
+
+/**
+ * @deprecated The type has been superseded by `GroupElementAtPoint`.
+ * @public
+ * An element that contains two or more elements and has positional properties.
+ */
+export declare type NativeGroupElementWithBox = {
+  /**
+   * The type of element.
+   */
+  type: "group";
+  /**
+   * The elements to render within the group.
+   *
+   * @remarks
+   * - Each element within a group must have dimensions and a position.
+   * - The dimensions and positions are relative to the dimensions and positions of the group.
+   */
+  children: NativeSimpleElementWithBox[];
+} & Box;
+
+/**
+ * @deprecated The type has been superseded by `ImageElement`.
+ * @public
+ * An element that renders image content.
+ */
+export declare type NativeImageElement = {
+  /**
+   * The type of element.
+   */
+  type: "image";
+  /**
+   * A description of the image content.
+   */
+  altText: AltText | undefined;
+} & (
+  | {
+      /**
+       * A data URL that contains the image data.
+       */
+      dataUrl: string;
+      /**
+       * A unique identifier that points to an image asset in Canva's backend.
+       */
+      ref?: never;
+    }
+  | {
+      /**
+       * A data URL that contains the image data.
+       */
+      dataUrl?: never;
+      /**
+       * A unique identifier that points to an image asset in Canva's backend.
+       */
+      ref: ImageRef;
+    }
+);
+
+/**
+ * @deprecated The type has been superseded by `ImageElementAtPoint`.
+ * @public
+ * An element that renders image content and has positional properties.
+ */
+export declare type NativeImageElementWithBox = NativeImageElement & Box;
+
+/**
+ * @deprecated The type has been superseded by `ShapeElement`.
+ * @public
+ * An element that renders a vector shape.
+ */
+export declare type NativeShapeElement = {
+  /**
+   * The type of element.
+   */
+  type: "shape";
+  /**
+   * Options for configuring the scale and cropping of the shape.
+   */
+  viewBox: ShapeViewBox;
+  /**
+   * The paths that define the structure of the shape.
+   *
+   * @remarks
+   * - There must be between 1 and 30 paths (inclusive).
+   * - The maximum combined size of all paths must not exceed 2kb.
+   * - The maximum number of unique fill colors across all paths is 6.
+   */
+  paths: ShapePath[];
+};
+
+/**
+ * @deprecated The type has been superseded by `ShapeElementAtPoint`.
+ * @public
+ * An element that renders a vector shape and has positional properties.
+ */
+export declare type NativeShapeElementWithBox = {
+  /**
+   * The type of element.
+   */
+  type: "shape";
+  /**
+   * Options for configuring the scale and cropping of a shape.
+   */
+  viewBox: ShapeViewBox;
+  /**
+   * The paths that define the structure of the shape.
+   *
+   * @remarks
+   * - There must be between 1 and 30 paths (inclusive).
+   * - The maximum combined size of all paths must not exceed 2kb.
+   * - The maximum number of unique fill colors across all paths is 6.
+   */
+  paths: ShapePath[];
+} & Box;
+
+/**
+ * @deprecated The type has been superseded by `GroupContentAtPoint`.
+ * @public
+ * An element that's natively supported by the Canva editor, can exist within a group, and has positional properties.
+ */
+export declare type NativeSimpleElementWithBox = Exclude<
+  NativeElementWithBox,
+  NativeGroupElementWithBox
+>;
+
+/**
+ * @deprecated The type has been superseded by `TextElement`.
+ * @public
+ * An element that renders text content.
+ */
+export declare type NativeTextElement = {
+  /**
+   * The type of element.
+   */
+  type: "text";
+  /**
+   * The text content.
+   *
+   * @remarks
+   * Only the first element in this array is used.
+   */
+  children: string[];
+} & TextAttributes;
+
+/**
+ * @deprecated The type has been superseded by `TextElementAtPoint`.
+ * @public
+ * An element that renders text content and has positional properties.
+ */
+export declare type NativeTextElementWithBox = {
+  /**
+   * The type of element.
+   */
+  type: "text";
+  /**
+   * The text content.
+   *
+   * @remarks
+   * Only the first element in this array is used.
+   */
+  children: [string];
+  /**
+   * The width of the element, in pixels.
+   *
+   * @remarks
+   * - Minimum: 0
+   * - Maximum: 32767
+   */
+  width?: number;
+  /**
+   * The distance from the top edge of the container, in pixels.
+   *
+   * @remarks
+   * - Minimum: -32768
+   * - Maximum: 32767
+   */
+  top: number;
+  /**
+   * The distance from the left edge of the container, in pixels.
+   *
+   * @remarks
+   * - Minimum: -32768
+   * - Maximum: 32767
+   */
+  left: number;
+  /**
+   * The rotation of the element, in degrees.
+   *
+   * @remarks
+   * - Minimum: -180
+   * - Maximum: 180
+   */
+  rotation?: number;
+} & TextAttributes;
+
+/**
+ * @deprecated The type has been superseded by `VideoElement`.
+ * @public
+ * An element that renders video content.
+ */
+export declare type NativeVideoElement = {
+  /**
+   * The type of element.
+   */
+  type: "video";
+  /**
+   * A unique identifier that points to a video asset in Canva's backend.
+   */
+  ref: VideoRef;
+  /**
+   * A description of the video content.
+   */
+  altText: AltText | undefined;
+};
+
+/**
+ * @deprecated The type has been superseded by `VideoElementAtPoint`.
+ * @public
+ * An element that renders video content and has positional properties.
+ */
+export declare type NativeVideoElementWithBox = NativeVideoElement & Box;
+
+/**
+ * An object primitive data type that can be used in app element data.
+ */
+declare type ObjectPrimitive = Boolean | String;
+
+/**
+ * @beta
+ * Reads a specified part of the user's design and returns all elements in that part.
+ *
+ * @param options - Options for configuring how a design is read.
+ * @param callback - A callback for operating on the design.
+ */
+export declare const openDesign: (
+  options: DesignOpenOptions,
+  callback: (
+    draft: DesignEditing.DesignOpenResult,
+    helpers: {
+      elementBuilder: DesignEditing.ElementBuilder;
+    }
+  ) => Promise<void> | void
+) => Promise<void>;
+
+/**
+ * @public
+ * An alias for the DesignOverlay interface, providing access to design overlay related functionality
+ */
+export declare const overlay: DesignOverlay;
+
+/**
+ * @public
+ * Information about whether or not an overlay can be opened for the specified target.
+ */
+export declare type OverlayOpenableEvent<Target extends OverlayTarget> = {
+  /**
+   * Information about whether or not an overlay can be opened or not for a selected image.
+   */
+  ["image_selection"]:
+    | OverlayUnopenableEvent
+    | {
+        /**
+         * Indicates that the overlay can be opened for the selected image.
+         */
+        canOpen: true;
+        /**
+         * Opens an overlay for the selected image.
+         * @param opts - Options for launching the process associated with the overlay.
+         */
+        readonly open: (options: {
+          /**
+           * Parameters to pass to the overlay when it opens.
+           *
+           * @remarks
+           * This can be any type of structured data.
+           */
+          launchParameters?: any;
+        }) => Promise<AppProcessId>;
+      };
+}[Target];
+
+/**
+ * @public
+ * An entity that an overlay can be opened for.
+ */
+export declare type OverlayTarget = "image_selection";
+
+/**
+ * @public
+ * Information about an overlay that can't be opened for the specified target.
+ */
+declare type OverlayUnopenableEvent = {
+  /**
+   * Indicates that the overlay can't be opened for the specified target.
+   */
+  canOpen: false;
+  /**
+   * Indicates the reason the overlay can't be opened for the specified target.
+   */
+  reason: string;
+};
+
+/**
+ * @public
+ * The appearance of a page's background.
+ */
+export declare type PageBackgroundFill = Pick<Fill, "asset" | "color">;
+
+/**
+ * @public
+ * Information about a page.
+ */
+export declare type PageContext = {
+  /**
+   * The dimensions of the page, in pixels.
+   *
+   * @remarks
+   * This may be `undefined` because some types of pages don't have dimensions, such as whiteboards.
+   */
+  dimensions: PageDimensions | undefined;
+};
+
+/**
+ * @public
+ * A set of page dimensions, in pixels.
+ */
+export declare type PageDimensions = {
+  /**
+   * The width of the page, in pixels.
+   */
+  width: number;
+  /**
+   * The height of the page, in pixels.
+   */
+  height: number;
+};
+
+/**
+ * @public
+ * The outline of a path.
+ */
+export declare type PathStroke = {
+  /**
+   * The weight (thickness) of the stroke.
+   *
+   * @remarks
+   * - Minimum: 0
+   * - Maximum: 100
+   */
+  weight: number;
+  /**
+   * The color of the stroke as a hex code.
+   *
+   * @remarks
+   * The hex code must include all six characters and be prefixed with a `#` symbol.
+   *
+   * @example
+   * "#ff0099"
+   */
+  color: string;
+  /**
+   * The alignment of the stroke.
+   */
+  strokeAlign: "inset";
+};
+
+/**
+ * @public
+ * A position, set of dimensions, and rotation.
+ */
+export declare type Placement = Position & (WidthAndHeight | Width | Height);
+
+/**
+ * @deprecated
+ * A position and rotation.
+ */
+declare type Position = {
+  /**
+   * The distance from the top edge of the container, in pixels.
+   *
+   * @remarks
+   * - The pixels are relative to their container.
+   * - Minimum: -32768
+   * - Maximum: 32767
+   */
+  top: number;
+  /**
+   * The distance from the left edge of the container, in pixels.
+   *
+   * @remarks
+   * - The pixels are relative to their container.
+   * - Minimum: -32768
+   * - Maximum: 32767
+   */
+  left: number;
+  /**
+   * A rotation, in degrees.
+   *
+   * @remarks
+   * - Minimum: -180
+   * - Maximum: 180
+   */
+  rotation?: number;
+};
+
+/**
+ * A primitive data type that can be used in app element data.
+ *
+ * @remarks
+ * All primitive data types are supported except for symbols and bigints.
+ */
+declare type Primitive = undefined | null | number | boolean | string;
+
+/**
+ * @beta
+ * A snapshot of content returned by a query.
+ *
+ * @remarks
+ * The snapshot is known as the *draft*.
+ */
+export declare interface QueryContentDraft<T> {
+  /**
+   * The individual content items returned by a query.
+   */
+  readonly contents: readonly T[];
+  /**
+   * Commits any changes made to the items in the `contents` array.
+   *
+   * @remarks
+   * An app must call this method for any changes to be reflected in the user's design.
+   */
+  sync(): Promise<void>;
+}
+
+/**
+ * @beta
+ * The result of querying content in a design.
+ */
+export declare type QueryResult<T extends ContentType> = {
+  ["richtext"]: QueryContentDraft<
+    RichtextRange & {
+      readonly deleted: boolean;
+    }
+  >;
+}[T];
+
+/**
+ * @beta
+ * Reads content of the specified type from the user's design.
+ * @param options - Options for configuring how a design is read.
+ * @param callback - A callback for operating on the queried content.
+ */
+export declare const readContent: <T extends ContentType>(
+  options: EditContentOptions<T>,
+  callback: (draft: QueryResult<T>) => Promise<void> | void
+) => Promise<void>;
+
+/**
+ * @beta
+ * A callback for reading and updating part of a design.
+ * @param draft - The result of reading the content in a design.
+ */
+export declare type ReadContentCallback<T extends ContentType> = (
+  draft: QueryResult<T>
+) => Promise<void> | void;
+
+/**
+ * @public
+ * Exports the user's design as one or more static files.
+ * @param request - The request object containing configurations of the design export.
+ */
+export declare const requestExport: (
+  request: ExportRequest
+) => Promise<ExportResponse>;
+
+/**
+ * @public
+ * An element that renders richtext content.
+ */
+export declare type RichtextElement = {
+  /**
+   * The type of element.
+   */
+  type: "richtext";
+  /**
+   * The richtext content.
+   */
+  range: RichtextRange;
+};
+
+/**
+ * @public
+ * An element that renders richtext content.
+ *
+ * @remarks
+ * This type includes properties for controlling the position and dimensions of the
+ * element.
+ * It will be positioned and sized relative to its parent container.
+ * The parent container may be an app element, or the current page.
+ */
+export declare type RichtextElementAtPoint = RichtextElement & TextBox;
+
+/**
+ * @public
+ * Options for formatting richtext.
+ */
+export declare type RichtextFormatting = InlineFormatting & {
+  /**
+   * @public
+   * A unique identifier that points to a font asset in Canva's backend.
+   */
+  fontRef?: FontRef;
+  /**
+   * The size of the text, in pixels.
+   *
+   * @remarks
+   * - In the Canva editor, this number is shown as points (pts), not pixels.
+   * - Minimum: 1
+   * - Maximum: 100
+   */
+  fontSize?: number;
+  /**
+   * The alignment of the text.
+   * @defaultValue "start"
+   */
+  textAlign?: "start" | "center" | "end" | "justify";
+  /**
+   * The list indentation level of the paragraph.
+   */
+  listLevel?: number;
+  /**
+   * The appearance of list item markers.
+   *
+   * @remarks
+   * This property only has an effect if `listLevel` is greater than 0.
+   *
+   * @defaultValue "none"
+   */
+  listMarker?:
+    | "none"
+    | "disc"
+    | "circle"
+    | "square"
+    | "decimal"
+    | "lower-alpha"
+    | "lower-roman"
+    | "checked"
+    | "unchecked";
+};
+
+/**
+ * @public
+ * Provides methods for interacting with a range of formatted text.
+ */
+export declare type RichtextRange = {
+  /**
+   * Formats all of the paragraphs that overlap the given bounds.
+   *
+   * @param bounds - The segment of the range on which to apply the formatting.
+   * @param formatting - The formatting to apply to the paragraph(s).
+   *
+   * @remarks
+   * - The `\n` character indicates the end of a paragraph.
+   * - All paragraphs that overlap the provided bounds will be formatted in their entirety.
+   *
+   */
+  formatParagraph(bounds: Bounds, formatting: RichtextFormatting): void;
+  /**
+   * Formats a region of text with inline formatting properties.
+   *
+   * @param bounds - The segment of the range on which to apply the formatting.
+   * @param formatting - The formatting to apply to the text.
+   */
+  formatText(bounds: Bounds, formatting: InlineFormatting): void;
+  /**
+   * Appends the specified characters to the end of the range.
+   *
+   * @param characters - The characters to append to the richtext range.
+   * @param fo -
+   */
+  appendText(
+    characters: string,
+    formatting?: InlineFormatting
+  ): {
+    bounds: Bounds;
+  };
+  /**
+   * Replaces a region of text with the specified characters.
+   *
+   * @param bounds - The segment of the range to replace.
+   * @param characters - The replacement characters.
+   * @param formatting - The formatting to apply to the replaced text.
+   */
+  replaceText(
+    bounds: Bounds,
+    characters: string,
+    formatting?: InlineFormatting
+  ): {
+    /**
+     * The bounds of the replacement characters within the updated range.
+     */
+    bounds: Bounds;
+  };
+  /**
+   * Returns the current state of the richtext as plaintext.
+   */
+  readPlaintext(): string;
+  /**
+   * Returns the current state of the richtext as one or more text regions.
+   * Each region is an object that contains the text content and its formatting.
+   */
+  readTextRegions(): TextRegion[];
+};
+
+/**
+ * @public
+ * An alias for the DesignSelection interface, providing access to design selection related functionality
+ */
+export declare const selection: DesignSelection;
+
+/**
+ * @public
+ * Information about the user's selection. To access the selected content, call the `read` method.
+ */
+export declare interface SelectionEvent<Scope extends SelectionScope> {
+  /**
+   * The type of content that's selected.
+   */
+  readonly scope: Scope;
+  /**
+   * The number of selected elements.
+   */
+  readonly count: number;
+  /**
+   * Creates a snapshot of the selected content and returns a *draft* object.
+   * The draft has a mutable `contents` property for making changes to the selected content.
+   * Any changes made to `contents` are not immediately persisted or reflected in the user's design.
+   * To persist the changes, call the `save` method that's available via the draft.
+   *
+   * @example Replacing text
+   * ```
+   * const draft = await selectionEvent.read();
+   *
+   * for(const content of draft.contents) {
+   *     // This change won't immediately appear in the user's design
+   *     content.text = "This is the new text";
+   * }
+   *
+   * // The changes will now appear in the user's design
+   * await draft.save();
+   * ```
+   */
+  read(): Promise<ContentDraft<SelectionValue<Scope>>>;
+}
+
+/**
+ * @public
+ * Information about a user's selection.
+ */
+export declare interface SelectionEvent<Scope extends SelectionScope> {
+  /**
+   * The type of content.
+   */
+  readonly scope: Scope;
+  /**
+   * The number of content items in the user's selection.
+   */
+  readonly count: number;
+  /**
+   * Returns a snapshot of the content in the user's selection.
+   *
+   * @remarks
+   * The snapshot is known as the *draft*.
+   */
+  read(): Promise<ContentDraft<SelectionValue<Scope>>>;
+}
+
+/**
+ * @public
+ * A type of content that supports selection events.
+ */
+export declare type SelectionScope =
+  | "plaintext"
+  | "image"
+  | "video"
+  | "richtext";
+
+/**
+ * @public
+ * A piece of selected content.
+ *
+ * @remarks
+ * The available properties depend on the type (scope) of content.
+ */
+export declare type SelectionValue<Scope extends SelectionScope> = {
+  /**
+   * A selected range of plaintext.
+   */
+  ["plaintext"]: {
+    /**
+     * The text content.
+     */
+    text: string;
+  };
+  /**
+   * A selected image.
+   */
+  ["image"]: {
+    /**
+     * A unique identifier that points to an image asset in Canva's backend.
+     */
+    ref: ImageRef;
+  };
+  /**
+   * A selected video.
+   */
+  ["video"]: {
+    /**
+     * A unique identifier that points to an video asset in Canva's backend.
+     */
+    ref: VideoRef;
+  };
+  /**
+   * A selected range of formatted text.
+   */
+  ["richtext"]: RichtextRange;
+}[Scope];
+
+/**
+ * @public
+ * Updates the background of the user's current page. The background can be a solid color,
+ * an image or a video.
+ */
+export declare const setCurrentPageBackground: (
+  opts: PageBackgroundFill
+) => Promise<void>;
+
+/**
+ * @public
+ * An element that renders a vector shape.
+ */
+export declare type ShapeElement = NativeShapeElement;
+
+/**
+ * @public
+ * An element that renders a vector shape and has positional properties.
+ */
+export declare type ShapeElementAtPoint = NativeShapeElementWithBox;
+
+/**
+ * @public
+ * A path that defines the structure of a shape element.
+ */
+export declare type ShapePath = {
+  /**
+   * The shape of the path.
+   *
+   * @remarks
+   * This is similar to the `d` attribute of an SVG's `path` element, with some limitations:
+   *
+   * - The path must start with an M command.
+   * - The path must not have more than one M command.
+   * - The path must not use the Q command.
+   * - The path must be closed, either by:
+   *    - Using a Z command at the end of the path
+   *    - Having the last coordinate match the first coordinate
+   */
+  d: string;
+  /**
+   * The appearance of the path's interior.
+   */
+  fill: Fill;
+  /**
+   * The outline of the path.
+   */
+  stroke?: PathStroke;
+};
+
+/**
+ * @public
+ * Options for configuring the scale and cropping of a shape.
+ *
+ * @remarks
+ * This is similar to the `viewBox` attribute of an `SVGElement`.
+ */
+export declare type ShapeViewBox = {
+  /**
+   * The distance of the shape from the top edge of the element, in pixels.
+   */
+  top: number;
+  /**
+   * The distance of the shape from the left edge of the element, in pixels.
+   */
+  left: number;
+  /**
+   * The width of the view box, in pixels.
+   */
+  width: number;
+  /**
+   * The height of the view box, in pixels.
+   */
+  height: number;
+};
+
+/**
+ * @public
+ * An element that renders a table.
+ */
+export declare type TableElement = {
+  /**
+   * The type of element.
+   */
+  type: "table";
+  /**
+   * The rows of the table.
+   */
+  rows: {
+    /**
+     * The cells (columns) of the row.
+     *
+     * @remarks
+     * Each row must have the same number of cells.
+     */
+    cells: (Cell | null | undefined)[];
+  }[];
+};
+
+/**
+ * @public
+ * Options for configuring the appearance of text.
+ */
+export declare type TextAttributes = {
+  /**
+   * The size of the text.
+   *
+   * @remarks
+   * - Minimum: 1
+   * - Maximum: 100
+   *
+   * @defaultValue 16
+   */
+  fontSize?: number;
+  /**
+   * The alignment of the text.
+   * @defaultValue "start"
+   */
+  textAlign?: "start" | "center" | "end" | "justify";
+  /**
+   * The color of the text as a hex code.
+   *
+   * @remarks
+   * The hex code must include all six characters and be prefixed with a `#` symbol.
+   *
+   * @example
+   * "#ff0099"
+   */
+  color?: string;
+  /**
+   * @public
+   * A unique identifier that points to a font asset in Canva's backend.
+   */
+  fontRef?: FontRef;
+  /**
+   * The weight (thickness) of the font.
+   * @defaultValue "normal"
+   */
+  fontWeight?: FontWeight;
+  /**
+   * The style of the font.
+   * @defaultValue "normal"
+   */
+  fontStyle?: "normal" | "italic";
+  /**
+   * The decoration of the font.
+   * @defaultValue "none"
+   */
+  decoration?: "none" | "underline";
+};
+
+/**
+ * @public
+ * The dimensions, position, and rotation of a text element.
+ */
+declare type TextBox = {
+  /**
+   * The width, in pixels.
+   *
+   * @remarks
+   * - Minimum: 0
+   * - Maximum: 32767
+   */
+  width?: number;
+  /**
+   * The distance from the top edge of the container, in pixels.
+   *
+   * @remarks
+   * - Minimum: -32767
+   * - Maximum: 32767
+   */
+  top: number;
+  /**
+   * The distance from the left edge of the container, in pixels.
+   *
+   * @remarks
+   * - Minimum: -32767
+   * - Maximum: 32767
+   */
+  left: number;
+  /**
+   * The rotation, in degrees.
+   *
+   * @remarks
+   * - Minimum: -180
+   * - Maximum: 180
+   */
+  rotation?: number;
+};
+
+/**
+ * @public
+ * Text element or content to be added to the design at the end of a drag event.
+ */
+export declare type TextDragConfig = {
+  /**
+   * The type of element.
+   */
+  type: "text";
+  /**
+   * The text content to drag.
+   */
+  children?: string[];
+  /**
+   * The alignment of the text.
+   * @defaultValue "start"
+   */
+  textAlign?: "start" | "center" | "end" | "justify";
+  /**
+   * The weight (thickness) of the font.
+   * @defaultValue "normal"
+   */
+  fontWeight?: FontWeight;
+  /**
+   * The style of the font.
+   * @defaultValue "normal"
+   */
+  fontStyle?: "normal" | "italic";
+  /**
+   * The decoration of the font.
+   * @defaultValue "none"
+   */
+  decoration?: "none" | "underline";
+  /**
+   * @beta
+   * A unique identifier that points to a font asset in Canva's backend.
+   */
+  fontRef?: FontRef;
+};
+
+/**
+ * @public
+ * An element that renders text content.
+ */
+export declare type TextElement = NativeTextElement;
+
+/**
+ * @public
+ * An element that renders text content and has positional properties.
+ */
+export declare type TextElementAtPoint = NativeTextElementWithBox;
+
+/**
+ * @public
+ * A region of richtext.
+ */
+export declare type TextRegion = {
+  /**
+   * The plaintext content of the region.
+   */
+  text: string;
+  /**
+   * The formatting of the region.
+   */
+  formatting?: Partial<RichtextFormatting>;
+};
+
+/**
+ * @public
+ * Provides methods for adding drag and drop behavior to an app.
+ */
+export declare interface UI {
+  /**
+   * @deprecated The method has been superseded by `startDragToPoint`.
+   * @public
+   * Adds the specified element or content to a design at the end of a drag event.
+   *
+   * @param event - A drag start event.
+   * @param dragData - Element or content to be added to the design at the end of the drag event.
+   */
+  startDrag<E extends HTMLElement>(
+    event: DragStartEvent<E>,
+    dragData:
+      | TextDragConfig
+      | AudioDragConfig
+      | EmbedDragConfig
+      | VideoDragConfigForElement<E>
+      | ImageDragConfigForElement<E>
+  ): Promise<void>;
+  /**
+   * @public
+   * Adds the specified element or content to fixed designs, which use a coordinate-based positioning system at the end of a drag event.
+   *
+   * @param event - A drag start event.
+   * @param dragData - Element or content to be added to the design at the end of the drag event.
+   */
+  startDragToPoint<E extends HTMLElement>(
+    event: DragStartEvent<E>,
+    dragData:
+      | TextDragConfig
+      | AudioDragConfig
+      | EmbedDragConfig
+      | VideoDragConfigForElement<E>
+      | ImageDragConfigForElement<E>
+  ): Promise<void>;
+  /**
+   * @public
+   * Adds the specified element or content to responsive documents, which slot things into a text stream at the end of a drag event.
+   *
+   * @param event - A drag start event.
+   * @param dragData - Element or content to be added to the design at the end of the drag event.
+   */
+  startDragToCursor<E extends HTMLElement>(
+    event: DragStartEvent<E>,
+    dragData:
+      | EmbedDragConfig
+      | VideoDragConfigForElement<E>
+      | ImageDragConfigForElement<E>
+  ): Promise<void>;
+}
+
+/**
+ * An alias for the UI interface, providing access to ui related functionality
+ * @public
+ */
+export declare const ui: UI;
+
+/**
+ * @public
+ * A data type that can be used in app element data.
+ */
+export declare type Value =
+  | Primitive
+  | ObjectPrimitive
+  | Exclude<Value, undefined>[]
+  | {
+      [key: string]: Value;
+    };
+
+/**
+ * @public
+ * Video element or content to be added to the design at the end of a drag event.
+ */
+export declare type VideoDragConfig = {
+  /**
+   * The type of element.
+   */
+  type: "video";
+  /**
+   * A function that returns a reference (ref) to a video asset in Canva's backend.
+   */
+  resolveVideoRef: () => Promise<{
+    ref: VideoRef;
+  }>;
+  /**
+   * The dimensions of the preview image.
+   */
+  previewSize: Dimensions;
+  /**
+   * The dimensions of the full-size video.
+   *
+   * @remarks
+   * - These dimensions are used when adding the video to the design
+   * - If omitted, the `previewSize` dimensions are used as a fallback.
+   */
+  fullSize?: Dimensions;
+  /**
+   * The URL of an image to display under the user's cursor during the drag and drop event.
+   */
+  previewUrl: string;
+};
+
+/**
+ * @public
+ * Video element or content to be added to the design at the end of a drag event.
+ */
+export declare type VideoDragConfigForElement<E extends Element> =
+  E extends HTMLImageElement
+    ? Partial<VideoDragConfig> &
+        Pick<VideoDragConfig, "type" | "resolveVideoRef">
+    : VideoDragConfig;
+
+/**
+ * @public
+ * An element that renders video content.
+ */
+export declare type VideoElement = NativeVideoElement;
+
+/**
+ * @public
+ * An element that renders video content and has positional properties.
+ */
+export declare type VideoElementAtPoint = NativeVideoElementWithBox;
+
+/**
+ * @public
+ * A video asset that fills a path's interior.
+ */
+export declare type VideoFill = {
+  /**
+   * The type of fill.
+   */
+  type: "video";
+  /**
+   * A unique identifier that points to a video asset in Canva's backend.
+   */
+  ref: VideoRef;
+};
+
+/**
+ * @public
+ * A unique identifier that references a video asset in Canva's backend.
+ */
+export declare type VideoRef = string & {
+  __videoRef: never;
+};
+
+/**
+ * A set of dimensions with an auto-calculated height.
+ */
+declare type Width = {
+  /**
+   * A width, in pixels.
+   *
+   * @remarks
+   * - The pixels are relative to their container.
+   * - Minimum: 0
+   * - Maximum: 32767
+   */
+  width: number;
+  /**
+   * Indicates that the height should be auto-calculated.
+   */
+  height: "auto";
+};
+
+/**
+ * A set of dimensions, in pixels.
+ */
+declare type WidthAndHeight = {
+  /**
+   * A width, in pixels.
+   *
+   * @remarks
+   * - The pixels are relative to their container.
+   * - Minimum: 0
+   * - Maximum: 32767
+   */
+  width: number;
+  /**
+   * A height, in pixels.
+   *
+   * @remarks
+   * - The pixels are relative to their container.
+   * - Minimum: 0
+   * - Maximum: 32767
+   */
+  height: number;
+};
+
+export {};