@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/dist-cjs/canvas/region-box.js

@@ -0,0 +1,113 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var region_box_exports = {};
+__export(region_box_exports, {
+  REGION_CORNERS: () => REGION_CORNERS,
+  REGION_HANDLE_MARGIN_PX: () => REGION_HANDLE_MARGIN_PX,
+  RegionBox: () => RegionBox,
+  RegionDraftBox: () => RegionDraftBox,
+  RegionResizeHandles: () => RegionResizeHandles
+});
+module.exports = __toCommonJS(region_box_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tldraw = require("tldraw");
+var import_state = require("./state");
+function RegionBox({ editor, box }) {
+  const rect = (0, import_tldraw.useValue)(
+    "region rect",
+    () => {
+      const topLeft = editor.pageToViewport({ x: box.x, y: box.y });
+      const zoom = editor.getZoomLevel();
+      return { left: topLeft.x, top: topLeft.y, width: box.w * zoom, height: box.h * zoom };
+    },
+    [editor, box.x, box.y, box.w, box.h]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-canvas-region", style: rect });
+}
+function RegionDraftBox({ editor }) {
+  const box = (0, import_tldraw.useValue)("region draft", () => import_state.regionDraft.get(editor), [editor]);
+  if (!box) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RegionBox, { editor, box });
+}
+const REGION_CORNERS = [
+  { x: 0, y: 0, cursor: "nwse-resize" },
+  { x: 1, y: 0, cursor: "nesw-resize" },
+  { x: 0, y: 1, cursor: "nesw-resize" },
+  { x: 1, y: 1, cursor: "nwse-resize" }
+];
+const REGION_HANDLE_MARGIN_PX = 12;
+function resizeRegion(box, handle, cursor) {
+  const controlsX = handle.x !== 0.5;
+  const controlsY = handle.y !== 0.5;
+  const fixedX = box.x + (1 - handle.x) * box.w;
+  const fixedY = box.y + (1 - handle.y) * box.h;
+  return {
+    x: controlsX ? Math.min(fixedX, cursor.x) : box.x,
+    y: controlsY ? Math.min(fixedY, cursor.y) : box.y,
+    w: controlsX ? Math.abs(cursor.x - fixedX) : box.w,
+    h: controlsY ? Math.abs(cursor.y - fixedY) : box.h
+  };
+}
+function RegionResizeHandles({
+  editor,
+  box,
+  handles,
+  onPreview,
+  onCommit
+}) {
+  const boxRef = (0, import_react.useRef)(null);
+  const points = (0, import_tldraw.useValue)(
+    "region handle points",
+    () => handles.map((h) => {
+      const p = editor.pageToViewport({ x: box.x + h.x * box.w, y: box.y + h.y * box.h });
+      return { ...h, key: `${h.x}-${h.y}`, left: p.x, top: p.y };
+    }),
+    [editor, box.x, box.y, box.w, box.h, handles]
+  );
+  const startResize = (e) => {
+    e.stopPropagation();
+    boxRef.current = box;
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const resizedTo = (h, e) => resizeRegion(boxRef.current, h, editor.screenToPage({ x: e.clientX, y: e.clientY }));
+  const onResize = (h) => (e) => {
+    if (boxRef.current) onPreview(resizedTo(h, e));
+  };
+  const endResize = (h) => (e) => {
+    if (!boxRef.current) return;
+    const bounds = resizedTo(h, e);
+    boxRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId))
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    onCommit(bounds);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: points.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "tlui-cmt-canvas-region-handle",
+      style: { left: h.left, top: h.top, cursor: h.cursor },
+      onPointerDown: startResize,
+      onPointerMove: onResize(h),
+      onPointerUp: endResize(h)
+    },
+    h.key
+  )) });
+}
+//# sourceMappingURL=region-box.js.map

