@canva/design 2.8.1-alpha.0 → 2.8.1-alpha.1

package/CHANGELOG.md

@@ -1,8 +1,19 @@
 # CHANGELOG
 
+## 2.8.1-alpha.1 - 2026-04-22
+
+### Added
+
+- openDesign (Early-Preview): Added `helpers.timingFor(elementRef)` for element-bound timing access.
+- Introducing a new preview API method `applyTemplate` to apply a template to the current design.
+
+### Fixed
+
+- Fixed `ResetToDefault` import failing at runtime in the built package due to a path restructuring issue in the build.
+- Exported missing `Patch` type — previously referenced in `TimingAccessor.set()` but not importable from the package.
+
 ## 2.8.1-alpha.0 - 2026-04-01
 
 ### Added
 
 - Initial npm release of the `@canva/design` Early Preview package.
-

package/alpha.d.ts

@@ -890,6 +890,55 @@ export declare type AppElementRendererOutputV2 = AppElementRendererOutput;
  */
 export declare type AppElementRendererV2<A extends AppElementData> = (appElementData: A) => AppElementRendererOutputV2;
 
+/**
+ * @alpha
+ * Apply a template to the current design given a template id.
+ *
+ * @example Apply a template to the current design
+ * ```typescript
+ * import {
+ *   applyTemplate,
+ *   requestBrandTemplates,
+ *   type BrandTemplateId,
+ * } from "@canva/design";
+ *
+ * const selection = await requestBrandTemplates();
+ * if (selection.status === "aborted") return;
+ *
+ * const templateId = selection.brandTemplates[0]?.token as BrandTemplateId | undefined;
+ * if (!templateId) return;
+ *
+ * const result = await applyTemplate({
+ *   template: { id: templateId },
+ *   mode: "overwrite",
+ * });
+ *
+ * if (result.status === "completed") {
+ *   // Template was successfully applied
+ * }
+ * ```
+ */
+export declare const applyTemplate: (options: ApplyTemplateOptions) => Promise<ApplyTemplateResult>;
+
+/**
+ * @alpha
+ * Options for applying a template to a design.
+ */
+export declare type ApplyTemplateOptions = {
+    template: {
+        id: BrandTemplateId;
+    };
+    mode: 'overwrite';
+};
+
+/**
+ * @alpha
+ * Response object from the ApplyTemplate operation.
+ */
+export declare type ApplyTemplateResult = {
+    status: 'completed' | 'aborted';
+};
+
 /**
  * @public
  * A unique identifier that references an app runtime process
@@ -1399,6 +1448,14 @@ export declare type Coordinates = {
  */
 export declare const createRichtextRange: () => RichtextRange;
 
+/**
+ * @alpha
+ * Session for the `openDesign` callback (current page) when `helpers` is {@link PageHelpersWithTiming}.
+ */
+export declare type CurrentPageSessionWithTiming<Page extends DesignEditing.Page = DesignEditing.Page> = Omit<DesignEditing.CurrentPageSession<Page, DesignEditing.PageHelpers>, 'helpers'> & {
+    helpers: PageHelpersWithTiming;
+};
+
 /**
  * @beta
  * Metadata for a data field in a brand template.
@@ -3228,6 +3285,12 @@ export declare type DesignOpenCallback = (session: DesignEditing.CurrentPageSess
  */
 export declare type DesignOpenCurrentPageCallback = (session: DesignEditing.CurrentPageSession) => Promise<void>;
 
+/**
+ * @alpha
+ * Callback for `openDesign` when the session exposes {@link PageHelpersWithTiming}.
+ */
+declare type DesignOpenCurrentPageCallbackWithTiming = (session: CurrentPageSessionWithTiming<DesignEditing.Page>) => Promise<void>;
+
 /**
  * @beta
  * Options for configuring how the current page of the design is read.
@@ -4719,14 +4782,13 @@ declare type NumberDataTableCell = {
 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.
+ * @alpha
+ * Reads (and optionally updates) the current page of the user's design, with timing support for
+ * video timeline elements.
+ * @param options - Options for configuring how the current page of the design is read.
+ * @param callback - A callback for operating on the current page of the design.
  */
