@canva/intents 2.4.1-beta.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +41 -18
  2. package/asset/index.d.ts +1 -1
  3. package/content/index.d.ts +1738 -1
  4. package/data/index.d.ts +1229 -1
  5. package/design/index.d.ts +41 -1
  6. package/index.d.ts +3138 -1
  7. package/lib/cjs/sdk/intents/asset/index.js +1 -15
  8. package/lib/cjs/sdk/intents/fake/{create_beta.js → create.js} +6 -9
  9. package/lib/cjs/sdk/intents/index.js +4 -2
  10. package/lib/cjs/sdk/intents/test/index.js +14 -13
  11. package/lib/cjs/sdk/intents/version.js +1 -1
  12. package/lib/esm/sdk/intents/asset/index.js +1 -1
  13. package/lib/esm/sdk/intents/fake/{create_beta.js → create.js} +4 -7
  14. package/lib/esm/sdk/intents/index.js +3 -1
  15. package/lib/esm/sdk/intents/test/index.js +9 -1
  16. package/lib/esm/sdk/intents/version.js +1 -1
  17. package/package.json +23 -23
  18. package/test/index.d.ts +11 -1
  19. package/asset/beta.d.ts +0 -190
  20. package/beta.d.ts +0 -3084
  21. package/content/beta.d.ts +0 -1687
  22. package/data/beta.d.ts +0 -1229
  23. package/design/beta.d.ts +0 -41
  24. package/lib/cjs/sdk/intents/asset/beta.js +0 -13
  25. package/lib/cjs/sdk/intents/beta.js +0 -20
  26. package/lib/cjs/sdk/intents/content/beta.js +0 -20
  27. package/lib/cjs/sdk/intents/data/beta.js +0 -20
  28. package/lib/cjs/sdk/intents/design/beta.js +0 -20
  29. package/lib/cjs/sdk/intents/test/beta.js +0 -19
  30. package/lib/esm/sdk/intents/asset/beta.js +0 -3
  31. package/lib/esm/sdk/intents/beta.js +0 -3
  32. package/lib/esm/sdk/intents/content/beta.js +0 -3
  33. package/lib/esm/sdk/intents/data/beta.js +0 -3
  34. package/lib/esm/sdk/intents/design/beta.js +0 -3
  35. package/lib/esm/sdk/intents/test/beta.js +0 -9
  36. package/test/beta.d.ts +0 -11
