@datawheel/bespoke 0.2.4 → 0.2.6

package/dist/index.css

@@ -7,7 +7,7 @@
   color: red;
 }
 
-/* cms/components/components/ConsoleVariable.css */
+/* components/builder/components/ConsoleVariable.css */
 .mantine-Prism-root.cr-variable {
   font-size: 11px;
   padding: 0;
@@ -29,11 +29,11 @@
   margin-right: 4px;
 }
 
-/* cms/components/reportVizes/Graphic.css */
+/* components/blocks/types/renderers/viz-types/Graphic.css */
 
 /* css/mixins.css */
 
-/* cms/components/reportVizes/Table.css */
+/* components/blocks/types/renderers/viz-types/Table.css */
 .cms-table-viz-container .cms-viz-figure,
 .cp-table-viz-container .cp-viz-figure {
   height: auto !important;
@@ -278,12 +278,12 @@
   text-decoration: underline;
 }
 
-/* cms/editors/MonacoWrapper.css */
+/* components/builder/editors/MonacoWrapper.css */
 .cr-monaco-container {
   height: 100%;
 }
 
-/* cms/editors/MCEWrapper.css */
+/* components/builder/editors/MCEWrapper.css */
 .tox-notifications-container {
   display: none;
 }

package/dist/index.js

@@ -13,14 +13,14 @@ import { schema, normalize } from 'normalizr';
 import { createSlice, configureStore } from '@reduxjs/toolkit';
 import { HYDRATE, createWrapper } from 'next-redux-wrapper';
 import { Notifications, notifications } from '@mantine/notifications';
