@schukai/monster 4.135.0 → 4.136.1

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.135.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.136.1"}

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

@@ -29,6 +29,35 @@ try {
 }`,
 		0,
 	);
+	ViewerStyleSheet.insertRule(
+		`
+@layer viewer {
+	:host {
+		max-width: 100%;
+		min-width: 0;
+	}
+
+	[data-monster-role="viewer"] {
+		max-width: 100%;
+		min-height: 0;
+		min-width: 0;
+		overflow: auto;
+	}
+
+	[data-monster-role="viewer"] :is(img, video, audio, object, embed, table, pre) {
+		max-width: 100%;
+	}
+
+	[data-monster-role="viewer"] [part="text"] {
+		overflow: hidden;
+		overflow-wrap: anywhere;
+		white-space: pre-wrap;
+		width: 100%;
+	}
+}
+`,
+		1,
+	);
 } catch (e) {
 	addAttributeToken(
 		document.getRootNode().querySelector("html"),

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

@@ -12,6 +12,8 @@ div {
 div[data-monster-role="content-container"] {
     width: 100%;
     height: 100%;
+    max-width: 100%;
+    min-width: 0;
     overflow: auto;
     position: relative;
     display: flex;

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

@@ -25,7 +25,7 @@ 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: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\")} 
+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%;max-width:100%;min-width:0;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,
 	);

package/source/components/content/viewer.mjs

@@ -29,9 +29,13 @@ import "./viewer/message.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import { Button } from "../form/button.mjs";
 import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { sanitizeHtml } from "../../dom/sanitize-html.mjs";
 
 export { Viewer };
 
+const BLOCKED_HTML_RESOURCE_DATA_URL =
+	"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
 /**
  * @private
  * @type {symbol}
@@ -732,7 +736,7 @@ class Viewer extends CustomElement {
 		if (data instanceof Blob) {
 			blobToText(data)
 				.then((html) => {
-					this.setOption("content", html);
+					this.setOption("content", sanitizeViewerHTMLContent(html));
 				})
 				.catch((error) => {
 					this.dispatchEvent(
@@ -754,7 +758,7 @@ class Viewer extends CustomElement {
 					return response.text();
 				})
 				.then((html) => {
-					this.setOption("content", html);
+					this.setOption("content", sanitizeViewerHTMLContent(html));
 				})
 				.catch((error) => {
 					this.dispatchEvent(
@@ -771,7 +775,7 @@ class Viewer extends CustomElement {
 			throw new Error("HTMLElement or string expected");
 		}
 
-		this.setOption("content", data);
+		this.setOption("content", sanitizeViewerHTMLContent(data));
 	}
 
 	/**
@@ -787,7 +791,7 @@ class Viewer extends CustomElement {
 	setPlainText(data) {
 		const mkPreSpan = (text) => {
 			const pre = document.createElement("pre");
-			pre.innerText = text;
+			pre.textContent = text;
 			pre.setAttribute("part", "text");
 			return pre.outerHTML;
 		};
@@ -795,10 +799,6 @@ class Viewer extends CustomElement {
 		if (data instanceof Blob) {
 			blobToText(data)
 				.then((text) => {
-					const div = document.createElement("div");
-					div.innerHTML = text;
-					text = div.innerText;
-
 					this.setOption("content", mkPreSpan(text));
 				})
 				.catch((error) => {
@@ -812,9 +812,7 @@ class Viewer extends CustomElement {
 		} else if (data instanceof HTMLElement) {
 			data = data.outerText;
 		} else if (isString(data)) {
-			const div = document.createElement("div");
-			div.innerHTML = data;
-			data = div.innerText;
+			// text/plain should never be interpreted as HTML
 		} else if (isURL(data)) {
 			getGlobal()
 				.fetch(data)
@@ -822,10 +820,6 @@ class Viewer extends CustomElement {
 					return response.text();
 				})
 				.then((text) => {
-					const div = document.createElement("div");
-					div.innerHTML = text;
-					text = div.innerText;
-
 					this.setOption("content", mkPreSpan(text));
 				})
 				.catch((error) => {
@@ -910,6 +904,95 @@ function blobToText(blob) {
 	});
 }
 
+function sanitizeViewerHTMLContent(html) {
+	const sanitizedHTML = sanitizeHtml(html);
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(sanitizedHTML, "text/html");
+
+	doc.querySelectorAll("*").forEach((element) => {
+		removeCrossOriginResourceAttribute(element, "src");
+		removeCrossOriginResourceAttribute(element, "srcset");
+		removeCrossOriginResourceAttribute(element, "poster");
+
+		if (element.hasAttribute("style")) {
+			const safeStyle = sanitizeStyleAttribute(element.getAttribute("style"));
+			if (safeStyle) {
+				element.setAttribute("style", safeStyle);
+			} else {
+				element.removeAttribute("style");
+			}
+		}
+	});
+
+	return doc.body.innerHTML;
+}
+
+function removeCrossOriginResourceAttribute(element, attributeName) {
+	const value = element.getAttribute(attributeName);
+	if (!value) {
+		return;
+	}
+
+	if (attributeName === "srcset") {
+		const sameOriginEntries = value
+			.split(",")
+			.map((entry) => entry.trim())
+			.filter(Boolean)
+			.filter((entry) => {
+				const [candidateUrl] = entry.split(/\s+/, 1);
+				return isSameOriginResourceUrl(candidateUrl);
+			});
+
+		if (sameOriginEntries.length > 0) {
+			element.setAttribute(attributeName, sameOriginEntries.join(", "));
+			return;
+		}
+	} else if (isSameOriginResourceUrl(value)) {
+		return;
+	}
+
+	if (
+		attributeName === "src" &&
+		element.tagName.toLowerCase() === "img" &&
+		!element.classList.contains("privacyImage")
+	) {
+		element.setAttribute("src", BLOCKED_HTML_RESOURCE_DATA_URL);
+		element.classList.add("privacyImage");
+		return;
+	}
+
+	element.removeAttribute(attributeName);
+}
+
+function sanitizeStyleAttribute(styleValue) {
+	return styleValue.replace(/url\(([^)]+)\)/gi, (match, rawUrl) => {
+		const cleanedUrl = rawUrl.trim().replace(/^['"]|['"]$/g, "");
+		return isSameOriginResourceUrl(cleanedUrl) ? match : "";
+	});
+}
+
+function isSameOriginResourceUrl(value) {
+	if (!value) {
+		return true;
+	}
+
+	const trimmedValue = value.trim();
+	if (!trimmedValue || trimmedValue.startsWith("#")) {
+		return true;
+	}
+
+	try {
+		const url = new URL(trimmedValue, document.location.href);
+		return (
+			url.origin === document.location.origin ||
+			url.protocol === "data:" ||
+			url.protocol === "blob:"
+		);
+	} catch {
+		return true;
+	}
+}
+
 /**
  * @private
  * @return {Select}

package/source/data/datasource/server/restapi.mjs

@@ -39,6 +39,9 @@ const rawDataSymbol = Symbol.for(
  *
  * @externalExample ../../../../example/data/datasource/server/restapi.mjs
  * @example /examples/libraries/data/datasource/server/restapi/simple/ Configure read and write endpoints
+ * @example /examples/libraries/data/datasource/server/restapi/response-callback/ Replace the default read callback with a custom assignment flow
+ * @example /examples/libraries/data/datasource/server/restapi/partial-write/ Patch only changed fields before sending a write request
+ * @example /examples/libraries/data/datasource/server/restapi/report-path/ Read validation reports from a nested response path
  * @license AGPLv3
  * @since 1.22.0
  * @copyright Volker Schukai

package/source/data/datasource/server/webconnect.mjs

@@ -35,6 +35,9 @@ const webConnectSymbol = Symbol("connection");
  *
  * @externalExample ../../../../example/data/datasource/server/webconnect.mjs
  * @example /examples/libraries/data/datasource/server/webconnect/simple/ Configure a realtime datasource bridge
+ * @example /examples/libraries/data/datasource/server/webconnect/message-queue/ Read queued realtime messages through the datasource API
+ * @example /examples/libraries/data/datasource/server/webconnect/transformed-read/ Apply read mapping to incoming socket payloads
+ * @example /examples/libraries/data/datasource/server/webconnect/write-envelope/ Prepare outgoing socket writes with sheathing options
  * @license AGPLv3
  * @since 3.1.0
  * @copyright Volker Schukai

package/source/data/datasource/server.mjs

@@ -33,6 +33,9 @@ const serverVersionSymbol = Symbol("serverVersion");
  * @fragments /fragments/libraries/data/datasource/server/
  *
  * @example /examples/libraries/data/datasource/server/simple/ Transform and prepare server payloads
+ * @example /examples/libraries/data/datasource/server/transformer-callbacks/ Combine transformer expressions with mapping callbacks
+ * @example /examples/libraries/data/datasource/server/partial-diff/ Reduce write payloads through the partial diff callback
+ * @example /examples/libraries/data/datasource/server/sheathing-object/ Wrap outgoing payloads into a server-side envelope
  * @license AGPLv3
  * @since 3.4.0
  * @copyright Volker Schukai

package/source/data/datasource/storage.mjs

@@ -32,6 +32,9 @@ const storageObjectSymbol = Symbol.for(
  * @fragments /fragments/libraries/data/datasource/storage/
  *
  * @example /examples/libraries/data/datasource/storage/simple/ Read and write JSON through Web Storage
+ * @example /examples/libraries/data/datasource/storage/session-draft/ Persist draft state in session storage
+ * @example /examples/libraries/data/datasource/storage/local-preferences/ Persist user preferences in local storage
+ * @example /examples/libraries/data/datasource/storage/remove-on-undefined/ Remove the storage entry when the datasource becomes undefined
  * @license AGPLv3
  * @since 1.22.0
  * @copyright Volker Schukai

package/source/i18n/formatter.mjs

@@ -31,6 +31,9 @@ const internalTranslationSymbol = Symbol("internalTranslation");
  * The Formatter extends the Text.Formatter with the possibility to replace the key by a translation.
  *
  * @fragments /fragments/libraries/i18n/formatter/
+ * @example /examples/libraries/i18n/formatter/basic-translation/ Resolve one translation key through the i18n marker
+ * @example /examples/libraries/i18n/formatter/parameterized-text/ Combine translated text with formatter parameters
+ * @example /examples/libraries/i18n/formatter/custom-markers/ Configure custom formatter markers for translated strings
  *
  * @license AGPLv3
  * @since 1.26.0

package/source/i18n/provider.mjs

@@ -41,6 +41,9 @@ const translationsLinkSymbol = Symbol.for(
  * @fragments /fragments/libraries/i18n/provider/
  *
  * @example /examples/libraries/i18n/provider/simple/ Assign translations to a document
+ * @example /examples/libraries/i18n/provider/merge-existing/ Merge a second translation payload into an already linked element
+ * @example /examples/libraries/i18n/provider/subtree-assignment/ Attach translations to a dedicated subtree instead of the whole document
+ * @example /examples/libraries/i18n/provider/locale-switch/ Resolve different translation objects for different locales
  * @license AGPLv3
  * @since 1.13.0
  * @copyright Volker Schukai

package/source/logging/handler.mjs

@@ -25,6 +25,9 @@ export { Handler };
  * @fragments /fragments/libraries/logging/handler/
  *
  * @example /examples/libraries/logging/handler/simple/ Filter log entries before forwarding them
+ * @example /examples/libraries/logging/handler/level-switch/ Switch handler thresholds with the convenience methods
+ * @example /examples/libraries/logging/handler/structured-output/ Forward structured log entry data into a custom buffer
+ * @example /examples/libraries/logging/handler/off-state/ Disable a handler completely with the off level
  * @license AGPLv3
  * @since 1.5.0
  * @copyright Volker Schukai

package/source/logging/logger.mjs

@@ -71,6 +71,9 @@ const OFF = 0;
  * @fragments /fragments/libraries/logging/logger/
  *
  * @example /examples/libraries/logging/logger/simple/ Write entries through a console handler
+ * @example /examples/libraries/logging/logger/multiple-handlers/ Route the same log entry through multiple handlers
+ * @example /examples/libraries/logging/logger/level-filtering/ Filter log output through handler log levels
+ * @example /examples/libraries/logging/logger/remove-handler/ Remove a handler and verify that it no longer receives entries
  * @license AGPLv3
  * @since 1.5.0
  * @copyright Volker Schukai

package/source/net/webconnect/message.mjs

@@ -25,6 +25,9 @@ const dataSymbol = Symbol("@@data");
  * @fragments /fragments/libraries/net/webconnect/message/
  *
  * @example /examples/libraries/net/webconnect/message/simple/ Serialize and restore a structured message
+ * @example /examples/libraries/net/webconnect/message/nested-payload/ Keep nested payload data intact through serialization
+ * @example /examples/libraries/net/webconnect/message/queue-ready-shape/ Use a message shape that is ready for queue inspection and logging
+ * @example /examples/libraries/net/webconnect/message/object-access/ Access raw message data through getData and toJSON
  * @license AGPLv3
  * @since 3.4.0
  * @copyright Volker Schukai

package/source/net/webconnect.mjs

@@ -213,6 +213,9 @@ function connectServer(resolve, reject) {
  *
  * @externalExample ../../example/net/webconnect.mjs
  * @example /examples/libraries/net/webconnect/simple/ Connect and consume structured messages
+ * @example /examples/libraries/net/webconnect/send-and-close/ Send structured messages and close the connection manually
+ * @example /examples/libraries/net/webconnect/observer-queue/ Observe incoming queue updates through the receive queue observer API
+ * @example /examples/libraries/net/webconnect/reconnect-options/ Configure reconnect and timeout options for resilient connections
  * @license AGPLv3
  * @since 3.1.0
  * @copyright Volker Schukai

package/test/cases/components/content/viewer.mjs

@@ -0,0 +1,99 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+chai.use(chaiDom);
+const expect = chai.expect;
+
+let Viewer;
+
+describe("Viewer", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => import("../../../../source/components/content/viewer.mjs"))
+			.then((module) => {
+				Viewer = module.Viewer;
+				done();
+			})
+			.catch((error) => done(error));
+	});
+
+	afterEach(() => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("renders text/plain without interpreting html", function (done) {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `<monster-viewer id="viewer"></monster-viewer>`;
+
+		setTimeout(() => {
+			try {
+				const viewer = document.getElementById("viewer");
+				expect(viewer).instanceof(Viewer);
+
+				viewer.setContent("<strong>raw</strong>\n<script>alert(1)</script>");
+
+				setTimeout(() => {
+					try {
+						const textNode = viewer.shadowRoot.querySelector('[part="text"]');
+						expect(textNode).to.not.equal(null);
+						expect(textNode.textContent).to.equal(
+							"<strong>raw</strong>\n<script>alert(1)</script>",
+						);
+						expect(textNode.innerHTML).to.contain("&lt;strong&gt;raw&lt;/strong&gt;");
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 0);
+			} catch (error) {
+				done(error);
+			}
+		}, 0);
+	});
+
+	it("blocks cross-origin resources in html view", function (done) {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `<monster-viewer id="viewer"></monster-viewer>`;
+
+		setTimeout(() => {
+			try {
+				const viewer = document.getElementById("viewer");
+				expect(viewer).instanceof(Viewer);
+
+				viewer.setContent(
+					`
+						<link rel="stylesheet" href="https://evil.example/tracker.css">
+						<script src="https://evil.example/tracker.js"></script>
+						<img id="external" src="https://evil.example/pixel.png">
+						<img id="local" src="/image.png">
+					`,
+					"text/html",
+				);
+
+				setTimeout(() => {
+					try {
+						const root = viewer.shadowRoot;
+						expect(root.querySelector("link")).to.equal(null);
+						expect(root.querySelector("script")).to.equal(null);
+
+						const externalImage = root.querySelector("#external");
+						expect(externalImage).to.not.equal(null);
+						expect(externalImage.classList.contains("privacyImage")).to.equal(true);
+						expect(externalImage.getAttribute("src")).to.match(/^data:image\/gif;base64,/);
+
+						const localImage = root.querySelector("#local");
+						expect(localImage).to.not.equal(null);
+						expect(localImage.getAttribute("src")).to.equal("/image.png");
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 0);
+			} catch (error) {
+				done(error);
+			}
+		}, 0);
+	});
+});

package/test/web/import.js

@@ -3,6 +3,7 @@ import "./prepare.js";
 import "../cases/components/layout/tabs.mjs";
 import "../cases/components/layout/slit-panel.mjs";
 import "../cases/components/layout/panel.mjs";
+import "../cases/components/content/viewer.mjs";
 import "../cases/components/content/image-editor.mjs";
 import "../cases/components/form/buy-box.mjs";
 import "../cases/components/form/message-state-button.mjs";