@schukai/monster 4.154.4 → 4.154.6

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.154.6] - 2026-10-04
+
+### Bug Fixes
+
+- **file-manager:** bound editor viewport height ([#590](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/590))
+
+
+
+## [4.154.5] - 2026-10-04
+
+### Bug Fixes
+
+- **image-editor:** load raw SVG markup ([#589](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/589))
+
+
+
 ## [4.154.4] - 2026-10-04
 
 ### Bug Fixes

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.","exports":{".":"./source/monster.mjs","./CHANGELOG.md":"./CHANGELOG.md","./LICENSE":"./LICENSE","./README.md":"./README.md","./package.json":"./package.json","./source/*":"./source/*","./test/*":"./test/*"},"files":["source","test/cases","test/util","CHANGELOG.md"],"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"},"sideEffects":["./source/monster.mjs","./source/components/**","./source/i18n/**","./test/**"],"type":"module","version":"4.154.4"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","exports":{".":"./source/monster.mjs","./CHANGELOG.md":"./CHANGELOG.md","./LICENSE":"./LICENSE","./README.md":"./README.md","./package.json":"./package.json","./source/*":"./source/*","./test/*":"./test/*"},"files":["source","test/cases","test/util","CHANGELOG.md"],"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"},"sideEffects":["./source/monster.mjs","./source/components/**","./source/i18n/**","./test/**"],"type":"module","version":"4.154.6"}

package/source/components/content/image-editor.mjs

@@ -1181,6 +1181,25 @@ function setImageFromData(data, options) {
 
 	if (isString(data)) {
 		const trimmed = data.trim();
+		const normalizedContentType = contentType
+			.split(";", 1)[0]
+			.trim()
+			.toLowerCase();
+		const svgMarkup = trimmed.replace(/^<\?xml[\s\S]*?\?>\s*/iu, "");
+		if (
+			normalizedContentType === "image/svg+xml" &&
+			/^<svg(?:\s|>)/iu.test(svgMarkup)
+		) {
+			return loadImageFromSource.call(
+				this,
+				`data:image/svg+xml;charset=utf-8,${encodeURIComponent(trimmed)}`,
+				{
+					storeOriginal,
+					resetAspect: storeOriginal,
+					resetView: storeOriginal,
+				},
+			);
+		}
 		if (trimmed.startsWith("data:") || trimmed.startsWith("blob:")) {
 			return loadImageFromSource.call(this, trimmed, {
 				storeOriginal,

package/source/components/files/stylesheet/file-manager.mjs

@@ -25,7 +25,7 @@ try {
 	FileManagerStyleSheet.insertRule(
 		`
 @layer filemanager {
-:host{box-sizing:border-box;display:block;height:100%;height:-webkit-fill-available;height:fill-available;height:-moz-available;height:stretch;min-height:320px}
+:host{box-sizing:border-box;display:block;height:var(--monster-file-manager-height,clamp(320px,70vh,720px));min-height:320px}
 [data-monster-role=control]{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--monster-space-4);height:100%}
 [data-monster-role=toolbar]{align-items:center;display:flex;gap:var(--monster-space-4);justify-content:space-between}
 [data-monster-role=actions]{display:flex;gap:var(--monster-space-3);justify-content:flex-end}

package/test/cases/components/content/image-editor.mjs

@@ -109,4 +109,31 @@ describe('ImageEditor', function () {
             '<monster-button-bar class="grid-span-full monster-margin-top-2">',
         );
     });
+
+    it('loads raw SVG markup with its documented content type issue #589', async function () {
+        const OriginalImage = globalThis.Image;
+        const sources = [];
+
+        class ImageMock {
+            set src(value) {
+                sources.push(value);
+                queueMicrotask(() => this.onerror?.(new Error('test stop')));
+            }
+        }
+
+        globalThis.Image = ImageMock;
+
+        try {
+            const element = document.createElement('monster-image-editor');
+            const markup = '<svg xmlns="http://www.w3.org/2000/svg"><rect width="4" height="3"/></svg>';
+
+            await element.setImage(markup, {contentType: 'image/svg+xml'}).catch(() => {});
+
+            expect(sources).to.have.length(1);
+            expect(sources[0]).to.match(/^data:image\/svg\+xml;charset=utf-8,/);
+            expect(decodeURIComponent(sources[0].split(',', 2)[1])).to.equal(markup);
+        } finally {
+            globalThis.Image = OriginalImage;
+        }
+    });
 });

package/test/cases/components/files/file-manager.mjs

@@ -0,0 +1,20 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const styleSheetSource = readFileSync(
+	new URL(
+		"../../../../source/components/files/stylesheet/file-manager.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("FileManager layout", () => {
+	it("uses a bounded default height that consumers can override", () => {
+		expect(styleSheetSource).to.include(
+			"height:var(--monster-file-manager-height,clamp(320px,70vh,720px))",
+		);
+		expect(styleSheetSource).not.to.include("height:stretch");
+		expect(styleSheetSource).not.to.include("height:fill-available");
+	});
+});