@metastringfoundation/map-list 0.1.0 → 0.1.2

package/dist/components/sidebar/common/layer-compare-addon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = LayerCompareAddon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const core_1 = require("../../core");
+function LayerCompareAddon({ id }) {
+    const { layer } = (0, use_layers_1.default)();
+    const checked = Boolean(layer?.compareList?.includes(id));
+    const onToggle = () => {
+        layer.setCompareLayer(id, !checked);
+    };
+    return ((0, jsx_runtime_1.jsx)(core_1.Button, { children: (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "h-4 w-4 accent-green-700", checked: checked, onChange: onToggle }), (0, jsx_runtime_1.jsx)("span", { children: "Compare" })] }) }));
+}

package/dist/components/sidebar/common/layer-item-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-item-style.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item-style.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE,kDA0B7D"}
+{"version":3,"file":"layer-item-style.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item-style.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE,kDA4H7D"}

package/dist/components/sidebar/common/layer-item-style.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LayerItemStyle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
+const react_1 = require("react");
 const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
 const core_1 = require("../../core");
 const moreless_1 = __importDefault(require("./moreless"));
@@ -14,8 +15,52 @@ function LayerItemStyle({ item }) {
     if (!item.data?.styles)
         return null;
     const { layer } = (0, use_layers_1.default)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const dropdownRef = (0, react_1.useRef)(null);
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
     const onStyleChange = (e) => {
         layer.updateStyle(item.id, Number(e.target.value));
+        setSelectedIndex(Number(e.target.value));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 pt-2", children: [item.layerType !== "RASTER" && ((0, jsx_runtime_1.jsx)(core_1.SelectInput, { onChange: onStyleChange, children: item.data?.styles.map((opt, idx) => ((0, jsx_runtime_1.jsx)("option", { value: idx, children: opt.styleTitle }, idx))) })), (0, jsx_runtime_1.jsx)(moreless_1.default, { children: (0, jsx_runtime_1.jsx)(style_legend_1.StyleLegend, { item: item }) })] }));
+    // Toggle checkbox for comparison (independent from dropdown selection)
+    const onCheckboxToggle = (styleIndex, event) => {
+        event.stopPropagation(); // Prevent dropdown item click
+        const attributeKey = `${item.id}-${styleIndex}`;
+        layer.toggleAttributeCompare(attributeKey);
+    };
+    const selectedStyle = item.data?.styles[selectedIndex];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 pt-2", children: [item.layerType !== "RASTER" && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "block w-full px-4 py-2 mt-2 text-gray-700 border bg-white border-gray-200 rounded-md focus:outline-none focus:ring text-left flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { children: selectedStyle?.styleTitle || "Select attribute" }), (0, jsx_runtime_1.jsx)("svg", { className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isOpen && ((0, jsx_runtime_1.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-auto", children: item.data?.styles.map((opt, idx) => {
+                            const attributeKey = `${item.id}-${idx}`;
+                            const isChecked = layer.checkedAttributes.has(attributeKey);
+                            const checkedCount = layer.getCheckedAttributesCount();
+                            const isLimitReached = checkedCount >= 8 && !isChecked;
+                            const isSelected = idx === selectedIndex;
+                            return ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center justify-between px-4 py-2 border-b border-gray-100 last:border-b-0 ${isSelected
+                                    ? "bg-blue-50 hover:bg-blue-100"
+                                    : "hover:bg-gray-50"}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "flex-1 text-gray-700 cursor-pointer", onClick: () => {
+                                            onStyleChange({ target: { value: idx } });
+                                            setIsOpen(false);
+                                        }, children: opt.styleTitle }), (0, jsx_runtime_1.jsx)("div", { onClick: (e) => {
+                                            if (isLimitReached) {
+                                                e.stopPropagation();
+                                                alert("Maximum 8 attributes can be compared at a time");
+                                                return;
+                                            }
+                                            onCheckboxToggle(idx, e);
+                                        }, className: isLimitReached ? "opacity-50 cursor-not-allowed" : "cursor-pointer", title: isLimitReached ? "Maximum 8 attributes can be compared at a time" : "", children: (0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: `compare-${item.id}-${idx}`, checked: isChecked, disabled: isLimitReached, onChange: () => { } }) })] }, idx));
+                        }) }))] })), (0, jsx_runtime_1.jsx)(moreless_1.default, { children: (0, jsx_runtime_1.jsx)(style_legend_1.StyleLegend, { item: item }) })] }));
 }

