@datawheel/bespoke 0.1.10 → 0.1.11

package/dist/index.js

@@ -15,14 +15,14 @@ import { NotificationsProvider, showNotification } from '@mantine/notifications'
 import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, useRef, createElement, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Stack, Text, Badge, Group, Tooltip, ActionIcon, Center, useMantineTheme, Modal, Button, Title, Select, MultiSelect, MantineProvider, AppShell, Navbar, UnstyledButton, Skeleton, Container, TextInput, Loader, LoadingOverlay, Alert, Autocomplete, Chip, Card, Space, Code, Divider, SegmentedControl, Overlay, Grid, ThemeIcon, Burger, Popover, Checkbox, Radio, Switch, ScrollArea, Drawer, Header, Input, Avatar, Textarea, Tabs, FileInput, SimpleGrid, Image, Accordion, NumberInput, CopyButton, Col, Menu } from '@mantine/core';
-import { IconInfoCircle, IconCircleDashed, IconSearch, IconTrash, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCirclePlus, IconCircleX, IconFileAnalytics, IconPlus, IconBoxMargin, IconTable, IconMathFunction, IconChevronLeft, IconSettings, IconAlignLeft, IconAlignCenter, IconAlignRight, IconMenu, IconRefresh, IconPolaroid, IconCircleMinus, IconEyeOff, IconLogout, IconLogin, IconWorld, IconCamera, IconShare, IconVariable, IconArrowRightCircle, IconUpload, IconPalette, IconCode, IconExternalLink, IconDownload, IconTemplate, IconChartBar, IconLink, IconClipboardCheck, IconClipboardCopy, IconEye, IconRss, IconGlobe } from '@tabler/icons';
+import { Stack, Text, Badge, Group, Tooltip, ActionIcon, Center, useMantineTheme, Modal, Button, Title, Select, MultiSelect, MantineProvider, UnstyledButton, ThemeIcon, Burger, Navbar, AppShell, Skeleton, Container, TextInput, Loader, LoadingOverlay, Alert, Autocomplete, Chip, Card, Space, Code, Divider, SegmentedControl, Overlay, Grid, Popover, Checkbox, Radio, Switch, ScrollArea, Drawer, Header, Input, Textarea, Avatar, Tabs, FileInput, SimpleGrid, Image, Accordion, NumberInput, CopyButton, Col, Menu } from '@mantine/core';
+import { IconInfoCircle, IconBoxMargin, IconTable, IconMathFunction, IconSearch, IconTrash, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconCirclePlus, IconCircleX, IconFileAnalytics, IconPlus, IconCircleDashed, IconChevronLeft, IconSettings, IconAlignLeft, IconAlignCenter, IconAlignRight, IconMenu, IconRefresh, IconPolaroid, IconCircleMinus, IconEyeOff, IconLogout, IconLogin, IconWorld, IconCamera, IconShare, IconVariable, IconArrowRightCircle, IconUpload, IconPalette, IconCode, IconExternalLink, IconDownload, IconTemplate, IconChartBar, IconLink, IconClipboardCheck, IconClipboardCopy, IconEye, IconRss, IconGlobe } from '@tabler/icons';
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
-import { useDebouncedValue, useMediaQuery, useDisclosure, useHotkeys, useUncontrolled, getHotkeyHandler } from '@mantine/hooks';
-import Link$1 from 'next/link';
+import { useDisclosure, useDebouncedValue, useMediaQuery, useHotkeys, useUncontrolled, getHotkeyHandler } from '@mantine/hooks';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { HashRouter, Link, Routes, Route, useParams, useLocation, useNavigate } from 'react-router-dom';
+import Head from 'next/head';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import slugifyFn from 'slugify';
 import { Prism } from '@mantine/prism';
