@mapsight/ui 7.0.0

package/src/img/mapsight-ui/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="18"><path fill-rule="evenodd" fill="#0e78ad" d="M6.607 17.775H1.705c.005 0-.763-.127-.861-.626C.736 16.594.722 16.244 1 16s.316 0 1 0h1V8H2c-.654 0-.458-.04-1 0-.376.028-.632-.587-.632-1.163 0-.576.265-.846.632-.837.336.008.326 0 1 0h4c.146.112 0 .805 0 1v9h2c.283.244.5.584.467 1.149-.05.871.801.626-1.86.626zM6 6c-.146-.112.273 0 0 0zm2 10c-.283-.244.674 0 0 0zM5.806 2.845C5.596 3.085 4.781 3 4 3H3c.062-.001 0-.327 0-1C3 .75 2.993.409 3 0c.001-.033.228 0 1 0h2c.062.002.001.895 0 1-.006.452.016 1.606-.194 1.845zM3 3c-.036 0-.033 0 0 0z"/></svg>

package/src/img/mapsight-ui/layers.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="21"><path fill-rule="evenodd" fill="#0e78ad" d="M.091 10.461l3.133-1.657 2.101.901-1.19.601 9.547 3.928 6.714-3.394-1.059-.436 1.782-.942 3.134 1.343-10.46 5.53L.091 10.461zm0-4L10.55.93l13.703 5.875-10.46 5.53L.091 6.461zM10.85 2.912L4.135 6.306l9.547 3.928 6.714-3.394-9.546-3.928zM5.325 13.705l-1.19.601 9.547 3.928 6.714-3.394-1.059-.436 1.782-.942 3.134 1.343-10.46 5.53L.091 14.461l3.133-1.657 2.101.901z"/></svg>

package/src/img/mapsight-ui/loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path fill="#0e78ad" d="M9.2 2.8c-.5-.2-1.1-.3-1.7-.3-2.8 0-5.1 2.3-5.1 5.1s2.3 5.1 5.1 5.1 5.1-2.3 5.1-5.1c0-.7-.2-1.4-.4-2l1.4-1.4c.6 1 .9 2.2.9 3.4 0 3.8-3.1 7-7 7s-7-3.1-7-7 3.1-7 7-7c1.1 0 2.2.3 3.1.8L9.2 2.8z"/></svg>

package/src/img/mapsight-ui/map.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31" height="29"><path fill-rule="evenodd" fill="#0E78AD" d="M22.208 11.306l-5.859 9.673h-.697l-5.857-9.673h.031a6.864 6.864 0 0 1-.865-3.315A7.038 7.038 0 0 1 16 .955a7.037 7.037 0 0 1 7.039 7.036 6.933 6.933 0 0 1-.852 3.315h.021zm-6.465 6.809h.493l4.16-6.807h-8.789l4.136 6.807zm.286-15.14a5.007 5.007 0 0 0-5.011 5.003 4.93 4.93 0 0 0 1.303 3.328h7.416a4.93 4.93 0 0 0 1.303-3.328 5.007 5.007 0 0 0-5.011-5.003zm.001 7.06a2.06 2.06 0 1 1 0-4.117c1.139 0 2.063.922 2.063 2.059a2.06 2.06 0 0 1-2.063 2.058zm-4.536 6.529l-6.515 3.617 2.295 1.136 5.528-2.744.727 1.116-4.777 2.358 3.472 1.718 3.336-1.656 1.423.003.67-1.042 5.586-2.773-3.011-1.236.894-1.392 9.349 3.98-13.459 8.53L.935 20.336l9.539-5.337 1.02 1.565zm15.12 3.12l-1.727-.71-3.645 1.8 1.123 1.707 4.249-2.797zM16.9 26.078l4.424-2.912-1.24-1.821-6.381 3.151 3.197 1.582z"/></svg>

