lintje 0.1.1

package/dist-elements/tag/transcript.js

@@ -0,0 +1,339 @@
+import { $ as e, Bt as t, Gt as n, H as r, Ht as i, Kt as a, U as o, X as s, Y as c, Z as l, et as u, g as d, ut as f, zt as p } from "../chunks/base-rBLTcEIv.js";
+import "./menu-button.js";
+import "./highlight.js";
+import "./textarea.js";
+import { a as m, d as h, o as g } from "../chunks/playback-DZJ_NMXv.js";
+//#region src/components/content/transcript/transcript.css?inline
+var _ = "/* The scroll container is the host's parent; the transcript only asks it to scroll. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The rows answer to the transcript's own width: beside a speakers column it is narrower than\n   the page. */\n.lintje-transcript {\n  container-type: inline-size;\n  display: flex;\n  flex-direction: column;\n  color: var(--color-text-primary);\n  --lintje-transcript-who: calc(4 * var(--space-10));\n}\n.lintje-transcript__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }\n\n/* --- A fragment as a row: who and when, the text, the edit button ------ */\n\n.lintje-transcript__segment {\n  position: relative;\n  display: grid;\n  grid-template-columns: var(--lintje-transcript-who) minmax(0, 1fr) var(--h-icon-button);\n  grid-template-rows: auto 1fr;\n  grid-template-areas: 'who body edit' 'when body edit';\n  gap: 0 var(--space-5);\n  padding: var(--space-3) var(--lintje-inset, var(--space-3)) var(--space-3) calc(var(--lintje-inset, var(--space-4)) + var(--space-1));\n  border-top: 1px solid var(--color-border-default);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* The speaker's colour, as in the player's waveform; the name beside it says who it is. */\n.lintje-transcript__segment::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: var(--space-1);\n  background: var(--lintje-speaker, var(--color-chart-other));\n}\n:host(:not([tinted])) .lintje-transcript__segment:hover { background: var(--color-bg-subtle); }\n:host([tinted]) .lintje-transcript__segment {\n  background: color-mix(in srgb, var(--lintje-speaker, var(--color-chart-other)) var(--tint-speaker), var(--color-bg-surface));\n  border-top-color: var(--color-bg-surface);\n}\n\n/* The fragment that sounds, and the one in editing: a ring, so the speaker's colour stays. */\n.lintje-transcript__segment.is-current,\n.lintje-transcript__segment.is-editing {\n  outline: 2px solid var(--color-accent-line);\n  outline-offset: -2px;\n}\n\n/* Grouped, a speaker's next fragment joins the one before: its name appears on hover and focus,\n   so the menu stays in reach. */\n:host([grouped]) .lintje-transcript__segment.is-repeat { border-top: 0; padding-top: 0; }\n:host([grouped]) .is-repeat .lintje-transcript__who { opacity: 0; transition: opacity var(--dur-hover) var(--ease-in-motion); }\n:host([grouped]) .is-repeat:hover .lintje-transcript__who,\n:host([grouped]) .is-repeat .lintje-transcript__who:focus-within { opacity: 1; }\n\n.lintje-transcript__who {\n  grid-area: who;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 var(--space-2);\n  min-width: 0;\n}\n.lintje-transcript__when {\n  grid-area: when;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  align-self: start;\n  gap: var(--space-1) var(--space-2);\n}\n.lintje-transcript__body { grid-area: body; min-width: 0; align-self: start; padding-top: var(--space-1); }\n.lintje-transcript__edit { grid-area: edit; align-self: start; }\n\n/* The name is a flat menu trigger, as low as a line of text beside the fragment. */\n.lintje-transcript__speaker {\n  --h-button: var(--h-chip);\n  position: relative;\n  /* The name lines up with the time under it; a shift, not a margin, so its column keeps the\n     whole name. */\n  left: calc(-1 * var(--space-2));\n  max-width: 100%;\n}\n.lintje-transcript__speaker.is-static {\n  left: 0;\n  font: var(--text-small);\n  font-weight: 700;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.lintje-transcript__now { font: var(--text-meta); color: var(--color-text-muted); }\n\n/* The timecode reaches the 48 px target through a transparent hit area above and below only. */\n.lintje-transcript__time {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  min-height: var(--h-target-text);\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  color: var(--color-link);\n  text-decoration: underline;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-transcript__time::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-transcript__time:hover { color: var(--color-link-hover); }\n.is-current .lintje-transcript__time { font-weight: 700; color: var(--color-text-primary); }\n.lintje-transcript__playing { flex: none; color: var(--color-accent-text); }\n.lintje-transcript__time.is-static { color: var(--color-text-muted); text-decoration: none; }\n.lintje-transcript__time.is-static::after { content: none; }\n\n.lintje-transcript__text { margin: 0; font: var(--text-body); }\n:host([size='large']) .lintje-transcript__text { font-size: 1.375rem; line-height: 1.5; }\n/* Live: what the recogniser may still change reads as provisional, the caret as where it is. */\n.lintje-transcript__pending { font-style: italic; color: var(--color-text-muted); }\n.lintje-transcript__caret {\n  display: inline-block;\n  width: 2px;\n  height: 1.1em;\n  margin-left: 2px;\n  vertical-align: text-bottom;\n  background: var(--color-text-primary);\n}\n\n/* The pencil is always there, so a fragment is seen to be editable; a double click on the text\n   edits too. */\n:host(:not([readonly])) .lintje-transcript__body:not(:has(.lintje-transcript__editor)) { cursor: text; }\n\n.lintje-transcript__editor { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-transcript__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }\n\n/* --- Above the fragments: the note in their columns, then the lead ---------------------------- */\n\n.lintje-transcript__note {\n  display: grid;\n  grid-template-columns: var(--lintje-transcript-who) minmax(0, 1fr);\n  gap: var(--space-2) var(--space-5);\n  padding: var(--space-3) calc(var(--lintje-inset, var(--space-3)) + var(--h-icon-button) + var(--space-5)) var(--space-3) var(--lintje-inset, var(--space-4));\n  border-left: var(--space-1) solid var(--color-border-heavy);\n  background: var(--color-bg-subtle);\n}\n.lintje-transcript__note:not(.has-note) { display: none; }\n.lintje-transcript__note-text { min-width: 0; max-width: var(--w-text); font: var(--text-small); }\n:host([size='large']) .lintje-transcript__note-text { font-size: 1.125rem; }\n::slotted([slot='lead']) {\n  /* An expander here sets its title in the speakers' column and its content in the text's. */\n  --lintje-expander-label: var(--lintje-transcript-who);\n  display: block;\n  padding: var(--space-3) var(--lintje-inset, var(--space-3)) var(--space-3) var(--lintje-inset, var(--space-4));\n  border-top: 1px solid var(--color-border-default);\n  border-left: var(--space-1) solid var(--color-border-heavy);\n  background: var(--color-bg-subtle);\n}\n\n/* --- A fragment as a message ------------------------------------------- */\n\n:host([layout='chat']) .lintje-transcript__list { gap: var(--space-4); padding: var(--space-4) var(--lintje-inset, 0); }\n:host([layout='chat']) .lintje-transcript__segment {\n  grid-template-columns: fit-content(var(--w-message)) auto auto minmax(0, 1fr);\n  grid-template-rows: auto auto;\n  grid-template-areas: 'who who who .' 'body when edit .';\n  align-items: center;\n  gap: var(--space-1) var(--space-2);\n  padding: 0;\n  border-top: 0;\n  background: none;\n  outline: 0;\n}\n:host([layout='chat']) .lintje-transcript__segment::before { content: none; }\n:host([layout='chat']) .lintje-transcript__when,\n:host([layout='chat']) .lintje-transcript__edit { align-self: center; }\n:host([layout='chat']) .lintje-transcript__segment:hover { background: none; }\n:host([layout='chat']) .lintje-transcript__body {\n  position: relative;\n  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--space-1));\n  background: var(--color-bg-subtle);\n}\n:host([layout='chat']) .lintje-transcript__body::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: var(--space-1);\n  background: var(--lintje-speaker, var(--color-chart-other));\n}\n:host([layout='chat'][tinted]) .lintje-transcript__body {\n  background: color-mix(in srgb, var(--lintje-speaker, var(--color-chart-other)) var(--tint-speaker), var(--color-bg-surface));\n}\n:host([layout='chat']) .is-current .lintje-transcript__body,\n:host([layout='chat']) .is-editing .lintje-transcript__body {\n  outline: 2px solid var(--color-accent-line);\n  outline-offset: -2px;\n}\n:host([layout='chat']) .is-editing .lintje-transcript__body { width: var(--w-message); max-width: 100%; box-sizing: border-box; }\n:host([layout='chat'][grouped]) .lintje-transcript__segment.is-repeat { margin-top: calc(-1 * var(--space-3)); }\n:host([layout='chat'][grouped]) .is-repeat .lintje-transcript__who { display: none; }\n\n/* --- Narrow: who and when on one line, the text under it --------------- */\n\n@container (max-width: 40rem) {\n  .lintje-transcript__segment {\n    grid-template-columns: fit-content(70%) auto minmax(0, 1fr) var(--h-icon-button);\n    grid-template-rows: auto auto;\n    grid-template-areas: 'who when . edit' 'body body body body';\n    column-gap: var(--space-3);\n  }\n  .lintje-transcript__when { align-self: center; }\n  .lintje-transcript__note { grid-template-columns: minmax(0, 1fr); padding-right: var(--lintje-inset, var(--space-3)); }\n  :host([layout='chat']) .lintje-transcript__segment {\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    grid-template-areas: 'who who who' 'body body body' '. when edit';\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-transcript__segment,\n  .lintje-transcript__time,\n  .lintje-transcript__who { transition: none; }\n}\n\n/* Forced colours drop fills: the speaker's bar stays a line in the text colour. */\n@media (forced-colors: active) {\n  .lintje-transcript__segment::before,\n  .lintje-transcript__body::before { forced-color-adjust: none; background: CanvasText; }\n  .lintje-transcript__segment.is-current,\n  .is-current .lintje-transcript__body { outline-color: Highlight; }\n}\n", v = 5e3, y = /* @__PURE__ */ new Set([
+	"PageUp",
+	"PageDown",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End"
+]);
+function b(e, t = [], n = []) {
+	let r = ([t, n]) => [Math.max(0, Math.min(t, e.length)), Math.max(0, Math.min(n, e.length))], i = t.map(r).filter(([e, t]) => t > e), a = n.map(r), o = /* @__PURE__ */ new Set([0, e.length]);
+	for (let [e, t] of [...i, ...a]) o.add(e).add(t);
+	let s = [...o].sort((e, t) => e - t), c = [];
+	for (let t = 0; t < s.length - 1; t++) {
+		let n = s[t], r = s[t + 1];
+		if (r <= n) continue;
+		let o = i.some(([e, t]) => e <= n && r <= t), l = a.findIndex(([e, t]) => t > e && e <= n && r <= t), u = c[c.length - 1];
+		u && u.uncertain === o && u.match === l ? u.text += e.slice(n, r) : c.push({
+			text: e.slice(n, r),
+			uncertain: o,
+			match: l
+		});
+	}
+	return c;
+}
+function x(e, t) {
+	return e - t >= v;
+}
+function S(e, t) {
+	return [
+		{ heading: "Dit fragment toewijzen aan" },
+		...t.map((t) => ({
+			value: `speaker:${t}`,
+			label: t,
+			checked: t === e,
+			radio: !0
+		})),
+		{
+			value: "new",
+			label: "Nieuwe spreker…"
+		},
+		"separator",
+		{
+			value: "rename",
+			label: `‘${e}’ overal een andere naam geven`
+		}
+	];
+}
+var C = class extends p {
+	constructor(...e) {
+		super(...e), this.segments = [], this.readonly = !1, this.size = "regular", this.layout = "rows", this.tinted = !1, this.grouped = !1, this.errors = {}, this.searchMatches = {}, this.hasNote = !1, this.lastUserScroll = -Infinity, this.followed = null, this.savedFrom = null, this.onNoteChange = (e) => {
+			this.hasNote = e.target.assignedNodes({ flatten: !0 }).length > 0;
+		}, this.onUserScroll = () => {
+			this.lastUserScroll = Date.now();
+		}, this.onListKeydown = (e) => {
+			y.has(e.key) && this.onUserScroll();
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			c,
+			i(_)
+		];
+	}
+	static {
+		this.properties = {
+			segments: { attribute: !1 },
+			speakers: { attribute: !1 },
+			currentTime: {
+				type: Number,
+				attribute: "current-time"
+			},
+			editingId: {
+				type: String,
+				attribute: "editing-id"
+			},
+			busyId: {
+				type: String,
+				attribute: "busy-id"
+			},
+			errors: { attribute: !1 },
+			searchMatches: { attribute: !1 },
+			currentMatch: { attribute: !1 },
+			readonly: {
+				type: Boolean,
+				reflect: !0
+			},
+			speakingId: {
+				type: String,
+				attribute: "speaking-id"
+			},
+			size: {
+				type: String,
+				reflect: !0
+			},
+			layout: {
+				type: String,
+				reflect: !0
+			},
+			tinted: {
+				type: Boolean,
+				reflect: !0
+			},
+			grouped: {
+				type: Boolean,
+				reflect: !0
+			},
+			hasNote: { state: !0 }
+		};
+	}
+	get currentIndex() {
+		return this.currentTime == null ? -1 : g(this.segments, this.currentTime);
+	}
+	segmentElement(e) {
+		return [...this.renderRoot.querySelectorAll(".lintje-transcript__segment")].find((t) => t.dataset.id === e) ?? null;
+	}
+	focusInside(e, t) {
+		let n = e;
+		n && (n.updateComplete ?? Promise.resolve()).then(() => n.shadowRoot?.querySelector(t)?.focus());
+	}
+	seek(e) {
+		this.emit("lintje-seek", e.start);
+	}
+	edit(e) {
+		this.emit("lintje-segment-edit", e.id);
+	}
+	save(e) {
+		if (this.busyId === e.id) return;
+		let t = this.segmentElement(e.id)?.querySelector("lintje-textarea");
+		this.emit("lintje-segment-save", {
+			id: e.id,
+			text: t?.value ?? e.text
+		});
+	}
+	cancel(e) {
+		this.busyId !== e.id && this.emit("lintje-segment-cancel", e.id);
+	}
+	onEditorKeydown(e, t) {
+		t.key === "Escape" ? (t.preventDefault(), this.cancel(e)) : t.key === "Enter" && (t.ctrlKey || t.metaKey) && (t.preventDefault(), this.save(e));
+	}
+	onSpeakerAction(e, t) {
+		t.stopPropagation();
+		let n = String(t.detail);
+		if (n.startsWith("speaker:")) {
+			let t = n.slice(8);
+			t !== e.speaker && this.emit("lintje-segment-speaker", {
+				id: e.id,
+				speaker: t
+			});
+		} else n === "new" ? this.emit("lintje-speaker-new", e.id) : n === "rename" && this.emit("lintje-speaker-rename", e.speaker);
+	}
+	willUpdate(e) {
+		if (super.willUpdate(e), e.has("busyId") && this.busyId) {
+			let e = this.segmentElement(this.busyId)?.querySelector("lintje-textarea");
+			this.savedFrom = e && o(e) ? this.busyId : null;
+		}
+	}
+	keepSaveFocus() {
+		let e = this.savedFrom;
+		if (!e) return;
+		let t = this.segmentElement(e)?.querySelector(".lintje-transcript__editor");
+		if (this.busyId === e) {
+			t?.querySelector("lintje-button")?.shadowRoot?.querySelector("button")?.focus();
+			return;
+		}
+		if (this.savedFrom = null, this.editingId !== e || !t) return;
+		let n = r();
+		(!n || n === document.body || o(t)) && this.focusInside(t.querySelector("lintje-textarea"), "textarea");
+	}
+	updated(e) {
+		if (super.updated(e), e.has("busyId") && this.keepSaveFocus(), e.has("editingId")) {
+			let t = e.get("editingId");
+			this.editingId ? this.focusInside(this.segmentElement(this.editingId)?.querySelector("lintje-textarea"), "textarea") : t && this.focusInside(this.segmentElement(t)?.querySelector(".lintje-transcript__edit"), "button");
+		}
+		(e.has("currentTime") || e.has("segments")) && this.follow(), e.has("currentMatch") && this.currentMatch && this.renderRoot.querySelector("lintje-highlight[kind=\"match\"][current]")?.scrollIntoView?.({
+			block: "nearest",
+			behavior: d() ? "auto" : "smooth"
+		});
+	}
+	reveal() {
+		this.lastUserScroll = -Infinity;
+		let e = this.segments[this.currentIndex];
+		e && (this.followed = e.id, this.updateComplete.then(() => this.segmentElement(e.id)?.scrollIntoView?.({
+			block: "center",
+			behavior: d() ? "auto" : "smooth"
+		})));
+	}
+	follow() {
+		let e = this.segments[this.currentIndex];
+		e && e.id !== this.followed && !this.editingId && x(Date.now(), this.lastUserScroll) && (this.followed = e.id, this.segmentElement(e.id)?.scrollIntoView?.({
+			block: "nearest",
+			behavior: d() ? "auto" : "smooth"
+		}));
+	}
+	renderText(e) {
+		let t = this.currentMatch?.id === e.id ? this.currentMatch.index : -1, r = b(e.text, e.uncertain, this.searchMatches?.[e.id]);
+		return a`<p class="lintje-transcript__text">
+      ${r.map((e) => {
+			let n = e.uncertain ? a`<lintje-highlight kind="uncertain">${e.text}</lintje-highlight>` : e.text;
+			return e.match === -1 ? n : a`<lintje-highlight kind="match" ?current=${e.match === t}
+              >${n}</lintje-highlight
+            >`;
+		})}${e.pending ? a` <span class="lintje-transcript__pending">${e.pending}</span
+              ><span class="lintje-transcript__caret" aria-hidden="true"></span>` : n}
+    </p>`;
+	}
+	renderEditor(e) {
+		let t = this.busyId === e.id;
+		return a`<div
+      class="lintje-transcript__editor"
+      @keydown=${(t) => this.onEditorKeydown(e, t)}
+    >
+      <lintje-textarea
+        label="Tekst van dit fragment"
+        hide-label
+        rows="1"
+        hint="Ctrl+Enter bewaart, Esc annuleert"
+        .value=${e.text}
+        ?disabled=${t}
+        error=${this.errors?.[e.id] || n}
+      ></lintje-textarea>
+      <div class="lintje-transcript__actions">
+        <lintje-button
+          variant="primary"
+          size="compact"
+          ?busy=${t}
+          @click=${() => this.save(e)}
+          >Opslaan</lintje-button
+        >
+        <lintje-button
+          variant="link"
+          size="compact"
+          ?disabled=${t}
+          @click=${() => this.cancel(e)}
+          >Annuleren</lintje-button
+        >
+      </div>
+    </div>`;
+	}
+	renderSpeaker(e, t) {
+		return this.readonly ? a`<span class="lintje-transcript__speaker is-static">${e.speaker}</span>` : a`<lintje-menu-button
+      class="lintje-transcript__speaker"
+      variant="flat"
+      label=${e.speaker}
+      accessible-label=${`Spreker: ${e.speaker}, wisselen`}
+      .items=${S(e.speaker, t)}
+      @lintje-action=${(t) => this.onSpeakerAction(e, t)}
+    ></lintje-menu-button>`;
+	}
+	renderTime(e, t) {
+		let r = m(e.start);
+		return this.readonly ? a`<span class="lintje-transcript__time is-static">${r}</span>` : a`<button
+      type="button"
+      class="lintje-transcript__time"
+      aria-label=${`Speel af vanaf ${r}`}
+      @click=${() => this.seek(e)}
+    >
+      ${t ? u("multimedia-player-afspelen", {
+			size: 12,
+			className: "lintje-transcript__playing"
+		}) : n}${r}
+    </button>`;
+	}
+	render() {
+		let e = this.currentIndex, t = this.speakers?.length ? this.speakers.map((e) => ({
+			start: 0,
+			speaker: e
+		})) : null, r = h(t ?? this.segments), i = [...r.keys()];
+		return a`<div class="lintje-transcript">
+      <div class=${l({
+			"lintje-transcript__note": !0,
+			"has-note": this.hasNote
+		})}>
+        <div class="lintje-transcript__note-label"><slot name="note-label"></slot></div>
+        <div class="lintje-transcript__note-text">
+          <slot name="note" @slotchange=${this.onNoteChange}></slot>
+        </div>
+      </div>
+      <slot name="lead"></slot>
+      <ol
+        class="lintje-transcript__list"
+        @wheel=${this.onUserScroll}
+        @touchmove=${this.onUserScroll}
+        @keydown=${this.onListKeydown}
+      >
+        ${this.segments.map((t, o) => {
+			let c = o === e, u = this.editingId === t.id, d = this.segments[o - 1]?.speaker === t.speaker, p = r.get(t.speaker);
+			return a`<li
+            class=${l({
+				"lintje-transcript__segment": !0,
+				"is-current": c,
+				"is-editing": u,
+				"is-repeat": d
+			})}
+            data-id=${t.id}
+            aria-current=${c ? "true" : n}
+            ${f({ "--lintje-speaker": p ? `var(--color-chart-${p})` : null })}
+          >
+            <div class="lintje-transcript__who">
+              ${this.renderSpeaker(t, i)}
+              ${t.id === this.speakingId ? a`<span class="lintje-transcript__now">spreekt nu</span>` : n}
+            </div>
+            <div class="lintje-transcript__when">
+              ${this.renderTime(t, c)}
+              ${(t.tags ?? []).map((e) => s({
+				value: e.label,
+				tone: e.tone ?? "neutral"
+			}))}
+            </div>
+            <div
+              class="lintje-transcript__body"
+              @dblclick=${this.readonly || u ? n : (e) => {
+				e.preventDefault(), getSelection()?.removeAllRanges(), this.edit(t);
+			}}
+            >
+              ${u ? this.renderEditor(t) : this.renderText(t)}
+            </div>
+            ${this.readonly || u ? n : a`<lintje-icon-button
+                    class="lintje-transcript__edit"
+                    icon="functioneel-bewerken"
+                    label=${`Fragment van ${m(t.start)} bewerken`}
+                    variant="flat"
+                    @click=${() => this.edit(t)}
+                  ></lintje-icon-button>`}
+          </li>`;
+		})}
+      </ol>
+    </div>`;
+	}
+};
+t("lintje-transcript", C);
+//#endregion
+export { v as FOLLOW_PAUSE, C as LintjeTranscript, b as markedParts, x as shouldFollow, S as speakerMenu };