@@ -665,13 +665,13 @@ var init_valueInOptions = __esm({
   "libs/selectors/valueInOptions.ts"() {
     init_esm_shims();
     init_cms();
-    valueInOptions_default = (type, value, options2) => {
-      if (!options2)
+    valueInOptions_default = (type, value, options) => {
+      if (!options)
         return false;
       if (type === SELECTOR_TYPES.SINGLE) {
-        return options2.find((obj) => obj.id === value);
+        return options.find((obj) => obj.id === value);
       }
-      return Array.isArray(value) && value.every((d) => options2.map((o) => o.id).includes(d));
+      return Array.isArray(value) && value.every((d) => options.map((o) => o.id).includes(d));
     };
   }
 });
@@ -694,23 +694,23 @@ var init_runSelector = __esm({
       const { vars, log, error } = evalResult;
       const type = vars.type || SELECTOR_TYPES.SINGLE;
       const name = vars.name || "Unlabeled Selector";
-      const options2 = scaffoldDynamic_default(vars.options || []);
+      const options = scaffoldDynamic_default(vars.options || []);
       const maybeFixForMulti2 = (defaultValue2) => type === SELECTOR_TYPES.MULTI && !Array.isArray(defaultValue2) ? [defaultValue2] : defaultValue2;
       let potentialDefaultValue = vars.defaultValue;
       let defaultValue;
       if (potentialDefaultValue) {
         potentialDefaultValue = maybeFixForMulti2(potentialDefaultValue);
-        if (valueInOptions_default(type, potentialDefaultValue, options2))
+        if (valueInOptions_default(type, potentialDefaultValue, options))
           defaultValue = potentialDefaultValue;
       }
       if (!defaultValue) {
-        const fallbackValue = options2 && options2[0] && options2[0].id || options2[0] || "";
+        const fallbackValue = options && options[0] && options[0].id || options[0] || "";
         defaultValue = maybeFixForMulti2(fallbackValue);
       }
       const config = {
         name,
         type,
-        options: options2,
+        options,
         defaultValue
       };
       return { config, log, error };
@@ -729,10 +729,10 @@ var init_selectorQueryToVariable = __esm({
       const queryObject = new URLSearchParams(query);
       if (config.type === SELECTOR_TYPES.MULTI) {
         const queryIds = queryObject.get(accessor) ? queryObject.get(accessor).split(",") : config.defaultValue;
-        const options2 = config.options.filter((d) => queryIds.includes(d.id));
+        const options = config.options.filter((d) => queryIds.includes(d.id));
         return {
           [`selector${id}id`]: queryIds,
-          [`selector${id}label`]: (options2 || []).map((d) => d.label)
+          [`selector${id}label`]: (options || []).map((d) => d.label)
         };
       }
       const queryId = queryObject.get(accessor) ? queryObject.get(accessor) : config.defaultValue;
@@ -1892,6 +1892,7 @@ __export(actions_exports, {
   readMetadata: () => readMetadata,
   recalculateVariables: () => recalculateVariables,
   reportSearch: () => reportSearch,
+  searchMember: () => searchMember,
   searchRegenerate: () => searchRegenerate,
   setQueryParam: () => setQueryParam,
   updateEntity: () => updateEntity,
@@ -1940,6 +1941,14 @@ function readMember(params) {
     return result.data;
   };
 }
+function searchMember(params) {
+  return async (_, __, api) => {
+    const result = await api.searchMember(params);
+    if (result.ok === true)
+      return result.data;
+    throw new Error(result.error);
+  };
+}
 async function setStatusQuery(resource, dispatch, getState, status) {
   const oldStatus = getState().status;
   const newStatus = { ...oldStatus, ...status };
@@ -2018,17 +2027,24 @@ var init_actions = __esm({
     init_recordsActions();
   }
 });
-function ResourceProvider({ children }) {
+function ResourceProvider(props) {
+  const { pathSegment } = props;
   const formatters = useFormatterList();
   const value = useMemo(() => ({
-    formatterFunctions: Object.fromEntries(
-      locales2.map((locale) => [
-        locale,
-        formatters.data ? funcifyFormattersByLocale(formatters.data, locale) : {}
-      ])
-    )
-  }), [formatters]);
-  return /* @__PURE__ */ jsx(ResourceContext.Provider, { value, children });
+    pathSegment,
+    formatterFunctions: locales2.reduce((acc, locale) => ({
+      ...acc,
+      [locale]: formatters.data ? funcifyFormattersByLocale(formatters.data, locale) : {}
+    }), {})
+  }), [formatters, pathSegment]);
+  return /* @__PURE__ */ jsx(ResourceContext.Provider, { value, children: props.children });
+}
+function useBespoke() {
+  const context = useContext(ResourceContext);
+  if (context === void 0) {
+    throw new Error("useBespoke must be used inside ResourceProvider");
+  }
+  return context;
 }
 var locales2, initialContext, ResourceContext;
 var init_ResourceProvider = __esm({
@@ -2039,6 +2055,7 @@ var init_ResourceProvider = __esm({
     init_store2();
     ({ locales: locales2 } = getLocales_default());
     initialContext = {
+      pathSegment: "path",
       formatterFunctions: locales2.reduce((acc, d) => ({ ...acc, [d]: {} }), {})
     };
     ResourceContext = createContext(initialContext);
@@ -2806,7 +2823,7 @@ function ExploreTile({ profile, profilePrefix }) {
   return /* @__PURE__ */ jsx(Grid.Col, { xs: 12, sm: 6, md: 4, lg: 4, xl: 3, children: /* @__PURE__ */ jsxs(Card, { shadow: "sm", p: "lg", radius: "md", withBorder: true, children: [
     /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Group, { grow: true, spacing: 0, children: images }) }),
     /* @__PURE__ */ jsx(Group, { position: "apart", mt: "md", mb: "xs", children: names }),
-    /* @__PURE__ */ jsx(Link$1, { href: url, children: /* @__PURE__ */ jsx(Button, { variant: "light", color: "blue", fullWidth: true, mt: "md", radius: "md", children: `See ${profile.report.name} Report` }) })
+    /* @__PURE__ */ jsx(Link, { href: url, children: /* @__PURE__ */ jsx(Button, { variant: "light", color: "blue", fullWidth: true, mt: "md", radius: "md", children: `See ${profile.report.name} Report` }) })
   ] }) }, profile.id);
 }
 var ExploreTile_default = ExploreTile;
@@ -3116,8 +3133,74 @@ init_store2();
 // views/index.tsx
 init_esm_shims();
 
-// views/BespokeCMS.tsx
+// views/BespokeManager.tsx
+init_esm_shims();
+
+// components/commons/BespokeLogo.tsx
+init_esm_shims();
+function BespokeLogo(props) {
+  const content = /* @__PURE__ */ jsxs(Group, { spacing: 0, children: [
+    /* @__PURE__ */ jsx(IconCircleDashed, { size: 30, color: "black" }),
+    /* @__PURE__ */ jsx(Space, { w: "sm" }),
+    /* @__PURE__ */ jsx(Text, { fz: "lg", children: "Bespoke" }),
+    /* @__PURE__ */ jsx(Text, { fz: "xs", sx: { alignSelf: "start" }, children: "beta" })
+  ] });
+  if (!props.href)
+    return content;
+  return /* @__PURE__ */ jsx(Link, { href: props.href, passHref: true, children: /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      component: "a",
+      sx: (theme) => ({
+        display: "block",
+        width: "100%",
+        borderRadius: theme.radius.sm,
+        padding: theme.spacing.xs
+      }),
+      children: content
+    }
+  ) });
+}
+
+// components/commons/useLocation.tsx
 init_esm_shims();
+init_ResourceProvider();
+function useManagerLocation() {
+  const { pathSegment } = useBespoke();
+  const router = useRouter();
+  return useMemo(() => {
+    const pathParts = router.pathname.split("/");
+    if (Object.keys(router.query).length > 0) {
+      pathParts.pop();
+    }
+    const basePath = pathParts.join("/");
+    const [page, ...params] = [].concat(router.query[pathSegment] || []);
+    const href = (...pathTokens) => {
+      return [basePath, ...pathTokens].join("/");
+    };
+    return {
+      router,
+      page,
+      params,
+      basePath,
+      href,
+      matches(...pathTokens) {
+        return router.asPath === href(...pathTokens);
+      },
+      push(url, as, options) {
+        const correctedUrl = href(url);
+        router.push(correctedUrl, as, options);
+      },
+      replace(url, as, options) {
+        const correctedUrl = href(url);
+        router.replace(correctedUrl, as, options);
+      }
+    };
+  }, [router.asPath]);
+}
+
+// views/BespokeManager.tsx
+init_ResourceProvider();
 
 // views/EditReport.tsx
 init_esm_shims();
@@ -4303,7 +4386,7 @@ function ReportEditor({ id, onClose: closeHandler }) {
 init_ResourceProvider();
 function CMSHeader(props) {
   const { id } = props;
-  const nav = useNavigate();
+  const location = useManagerLocation();
   const dispatch = useAppDispatch();
   const resource = useContext(ResourceContext);
   const localeDefault8 = useAppSelector((state) => state.status.localeDefault);
@@ -4320,8 +4403,8 @@ function CMSHeader(props) {
     return reportList.data.map((d) => ({ value: `${d.id}`, label: d.name }));
   }, [reportList.status]);
   const onChangeReport = useCallback((value) => {
-    nav(`/reports/${value}`);
-  }, []);
+    location.push(`/reports/${value}`);
+  }, [location]);
   const onSelectPreview = (previewMember) => {
     const newPreviews = currentReport.dimensions.map((dId) => {
       let member;
@@ -4353,7 +4436,7 @@ function CMSHeader(props) {
     return /* @__PURE__ */ jsx(
       HeaderLayout,
       {
-        left: /* @__PURE__ */ jsx(ActionIcon, { component: Link, to: "/", color: "blue", variant: "filled", children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 24 }) }),
+        left: /* @__PURE__ */ jsx(ActionIcon, { component: Link, href: location.href(), color: "blue", variant: "filled", children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 24 }) }),
         center: /* @__PURE__ */ jsxs(Group, { spacing: "xs", children: [
           /* @__PURE__ */ jsx(Skeleton, { height: 30, width: 100 }),
           /* @__PURE__ */ jsx(Skeleton, { height: 30, width: 200 })
@@ -4533,14 +4616,14 @@ function DesignMenu({ id }) {
           }
         ) }),
         /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxs("div", { children: [
-          Object.entries(block_default).map(([key, { label, defaultValue, options: options2 }]) => /* @__PURE__ */ jsxs(Group, { spacing: "xs", position: "apart", noWrap: true, style: { width: "100%" }, children: [
+          Object.entries(block_default).map(([key, { label, defaultValue, options }]) => /* @__PURE__ */ jsxs(Group, { spacing: "xs", position: "apart", noWrap: true, style: { width: "100%" }, children: [
             label && /* @__PURE__ */ jsx("span", { children: label }),
             /* @__PURE__ */ jsx(
               SegmentedControl,
               {
                 defaultValue: String(block.settings[key] || defaultValue),
                 onChange: (e) => handleChange(key, e),
-                data: options2
+                data: options
               }
             )
           ] }, key)),
@@ -4878,31 +4961,31 @@ init_cms();
 init_esm_shims();
 init_cms();
 init_valueInOptions();
-var validateOptionsArray = (options2) => {
-  if (!Array.isArray(options2))
+var validateOptionsArray = (options) => {
+  if (!Array.isArray(options))
     return [];
-  return options2.map((d) => typeof d === "string" ? { id: d, label: d } : d);
+  return options.map((d) => typeof d === "string" ? { id: d, label: d } : d);
 };
 var maybeFixForMulti = (defaultValue, type) => type === SELECTOR_TYPES.MULTI && !Array.isArray(defaultValue) ? [defaultValue] : defaultValue;
 var Selector_default = (vars, id) => {
   const type = vars.type || SELECTOR_TYPES.SINGLE;
   const name = vars.name || "Unlabeled Selector";
-  const options2 = validateOptionsArray(vars.options || []);
+  const options = validateOptionsArray(vars.options || []);
   let defaultValue;
   if (vars.defaultValue) {
     const potentialDefaultValue = maybeFixForMulti(vars.defaultValue, type);
-    if (valueInOptions_default(type, potentialDefaultValue, options2))
+    if (valueInOptions_default(type, potentialDefaultValue, options))
       defaultValue = potentialDefaultValue;
   }
   if (!defaultValue) {
-    const fallbackValue = options2 && options2[0] && options2[0].id || options2[0] || "";
+    const fallbackValue = options && options[0] && options[0].id || options[0] || "";
     defaultValue = maybeFixForMulti(fallbackValue, type);
   }
   return {
     id,
     name,
     type,
-    options: options2,
+    options,
     defaultValue
   };
 };
@@ -4963,14 +5046,14 @@ var isValidSelectorState = (simpleState) => {
     name,
     type,
     optionsType,
-    options: options2
+    options
   } = simpleState;
-  if (![name, type, optionsType, options2].every(Boolean))
+  if (![name, type, optionsType, options].every(Boolean))
     return false;
   if (optionsType === OPTION_TYPE.STATIC)
-    return options2.static?.length > 0 && options2.static?.every((o) => o.id);
-  if (!options2.dynamic?.isPrimitiveType)
-    return !!options2.dynamic?.idKey;
+    return options.static?.length > 0 && options.static?.every((o) => o.id);
+  if (!options.dynamic?.isPrimitiveType)
+    return !!options.dynamic?.idKey;
   return true;
 };
 function StaticSelectorOptionRow({ option, editOption, deleteOption }) {
@@ -5173,9 +5256,9 @@ function SelectorUI(props) {
   } = props;
   const [selectorIdentifier, setSelectorIdentifier] = useState("");
   const [selectorType, setSelectorType] = useState(SELECTOR_TYPE.SINGLE);
-  const [options2, setOptions] = useState({ static: [], dynamic: {} });
+  const [options, setOptions] = useState({ static: [], dynamic: {} });
   const [optionsType, setOptionsType] = useState(OPTION_TYPE.STATIC);
-  const stateFields = [selectorIdentifier, selectorType, options2, optionsType];
+  const stateFields = [selectorIdentifier, selectorType, options, optionsType];
   useEffect(() => {
     if (!simpleState)
       return;
@@ -5195,8 +5278,8 @@ function SelectorUI(props) {
       let defaultValue;
       let logicOptions;
       if (optionsType === OPTION_TYPE.STATIC) {
-        defaultValue = selectorType === SELECTOR_TYPE.SINGLE ? options2.static.find((o) => o.isDefault)?.id : options2.static.filter((o) => o.isDefault).map((o) => o.id);
-        logicOptions = options2.static.map(({ id: id2, label }) => ({ id: id2, label: label || id2 }));
+        defaultValue = selectorType === SELECTOR_TYPE.SINGLE ? options.static.find((o) => o.isDefault)?.id : options.static.filter((o) => o.isDefault).map((o) => o.id);
+        logicOptions = options.static.map(({ id: id2, label }) => ({ id: id2, label: label || id2 }));
       } else {
         const {
           optionsVar,
@@ -5204,7 +5287,7 @@ function SelectorUI(props) {
           labelKey,
           defaultVar,
           isPrimitiveType
-        } = options2.dynamic;
+        } = options.dynamic;
         if (defaultVar)
           defaultValue = `variables["${defaultVar}"]`;
         logicOptions = isPrimitiveType ? `variables["${optionsVar}"]` : `(variables["${optionsVar}"] || []).map(d => ({id: String(d["${idKey}"]), label: String(d["${labelKey || idKey}"])}))`;
@@ -5217,7 +5300,7 @@ function SelectorUI(props) {
         name: selectorIdentifier,
         type: selectorType,
         optionsType,
-        options: options2
+        options
       };
       const isValid = isValidSelectorState(simpleState2);
       onChange(simpleState2, logic, isValid);
@@ -5256,14 +5339,14 @@ function SelectorUI(props) {
     optionsType === OPTION_TYPE.STATIC ? /* @__PURE__ */ jsx(
       StaticSelectorOptionsEditor,
       {
-        staticOptions: options2.static,
-        setStaticOptions: (optionsState) => setOptions({ ...options2, static: optionsState })
+        staticOptions: options.static,
+        setStaticOptions: (optionsState) => setOptions({ ...options, static: optionsState })
       }
     ) : /* @__PURE__ */ jsx(
       DynamicSelectorOptionsEditor,
       {
-        dynamicOptions: options2.dynamic,
-        setDynamicOptions: (optionsState) => setOptions({ ...options2, dynamic: optionsState }),
+        dynamicOptions: options.dynamic,
+        setDynamicOptions: (optionsState) => setOptions({ ...options, dynamic: optionsState }),
         id
       }
     ),
@@ -7347,9 +7430,8 @@ init_ordering();
 init_store2();
 init_actions();
 init_ResourceProvider();
-function ReportEditor2() {
-  const params = useParams();
-  const id = Number.parseInt(params.id || "", 10);
+function ReportEditor2(props) {
+  const { id } = props;
   const ref = useReportRef(id);
   if (ref.isError) {
     return /* @__PURE__ */ jsx(Center, { style: { height: 300 }, children: /* @__PURE__ */ jsx(Alert, { icon: /* @__PURE__ */ jsx(IconCircleX, { size: 20 }), title: `Error ${ref.error.code}`, color: "red", children: ref.error.message }) });
@@ -7478,88 +7560,71 @@ function CreateSectionButton({ index, report }) {
   );
 }
 
-// views/MetadataEditor.tsx
+// views/FormatterEditor.tsx
 init_esm_shims();
 
-// components/metadata/FilterSidebar.tsx
+// components/formatters/FilterSidebar.tsx
 init_esm_shims();
 init_store2();
+init_cms();
 var allOption = { value: "all", label: "All" };
-var buildOptions = (options2) => {
-  if (!options2)
+var buildOptionsFromMap = (options) => {
+  if (!options)
     return [];
-  const selectOptions = options2.map((d) => ({ value: String(d.id), label: d.name }));
+  const selectOptions = Object.keys(options).map((k) => ({ value: String(k), label: String(options[k]) }));
   return [allOption, ...selectOptions];
 };
-function FilterSidebar({ onChange, loading }) {
+function FilterSidebar({ onChange, loading, onEditCreation }) {
   const dispatch = useAppDispatch();
-  const reportsNested = useAppSelector((state) => state.records.tree);
-  const localeDefault8 = useAppSelector((state) => state.status.localeDefault);
   const [query, setQuery] = useState("");
-  const [loadingRegenerate, setLoadingRegenerate] = useState(false);
+  const [loadingCreate, setLoadingCreate] = useState(false);
   const [debouncedQuery] = useDebouncedValue(query, 500);
   const initialFilterState = {
-    report: allOption.value,
-    dimension: allOption.value,
-    variant: allOption.value,
-    visible: false,
-    noImage: false,
-    limit: "10"
+    type: allOption.value
   };
   const [filters, setFilters] = useState(initialFilterState);
-  const options2 = useMemo(() => ({
-    report: buildOptions(reportsNested),
-    dimension: buildOptions(reportsNested.filter((report) => filters.report === allOption.value || filters.report === `${report.id}`).reduce((acc, report) => acc.concat(report.dimensions), [])),
-    variant: buildOptions(reportsNested.filter((report) => filters.report === allOption.value || filters.report === `${report.id}`).reduce((acc, report) => {
-      report.dimensions.filter((dim) => filters.dimension === allOption.value || filters.dimension === `${dim.id}`).forEach((dim) => {
-        acc = acc.concat(dim.variants);
-      });
-      return acc;
-    }, [])),
-    limit: [10, 25, 50].map((i) => ({ value: String(i), label: String(i) }))
-  }), [reportsNested, filters]);
+  const onClearFilters = () => {
+    setQuery("");
+    setFilters(initialFilterState);
+  };
+  const options = useMemo(() => ({
+    type: buildOptionsFromMap(FORMATTER_TYPES_NAMES)
+  }), []);
+  useEffect(() => {
+    onChange({ ...filters, query: debouncedQuery });
+  }, [filters.type, debouncedQuery]);
+  const onAddNewFormatter = () => {
+    setLoadingCreate(true);
+    const newId = Math.random().toString(16).substring(2, 10);
+    dispatch(actions_exports.createEntity("formatter", {
+      name: `formatter_${newId}`,
+      content: {
+        type: "formatter",
+        logic: "return n;",
+        inputType: "string",
+        testValue: "123456",
+        description: "New formatter"
+      }
+    })).then((response) => {
+      setLoadingCreate(false);
+      onClearFilters();
+      if (response.ok) {
+        onEditCreation(response.data.id);
+      }
+    });
+  };
   const onChangeFilter = useCallback((key, value) => {
     const newFilters = {
       ...filters,
       [key]: value
     };
-    switch (key) {
-      case "report":
-        newFilters.dimension = allOption.value;
-        break;
-      case "dimension":
-        newFilters.variant = allOption.value;
-        break;
-    }
     setFilters(newFilters);
   }, [filters]);
-  const onClearFilters = () => {
-    setQuery("");
-    setFilters(initialFilterState);
-  };
-  const onRegenarateSearchIndex = () => {
-    setLoadingRegenerate(true);
-    dispatch(actions_exports.searchRegenerate()).then(() => {
-      setLoadingRegenerate(false);
-      onChange(filters);
-    });
-  };
-  useEffect(() => {
-    onChange({ ...filters, query: debouncedQuery });
-  }, [
-    filters.report,
-    filters.dimension,
-    filters.variant,
-    filters.visible,
-    filters.limit,
-    filters.noImage,
-    debouncedQuery
-  ]);
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       TextInput,
       {
-        label: `Search item by name (${localeDefault8.toUpperCase()})`,
+        label: "Search by name or description",
         value: query,
         onChange: (event) => setQuery(event.currentTarget.value),
         disabled: loading
@@ -7568,62 +7633,14 @@ function FilterSidebar({ onChange, loading }) {
     /* @__PURE__ */ jsx(
       Select,
       {
-        label: "Reports",
-        data: options2.report,
-        value: filters.report,
-        onChange: (value) => onChangeFilter("report", value),
-        disabled: loading
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        label: "Dimensions",
-        data: options2.dimension,
-        value: filters.dimension,
-        onChange: (value) => onChangeFilter("dimension", value),
-        disabled: loading
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        label: "Variants",
-        data: options2.variant,
-        value: filters.variant,
-        onChange: (value) => onChangeFilter("variant", value),
-        disabled: loading
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        label: "Rows limit",
-        data: options2.limit,
-        value: filters.limit,
-        onChange: (value) => onChangeFilter("limit", value),
+        label: "Type",
+        data: options.type,
+        value: filters.type,
+        onChange: (value) => onChangeFilter("type", value),
         disabled: loading
       }
     ),
     /* @__PURE__ */ jsx(Space, { h: "md" }),
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        label: "Show visible members only",
-        checked: filters.visible,
-        onChange: (event) => onChangeFilter("visible", event.currentTarget.checked)
-      }
-    ),
-    /* @__PURE__ */ jsx(Space, { h: "md" }),
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        label: "Show members with no image",
-        checked: filters.noImage,
-        onChange: (event) => onChangeFilter("noImage", event.currentTarget.checked)
-      }
-    ),
-    /* @__PURE__ */ jsx(Space, { h: "md" }),
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -7640,696 +7657,372 @@ function FilterSidebar({ onChange, loading }) {
       {
         fullWidth: true,
         disabled: loading,
-        leftIcon: /* @__PURE__ */ jsx(IconRefresh, {}),
-        onClick: onRegenarateSearchIndex,
+        leftIcon: /* @__PURE__ */ jsx(IconPlus, {}),
+        onClick: onAddNewFormatter,
         variant: "light",
-        loading: loadingRegenerate,
-        children: "Re-Index Search"
+        loading: loadingCreate,
+        children: "New formatter"
       }
     )
   ] });
 }
 
-// components/metadata/MemberForm.tsx
+// components/formatters/FormatterForm.tsx
 init_esm_shims();
 init_store2();
-
-// components/metadata/ImageSelector.tsx
-init_esm_shims();
-function ImageSelector({ member, onEditEnd }) {
-  const initialPrompt = member.contentByLocale && member.contentByLocale[0] ? member.contentByLocale[0].name : "";
-  const imageProviders = {
-    local: {
-      title: "Bespoke",
-      key: "local",
-      input: "text",
-      forceSearch: true,
-      getAxiosSearchConfig: (prompt2, image) => ({
-        url: "/api/cms/images/search/local",
-        method: "get",
-        params: { prompt: prompt2 }
-      })
-    },
-    flickr: {
-      title: "Flickr",
-      key: "flickr",
-      input: "text",
-      forceSearch: true,
-      getAxiosSearchConfig: (prompt2, image) => ({
-        url: "/api/cms/images/search/flickr",
-        method: "get",
-        params: { prompt: prompt2 }
-      })
-    },
-    unsplash: {
-      title: "Unsplash",
-      key: "unsplash",
-      input: "text",
-      forceSearch: true,
-      getAxiosSearchConfig: (prompt2, image) => ({
-        url: "/api/cms/images/search/unsplash",
-        method: "get",
-        params: { prompt: prompt2 }
-      })
-    },
-    upload: {
-      title: "Upload",
-      key: "upload",
-      input: "file",
-      forceSearch: false,
-      getAxiosSearchConfig: (prompt2, image) => ({})
-    }
-  };
-  const imageProvidersOptions = Object.keys(imageProviders).map((key) => ({ value: key, label: imageProviders[key].title }));
-  const [loading, setLoading] = useState(false);
-  const [selectedProvider, setSelectedProvider] = useState(Object.values(imageProviders)[0]);
-  const [scrollSize, setScrollSize] = useState(500);
-  const [prompt, setPrompt] = useState(initialPrompt);
-  const [imageToUpload, setImageToUpload] = useState();
-  const [results, setResults] = useState([]);
-  const [selectedImage, setSelectedImage] = useState();
+init_cms();
+init_FUNC();
+init_hooks();
+var buildOptionsFromMap2 = (options) => {
+  if (!options)
+    return [];
+  return Object.keys(options).map((k) => ({ value: String(k), label: String(options[k]) }));
+};
+var getCastedValue = (type, value) => {
+  switch (type) {
+    case FORMATTER_INPUT_TYPES.OBJECT:
+      return JSON.parse(value);
+    default:
+      return `${value}`;
+  }
+};
+function FormatterForm({ formatterId, onEditEnd }) {
+  const localeDefault8 = useAppSelector((state) => state.status.localeDefault);
+  const locales3 = useAppSelector((state) => state.status.locales);
+  locales3.map((locale) => ({ value: locale, label: `${locale.toUpperCase()}` }));
+  const opened = !!formatterId;
+  const [formatter, setFormatter] = useState();
+  const [testResults, setTestResults] = useState("");
+  const [formatterNames, setFormatterNames] = useState([]);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [saveLoading, setSaveLoading] = useState(false);
+  const [isDirty, setIsDirty] = useState(true);
+  const [isValid, setIsValid] = useState(true);
   const [error, setError] = useState(false);
-  const onSearch = async () => {
-    setError(false);
-    setLoading(true);
-    setResults([]);
-    const providerAxiosConfig = selectedProvider.getAxiosSearchConfig(prompt, imageToUpload);
-    const imageRecords = await axios(providerAxiosConfig).then((response) => response.data.data && response.data.data.results ? response.data.data.results : []).catch((e) => {
-      console.error(e);
-      setError(true);
-    });
-    setResults(imageRecords);
-    setLoading(false);
-  };
-  const onSelect = (img) => {
-    setSelectedImage(img);
+  const dispatch = useAppDispatch();
+  const ref = useFormatterRef(formatterId);
+  const formattersList = useFormatterList();
+  const usageCount = useFormatterUsageCount(ref.data?.name);
+  const isLoading = initialLoading || saveLoading;
+  useEffect(() => {
+    if (!ref.isLoading) {
+      setFormatter(ref.data);
+    }
+  }, [ref.isLoading]);
+  useEffect(() => {
+    if (!ref.isLoading && !formattersList.isLoading) {
+      const formatterItem = !ref.isSuccess ? void 0 : ref.data;
+      const formatters = !formattersList.isSuccess ? [] : formattersList.data;
+      if (formatterItem) {
+        const formatterNamesList = formatters.filter((f) => f.id !== formatterItem.id).map((f) => f.name);
+        setFormatterNames(formatterNamesList);
+      }
+      onTest();
+      setInitialLoading(false);
+    }
+  }, [ref.isLoading, formattersList.isLoading]);
+  const isValidName = formatter && !formatterNames.includes(formatter.name) && formatter.name !== "";
+  const onChangeName = (value) => {
+    if (isValidName) {
+      setIsValid(false);
+    }
+    if (formatter) {
+      setFormatter({
+        ...formatter,
+        name: slugifyInput_default(value).replace("-", "")
+      });
+    }
   };
-  const onSave = async () => {
-    setLoading(true);
-    const formData = new FormData();
-    formData.append("content_id", member.content_id);
-    if (selectedImage && imageToUpload) {
-      formData.append("file", imageToUpload);
-      delete selectedImage.file;
+  const onContentValueChange = (key, value) => {
+    if (key !== "description") {
+      setIsDirty(true);
     }
-    if (selectedImage) {
-      formData.append("image_id", selectedImage.id);
-      formData.append("image_source", selectedImage.source);
+    if (formatter) {
+      setFormatter({
+        ...formatter,
+        content: {
+          ...formatter.content,
+          [key]: value
+        }
+      });
     }
-    await axios({
-      method: "post",
-      url: `/api/cms/images/save/${selectedProvider.key}`,
-      data: formData
-    }).then((response) => {
-      onEditEnd(true);
-    }).catch((e) => {
-      console.error(e);
-      setError(true);
-    });
-    setLoading(false);
   };
-  const onChangeProvider = (providerKey) => {
-    setError(false);
-    setSelectedProvider(imageProviders[providerKey]);
-    setSelectedImage(void 0);
+  const onTest = () => {
+    if (formatter) {
+      let results = "";
+      try {
+        const newFunction = parse({ vars: ["n"], logic: formatter.content.logic }, {}, localeDefault8, {});
+        const castedValue = getCastedValue(formatter.content.inputType, formatter.content.testValue);
+        results = newFunction(castedValue);
+        setIsValid(true);
+      } catch (e) {
+        results = `ERROR: ${e.message}`;
+        console.log(e);
+        setIsValid(false);
+      }
+      setIsDirty(false);
+      setTestResults(`${results}`);
+    }
   };
-  useEffect(() => {
-    const { innerHeight } = window;
-    setScrollSize(innerHeight - 280);
-    onSearch();
-  }, []);
-  useEffect(() => {
-    setResults([]);
-    if (!loading && selectedProvider.forceSearch) {
-      onSearch();
+  const onSave = () => {
+    setSaveLoading(true);
+    if (isValid && isValidName) {
+      dispatch(actions_exports.updateEntity("formatter", formatter)).then(onEditEnd);
     }
-  }, [selectedProvider]);
-  const noResults = results && results.length === 0 && !loading && selectedProvider.key !== "upload";
+  };
   return /* @__PURE__ */ jsx(
     Drawer,
     {
-      opened: true,
-      onClose: onEditEnd,
-      title: `Edit image for ${initialPrompt} (${member.id}) `,
+      opened,
+      onClose: () => onEditEnd(),
+      title: `Edit formatter ID ${formatterId}`,
       padding: "lg",
       closeOnClickOutside: false,
       closeOnEscape: false,
-      position: "left",
+      position: "right",
       size: "50%",
       lockScroll: true,
       withCloseButton: false,
-      children: /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsxs(Stack, { children: [
-        /* @__PURE__ */ jsxs(Stack, { spacing: "xs", children: [
-          /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, align: "flex-end", children: [
-            selectedProvider.input === "text" && /* @__PURE__ */ jsx(
-              TextInput,
+      children: /* @__PURE__ */ jsx(
+        DrawerContentWithScroll,
+        {
+          content: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(LoadingOverlay, { visible: initialLoading, overlayBlur: 2, overlayOpacity: 50 }),
+            error && /* @__PURE__ */ jsx(Alert, { title: "Formatter Form", color: "red", children: "Error, please try again." }),
+            formatter && !error && /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
+              /* @__PURE__ */ jsxs(Group, { grow: true, align: "flex-start", children: [
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    label: `Name ${isValidName && usageCount > 0 ? `(Read only, used in ${usageCount} blocks)` : ""}`,
+                    value: formatter.name,
+                    icon: isValidName ? /* @__PURE__ */ jsx(IconCircleCheck, {}) : /* @__PURE__ */ jsx(IconAlertCircle, {}),
+                    readOnly: isValidName && usageCount > 0,
+                    disabled: isValidName && usageCount > 0,
+                    onChange: (evt) => onChangeName(evt.target.value),
+                    error: isValidName ? false : "Duplicate or empty name, choose a different one."
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    label: "Type",
+                    data: buildOptionsFromMap2(FORMATTER_TYPES_NAMES),
+                    value: formatter.content.type,
+                    onChange: (value) => onContentValueChange("type", value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  label: "Description",
+                  value: formatter.content.description,
+                  onChange: (evt) => onContentValueChange("description", evt.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MonacoWrapper_default,
+                {
+                  monacoOptions: {
+                    onChange: (newLogic) => onContentValueChange("logic", newLogic),
+                    value: formatter.content.logic
+                  }
+                },
+                "formatter-code-editor"
+              ),
+              /* @__PURE__ */ jsxs(Group, { grow: true, align: "flex-end", children: [
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    label: "Input Type",
+                    data: buildOptionsFromMap2(FORMATTER_INPUT_TYPES_NAMES),
+                    value: formatter.content.inputType,
+                    onChange: (value) => onContentValueChange("inputType", value)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    label: "Test Value",
+                    value: formatter.content.testValue,
+                    onChange: (evt) => onContentValueChange("testValue", evt.target.value),
+                    error: formatter.content.testValue === "" && !isValid
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  readOnly: true,
+                  icon: isValid ? /* @__PURE__ */ jsx(IconCircleCheck, {}) : /* @__PURE__ */ jsx(IconAlertCircle, {}),
+                  label: "Test Results",
+                  value: testResults,
+                  error: testResults.includes("ERROR") && !isValid ? "There is a problem in the function, input type or test value. Please check and run again." : false
+                }
+              )
+            ] })
+          ] }),
+          buttons: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
               {
-                placeholder: "Search term",
-                label: "Search term",
-                value: prompt,
-                onChange: (e) => setPrompt(e.target.value)
+                variant: "outline",
+                disabled: isLoading,
+                onClick: () => onEditEnd(),
+                children: "Cancel"
               }
             ),
-            selectedProvider.input === "file" && /* @__PURE__ */ jsx(
-              FileInput,
+            /* @__PURE__ */ jsx(
+              Button,
               {
-                label: "Upload image",
-                placeholder: "Choose a PNG image from your computer",
-                accept: "image/png",
-                value: imageToUpload,
-                onChange: (image) => {
-                  setSelectedImage(void 0);
-                  if (image) {
-                    const objectUrl = URL.createObjectURL(image);
-                    setResults([{
-                      id: "custom",
-                      source: objectUrl,
-                      file: image
-                    }]);
-                    setImageToUpload(image);
-                    setSelectedImage("custom");
-                  }
-                },
-                icon: /* @__PURE__ */ jsx(IconUpload, { size: 14 })
+                onClick: onTest,
+                disabled: !isDirty,
+                color: isDirty ? "blue" : isValid ? "green" : "red",
+                leftIcon: /* @__PURE__ */ jsx(IconPlayerPlay, {}),
+                children: "Run Test"
               }
             ),
-            selectedProvider.forceSearch && /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(
               Button,
               {
-                fullWidth: true,
-                disabled: loading || !prompt || prompt === "",
-                onClick: onSearch,
-                leftIcon: /* @__PURE__ */ jsx(IconPlayerPlay, {}),
-                children: "Search"
+                onClick: onSave,
+                loading: isLoading,
+                disabled: isLoading || !isValid || isDirty || !isValidName,
+                children: "Save"
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
-            SegmentedControl,
-            {
-              disabled: loading,
-              value: selectedProvider.key,
-              onChange: (providerKey) => onChangeProvider(providerKey),
-              data: imageProvidersOptions,
-              fullWidth: true
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(Group, { mt: "xs", grow: true, children: /* @__PURE__ */ jsxs(ScrollArea, { offsetScrollbars: true, type: "always", style: { height: scrollSize }, children: [
-          /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
-          error && /* @__PURE__ */ jsx(Alert, { title: `${selectedProvider.title}`, color: "red", children: "Error, please try again." }),
-          noResults && /* @__PURE__ */ jsx(Alert, { title: `${selectedProvider.title}`, color: "blue", children: "No results, for try another prompt or provider." }),
-          results && results.length > 0 && !loading && /* @__PURE__ */ jsx(SimpleGrid, { cols: 3, children: results.map((img) => /* @__PURE__ */ jsx(
-            Image,
-            {
-              radius: "md",
-              src: img.source,
-              style: {
-                cursor: "pointer",
-                borderRadius: 15,
-                border: selectedImage && selectedImage.id === img.id ? "5px solid black" : ""
-              },
-              onClick: () => onSelect(img)
-            },
-            img.id
-          )) })
-        ] }) }),
-        /* @__PURE__ */ jsxs(Group, { mt: "xs", grow: true, style: { height: 45 }, children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outline",
-              disabled: loading,
-              onClick: () => onEditEnd(false),
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              onClick: onSave,
-              loading,
-              disabled: loading || !selectedImage,
-              children: "Save"
-            }
-          )
-        ] })
-      ] }) })
+          size: 145
+        }
+      )
     }
   );
 }
-var ImageSelector_default = ImageSelector;
 
-// views/ImagePreview.tsx
+// components/formatters/FormattersTable.tsx
 init_esm_shims();
-function ImagePreview2({
-  member,
-  height = "auto",
-  width = "100%",
-  size = "thumb",
-  forceRefreshTimestamp = false
-}) {
-  let extraParam = "";
-  if (forceRefreshTimestamp) {
-    extraParam = `&t=${new Date().getTime()}`;
+init_store2();
+init_hooks();
+init_cms();
+var getCastedValue2 = (type, value) => {
+  switch (type) {
+    case FORMATTER_INPUT_TYPES.OBJECT:
+      return JSON.parse(value);
+    default:
+      return `${value}`;
   }
-  const imageUrl = member && member.image_id ? `/api/cms/member/image.png?member=${member.content_id}&size=${size}${extraParam}` : "https://placehold.jp/cccccc/ffffff/900x600.png?text=None";
-  return /* @__PURE__ */ jsx(Image, { height, width, radius: "md", src: imageUrl });
-}
-var ImagePreview_default = ImagePreview2;
-function MemberForm({ memberId, onEditEnd }) {
-  const localeDefault8 = useAppSelector((state) => state.status.localeDefault);
-  const locales3 = useAppSelector((state) => state.status.locales);
-  const localesItems = locales3.map((locale) => ({ value: locale, label: `${locale.toUpperCase()}` }));
-  const opened = !!memberId;
-  const [selectedLocale, setSelectedLocale] = useState(localeDefault8);
-  const [member, setMember] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [showImageSelector, setShowImageSelector] = useState(false);
-  const [error, setError] = useState(false);
-  const mainForm = useForm();
-  const localizedForms = locales3.reduce((acc, item) => {
-    acc[item] = useForm({});
-    return acc;
-  }, {});
-  const imageForm = useForm();
-  const localizedImageForms = locales3.reduce((acc, item) => {
-    acc[item] = useForm({});
-    return acc;
-  }, {});
-  const dispatch = useAppDispatch();
-  const fetchMemberData = async () => {
-    setLoading(true);
-    setError(false);
-    const memberRecord = await dispatch(actions_exports.readMember(
-      {
-        locale: "all",
-        content_ids: memberId,
-        all: false,
-        mode: "content_ids"
-      }
-    )).then((response) => {
-      let obj;
-      if (response.results && response.results[0]) {
-        setError(false);
-        obj = response.results[0];
-      } else {
-        setError(true);
-      }
-      return obj;
-    }).catch((e) => {
-      console.error(e);
-      setError(true);
-    });
-    if (memberRecord) {
-      setMember(memberRecord);
-      mainForm.setValues(memberRecord);
-      memberRecord.contentByLocale.forEach((item) => {
-        localizedForms[item.locale].setValues({
-          name: item.name,
-          keywords: item.keywords ? item.keywords : [],
-          attributes: item.attributes ? Object.keys(item.attributes).map((ak) => ({ key: ak, value: item.attributes[ak] })) : []
-        });
-      });
-      if (memberRecord.image) {
-        imageForm.setValues(memberRecord.image);
-        memberRecord.image.contentByLocale.forEach((item) => {
-          localizedImageForms[item.locale].setValues({
-            meta: item.meta
-          });
-        });
+};
+function FormattersTable({ filters, onClickEdit }) {
+  const [sortStatus, setSortStatus] = useState();
+  const [records, setRecords] = useState([]);
+  const formattersList = useFormatterList();
+  const formatters = !formattersList.isSuccess ? [] : formattersList.data;
+  const formatterFunctions = useFormatterFunctionsForLocale();
+  const formattersUsageCount = useFormatterUsageCountList();
+  const formattersFull = useMemo(() => formatters.map((f) => {
+    const usageCount = formattersUsageCount[f.name] ? formattersUsageCount[f.name] : 0;
+    let result = "";
+    try {
+      const castedValue = getCastedValue2(f.content.inputType, f.content.testValue);
+      result = formatterFunctions[f.name](castedValue);
+    } catch (e) {
+      result = `ERROR: ${e.message}`;
+      console.log(`Error in ${f.name}`);
+      console.log(e);
+    }
+    return {
+      ...f,
+      result,
+      usageCount
+    };
+  }), [formatters]);
+  const doSearch = () => {
+    let filteredResults = formattersFull.filter(
+      (formatter) => {
+        let findQuery = true;
+        let findType = true;
+        if (filters.query) {
+          findQuery = formatter.name.toLowerCase().indexOf(filters.query.toLowerCase()) > -1 || formatter.content.description.indexOf(filters.query) > -1;
+        }
+        if (filters.type !== "all") {
+          findType = formatter.content.type === filters.type;
+        }
+        return findQuery && findType;
       }
+    );
+    if (sortStatus) {
+      const sortIndex = sortStatus.direction === "asc" ? -1 : 1;
+      filteredResults = filteredResults.sort((a, b) => a[sortStatus.columnAccessor] > b[sortStatus.columnAccessor] ? 1 * sortIndex : -1 * sortIndex);
     }
-    setLoading(false);
+    setRecords(filteredResults);
   };
   useEffect(() => {
-    if (memberId) {
-      fetchMemberData();
-    } else {
-      setMember(null);
-    }
-  }, [memberId]);
-  const onImageSelectorClose = async (edited) => {
-    if (edited) {
-      fetchMemberData();
-    }
-    setShowImageSelector(false);
-  };
-  const clearImage = () => {
-    setMember({
-      ...member,
-      image: null,
-      image_id: null
-    });
-  };
-  const onSave = async () => {
-    setLoading(true);
-    const payload = {
-      ...mainForm.values,
-      contentByLocale: member.contentByLocale.map((oldValues) => {
-        const localizedItem = localizedForms[oldValues.locale] ? { ...localizedForms[oldValues.locale].values } : {};
-        localizedItem.keywords = localizedItem.keywords && localizedItem.keywords.length > 0 ? localizedItem.keywords : null;
-        return {
-          ...oldValues,
-          ...localizedItem
-        };
-      }),
-      image: member.image ? {
-        ...imageForm.values,
-        contentByLocale: locales3.map((locale) => {
-          const oldValues = member.image.contentByLocale.find((e) => e.locale === locale);
-          const localizedItem = localizedImageForms[oldValues.locale] ? localizedImageForms[oldValues.locale].values : {};
-          return {
-            ...oldValues,
-            ...localizedItem
-          };
-        })
-      } : null,
-      image_id: member.image_id
-    };
-    await axios.post("/api/cms/update/member", payload).then((resp) => {
-      onEditEnd();
-      return resp.data.data;
-    });
-  };
-  const isValidLocalizedForm = Object.keys(localizedForms[selectedLocale].values).length > 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Drawer,
-      {
-        opened,
-        onClose: () => onEditEnd(),
-        title: `Edit member ID ${memberId}`,
-        padding: "lg",
-        closeOnClickOutside: false,
-        closeOnEscape: false,
-        position: "right",
-        size: "50%",
-        lockScroll: true,
-        withCloseButton: false,
-        children: /* @__PURE__ */ jsx(
-          DrawerContentWithScroll,
-          {
-            content: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
-              error && /* @__PURE__ */ jsx(Alert, { title: "Member Form", color: "red", children: "Error, please try again." }),
-              member && !error && /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
-                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
-                  /* @__PURE__ */ jsxs(Stack, { children: [
-                    /* @__PURE__ */ jsx(ImagePreview_default, { member, forceRefreshTimestamp: true }),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        disabled: loading,
-                        leftIcon: /* @__PURE__ */ jsx(IconPolaroid, {}),
-                        onClick: () => setShowImageSelector(true),
-                        children: "Change image"
-                      }
-                    ),
-                    member && member.image && /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "outline",
-                        disabled: loading,
-                        leftIcon: /* @__PURE__ */ jsx(IconCircleMinus, {}),
-                        onClick: () => clearImage(),
-                        children: "Remove image"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(Space, { h: "md" })
-                  ] }),
-                  /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        disabled: !member || !member.image,
-                        label: "Source",
-                        ...imageForm.getInputProps("url")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        disabled: !member || !member.image,
-                        label: "Author",
-                        ...imageForm.getInputProps("author")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        disabled: !member || !member.image,
-                        label: "License",
-                        ...imageForm.getInputProps("license")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      SegmentedControl,
-                      {
-                        disabled: !member || !member.image,
-                        value: selectedLocale,
-                        onChange: setSelectedLocale,
-                        data: localesItems
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        disabled: !member || !member.image,
-                        label: "Alternative image text",
-                        ...localizedImageForms[selectedLocale].getInputProps("meta")
-                      }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs(Code, { block: true, children: [
-                  "TO-DO apply same image also to some of these members? List of checkboxes",
-                  /* @__PURE__ */ jsx("br", {}),
-                  "(x) another member, similar name",
-                  /* @__PURE__ */ jsx("br", {}),
-                  "(x) another member, similar name",
-                  /* @__PURE__ */ jsx("br", {})
-                ] }),
-                /* @__PURE__ */ jsx(Divider, { my: "sm" }),
-                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Original ID", ...mainForm.getInputProps("id") }),
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Content ID", ...mainForm.getInputProps("content_id") })
-                ] }),
-                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
-                  /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      mt: "xs",
-                      icon: "/",
-                      disabled: true,
-                      label: "Variant Slug",
-                      ...mainForm.getInputProps("variant_slug")
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", icon: "/", disabled: true, label: "Member Slug", ...mainForm.getInputProps("slug") })
-                ] }),
-                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Report", ...mainForm.getInputProps("report_name") }),
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Dimension", ...mainForm.getInputProps("dimension_name") }),
-                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Variant", ...mainForm.getInputProps("variant_name") })
-                ] }),
-                /* @__PURE__ */ jsx(Group, { position: "apart", grow: true, children: /* @__PURE__ */ jsx(
-                  Checkbox,
-                  {
-                    mt: "xs",
-                    label: "Visible",
-                    ...mainForm.getInputProps("visible", { type: "checkbox" })
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", grow: true, children: /* @__PURE__ */ jsx(
-                  SegmentedControl,
-                  {
-                    value: selectedLocale,
-                    onChange: setSelectedLocale,
-                    data: localesItems
-                  }
-                ) }),
-                !isValidLocalizedForm && /* @__PURE__ */ jsx(Alert, { title: "Unavailable locale", color: "blue", children: "This language was not ingested for the current member. Go to variant editor and provide the members there." }),
-                isValidLocalizedForm && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", grow: true, children: /* @__PURE__ */ jsx(TextInput, { label: "Name", ...localizedForms[selectedLocale].getInputProps("name") }) }),
-                  /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", align: "top", grow: true, children: /* @__PURE__ */ jsx(
-                    MultiSelect,
-                    {
-                      label: "Keywords",
-                      data: localizedForms[selectedLocale].values.keywords,
-                      placeholder: "Enter keywords",
-                      searchable: true,
-                      creatable: true,
-                      valueComponent: ({
-                        value,
-                        label,
-                        image,
-                        name
-                      }) => /* @__PURE__ */ jsxs(
-                        Badge,
-                        {
-                          onClick: () => {
-                            const current = localizedForms[selectedLocale].values.keywords;
-                            localizedForms[selectedLocale].setFieldValue(
-                              "keywords",
-                              current.filter((k) => k !== label)
-                            );
-                          },
-                          children: [
-                            label,
-                            " ",
-                            "x"
-                          ]
-                        }
-                      ),
-                      getCreateLabel: (query) => `+ Create ${query}`,
-                      value: localizedForms[selectedLocale].values.keywords,
-                      onCreate: (query) => {
-                        const current = localizedForms[selectedLocale].values.keywords;
-                        localizedForms[selectedLocale].setFieldValue("keywords", [...current, query]);
-                        return query;
-                      }
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Input.Wrapper, { label: "Attributes", children: /* @__PURE__ */ jsx(SortableTable, { data: localizedForms[selectedLocale].values.attributes }) })
-                ] })
-              ] })
-            ] }),
-            buttons: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "outline",
-                  disabled: loading,
-                  onClick: () => onEditEnd(),
-                  children: "Cancel"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: onSave,
-                  loading,
-                  disabled: loading,
-                  children: "Save Member"
-                }
-              )
-            ] }),
-            size: 145
-          }
-        )
-      }
-    ),
-    showImageSelector && /* @__PURE__ */ jsx(ImageSelector_default, { member, onEditEnd: onImageSelectorClose })
-  ] });
-}
-
-// components/metadata/MembersTable.tsx
-init_esm_shims();
-init_store2();
-function MembersTable({ members, onClickEdit, onSort }) {
-  const [sortStatus, setSortStatus] = useState();
-  const [records, setRecords] = useState([]);
-  useEffect(() => {
-    if (sortStatus) {
-      onSort(sortStatus);
-    }
-  }, [sortStatus]);
-  useEffect(() => {
-    setRecords(members);
-  }, [members]);
-  useEffect(() => {
-    setRecords(members);
-  }, []);
-  const localeDefault8 = useAppSelector((state) => state.status.localeDefault);
-  const cols = [
-    {
-      title: "",
-      accessor: "visible",
-      width: "10px",
-      render: ({ visible }) => /* @__PURE__ */ jsx(Fragment, { children: !visible ? /* @__PURE__ */ jsx(Tooltip, { label: "Visible: false", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconEyeOff, { size: 20 }) }) }) : /* @__PURE__ */ jsx("span", {}) })
-    },
-    {
-      title: "ID",
-      accessor: "id",
-      sortable: true,
-      textAlignment: "right"
-    },
-    {
-      title: "Report",
-      accessor: "report.name"
-    },
-    {
-      title: "Dimension",
-      accessor: "dimension.name"
-    },
-    {
-      title: "Variant",
-      accessor: "variant.name"
-    },
-    {
-      title: "Slug",
-      accessor: "slug",
-      render: ({ slug, variant }) => /* @__PURE__ */ jsxs("span", { children: [
-        "/",
-        variant.slug,
-        "/",
-        slug
-      ] })
-    },
-    {
-      title: `Name ${localeDefault8.toUpperCase()}`,
-      sortable: true,
-      accessor: "name",
-      render: ({ contentByLocale }) => {
-        const defaultLocalized = contentByLocale.find((item) => item.locale === localeDefault8);
-        const othersLocalized = contentByLocale.filter((item) => item.locale !== localeDefault8);
-        const nameTooltipContent = othersLocalized.reduce((acc, item) => {
-          const extraName = `${item.locale.toUpperCase()}: ${item.name}`;
-          const newLine2 = acc !== "" ? "\n" : "";
-          return `${acc}${newLine2}${extraName}`;
-        }, "");
-        return /* @__PURE__ */ jsxs(Group, { children: [
-          /* @__PURE__ */ jsx("span", { children: defaultLocalized.name }),
-          othersLocalized.length > 0 && /* @__PURE__ */ jsx(Tooltip, { label: nameTooltipContent, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", color: "pink", radius: "xl", children: [
-            "+",
-            othersLocalized.length
-          ] }) })
-        ] });
-      }
-    },
-    {
-      title: `Keywords ${localeDefault8.toUpperCase()}`,
-      accessor: "keywords",
-      render: ({ contentByLocale }) => {
-        const defaultLocalized = contentByLocale.find((item) => item.locale === localeDefault8);
-        const othersLocalized = contentByLocale.filter((item) => item.locale !== localeDefault8);
-        const keywords = (defaultLocalized.keywords ? defaultLocalized.keywords : []).map((k) => /* @__PURE__ */ jsx(Badge, { children: k }, k));
-        const keywordsTooltipContent = othersLocalized.reduce((acc, item) => {
-          const otherKeywords = item.keywords || [];
-          const extraKeywords = `${item.locale.toUpperCase()}: ${otherKeywords.length > 0 ? otherKeywords.join(",") : "None"}`;
-          const newLine2 = acc !== "" ? "\n" : "";
-          return `${acc}${newLine2}${extraKeywords}`;
-        }, "");
-        return /* @__PURE__ */ jsxs(Group, { children: [
-          /* @__PURE__ */ jsx("span", { children: keywords.length > 0 ? keywords : /* @__PURE__ */ jsx(Badge, { color: "gray", children: "None" }) }),
-          othersLocalized.length > 0 && /* @__PURE__ */ jsx(Tooltip, { label: keywordsTooltipContent, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", color: "pink", radius: "xl", children: [
-            "+",
-            othersLocalized.length
-          ] }) })
-        ] });
-      }
-    },
-    {
-      title: "Image",
-      accessor: "image",
-      render: (member) => /* @__PURE__ */ jsx(ImagePreview_default, { member, height: "50px" })
-    },
-    {
-      title: "",
-      accessor: "actions",
-      render: (member) => /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(member), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit")
+    doSearch();
+  }, [sortStatus, filters, formattersFull]);
+  const cols = [
+    {
+      title: "ID",
+      accessor: "id",
+      sortable: true,
+      textAlignment: "right"
+    },
+    {
+      title: "Name",
+      accessor: "name",
+      sortable: true,
+      render: (member) => {
+        const icon = member.content.type === FORMATTER_TYPES.FORMATTER ? /* @__PURE__ */ jsx(IconVariable, { size: "1.3em" }) : /* @__PURE__ */ jsx(IconMathFunction, { size: "1.3em" });
+        return /* @__PURE__ */ jsxs(Group, { noWrap: true, align: "center", spacing: 2, children: [
+          /* @__PURE__ */ jsx("span", { children: member.name }),
+          /* @__PURE__ */ jsx(Tooltip, { label: FORMATTER_TYPES_NAMES[member.content.type], children: /* @__PURE__ */ jsx("span", { children: icon }) })
+        ] });
+      }
+    },
+    {
+      title: "Description",
+      accessor: "content.description"
+    },
+    {
+      title: "Demo",
+      accessor: "content.testValue",
+      render: (member) => {
+        let input = member.content.testValue;
+        if (member.content.inputType === FORMATTER_INPUT_TYPES.STRING) {
+          input = `"${input}"`;
+        }
+        let output = member.result;
+        if (typeof member.result === "string") {
+          output = `"${output}"`;
+        }
+        return /* @__PURE__ */ jsxs(Group, { spacing: 2, children: [
+          /* @__PURE__ */ jsx(Tooltip, { label: `Input Type: ${FORMATTER_INPUT_TYPES_NAMES[member.content.inputType]}`, children: /* @__PURE__ */ jsx(Code, { color: "blue", children: input }) }),
+          /* @__PURE__ */ jsx(IconArrowRightCircle, {}),
+          /* @__PURE__ */ jsx(Code, { color: member.result && `${member.result}`.includes("ERROR") ? "red" : "teal", children: output })
+        ] });
+      }
+    },
+    {
+      title: "Usage",
+      accessor: "usageCount",
+      textAlignment: "right",
+      sortable: true
+    },
+    {
+      title: "",
+      accessor: "actions",
+      render: (member) => /* @__PURE__ */ jsxs(Group, { position: "center", spacing: "xs", noWrap: true, children: [
+        /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(member), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit"),
+        /* @__PURE__ */ jsx(
+          EntityDeleteButton,
+          {
+            id: member.id,
+            type: "formatter",
+            disabled: member.usageCount > 0,
+            warning: `Delete formatter called "${member.name}" (id:${member.id}) ? It is not used in any block.`
+          }
+        )
+      ] })
     }
   ];
   return /* @__PURE__ */ jsx(
@@ -8341,472 +8034,815 @@ function MembersTable({ members, onClickEdit, onSort }) {
       columns: cols,
       sortStatus,
       onSortStatusChange: (s) => setSortStatus(s),
-      idAccessor: "content_id",
+      idAccessor: "id",
       withBorder: true
     }
   );
 }
