diff --git a/package-lock.json b/package-lock.json
index 97c891c..0ea080c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
                 "lodash-es": "^4.17.21",
                 "markdown-it": "^14.1.0",
                 "n3": "^1.26.0",
+                "nunjucks": "^3.2.4",
                 "roboto-fontface": "^0.10.0",
                 "shacl-tulip": "^0.0.9",
                 "vue-virtual-scroller": "^2.0.0-beta.8",
@@ -386,46 +387,46 @@
             "license": "MIT"
         },
         "node_modules/@chevrotain/cst-dts-gen": {
-            "version": "11.0.3",
-            "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
-            "integrity": "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==",
+            "version": "11.1.2",
+            "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.1.2.tgz",
+            "integrity": "sha512-XTsjvDVB5nDZBQB8o0o/0ozNelQtn2KrUVteIHSlPd2VAV2utEb6JzyCJaJ8tGxACR4RiBNWy5uYUHX2eji88Q==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "@chevrotain/gast": "11.0.3",
-                "@chevrotain/types": "11.0.3",
-                "lodash-es": "4.17.21"
+                "@chevrotain/gast": "11.1.2",
+                "@chevrotain/types": "11.1.2",
+                "lodash-es": "4.17.23"
             }
         },
         "node_modules/@chevrotain/gast": {
-            "version": "11.0.3",
-            "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.0.3.tgz",
-            "integrity": "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==",
+            "version": "11.1.2",
+            "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.1.2.tgz",
+            "integrity": "sha512-Z9zfXR5jNZb1Hlsd/p+4XWeUFugrHirq36bKzPWDSIacV+GPSVXdk+ahVWZTwjhNwofAWg/sZg58fyucKSQx5g==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "@chevrotain/types": "11.0.3",
-                "lodash-es": "4.17.21"
+                "@chevrotain/types": "11.1.2",
+                "lodash-es": "4.17.23"
             }
         },
         "node_modules/@chevrotain/regexp-to-ast": {
-            "version": "11.0.3",
-            "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz",
-            "integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==",
+            "version": "11.1.2",
+            "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.1.2.tgz",
+            "integrity": "sha512-nMU3Uj8naWer7xpZTYJdxbAs6RIv/dxYzkYU8GSwgUtcAAlzjcPfX1w+RKRcYG8POlzMeayOQ/znfwxEGo5ulw==",
             "dev": true,
             "license": "Apache-2.0"
         },
         "node_modules/@chevrotain/types": {
-            "version": "11.0.3",
-            "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.0.3.tgz",
-            "integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==",
+            "version": "11.1.2",
+            "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.1.2.tgz",
+            "integrity": "sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==",
             "dev": true,
             "license": "Apache-2.0"
         },
         "node_modules/@chevrotain/utils": {
-            "version": "11.0.3",
-            "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz",
-            "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==",
+            "version": "11.1.2",
+            "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.1.2.tgz",
+            "integrity": "sha512-4mudFAQ6H+MqBTfqLmU7G1ZwRzCLfJEooL/fsF6rCX5eePMbGhoy5n4g+G4vlh2muDcsCTJtL+uKbOzWxs5LHA==",
             "dev": true,
             "license": "Apache-2.0"
         },
@@ -1614,13 +1615,13 @@
             "optional": true
         },
         "node_modules/@mermaid-js/parser": {
-            "version": "0.6.3",
-            "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-0.6.3.tgz",
-            "integrity": "sha512-lnjOhe7zyHjc+If7yT4zoedx2vo4sHaTmtkl1+or8BRTnCtDmcTpAjpzDSfCZrshM5bCoz0GyidzadJAH1xobA==",
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.0.1.tgz",
+            "integrity": "sha512-opmV19kN1JsK0T6HhhokHpcVkqKpF+x2pPDKKM2ThHtZAB5F4PROopk0amuVYK5qMrIA4erzpNm8gmPNJgMDxQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "langium": "3.3.1"
+                "langium": "^4.0.0"
             }
         },
         "node_modules/@nodelib/fs.scandir": {
@@ -2088,9 +2089,9 @@
             "license": "MIT"
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz",
-            "integrity": "sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
+            "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
             "cpu": [
                 "arm"
             ],
@@ -2102,9 +2103,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.3.tgz",
-            "integrity": "sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
+            "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
             "cpu": [
                 "arm64"
             ],
@@ -2116,9 +2117,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.3.tgz",
-            "integrity": "sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
+            "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
             "cpu": [
                 "arm64"
             ],
@@ -2130,9 +2131,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.3.tgz",
-            "integrity": "sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
+            "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
             "cpu": [
                 "x64"
             ],
@@ -2144,9 +2145,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-arm64": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.3.tgz",
-            "integrity": "sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
+            "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
             "cpu": [
                 "arm64"
             ],
@@ -2158,9 +2159,9 @@
             ]
         },
         "node_modules/@rollup/rollup-freebsd-x64": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.3.tgz",
-            "integrity": "sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
+            "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
             "cpu": [
                 "x64"
             ],
@@ -2172,9 +2173,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.3.tgz",
-            "integrity": "sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
+            "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
             "cpu": [
                 "arm"
             ],
@@ -2186,9 +2187,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.3.tgz",
-            "integrity": "sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
+            "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
             "cpu": [
                 "arm"
             ],
@@ -2200,9 +2201,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.3.tgz",
-            "integrity": "sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
+            "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
             "cpu": [
                 "arm64"
             ],
@@ -2214,9 +2215,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.3.tgz",
-            "integrity": "sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
+            "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
             "cpu": [
                 "arm64"
             ],
@@ -2228,9 +2229,23 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-loong64-gnu": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.3.tgz",
-            "integrity": "sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
+            "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
+            "cpu": [
+                "loong64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-loong64-musl": {
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
+            "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
             "cpu": [
                 "loong64"
             ],
@@ -2242,9 +2257,23 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.3.tgz",
-            "integrity": "sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
+            "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@rollup/rollup-linux-ppc64-musl": {
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
+            "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
             "cpu": [
                 "ppc64"
             ],
@@ -2256,9 +2285,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.3.tgz",
-            "integrity": "sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
+            "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
             "cpu": [
                 "riscv64"
             ],
@@ -2270,9 +2299,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-musl": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.3.tgz",
-            "integrity": "sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
+            "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
             "cpu": [
                 "riscv64"
             ],
@@ -2284,9 +2313,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.3.tgz",
-            "integrity": "sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
+            "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
             "cpu": [
                 "s390x"
             ],
@@ -2298,9 +2327,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.3.tgz",
-            "integrity": "sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
+            "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
             "cpu": [
                 "x64"
             ],
@@ -2312,9 +2341,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.3.tgz",
-            "integrity": "sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
+            "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
             "cpu": [
                 "x64"
             ],
@@ -2325,10 +2354,24 @@
                 "linux"
             ]
         },
+        "node_modules/@rollup/rollup-openbsd-x64": {
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
+            "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "openbsd"
+            ]
+        },
         "node_modules/@rollup/rollup-openharmony-arm64": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.3.tgz",
-            "integrity": "sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
+            "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
             "cpu": [
                 "arm64"
             ],
@@ -2340,9 +2383,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.3.tgz",
-            "integrity": "sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
+            "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
             "cpu": [
                 "arm64"
             ],
@@ -2354,9 +2397,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.3.tgz",
-            "integrity": "sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
+            "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
             "cpu": [
                 "ia32"
             ],
@@ -2368,9 +2411,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-gnu": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.3.tgz",
-            "integrity": "sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
+            "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
             "cpu": [
                 "x64"
             ],
@@ -2382,9 +2425,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.3.tgz",
-            "integrity": "sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
+            "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
             "cpu": [
                 "x64"
             ],
@@ -2917,6 +2960,17 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/@upsetjs/venn.js": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@upsetjs/venn.js/-/venn.js-2.0.0.tgz",
+            "integrity": "sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==",
+            "dev": true,
+            "license": "MIT",
+            "optionalDependencies": {
+                "d3-selection": "^3.0.0",
+                "d3-transition": "^3.0.1"
+            }
+        },
         "node_modules/@vitejs/plugin-vue": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.2.tgz",
@@ -3317,6 +3371,12 @@
                 "url": "https://github.com/sponsors/antfu"
             }
         },
+        "node_modules/a-sync-waterfall": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+            "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
+            "license": "MIT"
+        },
         "node_modules/abort-controller": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -3372,7 +3432,7 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
             "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-            "dev": true,
+            "devOptional": true,
             "license": "ISC",
             "dependencies": {
                 "normalize-path": "^3.0.0",
@@ -3388,6 +3448,12 @@
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
             "license": "Python-2.0"
         },
+        "node_modules/asap": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+            "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+            "license": "MIT"
+        },
         "node_modules/assertion-error": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -3422,7 +3488,7 @@
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
             "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
@@ -3445,7 +3511,7 @@
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
             "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "fill-range": "^7.1.1"
@@ -3555,18 +3621,18 @@
             }
         },
         "node_modules/chevrotain": {
-            "version": "11.0.3",
-            "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
-            "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
+            "version": "11.1.2",
+            "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.1.2.tgz",
+            "integrity": "sha512-opLQzEVriiH1uUQ4Kctsd49bRoFDXGGSC4GUqj7pGyxM3RehRhvTlZJc1FL/Flew2p5uwxa1tUDWKzI4wNM8pg==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "@chevrotain/cst-dts-gen": "11.0.3",
-                "@chevrotain/gast": "11.0.3",
-                "@chevrotain/regexp-to-ast": "11.0.3",
-                "@chevrotain/types": "11.0.3",
-                "@chevrotain/utils": "11.0.3",
-                "lodash-es": "4.17.21"
+                "@chevrotain/cst-dts-gen": "11.1.2",
+                "@chevrotain/gast": "11.1.2",
+                "@chevrotain/regexp-to-ast": "11.1.2",
+                "@chevrotain/types": "11.1.2",
+                "@chevrotain/utils": "11.1.2",
+                "lodash-es": "4.17.23"
             }
         },
         "node_modules/chevrotain-allstar": {
@@ -3583,19 +3649,28 @@
             }
         },
         "node_modules/chokidar": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-            "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-            "dev": true,
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+            "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
-                "readdirp": "^4.0.1"
+                "anymatch": "~3.1.2",
+                "braces": "~3.0.2",
+                "glob-parent": "~5.1.2",
+                "is-binary-path": "~2.1.0",
+                "is-glob": "~4.0.1",
+                "normalize-path": "~3.0.0",
+                "readdirp": "~3.6.0"
             },
             "engines": {
-                "node": ">= 14.16.0"
+                "node": ">= 8.10.0"
             },
             "funding": {
                 "url": "https://paulmillr.com/funding/"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
             }
         },
         "node_modules/comma-separated-tokens": {
@@ -4195,9 +4270,9 @@
             }
         },
         "node_modules/dagre-d3-es": {
-            "version": "7.0.13",
-            "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.13.tgz",
-            "integrity": "sha512-efEhnxpSuwpYOKRm/L5KbqoZmNNukHa/Flty4Wp62JRvgH2ojwVgPgdYyr4twpieZnyRDdIH7PY2mopX26+j2Q==",
+            "version": "7.0.14",
+            "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.14.tgz",
+            "integrity": "sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -4298,9 +4373,9 @@
             }
         },
         "node_modules/dompurify": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
