@supermousejs/core 2.4.3 → 2.5.0-beta.1

package/dist/index.mjs

@@ -1,11 +1,126 @@
-const c = "2.4.3";
-function p(o, t, e) {
-  return o + (t - o) * e;
+const w = {
+  rules: [
+    { selector: "input", native: !0, hide: !0 },
+    { selector: "textarea", native: !0, hide: !0 },
+    { selector: "select", native: !0, hide: !0 },
+    { selector: "[contenteditable]", native: !0, hide: !0 },
+    { selector: "a", native: !1, hide: !0 },
+    { selector: "button", native: !1, hide: !0 },
+    { selector: '[role="button"]', native: !1, hide: !0 },
+    { selector: "[tabindex]", native: !1, hide: !0 }
+  ]
+};
+function x(i) {
+  if (!i) return w;
+  if ("rules" in i) return i;
+  const t = [], e = new Set(i.native ?? []), s = new Set(i.hide ?? []), n = /* @__PURE__ */ new Set([...e, ...s]);
+  for (const r of n)
+    t.push({
+      selector: r,
+      native: e.has(r),
+      hide: s.has(r)
+    });
+  return { rules: t };
 }
-function d(o, t, e, s) {
-  return p(o, t, 1 - Math.exp(-e * s));
+function T(i) {
+  const t = [], e = [];
+  for (const s of i.rules)
+    s.native !== !1 && t.push(s.selector), s.hide !== !1 && e.push(s.selector);
+  return { native: t, hide: e };
 }
-const h = { x: -100, y: -100 }, g = /* @__PURE__ */ new Set(["input", "textarea", "select"]), f = /* @__PURE__ */ new Set([
+let L = 0;
+class A {
+  constructor(t, e) {
+    if (this.container = t, !t || !(t instanceof HTMLElement))
+      throw new Error(`[Supermouse] Invalid container: ${t}. Must be an HTMLElement.`);
+    t.isConnected;
+    const s = L++;
+    this.scopeClass = `supermouse-scope-${s}`, this.hideClass = `supermouse-hide-${s}`;
+    const n = t === document.body;
+    if (this.element = document.createElement("div"), Object.assign(this.element.style, {
+      position: n ? "fixed" : "absolute",
+      inset: "0px",
+      pointerEvents: "none",
+      zIndex: String(e),
+      opacity: "1",
+      transition: "opacity 0.15s ease"
+    }), !n) {
+      const r = window.getComputedStyle(t);
+      this.originalContainerPosition = r.position, r.position === "static" && (t.style.position = "relative");
+    }
+    this.originalContainerCursor = t.style.cursor, t.appendChild(this.element), t.classList.add("supermouse-scope", this.scopeClass);
+  }
+  container;
+  element;
+  scopeClass;
+  hideClass;
+  currentCursorState = null;
+  originalContainerPosition = "";
+  originalContainerCursor = "";
+  get containerElement() {
+    return this.container;
+  }
+  /** Full selector prefix: `.supermouse-scope-N.supermouse-hide-N`. */
+  getRulePrefix() {
+    return `.${this.scopeClass}.${this.hideClass}`;
+  }
+  /** CSS `:not()` chain that prevents the rules from leaking into nested scopes. */
+  getExclusion() {
+    return `:not(.${this.scopeClass} .supermouse-scope):not(.${this.scopeClass} .supermouse-scope *)`;
+  }
+  setVisibility(t) {
+    this.element.style.opacity = t ? "1" : "0";
+  }
+  setNativeCursor(t) {
+    t !== this.currentCursorState && (this.currentCursorState = t, this.container.classList.toggle(this.hideClass, t === "none"), t === "none" ? this.container.style.cursor = "none" : this.container === document.body ? this.container.style.cursor = this.originalContainerCursor : this.container.style.cursor = this.originalContainerCursor || "auto");
+  }
+  destroy() {
+    this.element.remove(), this.container.style.cursor = this.originalContainerCursor, this.container.classList.remove("supermouse-scope", this.scopeClass, this.hideClass), this.container !== document.body && this.originalContainerPosition === "static" && (this.container.style.position = "");
+  }
+}
+class I {
+  constructor(t, e) {
+    this.config = t, this.name = t.name, this.cursorMode = t.cursor ?? e.cursor, this.hoverSelectors = new Set(t.hoverSelectors ?? e.hoverSelectors), this.inheritDataAttributes = t.inheritDataAttributes ?? e.inheritDataAttributes;
+    const s = t.cursorPolicy ? x(t.cursorPolicy) : e.cursorPolicy, n = T(s);
+    this.nativeSelectors = n.native, this.hideSelectors = n.hide, this.stage = new A(t.container, t.zIndex ?? e.zIndex);
+  }
+  config;
+  stage;
+  hoverSelectors;
+  plugins = [];
+  nativeSelectors;
+  hideSelectors;
+  inheritDataAttributes;
+  name;
+  cursorMode;
+  contains(t) {
+    return this.stage.containerElement.contains(t);
+  }
+  get container() {
+    return this.stage.containerElement;
+  }
+  get hoverSelectorString() {
+    return Array.from(this.hoverSelectors).join(", ");
+  }
+  get nativeSelectorString() {
+    return this.nativeSelectors.join(", ");
+  }
+  /** Build the CSS rules this scope contributes to the shared stylesheet. */
+  buildRules() {
+    const t = this.stage.getRulePrefix(), e = this.stage.getExclusion(), s = [
+      `${t}${e} { cursor: none !important; }`,
+      `${t} *${e} { cursor: none !important; }`
+    ];
+    for (const n of this.hideSelectors)
+      s.push(`${t} ${n}${e} { cursor: none !important; }`);
+    return s.push(`${t} label${e} { cursor: none !important; }`), s.push(`${t} select${e} { cursor: none !important; }`), s.push(
+      `${t} input[type="range"]${e}::-webkit-slider-thumb { cursor: none !important; }`
+    ), s.push(
+      `${t} input[type="range"]${e}::-moz-range-thumb { cursor: none !important; }`
+    ), s;
+  }
+}
+const f = { x: -100, y: -100 }, R = /* @__PURE__ */ new Set([
   "default",
   "auto",
   "pointer",
@@ -13,40 +128,99 @@ const h = { x: -100, y: -100 }, g = /* @__PURE__ */ new Set(["input", "textarea"
   "inherit",
   "grab",
   "grabbing"
-]), m = [
+]), D = [
   "a",
   "button",
   "input",
   "textarea",
   "[data-hover]",
   "[data-cursor]"
-];
-class v {
-  constructor(t, e, s, i) {
-    this.state = t, this.options = e, this.getHoverSelector = s, this.onEnableChange = i, this.dataPrefix = this.options.dataPrefix ?? "supermouse", this.normalizedDataPrefix = this.dataPrefix.toLowerCase(), this.ignoreAttribute = `data-${this.dataPrefix}-ignore`, this.ruleEntries = this.options.rules ? Object.entries(this.options.rules) : [], this.checkDeviceCapability(), this.checkMotionPreference(), this.setupContainerRectTracking(), this.bindEvents();
+], u = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map();
+let v = null, g = !1, m = !1, S = 0;
+function C(i) {
+  const t = i.getBoundingClientRect();
+  return { left: t.left, top: t.top, width: t.width, height: t.height };
+}
+function M(i) {
+  u.set(i, C(i));
+  const t = _.get(i);
+  if (t) for (const e of t) e();
+}
+function y() {
+  for (const i of u.keys()) M(i);
+}
+function O() {
+  v || typeof ResizeObserver > "u" || (v = new ResizeObserver((i) => {
+    for (const t of i) {
+      const e = t.target;
+      u.has(e) && M(e);
+    }
+  }));
+}
+function $() {
+  typeof window > "u" || (g || (window.addEventListener("scroll", y, { passive: !0, capture: !0 }), g = !0), m || (window.addEventListener("resize", y, { passive: !0 }), m = !0));
+}
+function z(i, t) {
+  return S++, u.has(i) || (u.set(i, C(i)), O(), v?.observe(i), $()), () => {
+    S--, S === 0 && (v?.disconnect(), v = null, u.clear(), _.clear(), g && (window.removeEventListener("scroll", y, { capture: !0 }), g = !1), m && (window.removeEventListener("resize", y), m = !1));
+  };
+}
+function k(i) {
+  let t = u.get(i);
+  return t || (t = C(i), u.set(i, t)), t;
+}
+function N(i, t, e) {
+  if (i === document.body) return { x: t, y: e };
+  const s = k(i);
+  return { x: t - s.left, y: e - s.top };
+}
+class B {
+  constructor(t, e, s, n) {
+    this.state = t, this.options = e, this.onEnableChange = s, this.onActiveScopeChange = n, this.dataPrefix = e.dataPrefix ?? "supermouse", this.normalizedDataPrefix = this.dataPrefix.toLowerCase(), this.ignoreAttribute = `data-${this.dataPrefix}-ignore`, this.ruleEntries = e.rules ? Object.entries(e.rules) : [], this.checkDeviceCapability(), this.checkMotionPreference(), this.bindEvents();
   }
   state;
   options;
-  getHoverSelector;
   onEnableChange;
+  onActiveScopeChange;
+  abortController = new AbortController();
   mediaQueryList;
   motionQuery;
   dataPrefix;
   normalizedDataPrefix;
   ignoreAttribute;
-  abortController = new AbortController();
+  activeScope = null;
+  scopeByContainer = /* @__PURE__ */ new Map();
   nativeTarget = null;
-  hasSeenPointer = !1;
-  isEnabled = !0;
-  containerRect = null;
-  resizeObserver;
-  /** Cached matched rules for the current interaction element. */
-  matchedRules = [];
+  currentTarget = null;
   lastParsedTarget = null;
-  /** Precomputed list of rule entries for faster iteration. */
   ruleEntries;
-  /** The actual element currently under the pointer (regardless of hover selectors). */
-  currentTarget = null;
+  releaseViewport = null;
+  hasSeenPointer = !1;
+  isEnabled = !0;
+  viewportX = 0;
+  viewportY = 0;
+  /** Cached matched rules per ancestor. Recomputed only when the hover target changes. */
+  cachedChain = [];
+  setScopes(t) {
+    this.scopeByContainer.clear();
+    for (const e of t) this.scopeByContainer.set(e.container, e);
+  }
+  setActiveScope(t) {
+    t !== this.activeScope && (this.activeScope = t, this.releaseViewport?.(), this.releaseViewport = t && t.container !== document.body ? z(t.container) : null, this.hasSeenPointer && (this.applyPointerToState(), this.state.target.x = this.state.smooth.x = this.state.pointer.x, this.state.target.y = this.state.smooth.y = this.state.pointer.y), this.onActiveScopeChange(t));
+  }
+  findScope(t) {
+    let e = t;
+    for (; e; ) {
+      const s = this.scopeByContainer.get(e);
+      if (s) return s;
+      e = e.parentElement;
+    }
+    return null;
+  }
+  applyPointerToState() {
+    const t = this.activeScope?.container ?? document.body, e = N(t, this.viewportX, this.viewportY);
+    this.state.pointer.x = e.x, this.state.pointer.y = e.y;
+  }
   checkDeviceCapability() {
     this.options.autoDisableOnMobile && (this.mediaQueryList = window.matchMedia("(pointer: fine)"), this.updateEnabledState(this.mediaQueryList.matches), this.mediaQueryList.addEventListener("change", (t) => this.updateEnabledState(t.matches), {
       signal: this.abortController.signal
@@ -64,82 +238,56 @@ class v {
   updateEnabledState(t) {
     this.isEnabled = t, this.onEnableChange(t);
   }
-  /** Caches container rect; updates on resize/scroll/ResizeObserver. */
-  setupContainerRectTracking() {
-    const t = this.options.container;
-    if (!t || t === document.body) return;
-    const e = () => {
-      this.containerRect = t.getBoundingClientRect();
-    };
-    e(), window.addEventListener("resize", e, { signal: this.abortController.signal }), window.addEventListener("scroll", e, {
-      passive: !0,
-      signal: this.abortController.signal
-    }), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(e), this.resizeObserver.observe(t));
-  }
-  /**
-   * Evaluates rules against the given element.
-   * Selector matching is cached per element; only function values re-evaluated each frame.
-   */
   parseDOMInteraction(t) {
+    const e = this.activeScope?.container ?? document.body, s = this.activeScope?.inheritDataAttributes ?? !0, n = this.normalizedDataPrefix;
     if (t !== this.lastParsedTarget) {
-      this.lastParsedTarget = t, this.matchedRules = [];
-      for (const [i, n] of this.ruleEntries)
-        this.matchesSelector(t, i) && this.matchedRules.push({ selector: i, rules: n });
+      this.lastParsedTarget = t, this.cachedChain = [];
+      let o = t;
+      for (; o; ) {
+        const d = [];
+        for (const [a, h] of this.ruleEntries)
+          this.matchesSelector(o, a) && d.push({ selector: a, rules: h });
+        if (this.cachedChain.push({ element: o, matchedRules: d }), !s || o === e) break;
+        const c = o.parentElement;
+        if (!c || !e.contains(c)) break;
+        o = c;
+      }
     }
-    const e = {};
-    for (const { rules: i } of this.matchedRules)
-      try {
-        const n = typeof i == "function" ? i(t) : i;
-        if (!n || typeof n != "object") continue;
-        for (const [r, a] of Object.entries(n))
-          e[r] = typeof a == "function" ? a(t) : a;
-      } catch (n) {
-        console.error("[Supermouse] Rule threw during evaluation:", n);
+    const r = {};
+    for (const { element: o, matchedRules: d } of this.cachedChain) {
+      const c = {};
+      for (const { rules: a } of d)
+        try {
+          const h = typeof a == "function" ? a(o) : a;
+          if (!h || typeof h != "object") continue;
+          for (const [b, p] of Object.entries(h))
+            c[b] = typeof p == "function" ? p(o) : p;
+        } catch {
+        }
+      for (const a in o.dataset) {
+        if (!a.toLowerCase().startsWith(n)) continue;
+        const h = a.slice(n.length);
+        if (!h) continue;
+        const b = h[0].toLowerCase() + h.slice(1), p = o.dataset[a];
+        c[b] = p == null || p === "" ? !0 : p;
       }
-    const s = this.normalizedDataPrefix;
-    for (const i in t.dataset) {
-      if (!i.toLowerCase().startsWith(s)) continue;
-      const n = i.slice(s.length);
-      if (!n) continue;
-      const r = t.dataset[i];
-      e[n[0].toLowerCase() + n.slice(1)] = r === "" ? !0 : r;
+      for (const [a, h] of Object.entries(c))
+        a in r || (r[a] = h);
     }
-    this.state.interaction = e;
+    this.state.interaction = r;
   }
-  /**
-   * Optimized selector matching:
-   * - For simple selectors (no spaces), just call `element.matches`.
-   * - For complex selectors with descendant combinators, fallback to splitting.
-   */
   matchesSelector(t, e) {
     try {
-      if (!/\s/.test(e.trim()))
-        return t.matches(e);
-    } catch {
-    }
-    const s = e.trim().split(/\s+/);
-    if (s.length < 2) return !1;
-    const i = s.pop(), n = s.join(" ");
-    if (!i || !n) return !1;
-    try {
-      return t.matches(i) && !!t.closest(n);
+      return t.matches(e);
     } catch {
       return !1;
     }
   }
-  isOutsideContainer(t) {
-    const { container: e } = this.options;
-    return !!e && e !== document.body && !e.contains(t);
-  }
   resolveComputedCursor(t) {
     return window.getComputedStyle(t).cursor;
   }
   handleMove = (t) => {
-    if (this.options.autoDisableOnMobile && t.pointerType === "touch" && !this.options.enableTouch)
-      return;
-    let e = t.clientX, s = t.clientY;
-    const i = this.options.container;
-    i && this.containerRect && i !== document.body && (e -= this.containerRect.left, s -= this.containerRect.top), this.state.pointer.x = e, this.state.pointer.y = s, this.hasSeenPointer = !0, this.isEnabled && (this.state.hasReceivedInput || (this.state.hasReceivedInput = !0, this.state.target.x = this.state.smooth.x = e, this.state.target.y = this.state.smooth.y = s));
+    this.options.autoDisableOnMobile && t.pointerType === "touch" && !this.options.enableTouch || (this.viewportX = t.clientX, this.viewportY = t.clientY, this.hasSeenPointer = !0, this.applyPointerToState(), this.isEnabled && (this.state.hasReceivedInput || (this.state.hasReceivedInput = !0, this.state.target.x = this.state.smooth.x = this.state.pointer.x, this.state.target.y = this.state.smooth.y = this.state.pointer.y)));
   };
   handleDown = () => {
     this.isEnabled && (this.state.isDown = !0);
@@ -149,157 +297,72 @@ class v {
   };
   handleMouseOver = (t) => {
     if (!this.isEnabled) return;
-    const e = t.target;
-    if (this.isOutsideContainer(e)) return;
+    const e = t.target, s = this.findScope(e);
+    if (s && s !== this.activeScope && this.setActiveScope(s), !this.activeScope) return;
     if (this.state.cursorMode === "auto" && e.closest(`[${this.ignoreAttribute}]`)) {
-      this.state.isHover = !1, this.state.hoverTarget = null, this.state.interaction = {}, this.currentTarget = null, this.lastParsedTarget = null, this.matchedRules = [], this.state.isNative = !0, this.nativeTarget = e;
+      this.clearHover(), this.state.isNative = !0, this.nativeTarget = e;
       return;
     }
-    if (this.state.isNative = !1, this.nativeTarget = null, this.currentTarget = e, this.parseDOMInteraction(e), this.state.cursorMode !== "auto") {
-      const r = e.closest(this.getHoverSelector());
-      r && (this.state.isHover = !0, this.state.hoverTarget = r);
-      return;
+    this.state.isNative = !1, this.nativeTarget = null, this.currentTarget = e, this.parseDOMInteraction(e);
+    const n = e.closest(this.activeScope.hoverSelectorString);
+    if (n && (this.state.isHover = !0, this.state.hoverTarget = n), this.state.cursorMode === "auto") {
+      if (this.matchesSelector(e, this.activeScope.nativeSelectorString)) {
+        this.state.isNative = !0, this.nativeTarget = e;
+        return;
+      }
+      (e.isContentEditable || !R.has(this.resolveComputedCursor(e))) && (this.state.isNative = !0, this.nativeTarget = e);
     }
-    const s = e.closest(this.getHoverSelector());
-    s && (this.state.isHover = !0, this.state.hoverTarget = s);
-    const i = g.has(e.localName) || e.isContentEditable, n = !f.has(this.resolveComputedCursor(e));
-    (i || n) && (this.state.isNative = !0, this.nativeTarget = e);
   };
   handleMouseOut = (t) => {
     if (!this.isEnabled) return;
     const e = t.target, s = t.relatedTarget;
-    this.isOutsideContainer(e) || ((e === this.state.hoverTarget || e.contains(this.state.hoverTarget)) && (!s || !this.state.hoverTarget?.contains(s)) && (this.state.isHover = !1, this.state.hoverTarget = null), this.nativeTarget && (e === this.nativeTarget || e.contains(this.nativeTarget)) && (!s || !this.nativeTarget.contains(s)) && (this.state.isNative = !1, this.nativeTarget = null), e === this.currentTarget && (this.currentTarget = null, this.lastParsedTarget = null, this.matchedRules = []));
-  };
-  /**
-   * Handles the case where the pointer leaves the entire document.
-   * This is more reliable than the `mouseleave` event on `document`.
-   */
-  handleDocumentMouseOut = (t) => {
-    this.isEnabled && t.relatedTarget === null && this.options.hideOnLeave && this.handleWindowLeave();
-  };
-  handleWindowLeave = () => {
-    this.options.hideOnLeave && (this.state.hasReceivedInput = !1, this.state.pointer = { ...h });
+    (e === this.state.hoverTarget || e.contains(this.state.hoverTarget)) && (!s || !this.state.hoverTarget?.contains(s)) && (this.state.isHover = !1, this.state.hoverTarget = null), this.nativeTarget && (e === this.nativeTarget || e.contains(this.nativeTarget)) && (!s || !this.nativeTarget.contains(s)) && (this.state.isNative = !1, this.nativeTarget = null), e === this.currentTarget && (this.currentTarget = null, this.lastParsedTarget = null, this.cachedChain = []), !s && this.options.hideOnLeave && (this.state.hasReceivedInput = !1, this.state.pointer = { ...f });
   };
   clearHover() {
-    this.state.isHover = !1, this.state.hoverTarget = null, this.state.isNative = !1, this.nativeTarget = null, this.state.interaction = {}, this.currentTarget = null, this.lastParsedTarget = null, this.matchedRules = [];
+    this.state.isHover = !1, this.state.hoverTarget = null, this.state.isNative = !1, this.nativeTarget = null, this.state.interaction = {}, this.currentTarget = null, this.lastParsedTarget = null, this.cachedChain = [];
   }
-  /** Returns the raw element currently under the pointer. */
   getCurrentTarget() {
     return this.currentTarget;
   }
   bindEvents() {
     const { signal: t } = this.abortController;
-    window.addEventListener("pointermove", this.handleMove, { passive: !0, signal: t }), window.addEventListener("pointerdown", this.handleDown, { passive: !0, signal: t }), window.addEventListener("pointerup", this.handleUp, { signal: t });
-    const s = !this.options.container || this.options.container === document.body ? document : this.options.container;
-    s.addEventListener("mouseover", this.handleMouseOver, { signal: t }), s.addEventListener("mouseout", this.handleMouseOut, { signal: t }), document.addEventListener("mouseout", this.handleDocumentMouseOut, { signal: t });
+    window.addEventListener("pointermove", this.handleMove, { passive: !0, signal: t }), window.addEventListener("pointerdown", this.handleDown, { passive: !0, signal: t }), window.addEventListener("pointerup", this.handleUp, { signal: t }), document.addEventListener("mouseover", this.handleMouseOver, { signal: t }), document.addEventListener("mouseout", this.handleMouseOut, { signal: t });
   }
   destroy() {
-    this.abortController.abort(), this.resizeObserver?.disconnect();
+    this.abortController.abort(), this.releaseViewport?.(), this.cachedChain = [];
   }
 }
-let b = 0;
-class y {
-  constructor(t = document.body, e = 9999) {
-    if (this.container = t, this.zIndex = e, !t || !(t instanceof HTMLElement))
-      throw new Error(`[Supermouse] Invalid container: ${t}. Must be an HTMLElement.`);
-    t.isConnected || console.warn(
-      "[Supermouse] container is not attached to the document — stage sizing/positioning will be wrong until it is."
-    );
-    const s = b++;
-    this.id = `supermouse-style-${s}`, this.scopeClass = `supermouse-scope-${s}`, this.hideClass = `supermouse-hide-${s}`;
-    const i = t === document.body;
-    if (this.element = document.createElement("div"), Object.assign(this.element.style, {
-      position: i ? "fixed" : "absolute",
-      inset: "0px",
-      pointerEvents: "none",
-      zIndex: String(this.zIndex),
-      opacity: "1",
-      transition: "opacity 0.15s ease"
-    }), !i) {
-      const n = window.getComputedStyle(t);
-      this.originalContainerPosition = n.position, n.position === "static" && (t.style.position = "relative");
-    }
-    this.originalContainerCursor = t.style.cursor, t.appendChild(this.element), this.styleTag = document.createElement("style"), this.styleTag.id = this.id, document.head.appendChild(this.styleTag), this.container.classList.add("supermouse-scope", this.scopeClass), this.updateCursorCSS();
-  }
-  container;
-  zIndex;
-  element;
-  styleTag;
-  id;
-  scopeClass;
-  hideClass;
-  currentCursorState = null;
-  originalContainerPosition = "";
-  originalContainerCursor = "";
-  /** Selectors that need explicit `cursor: none !important` to override UA styles. */
-  selectors = /* @__PURE__ */ new Set([
-    "a",
-    "button",
-    "input",
-    "textarea",
-    "select",
-    '[role="button"]',
-    "[tabindex]"
-  ]);
-  /** Batch add selectors. Comma‑separated groups are split and scoped individually. */
-  addSelectors(t) {
-    let e = !1;
-    for (const s of t)
-      s.split(",").forEach((i) => {
-        const n = i.trim();
-        n && !this.selectors.has(n) && (this.selectors.add(n), e = !0);
-      });
-    e && this.updateCursorCSS();
-  }
-  /** Add a single selector (or comma‑separated group). */
-  addSelector(t) {
-    this.addSelectors([t]);
-  }
-  setVisibility(t) {
-    this.element.style.opacity = t ? "1" : "0";
-  }
-  /** Toggle native cursor visibility. */
-  setNativeCursor(t) {
-    t !== this.currentCursorState && (this.currentCursorState = t, this.container.classList.toggle(this.hideClass, t === "none"), this.container.style.cursor = t === "none" ? "none" : this.originalContainerCursor);
-  }
-  updateCursorCSS() {
-    const t = Array.from(this.selectors);
-    if (t.length === 0) {
-      this.styleTag.innerText = "";
-      return;
-    }
-    const e = `:not(.${this.scopeClass} .supermouse-scope):not(.${this.scopeClass} .supermouse-scope *)`, s = (a) => `.${this.scopeClass}.${this.hideClass} ${a}${e} { cursor: none !important; }`, i = t.map(s).join(`
-`), n = `.${this.scopeClass}.${this.hideClass} *${e} { cursor: none !important; }`, r = `.${this.scopeClass}.${this.hideClass} { cursor: none !important; }`;
-    this.styleTag.innerText = `
-    ${r}
-    ${n}
-    ${i}
-    ${s("label")}
-    ${s("select")}
-    ${s('input[type="range"]::-webkit-slider-thumb')}
-    ${s('input[type="range"]::-moz-range-thumb')}
-  `;
-  }
-  destroy() {
-    this.element.remove(), this.styleTag.remove(), this.container.style.cursor = this.originalContainerCursor, this.container.classList.remove("supermouse-scope", this.scopeClass, this.hideClass), this.container !== document.body && this.originalContainerPosition === "static" && (this.container.style.position = "");
-  }
+let l = null;
+function H() {
+  l || typeof document > "u" || (l = document.createElement("style"), l.id = "supermouse-styles", document.head.appendChild(l));
+}
+function V(i) {
+  H(), l && (l.textContent = i.join(`
+`));
+}
+function F() {
+  l?.remove(), l = null;
+}
+const E = "2.5.0-beta.1";
+function j(i, t, e) {
+  return i + (t - i) * e;
+}
+function P(i, t, e, s) {
+  return j(i, t, 1 - Math.exp(-e * s));
 }
-class C {
-  static version = c;
-  version = c;
+class Q {
+  static version = E;
+  version = E;
   state;
-  /** Configuration options, fully resolved with defaults applied. */
   options;
-  plugins = [];
-  _stage;
+  _scopes = [];
+  _activeScope = null;
+  _installingScope = null;
+  scopeByContainer = /* @__PURE__ */ new Map();
   input;
   rafId = 0;
   lastTime = 0;
-  isRunning = !1;
-  isSuspended = !1;
   visibilityAbortController = new AbortController();
-  hoverSelectors;
-  hoverSelectorString;
   crashedPlugins = [];
   constructor(t = {}) {
     this.options = {
@@ -312,11 +375,12 @@ class C {
       container: document.body,
       dataPrefix: "supermouse",
       zIndex: 9999,
+      inheritDataAttributes: !0,
       ...t
     }, this.state = {
-      pointer: { ...h },
-      target: { ...h },
-      smooth: { ...h },
+      pointer: { ...f },
+      target: { ...f },
+      smooth: { ...f },
       velocity: { x: 0, y: 0 },
       displacement: { x: 0, y: 0 },
       angle: 0,
@@ -329,130 +393,191 @@ class C {
       hasReceivedInput: !1,
       shape: null,
       interaction: {}
-    }, this.hoverSelectors = new Set(this.options.hoverSelectors ?? m), this.hoverSelectorString = Array.from(this.hoverSelectors).join(", "), this._stage = new y(this.options.container, this.options.zIndex), this._stage.addSelectors(this.hoverSelectors), this.input = new v(
+    };
+    const e = this.createScope({
+      container: this.options.container,
+      cursor: this.options.cursor,
+      hoverSelectors: this.options.hoverSelectors,
+      cursorPolicy: this.options.cursorPolicy,
+      plugins: this.options.plugins,
+      zIndex: this.options.zIndex
+    });
+    if (this.input = new B(
       this.state,
       this.options,
-      () => this.hoverSelectorString,
-      (e) => {
-        e || this.reset(!0);
-      }
-    ), this.options.plugins?.forEach((e) => this.use(e)), this.bindVisibilityHandling(), this.init();
+      (s) => {
+        s || this.reset();
+      },
+      (s) => this.handleActiveScopeChange(s)
+    ), this.input.setScopes(this._scopes), this.input.setActiveScope(e), this.installPlugins(e), this.options.scopes)
+      for (const s of this.options.scopes) this.addScope(s);
+    this.rebuildStylesheet(), this.bindVisibilityHandling(), this.options.autoStart && this.startLoop();
   }
-  /** Look up a registered plugin by name. */
-  getPlugin(t) {
-    return this.plugins.find((e) => e.name === t);
+  // ─── Public API ───
+  get container() {
+    return (this._activeScope ?? this._scopes[0]).container;
+  }
+  get stage() {
+    return (this._installingScope ?? this._activeScope ?? this._scopes[0]).stage.element;
   }
-  /** Whether the instance is not disabled/suspended and is processing input. */
   get isEnabled() {
     return this.input.isEnabled;
   }
-  /** Enable a plugin by name. */
+  get isRunning() {
+    return this._running;
+  }
+  use(t) {
+    return this.installPlugin(this._scopes[0], t), this;
+  }
+  getPlugin(t) {
+    for (const e of this._scopes) {
+      const s = e.plugins.find((n) => n.name === t);
+      if (s) return s;
+    }
+  }
   enablePlugin(t) {
     const e = this.getPlugin(t);
     e && e.isEnabled === !1 && (e.isEnabled = !0, e.element && (e.element.style.display = ""), e.onEnable?.(this));
   }
-  /** Disable a plugin by name and hide its element. */
   disablePlugin(t) {
     const e = this.getPlugin(t);
-    if (e && e.isEnabled !== !1) {
-      e.isEnabled = !1;
-      const s = () => {
-        e.element && (e.element.style.display = "none"), e.onDisable?.(this);
-      }, i = e.onBeforeDisable?.(this);
-      i && typeof i.then == "function" ? Promise.resolve(i).then(s).catch((n) => {
-        console.error(`[Supermouse] Plugin '${e.name}' onBeforeDisable threw:`, n), s();
-      }) : s();
-    }
+    e && e.isEnabled !== !1 && this.deactivatePlugin(e);
   }
-  /** Toggle a plugin's enabled state by name. */
   togglePlugin(t) {
     const e = this.getPlugin(t);
     e && (e.isEnabled === !1 ? this.enablePlugin(t) : this.disablePlugin(t));
   }
-  /** Add a selector to hover detection and cursor suppression. */
-  registerHoverTarget(t) {
-    this.hoverSelectors.has(t) || (this.hoverSelectors.add(t), this.hoverSelectorString = Array.from(this.hoverSelectors).join(", "), this._stage.addSelector(t));
+  setCursor(t) {
+    this._activeScope && (this._activeScope.cursorMode = t, this.state.cursorMode = t);
+  }
+  addScope(t) {
+    const e = this.createScope(t);
+    return this.input.setScopes(this._scopes), this.installPlugins(e), this.rebuildStylesheet(), {
+      name: e.name,
+      container: e.container,
+      remove: () => this.removeScope(e),
+      setCursor: (s) => this.setScopeCursor(e, s)
+    };
   }
-  /** The DOM element the instance is scoped to. */
-  get container() {
-    return this.options.container;
+  enable() {
+    this.input.isEnabled = !0, this.input.hasSeenPointer && (this.state.target.x = this.state.smooth.x = this.state.pointer.x, this.state.target.y = this.state.smooth.y = this.state.pointer.y, this.resetMotion(), this.state.hasReceivedInput = !0), this._activeScope && this._activeScope.stage.setNativeCursor(this.resolveCursorState());
   }
-  /** The stage element that plugins append their visuals into. */
-  get stage() {
-    return this._stage.element;
+  disable(t) {
+    this.input.isEnabled = !1, this._activeScope && (this._activeScope.stage.setNativeCursor("auto"), this._activeScope.stage.setVisibility(!1)), t?.reset && this.reset();
   }
-  /** Set the current cursor mode. */
-  setCursor(t) {
-    this.state.cursorMode = t;
+  reset() {
+    this.state.target = { ...f }, this.state.smooth = { ...f }, this.resetMotion(), this.state.angle = 0, this.state.hasReceivedInput = !1, this.state.shape = null, this.state.interaction = {};
   }
-  init() {
-    this.options.autoStart && this.startLoop();
+  start() {
+    this.startLoop();
   }
-  /** Re‑enable input processing and re‑apply cursor state. */
-  enable() {
-    this.input.isEnabled = !0, this.input.hasSeenPointer && (this.state.target.x = this.state.smooth.x = this.state.pointer.x, this.state.target.y = this.state.smooth.y = this.state.pointer.y, this.resetMotion(), this.state.hasReceivedInput = !0), this._stage.setNativeCursor(this.resolveCursorState());
-  }
-  /** Disable input processing and restore native cursor. */
-  disable() {
-    this.input.isEnabled = !1, this._stage.setNativeCursor("auto"), this._stage.setVisibility(!1), this.reset(!0);
-  }
-  /** Temporarily yield to a scoped instance. */
-  suspend() {
-    this.input.isEnabled && (this.isSuspended = !0, this.input.isEnabled = !1, this.input.clearHover(), this._stage.setVisibility(!1));
-  }
-  /** Resume from `suspend()`. */
-  resume() {
-    if (this.isSuspended) {
-      this.isSuspended = !1, this.input.isEnabled = !0, this.state.hasReceivedInput && (this.state.target.x = this.state.smooth.x = this.state.pointer.x, this.state.target.y = this.state.smooth.y = this.state.pointer.y, this.resetMotion());
-      for (let t = this.plugins.length - 1; t >= 0; t--)
-        this.runPluginSafe(this.plugins[t], 0);
-      this._stage.setVisibility(!0);
+  step(t) {
+    this.update(t);
+  }
+  destroy() {
+    this._running = !1, cancelAnimationFrame(this.rafId), this.visibilityAbortController.abort(), this.input.destroy();
+    for (const t of this._scopes) {
+      for (const e of t.plugins)
+        try {
+          e.destroy?.(this);
+        } catch {
+        }
+      t.stage.destroy();
+    }
+    this._scopes = [], this.scopeByContainer.clear(), this._activeScope = null, F();
+  }
+  // ─── Internal ───
+  _running = !1;
+  createScope(t) {
+    const e = new I(t, {
+      cursor: this.options.cursor,
+      hoverSelectors: this.options.hoverSelectors ?? D,
+      cursorPolicy: this.options.cursorPolicy ? x(this.options.cursorPolicy) : w,
+      zIndex: this.options.zIndex,
+      inheritDataAttributes: this.options.inheritDataAttributes
+    });
+    return this._scopes.push(e), this.scopeByContainer.set(e.container, e), e;
+  }
+  removeScope(t) {
+    const e = this._scopes.indexOf(t);
+    if (e !== -1) {
+      for (const s of t.plugins)
+        try {
+          s.destroy?.(this);
+        } catch {
+        }
+      t.plugins.length = 0, t.stage.destroy(), this._scopes.splice(e, 1), this.scopeByContainer.delete(t.container), this.input.setScopes(this._scopes), this._activeScope === t && this.input.setActiveScope(this._scopes[0] ?? null), this.rebuildStylesheet();
     }
   }
-  /** Register a new plugin. */
-  use(t) {
-    if (this.plugins.some((e) => e.name === t.name))
-      return console.warn(`[Supermouse] Plugin "${t.name}" already installed.`), this;
-    t.isEnabled ??= !0;
-    try {
-      t.install?.(this);
-    } catch (e) {
-      return console.error(`[Supermouse] Failed to install plugin '${t.name}'.`, e), this;
+  setScopeCursor(t, e) {
+    t.cursorMode = e, t === this._activeScope && (this.state.cursorMode = e);
+  }
+  installPlugins(t) {
+    if (t.config.plugins)
+      for (const e of t.config.plugins) this.installPlugin(t, e);
+  }
+  installPlugin(t, e) {
+    if (!t.plugins.some((s) => s.name === e.name)) {
+      e.isEnabled ??= !0, this._installingScope = t;
+      try {
+        e.install?.(this);
+      } catch {
+        this._installingScope = null;
+        return;
+      }
+      this._installingScope = null, t.plugins.push(e), t.plugins.sort((s, n) => (s.priority ?? 0) - (n.priority ?? 0)), t !== this._activeScope && (e.isEnabled = !1, e.element && (e.element.style.display = "none"));
     }
-    return this.plugins.push(t), this.plugins.sort((e, s) => (e.priority ?? 0) - (s.priority ?? 0)), this;
   }
-  /** Reset physics; optionally clear all input state. */
-  reset(t = !1) {
-    this.state.target = { ...h }, this.state.smooth = { ...h }, this.resetMotion(), this.state.angle = 0, t && (this.state.hasReceivedInput = !1, this.state.shape = null, this.state.interaction = {});
+  handleActiveScopeChange(t) {
+    const e = this._activeScope;
+    if (e !== t) {
+      if (e)
+        for (const s of e.plugins) this.deactivatePlugin(s);
+      if (this._activeScope = t, t) {
+        this.state.cursorMode = t.cursorMode;
+        for (const s of t.plugins) this.activatePlugin(s);
+      }
+    }
   }
-  startLoop() {
-    this.isRunning || (this.isRunning = !0, !document.hidden && (this.lastTime = performance.now(), this.rafId = requestAnimationFrame(this.tick)));
+  activatePlugin(t) {
+    t.isEnabled === !1 && (t.isEnabled = !0, t.element && (t.element.style.display = ""), t.onEnable?.(this));
   }
-  /** Start the animation loop. */
-  start() {
-    this.startLoop();
+  deactivatePlugin(t) {
+    if (t.isEnabled === !1) return;
+    t.isEnabled = !1;
+    const e = () => {
+      t.element && (t.element.style.display = "none"), t.onDisable?.(this);
+    }, s = t.onBeforeDisable?.(this);
+    s && typeof s.then == "function" ? Promise.resolve(s).then(e).catch((n) => {
+      e();
+    }) : e();
   }
-  /** Manually step the animation loop. */
-  step(t) {
-    this.update(t);
+  rebuildStylesheet() {
+    const t = [];
+    for (const e of this._scopes) t.push(...e.buildRules());
+    V(t);
   }
   runPluginSafe(t, e) {
     if (t.isEnabled !== !1)
       try {
         t.update?.(this, e);
-      } catch (s) {
-        console.error(`[Supermouse] Plugin '${t.name}' crashed and has been disabled.`, s), t.isEnabled = !1, this.crashedPlugins.push(t);
+      } catch {
+        t.isEnabled = !1, this.crashedPlugins.push(t);
       }
   }
   cleanupCrashedPlugins() {
     if (this.crashedPlugins.length !== 0) {
       for (const t of this.crashedPlugins) {
-        const e = this.plugins.indexOf(t);
-        e > -1 && this.plugins.splice(e, 1);
+        for (const e of this._scopes) {
+          const s = e.plugins.indexOf(t);
+          if (s !== -1) {
+            e.plugins.splice(s, 1);
+            break;
+          }
+        }
         try {
           t.onDisable?.(this), t.destroy?.(this);
-        } catch (s) {
-          console.error(`[Supermouse] Failed to cleanup crashed plugin '${t.name}'.`, s);
+        } catch {
         }
         t.element?.remove();
       }
@@ -460,10 +585,10 @@ class C {
     }
   }
   resolveStageVisibility() {
-    return this.state.cursorMode === "native" ? !1 : this.state.cursorMode === "both" ? this.input.isEnabled && this.state.hasReceivedInput : this.state.cursorMode === "custom" ? this.input.isEnabled && this.state.hasReceivedInput : this.input.isEnabled && !this.state.isNative && this.state.hasReceivedInput;
+    return this.state.cursorMode === "native" ? !1 : this.state.cursorMode === "custom" || this.state.cursorMode === "both" ? this.input.isEnabled && this.state.hasReceivedInput : this.input.isEnabled && !this.state.isNative && this.state.hasReceivedInput;
   }
   resolveCursorState() {
-    return !this.input.isEnabled || this.state.cursorMode === "both" || this.state.cursorMode === "native" ? "auto" : this.state.cursorMode === "custom" ? "none" : this.state.isNative || !this.state.hasReceivedInput ? "auto" : "none";
+    return !this.input.isEnabled || this.state.cursorMode === "native" || this.state.cursorMode === "both" ? "auto" : this.state.cursorMode === "custom" ? "none" : this.state.isNative || !this.state.hasReceivedInput ? "auto" : "none";
   }
   resetMotion() {
     this.state.velocity = { x: 0, y: 0 }, this.state.displacement = { x: 0, y: 0 };
@@ -471,38 +596,68 @@ class C {
   update(t) {
     const e = t - this.lastTime, s = Math.min(e / 1e3, 0.1);
     this.lastTime = t;
-    const i = this.input.getCurrentTarget();
-    i && !i.isConnected ? this.input.clearHover() : i && this.input.parseDOMInteraction(i), this._stage.setVisibility(this.resolveStageVisibility()), this.input.isEnabled && this._stage.setNativeCursor(this.resolveCursorState()), this.input.isEnabled && this.state.hasReceivedInput && (this.state.target.x = this.state.pointer.x, this.state.target.y = this.state.pointer.y);
-    for (let n = 0; n < this.plugins.length; n++)
-      this.runPluginSafe(this.plugins[n], e);
-    if (this.cleanupCrashedPlugins(), this.input.isEnabled) {
-      const n = this.state.reducedMotion ? 1e3 : 1 / this.options.smoothness * 2, r = this.state.smooth.x, a = this.state.smooth.y;
-      this.state.smooth.x = d(this.state.smooth.x, this.state.target.x, n, s), this.state.smooth.y = d(this.state.smooth.y, this.state.target.y, n, s), this.state.displacement.x = this.state.target.x - this.state.smooth.x, this.state.displacement.y = this.state.target.y - this.state.smooth.y, s > 0 ? (this.state.velocity.x = (this.state.smooth.x - r) / s, this.state.velocity.y = (this.state.smooth.y - a) / s) : (this.state.velocity.x = 0, this.state.velocity.y = 0);
-      const { x: l, y: u } = this.state.velocity;
-      (Math.abs(l) > 0.1 || Math.abs(u) > 0.1) && (this.state.angle = Math.atan2(u, l) * (180 / Math.PI));
+    const n = this.input.getCurrentTarget();
+    n && !n.isConnected ? this.input.clearHover() : n && this.input.parseDOMInteraction(n);
+    const r = this._activeScope;
+    if (r) {
+      r.stage.setVisibility(this.resolveStageVisibility()), this.input.isEnabled && r.stage.setNativeCursor(this.resolveCursorState());
+      for (let o = 0; o < r.plugins.length; o++)
+        this.runPluginSafe(r.plugins[o], e);
+    }
+    if (this.cleanupCrashedPlugins(), this.input.isEnabled && this.state.hasReceivedInput && (this.state.target.x = this.state.pointer.x, this.state.target.y = this.state.pointer.y), this.input.isEnabled) {
+      const o = this.state.reducedMotion ? 1e3 : 1 / this.options.smoothness * 2, d = this.state.smooth.x, c = this.state.smooth.y;
+      this.state.smooth.x = P(this.state.smooth.x, this.state.target.x, o, s), this.state.smooth.y = P(this.state.smooth.y, this.state.target.y, o, s), this.state.displacement.x = this.state.target.x - this.state.smooth.x, this.state.displacement.y = this.state.target.y - this.state.smooth.y, s > 0 ? (this.state.velocity.x = (this.state.smooth.x - d) / s, this.state.velocity.y = (this.state.smooth.y - c) / s) : (this.state.velocity.x = 0, this.state.velocity.y = 0);
+      const { x: a, y: h } = this.state.velocity;
+      (Math.abs(a) > 0.1 || Math.abs(h) > 0.1) && (this.state.angle = Math.atan2(h, a) * (180 / Math.PI));
     }
   }
   tick = (t) => {
-    this.update(t), this.isRunning && (this.rafId = requestAnimationFrame(this.tick));
+    this.update(t), this._running && (this.rafId = requestAnimationFrame(this.tick));
   };
-  /** Pause rAF loop when tab hidden; resume on visible. */
   bindVisibilityHandling() {
     document.addEventListener(
       "visibilitychange",
       () => {
-        this.isRunning && (document.hidden ? cancelAnimationFrame(this.rafId) : (this.lastTime = performance.now(), this.rafId = requestAnimationFrame(this.tick)));
+        this._running && (document.hidden ? cancelAnimationFrame(this.rafId) : (this.lastTime = performance.now(), this.rafId = requestAnimationFrame(this.tick)));
       },
       { signal: this.visibilityAbortController.signal }
     );
   }
-  /** Destroy the instance, freeing all resources. */
-  destroy() {
-    this.isRunning = !1, cancelAnimationFrame(this.rafId), this.visibilityAbortController.abort(), this.input.destroy(), this._stage.destroy(), this.plugins.forEach((t) => t.destroy?.(this)), this.plugins = [];
+  startLoop() {
+    this._running || (this._running = !0, !document.hidden && (this.lastTime = performance.now(), this.rafId = requestAnimationFrame(this.tick)));
+  }
+  /**
+   * @deprecated Prefer setting `hoverSelectors` at scope creation, or use
+   * `definePlugin`'s `selector` option. This method is kept for raw-object
+   * plugins and runtime extension; it mutates the active scope's selector set.
+   */
+  registerHoverTarget(t) {
+    const e = this._installingScope ?? this._activeScope ?? this._scopes[0];
+    if (e)
+      for (const s of t.split(",")) {
+        const n = s.trim();
+        n && e.hoverSelectors.add(n);
+      }
+  }
+  /**
+   * @deprecated Read from the active scope instead. Exposed for tests and
+   * debugging only.
+   */
+  get hoverSelectors() {
+    const t = this._activeScope ?? this._scopes[0];
+    return t ? t.hoverSelectors : /* @__PURE__ */ new Set();
+  }
+  /**
+   * @deprecated Read from the active scope instead. Exposed for tests and
+   * debugging only.
+   */
+  get plugins() {
+    const t = this._activeScope ?? this._scopes[0];
+    return t ? t.plugins : [];
   }
 }
 export {
-  m as DEFAULT_HOVER_SELECTORS,
-  v as Input,
-  y as Stage,
-  C as Supermouse
+  w as DEFAULT_CURSOR_POLICY,
+  D as DEFAULT_HOVER_SELECTORS,
+  Q as Supermouse
 };