-function MetadataEditor() {
+function FormatterEditor() {
   const [editingId, setEditingId] = useState(null);
-  const [results, setResults] = useState([]);
-  const [loading, setLoading] = useState(true);
   const [internalFilters, setInternalFilters] = useState(true);
-  const [internalSort, setInternalSort] = useState();
   const onChangeFilters = (filters) => {
     setInternalFilters(filters);
   };
-  const onChangeSort = (sort) => {
-    setInternalSort(sort);
-  };
-  const setEditMember = (member) => {
-    setEditingId(member.content_id);
-  };
-  const onEditClose = () => {
-    setEditingId(null);
-    doSearch();
+  const onCreateFormatter = (id) => {
+    setEditingId(id);
   };
-  const doSearch = async () => {
-    setLoading(true);
-    const getParams = Object.keys({ ...internalFilters }).reduce((acc, key) => {
-      if (internalFilters[key] !== "all")
-        acc[key] = internalFilters[key];
-      return acc;
-    }, {});
-    const entityRecords = await axios.get(
-      "/api/cms/search/members",
-      {
-        params: {
-          ...getParams,
-          locale: "all",
-          includes: true,
-          sort: internalSort ? internalSort.columnAccessor : "id",
-          direction: internalSort ? internalSort.direction : "asc"
-        }
-      }
-    ).then((response) => response.data && response.data.data && response.data.data.results ? response.data.data.results : []);
-    setResults(entityRecords);
-    setLoading(false);
+  const setEditFormatter = (formatter) => {
+    if (formatter) {
+      setEditingId(formatter.id);
+    }
+  };
+  const onEditClose = () => {
+    setEditingId(null);
   };
-  useEffect(() => {
-    doSearch();
-  }, [internalFilters, internalSort]);
   return /* @__PURE__ */ jsxs(Container, { fluid: true, children: [
     /* @__PURE__ */ jsxs(Grid, { children: [
       /* @__PURE__ */ jsxs(Grid.Col, { span: 2, children: [
-        /* @__PURE__ */ jsx(Text, { ml: "xl", my: "sm", weight: "bold", children: "Metadata" }),
-        /* @__PURE__ */ jsx(FilterSidebar, { onChange: onChangeFilters, loading })
+        /* @__PURE__ */ jsx(Text, { ml: "xl", my: "sm", weight: "bold", children: "Formatters" }),
+        /* @__PURE__ */ jsx(FilterSidebar, { onChange: onChangeFilters, onEditCreation: onCreateFormatter, loading: false })
       ] }),
-      /* @__PURE__ */ jsxs(Grid.Col, { span: 10, style: { height: "100vh", position: "relative" }, children: [
-        /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
+      /* @__PURE__ */ jsxs(Grid.Col, { span: 10, style: { height: "100vh" }, children: [
         /* @__PURE__ */ jsx(Space, { h: "xs" }),
-        /* @__PURE__ */ jsx(MembersTable, { members: results, onClickEdit: setEditMember, onSort: onChangeSort })
+        /* @__PURE__ */ jsx(FormattersTable, { filters: internalFilters, onClickEdit: setEditFormatter })
       ] })
     ] }),
-    editingId && /* @__PURE__ */ jsx(MemberForm, { memberId: editingId, onEditEnd: onEditClose })
+    editingId && /* @__PURE__ */ jsx(FormatterForm, { formatterId: editingId, onEditEnd: onEditClose })
   ] });
 }
 
-// views/FormatterEditor.tsx
+// views/MetadataEditor.tsx
 init_esm_shims();
 
-// components/formatters/FilterSidebar.tsx
+// components/metadata/FilterSidebar.tsx
 init_esm_shims();
 init_store2();
-init_cms();
 var allOption2 = { value: "all", label: "All" };
-var buildOptionsFromMap = (options2) => {
-  if (!options2)
+var buildOptions = (options) => {
+  if (!options)
     return [];
-  const selectOptions = Object.keys(options2).map((k) => ({ value: String(k), label: String(options2[k]) }));
+  const selectOptions = options.map((d) => ({ value: String(d.id), label: d.name }));
   return [allOption2, ...selectOptions];
 };
-function FilterSidebar2({ onChange, loading, onEditCreation }) {
+function FilterSidebar2({ onChange, loading }) {
   const dispatch = useAppDispatch();
+  const reportsNested = useAppSelector((state) => state.records.tree);
+  const localeDefault8 = useAppSelector((state) => state.status.localeDefault);
   const [query, setQuery] = useState("");
-  const [loadingCreate, setLoadingCreate] = useState(false);
+  const [loadingRegenerate, setLoadingRegenerate] = useState(false);
   const [debouncedQuery] = useDebouncedValue(query, 500);
   const initialFilterState = {
-    type: allOption2.value
+    report: allOption2.value,
+    dimension: allOption2.value,
+    variant: allOption2.value,
+    visible: false,
+    noImage: false,
+    limit: "10"
+  };
+  const [filters, setFilters] = useState(initialFilterState);
+  const options = useMemo(() => ({
+    report: buildOptions(reportsNested),
+    dimension: buildOptions(reportsNested.filter((report) => filters.report === allOption2.value || filters.report === `${report.id}`).reduce((acc, report) => acc.concat(report.dimensions), [])),
+    variant: buildOptions(reportsNested.filter((report) => filters.report === allOption2.value || filters.report === `${report.id}`).reduce((acc, report) => {
+      report.dimensions.filter((dim) => filters.dimension === allOption2.value || filters.dimension === `${dim.id}`).forEach((dim) => {
+        acc = acc.concat(dim.variants);
+      });
+      return acc;
+    }, [])),
+    limit: [10, 25, 50].map((i) => ({ value: String(i), label: String(i) }))
+  }), [reportsNested, filters]);
+  const onChangeFilter = useCallback((key, value) => {
+    const newFilters = {
+      ...filters,
+      [key]: value
+    };
+    switch (key) {
+      case "report":
+        newFilters.dimension = allOption2.value;
+        break;
+      case "dimension":
+        newFilters.variant = allOption2.value;
+        break;
+    }
+    setFilters(newFilters);
+  }, [filters]);
+  const onClearFilters = () => {
+    setQuery("");
+    setFilters(initialFilterState);
+  };
+  const onRegenarateSearchIndex = () => {
+    setLoadingRegenerate(true);
+    dispatch(actions_exports.searchRegenerate()).then(() => {
+      setLoadingRegenerate(false);
+      onChange(filters);
+    });
+  };
+  useEffect(() => {
+    onChange({ ...filters, query: debouncedQuery });
+  }, [
+    filters.report,
+    filters.dimension,
+    filters.variant,
+    filters.visible,
+    filters.limit,
+    filters.noImage,
+    debouncedQuery
+  ]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: `Search item by name (${localeDefault8.toUpperCase()})`,
+        value: query,
+        onChange: (event) => setQuery(event.currentTarget.value),
+        disabled: loading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Reports",
+        data: options.report,
+        value: filters.report,
+        onChange: (value) => onChangeFilter("report", value),
+        disabled: loading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Dimensions",
+        data: options.dimension,
+        value: filters.dimension,
+        onChange: (value) => onChangeFilter("dimension", value),
+        disabled: loading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Variants",
+        data: options.variant,
+        value: filters.variant,
+        onChange: (value) => onChangeFilter("variant", value),
+        disabled: loading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "Rows limit",
+        data: options.limit,
+        value: filters.limit,
+        onChange: (value) => onChangeFilter("limit", value),
+        disabled: loading
+      }
+    ),
+    /* @__PURE__ */ jsx(Space, { h: "md" }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        label: "Show visible members only",
+        checked: filters.visible,
+        onChange: (event) => onChangeFilter("visible", event.currentTarget.checked)
+      }
+    ),
+    /* @__PURE__ */ jsx(Space, { h: "md" }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        label: "Show members with no image",
+        checked: filters.noImage,
+        onChange: (event) => onChangeFilter("noImage", event.currentTarget.checked)
+      }
+    ),
+    /* @__PURE__ */ jsx(Space, { h: "md" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        disabled: loading,
+        leftIcon: /* @__PURE__ */ jsx(IconCircleX, {}),
+        onClick: onClearFilters,
+        children: "Clear filters"
+      }
+    ),
+    /* @__PURE__ */ jsx(Space, { h: "md" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        fullWidth: true,
+        disabled: loading,
+        leftIcon: /* @__PURE__ */ jsx(IconRefresh, {}),
+        onClick: onRegenarateSearchIndex,
+        variant: "light",
+        loading: loadingRegenerate,
+        children: "Re-Index Search"
+      }
+    )
+  ] });
+}
+
+// components/metadata/MemberForm.tsx
+init_esm_shims();
+init_store2();
+
+// components/metadata/ImageSelector.tsx
+init_esm_shims();
+function ImageSelector({ member, onEditEnd }) {
+  const initialPrompt = member.contentByLocale && member.contentByLocale[0] ? member.contentByLocale[0].name : "";
+  const imageProviders = {
+    local: {
+      title: "Bespoke",
+      key: "local",
+      input: "text",
+      forceSearch: true,
+      getAxiosSearchConfig: (prompt2, image) => ({
+        url: "/api/cms/images/search/local",
+        method: "get",
+        params: { prompt: prompt2 }
+      })
+    },
+    flickr: {
+      title: "Flickr",
+      key: "flickr",
+      input: "text",
+      forceSearch: true,
+      getAxiosSearchConfig: (prompt2, image) => ({
+        url: "/api/cms/images/search/flickr",
+        method: "get",
+        params: { prompt: prompt2 }
+      })
+    },
+    unsplash: {
+      title: "Unsplash",
+      key: "unsplash",
+      input: "text",
+      forceSearch: true,
+      getAxiosSearchConfig: (prompt2, image) => ({
+        url: "/api/cms/images/search/unsplash",
+        method: "get",
+        params: { prompt: prompt2 }
+      })
+    },
+    upload: {
+      title: "Upload",
+      key: "upload",
+      input: "file",
+      forceSearch: false,
+      getAxiosSearchConfig: (prompt2, image) => ({})
+    }
+  };
+  const imageProvidersOptions = Object.keys(imageProviders).map((key) => ({ value: key, label: imageProviders[key].title }));
+  const [loading, setLoading] = useState(false);
+  const [selectedProvider, setSelectedProvider] = useState(Object.values(imageProviders)[0]);
+  const [scrollSize, setScrollSize] = useState(500);
+  const [prompt, setPrompt] = useState(initialPrompt);
+  const [imageToUpload, setImageToUpload] = useState();
+  const [results, setResults] = useState([]);
+  const [selectedImage, setSelectedImage] = useState();
+  const [error, setError] = useState(false);
+  const onSearch = async () => {
+    setError(false);
+    setLoading(true);
+    setResults([]);
+    const providerAxiosConfig = selectedProvider.getAxiosSearchConfig(prompt, imageToUpload);
+    const imageRecords = await axios(providerAxiosConfig).then((response) => response.data.data && response.data.data.results ? response.data.data.results : []).catch((e) => {
+      console.error(e);
+      setError(true);
+    });
+    setResults(imageRecords);
+    setLoading(false);
+  };
+  const onSelect = (img) => {
+    setSelectedImage(img);
+  };
+  const onSave = async () => {
+    setLoading(true);
+    const formData = new FormData();
+    formData.append("content_id", member.content_id);
+    if (selectedImage && imageToUpload) {
+      formData.append("file", imageToUpload);
+      delete selectedImage.file;
+    }
+    if (selectedImage) {
+      formData.append("image_id", selectedImage.id);
+      formData.append("image_source", selectedImage.source);
+    }
+    await axios({
+      method: "post",
+      url: `/api/cms/images/save/${selectedProvider.key}`,
+      data: formData
+    }).then((response) => {
+      onEditEnd(true);
+    }).catch((e) => {
+      console.error(e);
+      setError(true);
+    });
+    setLoading(false);
   };
-  const [filters, setFilters] = useState(initialFilterState);
-  const onClearFilters = () => {
-    setQuery("");
-    setFilters(initialFilterState);
+  const onChangeProvider = (providerKey) => {
+    setError(false);
+    setSelectedProvider(imageProviders[providerKey]);
+    setSelectedImage(void 0);
   };
-  const options2 = useMemo(() => ({
-    type: buildOptionsFromMap(FORMATTER_TYPES_NAMES)
-  }), []);
   useEffect(() => {
-    onChange({ ...filters, query: debouncedQuery });
-  }, [filters.type, debouncedQuery]);
-  const onAddNewFormatter = () => {
-    setLoadingCreate(true);
-    const newId = Math.random().toString(16).substring(2, 10);
-    dispatch(actions_exports.createEntity("formatter", {
-      name: `formatter_${newId}`,
-      content: {
-        type: "formatter",
-        logic: "return n;",
-        inputType: "string",
-        testValue: "123456",
-        description: "New formatter"
-      }
-    })).then((response) => {
-      setLoadingCreate(false);
-      onClearFilters();
-      if (response.ok) {
-        onEditCreation(response.data.id);
-      }
-    });
-  };
-  const onChangeFilter = useCallback((key, value) => {
-    const newFilters = {
-      ...filters,
-      [key]: value
-    };
-    setFilters(newFilters);
-  }, [filters]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        label: "Search by name or description",
-        value: query,
-        onChange: (event) => setQuery(event.currentTarget.value),
-        disabled: loading
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        label: "Type",
-        data: options2.type,
-        value: filters.type,
-        onChange: (value) => onChangeFilter("type", value),
-        disabled: loading
-      }
-    ),
-    /* @__PURE__ */ jsx(Space, { h: "md" }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        fullWidth: true,
-        disabled: loading,
-        leftIcon: /* @__PURE__ */ jsx(IconCircleX, {}),
-        onClick: onClearFilters,
-        children: "Clear filters"
-      }
-    ),
-    /* @__PURE__ */ jsx(Space, { h: "md" }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        fullWidth: true,
-        disabled: loading,
-        leftIcon: /* @__PURE__ */ jsx(IconPlus, {}),
-        onClick: onAddNewFormatter,
-        variant: "light",
-        loading: loadingCreate,
-        children: "New formatter"
-      }
-    )
-  ] });
+    const { innerHeight } = window;
+    setScrollSize(innerHeight - 280);
+    onSearch();
+  }, []);
+  useEffect(() => {
+    setResults([]);
+    if (!loading && selectedProvider.forceSearch) {
+      onSearch();
+    }
+  }, [selectedProvider]);
+  const noResults = results && results.length === 0 && !loading && selectedProvider.key !== "upload";
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      opened: true,
+      onClose: onEditEnd,
+      title: `Edit image for ${initialPrompt} (${member.id}) `,
+      padding: "lg",
+      closeOnClickOutside: false,
+      closeOnEscape: false,
+      position: "left",
+      size: "50%",
+      lockScroll: true,
+      withCloseButton: false,
+      children: /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: /* @__PURE__ */ jsxs(Stack, { children: [
+        /* @__PURE__ */ jsxs(Stack, { spacing: "xs", children: [
+          /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, align: "flex-end", children: [
+            selectedProvider.input === "text" && /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                placeholder: "Search term",
+                label: "Search term",
+                value: prompt,
+                onChange: (e) => setPrompt(e.target.value)
+              }
+            ),
+            selectedProvider.input === "file" && /* @__PURE__ */ jsx(
+              FileInput,
+              {
+                label: "Upload image",
+                placeholder: "Choose a PNG image from your computer",
+                accept: "image/png",
+                value: imageToUpload,
+                onChange: (image) => {
+                  setSelectedImage(void 0);
+                  if (image) {
+                    const objectUrl = URL.createObjectURL(image);
+                    setResults([{
+                      id: "custom",
+                      source: objectUrl,
+                      file: image
+                    }]);
+                    setImageToUpload(image);
+                    setSelectedImage("custom");
+                  }
+                },
+                icon: /* @__PURE__ */ jsx(IconUpload, { size: 14 })
+              }
+            ),
+            selectedProvider.forceSearch && /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: true,
+                disabled: loading || !prompt || prompt === "",
+                onClick: onSearch,
+                leftIcon: /* @__PURE__ */ jsx(IconPlayerPlay, {}),
+                children: "Search"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              disabled: loading,
+              value: selectedProvider.key,
+              onChange: (providerKey) => onChangeProvider(providerKey),
+              data: imageProvidersOptions,
+              fullWidth: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Group, { mt: "xs", grow: true, children: /* @__PURE__ */ jsxs(ScrollArea, { offsetScrollbars: true, type: "always", style: { height: scrollSize }, children: [
+          /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
+          error && /* @__PURE__ */ jsx(Alert, { title: `${selectedProvider.title}`, color: "red", children: "Error, please try again." }),
+          noResults && /* @__PURE__ */ jsx(Alert, { title: `${selectedProvider.title}`, color: "blue", children: "No results, for try another prompt or provider." }),
+          results && results.length > 0 && !loading && /* @__PURE__ */ jsx(SimpleGrid, { cols: 3, children: results.map((img) => /* @__PURE__ */ jsx(
+            Image,
+            {
+              radius: "md",
+              src: img.source,
+              style: {
+                cursor: "pointer",
+                borderRadius: 15,
+                border: selectedImage && selectedImage.id === img.id ? "5px solid black" : ""
+              },
+              onClick: () => onSelect(img)
+            },
+            img.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Group, { mt: "xs", grow: true, style: { height: 45 }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              disabled: loading,
+              onClick: () => onEditEnd(false),
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: onSave,
+              loading,
+              disabled: loading || !selectedImage,
+              children: "Save"
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
 }
+var ImageSelector_default = ImageSelector;
 
-// components/formatters/FormatterForm.tsx
+// views/ImagePreview.tsx
 init_esm_shims();
-init_store2();
-init_cms();
-init_FUNC();
-init_hooks();
-var buildOptionsFromMap2 = (options2) => {
-  if (!options2)
-    return [];
-  return Object.keys(options2).map((k) => ({ value: String(k), label: String(options2[k]) }));
-};
-var getCastedValue = (type, value) => {
-  switch (type) {
-    case FORMATTER_INPUT_TYPES.OBJECT:
-      return JSON.parse(value);
-    default:
-      return `${value}`;
+function ImagePreview2({
+  member,
+  height = "auto",
+  width = "100%",
+  size = "thumb",
+  forceRefreshTimestamp = false
+}) {
+  let extraParam = "";
+  if (forceRefreshTimestamp) {
+    extraParam = `&t=${new Date().getTime()}`;
   }
-};
-function FormatterForm({ formatterId, onEditEnd }) {
+  const imageUrl = member && member.image_id ? `/api/cms/member/image.png?member=${member.content_id}&size=${size}${extraParam}` : "https://placehold.jp/cccccc/ffffff/900x600.png?text=None";
+  return /* @__PURE__ */ jsx(Image, { height, width, radius: "md", src: imageUrl });
+}
+var ImagePreview_default = ImagePreview2;
+function MemberForm({ memberId, onEditEnd }) {
   const localeDefault8 = useAppSelector((state) => state.status.localeDefault);
   const locales3 = useAppSelector((state) => state.status.locales);
-  locales3.map((locale) => ({ value: locale, label: `${locale.toUpperCase()}` }));
-  const opened = !!formatterId;
-  const [formatter, setFormatter] = useState();
-  const [testResults, setTestResults] = useState("");
-  const [formatterNames, setFormatterNames] = useState([]);
-  const [initialLoading, setInitialLoading] = useState(true);
-  const [saveLoading, setSaveLoading] = useState(false);
-  const [isDirty, setIsDirty] = useState(true);
-  const [isValid, setIsValid] = useState(true);
+  const localesItems = locales3.map((locale) => ({ value: locale, label: `${locale.toUpperCase()}` }));
+  const opened = !!memberId;
+  const [selectedLocale, setSelectedLocale] = useState(localeDefault8);
+  const [member, setMember] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [showImageSelector, setShowImageSelector] = useState(false);
   const [error, setError] = useState(false);
+  const mainForm = useForm();
+  const localizedForms = locales3.reduce((acc, item) => {
+    acc[item] = useForm({});
+    return acc;
+  }, {});
+  const imageForm = useForm();
+  const localizedImageForms = locales3.reduce((acc, item) => {
+    acc[item] = useForm({});
+    return acc;
+  }, {});
   const dispatch = useAppDispatch();
-  const ref = useFormatterRef(formatterId);
-  const formattersList = useFormatterList();
-  const usageCount = useFormatterUsageCount(ref.data?.name);
-  const isLoading = initialLoading || saveLoading;
-  useEffect(() => {
-    if (!ref.isLoading) {
-      setFormatter(ref.data);
-    }
-  }, [ref.isLoading]);
-  useEffect(() => {
-    if (!ref.isLoading && !formattersList.isLoading) {
-      const formatterItem = !ref.isSuccess ? void 0 : ref.data;
-      const formatters = !formattersList.isSuccess ? [] : formattersList.data;
-      if (formatterItem) {
-        const formatterNamesList = formatters.filter((f) => f.id !== formatterItem.id).map((f) => f.name);
-        setFormatterNames(formatterNamesList);
+  const fetchMemberData = async () => {
+    setLoading(true);
+    setError(false);
+    const memberRecord = await dispatch(actions_exports.readMember(
+      {
+        locale: "all",
+        content_ids: memberId,
+        all: false,
+        mode: "content_ids"
       }
-      onTest();
-      setInitialLoading(false);
-    }
-  }, [ref.isLoading, formattersList.isLoading]);
-  const isValidName = formatter && !formatterNames.includes(formatter.name) && formatter.name !== "";
-  const onChangeName = (value) => {
-    if (isValidName) {
-      setIsValid(false);
-    }
-    if (formatter) {
-      setFormatter({
-        ...formatter,
-        name: slugifyInput_default(value).replace("-", "")
+    )).then((response) => {
+      let obj;
+      if (response.results && response.results[0]) {
+        setError(false);
+        obj = response.results[0];
+      } else {
+        setError(true);
+      }
+      return obj;
+    }).catch((e) => {
+      console.error(e);
+      setError(true);
+    });
+    if (memberRecord) {
+      setMember(memberRecord);
+      mainForm.setValues(memberRecord);
+      memberRecord.contentByLocale.forEach((item) => {
+        localizedForms[item.locale].setValues({
+          name: item.name,
+          keywords: item.keywords ? item.keywords : [],
+          attributes: item.attributes ? Object.keys(item.attributes).map((ak) => ({ key: ak, value: item.attributes[ak] })) : []
+        });
       });
+      if (memberRecord.image) {
+        imageForm.setValues(memberRecord.image);
+        memberRecord.image.contentByLocale.forEach((item) => {
+          localizedImageForms[item.locale].setValues({
+            meta: item.meta
+          });
+        });
+      }
     }
+    setLoading(false);
   };
-  const onContentValueChange = (key, value) => {
-    if (key !== "description") {
-      setIsDirty(true);
+  useEffect(() => {
+    if (memberId) {
+      fetchMemberData();
+    } else {
+      setMember(null);
     }
-    if (formatter) {
-      setFormatter({
-        ...formatter,
-        content: {
-          ...formatter.content,
-          [key]: value
-        }
-      });
+  }, [memberId]);
+  const onImageSelectorClose = async (edited) => {
+    if (edited) {
+      fetchMemberData();
     }
+    setShowImageSelector(false);
   };
-  const onTest = () => {
-    if (formatter) {
-      let results = "";
-      try {
-        const newFunction = parse({ vars: ["n"], logic: formatter.content.logic }, {}, localeDefault8, {});
-        const castedValue = getCastedValue(formatter.content.inputType, formatter.content.testValue);
-        results = newFunction(castedValue);
-        setIsValid(true);
-      } catch (e) {
-        results = `ERROR: ${e.message}`;
-        console.log(e);
-        setIsValid(false);
-      }
-      setIsDirty(false);
-      setTestResults(`${results}`);
-    }
+  const clearImage = () => {
+    setMember({
+      ...member,
+      image: null,
+      image_id: null
+    });
   };
-  const onSave = () => {
-    setSaveLoading(true);
-    if (isValid && isValidName) {
-      dispatch(actions_exports.updateEntity("formatter", formatter)).then(onEditEnd);
-    }
+  const onSave = async () => {
+    setLoading(true);
+    const payload = {
+      ...mainForm.values,
+      contentByLocale: member.contentByLocale.map((oldValues) => {
+        const localizedItem = localizedForms[oldValues.locale] ? { ...localizedForms[oldValues.locale].values } : {};
+        localizedItem.keywords = localizedItem.keywords && localizedItem.keywords.length > 0 ? localizedItem.keywords : null;
+        return {
+          ...oldValues,
+          ...localizedItem
+        };
+      }),
+      image: member.image ? {
+        ...imageForm.values,
+        contentByLocale: locales3.map((locale) => {
+          const oldValues = member.image.contentByLocale.find((e) => e.locale === locale);
+          const localizedItem = localizedImageForms[oldValues.locale] ? localizedImageForms[oldValues.locale].values : {};
+          return {
+            ...oldValues,
+            ...localizedItem
+          };
+        })
+      } : null,
+      image_id: member.image_id
+    };
+    await axios.post("/api/cms/update/member", payload).then((resp) => {
+      onEditEnd();
+      return resp.data.data;
+    });
   };
-  return /* @__PURE__ */ jsx(
-    Drawer,
-    {
-      opened,
-      onClose: () => onEditEnd(),
-      title: `Edit formatter ID ${formatterId}`,
-      padding: "lg",
-      closeOnClickOutside: false,
-      closeOnEscape: false,
-      position: "right",
-      size: "50%",
-      lockScroll: true,
-      withCloseButton: false,
-      children: /* @__PURE__ */ jsx(
-        DrawerContentWithScroll,
-        {
-          content: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(LoadingOverlay, { visible: initialLoading, overlayBlur: 2, overlayOpacity: 50 }),
-            error && /* @__PURE__ */ jsx(Alert, { title: "Formatter Form", color: "red", children: "Error, please try again." }),
-            formatter && !error && /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
-              /* @__PURE__ */ jsxs(Group, { grow: true, align: "flex-start", children: [
-                /* @__PURE__ */ jsx(
-                  TextInput,
+  const isValidLocalizedForm = Object.keys(localizedForms[selectedLocale].values).length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        opened,
+        onClose: () => onEditEnd(),
+        title: `Edit member ID ${memberId}`,
+        padding: "lg",
+        closeOnClickOutside: false,
+        closeOnEscape: false,
+        position: "right",
+        size: "50%",
+        lockScroll: true,
+        withCloseButton: false,
+        children: /* @__PURE__ */ jsx(
+          DrawerContentWithScroll,
+          {
+            content: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
+              error && /* @__PURE__ */ jsx(Alert, { title: "Member Form", color: "red", children: "Error, please try again." }),
+              member && !error && /* @__PURE__ */ jsxs(Stack, { justify: "space-between", children: [
+                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
+                  /* @__PURE__ */ jsxs(Stack, { children: [
+                    /* @__PURE__ */ jsx(ImagePreview_default, { member, forceRefreshTimestamp: true }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        disabled: loading,
+                        leftIcon: /* @__PURE__ */ jsx(IconPolaroid, {}),
+                        onClick: () => setShowImageSelector(true),
+                        children: "Change image"
+                      }
+                    ),
+                    member && member.image && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        disabled: loading,
+                        leftIcon: /* @__PURE__ */ jsx(IconCircleMinus, {}),
+                        onClick: () => clearImage(),
+                        children: "Remove image"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Space, { h: "md" })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        disabled: !member || !member.image,
+                        label: "Source",
+                        ...imageForm.getInputProps("url")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        disabled: !member || !member.image,
+                        label: "Author",
+                        ...imageForm.getInputProps("author")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        disabled: !member || !member.image,
+                        label: "License",
+                        ...imageForm.getInputProps("license")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      SegmentedControl,
+                      {
+                        disabled: !member || !member.image,
+                        value: selectedLocale,
+                        onChange: setSelectedLocale,
+                        data: localesItems
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        disabled: !member || !member.image,
+                        label: "Alternative image text",
+                        ...localizedImageForms[selectedLocale].getInputProps("meta")
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Code, { block: true, children: [
+                  "TO-DO apply same image also to some of these members? List of checkboxes",
+                  /* @__PURE__ */ jsx("br", {}),
+                  "(x) another member, similar name",
+                  /* @__PURE__ */ jsx("br", {}),
+                  "(x) another member, similar name",
+                  /* @__PURE__ */ jsx("br", {})
+                ] }),
+                /* @__PURE__ */ jsx(Divider, { my: "sm" }),
+                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
+                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Original ID", ...mainForm.getInputProps("id") }),
+                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Content ID", ...mainForm.getInputProps("content_id") })
+                ] }),
+                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      mt: "xs",
+                      icon: "/",
+                      disabled: true,
+                      label: "Variant Slug",
+                      ...mainForm.getInputProps("variant_slug")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", icon: "/", disabled: true, label: "Member Slug", ...mainForm.getInputProps("slug") })
+                ] }),
+                /* @__PURE__ */ jsxs(Group, { position: "apart", grow: true, children: [
+                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Report", ...mainForm.getInputProps("report_name") }),
+                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Dimension", ...mainForm.getInputProps("dimension_name") }),
+                  /* @__PURE__ */ jsx(TextInput, { mt: "xs", disabled: true, label: "Variant", ...mainForm.getInputProps("variant_name") })
+                ] }),
+                /* @__PURE__ */ jsx(Group, { position: "apart", grow: true, children: /* @__PURE__ */ jsx(
+                  Checkbox,
                   {
-                    label: `Name ${isValidName && usageCount > 0 ? `(Read only, used in ${usageCount} blocks)` : ""}`,
-                    value: formatter.name,
-                    icon: isValidName ? /* @__PURE__ */ jsx(IconCircleCheck, {}) : /* @__PURE__ */ jsx(IconAlertCircle, {}),
-                    readOnly: isValidName && usageCount > 0,
-                    disabled: isValidName && usageCount > 0,
-                    onChange: (evt) => onChangeName(evt.target.value),
-                    error: isValidName ? false : "Duplicate or empty name, choose a different one."
+                    mt: "xs",
+                    label: "Visible",
+                    ...mainForm.getInputProps("visible", { type: "checkbox" })
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  Select,
+                ) }),
+                /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", grow: true, children: /* @__PURE__ */ jsx(
+                  SegmentedControl,
                   {
-                    label: "Type",
-                    data: buildOptionsFromMap2(FORMATTER_TYPES_NAMES),
-                    value: formatter.content.type,
-                    onChange: (value) => onContentValueChange("type", value)
+                    value: selectedLocale,
+                    onChange: setSelectedLocale,
+                    data: localesItems
                   }
-                )
-              ] }),
+                ) }),
+                !isValidLocalizedForm && /* @__PURE__ */ jsx(Alert, { title: "Unavailable locale", color: "blue", children: "This language was not ingested for the current member. Go to variant editor and provide the members there." }),
+                isValidLocalizedForm && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", grow: true, children: /* @__PURE__ */ jsx(TextInput, { label: "Name", ...localizedForms[selectedLocale].getInputProps("name") }) }),
+                  /* @__PURE__ */ jsx(Group, { mt: "xs", position: "apart", align: "top", grow: true, children: /* @__PURE__ */ jsx(
+                    MultiSelect,
+                    {
+                      label: "Keywords",
+                      data: localizedForms[selectedLocale].values.keywords,
+                      placeholder: "Enter keywords",
+                      searchable: true,
+                      creatable: true,
+                      valueComponent: ({
+                        value,
+                        label,
+                        image,
+                        name
+                      }) => /* @__PURE__ */ jsxs(
+                        Badge,
+                        {
+                          onClick: () => {
+                            const current = localizedForms[selectedLocale].values.keywords;
+                            localizedForms[selectedLocale].setFieldValue(
+                              "keywords",
+                              current.filter((k) => k !== label)
+                            );
+                          },
+                          children: [
+                            label,
+                            " ",
+                            "x"
+                          ]
+                        }
+                      ),
+                      getCreateLabel: (query) => `+ Create ${query}`,
+                      value: localizedForms[selectedLocale].values.keywords,
+                      onCreate: (query) => {
+                        const current = localizedForms[selectedLocale].values.keywords;
+                        localizedForms[selectedLocale].setFieldValue("keywords", [...current, query]);
+                        return query;
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(Input.Wrapper, { label: "Attributes", children: /* @__PURE__ */ jsx(SortableTable, { data: localizedForms[selectedLocale].values.attributes }) })
+                ] })
+              ] })
+            ] }),
+            buttons: /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
-                Textarea,
+                Button,
                 {
-                  label: "Description",
-                  value: formatter.content.description,
-                  onChange: (evt) => onContentValueChange("description", evt.target.value)
+                  variant: "outline",
+                  disabled: loading,
+                  onClick: () => onEditEnd(),
+                  children: "Cancel"
                 }
               ),
               /* @__PURE__ */ jsx(
-                MonacoWrapper_default,
-                {
-                  monacoOptions: {
-                    onChange: (newLogic) => onContentValueChange("logic", newLogic),
-                    value: formatter.content.logic
-                  }
-                },
-                "formatter-code-editor"
-              ),
-              /* @__PURE__ */ jsxs(Group, { grow: true, align: "flex-end", children: [
-                /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    label: "Input Type",
-                    data: buildOptionsFromMap2(FORMATTER_INPUT_TYPES_NAMES),
-                    value: formatter.content.inputType,
-                    onChange: (value) => onContentValueChange("inputType", value)
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    label: "Test Value",
-                    value: formatter.content.testValue,
-                    onChange: (evt) => onContentValueChange("testValue", evt.target.value),
-                    error: formatter.content.testValue === "" && !isValid
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                Textarea,
-                {
-                  readOnly: true,
-                  icon: isValid ? /* @__PURE__ */ jsx(IconCircleCheck, {}) : /* @__PURE__ */ jsx(IconAlertCircle, {}),
-                  label: "Test Results",
-                  value: testResults,
-                  error: testResults.includes("ERROR") && !isValid ? "There is a problem in the function, input type or test value. Please check and run again." : false
-                }
-              )
-            ] })
-          ] }),
-          buttons: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                disabled: isLoading,
-                onClick: () => onEditEnd(),
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                onClick: onTest,
-                disabled: !isDirty,
-                color: isDirty ? "blue" : isValid ? "green" : "red",
-                leftIcon: /* @__PURE__ */ jsx(IconPlayerPlay, {}),
-                children: "Run Test"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                onClick: onSave,
-                loading: isLoading,
-                disabled: isLoading || !isValid || isDirty || !isValidName,
-                children: "Save"
-              }
-            )
-          ] }),
-          size: 145
-        }
-      )
-    }
-  );
-}
-
-// components/formatters/FormattersTable.tsx
-init_esm_shims();
-init_store2();
-init_hooks();
-init_cms();
-var getCastedValue2 = (type, value) => {
-  switch (type) {
-    case FORMATTER_INPUT_TYPES.OBJECT:
-      return JSON.parse(value);
-    default:
-      return `${value}`;
-  }
-};
-function FormattersTable({ filters, onClickEdit }) {
-  const [sortStatus, setSortStatus] = useState();
-  const [records, setRecords] = useState([]);
-  const formattersList = useFormatterList();
-  const formatters = !formattersList.isSuccess ? [] : formattersList.data;
-  const formatterFunctions = useFormatterFunctionsForLocale();
-  const formattersUsageCount = useFormatterUsageCountList();
-  const formattersFull = useMemo(() => formatters.map((f) => {
-    const usageCount = formattersUsageCount[f.name] ? formattersUsageCount[f.name] : 0;
-    let result = "";
-    try {
-      const castedValue = getCastedValue2(f.content.inputType, f.content.testValue);
-      result = formatterFunctions[f.name](castedValue);
-    } catch (e) {
-      result = `ERROR: ${e.message}`;
-      console.log(`Error in ${f.name}`);
-      console.log(e);
-    }
-    return {
-      ...f,
-      result,
-      usageCount
-    };
-  }), [formatters]);
-  const doSearch = () => {
-    let filteredResults = formattersFull.filter(
-      (formatter) => {
-        let findQuery = true;
-        let findType = true;
-        if (filters.query) {
-          findQuery = formatter.name.toLowerCase().indexOf(filters.query.toLowerCase()) > -1 || formatter.content.description.indexOf(filters.query) > -1;
-        }
-        if (filters.type !== "all") {
-          findType = formatter.content.type === filters.type;
-        }
-        return findQuery && findType;
+                Button,
+                {
+                  onClick: onSave,
+                  loading,
+                  disabled: loading,
+                  children: "Save Member"
+                }
+              )
+            ] }),
+            size: 145
+          }
+        )
       }
-    );
+    ),
+    showImageSelector && /* @__PURE__ */ jsx(ImageSelector_default, { member, onEditEnd: onImageSelectorClose })
+  ] });
+}
+
+// components/metadata/MembersTable.tsx
+init_esm_shims();
+init_store2();
+function MembersTable({ members, onClickEdit, onSort }) {
+  const [sortStatus, setSortStatus] = useState();
+  const [records, setRecords] = useState([]);
+  useEffect(() => {
     if (sortStatus) {
-      const sortIndex = sortStatus.direction === "asc" ? -1 : 1;
-      filteredResults = filteredResults.sort((a, b) => a[sortStatus.columnAccessor] > b[sortStatus.columnAccessor] ? 1 * sortIndex : -1 * sortIndex);
+      onSort(sortStatus);
     }
-    setRecords(filteredResults);
-  };
+  }, [sortStatus]);
   useEffect(() => {
-    doSearch();
-  }, [sortStatus, filters, formattersFull]);
+    setRecords(members);
+  }, [members]);
+  useEffect(() => {
+    setRecords(members);
+  }, []);
+  const localeDefault8 = useAppSelector((state) => state.status.localeDefault);
   const cols = [
+    {
+      title: "",
+      accessor: "visible",
+      width: "10px",
+      render: ({ visible }) => /* @__PURE__ */ jsx(Fragment, { children: !visible ? /* @__PURE__ */ jsx(Tooltip, { label: "Visible: false", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconEyeOff, { size: 20 }) }) }) : /* @__PURE__ */ jsx("span", {}) })
+    },
     {
       title: "ID",
       accessor: "id",
@@ -8814,61 +8850,79 @@ function FormattersTable({ filters, onClickEdit }) {
       textAlignment: "right"
     },
     {
-      title: "Name",
-      accessor: "name",
+      title: "Report",
+      accessor: "report.name"
+    },
+    {
+      title: "Dimension",
+      accessor: "dimension.name"
+    },
+    {
+      title: "Variant",
+      accessor: "variant.name"
+    },
+    {
+      title: "Slug",
+      accessor: "slug",
+      render: ({ slug, variant }) => /* @__PURE__ */ jsxs("span", { children: [
+        "/",
+        variant.slug,
+        "/",
+        slug
+      ] })
+    },
+    {
+      title: `Name ${localeDefault8.toUpperCase()}`,
       sortable: true,
-      render: (member) => {
-        const icon = member.content.type === FORMATTER_TYPES.FORMATTER ? /* @__PURE__ */ jsx(IconVariable, { size: "1.3em" }) : /* @__PURE__ */ jsx(IconMathFunction, { size: "1.3em" });
-        return /* @__PURE__ */ jsxs(Group, { noWrap: true, align: "center", spacing: 2, children: [
-          /* @__PURE__ */ jsx("span", { children: member.name }),
-          /* @__PURE__ */ jsx(Tooltip, { label: FORMATTER_TYPES_NAMES[member.content.type], children: /* @__PURE__ */ jsx("span", { children: icon }) })
+      accessor: "name",
+      render: ({ contentByLocale }) => {
+        const defaultLocalized = contentByLocale.find((item) => item.locale === localeDefault8);
+        const othersLocalized = contentByLocale.filter((item) => item.locale !== localeDefault8);
+        const nameTooltipContent = othersLocalized.reduce((acc, item) => {
+          const extraName = `${item.locale.toUpperCase()}: ${item.name}`;
+          const newLine2 = acc !== "" ? "\n" : "";
+          return `${acc}${newLine2}${extraName}`;
+        }, "");
+        return /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx("span", { children: defaultLocalized.name }),
+          othersLocalized.length > 0 && /* @__PURE__ */ jsx(Tooltip, { label: nameTooltipContent, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", color: "pink", radius: "xl", children: [
+            "+",
+            othersLocalized.length
+          ] }) })
         ] });
       }
     },
     {
-      title: "Description",
-      accessor: "content.description"
-    },
-    {
-      title: "Demo",
-      accessor: "content.testValue",
-      render: (member) => {
-        let input = member.content.testValue;
-        if (member.content.inputType === FORMATTER_INPUT_TYPES.STRING) {
-          input = `"${input}"`;
-        }
-        let output = member.result;
-        if (typeof member.result === "string") {
-          output = `"${output}"`;
-        }
-        return /* @__PURE__ */ jsxs(Group, { spacing: 2, children: [
-          /* @__PURE__ */ jsx(Tooltip, { label: `Input Type: ${FORMATTER_INPUT_TYPES_NAMES[member.content.inputType]}`, children: /* @__PURE__ */ jsx(Code, { color: "blue", children: input }) }),
-          /* @__PURE__ */ jsx(IconArrowRightCircle, {}),
-          /* @__PURE__ */ jsx(Code, { color: member.result && `${member.result}`.includes("ERROR") ? "red" : "teal", children: output })
+      title: `Keywords ${localeDefault8.toUpperCase()}`,
+      accessor: "keywords",
+      render: ({ contentByLocale }) => {
+        const defaultLocalized = contentByLocale.find((item) => item.locale === localeDefault8);
+        const othersLocalized = contentByLocale.filter((item) => item.locale !== localeDefault8);
+        const keywords = (defaultLocalized.keywords ? defaultLocalized.keywords : []).map((k) => /* @__PURE__ */ jsx(Badge, { children: k }, k));
+        const keywordsTooltipContent = othersLocalized.reduce((acc, item) => {
+          const otherKeywords = item.keywords || [];
+          const extraKeywords = `${item.locale.toUpperCase()}: ${otherKeywords.length > 0 ? otherKeywords.join(",") : "None"}`;
+          const newLine2 = acc !== "" ? "\n" : "";
+          return `${acc}${newLine2}${extraKeywords}`;
+        }, "");
+        return /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx("span", { children: keywords.length > 0 ? keywords : /* @__PURE__ */ jsx(Badge, { color: "gray", children: "None" }) }),
+          othersLocalized.length > 0 && /* @__PURE__ */ jsx(Tooltip, { label: keywordsTooltipContent, children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", color: "pink", radius: "xl", children: [
+            "+",
+            othersLocalized.length
+          ] }) })
         ] });
       }
     },
     {
-      title: "Usage",
-      accessor: "usageCount",
-      textAlignment: "right",
-      sortable: true
+      title: "Image",
+      accessor: "image",
+      render: (member) => /* @__PURE__ */ jsx(ImagePreview_default, { member, height: "50px" })
     },
     {
       title: "",
       accessor: "actions",
-      render: (member) => /* @__PURE__ */ jsxs(Group, { position: "center", spacing: "xs", noWrap: true, children: [
-        /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(member), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit"),
-        /* @__PURE__ */ jsx(
-          EntityDeleteButton,
-          {
-            id: member.id,
-            type: "formatter",
-            disabled: member.usageCount > 0,
-            warning: `Delete formatter called "${member.name}" (id:${member.id}) ? It is not used in any block.`
-          }
-        )
-      ] })
+      render: (member) => /* @__PURE__ */ jsx(ActionIcon, { onClick: () => onClickEdit(member), children: /* @__PURE__ */ jsx(IconPencil, { size: 20 }) }, "edit")
     }
   ];
   return /* @__PURE__ */ jsx(
@@ -8880,40 +8934,68 @@ function FormattersTable({ filters, onClickEdit }) {
       columns: cols,
       sortStatus,
       onSortStatusChange: (s) => setSortStatus(s),
-      idAccessor: "id",
+      idAccessor: "content_id",
       withBorder: true
     }
   );
 }
