@datawheel/bespoke 0.6.0-rc.14 → 0.6.0-rc.2

package/dist/index.js

@@ -22,11 +22,10 @@ import { Notifications, notifications } from '@mantine/notifications';
 import { useDispatch, useSelector } from 'react-redux';
 import Router, { useRouter } from 'next/router';
 import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useUncontrolled, useHotkeys, useListState, randomId, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCheck, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconLanguageOff, IconTriangleInvertedFilled, IconCode, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCheck, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import Link from 'next/link';
 import parse2, { Element as Element$1, domToReact, Text as Text$1 } from 'html-react-parser';
 import { UserProvider, withPageAuthRequired, useUser } from '@auth0/nextjs-auth0/client';
-import { initFrameAndPoll, Framer } from '@newswire/frames';
 import { MantineReactTable } from 'mantine-react-table';
 import { dataConcat, dataLoad } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
@@ -51,9 +50,8 @@ import { Prism } from '@mantine/prism';
 import slugifyFn from 'slugify';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
-import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
 import { select } from 'd3-selection';
-import { getFontEmbedCSS, toPng } from 'html-to-image';
+import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
 import Head from 'next/head';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { format } from 'pretty-format';
@@ -265,8 +263,8 @@ var init_ExploreFilters = __esm({
 });
 
 // api/http/lib.ts