package/dist-elements/tag/translator.d.ts

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

package/dist-elements/tag/translator.js

@@ -0,0 +1,131 @@
+import { Bt as e, Gt as t, Ht as n, It as r, Kt as i, Lt as a, zt as o } from "../chunks/base-rBLTcEIv.js";
+import "./textarea.js";
+//#region src/components/content/translator/translator.css?inline
+var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The halves stretch to one height: the taller text sets both. The plain field has no edge of\n   its own, so the surface's is the field's (3:1). */\n.lintje-translator {\n  display: flex;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-translator__half {\n  flex: 1 1 0;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  font: var(--text-translation);\n  color: var(--color-text-primary);\n}\n/* Inset, not subtle: the fields and buttons on it are the surface, so in dark it steps down. */\n.lintje-translator__half--target {\n  position: relative;\n  background: var(--color-bg-inset);\n  border-left: 1px solid var(--color-border-default);\n}\n\n.lintje-translator__bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: calc(var(--h-control) + 2 * var(--space-4));\n  box-sizing: border-box;\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n}\n/* A language choice keeps a readable width; on a phone it takes the row. What else stands in the\n   bar keeps its own width. */\n.lintje-translator__bar ::slotted(lintje-combobox) { flex: 0 1 var(--w-translator-language); min-width: 0; }\n/* The languages flank the swap, which stands half in each bar: the source at the line, the\n   target after it, so the pair reads as one \"from ⇄ to\". */\n.lintje-translator__bar--source { justify-content: flex-end; padding-right: var(--space-10); }\n.lintje-translator__half--target .lintje-translator__bar { padding-left: var(--space-10); }\n\n.lintje-translator__body {\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-4);\n}\n.lintje-translator__body--source { padding-right: calc(var(--space-4) + var(--h-icon-button)); }\n/* The source body is the field: the text fills it, and the ring goes round it, inside the edge. */\n.lintje-translator__text { flex: 1; }\n.lintje-translator__body--source:has(.lintje-translator__text:focus-within) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n.lintje-translator__clear { position: absolute; top: var(--space-2); right: var(--space-2); }\n\n.lintje-translator__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1) var(--space-2);\n  min-height: var(--h-touch);\n  /* As far from the sides and the bottom as the language choices stand from the top. */\n  padding: var(--space-1) var(--space-4) var(--space-4);\n  font: var(--text-ui);\n}\n.lintje-translator__actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }\n/* The AI label belongs to the text it marks: right under it, so the foot holds only actions and\n   stands level with the source's at every width. A hidden label leaves no gap. */\n.lintje-translator__body ::slotted([slot='target-note']) { align-self: flex-start; margin-top: var(--space-4); }\n/* The counter stands on the source's foot line, right, level with its tools; the text keeps\n   the body. */\n.lintje-translator__text::part(counter) {\n  position: absolute;\n  top: calc(100% + var(--space-1) + var(--h-icon-button) / 2);\n  right: var(--space-4);\n  transform: translateY(-50%);\n}\n\n/* Documents: the languages in one row, the content under them at full width. */\n.lintje-translator--documents { flex-direction: column; }\n.lintje-translator__bars { display: flex; }\n.lintje-translator__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n  padding: var(--space-6);\n  font: var(--text-ui);\n}\n\n/* On the line between the halves, level with the language choices. */\n.lintje-translator__swap {\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--space-4) + (var(--h-control) - var(--h-icon-button)) / 2);\n  left: 0;\n  transform: translateX(-50%);\n}\n\n@media (max-width: 767px) {\n  .lintje-translator, .lintje-translator__bars { flex-direction: column; }\n  .lintje-translator__content { padding: var(--space-4); }\n  .lintje-translator__half--target { border-left: 0; border-top: 1px solid var(--color-border-default); }\n  .lintje-translator__bar ::slotted(lintje-combobox) { flex: 1 1 100%; }\n  .lintje-translator__bar--source { padding-right: var(--space-4); }\n  .lintje-translator__swap { top: 0; left: 50%; transform: translate(-50%, -50%); }\n  .lintje-translator__half--target .lintje-translator__bar {\n    padding-top: calc(var(--space-2) + var(--h-icon-button) / 2);\n    padding-left: var(--space-4);\n  }\n}\n";
+//#endregion
+//#region src/components/content/translator/translator.ts
+function c(e) {
+	let [t] = e?.assignedElements({ flatten: !0 }) ?? [];
+	if (t instanceof HTMLSelectElement) return t.options[t.selectedIndex]?.text.trim() ?? "";
+	let { options: n, value: r } = t ?? {};
+	return Array.isArray(n) && n.find((e) => e.value === r)?.label || "";
+}
+var l = class extends o {
+	constructor(...e) {
+		super(...e), this.value = "", this.placeholder = "Typ of plak hier je tekst", this.sourceLabel = "Tekst om te vertalen", this.targetLabel = "Vertaling", this.variant = "text", this.spoken = "", this.spokenTimer = 0, this.#e = new a(this, r);
+	}
+	static {
+		this.styles = n(s);
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			maxlength: { type: Number },
+			placeholder: { type: String },
+			sourceLabel: {
+				type: String,
+				attribute: "source-label"
+			},
+			targetLabel: {
+				type: String,
+				attribute: "target-label"
+			},
+			variant: {
+				type: String,
+				reflect: !0
+			},
+			spoken: { state: !0 }
+		};
+	}
+	#e;
+	get field() {
+		return this.renderRoot.querySelector("lintje-textarea");
+	}
+	onText(e) {
+		e.stopPropagation(), this.value = e.detail ?? "", this.emit("lintje-text-change", this.value);
+	}
+	clear() {
+		this.value = "", this.emit("lintje-text-change", ""), this.updateComplete.then(() => this.field?.focus());
+	}
+	disconnectedCallback() {
+		clearTimeout(this.spokenTimer), super.disconnectedCallback();
+	}
+	swap() {
+		this.emit("lintje-languages-swap"), this.spoken = "", clearTimeout(this.spokenTimer), this.spokenTimer = window.setTimeout(() => {
+			let e = c(this.renderRoot.querySelector("slot[name=\"source-language\"]")), t = c(this.renderRoot.querySelector("slot[name=\"target-language\"]"));
+			this.spoken = e && t ? `Talen omgewisseld: ${e} naar ${t}` : "Talen omgewisseld";
+		}, 100);
+	}
+	renderStatus() {
+		return i`<span class="visually-hidden" role="status">${this.spoken}</span>`;
+	}
+	renderSwap() {
+		return i`<div class="lintje-translator__swap">
+      <lintje-icon-button
+        icon="functioneel-wissel-horizontaal"
+        label="Talen omwisselen"
+        variant="outlined"
+        @click=${this.swap}
+      ></lintje-icon-button>
+    </div>`;
+	}
+	renderDocuments() {
+		return i`<div class="lintje-translator lintje-translator--documents">
+      <div class="lintje-translator__bars">
+        <div class="lintje-translator__half">
+          <div class="lintje-translator__bar lintje-translator__bar--source"><slot name="source-language"></slot></div>
+        </div>
+        <div class="lintje-translator__half lintje-translator__half--target">
+          ${this.renderSwap()}
+          <div class="lintje-translator__bar"><slot name="target-language"></slot></div>
+        </div>
+      </div>
+      <div class="lintje-translator__content"><slot></slot></div>
+    </div>${this.renderStatus()}`;
+	}
+	render() {
+		return this.variant === "documents" ? this.renderDocuments() : i`<div class="lintje-translator">
+      <div class="lintje-translator__half" role="group" aria-label=${this.sourceLabel}>
+        <div class="lintje-translator__bar lintje-translator__bar--source"><slot name="source-language"></slot></div>
+        <div class="lintje-translator__body lintje-translator__body--source">
+          <lintje-textarea
+            class="lintje-translator__text"
+            variant="plain"
+            commit="input"
+            hide-label
+            .label=${this.sourceLabel}
+            .rows=${this.#e.matches ? 5 : 10}
+            .value=${this.value}
+            .maxlength=${this.maxlength}
+            .placeholder=${this.placeholder}
+            @lintje-change=${this.onText}
+          ></lintje-textarea>
+          ${this.value ? i`<lintje-icon-button
+                  class="lintje-translator__clear"
+                  icon="functioneel-kruis"
+                  label="Tekst wissen"
+                  variant="flat"
+                  @click=${this.clear}
+                ></lintje-icon-button>` : t}
+        </div>
+        <div class="lintje-translator__foot">
+          <slot name="source-actions"></slot>
+        </div>
+      </div>
+      <div class="lintje-translator__half lintje-translator__half--target" role="group" aria-label=${this.targetLabel}>
+        ${this.renderSwap()}
+        <div class="lintje-translator__bar"><slot name="target-language"></slot></div>
+        <div class="lintje-translator__body">
+          <slot name="target"></slot>
+          <slot name="target-note"></slot>
+        </div>
+        <div class="lintje-translator__foot">
+          <span class="lintje-translator__actions"><slot name="target-actions"></slot></span>
+        </div>
+      </div>
+    </div>${this.renderStatus()}`;
+	}
+};
+e("lintje-translator", l);
+//#endregion
+export { l as LintjeTranslator };