package/dist/components/sidebar/common/layer-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-item.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAwBrD,UAAU,cAAc;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB;AAGD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,aAAa,GACd,EAAE,cAAc,2CAyIhB"}
+{"version":3,"file":"layer-item.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAwBrD,UAAU,cAAc;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,aAAa,GACd,EAAE,cAAc,2CAmIhB"}

package/dist/components/sidebar/common/layer-item.js

@@ -55,5 +55,5 @@ function LayerItem({ item, extended, dragHandleProps, dragHandleRef, }) {
         mp?.onLayerDownload(item.id);
     };
     const handleOnZoom = () => layer?.zoomToExtent(item?.id);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "z-20 p-3 bg-white border-t border-gray-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [(0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: item.id, checked: isAdded, onChange: onToggleLayer, isLoading: isLoading }), extended && ((0, jsx_runtime_1.jsx)("div", { ref: dragHandleRef, ...dragHandleProps, className: "mt-1 w-6 text-center cursor-move", children: (0, jsx_runtime_1.jsx)(core_1.GrabberIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("img", { className: "flex shrink-0 overflow-hidden h-16 w-16 p-1 mb-2 object-cover border border-gray-200 rounded", src: item.thumbnail || constants_1.FALLBACK_THUMB }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { title: item.title, className: "mb-1 leading-tight", style: constants_1.overflowStyle, children: (0, jsx_runtime_1.jsx)(highlighter_1.Highlighted, { text: item.title, highlight: query.term }) }), (0, jsx_runtime_1.jsx)("p", { title: item.description, className: "text-gray-600 text-sm", style: constants_1.overflowStyle2, children: item.description })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "pb-3", children: extended && (0, jsx_runtime_1.jsx)(opacity_handler_addon_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: onDownloadLayer, disabled: !item.isDownloadable, children: [(0, jsx_runtime_1.jsx)(core_1.DownloadIcon, {}), " Download"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: shareLayer, title: "Share", children: (0, jsx_runtime_1.jsx)(core_1.ShareIcon, {}) }), extended && ((0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleOnZoom, title: "Zoom To Extent", children: (0, jsx_runtime_1.jsx)(core_1.ZoomExtentIcon, {}) })), (0, jsx_runtime_1.jsx)(info_popover_1.PopoverWrapper, { item: item })] })] }), extended && (0, jsx_runtime_1.jsx)(layer_item_style_1.default, { item: item }), extended && item?.source?.type === "grid" && (0, jsx_runtime_1.jsx)(grid_legend_1.default, { item: item })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "z-20 p-3 bg-white border-t border-gray-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [(0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: item.id, checked: isAdded, onChange: onToggleLayer, isLoading: isLoading }), extended && ((0, jsx_runtime_1.jsx)("div", { ref: dragHandleRef, ...dragHandleProps, className: "mt-1 w-6 text-center cursor-move", children: (0, jsx_runtime_1.jsx)(core_1.GrabberIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("img", { className: "flex shrink-0 overflow-hidden h-16 w-16 p-1 mb-2 object-cover border border-gray-200 rounded", src: item.thumbnail || constants_1.FALLBACK_THUMB }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { title: item.title, className: "mb-1 leading-tight", style: constants_1.overflowStyle, children: (0, jsx_runtime_1.jsx)(highlighter_1.Highlighted, { text: item.title, highlight: query.term }) }), (0, jsx_runtime_1.jsx)("p", { title: item.description, className: "text-gray-600 text-sm", style: constants_1.overflowStyle2, children: item.description })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "pb-3", children: extended && (0, jsx_runtime_1.jsx)(opacity_handler_addon_1.default, { layerId: item.id }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [!extended && ((0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: onDownloadLayer, disabled: !item.isDownloadable, children: [(0, jsx_runtime_1.jsx)(core_1.DownloadIcon, {}), " Download"] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: shareLayer, title: "Share", children: (0, jsx_runtime_1.jsx)(core_1.ShareIcon, {}) }), extended && ((0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleOnZoom, title: "Zoom To Extent", children: (0, jsx_runtime_1.jsx)(core_1.ZoomExtentIcon, {}) })), (0, jsx_runtime_1.jsx)(info_popover_1.PopoverWrapper, { item: item })] })] }), extended && (0, jsx_runtime_1.jsx)(layer_item_style_1.default, { item: item }), extended && item?.source?.type === "grid" && (0, jsx_runtime_1.jsx)(grid_legend_1.default, { item: item })] }));
 }

