@meridian-ui/meridian 1.0.5 → 1.1.0

package/dist/cjs/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var require$$0 = require('react');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactGoogleMaps = require('@vis.gl/react-google-maps');
 
@@ -105,15 +105,15 @@ var hasRequiredUseSyncExternalStoreShim_production;
 function requireUseSyncExternalStoreShim_production () {
 	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
 	hasRequiredUseSyncExternalStoreShim_production = 1;
-	var React = require$$0;
+	var React$1 = React;
 	function is(x, y) {
 	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
 	}
 	var objectIs = "function" === typeof Object.is ? Object.is : is,
-	  useState = React.useState,
-	  useEffect = React.useEffect,
-	  useLayoutEffect = React.useLayoutEffect,
-	  useDebugValue = React.useDebugValue;
+	  useState = React$1.useState,
+	  useEffect = React$1.useEffect,
+	  useLayoutEffect = React$1.useLayoutEffect,
+	  useDebugValue = React$1.useDebugValue;
 	function useSyncExternalStore$2(subscribe, getSnapshot) {
 	  var value = getSnapshot(),
 	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
@@ -159,7 +159,7 @@ function requireUseSyncExternalStoreShim_production () {
 	    ? useSyncExternalStore$1
 	    : useSyncExternalStore$2;
 	useSyncExternalStoreShim_production.useSyncExternalStore =
-	  void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	  void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
 	return useSyncExternalStoreShim_production;
 }
 
@@ -187,7 +187,7 @@ function requireUseSyncExternalStoreShim_development () {
 	    }
 	    function useSyncExternalStore$2(subscribe, getSnapshot) {
 	      didWarnOld18Alpha ||
-	        void 0 === React.startTransition ||
+	        void 0 === React$1.startTransition ||
 	        ((didWarnOld18Alpha = true),
 	        console.error(
 	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
@@ -243,12 +243,12 @@ function requireUseSyncExternalStoreShim_development () {
 	      "function" ===
 	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
 	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-	    var React = require$$0,
+	    var React$1 = React,
 	      objectIs = "function" === typeof Object.is ? Object.is : is,
-	      useState = React.useState,
-	      useEffect = React.useEffect,
-	      useLayoutEffect = React.useLayoutEffect,
-	      useDebugValue = React.useDebugValue,
+	      useState = React$1.useState,
+	      useEffect = React$1.useEffect,
+	      useLayoutEffect = React$1.useLayoutEffect,
+	      useDebugValue = React$1.useDebugValue,
 	      didWarnOld18Alpha = false,
 	      didWarnUncachedGetSnapshot = false,
 	      shim =
@@ -258,7 +258,7 @@ function requireUseSyncExternalStoreShim_development () {
 	          ? useSyncExternalStore$1
 	          : useSyncExternalStore$2;
 	    useSyncExternalStoreShim_development.useSyncExternalStore =
-	      void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+	      void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
 	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
 	      "function" ===
 	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
@@ -296,17 +296,17 @@ var hasRequiredWithSelector_production;
 function requireWithSelector_production () {
 	if (hasRequiredWithSelector_production) return withSelector_production;
 	hasRequiredWithSelector_production = 1;
-	var React = require$$0,
+	var React$1 = React,
 	  shim = requireShim();
 	function is(x, y) {
 	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
 	}
 	var objectIs = "function" === typeof Object.is ? Object.is : is,
 	  useSyncExternalStore = shim.useSyncExternalStore,
-	  useRef = React.useRef,
-	  useEffect = React.useEffect,
-	  useMemo = React.useMemo,
-	  useDebugValue = React.useDebugValue;
+	  useRef = React$1.useRef,
+	  useEffect = React$1.useEffect,
+	  useMemo = React$1.useMemo,
+	  useDebugValue = React$1.useDebugValue;
 	withSelector_production.useSyncExternalStoreWithSelector = function (
 	  subscribe,
 	  getSnapshot,
@@ -399,14 +399,14 @@ function requireWithSelector_development () {
 	      "function" ===
 	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
 	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-	    var React = require$$0,
+	    var React$1 = React,
 	      shim = requireShim(),
 	      objectIs = "function" === typeof Object.is ? Object.is : is,
 	      useSyncExternalStore = shim.useSyncExternalStore,
-	      useRef = React.useRef,
-	      useEffect = React.useEffect,
-	      useMemo = React.useMemo,
-	      useDebugValue = React.useDebugValue;
+	      useRef = React$1.useRef,
+	      useEffect = React$1.useEffect,
+	      useMemo = React$1.useMemo,
+	      useDebugValue = React$1.useDebugValue;
 	    withSelector_development.useSyncExternalStoreWithSelector = function (
 	      subscribe,
 	      getSnapshot,
@@ -496,7 +496,7 @@ function requireWithSelector () {
 var withSelectorExports = requireWithSelector();
 var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
 
-const { useDebugValue } = require$$0;
+const { useDebugValue } = React;
 const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
 let didWarnAboutEqualityFn = false;
 const identity = (arg) => arg;
@@ -1138,7 +1138,7 @@ var Attribute = function (_a) {
                     .map(function (attributeSet, index) { return (jsxRuntime.jsx(Attribute, { className: classNameString, options: options, attribute: attributeSet, children: children }, index)); }) }));
         }
         else if (attribute.type === "element" ||
-            require$$0.isValidElement(attribute.value)) {
+            React.isValidElement(attribute.value)) {
             return (jsxRuntime.jsx("div", { className: classNameString, style: styleObject, children: attribute.value }));
         }
         else if (attribute.type === "image") {
@@ -1910,66 +1910,133 @@ var uuid = function () {
     });
 };
 
-var DropdownMenu = function (_a) {
-    var items = _a.items, onSelectItem = _a.onSelectItem, onClickAway = _a.onClickAway;
-    var dropdownRef = require$$0.useRef(null);
-    // State to manage visibility
-    // const [isVisible, setIsVisible] = useState(false);
-    // Close dropdown when clicking outside of it
-    require$$0.useEffect(function () {
+var MalleabilityOvervewTabs = function () {
+    var _a, _b, _c, _d, _e;
+    var _f = useODI(), odi = _f.odi, activeOverview = _f.activeOverview, setActiveOverview = _f.setActiveOverview, addNewOverview = _f.addNewOverview, removeOverview = _f.removeOverview, setLayoutOverview = _f.setLayoutOverview, setMalleabilityConsoleOpen = _f.setMalleabilityConsoleOpen, customLayouts = _f.customLayouts, highlightAttributes = _f.highlightAttributes, setHighlightAttributes = _f.setHighlightAttributes, enabledMalleableContent = _f.enabledMalleableContent;
+    var _g = React.useState(null), hoveredOverview = _g[0], setHoveredOverview = _g[1];
+    var _h = React.useState("tabs"), viewMode = _h[0]; _h[1];
+    var _j = React.useState(false); _j[0]; _j[1];
+    var _k = React.useState(false), showOverviewLayoutsDropdown = _k[0], setShowOverviewLayoutsDropdown = _k[1];
+    var overviewLayoutsDropdownRef = React.useRef(null);
+    // Close overview layouts dropdown when clicking outside
+    React.useEffect(function () {
         var handleClickOutside = function (event) {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                onClickAway();
+            if (overviewLayoutsDropdownRef.current &&
+                !overviewLayoutsDropdownRef.current.contains(event.target)) {
+                setShowOverviewLayoutsDropdown(false);
             }
         };
-        // Add event listener
-        document.addEventListener("mouseup", handleClickOutside);
-        // Cleanup event listener
+        if (showOverviewLayoutsDropdown) {
+            document.addEventListener("mouseup", handleClickOutside);
+        }
         return function () {
             document.removeEventListener("mouseup", handleClickOutside);
         };
-    }, []);
-    return (jsxRuntime.jsx("div", { className: "dropdown-menu-component", ref: dropdownRef, children: jsxRuntime.jsx("div", { className: "dropdown-menu", style: {
-                top: 20,
-            }, children: items.map(function (item, index) { return (jsxRuntime.jsx("div", { className: "px-4 py-2 hover:bg-gray-100 active:bg-gray-200 transition", onClick: function () {
-                    onSelectItem(item);
-                    onClickAway();
-                }, children: toTitleCase(item) }, index)); }) }) }));
-};
-
-var MalleabilityOvervewTabs = function () {
-    var _a = useODI(), odi = _a.odi, activeOverview = _a.activeOverview, setActiveOverview = _a.setActiveOverview, addNewOverview = _a.addNewOverview, removeOverview = _a.removeOverview, setLayoutOverview = _a.setLayoutOverview, setMalleabilityConsoleOpen = _a.setMalleabilityConsoleOpen;
-    var _b = require$$0.useState(null), clickedOverview = _b[0], setClickedOverview = _b[1];
-    var _c = require$$0.useState("tabs"), viewMode = _c[0]; _c[1];
-    var _d = require$$0.useState(false); _d[0]; _d[1];
-    var handleDropdownToggle = function (overviewId) {
-        setClickedOverview(overviewId === clickedOverview ? null : overviewId);
+    }, [showOverviewLayoutsDropdown]);
+    // Default layouts (hardcoded)
+    var defaultLayoutTypes = ["list", "grid", "table", "map"];
+    // Get all available overview types from the map
+    var allOverviewTypes = Object.keys(overviewTypesMap);
+    // Get custom layout IDs from UI (stored in localStorage)
+    var uiCustomLayoutIds = (customLayouts === null || customLayouts === void 0 ? void 0 : customLayouts.map(function (l) { return l.id; })) || [];
+    // Separate default layouts from custom overview types
+    var defaultLayouts = allOverviewTypes.filter(function (type) { return defaultLayoutTypes.includes(type); });
+    // Custom overview types from config (exclude UI-created ones to avoid duplicates)
+    var configCustomOverviewTypes = allOverviewTypes.filter(function (type) { return !defaultLayoutTypes.includes(type) && !uiCustomLayoutIds.includes(type); });
+    // Get icon for overview type (matching HTML toolbar icons)
+    var getOverviewIcon = function (type) {
+        switch (type) {
+            case "map":
+                return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntime.jsx("path", { d: "M2 4L6 2L10 4L14 2V12L10 14L6 12L2 14V4Z", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }));
+            case "grid":
+                return (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "5", height: "5", rx: "1", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("rect", { x: "9", y: "2", width: "5", height: "5", rx: "1", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("rect", { x: "2", y: "9", width: "5", height: "5", rx: "1", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "5", height: "5", rx: "1", stroke: "currentColor", strokeWidth: "1.5" })] }));
+            case "list":
+                return (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [jsxRuntime.jsx("rect", { x: "2", y: "3", width: "12", height: "2", rx: "1", fill: "currentColor" }), jsxRuntime.jsx("rect", { x: "2", y: "7", width: "12", height: "2", rx: "1", fill: "currentColor" }), jsxRuntime.jsx("rect", { x: "2", y: "11", width: "12", height: "2", rx: "1", fill: "currentColor" })] }));
+            case "table":
+                return (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "12", height: "12", rx: "1", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("line", { x1: "8", y1: "2", x2: "8", y2: "14", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("line", { x1: "2", y1: "8", x2: "14", y2: "8", stroke: "currentColor", strokeWidth: "1.5" })] }));
+            default:
+                // Custom layout icon (star)
+                return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsxRuntime.jsx("path", { d: "M8 2L10 6L14 7L11 10L12 14L8 12L4 14L5 10L2 7L6 6L8 2Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "0.5" }) }));
+        }
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: "overview-tabs-container", children: jsxRuntime.jsxs("div", { className: "overview-tabs overview-".concat(viewMode), children: [odi === null || odi === void 0 ? void 0 : odi.overviews.map(function (overview, index) { return (jsxRuntime.jsxs("div", { className: "overview-tab ".concat(activeOverview === overview.id
-                            ? "overview-tab-active"
-                            : "overview-tab-inactive"), onClick: function () {
-                            var _a;
-                            if (activeOverview !== overview.id) {
-                                setActiveOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "");
-                            }
-                        }, children: [jsxRuntime.jsx("div", { className: "overview-tab-layout-button\n                  ".concat(activeOverview === overview.id ? "active" : "inactive"), onClick: function (e) {
-                                    var _a;
-                                    e.stopPropagation();
-                                    if (clickedOverview !== overview.id) {
-                                        setClickedOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "");
-                                    }
-                                    else {
-                                        setClickedOverview(null);
-                                    }
-                                }, children: jsxRuntime.jsx("div", { className: "chevron ".concat(clickedOverview === overview.id ? "clicked" : ""), children: jsxRuntime.jsxs("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M1 9L5 5", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M1 1L5 5", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round" })] }) }) }), jsxRuntime.jsx("span", { className: "", children: toTitleCase(overview.type) }), odi.overviews.length > 1 ? (jsxRuntime.jsx("button", { className: "overview-tab-delete-button", onClick: function (e) {
-                                    var _a;
-                                    e.stopPropagation();
-                                    removeOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "");
-                                }, children: jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.46967 6.46967C0.176777 6.76256 0.176777 7.23744 0.46967 7.53033C0.762563 7.82322 1.23744 7.82322 1.53033 7.53033L3.99902 5.06164L6.46967 7.53228C6.76256 7.82518 7.23744 7.82518 7.53033 7.53228C7.82322 7.23939 7.82322 6.76452 7.53033 6.47162L5.05968 4.00098L7.53033 1.53033C7.82322 1.23744 7.82322 0.762563 7.53033 0.46967C7.23744 0.176777 6.76256 0.176776 6.46967 0.46967L3.99902 2.94032L1.53033 0.471623C1.23744 0.17873 0.762563 0.17873 0.46967 0.471623C0.176777 0.764517 0.176777 1.23939 0.46967 1.53228L2.93836 4.00098L0.46967 6.46967Z", fill: "black" }) }) })) : (jsxRuntime.jsx("div", { className: "w-[4px]" })), clickedOverview === overview.id && (jsxRuntime.jsx("div", { className: "dropdown-menu", children: jsxRuntime.jsx(DropdownMenu, { items: Object.keys(overviewTypesMap), onSelectItem: function (item) {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: "overview-tabs-container", children: jsxRuntime.jsx("div", { className: "overview-tabs overview-".concat(viewMode), children: jsxRuntime.jsxs("div", { className: "toolbar-content", children: [odi === null || odi === void 0 ? void 0 : odi.overviews.map(function (overview, index) { return (jsxRuntime.jsxs("div", { className: "overview-tab toolbar-item ".concat(activeOverview === overview.id
+                                ? "overview-tab-active"
+                                : "overview-tab-inactive"), onMouseEnter: function () { var _a; return setHoveredOverview((_a = overview.id) !== null && _a !== void 0 ? _a : null); }, onMouseLeave: function () { return setHoveredOverview(null); }, onClick: function () {
+                                var _a;
+                                if (activeOverview !== overview.id) {
+                                    setActiveOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "");
+                                }
+                            }, children: [jsxRuntime.jsx("span", { className: "", children: toTitleCase(overview.type) }), odi.overviews.length > 1 ? (jsxRuntime.jsx("button", { className: "overview-tab-delete-button", onClick: function (e) {
                                         var _a;
-                                        setLayoutOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "", item);
-                                    }, onClickAway: function () { return handleDropdownToggle(""); } }) }))] }, "".concat(overview.id, "-").concat(index))); }), jsxRuntime.jsxs("div", { className: "flex items-center justify-center", children: [jsxRuntime.jsx("button", { onClick: function () { return addNewOverview(); }, className: "overview-tab-add-button", children: jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M6 1L6 11", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M1 6L11 6", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round" })] }) }), jsxRuntime.jsx("button", { className: "more-settings-button", onClick: function () { return setMalleabilityConsoleOpen(true); }, children: "More Settings" })] })] }) }) }));
+                                        e.stopPropagation();
+                                        removeOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "");
+                                    }, children: jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.46967 6.46967C0.176777 6.76256 0.176777 7.23744 0.46967 7.53033C0.762563 7.82322 1.23744 7.82322 1.53033 7.53033L3.99902 5.06164L6.46967 7.53228C6.76256 7.82518 7.23744 7.82518 7.53033 7.53228C7.82322 7.23939 7.82322 6.76452 7.53033 6.47162L5.05968 4.00098L7.53033 1.53033C7.82322 1.23744 7.82322 0.762563 7.53033 0.46967C7.23744 0.176777 6.76256 0.176776 6.46967 0.46967L3.99902 2.94032L1.53033 0.471623C1.23744 0.17873 0.762563 0.17873 0.46967 0.471623C0.176777 0.764517 0.176777 1.23939 0.46967 1.53228L2.93836 4.00098L0.46967 6.46967Z", fill: "black" }) }) })) : (jsxRuntime.jsx("div", { className: "w-[4px]" })), hoveredOverview === overview.id && (jsxRuntime.jsxs("div", { className: "overview-hover-dropdown", children: [jsxRuntime.jsxs("div", { className: "dropdown-section", children: [jsxRuntime.jsx("div", { className: "dropdown-section-label", children: "Default Layouts" }), defaultLayouts.map(function (overviewType) {
+                                                    var isSelected = overview.type === overviewType;
+                                                    return (jsxRuntime.jsxs("button", { className: "dropdown-item ".concat(isSelected ? "active" : ""), onClick: function (e) {
+                                                            var _a;
+                                                            e.stopPropagation();
+                                                            if (!isSelected) {
+                                                                setLayoutOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "", overviewType);
+                                                            }
+                                                            setHoveredOverview(null);
+                                                        }, children: [getOverviewIcon(overviewType), jsxRuntime.jsx("span", { children: toTitleCase(overviewType) })] }, overviewType));
+                                                })] }), (configCustomOverviewTypes.length > 0 || (customLayouts && customLayouts.length > 0)) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "dropdown-divider", style: { height: "1px", background: "#e0e0e0", margin: "4px 0" } }), jsxRuntime.jsxs("div", { className: "dropdown-section", children: [jsxRuntime.jsx("div", { className: "dropdown-section-label", children: "Custom Layouts" }), configCustomOverviewTypes.map(function (overviewType) {
+                                                            var isSelected = overview.type === overviewType;
+                                                            var configType = overviewTypesMap[overviewType];
+                                                            var displayName = (configType === null || configType === void 0 ? void 0 : configType.type) ? toTitleCase(configType.type) : toTitleCase(overviewType);
+                                                            return (jsxRuntime.jsxs("button", { className: "dropdown-item custom-layout-item ".concat(isSelected ? "active" : ""), onClick: function (e) {
+                                                                    var _a;
+                                                                    e.stopPropagation();
+                                                                    if (!isSelected) {
+                                                                        setLayoutOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "", overviewType);
+                                                                    }
+                                                                    setHoveredOverview(null);
+                                                                }, children: [getOverviewIcon(overviewType), jsxRuntime.jsx("span", { children: displayName })] }, overviewType));
+                                                        }), customLayouts && customLayouts.map(function (layout) {
+                                                            var isSelected = overview.type === layout.id;
+                                                            return (jsxRuntime.jsxs("button", { className: "dropdown-item custom-layout-item ".concat(isSelected ? "active" : ""), onClick: function (e) {
+                                                                    var _a;
+                                                                    e.stopPropagation();
+                                                                    if (!isSelected) {
+                                                                        setLayoutOverview((_a = overview.id) !== null && _a !== void 0 ? _a : "", layout.id);
+                                                                    }
+                                                                    setHoveredOverview(null);
+                                                                }, children: [getOverviewIcon(layout.id), jsxRuntime.jsx("span", { children: layout.name })] }, layout.id));
+                                                        })] })] }))] }))] }, "".concat(overview.id, "-").concat(index))); }), jsxRuntime.jsx("div", { className: "toolbar-item", children: jsxRuntime.jsx("button", { onClick: function () { return addNewOverview(); }, className: "toolbar-btn overview-tab-add-button", title: "Add new overview", children: jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M6 1L6 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), jsxRuntime.jsx("path", { d: "M1 6L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }) }), jsxRuntime.jsxs("div", { className: "toolbar-item", id: "overviewLayouts", ref: overviewLayoutsDropdownRef, children: [jsxRuntime.jsxs("button", { className: "toolbar-btn", onClick: function () { return setShowOverviewLayoutsDropdown(!showOverviewLayoutsDropdown); }, title: "Overview Layouts", children: [jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("rect", { x: "2", y: "2", width: "7", height: "7", rx: "1", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("rect", { x: "11", y: "2", width: "7", height: "7", rx: "1", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("rect", { x: "2", y: "11", width: "7", height: "7", rx: "1", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("rect", { x: "11", y: "11", width: "7", height: "7", rx: "1", stroke: "currentColor", strokeWidth: "1.5" })] }), jsxRuntime.jsx("span", { children: "Overview Layouts" })] }), showOverviewLayoutsDropdown && (jsxRuntime.jsxs("div", { className: "dropdown-menu", id: "layoutsDropdown", children: [jsxRuntime.jsxs("div", { className: "dropdown-section", children: [jsxRuntime.jsx("div", { className: "dropdown-section-label", children: "Default Layouts" }), defaultLayouts.map(function (overviewType) {
+                                                    var activeOverviewData = odi === null || odi === void 0 ? void 0 : odi.overviews.find(function (ov) { return ov.id === activeOverview; });
+                                                    var isSelected = (activeOverviewData === null || activeOverviewData === void 0 ? void 0 : activeOverviewData.type) === overviewType;
+                                                    return (jsxRuntime.jsxs("button", { className: "dropdown-item ".concat(isSelected ? "active" : ""), onClick: function (e) {
+                                                            e.stopPropagation();
+                                                            if (activeOverview) {
+                                                                setLayoutOverview(activeOverview, overviewType);
+                                                            }
+                                                            setShowOverviewLayoutsDropdown(false);
+                                                        }, children: [getOverviewIcon(overviewType), jsxRuntime.jsx("span", { children: toTitleCase(overviewType) })] }, overviewType));
+                                                })] }), (configCustomOverviewTypes.length > 0 || (customLayouts && customLayouts.length > 0)) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "dropdown-divider", style: { height: "1px", background: "#e0e0e0", margin: "4px 0" } }), jsxRuntime.jsxs("div", { className: "dropdown-section", children: [jsxRuntime.jsx("div", { className: "dropdown-section-label", children: "Custom Layouts" }), configCustomOverviewTypes.map(function (overviewType) {
+                                                            var activeOverviewData = odi === null || odi === void 0 ? void 0 : odi.overviews.find(function (ov) { return ov.id === activeOverview; });
+                                                            var isSelected = (activeOverviewData === null || activeOverviewData === void 0 ? void 0 : activeOverviewData.type) === overviewType;
+                                                            var configType = overviewTypesMap[overviewType];
+                                                            var displayName = (configType === null || configType === void 0 ? void 0 : configType.type) ? toTitleCase(configType.type) : toTitleCase(overviewType);
+                                                            return (jsxRuntime.jsxs("button", { className: "dropdown-item custom-layout-item ".concat(isSelected ? "active" : ""), onClick: function (e) {
+                                                                    e.stopPropagation();
+                                                                    if (activeOverview) {
+                                                                        setLayoutOverview(activeOverview, overviewType);
+                                                                    }
+                                                                    setShowOverviewLayoutsDropdown(false);
+                                                                }, children: [getOverviewIcon(overviewType), jsxRuntime.jsx("span", { children: displayName })] }, overviewType));
+                                                        }), customLayouts && customLayouts.map(function (layout) {
+                                                            var activeOverviewData = odi === null || odi === void 0 ? void 0 : odi.overviews.find(function (ov) { return ov.id === activeOverview; });
+                                                            var isSelected = (activeOverviewData === null || activeOverviewData === void 0 ? void 0 : activeOverviewData.type) === layout.id;
+                                                            return (jsxRuntime.jsxs("button", { className: "dropdown-item custom-layout-item ".concat(isSelected ? "active" : ""), onClick: function (e) {
+                                                                    e.stopPropagation();
+                                                                    if (activeOverview) {
+                                                                        setLayoutOverview(activeOverview, layout.id);
+                                                                    }
+                                                                    setShowOverviewLayoutsDropdown(false);
+                                                                }, children: [getOverviewIcon(layout.id), jsxRuntime.jsx("span", { children: layout.name })] }, layout.id));
+                                                        })] })] }))] }))] }), enabledMalleableContent() &&
+                            !((_b = (_a = odi === null || odi === void 0 ? void 0 : odi.malleability) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.disabled) &&
+                            ((_e = (_d = (_c = odi === null || odi === void 0 ? void 0 : odi.malleability) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.types) === null || _e === void 0 ? void 0 : _e.includes("toggle")) && (jsxRuntime.jsx("div", { className: "toolbar-item", children: jsxRuntime.jsxs("button", { className: "toolbar-btn ".concat(highlightAttributes ? "active" : ""), onClick: function () { return setHighlightAttributes(!highlightAttributes); }, title: highlightAttributes ? "Turn off content customization" : "Customize Content", children: [jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M11.25 3.75L16.25 8.75L6.25 18.75H1.25V13.75L11.25 3.75Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M14.25 1.25L18.75 5.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), jsxRuntime.jsx("span", { children: highlightAttributes ? "Customizing" : "Customize Content" })] }) })), jsxRuntime.jsx("div", { className: "toolbar-item", children: jsxRuntime.jsxs("button", { className: "toolbar-btn more-settings-button", onClick: function () { return setMalleabilityConsoleOpen(true); }, title: "Meridian UI Settings", children: [jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "2.5", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntime.jsx("path", { d: "M10 2.5V5M10 15V17.5M17.5 10H15M5 10H2.5M15.303 4.697L13.536 6.464M6.464 13.536L4.697 15.303M15.303 15.303L13.536 13.536M6.464 6.464L4.697 4.697", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }), jsxRuntime.jsx("span", { children: "Meridian UI Settings" })] }) })] }) }) }) }));
 };
 
 // const ODIRenderer: React.FC<{ odi: BookingODI }> = ({ odi }) => {
