@ecsplico/editor 0.0.0-stage → 1.0.0

package/dist/features/comments/components/CommentsListMenu.js

@@ -0,0 +1,134 @@
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { useComments } from "../use-comments.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
+//#region src/features/comments/components/CommentsListMenu.vue
+const _hoisted_1 = {
+	key: 0,
+	class: "p-3 text-sm text-[var(--sk-muted)]"
+};
+const _hoisted_2 = {
+	key: 1,
+	class: "flex flex-col p-1 text-sm"
+};
+const _hoisted_3 = {
+	key: 0,
+	class: "p-2 text-[var(--sk-muted)]"
+};
+const _hoisted_4 = {
+	key: 0,
+	class: "mt-1 border-t border-[var(--sk-border)] px-2 pt-1.5 text-xs font-medium text-[var(--sk-muted)]"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "flex items-center gap-1.5 text-xs" };
+const _hoisted_7 = { class: "truncate font-medium" };
+const _hoisted_8 = {
+	key: 0,
+	class: "ml-auto shrink-0 text-[var(--sk-muted)]"
+};
+const _hoisted_9 = {
+	key: 0,
+	class: "text-xs text-[var(--sk-muted)] italic"
+};
+const _hoisted_10 = {
+	key: 1,
+	class: "truncate border-l-2 border-[var(--sk-border)] pl-2 text-xs text-[var(--sk-muted)]"
+};
+const _hoisted_11 = { class: "line-clamp-2" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "CommentsListMenu",
+	props: { editor: {} },
+	setup(__props) {
+		/**
+		* Toolbar entry of the inline comments layout: a „Kommentare“ button with the number of open threads and a list of
+		* all threads (open ones in document order, then „Erledigt“). A row closes the list and opens the thread in the
+		* `CommentsPopover` at its text (selected and scrolled into view). Without collaboration the list explains that
+		* comments need a shared document.
+		*/
+		const props = __props;
+		const { Avatar: UAvatar, Button: UButton, Chip: UChip, Popover: UPopover, Tooltip: UTooltip } = useUiKit();
+		const { t } = useEditorI18n();
+		const comments = useComments(() => props.editor);
+		const listOpen = ref(false);
+		const initials = (name) => name.slice(0, 2).toUpperCase();
+		function show(id) {
+			listOpen.value = false;
+			comments.activate(id, { reveal: true });
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(UPopover), {
+				open: listOpen.value,
+				"onUpdate:open": _cache[1] || (_cache[1] = ($event) => listOpen.value = $event),
+				content: {
+					side: "bottom",
+					align: "end"
+				},
+				ui: { content: "w-72 max-h-[70vh] overflow-auto" }
+			}, {
+				content: withCtx(() => [!unref(comments).available.value ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(unref(t)("comments.unavailable")), 1)) : (openBlock(), createElementBlock("div", _hoisted_2, [!unref(comments).threads.value.length ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(unref(t)("comments.empty")), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList([{
+					label: null,
+					list: unref(comments).open.value
+				}, {
+					label: unref(t)("comments.resolved"),
+					list: unref(comments).resolved.value
+				}], (section) => {
+					return openBlock(), createElementBlock(Fragment, { key: section.label ?? "open" }, [section.label && section.list.length ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(section.label), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(section.list, (thread) => {
+						return openBlock(), createElementBlock("button", {
+							key: thread.id,
+							type: "button",
+							class: normalizeClass(["flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left hover:bg-[var(--sk-bg-elevated)]", { "opacity-60": thread.resolved }]),
+							onClick: ($event) => show(thread.id)
+						}, [
+							createElementVNode("span", _hoisted_6, [
+								createVNode(unref(UAvatar), {
+									size: "2xs",
+									text: initials(thread.author.name),
+									alt: thread.author.name,
+									style: normalizeStyle({ backgroundColor: thread.author.color })
+								}, null, 8, [
+									"text",
+									"alt",
+									"style"
+								]),
+								createElementVNode("span", _hoisted_7, toDisplayString(thread.author.name), 1),
+								thread.replies.length ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(t)("comments.repliesShort", { n: thread.replies.length })), 1)) : createCommentVNode("v-if", true)
+							]),
+							unref(comments).isOrphan(thread.id) ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(t)("comments.orphan")), 1)) : (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(thread.quote), 1)),
+							createElementVNode("span", _hoisted_11, toDisplayString(thread.text), 1)
+						], 10, _hoisted_5);
+					}), 128))], 64);
+				}), 128))]))]),
+				default: withCtx(() => [createVNode(unref(UTooltip), { text: unref(t)("comments.title") }, {
+					default: withCtx(() => [createVNode(unref(UChip), {
+						text: unref(comments).open.value.length,
+						show: unref(comments).open.value.length > 0,
+						size: "3xl"
+					}, {
+						default: withCtx(() => [createVNode(unref(UButton), {
+							color: "neutral",
+							variant: "ghost",
+							"active-color": "primary",
+							"active-variant": "soft",
+							icon: "i-lucide-message-square-text",
+							"aria-label": unref(t)("comments.title"),
+							active: listOpen.value,
+							disabled: !props.editor,
+							onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
+						}, null, 8, [
+							"aria-label",
+							"active",
+							"disabled"
+						])]),
+						_: 1
+					}, 8, ["text", "show"])]),
+					_: 1
+				}, 8, ["text"])]),
+				_: 1
+			}, 8, ["open"]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=CommentsListMenu.js.map