-export declare const openDesign: (options: DesignOpenOptions, callback: DesignOpenCallback) => Promise<void>;
+export declare const openDesign: (options: DesignOpenCurrentPageOptions, callback: DesignOpenCurrentPageCallbackWithTiming) => Promise<void>;
 
 /**
  * @public
@@ -4819,6 +4881,22 @@ export declare type PageDimensions = {
     height: number;
 };
 
+/**
+ * @alpha
+ * {@link DesignEditing.PageHelpers} plus {@link PageHelpersWithTiming.timingFor | timingFor} for **video / fixed pages** with a timeline.
+ *
+ * @preventInline
+ */
+export declare type PageHelpersWithTiming = DesignEditing.PageHelpers & {
+    /**
+     * Timing API for one element on the current page.
+     *
+     * @param elementRef - Must belong to the current page.
+     * @returns A {@link TimingAccessor} for the element.
+     */
+    timingFor(elementRef: DesignEditing.AbsoluteElement): TimingAccessor;
+};
+
 /**
  * @beta
  * Information about a page within a design.
@@ -4841,6 +4919,18 @@ declare type PageMetadata_2 = {
     dimensions?: PageDimensions;
 };
 
+/**
+ * @alpha
+ * Partial update shape: only listed properties are applied; others stay as they are.
+ *
+ * @remarks
+ * Each key may be the normal value, {@link ResetToDefault} to reset that property to its default, or
+ * omitted / **`undefined`** to leave that property **unchanged**.
+ */
+export declare type Patch<T extends Record<string, unknown>> = {
+    [K in keyof T]?: T[K] | typeof ResetToDefault;
+};
+
 /**
  * @public
  * The outline of a path.
@@ -5053,6 +5143,15 @@ export declare type RequestBrandTemplatesResponseContent = {
  */
 export declare const requestExport: (request: ExportRequest) => Promise<ExportResponse>;
 
+/**
+ * @alpha
+ * Use in a {@link Patch} to mean “set this property to its default” instead of a concrete value.
+ *
+ * @remarks
+ * String literals like `'default'` are avoided so they cannot clash with future string-valued fields.
+ */
+export declare const ResetToDefault: unique symbol;
+
 /**
  * @public
  * Provides methods for interacting with a range of formatted text.
@@ -6043,358 +6142,401 @@ export declare type TextRegion = {
 };
 
 /**
- * @public
- * Provides methods for adding drag and drop behavior to an app.
+ * @alpha
+ * Start time and duration for an element on the **video timeline** (seconds).
  */
