@ecsplico/editor 1.0.0 → 2.1.0

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

@@ -1,6 +1,6 @@
+import { commentsState } from "../comments-plugin.js";
 import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
 import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
-import { commentsState } from "../comments-plugin.js";
 import { useComments } from "../use-comments.js";
 import { createBlock, createElementVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
 import { BubbleMenu } from "@tiptap/vue-3/menus";

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

@@ -1,6 +1,6 @@
+import { COMMENT_LIMITS } from "../schema.js";
 import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
 import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
-import { COMMENT_LIMITS } from "../schema.js";
 import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref } from "vue";
 //#region src/features/comments/components/CommentComposer.vue
 const _hoisted_1 = ["title"];

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

@@ -1,6 +1,6 @@
+import { COMMENT_LIMITS } from "../schema.js";
 import { useUiKit } from "../../../vue/kit/use-ui-kit.js";
 import { useEditorI18n } from "../../../vue/use-editor-i18n.js";
-import { COMMENT_LIMITS } from "../schema.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, withCtx } from "vue";
 //#region src/features/comments/components/CommentThreadView.vue
 const _hoisted_1 = {
@@ -117,7 +117,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(["flex flex-col text-sm", __props.dense ? "gap-1.5" : ["gap-3 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] p-3", { "ring-2 ring-[var(--sk-primary)]": __props.active }]]),
+				class: normalizeClass(["flex flex-col text-sm", __props.dense ? "gap-1.5" : ["gap-3 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] p-3", {
+					"ring-2 ring-[var(--sk-primary)]": __props.active,
+					"opacity-70": __props.orphan
+				}]]),
 				onClick: _cache[7] || (_cache[7] = ($event) => emit("click"))
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
 				return openBlock(), createElementBlock("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"CommentThreadView.js","names":["_openBlock","_createElementBlock","_normalizeClass","_Fragment","_renderList","_createElementVNode","_createVNode","_unref","_normalizeStyle","_toDisplayString","_createTextVNode","_createCommentVNode","_createBlock","_withCtx"],"sources":["../../../../src/features/comments/components/CommentThreadView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DropdownItem } from '../../../vue/kit/types'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { computed, ref } from 'vue'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport type { AuthorIdentity } from '../../../core'\nimport { COMMENT_LIMITS, type CommentAuthor, type CommentThread } from '../schema'\nimport type { CommentsStore } from '../use-comments'\n\n/**\n * One comment thread as a card: root comment (with the commented text, or „Textstelle gelöscht“ for an orphan),\n * replies, a reply field. Everyone may resolve/reopen; editing and deleting are offered on the user's own comments\n * only. Layout-independent: mutations go through the `comments` store; a click on the card emits `click` (layouts\n * activate and reveal the thread). `dense`: compact, frameless rendering for a popover (name and time on one line,\n * one-line quote, icon-only send button).\n */\nconst props = defineProps<{\n  thread: CommentThread\n  user: AuthorIdentity | null\n  active: boolean\n  orphan: boolean\n  comments: CommentsStore\n  dense?: boolean\n}>()\nconst emit = defineEmits<{ click: [] }>()\nconst { Avatar: UAvatar, Badge: UBadge, Button: UButton, DropdownMenu: UDropdownMenu, Textarea: UTextarea } = useUiKit()\nconst { t, locale } = useEditorI18n()\n\n/** The root comment (`replyId` null) and the replies, rendered with the same row layout. */\ninterface Entry { replyId: string | null, author: CommentAuthor, text: string, createdAt: string, editedAt?: string }\n\nconst entries = computed<Entry[]>(() => [\n  { replyId: null, author: props.thread.author, text: props.thread.text, createdAt: props.thread.createdAt, editedAt: props.thread.editedAt },\n  ...props.thread.replies.map(r => ({ replyId: r.id, author: r.author, text: r.text, createdAt: r.createdAt, editedAt: r.editedAt })),\n])\n\nconst TIME_FORMAT = new Intl.DateTimeFormat(locale, { dateStyle: 'short', timeStyle: 'short' })\nconst formatTime = (iso: string) => TIME_FORMAT.format(new Date(iso))\nconst initials = (name: string) => name.slice(0, 2).toUpperCase()\n\n/** The entry being edited and its new text. */\nconst editing = ref<{ replyId: string | null, text: string } | null>(null)\nconst replyText = ref('')\n\nfunction menuItems(entry: Entry): DropdownItem[][] {\n  const own = !!props.user && entry.author.id === props.user.id\n  const groups: DropdownItem[][] = []\n  if (own) {\n    groups.push([\n      { label: t('comments.edit'), icon: 'i-lucide-pencil', onSelect: () => (editing.value = { replyId: entry.replyId, text: entry.text }) },\n      {\n        label: t('comments.delete'),\n        icon: 'i-lucide-trash-2',\n        color: 'error',\n        onSelect: () => entry.replyId ? props.comments.removeReply(props.thread.id, entry.replyId) : props.comments.remove(props.thread.id),\n      },\n    ])\n  }\n  if (entry.replyId === null) {\n    const resolved = props.thread.resolved\n    groups.push([{\n      label: resolved ? t('comments.reopen') : t('comments.resolved'),\n      icon: resolved ? 'i-lucide-rotate-ccw' : 'i-lucide-check',\n      onSelect: () => props.comments.setResolved(props.thread.id, !resolved),\n    }])\n  }\n  return groups\n}\n\nfunction saveEdit() {\n  const value = editing.value\n  if (!value?.text.trim()) return\n  props.comments.edit(props.thread.id, value.replyId, value.text)\n  editing.value = null\n}\n\nfunction sendReply() {\n  if (!replyText.value.trim()) return\n  props.comments.reply(props.thread.id, replyText.value)\n  replyText.value = ''\n}\n\n/** Mod-Enter runs `submit`, Esc `cancel` (when given). */\nfunction onKeydown(event: KeyboardEvent, submit: () => void, cancel?: () => void) {\n  if (event.isComposing) return\n  if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    submit()\n  }\n  else if (event.key === 'Escape' && cancel) {\n    event.preventDefault()\n    cancel()\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col text-sm\"\n    :class=\"dense ? 'gap-1.5' : ['gap-3 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] p-3', { 'ring-2 ring-[var(--sk-primary)]': active }]\"\n    @click=\"emit('click')\"\n  >\n    <div\n      v-for=\"entry in entries\"\n      :key=\"entry.replyId ?? 'root'\"\n      class=\"flex flex-col\"\n      :class=\"[dense ? 'gap-0.5' : 'gap-1', entry.replyId ? (dense ? 'ml-2 border-l border-[var(--sk-border)] pl-2' : 'ml-4 border-l border-[var(--sk-border)] pl-3') : '']\"\n    >\n      <div class=\"flex items-center\" :class=\"dense ? 'gap-1.5' : 'gap-2'\">\n        <UAvatar\n          :size=\"dense ? '2xs' : 'xs'\"\n          :text=\"initials(entry.author.name)\"\n          :alt=\"entry.author.name\"\n          :style=\"{ backgroundColor: entry.author.color }\"\n        />\n        <div v-if=\"dense\" class=\"flex min-w-0 flex-1 items-baseline gap-1.5 text-xs\">\n          <span class=\"truncate font-medium\">{{ entry.author.name }}</span>\n          <span class=\"shrink-0 text-[var(--sk-muted)]\">\n            {{ formatTime(entry.createdAt) }}<template v-if=\"entry.editedAt\">\n              {{ t('comments.edited') }}\n            </template>\n          </span>\n        </div>\n        <div v-else class=\"min-w-0 flex-1\">\n          <div class=\"truncate font-medium\">\n            {{ entry.author.name }}\n          </div>\n          <div class=\"text-xs text-[var(--sk-muted)]\">\n            {{ formatTime(entry.createdAt) }}<template v-if=\"entry.editedAt\">\n              {{ t('comments.edited') }}\n            </template>\n          </div>\n        </div>\n        <UDropdownMenu v-if=\"menuItems(entry).length\" :items=\"menuItems(entry)\" :content=\"{ align: 'end' }\">\n          <UButton size=\"xs\" color=\"neutral\" variant=\"ghost\" icon=\"i-lucide-ellipsis-vertical\" :aria-label=\"t('comments.actions')\" />\n        </UDropdownMenu>\n      </div>\n\n      <template v-if=\"entry.replyId === null\">\n        <UBadge v-if=\"orphan\" :size=\"dense ? 'sm' : 'md'\" color=\"neutral\" variant=\"subtle\" :label=\"t('comments.orphan')\" class=\"self-start\" />\n        <p\n          v-else-if=\"thread.quote\"\n          class=\"border-l-2 border-[var(--sk-warning)] pl-2 text-[var(--sk-muted)] italic\"\n          :class=\"dense ? 'truncate text-xs' : 'line-clamp-2'\"\n          :title=\"dense ? thread.quote : undefined\"\n        >\n          {{ thread.quote }}\n        </p>\n      </template>\n\n      <div v-if=\"editing && editing.replyId === entry.replyId\" class=\"flex flex-col\" :class=\"dense ? 'gap-1.5' : 'gap-2'\">\n        <UTextarea\n          v-model=\"editing.text\"\n          autofocus\n          autoresize\n          :size=\"dense ? 'xs' : 'md'\"\n          :rows=\"1\"\n          :maxrows=\"8\"\n          :maxlength=\"COMMENT_LIMITS.text\"\n          :aria-label=\"t('comments.editLabel')\"\n          class=\"w-full\"\n          @keydown=\"onKeydown($event, saveEdit, () => (editing = null))\"\n        />\n        <div class=\"flex justify-end\" :class=\"dense ? 'gap-1' : 'gap-2'\">\n          <UButton size=\"xs\" color=\"neutral\" variant=\"ghost\" :label=\"t('comments.cancel')\" @click=\"editing = null\" />\n          <UButton size=\"xs\" :label=\"t('comments.save')\" :disabled=\"!editing.text.trim()\" @click=\"saveEdit\" />\n        </div>\n      </div>\n      <p v-else class=\"break-words whitespace-pre-wrap\">\n        {{ entry.text }}\n      </p>\n    </div>\n\n    <div v-if=\"dense\" class=\"flex items-end gap-1\">\n      <UTextarea\n        v-model=\"replyText\"\n        autoresize\n        size=\"xs\"\n        :rows=\"1\"\n        :maxrows=\"4\"\n        :maxlength=\"COMMENT_LIMITS.text\"\n        :placeholder=\"t('comments.reply.placeholder')\"\n        :aria-label=\"t('comments.reply.label')\"\n        class=\"min-w-0 flex-1\"\n        @keydown=\"onKeydown($event, sendReply)\"\n      />\n      <UButton size=\"xs\" color=\"neutral\" variant=\"soft\" icon=\"i-lucide-send\" :aria-label=\"t('comments.reply.submit')\" :disabled=\"!replyText.trim()\" @click=\"sendReply\" />\n    </div>\n    <div v-else class=\"flex items-end gap-2\">\n      <UTextarea\n        v-model=\"replyText\"\n        autoresize\n        :rows=\"1\"\n        :maxrows=\"6\"\n        :maxlength=\"COMMENT_LIMITS.text\"\n        :placeholder=\"t('comments.reply.placeholder')\"\n        :aria-label=\"t('comments.reply.label')\"\n        class=\"min-w-0 flex-1\"\n        @keydown=\"onKeydown($event, sendReply)\"\n      />\n      <UButton size=\"sm\" color=\"neutral\" variant=\"soft\" :label=\"t('comments.reply.submit')\" :disabled=\"!replyText.trim()\" @click=\"sendReply\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"CommentThreadView.js","names":["_openBlock","_createElementBlock","_normalizeClass","_Fragment","_renderList","_createElementVNode","_createVNode","_unref","_normalizeStyle","_toDisplayString","_createTextVNode","_createCommentVNode","_createBlock","_withCtx"],"sources":["../../../../src/features/comments/components/CommentThreadView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DropdownItem } from '../../../vue/kit/types'\nimport { useUiKit } from '../../../vue/kit/use-ui-kit'\nimport { computed, ref } from 'vue'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport type { AuthorIdentity } from '../../../core'\nimport { COMMENT_LIMITS, type CommentAuthor, type CommentThread } from '../schema'\nimport type { CommentsStore } from '../use-comments'\n\n/**\n * One comment thread as a card: root comment (with the commented text, or „Textstelle gelöscht“ for an orphan),\n * replies, a reply field. Everyone may resolve/reopen; editing and deleting are offered on the user's own comments\n * only. Layout-independent: mutations go through the `comments` store; a click on the card emits `click` (layouts\n * activate and reveal the thread). `dense`: compact, frameless rendering for a popover (name and time on one line,\n * one-line quote, icon-only send button).\n */\nconst props = defineProps<{\n  thread: CommentThread\n  user: AuthorIdentity | null\n  active: boolean\n  orphan: boolean\n  comments: CommentsStore\n  dense?: boolean\n}>()\nconst emit = defineEmits<{ click: [] }>()\nconst { Avatar: UAvatar, Badge: UBadge, Button: UButton, DropdownMenu: UDropdownMenu, Textarea: UTextarea } = useUiKit()\nconst { t, locale } = useEditorI18n()\n\n/** The root comment (`replyId` null) and the replies, rendered with the same row layout. */\ninterface Entry { replyId: string | null, author: CommentAuthor, text: string, createdAt: string, editedAt?: string }\n\nconst entries = computed<Entry[]>(() => [\n  { replyId: null, author: props.thread.author, text: props.thread.text, createdAt: props.thread.createdAt, editedAt: props.thread.editedAt },\n  ...props.thread.replies.map(r => ({ replyId: r.id, author: r.author, text: r.text, createdAt: r.createdAt, editedAt: r.editedAt })),\n])\n\nconst TIME_FORMAT = new Intl.DateTimeFormat(locale, { dateStyle: 'short', timeStyle: 'short' })\nconst formatTime = (iso: string) => TIME_FORMAT.format(new Date(iso))\nconst initials = (name: string) => name.slice(0, 2).toUpperCase()\n\n/** The entry being edited and its new text. */\nconst editing = ref<{ replyId: string | null, text: string } | null>(null)\nconst replyText = ref('')\n\nfunction menuItems(entry: Entry): DropdownItem[][] {\n  const own = !!props.user && entry.author.id === props.user.id\n  const groups: DropdownItem[][] = []\n  if (own) {\n    groups.push([\n      { label: t('comments.edit'), icon: 'i-lucide-pencil', onSelect: () => (editing.value = { replyId: entry.replyId, text: entry.text }) },\n      {\n        label: t('comments.delete'),\n        icon: 'i-lucide-trash-2',\n        color: 'error',\n        onSelect: () => entry.replyId ? props.comments.removeReply(props.thread.id, entry.replyId) : props.comments.remove(props.thread.id),\n      },\n    ])\n  }\n  if (entry.replyId === null) {\n    const resolved = props.thread.resolved\n    groups.push([{\n      label: resolved ? t('comments.reopen') : t('comments.resolved'),\n      icon: resolved ? 'i-lucide-rotate-ccw' : 'i-lucide-check',\n      onSelect: () => props.comments.setResolved(props.thread.id, !resolved),\n    }])\n  }\n  return groups\n}\n\nfunction saveEdit() {\n  const value = editing.value\n  if (!value?.text.trim()) return\n  props.comments.edit(props.thread.id, value.replyId, value.text)\n  editing.value = null\n}\n\nfunction sendReply() {\n  if (!replyText.value.trim()) return\n  props.comments.reply(props.thread.id, replyText.value)\n  replyText.value = ''\n}\n\n/** Mod-Enter runs `submit`, Esc `cancel` (when given). */\nfunction onKeydown(event: KeyboardEvent, submit: () => void, cancel?: () => void) {\n  if (event.isComposing) return\n  if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n    event.preventDefault()\n    submit()\n  }\n  else if (event.key === 'Escape' && cancel) {\n    event.preventDefault()\n    cancel()\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col text-sm\"\n    :class=\"dense ? 'gap-1.5' : ['gap-3 rounded-md border border-[var(--sk-border)] bg-[var(--sk-bg)] p-3', { 'ring-2 ring-[var(--sk-primary)]': active, 'opacity-70': orphan }]\"\n    @click=\"emit('click')\"\n  >\n    <div\n      v-for=\"entry in entries\"\n      :key=\"entry.replyId ?? 'root'\"\n      class=\"flex flex-col\"\n      :class=\"[dense ? 'gap-0.5' : 'gap-1', entry.replyId ? (dense ? 'ml-2 border-l border-[var(--sk-border)] pl-2' : 'ml-4 border-l border-[var(--sk-border)] pl-3') : '']\"\n    >\n      <div class=\"flex items-center\" :class=\"dense ? 'gap-1.5' : 'gap-2'\">\n        <UAvatar\n          :size=\"dense ? '2xs' : 'xs'\"\n          :text=\"initials(entry.author.name)\"\n          :alt=\"entry.author.name\"\n          :style=\"{ backgroundColor: entry.author.color }\"\n        />\n        <div v-if=\"dense\" class=\"flex min-w-0 flex-1 items-baseline gap-1.5 text-xs\">\n          <span class=\"truncate font-medium\">{{ entry.author.name }}</span>\n          <span class=\"shrink-0 text-[var(--sk-muted)]\">\n            {{ formatTime(entry.createdAt) }}<template v-if=\"entry.editedAt\">\n              {{ t('comments.edited') }}\n            </template>\n          </span>\n        </div>\n        <div v-else class=\"min-w-0 flex-1\">\n          <div class=\"truncate font-medium\">\n            {{ entry.author.name }}\n          </div>\n          <div class=\"text-xs text-[var(--sk-muted)]\">\n            {{ formatTime(entry.createdAt) }}<template v-if=\"entry.editedAt\">\n              {{ t('comments.edited') }}\n            </template>\n          </div>\n        </div>\n        <UDropdownMenu v-if=\"menuItems(entry).length\" :items=\"menuItems(entry)\" :content=\"{ align: 'end' }\">\n          <UButton size=\"xs\" color=\"neutral\" variant=\"ghost\" icon=\"i-lucide-ellipsis-vertical\" :aria-label=\"t('comments.actions')\" />\n        </UDropdownMenu>\n      </div>\n\n      <template v-if=\"entry.replyId === null\">\n        <UBadge v-if=\"orphan\" :size=\"dense ? 'sm' : 'md'\" color=\"neutral\" variant=\"subtle\" :label=\"t('comments.orphan')\" class=\"self-start\" />\n        <p\n          v-else-if=\"thread.quote\"\n          class=\"border-l-2 border-[var(--sk-warning)] pl-2 text-[var(--sk-muted)] italic\"\n          :class=\"dense ? 'truncate text-xs' : 'line-clamp-2'\"\n          :title=\"dense ? thread.quote : undefined\"\n        >\n          {{ thread.quote }}\n        </p>\n      </template>\n\n      <div v-if=\"editing && editing.replyId === entry.replyId\" class=\"flex flex-col\" :class=\"dense ? 'gap-1.5' : 'gap-2'\">\n        <UTextarea\n          v-model=\"editing.text\"\n          autofocus\n          autoresize\n          :size=\"dense ? 'xs' : 'md'\"\n          :rows=\"1\"\n          :maxrows=\"8\"\n          :maxlength=\"COMMENT_LIMITS.text\"\n          :aria-label=\"t('comments.editLabel')\"\n          class=\"w-full\"\n          @keydown=\"onKeydown($event, saveEdit, () => (editing = null))\"\n        />\n        <div class=\"flex justify-end\" :class=\"dense ? 'gap-1' : 'gap-2'\">\n          <UButton size=\"xs\" color=\"neutral\" variant=\"ghost\" :label=\"t('comments.cancel')\" @click=\"editing = null\" />\n          <UButton size=\"xs\" :label=\"t('comments.save')\" :disabled=\"!editing.text.trim()\" @click=\"saveEdit\" />\n        </div>\n      </div>\n      <p v-else class=\"break-words whitespace-pre-wrap\">\n        {{ entry.text }}\n      </p>\n    </div>\n\n    <div v-if=\"dense\" class=\"flex items-end gap-1\">\n      <UTextarea\n        v-model=\"replyText\"\n        autoresize\n        size=\"xs\"\n        :rows=\"1\"\n        :maxrows=\"4\"\n        :maxlength=\"COMMENT_LIMITS.text\"\n        :placeholder=\"t('comments.reply.placeholder')\"\n        :aria-label=\"t('comments.reply.label')\"\n        class=\"min-w-0 flex-1\"\n        @keydown=\"onKeydown($event, sendReply)\"\n      />\n      <UButton size=\"xs\" color=\"neutral\" variant=\"soft\" icon=\"i-lucide-send\" :aria-label=\"t('comments.reply.submit')\" :disabled=\"!replyText.trim()\" @click=\"sendReply\" />\n    </div>\n    <div v-else class=\"flex items-end gap-2\">\n      <UTextarea\n        v-model=\"replyText\"\n        autoresize\n        :rows=\"1\"\n        :maxrows=\"6\"\n        :maxlength=\"COMMENT_LIMITS.text\"\n        :placeholder=\"t('comments.reply.placeholder')\"\n        :aria-label=\"t('comments.reply.label')\"\n        class=\"min-w-0 flex-1\"\n        @keydown=\"onKeydown($event, sendReply)\"\n      />\n      <UButton size=\"sm\" color=\"neutral\" variant=\"soft\" :label=\"t('comments.reply.submit')\" :disabled=\"!replyText.trim()\" @click=\"sendReply\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1,10 +1,12 @@
+import { DRAFT_CARD, marginCards } from "../margin-layout.js";
 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";
+import { useMarginLayout } from "../use-margin-layout.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, vShow, withDirectives } from "vue";
 //#region src/features/comments/components/CommentsMargin.vue
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
@@ -16,11 +18,12 @@ 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)] italic"
+};
+const _hoisted_7 = {
+	key: 1,
 	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: {
@@ -34,135 +37,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	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.
+		* so it scrolls with the text. Layout „Aktiver Faden“ (`layoutMargin`): the active thread's card sits exactly at the
+		* top of its text's line and expands, the others collapse to one line and give way up and down; without an active
+		* thread the cards stack top-down at their lines. The draft composer takes part like an active card. An orphaned thread
+		* (its text was deleted) is greyed out and sits where the text was; 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
-				});
+		/** Draft and open threads in document order, each at its text (an orphan where its text was). */
+		const cards = computed(() => marginCards({
+			draft: comments.draft.value,
+			open: comments.open.value,
+			ranges: comments.ranges.value,
+			orphanAt: comments.orphanAt.value
+		}));
+		/** The card that owns its line: the draft composer, else the active thread. */
+		const activeId = computed(() => comments.draft.value ? DRAFT_CARD : comments.active.value);
+		const { state: layout, setColumn, setResolvedSection, setCard } = useMarginLayout({
+			editor: () => props.editor,
+			container: () => props.container,
+			source: {
+				cards: () => cards.value,
+				activeId: () => activeId.value
 			}
-			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;
@@ -170,118 +74,92 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		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,
+				ref: unref(setColumn),
 				class: "relative w-[300px] shrink-0",
-				style: normalizeStyle({ minHeight: `${minHeight.value}px` }),
+				style: normalizeStyle({ minHeight: `${unref(layout).minHeight}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", {
+			}, [!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(cards.value, (card) => {
+				return openBlock(), createElementBlock("div", {
+					key: card.id,
+					ref_for: true,
+					ref: (el) => unref(setCard)(card.id, el),
+					class: normalizeClass(["absolute inset-x-0 transition-[top] duration-100", { invisible: !unref(layout).tops.has(card.id) }]),
+					style: normalizeStyle({ top: `${unref(layout).tops.get(card.id) ?? 0}px` })
+				}, [!card.thread ? (openBlock(), createBlock(_sfc_main$1, {
 					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)
+					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"])) : activeId.value === card.id ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 1,
+					thread: card.thread,
+					user: unref(comments).user.value,
+					active: true,
+					orphan: card.orphan,
+					comments: unref(comments),
+					class: "shadow-md",
+					onClick: ($event) => select(card.id)
+				}, null, 8, [
+					"thread",
+					"user",
+					"orphan",
+					"comments",
+					"onClick"
+				])) : (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					class: normalizeClass(["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)]", { "opacity-70": card.orphan }]),
+					onClick: ($event) => select(card.id)
+				}, [
+					createVNode(unref(UAvatar), {
+						size: "2xs",
+						text: initials(card.thread.author.name),
+						alt: card.thread.author.name,
+						style: normalizeStyle({ backgroundColor: card.thread.author.color })
 					}, 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]]);
+						"text",
+						"alt",
+						"style"
+					]),
+					createElementVNode("span", _hoisted_4, toDisplayString(card.thread.author.name), 1),
+					createElementVNode("span", _hoisted_5, toDisplayString(excerpt(card.thread.text)), 1),
+					card.orphan ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(t)("comments.orphan")), 1)) : createCommentVNode("v-if", true),
+					card.thread.replies.length ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(card.thread.replies.length), 1)) : createCommentVNode("v-if", true)
+				], 10, _hoisted_3))], 6);
+			}), 128)), unref(comments).resolved.value.length ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref: unref(setResolvedSection),
+				class: "absolute inset-x-0 flex flex-col gap-2",
+				style: normalizeStyle({ top: `${unref(layout).resolvedTop}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]]);
 		};
 	}
 });

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