-import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, memo, useRef, Fragment as Fragment$1, createElement } from 'react';
+import React, { forwardRef, createContext, useMemo, useState, useCallback, useContext, useEffect, memo, useRef, Fragment as Fragment$1, createElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Tooltip, ActionIcon, Modal, Button, SegmentedControl, Select, MultiSelect, Center, Grid, Title, Radio, NumberInput, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Image, Card, Container, Loader, Alert, Collapse, Space, Code, Textarea, rem, Paper, Input, Popover, Checkbox, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, FileInput, Accordion, HoverCard, CopyButton, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Tooltip, ActionIcon, Modal, Button, SegmentedControl, Select, MultiSelect, Center, Grid, Title, Radio, NumberInput, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Image, Card, Container, Loader, Alert, Collapse, Space, Code, Textarea, rem, Paper, Autocomplete, Input, Popover, Checkbox, Drawer, Overlay, SimpleGrid, Tabs, Header, px, FileInput, Accordion, HoverCard, CopyButton, Col } from '@mantine/core';
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
-import { IconInfoCircle, IconRefresh, IconSearch, IconAlignLeft, IconAlignCenter, IconAlignRight, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconTrash, IconUserCircle, IconEdit, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconAlarmFilled, IconBox, IconLink, IconCircleX, IconFlag, IconCirclePlus, IconFileAnalytics, IconPlus, IconHome, IconX, IconChevronDown, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconHierarchy3, IconMenu, IconApi, IconPolaroid, IconCircleMinus, IconEyeOff, IconPhoto, IconChevronLeft, IconChevronRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconCodePlus, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { IconInfoCircle, IconRefresh, IconSearch, IconAlignLeft, IconAlignCenter, IconAlignRight, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconTrash, IconX, IconUserCircle, IconEdit, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconAlarmFilled, IconBox, IconLink, IconCircleX, IconFlag, IconCirclePlus, IconFileAnalytics, IconPlus, IconHome, IconChevronDown, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconHierarchy3, IconMenu, IconApi, IconPolaroid, IconCircleMinus, IconEyeOff, IconPhoto, IconChevronLeft, IconChevronRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconCodePlus, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import { useMediaQuery, useDisclosure, useDebouncedValue, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
@@ -91,11 +91,13 @@ function httpPOST(axios6, request, transformPayload) {
 }
 function httpDELETE(axios6, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (payload) => http(axios6, {
-    ...config,
-    method: "DELETE",
-    data: transformPayload ? transformPayload(payload) : payload
-  });
+  return (payload) => {
+    return http(axios6, {
+      ...config,
+      method: "DELETE",
+      params: transformPayload ? transformPayload(payload) : payload
+    });
+  };
 }
 var init_lib = __esm({
   "api/http/lib.ts"() {
@@ -3172,9 +3174,9 @@ var init_Stat = __esm({
   }
 });
 
-// cms/components/reportVizes/Graphic.css
+// components/blocks/types/renderers/viz-types/Graphic.css
 var init_ = __esm({
-  "cms/components/reportVizes/Graphic.css"() {
+  "components/blocks/types/renderers/viz-types/Graphic.css"() {
   }
 });
 function Graphic({ config, dataFormat }) {
@@ -3223,7 +3225,7 @@ function Graphic({ config, dataFormat }) {
   ] });
 }
 var init_Graphic = __esm({
-  "cms/components/reportVizes/Graphic.tsx"() {
+  "components/blocks/types/renderers/viz-types/Graphic.tsx"() {
     init_esm_shims();
     init_Stat();
     init_();
@@ -3235,14 +3237,14 @@ function HTML({ config }) {
   return /* @__PURE__ */ jsx("div", { className: "cp-viz cp-html", dangerouslySetInnerHTML: { __html: config.html } });
 }
 var init_HTML = __esm({
-  "cms/components/reportVizes/HTML.tsx"() {
+  "components/blocks/types/renderers/viz-types/HTML.tsx"() {
     init_esm_shims();
   }
 });
 
-// cms/components/reportVizes/Table.css
+// components/blocks/types/renderers/viz-types/Table.css
 var init_2 = __esm({
-  "cms/components/reportVizes/Table.css"() {
+  "components/blocks/types/renderers/viz-types/Table.css"() {
   }
 });
 function Table({ config, dataFormat }) {
@@ -3267,7 +3269,7 @@ function Table({ config, dataFormat }) {
 }
 var Table_default;
 var init_Table = __esm({
-  "cms/components/reportVizes/Table.jsx"() {
+  "components/blocks/types/renderers/viz-types/Table.jsx"() {
     init_esm_shims();
     init_2();
     Table_default = Table;
@@ -3487,12 +3489,12 @@ init_esm_shims();
 
 // frontend/components/explore/ExploreFilters.tsx
 init_esm_shims();
-function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId }) {
+function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId, translations }) {
   const [selectors, setSelectors] = useState([]);
   const [filters, setFilters] = useState({ profile: void 0, variant: void 0 });
   const [selectedProfile, setSelectedProfile] = useState();
   const [selectedVariant, setSelectedVariant] = useState();
-  const allMember = { id: void 0, name: "All" };
+  const allMember = { id: void 0, name: translations["filters_all"] };
   const getVariantsCombinatory = (variantsArrays) => {
     const combinatory = variantsArrays.reduce((a, b) => a.reduce((r, v) => r.concat(b.map((w) => [].concat(v, w))), [])).map((combination) => {
       if (!Array.isArray(combination))
@@ -3554,7 +3556,7 @@ function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId
       {
         variant: s.id === selectedProfile?.id ? "outline" : "subtle",
         onClick: () => onClickProfile(s),
-        children: s.name
+        children: translations?.dimension[s.name] ?? s.name
       },
       `p-${s.id}`
     )) }),
@@ -3564,7 +3566,7 @@ function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId
       {
         variant: v.id === selectedVariant?.id ? "outline" : "subtle",
         onClick: () => onClickVariant(v),
-        children: v.name
+        children: translations?.dimension[v.name] ?? v.name
       },
       `v-${v.id}`
     )) }),
@@ -3677,11 +3679,21 @@ var ExploreResults_default = ExploreResults;
 
 // frontend/components/explore/Explore.tsx
 init_store2();
+var DEFAULT_TRANSLATIONS = {
+  "try_another": "Try another search or filter.",
+  "search": "Search",
+  "filters_all": "All",
+  "no_results": "No Results",
+  report: {},
+  dimension: {},
+  variant: {}
+};
 function BespokeExplore({
   locale,
   profilePrefix,
   initialReportId,
   initialVariantId,
+  translations = DEFAULT_TRANSLATIONS,
   onSelect,
   reportTile
 }) {
@@ -3746,11 +3758,12 @@ function BespokeExplore({
   const onClearInput = () => {
     setQuery("");
   };
+  const exploreTranslations = { ...DEFAULT_TRANSLATIONS, ...translations };
   return /* @__PURE__ */ jsxs(Container, { fluid: true, pt: "1em", children: [
     /* @__PURE__ */ jsx(
       TextInput,
       {
-        placeholder: "Search",
+        placeholder: exploreTranslations["search"],
         size: "xl",
         onChange: (e) => setQuery(e.target.value),
         readOnly: loading,
@@ -3776,11 +3789,12 @@ function BespokeExplore({
         metadata,
         onFilter: onFilterChange,
         initialReportId,
-        initialVariantId
+        initialVariantId,
+        translations: exploreTranslations
       }
     ),
     /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading }),
-    !loading && results.length === 0 && /* @__PURE__ */ jsx(Alert, { title: "No results", color: "blue", children: "Try another search or filter." }),
+    !loading && results.length === 0 && /* @__PURE__ */ jsx(Alert, { title: exploreTranslations["no_results"], color: "blue", children: exploreTranslations["try_another"] }),
     !loading && /* @__PURE__ */ jsx(ExploreResults_default, { results, profilePrefix, onSelect, reportTile })
   ] });
 }
@@ -3795,6 +3809,7 @@ function BespokeExploreModal({
   icon = /* @__PURE__ */ jsx(IconSearch, { size: 20 }),
   actionIconProps = {},
   modalProps = {},
+  tooltipProps = {},
   children
 }) {
   const [opened, setOpened] = useState(false);
@@ -3813,7 +3828,7 @@ function BespokeExploreModal({
   const actionIcon = /* @__PURE__ */ jsx(ActionIcon, { ...btnConfig, onClick: () => setOpened(true), children: icon });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Modal, { ...modalProps, ...mdlConfig, children: /* @__PURE__ */ jsx(Explore_default, { ...exploreProps, onSelect: () => setOpened(false) }) }),
-    /* @__PURE__ */ jsx("div", { onClick: () => setOpened(true), children: children ? /* @__PURE__ */ jsx(Tooltip, { label: "Click to search", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { onClick: () => setOpened(true), children: children ? /* @__PURE__ */ jsx(Tooltip, { label: "Click to search", ...tooltipProps, children: /* @__PURE__ */ jsxs(
       Group,
       {
         spacing: "sm",
@@ -3859,7 +3874,13 @@ var useCustomItem = (reportItem) => {
   }
   return Tile;
 };
-function BespokeSearch({ locale, profilePrefix, autocompleteProps = {}, children }) {
+function BespokeSearch({
+  locale,
+  profilePrefix,
+  autocompleteProps = {},
+  tooltipProps = {},
+  children
+}) {
   const dispatch = useAppDispatch();
   const currentLocale = useAppSelector((state) => state.status.currentLocale);
   const localeDefault9 = useAppSelector((state) => state.status.localeDefault);
@@ -3975,7 +3996,7 @@ function BespokeSearch({ locale, profilePrefix, autocompleteProps = {}, children
       ...acConfig
     }
   );
-  const finalElement = children ? /* @__PURE__ */ jsx(Tooltip, { label: "Click to search", disabled: visible, children: /* @__PURE__ */ jsxs(
+  const finalElement = children ? /* @__PURE__ */ jsx(Tooltip, { label: "Click to search", disabled: visible, ...tooltipProps, children: /* @__PURE__ */ jsxs(
     Group,
     {
       spacing: "sm",
@@ -4094,6 +4115,20 @@ function SubtitleView({ subtitle, tooltip }) {
 init_esm_shims();
 init_sanitizeBlockContent();
 init_hooks();
+
+// frontend/components/report/context/TranslationsProvider.tsx
+init_esm_shims();
+var TranslationsContext = createContext({});
+function useBespokeTranslations(key) {
+  const translations = useContext(TranslationsContext);
+  if (key) {
+    return translations[key] ?? translations;
+  }
+  return translations;
+}
+function TranslationsProvider({ translations, children }) {
+  return /* @__PURE__ */ jsx(TranslationsContext.Provider, { value: translations || {}, children });
+}
 function TitleView({ title, tooltip, slug, settings }) {
   const titleHTML = sanitizeBlockContent_default(title) || "<span class='cr-block-placeholder'>Title</span>";
   const tooltipHTML = sanitizeBlockContent_default(tooltip);
@@ -4116,12 +4151,14 @@ function TitleView({ title, tooltip, slug, settings }) {
     }
   );
   const locale = currentLocale;
+  const translations = useBespokeTranslations();
   const finalElement = useMemo(() => {
     let component = /* @__PURE__ */ jsx(Fragment, {});
     if (searchOnClick === "modal") {
       component = /* @__PURE__ */ jsx(ExploreModal_default, { exploreProps: {
         locale,
         profilePrefix,
+        translations: translations["explore"],
         initialReportId: initialIds.reportId,
         initialVariantId: initialIds.variantId
       }, children: titleElement });
@@ -5360,10 +5397,10 @@ function SelectorPreview(config) {
 // components/blocks/types/renderers/Generator.tsx
 init_esm_shims();
 
-// cms/components/components/InputMenuItem.tsx
+// components/builder/components/InputMenuItem.tsx
 init_esm_shims();
 
-// cms/components/components/ConsoleVariable.tsx
+// components/builder/components/ConsoleVariable.tsx
 init_esm_shims();
 var evalType = (value) => {
   let t = typeof value;
@@ -5519,7 +5556,7 @@ function ConsoleVariable({
 }
 var ConsoleVariable_default = ConsoleVariable;
 
-// cms/components/components/InputMenuItem.tsx
+// components/builder/components/InputMenuItem.tsx
 init_store2();
 function InputMenuItem({
   reserved = [],
@@ -6146,6 +6183,23 @@ var formatOptions = {
   json: "JSON",
   xlsx: "XLSX"
 };
+var DEFAULT_TRANSLATIONS2 = {
+  "data_source": "Data Source",
+  "no_data_src": "No data sources defined",
+  "viz_source": "Visualization Source",
+  "error_generating": "Error generating file.",
+  "choose_data_src": "Choose data source",
+  "original_src": "Original {src}",
+  "loading": "Loading...",
+  "error_preview": `Sorry. We couldn&apos;t generate the data preview as a table.
+  Try to open the source and check the data directly.`,
+  "open_in_window": "Open {src} response in a new window",
+  "formatted_src": "Formatted {src}",
+  "rows_preview": "(First {nrows} rows as preview)",
+  "choose_format": "Choose format",
+  "processing_file": "Processing file...",
+  "download": "Download full dataset in {fmt} format"
+};
 function DataTab(props) {
   const { section } = props;
   const readMemberFn = useReadMemberFn();
@@ -6154,6 +6208,8 @@ function DataTab(props) {
   const PREVIEW_SIZE = 50;
   const formatterFunctions = useFormatterFunctionsForLocale(locale);
   const router = useRouter();
+  const optionsTranslations = useBespokeTranslations("options");
+  const translations = { ...DEFAULT_TRANSLATIONS2, ...optionsTranslations["data_tab"] };
   const sourcesOptions = useAppSelector((state) => {
     const dataInformation = [];
     blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(block.type)).map((block) => {
@@ -6168,7 +6224,7 @@ function DataTab(props) {
                 {
                   ix,
                   id: block.id,
-                  title: `Data Source ${ix + 1}`,
+                  title: `${translations["data_source"]} ${ix + 1}`,
                   path: apiUrl
                 }
               );
@@ -6196,7 +6252,7 @@ function DataTab(props) {
             {
               ix,
               id: block.id,
-              title: `Viz Data Source ${ix + 1}`,
+              title: `${translations["viz_source"]} ${ix + 1}`,
               path: d3Props.config._api
             }
           );
@@ -6206,7 +6262,7 @@ function DataTab(props) {
             {
               ix,
               id: block.id,
-              title: `Viz Data Source ${ix + 1}`,
+              title: `${translations["viz_source"]} ${ix + 1}`,
               path: d3Props.config.data
             }
           );
@@ -6218,7 +6274,7 @@ function DataTab(props) {
                 {
                   ix,
                   id: block.id,
-                  title: `Viz Data Source ${ix + 1}`,
+                  title: `${translations["viz_source"]} ${ix + 1}`,
                   path: dataItem
                 }
               );
@@ -6313,7 +6369,7 @@ function DataTab(props) {
           saveAs(content, getFileName(fileFormat, "zip"));
         });
       } catch (error) {
-        console.error("Error generating file", error);
+        console.error(translations["error_generating"], error);
         setFileProcessing(false);
       }
     }
@@ -6322,7 +6378,7 @@ function DataTab(props) {
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-data", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
     sourcesOptions.length === 0 && /* @__PURE__ */ jsx("p", { children: "No data sources defined." }),
-    sourcesOptions.length > 1 && /* @__PURE__ */ jsx(Input.Wrapper, { label: "Choose Data Source:", children: /* @__PURE__ */ jsx(Group, { spacing: "xs", children: sourcesOptions.map((source, ix) => /* @__PURE__ */ jsx(
+    sourcesOptions.length > 1 && /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_data_src"]}:`, children: /* @__PURE__ */ jsx(Group, { spacing: "xs", children: sourcesOptions.map((source, ix) => /* @__PURE__ */ jsx(
       Button,
       {
         leftIcon: /* @__PURE__ */ jsx(IconDatabase, { size: 16 }),
@@ -6332,15 +6388,21 @@ function DataTab(props) {
       },
       `source-${source.id}-${ix}`
     )) }) }),
-    selectedSource && /* @__PURE__ */ jsx(CopyInput, { title: `Original ${selectedSource.title}:`, url: selectedSource.path }),
-    selectedSource && loadingPreview && /* @__PURE__ */ jsx(Fragment, { children: "Loading..." }),
-    selectedSource && !loadingPreview && currentPreview.length === 0 && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: "1rem" }), title: "Oops!", children: "Sorry. We couldn't generate the data preview as a table. Try to open the source and check the data directly." }),
+    selectedSource && /* @__PURE__ */ jsx(
+      CopyInput,
+      {
+        title: `${translations["original_src"].replace("{src}", selectedSource.title)}:`,
+        url: selectedSource.path
+      }
+    ),
+    selectedSource && loadingPreview && /* @__PURE__ */ jsx(Fragment, { children: translations["loading"] }),
+    selectedSource && !loadingPreview && currentPreview.length === 0 && /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: "1rem" }), title: "Oops!", children: translations["error_preview"] }),
     selectedSource && !loadingPreview && currentPreview.length === 0 && /* @__PURE__ */ jsx("a", { href: selectedSource.path, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(
       Button,
       {
         leftIcon: /* @__PURE__ */ jsx(IconExternalLink, { size: 16 }),
         fullWidth: true,
-        children: `Open ${selectedSource.title} response in a new window`
+        children: translations["open_in_window"].replace("{src}", selectedSource.title)
       }
     ) }),
     selectedSource && !loadingPreview && currentPreview.length > 0 && /* @__PURE__ */ jsxs(Stack, { children: [
@@ -6354,7 +6416,7 @@ function DataTab(props) {
         }
       ),
       /* @__PURE__ */ jsx(Space, { h: "xs" }),
-      /* @__PURE__ */ jsx(Input.Wrapper, { label: "Choose format:", children: /* @__PURE__ */ jsx(Button.Group, { children: Object.keys(formatOptions).map((format2) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_format"]}:`, children: /* @__PURE__ */ jsx(Button.Group, { children: Object.keys(formatOptions).map((format2) => /* @__PURE__ */ jsx(
         Button,
         {
           leftIcon: /* @__PURE__ */ jsx(IconTable, { size: 16 }),
@@ -6372,7 +6434,7 @@ function DataTab(props) {
           loading: fileProcessing,
           onClick: onSaveClick,
           fullWidth: true,
-          children: /* @__PURE__ */ jsx("span", { children: fileProcessing ? "Processing file..." : `Download full dataset in ${fileFormat} format` })
+          children: /* @__PURE__ */ jsx("span", { children: fileProcessing ? translations["processing_file"] : translations["download"].replace("{fmt}", fileFormat) })
         }
       )
     ] })
@@ -6443,6 +6505,15 @@ var formatOptions2 = {
   png: "PNG",
   svg: "SVG"
 };
+var DEFAULT_TRANSLATIONS3 = {
+  "wrong_node": "Wrong node in export",
+  "choose_area": "Choose image area",
+  "choose_viz": "Choose visualization",
+  "choose_format": "Choose format",
+  "transparent_bg": "Transparent background",
+  "processing": "Processing image...",
+  "download": "Download {imageFormat}"
+};
 function ImageTab(props) {
   const { section } = props;
   const blocksIds = section.blocks || [];
@@ -6456,6 +6527,8 @@ function ImageTab(props) {
   const [vizSelected, setVizSelected] = useState(vizAvailable.length > 0 ? vizAvailable[0].id : null);
   const [transparentBackground, setTransparentBackground] = useState(true);
   const [loadingPreviews, setLoadingPreviews] = useState(false);
+  const optionsTranslations = useBespokeTranslations("options");
+  const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["image_tab"] };
   const vizSelectedHasSVG = () => {
     const vizNode = getVizNode(section.id, vizSelected);
     const svgCount = select(vizNode).select("svg").size();
@@ -6536,7 +6609,7 @@ function ImageTab(props) {
       if (node) {
         exportFunction(node, exportConfig);
       } else {
-        throw new Error("Wrong node in export");
+        throw new Error(translations["wrong_node"]);
       }
     } catch (error) {
       setImageProcessing(false);
@@ -6572,7 +6645,7 @@ function ImageTab(props) {
   }, [vizSelected]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-image", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
-    /* @__PURE__ */ jsx(Input.Wrapper, { label: "Choose image area:", children: /* @__PURE__ */ jsxs(Button.Group, { children: [
+    /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsxs(Button.Group, { children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -6600,12 +6673,13 @@ function ImageTab(props) {
     imageContext === contextOptions.viz && vizAvailable.length > 0 && /* @__PURE__ */ jsxs(
       Input.Wrapper,
       {
-        label: "Choose visualization:",
+        label: `${translations["choose_viz"]}:`,
         style: { minHeight: "161px", position: "relative" },
         children: [
           !loadingPreviews && vizPreviews.length > 0 && /* @__PURE__ */ jsx(ScrollArea, { style: { height: 250 }, children: /* @__PURE__ */ jsx(SimpleGrid, { cols: 3, children: vizAvailable.map((vizOption, ix) => /* @__PURE__ */ jsx(
             Image,
             {
+              alt: `Viz ${vizOption.id}`,
               onClick: () => {
                 setVizSelected(vizOption.id);
               },
@@ -6623,7 +6697,7 @@ function ImageTab(props) {
         ]
       }
     ),
-    svgAvailable && imageContext !== contextOptions.section && /* @__PURE__ */ jsx(Input.Wrapper, { label: "Choose format:", children: /* @__PURE__ */ jsxs(Button.Group, { children: [
+    svgAvailable && imageContext !== contextOptions.section && /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_format"]}:`, children: /* @__PURE__ */ jsxs(Button.Group, { children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -6649,7 +6723,7 @@ function ImageTab(props) {
       Checkbox,
       {
         checked: transparentBackground,
-        label: "Transparent background",
+        label: `${translations["transparent_bg"]}:`,
         onChange: () => setTransparentBackground(!transparentBackground),
         radius: "xl"
       }
@@ -6661,7 +6735,7 @@ function ImageTab(props) {
         loading: imageProcessing,
         onClick: onSaveClick,
         fullWidth: true,
-        children: /* @__PURE__ */ jsx("span", { children: imageProcessing ? "Processing image..." : `Download ${imageFormat}` })
+        children: /* @__PURE__ */ jsx("span", { children: imageProcessing ? translations["processing"] : translations["download"].replace("{imageFormat}", imageFormat) })
       }
     )
   ] });
@@ -6669,11 +6743,17 @@ function ImageTab(props) {
 
 // components/options/tabs/ShareTab.tsx
 init_esm_shims();
+var DEFAULT_TRANSLATIONS4 = {
+  "title": "Title",
+  "include_section": "Include Section"
+};
 function ShareTab(props) {
   const { section } = props;
   const [shareUrl, setShareUrl] = useState("");
   const [title, setTitle] = useState("");
   const [includeSection, setIncludeSection] = useState(true);
+  const optionsTranslations = useBespokeTranslations("options");
+  const translations = { ...DEFAULT_TRANSLATIONS4, ...optionsTranslations["share_tab"] };
   useEffect(() => {
     setTitle(document.title);
     const { origin, pathname } = window.location;
@@ -6683,12 +6763,12 @@ function ShareTab(props) {
   }, [includeSection]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-share", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
-    /* @__PURE__ */ jsx(CopyInput, { title: `Title: ${title}`, url: shareUrl }),
+    /* @__PURE__ */ jsx(CopyInput, { title: `${translations["title"]}: ${title}`, url: shareUrl }),
     /* @__PURE__ */ jsx(
       Checkbox,
       {
         checked: includeSection,
-        label: "Include section",
+        label: translations["include_section"],
         onChange: () => setIncludeSection(!includeSection),
         radius: "xl"
       }
@@ -6749,6 +6829,11 @@ function ShareTab(props) {
     ] })
   ] });
 }
+var DEFAULT_TRANSLATIONS5 = {
+  download_title: "Download Data",
+  image_title: "Save Image",
+  share_title: "Share Link"
+};
 function OptionsModal(props) {
   const {
     section,
@@ -6758,11 +6843,13 @@ function OptionsModal(props) {
     title
   } = props;
   const [selectedTab, setSelectedTab] = useState(initialMode || "data");
+  const optionsTranslations = useBespokeTranslations("options");
   useEffect(() => {
     if (initialMode !== selectedTab) {
       setSelectedTab(initialMode);
     }
   }, [initialMode]);
+  const translations = { ...DEFAULT_TRANSLATIONS5, ...optionsTranslations };
   return /* @__PURE__ */ jsx("div", { className: "cms-section-options-modal", children: open && /* @__PURE__ */ jsx(
     Modal,
     {
@@ -6779,9 +6866,9 @@ function OptionsModal(props) {
           keepMounted: false,
           children: [
             /* @__PURE__ */ jsxs(Tabs.List, { children: [
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "data", children: "Download data" }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "image", children: "Save image" }),
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "share", children: "Share link" })
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "data", children: translations.download_title }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "image", children: translations.image_title }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "share", children: translations.share_title })
             ] }),
             /* @__PURE__ */ jsx(Tabs.Panel, { value: "data", children: /* @__PURE__ */ jsx(DataTab, { section }) }),
             /* @__PURE__ */ jsx(Tabs.Panel, { value: "image", children: /* @__PURE__ */ jsx(ImageTab, { section }) }),
@@ -6819,8 +6906,7 @@ function Options(props) {
         section: sectionRef.data,
         initialMode: mode,
         open: opened,
-        onEnds: onModalEnds,
-        title: "Section information"
+        onEnds: onModalEnds
       }
     )
   ] });
@@ -7251,7 +7337,7 @@ var getBlockSettings = (blockType) => {
   return extraSettings;
 };
 
-// cms/components/components/DesignMenu.tsx
+// components/builder/components/DesignMenu.tsx
 init_esm_shims();
 init_store2();
 var ALLOWED_UNITS = ["px", "%"];
@@ -7399,6 +7485,9 @@ function DesignMenu({ id, display = "button", handleChange }) {
   ) : /* @__PURE__ */ jsx(Paper, { p: "md", withBorder: true, children: menu });
 }
 var DesignMenu_default = DesignMenu;
+var DEFAULT_TRANSLATIONS6 = {
+  "image_by": "image by"
+};
 var getStyles = (styles, settings) => (theme) => styles ? styles(theme, settings) : {};
 var PositionWrapper = ({ settings, styles, children, ...props }) => {
   const { position } = settings;
@@ -7468,6 +7557,8 @@ function Section({ section }) {
   const sectionStyles = useBespokeStyles()["Section"];
   const blockRecords = selectBlockRecords(state);
   const sectionBlocks = Object.values(blockRecords || {}).filter((d) => d.section_id === id);
+  const sectionTranslations = useBespokeTranslations("sections");
+  const translations = { ...DEFAULT_TRANSLATIONS6, ...sectionTranslations };
   const allowedSection = sectionBlocks.some((b) => {
     try {
       return status[b.id].allowed && b.type !== BLOCK_TYPES.GENERATOR || b.type === BLOCK_TYPES.NAV;
@@ -7566,7 +7657,9 @@ function Section({ section }) {
                         ({ image, name }, idx) => (image.author || image.url) && /* @__PURE__ */ jsxs("div", { children: [
                           image.author && /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
                             name,
-                            " image by ",
+                            " ",
+                            translations["image_by"],
+                            " ",
                             /* @__PURE__ */ jsx("strong", { children: image.author })
                           ] }),
                           image.url && /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
@@ -9337,7 +9430,7 @@ init_esm_shims();
 // components/blocks/BlockElement.tsx
 init_esm_shims();
 
-// cms/components/components/DeleteButton.tsx
+// components/builder/components/DeleteButton.tsx
 init_esm_shims();
 init_store2();
 init_cms();
@@ -9369,7 +9462,7 @@ init_store2();
 init_esm_shims();
 init_cms();
 
-// cms/components/components/ApiInput.tsx
+// components/builder/components/ApiInput.tsx
 init_esm_shims();
 init_varSwap();
 init_hooks();
@@ -9451,7 +9544,7 @@ function ApiInput({
 }
 var ApiInput_default = ApiInput;
 
-// cms/editors/MonacoWrapper.tsx
+// components/builder/editors/MonacoWrapper.tsx
 init_esm_shims();
 function MonacoWrapper({ monacoOptions, variables = {} }) {
   const monaco = useMonaco();
@@ -9855,7 +9948,7 @@ function BlockSettings({ id, setBlockSettings, setBlockContent }) {
 }
 var BlockSettings_default = BlockSettings;
 
-// cms/components/components/InputMenu.tsx
+// components/builder/components/InputMenu.tsx
 init_esm_shims();
 init_store2();
 init_actions();
@@ -9982,16 +10075,16 @@ function InputMenu({ id }) {
 }
 var InputMenu_default = InputMenu;
 
-// cms/editors/SimpleUI.tsx
+// components/builder/editors/SimpleUI.tsx
 init_esm_shims();
 init_hooks();
 init_cms();
 
-// cms/editors/RichTextEditor.tsx
+// components/builder/editors/RichTextEditor.tsx
 init_esm_shims();
 init_store2();
 
-// cms/editors/MCEWrapper.tsx
+// components/builder/editors/MCEWrapper.tsx
 init_esm_shims();
 function MCEWrapper({
   initialValue,
@@ -10039,7 +10132,7 @@ function MCEWrapper({
 }
 var MCEWrapper_default = MCEWrapper;
 
-// cms/editors/RichTextEditor.tsx
+// components/builder/editors/RichTextEditor.tsx
 init_sanitizeBlockContent();
 
 // libs/js/deepClone.ts
@@ -10503,7 +10596,7 @@ function BlockEditor({
 }
 var BlockEditor_default = BlockEditor;
 
-// cms/components/components/ConsumerMenu.tsx
+// components/builder/components/ConsumerMenu.tsx
 init_esm_shims();
 init_store2();
 function ConsumerMenu({ id }) {
@@ -13912,6 +14005,7 @@ init_esm_shims();
 init_ResourceProvider();
 function BespokeRenderer({
   pathSegmentsKey = "bespoke",
+  translations,
   bespokeStyles,
   buildTime,
   profilePrefix = "/defaultPath"
@@ -13920,7 +14014,7 @@ function BespokeRenderer({
   if (loading)
     return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
   return /* @__PURE__ */ jsx(MantineProvider, { theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", profilePrefix, children: [
-    /* @__PURE__ */ jsx(Report_default, {}),
+    /* @__PURE__ */ jsx(TranslationsProvider, { translations, children: /* @__PURE__ */ jsx(Report_default, {}) }),
     /* @__PURE__ */ jsx("small", { children: buildTime })
   ] }) });
 }

package/dist/server.js

@@ -3376,7 +3376,7 @@ function endpointCRUDFactory(api, entity) {
       return crudUpdate(body);
     }, [CMS_ROLES.EDITOR]),
     endpoint("DELETE", `delete/${entity}`, (req) => {
-      const id = parseFiniteNumber(req.body.id);
+      const id = parseFiniteNumber(req.query.id);
       return crudDelete(id);
     }, [CMS_ROLES.EDITOR])
   ];
@@ -3747,7 +3747,7 @@ async function endpointNextJsHandlerFactory(req, res) {
   return res.status(404).json({ error: "No matching route", path, query });
 }
 
-// cms/crosswalk/index.ts
+// api/crosswalk/index.ts
 var reportsCrosswalkEntrypointFn = (crosswalk) => {
   const crosswalkFn = crosswalk;
   return async function(req, res) {
@@ -3821,11 +3821,13 @@ function httpPOST(axios6, request, transformPayload) {
 }
 function httpDELETE(axios6, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (payload) => http(axios6, {
-    ...config,
-    method: "DELETE",
-    data: transformPayload ? transformPayload(payload) : payload
-  });
+  return (payload) => {
+    return http(axios6, {
+      ...config,
+      method: "DELETE",
+      params: transformPayload ? transformPayload(payload) : payload
+    });
+  };
 }
 
 // api/http/image/imageSave.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -125,6 +125,6 @@
     "tsup": "^6.6.0"
   },
   "peerDependencies": {
-    "next": "13.2.0"
+    "next": "^13.4.0"
   }
 }