@schukai/monster 4.97.0 → 4.98.1

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,177 @@
+@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=control] {
+    --monster-thread-indent: 2rem;
+}
+
+[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 {
+        box-sizing: border-box;
+        list-style-type: none;
+        margin: 0;
+        padding: 0 0 0 var(--monster-thread-indent);
+        position: relative;
+        width: calc(100% - var(--monster-thread-indent));
+    }
+
+    & 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: calc(var(--monster-thread-indent) / 2);
+        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(-1 * (var(--monster-thread-indent) / 2) - 2px);
+    top: 1rem;
+}
+
+[data-monster-role=entry]:after {
+    content: "";
+    border-top: 1px dotted var(--monster-bg-color-primary-3);
+    position: absolute;
+    left: calc(-1 * (var(--monster-thread-indent) / 2) + 1px);
+    top: 1.1rem;
+    width: calc((var(--monster-thread-indent) / 2) - 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: var(--monster-thread-indent);
+
+    & ::slotted(textarea) {
+        box-sizing: border-box;
+        min-height: 6rem;
+        width: 100%;
+    }
+
+    & ::slotted(button) {
+        margin-top: 0.5rem;
+    }
+}

package/source/components/state/stylesheet/thread.mjs

@@ -0,0 +1,38 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, 2026. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ */
+
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+
+export { ThreadStyleSheet };
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const ThreadStyleSheet = new CSSStyleSheet();
+
+try {
+	ThreadStyleSheet.insertRule(
+		`
+@layer thread { 
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{--monster-thread-indent:2rem}[data-monster-role=entries]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;position:relative}[data-monster-role=entries] ul{box-sizing:border-box;list-style-type:none;margin:0;padding:0 0 0 var(--monster-thread-indent);position:relative;width:calc(100% - var(--monster-thread-indent))}[data-monster-role=entries] ul:before{border-left:1px dotted var(--monster-bg-color-primary-3);bottom:0;content:\"\";display:block;height:100%;left:calc(var(--monster-thread-indent)/2);position:absolute;top:0;width:2px}[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 .6rem;padding:.45rem .5rem .45rem .8rem;position:relative}[data-monster-role=entry]:before{background:var(--monster-bg-color-primary-3);border:1px solid var(--monster-color-primary-2);border-radius:50%;box-sizing:border-box;content:\"\";height:6px;left:calc((var(--monster-thread-indent)/2)*-1 - 2px);position:absolute;top:1rem;width:6px}[data-monster-role=entry]:after{border-top:1px dotted var(--monster-bg-color-primary-3);content:\"\";left:calc((var(--monster-thread-indent)/2)*-1 + 1px);position:absolute;top:1.1rem;width:calc(var(--monster-thread-indent)/2 - 1px)}[data-monster-role=meta]{align-items:center;color:var(--monster-color-primary-2);display:flex;flex-wrap:wrap;font-size:.85rem;gap:.4rem}[data-monster-role=meta] .title{font-stretch:expanded;font-weight:700}[data-monster-role=meta] .title:before{content:\"—\";font-weight:400;margin-right:.25rem}[data-monster-role=message]{margin:.25rem 0 .4rem}[data-monster-role=thread-controls]{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}[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,[data-monster-role=thread-controls] .monster-button-primary,[data-monster-role=thread-controls] .monster-button-secondary,[data-monster-role=thread-controls] .monster-button-tertiary{border-radius:999px;font-size:.75rem;gap:.4rem;padding:.15rem .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:.7rem;line-height:1;padding:.15rem .4rem}[data-monster-role=badge][data-reply-count=\"0\"],[data-monster-role=entry][data-collapsed=true] [data-monster-role=children],[data-monster-role=thread-controls] [data-reply-count=\"0\"]{display:none}[data-monster-role=actions]{display:flex;flex-wrap:wrap;gap:.4rem}[data-monster-role=actions] .monster-button-outline-primary,[data-monster-role=actions] .monster-button-outline-secondary,[data-monster-role=actions] .monster-button-outline-tertiary,[data-monster-role=actions] .monster-button-primary,[data-monster-role=actions] .monster-button-secondary,[data-monster-role=actions] .monster-button-tertiary{font-size:.85rem;padding:.2rem .5rem}[data-monster-role=actions] button:hover{box-shadow:var(--monster-box-shadow-1)}[data-monster-role=editor]{margin-top:1rem;padding-left:var(--monster-thread-indent)}[data-monster-role=editor] ::slotted(textarea){box-sizing:border-box;min-height:6rem;width:100%}[data-monster-role=editor] ::slotted(button){margin-top:.5rem} 
+}`,
+		0,
+	);
+} catch (e) {
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
+}