@canva/design 2.4.0 → 2.4.1-beta.2

package/{index.d.ts → beta.d.ts}

@@ -383,6 +383,730 @@ export declare type Coordinates = {
  */
 export declare const createRichtextRange: () => RichtextRange;
 
+/**
+ * @beta
+ * Describes a part of a design.
+ */
+export declare type DesignContext = DesignContextOptions["type"];
+
+/**
+ * @beta
+ * Options for configuring which part of a design to read.
+ */
+declare type DesignContextOptions = {
+  /**
+   * The type of context.
+   */
+  type: "current_page";
+};
+
+/**
+ * @beta
+ * Provides methods for reading and updating the structure and content of a design.
+ */
+export declare namespace DesignEditing {
+  /**
+   * @beta
+   * A snapshot containing a fragment of a design's structure and content.
+   */
+  export type DesignDraft<D> = Readonly<D> & {
+    /**
+     * Saves any changes made to the draft.
+     *
+     * @remarks
+     * - Any changes to the draft are only reflected in the design after this method is called.
+     * - Once this method is called, further changes to the draft are not possible.
+     */
+    save(): Promise<void>;
+  };
+  /**
+   * @beta
+   * Options for creating an image fill in the element builder
+   */
+  export type ImageFillOpts = Partial<ImageFill> &
+    Required<Pick<ImageFill, "type" | "imageRef">>;
+  /**
+   * @beta
+   * Options for creating a video fill in the element builder
+   */
+  export type VideoFillOpts = Partial<VideoFill> &
+    Required<Pick<VideoFill, "type" | "videoRef">>;
+  /**
+   * @beta
+   * Options for creating a media fill in the element builder
+   */
+  export type MediaFillOpts = ImageFillOpts | VideoFillOpts;
+  /**
+   * @beta
+   * Options for creating a fill in the element builder
+   */
+  export type FillOpts =
+    | {
+        color: ColorFillOpts;
+        media?: MediaFillOpts;
+      }
+    | {
+        color?: ColorFillOpts;
+        media: MediaFillOpts;
+      };
+  /**
+   * @beta
+   */
+  export type ColorFillOpts = Exclude<ColorFill, Unsupported>;
+  /**
+   * @beta
+   * Options for creating a stroke in the element builder
+   */
+  export type StrokeOpts = Pick<Stroke, "weight"> & {
+    color: ColorFillOpts;
+  };
+  /**
+   * @beta
+   * Options for creating a shape path in the element builder
+   */
+  export type PathOpts = Pick<Path, "d"> & {
+    fill?: FillOpts;
+    stroke?: StrokeOpts;
+  };
+  /**
+   * @beta
+   * Options for creating a rect element.
+   */
+  export type CreateRectElementOpts = Required<
+    Pick<RectElement, "top" | "left" | "width" | "height">
+  > & {
+    fill?: FillOpts;
+  } & {
+    stroke?: StrokeOpts;
+  } & Partial<Omit<RectElement, "fill" | "stroke" | "type">>;
+  /**
+   * @beta
+   * Options for creating a shape element.
+   */
+  export type CreateShapeElementOpts = Required<
+    Pick<ShapeElement, "top" | "left" | "width" | "height" | "viewBox">
+  > & {
+    paths: PathOpts[];
+  } & Partial<Omit<ShapeElement, "type" | "paths">>;
+  /**
+   * @beta
+   * Options for creating an embed element.
+   */
+  export type CreateEmbedElementOpts = Required<
+    Pick<EmbedElement, "top" | "left" | "width" | "height" | "url">
+  > &
+    Partial<Omit<EmbedElement, "type">>;
+  /**
+   * @beta
+   * Options for creating a text element.
+   */
+  export type CreateTextElementOpts = Required<
+    Pick<TextElement, "top" | "left" | "width" | "text">
+  > &
+    Partial<Omit<TextElement, "type" | "height">>;
+  /**
+   * @beta
+   * Provides methods for creating elements.
+   *
+   * @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.
+   */
+  export interface ElementBuilder {
+    /**
+     * Creates a rect element.
+     * @param opts - Options for creating the rect element.
+     */
+    createRectElement(opts: CreateRectElementOpts): RectElement;
+    /**
+     * Creates a shape element.
+     * @param opts - Options for creating the shape element.
+     */
+    createShapeElement(opts: CreateShapeElementOpts): ShapeElement;
+    /**
+     * Creates an embed element.
+     * @param opts - Options for creating the embed element.
+     */
+    createEmbedElement(opts: CreateEmbedElementOpts): EmbedElement;
+    /**
+     * Creates a text element.
+     * @param opts - Options for creating the text element.
+     */
+    createTextElement(opts: CreateTextElementOpts): TextElement;
+    /**
+     * Creates a richtext range.
+     */
+    createRichtextRange(): RichtextRange;
+    /**
+     * Creates a clone of an element.
+     * @returns a new element with the same properties as the argument.
+     */
+    cloneElement(element: RectElement): RectElement;
+    cloneElement(element: ShapeElement): ShapeElement;
+    cloneElement(element: EmbedElement): EmbedElement;
+    cloneElement(element: TextElement): TextElement;
+    cloneElement(
+      element: RectElement | ShapeElement | EmbedElement | TextElement,
+    ): RectElement | ShapeElement | EmbedElement | TextElement;
+  }
+  /**
+   * @beta
+   * The result of reading part of a design when the context is the current page.
+   */
+  export type CurrentPageResult = DesignDraft<{
+    /**
+     * The current page of the design.
+     */
+    page: FixedPage;
+  }>;
+  /**
+   * @beta
+   * The result of reading part of a design.
+   */
+  export type DesignOpenResult = CurrentPageResult;
+  /**
+   * A function called for each item in the list.
+   *
+   * @param item - The current item in the list.
+   * @param index - The index of the current item.
+   */
+  export type ForEachCallback<T> = (item: T, index: number) => 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<T> = (item: T) => 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<T, C extends T> = (item: T) => item is C;
+  /**
+   * A list that cannot be changed.
+   */
+  export interface ReadableList<T> {
+    /**
+     * 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 T[];
+    /**
+     * Executes a function for each item in the list.
+     *
+     * @param callback - The function to run for each item.
+     */
+    forEach(callback: ForEachCallback<T>): 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 T>(filter: TypeFilterPredicate<T, 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<T>): readonly T[];
+  }
+  /**
+   * @beta
+   * A list of items that can be changed.
+   */
+  export interface MutableList<T> {
+    /**
+     * 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: T | undefined, item: T): T | 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: T | undefined, item: T): T | 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: T | undefined, item: T): 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: T | undefined, item: T): void;
+    /**
+     * Removes an item from the list.
+     *
+     * @param item - The item to remove from the list.
+     */
+    delete(item: T): void;
+  }
+  /**
+   * @beta
+   * A list of items that can be read and updated.
+   */
+  export interface List<T> extends ReadableList<T>, MutableList<T> {}
+  /**
+   * @beta
+   * Represents an element that's not supported by the Apps SDK.
+   */
+  export interface Unsupported {
+    /**
+     * The type of element.
+     */
+    readonly type: "unsupported";
+  }
+  /**
+   * @beta
+   * A single valid character in a hex code.
+   */
+  export type Hex = `123456790abcdef`[number];
+  /**
+   * @beta
+   * A six-character hexadecimal color code prefixed with a `#`.
+   */
+  export type HexCode = `#${Hex}${Hex}${Hex}${Hex}${Hex}${Hex}`;
+  /**
+   * @beta
+   * A set of dimensions.
+   */
+  export interface Dimensions {
+    /**
+     * A width, in pixels.
+     */
+    readonly width: number;
+    /**
+     * A height, in pixels.
+     */
+    readonly height: number;
+  }
+  /**
+   * @beta
+   * An image that fills the interior of a path.
+   */
+  export interface ImageFill {
+    /**
+     * The type of media.
+     */
+    readonly 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;
+  }
+  /**
+   * @beta
+   * A video that fills the interior of a path.
+   */
+  export interface VideoFill {
+    /**
+     * The type of media.
+     */
+    readonly 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;
+  }
+  /**
+   * @beta
+   * A media item that fills the interior of a path.
+   */
+  export type MediaFill = ImageFill | VideoFill;
+  /**
+   * @beta
+   * A solid color that fills the interior of a path.
+   */
+  export interface SolidFill {
+    /**
+     * The type of color.
+     */
+    readonly type: "solid";
+    /**
+     * The color of the fill, as a hex code.
+     *
+     * @remarks
+     * - Must be six characters long.
+     * - Must start with a `#`.
+     * - Must use lowercase letters.
+     */
+    color: HexCode;
+  }
+  /**
+   * @beta
+   * A color that fills the interior of a path.
+   */
+  export type ColorFill = SolidFill | Unsupported;
+  /**
+   * @beta
+   * Describes how a path is filled with color or media.
+   *
+   * @remarks
+   * If both `media` and `color` are defined, `media` takes precedence.
+   */
+  export interface Fill {
+    /**
+     * The media fill for the path, if any.
+     */
+    media: MediaFill | undefined;
+    /**
+     * The color fill for the path, if any.
+     */
+    color: ColorFill | undefined;
+  }
+  /**
+   * @beta
+   * The scale and cropping of a shape.
+   *
+   * @remarks
+   * This is similar to the `viewBox` attribute of an `SVGElement`.
+   */
+  export type AlignedBox = {
+    /**
+     * 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;
+  };
+  /**
+   * @beta
+   * A path that defines the structure of a shape element.
+   */
+  export interface 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: Fill;
+    /**
+     * The stroke (outline) of the path, if any.
+     */
+    readonly stroke: Stroke | undefined;
+  }
+  /**
+   * @beta
+   * Represents an outline, such as the border of an element.
+   */
+  export interface Stroke {
+    /**
+     * The weight (thickness) of the stroke.
+     *
+     * @remarks
+     * - Minimum: 0
+     * - Maximum: 100
+     */
+    weight: number;
+    /**
+     * The color of the stroke.
+     */
+    color: ColorFill;
+  }
+  /**
+   * @beta
+   * The basic properties of an element.
+   *
+   * @remarks
+   * These properties are shared by all elements in a design.
+   */
+  export interface Element extends Dimensions {
+    /**
+     * 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;
+  }
+  /**
+   * @beta
+   * Represents a rectangular element.
+   */
+  export interface Rect {
+    /**
+     * The type of content.
+     */
+    readonly type: "rect";
+    /**
+     * The appearance of the rectangle's interior.
+     */
+    readonly fill: Fill;
+    /**
+     * The outline of the rectangle.
+     */
+    readonly stroke: Stroke;
+  }
+  /**
+   * @beta
+   * Represents a vector shape element.
+   */
+  export interface Shape {
+    /**
+     * The type of content.
+     */
+    readonly type: "shape";
+    /**
+     * The scale and cropping of the shape.
+     */
+    viewBox: AlignedBox;
+    /**
+     * 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: ReadableList<Path>;
+  }
+  /**
+   * @beta
+   * Represents group content.
+   */
+  export interface Group<C> {
+    /**
+     * The type of content.
+     */
+    readonly type: "group";
+    /**
+     * The elements that exist within the group.
+     */
+    readonly contents: ReadableList<C>;
+  }
+  /**
+   * @beta
+   * Represents rich media content.
+   */
+  export interface Embed {
+    /**
+     * 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;
+  }
+  /**
+   * @beta
+   * Represents text content.
+   */
+  export interface Text {
+    /**
+     * The type of content.
+     */
+    readonly type: "text";
+    /**
+     * The text content.
+     */
+    readonly text: RichtextRange;
+  }
+  /**
+   * @beta
+   * An element that renders a rectangle.
+   *
+   * @remarks
+   * The rectangle can be filled with image content, video content, or a solid color.
+   */
+  export interface RectElement extends Rect, Element {}
+  /**
+   * @beta
+   * An element that renders a vector shape.
+   */
+  export interface ShapeElement extends Shape, Element {}
+  /**
+   * @beta
+   * An element that renders a group of other elements.
+   */
+  export interface GroupElement extends Group<GroupContentElement>, Element {}
+  /**
+   * @beta
+   * An element that embeds rich media, such as a YouTube video.
+   */
+  export interface EmbedElement extends Embed, Element {}
+  /**
+   * @beta
+   * An element that renders text content.
+   */
+  export interface TextElement extends Text, Element {}
+  /**
+   * @beta
+   * An element that is not supported by the Apps SDK.
+   */
+  export interface UnsupportedElement extends Unsupported, Element {}
+  /**
+   * @beta
+   * An element that can exist in a group element.
+   */
+  export type GroupContentElement =
+    | RectElement
+    | ShapeElement
+    | EmbedElement
+    | TextElement
+    | UnsupportedElement;
+  /**
+   * @beta
+   * An element that can exist on a fixed page.
+   */
+  export type FixedElement =
+    | RectElement
+    | ShapeElement
+    | GroupElement
+    | EmbedElement
+    | TextElement
+    | UnsupportedElement;
+  /**
+   * @beta
+   * A page with fixed dimensions.
+   */
+  export interface FixedPage {
+    /**
+     * The type of page.
+     */
+    readonly type: "fixed";
+    /**
+     * 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: List<FixedElement>;
+  }
+  /**
+   * @beta
+   * A page in a design.
+   */
+  export type Page = FixedPage | Unsupported;
+
+  {
+  }
+}
+
 /**
  * @public
  * An element that's natively supported by the Canva editor.
@@ -397,6 +1121,62 @@ export declare type DesignElement =
   | RichtextElement
   | TableElement;
 
+/**
+ * @beta
+ * 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<PageContext>;
+  /**
+   * 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;
+};
+
+/**
+ * @beta
+ * A callback for reading and updating part of a design.
+ * @param draft - The result of reading part of a design.
+ * @param helpers - Helper methods for reading and updating the design.
+ */
+export declare type DesignOpenCallback = (
+  draft: DesignEditing.DesignOpenResult,
+  helpers: {
+    /**
+     * Provides methods for creating elements.
+     */
+    elementBuilder: DesignEditing.ElementBuilder;
+  },
+) => Promise<void> | void;
+
+/**
+ * @beta
+ * 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.
@@ -797,6 +1577,12 @@ export declare const getDefaultPageDimensions: () => Promise<
   Dimensions | undefined
 >;
 
+/**
+ * @beta
+ * Retrieves information about the design.
+ */
+export declare const getDesignMetadata: () => Promise<DesignMetadata>;
+
 /**
  * @public
  * Retrieves a signed JWT that contains the Design ID, App ID and User ID.
@@ -1137,6 +1923,23 @@ export declare type NativeVideoElementWithBox = VideoElementAtPoint;
  */
 declare type ObjectPrimitive = Boolean | String;
 
+/**
+ * @beta
+ * 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: (
+    draft: DesignEditing.DesignOpenResult,
+    helpers: {
+      elementBuilder: DesignEditing.ElementBuilder;
+    },
+  ) => Promise<void> | void,
+) => Promise<void>;
+
 /**
  * @public
  * An alias for the DesignOverlay interface, providing access to design overlay related functionality
@@ -1169,7 +1972,7 @@ export declare type OverlayOpenableEvent<Target extends OverlayTarget> = {
            * @remarks
            * This can be any type of structured data.
            */
-          launchParameters?: any;
+          launchParameters?: unknown;
         }) => Promise<AppProcessId>;
       };
 }[Target];
@@ -1797,6 +2600,11 @@ export declare type TextDragConfig = {
    * @defaultValue "none"
    */
   decoration?: "none" | "underline";
+  /**
+   * @beta
+   * A unique identifier that points to a font asset in Canva's backend.
+   */
+  fontRef?: FontRef;
 };
 
 /**
@@ -1851,7 +2659,7 @@ export declare interface UI {
    * @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 HTMLElement>(
+  startDrag<E extends Element>(
     event: DragStartEvent<E>,
     dragData:
       | TextDragConfig
@@ -1867,7 +2675,7 @@ export declare interface UI {
    * @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 HTMLElement>(
+  startDragToPoint<E extends Element>(
     event: DragStartEvent<E>,
     dragData:
       | TextDragConfig
@@ -1883,7 +2691,7 @@ export declare interface UI {
    * @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 HTMLElement>(
+  startDragToCursor<E extends Element>(
     event: DragStartEvent<E>,
     dragData:
       | EmbedDragConfig

package/lib/cjs/sdk/design/{index.js → beta.js}

@@ -1,7 +1,21 @@
-"use strict"
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getDesignMetadata: function() {
+        return getDesignMetadata;
+    },
+    openDesign: function() {
+        return openDesign;
+    }
+});
 _export_star(require("./public"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
@@ -17,4 +31,7 @@ function _export_star(from, to) {
     return from;
 }
 var _window___canva___sdkRegistration, _window___canva__;
-(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.4.0', 'ga');
+const { canva_sdk } = window;
+const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
+const getDesignMetadata = canva_sdk.design.v2.designInteraction.getDesignMetadata;
+(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.5.0', 'beta');

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

@@ -9,12 +9,44 @@ Object.defineProperty(exports, "FakeDesignInteractionClient", {
     }
 });
 class FakeDesignInteractionClient {
+    async getDesignTitle() {
+        await this.delay();
+        return 'title';
+    }
     async getDesignToken() {
         await this.delay();
         return {
             token: 'token'
         };
     }
+    async getDesignMetadata() {
+        await this.delay();
+        return {
+            title: 'title',
+            defaultPageDimensions: {
+                width: 800,
+                height: 600
+            },
+            pageMetadata: [
+                {
+                    dimensions: {
+                        width: 800,
+                        height: 600
+                    }
+                },
+                {
+                    dimensions: {
+                        width: 300,
+                        height: 900
+                    }
+                },
+                {
+                    dimensions: undefined
+                }
+            ],
+            durationInSeconds: 30
+        };
+    }
     async addNativeElement(element) {
         await this.delay();
     }
@@ -90,6 +122,9 @@ class FakeDesignInteractionClient {
             elementBuilder: fakeElementBuilder
         });
     }
+    async openDesign2(options, callback) {
+        throw new Error('Not yet implemented');
+    }
     constructor(delay){
         this.delay = delay;
         this.selection = {

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

@@ -0,0 +1,18 @@
+"use strict"
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./index"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/sdk/utils/canva_sdk.js

@@ -12,6 +12,9 @@ _export(exports, {
     assertIsTestCanvaSdk: function() {
         return assertIsTestCanvaSdk;
     },
+    bindMethodsToClients: function() {
+        return bindMethodsToClients;
+    },
     getCanvaSdk: function() {
         return getCanvaSdk;
     },
@@ -34,8 +37,29 @@ function assertIsTestCanvaSdk() {
     }
 }
 function injectFakeAPIClients(clients) {
+    bindMethodsToClients(clients);
     window.canva_sdk = {
         ...getCanvaSdk(),
         ...clients
     };
 }
+function bindMethodsToClients(objectToBind) {
+    if (typeof objectToBind !== 'object' || objectToBind == null)
+        return;
+    const classMethods = new Set();
+    let currentPrototype = Object.getPrototypeOf(objectToBind);
+    while(currentPrototype && currentPrototype !== Object.prototype){
+        Object.getOwnPropertyNames(currentPrototype).forEach((method)=>classMethods.add(method));
+        currentPrototype = Object.getPrototypeOf(currentPrototype);
+    }
+    classMethods.delete('constructor');
+    for (const method of classMethods) {
+        const originalFn = objectToBind[method];
+        if (typeof originalFn === 'function') Object.defineProperty(objectToBind, method, {
+            value: (...args)=>{
+                return originalFn.call(objectToBind, ...args);
+            }
+        });
+    }
+    Object.values(objectToBind).forEach(bindMethodsToClients);
+}

package/lib/esm/sdk/design/{index.js → beta.js}

@@ -1,3 +1,6 @@
 var _window___canva___sdkRegistration, _window___canva__;
+const { canva_sdk } = window;
+export const openDesign = canva_sdk.design.v2.designInteraction.openDesign;
+export const getDesignMetadata = canva_sdk.design.v2.designInteraction.getDesignMetadata;
 export * from './public';
-(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.4.0', 'ga');
+(_window___canva__ = window.__canva__) === null || _window___canva__ === void 0 ? void 0 : (_window___canva___sdkRegistration = _window___canva__.sdkRegistration) === null || _window___canva___sdkRegistration === void 0 ? void 0 : _window___canva___sdkRegistration.registerPackageVersion('design', '2.5.0', 'beta');

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

@@ -1,10 +1,42 @@
 export class FakeDesignInteractionClient {
+    async getDesignTitle() {
+        await this.delay();
+        return 'title';
+    }
     async getDesignToken() {
         await this.delay();
         return {
             token: 'token'
         };
     }
+    async getDesignMetadata() {
+        await this.delay();
+        return {
+            title: 'title',
+            defaultPageDimensions: {
+                width: 800,
+                height: 600
+            },
+            pageMetadata: [
+                {
+                    dimensions: {
+                        width: 800,
+                        height: 600
+                    }
+                },
+                {
+                    dimensions: {
+                        width: 300,
+                        height: 900
+                    }
+                },
+                {
+                    dimensions: undefined
+                }
+            ],
+            durationInSeconds: 30
+        };
+    }
     async addNativeElement(element) {
         await this.delay();
     }
@@ -80,6 +112,9 @@ export class FakeDesignInteractionClient {
             elementBuilder: fakeElementBuilder
         });
     }
+    async openDesign2(options, callback) {
+        throw new Error('Not yet implemented');
+    }
     constructor(delay){
         this.delay = delay;
         this.selection = {

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

@@ -0,0 +1 @@
+export * from './index';

package/lib/esm/sdk/utils/canva_sdk.js

@@ -13,8 +13,29 @@ export function assertIsTestCanvaSdk() {
     }
 }
 export function injectFakeAPIClients(clients) {
+    bindMethodsToClients(clients);
     window.canva_sdk = {
         ...getCanvaSdk(),
         ...clients
     };
 }
+export function bindMethodsToClients(objectToBind) {
+    if (typeof objectToBind !== 'object' || objectToBind == null)
+        return;
+    const classMethods = new Set();
+    let currentPrototype = Object.getPrototypeOf(objectToBind);
+    while(currentPrototype && currentPrototype !== Object.prototype){
+        Object.getOwnPropertyNames(currentPrototype).forEach((method)=>classMethods.add(method));
+        currentPrototype = Object.getPrototypeOf(currentPrototype);
+    }
+    classMethods.delete('constructor');
+    for (const method of classMethods) {
+        const originalFn = objectToBind[method];
+        if (typeof originalFn === 'function') Object.defineProperty(objectToBind, method, {
+            value: (...args)=>{
+                return originalFn.call(objectToBind, ...args);
+            }
+        });
+    }
+    Object.values(objectToBind).forEach(bindMethodsToClients);
+}

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@canva/design",
-  "version": "2.4.0",
+  "version": "2.4.1-beta.2",
   "description": "The Canva Apps SDK design library",
   "author": "Canva Pty Ltd.",
   "license": "SEE LICENSE IN LICENSE.md FILE",
   "peerDependencies": {
     "@canva/error": "^2.0.0"
   },
-  "main": "./lib/cjs/sdk/design/index.js",
-  "module": "./lib/esm/sdk/design/index.js",
+  "main": "./lib/cjs/sdk/design/beta.js",
+  "module": "./lib/esm/sdk/design/beta.js",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "require": "./lib/cjs/sdk/design/index.js",
-      "import": "./lib/esm/sdk/design/index.js"
+      "types": "./beta.d.ts",
+      "require": "./lib/cjs/sdk/design/beta.js",
+      "import": "./lib/esm/sdk/design/beta.js"
     },
     "./test": {
-      "types": "./test/index.d.ts",
-      "require": "./lib/cjs/sdk/design/test/index.js",
-      "import": "./lib/esm/sdk/design/test/index.js"
+      "types": "./test/beta.d.ts",
+      "require": "./lib/cjs/sdk/design/test/beta.js",
+      "import": "./lib/esm/sdk/design/test/beta.js"
     }
   },
-  "typings": "./index.d.ts"
-}
+  "typings": "./beta.d.ts"
+}