package/dist-elements/tag/tree-view.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/tables/tree-view/tree-view.js'

package/dist-elements/tag/tree-view.js

@@ -0,0 +1,172 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o, ut as s, zt as c } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/tables/tree-view/tree-view.css?inline
+var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-tree,\n.lintje-tree__group { list-style: none; margin: 0; padding: 0; }\n.lintje-tree { font: var(--text-ui); color: var(--color-text-primary); }\n\n/* The treeitem holds its row and its children, so the ring is drawn inside the row alone. */\n.lintje-tree__item:focus-visible { outline: none; }\n.lintje-tree__item:focus-visible > .lintje-tree__row {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n.lintje-tree__row {\n  display: flex; align-items: center;\n  gap: var(--space-1);\n  height: var(--h-option);\n  padding: 0 var(--space-2) 0 calc(var(--space-2) + var(--lintje-tree-depth, 0) * var(--space-5));\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-tree__row:hover { background: var(--color-bg-subtle); }\n.lintje-tree__row.is-selected {\n  background: var(--color-bg-selected);\n  box-shadow: inset 4px 0 0 var(--color-accent-line);\n  font-weight: 700;\n}\n\n.lintje-tree__arrow {\n  flex: none;\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 16px; height: 16px;\n  color: var(--color-text-muted);\n}\n/* The fold target reaches 24 × 24 px with a transparent hit area; it stays inside the gap. */\n.lintje-tree__arrow--toggle { position: relative; }\n.lintje-tree__arrow--toggle::after {\n  content: '';\n  position: absolute;\n  inset: calc(var(--space-1) * -1);\n}\n.lintje-tree__label {\n  min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.lintje-tree__count { flex: none; font-weight: 400; color: var(--color-text-muted); }\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-tree__row { transition: none; }\n}\n\n/* Forced colours: the fill and inset bar are dropped. The bar becomes a real border (Canvas at\n   rest, Highlight when selected), so selecting moves nothing. */\n@media (forced-colors: active) {\n  .lintje-tree__row { border-left: 4px solid Canvas; }\n  .lintje-tree__row.is-selected { border-left-color: Highlight; }\n}\n";
+//#endregion
+//#region src/components/tables/tree-view/tree-view.ts
+function u(e) {
+	return e.children !== void 0 || (e.count ?? 0) > 0;
+}
+function d(e, t, n = 1, r = null) {
+	let i = [];
+	for (let a of e) i.push({
+		node: a,
+		level: n,
+		parentId: r
+	}), a.children && t.has(a.id) && i.push(...d(a.children, t, n + 1, a.id));
+	return i;
+}
+function f(e, t, n) {
+	let r = n.toLocaleLowerCase("nl");
+	for (let n = 1; n <= e.length; n++) {
+		let i = (t + n) % e.length;
+		if (e[i].node.label.toLocaleLowerCase("nl").startsWith(r)) return i;
+	}
+	return -1;
+}
+var p = class extends c {
+	constructor(...e) {
+		super(...e), this.nodes = [], this.expanded = [], this.name = "", this.open = /* @__PURE__ */ new Set(), this.focusId = null;
+	}
+	static {
+		this.styles = [e, r(l)];
+	}
+	static {
+		this.properties = {
+			nodes: { attribute: !1 },
+			expanded: { attribute: !1 },
+			selectedId: {
+				type: String,
+				attribute: "selected-id"
+			},
+			name: { type: String },
+			label: { type: String },
+			open: { state: !0 },
+			focusId: { state: !0 }
+		};
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("expanded") && (this.open = new Set(this.expanded));
+	}
+	get rows() {
+		return d(this.nodes, this.open);
+	}
+	tabStop(e) {
+		let t = (t) => !!t && e.some((e) => e.node.id === t);
+		return t(this.focusId) ? this.focusId : t(this.selectedId) ? this.selectedId : e[0]?.node.id ?? null;
+	}
+	toggle(e, t) {
+		if (!u(e) || this.open.has(e.id) === t) return;
+		let n = new Set(this.open);
+		t ? n.add(e.id) : n.delete(e.id), this.open = n, this.emit("lintje-node-toggle", {
+			id: e.id,
+			open: t
+		});
+	}
+	choose(e) {
+		this.selectedId = e.id, this.emitLocal("lintje-change", e.id), this.name && this.emit("lintje-values-change", { [this.name]: e.id });
+	}
+	async moveFocus(e) {
+		this.focusId = e, await this.updateComplete, [...this.renderRoot.querySelectorAll("[role=\"treeitem\"]")].find((t) => t.dataset.id === e)?.focus();
+	}
+	onKeydown(e) {
+		let t = this.rows;
+		if (!t.length) return;
+		let n = Math.max(0, t.findIndex((e) => e.node.id === this.tabStop(t))), r = t[n], i = r.node, a = this.open.has(i.id), o = null;
+		switch (e.key) {
+			case "ArrowDown":
+				o = Math.min(t.length - 1, n + 1);
+				break;
+			case "ArrowUp":
+				o = Math.max(0, n - 1);
+				break;
+			case "Home":
+				o = 0;
+				break;
+			case "End":
+				o = t.length - 1;
+				break;
+			case "ArrowRight":
+				if (!u(i)) break;
+				a ? i.children?.length && (o = n + 1) : this.toggle(i, !0);
+				break;
+			case "ArrowLeft":
+				u(i) && a ? this.toggle(i, !1) : r.parentId && (o = t.findIndex((e) => e.node.id === r.parentId));
+				break;
+			case "Enter":
+			case " ":
+				this.choose(i);
+				break;
+			default:
+				if (e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey) {
+					let r = f(t, n, e.key);
+					r >= 0 && (o = r);
+					break;
+				}
+				return;
+		}
+		e.preventDefault(), o !== null && o >= 0 && this.moveFocus(t[o].node.id);
+	}
+	arrow(e) {
+		if (!u(e)) return i`<span class="lintje-tree__arrow" aria-hidden="true"></span>`;
+		if (e.loading) return i`<span class="lintje-tree__arrow" aria-hidden="true"
+        ><lintje-spinner></lintje-spinner
+      ></span>`;
+		let t = this.open.has(e.id);
+		return i`<span
+      class="lintje-tree__arrow lintje-tree__arrow--toggle"
+      aria-hidden="true"
+      @click=${(n) => {
+			n.stopPropagation(), this.toggle(e, !t);
+		}}
+      >${o(t ? "functioneel-delta-omlaag" : "functioneel-delta-rechts", { size: 16 })}</span
+    >`;
+	}
+	item(e, t, r) {
+		let o = u(e), c = o && this.open.has(e.id), l = e.id === this.selectedId, d = e.count ?? e.children?.length;
+		return i`<li
+      class="lintje-tree__item"
+      role="treeitem"
+      data-id=${e.id}
+      tabindex=${e.id === r ? "0" : "-1"}
+      aria-level=${t}
+      aria-selected=${l ? "true" : "false"}
+      aria-expanded=${o ? String(c) : n}
+      aria-busy=${e.loading ? "true" : n}
+      @focus=${(t) => {
+			t.target === t.currentTarget && (this.focusId = e.id);
+		}}
+    >
+      <div
+        class=${a({
+			"lintje-tree__row": !0,
+			"is-selected": l
+		})}
+        ${s({ "--lintje-tree-depth": t - 1 })}
+        @click=${() => {
+			this.choose(e), this.moveFocus(e.id);
+		}}
+      >
+        ${this.arrow(e)}
+        <span class="lintje-tree__label">${e.label}</span>
+        ${o && !c && d ? i`<span class="lintje-tree__count">· ${d}</span>` : n}
+      </div>
+      ${c && e.children?.length ? i`<ul class="lintje-tree__group" role="group">
+              ${e.children.map((e) => this.item(e, t + 1, r))}
+            </ul>` : n}
+    </li>`;
+	}
+	render() {
+		let e = this.tabStop(this.rows);
+		return i`<ul
+      class="lintje-tree"
+      role="tree"
+      aria-label=${this.label || "Boomstructuur"}
+      @keydown=${this.onKeydown}
+    >
+      ${this.nodes.map((t) => this.item(t, 1, e))}
+    </ul>`;
+	}
+};
+t("lintje-tree-view", p);
+//#endregion
+export { p as LintjeTreeView, u as isBranch, f as typeAhead, d as visibleRows };

package/dist-elements/tag/user-menu.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/frame/user-menu/user-menu.js'