@datawheel/bespoke 0.2.6 → 0.2.7

package/dist/index.js

@@ -16,11 +16,11 @@ import { Notifications, notifications } from '@mantine/notifications';
 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, Autocomplete, Input, Popover, Checkbox, Drawer, Overlay, SimpleGrid, 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, Image, Accordion, Input, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Card, Container, Loader, Alert, Collapse, Space, Code, Textarea, rem, Paper, Autocomplete, Popover, Checkbox, Drawer, Overlay, SimpleGrid, Tabs, Header, px, FileInput, 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, 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 { IconInfoCircle, IconRefresh, IconPhotoFilled, 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';
@@ -61,8 +61,8 @@ var init_esm_shims = __esm({
 });
 
 // api/http/lib.ts
-function http(axios6, config) {
-  return axios6.request(config).then((response) => {
+function http(axios8, config) {
+  return axios8.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) => {
@@ -73,26 +73,26 @@ function http(axios6, config) {
     return { ok: false, status: 500, error: err.message };
   });
 }
-function httpGET(axios6, request, transformParams) {
+function httpGET(axios8, request, transformParams) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (params) => http(axios6, {
+  return (params) => http(axios8, {
     ...config,
     method: "GET",
     params: transformParams ? transformParams(params) : params
   });
 }
-function httpPOST(axios6, request, transformPayload) {
+function httpPOST(axios8, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (payload) => http(axios6, {
+  return (payload) => http(axios8, {
     ...config,
     method: "POST",
     data: transformPayload ? transformPayload(payload) : payload
   });
 }
-function httpDELETE(axios6, request, transformPayload) {
+function httpDELETE(axios8, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
   return (payload) => {
-    return http(axios6, {
+    return http(axios8, {
       ...config,
       method: "DELETE",
       params: transformPayload ? transformPayload(payload) : payload
@@ -106,8 +106,8 @@ var init_lib = __esm({
 });
 
 // api/http/image/imageSave.ts
-function httpImageSaveFactory(axios6, provider) {
-  return (params) => http(axios6, {
+function httpImageSaveFactory(axios8, provider) {
+  return (params) => http(axios8, {
     method: "GET",
     url: `search/images/${provider}`,
     params: { prompt: params.prompt, provider }
@@ -121,8 +121,8 @@ var init_imageSave = __esm({
 });
 
 // api/http/image/imageSearch.ts
-function httpImageSearchFactory(axios6, provider) {
-  return (params) => http(axios6, {
+function httpImageSearchFactory(axios8, provider) {
+  return (params) => http(axios8, {
     method: "GET",
     url: `search/images/${provider}`,
     params: { prompt: params.prompt, provider }
@@ -134,60 +134,92 @@ var init_imageSearch = __esm({
     init_lib();
   }
 });
+
+// api/http/icon/listIcons.ts
+function httpListIconsFactory(axios8, provider) {
+  return () => http(axios8, {
+    method: "GET",
+    url: `list/icons/${provider}`,
+    params: { provider }
+  });
+}
+var init_listIcons = __esm({
+  "api/http/icon/listIcons.ts"() {
+    init_esm_shims();
+    init_lib();
+  }
+});
+
+// api/http/icon/readIcon.ts
+function httpReadIconFactory(axios8, provider) {
+  return (params) => http(axios8, {
+    method: "GET",
+    url: `read/icons/${provider}/icon.svg`,
+    params: { name: params.name }
+  });
+}
+var init_readIcon = __esm({
+  "api/http/icon/readIcon.ts"() {
+    init_esm_shims();
+    init_lib();
+  }
+});
 function apiFactory(baseURL) {
-  const axios6 = axios.create({ baseURL });
+  const axios8 = axios.create({ baseURL });
   return {
-    createBlock: httpPOST(axios6, "create/block"),
-    createDimension: httpPOST(axios6, "create/dimension"),
-    createFormatter: httpPOST(axios6, "create/formatter"),
-    createReport: httpPOST(axios6, "create/report"),
-    createSection: httpPOST(axios6, "create/section"),
-    createVariant: httpPOST(axios6, "create/variant"),
-    deleteBlock: httpDELETE(axios6, "delete/block", transformDeletePayload),
-    deleteDimension: httpDELETE(axios6, "delete/dimension", transformDeletePayload),
-    deleteFormatter: httpDELETE(axios6, "delete/formatter", transformDeletePayload),
-    deleteReport: httpDELETE(axios6, "delete/report", transformDeletePayload),
-    deleteSection: httpDELETE(axios6, "delete/section", transformDeletePayload),
-    deleteVariant: httpDELETE(axios6, "delete/variant", transformDeletePayload),
-    readBlock: httpGET(axios6, "read/block"),
-    readDimension: httpGET(axios6, "read/dimension"),
-    readFormatter: httpGET(axios6, "read/formatter"),
-    readReport: httpGET(axios6, "read/report"),
-    readSection: httpGET(axios6, "read/section"),
-    readVariant: httpGET(axios6, "read/variant"),
-    updateBlock: httpPOST(axios6, "update/block"),
-    updateDimension: httpPOST(axios6, "update/dimension"),
-    updateFormatter: httpPOST(axios6, "update/formatter"),
-    updateReport: httpPOST(axios6, "update/report"),
-    updateSection: httpPOST(axios6, "update/section"),
-    updateVariant: httpPOST(axios6, "update/variant"),
-    searchReport: httpGET(axios6, "search/reports"),
-    validateVariantSlug: httpGET(axios6, "validate/variant"),
-    readMember: httpGET(axios6, "read/members", transformReadMembers),
-    readMemberImage: httpGET(axios6, {
+    createBlock: httpPOST(axios8, "create/block"),
+    createDimension: httpPOST(axios8, "create/dimension"),
+    createFormatter: httpPOST(axios8, "create/formatter"),
+    createReport: httpPOST(axios8, "create/report"),
+    createSection: httpPOST(axios8, "create/section"),
+    createVariant: httpPOST(axios8, "create/variant"),
+    deleteBlock: httpDELETE(axios8, "delete/block", transformDeletePayload),
+    deleteDimension: httpDELETE(axios8, "delete/dimension", transformDeletePayload),
+    deleteFormatter: httpDELETE(axios8, "delete/formatter", transformDeletePayload),
+    deleteReport: httpDELETE(axios8, "delete/report", transformDeletePayload),
+    deleteSection: httpDELETE(axios8, "delete/section", transformDeletePayload),
+    deleteVariant: httpDELETE(axios8, "delete/variant", transformDeletePayload),
+    readBlock: httpGET(axios8, "read/block"),
+    readDimension: httpGET(axios8, "read/dimension"),
+    readFormatter: httpGET(axios8, "read/formatter"),
+    readReport: httpGET(axios8, "read/report"),
+    readSection: httpGET(axios8, "read/section"),
+    readVariant: httpGET(axios8, "read/variant"),
+    updateBlock: httpPOST(axios8, "update/block"),
+    updateDimension: httpPOST(axios8, "update/dimension"),
+    updateFormatter: httpPOST(axios8, "update/formatter"),
+    updateReport: httpPOST(axios8, "update/report"),
+    updateSection: httpPOST(axios8, "update/section"),
+    updateVariant: httpPOST(axios8, "update/variant"),
+    searchReport: httpGET(axios8, "search/reports"),
+    validateVariantSlug: httpGET(axios8, "validate/variant"),
+    readMember: httpGET(axios8, "read/members", transformReadMembers),
+    readMemberImage: httpGET(axios8, {
       url: "member/image.png",
       responseType: "blob"
     }),
-    searchMember: httpGET(axios6, "search/members"),
-    updateMember: httpGET(axios6, "update/members"),
-    imageLocalSearch: httpImageSearchFactory(axios6, "local"),
-    imageLocalSave: httpImageSaveFactory(axios6, "local"),
-    imageFlickrSearch: httpImageSearchFactory(axios6, "flickr"),
-    imageFlickrSave: httpImageSaveFactory(axios6, "flickr"),
-    imageUnsplashSearch: httpImageSearchFactory(axios6, "unsplash"),
-    imageUnsplashSave: httpImageSaveFactory(axios6, "unsplash"),
-    imageUploadSave: httpImageSaveFactory(axios6, "upload"),
-    readMetadata: httpGET(axios6, "read/metadata"),
-    regenerateSearch: httpPOST(axios6, "search/regenerate"),
-    urlProxy: httpGET(axios6, "url/proxy"),
-    searchRole: httpGET(axios6, "auth/search/roles"),
-    searchUser: httpGET(axios6, "auth/search/users"),
-    readUser: httpGET(axios6, "auth/read/user"),
-    updateUser: httpPOST(axios6, "auth/update/user"),
-    addNewReportToCurrentUser: httpPOST(axios6, "auth/update/me"),
-    revalidateReport: httpGET(axios6, "revalidate/report"),
-    revalidateUrl: httpGET(axios6, "revalidate/url"),
-    readPrivateBlocks: httpPOST(axios6, "read/blocks/private")
+    searchMember: httpGET(axios8, "search/members"),
+    updateMember: httpGET(axios8, "update/members"),
+    imageLocalSearch: httpImageSearchFactory(axios8, "local"),
+    imageLocalSave: httpImageSaveFactory(axios8, "local"),
+    imageFlickrSearch: httpImageSearchFactory(axios8, "flickr"),
+    imageFlickrSave: httpImageSaveFactory(axios8, "flickr"),
+    imageUnsplashSearch: httpImageSearchFactory(axios8, "unsplash"),
+    imageUnsplashSave: httpImageSaveFactory(axios8, "unsplash"),
+    imageUploadSave: httpImageSaveFactory(axios8, "upload"),
+    readMetadata: httpGET(axios8, "read/metadata"),
+    regenerateSearch: httpPOST(axios8, "search/regenerate"),
+    urlProxy: httpGET(axios8, "url/proxy"),
+    searchRole: httpGET(axios8, "auth/search/roles"),
+    searchUser: httpGET(axios8, "auth/search/users"),
+    readUser: httpGET(axios8, "auth/read/user"),
+    updateUser: httpPOST(axios8, "auth/update/user"),
+    addNewReportToCurrentUser: httpPOST(axios8, "auth/update/me"),
+    revalidateReport: httpGET(axios8, "revalidate/report"),
+    revalidateUrl: httpGET(axios8, "revalidate/url"),
+    readPrivateBlocks: httpPOST(axios8, "read/blocks/private"),
+    listTablerIcons: httpListIconsFactory(axios8, "tabler"),
+    readTablerIcon: httpReadIconFactory(axios8, "tabler")
   };
 }
 var transformDeletePayload, transformReadMembers;
@@ -197,6 +229,8 @@ var init_http = __esm({
     init_imageSave();
     init_imageSearch();
     init_lib();
+    init_listIcons();
+    init_readIcon();
     transformDeletePayload = (id) => {
       return { id };
     };
@@ -778,6 +812,8 @@ function varSwap(sourceString, formatterFunctions, blockContext, passive = false
       const formatTitle = g1.replace(/^\w/g, (chr) => chr.toLowerCase());
       if (formatTitle in formatterFunctions) {
         formatter = formatterFunctions[formatTitle];
+      } else {
+        formatter = (d) => `${g1}${d}`;
       }
     }
     const value = Array.isArray(variables[keyMatch]) ? list(variables[keyMatch]) : variables[keyMatch];
@@ -2891,7 +2927,7 @@ var init_store = __esm({
     storeWrapper = createWrapper(storeFactory);
   }
 });
-function withFetcher(Component, useRef8) {
+function withFetcher(Component, useRef9) {
   const ComponentWithFetcher = (props) => {
     const {
       id,
@@ -2899,7 +2935,7 @@ function withFetcher(Component, useRef8) {
       skelWidth,
       ...otherProps
     } = props;
-    const ref = useRef8(id);
+    const ref = useRef9(id);
     if (ref.isUninitialized || ref.isFetching) {
       return /* @__PURE__ */ jsx(Skeleton, { width: skelWidth, height: skelHeight });
     }
@@ -3490,6 +3526,7 @@ init_esm_shims();
 // frontend/components/explore/ExploreFilters.tsx
 init_esm_shims();
 function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId, translations }) {
+  const [showSelectors, setShowSelectors] = useState(false);
   const [selectors, setSelectors] = useState([]);
   const [filters, setFilters] = useState({ profile: void 0, variant: void 0 });
   const [selectedProfile, setSelectedProfile] = useState();
@@ -3532,12 +3569,20 @@ function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId,
   }, [filters]);
   useEffect(() => {
     if (metadata) {
-      const selectorStructure = metadata.filter((profile) => profile.dimensions.length > 0).map((profile) => ({
-        id: profile.id,
-        name: profile.dimensions.map((d) => d.name).join(" / "),
-        variants: getVariantsCombinatory(profile.dimensions.map((d) => d.variants))
-      }));
+      let worthShowSelectors = false;
+      const selectorStructure = metadata.filter((profile) => profile.dimensions.length > 0).map((profile) => {
+        const combinatory = getVariantsCombinatory(profile.dimensions.map((d) => d.variants));
+        if (!worthShowSelectors && combinatory && combinatory.length > 2) {
+          worthShowSelectors = true;
+        }
+        return {
+          id: profile.id,
+          name: profile.dimensions.map((d) => d.name).join(" / "),
+          variants: combinatory
+        };
+      });
       setSelectors([allMember, ...selectorStructure]);
+      setShowSelectors(worthShowSelectors ? true : selectorStructure.length > 1);
       if (initialReportId || initialVariantId) {
         if (initialReportId) {
           const initialReport = selectorStructure.find((ss) => ss.id === initialReportId);
@@ -3550,8 +3595,7 @@ function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId,
     }
   }, [metadata, initialReportId, initialVariantId]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Space, { h: "md" }),
-    selectors.length > 0 && /* @__PURE__ */ jsx(Group, { position: "center", children: selectors.map((s) => /* @__PURE__ */ jsx(
+    showSelectors && /* @__PURE__ */ jsx(Group, { position: "center", className: "bespoke-explore-reports-selector", mb: "md", children: selectors.map((s) => /* @__PURE__ */ jsx(
       Button,
       {
         variant: s.id === selectedProfile?.id ? "outline" : "subtle",
@@ -3560,8 +3604,7 @@ function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId,
       },
       `p-${s.id}`
     )) }),
-    /* @__PURE__ */ jsx(Space, { h: "md" }),
-    /* @__PURE__ */ jsx(Group, { position: "center", style: { minHeight: "36px" }, children: selectedProfile && selectedProfile.variants && selectedProfile.variants.length > 2 && selectedProfile.variants.map((v) => /* @__PURE__ */ jsx(
+    selectedProfile && selectedProfile.variants && selectedProfile.variants.length > 2 && /* @__PURE__ */ jsx(Group, { position: "center", style: { minHeight: "36px" }, className: "bespoke-explore-variant-selector", mb: "md", children: selectedProfile.variants.map((v) => /* @__PURE__ */ jsx(
       Button,
       {
         variant: v.id === selectedVariant?.id ? "outline" : "subtle",
@@ -3569,8 +3612,7 @@ function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId,
         children: translations?.dimension[v.name] ?? v.name
       },
       `v-${v.id}`
-    )) }),
-    /* @__PURE__ */ jsx(Space, { h: "md" })
+    )) })
   ] });
 }
 var ExploreFilters_default = ExploreFilters;
@@ -3627,6 +3669,7 @@ function ExploreTile({ profile, profilePrefix, onSelect, reportTile }) {
   const url = `${localePrefix}${profilePrefix}${profile.path}`;
   const router = useRouter();
   const members = profile.members.map((m) => ({
+    original_id: m.metadata.id,
     name: m.name,
     id: m.id,
     variant: m.metadata.variant.name,
@@ -3658,11 +3701,14 @@ function ExploreTile({ profile, profilePrefix, onSelect, reportTile }) {
 var ExploreTile_default = ExploreTile;
 function ExploreResults({ results = [], profilePrefix, onSelect = () => void 0, reportTile }) {
   const [scrollSize, setScrollSize] = useState(500);
+  const scrollAreaRef = useRef(null);
+  const offset = scrollAreaRef.current?.offsetTop || 0;
+  const gap = 30;
   useEffect(() => {
     const { innerHeight } = window;
-    setScrollSize(innerHeight - 200);
-  }, []);
-  return /* @__PURE__ */ jsx(ScrollArea, { offsetScrollbars: true, type: "always", style: { height: scrollSize }, children: /* @__PURE__ */ jsx(Grid, { align: "stretch", children: results.map(
+    setScrollSize(innerHeight - offset - gap);
+  }, [offset]);
+  return /* @__PURE__ */ jsx(ScrollArea, { offsetScrollbars: true, type: "always", h: scrollSize, ref: scrollAreaRef, children: /* @__PURE__ */ jsx(Grid, { align: "stretch", children: results.map(
     (item) => /* @__PURE__ */ jsx(
       ExploreTile_default,
       {
@@ -3764,6 +3810,7 @@ function BespokeExplore({
       TextInput,
       {
         placeholder: exploreTranslations["search"],
+        mb: "md",
         size: "xl",
         onChange: (e) => setQuery(e.target.value),
         readOnly: loading,
@@ -3920,6 +3967,7 @@ function BespokeSearch({
             value: `VALUE: ${r.id}`,
             // Required for Autocomplete to generate keys.
             members: r.members.map((m) => ({
+              original_id: m.metadata.id,
               name: m.name,
               id: m.id,
               variant: m.metadata.variant.name,
@@ -4129,7 +4177,54 @@ function useBespokeTranslations(key) {
 function TranslationsProvider({ translations, children }) {
   return /* @__PURE__ */ jsx(TranslationsContext.Provider, { value: translations || {}, children });
 }
-function TitleView({ title, tooltip, slug, settings }) {
+
+// components/TitleIcon.tsx
+init_esm_shims();
+function TitleIcon({
+  iconType = "none",
+  iconVariant = "transparent",
+  icon = "",
+  iconRadius = "md",
+  iconSize = "md",
+  iconPadding = "1"
+}) {
+  const [srcSVG, setSrcSVG] = useState(void 0);
+  const iconPath = iconType === "custom" ? icon : `/api/cms/read/icons/${iconType}/icon.svg?name=${icon}`;
+  useEffect(() => {
+    if (iconType === "custom" || !icon) {
+      setSrcSVG(void 0);
+      return;
+    } else {
+      axios.get(iconPath, { responseType: "text" }).then((resp) => resp.data).then(setSrcSVG).catch(() => void 0);
+    }
+  }, [icon, iconType, iconPath]);
+  const ready = iconType === "custom" || srcSVG;
+  const iconElement = iconType === "custom" ? /* @__PURE__ */ jsx(Image, { src: iconPath, alt: "Title Icon" }) : void 0;
+  return /* @__PURE__ */ jsx(Fragment, { children: iconType !== "none" && icon && icon !== "" && ready && /* @__PURE__ */ jsx(
+    ThemeIcon,
+    {
+      className: "bespoke-title-icon-wrapper",
+      variant: iconVariant,
+      radius: iconRadius,
+      size: iconSize,
+      p: parseInt(iconPadding),
+      dangerouslySetInnerHTML: srcSVG && iconType !== "custom" ? { __html: srcSVG } : void 0,
+      children: iconElement
+    }
+  ) });
+}
+function TitleView({
+  title,
+  tooltip,
+  slug,
+  iconType,
+  iconVariant,
+  icon,
+  settings,
+  iconRadius,
+  iconSize,
+  iconPadding
+}) {
   const titleHTML = sanitizeBlockContent_default(title) || "<span class='cr-block-placeholder'>Title</span>";
   const tooltipHTML = sanitizeBlockContent_default(tooltip);
   const intOrder = settings && settings.order ? parseInt(settings.order, 10) : 1;
@@ -4143,13 +4238,26 @@ function TitleView({ title, tooltip, slug, settings }) {
       variantId: state.variables.attributes.variant_id1
     })
   );
-  const titleElement = /* @__PURE__ */ jsx(
-    Title,
-    {
-      order,
-      dangerouslySetInnerHTML: { __html: titleHTML }
-    }
-  );
+  const titleElement = /* @__PURE__ */ jsxs(Group, { children: [
+    /* @__PURE__ */ jsx(
+      TitleIcon,
+      {
+        iconType,
+        iconVariant,
+        iconRadius,
+        iconSize,
+        icon,
+        iconPadding
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Title,
+      {
+        order,
+        dangerouslySetInnerHTML: { __html: titleHTML }
+      }
+    )
+  ] });
   const locale = currentLocale;
   const translations = useBespokeTranslations();
   const finalElement = useMemo(() => {
@@ -4429,6 +4537,15 @@ init_esm_shims();
 init_store2();
 init_ordering();
 init_cms();
+var parseIconProps = (variables, nodeId) => {
+  return {
+    iconType: variables[`title${nodeId}iconType`],
+    icon: variables[`title${nodeId}icon`],
+    iconSize: variables[`title${nodeId}iconSize`],
+    iconVariant: variables[`title${nodeId}iconVariant`],
+    iconRadius: variables[`title${nodeId}iconRadius`]
+  };
+};
 function createOutline(elements, variables) {
   const roots = [];
   const nodes = {};
@@ -4442,10 +4559,13 @@ function createOutline(elements, variables) {
   for (const element of elements) {
     const { id, settings } = element;
     const order = parseInt(settings.order);
+    const nodeVariables = variables[id] ? variables[id] : false;
+    const iconProps = parseIconProps(nodeVariables, id);
     const node = {
       id,
       order,
       label: variables[id] ? variables[id][`title${id}title`] : `Title ${id}`,
+      iconProps,
       children: []
     };
     nodes[id] = node;
@@ -4516,19 +4636,16 @@ function useContentOutline(min = 1, max = 6, headings = []) {
     }
   }, [titlesSorted, titleVariables]);
 }
-var DesktopNav = ({ contentOutline }) => {
+var DesktopNav = ({ contentOutline, showIcons }) => {
   const renderMenu = (nodes) => {
     if (!nodes || !nodes?.length) {
       return null;
     }
     return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsx(
-        Anchor,
-        {
-          href: `#bespoke-title-${node.id}`,
-          dangerouslySetInnerHTML: { __html: node.label }
-        }
-      ) }),
+      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsx(Anchor, { href: `#bespoke-title-${node.id}`, children: /* @__PURE__ */ jsxs(Group, { spacing: "sm", children: [
+        showIcons && /* @__PURE__ */ jsx(TitleIcon, { ...node.iconProps, iconSize: "sm" }),
+        /* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: node.label } })
+      ] }) }) }),
       /* @__PURE__ */ jsx(Box, { pl: "xs", children: renderMenu(node.children) })
     ] }, node.id)) });
   };
@@ -4543,14 +4660,17 @@ var DesktopNav = ({ contentOutline }) => {
       }),
       children: contentOutline?.map(
         (node) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsxs(Menu, { trigger: "hover", openDelay: 100, closeDelay: 400, children: [
-          /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Anchor, { href: `#bespoke-title-${node.id}`, dangerouslySetInnerHTML: { __html: node.label } }) }),
+          /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Anchor, { href: `#bespoke-title-${node.id}`, children: /* @__PURE__ */ jsxs(Group, { spacing: "sm", children: [
+            showIcons && /* @__PURE__ */ jsx(TitleIcon, { ...node.iconProps, iconSize: "sm" }),
+            /* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: node.label } })
+          ] }) }) }),
           node?.children?.length ? /* @__PURE__ */ jsx(Menu.Dropdown, { children: renderMenu(node.children) }) : null
         ] }) }, node.id)
       )
     }
   ) });
 };
-var MobileAccordion = ({ contentOutline, closeNav }) => {
+var MobileAccordion = ({ contentOutline, closeNav, showIcons }) => {
   const [value, setValue] = useState(null);
   return /* @__PURE__ */ jsx(Stack, { children: contentOutline.map(
     (node) => node.children.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4562,7 +4682,10 @@ var MobileAccordion = ({ contentOutline, closeNav }) => {
             component: "a",
             onClick: closeNav,
             href: `#bespoke-title-${node.id}`,
-            children: /* @__PURE__ */ jsx(Text, { pl: "sm", dangerouslySetInnerHTML: { __html: node.label } })
+            children: /* @__PURE__ */ jsxs(Group, { spacing: "sm", noWrap: true, children: [
+              showIcons && /* @__PURE__ */ jsx(TitleIcon, { ...node.iconProps, iconSize: "sm", iconPadding: "2" }),
+              /* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: node.label } })
+            ] })
           },
           node.id
         ),
@@ -4592,7 +4715,7 @@ var MobileAccordion = ({ contentOutline, closeNav }) => {
           pl: "sm",
           transitionTimingFunction: "linear",
           transitionDuration: 200,
-          children: /* @__PURE__ */ jsx(MobileAccordion, { contentOutline: node.children, closeNav })
+          children: /* @__PURE__ */ jsx(MobileAccordion, { contentOutline: node.children, closeNav, showIcons })
         }
       )
     ] }) : /* @__PURE__ */ jsx(Group, { noWrap: true, children: /* @__PURE__ */ jsx(
@@ -4602,27 +4725,31 @@ var MobileAccordion = ({ contentOutline, closeNav }) => {
         w: "100%",
         component: "a",
         href: `#bespoke-title-${node.id}`,
-        children: /* @__PURE__ */ jsx(Text, { pl: "sm", dangerouslySetInnerHTML: { __html: node.label } })
+        children: /* @__PURE__ */ jsxs(Group, { spacing: "sm", children: [
+          showIcons && /* @__PURE__ */ jsx(TitleIcon, { ...node.iconProps, iconSize: "sm" }),
+          /* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: node.label } })
+        ] })
       },
       node.id
     ) }, node.id)
   ) });
 };
-var MobileNav = ({ contentOutline }) => {
+var MobileNav = ({ contentOutline, showIcons }) => {
   const [opened, { toggle }] = useDisclosure(false);
   const label = opened ? "Close content outline" : "Open content outline";
   return /* @__PURE__ */ jsxs(Box, { component: "nav", children: [
     /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(Burger, { opened, onClick: toggle, "aria-label": label, size: "md" }) }),
-    /* @__PURE__ */ jsx(Collapse, { in: opened, mt: "md", children: /* @__PURE__ */ jsx(MobileAccordion, { contentOutline, closeNav: toggle }) })
+    /* @__PURE__ */ jsx(Collapse, { in: opened, mt: "md", children: /* @__PURE__ */ jsx(MobileAccordion, { contentOutline, closeNav: toggle, showIcons }) })
   ] });
 };
 function NavView({ headings, settings }) {
-  const { type, min, max } = settings;
+  const { min = "1", max = "6", icons = "yes" } = settings;
   const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10), headings);
+  const showIcons = icons === "yes" ? true : false;
   const theme = useMantineTheme();
   const mq = `(max-width: ${theme.breakpoints.md})`;
   const smallerThanMd = useMediaQuery(mq);
-  return smallerThanMd ? /* @__PURE__ */ jsx(MobileNav, { contentOutline }) : /* @__PURE__ */ jsx(DesktopNav, { contentOutline });
+  return smallerThanMd ? /* @__PURE__ */ jsx(MobileNav, { contentOutline, showIcons }) : /* @__PURE__ */ jsx(DesktopNav, { contentOutline, showIcons });
 }
 
 // frontend/components/report/blocks/Related.tsx
@@ -4646,6 +4773,7 @@ function RelatedView(props) {
   return /* @__PURE__ */ jsx(Grid, { children: related_reports.map((report) => {
     const url = `${localePrefix}${profilePrefix}/${report.variant_slug}/${report.slug}`;
     const members = [{
+      original_id: report.id,
       name: report.name,
       id: report.content_id,
       variant: report.variant_name,
@@ -5230,12 +5358,249 @@ function ResetButtonUI({ id, locale, executeButton, onChange, simpleState }) {
   ] });
 }
 
+// components/blocks/types/simpleEditors/TitleUI.tsx
+init_esm_shims();
+
+// libs/blocks/stringifyWithTemplate.ts
+init_esm_shims();
+var stringifyWithTemplate_default = (object) => {
+  const regex = /([A-z0-9]*)\{\{([^}]+)\}\}/g;
+  const matcher = (_, formatter, variable) => formatter ? `\${formatters.${formatter}(variables.${variable})}` : `\${variables.${variable}}`;
+  const codified = Object.keys(object).reduce((acc, d) => ({
+    ...acc,
+    [d]: object[d].replace(regex, matcher)
+  }), {});
+  return Object.keys(codified).reduce((acc, d) => acc.concat(`"${d}": \`${codified[d]}\`,
+`), "return {").concat("};");
+};
+var TITLE_ICON_TYPES = {
+  none: { value: "none", label: "No Icon" },
+  tabler: { value: "tabler", label: "Bespoke (Tabler)", link: "https://tablericons.com", text: "Tabler Icons" },
+  custom: { value: "custom", label: "Custom Icon" }
+};
+var SIZE_OPTIONS = ["xs", "sm", "md", "lg", "xl"];
+var PADDING_OPTIONS = ["0", "1", "2", "3", "4", "5"];
+function TitleUI({ onChange, simpleState }) {
+  const [title, setTitle] = useState(simpleState?.title ?? "Title");
+  const [tooltip, setTooltip] = useState(simpleState?.tooltip ?? "");
+  const [slug, setSlug] = useState(simpleState?.slug ?? "");
+  const [iconType, setIconType] = useState(simpleState?.iconType ?? "none");
+  const [icon, setIcon] = useState(simpleState?.icon ?? "");
+  const [iconsList, setIconsList] = useState([]);
+  const [defaultIcon, setDefaultIcon] = useState("");
+  const [iconVariant, setIconVariant] = useState(simpleState?.iconVariant ?? "transparent");
+  const [iconSize, setIconSize] = useState(simpleState?.iconSize ?? "md");
+  const [iconRadius, setIconRadius] = useState(simpleState?.iconRadius ?? "md");
+  const [iconPadding, setIconPadding] = useState(simpleState?.iconPadding ?? "1");
+  const isNoneOrCustom = [TITLE_ICON_TYPES.none.value, TITLE_ICON_TYPES.custom.value].includes(iconType);
+  const IconItem = useMemo(() => forwardRef(
+    ({ value, ...others }, ref) => {
+      return /* @__PURE__ */ jsx("div", { ref, ...others, children: /* @__PURE__ */ jsxs(Group, { noWrap: true, children: [
+        /* @__PURE__ */ jsx(
+          Image,
+          {
+            width: 20,
+            height: 20,
+            src: `/api/cms/read/icons/${iconType}/icon.svg?name=${value}`,
+            alt: `Icon preview ${value}`
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: value })
+      ] }) });
+    }
+  ), [iconType]);
+  useEffect(() => {
+    if (!isNoneOrCustom) {
+      axios.get(`/api/cms/list/icons/${iconType}`).then((response) => {
+        setIconsList(response.data.data.results);
+        setDefaultIcon(response.data.data.results[0]);
+      });
+    }
+  }, [iconType]);
+  useEffect(() => {
+    const simpleState2 = {
+      title,
+      tooltip,
+      slug,
+      iconType,
+      icon,
+      iconVariant,
+      iconSize,
+      iconRadius,
+      iconPadding
+    };
+    const logic = stringifyWithTemplate_default(simpleState2);
+    onChange(simpleState2, logic);
+  }, [title, tooltip, slug, iconType, icon, iconVariant, iconSize, iconRadius, iconPadding]);
+  const onChangeIconType = (value) => {
+    setIcon("");
+    setIconType(value);
+  };
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        placeholder: "Title here",
+        label: "Title",
+        required: true,
+        value: title,
+        onChange: (e) => setTitle(e.currentTarget.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        placeholder: "Tooltip text here",
+        label: "Tooltip",
+        value: tooltip,
+        onChange: (e) => setTooltip(e.currentTarget.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        placeholder: "Slug here",
+        label: "Slug",
+        value: slug,
+        onChange: (e) => setSlug(e.currentTarget.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(Accordion, { variant: "separated", children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "icon", children: [
+      /* @__PURE__ */ jsx(Accordion.Control, { icon: /* @__PURE__ */ jsx(IconPhotoFilled, {}), children: /* @__PURE__ */ jsxs(Text, { children: [
+        "Icon configuration: ",
+        TITLE_ICON_TYPES[iconType] && /* @__PURE__ */ jsx("strong", { children: TITLE_ICON_TYPES[iconType].label })
+      ] }) }),
+      /* @__PURE__ */ jsx(Accordion.Panel, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+        /* @__PURE__ */ jsx(Input.Wrapper, { label: "Title's icon", children: /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            fullWidth: true,
+            value: iconType,
+            onChange: onChangeIconType,
+            data: Object.values(TITLE_ICON_TYPES)
+          }
+        ) }),
+        !isNoneOrCustom && /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: "Choose an icon from the list",
+            searchable: true,
+            description: /* @__PURE__ */ jsxs(Fragment, { children: [
+              "Powered by",
+              " ",
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  style: { textDecoration: "underline" },
+                  href: TITLE_ICON_TYPES[iconType].link,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  children: TITLE_ICON_TYPES[iconType].text
+                }
+              ),
+              "."
+            ] }),
+            defaultValue: defaultIcon,
+            value: icon,
+            required: true,
+            onChange: (value) => setIcon(value ? value : ""),
+            data: iconsList,
+            limit: 20,
+            itemComponent: IconItem,
+            disabled: !iconsList || iconsList.length === 0,
+            icon: /* @__PURE__ */ jsx(
+              Image,
+              {
+                p: 5,
+                src: `/api/cms/read/icons/${iconType}/icon.svg?name=${icon || defaultIcon}`,
+                alt: "Icon preview"
+              }
+            )
+          }
+        ),
+        iconType === TITLE_ICON_TYPES.custom.value && /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            placeholder: "e.g '/image{{id1}}.png' or 'http://site/image.png'",
+            label: "Enter an icon path",
+            required: true,
+            value: icon,
+            description: "Add an absolute or a relative path url",
+            onChange: (e) => setIcon(e.currentTarget.value)
+          }
+        ),
+        iconType !== TITLE_ICON_TYPES.none.value && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: "Variant design",
+              description: /* @__PURE__ */ jsxs(Fragment, { children: [
+                "We are using",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    style: { textDecoration: "underline" },
+                    href: "https://mantine.dev/core/theme-icon/",
+                    target: "_blank",
+                    rel: "noreferrer",
+                    children: "ThemeIcon variants"
+                  }
+                ),
+                "."
+              ] }),
+              value: iconVariant,
+              required: true,
+              onChange: (value) => setIconVariant(value ? value : "transparent"),
+              data: [
+                { value: "transparent", label: "Transparent" },
+                { value: "default", label: "Default" },
+                { value: "outline", label: "Outline" },
+                { value: "light", label: "Light" },
+                { value: "filled", label: "Filled" }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Input.Wrapper, { label: "Size", children: /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              fullWidth: true,
+              value: iconSize,
+              onChange: setIconSize,
+              data: SIZE_OPTIONS
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Input.Wrapper, { label: "Radius", children: /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              fullWidth: true,
+              value: iconRadius,
+              onChange: setIconRadius,
+              data: SIZE_OPTIONS
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Input.Wrapper, { label: "Padding", children: /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              fullWidth: true,
+              value: iconPadding,
+              onChange: setIconPadding,
+              data: PADDING_OPTIONS
+            }
+          ) })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+}
+
 // components/blocks/types/simpleEditors/index.js
 var simpleEditors_default = {
   [BLOCK_TYPES.SELECTOR]: SelectorUI_default,
   [BLOCK_TYPES.NAV]: NavUI,
   [BLOCK_TYPES.RELATED]: RelatedUI,
-  [BLOCK_TYPES.RESET_BUTTON]: ResetButtonUI
+  [BLOCK_TYPES.RESET_BUTTON]: ResetButtonUI,
+  [BLOCK_TYPES.TITLE]: TitleUI
 };
 
 // components/blocks/types/renderers/index.tsx
@@ -5293,7 +5658,18 @@ function SubtitlePreview({ subtitle, tooltip }) {
 // components/blocks/types/renderers/Title.tsx
 init_esm_shims();
 init_sanitizeBlockContent();
-function TitlePreview({ title, tooltip, slug, settings }) {
+function TitlePreview({
+  title,
+  tooltip,
+  slug,
+  iconType,
+  iconVariant,
+  icon,
+  settings,
+  iconRadius,
+  iconSize,
+  iconPadding
+}) {
   const titleHTML = sanitizeBlockContent_default(title) || "<span class='cr-block-placeholder'>Title</span>";
   const tooltipHTML = sanitizeBlockContent_default(tooltip);
   const intOrder = settings && settings.order ? parseInt(settings.order, 10) : 1;
@@ -5302,6 +5678,17 @@ function TitlePreview({ title, tooltip, slug, settings }) {
   const searchType = settings && settings.search ? settings.search : "";
   return /* @__PURE__ */ jsxs(Group, { spacing: "sm", children: [
     tooltip && /* @__PURE__ */ jsx("div", { style: { position: "absolute", right: "50px" }, children: /* @__PURE__ */ jsx(Tooltip, { label: tooltipHTML, withArrow: true, withinPortal: true, children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconInfoCircle, {}) }) }) }, "tooltip"),
+    /* @__PURE__ */ jsx(
+      TitleIcon,
+      {
+        iconType,
+        iconVariant,
+        iconRadius,
+        iconSize,
+        icon,
+        iconPadding
+      }
+    ),
     /* @__PURE__ */ jsx(
       Title,
       {
@@ -5695,52 +6082,50 @@ function stringifyPreview(member) {
   return `${variant}/${member.slug}`;
 }
 function NavPreview({ headings, settings }) {
-  const { type, min, max } = settings;
+  const { min = "1", max = "6", icons = "yes" } = settings;
   const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10), headings);
+  const showIcons = icons === "yes" ? true : false;
   const renderMenu = (nodes) => {
     if (!nodes || !nodes?.length) {
       return null;
     }
     return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsx(
         Anchor,
         {
           href: `#bespoke-title-${node.id}`,
-          children: [
-            "Title ",
-            node.id
-          ]
+          children: /* @__PURE__ */ jsxs(Group, { spacing: "sm", children: [
+            showIcons && /* @__PURE__ */ jsx(TitleIcon, { ...node.iconProps, iconSize: "sm" }),
+            /* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: node.label } })
+          ] })
         }
       ) }, node.id),
       /* @__PURE__ */ jsx(Box, { pl: "xs", children: renderMenu(node.children) })
     ] }, node.id)) });
   };
-  return /* @__PURE__ */ jsxs(Box, { pos: "relative", children: [
-    /* @__PURE__ */ jsx(Tooltip, { label: `
-      This is a preview navbar.
-      The titles displayed are just placeholders.
-      The finished report will display the actual titles.`, children: /* @__PURE__ */ jsx(ActionIcon, { pos: "absolute", children: /* @__PURE__ */ jsx(IconInfoCircle, {}) }) }),
-    /* @__PURE__ */ jsx(
-      List,
-      {
-        sx: (theme) => ({
-          display: "flex",
-          gap: theme.spacing.md,
-          justifyContent: "center",
-          listStyleType: "none"
-        }),
-        children: contentOutline?.map(
+  return /* @__PURE__ */ jsx(Box, { pos: "relative", children: /* @__PURE__ */ jsxs(
+    List,
+    {
+      sx: (theme) => ({
+        display: "flex",
+        gap: theme.spacing.md,
+        justifyContent: "center",
+        listStyleType: "none"
+      }),
+      children: [
+        contentOutline?.map(
           (node) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsxs(Menu, { trigger: "hover", openDelay: 100, closeDelay: 400, children: [
-            /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(Anchor, { href: `#bespoke-title-${node.id}`, children: [
-              "Title ",
-              node.id
-            ] }) }),
+            /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Anchor, { href: `#bespoke-title-${node.id}`, children: /* @__PURE__ */ jsxs(Group, { spacing: "sm", noWrap: true, children: [
+              showIcons && /* @__PURE__ */ jsx(TitleIcon, { ...node.iconProps, iconSize: "sm", iconPadding: "2" }),
+              /* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: node.label } })
+            ] }) }) }),
             node?.children?.length ? /* @__PURE__ */ jsx(Menu.Dropdown, { children: renderMenu(node.children) }) : null
           ] }) }, node.id)
-        )
-      }
-    )
-  ] });
+        ),
+        !contentOutline || contentOutline.length === 0 && /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(Text, { color: "dimmed", children: "- Include some titles as inputs to see the Nav component -" }) })
+      ]
+    }
+  ) });
 }
 
 // components/blocks/types/renderers/Related.tsx
@@ -5850,6 +6235,7 @@ var allBlocks = {
   [BLOCK_TYPES.TITLE]: {
     type: BLOCK_TYPES.TITLE,
     renderer: renderers_default[BLOCK_TYPES.TITLE],
+    editor: simpleEditors_default[BLOCK_TYPES.TITLE],
     renderPreviewOnEdit: true,
     evalWhenNonActive: true
   },
@@ -6409,8 +6795,8 @@ function DataTab(props) {
       /* @__PURE__ */ jsx(
         Input.Wrapper,
         {
-          label: `Formatted ${selectedSource.title} 
-            ${currentPreview.length > PREVIEW_SIZE ? `(First ${PREVIEW_SIZE} rows as preview)` : ""}:`,
+          label: `${translations["formatted_src"].replace("{src}", selectedSource.title)}
+              ${currentPreview.length > PREVIEW_SIZE ? translations["rows_preview"].replace("{nrows}", PREVIEW_SIZE) : ""}:`,
           style: { height: "300px" },
           children: /* @__PURE__ */ jsx(SortableTable, { data: currentPreview.slice(0, PREVIEW_SIZE) })
         }
@@ -6512,7 +6898,9 @@ var DEFAULT_TRANSLATIONS3 = {
   "choose_format": "Choose format",
   "transparent_bg": "Transparent background",
   "processing": "Processing image...",
-  "download": "Download {imageFormat}"
+  "download": "Download {imageFormat}",
+  "entire_section": "Entire section",
+  "viz_only": "Visualization only"
 };
 function ImageTab(props) {
   const { section } = props;
@@ -6656,7 +7044,7 @@ function ImageTab(props) {
           },
           variant: imageContext === contextOptions.section ? "filled" : "default",
           fullWidth: true,
-          children: "Entire section"
+          children: translations["entire_section"]
         }
       ),
       vizAvailable.length > 0 && /* @__PURE__ */ jsx(
@@ -6666,7 +7054,7 @@ function ImageTab(props) {
           onClick: () => setImageContext(contextOptions.viz),
           variant: imageContext === contextOptions.viz ? "filled" : "default",
           fullWidth: true,
-          children: "Visualization only"
+          children: translations["viz_only"]
         }
       )
     ] }) }),
@@ -6896,9 +7284,9 @@ function Options(props) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "cms-section-options", children: [
     /* @__PURE__ */ jsxs(Button.Group, { children: [
-      /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", compact: true, onClick: () => onClickOption("data"), children: /* @__PURE__ */ jsx(IconTable, { size: 16 }) }),
-      /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", compact: true, onClick: () => onClickOption("image"), children: /* @__PURE__ */ jsx(IconCamera, { size: 16 }) }),
-      /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", compact: true, onClick: () => onClickOption("share"), children: /* @__PURE__ */ jsx(IconShare, { size: 16 }) })
+      /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", compact: true, onClick: () => onClickOption("data"), "aria-label": "Download Data", children: /* @__PURE__ */ jsx(IconTable, { size: 16 }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", compact: true, onClick: () => onClickOption("image"), "aria-label": "Download Chart", children: /* @__PURE__ */ jsx(IconCamera, { size: 16 }) }),
+      /* @__PURE__ */ jsx(Button, { variant: "default", size: "xs", compact: true, onClick: () => onClickOption("share"), "aria-label": "Share Link", children: /* @__PURE__ */ jsx(IconShare, { size: 16 }) })
     ] }),
     sectionRef.isSuccess && /* @__PURE__ */ jsx(
       OptionsModal,
@@ -7329,6 +7717,14 @@ var customSettings = {
         { label: "5", value: "5" },
         { label: "6", value: "6" }
       ]
+    },
+    icons: {
+      label: "Show icons",
+      defaultValue: "yes",
+      options: [
+        { label: "Yes", value: "yes" },
+        { label: "No", value: "no" }
+      ]
     }
   }
 };
@@ -10147,19 +10543,6 @@ var deepClone = (o) => {
   return output;
 };
 var deepClone_default = deepClone;
-
-// libs/blocks/stringifyWithTemplate.ts
-init_esm_shims();
-var stringifyWithTemplate_default = (object) => {
-  const regex = /([A-z0-9]*)\{\{([^}]+)\}\}/g;
-  const matcher = (_, formatter, variable) => formatter ? `\${formatters.${formatter}(variables.${variable})}` : `\${variables.${variable}}`;
-  const codified = Object.keys(object).reduce((acc, d) => ({
-    ...acc,
-    [d]: object[d].replace(regex, matcher)
-  }), {});
-  return Object.keys(codified).reduce((acc, d) => acc.concat(`"${d}": \`${codified[d]}\`,
-`), "return {").concat("};");
-};
 function RichTextEditor({
   fields,
   locale,

package/dist/server.js

@@ -20,6 +20,9 @@ import FlickrSDK from 'flickr-sdk';
 import sharp from 'sharp';
 import { createApi } from 'unsplash-js';
 import fs from 'fs';
+import { createContext, createElement } from 'react';
+import { renderToString } from 'react-dom/server';
+import * as allIcons from '@tabler/icons-react';
 import NextCors from 'nextjs-cors';
 import formidable from 'formidable';
 import toposort from 'toposort';
@@ -27,7 +30,6 @@ import { schema, normalize } from 'normalizr';
 import { createSlice, configureStore } from '@reduxjs/toolkit';
 import { HYDRATE, createWrapper } from 'next-redux-wrapper';
 import { notifications } from '@mantine/notifications';
-import { createContext } from 'react';
 import 'react-redux';
 import 'react/jsx-runtime';
 import '@mantine/core';
@@ -3302,6 +3304,45 @@ function dbReadPrivateBlocksFactory(db) {
     };
   }
 }
+var iconsList = Object.keys(allIcons).filter((iconName) => iconName.indexOf("Icon") === 0);
+async function listTablerProvider() {
+  return {
+    meta: {
+      provider: "tabler"
+    },
+    results: iconsList
+  };
+}
+async function readTablerProvider(params) {
+  const IconComponent = allIcons[params.name] ? allIcons[params.name] : () => "";
+  return renderToString(createElement(IconComponent));
+}
+
+// api/db/icon/listIcons.ts
+var listIconProviders = {
+  tabler: listTablerProvider
+};
+function dbListIconsFactory(provider) {
+  const listIconProvider = listIconProviders[provider];
+  if (!listIconProvider) {
+    throw new BackendError(500, `Wrong provider dbListIconsFactory.ts: ${provider}`);
+  }
+  return resultWrapper(() => listIconProvider());
+}
+
+// api/db/icon/readIcon.ts
+var readIconProviders = {
+  tabler: readTablerProvider
+};
+function dbReadIconFactory(provider) {
+  return resultWrapper((params) => {
+    const readIconProvider = readIconProviders[provider];
+    if (!readIconProvider) {
+      throw new BackendError(500, `Wrong provider dbReadIconFactory.ts: ${params.provider}`);
+    }
+    return readIconProvider({ name: params.name, provider });
+  });
+}
 
 // api/db/index.ts
 function useDatabaseApi(_, __, api) {
@@ -3330,7 +3371,9 @@ function apiFactory(dbModels) {
     addNewReportToCurrentUser: resultWrapper(dbAddNewReportToCurrentUser()),
     revalidateReport: resultWrapper(dbRevalidateReportFactory(dbModels)),
     revalidateUrl: resultWrapper(dbRevalidateUrlFactory()),
-    readPrivateBlocks: resultWrapper(dbReadPrivateBlocksFactory(dbModels))
+    readPrivateBlocks: resultWrapper(dbReadPrivateBlocksFactory(dbModels)),
+    listTablerIcons: dbListIconsFactory("tabler"),
+    readTablerIcon: dbReadIconFactory("tabler")
   };
 }
 async function parseBody(req) {
@@ -3657,6 +3700,27 @@ function endpointAddNewReportToCurrentUserFactory(operations) {
   }, [CMS_ROLES.EDITOR]);
 }
 
+// api/endpoints/icon/listIcons.ts
+function endpointListIconsFactory(operations, provider) {
+  const listMethodKey = `list${capitalize(provider)}Icons`;
+  const listMethod = operations[listMethodKey];
+  return endpoint("GET", `list/icons/${provider}`, async () => {
+    return listMethod({});
+  }, [CMS_ROLES.EDITOR]);
+}
+
+// api/endpoints/icon/readIcon.ts
+function endpointReadIconFactory(operations, provider) {
+  const readMethodKey = `read${capitalize(provider)}Icon`;
+  const readMethod = operations[readMethodKey];
+  return endpoint("GET", `read/icons/${provider}/icon.svg`, async (req) => {
+    return readMethod({
+      provider,
+      name: req.query.name
+    });
+  });
+}
+
 // api/endpoints/index.ts
 var verbose3 = getLogging_default();
 function endpointKey(method, path) {
@@ -3690,7 +3754,9 @@ function getEndpointMap(db) {
     endpointAddNewReportToCurrentUserFactory(api),
     endpointRevalidateReportFactory(api),
     endpointRevalidateUrlFactory(),
-    endpointReadPrivateBlocksFactory(api)
+    endpointReadPrivateBlocksFactory(api),
+    endpointListIconsFactory(api, "tabler"),
+    endpointReadIconFactory(api, "tabler")
   ].map(({ handler, method, path, roleRequired }) => [endpointKey(method, path), { handler, roleRequired }]));
 }
 var endpointMap = getDB().then(getEndpointMap);
@@ -3730,6 +3796,9 @@ async function endpointNextJsHandlerFactory(req, res) {
             if (result.data instanceof Buffer) {
               const image = result.data;
               res.writeHead(result.status, { "Content-Type": "image/png" }).end(image, "binary");
+            } else if (req.url.indexOf("/icon.svg?name=") > 0) {
+              res.setHeader("Content-Type", "image/svg+xml");
+              res.status(result.status).send(result.data);
             } else {
               res.status(result.status).json({ data: result.data });
             }
@@ -3848,6 +3917,24 @@ function httpImageSearchFactory(axios6, provider) {
   });
 }
 
+// api/http/icon/listIcons.ts
+function httpListIconsFactory(axios6, provider) {
+  return () => http(axios6, {
+    method: "GET",
+    url: `list/icons/${provider}`,
+    params: { provider }
+  });
+}
+
+// api/http/icon/readIcon.ts
+function httpReadIconFactory(axios6, provider) {
+  return (params) => http(axios6, {
+    method: "GET",
+    url: `read/icons/${provider}/icon.svg`,
+    params: { name: params.name }
+  });
+}
+
 // api/http/index.ts
 var transformDeletePayload = (id) => {
   return { id };
@@ -3917,7 +4004,9 @@ function apiFactory2(baseURL) {
     addNewReportToCurrentUser: httpPOST(axios6, "auth/update/me"),
     revalidateReport: httpGET(axios6, "revalidate/report"),
     revalidateUrl: httpGET(axios6, "revalidate/url"),
-    readPrivateBlocks: httpPOST(axios6, "read/blocks/private")
+    readPrivateBlocks: httpPOST(axios6, "read/blocks/private"),
+    listTablerIcons: httpListIconsFactory(axios6, "tabler"),
+    readTablerIcon: httpReadIconFactory(axios6, "tabler")
   };
 }
 
@@ -4000,6 +4089,8 @@ function varSwap(sourceString, formatterFunctions, blockContext, passive = false
       const formatTitle = g1.replace(/^\w/g, (chr) => chr.toLowerCase());
       if (formatTitle in formatterFunctions) {
         formatter = formatterFunctions[formatTitle];
+      } else {
+        formatter = (d) => `${g1}${d}`;
       }
     }
     const value = Array.isArray(variables[keyMatch]) ? list(variables[keyMatch]) : variables[keyMatch];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {