@ecsplico/editor 0.0.0-stage → 1.0.0

package/dist/features/comments/react/CommentThreadView.d.ts

@@ -0,0 +1,24 @@
+import { AuthorIdentity } from "../../../core/feature.js";
+import "../../../core/index.js";
+import { CommentThread } from "../schema.js";
+import { CommentsActions } from "../model.js";
+//#region src/features/comments/react/CommentThreadView.d.ts
+/**
+ * One comment thread as a card: root comment (with the commented text, or „Textstelle gelöscht“ for an orphan),
+ * replies, a reply field. Everyone may resolve/reopen; editing and deleting are offered on the user's own comments
+ * only. Layout-independent: mutations go through the `comments` actions (`useComments()`); a click on the card calls
+ * `onClick` (layouts activate and reveal the thread). `dense`: compact, frameless rendering for a popover (name and time
+ * on one line, one-line quote, icon-only send button).
+ */
+export declare function CommentThreadView({ thread, user, active, orphan, comments, dense, className, onClick }: {
+  thread: CommentThread;
+  user: AuthorIdentity | null;
+  active: boolean;
+  orphan: boolean;
+  comments: Pick<CommentsActions, 'edit' | 'reply' | 'remove' | 'removeReply' | 'setResolved'>;
+  dense?: boolean;
+  className?: string;
+  onClick?: () => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CommentThreadView.d.ts.map

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

@@ -0,0 +1,249 @@
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { Textarea } from "../../../react/ui/textarea.js";
+import { Badge } from "../../../react/ui/badge.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../../react/ui/dropdown-menu.js";
+import { COMMENT_LIMITS } from "../schema.js";
+import { CommentAvatar } from "./CommentAvatar.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/comments/react/CommentThreadView.tsx
+/** Mod-Enter runs `submit`, Esc `cancel` (when given). */
+function onKeydown(event, submit, cancel) {
+	if (event.nativeEvent.isComposing) return;
+	if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+		event.preventDefault();
+		submit();
+	} else if (event.key === "Escape" && cancel) {
+		event.preventDefault();
+		cancel();
+	}
+}
+/**
+* One comment thread as a card: root comment (with the commented text, or „Textstelle gelöscht“ for an orphan),
+* replies, a reply field. Everyone may resolve/reopen; editing and deleting are offered on the user's own comments
+* only. Layout-independent: mutations go through the `comments` actions (`useComments()`); a click on the card calls
+* `onClick` (layouts activate and reveal the thread). `dense`: compact, frameless rendering for a popover (name and time
+* on one line, one-line quote, icon-only send button).
+*/
+function CommentThreadView({ thread, user, active, orphan, comments, dense, className, onClick }) {
+	const { t, locale } = useEditorI18n();
+	const timeFormat = useMemo(() => new Intl.DateTimeFormat(locale, {
+		dateStyle: "short",
+		timeStyle: "short"
+	}), [locale]);
+	const entries = [{
+		replyId: null,
+		author: thread.author,
+		text: thread.text,
+		createdAt: thread.createdAt,
+		editedAt: thread.editedAt
+	}, ...thread.replies.map((r) => ({
+		replyId: r.id,
+		author: r.author,
+		text: r.text,
+		createdAt: r.createdAt,
+		editedAt: r.editedAt
+	}))];
+	/** The entry being edited and its new text. */
+	const [editing, setEditing] = useState(null);
+	const [replyText, setReplyText] = useState("");
+	const editStarted = useRef(false);
+	function saveEdit() {
+		if (!editing?.text.trim()) return;
+		comments.edit(thread.id, editing.replyId, editing.text);
+		setEditing(null);
+	}
+	function sendReply() {
+		if (!replyText.trim()) return;
+		comments.reply(thread.id, replyText);
+		setReplyText("");
+	}
+	function menu(entry) {
+		const own = !!user && entry.author.id === user.id;
+		const resolved = thread.resolved;
+		const groups = [];
+		if (own) groups.push({
+			key: "own",
+			items: [{
+				key: "edit",
+				label: t("comments.edit"),
+				icon: "i-lucide-pencil",
+				onSelect: () => {
+					editStarted.current = true;
+					setEditing({
+						replyId: entry.replyId,
+						text: entry.text
+					});
+				}
+			}, {
+				key: "delete",
+				label: t("comments.delete"),
+				icon: "i-lucide-trash-2",
+				destructive: true,
+				onSelect: () => entry.replyId ? comments.removeReply(thread.id, entry.replyId) : comments.remove(thread.id)
+			}]
+		});
+		if (entry.replyId === null) groups.push({
+			key: "resolve",
+			items: [{
+				key: "resolve",
+				label: resolved ? t("comments.reopen") : t("comments.resolved"),
+				icon: resolved ? "i-lucide-rotate-ccw" : "i-lucide-check",
+				onSelect: () => comments.setResolved(thread.id, !resolved)
+			}]
+		});
+		return groups;
+	}
+	const time = (entry) => `${timeFormat.format(new Date(entry.createdAt))}${entry.editedAt ? ` ${t("comments.edited")}` : ""}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col text-sm", dense ? "gap-1.5" : cn("gap-3 rounded-md border border-border bg-background p-3", active && "ring-2 ring-primary"), className),
+		onClick,
+		children: [entries.map((entry) => {
+			const groups = menu(entry);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-col", dense ? "gap-0.5" : "gap-1", entry.replyId && (dense ? "ml-2 border-l border-border pl-2" : "ml-4 border-l border-border pl-3")),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-center", dense ? "gap-1.5" : "gap-2"),
+						children: [
+							/* @__PURE__ */ jsx(CommentAvatar, {
+								name: entry.author.name,
+								color: entry.author.color,
+								size: dense ? "2xs" : "xs"
+							}),
+							dense ? /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-1 items-baseline gap-1.5 text-xs",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate font-medium",
+									children: entry.author.name
+								}), /* @__PURE__ */ jsx("span", {
+									className: "shrink-0 text-muted-foreground",
+									children: time(entry)
+								})]
+							}) : /* @__PURE__ */ jsxs("div", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "truncate font-medium",
+									children: entry.author.name
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-xs text-muted-foreground",
+									children: time(entry)
+								})]
+							}),
+							groups.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(Button, {
+									size: "icon-xs",
+									variant: "ghost",
+									"aria-label": t("comments.actions"),
+									children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-ellipsis-vertical" })
+								})
+							}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+								align: "end",
+								className: "w-auto",
+								onCloseAutoFocus: (event) => {
+									if (!editStarted.current) return;
+									editStarted.current = false;
+									event.preventDefault();
+								},
+								children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", {
+									className: "contents",
+									children: [index > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), group.items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+										variant: item.destructive ? "destructive" : "default",
+										onSelect: item.onSelect,
+										children: [/* @__PURE__ */ jsx(Icon, { name: item.icon }), item.label]
+									}, item.key))]
+								}, group.key))
+							})] })
+						]
+					}),
+					entry.replyId === null && (orphan ? /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "self-start",
+						children: t("comments.orphan")
+					}) : thread.quote && /* @__PURE__ */ jsx("p", {
+						className: cn("border-l-2 border-(--sk-warning) pl-2 text-muted-foreground italic", dense ? "truncate text-xs" : "line-clamp-2"),
+						title: dense ? thread.quote : void 0,
+						children: thread.quote
+					})),
+					editing && editing.replyId === entry.replyId ? /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-col", dense ? "gap-1.5" : "gap-2"),
+						children: [/* @__PURE__ */ jsx(Textarea, {
+							value: editing.text,
+							onChange: (event) => setEditing({
+								replyId: editing.replyId,
+								text: event.target.value
+							}),
+							autoFocus: true,
+							rows: 1,
+							maxLength: COMMENT_LIMITS.text,
+							"aria-label": t("comments.editLabel"),
+							className: cn("max-h-48 min-h-8 w-full resize-none overflow-y-auto", dense ? "px-2 py-1 text-xs md:text-xs" : "text-sm md:text-sm"),
+							onKeyDown: (event) => onKeydown(event, saveEdit, () => setEditing(null))
+						}), /* @__PURE__ */ jsxs("div", {
+							className: cn("flex justify-end", dense ? "gap-1" : "gap-2"),
+							children: [/* @__PURE__ */ jsx(Button, {
+								size: "xs",
+								variant: "ghost",
+								onClick: () => setEditing(null),
+								children: t("comments.cancel")
+							}), /* @__PURE__ */ jsx(Button, {
+								size: "xs",
+								disabled: !editing.text.trim(),
+								onClick: saveEdit,
+								children: t("comments.save")
+							})]
+						})]
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "break-words whitespace-pre-wrap",
+						children: entry.text
+					})
+				]
+			}, entry.replyId ?? "root");
+		}), dense ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-end gap-1",
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				value: replyText,
+				onChange: (event) => setReplyText(event.target.value),
+				rows: 1,
+				maxLength: COMMENT_LIMITS.text,
+				placeholder: t("comments.reply.placeholder"),
+				"aria-label": t("comments.reply.label"),
+				className: "max-h-24 min-h-7 min-w-0 flex-1 resize-none overflow-y-auto px-2 py-1 text-xs md:text-xs",
+				onKeyDown: (event) => onKeydown(event, sendReply)
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "icon-xs",
+				variant: "secondary",
+				"aria-label": t("comments.reply.submit"),
+				disabled: !replyText.trim(),
+				onClick: sendReply,
+				children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-send" })
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-end gap-2",
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				value: replyText,
+				onChange: (event) => setReplyText(event.target.value),
+				rows: 1,
+				maxLength: COMMENT_LIMITS.text,
+				placeholder: t("comments.reply.placeholder"),
+				"aria-label": t("comments.reply.label"),
+				className: "max-h-36 min-h-8 min-w-0 flex-1 resize-none overflow-y-auto text-sm md:text-sm",
+				onKeyDown: (event) => onKeydown(event, sendReply)
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "secondary",
+				disabled: !replyText.trim(),
+				onClick: sendReply,
+				children: t("comments.reply.submit")
+			})]
+		})]
+	});
+}
+//#endregion
+export { CommentThreadView };
+
+//# sourceMappingURL=CommentThreadView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentThreadView.js","names":[],"sources":["../../../../src/features/comments/react/CommentThreadView.tsx"],"sourcesContent":["import { type KeyboardEvent, useMemo, useRef, useState } from 'react'\nimport type { AuthorIdentity } from '../../../core'\nimport { Icon } from '../../../react/Icon'\nimport { Badge } from '../../../react/ui/badge'\nimport { Button } from '../../../react/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../react/ui/dropdown-menu'\nimport { Textarea } from '../../../react/ui/textarea'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { CommentsActions } from '../model'\nimport { COMMENT_LIMITS, type CommentAuthor, type CommentThread } from '../schema'\nimport { CommentAvatar } from './CommentAvatar'\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\n/** Mod-Enter runs `submit`, Esc `cancel` (when given). */\nfunction onKeydown(event: KeyboardEvent<HTMLTextAreaElement>, submit: () => void, cancel?: () => void) {\n  if (event.nativeEvent.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\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` actions (`useComments()`); a click on the card calls\n * `onClick` (layouts activate and reveal the thread). `dense`: compact, frameless rendering for a popover (name and time\n * on one line, one-line quote, icon-only send button).\n */\nexport function CommentThreadView({ thread, user, active, orphan, comments, dense, className, onClick }: {\n  thread: CommentThread\n  user: AuthorIdentity | null\n  active: boolean\n  orphan: boolean\n  comments: Pick<CommentsActions, 'edit' | 'reply' | 'remove' | 'removeReply' | 'setResolved'>\n  dense?: boolean\n  className?: string\n  onClick?: () => void\n}) {\n  const { t, locale } = useEditorI18n()\n  const timeFormat = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: 'short', timeStyle: 'short' }), [locale])\n  const entries: Entry[] = [\n    { replyId: null, author: thread.author, text: thread.text, createdAt: thread.createdAt, editedAt: thread.editedAt },\n    ...thread.replies.map(r => ({ replyId: r.id, author: r.author, text: r.text, createdAt: r.createdAt, editedAt: r.editedAt })),\n  ]\n\n  /** The entry being edited and its new text. */\n  const [editing, setEditing] = useState<{ replyId: string | null, text: string } | null>(null)\n  const [replyText, setReplyText] = useState('')\n  const editStarted = useRef(false)\n\n  function saveEdit() {\n    if (!editing?.text.trim()) return\n    comments.edit(thread.id, editing.replyId, editing.text)\n    setEditing(null)\n  }\n\n  function sendReply() {\n    if (!replyText.trim()) return\n    comments.reply(thread.id, replyText)\n    setReplyText('')\n  }\n\n  function menu(entry: Entry) {\n    const own = !!user && entry.author.id === user.id\n    const resolved = thread.resolved\n    const groups: { key: string, items: { key: string, label: string, icon: string, destructive?: boolean, onSelect: () => void }[] }[] = []\n    if (own) {\n      groups.push({\n        key: 'own',\n        items: [\n          {\n            key: 'edit',\n            label: t('comments.edit'),\n            icon: 'i-lucide-pencil',\n            onSelect: () => {\n              editStarted.current = true\n              setEditing({ replyId: entry.replyId, text: entry.text })\n            },\n          },\n          {\n            key: 'delete',\n            label: t('comments.delete'),\n            icon: 'i-lucide-trash-2',\n            destructive: true,\n            onSelect: () => entry.replyId ? comments.removeReply(thread.id, entry.replyId) : comments.remove(thread.id),\n          },\n        ],\n      })\n    }\n    if (entry.replyId === null) {\n      groups.push({\n        key: 'resolve',\n        items: [{\n          key: 'resolve',\n          label: resolved ? t('comments.reopen') : t('comments.resolved'),\n          icon: resolved ? 'i-lucide-rotate-ccw' : 'i-lucide-check',\n          onSelect: () => comments.setResolved(thread.id, !resolved),\n        }],\n      })\n    }\n    return groups\n  }\n\n  const time = (entry: Entry) => `${timeFormat.format(new Date(entry.createdAt))}${entry.editedAt ? ` ${t('comments.edited')}` : ''}`\n\n  return (\n    <div\n      className={cn('flex flex-col text-sm', dense ? 'gap-1.5' : cn('gap-3 rounded-md border border-border bg-background p-3', active && 'ring-2 ring-primary'), className)}\n      onClick={onClick}\n    >\n      {entries.map((entry) => {\n        const groups = menu(entry)\n        return (\n          <div\n            key={entry.replyId ?? 'root'}\n            className={cn('flex flex-col', dense ? 'gap-0.5' : 'gap-1', entry.replyId && (dense ? 'ml-2 border-l border-border pl-2' : 'ml-4 border-l border-border pl-3'))}\n          >\n            <div className={cn('flex items-center', dense ? 'gap-1.5' : 'gap-2')}>\n              <CommentAvatar name={entry.author.name} color={entry.author.color} size={dense ? '2xs' : 'xs'} />\n              {dense\n                ? (\n                    <div className=\"flex min-w-0 flex-1 items-baseline gap-1.5 text-xs\">\n                      <span className=\"truncate font-medium\">{entry.author.name}</span>\n                      <span className=\"shrink-0 text-muted-foreground\">{time(entry)}</span>\n                    </div>\n                  )\n                : (\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"truncate font-medium\">{entry.author.name}</div>\n                      <div className=\"text-xs text-muted-foreground\">{time(entry)}</div>\n                    </div>\n                  )}\n              {groups.length > 0 && (\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button size=\"icon-xs\" variant=\"ghost\" aria-label={t('comments.actions')}>\n                      <Icon name=\"i-lucide-ellipsis-vertical\" />\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent\n                    align=\"end\"\n                    className=\"w-auto\"\n                    onCloseAutoFocus={(event) => {\n                      // „Bearbeiten“ focuses the edit field; the menu must not hand focus back to its trigger.\n                      if (!editStarted.current) return\n                      editStarted.current = false\n                      event.preventDefault()\n                    }}\n                  >\n                    {groups.map((group, index) => (\n                      <div key={group.key} className=\"contents\">\n                        {index > 0 && <DropdownMenuSeparator />}\n                        {group.items.map(item => (\n                          <DropdownMenuItem key={item.key} variant={item.destructive ? 'destructive' : 'default'} onSelect={item.onSelect}>\n                            <Icon name={item.icon} />\n                            {item.label}\n                          </DropdownMenuItem>\n                        ))}\n                      </div>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              )}\n            </div>\n\n            {entry.replyId === null && (\n              orphan\n                ? <Badge variant=\"secondary\" className=\"self-start\">{t('comments.orphan')}</Badge>\n                : thread.quote && (\n                    <p\n                      className={cn('border-l-2 border-(--sk-warning) pl-2 text-muted-foreground italic', dense ? 'truncate text-xs' : 'line-clamp-2')}\n                      title={dense ? thread.quote : undefined}\n                    >\n                      {thread.quote}\n                    </p>\n                  )\n            )}\n\n            {editing && editing.replyId === entry.replyId\n              ? (\n                  <div className={cn('flex flex-col', dense ? 'gap-1.5' : 'gap-2')}>\n                    <Textarea\n                      value={editing.text}\n                      onChange={event => setEditing({ replyId: editing.replyId, text: event.target.value })}\n                      autoFocus\n                      rows={1}\n                      maxLength={COMMENT_LIMITS.text}\n                      aria-label={t('comments.editLabel')}\n                      className={cn('max-h-48 min-h-8 w-full resize-none overflow-y-auto', dense ? 'px-2 py-1 text-xs md:text-xs' : 'text-sm md:text-sm')}\n                      onKeyDown={event => onKeydown(event, saveEdit, () => setEditing(null))}\n                    />\n                    <div className={cn('flex justify-end', dense ? 'gap-1' : 'gap-2')}>\n                      <Button size=\"xs\" variant=\"ghost\" onClick={() => setEditing(null)}>{t('comments.cancel')}</Button>\n                      <Button size=\"xs\" disabled={!editing.text.trim()} onClick={saveEdit}>{t('comments.save')}</Button>\n                    </div>\n                  </div>\n                )\n              : <p className=\"break-words whitespace-pre-wrap\">{entry.text}</p>}\n          </div>\n        )\n      })}\n\n      {dense\n        ? (\n            <div className=\"flex items-end gap-1\">\n              <Textarea\n                value={replyText}\n                onChange={event => setReplyText(event.target.value)}\n                rows={1}\n                maxLength={COMMENT_LIMITS.text}\n                placeholder={t('comments.reply.placeholder')}\n                aria-label={t('comments.reply.label')}\n                className=\"max-h-24 min-h-7 min-w-0 flex-1 resize-none overflow-y-auto px-2 py-1 text-xs md:text-xs\"\n                onKeyDown={event => onKeydown(event, sendReply)}\n              />\n              <Button size=\"icon-xs\" variant=\"secondary\" aria-label={t('comments.reply.submit')} disabled={!replyText.trim()} onClick={sendReply}>\n                <Icon name=\"i-lucide-send\" />\n              </Button>\n            </div>\n          )\n        : (\n            <div className=\"flex items-end gap-2\">\n              <Textarea\n                value={replyText}\n                onChange={event => setReplyText(event.target.value)}\n                rows={1}\n                maxLength={COMMENT_LIMITS.text}\n                placeholder={t('comments.reply.placeholder')}\n                aria-label={t('comments.reply.label')}\n                className=\"max-h-36 min-h-8 min-w-0 flex-1 resize-none overflow-y-auto text-sm md:text-sm\"\n                onKeyDown={event => onKeydown(event, sendReply)}\n              />\n              <Button size=\"sm\" variant=\"secondary\" disabled={!replyText.trim()} onClick={sendReply}>{t('comments.reply.submit')}</Button>\n            </div>\n          )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAS,UAAU,OAA2C,QAAoB,QAAqB;CACrG,IAAI,MAAM,YAAY,aAAa;CACnC,IAAI,MAAM,QAAQ,YAAY,MAAM,WAAW,MAAM,UAAU;EAC7D,MAAM,eAAe;EACrB,OAAO;CACT,OACK,IAAI,MAAM,QAAQ,YAAY,QAAQ;EACzC,MAAM,eAAe;EACrB,OAAO;CACT;AACF;;;;;;;;AASA,SAAgB,kBAAkB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,UAAU,OAAO,WAAW,WAS3F;CACD,MAAM,EAAE,GAAG,WAAW,cAAc;CACpC,MAAM,aAAa,cAAc,IAAI,KAAK,eAAe,QAAQ;EAAE,WAAW;EAAS,WAAW;CAAQ,CAAC,GAAG,CAAC,MAAM,CAAC;CACtH,MAAM,UAAmB,CACvB;EAAE,SAAS;EAAM,QAAQ,OAAO;EAAQ,MAAM,OAAO;EAAM,WAAW,OAAO;EAAW,UAAU,OAAO;CAAS,GAClH,GAAG,OAAO,QAAQ,KAAI,OAAM;EAAE,SAAS,EAAE;EAAI,QAAQ,EAAE;EAAQ,MAAM,EAAE;EAAM,WAAW,EAAE;EAAW,UAAU,EAAE;CAAS,EAAE,CAC9H;;CAGA,MAAM,CAAC,SAAS,cAAc,SAA0D,IAAI;CAC5F,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,cAAc,OAAO,KAAK;CAEhC,SAAS,WAAW;EAClB,IAAI,CAAC,SAAS,KAAK,KAAK,GAAG;EAC3B,SAAS,KAAK,OAAO,IAAI,QAAQ,SAAS,QAAQ,IAAI;EACtD,WAAW,IAAI;CACjB;CAEA,SAAS,YAAY;EACnB,IAAI,CAAC,UAAU,KAAK,GAAG;EACvB,SAAS,MAAM,OAAO,IAAI,SAAS;EACnC,aAAa,EAAE;CACjB;CAEA,SAAS,KAAK,OAAc;EAC1B,MAAM,MAAM,CAAC,CAAC,QAAQ,MAAM,OAAO,OAAO,KAAK;EAC/C,MAAM,WAAW,OAAO;EACxB,MAAM,SAAgI,CAAC;EACvI,IAAI,KACF,OAAO,KAAK;GACV,KAAK;GACL,OAAO,CACL;IACE,KAAK;IACL,OAAO,EAAE,eAAe;IACxB,MAAM;IACN,gBAAgB;KACd,YAAY,UAAU;KACtB,WAAW;MAAE,SAAS,MAAM;MAAS,MAAM,MAAM;KAAK,CAAC;IACzD;GACF,GACA;IACE,KAAK;IACL,OAAO,EAAE,iBAAiB;IAC1B,MAAM;IACN,aAAa;IACb,gBAAgB,MAAM,UAAU,SAAS,YAAY,OAAO,IAAI,MAAM,OAAO,IAAI,SAAS,OAAO,OAAO,EAAE;GAC5G,CACF;EACF,CAAC;EAEH,IAAI,MAAM,YAAY,MACpB,OAAO,KAAK;GACV,KAAK;GACL,OAAO,CAAC;IACN,KAAK;IACL,OAAO,WAAW,EAAE,iBAAiB,IAAI,EAAE,mBAAmB;IAC9D,MAAM,WAAW,wBAAwB;IACzC,gBAAgB,SAAS,YAAY,OAAO,IAAI,CAAC,QAAQ;GAC3D,CAAC;EACH,CAAC;EAEH,OAAO;CACT;CAEA,MAAM,QAAQ,UAAiB,GAAG,WAAW,OAAO,IAAI,KAAK,MAAM,SAAS,CAAC,IAAI,MAAM,WAAW,IAAI,EAAE,iBAAiB,MAAM;CAE/H,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,yBAAyB,QAAQ,YAAY,GAAG,2DAA2D,UAAU,qBAAqB,GAAG,SAAS;EAC3J;EAFX,UAAA,CAIG,QAAQ,KAAK,UAAU;GACtB,MAAM,SAAS,KAAK,KAAK;GACzB,OACE,qBAAC,OAAD;IAEE,WAAW,GAAG,iBAAiB,QAAQ,YAAY,SAAS,MAAM,YAAY,QAAQ,qCAAqC,mCAAmC;IAFhK,UAAA;KAIE,qBAAC,OAAD;MAAK,WAAW,GAAG,qBAAqB,QAAQ,YAAY,OAAO;MAAnE,UAAA;OACE,oBAAC,eAAD;QAAe,MAAM,MAAM,OAAO;QAAM,OAAO,MAAM,OAAO;QAAO,MAAM,QAAQ,QAAQ;OAAO,CAAA;OAC/F,QAEK,qBAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACE,oBAAC,QAAD;SAAM,WAAU;SAAwB,UAAA,MAAM,OAAO;QAAW,CAAA,GAChE,oBAAC,QAAD;SAAM,WAAU;SAAkC,UAAA,KAAK,KAAK;QAAQ,CAAA,CACjE;OAGL,CAAA,IAAA,qBAAC,OAAD;QAAK,WAAU;QAAf,UAAA,CACE,oBAAC,OAAD;SAAK,WAAU;SAAwB,UAAA,MAAM,OAAO;QAAU,CAAA,GAC9D,oBAAC,OAAD;SAAK,WAAU;SAAiC,UAAA,KAAK,KAAK;QAAO,CAAA,CAC9D;;OAEV,OAAO,SAAS,KACf,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;QAAqB,SAAA;QACnB,UAAA,oBAAC,QAAD;SAAQ,MAAK;SAAU,SAAQ;SAAQ,cAAY,EAAE,kBAAkB;SACrE,UAAA,oBAAC,MAAD,EAAM,MAAK,6BAA8B,CAAA;QACnC,CAAA;OACW,CAAA,GACrB,oBAAC,qBAAD;QACE,OAAM;QACN,WAAU;QACV,mBAAmB,UAAU;SAE3B,IAAI,CAAC,YAAY,SAAS;SAC1B,YAAY,UAAU;SACtB,MAAM,eAAe;QACvB;QAEC,UAAA,OAAO,KAAK,OAAO,UAClB,qBAAC,OAAD;SAAqB,WAAU;SAA/B,UAAA,CACG,QAAQ,KAAK,oBAAC,uBAAD,CAAwB,CAAA,GACrC,MAAM,MAAM,KAAI,SACf,qBAAC,kBAAD;UAAiC,SAAS,KAAK,cAAc,gBAAgB;UAAW,UAAU,KAAK;UAAvG,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACvB,KAAK,KACU;SAHK,GAAA,KAAK,GAGV,CACnB,CACE;QARK,GAAA,MAAM,GAQX,CACN;OACkB,CAAA,CACT,EAAA,CAAA;MAEb;;KAEJ,MAAM,YAAY,SACjB,SACI,oBAAC,OAAD;MAAO,SAAQ;MAAY,WAAU;MAAc,UAAA,EAAE,iBAAiB;KAAS,CAAA,IAC/E,OAAO,SACL,oBAAC,KAAD;MACE,WAAW,GAAG,sEAAsE,QAAQ,qBAAqB,cAAc;MAC/H,OAAO,QAAQ,OAAO,QAAQ,KAAA;MAE7B,UAAA,OAAO;KACP,CAAA;KAIV,WAAW,QAAQ,YAAY,MAAM,UAEhC,qBAAC,OAAD;MAAK,WAAW,GAAG,iBAAiB,QAAQ,YAAY,OAAO;MAA/D,UAAA,CACE,oBAAC,UAAD;OACE,OAAO,QAAQ;OACf,WAAU,UAAS,WAAW;QAAE,SAAS,QAAQ;QAAS,MAAM,MAAM,OAAO;OAAM,CAAC;OACpF,WAAA;OACA,MAAM;OACN,WAAW,eAAe;OAC1B,cAAY,EAAE,oBAAoB;OAClC,WAAW,GAAG,uDAAuD,QAAQ,iCAAiC,oBAAoB;OAClI,YAAW,UAAS,UAAU,OAAO,gBAAgB,WAAW,IAAI,CAAC;MACtE,CAAA,GACD,qBAAC,OAAD;OAAK,WAAW,GAAG,oBAAoB,QAAQ,UAAU,OAAO;OAAhE,UAAA,CACE,oBAAC,QAAD;QAAQ,MAAK;QAAK,SAAQ;QAAQ,eAAe,WAAW,IAAI;QAAI,UAAA,EAAE,iBAAiB;OAAU,CAAA,GACjG,oBAAC,QAAD;QAAQ,MAAK;QAAK,UAAU,CAAC,QAAQ,KAAK,KAAK;QAAG,SAAS;QAAW,UAAA,EAAE,eAAe;OAAU,CAAA,CAC9F;MACF,CAAA,CAAA;KAEP,CAAA,IAAA,oBAAC,KAAD;MAAG,WAAU;MAAmC,UAAA,MAAM;KAAQ,CAAA;IAC/D;GApFE,GAAA,MAAM,WAAW,MAoFnB;EAET,CAAC,GAEA,QAEK,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,UAAD;IACE,OAAO;IACP,WAAU,UAAS,aAAa,MAAM,OAAO,KAAK;IAClD,MAAM;IACN,WAAW,eAAe;IAC1B,aAAa,EAAE,4BAA4B;IAC3C,cAAY,EAAE,sBAAsB;IACpC,WAAU;IACV,YAAW,UAAS,UAAU,OAAO,SAAS;GAC/C,CAAA,GACD,oBAAC,QAAD;IAAQ,MAAK;IAAU,SAAQ;IAAY,cAAY,EAAE,uBAAuB;IAAG,UAAU,CAAC,UAAU,KAAK;IAAG,SAAS;IACvH,UAAA,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA;GACtB,CAAA,CACL;EAGL,CAAA,IAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,UAAD;IACE,OAAO;IACP,WAAU,UAAS,aAAa,MAAM,OAAO,KAAK;IAClD,MAAM;IACN,WAAW,eAAe;IAC1B,aAAa,EAAE,4BAA4B;IAC3C,cAAY,EAAE,sBAAsB;IACpC,WAAU;IACV,YAAW,UAAS,UAAU,OAAO,SAAS;GAC/C,CAAA,GACD,oBAAC,QAAD;IAAQ,MAAK;IAAK,SAAQ;IAAY,UAAU,CAAC,UAAU,KAAK;IAAG,SAAS;IAAY,UAAA,EAAE,uBAAuB;GAAU,CAAA,CACxH;EAER,CAAA,CAAA;;AAET"}

package/dist/features/comments/react/CommentsListMenu.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/comments/react/CommentsListMenu.d.ts
+/** The „Kommentare“ toolbar button of the inline layout: open-thread count and the list of all threads. */
+export declare function CommentsListMenu({ editor }: {
+  editor: Editor | undefined;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CommentsListMenu.d.ts.map

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

@@ -0,0 +1,115 @@
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { Button } from "../../../react/ui/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../react/ui/popover.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../react/ui/tooltip.js";
+import { CommentAvatar } from "./CommentAvatar.js";
+import { useComments } from "./use-comments.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/comments/react/CommentsListMenu.tsx
+/** The „Kommentare“ toolbar button of the inline layout: open-thread count and the list of all threads. */
+function CommentsListMenu({ editor }) {
+	const { t } = useEditorI18n();
+	const comments = useComments(editor);
+	const [listOpen, setListOpen] = useState(false);
+	function show(id) {
+		setListOpen(false);
+		comments.activate(id, { reveal: true });
+	}
+	const sections = [{
+		key: "open",
+		label: null,
+		list: comments.open
+	}, {
+		key: "resolved",
+		label: t("comments.resolved"),
+		list: comments.resolved
+	}];
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: listOpen,
+		onOpenChange: setListOpen,
+		children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "relative inline-flex",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": t("comments.title"),
+						"aria-pressed": listOpen,
+						disabled: !editor,
+						className: cn(listOpen && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"),
+						onMouseDown: (event) => event.preventDefault(),
+						children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-message-square-text" })
+					}), comments.open.length > 0 && /* @__PURE__ */ jsx("span", {
+						className: "pointer-events-none absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] leading-none font-medium text-primary-foreground",
+						children: comments.open.length
+					})]
+				})
+			})
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: t("comments.title") })] }), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "bottom",
+			align: "end",
+			className: "max-h-[70vh] w-72 gap-0 overflow-auto p-0",
+			children: !comments.available ? /* @__PURE__ */ jsx("p", {
+				className: "p-3 text-sm text-muted-foreground",
+				children: t("comments.unavailable")
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col p-1 text-sm",
+				children: [!comments.threads.length && /* @__PURE__ */ jsx("p", {
+					className: "p-2 text-muted-foreground",
+					children: t("comments.empty")
+				}), sections.map((section) => /* @__PURE__ */ jsxs("div", {
+					className: "contents",
+					children: [section.label && section.list.length > 0 && /* @__PURE__ */ jsx("p", {
+						className: "mt-1 border-t border-border px-2 pt-1.5 text-xs font-medium text-muted-foreground",
+						children: section.label
+					}), section.list.map((thread) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: cn("flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left hover:bg-muted", thread.resolved && "opacity-60"),
+						onClick: () => show(thread.id),
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5 text-xs",
+								children: [
+									/* @__PURE__ */ jsx(CommentAvatar, {
+										name: thread.author.name,
+										color: thread.author.color,
+										size: "2xs"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "truncate font-medium",
+										children: thread.author.name
+									}),
+									thread.replies.length > 0 && /* @__PURE__ */ jsx("span", {
+										className: "ml-auto shrink-0 text-muted-foreground",
+										children: t("comments.repliesShort", { n: thread.replies.length })
+									})
+								]
+							}),
+							comments.isOrphan(thread.id) ? /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground italic",
+								children: t("comments.orphan")
+							}) : /* @__PURE__ */ jsx("span", {
+								className: "truncate border-l-2 border-border pl-2 text-xs text-muted-foreground",
+								children: thread.quote
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "line-clamp-2",
+								children: thread.text
+							})
+						]
+					}, thread.id))]
+				}, section.key))]
+			})
+		})]
+	});
+}
+//#endregion
+export { CommentsListMenu };
+
+//# sourceMappingURL=CommentsListMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsListMenu.js","names":[],"sources":["../../../../src/features/comments/react/CommentsListMenu.tsx"],"sourcesContent":["/**\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 type { Editor } from '@tiptap/core'\nimport { useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { Button } from '../../../react/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../react/ui/popover'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../../react/ui/tooltip'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { CommentAvatar } from './CommentAvatar'\nimport { useComments } from './use-comments'\n\n/** The „Kommentare“ toolbar button of the inline layout: open-thread count and the list of all threads. */\nexport function CommentsListMenu({ editor }: { editor: Editor | undefined }) {\n  const { t } = useEditorI18n()\n  const comments = useComments(editor)\n  const [listOpen, setListOpen] = useState(false)\n\n  function show(id: string) {\n    setListOpen(false)\n    comments.activate(id, { reveal: true })\n  }\n\n  const sections = [\n    { key: 'open', label: null, list: comments.open },\n    { key: 'resolved', label: t('comments.resolved'), list: comments.resolved },\n  ]\n\n  return (\n    <Popover open={listOpen} onOpenChange={setListOpen}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            <span className=\"relative inline-flex\">\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                aria-label={t('comments.title')}\n                aria-pressed={listOpen}\n                disabled={!editor}\n                className={cn(listOpen && 'bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary')}\n                onMouseDown={event => event.preventDefault()}\n              >\n                <Icon name=\"i-lucide-message-square-text\" />\n              </Button>\n              {comments.open.length > 0 && (\n                <span className=\"pointer-events-none absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] leading-none font-medium text-primary-foreground\">\n                  {comments.open.length}\n                </span>\n              )}\n            </span>\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent>{t('comments.title')}</TooltipContent>\n      </Tooltip>\n\n      <PopoverContent side=\"bottom\" align=\"end\" className=\"max-h-[70vh] w-72 gap-0 overflow-auto p-0\">\n        {!comments.available\n          ? <p className=\"p-3 text-sm text-muted-foreground\">{t('comments.unavailable')}</p>\n          : (\n              <div className=\"flex flex-col p-1 text-sm\">\n                {!comments.threads.length && <p className=\"p-2 text-muted-foreground\">{t('comments.empty')}</p>}\n                {sections.map(section => (\n                  <div key={section.key} className=\"contents\">\n                    {section.label && section.list.length > 0 && (\n                      <p className=\"mt-1 border-t border-border px-2 pt-1.5 text-xs font-medium text-muted-foreground\">{section.label}</p>\n                    )}\n                    {section.list.map(thread => (\n                      <button\n                        key={thread.id}\n                        type=\"button\"\n                        className={cn('flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left hover:bg-muted', thread.resolved && 'opacity-60')}\n                        onClick={() => show(thread.id)}\n                      >\n                        <span className=\"flex items-center gap-1.5 text-xs\">\n                          <CommentAvatar name={thread.author.name} color={thread.author.color} size=\"2xs\" />\n                          <span className=\"truncate font-medium\">{thread.author.name}</span>\n                          {thread.replies.length > 0 && <span className=\"ml-auto shrink-0 text-muted-foreground\">{t('comments.repliesShort', { n: thread.replies.length })}</span>}\n                        </span>\n                        {comments.isOrphan(thread.id)\n                          ? <span className=\"text-xs text-muted-foreground italic\">{t('comments.orphan')}</span>\n                          : <span className=\"truncate border-l-2 border-border pl-2 text-xs text-muted-foreground\">{thread.quote}</span>}\n                        <span className=\"line-clamp-2\">{thread.text}</span>\n                      </button>\n                    ))}\n                  </div>\n                ))}\n              </div>\n            )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAgB,iBAAiB,EAAE,UAA0C;CAC3E,MAAM,EAAE,MAAM,cAAc;CAC5B,MAAM,WAAW,YAAY,MAAM;CACnC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,SAAS,KAAK,IAAY;EACxB,YAAY,KAAK;EACjB,SAAS,SAAS,IAAI,EAAE,QAAQ,KAAK,CAAC;CACxC;CAEA,MAAM,WAAW,CACf;EAAE,KAAK;EAAQ,OAAO;EAAM,MAAM,SAAS;CAAK,GAChD;EAAE,KAAK;EAAY,OAAO,EAAE,mBAAmB;EAAG,MAAM,SAAS;CAAS,CAC5E;CAEA,OACE,qBAAC,SAAD;EAAS,MAAM;EAAU,cAAc;EAAvC,UAAA,CACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,gBAAD;IAAgB,SAAA;IACd,UAAA,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,cAAY,EAAE,gBAAgB;MAC9B,gBAAc;MACd,UAAU,CAAC;MACX,WAAW,GAAG,YAAY,mEAAmE;MAC7F,cAAa,UAAS,MAAM,eAAe;MAE3C,UAAA,oBAAC,MAAD,EAAM,MAAK,+BAAgC,CAAA;KACrC,CAAA,GACP,SAAS,KAAK,SAAS,KACtB,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,SAAS,KAAK;KACX,CAAA,CAEJ;;GACQ,CAAA;EACF,CAAA,GAChB,oBAAC,gBAAD,EAAA,UAAiB,EAAE,gBAAgB,EAAkB,CAAA,CAC9C,EAAA,CAAA,GAET,oBAAC,gBAAD;GAAgB,MAAK;GAAS,OAAM;GAAM,WAAU;GACjD,UAAA,CAAC,SAAS,YACP,oBAAC,KAAD;IAAG,WAAU;IAAqC,UAAA,EAAE,sBAAsB;GAAK,CAAA,IAE7E,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,CAAC,SAAS,QAAQ,UAAU,oBAAC,KAAD;KAAG,WAAU;KAA6B,UAAA,EAAE,gBAAgB;IAAK,CAAA,GAC7F,SAAS,KAAI,YACZ,qBAAC,OAAD;KAAuB,WAAU;KAAjC,UAAA,CACG,QAAQ,SAAS,QAAQ,KAAK,SAAS,KACtC,oBAAC,KAAD;MAAG,WAAU;MAAqF,UAAA,QAAQ;KAAS,CAAA,GAEpH,QAAQ,KAAK,KAAI,WAChB,qBAAC,UAAD;MAEE,MAAK;MACL,WAAW,GAAG,gFAAgF,OAAO,YAAY,YAAY;MAC7H,eAAe,KAAK,OAAO,EAAE;MAJ/B,UAAA;OAME,qBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA;SACE,oBAAC,eAAD;UAAe,MAAM,OAAO,OAAO;UAAM,OAAO,OAAO,OAAO;UAAO,MAAK;SAAO,CAAA;SACjF,oBAAC,QAAD;UAAM,WAAU;UAAwB,UAAA,OAAO,OAAO;SAAW,CAAA;SAChE,OAAO,QAAQ,SAAS,KAAK,oBAAC,QAAD;UAAM,WAAU;UAA0C,UAAA,EAAE,yBAAyB,EAAE,GAAG,OAAO,QAAQ,OAAO,CAAC;SAAQ,CAAA;QACnJ;;OACL,SAAS,SAAS,OAAO,EAAE,IACxB,oBAAC,QAAD;QAAM,WAAU;QAAwC,UAAA,EAAE,iBAAiB;OAAQ,CAAA,IACnF,oBAAC,QAAD;QAAM,WAAU;QAAwE,UAAA,OAAO;OAAY,CAAA;OAC/G,oBAAC,QAAD;QAAM,WAAU;QAAgB,UAAA,OAAO;OAAW,CAAA;MAC5C;KAdD,GAAA,OAAO,EAcN,CACT,CACE;IAtBK,GAAA,QAAQ,GAsBb,CACN,CACE;;EAEG,CAAA,CACT;;AAEb"}

package/dist/features/comments/react/CommentsMargin.d.ts

@@ -0,0 +1,16 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/comments/react/CommentsMargin.d.ts
+/**
+ * Comments margin („Randspalte“): a column the host places inside its scroll container right of the editor, so it
+ * scrolls with the text. Cards sit at the height of their text, the active thread is expanded; shown only while `open`
+ * and the user's comments layout is `margin`.
+ */
+export declare function CommentsMargin({ editor, container, open }: {
+  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;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CommentsMargin.d.ts.map