package/dist/components/sidebar/common/opacity-handler-addon.d.ts

@@ -1,3 +1,6 @@
-declare const OpacitySlider: () => import("react/jsx-runtime").JSX.Element;
-export default OpacitySlider;
+interface OpacityHandlerProps {
+    layerId: string;
+}
+declare const OpacityHandler: ({ layerId }: OpacityHandlerProps) => import("react/jsx-runtime").JSX.Element;
+export default OpacityHandler;
 //# sourceMappingURL=opacity-handler-addon.d.ts.map

package/dist/components/sidebar/common/opacity-handler-addon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"opacity-handler-addon.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/opacity-handler-addon.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,aAAa,+CAqBlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"opacity-handler-addon.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/opacity-handler-addon.tsx"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,GAAI,aAAa,mBAAmB,4CAgIvD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/sidebar/common/opacity-handler-addon.js

@@ -1,9 +1,106 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const OpacitySlider = () => {
-    const [opacity, setOpacity] = (0, react_1.useState)(1);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "max-w-sm space-y-4", children: (0, jsx_runtime_1.jsx)("input", { id: "opacity-slider", type: "range", min: "0", max: "1", step: "0.01", value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "\n          w-full cursor-pointer text-2xl\n        " }) }));
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const OpacityHandler = ({ layerId }) => {
+    const { layer } = (0, use_layers_1.default)();
+    const contextOpacity = layer.getLayerOpacity(layerId);
+    // Local state for smooth slider interaction
+    const [localOpacity, setLocalOpacity] = (0, react_1.useState)(contextOpacity);
+    const isDraggingRef = (0, react_1.useRef)(false);
+    const rafRef = (0, react_1.useRef)(null);
+    // Sync local state with context when context changes externally (not during drag)
+    (0, react_1.useEffect)(() => {
+        if (!isDraggingRef.current) {
+            setLocalOpacity(contextOpacity);
+        }
+    }, [contextOpacity]);
+    // Use requestAnimationFrame for smooth updates
+    const updateOpacity = (0, react_1.useCallback)((value) => {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            layer.setLayerOpacity(layerId, value);
+        });
+    }, [layer, layerId]);
+    const handleInput = (e) => {
+        const value = Number(e.target.value);
+        setLocalOpacity(value);
+        isDraggingRef.current = true;
+        updateOpacity(value);
+    };
+    const handleMouseUp = () => {
+        // Ensure final value is set
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        layer.setLayerOpacity(layerId, localOpacity);
+        isDraggingRef.current = false;
+    };
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, []);
+    const percentage = Math.round(localOpacity * 100);
+    const opacityPercent = localOpacity * 100;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 h-6 flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 h-2 rounded-lg pointer-events-none", style: {
+                            background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${opacityPercent}%, #e5e7eb ${opacityPercent}%, #e5e7eb 100%)`,
+                        } }), (0, jsx_runtime_1.jsx)("input", { id: `opacity-slider-${layerId}`, type: "range", min: "0", max: "1", step: "0.01", value: localOpacity, onInput: handleInput, onChange: handleInput, onMouseUp: handleMouseUp, onTouchEnd: handleMouseUp, className: "relative w-full h-2 bg-transparent appearance-none cursor-pointer opacity-slider-input" })] }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+                    __html: `
+          .opacity-slider-input::-webkit-slider-thumb {
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            margin-top: -5px;
+          }
+          .opacity-slider-input::-webkit-slider-thumb:hover {
+            transform: scale(1.1);
+          }
+          .opacity-slider-input::-webkit-slider-thumb:active {
+            transform: scale(1.2);
+            cursor: grabbing;
+          }
+          .opacity-slider-input::-webkit-slider-runnable-track {
+            height: 8px;
+            border-radius: 4px;
+            background: transparent;
+          }
+          .opacity-slider-input::-moz-range-thumb {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+          }
+          .opacity-slider-input::-moz-range-thumb:hover {
+            transform: scale(1.1);
+          }
+          .opacity-slider-input::-moz-range-thumb:active {
+            transform: scale(1.2);
+            cursor: grabbing;
+          }
+          .opacity-slider-input::-moz-range-track {
+            height: 8px;
+            border-radius: 4px;
+            background: transparent;
+          }
+        `
+                } })] }));
 };
-exports.default = OpacitySlider;
+exports.default = OpacityHandler;