package/dist-cjs/canvas/region-box.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/region-box.tsx"],
+  "sourcesContent": ["import { type PointerEvent as ReactPointerEvent, useRef } from 'react'\nimport { type BoxModel, Editor, useValue, VecLike } from 'tldraw'\nimport { regionDraft } from './state'\n\n/** A region's dashed box. Purely visual \u2014 a region moves by its pin and resizes from its corner\n *  handles, so the box itself takes no pointer events. Positioned in viewport space, as a sibling\n *  of the pins in the canvas layer. */\nexport function RegionBox({ editor, box }: { editor: Editor; box: BoxModel }) {\n\tconst rect = useValue(\n\t\t'region rect',\n\t\t() => {\n\t\t\t// Position from the page\u2192viewport top-left; screen size scales with zoom, page size doesn't.\n\t\t\tconst topLeft = editor.pageToViewport({ x: box.x, y: box.y })\n\t\t\tconst zoom = editor.getZoomLevel()\n\t\t\treturn { left: topLeft.x, top: topLeft.y, width: box.w * zoom, height: box.h * zoom }\n\t\t},\n\t\t[editor, box.x, box.y, box.w, box.h]\n\t)\n\treturn <div className=\"tlui-cmt-canvas-region\" style={rect} />\n}\n\n/** The live region being dragged out by the comment tool, or nothing when not dragging. */\nexport function RegionDraftBox({ editor }: { editor: Editor }) {\n\tconst box = useValue('region draft', () => regionDraft.get(editor), [editor])\n\tif (!box) return null\n\treturn <RegionBox editor={editor} box={box} />\n}\n\n// A resize handle's normalized 0\u20131 spot on the box, and its cursor. An axis at 0.5 is *not*\n// controlled by that handle \u2014 the resize math reads the spot rather than special-casing corners.\nexport interface RegionHandle {\n\tx: number\n\ty: number\n\tcursor: string\n}\n\n// The four corners, each resizing both axes.\nexport const REGION_CORNERS: readonly RegionHandle[] = [\n\t{ x: 0, y: 0, cursor: 'nwse-resize' },\n\t{ x: 1, y: 0, cursor: 'nesw-resize' },\n\t{ x: 0, y: 1, cursor: 'nesw-resize' },\n\t{ x: 1, y: 1, cursor: 'nwse-resize' },\n]\n\n// Screen-space slack around a region's bounds within which its box and handles stay revealed, so\n// the handles (which sit on the edge) are comfortably reachable.\nexport const REGION_HANDLE_MARGIN_PX = 12\n\n/** Resize `box` by dragging `handle` to `cursor` (page coords). Each controlled axis spans from the\n *  handle's fixed opposite edge to the cursor (normalized, so dragging past it flips); an axis the\n *  handle doesn't control (a midpoint, at 0.5) keeps its original position and size. */\nfunction resizeRegion(box: BoxModel, handle: RegionHandle, cursor: VecLike): BoxModel {\n\tconst controlsX = handle.x !== 0.5\n\tconst controlsY = handle.y !== 0.5\n\tconst fixedX = box.x + (1 - handle.x) * box.w\n\tconst fixedY = box.y + (1 - handle.y) * box.h\n\treturn {\n\t\tx: controlsX ? Math.min(fixedX, cursor.x) : box.x,\n\t\ty: controlsY ? Math.min(fixedY, cursor.y) : box.y,\n\t\tw: controlsX ? Math.abs(cursor.x - fixedX) : box.w,\n\t\th: controlsY ? Math.abs(cursor.y - fixedY) : box.h,\n\t}\n}\n\n/** Draggable handles that resize a region \u2014 corners (both axes) or edges (one axis), per the resize\n *  option. Previews live, commits on release. */\nexport function RegionResizeHandles({\n\teditor,\n\tbox,\n\thandles,\n\tonPreview,\n\tonCommit,\n}: {\n\teditor: Editor\n\tbox: BoxModel\n\thandles: readonly RegionHandle[]\n\tonPreview(bounds: BoxModel | null): void\n\tonCommit(bounds: BoxModel): void\n}) {\n\t// The box at pointer-down, captured so the box prop reflowing under the live preview doesn't move\n\t// the fixed edges mid-drag.\n\tconst boxRef = useRef<BoxModel | null>(null)\n\tconst points = useValue(\n\t\t'region handle points',\n\t\t() =>\n\t\t\thandles.map((h) => {\n\t\t\t\tconst p = editor.pageToViewport({ x: box.x + h.x * box.w, y: box.y + h.y * box.h })\n\t\t\t\treturn { ...h, key: `${h.x}-${h.y}`, left: p.x, top: p.y }\n\t\t\t}),\n\t\t[editor, box.x, box.y, box.w, box.h, handles]\n\t)\n\tconst startResize = (e: ReactPointerEvent<HTMLDivElement>) => {\n\t\te.stopPropagation()\n\t\tboxRef.current = box\n\t\te.currentTarget.setPointerCapture(e.pointerId)\n\t}\n\tconst resizedTo = (h: RegionHandle, e: ReactPointerEvent<HTMLDivElement>): BoxModel =>\n\t\tresizeRegion(boxRef.current!, h, editor.screenToPage({ x: e.clientX, y: e.clientY }))\n\tconst onResize = (h: RegionHandle) => (e: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (boxRef.current) onPreview(resizedTo(h, e))\n\t}\n\tconst endResize = (h: RegionHandle) => (e: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (!boxRef.current) return\n\t\tconst bounds = resizedTo(h, e)\n\t\tboxRef.current = null\n\t\tif (e.currentTarget.hasPointerCapture(e.pointerId))\n\t\t\te.currentTarget.releasePointerCapture(e.pointerId)\n\t\tonCommit(bounds)\n\t}\n\treturn (\n\t\t<>\n\t\t\t{points.map((h) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={h.key}\n\t\t\t\t\tclassName=\"tlui-cmt-canvas-region-handle\"\n\t\t\t\t\tstyle={{ left: h.left, top: h.top, cursor: h.cursor }}\n\t\t\t\t\tonPointerDown={startResize}\n\t\t\t\t\tonPointerMove={onResize(h)}\n\t\t\t\t\tonPointerUp={endResize(h)}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/canvas/sidebar-filters.js

@@ -22,9 +22,9 @@ __export(sidebar_filters_exports, {
 });
 module.exports = __toCommonJS(sidebar_filters_exports);
 const DEFAULT_SIDEBAR_FILTERS = {
-  showResolved: true,
+  showResolved: false,
   onlyMine: false,
   onlyUnread: false,
-  onlyCurrentPage: true
+  onlyCurrentPage: false
 };
 //# sourceMappingURL=sidebar-filters.js.map

package/dist-cjs/canvas/sidebar-filters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/sidebar-filters.ts"],
-  "sourcesContent": ["/**\n * Which threads the comments sidebar shows. Held as an editor-scoped signal (the `sidebarFilters`\n * `EditorAtom` in `./state`) rather than component state so it survives the sidebar\n * unmounting when the comment tool deactivates \u2014 a user's \"hide resolved\" choice shouldn't reset\n * every time they leave the tool.\n * @public\n */\nexport interface SidebarFilters {\n\t/** Include resolved threads. */\n\tshowResolved: boolean\n\t/** Only threads the current user started. Ignored when there's no current user. */\n\tonlyMine: boolean\n\t/** Only threads with unread comments. Ignored when the host provides no read status. */\n\tonlyUnread: boolean\n\t/** Only threads on the current page. Off = every page's threads, each labelled. */\n\tonlyCurrentPage: boolean\n}\n\n/** @public */\nexport const DEFAULT_SIDEBAR_FILTERS: SidebarFilters = {\n\tshowResolved: true,\n\tonlyMine: false,\n\tonlyUnread: false,\n\tonlyCurrentPage: true,\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBO,MAAM,0BAA0C;AAAA,EACtD,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,iBAAiB;AAClB;",
+  "sourcesContent": ["/**\n * Which threads the comments sidebar shows. Held as an editor-scoped signal (the `sidebarFilters`\n * `EditorAtom` in `./state`) rather than component state so it survives the sidebar\n * unmounting when the comment tool deactivates \u2014 a user's \"hide resolved\" choice shouldn't reset\n * every time they leave the tool.\n * @public\n */\nexport interface SidebarFilters {\n\t/** Include resolved threads. */\n\tshowResolved: boolean\n\t/** Only threads the current user started. Ignored when there's no current user. */\n\tonlyMine: boolean\n\t/** Only threads with unread comments. Ignored when the host provides no read status. */\n\tonlyUnread: boolean\n\t/** Only threads on the current page. Off = every page's threads, each labelled. */\n\tonlyCurrentPage: boolean\n}\n\n/** The out-of-the-box view: every page's threads, resolved ones hidden until asked for.\n * @public */\nexport const DEFAULT_SIDEBAR_FILTERS: SidebarFilters = {\n\tshowResolved: false,\n\tonlyMine: false,\n\tonlyUnread: false,\n\tonlyCurrentPage: false,\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBO,MAAM,0BAA0C;AAAA,EACtD,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,iBAAiB;AAClB;",
   "names": []
 }

package/dist-cjs/canvas/state.js

@@ -19,25 +19,44 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var state_exports = {};
 __export(state_exports, {
   commentsHidden: () => commentsHidden,
-  commitCommentMutation: () => commitCommentMutation,
+  commentsSidebarOpen: () => commentsSidebarOpen,
+  getRevealThreadPending: () => getRevealThreadPending,
+  openStackId: () => openStackId,
   openThreadId: () => openThreadId,
   pendingComment: () => pendingComment,
   regionDraft: () => regionDraft,
+  revealThread: () => revealThread,
+  revealThreadRequest: () => revealThreadRequest,
   sidebarFilters: () => sidebarFilters,
   toggleCommentsHidden: () => toggleCommentsHidden,
+  toggleCommentsSidebar: () => toggleCommentsSidebar,
   useCommentsHidden: () => useCommentsHidden,
+  useCommentsSidebarOpen: () => useCommentsSidebarOpen,
   useOpenThreadId: () => useOpenThreadId,
   usePendingComment: () => usePendingComment,
+  useRevealThreadPending: () => useRevealThreadPending,
   useSidebarFilters: () => useSidebarFilters
 });
 module.exports = __toCommonJS(state_exports);
 var import_tldraw = require("tldraw");
-var import_options = require("./options");
 var import_sidebar_filters = require("./sidebar-filters");
 const openThreadId = new import_tldraw.EditorAtom("openThreadId", () => null);
+const openStackId = new import_tldraw.EditorAtom("openStackId", () => null);
 const pendingComment = new import_tldraw.EditorAtom("pendingComment", () => null);
+const revealThreadRequest = new import_tldraw.EditorAtom("revealThreadRequest", () => null);
+function revealThread(editor, threadOrCommentId) {
+  revealThreadRequest.set(editor, threadOrCommentId);
+}
+function getRevealThreadPending(editor) {
+  return revealThreadRequest.get(editor);
+}
+function useRevealThreadPending() {
+  const editor = (0, import_tldraw.useEditor)();
+  return (0, import_tldraw.useValue)("pending reveal thread", () => getRevealThreadPending(editor), [editor]);
+}
 const regionDraft = new import_tldraw.EditorAtom("regionDraft", () => null);
 const commentsHidden = new import_tldraw.EditorAtom("commentsHidden", () => false);
+const commentsSidebarOpen = new import_tldraw.EditorAtom("commentsSidebarOpen", () => false);
 const sidebarFilters = new import_tldraw.EditorAtom(
   "sidebarFilters",
   () => import_sidebar_filters.DEFAULT_SIDEBAR_FILTERS
@@ -45,6 +64,9 @@ const sidebarFilters = new import_tldraw.EditorAtom(
 function toggleCommentsHidden(editor) {
   commentsHidden.update(editor, (hidden) => !hidden);
 }
+function toggleCommentsSidebar(editor) {
+  commentsSidebarOpen.update(editor, (open) => !open);
+}
 function useOpenThreadId() {
   const editor = (0, import_tldraw.useEditor)();
   return (0, import_tldraw.useValue)("open thread id", () => openThreadId.get(editor), [editor]);
@@ -57,20 +79,12 @@ function useCommentsHidden() {
   const editor = (0, import_tldraw.useEditor)();
   return (0, import_tldraw.useValue)("comments hidden", () => commentsHidden.get(editor), [editor]);
 }
+function useCommentsSidebarOpen() {
+  const editor = (0, import_tldraw.useEditor)();
+  return (0, import_tldraw.useValue)("comments sidebar open", () => commentsSidebarOpen.get(editor), [editor]);
+}
 function useSidebarFilters() {
   const editor = (0, import_tldraw.useEditor)();
   return (0, import_tldraw.useValue)("sidebar filters", () => sidebarFilters.get(editor), [editor]);
 }
-function commitCommentMutation(editor, fn, kind = "mutation") {
-  const options = (0, import_options.getCommentingOptions)(editor);
-  const history = kind === "drag" ? options.dragHistory ?? options.history : options.history;
-  let result;
-  editor.run(
-    () => {
-      result = fn();
-    },
-    { history }
-  );
-  return result;
-}
 //# sourceMappingURL=state.js.map

package/dist-cjs/canvas/state.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/state.ts"],
-  "sourcesContent": ["import {\n\tEditorAtom,\n\ttype BoxModel,\n\ttype Editor,\n\ttype TLHistoryBatchOptions,\n\tuseEditor,\n\tuseValue,\n} from 'tldraw'\nimport type { PendingComment } from './comment-tool'\nimport { getCommentingOptions } from './options'\nimport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './sidebar-filters'\n\n/**\n * Transient commenting UI state, scoped per editor via {@link EditorAtom}. Editor-scoping (rather\n * than module-global atoms) keeps two editors on one page \u2014 or an editor and a second instance \u2014\n * from sharing open-thread, visibility, and filter state. Reachable from both React (`useEditor()`)\n * and the comment tool (`this.editor`).\n */\n\n/** The id of the one open thread (only one popover is open at a time), or null when all closed.\n * @public */\nexport const openThreadId = new EditorAtom<string | null>('openThreadId', () => null)\n\n/** The comment currently being placed (composer open, not yet posted), or null.\n * @public */\nexport const pendingComment = new EditorAtom<PendingComment | null>('pendingComment', () => null)\n\n/** The region rectangle being dragged out right now (page coords), or null when not dragging. The\n *  comment tool writes it on each move; the overlay reads it to draw the live dashed box. */\nexport const regionDraft = new EditorAtom<BoxModel | null>('regionDraft', () => null)\n\n/**\n * Whether comment pins are hidden on the canvas. Governs the on-canvas layer (pins + open popover)\n * only \u2014 the sidebar is unaffected.\n * @public\n */\nexport const commentsHidden = new EditorAtom<boolean>('commentsHidden', () => false)\n\n/** Which threads the comments sidebar shows.\n * @public */\nexport const sidebarFilters = new EditorAtom<SidebarFilters>(\n\t'sidebarFilters',\n\t() => DEFAULT_SIDEBAR_FILTERS\n)\n\n/** Toggle comment-pin visibility for an editor.\n * @public */\nexport function toggleCommentsHidden(editor: Editor): void {\n\tcommentsHidden.update(editor, (hidden) => !hidden)\n}\n\n/** React hook for the open thread id.\n * @public */\nexport function useOpenThreadId(): string | null {\n\tconst editor = useEditor()\n\treturn useValue('open thread id', () => openThreadId.get(editor), [editor])\n}\n\n/** React hook for the pending (being-placed) comment.\n * @public */\nexport function usePendingComment(): PendingComment | null {\n\tconst editor = useEditor()\n\treturn useValue('pending comment', () => pendingComment.get(editor), [editor])\n}\n\n/** React hook for whether comment pins are hidden.\n * @public */\nexport function useCommentsHidden(): boolean {\n\tconst editor = useEditor()\n\treturn useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n}\n\n/** React hook for the current sidebar filters.\n * @public */\nexport function useSidebarFilters(): SidebarFilters {\n\tconst editor = useEditor()\n\treturn useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n}\n\n/**\n * Commit a comment mutation with the configured undo/redo behavior. All comment writes go through\n * here so the {@link CommentingOptions.history} option (and {@link CommentingOptions.dragHistory}\n * for pin re-anchors) governs whether they land on the undo stack. Defaults to `'ignore'`.\n * @public\n */\nexport function commitCommentMutation<T>(\n\teditor: Editor,\n\tfn: () => T,\n\tkind: 'mutation' | 'drag' = 'mutation'\n): T {\n\tconst options = getCommentingOptions(editor)\n\tconst history: TLHistoryBatchOptions['history'] =\n\t\tkind === 'drag' ? (options.dragHistory ?? options.history) : options.history\n\tlet result: T\n\teditor.run(\n\t\t() => {\n\t\t\tresult = fn()\n\t\t},\n\t\t{ history }\n\t)\n\treturn result!\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOO;AAEP,qBAAqC;AACrC,6BAA6D;AAWtD,MAAM,eAAe,IAAI,yBAA0B,gBAAgB,MAAM,IAAI;AAI7E,MAAM,iBAAiB,IAAI,yBAAkC,kBAAkB,MAAM,IAAI;AAIzF,MAAM,cAAc,IAAI,yBAA4B,eAAe,MAAM,IAAI;AAO7E,MAAM,iBAAiB,IAAI,yBAAoB,kBAAkB,MAAM,KAAK;AAI5E,MAAM,iBAAiB,IAAI;AAAA,EACjC;AAAA,EACA,MAAM;AACP;AAIO,SAAS,qBAAqB,QAAsB;AAC1D,iBAAe,OAAO,QAAQ,CAAC,WAAW,CAAC,MAAM;AAClD;AAIO,SAAS,kBAAiC;AAChD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,kBAAkB,MAAM,aAAa,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC3E;AAIO,SAAS,oBAA2C;AAC1D,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAIO,SAAS,oBAA6B;AAC5C,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAIO,SAAS,oBAAoC;AACnD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAQO,SAAS,sBACf,QACA,IACA,OAA4B,YACxB;AACJ,QAAM,cAAU,qCAAqB,MAAM;AAC3C,QAAM,UACL,SAAS,SAAU,QAAQ,eAAe,QAAQ,UAAW,QAAQ;AACtE,MAAI;AACJ,SAAO;AAAA,IACN,MAAM;AACL,eAAS,GAAG;AAAA,IACb;AAAA,IACA,EAAE,QAAQ;AAAA,EACX;AACA,SAAO;AACR;",
+  "sourcesContent": ["import { EditorAtom, type BoxModel, type Editor, useEditor, useValue } from 'tldraw'\nimport type { PendingComment } from './comment-tool'\nimport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './sidebar-filters'\n\n/**\n * Transient commenting UI state, scoped per editor via {@link EditorAtom} so two editors on one\n * page don't share open-thread, visibility, and filter state. Reachable from both React\n * (`useEditor()`) and the comment tool (`this.editor`).\n */\n\n/** The id of the one open thread (only one popover is open at a time), or null when all closed.\n * @public */\nexport const openThreadId = new EditorAtom<string | null>('openThreadId', () => null)\n\n/** The coincident-pin stack whose thread list is showing (keyed by its oldest member's thread id),\n *  or null. Editor state rather than component state: the stack pin remounts when its owning render\n *  path changes, and the open list must survive that.\n *  @internal */\nexport const openStackId = new EditorAtom<string | null>('openStackId', () => null)\n\n/** The comment currently being placed (composer open, not yet posted), or null.\n * @internal */\nexport const pendingComment = new EditorAtom<PendingComment | null>('pendingComment', () => null)\n\n/**\n * A pending request to reveal a thread: a thread or comment id to open and bring into view, or\n * null when none is pending. Written by {@link revealThread}; served and cleared by\n * `CanvasComments`, which owns the wait for the records to sync in and the cluster-aware reveal.\n * @internal\n */\nexport const revealThreadRequest = new EditorAtom<string | null>('revealThreadRequest', () => null)\n\n/**\n * Open a thread and bring it into view, given a thread id or the id of any comment in it. Use it to\n * jump to a thread from outside the canvas \u2014 a notification, a deep link, your own list.\n *\n * The request is served by `CanvasComments`, so it works before the records have arrived: the layer\n * waits for them, switches pages, unhides pins, and zooms far enough to split the thread out of any\n * cluster. That also means nothing happens if `CanvasComments` isn't mounted.\n *\n * To open a thread you already hold and skip the wait, see {@link focusThread}.\n *\n * @example\n * ```ts\n * revealThread(editor, new URLSearchParams(location.search).get('comment')!)\n * ```\n *\n * @public\n */\nexport function revealThread(editor: Editor, threadOrCommentId: string): void {\n\trevealThreadRequest.set(editor, threadOrCommentId)\n}\n\n/**\n * The id passed to the most recent {@link revealThread} call that `CanvasComments` hasn't served\n * yet, or null. A request also clears when `CanvasComments` unmounts.\n *\n * This is a plain, untracked read \u2014 in React, use {@link useRevealThreadPending}, unless you need\n * the value as of *now* rather than as of the render you closed over.\n *\n * @public\n */\nexport function getRevealThreadPending(editor: Editor): string | null {\n\treturn revealThreadRequest.get(editor)\n}\n\n/**\n * Reactive React hook for {@link getRevealThreadPending}.\n *\n * Use it to notice a reveal that never lands \u2014 usually a deep link to a deleted comment. Give it a\n * grace period first, since a request also sits here while its records sync in, and re-check with\n * {@link getRevealThreadPending} when it elapses.\n *\n * @public\n */\nexport function useRevealThreadPending(): string | null {\n\tconst editor = useEditor()\n\treturn useValue('pending reveal thread', () => getRevealThreadPending(editor), [editor])\n}\n\n/** The region rectangle being dragged out right now (page coords), or null when not dragging. The\n *  comment tool writes it on each move; the overlay reads it to draw the live dashed box. */\nexport const regionDraft = new EditorAtom<BoxModel | null>('regionDraft', () => null)\n\n/**\n * Whether comment pins are hidden on the canvas. Governs the on-canvas layer (pins + open popover)\n * only \u2014 the sidebar is unaffected.\n * @public\n */\nexport const commentsHidden = new EditorAtom<boolean>('commentsHidden', () => false)\n\n/**\n * Whether the comments sidebar (the thread list) is open. Driven by an explicit control rather than\n * by which tool is active, so browsing threads is separate from placing them.\n * @public\n */\nexport const commentsSidebarOpen = new EditorAtom<boolean>('commentsSidebarOpen', () => false)\n\n/** Which threads the comments sidebar shows.\n * @public */\nexport const sidebarFilters = new EditorAtom<SidebarFilters>(\n\t'sidebarFilters',\n\t() => DEFAULT_SIDEBAR_FILTERS\n)\n\n/** Toggle comment-pin visibility for an editor.\n * @public */\nexport function toggleCommentsHidden(editor: Editor): void {\n\tcommentsHidden.update(editor, (hidden) => !hidden)\n}\n\n/** Open or close the comments sidebar for an editor.\n * @public */\nexport function toggleCommentsSidebar(editor: Editor): void {\n\tcommentsSidebarOpen.update(editor, (open) => !open)\n}\n\n/** React hook for the open thread id.\n * @public */\nexport function useOpenThreadId(): string | null {\n\tconst editor = useEditor()\n\treturn useValue('open thread id', () => openThreadId.get(editor), [editor])\n}\n\n/** React hook for the pending (being-placed) comment.\n * @internal */\nexport function usePendingComment(): PendingComment | null {\n\tconst editor = useEditor()\n\treturn useValue('pending comment', () => pendingComment.get(editor), [editor])\n}\n\n/** React hook for whether comment pins are hidden.\n * @public */\nexport function useCommentsHidden(): boolean {\n\tconst editor = useEditor()\n\treturn useValue('comments hidden', () => commentsHidden.get(editor), [editor])\n}\n\n/** React hook for whether the comments sidebar is open.\n * @public */\nexport function useCommentsSidebarOpen(): boolean {\n\tconst editor = useEditor()\n\treturn useValue('comments sidebar open', () => commentsSidebarOpen.get(editor), [editor])\n}\n\n/** React hook for the current sidebar filters.\n * @public */\nexport function useSidebarFilters(): SidebarFilters {\n\tconst editor = useEditor()\n\treturn useValue('sidebar filters', () => sidebarFilters.get(editor), [editor])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA4E;AAE5E,6BAA6D;AAUtD,MAAM,eAAe,IAAI,yBAA0B,gBAAgB,MAAM,IAAI;AAM7E,MAAM,cAAc,IAAI,yBAA0B,eAAe,MAAM,IAAI;AAI3E,MAAM,iBAAiB,IAAI,yBAAkC,kBAAkB,MAAM,IAAI;AAQzF,MAAM,sBAAsB,IAAI,yBAA0B,uBAAuB,MAAM,IAAI;AAmB3F,SAAS,aAAa,QAAgB,mBAAiC;AAC7E,sBAAoB,IAAI,QAAQ,iBAAiB;AAClD;AAWO,SAAS,uBAAuB,QAA+B;AACrE,SAAO,oBAAoB,IAAI,MAAM;AACtC;AAWO,SAAS,yBAAwC;AACvD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,yBAAyB,MAAM,uBAAuB,MAAM,GAAG,CAAC,MAAM,CAAC;AACxF;AAIO,MAAM,cAAc,IAAI,yBAA4B,eAAe,MAAM,IAAI;AAO7E,MAAM,iBAAiB,IAAI,yBAAoB,kBAAkB,MAAM,KAAK;AAO5E,MAAM,sBAAsB,IAAI,yBAAoB,uBAAuB,MAAM,KAAK;AAItF,MAAM,iBAAiB,IAAI;AAAA,EACjC;AAAA,EACA,MAAM;AACP;AAIO,SAAS,qBAAqB,QAAsB;AAC1D,iBAAe,OAAO,QAAQ,CAAC,WAAW,CAAC,MAAM;AAClD;AAIO,SAAS,sBAAsB,QAAsB;AAC3D,sBAAoB,OAAO,QAAQ,CAAC,SAAS,CAAC,IAAI;AACnD;AAIO,SAAS,kBAAiC;AAChD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,kBAAkB,MAAM,aAAa,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC3E;AAIO,SAAS,oBAA2C;AAC1D,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAIO,SAAS,oBAA6B;AAC5C,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;AAIO,SAAS,yBAAkC;AACjD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,yBAAyB,MAAM,oBAAoB,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AACzF;AAIO,SAAS,oBAAoC;AACnD,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,mBAAmB,MAAM,eAAe,IAAI,MAAM,GAAG,CAAC,MAAM,CAAC;AAC9E;",
   "names": []
 }

package/dist-cjs/canvas/thread-pin.js

@@ -0,0 +1,304 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var thread_pin_exports = {};
+__export(thread_pin_exports, {
+  ThreadPin: () => ThreadPin
+});
+module.exports = __toCommonJS(thread_pin_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_mentions = require("@tldraw/mentions");
+var import_react = require("react");
+var import_tldraw = require("tldraw");
+var import_comment_pin = require("../ui/comment-pin");
+var import_canvas_events = require("./canvas-events");
+var import_comment_mutations = require("./comment-mutations");
+var import_comment_render = require("./comment-render");
+var import_hooks = require("./hooks");
+var import_options = require("./options");
+var import_region_box = require("./region-box");
+var import_state = require("./state");
+var import_thread_preview = require("./thread-preview");
+var import_thread_state = require("./thread-state");
+var import_thread_view = require("./thread-view");
+const THREAD_HEADER_BLOCK = 36;
+const ThreadPin = (0, import_react.memo)(function ThreadPin2({
+  editor,
+  thread,
+  ...props
+}) {
+  const { resolveAuthor } = props;
+  const options = (0, import_options.useCommentingOptions)();
+  const canComment = (0, import_options.useCanComment)(props.currentUserId);
+  const container = (0, import_tldraw.useContainer)();
+  const msg = (0, import_tldraw.useTranslation)();
+  const comments = (0, import_hooks.useThreadComments)(editor, thread.id);
+  const open = (0, import_tldraw.useValue)("thread open", () => import_state.openThreadId.get(editor) === thread.id, [
+    editor,
+    thread.id
+  ]);
+  const [dragPagePoint, setDragPagePoint] = (0, import_react.useState)(null);
+  const [resizeBounds, setResizeBounds] = (0, import_react.useState)(null);
+  const { previewShown, previewHandlers } = (0, import_thread_preview.useMarkerPreview)(editor, `pin:${thread.id}`);
+  const previewThreads = (0, import_react.useMemo)(() => [thread], [thread]);
+  const pointerInRegion = (0, import_tldraw.useValue)(
+    "pointer in region",
+    () => {
+      if (thread.anchor.type !== "region" || thread.pageId !== editor.getCurrentPageId())
+        return false;
+      const m = import_region_box.REGION_HANDLE_MARGIN_PX / editor.getZoomLevel();
+      const p = editor.inputs.getCurrentPagePoint();
+      const a = thread.anchor;
+      return p.x >= a.x - m && p.x <= a.x + a.w + m && p.y >= a.y - m && p.y <= a.y + a.h + m;
+    },
+    [editor, thread.anchor, thread.pageId]
+  );
+  const revealed = open || resizeBounds != null || pointerInRegion;
+  const pinCorner = thread.anchor.type === "region" ? (0, import_thread_state.regionAnchorPinCorner)(thread.anchor) : import_thread_state.REGION_PIN_CORNER;
+  const resizeHandles = (0, import_react.useMemo)(
+    () => import_region_box.REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
+    [pinCorner]
+  );
+  const dragRef = (0, import_react.useRef)(null);
+  const markerRef = (0, import_react.useRef)(null);
+  (0, import_tldraw.usePassThroughWheelEvents)(markerRef);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (dragRef.current) editor.setHintingShapes([]);
+    };
+  }, [editor]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (target.closest(".tlui-cmt-canvas-popover")) return;
+      const marker = markerRef.current;
+      if (marker && marker.contains(target)) return;
+      if (target.closest(".tlui-cmt-canvas-region-handle")) return;
+      if (target.closest(".tlui-menu, [data-radix-popper-content-wrapper], .tlui-cmt-mention-popup"))
+        return;
+      import_state.openThreadId.set(editor, null);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, editor]);
+  const exemptFromCull = open || dragPagePoint != null || resizeBounds != null;
+  const point = (0, import_tldraw.useValue)(
+    "pin point",
+    () => {
+      if (thread.pageId !== editor.getCurrentPageId()) return null;
+      const pagePoint = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+      if (!pagePoint) return null;
+      const viewportPoint = editor.pageToViewport(pagePoint);
+      const inset = (0, import_thread_state.impreciseShapePinInset)(editor, thread.anchor);
+      const point2 = inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint;
+      if (!exemptFromCull) {
+        const visible = thread.anchor.type === "region" ? (0, import_thread_state.isBoxInInflatedViewport)(editor, thread.anchor) : (0, import_thread_state.isInInflatedViewport)(editor, point2);
+        if (!visible) return null;
+      }
+      return point2;
+    },
+    [editor, thread.anchor, thread.pageId, exemptFromCull]
+  );
+  if (!point) return null;
+  const PinContent = options.components.PinContent;
+  const threadAuthor = resolveAuthor(thread.createdBy);
+  const pinContent = PinContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinContent, { thread, comments }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mentions.Avatar, { author: threadAuthor ?? import_comment_render.UNKNOWN_COMMENT_AUTHOR });
+  const pinLabel = msg(
+    thread.resolved ? "comments.pin-label-resolved" : "comments.pin-label"
+  ).replace("{name}", threadAuthor?.name ?? import_comment_render.UNKNOWN_AUTHOR);
+  const isRegion = thread.anchor.type === "region";
+  const startDrag = (e) => {
+    if ((0, import_canvas_events.isCanvasPanGesture)(editor, e)) {
+      (0, import_canvas_events.forwardPointerEventToCanvas)(container, e);
+      return;
+    }
+    e.stopPropagation();
+    const grabPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const anchorPage = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+    const inset = (0, import_thread_state.impreciseShapePinInset)(editor, thread.anchor);
+    if (anchorPage && inset) {
+      const zoom = editor.getZoomLevel();
+      anchorPage.x += inset.x / zoom;
+      anchorPage.y += inset.y / zoom;
+    }
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      moved: false,
+      offsetX: anchorPage ? anchorPage.x - grabPage.x : 0,
+      offsetY: anchorPage ? anchorPage.y - grabPage.y : 0
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onDrag = (e) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    if (!canComment) return;
+    if (!drag.moved && Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < 4) return;
+    drag.moved = true;
+    const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY };
+    setDragPagePoint(pagePoint);
+    if (!isRegion) {
+      const hit = (0, import_thread_state.commentTargetShapeAt)(editor, pagePoint);
+      editor.setHintingShapes(hit ? [hit.id] : []);
+    }
+  };
+  const cancelDrag = (e) => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    if (!drag) return;
+    setDragPagePoint(null);
+    editor.setHintingShapes([]);
+  };
+  const endDrag = (e) => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    if (!drag) return;
+    editor.setHintingShapes([]);
+    if (!drag.moved) {
+      import_state.openThreadId.set(editor, import_state.openThreadId.get(editor) === thread.id ? null : thread.id);
+      return;
+    }
+    const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY });
+    const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY };
+    setDragPagePoint(null);
+    let anchor;
+    if (thread.anchor.type === "region") {
+      anchor = {
+        ...thread.anchor,
+        x: pagePoint.x - pinCorner.x * thread.anchor.w,
+        y: pagePoint.y - pinCorner.y * thread.anchor.h
+      };
+    } else {
+      const hit = (0, import_thread_state.commentTargetShapeAt)(editor, pagePoint);
+      anchor = hit ? (0, import_thread_state.shapeAnchorAt)(
+        editor,
+        hit.id,
+        pagePoint,
+        (0, import_options.getCommentingOptions)(editor).shouldBePrecise(editor, {
+          shapeId: hit.id,
+          point: pagePoint,
+          altKey: e.altKey
+        })
+      ) : { type: "point", x: pagePoint.x, y: pagePoint.y };
+    }
+    (0, import_comment_mutations.commitCommentMutation)(editor, ({ put }) => put([{ ...thread, anchor }]), "drag");
+  };
+  const livePinPage = resizeBounds ? (0, import_thread_state.regionPinPoint)(resizeBounds, pinCorner) : dragPagePoint;
+  const renderPointBase = livePinPage ? editor.pageToViewport(livePinPage) : point;
+  const renderPoint = isRegion ? { x: renderPointBase.x - 17, y: renderPointBase.y + 17 } : renderPointBase;
+  const regionAnchor = thread.anchor.type === "region" ? thread.anchor : void 0;
+  const movedRegion = regionAnchor && dragPagePoint ? {
+    ...regionAnchor,
+    x: dragPagePoint.x - pinCorner.x * regionAnchor.w,
+    y: dragPagePoint.y - pinCorner.y * regionAnchor.h
+  } : regionAnchor;
+  const regionBoxBounds = resizeBounds ?? movedRegion;
+  const commitResize = (bounds) => {
+    setResizeBounds(null);
+    if (!canComment) return;
+    (0, import_comment_mutations.commitCommentMutation)(
+      editor,
+      // Spread the existing anchor first so the region's pin corner survives a resize.
+      ({ put }) => put([{ ...thread, anchor: { ...regionAnchor, ...bounds } }]),
+      "drag"
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    regionBoxBounds && (dragPagePoint || revealed) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_region_box.RegionBox, { editor, box: regionBoxBounds }),
+    regionBoxBounds && revealed && !dragPagePoint && canComment && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_region_box.RegionResizeHandles,
+      {
+        editor,
+        box: regionBoxBounds,
+        handles: resizeHandles,
+        onPreview: setResizeBounds,
+        onCommit: commitResize
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: [
+          "tlui-cmt-canvas-pin",
+          open && "tlui-cmt-canvas-pin--open",
+          dragPagePoint && "tlui-cmt-canvas-pin--dragging"
+        ].filter(Boolean).join(" "),
+        style: { left: renderPoint.x, top: renderPoint.y },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              ref: markerRef,
+              type: "button",
+              className: "tlui-cmt-button tlui-cmt-canvas-pin__marker",
+              "aria-label": pinLabel,
+              "aria-expanded": open,
+              onPointerDown: startDrag,
+              onPointerMove: onDrag,
+              onPointerUp: endDrag,
+              onPointerCancel: cancelDrag,
+              onClick: (e) => {
+                if (e.detail !== 0) return;
+                import_state.openThreadId.set(editor, import_state.openThreadId.get(editor) === thread.id ? null : thread.id);
+              },
+              onPointerEnter: previewHandlers.onPointerEnter,
+              onPointerLeave: previewHandlers.onPointerLeave,
+              onFocus: previewHandlers.onPointerEnter,
+              onBlur: previewHandlers.onPointerLeave,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_comment_pin.CommentPin, { resolved: thread.resolved != null, open, children: pinContent })
+            }
+          ),
+          open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_thread_view.ThreadPopover,
+            {
+              base: {
+                x: renderPoint.x + import_thread_view.POPOVER_OFFSET.thread.x,
+                y: renderPoint.y + import_thread_view.POPOVER_OFFSET.thread.y - THREAD_HEADER_BLOCK
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_thread_view.ThreadView, { editor, thread, ...props })
+            }
+          ),
+          previewShown && !dragPagePoint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_thread_preview.ThreadPreview,
+            {
+              editor,
+              threads: previewThreads,
+              variant: "thread",
+              point: renderPoint,
+              onSelectThread: () => import_state.openThreadId.set(editor, thread.id),
+              ...previewHandlers,
+              currentUserId: props.currentUserId,
+              resolveAuthor
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+//# sourceMappingURL=thread-pin.js.map