react-grab 0.0.9 → 0.0.12

package/dist/index.global.js

@@ -10,6 +10,440 @@ var ReactGrab = (function (exports) {
    * LICENSE file in the root directory of this source tree.
    */
 
+  // src/hotkeys.ts
+  var FORM_TAGS_AND_ROLES = [
+    "input",
+    "textarea",
+    "select",
+    "searchbox",
+    "slider",
+    "spinbutton",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "radio",
+    "textbox"
+  ];
+  var isCustomElement = (element) => {
+    return Boolean(element.tagName) && !element.tagName.startsWith("-") && element.tagName.includes("-");
+  };
+  var isReadonlyArray = (value) => {
+    return Array.isArray(value);
+  };
+  var isHotkeyEnabledOnTagName = (event, enabledOnTags = false) => {
+    const { composed, target } = event;
+    let targetTagName;
+    let targetRole;
+    if (target instanceof HTMLElement && isCustomElement(target) && composed) {
+      const composedPath = event.composedPath();
+      const targetElement = composedPath[0];
+      if (targetElement instanceof HTMLElement) {
+        targetTagName = targetElement.tagName;
+        targetRole = targetElement.role;
+      }
+    } else if (target instanceof HTMLElement) {
+      targetTagName = target.tagName;
+      targetRole = target.role;
+    }
+    if (isReadonlyArray(enabledOnTags)) {
+      return Boolean(
+        targetTagName && enabledOnTags && enabledOnTags.some(
+          (tag) => typeof targetTagName === "string" && tag.toLowerCase() === targetTagName.toLowerCase() || tag === targetRole
+        )
+      );
+    }
+    return Boolean(targetTagName && enabledOnTags && enabledOnTags);
+  };
+  var isKeyboardEventTriggeredByInput = (event) => {
+    return isHotkeyEnabledOnTagName(event, FORM_TAGS_AND_ROLES);
+  };
+  var trackHotkeys = () => {
+    const handleKeyDown = (event) => {
+      if (isKeyboardEventTriggeredByInput(event)) {
+        return;
+      }
+      if (event.code === undefined) {
+        return;
+      }
+      libStore.setState((state) => {
+        const newTimestamps = new Map(state.keyPressTimestamps);
+        if (!state.pressedKeys.has(event.key)) {
+          newTimestamps.set(event.key, Date.now());
+        }
+        return {
+          ...state,
+          keyPressTimestamps: newTimestamps,
+          pressedKeys: /* @__PURE__ */ new Set([event.key, ...state.pressedKeys])
+        };
+      });
+    };
+    const handleKeyUp = (event) => {
+      if (event.code === undefined) {
+        return;
+      }
+      libStore.setState((state) => {
+        const newTimestamps = new Map(state.keyPressTimestamps);
+        newTimestamps.delete(event.key);
+        return {
+          ...state,
+          keyPressTimestamps: newTimestamps,
+          pressedKeys: new Set(
+            [...state.pressedKeys].filter((key) => key !== event.key)
+          )
+        };
+      });
+    };
+    const handleBlur = () => {
+      libStore.setState((state) => ({
+        ...state,
+        keyPressTimestamps: /* @__PURE__ */ new Map(),
+        pressedKeys: /* @__PURE__ */ new Set()
+      }));
+    };
+    const handleContextmenu = () => {
+      libStore.setState((state) => ({
+        ...state,
+        keyPressTimestamps: /* @__PURE__ */ new Map(),
+        pressedKeys: /* @__PURE__ */ new Set()
+      }));
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
+    window.addEventListener("contextmenu", handleContextmenu);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
+      window.removeEventListener("contextmenu", handleContextmenu);
+    };
+  };
+  var isKeyPressed = (key) => {
+    const { pressedKeys } = libStore.getState();
+    if (key.length === 1) {
+      return pressedKeys.has(key.toLowerCase()) || pressedKeys.has(key.toUpperCase());
+    }
+    return pressedKeys.has(key);
+  };
+  var watchKeyHeldFor = (key, duration, onHeld) => {
+    let timeoutId = null;
+    let unsubscribe = null;
+    const cleanup = () => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      if (unsubscribe !== null) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    };
+    const checkSingleKeyPressed = (keyToCheck, pressedKeys) => {
+      if (keyToCheck.length === 1) {
+        return pressedKeys.has(keyToCheck.toLowerCase()) || pressedKeys.has(keyToCheck.toUpperCase());
+      }
+      return pressedKeys.has(keyToCheck);
+    };
+    const checkAllKeysPressed = (pressedKeys) => {
+      if (Array.isArray(key)) {
+        return key.every((keyFromCombo) => checkSingleKeyPressed(keyFromCombo, pressedKeys));
+      }
+      return checkSingleKeyPressed(key, pressedKeys);
+    };
+    const getKeyFromTimestamps = (keyToFind, timestamps) => {
+      if (keyToFind.length === 1) {
+        return timestamps.get(keyToFind.toLowerCase()) || timestamps.get(keyToFind.toUpperCase());
+      }
+      return timestamps.get(keyToFind);
+    };
+    const getEarliestPressTime = (timestamps) => {
+      const keysToInspect = Array.isArray(key) ? key : [key];
+      let earliest;
+      for (const keyFromCombo of keysToInspect) {
+        const timestamp = getKeyFromTimestamps(keyFromCombo, timestamps);
+        if (timestamp === undefined) {
+          return undefined;
+        }
+        if (earliest === undefined || timestamp < earliest) {
+          earliest = timestamp;
+        }
+      }
+      return earliest;
+    };
+    const scheduleCallback = () => {
+      const state = libStore.getState();
+      const { keyPressTimestamps, pressedKeys } = state;
+      if (!checkAllKeysPressed(pressedKeys)) {
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        return;
+      }
+      const earliestPressTime = getEarliestPressTime(keyPressTimestamps);
+      if (earliestPressTime === undefined) {
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        return;
+      }
+      const elapsed = Date.now() - earliestPressTime;
+      const remaining = duration - elapsed;
+      if (remaining <= 0) {
+        onHeld();
+        cleanup();
+        return;
+      }
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => {
+        onHeld();
+        cleanup();
+      }, remaining);
+    };
+    unsubscribe = libStore.subscribe(
+      () => {
+        scheduleCallback();
+      },
+      (state) => state.pressedKeys
+    );
+    scheduleCallback();
+    return cleanup;
+  };
+
+  // src/overlay.ts
+  var VIEWPORT_MARGIN_PX = 8;
+  var LABEL_OFFSET_PX = 6;
+  var lerp = (start, end, factor) => {
+    return start + (end - start) * factor;
+  };
+  var SELECTION_LERP_FACTOR = 0.95;
+  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 = "1px solid rgb(210, 57, 192)";
+    overlay.style.backgroundColor = "rgba(210, 57, 192, 0.2)";
+    overlay.style.zIndex = "2147483646";
+    overlay.style.boxSizing = "border-box";
+    overlay.style.display = "none";
+    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 createSelectionOverlay = (root) => {
+    const element = createSelectionElement({
+      borderRadius: "0px",
+      height: 0,
+      transform: "none",
+      width: 0,
+      x: -1e3,
+      y: -1e3
+    });
+    root.appendChild(element);
+    let visible = false;
+    return {
+      hide: () => {
+        visible = false;
+        element.style.display = "none";
+        element.style.pointerEvents = "none";
+      },
+      isVisible: () => visible,
+      show: () => {
+        visible = true;
+        element.style.display = "block";
+        element.style.pointerEvents = "auto";
+      },
+      update: (selection) => {
+        updateSelectionElement(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 rgb(210, 57, 192)";
+    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 activeIndicator = null;
+  var createIndicator = () => {
+    const indicator = document.createElement("div");
+    indicator.style.position = "fixed";
+    indicator.style.top = "calc(8px + env(safe-area-inset-top))";
+    indicator.style.padding = "2px 6px";
+    indicator.style.backgroundColor = "#fde7f7";
+    indicator.style.color = "#b21c8e";
+    indicator.style.border = "1px solid #f7c5ec";
+    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";
+    indicator.style.maxWidth = "calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)))";
+    indicator.style.overflow = "hidden";
+    indicator.style.textOverflow = "ellipsis";
+    indicator.style.whiteSpace = "nowrap";
+    return indicator;
+  };
+  var showCopyIndicator = (selectionLeftPx, selectionTopPx) => {
+    if (activeIndicator) {
+      activeIndicator.remove();
+      activeIndicator = null;
+    }
+    const indicator = createIndicator();
+    const loadingSpinner = createSpinner();
+    const labelText = document.createElement("span");
+    labelText.textContent = "Grabbing\u2026";
+    indicator.appendChild(loadingSpinner);
+    indicator.appendChild(labelText);
+    document.body.appendChild(indicator);
+    activeIndicator = indicator;
+    const indicatorRect = indicator.getBoundingClientRect();
+    const viewportWidthPx = window.innerWidth;
+    const viewportHeightPx = window.innerHeight;
+    let indicatorLeftPx = Math.round(selectionLeftPx);
+    let indicatorTopPx = Math.round(selectionTopPx) - indicatorRect.height - LABEL_OFFSET_PX;
+    indicatorLeftPx = Math.max(
+      VIEWPORT_MARGIN_PX,
+      Math.min(
+        indicatorLeftPx,
+        viewportWidthPx - indicatorRect.width - VIEWPORT_MARGIN_PX
+      )
+    );
+    indicatorTopPx = Math.max(
+      VIEWPORT_MARGIN_PX,
+      Math.min(
+        indicatorTopPx,
+        viewportHeightPx - indicatorRect.height - VIEWPORT_MARGIN_PX
+      )
+    );
+    indicator.style.left = `${indicatorLeftPx}px`;
+    indicator.style.top = `${indicatorTopPx}px`;
+    indicator.style.right = "auto";
+    requestAnimationFrame(() => {
+      indicator.style.opacity = "1";
+    });
+    return (tagName) => {
+      loadingSpinner.remove();
+      const checkmarkIcon = document.createElement("span");
+      checkmarkIcon.textContent = "\u2713";
+      checkmarkIcon.style.display = "inline-block";
+      checkmarkIcon.style.marginRight = "4px";
+      checkmarkIcon.style.fontWeight = "600";
+      indicator.insertBefore(checkmarkIcon, labelText);
+      const tagNameMonospace = document.createElement("span");
+      tagNameMonospace.textContent = tagName ? `<${tagName}>` : "<element>";
+      tagNameMonospace.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+      tagNameMonospace.style.fontVariantNumeric = "tabular-nums";
+      labelText.replaceChildren(
+        document.createTextNode("Grabbed "),
+        tagNameMonospace
+      );
+      setTimeout(() => {
+        indicator.style.opacity = "0";
+        setTimeout(() => {
+          indicator.remove();
+          if (activeIndicator === indicator) {
+            activeIndicator = null;
+          }
+        }, 200);
+      }, 1500);
+    };
+  };
+
+  // src/utils/copy-text.ts
+  var IS_NAVIGATOR_CLIPBOARD_AVAILABLE = typeof window !== "undefined" && window.navigator.clipboard && window.isSecureContext;
+  var copyTextToClipboard = async (text) => {
+    if (IS_NAVIGATOR_CLIPBOARD_AVAILABLE) {
+      try {
+        await navigator.clipboard.writeText(text);
+        return true;
+      } catch {
+      }
+    }
+    const textareaElement = document.createElement("textarea");
+    textareaElement.value = text;
+    textareaElement.setAttribute("readonly", "");
+    textareaElement.style.position = "fixed";
+    textareaElement.style.top = "-9999px";
+    textareaElement.style.opacity = "0";
+    textareaElement.style.pointerEvents = "none";
+    const doc = document.body || document.documentElement;
+    doc.appendChild(textareaElement);
+    textareaElement.select();
+    textareaElement.setSelectionRange(0, textareaElement.value.length);
+    let didCopyToClipboard = false;
+    try {
+      didCopyToClipboard = document.execCommand("copy");
+    } catch {
+      didCopyToClipboard = false;
+    } finally {
+      doc.removeChild(textareaElement);
+    }
+    return didCopyToClipboard;
+  };
+
   // 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 +2417,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,190 +2659,21 @@ ${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) {
-      computedStyle = window.getComputedStyle(element);
-    }
-    return computedStyle.display !== "none" && computedStyle.visibility !== "hidden";
+  var isElementVisible = (element, computedStyle = window.getComputedStyle(element)) => {
+    return computedStyle.display !== "none" && computedStyle.visibility !== "hidden" && computedStyle.opacity !== "0";
   };
 
   // src/utils/mount-root.ts
   var ATTRIBUTE_NAME = "data-react-grab";
   var mountRoot = () => {
-    const existingHost = document.querySelector(`[${ATTRIBUTE_NAME}]`);
-    if (existingHost) {
-      const existingRoot = existingHost.shadowRoot?.querySelector(
+    const mountedHost = document.querySelector(`[${ATTRIBUTE_NAME}]`);
+    if (mountedHost) {
+      const mountedRoot = mountedHost.shadowRoot?.querySelector(
         `[${ATTRIBUTE_NAME}]`
       );
-      if (existingRoot instanceof HTMLDivElement && existingHost.shadowRoot) {
-        return existingRoot;
+      if (mountedRoot instanceof HTMLDivElement && mountedHost.shadowRoot) {
+        return mountedRoot;
       }
     }
     const host = document.createElement("div");
@@ -2419,7 +2684,6 @@ ${error.stack}`;
     host.style.left = "0";
     const shadowRoot = host.attachShadow({ mode: "open" });
     const root = document.createElement("div");
-    root.style.transition = "opacity 0.1s ease-out";
     root.setAttribute(ATTRIBUTE_NAME, "true");
     shadowRoot.appendChild(root);
     const doc = document.body ?? document.documentElement;
@@ -2440,6 +2704,77 @@ ${error.stack}`;
     return setTimeout(callback, 0);
   };
 
+  // src/utils/store.ts
+  var createStore = (initializer) => {
+    const subscriberMap = /* @__PURE__ */ new Map();
+    let currentListenerIndex = 0;
+    let currentState;
+    const setState = (maybeStateOrReducer) => {
+      const prevState = currentState;
+      const resolvedState = typeof maybeStateOrReducer === "function" ? maybeStateOrReducer(prevState) : maybeStateOrReducer;
+      const nextState = {
+        ...prevState,
+        ...resolvedState
+      };
+      currentState = nextState;
+      for (const entry of subscriberMap.values()) {
+        if (entry.type === "selected" /* Selected */) {
+          const nextSelectedValue = entry.selector(nextState);
+          const prevSelectedValue = entry.prevSelectedValue;
+          if (!Object.is(prevSelectedValue, nextSelectedValue)) {
+            entry.prevSelectedValue = nextSelectedValue;
+            entry.listener(nextSelectedValue, prevSelectedValue);
+          }
+        } else {
+          entry.listener(nextState, prevState);
+        }
+      }
+      return currentState;
+    };
+    const getState = () => {
+      return currentState;
+    };
+    const initialState = initializer(setState, getState);
+    currentState = initialState;
+    const subscribeWithSelector = (listener, selector) => {
+      const index = String(currentListenerIndex++);
+      const wrappedListener = (value, prevValue) => listener(value, prevValue);
+      const entry = {
+        listener: wrappedListener,
+        prevSelectedValue: selector(currentState),
+        selector,
+        type: "selected" /* Selected */
+      };
+      subscriberMap.set(index, entry);
+      return () => {
+        subscriberMap.delete(index);
+      };
+    };
+    const subscribeToFullState = (listener) => {
+      const index = String(currentListenerIndex++);
+      const entry = {
+        listener,
+        type: "full" /* Full */
+      };
+      subscriberMap.set(index, entry);
+      return () => {
+        subscriberMap.delete(index);
+      };
+    };
+    function subscribe(subscriber, selector) {
+      return selector ? subscribeWithSelector(subscriber, selector) : subscribeToFullState(subscriber);
+    }
+    const store = {
+      getInitialState() {
+        return initialState;
+      },
+      getState,
+      setState,
+      subscribe
+    };
+    return store;
+  };
+
   // src/utils/throttle.ts
   var throttle = (fn, delay) => {
     let timeout = null;
@@ -2462,173 +2797,282 @@ ${error.stack}`;
   };
 
   // src/index.ts
-  var TICK_INTERVAL = 50;
   var THROTTLE_DELAY = 16;
-  var init = () => {
+  var libStore = createStore(() => ({
+    keyPressTimestamps: /* @__PURE__ */ new Map(),
+    mouseX: -1e3,
+    mouseY: -1e3,
+    overlayMode: "hidden",
+    pressedKeys: /* @__PURE__ */ new Set()
+  }));
+  var init = (options = {}) => {
+    if (options.enabled === false) {
+      return;
+    }
+    const resolvedOptions = {
+      enabled: true,
+      hotkey: "Meta",
+      keyHoldDuration: 500,
+      ...options
+    };
     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 render = () => {
-      if (!isSelectionVisible) return;
-      const element = document.elementsFromPoint(mouseX, mouseY).filter((element2) => !element2.hasAttribute(ATTRIBUTE_NAME))[0];
-      if (!element) {
-        currentHoveredElement = null;
+    const selectionOverlay = createSelectionOverlay(root);
+    let hoveredElement = null;
+    let isCopying = false;
+    const checkIsActivationHotkeyPressed = () => {
+      if (Array.isArray(resolvedOptions.hotkey)) {
+        for (const key of resolvedOptions.hotkey) {
+          if (!isKeyPressed(key)) {
+            return false;
+          }
+        }
+        return true;
+      }
+      return isKeyPressed(resolvedOptions.hotkey);
+    };
+    const isCopyHotkeyPressed = () => {
+      return isKeyPressed("Meta") && isKeyPressed("C");
+    };
+    let cleanupActivationHotkeyWatcher = null;
+    const handleKeyStateChange = (pressedKeys) => {
+      const { overlayMode } = libStore.getState();
+      if (pressedKeys.has("Escape") || pressedKeys.has("Esc")) {
+        libStore.setState((state) => {
+          const nextPressedKeys = new Set(state.pressedKeys);
+          nextPressedKeys.delete("Escape");
+          nextPressedKeys.delete("Esc");
+          const nextTimestamps = new Map(state.keyPressTimestamps);
+          nextTimestamps.delete("Escape");
+          nextTimestamps.delete("Esc");
+          const activationKeys = Array.isArray(resolvedOptions.hotkey) ? resolvedOptions.hotkey : [resolvedOptions.hotkey];
+          for (const activationKey of activationKeys) {
+            if (activationKey.length === 1) {
+              nextPressedKeys.delete(activationKey.toLowerCase());
+              nextPressedKeys.delete(activationKey.toUpperCase());
+              nextTimestamps.delete(activationKey.toLowerCase());
+              nextTimestamps.delete(activationKey.toUpperCase());
+            } else {
+              nextPressedKeys.delete(activationKey);
+              nextTimestamps.delete(activationKey);
+            }
+          }
+          return {
+            ...state,
+            keyPressTimestamps: nextTimestamps,
+            overlayMode: "hidden",
+            pressedKeys: nextPressedKeys
+          };
+        });
+        if (cleanupActivationHotkeyWatcher) {
+          cleanupActivationHotkeyWatcher();
+          cleanupActivationHotkeyWatcher = null;
+        }
         return;
       }
-      const computedStyle = window.getComputedStyle(element);
-      if (!isElementVisible(element, computedStyle)) return;
-      const rect = element.getBoundingClientRect();
-      currentHoveredElement = element;
-      updateSelection(currentSelection, {
-        borderRadius: computedStyle.borderRadius,
-        height: rect.height,
-        transform: computedStyle.transform,
-        width: rect.width,
-        x: rect.left,
-        y: rect.top
-      });
+      if (isCopyHotkeyPressed() && overlayMode === "visible") {
+        libStore.setState((state) => ({
+          ...state,
+          overlayMode: "copying"
+        }));
+        return;
+      }
+      const isActivationHotkeyPressed = checkIsActivationHotkeyPressed();
+      if (!isActivationHotkeyPressed) {
+        if (cleanupActivationHotkeyWatcher) {
+          cleanupActivationHotkeyWatcher();
+          cleanupActivationHotkeyWatcher = null;
+        }
+        if (overlayMode !== "hidden") {
+          libStore.setState((state) => ({
+            ...state,
+            overlayMode: "hidden"
+          }));
+        }
+        return;
+      }
+      if (overlayMode === "hidden" && !cleanupActivationHotkeyWatcher) {
+        cleanupActivationHotkeyWatcher = watchKeyHeldFor(
+          resolvedOptions.hotkey,
+          resolvedOptions.keyHoldDuration,
+          () => {
+            libStore.setState((state) => ({
+              ...state,
+              overlayMode: "visible"
+            }));
+            cleanupActivationHotkeyWatcher = null;
+          }
+        );
+      }
     };
-    const throttledRender = throttle(() => {
-      scheduleRunWhenIdle(() => {
-        render();
-      });
+    const cleanupKeyStateChangeSubscription = libStore.subscribe(
+      handleKeyStateChange,
+      (state) => state.pressedKeys
+    );
+    const handleMouseMove = throttle((event) => {
+      libStore.setState((state) => ({
+        ...state,
+        mouseX: event.clientX,
+        mouseY: event.clientY
+      }));
     }, THROTTLE_DELAY);
-    window.addEventListener("mousemove", (event) => {
-      mouseX = event.clientX;
-      mouseY = event.clientY;
-      throttledRender();
-    });
-    window.addEventListener("resize", () => {
-      throttledRender();
-    });
-    window.addEventListener("scroll", () => {
-      throttledRender();
-    });
-    let timeout = null;
-    const nextTick = () => {
-      timeout = window.setTimeout(() => {
-        throttledRender();
-        nextTick();
-      }, TICK_INTERVAL);
-    };
-    nextTick();
-    window.addEventListener("keydown", (event) => {
-      if (event.key === "Meta") {
-        if (isFocusedInInput()) return;
-        if (shiftKeyTimeout !== null) {
-          window.clearTimeout(shiftKeyTimeout);
+    const handleMouseDown = (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      const { overlayMode } = libStore.getState();
+      if (overlayMode === "hidden") {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      libStore.setState((state) => ({
+        ...state,
+        overlayMode: "copying"
+      }));
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mousedown", handleMouseDown);
+    const cleanupTrackHotkeys = trackHotkeys();
+    const getElementAtPosition = (x, y) => {
+      const elements = document.elementsFromPoint(x, y);
+      for (const element of elements) {
+        if (element.closest(`[${ATTRIBUTE_NAME}]`)) {
+          continue;
         }
-        shiftKeyTimeout = window.setTimeout(() => {
-          isSelectionVisible = true;
-          currentSelection.style.display = "block";
-          currentSelection.style.pointerEvents = "auto";
-          throttledRender();
-        }, 200);
+        const computedStyle = window.getComputedStyle(element);
+        if (!isElementVisible(element, computedStyle)) {
+          continue;
+        }
+        return element;
       }
-      if ((event.key === "c" || event.key === "C") && event.metaKey) {
-        if (isSelectionVisible && currentHoveredElement) {
-          event.preventDefault();
-          event.stopPropagation();
-          event.stopImmediatePropagation();
-          const element = currentHoveredElement;
-          const rect = element.getBoundingClientRect();
-          const showSuccess = showCopyIndicator(rect.left, rect.top);
-          getStack(element).then((stack) => {
-            const htmlSnippet = getHTMLSnippet(element);
-            let output = htmlSnippet;
-            if (stack) {
-              const filteredStack = filterStack(stack);
-              const serializedStack = serializeStack(filteredStack);
-              output = `${serializedStack}
+      return null;
+    };
+    const handleCopy = async (element) => {
+      const rect = element.getBoundingClientRect();
+      const cleanupCopyIndicator = showCopyIndicator(rect.left, rect.top);
+      try {
+        const stack = await getStack(element);
+        const htmlSnippet = getHTMLSnippet(element);
+        let text = htmlSnippet;
+        if (stack) {
+          const filteredStack = filterStack(stack);
+          const serializedStack = serializeStack(filteredStack);
+          text = `${serializedStack}
 
 ${htmlSnippet}`;
-            }
-            return copyText(output);
-          }).then((success) => {
-            if (success) {
-              showSuccess();
-            }
-          }).catch(() => {
-          });
         }
+        await copyTextToClipboard(`
+${text}`);
+        const tagName = (element.tagName || "").toLowerCase();
+        cleanupCopyIndicator(tagName);
+      } catch {
+        cleanupCopyIndicator();
       }
-    });
-    window.addEventListener("mousedown", (event) => {
-      if (event.button !== 0) return;
-      if (isSelectionVisible) {
-        event.preventDefault();
-        event.stopPropagation();
-        event.stopImmediatePropagation();
-        if (currentHoveredElement) {
-          const element = currentHoveredElement;
-          const rect = element.getBoundingClientRect();
-          const showSuccess = showCopyIndicator(rect.left, rect.top);
-          getStack(element).then((stack) => {
-            const htmlSnippet = getHTMLSnippet(element);
-            let output = htmlSnippet;
-            if (stack) {
-              const filteredStack = filterStack(stack);
-              const serializedStack = serializeStack(filteredStack);
-              output = `## Referenced element:
-${htmlSnippet}
-Stack trace:
-${serializedStack}
-
-Path: ${window.location.pathname}`;
-            }
-            return copyText(output);
-          }).then((success) => {
-            if (success) {
-              showSuccess();
-            }
-          }).catch(() => {
+    };
+    const handleRender = throttle((state) => {
+      const { mouseX, mouseY, overlayMode } = state;
+      if (overlayMode === "hidden") {
+        if (selectionOverlay.isVisible()) {
+          selectionOverlay.hide();
+          hoveredElement = null;
+        }
+        return;
+      }
+      if (overlayMode === "copying" && hoveredElement) {
+        const computedStyle2 = window.getComputedStyle(hoveredElement);
+        const rect2 = hoveredElement.getBoundingClientRect();
+        selectionOverlay.update({
+          borderRadius: computedStyle2.borderRadius || "0px",
+          height: rect2.height,
+          transform: computedStyle2.transform || "none",
+          width: rect2.width,
+          x: rect2.left,
+          y: rect2.top
+        });
+        if (!selectionOverlay.isVisible()) {
+          selectionOverlay.show();
+        }
+        if (!isCopying) {
+          isCopying = true;
+          void handleCopy(hoveredElement).finally(() => {
+            libStore.setState((state2) => ({
+              ...state2,
+              overlayMode: "hidden"
+            }));
+            isCopying = false;
           });
         }
+        return;
       }
-    });
-    window.addEventListener("keyup", (event) => {
-      if (event.key === "Meta") {
-        if (shiftKeyTimeout !== null) {
-          window.clearTimeout(shiftKeyTimeout);
-          shiftKeyTimeout = null;
+      const element = getElementAtPosition(mouseX, mouseY);
+      if (!element) {
+        if (selectionOverlay.isVisible()) {
+          selectionOverlay.hide();
         }
+        hoveredElement = null;
+        return;
       }
-      currentSelection.style.display = "none";
-      currentSelection.style.pointerEvents = "none";
-      isSelectionVisible = false;
-      throttledRender();
+      hoveredElement = element;
+      const rect = element.getBoundingClientRect();
+      const computedStyle = window.getComputedStyle(element);
+      const borderRadius = computedStyle.borderRadius || "0px";
+      const transform = computedStyle.transform || "none";
+      selectionOverlay.update({
+        borderRadius,
+        height: rect.height,
+        transform,
+        width: rect.width,
+        x: rect.left,
+        y: rect.top
+      });
+      if (!selectionOverlay.isVisible()) {
+        selectionOverlay.show();
+      }
+    }, 10);
+    const cleanupRenderSubscription = libStore.subscribe((state) => {
+      scheduleRunWhenIdle(() => {
+        handleRender(state);
+      });
     });
+    let timeout = null;
+    const render = () => {
+      timeout = window.setTimeout(() => {
+        scheduleRunWhenIdle(() => {
+          handleRender(libStore.getState());
+          render();
+        });
+      }, 100);
+    };
+    render();
     return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mousedown", handleMouseDown);
+      cleanupTrackHotkeys();
+      cleanupRenderSubscription();
+      cleanupKeyStateChangeSubscription();
       if (timeout) {
         window.clearTimeout(timeout);
-        timeout = null;
       }
-      if (shiftKeyTimeout !== null) {
-        window.clearTimeout(shiftKeyTimeout);
-        shiftKeyTimeout = null;
+      if (cleanupActivationHotkeyWatcher) {
+        cleanupActivationHotkeyWatcher();
       }
-      root.remove();
-      throttledRender.cancel();
     };
   };
-  init();
+  if (typeof window !== "undefined" && typeof document !== "undefined") {
+    const currentScript = document.currentScript;
+    let options = {};
+    if (currentScript) {
+      const maybeOptions = currentScript.getAttribute("data-options");
+      if (maybeOptions) {
+        try {
+          options = JSON.parse(maybeOptions);
+        } catch {
+        }
+      }
+    }
+    init(options);
+  }
   /*! Bundled license information:
 
   bippy/dist/src-R2iEnVC1.js:
@@ -2673,6 +3117,7 @@ Path: ${window.location.pathname}`;
   */
 
   exports.init = init;
+  exports.libStore = libStore;
 
   return exports;