package/dist/components/sidebar/common/style-legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-legend.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/style-legend.tsx"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE;;CAAA,2CA4CnC"}
+{"version":3,"file":"style-legend.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/style-legend.tsx"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE;;CAAA,2CA2CnC"}

package/dist/components/sidebar/common/style-legend.js

@@ -11,7 +11,6 @@ const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
 function StyleLegend({ item }) {
     const [showImage, setShowImage] = (0, react_1.useState)(true);
     const { mp } = (0, use_layers_1.default)();
-    const { t } = useT();
     const legendStyles = (0, react_1.useMemo)(() => item?.data?.styles?.[item.data.styleIndex]?.colors?.paint?.["fill-color"]
         ?.stops ||
         item?.data?.styles?.[item.data.styleIndex]?.colors?.paint?.["circle-color"]?.stops ||
@@ -19,5 +18,5 @@ function StyleLegend({ item }) {
     const vectorLegend = () => {
         return legendStyles.map(([title, color]) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-2 items-center mb-1", children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", height: "14", width: "14", focusable: "false", children: (0, jsx_runtime_1.jsx)("circle", { cx: "12", fill: color, cy: "12", r: "12", stroke: "none" }) }), (0, jsx_runtime_1.jsx)("div", { children: title })] }, color)));
     };
-    return ((0, jsx_runtime_1.jsx)("ul", { style: { margin: 0, padding: 0 }, children: item.layerType !== "RASTER" ? (vectorLegend()) : showImage ? ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("img", { style: { margin: "5px" }, onError: () => setShowImage(false), src: `${mp?.geoserver?.endpoint}/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&WIDTH=20&HEIGHT=20&STRICT=false&layer=biodiv:${item.id}` }) })) : ((0, jsx_runtime_1.jsx)("div", { children: t("raster_style_not_found") })) }));
+    return ((0, jsx_runtime_1.jsx)("ul", { style: { margin: 0, padding: 0 }, children: item.layerType !== "RASTER" ? (vectorLegend()) : showImage ? ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("img", { style: { margin: "5px" }, onError: () => setShowImage(false), src: `${mp?.geoserver?.endpoint}/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&WIDTH=20&HEIGHT=20&STRICT=false&layer=biodiv:${item.id}` }) })) : ((0, jsx_runtime_1.jsx)("div", { children: ("raster_style_not_found") })) }));
 }

package/dist/components/sidebar/comparison/index.d.ts

@@ -0,0 +1,4 @@
+export default function ComparisonSidebar({ onClose }: {
+    onClose?: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sidebar/comparison/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/comparison/index.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,kDAoE9E"}

package/dist/components/sidebar/comparison/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ComparisonSidebar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const core_1 = require("../../core");
+function ComparisonSidebar({ onClose }) {
+    const { layer } = (0, use_layers_1.default)();
+    const compareList = layer?.compareList || [];
+    const handleRemoveFromComparison = (id) => {
+        layer.setCompareLayer(id, false);
+    };
+    const handleClearAll = () => {
+        compareList.forEach((id) => {
+            layer.setCompareLayer(id, false);
+        });
+    };
+    // Don't show if no layers in comparison
+    if (compareList.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute md:left-4 md:bottom-4 md:max-w-sm w-full z-20 bg-white rounded-lg shadow-md overflow-hidden", style: {
+            maxHeight: "40vh",
+            height: "auto"
+        }, children: [onClose && (0, jsx_runtime_1.jsx)(core_1.CloseButton, { onClick: onClose }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", style: { maxHeight: "40vh" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4 border-b shrink-0", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-lg font-semibold text-gray-800", children: ["Comparing ", compareList.length, " ", compareList.length === 1 ? "layer" : "layers"] }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleClearAll, className: "text-sm", children: "Clear All" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 p-4", children: compareList.map((id) => {
+                                const layerItem = layer.all.find((l) => l.id === id);
+                                if (!layerItem)
+                                    return null;
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200 hover:bg-gray-100 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-gray-800", children: layerItem.title || layerItem.id }), layerItem.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: layerItem.description }))] }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: () => handleRemoveFromComparison(id), className: "ml-2 text-red-600 hover:text-red-700", children: "Remove" })] }, id));
+                            }) }) })] })] }));
+}

package/dist/components/sidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,OAAO,4CAsC9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,OAAO,4CAuC9B"}

package/dist/components/sidebar/search/attribute-comparison.d.ts