package/src/img/mapsight-ui/measure-distance.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24">
+	<path fill="none" stroke="#0E78AD" stroke-linecap="square" stroke-width="2" d="m3.94 21.857 3-9 5.143-5.143L19.368 3" />
+	<path fill="#0E78AD"
+		  d="M1.421 22.323A3.429 3.429 0 0 1 4.5 17.145a3.43 3.43 0 0 1 3.434 3.427A3.429 3.429 0 0 1 4.5 23.997a3.429 3.429 0 0 1-3.078-1.674ZM5.52 13.46a2.101 2.101 0 0 1 1.887-3.173c1.162 0 2.104.94 2.104 2.1a2.101 2.101 0 0 1-2.104 2.1 2.101 2.101 0 0 1-1.886-1.026Zm7.03-4.116a2.101 2.101 0 1 1 0-4.2c1.162 0 2.104.94 2.104 2.1a2.101 2.101 0 0 1-2.104 2.1Zm8.235-2.489a3.429 3.429 0 1 1 0-6.852 3.43 3.43 0 0 1 3.434 3.426 3.429 3.429 0 0 1-3.434 3.426Z" />
+	<path fill="#0E78AD"
+		  d="M13 13.155h1.658v.934c.593-.726 1.3-1.089 2.12-1.089.435 0 .812.09 1.132.27.32.181.583.454.788.82.299-.366.62-.639.967-.82.345-.18.714-.27 1.107-.27.5 0 .922.102 1.268.306.345.204.604.504.774.9.124.292.186.764.186 1.417V20h-1.799v-3.913c0-.678-.062-1.117-.186-1.314-.166-.258-.422-.387-.768-.387a1.22 1.22 0 0 0-.71.232 1.287 1.287 0 0 0-.48.68c-.099.299-.148.77-.148 1.415V20H17.11v-3.751c0-.666-.032-1.096-.096-1.29a.823.823 0 0 0-.298-.431c-.134-.095-.317-.142-.547-.142-.277 0-.527.075-.749.225-.222.15-.38.368-.477.651-.096.284-.144.755-.144 1.412V20H13v-6.845Z" />
+</svg>

package/src/img/mapsight-ui/open-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="16"><path fill-rule="evenodd" fill="#0E78AD" d="M6 15v-2h19v2H6zm0-8h19v2H6V7zm0-6h19v2H6V1zM1.997 15.788a1.791 1.791 0 1 1 .002-3.582 1.791 1.791 0 0 1-.002 3.582zm0-6a1.791 1.791 0 1 1 .002-3.582 1.791 1.791 0 0 1-.002 3.582zm0-6A1.791 1.791 0 1 1 1.999.206a1.791 1.791 0 0 1-.002 3.582z"/></svg>

package/src/img/mapsight-ui/place-marker.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="19" viewBox="0 0 14 19">
+	<path fill="#0E78AD"
+		  d="M13.17 9.82L7.35 19h-.7L.83 9.82h.03A6.28 6.28 0 010 6.68C0 2.98 3.13 0 7 0c1.86 0 3.64.7 4.95 1.95a6.34 6.34 0 011.2 7.87h.02zm-6.43 6.46h.5l3.48-6.49H3.33l3.41 6.49zm.29-14.36c-1.32 0-2.59.5-3.52 1.38a4.54 4.54 0 00-.17 6.5h7.38a4.54 4.54 0 00-.17-6.5 5.11 5.11 0 00-3.52-1.38zm0 6.7a2.07 2.07 0 01-1.84-.96 1.88 1.88 0 010-2 2.07 2.07 0 011.84-.95 2 2 0 012.05 1.95c0 .52-.22 1.02-.6 1.38-.39.37-.9.58-1.45.58z" />
+</svg>

package/src/img/mapsight-ui/print.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="34" height="34">
+	<path fill="#207ab6"
+	      d="M 30 29 v -13 a 4 4 0 0 1 4 -4 h 32 a 4 4 0 0 1 4 4 v 13 Z M 14 28 h 72 a 4 4 0 0 1 4 4 v 24 a 4 4 0 0 1 -4 4 h -12 v -12 a 4 4 0 0 0 -4 -4 h -40 a 4 4 0 0 0 -4 4 v 12 h -12 a 4 4 0 0 1 -4 -4 v -24 a 4 4 0 0 1 4 -4 Z M 82 32 a 4 4 0 1 0 0 8 a 4 4 0 1 0 0 -8 Z M 66 43 h 6 v 43 a 4 4 0 0 1 -4 4 h -24 l -16 -16 v -31 h 6 v 29 l 12 12 h 18 a 2 2 0 0 0 2 -2 v -39 Z"/>
+</svg>

package/src/img/mapsight-ui/reset-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="14" viewBox="0 0 15 14"><path fill="#cc100c" d="M11.859.01l1.854 1.9L3.081 12.828l-1.854-1.9zm1.866 10.94l-1.854 1.9L1.239 1.938l1.853-1.9z"/></svg>

package/src/img/mapsight-ui/reset.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="14" viewBox="0 0 15 14"><path fill="#0e78ad" d="M11.859.01l1.854 1.9L3.081 12.828l-1.854-1.9zm1.866 10.94l-1.854 1.9L1.239 1.938l1.853-1.9z"/></svg>

package/src/img/mapsight-ui/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.125" height="16.688" viewBox="0 0 17.125 16.688"><path fill="#0e78ad" fill-rule="evenodd" d="M6.443.001A6.443 6.443 0 1 1 0 6.443 6.443 6.443 0 0 1 6.443.001zm0 2.013a4.43 4.43 0 1 1-4.429 4.429 4.429 4.429 0 0 1 4.428-4.429zm9.282 14.677l-5.364-5.364 1.391-1.389 5.364 5.364z"/></svg>

