@datawheel/bespoke 0.1.27 → 0.1.29

package/dist/index.js

@@ -16,12 +16,12 @@ import { Notifications, notifications } from '@mantine/notifications';
 import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, 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, Tooltip, ActionIcon, Center, useMantineTheme, Modal, Button, Flex, SegmentedControl, Select, MultiSelect, Title, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, TextInput, Loader, Alert, Collapse, Card, Space, Code, Textarea, rem, Overlay, Grid, Input, Popover, Checkbox, Radio, Switch, Drawer, Autocomplete, Tabs, Header, px, SimpleGrid, Image, Paper, FileInput, Accordion, HoverCard, CopyButton, NumberInput, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Tooltip, ActionIcon, Center, Modal, Button, SegmentedControl, Select, MultiSelect, Title, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, TextInput, Loader, Alert, Collapse, Card, Space, Code, Textarea, rem, Paper, Grid, Input, Popover, Checkbox, Radio, Switch, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, Image, FileInput, Accordion, HoverCard, CopyButton, NumberInput, Col } from '@mantine/core';
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
-import { IconInfoCircle, IconSearch, IconAlignLeft, IconAlignCenter, IconAlignRight, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconTrash, IconUserCircle, IconEdit, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconAlarmFilled, IconBox, IconLink, IconCirclePlus, IconCircleX, IconFlag, IconFileAnalytics, IconPlus, IconX, IconChevronDown, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconHierarchy3, IconMenu, IconRefresh, IconPolaroid, IconCircleMinus, IconEyeOff, IconChevronLeft, IconChevronRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconCodePlus, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe } from '@tabler/icons-react';
-import { useMediaQuery, useDisclosure, useDebouncedValue, useSetState, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
+import { IconInfoCircle, 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, IconX, IconChevronDown, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconHierarchy3, IconMenu, IconRefresh, IconPolaroid, IconCircleMinus, IconEyeOff, IconChevronLeft, IconChevronRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconCodePlus, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe } from '@tabler/icons-react';
+import { useMediaQuery, useDisclosure, useDebouncedValue, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import parse2, { Element, domToReact, Text as Text$1 } from 'html-react-parser';
@@ -1091,6 +1091,20 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
   let apiResponse;
   let duration = null;
   let api = null;
+  if (!allowed) {
+    return {
+      outputVariables: {},
+      renderVariables: {},
+      status: {
+        api: null,
+        duration: null,
+        resp: null,
+        log: [],
+        error: null,
+        allowed: false
+      }
+    };
+  }
   if (unswappedAPI) {
     api = swapAPI(unswappedAPI, formatterFunctions, blockContext);
     const isAbsolute = new RegExp("^(?:[a-z+]+:)?//", "i");
@@ -1103,7 +1117,7 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
       return result;
     }, (e) => {
       if (verbose2)
-        console.error(`Error fetching ${api}: ${e.message}`);
+        console.error(`Error fetching ${api} block ${block.id}: ${e.message}`);
       return { data: {}, requestDuration: 0 };
     });
     resp = apiResponse.data;
@@ -1237,7 +1251,7 @@ var init_runConsumers = __esm({
           allowed = false;
         } else {
           const parsedBlockContext = parseBlockContext(blockContext);
-          const { vars, error, output } = mortarEval_default(
+          const { error, output } = mortarEval_default(
             "variables",
             variables,
             block.settings.allowedLogic || "return false;",
@@ -1251,11 +1265,11 @@ var init_runConsumers = __esm({
       }
       return allowed;
     };
-    runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockContext, initialVariables = {}, readMemberFn, mode = "section") => {
+    runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockContext, initialState4 = {}, readMemberFn, mode = "section") => {
       if (!bid && !sections)
-        return { variables: { ...initialVariables } };
-      const variablesById = { ...initialVariables };
-      const statusById = {};
+        return { ...initialState4 };
+      const variablesById = { ...initialState4.variables ?? {} };
+      const statusById = { ...initialState4.status ?? {} };
       const parsedBlockContext = parseBlockContext(blockContext);
       const attributes = parsedBlockContext.variables;
       const rootBlocks = bid ? { [bid]: blocks[bid] } : sections.reduce((rootBlocks2, { id }) => ({ ...rootBlocks2, ...getRootBlocksForSection_default(id, blocks) }), {});
@@ -1277,6 +1291,19 @@ var init_runConsumers = __esm({
           );
           const runningTask = dependenciesDone.then(() => {
             const variables = block.inputs.reduce((acc, d) => ({ ...acc, ...variablesById[d] }), attributes);
+            const inputNotAllowed = block.inputs.find((iid) => !statusById[iid].allowed || statusById[iid].hiddenByCascade);
+            if (inputNotAllowed) {
+              statusById[bid2] = {
+                api: null,
+                duration: null,
+                resp: null,
+                log: [],
+                error: null,
+                allowed: false,
+                hiddenByCascade: statusById[inputNotAllowed].hiddenByCascade || inputNotAllowed
+              };
+              return;
+            }
             return runSingleBlock(
               block,
               formatterFunctions,
@@ -1295,7 +1322,10 @@ var init_runConsumers = __esm({
         await Promise.all(Array.from(runningBlocks.values()));
       }
       await runTasksInParallel(orderedDAG, blocks);
-      return { variables: { ...initialVariables, ...variablesById }, status: statusById };
+      return {
+        variables: { ...initialState4.variables ?? {}, ...variablesById },
+        status: { ...initialState4.status ?? {}, ...statusById }
+      };
     };
     getDurationColor = (duration) => {
       if (duration < 250)
@@ -1470,11 +1500,11 @@ var init_FUNC = __esm({
   "libs/FUNC.js"() {
     init_esm_shims();
     init_libs();
-    parse = (config, formatters = {}, locale = "en", actions = {}, extraGlobals = {}) => {
+    parse = (config, formatters2 = {}, locale = "en", actions = {}, extraGlobals = {}) => {
       const globals = {
         setVariables: actions.onSetVariables ? actions.onSetVariables : (d) => d,
         openModal: actions.onOpenModal ? actions.onOpenModal : (d) => d,
-        formatters,
+        formatters: formatters2,
         libs: libraries,
         locale,
         ...extraGlobals
@@ -1608,7 +1638,7 @@ var init_lib2 = __esm({
         statusPayload
       };
     };
-    funcifyFormattersByLocale = (formatters = [], locale = localeDefault3) => formatters.reduce((acc, f) => {
+    funcifyFormattersByLocale = (formatters2 = [], locale = localeDefault3) => formatters2.reduce((acc, f) => {
       const formatterFn = parse({ vars: ["n"], logic: f.content.logic }, {}, locale, {});
       acc[f.name] = formatterFn;
       return acc;
@@ -2439,15 +2469,15 @@ var init_actions = __esm({
 });
 function ResourceProvider(props) {
   const { pathSegment, profilePrefix } = props;
-  const formatters = useFormatterList();
+  const formatters2 = useFormatterList();
   const value = useMemo(() => ({
     profilePrefix,
     pathSegment,
     formatterFunctions: locales3.reduce((acc, locale) => ({
       ...acc,
-      [locale]: formatters.data ? funcifyFormattersByLocale(formatters.data, locale) : {}
+      [locale]: formatters2.data ? funcifyFormattersByLocale(formatters2.data, locale) : {}
     }), {})
-  }), [formatters, pathSegment, profilePrefix]);
+  }), [formatters2, pathSegment, profilePrefix]);
   return /* @__PURE__ */ jsx(ResourceContext.Provider, { value, children: props.children });
 }
 function useBespoke() {
@@ -2678,7 +2708,7 @@ var init_store = __esm({
     storeWrapper = createWrapper(storeFactory);
   }
 });
-function withFetcher(Component, useRef7) {
+function withFetcher(Component, useRef8) {
   const ComponentWithFetcher = (props) => {
     const {
       id,
@@ -2686,7 +2716,7 @@ function withFetcher(Component, useRef7) {
       skelWidth,
       ...otherProps
     } = props;
-    const ref = useRef7(id);
+    const ref = useRef8(id);
     if (ref.isUninitialized || ref.isFetching) {
       return /* @__PURE__ */ jsx(Skeleton, { width: skelWidth, height: skelHeight });
     }
@@ -2742,10 +2772,10 @@ var init_d3plusPropify = __esm({
     <strong>${frontEndMessage}</strong>
   </p>`
     };
-    propify = (logic, formatters, variables = {}, locale = localeDefault7, id = null, actions = {}, globals = {}) => {
+    propify = (logic, formatters2, variables = {}, locale = localeDefault7, id = null, actions = {}, globals = {}) => {
       let config;
       try {
-        config = parse({ vars: ["variables"], logic }, formatters, locale, actions, globals)(variables);
+        config = parse({ vars: ["variables"], logic }, formatters2, locale, actions, globals)(variables);
       } catch (e) {
         console.error(`Parsing Error in propify (ID: ${id})`);
         console.error(`Error message: ${e.message}`);
@@ -2815,6 +2845,37 @@ var init_defaultConfig = __esm({
     };
   }
 });
+var ErrorBoundary;
+var init_ErrorBoundary = __esm({
+  "views/ErrorBoundary.tsx"() {
+    init_esm_shims();
+    ErrorBoundary = class extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+      }
+      static getDerivedStateFromError(error) {
+        return { hasError: true };
+      }
+      componentDidCatch(error, info) {
+        console.log("Error information:", info.componentStack);
+        notifications.show({
+          autoClose: false,
+          color: "red",
+          id: "revalidate-error",
+          message: "Check the console for more details",
+          title: error.message
+        });
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.props.fallback;
+        }
+        return this.props.children;
+      }
+    };
+  }
+});
 
 // frontend/components/report/blocks/Viz.tsx
 var Viz_exports = {};
@@ -2847,17 +2908,17 @@ function Viz(config) {
   if (!vizTypes[type])
     vizProps.config = { error: `"${type}" is not a valid Visualization Type` };
   const Visualization = vizTypes[fallbackType];
-  vizProps.config = { ...vizProps.config, ...configOverride };
-  const vizConfig = { locale, variables, ...vizProps.config };
+  const { _data, ...vizPropsConfig } = vizProps.config;
+  const vizConfig = { locale, variables, ...vizPropsConfig, ...configOverride };
   return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
         display: "flex",
         flex: "1 1 100%",
-        minHeight: 500
+        minHeight: 400
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Error in d3plus viz config." }), children: /* @__PURE__ */ jsx(
         Visualization,
         {
           style: { flex: 1 },
@@ -2878,7 +2939,7 @@ function Viz(config) {
           config: { ...defaultConfig_default, ...vizConfig }
         },
         "viz-key"
-      )
+      ) })
     }
   );
 }
@@ -2892,6 +2953,7 @@ var init_Viz = __esm({
     init_hooks();
     init_defaultConfig();
     init_hooks();
+    init_ErrorBoundary();
     vizTypes = {
       ...d3plus
     };
@@ -3083,8 +3145,8 @@ function Viz2({
   if (debugMessage) {
     return /* @__PURE__ */ jsx(Center, { style: { height: "100%" }, children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: debugMessage }, "type") });
   }
-  vizProps.config = { ...vizProps.config, ...configOverride };
-  const vizConfig = { locale, variables, ...vizProps.config };
+  const { _data, ...vizPropsConfig } = vizProps.config;
+  const vizConfig = { locale, variables, ...vizPropsConfig, ...configOverride };
   if (context.print)
     vizConfig.detectVisible = false;
   !context.print && type !== "Graphic" && type !== "HTML";
@@ -3095,7 +3157,7 @@ function Viz2({
         display: "flex",
         flex: "1 1 100%"
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Error in d3plus viz config." }), children: /* @__PURE__ */ jsx(
         Visualization,
         {
           style: { flex: 1 },
@@ -3116,7 +3178,7 @@ function Viz2({
           config: { ...defaultConfig_default, ...vizConfig }
         },
         "viz-key"
-      )
+      ) })
     }
   );
 }
@@ -3133,6 +3195,7 @@ var init_Viz2 = __esm({
     init_d3plusPropify();
     init_getBlockContent();
     init_hooks();
+    init_ErrorBoundary();
     useAppContext = () => ({});
     CustomVizzes = {};
     vizTypes2 = {
@@ -3867,9 +3930,10 @@ function useOnChangeSelector(blockId, section, selectorIdentifier) {
   const attributes = useAppSelector((state2) => state2.variables.attributes);
   const blockRecords = selectBlockRecords(state);
   const formatterList = selectFormatterList(state);
-  const formatters = funcifyFormattersByLocale(formatterList, localeDefault4);
+  const formatters2 = funcifyFormattersByLocale(formatterList, localeDefault4);
   const variables = useInputVariablesFlat(blockId);
   const initialVariables = useAppSelector((state2) => state2.variables.variables);
+  const initialStatus = useAppSelector((state2) => state2.variables.status);
   const readMemberFn = useReadMemberFn();
   const callback = useCallback(
     (value) => {
@@ -3883,9 +3947,12 @@ function useOnChangeSelector(blockId, section, selectorIdentifier) {
         blockRecords,
         void 0,
         blockId,
-        formatters,
+        formatters2,
         blockContext,
-        initialVariables,
+        {
+          variables: initialVariables,
+          status: initialStatus
+        },
         readMemberFn,
         "report"
       ).then((data) => {
@@ -3903,7 +3970,7 @@ function useOnChangeSelector(blockId, section, selectorIdentifier) {
       query,
       blockRecords,
       dispatch,
-      formatters,
+      formatters2,
       router,
       variables.attributes
     ]
@@ -4002,8 +4069,9 @@ function useInitialState(pathSegmentsKey) {
   const attributes = useAppSelector((state2) => state2.variables.attributes);
   const blockRecords = selectBlockRecords(state);
   const formatterList = selectFormatterList(state);
-  const formatters = funcifyFormattersByLocale(formatterList, localeDefault4);
+  const formatters2 = funcifyFormattersByLocale(formatterList, localeDefault4);
   const variables = useAppSelector((state2) => state2.variables.variables);
+  const status = useAppSelector((state2) => state2.variables.status);
   const readMemberFn = useReadMemberFn();
   useEffect(() => {
     if (!isLoading && user && report_id) {
@@ -4045,9 +4113,9 @@ function useInitialState(pathSegmentsKey) {
             blockRecords,
             void 0,
             bid,
-            formatters,
+            formatters2,
             blockContext,
-            variables,
+            { variables, status },
             readMemberFn,
             "report"
           ).then((data) => {
@@ -4118,12 +4186,14 @@ function createOutline(elements, variables) {
 function useContentOutline(min = 1, max = 6, headings = []) {
   const state = useAppSelector((state2) => state2);
   const variables = useAppSelector((state2) => state2.variables.variables);
+  const status = useAppSelector((state2) => state2.variables.status);
   const sectionList = useSectionList();
   const titleList = selectBlockList(state).filter((block) => {
     return block.type === BLOCK_TYPES.TITLE && headings.includes(block.id);
   });
   const titleBlocks = Object.fromEntries(titleList.map((block) => [block.id, block]));
   const titleVariables = Object.fromEntries(titleList.map((block) => [block.id, variables[block.id]]));
+  const titleStatus = Object.fromEntries(titleList.map((block) => [block.id, status[block.id]]));
   const titlesSorted = useMemo(() => {
     if (sectionList.isSuccess && titleBlocks) {
       let titleBlocksNormalized = [];
@@ -4141,10 +4211,10 @@ function useContentOutline(min = 1, max = 6, headings = []) {
       });
       return titleBlocksNormalized.filter((title) => {
         const currentOrder = parseInt(title.settings.order || "1", 10);
-        return currentOrder >= min && currentOrder <= max;
+        return currentOrder >= min && currentOrder <= max && titleStatus[title.id] ? titleStatus[title.id].allowed : true;
       });
     }
-  }, [headings, sectionList, titleBlocks]);
+  }, [headings, sectionList, titleBlocks, titleStatus]);
   return useMemo(() => {
     if (titlesSorted && titlesSorted?.length > 0) {
       return createOutline(titlesSorted, titleVariables);
@@ -5329,10 +5399,18 @@ function Block({ blockId, active = true }) {
     };
     fetch();
   }, [blockContent, variables]);
-  if (!block || !content || !blockStatus.allowed)
+  const allowed = blockStatus.allowed || block?.type === BLOCK_TYPES.NAV;
+  if (!block || !content || !allowed)
     return null;
   const Renderer = blocks_default[block.type];
-  return /* @__PURE__ */ jsx("div", { id: `bespoke-${block.type}-${block.id}`, className: `cms-block-wrapper cms-block-${blockId}`, children: /* @__PURE__ */ jsx(Renderer, { ...content, settings: block.settings }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: `bespoke-${block.type}-${block.id}`,
+      className: `cms-block-wrapper bespoke-block-area cms-block-${blockId}`,
+      children: /* @__PURE__ */ jsx(Renderer, { ...content, settings: block.settings })
+    }
+  );
 }
 
 // libs/settings/section.tsx
@@ -5445,19 +5523,33 @@ function CopyInput(props) {
 init_esm_shims();
 var defaultIdAccessor = "_key";
 function SortableTable({ data, customIdAccessor = "id" }) {
-  const [records, setRecords] = useState(data);
+  const [records, setRecords] = useState();
   const [sortStatus, setSortStatus] = useState();
-  const keys = data && data[0] ? Object.keys(data[0]) : [];
+  const keys = data && Array.isArray(data) && data[0] ? Object.keys(data[0]) : [];
   const idAccessor = keys.includes(customIdAccessor) ? customIdAccessor : defaultIdAccessor;
   const fields = keys.filter((k) => !k.startsWith("_"));
   const columns = fields.map((field) => ({ accessor: field, sortable: true }));
   const getSortedData = (sortField) => {
     let dataTemp = [...data];
-    if (idAccessor === defaultIdAccessor) {
-      dataTemp = dataTemp.map((item, ix) => ({ ...item, _key: `i-${ix}` }));
-    }
+    dataTemp = dataTemp.map((item, ix) => {
+      fields.forEach((f) => {
+        if (typeof item[f] === "object") {
+          item[f] = JSON.stringify(item[f]);
+        }
+      });
+      if (idAccessor === defaultIdAccessor) {
+        item._key = `i-${ix}`;
+      }
+      return item;
+    });
     if (sortField) {
-      dataTemp = dataTemp.sort((a, b) => a[sortField.columnAccessor].localeCompare(b[sortField.columnAccessor]));
+      dataTemp = dataTemp.sort((a, b) => {
+        if (isNaN(a[sortField.columnAccessor])) {
+          return a[sortField.columnAccessor].localeCompare(b[sortField.columnAccessor]);
+        } else {
+          return a[sortField.columnAccessor] > b[sortField.columnAccessor] ? 1 : -1;
+        }
+      });
     }
     return sortField && sortField.direction === "desc" ? dataTemp.reverse() : dataTemp;
   };
@@ -5484,6 +5576,14 @@ function SortableTable({ data, customIdAccessor = "id" }) {
     }
   );
 }
+
+// components/options/tabs/DataTab.tsx
+init_cms();
+init_d3plusPropify();
+init_getBlockContent();
+init_hooks();
+init_varSwapRecursive();
+init_runConsumers();
 var formatOptions = {
   csv: "CSV",
   json: "JSON",
@@ -5491,54 +5591,149 @@ var formatOptions = {
 };
 function DataTab(props) {
   const { section } = props;
+  const readMemberFn = useReadMemberFn();
   const blocksIds = section.blocks || [];
-  const apiBlocks = useAppSelector((state) => blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => block.type === "generator" && block.contentByLocale.logic.content.api).map((generator) => {
-    const api = state.variables.status[generator.id]?.api || "";
-    const data = state.variables.variables[generator.id]._data || [];
-    return {
-      ...generator,
-      api,
-      data
-    };
-  }));
-  const sourcesOptions = apiBlocks.map((block, ix) => ({
-    id: block.id,
-    title: `Data Source ${ix + 1}`,
-    path: block.api,
-    data: block.data
-  }));
+  const locale = useAppSelector((state) => state.status.currentLocale);
+  const PREVIEW_SIZE = 50;
+  const formatterFunctions = useFormatterFunctionsForLocale(locale);
+  const router = useRouter();
+  const sourcesOptions = useAppSelector((state) => {
+    const dataInformation = [];
+    console.log("calculate api blocks");
+    blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(block.type)).map((block) => {
+      if (block.type === BLOCK_TYPES.GENERATOR) {
+        const api = state.variables.variables[block.id]._api || state.variables.status[block.id].api;
+        if (api) {
+          const ix = dataInformation.length;
+          dataInformation.push(
+            {
+              ix,
+              id: block.id,
+              title: `Data Source ${ix + 1}`,
+              path: api
+            }
+          );
+        }
+      } else if (block.type === BLOCK_TYPES.VIZ) {
+        const content = getBlockContent(block);
+        const variables = useInputVariablesFlat(block.id);
+        const blockContext = { variables };
+        const { sectionVariables, setSectionVariables, resetSectionVariables } = useSectionVariables(block.section_id);
+        const transpiledLogic = varSwapRecursive_default({ logic: content.logic }, formatterFunctions, blockContext).logic;
+        const globals = {
+          router,
+          section: {
+            variables: sectionVariables,
+            setVariables: setSectionVariables,
+            resetVariables: resetSectionVariables
+          }
+        };
+        const d3Props = d3plusPropify_default(transpiledLogic, formatterFunctions, variables, locale, block.id, {}, globals);
+        if (d3Props.config._api) {
+          const ix = dataInformation.length;
+          dataInformation.push(
+            {
+              ix,
+              id: block.id,
+              title: `Viz Data Source ${ix + 1}`,
+              path: d3Props.config._api
+            }
+          );
+        } else if (typeof d3Props.config.data === "string") {
+          const ix = dataInformation.length;
+          dataInformation.push(
+            {
+              ix,
+              id: block.id,
+              title: `Viz Data Source ${ix + 1}`,
+              path: d3Props.config.data
+            }
+          );
+        } else if (Array.isArray(d3Props.config.data)) {
+          d3Props.config.data.forEach((dataItem) => {
+            if (typeof dataItem === "string") {
+              const ix = dataInformation.length;
+              dataInformation.push(
+                {
+                  ix,
+                  id: block.id,
+                  title: `Viz Data Source ${ix + 1}`,
+                  path: dataItem
+                }
+              );
+            }
+          });
+        }
+      }
+    });
+    return dataInformation;
+  });
   const [selectedSource, setSelectedSource] = useState();
   const [fileProcessing, setFileProcessing] = useState(false);
   const [fileFormat, setFileFormat] = useState(formatOptions.csv);
+  const [previewsSource, setPreviewsSource] = useState({});
+  const [loadingPreview, setLoadingPreview] = useState(false);
   useEffect(() => {
     if (sourcesOptions[0]) {
       setSelectedSource(sourcesOptions[0]);
     }
   }, []);
-  const getFileName = (format2) => {
-    const sectionId = section.id;
-    const sourceId = selectedSource.id;
-    return `data_section_${sectionId}_block_${sourceId}.${format2.toLowerCase()}`;
+  useEffect(() => {
+    if (selectedSource && !previewsSource[selectedSource.ix]) {
+      setLoadingPreview(true);
+      apiFetch(selectedSource.path, {}, readMemberFn, locale).then((response) => {
+        let dataToShare = [];
+        if (response && response.data) {
+          if (response.data && Array.isArray(response.data)) {
+            dataToShare = response.data;
+          } else if (response.data && response.data.data && Array.isArray(response.data.data)) {
+            dataToShare = response.data.data;
+          } else if (response.data && response.data.data && response.data.data.results && Array.isArray(response.data.data.results)) {
+            dataToShare = response.data.data.results;
+          } else if (response.data && response.data.results && Array.isArray(response.data.results)) {
+            dataToShare = response.data.results;
+          }
+        }
+        setPreviewsSource({
+          ...previewsSource,
+          [selectedSource.ix]: dataToShare
+        });
+      }).catch((e) => {
+        console.error(e);
+      }).finally(() => {
+        setLoadingPreview(false);
+      });
+    }
+  }, [selectedSource]);
+  const getFileName = (nameformat, fileFormat2) => {
+    const finalNameFormat = nameformat === fileFormat2 ? "" : `_${nameformat}`.toLowerCase();
+    if (selectedSource) {
+      return `data_section_${section.id}_block_${selectedSource.id}_${selectedSource.ix}${finalNameFormat}.${fileFormat2.toLowerCase()}`;
+    }
+    return `data_file${finalNameFormat}.${fileFormat2}`;
+  };
+  const getCurrentPreview = () => {
+    return selectedSource && previewsSource[selectedSource.ix] ? previewsSource[selectedSource.ix] : [];
   };
   const onSaveClick = async () => {
     if (selectedSource) {
       setFileProcessing(true);
       const zipFile = new JSZip();
-      const filename = getFileName(fileFormat);
+      const filename = getFileName(fileFormat, fileFormat);
       try {
         switch (fileFormat) {
           case formatOptions.json:
-            zipFile.file(filename, JSON.stringify(selectedSource.data));
+            zipFile.file(filename, JSON.stringify(currentPreview));
             break;
           case formatOptions.csv:
-            zipFile.file(filename, csvFormat(selectedSource.data));
+            zipFile.file(filename, csvFormat(currentPreview));
             break;
           case formatOptions.xlsx:
             const { utils, write } = await import('xlsx');
             const wb = utils.book_new();
             utils.book_append_sheet(
               wb,
-              utils.json_to_sheet(selectedSource.data),
+              utils.json_to_sheet(currentPreview),
               filename.substring(0, 30)
               // Sheet name max length
             );
@@ -5554,7 +5749,7 @@ function DataTab(props) {
           compressionOptions: { level: 9 }
         }).then((content) => {
           setFileProcessing(false);
-          saveAs(content, getFileName("zip"));
+          saveAs(content, getFileName(fileFormat, "zip"));
         });
       } catch (error) {
         console.error("Error generating file", error);
@@ -5562,22 +5757,24 @@ function DataTab(props) {
       }
     }
   };
+  const currentPreview = getCurrentPreview();
   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 > 0 && /* @__PURE__ */ jsx(Input.Wrapper, { label: "Choose Data Source:", children: /* @__PURE__ */ jsx(Button.Group, { children: sourcesOptions.map((source, ix) => /* @__PURE__ */ jsx(
+    sourcesOptions.length > 1 && /* @__PURE__ */ jsx(Input.Wrapper, { label: "Choose Data Source:", children: /* @__PURE__ */ jsx(Group, { spacing: "xs", children: sourcesOptions.map((source, ix) => /* @__PURE__ */ jsx(
       Button,
       {
         leftIcon: /* @__PURE__ */ jsx(IconDatabase, { size: 16 }),
         onClick: () => setSelectedSource(source),
-        variant: selectedSource?.id === source.id ? "filled" : "default",
-        fullWidth: true,
+        variant: selectedSource?.ix === ix ? "filled" : "default",
         children: source.title
       },
-      `source-${source.id}`
+      `source-${source.id}-${ix}`
     )) }) }),
     selectedSource && /* @__PURE__ */ jsx(CopyInput, { title: `Original ${selectedSource.title}:`, url: selectedSource.path }),
-    selectedSource && (!selectedSource.data || selectedSource.data.length === 0) && /* @__PURE__ */ jsx("a", { href: selectedSource.path, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(
+    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. Try to open the source and check the data directly." }),
+    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 }),
@@ -5585,8 +5782,16 @@ function DataTab(props) {
         children: `Open ${selectedSource.title} response in a new window`
       }
     ) }),
-    selectedSource && selectedSource.data && selectedSource.data.length > 0 && /* @__PURE__ */ jsxs(Stack, { children: [
-      /* @__PURE__ */ jsx(Input.Wrapper, { label: `Formatted ${selectedSource.title}:`, style: { height: "300px" }, children: /* @__PURE__ */ jsx(SortableTable, { data: selectedSource.data }) }),
+    selectedSource && !loadingPreview && currentPreview.length > 0 && /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        Input.Wrapper,
+        {
+          label: `Formatted ${selectedSource.title} 
+            ${currentPreview.length > PREVIEW_SIZE ? `(First ${PREVIEW_SIZE} rows as preview)` : ""}:`,
+          style: { height: "300px" },
+          children: /* @__PURE__ */ jsx(SortableTable, { data: currentPreview.slice(0, PREVIEW_SIZE) })
+        }
+      ),
       /* @__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(
         Button,
@@ -5606,7 +5811,7 @@ function DataTab(props) {
           loading: fileProcessing,
           onClick: onSaveClick,
           fullWidth: true,
-          children: /* @__PURE__ */ jsx("span", { children: fileProcessing ? "Processing file..." : `Download ${fileFormat}` })
+          children: /* @__PURE__ */ jsx("span", { children: fileProcessing ? "Processing file..." : `Download full dataset in ${fileFormat} format` })
         }
       )
     ] })
@@ -5697,12 +5902,12 @@ function ImageTab(props) {
   };
   const getFileName = () => `${slugify_default("export-name")}`;
   const getSectionNode = (sectionId) => {
-    const sectionNode = document.getElementById(`cms-section-${sectionId}`);
-    return select(sectionNode).select(".cms-section-content").node();
+    const sectionNode = document.getElementById(`section-${sectionId}`);
+    return select(sectionNode).select(".bespoke-section-content").node();
   };
   const getVizNode = (sectionId, vizId) => {
-    const sectionNode = document.getElementById(`cms-section-${sectionId}`);
-    return select(sectionNode).select(`#cms-block-${vizId} .cms-block-preview`).node();
+    const sectionNode = getSectionNode(sectionId);
+    return select(sectionNode).select(`#bespoke-visualization-${vizId}.bespoke-block-area`).node();
   };
   const getSelectedNode = () => {
     let node;
@@ -5912,7 +6117,7 @@ function ShareTab(props) {
     setTitle(document.title);
     const { origin, pathname } = window.location;
     const url = `${origin}${pathname}`;
-    const sectionAnchor = includeSection ? `#cms-section-${section.id}` : "";
+    const sectionAnchor = includeSection ? `#section-${section.id}` : "";
     setShareUrl(`${url}${sectionAnchor}`);
   }, [includeSection]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-share", children: [
@@ -6012,9 +6217,9 @@ function OptionsModal(props) {
           keepMounted: false,
           children: [
             /* @__PURE__ */ jsxs(Tabs.List, { children: [
-              /* @__PURE__ */ jsx(Tabs.Tab, { value: "data", children: "Data" }),
+              /* @__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" })
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "share", children: "Share link" })
             ] }),
             /* @__PURE__ */ jsx(Tabs.Panel, { value: "data", children: /* @__PURE__ */ jsx(DataTab, { section }) }),
             /* @__PURE__ */ jsx(Tabs.Panel, { value: "image", children: /* @__PURE__ */ jsx(ImageTab, { section }) }),
@@ -6053,7 +6258,7 @@ function Options(props) {
         initialMode: mode,
         open: opened,
         onEnds: onModalEnds,
-        title: "Section title"
+        title: "Section information"
       }
     )
   ] });
@@ -6246,175 +6451,568 @@ var SectionMenu_default = SectionMenu;
 
 // frontend/components/report/Section.tsx
 init_cms();
-var getStyles = (styles, settings) => (theme) => styles ? styles(theme, settings) : {};
-var PositionWrapper = ({ settings, styles, children, ...props }) => {
-  const { position } = settings;
-  const defaultStyles = {
-    "normal": {
-      position: "relative",
-      backgroundColor: "transparent",
-      borderRadius: 0
-    },
-    "sticky": {
-      position: "sticky",
-      zIndex: 3,
-      top: 0,
-      borderRadius: 0,
-      borderTop: "none",
-      borderLeft: "none",
-      borderRight: "none"
-    }
-  };
-  const defaultProps = {
-    "normal": {
-      radius: 0
-    },
-    "sticky": {
-      radius: 0,
-      withBorder: true
-    }
-  };
-  const sx = [defaultStyles[position], getStyles(styles, settings)];
-  return /* @__PURE__ */ jsx(Paper, { component: "section", sx, ...defaultProps[position], ...props, children });
-};
-var WidthWrapper = ({ settings, styles, children, ...props }) => {
-  const { width: container } = settings;
-  const defaultStyles = {
-    "center": {},
-    "full": {}
-  };
-  const defaultProps = {
-    "center": { size: "md", p: "sm", fluid: false },
-    "full": { fluid: true, p: "md" }
-  };
-  const sx = [defaultStyles[container], getStyles(styles, settings)];
-  return /* @__PURE__ */ jsx(Container, { sx, ...defaultProps[container], ...props, children });
-};
-var StyleWrapper = ({ settings, styles, children, ...props }) => {
-  const { style: variant } = settings;
-  const defaultStyles = {
-    "none": {},
-    "card": {}
-  };
-  const defaultProps = {
-    "none": { bg: "transparent" },
-    "card": { shadow: "lg", p: "md", radius: "md" }
-  };
-  const sx = [defaultStyles[variant], getStyles(styles, settings)];
-  return /* @__PURE__ */ jsx(Paper, { sx, ...defaultProps[variant], ...props, children });
+
+// components/sections/SectionColumns.tsx
+init_esm_shims();
+
+// libs/settings/site.ts
+init_esm_shims();
+var site_default = {
+  backgroundColor: "#fafafa",
+  block: {
+    padding: 10
+  },
+  column: {
+    padding: 12
+  },
+  section: {
+    backgroundColor: "white",
+    borderRadius: 10,
+    boxShadow: "0px 6px 10px rgba(12, 32, 50, 0.14), 0px 1px 15px rgba(12, 32, 50, 0.12), 0px 3px 5px rgba(12, 32, 50, 0.15)",
+    margin: 8,
+    padding: 32
+  }
 };
-function Section({ section }) {
-  const { id, settings } = section;
-  const sectionSettings2 = {
-    ...defaultSectionSettings,
-    ...settings
-  };
-  const state = useAppSelector((state2) => state2);
-  const status = useAppSelector((state2) => state2.variables.status);
-  const sectionStyles = useBespokeStyles()["Section"];
-  const blockRecords = selectBlockRecords(state);
+
+// components/sections/SectionColumns.tsx
+init_store2();
+function SectionColumnsWrapper({
+  children,
+  containerProps
+}, ref) {
   const theme = useMantineTheme();
-  const smallScreen = useMediaQuery(`(max-width: ${theme.breakpoints.sm}px)`);
-  const sectionBlocks = Object.values(blockRecords || {}).filter((d) => d.section_id === id);
-  const allowedSection = sectionBlocks.some((b) => {
-    try {
-      return status[b.id].allowed && b.type !== BLOCK_TYPES.GENERATOR;
-    } catch (e) {
-      return b.settings.allowed === "always";
-    }
-  });
-  const columns = sectionBlocks.reduce((acc, d) => {
-    if (!acc[d.blockcol]) {
-      acc[d.blockcol] = { [d.blockrow]: d };
-    } else {
-      acc[d.blockcol][d.blockrow] = d;
-    }
-    return acc;
-  }, {});
-  const displaySection = Object.keys(blockRecords).length > 0 && !settings.hidden && allowedSection;
-  if (!displaySection)
-    return null;
-  return /* @__PURE__ */ jsxs(
-    PositionWrapper,
+  const mediumScreen = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+  return /* @__PURE__ */ jsx(
+    Flex,
     {
-      settings: sectionSettings2,
-      styles: sectionStyles?.root || void 0,
-      children: [
-        sectionSettings2.memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
-        /* @__PURE__ */ jsx(
-          WidthWrapper,
-          {
-            settings: sectionSettings2,
-            styles: sectionStyles?.container,
-            className: `cms-section-${id}`,
-            pos: "relative",
-            children: /* @__PURE__ */ jsx(StyleWrapper, { settings: sectionSettings2, styles: sectionStyles?.content, children: /* @__PURE__ */ jsxs(
-              Flex,
-              {
-                className: "cms-section-content",
-                align: "stretch",
-                direction: smallScreen ? "column" : "row",
-                pos: "relative",
-                gap: "md",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { style: {
-                    position: "absolute",
-                    right: 10,
-                    top: 10,
-                    zIndex: 100
-                  }, children: [
-                    sectionSettings2.optionsMenu && /* @__PURE__ */ jsx(Options, { sectionId: section.id }),
-                    /* @__PURE__ */ jsx(SectionResetButton, { id: section.id })
-                  ] }),
-                  Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
-                    const column = columns[columnIndex];
-                    const staticWidths = Object.values(column).map(({ id: id2 }) => parseFloat(blockRecords[id2]?.settings?.width || "none")).filter((d) => !Number.isNaN(d));
-                    return /* @__PURE__ */ jsx(
-                      Stack,
-                      {
-                        className: "cms-section-col",
-                        sx: {
-                          flex: "1 1 100%",
-                          maxWidth: staticWidths.length ? Math.max(...staticWidths) : "none"
-                        },
-                        children: Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item) => {
-                          if (item.id)
-                            return /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id);
-                        })
-                      },
-                      columnIndex
-                    );
-                  })
-                ]
-              }
-            ) })
-          }
-        )
-      ]
+      ref,
+      className: "bespoke-section-content",
+      pos: "relative",
+      align: "stretch",
+      direction: mediumScreen ? "column" : "row",
+      wrap: "wrap",
+      ...containerProps,
+      children
     }
   );
 }
-var Section_default = Section;
-function Report() {
-  const sectionList = useSectionList();
-  return /* @__PURE__ */ jsx(Container, { p: 0, pos: "relative", fluid: true, children: sectionList.isSuccess && sectionList.data.sort(orderSort).map((section) => /* @__PURE__ */ jsx(Section_default, { section }, section.id)) });
-}
-var Report_default = Report;
-
-// frontend/components/auth/LoginButton.tsx
-init_esm_shims();
-
-// types/auth.ts
-init_esm_shims();
-var CMS_ROLES = {
-  ADMIN: "Admin",
-  EDITOR: "Editor",
-  WRITER: "Writer"
-};
-function BespokeLoginBtn({
-  buttonProps = {},
-  editorMenuItemProps = {},
-  editorMenuItemRoute = "/cms",
+var SectionColumn = React.forwardRef(
+  function SectionColumn2({ children, column, columnSettings, sx = {}, ...rest }, ref) {
+    const hasInline = Object.values(column).some((item) => item.settings?.display === "inline");
+    const width = columnSettings?.width;
+    const theme = useMantineTheme();
+    const mediumScreen = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        ref,
+        className: "bespoke-section-col",
+        align: "flex-start",
+        direction: hasInline ? "row" : "column",
+        wrap: hasInline ? "wrap" : "nowrap",
+        maw: width && !mediumScreen ? `${width}px` : "none",
+        miw: mediumScreen ? 300 : 400,
+        p: site_default.column.padding,
+        pos: "relative",
+        sx: [{ flexGrow: 1, flexShrink: 1 }, ...packSx(sx)],
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var ResizeColumnInput = ({ sectionId, columnIndex }) => {
+  const dispatch = useAppDispatch();
+  const section = useSectionRef(sectionId).data;
+  if (!section)
+    return null;
+  const { columnSettings = {} } = section.settings;
+  const { width = void 0 } = columnSettings[columnIndex] ? columnSettings[columnIndex] : {};
+  const handleChange = (e) => {
+    if (section) {
+      dispatch(actions_exports.updateEntity("section", {
+        id: sectionId,
+        settings: {
+          ...section.settings,
+          columnSettings: {
+            ...columnSettings,
+            [columnIndex]: {
+              width: parseInt(e.target.value, 10)
+            }
+          }
+        }
+      }));
+    }
+  };
+  const handleReset = () => {
+    if (section) {
+      dispatch(actions_exports.updateEntity("section", {
+        id: sectionId,
+        settings: {
+          ...section.settings,
+          columnSettings: {
+            ...columnSettings,
+            [columnIndex]: {
+              width: void 0
+            }
+          }
+        }
+      }));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "bespoke-resize-col",
+      pos: "absolute",
+      top: 0,
+      left: "50%",
+      sx: {
+        transform: "translate(-50%, -50%)",
+        zIndex: 2
+      },
+      p: "sm",
+      maw: 110,
+      children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: "auto",
+          w: "fit-content",
+          miw: "none",
+          variant: "filled",
+          type: "number",
+          value: width || "auto",
+          onChange: handleChange,
+          size: "xs",
+          p: 0,
+          rightSection: /* @__PURE__ */ jsx(IconX, { onClick: handleReset, size: 8 })
+        }
+      )
+    }
+  );
+};
+var ColumnsWrapper = React.forwardRef(SectionColumnsWrapper);
+
+// libs/settings/block.tsx
+init_esm_shims();
+init_cms();
+var defaultSettings2 = {
+  display: {
+    label: "Size",
+    defaultValue: "block",
+    options: [
+      { label: "Full Width", value: "block" },
+      { label: "Inline", value: "inline" }
+    ]
+  },
+  align: {
+    label: "Alignment",
+    defaultValue: "left",
+    options: [
+      { label: /* @__PURE__ */ jsx(IconAlignLeft, { size: 20 }), value: "left" },
+      { label: /* @__PURE__ */ jsx(IconAlignCenter, { size: 20 }), value: "center" },
+      { label: /* @__PURE__ */ jsx(IconAlignRight, { size: 20 }), value: "right" }
+    ]
+  }
+};
+var customSettings = {
+  [BLOCK_TYPES.IMAGE]: { ...defaultSettings2 },
+  [BLOCK_TYPES.PARAGRAPH]: { ...defaultSettings2 },
+  [BLOCK_TYPES.SUBTITLE]: { ...defaultSettings2 },
+  [BLOCK_TYPES.SELECTOR]: { ...defaultSettings2 },
+  [BLOCK_TYPES.STAT]: { ...defaultSettings2 },
+  [BLOCK_TYPES.VIZ]: { ...defaultSettings2 },
+  [BLOCK_TYPES.TITLE]: {
+    order: {
+      label: "Importance",
+      defaultValue: "1",
+      options: [
+        { label: "1", value: "1" },
+        { label: "2", value: "2" },
+        { label: "3", value: "3" },
+        { label: "4", value: "4" },
+        { label: "5", value: "5" },
+        { label: "6", value: "6" }
+      ]
+    },
+    search: {
+      label: "Search on Click",
+      defaultValue: "off",
+      options: [
+        { label: "Off", value: "off" },
+        { label: "Inline", value: "inline" },
+        { label: "Modal", value: "modal" }
+      ]
+    },
+    ...defaultSettings2
+  },
+  [BLOCK_TYPES.GENERATOR]: {
+    useProxy: {
+      label: "Use proxy (avoid CORS)",
+      defaultValue: "false",
+      options: [
+        { label: "No", value: "false" },
+        { label: "Yes", value: "true" }
+      ]
+    }
+  },
+  [BLOCK_TYPES.NAV]: {
+    variant: {
+      label: "Nav variant",
+      defaultValue: "inline",
+      options: [
+        { label: "Inline", value: "inline" },
+        { label: "Fixed", value: "fixed" },
+        { label: "Jump", value: "jump" }
+      ]
+    },
+    min: {
+      label: "Min Title level",
+      defaultValue: "1",
+      options: [
+        { label: "1", value: "1" },
+        { label: "2", value: "2" },
+        { label: "3", value: "3" },
+        { label: "4", value: "4" },
+        { label: "5", value: "5" },
+        { label: "6", value: "6" }
+      ]
+    },
+    max: {
+      label: "Max Title level",
+      defaultValue: "6",
+      options: [
+        { label: "1", value: "1" },
+        { label: "2", value: "2" },
+        { label: "3", value: "3" },
+        { label: "4", value: "4" },
+        { label: "5", value: "5" },
+        { label: "6", value: "6" }
+      ]
+    }
+  }
+};
+var getBlockSettings = (blockType) => {
+  const extraSettings = blockType && customSettings[blockType] ? customSettings[blockType] : defaultSettings2;
+  return extraSettings;
+};
+
+// cms/components/components/DesignMenu.tsx
+init_esm_shims();
+init_store2();
+var ALLOWED_UNITS = ["px", "%"];
+var formatters = {
+  px: (value) => !Number.isNaN(parseFloat(value)) ? `${value}px`.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") : "px",
+  ["%"]: (value) => !Number.isNaN(parseFloat(value)) ? `${value}%`.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") : "%"
+};
+var WidthInputProps = {
+  "px": {
+    defaultValue: 400,
+    min: 25,
+    step: 5,
+    formatter: formatters["px"]
+  },
+  "%": {
+    defaultValue: 50,
+    min: 20,
+    max: 100,
+    step: 5,
+    formatter: formatters["%"]
+  }
+};
+var defaultWidthSettings = { stretch: false, unit: "px", value: "400" };
+var UnitSelector = ({ currUnit, changeUnit }) => {
+  return /* @__PURE__ */ jsxs(Group, { position: "apart", children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", fw: "bold", children: "Unit" }),
+    /* @__PURE__ */ jsx(Group, { spacing: 3, children: ALLOWED_UNITS.map(
+      (unit) => /* @__PURE__ */ jsx(
+        Anchor,
+        {
+          component: "button",
+          size: "xs",
+          td: currUnit === unit ? "underline" : "none",
+          onClick: () => changeUnit(unit),
+          children: unit
+        },
+        unit
+      )
+    ) })
+  ] });
+};
+var getWidthSettings = (block) => {
+  const widthSettings = block?.settings?.width || {};
+  if (widthSettings && ["stretch", "value", "unit"].every((prop) => Object.prototype.hasOwnProperty.call(widthSettings, prop)))
+    return widthSettings;
+  return defaultWidthSettings;
+};
+function DesignMenu({ id, display = "button", handleChange }) {
+  const dispatch = useAppDispatch();
+  const block = useBlockRef(id).data;
+  const [opened, setOpened] = useState(false);
+  const width = getWidthSettings(block);
+  const handleChangeWidth = (value) => {
+    if (typeof value === "boolean") {
+      const result = value ? { stretch: true } : defaultWidthSettings;
+      handleChangeInternal("width", { ...width, ...result });
+    } else {
+      handleChangeInternal("width", { ...width, value });
+    }
+  };
+  const handleChangeInternal = (field, value) => {
+    if (block) {
+      if (handleChange) {
+        handleChange(field, value);
+      } else {
+        dispatch(actions_exports.updateEntity("block", {
+          id,
+          settings: { ...block.settings, [field]: value }
+        }));
+      }
+    }
+  };
+  if (!block)
+    return null;
+  const defaultSettings3 = getBlockSettings(block.type);
+  const widthInputProps = WidthInputProps[width.unit];
+  const changeUnit = (newUnit) => {
+    const { defaultValue } = WidthInputProps[newUnit];
+    handleChangeInternal("width", {
+      ...width,
+      value: defaultValue,
+      unit: newUnit
+    });
+  };
+  const menu = /* @__PURE__ */ jsxs(Stack, { spacing: "xs", children: [
+    Object.entries(defaultSettings3).map(([key, { label, defaultValue, options }]) => /* @__PURE__ */ jsxs(Group, { spacing: "xs", position: "apart", noWrap: true, style: { width: "100%" }, children: [
+      label && /* @__PURE__ */ jsx(Text, { fz: "sm", children: label }),
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          defaultValue: String(block.settings[key] || defaultValue),
+          onChange: (e) => handleChangeInternal(key, e),
+          data: options,
+          size: "xs"
+        }
+      )
+    ] }, key)),
+    block.type !== "generator" && /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
+      /* @__PURE__ */ jsx(Text, { fz: "sm", children: "Width" }),
+      /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
+        !width.stretch && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(UnitSelector, { currUnit: width.unit, changeUnit }),
+          /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              defaultValue: parseInt(widthInputProps.defaultValue, 10),
+              disabled: width.stretch,
+              onChange: (value) => handleChangeWidth(value),
+              size: "xs",
+              value: !Number.isNaN(width.value) ? parseInt(width.value, 10) : void 0,
+              ...widthInputProps
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "xs",
+            label: "Stretch",
+            checked: width.stretch,
+            onChange: (e) => handleChangeWidth(e.currentTarget.checked)
+          }
+        )
+      ] })
+    ] }, "width")
+  ] });
+  return display === "button" ? /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      opened,
+      onClose: () => setOpened(false),
+      position: "bottom-end",
+      withinPortal: true,
+      children: [
+        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            onClick: () => setOpened((o) => !o),
+            children: /* @__PURE__ */ jsx(IconPalette, { size: 20 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Dropdown, { children: menu })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(Paper, { p: "md", withBorder: true, children: menu });
+}
+var DesignMenu_default = DesignMenu;
+var getStyles = (styles, settings) => (theme) => styles ? styles(theme, settings) : {};
+var PositionWrapper = ({ settings, styles, children, ...props }) => {
+  const { position } = settings;
+  const defaultStyles = {
+    "normal": {
+      position: "relative",
+      backgroundColor: "transparent",
+      borderRadius: 0
+    },
+    "sticky": {
+      position: "sticky",
+      zIndex: 3,
+      top: 0,
+      borderRadius: 0,
+      borderTop: "none",
+      borderLeft: "none",
+      borderRight: "none"
+    }
+  };
+  const defaultProps = {
+    "normal": {
+      radius: 0
+    },
+    "sticky": {
+      radius: 0,
+      withBorder: true
+    }
+  };
+  const sx = [defaultStyles[position], getStyles(styles, settings)];
+  return /* @__PURE__ */ jsx(Paper, { component: "section", sx, ...defaultProps[position], ...props, children });
+};
+var WidthWrapper = ({ settings, styles, children, ...props }) => {
+  const { width: container } = settings;
+  const defaultStyles = {
+    "center": {},
+    "full": {}
+  };
+  const defaultProps = {
+    "center": { size: "lg", p: "sm", fluid: false },
+    "full": { fluid: true, p: "md" }
+  };
+  const sx = [defaultStyles[container], getStyles(styles, settings)];
+  return /* @__PURE__ */ jsx(Container, { sx, ...defaultProps[container], ...props, children });
+};
+var StyleWrapper = ({ settings, styles, children, ...props }) => {
+  const { style: variant } = settings;
+  const defaultStyles = {
+    "none": {},
+    "card": {}
+  };
+  const defaultProps = {
+    "none": { bg: "transparent" },
+    "card": { shadow: "lg", p: "md", radius: "md" }
+  };
+  const sx = [defaultStyles[variant], getStyles(styles, settings)];
+  return /* @__PURE__ */ jsx(Paper, { sx, ...defaultProps[variant], ...props, children });
+};
+function Section({ section }) {
+  const { id, settings } = section;
+  const sectionSettings2 = {
+    ...defaultSectionSettings,
+    ...settings
+  };
+  const state = useAppSelector((state2) => state2);
+  const status = useAppSelector((state2) => state2.variables.status);
+  const sectionStyles = useBespokeStyles()["Section"];
+  const blockRecords = selectBlockRecords(state);
+  const sectionBlocks = Object.values(blockRecords || {}).filter((d) => d.section_id === id);
+  const allowedSection = sectionBlocks.some((b) => {
+    try {
+      return status[b.id].allowed && b.type !== BLOCK_TYPES.GENERATOR || b.type === BLOCK_TYPES.NAV;
+    } catch (e) {
+      return b.settings.allowed === "always";
+    }
+  });
+  const columns = sectionBlocks.reduce((acc, d) => {
+    if (!acc[d.blockcol]) {
+      acc[d.blockcol] = { [d.blockrow]: d };
+    } else {
+      acc[d.blockcol][d.blockrow] = d;
+    }
+    return acc;
+  }, {});
+  const blockSettings = getBlockSettings();
+  const displaySection = Object.keys(blockRecords).length > 0 && !settings.hidden && allowedSection;
+  const colsQty = Object.keys(columns).length;
+  if (!displaySection)
+    return null;
+  return /* @__PURE__ */ jsxs(
+    PositionWrapper,
+    {
+      settings: sectionSettings2,
+      styles: sectionStyles?.root || void 0,
+      children: [
+        sectionSettings2.memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
+        /* @__PURE__ */ jsxs(
+          WidthWrapper,
+          {
+            settings: sectionSettings2,
+            styles: sectionStyles?.container,
+            id: `section-${id}`,
+            pos: "relative",
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: {
+                position: "absolute",
+                right: 10,
+                top: 10,
+                zIndex: 3
+              }, children: [
+                sectionSettings2.optionsMenu && /* @__PURE__ */ jsx(Options, { sectionId: section.id }),
+                /* @__PURE__ */ jsx(SectionResetButton, { id: section.id })
+              ] }),
+              /* @__PURE__ */ jsx(StyleWrapper, { className: "bespoke-section-content", settings: sectionSettings2, styles: sectionStyles?.content, children: /* @__PURE__ */ jsx(ColumnsWrapper, { children: Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
+                const column = columns[columnIndex];
+                const columnSettings = settings.columnSettings ? settings.columnSettings[columnIndex] : {};
+                return /* @__PURE__ */ jsx(
+                  SectionColumn,
+                  {
+                    column,
+                    columnSettings,
+                    sx: { flexBasis: `${100 / colsQty}%` },
+                    children: Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item) => {
+                      if (!item.id)
+                        return null;
+                      const { settings: settings2, type } = blockRecords[item.id];
+                      const blockWidth = settings2.width && !settings2.width.stretch && settings2.width.unit ? formatters[settings2.width.unit](settings2.width.value) : settings2.display === "inline" ? "auto" : "100%";
+                      const blockStyles = {
+                        alignSelf: type === "visualization" ? "stretch" : "flex-start",
+                        flexGrow: 0,
+                        margin: "0",
+                        textAlign: settings2.align || blockSettings.align.defaultValue,
+                        width: blockWidth,
+                        minWidth: 300
+                      };
+                      return /* @__PURE__ */ jsx(Box, { sx: blockStyles, py: site_default.block.padding, children: /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id) }, item.id);
+                    })
+                  },
+                  columnIndex
+                );
+              }) }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var Section_default = Section;
+function Report() {
+  const sectionList = useSectionList();
+  return /* @__PURE__ */ jsx(Container, { p: 0, pos: "relative", fluid: true, children: sectionList.isSuccess && sectionList.data.sort(orderSort).map((section) => /* @__PURE__ */ jsx(Section_default, { section }, section.id)) });
+}
+var Report_default = Report;
+
+// frontend/components/auth/LoginButton.tsx
+init_esm_shims();
+
+// types/auth.ts
+init_esm_shims();
+var CMS_ROLES = {
+  ADMIN: "Admin",
+  EDITOR: "Editor",
+  WRITER: "Writer"
+};
+function BespokeLoginBtn({
+  buttonProps = {},
+  editorMenuItemProps = {},
+  editorMenuItemRoute = "/cms",
   logoutButtonProps = {},
   menuProps = {},
   options = "",
@@ -8075,278 +8673,76 @@ function CMSHeader(props) {
               variant: "outline",
               onClick: handlers.open,
               children: "Import Data"
-            }
-          )
-        ] })
-      ] }),
-      right: /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
-        /* @__PURE__ */ jsxs(Menu, { shadow: "md", children: [
-          /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { color: "blue", variant: "filled", children: /* @__PURE__ */ jsx(IconSettings, { size: 20 }) }) }),
-          /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
-            /* @__PURE__ */ jsx(Menu.Label, { children: "Revalidate" }),
-            /* @__PURE__ */ jsx(Menu.Item, { onClick: maybeRevalidateUrl, icon: /* @__PURE__ */ jsx(IconFileOff, { size: 20 }), children: /* @__PURE__ */ jsxs(Text, { children: [
-              "Revalidate ",
-              /* @__PURE__ */ jsx(Text, { fw: 700, children: previewName })
-            ] }) }),
-            /* @__PURE__ */ jsx(Menu.Item, { onClick: maybeRevalidateReport, icon: /* @__PURE__ */ jsx(IconFilesOff, { size: 20 }), children: /* @__PURE__ */ jsxs(Text, { children: [
-              "Revalidate ALL ",
-              /* @__PURE__ */ jsx(Text, { fw: 700, children: currentReport.name })
-            ] }) }),
-            /* @__PURE__ */ jsx(Menu.Label, { children: "Settings" }),
-            /* @__PURE__ */ jsx(Menu.Item, { onClick: handlers.open, icon: /* @__PURE__ */ jsx(IconSettings, { size: 20 }), children: "Report settings" }),
-            /* @__PURE__ */ jsx(Menu.Item, { onClick: handlersGraph.open, icon: /* @__PURE__ */ jsx(IconHierarchy3, { size: 20 }), children: "Block Graph" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Modal, { opened: openedGraph, onClose: handlersGraph.close, title: "Block Graph", fullScreen: true, children: /* @__PURE__ */ jsx(BlockGraph, {}) }),
-        /* @__PURE__ */ jsx(
-          Drawer,
-          {
-            opened,
-            onClose: handlers.close,
-            title: /* @__PURE__ */ jsx(IconTitle, { icon: /* @__PURE__ */ jsx(IconFileAnalytics, { size: 24 }), children: `Editing Report: ${currentReport ? currentReport.name : ""}` }),
-            size: "50%",
-            padding: "xl",
-            position: "right",
-            children: /* @__PURE__ */ jsx(ReportEditor, { id, onClose: handlers.close })
-          }
-        )
-      ] })
-    }
-  );
-}
-var selectLocaleOptions = (state) => state.status.locales.map((d) => ({ value: d, label: d.toUpperCase() }));
-
-// components/sections/Section.tsx
-init_esm_shims();
-
-// components/blocks/BlockElement.tsx
-init_esm_shims();
-
-// cms/components/components/DeleteButton.tsx
-init_esm_shims();
-init_store2();
-init_cms();
-function DeleteButton({ type, id, warning = "" }) {
-  const PRETTY_NAME = ENTITY_PRETTY_NAMES[type] || "Entity";
-  const message = warning || `Delete this ${PRETTY_NAME} and all its contents? This action cannot be undone.`;
-  const dispatch = useDispatch();
-  const { newConfirmation } = useDialog();
-  const maybeDelete = async () => {
-    try {
-      await newConfirmation({
-        title: "Are you sure?",
-        message,
-        confirmText: "Yes, Delete it."
-      });
-      dispatch(actions_exports.deleteEntity(type, id));
-    } catch {
-    }
-  };
-  return /* @__PURE__ */ jsx(ActionIcon, { color: "red", onClick: maybeDelete, children: /* @__PURE__ */ jsx(IconTrash, { size: 20 }) });
-}
-var DeleteButton_default = DeleteButton;
-
-// cms/components/components/DesignMenu.tsx
-init_esm_shims();
-
-// libs/settings/block.tsx
-init_esm_shims();
-init_cms();
-var defaultSettings2 = {
-  display: {
-    label: "Size",
-    defaultValue: "block",
-    options: [
-      { label: "Full Width", value: "block" },
-      { label: "Inline", value: "inline" }
-    ]
-  },
-  align: {
-    label: "Alignment",
-    defaultValue: "left",
-    options: [
-      { label: /* @__PURE__ */ jsx(IconAlignLeft, { size: 20 }), value: "left" },
-      { label: /* @__PURE__ */ jsx(IconAlignCenter, { size: 20 }), value: "center" },
-      { label: /* @__PURE__ */ jsx(IconAlignRight, { size: 20 }), value: "right" }
-    ]
-  }
-};
-var customSettings = {
-  [BLOCK_TYPES.IMAGE]: { ...defaultSettings2 },
-  [BLOCK_TYPES.PARAGRAPH]: { ...defaultSettings2 },
-  [BLOCK_TYPES.SUBTITLE]: { ...defaultSettings2 },
-  [BLOCK_TYPES.SELECTOR]: { ...defaultSettings2 },
-  [BLOCK_TYPES.STAT]: { ...defaultSettings2 },
-  [BLOCK_TYPES.VIZ]: { ...defaultSettings2 },
-  [BLOCK_TYPES.TITLE]: {
-    order: {
-      label: "Importance",
-      defaultValue: "1",
-      options: [
-        { label: "1", value: "1" },
-        { label: "2", value: "2" },
-        { label: "3", value: "3" },
-        { label: "4", value: "4" },
-        { label: "5", value: "5" },
-        { label: "6", value: "6" }
-      ]
-    },
-    search: {
-      label: "Search on Click",
-      defaultValue: "off",
-      options: [
-        { label: "Off", value: "off" },
-        { label: "Inline", value: "inline" },
-        { label: "Modal", value: "modal" }
-      ]
-    },
-    ...defaultSettings2
-  },
-  [BLOCK_TYPES.GENERATOR]: {
-    useProxy: {
-      label: "Use proxy (avoid CORS)",
-      defaultValue: "false",
-      options: [
-        { label: "No", value: "false" },
-        { label: "Yes", value: "true" }
-      ]
-    }
-  },
-  [BLOCK_TYPES.NAV]: {
-    variant: {
-      label: "Nav variant",
-      defaultValue: "inline",
-      options: [
-        { label: "Inline", value: "inline" },
-        { label: "Fixed", value: "fixed" },
-        { label: "Jump", value: "jump" }
-      ]
-    },
-    min: {
-      label: "Min Title level",
-      defaultValue: "1",
-      options: [
-        { label: "1", value: "1" },
-        { label: "2", value: "2" },
-        { label: "3", value: "3" },
-        { label: "4", value: "4" },
-        { label: "5", value: "5" },
-        { label: "6", value: "6" }
-      ]
-    },
-    max: {
-      label: "Max Title level",
-      defaultValue: "6",
-      options: [
-        { label: "1", value: "1" },
-        { label: "2", value: "2" },
-        { label: "3", value: "3" },
-        { label: "4", value: "4" },
-        { label: "5", value: "5" },
-        { label: "6", value: "6" }
-      ]
-    }
-  }
-};
-var getBlockSettings = (blockType) => {
-  const extraSettings = blockType && customSettings[blockType] ? customSettings[blockType] : defaultSettings2;
-  return extraSettings;
-};
-
-// cms/components/components/DesignMenu.tsx
-init_store2();
-function DesignMenu({ id, display = "button", handleChange }) {
-  const dispatch = useAppDispatch();
-  const block = useBlockRef(id).data;
-  const [opened, setOpened] = useState(false);
-  const defaultWidth = "400";
-  const handleChangeWidth = (value) => {
-    let result;
-    if (typeof value === "boolean") {
-      result = value ? "stretch" : String(defaultWidth);
-    } else {
-      result = value;
-    }
-    handleChangeInternal("width", result);
-  };
-  const handleChangeInternal = (field, value) => {
-    if (block) {
-      if (handleChange) {
-        handleChange(field, value);
-      } else {
-        dispatch(actions_exports.updateEntity("block", {
-          id,
-          settings: { ...block.settings, [field]: value }
-        }));
-      }
-    }
-  };
-  if (!block)
-    return null;
-  const defaultSettings3 = getBlockSettings(block.type);
-  const width = block.settings?.width ?? "stretch";
-  const menu = /* @__PURE__ */ jsxs(Stack, { spacing: "xs", children: [
-    Object.entries(defaultSettings3).map(([key, { label, defaultValue, options }]) => /* @__PURE__ */ jsxs(Group, { spacing: "xs", position: "apart", noWrap: true, style: { width: "100%" }, children: [
-      label && /* @__PURE__ */ jsx(Text, { fz: "sm", children: label }),
-      /* @__PURE__ */ jsx(
-        SegmentedControl,
-        {
-          defaultValue: String(block.settings[key] || defaultValue),
-          onChange: (e) => handleChangeInternal(key, e),
-          data: options,
-          size: "xs"
-        }
-      )
-    ] }, key)),
-    block.type !== "generator" && /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
-      /* @__PURE__ */ jsx(Text, { fz: "sm", children: "Width" }),
-      /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
-        width !== "stretch" && /* @__PURE__ */ jsx(
-          NumberInput,
-          {
-            defaultValue: parseInt(defaultWidth, 10),
-            disabled: width === "stretch",
-            min: 25,
-            onChange: (value) => handleChangeWidth(value),
-            placeholder: width === "stretch" ? defaultWidth : width,
-            step: 5,
-            style: { width: 80 },
-            value: !Number.isNaN(width) ? parseInt(width, 10) : void 0
-          }
-        ),
+            }
+          )
+        ] })
+      ] }),
+      right: /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
+        /* @__PURE__ */ jsxs(Menu, { shadow: "md", children: [
+          /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { color: "blue", variant: "filled", children: /* @__PURE__ */ jsx(IconSettings, { size: 20 }) }) }),
+          /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+            /* @__PURE__ */ jsx(Menu.Label, { children: "Revalidate" }),
+            /* @__PURE__ */ jsx(Menu.Item, { onClick: maybeRevalidateUrl, icon: /* @__PURE__ */ jsx(IconFileOff, { size: 20 }), children: /* @__PURE__ */ jsxs(Text, { children: [
+              "Revalidate ",
+              /* @__PURE__ */ jsx(Text, { fw: 700, children: previewName })
+            ] }) }),
+            /* @__PURE__ */ jsx(Menu.Item, { onClick: maybeRevalidateReport, icon: /* @__PURE__ */ jsx(IconFilesOff, { size: 20 }), children: /* @__PURE__ */ jsxs(Text, { children: [
+              "Revalidate ALL ",
+              /* @__PURE__ */ jsx(Text, { fw: 700, children: currentReport.name })
+            ] }) }),
+            /* @__PURE__ */ jsx(Menu.Label, { children: "Settings" }),
+            /* @__PURE__ */ jsx(Menu.Item, { onClick: handlers.open, icon: /* @__PURE__ */ jsx(IconSettings, { size: 20 }), children: "Report settings" }),
+            /* @__PURE__ */ jsx(Menu.Item, { onClick: handlersGraph.open, icon: /* @__PURE__ */ jsx(IconHierarchy3, { size: 20 }), children: "Block Graph" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Modal, { opened: openedGraph, onClose: handlersGraph.close, title: "Block Graph", fullScreen: true, children: /* @__PURE__ */ jsx(BlockGraph, {}) }),
         /* @__PURE__ */ jsx(
-          Checkbox,
+          Drawer,
           {
-            size: "xs",
-            label: "Stretch",
-            checked: width === "stretch",
-            onChange: (e) => handleChangeWidth(e.currentTarget.checked)
+            opened,
+            onClose: handlers.close,
+            title: /* @__PURE__ */ jsx(IconTitle, { icon: /* @__PURE__ */ jsx(IconFileAnalytics, { size: 24 }), children: `Editing Report: ${currentReport ? currentReport.name : ""}` }),
+            size: "50%",
+            padding: "xl",
+            position: "right",
+            children: /* @__PURE__ */ jsx(ReportEditor, { id, onClose: handlers.close })
           }
         )
       ] })