@@ -0,0 +1,10 @@
+interface AttributeComparisonProps {
+    attributeKey?: string;
+    clickedLngLat?: {
+        lng: number;
+        lat: number;
+    };
+}
+export default function AttributeComparison({ attributeKey: initialAttributeKey, clickedLngLat, }: AttributeComparisonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=attribute-comparison.d.ts.map

package/dist/components/sidebar/search/attribute-comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-comparison.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/search/attribute-comparison.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,YAAY,EAAE,mBAA0B,EACxC,aAAa,GACd,EAAE,wBAAwB,2CAwT1B"}

package/dist/components/sidebar/search/attribute-comparison.js

@@ -0,0 +1,137 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AttributeComparison;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const naksha_1 = require("../../../services/naksha");
+function AttributeComparison({ attributeKey: initialAttributeKey = "-2", clickedLngLat, }) {
+    const { layer, mp, query } = (0, use_layers_1.default)();
+    const [attributeKey, setAttributeKey] = (0, react_1.useState)(initialAttributeKey);
+    const [comparisonData, setComparisonData] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const compareLayers = (0, react_1.useMemo)(() => {
+        if (!layer.compareList || layer.compareList.length === 0) {
+            return layer.selectedLayers || [];
+        }
+        return (layer.selectedLayers?.filter((l) => layer.compareList.includes(l.id)) ||
+            []);
+    }, [layer.compareList, layer.selectedLayers]);
+    const fetchAttributeData = async () => {
+        if (compareLayers.length < 2) {
+            setComparisonData([]);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const lngLat = clickedLngLat || query.clickedLngLat;
+            if (!lngLat) {
+                setError("Please click on the map to select a location");
+                setLoading(false);
+                return;
+            }
+            const dataPromises = compareLayers.map(async (currentLayer) => {
+                let attributeValue = null;
+                let allProperties = [];
+                try {
+                    if (currentLayer.layerType?.toLowerCase() === "raster") {
+                        const { data } = await (0, naksha_1.axGexGetRasterInfoWithLonLat)(mp.geoserver?.endpoint, mp.geoserver?.workspace, {
+                            bbox: `${lngLat.lng},${lngLat.lat},${lngLat.lng},${lngLat.lat}`,
+                            query_layers: `${mp.geoserver?.workspace}:${currentLayer.id}`,
+                            layers: `${mp.geoserver?.workspace}:${currentLayer.id}`,
+                        });
+                        if (data?.features?.[0]?.properties) {
+                            const props = data.features[0].properties;
+                            allProperties = Object.entries(props).map(([k, v]) => [k, v]);
+                            // Try multiple strategies to find the attribute
+                            // 1. Direct key match
+                            if (props[attributeKey] !== undefined) {
+                                attributeValue = props[attributeKey];
+                            }
+                            // 2. Try numeric index if attributeKey is "-2"
+                            else if (attributeKey === "-2") {
+                                const propKeys = Object.keys(props);
+                                const index = propKeys.length - 2; // -2 means second from last
+                                if (index >= 0 && index < propKeys.length) {
+                                    attributeValue = props[propKeys[index]];
+                                }
+                            }
+                            // 3. Try to find by value match (case-insensitive)
+                            else {
+                                const foundKey = Object.keys(props).find((k) => k.toLowerCase() === attributeKey.toLowerCase());
+                                if (foundKey) {
+                                    attributeValue = props[foundKey];
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        // Vector layer
+                        const propertyMap = currentLayer?.data?.propertyMap || {};
+                        allProperties = Object.entries(propertyMap).map(([k, v]) => [
+                            v,
+                            null, // Value will be fetched from clicked feature
+                        ]);
+                        // Try multiple strategies to find the attribute
+                        // 1. Direct key match in propertyMap values
+                        let propertyKey = Object.keys(propertyMap).find((k) => propertyMap[k] === attributeKey);
+                        // 2. Direct key match in propertyMap keys
+                        if (!propertyKey && propertyMap[attributeKey]) {
+                            propertyKey = attributeKey;
+                        }
+                        // 3. Try numeric index if attributeKey is "-2"
+                        if (!propertyKey && attributeKey === "-2") {
+                            const propertyKeys = Object.keys(propertyMap);
+                            const index = propertyKeys.length - 2; // -2 means second from last
+                            if (index >= 0 && index < propertyKeys.length) {
+                                propertyKey = propertyKeys[index];
+                            }
+                        }
+                        if (propertyKey && layer.selectedFeatures) {
+                            const feature = layer.selectedFeatures.find((f) => f.sourceLayer === currentLayer.id);
+                            if (feature?.properties?.[propertyKey] !== undefined) {
+                                attributeValue = feature.properties[propertyKey];
+                            }
+                        }
+                    }
+                }
+                catch (err) {
+                    console.error(`Error fetching data for layer ${currentLayer.id}:`, err);
+                }
+                return {
+                    layerId: currentLayer.id,
+                    layerTitle: currentLayer.title,
+                    attributeValue,
+                    allProperties,
+                };
+            });
+            const results = await Promise.all(dataPromises);
+            setComparisonData(results);
+        }
+        catch (err) {
+            setError(err.message || "Failed to fetch comparison data");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (compareLayers.length >= 2 && (clickedLngLat || query.clickedLngLat)) {
+            fetchAttributeData();
+        }
+        else {
+            setComparisonData([]);
+        }
+    }, [compareLayers, clickedLngLat, query.clickedLngLat, attributeKey]);
+    if (compareLayers.length < 2) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "w-full p-4 flex flex-col gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-8 text-gray-500", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg font-semibold mb-2", children: "No Layers Selected for Comparison" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: "Select at least 2 layers and enable comparison mode to compare attributes" })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full p-4 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 mb-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-800", children: "Attribute Comparison" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm text-gray-600 whitespace-nowrap", children: "Attribute Key:" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: attributeKey, onChange: (e) => setAttributeKey(e.target.value), className: "flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono", placeholder: "e.g., -2, name, id" })] })] }), loading && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-3 text-gray-600", children: "Loading comparison data..." })] })), error && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 text-red-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold mb-1", children: "Error" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: error })] })), !loading && !error && comparisonData.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("thead", { className: "bg-gray-50 border-b border-gray-200", children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider", children: "Layer" }), (0, jsx_runtime_1.jsxs)("th", { className: "px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider", children: [attributeKey, " Value"] })] }) }), (0, jsx_runtime_1.jsx)("tbody", { className: "bg-white divide-y divide-gray-200", children: comparisonData.map((item, index) => ((0, jsx_runtime_1.jsxs)("tr", { className: `hover:bg-gray-50 transition-colors ${index % 2 === 0 ? "bg-white" : "bg-gray-50"}`, children: [(0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3 text-sm font-medium text-gray-900", children: item.layerTitle }), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3 text-sm text-gray-700", children: item.attributeValue !== null &&
+                                                        item.attributeValue !== undefined ? ((0, jsx_runtime_1.jsx)("span", { className: "font-mono font-semibold text-blue-600", children: String(item.attributeValue) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-gray-400 italic", children: "N/A" })) })] }, item.layerId))) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: comparisonData.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-semibold text-gray-800 text-sm", children: item.layerTitle }), (0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 bg-blue-500 rounded-full" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600 uppercase tracking-wide", children: attributeKey }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-700", children: item.attributeValue !== null &&
+                                                item.attributeValue !== undefined ? (String(item.attributeValue)) : ((0, jsx_runtime_1.jsx)("span", { className: "text-gray-400 text-lg", children: "N/A" })) })] })] }, item.layerId))) }), comparisonData.some((d) => d.attributeValue !== null) && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 border border-gray-200 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Comparison Summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-gray-600", children: "Layers Compared" }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-semibold text-gray-800", children: comparisonData.length })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-gray-600", children: "Valid Values" }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-semibold text-green-600", children: comparisonData.filter((d) => d.attributeValue !== null).length })] })] })] }))] })), !loading && !error && comparisonData.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-gray-500", children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm mb-2", children: "Click on the map to compare attributes at that location" }) }))] }));
+}