-            "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.3.tgz",
+            "integrity": "sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==",
             "license": "(MPL-2.0 OR Apache-2.0)",
             "optionalDependencies": {
                 "@types/trusted-types": "^2.0.7"
@@ -4479,7 +4554,7 @@
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
             "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "to-regex-range": "^5.0.1"
@@ -4529,7 +4604,7 @@
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
             "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-            "dev": true,
+            "devOptional": true,
             "license": "ISC",
             "dependencies": {
                 "is-glob": "^4.0.1"
@@ -4668,9 +4743,9 @@
             "license": "BSD-3-Clause"
         },
         "node_modules/immutable": {
-            "version": "5.1.4",
-            "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
-            "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+            "version": "5.1.5",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+            "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
             "dev": true,
             "license": "MIT"
         },
@@ -4688,7 +4763,7 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
             "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "binary-extensions": "^2.0.0"
@@ -4701,7 +4776,7 @@
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
             "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -4711,7 +4786,7 @@
             "version": "4.0.3",
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
             "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "is-extglob": "^2.1.1"
@@ -4724,7 +4799,7 @@
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
             "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.12.0"
@@ -4847,20 +4922,21 @@
             "dev": true
         },
         "node_modules/langium": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/langium/-/langium-3.3.1.tgz",
-            "integrity": "sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==",
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/langium/-/langium-4.2.1.tgz",
+            "integrity": "sha512-zu9QWmjpzJcomzdJQAHgDVhLGq5bLosVak1KVa40NzQHXfqr4eAHupvnPOVXEoLkg6Ocefvf/93d//SB7du4YQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "chevrotain": "~11.0.3",
-                "chevrotain-allstar": "~0.3.0",
+                "chevrotain": "~11.1.1",
+                "chevrotain-allstar": "~0.3.1",
                 "vscode-languageserver": "~9.0.1",
                 "vscode-languageserver-textdocument": "~1.0.11",
-                "vscode-uri": "~3.0.8"
+                "vscode-uri": "~3.1.0"
             },
             "engines": {
-                "node": ">=16.0.0"
+                "node": ">=20.10.0",
+                "npm": ">=10.2.3"
             }
         },
         "node_modules/layout-base": {
@@ -4917,15 +4993,15 @@
             }
         },
         "node_modules/lodash": {
-            "version": "4.17.21",
-            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "version": "4.17.23",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+            "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
             "license": "MIT"
         },
         "node_modules/lodash-es": {
-            "version": "4.17.21",
-            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+            "version": "4.17.23",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+            "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
             "license": "MIT"
         },
         "node_modules/loupe": {
@@ -4952,9 +5028,9 @@
             "license": "MIT"
         },
         "node_modules/markdown-it": {
-            "version": "14.1.0",
-            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
-            "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+            "version": "14.1.1",
+            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+            "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
             "license": "MIT",
             "dependencies": {
                 "argparse": "^2.0.1",
@@ -5020,28 +5096,29 @@
             }
         },
         "node_modules/mermaid": {
-            "version": "11.12.2",
-            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.12.2.tgz",
-            "integrity": "sha512-n34QPDPEKmaeCG4WDMGy0OT6PSyxKCfy2pJgShP+Qow2KLrvWjclwbc3yXfSIf4BanqWEhQEpngWwNp/XhZt6w==",
+            "version": "11.13.0",
+            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.13.0.tgz",
+            "integrity": "sha512-fEnci+Immw6lKMFI8sqzjlATTyjLkRa6axrEgLV2yHTfv8r+h1wjFbV6xeRtd4rUV1cS4EpR9rwp3Rci7TRWDw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@braintree/sanitize-url": "^7.1.1",
-                "@iconify/utils": "^3.0.1",
-                "@mermaid-js/parser": "^0.6.3",
+                "@iconify/utils": "^3.0.2",
+                "@mermaid-js/parser": "^1.0.1",
                 "@types/d3": "^7.4.3",
-                "cytoscape": "^3.29.3",
+                "@upsetjs/venn.js": "^2.0.0",
+                "cytoscape": "^3.33.1",
                 "cytoscape-cose-bilkent": "^4.1.0",
                 "cytoscape-fcose": "^2.2.0",
                 "d3": "^7.9.0",
                 "d3-sankey": "^0.12.3",
-                "dagre-d3-es": "7.0.13",
-                "dayjs": "^1.11.18",
-                "dompurify": "^3.2.5",
-                "katex": "^0.16.22",
+                "dagre-d3-es": "7.0.14",
+                "dayjs": "^1.11.19",
+                "dompurify": "^3.3.1",
+                "katex": "^0.16.25",
                 "khroma": "^2.1.0",
-                "lodash-es": "^4.17.21",
-                "marked": "^16.2.1",
+                "lodash-es": "^4.17.23",
+                "marked": "^16.3.0",
                 "roughjs": "^4.6.6",
                 "stylis": "^4.3.6",
                 "ts-dedent": "^2.2.0",
@@ -5291,12 +5368,46 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
             "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/nunjucks": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
+            "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "a-sync-waterfall": "^1.0.0",
+                "asap": "^2.0.3",
+                "commander": "^5.1.0"
+            },
+            "bin": {
+                "nunjucks-precompile": "bin/precompile"
+            },
+            "engines": {
+                "node": ">= 6.9.0"
+            },
+            "peerDependencies": {
+                "chokidar": "^3.3.0"
+            },
+            "peerDependenciesMeta": {
+                "chokidar": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/nunjucks/node_modules/commander": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+            "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/oniguruma-to-es": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-3.1.1.tgz",
@@ -5357,7 +5468,7 @@
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
             "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8.6"
@@ -5598,17 +5709,16 @@
             }
         },
         "node_modules/readdirp": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-            "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-            "dev": true,
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+            "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+            "devOptional": true,
             "license": "MIT",
-            "engines": {
-                "node": ">= 14.18.0"
+            "dependencies": {
+                "picomatch": "^2.2.1"
             },
-            "funding": {
-                "type": "individual",
-                "url": "https://paulmillr.com/funding/"
+            "engines": {
+                "node": ">=8.10.0"
             }
         },
         "node_modules/regex": {
@@ -5676,9 +5786,9 @@
             "license": "Unlicense"
         },
         "node_modules/rollup": {
-            "version": "4.53.3",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
-            "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
+            "version": "4.59.0",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
+            "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
             "devOptional": true,
             "license": "MIT",
             "dependencies": {
@@ -5692,28 +5802,31 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.53.3",
-                "@rollup/rollup-android-arm64": "4.53.3",
-                "@rollup/rollup-darwin-arm64": "4.53.3",
-                "@rollup/rollup-darwin-x64": "4.53.3",
-                "@rollup/rollup-freebsd-arm64": "4.53.3",
-                "@rollup/rollup-freebsd-x64": "4.53.3",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.53.3",
-                "@rollup/rollup-linux-arm-musleabihf": "4.53.3",
-                "@rollup/rollup-linux-arm64-gnu": "4.53.3",
-                "@rollup/rollup-linux-arm64-musl": "4.53.3",
-                "@rollup/rollup-linux-loong64-gnu": "4.53.3",
-                "@rollup/rollup-linux-ppc64-gnu": "4.53.3",
-                "@rollup/rollup-linux-riscv64-gnu": "4.53.3",
-                "@rollup/rollup-linux-riscv64-musl": "4.53.3",
-                "@rollup/rollup-linux-s390x-gnu": "4.53.3",
-                "@rollup/rollup-linux-x64-gnu": "4.53.3",
-                "@rollup/rollup-linux-x64-musl": "4.53.3",
-                "@rollup/rollup-openharmony-arm64": "4.53.3",
-                "@rollup/rollup-win32-arm64-msvc": "4.53.3",
-                "@rollup/rollup-win32-ia32-msvc": "4.53.3",
-                "@rollup/rollup-win32-x64-gnu": "4.53.3",
-                "@rollup/rollup-win32-x64-msvc": "4.53.3",
+                "@rollup/rollup-android-arm-eabi": "4.59.0",
+                "@rollup/rollup-android-arm64": "4.59.0",
+                "@rollup/rollup-darwin-arm64": "4.59.0",
+                "@rollup/rollup-darwin-x64": "4.59.0",
+                "@rollup/rollup-freebsd-arm64": "4.59.0",
+                "@rollup/rollup-freebsd-x64": "4.59.0",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
+                "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
+                "@rollup/rollup-linux-arm64-gnu": "4.59.0",
+                "@rollup/rollup-linux-arm64-musl": "4.59.0",
+                "@rollup/rollup-linux-loong64-gnu": "4.59.0",
+                "@rollup/rollup-linux-loong64-musl": "4.59.0",
+                "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
+                "@rollup/rollup-linux-ppc64-musl": "4.59.0",
+                "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
+                "@rollup/rollup-linux-riscv64-musl": "4.59.0",
+                "@rollup/rollup-linux-s390x-gnu": "4.59.0",
+                "@rollup/rollup-linux-x64-gnu": "4.59.0",
+                "@rollup/rollup-linux-x64-musl": "4.59.0",
+                "@rollup/rollup-openbsd-x64": "4.59.0",
+                "@rollup/rollup-openharmony-arm64": "4.59.0",
+                "@rollup/rollup-win32-arm64-msvc": "4.59.0",
+                "@rollup/rollup-win32-ia32-msvc": "4.59.0",
+                "@rollup/rollup-win32-x64-gnu": "4.59.0",
+                "@rollup/rollup-win32-x64-msvc": "4.59.0",
                 "fsevents": "~2.3.2"
             }
         },
@@ -5809,6 +5922,36 @@
                 "@parcel/watcher": "^2.4.1"
             }
         },
+        "node_modules/sass/node_modules/chokidar": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+            "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "readdirp": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 14.16.0"
+            },
+            "funding": {
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
+        "node_modules/sass/node_modules/readdirp": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+            "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 14.18.0"
+            },
+            "funding": {
+                "type": "individual",
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
         "node_modules/search-insights": {
             "version": "2.17.3",
             "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.3.tgz",
@@ -6074,7 +6217,7 @@
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
             "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "dependencies": {
                 "is-number": "^7.0.0"
@@ -6297,44 +6440,6 @@
                 }
             }
         },
-        "node_modules/unplugin-vue-components/node_modules/chokidar": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-            "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "anymatch": "~3.1.2",
-                "braces": "~3.0.2",
-                "glob-parent": "~5.1.2",
-                "is-binary-path": "~2.1.0",
-                "is-glob": "~4.0.1",
-                "normalize-path": "~3.0.0",
-                "readdirp": "~3.6.0"
-            },
-            "engines": {
-                "node": ">= 8.10.0"
-            },
-            "funding": {
-                "url": "https://paulmillr.com/funding/"
-            },
-            "optionalDependencies": {
-                "fsevents": "~2.3.2"
-            }
-        },
-        "node_modules/unplugin-vue-components/node_modules/readdirp": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-            "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "picomatch": "^2.2.1"
-            },
-            "engines": {
-                "node": ">=8.10.0"
-            }
-        },
         "node_modules/unplugin-vue-components/node_modules/unplugin": {
             "version": "2.3.11",
             "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
@@ -7289,9 +7394,9 @@
             "license": "MIT"
         },
         "node_modules/vscode-uri": {
-            "version": "3.0.8",
-            "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
-            "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+            "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
             "dev": true,
             "license": "MIT"
         },