-    ] }, "width")
-  ] });
-  return display === "button" ? /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      opened,
-      onClose: () => setOpened(false),
-      position: "bottom-end",
-      withinPortal: true,
-      children: [
-        /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            onClick: () => setOpened((o) => !o),
-            children: /* @__PURE__ */ jsx(IconPalette, { size: 20 })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Popover.Dropdown, { children: menu })
-      ]
     }
-  ) : /* @__PURE__ */ jsx(Paper, { p: "md", withBorder: true, children: menu });
+  );
 }
-var DesignMenu_default = DesignMenu;
+var selectLocaleOptions = (state) => state.status.locales.map((d) => ({ value: d, label: d.toUpperCase() }));
+
+// components/sections/Section.tsx
+init_esm_shims();
+
+// components/blocks/BlockElement.tsx
+init_esm_shims();
+
+// cms/components/components/DeleteButton.tsx
+init_esm_shims();
+init_store2();
+init_cms();
+function DeleteButton({ type, id, warning = "" }) {
+  const PRETTY_NAME = ENTITY_PRETTY_NAMES[type] || "Entity";
+  const message = warning || `Delete this ${PRETTY_NAME} and all its contents? This action cannot be undone.`;
+  const dispatch = useDispatch();
+  const { newConfirmation } = useDialog();
+  const maybeDelete = async () => {
+    try {
+      await newConfirmation({
+        title: "Are you sure?",
+        message,
+        confirmText: "Yes, Delete it."
+      });
+      dispatch(actions_exports.deleteEntity(type, id));
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx(ActionIcon, { color: "red", onClick: maybeDelete, children: /* @__PURE__ */ jsx(IconTrash, { size: 20 }) });
+}
+var DeleteButton_default = DeleteButton;
 
 // components/blocks/Block.tsx
 init_esm_shims();
@@ -8603,9 +8999,9 @@ function BlockPreview(props) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      id: `${block.type}-${block.id}`,
-      className: "cms-block-preview",
-      style: { width: "100%", minHeight: block.type === BLOCK_TYPES.VIZ ? 300 : "auto" },
+      id: `bespoke-${block.type}-${block.id}`,
+      className: "cms-block-preview bespoke-block-area",
+      style: { width: "100%", minHeight: block.type === BLOCK_TYPES.VIZ ? 400 : "auto" },
       children: [
         !allowed && allowedOverlay,
         Renderer ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Renderer, { id: block.id, debug, ...content, settings: block.settings }) }, "renderer") : /* @__PURE__ */ jsx(Center, { style: { minHeight: 100 }, children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: block.type }, "type") }),
