@canva/design 2.8.0 → 2.8.1-alpha.1

package/index.d.ts

@@ -1,5049 +1 @@
-/**
- * Adds an audio track to the user's design.
- * @public
- * @param audioTrack - The audio track to add to the user's design.
- *
- * @example Add audio track to design
- * ```typescript
- * import { addAudioTrack } from "@canva/design";
- * import type { AudioTrack } from "@canva/design";
- * import type { AudioRef } from "@canva/asset";
- *
- * const exampleAudioRef = "YOUR_AUDIO_REF" as AudioRef;
- *
- * const audioTrack: AudioTrack = {
- *   ref: exampleAudioRef
- * };
- *
- * await addAudioTrack(audioTrack);
- * ```
- */
-export declare const addAudioTrack: (audioTrack: AudioTrack) => Promise<void>;
-
-/**
- * @public
- * Add element to responsive documents, which slot things into a text stream
- *
- * @example Insert an image at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { ImageElement } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * const imageElement: ImageElement = {
- *   type: 'image',
- *   ref: exampleImageRef,
- *   altText: { text: 'Product image', decorative: false }
- * };
- *
- * await addElementAtCursor(imageElement);
- * ```
- *
- * @example Insert a video at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { VideoElement } from "@canva/design";
- * import type { VideoRef } from "@canva/asset";
- *
- * const exampleVideoRef = "YOUR_VIDEO_REF" as VideoRef;
- *
- * const videoElement: VideoElement = {
- *   type: 'video',
- *   ref: exampleVideoRef,
- *   altText: { text: 'Product demo', decorative: false }
- * };
- *
- * await addElementAtCursor(videoElement);
- * ```
- *
- * @example Insert embedded content at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { EmbedElement } from "@canva/design";
- *
- * const embedElement: EmbedElement = {
- *   type: 'embed',
- *   url: 'https://www.youtube.com/watch?v=...'
- * };
- *
- * await addElementAtCursor(embedElement);
- * ```
- *
- * @example Insert text at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { TextElement } from "@canva/design";
- *
- * const textElement: TextElement = {
- *   type: 'text',
- *   children: ['Hello World'],
- *   fontSize: 24,
- *   color: '#000000'
- * };
- *
- * await addElementAtCursor(textElement);
- * ```
- *
- * @example Insert formatted text at cursor position
- * ```typescript
- * import { addElementAtCursor, createRichtextRange } from "@canva/design";
- * import type { RichtextElement } from "@canva/design";
- *
- * const range = createRichtextRange();
- * range.appendText('Rich Text Content', { color: '#000000' });
- *
- * const richtextElement: RichtextElement = {
- *   type: 'richtext',
- *   range
- * };
- *
- * await addElementAtCursor(richtextElement);
- * ```
- *
- * @example Insert a table at cursor position
- * ```typescript
- * import { addElementAtCursor } from "@canva/design";
- * import type { TableElement } from "@canva/design";
- *
- * const tableElement: TableElement = {
- *   type: 'table',
- *   rows: [
- *     {
- *       cells: [
- *         { type: 'string', value: 'Header 1' },
- *         { type: 'string', value: 'Header 2' }
- *       ]
- *     },
- *     {
- *       cells: [
- *         { type: 'string', value: 'Data 1' },
- *         { type: 'string', value: 'Data 2' }
- *       ]
- *     }
- *   ]
- * };
- *
- * await addElementAtCursor(tableElement);
- * ```
- */
-export declare const addElementAtCursor: (element: ElementAtCursor) => Promise<void>;
-
-/**
- * @public
- * Add element to fixed designs, which use a coordinate-based positioning system.
- *
- * @example Insert an image at specific coordinates
- * ```typescript
- * import { addElementAtPoint } from "@canva/design";
- * import type { ImageElementAtPoint } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * const imageElement: ImageElementAtPoint = {
- *   type: 'image',
- *   ref: exampleImageRef,
- *   altText: { text: 'Product image', decorative: false },
- *   top: 100,
- *   left: 100,
- *   width: 300,
- *   height: 200
- * };
- *
- * await addElementAtPoint(imageElement);
- * ```
- *
- * @example Insert a video at specific coordinates
- * ```typescript
- * import { addElementAtPoint } from "@canva/design";
- * import type { VideoElementAtPoint } from "@canva/design";
- * import type { VideoRef } from "@canva/asset";
- *
- * const exampleVideoRef = "YOUR_VIDEO_REF" as VideoRef;
- *
- * const videoElement: VideoElementAtPoint = {
- *   type: 'video',
- *   ref: exampleVideoRef,
- *   altText: { text: 'Product demo', decorative: false },
- *   top: 100,
- *   left: 100,
- *   width: 400,
- *   height: 300
- * };
- *
- * await addElementAtPoint(videoElement);
- * ```
- *
- * @example Insert embedded content at specific coordinates
- * ```typescript
- * import { addElementAtPoint } from "@canva/design";
- * import type { EmbedElementAtPoint } from "@canva/design";
- *
- * const embedElement: EmbedElementAtPoint = {
- *   type: 'embed',
- *   url: 'https://www.youtube.com/watch?v=...',
- *   top: 100,
- *   left: 100,
- *   width: 560,
- *   height: 315
- * };
- *
- * await addElementAtPoint(embedElement);
- * ```
- *
- * @example Insert text at specific coordinates
- * ```typescript
- * import { addElementAtPoint } from "@canva/design";
- * import type { TextElementAtPoint } from "@canva/design";
- *
- * const textElement: TextElementAtPoint = {
- *   type: 'text',
- *   children: ['Hello World'],
- *   top: 100,
- *   left: 100,
- *   width: 200,
- *   fontSize: 24,
- *   color: '#000000',
- *   textAlign: 'justify'
- * };
- *
- * await addElementAtPoint(textElement);
- * ```
- */
-export declare const addElementAtPoint: (element: DesignElement | ElementAtPoint) => Promise<void>;
-
-/**
- * @deprecated
- * @public
- * Adds a native element to the user's design.
- * @param element - The element to add to the user's design.
- *
- * @example Basic usage
- * ```typescript
- * import { addNativeElement } from "@canva/design";
- * import type { NativeElementWithBox } from "@canva/design";
- *
- * const element: NativeElementWithBox = {
- *   type: 'text',
- *   children: ['Legacy element'],
- *   top: 100,
- *   left: 100,
- *   width: 200
- * };
- *
- * await addNativeElement(element);
- * ```
- */
-export declare const addNativeElement: (element: NativeElement | NativeElementWithBox) => Promise<void>;
-
-/**
- * @public
- * Adds a new page immediately after the currently selected page.
- * @param opts - Configuration for the new page to be added.
- *
- * @example Create empty page
- * ```typescript
- * import { addPage } from "@canva/design";
- *
- * await addPage();
- * ```
- *
- * @example Create page with title
- * ```typescript
- * import { addPage } from "@canva/design";
- *
- * await addPage({
- *   title: 'My New Page'
- * });
- * ```
- *
- * @example Create page with background color
- * ```typescript
- * import { addPage } from "@canva/design";
- * import type { PageBackgroundFill } from "@canva/design";
- *
- * const background: PageBackgroundFill = {
- *   color: '#F5F5F5',
- * };
- *
- * await addPage({ background });
- * ```
- *
- * @example Create page with background image
- * ```typescript
- * import { addPage } from "@canva/design";
- * import type { PageBackgroundFill } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * const background: PageBackgroundFill = {
- *   asset: {
- *     type: 'image',
- *     ref: exampleImageRef,
- *     altText: { text: 'Background image', decorative: true }
- *   },
- * };
- *
- * await addPage({ background });
- * ```
- *
- * @example Create page with multiple elements
- * ```typescript
- * import { addPage } from "@canva/design";
- * import type { TextElementAtPoint, ImageElementAtPoint } from "@canva/design";
- * import type { ImageRef } from "@canva/asset";
- *
- * const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;
- *
- * await addPage({
- *   elements: [
- *     {
- *       type: 'text',
- *       children: ['Page Title'],
- *       top: 50,
- *       left: 100,
- *       width: 400,
- *       fontSize: 32,
- *       textAlign: 'center'
- *     } as TextElementAtPoint,
- *     {
- *       type: 'text',
- *       children: ['Subtitle text'],
- *       top: 100,
- *       left: 100,
- *       width: 400,
- *       fontSize: 18,
- *       textAlign: 'center'
- *     } as TextElementAtPoint,
- *     {
- *       type: 'image',
- *       ref: exampleImageRef,
- *       altText: { text: 'Featured image', decorative: false },
- *       top: 150,
- *       left: 200,
- *       width: 200,
- *       height: 200
- *     } as ImageElementAtPoint,
- *   ]
- * });
- * ```
- *
- * @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 { }
+export * from "./alpha";