@schukai/monster 4.33.1 → 4.34.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.34.1] - 2025-07-14
+
+### Bug Fixes
+
+- Update node and pnpx binaries; Adjust image privacy handling
+
+
+
+## [4.34.0] - 2025-07-13
+
+### Add Features
+
+- Add dynamic tab management and URL hash synchronization
+
+
+
 ## [4.33.1] - 2025-07-12
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.33.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.34.1"}

package/source/components/content/viewer/message.mjs

@@ -121,7 +121,7 @@ class MessageContent extends CustomElement {
       },
 
       privacy: {
-        visible: true,
+        visible: false,
       },
 
       content: "",
@@ -364,7 +364,6 @@ class MessageContent extends CustomElement {
 
     this[contentContainerElementSymbol].setOption("content", htmlContent);
     this.setOption("message.attachments", attachments);
-
     this.setOption("message.parts", message?.parts || []);
 
     return this;
@@ -454,6 +453,7 @@ function replaceCidImages(htmlContent, replacements) {
   const parser = new DOMParser();
   const doc = parser.parseFromString(htmlContent, "text/html");
   const images = doc.querySelectorAll("img");
+  let hasPrivacyImage = false;
   images.forEach((img) => {
     const src = img.getAttribute("src");
     if (src && src.toLowerCase().startsWith("cid:")) {
@@ -469,7 +469,7 @@ function replaceCidImages(htmlContent, replacements) {
         img.classList.add("privacyImage");
         img.setAttribute("data-monster-privacy", "true");
         img.setAttribute("data-monster-privacy_origin-url", src);
-
+        hasPrivacyImage = true;
         // If the src is an HTTP URL, we can keep it as is
         img.setAttribute(
           "title",
@@ -482,6 +482,9 @@ function replaceCidImages(htmlContent, replacements) {
     }
   });
 
+  if (hasPrivacyImage) {
+    this.setOption("privacy.visible", true); // Show the privacy text if any images are marked as privacy
+  }
   // Serialize the modified document back to HTML
   const serializer = new XMLSerializer();
   return serializer.serializeToString(doc);

package/source/components/content/viewer/style/html.pcss

@@ -24,7 +24,7 @@ div[data-monster-role="content-container"] {
      
     appearance: none;
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z'/%3E%3C/svg%3E");
-    mask-size: 70%;
+    mask-size: 50%;
     mask-repeat: no-repeat;
     mask-position: center center;
     background-color: var(--monster-bg-color-primary-4);
@@ -35,7 +35,7 @@ div[data-monster-role="content-container"] {
      
     appearance: none;
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.112 5.112a3 3 0 0 0-.17.613C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13H11l-1-1H3.781C2.231 12 1 10.785 1 9.318c0-1.365 1.064-2.513 2.46-2.666l.446-.05v-.447q0-.113.018-.231zm2.55-1.45-.725-.725A5.5 5.5 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773a3.2 3.2 0 0 1-1.516 2.711l-.733-.733C14.498 11.378 15 10.626 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3c-.875 0-1.678.26-2.339.661z'/%3E%3Cpath d='m13.646 14.354-12-12 .708-.708 12 12z'/%3E%3C/svg%3E");
-    mask-size: 70%;
+    mask-size: 50%;
     mask-repeat: no-repeat;
     mask-position: center center;
     background-color: var(--monster-bg-color-primary-4);

package/source/components/content/viewer/stylesheet/html.mjs

@@ -24,7 +24,7 @@ const HtmlStyleSheet = new CSSStyleSheet();
 try {
   HtmlStyleSheet.insertRule(`
 @layer html { 
-div,img{transition:opacity .9s ease,transform .3s ease,filter .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-monster-role=content-container]{display:flex;flex-direction:column;height:100%;overflow:auto;position:relative;width:100%}.privacyImage{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}.notFoundImage,.privacyImage{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:70%;mask-size:70%;-o-object-fit:contain;object-fit:contain}.notFoundImage{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.112 5.112a3 3 0 0 0-.17.613C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13H11l-1-1H3.781C2.231 12 1 10.785 1 9.318c0-1.365 1.064-2.513 2.46-2.666l.446-.05v-.447q0-.113.018-.231zm2.55-1.45-.725-.725A5.5 5.5 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773a3.2 3.2 0 0 1-1.516 2.711l-.733-.733C14.498 11.378 15 10.626 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3c-.875 0-1.678.26-2.339.661z'/%3E%3Cpath d='m13.646 14.354-12-12 .708-.708 12 12z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.112 5.112a3 3 0 0 0-.17.613C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13H11l-1-1H3.781C2.231 12 1 10.785 1 9.318c0-1.365 1.064-2.513 2.46-2.666l.446-.05v-.447q0-.113.018-.231zm2.55-1.45-.725-.725A5.5 5.5 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773a3.2 3.2 0 0 1-1.516 2.711l-.733-.733C14.498 11.378 15 10.626 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3c-.875 0-1.678.26-2.339.661z'/%3E%3Cpath d='m13.646 14.354-12-12 .708-.708 12 12z'/%3E%3C/svg%3E\")} 
+div,img{transition:opacity .9s ease,transform .3s ease,filter .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-monster-role=content-container]{display:flex;flex-direction:column;height:100%;overflow:auto;position:relative;width:100%}.privacyImage{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}.notFoundImage,.privacyImage{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--monster-bg-color-primary-4);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:50%;mask-size:50%;-o-object-fit:contain;object-fit:contain}.notFoundImage{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.112 5.112a3 3 0 0 0-.17.613C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13H11l-1-1H3.781C2.231 12 1 10.785 1 9.318c0-1.365 1.064-2.513 2.46-2.666l.446-.05v-.447q0-.113.018-.231zm2.55-1.45-.725-.725A5.5 5.5 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773a3.2 3.2 0 0 1-1.516 2.711l-.733-.733C14.498 11.378 15 10.626 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3c-.875 0-1.678.26-2.339.661z'/%3E%3Cpath d='m13.646 14.354-12-12 .708-.708 12 12z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.112 5.112a3 3 0 0 0-.17.613C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13H11l-1-1H3.781C2.231 12 1 10.785 1 9.318c0-1.365 1.064-2.513 2.46-2.666l.446-.05v-.447q0-.113.018-.231zm2.55-1.45-.725-.725A5.5 5.5 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773a3.2 3.2 0 0 1-1.516 2.711l-.733-.733C14.498 11.378 15 10.626 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3c-.875 0-1.678.26-2.339.661z'/%3E%3Cpath d='m13.646 14.354-12-12 .708-.708 12 12z'/%3E%3C/svg%3E\")} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/components/layout/tabs.mjs

@@ -283,6 +283,99 @@ class Tabs extends CustomElement {
 		return "monster-tabs";
 	}
 
+	/**
+	 * This method is called internal and should not be called directly.
+	 * @param tabId
+	 * @returns {Tabs}
+	 */
+	removeTab(tabId) {
+		const tabs = this.getTabs();
+		for (const tab of tabs) {
+			if ((tab.getAttribute("id") === tabId || tab.getAttribute("data-monster-name") === tabId) && tab.hasAttribute("data-monster-removable")) {
+				tab.remove();
+				initTabButtons.call(this);
+				return this;
+			}
+		}
+		return this;
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 * @returns {[]}
+	 */
+	getTabs() {
+		const nodes = getSlottedElements.call(this);
+		const tabs = [];
+		for (const node of nodes) {
+			if (node instanceof HTMLElement) {
+				tabs.push(node);
+			}
+		}
+		return tabs;
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 * @param content
+	 * @param active
+	 * @param label
+	 * @param tabId
+	 * @param removable
+	 * @returns {Tabs}
+	 */
+	addTab(content,  {
+		active    = false,
+		label     = null,
+		tabId     = null,
+		removable = true
+	} = {}  ) {
+		const tab = document.createElement("div");
+		if (!isString(label) || label.trim() === "") {
+			label = this.getOption("labels.new-tab-label");
+		}
+		tab.setAttribute("data-monster-button-label" ,label);
+
+		if (!isString(tabId) || tabId.trim() === "") {
+			let thisID = this.getAttribute("id");
+			if (!thisID) {
+				thisID = new ID("tab").toString();
+			}
+
+			tabId = new ID(thisID).toString();
+		}
+
+		// check if id is already used
+		const existingTabs = this.getTabs();
+		for (const existingTab of existingTabs) {
+			if (existingTab.getAttribute("id") === tabId || existingTab.getAttribute("data-monster-name") === tabId) {
+				throw new Error(`Tab with id "${tabId}" already exists.`);
+			}
+		}
+
+
+		tab.setAttribute("id", tabId);
+
+		if (active === true) {
+			tab.classList.add("active");
+		}
+
+		tab.setAttribute(ATTRIBUTE_ROLE, "tab");
+
+		if(removable === true) {
+			tab.setAttribute("data-monster-removable", "true");
+		}
+
+		if(content instanceof HTMLElement) {
+			tab.appendChild(content);
+		} else if (isString(content)) {
+			tab.innerHTML = content;
+		}
+
+		this.appendChild(tab);
+		return this
+	}
+
 	/**
 	 * A function that activates a tab based on the provided name.
 	 *

package/source/components/layout/utils/attach-tabs-hash-sync.mjs

@@ -0,0 +1,166 @@
+import {
+  parseBracketedKeyValueHash,
+  createBracketedKeyValueHash,
+} from "../../../text/bracketed-key-value-hash.mjs";
+
+/**
+ * Synchronizes a <monster-tabs> instance with the URL hash,
+ * including active tab and all existing tab IDs.
+ *
+ * @param {HTMLElement} tabsEl   - The monster-tabs element
+ * @param {string} selector      - Hash selector name (e.g. "tabs", "tabs2")
+ * @param {string} activeKey     - Key for the active tab (default: "active")
+ * @param {string} allTabsKey    - Key for all tab IDs (default: "all")
+ */
+export function attachTabsHashSync(
+    tabsEl,
+    selector = "tabs",
+    activeKey = "active",
+    allTabsKey = "all",
+) {
+  if (!(tabsEl instanceof HTMLElement)) {
+    throw new TypeError("Expected a monster-tabs HTMLElement");
+  }
+
+  let lastKnownActiveTabId = null;
+  let lastKnownAllTabIds = [];
+
+  /**
+   * Reads active and all tab IDs from the URL hash.
+   * @returns {{activeTabId: string|null, allTabIds: string[]}}
+   */
+  function getTabStateFromHash() {
+    const hashObj = parseBracketedKeyValueHash(location.hash);
+    const tabsData = hashObj?.[selector] ?? {};
+    const activeTabId = tabsData[activeKey] ?? null;
+    const allTabIdsString = tabsData[allTabsKey] ?? "";
+    const allTabIds = allTabIdsString
+        .split(",")
+        .filter((id) => id.trim() !== "");
+    return { activeTabId, allTabIds };
+  }
+
+  /**
+   * Synchronizes tab state from hash on page load and hash changes.
+   */
+  function syncFromHash() {
+    const { activeTabId, allTabIds } = getTabStateFromHash();
+
+    // Sync active tab
+    if (activeTabId && activeTabId !== lastKnownActiveTabId) {
+      tabsEl.activeTab(activeTabId);
+      lastKnownActiveTabId = activeTabId;
+    }
+
+    // Sync all tabs (add/remove tabs based on hash)
+    const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+
+    // Add tabs that are in hash but not in DOM
+    for (const tabId of allTabIds) {
+      if (!currentTabs.includes(tabId)) {
+        // You'll need a way to get the label and content for new tabs
+        // This is a placeholder. You might fetch it or have a default.
+        // For existing tabs in the HTML, we're just ensuring they are present.
+        // For truly new tabs from the hash, you'd need their content/label.
+        // For this example, we'll assume the initial HTML already has all potential tabs,
+        // and we're just making sure they are displayed if their IDs are in the hash.
+        // If you truly want to create new tabs from scratch based on the hash,
+        // you'd need more information in the hash or a lookup mechanism.
+        console.warn(
+            `Tab with ID '${tabId}' found in hash but not in DOM. Add logic to create it if necessary.`,
+        );
+      }
+    }
+
+    // Remove tabs that are in DOM but not in hash
+    for (const tabId of currentTabs) {
+      if (!allTabIds.includes(tabId)) {
+        tabsEl.removeTab(tabId);
+      }
+    }
+
+    lastKnownAllTabIds = allTabIds;
+  }
+
+  window.addEventListener("hashchange", syncFromHash);
+  syncFromHash(); // initial load
+
+  /**
+   * Writes the current active tab and all tab IDs to the URL hash.
+   * @param {string|null} activeTabId - The ID of the currently active tab.
+   * @param {string[]} allTabIds - An array of all current tab IDs.
+   */
+  function writeHash(activeTabId, allTabIds) {
+    const hashObj = parseBracketedKeyValueHash(location.hash);
+    hashObj[selector] = { ...(hashObj[selector] ?? {}) };
+
+    if (activeTabId) {
+      hashObj[selector][activeKey] = activeTabId;
+    } else {
+      delete hashObj[selector][activeKey];
+    }
+
+    if (allTabIds.length > 0) {
+      hashObj[selector][allTabsKey] = allTabIds.join(",");
+    } else {
+      delete hashObj[selector][allTabsKey];
+    }
+
+    const newHash = createBracketedKeyValueHash(hashObj);
+    if (location.hash !== newHash) {
+      history.replaceState(null, "", newHash);
+    }
+    lastKnownActiveTabId = activeTabId;
+    lastKnownAllTabIds = allTabIds;
+  }
+
+  // Listen for tab changes (active tab)
+  tabsEl.addEventListener("monster-tab-changed", (e) => {
+    if (e.target !== tabsEl) return; // Ignore bubbled events
+    const newActiveTabId = e.detail?.reference;
+    const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+    writeHash(newActiveTabId, currentTabs);
+  });
+
+  // Listen for tab additions
+  const observer = new MutationObserver((mutationsList) => {
+    let tabsChanged = false;
+    for (const mutation of mutationsList) {
+      if (
+          mutation.type === "childList" &&
+          (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)
+      ) {
+        // Filter for actual tab elements
+        const hasTabNodes = Array.from(mutation.addedNodes).some(
+            (node) => node.nodeType === 1 && node.hasAttribute("data-monster-button-label")
+        ) || Array.from(mutation.removedNodes).some(
+            (node) => node.nodeType === 1 && node.hasAttribute("data-monster-button-label")
+        );
+
+        if (hasTabNodes) {
+          tabsChanged = true;
+          break;
+        }
+      }
+    }
+    if (tabsChanged) {
+      const currentActiveTabId = tabsEl.getActiveTab();
+      const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+      // Only update hash if the list of tabs has actually changed
+      if (
+          currentTabs.length !== lastKnownAllTabIds.length ||
+          !currentTabs.every((id) => lastKnownAllTabIds.includes(id))
+      ) {
+        writeHash(currentActiveTabId, currentTabs);
+      }
+    }
+  });
+
+  // Observe the tabsEl for direct child additions/removals
+  observer.observe(tabsEl, { childList: true });
+
+  // Initial write of all existing tabs to the hash
+  const initialActiveTab = tabsEl.getActiveTab();
+  const initialTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+  writeHash(initialActiveTab, initialTabs);
+}