@canva/intents 2.0.2-beta.3 → 2.1.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 (39) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/asset/index.d.ts +1 -1
  3. package/content/index.d.ts +1440 -1
  4. package/data/index.d.ts +1229 -1
  5. package/design/index.d.ts +41 -1
  6. package/index.d.ts +2821 -1
  7. package/lib/cjs/sdk/intents/asset/index.js +1 -15
  8. package/lib/cjs/sdk/intents/content/index.js +4 -2
  9. package/lib/cjs/sdk/intents/content/{beta.js → public.js} +0 -2
  10. package/lib/cjs/sdk/intents/fake/create.js +3 -0
  11. package/lib/cjs/sdk/intents/index.js +4 -2
  12. package/lib/cjs/sdk/intents/public.js +8 -4
  13. package/lib/cjs/sdk/intents/version.js +17 -4
  14. package/lib/esm/sdk/intents/asset/index.js +1 -1
  15. package/lib/esm/sdk/intents/content/index.js +3 -1
  16. package/lib/esm/sdk/intents/content/public.js +2 -0
  17. package/lib/esm/sdk/intents/fake/create.js +3 -0
  18. package/lib/esm/sdk/intents/index.js +3 -1
  19. package/lib/esm/sdk/intents/public.js +2 -1
  20. package/lib/esm/sdk/intents/version.js +3 -1
  21. package/package.json +23 -23
  22. package/test/index.d.ts +11 -1
  23. package/asset/beta.d.ts +0 -236
  24. package/beta.d.ts +0 -1309
  25. package/content/beta.d.ts +0 -1410
  26. package/data/beta.d.ts +0 -1242
  27. package/design/beta.d.ts +0 -43
  28. package/lib/cjs/sdk/intents/asset/beta.js +0 -14
  29. package/lib/cjs/sdk/intents/beta.js +0 -20
  30. package/lib/cjs/sdk/intents/data/beta.js +0 -20
  31. package/lib/cjs/sdk/intents/design/beta.js +0 -20
  32. package/lib/cjs/sdk/intents/test/beta.js +0 -18
  33. package/lib/esm/sdk/intents/asset/beta.js +0 -4
  34. package/lib/esm/sdk/intents/beta.js +0 -3
  35. package/lib/esm/sdk/intents/content/beta.js +0 -4
  36. package/lib/esm/sdk/intents/data/beta.js +0 -3
  37. package/lib/esm/sdk/intents/design/beta.js +0 -3
  38. package/lib/esm/sdk/intents/test/beta.js +0 -1
  39. package/test/beta.d.ts +0 -11