@@ -1 +1,1738 @@
1
- export * from "./beta";
1
+ /**
2
+ * @public
3
+ * {@link PublishContentError} indicating a custom error occurred in your app's implementation.
4
+ *
5
+ * Return this for application-specific errors such as:
6
+ *
7
+ * - Validation failures
8
+ * - Authentication errors
9
+ * - Rate limiting
10
+ * - Platform-specific restrictions
11
+ *
12
+ * @example Returning custom error with message
13
+ * ```ts
14
+ * if (userQuotaExceeded) {
15
+ * return {
16
+ * status: 'app_error',
17
+ * message: 'You have reached your monthly publish limit. Please upgrade your plan.'
18
+ * };
19
+ * }
20
+ * ```
21
+ */
22
+ export declare type AppError = {
23
+ status: 'app_error';
24
+ /**
25
+ * (required) The raw error message, for logging purposes. It will not display in the UI.
26
+ * To display custom error messages in the UI use `localizedMessageId`.
27
+ *
28
+ * This should typically be the javascript error.message or a REST JSON error message
29
+ * body passed without modification.
30
+ *
31
+ * WARNING: Do not include personally identifiable information (PII) in this
32
+ * message, such as names, emails, usernames, etc.
33
+ */
34
+ message: string;
35
+ /**
36
+ * (optional) Message ID of the translated error message that will be
37
+ * displayed to the user. The message ID should be present and uploaded in
38
+ * your translation file. If omitted, Canva will display a generic error
39
+ * message.
40
+ */
41
+ localizedMessageId?: string;
42
+ /** HTTP status code, if applicable */
43
+ httpCode?: number;
44
+ /**
45
+ * Used only by app developer. Canva does not use this value. Use this to pass
46
+ * additional information like JSON to your settings frame.
47
+ */
48
+ appDefinedPayload?: string;
49
+ /**
50
+ * (optional) Source of the error if it relates to a component on the Canva
51
+ * UI. When present, the error may render near a relevant Canva component.
52
+ * When omitted, the cause is considered unspecified or "generic".
53
+ */
54
+ errorCause?: ErrorCause;
55
+ };
56
+
57
+ /**
58
+ * @public
59
+ * Base file requirement interface.
60
+ */
61
+ declare interface BaseFileRequirement {
62
+ /**
63
+ * File format for this requirement.
64
+ */
65
+ format: PublishFileFormat;
66
+
67
+ }
68
+
69
+ /**
70
+ * @public
71
+ * Base interface for exported files.
72
+ */
73
+ export declare interface BaseOutputFile {
74
+ /**
75
+ * File format.
76
+ */
77
+ format: PublishFileFormat;
78
+ /**
79
+ * URL to download the exported file.
80
+ *
81
+ * Your app should download from this URL and upload to your platform.
82
+ */
83
+ url: string;
84
+ /**
85
+ * Metadata about the source content used to create this exported file.
86
+ */
87
+ contentMetadata: ContentMetadata;
88
+ }
89
+
90
+ /**
91
+ * @public
92
+ * Base interface for all preview types.
93
+ *
94
+ * Contains common properties shared by all preview types.
95
+ */
96
+ export declare interface BasePreview {
97
+ /**
98
+ * Unique identifier for this preview.
99
+ *
100
+ * Use this ID with `requestPreviewUpgrade` to upgrade video thumbnails.
101
+ */
102
+ id: string;
103
+ /**
104
+ * Type of media in this preview.
105
+ */
106
+ kind: PreviewKind;
107
+ /**
108
+ * Current state of the preview.
109
+ */
110
+ status: PreviewStatus;
111
+ }
112
+
113
+ /**
114
+ * @public
115
+ * Base metadata available for a selected media item in a media slot.
116
+ *
117
+ * Canva populates this when returning {@link OutputType} in Settings UI contexts.
118
+ * Apps should not set this value.
119
+ */
120
+ export declare interface BaseSelection {
121
+ /**
122
+ * Metadata about the source content represented by this selection.
123
+ */
124
+ selectionMetadata?: readonly SelectionMetadata[];
125
+ }
126
+
127
+ /**
128
+ * @public
129
+ * Metadata about the source content used to create an exported file.
130
+ */
131
+ export declare type ContentMetadata = DesignContentMetadata;
132
+
133
+ /**
134
+ * @public
135
+ * Main interface for implementing the ContentPublisher intent.
136
+ *
137
+ * Implementing the ContentPublisher intent enables apps to publish contents to external platforms.
138
+ * This allows users to configure publish settings, preview their designs, and share with others.
139
+ *
140
+ * The publishing flow follows this process:
141
+ *
142
+ * 1. User initiates publish action
143
+ * 2. Your app provides publish configuration via `getPublishConfiguration`
144
+ * 3. User selects an output type
145
+ * 4. Your app renders settings UI via `renderSettingsUi`
146
+ * 5. Your app renders preview UI via `renderPreviewUi`
147
+ * 6. User reviews settings and preview
148
+ * 7. Your app publishes the content via `publishContent`
149
+ */
150
+ export declare type ContentPublisherIntent = {
151
+ /**
152
+ * Provides the configuration for the publishing platform.
153
+ *
154
+ * This action is called when the user initiates the publish flow and needs to
155
+ * select an output type for the target platform.
156
+ *
157
+ * Use this to define different publishing configurations for your platform,
158
+ * such as social media posts, videos, or other output types.
159
+ *
160
+ * @returns A promise resolving to the publish configuration or an error
161
+ *
162
+ * @example Defining publish configuration for a social media platform
163
+ * ```ts
164
+ * import type { GetPublishConfigurationResponse } from '@canva/intents/content';
165
+ *
166
+ * async function getPublishConfiguration(): Promise<GetPublishConfigurationResponse> {
167
+ * return {
168
+ * status: 'completed',
169
+ * outputTypes: [
170
+ * {
171
+ * id: 'instagram_post',
172
+ * displayName: 'Instagram Post',
173
+ * mediaSlots: [
174
+ * {
175
+ * id: 'main_image',
176
+ * displayName: 'Post Image',
177
+ * fileCount: { min: 1, max: 10 },
178
+ * accepts: {
179
+ * image: { format: 'jpg', aspectRatio: { min: 0.8, max: 1.91 } }
180
+ * }
181
+ * }
182
+ * ]
183
+ * }
184
+ * ]
185
+ * };
186
+ * }
187
+ * ```
188
+ */
189
+ getPublishConfiguration: () => Promise<GetPublishConfigurationResponse>;
190
+
191
+ /**
192
+ * Renders a user interface for configuring publish settings.
193
+ *
194
+ * This action is called after the user selects an output type. Your UI should
195
+ * allow users to configure platform-specific settings such as captions, tags,
196
+ * privacy settings, or publishing destinations.
197
+ *
198
+ * Use the `updatePublishSettings` callback to save user settings and validate them.
199
+ * Settings are stored in the `publishRef` string (maximum 32KB).
200
+ *
201
+ * @param request - Configuration and callbacks for the publish settings UI.
202
+ *
203
+ * @example Rendering a settings UI with publish configuration
204
+ * ```ts
205
+ * import { createRoot } from 'react-dom/client';
206
+ * import type { RenderSettingsUiRequest } from '@canva/intents/content';
207
+ *
208
+ * function renderSettingsUi(request: RenderSettingsUiRequest): void {
209
+ * const SettingsUiApp = () => (
210
+ * <AppUiProvider>
211
+ * <SettingsUi request={request} />
212
+ * </AppUiProvider>
213
+ * );
214
+ *
215
+ * createRoot().render(<SettingsUiApp />)
216
+ * }
217
+ * ```
218
+ */
219
+ renderSettingsUi: (request: RenderSettingsUiRequest) => void;
220
+ /**
221
+ * Renders a user interface for previewing the content.
222
+ *
223
+ * This action is called after the settings UI is rendered. Your UI should display
224
+ * a preview of how the content will appear on the target platform.
225
+ *
226
+ * Previews update dynamically as users modify their content or settings. For videos,
227
+ * start with lightweight thumbnails and use `requestPreviewUpgrade` to load full
228
+ * video previews on demand to optimize performance.
229
+ *
230
+ * @param request - Configuration and callbacks for the preview UI.
231
+ *
232
+ * @example Rendering a preview UI with video optimization
233
+ * ```ts
234
+ * import { createRoot } from 'react-dom/client';
235
+ * import type { RenderPreviewUiRequest } from '@canva/intents/content';
236
+ *
237
+ * function renderPreviewUi(request: RenderPreviewUiRequest): void {
238
+ * const PreviewUiApp = () => (
239
+ * <AppUiProvider>
240
+ * <PreviewUi request={request} />
241
+ * </AppUiProvider>
242
+ * );
243
+ *
244
+ * createRoot().render(<PreviewUiApp />)
245
+ * }
246
+ * ```
247
+ */
248
+ renderPreviewUi: (request: RenderPreviewUiRequest) => void;
249
+ /**
250
+ * Publishes the content to the external platform.
251
+ *
252
+ * This action is called when the user confirms the publish action after reviewing
253
+ * settings and preview. Your implementation should send the exported files
254
+ * to your platform's API.
255
+ *
256
+ * The `outputMedia` contains production-ready files that match the requirements
257
+ * specified in your output types. The `publishRef` contains the user's settings
258
+ * from the settings UI.
259
+ *
260
+ * @param request - Parameters for the publish operation.
261
+ * @returns A promise resolving to either a successful result with the published content details or an error.
262
+ *
263
+ * @example Publishing content to an external platform
264
+ * ```ts
265
+ * import type { PublishContentRequest, PublishContentResponse } from '@canva/intents/content';
266
+ *
267
+ * async function publishContent(request: PublishContentRequest): Promise<PublishContentResponse> {
268
+ * const { publishRef, outputType, outputMedia } = request;
269
+ *
270
+ * try {
271
+ * // Parse settings from publishRef
272
+ * const settings = publishRef ? JSON.parse(publishRef) : {};
273
+ *
274
+ * // Upload files to your platform
275
+ * const uploadedFiles = await Promise.all(
276
+ * outputMedia.flatMap(media =>
277
+ * media.files.map(file => uploadFile(file.url))
278
+ * )
279
+ * );
280
+ *
281
+ * // Create post on your platform
282
+ * const result = await createPost({
283
+ * files: uploadedFiles,
284
+ * caption: settings.caption
285
+ * });
286
+ *
287
+ * return {
288
+ * status: 'completed',
289
+ * externalId: result.id,
290
+ * externalUrl: result.url
291
+ * };
292
+ * } catch (error) {
293
+ * return {
294
+ * status: 'remote_request_failed'
295
+ * };
296
+ * }
297
+ * }
298
+ * ```
299
+ */
300
+ publishContent: (request: PublishContentRequest) => Promise<PublishContentResponse>;
301
+
302
+ };
303
+
304
+ /**
305
+ * @public
306
+ * Metadata specific to design content.
307
+ */
308
+ export declare interface DesignContentMetadata {
309
+ type: 'design';
310
+ /**
311
+ * A signed JWT token containing the design id
312
+ */
313
+ designToken: string;
314
+ /**
315
+ * The user given title of the design
316
+ */
317
+ title: string | undefined;
318
+ /**
319
+ * The pages that make up the exported metadata
320
+ */
321
+ pages: OutputPageMetadata[];
322
+
323
+ }
324
+
325
+ /**
326
+ * @public
327
+ * A function that can be called to dispose of a callback.
328
+ */
329
+ export declare type Disposer = () => void;
330
+
331
+ /**
332
+ * @public
333
+ * Exported PDF file ready for publishing.
334
+ *
335
+ * Contains the final PDF document that should be uploaded to your platform.
336
+ * The document format is `pdf_standard` and the file is ready to use.
337
+ */
338
+ export declare type DocumentOutputFile = BaseOutputFile;
339
+
340
+ /**
341
+ * @public
342
+ * Document preview in various states.
343
+ *
344
+ * Documents transition through states: `"loading"` → `"thumbnail"`.
345
+ * Start with a lightweight thumbnail of the first page for quick preview rendering.
346
+ */
347
+ export declare type DocumentPreview = DocumentPreviewLoading | DocumentPreviewThumbnail | DocumentPreviewError;
348
+
349
+ /**
350
+ * @public
351
+ * Document preview that failed to generate.
352
+ *
353
+ * Display an error state to the user.
354
+ */
355
+ export declare interface DocumentPreviewError extends SizedPreview {
356
+ kind: 'document';
357
+ status: 'error';
358
+ /**
359
+ * The error message to display to the user.
360
+ */
361
+ message: string;
362
+ }
363
+
364
+ /**
365
+ * @public
366
+ * Document preview that is currently being generated.
367
+ *
368
+ * Display a loading state until the preview transitions to `"thumbnail"` or `"error"`.
369
+ */
370
+ export declare interface DocumentPreviewLoading extends SizedPreview {
371
+ kind: 'document';
372
+ status: 'loading';
373
+ }
374
+
375
+ /**
376
+ * @public
377
+ * Document preview with first page thumbnail available.
378
+ *
379
+ * This is the initial state for document previews. Show the thumbnail image
380
+ * of the first page along with the page count to give users a preview of
381
+ * the document before publishing.
382
+ */
383
+ export declare interface DocumentPreviewThumbnail extends SizedPreview {
384
+ kind: 'document';
385
+ status: 'thumbnail';
386
+ /**
387
+ * Format of the thumbnail image.
388
+ */
389
+ thumbnailFormat: 'png' | 'jpg';
390
+ /**
391
+ * URL to the first page thumbnail.
392
+ *
393
+ * Display this lightweight image to preview the document content.
394
+ */
395
+ thumbnailUrl: string;
396
+ }
397
+
398
+ /**
399
+ * @public
400
+ * Document file requirements for a media slot.
401
+ *
402
+ * Note: Document output types use image previews (PNG thumbnails) in the preview UI.
403
+ * The actual document file is only generated for the final output in OutputMedia.
404
+ *
405
+ * @example Document requirements
406
+ * ```ts
407
+ * const documentReq: DocumentRequirement = {
408
+ * format: 'pdf_standard',
409
+ * size: 'a4',
410
+ * };
411
+ * ```
412
+ */
413
+ export declare interface DocumentRequirement extends BaseFileRequirement {
414
+ /**
415
+ * Supported document export format.
416
+ * Currently supports PDF standard format.
417
+ */
418
+ format: 'pdf_standard';
419
+ /**
420
+ * The document size of the export file.
421
+ */
422
+ size: DocumentSize;
423
+ }
424
+
425
+ /**
426
+ * @public
427
+ * Selection metadata for a document media item.
428
+ */
429
+ export declare interface DocumentSelection extends BaseSelection {
430
+ kind: 'document';
431
+ }
432
+
433
+ /**
434
+ * @public
435
+ * Document size for document exports.
436
+ */
437
+ export declare type DocumentSize = 'a4' | 'a3' | 'letter' | 'legal';
438
+
439
+ /**
440
+ * @public
441
+ * Exported email file ready for publishing.
442
+ *
443
+ * Contains the final HTML bundle that should be uploaded to your platform.
444
+ */
445
+ export declare type EmailOutputFile = BaseOutputFile;
446
+
447
+ /**
448
+ * @public
449
+ * Email preview in various states.
450
+ *
451
+ * Display a loading state until the preview transitions to `"ready"` or `"error"`.
452
+ */
453
+ export declare type EmailPreview = EmailPreviewLoading | EmailPreviewReady | EmailPreviewError;
454
+
455
+ /**
456
+ * @public
457
+ * Email preview in an error state.
458
+ *
459
+ * Display an error state to the user.
460
+ */
461
+ export declare interface EmailPreviewError extends BasePreview {
462
+ kind: 'email';
463
+ status: 'error';
464
+ message: string;
465
+ }
466
+
467
+ /**
468
+ * @public
469
+ * Email preview in a loading state.
470
+ *
471
+ * Display a loading spinner until the preview transitions to `"ready"` or `"error"`.
472
+ */
473
+ export declare interface EmailPreviewLoading extends BasePreview {
474
+ kind: 'email';
475
+ status: 'loading';
476
+ }
477
+
478
+ /**
479
+ * @public
480
+ * Email preview in a ready state.
481
+ *
482
+ * Display the email preview.
483
+ */
484
+ export declare interface EmailPreviewReady extends BasePreview {
485
+ kind: 'email';
486
+ status: 'ready';
487
+ /**
488
+ * URL to the single html file that represents the email.
489
+ */
490
+ url: string;
491
+ }
492
+
493
+ /**
494
+ * @public
495
+ * Email file requirements for a media slot, currently only supports HTML bundle format.
496
+ *
497
+ * Note: Email output types use html_standalone previews in the preview UI.
498
+ * The actual email file is only generated for the final output in OutputMedia.
499
+ *
500
+ * @example Email bundle requirements
501
+ * ```ts
502
+ * const emailReq: EmailRequirement = {
503
+ * format: 'html_bundle',
504
+ * };
505
+ * ```
506
+ */
507
+ export declare interface EmailRequirement extends BaseFileRequirement {
508
+ format: 'html_bundle' | 'html_standalone';
509
+ }
510
+
511
+ /**
512
+ * @public
513
+ * Selection metadata for an email media item.
514
+ */
515
+ export declare interface EmailSelection extends BaseSelection {
516
+ kind: 'email';
517
+ }
518
+
519
+ /**
520
+ * @public
521
+ *
522
+ * The cause of an error
523
+ */
524
+ export declare type ErrorCause = 'invalid_selection' | 'invalid_format';
525
+
526
+ /**
527
+ * @public
528
+ * Exact value range constraint.
529
+ * @example Exact value range
530
+ * ```ts
531
+ * const exactValue: ValueRange = { exact: 1 }; // Must be exactly 1
532
+ * ```
533
+ */
534
+ export declare type ExactValueRange = {
535
+ exact: number;
536
+ };
537
+
538
+ /**
539
+ * @public
540
+ * Successful response from getting publish configuration.
541
+ */
542
+ export declare type GetPublishConfigurationCompleted = {
543
+ status: 'completed';
544
+ /**
545
+ * Array of available output types for your platform.
546
+ *
547
+ * Define different output types for various content formats that
548
+ * your platform supports (e.g., posts, stories, videos).
549
+ */
550
+ outputTypes: OutputTypeConfiguration[];
551
+ };
552
+
553
+ /**
554
+ * @public
555
+ * {@link GetPublishConfigurationError} error indicating a custom error occurred.
556
+ */
557
+ export declare type GetPublishConfigurationError = AppError;
558
+
559
+ /**
560
+ * @public
561
+ * Response from getting publish configuration.
562
+ */
563
+ export declare type GetPublishConfigurationResponse = GetPublishConfigurationCompleted | GetPublishConfigurationError;
564
+
565
+ /**
566
+ * @public
567
+ * Exported image file ready for publishing.
568
+ */
569
+ export declare interface ImageOutputFile extends BaseOutputFile {
570
+ /**
571
+ * Width of the image in pixels.
572
+ */
573
+ widthPx: number;
574
+ /**
575
+ * Height of the image in pixels.
576
+ */
577
+ heightPx: number;
578
+ }
579
+
580
+ /**
581
+ * @public
582
+ * Image preview in various states.
583
+ */
584
+ export declare type ImagePreview = ImagePreviewLoading | ImagePreviewReady | ImagePreviewError;
585
+
586
+ /**
587
+ * @public
588
+ * Image preview that failed to generate.
589
+ *
590
+ * Display an error state to the user.
591
+ */
592
+ export declare interface ImagePreviewError extends SizedPreview {
593
+ kind: 'image';
594
+ status: 'error';
595
+
596
+ /**
597
+ * The error message to display to the user.
598
+ */
599
+ message: string;
600
+ }
601
+
602
+ /**
603
+ * @public
604
+ * Image preview that is currently being generated.
605
+ *
606
+ * Display a loading state until the preview transitions to `"ready"` or `"error"`.
607
+ */
608
+ export declare interface ImagePreviewLoading extends SizedPreview {
609
+ kind: 'image';
610
+ status: 'loading';
611
+ }
612
+
613
+ /**
614
+ * @public
615
+ * Image preview that is ready to display.
616
+ *
617
+ * Contains the URL to the preview image.
618
+ */
619
+ export declare interface ImagePreviewReady extends SizedPreview {
620
+ kind: 'image';
621
+ status: 'ready';
622
+ /**
623
+ * Image format of the preview.
624
+ */
625
+ format: 'png' | 'jpg';
626
+ /**
627
+ * URL to the preview image.
628
+ *
629
+ * Use this URL to display the preview to users.
630
+ */
631
+ url: string;
632
+ }
633
+
634
+ /**
635
+ * @public
636
+ * Image file requirements for a media slot.
637
+ *
638
+ * Specifies format, aspect ratio, and size constraints for images.
639
+ *
640
+ * @example Image requirements for social media post
641
+ * ```ts
642
+ * const imageReq: ImageRequirement = {
643
+ * format: 'jpg',
644
+ * aspectRatio: { min: 0.8, max: 1.91 },
645
+ * };
646
+ * ```
647
+ */
648
+ export declare type ImageRequirement = BaseFileRequirement & {
649
+ /**
650
+ * Aspect ratio constraint (width / height).
651
+ *
652
+ * Examples:
653
+ * - `{ exact: 16/9 }`: Widescreen (16:9)
654
+ * - `{ min: 0.8, max: 1.91 }`: Instagram range
655
+ */
656
+ aspectRatio?: ValueRange;
657
+ } & ({
658
+ /**
659
+ * JPG image export.
660
+ */
661
+ format: 'jpg';
662
+ } | {
663
+ /**
664
+ * PNG image export.
665
+ */
666
+ format: 'png';
667
+ /**
668
+ * Controls transparent-background support for PNG exports.
669
+ *
670
+ * @remarks
671
+ * - Only applies when `format` is `'png'`
672
+ * - If omitted or `false`, Canva exports a standard opaque PNG
673
+ * - If `true`, Canva shows a `Transparent background` toggle in the publish flow
674
+ * - Users without the required Canva entitlement may be prompted to upgrade before a transparent export is produced
675
+ *
676
+ * @defaultValue false
677
+ */
678
+ allowTransparentBackground?: boolean;
679
+ });
680
+
681
+ /**
682
+ * @public
683
+ * Selection metadata for an image media item.
684
+ */
685
+ export declare interface ImageSelection extends BaseSelection {
686
+ kind: 'image';
687
+ }
688
+
689
+ /**
690
+ * @public
691
+ * Maximum value range constraint.
692
+ * @example Maximum value range
693
+ * ```ts
694
+ * const maxValue: ValueRange = { max: 10 }; // At most 10
695
+ * ```
696
+ */
697
+ export declare type MaxValueRange = {
698
+ max: number;
699
+ };
700
+
701
+ /**
702
+ * @public
703
+ * Metadata about a selected media item in a media slot.
704
+ */
705
+ export declare type MediaSelection = ImageSelection | VideoSelection | DocumentSelection | EmailSelection;
706
+
707
+ /**
708
+ * @public
709
+ * Configuration for a media slot within an output type.
710
+ *
711
+ * Defines what type of media is accepted, requirements, and constraints.
712
+ *
713
+ * @example Image slot with aspect ratio requirements
714
+ * ```ts
715
+ * const thumbnailSlot: MediaSlot = {
716
+ * id: 'thumbnail',
717
+ * displayName: 'Video Thumbnail',
718
+ * fileCount: { exact: 1 },
719
+ * accepts: {
720
+ * image: {
721
+ * format: 'jpg',
722
+ * aspectRatio: { exact: 16/9 },
723
+ * }
724
+ * }
725
+ * };
726
+ * ```
727
+ */
728
+ export declare type MediaSlot = {
729
+ /**
730
+ * Unique identifier for this media slot within the output type.
731
+ */
732
+ id: string;
733
+ /**
734
+ * User-facing name for this media slot.
735
+ *
736
+ * Examples: `"Post Image"`, `"Video Thumbnail"`, `"Main Video"`.
737
+ */
738
+ displayName: string;
739
+ /**
740
+ * Number of files accepted in this slot.
741
+ *
742
+ * Use this to specify single or multiple file requirements.
743
+ * Examples:
744
+ * - `{ exact: 1 }`: Exactly one file
745
+ * - `{ min: 1, max: 10 }`: Between 1 and 10 files
746
+ * - undefined: Any number of files
747
+ */
748
+ fileCount?: ValueRange;
749
+ /**
750
+ * File type requirements for this slot.
751
+ *
752
+ * Note the following behavior:
753
+ *
754
+ * - Provide at least one of `image` or `video`
755
+ * - If both are provided, files for this slot may be either images or videos; each file
756
+ * must satisfy the corresponding requirement for its media type
757
+ * - To restrict the slot to a single media type, provide only that requirement
758
+ * - `fileCount` applies across all files accepted by the slot regardless of media type
759
+ * - Document output types will show image previews (PNG thumbnail) in preview UI
760
+ */
761
+ accepts: {
762
+ image?: ImageRequirement;
763
+ video?: VideoRequirement;
764
+ document?: DocumentRequirement;
765
+ /**
766
+ * Email output types will show a single html file (canva hosted assets) preview in preview UI
767
+ */
768
+ email?: EmailRequirement;
769
+ };
770
+ /**
771
+ * @public
772
+ * Current selection for this slot.
773
+ *
774
+ * Canva populates this only when returning {@link OutputType} in Settings UI contexts
775
+ * such as {@link RenderSettingsUiInvocationContext} and {@link PublishSettingsSettingsUiContext}.
776
+ * Apps should not set this value when defining output types in
777
+ * {@link ContentPublisherIntent.getPublishConfiguration}.
778
+ */
779
+ readonly selection?: readonly MediaSelection[];
780
+ };
781
+
782
+ /**
783
+ * @public
784
+ * Minimum and maximum value range constraint.
785
+ * Ranges are inclusive `(min ≤ value ≤ max)`.
786
+ * @example Minimum and maximum value range
787
+ * ```ts
788
+ * const minMaxValue: ValueRange = { min: 1, max: 10 }; // Between 1 and 10
789
+ * ```
790
+ */
791
+ export declare type MinMaxValueRange = {
792
+ min: number;
793
+ max: number;
794
+ };
795
+
796
+ /**
797
+ * @public
798
+ * Minimum value range constraint.
799
+ * @example Minimum value range
800
+ * ```ts
801
+ * const minValue: ValueRange = { min: 3 }; // At least 3
802
+ * ```
803
+ */
804
+ export declare type MinValueRange = {
805
+ min: number;
806
+ };
807
+
808
+ /** @public */
809
+ export declare type OnContextChange = (context: SettingsUiContext) => void;
810
+
811
+ /**
812
+ * @public
813
+ * Exported file ready for publishing.
814
+ */
815
+ export declare type OutputFile = ImageOutputFile | VideoOutputFile | DocumentOutputFile;
816
+
817
+ /**
818
+ * @public
819
+ * Production-ready exported files for a specific media slot.
820
+ *
821
+ * These are the final files that should be uploaded to your platform.
822
+ */
823
+ export declare type OutputMedia = {
824
+ /**
825
+ * ID of the media slot these files belong to.
826
+ *
827
+ * Matches a media slot ID from your output type definition.
828
+ */
829
+ mediaSlotId: string;
830
+ /**
831
+ * Array of exported files for this media slot.
832
+ *
833
+ * Files match the requirements specified in your media slot configuration.
834
+ */
835
+ files: OutputFile[];
836
+ };
837
+
838
+ /**
839
+ * @public
840
+ * Metadata about a specific page in the exported content.
841
+ */
842
+ export declare type OutputPageMetadata = {
843
+ /**
844
+ * The unique identifier for the page.
845
+ */
846
+ pageId: string | undefined;
847
+ /**
848
+ * The position of the page within the design, starting from 1 for the first page.
849
+ */
850
+ pageNumber: number;
851
+ };
852
+
853
+ /**
854
+ * @public
855
+ * Configuration for an output type.
856
+ *
857
+ * Defines a specific publishing format your platform supports,
858
+ * including what media is required and accepted file types.
859
+ *
860
+ * @example Defining an Instagram post output type
861
+ * ```ts
862
+ * const instagramPost: OutputType = {
863
+ * id: 'instagram_post',
864
+ * displayName: 'Instagram Post',
865
+ * mediaSlots: [
866
+ * {
867
+ * id: 'main_image',
868
+ * displayName: 'Post Image',
869
+ * fileCount: { min: 1, max: 10 },
870
+ * accepts: {
871
+ * image: {
872
+ * format: 'jpg',
873
+ * aspectRatio: { min: 0.8, max: 1.91 },
874
+ * }
875
+ * }
876
+ * }
877
+ * ]
878
+ * };
879
+ * ```
880
+ */
881
+ export declare type OutputType = {
882
+ /**
883
+ * Unique identifier for this output type.
884
+ *
885
+ * Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
886
+ */
887
+ id: string;
888
+ /**
889
+ * User-facing name for this output type.
890
+ *
891
+ * This is displayed to users when selecting where to publish.
892
+ * Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
893
+ */
894
+ displayName: string;
895
+ /**
896
+ * Array of media slots defining what content is needed.
897
+ *
898
+ * Each slot represents a piece of media required for publishing,
899
+ * such as a main image, thumbnail, or video.
900
+ */
901
+ mediaSlots: MediaSlot[];
902
+ };
903
+
904
+ /**
905
+ * @public
906
+ * Configuration for an output type as provided by apps in
907
+ * {@link ContentPublisherIntent.getPublishConfiguration}.
908
+ *
909
+ * This is the authored shape of an output type. It omits the
910
+ * {@link MediaSlot.selection} field which is populated by Canva
911
+ * when returning {@link OutputType} in Settings UI contexts.
912
+ *
913
+ * @example Defining output type configuration for a social media platform
914
+ * ```ts
915
+ * const outputType: OutputTypeConfiguration = {
916
+ * id: 'instagram_post',
917
+ * displayName: 'Instagram Post',
918
+ * mediaSlots: [
919
+ * {
920
+ * id: 'main_image',
921
+ * displayName: 'Post Image',
922
+ * fileCount: { min: 1, max: 10 },
923
+ * accepts: {
924
+ * image: { format: 'jpg', aspectRatio: { min: 0.8, max: 1.91 } }
925
+ * }
926
+ * }
927
+ * ]
928
+ * };
929
+ * ```
930
+ */
931
+ export declare type OutputTypeConfiguration = {
932
+ /**
933
+ * Unique identifier for this output type.
934
+ *
935
+ * Use descriptive IDs like `"instagram_post"` or `"youtube_video"`.
936
+ */
937
+ id: string;
938
+ /**
939
+ * User-facing name for this output type.
940
+ *
941
+ * This is displayed to users when selecting where to publish.
942
+ * Examples: `"Instagram Post"`, `"YouTube Video"`, `"Twitter Post"`.
943
+ */
944
+ displayName: string;
945
+ /**
946
+ * Array of media slots defining what content is needed.
947
+ *
948
+ * Each slot represents a piece of media required for publishing,
949
+ * such as a main image, thumbnail, or video.
950
+ * The {@link MediaSlot.selection} field is omitted here because apps
951
+ * do not provide selection data when defining output types.
952
+ */
953
+ mediaSlots: Omit<MediaSlot, 'selection'>[];
954
+ };
955
+
956
+ /**
957
+ * @public
958
+ * Action to be taken after publishing completes successfully.
959
+ */
960
+ export declare type PostPublishAction = PostPublishActionRedirect;
961
+
962
+ /**
963
+ * @public
964
+ * Redirect action to navigate the user to a URL after publishing.
965
+ *
966
+ * @example Redirecting to content editor
967
+ * ```ts
968
+ * const postPublishAction: PostPublishActionRedirect = {
969
+ * type: 'redirect',
970
+ * url: 'https://example.com/posts/12345/edit'
971
+ * };
972
+ * ```
973
+ */
974
+ export declare type PostPublishActionRedirect = {
975
+ type: 'redirect';
976
+ /**
977
+ * The URL to redirect the user to after publishing.
978
+ */
979
+ url: string;
980
+ };
981
+
982
+ /**
983
+ * @public
984
+ *
985
+ * Prepares a {@link ContentPublisherIntent|Content Publisher Intent}.
986
+ *
987
+ * @example
988
+ * ```tsx
989
+ * import { prepareContentPublisher } from "@canva/intents/content";
990
+ *
991
+ * prepareContentPublisher({
992
+ * getPublishConfiguration: async (params) => {
993
+ * // Implement the logic to get the publish configuration
994
+ * },
995
+ * renderSettingsUi: (params) => {
996
+ * // Implement the UI for settings view
997
+ * },
998
+ * renderPreviewUi: (params) => {
999
+ * // Implement the UI for preview view
1000
+ * },
1001
+ * publishContent: async (params) => {
1002
+ * // Implement the logic to publish the content
1003
+ * },
1004
+ * });
1005
+ * ```
1006
+ */
1007
+ export declare const prepareContentPublisher: (implementation: ContentPublisherIntent) => void;
1008
+
1009
+ /**
1010
+ * @public
1011
+ * Preview item for an image or video.
1012
+ *
1013
+ * Check the `kind` and `status` properties to determine the type and state.
1014
+ */
1015
+ export declare type Preview = ImagePreview | VideoPreview | DocumentPreview | EmailPreview;
1016
+
1017
+ /**
1018
+ * @public
1019
+ * Type of preview media.
1020
+ */
1021
+ export declare type PreviewKind = 'image' | 'video' | 'document' | 'email';
1022
+
1023
+ /**
1024
+ * @public
1025
+ * Preview media for a specific media slot.
1026
+ *
1027
+ * Contains preview URLs and metadata for images or videos in the design.
1028
+ */
1029
+ export declare type PreviewMedia = {
1030
+ /**
1031
+ * ID of the media slot this preview belongs to.
1032
+ *
1033
+ * Matches a media slot ID from your output type definition.
1034
+ */
1035
+ mediaSlotId: string;
1036
+ /**
1037
+ * Array of preview items for this media slot.
1038
+ *
1039
+ * May contain multiple previews if the media slot accepts multiple files.
1040
+ */
1041
+ previews: Preview[];
1042
+ };
1043
+
1044
+ /**
1045
+ * @public
1046
+ * State of a preview item.
1047
+ */
1048
+ export declare type PreviewStatus = 'loading' | 'thumbnail' | 'upgrading' | 'ready' | 'error';
1049
+
1050
+ /**
1051
+ * @public
1052
+ * Successful response from publishing a content.
1053
+ *
1054
+ * @example Basic successful publish
1055
+ * ```ts
1056
+ * return {
1057
+ * status: 'completed',
1058
+ * externalId: 'post_12345',
1059
+ * externalUrl: 'https://example.com/posts/12345'
1060
+ * };
1061
+ * ```
1062
+ *
1063
+ * @example Successful publish with redirect
1064
+ * ```ts
1065
+ * return {
1066
+ * status: 'completed',
1067
+ * externalId: 'video_67890',
1068
+ * externalUrl: 'https://example.com/videos/67890',
1069
+ * postPublishAction: {
1070
+ * type: 'redirect',
1071
+ * url: 'https://example.com/videos/67890/edit'
1072
+ * }
1073
+ * };
1074
+ * ```
1075
+ */
1076
+ export declare type PublishContentCompleted = {
1077
+ status: 'completed';
1078
+ /**
1079
+ * Unique identifier returned from your external platform. You can use this for:
1080
+ *
1081
+ * - Tracking published content
1082
+ * - Fetching insights data for the published content
1083
+ * - Linking back to the content in future operations
1084
+ */
1085
+ externalId?: string;
1086
+ /**
1087
+ * Direct URL to the published content on your platform.
1088
+ *
1089
+ * Users can visit this URL to view their published content.
1090
+ * This may be displayed to users or used for sharing.
1091
+ */
1092
+ externalUrl?: string;
1093
+ /**
1094
+ * Optional action to perform after publishing completes.
1095
+ *
1096
+ * Currently supports redirecting users to a specific URL after publishing.
1097
+ */
1098
+ postPublishAction?: PostPublishAction;
1099
+ };
1100
+
1101
+ /**
1102
+ * @public
1103
+ * Error response from publishing a content.
1104
+ *
1105
+ * Return the appropriate error type based on the failure:
1106
+ *
1107
+ * - `"remote_request_failed"`: Network or API errors with your platform
1108
+ * - `"app_error"`: Custom application errors with optional message
1109
+ */
1110
+ export declare type PublishContentError = RemoteRequestFailedError | AppError;
1111
+
1112
+ /**
1113
+ * @public
1114
+ * Parameters required for publishing the content.
1115
+ * Contains all the information needed to send the content to your external platform.
1116
+ */
1117
+ export declare type PublishContentRequest = {
1118
+ /**
1119
+ * Platform-specific settings reference containing user configurations.
1120
+ *
1121
+ * This is the same reference you saved via `updatePublishSettings` in the settings UI.
1122
+ * Parse this string to retrieve the user's publish settings (e.g., captions, tags, privacy).
1123
+ *
1124
+ * Maximum size: 32KB
1125
+ */
1126
+ publishRef?: string;
1127
+ /**
1128
+ * The output type selected by the user for this publish operation.
1129
+ *
1130
+ * This matches one of the output types you provided in `getPublishConfiguration`.
1131
+ */
1132
+ outputType: OutputTypeConfiguration;
1133
+ /**
1134
+ * Production-ready exported files matching the requirements from your output type.
1135
+ *
1136
+ * These files are ready to upload to your platform and match the format, size,
1137
+ * and aspect ratio requirements specified in your media slots.
1138
+ */
1139
+ outputMedia: OutputMedia[];
1140
+ };
1141
+
1142
+ /**
1143
+ * @public
1144
+ * Response from a publish content operation.
1145
+ *
1146
+ * This can be either a successful completion or an error response.
1147
+ */
1148
+ export declare type PublishContentResponse = PublishContentCompleted | PublishContentError;
1149
+
1150
+ /** @public */
1151
+ export declare type PublishError = {
1152
+ appDefinedPayload?: string;
1153
+ };
1154
+
1155
+ /**
1156
+ * @public
1157
+ * Signals that the publish error was cleared.
1158
+ */
1159
+ export declare type PublishErrorClearedSettingsUiContext = {
1160
+ reason: 'publish_error_cleared';
1161
+ };
1162
+
1163
+ /**
1164
+ * @public
1165
+ * Provides information about an error that occurred in publishContent.
1166
+ */
1167
+ export declare type PublishErrorSettingsUiContext = {
1168
+ reason: 'publish_error';
1169
+ /**
1170
+ * The error that occurred. Undefined means no error occurred or the previous
1171
+ * error was cleared by Canva.
1172
+ */
1173
+ error: PublishError;
1174
+ };
1175
+
1176
+ /**
1177
+ * @public
1178
+ * Supported file formats for publishing.
1179
+ */
1180
+ export declare type PublishFileFormat = 'png' | 'jpg' | 'mp4' | 'pdf_standard' | 'html_bundle' | 'html_standalone';
1181
+
1182
+ /**
1183
+ * @public
1184
+ * Initial payload provided from cache.
1185
+ */
1186
+ export declare type PublishPreviewUiInvocationContext = {
1187
+ /**
1188
+ * Initial preview data and context provided when the preview UI is rendered.
1189
+ */
1190
+ reason: 'publish';
1191
+ /**
1192
+ * Initial preview media to display
1193
+ * This will only be used for scheduling and not caching
1194
+ */
1195
+ previewMedia?: PreviewMedia[];
1196
+ /** Information about the current output type being previewed */
1197
+ outputType?: OutputType;
1198
+ /** Current publish reference, if available */
1199
+ publishRef?: string;
1200
+ };
1201
+
1202
+ /**
1203
+ * @public
1204
+ * Validation state indicating whether publish settings are complete and valid.
1205
+ */
1206
+ export declare type PublishRefValidityState = 'valid' | 'invalid_missing_required_fields' | 'invalid_authentication_required';
1207
+
1208
+ /**
1209
+ * @public
1210
+ * Configuration for publish settings.
1211
+ *
1212
+ * Contains the user's settings and their validation state. Use this to
1213
+ * control whether the publish button is enabled.
1214
+ */
1215
+ export declare type PublishSettings = {
1216
+ /**
1217
+ * Serialized platform-specific settings for publishing.
1218
+ *
1219
+ * Store all information your app needs to publish the content in this string.
1220
+ * This might include:
1221
+ *
1222
+ * - Captions or descriptions
1223
+ * - Tags or hashtags
1224
+ * - Privacy settings
1225
+ * - Publishing destination (account, page, etc.)
1226
+ * - Scheduling information
1227
+ *
1228
+ * This reference will be provided to your `publishContent` method when publishing.
1229
+ *
1230
+ * Maximum size: 32KB
1231
+ *
1232
+ * @example Serializing settings
1233
+ * ```ts
1234
+ * const settings = {
1235
+ * caption: 'Check out my design!',
1236
+ * tags: ['design', 'creative'],
1237
+ * privacy: 'public'
1238
+ * };
1239
+ * const publishRef = JSON.stringify(settings);
1240
+ * ```
1241
+ */
1242
+ publishRef?: string;
1243
+ /**
1244
+ * Validation state of the publish settings.
1245
+ *
1246
+ * Controls whether the publish button is enabled:
1247
+ *
1248
+ * - `"valid"`: Settings are complete and valid, publish button is enabled
1249
+ * - `"invalid_missing_required_fields"`: Required settings are missing, publish button is disabled
1250
+ * - `"invalid_authentication_required"`: User must authenticate before publishing can proceed
1251
+ */
1252
+ validityState: PublishRefValidityState;
1253
+ };
1254
+
1255
+ /**
1256
+ * @public
1257
+ * Provides information about the current state of the settings UI to help
1258
+ * you adapt the interface based on the selected output type.
1259
+ */
1260
+ export declare type PublishSettingsSettingsUiContext = {
1261
+ reason: 'publish_settings';
1262
+ /**
1263
+ * The currently selected output type.
1264
+ *
1265
+ * Use this to customize your settings UI based on the requirements
1266
+ * of different output types.
1267
+ */
1268
+ outputType: OutputType;
1269
+ };
1270
+
1271
+ /**
1272
+ * @public
1273
+ * Initial payload provided from cache.
1274
+ */
1275
+ export declare type PublishSettingsUiInvocationContext = {
1276
+ /**
1277
+ * Initial settings and context provided when the settings UI is rendered.
1278
+ */
1279
+ reason: 'publish';
1280
+ /** Current publish reference to populate the UI, if any exist */
1281
+ publishRef?: string;
1282
+ /** Information about the current output type being configured */
1283
+ outputType?: OutputType;
1284
+ };
1285
+
1286
+ /**
1287
+ * @public
1288
+ * {@link PublishContentError} indicating failure of the remote request to the external platform.
1289
+ *
1290
+ * Return this error for:
1291
+ *
1292
+ * - Network connectivity issues
1293
+ * - API endpoint failures
1294
+ * - HTTP errors from your platform
1295
+ * - Timeout errors
1296
+ *
1297
+ * @example Handling network errors
1298
+ * ```ts
1299
+ * try {
1300
+ * await uploadToExternalPlatform(file);
1301
+ * } catch (error) {
1302
+ * return { status: 'remote_request_failed' };
1303
+ * }
1304
+ * ```
1305
+ */
1306
+ export declare type RemoteRequestFailedError = {
1307
+ status: 'remote_request_failed';
1308
+ };
1309
+
1310
+ /**
1311
+ * @public
1312
+ * Initial payload provided when the preview UI is rendered.
1313
+ * Contains the preview data and settings needed to initialize the preview interface.
1314
+ */
1315
+ export declare type RenderPreviewUiInvocationContext = PublishPreviewUiInvocationContext;
1316
+
1317
+ /**
1318
+ * @public
1319
+ * Configuration required for rendering the preview UI.
1320
+ *
1321
+ * Provides callbacks for managing preview media and responding to preview updates.
1322
+ */
1323
+ export declare type RenderPreviewUiRequest = {
1324
+ /**
1325
+ * @public
1326
+ * The initial preview data and context provided when the preview UI is rendered.
1327
+ *
1328
+ * Contains the initial preview media, output type information, and any existing
1329
+ * publish settings needed to properly display the preview interface.
1330
+ */
1331
+ invocationContext: RenderPreviewUiInvocationContext;
1332
+ /**
1333
+ * Callback to upgrade video thumbnail previews to full video media.
1334
+ *
1335
+ * Call this function when you need full video previews instead of lightweight thumbnails.
1336
+ * This helps optimize performance by deferring full video loading until needed.
1337
+ *
1338
+ * Upgrades may complete asynchronously; listen to `registerOnPreviewChange` for updates
1339
+ * to receive the upgraded video previews.
1340
+ *
1341
+ * @param previewIds - Array of preview IDs to upgrade from thumbnail to full video
1342
+ *
1343
+ * @example Upgrading video previews on user interaction
1344
+ * ```ts
1345
+ * // When user clicks on a video thumbnail, upgrade to full video
1346
+ * if (preview.kind === 'video' && preview.status === 'thumbnail') {
1347
+ * requestPreviewUpgrade([preview.id]);
1348
+ * }
1349
+ * ```
1350
+ */
1351
+ requestPreviewUpgrade: (previewIds: string[]) => void;
1352
+ /**
1353
+ * Registers a callback to be invoked when preview data changes.
1354
+ *
1355
+ * This callback is triggered when:
1356
+ *
1357
+ * - The design content changes
1358
+ * - The output type changes
1359
+ * - Preview media is upgraded from thumbnail to full video
1360
+ * - Export settings are modified
1361
+ *
1362
+ * Use this to update your preview UI in real-time as users modify their design.
1363
+ *
1364
+ * @param callback - The callback invoked when preview data is updated
1365
+ * @returns A disposer function that cleans up the registered callback
1366
+ *
1367
+ * @example Handling preview updates
1368
+ * ```ts
1369
+ * const disposer = registerOnPreviewChange(({ previewMedia, outputType, publishRef }) => {
1370
+ * // Update your preview UI with the new preview media
1371
+ * previewMedia.forEach((media) => {
1372
+ * media.previews.forEach((preview) => {
1373
+ * if (preview.status === 'ready') {
1374
+ * displayPreview(preview);
1375
+ * }
1376
+ * });
1377
+ * });
1378
+ * });
1379
+ *
1380
+ * // Clean up when preview UI is unmounted
1381
+ * onUnmount(() => disposer());
1382
+ * ```
1383
+ */
1384
+ registerOnPreviewChange: (callback: (opts: {
1385
+ previewMedia: PreviewMedia[];
1386
+ /** The output type that the preview data is for */
1387
+ outputType: OutputType;
1388
+ /** The current publish settings reference, if available */
1389
+ publishRef?: string;
1390
+ }) => void) => Disposer;
1391
+ };
1392
+
1393
+ /**
1394
+ * @public
1395
+ * Initial payload provided when the publish settings UI is rendered.
1396
+ * Contains the current settings state needed to initialize the settings interface.
1397
+ */
1398
+ export declare type RenderSettingsUiInvocationContext = PublishSettingsUiInvocationContext;
1399
+
1400
+ /**
1401
+ * @public
1402
+ * Configuration for the publish settings UI.
1403
+ *
1404
+ * This type provides the necessary callbacks and configuration for rendering
1405
+ * a custom publish settings interface where users configure platform-specific options.
1406
+ */
1407
+ export declare type RenderSettingsUiRequest = {
1408
+ /**
1409
+ * @public
1410
+ * The initial settings and context provided when the settings UI is rendered.
1411
+ *
1412
+ * Contains any previously saved publish settings and information about the current output type being configured.
1413
+ * Use this to restore the UI to its previous state or initialise it with appropriate defaults.
1414
+ */
1415
+ invocationContext: RenderSettingsUiInvocationContext;
1416
+ /**
1417
+ * Callback to save and validate the user's publish settings.
1418
+ *
1419
+ * Call this function whenever the user modifies their settings to:
1420
+ *
1421
+ * - Save the settings for later use in `publishContent`
1422
+ * - Validate that required fields are filled
1423
+ * - Enable or disable the publish button based on validity
1424
+ *
1425
+ * Store all necessary publishing information in the `publishRef` string.
1426
+ * This will be provided to your `publishContent` method when the user publishes.
1427
+ *
1428
+ * @param settings - The new publish settings to save
1429
+ * @returns A promise that resolves when the settings are successfully saved
1430
+ * @throws Will throw `CanvaError('bad_request')` if {@link PublishSettings.publishRef} exceeds 32KB.
1431
+ *
1432
+ * @example Updating settings as user types
1433
+ * ```ts
1434
+ * // As user fills in form fields, update settings
1435
+ * function handleCaptionChange(caption: string) {
1436
+ * const settings = { caption, tags: currentTags };
1437
+ * const publishRef = JSON.stringify(settings);
1438
+ *
1439
+ * updatePublishSettings({
1440
+ * publishRef,
1441
+ * validityState: caption ? 'valid' : 'invalid_missing_required_fields'
1442
+ * });
1443
+ * }
1444
+ * ```
1445
+ */
1446
+ updatePublishSettings: (publishSettings: PublishSettings) => Promise<UpdatePublishSettingsResponse>;
1447
+
1448
+ /**
1449
+ * Registers a callback to be invoked when the settings UI context changes.
1450
+ *
1451
+ * This callback is triggered when:
1452
+ * - the user changes the output type in the publish flow.
1453
+ * - an error occurs in the publish flow.
1454
+ *
1455
+ * Use this to respond to Canva changes and update your settings UI accordingly.
1456
+ *
1457
+ * @param opts - The options for registering a callback.
1458
+ * @returns A disposer function that cleans up the registered callback.
1459
+ *
1460
+ * @example Adapting UI for different output types
1461
+ * ```ts
1462
+ * registerOnContextChange({
1463
+ * onContextChange: (ctx) => {
1464
+ * if (ctx.reason === 'publish_settings') {
1465
+ * if (ctx.outputType.id === 'instagram_post') {
1466
+ * showHashtagField();
1467
+ * }
1468
+ * }
1469
+ * if (ctx.reason === 'publish_error') {
1470
+ * setError(ctx.error);
1471
+ * }
1472
+ * }
1473
+ * });
1474
+ * ```
1475
+ */
1476
+ registerOnContextChange: (opts: {
1477
+ onContextChange: OnContextChange;
1478
+ }) => Disposer;
1479
+
1480
+ };
1481
+
1482
+ /**
1483
+ * @public
1484
+ * Metadata specific to design content represented by a media selection.
1485
+ */
1486
+ export declare interface SelectionDesignMetadata {
1487
+ type: 'design';
1488
+ /**
1489
+ * A signed JWT token containing the design id
1490
+ */
1491
+ designToken: string;
1492
+ /**
1493
+ * The user given title of the design
1494
+ */
1495
+ title: string | undefined;
1496
+ }
1497
+
1498
+ /**
1499
+ * @public
1500
+ * Metadata about the source content represented by a media selection.
1501
+ */
1502
+ export declare type SelectionMetadata = SelectionDesignMetadata;
1503
+
1504
+ /**
1505
+ * @public
1506
+ * Context information for the publish settings UI.
1507
+ */
1508
+ export declare type SettingsUiContext = PublishSettingsSettingsUiContext | PublishErrorSettingsUiContext | PublishErrorClearedSettingsUiContext;
1509
+
1510
+ /**
1511
+ * @public
1512
+ * Base interface for all preview types that have a fixed width and height.
1513
+ */
1514
+ export declare interface SizedPreview extends BasePreview {
1515
+ /**
1516
+ * Width of the preview in pixels.
1517
+ */
1518
+ widthPx: number;
1519
+ /**
1520
+ * Height of the preview in pixels.
1521
+ */
1522
+ heightPx: number;
1523
+ }
1524
+
1525
+ /**
1526
+ * @public
1527
+ * Successful response from updating the publish settings.
1528
+ */
1529
+ export declare type UpdatePublishSettingsCompleted = {
1530
+ status: 'completed';
1531
+ };
1532
+
1533
+ /**
1534
+ * @public
1535
+ * Response from updating the publish settings.
1536
+ */
1537
+ export declare type UpdatePublishSettingsResponse = UpdatePublishSettingsCompleted;
1538
+
1539
+ /**
1540
+ * @public
1541
+ * Numeric value range constraint.
1542
+ * Used to specify requirements for aspect ratios, durations, file counts, etc.
1543
+ */
1544
+ export declare type ValueRange = ExactValueRange | MinValueRange | MaxValueRange | MinMaxValueRange;
1545
+
1546
+ /**
1547
+ * @public
1548
+ * Exported video file ready for publishing.
1549
+ */
1550
+ export declare interface VideoOutputFile extends BaseOutputFile {
1551
+ /**
1552
+ * Width of the video in pixels.
1553
+ */
1554
+ widthPx: number;
1555
+ /**
1556
+ * Height of the video in pixels.
1557
+ */
1558
+ heightPx: number;
1559
+ }
1560
+
1561
+ /**
1562
+ * @public
1563
+ * Video preview in various states.
1564
+ *
1565
+ * Videos transition through states: `"loading"` → `"thumbnail"` → `"upgrading"` → `"ready"`.
1566
+ * Start with thumbnails for better performance, then upgrade to full video using `requestPreviewUpgrade`.
1567
+ */
1568
+ export declare type VideoPreview = VideoPreviewLoading | VideoPreviewThumbnail | VideoPreviewUpgrading | VideoPreviewReady | VideoPreviewError;
1569
+
1570
+ /**
1571
+ * @public
1572
+ * Video preview that failed to generate.
1573
+ *
1574
+ * Display an error state to the user.
1575
+ */
1576
+ export declare interface VideoPreviewError extends SizedPreview {
1577
+ kind: 'video';
1578
+ status: 'error';
1579
+
1580
+ /**
1581
+ * The error message to display to the user.
1582
+ */
1583
+ message: string;
1584
+ }
1585
+
1586
+ /**
1587
+ * @public
1588
+ * Video preview that is currently being generated.
1589
+ *
1590
+ * Display a loading state until the preview transitions to `"thumbnail"` or `"error"`.
1591
+ */
1592
+ export declare interface VideoPreviewLoading extends SizedPreview {
1593
+ kind: 'video';
1594
+ status: 'loading';
1595
+ /**
1596
+ * Video duration in milliseconds.
1597
+ */
1598
+ durationMs?: number;
1599
+ }
1600
+
1601
+ /**
1602
+ * @public
1603
+ * Video preview with full video ready to play.
1604
+ *
1605
+ * Contains URLs for both the video and thumbnail.
1606
+ */
1607
+ export declare interface VideoPreviewReady extends SizedPreview {
1608
+ kind: 'video';
1609
+ status: 'ready';
1610
+ /**
1611
+ * Video format.
1612
+ */
1613
+ format: 'mp4';
1614
+ /**
1615
+ * URL to the full video.
1616
+ *
1617
+ * Use this URL in a video player.
1618
+ */
1619
+ url: string;
1620
+ /**
1621
+ * Format of the thumbnail image.
1622
+ */
1623
+ thumbnailFormat: 'png' | 'jpg';
1624
+ /**
1625
+ * URL to the thumbnail image.
1626
+ *
1627
+ * Can be used as a poster image for the video player.
1628
+ */
1629
+ thumbnailUrl: string;
1630
+ /**
1631
+ * Video duration in milliseconds.
1632
+ */
1633
+ durationMs?: number;
1634
+ }
1635
+
1636
+ /**
1637
+ * @public
1638
+ * Video preview with lightweight thumbnail available.
1639
+ *
1640
+ * This is the initial state for video previews. Show the thumbnail image
1641
+ * and call `requestPreviewUpgrade` when the user needs the full video.
1642
+ */
1643
+ export declare interface VideoPreviewThumbnail extends SizedPreview {
1644
+ kind: 'video';
1645
+ status: 'thumbnail';
1646
+ /**
1647
+ * Format of the thumbnail image.
1648
+ */
1649
+ thumbnailFormat: 'png' | 'jpg';
1650
+ /**
1651
+ * URL to the thumbnail image.
1652
+ *
1653
+ * Display this lightweight image until full video is needed.
1654
+ */
1655
+ thumbnailUrl: string;
1656
+ /**
1657
+ * Video duration in milliseconds.
1658
+ */
1659
+ durationMs?: number;
1660
+ }
1661
+
1662
+ /**
1663
+ * @public
1664
+ * Video preview that is being upgraded from thumbnail to full video.
1665
+ *
1666
+ * Display the thumbnail with a loading indicator until the video is ready.
1667
+ */
1668
+ export declare interface VideoPreviewUpgrading extends SizedPreview {
1669
+ kind: 'video';
1670
+ status: 'upgrading';
1671
+ /**
1672
+ * Format of the thumbnail image.
1673
+ */
1674
+ thumbnailFormat: 'png' | 'jpg';
1675
+ /**
1676
+ * URL to the thumbnail image.
1677
+ *
1678
+ * Continue showing the thumbnail while the full video loads.
1679
+ */
1680
+ thumbnailUrl: string;
1681
+ /**
1682
+ * Video duration in milliseconds.
1683
+ */
1684
+ durationMs?: number;
1685
+ }
1686
+
1687
+ /**
1688
+ * @public
1689
+ * Video file requirements for a media slot.
1690
+ *
1691
+ * Specifies format, aspect ratio, duration, and size constraints for videos.
1692
+ *
1693
+ * @example Video requirements for YouTube
1694
+ * ```ts
1695
+ * const videoReq: VideoRequirement = {
1696
+ * format: 'mp4',
1697
+ * aspectRatio: { exact: 16/9 },
1698
+ * durationMs: { min: 1000, max: 600000 },
1699
+ * };
1700
+ * ```
1701
+ */
1702
+ export declare interface VideoRequirement extends BaseFileRequirement {
1703
+ /**
1704
+ * Supported video format.
1705
+ */
1706
+ format: 'mp4';
1707
+ /**
1708
+ * Aspect ratio constraint (width / height).
1709
+ *
1710
+ * Examples:
1711
+ * - `{ exact: 16/9 }`: Widescreen
1712
+ * - `{ exact: 9/16 }`: Vertical/Story format
1713
+ */
1714
+ aspectRatio?: ValueRange;
1715
+ /**
1716
+ * Duration constraint in milliseconds.
1717
+ *
1718
+ * Examples:
1719
+ * - `{ max: 60000 }`: Maximum 60 seconds
1720
+ * - `{ min: 3000, max: 600000 }`: Between 3 seconds and 10 minutes
1721
+ */
1722
+ durationMs?: ValueRange;
1723
+
1724
+ }
1725
+
1726
+ /**
1727
+ * @public
1728
+ * Selection metadata for a video media item.
1729
+ */
1730
+ export declare interface VideoSelection extends BaseSelection {
1731
+ kind: 'video';
1732
+ /**
1733
+ * Duration of the selected video in milliseconds.
1734
+ */
1735
+ durationMs: number;
1736
+ }
1737
+
1738
+ export { }