@lukso/up-connector 0.4.0-dev.a8c9315

package/dist/chunk-6N35TCFT.js

@@ -0,0 +1,852 @@
+// src/avatar.ts
+var DEFAULT_AVATAR_OPTIONS = {
+  // IconView integration options
+  size: "medium",
+  forceUnresolved: false,
+  // Fallback options
+  fallbackColor: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  fallbackText: "?",
+  fallbackImage: "",
+  // Avatar container options
+  avatarSize: "medium",
+  // Behavior options
+  initialPosition: "top-left",
+  hideThreshold: 20,
+  hideOffset: 30,
+  // Animation options
+  transitionDuration: "0.3s",
+  transitionEasing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+  // Container
+  container: typeof document !== "undefined" ? document.body : null
+};
+var DraggableAvatar = class {
+  constructor(options = {}) {
+    this.snapPreviews = /* @__PURE__ */ new Map();
+    // Drag state
+    this.isDragging = false;
+    this.hasDragged = false;
+    this.startX = 0;
+    this.startY = 0;
+    this.initialX = 0;
+    this.initialY = 0;
+    this.dragThreshold = 15;
+    this.isHidden = false;
+    this.iconViewAvailable = false;
+    // Animation state
+    this.isThrobbing = false;
+    this.options = { ...DEFAULT_AVATAR_OPTIONS, ...options };
+    if (!this.options.address && !this.options.fallbackText && !this.options.fallbackImage) {
+      console.warn(
+        "DraggableAvatar: No address, fallbackText, or fallbackImage provided. Avatar may be empty."
+      );
+    }
+    this.init();
+  }
+  // pixels - movement below this is still considered a click
+  /**
+   * Convert size name to pixel value
+   * Based on Tailwind classes: x-small=24px, small=40px, medium=56px, large=80px, x-large=96px, 2x-large=120px
+   */
+  getPixelSize(size) {
+    switch (size) {
+      case "x-small":
+        return 24;
+      case "small":
+        return 40;
+      case "medium":
+        return 56;
+      case "large":
+        return 80;
+      case "x-large":
+        return 96;
+      case "2x-large":
+        return 120;
+    }
+  }
+  /**
+   * Get identicon overhang for a given profile size
+   * The identicon hangs off the bottom-right corner by half its size
+   */
+  getIdenticonOverhang(profileSize) {
+    switch (profileSize) {
+      case "x-small":
+        return 6;
+      // w-3 = 12px, overhang = 6px
+      case "small":
+        return 8;
+      // w-4 = 16px, overhang = 8px
+      case "medium":
+        return 10;
+      // w-5 = 20px, overhang = 10px
+      case "large":
+        return 12;
+      // w-6 = 24px, overhang = 12px
+      case "x-large":
+        return 14;
+      // w-7 = 28px, overhang = 14px
+      case "2x-large":
+        return 18;
+    }
+  }
+  async init() {
+    this.createStyles();
+    await this.checkIconViewAvailability();
+    this.createElement();
+    this.attachEventListeners();
+    this.setInitialPosition();
+  }
+  /**
+   * Safely check for and load IconView component
+   */
+  async checkIconViewAvailability() {
+    if (typeof customElements !== "undefined" && customElements.get("icon-view")) {
+      this.iconViewAvailable = true;
+      return true;
+    }
+    if (this.options.address && !this.iconViewAvailable) {
+      try {
+        if (this.options.componentLoader) {
+          await this.options.componentLoader();
+        } else if (typeof window !== "undefined" && window.loadTransactionViewComponents) {
+          await window.loadTransactionViewComponents();
+        } else {
+          try {
+            await import("@lukso/transaction-view-core");
+          } catch (importError) {
+            console.warn(
+              "Failed to import @lukso/transaction-view-core:",
+              importError
+            );
+          }
+        }
+        this.iconViewAvailable = typeof customElements !== "undefined" && customElements.get("icon-view") !== void 0;
+      } catch (error) {
+        console.warn("Failed to load IconView component:", error);
+        this.iconViewAvailable = false;
+      }
+    }
+    return this.iconViewAvailable;
+  }
+  createStyles() {
+    if (typeof document === "undefined") return;
+    const avatarPixelSize = this.getPixelSize(this.options.avatarSize);
+    const overhang = this.getIdenticonOverhang(this.options.avatarSize);
+    const existingStyles = document.querySelector("#up-connector-avatar-styles");
+    if (existingStyles) {
+      existingStyles.remove();
+    }
+    const style = document.createElement("style");
+    style.id = "up-connector-avatar-styles";
+    style.textContent = `
+      .up-avatar-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        pointer-events: none;
+        z-index: 9999;
+        overflow: hidden;
+      }
+
+      .up-avatar {
+        position: absolute;
+        width: ${avatarPixelSize}px;
+        height: ${avatarPixelSize}px;
+        border-radius: 50%;
+        cursor: move;
+        z-index: 1000;
+        overflow: visible;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: all ${this.options.transitionDuration} ${this.options.transitionEasing};
+        touch-action: none;
+        overflow: visible;
+        background: ${this.options.fallbackColor};
+        border: 3px solid rgba(255, 255, 255, 0.5) !important;
+        outline: none !important;
+        backdrop-filter: blur(10px);
+        pointer-events: auto;
+      }
+
+      .up-avatar * {
+        user-select: none !important;
+        pointer-events: none !important;
+      }
+
+      .up-avatar img {
+        draggable: false !important;
+      }
+
+      .up-avatar:hover {
+        transform: scale(1.05);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .up-avatar:focus {
+        outline: none !important;
+        border: 3px solid rgba(255, 255, 255, 0.6) !important;
+      }
+
+      .up-avatar.dragging {
+        transform: scale(1.1);
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.2);
+        cursor: grabbing;
+      }
+
+      .up-avatar.hidden-left {
+        left: -${this.options.hideOffset}px !important;
+        opacity: 0.8;
+      }
+
+      .up-avatar.hidden-right {
+        right: -${this.options.hideOffset}px !important;
+        left: auto !important;
+        opacity: 0.8;
+      }
+
+      .up-avatar.hidden-left:hover,
+      .up-avatar.hidden-right:hover {
+        transform: translateX(0) scale(1.05);
+        opacity: 1;
+      }
+
+      .up-avatar.hidden-left:hover {
+        left: -12px !important;
+      }
+
+      .up-avatar.hidden-right:hover {
+        right: -12px !important;
+      }
+
+      /* IconView positioned to allow identicon to extend beyond border */
+      .up-avatar icon-view {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: ${avatarPixelSize}px !important;
+        height: ${avatarPixelSize}px !important;
+        display: block !important;
+        z-index: 1 !important;
+      }
+
+      /* Additional auto-sizing for IconView components */
+      .up-avatar icon-view * {
+        max-width: ${avatarPixelSize}px !important;
+        max-height: ${avatarPixelSize}px !important;
+      }
+
+      /* Let IconView handle its own internal sizing */
+
+      .up-avatar icon-view img,
+      .up-avatar icon-view .icon,
+      .up-avatar icon-view .profile-image {
+        max-width: 100% !important;
+        max-height: 100% !important;
+        width: auto !important;
+        height: auto !important;
+        object-fit: cover;
+        draggable: false !important;
+        user-select: none !important;
+        pointer-events: none !important;
+      }
+
+      /* Fallback content */
+      .up-avatar .fallback-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: 600;
+        font-size: ${Math.floor(avatarPixelSize * 0.4)}px;
+        font-family: system-ui, -apple-system, sans-serif;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+      }
+
+      .up-avatar .fallback-content img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+        draggable: false !important;
+        user-select: none !important;
+        pointer-events: none !important;
+      }
+
+      /* Snap preview */
+      .up-avatar-preview {
+        position: absolute;
+        width: ${avatarPixelSize}px;
+        height: ${avatarPixelSize}px;
+        border-radius: 50%;
+        z-index: 999;
+        pointer-events: none;
+        background: rgba(102, 126, 234, 0.1);
+        backdrop-filter: blur(5px);
+        box-shadow:
+          0 0 0 2px rgba(255, 255, 255, 0.3),
+          0 0 0 4px rgba(102, 126, 234, 0.3),
+          0 2px 8px rgba(0, 0, 0, 0.2);
+        opacity: 0.5;
+        transition: opacity 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+      }
+
+      .up-avatar-preview.active {
+        background: rgba(102, 126, 234, 0.2);
+        box-shadow:
+          0 0 0 2px white,
+          0 0 0 4px #667eea,
+          0 4px 12px rgba(0, 0, 0, 0.3);
+        opacity: 1;
+      }
+
+      /* Hide IconView labels in avatar mode */
+      .up-avatar icon-view .label {
+        display: none;
+      }
+
+      /* Connection indicator */
+      .up-avatar::after {
+        content: '';
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #4ade80;
+        border: 2px solid white;
+        opacity: 0;
+        transform: scale(0);
+        transition: all 0.2s ease;
+      }
+
+      .up-avatar.connected::after {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      /* Throb animation for transactions */
+      .up-avatar.throbbing {
+        animation: avatar-throb 2s ease-in-out infinite;
+      }
+
+      @keyframes avatar-throb {
+        0%, 100% {
+          transform: scale(1);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          border-color: rgba(255, 255, 255, 0.1);
+        }
+        50% {
+          transform: scale(1.1);
+          box-shadow:
+            0 8px 24px rgba(0, 0, 0, 0.3),
+            0 0 0 4px rgba(102, 126, 234, 0.4),
+            0 0 0 8px rgba(102, 126, 234, 0.2),
+            0 0 20px rgba(102, 126, 234, 0.3);
+          border-color: rgba(102, 126, 234, 0.8);
+        }
+      }
+
+      .up-avatar.throbbing::before {
+        content: '';
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        border: 2px solid transparent;
+        border-radius: 50%;
+        background: conic-gradient(from 0deg, transparent, #667eea, #764ba2, transparent);
+        background-size: 200% 200%;
+        animation: avatar-rotate 1.5s linear infinite;
+        z-index: -1;
+      }
+
+      @keyframes avatar-rotate {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  createElement() {
+    if (typeof document === "undefined") return;
+    this.overlay = document.createElement("div");
+    this.overlay.className = "up-avatar-overlay";
+    this.element = document.createElement("div");
+    this.element.className = "up-avatar";
+    this.element.setAttribute("role", "button");
+    this.element.setAttribute("tabindex", "0");
+    this.element.setAttribute("aria-label", "Universal Profile avatar");
+    this.createContent();
+    this.overlay.appendChild(this.element);
+    this.options.container.appendChild(this.overlay);
+  }
+  createContent() {
+    if (!this.element) return;
+    this.element.innerHTML = "";
+    if (this.options.address && this.iconViewAvailable) {
+      this.iconViewElement = document.createElement("icon-view");
+      this.iconViewElement.setAttribute("address", this.options.address);
+      if (this.options.chainId) {
+        this.iconViewElement.setAttribute(
+          "chain-id",
+          this.options.chainId.toString()
+        );
+      }
+      if (this.options.resolved) {
+        ;
+        this.iconViewElement.resolved = this.options.resolved;
+      }
+      this.iconViewElement.setAttribute("size", this.options.avatarSize);
+      if (this.options.label) {
+        this.iconViewElement.setAttribute("label", this.options.label);
+      }
+      if (this.options.forceUnresolved) {
+        this.iconViewElement.setAttribute("force-unresolved", "");
+      }
+      this.iconViewElement.addEventListener("address-click", (event) => {
+        event.stopPropagation();
+        if (this.options.onAddressClick) {
+          this.options.onAddressClick(event);
+        }
+      });
+      this.element.appendChild(this.iconViewElement);
+    } else {
+      this.createFallbackContent();
+    }
+  }
+  createFallbackContent() {
+    if (!this.element) return;
+    const fallbackDiv = document.createElement("div");
+    fallbackDiv.className = "fallback-content";
+    if (this.options.fallbackImage) {
+      const img = document.createElement("img");
+      img.src = this.options.fallbackImage;
+      img.alt = "Avatar";
+      img.onerror = () => {
+        img.remove();
+        fallbackDiv.textContent = this.options.fallbackText;
+      };
+      fallbackDiv.appendChild(img);
+    } else {
+      fallbackDiv.textContent = this.options.fallbackText;
+    }
+    this.element.appendChild(fallbackDiv);
+  }
+  attachEventListeners() {
+    if (!this.element) return;
+    this.element.addEventListener("mousedown", this.handleMouseDown.bind(this));
+    document.addEventListener("mousemove", this.handleMouseMove.bind(this));
+    document.addEventListener("mouseup", this.handleMouseUp.bind(this));
+    this.element.addEventListener(
+      "touchstart",
+      this.handleTouchStart.bind(this),
+      { passive: false }
+    );
+    document.addEventListener("touchmove", this.handleTouchMove.bind(this), {
+      passive: false
+    });
+    document.addEventListener("touchend", this.handleTouchEnd.bind(this), {
+      passive: false
+    });
+    this.element.addEventListener("click", this.handleClick.bind(this));
+    window.addEventListener("resize", this.handleResize.bind(this));
+  }
+  getSnapPositions() {
+    const margin = 20;
+    const size = this.getPixelSize(this.options.avatarSize);
+    const positions = [
+      { x: margin, y: margin, side: "left", name: "top-left" },
+      {
+        x: window.innerWidth - size - margin,
+        y: margin,
+        side: "right",
+        name: "top-right"
+      },
+      {
+        x: margin,
+        y: window.innerHeight - size - margin,
+        side: "left",
+        name: "bottom-left"
+      },
+      {
+        x: window.innerWidth - size - margin,
+        y: window.innerHeight - size - margin,
+        side: "right",
+        name: "bottom-right"
+      }
+    ];
+    return positions;
+  }
+  findClosestSnapPosition(x, y) {
+    const positions = this.getSnapPositions();
+    let closest = positions[0];
+    let minDistance = Infinity;
+    positions.forEach((pos) => {
+      const distance = Math.sqrt(
+        Math.pow(x - pos.x, 2) + Math.pow(y - pos.y, 2)
+      );
+      if (distance < minDistance) {
+        minDistance = distance;
+        closest = pos;
+      }
+    });
+    return closest;
+  }
+  setInitialPosition() {
+    const positions = this.getSnapPositions();
+    const initialPos = positions.find((p) => p.name === this.options.initialPosition) || positions[0];
+    this.snapToPosition(initialPos);
+  }
+  snapToPosition(position, shouldHide = false) {
+    if (!this.element) return;
+    this.element.className = "up-avatar";
+    this.currentPosition = position;
+    this.isHidden = shouldHide;
+    if (shouldHide) {
+      if (position.side === "left") {
+        this.element.classList.add("hidden-left");
+        this.element.style.left = `-${this.options.hideOffset}px`;
+        this.element.style.right = "auto";
+        this.element.style.top = position.y + "px";
+        this.options.onHide?.();
+      } else if (position.side === "right") {
+        this.element.classList.add("hidden-right");
+        this.element.style.right = `-${this.options.hideOffset}px`;
+        this.element.style.left = "auto";
+        this.element.style.top = position.y + "px";
+        this.options.onHide?.();
+      }
+    } else {
+      this.element.style.left = position.x + "px";
+      this.element.style.right = "auto";
+      this.element.style.top = position.y + "px";
+      if (this.isHidden) {
+        this.options.onShow?.();
+      }
+    }
+    this.options.onPositionChange?.(position.name);
+  }
+  showAllSnapPreviews() {
+    if (typeof document === "undefined") return;
+    const positions = this.getSnapPositions();
+    positions.forEach((pos) => {
+      if (!this.snapPreviews.has(pos.name)) {
+        const preview = document.createElement("div");
+        preview.className = "up-avatar-preview";
+        preview.style.left = pos.x + "px";
+        preview.style.top = pos.y + "px";
+        this.overlay.appendChild(preview);
+        this.snapPreviews.set(pos.name, preview);
+      }
+    });
+  }
+  updateActiveSnapPreview(activePosition, shouldHide = false) {
+    if (typeof document === "undefined") return;
+    let activeKey = activePosition.name;
+    this.snapPreviews.forEach((preview, key) => {
+      if (key === activeKey) {
+        preview.classList.add("active");
+        if (shouldHide) {
+          if (activePosition.side === "left") {
+            preview.style.left = `-${this.options.hideOffset}px`;
+            preview.style.right = "auto";
+            preview.style.top = activePosition.y + "px";
+          } else if (activePosition.side === "right") {
+            preview.style.right = `-${this.options.hideOffset}px`;
+            preview.style.left = "auto";
+            preview.style.top = activePosition.y + "px";
+          }
+        } else {
+          preview.style.left = activePosition.x + "px";
+          preview.style.right = "auto";
+          preview.style.top = activePosition.y + "px";
+        }
+      } else {
+        preview.classList.remove("active");
+        const pos = this.getSnapPositions().find((p) => p.name === key);
+        if (pos) {
+          preview.style.left = pos.x + "px";
+          preview.style.right = "auto";
+          preview.style.top = pos.y + "px";
+        }
+      }
+    });
+  }
+  hideAllSnapPreviews() {
+    this.snapPreviews.forEach((preview) => {
+      preview.remove();
+    });
+    this.snapPreviews.clear();
+  }
+  // Event handlers
+  handleMouseDown(e) {
+    if (e.button !== 0) {
+      return;
+    }
+    this.isDragging = true;
+    this.hasDragged = false;
+    this.startX = e.clientX;
+    this.startY = e.clientY;
+    const rect = this.element.getBoundingClientRect();
+    this.initialX = rect.left;
+    this.initialY = rect.top;
+    this.element.classList.add("dragging");
+    this.element.style.transition = "none";
+    this.showAllSnapPreviews();
+  }
+  handleMouseMove(e) {
+    if (!this.isDragging) return;
+    e.preventDefault();
+    const currentX = this.initialX + (e.clientX - this.startX);
+    const currentY = this.initialY + (e.clientY - this.startY);
+    const deltaX = Math.abs(e.clientX - this.startX);
+    const deltaY = Math.abs(e.clientY - this.startY);
+    const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    if (totalMovement > this.dragThreshold) {
+      this.hasDragged = true;
+    }
+    this.element.className = "up-avatar dragging";
+    this.element.style.left = currentX + "px";
+    this.element.style.right = "auto";
+    this.element.style.top = currentY + "px";
+    const closestPosition = this.findClosestSnapPosition(currentX, currentY);
+    const shouldHideLeft = currentX < -this.options.hideThreshold;
+    const shouldHideRight = currentX > window.innerWidth - this.getPixelSize(this.options.avatarSize) + this.options.hideThreshold;
+    this.updateActiveSnapPreview(
+      closestPosition,
+      shouldHideLeft || shouldHideRight
+    );
+  }
+  handleMouseUp() {
+    if (this.isDragging) {
+      this.isDragging = false;
+      this.element.classList.remove("dragging");
+      this.element.style.transition = `all ${this.options.transitionDuration} ${this.options.transitionEasing}`;
+      this.hideAllSnapPreviews();
+      const rect = this.element.getBoundingClientRect();
+      const currentX = rect.left;
+      const currentY = rect.top;
+      const shouldHideLeft = currentX < -this.options.hideThreshold;
+      const shouldHideRight = currentX > window.innerWidth - this.getPixelSize(this.options.avatarSize) + this.options.hideThreshold;
+      const closestPosition = this.findClosestSnapPosition(currentX, currentY);
+      this.snapToPosition(closestPosition, shouldHideLeft || shouldHideRight);
+      setTimeout(() => {
+        this.hasDragged = false;
+      }, 0);
+    }
+  }
+  handleTouchStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragging = true;
+    this.hasDragged = false;
+    const touch = e.touches[0];
+    this.startX = touch.clientX;
+    this.startY = touch.clientY;
+    const rect = this.element.getBoundingClientRect();
+    this.initialX = rect.left;
+    this.initialY = rect.top;
+    this.element.classList.add("dragging");
+    this.element.style.transition = "none";
+    this.showAllSnapPreviews();
+  }
+  handleTouchMove(e) {
+    if (!this.isDragging) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const touch = e.touches[0];
+    const currentX = this.initialX + (touch.clientX - this.startX);
+    const currentY = this.initialY + (touch.clientY - this.startY);
+    const deltaX = Math.abs(touch.clientX - this.startX);
+    const deltaY = Math.abs(touch.clientY - this.startY);
+    const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    if (totalMovement > this.dragThreshold) {
+      this.hasDragged = true;
+    }
+    this.element.className = "up-avatar dragging";
+    this.element.style.left = currentX + "px";
+    this.element.style.right = "auto";
+    this.element.style.top = currentY + "px";
+    const closestPosition = this.findClosestSnapPosition(currentX, currentY);
+    const shouldHideLeft = currentX < -this.options.hideThreshold;
+    const shouldHideRight = currentX > window.innerWidth - this.getPixelSize(this.options.avatarSize) + this.options.hideThreshold;
+    this.updateActiveSnapPreview(
+      closestPosition,
+      shouldHideLeft || shouldHideRight
+    );
+  }
+  handleTouchEnd(e) {
+    if (this.isDragging) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.isDragging = false;
+      this.element.classList.remove("dragging");
+      this.element.style.transition = `all ${this.options.transitionDuration} ${this.options.transitionEasing}`;
+      this.hideAllSnapPreviews();
+      const rect = this.element.getBoundingClientRect();
+      const currentX = rect.left;
+      const currentY = rect.top;
+      const shouldHideLeft = currentX < -this.options.hideThreshold;
+      const shouldHideRight = currentX > window.innerWidth - this.getPixelSize(this.options.avatarSize) + this.options.hideThreshold;
+      const closestPosition = this.findClosestSnapPosition(currentX, currentY);
+      this.snapToPosition(closestPosition, shouldHideLeft || shouldHideRight);
+      setTimeout(() => {
+        this.hasDragged = false;
+      }, 0);
+    }
+  }
+  handleClick(e) {
+    if (e.button !== 0) {
+      return;
+    }
+    if (!this.hasDragged) {
+      if (this.options.onClick) {
+        const resolvedData = this.iconViewElement?.resolved || null;
+        this.options.onClick(e, {
+          address: this.options.address,
+          resolved: resolvedData
+        });
+      }
+    }
+  }
+  handleResize() {
+    if (this.currentPosition) {
+      const positions = this.getSnapPositions();
+      const newPosition = positions.find((p) => p.name === this.currentPosition.name) || positions[0];
+      this.snapToPosition(newPosition, this.isHidden);
+    }
+  }
+  // Public API methods
+  setPosition(positionName) {
+    const positions = this.getSnapPositions();
+    const position = positions.find((p) => p.name === positionName);
+    if (position) {
+      this.snapToPosition(position);
+    }
+  }
+  hide() {
+    if (this.currentPosition) {
+      this.snapToPosition(this.currentPosition, true);
+    }
+  }
+  show() {
+    if (this.currentPosition) {
+      this.snapToPosition(this.currentPosition, false);
+    }
+  }
+  setConnected(connected) {
+    if (this.element) {
+      if (connected) {
+        this.element.classList.add("connected");
+      } else {
+        this.element.classList.remove("connected");
+      }
+    }
+  }
+  updateAddress(address, resolved, chainId) {
+    this.options.address = address;
+    this.options.resolved = resolved;
+    this.options.chainId = chainId;
+    if (this.iconViewElement) {
+      this.iconViewElement.setAttribute("address", address);
+      if (chainId) {
+        this.iconViewElement.setAttribute("chain-id", chainId.toString());
+      }
+      if (resolved) {
+        ;
+        this.iconViewElement.resolved = resolved;
+      }
+    } else {
+      this.createContent();
+    }
+  }
+  updateResolved(resolved) {
+    this.options.resolved = resolved;
+    if (this.iconViewElement) {
+      ;
+      this.iconViewElement.resolved = resolved;
+    }
+  }
+  updateSize(newSize) {
+    if (this.options.avatarSize === newSize) return;
+    this.options.avatarSize = newSize;
+    this.createStyles();
+    const pixelSize = this.getPixelSize(newSize);
+    if (this.element) {
+      this.element.style.width = `${pixelSize}px`;
+      this.element.style.height = `${pixelSize}px`;
+    }
+    if (this.iconViewElement) {
+      this.iconViewElement.setAttribute("size", newSize);
+      const iconView = this.iconViewElement;
+      if (iconView.requestUpdate) {
+        iconView.requestUpdate();
+      }
+      this.iconViewElement.style.width = "";
+      this.iconViewElement.style.height = "";
+      const profiles = this.iconViewElement.querySelectorAll("lukso-profile");
+      profiles.forEach((profile) => {
+        const element = profile;
+        element.style.width = "";
+        element.style.height = "";
+        element.setAttribute("size", newSize);
+      });
+    }
+    this.createContent();
+  }
+  getElement() {
+    return this.element || null;
+  }
+  getPosition() {
+    if (!this.element || !this.currentPosition) return null;
+    const rect = this.element.getBoundingClientRect();
+    return {
+      x: rect.left,
+      y: rect.top,
+      name: this.currentPosition.name
+    };
+  }
+  startThrob() {
+    if (!this.element || this.isThrobbing) return;
+    this.isThrobbing = true;
+    this.element.classList.add("throbbing");
+  }
+  stopThrob() {
+    if (!this.element || !this.isThrobbing) return;
+    this.isThrobbing = false;
+    this.element.classList.remove("throbbing");
+  }
+  getAvatarRect() {
+    return this.element ? this.element.getBoundingClientRect() : null;
+  }
+  destroy() {
+    this.stopThrob();
+    if (this.overlay) {
+      this.overlay.remove();
+    }
+    if (typeof document !== "undefined" && !document.querySelector(".up-avatar-overlay")) {
+      const styles = document.querySelector("#up-connector-avatar-styles");
+      styles?.remove();
+    }
+  }
+};
+async function createAvatar(options = {}) {
+  const avatar = new DraggableAvatar(options);
+  return avatar;
+}
+var avatar_default = DraggableAvatar;
+
+export {
+  DraggableAvatar,
+  createAvatar,
+  avatar_default
+};
+//# sourceMappingURL=chunk-6N35TCFT.js.map