@pushwoosh/smart-components-kit 1.3.37 → 1.5.0

package/MediaStorage/CanvaImportDrawer.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+import type { GetCanvaStatusResponse } from '@pushwoosh/rpc-v2-http-api-data/canva';
+import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+type CanvaImportDrawerProps = {
+    application: string;
+    isOpen: boolean;
+    status: GetCanvaStatusResponse;
+    onStatusChange: () => void;
+    onClose: () => void;
+    onImported: (files: MediaFile[]) => void;
+};
+/** Drawer that connects the user's Canva and imports pages of a chosen design into the library. */
+export declare const CanvaImportDrawer: FC<CanvaImportDrawerProps>;
+export {};

package/MediaStorage/CanvaImportDrawer.js

@@ -0,0 +1,386 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button, Chip, Drawer, DrawerBody, DrawerHeader, DrawerTitle, NativeInput, useToast } from '@pushwoosh/dumb-components';
+import { FlexContainer, useAsync, Vertical } from '@pushwoosh/kit-helpers';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { Text } from '@pushwoosh/kit-typography';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { ConsentClosedError, connectCanva, disconnectCanva, PopupBlockedError, UnsafeReturnPageError } from './canva';
+import { togglePages } from './canvaPages';
+import { useLang } from './polyglot';
+import { Chips, DesignCaption, DesignTile, EmptyState, FieldLabel, Grid, Segment, SegmentItem, TileImage } from './styles';
+const MAX_PAGES = 10;
+const SEARCH_DELAY_MS = 400;
+const POLL_INTERVAL_MS = 1500;
+const IMPORT_TIMEOUT_MS = 10 * 60 * 1000;
+const errorMessage = (error, fallback) => error instanceof Error && error.message ? error.message : fallback;
+const sleep = ms => new Promise(resolve => {
+  window.setTimeout(resolve, ms);
+});
+/** Drawer that connects the user's Canva and imports pages of a chosen design into the library. */
+export const CanvaImportDrawer = ({
+  application,
+  isOpen,
+  status,
+  onStatusChange,
+  onClose,
+  onImported
+}) => {
+  const lang = useLang();
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const [query, setQuery] = useState('');
+  const [debouncedQuery, setDebouncedQuery] = useState('');
+  const [designs, setDesigns] = useState([]);
+  const [continuation, setContinuation] = useState('');
+  const [selected, setSelected] = useState(null);
+  const [pages, setPages] = useState([1]);
+  const [format, setFormat] = useState('CANVA_IMPORT_FORMAT_PNG');
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const runRef = useRef(0);
+  const queryRef = useRef('');
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+  queryRef.current = debouncedQuery;
+  const isReady = status.connected && status.tokenValid;
+  useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedQuery(query.trim()), SEARCH_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  }, [query]);
+  const designsAsync = useAsync(async () => {
+    if (!isOpen || !isReady) return null;
+    return rpcGateway.canva.ListDesigns({
+      query: debouncedQuery
+    });
+  }, [rpcGateway, isOpen, isReady, debouncedQuery]);
+  useEffect(() => {
+    setDesigns(designsAsync.value?.designs ?? []);
+    setContinuation(designsAsync.value?.continuation ?? '');
+  }, [designsAsync.value]);
+  useEffect(() => {
+    if (designsAsync.error) {
+      openToast({
+        title: errorMessage(designsAsync.error, lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+        })),
+        type: 'error'
+      });
+    }
+  }, [designsAsync.error, openToast, lang]);
+  useEffect(() => () => {
+    runRef.current += 1;
+  }, []);
+  const loadMore = async () => {
+    if (isLoadingMore) return;
+    const queryAtStart = debouncedQuery;
+    setIsLoadingMore(true);
+    try {
+      const page = await rpcGateway.canva.ListDesigns({
+        query: queryAtStart,
+        continuation
+      });
+      if (queryRef.current !== queryAtStart) return;
+      setDesigns(prev => {
+        const seen = new Set(prev.map(design => design.id));
+        return [...prev, ...(page.designs ?? []).filter(design => !seen.has(design.id))];
+      });
+      setContinuation(page.continuation ?? '');
+    } catch (error) {
+      openToast({
+        title: errorMessage(error, lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+        })),
+        type: 'error'
+      });
+    } finally {
+      setIsLoadingMore(false);
+    }
+  };
+  const handleConnect = async () => {
+    setIsConnecting(true);
+    try {
+      await connectCanva(rpcGateway);
+      onStatusChange();
+    } catch (error) {
+      if (!(error instanceof ConsentClosedError)) {
+        const title = error instanceof PopupBlockedError ? lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.POPUP_BLOCKED'
+        }) : lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.CONNECT_FAILED'
+        });
+        if (error instanceof UnsafeReturnPageError) {
+          console.error('Canva connect refused: /robots.txt on this origin is not served as plain text');
+        }
+        openToast({
+          title,
+          type: 'error'
+        });
+      }
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const handleDisconnect = async () => {
+    try {
+      await disconnectCanva(rpcGateway);
+      onStatusChange();
+    } catch (error) {
+      openToast({
+        title: errorMessage(error, lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+        })),
+        type: 'error'
+      });
+    }
+  };
+  const selectDesign = design => {
+    setSelected(design);
+    setPages([1]);
+  };
+  const togglePage = page => {
+    setPages(prev => togglePages(prev, page, MAX_PAGES));
+  };
+  const handleImport = async () => {
+    if (!selected) return;
+    runRef.current += 1;
+    const run = runRef.current;
+    setProgress(lang({
+      message: 'SMART.MEDIA_STORAGE.CANVA.EXPORTING'
+    }));
+    try {
+      const {
+        importId
+      } = await rpcGateway.canva.StartImport({
+        application,
+        designId: selected.id,
+        pages,
+        format
+      });
+      const startedAt = Date.now();
+      for (;;) {
+        await sleep(POLL_INTERVAL_MS);
+        if (runRef.current !== run) return;
+        if (Date.now() - startedAt > IMPORT_TIMEOUT_MS) {
+          throw new Error(lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+          }));
+        }
+        const state = await rpcGateway.canva.GetImport({
+          importId
+        });
+        if (runRef.current !== run) return;
+        if (state.state === 'CANVA_IMPORT_STATE_FAILED') {
+          throw new Error(state.error);
+        }
+        if (state.state === 'CANVA_IMPORT_STATE_DONE') {
+          openToast({
+            title: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.SUCCESS'
+            }),
+            type: 'success'
+          });
+          onImported(state.files ?? []);
+          if (isOpenRef.current) onClose();
+          return;
+        }
+        if (state.state === 'CANVA_IMPORT_STATE_UPLOADING') {
+          setProgress(lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.IMPORTING',
+            done: state.pagesDone,
+            total: state.pagesTotal
+          }));
+        }
+      }
+    } catch (error) {
+      if (runRef.current === run) {
+        openToast({
+          title: errorMessage(error, lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.ERROR'
+          })),
+          type: 'error'
+        });
+      }
+    } finally {
+      if (runRef.current === run) setProgress(null);
+    }
+  };
+  const pageCount = selected ? Math.max(selected.pageCount, 1) : 0;
+  return _jsxs(Drawer, {
+    size: "medium",
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [_jsx(DrawerHeader, {
+      children: _jsxs(DrawerTitle, {
+        children: [_jsx("span", {
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.TITLE'
+          })
+        }), _jsx(Button, {
+          view: "ghost",
+          color: "secondary",
+          size: "compact",
+          icon: _jsx(CloseIcon, {
+            size: "small"
+          }),
+          "aria-label": lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.CLOSE'
+          }),
+          onClick: onClose
+        })]
+      })
+    }), _jsxs(DrawerBody, {
+      children: [!isReady && _jsxs(Vertical, {
+        "$gap": 12,
+        children: [_jsx(Text, {
+          children: status.connected ? lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.RECONNECT_HINT'
+          }) : lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.CONNECT_HINT'
+          })
+        }), _jsx("div", {
+          children: _jsx(Button, {
+            color: "primary",
+            isLoading: isConnecting,
+            isDisabled: isConnecting,
+            onClick: () => void handleConnect(),
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.CONNECT'
+            })
+          })
+        })]
+      }), isReady && _jsxs(Vertical, {
+        "$gap": 16,
+        children: [_jsxs(FlexContainer, {
+          "$alignItems": "center",
+          "$gap": 8,
+          children: [_jsx(Text, {
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.CONNECTED_AS',
+              name: status.identity
+            })
+          }), _jsx(Button, {
+            view: "ghost",
+            color: "secondary",
+            size: "compact",
+            onClick: () => void handleDisconnect(),
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.DISCONNECT'
+            })
+          })]
+        }), _jsx(NativeInput, {
+          value: query,
+          placeholder: lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.SEARCH'
+          }),
+          "aria-label": lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.SEARCH'
+          }),
+          onChange: event => setQuery(event.target.value)
+        }), !designsAsync.loading && designs.length === 0 && _jsx(EmptyState, {
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.CANVA.EMPTY'
+          })
+        }), _jsx(Grid, {
+          children: designs.map(design => _jsxs(DesignTile, {
+            type: "button",
+            "$selected": selected?.id === design.id,
+            disabled: progress !== null,
+            onClick: () => selectDesign(design),
+            children: [_jsx(TileImage, {
+              src: design.thumbnailUrl,
+              alt: "",
+              loading: "lazy"
+            }), _jsxs(DesignCaption, {
+              children: [_jsx("span", {
+                children: design.title || lang({
+                  message: 'SMART.MEDIA_STORAGE.CANVA.UNTITLED'
+                })
+              }), _jsx("span", {
+                children: lang({
+                  message: 'SMART.MEDIA_STORAGE.CANVA.PAGES',
+                  count: Math.max(design.pageCount, 1)
+                })
+              })]
+            })]
+          }, design.id))
+        }), continuation && _jsx("div", {
+          children: _jsx(Button, {
+            view: "ghost",
+            color: "secondary",
+            isLoading: isLoadingMore,
+            isDisabled: isLoadingMore,
+            onClick: () => void loadMore(),
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CANVA.LOAD_MORE'
+            })
+          })
+        }), selected && _jsxs(Vertical, {
+          "$gap": 12,
+          children: [pageCount > 1 && _jsxs("div", {
+            children: [_jsx(FieldLabel, {
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CANVA.PAGES_LABEL',
+                max: MAX_PAGES
+              })
+            }), _jsx(Chips, {
+              children: Array.from({
+                length: pageCount
+              }, (_, index) => index + 1).map(page => _jsx(Chip, {
+                "$selected": pages.includes(page),
+                "aria-pressed": pages.includes(page),
+                onClick: () => togglePage(page),
+                children: page
+              }, page))
+            })]
+          }), _jsxs("div", {
+            children: [_jsx(FieldLabel, {
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL'
+              })
+            }), _jsxs(Segment, {
+              role: "radiogroup",
+              "aria-label": lang({
+                message: 'SMART.MEDIA_STORAGE.CANVA.FORMAT_LABEL'
+              }),
+              children: [_jsx(SegmentItem, {
+                type: "button",
+                role: "radio",
+                "aria-checked": format === 'CANVA_IMPORT_FORMAT_PNG',
+                "$active": format === 'CANVA_IMPORT_FORMAT_PNG',
+                onClick: () => setFormat('CANVA_IMPORT_FORMAT_PNG'),
+                children: "PNG"
+              }), _jsx(SegmentItem, {
+                type: "button",
+                role: "radio",
+                "aria-checked": format === 'CANVA_IMPORT_FORMAT_JPG',
+                "$active": format === 'CANVA_IMPORT_FORMAT_JPG',
+                onClick: () => setFormat('CANVA_IMPORT_FORMAT_JPG'),
+                children: "JPG"
+              })]
+            })]
+          }), _jsxs(FlexContainer, {
+            "$alignItems": "center",
+            "$gap": 12,
+            children: [_jsx(Button, {
+              color: "primary",
+              isLoading: progress !== null,
+              isDisabled: progress !== null,
+              onClick: () => void handleImport(),
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CANVA.IMPORT'
+              })
+            }), progress && _jsx(Text, {
+              children: progress
+            })]
+          })]
+        })]
+      })]
+    })]
+  });
+};