-function FormatterEditor() {
+function MetadataEditor() {
   const [editingId, setEditingId] = useState(null);
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(true);
   const [internalFilters, setInternalFilters] = useState(true);
+  const [internalSort, setInternalSort] = useState();
   const onChangeFilters = (filters) => {
     setInternalFilters(filters);
   };
-  const onCreateFormatter = (id) => {
-    setEditingId(id);
+  const onChangeSort = (sort) => {
+    setInternalSort(sort);
   };
-  const setEditFormatter = (formatter) => {
-    if (formatter) {
-      setEditingId(formatter.id);
-    }
+  const setEditMember = (member) => {
+    setEditingId(member.content_id);
   };
   const onEditClose = () => {
     setEditingId(null);
+    doSearch();
+  };
+  const doSearch = async () => {
+    setLoading(true);
+    const getParams = Object.keys({ ...internalFilters }).reduce((acc, key) => {
+      if (internalFilters[key] !== "all")
+        acc[key] = internalFilters[key];
+      return acc;
+    }, {});
+    const entityRecords = await axios.get(
+      "/api/cms/search/members",
+      {
+        params: {
+          ...getParams,
+          locale: "all",
+          includes: true,
+          sort: internalSort ? internalSort.columnAccessor : "id",
+          direction: internalSort ? internalSort.direction : "asc"
+        }
+      }
+    ).then((response) => response.data && response.data.data && response.data.data.results ? response.data.data.results : []);
+    setResults(entityRecords);
+    setLoading(false);
   };
+  useEffect(() => {
+    doSearch();
+  }, [internalFilters, internalSort]);
   return /* @__PURE__ */ jsxs(Container, { fluid: true, children: [
     /* @__PURE__ */ jsxs(Grid, { children: [
       /* @__PURE__ */ jsxs(Grid.Col, { span: 2, children: [
-        /* @__PURE__ */ jsx(Text, { ml: "xl", my: "sm", weight: "bold", children: "Formatters" }),
-        /* @__PURE__ */ jsx(FilterSidebar2, { onChange: onChangeFilters, onEditCreation: onCreateFormatter, loading: false })
+        /* @__PURE__ */ jsx(Text, { ml: "xl", my: "sm", weight: "bold", children: "Metadata" }),
+        /* @__PURE__ */ jsx(FilterSidebar2, { onChange: onChangeFilters, loading })
       ] }),
-      /* @__PURE__ */ jsxs(Grid.Col, { span: 10, style: { height: "100vh" }, children: [
+      /* @__PURE__ */ jsxs(Grid.Col, { span: 10, style: { height: "100vh", position: "relative" }, children: [
+        /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading, overlayBlur: 2, overlayOpacity: 50 }),
         /* @__PURE__ */ jsx(Space, { h: "xs" }),
-        /* @__PURE__ */ jsx(FormattersTable, { filters: internalFilters, onClickEdit: setEditFormatter })
+        /* @__PURE__ */ jsx(MembersTable, { members: results, onClickEdit: setEditMember, onSort: onChangeSort })
       ] })
     ] }),
-    editingId && /* @__PURE__ */ jsx(FormatterForm, { formatterId: editingId, onEditEnd: onEditClose })
+    editingId && /* @__PURE__ */ jsx(MemberForm, { memberId: editingId, onEditEnd: onEditClose })
   ] });
 }
 
@@ -8926,6 +9008,7 @@ init_store2();
 function ReportCard(props) {
   const { for: report } = props;
   const theme = useMantineTheme();
+  const location = useManagerLocation();
   const secondaryColor = theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7];
   return /* @__PURE__ */ jsxs(Card, { shadow: "xs", p: "lg", withBorder: true, style: { margin: theme.spacing.sm }, children: [
     /* @__PURE__ */ jsxs(Group, { position: "apart", children: [
@@ -8939,7 +9022,7 @@ function ReportCard(props) {
     /* @__PURE__ */ jsx(Text, { size: "sm", style: { color: secondaryColor, lineHeight: 2 }, children: "Description of report will go here" }),
     /* @__PURE__ */ jsx(Space, { w: "xs" }),
     /* @__PURE__ */ jsxs(Group, { position: "apart", children: [
-      /* @__PURE__ */ jsx(Button, { component: Link, to: `/reports/${report.id}`, leftIcon: /* @__PURE__ */ jsx(IconPencil, {}), compact: true, children: "Edit" }),
+      /* @__PURE__ */ jsx(Link, { href: location.href("reports", report.id), passHref: true, children: /* @__PURE__ */ jsx(Button, { component: "a", leftIcon: /* @__PURE__ */ jsx(IconPencil, {}), compact: true, children: "Edit" }) }),
       /* @__PURE__ */ jsx(EntityDeleteButton, { type: "report", id: report.id })
     ] })
   ] });
@@ -8986,122 +9069,112 @@ function ReportPicker() {
     )
   ] });
 }
-
-// views/BespokeCMS.tsx
-init_ResourceProvider();
-function MainLink({ item }) {
-  const { pathname } = useLocation();
-  return /* @__PURE__ */ jsx(Link, { to: item.href, children: /* @__PURE__ */ jsx(
-    UnstyledButton,
-    {
-      mt: "xs",
-      sx: (theme) => ({
-        border: "1px solid white",
-        borderColor: pathname === item.href ? "#ccc" : "transparent",
-        backgroundColor: "transparent",
-        display: "block",
-        width: "100%",
-        padding: theme.spacing.xs,
-        borderRadius: theme.radius.sm,
-        "&:hover": {
-          backgroundColor: "#f9f9f9"
-        }
-      }),
-      children: /* @__PURE__ */ jsxs(Group, { children: [
-        /* @__PURE__ */ jsx(ThemeIcon, { color: item.color, variant: "light", children: item.icon }),
-        /* @__PURE__ */ jsx(Text, { size: "sm", children: item.label })
-      ] })
-    }
-  ) }, item.label);
-}
-function MenuBtn({ opened, setOpened }) {
-  const { pathname } = useLocation();
-  const hasHeader = pathname.indexOf("/reports/") === 0;
-  return /* @__PURE__ */ jsx(
-    Burger,
-    {
-      style: {
-        position: "fixed",
-        top: hasHeader && opened ? 60 : 10,
-        left: opened ? 215 : 10,
-        zIndex: 101
-      },
-      opened,
-      onClick: () => setOpened((o) => !o),
-      size: "sm"
-    }
-  );
-}
-var options = [
-  {
-    icon: /* @__PURE__ */ jsx(IconBoxMargin, { size: 16 }),
-    color: "blue",
-    label: "Reports Builder",
-    href: "/reports"
-  },
-  {
-    icon: /* @__PURE__ */ jsx(IconTable, { size: 16 }),
-    color: "teal",
-    label: "Metadata Editor",
-    href: "/metadata"
-  },
-  {
-    icon: /* @__PURE__ */ jsx(IconMathFunction, { size: 16 }),
-    color: "violet",
-    label: "Formatters List",
-    href: "/formatters"
+function BespokeManager(options) {
+  const {
+    title = "Bespoke CMS",
+    pathSegment = "path"
+  } = options;
+  const notifications = {
+    position: "bottom-center",
+    ...options.notifications
+  };
+  return BespokeManagerPage;
+  function BespokeManagerPage() {
+    return /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment, children: [
+      /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: title }) }),
+      /* @__PURE__ */ jsx(MantineProvider, { children: /* @__PURE__ */ jsx(NotificationsProvider, { ...notifications, children: /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(BespokeManagerShell, {}) }) }) })
+    ] });
   }
