@canva/design 2.7.3 → 2.7.4-beta.1

package/index.d.ts

@@ -1,5092 +1 @@
-/**
- * Adds an audio track to the user's design.
- * @public
- * @param audioTrack - The audio track to add to the user's design.
- *
- * @example Add audio track to design
- * ```typescript
- * import { addAudioTrack } from "@canva/design";
- * import type { AudioTrack } from "@canva/design";
- * import type { AudioRef } from "@canva/asset";
- *
- * const exampleAudioRef = "YOUR_AUDIO_REF" as AudioRef;
- *
- * const audioTrack: AudioTrack = {
- *   ref: exampleAudioRef
- * };
- *
- * await addAudioTrack(audioTrack);
- * ```
- */
-export declare const addAudioTrack: (audioTrack: AudioTrack) => Promise<void>;
-
-/**
- * @public
- * Add element to responsive documents, which slot things into a text stream
- *
- * @example Insert an image at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { ImageElement } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * const imageElement: ImageElement = {
- *   type: 'image',
- *   ref: exampleImageRef,
- *   altText: { text: 'Product image', decorative: false }
- * };
- *
- * await addElementAtCursor(imageElement);
- * ```
- *
- * @example Insert a video at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { VideoElement } from "@canva/design";
- * import type { VideoRef } from "@canva/asset";
- *
- * const exampleVideoRef = "YOUR_VIDEO_REF" as VideoRef;
- *
- * const videoElement: VideoElement = {
- *   type: 'video',
- *   ref: exampleVideoRef,
- *   altText: { text: 'Product demo', decorative: false }
- * };
- *
- * await addElementAtCursor(videoElement);
- * ```
- *
- * @example Insert embedded content at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { EmbedElement } from "@canva/design";
- *
- * const embedElement: EmbedElement = {
- *   type: 'embed',
- *   url: 'https://www.youtube.com/watch?v=...'
- * };
- *
- * await addElementAtCursor(embedElement);
- * ```
- *
- * @example Insert text at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { TextElement } from "@canva/design";
- *
- * const textElement: TextElement = {
- *   type: 'text',
- *   children: ['Hello World'],
- *   fontSize: 24,
- *   color: '#000000'
- * };
- *
- * await addElementAtCursor(textElement);
- * ```
- *
- * @example Insert formatted text at cursor position
- * ```typescript
- * import { addElementAtCursor, createRichtextRange } from "@canva/design";
- * import type { RichtextElement } from "@canva/design";
- *
- * const range = createRichtextRange();
- * range.appendText('Rich Text Content', { color: '#000000' });
- *
- * const richtextElement: RichtextElement = {
- *   type: 'richtext',
- *   range
- * };
- *
- * await addElementAtCursor(richtextElement);
- * ```
- *
- * @example Insert a table at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { TableElement } from "@canva/design";
- *
- * const tableElement: TableElement = {
- *   type: 'table',
- *   rows: [
- *     {
- *       cells: [
- *         { type: 'string', value: 'Header 1' },
- *         { type: 'string', value: 'Header 2' }
- *       ]
- *     },
- *     {
- *       cells: [
- *         { type: 'string', value: 'Data 1' },
- *         { type: 'string', value: 'Data 2' }
- *       ]
- *     }
- *   ]
- * };
- *
- * await addElementAtCursor(tableElement);
- * ```
- */
-export declare const addElementAtCursor: (
-  element: ElementAtCursor,
-) => Promise<void>;
-
-/**
- * @public
- * Add element to fixed designs, which use a coordinate-based positioning system.
- *
- * @example Insert an image at specific coordinates
- * ```typescript
- * import { addElementAtPoint } from "@canva/design";
- * import type { ImageElementAtPoint } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * const imageElement: ImageElementAtPoint = {
- *   type: 'image',
- *   ref: exampleImageRef,
- *   altText: { text: 'Product image', decorative: false },
- *   top: 100,
- *   left: 100,
- *   width: 300,
- *   height: 200
- * };
- *
- * await addElementAtPoint(imageElement);
- * ```
- *
- * @example Insert a video at specific coordinates
- * ```typescript
- * import { addElementAtPoint } from "@canva/design";
- * import type { VideoElementAtPoint } from "@canva/design";
- * import type { VideoRef } from "@canva/asset";
- *
- * const exampleVideoRef = "YOUR_VIDEO_REF" as VideoRef;
- *
- * const videoElement: VideoElementAtPoint = {
- *   type: 'video',
- *   ref: exampleVideoRef,
- *   altText: { text: 'Product demo', decorative: false },
- *   top: 100,
- *   left: 100,
- *   width: 400,
- *   height: 300
- * };
- *
- * await addElementAtPoint(videoElement);
- * ```
- *
- * @example Insert embedded content at specific coordinates
- * ```typescript
- * import { addElementAtPoint } from "@canva/design";
- * import type { EmbedElementAtPoint } from "@canva/design";
- *
- * const embedElement: EmbedElementAtPoint = {
- *   type: 'embed',
- *   url: 'https://www.youtube.com/watch?v=...',
- *   top: 100,
- *   left: 100,
- *   width: 560,
- *   height: 315
- * };
- *
- * await addElementAtPoint(embedElement);
- * ```
- *
- * @example Insert text at specific coordinates
- * ```typescript
- * import { addElementAtPoint } from "@canva/design";
- * import type { TextElementAtPoint } from "@canva/design";
- *
- * const textElement: TextElementAtPoint = {
- *   type: 'text',
- *   children: ['Hello World'],
- *   top: 100,
- *   left: 100,
- *   width: 200,
- *   fontSize: 24,
- *   color: '#000000',
- *   textAlign: 'justify'
- * };
- *
- * await addElementAtPoint(textElement);
- * ```
- */
-export declare const addElementAtPoint: (
-  element: DesignElement | ElementAtPoint,
-) => Promise<void>;
-
-/**
- * @deprecated
- * @public
- * Adds a native element to the user's design.
- * @param element - The element to add to the user's design.
- *
- * @example Basic usage
- * ```typescript
- * import { addNativeElement } from "@canva/design";
- * import type { NativeElementWithBox } from "@canva/design";
- *
- * const element: NativeElementWithBox = {
- *   type: 'text',
- *   children: ['Legacy element'],
- *   top: 100,
- *   left: 100,
- *   width: 200
- * };
- *
- * await addNativeElement(element);
- * ```
- */
-export declare const addNativeElement: (
-  element: NativeElement | NativeElementWithBox,
-) => Promise<void>;
-
-/**
- * @public
- * Adds a new page immediately after the currently selected page.
- * @param opts - Configuration for the new page to be added.
- *
- * @example Create empty page
- * ```typescript
- * import { addPage } from "@canva/design";
- *
- * await addPage();
- * ```
- *
- * @example Create page with title
- * ```typescript
- * import { addPage } from "@canva/design";
- *
- * await addPage({
- *   title: 'My New Page'
- * });
- * ```
- *
- * @example Create page with background color
- * ```typescript
- * import { addPage } from "@canva/design";
- * import type { PageBackgroundFill } from "@canva/design";
- *
- * const background: PageBackgroundFill = {
- *   color: '#F5F5F5',
- * };
- *
- * await addPage({ background });
- * ```
- *
- * @example Create page with background image
- * ```typescript
- * import { addPage } from "@canva/design";
- * import type { PageBackgroundFill } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * const background: PageBackgroundFill = {
- *   asset: {
- *     type: 'image',
- *     ref: exampleImageRef,
- *     altText: { text: 'Background image', decorative: true }
- *   },
- * };
- *
- * await addPage({ background });
- * ```
- *
- * @example Create page with multiple elements
- * ```typescript
- * import { addPage } from "@canva/design";
- * import type { TextElementAtPoint, ImageElementAtPoint } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * await addPage({
- *   elements: [
- *     {
- *       type: 'text',
- *       children: ['Page Title'],
- *       top: 50,
- *       left: 100,
- *       width: 400,
- *       fontSize: 32,
- *       textAlign: 'center'
- *     } as TextElementAtPoint,
- *     {
- *       type: 'text',
- *       children: ['Subtitle text'],
- *       top: 100,
- *       left: 100,
- *       width: 400,
- *       fontSize: 18,
- *       textAlign: 'center'
- *     } as TextElementAtPoint,
- *     {
- *       type: 'image',
- *       ref: exampleImageRef,
- *       altText: { text: 'Featured image', decorative: false },
- *       top: 150,
- *       left: 200,
- *       width: 200,
- *       height: 200
- *     } as ImageElementAtPoint,
- *   ]
- * });
- * ```
- */
-export declare const addPage: (opts?: {
-  /**  Elements to be added to the page */
-  elements?: ElementAtPoint[];
-  /**
-   * The page background. This can be a solid color, an image or a video.
-   **/
-  background?: PageBackgroundFill;
-  /**  A page title which must be no longer than 255 characters */
-  title?: string;
-}) => Promise<void>;
-
-/**
- * @public
- * Alternative text for a11y compliance.
- */
-export declare type AltText = {
-  /**
-   * The text content.
-   */
-  text: string;
-  /**
-   * Indicates where the alternative text should be displayed.
-   *
-   * @remarks
-   * - If `true`, the alternative text will only be displayed in the editor.
-   * - If `false`, the alternative text will be displayed in the editor and in view-only mode.
-   */
-  decorative: boolean | undefined;
-};
-
-/**
- * @public
- * A callback that runs when:
- *
- * - the app element is created
- * - the app element's data is updated
- * - the user selects an existing app element
- *
- * @param appElement - Information about the app element that was changed.
- *
- * @example Handle element selection
- * ```typescript
- * import { initAppElement } from "@canva/design";
- *
- * const appElement = initAppElement<{ content: string }>({
- *   render: (data) => {
- *     // Render based on data
- *     return [{
- *       type: 'text',
- *       children: [data.content || 'Default text'],
- *       top: 0,
- *       left: 0,
- *       width: 200
- *     }];
- *   }
- * });
- *
- * appElement.registerOnElementChange((element) => {
- *   if (element) {
- *     // Element selected or created, do something with the `element.data`
- *   } else {
- *     // No element selected
- *   }
- * });
- * ```
- *
- * @example Update element data when selected
- * ```typescript
- * import { initAppElement } from "@canva/design";
- *
- * const appElement = initAppElement<{
- *   content: string;
- *   lastSelected: number;
- *   lastUpdated: number;
- *   metadata: { lastEdited: number; editCount: number };
- * }>({
- *   render: (data) => {
- *     // Render based on data
- *     return [{
- *       type: 'text',
- *       children: [data.content || 'Default text'],
- *       top: 0,
- *       left: 0,
- *       width: 200
- *     }];
- *   }
- * });
- *
- * appElement.registerOnElementChange(async (element) => {
- *   if (element) {
- *     // Use the update method to modify the element's data
- *     await element.update({
- *       data: {
- *         ...element.data,
- *         lastSelected: Date.now()
- *       }
- *     });
- *   }
- * });
- * ```
- */
-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;
-        /**
-         * Function to update the app element data.
-         *
-         * @param opts - The data and placement to update the app element with.
-         *
-         * @example Update element data only
-         * ```typescript
-         * if (element) {
-         *   await element.update({
-         *     data: {
-         *       ...element.data,
-         *       content: 'Updated content',
-         *       lastUpdated: Date.now()
-         *     }
-         *   });
-         * }
-         * ```
-         *
-         * @example Update data and placement
-         * ```typescript
-         * if (element) {
-         *   await element.update({
-         *     data: {
-         *       ...element.data,
-         *       content: 'Positioned element'
-         *     },
-         *     placement: {
-         *       top: 200,
-         *       left: 200,
-         *       width: 300,
-         *       height: 100
-         *     }
-         *   });
-         * }
-         * ```
-         *
-         * @example Add metadata to element
-         * ```typescript
-         * if (element) {
-         *   await element.update({
-         *     data: {
-         *       ...element.data,
-         *       metadata: {
-         *         ...(element.data.metadata || {}),
-         *         lastEdited: Date.now(),
-         *         editCount: (element.data.metadata?.editCount || 0) + 1,
-         *       },
-         *     },
-         *   });
-         * }
-         * ```
-         */
-        update: (opts: AppElementOptions<A>) => Promise<void>;
-      }
-    | undefined,
-) => void;
-
-/**
- * @public
- * A client that provides methods for creating and managing the lifecycle of an app element.
- */
-export declare interface AppElementClient<A extends AppElementData> {
-  /**
-   * @deprecated This type has been superseded, use `addElement` or `registerOnElementChange` instead.
-   * 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.
-   *
-   * @example Create or update an element (deprecated)
-   * ```typescript
-   * import { initAppElement } from "@canva/design";
-   *
-   * // Initialize the app element client
-   * const appElement = initAppElement<{ content: string; timestamp: number }>({
-   *   render: (data) => {
-   *     return [{
-   *       type: 'text',
-   *       children: [data.content || 'Default text'],
-   *       top: 100,
-   *       left: 100,
-   *       width: 200
-   *     }];
-   *   }
-   * });
-   *
-   * // Create a new element or update selected element
-   * await appElement.addOrUpdateElement({
-   *   content: 'Hello from the app',
-   *   timestamp: Date.now()
-   * });
-   * ```
-   *
-   * @example Update with specific placement (deprecated)
-   * ```typescript
-   * import { initAppElement } from "@canva/design";
-   *
-   * const appElement = initAppElement<{ content: string }>({
-   *   render: (data) => {
-   *     return [{
-   *       type: 'text',
-   *       children: [data.content || 'Default text'],
-   *       top: 0,
-   *       left: 0,
-   *       width: 200
-   *     }];
-   *   }
-   * });
-   *
-   * // Create or update with specific placement
-   * await appElement.addOrUpdateElement(
-   *   {
-   *     content: 'Positioned content'
-   *   },
-   *   {
-   *     top: 200,
-   *     left: 200,
-   *     width: 300,
-   *     height: 100
-   *   }
-   * );
-   * ```
-   */
-  addOrUpdateElement(appElementData: A, placement?: Placement): Promise<void>;
-  /**
-   * Adds a new app element to the design.
-   * @param opts - The data and placement of the app element.
-   *
-   * @example Add new element with data
-   * ```typescript
-   * import { initAppElement } from "@canva/design";
-   *
-   * const appElement = initAppElement<{ content: string; id: string }>({
-   *   render: (data) => {
-   *     return [{
-   *       type: 'text',
-   *       children: [data.content || 'Default text'],
-   *       top: 0,
-   *       left: 0,
-   *       width: 200
-   *     }];
-   *   }
-   * });
-   *
-   * // Add a new element
-   * await appElement.addElement({
-   *   data: {
-   *     content: 'New element content',
-   *     id: 'element-' + Date.now()
-   *   }
-   * });
-   * ```
-   *
-   * @example Add element with specific placement
-   * ```typescript
-   * import { initAppElement } from "@canva/design";
-   *
-   * const appElement = initAppElement<{
-   *   title: string;
-   *   description: string;
-   *   createdAt: number;
-   * }>({
-   *   render: (data) => {
-   *     return [{
-   *       type: 'text',
-   *       children: [data.title || 'Default title'],
-   *       top: 0,
-   *       left: 0,
-   *       width: 300,
-   *       fontWeight: 'bold',
-   *       fontSize: 24
-   *     }, {
-   *       type: 'text',
-   *       children: [data.description || 'Default description'],
-   *       top: 50,
-   *       left: 0,
-   *       width: 300
-   *     }];
-   *   }
-   * });
-   *
-   * // Add element with specific placement
-   * await appElement.addElement({
-   *   data: {
-   *     title: 'Element Title',
-   *     description: 'This is a description of the element',
-   *     createdAt: Date.now()
-   *   },
-   *   placement: {
-   *     top: 100,
-   *     left: 100,
-   *     width: 400,
-   *     height: 150,
-   *     rotation: 0
-   *   }
-   * });
-   * ```
-   */
-  addElement(opts: AppElementOptions<A>): Promise<void>;
-  /**
-   * A callback that runs when:
-   *
-   * - the app element is created
-   * - the app element's data is updated
-   * - the user selects an existing app element
-   *
-   * @param handler - The callback to run when the app element changes.
-   *
-   * @example Handle element selection and update
-   * ```typescript
-   * import { initAppElement } from "@canva/design";
-   *
-   * const appElement = initAppElement<{ content: string }>({
-   *   render: (data) => {
-   *     return [{
-   *       type: 'text',
-   *       children: [data.content || 'Default text'],
-   *       top: 0,
-   *       left: 0,
-   *       width: 200
-   *     }];
-   *   }
-   * });
-   *
-   * // Register a handler for element changes
-   * appElement.registerOnElementChange((element) => {
-   *   if (element) {
-   *     // Element is created or selected
-   *     // Optionally update the element
-   *     // element.update({
-   *     //   data: { ...element.data, lastSelected: Date.now() }
-   *     // });
-   *   } else {
-   *     // No element is selected
-   *   }
-   * });
-   * ```
-   *
-   * @example Update element when selected
-   * ```typescript
-   * import { initAppElement } from "@canva/design";
-   *
-   * const appElement = initAppElement<{
-   *   content: string;
-   *   metadata: { created: number; lastSelected: number };
-   * }>({
-   *   render: (data) => {
-   *     // Render based on data
-   *     return [{
-   *       type: 'text',
-   *       children: [data.content || ''],
-   *       top: 0,
-   *       left: 0,
-   *       width: 200
-   *     }];
-   *   }
-   * });
-   *
-   * // Update element when selected
-   * appElement.registerOnElementChange(async (element) => {
-   *   if (element) {
-   *     // Check if this is a newly created or a selected element
-   *     const isNewElement = !element.data.metadata?.created;
-   *
-   *     if (isNewElement) {
-   *       // Update a new element with initial metadata
-   *       await element.update({
-   *         data: {
-   *           ...element.data,
-   *           metadata: {
-   *             created: Date.now(),
-   *             lastSelected: Date.now()
-   *           }
-   *         }
-   *       });
-   *     } else {
-   *       // Update existing element's last selected time
-   *       await element.update({
-   *         data: {
-   *           ...element.data,
-   *           metadata: {
-   *             ...element.data.metadata,
-   *             lastSelected: Date.now()
-   *           }
-   *         }
-   *       });
-   *     }
-   *   }
-   * });
-   * ```
-   */
-  registerOnElementChange(handler: AppElementChangeHandler<A>): void;
-}
-
-/**
- * @public
- * Options for creating an app element client.
- */
-export declare type AppElementClientConfiguration<A extends AppElementData> = {
-  /**
-   * Registers a callback that renders an app element based on the data it receives.
-   */
-  render: AppElementRenderer<A>;
-};
-
-/**
- * @public
- * The data associated with an app element.
- */
-export declare type AppElementData = Record<string, Value>;
-
-/**
- * @public
- * Used to add or update an app element to the design.
- * The update function is provided in the AppElementChangeHandler callback (registerOnElementChange).
- */
-export declare type AppElementOptions<A extends AppElementData> = {
-  /**
-   * The data to attach to the app element.
-   */
-  data: A;
-  /**
-   * The position, dimensions, and rotation of the app element.
-   */
-  placement?: Placement;
-};
-
-/**
- * @public
- * A callback function that renders an app element based on the data it receives.
- * @param appElementData - The data the callback must use to render the app element.
- */
-export declare type AppElementRenderer<A extends AppElementData> = (
-  appElementData: A,
-) => AppElementRendererOutput;
-
-/**
- * @public
- * An array of one or more elements to render as output of an app element.
- */
-export declare type AppElementRendererOutput = GroupContentAtPoint[];
-
-/**
- * @public
- * A unique identifier that references an app runtime process
- */
-export declare type AppProcessId = string & {
-  __appProcessId: never;
-};
-
-/**
- * @public
- * Audio track to be added to the design at the end of a drag event.
- */
-export declare type AudioDragConfig = {
-  /**
-   * The type of element.
-   */
-  type: "audio";
-  /**
-   * A function that returns a reference (ref) to an audio asset in Canva's backend.
-   */
-  resolveAudioRef: () => Promise<{
-    ref: AudioRef;
-  }>;
-  /**
-   * The duration of the audio track, in milliseconds.
-   */
-  durationMs: number;
-  /**
-   * A human readable title for the audio track.
-   */
-  title: string;
-};
-
-/**
- * @public
- * A unique identifier that references an audio asset in Canva's backend.
- */
-export declare type AudioRef = string & {
-  __audioRef: never;
-};
-
-/**
- * @public
- * An audio track that can be added to a design.
- */
-export declare type AudioTrack = {
-  /**
-   * A unique identifier that points to an audio asset in Canva's backend.
-   */
-  ref: AudioRef;
-};
-
-/**
- * @public
- * A segment of a richtext range.
- */
-export declare type Bounds = {
-  /**
-   * The starting position of the segment.
-   *
-   * @remarks
-   * This is zero-based, meaning the first character of the range is at index 0.
-   */
-  index: number;
-  /**
-   * The number of characters in the segment, starting from the index.
-   */
-  length: number;
-};
-
-/**
- * @deprecated
- * @public
- * A position, rotation, and set of dimensions.
- *
- * @remarks
- * The position and dimensions are relative to the container.
- */
-export declare type Box = Point & (WidthAndHeight | Width | Height);
-
-/**
- * @public
- * An individual cell in a table element.
- */
-export declare type Cell = {
-  /**
-   * The attributes of the cell.
-   */
-  attributes?: CellAttributes;
-  /**
-   * The number of columns that the cell occupies.
-   */
-  colSpan?: number;
-  /**
-   * The number of rows that the cell occupies.
-   */
-  rowSpan?: number;
-} & CellContent;
-
-/**
- * @public
- * Additional attributes of table cell.
- */
-declare type CellAttributes = {
-  /**
-   * The background color of the cell, as a hex code.
-   */
-  backgroundColor?: string;
-} & TextAttributes;
-
-/**
- * @public
- * The content of a table element's cell.
- * Cell only supports plain text.
- */
-declare type CellContent =
-  | {
-      /**
-       * Indicates that the cell doesn't have any content.
-       */
-      type: "empty";
-    }
-  | {
-      /**
-       * Indicates that the cell contains plaintext content.
-       */
-      type: "string";
-      /**
-       * The plaintext content of the cell.
-       *
-       * @remarks
-       * If an empty string is provided, the `type` will change to `"empty"`.
-       */
-      value: string;
-    };
-
-/**
- * Image element or content to be added to the design at the end of a drag event.
- */
-declare type CommonImageDragConfig = {
-  /**
-   * The type of element.
-   */
-  type: "image";
-  /**
-   * The dimensions of the preview image.
-   */
-  previewSize: Dimensions;
-};
-
-/**
- * @public
- * A snapshot of content from a user's design.
- */
-export declare interface ContentDraft<T> {
-  /**
-   * The individual content items that exist within the snapshot.
-   *
-   * @remarks
-   * Any changes made to this array won't be reflected in the user's design until the `save` method is called.
-   */
-  readonly contents: readonly T[];
-  /**
-   * Saves changes made to the content items in the `contents` array.
-   *
-   * @remarks
-   * Once this method is called:
-   *
-   * - Any changes the app has made to to the content will be reflected in the user's design.
-   * - Any changes the user has made to the content since the snapshot was created may be overwritten.
-   * - Only properties that are different from the original state will be written to the design.
-   *
-   * @example Save changes to selected text
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'plaintext',
-   *   onChange: async (event) => {
-   *     if (event.count > 0) {
-   *       const draft = await event.read();
-   *
-   *       // Make changes to the content
-   *       for (const content of draft.contents) {
-   *         content.text = content.text.toUpperCase();
-   *       }
-   *
-   *       // Save the changes to the design
-   *       await draft.save();
-   *     }
-   *   }
-   * });
-   * ```
-   *
-   * @example Modify then save rich text content
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'richtext',
-   *   onChange: async (event) => {
-   *     if (event.count > 0) {
-   *       const draft = await event.read();
-   *       const range = draft.contents[0];
-   *
-   *       // Get the plain text
-   *       const text = range.readPlaintext();
-   *
-   *       // Apply formatting to the entire text
-   *       range.formatText(
-   *         { index: 0, length: text.length },
-   *         { fontWeight: 'bold', color: '#0066CC' }
-   *       );
-   *
-   *       // Save the formatted text back to the design
-   *       await draft.save();
-   *     }
-   *   }
-   * });
-   * ```
-   */
-  save(): Promise<void>;
-}
-
-/**
- * @public
- * A type of content that can be read from a user's design.
- */
-export declare type ContentType = "richtext";
-
-/**
- * @public
- * Options for configuring where content in a design should be queried from.
- */
-export declare type ContextOptions = {
-  target: "current_page";
-};
-
-/**
- * @public
- * A set of X and Y coordinates.
- */
-export declare type Coordinates = {
-  /**
-   * X coordinate, in pixels.
-   */
-  x: number;
-  /**
-   * Y coordinate, in pixels.
-   */
-  y: number;
-};
-
-/**
- * @public
- * Creates a new RichtextRange object, which contains methods to manipulate text.
- *
- * @example Create formatted text range
- * ```typescript
- * import { createRichtextRange } from "@canva/design";
- * import type { InlineFormatting } from "@canva/design";
- *
- * const range = createRichtextRange();
- *
- * range.appendText('Hello World', {
- *   color: '#000000',
- *   fontWeight: 'bold'
- * } as InlineFormatting);
- * ```
- *
- * @example Format paragraph styles
- * ```typescript
- * import { createRichtextRange } from "@canva/design";
- * import type { RichtextFormatting } from "@canva/design";
- *
- * const range = createRichtextRange();
- *
- * const bounds = range.appendText('Centered Title\n');
- * range.formatParagraph(bounds.bounds, {
- *   fontSize: 32,
- *   textAlign: 'center'
- * } as RichtextFormatting);
- * ```
- *
- * @example Create bulleted list
- * ```typescript
- * import { createRichtextRange } from "@canva/design";
- *
- * const range = createRichtextRange();
- *
- * const item = range.appendText('List item\n');
- * range.formatParagraph(item.bounds, {
- *   fontSize: 16,
- *   listLevel: 1,
- *   listMarker: 'disc'
- * });
- * ```
- *
- * @example Extract text content
- * ```typescript
- * import { createRichtextRange } from "@canva/design";
- *
- * const range = createRichtextRange();
- * range.appendText('Sample text');
- *
- * // Get plain text content
- * const text = range.readPlaintext();
- *
- * // Get formatted regions
- * const regions = range.readTextRegions();
- * ```
- *
- * @example Replace text with formatting
- * ```typescript
- * import { createRichtextRange } from "@canva/design";
- *
- * const range = createRichtextRange();
- * range.appendText('Original text');
- *
- * // Replace text while adding formatting
- * range.replaceText(
- *   { index: 0, length: range.readPlaintext().length },
- *   'Modified',
- *   { color: '#0066CC', decoration: 'underline' }
- * );
- * ```
- */
-export declare const createRichtextRange: () => RichtextRange;
-
-/**
- * @public
- * Describes a part of a design.
- */
-export declare type DesignContext = DesignContextOptions["type"];
-
-/**
- * @public
- * Options for configuring which part of a design to read.
- */
-declare type DesignContextOptions = {
-  /**
-   * The type of context.
-   */
-  type: "current_page";
-};
-
-/**
- * @public
- * Provides methods for reading and updating the structure and content of a design.
- */
-export declare namespace DesignEditing {
-  /**
-   * @public
-   * Options for creating an image fill in the element state builder
-   */
-  export type ImageFillOpts = {
-    /**
-     * The type of media.
-     */
-    type: "image";
-    /**
-     * A unique identifier that points to an image asset in Canva's backend.
-     */
-    imageRef: ImageRef;
-    /**
-     * If `true`, the image is flipped horizontally.
-     */
-    flipX?: boolean;
-    /**
-     * If `true`, the image is flipped vertically.
-     */
-    flipY?: boolean;
-  };
-  /**
-   * @public
-   * Options for creating a video fill in the element state builder
-   */
-  export type VideoFillOpts = {
-    /**
-     * The type of media.
-     */
-    type: "video";
-    /**
-     * A unique identifier that points to a video asset in Canva's backend.
-     */
-    videoRef: VideoRef;
-    /**
-     * If `true`, the video is flipped horizontally.
-     */
-    flipX?: boolean;
-    /**
-     * If `true`, the video is flipped vertically.
-     */
-    flipY?: boolean;
-  };
-  /**
-   * @public
-   * Options for creating a media fill in the element state builder
-   */
-  export type MediaContainerOpts = ImageFillOpts | VideoFillOpts;
-  /**
-   * @public
-   * Options for creating a fill in the element state builder
-   */
-  export type FillOpts =
-    | {
-        colorContainer: ColorContainerOpts;
-        mediaContainer?: MediaContainerOpts;
-      }
-    | {
-        colorContainer?: ColorContainerOpts;
-        mediaContainer: MediaContainerOpts;
-      };
-  /**
-   * @public
-   * Options for creating a fill of a shape in the element state builder
-   */
-  export type PathFillOpts =
-    | {
-        colorContainer: ColorContainerOpts;
-        mediaContainer?: MediaContainerOpts;
-        isMediaEditable?: boolean;
-      }
-    | {
-        colorContainer?: ColorContainerOpts;
-        mediaContainer: MediaContainerOpts;
-        isMediaEditable?: boolean;
-      };
-  /**
-   * @public
-   */
-  export type ColorContainerOpts = SolidFillState;
-  /**
-   * @public
-   * Options for creating a stroke in the element state builder
-   */
-  export type StrokeOpts = {
-    /**
-     * The weight (thickness) of the stroke.
-     *
-     * @remarks
-     * - Minimum: 0
-     * - Maximum: 100
-     */
-    weight: number;
-    /**
-     * The color of the stroke.
-     */
-    colorContainer: ColorContainerOpts;
-  };
-  /**
-   * @public
-   * Options for creating a shape path in the element state builder
-   */
-  export type PathOpts = {
-    d: string;
-    /**
-     * Describes how a fill is filled with color or media.
-     *
-     * @remarks
-     * If both `media` and `color` are defined, `media` takes precedence.
-     */
-    fill?: PathFillOpts;
-    /**
-     * The outline of the path.
-     */
-    stroke?: StrokeOpts;
-  };
-  /**
-   * @public
-   * Options for creating a rect element.
-   */
-  export type CreateRectElementOpts = {
-    /**
-     * 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;
-    /**
-     * A width, in pixels.
-     */
-    width: number;
-    /**
-     * A height, in pixels.
-     */
-    height: number;
-    /**
-     * Describes how a fill is filled with color or media.
-     *
-     * @remarks
-     * If both `media` and `color` are defined, `media` takes precedence.
-     */
-    fill?: FillOpts;
-    /**
-     * The outline of the rect.
-     */
-    stroke?: StrokeOpts;
-  };
-  /**
-   * @public
-   * Options for creating a shape element.
-   */
-  export type CreateShapeElementOpts = {
-    /**
-     * 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;
-    /**
-     * A width, in pixels.
-     */
-    width: number;
-    /**
-     * A height, in pixels.
-     */
-    height: number;
-    /**
-     * The scale and cropping of the shape.
-     */
-    readonly viewBox: AlignedBoxState;
-    /**
-     * 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.
-     */
-    paths: PathOpts[];
-  };
-  /**
-   * @public
-   * Options for creating an embed element.
-   */
-  export type CreateEmbedElementOpts = {
-    /**
-     * 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;
-    /**
-     * A width, in pixels.
-     */
-    width: number;
-    /**
-     * A height, in pixels.
-     */
-    height: number;
-    /**
-     * The URL of the rich media.
-     *
-     * @remarks
-     * This URL must be supported by the Iframely API.
-     */
-    url: string;
-  };
-  /**
-   * @public
-   * Options for creating a text element.
-   */
-  export type CreateTextElementOpts = {
-    /**
-     * 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 width, in pixels.
-     */
-    width: number;
-    /**
-     * The text content.
-     */
-    text: {
-      regions: readonly TextRegion[];
-    };
-    /**
-     * A rotation, in degrees.
-     *
-     * @remarks
-     * - Minimum: -180
-     * - Maximum: 180
-     */
-    rotation?: number;
-    /**
-     * Transparency as a percentage.
-     *
-     * @remarks
-     * - Minimum: 0
-     * - Maximum: 1
-     */
-    transparency?: number;
-  };
-  /**
-   * @public
-   * Provides methods for creating element states.
-   *
-   * @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.
-   *
-   * @preventInline
-   */
-  export interface ElementStateBuilder {
-    /**
-     * Creates a rect element state.
-     * @param opts - Options for creating the rect element.
-     */
-    createRectElement(opts: CreateRectElementOpts): RectElementState;
-    /**
-     * Creates a shape element state.
-     * @param opts - Options for creating the shape element.
-     */
-    createShapeElement(opts: CreateShapeElementOpts): ShapeElementState;
-    /**
-     * Creates an embed element state.
-     * @param opts - Options for creating the embed element.
-     */
-    createEmbedElement(opts: CreateEmbedElementOpts): EmbedElementState;
-    /**
-     * Creates a text element state.
-     * @param opts - Options for creating the text element.
-     */
-    createTextElement(opts: CreateTextElementOpts): TextElementState;
-    /**
-     * Creates a richtext range.
-     */
-    createRichtextRange(): RichtextRange;
-  }
-  /**
-   * @public
-   * Async methods for handling more complex operations.
-   */
-  export interface AsyncOperations {
-    /**
-     * Group specified elements.
-     *
-     * @param opts - Options for grouping elements.
-     *
-     * @returns a new group element containing all the given elements.
-     */
-    group(opts: AsyncOperationsGroupOpts): Promise<GroupElement>;
-    /**
-     * Ungroup a group element.
-     *
-     * @param opts - Options for ungrouping a group element.
-     *
-     * @returns new elements that are ungrouped from the given group.
-     */
-    ungroup(
-      opts: AsyncOperationsUngroupOpts,
-    ): Promise<readonly AbsoluteElement[]>;
-  }
-  /**
-   * @public
-   * Options for `group` operation.
-   */
-  export interface AsyncOperationsGroupOpts {
-    /**
-     * Elements to be grouped.
-     */
-    elements: readonly Exclude<GroupContentElement, UnsupportedElement>[];
-  }
-  /**
-   * @public
-   * Options for `ungroup` operation.
-   */
-  export interface AsyncOperationsUngroupOpts {
-    /**
-     * Group element to be ungroup.
-     */
-    element: GroupElement;
-  }
-  /**
-   * @public
-   * Helpers for use with supported pages.
-   *
-   * @remarks
-   * Not applicable to unsupported pages.
-   *
-   * @preventInline
-   */
-  export type PageHelpers = AsyncOperations & {
-    /**
-     * Build an element state that can be used to create an element with the `insert` methods of
-     * the page's element list
-     */
-    elementStateBuilder: DesignEditing.ElementStateBuilder;
-  };
-  /**
-   * @public
-   * Session received by the `openDesign` callback when opening the current page.
-   */
-  export type CurrentPageSession<
-    Page = DesignEditing.Page,
-    Helpers = DesignEditing.PageHelpers,
-  > = Readonly<{
-    /**
-     * The current page of the design.
-     */
-    page: Page;
-    /**
-     * These are various utilities that allow apps to do more complex operations on the page.
-     */
-    helpers: Helpers;
-    /**
-     * Saves any changes made during the session while keeping the session open.
-     *
-     * @remarks
-     * - Any changes in the session are only reflected in the design after this method is called.
-     * - Once this method is called, further changes in the session can still be made.
-     */
-    sync(): Promise<void>;
-  }>;
-  /**
-   * @deprecated The type has been superseded by `CurrentPageSession`.
-   * @public
-   * Session received by the `openDesign` callback when opening the current page.
-   */
-  export type CurrentPageResult = CurrentPageSession;
-
-  /**
-   * A function called for each item in the list.
-   *
-   * @param item - The current item in the list.
-   */
-  export type ForEachCallback<M> = (item: M) => 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<M> = (item: M) => 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<M, C extends M> = (item: M) => item is C;
-  /**
-   * @public
-   * A list that cannot be changed.
-   *
-   * @preventInline
-   */
-  export interface ReadableList<M> {
-    /**
-     * 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 M[];
-    /**
-     * Executes a function for each item in the list.
-     *
-     * @param callback - The function to run for each item.
-     */
-    forEach(callback: ForEachCallback<M>): 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 M>(filter: TypeFilterPredicate<M, 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<M>): readonly M[];
-  }
-  /**
-   * @public
-   * A list of items that can be read.
-   *
-   * @preventInline
-   */
-  export interface ListState<T> extends Iterable<T | undefined> {
-    join(separator?: string): string;
-    slice(start?: number, end?: number): EditableListState<T>;
-    indexOf(searchElement: T, fromIndex?: number): number;
-    lastIndexOf(searchElement: T, fromIndex?: number): number;
-    every<S extends T>(
-      predicate: (value: T, index: number) => value is S,
-    ): this is ListState<S>;
-    every(predicate: (value: T, index: number) => unknown): boolean;
-    some(predicate: (value: T, index: number) => unknown): boolean;
-    forEach(callbackFn: (value: T, index: number) => void): void;
-    map<U>(callbackFn: (value: T, index: number) => U): EditableListState<U>;
-    filter<S extends T>(
-      predicate: (value: T, index: number) => value is S,
-    ): S[];
-    filter(predicate: (value: T, index: number) => unknown): T[];
-    reduce(
-      callbackFn: (
-        previousValue: T,
-        currentValue: T,
-        currentIndex: number,
-      ) => T,
-      initialValue?: T,
-    ): T;
-    reduce<U>(
-      callbackFn: (
-        previousValue: U,
-        currentValue: T,
-        currentIndex: number,
-      ) => U,
-      initialValue: U,
-    ): U;
-    reduceRight(
-      callbackFn: (
-        previousValue: T,
-        currentValue: T,
-        currentIndex: number,
-      ) => T,
-      initialValue?: T,
-    ): T;
-    reduceRight<U>(
-      callbackFn: (
-        previousValue: U,
-        currentValue: T,
-        currentIndex: number,
-      ) => U,
-      initialValue: U,
-    ): U;
-    find<S extends T>(
-      predicate: (value: T | undefined, index: number) => value is S,
-    ): S | undefined;
-    find(
-      predicate: (value: T | undefined, index: number) => unknown,
-    ): T | undefined;
-    flatMap<U>(
-      callback: (value: T, index: number, array: T[]) => U | readonly U[],
-    ): U[];
-    readonly length: number;
-    readonly [n: number]: T;
-    at(index: number): T | undefined;
-  }
-  /**
-   * @public
-   * A list of items that can be read and updated.
-   */
-  export type EditableListState<T> = ListState<T> & {
-    length: number;
-    pop(): T | undefined;
-    push(...items: T[]): number;
-    shift(): T | undefined;
-    splice(start: number, deleteCount?: number): EditableListState<T>;
-    splice(
-      start: number,
-      deleteCount: number,
-      ...items: T[]
-    ): EditableListState<T>;
-    unshift(...items: T[]): number;
-    [n: number]: T;
-  };
-  /**
-   * @public
-   * A list of items that can be read and updated.
-   *
-   * @preventInline
-   */
-  export interface List<S, M> extends ReadableList<M> {
-    /**
-     * 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: M | undefined, item: S): M | 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: M | undefined, item: S): M | 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: M | undefined, item: M): 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: M | undefined, item: M): void;
-    /**
-     * Removes an item from the list.
-     *
-     * @param item - The item to remove from the list.
-     */
-    delete(item: M): void;
-  }
-  /**
-   * @public
-   * Represents something that's not supported by the Apps SDK.
-   */
-  export interface Unsupported {
-    readonly type: "unsupported";
-  }
-  /**
-   * @public
-   * A state that creates a set of dimensions.
-   */
-  export interface DimensionsState {
-    /**
-     * A width, in pixels.
-     */
-    readonly width: number;
-    /**
-     * A height, in pixels.
-     */
-    readonly height: number;
-  }
-  /**
-   * @public
-   * A set of dimensions.
-   */
-  export type Dimensions = DimensionsState;
-  /**
-   * @public
-   * A state that creates an image fill.
-   */
-  export interface ImageFillState {
-    /**
-     * The type of media.
-     */
-    readonly type: "image";
-    /**
-     * A unique identifier that points to an image asset in Canva's backend.
-     */
-    readonly imageRef: ImageRef;
-    /**
-     * If `true`, the image is flipped horizontally.
-     */
-    flipX: boolean;
-    /**
-     * If `true`, the image is flipped vertically.
-     */
-    flipY: boolean;
-  }
-  /**
-   * @public
-   * An image that fills the interior of a media.
-   */
-  export type ImageFill = ImageFillState;
-  /**
-   * @public
-   * A state that creates a video fill.
-   */
-  export interface VideoFillState {
-    /**
-     * The type of media.
-     */
-    readonly type: "video";
-    /**
-     * A unique identifier that points to a video asset in Canva's backend.
-     */
-    readonly videoRef: VideoRef;
-    /**
-     * If `true`, the video is flipped horizontally.
-     */
-    flipX: boolean;
-    /**
-     * If `true`, the video is flipped vertically.
-     */
-    flipY: boolean;
-  }
-  /**
-   * @public
-   * A video that fills the interior of a media.
-   */
-  export type VideoFill = VideoFillState;
-  /**
-   * @public
-   * A state that creates a media fill.
-   */
-  export type MediaFillState = ImageFillState | VideoFillState;
-  /**
-   * @public
-   * A media item that fills an interior.
-   */
-  export type MediaFill = ImageFill | VideoFill;
-  /**
-   * @public
-   * A state that creates a solid color fill.
-   */
-  export interface SolidFillState {
-    /**
-     * The type of color.
-     */
-    readonly type: "solid";
-    /**
-     * The color of the fill.
-     * This must be a valid, six-digit hex code, prefixed with a `#` symbol.
-     *
-     * @remarks
-     * - Must be six characters long.
-     * - Must start with a `#`.
-     * - Must use lowercase letters.
-     * @example "#ff0099"
-     */
-    color: string;
-  }
-  /**
-   * @public
-   * A solid color that fills an interior.
-   */
-  export type SolidFill = SolidFillState;
-  /**
-   * @public
-   * A state that creates a color fill.
-   */
-  export type ColorFillState = SolidFillState | Unsupported;
-  /**
-   * @public
-   * A color that fills an interior.
-   */
-  export type ColorFill = SolidFill | Unsupported;
-  /**
-   * @public
-   * A state that creates a fill with color or media.
-   *
-   * @remarks
-   * If both `media` and `color` are defined, `media` takes precedence.
-   */
-  export interface FillState {
-    /**
-     * The media fill for the path, if any.
-     */
-    mediaContainer: MediaFillState | undefined;
-    /**
-     * The color fill for the path, if any.
-     */
-    colorContainer: ColorFillState | undefined;
-  }
-  /**
-   * @public
-   * A state that creates a shape path fill with color or media.
-   *
-   * @remarks
-   * If both `media` and `color` are defined, `media` takes precedence.
-   */
-  export interface PathFillState {
-    /**
-     * Defines whether the media fill is editable.
-     */
-    isMediaEditable: boolean;
-    /**
-     * The media fill for the path, if any.
-     */
-    mediaContainer: MediaFillState | undefined;
-    /**
-     * The color fill for the path, if any.
-     */
-    colorContainer: ColorFillState | undefined;
-  }
-  /**
-   * @public
-   * Describes how a fill of a shape path is filled with color or media.
-   *
-   * @remarks
-   * If both `media` and `color` are defined, `media` takes precedence.
-   */
-  export type PathFill =
-    | PathFillWithEditableMedia
-    | PathFillWithNonEditableMedia;
-  export interface PathFillWithEditableMedia {
-    readonly isMediaEditable: true;
-    /**
-     * A media fill, if any.
-     */
-    readonly mediaContainer: {
-      set(state: MediaFillState | undefined): void;
-      ref: MediaFill | undefined;
-    };
-    /**
-     * A color fill, if any.
-     */
-    readonly colorContainer: {
-      set(state: SolidFillState | undefined): void;
-      ref: ColorFill | undefined;
-    };
-  }
-  export interface PathFillWithNonEditableMedia {
-    readonly isMediaEditable: false;
-    /**
-     * A media fill, if any.
-     * MediaFill is not editable
-     */
-    readonly mediaContainer: {
-      ref: MediaFill | undefined;
-    };
-    /**
-     * A color fill, if any.
-     */
-    readonly colorContainer: {
-      set(state: SolidFillState | undefined): void;
-      ref: ColorFill | undefined;
-    };
-  }
-  /**
-   * @public
-   * Describes how a fill is filled with color or media.
-   *
-   * @remarks
-   * If both `media` and `color` are defined, `media` takes precedence.
-   *
-   * @preventInline
-   */
-  export interface Fill {
-    /**
-     * A media fill, if any.
-     */
-    readonly mediaContainer: {
-      set(state: MediaFillState | undefined): void;
-      ref: MediaFill | undefined;
-    };
-    /**
-     * A color fill, if any.
-     */
-    readonly colorContainer: {
-      set(state: SolidFillState | undefined): void;
-      ref: ColorFill | undefined;
-    };
-  }
-  /**
-   * @public
-   * A state that creates the scale and cropping of a shape.
-   *
-   * @remarks
-   * This is similar to the `viewBox` attribute of an `SVGElement`.
-   */
-  export interface AlignedBoxState {
-    /**
-     * 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;
-  }
-  /**
-   * @public
-   * The scale and cropping of a shape.
-   *
-   * @remarks
-   * This is similar to the `viewBox` attribute of an `SVGElement`.
-   */
-  export type AlignedBox = AlignedBoxState;
-  /**
-   * @public
-   * A state that creates a path that defines the structure of a shape element.
-   */
-  export interface PathState {
-    /**
-     * 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: PathFillState;
-    /**
-     * The stroke (outline) of the path, if any.
-     */
-    readonly stroke: StrokeState | undefined;
-  }
-  /**
-   * @public
-   * A path that defines the structure of a shape element.
-   *
-   * @preventInline
-   */
-  export type 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: PathFill;
-    /**
-     * The stroke (outline) of the path, if any.
-     */
-    readonly stroke: Stroke | undefined;
-  };
-  /**
-   * @public
-   * A state that creates an outline, such as the border of an element.
-   */
-  export interface StrokeState {
-    /**
-     * The weight (thickness) of the stroke.
-     *
-     * @remarks
-     * - Minimum: 0
-     * - Maximum: 100
-     */
-    weight: number;
-    /**
-     * The color of the stroke.
-     */
-    colorContainer: ColorFillState;
-  }
-  /**
-   * @public
-   * Represents an outline, such as the border of an element.
-   *
-   * @preventInline
-   */
-  export type Stroke = {
-    /**
-     * The weight (thickness) of the stroke.
-     *
-     * @remarks
-     * - Minimum: 0
-     * - Maximum: 100
-     */
-    weight: number;
-    /**
-     * The color of the stroke.
-     */
-    readonly colorContainer: {
-      ref: ColorFill;
-      set(state: SolidFillState): void;
-    };
-  };
-  /**
-   * @public
-   * The basic properties of the state of an element.
-   *
-   * @remarks
-   * These properties are shared by all elements in a design.
-   */
-  export interface ElementState extends DimensionsState {
-    /**
-     * 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
-     */
-    readonly 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
-     */
-    readonly left: number;
-    /**
-     * A rotation, in degrees.
-     *
-     * @remarks
-     * - Minimum: -180
-     * - Maximum: 180
-     */
-    readonly rotation: number;
-    /**
-     * Transparency as a percentage.
-     *
-     * @remarks
-     * - Minimum: 0
-     * - Maximum: 1
-     */
-    readonly transparency: number;
-  }
-  /**
-   * @public
-   * The basic properties of an element.
-   *
-   * @remarks
-   * These properties are shared by all elements in a design.
-   */
-  export type Element = DimensionsState & {
-    /**
-     * 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;
-  };
-  /**
-   * @public
-   * A state that creates a rectangular element.
-   */
-  export interface RectState {
-    /**
-     * The type of content.
-     */
-    readonly type: "rect";
-    /**
-     * The appearance of the rectangle's interior.
-     */
-    readonly fill: FillState;
-    /**
-     * The outline of the rectangle.
-     */
-    readonly stroke: StrokeState;
-  }
-  /**
-   * @public
-   * Represents a rectangular element.
-   */
-  export type Rect = {
-    /**
-     * The element type
-     */
-    readonly type: "rect";
-    readonly fill: Fill;
-    /**
-     * The outline of the rectangle.
-     */
-    readonly stroke: Stroke;
-  };
-  /**
-   * @public
-   * A state that creates a vector shape element.
-   */
-  export interface ShapeState {
-    /**
-     * The type of content.
-     */
-    readonly type: "shape";
-    /**
-     * The scale and cropping of the shape.
-     */
-    readonly viewBox: AlignedBoxState;
-    /**
-     * 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: ListState<PathState>;
-  }
-  /**
-   * @public
-   * Represents a vector shape element.
-   */
-  export type Shape = {
-    /**
-     * The type of content.
-     */
-    readonly type: "shape";
-    /**
-     * The scale and cropping of the shape.
-     */
-    readonly viewBox: AlignedBox;
-    /**
-     * The paths that define the structure of the shape.
-     */
-    readonly paths: ReadableList<Path>;
-  };
-  /**
-   * @public
-   * A state that creates group content.
-   */
-  export interface GroupState {
-    /**
-     * The type of content.
-     */
-    readonly type: "group";
-    /**
-     * The elements that exist within the group.
-     */
-    readonly contents: ListState<GroupContentElementState>;
-  }
-  /**
-   * @public
-   * Represents group content.
-   */
-  export type Group = {
-    /**
-     * The type of content.
-     */
-    readonly type: "group";
-    /**
-     * The elements that exist within the group.
-     */
-    readonly contents: ReadableList<GroupContentElement>;
-  };
-  /**
-   * @public
-   * A state that creates rich media content.
-   */
-  export interface EmbedState {
-    /**
-     * 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;
-  }
-  /**
-   * @public
-   * Represents rich media content.
-   */
-  export type Embed = EmbedState;
-  /**
-   * @public
-   * A state that creates text content.
-   */
-  export interface TextState {
-    /**
-     * The type of content.
-     */
-    readonly type: "text";
-    /**
-     * The text content.
-     */
-    readonly text: {
-      regions: ListState<TextRegion>;
-    };
-  }
-  /**
-   * @public
-   * Represents text content.
-   */
-  export type Text = {
-    readonly type: "text";
-    readonly text: RichtextRange;
-  };
-  /**
-   * @public
-   * A state that creates a rectangle element.
-   *
-   * @remarks
-   * The rectangle can be filled with image content, video content, or a solid color.
-   */
-  export type RectElementState = RectState & ElementState;
-  /**
-   * @public
-   * An element that renders a rectangle.
-   *
-   * @remarks
-   * The rectangle can be filled with image content, video content, or a solid color.
-   */
-  export type RectElement = Rect & Element;
-  /**
-   * @public
-   * A state that creates a vector shape element.
-   */
-  export type ShapeElementState = ShapeState & ElementState;
-  /**
-   * @public
-   * An element that renders a vector shape.
-   */
-  export type ShapeElement = Shape & Element;
-  /**
-   * @public
-   * A state that creates a group element.
-   */
-  export type GroupElementState = GroupState & ElementState;
-  /**
-   * @public
-   * An element that renders a group of other elements.
-   */
-  export type GroupElement = Group & Element;
-  /**
-   * @public
-   * A state that creates an embed element, such as a YouTube video.
-   */
-  export type EmbedElementState = EmbedState & ElementState;
-  /**
-   * @public
-   * An element that embeds rich media, such as a YouTube video.
-   */
-  export type EmbedElement = Embed & Element;
-  /**
-   * @public
-   * A state that creates a text element.
-   */
-  export type TextElementState = TextState & ElementState;
-  /**
-   * @public
-   * An element that renders text content.
-   */
-  export type TextElement = Text & Element;
-  /**
-   * @public
-   * An element state that is not supported by the Apps SDK.
-   */
-  export type UnsupportedElementState = Unsupported & ElementState;
-  /**
-   * @public
-   * An element that is not supported by the Apps SDK.
-   */
-  export type UnsupportedElement = Unsupported & Readonly<Element>;
-  /**
-   * @public
-   * An element state that can exist in a group content state.
-   */
-  export type GroupContentElementState =
-    | RectElementState
-    | ShapeElementState
-    | EmbedElementState
-    | TextElementState
-    | UnsupportedElementState;
-  /**
-   * @public
-   * An element that can exist in a group element.
-   *
-   * @preventInline
-   */
-  export type GroupContentElement =
-    | RectElement
-    | ShapeElement
-    | EmbedElement
-    | TextElement
-    | UnsupportedElement;
-  /**
-   * @public
-   * An element state that can exist on an absolute page state.
-   *
-   * @preventInline
-   */
-  export type AbsoluteElementState =
-    | RectElementState
-    | ShapeElementState
-    | GroupElementState
-    | EmbedElementState
-    | TextElementState
-    | UnsupportedElementState;
-  /**
-   * @public
-   * An element that can exist on an absolute page.
-   *
-   * @preventInline
-   */
-  export type AbsoluteElement =
-    | RectElement
-    | ShapeElement
-    | GroupElement
-    | EmbedElement
-    | TextElement
-    | UnsupportedElement;
-  /**
-   * @public
-   * An element state that can be inserted into a page.
-   */
-  export type InsertableElementState =
-    | RectElementState
-    | ShapeElementState
-    | EmbedElementState
-    | TextElementState;
-  /**
-   * @public
-   * A list of elements.
-   *
-   * @preventInline
-   */
-  export interface ElementList
-    extends List<AbsoluteElementState, AbsoluteElement> {
-    insertBefore(
-      ref: AbsoluteElement | undefined,
-      state: EmbedElementState,
-    ): EmbedElement;
-    insertBefore(
-      ref: AbsoluteElement | undefined,
-      state: TextElementState,
-    ): TextElement;
-    insertBefore(
-      ref: AbsoluteElement | undefined,
-      state: ShapeElementState,
-    ): ShapeElement;
-    insertBefore(
-      ref: AbsoluteElement | undefined,
-      state: RectElementState,
-    ): RectElement;
-    insertBefore(
-      ref: AbsoluteElement | undefined,
-      state: InsertableElementState,
-    ): AbsoluteElement;
-    insertAfter(
-      ref: AbsoluteElement | undefined,
-      state: EmbedElementState,
-    ): EmbedElement;
-    insertAfter(
-      ref: AbsoluteElement | undefined,
-      state: TextElementState,
-    ): TextElement;
-    insertAfter(
-      ref: AbsoluteElement | undefined,
-      state: ShapeElementState,
-    ): ShapeElement;
-    insertAfter(
-      ref: AbsoluteElement | undefined,
-      state: RectElementState,
-    ): RectElement;
-    insertAfter(
-      ref: AbsoluteElement | undefined,
-      state: InsertableElementState,
-    ): AbsoluteElement;
-  }
-
-  /**
-   * @public
-   * A page with either fixed or unbounded dimensions.
-   *
-   * @preventInline
-   */
-  export type AbsolutePage = {
-    /**
-     * The type of page.
-     */
-    readonly type: "absolute";
-    /**
-     * 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: ElementList;
-  };
-
-  /**
-   * @public
-   * A page in a design.
-   *
-   * @remarks
-   * - Currently, only absolute pages are supported.
-   * - Other page types are represented as `Unsupported`.
-   * - Additional page types may be supported in future releases.
-   */
-  export type Page = AbsolutePage | Unsupported;
-
-  {
-  }
-}
-
-/**
- * @public
- * An element that's natively supported by the Canva editor.
- */
-export declare type DesignElement =
-  | ImageElement
-  | VideoElement
-  | EmbedElement
-  | TextElement
-  | ShapeElement
-  | GroupElement
-  | RichtextElement
-  | TableElement;
-
-/**
- * @public
- * Information about the design.
- */
-export declare type DesignMetadata = {
-  /**
-   * The title of the user's design.
-   * @remarks
-   * This is optional and will be `undefined` if the user hasn't set a title.
-   */
-  title?: string;
-  /**
-   * The default dimensions that a new page will have when it is added to a design.
-   * It is possible for a user to resize a page without resizing the entire design, e.g. by clicking
-   * "Expand to Whiteboard". However, there will always be a single set of default dimensions for a
-   * design that is applied whenever a new page is created.
-   * @remarks
-   * This is optional and will be `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
-   */
-  defaultPageDimensions?: PageDimensions;
-  /**
-   * The information associated with each page of the design.
-   * @remarks
-   * The order of pages is not guaranteed.
-   */
-  pageMetadata: Iterable<PageMetadata>;
-  /**
-   * The duration of the whole design in seconds.
-   * @remarks
-   * This is the precise value, which differs from what is displayed in the UI as duration in Canva UI is formatted differently.
-   */
-  durationInSeconds: number;
-};
-
-/**
- * @public
- * A callback for reading and updating part of a design.
- * @param session - Session received by the `openDesign` callback.
- */
-export declare type DesignOpenCallback = (
-  session: DesignEditing.CurrentPageSession,
-) => Promise<void>;
-
-/**
- * @public
- * Options for configuring which part of a design to read.
- */
-export declare type DesignOpenOptions = DesignContextOptions;
-
-/**
- * @public
- * Provides methods for managing the lifecycle of overlays, such as selected image overlays.
- */
-export declare type DesignOverlay = {
-  /**
-   * Registers a callback that runs when the `canOpen` state of an overlay target changes.
-   * @param opts - Options for configuring the callback.
-   *
-   * @example Register overlay handler
-   * ```typescript
-   * import { overlay } from "@canva/design";
-   *
-   * overlay.registerOnCanOpen({
-   *   target: 'image_selection',
-   *   onCanOpen: async (event) => {
-   *     if (event.canOpen) {
-   *       // Can open overlay for selected image
-   *     }
-   *   }
-   * });
-   * ```
-   *
-   * @example Open image editing overlay
-   * ```typescript
-   * import { overlay } from "@canva/design";
-   *
-   * overlay.registerOnCanOpen({
-   *   target: 'image_selection',
-   *   onCanOpen: async (event) => {
-   *     if (event.canOpen) {
-   *       const processId = await event.open({
-   *         launchParameters: {
-   *           mode: 'edit'
-   *         }
-   *       });
-   *       // Overlay process started, with `processId`
-   *     }
-   *   }
-   * });
-   * ```
-   *
-   * @example Open overlay with filters
-   * ```typescript
-   * import { overlay } from "@canva/design";
-   *
-   * overlay.registerOnCanOpen({
-   *   target: 'image_selection',
-   *   onCanOpen: async (event) => {
-   *     if (event.canOpen) {
-   *       await event.open({
-   *         launchParameters: {
-   *           mode: 'edit',
-   *           filters: ['brightness', 'contrast', 'saturation']
-   *         }
-   *       });
-   *     }
-   *   }
-   * });
-   * ```
-   *
-   * @example Handle overlay unavailability
-   * ```typescript
-   * import { overlay } from "@canva/design";
-   *
-   * overlay.registerOnCanOpen({
-   *   target: 'image_selection',
-   *   onCanOpen: async (event) => {
-   *     if (!event.canOpen) {
-   *       // Cannot open overlay, handle specific reasons
-   *       switch (event.reason) {
-   *         case 'no_selection':
-   *           // No image is selected
-   *           break;
-   *         case 'invalid_selection':
-   *           // Selected content cannot be edited
-   *           break;
-   *       }
-   *     }
-   *   }
-   * });
-   * ```
-   */
-  registerOnCanOpen<Target extends OverlayTarget>(opts: {
-    /**
-     * The target to check the `canOpen` state of.
-     */
-    target: Target;
-    /**
-     * A callback that runs when the `canOpen` state of the specified target changes.
-     *
-     * @param event - Information about whether or not an overlay can be opened for the specified target.
-     *
-     * @remarks
-     * This callback fires immediately.
-     */
-    onCanOpen(event: OverlayOpenableEvent<Target>): void;
-  }): () => void;
-};
-
-/**
- * @public
- * Provides methods for interacting with selected content.
- */
-export declare type DesignSelection = {
-  /**
-   * Registers a callback that runs when the specified type of content is selected.
-   *
-   * @param opts - Options for configuring the content selection callback.
-   *
-   * @remarks
-   * This callback fires immediately if content is already selected when the callback is registered.
-   *
-   * @example Handling plaintext selection
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'plaintext',
-   *   onChange: async (event) => {
-   *     if (event.count > 0) {
-   *       const draft = await event.read();
-   *       // Do something with the selected text, e.g. `draft.contents[0].text`
-   *     }
-   *   }
-   * });
-   * ```
-   *
-   * @example Handling image selection
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'image',
-   *   onChange: async (event) => {
-   *     if (event.count > 0) {
-   *       const draft = await event.read();
-   *       // Do something with the selected image ref, e.g. `draft.contents[0].ref`
-   *     }
-   *   }
-   * });
-   * ```
-   *
-   * @example Handling video selection
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'video',
-   *   onChange: async (event) => {
-   *     if (event.count > 0) {
-   *       const draft = await event.read();
-   *       // Do something with the selected video ref, e.g. `draft.contents[0].ref`
-   *     }
-   *   }
-   * });
-   * ```
-   *
-   * @example Handling richtext selection
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'richtext',
-   *   onChange: async (event) => {
-   *     if (event.count > 0) {
-   *       const draft = await event.read();
-   *       const range = draft.contents[0];
-   *       // Do something with the selected richtext, e.g. `range.readPlaintext()`
-   *     }
-   *   }
-   * });
-   * ```
-   */
-  registerOnChange<Scope extends SelectionScope>(opts: {
-    /**
-     * The type of content that triggers a selection change event.
-     */
-    scope: Scope;
-    /**
-     * The callback to run when the selected content changes.
-     * @param event - Information about the selection change event.
-     */
-    onChange(event: SelectionEvent<Scope>): void;
-  }): () => void;
-};
-
-/**
- * @public
- * JWT that contains the Design ID and App ID.
- */
-export declare type DesignToken = {
-  token: string;
-};
-
-/**
- * @public
- * A set of dimensions.
- */
-export declare type Dimensions = {
-  /**
-   * A width, in pixels.
-   */
-  width: number;
-  /**
-   * A height, in pixels.
-   */
-  height: number;
-};
-
-/**
- * @public
- * An event that occurs when a user starts dragging an HTML element.
- */
-export declare type DragStartEvent<E extends Element> = Pick<
-  DragEvent,
-  "dataTransfer" | "currentTarget" | "preventDefault" | "clientX" | "clientY"
-> & {
-  currentTarget: E;
-};
-
-/**
- * @public
- * Reads and edits 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 read content.
- *
- * @example Read richtext content
- * ```typescript
- * import { editContent } from "@canva/design";
- *
- * await editContent(
- *   { contentType: 'richtext', target: 'current_page' },
- *   async (session) => {
- *     // Do something with the richtext content, e.g. `session.contents`
- *   }
- * );
- * ```
- */
-export declare const editContent: (
-  options: EditContentOptions,
-  callback: EditContentCallback,
-) => Promise<void>;
-
-/**
- * @public
- * A callback for reading and updating the requested design content.
- * @param session - The result of reading the content in the design.
- */
-export declare type EditContentCallback = (
-  session: RichtextContentSession,
-) => Promise<void> | void;
-
-/**
- * @public
- * Options for configuring how the design content is read.
- */
-export declare type EditContentOptions = {
-  /**
-   * The type of content to edit from the user's design
-   */
-  contentType: ContentType;
-} & ContextOptions;
-
-/**
- * @public
- * Elements targeting a cursor are a subset of the base Element
- **/
-export declare type ElementAtCursor =
-  | ImageElement
-  | VideoElement
-  | EmbedElement
-  | TextElement
-  | RichtextElement
-  | TableElement;
-
-/**
- * @public
- * An element that's natively supported by the Canva editor and has positional properties.
- */
-export declare type ElementAtPoint =
-  | ImageElementAtPoint
-  | VideoElementAtPoint
-  | EmbedElementAtPoint
-  | TextElementAtPoint
-  | ShapeElementAtPoint
-  | GroupElementAtPoint
-  | RichtextElementAtPoint;
-
-/**
- * @public
- * Embed element to be added to the design at the end of a drag event.
- */
-export declare type EmbedDragConfig = {
-  /**
-   * The type of element.
-   */
-  type: "embed";
-  /**
-   * The dimensions of the preview image.
-   */
-  previewSize: Dimensions;
-  /**
-   * The URL of an image to display under the user's cursor during the drag and drop event.
-   */
-  previewUrl: string;
-  /**
-   * The URL of media that can be embedded, such as the URL of a YouTube video.
-   *
-   * @remarks
-   * This URL must be supported by the Iframely API.
-   */
-  embedUrl: string;
-};
-
-/**
- * @public
- * An element that renders rich media, such as a YouTube video.
- */
-export declare type EmbedElement = {
-  /**
-   * 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 = EmbedElement &
-  Point &
-  (WidthAndHeight | Width | Height);
-
-/**
- * @public
- * The result when a user abandons the export flow, such as by closing the export menu.
- */
-export declare type ExportAborted = {
-  /**
-   * The status of the export flow.
-   */
-  status: "aborted";
-};
-
-/**
- * @public
- * The exported file.
- */
-export declare type ExportBlob = {
-  /**
-   * The URL of the exported design.
-   *
-   * @remarks
-   * If a user's design contains multiple pages but is exported in a format that doesn't support multiple pages,
-   * this URL will point to a ZIP file that contains each page as a separate file.
-   *
-   * For example:
-   *
-   * - If a single-page design is exported as a JPG, the URL will point to a JPG file.
-   * - If a multi-page design is exported as a JPG, the URL will point to a ZIP file that contains a JPG file for each page.
-   * - If a multi-page design is exported as a PDF file, the URL will point to a PDF file.
-   *
-   * The following file types support multiple pages:
-   *
-   * - `"GIF"`
-   * - `"PDF_STANDARD"`
-   * - `"PPTX"`
-   * - `"VIDEO"`
-   *
-   * The following file types do not support multiple pages:
-   *
-   * - `"JPG"`
-   * - `"PNG"`
-   * - `"SVG"`
-   */
-  url: string;
-};
-
-/**
- * @public
- * The result when a user successfully completes an export flow.
- */
-export declare type ExportCompleted = {
-  /**
-   * The status of the export flow.
-   */
-  status: "completed";
-  /**
-   * The title of the design, if set by the user.
-   */
-  title?: string;
-  /**
-   * The exported files.
-   *
-   * @remarks
-   * This array only contains one element. This is because, if a multi-page design is exported as multiple files, the files
-   * are exported in a ZIP file. In the future, there'll be an option for each file to be a separate element in the array.
-   */
-  exportBlobs: ExportBlob[];
-};
-
-/**
- * @public
- * The types of files that Canva supports for exported designs.
- */
-export declare type ExportFileType =
-  | "png"
-  | "jpg"
-  | "pdf_standard"
-  | "video"
-  | "gif"
-  | "pptx"
-  | "svg";
-
-/**
- * @public
- * Options for configuring the export of a design.
- */
-export declare type ExportRequest = {
-  /**
-   * The types of files the user can export their design as.
-   *
-   * @remarks
-   * You must provide at least one file type.
-   */
-  acceptedFileTypes: ExportFileType[];
-};
-
-/**
- * @public
- * The result of exporting a design.
- */
-export declare type ExportResponse = ExportCompleted | ExportAborted;
-
-/**
- * @public
- * Image element or content to be added to the design at the end of a drag event.
- *
- * @remarks
- * This type is only used when the image data is from an external URL.
- */
-export declare type ExternalImageDragConfig = CommonImageDragConfig & {
-  /**
-   * A function that returns a reference (ref) to an audio asset in Canva's backend.
-   */
-  resolveImageRef: () => Promise<{
-    ref: ImageRef;
-  }>;
-  /**
-   * The URL of an image to display under the user's cursor during the drag and drop event.
-   */
-  previewUrl: string;
-  /**
-   * The dimensions of the full-size image.
-   */
-  fullSize?: Dimensions;
-};
-
-/**
- * @public
- * The appearance of a path's interior.
- *
- * @remarks
- * The `color` and `asset` properties are mutually exclusive.
- */
-export declare type Fill = {
-  /**
-   * If `true`, users can replace a fill by dropping an image or video onto it.
-   */
-  dropTarget?: boolean;
-  /**
-   * The color of the fill as a hex code.
-   *
-   * @remarks
-   * The hex code must include all six characters and be prefixed with a `#` symbol.
-   *
-   * @example
-   * "#ff0099"
-   */
-  color?: string;
-  /**
-   * An image or video to use as the fill.
-   */
-  asset?: ImageFill | VideoFill;
-};
-
-/**
- * @public
- * A reference to a font that can be used in other parts of the SDK.
- */
-export declare type FontRef = string & {
-  __fontRef: never;
-};
-
-/**
- * @public
- * Font weights supported in the SDK.
- **/
-export declare type FontWeight =
-  | "normal"
-  | "thin"
-  | "extralight"
-  | "light"
-  | "medium"
-  | "semibold"
-  | "bold"
-  | "ultrabold"
-  | "heavy";
-
-/**
- * Allows to get the context of currently selected page.
- * @public
- * @returns Page context of currently selected page
- *
- * @example Get current page information
- * ```typescript
- * import { getCurrentPageContext } from "@canva/design";
- *
- * const pageContext = await getCurrentPageContext();
- * if (pageContext.dimensions) {
- *   // Do something with the page dimensions, e.g. `pageContext.dimensions.width` and `pageContext.dimensions.height`
- * } else {
- *   // This page type does not have fixed dimensions, e.g. Whiteboard or Doc
- * }
- * ```
- */
-export declare const getCurrentPageContext: () => Promise<PageContext>;
-
-/**
- * @deprecated
- * @public
- * Gets the default dimensions that a new page will have when it is added to a design.
- * It is possible for a user to resize a page without resizing the entire design, e.g. by clicking
- * "Expand to Whiteboard". However, there will always be a single set of default dimensions for a
- * design that is applied whenever a new page is created.
- *
- * Returns `undefined` if the design is unbounded (e.g. Whiteboard or Doc).
- *
- * @example Get default page dimensions
- * ```typescript
- * import { getDefaultPageDimensions } from "@canva/design";
- *
- * const dimensions = await getDefaultPageDimensions();
- *
- * if (dimensions) {
- *   // Do something with the dimensions, e.g. `dimensions.width` and `dimensions.height`
- * } else {
- *   // This design type does not have fixed dimensions, e.g. Whiteboard or Doc
- * }
- * ```
- *
- * @example Center element using page dimensions
- * ```typescript
- * import { getDefaultPageDimensions, addElementAtPoint } from "@canva/design";
- * import type { ImageElementAtPoint } from "@canva/design";
- *
- * const dimensions = await getDefaultPageDimensions();
- *
- * if (dimensions) {
- *   const elementWidth = 300;
- *   const elementHeight = 200;
- *
- *   const element: ImageElementAtPoint = {
- *     type: 'image',
- *     dataUrl: 'data:image/png;base64,...',
- *     altText: { text: 'Centered image', decorative: false },
- *     top: (dimensions.height - elementHeight) / 2,
- *     left: (dimensions.width - elementWidth) / 2,
- *     width: elementWidth,
- *     height: elementHeight
- *   };
- *
- *   await addElementAtPoint(element);
- * }
- * ```
- */
-export declare const getDefaultPageDimensions: () => Promise<
-  Dimensions | undefined
->;
-
-/**
- * @public
- * Retrieves information about the design.
- *
- * @example Get design metadata
- * ```typescript
- * import { getDesignMetadata } from "@canva/design";
- *
- * const metadata = await getDesignMetadata();
- *
- * const { title, defaultPageDimensions,  pageMetadata, durationInSeconds } = metadata;
- * ```
- */
-export declare const getDesignMetadata: () => Promise<DesignMetadata>;
-
-/**
- * @public
- * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
- *
- * @example Get design token
- * ```typescript
- * import { getDesignToken } from "@canva/design";
- *
- * const { token } = await getDesignToken();
- * ```
- *
- * @example Verify token with backend service
- * ```typescript
- * import { getDesignToken } from "@canva/design";
- *
- * const { token } = await getDesignToken();
- *
- * const verifyResponse = await fetch('https://your-backend.com/verify', {
- *   method: 'POST',
- *   headers: {
- *     'Content-Type': 'application/json'
- *   },
- *   body: JSON.stringify({ token })
- * });
- *
- * const json = await verifyResponse.json();
- * const { designId, appId, userId } = json;
- * ```
- */
-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 = Exclude<
-  ElementAtPoint,
-  GroupElementAtPoint
->;
-
-/**
- * @public
- * An element that contains two or more elements.
- */
-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 = GroupElement &
-  Point &
-  (WidthAndHeight | Width | Height);
-
-/**
- * A set of dimensions with an auto-calculated width.
- */
-declare type Height = {
-  /**
-   * Indicates that the width should be auto-calculated.
-   */
-  width: "auto";
-  /**
-   * A height, in pixels.
-   *
-   * @remarks
-   * - The pixels are relative to their container.
-   * - Minimum: 0
-   * - Maximum: 32767
-   */
-  height: number;
-};
-
-/**
- * @public
- * Image element or content to be added to the design at the end of a drag event.
- */
-export declare type ImageDragConfig = ExternalImageDragConfig;
-
-/**
- * @public
- * Image element or content to be added to the design at the end of a drag event.
- */
-export declare type ImageDragConfigForElement<E extends Element> =
-  E extends HTMLImageElement
-    ? Partial<ImageDragConfig> & Pick<ImageDragConfig, "type">
-    : ImageDragConfig;
-
-/**
- * @public
- * An element that renders image content.
- */
-export declare type ImageElement = {
-  /**
-   * The type of element.
-   */
-  type: "image";
-  /**
-   * A description of the image content.
-   *
-   * @remarks
-   * Use `undefined` for content with no description.
-   */
-  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 = ImageElement &
-  Point &
-  (WidthAndHeight | Width | Height);
-
-/**
- * @public
- * An image asset that fills a path's interior.
- */
-export declare type ImageFill = {
-  /**
-   * The type of fill.
-   */
-  type: "image";
-  /**
-   * A unique identifier that points to an image asset in Canva's backend.
-   */
-  ref: ImageRef;
-  /**
-   * A description of the image content.
-   *
-   * @remarks
-   * Use `undefined` for content with no description.
-   */
-  altText?: AltText;
-};
-
-/**
- * @public
- * A unique identifier that references an image asset in Canva's backend.
- */
-export declare type ImageRef = string & {
-  __imageRef: never;
-};
-
-/**
- * @public
- * @param appElementConfig - Configuration for an AppElementClient
- *
- * @example Initialize app element client
- * ```typescript
- * import { initAppElement } from "@canva/design";
- *
- * const appElement = initAppElement<{ content: string }>({
- *   render: (data) => {
- *     return [{
- *       type: 'text',
- *       children: [data.content],
- *       top: 100,
- *       left: 100,
- *       width: 200
- *     }];
- *   }
- * });
- * ```
- *
- * @example Initialize V2 app element client
- * ```typescript
- * import { initAppElement } from "@canva/design";
- *
- * const appElement = initAppElement<{ content: string }>({
- *   render: (data) => {
- *     return [{
- *       type: 'text',
- *       children: [data.content],
- *       top: 100,
- *       left: 100,
- *       width: 200
- *     }];
- *   }
- * });
- * ```
- */
-export declare const initAppElement: <A extends AppElementData>(
-  appElementConfig: AppElementClientConfiguration<A>,
-) => AppElementClient<A>;
-
-/**
- * @public
- * Options for formatting inline richtext.
- */
-export declare type InlineFormatting = {
-  /**
-   * The color of the text as a hex code.
-   *
-   * @remarks
-   * The hex code must include all six characters and be prefixed with a `#` symbol.
-   *
-   * @example
-   * "#ff0099"
-   */
-  color?: string;
-  /**
-   * The weight (thickness) of the font.
-   *
-   * @remarks
-   * The available font weights depend on the font.
-   *
-   * @defaultValue "normal"
-   */
-  fontWeight?: FontWeight;
-  /**
-   * The style of the font.
-   * @defaultValue "normal"
-   */
-  fontStyle?: "normal" | "italic";
-  /**
-   * The decoration of the text.
-   * @defaultValue "none"
-   */
-  decoration?: "none" | "underline";
-  /**
-   * The strikethrough of the text.
-   * @defaultValue "none"
-   */
-  strikethrough?: "none" | "strikethrough";
-  /**
-   * An external URL that the text links to.
-   */
-  link?: string;
-};
-
-/**
- * @deprecated The type has been superseded by `DesignElement`.
- * @public
- * An element that's natively supported by the Canva editor.
- */
-export declare type NativeElement =
-  | NativeImageElement
-  | NativeVideoElement
-  | NativeEmbedElement
-  | NativeTextElement
-  | NativeShapeElement
-  | NativeGroupElement;
-
-/**
- * @deprecated
- * @public
- * The types of elements an app can add to a user's design.
- */
-export declare type NativeElementType =
-  | "image"
-  | "embed"
-  | "text"
-  | "shape"
-  | "video";
-
-/**
- * @deprecated The type has been superseded by `ElementAtPoint`.
- * @public
- * An element that's natively supported by the Canva editor and has positional properties.
- */
-export declare type NativeElementWithBox =
-  | NativeImageElementWithBox
-  | NativeVideoElementWithBox
-  | NativeEmbedElementWithBox
-  | NativeTextElementWithBox
-  | NativeShapeElementWithBox
-  | NativeGroupElementWithBox;
-
-/**
- * @deprecated The type has been superseded by `EmbedElement`.
- * @public
- * An element that renders rich media, such as a YouTube video.
- */
-export declare type NativeEmbedElement = 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 = EmbedElementAtPoint;
-
-/**
- * @deprecated The type has been superseded by `GroupElement`.
- * @public
- * An element that contains two or more elements.
- */
-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 = GroupElementAtPoint;
-
-/**
- * @deprecated The type has been superseded by `ImageElement`.
- * @public
- * An element that renders image content.
- */
-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 = ImageElementAtPoint;
-
-/**
- * @deprecated The type has been superseded by `ShapeElement`.
- * @public
- * An element that renders a vector shape.
- */
-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 = 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 = GroupContentAtPoint;
-
-/**
- * @deprecated The type has been superseded by `TextElement`.
- * @public
- * An element that renders text content.
- */
-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 = TextElementAtPoint;
-
-/**
- * @deprecated The type has been superseded by `VideoElement`.
- * @public
- * An element that renders video content.
- */
-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 = VideoElementAtPoint;
-
-/**
- * An object primitive data type that can be used in app element data.
- */
-declare type ObjectPrimitive = Boolean | String;
-
-/**
- * @public
- *
- * Reads a specified part of the user's design and returns all elements in that part.
- *
- * @param options - Options for configuring how the design is read.
- * @param callback - A callback for operating on the design.
- */
-export declare const openDesign: (
-  options: DesignOpenOptions,
-  callback: DesignOpenCallback,
-) => Promise<void>;
-
-/**
- * @public
- * An alias for the DesignOverlay interface, providing access to design overlay related functionality
- */
-export declare const overlay: DesignOverlay;
-
-/**
- * @public
- * Information about whether or not an overlay can be opened for the specified target.
- */
-export declare type OverlayOpenableEvent<Target extends OverlayTarget> = {
-  /**
-   * Information about whether or not an overlay can be opened or not for a selected image.
-   */
-  ["image_selection"]:
-    | OverlayUnopenableEvent
-    | {
-        /**
-         * Indicates that the overlay can be opened for the selected image.
-         */
-        canOpen: true;
-        /**
-         * Opens an overlay for the selected image.
-         * @param opts - Options for launching the process associated with the overlay.
-         */
-        readonly open: (options: {
-          /**
-           * Parameters to pass to the overlay when it opens.
-           *
-           * @remarks
-           * This can be any type of structured data.
-           */
-          launchParameters?: unknown;
-        }) => Promise<AppProcessId>;
-      };
-}[Target];
-
-/**
- * @public
- * An entity that an overlay can be opened for.
- */
-export declare type OverlayTarget = "image_selection";
-
-/**
- * @public
- * Information about an overlay that can't be opened for the specified target.
- */
-declare type OverlayUnopenableEvent = {
-  /**
-   * Indicates that the overlay can't be opened for the specified target.
-   */
-  canOpen: false;
-  /**
-   * Indicates the reason the overlay can't be opened for the specified target.
-   */
-  reason: string;
-};
-
-/**
- * @public
- * The appearance of a page's background.
- */
-export declare type PageBackgroundFill = Pick<Fill, "asset" | "color">;
-
-/**
- * @public
- * Information about a page.
- */
-export declare type PageContext = {
-  /**
-   * The dimensions of the page, in pixels.
-   *
-   * @remarks
-   * This may be `undefined` because some types of pages don't have dimensions, such as whiteboards.
-   */
-  dimensions: PageDimensions | undefined;
-};
-
-/**
- * @public
- * A set of page dimensions, in pixels.
- */
-export declare type PageDimensions = {
-  /**
-   * The width of the page, in pixels.
-   */
-  width: number;
-  /**
-   * The height of the page, in pixels.
-   */
-  height: number;
-};
-
-/**
- * @public
- * Information about a page.
- */
-export declare type PageMetadata = {
-  /**
-   * The dimensions of the page, in pixels.
-   *
-   * @remarks
-   * This may be `undefined` because some types of pages don't have dimensions, such as whiteboards.
-   */
-  dimensions?: PageDimensions;
-};
-
-/**
- * @public
- * The outline of a path.
- */
-export declare type PathStroke = {
-  /**
-   * The weight (thickness) of the stroke.
-   *
-   * @remarks
-   * - Minimum: 0
-   * - Maximum: 100
-   */
-  weight: number;
-  /**
-   * The color of the stroke as a hex code.
-   *
-   * @remarks
-   * The hex code must include all six characters and be prefixed with a `#` symbol.
-   *
-   * @example
-   * "#ff0099"
-   */
-  color: string;
-  /**
-   * The alignment of the stroke.
-   */
-  strokeAlign: "inset";
-};
-
-/**
- * @public
- * A position, set of dimensions, and rotation.
- */
-export declare type Placement = Point & (WidthAndHeight | Width | Height);
-
-/**
- * A position and rotation.
- */
-declare type Point = {
-  /**
-   * The distance from the top edge of the container, in pixels.
-   *
-   * @remarks
-   * - The pixels are relative to their container.
-   * - Minimum: -32768
-   * - Maximum: 32767
-   */
-  top: number;
-  /**
-   * The distance from the left edge of the container, in pixels.
-   *
-   * @remarks
-   * - The pixels are relative to their container.
-   * - Minimum: -32768
-   * - Maximum: 32767
-   */
-  left: number;
-  /**
-   * A rotation, in degrees.
-   *
-   * @remarks
-   * - Minimum: -180
-   * - Maximum: 180
-   */
-  rotation?: number;
-};
-
-/**
- * A primitive data type that can be used in app element data.
- *
- * @remarks
- * All primitive data types are supported except for symbols and bigints.
- */
-declare type Primitive = undefined | null | number | boolean | string;
-
-/**
- * @public
- * Exports the user's design as one or more static files.
- * @param request - The request object containing configurations of the design export.
- */
-export declare const requestExport: (
-  request: ExportRequest,
-) => Promise<ExportResponse>;
-
-/**
- * @public
- * Provides methods for interacting with a range of formatted text.
- */
-export declare interface RichtextContentRange extends RichtextRange {
-  /**
-   * Indicates whether the object containing this richtext range has been deleted.
-   */
-  readonly deleted: boolean;
-}
-
-/**
- * @public
- * A callback for reading and updating the requested design content.
- * @param session - The result of reading the content in the design.
- *
- * @example Read and update richtext content
- * ```typescript
- * import { editContent } from "@canva/design";
- *
- * await editContent(
- *   { contentType: 'richtext', target: 'current_page' },
- *   async (session) => {
- *     // Read the content
- *     const contents = session.contents;
- *
- *     if (contents.length > 0) {
- *       const range = contents[0];
- *
- *       // Modify the content (e.g., adding text)
- *       range.appendText("\nAppended text from app");
- *
- *       // Sync changes back to the design
- *       await session.sync();
- *     }
- *   }
- * );
- * ```
- *
- * @example Format all richtext content in the design
- * ```typescript
- * import { editContent } from "@canva/design";
- *
- * await editContent(
- *   { contentType: 'richtext', target: 'current_page' },
- *   async (session) => {
- *     // Process each richtext range in the content
- *     for (const range of session.contents) {
- *       // Skip if the content has been deleted
- *       if (range.deleted) continue;
- *
- *       // Get the text content
- *       const text = range.readPlaintext();
- *       if (text.length === 0) continue;
- *
- *       // Apply consistent formatting
- *       range.formatParagraph(
- *         { index: 0, length: text.length },
- *         {
- *           fontRef: 'YOUR_FONT_REF',
- *           fontSize: 16,
- *           textAlign: 'start'
- *         }
- *       );
- *     }
- *
- *     // Sync all changes back to the design
- *     await session.sync();
- *   }
- * );
- * ```
- *
- * @example Modify content without saving changes
- * ```typescript
- * import { editContent } from "@canva/design";
- *
- * await editContent(
- *   { contentType: 'richtext', target: 'current_page' },
- *   async (session) => {
- *     // Read and analyze the content without making changes
- *     for (const range of session.contents) {
- *       const text = range.readPlaintext();
- *       // Do something with the content preview, e.g. `text.substring(0, 50)`
- *
- *       // No call to session.sync() means no changes are saved
- *     }
- *
- *     // Since we're not calling sync(), no changes will be made to the design
- *   }
- * );
- * ```
- */
-export declare interface RichtextContentSession {
-  /**
-   * Richtext content in the design.
-   */
-  readonly contents: readonly RichtextContentRange[];
-  /**
-   * Saves any changes made during the session while keeping the transaction open.
-   *
-   * @remarks
-   * - Any changes in the session are only reflected in the design after this method is called.
-   * - Once this method is called, further changes in the session can still be made.
-   *
-   * @example Sync changes after modifying content
-   * ```typescript
-   * import { editContent } from "@canva/design";
-   *
-   * await editContent(
-   *   { contentType: 'richtext', target: 'current_page' },
-   *   async (session) => {
-   *     if (session.contents.length > 0) {
-   *       const range = session.contents[0];
-   *
-   *       // Make modifications to the content
-   *       range.appendText(" - Modified by app");
-   *
-   *       try {
-   *         // Save changes back to the design
-   *         await session.sync();
-   *       } catch (error) {
-   *         console.error('Failed to sync changes:', error);
-   *       }
-   *     }
-   *   }
-   * );
-   * ```
-   */
-  sync(): Promise<void>;
-}
-
-/**
- * @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.
-   *
-   * @example Format paragraph as a heading
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   *
-   * range.appendText("Heading Text\nRegular paragraph text.");
-   *
-   * // Format just the first paragraph as a heading
-   * range.formatParagraph(
-   *   { index: 0, length: 12 }, // Only need to include part of the paragraph
-   *   {
-   *     fontSize: 24,
-   *     fontWeight: 'bold',
-   *     textAlign: 'center'
-   *   }
-   * );
-   * ```
-   *
-   * @example Create a bulleted list
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * const text = "Item 1\nItem 2\nItem 3";
-   * range.appendText(text);
-   *
-   * // Format all paragraphs as a bulleted list
-   * range.formatParagraph(
-   *   { index: 0, length: text.length },
-   *   {
-   *     listLevel: 1,
-   *     listMarker: 'disc'
-   *   }
-   * );
-   * ```
-   */
-  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.
-   *
-   * @example Format specific words in a paragraph
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("This text contains important information.");
-   *
-   * // Format just the word "important"
-   * range.formatText(
-   *   { index: 16, length: 9 },
-   *   {
-   *     fontWeight: 'bold',
-   *     color: '#FF0000'
-   *   }
-   * );
-   * ```
-   *
-   * @example Add a link to text
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("Visit our website for more information.");
-   *
-   * // Add a link to "our website"
-   * range.formatText(
-   *   { index: 6, length: 11 },
-   *   {
-   *     link: "https://www.example.com",
-   *     decoration: 'underline',
-   *     color: '#0066CC'
-   *   }
-   * );
-   * ```
-   */
-  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 formatting - Optional formatting to apply to the appended text.
-   *
-   * @example Append plain text
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("First paragraph. ");
-   *
-   * // Append more text to the existing content
-   * const result = range.appendText("This is additional text.");
-   *
-   * // The bounds of the newly added text are returned
-   * // Do something with the bounds - result.bounds, e.g. { index: 17, length: 24 }
-   * ```
-   *
-   * @example Append formatted text
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("Normal text followed by ");
-   *
-   * // Append formatted text
-   * range.appendText("bold red text", {
-   *   fontWeight: 'bold',
-   *   color: '#FF0000'
-   * });
-   *
-   * // Append a new paragraph
-   * range.appendText("\nThis is a new paragraph.");
-   * ```
-   */
-  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.
-   *
-   * @example Replace text while maintaining some formatting
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("This text needs correction.");
-   *
-   * // Replace "needs correction" with "is correct"
-   * const result = range.replaceText(
-   *   { index: 10, length: 16 },
-   *   "is correct"
-   * );
-   *
-   * // The bounds of the replaced text are returned
-   * // Do something with the bounds - result.bounds, e.g. { index: 10, length: 10 }
-   * ```
-   *
-   * @example Replace text with formatted text
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("Regular text that needs emphasis.");
-   *
-   * // Replace "needs emphasis" with formatted text
-   * range.replaceText(
-   *   { index: 17, length: 15 },
-   *   "is important",
-   *   {
-   *     fontWeight: 'bold',
-   *     fontStyle: 'italic',
-   *     color: '#0066CC'
-   *   }
-   * );
-   * ```
-   */
-  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.
-   *
-   * @example Extract plain text content
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("First paragraph.\n", { fontWeight: 'bold' });
-   * range.appendText("Second paragraph with formatting.", { color: '#FF0000' });
-   *
-   * // Get plain text content without formatting
-   * const plainText = range.readPlaintext();
-   * // Do something with the plain text - plainText, e.g. "First paragraph.\nSecond paragraph with formatting."
-   * ```
-   *
-   * @example Search within text content
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("This text contains a searchable term.");
-   *
-   * // Search for a specific word
-   * const plainText = range.readPlaintext();
-   * const searchTerm = "searchable";
-   * const index = plainText.indexOf(searchTerm);
-   *
-   * if (index !== -1) {
-   *   // Format the found term
-   *   range.formatText(
-   *     { index, length: searchTerm.length },
-   *     { fontWeight: 'bold', decoration: 'underline' }
-   *   );
-   * }
-   * ```
-   */
-  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.
-   *
-   * @example Get text with formatting information
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("Normal text ", {});
-   * range.appendText("bold text", { fontWeight: 'bold' });
-   * range.appendText(" and ", {});
-   * range.appendText("red text", { color: '#FF0000' });
-   *
-   * // Get formatted regions
-   * const regions = range.readTextRegions();
-   * // Do something with the regions, e.g.
-   * // [
-   * //   { text: "Normal text ", formatting: {} },
-   * //   { text: "bold text", formatting: { fontWeight: 'bold' } },
-   * //   { text: " and ", formatting: {} },
-   * //   { text: "red text", formatting: { color: '#FF0000' } }
-   * // ]
-   * ```
-   *
-   * @example Analyze formatting variations
-   * ```typescript
-   * import { createRichtextRange } from "@canva/design";
-   *
-   * const range = createRichtextRange();
-   * range.appendText("Mixed ", {});
-   * range.appendText("formatted ", { fontWeight: 'bold' });
-   * range.appendText("text", { color: '#0066CC' });
-   *
-   * // Analyze formatting variations
-   * const regions = range.readTextRegions();
-   * const formattingTypes = regions.map(region => {
-   *   const formatting = region.formatting || {};
-   *   return {
-   *     text: region.text,
-   *     hasWeight: !!formatting.fontWeight,
-   *     hasColor: !!formatting.color
-   *   };
-   * });
-   * ```
-   */
-  readTextRegions(): TextRegion[];
-};
-
-/**
- * @public
- * An alias for the DesignSelection interface, providing access to design selection related functionality
- */
-export declare const selection: DesignSelection;
-
-/**
- * @public
- * Information about the user's selection. To access the selected content, call the `read` method.
- */
-export declare interface SelectionEvent<Scope extends SelectionScope> {
-  /**
-   * The type of content that's selected.
-   */
-  readonly scope: Scope;
-  /**
-   * The number of selected elements.
-   */
-  readonly count: number;
-  /**
-   * Creates a snapshot of the selected content and returns a *draft* object.
-   * The draft has a mutable `contents` property for making changes to the selected content.
-   * Any changes made to `contents` are not immediately persisted or reflected in the user's design.
-   * To persist the changes, call the `save` method that's available via the draft.
-   *
-   * @example Read and modify plaintext selection
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'plaintext',
-   *   onChange: async (event) => {
-   *     if (event.count > 0) {
-   *       // Read the content
-   *       const draft = await event.read();
-   *
-   *       // Handle selected text `draft.contents[0].text`
-   *
-   *       // Modify the text if needed
-   *       // draft.contents[0].text = 'Modified text';
-   *       // await draft.save();
-   *     }
-   *   }
-   * });
-   * ```
-   *
-   * @example Read and analyze image selection
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'image',
-   *   onChange: async (event) => {
-   *     // Check if any images are selected
-   *     if (event.count === 0) {
-   *       // Handle no images selected case
-   *       return;
-   *     }
-   *
-   *     // Read the content
-   *     const draft = await event.read();
-   *
-   *     // Get information about selected images
-   *     const imageRefs = draft.contents.map(content => content.ref);
-   *
-   *     // The ref can be used with other API methods
-   *   }
-   * });
-   * ```
-   *
-   * @example Process multiple selected items
-   * ```typescript
-   * import { selection } from "@canva/design";
-   *
-   * selection.registerOnChange({
-   *   scope: 'richtext',
-   *   onChange: async (event) => {
-   *     if (event.count > 0) {
-   *       const draft = await event.read();
-   *
-   *       // Process each selected range
-   *       draft.contents.forEach((range) => {
-   *         // Do something with the range content and formatted regions, with `range.readPlaintext()` and `range.readTextRegions()`
-   *       });
-   *     }
-   *   }
-   * });
-   * ```
-   */
-  read(): Promise<ContentDraft<SelectionValue<Scope>>>;
-}
-
-/**
- * @public
- * Information about a user's selection.
- */
-export declare interface SelectionEvent<Scope extends SelectionScope> {
-  /**
-   * The type of content.
-   */
-  readonly scope: Scope;
-  /**
-   * The number of content items in the user's selection.
-   */
-  readonly count: number;
-  /**
-   * Returns a snapshot of the content in the user's selection.
-   *
-   * @remarks
-   * The snapshot is known as the *draft*.
-   */
-  read(): Promise<ContentDraft<SelectionValue<Scope>>>;
-}
-
-/**
- * @public
- * A type of content that supports selection events.
- */
-export declare type SelectionScope =
-  | "plaintext"
-  | "image"
-  | "video"
-  | "richtext";
-
-/**
- * @public
- * A piece of selected content.
- *
- * @remarks
- * The available properties depend on the type (scope) of content.
- */
-export declare type SelectionValue<Scope extends SelectionScope> = {
-  /**
-   * A selected range of plaintext.
-   */
-  ["plaintext"]: {
-    /**
-     * The text content.
-     */
-    text: string;
-  };
-  /**
-   * A selected image.
-   */
-  ["image"]: {
-    /**
-     * A unique identifier that points to an image asset in Canva's backend.
-     */
-    ref: ImageRef;
-  };
-  /**
-   * A selected video.
-   */
-  ["video"]: {
-    /**
-     * A unique identifier that points to an video asset in Canva's backend.
-     */
-    ref: VideoRef;
-  };
-  /**
-   * A selected range of formatted text.
-   */
-  ["richtext"]: RichtextRange;
-}[Scope];
-
-/**
- * @public
- * Updates the background of the user's current page. The background can be a solid color,
- * an image or a video.
- *
- * @example Set background color
- * ```typescript
- * import { setCurrentPageBackground } from "@canva/design";
- * import type { PageBackgroundFill } from "@canva/design";
- *
- * const background: PageBackgroundFill = {
- *   color: '#F5F5F5',
- * };
- *
- * await setCurrentPageBackground(background);
- * ```
- *
- * @example Set background image
- * ```typescript
- * import { setCurrentPageBackground } from "@canva/design";
- * import type { PageBackgroundFill } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * const background: PageBackgroundFill = {
- *   asset: {
- *     type: 'image',
- *     ref: exampleImageRef,
- *     altText: { text: 'Background image', decorative: true }
- *   },
- * };
- *
- * await setCurrentPageBackground(background);
- * ```
- *
- * @example Set background video
- * ```typescript
- * import { setCurrentPageBackground } from "@canva/design";
- * import type { PageBackgroundFill } from "@canva/design";
- * import type { VideoRef } from "@canva/asset";
- *
- * const exampleVideoRef = "YOUR_VIDEO_REF" as VideoRef;
- *
- * const background: PageBackgroundFill = {
- *   asset: {
- *     type: 'video',
- *     ref: exampleVideoRef,
- *     altText: { text: 'Background video', decorative: true }
- *   },
- * };
- *
- * await setCurrentPageBackground(background);
- * ```
- */
-export declare const setCurrentPageBackground: (
-  opts: PageBackgroundFill,
-) => Promise<void>;
-
-/**
- * @public
- * An element that renders a vector shape.
- */
-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 = ShapeElement &
-  Point &
-  (WidthAndHeight | Width | Height);
-
-/**
- * @public
- * A path that defines the structure of a shape element.
- */
-export declare type ShapePath = {
-  /**
-   * The shape of the path.
-   *
-   * @remarks
-   * This is similar to the `d` attribute of an SVG's `path` element, with some limitations:
-   *
-   * - The path must start with an M command.
-   * - The path must not have more than one M command.
-   * - The path must not use the Q command.
-   * - The path must be closed, either by:
-   *    - Using a Z command at the end of the path
-   *    - Having the last coordinate match the first coordinate
-   */
-  d: string;
-  /**
-   * The appearance of the path's interior.
-   */
-  fill: Fill;
-  /**
-   * The outline of the path.
-   */
-  stroke?: PathStroke;
-};
-
-/**
- * @public
- * Options for configuring the scale and cropping of a shape.
- *
- * @remarks
- * This is similar to the `viewBox` attribute of an `SVGElement`.
- */
-export declare type ShapeViewBox = {
-  /**
-   * The distance of the shape from the top edge of the element, in pixels.
-   */
-  top: number;
-  /**
-   * The distance of the shape from the left edge of the element, in pixels.
-   */
-  left: number;
-  /**
-   * The width of the view box, in pixels.
-   */
-  width: number;
-  /**
-   * The height of the view box, in pixels.
-   */
-  height: number;
-};
-
-/**
- * @public
- * An element that renders a table.
- */
-export declare type TableElement = {
-  /**
-   * The type of element.
-   */
-  type: "table";
-  /**
-   * The rows of the table.
-   */
-  rows: {
-    /**
-     * The cells (columns) of the row.
-     *
-     * @remarks
-     * Each row must have the same number of cells.
-     */
-    cells: (Cell | null | undefined)[];
-  }[];
-};
-
-/**
- * @public
- * Options for configuring the appearance of text.
- */
-export declare type TextAttributes = {
-  /**
-   * The size of the text.
-   *
-   * @remarks
-   * - Minimum: 1
-   * - Maximum: 100
-   *
-   * @defaultValue 16
-   */
-  fontSize?: number;
-  /**
-   * The alignment of the text.
-   * @defaultValue "start"
-   */
-  textAlign?: "start" | "center" | "end" | "justify";
-  /**
-   * The color of the text as a hex code.
-   *
-   * @remarks
-   * The hex code must include all six characters and be prefixed with a `#` symbol.
-   *
-   * @example
-   * "#ff0099"
-   */
-  color?: string;
-  /**
-   * @public
-   * A unique identifier that points to a font asset in Canva's backend.
-   */
-  fontRef?: FontRef;
-  /**
-   * The weight (thickness) of the font.
-   * @defaultValue "normal"
-   */
-  fontWeight?: FontWeight;
-  /**
-   * The style of the font.
-   * @defaultValue "normal"
-   */
-  fontStyle?: "normal" | "italic";
-  /**
-   * The decoration of the font.
-   * @defaultValue "none"
-   */
-  decoration?: "none" | "underline";
-};
-
-/**
- * @public
- * The dimensions, position, and rotation of a text element.
- */
-declare type TextBox = Point & {
-  /**
-   * The width of the element, in pixels.
-   *
-   * @remarks
-   * - Minimum: 0
-   * - Maximum: 32767
-   */
-  width?: number;
-};
-
-/**
- * @public
- * Text element or content to be added to the design at the end of a drag event.
- */
-export declare type TextDragConfig = {
-  /**
-   * The type of element.
-   */
-  type: "text";
-  /**
-   * The text content to drag.
-   */
-  children?: string[];
-  /**
-   * The alignment of the text.
-   * @defaultValue "start"
-   */
-  textAlign?: "start" | "center" | "end" | "justify";
-  /**
-   * The weight (thickness) of the font.
-   * @defaultValue "normal"
-   */
-  fontWeight?: FontWeight;
-  /**
-   * The style of the font.
-   * @defaultValue "normal"
-   */
-  fontStyle?: "normal" | "italic";
-  /**
-   * The decoration of the font.
-   * @defaultValue "none"
-   */
-  decoration?: "none" | "underline";
-};
-
-/**
- * @public
- * An element that renders text content.
- */
-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 = TextElement & TextBox;
-
-/**
- * @public
- * A region of richtext.
- */
-export declare type TextRegion = {
-  /**
-   * The plaintext content of the region.
-   */
-  text: string;
-  /**
-   * The formatting of the region.
-   */
-  formatting?: Partial<RichtextFormatting>;
-};
-
-/**
- * @public
- * Provides methods for adding drag and drop behavior to an app.
- */
-export declare interface UI {
-  /**
-   * @deprecated The method has been superseded by `startDragToPoint`.
-   * @public
-   * Adds the specified element or content to a design at the end of a drag event.
-   *
-   * @param event - A drag start event.
-   * @param dragData - Element or content to be added to the design at the end of the drag event.
-   */
-  startDrag<E extends Element>(
-    event: DragStartEvent<E>,
-    dragData:
-      | TextDragConfig
-      | AudioDragConfig
-      | EmbedDragConfig
-      | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>,
-  ): Promise<void>;
-  /**
-   * @public
-   * Adds the specified element or content to fixed designs, which use a coordinate-based positioning system at the end of a drag event.
-   *
-   * @param event - A drag start event.
-   * @param dragData - Element or content to be added to the design at the end of the drag event.
-   */
-  startDragToPoint<E extends Element>(
-    event: DragStartEvent<E>,
-    dragData:
-      | TextDragConfig
-      | AudioDragConfig
-      | EmbedDragConfig
-      | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>,
-  ): Promise<void>;
-  /**
-   * @public
-   * Adds the specified element or content to responsive documents, which slot things into a text stream at the end of a drag event.
-   *
-   * @param event - A drag start event.
-   * @param dragData - Element or content to be added to the design at the end of the drag event.
-   */
-  startDragToCursor<E extends Element>(
-    event: DragStartEvent<E>,
-    dragData:
-      | EmbedDragConfig
-      | VideoDragConfigForElement<E>
-      | ImageDragConfigForElement<E>,
-  ): Promise<void>;
-}
-
-/**
- * An alias for the UI interface, providing access to ui related functionality
- * @public
- */
-export declare const ui: UI;
-
-/**
- * @public
- * A data type that can be used in app element data.
- */
-export declare type Value =
-  | Primitive
-  | ObjectPrimitive
-  | Exclude<Value, undefined>[]
-  | {
-      [key: string]: Value;
-    };
-
-/**
- * @public
- * Video element or content to be added to the design at the end of a drag event.
- */
-export declare type VideoDragConfig = {
-  /**
-   * The type of element.
-   */
-  type: "video";
-  /**
-   * A function that returns a reference (ref) to a video asset in Canva's backend.
-   */
-  resolveVideoRef: () => Promise<{
-    ref: VideoRef;
-  }>;
-  /**
-   * The dimensions of the preview image.
-   */
-  previewSize: Dimensions;
-  /**
-   * The dimensions of the full-size video.
-   *
-   * @remarks
-   * - These dimensions are used when adding the video to the design
-   * - If omitted, the `previewSize` dimensions are used as a fallback.
-   */
-  fullSize?: Dimensions;
-  /**
-   * The URL of an image to display under the user's cursor during the drag and drop event.
-   */
-  previewUrl: string;
-};
-
-/**
- * @public
- * Video element or content to be added to the design at the end of a drag event.
- */
-export declare type VideoDragConfigForElement<E extends Element> =
-  E extends HTMLImageElement
-    ? Partial<VideoDragConfig> &
-        Pick<VideoDragConfig, "type" | "resolveVideoRef">
-    : VideoDragConfig;
-
-/**
- * @public
- * An element that renders video content.
- */
-export declare type VideoElement = {
-  /**
-   * 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.
-   *
-   * @remarks
-   * Use `undefined` for content with no description.
-   */
-  altText: AltText | undefined;
-};
-
-/**
- * @public
- * An element that renders video content and has positional properties.
- */
-export declare type VideoElementAtPoint = VideoElement &
-  Point &
-  (WidthAndHeight | Width | Height);
-
-/**
- * @public
- * A video asset that fills a path's interior.
- */
-export declare type VideoFill = {
-  /**
-   * The type of fill.
-   */
-  type: "video";
-  /**
-   * A unique identifier that points to a video asset in Canva's backend.
-   */
-  ref: VideoRef;
-  /**
-   * A description of the image content.
-   *
-   * @remarks
-   * Use `undefined` for content with no description.
-   */
-  altText?: AltText;
-};
-
-/**
- * @public
- * A unique identifier that references a video asset in Canva's backend.
- */
-export declare type VideoRef = string & {
-  __videoRef: never;
-};
-
-/**
- * A set of dimensions with an auto-calculated height.
- */
-declare type Width = {
-  /**
-   * A width, in pixels.
-   *
-   * @remarks
-   * - The pixels are relative to their container.
-   * - Minimum: 0
-   * - Maximum: 32767
-   */
-  width: number;
-  /**
-   * Indicates that the height should be auto-calculated.
-   */
-  height: "auto";
-};
-
-/**
- * A set of dimensions, in pixels.
- */
-declare type WidthAndHeight = {
-  /**
-   * A width, in pixels.
-   *
-   * @remarks
-   * - The pixels are relative to their container.
-   * - Minimum: 0
-   * - Maximum: 32767
-   */
-  width: number;
-  /**
-   * A height, in pixels.
-   *
-   * @remarks
-   * - The pixels are relative to their container.
-   * - Minimum: 0
-   * - Maximum: 32767
-   */
-  height: number;
-};
-
-export {};
+export * from "./beta";