@bitovi/vybit 0.4.4 → 0.4.6

package/overlay/dist/overlay.js

@@ -1,5 +1,1126 @@
 "use strict";
 (() => {
+  // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+  var min = Math.min;
+  var max = Math.max;
+  var round = Math.round;
+  var createCoords = (v) => ({
+    x: v,
+    y: v
+  });
+  var oppositeSideMap = {
+    left: "right",
+    right: "left",
+    bottom: "top",
+    top: "bottom"
+  };
+  function evaluate(value, param) {
+    return typeof value === "function" ? value(param) : value;
+  }
+  function getSide(placement) {
+    return placement.split("-")[0];
+  }
+  function getAlignment(placement) {
+    return placement.split("-")[1];
+  }
+  function getOppositeAxis(axis) {
+    return axis === "x" ? "y" : "x";
+  }
+  function getAxisLength(axis) {
+    return axis === "y" ? "height" : "width";
+  }
+  function getSideAxis(placement) {
+    const firstChar = placement[0];
+    return firstChar === "t" || firstChar === "b" ? "y" : "x";
+  }
+  function getAlignmentAxis(placement) {
+    return getOppositeAxis(getSideAxis(placement));
+  }
+  function getAlignmentSides(placement, rects, rtl) {
+    if (rtl === void 0) {
+      rtl = false;
+    }
+    const alignment = getAlignment(placement);
+    const alignmentAxis = getAlignmentAxis(placement);
+    const length = getAxisLength(alignmentAxis);
+    let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+    if (rects.reference[length] > rects.floating[length]) {
+      mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+    }
+    return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+  }
+  function getExpandedPlacements(placement) {
+    const oppositePlacement = getOppositePlacement(placement);
+    return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+  }
+  function getOppositeAlignmentPlacement(placement) {
+    return placement.includes("start") ? placement.replace("start", "end") : placement.replace("end", "start");
+  }
+  var lrPlacement = ["left", "right"];
+  var rlPlacement = ["right", "left"];
+  var tbPlacement = ["top", "bottom"];
+  var btPlacement = ["bottom", "top"];
+  function getSideList(side, isStart, rtl) {
+    switch (side) {
+      case "top":
+      case "bottom":
+        if (rtl) return isStart ? rlPlacement : lrPlacement;
+        return isStart ? lrPlacement : rlPlacement;
+      case "left":
+      case "right":
+        return isStart ? tbPlacement : btPlacement;
+      default:
+        return [];
+    }
+  }
+  function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+    const alignment = getAlignment(placement);
+    let list = getSideList(getSide(placement), direction === "start", rtl);
+    if (alignment) {
+      list = list.map((side) => side + "-" + alignment);
+      if (flipAlignment) {
+        list = list.concat(list.map(getOppositeAlignmentPlacement));
+      }
+    }
+    return list;
+  }
+  function getOppositePlacement(placement) {
+    const side = getSide(placement);
+    return oppositeSideMap[side] + placement.slice(side.length);
+  }
+  function expandPaddingObject(padding) {
+    return {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      ...padding
+    };
+  }
+  function getPaddingObject(padding) {
+    return typeof padding !== "number" ? expandPaddingObject(padding) : {
+      top: padding,
+      right: padding,
+      bottom: padding,
+      left: padding
+    };
+  }
+  function rectToClientRect(rect) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = rect;
+    return {
+      width,
+      height,
+      top: y,
+      left: x,
+      right: x + width,
+      bottom: y + height,
+      x,
+      y
+    };
+  }
+
+  // node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+  function computeCoordsFromPlacement(_ref, placement, rtl) {
+    let {
+      reference,
+      floating
+    } = _ref;
+    const sideAxis = getSideAxis(placement);
+    const alignmentAxis = getAlignmentAxis(placement);
+    const alignLength = getAxisLength(alignmentAxis);
+    const side = getSide(placement);
+    const isVertical = sideAxis === "y";
+    const commonX = reference.x + reference.width / 2 - floating.width / 2;
+    const commonY = reference.y + reference.height / 2 - floating.height / 2;
+    const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+    let coords;
+    switch (side) {
+      case "top":
+        coords = {
+          x: commonX,
+          y: reference.y - floating.height
+        };
+        break;
+      case "bottom":
+        coords = {
+          x: commonX,
+          y: reference.y + reference.height
+        };
+        break;
+      case "right":
+        coords = {
+          x: reference.x + reference.width,
+          y: commonY
+        };
+        break;
+      case "left":
+        coords = {
+          x: reference.x - floating.width,
+          y: commonY
+        };
+        break;
+      default:
+        coords = {
+          x: reference.x,
+          y: reference.y
+        };
+    }
+    switch (getAlignment(placement)) {
+      case "start":
+        coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+      case "end":
+        coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+    }
+    return coords;
+  }
+  async function detectOverflow(state, options) {
+    var _await$platform$isEle;
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      x,
+      y,
+      platform: platform2,
+      rects,
+      elements,
+      strategy
+    } = state;
+    const {
+      boundary = "clippingAncestors",
+      rootBoundary = "viewport",
+      elementContext = "floating",
+      altBoundary = false,
+      padding = 0
+    } = evaluate(options, state);
+    const paddingObject = getPaddingObject(padding);
+    const altContext = elementContext === "floating" ? "reference" : "floating";
+    const element = elements[altBoundary ? altContext : elementContext];
+    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+      boundary,
+      rootBoundary,
+      strategy
+    }));
+    const rect = elementContext === "floating" ? {
+      x,
+      y,
+      width: rects.floating.width,
+      height: rects.floating.height
+    } : rects.reference;
+    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+      x: 1,
+      y: 1
+    } : {
+      x: 1,
+      y: 1
+    };
+    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    }) : rect);
+    return {
+      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+    };
+  }
+  var MAX_RESET_COUNT = 50;
+  var computePosition = async (reference, floating, config) => {
+    const {
+      placement = "bottom",
+      strategy = "absolute",
+      middleware = [],
+      platform: platform2
+    } = config;
+    const platformWithDetectOverflow = platform2.detectOverflow ? platform2 : {
+      ...platform2,
+      detectOverflow
+    };
+    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
+    let rects = await platform2.getElementRects({
+      reference,
+      floating,
+      strategy
+    });
+    let {
+      x,
+      y
+    } = computeCoordsFromPlacement(rects, placement, rtl);
+    let statefulPlacement = placement;
+    let resetCount = 0;
+    const middlewareData = {};
+    for (let i = 0; i < middleware.length; i++) {
+      const currentMiddleware = middleware[i];
+      if (!currentMiddleware) {
+        continue;
+      }
+      const {
+        name,
+        fn
+      } = currentMiddleware;
+      const {
+        x: nextX,
+        y: nextY,
+        data,
+        reset
+      } = await fn({
+        x,
+        y,
+        initialPlacement: placement,
+        placement: statefulPlacement,
+        strategy,
+        middlewareData,
+        rects,
+        platform: platformWithDetectOverflow,
+        elements: {
+          reference,
+          floating
+        }
+      });
+      x = nextX != null ? nextX : x;
+      y = nextY != null ? nextY : y;
+      middlewareData[name] = {
+        ...middlewareData[name],
+        ...data
+      };
+      if (reset && resetCount < MAX_RESET_COUNT) {
+        resetCount++;
+        if (typeof reset === "object") {
+          if (reset.placement) {
+            statefulPlacement = reset.placement;
+          }
+          if (reset.rects) {
+            rects = reset.rects === true ? await platform2.getElementRects({
+              reference,
+              floating,
+              strategy
+            }) : reset.rects;
+          }
+          ({
+            x,
+            y
+          } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+        }
+        i = -1;
+      }
+    }
+    return {
+      x,
+      y,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData
+    };
+  };
+  var flip = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      name: "flip",
+      options,
+      async fn(state) {
+        var _middlewareData$arrow, _middlewareData$flip;
+        const {
+          placement,
+          middlewareData,
+          rects,
+          initialPlacement,
+          platform: platform2,
+          elements
+        } = state;
+        const {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = true,
+          fallbackPlacements: specifiedFallbackPlacements,
+          fallbackStrategy = "bestFit",
+          fallbackAxisSideDirection = "none",
+          flipAlignment = true,
+          ...detectOverflowOptions
+        } = evaluate(options, state);
+        if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+          return {};
+        }
+        const side = getSide(placement);
+        const initialSideAxis = getSideAxis(initialPlacement);
+        const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+        const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+        const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+        const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
+        if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+          fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+        }
+        const placements2 = [initialPlacement, ...fallbackPlacements];
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
+        const overflows = [];
+        let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+        if (checkMainAxis) {
+          overflows.push(overflow[side]);
+        }
+        if (checkCrossAxis) {
+          const sides2 = getAlignmentSides(placement, rects, rtl);
+          overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
+        }
+        overflowsData = [...overflowsData, {
+          placement,
+          overflows
+        }];
+        if (!overflows.every((side2) => side2 <= 0)) {
+          var _middlewareData$flip2, _overflowsData$filter;
+          const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+          const nextPlacement = placements2[nextIndex];
+          if (nextPlacement) {
+            const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+            if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
+            // overflows the main axis.
+            overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
+              return {
+                data: {
+                  index: nextIndex,
+                  overflows: overflowsData
+                },
+                reset: {
+                  placement: nextPlacement
+                }
+              };
+            }
+          }
+          let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+          if (!resetPlacement) {
+            switch (fallbackStrategy) {
+              case "bestFit": {
+                var _overflowsData$filter2;
+                const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === "y";
+                  }
+                  return true;
+                }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                if (placement2) {
+                  resetPlacement = placement2;
+                }
+                break;
+              }
+              case "initialPlacement":
+                resetPlacement = initialPlacement;
+                break;
+            }
+          }
+          if (placement !== resetPlacement) {
+            return {
+              reset: {
+                placement: resetPlacement
+              }
+            };
+          }
+        }
+        return {};
+      }
+    };
+  };
+  var originSides = /* @__PURE__ */ new Set(["left", "top"]);
+  async function convertValueToCoords(state, options) {
+    const {
+      placement,
+      platform: platform2,
+      elements
+    } = state;
+    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+    const side = getSide(placement);
+    const alignment = getAlignment(placement);
+    const isVertical = getSideAxis(placement) === "y";
+    const mainAxisMulti = originSides.has(side) ? -1 : 1;
+    const crossAxisMulti = rtl && isVertical ? -1 : 1;
+    const rawValue = evaluate(options, state);
+    let {
+      mainAxis,
+      crossAxis,
+      alignmentAxis
+    } = typeof rawValue === "number" ? {
+      mainAxis: rawValue,
+      crossAxis: 0,
+      alignmentAxis: null
+    } : {
+      mainAxis: rawValue.mainAxis || 0,
+      crossAxis: rawValue.crossAxis || 0,
+      alignmentAxis: rawValue.alignmentAxis
+    };
+    if (alignment && typeof alignmentAxis === "number") {
+      crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
+    }
+    return isVertical ? {
+      x: crossAxis * crossAxisMulti,
+      y: mainAxis * mainAxisMulti
+    } : {
+      x: mainAxis * mainAxisMulti,
+      y: crossAxis * crossAxisMulti
+    };
+  }
+  var offset = function(options) {
+    if (options === void 0) {
+      options = 0;
+    }
+    return {
+      name: "offset",
+      options,
+      async fn(state) {
+        var _middlewareData$offse, _middlewareData$arrow;
+        const {
+          x,
+          y,
+          placement,
+          middlewareData
+        } = state;
+        const diffCoords = await convertValueToCoords(state, options);
+        if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+          return {};
+        }
+        return {
+          x: x + diffCoords.x,
+          y: y + diffCoords.y,
+          data: {
+            ...diffCoords,
+            placement
+          }
+        };
+      }
+    };
+  };
+
+  // node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+  function hasWindow() {
+    return typeof window !== "undefined";
+  }
+  function getNodeName(node) {
+    if (isNode(node)) {
+      return (node.nodeName || "").toLowerCase();
+    }
+    return "#document";
+  }
+  function getWindow(node) {
+    var _node$ownerDocument;
+    return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  }
+  function getDocumentElement(node) {
+    var _ref;
+    return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+  }
+  function isNode(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof Node || value instanceof getWindow(value).Node;
+  }
+  function isElement(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof Element || value instanceof getWindow(value).Element;
+  }
+  function isHTMLElement(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+  }
+  function isShadowRoot(value) {
+    if (!hasWindow() || typeof ShadowRoot === "undefined") {
+      return false;
+    }
+    return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+  }
+  function isOverflowElement(element) {
+    const {
+      overflow,
+      overflowX,
+      overflowY,
+      display
+    } = getComputedStyle2(element);
+    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
+  }
+  function isTableElement(element) {
+    return /^(table|td|th)$/.test(getNodeName(element));
+  }
+  function isTopLayer(element) {
+    try {
+      if (element.matches(":popover-open")) {
+        return true;
+      }
+    } catch (_e) {
+    }
+    try {
+      return element.matches(":modal");
+    } catch (_e) {
+      return false;
+    }
+  }
+  var willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+  var containRe = /paint|layout|strict|content/;
+  var isNotNone = (value) => !!value && value !== "none";
+  var isWebKitValue;
+  function isContainingBlock(elementOrCss) {
+    const css = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
+    return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
+  }
+  function getContainingBlock(element) {
+    let currentNode = getParentNode(element);
+    while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+      if (isContainingBlock(currentNode)) {
+        return currentNode;
+      } else if (isTopLayer(currentNode)) {
+        return null;
+      }
+      currentNode = getParentNode(currentNode);
+    }
+    return null;
+  }
+  function isWebKit() {
+    if (isWebKitValue == null) {
+      isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
+    }
+    return isWebKitValue;
+  }
+  function isLastTraversableNode(node) {
+    return /^(html|body|#document)$/.test(getNodeName(node));
+  }
+  function getComputedStyle2(element) {
+    return getWindow(element).getComputedStyle(element);
+  }
+  function getNodeScroll(element) {
+    if (isElement(element)) {
+      return {
+        scrollLeft: element.scrollLeft,
+        scrollTop: element.scrollTop
+      };
+    }
+    return {
+      scrollLeft: element.scrollX,
+      scrollTop: element.scrollY
+    };
+  }
+  function getParentNode(node) {
+    if (getNodeName(node) === "html") {
+      return node;
+    }
+    const result = (
+      // Step into the shadow DOM of the parent of a slotted node.
+      node.assignedSlot || // DOM Element detected.
+      node.parentNode || // ShadowRoot detected.
+      isShadowRoot(node) && node.host || // Fallback.
+      getDocumentElement(node)
+    );
+    return isShadowRoot(result) ? result.host : result;
+  }
+  function getNearestOverflowAncestor(node) {
+    const parentNode = getParentNode(node);
+    if (isLastTraversableNode(parentNode)) {
+      return node.ownerDocument ? node.ownerDocument.body : node.body;
+    }
+    if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+      return parentNode;
+    }
+    return getNearestOverflowAncestor(parentNode);
+  }
+  function getOverflowAncestors(node, list, traverseIframes) {
+    var _node$ownerDocument2;
+    if (list === void 0) {
+      list = [];
+    }
+    if (traverseIframes === void 0) {
+      traverseIframes = true;
+    }
+    const scrollableAncestor = getNearestOverflowAncestor(node);
+    const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+    const win = getWindow(scrollableAncestor);
+    if (isBody) {
+      const frameElement = getFrameElement(win);
+      return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+    } else {
+      return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+    }
+  }
+  function getFrameElement(win) {
+    return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+  }
+
+  // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+  function getCssDimensions(element) {
+    const css = getComputedStyle2(element);
+    let width = parseFloat(css.width) || 0;
+    let height = parseFloat(css.height) || 0;
+    const hasOffset = isHTMLElement(element);
+    const offsetWidth = hasOffset ? element.offsetWidth : width;
+    const offsetHeight = hasOffset ? element.offsetHeight : height;
+    const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+    if (shouldFallback) {
+      width = offsetWidth;
+      height = offsetHeight;
+    }
+    return {
+      width,
+      height,
+      $: shouldFallback
+    };
+  }
+  function unwrapElement(element) {
+    return !isElement(element) ? element.contextElement : element;
+  }
+  function getScale(element) {
+    const domElement = unwrapElement(element);
+    if (!isHTMLElement(domElement)) {
+      return createCoords(1);
+    }
+    const rect = domElement.getBoundingClientRect();
+    const {
+      width,
+      height,
+      $
+    } = getCssDimensions(domElement);
+    let x = ($ ? round(rect.width) : rect.width) / width;
+    let y = ($ ? round(rect.height) : rect.height) / height;
+    if (!x || !Number.isFinite(x)) {
+      x = 1;
+    }
+    if (!y || !Number.isFinite(y)) {
+      y = 1;
+    }
+    return {
+      x,
+      y
+    };
+  }
+  var noOffsets = /* @__PURE__ */ createCoords(0);
+  function getVisualOffsets(element) {
+    const win = getWindow(element);
+    if (!isWebKit() || !win.visualViewport) {
+      return noOffsets;
+    }
+    return {
+      x: win.visualViewport.offsetLeft,
+      y: win.visualViewport.offsetTop
+    };
+  }
+  function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+    if (isFixed === void 0) {
+      isFixed = false;
+    }
+    if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+      return false;
+    }
+    return isFixed;
+  }
+  function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+    if (includeScale === void 0) {
+      includeScale = false;
+    }
+    if (isFixedStrategy === void 0) {
+      isFixedStrategy = false;
+    }
+    const clientRect = element.getBoundingClientRect();
+    const domElement = unwrapElement(element);
+    let scale = createCoords(1);
+    if (includeScale) {
+      if (offsetParent) {
+        if (isElement(offsetParent)) {
+          scale = getScale(offsetParent);
+        }
+      } else {
+        scale = getScale(element);
+      }
+    }
+    const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+    let x = (clientRect.left + visualOffsets.x) / scale.x;
+    let y = (clientRect.top + visualOffsets.y) / scale.y;
+    let width = clientRect.width / scale.x;
+    let height = clientRect.height / scale.y;
+    if (domElement) {
+      const win = getWindow(domElement);
+      const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+      let currentWin = win;
+      let currentIFrame = getFrameElement(currentWin);
+      while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+        const iframeScale = getScale(currentIFrame);
+        const iframeRect = currentIFrame.getBoundingClientRect();
+        const css = getComputedStyle2(currentIFrame);
+        const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+        const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+        x *= iframeScale.x;
+        y *= iframeScale.y;
+        width *= iframeScale.x;
+        height *= iframeScale.y;
+        x += left;
+        y += top;
+        currentWin = getWindow(currentIFrame);
+        currentIFrame = getFrameElement(currentWin);
+      }
+    }
+    return rectToClientRect({
+      width,
+      height,
+      x,
+      y
+    });
+  }
+  function getWindowScrollBarX(element, rect) {
+    const leftScroll = getNodeScroll(element).scrollLeft;
+    if (!rect) {
+      return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+    }
+    return rect.left + leftScroll;
+  }
+  function getHTMLOffset(documentElement, scroll) {
+    const htmlRect = documentElement.getBoundingClientRect();
+    const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+    const y = htmlRect.top + scroll.scrollTop;
+    return {
+      x,
+      y
+    };
+  }
+  function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+    let {
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    } = _ref;
+    const isFixed = strategy === "fixed";
+    const documentElement = getDocumentElement(offsetParent);
+    const topLayer = elements ? isTopLayer(elements.floating) : false;
+    if (offsetParent === documentElement || topLayer && isFixed) {
+      return rect;
+    }
+    let scroll = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
+    let scale = createCoords(1);
+    const offsets = createCoords(0);
+    const isOffsetParentAnElement = isHTMLElement(offsetParent);
+    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+        scroll = getNodeScroll(offsetParent);
+      }
+      if (isOffsetParentAnElement) {
+        const offsetRect = getBoundingClientRect(offsetParent);
+        scale = getScale(offsetParent);
+        offsets.x = offsetRect.x + offsetParent.clientLeft;
+        offsets.y = offsetRect.y + offsetParent.clientTop;
+      }
+    }
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+    return {
+      width: rect.width * scale.x,
+      height: rect.height * scale.y,
+      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+    };
+  }
+  function getClientRects(element) {
+    return Array.from(element.getClientRects());
+  }
+  function getDocumentRect(element) {
+    const html = getDocumentElement(element);
+    const scroll = getNodeScroll(element);
+    const body = element.ownerDocument.body;
+    const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+    const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+    let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+    const y = -scroll.scrollTop;
+    if (getComputedStyle2(body).direction === "rtl") {
+      x += max(html.clientWidth, body.clientWidth) - width;
+    }
+    return {
+      width,
+      height,
+      x,
+      y
+    };
+  }
+  var SCROLLBAR_MAX = 25;
+  function getViewportRect(element, strategy) {
+    const win = getWindow(element);
+    const html = getDocumentElement(element);
+    const visualViewport = win.visualViewport;
+    let width = html.clientWidth;
+    let height = html.clientHeight;
+    let x = 0;
+    let y = 0;
+    if (visualViewport) {
+      width = visualViewport.width;
+      height = visualViewport.height;
+      const visualViewportBased = isWebKit();
+      if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
+        x = visualViewport.offsetLeft;
+        y = visualViewport.offsetTop;
+      }
+    }
+    const windowScrollbarX = getWindowScrollBarX(html);
+    if (windowScrollbarX <= 0) {
+      const doc = html.ownerDocument;
+      const body = doc.body;
+      const bodyStyles = getComputedStyle(body);
+      const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+      const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+      if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+        width -= clippingStableScrollbarWidth;
+      }
+    } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+      width += windowScrollbarX;
+    }
+    return {
+      width,
+      height,
+      x,
+      y
+    };
+  }
+  function getInnerBoundingClientRect(element, strategy) {
+    const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
+    const top = clientRect.top + element.clientTop;
+    const left = clientRect.left + element.clientLeft;
+    const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+    const width = element.clientWidth * scale.x;
+    const height = element.clientHeight * scale.y;
+    const x = left * scale.x;
+    const y = top * scale.y;
+    return {
+      width,
+      height,
+      x,
+      y
+    };
+  }
+  function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+    let rect;
+    if (clippingAncestor === "viewport") {
+      rect = getViewportRect(element, strategy);
+    } else if (clippingAncestor === "document") {
+      rect = getDocumentRect(getDocumentElement(element));
+    } else if (isElement(clippingAncestor)) {
+      rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+    } else {
+      const visualOffsets = getVisualOffsets(element);
+      rect = {
+        x: clippingAncestor.x - visualOffsets.x,
+        y: clippingAncestor.y - visualOffsets.y,
+        width: clippingAncestor.width,
+        height: clippingAncestor.height
+      };
+    }
+    return rectToClientRect(rect);
+  }
+  function hasFixedPositionAncestor(element, stopNode) {
+    const parentNode = getParentNode(element);
+    if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+      return false;
+    }
+    return getComputedStyle2(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+  }
+  function getClippingElementAncestors(element, cache) {
+    const cachedResult = cache.get(element);
+    if (cachedResult) {
+      return cachedResult;
+    }
+    let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
+    let currentContainingBlockComputedStyle = null;
+    const elementIsFixed = getComputedStyle2(element).position === "fixed";
+    let currentNode = elementIsFixed ? getParentNode(element) : element;
+    while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+      const computedStyle = getComputedStyle2(currentNode);
+      const currentNodeIsContaining = isContainingBlock(currentNode);
+      if (!currentNodeIsContaining && computedStyle.position === "fixed") {
+        currentContainingBlockComputedStyle = null;
+      }
+      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === "absolute" || currentContainingBlockComputedStyle.position === "fixed") || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+      if (shouldDropCurrentNode) {
+        result = result.filter((ancestor) => ancestor !== currentNode);
+      } else {
+        currentContainingBlockComputedStyle = computedStyle;
+      }
+      currentNode = getParentNode(currentNode);
+    }
+    cache.set(element, result);
+    return result;
+  }
+  function getClippingRect(_ref) {
+    let {
+      element,
+      boundary,
+      rootBoundary,
+      strategy
+    } = _ref;
+    const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+    const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+    const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+    let top = firstRect.top;
+    let right = firstRect.right;
+    let bottom = firstRect.bottom;
+    let left = firstRect.left;
+    for (let i = 1; i < clippingAncestors.length; i++) {
+      const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+      top = max(rect.top, top);
+      right = min(rect.right, right);
+      bottom = min(rect.bottom, bottom);
+      left = max(rect.left, left);
+    }
+    return {
+      width: right - left,
+      height: bottom - top,
+      x: left,
+      y: top
+    };
+  }
+  function getDimensions(element) {
+    const {
+      width,
+      height
+    } = getCssDimensions(element);
+    return {
+      width,
+      height
+    };
+  }
+  function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+    const isOffsetParentAnElement = isHTMLElement(offsetParent);
+    const documentElement = getDocumentElement(offsetParent);
+    const isFixed = strategy === "fixed";
+    const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+    let scroll = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
+    const offsets = createCoords(0);
+    function setLeftRTLScrollbarOffset() {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+        scroll = getNodeScroll(offsetParent);
+      }
+      if (isOffsetParentAnElement) {
+        const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+        offsets.x = offsetRect.x + offsetParent.clientLeft;
+        offsets.y = offsetRect.y + offsetParent.clientTop;
+      } else if (documentElement) {
+        setLeftRTLScrollbarOffset();
+      }
+    }
+    if (isFixed && !isOffsetParentAnElement && documentElement) {
+      setLeftRTLScrollbarOffset();
+    }
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+    const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+    const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
+    return {
+      x,
+      y,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+  function isStaticPositioned(element) {
+    return getComputedStyle2(element).position === "static";
+  }
+  function getTrueOffsetParent(element, polyfill) {
+    if (!isHTMLElement(element) || getComputedStyle2(element).position === "fixed") {
+      return null;
+    }
+    if (polyfill) {
+      return polyfill(element);
+    }
+    let rawOffsetParent = element.offsetParent;
+    if (getDocumentElement(element) === rawOffsetParent) {
+      rawOffsetParent = rawOffsetParent.ownerDocument.body;
+    }
+    return rawOffsetParent;
+  }
+  function getOffsetParent(element, polyfill) {
+    const win = getWindow(element);
+    if (isTopLayer(element)) {
+      return win;
+    }
+    if (!isHTMLElement(element)) {
+      let svgOffsetParent = getParentNode(element);
+      while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+        if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+          return svgOffsetParent;
+        }
+        svgOffsetParent = getParentNode(svgOffsetParent);
+      }
+      return win;
+    }
+    let offsetParent = getTrueOffsetParent(element, polyfill);
+    while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+      offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+    }
+    if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+      return win;
+    }
+    return offsetParent || getContainingBlock(element) || win;
+  }
+  var getElementRects = async function(data) {
+    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+    const getDimensionsFn = this.getDimensions;
+    const floatingDimensions = await getDimensionsFn(data.floating);
+    return {
+      reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+      floating: {
+        x: 0,
+        y: 0,
+        width: floatingDimensions.width,
+        height: floatingDimensions.height
+      }
+    };
+  };
+  function isRTL(element) {
+    return getComputedStyle2(element).direction === "rtl";
+  }
+  var platform = {
+    convertOffsetParentRelativeRectToViewportRelativeRect,
+    getDocumentElement,
+    getClippingRect,
+    getOffsetParent,
+    getElementRects,
+    getClientRects,
+    getDimensions,
+    getScale,
+    isElement,
+    isRTL
+  };
+  var offset2 = offset;
+  var flip2 = flip;
+  var computePosition2 = (reference, floating, options) => {
+    const cache = /* @__PURE__ */ new Map();
+    const mergedOptions = {
+      platform,
+      ...options
+    };
+    const platformWithCache = {
+      ...mergedOptions.platform,
+      _c: cache
+    };
+    return computePosition(reference, floating, {
+      ...mergedOptions,
+      platform: platformWithCache
+    });
+  };
+
   // overlay/src/ws.ts
   var socket = null;
   var connected = false;
