@canva/design 2.2.0-beta.1 → 2.2.1

package/{beta.d.ts → index.d.ts}

@@ -10,7 +10,7 @@ export declare const addAudioTrack: (audioTrack: AudioTrack) => Promise<void>;
  * Add element to responsive documents, which slot things into a text stream
  */
 export declare const addElementAtCursor: (
-  element: ElementAtCursor | TableElement
+  element: ElementAtCursor
 ) => Promise<void>;
 
 /**
@@ -18,7 +18,7 @@ export declare const addElementAtCursor: (
  * Add element to fixed designs, which use a coordinate-based positioning system.
  */
 export declare const addElementAtPoint: (
-  element: DesignElement | ElementAtPoint | TableElement | RichtextElement
+  element: DesignElement | ElementAtPoint
 ) => Promise<void>;
 
 /**
@@ -145,7 +145,7 @@ export declare type AppElementRenderer<A extends AppElementData> = (
  * @public
  * An array of one or more elements to render as output of an app element.
  */
-export declare type AppElementRendererOutput = NativeSimpleElementWithBox[];
+export declare type AppElementRendererOutput = GroupContentAtPoint[];
 
 /**
  * @public
@@ -225,7 +225,7 @@ export declare type Bounds = {
  * @remarks
  * The position and dimensions are relative to the container.
  */