@@ -1 +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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"}
+{"version":3,"file":"CommentsMargin.js","names":["_withDirectives","_openBlock","_createElementBlock","_unref","_normalizeStyle","_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. Layout „Aktiver Faden“ (`layoutMargin`): the active thread's card sits exactly at the\n * top of its text's line and expands, the others collapse to one line and give way up and down; without an active\n * thread the cards stack top-down at their lines. The draft composer takes part like an active card. An orphaned thread\n * (its text was deleted) is greyed out and sits where the text was; resolved threads („Erledigt“) sit at the bottom\n * behind a toggle. Shown only while `open` (the host binds the surface's `commentsOpen` model) and the user's comments\n * 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, ref } from 'vue'\nimport { useEditorSettings } from '../../../vue/settings'\nimport { useEditorI18n } from '../../../vue/use-editor-i18n'\nimport { DRAFT_CARD, marginCards } from '../margin-layout'\nimport { useComments } from '../use-comments'\nimport { useMarginLayout } from '../use-margin-layout'\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\n/** Draft and open threads in document order, each at its text (an orphan where its text was). */\nconst cards = computed(() => marginCards({\n  draft: comments.draft.value,\n  open: comments.open.value,\n  ranges: comments.ranges.value,\n  orphanAt: comments.orphanAt.value,\n}))\n/** The card that owns its line: the draft composer, else the active thread. */\nconst activeId = computed(() => comments.draft.value ? DRAFT_CARD : comments.active.value)\n\nconst { state: layout, setColumn, setResolvedSection, setCard } = useMarginLayout({\n  editor: () => props.editor,\n  container: () => props.container,\n  source: { cards: () => cards.value, activeId: () => activeId.value },\n})\n\nconst showResolved = ref(false)\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</script>\n\n<template>\n  <div\n    v-show=\"open && enabled\"\n    :ref=\"setColumn\"\n    class=\"relative w-[300px] shrink-0\"\n    :style=\"{ minHeight: `${layout.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=\"card in cards\"\n        :key=\"card.id\"\n        :ref=\"el => setCard(card.id, el)\"\n        class=\"absolute inset-x-0 transition-[top] duration-100\"\n        :class=\"{ invisible: !layout.tops.has(card.id) }\"\n        :style=\"{ top: `${layout.tops.get(card.id) ?? 0}px` }\"\n      >\n        <CommentComposer\n          v-if=\"!card.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=\"activeId === card.id\"\n          :thread=\"card.thread\"\n          :user=\"comments.user.value\"\n          :active=\"true\"\n          :orphan=\"card.orphan\"\n          :comments=\"comments\"\n          class=\"shadow-md\"\n          @click=\"select(card.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          :class=\"{ 'opacity-70': card.orphan }\"\n          @click=\"select(card.id)\"\n        >\n          <UAvatar\n            size=\"2xs\"\n            :text=\"initials(card.thread.author.name)\"\n            :alt=\"card.thread.author.name\"\n            :style=\"{ backgroundColor: card.thread.author.color }\"\n          />\n          <span class=\"shrink-0 font-medium\">{{ card.thread.author.name }}</span>\n          <span class=\"min-w-0 flex-1 truncate text-[var(--sk-muted)]\">{{ excerpt(card.thread.text) }}</span>\n          <span v-if=\"card.orphan\" class=\"shrink-0 text-xs text-[var(--sk-fg-dimmed)] italic\">{{ t('comments.orphan') }}</span>\n          <span v-if=\"card.thread.replies.length\" class=\"shrink-0 text-xs text-[var(--sk-fg-dimmed)]\">{{ card.thread.replies.length }}</span>\n        </button>\n      </div>\n\n      <div\n        v-if=\"comments.resolved.value.length\"\n        :ref=\"setResolvedSection\"\n        class=\"absolute inset-x-0 flex flex-col gap-2\"\n        :style=\"{ top: `${layout.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/CommentsOverlay.js

@@ -1,6 +1,6 @@
+import { cancelCommentDraft, commentsKey, setActiveComment } from "../comments-plugin.js";
 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";

package/dist/features/comments/feature.js

@@ -1,5 +1,5 @@
-import { Comments, commentsKey } from "./comments-plugin.js";
 import { CommentMark } from "./schema.js";
+import { Comments, commentsKey } from "./comments-plugin.js";
 import { provideCommentsModel } from "./model.js";
 import { commentsShortcuts } from "./shortcuts.js";
 import { Extension } from "@tiptap/core";

package/dist/features/comments/index.d.ts

@@ -1,6 +1,8 @@
 import { COMMENTS_LAYOUTS, CommentsLayout } from "../../settings/values.js";
-import { COMMENTS_FIELD, COMMENT_LIMITS, CommentAuthor, CommentMark, CommentReply, CommentThread, commentsSchemaExtensions } from "./schema.js";
+import { COMMENTS_FIELD, COMMENT_LIMITS, CommentAnchor, CommentAuthor, CommentMark, CommentReply, CommentThread, commentsSchemaExtensions } from "./schema.js";
 import { CommentsActions, CommentsModel, CommentsModelFactory, CommentsSnapshot, DocRange, commentsModelOf, createCommentsModel, createEditorCommentsModel } from "./model.js";
 import { CommentsFeatureOptions, CommentsUi, commentsFeatureCore } from "./feature.js";
 import { Comments, CommentsMeta, CommentsOptions, CommentsState, cancelCommentDraft, commentsAvailable, commentsCanComment, commentsDoc, commentsKey, commentsState, commentsUser, setActiveComment, startCommentDraft } from "./comments-plugin.js";
-export { COMMENTS_FIELD, COMMENTS_LAYOUTS, COMMENT_LIMITS, type CommentAuthor, CommentMark, type CommentReply, type CommentThread, Comments, type CommentsActions, type CommentsFeatureOptions, type CommentsLayout, type CommentsMeta, type CommentsModel, type CommentsModelFactory, type CommentsOptions, type CommentsSnapshot, type CommentsState, type CommentsUi, type DocRange, cancelCommentDraft, commentsAvailable, commentsCanComment, commentsDoc, commentsFeatureCore, commentsKey, commentsModelOf, commentsSchemaExtensions, commentsState, commentsUser, createCommentsModel, createEditorCommentsModel, setActiveComment, startCommentDraft };
+import { DRAFT_CARD, MARGIN_GAP, MarginCard, MarginEntry, MarginLayout, layoutMargin, marginCards } from "./margin-layout.js";
+import { MarginController, MarginSource, MarginState, createMarginController } from "./margin-controller.js";
+export { COMMENTS_FIELD, COMMENTS_LAYOUTS, COMMENT_LIMITS, type CommentAnchor, type CommentAuthor, CommentMark, type CommentReply, type CommentThread, Comments, type CommentsActions, type CommentsFeatureOptions, type CommentsLayout, type CommentsMeta, type CommentsModel, type CommentsModelFactory, type CommentsOptions, type CommentsSnapshot, type CommentsState, type CommentsUi, DRAFT_CARD, type DocRange, MARGIN_GAP, type MarginCard, type MarginController, type MarginEntry, type MarginLayout, type MarginSource, type MarginState, cancelCommentDraft, commentsAvailable, commentsCanComment, commentsDoc, commentsFeatureCore, commentsKey, commentsModelOf, commentsSchemaExtensions, commentsState, commentsUser, createCommentsModel, createEditorCommentsModel, createMarginController, layoutMargin, marginCards, setActiveComment, startCommentDraft };