diff --git a/package.json b/package.json
index c81ac92..5ff88b9 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
         "lodash-es": "^4.17.21",
         "markdown-it": "^14.1.0",
         "n3": "^1.26.0",
+        "nunjucks": "^3.2.4",
         "roboto-fontface": "^0.10.0",
         "shacl-tulip": "^0.0.9",
         "vue-virtual-scroller": "^2.0.0-beta.8",
diff --git a/src/components/InstancesSelectEditor4Wiz.vue b/src/components/InstancesSelectEditor4Wiz.vue
new file mode 100644
index 0000000..749621c
--- /dev/null
+++ b/src/components/InstancesSelectEditor4Wiz.vue
@@ -0,0 +1,1188 @@
+<template>
+    <v-input
+        v-model="internalValue"
+        :rules="rules"
+        ref="fieldRef"
+        :id="inputId"
+        hide-details="auto"
+        :disabled="props.disabled"
+    >
+    <div class="d-flex align-center" style="width: 100%">
+        <v-menu v-model="menu" location="bottom"  hide-details="auto" :disabled="props.disabled">
+            <template #activator="{ props }">
+                <v-text-field
+                    v-model="queryText"
+                    v-bind="props"
+                    variant="outlined"
+                    :placeholder="
+                    configVarsMain.serviceConstrainedSearch.min_characters ?
+                    `select an item | enter at least ${configVarsMain.serviceConstrainedSearch.min_characters} characters to search all records` :
+                    `search/select an item`
+                    "
+                    style="margin-bottom: 0"
+                    :label="queryLabel"
+                    ref="inputRef"
+                    @click.stop="openMenu()"
+                    :append-inner-icon="
+                        menu ? 'mdi-chevron-down' : 'mdi-chevron-right'
+                    "
+                    :prepend-inner-icon="selectedItemIcon"
+                    :loading="fetchingRecordLoader"
+                     hide-details="auto"
+                     density="compact"
+                     :disabled="props.disabled"
+                >
+                    <template v-slot:append-inner>
+                        <v-icon
+                            v-if="showClearIcon"
+                            class="mr-2"
+                            @click.stop="clearField()"
+                            @mousedown.stop.prevent
+                        >
+                            mdi-close-circle
+                        </v-icon>
+                    </template>
+                </v-text-field>
+            </template>
+            <v-card style="margin-top: 0; padding-top: 6px;">
+                <v-progress-linear
+                    v-if="showProgress"
+                    v-model="currentProgress"
+                    height="10"
+                    :color="configVarsMain.appTheme.link_color"
+                    class="menu-progress"
+                    rounded
+                >
+                    <template v-slot:default="{ value }">
+                        <span class="progress-text" v-if="!fetchingDataLoader">
+                            <span v-if="filteredItemCount">
+                                {{filteredItemCount}}<span v-if="totalItemCount && totalItemCount > filteredItemCount">/{{ totalItemCount }}</span>
+                            </span>
+                        </span>
+                    </template>
+                </v-progress-linear>
+                <span v-if="canEditClass">
+                    <v-list-item @click.stop :active="false">
+                        <v-list-item-title>
+                            <!-- When there is only one item, just show a button -->
+                            <template v-if="propClassList.length === 1">
+                                <v-btn style="margin-top: 5px;" variant="tonal" @click.stop="handleAddItemClick(propClassList[0])">
+                                    Add new item &nbsp;&nbsp;
+                                    <v-icon icon="mdi-play"></v-icon>
+                                </v-btn>
+                            </template>
+                            <!-- When there are more items, show the menu -->
+                            <template v-else>
+                                <v-menu v-model="addItemMenu" location="end">
+                                    <template v-slot:activator="{ props }">
+                                        <v-btn style="margin-top: 5px;" variant="tonal" v-bind="props"
+                                            >Add new item &nbsp;&nbsp;
+                                            <v-icon icon="item.icon"
+                                                >mdi-play</v-icon
+                                            >
+                                        </v-btn>
+                                    </template>
+
+                                    <v-list ref="addItemList">
+                                        <v-list-item
+                                            v-for="item in propClassList"
+                                            @click.stop="handleAddItemClick(item)"
+                                        >
+                                            <v-list-item-title>
+                                                <v-tooltip :text="item.curie" location="start">
+                                                    <template v-slot:activator="{ props }">
+                                                        <v-icon v-bind="props">{{ item.icon }}</v-icon>
+                                                    </template>
+                                                </v-tooltip>&nbsp;&nbsp;&nbsp;{{ item.title }}
+                                            </v-list-item-title>
+                                        </v-list-item>
+                                    </v-list>
+                                </v-menu>
+                                <v-menu v-model="filterItemMenu" location="end">
+                                    <template v-slot:activator="{ props }">
+                                        <v-btn style="margin-top: 5px; margin-left: 10px;" variant="tonal" v-bind="props">
+                                            Filter data &nbsp;&nbsp;
+                                            <v-icon 
+                                                icon="mdi-format-list-checks"
+                                                :color="checkBoxFilterUse == 'all' ? '' : (checkBoxFilterUse == 'some' ? 'primary' : 'error')"
+                                            ></v-icon>
+                                        </v-btn>
+                                    </template>
+
+                                    <v-list ref="filterItemList" multiple>
+                                        <v-list-item @click.stop="onSelectAllFilterItems()">
+                                            <v-icon>{{ selectAllFilterItems ? 'mdi-checkbox-marked-outline' : 'mdi-checkbox-blank-outline' }}</v-icon>
+                                            &nbsp;&nbsp;&nbsp;<em>{{ selectAllFilterItems ? 'Uncheck' : 'Check' }} all</em>
+                                        </v-list-item>
+                                        <v-divider></v-divider>
+                                        <v-list-item
+                                            v-for="item in filterClassList"
+                                            @click.stop="handleFilterItemClick(item)"
+                                        >
+                                            <v-list-item-title>
+                                                <v-icon>{{ item.checked ? 'mdi-checkbox-marked-outline' : 'mdi-checkbox-blank-outline' }}</v-icon>
+                                                &nbsp;&nbsp;&nbsp;{{ item.title }}
+                                            </v-list-item-title>
+                                        </v-list-item>
+                                    </v-list>
+                                </v-menu>
+                            </template>
+                        </v-list-item-title>
+                    </v-list-item>
+                </span>
+                <span v-if="fetchingDataLoader">
+                    <v-list-item>
+                        <small>
+                        <em>
+                            {{ fetchingText }}
+                        </em>
+                        </small>
+                        <v-progress-linear :color="configVarsMain.appTheme.link_color" indeterminate></v-progress-linear>
+                    </v-list-item>
+                </span>
+                <span v-if="itemsToList.length">
+                    <DynamicScroller
+                        style="max-height: 200px; overflow-y: auto"
+                        :items="checkBoxFilteredItems"
+                        :min-item-size="10"
+                        overflow-y
+                        key-field="value"
+                        class="virtual-scroller"
+                        ref="scrollerRef"
+                        :emit-update="true"
+                        @scroll-end="onScrollEnd"
+                        @resize="onScrollerReady"
+                        @update="onScrollerUpdate"
+                    >
+                        <template v-slot="{ item, index, active }">
+                            <DynamicScrollerItem
+                                :item="item"
+                                :active="active"
+                                class="scroller-item"
+                            >
+                                <v-list-item
+                                    @click.stop="selectItem(item)"
+                                    rounded
+                                    :active="
+                                        subValues.selectedInstance?.value ==
+                                        item.value
+                                    "
+                                    class="myInstancesList"
+                                >
+                                    <template v-slot:prepend>
+                                        <v-icon>{{
+                                            getClassIcon(
+                                                toIRI(
+                                                    item.props[
+                                                        toCURIE(
+                                                            RDF.type.value,
+                                                            allPrefixes
+                                                        )
+                                                    ],
+                                                    allPrefixes
+                                                )
+                                            )
+                                        }}</v-icon>
+                                    </template>
+                                    <span v-if="item.props.hasPrefLabel">
+                                        {{
+                                            item.props[
+                                                toCURIE(
+                                                    SKOS.prefLabel.value,
+                                                    allPrefixes
+                                                )
+                                            ]
+                                        }}
+                                    </span>
+                                    <span v-else-if="item.props.hasDisplayLabel">
+                                        {{ item.props._displayLabel }}
+                                    </span>
+                                    <span v-else>
+                                        <span
+                                            v-for="(
+                                                value, key, index
+                                            ) in item.props"
+                                        >
+                                            <v-row
+                                                no-gutters
+                                                v-if="
+                                                    [
+                                                        'title', 'subtitle', 'name', 'value',
+                                                        'itemQuad', 'relatedQuads', 'isTemp',
+                                                        'hasPrefLabel', 'hasDisplayLabel', 'hasNote',
+                                                        RDF.type.value,
+                                                        toCURIE(
+                                                            RDF.type.value,
+                                                            allPrefixes
+                                                        ),
+                                                    ].indexOf(key) < 0
+                                                "
+                                            >
+                                                <v-col cols="6"
+                                                    ><small>{{
+                                                        key
+                                                    }}</small></v-col
+                                                >
+                                                <v-col
+                                                    ><small>{{
+                                                        value
+                                                    }}</small></v-col
+                                                >
+                                            </v-row>
+                                        </span>
+                                    </span>
+                                    <template v-slot:append>
+                                        <v-tooltip
+                                            v-if="
+                                                item.props.hasNote &&
+                                                item.props[toCURIE(SKOS.note.value,allPrefixes)]
+                                            "
+                                            :text="item.props[toCURIE(SKOS.note.value,allPrefixes)]"
+                                            location="top"
+                                            max-width="400px"
+                                            max-height="400px"
+                                            persistent
+                                        >
+                                            <template v-slot:activator="{ props }">
+                                                <v-icon
+                                                    icon="mdi-information-outline"
+                                                    size="small"
+                                                    v-bind="props"
+                                                ></v-icon>
+                                            </template>
+                                        </v-tooltip>
+                                        <v-btn
+                                            v-if=" !nsHasPID || 
+                                                (configVarsMain.allowEditInstances === true ||
+                                                configVarsMain.allowEditInstances.indexOf(toCURIE(item.props.itemQuad.object.value, allPrefixes)) >= 0)
+                                            "
+                                            icon="mdi-pencil"
+                                            variant="text"
+                                            size="x-small"
+                                            @click="editItem(item)"
+                                            :disabled="!canEditClass"
+                                        ></v-btn>
+                                    </template>
+                                </v-list-item>
+                                <v-divider></v-divider>
+                                <v-divider></v-divider>
+                            </DynamicScrollerItem>
+                        </template>
+                        <template #after>
+                            <div class="after-loader" :style="'color: ' + configVarsMain.appTheme.link_color + ';'" >
+                                <v-progress-circular v-show="showFetchingPageLoader" indeterminate :size="26" :width="4"></v-progress-circular>
+                                <span v-if="!showFetchingPageLoader && filteredItems.length == 0" style="color: grey"><em>No items</em></span>
+                            </div>
+                        </template>
+                    </DynamicScroller>
+                </span>
+                <span v-else>
+                    <span v-if="!fetchingDataLoader"><v-card-text> No items </v-card-text></span>
+                </span>
+            </v-card>
+        </v-menu>
+        <v-btn
+            v-if="
+                subValues?.selectedInstance && ( !nsHasPID || 
+                (configVarsMain.allowEditInstances === true ||
+                configVarsMain.allowEditInstances.indexOf(toCURIE(subValues?.selectedInstance?.props.itemQuad.object.value, allPrefixes)) >= 0))
+            "
+            style="margin-left: 0.5em"
+            rounded="0"
+            icon="mdi-pencil"
+            density="comfortable"
+            elevation="1"
+            @click="editItem(subValues.selectedInstance)"
+            :disabled="!canEditClass"
+        ></v-btn>
+        </div>
+    </v-input>
+</template>
+
+<script setup>
+import {
+    inject,
+    watch,
+    watchEffect,
+    onBeforeMount,
+    ref,
+    provide,
+    computed,
+    nextTick,
+    reactive
+} from 'vue';
+import { useRules } from '@/composables/rules';
+import { DataFactory } from 'n3';
+import { SHACL, RDF, SKOS } from '@/modules/namespaces';
+import {
+    findObjectByKey,
+    hasConfigDisplayLabel,
+    getConfigDisplayLabel,
+    nodeShapeHasPID,
+    hashSubgraph,
+    includeClass,
+    snakeToCamel,
+    getDisplayName,
+    toCURIE,
+    toIRI,
+} from '@/modules/utils';
+import { useRegisterRef } from '@/composables/refregister';
+import { useBaseInput } from '@/composables/base';
+import { debounce } from 'lodash-es';
+import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
+import { useCompConfig } from '@/composables/useCompConfig';
+import { disabled } from 'happy-dom/lib/PropertySymbol';
+const { namedNode, blankNode, quad,} = DataFactory;
+const triggerListGenAndItemSelect = inject('triggerListGenAndItemSelect')
+
+// ----- //
+// Props //
+// ----- //
+
+const props = defineProps({
+    modelValue: String,
+    property_shape: Object,
+    allow_add: {
+        type: Boolean,
+        default: true
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    // node_uid: String,
+    // node_idx: String,
+    // triple_uid: String,
+    // triple_idx: Number,
+});
+
+// ---- //
+// Data //
+// ---- //
+const showProgress = ref(true);
+const totalItemCount = ref(0);
+const fetchedItemCount = ref(0);
+const showFetchingPageLoader = ref(false)
+let hideTimeout = null
+const inputRef = ref(null);
+const queryText = ref('');
+const queryLabel = ref('');
+const menu = ref(false);
+const addItemMenu = ref(false);
+const filterItemMenu = ref(false);
+const scrollerRef = ref(null);
+const itemsToList = ref([]);
+const fetchingDataLoader = ref(false);
+const fetchingRecordLoader = ref(false);
+const editInstanceItem = inject('editInstanceItem');
+const rdfDS = inject('rdfDS');
+const allPrefixes = inject('allPrefixes');
+const classDS = inject('classDS');
+const shapesDS = inject('shapesDS');
+const ID_IRI = inject('ID_IRI');
+const nsHasPID = ref(true);
+const visibleRange = ref({
+    startIndex: 0,
+    endIndex: 0,
+    visibleStartIndex: 0,
+    visibleEndIndex: 0
+})
+const config = inject('config');
+const searchableFields = inject('searchableFields');
+const fetchFromService = inject('fetchFromService');
+const hasUnfetchedPages = inject('hasUnfetchedPages');
+const getTotalItems = inject('getTotalItems');
+const firstPageFetched = inject('firstPageFetched');
+const isFetchingPage = ref(false);
+const hasOpenedMenu = ref(false);
+const configVarsMain = inject('configVarsMain')
+const allSubClasses = inject('allSubClasses');
+const getClassIcon = inject('getClassIcon');
+const localPropertyShape = ref(props.property_shape);
+const propClass = ref(null);
+propClass.value = localPropertyShape.value[SHACL.class.value] ?? false;
+// Prepare array of the base class and all of it subclasses
+let allclass_array = [propClass.value]
+if (Array.isArray(allSubClasses[propClass.value]) && allSubClasses[propClass.value].length > 0 ) {
+    allclass_array = allclass_array.concat(allSubClasses[propClass.value])
+}
+
+const {componentName, componentConfig} = useCompConfig(configVarsMain)
+const fetchingText = componentConfig?.fetchingsRecordsText;
+const compClass = toCURIE(props.property_shape[SHACL.class.value], allPrefixes)
+const compClassConfig = componentConfig?.[compClass]
+const showHideConfig = ref({});
+if (compClassConfig) {
+    let newConfig = {};
+    for (const [k, v] of Object.entries(compClassConfig)) {
+        newConfig[snakeToCamel(k)] = v;
+    }
+    showHideConfig.value = newConfig;
+} else {
+    showHideConfig.value = configVarsMain;
+}
+let propClassList
+if (allclass_array.length > 1) {
+    // TODO: it is still possible for the propClassList here to end up with zero
+    // entries. It would be better to allow a per-class config to specify which
+    // subclasses should be included here, rather than falling back on the config
+    // that is intended for the whole app, and not this particular component
+    
+    propClassList = allclass_array.map((cl) => {
+        if (includeClass(cl, showHideConfig.value, allPrefixes)) {
+            return {
+                title: getDisplayName(cl, configVarsMain, allPrefixes, shapesDS.data.nodeShapes[cl]),
+                value: cl,
+                icon: getClassIcon(cl, allPrefixes),
+                curie: toCURIE(cl, allPrefixes),
+            };
+        }
+    }).filter((el) => {
+    return el !== undefined;
+    }).sort((a,b) =>{
+        return a.title.localeCompare(b.title)
+    });
+} else {
+    // This means the only element in the allclass_array is the class itself
+    // we should allow that as a minimum
+    propClassList = allclass_array.map((cl) => {
+        return {
+            title: getDisplayName(cl, configVarsMain, allPrefixes, shapesDS.data.nodeShapes[cl]),
+            value: cl,
+            icon: getClassIcon(cl, allPrefixes),
+            curie: toCURIE(cl, allPrefixes),
+        };
+    }).sort((a,b) =>{
+        return a.title.localeCompare(b.title)
+    });
+}
+
+const classFilterUpdated = ref(0)
+const filterClassList = reactive(structuredClone(propClassList))
+for (const el of filterClassList) {
+    el.checked = true;
+}
+
+const selectAllFilterItems = ref(true)
+function onSelectAllFilterItems() {
+    selectAllFilterItems.value = !selectAllFilterItems.value;
+    for (const el of filterClassList) {
+        el.checked = selectAllFilterItems.value;
+    }
+    classFilterUpdated.value += 1;
+    console.log(checkBoxFilteredItems.value)
+}
+
+
+const canEditClass = ref(true)
+canEditClass.value = configVarsMain.noEditClasses.indexOf(toCURIE(propClass.value, allPrefixes)) < 0 ? true : false
+if (!props.allow_add)  canEditClass.value = false
+const { rules } = useRules(localPropertyShape.value);
+const inputId = `input-${Date.now()}`;
+const { fieldRef } = useRegisterRef(inputId, props);
+const emit = defineEmits(['update:modelValue']);
+const { subValues, internalValue } = useBaseInput(
+    props,
+    emit,
+    valueParser,
+    valueCombiner
+);
+
+const newNodeIdx = ref(null);
+const addItemList = ref(null);
+
+const selectedAddItemShapeIRI = ref(null);
+const addForm = inject('addForm');
+const lastSavedNode = inject('lastSavedNode');
+const openForms = inject('openForms');
+
+const cancelDialogForm = () => {
+    newNodeIdx.value = null;
+};
+provide('cancelFormHandler', cancelDialogForm);
+const saveDialogForm = () => {
+    newNodeIdx.value = null;
+};
+provide('saveFormHandler', saveDialogForm);
+let debounceTypingTimer = null;
+
+const showClearIcon = computed(() => {
+    if ((!menu.value) && subValues.value.selectedInstance) {
+        return true;
+    }
+    return false;
+});
+
+function clearField() {
+    menu.value = false;
+    subValues.value.selectedInstance = null;
+    queryText.value = '';
+    queryLabel.value = '';
+}
+
+function setSelectedValue() {
+    // Set selected value if the prop has a value
+    if (props.modelValue) {
+        var inst = findObjectByKey(
+            itemsToList.value,
+            'value',
+            props.modelValue
+        );
+        if (inst) {
+            subValues.value.selectedInstance = inst;
+            queryLabel.value = subValues.value.selectedInstance.props._prefLabel
+                ? subValues.value.selectedInstance.props._prefLabel
+                : (
+                    subValues.value.selectedInstance.props._displayLabel ?
+                    subValues.value.selectedInstance.props._displayLabel :
+                    '(selected item name unknown)'
+                )
+        } else {
+            subValues.value.selectedInstance = null;
+            queryLabel.value = props.modelValue;
+        }
+    }
+}
+
+async function scrollToSelectedItem() {
+    const scroller = scrollerRef.value
+    const selectedItem = subValues.value.selectedInstance
+    if (!selectedItem || !scroller) return
+    // Find the index of the selected item
+    const index = filteredItems.value.findIndex(
+        (item) => item.value === selectedItem.value
+    )
+    if (index === -1) return
+    // Helper: check if index is visible
+    const isVisible = () => {
+        const { startIndex, endIndex } = visibleRange.value
+        return index >= startIndex && index <= endIndex
+    }
+    // If not visible, scroll until it is
+    let attempts = 0
+    while (!isVisible() && attempts++ < 5) {
+        scroller.scrollToItem(index)
+        // Wait for DOM + scroller update
+        await nextTick()
+        await new Promise(r => setTimeout(r, 50))
+    }
+}
+
+onBeforeMount(async () => {
+    nsHasPID.value = nodeShapeHasPID(propClass.value, shapesDS, ID_IRI.value)
+    if (props.modelValue) {
+        fetchingRecordLoader.value = true;
+        if (config.value.use_service && nsHasPID.value) {
+            const results = await fetchFromService(
+                'get-record',
+                props.modelValue,
+                allPrefixes
+            );
+        }
+        getSingleItemToList(props.modelValue);
+        setSelectedValue();
+        fetchingRecordLoader.value = false;
+        fetchedItemCount.value = itemsToList.value.length;
+    }
+});
+
+const openMenu = async () => {
+    if (hasOpenedMenu.value == false) {
+        populateList();
+        hasOpenedMenu.value = true
+    }
+    menu.value = true;    
+};
+
+function onScrollerReady() {
+    setTimeout(() => {
+        scrollToSelectedItem();
+    }, 200)
+}
+
+function onScrollerUpdate(startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
+    visibleRange.value = { startIndex, endIndex, visibleStartIndex, visibleEndIndex }
+}
+
+watch(menu, (newVal) => {
+    if (!newVal) {
+        queryText.value = '';
+    }
+})
+
+async function populateList() {
+    fetchingDataLoader.value = true;
+    await getItemsToList();
+    if (config.value.use_service && nsHasPID.value) {
+        try {
+            const result = await fetchFromService(
+                'get-paginated-records-constrained',
+                propClass.value,
+                allPrefixes
+            );
+            if (result.status === null) {
+                console.error(result.error);
+            }
+            console.log("populateList fetch from service result:")
+            console.log(result)
+            // We need to get total item count here in order to display progress
+            totalItemCount.value = getTotalItems(propClass.value)
+            console.log("totalItemCount.value")
+            console.log(totalItemCount.value)
+            await getItemsToList();
+            fetchedItemCount.value = itemsToList.value.length;
+            console.log("fetchedItemCount.value")
+            console.log(fetchedItemCount.value)
+        } catch (err) {
+            console.error(err);
+        } finally {
+            fetchingDataLoader.value = false;
+        }
+    } else {
+        fetchingDataLoader.value = false;
+    }
+    fetchedItemCount.value = itemsToList.value.length;
+    setSelectedValue();
+}
+
+watch(isFetchingPage, (newVal) => {
+    if (newVal) {
+        // If fetching starts → show immediately
+        if (hideTimeout) {
+            clearTimeout(hideTimeout)
+            hideTimeout = null
+        }
+        showFetchingPageLoader.value = true
+    } else {
+        // If fetching stops → wait before hiding
+        hideTimeout = setTimeout(() => {
+            showFetchingPageLoader.value = false
+            hideTimeout = null
+        }, 1000)
+    }
+})
+
+watchEffect(async () => {
+    if (triggerListGenAndItemSelect?.value && props.modelValue) {
+        setSelectedValue();
+        await getItemsToList();
+        triggerListGenAndItemSelect.value = false;
+    }
+});
+
+// ------------------- //
+// Computed properties //
+// ------------------- //
+
+const currentProgress = computed(() => {
+    if (fetchingDataLoader.value) return 0
+    if (!fetchedItemCount.value || !totalItemCount.value) return 0
+    return  Math.ceil(filteredItemCount.value / totalItemCount.value * 100)
+})
+
+function onScrollEnd() {
+    debouncedScrollEnd();
+}
+
+const debouncedScrollEnd = debounce(async () => {
+    console.log("NEAR BOTTOM OF SCROLLER")
+    // Only fetch new items at bottom of scroller if there is not any queryText
+    // Continued fetching of more items while there is queryText will be handled
+    // by the watcheffect function.
+    if (queryText.value) {
+        return
+    }
+    if (config.value.use_service && nsHasPID.value) {
+        if (isFetchingPage.value) return;
+        fetchNextPage(propClass.value)
+    }
+}, 1000);
+
+// trigger whenever lastSavedNode is updated, i.e. whenever a form is saved
+watch(
+    lastSavedNode,
+    async (savedNode) => {
+        if (savedNode) {
+            if (!openForms.at(-1).activatedInstancesSelectEditor) {
+                return;
+            }
+            // First check if the current component is also the activatedInstancesSelectEditor
+            // If not, do nothing
+            if (
+                openForms.at(-1).activatedInstancesSelectEditor.nodeshape_iri ==
+                    props.node_uid &&
+                openForms.at(-1).activatedInstancesSelectEditor.node_iri ==
+                    props.node_idx &&
+                openForms.at(-1).activatedInstancesSelectEditor.predicate_iri ==
+                    props.triple_uid &&
+                openForms.at(-1).activatedInstancesSelectEditor.predicate_idx ==
+                    props.triple_idx
+            ) {
+                // If this is the instancesSelectEditor instance that activated the recently saved
+                // and closed form, we want to set the selected instance as the saved node
+                // This is the format of savedNode:
+                // {
+                //     nodeshape_iri: nodeshape_iri,
+                //     node_iri: subject_iri
+                // }
+                // First, let's make sure the list is updated to include the recently saved node:
+                await getItemsToList();
+                fetchedItemCount.value = itemsToList.value.length;
+                // Then we need to set the selectedInstance. The itemsToList has items as objects,
+                // with value = quad.subject.value.
+                // We need to find the item that has the value being the same as the saved node's node_iri
+                // This holds for named node records. However, the process is different for blank node
+                // records since the introduction of the blank node deduplication process. In getItemsToList,
+                // the deduplication will assign a quad with a new blank node as subject to item.props.itemQuad.
+                // Hence the item value will not be the same anymore as logged by savedNode.node_iri. For
+                // blank nodes, we have to look at the subject value of all the relatedQuads, because they
+                // reflect the 'true' state before deduplication.
+                let inst = null
+                for (const listItem of itemsToList.value) {
+                    if (listItem.props.itemQuad.subject.termType === "NamedNode") {
+                        if (listItem.value == savedNode.node_iri) {
+                            inst = listItem;
+                            break;
+                        }
+                    } else {
+                        const originalBNid = Array.from(new Set(listItem.props.relatedQuads.map((x) => x.subject.value)))[0];
+                        if (originalBNid == savedNode.node_iri) {
+                            inst = listItem;
+                            break;
+                        }
+                    }
+                }
+                if (inst) {
+                    // we need to use selectItem so as to trigger processTempItem
+                    selectItem(inst)
+                } else {
+                    console.log(
+                        'A node was recently saved but it could not be found in the itemsToList and was therefore not set as the selectedItem'
+                    );
+                }
+                openForms.at(-1).activatedInstancesSelectEditor = null;
+                lastSavedNode.value = null;
+            } else {
+                console.log(
+                    'activatedInstancesSelectEditor is not the same as last saved node'
+                );
+            }
+        }
+    },
+    { immediate: true }
+);
+
+const selectedItemIcon = computed(() => {
+    if (subValues.value.selectedInstance) {
+        return getClassIcon(
+            toIRI(
+                subValues.value.selectedInstance.props[
+                    toCURIE(RDF.type.value, allPrefixes)
+                ],
+                allPrefixes
+            )
+        );
+    } else {
+        return null;
+    }
+});
+
+// --------- //
+// Functions //
+// --------- //
+
+function valueParser(value) {
+    // Parsing internalValue into ref values for separate subcomponent(s)
+    if (!itemsToList.value) {
+        return { selectedInstance: null };
+    }
+    var inst = findObjectByKey(itemsToList.value, 'value', value);
+    return { selectedInstance: inst ?? null };
+}
+
+function valueCombiner(values) {
+    // Determine internalValue from subvalues/subcomponents
+    return values.selectedInstance ? values.selectedInstance.value : null;
+}
+
+function selectItem(item) {
+    if (subValues.value.selectedInstance?.value == item.value) {
+        queryText.value = '';
+        menu.value = false;
+        return
+    }
+    processTempItem(item)
+    subValues.value.selectedInstance = item;
+    queryLabel.value = subValues.value.selectedInstance.props._prefLabel
+                ? subValues.value.selectedInstance.props._prefLabel
+                : (
+                    subValues.value.selectedInstance.props._displayLabel ?
+                    subValues.value.selectedInstance.props._displayLabel :
+                    '(selected item name unknown)'
+                )
+    queryText.value = '';
+    menu.value = false;
+}
+
+function editItem(item) {
+    processTempItem(item)
+    editInstanceItem(
+        {
+            quad: item.props.itemQuad,
+            value: item.value
+        }
+    )
+}
+
+function processTempItem(item) {
+    // First check if this is a temporary item (i.e. blank node copy)
+    // If it is, we need to:
+    // - create and link all related triple copies
+    // - replace the item.props.relatedQuads with the newly created quads
+    // - set isTemp flag to false:
+    // - add all quads to the graph
+    if (item.props.isTemp) {
+        const newRelatedQuads = item.props.relatedQuads.map(q => {
+            return quad(item.props.itemQuad.subject, q.predicate, q.object, q.graph);
+        });
+        item.props.relatedQuads = newRelatedQuads;
+        item.props.isTemp = false;
+        rdfDS.data.graph.addQuads(newRelatedQuads);
+    }
+}
+
+function handleAddItemClick(item) {
+    openForms.at(-1).activatedInstancesSelectEditor = {
+        nodeshape_iri: props.node_uid,
+        node_iri: props.node_idx,
+        predicate_iri: props.triple_uid,
+        predicate_idx: props.triple_idx,
+    };
+    selectedAddItemShapeIRI.value = item.value;
+    newNodeIdx.value = crypto.randomUUID();
+    console.log('New form shape IRI');
+    console.log(selectedAddItemShapeIRI.value);
+    console.log('New form node IRI');
+    console.log(newNodeIdx.value);
+    addItemMenu.value = false;
+    menu.value = false;
+    addForm(selectedAddItemShapeIRI.value, newNodeIdx.value, 'new');
+}
+
+
+function handleFilterItemClick(item) {
+    if (item) {
+        item.checked = !item.checked;
+        classFilterUpdated.value += 1;
+    }
+    console.log(checkBoxFilteredItems.value)
+}
+
+function prepareItem(myQuad, isTemp = false) {
+    return {
+        title: myQuad.subject.value,
+        value: myQuad.subject.value,
+        props: {
+            isTemp: isTemp,
+            itemQuad: myQuad,
+            relatedQuads: [],
+            classIRI: myQuad.object.value,
+            subtitle: toCURIE(myQuad.object.value, allPrefixes),
+            hasPrefLabel: false,
+            hasDisplayLabel: false,
+            hasNote: false,
+            itemValue: myQuad.subject.value,
+        },
+    };
+}
+
+function addItemParts(item, myQuad, relatedQuads) {
+    let labelTemplate = hasConfigDisplayLabel(myQuad.object.value, allPrefixes, configVarsMain)
+    let labelParts = {}
+    // add item properties: predicates and objects
+    // isolate properties used in label generation, if applicable
+    item.props.relatedQuads = relatedQuads;
+    relatedQuads.forEach((trip) => {
+        let predCuri = toCURIE(trip.predicate.value, allPrefixes)
+        item.props[predCuri] = toCURIE(trip.object.value, allPrefixes);
+        if (trip.predicate.value == SKOS.prefLabel.value) {
+            item.props.hasPrefLabel = true;
+            item.props._prefLabel = trip.object.value;
+        }
+        if (trip.predicate.value == SKOS.note.value) {
+            item.props.hasNote = true;
+            item.props._note = trip.object.value;
+        }
+        // If current predicate is used for display label generation, store it
+        if ( labelTemplate && labelTemplate.includes(predCuri)) {
+            if (!labelParts[predCuri]) {
+                labelParts[predCuri] = []
+            }
+            labelParts[predCuri].push(trip.object.value)
+        }
+    });
+    // Generate display label if possible
+    if (labelTemplate) {
+        let displayLabel = getConfigDisplayLabel(labelTemplate, labelParts, configVarsMain, rdfDS, allPrefixes)
+        if (displayLabel) {
+            item.props.hasDisplayLabel = true;
+            item.props._displayLabel = displayLabel;
+        }
+    }
+}
+
+function getSingleItemToList(subjectValue) {
+    // This function is called to populate the dropdown list with one item
+    // when the modelvalue of this component exists on mounting. This
+    // helps to save time by not calling getItemsToList, which does EVERYTHING
+    // and takes much time to do so.
+    // This function should only be called once the fetchFromService in
+    // onBeforeMount resolves, so that we can be sure that the quad is locally
+    // available on the graph store, if it exists at all.
+    // First we need a quad from the graph with:
+    // - model value as subject
+    // - namedNode(RDF.type.value) as predicate,
+    // - propClass.value as object
+    const myQuads = rdfDS.data.graph.getQuads(
+        nsHasPID.value ? namedNode(subjectValue) : blankNode(subjectValue),
+        namedNode(RDF.type.value),
+        null,
+        null
+    );
+    let myQuad
+    if (Array.isArray(myQuads) && myQuads.length == 1) {
+        myQuad = myQuads[0];
+    } else {
+        console.log(`InstancesSelectEditor: model value set ('${subjectValue}') but no associated quad found; returning empty list of items.`)
+        itemsToList.value = []
+        return
+    }
+    var relatedTrips = rdfDS.getSubjectTriples(myQuad.subject);
+    var item = prepareItem(myQuad);
+    addItemParts(item, myQuad, relatedTrips)
+    itemsToList.value = [item]
+}
+
+async function getItemsToList() {
+    // ---
+    // The goal of this method is to populate the list of items for the
+    // InstancesSelectEditor
+    // ---
+    // The allclass_array already contains the base class from 
+    let combinedQuads = [];
+    for (const cl of allclass_array) {
+        const mySubArray = rdfDS.getLiteralAndNamedNodes(
+            namedNode(RDF.type.value),
+            cl,
+            allPrefixes
+        )
+        combinedQuads = combinedQuads.concat(mySubArray);
+    }
+    // Finally, create list items from quads
+    var itemsToListArr = [];
+    const trackedFingerprints = new Set();
+    // If there is already a selected item, we need to add it first.
+    // This is necessary to deal with the later process of deduplicating
+    // blank node (i.e. association class) records. We want the already selected
+    // item to remain in the list even if the list is regenerated, so that the UI
+    // behaves consistently. Without this step, the selected item display will
+    // degrade to only showing the blank node id once the dropdown is clicked on.
+    const subjectValues = combinedQuads.map(q => q.subject.value);
+    let foundQI = null;
+    if (subValues.value.selectedInstance) {
+        // props.modelValue shows that the value exists from the formData POV,
+        // while subValues.value.selectedInstance shows that the associated
+        // item actually exists and is selected in the list.
+        // If we use the former, we are working from ground truth,
+        // If we use the latter, we already have the item to work with.
+        // I will go with the latter until some problem suggests otherwise.
+        let subjectValue = subValues.value.selectedInstance.value;
+        foundQI = subjectValues.indexOf(subjectValue)
+        if (foundQI >= 0) {
+            itemsToListArr.push(subValues.value.selectedInstance);
+            const QIfingerprint = await hashSubgraph(subValues.value.selectedInstance.props.relatedQuads);
+            trackedFingerprints.add(QIfingerprint);
+        }
+    }
+    for (const [i, qd] of combinedQuads.entries()) {
+        // Do not process an already processed quad
+        if (foundQI !== null && foundQI == i) continue;
+
+        var relatedTrips = rdfDS.getSubjectTriples(qd.subject);
+        let activeQuad = qd;
+        let activeRelatedTrips = relatedTrips;
+        let isTemp = false;
+        if (qd.subject.termType === 'BlankNode') {
+            // Compare with previously seen subgraphs
+            const fingerprint = await hashSubgraph(relatedTrips);
+            if (trackedFingerprints.has(fingerprint)) {
+                // This means a structurally similar blank node item was already
+                // added to the list of items, and we don't want to add a duplicate
+                continue;
+            } else {
+                // The first blank node item with this unique structure.
+                // We keep track of that fact, and also continue adding the item.
+                trackedFingerprints.add(fingerprint);
+                // However: we want to add a structurally similar item but NOT
+                // with the same ID. Therefore we need to create a new blank node
+                // that serves as the ID of the new item. We use the same related
+                // qauds that were already calculated for the item, so as to minimize
+                // load. We only create and link to new related quads once actually
+                // necessary, which is when the user selects the item, or edits it
+                // from the list. We use the isTemp flag to keep track of the fact
+                // that this is a "duplicate" blank node, so that we can handle it
+                // accordingly when required.
+                isTemp = true;
+                activeQuad = quad(blankNode(), qd.predicate, qd.object, null);
+            }
+        }
+        var item = prepareItem(activeQuad, isTemp);
+        addItemParts(item, activeQuad, activeRelatedTrips)
+        itemsToListArr.push(item);
+    }
+
+    itemsToList.value = itemsToListArr;
+}
+
+// filter and sort
+const filteredItems = computed(() => {
+    if (!itemsToList.value.length) return [];
+    const searchText = queryText.value.toLowerCase();
+    return [...itemsToList.value]
+        .filter((item) => {
+            if (searchText.length == 0) return true;
+            return searchableFields.some((field) => {
+                if (!(field in item.props)) return false;
+                const value = item.props[field];
+                return value?.toString().toLowerCase().includes(searchText);
+            });
+        })
+        .sort((a, b) => {
+            function getSortValue(item) {
+                for (const field of searchableFields) {
+                    const value = item.props[field];
+                    if (value) return value.toString().toLowerCase();
+                }
+                return null;
+            }
+            const aVal = getSortValue(a);
+            const bVal = getSortValue(b);
+            // if both are missing labels, consider them equal
+            if (!aVal && !bVal) return 0;
+            // if only a is missing, a goes first
+            if (!aVal) return -1;
+            // if only b is missing, b goes first
+            if (!bVal) return 1;
+            // if sortvalue starts with http, it goes after all others
+            const aIsHttp = aVal.startsWith("http");
+            const bIsHttp = bVal.startsWith("http");
+            if (aIsHttp && !bIsHttp) return 1;   // a goes after b
+            if (!aIsHttp && bIsHttp) return -1;  // a goes before b
+            // otherwise compare alphabetically
+            return aVal.localeCompare(bVal);
+        });
+});
+
+const checkBoxFilteredItems = computed(() => {
+    classFilterUpdated.value
+    let filterBy = filterClassList.filter(item => item.checked).map(item => item.value);
+    return filteredItems.value.filter(item => {
+        return filterBy.includes(item.props.classIRI)
+    })
+})
+
+const checkBoxFilterUse = computed(() => {
+    classFilterUpdated.value
+    const total = filterClassList.length;
+    let filterBy = filterClassList.filter(item => item.checked).map(item => item.value);
+    if (filterBy.length == total) {
+        return 'all'
+    } else if (filterBy.length == 0) {
+        return 'none'
+    } else {
+        return 'some'
+    }
+})
+
+const filteredItemCount = computed(() => {
+    return checkBoxFilteredItems.value.length;
+})
+
+
+watchEffect(async () => {
+    if (config.value?.use_service &&
+        queryText.value && queryText.value.length >= configVarsMain.serviceConstrainedSearch.min_characters &&
+        firstPageFetched(propClass.value, queryText.value) &&
+        hasUnfetchedPages(propClass.value, queryText.value)) {
+        // Only trigger fetch if not already fetching
+        if (!isFetchingPage.value) {
+            await fetchNextPage(propClass.value, queryText.value);
+        }
+    }
+});
+
+async function fetchNextPage(iri, matchText='') {
+    if (!hasUnfetchedPages(iri, matchText)) {
+        console.log(`Does not have unfetched pages: ${iri}`)
+        return [];
+    }
+    isFetchingPage.value = true;
+    let result = null
+    try {
+        result = await fetchFromService(
+            'get-paginated-records-constrained',
+            iri,
+            allPrefixes,
+            matchText
+        );
+        if (result.status === null) {
+            console.error(result.error);
+        }
+        await getItemsToList();
+    } catch (err) {
+        console.error(err);
+    } finally {
+        isFetchingPage.value = false;
+        return result
+    }   
+}
+
+watch(queryText, (newVal) => {
+    // clear previous timers
+    clearTimeout(debounceTypingTimer);
+    // wait X ms after last keystroke
+    debounceTypingTimer = setTimeout(() => {
+        onTypingPause(newVal);
+    }, configVarsMain.serviceConstrainedSearch.typing_debounce);
+});
+
+async function onTypingPause(textVal) {
+    if (!queryText.value || queryText.value.length < configVarsMain.serviceConstrainedSearch.min_characters ) return;
+    if (config.value?.use_service && nsHasPID.value) {
+        await fetchNextPage(propClass.value, queryText.value);
+    }
+}
+
+
+</script>
+
+<style scoped>
+.info-tooltip {
+    cursor: pointer;
+}
+.menu-progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+.after-loader {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.progress-text {
+    font-size: xx-small;
+}
+</style>
diff --git a/src/components/WizardEditor.vue b/src/components/WizardEditor.vue
index bf9e63b..8430320 100644
--- a/src/components/WizardEditor.vue
+++ b/src/components/WizardEditor.vue
@@ -4,49 +4,50 @@
         <v-card-text>
             {{ props.wizardConfig.description }}
         </v-card-text>
-        <v-card-text>
+        <v-card-text class="text-caption">
             <v-form
                 ref="wizardForm"
                 v-model="wizardFormValid"
                 validate-on="lazy input"
                 @submit.prevent="saveForm()"
             >
-                <v-row no-gutters align="stretch" v-for="input in props.wizardConfig.inputs" :key="input.prop">
-                    <v-col cols="4">
-                        <span v-if="input.description">
-                            <v-tooltip  :text="input.description" location="end top" origin="start bottom">
-                                <template v-slot:activator="{ props }">
-                                    <span v-bind="props">{{ input.name }}</span>
-                                </template>
-                            </v-tooltip>
-                        </span>
-                        <span v-else>
-                            {{ input.name }}
-                        </span>
-                    </v-col>
-                    <v-col>
-                        <span >
-                        <span v-if="input.type == 'text'">
-                            <v-text-field v-model="modelVals[input.prop]" density="compact" variant="outlined" :label="input.placeholder ? input.placeholder : 'add text'" hide-details="auto" :rules="rules[input.prop]"></v-text-field>
-                        </span>
-                        <span v-else-if="input.type == 'text-paragraph'">
-                            <v-textarea v-model="modelVals[input.prop]" density="compact" variant="outlined" :label="input.placeholder ? input.placeholder : 'add text'" hide-details="auto" :rules="rules[input.prop]"></v-textarea>
-                        </span>
-                        <span v-else-if="input.type == 'boolean'">
-                            <v-switch v-model="modelVals[input.prop]" density="compact" variant="outlined" :label="input.placeholder ? input.placeholder : 'select value'" inset hide-details="auto" :rules="rules[input.prop]"></v-switch>
-                        </span>
-                        <span v-else-if="input.type == 'upload'">
-                            <GitAnnexUploader4Wiz
-                                :config="uploadConfig"
-                                v-model="modelVals[input.prop]"
-                            ></GitAnnexUploader4Wiz>
-                        </span>
-                        <span v-else>
-                            kaaaaaaaaa
-                        </span>
-                    </span>
-                    </v-col>
-                </v-row>
+                <span v-if="showComponent && componentPlugin && componentName">
+                    <component
+                        :is="plugins[componentPlugin].components[componentName]"
+                        v-model:modelVals="modelVals"
+                        :config="props.wizardConfig"
+                        @init-form="initForm(props.wizardConfig)"
+                    />
+                </span>
+                <span v-else>
+                    <div class="fill-height">
+                        <v-row no-gutters align="stretch" v-for="input in props.wizardConfig.inputs" :key="input.prop" class="wizard-input-row">
+                            <v-col cols="3">
+                                <span v-if="input.type !== 'button'">
+                                    <span v-if="input.description">
+                                        <v-tooltip  :text="input.description" location="end top" origin="start bottom">
+                                            <template v-slot:activator="{ props }">
+                                                <span v-bind="props">{{ input.name }}</span>
+                                            </template>
+                                        </v-tooltip>
+                                    </span>
+                                    <span v-else>
+                                        {{ input.name }}
+                                    </span>
+                                </span>
+                            </v-col>
+                            <v-col>
+                                <WizardEditorInput
+                                    :input="input"
+                                    v-model="modelVals[input.prop]"
+                                    :rules="rules[input.prop]"
+                                    :uploadConfig="uploadConfig"
+                                    @button-click="callInputBtnFunction"
+                                />
+                            </v-col>
+                        </v-row>
+                    </div>
+                </span>
             </v-form>
         </v-card-text>
         <v-card-actions>
@@ -74,7 +75,7 @@
 
 <script setup>
 import { reactive, ref, toRaw, watch, inject} from 'vue';
-import GitAnnexUploader4Wiz from '@/components/GitAnnexUploader4Wiz.vue'
+import WizardEditorInput from './WizardEditorInput.vue'
 
 // Define component props
 const props = defineProps({
@@ -90,6 +91,11 @@ const rules = reactive({});
 const baseRules = {}
 const configVarsMain = inject('configVarsMain');
 const uploadConfig = configVarsMain.gitannexP2phttpConfigWizard ?? {};
+const plugins = inject('runtimePlugins')
+const rdfDS = inject('rdfDS')
+const showComponent = ref(false);
+const componentPlugin = ref(null);
+const componentName = ref(null);
 
 watch(
     () => props.wizardConfig,
@@ -102,56 +108,76 @@ function cancelForm() {
 }
 
 function initForm(config) {
+    if (props.wizardConfig?.component) {
+        let parts = props.wizardConfig.component.split(':');
+        if (parts.length == 2 && plugins?.[parts[0]]?.components?.[parts[1]]) {
+            showComponent.value = true;
+            componentPlugin.value = parts[0];
+            componentName.value = parts[1];
+        }
+    }
     Object.keys(modelVals).forEach(k => delete modelVals[k])
     Object.keys(rules).forEach(k => delete rules[k])
     if (!config?.inputs) return
     for (const input of config.inputs) {
         // Initialize model value per input
-        modelVals[input.prop] = null
-        // Set up validation rules
-        rules[input.prop] = []
-        // Add base rule if it exists
-        if (baseRules[input.type]) {
-            rules[input.prop].push(baseRules[input.type])
+        modelVals[input.prop] = initModelValue(input)
+        // Initialize rules per input
+        initInputRules(input, rules)
+    }
+}
+
+
+function initModelValue(input) {
+    // multi-valued → empty array
+    if (input.multi_valued) {
+        return []
+    }
+    // object → empty object
+    if (input.type === 'object') {
+        return {}
+    }
+    // primitive
+    return input.default ?? null
+}
+
+function initInputRules(input, rules) {
+    rules[input.prop] = []
+    if (baseRules[input.type]) {
+        rules[input.prop].push(baseRules[input.type])
+    }
+    if (input.required) {
+        rules[input.prop].push(v => !!v || 'This is a required field')
+    }
+    if (input.pattern) {
+        const { jsFlags, jsPattern } = getJsRegex(input.pattern)
+        let anchored = jsPattern
+        if (!(jsPattern.startsWith('^') && jsPattern.endsWith('$'))) {
+            anchored = `^${jsPattern}$`
         }
-        // Add required rule
-        if (input.required) {
-            rules[input.prop].push((value) => {
-                if (value) return true;
-                return 'This is a required field';
-            });
+        try {
+            const regex = new RegExp(anchored, jsFlags)
+            const message = input.message || 'Input does not match the required format'
+            rules[input.prop].push(v => !v || regex.test(v) || message)
+        } catch (err) {
+            console.error(`Invalid pattern "${input.pattern}"`, err)
         }
-        // Add pattern matching rule
-        if (input.pattern) {
-            const {jsFlags, jsPattern} = getJsRegex(input.pattern)
-            // anchor so it must match the entire value
-            let anchored = jsPattern;
-            if (!(jsPattern.startsWith('^') && jsPattern.endsWith('$'))) {
-                anchored = `^${jsPattern}$`;
-            }
-            let regex;
-            try {
-                regex = new RegExp(anchored, jsFlags);
-                const message = input.message ? input.message : 'Input does not match the required format';
-                rules[input.prop].push((v) => {
-                    if (!v) return true;
-                    return regex.test(v) || message;
-                });
-            } catch (err) {
-                console.error(`Invalid pattern “${input.pattern}”:`, err);
-            }
+    }
+    // recurse into objects
+    if (input.type === 'object') {
+        for (const child of input.inputs || []) {
+            initInputRules(child, rules)
         }
     }
 }
 
-// Functions
 async function saveForm() {
     try {
         // Await the validation result
         const validationResult = await wizardForm.value.validate();
         if (validationResult.valid) {
             // If the form is valid, proceed to emit event with data
-            emit('save', {...toRaw(modelVals), _template: toRaw(props.wizardConfig.template)})
+            emit('save', {...toRaw(modelVals), _template: toRaw(props.wizardConfig.template), _template_type: toRaw(props.wizardConfig.template_type)})
         } else {
             console.log('Still some wizard form validation errors...');
             validationResult.errors.forEach((error) => {
@@ -163,7 +189,85 @@ async function saveForm() {
     }
 }
 
-function resetForm() {
-    Object.keys(modelVals).forEach(k => modelVals[k] = null)
+async function resetForm() {
+    await wizardForm.value.reset()
+    const config = props.wizardConfig
+    if (!config?.inputs) return
+
+    for (const input of config.inputs) {
+        modelVals[input.prop] = initModelValue(input)
+    }
+}
+
+async function callInputBtnFunction(btn) {
+    if (!btn.on_click) {
+        let msg = "No 'on_click' action configured for button input in Wizard Editor"
+        console.error(msg)
+        alert(msg)
+        return;
+    }
+    if (!btn.on_click.call) {
+        let msg = "No 'call' function specified for button on_click in Wizard Editor"
+        console.error(msg)
+        alert(msg)
+        return;
+    }
+    // create data
+    const data = {
+        rdfDS: rdfDS,
+        ...toRaw(modelVals)
+    }
+
+    let btnResult;
+    if (btn.on_click.plugin) {
+        btnResult = await plugins[btn.on_click.plugin][btn.on_click.call](data)
+    } else {
+        let fn = btn.on_click.call
+        btnResult = await fn(data)
+    }
+    if (btnResult) {
+        applyResultToModel(props.wizardConfig.inputs, modelVals, btnResult)
+    }
+}
+
+function applyResultToModel(inputs, model, result) {
+    if (!result || typeof result !== 'object') return
+    for (const input of inputs) {
+        const prop = input.prop
+        if (!(prop in result)) continue;
+        const value = result[prop]
+        if (value === undefined || value === null) continue;
+        // multi-valued
+        if (input.multi_valued) {
+            if (!Array.isArray(value)) continue;
+            model[prop] = value.map(item => {
+                if (input.type === 'object') {
+                    const obj = initModelValue({ ...input, multi_valued: false })
+                    applyResultToModel(input.inputs || [], obj, item)
+                    return obj
+                }
+                return item
+            })
+            continue;
+        }
+        // object
+        if (input.type === 'object') {
+            if (typeof value !== 'object') continue
+            if (!model[prop]) {
+                model[prop] = initModelValue(input)
+            }
+            applyResultToModel(input.inputs || [], model[prop], value)
+            continue;
+        }
+        // primitive
+        model[prop] = value
+    }
 }
 </script>
+
+<style scoped>
+.wizard-input-row {
+    padding-bottom: 0.2em;
+    margin-bottom: 0.2em;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/WizardEditorInput.vue b/src/components/WizardEditorInput.vue
new file mode 100644
index 0000000..696c9e7
--- /dev/null
+++ b/src/components/WizardEditorInput.vue
@@ -0,0 +1,42 @@
+<template>
+    <WizardEditorInputArray
+        v-if="input.multi_valued"
+        :input="input"
+        v-model="value"
+        :rules="rules"
+        :uploadConfig="uploadConfig"
+        @button-click="emit('button-click',$event)"
+    />
+    <WizardEditorInputObject
+        v-else-if="input.type === 'object'"
+        :input="input"
+        v-model="value"
+    />
+    <WizardEditorInputPrimitive
+        v-else
+        :input="input"
+        v-model="value"
+        :rules="rules"
+        :uploadConfig="uploadConfig"
+        @button-click="emit('button-click',$event)"
+    />
+</template>
+
+
+<script setup>
+import WizardEditorInputPrimitive from './WizardEditorInputPrimitive.vue'
+import WizardEditorInputArray from './WizardEditorInputArray.vue'
+import WizardEditorInputObject from './WizardEditorInputObject.vue'
+
+const props = defineProps({
+    input: Object,
+    rules: Array,
+    uploadConfig: Object
+})
+
+const value = defineModel();
+
+const emit = defineEmits(['button-click'])
+
+</script>
+
diff --git a/src/components/WizardEditorInputArray.vue b/src/components/WizardEditorInputArray.vue
new file mode 100644
index 0000000..ea98174
--- /dev/null
+++ b/src/components/WizardEditorInputArray.vue
@@ -0,0 +1,68 @@
+<template>
+    <v-row no-gutters v-for="(value,idx) in modelValue" :key="idx" :class="idx + 1 == modelValue.length ? '' : 'array-input-row'">
+        <v-col>
+            <span v-if="modelValue.length > 1" class="element-idx">{{ idx + 1 }}</span>
+            <WizardEditorInput
+                :input="{...input, multi_valued: false}"
+                v-model="modelValue[idx]"
+                @button-click="emit('button-click',$event)"
+            />
+        </v-col>
+        <v-col cols="auto">
+            &nbsp;
+            <v-btn
+                v-if="modelValue.length>1"
+                icon="mdi-delete-outline"
+                @click="remove(idx)"
+                rounded="0"
+                elevation="1"
+                density="compact"
+            />
+            &nbsp;
+            <v-btn
+                v-if="idx===modelValue.length-1"
+                icon="mdi-plus-circle-outline"
+                @click="add"
+                rounded="0"
+                elevation="1"
+                density="compact"
+            />
+        </v-col>
+    </v-row>
+</template>
+
+<script setup>
+import WizardEditorInput from './WizardEditorInput.vue'
+
+const props = defineProps({
+    input: Object,
+})
+
+const modelValue = defineModel();
+
+const emit = defineEmits(['button-click'])
+
+function add() {
+    modelValue.value = [...(modelValue.value || []), null]
+}
+
+function remove(idx) {
+    const copy = [...modelValue.value]
+    copy.splice(idx,1)
+    modelValue.value = copy;
+}
+</script>
+
+<style scoped>
+.array-input-row {
+    padding-bottom: 0.2em;
+    margin-bottom: 0.2em;
+    border-bottom: 1px solid grey;
+}
+.element-idx {
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    border: 1px solid grey;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/WizardEditorInputObject.vue b/src/components/WizardEditorInputObject.vue
new file mode 100644
index 0000000..715f25f
--- /dev/null
+++ b/src/components/WizardEditorInputObject.vue
@@ -0,0 +1,40 @@
+<template>
+    <v-row no-gutters align="center" v-for="child in input.inputs" :key="child.prop" >
+        <v-col cols="4">
+            <span v-if="child.description">
+                <v-tooltip  :text="child.description" location="end top" origin="start bottom">
+                    <template v-slot:activator="{ props }">
+                        <span v-bind="props">{{ child.name }}</span>
+                    </template>
+                </v-tooltip>
+            </span>
+            <span v-else>
+                {{ child.name }}
+            </span>
+        </v-col>
+        <v-col>
+            <WizardEditorInput
+                :input="child"
+                :model-value="modelValue?.[child.prop]"
+                @update:modelValue="updateField(child.prop, $event)"
+            />
+        </v-col>
+    </v-row>
+</template>
+
+<script setup>
+import WizardEditorInput from './WizardEditorInput.vue'
+
+const props = defineProps({
+  input: Object,
+})
+
+const modelValue = defineModel();
+
+function updateField(prop, val) {
+    modelValue.value = {
+        ...(modelValue.value || {}),
+        [prop]: val
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/WizardEditorInputPrimitive.vue b/src/components/WizardEditorInputPrimitive.vue
new file mode 100644
index 0000000..87821f7
--- /dev/null
+++ b/src/components/WizardEditorInputPrimitive.vue
@@ -0,0 +1,66 @@
+<template>
+    <v-text-field
+        v-if="input.type === 'text'"
+        v-model="value"
+        :placeholder="input.placeholder"
+        :rules="rules"
+        variant="outlined"
+        density="compact"
+        hide-details="auto"
+        
+    />
+    <v-textarea
+        v-else-if="input.type === 'text-paragraph'"
+        v-model="value"
+        :rules="rules"
+        variant="outlined"
+        density="compact"
+        hide-details="auto"
+        
+    />
+    <v-switch
+        v-else-if="input.type === 'boolean'"
+        v-model="value"
+        :rules="rules"
+        density="compact"
+        hide-details="auto"
+        
+    />
+    <GitAnnexUploader4Wiz
+        v-else-if="input.type === 'upload'"
+        v-model="value"
+        :config="uploadConfig"
+    />
+    <v-btn
+        v-else-if="input.type === 'button'"
+        @click="emit('button-click',input)"
+        density="compact"
+        hide-details="auto"
+    >
+        {{ input.name }}
+    </v-btn>
+</template>
+
+<script setup>
+import GitAnnexUploader4Wiz from '@/components/GitAnnexUploader4Wiz.vue'
+
+const props = defineProps({
+  input: Object,
+  rules: Array,
+  uploadConfig: Object
+})
+
+const value = defineModel();
+
+const emit = defineEmits(['button-click'])
+</script>
+
+<style scoped>
+:deep(.v-field__input) {
+  font-size: 0.75rem;
+}
+
+:deep(.v-label) {
+  font-size: 0.75rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/WizardGroup.vue b/src/components/WizardGroup.vue
index 8b8a4b9..9cc9314 100644
--- a/src/components/WizardGroup.vue
+++ b/src/components/WizardGroup.vue
@@ -16,7 +16,7 @@
                 </span>
             </template>
         </v-tooltip>
-        <v-dialog v-model="wizardDialog" max-width="800px">
+        <v-dialog v-model="wizardDialog" max-width="1000px">
             <WizardEditor :wizardConfig="selectedWizard" @save="saveWizard" @cancel="handleWizardCancel"></WizardEditor>
         </v-dialog>
     </span>
diff --git a/src/composables/configuration.js b/src/composables/configuration.js
index 32ec641..aef57fa 100644
--- a/src/composables/configuration.js
+++ b/src/composables/configuration.js
@@ -311,6 +311,9 @@ export function useConfig(url) {
         if (configVarsMain.content && Object.keys(configVarsMain.content).length > 0) {
             for (const src of Object.keys(configVarsMain.content)) {
                 configVarsMain.content[src].value = await loadContent(configVarsMain.content[src].url, 'text')
+                if (configVarsMain.content[src].url.includes('nunjucks')) {
+                    configVarsMain.content[src].type = 'nunjucks';
+                }
             }
         }
     }
diff --git a/src/composables/useNunjucks.js b/src/composables/useNunjucks.js
new file mode 100644
index 0000000..cc166c8
--- /dev/null
+++ b/src/composables/useNunjucks.js
@@ -0,0 +1,23 @@
+import nunjucks from 'nunjucks'
+
+const env = nunjucks.configure({
+    autoescape: false,
+    throwOnUndefined: true,
+    trimBlocks: true,
+    lstripBlocks: true
+})
+
+env.addFilter('ttl', str =>
+  `"${String(str).replace(/"/g, '\\"')}"`
+)
+
+env.addGlobal('_randomUUID', () => crypto.randomUUID())
+
+export function useNunjucks() {
+    function fillNunjucksTemplate(template, params) {
+        return env.renderString(template, params)
+    }
+    return {
+        fillNunjucksTemplate
+    }
+}
\ No newline at end of file
diff --git a/src/composables/useWizard.js b/src/composables/useWizard.js
index 26fb402..3090fe4 100644
--- a/src/composables/useWizard.js
+++ b/src/composables/useWizard.js
@@ -1,9 +1,11 @@
 import { ref, reactive } from "vue";
-import { getContent, fillStringTemplate, findObjectByKey, findObjectIndexByKey, nodeShapeHasProperty, getIcon} from "@/modules/utils";
+import { getContent, fillStringTemplate, findObjectByKey, findObjectIndexByKey, nodeShapeHasProperty, getIcon, getContentType} from "@/modules/utils";
 import { toCURIE, toIRI } from "shacl-tulip";
 import { RDF } from "@/modules/namespaces";
 import { DataFactory } from 'n3';
 const { namedNode, quad } = DataFactory;
+import { useNunjucks } from "@/composables/useNunjucks";
+const { fillNunjucksTemplate } = useNunjucks();
 
 export function showWizardGroup(configVarsMain, context, classUri, allPrefixes, shapesDS) {
     console.log("Checking if wizard group should be shown")
@@ -54,6 +56,7 @@ export function useWizard() {
             for (const wizard of configVarsMain.wizardEditorSelection?.[classCurie]?.[context]) {
                 console.log(`adding wizard '${wizard}' for class '${classCurie}' and context '${context}'`)
                 wizardEditors[wizard] = configVarsMain.wizardEditors[wizard]
+                wizardEditors[wizard].template_type = getContentType(configVarsMain.content, wizardEditors[wizard].template)
                 wizardEditors[wizard].template = getContent(configVarsMain.content, wizardEditors[wizard].template)
                 wizardEditors[wizard].iconFig = getIcon(wizardEditors[wizard].icon, configVarsMain)
             }
@@ -66,6 +69,7 @@ export function useWizard() {
                     for (const wizard of configVarsMain.wizardEditorSelection?._slots[slot][context]) {
                         if (wizard in wizardEditors) continue;
                         wizardEditors[wizard] = configVarsMain.wizardEditors[wizard]
+                        wizardEditors[wizard].template_type = getContentType(configVarsMain.content, wizardEditors[wizard].template)
                         wizardEditors[wizard].template = getContent(configVarsMain.content, wizardEditors[wizard].template)
                         wizardEditors[wizard].iconFig = getIcon(wizardEditors[wizard].icon, configVarsMain)
                     }
@@ -95,7 +99,12 @@ export function useWizard() {
             wizardData.pid = subject_uri;
         }
         // Now we fill string template
-        let newTTL = fillStringTemplate(wizardData._template, wizardData)
+        let newTTL
+        if (wizardData._template_type == 'nunjucks') {
+            newTTL = fillNunjucksTemplate(wizardData._template, wizardData)
+        } else {
+            newTTL = fillStringTemplate(wizardData._template, wizardData)
+        }
         // And then parse TTL, adding quads to graph data
         let newQuads = await rdfDS.parseTTLandDedup(newTTL);
         rdfDS.triggerReactivity();
diff --git a/src/modules/namespaces.js b/src/modules/namespaces.js
index 5c52b93..0f28ba9 100644
--- a/src/modules/namespaces.js
+++ b/src/modules/namespaces.js
@@ -12,7 +12,7 @@ export const DLDIST = namespace(
 export const DLTHING = namespace(
     'https://concepts.datalad.org/s/thing/unreleased/'
 );
-export const DLTHINGS = namespace('https://concepts.datalad.org/s/things/v1/');
+export const DLTHINGS = namespace('https://concepts.datalad.org/s/things/v2/');
 export const DLTYPES = namespace(
     'https://concepts.datalad.org/s/types/v1/'
 );
diff --git a/src/modules/utils.js b/src/modules/utils.js
index e959dd8..bcc683a 100644
--- a/src/modules/utils.js
+++ b/src/modules/utils.js
@@ -662,6 +662,14 @@ export function getContent(content, key) {
     }
 }
 
+export function getContentType(content, key) {
+    if (key.startsWith('content:')) {
+        let contentKey = key.replace('content:','')
+        return content[contentKey].type
+    }
+    return undefined
+}
+
 export function fillStringTemplate(template, params) {
     return template.replace(/\{([a-zA-Z0-9_.]+)\}/g, (match, keyPath) => {
         if (keyPath === '_randomUUID') {
diff --git a/src/plugins/index.js b/src/plugins/index.js
index f86d509..0fbe4a8 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -6,7 +6,9 @@
 
 // Plugins
 import vuetify from './vuetify';
+import runtimePlugins from './runtime-plugins';
 
 export function registerPlugins(app) {
     app.use(vuetify);
-}
+    app.use(runtimePlugins)
+}
\ No newline at end of file
diff --git a/src/plugins/runtime-plugins.js b/src/plugins/runtime-plugins.js
new file mode 100644
index 0000000..ac195a9
--- /dev/null
+++ b/src/plugins/runtime-plugins.js
@@ -0,0 +1,44 @@
+// Grab all runtime plugin paths
+const modules = import.meta.glob('@/runtime-plugins/**/index.js', {
+  eager: true
+})
+const componentModules = import.meta.glob('@/runtime-plugins/**/*.vue', {
+  eager: true
+})
+const plugins = {}
+// store plugins in object
+for (const path in modules) {
+    const mod = modules[path]
+    // extract plugin name from path
+    const match = path.match(/runtime-plugins\/([^/]+)\/index\.js$/)
+    if (!match) continue
+    const pluginName = match[1]
+    // add plugin reference
+    if (!plugins[pluginName]) {
+        plugins[pluginName] = { api: {}, components: {} }
+    }
+    plugins[pluginName].api = mod
+}
+// store components in the same object
+for (const path in componentModules) {
+    const mod = componentModules[path]
+    // extract both plugin and component name from path
+    const match = path.match(/runtime-plugins\/([^/]+)\/(.+)\.vue$/)
+    if (!match) continue
+    const pluginName = match[1]
+    const componentName = match[2]
+    if (!plugins[pluginName]) {
+        plugins[pluginName] = { api: {}, components: {} }
+    }
+    const component = mod.default
+    plugins[pluginName].components[componentName] = component
+}
+
+// vue wants plugins to export the install function
+export default {
+    install(app) {
+        // make plugins available via dependency injection
+        app.provide('runtimePlugins', plugins)
+        // we don't (yet) register components globally; TODO?
+    }
+}
\ No newline at end of file