-export declare interface UI {
+export declare type Timing = {
     /**
-     * @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.
+     * Delay from the start of the page’s timeline until this element becomes visible. Minimum `0`.
      */
-    startDrag<E extends Element>(event: DragStartEvent<E>, dragData: TextDragConfig | AudioDragConfig | EmbedDragConfig | VideoDragConfigForElement<E> | ImageDragConfigForElement<E>): Promise<void>;
+    readonly delayInSeconds: number;
     /**
-     * @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;
-
-/**
- * @beta
- * Pages that do not have fixed or unbounded dimensions currently do not return metadata.
- */
-declare type UnsupportedPageMetadata = {
-    /**
-     * The type of page.
+     * How long the element stays visible. A **number** is a duration in seconds (Positive number).
+     * The string **`'until_end_of_page'`** means until the **end of the current page** (default).
      */
-    type: 'unsupported';
+    readonly durationInSeconds: number | 'until_end_of_page';
 };
 
 /**
- * @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.
+ * @alpha
+ * Read/write timing for a single element. Obtained from {@link PageHelpersWithTiming.timingFor}.
+ *
+ * @preventInline
  */
-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;
+export declare type TimingAccessor = {
     /**
-     * The dimensions of the full-size video.
+     * Reads the element’s current timing.
      *
-     * @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;
+     * @returns {@link Timing}
+         *
+         * @remarks
+         * If set(ResetToDefault) and then get(), it will returns `{ startMs: 0, durationMs: 'until_end_of_page' }` instead
+         */
+     get(): Timing;
+     /**
+      * Updates timing on the element, or resets it entirely.
+      *
+      * @param timing - Either:
+      * - **`ResetToDefault`** alone — reset **all** timing to defaults (delay at 0, duration to end of page).
+      * - A **patch object** — merge with current timing. Omitted keys or keys set to `undefined` are
+      *   **unchanged**. Use {@link ResetToDefault} on a key to reset that property to its default.
+      */
+     set(timing: Patch<Timing> | typeof ResetToDefault): Promise<void>;
+    };
 
-/**
- * @public
- * An element that renders video content.
- */
-export declare type VideoElement = {
     /**
-     * The type of element.
+     * @public
+     * Provides methods for adding drag and drop behavior to an app.
      */
-    type: 'video';
+    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>;
+    }
+
     /**
-     * A unique identifier that points to a video asset in Canva's backend.
+     * An alias for the UI interface, providing access to ui related functionality
+     * @public
      */
-    ref: VideoRef;
+    export declare const ui: UI;
+
     /**
-     * A description of the video content.
-     *
-     * @remarks
-     * Use `undefined` for content with no description.
+     * @beta
+     * Pages that do not have fixed or unbounded dimensions currently do not return metadata.
      */
-    altText: AltText | undefined;
-};
-
-/**
- * @public
- * An element that renders video content and has positional properties.
- */
-export declare type VideoElementAtPoint = VideoElement & Point & (WidthAndHeight | Width | Height);
+    declare type UnsupportedPageMetadata = {
+        /**
+         * The type of page.
+         */
+        type: 'unsupported';
+    };
 
-/**
- * @public
- * A video asset that fills a path's interior.
- */
-export declare type VideoFill = {
     /**
-     * The type of fill.
+     * @public
+     * A data type that can be used in app element data.
      */
-    type: 'video';
+    export declare type Value = Primitive | ObjectPrimitive | Exclude<Value, undefined>[] | {
+        [key: string]: Value;
+    };
+
     /**
-     * A unique identifier that points to a video asset in Canva's backend.
+     * @public
+     * Video element or content to be added to the design at the end of a drag event.
      */
-    ref: VideoRef;
+    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;
+    };
+
     /**
-     * A description of the image content.
-     *
-     * @remarks
-     * Use `undefined` for content with no description.
+     * @public
+     * Video element or content to be added to the design at the end of a drag event.
      */
-    altText?: AltText;
-};
+    export declare type VideoDragConfigForElement<E extends Element> = E extends HTMLImageElement ? Partial<VideoDragConfig> & Pick<VideoDragConfig, 'type' | 'resolveVideoRef'> : VideoDragConfig;
 
-/**
- * @public
- * The MIME type of a video file that's supported by Canva's backend.
- *
- * @remarks
- * - GIFs are treated as videos, not images.
- * - `"application/json"` is only used for Lottie files.
- */
-declare type VideoMimeType = 'video/avi' | 'video/x-msvideo' | 'image/gif' | 'video/x-m4v' | 'video/x-matroska' | 'video/quicktime' | 'video/mp4' | 'video/mpeg' | 'video/webm' | 'application/json';
-
-/**
- * @public
- * A unique identifier that references a video asset in Canva's backend.
- */
-export declare type VideoRef = string & {
-    __videoRef: never;
-};
-
-/**
- * @public
- * A unique identifier that points to a video asset in Canva's backend.
- */
-declare type VideoRef_2 = string & {
-    __videoRef: never;
-};
-
-/**
- * @public
- * Options for uploading a video asset to the user's private media library.
- */
-declare type VideoUploadOptions = {
     /**
-     * The type of asset.
+     * @public
+     * An element that renders video content.
      */
-    type: 'video';
+    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;
+    };
+
     /**
-     * A human-readable name for the video asset.
-     *
-     * @remarks
-     * This name is displayed in the user's media library and helps users identify
-     * and find the asset later. If not provided, Canva will generate a name based
-     * on the asset's URL or a unique identifier.
-     *
-     * Requirements:
-     * - Minimum length: 1 character (empty strings are not allowed)
-     * - Maximum length: 255 characters
+     * @public
+     * An element that renders video content and has positional properties.
      */