package/dist/components/sidebar/search/index.d.ts

@@ -0,0 +1,2 @@
+export default function SearchTabPanel(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sidebar/search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/search/index.tsx"],"names":[],"mappings":"AAsBA,MAAM,CAAC,OAAO,UAAU,cAAc,4CAmDrC"}

package/dist/components/sidebar/search/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SearchTabPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("../../core");
+// Darker search icon component
+const SearchIconDark = ({ disabled = false }) => ((0, jsx_runtime_1.jsx)("svg", { fill: "none", className: `w-5 h-5 ${disabled ? "text-blue-200" : "text-white"}`, width: "24", height: "24", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+function SearchTabPanel() {
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+    const handleSearchChange = (e) => {
+        setSearchTerm(e.target.value);
+    };
+    const handleSearch = () => {
+        // TODO: Implement search functionality for data within drawn polygon
+        console.log("Searching for:", searchTerm);
+        // This will search data within the polygon boundaries
+        // You can integrate with the polygon data from useMapDraw hook here
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter") {
+            handleSearch();
+        }
+    };
+    const isDisabled = !searchTerm.trim();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `w-full p-4 flex flex-col gap-4`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(core_1.Input, { name: "polygon_search", label: "Search Data in Polygon", placeholder: "Enter search term...", value: searchTerm, onChange: handleSearchChange, onKeyPress: handleKeyPress }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSearch, className: `w-full h-10 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-md flex align-middle items-center justify-center gap-2 font-medium transition-all duration-200 ${isDisabled
+                            ? "bg-blue-500 text-blue-50 cursor-not-allowed focus:ring-blue-400"
+                            : "bg-blue-600 hover:bg-blue-700 text-white cursor-pointer focus:ring-blue-500 hover:shadow-md"}`, disabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(SearchIconDark, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)("span", { children: "Search" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500 mt-2", children: "Draw a polygon on the map first, then search for data within it." })] }));
+}

package/dist/components/sidebar/selected/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/selected/index.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAwBvC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/selected/index.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CA6CvC"}

package/dist/components/sidebar/selected/index.js

@@ -11,10 +11,13 @@ const selected_item_list_1 = require("./selected-item-list");
 const core_1 = require("../../core");
 function SelectedTabPanel() {
     const { layer } = (0, use_layers_1.default)();
-    const onSortEnd = ({ oldIndex, newIndex }) => {
+    const onSortEnd = ({ oldIndex, newIndex, }) => {
         layer.setSelectedIds((0, array_move_1.arrayMoveImmutable)(layer.selectedIds, oldIndex, newIndex));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-3 w-full`, children: [layer.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `p-3 pb-0`, children: (0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: () => layer.clearAll(), children: ["\u2715 ", ("clear")] }) })), (0, jsx_runtime_1.jsx)(selected_item_list_1.SelectedItemList, { layerList: layer.selectedLayers, 
-                // @ts-ignore
-                useDragHandle: true, onSortEnd: onSortEnd })] }));
+    const checkedCount = layer.getCheckedAttributesCount();
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-3 w-full`, children: [layer.selectedIds.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `p-3 pb-0 flex gap-2`, children: [(0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: () => layer.clearAll(), children: ["\u2715 ", "clear"] }), checkedCount > 0 && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                layer.setCompareMode(true);
+                            }, className: "h-8 px-3 py-2 rounded-md focus:outline-none focus:ring cursor-pointer text-md flex align-middle items-center gap-1 bg-green-700 hover:bg-green-800 text-white", children: ["Compare", " ", (0, jsx_runtime_1.jsxs)("span", { children: ["(", checkedCount, ")"] })] }))] })), (0, jsx_runtime_1.jsx)(selected_item_list_1.SelectedItemList, { layerList: layer.selectedLayers, 
+                    // @ts-ignore
+                    useDragHandle: true, onSortEnd: onSortEnd })] }) }));
 }