-];
-function BespokeCMS() {
-  const [opened, setOpened] = useState(true);
-  const links = options.map((link) => /* @__PURE__ */ jsx(MainLink, { item: link }, link.label));
-  return /* @__PURE__ */ jsx(MantineProvider, { children: /* @__PURE__ */ jsx(ResourceProvider, { children: /* @__PURE__ */ jsx(NotificationsProvider, { position: "bottom-center", children: /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx("div", { suppressHydrationWarning: true, children: typeof window !== "undefined" && /* @__PURE__ */ jsx(HashRouter, { children: /* @__PURE__ */ jsx(
-    AppShell,
-    {
-      fixed: true,
-      padding: 0,
-      navbar: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(MenuBtn, { opened, setOpened }),
-        /* @__PURE__ */ jsxs(
-          Navbar,
-          {
-            p: "md",
-            width: { base: 250, xs: opened ? 250 : 0 },
-            hiddenBreakpoint: 1e5,
-            hidden: !opened,
-            children: [
-              /* @__PURE__ */ jsx(Navbar.Section, { style: { position: "relative" }, children: /* @__PURE__ */ jsx(Link, { to: "/reports", children: /* @__PURE__ */ jsx(
-                UnstyledButton,
-                {
-                  sx: (theme) => ({
-                    display: "block",
-                    width: "100%",
-                    borderRadius: theme.radius.sm,
-                    padding: theme.spacing.xs
-                  }),
-                  children: /* @__PURE__ */ jsxs(Group, { children: [
-                    /* @__PURE__ */ jsx(IconCircleDashed, { size: 30, color: "black" }),
-                    /* @__PURE__ */ jsxs(Text, { size: "lg", children: [
-                      "Bespoke",
-                      /* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsx("sub", { children: " beta" }) })
-                    ] })
-                  ] })
-                }
-              ) }) }),
-              /* @__PURE__ */ jsx(Navbar.Section, { grow: true, children: links })
-            ]
+}
+function BespokeManagerShell(props) {
+  const [opened, { toggle: toggleOpened }] = useDisclosure(true);
+  const location = useManagerLocation();
+  const navbar = useMemo(() => {
+    const links = [{
+      icon: /* @__PURE__ */ jsx(IconBoxMargin, { size: 16 }),
+      color: "blue",
+      label: "Reports Builder",
+      href: "reports"
+    }, {
+      icon: /* @__PURE__ */ jsx(IconTable, { size: 16 }),
+      color: "teal",
+      label: "Metadata Editor",
+      href: "metadata"
+    }, {
+      icon: /* @__PURE__ */ jsx(IconMathFunction, { size: 16 }),
+      color: "violet",
+      label: "Formatters List",
+      href: "formatters"
+    }].map((item) => /* @__PURE__ */ jsx(Link, { href: location.href(item.href), passHref: true, children: /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        component: "a",
+        mt: "xs",
+        sx: (theme) => ({
+          border: "1px solid white",
+          borderColor: location.matches(item.href) ? "#ccc" : "transparent",
+          backgroundColor: "transparent",
+          display: "block",
+          width: "100%",
+          padding: theme.spacing.xs,
+          borderRadius: theme.radius.sm,
+          "&:hover": {
+            backgroundColor: "#f9f9f9"
           }
-        )
-      ] }),
-      children: /* @__PURE__ */ jsxs(Routes, { children: [
-        /* @__PURE__ */ jsx(Route, { path: "/reports", element: /* @__PURE__ */ jsx(ReportPicker, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "/reports/:id", element: /* @__PURE__ */ jsx(ReportEditor2, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "/metadata", element: /* @__PURE__ */ jsx(MetadataEditor, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "/formatters", element: /* @__PURE__ */ jsx(FormatterEditor, {}) }),
-        /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(ReportPicker, {}) })
-      ] })
+        }),
+        children: /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(ThemeIcon, { color: item.color, variant: "light", children: item.icon }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", children: item.label })
+        ] })
+      }
+    ) }, item.label));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Burger,
+        {
+          style: {
+            position: "fixed",
+            top: opened && location.page === "reports" && location.params.length > 0 ? 60 : 10,
+            left: opened ? 215 : 10,
+            zIndex: 101
+          },
+          opened,
+          onClick: toggleOpened,
+          size: "sm"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Navbar,
+        {
+          p: "md",
+          width: { base: 250, xs: opened ? 250 : 0 },
+          hiddenBreakpoint: 1e5,
+          hidden: !opened,
+          children: [
+            /* @__PURE__ */ jsx(Navbar.Section, { style: { position: "relative" }, children: /* @__PURE__ */ jsx(BespokeLogo, { href: location.href("reports") }) }),
+            /* @__PURE__ */ jsx(Navbar.Section, { grow: true, children: links })
+          ]
+        }
+      )
+    ] });
+  }, [location, opened]);
+  const route = useMemo(() => {
+    if (location.page === "metadata") {
+      return /* @__PURE__ */ jsx(MetadataEditor, {});
+    }
+    if (location.page === "formatters") {
+      return /* @__PURE__ */ jsx(FormatterEditor, {});
+    }
+    if (location.page === "reports") {
+      if (location.params.length > 0) {
+        const report_id = Number.parseInt(location.params[0]);
+        return /* @__PURE__ */ jsx(ReportEditor2, { id: report_id });
+      }
+      return /* @__PURE__ */ jsx(ReportPicker, {});
     }
-  ) }) }) }) }) }) });
+    return null;
+  }, [location]);
+  return /* @__PURE__ */ jsx(AppShell, { fixed: true, padding: 0, navbar, children: route });
 }
 
 // views/BespokeRenderer.tsx
@@ -9110,4 +9183,4 @@ function BespokeRenderer() {
   return /* @__PURE__ */ jsx("div", { children: "Report COMING SOON" });
 }
 
-export { BespokeCMS, Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, BespokeRenderer, Report_default as BespokeReport, Search_default as BespokeSearch, DialogProvider, actions_exports as actions, storeWrapper, useAppDispatch as useBespokeDispatch, useAppSelector as useBespokeSelector, useDialog };
+export { Explore_default as BespokeExplore, ExploreModal_default as BespokeExploreModal, BespokeManager, BespokeRenderer, Report_default as BespokeReport, Search_default as BespokeSearch, DialogProvider, actions_exports as actions, storeWrapper, useAppDispatch as useBespokeDispatch, useAppSelector as useBespokeSelector, useDialog };