-    name?: string;
+    export declare type VideoElementAtPoint = VideoElement & Point & (WidthAndHeight | Width | Height);
+
     /**
-     * The ref of the original asset from which this new asset was derived.
-     *
-     * @remarks
-     * For example, if an app applies an effect to a video, `parentRef` should contain the ref of the original video.
+     * @public
+     * A video asset that fills a path's interior.
      */
-    parentRef?: VideoRef_2;
+    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;
+    };
+
     /**
-     * The URL of the video file to upload.
+     * @public
+     * The MIME type of a video file that's supported by Canva's backend.
      *
      * @remarks
-     * Requirements:
-     *
-     * - Must use HTTPS
-     * - Must return a `200` status code
-     * - `Content-Type` must match the file's MIME type
-     * - Must be publicly accessible (i.e. not a localhost URL)
-     * - Must not redirect
-     * - Must not contain an IP address
-     * - Maximum length: 4096 characters
-     * - Must not contain whitespace
-     * - Must not contain these characters: `>`, `<`, `{`, `}`, `^`, backticks
-     * - Maximum file size: 1000MB (1GB)
-     */
-    url: string;
-    /**
-     * The MIME type of the video file.
+     * - GIFs are treated as videos, not images.
+     * - `"application/json"` is only used for Lottie files.
      */
-    mimeType: VideoMimeType;
+    declare type VideoMimeType = 'video/avi' | 'video/x-msvideo' | 'image/gif' | 'video/x-m4v' | 'video/x-matroska' | 'video/quicktime' | 'video/mp4' | 'video/mpeg' | 'video/webm' | 'application/json';
+
     /**
-     * The URL of a thumbnail video to display while the video is queued for upload.
-     *
-     * @remarks
-     * Requirements:
-     *
-     * - Must use HTTPS
-     * - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
-     * - Maximum length: 4096 characters
-     * - The dimensions of the thumbnail video must match the video's aspect ratio to prevent the thumbnail from appearing squashed or stretched
-     * - Must not be an AVI file. Although our APIs support uploading AVI videos, Canva can't preview them because of native support of browsers
+     * @public
+     * A unique identifier that references a video asset in Canva's backend.
      */
-    thumbnailVideoUrl?: string;
+    export declare type VideoRef = string & {
+        __videoRef: never;
+    };
+
     /**
-     * The URL of a thumbnail image to use as a fallback if `thumbnailVideoUrl` isn't provided.
-     * This can be an external URL or a data URL.
-     *
-     * @remarks
-     * Requirements for external URLs:
-     *
-     * - Must use HTTPS
-     * - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
-     * - Must be a PNG, JPEG, or SVG file
-     * - Maximum length: 4096 characters
-     *
-     * Requirements for data URLs:
-     *
-     * - Must include `;base64` for base64-encoded data
-     * - Maximum size: 10MB (10 × 1024 × 1024 characters)
-     * - The dimensions of the thumbnail must match the video's aspect ratio to prevent the thumbnail from appearing squashed or stretched
+     * @public
+     * A unique identifier that points to a video asset in Canva's backend.
      */
-    thumbnailImageUrl: string;
+    declare type VideoRef_2 = string & {
+        __videoRef: never;
+    };
+
     /**
-     * A disclosure identifying if the app generated this video using AI.
-     *
-     * @remarks
-     * Helps users make informed decisions about the content they interact with.
-     * See {@link AiDisclosure} for the full definition.
-     *
-     * **App Generated**
-     *
-     * 'app_generated' indicates when the app creates or significantly alters an asset using AI. Includes when
-     * the app requests a third-party service to take similar action on a video using AI.
-     *
-     *  Required for the following cases (this list is not exhaustive):
-     *  | Case                                                             | Reason                               |
-     *  | --                                                               | --                                   |
-     *  | AI generates a new video from scratch                            | Creates new creative content         |
-     *  | AI changes the style of the video e.g. makes it cartoon          | Significantly alters the style       |
-     *  | AI adds subtitles that rely on subjective interpretation         | Creates new creative content         |
-     *  | AI expands a video by generating new content to fill the edges   | Creates new creative content         |
-     *  | AI animates an image                                             | Creates new creative content         |
-     *  | AI fixes defects e.g. blur in a video by generating details      | Creates new creative content         |
-     *  | AI generates a talking head presenter                            | Creates new creative content         |
-     *
-     * **None**
-     *
-     * 'none' indicates when the app doesn't create or significantly alter an asset using AI, or as a part of
-     * a request to third-party hosted content.
-     *
-     * Required for the following cases (this list is not exhaustive):
-     *  | Case                                                     | Reason                                    |
-     *  | --                                                       | --                                        |
-     *  | Asset comes from an asset library                        | Didn't generate the asset itself          |
-     *  | AI corrects red eyes                                     | A minor correction                        |
-     *  | AI adjusts brightness and contrast on a video            | Doesn't change original meaning by itself |
-     *  | AI creates a slow motion effect in a video               | Doesn't change original meaning by itself |
-     *  | AI adds AI word-by-word transcribed subtitles to a video | Doesn't change original meaning by itself |
+     * @public
+     * Options for uploading a video asset to the user's private media library.
      */