package/dist/components/sidebar/tabs.js

@@ -8,8 +8,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("../core");
 const index_1 = __importDefault(require("./layers/index"));
 const selected_1 = __importDefault(require("./selected"));
-const settings_1 = __importDefault(require("./settings"));
+const search_1 = __importDefault(require("./search"));
 // @ts-ignore
 function SidebarTabs({ onClose }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-0 right-0 bottom-0 left-0 md:right-auto md:top-4 md:left-4 md:bottom-4 bg-white rounded-lg shadow-md md:max-w-sm w-full z-20 overflow-hidden", children: [(0, jsx_runtime_1.jsx)(core_1.CloseButton, { onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-full", children: (0, jsx_runtime_1.jsxs)(core_1.Tabs, { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(core_1.TabHeader, { children: [(0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.LayersIcon, {}), children: ("layers") }), (0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.LayersIcon, {}), children: ("selected") }), (0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.SlidersIcon, {}), children: ("settings") })] }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(index_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(selected_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(settings_1.default, {}) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-0 right-0 bottom-0 left-0 md:right-auto md:top-4 md:left-4 md:bottom-4 bg-white rounded-lg shadow-md md:max-w-sm w-full z-20 overflow-hidden", children: [(0, jsx_runtime_1.jsx)(core_1.CloseButton, { onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-full", children: (0, jsx_runtime_1.jsxs)(core_1.Tabs, { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(core_1.TabHeader, { children: [(0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.LayersIcon, {}), children: ("layers") }), (0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.LayersIcon, {}), children: ("selected") }), (0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.SearchIcon, {}), children: ("search") })] }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(index_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(selected_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(search_1.default, {}) })] }) })] }));
 }