-export declare type Box = Position & (WidthAndHeight | Width | Height);
+export declare type Box = Point & (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -328,14 +328,6 @@ export declare interface ContentDraft<T> {
  */
 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.
@@ -355,747 +347,21 @@ export declare type Coordinates = {
  * @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;
-
-  {
-  }
-}
+export declare const createRichtextRange: () => RichtextRange;
 
 /**
  * @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;
+export declare type DesignElement =
+  | ImageElement
+  | VideoElement
+  | EmbedElement
+  | TextElement
+  | ShapeElement
+  | GroupElement
+  | RichtextElement
+  | TableElement;
 
 /**
  * @public
@@ -1206,14 +472,6 @@ export declare type DragStartEvent<E extends Element> = Pick<
   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
@@ -1223,14 +481,20 @@ export declare type ElementAtCursor =
   | VideoElement
   | EmbedElement
   | TextElement
-  | RichtextElement;
+  | RichtextElement
+  | TableElement;
 
 /**
  * @public
  * An element that's natively supported by the Canva editor and has positional properties.
  */
 export declare type ElementAtPoint =
-  | NativeElementWithBox
+  | ImageElementAtPoint
+  | VideoElementAtPoint
+  | EmbedElementAtPoint
+  | TextElementAtPoint
+  | ShapeElementAtPoint
+  | GroupElementAtPoint
   | RichtextElementAtPoint;
 
 /**
@@ -1274,13 +538,27 @@ export declare type EmbedDragConfig = {
  * @public
  * An element that renders rich media, such as a YouTube video.
  */
-export declare type EmbedElement = NativeEmbedElement;
+export declare type EmbedElement = {
+  /**
+   * The type of element.
+   */
+  type: "embed";
+  /**
+   * The URL of the rich media.
+   *
+   * @remarks
+   * This URL must be supported by the Iframely API.
+   */
+  url: string;
+};
 
 /**
  * @public
  * An element that renders rich media, such as a YouTube video, and has positional properties.
  */
-export declare type EmbedElementAtPoint = NativeEmbedElementWithBox;
+export declare type EmbedElementAtPoint = EmbedElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -1482,25 +760,43 @@ export declare const getDefaultPageDimensions: () => Promise<
  * @public
  * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
  */
-export declare function getDesignToken(): Promise<DesignToken>;
+export declare const 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;
+export declare type GroupContentAtPoint = Exclude<
+  ElementAtPoint,
+  GroupElementAtPoint
+>;
 
 /**
  * @public
  * An element that contains two or more elements.
  */
-export declare type GroupElement = NativeGroupElement;
+export declare type GroupElement = {
+  /**
+   * 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: GroupContentAtPoint[];
+};
 
 /**
  * @public
  * An element that contains two or more elements and has positional properties.
  */
-export declare type GroupElementAtPoint = NativeGroupElementWithBox;
+export declare type GroupElementAtPoint = GroupElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * A set of dimensions with an auto-calculated width.
@@ -1540,13 +836,45 @@ export declare type ImageDragConfigForElement<E extends Element> =
  * @public
  * An element that renders image content.
  */
-export declare type ImageElement = NativeImageElement;
+export declare type ImageElement = {
+  /**
+   * 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;
+    }
+);
 
 /**
  * @public
  * An element that renders image content and has positional properties.
  */
-export declare type ImageElementAtPoint = NativeImageElementWithBox;
+export declare type ImageElementAtPoint = ImageElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -1586,9 +914,9 @@ export declare type ImageRef = string & {
  * @public
  * @param appElementConfig - Configuration for an AppElementClient
  */
-export declare function initAppElement<A extends AppElementData>(
+export declare const initAppElement: <A extends AppElementData>(
   appElementConfig: AppElementClientConfiguration<A>
-): AppElementClient<A>;
+) => AppElementClient<A>;
 
 /**
  * @public
@@ -1636,7 +964,7 @@ export declare type InlineFormatting = {
 };
 
 /**
- * @deprecated
+ * @deprecated The type has been superseded by `DesignElement`.
  * @public
  * An element that's natively supported by the Canva editor.
  */
@@ -1678,302 +1006,97 @@ export declare type NativeElementWithBox =
  * @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;
-};
+export declare type NativeEmbedElement = EmbedElement;
 
 /**
  * @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;
+ * An element that renders rich media, such as a YouTube video, and has positional properties.
+ */
+export declare type NativeEmbedElementWithBox = EmbedElementAtPoint;
 
 /**
  * @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[];
-};
+export declare type NativeGroupElement = GroupElement;
 
 /**
  * @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;
+export declare type NativeGroupElementWithBox = GroupElementAtPoint;
 
 /**
  * @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;
-    }
-);
+export declare type NativeImageElement = ImageElement;
 
 /**
  * @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;
+export declare type NativeImageElementWithBox = ImageElementAtPoint;
 
 /**
  * @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[];
-};
+export declare type NativeShapeElement = ShapeElement;
 
 /**
  * @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;
+export declare type NativeShapeElementWithBox = ShapeElementAtPoint;
 
 /**
  * @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
->;
+export declare type NativeSimpleElementWithBox = GroupContentAtPoint;
 
 /**
  * @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;
+export declare type NativeTextElement = TextElement;
 
 /**
  * @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;
+export declare type NativeTextElementWithBox = TextElementAtPoint;
 
 /**
  * @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;
-};
+export declare type NativeVideoElement = VideoElement;
 
 /**
  * @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;
+export declare type NativeVideoElementWithBox = VideoElementAtPoint;
 
 /**
  * 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
@@ -2100,13 +1223,12 @@ export declare type PathStroke = {
  * @public
  * A position, set of dimensions, and rotation.
  */
-export declare type Placement = Position & (WidthAndHeight | Width | Height);
+export declare type Placement = Point & (WidthAndHeight | Width | Height);
 
 /**
- * @deprecated
  * A position and rotation.
  */
-declare type Position = {
+declare type Point = {
   /**
    * The distance from the top edge of the container, in pixels.
    *
@@ -2143,59 +1265,6 @@ declare type Position = {
  */
 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.
@@ -2471,13 +1540,33 @@ export declare const setCurrentPageBackground: (
  * @public
  * An element that renders a vector shape.
  */
-export declare type ShapeElement = NativeShapeElement;
+export declare type ShapeElement = {
+  /**
+   * 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[];
+};
 
 /**
  * @public
  * An element that renders a vector shape and has positional properties.
  */
-export declare type ShapeElementAtPoint = NativeShapeElementWithBox;
+export declare type ShapeElementAtPoint = ShapeElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * @public
@@ -2613,39 +1702,15 @@ export declare type TextAttributes = {
  * @public
  * The dimensions, position, and rotation of a text element.
  */
-declare type TextBox = {
+declare type TextBox = Point & {
   /**
-   * The width, in pixels.
+   * 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: -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;
 };
 
 /**
@@ -2681,24 +1746,31 @@ export declare type TextDragConfig = {
    * @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;
+export declare type TextElement = {
+  /**
+   * The type of element.
+   */
+  type: "text";
+  /**
+   * The text content.
+   *
+   * @remarks
+   * Only the first element in this array is used.
+   */
+  children: string[];
+} & TextAttributes;
 
 /**
  * @public
  * An element that renders text content and has positional properties.
  */
-export declare type TextElementAtPoint = NativeTextElementWithBox;
+export declare type TextElementAtPoint = TextElement & TextAttributes & TextBox;
 
 /**
  * @public
@@ -2834,13 +1906,28 @@ export declare type VideoDragConfigForElement<E extends Element> =
  * @public
  * An element that renders video content.
  */
-export declare type VideoElement = NativeVideoElement;
+export declare type VideoElement = {
+  /**
+   * 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;
+};
 
 /**
  * @public
  * An element that renders video content and has positional properties.
  */
-export declare type VideoElementAtPoint = NativeVideoElementWithBox;
+export declare type VideoElementAtPoint = VideoElement &
+  Point &
+  (WidthAndHeight | Width | Height);
 
 /**
  * @public