package/src/img/mapsight-ui/sharing.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 122.9 114.3">
+	<g fill="#0e78ad">
+		<path d="m122.9 35.3-35 35.3V53c-22-4.6-39.5.5-52.8 17.3A52.4 52.4 0 0 1 88 17.9V0z"/>
+		<path
+			d="M7 23.7h35.5a70 70 0 0 0-12.2 13.9H13.8v62.9h80.6V85.8l13.8-13.5v35.1c0 3.8-3 7-6.9 7H7a7 7 0 0 1-6.9-7V30.7c0-3.9 3-7 7-7"/>
+	</g>
+</svg>

package/src/img/mapsight-ui/sort-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="14" viewBox="0 0 19 14"><path fill="#cc100c" d="M0 4h8v2H0V4zm0 4h10v2H0V8zm0 4h13v2H0v-2zM14 0h2v6h-2V0zm-2.97 3.938h7.94L15 9.634z"/></svg>

package/src/img/mapsight-ui/sort.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="14" viewBox="0 0 19 14"><path fill="#0e78ad" d="M0 4h8v2H0V4zm0 4h10v2H0V8zm0 4h13v2H0v-2zM14 0h2v6h-2V0zm-2.97 3.938h7.94L15 9.634z"/></svg>

package/src/img/mapsight-ui/watermark.svg

