@datawheel/bespoke 0.1.20 → 0.1.22

package/dist/index.js

@@ -12,17 +12,17 @@ import toposort from 'toposort';
 import { schema, normalize } from 'normalizr';
 import { createSlice, configureStore } from '@reduxjs/toolkit';
 import { HYDRATE, createWrapper } from 'next-redux-wrapper';
-import { NotificationsProvider, showNotification } from '@mantine/notifications';
+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, Title, Select, SegmentedControl, MultiSelect, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, TextInput, Loader, Alert, Autocomplete, Card, Space, Code, Textarea, Overlay, Grid, Input, Popover, Checkbox, Radio, Switch, Drawer, Tabs, Header, SimpleGrid, Image, FileInput, Accordion, CopyButton, Paper, NumberInput, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, Tooltip, ActionIcon, Center, useMantineTheme, Modal, Button, Flex, Title, Select, SegmentedControl, MultiSelect, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, TextInput, Loader, Alert, Autocomplete, Card, Space, Code, Textarea, Overlay, Grid, Input, Popover, Checkbox, Radio, Switch, Drawer, Tabs, Header, px, SimpleGrid, Image, Paper, FileInput, Accordion, CopyButton, NumberInput, Col, rem } from '@mantine/core';
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
-import { IconInfoCircle, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconSearch, IconTrash, IconUserCircle, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCirclePlus, IconCircleX, IconFlag, IconFileAnalytics, IconPlus, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconRefreshAlert, IconSettings, IconMenu, IconRefresh, IconPolaroid, IconCircleMinus, IconEyeOff, IconAlignLeft, IconAlignCenter, IconAlignRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconExternalLink, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconLink, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconRss, IconGlobe } from '@tabler/icons';
-import { useDisclosure, useDebouncedValue, useMediaQuery, useHotkeys, getHotkeyHandler } from '@mantine/hooks';
-import Link from 'next/link';
 import Router, { useRouter } from 'next/router';