@@ -557,6 +1678,7 @@ ${pad}</${tag}>`;
   // overlay/src/patcher.ts
   var previewState = null;
   var previewStyleEl = null;
+  var committedStyleEl = null;
   var previewGeneration = 0;
   async function applyPreview(elements, oldClass, newClass, serverOrigin) {
     const gen = ++previewGeneration;
@@ -608,6 +1730,23 @@ ${pad}</${tag}>`;
   function getPreviewState() {
     return previewState;
   }
+  function commitPreview() {
+    previewGeneration++;
+    previewState = null;
+    if (previewStyleEl) {
+      const css = previewStyleEl.textContent || "";
+      if (css) {
+        if (!committedStyleEl) {
+          committedStyleEl = document.createElement("style");
+          committedStyleEl.setAttribute("data-tw-committed", "");
+          document.head.appendChild(committedStyleEl);
+        }
+        committedStyleEl.textContent += css;
+      }
+      previewStyleEl.remove();
+      previewStyleEl = null;
+    }
+  }
 
   // overlay/src/containers/PopoverContainer.ts
   var PopoverContainer = class {
@@ -629,6 +1768,7 @@ ${pad}</${tag}>`;
       z-index: 999999;
       background: #1e1e2e;
       box-shadow: -4px 0 24px rgba(0,0,0,0.3);
+      pointer-events: auto;
     `;
       const iframe = document.createElement("iframe");
       iframe.src = panelUrl;
@@ -685,6 +1825,7 @@ ${pad}</${tag}>`;
       host.style.display = "flex";
       host.style.flexDirection = "column";
       host.style.overflow = "hidden";
+      host.style.pointerEvents = "auto";
       const handle = document.createElement("div");
       handle.style.cssText = `
       height: 28px;
@@ -792,10 +1933,37 @@ ${pad}</${tag}>`;
     host = null;
     originalPadding = "";
     width = 380;
+    pageWrapper = null;
+    originalBodyOverflow = "";
     open(panelUrl) {
       if (this.host) return;
-      this.originalPadding = document.documentElement.style.paddingRight;
-      document.documentElement.style.paddingRight = `${this.width}px`;
+      this.originalBodyOverflow = document.body.style.overflow;
+      const wrapper = document.createElement("div");
+      wrapper.id = "tw-page-wrapper";
+      wrapper.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: ${this.width}px;
+      bottom: 0;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      background: transparent;
+      z-index: 0;
+    `;
+      const bodyChildren = Array.from(document.body.childNodes);
+      for (const node of bodyChildren) {
+        if (node.id === "tw-visual-editor-host") continue;
+        wrapper.appendChild(node);
+      }
+      const shadowHost2 = document.getElementById("tw-visual-editor-host");
+      if (shadowHost2 && shadowHost2.parentNode) {
+        shadowHost2.parentNode.insertBefore(wrapper, shadowHost2);
+      } else {
+        document.body.appendChild(wrapper);
+      }
+      document.body.style.overflow = "hidden";
+      this.pageWrapper = wrapper;
       const host = document.createElement("div");
       host.className = "container-sidebar";
       host.style.cssText = `
@@ -808,6 +1976,7 @@ ${pad}</${tag}>`;
       background: #1e1e2e;
       box-shadow: -4px 0 24px rgba(0,0,0,0.3);
       display: flex;
+      pointer-events: auto;
     `;
       const resizeHandle = document.createElement("div");
       resizeHandle.style.cssText = `
@@ -835,7 +2004,20 @@ ${pad}</${tag}>`;
       if (this.host) {
         this.host.remove();
         this.host = null;
-        document.documentElement.style.paddingRight = this.originalPadding;
+        if (this.pageWrapper) {
+          const children = Array.from(this.pageWrapper.childNodes);
+          const shadowHost2 = document.getElementById("tw-visual-editor-host");
+          for (const node of children) {
+            if (shadowHost2 && shadowHost2.parentNode) {
+              shadowHost2.parentNode.insertBefore(node, shadowHost2);
+            } else {
+              document.body.appendChild(node);
+            }
+          }
+          this.pageWrapper.remove();
+          this.pageWrapper = null;
+        }
+        document.body.style.overflow = this.originalBodyOverflow || "";
       }
     }
     isOpen() {
@@ -893,6 +2075,12 @@ ${pad}</${tag}>`;
   var currentEquivalentNodes = [];
   var currentTargetEl = null;
   var currentBoundary = null;
+  var currentInstances = [];
+  var addingMode = false;
+  var hoverOutlineEl = null;
+  var hoverTooltipEl = null;
+  var lastHoveredEl = null;
+  var lastMoveTime = 0;
   var containers;
   var activeContainer;
   var OVERLAY_CSS = `
@@ -900,37 +2088,47 @@ ${pad}</${tag}>`;
     position: fixed;
     bottom: 16px;
     right: 16px;
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
-    border: 1px solid #DFE2E2;
+    border: 1.5px solid #DFE2E2;
     cursor: pointer;
     z-index: 999999;
-    background: #F4F5F5;
-    color: #687879;
-    font-size: 18px;
-    line-height: 1;
+    background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
-    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    padding: 0;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
+    animation: vybit-breathe 3s ease-in-out infinite;
+    pointer-events: auto;
+  }
+  @keyframes vybit-breathe {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(0,132,139,0), 0 2px 8px rgba(0,0,0,0.08); }
+    50%       { box-shadow: 0 0 0 3px rgba(0,132,139,0.09), 0 0 12px rgba(0,132,139,0.07), 0 2px 8px rgba(0,0,0,0.08); }
   }
   .toggle-btn:hover {
-    background: #E6E9E9;
     border-color: #00848B;
-    color: #00848B;
-  }
-  .toggle-btn.active {
-    background: #F5532D;
-    border-color: #F5532D;
-    color: #fff;
-    box-shadow: 0 0 0 4px rgba(245, 83, 45, 0.09), 0 2px 8px rgba(0,0,0,0.10);
+    transform: scale(1.08);
+    animation: none;
+    box-shadow: 0 0 0 5px rgba(0,132,139,0.12), 0 0 18px rgba(0,132,139,0.12), 0 2px 8px rgba(0,0,0,0.10);
   }