@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="840" height="280"><defs><filter id="a" x="-50%" y="-50%" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="2" dy="2"/><feGaussianBlur result="blurOut" in="offOut" stdDeviation="7"/><feBlend in="SourceGraphic" in2="blurOut"/></filter></defs><path fill="#fff" filter="url(#a)" transform="translate(10 10)" d="M761.1 17.1c-14.3 5-22.7 19.7-19.9 34.9 1.3 7.2 3.7 11.6 9 16.6 7.2 7 11.9 8.9 21.8 8.9s14.6-1.9 21.8-8.9c5.3-5 7.7-9.4 9-16.6 4.4-23.9-18.6-43.1-41.7-34.9zM780.9 30c10.9 5.5 13.3 19 5 28.4-7 8-17.5 8.7-25.1 1.8-4.7-4.3-6.8-8.5-6.8-13.9 0-4.3 2.8-11 5.6-13.5 5.8-5.1 14.6-6.3 21.3-2.8zM604.8 41.9c-12 4.7-18 11.7-20.8 24.2-2.3 10.1 2.2 22.6 10.7 29.5 20.6 16.9 51.5 2.5 51.5-24.1 0-9.2-3.1-16.3-10.1-22.7-9.1-8.5-20.7-11-31.3-6.9zm19.3 13.3c11 6.2 12.9 19.8 4.1 29.1C616.9 96 597 87.6 597 71.1c0-4.5 2.6-10.5 5.7-13.3 5.5-5 15.1-6.2 21.4-2.6zm104.1 12c-2.2 1.1-3.9 4.9-3.3 7.8.1.8 4.6 5.9 9.9 11.2 8.1 8.2 10.2 9.8 12.8 9.8 3.9 0 6.7-3 6.6-7.2-.1-2.6-1.7-4.8-9.4-12.4-9.5-9.5-12.5-11.2-16.6-9.2zm-22.5 22c-2.7 2.1-3.7 6-2.2 9.3.7 1.7 5.1 6.7 9.8 11.2 7.2 7.1 8.9 8.3 11.8 8.3 1.9 0 3.9-.4 4.5-.8 2-1.3 3.6-5.3 3-7.6-.3-1.2-5-6.5-10.4-11.9-10.2-9.9-12.7-11.3-16.5-8.5zm-62.2 9.9c-8.4 8.2-10.5 10.8-10.5 13.1 0 3.8 3.2 6.8 7.3 6.8 2.9 0 4.6-1.3 13-9.9 10.3-10.4 11.4-12.8 8-16.9-1-1.2-3-2.4-4.6-2.8-2.5-.6-3.8.4-13.2 9.7zm26.1 9.3c-14.1 6-22.6 20.9-19.7 34.6 3.5 16.3 17.1 26.9 33.1 25.7 16.5-1.1 29.1-14.3 29.3-30.7.2-22.2-22.7-38-42.7-29.6zm20.5 12.8c11.5 6.4 13 21.1 3.2 29.8-6.9 6-14.8 6.5-22.5 1.3-9.2-6.2-10.3-21.1-2.1-28.5 5.5-5 15.1-6.2 21.4-2.6zM297 170.6c-7.5 2-12.9 6.1-16.2 12.4-3.2 6-3.6 11.2-1.3 16.7 3.3 7.8 8.9 11 27.1 15.3 19.1 4.6 23.4 7.3 23.4 15.2 0 9.6-6.5 14.2-20 14.3-7.3 0-9.3-.4-13.5-2.6-5.7-2.9-9.3-7.5-10.1-13.1l-.7-3.8h-4.8c-4.8 0-4.9.1-4.9 3.1 0 6.2 2.3 11.3 7.6 16.6 7 7 15.5 9.7 28.4 9.1 7.7-.4 9.8-.9 15.7-3.9 8.7-4.4 12.2-9.2 13-17.6.7-7.3-.7-11.9-4.9-16.2-4.6-4.7-9.3-6.8-23-10-18.5-4.4-22.1-6.4-23.4-12.7-.8-3.9 1.7-9.8 5.1-12 5.7-3.7 20.7-3.6 25.9.2 2.3 1.8 5.7 7.4 7 11.7.5 1.5 1.5 1.8 5.3 1.5l4.8-.3-.3-3.5c-1.6-16.4-20-25.8-40.2-20.4zm106.6 1.4c-13.8 5.8-21.3 16.9-23.6 34.6-1.9 14.6 2.4 27.6 12.1 36.9 8.4 8 13.1 9.9 25.4 9.9 11.3.1 17.3-1.9 23.2-7.6l3.2-3.1.9 2.4c.5 1.3 1.1 3.3 1.3 4.4.3 1.5 1.3 2.1 4.2 2.3l3.7.3-.2-21.3-.3-21.3h-35v9l12.9.3 12.9.3-.6 4.4c-1.9 13.6-13.8 22.6-27.9 21.1-7.6-.8-12.6-3.4-17.6-9.2-5.3-6.3-7.7-13.7-7.5-23.9.1-13 4.6-23.2 12.6-29 3.6-2.6 5.1-3 12.9-3.3 6.7-.3 9.9 0 13.3 1.3 5.1 1.9 11.1 8.2 12 12.6.6 2.8.9 2.9 6.2 2.9 5.5 0 5.5 0 4.9-2.8-1.4-5.7-5.8-13.2-9.6-16.2-6.9-5.5-12.5-7.4-23-7.7-8.6-.2-10.1 0-16.4 2.7zM15 211.5V252h20l.2-29.7.3-29.7 8.1 29.4 8.1 29.5 8.4.3 8.4.2 8-29.2 8-29.3.3 29.3.2 29.2h21v-81H74.3l-2.7 10.2c-1.5 5.7-4.7 17.7-7 26.8-2.4 9.1-4.6 15.8-4.9 15-.4-.8-2.9-10.5-5.7-21.5-2.9-11-5.8-22.4-6.7-25.3l-1.4-5.2H15v40.5zm128-40.2c0 .2-6.7 18.3-15 40.1-8.2 21.9-15 40-15 40.2 0 .2 4.9.4 10.9.4h10.9l2.3-6.8 2.4-6.7h28.8l2.2 6.5 2.2 6.5 11.1.3 11.2.3-3.1-8.3c-1.7-4.6-8.4-22.8-15.1-40.6l-12-32.2h-10.9c-6 0-10.9.2-10.9.3zm15.6 37l4.1 13.2-8.5.3c-4.6.2-8.7.1-8.9-.2-.6-.6 7.9-26.6 8.7-26.6.3 0 2.3 6 4.6 13.3zm42.4 3.2V252h21v-27h12.3c14.4 0 21-1.6 26.3-6.2 6.2-5.4 7.9-10 7.9-20.8 0-10.9-1.8-15.7-8.1-20.8-6.3-5.2-12.3-6.2-37.2-6.2H201v40.5zm42.8-21c3.6 3 4.8 7.3 3.2 11.9-1.6 5.1-6 6.8-16.2 6.4l-8.3-.3-.3-10.3-.3-10.2h9.5c8.6 0 9.7.2 12.4 2.5zm110.2 21V252h11v-81h-11v40.5zm116 0V252h11v-37h42v37h11v-81h-11v35h-42v-35h-11v40.5zm73-36v4.5h27v72h11v-72h27v-9h-65v4.5z"/></svg>

package/src/img/mapsight-ui/zoom-in.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+	<path fill="#0e78ad" stroke="#0e78ad" d="M20.5 14.5h-1v5h-5v1h5v5h1v-5h5v-1h-5v-5z"/>
+</svg>

package/src/img/mapsight-ui/zoom-out.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+	<path fill="#0e78ad" stroke="none" d="M14 19h12v2H14z"/>
+</svg>

package/src/js/components/app.jsx