package/dist/features/comments/components/CommentsListMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsListMenu.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createElementBlock","_toDisplayString","_createCommentVNode","_Fragment","_renderList","_normalizeClass","_createElementVNode","_createVNode","_normalizeStyle","_withModifiers"],"sources":["../../../../src/features/comments/components/CommentsListMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Toolbar entry of the inline comments layout: a „Kommentare“ button with the number of open threads and a list of\n * all threads (open ones in document order, then „Erledigt“). A row closes the list and opens the thread in the\n * `CommentsPopover` at its text (selected and scrolled into view). Without collaboration the list explains that\n * comments need a shared document.\n */\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport type { Editor } from '@tiptap/vue-3'\nimport { ref } from 'vue'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { useComments } from '../use-comments'\n\nconst props = defineProps<{ editor: Editor | undefined }>()\nconst { Avatar: UAvatar, Button: UButton, Chip: UChip, Popover: UPopover, Tooltip: UTooltip } = useUiKit()\nconst { t } = useEditorI18n()\n\nconst comments = useComments(() => props.editor)\nconst listOpen = ref(false)\nconst initials = (name: string) => name.slice(0, 2).toUpperCase()\n\nfunction show(id: string) {\n  listOpen.value = false\n  comments.activate(id, { reveal: true })\n}\n</script>\n\n<template>\n  <UPopover v-model:open=\"listOpen\" :content=\"{ side: 'bottom', align: 'end' }\" :ui=\"{ content: 'w-72 max-h-[70vh] overflow-auto' }\">\n    <UTooltip :text=\"t('comments.title')\">\n      <UChip :text=\"comments.open.value.length\" :show=\"comments.open.value.length > 0\" size=\"3xl\">\n        <UButton\n          color=\"neutral\"\n          variant=\"ghost\"\n          active-color=\"primary\"\n          active-variant=\"soft\"\n          icon=\"i-lucide-message-square-text\"\n          :aria-label=\"t('comments.title')\"\n          :active=\"listOpen\"\n          :disabled=\"!props.editor\"\n          @mousedown.prevent\n        />\n      </UChip>\n    </UTooltip>\n\n    <template #content>\n      <p v-if=\"!comments.available.value\" class=\"p-3 text-sm text-[var(--sk-muted)]\">\n        {{ t('comments.unavailable') }}\n      </p>\n      <div v-else class=\"flex flex-col p-1 text-sm\">\n        <p v-if=\"!comments.threads.value.length\" class=\"p-2 text-[var(--sk-muted)]\">\n          {{ t('comments.empty') }}\n        </p>\n        <template\n          v-for=\"section in [{ label: null, list: comments.open.value }, { label: t('comments.resolved'), list: comments.resolved.value }]\"\n          :key=\"section.label ?? 'open'\"\n        >\n          <p v-if=\"section.label && section.list.length\" class=\"mt-1 border-t border-[var(--sk-border)] px-2 pt-1.5 text-xs font-medium text-[var(--sk-muted)]\">\n            {{ section.label }}\n          </p>\n          <button\n            v-for=\"thread in section.list\"\n            :key=\"thread.id\"\n            type=\"button\"\n            class=\"flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left hover:bg-[var(--sk-bg-elevated)]\"\n            :class=\"{ 'opacity-60': thread.resolved }\"\n            @click=\"show(thread.id)\"\n          >\n            <span class=\"flex items-center gap-1.5 text-xs\">\n              <UAvatar size=\"2xs\" :text=\"initials(thread.author.name)\" :alt=\"thread.author.name\" :style=\"{ backgroundColor: thread.author.color }\" />\n              <span class=\"truncate font-medium\">{{ thread.author.name }}</span>\n              <span v-if=\"thread.replies.length\" class=\"ml-auto shrink-0 text-[var(--sk-muted)]\">{{ t('comments.repliesShort', { n: thread.replies.length }) }}</span>\n            </span>\n            <span v-if=\"comments.isOrphan(thread.id)\" class=\"text-xs text-[var(--sk-muted)] italic\">{{ t('comments.orphan') }}</span>\n            <span v-else class=\"truncate border-l-2 border-[var(--sk-border)] pl-2 text-xs text-[var(--sk-muted)]\">{{ thread.quote }}</span>\n            <span class=\"line-clamp-2\">{{ thread.text }}</span>\n          </button>\n        </template>\n      </div>\n    </template>\n  </UPopover>\n</template>\n"],"mappings":"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"}