-  .toggle-btn.active:hover {
-    background: #C73D26;
-    border-color: #C73D26;
+  .toggle-btn:active { transform: scale(0.95); }
+  .toggle-btn svg { display: block; }
+  .toggle-btn .eb-fill { fill: #00848B; }
+  @keyframes rainbow-eyes {
+    0%   { fill: #ff4040; }
+    14%  { fill: #ff9800; }
+    28%  { fill: #ffee00; }
+    42%  { fill: #3dff6e; }
+    57%  { fill: #00bfff; }
+    71%  { fill: #5050ff; }
+    85%  { fill: #cc44ff; }
+    100% { fill: #ff4040; }
   }
+  .toggle-btn:hover .eb-eye-l { animation: rainbow-eyes 1.8s linear infinite; }
+  .toggle-btn:hover .eb-eye-r { animation: rainbow-eyes 1.8s linear infinite; animation-delay: -0.45s; }
   .toast {
     position: fixed;
     top: 16px;
@@ -950,38 +2148,208 @@ ${pad}</${tag}>`;
   .toast.visible {
     opacity: 1;
   }
+  @keyframes highlight-pulse {
+    0%, 100% { border-color: #00848B; box-shadow: 0 0 6px rgba(0,132,139,0.5); }
+    50%       { border-color: #F5532D; box-shadow: 0 0 6px rgba(245,83,45,0.5); }
+  }
   .highlight-overlay {
     position: fixed;
     pointer-events: none;
-    border: 2px solid rgba(0, 132, 139, 0.5);
-    background: rgba(0, 132, 139, 0.08);
+    border: 2px solid #00848B;
+    border-radius: 2px;
+    box-sizing: border-box;
     z-index: 999998;
-    transition: all 0.15s ease;
+    animation: highlight-pulse 2s ease-in-out infinite;
   }
-  .draw-btn {
+  /* Hover preview \u2014 lightweight outline shown while selection mode is active */
+  .hover-target-outline {
     position: fixed;
+    pointer-events: none;
+    border: 2px solid #00848B;
+    border-radius: 2px;
+    box-sizing: border-box;
     z-index: 999999;
-    width: 28px;
-    height: 28px;
+    transition: top 80ms ease, left 80ms ease, width 80ms ease, height 80ms ease;
+  }
+  .hover-tooltip {
+    position: fixed;
+    pointer-events: none;
+    z-index: 1000000;
+    background: #003D40;
+    color: #E0F5F6;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 11px;
+    line-height: 1;
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .hover-tooltip .ht-dim { opacity: 0.55; }
+  /* \u2500\u2500 Element toolbar \u2014 single connected dark bar \u2500\u2500 */
+  .el-toolbar {
+    position: fixed;
+    z-index: 999999;
+    display: flex;
+    align-items: stretch;
+    background: #003D40;
     border-radius: 6px;
+    overflow: hidden;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
+    pointer-events: auto;
+    height: 30px;
+  }
+  .el-toolbar-sep {
+    width: 1px;
+    background: rgba(255,255,255,0.15);
+    flex-shrink: 0;
+    align-self: stretch;
+  }
+  /* Base style for all buttons inside the toolbar */
+  .draw-btn, .el-pick-btn, .el-add-btn {
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    color: #E0F5F6;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-size: 11px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding: 0 10px;
+    height: 30px;
+    white-space: nowrap;
+    transition: background 0.12s;
+    pointer-events: auto;
+  }
+  .draw-btn { padding: 0 9px; }
+  .el-pick-btn { gap: 3px; padding: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
+  .el-pick-btn svg { opacity: 0.7; flex-shrink: 0; }
+  .el-add-btn { padding: 0 10px; font-size: 15px; font-weight: 400; }
+  .draw-btn:hover, .el-pick-btn:hover, .el-add-btn:hover,
+  .el-pick-btn.open {
+    background: rgba(255,255,255,0.12);
+  }
+  /* \u2500\u2500 Instance picker popover \u2500\u2500 */
+  .el-picker {
+    position: fixed;
+    z-index: 1000000;
+    background: #fff;
     border: 1px solid #DFE2E2;
-    background: #F4F5F5;
+    border-radius: 8px;
+    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
+    min-width: 240px;
+    max-width: 320px;
+    font-family: 'Inter', system-ui, sans-serif;
+    pointer-events: auto;
+    overflow: hidden;
+  }
+  .el-picker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px 6px;
+    border-bottom: 1px solid #DFE2E2;
+  }
+  .el-picker-title {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #687879;
+  }
+  .el-picker-actions {
+    display: flex;
+    gap: 8px;
+  }
+  .el-picker-actions a {
+    font-size: 10px;
     color: #00848B;
-    font-size: 14px;
-    line-height: 1;
+    cursor: pointer;
+    text-decoration: none;
+    font-weight: 500;
+  }
+  .el-picker-actions a:hover { text-decoration: underline; }
+  .el-picker-list {
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+  .el-picker-row {
     display: flex;
     align-items: center;
-    justify-content: center;
+    gap: 8px;
+    padding: 5px 12px;
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-    transition: background 0.15s, border-color 0.15s, transform 0.1s;
-    pointer-events: auto;
+    transition: background 0.1s;
+  }
+  .el-picker-row:hover { background: rgba(0,132,139,0.05); }
+  .el-picker-row input[type=checkbox] {
+    accent-color: #00848B;
+    width: 13px;
+    height: 13px;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+  .el-picker-badge {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1px solid #DFE2E2;
+    background: #F4F5F5;
+    color: #687879;
+    font-size: 8px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
   }
-  .draw-btn:hover {
-    background: #E6E9E9;
+  .el-picker-badge.checked {
     border-color: #00848B;
-    transform: scale(1.08);
+    background: rgba(0,132,139,0.08);
+    color: #00848B;
+  }
+  .el-picker-label {
+    flex: 1;
+    font-size: 11px;
+    color: #334041;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .el-picker-tag {
+    font-size: 9px;
+    color: #A3ADAD;
+    font-weight: 400;
   }
+  .el-picker-footer {
+    padding: 6px 10px;
+    border-top: 1px solid #DFE2E2;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .el-picker-apply {
+    height: 26px;
+    padding: 0 12px;
+    border-radius: 5px;
+    border: none;
+    background: #00848B;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .el-picker-apply:hover { background: #006E74; }
   .draw-popover {
     position: fixed;
     z-index: 999999;
@@ -1053,52 +2421,305 @@ ${pad}</${tag}>`;
     const rect = el.getBoundingClientRect();
     const overlay = document.createElement("div");
     overlay.className = "highlight-overlay";
-    overlay.style.top = `${rect.top}px`;
-    overlay.style.left = `${rect.left}px`;
-    overlay.style.width = `${rect.width}px`;
-    overlay.style.height = `${rect.height}px`;
+    overlay.style.top = `${rect.top - 3}px`;
+    overlay.style.left = `${rect.left - 3}px`;
+    overlay.style.width = `${rect.width + 6}px`;
+    overlay.style.height = `${rect.height + 6}px`;
     shadowRoot.appendChild(overlay);
   }
   function clearHighlights() {
     shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
     removeDrawButton();
   }
-  var drawBtnEl = null;
+  var toolbarEl = null;
   var drawPopoverEl = null;
+  var pickerEl = null;
+  var pickerCloseHandler = null;
+  var selectedInstanceIndices = /* @__PURE__ */ new Set();
   function removeDrawButton() {
-    drawBtnEl?.remove();
-    drawBtnEl = null;
+    toolbarEl?.remove();
+    toolbarEl = null;
     drawPopoverEl?.remove();
     drawPopoverEl = null;
+    pickerEl?.remove();
+    pickerEl = null;
+  }
+  function clearHoverPreview() {
+    hoverOutlineEl?.remove();
+    hoverOutlineEl = null;
+    hoverTooltipEl?.remove();
+    hoverTooltipEl = null;
+    lastHoveredEl = null;
+  }
+  function showHoverPreview(el, componentName) {
+    const rect = el.getBoundingClientRect();
+    if (!hoverOutlineEl) {
+      hoverOutlineEl = document.createElement("div");
+      hoverOutlineEl.className = "hover-target-outline";
+      shadowRoot.appendChild(hoverOutlineEl);
+    }
+    hoverOutlineEl.style.top = `${rect.top - 3}px`;
+    hoverOutlineEl.style.left = `${rect.left - 3}px`;
+    hoverOutlineEl.style.width = `${rect.width + 6}px`;
+    hoverOutlineEl.style.height = `${rect.height + 6}px`;
+    if (!hoverTooltipEl) {
+      hoverTooltipEl = document.createElement("div");
+      hoverTooltipEl.className = "hover-tooltip";
+      shadowRoot.appendChild(hoverTooltipEl);
+    }
+    const tag = el.tagName.toLowerCase();
+    const cls = (typeof el.className === "string" ? el.className.trim().split(/\s+/)[0] : "") ?? "";
+    hoverTooltipEl.innerHTML = `<span class="ht-dim">&lt;</span>${componentName}<span class="ht-dim">&gt;</span> <span class="ht-dim">${tag}${cls ? `.${cls}` : ""}</span>`;
+    const tooltipHeight = 24;
+    const ttTop = rect.top - tooltipHeight - 6;
+    hoverTooltipEl.style.top = `${ttTop < 4 ? rect.bottom + 6 : ttTop}px`;
+    hoverTooltipEl.style.left = `${Math.max(4, Math.min(rect.left, window.innerWidth - 200))}px`;
+  }
+  function mouseMoveHandler(e) {
+    const now = Date.now();
+    if (now - lastMoveTime < 16) return;
+    lastMoveTime = now;
+    const composed = e.composedPath();
+    if (composed.some((n) => n === shadowHost)) {
+      clearHoverPreview();
+      return;
+    }
+    const target = e.target;
+    if (!target || !(target instanceof HTMLElement)) {
+      clearHoverPreview();
+      return;
+    }
+    if (target === lastHoveredEl) return;
+    lastHoveredEl = target;
+    const rect = target.getBoundingClientRect();
+    if (rect.width < 10 || rect.height < 10) {
+      clearHoverPreview();
+      return;
+    }
+    const fiber = getFiber(target);
+    if (!fiber) {
+      clearHoverPreview();
+      return;
+    }
+    const boundary = findComponentBoundary(fiber);
+    if (!boundary) {
+      clearHoverPreview();
+      return;
+    }
+    showHoverPreview(target, boundary.componentName);
+  }
+  var PENCIL_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+</svg>`;
+  var CHEVRON_SVG = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+  async function positionWithFlip(anchor, floating, placement = "top-start") {
+    const { x, y } = await computePosition2(anchor, floating, {
+      placement,
+      middleware: [offset2(6), flip2()]
+    });
+    floating.style.left = `${x}px`;
+    floating.style.top = `${y}px`;
   }
   function showDrawButton(targetEl) {
     removeDrawButton();
-    const rect = targetEl.getBoundingClientRect();
-    const btn = document.createElement("button");
-    btn.className = "draw-btn";
-    btn.innerHTML = "\u270F";
-    btn.title = "Insert drawing canvas";
-    btn.style.left = `${Math.max(0, rect.left - 34)}px`;
-    btn.style.top = `${rect.top - 2}px`;
-    drawBtnEl = btn;
-    shadowRoot.appendChild(btn);
-    btn.addEventListener("click", (e) => {
+    const allEquivalentNodes = [...currentEquivalentNodes];
+    const instanceCount = allEquivalentNodes.length;
+    const toolbar = document.createElement("div");
+    toolbar.className = "el-toolbar";
+    toolbar.style.left = "0px";
+    toolbar.style.top = "0px";
+    shadowRoot.appendChild(toolbar);
+    toolbarEl = toolbar;
+    const drawBtn = document.createElement("button");
+    drawBtn.className = "draw-btn";
+    drawBtn.innerHTML = PENCIL_SVG;
+    drawBtn.title = "Insert drawing canvas";
+    toolbar.appendChild(drawBtn);
+    drawBtn.addEventListener("click", (e) => {
       e.stopPropagation();
+      pickerEl?.remove();
+      pickerEl = null;
       if (drawPopoverEl) {
         drawPopoverEl.remove();
         drawPopoverEl = null;
       } else {
-        showDrawPopover(btn);
+        showDrawPopover(drawBtn);
       }
     });
+    if (instanceCount > 1) {
+      const sep = document.createElement("div");
+      sep.className = "el-toolbar-sep";
+      toolbar.appendChild(sep);
+      const countBtn = document.createElement("button");
+      countBtn.className = "el-pick-btn";
+      const updateCountBtn = (n) => {
+        countBtn.innerHTML = `${n} ${CHEVRON_SVG}`;
+      };
+      updateCountBtn(instanceCount);
+      countBtn.title = "Select which instances to edit";
+      toolbar.appendChild(countBtn);
+      countBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        drawPopoverEl?.remove();
+        drawPopoverEl = null;
+        if (pickerEl) {
+          pickerEl.remove();
+          pickerEl = null;
+          countBtn.classList.remove("open");
+        } else {
+          countBtn.classList.add("open");
+          showInstancePicker(
+            countBtn,
+            () => countBtn.classList.remove("open"),
+            (indices) => {
+              currentEquivalentNodes = indices.map((i) => allEquivalentNodes[i]).filter(Boolean);
+              shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
+              currentEquivalentNodes.forEach((n) => highlightElement(n));
+              updateCountBtn(currentEquivalentNodes.length);
+            }
+          );
+        }
+      });
+      const addBtn = document.createElement("button");
+      addBtn.className = "el-add-btn";
+      addBtn.textContent = "+";
+      addBtn.title = "Add a different element to selection";
+      toolbar.appendChild(addBtn);
+      addBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        pickerEl?.remove();
+        pickerEl = null;
+        drawPopoverEl?.remove();
+        drawPopoverEl = null;
+        addingMode = true;
+        setSelectMode(true);
+        showToast("Click another element to add it to the selection", 2500);
+      });
+    }
+    positionWithFlip(targetEl, toolbar);
+  }
+  function showInstancePicker(anchorBtn, onClose, onApply) {
+    if (pickerCloseHandler) {
+      document.removeEventListener("click", pickerCloseHandler, { capture: true });
+      pickerCloseHandler = null;
+    }
+    pickerEl?.remove();
+    const instances = currentInstances;
+    const allIndices = instances.map((_, i) => i);
+    const selected = new Set(
+      selectedInstanceIndices.size > 0 && selectedInstanceIndices.size <= instances.length ? [...selectedInstanceIndices].filter((i) => i < instances.length) : allIndices
+    );
+    const picker = document.createElement("div");
+    picker.className = "el-picker";
+    picker.style.left = "0px";
+    picker.style.top = "0px";
+    shadowRoot.appendChild(picker);
+    pickerEl = picker;
+    const header = document.createElement("div");
+    header.className = "el-picker-header";
+    const title = document.createElement("span");
+    title.className = "el-picker-title";
+    title.textContent = currentBoundary?.componentName ?? "Instances";
+    const actions = document.createElement("div");
+    actions.className = "el-picker-actions";
+    const allLink = document.createElement("a");
+    allLink.textContent = "All";
+    const noneLink = document.createElement("a");
+    noneLink.textContent = "None";
+    actions.appendChild(allLink);
+    actions.appendChild(noneLink);
+    header.appendChild(title);
+    header.appendChild(actions);
+    picker.appendChild(header);
+    const list = document.createElement("div");
+    list.className = "el-picker-list";
+    picker.appendChild(list);
+    const checkboxes = [];
+    function renderRows() {
+      list.innerHTML = "";
+      checkboxes.length = 0;
+      instances.forEach((inst, i) => {
+        const row = document.createElement("label");
+        row.className = "el-picker-row";
+        const cb = document.createElement("input");
+        cb.type = "checkbox";
+        cb.checked = selected.has(i);
+        cb.addEventListener("change", () => {
+          if (cb.checked) selected.add(i);
+          else selected.delete(i);
+          badge.className = "el-picker-badge" + (cb.checked ? " checked" : "");
+          updateApply();
+        });
+        checkboxes.push(cb);
+        const badge = document.createElement("span");
+        badge.className = "el-picker-badge" + (cb.checked ? " checked" : "");
+        badge.textContent = String(i + 1);
+        const label = document.createElement("span");
+        label.className = "el-picker-label";
+        label.innerHTML = `${inst.label} <span class="el-picker-tag">${inst.parent}</span>`;
+        row.appendChild(cb);
+        row.appendChild(badge);
+        row.appendChild(label);
+        list.appendChild(row);
+      });
+    }
+    renderRows();
+    allLink.addEventListener("click", () => {
+      instances.forEach((_, i) => selected.add(i));
+      renderRows();
+      updateApply();
+    });
+    noneLink.addEventListener("click", () => {
+      selected.clear();
+      renderRows();
+      updateApply();
+    });
+    const footer = document.createElement("div");
+    footer.className = "el-picker-footer";
+    const applyBtn = document.createElement("button");
+    applyBtn.className = "el-picker-apply";
+    footer.appendChild(applyBtn);
+    picker.appendChild(footer);
+    function updateApply() {
+      applyBtn.textContent = `Apply (${selected.size} selected)`;
+    }
+    updateApply();
+    const removePicker = () => {
+      if (pickerCloseHandler) {
+        document.removeEventListener("click", pickerCloseHandler, { capture: true });
+        pickerCloseHandler = null;
+      }
+      pickerEl?.remove();
+      pickerEl = null;
+    };
+    applyBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const selectedIndices = [...selected];
+      selectedInstanceIndices = new Set(selectedIndices);
+      sendTo("panel", { type: "SELECT_MATCHING", indices: selectedIndices });
+      onApply?.(selectedIndices);
+      removePicker();
+      onClose();
+    });
+    positionWithFlip(anchorBtn, picker);
+    setTimeout(() => {
+      pickerCloseHandler = (e) => {
+        const path = e.composedPath();
+        if (!path.includes(picker) && !path.includes(anchorBtn)) {
+          removePicker();
+          onClose();
+        }
+      };
+      document.addEventListener("click", pickerCloseHandler, { capture: true });
+    }, 0);
   }
   function showDrawPopover(anchorBtn) {
     drawPopoverEl?.remove();
-    const btnRect = anchorBtn.getBoundingClientRect();
     const popover = document.createElement("div");
     popover.className = "draw-popover";
-    popover.style.left = `${btnRect.right + 6}px`;
-    popover.style.top = `${btnRect.top}px`;
+    popover.style.left = "0px";
+    popover.style.top = "0px";
     const header = document.createElement("div");
     header.className = "draw-popover-header";
     header.textContent = "Insert Drawing Canvas";
@@ -1127,6 +2748,7 @@ ${pad}</${tag}>`;
     }
     drawPopoverEl = popover;
     shadowRoot.appendChild(popover);
+    positionWithFlip(anchorBtn, popover, "top-start");
     const closeHandler = (e) => {
       const path = e.composedPath();
       if (!path.includes(popover) && !path.includes(anchorBtn)) {
@@ -1189,14 +2811,30 @@ ${pad}</${tag}>`;
     }
     const instances = findAllInstances(rootFiber, boundary.componentType);
     const path = getChildPath(boundary.componentFiber, fiber);
-    clearHighlights();
-    const equivalentNodes = [];
+    const newNodes = [];
     for (const inst of instances) {
       const node = resolvePathToDOM(inst, path);
-      if (node) {
-        equivalentNodes.push(node);
-        highlightElement(node);
+      if (node) newNodes.push(node);
+    }
+    if (addingMode && currentEquivalentNodes.length > 0) {
+      addingMode = false;
+      const merged = [...currentEquivalentNodes];
+      for (const n of newNodes) {
+        if (!merged.includes(n)) merged.push(n);
       }
+      clearHighlights();
+      merged.forEach((n) => highlightElement(n));
+      currentEquivalentNodes = merged;
+      selectedInstanceIndices = /* @__PURE__ */ new Set();
+      if (currentTargetEl) showDrawButton(currentTargetEl);
+      sendTo("panel", { type: "ELEMENT_SELECTED", componentName: currentBoundary?.componentName ?? boundary.componentName, instanceCount: merged.length, classes: currentTargetEl?.className ?? "", tailwindConfig: await fetchTailwindConfig() });
+      return;
+    }
+    clearHighlights();
+    const equivalentNodes = [];
+    for (const node of newNodes) {
+      equivalentNodes.push(node);
+      highlightElement(node);
     }
     if (equivalentNodes.length <= 1) {
       const repeated = findInlineRepeatedNodes(fiber, boundary.componentFiber);
@@ -1219,6 +2857,16 @@ ${pad}</${tag}>`;
     currentEquivalentNodes = equivalentNodes;
     currentTargetEl = targetEl;
     currentBoundary = { componentName: boundary.componentName };
+    selectedInstanceIndices = /* @__PURE__ */ new Set();
+    currentInstances = instances.map((inst, i) => {
+      const domNode = inst.stateNode instanceof HTMLElement ? inst.stateNode : null;
+      const label = domNode ? (domNode.innerText || "").trim().slice(0, 40) || `#${i + 1}` : `#${i + 1}`;
+      const parentFiber = inst.return;
+      const parent = parentFiber?.type?.name ?? "";
+      return { index: i, label, parent };
+    });
+    clearHoverPreview();
+    setSelectMode(false);
     showDrawButton(targetEl);
     const panelUrl = `${SERVER_ORIGIN}/panel`;
     if (!activeContainer.isOpen()) {
@@ -1232,20 +2880,31 @@ ${pad}</${tag}>`;
       tailwindConfig: config
     });
   }
+  function setSelectMode(on) {
+    if (on) {
+      document.documentElement.style.cursor = "crosshair";
+      document.addEventListener("click", clickHandler, { capture: true });
+      document.addEventListener("mousemove", mouseMoveHandler, { passive: true });
+    } else {
+      addingMode = false;
+      document.documentElement.style.cursor = "";
+      document.removeEventListener("click", clickHandler, { capture: true });
+      document.removeEventListener("mousemove", mouseMoveHandler);
+      clearHoverPreview();
+    }
+    sendTo("panel", { type: "SELECT_MODE_CHANGED", active: on });
+  }
   function toggleInspect(btn) {
     active = !active;
     if (active) {
       btn.classList.add("active");
-      document.documentElement.style.cursor = "crosshair";
-      document.addEventListener("click", clickHandler, { capture: true });
       const panelUrl = `${SERVER_ORIGIN}/panel`;
       if (!activeContainer.isOpen()) {
         activeContainer.open(panelUrl);
       }
     } else {
       btn.classList.remove("active");
-      document.documentElement.style.cursor = "";
-      document.removeEventListener("click", clickHandler, { capture: true });
+      setSelectMode(false);
       activeContainer.close();
       revertPreview();
       clearHighlights();
@@ -1435,7 +3094,7 @@ ${pad}</${tag}>`;
   function init() {
     shadowHost = document.createElement("div");
     shadowHost.id = "tw-visual-editor-host";
-    shadowHost.style.cssText = "position:fixed;z-index:2147483647;top:0;left:0;width:0;height:0;";
+    shadowHost.style.cssText = "position:fixed;z-index:2147483647;top:0;left:0;width:0;height:0;pointer-events:none;";
     document.body.appendChild(shadowHost);
     shadowRoot = shadowHost.attachShadow({ mode: "open" });
     const style = document.createElement("style");
@@ -1450,13 +3109,27 @@ ${pad}</${tag}>`;
     activeContainer = containers[getDefaultContainer()];
     const btn = document.createElement("button");
     btn.className = "toggle-btn";
-    btn.textContent = "\u2295";
+    btn.setAttribute("aria-label", "Open VyBit inspector");
+    btn.innerHTML = `<svg width="26" height="27" viewBox="0 0 210 221" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path class="eb-fill" d="M141.54 137.71L103.87 140.38C102.98 140.44 102.2 140.97 101.8 141.77C101.41 142.57 101.47 143.51 101.96 144.25C102.27 144.72 109.46 155.39 121.96 155.39C122.3 155.39 122.65 155.39 123 155.37C138.61 154.64 143.83 141.66 144.05 141.11C144.36 140.31 144.24 139.41 143.73 138.72C143.22 138.03 142.4 137.65 141.54 137.71Z"/>
+    <path class="eb-eye-l eb-fill" d="M80.6401 93.03C76.7801 93.22 73.8 96.5 73.99 100.36L74.7501 115.96C74.9401 119.85 78.2701 122.84 82.1501 122.61C85.9801 122.38 88.9101 119.11 88.7301 115.28L87.9701 99.68C87.7801 95.82 84.5001 92.84 80.6401 93.03Z"/>
+    <path class="eb-eye-r eb-fill" d="M149.46 96.67L150.32 111.72C150.54 115.58 153.85 118.53 157.71 118.31C161.57 118.09 164.52 114.78 164.3 110.92L163.44 95.87C163.22 92.03 159.94 89.08 156.09 89.28C152.22 89.48 149.24 92.79 149.47 96.67H149.46Z"/>
+    <path class="eb-fill" d="M203.62 90.36C200.83 87.64 198.15 86.1 195.79 84.75C194 83.73 192.46 82.84 190.96 81.51C189.22 79.95 187.1 75.74 186.15 73.24C186.14 73.21 186.12 73.17 186.11 73.14C180.84 57.81 173.51 43.77 164.58 32.13C148.57 11.27 129.15 0.16 108.42 0C108.28 0 108.13 0 107.99 0C85.65 0 64.34 13.17 47.95 37.12C42.28 45.4 37.04 56.95 33.2 65.38C32.31 67.35 31.51 69.09 30.84 70.52C29.88 72.54 28.87 74.32 27.74 75.95L21.06 15.98C24.27 14.61 26.42 11.74 26.24 8.54C26 4.26 21.69 1.03 16.61 1.31C11.53 1.59 7.61002 5.29 7.85002 9.57C8.04002 12.85 10.61 15.51 14.09 16.45L16.67 85.85L16.29 86.08C13.19 87.96 9.98002 89.9 7.71002 92.09C4.65002 95.04 2.40002 99.48 1.21002 104.92C-1.62998 117.95 0.120019 138.77 10.82 143.95C18.87 147.85 25.1 154.71 28.83 163.79C42.17 198.91 71.91 219.98 108.4 220.16C108.56 220.16 108.71 220.16 108.87 220.16C133.9 220.16 156.3 210.08 171.97 191.74C183.26 178.53 190.59 161.68 193.54 142.92C194.26 139.76 197.48 136.44 200.62 133.23C204.14 129.62 207.78 125.89 209.22 121.16C210.85 115.82 209.93 96.53 203.62 90.36ZM173.3 73.25C176.99 83.04 179.72 93.27 181.36 103.35C183.29 115.23 183.53 126.81 182.18 137.69C180.99 142.99 176.46 157.5 161.58 165.93C141.26 177.45 110.38 180.84 88.16 174.01C63.16 166.32 48.04 142.7 47.72 110.85C47.39 78.09 63.77 70.45 80.58 65.42C101.92 59.04 133.9 57.44 153.39 61.79C163.19 63.98 168.32 67.53 170.9 70.13C172.08 71.32 172.83 72.4 173.3 73.25ZM162.85 183.94C149.31 199.79 130.66 208.15 108.89 208.15C108.75 208.15 108.61 208.15 108.46 208.15C77.09 207.99 51.5 189.77 40 159.41C39.96 159.32 39.93 159.22 39.89 159.13C36.77 151.59 32.28 145.21 26.65 140.22C26.61 140.17 26.57 140.13 26.53 140.08C23.64 137.25 24.55 133.1 24.74 131.41C26.16 118.65 22.59 108.63 21.57 106.52C20.4 104.1 19.23 105.15 19.49 106.56C19.78 108.18 20.09 110.5 20.28 112.89C21.07 122.72 19.28 131.47 17.02 133.03C16.74 133.22 16.46 133.27 16.16 133.19C16.12 133.17 16.08 133.15 16.04 133.13C13.44 131.87 10.36 119.2 12.92 107.46C13.86 103.16 15.4 101.31 16.02 100.71C17.32 99.45 19.95 97.87 22.48 96.33L23.24 95.87C32.05 90.52 37.38 84.66 41.66 75.64C42.36 74.17 43.18 72.36 44.1 70.33C47.54 62.75 52.75 51.3 57.82 43.89C71.91 23.31 89.7 12 107.96 12C108.07 12 108.18 12 108.29 12C133.67 12.19 154.63 33.4 167.85 60.64C164.47 58.82 160.16 57.16 154.65 55.93C134.31 51.39 101 53.03 78.82 59.67C59.32 65.5 41.33 75.74 41.68 110.91C42.03 145.51 58.73 171.25 86.35 179.75C94.55 182.27 103.85 183.49 113.4 183.49C131.42 183.49 150.35 179.17 164.49 171.16C169.1 168.55 172.84 165.45 175.87 162.21C172.6 170.28 168.23 177.61 162.81 183.95L162.85 183.94ZM197.75 117.65C197.4 118.8 196.34 120.21 195.01 121.7C194.91 115.06 194.32 108.28 193.21 101.43C192.95 99.84 192.67 98.26 192.37 96.69C193.34 97.32 194.27 98.01 195.19 98.9C196.86 101.11 198.85 113.73 197.76 117.66L197.75 117.65Z"/>
+  </svg>`;
     btn.addEventListener("click", () => toggleInspect(btn));
     shadowRoot.appendChild(btn);
     const wsUrl = SERVER_ORIGIN.replace(/^http/, "ws");
     connect(wsUrl);
     onMessage((msg) => {
-      if (msg.type === "PATCH_PREVIEW" && currentEquivalentNodes.length > 0) {
+      if (msg.type === "TOGGLE_SELECT_MODE") {
+        if (msg.active) {
+          setSelectMode(true);
+          const panelUrl = `${SERVER_ORIGIN}/panel`;
+          if (!activeContainer.isOpen()) activeContainer.open(panelUrl);
+        } else {
+          setSelectMode(false);
+        }
+      } else if (msg.type === "PATCH_PREVIEW" && currentEquivalentNodes.length > 0) {
         applyPreview(currentEquivalentNodes, msg.oldClass, msg.newClass, SERVER_ORIGIN);
       } else if (msg.type === "PATCH_REVERT") {
         revertPreview();
@@ -1492,6 +3165,7 @@ ${pad}</${tag}>`;
           }
         });
         showToast("Change staged");
+        commitPreview();
       } else if (msg.type === "CLEAR_HIGHLIGHTS") {
         clearHighlights();
       } else if (msg.type === "SWITCH_CONTAINER") {
@@ -1531,6 +3205,12 @@ ${pad}</${tag}>`;
         if (last) last.remove();
       }
     });
+    window.addEventListener("resize", () => {
+      if (currentEquivalentNodes.length > 0) {
+        shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
+        currentEquivalentNodes.forEach((n) => highlightElement(n));
+      }
+    });
     window.addEventListener("overlay-ws-connected", () => {
       if (wasConnected) {
         showToast("Reconnected");