@@ -0,0 +1,237 @@
+import {Fragment} from "react";
+import {useSelector} from "react-redux";
+import {createSelector} from "reselect";
+
+import {
+	isViewFullscreen,
+	isViewMapOnly,
+	isViewMobile,
+	layerSwitcherConfigExternalSelector,
+	layerSwitcherShowExternalSelector,
+	listUiOptionDetailsSelector,
+	listVisible,
+	mapAndListVisible,
+	mapVisible,
+	pageTitleShowSelector,
+	tagSwitcherShowSelector,
+	timeFilterVisible,
+	viewSelector,
+} from "../store/selectors.ts";
+import FeatureList from "./feature-list";
+import {useContextComponentWithFallback} from "../helpers/components";
+
+import VisibilityWrapper from "./helping/visibility-wrapper";
+
+import LayerSwitcher from "./layer-switcher";
+import AdditionalContainer from "./layout/additional-container";
+import AdditionalContent from "./layout/additional-container/content";
+import Marginal from "./layout/additional-container/marginal";
+import MainContainer from "./layout/main-container";
+import MapRow from "./layout/map-row";
+import TitleBar from "./layout/title-bar";
+
+// Layout
+import AppWrapper from "./layout/wrapper";
+import MainPanel from "./main-panel";
+import MainPanelContainer from "./main-panel/container";
+
+import {MainPanelContextProvider} from "./main-panel/context";
+import MainPanelListToggleButton from "./main-panel/list-toggle-button";
+
+// Components
+import Map from "./map";
+import MapOverlay from "./map-overlay";
+import MapOverlayArea from "./map-overlay/area";
+import Attribution from "./map-overlay/attribution";
+import InfoOverlayLeft from "./map-overlay/info-overlay-left";
+import InfoOverlayModal from "./map-overlay/info-overlay-modal";
+import InfoOverlayRight from "./map-overlay/info-overlay-right";
+import LayerSwitcherOverlay from "./map-overlay/layer-switcher-overlay";
+import Legend from "./map-overlay/legend";
+import Logo from "./map-overlay/logo";
+import RegionSelector from "./map-overlay/region-selector";
+import SearchOverlay from "./map-overlay/search-overlay";
+import UserGeoLocationButton from "./map-overlay/user-geo-location-button";
+import ZoomButtons from "./map-overlay/zoom-buttons";
+import MapSyncedInterlay from "./map-synced-interlay";
+import MapWrapper from "./map-wrapper";
+import TagSwitcher from "./tag-switcher";
+import TimeFilter from "./time-filter";
+import DesktopViewToggleButton from "./view-toggle-button/desktop-button";
+import MobileViewToggleButton from "./view-toggle-button/mobile-button";
+
+import ViewportViewToggleButton from "./view-toggle-button/viewport-button";
+
+const marginalLeftSelector = createSelector(
+	[layerSwitcherShowExternalSelector, tagSwitcherShowSelector],
+	(layerSwitcherShowExternal, tagSwitcherShow) => {
+		return layerSwitcherShowExternal || tagSwitcherShow;
+	},
+);
+
+/**
+ * @returns {import('react').ReactElement} element
+ */
+function App() {
+	const view = useSelector(viewSelector);
+	const isMobile = isViewMobile(view);
+	const isFullscreen = isViewFullscreen(view);
+	const isMapOnly = isViewMapOnly(view);
+	const showAdditional = !isFullscreen && !isMapOnly;
+	const showDetailsInList = useSelector(listUiOptionDetailsSelector);
+	const showListInMapRow =
+		useSelector(listVisible) && !showDetailsInList && isFullscreen;
+
+	const mapOverlayStart = useContextComponentWithFallback("MapOverlayStart");
+	const mapOverlayTopLeft =
+		useContextComponentWithFallback("MapOverlayTopLeft");
+	const mapOverlayBottomLeft = useContextComponentWithFallback(
+		"MapOverlayBottomLeft",
+	);
+	const mapOverlayTopRight =
+		useContextComponentWithFallback("MapOverlayTopRight");
+	const mapOverlayBottomRight = useContextComponentWithFallback(
+		"MapOverlayBottomRight",
+	);
+	const mapOverlayEnd = useContextComponentWithFallback("MapOverlayEnd");
+	const mapOverlayModal = useContextComponentWithFallback("MapOverlayModal");
+
+	return (
+		<AppWrapper>
+			<MainContainer>
+				<VisibilityWrapper visibleSelector={pageTitleShowSelector}>
+					<TitleBar />
+				</VisibilityWrapper>
+
+				<VisibilityWrapper visibleSelector={mapVisible}>
+					<MapRow>
+						{!isMobile && (
+							<MainPanelContextProvider
+								collapsible={showListInMapRow}
+								showSelectionInfo={!showDetailsInList}
+								showList={showListInMapRow}
+								panelPosition="left"
+							>
+								<MainPanelContainer>
+									<MainPanelListToggleButton />
+									<MainPanel />
+								</MainPanelContainer>
+							</MainPanelContextProvider>
+						)}
+
+						<MapWrapper>
+							<Map />
+							<MapSyncedInterlay />
+							<MapOverlay>
+								{mapOverlayStart()}
+
+								<MapOverlayArea position="top-left">
+									{mapOverlayTopLeft(
+										<Fragment>
+											<SearchOverlay />
+											<RegionSelector />
+										</Fragment>,
+									)}
+								</MapOverlayArea>
+
+								<MapOverlayArea position="bottom-left">
+									{mapOverlayBottomLeft(
+										<Fragment>
+											<InfoOverlayLeft />
+										</Fragment>,
+									)}
+								</MapOverlayArea>
+
+								<MapOverlayArea position="top-right">
+									{mapOverlayTopRight(
+										<Fragment>
+											<LayerSwitcherOverlay />
+											<DesktopViewToggleButton />
+										</Fragment>,
+									)}
+								</MapOverlayArea>
+
+								<MapOverlayArea position="bottom-right">
+									{mapOverlayBottomRight(
+										<Fragment>
+											<ZoomButtons />
+											<UserGeoLocationButton />
+											<MobileViewToggleButton />
+											<InfoOverlayRight />
+										</Fragment>,
+									)}
+								</MapOverlayArea>
+
+								{mapOverlayEnd()}
+
+								<InfoOverlayModal>
+									{mapOverlayModal(
+										<Fragment>
+											{isMobile && <Attribution />}
+											<Legend />
+											<Logo />
+										</Fragment>,
+									)}
+								</InfoOverlayModal>
+							</MapOverlay>
+						</MapWrapper>
+					</MapRow>
+				</VisibilityWrapper>
+
+				{isMapOnly && (
+					<MainPanelContextProvider
+						panelPosition="below"
+						showSelectionInfo={true}
+					>
+						<MainPanelContainer>
+							<MainPanel />
+						</MainPanelContainer>
+					</MainPanelContextProvider>
+				)}
+			</MainContainer>
+
+			{showAdditional && (
+				<AdditionalContainer>
+					<VisibilityWrapper visibleSelector={marginalLeftSelector}>
+						<Marginal position="left">
+							<VisibilityWrapper
+								visibleSelector={
+									layerSwitcherConfigExternalSelector
+								}
+							>
+								<LayerSwitcher
+									configSelector={
+										layerSwitcherConfigExternalSelector
+									}
+								/>
+							</VisibilityWrapper>
+							<VisibilityWrapper
+								visibleSelector={tagSwitcherShowSelector}
+							>
+								<TagSwitcher />
+							</VisibilityWrapper>
+						</Marginal>
+					</VisibilityWrapper>
+
+					<AdditionalContent>
+						<VisibilityWrapper visibleSelector={listVisible}>
+							<FeatureList enableKeyboardControl={true} />
+						</VisibilityWrapper>
+					</AdditionalContent>
+
+					<VisibilityWrapper visibleSelector={timeFilterVisible}>
+						<Marginal position="right">
+							<TimeFilter />
+						</Marginal>
+					</VisibilityWrapper>
+				</AdditionalContainer>
+			)}
+
+			<VisibilityWrapper visibleSelector={mapAndListVisible}>
+				<ViewportViewToggleButton />
+			</VisibilityWrapper>
+		</AppWrapper>
+	);
+}
+
+export default App;