-    aiDisclosure: AiDisclosure;
+    declare type VideoUploadOptions = {
+        /**
+         * The type of asset.
+         */
+        type: 'video';
+        /**
+         * A human-readable name for the video asset.
+         *
+         * @remarks
+         * This name is displayed in the user's media library and helps users identify
+         * and find the asset later. If not provided, Canva will generate a name based
+         * on the asset's URL or a unique identifier.
+         *
+         * Requirements:
+         * - Minimum length: 1 character (empty strings are not allowed)
+         * - Maximum length: 255 characters
+         */
+        name?: string;
+        /**
+         * The ref of the original asset from which this new asset was derived.
+         *
+         * @remarks
+         * For example, if an app applies an effect to a video, `parentRef` should contain the ref of the original video.
+         */
+        parentRef?: VideoRef_2;
+        /**
+         * The URL of the video file to upload.
+         *
+         * @remarks
+         * Requirements:
+         *
+         * - Must use HTTPS
+         * - Must return a `200` status code
+         * - `Content-Type` must match the file's MIME type
+         * - Must be publicly accessible (i.e. not a localhost URL)
+         * - Must not redirect
+         * - Must not contain an IP address
+         * - Maximum length: 4096 characters
+         * - Must not contain whitespace
+         * - Must not contain these characters: `>`, `<`, `{`, `}`, `^`, backticks
+         * - Maximum file size: 1000MB (1GB)
+         */
+        url: string;
+        /**
+         * The MIME type of the video file.
+         */
+        mimeType: VideoMimeType;
+        /**
+         * The URL of a thumbnail video to display while the video is queued for upload.
+         *
+         * @remarks
+         * Requirements:
+         *
+         * - Must use HTTPS
+         * - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
+         * - Maximum length: 4096 characters
+         * - The dimensions of the thumbnail video must match the video's aspect ratio to prevent the thumbnail from appearing squashed or stretched
+         * - Must not be an AVI file. Although our APIs support uploading AVI videos, Canva can't preview them because of native support of browsers
+         */
+        thumbnailVideoUrl?: string;
+        /**
+         * The URL of a thumbnail image to use as a fallback if `thumbnailVideoUrl` isn't provided.
+         * This can be an external URL or a data URL.
+         *
+         * @remarks
+         * Requirements for external URLs:
+         *
+         * - Must use HTTPS
+         * - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
+         * - Must be a PNG, JPEG, or SVG file
+         * - Maximum length: 4096 characters
+         *
+         * Requirements for data URLs:
+         *
+         * - Must include `;base64` for base64-encoded data
+         * - Maximum size: 10MB (10 × 1024 × 1024 characters)
+         * - The dimensions of the thumbnail must match the video's aspect ratio to prevent the thumbnail from appearing squashed or stretched
+         */
+        thumbnailImageUrl: string;
+        /**
+         * A disclosure identifying if the app generated this video using AI.
+         *
+         * @remarks
+         * Helps users make informed decisions about the content they interact with.
+         * See {@link AiDisclosure} for the full definition.
+         *
+         * **App Generated**
+         *
+         * 'app_generated' indicates when the app creates or significantly alters an asset using AI. Includes when
+         * the app requests a third-party service to take similar action on a video using AI.
+         *
+         *  Required for the following cases (this list is not exhaustive):
+         *  | Case                                                             | Reason                               |
+         *  | --                                                               | --                                   |
+         *  | AI generates a new video from scratch                            | Creates new creative content         |
+         *  | AI changes the style of the video e.g. makes it cartoon          | Significantly alters the style       |
+         *  | AI adds subtitles that rely on subjective interpretation         | Creates new creative content         |
+         *  | AI expands a video by generating new content to fill the edges   | Creates new creative content         |
+         *  | AI animates an image                                             | Creates new creative content         |
+         *  | AI fixes defects e.g. blur in a video by generating details      | Creates new creative content         |
+         *  | AI generates a talking head presenter                            | Creates new creative content         |
+         *
+         * **None**
+         *
+         * 'none' indicates when the app doesn't create or significantly alter an asset using AI, or as a part of
+         * a request to third-party hosted content.
+         *
+         * Required for the following cases (this list is not exhaustive):
+         *  | Case                                                     | Reason                                    |
+         *  | --                                                       | --                                        |
+         *  | Asset comes from an asset library                        | Didn't generate the asset itself          |
+         *  | AI corrects red eyes                                     | A minor correction                        |
+         *  | AI adjusts brightness and contrast on a video            | Doesn't change original meaning by itself |
+         *  | AI creates a slow motion effect in a video               | Doesn't change original meaning by itself |
+         *  | AI adds AI word-by-word transcribed subtitles to a video | Doesn't change original meaning by itself |
+         */
+        aiDisclosure: AiDisclosure;
 
-} & AllOrNone<Dimensions_2>;
+    } & AllOrNone<Dimensions_2>;
 
