@devaccel-labs/comment-service 0.8.0 → 0.9.0

package/dist/chunks/{chunk-QSHFAMXM.js → chunk-KKE43QYT.js}

@@ -208,12 +208,13 @@ function overlayFor(element) {
   const role = node.getAttribute("role") || (node.tagName === "DIALOG" ? "dialog" : "dialog");
   return { role, name: labelFor(node) || "dialog" };
 }
-function fiberNames(element) {
+function fiberOf(element) {
   const key2 = Object.keys(element).find((name) => name.startsWith("__reactFiber$") || name.startsWith("__reactInternalInstance$"));
-  if (!key2)
-    return [];
+  return key2 ? element[key2] : void 0;
+}
+function fiberNames(element) {
   const names = [];
-  let fiber = element[key2];
+  let fiber = fiberOf(element);
   for (let guard = 0; fiber && guard < 40; guard++) {
     const type = fiber.type;
     if (typeof type === "function") {
@@ -222,10 +223,30 @@ function fiberNames(element) {
       if (name && !name.startsWith("_"))
         names.push(name);
     }
-    fiber = fiber.return;
+    fiber = fiber.return ?? void 0;
   }
   return names.reverse();
 }
+function fiberStamps(element) {
+  const stamps = [];
+  let fiber = fiberOf(element);
+  for (let guard = 0; fiber && guard < 2e3; guard++) {
+    const props = fiber.memoizedProps;
+    const name = props && typeof props === "object" ? props["data-cs-cmp"] : void 0;
+    if (typeof name === "string" && name) {
+      const file = props?.["data-cs-file"];
+      stamps.push({ name, file: typeof file === "string" ? file : null });
+    }
+    fiber = fiber.return ?? void 0;
+  }
+  return stamps;
+}
+function bodyChild(element) {
+  let current = element;
+  while (current?.parentElement && current.parentElement !== current.ownerDocument.body)
+    current = current.parentElement;
+  return current?.parentElement ? current : null;
+}
 function obviouslyHidden(element) {
   const dialog = element.closest("dialog");
   if (dialog instanceof HTMLDialogElement && !dialog.open)
@@ -253,6 +274,18 @@ function ownership(element) {
     }
     current = current.parentElement;
   }
+  const top = bodyChild(element);
+  if (top && top !== element && (!owner || !top.contains(owner))) {
+    const stamps = fiberStamps(element);
+    if (stamps.length && (!owner || stamps[0].name !== owner.getAttribute("data-cs-cmp"))) {
+      return {
+        component: stamps[0],
+        stack: stamps.map((stamp) => stamp.name).reverse(),
+        componentRoot: false,
+        owner: top
+      };
+    }
+  }
   if (owner) {
     return {
       component: { name: owner.getAttribute("data-cs-cmp") || "component", file: owner.getAttribute("data-cs-file") },
@@ -349,7 +382,7 @@ function elementAt(x, y) {
   return null;
 }
 function describeElement(element) {
-  const name = element.closest("[data-cs-cmp]")?.getAttribute("data-cs-cmp");
+  const name = ownership(element).component?.name;
   const label = labelFor(element);
   if (name && label)
     return `${name} \u2014 ${label}`;

package/dist/chunks/{runtime-2PTKNDUT.js → runtime-2ZDPCFHS.js}

@@ -9,7 +9,7 @@ import {
   resolveInDocument,
   runtimeVersion,
   stripHandoffFromUrl
-} from "./chunk-QSHFAMXM.js";
+} from "./chunk-KKE43QYT.js";
 
 // ../react/dist/runtime.js
 import { jsx as _jsx7 } from "react/jsx-runtime";
@@ -491,10 +491,7 @@ function MentionTextarea({ value, onValueChange, members, selfEmail, onMention,
   } }), open && rect && root ? createPortal(_jsx4("div", { className: "cs-people cs-hit", role: "listbox", "data-cs-ui": "mention-list", style: {
     left: Math.min(rect.left, window.innerWidth - 272),
     ...below ? { top: rect.bottom + 6 } : { bottom: window.innerHeight - rect.top + 6 }
-  }, children: matches.map((member) => _jsxs4("div", { role: "option", "aria-selected": member === selected, "data-cs-ui": "mention-option", className: member === selected ? "cs-person is-on" : "cs-person", onMouseDown: (event) => {
-    event.preventDefault();
-    insert(member);
-  }, onMouseEnter: () => setIndex(matches.indexOf(member)), children: [_jsx4("span", { className: "cs-avatar", style: { width: 24, height: 24, fontSize: 10, background: colorFor(member.name) }, children: initials(member.name) }), _jsxs4("span", { className: "cs-person-text", children: [_jsx4("strong", { children: member.name }), _jsx4("small", { children: member.email })] })] }, member.id)) }), root) : null] });
+  }, children: matches.map((member) => _jsxs4("div", { role: "option", "aria-selected": member === selected, "data-cs-ui": "mention-option", className: member === selected ? "cs-person is-on" : "cs-person", onClick: () => insert(member), onMouseEnter: () => setIndex(matches.indexOf(member)), children: [_jsx4("span", { className: "cs-avatar", style: { width: 24, height: 24, fontSize: 10, background: colorFor(member.name) }, children: initials(member.name) }), _jsxs4("span", { className: "cs-person-text", children: [_jsx4("strong", { children: member.name }), _jsx4("small", { children: member.email })] })] }, member.id)) }), root) : null] });
 }
 
 // ../../node_modules/modern-screenshot/dist/index.mjs
