react-grab 0.0.9 → 0.0.11

package/dist/index.global.js

@@ -10,6 +10,204 @@ var ReactGrab = (function (exports) {
    * LICENSE file in the root directory of this source tree.
    */
 
+  // src/overlay.ts
+  var lerp = (start, end, factor) => {
+    return start + (end - start) * factor;
+  };
+  var SELECTION_LERP_FACTOR = 0.99;
+  var createSelectionElement = ({
+    borderRadius,
+    height,
+    transform,
+    width,
+    x,
+    y
+  }) => {
+    const overlay = document.createElement("div");
+    overlay.style.position = "fixed";
+    overlay.style.top = `${y}px`;
+    overlay.style.left = `${x}px`;
+    overlay.style.width = `${width}px`;
+    overlay.style.height = `${height}px`;
+    overlay.style.borderRadius = borderRadius;
+    overlay.style.transform = transform;
+    overlay.style.pointerEvents = "none";
+    overlay.style.border = "2px solid #007AFF";
+    overlay.style.backgroundColor = "rgba(0, 122, 255, 0.1)";
+    overlay.style.zIndex = "2147483646";
+    overlay.style.boxSizing = "border-box";
+    overlay.style.display = "none";
+    overlay.animate(
+      [
+        { backgroundColor: "rgba(0, 122, 255, 0.1)" },
+        { backgroundColor: "rgba(0, 122, 255, 0.15)" },
+        { backgroundColor: "rgba(0, 122, 255, 0.1)" }
+      ],
+      {
+        duration: 2e3,
+        easing: "ease-in-out",
+        iterations: Infinity
+      }
+    );
+    return overlay;
+  };
+  var updateSelectionElement = (element, { borderRadius, height, transform, width, x, y }) => {
+    const currentTop = parseFloat(element.style.top) || 0;
+    const currentLeft = parseFloat(element.style.left) || 0;
+    const currentWidth = parseFloat(element.style.width) || 0;
+    const currentHeight = parseFloat(element.style.height) || 0;
+    const topValue = `${lerp(currentTop, y, SELECTION_LERP_FACTOR)}px`;
+    const leftValue = `${lerp(currentLeft, x, SELECTION_LERP_FACTOR)}px`;
+    const widthValue = `${lerp(currentWidth, width, SELECTION_LERP_FACTOR)}px`;
+    const heightValue = `${lerp(currentHeight, height, SELECTION_LERP_FACTOR)}px`;
+    if (element.style.top !== topValue) {
+      element.style.top = topValue;
+    }
+    if (element.style.left !== leftValue) {
+      element.style.left = leftValue;
+    }
+    if (element.style.width !== widthValue) {
+      element.style.width = widthValue;
+    }
+    if (element.style.height !== heightValue) {
+      element.style.height = heightValue;
+    }
+    if (element.style.borderRadius !== borderRadius) {
+      element.style.borderRadius = borderRadius;
+    }
+    if (element.style.transform !== transform) {
+      element.style.transform = transform;
+    }
+  };
+  var SelectionOverlay = class {
+    element;
+    visible = false;
+    constructor(root) {
+      this.element = createSelectionElement({
+        borderRadius: "0px",
+        height: 0,
+        transform: "none",
+        width: 0,
+        x: -1e3,
+        y: -1e3
+      });
+      root.appendChild(this.element);
+    }
+    hide() {
+      this.visible = false;
+      this.element.style.display = "none";
+      this.element.style.pointerEvents = "none";
+    }
+    isVisible() {
+      return this.visible;
+    }
+    show() {
+      this.visible = true;
+      this.element.style.display = "block";
+      this.element.style.pointerEvents = "auto";
+    }
+    update(selection) {
+      updateSelectionElement(this.element, selection);
+    }
+  };
+  var createSpinner = () => {
+    const spinner = document.createElement("span");
+    spinner.style.display = "inline-block";
+    spinner.style.width = "8px";
+    spinner.style.height = "8px";
+    spinner.style.border = "1.5px solid #1e4ed8";
+    spinner.style.borderTopColor = "transparent";
+    spinner.style.borderRadius = "50%";
+    spinner.style.marginRight = "4px";
+    spinner.style.verticalAlign = "middle";
+    spinner.animate(
+      [
+        { transform: "rotate(0deg)" },
+        { transform: "rotate(360deg)" }
+      ],
+      {
+        duration: 600,
+        easing: "linear",
+        iterations: Infinity
+      }
+    );
+    return spinner;
+  };
+  var createIndicator = (x, y) => {
+    const indicator = document.createElement("div");
+    indicator.style.position = "fixed";
+    indicator.style.left = `${x}px`;
+    indicator.style.top = `${y - 4}px`;
+    indicator.style.transform = "translateY(-100%)";
+    indicator.style.padding = "0px 4px";
+    indicator.style.backgroundColor = "#dbeafe";
+    indicator.style.color = "#1e4ed8";
+    indicator.style.border = "1px solid #c7dbfb";
+    indicator.style.borderRadius = "4px";
+    indicator.style.fontSize = "11px";
+    indicator.style.fontWeight = "500";
+    indicator.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+    indicator.style.zIndex = "2147483647";
+    indicator.style.pointerEvents = "none";
+    indicator.style.opacity = "0";
+    indicator.style.transition = "opacity 0.2s ease-in-out";
+    indicator.style.display = "flex";
+    indicator.style.alignItems = "center";
+    return indicator;
+  };
+  var showCopyIndicator = (x, y) => {
+    const indicator = createIndicator(x, y);
+    const spinner = createSpinner();
+    const text = document.createElement("span");
+    text.textContent = "Copying\u2026";
+    indicator.appendChild(spinner);
+    indicator.appendChild(text);
+    document.body.appendChild(indicator);
+    requestAnimationFrame(() => {
+      indicator.style.opacity = "1";
+    });
+    return () => {
+      spinner.remove();
+      text.textContent = "Copied!";
+      setTimeout(() => {
+        indicator.style.opacity = "0";
+        setTimeout(() => {
+          document.body.removeChild(indicator);
+        }, 200);
+      }, 1500);
+    };
+  };
+
+  // src/utils/copy-text.ts
+  var copyText = async (text) => {
+    if (navigator.clipboard && window.isSecureContext) {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch {
+      }
+    }
+    const textareaEl = document.createElement("textarea");
+    textareaEl.value = text;
+    textareaEl.setAttribute("readonly", "");
+    textareaEl.style.position = "fixed";
+    textareaEl.style.top = "-9999px";
+    textareaEl.style.opacity = "0";
+    textareaEl.style.pointerEvents = "none";
+    document.body.appendChild(textareaEl);
+    textareaEl.select();
+    textareaEl.setSelectionRange(0, textareaEl.value.length);
+    let didCopy = false;
+    try {
+      didCopy = document.execCommand("copy");
+    } catch {
+      didCopy = false;
+    } finally {
+      document.body.removeChild(textareaEl);
+    }
+    return didCopy;
+  };
+
   // node_modules/.pnpm/bippy@0.3.31_@types+react@19.2.2_react@19.2.0/node_modules/bippy/dist/src-R2iEnVC1.js
   var version = "0.3.31";
   var BIPPY_INSTRUMENTATION_STRING = `bippy-${version}`;
@@ -1983,7 +2181,7 @@ ${error.stack}`;
     return matches;
   };
 
-  // src/core.ts
+  // src/utils/data.ts
   var getStack = async (element) => {
     const fiber = getFiberFromHostInstance(element);
     if (!fiber) return null;
@@ -2225,172 +2423,6 @@ ${error.stack}`;
     return lines.join("\n");
   };
 
-  // src/overlay.ts
-  var createSelection = ({
-    borderRadius,
-    height,
-    transform,
-    width,
-    x,
-    y
-  }) => {
-    const overlay = document.createElement("div");
-    overlay.style.position = "fixed";
-    overlay.style.top = `${y}px`;
-    overlay.style.left = `${x}px`;
-    overlay.style.width = `${width}px`;
-    overlay.style.height = `${height}px`;
-    overlay.style.borderRadius = borderRadius;
-    overlay.style.transform = transform;
-    overlay.style.pointerEvents = "none";
-    overlay.style.border = "2px solid #007AFF";
-    overlay.style.backgroundColor = "rgba(0, 122, 255, 0.1)";
-    overlay.style.zIndex = "2147483646";
-    overlay.style.boxSizing = "border-box";
-    overlay.animate(
-      [
-        { backgroundColor: "rgba(0, 122, 255, 0.1)" },
-        { backgroundColor: "rgba(0, 122, 255, 0.15)" },
-        { backgroundColor: "rgba(0, 122, 255, 0.1)" }
-      ],
-      {
-        duration: 2e3,
-        easing: "ease-in-out",
-        iterations: Infinity
-      }
-    );
-    return overlay;
-  };
-  var lerp = (start, end, factor) => {
-    return start + (end - start) * factor;
-  };
-  var SELECTION_LERP_FACTOR = 1;
-  var updateSelection = (element, { borderRadius, height, transform, width, x, y }) => {
-    const currentTop = parseFloat(element.style.top) || 0;
-    const currentLeft = parseFloat(element.style.left) || 0;
-    const currentWidth = parseFloat(element.style.width) || 0;
-    const currentHeight = parseFloat(element.style.height) || 0;
-    const topValue = `${lerp(currentTop, y, SELECTION_LERP_FACTOR)}px`;
-    const leftValue = `${lerp(currentLeft, x, SELECTION_LERP_FACTOR)}px`;
-    const widthValue = `${lerp(currentWidth, width, SELECTION_LERP_FACTOR)}px`;
-    const heightValue = `${lerp(currentHeight, height, SELECTION_LERP_FACTOR)}px`;
-    if (element.style.top !== topValue) {
-      element.style.top = topValue;
-    }
-    if (element.style.left !== leftValue) {
-      element.style.left = leftValue;
-    }
-    if (element.style.width !== widthValue) {
-      element.style.width = widthValue;
-    }
-    if (element.style.height !== heightValue) {
-      element.style.height = heightValue;
-    }
-    if (element.style.borderRadius !== borderRadius) {
-      element.style.borderRadius = borderRadius;
-    }
-    if (element.style.transform !== transform) {
-      element.style.transform = transform;
-    }
-  };
-  var createSpinner = () => {
-    const spinner = document.createElement("span");
-    spinner.style.display = "inline-block";
-    spinner.style.width = "8px";
-    spinner.style.height = "8px";
-    spinner.style.border = "1.5px solid #1e4ed8";
-    spinner.style.borderTopColor = "transparent";
-    spinner.style.borderRadius = "50%";
-    spinner.style.marginRight = "4px";
-    spinner.style.verticalAlign = "middle";
-    spinner.animate(
-      [
-        { transform: "rotate(0deg)" },
-        { transform: "rotate(360deg)" }
-      ],
-      {
-        duration: 600,
-        easing: "linear",
-        iterations: Infinity
-      }
-    );
-    return spinner;
-  };
-  var createIndicator = (x, y) => {
-    const indicator = document.createElement("div");
-    indicator.style.position = "fixed";
-    indicator.style.left = `${x}px`;
-    indicator.style.top = `${y - 4}px`;
-    indicator.style.transform = "translateY(-100%)";
-    indicator.style.padding = "0px 4px";
-    indicator.style.backgroundColor = "#dbeafe";
-    indicator.style.color = "#1e4ed8";
-    indicator.style.border = "1px solid #c7dbfb";
-    indicator.style.borderRadius = "4px";
-    indicator.style.fontSize = "11px";
-    indicator.style.fontWeight = "500";
-    indicator.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-    indicator.style.zIndex = "2147483647";
-    indicator.style.pointerEvents = "none";
-    indicator.style.opacity = "0";
-    indicator.style.transition = "opacity 0.2s ease-in-out";
-    indicator.style.display = "flex";
-    indicator.style.alignItems = "center";
-    return indicator;
-  };
-  var showCopyIndicator = (x, y) => {
-    const indicator = createIndicator(x, y);
-    const spinner = createSpinner();
-    const text = document.createElement("span");
-    text.textContent = "Copying\u2026";
-    indicator.appendChild(spinner);
-    indicator.appendChild(text);
-    document.body.appendChild(indicator);
-    requestAnimationFrame(() => {
-      indicator.style.opacity = "1";
-    });
-    return () => {
-      spinner.remove();
-      text.textContent = "Copied!";
-      setTimeout(() => {
-        indicator.style.opacity = "0";
-        setTimeout(() => {
-          document.body.removeChild(indicator);
-        }, 200);
-      }, 1500);
-    };
-  };
-
-  // src/utils/copy-text.ts
-  var copyText = async (text) => {
-    if (navigator.clipboard && window.isSecureContext) {
-      try {
-        await navigator.clipboard.writeText(text);
-        return true;
-      } catch {
-      }
-    }
-    const textareaEl = document.createElement("textarea");
-    textareaEl.value = text;
-    textareaEl.setAttribute("readonly", "");
-    textareaEl.style.position = "fixed";
-    textareaEl.style.top = "-9999px";
-    textareaEl.style.opacity = "0";
-    textareaEl.style.pointerEvents = "none";
-    document.body.appendChild(textareaEl);
-    textareaEl.select();
-    textareaEl.setSelectionRange(0, textareaEl.value.length);
-    let didCopy = false;
-    try {
-      didCopy = document.execCommand("copy");
-    } catch {
-      didCopy = false;
-    } finally {
-      document.body.removeChild(textareaEl);
-    }
-    return didCopy;
-  };
-
   // src/utils/is-element-visible.ts
   var isElementVisible = (element, computedStyle = null) => {
     if (!computedStyle) {
@@ -2468,25 +2500,15 @@ ${error.stack}`;
     const root = mountRoot();
     let mouseX = 0;
     let mouseY = 0;
-    let isSelectionVisible = false;
     let shiftKeyTimeout = null;
     let currentHoveredElement = null;
     const isFocusedInInput = () => {
       const active = document.activeElement;
       return active?.tagName === "INPUT" || active?.tagName === "TEXTAREA";
     };
-    const currentSelection = createSelection({
-      borderRadius: "0px",
-      height: 0,
-      transform: "none",
-      width: 0,
-      x: -1e3,
-      y: -1e3
-    });
-    currentSelection.style.display = "none";
-    root.appendChild(currentSelection);
+    const selectionOverlay = new SelectionOverlay(root);
     const render = () => {
-      if (!isSelectionVisible) return;
+      if (!selectionOverlay.isVisible()) return;
       const element = document.elementsFromPoint(mouseX, mouseY).filter((element2) => !element2.hasAttribute(ATTRIBUTE_NAME))[0];
       if (!element) {
         currentHoveredElement = null;
@@ -2496,7 +2518,7 @@ ${error.stack}`;
       if (!isElementVisible(element, computedStyle)) return;
       const rect = element.getBoundingClientRect();
       currentHoveredElement = element;
-      updateSelection(currentSelection, {
+      selectionOverlay.update({
         borderRadius: computedStyle.borderRadius,
         height: rect.height,
         transform: computedStyle.transform,
@@ -2536,14 +2558,21 @@ ${error.stack}`;
           window.clearTimeout(shiftKeyTimeout);
         }
         shiftKeyTimeout = window.setTimeout(() => {
-          isSelectionVisible = true;
-          currentSelection.style.display = "block";
-          currentSelection.style.pointerEvents = "auto";
+          selectionOverlay.show();
           throttledRender();
         }, 200);
       }
+      if (event.key === "Escape") {
+        if (selectionOverlay.isVisible()) {
+          selectionOverlay.hide();
+          if (shiftKeyTimeout !== null) {
+            window.clearTimeout(shiftKeyTimeout);
+            shiftKeyTimeout = null;
+          }
+        }
+      }
       if ((event.key === "c" || event.key === "C") && event.metaKey) {
-        if (isSelectionVisible && currentHoveredElement) {
+        if (selectionOverlay.isVisible() && currentHoveredElement) {
           event.preventDefault();
           event.stopPropagation();
           event.stopImmediatePropagation();
@@ -2572,7 +2601,7 @@ ${htmlSnippet}`;
     });
     window.addEventListener("mousedown", (event) => {
       if (event.button !== 0) return;
-      if (isSelectionVisible) {
+      if (selectionOverlay.isVisible()) {
         event.preventDefault();
         event.stopPropagation();
         event.stopImmediatePropagation();
@@ -2609,11 +2638,8 @@ Path: ${window.location.pathname}`;
           window.clearTimeout(shiftKeyTimeout);
           shiftKeyTimeout = null;
         }
+        selectionOverlay.hide();
       }
-      currentSelection.style.display = "none";
-      currentSelection.style.pointerEvents = "none";
-      isSelectionVisible = false;
-      throttledRender();
     });
     return () => {
       if (timeout) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grab",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/aidenybai/react-grab#readme",

package/dist/core.cjs

@@ -1,259 +0,0 @@
-'use strict';
-
-var bippy = require('bippy');
-var source = require('bippy/dist/source');
-
-/**
- * @license MIT
- *
- * Copyright (c) 2025 Aiden Bai
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var getStack = async (element) => {
-  const fiber = bippy.getFiberFromHostInstance(element);
-  if (!fiber) return null;
-  const stackTrace = source.getFiberStackTrace(fiber);
-  console.log(stackTrace);
-  const rawOwnerStack = await source.getOwnerStack(stackTrace);
-  console.log(rawOwnerStack);
-  const stack = rawOwnerStack.map((item) => ({
-    componentName: item.name,
-    fileName: item.source?.fileName
-  }));
-  return stack;
-};
-var filterStack = (stack) => {
-  return stack.filter(
-    (item) => item.fileName && !item.fileName.includes("node_modules") && item.componentName.length > 1 && !item.fileName.startsWith("_")
-  );
-};
-var findCommonRoot = (paths) => {
-  if (paths.length === 0) return "";
-  if (paths.length === 1) {
-    const lastSlash2 = paths[0].lastIndexOf("/");
-    return lastSlash2 > 0 ? paths[0].substring(0, lastSlash2 + 1) : "";
-  }
-  let commonPrefix = paths[0];
-  for (let i = 1; i < paths.length; i++) {
-    const path = paths[i];
-    let j = 0;
-    while (j < commonPrefix.length && j < path.length && commonPrefix[j] === path[j]) {
-      j++;
-    }
-    commonPrefix = commonPrefix.substring(0, j);
-  }
-  const lastSlash = commonPrefix.lastIndexOf("/");
-  return lastSlash > 0 ? commonPrefix.substring(0, lastSlash + 1) : "";
-};
-var serializeStack = (stack) => {
-  const filePaths = stack.map((item) => item.fileName).filter((path) => !!path);
-  const commonRoot = findCommonRoot(filePaths);
-  return stack.map((item) => {
-    let fileName = item.fileName;
-    if (fileName && commonRoot) {
-      fileName = fileName.startsWith(commonRoot) ? fileName.substring(commonRoot.length) : fileName;
-    }
-    return `${item.componentName}${fileName ? ` (${fileName})` : ""}`;
-  }).join("\n");
-};
-var getHTMLSnippet = (element) => {
-  const semanticTags = /* @__PURE__ */ new Set([
-    "article",
-    "aside",
-    "footer",
-    "form",
-    "header",
-    "main",
-    "nav",
-    "section"
-  ]);
-  const hasDistinguishingFeatures = (el) => {
-    const tagName = el.tagName.toLowerCase();
-    if (semanticTags.has(tagName)) return true;
-    if (el.id) return true;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim();
-      if (classes && classes.length > 0) return true;
-    }
-    return Array.from(el.attributes).some(
-      (attr) => attr.name.startsWith("data-")
-    );
-  };
-  const getAncestorChain = (el, maxDepth = 10) => {
-    const ancestors2 = [];
-    let current = el.parentElement;
-    let depth = 0;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      if (hasDistinguishingFeatures(current)) {
-        ancestors2.push(current);
-        if (ancestors2.length >= 3) break;
-      }
-      current = current.parentElement;
-      depth++;
-    }
-    return ancestors2.reverse();
-  };
-  const getCSSPath = (el) => {
-    const parts = [];
-    let current = el;
-    let depth = 0;
-    const maxDepth = 5;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      let selector = current.tagName.toLowerCase();
-      if (current.id) {
-        selector += `#${current.id}`;
-        parts.unshift(selector);
-        break;
-      } else if (current.className && typeof current.className === "string" && current.className.trim()) {
-        const classes = current.className.trim().split(/\s+/).slice(0, 2);
-        selector += `.${classes.join(".")}`;
-      }
-      if (!current.id && (!current.className || !current.className.trim()) && current.parentElement) {
-        const siblings = Array.from(current.parentElement.children);
-        const index = siblings.indexOf(current);
-        if (index >= 0 && siblings.length > 1) {
-          selector += `:nth-child(${index + 1})`;
-        }
-      }
-      parts.unshift(selector);
-      current = current.parentElement;
-      depth++;
-    }
-    return parts.join(" > ");
-  };
-  const getElementTag = (el, compact = false) => {
-    const tagName = el.tagName.toLowerCase();
-    const attrs = [];
-    if (el.id) {
-      attrs.push(`id="${el.id}"`);
-    }
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        const displayClasses = compact ? classes.slice(0, 3) : classes;
-        let classStr = displayClasses.join(" ");
-        if (classStr.length > 30) {
-          classStr = classStr.substring(0, 30) + "...";
-        }
-        attrs.push(`class="${classStr}"`);
-      }
-    }
-    const dataAttrs = Array.from(el.attributes).filter(
-      (attr) => attr.name.startsWith("data-")
-    );
-    const displayDataAttrs = compact ? dataAttrs.slice(0, 1) : dataAttrs;
-    for (const attr of displayDataAttrs) {
-      let value = attr.value;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`${attr.name}="${value}"`);
-    }
-    const ariaLabel = el.getAttribute("aria-label");
-    if (ariaLabel && !compact) {
-      let value = ariaLabel;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`aria-label="${value}"`);
-    }
-    return attrs.length > 0 ? `<${tagName} ${attrs.join(" ")}>` : `<${tagName}>`;
-  };
-  const getClosingTag = (el) => {
-    return `</${el.tagName.toLowerCase()}>`;
-  };
-  const getTextContent = (el) => {
-    let text = el.textContent || "";
-    text = text.trim().replace(/\s+/g, " ");
-    const maxLength = 60;
-    if (text.length > maxLength) {
-      text = text.substring(0, maxLength) + "...";
-    }
-    return text;
-  };
-  const getSiblingIdentifier = (el) => {
-    if (el.id) return `#${el.id}`;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        return `.${classes[0]}`;
-      }
-    }
-    return null;
-  };
-  const lines = [];
-  lines.push(`Path: ${getCSSPath(element)}`);
-  lines.push("");
-  const ancestors = getAncestorChain(element);
-  for (let i = 0; i < ancestors.length; i++) {
-    const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getElementTag(ancestors[i], true));
-  }
-  const parent = element.parentElement;
-  let targetIndex = -1;
-  if (parent) {
-    const siblings = Array.from(parent.children);
-    targetIndex = siblings.indexOf(element);
-    if (targetIndex > 0) {
-      const prevSibling = siblings[targetIndex - 1];
-      const prevId = getSiblingIdentifier(prevSibling);
-      if (prevId && targetIndex <= 2) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ${getElementTag(prevSibling, true)}`);
-        lines.push(`${indent2}  </${prevSibling.tagName.toLowerCase()}>`);
-      } else if (targetIndex > 0) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`);
-      }
-    }
-  }
-  const indent = "  ".repeat(ancestors.length);
-  lines.push(indent + "  <!-- SELECTED -->");
-  const textContent = getTextContent(element);
-  const childrenCount = element.children.length;
-  if (textContent && childrenCount === 0 && textContent.length < 40) {
-    lines.push(
-      `${indent}  ${getElementTag(element)}${textContent}${getClosingTag(element)}`
-    );
-  } else {
-    lines.push(indent + "  " + getElementTag(element));
-    if (textContent) {
-      lines.push(`${indent}    ${textContent}`);
-    }
-    if (childrenCount > 0) {
-      lines.push(
-        `${indent}    ... (${childrenCount} element${childrenCount === 1 ? "" : "s"})`
-      );
-    }
-    lines.push(indent + "  " + getClosingTag(element));
-  }
-  if (parent && targetIndex >= 0) {
-    const siblings = Array.from(parent.children);
-    const siblingsAfter = siblings.length - targetIndex - 1;
-    if (siblingsAfter > 0) {
-      const nextSibling = siblings[targetIndex + 1];
-      const nextId = getSiblingIdentifier(nextSibling);
-      if (nextId && siblingsAfter <= 2) {
-        lines.push(`${indent}  ${getElementTag(nextSibling, true)}`);
-        lines.push(`${indent}  </${nextSibling.tagName.toLowerCase()}>`);
-      } else {
-        lines.push(
-          `${indent}  ... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
-        );
-      }
-    }
-  }
-  for (let i = ancestors.length - 1; i >= 0; i--) {
-    const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getClosingTag(ancestors[i]));
-  }
-  return lines.join("\n");
-};
-
-exports.filterStack = filterStack;
-exports.getHTMLSnippet = getHTMLSnippet;
-exports.getStack = getStack;
-exports.serializeStack = serializeStack;

package/dist/core.d.cts

@@ -1,10 +0,0 @@
-interface StackItem {
-    componentName: string;
-    fileName: string | undefined;
-}
-declare const getStack: (element: Element) => Promise<StackItem[] | null>;
-declare const filterStack: (stack: StackItem[]) => StackItem[];
-declare const serializeStack: (stack: StackItem[]) => string;
-declare const getHTMLSnippet: (element: Element) => string;
-
-export { type StackItem, filterStack, getHTMLSnippet, getStack, serializeStack };

package/dist/core.d.ts

@@ -1,10 +0,0 @@
-interface StackItem {
-    componentName: string;
-    fileName: string | undefined;
-}
-declare const getStack: (element: Element) => Promise<StackItem[] | null>;
-declare const filterStack: (stack: StackItem[]) => StackItem[];
-declare const serializeStack: (stack: StackItem[]) => string;
-declare const getHTMLSnippet: (element: Element) => string;
-
-export { type StackItem, filterStack, getHTMLSnippet, getStack, serializeStack };

package/dist/core.js

@@ -1,254 +0,0 @@
-import { getFiberFromHostInstance } from 'bippy';
-import { getFiberStackTrace, getOwnerStack } from 'bippy/dist/source';
-
-/**
- * @license MIT
- *
- * Copyright (c) 2025 Aiden Bai
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var getStack = async (element) => {
-  const fiber = getFiberFromHostInstance(element);
-  if (!fiber) return null;
-  const stackTrace = getFiberStackTrace(fiber);
-  console.log(stackTrace);
-  const rawOwnerStack = await getOwnerStack(stackTrace);
-  console.log(rawOwnerStack);
-  const stack = rawOwnerStack.map((item) => ({
-    componentName: item.name,
-    fileName: item.source?.fileName
-  }));
-  return stack;
-};
-var filterStack = (stack) => {
-  return stack.filter(
-    (item) => item.fileName && !item.fileName.includes("node_modules") && item.componentName.length > 1 && !item.fileName.startsWith("_")
-  );
-};
-var findCommonRoot = (paths) => {
-  if (paths.length === 0) return "";
-  if (paths.length === 1) {
-    const lastSlash2 = paths[0].lastIndexOf("/");
-    return lastSlash2 > 0 ? paths[0].substring(0, lastSlash2 + 1) : "";
-  }
-  let commonPrefix = paths[0];
-  for (let i = 1; i < paths.length; i++) {
-    const path = paths[i];
-    let j = 0;
-    while (j < commonPrefix.length && j < path.length && commonPrefix[j] === path[j]) {
-      j++;
-    }
-    commonPrefix = commonPrefix.substring(0, j);
-  }
-  const lastSlash = commonPrefix.lastIndexOf("/");
-  return lastSlash > 0 ? commonPrefix.substring(0, lastSlash + 1) : "";
-};
-var serializeStack = (stack) => {
-  const filePaths = stack.map((item) => item.fileName).filter((path) => !!path);
-  const commonRoot = findCommonRoot(filePaths);
-  return stack.map((item) => {
-    let fileName = item.fileName;
-    if (fileName && commonRoot) {
-      fileName = fileName.startsWith(commonRoot) ? fileName.substring(commonRoot.length) : fileName;
-    }
-    return `${item.componentName}${fileName ? ` (${fileName})` : ""}`;
-  }).join("\n");
-};
-var getHTMLSnippet = (element) => {
-  const semanticTags = /* @__PURE__ */ new Set([
-    "article",
-    "aside",
-    "footer",
-    "form",
-    "header",
-    "main",
-    "nav",
-    "section"
-  ]);
-  const hasDistinguishingFeatures = (el) => {
-    const tagName = el.tagName.toLowerCase();
-    if (semanticTags.has(tagName)) return true;
-    if (el.id) return true;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim();
-      if (classes && classes.length > 0) return true;
-    }
-    return Array.from(el.attributes).some(
-      (attr) => attr.name.startsWith("data-")
-    );
-  };
-  const getAncestorChain = (el, maxDepth = 10) => {
-    const ancestors2 = [];
-    let current = el.parentElement;
-    let depth = 0;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      if (hasDistinguishingFeatures(current)) {
-        ancestors2.push(current);
-        if (ancestors2.length >= 3) break;
-      }
-      current = current.parentElement;
-      depth++;
-    }
-    return ancestors2.reverse();
-  };
-  const getCSSPath = (el) => {
-    const parts = [];
-    let current = el;
-    let depth = 0;
-    const maxDepth = 5;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      let selector = current.tagName.toLowerCase();
-      if (current.id) {
-        selector += `#${current.id}`;
-        parts.unshift(selector);
-        break;
-      } else if (current.className && typeof current.className === "string" && current.className.trim()) {
-        const classes = current.className.trim().split(/\s+/).slice(0, 2);
-        selector += `.${classes.join(".")}`;
-      }
-      if (!current.id && (!current.className || !current.className.trim()) && current.parentElement) {
-        const siblings = Array.from(current.parentElement.children);
-        const index = siblings.indexOf(current);
-        if (index >= 0 && siblings.length > 1) {
-          selector += `:nth-child(${index + 1})`;
-        }
-      }
-      parts.unshift(selector);
-      current = current.parentElement;
-      depth++;
-    }
-    return parts.join(" > ");
-  };
-  const getElementTag = (el, compact = false) => {
-    const tagName = el.tagName.toLowerCase();
-    const attrs = [];
-    if (el.id) {
-      attrs.push(`id="${el.id}"`);
-    }
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        const displayClasses = compact ? classes.slice(0, 3) : classes;
-        let classStr = displayClasses.join(" ");
-        if (classStr.length > 30) {
-          classStr = classStr.substring(0, 30) + "...";
-        }
-        attrs.push(`class="${classStr}"`);
-      }
-    }
-    const dataAttrs = Array.from(el.attributes).filter(
-      (attr) => attr.name.startsWith("data-")
-    );
-    const displayDataAttrs = compact ? dataAttrs.slice(0, 1) : dataAttrs;
-    for (const attr of displayDataAttrs) {
-      let value = attr.value;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`${attr.name}="${value}"`);
-    }
-    const ariaLabel = el.getAttribute("aria-label");
-    if (ariaLabel && !compact) {
-      let value = ariaLabel;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`aria-label="${value}"`);
-    }
-    return attrs.length > 0 ? `<${tagName} ${attrs.join(" ")}>` : `<${tagName}>`;
-  };
-  const getClosingTag = (el) => {
-    return `</${el.tagName.toLowerCase()}>`;
-  };
-  const getTextContent = (el) => {
-    let text = el.textContent || "";
-    text = text.trim().replace(/\s+/g, " ");
-    const maxLength = 60;
-    if (text.length > maxLength) {
-      text = text.substring(0, maxLength) + "...";
-    }
-    return text;
-  };
-  const getSiblingIdentifier = (el) => {
-    if (el.id) return `#${el.id}`;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        return `.${classes[0]}`;
-      }
-    }
-    return null;
-  };
-  const lines = [];
-  lines.push(`Path: ${getCSSPath(element)}`);
-  lines.push("");
-  const ancestors = getAncestorChain(element);
-  for (let i = 0; i < ancestors.length; i++) {
-    const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getElementTag(ancestors[i], true));
-  }
-  const parent = element.parentElement;
-  let targetIndex = -1;
-  if (parent) {
-    const siblings = Array.from(parent.children);
-    targetIndex = siblings.indexOf(element);
-    if (targetIndex > 0) {
-      const prevSibling = siblings[targetIndex - 1];
-      const prevId = getSiblingIdentifier(prevSibling);
-      if (prevId && targetIndex <= 2) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ${getElementTag(prevSibling, true)}`);
-        lines.push(`${indent2}  </${prevSibling.tagName.toLowerCase()}>`);
-      } else if (targetIndex > 0) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`);
-      }
-    }
-  }
-  const indent = "  ".repeat(ancestors.length);
-  lines.push(indent + "  <!-- SELECTED -->");
-  const textContent = getTextContent(element);
-  const childrenCount = element.children.length;
-  if (textContent && childrenCount === 0 && textContent.length < 40) {
-    lines.push(
-      `${indent}  ${getElementTag(element)}${textContent}${getClosingTag(element)}`
-    );
-  } else {
-    lines.push(indent + "  " + getElementTag(element));
-    if (textContent) {
-      lines.push(`${indent}    ${textContent}`);
-    }
-    if (childrenCount > 0) {
-      lines.push(
-        `${indent}    ... (${childrenCount} element${childrenCount === 1 ? "" : "s"})`
-      );
-    }
-    lines.push(indent + "  " + getClosingTag(element));
-  }
-  if (parent && targetIndex >= 0) {
-    const siblings = Array.from(parent.children);
-    const siblingsAfter = siblings.length - targetIndex - 1;
-    if (siblingsAfter > 0) {
-      const nextSibling = siblings[targetIndex + 1];
-      const nextId = getSiblingIdentifier(nextSibling);
-      if (nextId && siblingsAfter <= 2) {
-        lines.push(`${indent}  ${getElementTag(nextSibling, true)}`);
-        lines.push(`${indent}  </${nextSibling.tagName.toLowerCase()}>`);
-      } else {
-        lines.push(
-          `${indent}  ... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
-        );
-      }
-    }
-  }
-  for (let i = ancestors.length - 1; i >= 0; i--) {
-    const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getClosingTag(ancestors[i]));
-  }
-  return lines.join("\n");
-};
-
-export { filterStack, getHTMLSnippet, getStack, serializeStack };