@schukai/monster 4.96.0 → 4.98.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.98.0] - 2026-01-14
+
+### Add Features
+
+- Add new thread/comment dialog with support for actions
+
+
+
+## [4.97.0] - 2026-01-14
+
+### Add Features
+
+- Add innerDisabledObserver to enhance button state management
+
+
+
 ## [4.96.0] - 2026-01-13
 
 ### Add Features

package/package.json

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

package/source/components/datatable/columnbar.mjs

@@ -510,7 +510,11 @@ function updateDotsVisibility() {
 
 		let visibleDots = baseLimit;
 		if (needsIndicator) {
-			visibleDots = Math.min(Math.max(1, maxDots - 1), configLimit, dots.length);
+			visibleDots = Math.min(
+				Math.max(1, maxDots - 1),
+				configLimit,
+				dots.length,
+			);
 		}
 		for (let i = visibleDots; i < dots.length; i++) {
 			dots[i].classList.add("dots-overflow-hidden");

package/source/components/form/message-state-button.mjs

@@ -35,6 +35,7 @@ export { MessageStateButton };
  * @type {symbol}
  */
 const buttonElementSymbol = Symbol("buttonElement");
+const innerDisabledObserverSymbol = Symbol("innerDisabledObserver");
 
 /**
  * A specialized button component that combines state management with message display capabilities.
@@ -128,9 +129,6 @@ class MessageStateButton extends Popper {
 			actions: {
 				click: (e) => {},
 			},
-			features: {
-				disableButton: false,
-			},
 
 			aria: {
 				role: null,
@@ -407,17 +405,40 @@ function initControlReferences() {
  */
 function initDisabledSync() {
 	const self = this;
-	const syncDisabled = () => {
-		const disabled = self.getOption("disabled", false);
-		if (self.getOption("features.disableButton", false) !== disabled) {
-			self.setOption("features.disableButton", disabled);
+	const attachInnerObserver = (button) => {
+		if (!button || !isFunction(button.attachObserver)) {
+			return;
+		}
+
+		const existing = self[innerDisabledObserverSymbol];
+		if (existing?.button === button) {
+			return;
+		}
+
+		if (
+			existing?.button &&
+			isFunction(existing.button.detachObserver) &&
+			existing.observer
+		) {
+			existing.button.detachObserver(existing.observer);
 		}
 
-		const button = self[buttonElementSymbol];
+		const observer = new Observer(syncDisabled);
+		button.attachObserver(observer);
+		self[innerDisabledObserverSymbol] = { button, observer };
+	};
+
+	const syncDisabled = () => {
+		const disabled = self.getOption("disabled", false);
+		const button =
+			self.shadowRoot?.querySelector(`[${ATTRIBUTE_ROLE}=button]`) ??
+			self[buttonElementSymbol];
 		if (!button) {
 			return;
 		}
 
+		self[buttonElementSymbol] = button;
+
 		if (disabled) {
 			button.setAttribute(ATTRIBUTE_DISABLED, "");
 		} else {
@@ -427,6 +448,8 @@ function initDisabledSync() {
 		if (isFunction(button.setOption)) {
 			button.setOption("disabled", disabled);
 		}
+
+		attachInnerObserver(button);
 	};
 
 	syncDisabled();
@@ -438,6 +461,11 @@ function initDisabledSync() {
 		};
 	}
 	self.attachObserver(new Observer(syncDisabled));
+	if (typeof customElements?.whenDefined === "function") {
+		customElements.whenDefined("monster-state-button").then(() => {
+			syncDisabled();
+		});
+	}
 }
 
 /**
@@ -454,7 +482,7 @@ function getTemplate() {
                                        data-monster-option-classes-button path:classes.button, 
                                        data-monster-option-aria-role path:aria.role,
                                        data-monster-option-aria-label path:aria.label,
-                                       disabled path:features.disableButton | if:true"
+                                       disabled path:disabled | if:true"
                                   part="button"
                                   name="button"
                                   data-monster-role="button">

package/source/components/state/log.mjs

@@ -23,7 +23,11 @@ import { LogStyleSheet } from "./stylesheet/log.mjs";
 import { Entry } from "./log/entry.mjs";
 import { validateInstance, validateString } from "../../types/validate.mjs";
 import "./state.mjs";
-import { getWindow } from "../../dom/util.mjs";
+import { ProxyObserver } from "../../types/proxyobserver.mjs";
+import { Updater } from "../../dom/updater.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { isArray } from "../../types/is.mjs";
 
 export { Log };
 
@@ -38,6 +42,15 @@ const logElementSymbol = Symbol("logElement");
  * @type {symbol}
  */
 const emptyStateElementSymbol = Symbol("emptyStateElement");
+const entriesSymbol = Symbol("entries");
+const entriesListSymbol = Symbol("entriesList");
+const entryTemplateSymbol = Symbol("entryTemplate");
+const entryObserverMapSymbol = Symbol("entryObserverMap");
+const entryUpdaterMapSymbol = Symbol("entryUpdaterMap");
+const entryElementMapSymbol = Symbol("entryElementMap");
+const entryMapSymbol = Symbol("entryMap");
+const idCounterSymbol = Symbol("idCounter");
+const timeAgoIntervalSymbol = Symbol("timeAgoInterval");
 
 /**
  * A log entry
@@ -60,6 +73,13 @@ class Log extends CustomElement {
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
+		this[entriesSymbol] = [];
+		this[entryObserverMapSymbol] = new Map();
+		this[entryUpdaterMapSymbol] = new Map();
+		this[entryElementMapSymbol] = new Map();
+		this[entryMapSymbol] = new Map();
+		this[idCounterSymbol] = 0;
+		initTimeAgoTicker.call(this);
 		initEventHandler.call(this);
 	}
 
@@ -97,6 +117,7 @@ class Log extends CustomElement {
 
 			features: {
 				direction: "ascending",
+				timeAgoMaxHours: 12,
 			},
 
 			updateFrequency: 10000,
@@ -107,6 +128,62 @@ class Log extends CustomElement {
 		});
 	}
 
+	/**
+	 * @param {string} path
+	 * @param {*} defaultValue
+	 * @return {*}
+	 */
+	getOption(path, defaultValue = undefined) {
+		if (path === "entries" || path?.startsWith("entries.")) {
+			try {
+				return new Pathfinder({
+					entries: this[entriesSymbol],
+				}).getVia(path);
+			} catch (e) {
+				return defaultValue;
+			}
+		}
+
+		return super.getOption(path, defaultValue);
+	}
+
+	/**
+	 * @param {string} path
+	 * @param {*} value
+	 * @return {Log}
+	 */
+	setOption(path, value) {
+		if (path === "entries") {
+			const prepared = prepareEntries(value);
+			this[entriesSymbol] = prepared;
+			this[idCounterSymbol] = 0;
+			renderEntries.call(this, prepared);
+			super.setOption("length", prepared.length);
+			return this;
+		}
+
+		super.setOption(path, value);
+		return this;
+	}
+
+	/**
+	 * @param {object|string} options
+	 * @return {Log}
+	 */
+	setOptions(options) {
+		if (options && typeof options === "object" && options.entries) {
+			const { entries, ...rest } = options;
+			if (Object.keys(rest).length > 0) {
+				super.setOptions(rest);
+			}
+			this.setOption("entries", entries);
+			return this;
+		}
+
+		super.setOptions(options);
+		return this;
+	}
+
 	/**
 	 * @return {void}
 	 */
@@ -135,7 +212,7 @@ class Log extends CustomElement {
 	 * @return {Log}
 	 */
 	addEntry(entry) {
-		validateInstance(entry, Entry);
+		entry = normalizeEntry(entry);
 
 		if (entry.date === undefined || entry.date === null) {
 			entry.date = new Date();
@@ -148,8 +225,19 @@ class Log extends CustomElement {
 			entries.push(entry);
 		}
 
-		/** this field is not used, but triggers a change event */
-		this.setOption("length", entries.length - 1);
+		if (this[entriesListSymbol]) {
+			renderEntry(this, entry, this[entriesListSymbol], {
+				prepend: this.getOption("features.direction") === "ascending",
+			});
+		}
+
+		if (this[emptyStateElementSymbol]) {
+			this[emptyStateElementSymbol].style.display =
+				entries.length > 0 ? "none" : "block";
+		}
+
+		super.setOption("length", entries.length);
+		updateTimeAgo(this);
 
 		return this;
 	}
@@ -211,6 +299,10 @@ function initControlReferences() {
 	this[emptyStateElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=empty-state]",
 	);
+	this[entriesListSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=entries-list]",
+	);
+	this[entryTemplateSymbol] = this.shadowRoot.querySelector("template#entry");
 }
 
 /**
@@ -231,16 +323,209 @@ function initEventHandler() {
 		}
 	});
 
-	setInterval(() => {
-		getWindow().requestAnimationFrame(() => {
-			const timestamp = new Date().toTimeString();
-			this.setOption("timestamp", timestamp);
-		});
-	}, this.getOption("updateFrequency"));
-
 	return this;
 }
 
+/**
+ * @private
+ * @return {void}
+ */
+function initTimeAgoTicker() {
+	if (this[timeAgoIntervalSymbol]) {
+		return;
+	}
+
+	const refresh = () => {
+		updateTimeAgo(this);
+	};
+
+	const interval = Number(this.getOption("updateFrequency"));
+	const delay = Number.isFinite(interval) && interval > 0 ? interval : 10000;
+
+	refresh();
+	this[timeAgoIntervalSymbol] = setInterval(refresh, delay);
+}
+
+/**
+ * @private
+ * @param {Entry|Object} entry
+ * @return {Entry}
+ */
+function normalizeEntry(entry) {
+	if (entry instanceof Entry) {
+		return entry;
+	}
+
+	if (entry && typeof entry === "object") {
+		return new Entry(entry);
+	}
+
+	validateInstance(entry, Entry);
+	return entry;
+}
+
+/**
+ * @private
+ * @param {Entry[]|*} entries
+ * @return {Entry[]}
+ */
+function prepareEntries(entries) {
+	const list = isArray(entries) ? entries.map(normalizeEntry) : [];
+	return list;
+}
+
+/**
+ * @private
+ * @param {Entry[]} entries
+ * @return {void}
+ */
+function renderEntries(entries) {
+	if (!this[entriesListSymbol]) {
+		return;
+	}
+
+	clearContainer(this[entriesListSymbol]);
+	this[entryObserverMapSymbol] = new Map();
+	this[entryUpdaterMapSymbol] = new Map();
+	this[entryElementMapSymbol] = new Map();
+	this[entryMapSymbol] = new Map();
+
+	const fragment = document.createDocumentFragment();
+	for (const entry of entries) {
+		renderEntry(this, entry, fragment, {});
+	}
+	this[entriesListSymbol].appendChild(fragment);
+
+	if (this[emptyStateElementSymbol]) {
+		this[emptyStateElementSymbol].style.display =
+			entries.length > 0 ? "none" : "block";
+	}
+
+	updateTimeAgo(this);
+}
+
+/**
+ * @private
+ * @param {Log} log
+ * @param {Entry} entry
+ * @param {HTMLElement|DocumentFragment} parentList
+ * @param {{prepend?: boolean}} options
+ * @return {void}
+ */
+function renderEntry(log, entry, parentList, { prepend } = {}) {
+	if (!entry.id) {
+		log[idCounterSymbol] += 1;
+		entry.id = `entry-${log[idCounterSymbol]}`;
+	}
+
+	const template = log[entryTemplateSymbol];
+	if (!template) {
+		return;
+	}
+
+	const fragment = template.content.cloneNode(true);
+	const item = fragment.querySelector("[data-monster-role=entry]");
+	if (!item) {
+		return;
+	}
+
+	item.setAttribute("data-entry-id", entry.id);
+
+	const observer = new ProxyObserver({ entry });
+	const updater = new Updater(item, observer);
+	updater.run().catch(() => {});
+
+	log[entryObserverMapSymbol].set(entry.id, observer);
+	log[entryUpdaterMapSymbol].set(entry.id, updater);
+	log[entryElementMapSymbol].set(entry.id, item);
+	log[entryMapSymbol].set(entry.id, entry);
+
+	if (prepend && parentList instanceof HTMLElement) {
+		parentList.insertBefore(item, parentList.firstChild);
+	} else {
+		parentList.appendChild(item);
+	}
+}
+
+/**
+ * @private
+ * @param {Log} log
+ * @return {void}
+ */
+function updateTimeAgo(log) {
+	const locale = getLocaleOfDocument().toString();
+	const maxHours = Number(log.getOption("features.timeAgoMaxHours", 12));
+	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "always" });
+	for (const [entryId, element] of log[entryElementMapSymbol].entries()) {
+		const entry = log[entryMapSymbol]?.get(entryId);
+		if (!entry?.date) {
+			continue;
+		}
+		const timeElement = element.querySelector("[data-monster-role=time-ago]");
+		if (!timeElement) {
+			continue;
+		}
+		try {
+			timeElement.textContent = formatRelativeTime(
+				new Date(entry.date),
+				locale,
+				maxHours,
+				rtf,
+			);
+		} catch (e) {}
+	}
+}
+
+/**
+ * @private
+ * @param {Date} date
+ * @param {string} locale
+ * @param {number} maxHours
+ * @param {Intl.RelativeTimeFormat} rtf
+ * @return {string}
+ */
+function formatRelativeTime(date, locale, maxHours, rtf) {
+	let diffSeconds = Math.floor((Date.now() - date.getTime()) / 1000);
+	if (!Number.isFinite(diffSeconds) || diffSeconds < 0) {
+		diffSeconds = 0;
+	}
+
+	if (diffSeconds < 5) {
+		return "just now";
+	}
+
+	if (diffSeconds < 60) {
+		return rtf.format(-diffSeconds, "second");
+	}
+
+	const diffMinutes = Math.floor(diffSeconds / 60);
+	if (diffMinutes < 60) {
+		return rtf.format(-diffMinutes, "minute");
+	}
+
+	const diffHours = Math.floor(diffMinutes / 60);
+	if (diffHours < maxHours) {
+		return rtf.format(-diffHours, "hour");
+	}
+
+	return date.toLocaleDateString(locale, {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+	});
+}
+
+/**
+ * @private
+ * @param {HTMLElement} container
+ * @return {void}
+ */
+function clearContainer(container) {
+	while (container.firstChild) {
+		container.removeChild(container.firstChild);
+	}
+}
+
 /**
  * @private
  * @return {string}
@@ -256,14 +541,15 @@ function getTemplate() {
                       data-monster-attributes="class path:entry.title | ?:title:hidden"></span>
                 <span data-monster-replace="path:entry.message"
                       data-monster-attributes="class path:entry.message | ?:message:hidden"></span>
-                <span data-monster-replace="path:entry.date | time-ago"
+                <span data-monster-role="time-ago"
+                      data-monster-replace="path:entry.date | time-ago"
                       data-monster-attributes="title path:entry.date | datetime"></span>
 
             </li>
         </template>
 
         <div part="control" data-monster-role="control">
-            <div data-monster-role="empty-state" data-monster-attributes="class path:entries | has-entries | ?:hidden:">
+            <div data-monster-role="empty-state">
                 <monster-state>
                     <div part="visual">
                         <svg width="4rem" height="4rem" viewBox="0 -12 512.00032 512"
@@ -279,8 +565,7 @@ function getTemplate() {
                 </monster-state>
             </div>
             <div data-monster-role="entries">
-                <ul data-monster-insert="entry path:entries">
-                </ul>
+                <ul data-monster-role="entries-list"></ul>
             </div>
         </div>
     `;

package/source/components/state/style/thread.pcss

@@ -0,0 +1,172 @@
+@import "../../style/control.pcss";
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/mixin/media.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/mixin/hover.pcss";
+
+[data-monster-role=entries] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    position: relative;
+
+    & ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0 0 0 2rem;
+        position: relative;
+        width: 100%;
+    }
+
+    & ul:before {
+        content: "";
+        display: block;
+        width: 2px;
+        height: 100%;
+
+        border-left-color: var(--monster-bg-color-primary-3);
+        border-left-style: dotted;
+        border-left-width: 1px;
+        position: absolute;
+        left: 1rem;
+        bottom: 0;
+        top: 0;
+    }
+}
+
+[data-monster-role=entry] {
+    background-color: var(--monster-bg-color-primary-1);
+    border-radius: var(--monster-border-radius);
+    color: var(--monster-color-primary-1);
+    margin: 0 0 0.6rem 0;
+    padding: 0.45rem 0.5rem 0.45rem 0.8rem;
+    position: relative;
+}
+
+[data-monster-role=entry]:before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    background: var(--monster-bg-color-primary-3);
+    border: 1px solid var(--monster-color-primary-2);
+    position: absolute;
+    left: calc(-1rem - 2px);
+    top: 1rem;
+}
+
+[data-monster-role=entry]:after {
+    content: "";
+    border-top: 1px dotted var(--monster-bg-color-primary-3);
+    position: absolute;
+    left: calc(-1rem + 1px);
+    top: 1.1rem;
+    width: calc(1rem - 1px);
+}
+
+[data-monster-role=meta] {
+    align-items: center;
+    color: var(--monster-color-primary-2);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.85rem;
+    gap: 0.4rem;
+
+    & .title {
+        font-stretch: expanded;
+        font-weight: 700;
+    }
+
+    & .title:before {
+        content: "—";
+        font-weight: 400;
+        margin-right: 0.25rem;
+    }
+}
+
+[data-monster-role=message] {
+    margin: 0.25rem 0 0.4rem 0;
+}
+
+[data-monster-role=thread-controls] {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+[data-monster-role=thread-controls] .monster-button-primary,
+[data-monster-role=thread-controls] .monster-button-secondary,
+[data-monster-role=thread-controls] .monster-button-tertiary,
+[data-monster-role=thread-controls] .monster-button-outline-primary,
+[data-monster-role=thread-controls] .monster-button-outline-secondary,
+[data-monster-role=thread-controls] .monster-button-outline-tertiary {
+    border-radius: 999px;
+    font-size: 0.75rem;
+    gap: 0.4rem;
+    padding: 0.15rem 0.6rem;
+}
+
+[data-monster-role=badge] {
+    background: var(--monster-color-secondary-4);
+    border-radius: 999px;
+    color: var(--monster-bg-color-secondary-4);
+    display: inline-flex;
+    font-size: 0.7rem;
+    line-height: 1;
+    padding: 0.15rem 0.4rem;
+}
+
+[data-monster-role=thread-controls] [data-reply-count="0"] {
+    display: none;
+}
+
+[data-monster-role=badge][data-reply-count="0"] {
+    display: none;
+}
+
+[data-monster-role=entry][data-collapsed=true] [data-monster-role=children] {
+    display: none;
+}
+
+[data-monster-role=actions] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+[data-monster-role=actions] .monster-button-primary,
+[data-monster-role=actions] .monster-button-secondary,
+[data-monster-role=actions] .monster-button-tertiary,
+[data-monster-role=actions] .monster-button-outline-primary,
+[data-monster-role=actions] .monster-button-outline-secondary,
+[data-monster-role=actions] .monster-button-outline-tertiary {
+    font-size: 0.85rem;
+    padding: 0.2rem 0.5rem;
+}
+
+[data-monster-role=actions] button:hover {
+    box-shadow: var(--monster-box-shadow-1);
+}
+
+[data-monster-role=editor] {
+    margin-top: 1rem;
+    padding-left: 2rem;
+
+    & ::slotted(textarea) {
+        box-sizing: border-box;
+        min-height: 6rem;
+        width: 100%;
+    }
+
+    & ::slotted(button) {
+        margin-top: 0.5rem;
+    }
+}