@canva/cli 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/base/backend/base_backend/create.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { UserAuthError } from "@canva/app-middleware";
+import { TokenVerificationError } from "@canva/app-middleware";
 import debug from "debug";
 import express from "express";
 import type { NextFunction, Request, Response } from "express";
@@ -65,7 +65,7 @@ export function createBaseServer(router: express.Router): BaseServer {
   // default error handler
   app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
     // Handle authentication errors from @canva/app-middleware
-    if (err instanceof UserAuthError) {
+    if (err instanceof TokenVerificationError) {
       res.status(err.statusCode).json({
         error: err.code,
         message: err.message,

package/templates/base/styles/components.css

@@ -36,21 +36,3 @@
 .scrollContainer:focus-within::-webkit-scrollbar-thumb {
   visibility: visible;
 }
-
-/* Main container for the content publisher preview UI */
-.previewContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-/* Wrapper for the content publisher post preview */
-.previewWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(400px + 32px + 2px); /* Image width + padding + border */
-}

package/templates/common/jest.setup.ts

@@ -4,6 +4,7 @@
 import * as asset from "@canva/asset/test";
 import * as design from "@canva/design/test";
 import * as error from "@canva/error/test";
+import * as intents from "@canva/intents/test";
 import * as platform from "@canva/platform/test";
 import * as user from "@canva/user/test";
 
@@ -14,6 +15,7 @@ import * as user from "@canva/user/test";
 asset.initTestEnvironment();
 design.initTestEnvironment();
 error.initTestEnvironment();
+intents.initTestEnvironment();
 platform.initTestEnvironment();
 user.initTestEnvironment();
 
@@ -23,9 +25,9 @@ user.initTestEnvironment();
 */
 jest.mock("@canva/asset");
 jest.mock("@canva/design");
+jest.mock("@canva/intents");
 jest.mock("@canva/platform");
 jest.mock("@canva/user");
-
 /*
   Important: @canva/error should not be mocked
   Use it to simulate API error responses from other mocks by throwing CanvaError instances

package/templates/content_publisher/package.json

@@ -25,7 +25,7 @@
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
     "@canva/error": "^2.2.0",
-    "@canva/intents": "^2.0.2-beta.3",
+    "@canva/intents": "^2.1.0",
     "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "react": "^19.2.3",

package/templates/content_publisher/src/intents/content_publisher/index.tsx

@@ -18,7 +18,7 @@ const intl = initIntl();
 // Render the settings UI where users configure publishing options
 function renderSettingsUi({
   updatePublishSettings,
-  registerOnSettingsUiContextChange,
+  registerOnContextChange,
 }: RenderSettingsUiRequest) {
   const root = createRoot(document.getElementById("root") as Element);
   root.render(
@@ -26,7 +26,7 @@ function renderSettingsUi({
       <AppUiProvider>
         <SettingsUi
           updatePublishSettings={updatePublishSettings}
-          registerOnSettingsUiContextChange={registerOnSettingsUiContextChange}
+          registerOnContextChange={registerOnContextChange}
         />
       </AppUiProvider>
     </AppI18nProvider>,

package/templates/content_publisher/src/intents/content_publisher/post_preview.tsx

@@ -32,20 +32,28 @@ export const PostPreview = ({
 
   const caption = settings?.caption;
 
+  // TODO: You should update this value to match the visuals you're hoping to achieve with your export preview
+  // Image width + padding + border
+  const previewWidth = 400 + 32 + 2;
+
   return (
-    <Box
-      className={styles.wrapper}
-      background="surface"
-      borderRadius="large"
-      padding="2u"
-      border="standard"
-    >
-      <Rows spacing="2u">
-        <UserInfo isLoading={isLoading} username={username} />
-        <ImagePreview previewMedia={previewMedia} />
-        <Caption isLoading={isLoading} caption={caption} />
-      </Rows>
-    </Box>
+    <div style={{ width: previewWidth }}>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        background="surface"
+        borderRadius="large"
+        padding="2u"
+        border="standard"
+      >
+        <Rows spacing="2u">
+          <UserInfo isLoading={isLoading} username={username} />
+          <ImagePreview previewMedia={previewMedia} />
+          <Caption isLoading={isLoading} caption={caption} />
+        </Rows>
+      </Box>
+    </div>
   );
 };
 
@@ -118,13 +126,15 @@ const ImagePreview = ({
         </div>
       ) : (
         <div className={styles.imageRow} style={{ width: fullWidth }}>
-          {media?.previews.map((p) => {
-            return (
-              <div key={p.id} className={styles.image}>
-                <PreviewRenderer preview={p} />
-              </div>
-            );
-          })}
+          {media?.previews
+            .filter((p) => p.kind !== "email")
+            .map((p) => {
+              return (
+                <div key={p.id} className={styles.image}>
+                  <PreviewRenderer preview={p} />
+                </div>
+              );
+            })}
         </div>
       )}
     </Box>
@@ -133,6 +143,10 @@ const ImagePreview = ({
 
 // Renders individual preview based on its type and status
 const PreviewRenderer = ({ preview }: { preview: Preview }) => {
+  if (preview.kind === "email") {
+    return null;
+  }
+
   const intl = useIntl();
   // Handle different preview states
   if (preview.status === "loading") {

package/templates/content_publisher/src/intents/content_publisher/preview_ui.tsx

@@ -1,3 +1,4 @@
+import { Box } from "@canva/app-ui-kit";
 import type { OutputType, PreviewMedia } from "@canva/intents/content";
 import { useEffect, useState } from "react";
 import * as styles from "../../../styles/preview_ui.css";
@@ -40,7 +41,15 @@ export const PreviewUi = ({ registerOnPreviewChange }: PreviewUiProps) => {
   const publishSettings = parsePublishSettings(publishRef);
 
   return (
-    <div className={styles.container}>
+    <Box
+      className={styles.container}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      width="full"
+      height="full"
+    >
       {outputType?.id === "post" && (
         <PostPreview
           previewMedia={previewMedia}
@@ -48,6 +57,6 @@ export const PreviewUi = ({ registerOnPreviewChange }: PreviewUiProps) => {
           username={username}
         />
       )}
-    </div>
+    </Box>
   );
 };

package/templates/content_publisher/src/intents/content_publisher/settings_ui.tsx

@@ -1,10 +1,10 @@
 import { FormField, Rows, Text, TextInput } from "@canva/app-ui-kit";
 import type {
   PublishRefValidityState,
+  PublishSettingsSettingsUiContext,
   RenderSettingsUiRequest,
-  SettingsUiContext,
 } from "@canva/intents/content";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 import * as styles from "styles/components.css";
 import type { PublishSettings } from "./types";
@@ -12,20 +12,35 @@ import type { PublishSettings } from "./types";
 // Settings UI component for configuring publish settings
 export const SettingsUi = ({
   updatePublishSettings,
-  registerOnSettingsUiContextChange,
+  registerOnContextChange,
 }: RenderSettingsUiRequest) => {
   const intl = useIntl();
   const [settings, setSettings] = useState<PublishSettings>({ caption: "" });
   const [settingsUiContext, setSettingsUiContext] =
-    useState<SettingsUiContext | null>(null);
+    useState<PublishSettingsSettingsUiContext | null>(null);
 
   // Listen for settings UI context changes (e.g., when output type changes)
   useEffect(() => {
-    const dispose = registerOnSettingsUiContextChange((context) => {
-      setSettingsUiContext(context);
+    const dispose = registerOnContextChange({
+      onContextChange: (context) => {
+        if (context.reason !== "publish_settings") return;
+        setSettingsUiContext(context);
+      },
     });
     return dispose;
-  }, [registerOnSettingsUiContextChange]);
+  }, [registerOnContextChange]);
+
+  // Helper function to both set the settings locally and propagate them to Canva
+  const setAndPropagateSettings = useCallback(
+    (updatedSettings: PublishSettings) => {
+      setSettings(updatedSettings);
+      updatePublishSettings({
+        publishRef: JSON.stringify(updatedSettings),
+        validityState: validatePublishRef(updatedSettings),
+      });
+    },
+    [updatePublishSettings],
+  );
 
   return (
     <div className={styles.scrollContainer}>
@@ -43,12 +58,7 @@ export const SettingsUi = ({
               {...props}
               value={settings.caption}
               onChange={(caption) => {
-                const updatedSettings = { ...settings, caption };
-                setSettings(updatedSettings);
-                updatePublishSettings({
-                  publishRef: JSON.stringify(settings),
-                  validityState: validatePublishRef(settings),
-                });
+                setAndPropagateSettings({ ...settings, caption });
               }}
             />
           )}

package/templates/content_publisher/styles/components.css

@@ -36,21 +36,3 @@
 .scrollContainer:focus-within::-webkit-scrollbar-thumb {
   visibility: visible;
 }
-
-/* Main container for the content publisher preview UI */
-.previewContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-/* Wrapper for the content publisher post preview */
-.previewWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(400px + 32px + 2px); /* Image width + padding + border */
-}

package/templates/content_publisher/styles/preview_ui.css

@@ -1,13 +1,3 @@
-/* Main container for the preview UI */
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
 /* Scale down preview on mobile devices */
 @media (max-width: 600px) {
   .container {
@@ -15,14 +5,6 @@
   }
 }
 
-/* Wrapper for the social media post preview */
-.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(400px + 32px + 2px); /* Image width + padding + border */
-}
-
 /* User profile section styling */
 .user {
   display: flex;
@@ -38,12 +20,6 @@
   transform-origin: top left;
 }
 
-.avatarImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 /* Text placeholder for loading states */
 .textPlaceholder {
   min-width: calc(8 * 20);
@@ -62,15 +38,6 @@
   display: flex;
 }
 
-/* Aspect ratio helpers for different image formats */
-.aspect-1-1 {
-  padding-top: 100%;
-}
-
-.aspect-3-4 {
-  padding-top: 133.33%;
-}
-
 /* Individual image and placeholder styling */
 .imagePlaceholder,
 .image {
@@ -80,9 +47,3 @@
   display: inline-block;
   position: relative;
 }
-
-/* Icon placeholder styling */
-.iconPlaceholder {
-  width: 24px;
-  height: 24px;
-}

package/templates/dam/package.json

@@ -21,12 +21,12 @@
     "@canva/app-components": "^2.1.0",
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-middleware": "^0.0.0-beta.4",
+    "@canva/app-middleware": "^0.0.0-beta.5",
     "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
     "@canva/error": "^2.2.0",
-    "@canva/intents": "^2.0.0",
+    "@canva/intents": "^2.1.0",
     "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "cookie-parser": "1.4.7",

package/templates/dam/src/intents/design_editor/app.tsx

@@ -8,7 +8,7 @@ import * as styles from "./index.css";
 export function App() {
   const config = useConfig();
   return (
-    <Box className={styles.rootWrapper}>
+    <Box className={styles.rootWrapper} height="full">
       <SearchableListView
         config={config}
         findResources={findResources}

package/templates/dam/src/intents/design_editor/index.css

@@ -1,10 +1,3 @@
 .rootWrapper {
-  height: 100%;
   overflow-y: hidden;
 }
-
-.centerInPage {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}

package/templates/dam/utils/backend/base_backend/create.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { UserAuthError } from "@canva/app-middleware";
+import { TokenVerificationError } from "@canva/app-middleware";
 import debug from "debug";
 import express from "express";
 import type { NextFunction, Request, Response } from "express";
@@ -65,7 +65,7 @@ export function createBaseServer(router: express.Router): BaseServer {
   // default error handler
   app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
     // Handle authentication errors from @canva/app-middleware
-    if (err instanceof UserAuthError) {
+    if (err instanceof TokenVerificationError) {
       res.status(err.statusCode).json({
         error: err.code,
         message: err.message,

package/templates/data_connector/package.json

@@ -25,7 +25,7 @@
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
     "@canva/error": "^2.2.0",
-    "@canva/intents": "^2.0.0",
+    "@canva/intents": "^2.1.0",
     "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "react": "^19.2.3",

package/templates/data_connector/styles/components.css

@@ -36,21 +36,3 @@
 .scrollContainer:focus-within::-webkit-scrollbar-thumb {
   visibility: visible;
 }
-
-/* Main container for the content publisher preview UI */
-.previewContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-/* Wrapper for the content publisher post preview */
-.previewWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(400px + 32px + 2px); /* Image width + padding + border */
-}

package/templates/gen_ai/package.json

@@ -20,12 +20,12 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-middleware": "^0.0.0-beta.4",
+    "@canva/app-middleware": "^0.0.0-beta.5",
     "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
     "@canva/error": "^2.2.0",
-    "@canva/intents": "^2.0.0",
+    "@canva/intents": "^2.1.0",
     "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "cookie-parser": "1.4.7",

package/templates/gen_ai/styles/components.css

@@ -36,21 +36,3 @@
 .scrollContainer:focus-within::-webkit-scrollbar-thumb {
   visibility: visible;
 }
-
-/* Main container for the content publisher preview UI */
-.previewContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-/* Wrapper for the content publisher post preview */
-.previewWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(400px + 32px + 2px); /* Image width + padding + border */
-}

package/templates/gen_ai/utils/backend/base_backend/create.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { UserAuthError } from "@canva/app-middleware";
+import { TokenVerificationError } from "@canva/app-middleware";
 import debug from "debug";
 import express from "express";
 import type { NextFunction, Request, Response } from "express";
@@ -65,7 +65,7 @@ export function createBaseServer(router: express.Router): BaseServer {
   // default error handler
   app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
     // Handle authentication errors from @canva/app-middleware
-    if (err instanceof UserAuthError) {
+    if (err instanceof TokenVerificationError) {
       res.status(err.statusCode).json({
         error: err.code,
         message: err.message,

package/templates/hello_world/package.json

@@ -25,7 +25,7 @@
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
     "@canva/error": "^2.2.0",
-    "@canva/intents": "^2.0.0",
+    "@canva/intents": "^2.1.0",
     "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "react": "^19.2.3",

package/templates/hello_world/styles/components.css

@@ -36,21 +36,3 @@
 .scrollContainer:focus-within::-webkit-scrollbar-thumb {
   visibility: visible;
 }
-
-/* Main container for the content publisher preview UI */
-.previewContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-/* Wrapper for the content publisher post preview */
-.previewWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(400px + 32px + 2px); /* Image width + padding + border */
-}

package/templates/mls/jest.setup.ts

@@ -4,6 +4,7 @@
 import * as asset from "@canva/asset/test";
 import * as design from "@canva/design/test";
 import * as error from "@canva/error/test";
+import * as intents from "@canva/intents/test";
 import * as platform from "@canva/platform/test";
 import * as user from "@canva/user/test";
 import { TextEncoder } from "util";
@@ -18,6 +19,7 @@ global.TextEncoder = TextEncoder as unknown as typeof global.TextEncoder;
 asset.initTestEnvironment();
 design.initTestEnvironment();
 error.initTestEnvironment();
+intents.initTestEnvironment();
 platform.initTestEnvironment();
 user.initTestEnvironment();
 
@@ -27,9 +29,9 @@ user.initTestEnvironment();
 */
 jest.mock("@canva/asset");
 jest.mock("@canva/design");
+jest.mock("@canva/intents");
 jest.mock("@canva/platform");
 jest.mock("@canva/user");
-
 /*
   Important: @canva/error should not be mocked
   Use it to simulate API error responses from other mocks by throwing CanvaError instances

package/templates/mls/package.json

@@ -27,7 +27,7 @@
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
     "@canva/error": "^2.2.0",
-    "@canva/intents": "^2.0.0",
+    "@canva/intents": "^2.1.0",
     "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "@tanstack/react-query": "5.87.1",

package/templates/mls/styles/components.css

@@ -36,21 +36,3 @@
 .scrollContainer:focus-within::-webkit-scrollbar-thumb {
   visibility: visible;
 }
-
-/* Main container for the content publisher preview UI */
-.previewContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-/* Wrapper for the content publisher post preview */
-.previewWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(400px + 32px + 2px); /* Image width + padding + border */
-}