@datawheel/bespoke 0.3.1 → 0.3.3

package/dist/index.js

@@ -17,11 +17,11 @@ import { Notifications, notifications } from '@mantine/notifications';
 import React, { forwardRef, createContext, useState, useCallback, useRef, useEffect, useMemo, useContext, memo, Fragment as Fragment$1, createElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, List, Tooltip, ActionIcon, Modal, Button, SegmentedControl, Select, MultiSelect, Center, Grid, Title, Radio, NumberInput, TextInput, Switch, Image, Accordion, Input, Box, Menu, Anchor, MantineProvider, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Card, Container, Loader, Alert, Burger, Collapse, Checkbox, Space, Code, Divider, Textarea, Paper, Autocomplete, Popover, Drawer, rem, Overlay, Header, px, Tabs, FileInput, SimpleGrid, HoverCard, CopyButton, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, Flex, packSx, useMantineTheme, List, Tooltip, ActionIcon, Modal, Button, SegmentedControl, Select, MultiSelect, Center, Grid, Title, Radio, NumberInput, TextInput, Switch, Image, Accordion, Input, Box, Menu, Anchor, MantineProvider, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Card, Container, Loader, Alert, Burger, Collapse, Checkbox, Space, Code, Divider, Textarea, Paper, Autocomplete, Popover, Drawer, rem, Overlay, Header, px, Tabs, FileInput, SimpleGrid, HoverCard, CopyButton, Col } from '@mantine/core';
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconInfoCircle, IconRefresh, IconPhotoFilled, IconSearch, IconPlus, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconAlignCenter, IconAlignRight, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconTrash, IconX, IconUserCircle, IconEdit, IconCircleDashed, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCircleX, IconFlag, IconFileAnalytics, IconHome, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconPolaroid, IconCircleMinus, IconTable, IconCamera, IconShare, IconCirclePlus, IconLogin, IconWorld, IconLock, IconBinaryTree, IconVariable, IconArrowRightCircle, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconExternalLink, IconDownload, IconTemplate, IconCode, IconPalette, IconLink, IconClipboardCheck, IconClipboardCopy, IconSettings, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconInfoCircle, IconRefresh, IconPhotoFilled, IconFileUpload, IconSearch, IconPlus, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconAlignCenter, IconAlignRight, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconTrash, IconX, IconUserCircle, IconEdit, IconCircleDashed, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCircleX, IconFlag, IconFileAnalytics, IconHome, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconPolaroid, IconCircleMinus, IconTable, IconCamera, IconShare, IconCirclePlus, IconLogin, IconWorld, IconLock, IconBinaryTree, IconVariable, IconArrowRightCircle, IconIndentIncrease, IconCodeDots, IconUpload, IconCodePlus, IconExternalLink, IconDownload, IconTemplate, IconCode, IconPalette, IconLink, IconClipboardCheck, IconClipboardCopy, IconSettings, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import { useMediaQuery, useClickOutside, useDisclosure, useDebouncedValue, useSetState, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
@@ -1930,6 +1930,9 @@ var init_statusSlice = __esm({
         setPreviews(state, action) {
           state.previews = action.payload;
         },
+        setCurrentLocale(state, action) {
+          state.currentLocale = action.payload;
+        },
         setSectionState(state, action) {
           state.sectionState = { ...state.sectionState, ...action.payload };
         },
@@ -2091,6 +2094,10 @@ var init_recordsSlice = __esm({
             } else if (req.type === "dimension") {
               const item = req.data;
               state.entities.report[item.report_id].dimensions.push(item.id);
+              state.entities.report[item.report_id].dimensions = recalculateOrder(
+                nextEntities.report[item.report_id].dimensions,
+                nextEntities.dimension
+              );
             } else if (req.type === "variant") {
               const item = req.data;
               state.entities.dimension[item.dimension_id].variants.push(item.id);
@@ -2497,6 +2504,7 @@ __export(actions_exports, {
   searchRegenerate: () => searchRegenerate,
   searchRole: () => searchRole,
   searchUser: () => searchUser,
+  setCurrentLocale: () => setCurrentLocale,
   setPreviews: () => setPreviews,
   setQueryParam: () => setQueryParam,
   setSectionState: () => setSectionState,
@@ -2715,7 +2723,7 @@ function revalidateReport(params) {
     return result.data;
   };
 }
-var setStatus, setPreviews, setSectionState, resetSectionState;
+var setStatus, setPreviews, setSectionState, resetSectionState, setCurrentLocale;
 var init_actions = __esm({
   "store/actions.ts"() {
     init_esm_shims();
@@ -2727,7 +2735,7 @@ var init_actions = __esm({
     init_variablesSlice();
     init_recordsSlice();
     init_recordsActions();
-    ({ setStatus, setPreviews, setSectionState, resetSectionState } = statusActions);
+    ({ setStatus, setPreviews, setSectionState, resetSectionState, setCurrentLocale } = statusActions);
   }
 });
 function ResourceProvider(props) {
@@ -2994,7 +3002,7 @@ var init_store = __esm({
     storeWrapper = createWrapper(storeFactory);
   }
 });
-function withFetcher(Component, useRef13) {
+function withFetcher(Component, useRef14) {
   const ComponentWithFetcher = (props) => {
     const {
       id,
@@ -3002,7 +3010,7 @@ function withFetcher(Component, useRef13) {
       skelWidth,
       ...otherProps
     } = props;
-    const ref = useRef13(id);
+    const ref = useRef14(id);
     if (ref.isUninitialized || ref.isFetching) {
       return /* @__PURE__ */ jsx(Skeleton, { width: skelWidth, height: skelHeight });
     }
@@ -3099,38 +3107,6 @@ var init_d3plusPropify = __esm({
     d3plusPropify_default = propify;
   }
 });
-
-// libs/viz/defaultConfig.ts
-var defaultConfig_default;
-var init_defaultConfig = __esm({
-  "libs/viz/defaultConfig.ts"() {
-    init_esm_shims();
-    defaultConfig_default = {
-      loadingHTML: `<div style="left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);">
-      <svg class="cp-viz-spinner" width="60px" height="60px" viewBox="0 0 317 317" xmlns="http://www.w3.org/2000/svg">
-        <path class="outer" d="M16.43 157.072c0 34.797 12.578 66.644 33.428 91.277l-11.144 11.141c-23.673-27.496-37.992-63.283-37.992-102.418 0-39.133 14.319-74.921 37.992-102.423l11.144 11.144c-20.85 24.63-33.428 56.481-33.428 91.279z"/>
-        <path class="outer" d="M157.793 15.708c34.798 0 66.648 12.58 91.28 33.427l11.143-11.144c-27.502-23.676-63.29-37.991-102.423-37.991-39.132 0-74.919 14.315-102.422 37.991l11.148 11.144c24.627-20.847 56.477-33.427 91.274-33.427"/>
-        <path class="outer" d="M299.159 157.072c0 34.797-12.578 66.644-33.43 91.277l11.145 11.141c23.674-27.496 37.992-63.283 37.992-102.418 0-39.133-14.318-74.921-37.992-102.423l-11.145 11.144c20.852 24.63 33.43 56.481 33.43 91.279"/>
-        <path class="outer" d="M157.793 298.432c-34.797 0-66.647-12.574-91.274-33.424l-11.148 11.138c27.503 23.682 63.29 37.997 102.422 37.997 39.133 0 74.921-14.315 102.423-37.997l-11.143-11.138c-24.632 20.85-56.482 33.424-91.28 33.424"/>
-        <path class="middle" d="M226.59 61.474l-7.889 13.659c24.997 18.61 41.184 48.382 41.184 81.94 0 33.555-16.187 63.329-41.184 81.936l7.889 13.664c29.674-21.394 49.004-56.23 49.004-95.6 0-39.373-19.33-74.21-49.004-95.599"/>
-        <path class="middle" d="M157.793 259.169c-52.398 0-95.553-39.485-101.399-90.317h-15.814c5.912 59.524 56.131 106.018 117.213 106.018 17.26 0 33.633-3.742 48.404-10.406l-7.893-13.672c-12.425 5.38-26.114 8.377-40.511 8.377"/>
-        <path class="middle" d="M157.793 54.976c14.397 0 28.086 2.993 40.511 8.371l7.893-13.667c-14.771-6.669-31.144-10.412-48.404-10.412-61.082 0-111.301 46.493-117.213 106.021h15.814c5.846-50.831 49.001-90.313 101.399-90.313"/>
-        <path class="inner" d="M95.371 164.193c-3.476-30.475 15.471-58.324 43.723-67.097l-1.804-15.842c-36.899 9.931-61.986 45.602-57.524 84.719 4.461 39.115 36.934 68.219 75.122 69.584l-1.806-15.838c-29.504-2.186-54.235-25.054-57.711-55.526"/>
-        <path class="inner" d="M162.504 94.425c29.508 2.185 54.235 25.053 57.711 55.529 3.476 30.469-15.466 58.319-43.724 67.096l1.806 15.834c36.898-9.927 61.986-45.598 57.525-84.712-4.461-39.117-36.936-68.223-75.125-69.588l1.807 15.841z"/>
-      </svg>
-      <strong>Loading</strong>
-      <sub style="bottom: 0; display: block; line-height: 1; margin-top: 5px;">
-        <a style="color: inherit;" href="https://www.datawheel.us/" target="_blank">
-          Built by Datawheel
-        </a>
-      </sub>
-    </div>`,
-      noDataHTML: `<div style="left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);">
-      <strong>No Data Available</strong>
-    </div>`
-    };
-  }
-});
 var ErrorBoundary;
 var init_ErrorBoundary = __esm({
   "views/ErrorBoundary.tsx"() {
@@ -3223,7 +3199,7 @@ function Viz(config) {
           linksFormat: vizProps.linksFormat,
           nodesFormat: vizProps.nodesFormat,
           topojsonFormat: vizProps.topojsonFormat,
-          config: { ...defaultConfig_default, ...vizConfig, sectionVariables: sectionVariablesStr }
+          config: { ...vizConfig, sectionVariables: sectionVariablesStr }
         },
         "viz-key"
       ) })
@@ -3238,7 +3214,6 @@ var init_Viz = __esm({
     init_d3plusPropify();
     init_varSwapRecursive();
     init_hooks();
-    init_defaultConfig();
     init_hooks();
     init_ErrorBoundary();
     vizTypes = {
@@ -3462,7 +3437,7 @@ function Viz2({
           linksFormat: vizProps.linksFormat,
           nodesFormat: vizProps.nodesFormat,
           topojsonFormat: vizProps.topojsonFormat,
-          config: { ...defaultConfig_default, ...vizConfig }
+          config: { ...vizConfig }
         },
         "viz-key"
       ) })
@@ -3475,7 +3450,6 @@ var init_Viz2 = __esm({
     init_esm_shims();
     init_varSwapRecursive();
     init_mortarEval();
-    init_defaultConfig();
     init_Graphic();
     init_HTML();
     init_Table();
@@ -4266,11 +4240,12 @@ function TitleIcon({
 }) {
   const [srcSVG, setSrcSVG] = useState(void 0);
   const iconPath = iconType === "custom" ? icon : `/api/cms/read/icons/${iconType}/icon.svg?name=${icon}`;
+  const isSVG = /^.*\.svg*$/.test(iconPath);
   useEffect(() => {
-    if (iconType === "custom" || icon.length) {
+    if (iconType === "custom" || isSVG) {
       axios.get(iconPath, { responseType: "text" }).then((resp) => resp.data).then(setSrcSVG).catch(() => void 0);
     }
-  }, [icon, iconType, iconPath]);
+  }, [iconType, isSVG, iconPath]);
   const ready = Boolean(srcSVG);
   return /* @__PURE__ */ jsx(Fragment, { children: iconType !== "none" && icon && icon !== "" && ready && /* @__PURE__ */ jsx(
     ThemeIcon,
@@ -4280,8 +4255,8 @@ function TitleIcon({
       radius: iconRadius,
       size: iconSize,
       p: parseInt(iconPadding),
-      dangerouslySetInnerHTML: srcSVG ? { __html: srcSVG } : void 0,
-      children: null
+      dangerouslySetInnerHTML: srcSVG && isSVG ? { __html: srcSVG } : void 0,
+      children: !isSVG ? /* @__PURE__ */ jsx(Image, { src: iconPath, alt: "Title Icon" }) : null
     }
   ) });
 }
@@ -4541,7 +4516,7 @@ function TitleView({
   const comparison = useComparison();
   const previews = useAppSelector((state) => state.status.previews);
   const previewNames = asComparison ? comparison.status.previews : previews;
-  previewNames.map((p) => p.name).join(" | ");
+  const memberName = previewNames.map((p) => p.name).join(" | ");
   const titleElement = /* @__PURE__ */ jsxs(Group, { children: [
     /* @__PURE__ */ jsx(
       TitleIcon,
@@ -4573,7 +4548,7 @@ function TitleView({
         tooltip && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { label: tooltipHTML, withArrow: true, withinPortal: true, children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconInfoCircle, {}) }) }) }, "tooltip"),
         /* @__PURE__ */ jsxs("div", { children: [
           finalElement,
-          displayName && /* @__PURE__ */ jsx(Text, { className: "bespoke-comparison-title", children: reportName })
+          displayName && /* @__PURE__ */ jsx(Text, { className: "bespoke-comparison-title", children: memberName })
         ] })
       ]
     }
@@ -4969,7 +4944,7 @@ var DesktopNav = ({ contentOutline, showIcons }) => {
         listStyleType: "none"
       }),
       children: contentOutline?.map(
-        (node) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsxs(Menu, { trigger: "hover", openDelay: 100, closeDelay: 400, children: [
+        (node) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsxs(Menu, { trigger: "hover", openDelay: 100, closeDelay: 200, children: [
           /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Anchor, { href: `#bespoke-title-${node.id}`, children: /* @__PURE__ */ jsxs(Group, { spacing: "sm", children: [
             showIcons && /* @__PURE__ */ jsx(TitleIcon, { ...node.iconProps, iconSize: "sm" }),
             /* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: node.label } })
@@ -5770,6 +5745,7 @@ function TitleUI({ onChange, simpleState }) {
   const [iconSize, setIconSize] = useState(simpleState?.iconSize ?? "md");
   const [iconRadius, setIconRadius] = useState(simpleState?.iconRadius ?? "md");
   const [iconPadding, setIconPadding] = useState(simpleState?.iconPadding ?? "1");
+  const inputPathRef = useRef(null);
   const isNoneOrCustom = [TITLE_ICON_TYPES.none.value, TITLE_ICON_TYPES.custom.value].includes(iconType);
   const IconItem = useMemo(() => forwardRef(
     ({ value, ...others }, ref) => {
@@ -5897,17 +5873,31 @@ function TitleUI({ onChange, simpleState }) {
             )
           }
         ),
-        iconType === TITLE_ICON_TYPES.custom.value && /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            placeholder: "e.g '/image{{id1}}.png' or 'http://site/image.png'",
-            label: "Enter an icon path",
-            required: true,
-            value: icon,
-            description: "Add an absolute or a relative path url",
-            onChange: (e) => setIcon(e.currentTarget.value)
-          }
-        ),
+        iconType === TITLE_ICON_TYPES.custom.value && /* @__PURE__ */ jsxs(Flex, { align: "flex-end", children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              ref: inputPathRef,
+              placeholder: "e.g '/image{{id1}}.png' or 'http://site/image.png'",
+              label: "Enter an icon path",
+              required: true,
+              defaultValue: icon,
+              description: "Add an absolute or a relative path url",
+              onBlur: (e) => setIcon(e.currentTarget.value),
+              sx: { flexGrow: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              maw: 36,
+              size: 36,
+              onClick: () => inputPathRef ? setIcon(inputPathRef.current.value) : void 0,
+              sx: { flexGrow: 0 },
+              children: /* @__PURE__ */ jsx(IconFileUpload, {})
+            }
+          )
+        ] }),
         iconType !== TITLE_ICON_TYPES.none.value && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             Select,
@@ -6532,6 +6522,26 @@ function stringifyPreview(member) {
   const variant = "variant_slug" in member ? member.variant_slug : member.variant.slug;
   return `${variant}/${member.slug}`;
 }
+
+// hooks/useCurrentLocale.ts
+init_esm_shims();
+init_store2();
+function useCurrentLocale() {
+  const dispatch = useAppDispatch();
+  const { router, setSearchParam } = useManagerLocation();
+  const { asPath } = router;
+  const [, search] = asPath.split("?");
+  const query = search ? JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}') : {};
+  const { currentLocale, locales: locales4 } = useAppSelector((state) => state.status);
+  const paramLocale = query.locale || "";
+  useEffect(() => {
+    console.log();
+    if (paramLocale && paramLocale !== "" && locales4.includes(paramLocale) && paramLocale !== currentLocale) {
+      dispatch(actions_exports.setCurrentLocale(paramLocale));
+    }
+  }, [paramLocale]);
+  return currentLocale;
+}
 function NavPreview({ headings, settings }) {
   const { min = "1", max = "6", icons = "yes" } = settings;
   const contentOutline = useContentOutline(parseInt(min, 10), parseInt(max, 10), headings);
@@ -6785,7 +6795,7 @@ function Block({ blockId, active = true, asComparison = false }) {
     asComparison && comparison.active ? comparison?.variables.attributes : void 0
   );
   const blockContent = getBlockContent(block, locale);
-  const formatterFunctions = useFormatterFunctionsForLocale();
+  const formatterFunctions = useFormatterFunctionsForLocale(locale);
   const blockContext = {
     variables,
     query,
@@ -7920,6 +7930,10 @@ var EditButton = ({ sectionId, onActivate }) => {
   const { activeEntity } = useActiveEntity();
   const { handlers } = useSidebar("settings");
   const active = activeEntity.type === "section" && activeEntity.id === sectionId;
+  const openAndActivate = () => {
+    onActivate();
+    handlers.open();
+  };
   return active ? /* @__PURE__ */ jsx(
     Button,
     {
@@ -7931,7 +7945,7 @@ var EditButton = ({ sectionId, onActivate }) => {
       compact: true,
       children: "Edit"
     }
-  ) : /* @__PURE__ */ jsx(ActionIcon, { variant: "transparent", onClick: onActivate, children: /* @__PURE__ */ jsx(IconPencil, { size: 18 }) });
+  ) : /* @__PURE__ */ jsx(ActionIcon, { variant: "transparent", onClick: openAndActivate, children: /* @__PURE__ */ jsx(IconPencil, { size: 18 }) });
 };
 function SectionMenu({ sectionId, onActivate }) {
   return /* @__PURE__ */ jsxs(Group, { spacing: 0, children: [
@@ -7947,6 +7961,32 @@ init_cms();
 // components/sections/SectionColumns.tsx
 init_esm_shims();
 init_store2();
+
+// components/builder/hooks/use-entity-settings.ts
+init_esm_shims();
+init_store2();
+function useEntitySettingsFactory(entityType, entityId) {
+  const entity = useAppSelector((store) => entityId ? store.records.entities[entityType][entityId] : null);
+  const storeSettings = entity?.settings;
+  const [settingsState, setSettingsState] = useSetState(entity?.settings || {});
+  const dispatch = useAppDispatch();
+  const handleChange = useCallback((field, value) => {
+    if (entity) {
+      setSettingsState({ [field]: value });
+      dispatch(actions_exports.updateEntity(entityType, {
+        id: entity.id,
+        settings: { ...entity.settings, [field]: value }
+      }));
+    }
+  }, [dispatch, entity]);
+  useEffect(() => {
+    if (storeSettings)
+      setSettingsState(storeSettings);
+  }, [storeSettings, setSettingsState]);
+  return { settings: settingsState, updateSettings: handleChange };
+}
+var useSectionSettings = (sectionId) => useEntitySettingsFactory("section", sectionId);
+var useReportSettings = (reportId) => useEntitySettingsFactory("report", reportId);
 function SectionColumnsWrapper({
   children,
   containerProps
@@ -7967,11 +8007,11 @@ function SectionColumnsWrapper({
   );
 }
 var SectionColumn = React.forwardRef(
-  function SectionColumn2({ children, column, columnSettings = {}, sx = {}, ...rest }, ref) {
+  function SectionColumn2({ children, column, basis, 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})`);
+    const width = columnSettings?.width ? `${columnSettings.width}px` : basis;
+    const maxWidth = columnSettings?.width ? `${columnSettings?.width}px` : "100&";
+    const computedMaxWidth = columnSettings?.full ? "100%" : maxWidth;
     return /* @__PURE__ */ jsx(
       Flex,
       {
@@ -7980,11 +8020,18 @@ var SectionColumn = React.forwardRef(
         align: "flex-start",
         direction: hasInline ? "row" : "column",
         wrap: hasInline ? "wrap" : "nowrap",
-        maw: width && !mediumScreen ? `${width}px` : "none",
-        miw: mediumScreen ? 300 : 400,
+        maw: { base: "100%", md: computedMaxWidth },
+        miw: { base: "none", md: 300 },
         p: 0,
         pos: "relative",
-        sx: [{ flexGrow: 1, flexShrink: 1 }, ...packSx(sx)],
+        sx: [
+          {
+            flexGrow: 1,
+            flexShrink: columnSettings?.full ? 0 : 1,
+            flexBasis: columnSettings?.full ? "100%" : width
+          },
+          ...packSx(sx)
+        ],
         ...rest,
         children
       }
@@ -7994,24 +8041,22 @@ var SectionColumn = React.forwardRef(
 var ResizeColumnInput = ({ sectionId, columnIndex }) => {
   const dispatch = useAppDispatch();
   const section = useSectionRef(sectionId).data;
+  const { settings, updateSettings } = useSectionSettings(sectionId);
   if (!section)
     return null;
-  const { columnSettings = {} } = section.settings;
+  const { columnSettings = {} } = 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)
-            }
+      updateSettings(
+        "columnSettings",
+        {
+          ...columnSettings,
+          [columnIndex]: {
+            width: parseInt(e.target.value, 10)
           }
         }
-      }));
+      );
     }
   };
   const handleReset = () => {
@@ -8030,34 +8075,51 @@ var ResizeColumnInput = ({ sectionId, columnIndex }) => {
       }));
     }
   };
-  return /* @__PURE__ */ jsx(
-    Box,
+  const handleFullWidthChange = (event) => {
+    updateSettings("columnSettings", {
+      ...columnSettings,
+      [columnIndex]: {
+        ...columnSettings[columnIndex] || {},
+        full: event.currentTarget.checked
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    Group,
     {
       className: "bespoke-resize-col",
       pos: "absolute",
       top: -12,
       left: "50%",
       sx: {
+        borderRadius: "4px",
         transform: "translate(-50%, 0%)",
         zIndex: 20
       },
-      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 })
-        }
-      )
+      py: 0,
+      px: "xs",
+      maw: 180,
+      bg: "white",
+      noWrap: true,
+      children: [
+        /* @__PURE__ */ jsx(Checkbox, { label: "100%", size: "xs", onChange: handleFullWidthChange, checked: columnSettings[columnIndex]?.full }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "auto",
+            w: "fit-content",
+            miw: "none",
+            variant: "filled",
+            type: "number",
+            value: width || "auto",
+            maw: 110,
+            onChange: handleChange,
+            size: "xs",
+            p: 0,
+            rightSection: /* @__PURE__ */ jsx(IconX, { onClick: handleReset, size: 8 })
+          }
+        )
+      ]
     }
   );
 };
@@ -8565,8 +8627,8 @@ function Section({ section }) {
     const blocks = sectionBlocks.reduce((blocks2, block) => ({ ...blocks2, [block.id]: block }), {});
     console.log("blocks", blocks);
     sectionColumns = [
-      /* @__PURE__ */ jsx(SectionColumn, { column: blocks, sx: { flexBasis: "50%" }, children: getBlockRenderers(Object.values(sectionBlocks)) }, "original"),
-      /* @__PURE__ */ jsx(SectionColumn, { column: blocks, sx: { flexBasis: "50%" }, children: getBlockRenderers(Object.values(sectionBlocks), true) }, "comparison")
+      /* @__PURE__ */ jsx(SectionColumn, { column: blocks, basis: "50%", children: getBlockRenderers(Object.values(sectionBlocks)) }, "original"),
+      /* @__PURE__ */ jsx(SectionColumn, { column: blocks, basis: "50%", children: getBlockRenderers(Object.values(sectionBlocks), true) }, "comparison")
       // TODO: maybe add more comparisons?
     ];
   } else {
@@ -8583,7 +8645,7 @@ function Section({ section }) {
         {
           column,
           columnSettings,
-          sx: { flexBasis: `${100 / colsQty}%`, flexShrink: 1 },
+          basis: `calc(${100 / colsQty}% - (10px * ${colsQty}))`,
           children: columnBlocks.map((item) => {
             if (!item.id || !status[item.id]?.allowed && item.type !== BLOCK_TYPES.NAV)
               return null;
@@ -8600,7 +8662,7 @@ function Section({ section }) {
             return /* @__PURE__ */ jsx(
               Box,
               {
-                className: "bespoke-Block-wrapper",
+                className: `bespoke-Block-wrapper bespoke-${item.type}-wrapper`,
                 id: `bespoke-Block-${item.id}`,
                 sx: blockStyles,
                 py: site_default.block.padding,
@@ -8627,7 +8689,7 @@ function Section({ section }) {
         {
           containerProps: {
             gap: sectionSettings2.columnGutter || "md",
-            wrap: { base: "wrap", md: "nowrap" },
+            wrap: comparison.active ? "nowrap" : "wrap",
             sx: { zIndex: 20 }
           },
           children: sectionColumns
@@ -9918,7 +9980,7 @@ function DimensionAutocomplete({ id, locale, onSelect, initialSelection = void 0
         onChange: onChangeVariant
       }
     ),
-    currentMember && !searchMode && /* @__PURE__ */ jsx("div", { style: { maxWidth: 200 }, children: /* @__PURE__ */ jsx(
+    currentMember && !searchMode && /* @__PURE__ */ jsx("div", { style: { maxWidth: 100 }, children: /* @__PURE__ */ jsx(
       Badge,
       {
         variant: "filled",
@@ -9978,7 +10040,6 @@ function HeaderLayout(props) {
 }
 
 // components/builder/CMSHeader.tsx
-init_statusSlice();
 init_hooks();
 function CMSHeader(props) {
   const { report: currentReport } = props;
@@ -9991,7 +10052,7 @@ function CMSHeader(props) {
   const reportId = Number.parseInt(location.params[0]);
   const reportRef = useReportRef(reportId);
   const profilePrefix = useProfilePrefix();
-  const currentLocale = useAppSelector((state) => state.status.currentLocale);
+  const currentLocale = useCurrentLocale();
   const localeDefault10 = useAppSelector((state) => state.status.localeDefault);
   const localeOptions = useAppSelector(selectLocaleOptions);
   const previewsFromState = useAppSelector((state) => state.status.previews);
@@ -10005,13 +10066,12 @@ function CMSHeader(props) {
   const showPreviewSelector = useMemo(() => {
     return dimensions.length > 0;
   }, [dimensions]);
-  const [previewMembers, setPreviewMembers] = useState([]);
   const [initialFavorites, setInitialFavorites] = useState([]);
-  const previewPath = previewsFromState.reduce((acc, member) => {
+  const previewPath = previewsFromState.filter((member) => member.variant_slug).reduce((acc, member) => {
     return acc.concat([member.variant_slug, member.slug]);
   }, []);
   const localePrefix = currentLocale === localeDefault10 ? "" : `/${currentLocale}`;
-  const realPath = `${localePrefix}${profilePrefix}/${previewPath.join("/")}`;
+  const realPath = previewPath.length ? `${localePrefix}${profilePrefix}/${previewPath.join("/")}` : "";
   const onSelectPreview = (previewMember) => {
     const newPreviews = currentReport.dimensions.map((dId) => {
       let member;
@@ -10019,7 +10079,7 @@ function CMSHeader(props) {
         if (previewMember.dimension_id === dId) {
           member = previewMember;
         } else {
-          const anotherMember = previewMembers.find((m) => m ? m.dimension_id === dId : false);
+          const anotherMember = previewsFromState.find((m) => m ? m.dimension_id === dId : false);
           if (anotherMember) {
             member = anotherMember;
           }
@@ -10027,7 +10087,22 @@ function CMSHeader(props) {
       }
       return member;
     });
-    setPreviewMembers(newPreviews);
+    dispatch(actions_exports.recalculateVariables(resource, {
+      previews: newPreviews.filter((preview) => preview).map((preview) => ({
+        ...preview,
+        report_name: preview.report?.name || preview.report_name,
+        report_id: preview.report?.id || preview.report_id,
+        dimension_id: preview.dimension?.id || preview.dimension_id,
+        dimension_name: preview.dimension?.name || preview.dimension_name,
+        variant_id: preview.variant?.id || preview.variant_id,
+        variant_name: preview.variant?.name || preview.variant_name,
+        variant_slug: preview.variant?.slug || preview.variant_slug
+      }))
+    }));
+  };
+  const onSelectLocale = (previewLocale) => {
+    location.setSearchParam("locale", previewLocale);
+    dispatch(actions_exports.recalculateVariables(resource, { previews: [] }));
   };
   const maybeRevalidateUrl = useCallback(async () => {
     try {
@@ -10059,20 +10134,15 @@ function CMSHeader(props) {
     }
   }, [realPath]);
   useEffect(() => {
-    setPreviewMembers([]);
+    dispatch(actions_exports.recalculateVariables(resource, {
+      previews: []
+    }));
   }, [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, {
-        previews: previewMembers
-      }));
-    }
-  }, [previewMembers]);
   useEffect(() => {
     if (castedUser) {
       if (castedUser.bespoke_app_metadata && castedUser.bespoke_app_metadata.reports && Array.isArray(castedUser.bespoke_app_metadata.reports)) {
@@ -10082,12 +10152,12 @@ function CMSHeader(props) {
         }
       }
     }
-  }, [castedUser, id, previewMembers]);
+  }, [castedUser, id, previewsFromState]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       HeaderLayout,
       {
-        center: /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
+        center: /* @__PURE__ */ jsxs(Group, { spacing: 4, children: [
           /* @__PURE__ */ jsx(
             ActionIcon,
             {
@@ -10103,13 +10173,11 @@ function CMSHeader(props) {
           /* @__PURE__ */ jsx(
             Select,
             {
-              style: { width: 60 },
+              w: 60,
               size: "xs",
               data: localeOptions,
               value: currentLocale,
-              onChange: (value) => dispatch(
-                statusActions.setStatus({ currentLocale: value || localeDefault10, previews: [] })
-              )
+              onChange: onSelectLocale
             }
           ),
           showPreviewSelector && dimensions.map((dId, ix) => /* @__PURE__ */ jsx(
@@ -10133,6 +10201,7 @@ function CMSHeader(props) {
                 bg: "#E9ECEF",
                 title: "Open report in new tab",
                 color: "dark",
+                disabled: !realPath,
                 children: /* @__PURE__ */ jsx(IconEye, { size: 20 })
               }
             ) }),
@@ -11777,32 +11846,6 @@ function SectionHeader({
 // components/sections/Section.tsx
 init_cms();
 init_hooks();
-
-// components/builder/hooks/use-entity-settings.ts
-init_esm_shims();
-init_store2();
-function useEntitySettingsFactory(entityType, entityId) {
-  const entity = useAppSelector((store) => entityId ? store.records.entities[entityType][entityId] : null);
-  const storeSettings = entity?.settings;
-  const [settingsState, setSettingsState] = useSetState(entity?.settings || {});
-  const dispatch = useAppDispatch();
-  const handleChange = useCallback((field, value) => {
-    if (entity) {
-      setSettingsState({ [field]: value });
-      dispatch(actions_exports.updateEntity(entityType, {
-        id: entity.id,
-        settings: { ...entity.settings, [field]: value }
-      }));
-    }
-  }, [dispatch, entity]);
-  useEffect(() => {
-    if (storeSettings)
-      setSettingsState(storeSettings);
-  }, [storeSettings, setSettingsState]);
-  return { settings: settingsState, updateSettings: handleChange };
-}
-var useSectionSettings = (sectionId) => useEntitySettingsFactory("section", sectionId);
-var useReportSettings = (reportId) => useEntitySettingsFactory("report", reportId);
 var blockTypes = Object.values(BLOCK_TYPES);
 var CreateBlockButton = ({ columns, columnIndex, section }) => {
   const dispatch = useAppDispatch();
@@ -12054,7 +12097,7 @@ function SectionEditor({
                       p: section.settings.margin || "md",
                       style: { zIndex: 2 },
                       gap: section.settings.columnGutter || "md",
-                      wrap: { base: "wrap", md: "nowrap" }
+                      wrap: "wrap"
                     },
                     children: /* @__PURE__ */ jsxs(DragDropContext, { onDragEnd, onDragStart, children: [
                       orderedCols.map((columnIndex) => {
@@ -12065,9 +12108,9 @@ function SectionEditor({
                             column: columns[columnIndex],
                             columnSettings: columnSettings[columnIndex],
                             ref: provided.innerRef,
+                            basis: `calc(${100 / columnsQty}% - (10px * ${columnsQty}))`,
                             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": {
@@ -12315,15 +12358,23 @@ var SectionItem = forwardRef(
                   style: { flexShrink: 0 }
                 }
               ),
-              edit ? /* @__PURE__ */ jsx(NameEditor, { section, onEnd: saveAndClose }) : /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: "sm",
-                  c: sectionColor,
-                  sx: { whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" },
-                  children: name
-                }
-              )
+              edit ? /* @__PURE__ */ jsx(NameEditor, { section, onEnd: saveAndClose }) : /* @__PURE__ */ jsxs(Group, { spacing: 4, align: "flex-end", children: [
+                /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, color: "gray.5", span: true, children: [
+                  section.id,
+                  " -"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size: "sm",
+                    c: sectionColor,
+                    maw: 220,
+                    sx: { whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" },
+                    span: true,
+                    children: name
+                  }
+                )
+              ] })
             ] }),
             /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
               section.settings.hidden && /* @__PURE__ */ jsx(IconEyeOff, { size: "0.8rem", color: theme.colors["red"][3] }),
@@ -13068,7 +13119,6 @@ function InteractiveReport(props) {
   const maybeActivate = useCallback((sectionId) => {
     const onActivate = () => {
       selectEntity({ type: "section", id: sectionId });
-      settingsSidebar.handlers.open();
       dispatch(recalculateVariables(resource, { sid: sectionId }));
     };
     if (previews.length < report.dimensions.length) {
@@ -13132,7 +13182,9 @@ function InteractiveReport(props) {
       ]
     }
   ), [sectionOrder, activeEntity.id, maybeActivate]);
-  const scrollContainerWidth = 50 + (toolsSidebar.opened ? 350 : 50) + (settingsSidebar.opened ? 350 : 50);
+  const settingsVisible = Boolean(activeEntity.id);
+  const settingsWidthPlaceholder = settingsVisible ? 50 : 0;
+  const scrollContainerWidth = 50 + (toolsSidebar.opened ? 350 : 50) + (settingsSidebar.opened ? 350 : settingsWidthPlaceholder);
   return /* @__PURE__ */ jsxs(Flex, { h: "100vh", children: [
     /* @__PURE__ */ jsx(ToolsSidebar, { scrollContainer: mainContainer }),
     /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 1 }, pos: "relative", children: [
@@ -13143,6 +13195,11 @@ function InteractiveReport(props) {
           w: `calc(100vw - ${scrollContainerWidth}px)`,
           viewportRef: mainContainer,
           h: "calc(100vh - 50px)",
+          styles: {
+            scrollbar: {
+              zIndex: 9999
+            }
+          },
           offsetScrollbars: true,
           children: /* @__PURE__ */ jsxs(Stack, { styles: { backgroundColor: theme.colors.gray[2] }, spacing: 0, children: [
             /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconFlag, {}), children: [

package/dist/server.js

@@ -1548,20 +1548,26 @@ function readMemberFactory(db) {
       });
       whereClause.content_id = entities.map((item) => item.content_id);
     } else if (mode === "slugs") {
-      const entities = await Search.findAll({
+      const queries = params.slugs.map((item) => Search.findAll({
         attributes: ["content_id"],
         where: {
-          slug: params.slugs.map((item) => item.memberSlug)
+          slug: item.memberSlug
         },
         include: {
           association: "variant",
           attributes: ["id", "name", "slug"],
           required: true,
           where: {
-            slug: params.slugs.map((item) => item.variantSlug)
+            slug: item.variantSlug
           }
         }
-      });
+      }));
+      const entities = await Promise.all(queries).then((results) => results.reduce(
+        (acc, items) => {
+          return acc.concat(items);
+        },
+        []
+      ));
       whereClause.content_id = entities.map((item) => item.content_id);
     } else if (mode === "related") {
       const levelWhereClause = () => {
@@ -2015,7 +2021,8 @@ var blockQuery = {
 var dimensionQuery = {
   include: [
     { association: "variants", separate: true }
-  ]
+  ],
+  order: [["ordering", "ASC"]]
 };
 var sectionQuery = {
   include: [
@@ -2226,7 +2233,13 @@ function dbReportFactory(db) {
     include,
     locales: locales9 = reportLocales
   } = {}) {
-    const idList = id == null ? [] : [].concat(id);
+    const allIdsList = id == null ? [] : [].concat(id);
+    const idList = allIdsList.reduce((uniques, currentValue) => {
+      if (!uniques.includes(currentValue)) {
+        uniques.push(currentValue);
+      }
+      return uniques;
+    }, []);
     const entities = await Report.findAll({
       where: idList.length > 0 ? { id: idList } : void 0,
       include: include ? reportQuery.include : void 0
@@ -3872,6 +3885,7 @@ __export(actions_exports, {
   searchRegenerate: () => searchRegenerate,
   searchRole: () => searchRole,
   searchUser: () => searchUser,
+  setCurrentLocale: () => setCurrentLocale,
   setPreviews: () => setPreviews,
   setQueryParam: () => setQueryParam,
   setSectionState: () => setSectionState,
@@ -4949,6 +4963,9 @@ var statusSlice = createSlice({
     setPreviews(state, action) {
       state.previews = action.payload;
     },
+    setCurrentLocale(state, action) {
+      state.currentLocale = action.payload;
+    },
     setSectionState(state, action) {
       state.sectionState = { ...state.sectionState, ...action.payload };
     },
@@ -5080,6 +5097,10 @@ var recordsSlice = createSlice({
         } else if (req.type === "dimension") {
           const item = req.data;
           state.entities.report[item.report_id].dimensions.push(item.id);
+          state.entities.report[item.report_id].dimensions = recalculateOrder(
+            nextEntities.report[item.report_id].dimensions,
+            nextEntities.dimension
+          );
         } else if (req.type === "variant") {
           const item = req.data;
           state.entities.dimension[item.dimension_id].variants.push(item.id);
@@ -5434,7 +5455,7 @@ function keyMakerDelete(entity, params) {
 }
 
 // store/actions.ts
-var { setStatus, setPreviews, setSectionState, resetSectionState } = statusActions;
+var { setStatus, setPreviews, setSectionState, resetSectionState, setCurrentLocale } = statusActions;
 function variantValidateSlug(dimension, slug) {
   return async (_, __, api) => {
     const result = await api.validateVariantSlug({ dimension, slug });
@@ -5805,7 +5826,7 @@ function BespokeRendererStaticProps(options) {
         ]);
         const state = store.getState();
         const formatterList = selectFormatterList(state);
-        const formatters = funcifyFormattersByLocale(formatterList, localeDefault9);
+        const formatters = funcifyFormattersByLocale(formatterList, locale);
         const sectionList = selectSectionList(state);
         const blockRecords = selectBlockRecords(state);
         const publicBlockRecords = { ...blockRecords };

package/package.json

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