package/MediaStorage/MediaStorage.js

@@ -5,11 +5,12 @@ import { FlexContainer, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, EditIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
+import { CanvaImportDrawer } from './CanvaImportDrawer';
 import { CreateCropDrawer } from './CreateCropDrawer';
 import { useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
-import { formatBytes, getCropCaption, getThumbUrl } from './mediaFile.utils';
+import { formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
 import { Lang, useLang } from './polyglot';
-import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, Tile, TileActions, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
+import { CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, SourceBadge, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const isAllowedImage = file => {
@@ -80,6 +81,10 @@ export const MediaStorage = ({
   const usageAsync = useAsync(() => rpcGateway.mediaFiles.GetUsage({
     application
   }), [rpcGateway, application, reloadToken, usageToken]);
+  const [canvaToken, setCanvaToken] = useState(0);
+  const [isCanvaOpen, setIsCanvaOpen] = useState(false);
+  const canvaStatusAsync = useAsync(() => rpcGateway.canva.GetStatus({}), [rpcGateway, canvaToken]);
+  const canvaStatus = canvaStatusAsync.value;
   const {
     loading
   } = listAsync;
@@ -242,28 +247,36 @@ export const MediaStorage = ({
   const totalPages = Math.ceil(total / perPage);
   const showPagination = !loading && files.length > 0 && totalPages > 1;
   return _jsxs(_Fragment, {
-    children: [_jsxs(Dropzone, {
-      type: "button",
-      "$dragOver": isDragOver,
-      disabled: isUploading,
-      onClick: () => uploadInputRef.current?.click(),
-      onDragOver: event => {
-        event.preventDefault();
-        setIsDragOver(true);
-      },
-      onDragLeave: () => setIsDragOver(false),
-      onDrop: event => {
-        event.preventDefault();
-        setIsDragOver(false);
-        void uploadFiles(Array.from(event.dataTransfer.files));
-      },
-      children: [_jsx(UploadIcon, {
-        size: "medium",
-        view: "lined"
-      }), isUploading ? lang({
-        message: 'SMART.MEDIA_STORAGE.UPLOADING'
-      }) : lang({
-        message: 'SMART.MEDIA_STORAGE.DROPZONE_HINT'
+    children: [_jsxs(DropzoneRow, {
+      children: [_jsxs(Dropzone, {
+        type: "button",
+        "$dragOver": isDragOver,
+        disabled: isUploading,
+        onClick: () => uploadInputRef.current?.click(),
+        onDragOver: event => {
+          event.preventDefault();
+          setIsDragOver(true);
+        },
+        onDragLeave: () => setIsDragOver(false),
+        onDrop: event => {
+          event.preventDefault();
+          setIsDragOver(false);
+          void uploadFiles(Array.from(event.dataTransfer.files));
+        },
+        children: [_jsx(UploadIcon, {
+          size: "medium",
+          view: "lined"
+        }), isUploading ? lang({
+          message: 'SMART.MEDIA_STORAGE.UPLOADING'
+        }) : lang({
+          message: 'SMART.MEDIA_STORAGE.DROPZONE_HINT'
+        })]
+      }), canvaStatus?.available && _jsx(Button, {
+        color: "secondary",
+        onClick: () => setIsCanvaOpen(true),
+        children: lang({
+          message: 'SMART.MEDIA_STORAGE.CANVA.BUTTON'
+        })
       })]
     }), _jsx(HiddenInput, {
       ref: uploadInputRef,
@@ -314,6 +327,7 @@ export const MediaStorage = ({
       children: files.map(file => {
         const crops = cropsByUuid[file.uuid] ?? [];
         const warning = fileWarning?.(file);
+        const sourceLabel = getSourceLabel(file);
         return _jsxs(Tile, {
           "$selected": selectedUuids.includes(file.uuid),
           children: [_jsx(TileImage, {
@@ -328,11 +342,20 @@ export const MediaStorage = ({
               isDisabled: isBulkDeleting,
               onChange: () => toggleSelected(file.uuid)
             })
-          }), crops.length > 0 && _jsx(CropBadge, {
-            children: lang({
-              message: 'SMART.MEDIA_STORAGE.CROPS_BADGE',
-              count: crops.length
-            })
+          }), _jsxs(TileBadges, {
+            children: [sourceLabel && _jsx(SourceBadge, {
+              children: sourceLabel
+            }), hasVersions(file) && _jsx(CountBadge, {
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.VERSIONS_BADGE',
+                count: file.versionsCount
+              })
+            }), crops.length > 0 && _jsx(CountBadge, {
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CROPS_BADGE',
+                count: crops.length
+              })
+            })]
           }), warning && _jsx(WarningBadge, {
             title: warning,
             children: warning
@@ -428,6 +451,18 @@ export const MediaStorage = ({
           size: formatBytes(usageAsync.value.totalSize)
         })
       })]
+    }), canvaStatus?.available && _jsx(CanvaImportDrawer, {
+      application: application,
+      isOpen: isCanvaOpen,
+      status: canvaStatus,
+      onStatusChange: () => setCanvaToken(token => token + 1),
+      onClose: () => setIsCanvaOpen(false),
+      onImported: () => {
+        if (pageRef.current !== 0) {
+          onPageChange(0);
+        }
+        setReloadToken(token => token + 1);
+      }
     }), _jsx(CreateCropDrawer, {
       application: application,
       original: createCropFor,
@@ -442,7 +477,7 @@ export const MediaStorage = ({
         message: 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.TITLE'
       }),
       description: lang({
-        message: 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION'
+        message: pendingDelete && hasVersions(pendingDelete) ? 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION' : 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION'
       }),
       confirmButtonText: lang({
         message: 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.BUTTON'

package/MediaStorage/canva.d.ts

@@ -0,0 +1,18 @@
+import type { API as RpcGatewayAPI } from '@pushwoosh/rpc-v2-http-api-data';
+/** Error raised when the browser refused to open the Canva consent window. */
+export declare class PopupBlockedError extends Error {
+}
+/** Consent result read from the pop-up once it is back on our origin; null while it is still elsewhere. */
+export declare const readConsentReturn: (location: Pick<Location, "origin" | "hash">, origin: string) => URLSearchParams | null;
+/** Error raised when the user closed the consent pop-up without finishing. */
+export declare class ConsentClosedError extends Error {
+}
+/** Error raised when the return page is not plain static text: the code must not land in an app. */
+export declare class UnsafeReturnPageError extends Error {
+}
+/** True when the response is served as plain text, i.e. no app bundle runs on that page. */
+export declare const isStaticText: (contentType: string | null) => boolean;
+/** Connects the user's Canva in a pop-up that returns to a static text file on this origin. */
+export declare const connectCanva: (rpcGateway: RpcGatewayAPI) => Promise<void>;
+/** Revokes and forgets the signed-in user's Canva connection. */
+export declare const disconnectCanva: (rpcGateway: RpcGatewayAPI) => Promise<unknown>;

package/MediaStorage/canva.js

@@ -0,0 +1,86 @@
+const PROVIDER = 'canva';
+const POLL_INTERVAL_MS = 500;
+const CONNECT_TIMEOUT_MS = 10 * 60 * 1000;
+/** Error raised when the browser refused to open the Canva consent window. */
+export class PopupBlockedError extends Error {}
+/** Consent result read from the pop-up once it is back on our origin; null while it is still elsewhere. */
+export const readConsentReturn = (location, origin) => {
+  if (location.origin !== origin) return null;
+  const params = new URLSearchParams(location.hash.replace(/^#/, ''));
+  return params.get('oauth_provider') === PROVIDER ? params : null;
+};
+/** Error raised when the user closed the consent pop-up without finishing. */
+export class ConsentClosedError extends Error {}
+const waitForReturn = (popup, origin) => new Promise((resolve, reject) => {
+  const startedAt = Date.now();
+  const timer = window.setInterval(() => {
+    if (popup.closed) {
+      window.clearInterval(timer);
+      reject(new ConsentClosedError());
+      return;
+    }
+    if (Date.now() - startedAt > CONNECT_TIMEOUT_MS) {
+      window.clearInterval(timer);
+      popup.close();
+      reject(new Error('timeout'));
+      return;
+    }
+    let params = null;
+    try {
+      params = readConsentReturn(popup.location, origin);
+    } catch {
+      return;
+    }
+    if (!params) return;
+    window.clearInterval(timer);
+    popup.close();
+    resolve(params);
+  }, POLL_INTERVAL_MS);
+});
+/** Error raised when the return page is not plain static text: the code must not land in an app. */
+export class UnsafeReturnPageError extends Error {}
+/** True when the response is served as plain text, i.e. no app bundle runs on that page. */
+export const isStaticText = contentType => (contentType ?? '').toLowerCase().startsWith('text/plain');
+const ensureStaticReturn = async url => {
+  const response = await fetch(url, {
+    method: 'HEAD',
+    cache: 'no-store',
+    credentials: 'omit'
+  });
+  if (!response.ok || !isStaticText(response.headers.get('content-type'))) throw new UnsafeReturnPageError();
+};
+/** Connects the user's Canva in a pop-up that returns to a static text file on this origin. */
+export const connectCanva = async rpcGateway => {
+  const {
+    origin
+  } = window.location;
+  const returnTo = `${origin}/robots.txt`;
+  const popup = window.open('', 'pushwoosh-canva-connect', 'width=640,height=760');
+  if (!popup) throw new PopupBlockedError();
+  try {
+    await ensureStaticReturn(returnTo);
+    const {
+      authUrl
+    } = await rpcGateway.integrations.GetOAuthAuthURL({
+      provider: PROVIDER,
+      returnTo
+    });
+    popup.location.href = authUrl;
+  } catch (error) {
+    popup.close();
+    throw error;
+  }
+  const params = await waitForReturn(popup, origin);
+  if (params.get('oauth_status') !== 'pending') {
+    throw new Error(params.get('oauth_error') || 'Canva consent was not given');
+  }
+  await rpcGateway.integrations.CompleteOAuthAuthorization({
+    provider: PROVIDER,
+    state: params.get('oauth_state') ?? '',
+    code: params.get('oauth_code') ?? ''
+  });
+};
+/** Revokes and forgets the signed-in user's Canva connection. */
+export const disconnectCanva = rpcGateway => rpcGateway.integrations.DeleteOAuthIntegration({
+  provider: PROVIDER
+});

package/MediaStorage/canvaPages.d.ts

@@ -0,0 +1,2 @@
+/** Next page selection after a click: at least one page stays selected, at most `max`, in order. */
+export declare const togglePages: (selected: number[], page: number, max: number) => number[];

package/MediaStorage/canvaPages.js

@@ -0,0 +1,7 @@
+/** Next page selection after a click: at least one page stays selected, at most `max`, in order. */
+export const togglePages = (selected, page, max) => {
+  if (selected.includes(page)) {
+    return selected.length > 1 ? selected.filter(item => item !== page) : selected;
+  }
+  return selected.length < max ? [...selected, page].sort((a, b) => a - b) : selected;
+};

package/MediaStorage/index.d.ts

@@ -1,3 +1,4 @@
 export { MediaStorage } from './MediaStorage';
 export { MediaStoragePaginated } from './MediaStoragePaginated';
 export type { MediaStorageProps, MediaStoragePaginatedProps } from './types';
+export { connectCanva, disconnectCanva, PopupBlockedError } from './canva';

package/MediaStorage/index.js

@@ -1,2 +1,3 @@
 export { MediaStorage } from './MediaStorage';
-export { MediaStoragePaginated } from './MediaStoragePaginated';
+export { MediaStoragePaginated } from './MediaStoragePaginated';
+export { connectCanva, disconnectCanva, PopupBlockedError } from './canva';