@comty.io/core 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comty.io/core",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Comty visual comments, inspector and local agent tools",
   "type": "module",
   "license": "UNLICENSED",
@@ -39,7 +39,8 @@
     "test:anchors": "node --test tests/anchors.test.mjs tests/anchor-reload.browser.test.mjs",
     "test:auth": "node --test tests/auth-return.browser.test.mjs",
     "test:vite": "node --test tests/vite.test.mjs",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "test:isolation": "node --test tests/style-isolation.browser.test.mjs"
   },
   "devDependencies": {
     "esbuild": "0.28.2",

package/src/anchors.js

@@ -1,437 +1,192 @@
-export function createAnchorMatcher({
-  getElementTextSignature,
-  getElementOwnTextSignature,
-  getAttributeSignature,
-  getSiblingFingerprint,
-  getPresentationLayer,
-  isComtyNode,
-}) {
-    function getStableAnchorId(id) {
-      // React useId values change with mount order, including Base UI and Radix IDs.
-      return /^(?:(?:radix|base-ui)-)?(?:_r_[\w-]+_|:r[\w-]+:)$/i.test(id || "") ? "" : (id || "");
+import { createResilientAnchors, readAnchor } from "./resilient-anchor.js";
+
+export function createAnchorMatcher({ getPresentationLayer, isComtyNode }) {
+  const resilient = createResilientAnchors(isComtyNode, getPresentationLayer);
+
+  function getStableAnchorId(id) {
+    // React useId values change with mount order, including Base UI and Radix IDs.
+    return /^(?:(?:radix|base-ui)-)?(?:_r_[\w-]+_|:r[\w-]+:)$/i.test(id || "")
+      ? ""
+      : id || "";
+  }
+
+  function resolveAnchor(context, exact = null, previous = null) {
+    const anchor = readAnchor(context);
+    return anchor
+      ? resilient.resolve(anchor, previous, exact)
+      : { element: null, status: "uncertain" };
+  }
+
+  function getViewportBounds() {
+    const viewport = window.visualViewport;
+    if (!viewport) {
+      return {
+        left: 0,
+        top: 0,
+        right: window.innerWidth,
+        bottom: window.innerHeight,
+      };
     }
 
-    function includesText(haystack, needle) {
-      if (!haystack || !needle) return false;
-      return haystack.toLowerCase().includes(needle.toLowerCase());
-    }
+    return {
+      left: viewport.offsetLeft,
+      top: viewport.offsetTop,
+      right: viewport.offsetLeft + viewport.width,
+      bottom: viewport.offsetTop + viewport.height,
+    };
+  }
 
-    function similarText(a, b) {
-      if (!a || !b) return false;
-      const words = value => new Set(value.toLowerCase().split(/\s+/).filter(Boolean));
-      const left = words(a), right = words(b);
-      const common = [...left].filter(word => right.has(word)).length;
-      return common >= 2 && common / Math.max(left.size, right.size) >= 0.7;
-    }
-
-    function scoreFingerprint(el, fingerprint) {
-      if (!el || !fingerprint) return 0;
-      if (
-        fingerprint.tag &&
-        el.tagName.toLowerCase() !== fingerprint.tag.toLowerCase()
-      ) {
-        return -1000;
+  function isElementTreeHidden(el) {
+    let current = el;
+    while (current instanceof Element) {
+      if (!current.isConnected) return true;
+      if (current.hasAttribute("hidden")) return true;
+      if (current.hasAttribute("inert")) return true;
+      if (current.getAttribute("aria-hidden") === "true") {
+        return true;
       }
 
-      let score = 0;
-      const text = getElementTextSignature(el, fingerprint.textMode === "static");
-      const ownText = getElementOwnTextSignature(el, fingerprint.textMode === "static");
-
-      score += 20;
-      const stableId = getStableAnchorId(fingerprint.id);
-      if (stableId) {
-        score += el.id.slice(0, 160) === stableId ? 70 : -30;
-      }
-      const exactAttributes = [
-        ["role", "role", 24],
-        ["ariaLabel", "aria-label", 34],
-        ["name", "name", 30],
-        ["type", "type", 12],
-        ["placeholder", "placeholder", 24],
-        ["alt", "alt", 28],
-        ["href", "href", 30],
-        ["src", "src", 24],
-        ["title", "title", 20],
-      ];
-      for (const [key, attribute, weight] of exactAttributes) {
-        if (!fingerprint[key]) continue;
-        score +=
-          getAttributeSignature(el, attribute) === fingerprint[key]
-            ? weight
-            : -Math.ceil(weight / 3);
-      }
-
-      const testId =
-        getAttributeSignature(el, "data-testid") ||
-        getAttributeSignature(el, "data-test") ||
-        getAttributeSignature(el, "data-cy");
-      if (fingerprint.testId) {
-        score += testId === fingerprint.testId ? 55 : -20;
+      const style = getComputedStyle(current);
+      if (style.display === "none") return true;
+      if (style.visibility === "hidden" || style.visibility === "collapse") {
+        return true;
       }
-
-      const classes = Array.isArray(fingerprint.classes)
-        ? fingerprint.classes
-        : [];
-      const matchingClasses = classes.filter((className) =>
-        el.classList.contains(className),
-      );
-      score += matchingClasses.length * 7;
-      if (classes.length > 0 && matchingClasses.length === 0) score -= 8;
-
-      if (fingerprint.ownText && ownText === fingerprint.ownText) score += 42;
-      else if (
-        fingerprint.ownText &&
-        includesText(ownText, fingerprint.ownText.slice(0, 80))
-      ) {
-        score += 20;
-      }
-
-      if (fingerprint.text && text === fingerprint.text) score += 32;
-      else if (
-        fingerprint.text &&
-        includesText(text, fingerprint.text.slice(0, 80))
-      ) {
-        score += 15;
-      }
-
-      if (text !== fingerprint.text && similarText(text, fingerprint.text)) score += 24;
-
-      if (typeof fingerprint.siblingIndex === "number" && el.parentElement) {
-        const siblings = [...el.parentElement.children].filter(
-          (child) => child.tagName === el.tagName,
-        );
-        if (siblings.indexOf(el) === fingerprint.siblingIndex) score += 8;
-      }
-
-      if (
-        typeof fingerprint.childCount === "number" &&
-        el.children.length === fingerprint.childCount
-      ) {
-        score += 4;
+      if (Number.parseFloat(style.opacity) <= 0.01) return true;
+      if (style.contentVisibility === "hidden") {
+        return true;
       }
 
-      const rect = el.getBoundingClientRect();
-      if (
-        fingerprint.width > 0 &&
-        rect.width > 0 &&
-        Math.abs(rect.width - fingerprint.width) /
-          Math.max(rect.width, fingerprint.width) <
-          0.2
-      ) {
-        score += 4;
-      }
-      if (
-        fingerprint.height > 0 &&
-        rect.height > 0 &&
-        Math.abs(rect.height - fingerprint.height) /
-          Math.max(rect.height, fingerprint.height) <
-          0.2
-      ) {
-        score += 4;
+      if (current.tagName === "DETAILS" && !current.hasAttribute("open")) {
+        const summary = current.querySelector(":scope > summary");
+        if (!summary || !summary.contains(el)) return true;
       }
 
-      return score;
+      current = current.parentElement;
     }
+    return false;
+  }
 
-    function scoreSibling(el, fingerprint) {
-      if (!fingerprint) return 0;
-      const sibling = getSiblingFingerprint(el, fingerprint.textMode === "static");
-      if (!sibling || sibling.tag !== fingerprint.tag) return -4;
-      let score = 4;
-      if (fingerprint.ariaLabel && sibling.ariaLabel === fingerprint.ariaLabel) {
-        score += 6;
-      }
-      if (fingerprint.role && sibling.role === fingerprint.role) score += 4;
-      if (fingerprint.text && sibling.text === fingerprint.text) score += 8;
-      return score;
-    }
+  function pointIsInsideRect(x, y, rect) {
+    return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+  }
 
-    function scoreAnchorCandidate(el, context) {
-      if (!el || !context?.target) return 0;
-      let score = scoreFingerprint(el, context.target);
-      if (score < 0) return score;
-
-      score += scoreSibling(
-        el.previousElementSibling,
-        context.target.previousSibling,
+  function isPointClipped(el, x, y) {
+    let ancestor = el.parentElement;
+    while (
+      ancestor &&
+      ancestor !== document.body &&
+      ancestor !== document.documentElement
+    ) {
+      const style = getComputedStyle(ancestor);
+      const clipsX = ["auto", "scroll", "hidden", "clip"].includes(
+        style.overflowX,
       );
-      score += scoreSibling(el.nextElementSibling, context.target.nextSibling);
-
-      const ancestors = Array.isArray(context.ancestors)
-        ? context.ancestors
-        : [];
-      let parent = el.parentElement;
-      for (
-        let index = 0;
-        parent && index < ancestors.length;
-        index += 1
-      ) {
-        const ancestorScore = scoreFingerprint(
-          parent,
-          ancestors[index],
-        );
-        if (ancestorScore > 0) {
-          score += Math.min(ancestorScore, 40) * (index === 0 ? 0.5 : 0.2);
-        }
-        // Distinguish repeated cards by their section, even when dimensions match.
-        if (ancestors[index].text && getElementTextSignature(parent, ancestors[index].textMode === "static") === ancestors[index].text) score += 18;
-        parent = parent.parentElement;
-      }
-
-      if (context.layer) {
-        const layer = getPresentationLayer(el);
-        if (!layer) return -1000;
-        const layerScore = scoreFingerprint(layer, context.layer);
-        if (layerScore < 30) return -1000;
-        score += Math.min(layerScore, 60) * 0.5;
-      }
-
-      return score;
-    }
-
-    function matchesAnchorIdentity(el, fingerprint, ignoreDescendantText = false, allowTextChanges = true) {
-      if (!el || !fingerprint || el.tagName.toLowerCase() !== fingerprint.tag) return false;
-      const attributes = { ariaLabel: "aria-label", name: "name", href: "href", src: "src", alt: "alt", title: "title", role: "role" };
-      for (const [key, attribute] of Object.entries(attributes)) {
-        if (fingerprint[key] && getAttributeSignature(el, attribute) !== fingerprint[key]) return false;
-      }
-      const stableId = getStableAnchorId(fingerprint.id);
-      if (stableId && el.id !== stableId) return false;
-      if (fingerprint.testId && !["data-testid", "data-test", "data-cy"].some(name => getAttributeSignature(el, name) === fingerprint.testId)) return false;
-      const stableIdentity = (stableId && el.id === stableId) ||
-        (fingerprint.testId && ["data-testid", "data-test", "data-cy"].some(name => getAttributeSignature(el, name) === fingerprint.testId));
-      const staticText = fingerprint.textMode === "static";
-      const text = getElementTextSignature(el, staticText);
-      if (fingerprint.ownText && getElementOwnTextSignature(el, staticText) !== fingerprint.ownText && !(allowTextChanges && stableIdentity)) return false;
-      // Container text is useful for matching remounted drawers and dialogs.
-      if (!ignoreDescendantText && !fingerprint.ownText && fingerprint.text && text !== fingerprint.text && !(allowTextChanges && stableIdentity)) {
-        if (!allowTextChanges || !el.children.length || !similarText(text, fingerprint.text)) return false;
-      }
-      return true;
-    }
-
-    function matchesAnchorContext(el, context) {
-      if (!context) return true;
-      // A unique page landmark keeps its identity when a child is edited.
-      const pageContainer = !context.layer && (context.target?.tag === "main" || context.target?.role === "main") &&
-        [...document.querySelectorAll('main, [role="main"]')].filter(node => !isComtyNode(node)).length === 1;
-      if (!matchesAnchorIdentity(el, context.target, pageContainer)) return false;
-      const parentFingerprint = context.ancestors?.[0];
-      if (parentFingerprint?.text && parentFingerprint.text !== context.target.text &&
-          !matchesAnchorIdentity(el.parentElement, parentFingerprint, pageContainer)) return false;
-      const layer = getPresentationLayer(el);
-      if (context.layer && (!layer || !matchesAnchorIdentity(layer, context.layer, false, false))) return false;
-      if (context.version >= 2 && !context.layer && layer) return false;
-      return scoreAnchorCandidate(el, context) >= 50;
-    }
-
-    function resolveAnchor(context, exact = null) {
-      if (!context?.target) return { element: exact, status: exact ? "matched" : "missing" };
-      let candidates;
-      try {
-        candidates = [...document.body.querySelectorAll(context.target.tag || "*")].filter(el => !isComtyNode(el));
-      } catch {
-        return { element: null, status: "missing" };
-      }
-      const matches = candidates
-        .filter(el => matchesAnchorContext(el, context))
-        .map(el => ({ el, score: scoreAnchorCandidate(el, context) + (context.version === 1 && el === exact ? 16 : 0) }))
-        .sort((a, b) => b.score - a.score);
-      if (context.candidateCount > 1) {
-        // Creation counts full context matches, not every element with the same text.
-        const peers = candidates.filter(el => matchesAnchorIdentity(el, context.target));
-        if (matches.length !== context.candidateCount && peers.length !== context.candidateCount) {
-          // A removed identical sibling must not move its comment to the survivor.
-          const distinctive = matches[0] && (getStableAnchorId(context.target.id) || context.target.testId);
-          if (!distinctive) return { element: null, status: "uncertain" };
-        }
-      }
-      if (matches[0]?.score >= 58 && (!matches[1] || matches[0].score - matches[1].score >= 12)) {
-        return { element: matches[0].el, status: "matched" };
-      }
-      // A closed/unmounted overlay is not evidence that its contents were deleted.
-      if (context.layer && !candidates.some(el => {
-        const layer = getPresentationLayer(el);
-        return layer && matchesAnchorIdentity(layer, context.layer, false, false);
-      })) return { element: null, status: "hidden" };
-      const plausible = matches.length || candidates.some(el =>
-        (getStableAnchorId(context.target.id) && el.id === context.target.id) ||
-        (context.target.text && (getElementTextSignature(el, context.target.textMode === "static") === context.target.text || similarText(getElementTextSignature(el, context.target.textMode === "static"), context.target.text))));
-      return { element: null, status: plausible ? "uncertain" : "missing" };
-    }
-
-    function resolveByAnchorContext(context) {
-      return resolveAnchor(context).element;
-    }
-
-    function getViewportBounds() {
-      const viewport = window.visualViewport;
-      if (!viewport) {
-        return {
-          left: 0,
-          top: 0,
-          right: window.innerWidth,
-          bottom: window.innerHeight,
-        };
-      }
-
-      return {
-        left: viewport.offsetLeft,
-        top: viewport.offsetTop,
-        right: viewport.offsetLeft + viewport.width,
-        bottom: viewport.offsetTop + viewport.height,
-      };
-    }
-
-    function isElementTreeHidden(el) {
-      let current = el;
-      while (current instanceof Element) {
-        if (!current.isConnected) return true;
-        if (current.hasAttribute("hidden")) return true;
-        if (current.hasAttribute("inert")) return true;
-        if (current.getAttribute("aria-hidden") === "true") {
-          return true;
-        }
-
-        const style = getComputedStyle(current);
-        if (style.display === "none") return true;
-        if (style.visibility === "hidden" || style.visibility === "collapse") {
+      const clipsY = ["auto", "scroll", "hidden", "clip"].includes(
+        style.overflowY,
+      );
+      if (clipsX || clipsY) {
+        const rect = ancestor.getBoundingClientRect();
+        if (clipsX && (x < rect.left || x > rect.right)) {
           return true;
         }
-        if (Number.parseFloat(style.opacity) <= 0.01) return true;
-        if (style.contentVisibility === "hidden") {
+        if (clipsY && (y < rect.top || y > rect.bottom)) {
           return true;
         }
-
-        if (
-          current.tagName === "DETAILS" &&
-          !current.hasAttribute("open")
-        ) {
-          const summary = current.querySelector(":scope > summary");
-          if (!summary || !summary.contains(el)) return true;
-        }
-
-        current = current.parentElement;
       }
-      return false;
+      ancestor = ancestor.parentElement;
     }
+    return false;
+  }
 
-    function pointIsInsideRect(x, y, rect) {
-      return (
-        x >= rect.left &&
-        x < rect.right &&
-        y >= rect.top &&
-        y < rect.bottom
-      );
-    }
-
-    function isPointClipped(el, x, y) {
-      let ancestor = el.parentElement;
-      while (
-        ancestor &&
-        ancestor !== document.body &&
-        ancestor !== document.documentElement
-      ) {
-        const style = getComputedStyle(ancestor);
-        const clipsX = ["auto", "scroll", "hidden", "clip"].includes(
-          style.overflowX,
-        );
-        const clipsY = ["auto", "scroll", "hidden", "clip"].includes(
-          style.overflowY,
-        );
-        if (clipsX || clipsY) {
-          const rect = ancestor.getBoundingClientRect();
-          if (clipsX && (x < rect.left || x > rect.right)) {
-            return true;
-          }
-          if (clipsY && (y < rect.top || y > rect.bottom)) {
-            return true;
-          }
-        }
-        ancestor = ancestor.parentElement;
-      }
-      return false;
+  function getTopActiveModal() {
+    const modals = [...document.querySelectorAll('[aria-modal="true"]')];
+    try {
+      modals.push(...document.querySelectorAll("dialog:modal"));
+    } catch {
+      modals.push(...document.querySelectorAll("dialog[open]"));
     }
-
-    function getTopActiveModal() {
-      const modals = [...document.querySelectorAll('[aria-modal="true"]')];
-      try {
-        modals.push(...document.querySelectorAll("dialog:modal"));
-      } catch {
-        modals.push(...document.querySelectorAll("dialog[open]"));
-      }
-      const visibleModals = [...new Set(modals)].filter(
-        (modal) => {
-          if (isComtyNode(modal)) return false;
-          const rect = modal.getBoundingClientRect();
-          if (rect.width < 0.1 || rect.height < 0.1) return false;
-          const viewport = getViewportBounds();
-          if (
-            rect.right <= viewport.left ||
-            rect.left >= viewport.right ||
-            rect.bottom <= viewport.top ||
-            rect.top >= viewport.bottom
-          ) {
-            return false;
-          }
-          return !isElementTreeHidden(modal);
-        },
-      );
-
-      return (
-        visibleModals.sort((a, b) => {
-          const aZIndex = Number.parseFloat(getComputedStyle(a).zIndex) || 0;
-          const bZIndex = Number.parseFloat(getComputedStyle(b).zIndex) || 0;
-          if (aZIndex !== bZIndex) return aZIndex - bZIndex;
-          return a.compareDocumentPosition(b) &
-            Node.DOCUMENT_POSITION_FOLLOWING
-            ? -1
-            : 1;
-        })[visibleModals.length - 1] || null
-      );
-    }
-
-    function getOccludingElement(el, x, y) {
-      const stack = document
-        .elementsFromPoint(x, y)
-        .filter((candidate) => !isComtyNode(candidate));
-      const top = stack[0];
-      if (!top) return null;
-      if (top === el || el.contains(top) || top.contains(el)) return null;
-      return top;
-    }
-
-    function getVisibleAnchorPoint(el, relX, relY, activeModal) {
-      if (!el || !Number.isFinite(relX) || !Number.isFinite(relY) || isElementTreeHidden(el)) return null;
-
-      const rect = el.getBoundingClientRect();
-      if (rect.width < 0.1 || rect.height < 0.1) {
-        return null;
-      }
-
-      const clientX = Math.min(
-        Math.max(rect.left + relX * rect.width, rect.left + 0.01),
-        rect.right - 0.01,
-      );
-      const clientY = Math.min(
-        Math.max(rect.top + relY * rect.height, rect.top + 0.01),
-        rect.bottom - 0.01,
-      );
+    const visibleModals = [...new Set(modals)].filter((modal) => {
+      if (isComtyNode(modal)) return false;
+      const rect = modal.getBoundingClientRect();
+      if (rect.width < 0.1 || rect.height < 0.1) return false;
       const viewport = getViewportBounds();
-      if (!pointIsInsideRect(clientX, clientY, viewport)) {
-        return null;
-      }
-
-      if (isPointClipped(el, clientX, clientY)) return null;
-
-      if (activeModal && !activeModal.contains(el)) {
-        return null;
-      }
-
-      if (getOccludingElement(el, clientX, clientY)) return null;
-
-      return { clientX, clientY };
-    }
-
-    return { getStableAnchorId, matchesAnchorContext, resolveAnchor, resolveByAnchorContext, isElementTreeHidden, getTopActiveModal, getVisibleAnchorPoint };
+      if (
+        rect.right <= viewport.left ||
+        rect.left >= viewport.right ||
+        rect.bottom <= viewport.top ||
+        rect.top >= viewport.bottom
+      ) {
+        return false;
+      }
+      return !isElementTreeHidden(modal);
+    });
+
+    return (
+      visibleModals.sort((a, b) => {
+        const aZIndex = Number.parseFloat(getComputedStyle(a).zIndex) || 0;
+        const bZIndex = Number.parseFloat(getComputedStyle(b).zIndex) || 0;
+        if (aZIndex !== bZIndex) return aZIndex - bZIndex;
+        return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
+          ? -1
+          : 1;
+      })[visibleModals.length - 1] || null
+    );
+  }
+
+  function getOccludingElement(el, x, y) {
+    const stack = document
+      .elementsFromPoint(x, y)
+      .filter((candidate) => !isComtyNode(candidate));
+    const top = stack[0];
+    if (!top) return null;
+    if (top === el || el.contains(top) || top.contains(el)) return null;
+    return top;
+  }
+
+  function getVisibleAnchorPoint(el, relX, relY, activeModal) {
+    if (
+      !el ||
+      !Number.isFinite(relX) ||
+      !Number.isFinite(relY) ||
+      isElementTreeHidden(el)
+    )
+      return null;
+
+    const rect = el.getBoundingClientRect();
+    if (rect.width < 0.1 || rect.height < 0.1) {
+      return null;
+    }
+
+    const clientX = Math.min(
+      Math.max(rect.left + relX * rect.width, rect.left + 0.01),
+      rect.right - 0.01,
+    );
+    const clientY = Math.min(
+      Math.max(rect.top + relY * rect.height, rect.top + 0.01),
+      rect.bottom - 0.01,
+    );
+    const viewport = getViewportBounds();
+    if (!pointIsInsideRect(clientX, clientY, viewport)) {
+      return null;
+    }
+
+    if (isPointClipped(el, clientX, clientY)) return null;
+
+    if (activeModal && !activeModal.contains(el)) {
+      return null;
+    }
+
+    if (getOccludingElement(el, clientX, clientY)) return null;
+
+    return { clientX, clientY };
+  }
+
+  return {
+    captureResilientAnchor: resilient.capture,
+    getStableAnchorId,
+    resolveAnchor,
+    isElementTreeHidden,
+    getTopActiveModal,
+    getVisibleAnchorPoint,
+  };
 }