@datawheel/bespoke 0.6.0-rc.9 → 0.7.0-rc.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Group, Stack, Text, useMantineTheme, List, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Flex, packSx, Menu, Card, Center, Space, Badge, Title, Tabs, TextInput, Code, Loader, Divider, SegmentedControl, Select, ActionIcon, Textarea, Paper, Alert, Container, Grid, Tooltip, createStyles, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, NumberInput, Autocomplete, Notification, Image, Accordion, Header, px, FileInput, SimpleGrid, Burger, Collapse, CopyButton, HoverCard, Breadcrumbs, Col } from '@mantine/core';
+import { Group, Stack, Text, useMantineTheme, List, Modal, Button, Input, MantineProvider, Box, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Flex, packSx, Menu, Card, Center, Space, Badge, Title, Tabs, TextInput, Code, NumberInput, Loader, Divider, SegmentedControl, Select, ActionIcon, Textarea, Paper, Alert, Container, Grid, Tooltip, createStyles, MultiSelect, Anchor, Checkbox, MediaQuery, Affix, rem, Popover, Radio, Switch, Drawer, Overlay, Autocomplete, Notification, Image, Accordion, Header, px, Pagination, FileInput, SimpleGrid, Burger, Collapse, CopyButton, HoverCard, Breadcrumbs, Col } from '@mantine/core';
 import React, { forwardRef, useState, useCallback, useRef, useEffect, createContext, useContext, useMemo, Fragment as Fragment$1, createElement, memo, useImperativeHandle } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
@@ -20,13 +20,12 @@ import { createSlice, configureStore } from '@reduxjs/toolkit';
 import { HYDRATE, createWrapper } from 'next-redux-wrapper';
 import { Notifications, notifications } from '@mantine/notifications';
 import { useDispatch, useSelector } from 'react-redux';
+import { useDebouncedValue, useClickOutside, useDisclosure, useSetState, useUncontrolled, useHotkeys, useListState, randomId, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
 import Router, { useRouter } from 'next/router';
-import { useClickOutside, useDisclosure, useDebouncedValue, useSetState, useUncontrolled, useHotkeys, useListState, randomId, getHotkeyHandler, useMediaQuery, useMergedRef, useFullscreen } from '@mantine/hooks';
-import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCheck, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconLanguageOff, IconTriangleInvertedFilled, IconCode, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { IconDice, IconBoxMultiple, IconEyeOff, IconChevronDown, IconBallpen, IconDatabase, IconMathFunction, IconUsers, IconLogout, IconHeading, IconApi, IconPercentage, IconChartBar, IconAlignLeft, IconSelector, IconPhoto, IconTable, IconUserCircle, IconEdit, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconTrash, IconCircleX, IconPlus, IconFileAnalytics, IconHome, IconSearch, IconX, IconRefresh, IconDownload, IconCircleDashed, IconLanguage, IconSettingsFilled, IconEye, IconWorldUpload, IconBraces, IconClockHour2, IconAugmentedReality, IconGitMerge, IconGripHorizontal, IconChevronLeft, IconChevronRight, IconListCheck, IconPolaroid, IconCircleMinus, IconInfoCircle, IconGripVertical, IconCamera, IconShare, IconQuestionMark, IconCirclePlus, IconLogin, IconWorld, IconLock, IconCopy, IconBinaryTree, IconVariable, IconArrowRightCircle, IconPhotoFilled, IconFileUpload, IconIndentIncrease, IconCodeDots, IconUpload, IconCheck, IconCodePlus, IconLink, IconSparkles, IconClipboardCheck, IconClipboardCopy, IconExternalLink, IconFileTypeCsv, IconFileTypeJs, IconFileTypeXls, IconTemplate, IconCode, IconPalette, IconBold, IconItalic, IconUnderline, IconAlignCenter, IconAlignRight, IconAlignJustified, IconArrowBackUp, IconArrowForwardUp, IconLanguageOff, IconTriangleInvertedFilled, IconDeviceFloppy, IconSettings, IconMinimize, IconMaximize, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import Link from 'next/link';
 import parse2, { Element as Element$1, domToReact, Text as Text$1 } from 'html-react-parser';
 import { UserProvider, withPageAuthRequired, useUser } from '@auth0/nextjs-auth0/client';
-import { initFrameAndPoll, Framer } from '@newswire/frames';
 import { MantineReactTable } from 'mantine-react-table';
 import { dataConcat, dataLoad } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
@@ -51,9 +50,9 @@ import { Prism } from '@mantine/prism';
 import slugifyFn from 'slugify';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
-import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
 import { select } from 'd3-selection';
-import { toPng } from 'html-to-image';
+import { saveElement } from 'd3plus-export';
+import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, LinkedinShareButton, LinkedinIcon, RedditShareButton, RedditIcon, EmailShareButton, EmailIcon } from 'react-share';
 import Head from 'next/head';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { format } from 'pretty-format';
@@ -162,107 +161,6 @@ var init_Dialog = __esm({
     DialogContext = React.createContext(void 0);
   }
 });
-function ExploreFilters({ metadata, onFilter, initialReportId, initialVariantId, translations }) {
-  const [showSelectors, setShowSelectors] = useState(false);
-  const [selectors, setSelectors] = useState([]);
-  const [filters, setFilters] = useState({ profile: void 0, variant: void 0 });
-  const [selectedProfile, setSelectedProfile] = useState();
-  const [selectedVariant, setSelectedVariant] = useState();
-  const allMember = { id: void 0, name: translations["filters_all"] };
-  const getVariantsCombinatory = (variantsArrays) => {
-    const combinatory = variantsArrays.reduce((a2, b2) => a2.reduce((r2, v2) => r2.concat(b2.map((w2) => [].concat(v2, w2))), [])).map((combination) => {
-      if (!Array.isArray(combination))
-        return combination;
-      return {
-        id: combination.map((c2) => c2.id).join(","),
-        name: combination.map((c2) => c2.name).join(" / ")
-      };
-    });
-    return [allMember, ...combinatory];
-  };
-  const onClickProfile = (profile) => {
-    if (profile !== selectedProfile) {
-      setSelectedProfile(profile);
-      setSelectedVariant(allMember);
-    }
-  };
-  const onClickVariant = (variant) => {
-    if (variant !== selectedVariant) {
-      setSelectedVariant(variant);
-    }
-  };
-  useEffect(() => {
-    const newFilters = {};
-    if (selectedProfile) {
-      newFilters.profile = selectedProfile.id;
-    }
-    if (selectedVariant) {
-      newFilters.variant = selectedVariant.id;
-    }
-    setFilters({ ...filters, ...newFilters });
-  }, [selectedProfile, selectedVariant]);
-  useEffect(() => {
-    onFilter(filters);
-  }, [filters]);
-  useEffect(() => {
-    if (metadata) {
-      let worthShowSelectors = false;
-      const selectorStructure = metadata.filter((profile) => profile.dimensions.length > 0).map((profile) => {
-        const combinatory = getVariantsCombinatory(profile.dimensions.map((d2) => d2.variants));
-        if (!worthShowSelectors && combinatory && combinatory.length > 2) {
-          worthShowSelectors = true;
-        }
-        return {
-          id: profile.id,
-          name: profile.dimensions.map((d2) => d2.name).join(" / "),
-          variants: combinatory
-        };
-      });
-      setSelectors([allMember, ...selectorStructure]);
-      setShowSelectors(worthShowSelectors ? true : selectorStructure.length > 1);
-      if (initialReportId || initialVariantId) {
-        if (initialReportId) {
-          const initialReport = selectorStructure.find((ss) => ss.id === initialReportId);
-          setSelectedProfile(initialReport);
-          if (initialVariantId && initialReport) {
-            setSelectedVariant(initialReport.variants.find((v2) => v2.id === initialVariantId));
-          }
-        }
-      }
-    }
-  }, [metadata, initialReportId, initialVariantId]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    showSelectors && /* @__PURE__ */ jsx(Group, { position: "center", className: "bespoke-explore-reports-selector", mb: "md", children: selectors.map((s2) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        "data-selected": s2.id === selectedProfile?.id ? "true" : "false",
-        "data-report-name": s2.name,
-        variant: s2.id === selectedProfile?.id ? "outline" : "subtle",
-        onClick: () => onClickProfile(s2),
-        children: translations?.dimension[s2.name] ?? s2.name
-      },
-      `p-${s2.id}`
-    )) }),
-    selectedProfile && selectedProfile.variants && selectedProfile.variants.length > 2 && /* @__PURE__ */ jsx(Group, { position: "center", style: { minHeight: "36px" }, className: "bespoke-explore-variant-selector", mb: "md", children: selectedProfile.variants.map((v2) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        "data-selected": v2.id === selectedVariant?.id ? "true" : "false",
-        "data-variant-name": v2.name,
-        variant: v2.id === selectedVariant?.id ? "outline" : "subtle",
-        onClick: () => onClickVariant(v2),
-        children: translations?.dimension[v2.name] ?? v2.name
-      },
-      `v-${v2.id}`
-    )) })
-  ] });
-}
-var ExploreFilters_default;
-var init_ExploreFilters = __esm({
-  "frontend/components/explore/ExploreFilters.tsx"() {
-    init_esm_shims();
-    ExploreFilters_default = ExploreFilters;
-  }
-});
 
 // api/http/lib.ts
 function http(axios10, config) {
@@ -2571,26 +2469,6 @@ var init_recordsSlice = __esm({
               }
             }
           };