-function http(axios10, config) {
-  return axios10.request(config).then((response) => {
+function http(axios11, config) {
+  return axios11.request(config).then((response) => {
     const { status, data } = response;
     return "error" in data ? { ok: false, status, error: data.error } : { ok: true, status, data: data.data };
   }, (err) => {
@@ -277,26 +275,26 @@ function http(axios10, config) {
     return { ok: false, status: 500, error: err.message };
   });
 }
-function httpGET(axios10, request, transformParams) {
+function httpGET(axios11, request, transformParams) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (params) => http(axios10, {
+  return (params) => http(axios11, {
     ...config,
     method: "GET",
     params: transformParams ? transformParams(params) : params
   });
 }
-function httpPOST(axios10, request, transformPayload) {
+function httpPOST(axios11, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (payload) => http(axios10, {
+  return (payload) => http(axios11, {
     ...config,
     method: "POST",
     data: transformPayload ? transformPayload(payload) : payload
   });
 }
-function httpDELETE(axios10, request, transformPayload) {
+function httpDELETE(axios11, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
   return (payload) => {
-    return http(axios10, {
+    return http(axios11, {
       ...config,
       method: "DELETE",
       params: transformPayload ? transformPayload(payload) : payload
@@ -310,8 +308,8 @@ var init_lib = __esm({
 });
 
 // api/http/image/imageSave.ts
-function httpImageSaveFactory(axios10, provider) {
-  return (params) => http(axios10, {
+function httpImageSaveFactory(axios11, provider) {
+  return (params) => http(axios11, {
     method: "POST",
     url: `images/save/${provider}`,
     params: { prompt: params.prompt, provider }
@@ -325,8 +323,8 @@ var init_imageSave = __esm({
 });
 
 // api/http/image/imageSearch.ts
-function httpImageSearchFactory(axios10, provider) {
-  return (params) => http(axios10, {
+function httpImageSearchFactory(axios11, provider) {
+  return (params) => http(axios11, {
     method: "GET",
     url: `images/search/${provider}`,
     params: { prompt: params.prompt, page: params.page, provider }
@@ -340,8 +338,8 @@ var init_imageSearch = __esm({
 });
 
 // api/http/icon/listIcons.ts
-function httpListIconsFactory(axios10, provider) {
-  return () => http(axios10, {
+function httpListIconsFactory(axios11, provider) {
+  return () => http(axios11, {
     method: "GET",
     url: `list/icons/${provider}`,
     params: { provider }
@@ -355,8 +353,8 @@ var init_listIcons = __esm({
 });
 
 // api/http/icon/readIcon.ts
-function httpReadIconFactory(axios10, provider) {
-  return (params) => http(axios10, {
+function httpReadIconFactory(axios11, provider) {
+  return (params) => http(axios11, {
     method: "GET",
     url: `read/icons/${provider}/icon.svg`,
     params: { name: params.name }
@@ -369,65 +367,65 @@ var init_readIcon = __esm({
   }
 });
 function apiFactory(baseURL) {
-  const axios10 = axios.create({ baseURL });
+  const axios11 = axios.create({ baseURL });
   return {
-    createBulkBlock: httpPOST(axios10, "create/bulk/block"),
-    createBlock: httpPOST(axios10, "create/block"),
-    createDimension: httpPOST(axios10, "create/dimension"),
-    createFormatter: httpPOST(axios10, "create/formatter"),
-    createReport: httpPOST(axios10, "create/report"),
-    createSection: httpPOST(axios10, "create/section"),
-    createVariant: httpPOST(axios10, "create/variant"),
-    deleteBlock: httpDELETE(axios10, "delete/block", transformDeletePayload),
-    deleteDimension: httpDELETE(axios10, "delete/dimension", transformDeletePayload),
-    deleteFormatter: httpDELETE(axios10, "delete/formatter", transformDeletePayload),
-    deleteReport: httpDELETE(axios10, "delete/report", transformDeletePayload),
-    deleteSection: httpDELETE(axios10, "delete/section", transformDeletePayload),
-    deleteVariant: httpDELETE(axios10, "delete/variant", transformDeletePayload),
-    readBlock: httpGET(axios10, "read/block"),
-    readDimension: httpGET(axios10, "read/dimension"),
-    readFormatter: httpGET(axios10, "read/formatter"),
-    readReport: httpGET(axios10, "read/report"),
-    readSection: httpGET(axios10, "read/section"),
-    readVariant: httpGET(axios10, "read/variant"),
-    updateBulkBlock: httpPOST(axios10, "update/bulk/block"),
-    updateBlock: httpPOST(axios10, "update/block"),
-    updateDimension: httpPOST(axios10, "update/dimension"),
-    updateFormatter: httpPOST(axios10, "update/formatter"),
-    updateReport: httpPOST(axios10, "update/report"),
-    updateSection: httpPOST(axios10, "update/section"),
-    updateVariant: httpPOST(axios10, "update/variant"),
-    searchReport: httpGET(axios10, "search/reports"),
-    validateVariantSlug: httpGET(axios10, "validate/variant"),
-    readMember: httpGET(axios10, "read/members", transformReadMembers),
-    readMemberImage: httpGET(axios10, {
+    createBulkBlock: httpPOST(axios11, "create/bulk/block"),
+    createBlock: httpPOST(axios11, "create/block"),
+    createDimension: httpPOST(axios11, "create/dimension"),
+    createFormatter: httpPOST(axios11, "create/formatter"),
+    createReport: httpPOST(axios11, "create/report"),
+    createSection: httpPOST(axios11, "create/section"),
+    createVariant: httpPOST(axios11, "create/variant"),
+    deleteBlock: httpDELETE(axios11, "delete/block", transformDeletePayload),
+    deleteDimension: httpDELETE(axios11, "delete/dimension", transformDeletePayload),
+    deleteFormatter: httpDELETE(axios11, "delete/formatter", transformDeletePayload),
+    deleteReport: httpDELETE(axios11, "delete/report", transformDeletePayload),
+    deleteSection: httpDELETE(axios11, "delete/section", transformDeletePayload),
+    deleteVariant: httpDELETE(axios11, "delete/variant", transformDeletePayload),
+    readBlock: httpGET(axios11, "read/block"),
+    readDimension: httpGET(axios11, "read/dimension"),
+    readFormatter: httpGET(axios11, "read/formatter"),
+    readReport: httpGET(axios11, "read/report"),
+    readSection: httpGET(axios11, "read/section"),
+    readVariant: httpGET(axios11, "read/variant"),
+    updateBulkBlock: httpPOST(axios11, "update/bulk/block"),
+    updateBlock: httpPOST(axios11, "update/block"),
+    updateDimension: httpPOST(axios11, "update/dimension"),
+    updateFormatter: httpPOST(axios11, "update/formatter"),
+    updateReport: httpPOST(axios11, "update/report"),
+    updateSection: httpPOST(axios11, "update/section"),
+    updateVariant: httpPOST(axios11, "update/variant"),
+    searchReport: httpGET(axios11, "search/reports"),
+    validateVariantSlug: httpGET(axios11, "validate/variant"),
+    readMember: httpGET(axios11, "read/members", transformReadMembers),
+    readMemberImage: httpGET(axios11, {
       url: "member/image",
       responseType: "blob"
     }),
-    searchMember: httpGET(axios10, "search/members"),
-    updateMember: httpGET(axios10, "update/members"),
-    imageLocalSearch: httpImageSearchFactory(axios10, "local"),
-    imageLocalSave: httpImageSaveFactory(axios10, "local"),
-    imageFlickrSearch: httpImageSearchFactory(axios10, "flickr"),
-    imageFlickrSave: httpImageSaveFactory(axios10, "flickr"),
-    imageUnsplashSearch: httpImageSearchFactory(axios10, "unsplash"),
-    imageUnsplashSave: httpImageSaveFactory(axios10, "unsplash"),
-    imageUploadSave: httpImageSaveFactory(axios10, "upload"),
-    imageAdobeSearch: httpImageSearchFactory(axios10, "adobe"),
-    imageAdobeSave: httpImageSaveFactory(axios10, "adobe"),
-    readMetadata: httpGET(axios10, "read/metadata"),
-    regenerateSearch: httpPOST(axios10, "search/regenerate"),
-    urlProxy: httpGET(axios10, "url/proxy"),
-    searchRole: httpGET(axios10, "auth/search/roles"),
-    searchUser: httpGET(axios10, "auth/search/users"),
-    readUser: httpGET(axios10, "auth/read/user"),
-    updateUser: httpPOST(axios10, "auth/update/user"),
-    updateMyData: httpPOST(axios10, "auth/update/me"),
-    revalidateReport: httpGET(axios10, "revalidate/report"),
-    revalidateUrl: httpGET(axios10, "revalidate/url"),
-    readPrivateBlocks: httpPOST(axios10, "read/blocks/private"),
-    listTablerIcons: httpListIconsFactory(axios10, "tabler"),
-    readTablerIcon: httpReadIconFactory(axios10, "tabler")
+    searchMember: httpGET(axios11, "search/members"),
+    updateMember: httpGET(axios11, "update/members"),
+    imageLocalSearch: httpImageSearchFactory(axios11, "local"),
+    imageLocalSave: httpImageSaveFactory(axios11, "local"),
+    imageFlickrSearch: httpImageSearchFactory(axios11, "flickr"),
+    imageFlickrSave: httpImageSaveFactory(axios11, "flickr"),
+    imageUnsplashSearch: httpImageSearchFactory(axios11, "unsplash"),
+    imageUnsplashSave: httpImageSaveFactory(axios11, "unsplash"),
+    imageUploadSave: httpImageSaveFactory(axios11, "upload"),
+    imageAdobeSearch: httpImageSearchFactory(axios11, "adobe"),
+    imageAdobeSave: httpImageSaveFactory(axios11, "adobe"),
+    readMetadata: httpGET(axios11, "read/metadata"),
+    regenerateSearch: httpPOST(axios11, "search/regenerate"),
+    urlProxy: httpGET(axios11, "url/proxy"),
+    searchRole: httpGET(axios11, "auth/search/roles"),
+    searchUser: httpGET(axios11, "auth/search/users"),
+    readUser: httpGET(axios11, "auth/read/user"),
+    updateUser: httpPOST(axios11, "auth/update/user"),
+    updateMyData: httpPOST(axios11, "auth/update/me"),
+    revalidateReport: httpGET(axios11, "revalidate/report"),
+    revalidateUrl: httpGET(axios11, "revalidate/url"),
+    readPrivateBlocks: httpPOST(axios11, "read/blocks/private"),
+    listTablerIcons: httpListIconsFactory(axios11, "tabler"),
+    readTablerIcon: httpReadIconFactory(axios11, "tabler")
   };
 }
 var transformDeletePayload, transformReadMembers;
@@ -4095,7 +4093,7 @@ var init_store = __esm({
     storeWrapper = createWrapper(storeFactory);
   }
 });
-function withFetcher(Component, useRef16) {
+function withFetcher(Component, useRef14) {
   const ComponentWithFetcher = (props) => {
     const {
       id,
@@ -4103,7 +4101,7 @@ function withFetcher(Component, useRef16) {
       skelWidth,
       ...otherProps
     } = props;
-    const ref = useRef16(id);
+    const ref = useRef14(id);
     if (ref.isUninitialized || ref.isFetching) {
       return /* @__PURE__ */ jsx(Skeleton, { width: skelWidth, height: skelHeight });
     }
@@ -5727,41 +5725,6 @@ var init_useScrollToAnchor = __esm({
     init_esm_shims();
   }
 });
-function useEmbed() {
-  const loaded = useRef(false);
-  useEffect(() => {
-    let prevRequests = 0;
-    let thresholdCount = 0;
-    const interval = setInterval(() => {
-      const resources = performance.getEntriesByType("resource");
-      const allRequestsComplete = resources.every((resource) => resource.responseEnd > 0);
-      if (prevRequests === resources.length && allRequestsComplete && thresholdCount > 3) {
-        clearInterval(interval);
-        if (!loaded.current) {
-          setTimeout(() => {
-            window.parent.postMessage("iframe-loaded", "*");
-          }, 500);
-          loaded.current = true;
-        }
-      } else {
-        if (resources.length > prevRequests) {
-          thresholdCount = 0;
-        } else {
-          thresholdCount++;
-        }
-        prevRequests = resources.length;
-      }
-    }, 300);
-    if (typeof document !== "undefined") {
-      initFrameAndPoll();
-    }
-  }, []);
-}
-var init_useEmbed = __esm({
-  "frontend/hooks/useEmbed.ts"() {
-    init_esm_shims();
-  }
-});
 function createOutline(elements, variables) {
   const roots = [];
   const nodes = {};
@@ -5879,7 +5842,6 @@ var init_hooks2 = __esm({
     init_useInitialState();
     init_useOnChangeSelector();
     init_useScrollToAnchor();
-    init_useEmbed();
     init_useContentOutline();
   }
 });
@@ -15979,25 +15941,6 @@ var init_DataTab = __esm({
     };
   }
 });
-function CopyInput(props) {
-  const { title, url, disabled = false } = props;
-  const Icon = disabled ? IconCode : IconLink;
-  return /* @__PURE__ */ jsx(Input.Wrapper, { label: title, children: /* @__PURE__ */ jsx(
-    Input,
-    {
-      icon: /* @__PURE__ */ jsx(Icon, {}),
-      value: url,
-      disabled,
-      readOnly: true,
-      rightSection: /* @__PURE__ */ jsx(CopyButton, { value: url, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { variant: copied ? "filled" : "subtle", onClick: copy, disabled, children: copied ? /* @__PURE__ */ jsx(IconClipboardCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconClipboardCopy, { size: 16 }) }) }) })
-    }
-  ) });
-}
-var init_CopyInput = __esm({
-  "components/options/CopyInput.tsx"() {
-    init_esm_shims();
-  }
-});
 function useLocalePrefix() {
   const { locales: locales4 } = useRouter();
   const locale = location && location.pathname.split("/").filter((segment) => segment.length > 0)[0];
@@ -16008,147 +15951,12 @@ var init_useLocalePrefix = __esm({
     init_esm_shims();
   }
 });
-function useEmbedPath(sectionId, vizId = void 0, queryParams = {}) {
-  const { query, locale } = useRouter();
-  const prefixLocale = useLocalePrefix();
-  const { pathSegment } = useBespoke();
-  const slugs = query[pathSegment];
-  if (slugs && Array.isArray(slugs)) {
-    const search = new URLSearchParams({ section: sectionId, ...queryParams });
-    if (vizId) {
-      search.set("viz", vizId);
-    }
-    const embed = `/embed/${slugs.join("/")}`;
-    const url = new URL(
-      prefixLocale ? `/${locale}${embed}` : `${embed}`,
-      location.href
-    );
-    url.search = search.toString();
-    return url.href;
-  }
-  return void 0;
-}
-function ShareTab(props) {
-  const { section } = props;
-  const [shareUrl, setShareUrl] = useState("");
-  const [title, setTitle] = useState("");
-  const [includeSection, setIncludeSection] = useState(true);
-  const optionsTranslations = useBespokeTranslations("options");
-  const embedPath = useEmbedPath(section.id);
-  const iframeStr = `<iframe width="100%" height="500px" frameborder="0" src="${embedPath}"></iframe>`;
-  const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["share_tab"] };
-  useEffect(() => {
-    setTitle(document.title);
-    const { origin, pathname } = window.location;
-    const url = `${origin}${pathname}`;
-    const sectionAnchor = includeSection ? `#section-${section.id}` : "";
-    setShareUrl(`${url}${sectionAnchor}`);
-  }, [includeSection]);
-  return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-share", children: [
-    /* @__PURE__ */ jsx(Space, { h: "xs" }),
-    /* @__PURE__ */ jsx(CopyInput, { title: `${translations["title"]}: ${title}`, url: shareUrl }),
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: includeSection,
-        label: translations["include_section"],
-        onChange: () => setIncludeSection(!includeSection),
-        radius: "xl"
-      }
-    ),
-    /* @__PURE__ */ jsx(CopyInput, { title: translations["embed"], url: iframeStr }),
-    /* @__PURE__ */ jsxs(Group, { position: "center", children: [
-      /* @__PURE__ */ jsx(
-        FacebookShareButton,
-        {
-          url: shareUrl,
-          quote: title,
-          children: /* @__PURE__ */ jsx(FacebookIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TwitterShareButton,
-        {
-          url: shareUrl,
-          title,
-          children: /* @__PURE__ */ jsx(TwitterIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TelegramShareButton,
-        {
-          url: shareUrl,
-          title,
-          children: /* @__PURE__ */ jsx(TelegramIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        WhatsappShareButton,
-        {
-          url: shareUrl,
-          title,
-          separator: ":: ",
-          children: /* @__PURE__ */ jsx(WhatsappIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(LinkedinShareButton, { url: shareUrl, children: /* @__PURE__ */ jsx(LinkedinIcon, { size: 32, round: true }) }),
-      /* @__PURE__ */ jsx(
-        RedditShareButton,
-        {
-          url: shareUrl,
-          title,
-          windowWidth: 660,
-          windowHeight: 460,
-          children: /* @__PURE__ */ jsx(RedditIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EmailShareButton,
-        {
-          url: shareUrl,
-          subject: title,
-          children: /* @__PURE__ */ jsx(EmailIcon, { size: 32, round: true })
-        }
-      )
-    ] })
-  ] });
-}
-var DEFAULT_TRANSLATIONS3;
-var init_ShareTab = __esm({
-  "components/options/tabs/ShareTab.tsx"() {
-    init_esm_shims();
-    init_CopyInput();
-    init_TranslationsProvider();
-    init_useLocalePrefix();
-    init_ResourceProvider();
-    DEFAULT_TRANSLATIONS3 = {
-      "title": "Title",
-      "include_section": "Include Section",
-      "embed": "Embed"
-    };
-  }
-});
-function exportSVG(svg) {
-  const serializer = new XMLSerializer();
-  let source = serializer.serializeToString(svg);
-  if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
-    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
-  }
-  if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
-    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
-  }
-  source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
-  const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
-  const a2 = document.createElement("a");
-  const e = new MouseEvent("click");
-  a2.download = "image.svg";
-  a2.href = url;
-  a2.dispatchEvent(e);
-}
 function ImageTab(props) {
   const { section } = props;
   const blocksIds = section.blocks || [];
-  const framer = useRef();
+  const { asPath, query, locale } = useRouter();
+  const prefixLocale = useLocalePrefix();
+  const { pathSegment } = useBespoke();
   const vizAvailable = useAppSelector((state) => blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => block.type === "visualization" && state.variables.status[block.id].allowed));
   const [imageContext, setImageContext] = useState(contextOptions.section);
   const [imageFormat, setImageFormat] = useState(formatOptions2.png);
@@ -16158,13 +15966,62 @@ function ImageTab(props) {
   const [transparentBackground, setTransparentBackground] = useState(false);
   const [loadingPreviews, setLoadingPreviews] = useState(false);
   const optionsTranslations = useBespokeTranslations("options");
-  const translations = { ...DEFAULT_TRANSLATIONS4, ...optionsTranslations["image_tab"] };
-  const search = Object.fromEntries(new URLSearchParams(location.search));
-  const selectors = Object.fromEntries(
-    Object.entries(search).filter(([key]) => key.match(/selector\d+id/))
-  );
+  const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["image_tab"] };
   const sectionId = slugify_default(section?.settings?.name) || `section-${section.id}`;
-  const embedPath = useEmbedPath(section.id, imageContext === contextOptions.viz ? vizSelected : void 0, selectors);
+  const onSaveClickSection = async () => {
+    const search = Object.fromEntries(new URLSearchParams(location.search));
+    const selectors = Object.fromEntries(
+      Object.entries(search).filter(([key]) => key.match(/selector\d+id/))
+    );
+    const body = {
+      path: asPath,
+      slugs: JSON.stringify(query[pathSegment]),
+      section: section.id,
+      query: selectors,
+      locale,
+      prefixLocale,
+      transparent: transparentBackground
+    };
+    setImageProcessing(true);
+    axios.post("/api/cms/img", body, { responseType: "blob" }).then((res) => {
+      const url = window.URL.createObjectURL(new Blob([res.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", "image.png");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      setImageProcessing(false);
+    });
+  };
+  const onSaveClickViz = async () => {
+    const search = Object.fromEntries(new URLSearchParams(location.search));
+    const selectors = Object.fromEntries(
+      Object.entries(search).filter(([key]) => key.match(/selector\d+id/))
+    );
+    const body = {
+      path: asPath,
+      slugs: JSON.stringify(query[pathSegment]),
+      section: section.id,
+      viz: vizSelected,
+      query: selectors,
+      locale,
+      prefixLocale,
+      transparent: transparentBackground,
+      svg: imageFormat === formatOptions2.svg
+    };
+    setImageProcessing(true);
+    axios.post("/api/cms/img", body, { responseType: "blob" }).then((res) => {
+      const url = window.URL.createObjectURL(new Blob([res.data]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", `image.${imageFormat.toLowerCase()}`);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      setImageProcessing(false);
+    });
+  };
   const generatePreviews = async () => {
     const { toCanvas } = await import('html-to-image');
     Promise.all(
@@ -16190,54 +16047,6 @@ function ImageTab(props) {
   const onSelectViz = (vizId) => () => {
     setVizSelected(vizId);
   };
-  const onDownloadIframe = () => {
-    setImageProcessing(true);
-    const container = document.getElementById("iframe-preview");
-    framer.current = new Framer(container, { src: embedPath });
-  };
-  useEffect(() => {
-    const onIframeLoad = async (e) => {
-      if (e.data === "iframe-loaded") {
-        if (imageFormat === formatOptions2.png) {
-          const iframe = document.querySelector("#iframe-preview > iframe");
-          const doc = iframe.contentDocument;
-          const node = doc?.querySelector(".bespoke-Section-root");
-          const fontEmbedCSS = await getFontEmbedCSS(node);
-          toPng(
-            node,
-            {
-              backgroundColor: transparentBackground ? "transparent" : "white",
-              cacheBust: true,
-              skipFonts: true,
-              fontEmbedCSS
-            }
-          ).then(function(dataUrl) {
-            const link = document.createElement("a");
-            link.href = dataUrl;
-            link.setAttribute("download", `${sectionId}.png`);
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            setImageProcessing(false);
-            if (typeof framer.current?.remove === "function") {
-              framer.current.remove();
-            }
-          }).catch(function(error) {
-            console.error("oops, something went wrong!", error);
-            setImageProcessing(false);
-          });
-        } else {
-          const iframe = document.querySelector("#iframe-preview > iframe");
-          const doc = iframe.contentDocument;
-          const svg = doc?.querySelector("svg.d3plus-viz");
-          if (svg)
-            exportSVG(svg);
-        }
-      }
-    };
-    window.addEventListener("message", onIframeLoad);
-    return () => window.removeEventListener("message", onIframeLoad);
-  }, [transparentBackground]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-image", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
     vizAvailable.length > 0 ? /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsx(
@@ -16284,7 +16093,28 @@ function ImageTab(props) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { height: 0, overflow: "scroll" }, children: /* @__PURE__ */ jsx("div", { id: "iframe-preview", "data-frame-src": embedPath, style: { width: 1366 } }) }),
+    imageContext !== contextOptions.section && /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_format"]}:`, children: /* @__PURE__ */ jsxs(Button.Group, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          leftIcon: /* @__PURE__ */ jsx(IconPolaroid, { size: 16 }),
+          onClick: () => setImageFormat(formatOptions2.png),
+          variant: imageFormat === formatOptions2.png ? "filled" : "default",
+          fullWidth: true,
+          children: formatOptions2.png
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          leftIcon: /* @__PURE__ */ jsx(IconCode, { size: 16 }),
+          onClick: () => setImageFormat(formatOptions2.svg),
+          variant: imageFormat === formatOptions2.svg ? "filled" : "default",
+          fullWidth: true,
+          children: formatOptions2.svg
+        }
+      )
+    ] }) }),
     imageFormat !== formatOptions2.svg && /* @__PURE__ */ jsx(
       Checkbox,
       {
@@ -16299,25 +16129,26 @@ function ImageTab(props) {
       {
         leftIcon: /* @__PURE__ */ jsx(IconDownload, { size: 16 }),
         loading: imageProcessing,
-        onClick: onDownloadIframe,
+        onClick: imageContext === contextOptions.section ? onSaveClickSection : onSaveClickViz,
         fullWidth: true,
         children: /* @__PURE__ */ jsx("span", { children: imageProcessing ? translations["processing"] : translations["download"].replace("{imageFormat}", imageFormat) })
       }
     )
   ] });
 }
-var contextOptions, formatOptions2, VizPreview2, DEFAULT_TRANSLATIONS4, getSectionNode, getVizNode;
+var contextOptions, formatOptions2, VizPreview2, DEFAULT_TRANSLATIONS3, getSectionNode, getVizNode;
 var init_ImageTab = __esm({
   "components/options/tabs/ImageTab.tsx"() {
     init_esm_shims();
     init_slugify();
     init_store2();
     init_TranslationsProvider();
+    init_ResourceProvider();
+    init_useLocalePrefix();
     init_d3plusPropify();
     init_varSwapRecursive();
     init_getBlockContent();
     init_hooks();
-    init_ShareTab();
     contextOptions = {
       viz: "viz",
       section: "section"
@@ -16371,7 +16202,7 @@ var init_ImageTab = __esm({
         )
       ] });
     };
-    DEFAULT_TRANSLATIONS4 = {
+    DEFAULT_TRANSLATIONS3 = {
       "wrong_node": "Wrong node in export",
       "choose_area": "Choose image area",
       "choose_viz": "Choose visualization",
@@ -16384,6 +16215,7 @@ var init_ImageTab = __esm({
       "source": "Source: {src}"
     };
     getSectionNode = (sectionId) => {
+      console.log({ sectionId });
       const sectionNode = document.getElementById(sectionId);
       return select(sectionNode).select(".bespoke-section-content").node();
     };
@@ -16393,6 +16225,142 @@ var init_ImageTab = __esm({
     };
   }
 });
+function CopyInput(props) {
+  const { title, url, disabled = false } = props;
+  const Icon = disabled ? IconCode : IconLink;
+  return /* @__PURE__ */ jsx(Input.Wrapper, { label: title, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, {}),
+      value: url,
+      disabled,
+      readOnly: true,
+      rightSection: /* @__PURE__ */ jsx(CopyButton, { value: url, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { variant: copied ? "filled" : "subtle", onClick: copy, disabled, children: copied ? /* @__PURE__ */ jsx(IconClipboardCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconClipboardCopy, { size: 16 }) }) }) })
+    }
+  ) });
+}
+var init_CopyInput = __esm({
+  "components/options/CopyInput.tsx"() {
+    init_esm_shims();
+  }
+});
+function useEmbedPath(sectionId) {
+  const { query, locale } = useRouter();
+  const prefixLocale = useLocalePrefix();
+  const { pathSegment } = useBespoke();
+  const slugs = query[pathSegment];
+  if (slugs && Array.isArray(slugs)) {
+    const search = new URLSearchParams({ section: sectionId });
+    const embed = `/embed/${slugs.join("/")}`;
+    const url = new URL(
+      prefixLocale ? `/${locale}${embed}` : `${embed}`,
+      location.href
+    );
+    url.search = search.toString();
+    return url.href;
+  }
+  return void 0;
+}
+function ShareTab(props) {
+  const { section } = props;
+  const [shareUrl, setShareUrl] = useState("");
+  const [title, setTitle] = useState("");
+  const [includeSection, setIncludeSection] = useState(true);
+  const optionsTranslations = useBespokeTranslations("options");
+  const embedPath = useEmbedPath(section.id);
+  const iframeStr = `<iframe width="100%" height="500px" frameborder="0" src="${embedPath}"></iframe>`;
+  const translations = { ...DEFAULT_TRANSLATIONS4, ...optionsTranslations["share_tab"] };
+  useEffect(() => {
+    setTitle(document.title);
+    const { origin, pathname } = window.location;
+    const url = `${origin}${pathname}`;
+    const sectionAnchor = includeSection ? `#section-${section.id}` : "";
+    setShareUrl(`${url}${sectionAnchor}`);
+  }, [includeSection]);
+  return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-share", children: [
+    /* @__PURE__ */ jsx(Space, { h: "xs" }),
+    /* @__PURE__ */ jsx(CopyInput, { title: `${translations["title"]}: ${title}`, url: shareUrl }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: includeSection,
+        label: translations["include_section"],
+        onChange: () => setIncludeSection(!includeSection),
+        radius: "xl"
+      }
+    ),
+    /* @__PURE__ */ jsx(CopyInput, { title: translations["embed"], url: iframeStr }),
+    /* @__PURE__ */ jsxs(Group, { position: "center", children: [
+      /* @__PURE__ */ jsx(
+        FacebookShareButton,
+        {
+          url: shareUrl,
+          quote: title,
+          children: /* @__PURE__ */ jsx(FacebookIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TwitterShareButton,
+        {
+          url: shareUrl,
+          title,
+          children: /* @__PURE__ */ jsx(TwitterIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TelegramShareButton,
+        {
+          url: shareUrl,
+          title,
+          children: /* @__PURE__ */ jsx(TelegramIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        WhatsappShareButton,
+        {
+          url: shareUrl,
+          title,
+          separator: ":: ",
+          children: /* @__PURE__ */ jsx(WhatsappIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(LinkedinShareButton, { url: shareUrl, children: /* @__PURE__ */ jsx(LinkedinIcon, { size: 32, round: true }) }),
+      /* @__PURE__ */ jsx(
+        RedditShareButton,
+        {
+          url: shareUrl,
+          title,
+          windowWidth: 660,
+          windowHeight: 460,
+          children: /* @__PURE__ */ jsx(RedditIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EmailShareButton,
+        {
+          url: shareUrl,
+          subject: title,
+          children: /* @__PURE__ */ jsx(EmailIcon, { size: 32, round: true })
+        }
+      )
+    ] })
+  ] });
+}
+var DEFAULT_TRANSLATIONS4;
+var init_ShareTab = __esm({
+  "components/options/tabs/ShareTab.tsx"() {
+    init_esm_shims();
+    init_CopyInput();
+    init_TranslationsProvider();
+    init_useLocalePrefix();
+    init_ResourceProvider();
+    DEFAULT_TRANSLATIONS4 = {
+      "title": "Title",
+      "include_section": "Include Section",
+      "embed": "Embed"
+    };
+  }
+});
 function OptionsModal(props) {
   const {
     section,
@@ -17522,8 +17490,8 @@ var init_Section = __esm({
       const slugs = Array.isArray(querySlugs) ? querySlugs?.join("/") : [];
       const prefixLocale = useLocalePrefix();
       let path = prefixLocale ? `/${locale}` : "";
-      path += `${profilePrefix}/${slugs}/`;
-      const link = new URL(path, window.location.href).href;
+      path += `/${profilePrefix}/${slugs}/`;
+      const link = new URL(path, window?.location.href).href;
       return /* @__PURE__ */ jsxs(Group, { position: "apart", noWrap: true, sx: { flexGrow: 1 }, children: [
         /* @__PURE__ */ jsx(Anchor, { href: link, target: "_blank", children: link }),
         /* @__PURE__ */ jsx(
@@ -17726,9 +17694,6 @@ var LoginButton_default = BespokeLoginBtn;
 init_esm_shims();
 var UserProvider_default = UserProvider;
 
-// frontend/index.ts
-init_hooks2();
-
 // frontend/components/auth/withPageRoleAuthRequired.tsx
 init_esm_shims();
 function withPageRoleAuthRequired(params) {
@@ -25853,4 +25818,4 @@ function BespokeRenderer({
   ] }) });
 }
 
-export { Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, LoginButton_default as BespokeLoginBtn, BespokeManager, BespokeRenderer, Report_default as BespokeReport, Search_default as BespokeSearch, UserProvider_default as BespokeUserProvider, withPageRoleAuthRequired as BespokeWithPageRoleAuthRequired, CMS_ROLES, DialogProvider, actions_exports as actions, storeWrapper, useAppDispatch as useBespokeDispatch, useAppSelector as useBespokeSelector, useUser_default as useBespokeUser, useDialog, useEmbed };
+export { Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, LoginButton_default as BespokeLoginBtn, BespokeManager, BespokeRenderer, Report_default as BespokeReport, Search_default as BespokeSearch, UserProvider_default as BespokeUserProvider, withPageRoleAuthRequired as BespokeWithPageRoleAuthRequired, CMS_ROLES, DialogProvider, actions_exports as actions, storeWrapper, useAppDispatch as useBespokeDispatch, useAppSelector as useBespokeSelector, useUser_default as useBespokeUser, useDialog };

package/dist/server.js

@@ -26,6 +26,7 @@ import * as allIcons from '@tabler/icons-react';
 import NextCors from 'nextjs-cors';
 import imageType from 'image-type';
 import formidable from 'formidable';
+import puppeteer from 'puppeteer';
 import DomParser from 'dom-parser';
 import path from 'path';
 import axiosRetry from 'axios-retry';
@@ -4219,6 +4220,242 @@ function endpointUpdateMyDataFactory(operations) {
     }
   }, []);
 }
+async function generatePDF(path2) {
+  const width = 1920;
+  const height = 1080;
+  const maxTimeoutPerPage = 0;
+  try {
+    const browser = await puppeteer.launch({
+      args: [
+        `--window-size=${width},${height}`,
+        "--start-fullscreen"
+      ],
+      defaultViewport: { width, height },
+      headless: "new",
+      ignoreHTTPSErrors: true
+    });
+    const url = new URL(path2);
+    const searchParams = new URLSearchParams(url.search);
+    searchParams.set("print", "true");
+    url.search = searchParams.toString();
+    const page = await browser.newPage();
+    await page.goto(url.toString(), { waitUntil: "networkidle0", timeout: maxTimeoutPerPage });
+    await page.waitForSelector("#bespoke-report", { timeout: maxTimeoutPerPage });
+    await page.evaluate(async () => {
+      await new Promise((resolve) => {
+        const scrollInterval = setInterval(() => {
+          window.scrollBy(0, window.innerHeight);
+        }, 100);
+        const checkNetworkActivity = () => {
+          const activeRequests = performance.getEntriesByType("resource").filter((entry) => entry.duration === 0);
+          return activeRequests.length === 0;
+        };
+        const checkInterval = setInterval(() => {
+          if (checkNetworkActivity()) {
+            clearInterval(scrollInterval);
+            clearInterval(checkInterval);
+            resolve();
+          }
+        }, 1e3);
+      });
+    });
+    const pdf = await page.pdf({
+      displayHeaderFooter: true,
+      footerTemplate: `
+        <div
+          style="
+            color: lightgray; border-top: solid lightgray 1px; font-size: 10px;
+            padding-top: 5px; text-align: center; width: 100%;
+          "
+        >
+          <p>Page <span class="pageNumber" /> of <span class="totalPages" /></p>
+        </div>`,
+      format: "A4",
+      // Letter,Legal,Tabloid,Ledger,A0,A1,A2,A3,A4,A5,A6
+      headerTemplate: `
+        <div
+          style="
+            color: lightgray; border-bottom: solid lightgray 1px; font-size: 10px;
+            padding-bottom: 5px; text-align: center; width: 100%;
+          "
+        >
+          <p class="url" />
+        </div>`,
+      // height: `${height}px`,
+      landscape: false,
+      margin: {
+        bottom: 70,
+        // minimum required for footer msg to display
+        left: 20,
+        right: 20,
+        top: 70
+        // minimum required for header msg to display
+      },
+      omitBackground: true,
+      pageRanges: "",
+      // All
+      // path: "./test.pdf" // Path to save the file
+      preferCSSPageSize: false,
+      // Give any CSS @page size declared in the page priority over what is declared in the width or height or format option.
+      printBackground: true,
+      scale: 1,
+      // From 0.1 to 2
+      tagged: false,
+      // Generate tagged (accessible) PDF.
+      timeout: 0
+      // width: `${width}px`,
+    });
+    await browser.close();
+    return pdf.toString("base64");
+  } catch (error) {
+    console.error("Error generating PDF:", error);
+    throw error;
+  }
+}
+function endpointDownloadReport() {
+  return endpoint("POST", "pdf", async (req, res) => {
+    const { slugs, path: path2 } = req.body;
+    if (!slugs || !path2) {
+      throw new BackendError(400, "Missing path parameter in request.");
+    } else {
+      const url = new URL(path2, req.headers["origin"]);
+      const pdf = await generatePDF(url);
+      return {
+        ok: true,
+        status: 200,
+        data: pdf
+      };
+    }
+  });
+}
+var minimal_args = [
+  "--autoplay-policy=user-gesture-required",
+  "--disable-background-networking",
+  "--disable-background-timer-throttling",
+  "--disable-backgrounding-occluded-windows",
+  "--disable-breakpad",
+  "--disable-client-side-phishing-detection",
+  "--disable-component-update",
+  "--disable-default-apps",
+  "--disable-dev-shm-usage",
+  "--disable-domain-reliability",
+  "--disable-extensions",
+  "--disable-features=AudioServiceOutOfProcess",
+  "--disable-hang-monitor",
+  "--disable-ipc-flooding-protection",
+  "--disable-notifications",
+  "--disable-offer-store-unmasked-wallet-cards",
+  "--disable-popup-blocking",
+  "--disable-print-preview",
+  "--disable-prompt-on-repost",
+  "--disable-renderer-backgrounding",
+  "--disable-setuid-sandbox",
+  "--disable-speech-api",
+  "--disable-sync",
+  "--hide-scrollbars",
+  "--ignore-gpu-blacklist",
+  "--metrics-recording-only",
+  "--mute-audio",
+  "--no-default-browser-check",
+  "--no-first-run",
+  "--no-pings",
+  "--no-zygote",
+  "--password-store=basic",
+  "--use-gl=swiftshader",
+  "--use-mock-keychain",
+  "--start-fullscreen",
+  "--disable-dev-shm-usage",
+  "--no-sandbox"
+];
+var blocked_domains = [
+  "google-analytics.com",
+  "googletagmanager.com"
+];
+async function generateImage(path2, section, format = "png", transparent = false) {
+  const width = 1366;
+  const height = 768;
+  const maxTimeoutPerPage = 0;
+  try {
+    const browser = await puppeteer.launch({
+      args: [
+        `--window-size=${width},${height}`,
+        ...minimal_args
+      ],
+      defaultViewport: { width, height, deviceScaleFactor: 2 },
+      headless: "new",
+      ignoreHTTPSErrors: true
+    });
+    const url = new URL(path2);
+    const searchParams = new URLSearchParams(url.search);
+    url.search = searchParams.toString();
+    const page = await browser.newPage();
+    await page.addStyleTag({ content: ".bespoke-Section-container{ padding: 1rem !important }" });
+    await page.setRequestInterception(true);
+    page.on("request", (request) => {
+      const url2 = request.url();
+      if (blocked_domains.some((domain) => url2.includes(domain))) {
+        request.abort();
+      } else {
+        request.continue();
+      }
+    });
+    await page.goto(url.toString(), { waitUntil: "networkidle0", timeout: maxTimeoutPerPage });
+    await page.waitForSelector("#bespoke-report", { timeout: maxTimeoutPerPage });
+    if (transparent) {
+      await page.$eval(`.bespoke-Section-${section}`, (el) => el["style"].background = "transparent");
+      await page.evaluate(() => document.body.style.background = "transparent");
+    }
+    if (format === "svg") {
+      const element = await page.$(".d3plus-viz");
+      const svg = await element?.evaluate((el) => el.outerHTML);
+      return svg?.replace(/ {4}|[\t\n\r]/gm, "");
+    } else {
+      const element = await page.$(".bespoke-Section-container");
+      const screenshot = await element?.screenshot({
+        type: "png",
+        omitBackground: true
+      });
+      await browser.close();
+      return screenshot;
+    }
+  } catch (error) {
+    console.error("Error generating Image:", error);
+    throw error;
+  }
+}
+function endpointExportImage() {
+  return endpoint("POST", "img", async (req, res) => {
+    const { slugs, path: path2, section, viz, query: selectors, locale, prefixLocale, transparent = false, svg = false } = req.body;
+    if (!slugs || !path2 || !section) {
+      throw new BackendError(400, "Missing parameter in request.");
+    } else {
+      try {
+        let path3 = prefixLocale ? `/${locale}/` : "/";
+        path3 += `embed/${JSON.parse(slugs).join("/")}`;
+        const url = new URL(path3, req.headers["origin"]);
+        const query = new URLSearchParams(Object.entries(selectors || {}));
+        query.set("section", section);
+        if (viz) {
+          query.set("viz", viz);
+        }
+        url.search = query.toString();
+        const format = yn2(svg) ? "svg" : "png";
+        const img = await generateImage(url, section, format, yn2(transparent));
+        return {
+          ok: true,
+          status: 200,
+          data: img
+        };
+      } catch (e) {
+        console.log(e);
+        return {
+          ok: false,
+          status: 500
+        };
+      }
+    }
+  });
+}
 
 // api/endpoints/icon/listIcons.ts
 function endpointListIconsFactory(operations, provider) {
@@ -4308,7 +4545,8 @@ function getEndpointMap(db) {
     endpointRevalidateReportFactory(api),
     endpointRevalidateUrlFactory(),
     endpointReadPrivateBlocksFactory(api),
-    // endpointDownloadReport(),
+    endpointDownloadReport(),
+    endpointExportImage(),
     endpointListIconsFactory(api, "tabler"),
     endpointReadIconFactory(api, "tabler"),
     endpointReportVariables()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.6.0-rc.14",
+  "version": "0.6.0-rc.2",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -51,7 +51,6 @@
     "@mantine/notifications": "^6.0.19",
     "@mantine/prism": "^6.0.19",
     "@monaco-editor/react": "^4.4.5",
-    "@newswire/frames": "^1.0.0",
     "@reduxjs/toolkit": "^1.8.4",
     "@tabler/icons-react": "^2.15.0",
     "@tiptap/extension-hard-break": "^2.2.2",
@@ -105,6 +104,7 @@
     "normalizr": "^3.6.2",
     "pg": "^8.7.3",
     "pretty-format": "^28.1.1",
+    "puppeteer": "^21.5.2",
     "react": "^18.2.0",
     "react-clipboard.js": "^2.0.16",
     "react-dom": "^18.2.0",