@canva/design 1.10.0 → 2.0.0

package/index.d.ts

@@ -3,59 +3,89 @@
  * @public
  * @param audioTrack - The audio track to add to the user's design.
  */
-export declare function addAudioTrack(audioTrack: AudioTrack): Promise<void>;
+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 function addNativeElement(
+export declare const addNativeElement: (
   element: NativeElement | NativeElementWithBox
-): Promise<void>;
+) => 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 function addPage(opts?: {
+export declare const addPage: (opts?: {
   /**  Elements to be added to the page */
-  elements?: NativeElementWithBox[];
+  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>;
+}) => Promise<void>;
 
 /**
  * @public
- * Describes any alt-text that will be added for a11y.
+ * Alternative text for a11y compliance.
  */
 export declare type AltText = {
   /**
-   * The text that will appear as alt-text.
+   * The text content.
    */
   text: string;
   /**
-   * An optional property that will determine whether text is shown in just the editor or both editor and view mode.
-   * If set to true, alt-text will only be rendered inside the editor.
-   * If set to false or omitted, alt-text will be rendered in both the editor and in view only mode.
+   * 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 an app element's data is created or updated,
- * or when the user selects an existing app element.
+ * 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
@@ -63,47 +93,49 @@ export declare type AppElementChangeHandler<A extends AppElementData> = (
 
 /**
  * @public
- * A client interface for managing app elements and app element data.
+ * A client that provides methods for creating and managing the lifecycle of an app element.
  */
 export declare interface AppElementClient<A extends AppElementData> {
   /**
-   * Attaches data to the selected app element or creates a new app element if one is not selected.
-   * If data already exists, it's overwritten.
-   * @param appElementData - The data to attach to the app element.
+   * 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>;
   /**
-   * Registers a callback that runs when the app element's data is created or
-   * updated and when the user selects an existing app element.
-   * @param handler - The callback to run when the app element's data is changed
-   * and when the user selects an existing app element.
+   * 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
- * Configuration for an AppElementClient
+ * Options for creating an app element client.
  */
 export declare type AppElementClientConfiguration<A extends AppElementData> = {
   /**
-   * The AppElementRenderer to use when rendering the app element
+   * Registers a callback that renders an app element based on the data it receives.
    */
   render: AppElementRenderer<A>;
 };
 
 /**
  * @public
- * The data an app can attach to an app element.
+ * The data associated with an app element.
  */
 export declare type AppElementData = Record<string, Value>;
 
 /**
  * @public
- * A callback that runs when an app's element is changed.
- *
- * @remarks
- * This callback must return one or more elements to render within the app element.
+ * 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
@@ -111,8 +143,7 @@ export declare type AppElementRenderer<A extends AppElementData> = (
 
 /**
  * @public
- * A return value of {@link AppElementRenderer} function.
- * It is an array of elements to render within an app element.
+ * An array of one or more elements to render as output of an app element.
  */
 export declare type AppElementRendererOutput = NativeSimpleElementWithBox[];
 
@@ -126,13 +157,13 @@ export declare type AppProcessId = string & {
 
 /**
  * @public
- * Options for defining the drag-and-drop behavior of audio tracks.
+ * 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";
+  type: "audio";
   /**
    * A function that returns a reference (ref) to an audio asset in Canva's backend.
    */
@@ -159,112 +190,218 @@ export declare type AudioRef = string & {
 
 /**
  * @public
- * An audio track that can be added to a user's design.
+ * An audio track that can be added to a design.
  */
 export declare type AudioTrack = {
   /**
-   * A unique identifier that references an audio asset in Canva's backend.
+   * A unique identifier that points to an audio asset in Canva's backend.
    */
   ref: AudioRef;
 };
 
 /**
  * @public
- * The dimensions, position, and rotation of an element.
+ * 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
- * Units are relative to the parent container both in terms of position and size
+ * 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";
+  type: "image";
   /**
    * The dimensions of the preview image.
-   *
-   * @remarks
-   * The preview image is the image that users see under their cursor while dragging
-   * it into their design.
    */
   previewSize: Dimensions;
 };
 
 /**
  * @public
- * A snapshot of some part of the document content.
- *
- * @remarks
- * You can mutate the values in the `contents` array and then persist those changes with the `save` method.
+ * A snapshot of content from a user's design.
  */
 export declare interface ContentDraft<T> {
   /**
-   * The selected content.
+   * 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 items in the `contents` array.
-   * Once saved, those changes are reflected in the user's design.
+   * Saves changes made to the content items in the `contents` array.
    *
    * @remarks
-   * Any other changes to the content since calling the `read` method, such as the user editing the content directly, will be overwritten.
-   * Only properties that are different from the original state are written to the design.
+   * 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
- * Represents X and Y coordinates.
+ * A type of content that can be read from a user's design.
+ */
+export declare type ContentType = "richtext";
+
+/**
+ * @public
+ * A set of X and Y coordinates.
  */
 export declare type Coordinates = {
   /**
-   * Represents an X coordinate, in pixels.
+   * X coordinate, in pixels.
    */
   x: number;
   /**
-   * Represents a Y coordinate, in pixels.
+   * Y coordinate, in pixels.
    */
   y: number;
 };
 
 /**
  * @public
- * Provides methods for interacting with design overlay
+ * Creates a new RichtextRange object, which contains methods to manipulate text.
+ */
+export declare function createRichtextRange(): RichtextRange;
+
+/**
+ * @public
+ * An element that's natively supported by the Canva editor.
+ */
+export declare type DesignElement = NativeElement;
+
+/**
+ * @public
+ * Provides methods for managing the lifecycle of overlays, such as selected image overlays.
  */
 export declare type DesignOverlay = {
   /**
-   * Registers a callback that runs when an overlay canOpen status changed on a particular target.
-   *
-   * @remarks
-   * The callback fires immediately
+   * 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 the user's selected content, such as images or text.
+ * Provides methods for interacting with selected content.
  */
 export declare type DesignSelection = {
   /**
-   * Registers a callback that runs when a user selects an element that contains the specified type of content.
+   * Registers a callback that runs when the specified type of content is selected.
+   *
+   * @param opts - Options for configuring the content selection callback.
    *
    * @remarks
-   * The callback fires immediately if content is already selected.
+   * This callback fires immediately if content is already selected when the callback is registered.
    */
   registerOnChange<Scope extends SelectionScope>(opts: {
     /**
-     * The type of content that, when selected, triggers the `onChange` callback.
+     * The type of content that triggers a selection change event.
      */
     scope: Scope;
     /**
-     * The callback to run when the selection changes.
+     * The callback to run when the selected content changes.
+     * @param event - Information about the selection change event.
      */
     onChange(event: SelectionEvent<Scope>): void;
   }): () => void;
@@ -280,47 +417,45 @@ export declare type DesignToken = {
 
 /**
  * @public
- * Represents a width and a height.
+ * A set of dimensions.
  */
 export declare type Dimensions = {
   /**
-   * Represents a width, in pixels.
+   * A width, in pixels.
    */
   width: number;
   /**
-   * Represents a height, in pixels.
+   * A height, in pixels.
    */
   height: number;
 };
 
 /**
  * @public
- * Callbacks that run during the lifecycle of a drag-and-drop.
+ * Callbacks for handling drag and drop events.
  */
 export declare type DragCallback = {
   /**
-   * A callback that runs when the user starts dragging an element into their design.
-   *
-   * @param element - The element being dragged into the user's design.
+   * 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 when the user finishes dragging an element into their design.
-   *
-   * @param element - The element being dragged into the user's design.
+   * A callback that runs at the end of a drag event.
+   * @param element - The element being dragged.
    */
   onDragEnd: (element: HTMLElement) => void;
 };
 
 /**
  * @public
- * Options for making an element draggable.
+ * Options for adding drag and drop behavior to an `HTMLElement`.
  */
 export declare type DraggableElementData = ElementData | ImageElementData;
 
 /**
  * @public
- * Represents a drag start event that occurs when initiating a drag-and-drop behavior inside the app.
+ * An event that occurs when a user starts dragging an HTML element.
  */
 export declare type DragStartEvent<E extends Element> = Pick<
   DragEvent,
@@ -331,61 +466,81 @@ export declare type DragStartEvent<E extends Element> = Pick<
 
 /**
  * @public
- * Options for making an `HTMLElement` draggable.
+ * 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 element to be made draggable.
+   * The `HTMLElement` to be made draggable.
    */
   node: HTMLElement;
-  /**
-   * Options for defining the drag-and-drop behavior.
-   *
-   * @remarks
-   * This data is required because it can't be inferred from the `node` property.
-   */
-  dragData: UserSuppliedDragData;
 };
 
 /**
  * @public
- *
- * Options for defining the drag-and-drop behaviour for embeds.
+ * 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";
+  type: "embed";
   /**
    * The dimensions of the preview image.
-   * The preview image is the image that users see under their cursor
-   * while dragging it into their design.
    */
   previewSize: Dimensions;
   /**
-   * Represents the preview image of the embed.
+   * The URL of an image to display under the user's cursor during the drag and drop event.
    */
   previewUrl: string;
   /**
-   * Represents the embed source url.
+   * 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
- * Export aborted response
- *
- * @remarks
- * Ane export flow is considered aborted when a user closes
- * the export options menu.
+ * 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 when the user has aborted the export menu.
+   * The status of the export flow.
    */
-  status: "ABORTED";
+  status: "aborted";
 };
 
 /**
@@ -397,13 +552,14 @@ export declare type ExportBlob = {
    * The URL of the exported design.
    *
    * @remarks
-   * If the user's design contains multiple pages but is exported in a format that doesn't support multiple pages, the URL will point to a ZIP file that contains each page as a separate file.
+   * 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 separate JPG file for each page
-   * - If a multi-page design is exported as a PDF, the URL will point to a PDF file that contains all of the pages
+   * - 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:
    *
@@ -423,22 +579,23 @@ export declare type ExportBlob = {
 
 /**
  * @public
- * Export completed response
+ * The result when a user successfully completes an export flow.
  */
 export declare type ExportCompleted = {
   /**
-   * The status of the export flow when the user has submitted the export menu.
+   * The status of the export flow.
    */
-  status: "COMPLETED";
+  status: "completed";
   /**
-   * The title of the successful export of a design, if it has been set by the user.
+   * 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.
+   * 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[];
 };
@@ -448,17 +605,17 @@ export declare type ExportCompleted = {
  * The types of files that Canva supports for exported designs.
  */
 export declare type ExportFileType =
-  | "PNG"
-  | "JPG"
-  | "PDF_STANDARD"
-  | "VIDEO"
-  | "GIF"
-  | "PPTX"
-  | "SVG";
+  | "png"
+  | "jpg"
+  | "pdf_standard"
+  | "video"
+  | "gif"
+  | "pptx"
+  | "svg";
 
 /**
  * @public
- * The options for configuring the export of a design.
+ * Options for configuring the export of a design.
  */
 export declare type ExportRequest = {
   /**
@@ -472,44 +629,30 @@ export declare type ExportRequest = {
 
 /**
  * @public
- * The response of an export request.
+ * 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.
  *
- * Options for defining the Drag and Drop behaviour for images uploaded
- * via the Content capability.
+ * @remarks
+ * This type is only used when the image data is from an external URL.
  */
 export declare type ExternalImageDragConfig = CommonImageDragConfig & {
   /**
-   * The function that resolves an image ref
-   * @remarks
-   *
-   * This function will be run during the drag process in order to fetch the media ref of the
-   * external image being fetched. This function should return the result of `upload`
-   * from the content capability.
+   * A function that returns a reference (ref) to an audio asset in Canva's backend.
    */
   resolveImageRef: () => Promise<{
     ref: ImageRef;
   }>;
   /**
-   * The URL of the preview image.
-   *
-   * @remarks
-   * The preview image is the image that users see under their cursor while dragging
-   * it into their design.
+   * 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.
-   *
-   * @remarks
-   * The full-size image is the image that Canva uploads to the user's account and
-   * adds to their design.
-   *
-   * If omitted, the value of the `previewSize` property is used as a fallback.
    */
   fullSize?: Dimensions;
 };
@@ -517,26 +660,27 @@ export declare type ExternalImageDragConfig = CommonImageDragConfig & {
 /**
  * @public
  * The appearance of a path's interior.
+ *
+ * @remarks
+ * The `color` and `asset` properties are mutually exclusive.
  */
 export declare type Fill = {
   /**
-   * Boolean defining whether image or video can be dropped on the fill by the user.
-   * If set to true, images or videos can be dropped on the 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 (e.g. #ff0099).
-   * Only one type of fill (color, image or video) can be set.
+   * The hex code must include all six characters and be prefixed with a `#` symbol.
+   *
+   * @example
+   * " #ff0099"
    */
   color?: string;
   /**
-   * An asset (image or video) that will be used to fill the given path.
-   *
-   * @remarks
-   * Only one type of fill (color, image or video) can be set.
+   * An image or video to use as the fill.
    */
   asset?: ImageFill | VideoFill;
 };
@@ -569,7 +713,7 @@ export declare type FontWeight =
  * @public
  * @returns Page context of currently selected page
  */
-export declare function getCurrentPageContext(): Promise<PageContext>;
+export declare const getCurrentPageContext: () => Promise<PageContext>;
 
 /**
  * @public
@@ -580,7 +724,7 @@ export declare function getCurrentPageContext(): Promise<PageContext>;
  *
  * Returns `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
  */
-export declare function getDefaultPageDimensions(): Promise<
+export declare const getDefaultPageDimensions: () => Promise<
   Dimensions | undefined
 >;
 
@@ -590,21 +734,52 @@ export declare function getDefaultPageDimensions(): Promise<
  */
 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
- * Options for defining the drag-and-drop behavior of an image element that can be defined by an
- * app developer.
+ * Image element or content to be added to the design at the end of a drag event.
  */
 export declare type ImageDragConfig = ExternalImageDragConfig;
 
 /**
  * @public
- * Options for defining the drag-and-drop behavior for images.
+ * 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
@@ -613,36 +788,38 @@ export declare type ImageDragConfigForElement<E extends Element> =
 
 /**
  * @public
- * Options for making an `HTMLImageElement` draggable.
+ * 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 element to be made draggable.
+   * The `HTMLImageElement` to be made draggable.
    */
   node: HTMLImageElement;
-  /**
-   * Options for defining the drag-and-drop behavior.
-   *
-   * @remarks
-   * If any of this data is omitted, it's inferred from the `node` property.
-   */
-  dragData?:
-    | Partial<UserSuppliedImageDragData>
-    | (Partial<UserSuppliedVideoDragData> &
-        Pick<UserSuppliedVideoDragData, "type" | "resolveVideoRef">);
 };
 
 /**
  * @public
- * An image asset that will be used to fill the given path.
+ * An image asset that fills a path's interior.
  */
 export declare type ImageFill = {
   /**
-   * Type of an asset that will be used to fill the given path.
+   * The type of fill.
    */
-  type: "IMAGE";
+  type: "image";
   /**
-   * A unique identifier that references an image asset in Canva's backend.
+   * A unique identifier that points to an image asset in Canva's backend.
    */
   ref: ImageRef;
 };
@@ -665,7 +842,53 @@ export declare function initAppElement<A extends AppElementData>(
 
 /**
  * @public
- * A native element.
+ * 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
@@ -680,15 +903,16 @@ export declare type NativeElement =
  * The types of elements an app can add to a user's design.
  */
 export declare type NativeElementType =
-  | "IMAGE"
-  | "EMBED"
-  | "TEXT"
-  | "SHAPE"
-  | "VIDEO";
+  | "image"
+  | "embed"
+  | "text"
+  | "shape"
+  | "video";
 
 /**
+ * @deprecated The type has been superseded by `ElementAtPoint`.
  * @public
- * An element that exists within an app or group element.
+ * An element that's natively supported by the Canva editor and has positional properties.
  */
 export declare type NativeElementWithBox =
   | NativeImageElementWithBox
@@ -699,37 +923,36 @@ export declare type NativeElementWithBox =
   | NativeGroupElementWithBox;
 
 /**
+ * @deprecated The type has been superseded by `EmbedElement`.
  * @public
- * An element that renders an embeddable piece of media, such as a YouTube video.
+ * An element that renders rich media, such as a YouTube video.
  */
 export declare type NativeEmbedElement = {
   /**
    * The type of element.
    */
-  type: "EMBED";
+  type: "embed";
   /**
-   * The URL of the embed. This URL must be supported by the Iframely API.
+   * 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 an embeddable piece of media, such as a YouTube video.
- *
- * @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.
+ * 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";
+  type: "embed";
   /**
-   * The URL of the embed.
+   * The URL of the rich media.
    *
    * @remarks
    * This URL must be supported by the Iframely API.
@@ -738,54 +961,59 @@ export declare type NativeEmbedElementWithBox = {
 } & Box;
 
 /**
+ * @deprecated The type has been superseded by `GroupElement`.
  * @public
- * An element containing two or more {@link NativeElementWithBox}.
+ * An element that contains two or more elements.
  */
 export declare type NativeGroupElement = {
   /**
    * The type of element.
    */
-  type: "GROUP";
+  type: "group";
   /**
-   * The inner elements contained by the group element. These elements require a Box as they are
-   * relatively positioned to the outer boundaries of the group element.
+   * 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 containing two or more {@link NativeSimpleElementWithBox}.
- *
- * @remarks
- * This type includes properties for controlling the position and dimensions
- * of the element
+ * An element that contains two or more elements and has positional properties.
  */
 export declare type NativeGroupElementWithBox = {
   /**
    * The type of element.
    */
-  type: "GROUP";
+  type: "group";
   /**
-   * The inner elements contained by the group element. These elements require a Box as they are
-   * relatively positioned to the outer boundaries of the group element.
+   * 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 an image in the user's design.
+ * An element that renders image content.
  */
 export declare type NativeImageElement = {
   /**
    * The type of element.
    */
-  type: "IMAGE";
+  type: "image";
   /**
-   * An optional object to describe alt-text that may be applied to an image.
+   * A description of the image content.
    */
-  altText?: AltText;
+  altText: AltText | undefined;
 } & (
   | {
       /**
@@ -793,7 +1021,7 @@ export declare type NativeImageElement = {
        */
       dataUrl: string;
       /**
-       * A unique identifier that references an image asset in Canva's backend.
+       * A unique identifier that points to an image asset in Canva's backend.
        */
       ref?: never;
     }
@@ -803,25 +1031,21 @@ export declare type NativeImageElement = {
        */
       dataUrl?: never;
       /**
-       * A unique identifier that references an image asset in Canva's backend.
+       * 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 an image in the user's design.
- *
- * @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.
+ * 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.
  */
@@ -829,55 +1053,51 @@ export declare type NativeShapeElement = {
   /**
    * The type of element.
    */
-  type: "SHAPE";
+  type: "shape";
   /**
-   * Properties for configuring the scale and cropping of a shape.
-   *
-   * @remarks
-   * This is similar to the `viewBox` attribute of the <svg> element.
+   * Options for configuring the scale and cropping of the shape.
    */
   viewBox: ShapeViewBox;
   /**
-   * The paths that define the shape of the element.
+   * The paths that define the structure of the shape.
    *
    * @remarks
-   * There must be between 1 and 30 paths. The maximum combined size of all paths must
-   * not exceed 2kb. The maximum numbrer of unique fill colors across all paths is 6.
+   * - 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.
- *
- * @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.
+ * An element that renders a vector shape and has positional properties.
  */
 export declare type NativeShapeElementWithBox = {
   /**
    * The type of element.
    */
-  type: "SHAPE";
+  type: "shape";
   /**
-   * Properties for configuring the scale and cropping of a shape.
-   *
-   * @remarks
-   * This is similar to the `viewBox` attribute of the <svg> element.
+   * Options for configuring the scale and cropping of a shape.
    */
   viewBox: ShapeViewBox;
   /**
-   * The paths that define the shape of the element.
+   * 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 exists within a group element.
+ * 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,
@@ -885,106 +1105,104 @@ export declare type NativeSimpleElementWithBox = Exclude<
 >;
 
 /**
+ * @deprecated The type has been superseded by `TextElement`.
  * @public
- * An element that renders text.
+ * An element that renders text content.
  */
 export declare type NativeTextElement = {
   /**
    * The type of element.
    */
-  type: "TEXT";
+  type: "text";
   /**
-   * The text to render within the element. In the future, each item in this
-   * array will map to a paragraph. At the moment, only one item is supported.
+   * 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.
- *
- * @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.
+ * An element that renders text content and has positional properties.
  */
 export declare type NativeTextElementWithBox = {
   /**
    * The type of element.
    */
-  type: "TEXT";
+  type: "text";
   /**
-   * The text to render within the element.
+   * The text content.
    *
    * @remarks
-   * In the future, each item in this array will map to a paragraph. At the moment,
-   * only one item is supported.
+   * Only the first element in this array is used.
    */
   children: [string];
   /**
-   * The width of the element. This must be an integer between 0 and 32767.
+   * The width of the element, in pixels.
+   *
+   * @remarks
+   * - Minimum: 0
+   * - Maximum: 32767
    */
   width?: number;
   /**
-   * The distance from the top edge of the container.
+   * The distance from the top edge of the container, in pixels.
    *
    * @remarks
-   * This must be an integer between -32768 and 32767. This property doesn't have
-   * any effect if the app element only contains a single element.
+   * - Minimum: -32768
+   * - Maximum: 32767
    */
   top: number;
   /**
-   * The distance from the left edge of the container.
+   * The distance from the left edge of the container, in pixels.
    *
    * @remarks
-   * This must be an integer between -32768 and 32767. This property doesn't have
-   * any effect if the app element only contains a single element.
+   * - Minimum: -32768
+   * - Maximum: 32767
    */
   left: number;
   /**
    * The rotation of the element, in degrees.
    *
    * @remarks
-   * This must be an integer between -180 and 180.
+   * - Minimum: -180
+   * - Maximum: 180
    */
   rotation?: number;
 } & TextAttributes;
 
 /**
+ * @deprecated The type has been superseded by `VideoElement`.
  * @public
- * An element that renders a video in the user's design.
+ * An element that renders video content.
  */
 export declare type NativeVideoElement = {
   /**
    * The type of element.
    */
-  type: "VIDEO";
+  type: "video";
   /**
-   * A unique identifier that references a video asset in Canva's backend.
+   * A unique identifier that points to a video asset in Canva's backend.
    */
   ref: VideoRef;
   /**
-   * An optional object to describe alt-text that may be applied to a video.
+   * A description of the video content.
    */
-  altText?: AltText;
+  altText: AltText | undefined;
 };
 
 /**
+ * @deprecated The type has been superseded by `VideoElementAtPoint`.
  * @public
- * An element that renders a video in the user's design.
- *
- * @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.
+ * An element that renders video content and has positional properties.
  */
 export declare type NativeVideoElementWithBox = NativeVideoElement & Box;
 
 /**
- * The types of object primitive values that can be stored within an app element's data.
+ * An object primitive data type that can be used in app element data.
  */
 declare type ObjectPrimitive = Boolean | String;
 
@@ -996,23 +1214,30 @@ export declare const overlay: DesignOverlay;
 
 /**
  * @public
- * Information about whether the overlay can be opened or not on a particular {@link OverlayTarget}
+ * Information about whether or not an overlay can be opened for the specified target.
  */
 export declare type OverlayOpenableEvent<Target extends OverlayTarget> = {
   /**
-   * An event indicating whether the overlay can be opened or not when {@link OverlayTarget} is `"image_selection"`
+   * 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;
         /**
-         * Launch a new app process on an overlay on top of the current selected image fill
-         *
-         * @remarks
-         * `launchParameters` specifies the type of data that are provided to an app process at its launch
+         * 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>;
       };
@@ -1020,16 +1245,22 @@ export declare type OverlayOpenableEvent<Target extends OverlayTarget> = {
 
 /**
  * @public
- * The target to check if an overlay can be opened for
+ * An entity that an overlay can be opened for.
  */
 export declare type OverlayTarget = "image_selection";
 
 /**
  * @public
- * Information about the overlay when it can not be opened on a particular {@link OverlayTarget}
+ * 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;
 };
 
@@ -1041,24 +1272,30 @@ export declare type PageBackgroundFill = Pick<Fill, "asset" | "color">;
 
 /**
  * @public
- * Page context
+ * Information about a page.
  */
 export declare type PageContext = {
   /**
-   * Page dimensions in px
+   * The dimensions of the page, in pixels.
    *
    * @remarks
-   * This value is undefined for Whiteboard and Docs
+   * This may be `undefined` because some types of pages don't have dimensions, such as whiteboards.
    */
   dimensions: PageDimensions | undefined;
 };
 
 /**
  * @public
- * Page Dimensions
+ * 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;
 };
 
@@ -1068,59 +1305,73 @@ export declare type PageDimensions = {
  */
 export declare type PathStroke = {
   /**
-   * The weight of the stroke. This must be an integer between 0 and 100.
-   */
+   * 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 (e.g. #ff0099).
+   * The hex code must include all six characters and be prefixed with a `#` symbol.
+   *
+   * @example
+   * "#ff0099"
    */
   color: string;
   /**
-   * The alignment of the stroke. The only supported value is 'inset'.
+   * The alignment of the stroke.
    */
   strokeAlign: "inset";
 };
 
 /**
  * @public
- * The dimensions, position, and rotation of an element.
+ * 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.
+   * The distance from the top edge of the container, in pixels.
    *
    * @remarks
-   * This must be an integer between -32768 and 32767. This property doesn't
-   * have any effect if the app element only contains a single element.
+   * - The pixels are relative to their container.
+   * - Minimum: -32768
+   * - Maximum: 32767
    */
   top: number;
   /**
-   * The distance from the left edge of the container.
+   * The distance from the left edge of the container, in pixels.
    *
    * @remarks
-   * This must be an integer between -32768 and 32767. This property doesn't
-   * have any effect if the app element only contains a single element.
+   * - The pixels are relative to their container.
+   * - Minimum: -32768
+   * - Maximum: 32767
    */
   left: number;
   /**
-   * The rotation of the box, in degrees.
+   * A rotation, in degrees.
    *
    * @remarks
-   * This must be an integer between -180 and 180.
+   * - Minimum: -180
+   * - Maximum: 180
    */
   rotation?: number;
 };
 
 /**
- * The types of primitive values that can be stored within an app element's data.
+ * A primitive data type that can be used in app element data.
  *
  * @remarks
- * All types of primitives are supported except for symbols and bigints.
+ * All primitive data types are supported except for symbols and bigints.
  */
 declare type Primitive = undefined | null | number | boolean | string;
 
@@ -1129,9 +1380,148 @@ declare type Primitive = undefined | null | number | boolean | string;
  * Exports the user's design as one or more static files.
  * @param request - The request object containing configurations of the design export.
  */
-export declare function requestExport(
+export declare const requestExport: (
   request: ExportRequest
-): Promise<ExportResponse>;
+) => 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
@@ -1176,29 +1566,55 @@ export declare interface SelectionEvent<Scope extends SelectionScope> {
 
 /**
  * @public
- * The type of content that apps can detect selection changes on.
+ * Information about a user's selection.
  */
-export declare type SelectionScope = "plaintext" | "image" | "video";
+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
- * The selected content.
+ * A type of content that supports selection events.
+ */
+export declare type SelectionScope =
+  | "plaintext"
+  | "image"
+  | "video"
+  | "richtext";
+
+/**
+ * @public
+ * A piece of selected content.
  *
  * @remarks
- * The value depends on the {@link SelectionScope}.
+ * The available properties depend on the type (scope) of content.
  */
 export declare type SelectionValue<Scope extends SelectionScope> = {
   /**
-   * The selected content when {@link SelectionScope} is `"plaintext"`.
+   * A selected range of plaintext.
    */
   ["plaintext"]: {
     /**
-     * The text content of the element as plain text.
+     * The text content.
      */
     text: string;
   };
   /**
-   * The selected content when {@link SelectionScope} is `"image"`.
+   * A selected image.
    */
   ["image"]: {
     /**
@@ -1207,7 +1623,7 @@ export declare type SelectionValue<Scope extends SelectionScope> = {
     ref: ImageRef;
   };
   /**
-   * The selected content when {@link SelectionScope} is `"video"`.
+   * A selected video.
    */
   ["video"]: {
     /**
@@ -1215,6 +1631,10 @@ export declare type SelectionValue<Scope extends SelectionScope> = {
      */
     ref: VideoRef;
   };
+  /**
+   * A selected range of formatted text.
+   */
+  ["richtext"]: RichtextRange;
 }[Scope];
 
 /**
@@ -1222,29 +1642,39 @@ export declare type SelectionValue<Scope extends SelectionScope> = {
  * Updates the background of the user's current page. The background can be a solid color,
  * an image or a video.
  */
-export declare function setCurrentPageBackground(
+export declare const setCurrentPageBackground: (
   opts: PageBackgroundFill
-): Promise<void>;
+) => 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 shape of a shape element.
+ * A path that defines the structure of a shape element.
  */
 export declare type ShapePath = {
   /**
    * The shape of the path.
    *
    * @remarks
-   * This accepts the same value as the `d` attribute of the SVG <path> element,
-   * with some limitations.
+   * This is similar to the `d` attribute of an SVG's `path` element, with some limitations:
    *
-   * The path must:
-   *
-   * - start with an M command
-   * - not have more than one M command
-   * - not use the Q command
-   * - be closed, either with a Z command at the end or by having the last
-   * coordinate match the first coordinate
+   * - 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;
   /**
@@ -1259,308 +1689,269 @@ export declare type ShapePath = {
 
 /**
  * @public
- * Properties for configuring the scale and cropping of a shape.
+ * Options for configuring the scale and cropping of a shape.
  *
  * @remarks
- * This is similar to the `viewBox` attribute of the <svg> element.
+ * 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.
+   * 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.
+   * The distance of the shape from the left edge of the element, in pixels.
    */
   left: number;
   /**
-   * The width of the view box.
+   * The width of the view box, in pixels.
    */
   width: number;
   /**
-   * The height of the view box.
+   * The height of the view box, in pixels.
    */
   height: number;
 };
 
 /**
  * @public
- * Attributes for changing the appearance of text.
+ * 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
-   * The default value is 16. This must be an integer between 1 and 1000.
-   * This property will be ignored when adding native text elements without specifying placement.
+   * - Minimum: 1
+   * - Maximum: 100
+   *
+   * @defaultValue 16
    */
   fontSize?: number;
   /**
    * The alignment of the text.
-   * @defaultValue 'start'
+   * @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
-   * (e.g. #ff0099). The default value is #000000.
+   * The hex code must include all six characters and be prefixed with a `#` symbol.
+   *
+   * @example
+   * "#ff0099"
    */
   color?: string;
   /**
    * @public
-   * A reference to the font to use for this text element.
+   * A unique identifier that points to a font asset in Canva's backend.
    */
   fontRef?: FontRef;
   /**
-   * The weight of the font.
-   * @defaultValue 'normal'
+   * The weight (thickness) of the font.
+   * @defaultValue "normal"
    */
   fontWeight?: FontWeight;
   /**
    * The style of the font.
-   * @defaultValue 'normal'
+   * @defaultValue "normal"
    */
   fontStyle?: "normal" | "italic";
   /**
    * The decoration of the font.
-   * @defaultValue 'none'
+   * @defaultValue "none"
    */
   decoration?: "none" | "underline";
 };
 
 /**
  * @public
- * Options for defining the drag-and-drop behavior of a text element.
+ * 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";
+  type: "text";
   /**
    * The text content to drag.
    */
   children?: string[];
   /**
    * The alignment of the text.
-   * @defaultValue 'start'
+   * @defaultValue "start"
    */
   textAlign?: "start" | "center" | "end" | "justify";
   /**
-   * The weight of the font.
-   * @defaultValue 'normal'
+   * The weight (thickness) of the font.
+   * @defaultValue "normal"
    */
   fontWeight?: FontWeight;
   /**
    * The style of the font.
-   * @defaultValue 'normal'
+   * @defaultValue "normal"
    */
   fontStyle?: "normal" | "italic";
   /**
    * The decoration of the font.
-   * @defaultValue 'none'
+   * @defaultValue "none"
    */
   decoration?: "none" | "underline";
 };
 
 /**
  * @public
- * The methods for adding drag-and-drop behavior to an app.
+ * An element that renders text content.
  */
-export declare interface UI {
-  /**
-   * @public
-   * Makes the specified node draggable.
-   *
-   * @deprecated use `UI.startDrag` instead
-   *
-   * @param options - Options for making an element draggable.
-   */
-  makeDraggable(options: DraggableElementData): void;
-  /**
-   * @public
-   * Handles a drag event initiated inside the app to Canva, enables drag-and_drop interactions with elements outside of the app.
-   * @param event - The drag start event.
-   * @param dragData - The data to be passed to the drag handler.
-   */
-  startDrag<E extends HTMLElement>(
-    event: DragStartEvent<E>,
-    dragData:
-      | TextDragConfig
-      | AudioDragConfig
-      | 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;
+export declare type TextElement = NativeTextElement;
 
 /**
- * @deprecated
  * @public
- * Options for defining the drag-and-drop behavior of audio tracks.
+ * An element that renders text content and has positional properties.
  */
-export declare type UserSuppliedAudioDragData = AudioDragConfig;
+export declare type TextElementAtPoint = NativeTextElementWithBox;
 
 /**
- * @deprecated
  * @public
- *
- * Options for defining the Drag and Drop behaviour for images
- * which have been supplied as data urls
+ * A region of richtext.
  */
-export declare type UserSuppliedDataUrlImageDragData = CommonImageDragConfig & {
+export declare type TextRegion = {
   /**
-   * The dimensions of the full-size image.
-   *
-   * @remarks
-   * The full-size image is the image that Canva uploads to the user's account and
-   * adds to their design.
-   *
-   * If omitted, the value of the `previewSize` property is used as a fallback.
+   * The plaintext content of the region.
    */
-  fullSize?: Dimensions;
-  /**
-   * The data URL of the preview image.
-   *
-   * @remarks
-   * The preview image is the image that users see under their cursor while dragging
-   * it into their design.
-   *
-   * If omitted, the value of the `fullSizeSrc` property is used as a fallback.
-   */
-  previewSrc?: string;
+  text: string;
   /**
-   * The data URL of the full-size image.
-   *
-   * @remarks
-   * The full-size image is the image that Canva uploads to the user's account and
-   * adds to their design.
+   * The formatting of the region.
    */
-  fullSizeSrc: string;
+  formatting?: Partial<RichtextFormatting>;
 };
 
 /**
- * @deprecated
  * @public
- * Options for defining the drag-and-drop behavior that can be defined by an app developer.
+ * Provides methods for adding drag and drop behavior to an app.
  */
-export declare type UserSuppliedDragData =
-  | UserSuppliedImageDragData
-  | UserSuppliedTextDragData
-  | UserSuppliedVideoDragData
-  | UserSuppliedAudioDragData;
-
-/**
- * @deprecated
- * @public
- *
- * Options for defining the Drag and Drop behaviour for images uploaded
- * via the Content capability.
- */
-export declare type UserSuppliedExternalImageDragData =
-  CommonImageDragConfig & {
-    /**
-     * The function that resolves an image ref
-     * @remarks
-     *
-     * This function will be run during the drag process in order to fetch the media ref of the
-     * external image being fetched. This function should return the result of `upload`
-     * from the content capability.
-     */
-    resolveImageRef: () => Promise<{
-      ref: ImageRef;
-    }>;
-    /**
-     * The URL of the preview image.
-     *
-     * @remarks
-     * The preview image is the image that users see under their cursor while dragging
-     * it into their design.
-     */
-    previewSrc: string;
-    /**
-     * The dimensions of the full-size image.
-     *
-     * @remarks
-     * The full-size image is the image that Canva uploads to the user's account and
-     * adds to their design.
-     *
-     * If omitted, the value of the `previewSize` property is used as a fallback.
-     */
-    fullSize?: Dimensions;
-  };
-
-/**
- * @deprecated
- * @public
- * Options for defining the drag-and-drop behavior of an image element that can be defined by an
- * app developer.
- */
-export declare type UserSuppliedImageDragData =
-  | UserSuppliedDataUrlImageDragData
-  | UserSuppliedExternalImageDragData;
-
-/**
- * @deprecated
- * @public
- * Options for defining the drag-and-drop behavior of a text element.
- */
-export declare type UserSuppliedTextDragData = TextDragConfig;
-
-/**
- * @deprecated
- * @public
- * Options for defining the drag-and-drop behavior for videos.
- */
-export declare type UserSuppliedVideoDragData = {
-  /**
-   * The type of element.
-   */
-  type: "VIDEO";
-  /**
-   * The function used resolve the video ref.
-   * This is used in conjunction with content import.
-   */
-  resolveVideoRef: () => Promise<{
-    ref: VideoRef;
-  }>;
+export declare interface UI {
   /**
-   * The dimensions of the preview image.
-   * @remarks
-   * The preview image is the image that users see under their cursor
-   * while dragging it into their design.
+   * @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.
    */
-  previewSize: Dimensions;
+  startDrag<E extends HTMLElement>(
+    event: DragStartEvent<E>,
+    dragData:
+      | TextDragConfig
+      | AudioDragConfig
+      | EmbedDragConfig
+      | VideoDragConfigForElement<E>
+      | ImageDragConfigForElement<E>
+  ): Promise<void>;
   /**
-   * The dimensions of the full-size video.
-   * These dimensions are used when adding the video to the design
+   * @public
+   * Adds the specified element or content to fixed designs, which use a coordinate-based positioning system at the end of a drag event.
    *
-   * If omitted, the value of the `previewSize` property is
-   * used as a fallback.
+   * @param event - A drag start event.
+   * @param dragData - Element or content to be added to the design at the end of the drag event.
    */
-  fullSize?: Dimensions;
+  startDragToPoint<E extends HTMLElement>(
+    event: DragStartEvent<E>,
+    dragData:
+      | TextDragConfig
+      | AudioDragConfig
+      | EmbedDragConfig
+      | VideoDragConfigForElement<E>
+      | ImageDragConfigForElement<E>
+  ): Promise<void>;
   /**
-   * The URL of the preview image.
+   * @public
+   * Adds the specified element or content to responsive documents, which slot things into a text stream at the end of a drag event.
    *
-   * @remarks
-   * The preview image is the image that users see under their cursor while dragging
-   * it into their design.
+   * @param event - A drag start event.
+   * @param dragData - Element or content to be added to the design at the end of the drag event.
    */
-  previewSrc: string;
-};
+  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
- * The types of values that can be stored within an app element's data.
+ */
+export declare const ui: UI;
+
+/**
+ * @public
+ * A data type that can be used in app element data.
  */
 export declare type Value =
   | Primitive
@@ -1572,48 +1963,40 @@ export declare type Value =
 
 /**
  * @public
- * Options for defining the drag-and-drop behavior for videos.
+ * 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";
+  type: "video";
   /**
-   * The function used resolve the video ref.
-   * This is used in conjunction with content import.
+   * 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.
-   * @remarks
-   * The preview image is the image that users see under their cursor
-   * while dragging it into their design.
    */
   previewSize: Dimensions;
   /**
    * The dimensions of the full-size video.
-   * These dimensions are used when adding the video to the design
    *
-   * If omitted, the value of the `previewSize` property is
-   * used as a fallback.
+   * @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 the preview image.
-   *
-   * @remarks
-   * The preview image is the image that users see under their cursor while dragging
-   * it into their design.
+   * The URL of an image to display under the user's cursor during the drag and drop event.
    */
   previewUrl: string;
 };
 
 /**
  * @public
- * Options for defining the drag-and-drop behavior for videos.
+ * 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
@@ -1623,15 +2006,27 @@ export declare type VideoDragConfigForElement<E extends Element> =
 
 /**
  * @public
- * A video asset that will be used to fill the given path.
+ * 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 = {
   /**
-   * Type of an asset that will be used to fill the given path.
+   * The type of fill.
    */
-  type: "VIDEO";
+  type: "video";
   /**
-   * A unique identifier that references a video asset in Canva's backend.
+   * A unique identifier that points to a video asset in Canva's backend.
    */
   ref: VideoRef;
 };
@@ -1644,20 +2039,45 @@ 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 = {
   /**
-   * The width of the box. If height is a number, this can be set to "auto".
-   * Otherwise, it must be an integer between 0 and 32767.
+   * A width, in pixels.
+   *
+   * @remarks
+   * - The pixels are relative to their container.
+   * - Minimum: 0
+   * - Maximum: 32767
    */
   width: number;
   /**
-   * The height of the box. If width is a number, this can be set to "auto".
-   * Otherwise, it must be an integer between 0 and 32767.
+   * A height, in pixels.
+   *
+   * @remarks
+   * - The pixels are relative to their container.
+   * - Minimum: 0
+   * - Maximum: 32767
    */
   height: number;
 };