-/**
- * 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
+     * A set of dimensions with an auto-calculated height.
      */
-    width: number;
+    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';
+    };
+
     /**
-     * Indicates that the height should be auto-calculated.
+     * A set of dimensions, in pixels.
      */
-    height: 'auto';
-};
+    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;
+    };
 
-/**
- * A set of dimensions, in pixels.
- */
-declare type WidthAndHeight = {
     /**
-     * A width, in pixels.
+     * @public
+     * The behavior of zipping the exported files.
      *
      * @remarks
-     * - The pixels are relative to their container.
-     * - Minimum: 0
-     * - Maximum: 32767
-     */
-    width: number;
-    /**
-     * A height, in pixels.
+     * 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.
      *
-     * @remarks
-     * - The pixels are relative to their container.
-     * - Minimum: 0
-     * - Maximum: 32767
+     * 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.
      */
-    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 declare type ZipBehavior = 'auto' | 'always' | 'never';
 
-export { }
+    export { }

package/lib/cjs/api/design/types/design_interaction/document/alpha.js

@@ -0,0 +1,11 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ResetToDefault", {
+    enumerable: true,
+    get: function() {
+        return ResetToDefault;
+    }
+});
+const ResetToDefault = Symbol.for('$$canva_reset_to_default');

package/lib/cjs/sdk/design/alpha.js

@@ -9,12 +9,21 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get ResetToDefault () {
+        return _alpha.ResetToDefault;
+    },
+    get applyTemplate () {
+        return applyTemplate;
+    },
     get getBrandTemplateMetadata () {
         return getBrandTemplateMetadata;
     },
     get initAppElement () {
         return initAppElement;
     },
+    get openDesign () {
+        return openDesign;
+    },
     get requestAutofillDesign () {
         return requestAutofillDesign;
     },
@@ -23,6 +32,7 @@ _export(exports, {
     }
 });
 const _version = require("./version");
+const _alpha = require('../../api/design/types/design_interaction/document/alpha');
 _export_star(require("./public"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
@@ -41,4 +51,6 @@ const initAppElement = canva_sdk.design.v2.designInteraction.initAppElement;
 const requestAutofillDesign = canva_sdk.design.v2.autofill.requestAutofillDesign;
 const requestBrandTemplates = canva_sdk.design.v2.designInteraction.requestBrandTemplates;
 const getBrandTemplateMetadata = canva_sdk.design.v2.designInteraction.getBrandTemplateMetadata;
+const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
+const applyTemplate = canva_sdk.design.v2.designInteraction.applyTemplate;
 window.__canva__?.sdkRegistration?.registerPackageVersion('design', _version.LATEST_VERSION_ALPHA, 'alpha');

package/lib/cjs/sdk/design/fake/fake_design_interaction_client.js

@@ -37,6 +37,12 @@ class FakeDesignInteractionClient {
             ]
         };
     }