@@ -1998,7 +2065,7 @@ var MeridianOverview = function (_a) {
         var overview = findOverviewById(odi, overviewIdToShow);
         if (overview) {
             var OverviewComponent = (_c = (_b = overviewTypesMap[overview.type]) === null || _b === void 0 ? void 0 : _b.view) !== null && _c !== void 0 ? _c : OverviewBasicList;
-            var OverviewWrapper = require$$0.Fragment;
+            var OverviewWrapper = React.Fragment;
             var items = [];
             if (attribute) {
                 var attributeItems = ((_e = (_d = getAttributeDataBindingById(odi, overview.bindingId, attribute)) === null || _d === void 0 ? void 0 : _d.attributes) !== null && _e !== void 0 ? _e : []);
@@ -2015,8 +2082,8 @@ var MeridianOverview = function (_a) {
             return (jsxRuntime.jsxs(OverviewWrapper, { children: [!attribute && enabledMalleableContent() && (jsxRuntime.jsx(MalleabilityAttributesToggle, {})), jsxRuntime.jsx(OverviewComponent, { overview: overview, items: items, viewType: "overview", onOpenDetailNewPage: onOpenDetailNewPage !== null && onOpenDetailNewPage !== void 0 ? onOpenDetailNewPage : (function () { }), onOpenOverviewNewPage: onOpenOverviewNewPage !== null && onOpenOverviewNewPage !== void 0 ? onOpenOverviewNewPage : (function () { }) })] }, "".concat(overview.id, "-").concat(0)));
         }
     }
-    console.log("bbbb", odi);
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex flex-col", children: [malleableCompositionSetting().includes("tabs") && (jsxRuntime.jsx(MalleabilityOvervewTabs, {})), enabledMalleableContent() && jsxRuntime.jsx(MalleabilityAttributesToggle, {})] }), odi.overviews
+    // console.log("bbbb", odi);
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "flex flex-col", children: [malleableCompositionSetting().includes("tabs") && (jsxRuntime.jsx(MalleabilityOvervewTabs, {})), enabledMalleableContent() && !malleableCompositionSetting().includes("tabs") && jsxRuntime.jsx(MalleabilityAttributesToggle, {})] }), odi.overviews
                 .filter(function (overview) {
                 return !malleableCompositionSetting().includes("tabs") ||
                     activeOverview === overview.id;
@@ -2024,7 +2091,7 @@ var MeridianOverview = function (_a) {
                 .map(function (overview, index) {
                 var _a, _b;
                 var OverviewComponent = (_b = (_a = overviewTypesMap[overview.type]) === null || _a === void 0 ? void 0 : _a.view) !== null && _b !== void 0 ? _b : OverviewBasicList;
-                var OverviewWrapper = require$$0.Fragment;
+                var OverviewWrapper = React.Fragment;
                 var items = filterItemAttributes(getDataBindingById(odi, overview.bindingId).items, overview.shownAttributes, overview.hiddenAttributes);
                 return (jsxRuntime.jsx(OverviewWrapper, { children: jsxRuntime.jsx(OverviewComponent, { overview: overview, items: items, viewType: "overview", onOpenDetailNewPage: onOpenDetailNewPage !== null && onOpenDetailNewPage !== void 0 ? onOpenDetailNewPage : (function () { }), onOpenOverviewNewPage: onOpenOverviewNewPage !== null && onOpenOverviewNewPage !== void 0 ? onOpenOverviewNewPage : (function () { }) }) }, "".concat(overview.id, "-").concat(index)));
             }), 
@@ -2066,7 +2133,7 @@ var MeridianDetail = function (_a) {
     var fetchedODI = _a.odi, dataLists = _a.dataLists, itemId = _a.itemId, detailId = _a.detailId; _a.onAction;
     var _g = useODI(), odi = _g.odi, setODI = _g.setODI, setOriginalODI = _g.setOriginalODI, selectedItemEntity = _g.selectedItemEntity, setSelectedItemEntity = _g.setSelectedItemEntity, getSelectedAttributeSet = _g.getSelectedAttributeSet; _g.setOnOpenNewPage;
     // Only set the ODI from the imported spec variable if DNE in the store.
-    require$$0.useEffect(function () {
+    React.useEffect(function () {
         if (fetchedODI && !odi && dataLists) {
             if (fetchedODI) {
                 setODI(denormalizeODI(fetchedODI));
@@ -2075,7 +2142,7 @@ var MeridianDetail = function (_a) {
         }
     }, [fetchedODI]);
     // Get default overview and detail view if selected detail content isn't found in the store.
-    require$$0.useEffect(function () {
+    React.useEffect(function () {
         var _a, _b, _c, _d, _e, _f, _g;
         if (!selectedItemEntity && odi) {
             if (detailId) {
@@ -2189,7 +2256,7 @@ var OverviewBasicMap = function (options) {
     if (!(coordinates === null || coordinates === void 0 ? void 0 : coordinates.every(function (p) { return p && p.lat && p.lng; }))) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No positions" });
     }
-    var _e = require$$0.useState(""), hoveredItemId = _e[0], setHoveredItemId = _e[1];
+    var _e = React.useState(""), hoveredItemId = _e[0], setHoveredItemId = _e[1];
     var _f = calculateMapBounds(coordinates), defaultCenter = _f.defaultCenter, defaultZoom = _f.defaultZoom;
     // Find the detail view that should open from clicking this attribute
     var detailToOpen = (_b = mapOverview.detailViews) === null || _b === void 0 ? void 0 : _b.find(function (detail) { var _a; return typeof detail === "object" && ((_a = detail.openFrom) === null || _a === void 0 ? void 0 : _a.includes("item")); });
@@ -2357,7 +2424,7 @@ var ItemCompact = function (_a) {
                 ? "image"
                 : "non-image"), options: options, attribute: attribute }));
     };
-    console.log(unlabeledAttributes);
+    // console.log(unlabeledAttributes);
     return (jsxRuntime.jsxs("div", { className: "item-compact ".concat(className), style: style, children: [labeledAttributes.map(function (attribute) { return (jsxRuntime.jsx(CompactAttribute, { attribute: attribute }, attribute === null || attribute === void 0 ? void 0 : attribute.id)); }), unlabeledAttributes.slice(0, sliceMax).map(function (attribute) { return (jsxRuntime.jsx(CompactAttribute, { attribute: attribute }, attribute === null || attribute === void 0 ? void 0 : attribute.id)); })] }));
 };
 
@@ -2633,6 +2700,88 @@ var getFirstOverview = function (odi) {
     return (_a = odi.overviews.find(function (overview) { return overview; })) !== null && _a !== void 0 ? _a : defaultOverview;
 };
 
+var OverviewCustom = function (options) {
+    var customLayouts = useODI().customLayouts;
+    var overview = options.overview; options.items;
+    // Find the custom layout by the overview type
+    var customLayout = customLayouts.find(function (layout) { return layout.id === overview.type; });
+    if (!customLayout) {
+        return (jsxRuntime.jsxs("div", { style: { padding: "24px", textAlign: "center", color: "#999" }, children: [jsxRuntime.jsxs("p", { children: ["Custom layout \"", overview.type, "\" not found."] }), jsxRuntime.jsx("p", { style: { fontSize: "12px", marginTop: "8px" }, children: "Please check your custom layouts in Meridian UI Settings." })] }));
+    }
+    // Try to execute the custom layout code
+    try {
+        // Create a function that returns the component
+        // Note: This uses Function constructor which has security implications
+        // In production, you might want to use a code sandbox or server-side rendering
+        var CustomComponent = React.useMemo(function () {
+            try {
+                // Create a function that executes the code in a scope with React available
+                var codeWithWrapper = "\n          (function(React) {\n            ".concat(customLayout.code, "\n            return typeof CustomLayoutView !== 'undefined' ? CustomLayoutView : \n                   (typeof exports !== 'undefined' && exports.default) ? exports.default :\n                   (typeof module !== 'undefined' && module.exports) ? module.exports :\n                   null;\n          })\n        ");
+                // Use Function constructor to create the component factory
+                var ComponentFactory = new Function('React', "return ".concat(codeWithWrapper))(React);
+                var Component_1 = ComponentFactory(React);
+                if (!Component_1 || typeof Component_1 !== 'function') {
+                    throw new Error("Component not found. Make sure your code defines a component named 'CustomLayoutView'.");
+                }
+                // Return a wrapper component that passes props correctly
+                return function (props) {
+                    try {
+                        return React.createElement(Component_1, props);
+                    }
+                    catch (error) {
+                        console.error("Error rendering custom component:", error);
+                        return React.createElement('div', { style: { padding: '24px', color: '#c33' } }, 'Error rendering custom layout: ' + (error instanceof Error ? error.message : 'Unknown error'));
+                    }
+                };
+            }
+            catch (error) {
+                console.error("Error loading custom layout:", error);
+                return null;
+            }
+        }, [customLayout.code]);
+        if (!CustomComponent) {
+            throw new Error("Failed to load custom component");
+        }
+        return jsxRuntime.jsx(CustomComponent, __assign({}, options));
+    }
+    catch (error) {
+        return (jsxRuntime.jsxs("div", { style: { padding: "24px", background: "#fee", border: "1px solid #fcc", borderRadius: "8px", color: "#c33" }, children: [jsxRuntime.jsx("p", { style: { fontWeight: 600, marginBottom: "8px" }, children: "Error rendering custom layout:" }), jsxRuntime.jsx("p", { style: { fontSize: "14px", marginBottom: "12px" }, children: (error === null || error === void 0 ? void 0 : error.message) || "Unknown error" }), jsxRuntime.jsx("p", { style: { fontSize: "12px", color: "#999" }, children: "Please check your custom layout code in Meridian UI Settings." })] }));
+    }
+};
+
+var CUSTOM_LAYOUTS_STORAGE_KEY = "meridian-custom-layouts";
+var loadCustomLayouts = function () {
+    if (typeof window === "undefined")
+        return [];
+    try {
+        var stored = localStorage.getItem(CUSTOM_LAYOUTS_STORAGE_KEY);
+        var layouts = stored ? JSON.parse(stored) : [];
+        // Register all custom layouts with overviewTypesMap
+        layouts.forEach(function (layout) {
+            if (!overviewTypesMap[layout.id]) {
+                addOverviewType({
+                    type: layout.id,
+                    view: OverviewCustom,
+                    defaultSpec: {},
+                });
+            }
+        });
+        return layouts;
+    }
+    catch (_a) {
+        return [];
+    }
+};
+var saveCustomLayouts = function (layouts) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        localStorage.setItem(CUSTOM_LAYOUTS_STORAGE_KEY, JSON.stringify(layouts));
+    }
+    catch (error) {
+        console.error("Failed to save custom layouts:", error);
+    }
+};
 // Add this helper function before the useODIMalleability definition
 var createNewOverview = function (odi, activeOverviewId, customOverview, newId) {
     // Find the active overview to copy
@@ -2693,11 +2842,13 @@ var createODIMalleabilityStore = function (set, get) { return ({
         id: "",
     },
     setLastSelected: function (x, y, view, id) { return set({ lastSelected: { position: { x: x, y: y }, view: view, id: id } }); },
-    clearSelection: function () { return set({ selectedAttributes: [], lastSelected: {
+    clearSelection: function () { return set({
+        selectedAttributes: [], lastSelected: {
             position: { x: 0, y: 0 },
             view: "overview",
             id: "",
-        } }); },
+        }
+    }); },
     // ---- COMPOSITION: STATE ----
     activeOverview: "0",
     setActiveOverview: function (overviewId) { return set({ activeOverview: overviewId }); },
@@ -2849,6 +3000,41 @@ var createODIMalleabilityStore = function (set, get) { return ({
     setItemViewStyle: function (style) {
         return set({ itemViewStyle: style });
     },
+    // ---- CUSTOM LAYOUTS ----
+    customLayouts: loadCustomLayouts(),
+    getCustomLayouts: function () {
+        var customLayouts = get().customLayouts;
+        return customLayouts;
+    },
+    addCustomLayout: function (name, id, code) {
+        // Validate ID
+        if (!/^[a-z0-9-]+$/.test(id)) {
+            return false;
+        }
+        var customLayouts = get().customLayouts;
+        // Check if ID already exists in custom layouts or in overviewTypesMap (including config-based custom overview types)
+        if (customLayouts.find(function (l) { return l.id === id; }) || overviewTypesMap[id]) {
+            return false;
+        }
+        // Register the custom layout with overviewTypesMap
+        addOverviewType({
+            type: id,
+            view: OverviewCustom,
+            defaultSpec: {},
+        });
+        var newLayouts = __spreadArray(__spreadArray([], customLayouts, true), [{ name: name, id: id, code: code }], false);
+        saveCustomLayouts(newLayouts);
+        set({ customLayouts: newLayouts });
+        return true;
+    },
+    removeCustomLayout: function (id) {
+        var customLayouts = get().customLayouts;
+        var newLayouts = customLayouts.filter(function (l) { return l.id !== id; });
+        saveCustomLayouts(newLayouts);
+        // Note: We don't remove from overviewTypesMap to avoid breaking existing overviews
+        // The component will handle missing layouts gracefully
+        set({ customLayouts: newLayouts });
+    },
 }); };
 // getSelectedAttributeSet: () => AttributeSet | undefined;
 
@@ -2996,9 +3182,9 @@ var skeletonODI = {
 
 var SettingComponent = function (_a) {
     var title = _a.title, values = _a.values, options = _a.options, onChange = _a.onChange, _b = _a.mode, mode = _b === void 0 ? "single" : _b, _c = _a.toggleOptions, toggleOptions = _c === void 0 ? { on: "on", off: "off" } : _c;
-    var _d = require$$0.useState(false), isOpen = _d[0], setIsOpen = _d[1];
-    var dropdownRef = require$$0.useRef(null);
-    require$$0.useEffect(function () {
+    var _d = React.useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var dropdownRef = React.useRef(null);
+    React.useEffect(function () {
         var handleClickOutside = function (event) {
             if (dropdownRef.current &&
                 !dropdownRef.current.contains(event.target)) {
@@ -3305,11 +3491,11 @@ var SettingsPanel = function () {
 var MeridianWrapper = function (_a) {
     var children = _a.children, dataInitial = _a.data, odiInitial = _a.odi, customOverviewTypes = _a.customOverviewTypes, customItemViewTypes = _a.customItemViewTypes, customDetailViewTypes = _a.customDetailViewTypes, customAttributeTypes = _a.customAttributeTypes, onOpenDetailNewPage = _a.onOpenDetailNewPage, onOpenOverviewNewPage = _a.onOpenOverviewNewPage; _a.onAction; _a.isNewPage;
     var _b = useODI(), selectedItemEntity = _b.selectedItemEntity, clearSelectedItemEntity = _b.clearSelectedItemEntity, odi = _b.odi, selectedAttributes = _b.selectedAttributes; _b.getSelectedAttributeSet; var lastSelected = _b.lastSelected, clearSelection = _b.clearSelection, setSpecShownAttributes = _b.setSpecShownAttributes; _b.highlightAttributes; var setHighlightAttributes = _b.setHighlightAttributes, closeDetail = _b.closeDetail, malleabilityConsoleOpen = _b.malleabilityConsoleOpen, setMalleabilityConsoleOpen = _b.setMalleabilityConsoleOpen, initialize = _b.initialize;
-    console.log("wrapper: odi", odi);
-    console.log("wrapper: odiInitial", odiInitial);
-    console.log("wrapper: selectedItemEntity", selectedItemEntity);
+    // console.log("wrapper: odi", odi);
+    // console.log("wrapper: odiInitial", odiInitial);
+    // console.log("wrapper: selectedItemEntity", selectedItemEntity);
     // Initialize Meridian with all data and configuration
-    require$$0.useEffect(function () {
+    React.useEffect(function () {
         console.log("====: initialize");
         initialize(dataInitial, odiInitial !== null && odiInitial !== void 0 ? odiInitial : skeletonODI, {
             customOverviewTypes: customOverviewTypes,