@@ -9239,6 +9635,7 @@ function BlockEditor({
       executeButton
     }
   );
+  const isVizOrGenerator = [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(blockType);
   return /* @__PURE__ */ jsxs(Grid, { children: [
     /* @__PURE__ */ jsxs(
       Col,
@@ -9290,7 +9687,7 @@ function BlockEditor({
           height: "100%"
         },
         children: [
-          ![BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(blockType) && /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconFlag, {}), children: [
+          isVizOrGenerator && /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconFlag, {}), children: [
             "You are editing the ",
             /* @__PURE__ */ jsx(Code, { children: locale.toUpperCase() }),
             " version of the block."
@@ -9339,7 +9736,12 @@ function BlockEditor({
                                 ] }),
                                 "and ",
                                 /* @__PURE__ */ jsx(Code, { children: "router" }),
-                                " in the scope of this generator."
+                                " in the scope of this generator.",
+                                isVizOrGenerator && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  " Return a property called",
+                                  /* @__PURE__ */ jsx(Code, { children: "_api" }),
+                                  " as string, to let the user download that data and override api value."
+                                ] })
                               ] }),
                               codeEditor,
                               /* @__PURE__ */ jsx(Divider, { my: "sm", color: "gray.8" }),
@@ -9615,27 +10017,6 @@ var Block_default = Block2;
 
 // components/blocks/BlockElement.tsx
 init_store2();
-
-// libs/settings/site.ts
-init_esm_shims();
-var site_default = {
-  backgroundColor: "#fafafa",
-  block: {
-    padding: 10
-  },
-  column: {
-    padding: 12
-  },
-  section: {
-    backgroundColor: "white",
-    borderRadius: 10,
-    boxShadow: "0px 6px 10px rgba(12, 32, 50, 0.14), 0px 1px 15px rgba(12, 32, 50, 0.12), 0px 3px 5px rgba(12, 32, 50, 0.15)",
-    margin: 16,
-    padding: 32
-  }
-};
-
-// components/blocks/BlockElement.tsx
 init_cms();
 init_hooks();
 function BlockElement({
@@ -9643,12 +10024,12 @@ function BlockElement({
   setHoverBlock,
   isInput,
   isConsumer,
-  active,
-  sectionState
+  active
 }) {
   const currentLocale = useAppSelector((state) => state.status.currentLocale);
   const block = useBlockRef(id).data;
   const blockStatus = useBlockStatus(id);
+  const [showOptions, setShowOptions] = useState(false);
   const { newConfirmation } = useDialog();
   const [opened, setOpened] = useState(false);
   const [modified, setModified] = useState(false);
@@ -9706,12 +10087,29 @@ function BlockElement({
       Group,
       {
         id: `cms-block-${id}`,
+        onMouseOver: () => setShowOptions(true),
+        onMouseOut: () => setShowOptions(false),
         className: "cr-section-block",
+        pos: "relative",
+        py: site_default.block.padding,
         ...hoverActions,
-        style: {
-          padding: site_default.block.padding,
-          position: "relative"
-        },
+        sx: (theme2) => ({
+          border: "1px solid transparent",
+          resize: "horizontal",
+          "&:hover": {
+            border: `1px solid ${theme2.colors.blue[2]}`
+          },
+          "&:hover::before": {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            fontSize: 8,
+            color: theme2.colors.blue[5],
+            transform: "translateY(-100%)",
+            content: `"Block ${id}"`,
+            width: "fit-content"
+          }
+        }),
         children: [
           /* @__PURE__ */ jsx(
             BlockPreview_default,
@@ -9725,7 +10123,7 @@ function BlockElement({
             },
             "bp"
           ),
-          /* @__PURE__ */ jsxs(
+          (showOptions || isInput || isConsumer) && /* @__PURE__ */ jsxs(
             Group,
             {
               spacing: 0,
@@ -9779,7 +10177,8 @@ function SectionHeader({
   isDragging,
   id,
   dragHandleProps,
-  hidden
+  hidden,
+  generators
 }) {
   return /* @__PURE__ */ jsxs(
     Group,
@@ -9793,7 +10192,17 @@ function SectionHeader({
             "#",
             id || "hello"
           ] }, "s1"),
-          /* @__PURE__ */ jsx(ActionIcon, { ...dragHandleProps, children: /* @__PURE__ */ jsx(IconMenu, { size: 16 }) }, "b1")
+          /* @__PURE__ */ jsx(ActionIcon, { ...dragHandleProps, children: /* @__PURE__ */ jsx(IconMenu, { size: 16 }) }, "b1"),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              size: "xs",
+              label: "Show generators",
+              color: "green",
+              checked: generators.showGenerators,
+              onChange: (e) => generators.setShowGenerators(e.currentTarget.checked)
+            }
+          )
         ] }),
         hidden && /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, color: "dark.3", children: "Section will be hidden on the frontend" }),
         /* @__PURE__ */ jsx(SectionMenu_default, { sectionId: id })
@@ -9805,28 +10214,8 @@ function SectionHeader({
 // components/sections/Section.tsx
 init_cms();
 var blockTypes = Object.values(BLOCK_TYPES);
-function SectionEditor({
-  for: section,
-  isDragging,
-  isActive,
-  onActivate,
-  dragHandleProps
-}) {
+var CreateBlockButton = ({ columns, columnIndex, section }) => {
   const dispatch = useAppDispatch();
-  const [columns, setColumns] = useState({});
-  const [sectionState, setSectionState2] = useSetState({});
-  const blocks = useAppSelector((state) => state.records.entities.block);
-  const blockSettings = getBlockSettings();
-  const { memberImageBg, optionsMenu, hidden } = section.settings;
-  const [hoverBlock, setHoverBlock] = useState();
-  const { inputs, consumers } = useMemo(() => {
-    if (hoverBlock) {
-      const block = blocks[hoverBlock];
-      const { inputs: inputs2, consumers: consumers2 } = block;
-      return { inputs: inputs2, consumers: consumers2 };
-    }
-    return { inputs: [], consumers: [] };
-  }, [hoverBlock]);
   const addBlock = (type, targetColumn = false) => {
     let blockrow = FIRST_POSITION;
     let blockcol = FIRST_POSITION;
@@ -9845,29 +10234,130 @@ function SectionEditor({
       locales: locales4
     }));
   };
-  useEffect(() => {
-    const columns2 = Object.values(blocks || {}).filter((d) => d.section_id === section.id).reduce((acc, d) => {
-      if (!acc[d.blockcol]) {
-        acc[d.blockcol] = { [d.blockrow]: d };
-      } else {
-        acc[d.blockcol][d.blockrow] = d;
+  return /* @__PURE__ */ jsx(Center, { w: "100%", py: "sm", children: /* @__PURE__ */ jsx(
+    EntityCreateButton,
+    {
+      fields: [{
+        type: "select",
+        name: "type",
+        label: "Block Type",
+        options: blockTypes.map((d) => ({ label: d, value: d }))
+      }],
+      onSubmit: (value) => addBlock(value.type, columnIndex),
+      target: /* @__PURE__ */ jsx(ActionIcon, { size: "md", radius: "lg", children: /* @__PURE__ */ jsx(IconCirclePlus, { size: 20 }) })
+    }
+  ) });
+};
+var FirstBlockButton = ({ columns, section, show = false }) => {
+  if (!show)
+    return null;
+  return /* @__PURE__ */ jsx(Center, { w: "100%", children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Text, { ta: "center", fw: 700, size: "sm", color: "gray.8", children: "Add your first block!" }),
+    /* @__PURE__ */ jsx(CreateBlockButton, { columnIndex: false, columns, section })
+  ] }) });
+};
+var CreateColumnArea = ({ active = false }) => {
+  return /* @__PURE__ */ jsx(Droppable, { droppableId: "newColumn", children: (provided) => /* @__PURE__ */ jsx(
+    Center,
+    {
+      ref: provided.innerRef,
+      pos: "absolute",
+      top: 16,
+      right: 0,
+      bottom: 16,
+      w: active ? 140 : 0,
+      sx: (theme) => ({
+        boxSizing: "border-box",
+        background: theme.colors.gray[0],
+        transition: "width 0.4s",
+        overflow: "hidden",
+        "&:hover": {
+          background: theme.colors.blue[0]
+        }
+      }),
+      children: /* @__PURE__ */ jsxs(Stack, { p: "md", align: "center", children: [
+        /* @__PURE__ */ jsx(Text, { size: "xs", ta: "center", children: "Drop here to add new column" }),
+        /* @__PURE__ */ jsx(IconPlus, {})
+      ] })
+    }
+  ) });
+};
+var ClickToEditOverlay = ({ onActivate, section, show = false }) => {
+  if (!show)
+    return null;
+  return /* @__PURE__ */ jsx(
+    Overlay,
+    {
+      className: "cms-section-overlay",
+      onClick: () => onActivate(section.id),
+      opacity: 0.4,
+      style: { cursor: "pointer", zIndex: 3 },
+      center: true,
+      children: /* @__PURE__ */ jsx(Badge, { size: "xl", color: "blue", children: "Click to Edit" })
+    }
+  );
+};
+var GeneratorsPanel = ({ generators, show = false }) => {
+  return /* @__PURE__ */ jsxs(Collapse, { in: show, p: "sm", children: [
+    /* @__PURE__ */ jsx(Title, { order: 5, align: "center", children: "Generators" }),
+    /* @__PURE__ */ jsx(
+      SimpleGrid,
+      {
+        cols: generators.length > 3 ? 3 : generators.length,
+        breakpoints: [
+          { maxWidth: "md", cols: 3, spacing: "md" },
+          { maxWidth: "sm", cols: 2, spacing: "sm" },
+          { maxWidth: "xs", cols: 1, spacing: "sm" }
+        ],
+        children: generators
       }
-      return acc;
-    }, {});
-    setColumns(columns2);
-  }, [blocks]);
+    )
+  ] });
+};
+function SectionEditor({
+  for: section,
+  isDragging,
+  isActive,
+  onActivate,
+  dragHandleProps
+}) {
+  const dispatch = useAppDispatch();
+  const [showGenerators, setShowGenerators] = useState(false);
+  const [draggingBlock, setDraggingBlock] = useState(false);
+  const [hoverBlock, setHoverBlock] = useState();
+  const columnContainer = useRef(null);
+  const blocks = useAppSelector((state) => state.records.entities.block);
+  const blockSettings = getBlockSettings();
+  const { memberImageBg, optionsMenu, hidden, columnSettings = {} } = section.settings;
+  const { inputs, consumers } = useMemo(() => {
+    if (hoverBlock) {
+      const block = blocks[hoverBlock];
+      const { inputs: inputs2, consumers: consumers2 } = block;
+      return { inputs: inputs2, consumers: consumers2 };
+    }
+    return { inputs: [], consumers: [] };
+  }, [hoverBlock]);
+  const columns = Object.values(blocks || {}).filter((d) => d.section_id === section.id && d.type !== BLOCK_TYPES.GENERATOR).reduce((acc, d) => {
+    if (!acc[d.blockcol]) {
+      acc[d.blockcol] = { [d.blockrow]: d };
+    } else {
+      acc[d.blockcol][d.blockrow] = d;
+    }
+    return acc;
+  }, {});
   const theme = useMantineTheme();
-  const smallScreen = useMediaQuery(`(max-width: ${theme.breakpoints.sm}px)`);
+  const onDragStart = () => setDraggingBlock(true);
   const onDragEnd = (result) => {
+    setDraggingBlock(false);
     if (!result.destination)
       return;
     const { source, destination } = result;
     if (source.droppableId === destination.droppableId && source.index === destination.index)
       return;
+    const newColumn = destination.droppableId === "newColumn";
     const blockId = Number(result.draggableId);
     const sourceColumnIndex = source.droppableId;
-    const destinationColumnIndex = destination.droppableId;
-    const sourceRowIndex = blocks[blockId].blockrow;
+    const destinationColumnIndex = newColumn ? findMaxOrdering(Object.keys(columns), true) : destination.droppableId;
     const payload = {
       id: blockId,
       blockrow: FIRST_POSITION,
@@ -9875,7 +10365,7 @@ function SectionEditor({
     };
     const changedColumn = sourceColumnIndex !== destinationColumnIndex;
     payload.blockcol = changedColumn ? destinationColumnIndex : sourceColumnIndex;
-    const rowItems = Object.values(columns[payload.blockcol]);
+    const rowItems = Object.values(columns[payload.blockcol] || {});
     const entities = rowItems.reduce((acc, d) => ({ ...acc, [d.id]: d }), {});
     const entityIds = rowItems.sort((a, b) => orderSort(a, b, "blockrow")).map((d) => d.id);
     const descending = destination.index > source.index;
@@ -9887,42 +10377,24 @@ function SectionEditor({
       descending,
       "blockrow"
     );
-    const { [sourceRowIndex]: draggingBlock, ...sourceColumnPruned } = columns[sourceColumnIndex];
-    if (changedColumn) {
-      setColumns({
-        ...columns,
-        [sourceColumnIndex]: sourceColumnPruned,
-        [destinationColumnIndex]: {
-          ...columns[destinationColumnIndex],
-          [payload.blockrow]: { ...draggingBlock, blockrow: payload.blockrow }
-        }
-      });
-    } else {
-      setColumns({
-        ...columns,
-        [sourceColumnIndex]: {
-          ...sourceColumnPruned,
-          [payload.blockrow]: { ...draggingBlock, blockrow: payload.blockrow }
-        }
-      });
-    }
     dispatch(actions_exports.updateEntity("block", payload));
   };
+  const generators = Object.values(blocks || {}).filter((d) => d.section_id === section.id && d.type == BLOCK_TYPES.GENERATOR);
+  const orderedCols = Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol"));
   const columnsQty = Object.keys(columns).length;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Paper,
     {
-      id: `cms-section-${section.id}`,
+      id: `section-${section.id}`,
       className: `cms-section${isDragging || isActive ? " active" : ""}`,
-      style: {
-        backgroundColor: site_default.section.backgroundColor,
-        borderRadius: site_default.section.borderRadius,
-        boxShadow: site_default.section.boxShadow,
-        margin: `${site_default.section.margin}px ${site_default.section.margin}px 0`,
-        overflow: "hidden",
-        width: `calc(100% - ${site_default.section.margin * 2}px)`,
-        position: "relative"
-      },
+      bg: site_default.section.backgroundColor,
+      m: `${site_default.section.margin}px ${site_default.section.margin}px 0`,
+      w: `calc(100% - ${site_default.section.margin * 2}px)`,
+      mih: 100,
+      pos: "relative",
+      shadow: site_default.section.boxShadow,
+      radius: site_default.section.borderRadius,
+      sx: { overflow: "hidden" },
       children: [
         /* @__PURE__ */ jsx(
           SectionHeader,
@@ -9931,166 +10403,134 @@ function SectionEditor({
             id: section.id,
             isDragging,
             hidden,
-            dragHandleProps
+            dragHandleProps,
+            generators: {
+              showGenerators,
+              setShowGenerators
+            }
           }
         ),
         memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
+        optionsMenu && /* @__PURE__ */ jsx(Flex, { justify: "flex-end", mx: 16, children: /* @__PURE__ */ jsx(Options, { sectionId: section.id }) }),
+        /* @__PURE__ */ jsx(
+          GeneratorsPanel,
+          {
+            show: showGenerators,
+            generators: generators.map((item) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              BlockElement_default,
+              {
+                id: Number(item.id),
+                active: isActive,
+                isInput: inputs.includes(Number(item.id)),
+                isConsumer: consumers.includes(Number(item.id)),
+                setHoverBlock
+              }
+            ) }, `block-${item.id}`))
+          }
+        ),
         /* @__PURE__ */ jsxs(
-          "div",
+          ColumnsWrapper,
           {
-            className: "cms-section-content",
-            style: {
-              alignItems: "stretch",
-              display: "flex",
-              flexDirection: smallScreen ? "column" : "row",
-              padding: "32px 32px 32px 32px",
-              position: "relative",
-              zIndex: 0
+            ref: columnContainer,
+            containerProps: {
+              mih: !isActive || !columnsQty ? 120 : "none",
+              p: "md"
             },
             children: [
-              optionsMenu && /* @__PURE__ */ jsx("div", { style: {
-                position: "absolute",
-                right: 10,
-                top: 10,
-                zIndex: 100
-              }, children: /* @__PURE__ */ jsx(Options, { sectionId: section.id }) }),
-              /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
-                const column = columns[columnIndex];
-                const staticWidths = Object.values(column).map(({ id }) => parseFloat(blocks[id]?.settings?.width)).filter((d) => !Number.isNaN(d));
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "cms-section-column",
-                    style: {
-                      flex: "1 1 100%",
-                      maxWidth: staticWidths.length ? Math.max(...staticWidths) : `${100 / columnsQty}%`,
-                      padding: site_default.column.padding
-                    },
-                    children: /* @__PURE__ */ jsx(Droppable, { droppableId: columnIndex, children: (provided, snapshot) => /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        ...provided.droppableProps,
-                        ref: provided.innerRef,
-                        style: {
-                          alignContent: "flex-start",
-                          background: snapshot.isDraggingOver ? theme.colors[theme.primaryColor][0] : "inherit",
-                          display: "flex",
-                          flexDirection: Object.values(column).find(
-                            (item) => blocks[item.id]?.settings?.display === "inline"
-                          ) ? "row" : "column",
-                          flexWrap: Object.values(column).find(
-                            (item) => blocks[item.id]?.settings?.display === "inline"
-                          ) ? "wrap" : "nowrap",
-                          height: "100%",
-                          maxWidth: "100%"
+              /* @__PURE__ */ jsxs(DragDropContext, { onDragEnd, onDragStart, children: [
+                orderedCols.map((columnIndex) => {
+                  const orderedBlocks = Object.values(columns[columnIndex]).sort((a, b) => orderSort(a, b, "blockrow"));
+                  return /* @__PURE__ */ jsx(Droppable, { droppableId: columnIndex, children: (provided, snapshot) => /* @__PURE__ */ jsxs(
+                    SectionColumn,
+                    {
+                      column: columns[columnIndex],
+                      columnSettings: columnSettings[columnIndex],
+                      ref: provided.innerRef,
+                      sx: {
+                        // extra styles for columns on editor
+                        flexBasis: `${100 / columnsQty}%`,
+                        background: snapshot.isDraggingOver ? theme.colors[theme.primaryColor][0] : "inherit",
+                        border: "1px solid transparent",
+                        "& .bespoke-resize-col": {
+                          visibility: "hidden"
                         },
-                        children: [
-                          Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item, rowIndex) => {
-                            if (!blocks[item.id])
-                              return null;
-                            const { settings, type } = blocks[item.id];
-                            return /* @__PURE__ */ jsx(
-                              Draggable,
-                              {
-                                draggableId: String(item.id),
-                                index: rowIndex,
-                                children: (provided2, snapshot2) => /* @__PURE__ */ jsx(
-                                  "div",
-                                  {
-                                    ref: provided2.innerRef,
-                                    ...provided2.draggableProps,
-                                    ...provided2.dragHandleProps,
-                                    style: {
-                                      ...provided2.draggableProps.style,
-                                      alignSelf: type === "visualization" ? "stretch" : "flex-start",
+                        "&:hover .bespoke-resize-col": {
+                          visibility: "visible"
+                        },
+                        "&:hover": {
+                          border: `1px solid ${theme.colors.teal[1]}`
+                        }
+                      },
+                      ...provided.droppableProps,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          ResizeColumnInput,
+                          {
+                            sectionId: section.id,
+                            columnIndex
+                          }
+                        ),
+                        orderedBlocks.map((item, rowIndex) => {
+                          if (!blocks[item.id])
+                            return null;
+                          const { settings, type } = blocks[item.id];
+                          const blockWidth = settings.width && !settings.width.stretch && settings.width.unit ? formatters[settings.width.unit](settings.width.value) : settings.display === "inline" ? "auto" : "100%";
+                          const blockStyles = {
+                            alignSelf: type === "visualization" ? "stretch" : "flex-start",
+                            flexGrow: 0,
+                            margin: "0",
+                            textAlign: settings.align || blockSettings.align.defaultValue,
+                            width: blockWidth,
+                            minWidth: 120
+                          };
+                          return /* @__PURE__ */ jsx(
+                            Draggable,
+                            {
+                              draggableId: String(item.id),
+                              index: rowIndex,
+                              children: (provided2, snapshot2) => /* @__PURE__ */ jsx(
+                                Box,
+                                {
+                                  ref: provided2.innerRef,
+                                  ...provided2.draggableProps,
+                                  ...provided2.dragHandleProps,
+                                  sx: [
+                                    blockStyles,
+                                    {
                                       boxShadow: snapshot2.isDragging ? theme.shadows.lg : "none",
-                                      flex: type === "visualization" ? smallScreen ? "1 1 300px" : "1 1 100%" : settings.display === "inline" ? "1 1 auto" : "0 0 auto",
-                                      margin: "0",
-                                      textAlign: settings.align || blockSettings.align.defaultValue,
-                                      width: settings.width && settings.width !== "stretch" ? parseFloat(settings.width) : settings.display === "inline" ? "auto" : "100%"
+                                      ...provided2.draggableProps.style
+                                    }
+                                  ],
+                                  children: /* @__PURE__ */ jsx(
+                                    BlockElement_default,
+                                    {
+                                      id: Number(item.id),
+                                      active: isActive,
+                                      isInput: inputs.includes(Number(item.id)),
+                                      isConsumer: consumers.includes(Number(item.id)),
+                                      setHoverBlock
                                     },
-                                    children: /* @__PURE__ */ jsx(
-                                      BlockElement_default,
-                                      {
-                                        id: Number(item.id),
-                                        active: isActive,
-                                        isInput: inputs.includes(Number(item.id)),
-                                        isConsumer: consumers.includes(Number(item.id)),
-                                        sectionState: {
-                                          state: sectionState,
-                                          set: setSectionState2
-                                        },
-                                        setHoverBlock
-                                      },
-                                      `block-${item.id}`
-                                    )
-                                  }
-                                )
-                              },
-                              item.id
-                            );
-                          }),
-                          isActive && /* @__PURE__ */ jsx(
-                            EntityCreateButton,
-                            {
-                              fields: [{
-                                type: "select",
-                                name: "type",
-                                label: "Block Type",
-                                options: blockTypes.map((d) => ({ label: d, value: d }))
-                              }],
-                              onSubmit: (value) => addBlock(value.type, columnIndex),
-                              target: /* @__PURE__ */ jsx(ActionIcon, { size: "md", radius: "lg", children: /* @__PURE__ */ jsx(IconCirclePlus, { size: 20 }) })
-                            }
-                          ),
-                          provided.placeholder
-                        ]
-                      }
-                    ) }, columnIndex)
-                  },
-                  columnIndex
-                );
-              }) }),
-              isActive && /* @__PURE__ */ jsx(
-                EntityCreateButton,
-                {
-                  fields: [{
-                    type: "select",
-                    name: "type",
-                    label: "Block Type",
-                    options: blockTypes.map((d) => ({ label: d, value: d }))
-                  }],
-                  onSubmit: (value) => addBlock(value.type),
-                  target: /* @__PURE__ */ jsx(ActionIcon, { size: "md", radius: "lg", children: /* @__PURE__ */ jsx(IconCirclePlus, { size: 20 }) })
-                }
-              ),
-              !isActive && /* @__PURE__ */ jsx(
-                Center,
-                {
-                  className: "cms-section-click-to-edit",
-                  style: {
-                    bottom: "0",
-                    position: "absolute",
-                    width: "100%",
-                    left: "0",
-                    top: "0"
-                  },
-                  children: /* @__PURE__ */ jsx(Badge, { size: "xl", variant: "outline", color: "gray", children: "Click to Edit" })
-                }
-              ),
-              !isActive && /* @__PURE__ */ jsx(
-                Overlay,
-                {
-                  className: "cms-section-overlay",
-                  onClick: () => onActivate(section.id),
-                  color: theme.black,
-                  opacity: 0.5,
-                  style: { cursor: "pointer" }
-                }
-              )
+                                    `block-${item.id}`
+                                  )
+                                }
+                              )
+                            },
+                            item.id
+                          );
+                        }),
+                        isActive && /* @__PURE__ */ jsx(CreateBlockButton, { section, columnIndex, columns }),
+                        provided.placeholder
+                      ]
+                    }
+                  ) }, columnIndex);
+                }),
+                /* @__PURE__ */ jsx(CreateColumnArea, { active: draggingBlock && isActive })
+              ] }),
+              /* @__PURE__ */ jsx(FirstBlockButton, { columns, section, show: isActive && !columnsQty })
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsx(ClickToEditOverlay, { onActivate, section, show: !isActive })
       ]
     }
   );
