lintje 0.3.0 → 0.5.0

package/dist-elements/tag/log-viewer.js

@@ -0,0 +1,847 @@
+import { F as e, I as t, Kt as n, Yt as r, Zt as i, at as a, en as o, f as s, g as c, lt as l, nn as u, ot as d, st as f, ut as p } from "../chunks/base-CVKIPSLx.js";
+import { t as m } from "../chunks/copied-7BXYVkXT.js";
+import "./menu-button.js";
+import "./announcement.js";
+import "./segmented.js";
+import "./code.js";
+import "./highlight.js";
+import "./find.js";
+import "./select.js";
+import { i as h, r as g, t as _ } from "../chunks/download-D7ZarlMZ.js";
+var v = {
+	error: "Fout",
+	warning: "Let op",
+	info: "Info",
+	debug: "Debug"
+}, y = 27, b = 7;
+function x(e) {
+	if (!e.includes("\x1B")) return e;
+	let t = "";
+	for (let n = 0; n < e.length; n += 1) {
+		if (e.charCodeAt(n) !== y) {
+			t += e[n];
+			continue;
+		}
+		let r = e[n + 1];
+		if (r === "[") for (n += 2; n < e.length && !(e.charCodeAt(n) >= 64 && e.charCodeAt(n) <= 126);) n += 1;
+		else if (r === "]") for (n += 2; n < e.length && e.charCodeAt(n) !== b;) {
+			if (e.charCodeAt(n) === y && e[n + 1] === "\\") {
+				n += 1;
+				break;
+			}
+			n += 1;
+		}
+		else n += 1;
+	}
+	return t;
+}
+function S(e) {
+	return e.length > 0 && !e.some((e) => e.time || e.level || e.source);
+}
+function C(e, t) {
+	if (!t) return 0;
+	let n = 0, r = e.toLowerCase();
+	for (let e = r.indexOf(t); e !== -1; e = r.indexOf(t, e + t.length)) n += 1;
+	return n;
+}
+function w(e, t, n) {
+	if (!t) return [{ text: e }];
+	let r = [], i = e.toLowerCase(), a = 0, o = n;
+	for (let n = i.indexOf(t); n !== -1; n = i.indexOf(t, a)) n > a && r.push({ text: e.slice(a, n) }), r.push({
+		text: e.slice(n, n + t.length),
+		hit: o
+	}), o += 1, a = n + t.length;
+	return a < e.length && r.push({ text: e.slice(a) }), r;
+}
+function T(e) {
+	let t = e.split("\n");
+	return t.length <= 5 ? {
+		shown: e,
+		hidden: 0
+	} : {
+		shown: t.slice(0, 4).join("\n"),
+		hidden: t.length - 4
+	};
+}
+var E = (e, t) => String(e).padStart(t, "0");
+function D(e, t) {
+	let n = e ? Date.parse(e) : NaN, r = t ? Date.parse(t) : NaN;
+	if (Number.isNaN(n) || Number.isNaN(r)) return null;
+	let i = Math.max(0, n - r);
+	return `+${E(Math.floor(i / 6e4), 2)}:${E(Math.floor(i / 1e3) % 60, 2)}.${E(i % 1e3, 3)}`;
+}
+function O(e) {
+	let t = e.level ? e.level.toUpperCase() : "", n = [
+		e.time,
+		t,
+		e.source
+	].filter(Boolean).join(" ");
+	return n ? `${n} ${x(e.message)}` : x(e.message);
+}
+var k = (e) => e.map(O).join("\n"), A = (e) => JSON.stringify(e.map((e) => ({
+	...e,
+	message: x(e.message)
+})), null, 2), j = (e) => [[
+	"tijd",
+	"niveau",
+	"bron",
+	"bericht"
+], ...e.map((e) => [
+	e.at ?? e.time,
+	e.level,
+	e.source,
+	x(e.message)
+])], M = "/* A log scrolls in its own box: the page never moves under the reader's pointer. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-log-viewer { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-log-viewer__filters {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-3);\n}\n.lintje-log-viewer__filters.is-raw { justify-content: flex-end; }\n.lintje-log-viewer__find { margin-left: auto; }\n.lintje-log-viewer__tools { display: inline-flex; gap: var(--space-2); flex: none; }\n/* Folded, the select has the width the row reserved for it; the search and tools stay right. */\n.lintje-log-viewer__filters.is-compact { flex-wrap: nowrap; }\n.lintje-log-viewer__filters.is-compact .lintje-log-viewer__level { flex: 0 1 calc(12 * var(--space-4)); min-width: 0; }\n/* Narrow: the search over the full width, the level and the one menu on the line under it. */\n.lintje-log-viewer__filters.is-narrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; }\n.lintje-log-viewer__filters.is-narrow .lintje-log-viewer__find { grid-column: 1 / -1; grid-row: 1; width: 100%; margin-left: 0; }\n.lintje-log-viewer__filters.is-narrow .lintje-log-viewer__level { grid-column: 1; grid-row: 2; }\n.lintje-log-viewer__filters.is-narrow .lintje-log-viewer__tools { grid-column: 2; grid-row: 2; }\n.lintje-log-viewer__filters.is-narrow.is-raw .lintje-log-viewer__tools { grid-row: 1; }\n.lintje-log-viewer__filters.is-narrow.is-raw .lintje-log-viewer__find { grid-column: 1; }\n\n.lintje-log-viewer__frame { display: flex; flex-direction: column; min-width: 0; }\n.lintje-log-viewer__log {\n  height: calc(10 * var(--space-10));\n  overflow: auto;\n  overscroll-behavior: contain;\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: var(--color-text-primary);\n}\n.lintje-log-viewer__log--expanded { height: var(--chart-h-expanded); }\n.lintje-log-viewer__log:focus-visible { outline-offset: calc(var(--focus-width) * -1); }\n.lintje-log-viewer__rows { padding: var(--space-2) 0; min-width: 100%; }\n.lintje-log-viewer__log.is-nowrap .lintje-log-viewer__rows { width: max-content; }\n\n.lintje-log-viewer__row {\n  display: flex; flex-wrap: wrap; align-items: flex-start;\n  column-gap: var(--space-3);\n  padding: var(--space-1) var(--space-4) var(--space-1) calc(var(--space-4) - 3px);\n  border-left: 3px solid transparent;\n}\n.lintje-log-viewer__row:focus-visible { outline-offset: calc(var(--focus-width) * -1); }\n.lintje-log-viewer__row--error { border-left-color: var(--color-error-line); }\n.lintje-log-viewer__row.is-selected {\n  background: var(--color-choice-active-bg);\n  box-shadow: inset 0 0 0 1px var(--color-accent-line);\n}\n\n.lintje-log-viewer__toggle { flex: 0 0 var(--space-6); height: var(--space-6); }\n.lintje-log-viewer__open {\n  display: flex; align-items: center; justify-content: center;\n  width: var(--space-6); height: var(--space-6);\n  color: var(--color-text-primary);\n}\n.lintje-log-viewer__time {\n  flex: 0 0 12.5ch;\n  color: var(--color-text-muted);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.lintje-log-viewer__pick { font: inherit; color: inherit; text-align: left; }\n.lintje-log-viewer__pick:hover { color: var(--color-link); text-decoration: underline; }\n.lintje-log-viewer__level-cell { flex: 0 0 6.5rem; display: flex; min-height: var(--space-6); }\n.lintje-log-viewer__source {\n  flex: 0 0 10ch;\n  color: var(--color-text-muted);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.lintje-log-viewer__message { flex: 1 1 0; min-width: 0; }\n.lintje-log-viewer__body { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }\n.lintje-log-viewer__log.is-nowrap .lintje-log-viewer__message { flex: 0 0 auto; }\n.lintje-log-viewer__log.is-nowrap .lintje-log-viewer__body { white-space: pre; overflow-wrap: normal; }\n.lintje-log-viewer__more {\n  margin-top: var(--space-1);\n  font: var(--text-meta); font-weight: 700;\n  color: var(--color-link);\n}\n.lintje-log-viewer__more:hover { text-decoration: underline; }\n.lintje-log-viewer__details {\n  flex: 0 0 calc(100% - var(--space-6) - var(--space-3));\n  margin: var(--space-1) 0 var(--space-1) calc(var(--space-6) + var(--space-3));\n  font-family: var(--font-ui);\n}\n.lintje-log-viewer__number {\n  flex: 0 0 5ch;\n  color: var(--color-text-muted);\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n}\n\n.lintje-log-viewer__divider {\n  display: flex; align-items: center; gap: var(--space-2);\n  margin: var(--space-1) var(--space-4);\n  font: var(--text-meta); font-weight: 700;\n  color: var(--color-accent-text);\n}\n.lintje-log-viewer__divider::before,\n.lintje-log-viewer__divider::after {\n  content: '';\n  flex: 1;\n  height: 2px;\n  background: var(--color-accent-line);\n}\n.lintje-log-viewer__divider::before { flex: 0 0 var(--space-4); }\n.lintje-log-viewer__note {\n  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);\n  margin: 0 var(--space-4) var(--space-2);\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-border-default);\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n.lintje-log-viewer__empty {\n  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);\n  padding: var(--space-10) var(--space-6);\n  font: var(--text-ui);\n  color: var(--color-text-muted);\n  text-align: center;\n}\n.lintje-log-viewer__empty p { margin: 0; }\n.lintje-log-viewer__empty-title { font-weight: 700; color: var(--color-text-primary); }\n\n.lintje-log-viewer__foot {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-2) var(--space-3);\n  position: relative;\n  min-height: calc(var(--h-button-compact) + 2 * var(--space-1));\n  padding: var(--space-1) var(--space-3);\n  border: 1px solid var(--color-border-default);\n  /* Always 2 px, coloured only when it says something: the bar keeps one height in every state. */\n  border-top: 2px solid transparent;\n  background: var(--color-bg-surface);\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n.lintje-log-viewer__foot.is-away,\n.lintje-log-viewer__foot.is-chosen {\n  background: var(--color-choice-active-bg);\n  color: var(--color-text-primary);\n  border-top-color: var(--color-accent-line);\n}\n/* Buttons at the end stand as far from the edge as from the top and bottom. */\n.lintje-log-viewer__foot.is-chosen { padding-right: var(--space-1); }\n/* As in the conversation: centred over the last lines, just above the bar. */\n.lintje-log-viewer__latest {\n  position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-4));\n  display: flex; justify-content: center;\n  pointer-events: none;\n  animation: lintje-fade-in var(--dur-base) var(--ease-in-motion) both;\n}\n.lintje-log-viewer__latest-button {\n  display: inline-flex;\n  background: var(--color-bg-surface);\n  box-shadow: var(--shadow-popover);\n  pointer-events: auto;\n}\n.lintje-log-viewer__state { display: flex; align-items: center; min-width: 0; }\n.lintje-log-viewer__live { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--color-text-primary); }\n.lintje-log-viewer__sep { margin: 0 var(--space-2); }\n.lintje-log-viewer__state .lintje-badge { margin-right: var(--space-2); }\n.lintje-log-viewer__dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-error); }\n.lintje-log-viewer__foot-actions { display: inline-flex; align-items: center; gap: var(--space-1); }\n.lintje-log-viewer__count { white-space: nowrap; }\n\n.lintje-log-viewer__skeleton { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0; }\n.lintje-log-viewer__skeleton-row {\n  display: grid;\n  grid-template-columns: 12.5ch 4rem minmax(0, 1fr);\n  gap: var(--space-3);\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-log-viewer__row .lintje-log-viewer__time,\n  .lintje-log-viewer__row .lintje-log-viewer__level-cell,\n  .lintje-log-viewer__row .lintje-log-viewer__source { flex: 0 0 auto; }\n  .lintje-log-viewer__row:not(.lintje-log-viewer__row--raw) .lintje-log-viewer__message { flex: 0 0 100%; }\n  .lintje-log-viewer__details { flex-basis: 100%; margin-left: 0; }\n  .lintje-log-viewer__log.is-nowrap .lintje-log-viewer__body { white-space: pre-wrap; }\n}\n", N = [
+	"all",
+	"error",
+	"warning",
+	"info",
+	"debug"
+], P = {
+	all: "Alles",
+	error: "Fouten",
+	warning: "Let op",
+	info: "Info",
+	debug: "Debug"
+}, F = {
+	error: {
+		tone: "error",
+		icon: "functioneel-foutmelding"
+	},
+	warning: {
+		tone: "warning",
+		icon: "functioneel-waarschuwing"
+	},
+	info: {
+		tone: "neutral",
+		icon: "functioneel-info"
+	},
+	debug: { tone: "subtle" }
+}, I = 8, L = 5e3, R = class extends h {
+	constructor(...e) {
+		super(...e), this.view = {
+			wrap: !0,
+			fold: !0,
+			time: "clock",
+			columns: {
+				time: !0,
+				level: !0,
+				source: !0
+			}
+		}, this.hit = 1, this.following = !0, this.unreadFrom = null, this.clearedAfter = null, this.unfolded = /* @__PURE__ */ new Set(), this.opened = /* @__PURE__ */ new Set(), this.activeId = null, this.copied = null, this.message = "", this.fit = "wide", this.#e = new n(this), this.#t = 0, this.#n = null, this.#r = "", this.#i = !1, this.#a = !1, this.#o = {
+			lines: 0,
+			errors: 0
+		}, this.#s = null, this.#c = null, this.#l = 0, this.#u = null, this.#d = null, this.#f = 0, this.#p = "wide", this.onScroll = () => {
+			let e = this.log;
+			e && (e.scrollHeight - e.scrollTop - e.clientHeight <= I ? this.following || this.toLatest(!1) : e.scrollTop < this.#t - 1 && this.following && (this.following = !1), this.#t = e.scrollTop);
+		}, this.onAnyAction = (e) => {
+			let [t] = e.detail.split(":");
+			t === "view" ? this.onViewAction(e) : t === "copy" || t === "save" ? this.onCopyAction(e) : this.onMoreAction(e);
+		}, this.onRowsKeydown = (e) => {
+			let t = [...this.renderRoot.querySelectorAll(".lintje-log-viewer__row")];
+			if (!t.length) return;
+			let n = t.findIndex((e) => e.dataset.id === this.activeId), r = n === -1 ? t.length - 1 : n, i = r;
+			switch (e.key) {
+				case "ArrowDown":
+					i = Math.min(t.length - 1, r + 1);
+					break;
+				case "ArrowUp":
+					i = Math.max(0, r - 1);
+					break;
+				case "Home":
+					i = 0;
+					break;
+				case "End":
+					i = t.length - 1;
+					break;
+				case "Enter":
+					if (e.target !== t[r]) return;
+					e.preventDefault(), this.select(this.data?.selected === this.activeId ? null : this.activeId);
+					return;
+				default: return;
+			}
+			e.preventDefault();
+			let a = t[i];
+			if (this.activeId = a.dataset.id ?? null, a.focus({ preventScroll: !0 }), e.key === "End") this.toLatest();
+			else {
+				this.following = !1;
+				let e = this.log;
+				e && this.reveal(a, e);
+			}
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			l,
+			a,
+			i(M)
+		];
+	}
+	static {
+		this.properties = {
+			data: { attribute: !1 },
+			view: { state: !0 },
+			hit: { state: !0 },
+			following: { state: !0 },
+			unreadFrom: { state: !0 },
+			clearedAfter: { state: !0 },
+			unfolded: { state: !0 },
+			opened: { state: !0 },
+			activeId: { state: !0 },
+			copied: { state: !0 },
+			message: { state: !0 },
+			fit: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	get dataSettings() {
+		return this.data ?? void 0;
+	}
+	disconnectedCallback() {
+		this.#s && clearTimeout(this.#s), this.#c && clearTimeout(this.#c), cancelAnimationFrame(this.#l), this.#u?.disconnect(), this.#u = null, this.#d = null, super.disconnectedCallback();
+	}
+	get entries() {
+		return this.data?.entries ?? [];
+	}
+	get shown() {
+		let e = this.entries;
+		if (!this.clearedAfter) return e;
+		let t = e.findIndex((e) => e.id === this.clearedAfter);
+		return t === -1 ? e : e.slice(t + 1);
+	}
+	get filter() {
+		let e = this.data?.filter ?? {};
+		return {
+			level: e.level ?? "all",
+			search: e.search ?? "",
+			onlyHits: !!e.onlyHits
+		};
+	}
+	get filtered() {
+		let { level: e, onlyHits: t } = this.filter;
+		return e !== "all" || t && !!this.term;
+	}
+	get term() {
+		return this.filter.search.trim().toLowerCase();
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), !e.has("data")) return;
+		this.term !== this.#r && (this.#r = this.term, this.hit = 1, this.term && (this.following = !1, this.#i = !0));
+		let t = this.entries, n = t.at(-1)?.id ?? null;
+		if (this.#n !== null && n !== this.#n) {
+			let e = t.findIndex((e) => e.id === this.#n), n = e === -1 ? [] : t.slice(e + 1);
+			n.length && this.arrive(n);
+		}
+		this.#n = n;
+	}
+	arrive(e) {
+		!this.following && !this.unreadFrom && (this.unreadFrom = e[0].id), this.data?.live && (this.#o.lines += e.length, this.#o.errors += e.filter((e) => e.level === "error").length, this.#s ??= setTimeout(() => {
+			this.#s = null;
+			let { lines: e, errors: t } = this.#o;
+			if (this.#o = {
+				lines: 0,
+				errors: 0
+			}, !e) return;
+			let n = e === 1 ? "1 nieuwe regel" : `${s(e)} nieuwe regels`, r = t === 0 ? "" : t === 1 ? ", waarvan 1 fout" : `, waarvan ${t} fouten`;
+			this.say(`${n}${r}`);
+		}, L));
+	}
+	updated(e) {
+		super.updated(e), this.watchFit(), this.fit !== this.#p && (this.#p = this.fit, requestAnimationFrame(() => this.refit()));
+		let t = this.log;
+		if (t && (this.#i ? (this.#i = !1, this.reveal(t.querySelector("lintje-highlight[current]"), t)) : this.following && (t.scrollTop = t.scrollHeight), e.has("data") && this.#a)) {
+			this.#a = !1;
+			let e = this.shown.length;
+			this.say(e === 1 ? "1 regel" : `${s(e)} regels`);
+		}
+	}
+	watchFit() {
+		let e = this.renderRoot.querySelector(".lintje-log-viewer__filters");
+		e && e !== this.#d && typeof ResizeObserver < "u" && (this.#u?.disconnect(), this.#u = new ResizeObserver(() => this.refit()), this.#u.observe(e), this.#d = e);
+	}
+	refit() {
+		let e = this.renderRoot.querySelector(".lintje-log-viewer__filters");
+		if (!e) return;
+		let n = t(e, "--space-2", 8), r = 10 * t(e, "--space-10", 40), i = 3 * t(e, "--h-button", 48) + 2 * n, a = 12 * t(e, "--space-4", 16), o = e.querySelector("lintje-segmented");
+		o && (this.#f = Math.max(this.#f, o.getBoundingClientRect().width));
+		let s = parseFloat(getComputedStyle(e).columnGap) || 0, c = r + s + i, l = e.clientWidth, u;
+		u = e.classList.contains("is-raw") ? l >= c ? "wide" : "narrow" : l < a + s + c ? "narrow" : !this.#f || l >= this.#f + s + c ? "wide" : "compact", u !== this.fit && (this.fit = u);
+	}
+	get log() {
+		return this.renderRoot.querySelector(".lintje-log-viewer__log");
+	}
+	reveal(e, t) {
+		if (!e) return;
+		let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
+		(r.top < n.top || r.bottom > n.bottom) && (t.scrollTop += r.top - n.top - n.height / 3);
+	}
+	toLatest(e = !0) {
+		this.following = !0, this.unreadFrom = null;
+		let t = this.log;
+		e && t && (t.scrollTop = t.scrollHeight);
+	}
+	say(e) {
+		cancelAnimationFrame(this.#l), this.message = "", this.#l = requestAnimationFrame(() => this.message = e);
+	}
+	askFilter(e) {
+		let t = {
+			...this.filter,
+			...e
+		};
+		this.#a = e.level !== void 0 || e.onlyHits !== void 0, this.emit("lintje-log-filter-change", t);
+	}
+	select(e) {
+		this.emit("lintje-log-select", e);
+	}
+	get hitCounts() {
+		let e = this.term;
+		return this.shown.map((t) => C(x(t.message), e));
+	}
+	onStep(e) {
+		e.stopPropagation();
+		let t = this.hitCounts.reduce((e, t) => e + t, 0);
+		if (!t) return;
+		let n = Math.min(this.hit, t);
+		this.hit = (n - 1 + e.detail + t) % t + 1, this.following = !1, this.#i = !0;
+	}
+	async copy(e, t) {
+		try {
+			await navigator.clipboard?.writeText(e);
+		} catch {
+			return;
+		}
+		this.copied = t, this.#c && clearTimeout(this.#c), this.#c = setTimeout(() => this.copied = null, m), this.say("Gekopieerd");
+	}
+	get fileName() {
+		return (this.data?.title ?? "log").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "log";
+	}
+	onViewAction(e) {
+		e.stopPropagation();
+		let [, t] = e.detail.split(":"), n = this.view;
+		t === "wrap" ? this.view = {
+			...n,
+			wrap: !n.wrap
+		} : t === "fold" ? this.view = {
+			...n,
+			fold: !n.fold
+		} : t === "clock" || t === "since" ? this.view = {
+			...n,
+			time: t
+		} : t === "time" || t === "level" || t === "source" ? this.view = {
+			...n,
+			columns: {
+				...n.columns,
+				[t]: !n.columns[t]
+			}
+		} : t === "only-hits" && this.askFilter({ onlyHits: !this.filter.onlyHits });
+	}
+	onCopyAction(e) {
+		e.stopPropagation();
+		let t = this.shown, n = this.fileName;
+		switch (e.detail) {
+			case "copy:text":
+				this.copy(k(t), "menu");
+				break;
+			case "copy:json":
+				this.copy(A(t), "menu");
+				break;
+			case "save:log":
+				g(`${n}.log`, k(t), "text/plain");
+				break;
+			case "save:csv":
+				_(n, j(t));
+				break;
+			case "save:json": g(`${n}.json`, A(t), "application/json");
+		}
+	}
+	onMoreAction(e) {
+		e.stopPropagation(), e.detail === "log:clear" ? (this.clearedAfter = this.entries.at(-1)?.id ?? null, this.toLatest()) : this.emit("lintje-log-action", e.detail);
+	}
+	viewItems(e) {
+		let { wrap: t, fold: n, time: r, columns: i } = this.view, a = this.entries.find((e) => e.at), o = this.entries.find((e) => e.time);
+		return [
+			{ heading: "Regels" },
+			{
+				value: "view:wrap",
+				label: "Lange regels afbreken",
+				checked: t
+			},
+			{
+				value: "view:fold",
+				label: "Lange berichten inklappen",
+				checked: n
+			},
+			...e ? [] : [
+				"separator",
+				{ heading: "Tijd" },
+				{
+					value: "view:clock",
+					label: "Kloktijd",
+					checked: r === "clock",
+					radio: !0,
+					hint: o?.time
+				},
+				{
+					value: "view:since",
+					label: "Sinds de eerste regel",
+					checked: r === "since",
+					radio: !0,
+					hint: D(o?.at, a?.at) ?? void 0
+				},
+				"separator",
+				{ heading: "Kolommen" },
+				{
+					value: "view:time",
+					label: "Tijd",
+					checked: i.time
+				},
+				{
+					value: "view:level",
+					label: "Niveau",
+					checked: i.level
+				},
+				{
+					value: "view:source",
+					label: "Bron",
+					checked: i.source
+				}
+			],
+			"separator",
+			{ heading: "Zoeken" },
+			{
+				value: "view:only-hits",
+				label: "Alleen regels met een treffer",
+				checked: this.filter.onlyHits,
+				disabled: !this.term && !this.filter.onlyHits,
+				reason: "Zoek eerst een woord"
+			}
+		];
+	}
+	copyItems() {
+		return [
+			{ heading: "Kopiëren" },
+			{
+				value: "copy:text",
+				label: "Getoonde regels als tekst",
+				hint: s(this.shown.length)
+			},
+			{
+				value: "copy:json",
+				label: "Getoonde regels als JSON"
+			},
+			"separator",
+			{ heading: "Downloaden" },
+			{
+				value: "save:log",
+				label: "Tekstbestand",
+				hint: ".log"
+			},
+			{
+				value: "save:csv",
+				label: "Voor een spreadsheet",
+				hint: ".csv"
+			},
+			{
+				value: "save:json",
+				label: "JSON",
+				hint: ".json"
+			}
+		];
+	}
+	moreItems() {
+		let e = this.data?.actions ?? [];
+		return [
+			{ heading: "Dit venster" },
+			{
+				value: "log:clear",
+				label: "Venster leegmaken",
+				disabled: this.shown.length === 0
+			},
+			...e.length ? ["separator", ...e] : []
+		];
+	}
+	render() {
+		let e = this.data;
+		if (!e) return o;
+		let t = this.entries, n = e.state ?? "ready", r = n === "loading" ? "loading" : n === "empty" || !t.length && !e.live && !this.filtered && n !== "error" ? "empty" : "ready", i = S(t), a = this.#e.matches;
+		return u`<lintje-tile
+        class="lintje-log-viewer__tile"
+        span=${e.span ?? o}
+        heading=${e.title ?? o}
+        icon=${e.icon ?? o}
+        subtitle=${e.subtitle ?? o}
+        intro=${e.intro ?? o}
+        footnote=${e.footnote ?? o}
+        ?expandable=${!!e.expandable && r === "ready"}
+        state=${r}
+        message=${e.message ?? (r === "empty" ? "Er zijn geen logregels." : o)}
+        @lintje-tile-expand=${(e) => {
+			e.stopPropagation(), this.expand(!0);
+		}}
+      >
+        ${this.renderNotice(e, n)}
+        <div slot="loading" class="lintje-log-viewer__skeleton" aria-hidden="true">
+          ${[
+			72,
+			48,
+			85,
+			60,
+			38,
+			77,
+			54,
+			66
+		].map((e) => u`<span class="lintje-log-viewer__skeleton-row">
+              <lintje-skeleton width="12ch" height="1rem"></lintje-skeleton>
+              <lintje-skeleton width="4rem" height="1rem"></lintje-skeleton>
+              <lintje-skeleton width="${e}%" height="1rem"></lintje-skeleton>
+            </span>`)}
+        </div>
+        <div class="lintje-log-viewer">
+          ${this.renderFilters(i)} ${this.renderFrame(i, a)}
+        </div>
+      </lintje-tile>
+      ${this.renderExpandModal(this.expanded ? this.renderLines(i, a, "modal") : o, {
+			heading: e.title,
+			subtitle: e.subtitle
+		})}`;
+	}
+	renderTools(e) {
+		return this.fit === "narrow" ? u`<span class="lintje-log-viewer__tools">
+        <lintje-menu-button
+          accessible-label="Weergave, kopiëren en meer"
+          leading-icon="functioneel-meer"
+          variant="tertiary"
+          placement="bottom-end"
+          .items=${[
+			...this.viewItems(e),
+			"separator",
+			...this.copyItems(),
+			"separator",
+			...this.moreItems()
+		]}
+          @lintje-action=${this.onAnyAction}
+        ></lintje-menu-button>
+      </span>` : u`<span class="lintje-log-viewer__tools">
+      <lintje-menu-button
+        accessible-label="Weergave"
+        leading-icon="functioneel-filters"
+        variant="tertiary"
+        placement="bottom-end"
+        .items=${this.viewItems(e)}
+        @lintje-action=${this.onViewAction}
+      ></lintje-menu-button>
+      <lintje-menu-button
+        accessible-label=${this.copied === "menu" ? "Gekopieerd" : "Kopiëren of downloaden"}
+        leading-icon=${this.copied === "menu" ? "functioneel-vinkje" : "functioneel-kopieren"}
+        variant="tertiary"
+        placement="bottom-end"
+        .items=${this.copyItems()}
+        @lintje-action=${this.onCopyAction}
+      ></lintje-menu-button>
+      <lintje-menu-button
+        accessible-label="Meer acties"
+        leading-icon="functioneel-meer"
+        variant="tertiary"
+        placement="bottom-end"
+        .items=${this.moreItems()}
+        @lintje-action=${this.onMoreAction}
+      ></lintje-menu-button>
+    </span>`;
+	}
+	renderNotice(e, t) {
+		return t === "error" ? u`<lintje-announcement
+        slot="notice"
+        .data=${{
+			kind: "error",
+			text: e.message ?? "De logregels komen niet binnen.",
+			live: !0
+		}}
+      >
+        <lintje-button
+          slot="action"
+          variant="tertiary"
+          size="compact"
+          @click=${() => this.emit("lintje-log-retry")}
+          >Opnieuw proberen</lintje-button
+        >
+      </lintje-announcement>` : e.notice ? u`<lintje-announcement slot="notice" .data=${e.notice}></lintje-announcement>` : o;
+	}
+	renderFilters(e) {
+		let t = this.fit !== "wide", { level: n, search: r } = this.filter, i = this.data?.counts, a = N.map((e) => {
+			let n = i?.[e], r = P[e];
+			return t ? {
+				value: e,
+				label: n === void 0 ? r : `${r} (${s(n)})`
+			} : {
+				value: e,
+				label: r,
+				count: n
+			};
+		}), c = this.hitCounts.reduce((e, t) => e + t, 0), l = e ? o : t ? u`<lintje-select
+            class="lintje-log-viewer__level"
+            label="Niveau"
+            hide-label
+            stacked
+            .value=${n}
+            .options=${a}
+            @lintje-change=${(e) => {
+			e.stopPropagation(), this.askFilter({ level: e.detail });
+		}}
+          ></lintje-select>` : u`<lintje-segmented
+            class="lintje-log-viewer__level"
+            label="Niveau"
+            hide-label
+            .value=${n}
+            .options=${a}
+            @lintje-change=${(e) => {
+			e.stopPropagation(), this.askFilter({ level: e.detail });
+		}}
+          ></lintje-segmented>`;
+		return u`<div
+      class=${f({
+			"lintje-log-viewer__filters": !0,
+			[`is-${this.fit}`]: !0,
+			"is-raw": e
+		})}
+    >
+      ${l}
+      <lintje-find
+        class="lintje-log-viewer__find"
+        label="Zoeken in log"
+        .value=${r}
+        .total=${this.term ? c : null}
+        .current=${c ? Math.min(this.hit, c) : 0}
+        @lintje-change=${(e) => {
+			e.stopPropagation(), this.askFilter({ search: e.detail });
+		}}
+        @lintje-find-step=${this.onStep}
+      ></lintje-find>
+      ${this.renderTools(e)}
+    </div>`;
+	}
+	renderFrame(e, t) {
+		return u`<div class="lintje-log-viewer__frame">
+        ${this.renderLines(e, t, "tile")} ${this.renderFoot()}
+      </div>
+      <p class="visually-hidden" role="status" aria-atomic="false">${this.message}</p>`;
+	}
+	renderLines(e, t, n) {
+		let r = this.data, i = this.shown, a = this.hitCounts, l = [];
+		a.reduce((e, t, n) => (l[n] = e, e + t), 1);
+		let d = a.reduce((e, t) => e + t, 0), p = d ? Math.min(this.hit, d) : 0, m = n === "tile", h = m && i.some((e) => e.id === this.activeId) ? this.activeId : i.at(-1)?.id ?? null, g = this.clearedAfter ? this.entries.length - i.length : 0, _ = !this.following && this.unreadFrom, v = _ ? i.length - i.findIndex((e) => e.id === this.unreadFrom) : 0;
+		return u`<div
+      class=${f({
+			"lintje-log-viewer__log": !0,
+			"lintje-log-viewer__log--expanded": !m,
+			"is-nowrap": !this.view.wrap && !t,
+			"is-mobile": t
+		})}
+      role="log"
+      aria-live="off"
+      aria-label=${r?.title ?? "Log"}
+      tabindex=${m ? o : "0"}
+      @scroll=${m ? this.onScroll : o}
+      @keydown=${m ? this.onRowsKeydown : o}
+    >
+      <div class="lintje-log-viewer__rows">
+        ${r?.truncated ? u`<p class="lintje-log-viewer__note">
+              ${s(r.truncated)} oudere regels niet getoond
+            </p>` : o}
+        ${g ? u`<p class="lintje-log-viewer__note">
+              Venster leeggemaakt${this.clearedTime ? ` om ${this.clearedTime}` : ""}. ${s(g)} regels verborgen.
+              <lintje-button
+                variant="link"
+                size="compact"
+                @click=${() => this.clearedAfter = null}
+                >Weer tonen</lintje-button
+              >
+            </p>` : o}
+        ${c(i, (e) => e.id, (t, r) => this.renderRow(t, {
+			raw: e,
+			first: l[r],
+			hits: a[r],
+			hit: p,
+			active: m && t.id === h,
+			place: n,
+			divider: _ && t.id === this.unreadFrom ? v : 0
+		}))}
+        ${i.length ? o : this.renderEmpty()}
+      </div>
+    </div>`;
+	}
+	get clearedTime() {
+		return this.entries.find((e) => e.id === this.clearedAfter)?.time;
+	}
+	renderEmpty() {
+		return this.filtered && !this.entries.length ? u`<div class="lintje-log-viewer__empty">
+        <p class="lintje-log-viewer__empty-title">Geen regels voor dit filter</p>
+        <p>Kies een ander niveau of pas de zoektekst aan.</p>
+        <lintje-button
+          variant="secondary"
+          size="compact"
+          @click=${() => {
+			this.#a = !0, this.emit("lintje-log-filter-change", {
+				level: "all",
+				search: "",
+				onlyHits: !1
+			});
+		}}
+          >Filter wissen</lintje-button
+        >
+      </div>` : u`<div class="lintje-log-viewer__empty">
+      <p>${this.clearedAfter ? "Wachten op nieuwe regels…" : "Wachten op de eerste regel…"}</p>
+    </div>`;
+	}
+	renderRow(e, t) {
+		let n = x(e.message), r = T(n), i = r.hidden ? C(r.shown, this.term) : t.hits, a = t.hit >= t.first + i && t.hit < t.first + t.hits, c = !this.view.fold || !r.hidden || this.unfolded.has(e.id) || a, l = c ? n : r.shown, d = t.active ? "0" : "-1", p = this.data?.selected === e.id, m = u`<span class="lintje-log-viewer__body"
+        >${w(l, this.term, t.first).map((e) => e.hit === void 0 ? e.text : u`<lintje-highlight kind="match" ?current=${e.hit === t.hit}
+                >${e.text}</lintje-highlight
+              >`)}</span
+      >${r.hidden && this.view.fold && !a ? u`<button
+              type="button"
+              class="lintje-log-viewer__more"
+              tabindex=${d}
+              aria-expanded=${String(c)}
+              @click=${() => this.toggle("unfolded", e.id)}
+            >
+              ${c ? "Minder tonen" : `${r.hidden} regels meer`}
+            </button>` : o}`, h = this.opened.has(e.id);
+		return u`${t.divider ? u`<div class="lintje-log-viewer__divider">${s(t.divider)} nieuw</div>` : o}<div
+      class=${f({
+			"lintje-log-viewer__row": !0,
+			"lintje-log-viewer__row--error": e.level === "error",
+			"lintje-log-viewer__row--raw": t.raw,
+			"is-selected": p
+		})}
+      data-id=${e.id}
+      tabindex=${t.place === "tile" ? d : o}
+      aria-current=${p ? "true" : o}
+      @focus=${t.place === "tile" ? () => this.activeId = e.id : o}
+    >
+      ${t.raw ? u`<span class="lintje-log-viewer__number">${e.line ?? ""}</span
+              ><span class="lintje-log-viewer__message">${m}</span>` : this.renderCells(e, m, d, h)}
+      ${h && e.details ? u`<lintje-code
+              class="lintje-log-viewer__details"
+              .text=${e.details}
+              label="Details van de regel"
+            ></lintje-code>` : o}
+    </div>`;
+	}
+	renderCells(e, t, n, r) {
+		let { columns: i, time: a } = this.view, s = this.entries.find((e) => e.at), c = a === "since" ? D(e.at, s?.at) ?? e.time : e.time, l = e.level ? F[e.level] : null;
+		return u`<span class="lintje-log-viewer__toggle">
+        ${e.details ? u`<button
+                type="button"
+                class=${f({
+			"lintje-log-viewer__open": !0,
+			"is-open": r
+		})}
+                tabindex=${n}
+                aria-expanded=${String(r)}
+                aria-label="Details"
+                @click=${() => this.toggle("opened", e.id)}
+              >
+                ${p("functioneel-delta-omlaag", {
+			size: 16,
+			rotate: r ? void 0 : 270
+		})}
+              </button>` : o}
+      </span>
+      ${i.time ? u`<span class="lintje-log-viewer__time"
+              >${c ? u`<button
+                      type="button"
+                      class="lintje-log-viewer__pick"
+                      tabindex="-1"
+                      title="Deze regel kiezen"
+                      @click=${() => this.select(this.data?.selected === e.id ? null : e.id)}
+                    >
+                      <time datetime=${e.at ?? o}>${c}</time>
+                    </button>` : o}</span
+            >` : o}
+      ${i.level ? u`<span class="lintje-log-viewer__level-cell"
+              >${l && e.level ? d({
+			value: v[e.level],
+			tone: l.tone,
+			icon: l.icon
+		}) : o}</span
+            >` : o}
+      ${i.source ? u`<span class="lintje-log-viewer__source">${e.source ?? ""}</span>` : o}
+      <span class="lintje-log-viewer__message">${t}</span>`;
+	}
+	toggle(e, t) {
+		let n = new Set(this[e]);
+		n.delete(t) || n.add(t), this[e] = n;
+	}
+	renderFoot() {
+		let e = this.data, t = this.shown, n = e?.selected ? this.entries.find((t) => t.id === e.selected) : void 0, r = this.unreadFrom ? t.findIndex((e) => e.id === this.unreadFrom) : -1, i = !this.following && r !== -1 ? t.length - r : 0, a = this.filtered, c = e?.counts?.all, l = a && c !== void 0 ? `${s(t.length)} van ${s(c)} regels` : `${s(c ?? t.length)} regels`;
+		if (n) return u`<div class="lintje-log-viewer__foot is-chosen">
+        <span class="lintje-log-viewer__state">Regel van ${n.time ?? n.line ?? ""} gekozen</span>
+        <span class="lintje-log-viewer__foot-actions">
+          <lintje-button
+            variant="tertiary"
+            size="compact"
+            @click=${() => void this.copy(O(n), "line")}
+            >${this.copied === "line" ? "Gekopieerd" : "Regel kopiëren"}</lintje-button
+          >
+          <lintje-button
+            variant="tertiary"
+            size="compact"
+            @click=${() => void this.copy(window.location.href, "link")}
+            >${this.copied === "link" ? "Gekopieerd" : "Link naar regel"}</lintje-button
+          >
+          <lintje-icon-button
+            icon="functioneel-kruis"
+            label="Keuze opheffen"
+            variant="flat"
+            @click=${() => this.select(null)}
+          ></lintje-icon-button>
+        </span>
+      </div>`;
+		let f = !!e?.live, p = f ? u`<span class="lintje-log-viewer__live"
+          ><span class="lintje-log-viewer__dot" aria-hidden="true"></span>Live</span
+        ><span class="lintje-log-viewer__sep" aria-hidden="true">·</span>` : o;
+		return i ? u`<div class="lintje-log-viewer__foot is-away">
+        <span class="lintje-log-viewer__state"
+          >${p}${d({
+			value: s(i),
+			variant: "count"
+		})}
+          ${i === 1 ? "nieuwe regel onder" : "nieuwe regels onder"}</span
+        >
+        <span class="lintje-log-viewer__count">${l}</span>
+        <div class="lintje-log-viewer__latest">
+          <span class="lintje-log-viewer__latest-button">
+            <lintje-button
+              variant="tertiary"
+              size="chrome"
+              icon="functioneel-pijl-omlaag"
+              @click=${() => this.toLatest()}
+              >Naar nieuwste</lintje-button
+            >
+          </span>
+        </div>
+      </div>` : u`<div class="lintje-log-viewer__foot">
+      <span class="lintje-log-viewer__state">
+        ${p}${f ? this.following ? "Volgt de nieuwste regel. Scrol omhoog om stil te staan." : "Staat stil. Scrol helemaal naar onder om weer te volgen." : "Er komen geen regels meer bij."}
+      </span>
+      <span class="lintje-log-viewer__count">${l}</span>
+    </div>`;
+	}
+};
+r("lintje-log-viewer", R);
+//#endregion
+export { R as LintjeLogViewer };