lintje 0.1.1

package/dist-elements/tag/chat-composer.js

@@ -0,0 +1,492 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, Lt as i, U as a, Z as o, ut as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+import "./radio-group.js";
+import { t as l } from "../chunks/key-CuuOw1KE.js";
+import "./multiselect.js";
+//#region src/components/chat/shared/chat-terms.ts
+function u(e, t = []) {
+	let n = [], r = 0;
+	for (let i of [...t].sort((e, t) => e.start - t.start)) i.start < r || i.end <= i.start || i.end > e.length || (i.start > r && n.push({ text: e.slice(r, i.start) }), n.push({
+		text: e.slice(i.start, i.end),
+		term: i
+	}), r = i.end);
+	return r < e.length && n.push({ text: e.slice(r) }), n;
+}
+var d = /[\p{L}\p{N}]/u;
+function f(e, t = [], n) {
+	let r = e.toLowerCase(), i = t.flatMap((e) => [e.label, ...e.aliases ?? []].map((t) => ({
+		word: t,
+		term: e
+	}))).filter(({ word: e }) => e.trim() !== "").sort((e, t) => t.word.length - e.word.length), a = [];
+	for (let { word: t, term: o } of i) {
+		let i = t.toLowerCase();
+		for (let t = r.indexOf(i); t !== -1; t = r.indexOf(i, t + 1)) {
+			let r = t + i.length;
+			if (t > 0 && d.test(e[t - 1]) || r < e.length && d.test(e[r]) || a.some((e) => t < e.end && r > e.start)) continue;
+			let s = o.source !== void 0 && n !== void 0 && !n.includes(o.source);
+			a.push({
+				start: t,
+				end: r,
+				kind: o.kind,
+				certain: !(o.ambiguous || s)
+			});
+		}
+	}
+	return a.sort((e, t) => e.start - t.start);
+}
+function p(e, t = e.length) {
+	return /\S*$/.exec(e.slice(0, t))?.[0] ?? "";
+}
+function m(e, t = []) {
+	let n = e.toLowerCase();
+	return n ? t.filter((e) => {
+		let t = e.label.toLowerCase();
+		return t !== n && t.split(/\s+/).some((e) => e.startsWith(n));
+	}).slice(0, 5) : [];
+}
+//#endregion
+//#region src/components/chat/chat-composer/chat-composer.css?inline
+var h = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-chat-composer { position: relative; }\n\n/* The frame is the field, so it takes the field's resting border (3:1). */\n.lintje-chat-composer__frame {\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-field);\n}\n\n/* Grows with the text and scrolls at four lines, the captions with it. A line this tall leaves\n   a term's caption room above the word. */\n.lintje-chat-composer__field {\n  position: relative;\n  max-height: calc(var(--h-control) * 4 + var(--space-5));\n  overflow-y: auto;\n}\n.lintje-chat-composer__input {\n  display: block;\n  min-height: calc(var(--h-control) + var(--space-5));\n  padding: var(--space-3) var(--space-4) var(--space-2);\n  font: var(--text-body);\n  line-height: var(--h-control);\n  color: var(--color-text-primary);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.lintje-chat-composer__input.is-empty::before {\n  /* The field's `aria-placeholder` says it; the empty alternative keeps it from being read twice. */\n  content: attr(data-placeholder);\n  content: attr(data-placeholder) / '';\n  position: absolute;\n  color: var(--color-text-placeholder);\n  opacity: 1;\n  pointer-events: none;\n}\n/* The frame takes the ring; without `:has()` the field keeps its own. */\n@supports selector(:has(*)) {\n  .lintje-chat-composer__input:focus-visible { outline: none; }\n  .lintje-chat-composer__frame:has(.lintje-chat-composer__input:focus-visible) {\n    outline: var(--focus-width) solid var(--color-focus);\n    outline-offset: var(--focus-offset);\n  }\n}\n\n/* Dashed gray marks an uncertain term: ambiguous, or of a source that is switched off. */\n.lintje-chat-composer__input::highlight(lintje-term) {\n  background-color: var(--color-term-bg);\n  text-decoration: underline solid var(--color-term-line);\n  text-decoration-thickness: 2px;\n  text-underline-offset: var(--space-1);\n}\n.lintje-chat-composer__input::highlight(lintje-term-uncertain) {\n  text-decoration: underline dashed var(--color-border-suggestion);\n  text-decoration-thickness: 2px;\n  text-underline-offset: var(--space-1);\n}\n\n.lintje-chat-composer__captions { position: absolute; inset: 0; pointer-events: none; }\n.lintje-chat-composer__caption {\n  position: absolute;\n  transform: translateY(-100%);\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  line-height: 1;\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis;\n  color: var(--color-accent-text);\n}\n.lintje-chat-composer__caption.is-uncertain { color: var(--color-text-muted); }\n\n.lintje-chat-composer__bar {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-2);\n}\n.lintje-chat-composer__sources { flex: 0 1 auto; width: auto; min-width: 0; }\n.lintje-chat-composer__hint {\n  flex: 1 1 auto; min-width: 0;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n  text-align: right;\n}\n\n/* A joined group is drawn at the target height itself, so both halves are as tall as \"Versturen\". */\n.lintje-chat-composer__send { position: relative; flex: none; display: flex; gap: 1px; }\n.lintje-chat-composer__send-half { --h-icon-button: var(--h-button); }\n\n.lintje-chat-composer__scrim { position: fixed; inset: 0; z-index: 45; }\n.lintje-chat-composer__options {\n  position: absolute; right: 0; bottom: calc(100% + var(--space-2)); z-index: 46;\n  width: 320px; max-width: calc(100vw - 2 * var(--space-4));\n  display: flex; flex-direction: column; gap: var(--space-4);\n  padding: var(--space-4);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  color: var(--color-text-primary);\n  animation: lintje-rise var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-chat-composer__shortcuts { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-chat-composer__shortcuts-label { font: var(--text-small); font-weight: 700; }\n.lintje-chat-composer__keys {\n  display: grid; grid-template-columns: minmax(0, 1fr) auto;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin: 0;\n  font: var(--text-ui);\n}\n.lintje-chat-composer__key { margin: 0; }\n\n.lintje-chat-composer__completions {\n  position: absolute; left: 0; bottom: calc(100% + var(--space-2)); z-index: 46;\n  width: 360px; max-width: 100%;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-chat-composer__completion {\n  display: flex; align-items: center; justify-content: space-between;\n  gap: var(--space-3);\n  min-height: var(--h-option);\n  padding: 0 var(--space-3);\n  border-bottom: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  cursor: pointer;\n}\n.lintje-chat-composer__completion:last-child { border-bottom: 0; }\n.lintje-chat-composer__completion:hover,\n.lintje-chat-composer__completion.is-active { background: var(--color-bg-subtle); }\n.lintje-chat-composer__completion-kind { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* A phone: the field stays at 1rem, since a smaller size makes iOS zoom in on focus. */\n@media (max-width: 767px) {\n  .lintje-chat-composer__input { padding: var(--space-3) var(--space-3) var(--space-1); }\n  .lintje-chat-composer__hint:not(:empty) { flex-basis: 100%; order: -1; text-align: left; }\n}\n\n/* Forced colours drop the chosen completion's fill, so it takes an outline. */\n@media (forced-colors: active) {\n  .lintje-chat-composer__completion.is-active { outline: 1px solid Highlight; outline-offset: -1px; }\n}\n", g = [
+	{
+		value: "auto",
+		label: "Automatisch (de assistent kiest)"
+	},
+	{
+		value: "text",
+		label: "Alleen tekst"
+	},
+	{
+		value: "chart",
+		label: "Met grafiek"
+	},
+	{
+		value: "table",
+		label: "Als tabel"
+	}
+], _ = [{
+	value: "enter",
+	label: "Enter (Shift+Enter: nieuwe regel)"
+}, {
+	value: "ctrl-enter",
+	label: "Ctrl+Enter (Enter: nieuwe regel)"
+}], v = "lintje-chat-send-key", y = {
+	enter: "Enter verstuurt, Shift+Enter begint een nieuwe regel.",
+	"ctrl-enter": "Ctrl+Enter verstuurt, Enter begint een nieuwe regel."
+};
+function b() {
+	try {
+		return localStorage.getItem(v) === "ctrl-enter" ? "ctrl-enter" : "enter";
+	} catch {
+		return "enter";
+	}
+}
+var x = "lintje-term", S = "lintje-term-uncertain", C = () => typeof CSS < "u" && "highlights" in CSS && typeof Highlight < "u";
+function w(e) {
+	let t = CSS.highlights.get(e);
+	return t || (t = new Highlight(), CSS.highlights.set(e, t)), t;
+}
+function T(e) {
+	let t = [], n = "", r = document.createTreeWalker(e, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+	for (let e = r.nextNode(); e; e = r.nextNode()) e.nodeType === Node.TEXT_NODE ? (t.push({
+		node: e,
+		start: n.length
+	}), n += e.data) : e.localName === "br" && (n += "\n");
+	return {
+		text: n,
+		nodes: t
+	};
+}
+function E(e, t) {
+	for (let n = e.nodes.length - 1; n >= 0; n--) {
+		let { node: r, start: i } = e.nodes[n];
+		if (t >= i && t <= i + r.data.length) return {
+			node: r,
+			offset: t - i
+		};
+	}
+	return null;
+}
+var D = class extends c {
+	constructor(...e) {
+		super(...e), this.variant = "ask", this.text = "", this.placeholder = "Stel een vraag over de gegevens", this.busy = !1, this.sendKey = b(), this.form = "auto", this.optionsOpen = !1, this.plain = !1, this.draft = "", this.caret = 0, this.completionIndex = 0, this.completionOff = !1, this.captions = [], this.#e = new i(this), this.#t = !0, this.#n = [], this.#r = null, this.#a = !1;
+	}
+	static {
+		this.styles = [n(l), n(h)];
+	}
+	static {
+		this.properties = {
+			variant: {
+				type: String,
+				reflect: !0
+			},
+			text: { type: String },
+			placeholder: { type: String },
+			busy: {
+				type: Boolean,
+				reflect: !0
+			},
+			recall: { type: String },
+			sendKey: {
+				type: String,
+				attribute: "send-key"
+			},
+			form: { type: String },
+			sources: { attribute: !1 },
+			vocabulary: { attribute: !1 },
+			draftTerms: { attribute: !1 },
+			optionsOpen: {
+				type: Boolean,
+				attribute: "options-open",
+				reflect: !0
+			},
+			plain: {
+				type: Boolean,
+				reflect: !0
+			},
+			draft: { state: !0 },
+			caret: { state: !0 },
+			completionIndex: { state: !0 },
+			completionOff: { state: !0 },
+			captions: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	get input() {
+		return this.renderRoot.querySelector(".lintje-chat-composer__input");
+	}
+	get selectedIds() {
+		return (this.sources ?? []).filter((e) => e.selected).map((e) => e.id);
+	}
+	get noSource() {
+		return this.variant === "ask" && !!this.sources?.length && !this.selectedIds.length;
+	}
+	termsIn(e) {
+		return this.draftTerms && this.draftTerms.text === e ? this.draftTerms.ranges : f(e, this.vocabulary, this.sources ? this.selectedIds : void 0);
+	}
+	get suggestions() {
+		return this.completionOff || this.termsIn(this.draft).some((e) => e.end === this.caret) ? [] : m(p(this.draft, this.caret), this.vocabulary);
+	}
+	disconnectedCallback() {
+		this.clearHighlights(), this.#r?.disconnect(), this.#r = null, clearTimeout(this.#i), super.disconnectedCallback();
+	}
+	firstUpdated() {
+		let e = this.input;
+		e && (e.contentEditable !== "plaintext-only" && (e.contentEditable = "true", this.#t = !1), typeof ResizeObserver < "u" && (this.#r = new ResizeObserver(() => this.paint()), this.#r.observe(e)));
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), !e.has("busy") || e.get("busy") === void 0) return;
+		let t = this.renderRoot.querySelector(this.busy ? ".lintje-chat-composer__send" : ".lintje-chat-composer__stop");
+		t && a(t) && (this.#a = !0);
+	}
+	updated(e) {
+		e.has("text") && this.text !== this.draft && this.write(this.text, void 0, !1), this.paint(), this.#a && (this.#a = !1, this.focus());
+	}
+	focus() {
+		this.write(this.draft);
+	}
+	openSources() {
+		let e = this.renderRoot.querySelector("lintje-multiselect");
+		e && (e.open = !0);
+	}
+	selection() {
+		return this.renderRoot.getSelection?.() ?? document.getSelection();
+	}
+	read() {
+		let e = this.input;
+		if (!e) return;
+		let t = T(e);
+		t.text === "\n" && (e.textContent = "", t.text = "");
+		let n = this.selection(), r = t.nodes.find(({ node: e }) => e === n?.focusNode);
+		this.draft = t.text, this.caret = r ? r.start + (n?.focusOffset ?? 0) : t.text.length;
+	}
+	write(e, t = e.length, n = !0) {
+		let r = this.input;
+		if (r) {
+			if (T(r).text !== e && (r.textContent = e), n) {
+				r.focus();
+				let e = E(T(r), t);
+				e && this.selection()?.collapse(e.node, e.offset);
+			}
+			this.draft = e, this.caret = t;
+		}
+	}
+	onInput() {
+		this.read(), this.completionOff = !1, this.completionIndex = 0, clearTimeout(this.#i), this.#i = setTimeout(() => this.emit("lintje-draft-change", { text: this.draft }), 200);
+	}
+	onPaste(e) {
+		this.#t || (e.preventDefault(), document.execCommand("insertText", !1, e.clipboardData?.getData("text/plain") ?? ""));
+	}
+	sends(e) {
+		if (e.key !== "Enter" || e.isComposing) return !1;
+		let t = e.ctrlKey || e.metaKey;
+		return (this.plain ? "enter" : this.sendKey) === "enter" ? !e.shiftKey && !t : t;
+	}
+	onKeydown(e) {
+		let t = this.suggestions;
+		if (t.length && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+			e.preventDefault();
+			let n = e.key === "ArrowDown" ? 1 : -1;
+			this.completionIndex = (this.completionIndex + n + t.length) % t.length;
+		} else t.length && (e.key === "Enter" || e.key === "Tab") && !e.isComposing ? (e.preventDefault(), this.complete(t[Math.min(this.completionIndex, t.length - 1)])) : t.length && e.key === "Escape" ? (e.preventDefault(), this.completionOff = !0) : this.sends(e) ? (e.preventDefault(), this.send()) : e.key === "Enter" && !this.#t && !e.isComposing ? (e.preventDefault(), document.execCommand("insertLineBreak")) : e.key === "Escape" ? this.variant === "edit" ? this.emitLocal("lintje-cancel") : this.busy && this.emit("lintje-answer-stop", {}) : e.key === "ArrowUp" && this.draft === "" && this.recall && (e.preventDefault(), this.write(this.recall));
+	}
+	complete(e) {
+		let t = p(this.draft, this.caret), n = this.caret - t.length, r = `${this.draft.slice(0, n)}${e.label} ${this.draft.slice(this.caret)}`;
+		this.write(r, n + e.label.length + 1), this.completionOff = !0;
+	}
+	send() {
+		let e = this.draft.trim();
+		if (!e || this.noSource || this.busy && this.variant === "ask") return;
+		let t = this.termsFor(e);
+		this.variant === "edit" ? this.emitLocal("lintje-submit", {
+			text: e,
+			terms: t
+		}) : (this.emit("lintje-message-send", {
+			text: e,
+			terms: t,
+			sources: this.selectedIds,
+			form: this.form
+		}), this.write(""));
+	}
+	termsFor(e) {
+		let t = this.draft.length - this.draft.trimStart().length;
+		return this.termsIn(this.draft).map((e) => ({
+			...e,
+			start: e.start - t,
+			end: e.end - t
+		})).filter((t) => t.start >= 0 && t.end <= e.length);
+	}
+	clearHighlights() {
+		if (C()) {
+			for (let { name: e, range: t } of this.#n) w(e).delete(t);
+			this.#n = [];
+		}
+	}
+	paint() {
+		let e = this.input, t = this.renderRoot.querySelector(".lintje-chat-composer__field");
+		if (!e || !t || !C()) return;
+		this.clearHighlights();
+		let n = T(e), r = t.getBoundingClientRect(), i = [];
+		for (let e of this.termsIn(n.text)) {
+			let a = E(n, e.start), o = E(n, e.end);
+			if (!a || !o) continue;
+			let s = new Range();
+			s.setStart(a.node, a.offset), s.setEnd(o.node, o.offset);
+			let c = e.certain === !1 ? S : x;
+			w(c).add(s), this.#n.push({
+				name: c,
+				range: s
+			});
+			let l = s.getClientRects()[0];
+			e.kind && l && i.push({
+				left: Math.round(l.left - r.left + t.scrollLeft),
+				top: Math.round(l.top - r.top + t.scrollTop),
+				kind: e.kind,
+				certain: e.certain !== !1
+			});
+		}
+		i.forEach((e, t) => {
+			let n = i[t + 1];
+			n && n.top === e.top && (e.room = Math.max(0, n.left - e.left - 4));
+		}), JSON.stringify(i) !== JSON.stringify(this.captions) && (this.captions = i);
+	}
+	setSendKey(e) {
+		this.sendKey = e;
+		try {
+			localStorage.setItem(v, e);
+		} catch {}
+	}
+	async toggleOptions(e) {
+		this.optionsOpen = e, await this.updateComplete;
+		let t = this.renderRoot.querySelector(e ? ".lintje-chat-composer__options" : ".lintje-chat-composer__options-toggle");
+		(t?.shadowRoot?.querySelector("button") ?? t)?.focus();
+	}
+	render() {
+		let e = this.suggestions, n = Math.min(this.completionIndex, e.length - 1), i = this.termsIn(this.draft).map((e) => {
+			let t = this.draft.slice(e.start, e.end), n = [e.kind, e.certain === !1 ? "niet zeker" : ""].filter(Boolean);
+			return n.length ? `${t} (${n.join(", ")})` : t;
+		}).join(", ");
+		return r`<div class="lintje-chat-composer lintje-chat-composer--${this.variant}">
+      ${e.length ? r`<div
+            id="completions"
+            class="lintje-chat-composer__completions"
+            role="listbox"
+            aria-label="Aanvullen"
+          >
+            ${e.map((e, t) => r`<div
+                id="completion-${t}"
+                class=${o({
+			"lintje-chat-composer__completion": !0,
+			"is-active": t === n
+		})}
+                role="option"
+                aria-selected=${String(t === n)}
+                @mousedown=${(t) => {
+			t.preventDefault(), this.complete(e);
+		}}
+              >
+                <span>${e.label}</span>
+                <span class="lintje-chat-composer__completion-kind">${e.kind}</span>
+              </div>`)}
+          </div>` : t}
+      <div class="lintje-chat-composer__frame">
+        <div class="lintje-chat-composer__field">
+          <div
+            class=${o({
+			"lintje-chat-composer__input": !0,
+			"is-empty": this.draft === ""
+		})}
+            contenteditable="plaintext-only"
+            role="textbox"
+            aria-multiline="true"
+            aria-label=${this.variant === "edit" ? "Je vraag bewerken" : "Je vraag"}
+            aria-describedby="hint send-key"
+            aria-placeholder=${this.placeholder}
+            aria-autocomplete=${this.vocabulary?.length ? "list" : t}
+            aria-controls=${e.length ? "completions" : t}
+            aria-activedescendant=${e.length ? `completion-${n}` : t}
+            data-placeholder=${this.placeholder}
+            @input=${this.onInput}
+            @keydown=${this.onKeydown}
+            @keyup=${this.read}
+            @mouseup=${this.read}
+            @paste=${this.onPaste}
+          ></div>
+          <div class="lintje-chat-composer__captions" aria-hidden="true">
+            ${this.captions.map((e) => r`<span
+                class=${o({
+			"lintje-chat-composer__caption": !0,
+			"is-uncertain": !e.certain
+		})}
+                ${s({
+			left: `${e.left}px`,
+			top: `${e.top}px`,
+			maxWidth: e.room === void 0 ? null : `${e.room}px`
+		})}
+                >${e.kind}</span
+              >`)}
+          </div>
+        </div>
+        <span id="send-key" class="visually-hidden"
+          >${y[this.plain ? "enter" : this.sendKey]}</span
+        >
+        <span class="visually-hidden" aria-live="polite">${i ? `Herkend: ${i}` : ""}</span>
+        <div class="lintje-chat-composer__bar">
+          ${this.variant === "edit" ? this.renderEdit() : this.renderAsk()}
+        </div>
+      </div>
+    </div>`;
+	}
+	renderAsk() {
+		let e = this.sources ?? [], n = this.draft.trim() === "";
+		return r`${e.length ? r`<lintje-multiselect
+            class="lintje-chat-composer__sources"
+            label="Bronnen voor je volgende vraag"
+            hide-label
+            summary="Bronnen: ${this.selectedIds.length} van ${e.length}"
+            .options=${e.map((e) => ({
+			value: e.id,
+			label: e.label,
+			description: [e.description, e.asOf].filter(Boolean).join(" · ")
+		}))}
+            .selected=${this.selectedIds}
+            @lintje-change=${(e) => {
+			e.stopPropagation(), this.emit("lintje-sources-change", { ids: e.detail });
+		}}
+          ></lintje-multiselect>` : t}
+      <span id="hint" class="lintje-chat-composer__hint" role="status"
+        >${this.noSource ? "Kies eerst een bron om een vraag te stellen" : ""}</span
+      >
+      ${this.busy ? r`<lintje-button
+            class="lintje-chat-composer__stop"
+            variant="secondary"
+            icon="multimedia-player-stop"
+            @click=${() => this.emit("lintje-answer-stop", {})}
+            >Stoppen</lintje-button
+          >` : r`<div class="lintje-chat-composer__send">
+            ${this.#e.matches ? r`<lintje-icon-button
+                  class="lintje-chat-composer__send-half"
+                  icon="functioneel-verzenden"
+                  label="Versturen"
+                  active
+                  ?disabled=${n || this.noSource}
+                  @click=${() => this.send()}
+                ></lintje-icon-button>` : r`<lintje-button
+                  variant="primary"
+                  icon="functioneel-verzenden"
+                  ?disabled=${n || this.noSource}
+                  @click=${() => this.send()}
+                  >Versturen</lintje-button
+                >`}
+            ${this.plain ? t : r`<lintje-icon-button
+                    class="lintje-chat-composer__send-half lintje-chat-composer__options-toggle"
+                    icon="functioneel-delta-omlaag"
+                    label="Opties bij versturen"
+                    ?active=${!(n || this.noSource)}
+                    .expanded=${this.optionsOpen}
+                    @click=${() => this.toggleOptions(!this.optionsOpen)}
+                  ></lintje-icon-button>
+                  ${this.optionsOpen ? this.renderSendOptions() : t}`}
+          </div>`}`;
+	}
+	renderSendOptions() {
+		return r`<span
+        class="lintje-chat-composer__scrim"
+        @click=${() => this.toggleOptions(!1)}
+      ></span>
+      <div
+        class="lintje-chat-composer__options"
+        role="dialog"
+        aria-label="Opties bij versturen"
+        tabindex="-1"
+        @keydown=${(e) => {
+			e.key === "Escape" && (e.stopPropagation(), this.toggleOptions(!1));
+		}}
+      >
+        <lintje-radio-group
+          label="Antwoord als"
+          .options=${g}
+          value=${this.form}
+          @lintje-change=${(e) => {
+			e.stopPropagation(), this.form = e.detail;
+		}}
+        ></lintje-radio-group>
+        <lintje-radio-group
+          label="Versturen met"
+          .options=${_}
+          value=${this.sendKey}
+          @lintje-change=${(e) => {
+			e.stopPropagation(), this.setSendKey(e.detail);
+		}}
+        ></lintje-radio-group>
+        <div class="lintje-chat-composer__shortcuts">
+          <span class="lintje-chat-composer__shortcuts-label">Sneltoetsen</span>
+          <dl class="lintje-chat-composer__keys">
+            <dt class="lintje-chat-composer__key-name">Vorige vraag terughalen</dt>
+            <dd class="lintje-chat-composer__key"><kbd class="lintje-key">↑</kbd></dd>
+            <dt class="lintje-chat-composer__key-name">Antwoord stoppen</dt>
+            <dd class="lintje-chat-composer__key"><kbd class="lintje-key">Esc</kbd></dd>
+          </dl>
+        </div>
+      </div>`;
+	}
+	renderEdit() {
+		return r`<span id="hint" class="lintje-chat-composer__hint"></span>
+      <lintje-button variant="tertiary" size="chrome" @click=${() => this.emitLocal("lintje-cancel")}
+        >Annuleren</lintje-button
+      >
+      <lintje-button
+        variant="primary"
+        size="chrome"
+        ?disabled=${this.draft.trim() === ""}
+        @click=${() => this.send()}
+        >Opnieuw vragen</lintje-button
+      >`;
+	}
+};
+e("lintje-chat-composer", D);
+//#endregion
+export { D as LintjeChatComposer, u as t };

package/dist-elements/tag/chat-message.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/chat/chat-message/chat-message.js'

package/dist-elements/tag/chat-message.js

@@ -0,0 +1,96 @@
+import { Bt as e, Gt as t, Ht as n, Kt as r, Z as i, zt as a } from "../chunks/base-rBLTcEIv.js";
+import { t as o } from "./chat-composer.js";
+//#region src/components/chat/chat-message/chat-message.css?inline
+var s = "/* The host is a full-width block, so a view can make it stick while its answer scrolls. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Visual order is reversed from document order, so the question is read first. The gaps keep\n   the edit button's hit area off the time and the bar. */\n.lintje-chat-message {\n  display: flex; flex-direction: row-reverse; align-items: center;\n  gap: var(--space-2);\n  max-width: var(--w-message);\n  margin-left: auto;\n}\n.lintje-chat-message__text {\n  min-width: 0;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  font: var(--text-body);\n  color: var(--color-text-primary);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.lintje-chat-message__meta {\n  flex: none;\n  display: flex; flex-direction: row-reverse; align-items: center;\n  gap: var(--space-2);\n}\n.lintje-chat-message__time { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* A term is underlined, never recoloured; dashed gray marks an uncertain one. */\n.lintje-chat-message__term {\n  text-decoration: underline solid var(--color-term-line);\n  text-decoration-thickness: 2px;\n  text-underline-offset: var(--space-1);\n}\n.lintje-chat-message__term.is-uncertain {\n  text-decoration-style: dashed;\n  text-decoration-color: var(--color-border-suggestion);\n}\n\n.lintje-chat-message--editing {\n  flex-direction: column; align-items: flex-end;\n  gap: var(--space-2);\n  width: 100%;\n}\n.lintje-chat-message__head { display: flex; align-items: baseline; gap: var(--space-2); }\n.lintje-chat-message__label {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-chat-message__frame { align-self: stretch; }\n.lintje-chat-message__note { font: var(--text-small); color: var(--color-text-muted); }\n\n/* A phone keeps room on the left so the bar reads as the reader's side. */\n@media (max-width: 767px) {\n  .lintje-chat-message { flex-direction: column; align-items: flex-end; margin-left: var(--space-10); }\n  .lintje-chat-message--editing { margin-left: 0; }\n}\n\n/* Forced colours drop the bar's fill; a line keeps the question apart from the answer. */\n@media (forced-colors: active) {\n  .lintje-chat-message__text { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n", c = class extends a {
+	constructor(...e) {
+		super(...e), this.text = "", this.editable = !1, this.editing = !1;
+	}
+	static {
+		this.styles = n(s);
+	}
+	static {
+		this.properties = {
+			text: { type: String },
+			terms: { attribute: !1 },
+			time: { type: String },
+			editable: { type: Boolean },
+			editing: {
+				type: Boolean,
+				reflect: !0
+			},
+			turnId: {
+				type: String,
+				attribute: "turn-id"
+			},
+			vocabulary: { attribute: !1 },
+			sources: { attribute: !1 }
+		};
+	}
+	async setEditing(e) {
+		this.editing = e, this.emitLocal("lintje-editing-change", {
+			turnId: this.turnId ?? null,
+			editing: e
+		}), await this.updateComplete;
+		let t = this.renderRoot.querySelector(e ? "lintje-chat-composer" : ".lintje-chat-message__edit");
+		e && await t?.updateComplete, (t?.shadowRoot?.querySelector("button") ?? t)?.focus();
+	}
+	render() {
+		return this.editing ? this.renderEditing() : this.renderSent();
+	}
+	renderSent() {
+		return r`<div class="lintje-chat-message">
+      <p class="lintje-chat-message__text">${this.renderText()}</p>
+      <div class="lintje-chat-message__meta">
+        ${this.editable ? r`<lintje-icon-button
+              class="lintje-chat-message__edit"
+              icon="functioneel-bewerken"
+              label="Vraag bewerken"
+              variant="flat"
+              @click=${() => this.setEditing(!0)}
+            ></lintje-icon-button>` : t}
+        ${this.time ? r`<span class="lintje-chat-message__time">${this.time}</span>` : t}
+      </div>
+    </div>`;
+	}
+	renderText() {
+		let e = o(this.text, this.terms).map((e) => e.term ? r`<span
+            class=${i({
+			"lintje-chat-message__term": !0,
+			"is-uncertain": e.term.certain === !1
+		})}
+            title=${e.term.kind ?? t}
+            >${e.text}</span
+          >` : e.text);
+		return r`<span class="visually-hidden">Jij: </span>${e}`;
+	}
+	renderEditing() {
+		return r`<div class="lintje-chat-message lintje-chat-message--editing">
+      <div class="lintje-chat-message__head">
+        <span class="lintje-chat-message__label">Jij, bewerken</span>
+        ${this.time ? r`<span class="lintje-chat-message__time">${this.time}</span>` : t}
+      </div>
+      <lintje-chat-composer
+        class="lintje-chat-message__frame"
+        variant="edit"
+        text=${this.text}
+        .vocabulary=${this.vocabulary}
+        .sources=${this.sources}
+        @lintje-submit=${(e) => {
+			e.stopPropagation(), this.emit("lintje-message-edit", {
+				turnId: this.turnId ?? null,
+				...e.detail
+			}), this.setEditing(!1);
+		}}
+        @lintje-cancel=${(e) => {
+			e.stopPropagation(), this.setEditing(!1);
+		}}
+      ></lintje-chat-composer>
+      <p class="lintje-chat-message__note">
+        Het antwoord hieronder en alles wat erna kwam worden vervangen.
+      </p>
+    </div>`;
+	}
+};
+e("lintje-chat-message", c);
+//#endregion
+export { c as LintjeChatMessage };

package/dist-elements/tag/chat-strip.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/chat/chat-strip/chat-strip.js'