@canva/design 2.7.6-beta.1 → 2.8.0

package/index.d.ts

@@ -1 +1,5049 @@
-export * from "./beta";
+/**
+ * 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,
+ *   ]
+ * });
+ * ```
+ *
+ * @example Create page with custom dimensions
+ * ```typescript
+ * import { addPage } from "@canva/design";
+ *
+ * await addPage({
+ *   dimensions: {
+ *      width: 300,
+ *      height: 300,
+ *   },
+ * });
+ * ```
+ */
+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;
+    /**
+     * The optional custom dimensions in pixels for the new page. The following constraints apply:
+     * - `width` and `height` cannot be lower than 40 or higher than 8000
+     * - The total area of the new page cannot exceed 25_000_000
+     * In case this is not specified, the default dimensions for the design type will be used.
+     */
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+}) => 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 alias for the BulkCreateLauncher interface, providing access to bulk create related functionality
+ */
+export declare const bulkCreate: BulkCreateLauncher;
+
+/**
+ * @public
+ * Provides methods for launching the bulk create panel.
+ */
+export declare type BulkCreateLauncher = {
+    /**
+     * @public
+     * Launches the design bulk create with the data connector intent.
+     * @param opts - Options for configuring the bulk create panel.
+     * @throws unsupported_surface code if not invoked by the design editor intent.
+     *
+     * @example Launch the bulk create panel with the same app
+     * ```typescript
+     * import { bulkCreate } from "@canva/design";
+     * import { features } from "@canva/platform";
+     *
+     * if (features.isSupported(bulkCreate.launch)) {
+     *   await bulkCreate.launch({ withDataConnector: 'self' });
+     * }
+     * ```
+     */
+    launch(opts: LaunchBulkCreateOpts): Promise<void>;
+};
+
+/**
+ * @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.
+     * - App elements are not supported by this API. For managing selection and updates to app elements, please refer to the `initAppElement` API call for details and examples.
+     *
+     * @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 Edit selected image and upload with parentRef
+     * ```typescript
+     * import { selection } from "@canva/design";
+     * import { getTemporaryUrl, upload } from "@canva/asset";
+     *
+     * selection.registerOnChange({
+     *   scope: 'image',
+     *   onChange: async (event) => {
+     *     if (event.count > 0) {
+     *       const draft = await event.read();
+     *
+     *       for (const content of draft.contents) {
+     *         // Fetch a temporary URL to the original image
+     *         const { url } = await getTemporaryUrl({
+     *           type: "image",
+     *           ref: content.ref
+     *         });
+     *
+     *         // Apply any edits you want to the image
+     *         const processedImageUrl = await applyImageEffect(url);
+     *
+     *         // Upload the edited image with parentRef
+     *         const asset = await upload({
+     *           type: "image",
+     *           parentRef: content.ref,
+     *           url: processedImageUrl,
+     *           mimeType: "image/jpeg",
+     *           thumbnailUrl: processedImageUrl,
+     *           aiDisclosure: "app_generated"
+     *         });
+     *
+     *         // Replace the image ref with the new image ref
+     *         content.ref = asset.ref;
+     *       }
+     *
+     *       // Save the changes to the design
+     *       await draft.save();
+     *     }
+     *   }
+     * });
+     * ```
+     *
+     * @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,
+     * by default this URL will point to a ZIP file that contains each page as a separate file.
+     *
+     * If the user has configured the export to not zip the exported files (using the `zipped` property), this URL will point to a single 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 JPG and the user has set `zipped` to `never` for JPGs, the URL will point to a JPG file and will be one of multiple urls in the exportBlobs array.
+     * - If a multi-page design is exported as a PDF file, the URL will point to a PDF file.
+     * - If a multi-page design is exported as a VIDEO file and the user has set `zipped` to `always` for VIDEOs, the URL will point to a ZIP that contains a VIDEO 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 can contain a single link either to a file or a ZIP, or multiple links to individual files.
+     */
+    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
+ * Object representation of the supported file types with properties where applicable.
+ */
+export declare type ExportFileTypeWithProperties = ExportImageFileType | ExportVideoFileType | ExportPrintFileType;
+
+/**
+ * @public
+ * Supported image file types with properties.
+ *
+ * @remarks
+ * Zip behavior for image file types:
+ * - `auto` (default): Files are zipped together if the design has multiple pages, unzipped if it has one page.
+ * - `always`: Files are always zipped into a single zip file, regardless of page count.
+ * - `never`: Files are never zipped, providing an array of files.
+ */
+export declare type ExportImageFileType = {
+    type: 'png' | 'jpg' | 'svg';
+    zipped?: ZipBehavior;
+};
+
+/**
+ * @public
+ * Supported print file types.
+ */
+export declare type ExportPrintFileType = {
+    type: 'pdf_standard' | 'pptx';
+};
+
+/**
+ * @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 | ExportFileTypeWithProperties)[];
+};
+
+/**
+ * @public
+ * The result of exporting a design.
+ */
+export declare type ExportResponse = ExportCompleted | ExportAborted;
+
+/**
+ * @public
+ * Supported video file types with properties.
+ *
+ * @remarks
+ * Zip behavior for video file types:
+ * - `auto` or `never` (default): Files are never zipped together, regardless of count.
+ * - `always`: Files are always zipped into a single file.
+ */
+export declare type ExportVideoFileType = {
+    type: 'gif' | 'video';
+    zipped?: ZipBehavior;
+};
+
+/**
+ * @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;
+};
+
+/**
+ * @public
+ * Options for configuring the bulk create panel.
+ */
+export declare type LaunchBulkCreateOpts = {
+    /**
+     * The option to make sure the data connector intent of the current app will be triggered.
+     */
+    withDataConnector: 'self';
+};
+
+/**
+ * @public
+ * Options for configuring the publish menu.
+ */
+export declare type LaunchPublishOpts = {
+    /**
+     * The option to make sure the content publisher intent of the current app will be triggered.
+     */
+    withContentPublisher: 'self';
+};
+
+/**
+ * @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
+ * An alias for the PublishLauncher interface, providing access to design publishing related functionality
+ */
+export declare const publish: PublishLauncher;
+
+/**
+ * @public
+ * Provides methods for launching the publish menu
+ */
+export declare type PublishLauncher = {
+    /**
+     * @public
+     * Launches the design publish with the content publisher intent.
+     * @param opts - Options for configuring the publish menu.
+     * @throws unsupported_surface code if not invoked by the design editor intent.
+     *
+     * @example Launch the content publisher with the same app
+     * ```typescript
+     * import { publish } from "@canva/design";
+     * import { features } from "@canva/platform";
+     *
+     * if (features.isSupported(publish.launch)) {
+     *   await publish.launch({ withContentPublisher: 'self' });
+     * }
+     * ```
+     */
+    launch(opts: LaunchPublishOpts): Promise<void>;
+};
+
+/**
+ * @public
+ * Exports the user's design as one or more static files.
+ * @param request - The request object containing configurations of the design export.
+ */
+export declare const requestExport: (request: ExportRequest) => Promise<ExportResponse>;
+
+/**
+ * @public
+ * 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;
+};
+
+/**
+ * @public
+ * The behavior of zipping the exported files.
+ *
+ * @remarks
+ * For `png`, `jpg`, and `svg`:
+ * - `auto` (default): Files are zipped together if the design has multiple pages, unzipped if it has one page.
+ * - `always`: Files are always zipped into a single zip file, regardless of page count.
+ * - `never`: Files are never zipped, providing an array of files.
+ *
+ * For `video` and `gif`:
+ * - `auto` or `never` (default): Files are never zipped together, regardless of count.
+ * - `always`: Files are always zipped into a single file.
+ */
+export declare type ZipBehavior = 'auto' | 'always' | 'never';
+
+export { }