package/dist/features/comments/components/CommentsListMenu.vue.d.ts

@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/vue-3";
+//#region src/features/comments/components/CommentsListMenu.vue.d.ts
+type __VLS_Props = {
+  editor: Editor | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=CommentsListMenu.vue.d.ts.map

package/dist/features/comments/components/CommentsMargin.js

@@ -0,0 +1,291 @@
+import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
+import { useEditorSettings } from "../../../vue/settings.js";
+import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
+import { useComments } from "../use-comments.js";
+import _sfc_main$1 from "./CommentComposer.js";
+import _sfc_main$2 from "./CommentThreadView.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vShow, watch, withDirectives } from "vue";
+//#region src/features/comments/components/CommentsMargin.vue
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+	key: 0,
+	class: "p-3 text-sm text-[var(--sk-muted)]"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "shrink-0 font-medium" };
+const _hoisted_5 = { class: "min-w-0 flex-1 truncate text-[var(--sk-muted)]" };
+const _hoisted_6 = {
+	key: 0,
+	class: "shrink-0 text-xs text-[var(--sk-fg-dimmed)]"
+};
+const GAP = 8;
+const DRAFT = "__draft";
+/** Draft and open threads with a text range, in document order. */
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "CommentsMargin",
+	props: {
+		editor: {},
+		container: {},
+		open: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		/**
+		* Comments margin („Randspalte“): a 300px column the host places inside its scroll container right of the editor,
+		* so it scrolls with the text. Cards sit absolutely at the height of their text (top-down in document order, pushed
+		* down so they never overlap); the active thread is expanded, the others collapse to one line. The draft composer
+		* takes part in the layout, orphaned threads stack after the positioned cards and resolved threads („Erledigt“)
+		* sit at the bottom behind a toggle. Shown only while `open` (the host binds the surface's `commentsOpen` model) and the
+		* user's comments layout is `margin`; the layout is recomputed whenever the column becomes visible again.
+		*/
+		const props = __props;
+		const { settings } = useEditorSettings();
+		const { t } = useEditorI18n();
+		const enabled = computed(() => settings.value.editing.commentsLayout === "margin");
+		const comments = useComments(() => enabled.value ? props.editor : void 0);
+		const positioned = computed(() => {
+			const items = [];
+			const draft = comments.draft.value;
+			if (draft) items.push({
+				key: DRAFT,
+				from: draft.from,
+				thread: null
+			});
+			for (const thread of comments.open.value) {
+				const range = comments.ranges.value.get(thread.id);
+				if (range) items.push({
+					key: thread.id,
+					from: range.from,
+					thread
+				});
+			}
+			return items.sort((a, b) => a.from - b.from);
+		});
+		const orphans = computed(() => comments.open.value.filter((thread) => comments.isOrphan(thread.id)));
+		const column = ref();
+		const resolvedSection = ref();
+		const showResolved = ref(false);
+		const tops = ref({});
+		const resolvedTop = ref(0);
+		const minHeight = ref(0);
+		const cards = /* @__PURE__ */ new Map();
+		const observed = /* @__PURE__ */ new WeakSet();
+		let frame = 0;
+		const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => schedule());
+		function observe(el) {
+			if (!resizeObserver || observed.has(el)) return;
+			observed.add(el);
+			resizeObserver.observe(el);
+		}
+		function unobserve(el) {
+			resizeObserver?.unobserve(el);
+			observed.delete(el);
+		}
+		function setCard(key, el) {
+			if (!(el instanceof HTMLElement)) return;
+			cards.set(key, el);
+			observe(el);
+		}
+		function schedule() {
+			if (frame || typeof requestAnimationFrame === "undefined") return;
+			frame = requestAnimationFrame(relayout);
+		}
+		function relayout() {
+			frame = 0;
+			const editor = props.editor;
+			const col = column.value;
+			if (!editor || editor.isDestroyed || !col || !col.getClientRects().length) return;
+			const live = /* @__PURE__ */ new Set([...positioned.value.map((i) => i.key), ...orphans.value.map((thread) => thread.id)]);
+			for (const [key, el] of cards) {
+				if (live.has(key)) continue;
+				unobserve(el);
+				cards.delete(key);
+			}
+			const base = col.getBoundingClientRect().top;
+			const size = editor.state.doc.content.size;
+			const next = {};
+			let bottom = -8;
+			for (const item of positioned.value) {
+				let desired = bottom + GAP;
+				try {
+					desired = editor.view.coordsAtPos(Math.min(item.from, size)).top - base;
+				} catch {}
+				const top = Math.max(desired, bottom + GAP, 0);
+				next[item.key] = top;
+				bottom = top + (cards.get(item.key)?.offsetHeight ?? 0);
+			}
+			for (const thread of orphans.value) {
+				const top = bottom + GAP;
+				next[thread.id] = top;
+				bottom = top + (cards.get(thread.id)?.offsetHeight ?? 0);
+			}
+			tops.value = next;
+			resolvedTop.value = bottom < 0 ? 0 : bottom + 16;
+			minHeight.value = resolvedTop.value + (resolvedSection.value?.offsetHeight ?? 0);
+		}
+		watch(() => props.editor, (editor, _previous, onCleanup) => {
+			if (!editor) return;
+			editor.on("transaction", schedule);
+			schedule();
+			onCleanup(() => editor.off("transaction", schedule));
+		}, { immediate: true });
+		watch(() => props.container, (container, _previous, onCleanup) => {
+			if (!container || !resizeObserver) return;
+			resizeObserver.observe(container);
+			onCleanup(() => resizeObserver.unobserve(container));
+		}, { immediate: true });
+		watch(column, (el, previous) => {
+			if (previous) unobserve(previous);
+			if (el) observe(el);
+			schedule();
+		});
+		watch(resolvedSection, (el, previous) => {
+			if (previous) unobserve(previous);
+			if (el) observe(el);
+			schedule();
+		});
+		watch([
+			positioned,
+			orphans,
+			() => comments.active.value,
+			() => comments.resolved.value.length,
+			showResolved,
+			enabled
+		], () => nextTick(schedule));
+		onMounted(() => {
+			window.addEventListener("resize", schedule);
+			schedule();
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", schedule);
+			resizeObserver?.disconnect();
+			if (frame) cancelAnimationFrame(frame);
+		});
+		const { Avatar: UAvatar, Button: UButton } = useUiKit();
+		const initials = (name) => name.slice(0, 2).toUpperCase();
+		const excerpt = (text) => text.length > 60 ? `${text.slice(0, 60)}…` : text;
+		/** Clicking a card activates (expands) it and reveals its text; clicks inside the already active card do nothing. */
+		function select(id) {
+			if (comments.active.value !== id) comments.activate(id, { reveal: true });
+		}
+		const cardStyle = (key) => ({ top: `${tops.value[key] ?? 0}px` });
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "column",
+				ref: column,
+				class: "relative w-[300px] shrink-0",
+				style: normalizeStyle({ minHeight: `${minHeight.value}px` }),
+				"aria-label": unref(t)("comments.title")
+			}, [!unref(comments).available.value ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(unref(t)("comments.unavailable")), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+				(openBlock(true), createElementBlock(Fragment, null, renderList(positioned.value, (item) => {
+					return openBlock(), createElementBlock("div", {
+						key: item.key,
+						ref_for: true,
+						ref: (el) => setCard(item.key, el),
+						class: normalizeClass(["absolute inset-x-0 transition-[top] duration-100", { invisible: tops.value[item.key] === void 0 }]),
+						style: normalizeStyle(cardStyle(item.key))
+					}, [!item.thread ? (openBlock(), createBlock(_sfc_main$1, {
+						key: 0,
+						quote: unref(comments).draftQuote.value,
+						class: "shadow-md",
+						onSubmit: _cache[0] || (_cache[0] = ($event) => unref(comments).add($event)),
+						onCancel: _cache[1] || (_cache[1] = ($event) => unref(comments).cancelDraft())
+					}, null, 8, ["quote"])) : unref(comments).active.value === item.thread.id ? (openBlock(), createBlock(_sfc_main$2, {
+						key: 1,
+						thread: item.thread,
+						user: unref(comments).user.value,
+						active: true,
+						orphan: false,
+						comments: unref(comments),
+						class: "shadow-md",
+						onClick: ($event) => select(item.thread.id)
+					}, null, 8, [
+						"thread",
+						"user",
+						"comments",
+						"onClick"
+					])) : (openBlock(), createElementBlock("button", {
+						key: 2,
+						type: "button",
+						class: "flex w-full items-center gap-2 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] px-2 py-1.5 text-left text-sm hover:bg-[var(--sk-bg-elevated)]",
+						onClick: ($event) => select(item.thread.id)
+					}, [
+						createVNode(unref(UAvatar), {
+							size: "2xs",
+							text: initials(item.thread.author.name),
+							alt: item.thread.author.name,
+							style: normalizeStyle({ backgroundColor: item.thread.author.color })
+						}, null, 8, [
+							"text",
+							"alt",
+							"style"
+						]),
+						createElementVNode("span", _hoisted_4, toDisplayString(item.thread.author.name), 1),
+						createElementVNode("span", _hoisted_5, toDisplayString(excerpt(item.thread.text)), 1),
+						item.thread.replies.length ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(item.thread.replies.length), 1)) : createCommentVNode("v-if", true)
+					], 8, _hoisted_3))], 6);
+				}), 128)),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(orphans.value, (thread) => {
+					return openBlock(), createElementBlock("div", {
+						key: thread.id,
+						ref_for: true,
+						ref: (el) => setCard(thread.id, el),
+						class: normalizeClass(["absolute inset-x-0", { invisible: tops.value[thread.id] === void 0 }]),
+						style: normalizeStyle(cardStyle(thread.id))
+					}, [createVNode(_sfc_main$2, {
+						thread,
+						user: unref(comments).user.value,
+						active: unref(comments).active.value === thread.id,
+						orphan: true,
+						comments: unref(comments),
+						onClick: ($event) => select(thread.id)
+					}, null, 8, [
+						"thread",
+						"user",
+						"active",
+						"comments",
+						"onClick"
+					])], 6);
+				}), 128)),
+				unref(comments).resolved.value.length ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "resolvedSection",
+					ref: resolvedSection,
+					class: "absolute inset-x-0 flex flex-col gap-2",
+					style: normalizeStyle({ top: `${resolvedTop.value}px` })
+				}, [createVNode(unref(UButton), {
+					color: "neutral",
+					variant: "ghost",
+					size: "sm",
+					label: unref(t)("comments.resolvedCount", { n: unref(comments).resolved.value.length }),
+					"trailing-icon": showResolved.value ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
+					class: "self-start",
+					onClick: _cache[2] || (_cache[2] = ($event) => showResolved.value = !showResolved.value)
+				}, null, 8, ["label", "trailing-icon"]), showResolved.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(comments).resolved.value, (thread) => {
+					return openBlock(), createBlock(_sfc_main$2, {
+						key: thread.id,
+						thread,
+						user: unref(comments).user.value,
+						active: unref(comments).active.value === thread.id,
+						orphan: unref(comments).isOrphan(thread.id),
+						comments: unref(comments),
+						onClick: ($event) => select(thread.id)
+					}, null, 8, [
+						"thread",
+						"user",
+						"active",
+						"orphan",
+						"comments",
+						"onClick"
+					]);
+				}), 128)) : createCommentVNode("v-if", true)], 4)) : createCommentVNode("v-if", true)
+			], 64))], 12, _hoisted_1)), [[vShow, __props.open && enabled.value]]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=CommentsMargin.js.map

