lintje 0.1.1

package/dist-elements/chunks/stagger-9hYzxhMG.js

@@ -0,0 +1,478 @@
+import { A as e, Gt as t, Kt as n, a as r, c as i, ht as a, l as o, mt as s, pt as c, qt as l, r as u, s as d, u as f, ut as p } from "./base-rBLTcEIv.js";
+//#region src/components/shared/charts/shared/scale.ts
+var m = {
+	width: 900,
+	height: 264,
+	left: 52,
+	right: 8,
+	top: 16,
+	bottom: 28
+}, h = .25, g = 16, _ = 10, v = .3;
+function y(e, t, { fontFamily: n = "" } = {}) {
+	let r = Math.min(320, Math.round(t * v)), a = Math.ceil(Math.max(0, ...e.map((e) => d(e, n)))), o = Math.min(r, a);
+	return {
+		labelEnd: o,
+		barStart: o + _,
+		fit: (e) => i(e, o, n)
+	};
+}
+function b(e, t, { minimum: n = g, fontFamily: i = "" } = {}) {
+	let a = Math.min(96, Math.round(t * h)), o = (t) => Math.ceil(Math.max(0, ...e.map((e) => d(t(e), i))) + 8), s = r, c = o(s);
+	return c > a && (s = u, c = o(s)), {
+		width: Math.min(a, Math.max(n, c)),
+		format: s
+	};
+}
+function x(e) {
+	return e.width - e.left - e.right;
+}
+function ee(e) {
+	return e.height - e.top - e.bottom;
+}
+function S(e, t = 4) {
+	if (e <= 0) return {
+		max: 1,
+		ticks: [0, 1]
+	};
+	let n = e / t, r = 10 ** Math.floor(Math.log10(n)), i = n / r, a = (i <= 1 ? 1 : i <= 2 ? 2 : i <= 2.5 ? 2.5 : i <= 5 ? 5 : 10) * r, o = Math.ceil(e / a) * a, s = [];
+	for (let e = 0; e <= o + 1e-9; e += a) s.push(Number(e.toFixed(6)));
+	return {
+		max: o,
+		ticks: s
+	};
+}
+function C(e, t, n) {
+	return n.top + ee(n) * (1 - e / t);
+}
+function te(e, t, n) {
+	return t <= 1 ? n.left + x(n) / 2 : n.left + x(n) * e / (t - 1);
+}
+function w(e, t, n, r = .22) {
+	let i = x(n) / t, a = i * (1 - r);
+	return {
+		x: n.left + i * e + (i - a) / 2,
+		width: a,
+		center: n.left + i * e + i / 2,
+		bandWidth: i
+	};
+}
+//#endregion
+//#region src/components/shared/charts/shared/controller.ts
+function T(e, t = {}) {
+	return e.plotArea ? e.plotArea : {
+		...m,
+		...t,
+		width: e.controller.width,
+		height: e.controller.height
+	};
+}
+var E = .35, D = 120, O = Array.from({ length: 21 }, (e, t) => t / 20), k = 0, ne = class {
+	constructor(e) {
+		this.id = `lintje-chart-${++k}`, this.width = m.width, this.height = m.height, this.inView = !1, this.tooltip = null, this.hoverIndex = null, this.status = "", this.hiddenSeries = [], this.hoverSegment = null, this.selectedCell = null, this.dimmedClass = null, this.zoom = 1, this.mapCentre = null, this.mapNudge = null, this.mapSelection = null, this.hostSelection = void 0, this.legendOpen = null, this.leaflet = null, this.leafletView = null, this.element = null, this.measuring = {}, this.resizeObserver = null, this.intersectionObserver = null, this.attach = (e) => {
+			e !== this.element && (this.unwatch(), e instanceof HTMLElement && (this.element = e, this.read(), this.watchSize(e), this.watchVisibility(e)));
+		}, this.onWindowKey = (e) => {
+			e.key === "Escape" && this.hideTooltip();
+		}, this.watching = !1, this.notify = e;
+	}
+	requestUpdate() {
+		this.notify();
+	}
+	get fontFamily() {
+		return this.element ? getComputedStyle(this.element).getPropertyValue("--font-ui") : "";
+	}
+	measure(e) {
+		let t = e.width === this.measuring.width && e.height === this.measuring.height && e.fit === this.measuring.fit;
+		this.measuring = e, !t && this.element && (this.read(), this.watchSize(this.element));
+	}
+	watchSize(e) {
+		this.measuring.width ? this.resizeObserver || (this.resizeObserver = new ResizeObserver(() => {
+			let { width: e, height: t } = this;
+			this.read(), (this.width !== e || this.height !== t) && this.requestUpdate();
+		}), this.resizeObserver.observe(e)) : (this.resizeObserver?.disconnect(), this.resizeObserver = null);
+	}
+	detach() {
+		this.unwatch(), this.leaflet?.destroy(), this.leaflet = null;
+	}
+	unwatch() {
+		this.unwatchEscape(), this.resizeObserver?.disconnect(), this.intersectionObserver?.disconnect(), this.resizeObserver = null, this.intersectionObserver = null, this.element = null;
+	}
+	showTooltip(e, t, n) {
+		let r = n ?? e.currentTarget;
+		if (!(r instanceof Element)) return;
+		let i = r.closest("[data-tooltip-anchor]");
+		if (!i) return;
+		let a = i.getBoundingClientRect();
+		this.showTooltipAt(e.clientX - a.left, e.clientY - a.top, t);
+	}
+	showTooltipAt(e, t, n) {
+		this.tooltip = {
+			x: e,
+			y: t,
+			content: n
+		}, this.watchEscape(), this.requestUpdate();
+	}
+	hideTooltip() {
+		this.tooltip && (this.tooltip = null, this.unwatchEscape(), this.requestUpdate());
+	}
+	hoverAt(e, t, n) {
+		this.hoverIndex = e, t && n ? this.showTooltip(t, n) : (this.tooltip = null, this.unwatchEscape(), this.requestUpdate());
+	}
+	dismiss(e) {
+		return e.key !== "Escape" || !this.tooltip ? !1 : (e.stopPropagation(), this.hideTooltip(), !0);
+	}
+	watchEscape() {
+		this.watching || typeof window > "u" || (this.watching = !0, window.addEventListener("keydown", this.onWindowKey));
+	}
+	unwatchEscape() {
+		this.watching && (this.watching = !1, window.removeEventListener("keydown", this.onWindowKey));
+	}
+	toggleSeries(e) {
+		this.hiddenSeries = this.hiddenSeries.includes(e) ? this.hiddenSeries.filter((t) => t !== e) : [...this.hiddenSeries, e], this.requestUpdate();
+	}
+	read() {
+		let t = this.element;
+		if (!t) return;
+		this.measuring.width && (this.width = Math.max(160, Math.round(t.getBoundingClientRect().width)));
+		let n = this.measuring.height;
+		if (typeof n == "number") this.height = n;
+		else if (typeof n == "string") {
+			let r = Math.round(e(t, n, 0));
+			r && (this.height = this.measuring.fit ? Math.max(D, r - this.extras()) : r);
+		}
+	}
+	extras() {
+		let e = this.element;
+		if (!e) return 0;
+		let t = e.getBoundingClientRect().height - this.height;
+		return t > 0 ? Math.ceil(t) : 0;
+	}
+	watchVisibility(e) {
+		this.inView || (typeof IntersectionObserver > "u" ? this.enter() : (this.intersectionObserver = new IntersectionObserver(([e]) => {
+			let t = e.rootBounds?.height ?? window.innerHeight;
+			(e.intersectionRatio >= E || e.intersectionRect.height >= t * E) && this.enter();
+		}, { threshold: O }), this.intersectionObserver.observe(e)));
+	}
+	enter() {
+		this.intersectionObserver?.disconnect(), this.intersectionObserver = null, !this.inView && (this.inView = !0, this.requestUpdate());
+	}
+}, A = o;
+function j(e) {
+	return typeof e == "string" && A.includes(e);
+}
+var M = [
+	"circle",
+	"square",
+	"triangle",
+	"diamond",
+	"hexagon",
+	"triangle-down",
+	"pentagon",
+	"plus",
+	"cross",
+	"octagon",
+	"triangle-right",
+	"triangle-left",
+	"star",
+	"star-4",
+	"hourglass",
+	"rectangle",
+	"kite"
+];
+function N(e) {
+	return M[A.indexOf(e)];
+}
+function P(e) {
+	return Math.sqrt(2 * Math.PI / (e * Math.sin(2 * Math.PI / e)));
+}
+function F(e, t, n) {
+	let r = P(e) * n;
+	return Array.from({ length: e }, (n, i) => {
+		let a = t + i * 2 * Math.PI / e;
+		return [r * Math.cos(a), r * Math.sin(a)];
+	});
+}
+function I(e, t = 0) {
+	let n = e * Math.sqrt(Math.PI / 5) / 2, r = Math.cos(t), i = Math.sin(t);
+	return [
+		[-n, -3 * n],
+		[n, -3 * n],
+		[n, -n],
+		[3 * n, -n],
+		[3 * n, n],
+		[n, n],
+		[n, 3 * n],
+		[-n, 3 * n],
+		[-n, n],
+		[-3 * n, n],
+		[-3 * n, -n],
+		[-n, -n]
+	].map(([e, t]) => [e * r - t * i, e * i + t * r]);
+}
+function L(e, t) {
+	let n = .5, r = t * Math.sqrt(Math.PI / (e * n * Math.sin(Math.PI / e)));
+	return Array.from({ length: 2 * e }, (t, i) => {
+		let a = i % 2 == 0 ? r : n * r, o = -Math.PI / 2 + i * Math.PI / e;
+		return [a * Math.cos(o), a * Math.sin(o)];
+	});
+}
+function R(e) {
+	let t = e * Math.sqrt(Math.PI / 2), n = t / 2;
+	return [
+		[-t, -n],
+		[t, -n],
+		[t, n],
+		[-t, n]
+	];
+}
+function z(e) {
+	let t = e * Math.sqrt(Math.PI / 2.5), n = 1.25 * t;
+	return [
+		[-t, -n],
+		[t, -n],
+		[0, 0],
+		[t, n],
+		[-t, n],
+		[0, 0]
+	];
+}
+function B(e) {
+	let t = e * Math.sqrt(Math.PI);
+	return [
+		[0, -t],
+		[t / 2, 0],
+		[0, t],
+		[-t / 2, 0]
+	];
+}
+function V(e, t = 1) {
+	let n = -Math.PI / 2;
+	switch (e) {
+		case "circle": return null;
+		case "square": return F(4, Math.PI / 4, t);
+		case "diamond": return F(4, n, t);
+		case "triangle": return F(3, n, t);
+		case "triangle-down": return F(3, Math.PI / 2, t);
+		case "pentagon": return F(5, n, t);
+		case "hexagon": return F(6, n, t);
+		case "plus": return I(t);
+		case "cross": return I(t, Math.PI / 4);
+		case "octagon": return F(8, n, t);
+		case "triangle-right": return F(3, 0, t);
+		case "triangle-left": return F(3, Math.PI, t);
+		case "star": return L(5, t);
+		case "star-4": return L(4, t);
+		case "hourglass": return z(t);
+		case "rectangle": return R(t);
+		case "kite": return B(t);
+	}
+}
+function H(e, t = 1, n = 0, r = 0) {
+	let i = V(e, t);
+	if (!i) return `M ${n - t} ${r} a ${t} ${t} 0 1 0 ${t * 2} 0 a ${t} ${t} 0 1 0 ${-t * 2} 0 Z`;
+	let a = (e) => Number(e.toFixed(3));
+	return `${i.map(([e, t], i) => `${i === 0 ? "M" : "L"} ${a(n + e)} ${a(r + t)}`).join(" ")} Z`;
+}
+function U(e, t, n = 0, r = 0) {
+	return H(e ? N(e) : "circle", t, n, r);
+}
+//#endregion
+//#region src/components/shared/charts/shared/colors.ts
+var W = "var(--color-chart-default)", G = {
+	...Object.fromEntries(o.map((e) => [e, f(e)])),
+	other: "var(--color-chart-other)",
+	remainder: "var(--color-chart-remainder)",
+	emphasis: "var(--color-chart-emphasis)"
+};
+function K(e) {
+	if (e != null) return G[e] ?? e;
+}
+function q(e) {
+	return e === G["dark-yellow"] ? "var(--color-chart-dark-yellow-text)" : void 0;
+}
+function J(e) {
+	if (e != null && j(e)) return G[e];
+}
+//#endregion
+//#region src/components/shared/charts/shared/axes.ts
+function Y({ items: e, onToggle: t, position: r = "top" }) {
+	let i = (e) => n`
+    ${e.symbol ? n`<svg class="lintje-legend__marker lintje-legend__marker--symbol" viewBox="0 0 14 14"
+                    ${p({ color: e.color ?? "var(--color-chart-default)" })}
+                    aria-hidden="true" focusable="false">
+            <line x1="0" x2="14" y1="7" y2="7" stroke="currentColor" stroke-width="3" />
+            <path d=${U(e.symbol, 4, 7, 7)} fill="currentColor" />
+          </svg>` : n`<span class="lintje-legend__marker lintje-legend__marker--${e.shape ?? "square"}"
+                     ${p({ color: e.color ?? "var(--color-chart-default)" })}
+                     aria-hidden="true"></span>`}
+    <span class="lintje-legend__label">${e.label}</span>
+  `;
+	return n`
+    <ul class="lintje-legend lintje-legend--${r}">
+      ${e.map((e) => n`
+        <li class="lintje-legend__item ${e.hidden ? "is-hidden" : ""}">
+          ${t ? n`<button type="button" class="lintje-legend__button"
+                           @click=${() => t(e.label)}
+                           aria-pressed=${!e.hidden}>${i(e)}</button>` : i(e)}
+        </li>
+      `)}
+    </ul>
+  `;
+}
+function X(e) {
+	return e ? "group" : "img";
+}
+function Z(e) {
+	return l`
+    <filter id="focus-${e}" filterUnits="userSpaceOnUse" x="-10%" y="-10%" width="120%" height="120%"
+            color-interpolation-filters="sRGB">
+      <feComponentTransfer in="SourceAlpha" result="shape"><feFuncA type="linear" slope="100" /></feComponentTransfer>
+      <feMorphology in="shape" operator="dilate" radius="4" result="outer" />
+      <feFlood class="lintje-chart__focus-ring" />
+      <feComposite in2="outer" operator="in" result="ring" />
+      <feMorphology in="shape" operator="dilate" radius="1" result="inner" />
+      <feFlood class="lintje-chart__focus-gap" />
+      <feComposite in2="inner" operator="in" result="gap" />
+      <feMerge><feMergeNode in="ring" /><feMergeNode in="gap" /><feMergeNode in="SourceGraphic" /></feMerge>
+    </filter>
+  `;
+}
+function Q(e) {
+	return { "--lintje-focus-ring": `url(#focus-${e})` };
+}
+var re = 8;
+function ie(e, t = "") {
+	if (e.length < 2) return e;
+	let n = e.map((e) => d(e.label, t)), r = (t) => {
+		for (let r = 0; r + t < e.length; r += t) {
+			let i = Math.abs(e[r + t].x - e[r].x);
+			if ((n[r] + n[r + t]) / 2 + re > i) return !1;
+		}
+		return !0;
+	}, i = 1;
+	for (; i < e.length && !r(i);) i += 1;
+	return i === 1 ? e : e.filter((e, t) => t % i === 0);
+}
+function ae({ area: e = m, ticks: i, max: a, axisTitle: o, xLabels: s, description: c, defs: u, zeroLine: d = !0, formatTick: f = r, id: h, height: g, fontFamily: _, interactive: v, keys: y }, b) {
+	return n`
+    <figure class="lintje-chart">
+      ${o ? n`<figcaption class="lintje-chart__axis-title">${o}</figcaption>` : t}
+      <!-- The viewBox is set 1:1 to the measured pixels, so 12 px axis text really is
+           12 px — however narrow the tile is. -->
+      <svg
+        viewBox="0 0 ${e.width} ${e.height}"
+        class="lintje-chart__svg"
+        width=${e.width}
+        height=${e.height}
+        ${p({
+		height: `${g ?? e.height}px`,
+		...Q(h)
+	})}
+        role=${X(v)}
+        aria-labelledby="${h}-desc"
+        tabindex=${y ? 0 : t}
+        @keydown=${y?.keydown}
+        @focus=${y?.focus}
+        @blur=${y?.blur}
+      >
+        <desc id="${h}-desc">${c}</desc>
+        <defs>
+          <pattern id="hatch-${h}" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+            <line x1="0" y1="0" x2="0" y2="6" stroke="var(--color-chart-hatch)" stroke-width="2" />
+          </pattern>
+          ${Z(h)}
+          ${u}
+        </defs>
+
+        <!-- Grid + axis labels -->
+        ${i.map((t) => {
+		let n = C(t, a, e), r = t === 0;
+		return l`
+            <g>
+              <line
+                x1=${e.left} x2=${e.width - e.right} y1=${n} y2=${n}
+                stroke=${r && d ? "var(--color-chart-zero)" : "var(--color-chart-grid)"}
+                stroke-width=${r && d ? 1.5 : 1} />
+              <text x=${e.left - 8} y=${n + 4} text-anchor="end" class="lintje-chart__axis-label">
+                ${f(t)}
+              </text>
+            </g>
+          `;
+	})}
+
+        ${b}
+
+        <!-- x-axis labels -->
+        ${ie(s ?? [], _).map((t) => l`
+          <text x=${t.x} y=${e.height - 8} text-anchor="middle" class="lintje-chart__axis-label">
+            ${t.label}
+          </text>
+        `)}
+      </svg>
+    </figure>
+  `;
+}
+function oe({ area: e = m, index: n, count: r, label: i, lastValue: a, pendingHours: o }) {
+	let s = e.left + x(e) * n / (r - 1), c = o > 6, u = e.width - e.right - s, d = u > 140;
+	return c ? l`
+    <g>
+      <line x1=${s} x2=${s} y1=${e.top} y2=${e.height - e.bottom}
+            stroke="var(--color-text-primary)" stroke-width="1.5" stroke-dasharray="4 3" />
+      <text x=${d ? s + 6 : s - 6} y=${e.top + 12}
+            text-anchor=${d ? "start" : "end"} class="lintje-chart__as-of-label">
+        ${i}
+      </text>
+      ${a ? l`<text x=${d ? s + 6 : s - 6} y=${e.top + 26}
+                    text-anchor=${d ? "start" : "end"} class="lintje-chart__axis-label">${a}</text>` : t}
+      <text x=${s + u / 2} y=${e.top + (e.height - e.top - e.bottom) / 2}
+            text-anchor="middle" class="lintje-chart__as-of-note">
+        nog geen gegevens · ${o} ${o === 1 ? "uur" : "uren"} volgen
+      </text>
+    </g>
+  ` : t;
+}
+var $ = c(class extends s {
+	constructor(e) {
+		if (super(e), e.type !== a.ELEMENT) throw Error("placeTooltip only works on an element");
+	}
+	render(e) {
+		return t;
+	}
+	update(e, [n]) {
+		let r = e.element;
+		return r.style.top = `${Math.max(0, n.y - 12)}px`, requestAnimationFrame(() => {
+			if (!r.isConnected) return;
+			let e = r.parentElement?.clientWidth ?? Infinity;
+			r.style.left = `${Math.max(0, Math.min(n.x + 12, e - r.offsetWidth - 8))}px`;
+		}), t;
+	}
+});
+function se(e) {
+	let r = e.tooltip;
+	if (!r) return t;
+	let { content: i } = r;
+	return n`
+    <div class="lintje-chart-tooltip" ${$(r)}>
+      <p class="lintje-chart-tooltip__title">${i.title}</p>
+      ${i.rows.map((e) => n`
+        <p class="lintje-chart-tooltip__row">
+          <span class="lintje-chart-tooltip__label">
+            <span class="lintje-chart-tooltip__marker" ${p({ background: e.color })}></span>
+            ${e.label}
+          </span>
+          <span class="lintje-chart-tooltip__value">${e.value}</span>
+        </p>
+      `)}
+    </div>
+  `;
+}
+//#endregion
+//#region src/components/shared/charts/shared/stagger.ts
+function ce(e, t) {
+	return { "--lintje-stagger": String(t > 1 ? e / (t - 1) : 0) };
+}
+function le(e, t, n, r) {
+	let i = n > 1 ? e / (n - 1) : 0, a = r > 1 ? t / (r - 1) : 0;
+	return { "--lintje-stagger": String(.7 * i + .3 * a) };
+}
+//#endregion
+export { y as C, x as S, C as T, ne as _, Q as a, S as b, Z as c, K as d, q as f, U as g, j as h, X as i, Y as l, A as m, ce as n, oe as o, J as p, se as r, ae as s, le as t, W as u, T as v, te as w, w as x, b as y };