-        },
-        normalizeSection: (state, action) => {
-          const sectionId = action.payload.section;
-          const section = state.entities.section[sectionId];
-          return {
-            ...state,
-            entities: {
-              ...state.entities,
-              section: {
-                // ...state.entities.section,
-                [sectionId]: {
-                  ...section,
-                  settings: {
-                    ...section.settings,
-                    width: "full"
-                  }
-                }
-              }
-            }
-          };
         }
       },
       extraReducers: {
@@ -3522,7 +3400,6 @@ __export(actions_exports, {
   createEntity: () => createEntity,
   deleteEntity: () => deleteEntity,
   deleteQueryParam: () => deleteQueryParam,
-  normalizeSectionLayout: () => normalizeSectionLayout,
   readEntity: () => readEntity,
   readMember: () => readMember,
   readMetadata: () => readMetadata,
@@ -3719,12 +3596,6 @@ function removeBlocksFromState(privateBlockIds) {
     await dispatch(removeBlocks(privateBlockIds));
   };
 }
-function normalizeSectionLayout(sectionId) {
-  const { normalizeSection } = recordsSlice.actions;
-  return async (dispatch) => {
-    await dispatch(normalizeSection(sectionId));
-  };
-}
 function addBlockToState(newBlocks) {
   const { addBlocks } = recordsSlice.actions;
   return async (dispatch) => {
@@ -4095,7 +3966,7 @@ var init_store = __esm({
     storeWrapper = createWrapper(storeFactory);
   }
 });
-function withFetcher(Component, useRef16) {
+function withFetcher(Component, useRef14) {
   const ComponentWithFetcher = (props) => {
     const {
       id,
@@ -4103,7 +3974,7 @@ function withFetcher(Component, useRef16) {
       skelWidth,
       ...otherProps
     } = props;
-    const ref = useRef16(id);
+    const ref = useRef14(id);
     if (ref.isUninitialized || ref.isFetching) {
       return /* @__PURE__ */ jsx(Skeleton, { width: skelWidth, height: skelHeight });
     }
@@ -4131,6 +4002,314 @@ var init_store2 = __esm({
     init_withFetcher();
   }
 });
+function ExploreProvider({ children, explorePageSize }) {
+  const pageSize = explorePageSize || 10;
+  const defaultFilters = {
+    // initial reportIds should go here to avoid multiple unnecesary requests
+    profile: void 0,
+    variant: void 0
+  };
+  const [metadata, setMetadata] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [resultCount, setResultCount] = useState({});
+  const [totalCount, setTotalCount] = useState({});
+  const [activePage, setActivePage] = useState(1);
+  const [filters, setFilters] = useState(defaultFilters);
+  const [query, setQuery] = useState("");
+  const [debouncedQuery] = useDebouncedValue(query, 500);
+  const [results, setResults] = useState([]);
+  const [translations, setTranslations] = useState(DEFAULT_TRANSLATIONS);
+  const [showSelectors, setShowSelectors] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+  const dispatch = useAppDispatch();
+  const { locale } = useRouter();
+  const fetchMetadata = async () => {
+    try {
+      setLoading(true);
+      dispatch(actions_exports.readMetadata({})).then((resp) => {
+        const metadataCount = resp.data.reduce((acc, report) => {
+          if (report.dimensions) {
+            report.dimensions.forEach((dimension) => {
+              if (dimension.variants) {
+                dimension.variants.forEach((variant) => {
+                  acc[variant.id] = variant.members_count || 0;
+                });
+              }
+            });
+          }
+          return acc;
+        }, {});
+        setMetadata(resp.data);
+        setLoading(false);
+        setResultCount(metadataCount);
+        setTotalCount(metadataCount);
+        setInitialized(true);
+      }, (err) => {
+        console.error(err);
+      });
+    } catch (error) {
+      console.error("Error fetching metadata:", error);
+      setMetadata([]);
+      setLoading(false);
+      setResultCount({});
+      setTotalCount({});
+    }
+  };
+  const setResultCountInternal = (totalPerVariant) => {
+    if (totalPerVariant) {
+      setResultCount(totalPerVariant);
+    } else {
+      setResultCount(totalCount);
+    }
+  };
+  const initExplore = async (initialReportId, initialVariantId) => {
+    if (!initialized && metadata.length === 0) {
+      await fetchMetadata();
+    }
+    setFilters({
+      profile: initialReportId,
+      variant: initialVariantId
+    });
+  };
+  useEffect(() => {
+    let cancelled = false;
+    if (initialized) {
+      setLoading(true);
+      setActivePage(1);
+      doQuery(cancelled, 0);
+    }
+    return () => {
+      cancelled = false;
+    };
+  }, [debouncedQuery, filters, initialized]);
+  useEffect(() => {
+    if (initialized) {
+      const newOffset = (activePage - 1) * pageSize;
+      doQuery(false, newOffset);
+    }
+  }, [activePage]);
+  const doQuery = async (cancelled, newOffset) => {
+    const filterProfile = filters.profile && !Number.isNaN(filters.profile) ? [filters.profile] : [];
+    const filterVariant = filters.variant && !Number.isNaN(filters.variant) ? [filters.variant] : [];
+    const params = {
+      query: debouncedQuery,
+      format: "profiles",
+      locale,
+      limit: pageSize,
+      offset: newOffset,
+      visible: true,
+      includes: true,
+      noImage: false,
+      variant: filterVariant,
+      dimension: [],
+      report: filterProfile,
+      all: false
+    };
+    dispatch(actions_exports.reportSearch(params)).then((resp) => {
+      if (resp && resp.results && !cancelled) {
+        const mergedResults = resp.results;
+        setResults(mergedResults);
+        setResultCount(query === "" ? false : resp.meta.variantCount);
+      }
+      setLoading(false);
+    }).catch((e) => {
+      console.error(e);
+      setLoading(false);
+    });
+  };
+  const counts = resultCount || totalCount;
+  const allMember = { id: void 0, name: translations["filters_all"] || "ALL" };
+  const getVariantsCombinatory = (variantsArrays) => {
+    const combinatory = variantsArrays.reduce((a2, b2) => a2.reduce((r2, v2) => r2.concat(b2.map((w2) => [].concat(v2, w2))), [])).map((combination) => {
+      let final;
+      if (!Array.isArray(combination)) {
+        combination.members_count = counts[combination.id] || 0;
+        final = {
+          ...combination,
+          members_count: counts[combination.id] || 0
+        };
+      } else {
+        final = {
+          id: combination.map((c2) => c2.id).join(","),
+          name: combination.map((c2) => c2.name).join(" / "),
+          members_count: combination.reduce((t2, q2) => t2 * (counts[q2.id] || 1), 0)
+        };
+      }
+      return final;
+    });
+    const allTotal = combinatory.reduce((t2, q2) => t2 + (q2.members_count || 0), 0);
+    return [
+      { ...allMember, members_count: allTotal },
+      ...combinatory
+    ];
+  };
+  const selectorStructure = useMemo(() => {
+    let temp = [];
+    if (!loading && metadata.length > 0 && counts) {
+      let worthShowSelectors = false;
+      const selectors = [...metadata].filter((profile) => profile.dimensions.length > 0).map((profile) => {
+        const combinatory = getVariantsCombinatory(profile.dimensions.map((d2) => d2.variants));
+        if (!worthShowSelectors && combinatory && combinatory.length > 2) {
+          worthShowSelectors = true;
+        }
+        return {
+          id: profile.id,
+          name: profile.dimensions.map((d2) => d2.name).join(" / "),
+          variants: combinatory,
+          members_count: combinatory.filter((v2) => v2.id).reduce((t2, q2) => t2 + (q2.members_count || 0), 0)
+        };
+      });
+      temp = [
+        { ...allMember, members_count: selectors.reduce((t2, q2) => t2 + (q2.members_count || 0), 0) },
+        ...selectors
+      ];
+      setShowSelectors(worthShowSelectors ? true : selectorStructure.length > 1);
+    }
+    return temp;
+  }, [loading, counts, metadata]);
+  const currentPageTotal = useMemo(() => {
+    let selector;
+    if (selectorStructure) {
+      if (!filters.profile) {
+        selector = selectorStructure.find((p2) => !p2.id);
+      } else if (filters.profile) {
+        selector = selectorStructure.find((p2) => p2.id === filters.profile);
+        if (selector && filters.variant && selector.variants) {
+          selector = selector.variants.find((p2) => p2.id === filters.variant);
+        }
+      }
+    }
+    return selector ? selector.members_count : pageSize;
+  }, [filters, selectorStructure]);
+  const state = {
+    metadata,
+    loading,
+    setLoading,
+    resultCount,
+    totalCount,
+    setResultCount: setResultCountInternal,
+    activePage,
+    setActivePage,
+    pageSize,
+    filters,
+    setFilters,
+    doQuery,
+    query,
+    setQuery,
+    debouncedQuery,
+    results,
+    currentPageTotal,
+    selectorStructure,
+    translations,
+    setTranslations: (t2) => {
+      setTranslations({ ...DEFAULT_TRANSLATIONS, ...t2 });
+    },
+    showSelectors,
+    initExplore
+  };
+  return /* @__PURE__ */ jsx(ExploreContext.Provider, { value: state, children });
+}
+var DEFAULT_TRANSLATIONS, ExploreContext, useExplore;
+var init_ExploreProvider = __esm({
+  "frontend/components/report/context/ExploreProvider.tsx"() {
+    init_esm_shims();
+    init_store2();
+    DEFAULT_TRANSLATIONS = {
+      "try_another": "Try another search or filter.",
+      "search": "Search",
+      "filters_all": "All",
+      "no_results": "No Results",
+      "load_more": "Load more",
+      report: {},
+      dimension: {},
+      variant: {}
+    };
+    ExploreContext = createContext({
+      metadata: [],
+      loading: false,
+      setLoading: () => null,
+      resultCount: {},
+      totalCount: {},
+      setResultCount: () => null,
+      activePage: 1,
+      setActivePage: () => null,
+      pageSize: 10,
+      results: [],
+      filters: {},
+      doQuery: () => null,
+      setFilters: () => null,
+      query: "",
+      setQuery: () => null,
+      debouncedQuery: "",
+      currentPageTotal: 10,
+      selectorStructure: [],
+      translations: DEFAULT_TRANSLATIONS,
+      setTranslations: () => null,
+      showSelectors: true,
+      initExplore: (p2, v2) => null
+    });
+    useExplore = () => useContext(ExploreContext);
+  }
+});
+function ExploreFilters({ initialReportId, initialVariantId, translations }) {
+  const { loading, setFilters, selectorStructure, filters, showSelectors } = useExplore();
+  const onClickProfile = (profileId) => {
+    if (profileId !== filters.profile) {
+      setFilters({
+        profile: profileId,
+        variant: void 0
+      });
+    }
+  };
+  const onClickVariant = (variantId) => {
+    if (variantId !== filters.variant) {
+      setFilters({
+        ...filters,
+        variant: variantId
+      });
+    }
+  };
+  const selectedProfileObj = filters.profile ? selectorStructure.find((p2) => p2.id === filters.profile) : void 0;
+  const selectedVariantObj = selectedProfileObj && selectedProfileObj.variants && filters.variant ? selectedProfileObj.variants.find((p2) => p2.id === filters.variant) : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showSelectors && /* @__PURE__ */ jsx(Group, { position: "center", className: "bespoke-explore-reports-selector", mb: "md", children: selectorStructure.map((s2) => /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-selected": s2.id === selectedProfileObj?.id ? "true" : "false",
+        "data-report-name": s2.name,
+        variant: s2.id === selectedProfileObj?.id ? "outline" : "subtle",
+        onClick: () => onClickProfile(s2.id),
+        children: [
+          translations?.dimension[s2.name] ?? s2.name,
+          !loading && /* @__PURE__ */ jsx(Text, { span: true, size: "xs", ml: "0.2rem", children: `(${s2.members_count})` })
+        ]
+      },
+      `p-${s2.id}`
+    )) }),
+    selectedProfileObj && selectedProfileObj.variants && selectedProfileObj.variants.length > 2 && /* @__PURE__ */ jsx(Group, { position: "center", style: { minHeight: "36px" }, className: "bespoke-explore-variant-selector", mb: "md", children: selectedProfileObj.variants.map((v2) => /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-selected": v2.id === selectedVariantObj?.id ? "true" : "false",
+        "data-variant-name": v2.name,
+        variant: v2.id === selectedVariantObj?.id ? "outline" : "subtle",
+        onClick: () => onClickVariant(v2.id),
+        children: [
+          translations?.dimension[v2.name] ?? v2.name,
+          !loading && /* @__PURE__ */ jsx(Text, { span: true, size: "xs", ml: "0.2rem", children: `(${v2.members_count})` })
+        ]
+      },
+      `v-${v2.id}`
+    )) })
+  ] });
+}
+var ExploreFilters_default;
+var init_ExploreFilters = __esm({
+  "frontend/components/explore/ExploreFilters.tsx"() {
+    init_esm_shims();
+    init_ExploreProvider();
+    ExploreFilters_default = ExploreFilters;
+  }
+});
 function useBespokeStyles() {
   const theme = useMantineTheme();
   return theme.other.bespokeStyles ?? {};
@@ -4217,11 +4396,16 @@ var init_ExploreTile = __esm({
     ExploreTile_default = ExploreTile;
   }
 });