+import { IconInfoCircle, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconSearch, IconTrash, IconUserCircle, IconEdit, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCirclePlus, IconCircleX, IconFlag, IconFileAnalytics, IconPlus, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconMenu, IconRefresh, IconPolaroid, IconCircleMinus, IconEyeOff, IconAlignLeft, IconAlignCenter, IconAlignRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconLink, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe } from '@tabler/icons';
+import { useDisclosure, useDebouncedValue, useMediaQuery, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
+import Link from 'next/link';
 import dynamic from 'next/dynamic';
 import { UserProvider, withPageAuthRequired, useUser } from '@auth0/nextjs-auth0/client';
 import { Prism } from '@mantine/prism';
@@ -35,7 +35,7 @@ import { saveElement } from 'd3plus-export';
 import slugifyFn from 'slugify';
 import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
 import Head from 'next/head';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { format } from 'pretty-format';
 import { Editor as Editor$1 } from '@tinymce/tinymce-react';
@@ -58,8 +58,8 @@ var init_esm_shims = __esm({
 });
 
 // api/http/lib.ts
-function http(axios7, config) {
-  return axios7.request(config).then((response) => {
+function http(axios6, config) {
+  return axios6.request(config).then((response) => {
     const { status, data } = response;
     return "error" in data ? { ok: false, status, error: data.error } : { ok: true, status, data: data.data };
   }, (err) => {
@@ -70,25 +70,25 @@ function http(axios7, config) {
     return { ok: false, status: 500, error: err.message };
   });
 }
-function httpGET(axios7, request, transformParams) {
+function httpGET(axios6, request, transformParams) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (params) => http(axios7, {
+  return (params) => http(axios6, {
     ...config,
     method: "GET",
     params: transformParams ? transformParams(params) : params
   });
 }
-function httpPOST(axios7, request, transformPayload) {
+function httpPOST(axios6, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (payload) => http(axios7, {
+  return (payload) => http(axios6, {
     ...config,
     method: "POST",
     data: transformPayload ? transformPayload(payload) : payload
   });
 }
-function httpDELETE(axios7, request, transformPayload) {
+function httpDELETE(axios6, request, transformPayload) {
   const config = typeof request === "string" ? { url: request } : request;
-  return (payload) => http(axios7, {
+  return (payload) => http(axios6, {
     ...config,
     method: "DELETE",
     data: transformPayload ? transformPayload(payload) : payload
@@ -101,8 +101,8 @@ var init_lib = __esm({
 });
 
 // api/http/image/imageSave.ts
-function httpImageSaveFactory(axios7, provider) {
-  return (params) => http(axios7, {
+function httpImageSaveFactory(axios6, provider) {
+  return (params) => http(axios6, {
     method: "GET",
     url: `search/images/${provider}`,
     params: { prompt: params.prompt, provider }
@@ -116,8 +116,8 @@ var init_imageSave = __esm({
 });
 
 // api/http/image/imageSearch.ts
-function httpImageSearchFactory(axios7, provider) {
-  return (params) => http(axios7, {
+function httpImageSearchFactory(axios6, provider) {
+  return (params) => http(axios6, {
     method: "GET",
     url: `search/images/${provider}`,
     params: { prompt: params.prompt, provider }
@@ -130,58 +130,59 @@ var init_imageSearch = __esm({
   }
 });
 function apiFactory(baseURL) {
-  const axios7 = axios.create({ baseURL });
+  const axios6 = axios.create({ baseURL });
   return {
-    createBlock: httpPOST(axios7, "create/block"),
-    createDimension: httpPOST(axios7, "create/dimension"),
-    createFormatter: httpPOST(axios7, "create/formatter"),
-    createReport: httpPOST(axios7, "create/report"),
-    createSection: httpPOST(axios7, "create/section"),
-    createVariant: httpPOST(axios7, "create/variant"),
-    deleteBlock: httpDELETE(axios7, "delete/block", transformDeletePayload),
-    deleteDimension: httpDELETE(axios7, "delete/dimension", transformDeletePayload),
-    deleteFormatter: httpDELETE(axios7, "delete/formatter", transformDeletePayload),
-    deleteReport: httpDELETE(axios7, "delete/report", transformDeletePayload),
-    deleteSection: httpDELETE(axios7, "delete/section", transformDeletePayload),
-    deleteVariant: httpDELETE(axios7, "delete/variant", transformDeletePayload),
-    readBlock: httpGET(axios7, "read/block"),
-    readDimension: httpGET(axios7, "read/dimension"),
-    readFormatter: httpGET(axios7, "read/formatter"),
-    readReport: httpGET(axios7, "read/report"),
-    readSection: httpGET(axios7, "read/section"),
-    readVariant: httpGET(axios7, "read/variant"),
-    updateBlock: httpPOST(axios7, "update/block"),
-    updateDimension: httpPOST(axios7, "update/dimension"),
-    updateFormatter: httpPOST(axios7, "update/formatter"),
-    updateReport: httpPOST(axios7, "update/report"),
-    updateSection: httpPOST(axios7, "update/section"),
-    updateVariant: httpPOST(axios7, "update/variant"),
-    searchReport: httpGET(axios7, "search/reports"),
-    validateVariantSlug: httpGET(axios7, "validate/variant"),
-    readMember: httpGET(axios7, "read/members", transformReadMembers),
-    readMemberImage: httpGET(axios7, {
+    createBlock: httpPOST(axios6, "create/block"),
+    createDimension: httpPOST(axios6, "create/dimension"),
+    createFormatter: httpPOST(axios6, "create/formatter"),
+    createReport: httpPOST(axios6, "create/report"),
+    createSection: httpPOST(axios6, "create/section"),
+    createVariant: httpPOST(axios6, "create/variant"),
+    deleteBlock: httpDELETE(axios6, "delete/block", transformDeletePayload),
+    deleteDimension: httpDELETE(axios6, "delete/dimension", transformDeletePayload),
+    deleteFormatter: httpDELETE(axios6, "delete/formatter", transformDeletePayload),
+    deleteReport: httpDELETE(axios6, "delete/report", transformDeletePayload),
+    deleteSection: httpDELETE(axios6, "delete/section", transformDeletePayload),
+    deleteVariant: httpDELETE(axios6, "delete/variant", transformDeletePayload),
+    readBlock: httpGET(axios6, "read/block"),
+    readDimension: httpGET(axios6, "read/dimension"),
+    readFormatter: httpGET(axios6, "read/formatter"),
+    readReport: httpGET(axios6, "read/report"),
+    readSection: httpGET(axios6, "read/section"),
+    readVariant: httpGET(axios6, "read/variant"),
+    updateBlock: httpPOST(axios6, "update/block"),
+    updateDimension: httpPOST(axios6, "update/dimension"),
+    updateFormatter: httpPOST(axios6, "update/formatter"),
+    updateReport: httpPOST(axios6, "update/report"),
+    updateSection: httpPOST(axios6, "update/section"),
+    updateVariant: httpPOST(axios6, "update/variant"),
+    searchReport: httpGET(axios6, "search/reports"),
+    validateVariantSlug: httpGET(axios6, "validate/variant"),
+    readMember: httpGET(axios6, "read/members", transformReadMembers),
+    readMemberImage: httpGET(axios6, {
       url: "member/image.png",
       responseType: "blob"
     }),
-    searchMember: httpGET(axios7, "search/members"),
-    updateMember: httpGET(axios7, "update/members"),
-    imageLocalSearch: httpImageSearchFactory(axios7, "local"),
-    imageLocalSave: httpImageSaveFactory(axios7, "local"),
-    imageFlickrSearch: httpImageSearchFactory(axios7, "flickr"),
-    imageFlickrSave: httpImageSaveFactory(axios7, "flickr"),
-    imageUnsplashSearch: httpImageSearchFactory(axios7, "unsplash"),
-    imageUnsplashSave: httpImageSaveFactory(axios7, "unsplash"),
-    imageUploadSave: httpImageSaveFactory(axios7, "upload"),
-    readMetadata: httpGET(axios7, "read/metadata"),
-    regenerateSearch: httpPOST(axios7, "search/regenerate"),
-    urlProxy: httpGET(axios7, "url/proxy"),
-    searchRole: httpGET(axios7, "auth/search/roles"),
-    searchUser: httpGET(axios7, "auth/search/users"),
-    readUser: httpGET(axios7, "auth/read/user"),
-    updateUser: httpPOST(axios7, "auth/update/user"),
-    addNewReportToCurrentUser: httpPOST(axios7, "auth/update/me"),
-    revalidate: httpGET(axios7, "revalidate/report"),
-    readPrivateBlocks: httpPOST(axios7, "read/blocks/private")
+    searchMember: httpGET(axios6, "search/members"),
+    updateMember: httpGET(axios6, "update/members"),
+    imageLocalSearch: httpImageSearchFactory(axios6, "local"),
+    imageLocalSave: httpImageSaveFactory(axios6, "local"),
+    imageFlickrSearch: httpImageSearchFactory(axios6, "flickr"),
+    imageFlickrSave: httpImageSaveFactory(axios6, "flickr"),
+    imageUnsplashSearch: httpImageSearchFactory(axios6, "unsplash"),
+    imageUnsplashSave: httpImageSaveFactory(axios6, "unsplash"),
+    imageUploadSave: httpImageSaveFactory(axios6, "upload"),
+    readMetadata: httpGET(axios6, "read/metadata"),
+    regenerateSearch: httpPOST(axios6, "search/regenerate"),
+    urlProxy: httpGET(axios6, "url/proxy"),
+    searchRole: httpGET(axios6, "auth/search/roles"),
+    searchUser: httpGET(axios6, "auth/search/users"),
+    readUser: httpGET(axios6, "auth/read/user"),
+    updateUser: httpPOST(axios6, "auth/update/user"),
+    addNewReportToCurrentUser: httpPOST(axios6, "auth/update/me"),
+    revalidateReport: httpGET(axios6, "revalidate/report"),
+    revalidateUrl: httpGET(axios6, "revalidate/url"),
+    readPrivateBlocks: httpPOST(axios6, "read/blocks/private")
   };
 }
 var transformDeletePayload, transformReadMembers;
@@ -1111,9 +1112,9 @@ var init_runConsumers = __esm({
       if (rootBlock.consumers.length && crawlDown) {
         rootBlock.consumers.forEach((cid) => {
           const rel = `${bid}-${cid}`;
-          if (!acc.includes(rel))
+          if (!acc.includes(rel) && blocks[cid].section_id === blocks[bid].section_id)
             acc.push(rel);
-          rootBlock.consumers.forEach((cid2) => getDependencies(cid2, blocks, acc, crawlUp, crawlDown));
+          rootBlock.consumers.filter((cid2) => blocks[cid2].section_id === blocks[bid].section_id).forEach((cid2) => getDependencies(cid2, blocks, acc, crawlUp, crawlDown));
         });
       }
       return acc;
@@ -1310,13 +1311,14 @@ var init_FUNC = __esm({
   "libs/FUNC.js"() {
     init_esm_shims();
     init_libs();
-    parse = (config, formatters = {}, locale = "en", actions = {}) => {
+    parse = (config, formatters = {}, locale = "en", actions = {}, extraGlobals = {}) => {
       const globals = {
         setVariables: actions.onSetVariables ? actions.onSetVariables : (d) => d,
         openModal: actions.onOpenModal ? actions.onOpenModal : (d) => d,
         formatters,
         libs: libraries,
-        locale
+        locale,
+        ...extraGlobals
       };
       function parseFunction(obj) {
         return Function("globals", ...obj.vars, `with (globals) { ${obj.logic} }`).bind(globals, globals);
@@ -1848,7 +1850,7 @@ function rpcAnnounce(entity, key) {
 function rpcFailure(entity, key, code, message) {
   return (dispatch) => {
     if (typeof window === "object") {
-      showNotification({
+      notifications.show({
         autoClose: 3e3,
         color: "red",
         id: key,
@@ -2035,6 +2037,8 @@ __export(actions_exports, {
   recalculateVariables: () => recalculateVariables,
   removeBlocksFromState: () => removeBlocksFromState,
   reportSearch: () => reportSearch,
+  revalidateReport: () => revalidateReport,
+  revalidateUrl: () => revalidateUrl,
   searchMember: () => searchMember,
   searchRegenerate: () => searchRegenerate,
   searchRole: () => searchRole,
@@ -2130,6 +2134,7 @@ function recalculateVariables(resource, params) {
       locale: currentLocale
     };
     const section = state.records.entities.section[sid];
+    console.log(section?.blocks);
     const data = await runConsumersV2(
       blocks,
       section && [section],
@@ -2225,6 +2230,26 @@ function readPrivateBlocks(params) {
     return result.data;
   };
 }
+function revalidateUrl(params) {
+  return async (_, __, api) => {
+    const result = await api.revalidateUrl({ target: params.target });
+    if ("error" in result) {
+      throw new Error(result.error);
+    }
+    return result.data;
+  };
+}
+function revalidateReport(params) {
+  return async (_, __, api) => {
+    const result = await api.revalidateReport(
+      { reportId: params.reportId, profilePrefix: params.profilePrefix }
+    );
+    if ("error" in result) {
+      throw new Error(result.error);
+    }
+    return result.data;
+  };
+}
 var setStatus, setPreviews;
 var init_actions = __esm({
   "store/actions.ts"() {
@@ -2311,7 +2336,7 @@ function entityRefHookFactory(entity) {
     }, [key]);
     const value = useAppSelector(selector);
     useEffect(() => {
-      if (value.isUninitialized) {
+      if (value.isUninitialized && id !== null) {
         dispatch(readEntity(entity, { id, include: true }));
       }
       return () => {
@@ -2381,6 +2406,7 @@ var init_hooks = __esm({
       return result;
     };
     useInputVariablesHash = (id) => {
+      console.log("useInputVariablesHash", id);
       const block = useBlockRef(id).data;
       const variables = useAppSelector((state) => state.variables.variables);
       const attributes = useAppSelector((state) => state.variables.attributes);
@@ -2510,7 +2536,7 @@ var init_sanitizeBlockContent = __esm({
     sanitizeBlockContent_default = sanitizeBlockContent;
   }
 });
-var localeDefault7, frontEndMessage, errorStub, d3plusPropify_default;
+var localeDefault7, frontEndMessage, errorStub, propify, d3plusPropify_default;
 var init_d3plusPropify = __esm({
   "libs/d3plusPropify.ts"() {
     init_esm_shims();
@@ -2525,10 +2551,10 @@ var init_d3plusPropify = __esm({
     <strong>${frontEndMessage}</strong>
   </p>`
     };
-    d3plusPropify_default = (logic, formatters, variables = {}, locale = localeDefault7, id = null, actions = {}) => {
+    propify = (logic, formatters, variables = {}, locale = localeDefault7, id = null, actions = {}, globals = {}) => {
       let config;
       try {
-        config = parse({ vars: ["variables"], logic }, formatters, locale, actions)(variables);
+        config = parse({ vars: ["variables"], logic }, formatters, locale, actions, globals)(variables);
       } catch (e) {
         console.error(`Parsing Error in propify (ID: ${id})`);
         console.error(`Error message: ${e.message}`);
@@ -2563,6 +2589,7 @@ var init_d3plusPropify = __esm({
         topojsonFormat
       };
     };
+    d3plusPropify_default = propify;
   }
 });
 
@@ -2608,11 +2635,12 @@ function Viz(config) {
   const content = getBlockContent(block);
   const formatterFunctions = useFormatterFunctionsForLocale(locale);
   const blockContext = { variables };
+  const router = useRouter();
   const vizProps = useMemo(() => {
     if (!content?.logic)
       return { error: "Add a Configuration" };
     const transpiledLogic = varSwapRecursive_default({ logic: content.logic }, formatterFunctions, blockContext).logic;
-    return d3plusPropify_default(transpiledLogic, formatterFunctions, variables, locale, block.id, {});
+    return d3plusPropify_default(transpiledLogic, formatterFunctions, variables, locale, block.id, {}, { router });
   }, [block, active, variables]);
   const { type } = vizProps.config || {};
   const fallbackType = type && vizTypes[type] ? type : "Treemap";
@@ -2818,13 +2846,14 @@ function Viz2({
   const content = getBlockContent(block);
   const formatterFunctions = useFormatterFunctionsForLocale(locale);
   const blockContext = { variables };
+  const router = useRouter();
   const vizProps = useMemo(() => {
     if (!active)
       return { error: "Activate to View" };
     if (!content?.logic)
       return { error: "Add a Configuration" };
     const transpiledLogic = varSwapRecursive_default({ logic: content.logic }, formatterFunctions, blockContext).logic;
-    return d3plusPropify_default(transpiledLogic, formatterFunctions, variables, locale, block.id, {});
+    return d3plusPropify_default(transpiledLogic, formatterFunctions, variables, locale, block.id, {}, { router });
   }, [block, active, variables]);
   useMemo(() => {
     if (!active || !content?.logic)
@@ -3724,16 +3753,12 @@ function createOutline(elements, variables) {
   }
   return roots;
 }
-function useContentOutline(min = 1, max = 6) {
-  if (!min)
-    min = 1;
-  if (!max)
-    max = 6;
+function useContentOutline(min = 1, max = 6, headings = []) {
   const state = useAppSelector((state2) => state2);
   const variables = useAppSelector((state2) => state2.variables.variables);
   const sectionList = useSectionList();
   const titleList = selectBlockList(state).filter((block) => {
-    return block.type === BLOCK_TYPES.TITLE;
+    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]]));
@@ -3757,30 +3782,30 @@ function useContentOutline(min = 1, max = 6) {
         return currentOrder >= min && currentOrder <= max;
       });
     }
-  }, [min, max, sectionList, titleBlocks]);
+  }, [headings, sectionList, titleBlocks]);
   return useMemo(() => {
     if (titlesSorted && titlesSorted?.length > 0) {
       return createOutline(titlesSorted, titleVariables);
     }
   }, [titlesSorted, titleVariables]);
 }
-function NavView({ settings }) {
+function NavView({ headings, settings }) {
   const { type, min, max } = settings;
-  const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10));
+  const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10), headings);
   const renderMenu = (nodes) => {
     if (!nodes || !nodes?.length) {
       return null;
     }
-    return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsx(
         Anchor,
         {
           href: `#bespoke-title-${node.id}`,
-          children: node.label
+          dangerouslySetInnerHTML: { __html: node.label }
         }
-      ) }, node.id),
+      ) }),
       /* @__PURE__ */ jsx(Box, { pl: "xs", children: renderMenu(node.children) })
-    ] })) });
+    ] }, node.id)) });
   };
   return /* @__PURE__ */ jsx(Box, { component: "nav", children: /* @__PURE__ */ jsx(
     List,
@@ -3793,7 +3818,7 @@ function NavView({ settings }) {
       }),
       children: contentOutline?.map(
         (node) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsxs(Menu, { trigger: "hover", openDelay: 100, closeDelay: 400, children: [
-          /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Anchor, { href: `#bespoke-title-${node.id}`, children: node.label }) }),
+          /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Anchor, { href: `#bespoke-title-${node.id}`, dangerouslySetInnerHTML: { __html: node.label } }) }),
           node?.children?.length ? /* @__PURE__ */ jsx(Menu.Dropdown, { children: renderMenu(node.children) }) : null
         ] }) }, node.id)
       )
@@ -4221,9 +4246,16 @@ function SelectorUI(props) {
 }
 var SelectorUI_default = SelectorUI;
 
+// components/blocks/types/simpleEditors/NavUI.tsx
+init_esm_shims();
+function NavUI() {
+  return /* @__PURE__ */ jsx(Title, { order: 4, children: "Nav UI" });
+}
+
 // components/blocks/types/simpleEditors/index.js
 var simpleEditors_default = {
-  [BLOCK_TYPES.SELECTOR]: SelectorUI_default
+  [BLOCK_TYPES.SELECTOR]: SelectorUI_default,
+  [BLOCK_TYPES.NAV]: NavUI
 };
 
 // components/blocks/types/renderers/index.tsx
@@ -4577,14 +4609,14 @@ function stringifyPreview(member) {
   const variant = "variant_slug" in member ? member.variant_slug : member.variant.slug;
   return `${variant}/${member.slug}`;
 }
-function NavPreview({ settings }) {
+function NavPreview({ headings, settings }) {
   const { type, min, max } = settings;
-  const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10));
+  const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10), headings);
   const renderMenu = (nodes) => {
     if (!nodes || !nodes?.length) {
       return null;
     }
-    return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
         Anchor,
         {
@@ -4596,7 +4628,7 @@ function NavPreview({ settings }) {
         }
       ) }, node.id),
       /* @__PURE__ */ jsx(Box, { pl: "xs", children: renderMenu(node.children) })
-    ] })) });
+    ] }, node.id)) });
   };
   return /* @__PURE__ */ jsxs(Box, { pos: "relative", children: [
     /* @__PURE__ */ jsx(Tooltip, { label: `
@@ -4729,7 +4761,7 @@ function Block({ blockId, active = true }) {
     locale
   };
   const [content, setContent] = useState(() => {
-    if (![BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(block?.type)) {
+    if (![BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ, BLOCK_TYPES.NAV].includes(block?.type)) {
       if (block?.type === BLOCK_TYPES.SELECTOR) {
         const blockContent2 = getBlockContent(block, locale);
         const { config: renderVariables } = runSelector_default(blockContent2?.logic, formatterFunctions, blockContext);
@@ -4793,12 +4825,21 @@ function Block({ blockId, active = true }) {
         return;
       }
       if (block.type === BLOCK_TYPES.SELECTOR) {
-        const blockContent2 = getBlockContent(block);
+        const blockContent2 = getBlockContent(block, locale);
         const { config: renderVariables } = runSelector_default(blockContent2.logic, formatterFunctions, blockContext);
         const content2 = renderVariables;
         setContent({ ...content2, id: block.id, section: block.section_id });
         return;
       }
+      if (block.type === BLOCK_TYPES.NAV) {
+        setContent({
+          id: block.id,
+          headings: block.inputs,
+          section: block.section_id,
+          settings: block.settings
+        });
+        return;
+      }
       const swappedLogic = varSwap_default(blockContent?.logic, formatterFunctions, blockContext);
       const { vars } = mortarEval_default(
         "variables",
@@ -4814,9 +4855,9 @@ function Block({ blockId, active = true }) {
     fetch();
   }, [blockContent, variables]);
   if (!block || !content || !allowed)
-    return;
+    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 cms-block-${blockId}`, children: /* @__PURE__ */ jsx(Renderer, { ...content }) });
 }
 
 // libs/settings/section.tsx
@@ -5523,35 +5564,69 @@ function Options(props) {
     )
   ] });
 }
-var OuterWrappers = {
-  "sticky": ({ children, ...props }) => /* @__PURE__ */ jsx(
-    Paper,
-    {
-      pos: "sticky",
+
+// frontend/hooks/useBespokeStyles.ts
+init_esm_shims();
+function useBespokeStyles() {
+  const theme = useMantineTheme();
+  return theme.other.bespokeStyles || {};
+}
+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,
-      sx: { zIndex: 3, borderTop: "none", borderLeft: "none", borderRight: "none" },
-      ...props,
-      withBorder: true,
-      children
+      withBorder: true
     }
-  ),
-  "normal": ({ children, ...props }) => /* @__PURE__ */ jsx(Box, { pos: "relative", ...props, children })
-};
-var WidthWrappers = {
-  "full": ({ children, ...props }) => /* @__PURE__ */ jsx(Container, { ...props, fluid: true, p: "md", children }),
-  "center": ({ children, ...props }) => /* @__PURE__ */ jsx(Container, { ...props, p: "md", children })
+  };
+  const sx = [defaultStyles[position], getStyles(styles, settings)];
+  return /* @__PURE__ */ jsx(Paper, { component: "section", sx, ...defaultProps[position], ...props, children });
 };
-var StyleWrappers = {
-  "none": ({ children, ...props }) => /* @__PURE__ */ jsx(Box, { ...props, children }),
-  "card": ({ children, ...props }) => /* @__PURE__ */ jsx(Paper, { ...props, shadow: "lg", p: "md", radius: "md", 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 getWrappers = (settings) => {
-  return {
-    Outer: OuterWrappers[settings.position],
-    Container: WidthWrappers[settings.width],
-    Wrapper: StyleWrappers[settings.style]
-  };
+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;
@@ -5560,6 +5635,7 @@ function Section({ section }) {
     ...settings
   };
   const state = useAppSelector((state2) => state2);
+  const sectionStyles = useBespokeStyles()["Section"];
   const blockRecords = selectBlockRecords(state);
   const theme = useMantineTheme();
   const smallScreen = useMediaQuery(`(max-width: ${theme.breakpoints.sm}px)`);
@@ -5571,55 +5647,62 @@ function Section({ section }) {
     }
     return acc;
   }, {});
-  const Wrappers = getWrappers(sectionSettings2);
-  return /* @__PURE__ */ jsxs(Wrappers.Outer, { component: "section", children: [
-    sectionSettings2.memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
-    /* @__PURE__ */ jsx(
-      Wrappers.Container,
-      {
-        className: `cms-section-${id}`,
-        pos: "relative",
-        p: 0,
-        children: /* @__PURE__ */ jsx(Wrappers.Wrapper, { children: /* @__PURE__ */ jsxs(
-          Flex,
+  return /* @__PURE__ */ jsxs(
+    PositionWrapper,
+    {
+      settings: sectionSettings2,
+      styles: sectionStyles?.root || void 0,
+      children: [
+        sectionSettings2.memberImageBg && /* @__PURE__ */ jsx(SectionBackground, {}),
+        /* @__PURE__ */ jsx(
+          WidthWrapper,
           {
-            className: "cms-section-content",
-            align: "stretch",
-            direction: smallScreen ? "column" : "row",
+            settings: sectionSettings2,
+            styles: sectionStyles?.container,
+            className: `cms-section-${id}`,
             pos: "relative",
-            gap: "md",
-            children: [
-              sectionSettings2.optionsMenu && /* @__PURE__ */ jsx("div", { style: {
-                position: "absolute",
-                right: 10,
-                top: 10,
-                zIndex: 100
-              }, children: /* @__PURE__ */ jsx(Options, { sectionId: 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)).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
-                );
-              })
-            ]
+            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: [
+                  sectionSettings2.optionsMenu && /* @__PURE__ */ jsx("div", { style: {
+                    position: "absolute",
+                    right: 10,
+                    top: 10,
+                    zIndex: 100
+                  }, children: /* @__PURE__ */ jsx(Options, { sectionId: 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
+                    );
+                  })
+                ]
+              }
+            ) })
           }
-        ) })
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 }
 var Section_default = Section;
 function Report() {
@@ -5630,30 +5713,68 @@ 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({
-  options = "",
   buttonProps = {},
-  menuProps = {}
+  editorMenuItemProps = {},
+  editorMenuItemRoute = "/cms",
+  logoutButtonProps = {},
+  menuProps = {},
+  options = "",
+  optionsPosition = "bottom",
+  translations = {},
+  withEditorMenuItem = true,
+  withSession = true
 }) {
   const { user, error, isLoading } = useUser();
+  const userRoles = useMemo(() => user?.bespoke_roles || [], [user]);
+  const isCMSUser = useMemo(() => CMS_ROLES && Object.keys(CMS_ROLES).length > 0 && Object.keys(CMS_ROLES).some((role) => userRoles.includes(CMS_ROLES[role])), [userRoles]);
   const buttonConfig = {
     leftIcon: /* @__PURE__ */ jsx(IconUserCircle, {}),
     ...buttonProps
   };
   if (user && !error && !isLoading) {
+    const editorMenuItemConfig = {
+      ...editorMenuItemProps
+    };
+    const logoutButtonConfig = {
+      color: "red",
+      fullWidth: true,
+      leftIcon: /* @__PURE__ */ jsx(IconLogout, { size: 14 }),
+      size: "xs",
+      variant: "subtle",
+      ...logoutButtonProps
+    };
     const menuConfig = {
       shadow: "md",
       width: "auto",
       position: "bottom",
       ...menuProps
     };
+    const cmsButton = /* @__PURE__ */ jsx(Link, { href: editorMenuItemRoute, passHref: true, children: /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        icon: /* @__PURE__ */ jsx(IconEdit, { size: 14 }),
+        ...editorMenuItemConfig,
+        children: translations["Go to editor"] || "Go to editor"
+      }
+    ) });
     return /* @__PURE__ */ jsxs(Menu, { ...menuConfig, children: [
-      /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, { ...buttonConfig, children: `Hi, ${user.name || user.email}!` }) }),
+      /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, { ...buttonConfig, children: `${translations["Welcome message"] || `Hi, ${user.name || user.email}`}` }) }),
       /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
-        options,
-        options && /* @__PURE__ */ jsx(Menu.Divider, {}),
-        /* @__PURE__ */ jsx(Menu.Label, { children: "Session" }),
-        /* @__PURE__ */ jsxs(
+        optionsPosition === "top" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          withEditorMenuItem && isCMSUser && cmsButton,
+          options,
+          (options || withEditorMenuItem && isCMSUser) && /* @__PURE__ */ jsx(Menu.Divider, {})
+        ] }),
+        withSession && /* @__PURE__ */ jsxs(
           Menu.Item,
           {
             component: "span",
@@ -5666,14 +5787,19 @@ function BespokeLoginBtn({
           }
         ),
         /* @__PURE__ */ jsx(
-          Menu.Item,
+          Button,
           {
             component: "a",
             href: "/api/auth/logout",
-            icon: /* @__PURE__ */ jsx(IconLogout, { size: 14 }),
-            children: "Disconnect"
+            ...logoutButtonConfig,
+            children: translations["Disconnect"] || "Disconnect"
           }
-        )
+        ),
+        optionsPosition === "bottom" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (options || withEditorMenuItem && isCMSUser) && /* @__PURE__ */ jsx(Menu.Divider, {}),
+          withEditorMenuItem && isCMSUser && cmsButton,
+          options
+        ] })
       ] })
     ] });
   }
@@ -5684,7 +5810,7 @@ function BespokeLoginBtn({
       href: "/api/auth/login",
       loading: isLoading,
       ...buttonConfig,
-      children: isLoading ? "Signing in..." : "Sign in"
+      children: isLoading ? translations["Signing in"] || "Signing in..." : translations["Sign in"] || "Sign in"
     }
   );
 }
@@ -5824,14 +5950,6 @@ function normalizeList(value) {
   return value.toString().split(",");
 }
 
-// types/auth.ts
-init_esm_shims();
-var CMS_ROLES = {
-  ADMIN: "Admin",
-  EDITOR: "Editor",
-  WRITER: "Writer"
-};
-
 // api/endpoints/member.ts
 var { localeDefault: localeDefault8 } = getLocales_default();
 function parseReadMemberParams(query) {
@@ -7016,21 +7134,15 @@ function CMSHeader(props) {
   const { report: currentReport, profilePrefix } = props;
   const { id } = currentReport;
   const { newConfirmation } = useDialog();
-  const location = useManagerLocation();
   const dispatch = useAppDispatch();
   const resource = useContext(ResourceContext);
   const currentLocale = useAppSelector((state) => state.status.currentLocale);
   const localeDefault9 = useAppSelector((state) => state.status.localeDefault);
   const localeOptions = useAppSelector(selectLocaleOptions);
-  const reportList = useReportList();
+  const previewsFromState = useAppSelector((state) => state.status.previews);
   const [opened, handlers] = useDisclosure(false);
   const { user } = useUser();
   const castedUser = user;
-  const reportOptions = useMemo(() => {
-    if (!reportList.isSuccess)
-      return [];
-    return reportList.data.map((d) => ({ value: `${d.id}`, label: d.name }));
-  }, [reportList.status]);
   const dimensions = useMemo(() => {
     return currentReport && currentReport.dimensions ? currentReport.dimensions : [];
   }, [currentReport]);
@@ -7039,9 +7151,14 @@ function CMSHeader(props) {
   }, [dimensions]);
   const [previewMembers, setPreviewMembers] = useState([]);
   const [initialFavorites, setInitialFavorites] = useState([]);
-  const onChangeReport = useCallback((value) => {
-    location.push(`/reports/${value}`);
-  }, [location]);
+  const previewPath = previewsFromState.reduce((acc, member) => {
+    return acc.concat([member.variant_slug, member.slug]);
+  }, []);
+  const previewName = previewsFromState.reduce((acc, member) => {
+    return acc.concat([member.name]);
+  }, []).join(" / ");
+  const localePrefix = currentLocale === localeDefault9 ? "" : `/${currentLocale}`;
+  const realPath = `${localePrefix}${profilePrefix}/${previewPath.join("/")}`;
   const onSelectPreview = (previewMember) => {
     const newPreviews = currentReport.dimensions.map((dId) => {
       let member;
@@ -7059,18 +7176,16 @@ function CMSHeader(props) {
     });
     setPreviewMembers(newPreviews);
   };
-  const maybeRevalidate = useCallback(async () => {
+  const maybeRevalidateUrl = useCallback(async () => {
     try {
       await newConfirmation({
         title: "Are you sure?",
-        message: "Revalidate action will force to regenerate all the cached instances of this report type.",
+        message: `Revalidate action will force to regenerate page: ${realPath}.`,
         confirmText: "Revalidate now!"
       });
-      const revalidateUrl = `/api/cms/revalidate/report?profilePrefix=${profilePrefix}&reportId=${id}`;
-      await axios.get(revalidateUrl).then((response) => {
-        const resp = response.data.data.data;
-        const message = `Revalidated ${resp.revalidated} pages of report ID ${resp.reportId}, like ${resp.samples.join(", ")}.`;
-        showNotification({
+      await dispatch(actions_exports.revalidateUrl({ target: realPath })).then((response) => {
+        const message = `Revalidated page ${response.target} you will see the changes in the following minutes.`;
+        notifications.show({
           autoClose: false,
           color: "green",
           id: "revalidate-results",
@@ -7078,7 +7193,39 @@ function CMSHeader(props) {
           title: "Revalidate Results"
         });
       }).catch((error) => {
-        showNotification({
+        notifications.show({
+          autoClose: false,
+          color: "red",
+          id: "revalidate-error",
+          message: error.message,
+          title: "Revalidate Error"
+        });
+      });
+    } catch {
+      console.debug("Revalidate error.");
+    }
+  }, [realPath]);
+  const maybeRevalidateReport = useCallback(async () => {
+    try {
+      await newConfirmation({
+        title: "Are you sure?",
+        message: `Revalidate action will force to regenerate all the cached instances of '${currentReport.name}' report type.`,
+        confirmText: "Revalidate now!"
+      });
+      await dispatch(actions_exports.revalidateReport({
+        profilePrefix,
+        reportId: id
+      })).then((response) => {
+        const message = `Revalidated ${response.revalidated} pages of report ${currentReport.name}(ID ${response.reportId}), you will see the changes in the following minutes. Examples: ${response.samples.join(", ")}.`;
+        notifications.show({
+          autoClose: false,
+          color: "green",
+          id: "revalidate-results",
+          message,
+          title: "Revalidate Results"
+        });
+      }).catch((error) => {
+        notifications.show({
           autoClose: false,
           color: "red",
           id: "revalidate-error",
@@ -7089,10 +7236,15 @@ function CMSHeader(props) {
     } catch {
       console.debug("Revalidate edition.");
     }
-  }, []);
+  }, [id]);
   useEffect(() => {
     setPreviewMembers([]);
   }, [dimensions]);
+  useEffect(() => {
+    if (previewsFromState && previewsFromState.length > 0) {
+      setInitialFavorites(previewsFromState.map((ps) => ({ variantId: ps.variant_id, contentId: ps.content_id })));
+    }
+  }, [previewsFromState]);
   useEffect(() => {
     if (previewMembers.length > 0) {
       dispatch(actions_exports.recalculateVariables(resource, {
@@ -7124,17 +7276,8 @@ function CMSHeader(props) {
             onChange: (value) => dispatch(statusActions.setStatus({ currentLocale: value || localeDefault9 }))
           }
         ),
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            style: { width: 100 },
-            size: "xs",
-            data: reportOptions,
-            value: String(id),
-            onChange: onChangeReport
-          }
-        ),
-        showPreviewSelector && dimensions.map((dId, ix) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }),
+        showPreviewSelector && dimensions.map((dId, ix) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
           DimensionAutocomplete,
           {
             id: dId,
@@ -7143,34 +7286,53 @@ function CMSHeader(props) {
             locale: currentLocale
           },
           dId
-        )),
-        !showPreviewSelector && /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "xs",
-            variant: "outline",
-            onClick: handlers.open,
-            children: "Import Data"
-          }
-        )
-      ] }),
-      right: /* @__PURE__ */ jsxs(Group, { children: [
-        /* @__PURE__ */ jsx(ActionIcon, { onClick: maybeRevalidate, color: "blue", variant: "filled", children: /* @__PURE__ */ jsx(IconRefreshAlert, { size: 20 }) }),
-        /* @__PURE__ */ jsxs(ActionIcon, { color: "blue", variant: "filled", children: [
-          /* @__PURE__ */ jsx(IconSettings, { onClick: handlers.open, size: 20 }),
+        ) })),
+        previewsFromState.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }),
+          /* @__PURE__ */ jsx(ActionIcon, { component: "a", href: realPath, target: "_blank", variant: "subtle", title: "Open report in new tab", children: /* @__PURE__ */ jsx(IconExternalLink, { size: 20 }) })
+        ] }),
+        !showPreviewSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }),
           /* @__PURE__ */ jsx(
-            Drawer,
+            Button,
             {
-              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 })
+              size: "xs",
+              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(
+          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 })
+          }
+        )
       ] })
     }
   );
@@ -7492,13 +7654,13 @@ function MonacoWrapper({ monacoOptions, variables = {} }) {
     }
   }, [monaco]);
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
       className: "cr-monaco-container",
+      w: "100%",
       children: /* @__PURE__ */ jsx(
         Editor,
         {
-          height: "50vh",
           defaultLanguage: "javascript",
           theme: "Monokai",
           ...monacoOptions
@@ -7527,6 +7689,7 @@ var emptyStatus = {
 };
 function BlockPreview(props) {
   const {
+    id,
     active,
     allowed,
     blockStateContent,
@@ -7573,6 +7736,10 @@ function BlockPreview(props) {
         setStatus2(status2);
         return;
       }
+      if (block.type === BLOCK_TYPES.NAV) {
+        setContent({ headings: block.inputs, settings: block.settings });
+        return;
+      }
       const swappedLogic = varSwap_default(blockContent?.logic, formatterFunctions, blockContext);
       const { vars, error: error2, log: log2 } = mortarEval_default(
         "variables",
@@ -7609,10 +7776,10 @@ function BlockPreview(props) {
     {
       id: `${block.type}-${block.id}`,
       className: "cms-block-preview",
-      style: { width: "100%", minHeight: block.type === BLOCK_TYPES.VIZ && 300 },
+      style: { width: "100%", minHeight: block.type === BLOCK_TYPES.VIZ ? 300 : "auto" },
       children: [
         !allowed && allowedOverlay,
-        Renderer ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Renderer, { debug, ...content, settings: block.settings }) }, "renderer") : /* @__PURE__ */ jsx(Center, { style: { minHeight: 100 }, children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: block.type }, "type") }),
+        Renderer ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Renderer, { id: block.id, debug, ...content }) }, "renderer") : /* @__PURE__ */ jsx(Center, { style: { minHeight: 100 }, children: /* @__PURE__ */ jsx(Badge, { color: "gray", variant: "outline", children: block.type }, "type") }),
         debug && textLog && /* @__PURE__ */ jsx(
           Textarea,
           {
@@ -8069,7 +8236,7 @@ function VariableList({ id, setInlineId }) {
               disabled: !isGenerator,
               label: "Edit this Generator",
               style: { position: "absolute", right: 0, top: 0 },
-              transition: "pop",
+              transitionProps: { transition: "pop" },
               withArrow: true,
               children: /* @__PURE__ */ jsx(ActionIcon, { size: "xs", onClick: () => setInlineId(vid), variant: "filled", children: /* @__PURE__ */ jsx(IconSettings, {}) })
             }
@@ -8099,6 +8266,7 @@ function BlockEditor({
   const status = useBlockStatus(id);
   const resp = status?.resp;
   const variables = useInputVariablesFlat(id);
+  const { ref, toggle, fullscreen } = useFullscreen();
   const onChangeCode = (logic, locale2) => setBlockContent({ logic }, locale2);
   const onChangeAPI = (api) => setBlockContent({ api });
   const blockPreview = /* @__PURE__ */ jsx(
@@ -8118,7 +8286,9 @@ function BlockEditor({
     {
       monacoOptions: {
         onChange: (logic) => onChangeCode(logic, locale),
-        value: blockContent?.logic || ""
+        value: blockContent?.logic || "",
+        height: fullscreen ? "90vh" : "58vh",
+        width: "100%"
       },
       variables
     },
@@ -8168,7 +8338,7 @@ function BlockEditor({
                   maxHeight: 200,
                   overflowY: "scroll"
                 },
-                children: /* @__PURE__ */ jsx(InputMenuItem_default, { variables: resp })
+                children: /* @__PURE__ */ jsx(InputMenuItem_default, { id, variables: resp })
               }
             )
           ] })
@@ -8196,35 +8366,52 @@ function BlockEditor({
             {
               value: tab,
               onTabChange: setTab,
-              styles: {
-                root: {
-                  display: "flex",
-                  flex: 1,
-                  flexDirection: "column",
-                  width: "100%",
-                  body: {
-                    display: "flex",
-                    flex: "1 1 100%"
-                  }
-                }
-              },
-              variant: "pills",
               children: [
-                /* @__PURE__ */ jsxs(Tabs.List, { position: "center", children: [
-                  /* @__PURE__ */ jsx(Tabs.Tab, { value: "Content", icon: /* @__PURE__ */ jsx(IconEye, {}) }),
-                  /* @__PURE__ */ jsx(Tabs.Tab, { value: "Settings", icon: /* @__PURE__ */ jsx(IconSettings, {}) })
+                /* @__PURE__ */ jsxs(Tabs.List, { position: "left", children: [
+                  /* @__PURE__ */ jsx(Tabs.Tab, { value: "Content", icon: /* @__PURE__ */ jsx(IconEye, {}), children: "Edit" }),
+                  /* @__PURE__ */ jsx(Tabs.Tab, { value: "Settings", icon: /* @__PURE__ */ jsx(IconSettings, {}), children: "Settings" })
                 ] }),
-                /* @__PURE__ */ jsx(Tabs.Panel, { value: "Content", children: /* @__PURE__ */ jsxs(Grid, { className: "cr-block-output", style: { flex: 1, width: "100%" }, children: [
-                  /* @__PURE__ */ jsxs(Col, { span: 9, className: `cr-block-output-editor ${currentMode}`, children: [
-                    currentMode === "code" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      codeEditor,
-                      executeButton
-                    ] }),
-                    currentMode !== "code" && uiEditor
-                  ] }, "content-col"),
-                  /* @__PURE__ */ jsx(Col, { span: 3, style: { display: "flex", flexDirection: "column" }, children: blockPreview })
-                ] }) }),
-                /* @__PURE__ */ jsx(Tabs.Panel, { value: "Settings", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Tabs.Panel, { value: "Content", pt: "xs", children: /* @__PURE__ */ jsx(Box, { ref, pos: "relative", bg: "white", children: /* @__PURE__ */ jsxs(
+                  Grid,
+                  {
+                    className: "cr-block-output",
+                    style: { flex: 1, width: "100%", height: fullscreen ? "100vh" : "auto", margin: 0 },
+                    children: [
+                      /* @__PURE__ */ jsxs(Col, { span: 9, bg: "#272822", className: `cr-block-output-editor ${currentMode}`, children: [
+                        currentMode === "code" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsxs(Alert, { p: "xs", mb: "xs", icon: /* @__PURE__ */ jsx(IconInfoCircle, {}), color: "gray", children: [
+                            "You can access ",
+                            /* @__PURE__ */ jsx(Code, { children: "variables" }),
+                            ",",
+                            /* @__PURE__ */ jsx(Code, { children: "resp" }),
+                            ", and ",
+                            /* @__PURE__ */ jsx(Code, { children: "router" }),
+                            " in the scope of this generator."
+                          ] }),
+                          codeEditor,
+                          /* @__PURE__ */ jsx(Divider, { my: "sm", color: "gray.8" }),
+                          /* @__PURE__ */ jsxs(Group, { px: "xs", h: "fit-content", position: "right", children: [
+                            /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                variant: "light",
+                                color: "grey",
+                                onClick: toggle,
+                                leftIcon: fullscreen ? /* @__PURE__ */ jsx(IconMinimize, { size: rem(12) }) : /* @__PURE__ */ jsx(IconMaximize, { size: rem(12) }),
+                                compact: true,
+                                children: fullscreen ? "Minimize" : "Maximize"
+                              }
+                            ),
+                            executeButton
+                          ] })
+                        ] }),
+                        currentMode !== "code" && uiEditor
+                      ] }, "content-col"),
+                      /* @__PURE__ */ jsx(Col, { span: 3, style: { display: "flex", flexDirection: "column" }, children: blockPreview })
+                    ]
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(Tabs.Panel, { value: "Settings", pt: "xs", children: /* @__PURE__ */ jsx(
                   BlockSettings_default,
                   {
                     id,
@@ -8253,7 +8440,7 @@ function ConsumerMenu({ id }) {
     Menu,
     {
       position: "top",
-      transition: "pop",
+      transitionProps: { transition: "pop" },
       trigger: "hover",
       zIndex: 1001,
       children: [
@@ -8386,9 +8573,10 @@ function Block2({
   const executeButton = /* @__PURE__ */ jsx(
     Button,
     {
-      style: { minHeight: 40 },
       disabled: !isValid,
       onClick: () => onSave(true),
+      size: "sm",
+      compact: true,
       children: "Save & Execute"
     }
   );
@@ -8529,7 +8717,7 @@ function BlockElement({
     onClose: maybeCloseWithoutSaving,
     overflow: "inside",
     padding: theme.spacing.sm,
-    size: "90%"
+    size: "95%"
   };
   const hoverActions = {
     onMouseEnter: () => setHoverBlock(id),
@@ -8572,8 +8760,8 @@ function BlockElement({
               className: "cr-block-controls export-hidden",
               style: {
                 position: "absolute",
-                right: theme.spacing.xs / 2,
-                top: theme.spacing.xs / 2,
+                right: px(theme.spacing.xs) / 2,
+                top: px(theme.spacing.xs) / 2,
                 backgroundColor: theme.colors.gray[2],
                 borderRadius: theme.radius.sm
               },
@@ -8884,7 +9072,7 @@ function SectionEditor({
                     className: "cms-section-column",
                     style: {
                       flex: "1 1 100%",
-                      maxWidth: staticWidths.length ? Math.max(...staticWidths) : "none",
+                      maxWidth: staticWidths.length ? Math.max(...staticWidths) : "100%",
                       padding: site_default.column.padding
                     },
                     children: /* @__PURE__ */ jsx(Droppable, { droppableId: columnIndex, children: (provided, snapshot) => /* @__PURE__ */ jsxs(
@@ -8902,7 +9090,8 @@ function SectionEditor({
                           flexWrap: Object.values(column).find(
                             (item) => blocks[item.id]?.settings?.display === "inline"
                           ) ? "wrap" : "nowrap",
-                          height: "100%"
+                          height: "100%",
+                          maxWidth: "100%"
                         },
                         children: [
                           Object.values(column).sort((a, b) => orderSort(a, b, "blockrow")).map((item, rowIndex) => {
@@ -9049,10 +9238,7 @@ function InteractiveReport(props) {
   const sectionMap = useAppSelector(selectSectionRecords);
   const currentLocale = useAppSelector((state) => state.status.currentLocale);
   const [activeSection, setActiveSection] = useState(null);
-  const [sectionOrder, setSectionOrder] = useState(report.sections);
-  useEffect(() => {
-    setSectionOrder(report.sections);
-  }, [report.sections]);
+  const sectionOrder = useMemo(() => report.sections, [report.sections]);
   const maybeActivate = useCallback((sectionId) => {
     const onActivate = () => {
       setActiveSection(sectionId);
@@ -9071,6 +9257,7 @@ function InteractiveReport(props) {
     }
   }, [report.dimensions, previews]);
   const onDragEnd = useCallback((result) => {
+    console.log("----onDragEnd", result);
     if (!result.destination || result.source.index === result.destination.index)
       return;
     const id = Number.parseInt(result.draggableId, 10);
@@ -9079,12 +9266,10 @@ function InteractiveReport(props) {
     const newOrder = sectionOrder.slice();
     const changed = newOrder.splice(result.source.index, 1);
     newOrder.splice(result.destination.index, 0, ...changed);
-    setSectionOrder(newOrder);
     dispatch(actions_exports.updateEntity("section", { id, ordering })).then(() => {
       dispatch(actions_exports.readEntity("report", { id: report.id, include: true }));
     });
   }, [sectionMap, sectionOrder]);
-  console.log(sectionOrder);
   const droppableChild = useCallback((droppableProvided) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -11377,7 +11562,7 @@ function BespokeManager(options) {
     locale = localeDefault4,
     profilePrefix
   } = options;
-  const notifications = {
+  const notifications3 = {
     position: "bottom-center",
     ...options.notifications
   };
@@ -11389,7 +11574,10 @@ function BespokeManager(options) {
   function BespokeManagerPage() {
     return /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment, children: [
       /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: title }) }),
-      /* @__PURE__ */ jsx(MantineProvider, { inherit: false, children: /* @__PURE__ */ jsx(NotificationsProvider, { ...notifications, children: /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(BespokeManagerShell, { locale, profilePrefix }) }) }) })
+      /* @__PURE__ */ jsxs(MantineProvider, { inherit: false, children: [
+        /* @__PURE__ */ jsx(Notifications, { ...notifications3 }),
+        /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(BespokeManagerShell, { locale, profilePrefix }) })
+      ] })
     ] });
   }
 }
@@ -11568,14 +11756,18 @@ function MainLink({ item, disabled }) {
 // views/BespokeRenderer.tsx
 init_esm_shims();
 init_ResourceProvider();
-function BespokeRenderer({ pathSegmentsKey = "bespoke", buildTime }) {
+function BespokeRenderer({
+  pathSegmentsKey = "bespoke",
+  bespokeStyles,
+  buildTime
+}) {
   const loading = useInitialState(pathSegmentsKey);
   if (loading)
     return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
-  return /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", children: [
+  return /* @__PURE__ */ jsx(MantineProvider, { theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", children: [
     /* @__PURE__ */ jsx(Report_default, {}),
     /* @__PURE__ */ jsx("small", { children: buildTime })
-  ] });
+  ] }) });
 }
 
 export { Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, LoginButton_default as BespokeLoginBtn, BespokeManager, BespokeRenderer, Report_default as BespokeReport, Search_default as BespokeSearch, UserProvider_default as BespokeUserProvider, withPageRoleAuthRequired as BespokeWithPageRoleAuthRequired, CMS_ROLES, DialogProvider, actions_exports as actions, storeWrapper, useAppDispatch as useBespokeDispatch, useAppSelector as useBespokeSelector, useUser_default as useBespokeUser, useDialog };