package/dist/features/comments/components/CommentsMargin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsMargin.js","names":["_withDirectives","_openBlock","_createElementBlock","_normalizeStyle","_unref","_toDisplayString","_Fragment","_renderList","_normalizeClass","_createBlock","CommentComposer","CommentThreadView","_createVNode","_createElementVNode","_createCommentVNode","_vShow"],"sources":["../../../../src/features/comments/components/CommentsMargin.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Comments margin („Randspalte“): a 300px column the host places inside its scroll container right of the editor,\n * so it scrolls with the text. Cards sit absolutely at the height of their text (top-down in document order, pushed\n * down so they never overlap); the active thread is expanded, the others collapse to one line. The draft composer\n * takes part in the layout, orphaned threads stack after the positioned cards and resolved threads („Erledigt“)\n * sit at the bottom behind a toggle. Shown only while `open` (the host binds the surface's `commentsOpen` model) and the\n * user's comments layout is `margin`; the layout is recomputed whenever the column becomes visible again.\n */\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport type { Editor } from '@tiptap/vue-3'\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport type { CommentThread as Thread } from '../schema'\nimport { useComments } from '../use-comments'\nimport { useEditorSettings } from '../../../vue/settings'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport CommentComposer from './CommentComposer.vue'\nimport CommentThreadView from './CommentThreadView.vue'\n\nconst props = withDefaults(defineProps<{\n  editor: Editor | undefined\n  /** The editor's scroll container, which the column sits in: its size changes re-run the layout. */\n  container: HTMLElement | null\n  /** Whether the column is shown (the surface's `commentsOpen` model). */\n  open?: boolean\n}>(), { open: true })\n\nconst { settings } = useEditorSettings()\nconst { t } = useEditorI18n()\nconst enabled = computed(() => settings.value.editing.commentsLayout === 'margin')\n// Idle (no Y.Doc observer) while another layout shows the comments.\nconst comments = useComments(() => enabled.value ? props.editor : undefined)\n\nconst GAP = 8\nconst DRAFT = '__draft'\n\ninterface Item { key: string, from: number, thread: Thread | null }\n\n/** Draft and open threads with a text range, in document order. */\nconst positioned = computed<Item[]>(() => {\n  const items: Item[] = []\n  const draft = comments.draft.value\n  if (draft) items.push({ key: DRAFT, from: draft.from, thread: null })\n  for (const thread of comments.open.value) {\n    const range = comments.ranges.value.get(thread.id)\n    if (range) items.push({ key: thread.id, from: range.from, thread })\n  }\n  return items.sort((a, b) => a.from - b.from)\n})\nconst orphans = computed(() => comments.open.value.filter(thread => comments.isOrphan(thread.id)))\n\nconst column = ref<HTMLElement>()\nconst resolvedSection = ref<HTMLElement>()\nconst showResolved = ref(false)\nconst tops = ref<Record<string, number>>({})\nconst resolvedTop = ref(0)\nconst minHeight = ref(0)\n\nconst cards = new Map<string, HTMLElement>()\nconst observed = new WeakSet<Element>()\nlet frame = 0\n\nconst resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => schedule())\n\nfunction observe(el: Element) {\n  if (!resizeObserver || observed.has(el)) return\n  observed.add(el)\n  resizeObserver.observe(el)\n}\n\nfunction unobserve(el: Element) {\n  resizeObserver?.unobserve(el)\n  observed.delete(el)\n}\n\nfunction setCard(key: string, el: unknown) {\n  if (!(el instanceof HTMLElement)) return\n  cards.set(key, el)\n  observe(el)\n}\n\nfunction schedule() {\n  if (frame || typeof requestAnimationFrame === 'undefined') return\n  frame = requestAnimationFrame(relayout)\n}\n\nfunction relayout() {\n  frame = 0\n  const editor = props.editor\n  const col = column.value\n  // Hidden (`v-show`) columns have no layout box; the column's own ResizeObserver re-runs this once shown.\n  if (!editor || editor.isDestroyed || !col || !col.getClientRects().length) return\n  const live = new Set([...positioned.value.map(i => i.key), ...orphans.value.map(thread => thread.id)])\n  for (const [key, el] of cards) {\n    if (live.has(key)) continue\n    unobserve(el)\n    cards.delete(key)\n  }\n\n  const base = col.getBoundingClientRect().top\n  const size = editor.state.doc.content.size\n  const next: Record<string, number> = {}\n  let bottom = -GAP\n  for (const item of positioned.value) {\n    let desired = bottom + GAP\n    try {\n      desired = editor.view.coordsAtPos(Math.min(item.from, size)).top - base\n    }\n    catch {\n      // Position not rendered (yet): stack it below the previous card.\n    }\n    const top = Math.max(desired, bottom + GAP, 0)\n    next[item.key] = top\n    bottom = top + (cards.get(item.key)?.offsetHeight ?? 0)\n  }\n  for (const thread of orphans.value) {\n    const top = bottom + GAP\n    next[thread.id] = top\n    bottom = top + (cards.get(thread.id)?.offsetHeight ?? 0)\n  }\n  tops.value = next\n  resolvedTop.value = bottom < 0 ? 0 : bottom + 2 * GAP\n  minHeight.value = resolvedTop.value + (resolvedSection.value?.offsetHeight ?? 0)\n}\n\nwatch(() => props.editor, (editor, _previous, onCleanup) => {\n  if (!editor) return\n  editor.on('transaction', schedule)\n  schedule()\n  onCleanup(() => editor.off('transaction', schedule))\n}, { immediate: true })\n\nwatch(() => props.container, (container, _previous, onCleanup) => {\n  if (!container || !resizeObserver) return\n  resizeObserver.observe(container)\n  onCleanup(() => resizeObserver.unobserve(container))\n}, { immediate: true })\n\n// The column itself: its size flips between zero and real when the host toggles it with `v-show`.\nwatch(column, (el, previous) => {\n  if (previous) unobserve(previous)\n  if (el) observe(el)\n  schedule()\n})\n\nwatch(resolvedSection, (el, previous) => {\n  if (previous) unobserve(previous)\n  if (el) observe(el)\n  schedule()\n})\n\n// Cards appearing/disappearing or expanding: lay out once the DOM has them.\nwatch([positioned, orphans, () => comments.active.value, () => comments.resolved.value.length, showResolved, enabled], () => nextTick(schedule))\n\nonMounted(() => {\n  window.addEventListener('resize', schedule)\n  schedule()\n})\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', schedule)\n  resizeObserver?.disconnect()\n  if (frame) cancelAnimationFrame(frame)\n})\n\nconst { Avatar: UAvatar, Button: UButton } = useUiKit()\nconst initials = (name: string) => name.slice(0, 2).toUpperCase()\nconst excerpt = (text: string) => text.length > 60 ? `${text.slice(0, 60)}…` : text\n\n/** Clicking a card activates (expands) it and reveals its text; clicks inside the already active card do nothing. */\nfunction select(id: string) {\n  if (comments.active.value !== id) comments.activate(id, { reveal: true })\n}\n\nconst cardStyle = (key: string) => ({ top: `${tops.value[key] ?? 0}px` })\n</script>\n\n<template>\n  <div\n    v-show=\"open && enabled\"\n    ref=\"column\"\n    class=\"relative w-[300px] shrink-0\"\n    :style=\"{ minHeight: `${minHeight}px` }\"\n    :aria-label=\"t('comments.title')\"\n  >\n    <p v-if=\"!comments.available.value\" class=\"p-3 text-sm text-[var(--sk-muted)]\">\n      {{ t('comments.unavailable') }}\n    </p>\n\n    <template v-else>\n      <div\n        v-for=\"item in positioned\"\n        :key=\"item.key\"\n        :ref=\"el => setCard(item.key, el)\"\n        class=\"absolute inset-x-0 transition-[top] duration-100\"\n        :class=\"{ invisible: tops[item.key] === undefined }\"\n        :style=\"cardStyle(item.key)\"\n      >\n        <CommentComposer\n          v-if=\"!item.thread\"\n          :quote=\"comments.draftQuote.value\"\n          class=\"shadow-md\"\n          @submit=\"comments.add($event)\"\n          @cancel=\"comments.cancelDraft()\"\n        />\n        <CommentThreadView\n          v-else-if=\"comments.active.value === item.thread.id\"\n          :thread=\"item.thread\"\n          :user=\"comments.user.value\"\n          :active=\"true\"\n          :orphan=\"false\"\n          :comments=\"comments\"\n          class=\"shadow-md\"\n          @click=\"select(item.thread.id)\"\n        />\n        <button\n          v-else\n          type=\"button\"\n          class=\"flex w-full items-center gap-2 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] px-2 py-1.5 text-left text-sm hover:bg-[var(--sk-bg-elevated)]\"\n          @click=\"select(item.thread.id)\"\n        >\n          <UAvatar\n            size=\"2xs\"\n            :text=\"initials(item.thread.author.name)\"\n            :alt=\"item.thread.author.name\"\n            :style=\"{ backgroundColor: item.thread.author.color }\"\n          />\n          <span class=\"shrink-0 font-medium\">{{ item.thread.author.name }}</span>\n          <span class=\"min-w-0 flex-1 truncate text-[var(--sk-muted)]\">{{ excerpt(item.thread.text) }}</span>\n          <span v-if=\"item.thread.replies.length\" class=\"shrink-0 text-xs text-[var(--sk-fg-dimmed)]\">{{ item.thread.replies.length }}</span>\n        </button>\n      </div>\n\n      <div\n        v-for=\"thread in orphans\"\n        :key=\"thread.id\"\n        :ref=\"el => setCard(thread.id, el)\"\n        class=\"absolute inset-x-0\"\n        :class=\"{ invisible: tops[thread.id] === undefined }\"\n        :style=\"cardStyle(thread.id)\"\n      >\n        <CommentThreadView\n          :thread=\"thread\"\n          :user=\"comments.user.value\"\n          :active=\"comments.active.value === thread.id\"\n          :orphan=\"true\"\n          :comments=\"comments\"\n          @click=\"select(thread.id)\"\n        />\n      </div>\n\n      <div\n        v-if=\"comments.resolved.value.length\"\n        ref=\"resolvedSection\"\n        class=\"absolute inset-x-0 flex flex-col gap-2\"\n        :style=\"{ top: `${resolvedTop}px` }\"\n      >\n        <UButton\n          color=\"neutral\"\n          variant=\"ghost\"\n          size=\"sm\"\n          :label=\"t('comments.resolvedCount', { n: comments.resolved.value.length })\"\n          :trailing-icon=\"showResolved ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'\"\n          class=\"self-start\"\n          @click=\"showResolved = !showResolved\"\n        />\n        <template v-if=\"showResolved\">\n          <CommentThreadView\n            v-for=\"thread in comments.resolved.value\"\n            :key=\"thread.id\"\n            :thread=\"thread\"\n            :user=\"comments.user.value\"\n            :active=\"comments.active.value === thread.id\"\n            :orphan=\"comments.isOrphan(thread.id)\"\n            :comments=\"comments\"\n            @click=\"select(thread.id)\"\n          />\n        </template>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/features/comments/components/CommentsMargin.vue.d.ts

@@ -0,0 +1,16 @@
+import { Editor } from "@tiptap/vue-3";
+//#region src/features/comments/components/CommentsMargin.vue.d.ts
+type __VLS_Props = {
+  editor: Editor | undefined;
+  /** The editor's scroll container, which the column sits in: its size changes re-run the layout. */
+  container: HTMLElement | null;
+  /** Whether the column is shown (the surface's `commentsOpen` model). */
+  open?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+  open: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=CommentsMargin.vue.d.ts.map

package/dist/features/comments/components/CommentsOverlay.js

@@ -0,0 +1,39 @@
+import { useEditorSettings } from "../../../vue/settings.js";
+import { useEditorUi } from "../../../vue/use-editor-ui.js";
+import { cancelCommentDraft, commentsKey, setActiveComment } from "../comments-plugin.js";
+import _sfc_main$1 from "./CommentBubble.js";
+import _sfc_main$2 from "./CommentsPopover.js";
+import { Fragment, createElementBlock, createVNode, defineComponent, openBlock, watch } from "vue";
+//#region src/features/comments/components/CommentsOverlay.vue
+/**
+* What the comments feature mounts beside the editor content: the selection bubble, the popover of the inline layout,
+* and the layout glue below. The margin column itself (`CommentsMargin`) is placed by the host.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "CommentsOverlay",
+	props: { editor: {} },
+	setup(__props) {
+		const props = __props;
+		const { settings } = useEditorSettings();
+		const ui = useEditorUi();
+		watch(() => {
+			const { editor } = props;
+			return !editor.isDestroyed ? commentsKey.getState(editor.state)?.draft ?? null : null;
+		}, (draft) => {
+			if (draft && settings.value.editing.commentsLayout === "margin" && !ui.value?.commentsOpen) ui.value?.toggleComments();
+		});
+		watch(() => settings.value.editing.commentsLayout, () => {
+			const { editor } = props;
+			if (editor.isDestroyed) return;
+			cancelCommentDraft(editor);
+			setActiveComment(editor, null);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$1, { editor: __props.editor }, null, 8, ["editor"]), createVNode(_sfc_main$2, { editor: __props.editor }, null, 8, ["editor"])], 64);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=CommentsOverlay.js.map

package/dist/features/comments/components/CommentsOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsOverlay.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","CommentBubble","CommentsPopover"],"sources":["../../../../src/features/comments/components/CommentsOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Editor } from '@tiptap/vue-3'\nimport { watch } from 'vue'\nimport { useEditorSettings } from '../../../vue/settings'\nimport { useEditorUi } from '../../../vue/use-editor-ui'\nimport { cancelCommentDraft, commentsKey, setActiveComment } from '../comments-plugin'\nimport CommentBubble from './CommentBubble.vue'\nimport CommentsPopover from './CommentsPopover.vue'\n\n/**\n * What the comments feature mounts beside the editor content: the selection bubble, the popover of the inline layout,\n * and the layout glue below. The margin column itself (`CommentsMargin`) is placed by the host.\n */\nconst props = defineProps<{ editor: Editor }>()\n\nconst { settings } = useEditorSettings()\nconst ui = useEditorUi()\n\n// Starting a comment (the plugin's draft appears) opens the margin in the margin layout, so the composer is visible.\nwatch(() => {\n  const { editor } = props\n  return !editor.isDestroyed ? commentsKey.getState(editor.state)?.draft ?? null : null\n}, (draft) => {\n  if (draft && settings.value.editing.commentsLayout === 'margin' && !ui.value?.commentsOpen) ui.value?.toggleComments()\n})\n\n// A layout switch starts closed: otherwise the thread active in the margin opens the inline popover at once (over the\n// settings dialog the switch was made in), and vice versa.\nwatch(() => settings.value.editing.commentsLayout, () => {\n  const { editor } = props\n  if (editor.isDestroyed) return\n  cancelCommentDraft(editor)\n  setActiveComment(editor, null)\n})\n</script>\n\n<template>\n  <CommentBubble :editor=\"editor\" />\n  <CommentsPopover :editor=\"editor\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAaA,MAAM,QAAQ;EAEd,MAAM,EAAE,aAAa,kBAAkB;EACvC,MAAM,KAAK,YAAY;EAGvB,YAAY;GACV,MAAM,EAAE,WAAW;GACnB,OAAO,CAAC,OAAO,cAAc,YAAY,SAAS,OAAO,KAAK,CAAC,EAAE,SAAS,OAAO;EACnF,IAAI,UAAU;GACZ,IAAI,SAAS,SAAS,MAAM,QAAQ,mBAAmB,YAAY,CAAC,GAAG,OAAO,cAAc,GAAG,OAAO,eAAe;EACvH,CAAC;EAID,YAAY,SAAS,MAAM,QAAQ,sBAAsB;GACvD,MAAM,EAAE,WAAW;GACnB,IAAI,OAAO,aAAa;GACxB,mBAAmB,MAAM;GACzB,iBAAiB,QAAQ,IAAI;EAC/B,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAAA,UAAA,MAAA,CAAAG,YAAkCC,aAAA,EAAlB,QAAQ,QAAA,OAAM,GAAA,MAAA,GAAA,CAAA,QAAA,CAAA,GAC9BD,YAAoCE,aAAA,EAAlB,QAAQ,QAAA,OAAM,GAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,GAAA,EAAA"}