@@ -10388,9 +10828,9 @@ function FormatterForm({ formatterId, onEditEnd }) {
   useEffect(() => {
     if (!ref.isLoading && !formattersList.isLoading) {
       const formatterItem = !ref.isSuccess ? void 0 : ref.data;
-      const formatters = !formattersList.isSuccess ? [] : formattersList.data;
+      const formatters2 = !formattersList.isSuccess ? [] : formattersList.data;
       if (formatterItem) {
-        const formatterNamesList = formatters.filter((f) => f.id !== formatterItem.id).map((f) => f.name);
+        const formatterNamesList = formatters2.filter((f) => f.id !== formatterItem.id).map((f) => f.name);
         setFormatterNames(formatterNamesList);
       }
       onTest();
@@ -10593,10 +11033,10 @@ function FormattersTable({ filters, onClickEdit }) {
   const [sortStatus, setSortStatus] = useState();
   const [records, setRecords] = useState([]);
   const formattersList = useFormatterList();
-  const formatters = !formattersList.isSuccess ? [] : formattersList.data;
+  const formatters2 = !formattersList.isSuccess ? [] : formattersList.data;
   const formatterFunctions = useFormatterFunctionsForLocale();
   const formattersUsageCount = useFormatterUsageCountList();
-  const formattersFull = useMemo(() => formatters.map((f) => {
+  const formattersFull = useMemo(() => formatters2.map((f) => {
     const usageCount = formattersUsageCount[f.name] ? formattersUsageCount[f.name] : 0;
     let result = "";
     try {
@@ -10612,7 +11052,7 @@ function FormattersTable({ filters, onClickEdit }) {
       result,
       usageCount
     };
-  }), [formatters]);
+  }), [formatters2]);
   const doSearch = () => {
     let filteredResults = formattersFull.filter(
       (formatter) => {
@@ -12453,6 +12893,9 @@ function UsersEditor() {
     editingId && /* @__PURE__ */ jsx(UserForm, { userId: editingId, onEditEnd: onEditClose, roles })
   ] });
 }
+
+// views/BespokeManager.tsx
+init_ErrorBoundary();
 init_envvars();
 function BespokeManager(options) {
   const {
@@ -12461,7 +12904,7 @@ function BespokeManager(options) {
     locale = localeDefault4,
     profilePrefix = "/profilePathManager"
   } = options;
-  const notifications3 = {
+  const notifications4 = {
     position: "bottom-center",
     ...options.notifications
   };
@@ -12474,8 +12917,8 @@ function BespokeManager(options) {
     return /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment, profilePrefix, children: [
       /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: title }) }),
       /* @__PURE__ */ jsxs(MantineProvider, { inherit: false, children: [
-        /* @__PURE__ */ jsx(Notifications, { ...notifications3 }),
-        /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(BespokeManagerShell, { locale }) })
+        /* @__PURE__ */ jsx(Notifications, { ...notifications4 }),
+        /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Client side error in Bespoke. Check the console for details." }), children: /* @__PURE__ */ jsx(BespokeManagerShell, { locale }) }) })
       ] })
     ] });
   }