package/dist-elements/content.d.ts

@@ -0,0 +1 @@
+export * from './types/bundle/content.js'

package/dist-elements/content.js

@@ -0,0 +1,9 @@
+import "./tag/prose.js";
+import "./tag/code.js";
+import "./tag/highlight.js";
+import "./tag/translator.js";
+import "./tag/audio-player.js";
+import "./tag/video-player.js";
+import "./tag/transcript.js";
+import "./tag/document-viewer.js";
+import "./tag/gallery.js";

package/dist-elements/core.d.ts

@@ -0,0 +1 @@
+export * from './types/bundle/core.js'

package/dist-elements/core.js

@@ -0,0 +1 @@
+export { Tt as FrameStateController, gt as ICONS, Yt as LINTJE_VERSION, zt as LintjeElement, It as MOBILE, Lt as MediaController, Rt as WIDE, _t as ariaKeyShortcuts, Vt as baseStyles, vt as characterKeys, Bt as define, Dt as getFrameState, Q as iconGlyph, nt as iconIsMissing, rt as iconSource, $ as iconStyles, bt as isTypingTarget, xt as keyLabels, it as loadIcon, at as loadedIcon, ot as loadedIconNames, Nt as lockScroll, st as onIconChange, St as registerShortcut, et as renderIcon, Pt as scrollRoot, Ct as setCharacterKeys, Ot as setFrameState, Ft as setHostConfig, lt as setIconSource, kt as setScrolled, At as setTitleHidden, Ht as shadowCss, wt as shortcuts, jt as subscribeToFrameState, Ut as toShadowCss, Wt as tokenStyles } from "./chunks/base-rBLTcEIv.js";