-function ExploreResults({ results = [], profilePrefix, onSelect = () => void 0, reportTile }) {
+function ExploreResults({
+  profilePrefix,
+  onSelect = () => void 0,
+  reportTile
+}) {
   const [scrollSize, setScrollSize] = useState(500);
   const scrollAreaRef = useRef(null);
+  const { results } = useExplore();
   const offset2 = scrollAreaRef.current?.offsetTop || 0;
-  const gap = 30;
+  const gap = 50;
   useEffect(() => {
     const { innerHeight } = window;
     setScrollSize(innerHeight - offset2 - gap);
@@ -4244,80 +4428,73 @@ var init_ExploreResults = __esm({
   "frontend/components/explore/ExploreResults.tsx"() {
     init_esm_shims();
     init_ExploreTile();
+    init_ExploreProvider();
     ExploreResults_default = ExploreResults;
   }
 });
+function ExplorePagination() {
+  const {
+    activePage,
+    setActivePage,
+    pageSize,
+    currentPageTotal
+  } = useExplore();
+  const onChangePage = (page) => {
+    setActivePage(page);
+  };
+  return /* @__PURE__ */ jsx(Group, { position: "center", children: /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      value: activePage,
+      onChange: onChangePage,
+      total: Math.ceil(currentPageTotal / pageSize),
+      size: "sm",
+      py: "xs"
+    }
+  ) });
+}
+var ExplorePagination_default;
+var init_ExplorePagination = __esm({
+  "frontend/components/explore/ExplorePagination.tsx"() {
+    init_esm_shims();
+    init_ExploreProvider();
+    ExplorePagination_default = ExplorePagination;
+  }
+});
 function BespokeExplore({
-  locale,
   profilePrefix,
   initialReportId,
   initialVariantId,
-  translations = DEFAULT_TRANSLATIONS,
+  translations,
   onSelect,
   reportTile
 }) {
-  const dispatch = useAppDispatch();
-  const defaultFilters = {
-    // initial reportIds should go here to avoid multiple unnecesary requests
-    profile: void 0,
-    variant: void 0
-  };
-  const [query, setQuery] = useState("");
-  const [debouncedQuery] = useDebouncedValue(query, 500);
-  const [results, setResults] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [filters, setFilters] = useState(defaultFilters);
-  const [metadata, setMetadata] = useState();
   const inputRef = useRef();
+  const {
+    query,
+    setQuery,
+    results,
+    loading,
+    translations: exploreTranslations,
+    setTranslations,
+    initExplore
+  } = useExplore();
   useEffect(() => {
-    setLoading(true);
-    dispatch(actions_exports.readMetadata({})).then((resp) => {
-      setMetadata(resp.data);
-    }, (err) => {
-      console.error(err);
-    });
+    initExplore(initialReportId, initialVariantId);
   }, []);
   useEffect(() => {
-    let cancelled = false;
-    if (metadata) {
-      setLoading(true);
-      const filterProfile = filters.profile && !Number.isNaN(filters.profile) ? filters.profile : [];
-      const filterVariant = filters.variant && !Number.isNaN(filters.variant) ? filters.variant : [];
-      const params = {
-        query: debouncedQuery,
-        format: "profiles",
-        locale,
-        limit: 25,
-        visible: true,
-        includes: true,
-        noImage: false,
-        variant: filterVariant,
-        dimension: [],
-        report: filterProfile,
-        all: false
-      };
-      dispatch(actions_exports.reportSearch(params)).then((resp) => {
-        if (resp && resp.results && !cancelled) {
-          setResults(resp.results);
-        }
-        setLoading(false);
-        inputRef.current?.focus();
-      }).catch((e) => {
-        console.error(e);
-        setLoading(false);
-      });
+    if (!loading) {
+      inputRef.current?.focus();
     }
-    return () => {
-      cancelled = false;
-    };
-  }, [debouncedQuery, filters, metadata]);
-  const onFilterChange = (newFilters) => {
-    setFilters(newFilters);
-  };
+  }, [loading]);
+  useEffect(() => {
+    if (translations) {
+      setTranslations(translations);
+    }
+  }, [translations]);
   const onClearInput = () => {
     setQuery("");
   };
-  const exploreTranslations = { ...DEFAULT_TRANSLATIONS, ...translations };
   return /* @__PURE__ */ jsxs(Container, { fluid: true, pt: "1em", children: [
     /* @__PURE__ */ jsx(
       TextInput,
@@ -4346,8 +4523,6 @@ function BespokeExplore({
     /* @__PURE__ */ jsx(
       ExploreFilters_default,
       {
-        metadata,
-        onFilter: onFilterChange,
         initialReportId,
         initialVariantId,
         translations: exploreTranslations
@@ -4355,25 +4530,25 @@ function BespokeExplore({
     ),
     /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading }),
     !loading && results.length === 0 && /* @__PURE__ */ jsx(Alert, { title: exploreTranslations["no_results"], color: "blue", children: exploreTranslations["try_another"] }),
-    !loading && /* @__PURE__ */ jsx(ExploreResults_default, { results, profilePrefix, onSelect, reportTile })
+    !loading && /* @__PURE__ */ jsx(
+      ExploreResults_default,
+      {
+        profilePrefix,
+        onSelect,
+        reportTile
+      }
+    ),
+    /* @__PURE__ */ jsx(ExplorePagination_default, {})
   ] });
 }
-var DEFAULT_TRANSLATIONS, Explore_default;
+var Explore_default;
 var init_Explore = __esm({
   "frontend/components/explore/Explore.tsx"() {
     init_esm_shims();
     init_ExploreFilters();
     init_ExploreResults();
-    init_store2();
-    DEFAULT_TRANSLATIONS = {
-      "try_another": "Try another search or filter.",
-      "search": "Search",
-      "filters_all": "All",
-      "no_results": "No Results",
-      report: {},
-      dimension: {},
-      variant: {}
-    };
+    init_ExplorePagination();
+    init_ExploreProvider();
     Explore_default = BespokeExplore;
   }
 });
@@ -4417,7 +4592,7 @@ function BespokeExploreModal({
     target = /* @__PURE__ */ jsx(Tooltip, { label: tooltipText, ...tooltipProps, children: target });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Modal, { ...mdlConfig, ...modalProps, children: /* @__PURE__ */ jsx(Explore_default, { ...exploreProps, onSelect: () => setOpened(false) }) }),
+    /* @__PURE__ */ jsx(Modal, { ...mdlConfig, ...modalProps, children: opened && /* @__PURE__ */ jsx(Explore_default, { ...exploreProps, onSelect: () => setOpened(false) }) }),
     /* @__PURE__ */ jsx("div", { onClick: () => setOpened(true), children: children ? target : /* @__PURE__ */ jsx(Fragment, { children: actionIcon }) })
   ] });
 }
@@ -4764,10 +4939,10 @@ var init_RichText = __esm({
 });
 function InnerTooltip(props) {
   const { content, style = {} } = props;
-  const { isPrint } = useMode();
+  const print = usePrint();
   const contentObj = /* @__PURE__ */ jsx(RichText, { component: "span", html: content, isPreview: true });
   const element = useMemo(() => {
-    return isPrint ? /* @__PURE__ */ jsx("div", { className: "bespoke-inner-tooltip-notification", children: /* @__PURE__ */ jsx(
+    return print ? /* @__PURE__ */ jsx("div", { className: "bespoke-inner-tooltip-notification", children: /* @__PURE__ */ jsx(
       Notification,
       {
         icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: "1.1rem" }),
@@ -5309,7 +5484,7 @@ function TitleView({
   _iconPadding,
   asComparison = false
 }) {
-  const { isPrint } = useMode();
+  const print = usePrint();
   const titleHTML = sanitizeBlockContent_default(title) || "<span class='cr-block-placeholder'>Title</span>";
   const intOrder = settings && settings.order ? parseInt(settings.order, 10) : 1;
   const order2 = intOrder <= 6 ? intOrder : 1;
@@ -5352,7 +5527,7 @@ function TitleView({
       position: getAlignForGroup(align),
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          isPrint ? titleElement : finalElement,
+          print ? titleElement : finalElement,
           displayName && /* @__PURE__ */ jsx(Text, { className: "bespoke-comparison-title", children: memberName })
         ] }),
         tooltip && /* @__PURE__ */ jsx(InnerTooltip, { content: tooltip })
@@ -5473,7 +5648,7 @@ var init_useOnChangeSelector = __esm({
 });
 function Selector(config) {
   const { name, settings, options, id, defaultValue, section, component, asComparison, hideLabel } = config;
-  const { isPrint } = useMode();
+  const print = usePrint();
   const selectorIdentifier = getSelectorIdentifier(id);
   const callback = useOnChangeSelector(id, section, selectorIdentifier, asComparison);
   const selectorIdentifierParam = asComparison ? `${selectorIdentifier}Compare` : selectorIdentifier;
@@ -5484,9 +5659,9 @@ function Selector(config) {
     (d2) => ({ value: d2.id, label: d2.label })
   ), [optDependency]);
   const printValue = useMemo(() => {
-    const optionsString = isPrint ? options.filter((o2) => multiValue.includes(o2.id)).map((o2) => o2.label).join(", ") : "";
+    const optionsString = print ? options.filter((o2) => multiValue.includes(o2.id)).map((o2) => o2.label).join(", ") : "";
     return optionsString;
-  }, [isPrint]);
+  }, [print]);
   const label = config.hideLabel === "true" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(RichText, { component: "div", html: name, size: "sm", style: settings });
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
@@ -5541,7 +5716,7 @@ function Selector(config) {
         }
       )
     }[config.type] }) }),
-    isPrint && /* @__PURE__ */ jsxs(Text, { children: [
+    print && /* @__PURE__ */ jsxs(Text, { children: [
       label,
       ": ",
       printValue
@@ -5597,7 +5772,7 @@ var init_Image = __esm({
     init_block2();
   }
 });
-function useInitialState(pathSegmentsKey, mode) {
+function useInitialState(pathSegmentsKey) {
   const { asPath, locale, defaultLocale } = useRouter();
   const [loading, setLoading] = useState(true);
   const { user, isLoading } = useUser();
@@ -5640,41 +5815,39 @@ function useInitialState(pathSegmentsKey, mode) {
     }
   }, [user, isLoading]);
   useEffect(() => {
-    if (mode !== "embed") {
-      const hasParams = Object.keys(query).some((key) => key !== pathSegmentsKey);
-      if ((hasParams || privateBlocks.blocks.length > 0) && privateBlocks.resolved) {
-        const selectorIds = Object.keys(query).map((d2) => Number(d2.match(/\d+/)));
-        const revalidateBlocks = selectorIds.filter((id) => id !== 0).concat(privateBlocks.blocks);
-        Promise.all(
-          revalidateBlocks.map((bid) => {
-            const block = blockRecords[bid];
-            const inputVariablesFlat = block.consumers.reduce((inputVars, cid) => ({ ...inputVars, ...variables[cid] }), {});
-            const blockContext = {
-              locale: localeDefault4,
-              query,
-              variables: {
-                ...inputVariablesFlat,
-                ...attributes
-              }
-            };
-            return runConsumersV2(
-              blockRecords,
-              void 0,
-              bid,
-              formatters2,
-              blockContext,
-              { variables, status },
-              readMemberFn,
-              "report"
-            );
-          })
-        ).then((d2) => {
-          setLoading(false);
-          d2.map((data) => dispatch(variablesActions.setVariableChange({ ...data, attributes })));
-        });
-      }
+    const hasParams = Object.keys(query).some((key) => key !== pathSegmentsKey);
+    if ((hasParams || privateBlocks.blocks.length > 0) && privateBlocks.resolved) {
+      const selectorIds = Object.keys(query).map((d2) => Number(d2.match(/\d+/)));
+      const revalidateBlocks = selectorIds.filter((id) => id !== 0).concat(privateBlocks.blocks);
+      Promise.all(
+        revalidateBlocks.map((bid) => {
+          const block = blockRecords[bid];
+          const inputVariablesFlat = block.consumers.reduce((inputVars, cid) => ({ ...inputVars, ...variables[cid] }), {});
+          const blockContext = {
+            locale: localeDefault4,
+            query,
+            variables: {
+              ...inputVariablesFlat,
+              ...attributes
+            }
+          };
+          return runConsumersV2(
+            blockRecords,
+            void 0,
+            bid,
+            formatters2,
+            blockContext,
+            { variables, status },
+            readMemberFn,
+            "report"
+          );
+        })
+      ).then((d2) => {
+        setLoading(false);
+        d2.map((data) => dispatch(variablesActions.setVariableChange({ ...data, attributes })));
+      });
     }
-  }, [privateBlocks.resolved, mode]);
+  }, [privateBlocks.resolved]);
   return loading || !privateBlocks.resolved;
 }
 var init_useInitialState = __esm({
@@ -5727,41 +5900,6 @@ var init_useScrollToAnchor = __esm({
     init_esm_shims();
   }
 });
-function useEmbed() {
-  const loaded = useRef(false);
-  useEffect(() => {
-    let prevRequests = 0;
-    let thresholdCount = 0;
-    const interval = setInterval(() => {
-      const resources = performance.getEntriesByType("resource");
-      const allRequestsComplete = resources.every((resource) => resource.responseEnd > 0);
-      if (prevRequests === resources.length && allRequestsComplete && thresholdCount > 3) {
-        clearInterval(interval);
-        if (!loaded.current) {
-          setTimeout(() => {
-            window.parent.postMessage("iframe-loaded", "*");
-          }, 500);
-          loaded.current = true;
-        }
-      } else {
-        if (resources.length > prevRequests) {
-          thresholdCount = 0;
-        } else {
-          thresholdCount++;
-        }
-        prevRequests = resources.length;
-      }
-    }, 300);
-    if (typeof document !== "undefined") {
-      initFrameAndPoll();
-    }
-  }, []);
-}
-var init_useEmbed = __esm({
-  "frontend/hooks/useEmbed.ts"() {
-    init_esm_shims();
-  }
-});
 function createOutline(elements, variables) {
   const roots = [];
   const nodes = {};
@@ -5879,7 +6017,6 @@ var init_hooks2 = __esm({
     init_useInitialState();
     init_useOnChangeSelector();
     init_useScrollToAnchor();
-    init_useEmbed();
     init_useContentOutline();
   }
 });
@@ -6303,7 +6440,7 @@ __export(Viz_exports, {
   default: () => Viz
 });
 function Viz(config) {
-  const { isPrint, isEmbed } = useMode();
+  const print = usePrint();
   const { block, active, locale, variables, configOverride = {} } = config;
   const content = getBlockContent(block);
   const formatterFunctions = useFormatterFunctionsForLocale(locale);
@@ -6332,8 +6469,8 @@ function Viz(config) {
   const Visualization = vizTypes[fallbackType];
   const vizPropsConfig = useMemo(() => {
     const { _data, ...vizPropsInnerConfig } = vizProps.config;
-    return printOverrides(vizPropsInnerConfig, isPrint || isEmbed);
-  }, [vizProps, isPrint, isEmbed]);
+    return printOverrides(vizPropsInnerConfig, print);
+  }, [vizProps, print]);
   const vizConfig = { locale, variables, ...vizPropsConfig, ...configOverride };
   return /* @__PURE__ */ jsx("div", { className: "bespoke-Viz", children: /* @__PURE__ */ jsx(
     "div",
@@ -15979,265 +16116,161 @@ var init_DataTab = __esm({
     };
   }
 });
-function useLocalePrefix() {
-  const { locales: locales4 } = useRouter();
-  const locale = location && location.pathname.split("/").filter((segment) => segment.length > 0)[0];
-  return locales4?.includes(locale);
-}
-var init_useLocalePrefix = __esm({
-  "frontend/hooks/useLocalePrefix.ts"() {
-    init_esm_shims();
-  }
-});
-function CopyInput(props) {
-  const { title, url, disabled = false } = props;
-  const Icon = disabled ? IconCode : IconLink;
-  return /* @__PURE__ */ jsx(Input.Wrapper, { label: title, children: /* @__PURE__ */ jsx(
-    Input,
-    {
-      icon: /* @__PURE__ */ jsx(Icon, {}),
-      value: url,
-      disabled,
-      readOnly: true,
-      rightSection: /* @__PURE__ */ jsx(CopyButton, { value: url, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { variant: copied ? "filled" : "subtle", onClick: copy, disabled, children: copied ? /* @__PURE__ */ jsx(IconClipboardCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconClipboardCopy, { size: 16 }) }) }) })
-    }
-  ) });
-}
-var init_CopyInput = __esm({
-  "components/options/CopyInput.tsx"() {
-    init_esm_shims();
-  }
-});
-function useEmbedPath(sectionId, vizId = void 0, queryParams = {}) {
-  const { query, locale } = useRouter();
-  const prefixLocale = useLocalePrefix();
-  const { pathSegment } = useBespoke();
-  const slugs = query[pathSegment];
-  if (slugs && Array.isArray(slugs)) {
-    const search = new URLSearchParams({ section: sectionId, ...queryParams });
-    if (vizId) {
-      search.set("viz", vizId);
-    }
-    const embed = `/embed/${slugs.join("/")}`;
-    const url = new URL(
-      prefixLocale ? `/${locale}${embed}` : `${embed}`,
-      location.href
-    );
-    url.search = search.toString();
-    return url.href;
-  }
-  return void 0;
-}
-function ShareTab(props) {
-  const { section } = props;
-  const [shareUrl, setShareUrl] = useState("");
-  const [title, setTitle] = useState("");
-  const [includeSection, setIncludeSection] = useState(true);
-  const optionsTranslations = useBespokeTranslations("options");
-  const embedPath = useEmbedPath(section.id);
-  const iframeStr = `<iframe width="100%" height="500px" frameborder="0" src="${embedPath}"></iframe>`;
-  const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["share_tab"] };
-  useEffect(() => {
-    setTitle(document.title);
-    const { origin, pathname } = window.location;
-    const url = `${origin}${pathname}`;
-    const sectionAnchor = includeSection ? `#section-${section.id}` : "";
-    setShareUrl(`${url}${sectionAnchor}`);
-  }, [includeSection]);
-  return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-share", children: [
-    /* @__PURE__ */ jsx(Space, { h: "xs" }),
-    /* @__PURE__ */ jsx(CopyInput, { title: `${translations["title"]}: ${title}`, url: shareUrl }),
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: includeSection,
-        label: translations["include_section"],
-        onChange: () => setIncludeSection(!includeSection),
-        radius: "xl"
-      }
-    ),
-    /* @__PURE__ */ jsx(CopyInput, { title: translations["embed"], url: iframeStr }),
-    /* @__PURE__ */ jsxs(Group, { position: "center", children: [
-      /* @__PURE__ */ jsx(
-        FacebookShareButton,
-        {
-          url: shareUrl,
-          quote: title,
-          children: /* @__PURE__ */ jsx(FacebookIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TwitterShareButton,
-        {
-          url: shareUrl,
-          title,
-          children: /* @__PURE__ */ jsx(TwitterIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TelegramShareButton,
-        {
-          url: shareUrl,
-          title,
-          children: /* @__PURE__ */ jsx(TelegramIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        WhatsappShareButton,
-        {
-          url: shareUrl,
-          title,
-          separator: ":: ",
-          children: /* @__PURE__ */ jsx(WhatsappIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(LinkedinShareButton, { url: shareUrl, children: /* @__PURE__ */ jsx(LinkedinIcon, { size: 32, round: true }) }),
-      /* @__PURE__ */ jsx(
-        RedditShareButton,
-        {
-          url: shareUrl,
-          title,
-          windowWidth: 660,
-          windowHeight: 460,
-          children: /* @__PURE__ */ jsx(RedditIcon, { size: 32, round: true })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EmailShareButton,
-        {
-          url: shareUrl,
-          subject: title,
-          children: /* @__PURE__ */ jsx(EmailIcon, { size: 32, round: true })
-        }
-      )
-    ] })
-  ] });
-}
-var DEFAULT_TRANSLATIONS3;
-var init_ShareTab = __esm({
-  "components/options/tabs/ShareTab.tsx"() {
-    init_esm_shims();
-    init_CopyInput();
-    init_TranslationsProvider();
-    init_useLocalePrefix();
-    init_ResourceProvider();
-    DEFAULT_TRANSLATIONS3 = {
-      "title": "Title",
-      "include_section": "Include Section",
-      "embed": "Embed"
-    };
-  }
-});
-function exportSVG(svg) {
-  const serializer = new XMLSerializer();
-  let source = serializer.serializeToString(svg);
-  if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
-    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
-  }
-  if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
-    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
-  }
-  source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
-  const url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
-  const a2 = document.createElement("a");
-  const e = new MouseEvent("click");
-  a2.download = "image.svg";
-  a2.href = url;
-  a2.dispatchEvent(e);
-}
 function ImageTab(props) {
   const { section } = props;
   const blocksIds = section.blocks || [];
-  const framer = useRef();
-  useRouter();
-  useLocalePrefix();
-  useBespoke();
   const vizAvailable = useAppSelector((state) => blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => block.type === "visualization" && state.variables.status[block.id].allowed));
   const [imageContext, setImageContext] = useState(contextOptions.section);
   const [imageFormat, setImageFormat] = useState(formatOptions2.png);
   const [imageProcessing, setImageProcessing] = useState(false);
+  const [svgAvailable, setSvgAvailable] = useState(false);
   const [vizPreviews, setVizPreviews] = useState([]);
   const [vizSelected, setVizSelected] = useState(vizAvailable.length > 0 ? vizAvailable[0].id : null);
-  const [transparentBackground, setTransparentBackground] = useState(false);
+  const [transparentBackground, setTransparentBackground] = useState(true);
   const [loadingPreviews, setLoadingPreviews] = useState(false);
   const optionsTranslations = useBespokeTranslations("options");
-  const translations = { ...DEFAULT_TRANSLATIONS4, ...optionsTranslations["image_tab"] };
-  const search = Object.fromEntries(new URLSearchParams(location.search));
-  const selectors = Object.fromEntries(
-    Object.entries(search).filter(([key]) => key.match(/selector\d+id/))
-  );
-  const sectionId = slugify_default(section?.settings?.name) || `section-${section.id}`;
-  const embedPath = useEmbedPath(section.id, imageContext === contextOptions.viz ? vizSelected : void 0, selectors);
+  const translations = { ...DEFAULT_TRANSLATIONS3, ...optionsTranslations["image_tab"] };
+  const { siteProps } = useBespoke();
+  const includeLogo = siteProps?.logoSrc && typeof siteProps.logoSrc === "string";
+  const sectionId = section?.settings?.name || `section-${section.id}`;
+  const sectionHash = `#${sectionId}`;
+  const theme = useMantineTheme();
+  const vizSelectedHasSVG = () => {
+    const vizNode = getVizNode(vizSelected);
+    const svgCount = select(vizNode).select("svg").size();
+    return svgCount === 1;
+  };
+  const getFileName = () => `${slugify_default(sectionId)}`;
+  const getSectionNode = () => {
+    const sectionNode = document.getElementById(sectionId);
+    return select(sectionNode).select(".bespoke-section-content").node();
+  };
+  const getVizNode = (vizId) => {
+    const sectionNode = getSectionNode();
+    return select(sectionNode).select(`#bespoke-visualization-${vizId}.bespoke-block-area`).node();
+  };
+  const getSelectedNode = () => new Promise((resolve) => {
+    let node;
+    if (imageContext === contextOptions.section) {
+      node = getSectionNode();
+    } else if (imageContext === contextOptions.viz) {
+      node = getVizNode(vizSelected);
+    }
+    const sourceContainer = document.createElement("div");
+    sourceContainer.style.display = "flex";
+    sourceContainer.style.justifyContent = "space-between";
+    sourceContainer.classList.add("bespoke-Viz-source");
+    sourceContainer.style.padding = theme.spacing.xs;
+    sourceContainer.style.width = "100%";
+    const sourceNode = document.createElement("div");
+    sourceNode.innerText = translations["source"].replace("{src}", `${window.location}${sectionHash}`);
+    sourceNode.style.fontSize = theme.fontSizes.xs;
+    sourceContainer.appendChild(sourceNode);
+    if (includeLogo) {
+      const sourceImage = document.createElement("img");
+      sourceImage.src = siteProps.logoSrc;
+      sourceImage.style.height = "30px";
+      sourceImage.onload = () => resolve(node);
+      sourceImage.onerror = () => {
+        sourceImage.remove();
+        resolve(node);
+      };
+      sourceContainer.appendChild(sourceImage);
+      node.appendChild(sourceContainer);
+    } else {
+      node.appendChild(sourceContainer);
+      resolve(node);
+    }
+  });
+  const getBackground = (elem) => {
+    if (transparentBackground)
+      return "transparent";
+    const color = select(elem).style("background-color");
+    if (color !== "rgba(0, 0, 0, 0)" && color !== "transparent")
+      return color;
+    if (elem === document.body)
+      return "white";
+    return getBackground(elem.parentNode);
+  };
+  const exportPng = async (node, config) => {
+    const { toPng } = await import('html-to-image');
+    toPng(
+      node,
+      {
+        backgroundColor: config.background,
+        cacheBust: true,
+        filter: (innerNode) => {
+          if (innerNode && innerNode.classList) {
+            return !config.exclusionClasses.some((classname) => innerNode.classList.contains(classname));
+          }
+          return true;
+        }
+      }
+    ).then((dataUrl) => {
+      const link = document.createElement("a");
+      link.download = `${config.filename}.png`;
+      link.href = dataUrl;
+      link.click();
+      cleanDOM();
+      setImageProcessing(false);
+    }).catch((err) => {
+      console.log(err);
+    });
+  };
+  const exportSvg = (node, config) => {
+    saveElement(
+      node,
+      { filename: config.filename, type: "svg", callback: () => setImageProcessing(false) },
+      { background: config.background }
+    );
+  };
+  const onSaveClick = async () => {
+    setImageProcessing(true);
+    const node = await getSelectedNode();
+    const exportConfig = {
+      background: getBackground(node),
+      exclusionClasses: ["export-hidden"],
+      filename: getFileName()
+    };
+    const exportFunction = imageFormat === formatOptions2.png ? exportPng : exportSvg;
+    try {
+      if (node) {
+        exportFunction(node, exportConfig);
+      } else {
+        throw new Error(translations["wrong_node"]);
+      }
+    } catch (error) {
+      setImageProcessing(false);
+    }
+  };
   const generatePreviews = async () => {
     const { toCanvas } = await import('html-to-image');
     Promise.all(
-      vizAvailable.map((viz) => toCanvas(getVizNode(viz.id, sectionId)))
+      vizAvailable.map((viz) => toCanvas(getVizNode(viz.id)))
     ).then((canvases) => {
       setVizPreviews(canvases.map((canvas) => canvas.toDataURL()));
       setLoadingPreviews(false);
     });
   };
-  const handleContextChange = (newValue) => {
-    setImageContext(newValue);
-    if (newValue === contextOptions.section) {
-      setImageFormat(formatOptions2.png);
-    }
-    if (newValue === contextOptions.viz && vizAvailable.length > 0) {
+  useEffect(() => {
+    if (imageContext === contextOptions.viz && vizAvailable.length > 0) {
       setVizSelected(vizAvailable[0].id);
       setLoadingPreviews(true);
       generatePreviews();
-    } else if (newValue === contextOptions.section) {
+    } else if (imageContext === contextOptions.section) {
       setVizPreviews([]);
     }
-  };
-  const onSelectViz = (vizId) => () => {
-    setVizSelected(vizId);
-  };
-  const onDownloadIframe = () => {
-    setImageProcessing(true);
-    const container = document.getElementById("iframe-preview");
-    framer.current = new Framer(container, { src: embedPath });
-  };
+  }, [imageContext]);
   useEffect(() => {
-    const onIframeLoad = (e) => {
-      if (e.data === "iframe-loaded") {
-        console.log("Downloading image");
-        const node = document.getElementById("iframe-preview");
-        if (imageFormat === formatOptions2.png) {
-          toPng(
-            node,
-            {
-              backgroundColor: transparentBackground ? "transparent" : "white",
-              cacheBust: true
-            }
-          ).then(function(dataUrl) {
-            const link = document.createElement("a");
-            link.href = dataUrl;
-            link.setAttribute("download", "image.png");
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            setImageProcessing(false);
-            if (typeof framer.current?.remove === "function") {
-              framer.current.remove();
-            }
-          }).catch(function(error) {
-            console.error("oops, something went wrong!", error);
-            setImageProcessing(false);
-          });
-        } else {
-          const iframe = document.querySelector("#iframe-preview > iframe");
-          const doc = iframe.contentDocument;
-          const svg = doc?.querySelector("svg.d3plus-viz");
-          console.log(svg.innerHtml);
-          if (svg)
-            exportSVG(svg);
-        }
+    if (vizSelected) {
+      if (vizSelectedHasSVG()) {
+        setSvgAvailable(true);
+      } else {
+        setSvgAvailable(false);
+        setImageFormat(formatOptions2.png);
       }
-    };
-    window.addEventListener("message", onIframeLoad);
-    return () => window.removeEventListener("message", onIframeLoad);
-  }, [transparentBackground]);
+    }
+  }, [vizSelected]);
   return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-image", children: [
     /* @__PURE__ */ jsx(Space, { h: "xs" }),
     vizAvailable.length > 0 ? /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_area"]}:`, children: /* @__PURE__ */ jsx(
@@ -16261,7 +16294,12 @@ function ImageTab(props) {
             ] })
           }
         ],
-        onChange: handleContextChange
+        onChange: (newValue) => {
+          setImageContext(newValue);
+          if (newValue === contextOptions.section) {
+            setImageFormat(formatOptions2.png);
+          }
+        }
       }
     ) }) : /* @__PURE__ */ jsx(Text, { fw: "700", color: "gray.7", children: `${translations["entire_section"]}:` }),
     imageContext === contextOptions.viz && vizAvailable.length > 0 && /* @__PURE__ */ jsxs(
@@ -16271,21 +16309,49 @@ function ImageTab(props) {
         style: { minHeight: "161px", position: "relative" },
         children: [
           !loadingPreviews && vizPreviews.length > 0 && /* @__PURE__ */ jsx(ScrollArea, { style: { height: 250 }, children: /* @__PURE__ */ jsx(SimpleGrid, { cols: 3, children: vizAvailable.map((vizOption, ix) => /* @__PURE__ */ jsx(
-            VizPreview2,
+            Image,
             {
-              vizId: vizOption.id,
-              isSelected: vizOption.id === vizSelected,
-              onClick: () => onSelectViz(vizAvailable[ix].id),
-              src: vizPreviews[ix]
+              alt: `Viz ${vizOption.id}`,
+              onClick: () => {
+                setVizSelected(vizOption.id);
+              },
+              style: {
+                cursor: "pointer",
+                border: vizSelected === vizOption.id ? "4px solid #228be6" : "4px solid #eee"
+              },
+              radius: 0,
+              src: vizPreviews[ix],
+              withPlaceholder: true
             },
-            vizOption.id
+            `viz-option-${vizOption.id}`
           )) }) }),
           /* @__PURE__ */ jsx(LoadingOverlay, { visible: loadingPreviews })
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { height: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { id: "iframe-preview", "data-frame-src": embedPath, style: { width: 1e3 } }) }),
-    imageFormat !== formatOptions2.svg && /* @__PURE__ */ jsx(
+    svgAvailable && imageContext !== contextOptions.section && /* @__PURE__ */ jsx(Input.Wrapper, { label: `${translations["choose_format"]}:`, children: /* @__PURE__ */ jsxs(Button.Group, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          leftIcon: /* @__PURE__ */ jsx(IconPolaroid, { size: 16 }),
+          onClick: () => setImageFormat(formatOptions2.png),
+          variant: imageFormat === formatOptions2.png ? "filled" : "default",
+          fullWidth: true,
+          children: formatOptions2.png
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          leftIcon: /* @__PURE__ */ jsx(IconCode, { size: 16 }),
+          onClick: () => setImageFormat(formatOptions2.svg),
+          variant: imageFormat === formatOptions2.svg ? "filled" : "default",
+          fullWidth: true,
+          children: formatOptions2.svg
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
       Checkbox,
       {
         checked: transparentBackground,
@@ -16299,14 +16365,14 @@ function ImageTab(props) {
       {
         leftIcon: /* @__PURE__ */ jsx(IconDownload, { size: 16 }),
         loading: imageProcessing,
-        onClick: onDownloadIframe,
+        onClick: onSaveClick,
         fullWidth: true,
         children: /* @__PURE__ */ jsx("span", { children: imageProcessing ? translations["processing"] : translations["download"].replace("{imageFormat}", imageFormat) })
       }
     )
   ] });
 }
-var contextOptions, formatOptions2, VizPreview2, DEFAULT_TRANSLATIONS4, getSectionNode, getVizNode;
+var contextOptions, formatOptions2, cleanDOM, DEFAULT_TRANSLATIONS3;
 var init_ImageTab = __esm({
   "components/options/tabs/ImageTab.tsx"() {
     init_esm_shims();
@@ -16314,12 +16380,6 @@ var init_ImageTab = __esm({
     init_store2();
     init_TranslationsProvider();
     init_ResourceProvider();
-    init_useLocalePrefix();
-    init_d3plusPropify();
-    init_varSwapRecursive();
-    init_getBlockContent();
-    init_hooks();
-    init_ShareTab();
     contextOptions = {
       viz: "viz",
       section: "section"
@@ -16328,52 +16388,11 @@ var init_ImageTab = __esm({
       png: "PNG",
       svg: "SVG"
     };
-    VizPreview2 = ({ vizId, isSelected = false, onClick = () => void 0, src = void 0 }) => {
-      const router = useRouter();
-      const { locale } = router;
-      const variables = useInputVariablesFlat(vizId);
-      const block = useBlockRef(vizId).data;
-      const content = getBlockContent(block);
-      const formatterFunctions = useFormatterFunctionsForLocale(locale);
-      const blockContext = { variables };
-      const transpiledLogic = varSwapRecursive_default({ logic: content.logic }, formatterFunctions, blockContext).logic;
-      const globals = {
-        router
-      };
-      const props = d3plusPropify_default(transpiledLogic, formatterFunctions, variables, locale, vizId, {}, globals);
-      const { title } = props.config;
-      return /* @__PURE__ */ jsxs(Stack, { align: "center", spacing: "xs", children: [
-        /* @__PURE__ */ jsx(
-          Image,
-          {
-            alt: `Viz ${vizId}`,
-            onClick,
-            style: {
-              cursor: "pointer",
-              border: isSelected ? "4px solid #228be6" : "4px solid #eee"
-            },
-            radius: 0,
-            src,
-            withPlaceholder: true
-          },
-          `viz-option-${vizId}`
-        ),
-        title && /* @__PURE__ */ jsx(
-          Text,
-          {
-            fz: "0.8rem",
-            fw: 700,
-            bg: isSelected ? "rgba(0, 0, 0, 0.2)" : "transparent",
-            w: "fit-content",
-            px: "xs",
-            sx: { borderRadius: "0.3rem" },
-            ta: "center",
-            children: title
-          }
-        )
-      ] });
+    cleanDOM = () => {
+      const sourceNodes = document.getElementsByClassName("bespoke-Viz-source");
+      Array.from(sourceNodes).forEach((node) => node.remove());
     };
-    DEFAULT_TRANSLATIONS4 = {
+    DEFAULT_TRANSLATIONS3 = {
       "wrong_node": "Wrong node in export",
       "choose_area": "Choose image area",
       "choose_viz": "Choose visualization",
@@ -16385,14 +16404,118 @@ var init_ImageTab = __esm({
       "viz_only": "Visualization only",
       "source": "Source: {src}"
     };
-    getSectionNode = (sectionId) => {
-      console.log({ sectionId });
-      const sectionNode = document.getElementById(sectionId);
-      return select(sectionNode).select(".bespoke-section-content").node();
-    };
-    getVizNode = (vizId, sectionId) => {
-      const sectionNode = getSectionNode(sectionId);
-      return select(sectionNode).select(`#bespoke-visualization-${vizId}.bespoke-block-area`).node();
+  }
+});
+function CopyInput(props) {
+  const { title, url, disabled = false } = props;
+  const Icon = disabled ? IconCode : IconLink;
+  return /* @__PURE__ */ jsx(Input.Wrapper, { label: title, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, {}),
+      value: url,
+      disabled,
+      readOnly: true,
+      rightSection: /* @__PURE__ */ jsx(CopyButton, { value: url, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "right", children: /* @__PURE__ */ jsx(ActionIcon, { variant: copied ? "filled" : "subtle", onClick: copy, disabled, children: copied ? /* @__PURE__ */ jsx(IconClipboardCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconClipboardCopy, { size: 16 }) }) }) })
+    }
+  ) });
+}
+var init_CopyInput = __esm({
+  "components/options/CopyInput.tsx"() {
+    init_esm_shims();
+  }
+});
+function ShareTab(props) {
+  const { section } = props;
+  const [shareUrl, setShareUrl] = useState("");
+  const [title, setTitle] = useState("");
+  const [includeSection, setIncludeSection] = useState(true);
+  const optionsTranslations = useBespokeTranslations("options");
+  const translations = { ...DEFAULT_TRANSLATIONS4, ...optionsTranslations["share_tab"] };
+  useEffect(() => {
+    setTitle(document.title);
+    const { origin, pathname } = window.location;
+    const url = `${origin}${pathname}`;
+    const sectionAnchor = includeSection ? `#section-${section.id}` : "";
+    setShareUrl(`${url}${sectionAnchor}`);
+  }, [includeSection]);
+  return /* @__PURE__ */ jsxs(Stack, { className: "cms-section-options-share", children: [
+    /* @__PURE__ */ jsx(Space, { h: "xs" }),
+    /* @__PURE__ */ jsx(CopyInput, { title: `${translations["title"]}: ${title}`, url: shareUrl }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: includeSection,
+        label: translations["include_section"],
+        onChange: () => setIncludeSection(!includeSection),
+        radius: "xl"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { position: "center", children: [
+      /* @__PURE__ */ jsx(
+        FacebookShareButton,
+        {
+          url: shareUrl,
+          quote: title,
+          children: /* @__PURE__ */ jsx(FacebookIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TwitterShareButton,
+        {
+          url: shareUrl,
+          title,
+          children: /* @__PURE__ */ jsx(TwitterIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TelegramShareButton,
+        {
+          url: shareUrl,
+          title,
+          children: /* @__PURE__ */ jsx(TelegramIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        WhatsappShareButton,
+        {
+          url: shareUrl,
+          title,
+          separator: ":: ",
+          children: /* @__PURE__ */ jsx(WhatsappIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(LinkedinShareButton, { url: shareUrl, children: /* @__PURE__ */ jsx(LinkedinIcon, { size: 32, round: true }) }),
+      /* @__PURE__ */ jsx(
+        RedditShareButton,
+        {
+          url: shareUrl,
+          title,
+          windowWidth: 660,
+          windowHeight: 460,
+          children: /* @__PURE__ */ jsx(RedditIcon, { size: 32, round: true })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EmailShareButton,
+        {
+          url: shareUrl,
+          subject: title,
+          children: /* @__PURE__ */ jsx(EmailIcon, { size: 32, round: true })
+        }
+      )
+    ] })
+  ] });
+}
+var DEFAULT_TRANSLATIONS4;
+var init_ShareTab = __esm({
+  "components/options/tabs/ShareTab.tsx"() {
+    init_esm_shims();
+    init_CopyInput();
+    init_TranslationsProvider();
+    DEFAULT_TRANSLATIONS4 = {
+      "title": "Title",
+      "include_section": "Include Section"
     };
   }
 });
@@ -17192,7 +17315,7 @@ var init_site = __esm({
   }
 });
 function ImageCredits({ previews, translations }) {
-  const { isPrint } = useMode();
+  const print = usePrint();
   const credits = useMemo(() => previews.map(
     ({ image, name }, idx) => (image?.author || image?.url) && /* @__PURE__ */ jsxs(Stack, { spacing: 0, children: [
       image.author && /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
@@ -17217,7 +17340,7 @@ function ImageCredits({ previews, translations }) {
       idx + 1 < previews.length && /* @__PURE__ */ jsx(Divider, {})
     ] }, image.id)
   ), [previews]);
-  return /* @__PURE__ */ jsx(Fragment, { children: isPrint ? /* @__PURE__ */ jsx(Fragment, { children: credits }) : /* @__PURE__ */ jsxs(Popover, { position: "right", children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: print ? /* @__PURE__ */ jsx(Fragment, { children: credits }) : /* @__PURE__ */ jsxs(Popover, { position: "right", children: [
     /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", radius: "xl", children: /* @__PURE__ */ jsx(IconPhoto, { size: 20 }) }) }),
     /* @__PURE__ */ jsx(Popover.Dropdown, { children: credits })
   ] }) });
@@ -17237,7 +17360,7 @@ function SectionWrapper({
   previews,
   translations
 }) {
-  const { isPrint, isEmbed } = useMode();
+  const print = usePrint();
   const showCredits = sectionSettings2.memberImageBg && previews.some(({ image }) => image && (image.url || image.author));
   return /* @__PURE__ */ jsxs(
     PositionWrapper,
@@ -17253,12 +17376,12 @@ function SectionWrapper({
             className: `bespoke-Section-${id} bespoke-Section-container `,
             settings: sectionSettings2,
             styles: sectionStyles?.container,
-            id: slugify_default(name) || `section-${id}`,
+            id: name || `section-${id}`,
             pos: "relative",
             children: [
-              !isPrint && /* @__PURE__ */ jsxs(Group, { position: "right", mb: "xs", children: [
+              !print && /* @__PURE__ */ jsxs(Group, { position: "right", mb: "xs", children: [
                 /* @__PURE__ */ jsx(SectionResetButton, { id }),
-                sectionSettings2.optionsMenu && !isEmbed && /* @__PURE__ */ jsx(Options, { sectionId: id, disabled: false })
+                sectionSettings2.optionsMenu && /* @__PURE__ */ jsx(Options, { sectionId: id, disabled: false })
               ] }),
               /* @__PURE__ */ jsxs(
                 StyleWrapper,
@@ -17285,21 +17408,14 @@ function Section({ section }) {
     ...defaultSectionSettings,
     ...settings
   };
-  const { query } = useRouter();
   const comparison = useComparison();
-  const { isEmbed } = useMode();
   const state = useAppSelector((state2) => state2);
   const status = useAppSelector((state2) => state2.variables.status);
   const previews = useAppSelector((state2) => state2.status.previews);
   const comparisonPreviews = comparison.active && comparison.status ? previews.concat(comparison.status?.previews || []) : previews;
   const sectionStyles = useBespokeStyles()["Section"];
   const blockRecords = selectBlockRecords(state);
-  let sectionBlocks = [];
-  if (isEmbed && query.viz) {
-    sectionBlocks = Object.values(blockRecords || {}).filter((d2) => d2.section_id === id && d2.id === Number(query.viz));
-  } else {
-    sectionBlocks = Object.values(blockRecords || {}).filter((d2) => d2.section_id === id);
-  }
+  const sectionBlocks = Object.values(blockRecords || {}).filter((d2) => d2.section_id === id);
   const sectionTranslations = useBespokeTranslations("sections");
   const translations = { ...DEFAULT_TRANSLATIONS6, ...sectionTranslations };
   const allowedSection = sectionBlocks.some((b2) => {
@@ -17407,7 +17523,7 @@ function Section({ section }) {
       );
     });
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     SectionWrapper,
     {
       id,
@@ -17416,24 +17532,21 @@ function Section({ section }) {
       sectionSettings: sectionSettings2,
       sectionStyles,
       translations,
-      children: [
-        /* @__PURE__ */ jsx(
-          ColumnsWrapper,
-          {
-            containerProps: {
-              gap: sectionSettings2.columnGutter || "md",
-              wrap: comparison.active ? "nowrap" : "wrap",
-              sx: { zIndex: 20 }
-            },
-            children: sectionColumns
-          }
-        ),
-        isEmbed && /* @__PURE__ */ jsx(EmbedSectionSrc, {})
-      ]
+      children: /* @__PURE__ */ jsx(
+        ColumnsWrapper,
+        {
+          containerProps: {
+            gap: sectionSettings2.columnGutter || "md",
+            wrap: comparison.active ? "nowrap" : "wrap",
+            sx: { zIndex: 20 }
+          },
+          children: sectionColumns
+        }
+      )
     }
   );
 }
-var DEFAULT_TRANSLATIONS6, getStyles, PositionWrapper, WidthWrapper, StyleWrapper, EmbedSectionSrc, Section_default;
+var DEFAULT_TRANSLATIONS6, getStyles, PositionWrapper, WidthWrapper, StyleWrapper, Section_default;
 var init_Section = __esm({
   "frontend/components/report/Section.tsx"() {
     init_esm_shims();
@@ -17454,9 +17567,6 @@ var init_Section = __esm({
     init_TranslationsProvider();
     init_ImageCredits();
     init_ComparisonProvider();
-    init_ResourceProvider();
-    init_useLocalePrefix();
-    init_slugify();
     DEFAULT_TRANSLATIONS6 = {
       "image_by": "image by"
     };
@@ -17517,56 +17627,18 @@ var init_Section = __esm({
       const sx = [defaultStyles[variant], getStyles(styles, settings)];
       return /* @__PURE__ */ jsx(Paper, { sx, ...defaultProps2[variant], ...props, children });
     };
-    EmbedSectionSrc = () => {
-      const router = useRouter();
-      const { query, locale } = router;
-      const { siteProps, profilePrefix, pathSegment } = useBespoke();
-      const querySlugs = query[pathSegment];
-      const slugs = Array.isArray(querySlugs) ? querySlugs?.join("/") : [];
-      const prefixLocale = useLocalePrefix();
-      let path = prefixLocale ? `/${locale}` : "";
-      path += `/${profilePrefix}/${slugs}/`;
-      const link = new URL(path, window?.location.href).href;
-      return /* @__PURE__ */ jsxs(Group, { position: "apart", noWrap: true, sx: { flexGrow: 1 }, children: [
-        /* @__PURE__ */ jsx(Anchor, { href: link, target: "_blank", children: link }),
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: siteProps.logoSrc,
-            width: "auto",
-            height: 40,
-            alt: "Site Logo"
-          }
-        )
-      ] });
-    };
     Section_default = Section;
   }
 });
-function useMode() {
-  const mode = useContext(ModeContext);
-  return {
-    mode,
-    isPrint: mode === MODES.print,
-    isEmbed: mode === MODES.embed,
-    isReport: mode === MODES.report
-  };
+function usePrint() {
+  return useContext(PrintContext);
 }
-function Report({ pathSegmentsKey = "bespoke", mode = "report" }) {
-  const router = useRouter();
-  const { asPath, query } = router;
+function Report({ pathSegmentsKey = "bespoke" }) {
+  const { asPath, query } = useRouter();
   const sectionList = useSectionList();
   const comparison = useComparison();
-  const [reportMode, setReportMode] = useState(mode);
-  useEffect(() => {
-    if (router.isReady) {
-      const { mode: mode2 } = router.query;
-      if (mode2 && typeof mode2 === "string" && Object.values(MODES).includes(mode2)) {
-        setReportMode(mode2);
-      }
-    }
-  }, [router.isReady, router.query]);
-  const printBtn = yn4(router.query.printBtn) ?? false;
+  const print = yn4(query.print) ?? false;
+  const printBtn = yn4(query.printBtn) ?? false;
   const [downloadLoading, setDownloadLoading] = useState(false);
   const printReport = () => {
     setDownloadLoading(true);
@@ -17581,8 +17653,8 @@ function Report({ pathSegmentsKey = "bespoke", mode = "report" }) {
     });
   };
   useScrollToAnchor();
-  return /* @__PURE__ */ jsxs(ModeContext.Provider, { value: reportMode, children: [
-    mode === MODES.print && /* @__PURE__ */ jsx(MediaQuery, { query: "print", styles: { display: "block" }, children: /* @__PURE__ */ jsx(Title, { display: "none", children: "This is the report header" }) }),
+  return /* @__PURE__ */ jsxs(PrintContext.Provider, { value: print, children: [
+    print && /* @__PURE__ */ jsx(MediaQuery, { query: "print", styles: { display: "block" }, children: /* @__PURE__ */ jsx(Title, { display: "none", children: "This is the report header" }) }),
     /* @__PURE__ */ jsxs(Container, { id: "bespoke-report", className: comparison.comparisonLoaded ? "compare" : "", p: 0, pos: "relative", fluid: true, children: [
       sectionList.isSuccess && sectionList.data.sort(orderSort).map((section) => /* @__PURE__ */ jsx(Section_default, { section }, section.id)),
       /*pdf.active*/
@@ -17590,7 +17662,7 @@ function Report({ pathSegmentsKey = "bespoke", mode = "report" }) {
     ] })
   ] });
 }
-var MODES, ModeContext, Report_default;
+var PrintContext, Report_default;
 var init_Report = __esm({
   "frontend/components/report/Report.tsx"() {
     init_esm_shims();
@@ -17599,12 +17671,7 @@ var init_Report = __esm({
     init_Section();
     init_ComparisonProvider();
     init_useScrollToAnchor();
-    MODES = {
-      report: "report",
-      print: "print",
-      embed: "embed"
-    };
-    ModeContext = createContext("report");
+    PrintContext = createContext(false);
     Report_default = Report;
   }
 });
@@ -17730,7 +17797,7 @@ init_esm_shims();
 var UserProvider_default = UserProvider;
 
 // frontend/index.ts
-init_hooks2();
+init_ExploreProvider();
 
 // frontend/components/auth/withPageRoleAuthRequired.tsx
 init_esm_shims();
@@ -18057,7 +18124,8 @@ function parseSearchMemberParams(query) {
     report,
     all: localeIsAll,
     sort: normalizeList(query.sort)[0],
-    direction: normalizeList(query.direction)[0]
+    direction: normalizeList(query.direction)[0],
+    offset: Number(query.offset || 0)
   };
 }
 
@@ -18318,7 +18386,7 @@ function VariantSelector(props) {
   const showAsLabel = variantsData.length === 1 || !active;
   const [_variant, setVariant] = useUncontrolled({
     value: value ? String(value) : void 0,
-    defaultValue: variantsData[0].value,
+    defaultValue: variantsData[0] ? variantsData[0].value : "",
     finalValue: void 0,
     onChange: onChange ? (v2) => onChange(Number(v2)) : void 0
   });
@@ -18329,7 +18397,7 @@ function VariantSelector(props) {
     {
       onClick: () => setActive(true),
       clickable: variantsData.length > 1,
-      children: displayValue.label
+      children: displayValue ? displayValue.label : "No Variant"
     }
   ) : /* @__PURE__ */ jsx(
     Select,
@@ -18357,7 +18425,7 @@ function DimensionAutocomplete(props) {
   const [_variant, setVariant] = useUncontrolled({
     value: void 0,
     defaultValue: value?.variantId,
-    finalValue: Number(variantsData[0].value),
+    finalValue: variantsData[0] ? Number(variantsData[0].value) : 0,
     onChange: () => {
       setMember({});
     }
@@ -18734,6 +18802,18 @@ init_esm_shims();
 init_EntityDeleteButton();
 init_Dialog();
 init_store2();
+
+// libs/settings/variant.tsx
+init_esm_shims();
+var getVariantSettingsDefaults = (settings) => ({
+  overrideNames: settings && typeof settings.overrideNames !== "undefined" ? settings.overrideNames : false,
+  overrideRelevance: settings && typeof settings.overrideRelevance !== "undefined" ? settings.overrideRelevance : false,
+  regenerateSlugs: settings && typeof settings.regenerateSlugs !== "undefined" ? settings.regenerateSlugs : false,
+  keepOldMembers: settings && typeof settings.keepOldMembers !== "undefined" ? settings.keepOldMembers : true,
+  doIngest: settings && typeof settings.doIngest !== "undefined" ? settings.doIngest : false,
+  overrideAttributes: settings && typeof settings.overrideAttributes !== "undefined" ? settings.overrideAttributes : false,
+  order: settings && typeof settings.order !== "undefined" ? settings.order : 0
+});
 function VariantCard({ for: variant, onEdit }) {
   const theme = useMantineTheme();
   const { newConfirmation } = useDialog();
@@ -18750,13 +18830,18 @@ function VariantCard({ for: variant, onEdit }) {
       console.debug("Variant edition aborted.");
     }
   }, [onEdit]);
-  const { slug, name } = variant;
+  const { slug, name, settings } = variant;
+  const variantSettings = getVariantSettingsDefaults(settings);
   return /* @__PURE__ */ jsxs(Card, { shadow: "xs", withBorder: true, style: { margin: theme.spacing.sm }, children: [
     /* @__PURE__ */ jsxs(Group, { position: "apart", children: [
       /* @__PURE__ */ jsxs(Center, { children: [
         /* @__PURE__ */ jsx(IconServer, { size: 22 }),
         /* @__PURE__ */ jsx(Space, { w: "xs" }),
-        /* @__PURE__ */ jsx(Text, { weight: "bold", children: name })
+        /* @__PURE__ */ jsx(Text, { weight: "bold", children: name }),
+        /* @__PURE__ */ jsxs(Text, { size: "xs", ml: "xs", children: [
+          "Order: ",
+          variantSettings.order
+        ] })
       ] }),
       /* @__PURE__ */ jsxs(Badge, { variant: "light", children: [
         "/",
@@ -19017,17 +19102,6 @@ function MembersTable({ members, onClickEdit, onSort, colsToRender = [], dataTab
   );
 }
 
-// libs/settings/variant.tsx
-init_esm_shims();
-var getVariantSettingsDefaults = (settings) => ({
-  overrideNames: settings && typeof settings.overrideNames !== "undefined" ? settings.overrideNames : false,
-  overrideRelevance: settings && typeof settings.overrideRelevance !== "undefined" ? settings.overrideRelevance : false,
-  regenerateSlugs: settings && typeof settings.regenerateSlugs !== "undefined" ? settings.regenerateSlugs : false,
-  keepOldMembers: settings && typeof settings.keepOldMembers !== "undefined" ? settings.keepOldMembers : true,
-  doIngest: settings && typeof settings.doIngest !== "undefined" ? settings.doIngest : false,
-  overrideAttributes: settings && typeof settings.overrideAttributes !== "undefined" ? settings.overrideAttributes : false
-});
-
 // components/builder/components/SwitchWithTooltip.tsx
 init_esm_shims();
 function SwitchWithTooltip({ switchProps, yesText, noText }) {
@@ -19312,6 +19386,7 @@ function VariantEditor({ for: variant, onClose: closeHandler }) {
   };
   const onSubmit = () => {
     setLoading(true);
+    console.log(variantConfig.settings);
     dispatch(actions_exports.updateEntity("variant", variantConfig)).then(() => {
       setLoading(false);
       closeHandler();
@@ -19415,6 +19490,19 @@ function VariantEditor({ for: variant, onClose: closeHandler }) {
                 ] }) : false,
                 onChange: (e) => onChange("slug", e.target.value)
               }
+            ),
+            /* @__PURE__ */ jsx(Space, { h: "xs" }),
+            /* @__PURE__ */ jsx(
+              NumberInput,
+              {
+                value: variantSettings.order || 0,
+                description: "It affects on explore options order",
+                placeholder: "Order",
+                label: "Order",
+                onChange: (v2) => {
+                  onChangeSettings("order", v2);
+                }
+              }
             )
           ] }),
           /* @__PURE__ */ jsxs(Tabs.Panel, { value: "members", py: "md", children: [
@@ -19770,11 +19858,23 @@ function ReportEditor({ id, onClose: closeHandler }) {
   const onChange = useCallback((field, value) => {
     setConfig({ ...config, [field]: value });
   }, []);
+  const onChangeSettings = (field, value) => {
+    setConfig({
+      ...config,
+      //config: configUpdate,
+      settings: {
+        ...config.settings,
+        [field]: value
+      }
+    });
+  };
   if (isEditing) {
     return /* @__PURE__ */ jsx(DimensionEditor, { id: isEditing, onClose: () => setEditing(null) });
   }
   const loading = ref.isFetching;
   const dimensions = ref.isSuccess ? ref.data.dimensions : [];
+  const settings = config.settings;
+  const order2 = settings && settings.order ? settings.order : 0;
   return /* @__PURE__ */ jsx(
     DrawerContentWithScroll,
     {
@@ -19789,7 +19889,20 @@ function ReportEditor({ id, onClose: closeHandler }) {
             onChange: (e) => onChange("name", e.target.value)
           }
         ),
-        /* @__PURE__ */ jsx(Divider, { my: "xl" }),
+        /* @__PURE__ */ jsx(Divider, { my: "sm" }),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            value: order2 || 0,
+            description: "It affects on explore options order",
+            placeholder: "Order",
+            label: "Order",
+            onChange: (v2) => {
+              onChangeSettings("order", v2);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { my: "sm" }),
         /* @__PURE__ */ jsx(IconTitle, { icon: /* @__PURE__ */ jsx(IconDatabase, { size: 22 }), children: /* @__PURE__ */ jsx(Title, { order: 2, size: "h4", children: "Dimensions" }) }),
         /* @__PURE__ */ jsx(Grid, { children: dimensions.map((d2) => /* @__PURE__ */ jsx(Grid.Col, { span: 6, children: /* @__PURE__ */ jsx(DimensionCardWithFetcher, { id: d2, onEdit: setEditing }) }, d2)) }),
         /* @__PURE__ */ jsx(
@@ -25844,16 +25957,15 @@ function BespokeRenderer({
   siteProps,
   profilePrefix = "/defaultPath",
   loader = /* @__PURE__ */ jsx(LoadingOverlay, { visible: true }),
-  mode = "report",
   mantineProviderProps = {}
 }) {
-  const loading = useInitialState(pathSegmentsKey, mode);
+  const loading = useInitialState(pathSegmentsKey);
   if (loading)
     return /* @__PURE__ */ jsx(Fragment, { children: loader });
-  return /* @__PURE__ */ jsx(MantineProvider, { ...mantineProviderProps, theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: pathSegmentsKey, profilePrefix, siteProps, children: [
-    /* @__PURE__ */ jsx(TranslationsProvider, { translations, children: /* @__PURE__ */ jsx(ComparisonProvider, { children: /* @__PURE__ */ jsx(PdfProvider, { children: /* @__PURE__ */ jsx(Report_default, { pathSegmentsKey, mode }) }) }) }),
-    /* @__PURE__ */ jsx("small", { className: "bespoke-timestamp", hidden: true, children: buildTime })
+  return /* @__PURE__ */ jsx(MantineProvider, { ...mantineProviderProps, theme: { other: { bespokeStyles } }, inherit: true, children: /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment: "bespoke", profilePrefix, siteProps, children: [
+    /* @__PURE__ */ jsx(TranslationsProvider, { translations, children: /* @__PURE__ */ jsx(ComparisonProvider, { children: /* @__PURE__ */ jsx(PdfProvider, { children: /* @__PURE__ */ jsx(Report_default, {}) }) }) }),
+    /* @__PURE__ */ jsx("small", { className: "bespoke-timestamp", 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, useEmbed };
+export { Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, ExploreProvider as BespokeExploreProvider, 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, useExplore as useBespokeExplore, useAppSelector as useBespokeSelector, useUser_default as useBespokeUser, useDialog };