@@ -2921,38 +2918,73 @@ function ToolbarApp({ sessionPath = "/api/comment-service/session", pollMs = 4e3
     savePrefs({ ...prefs, pinsHidden: next });
     say(next ? "Pins hidden \xB7 H to show" : "Pins shown");
   }, [pinsHidden, prefs, savePrefs, say]);
-  useEffect2(() => {
-    const onKey = (event) => {
-      if (event.defaultPrevented)
-        return;
-      if (event.key === "Escape") {
-        if (mode !== "browse" || draft || surface !== "none") {
-          setMode("browse");
-          setDraft(null);
-          setReattachId(null);
-          setSurface("none");
-          setConfirmReset(false);
-          setRenaming(null);
-        }
-        return;
+  const onKey = useRef3(() => {
+  });
+  onKey.current = (event) => {
+    if (event.defaultPrevented)
+      return;
+    if (event.key === "Escape") {
+      if (mode !== "browse" || draft || surface !== "none") {
+        event.stopImmediatePropagation();
+        setMode("browse");
+        setDraft(null);
+        setReattachId(null);
+        setSurface("none");
+        setConfirmReset(false);
+        setRenaming(null);
       }
-      if (!member || event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target))
-        return;
-      const key = event.key.toLowerCase();
-      if (key === "c")
-        startComment();
-      else if (key === "i") {
-        setView(prefs.view ?? "list");
-        setSurface((current) => current === "inbox" ? "none" : "inbox");
-      } else if (key === "h")
-        togglePins();
-      else
+      return;
+    }
+    if (!member || event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target))
+      return;
+    const key = event.key.toLowerCase();
+    if (key === "c")
+      startComment();
+    else if (key === "i") {
+      setView(prefs.view ?? "list");
+      setSurface((current) => current === "inbox" ? "none" : "inbox");
+    } else if (key === "h")
+      togglePins();
+    else
+      return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  useEffect2(() => {
+    const inToolbar = (event) => event.target instanceof Element && Boolean(event.target.closest("#cs-root"));
+    const fromPage = (event) => {
+      if (!inToolbar(event))
+        onKey.current(event);
+    };
+    const fromToolbar = (event) => {
+      if (inToolbar(event))
+        onKey.current(event);
+    };
+    window.addEventListener("keydown", fromPage, true);
+    document.addEventListener("keydown", fromToolbar);
+    return () => {
+      window.removeEventListener("keydown", fromPage, true);
+      document.removeEventListener("keydown", fromToolbar);
+    };
+  }, []);
+  useEffect2(() => {
+    const textControl = "input, textarea, select, [contenteditable]";
+    const shield = (event) => {
+      const target = event.target;
+      if (!(target instanceof Element) || !target.closest("#cs-root"))
         return;
-      event.preventDefault();
+      event.stopPropagation();
+      if (event.type === "mousedown" && !target.closest(textControl))
+        event.preventDefault();
     };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [draft, member, mode, prefs.view, startComment, surface, togglePins]);
+    const types = ["pointerdown", "mousedown", "touchstart"];
+    for (const type of types)
+      window.addEventListener(type, shield, true);
+    return () => {
+      for (const type of types)
+        window.removeEventListener(type, shield, true);
+    };
+  }, []);
   useEffect2(() => {
     if (mode === "browse") {
       setHighlight(null);
@@ -3009,12 +3041,24 @@ function ToolbarApp({ sessionPath = "/api/comment-service/session", pollMs = 4e3
       setMode("browse");
       setError("");
     };
+    const swallow = (event) => {
+      if (event.target instanceof Element && event.target.closest("#cs-root"))
+        return;
+      if (!event.type.startsWith("touch"))
+        event.preventDefault();
+      event.stopPropagation();
+    };
+    const presses = ["pointerdown", "mousedown", "pointerup", "mouseup", "touchstart", "touchend"];
     document.addEventListener("mousemove", onMove, true);
-    document.addEventListener("click", onClick, true);
+    window.addEventListener("click", onClick, true);
+    for (const type of presses)
+      window.addEventListener(type, swallow, true);
     return () => {
       document.documentElement.style.cursor = "";
       document.removeEventListener("mousemove", onMove, true);
-      document.removeEventListener("click", onClick, true);
+      window.removeEventListener("click", onClick, true);
+      for (const type of presses)
+        window.removeEventListener(type, swallow, true);
     };
   }, [member, mode, portal, reattachId, refresh, say, session]);
   useEffect2(() => {

package/dist/react.js

@@ -1,12 +1,12 @@
 import {
   captureHandoff,
   runtimeVersion
-} from "./chunks/chunk-QSHFAMXM.js";
+} from "./chunks/chunk-KKE43QYT.js";
 
 // ../react/dist/loader.js
 import { useEffect, useRef } from "react";
 captureHandoff();
-var bundled = () => import("./chunks/runtime-2PTKNDUT.js");
+var bundled = () => import("./chunks/runtime-2ZDPCFHS.js");
 async function serviceUrl(sessionPath) {
   try {
     const response = await fetch(sessionPath, {

package/dist/types/compiler/annotate.d.ts

@@ -1,7 +1,10 @@
 export declare function toProjectPath(filename: string, root: string): string;
 /**
- * Stamp the root DOM node of each component with a stable file + component name.
+ * Stamp the root node of each component of each component with a stable file + component name.
  * Line numbers are intentionally not included: moving the component in the file
- * or on the page must not change the stamp.
+ * or on the page must not change the stamp. A root that is itself a component
+ * (`<DropdownMenu>`, `<Menu.Root>`) gets the stamp as a prop: it reaches the DOM when
+ * the component spreads its props, and the toolbar reads it from React's tree when
+ * the component renders into a portal.
  */
 export declare function annotateSource(code: string, filename: string, root: string): string;

package/dist/vite.js

@@ -58,6 +58,16 @@ function setAttr(path, name, value) {
     return;
   path.node.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier(name), t.stringLiteral(value)));
 }
+var unstampable = /^(?:React\.)?(?:Fragment|Suspense|StrictMode|Profiler|Activity|ViewTransition)$|\.(?:Provider|Consumer)$/;
+function jsxName(name) {
+  if (t.isJSXIdentifier(name))
+    return name.name;
+  if (t.isJSXMemberExpression(name)) {
+    const object = jsxName(name.object);
+    return object ? `${object}.${name.property.name}` : null;
+  }
+  return null;
+}
 function annotateSource(code, filename, root) {
   if (!filename.match(/\.[jt]sx$/))
     return code;
@@ -77,10 +87,8 @@ function annotateSource(code, filename, root) {
   let changed = false;
   traverse()(ast, {
     JSXElement(path) {
-      const opening = path.node.openingElement.name;
-      if (!t.isJSXIdentifier(opening))
-        return;
-      if (opening.name[0] !== opening.name[0].toLowerCase())
+      const tag = jsxName(path.node.openingElement.name);
+      if (!tag || unstampable.test(tag))
         return;
       if (!isRootJsx(path))
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devaccel-labs/comment-service",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "In-UI component comments for TanStack Start on Cloudflare. Anchors survive redeploys.",
   "type": "module",
   "license": "UNLICENSED",
@@ -43,8 +43,8 @@
   },
   "devDependencies": {
     "esbuild": "^0.28.1",
-    "@devaccel/comment-core": "0.1.0",
     "@devaccel/comment-compiler": "0.1.0",
+    "@devaccel/comment-core": "0.1.0",
     "@devaccel/comment-react": "0.1.0",
     "@devaccel/comment-server": "0.1.0",
     "@devaccel/comment-start": "0.1.0"