package/src/js/components/close-overlay-button.tsx

@@ -0,0 +1,27 @@
+import type {ComponentPropsWithoutRef, FC, MouseEvent} from "react";
+
+import {translate} from "../helpers/i18n";
+
+export type Props = {
+	label?: string;
+	onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+} & ComponentPropsWithoutRef<"button">;
+
+const CloseOverlayButton: FC<Props> = ({
+	label = translate("close"),
+	onClose,
+	...attributes
+}) => {
+	return (
+		<button
+			className="ms3-dialog-close-button"
+			type="button"
+			onClick={onClose}
+			{...attributes}
+		>
+			<span className="ms3-visuallyhidden">{label}</span>
+		</button>
+	);
+};
+
+export default CloseOverlayButton;

package/src/js/components/feature-details-content/feature-details-content-inner.tsx

@@ -0,0 +1,116 @@
+import type {PropsWithChildren, ReactNode} from "react";
+import {memo, useCallback, useContext, useEffect, useRef} from "react";
+
+import {ComponentsContext} from "../../helpers/components";
+import getFeatureProperty from "../../helpers/get-feature-property";
+import {translate} from "../../helpers/i18n";
+import type {MapsightUiFeature} from "../../types";
+
+export type Props = PropsWithChildren<{
+	feature: MapsightUiFeature;
+	url?: string;
+	hasError: boolean;
+	html?: string;
+	handleContentChange?: (element: HTMLElement | null) => void;
+}>;
+
+function FeatureDetailsContentInner({
+	feature,
+	url,
+	hasError,
+	html,
+	handleContentChange,
+}: Props) {
+	const comps = useContext(ComponentsContext);
+
+	// NOTE(PG): using useCallback in addition to useRef alone so we actually get called when node changes
+	const containerRef = useRef<HTMLElement | null>(null);
+	const containerRefSetter = useCallback(
+		(element: HTMLElement | null) => {
+			containerRef.current = element;
+			if (element && handleContentChange) {
+				handleContentChange(element);
+			}
+		},
+		[handleContentChange],
+	);
+
+	const desc = getFeatureProperty(feature, "description");
+
+	// NOTE(PG): Using useEffect to detect content changes (here: props), maybe we could move this up into the parent comp?
+	useEffect(() => {
+		handleContentChange?.(containerRef.current);
+	}, [handleContentChange, html, hasError, desc]);
+
+	let content: ReactNode = null;
+	if (url) {
+		if (html) {
+			// success
+			content = (
+				<div
+					className="ms3-feature-details-content ms3-feature-details-content--html"
+					dangerouslySetInnerHTML={{__html: html}}
+					ref={containerRefSetter}
+				/>
+			);
+		} else if (hasError) {
+			// error
+			content = (
+				<div
+					className="ms3-feature-details-content ms3-feature-details-content--error"
+					ref={containerRefSetter}
+				>
+					{translate("ui.feature-details.content-inner.error")}
+					<br />
+
+					<a href={url}>
+						{translate("ui.feature-details.content-inner.gotoPage")}
+					</a>
+				</div>
+			);
+		} else {
+			// loading
+			content = (
+				<div
+					className="ms3-feature-details-content ms3-feature-details-content--loading"
+					ref={containerRefSetter}
+				>
+					{translate("ui.feature-details.content-inner.loading")}
+				</div>
+			);
+		}
+	} else {
+		if (desc) {
+			content = (
+				<div
+					className="ms3-feature-details-content ms3-feature-details-content--description"
+					dangerouslySetInnerHTML={{__html: desc}}
+					ref={containerRefSetter}
+				/>
+			);
+		}
+	}
+
+	if (comps.FeatureDetailsContent) {
+		content = (
+			<comps.FeatureDetailsContent
+				feature={feature}
+				url={url}
+				hasError={hasError}
+				html={html}
+			>
+				{content}
+			</comps.FeatureDetailsContent>
+		);
+	}
+
+	return content;
+}
+
+export default memo(FeatureDetailsContentInner);
+
+declare module "../../helpers/components" {
+	interface ComponentProps {
+		FeatureDetailsContent: Props;
+	}
+}