package/data/beta.d.ts DELETED
@@ -1,1242 +0,0 @@
1
- /**
2
- * @public
3
- * A disclosure identifying if the app generated this asset using AI.
4
- *
5
- * @remarks
6
- * Helps users make informed decisions about the content they interact with.
7
- *
8
- * AI is generally defined as any machine system that, given an objective, infers how to generate an output from an input.
9
- * Some examples include "generative AI", "large language models", and "machine learning".
10
- *
11
- * **App Generated**
12
- *
13
- * 'app_generated' indicates when the app creates or significantly alters an asset using AI. Includes when
14
- * the app makes a request to a third-party service to do so.
15
- *
16
- * A significantly altered asset means the AI changes key information or details, such as
17
- * removing or replacing key components in the original content, which can include applying style transfer, or changing facial expressions.
18
- *
19
- * Label this asset as 'app_generated' under these conditions:
20
- *
21
- * The following is true:
22
- *
23
- * - The app generates the asset in response to a user's request (including past requests), for example, the asset is not from an asset library.
24
- *
25
- * And any of these conditions are also true:
26
- *
27
- * - The AI creates entirely new content from scratch.
28
- * - The AI introduces new multimedia, details, or creative elements not originally present.
29
- * - The AI removes and replaces the asset's key components.
30
- * - The AI alters the asset's appearance, meaning, or context in a way that conveys a different message than the original.
31
- *
32
- * **None**
33
- *
34
- * 'none' indicates when the asset wasn't generated by the app as a part of any user's specific request, for example, a third-party
35
- * request, or when the asset wasn't significantly altered by AI.
36
- */
37
- declare type AiDisclosure = "app_generated" | "none";
38
-
39
- declare type AllOrNone<T> = T | Never<T>;
40
-
41
- /**
42
- * @public
43
- * {@link GetDataTableError} indicating custom error occurred in the app's implementation.
44
- * This can be used to indicate specific issues that are not covered by other error types.
45
- */
46
- declare type AppError = {
47
- /**
48
- * A custom error occurred in your app.
49
- *
50
- * Return this for application-specific errors that don't fit
51
- * the other categories. Include a descriptive message explaining
52
- * the error to the user.
53
- */
54
- status: "app_error";
55
- /**
56
- * Optional message explaining the error.
57
- */
58
- message?: string;
59
- };
60
-
61
- /**
62
- * @public
63
- * {@link InvocationContext} indicating a custom error occurred during data refresh.
64
- * Triggered when getDataTable returned 'app_error' status.
65
- * UI should display the error message and help users recover.
66
- */
67
- declare type AppErrorInvocationContext = {
68
- /**
69
- * A custom error occurred during data refresh.
70
- *
71
- * This occurs when `getDataTable` returned 'app_error' during a refresh attempt.
72
- * Your UI should display the error message and help users recover from the specific
73
- * issue.
74
- */
75
- reason: "app_error";
76
- /**
77
- * The data source reference that caused the error during refresh.
78
- */
79
- dataSourceRef?: DataSourceRef;
80
- /**
81
- * The error message to display to the user.
82
- */
83
- message?: string;
84
- };
85
-
86
- /**
87
- * @public
88
- * Cell containing a boolean value.
89
- *
90
- * @example Creating a boolean cell
91
- * ```ts
92
- * import type { BooleanDataTableCell } from '@canva/intents/data';
93
- *
94
- * const isActiveCell: BooleanDataTableCell = {
95
- * type: 'boolean',
96
- * value: true
97
- * };
98
- * ```
99
- *
100
- * @example Creating a boolean cell with false value
101
- * ```ts
102
- * import type { BooleanDataTableCell } from '@canva/intents/data';
103
- *
104
- * const isCompleteCell: BooleanDataTableCell = {
105
- * type: 'boolean',
106
- * value: false
107
- * };
108
- * ```
109
- *
110
- * @example Creating an empty boolean cell
111
- * ```ts
112
- * import type { BooleanDataTableCell } from '@canva/intents/data';
113
- *
114
- * const emptyBooleanCell: BooleanDataTableCell = {
115
- * type: 'boolean',
116
- * value: undefined
117
- * };
118
- * ```
119
- */
120
- export declare type BooleanDataTableCell = {
121
- /**
122
- * Indicates this cell contains a boolean value.
123
- */
124
- type: "boolean";
125
- /**
126
- * Boolean value (true or false).
127
- *
128
- * Use `undefined` for an empty cell.
129
- */
130
- value: boolean | undefined;
131
- };
132
-
133
- /**
134
- * @public
135
- * Configuration for a table column.
136
- */
137
- export declare type ColumnConfig = {
138
- /**
139
- * Name for the column, displayed as header text.
140
- *
141
- * If `undefined`, the column will have no header text.
142
- */
143
- name: string | undefined;
144
- /**
145
- * Expected data type for cells in this column.
146
- *
147
- * Use a specific `DataType` for columns with consistent types,
148
- * or `'variant'` for columns that may contain mixed types.
149
- */
150
- type: DataType | "variant";
151
- };
152
-
153
- /**
154
- * @public
155
- * Main interface for implementing the Data Connector intent.
156
- *
157
- * Implementing the Data Connector intent enables apps to import external data into Canva.
158
- * This allows users to select, preview, and refresh data from external sources.
159
- */
160
- export declare type DataConnectorIntent = {
161
- /**
162
- * Gets structured data from an external source.
163
- *
164
- * This action is called in two scenarios:
165
- *
166
- * - During data selection to preview data before import (when {@link RenderSelectionUiRequest.updateDataRef} is called).
167
- * - When refreshing previously imported data (when the user requests an update).
168
- *
169
- * @param request - Parameters for the data fetching operation.
170
- * @returns A promise resolving to either a successful result with data or an error.
171
- *
172
- * @example Getting data from an external source
173
- * ```ts
174
- * import type { GetDataTableRequest, GetDataTableResponse } from '@canva/intents/data';
175
- *
176
- * async function getDataTable(request: GetDataTableRequest): Promise<GetDataTableResponse> {
177
- * const { dataSourceRef, limit, signal } = request;
178
- *
179
- * // Check if the operation has been aborted.
180
- * if (signal.aborted) {
181
- * return { status: 'app_error', message: 'The data fetch operation was cancelled.' };
182
- * }
183
- *
184
- * // ... data fetching logic using dataSourceRef, limit, and signal ...
185
- *
186
- * // Placeholder for a successful result.
187
- * return {
188
- * status: 'completed',
189
- * dataTable: { rows: [{ cells: [{ type: 'string', value: 'Fetched data' }] }] }
190
- * };
191
- * }
192
- * ```
193
- */
194
- getDataTable: (request: GetDataTableRequest) => Promise<GetDataTableResponse>;
195
-
196
- /**
197
- * Renders a user interface for selecting and configuring data from your external sources.
198
- *
199
- * @param request - Configuration and callbacks for the data selection UI.
200
- *
201
- * @example Rendering a data selection UI
202
- * ```ts
203
- * import type { RenderSelectionUiRequest } from '@canva/intents/data';
204
- *
205
- * async function renderSelectionUi(request: RenderSelectionUiRequest): Promise<void> {
206
- * // UI rendering logic.
207
- * // Example: if user selects data 'ref123'.
208
- * const selectedRef = { source: 'ref123', title: 'My Selected Table' };
209
- * try {
210
- * const result = await request.updateDataRef(selectedRef);
211
- * if (result.status === 'completed') {
212
- * console.log('Selection valid and preview updated.');
213
- * } else {
214
- * console.error('Selection error:', result.status);
215
- * }
216
- * } catch (error) {
217
- * console.error('An unexpected error occurred during data ref update:', error);
218
- * }
219
- * }
220
- * ```
221
- */
222
- renderSelectionUi: (request: RenderSelectionUiRequest) => void;
223
- };
224
-
225
- /**
226
- * @public
227
- * {@link InvocationContext} indicating initial data selection flow or edit of existing data.
228
- */
229
- declare type DataSelectionInvocationContext = {
230
- /**
231
- * Initial data selection or editing existing data.
232
- *
233
- * This is the standard flow when:
234
- *
235
- * - A user is selecting data for the first time
236
- * - A user is editing a previous selection
237
- *
238
- * If `dataSourceRef` is provided, this indicates an edit flow, and you should
239
- * pre-populate your UI with this selection.
240
- */
241
- reason: "data_selection";
242
- /**
243
- * If dataSourceRef is provided, this is an edit of existing data flow and UI should be pre-populated.
244
- */
245
- dataSourceRef?: DataSourceRef;
246
- };
247
-
248
- /**
249
- * @public
250
- * Reference to an external data source that can be used to fetch data.
251
- * Created by Data Connector apps and stored by Canva for data refresh operations.
252
- *
253
- * You create this object in your data selection UI and pass it to the
254
- * `updateDataRef` callback. Canva stores this reference and uses it for
255
- * future data refresh operations.
256
- *
257
- * Maximum size: 5KB
258
- *
259
- * @example Defining how to locate external data
260
- * ```ts
261
- * const dataSourceRef: DataSourceRef = {
262
- * source: JSON.stringify({
263
- * reportId: "monthly_sales_001",
264
- * filters: { year: 2023, region: "NA" }
265
- * }),
266
- * title: "Monthly Sales Report (NA, 2023)"
267
- * };
268
- * ```
269
- */
270
- export declare type DataSourceRef = {
271
- /**
272
- * Information needed to identify and retrieve data from your source.
273
- *
274
- * This string should contain all the information your app needs to
275
- * fetch the exact data selection later. Typically, this is a serialized
276
- * object with query parameters, identifiers, or filters.
277
- *
278
- * You are responsible for encoding and decoding this value appropriately.
279
- *
280
- * Maximum size: 5KB
281
- */
282
- source: string;
283
- /**
284
- * A human-readable description of the data reference.
285
- *
286
- * This title may be displayed to users in the Canva interface to help
287
- * them identify the data source.
288
- *
289
- * Maximum length: 255 characters
290
- */
291
- title?: string;
292
- };
293
-
294
- /**
295
- * @public
296
- * Structured tabular data for import into Canva.
297
- *
298
- * This format allows you to provide typed data with proper formatting
299
- * to ensure it displays correctly in Canva designs.
300
- *
301
- * @example Creating a data table
302
- * ```ts
303
- * import type { ColumnConfig, DataTableCell, DataTable, DataTableRow } from '@canva/intents/data';
304
- *
305
- * const myTable: DataTable = {
306
- * columnConfigs: [
307
- * { name: 'Name', type: 'string' },
308
- * { name: 'Age', type: 'number' },
309
- * { name: 'Subscribed', type: 'boolean' },
310
- * { name: 'Join Date', type: 'date' }
311
- * ],
312
- * rows: [
313
- * {
314
- * cells: [
315
- * { type: 'string', value: 'Alice' },
316
- * { type: 'number', value: 30 },
317
- * { type: 'boolean', value: true },
318
- * { type: 'date', value: Math.floor(new Date('2023-01-15').getTime() / 1000) }
319
- * ]
320
- * },
321
- * {
322
- * cells: [
323
- * { type: 'string', value: 'Bob' },
324
- * { type: 'number', value: 24 },
325
- * { type: 'boolean', value: false },
326
- * { type: 'date', value: Math.floor(new Date('2022-07-20').getTime() / 1000) }
327
- * ]
328
- * }
329
- * ]
330
- * };
331
- * ```
332
- */
333
- export declare type DataTable = {
334
- /**
335
- * Column definitions with names and data types.
336
- *
337
- * These help Canva interpret and display your data correctly.
338
- */
339
- columnConfigs?: ColumnConfig[];
340
- /**
341
- * The data rows containing the actual values.
342
- *
343
- * Each row contains an array of cells with typed data values.
344
- */
345
- rows: DataTableRow[];
346
- };
347
-
348
- /**
349
- * @public
350
- * Generic type for table cells that resolves to a specific cell type.
351
- */
352
- export declare type DataTableCell<T extends DataType = DataType> = {
353
- date: DateDataTableCell;
354
- string: StringDataTableCell;
355
- number: NumberDataTableCell;
356
- boolean: BooleanDataTableCell;
357
- media: MediaCollectionDataTableCell;
358
- }[T];
359
-
360
- /**
361
- * @public
362
- * Options for uploading an image asset to the user's private media library.
363
- */
364
- export declare type DataTableImageUpload = Omit<
365
- ImageUploadOptions,
366
- "type" | "parentRef"
367
- > & {
368
- /**
369
- * Indicates this value contains options for image uploading.
370
- */
371
- type: "image_upload";
372
- };
373
-
374
- /**
375
- * @public
376
- * Maximum dimensions for imported data tables.
377
- */
378
- export declare type DataTableLimit = {
379
- /**
380
- * The maximum number of rows allowed.
381
- *
382
- * Your app should ensure data does not exceed this limit.
383
- */
384
- row: number;
385
- /**
386
- * The maximum number of columns allowed.
387
- *
388
- * Your app should ensure data does not exceed this limit.
389
- */
390
- column: number;
391
- };
392
-
393
- /**
394
- * @public
395
- * Metadata providing additional context about the imported data.
396
- */
397
- export declare type DataTableMetadata = {
398
- /**
399
- * A human-readable description of the dataset.
400
- *
401
- * This description helps users understand what data they are importing.
402
- */
403
- description?: string;
404
- /**
405
- * Information about the data provider or source.
406
- */
407
- providerInfo?: {
408
- /**
409
- * Name of the data provider.
410
- */
411
- name: string;
412
- /**
413
- * URL to the provider's website or related resource.
414
- */
415
- url?: string;
416
- };
417
- };
418
-
419
- /**
420
- * @public
421
- * A row in the data table.
422
- *
423
- * @example Creating a single row of data cells
424
- * ```ts
425
- * import type { DataTableCell, DataTableRow } from '@canva/intents/data';
426
- *
427
- * const row: DataTableRow = {
428
- * cells: [
429
- * { type: 'string', value: 'Product Alpha' },
430
- * { type: 'number', value: 199.99 },
431
- * { type: 'boolean', value: true }
432
- * ]
433
- * };
434
- * ```
435
- */
436
- export declare type DataTableRow = {
437
- /**
438
- * Array of cells containing the data values.
439
- *
440
- * Each cell must have a type that matches the corresponding column definition (if provided).
441
- */
442
- cells: DataTableCell<DataType>[];
443
- };
444
-
445
- /**
446
- * @public
447
- * Options for uploading a video asset to the user's private media library.
448
- */
449
- export declare type DataTableVideoUpload = Omit<
450
- VideoUploadOptions,
451
- "type" | "parentRef"
452
- > & {
453
- /**
454
- * Indicates this value contains options for video uploading.
455
- */
456
- type: "video_upload";
457
- };
458
-
459
- /**
460
- * @public
461
- * Data types supported for table cells.
462
- */
463
- export declare type DataType =
464
- | "string"
465
- | "number"
466
- | "date"
467
- | "boolean"
468
- | "media";
469
-
470
- /**
471
- * @public
472
- * Cell containing a date value.
473
- *
474
- * @example Creating a date cell
475
- * ```ts
476
- * import type { DateDataTableCell } from '@canva/intents/data';
477
- *
478
- * const todayCell: DateDataTableCell = {
479
- * type: 'date',
480
- * value: Math.floor(Date.now() / 1000) // Unix timestamp in seconds
481
- * };
482
- *
483
- * const emptyDateCell: DateDataTableCell = {
484
- * type: 'date',
485
- * value: undefined
486
- * };
487
- * ```
488
- */
489
- export declare type DateDataTableCell = {
490
- /**
491
- * Indicates this cell contains a date value.
492
- */
493
- type: "date";
494
- /**
495
- * Unix timestamp in seconds representing the date.
496
- *
497
- * Use `undefined` for an empty cell.
498
- */
499
- value: number | undefined;
500
- };
501
-
502
- /**
503
- * @public
504
- * A set of dimensions.
505
- */
506
- declare type Dimensions = {
507
- /**
508
- * A width, in pixels.
509
- */
510
- width: number;
511
- /**
512
- * A height, in pixels.
513
- */
514
- height: number;
515
- };
516
-
517
- /**
518
- * @public
519
- * Successful result from `getDataTable` action.
520
- */
521
- export declare type GetDataTableCompleted = {
522
- /**
523
- * Indicates the operation completed successfully
524
- */
525
- status: "completed";
526
- /**
527
- * The fetched data formatted as a data table.
528
- */
529
- dataTable: DataTable;
530
- /**
531
- * Optional metadata providing additional context about the data.
532
- */
533
- metadata?: DataTableMetadata;
534
- };
535
-
536
- /**
537
- * @public
538
- * Error results that can be returned from `getDataTable` method.
539
- */
540
- export declare type GetDataTableError =
541
- | OutdatedSourceRefError
542
- | RemoteRequestFailedError
543
- | AppError;
544
-
545
- /**
546
- * @public
547
- * Parameters for the getDataTable action.
548
- */
549
- export declare type GetDataTableRequest = {
550
- /**
551
- * Reference to the data source to fetch.
552
- *
553
- * This contains the information needed to identify and retrieve the specific data
554
- * that was previously selected by the user.
555
- *
556
- * Use this to query your external data service.
557
- */
558
- dataSourceRef: DataSourceRef;
559
- /**
560
- * Maximum row and column limits for the imported data.
561
- *
562
- * Your app must ensure the returned data does not exceed these limits.
563
- *
564
- * If the requested data would exceed these limits, either:
565
- *
566
- * - Truncate the data to fit within limits, or
567
- * - Return a 'data_table_limit_exceeded' error
568
- */
569
- limit: DataTableLimit;
570
- /**
571
- * Standard DOM AbortSignal for cancellation support.
572
- *
573
- * Your app should monitor this signal and abort any ongoing operations if it becomes aborted.
574
- */
575
- signal: AbortSignal;
576
- };
577
-
578
- /**
579
- * @public
580
- * Result returned from the `getDataTable` action.
581
- */
582
- export declare type GetDataTableResponse =
583
- | GetDataTableCompleted
584
- | GetDataTableError;
585
-
586
- /**
587
- * @public
588
- * The MIME type of an image file that's supported by Canva's backend.
589
- */
590
- declare type ImageMimeType =
591
- | "image/jpeg"
592
- | "image/heic"
593
- | "image/png"
594
- | "image/svg+xml"
595
- | "image/webp"
596
- | "image/tiff";
597
-
598
- /**
599
- * @public
600
- * A unique identifier that points to an image asset in Canva's backend.
601
- */
602
- declare type ImageRef = string & {
603
- __imageRef: never;
604
- };
605
-
606
- /**
607
- * @public
608
- * Options for uploading an image asset to the user's private media library.
609
- */
610
- declare type ImageUploadOptions = {
611
- /**
612
- * The type of asset.
613
- */
614
- type: "image";
615
- /**
616
- * The ref of the original asset from which this new asset was derived.
617
- *
618
- * @remarks
619
- * For example, if an app applies an effect to an image, `parentRef` should contain the ref of the original image.
620
- */
621
- parentRef?: ImageRef;
622
- /**
623
- * The URL of the image file to upload.
624
- * This can be an external URL or a data URL.
625
- *
626
- * @remarks
627
- * Requirements for external URLs:
628
- *
629
- * - Must use HTTPS
630
- * - Must return a `200` status code
631
- * - `Content-Type` must match the file's MIME type
632
- * - Must be publicly accessible (i.e. not a localhost URL)
633
- * - Must not redirect
634
- * - Must not contain an IP address
635
- * - Maximum length: 4096 characters
636
- * - Must not contain whitespace
637
- * - Must not contain these characters: `>`, `<`, `{`, `}`, `^`, backticks
638
- * - Maximum file size: 50MB
639
- *
640
- * Requirements for data URLs:
641
- *
642
- * - Must include `;base64` for base64-encoded data
643
- * - Maximum size: 10MB (10 × 1024 × 1024 characters)
644
- *
645
- * Requirements for SVGs:
646
- *
647
- * - Disallowed elements:
648
- * - `a`
649
- * - `altglyph`
650
- * - `altglyphdef`
651
- * - `altglyphitem`
652
- * - `animate`
653
- * - `animatemotion`
654
- * - `animatetransform`
655
- * - `cursor`
656
- * - `discard`
657
- * - `font`
658
- * - `font-face`
659
- * - `font-face-format`
660
- * - `font-face-name`
661
- * - `font-face-src`
662
- * - `font-face-uri`
663
- * - `foreignobject`
664
- * - `glyph`
665
- * - `glyphref`
666
- * - `missing-glyph`
667
- * - `mpath`
668
- * - `script`
669
- * - `set`
670
- * - `switch`
671
- * - `tref`
672
- * - Disallowed attributes:
673
- * - `crossorigin`
674
- * - `lang`
675
- * - `media`
676
- * - `onload`
677
- * - `ping`
678
- * - `referrerpolicy`
679
- * - `rel`
680
- * - `rendering-intent`
681
- * - `requiredextensions`
682
- * - `requiredfeatures`
683
- * - `systemlanguage`
684
- * - `tabindex`
685
- * - `transform-origin`
686
- * - `unicode`
687
- * - `vector-effect`
688
- * - The `href` attribute of an `image` element only supports data URLs for PNG and JPEG images.
689
- * - The URL in the `href` attribute must not point to a location outside of the SVG.
690
- * - The `style` attribute must not use the `mix-blend-mode` property.
691
- */
692
- url: string;
693
- /**
694
- * The MIME type of the image file.
695
- */
696
- mimeType: ImageMimeType;
697
- /**
698
- * The URL of a thumbnail image to display while the image is queued for upload.
699
- * This can be an external URL or a data URL.
700
- *
701
- * @remarks
702
- * Requirements for external URLs:
703
- *
704
- * - Must use HTTPS
705
- * - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
706
- * - Must be a PNG, JPEG, or SVG file
707
- * - Maximum length: 4096 characters
708
- *
709
- * Requirements for data URLs:
710
- *
711
- * - Must include `;base64` for base64-encoded data
712
- * - Maximum size: 10MB (10 × 1024 × 1024 characters)
713
- */
714
- thumbnailUrl: string;
715
- /**
716
- * A disclosure identifying if the app generated this image using AI
717
- *
718
- * @remarks
719
- * Helps users make informed decisions about the content they interact with.
720
- * See {@link AiDisclosure} for the full definition.
721
- *
722
- * **App Generated**
723
- *
724
- * 'app_generated' indicates when the app creates or significantly alters an asset using AI. Includes when
725
- * the app requests a third-party service to take similar action on an image using AI.
726
- *
727
- * Required for the following cases (this list is not exhaustive):
728
- * | Case | Reason |
729
- * | -- | -- |
730
- * | AI generates a new image from scratch | Creates new creative content |
731
- * | AI changes the style of the image e.g. makes it cartoon | Significantly alters the style |
732
- * | AI removes an object and replaces it with new content | Creates new creative content |
733
- * | AI changes the facial expression of a person in an image | Can alter content's original meaning |
734
- * | AI composites multiple images together | Significantly alters context |
735
- * | AI expands an image by generating new content to fill the edges | Creates new creative content |
736
- * | AI replaces background by generating new content | Creates new creative content |
737
- *
738
- * **None**
739
- *
740
- * 'none' indicates when the app doesn't create or significantly alter an asset using AI, or as a part of a request
741
- * to third-party hosted content.
742
- *
743
- * Required for the following cases (this list is not exhaustive):
744
- * | Case | Reason |
745
- * | -- | -- |
746
- * | Asset comes from an asset library | Didn't generate the asset itself |
747
- * | AI corrects red eyes | A minor correction |
748
- * | AI removes background without replacement | Doesn't change original meaning by itself |
749
- * | AI changes the color of an object in an image | Doesn't change original meaning by itself |
750
- * | AI detects image defects and suggests manual fixes | Didn't change the asset itself |
751
- * | AI adjusts brightness and contrast on an image | Doesn't change original meaning by itself |
752
- * | AI upscales an image | Doesn't change original meaning by itself |
753
- */
754
- aiDisclosure: AiDisclosure;
755
- } & AllOrNone<Dimensions>;
756
-
757
- /**
758
- * @public
759
- * Information explaining why the data selection UI was launched.
760
- */
761
- export declare type InvocationContext =
762
- | DataSelectionInvocationContext
763
- | OutdatedSourceRefInvocationContext
764
- | AppErrorInvocationContext;
765
-
766
- /**
767
- * @public
768
- * Cell containing a media collection (images) value.
769
- *
770
- * @example Creating a media cell with an image
771
- * ```ts
772
- * import type { MediaCollectionDataTableCell } from '@canva/intents/data';
773
- *
774
- * const mediaCell: MediaCollectionDataTableCell = {
775
- * type: 'media',
776
- * value: [{
777
- * type: 'image_upload',
778
- * url: 'https://www.canva.dev/example-assets/image-import/image.jpg',
779
- * mimeType: 'image/jpeg',
780
- * thumbnailUrl: 'https://www.canva.dev/example-assets/image-import/thumbnail.jpg',
781
- * aiDisclosure: 'none'
782
- * }]
783
- * };
784
- * ```
785
- *
786
- * @example Creating an empty media cell
787
- * ```ts
788
- * import type { MediaCollectionDataTableCell } from '@canva/intents/data';
789
- *
790
- * const emptyMediaCell: MediaCollectionDataTableCell = {
791
- * type: 'media',
792
- * value: []
793
- * };
794
- * ```
795
- */
796
- export declare type MediaCollectionDataTableCell = {
797
- /**
798
- * Indicates this cell contains a media collection.
799
- */
800
- type: "media";
801
- /**
802
- * Media collection values.
803
- *
804
- * Use empty array for an empty cell.
805
- */
806
- value: (DataTableImageUpload | DataTableVideoUpload)[];
807
- };
808
-
809
- declare type Never<T> = {
810
- [key in keyof T]?: never;
811
- };
812
-
813
- /**
814
- * @public
815
- * Formatting metadata for number cells.
816
- *
817
- * @example Formatting as currency
818
- * ```ts
819
- * import type { NumberDataTableCell } from '@canva/intents/data';
820
- *
821
- * const currencyCell: NumberDataTableCell = {
822
- * type: 'number',
823
- * value: 1234.57,
824
- * metadata: { formatting: '[$$]#,##0.00' }
825
- * };
826
- * ```
827
- *
828
- * @example Formatting as a percentage
829
- * ```ts
830
- * import type { NumberDataTableCell } from '@canva/intents/data';
831
- *
832
- * const percentCell: NumberDataTableCell = {
833
- * type: 'number',
834
- * value: 0.1234,
835
- * metadata: { formatting: '0.00%' }
836
- * };
837
- * ```
838
- *
839
- * @example Applying a thousands separator
840
- * ```ts
841
- * import type { NumberDataTableCell } from '@canva/intents/data';
842
- *
843
- * const largeNumberCell: NumberDataTableCell = {
844
- * type: 'number',
845
- * value: 1234567.89234,
846
- * metadata: { formatting: '#,##0.00' }
847
- * };
848
- * ```
849
- */
850
- export declare type NumberCellMetadata = {
851
- /**
852
- * Formatting pattern using Office Open XML Format.
853
- *
854
- * These patterns control how numbers are displayed to users,
855
- * including currency symbols, decimal places, and separators.
856
- */
857
- formatting?: string;
858
- };
859
-
860
- /**
861
- * @public
862
- * Cell containing a numeric value.
863
- *
864
- * @example Creating a number cell
865
- * ```ts
866
- * import type { NumberCellMetadata, NumberDataTableCell } from '@canva/intents/data';
867
- *
868
- * const priceCell: NumberDataTableCell = {
869
- * type: 'number',
870
- * value: 29.99,
871
- * metadata: { formatting: '[$$]#,##0.00' }
872
- * };
873
- *
874
- * const quantityCell: NumberDataTableCell = {
875
- * type: 'number',
876
- * value: 150
877
- * };
878
- *
879
- * const emptyNumberCell: NumberDataTableCell = {
880
- * type: 'number',
881
- * value: undefined
882
- * };
883
- * ```
884
- */
885
- export declare type NumberDataTableCell = {
886
- /**
887
- * Indicates this cell contains a number value.
888
- */
889
- type: "number";
890
- /**
891
- * Numeric value within safe integer range.
892
- *
893
- * Valid range: `Number.MIN_SAFE_INTEGER` to `Number.MAX_SAFE_INTEGER`
894
- *
895
- * Invalid values:
896
- *
897
- * - Infinity or -Infinity
898
- * - NaN
899
- * - Negative zero (-0)
900
- * - Denormalized numbers
901
- *
902
- * Use `undefined` for an empty cell.
903
- */
904
- value: number | undefined;
905
- /**
906
- * Optional formatting information for displaying the number.
907
- *
908
- * @example Applying display formatting to a number
909
- * ```ts
910
- * import type { NumberCellMetadata } from '@canva/intents/data';
911
- *
912
- * const currencyFormatting: NumberCellMetadata = { formatting: '[$USD]#,##0.00' };
913
- * const percentageFormatting: NumberCellMetadata = { formatting: '0.00%' };
914
- * ```
915
- */
916
- metadata?: NumberCellMetadata;
917
- };
918
-
919
- /**
920
- * @public
921
- * {@link GetDataTableError} indicating the data source reference is no longer valid.
922
- * This will trigger a re-selection flow for the user.
923
- */
924
- declare type OutdatedSourceRefError = {
925
- /**
926
- * The data source reference is no longer valid.
927
- *
928
- * Return this error when the DataSourceRef cannot be used to retrieve data,
929
- * for example:
930
- *
931
- * - The referenced dataset has been deleted
932
- * - Access permissions have changed
933
- * - The structure of the data has fundamentally changed
934
- *
935
- * This will trigger a re-selection flow, allowing the user to choose a new
936
- * data source.
937
- */
938
- status: "outdated_source_ref";
939
- };
940
-
941
- /**
942
- * @public
943
- * {@link InvocationContext} indicating an error occurred because the previously selected data source reference is no longer valid.
944
- * Triggered when getDataTable returned 'outdated_source_ref' during data refresh.
945
- * UI should guide the user to reselect or reconfigure their data.
946
- */
947
- declare type OutdatedSourceRefInvocationContext = {
948
- /**
949
- * Previously selected data source reference is no longer valid.
950
- *
951
- * This occurs when `getDataTable` returned 'outdated_source_ref' during a
952
- * refresh attempt. Your UI should guide the user to select a new data source
953
- * or update their selection.
954
- *
955
- * The outdated reference is provided to help you suggest an appropriate replacement.
956
- */
957
- reason: "outdated_source_ref";
958
- /**
959
- * The outdated data source reference that caused the error during refresh.
960
- */
961
- dataSourceRef?: DataSourceRef;
962
- };
963
-
964
- /**
965
- * @public
966
- *
967
- * Prepares a {@link DataConnectorIntent|DataConnector Intent}.
968
- *
969
- * @example
970
- * ```tsx
971
- * import { prepareDataConnector } from "@canva/intents/data";
972
- *
973
- * prepareDataConnector({
974
- * getDataTable: async (params) => {
975
- * // Implement the logic to fetch the data table
976
- * },
977
- * renderSelectionUi: (params) => {
978
- * // Implement the UI for the data table selection
979
- * },
980
- * });
981
- * ```
982
- */
983
- export declare const prepareDataConnector: (
984
- implementation: DataConnectorIntent,
985
- ) => void;
986
-
987
- /**
988
- * @public
989
- * {@link GetDataTableError} indicating failure to fetch data from the external source.
990
- * Typically due to network issues or API failures.
991
- */
992
- declare type RemoteRequestFailedError = {
993
- /**
994
- * Failed to fetch data from the external source.
995
- *
996
- * Return this error for network issues, API failures, or other
997
- * connectivity problems that prevent data retrieval.
998
- */
999
- status: "remote_request_failed";
1000
- };
1001
-
1002
- /**
1003
- * @public
1004
- * Parameters for rendering the data selection UI.
1005
- */
1006
- export declare type RenderSelectionUiRequest = {
1007
- /**
1008
- * Context information about why the data selection UI is being launched.
1009
- *
1010
- * Use this to adapt your UI for different scenarios:
1011
- *
1012
- * - 'data_selection': Initial data selection or editing existing data
1013
- * - 'outdated_source_ref': Previous reference is no longer valid, guide user to reselect
1014
- * - 'app_error': Custom error occurred, show error message and recovery options
1015
- *
1016
- * When `dataSourceRef` is provided, pre-populate your UI with this selection.
1017
- */
1018
- invocationContext: InvocationContext;
1019
- /**
1020
- * Maximum allowed rows and columns for the imported data.
1021
- *
1022
- * Your UI should inform users of these constraints and prevent or warn about
1023
- * selections that would exceed them. This helps users understand why certain
1024
- * data sets might not be available for selection.
1025
- */
1026
- limit: DataTableLimit;
1027
- /**
1028
- * Callback to preview selected data before finalizing import.
1029
- *
1030
- * Call this function when the user selects data to:
1031
- *
1032
- * 1. Show a preview of the selected data to the user
1033
- * 2. Validate that the selection meets system requirements
1034
- *
1035
- * Calling this function will trigger your `getDataTable` implementation.
1036
- * Wait for the promise to resolve to determine if the selection is valid.
1037
- *
1038
- * @param dataSourceRef - Reference object identifying the selected data
1039
- * @returns Promise resolving to success or an error result
1040
- * @throws Will throw CanvaError('bad_request') if
1041
- * 1. {@link DataSourceRef.source} exceeds 5kb.
1042
- * 2. {@link DataSourceRef.title} exceeds 255 characters.
1043
- * 3. {@link GetDataTableCompleted.dataTable} exceeds {@link DataTableLimit} or contains invalid data.
1044
- */
1045
- updateDataRef: (
1046
- dataSourceRef: DataSourceRef,
1047
- ) => Promise<UpdateDataRefResponse>;
1048
- };
1049
-
1050
- /**
1051
- * @public
1052
- * Cell containing a text value.
1053
- *
1054
- * @example Creating a string cell
1055
- * ```ts
1056
- * import type { StringDataTableCell } from '@canva/intents/data';
1057
- *
1058
- * const nameCell: StringDataTableCell = {
1059
- * type: 'string',
1060
- * value: 'John Doe'
1061
- * };
1062
- *
1063
- * const emptyStringCell: StringDataTableCell = {
1064
- * type: 'string',
1065
- * value: undefined
1066
- * };
1067
- * ```
1068
- */
1069
- export declare type StringDataTableCell = {
1070
- /**
1071
- * Indicates this cell contains a string value.
1072
- */
1073
- type: "string";
1074
- /**
1075
- * Text content of the cell.
1076
- *
1077
- * Maximum length: 10,000 characters
1078
- *
1079
- * Use `undefined` for an empty cell.
1080
- */
1081
- value: string | undefined;
1082
- };
1083
-
1084
- /**
1085
- * @public
1086
- * Successful result from the {@link RenderSelectionUiRequest.updateDataRef} callback.
1087
- */
1088
- declare type UpdateDataRefCompleted = {
1089
- /**
1090
- * The data selection was successful and can be previewed.
1091
- */
1092
- status: "completed";
1093
- };
1094
-
1095
- /**
1096
- * @public
1097
- * Result returned from the {@link RenderSelectionUiRequest.updateDataRef} callback.
1098
- * Indicates whether {@link DataSourceRef} update succeeded or failed.
1099
- */
1100
- export declare type UpdateDataRefResponse =
1101
- | UpdateDataRefCompleted
1102
- | GetDataTableError;
1103
-
1104
- /**
1105
- * @public
1106
- * The MIME type of a video file that's supported by Canva's backend.
1107
- *
1108
- * @remarks
1109
- * - GIFs are treated as videos, not images.
1110
- * - `"application/json"` is only used for Lottie files.
1111
- */
1112
- declare type VideoMimeType =
1113
- | "video/avi"
1114
- | "video/x-msvideo"
1115
- | "image/gif"
1116
- | "video/x-m4v"
1117
- | "video/x-matroska"
1118
- | "video/quicktime"
1119
- | "video/mp4"
1120
- | "video/mpeg"
1121
- | "video/webm"
1122
- | "application/json";
1123
-
1124
- /**
1125
- * @public
1126
- * A unique identifier that points to a video asset in Canva's backend.
1127
- */
1128
- declare type VideoRef = string & {
1129
- __videoRef: never;
1130
- };
1131
-
1132
- /**
1133
- * @public
1134
- * Options for uploading a video asset to the user's private media library.
1135
- */
1136
- declare type VideoUploadOptions = {
1137
- /**
1138
- * The type of asset.
1139
- */
1140
- type: "video";
1141
- /**
1142
- * The ref of the original asset from which this new asset was derived.
1143
- *
1144
- * @remarks
1145
- * For example, if an app applies an effect to a video, `parentRef` should contain the ref of the original video.
1146
- */
1147
- parentRef?: VideoRef;
1148
- /**
1149
- * The URL of the video file to upload.
1150
- *
1151
- * @remarks
1152
- * Requirements:
1153
- *
1154
- * - Must use HTTPS
1155
- * - Must return a `200` status code
1156
- * - `Content-Type` must match the file's MIME type
1157
- * - Must be publicly accessible (i.e. not a localhost URL)
1158
- * - Must not redirect
1159
- * - Must not contain an IP address
1160
- * - Maximum length: 4096 characters
1161
- * - Must not contain whitespace
1162
- * - Must not contain these characters: `>`, `<`, `{`, `}`, `^`, backticks
1163
- * - Maximum file size: 100MB
1164
- */
1165
- url: string;
1166
- /**
1167
- * The MIME type of the video file.
1168
- */
1169
- mimeType: VideoMimeType;
1170
- /**
1171
- * The URL of a thumbnail video to display while the video is queued for upload.
1172
- *
1173
- * @remarks
1174
- * Requirements:
1175
- *
1176
- * - Must use HTTPS
1177
- * - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
1178
- * - Maximum length: 4096 characters
1179
- * - The dimensions of the thumbnail video must match the video's aspect ratio to prevent the thumbnail from appearing squashed or stretched
1180
- * - Must not be an AVI file. Although our APIs support uploading AVI videos, Canva can't preview them because of native support of browsers
1181
- */
1182
- thumbnailVideoUrl?: string;
1183
- /**
1184
- * The URL of a thumbnail image to use as a fallback if `thumbnailVideoUrl` isn't provided.
1185
- * This can be an external URL or a data URL.
1186
- *
1187
- * @remarks
1188
- * Requirements for external URLs:
1189
- *
1190
- * - Must use HTTPS
1191
- * - Must support [Cross-Origin Resource Sharing](https://www.canva.dev/docs/apps/cross-origin-resource-sharing/)
1192
- * - Must be a PNG, JPEG, or SVG file
1193
- * - Maximum length: 4096 characters
1194
- *
1195
- * Requirements for data URLs:
1196
- *
1197
- * - Must include `;base64` for base64-encoded data
1198
- * - Maximum size: 10MB (10 × 1024 × 1024 characters)
1199
- * - The dimensions of the thumbnail must match the video's aspect ratio to prevent the thumbnail from appearing squashed or stretched
1200
- */
1201
- thumbnailImageUrl: string;
1202
- /**
1203
- * A disclosure identifying if the app generated this video using AI.
1204
- *
1205
- * @remarks
1206
- * Helps users make informed decisions about the content they interact with.
1207
- * See {@link AiDisclosure} for the full definition.
1208
- *
1209
- * **App Generated**
1210
- *
1211
- * 'app_generated' indicates when the app creates or significantly alters an asset using AI. Includes when
1212
- * the app requests a third-party service to take similar action on a video using AI.
1213
- *
1214
- * Required for the following cases (this list is not exhaustive):
1215
- * | Case | Reason |
1216
- * | -- | -- |
1217
- * | AI generates a new video from scratch | Creates new creative content |
1218
- * | AI changes the style of the video e.g. makes it cartoon | Significantly alters the style |
1219
- * | AI adds subtitles that rely on subjective interpretation | Creates new creative content |
1220
- * | AI expands a video by generating new content to fill the edges | Creates new creative content |
1221
- * | AI animates an image | Creates new creative content |
1222
- * | AI fixes defects e.g. blur in a video by generating details | Creates new creative content |
1223
- * | AI generates a talking head presenter | Creates new creative content |
1224
- *
1225
- * **None**
1226
- *
1227
- * 'none' indicates when the app doesn't create or significantly alter an asset using AI, or as a part of
1228
- * a request to third-party hosted content.
1229
- *
1230
- * Required for the following cases (this list is not exhaustive):
1231
- * | Case | Reason |
1232
- * | -- | -- |
1233
- * | Asset comes from an asset library | Didn't generate the asset itself |
1234
- * | AI corrects red eyes | A minor correction |
1235
- * | AI adjusts brightness and contrast on a video | Doesn't change original meaning by itself |
1236
- * | AI creates a slow motion effect in a video | Doesn't change original meaning by itself |
1237
- * | AI adds AI word-by-word transcribed subtitles to a video | Doesn't change original meaning by itself |
1238
- */
1239
- aiDisclosure: AiDisclosure;
1240
- } & AllOrNone<Dimensions>;
1241
-
1242
- export {};