@canva/design 2.7.6-beta.1 → 2.7.6-beta.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.7.6-beta.2 - 2026-02-01
+
+### Added
+
+- Beta version of `getDesignMetadata` has been evolved to include `page type` and `page title` for supported page types.
+
 ## 2.7.6-beta.1 - 2026-01-18
 
 ### Added

package/beta.d.ts

@@ -1,3 +1,27 @@
+/**
+ * @beta
+ * Information about a page within a design with fixed or unbounded dimensions.
+ */
+export declare type AbsolutePageMetadata = {
+    /**
+     * The type of page.
+     */
+    type: 'absolute';
+    /**
+     * 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;
+    /**
+     * The name of the page.
+     * @remarks
+     * This is optional and will be empty if the user hasn't set a title.
+     */
+    title?: string;
+};
+
 /**
  * Adds an audio track to the user's design.
  * @public
@@ -880,18 +904,18 @@ export declare type Bounds = {
 export declare type Box = Point & (WidthAndHeight | Width | Height);
 
 /**
- * @beta
+ * @public
  * An alias for the BulkCreateLauncher interface, providing access to bulk create related functionality
  */
 export declare const bulkCreate: BulkCreateLauncher;
 
 /**
- * @beta
+ * @public
  * Provides methods for launching the bulk create panel.
  */
 export declare type BulkCreateLauncher = {
     /**
-     * @beta
+     * @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.
@@ -2701,7 +2725,7 @@ export declare namespace DesignEditing {
 export declare type DesignElement = ImageElement | VideoElement | EmbedElement | TextElement | ShapeElement | GroupElement | RichtextElement | TableElement;
 
 /**
- * @public
+ * @beta
  * Information about the design.
  */
 export declare type DesignMetadata = {
@@ -2946,6 +2970,48 @@ export declare type DesignSelection = {
      * });
      * ```
      *
+     * @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";
@@ -3498,17 +3564,8 @@ export declare const getCurrentPageContext: () => Promise<PageContext>;
 export declare const getDefaultPageDimensions: () => Promise<Dimensions | undefined>;
 
 /**
- * @public
+ * @beta
  * 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>;
 
@@ -3779,7 +3836,7 @@ export declare type InlineFormatting = {
 };
 
 /**
- * @beta
+ * @public
  * Options for configuring the bulk create panel.
  */
 export declare type LaunchBulkCreateOpts = {
@@ -3790,7 +3847,7 @@ export declare type LaunchBulkCreateOpts = {
 };
 
 /**
- * @beta
+ * @public
  * Options for configuring the publish menu.
  */
 export declare type LaunchPublishOpts = {
@@ -4021,18 +4078,10 @@ export declare type PageDimensions = {
 };
 
 /**
- * @public
- * Information about a page.
+ * @beta
+ * Information about a page within a design.
  */
-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;
-};
+export declare type PageMetadata = AbsolutePageMetadata | UnsupportedPageMetadata;
 
 /**
  * @public
@@ -4110,18 +4159,18 @@ declare type Point = {
 declare type Primitive = undefined | null | number | boolean | string;
 
 /**
- * @beta
+ * @public
  * An alias for the PublishLauncher interface, providing access to design publishing related functionality
  */
 export declare const publish: PublishLauncher;
 
 /**
- * @beta
+ * @public
  * Provides methods for launching the publish menu
  */
 export declare type PublishLauncher = {
     /**
-     * @beta
+     * @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.
@@ -5139,6 +5188,17 @@ export declare interface UI {
  */
 export declare const ui: UI;
 
+/**
+ * @beta
+ * Pages that do not have fixed or unbounded dimensions currently do not return metadata.
+ */
+export declare type UnsupportedPageMetadata = {
+    /**
+     * The type of page.
+     */
+    type: 'unsupported';
+};
+
 /**
  * @public
  * A data type that can be used in app element data.

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

@@ -9,20 +9,17 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get bulkCreate () {
-        return bulkCreate;
-    },
     get editContent () {
         return editContent;
     },
+    get getDesignMetadata () {
+        return getDesignMetadata;
+    },
     get getDesignTemplateMetadata () {
         return getDesignTemplateMetadata;
     },
     get openDesign () {
         return openDesign;
-    },
-    get publish () {
-        return publish;
     }
 });
 const _version = require("./version");
@@ -41,8 +38,7 @@ function _export_star(from, to) {
     return from;
 }
 const { canva_sdk } = window;
-const publish = canva_sdk.design.v2.designInteraction.publish;
-const bulkCreate = canva_sdk.design.v2.designInteraction.bulkCreate;
+const getDesignMetadata = canva_sdk.design.v2.designInteraction.getDesignMetadata;
 function editContent(options, callback) {
     return canva_sdk.design.v2.designInteraction.editContent(options, (session)=>callback(session));
 }

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

@@ -57,12 +57,25 @@ class FakeBetaDesignInteractionClient extends _fake_design_interaction_client.Fa
             }
         });
     }
-    constructor(...args){
-        super(...args), this.publish = {
-            launch: ()=>this.delay()
-        }, this.bulkCreate = {
-            launch: ()=>this.delay()
-        };
+    getDesignMetadata() {
+        return Promise.resolve({
+            title: 'title',
+            defaultPageDimensions: {
+                width: 800,
+                height: 600
+            },
+            pageMetadata: [
+                {
+                    title: 'title',
+                    type: 'absolute',
+                    pageDimensions: {
+                        width: 800,
+                        height: 600
+                    }
+                }
+            ],
+            durationInSeconds: 30
+        });
     }
 }
 const fakePageRef = {

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

@@ -36,19 +36,23 @@ class FakeDesignInteractionClient {
             },
             pageMetadata: [
                 {
+                    type: 'absolute',
                     dimensions: {
                         width: 800,
                         height: 600
-                    }
+                    },
+                    title: 'page1'
+                },
+                {
+                    type: 'unsupported'
                 },
                 {
+                    type: 'absolute',
                     dimensions: {
                         width: 300,
                         height: 900
-                    }
-                },
-                {
-                    dimensions: undefined
+                    },
+                    title: undefined
                 }
             ],
             durationInSeconds: 30
@@ -154,6 +158,12 @@ class FakeDesignInteractionClient {
                 return ()=>{};
             }
         };
+        this.publish = {
+            launch: ()=>this.delay()
+        };
+        this.bulkCreate = {
+            launch: ()=>this.delay()
+        };
     }
 }
 const fakeBounds = {

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

@@ -24,6 +24,9 @@ _export(exports, {
     get addPage () {
         return addPage;
     },
+    get bulkCreate () {
+        return bulkCreate;
+    },
     get createRichtextRange () {
         return createRichtextRange;
     },
@@ -51,6 +54,9 @@ _export(exports, {
     get overlay () {
         return overlay;
     },
+    get publish () {
+        return publish;
+    },
     get requestExport () {
         return requestExport;
     },
@@ -83,3 +89,5 @@ const getDesignMetadata = canva_sdk.design.v2.designInteraction.getDesignMetadat
 const createRichtextRange = canva_sdk.design.v2.designInteraction.createRichtextRange;
 const editContent = canva_sdk.design.v2.designInteraction.editContent;
 const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
+const publish = canva_sdk.design.v2.designInteraction.publish;
+const bulkCreate = canva_sdk.design.v2.designInteraction.bulkCreate;

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

@@ -20,5 +20,5 @@ _export(exports, {
     }
 });
 const LATEST_VERSION = '2.7.5';
-const LATEST_VERSION_BETA = '2.7.6-beta.1';
+const LATEST_VERSION_BETA = '2.7.6-beta.2';
 const LATEST_VERSION_ALPHA = 'NONE';

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

@@ -1,7 +1,6 @@
 import { LATEST_VERSION_BETA } from './version';
 const { canva_sdk } = window;
-export const publish = canva_sdk.design.v2.designInteraction.publish;
-export const bulkCreate = canva_sdk.design.v2.designInteraction.bulkCreate;
+export const getDesignMetadata = canva_sdk.design.v2.designInteraction.getDesignMetadata;
 export function editContent(options, callback) {
     return canva_sdk.design.v2.designInteraction.editContent(options, (session)=>callback(session));
 }

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

@@ -47,12 +47,25 @@ class FakeBetaDesignInteractionClient extends FakeDesignInteractionClient {
             }
         });
     }
-    constructor(...args){
-        super(...args), this.publish = {
-            launch: ()=>this.delay()
-        }, this.bulkCreate = {
-            launch: ()=>this.delay()
-        };
+    getDesignMetadata() {
+        return Promise.resolve({
+            title: 'title',
+            defaultPageDimensions: {
+                width: 800,
+                height: 600
+            },
+            pageMetadata: [
+                {
+                    title: 'title',
+                    type: 'absolute',
+                    pageDimensions: {
+                        width: 800,
+                        height: 600
+                    }
+                }
+            ],
+            durationInSeconds: 30
+        });
     }
 }
 const fakePageRef = {

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

@@ -15,19 +15,23 @@ export class FakeDesignInteractionClient {
             },
             pageMetadata: [
                 {
+                    type: 'absolute',
                     dimensions: {
                         width: 800,
                         height: 600
-                    }
+                    },
+                    title: 'page1'
+                },
+                {
+                    type: 'unsupported'
                 },
                 {
+                    type: 'absolute',
                     dimensions: {
                         width: 300,
                         height: 900
-                    }
-                },
-                {
-                    dimensions: undefined
+                    },
+                    title: undefined
                 }
             ],
             durationInSeconds: 30
@@ -133,6 +137,12 @@ export class FakeDesignInteractionClient {
                 return ()=>{};
             }
         };
+        this.publish = {
+            launch: ()=>this.delay()
+        };
+        this.bulkCreate = {
+            launch: ()=>this.delay()
+        };
     }
 }
 const fakeBounds = {

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

@@ -17,3 +17,5 @@ export const getDesignMetadata = canva_sdk.design.v2.designInteraction.getDesign
 export const createRichtextRange = canva_sdk.design.v2.designInteraction.createRichtextRange;
 export const editContent = canva_sdk.design.v2.designInteraction.editContent;
 export const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
+export const publish = canva_sdk.design.v2.designInteraction.publish;
+export const bulkCreate = canva_sdk.design.v2.designInteraction.bulkCreate;

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

@@ -1,3 +1,3 @@
 export const LATEST_VERSION = '2.7.5';
-export const LATEST_VERSION_BETA = '2.7.6-beta.1';
+export const LATEST_VERSION_BETA = '2.7.6-beta.2';
 export const LATEST_VERSION_ALPHA = 'NONE';

package/package.json

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