package/src/js/components/feature-details-content/feature-details-content.jsx

@@ -0,0 +1,185 @@
+import {selectExclusively} from "@mapsight/core/lib/feature-selections/actions";
+import {
+	memo,
+	useCallback,
+	useEffect,
+	useReducer,
+	useRef,
+	useState,
+} from "react";
+import {useDispatch, useSelector} from "react-redux";
+
+import {VIEW_MAP_ONLY, VIEW_MOBILE} from "../../config/constants/app";
+import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
+import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
+
+import getFeatureProperty from "../../helpers/get-feature-property";
+
+import {setView} from "../../store/actions.ts";
+import {viewSelector} from "../../store/selectors.ts";
+
+import {
+	APP_EVENT_PARTIAL_CONTENT_CHANGED,
+	useAppChannelDispatchEvent,
+} from "../helping/app-channel";
+
+import FeatureDetailsContentInner from "./feature-details-content-inner";
+
+import ShareFeatureLinkModal from "./share-feature-link-modal";
+
+function FeatureDetailsContent({feature, html, hasError, isEmbeddedMap}) {
+	const dispatch = useDispatch();
+	const view = useSelector(viewSelector);
+
+	/** @type {React.Ref<Element>} containerElemRef */
+	const contentContainerElemRef = useRef();
+	const [partialContentCounter, dispatchPartialContentCounter] = useReducer(
+		(i) => i + 1,
+		0,
+	);
+
+	const [showShareLinkDialog, setShowShareLinkDialog] = useState(false);
+
+	/** @param {MouseEvent} e event */
+	const onShareButtonClick = useCallback((e) => {
+		e.preventDefault();
+
+		if (e.target.getAttribute("href")) {
+			setShowShareLinkDialog(true);
+		}
+	}, []);
+
+	/** @param {MouseEvent} e event */
+	const onMapButtonClick = useCallback(
+		(e) => {
+			e.preventDefault();
+
+			if (view === VIEW_MOBILE && !isEmbeddedMap) {
+				dispatch(setView(VIEW_MAP_ONLY));
+			}
+
+			const featureId = e.target.getAttribute("data-ms3-feature");
+			if (featureId) {
+				dispatch(
+					selectExclusively(
+						FEATURE_SELECTIONS,
+						FEATURE_SELECTION_SELECT,
+						featureId,
+					),
+				);
+			}
+		},
+		[dispatch, isEmbeddedMap, view],
+	);
+
+	/**  @param {MouseEvent} _e event */
+	const onPrintButtonClick = useCallback((_e) => {
+		const doc = window.document.documentElement;
+		doc.classList.add("ms3--print-feature-selection-info-only");
+		window.addEventListener(
+			"afterprint",
+			() => {
+				doc.classList.remove("ms3--print-feature-selection-info-only");
+			},
+			{once: true},
+		);
+	}, []);
+
+	// binds click handlers to links in containerElem by querying the Dom
+	// NOTE(PG): We cannot use React JSX event listeners as we need to support external HTML
+	useEffect(
+		function handlePartialContentChange() {
+			const contentContainerElem = contentContainerElemRef.current;
+			if (!contentContainerElem) {
+				return undefined;
+			}
+
+			// links/buttons
+			const shareLinks = contentContainerElem.querySelectorAll(
+				".js-ms3-feature-link--share",
+			);
+			shareLinks.forEach((buttonElement) => {
+				buttonElement.addEventListener("click", onShareButtonClick);
+			});
+			const showOnMapLinks = contentContainerElem.querySelectorAll(
+				".js-ms3-feature-link--map",
+			);
+			showOnMapLinks.forEach((buttonElement) => {
+				buttonElement.addEventListener("click", onMapButtonClick);
+			});
+			const printLinks = contentContainerElem.querySelectorAll(
+				".js-ms3-feature-link--print",
+			);
+			printLinks.forEach((buttonElement) => {
+				buttonElement.addEventListener("click", onPrintButtonClick);
+			});
+
+			return () => {
+				shareLinks.forEach((buttonElement) => {
+					buttonElement.removeEventListener(
+						"click",
+						onShareButtonClick,
+					);
+				});
+				showOnMapLinks.forEach((buttonElement) => {
+					buttonElement.removeEventListener(
+						"click",
+						onMapButtonClick,
+					);
+				});
+				printLinks.forEach((buttonElement) => {
+					buttonElement.removeEventListener(
+						"click",
+						onPrintButtonClick,
+					);
+				});
+			};
+		},
+		[
+			partialContentCounter,
+			onShareButtonClick,
+			onMapButtonClick,
+			onPrintButtonClick,
+		],
+	);
+
+	const dispatchAppChannelEvent = useAppChannelDispatchEvent();
+
+	/**
+	 * @param {Element} nextContentContainerElem container
+	 */
+	const handleContentChange = useCallback(
+		(nextContentContainerElem) => {
+			dispatchAppChannelEvent(
+				new CustomEvent(APP_EVENT_PARTIAL_CONTENT_CHANGED),
+			);
+			contentContainerElemRef.current = nextContentContainerElem;
+			dispatchPartialContentCounter({});
+		},
+		[dispatchAppChannelEvent],
+	);
+
+	const closeShareLinkDialog = useCallback(() => {
+		setShowShareLinkDialog(false);
+	}, [setShowShareLinkDialog]);
+
+	return (
+		<div>
+			<FeatureDetailsContentInner
+				feature={feature}
+				url={getFeatureProperty(feature, "detailsUrl")}
+				html={html}
+				hasError={hasError}
+				handleContentChange={handleContentChange}
+			/>
+
+			<ShareFeatureLinkModal
+				feature={feature}
+				isOpen={showShareLinkDialog}
+				onRequestClose={closeShareLinkDialog}
+			/>
+		</div>
+	);
+}
+
+export default memo(FeatureDetailsContent);

package/src/js/components/feature-details-content/index.js

@@ -0,0 +1,20 @@
+import {connect} from "react-redux";
+
+import {createStructuredSelector} from "reselect";
+
+import {
+	featureDetailsHasErrorSelector,
+	featureDetailsHtmlSelector,
+	isEmbeddedMapSelector,
+	viewSelector,
+} from "../../store/selectors.ts";
+import FeatureDetailsContent from "./feature-details-content";
+
+export default connect(
+	createStructuredSelector({
+		view: viewSelector,
+		isEmbeddedMap: isEmbeddedMapSelector,
+		hasError: featureDetailsHasErrorSelector,
+		html: featureDetailsHtmlSelector,
+	}),
+)(FeatureDetailsContent);