+    async applyTemplate(options) {
+        await this.delay();
+        return {
+            status: 'completed'
+        };
+    }
     async getBrandTemplateMetadata(id) {
         await this.delay();
         return {
@@ -410,10 +416,18 @@ const fakeAsyncOperations = {
         ];
     }
 };
+const fakeTimingAccessor = {
+    get: ()=>({
+            delayInSeconds: 0,
+            durationInSeconds: 'until_end_of_page'
+        }),
+    set: async ()=>{}
+};
 const fakeOpenDesignHelpers = {
     elementStateBuilder: fakeElementStateBuilder,
     group: fakeAsyncOperations.group,
     ungroup: fakeAsyncOperations.ungroup,
+    timingFor: (_elementRef)=>fakeTimingAccessor,
     snapshot: ()=>{
         return {};
     }

package/lib/cjs/sdk/design/version.js

@@ -21,4 +21,4 @@ _export(exports, {
 });
 const LATEST_VERSION = '2.8.0';
 const LATEST_VERSION_BETA = '2.7.6-beta.2';
-const LATEST_VERSION_ALPHA = '2.8.1-alpha.0';
+const LATEST_VERSION_ALPHA = '2.8.1-alpha.1';

package/lib/esm/api/design/types/design_interaction/document/alpha.js

@@ -0,0 +1 @@
+export const ResetToDefault = Symbol.for('$$canva_reset_to_default');

package/lib/esm/sdk/design/alpha.js

@@ -3,5 +3,8 @@ export const initAppElement = canva_sdk.design.v2.designInteraction.initAppEleme
 export const requestAutofillDesign = canva_sdk.design.v2.autofill.requestAutofillDesign;
 export const requestBrandTemplates = canva_sdk.design.v2.designInteraction.requestBrandTemplates;
 export const getBrandTemplateMetadata = canva_sdk.design.v2.designInteraction.getBrandTemplateMetadata;
+export const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
+export const applyTemplate = canva_sdk.design.v2.designInteraction.applyTemplate;
+export { ResetToDefault } from '../../api/design/types/design_interaction/document/alpha';
 export * from './public';
 window.__canva__?.sdkRegistration?.registerPackageVersion('design', LATEST_VERSION_ALPHA, 'alpha');

package/lib/esm/sdk/design/fake/fake_design_interaction_client.js

@@ -16,6 +16,12 @@ export class FakeDesignInteractionClient {
             ]
         };
     }
+    async applyTemplate(options) {
+        await this.delay();
+        return {
+            status: 'completed'
+        };
+    }
     async getBrandTemplateMetadata(id) {
         await this.delay();
         return {
@@ -389,10 +395,18 @@ const fakeAsyncOperations = {
         ];
     }
 };
+const fakeTimingAccessor = {
+    get: ()=>({
+            delayInSeconds: 0,
+            durationInSeconds: 'until_end_of_page'
+        }),
+    set: async ()=>{}
+};
 export const fakeOpenDesignHelpers = {
     elementStateBuilder: fakeElementStateBuilder,
     group: fakeAsyncOperations.group,
     ungroup: fakeAsyncOperations.ungroup,
+    timingFor: (_elementRef)=>fakeTimingAccessor,
     snapshot: ()=>{
         return {};
     }

package/lib/esm/sdk/design/version.js

@@ -1,3 +1,3 @@
 export const LATEST_VERSION = '2.8.0';
 export const LATEST_VERSION_BETA = '2.7.6-beta.2';
-export const LATEST_VERSION_ALPHA = '2.8.1-alpha.0';
+export const LATEST_VERSION_ALPHA = '2.8.1-alpha.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/design",
-  "version": "2.8.1-alpha.0",
+  "version": "2.8.1-alpha.1",
   "description": "The Canva Apps SDK design library",
   "author": "Canva Pty Ltd.",
   "license": "SEE LICENSE IN LICENSE.md FILE",