package/dist/hooks/use-layers.d.ts

@@ -33,6 +33,16 @@ interface LayersContextProps {
         zoomToExtent: (layerId: string) => void;
         gridLegends: Record<string, any>;
         setGridLegends: (g: Record<string, any>) => void;
+        compareList: string[];
+        setCompareLayer: (layerId: string, checked: boolean) => void;
+        getLayerOpacity: (layerId: string) => number;
+        setLayerOpacity: (layerId: string, opacity: number) => void;
+        checkedAttributes: Set<string>;
+        toggleAttributeCompare: (attributeKey: string) => void;
+        getCheckedAttributesCount: () => number;
+        isCompareMode: boolean;
+        setCompareMode: (value: boolean) => void;
+        fetchStyleForComparison: (layerId: string, styleIndex: number) => Promise<void>;
     };
     query: {
         term: string;

package/dist/hooks/use-layers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-layers.d.ts","sourceRoot":"","sources":["../../src/hooks/use-layers.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAStE,UAAU,kBAAkB;IAC1B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE;QACL,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACxC,GAAG,EAAE,cAAc,EAAE,CAAC;QACtB,MAAM,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;QAC3C,WAAW,EAAE,MAAM,EAAE,CAAC;QACtB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;QACxC,cAAc,EAAE,cAAc,EAAE,CAAC;QAEjC,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,MAAM,EAAE,CAAC,IAAI,EAAE;YACb,OAAO,EAAE,MAAM,CAAC;YAChB,GAAG,EAAE,OAAO,CAAC;YACb,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,KAAK,CAAC,EAAE,OAAO,CAAC;SACjB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3B,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3E,gBAAgB,EAAE,GAAG,CAAC;QACtB,kBAAkB,EAAE,GAAG,CAAC;QACxB,mBAAmB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACtC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;QAC9D,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC3C,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAEvC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;QAExC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACjC,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;KAClD,CAAC;IACF,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAC7B,aAAa,EAAE,GAAG,CAAC;QACnB,gBAAgB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KACpC,CAAC;IACF,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC1B,QAAQ,EAAE,GAAG,CAAC;KACf,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc,GAAI,uBAAuB,mBAAmB,4CA8UxE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,uBAEhC"}
+{"version":3,"file":"use-layers.d.ts","sourceRoot":"","sources":["../../src/hooks/use-layers.tsx"],"names":[],"mappings":"AAIA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAStE,UAAU,kBAAkB;IAC1B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE;QACL,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACxC,GAAG,EAAE,cAAc,EAAE,CAAC;QACtB,MAAM,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;QAC3C,WAAW,EAAE,MAAM,EAAE,CAAC;QACtB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;QACxC,cAAc,EAAE,cAAc,EAAE,CAAC;QAEjC,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,MAAM,EAAE,CAAC,IAAI,EAAE;YACb,OAAO,EAAE,MAAM,CAAC;YAChB,GAAG,EAAE,OAAO,CAAC;YACb,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,KAAK,CAAC,EAAE,OAAO,CAAC;SACjB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3B,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3E,gBAAgB,EAAE,GAAG,CAAC;QACtB,kBAAkB,EAAE,GAAG,CAAC;QACxB,mBAAmB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACtC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;QAC9D,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC3C,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAEvC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;QAExC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACjC,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;QACjD,WAAW,EAAE,MAAM,EAAE,CAAC;QACtB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;QAC7D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;QAC7C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5D,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;QAC/B,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;QACvD,yBAAyB,EAAE,MAAM,MAAM,CAAC;QACxC,aAAa,EAAE,OAAO,CAAC;QACvB,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QACzC,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;KAEjF,CAAC;IACF,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAC7B,aAAa,EAAE,GAAG,CAAC;QACnB,gBAAgB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KACpC,CAAC;IACF,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC1B,QAAQ,EAAE,GAAG,CAAC;KACf,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc,GAAI,uBAAuB,mBAAmB,4CAqdxE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,uBAEhC"}