{
  "version": 3,
  "sources": ["../../src/canvas/thread-stack.tsx"],
  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent, memo, useEffect, useRef } from 'react'\nimport {\n\tEditor,\n\tTLCommentThread,\n\tusePassThroughWheelEvents,\n\tuseTranslation,\n\tuseValue,\n} from 'tldraw'\nimport { CommentCard } from '../ui/comment-card'\nimport { CountBadge } from '../ui/count-badge'\nimport { UNKNOWN_AUTHOR } from './comment-render'\nimport { type CommentingContext } from './context'\nimport { useThreadComments } from './hooks'\nimport { useCommentingOptions } from './options'\nimport { pinStackKey } from './pin-stacking'\nimport { openStackId, openThreadId } from './state'\nimport { ThreadPreview, useMarkerPreview } from './thread-preview'\nimport { anchorPagePoint, impreciseShapePinInset } from './thread-state'\nimport {\n\tPOPOVER_OFFSET,\n\tThreadPopover,\n\tThreadView,\n\ttoCardProps,\n\tuseResolveName,\n} from './thread-view'\n\n/**\n * The pin for threads whose anchors resolve to the same page point \u2014 pins zooming can never\n * separate, so they share one count badge. Clicking it lists each thread as a card; clicking a card\n * expands that thread in place, via the single open-thread state.\n */\nexport const ThreadStackPin = memo(function ThreadStackPin({\n\teditor,\n\tthreads,\n\t...props\n}: CommentingContext & {\n\teditor: Editor\n\t/** The stack's threads, oldest first. All resolve to the same anchor point. */\n\tthreads: readonly TLCommentThread[]\n}) {\n\tconst msg = useTranslation()\n\tconst badgeRef = useRef<HTMLButtonElement>(null)\n\t// The badge takes pointer events (to open on click), so wheel input over it would otherwise be\n\t// swallowed instead of zooming \u2014 pass it through to the canvas, as the pin and cluster badge do.\n\tusePassThroughWheelEvents(badgeRef)\n\t// Hovering the badge previews its threads; clicking still opens them as the interactive list.\n\t// The preview is what makes the badge legible before you commit to opening it.\n\tconst { previewShown, previewHandlers } = useMarkerPreview(editor, `stack:${threads[0].id}`)\n\t// The list stays open while a member thread is expanded, so Escape steps back: expanded thread ->\n\t// card list -> closed. Held in editor state because this pin remounts as its owning render path\n\t// changes, and keyed by the coincident page point so the open state survives losing a member.\n\tconst stackId = useValue(\n\t\t'stack id',\n\t\t() => {\n\t\t\tconst pagePoint = anchorPagePoint(editor, threads[0].anchor)\n\t\t\treturn pagePoint ? pinStackKey(pagePoint) : threads[0].id\n\t\t},\n\t\t[editor, threads]\n\t)\n\tconst listOpen = useValue('stack list open', () => openStackId.get(editor) === stackId, [\n\t\teditor,\n\t\tstackId,\n\t])\n\tconst openId = useValue('open thread id', () => openThreadId.get(editor), [editor])\n\tconst openMember = threads.find((thread) => thread.id === openId)\n\tconst open = listOpen || openMember !== undefined\n\n\tconst point = useValue(\n\t\t'stack point',\n\t\t() => {\n\t\t\tconst first = threads[0]\n\t\t\tif (first.pageId !== editor.getCurrentPageId()) return null\n\t\t\t// The badge hangs off its anchor point bottom-left like a pin, and applies the same imprecise-shape\n\t\t\t// inset the pins it stands in for would (see ThreadPin) \u2014 otherwise the marker would snap from tucked\n\t\t\t// inside the shape to the raw corner the moment a second comment turns a pin into a stack.\n\t\t\tconst pagePoint = anchorPagePoint(editor, first.anchor)\n\t\t\tif (!pagePoint) return null\n\t\t\tconst viewportPoint = editor.pageToViewport(pagePoint)\n\t\t\tconst inset = impreciseShapePinInset(editor, first.anchor)\n\t\t\treturn inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint\n\t\t},\n\t\t[editor, threads]\n\t)\n\n\t// Clicking outside the popover (and off the badge) closes the whole stack \u2014 mirrors the\n\t// single pin's dismiss. Capture phase + class checks, since the popover portals elsewhere.\n\tuseEffect(() => {\n\t\tif (!open) return\n\t\tconst onPointerDown = (e: PointerEvent) => {\n\t\t\tconst target = e.target as HTMLElement | null\n\t\t\tif (!target) return\n\t\t\tif (target.closest('.tlui-cmt-canvas-popover')) return\n\t\t\tconst badge = badgeRef.current\n\t\t\tif (badge && badge.contains(target)) return\n\t\t\t// A click inside a menu/popover layered above us belongs to that layer; defer to its\n\t\t\t// own dismissal instead of closing the stack out from under it.\n\t\t\tif (\n\t\t\t\ttarget.closest('.tlui-menu, [data-radix-popper-content-wrapper], .tlui-cmt-mention-popup')\n\t\t\t)\n\t\t\t\treturn\n\t\t\topenStackId.set(editor, null)\n\t\t\topenThreadId.set(editor, null)\n\t\t}\n\t\tdocument.addEventListener('pointerdown', onPointerDown, true)\n\t\treturn () => document.removeEventListener('pointerdown', onPointerDown, true)\n\t}, [open, editor])\n\n\t// Escape with only the card list showing closes it. When a member thread is expanded, the\n\t// layer's Escape handler collapses that first and marks the event consumed \u2014 stepping back\n\t// to the list rather than closing everything at once.\n\tuseEffect(() => {\n\t\tif (!listOpen) return\n\t\tconst onKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (e.key !== 'Escape' || e.defaultPrevented) return\n\t\t\topenStackId.set(editor, null)\n\t\t}\n\t\tdocument.addEventListener('keydown', onKeyDown, true)\n\t\treturn () => document.removeEventListener('keydown', onKeyDown, true)\n\t}, [listOpen, editor])\n\n\tif (!point) return null\n\n\tconst toggle = () => {\n\t\tif (open) {\n\t\t\topenStackId.set(editor, null)\n\t\t\topenThreadId.set(editor, null)\n\t\t} else {\n\t\t\topenStackId.set(editor, stackId)\n\t\t}\n\t}\n\n\t// The expanded thread gains a header that pushes its first comment down from where the hover preview\n\t// showed it. When that thread is the list's first, lift the whole list so its \"You\" holds position\n\t// across hover -> open. Only the first entry \u2014 lifting can't also hold a lower thread's neighbours.\n\tconst liftForHeader = threads[0]?.id === openId ? 42 : 0\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"tlui-cmt-canvas-pin\" style={{ left: point.x, top: point.y }}>\n\t\t\t\t<button\n\t\t\t\t\tref={badgeRef}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"tlui-cmt-button tlui-cmt-canvas-stack-badge\"\n\t\t\t\t\taria-label={msg('comments.stack-label').replace('{count}', String(threads.length))}\n\t\t\t\t\taria-expanded={open}\n\t\t\t\t\tonPointerDown={(e) => e.stopPropagation()}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\ttoggle()\n\t\t\t\t\t}}\n\t\t\t\t\t{...previewHandlers}\n\t\t\t\t\tonFocus={previewHandlers.onPointerEnter}\n\t\t\t\t\tonBlur={previewHandlers.onPointerLeave}\n\t\t\t\t>\n\t\t\t\t\t<CountBadge count={threads.length} open={open} />\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t{previewShown && !open && (\n\t\t\t\t<ThreadPreview\n\t\t\t\t\teditor={editor}\n\t\t\t\t\tthreads={threads}\n\t\t\t\t\t// Lines the preview up with the stack list itself, so opening it leaves the cards\n\t\t\t\t\t// exactly where the preview had them.\n\t\t\t\t\tvariant=\"list\"\n\t\t\t\t\tpoint={point}\n\t\t\t\t\t// Picking a card from the preview lands in the same place clicking the badge and\n\t\t\t\t\t// then the card would: the list open, that thread expanded within it.\n\t\t\t\t\tonSelectThread={(thread) => {\n\t\t\t\t\t\topenStackId.set(editor, stackId)\n\t\t\t\t\t\topenThreadId.set(editor, thread.id)\n\t\t\t\t\t}}\n\t\t\t\t\t{...previewHandlers}\n\t\t\t\t\tcurrentUserId={props.currentUserId}\n\t\t\t\t\tresolveAuthor={props.resolveAuthor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{open && (\n\t\t\t\t<ThreadPopover\n\t\t\t\t\tbase={{\n\t\t\t\t\t\tx: point.x + POPOVER_OFFSET.list.x,\n\t\t\t\t\t\ty: point.y + POPOVER_OFFSET.list.y - liftForHeader,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-cmt-stack-list\">\n\t\t\t\t\t\t{threads.map((thread) =>\n\t\t\t\t\t\t\tthread.id === openId ? (\n\t\t\t\t\t\t\t\t<div key={thread.id} className=\"tlui-cmt-stack-list__thread\">\n\t\t\t\t\t\t\t\t\t<ThreadView editor={editor} thread={thread} {...props} />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<StackThreadCard\n\t\t\t\t\t\t\t\t\tkey={thread.id}\n\t\t\t\t\t\t\t\t\teditor={editor}\n\t\t\t\t\t\t\t\t\tthread={thread}\n\t\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\t\tonOpen={() => openThreadId.set(editor, thread.id)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</ThreadPopover>\n\t\t\t)}\n\t\t</>\n\t)\n})\n\n/** A collapsed stack entry: the thread's first comment as a card; clicking expands the thread. */\nfunction StackThreadCard({\n\teditor,\n\tthread,\n\tonOpen,\n\t...props\n}: CommentingContext & { editor: Editor; thread: TLCommentThread; onOpen(): void }) {\n\tconst msg = useTranslation()\n\tconst options = useCommentingOptions()\n\tconst comments = useThreadComments(editor, thread.id)\n\tconst resolveName = useResolveName(props.resolveAuthor)\n\tconst first = comments[0]\n\tif (!first) return null\n\tconst open = (e: ReactMouseEvent) => {\n\t\te.stopPropagation()\n\t\tonOpen()\n\t}\n\treturn (\n\t\t<div className=\"tlui-cmt-stack-list__card\" onClick={open}>\n\t\t\t{/* The card's keyboard affordance. A button *wrapping* the card would put the comment\n\t\t\t    body inside it, and a body renders its links as real anchors \u2014 interactive content\n\t\t\t    nested in a button, which is an invalid content model and reads to assistive tech as a\n\t\t\t    broken control. So the button covers the card as a sibling instead, leaving the body's\n\t\t\t    own links above it and still reachable. */}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName=\"tlui-cmt-button tlui-cmt-stack-list__card-action\"\n\t\t\t\taria-label={msg(\n\t\t\t\t\tthread.resolved ? 'comments.pin-label-resolved' : 'comments.pin-label'\n\t\t\t\t).replace('{name}', props.resolveAuthor(thread.createdBy)?.name ?? UNKNOWN_AUTHOR)}\n\t\t\t\tonClick={open}\n\t\t\t/>\n\t\t\t<CommentCard {...toCardProps(first, props, options.components, resolveName)} />\n\t\t</div>\n\t)\n}\n"],
  "mappings": "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",
  "names": ["ThreadStackPin"]
}