@lukso/up-connector 0.4.0-dev.a8c9315

package/dist/chunk-6N35TCFT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/avatar.ts"],"sourcesContent":["/**\n * Draggable Avatar Component for UP Connector\n * Integrates with @lukso/transaction-view-core IconView\n */\n\nimport type { AddressData, AvatarOptions } from './types.js'\n\nconst DEFAULT_AVATAR_OPTIONS: Required<\n  Omit<\n    AvatarOptions,\n    | 'address'\n    | 'resolved'\n    | 'label'\n    | 'chainId'\n    | 'componentLoader'\n    | 'onPositionChange'\n    | 'onHide'\n    | 'onShow'\n    | 'onClick'\n    | 'onAddressClick'\n    | 'onTransactionStart'\n    | 'onTransactionComplete'\n  >\n> = {\n  // IconView integration options\n  size: 'medium',\n  forceUnresolved: false,\n\n  // Fallback options\n  fallbackColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',\n  fallbackText: '?',\n  fallbackImage: '',\n\n  // Avatar container options\n  avatarSize: 'medium' as const,\n\n  // Behavior options\n  initialPosition: 'top-left',\n  hideThreshold: 20,\n  hideOffset: 30,\n\n  // Animation options\n  transitionDuration: '0.3s',\n  transitionEasing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n\n  // Container\n  container: typeof document !== 'undefined' ? document.body : (null as any),\n}\n\ninterface SnapPosition {\n  x: number\n  y: number\n  side: 'left' | 'right'\n  name: string\n}\n\nexport class DraggableAvatar {\n  private options: AvatarOptions & typeof DEFAULT_AVATAR_OPTIONS\n  private overlay!: HTMLElement\n  private element!: HTMLElement\n  private iconViewElement?: HTMLElement\n  private snapPreviews: Map<string, HTMLElement> = new Map()\n\n  // Drag state\n  private isDragging = false\n  private hasDragged = false\n  private startX = 0\n  private startY = 0\n  private initialX = 0\n  private initialY = 0\n  private dragThreshold = 15 // pixels - movement below this is still considered a click\n\n  /**\n   * Convert size name to pixel value\n   * Based on Tailwind classes: x-small=24px, small=40px, medium=56px, large=80px, x-large=96px, 2x-large=120px\n   */\n  private getPixelSize(\n    size: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large'\n  ): number {\n    switch (size) {\n      case 'x-small':\n        return 24\n      case 'small':\n        return 40\n      case 'medium':\n        return 56\n      case 'large':\n        return 80\n      case 'x-large':\n        return 96\n      case '2x-large':\n        return 120\n    }\n  }\n\n  /**\n   * Get identicon overhang for a given profile size\n   * The identicon hangs off the bottom-right corner by half its size\n   */\n  private getIdenticonOverhang(\n    profileSize:\n      | 'x-small'\n      | 'small'\n      | 'medium'\n      | 'large'\n      | 'x-large'\n      | '2x-large'\n  ): number {\n    switch (profileSize) {\n      case 'x-small':\n        return 6 // w-3 = 12px, overhang = 6px\n      case 'small':\n        return 8 // w-4 = 16px, overhang = 8px\n      case 'medium':\n        return 10 // w-5 = 20px, overhang = 10px\n      case 'large':\n        return 12 // w-6 = 24px, overhang = 12px\n      case 'x-large':\n        return 14 // w-7 = 28px, overhang = 14px\n      case '2x-large':\n        return 18 // w-9 = 36px, overhang = 18px\n    }\n  }\n\n  // Position state\n  private currentPosition?: SnapPosition\n  private isHidden = false\n  private iconViewAvailable = false\n\n  // Animation state\n  private isThrobbing = false\n  private throbAnimation?: Animation\n\n  constructor(options: AvatarOptions = {}) {\n    this.options = { ...DEFAULT_AVATAR_OPTIONS, ...options }\n\n    // Validate options\n    if (\n      !this.options.address &&\n      !this.options.fallbackText &&\n      !this.options.fallbackImage\n    ) {\n      console.warn(\n        'DraggableAvatar: No address, fallbackText, or fallbackImage provided. Avatar may be empty.'\n      )\n    }\n\n    this.init()\n  }\n\n  private async init(): Promise<void> {\n    this.createStyles()\n    await this.checkIconViewAvailability()\n    this.createElement()\n    this.attachEventListeners()\n    this.setInitialPosition()\n  }\n\n  /**\n   * Safely check for and load IconView component\n   */\n  private async checkIconViewAvailability(): Promise<boolean> {\n    // First check if already registered\n    if (\n      typeof customElements !== 'undefined' &&\n      customElements.get('icon-view')\n    ) {\n      this.iconViewAvailable = true\n      return true\n    }\n\n    // Try to load if not available and we have an address\n    if (this.options.address && !this.iconViewAvailable) {\n      try {\n        // Try custom loader first\n        if (this.options.componentLoader) {\n          await this.options.componentLoader()\n        }\n        // Try global loader\n        else if (\n          typeof window !== 'undefined' &&\n          (window as any).loadTransactionViewComponents\n        ) {\n          await (window as any).loadTransactionViewComponents()\n        }\n        // Try direct import as fallback\n        else {\n          try {\n            await import('@lukso/transaction-view-core')\n          } catch (importError) {\n            console.warn(\n              'Failed to import @lukso/transaction-view-core:',\n              importError\n            )\n          }\n        }\n\n        this.iconViewAvailable =\n          typeof customElements !== 'undefined' &&\n          customElements.get('icon-view') !== undefined\n      } catch (error) {\n        console.warn('Failed to load IconView component:', error)\n        this.iconViewAvailable = false\n      }\n    }\n\n    return this.iconViewAvailable\n  }\n\n  private createStyles(): void {\n    if (typeof document === 'undefined') return\n\n    // Calculate sizes before template literal\n    const avatarPixelSize = this.getPixelSize(this.options.avatarSize)\n    const overhang = this.getIdenticonOverhang(this.options.avatarSize)\n\n    // Debug: Log our calculations\n\n    // Remove existing styles to allow updates\n    const existingStyles = document.querySelector('#up-connector-avatar-styles')\n    if (existingStyles) {\n      existingStyles.remove()\n    }\n\n    const style = document.createElement('style')\n    style.id = 'up-connector-avatar-styles'\n    style.textContent = `\n      .up-avatar-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        height: 100vh;\n        pointer-events: none;\n        z-index: 9999;\n        overflow: hidden;\n      }\n\n      .up-avatar {\n        position: absolute;\n        width: ${avatarPixelSize}px;\n        height: ${avatarPixelSize}px;\n        border-radius: 50%;\n        cursor: move;\n        z-index: 1000;\n        overflow: visible;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        user-select: none;\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);\n        transition: all ${this.options.transitionDuration} ${this.options.transitionEasing};\n        touch-action: none;\n        overflow: visible;\n        background: ${this.options.fallbackColor};\n        border: 3px solid rgba(255, 255, 255, 0.5) !important;\n        outline: none !important;\n        backdrop-filter: blur(10px);\n        pointer-events: auto;\n      }\n\n      .up-avatar * {\n        user-select: none !important;\n        pointer-events: none !important;\n      }\n\n      .up-avatar img {\n        draggable: false !important;\n      }\n\n      .up-avatar:hover {\n        transform: scale(1.05);\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n\n      .up-avatar:focus {\n        outline: none !important;\n        border: 3px solid rgba(255, 255, 255, 0.6) !important;\n      }\n\n      .up-avatar.dragging {\n        transform: scale(1.1);\n        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.2);\n        cursor: grabbing;\n      }\n\n      .up-avatar.hidden-left {\n        left: -${this.options.hideOffset}px !important;\n        opacity: 0.8;\n      }\n\n      .up-avatar.hidden-right {\n        right: -${this.options.hideOffset}px !important;\n        left: auto !important;\n        opacity: 0.8;\n      }\n\n      .up-avatar.hidden-left:hover,\n      .up-avatar.hidden-right:hover {\n        transform: translateX(0) scale(1.05);\n        opacity: 1;\n      }\n\n      .up-avatar.hidden-left:hover {\n        left: -12px !important;\n      }\n\n      .up-avatar.hidden-right:hover {\n        right: -12px !important;\n      }\n\n      /* IconView positioned to allow identicon to extend beyond border */\n      .up-avatar icon-view {\n        position: absolute !important;\n        top: 0 !important;\n        left: 0 !important;\n        width: ${avatarPixelSize}px !important;\n        height: ${avatarPixelSize}px !important;\n        display: block !important;\n        z-index: 1 !important;\n      }\n\n      /* Additional auto-sizing for IconView components */\n      .up-avatar icon-view * {\n        max-width: ${avatarPixelSize}px !important;\n        max-height: ${avatarPixelSize}px !important;\n      }\n\n      /* Let IconView handle its own internal sizing */\n\n      .up-avatar icon-view img,\n      .up-avatar icon-view .icon,\n      .up-avatar icon-view .profile-image {\n        max-width: 100% !important;\n        max-height: 100% !important;\n        width: auto !important;\n        height: auto !important;\n        object-fit: cover;\n        draggable: false !important;\n        user-select: none !important;\n        pointer-events: none !important;\n      }\n\n      /* Fallback content */\n      .up-avatar .fallback-content {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: white;\n        font-weight: 600;\n        font-size: ${Math.floor(avatarPixelSize * 0.4)}px;\n        font-family: system-ui, -apple-system, sans-serif;\n        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n      }\n\n      .up-avatar .fallback-content img {\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n        object-fit: cover;\n        draggable: false !important;\n        user-select: none !important;\n        pointer-events: none !important;\n      }\n\n      /* Snap preview */\n      .up-avatar-preview {\n        position: absolute;\n        width: ${avatarPixelSize}px;\n        height: ${avatarPixelSize}px;\n        border-radius: 50%;\n        z-index: 999;\n        pointer-events: none;\n        background: rgba(102, 126, 234, 0.1);\n        backdrop-filter: blur(5px);\n        box-shadow:\n          0 0 0 2px rgba(255, 255, 255, 0.3),\n          0 0 0 4px rgba(102, 126, 234, 0.3),\n          0 2px 8px rgba(0, 0, 0, 0.2);\n        opacity: 0.5;\n        transition: opacity 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;\n      }\n\n      .up-avatar-preview.active {\n        background: rgba(102, 126, 234, 0.2);\n        box-shadow:\n          0 0 0 2px white,\n          0 0 0 4px #667eea,\n          0 4px 12px rgba(0, 0, 0, 0.3);\n        opacity: 1;\n      }\n\n      /* Hide IconView labels in avatar mode */\n      .up-avatar icon-view .label {\n        display: none;\n      }\n\n      /* Connection indicator */\n      .up-avatar::after {\n        content: '';\n        position: absolute;\n        bottom: 2px;\n        right: 2px;\n        width: 16px;\n        height: 16px;\n        border-radius: 50%;\n        background: #4ade80;\n        border: 2px solid white;\n        opacity: 0;\n        transform: scale(0);\n        transition: all 0.2s ease;\n      }\n\n      .up-avatar.connected::after {\n        opacity: 1;\n        transform: scale(1);\n      }\n\n      /* Throb animation for transactions */\n      .up-avatar.throbbing {\n        animation: avatar-throb 2s ease-in-out infinite;\n      }\n\n      @keyframes avatar-throb {\n        0%, 100% {\n          transform: scale(1);\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n          border-color: rgba(255, 255, 255, 0.1);\n        }\n        50% {\n          transform: scale(1.1);\n          box-shadow:\n            0 8px 24px rgba(0, 0, 0, 0.3),\n            0 0 0 4px rgba(102, 126, 234, 0.4),\n            0 0 0 8px rgba(102, 126, 234, 0.2),\n            0 0 20px rgba(102, 126, 234, 0.3);\n          border-color: rgba(102, 126, 234, 0.8);\n        }\n      }\n\n      .up-avatar.throbbing::before {\n        content: '';\n        position: absolute;\n        top: -4px;\n        left: -4px;\n        right: -4px;\n        bottom: -4px;\n        border: 2px solid transparent;\n        border-radius: 50%;\n        background: conic-gradient(from 0deg, transparent, #667eea, #764ba2, transparent);\n        background-size: 200% 200%;\n        animation: avatar-rotate 1.5s linear infinite;\n        z-index: -1;\n      }\n\n      @keyframes avatar-rotate {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n    `\n    document.head.appendChild(style)\n  }\n\n  private createElement(): void {\n    if (typeof document === 'undefined') return\n\n    // Create fixed overlay container\n    this.overlay = document.createElement('div')\n    this.overlay.className = 'up-avatar-overlay'\n\n    // Create avatar element\n    this.element = document.createElement('div')\n    this.element.className = 'up-avatar'\n    this.element.setAttribute('role', 'button')\n    this.element.setAttribute('tabindex', '0')\n    this.element.setAttribute('aria-label', 'Universal Profile avatar')\n\n    this.createContent()\n\n    // Append avatar to overlay, then overlay to container\n    this.overlay.appendChild(this.element)\n    this.options.container.appendChild(this.overlay)\n  }\n\n  private createContent(): void {\n    if (!this.element) return\n\n    // Clear existing content\n    this.element.innerHTML = ''\n\n    if (this.options.address && this.iconViewAvailable) {\n      // Use IconView component\n      this.iconViewElement = document.createElement('icon-view')\n      this.iconViewElement.setAttribute('address', this.options.address)\n\n      if (this.options.chainId) {\n        this.iconViewElement.setAttribute(\n          'chain-id',\n          this.options.chainId.toString()\n        )\n      }\n\n      if (this.options.resolved) {\n        ;(this.iconViewElement as any).resolved = this.options.resolved\n      }\n\n      // Set size - avatar size now matches IconView sizes exactly\n      this.iconViewElement.setAttribute('size', this.options.avatarSize)\n\n      // Let CSS handle the positioning and sizing\n\n      if (this.options.label) {\n        this.iconViewElement.setAttribute('label', this.options.label)\n      }\n\n      if (this.options.forceUnresolved) {\n        this.iconViewElement.setAttribute('force-unresolved', '')\n      }\n\n      // Listen for address-click events\n      this.iconViewElement.addEventListener('address-click', (event) => {\n        event.stopPropagation()\n        if (this.options.onAddressClick) {\n          this.options.onAddressClick(event as CustomEvent)\n        }\n      })\n\n      this.element.appendChild(this.iconViewElement)\n    } else {\n      // Use fallback content\n      this.createFallbackContent()\n    }\n  }\n\n  private createFallbackContent(): void {\n    if (!this.element) return\n\n    const fallbackDiv = document.createElement('div')\n    fallbackDiv.className = 'fallback-content'\n\n    if (this.options.fallbackImage) {\n      const img = document.createElement('img')\n      img.src = this.options.fallbackImage\n      img.alt = 'Avatar'\n      img.onerror = () => {\n        // Fallback to text if image fails to load\n        img.remove()\n        fallbackDiv.textContent = this.options.fallbackText\n      }\n      fallbackDiv.appendChild(img)\n    } else {\n      fallbackDiv.textContent = this.options.fallbackText\n    }\n\n    this.element.appendChild(fallbackDiv)\n  }\n\n  private attachEventListeners(): void {\n    if (!this.element) return\n\n    // Mouse events\n    this.element.addEventListener('mousedown', this.handleMouseDown.bind(this))\n    document.addEventListener('mousemove', this.handleMouseMove.bind(this))\n    document.addEventListener('mouseup', this.handleMouseUp.bind(this))\n\n    // Touch events\n    this.element.addEventListener(\n      'touchstart',\n      this.handleTouchStart.bind(this),\n      { passive: false }\n    )\n    document.addEventListener('touchmove', this.handleTouchMove.bind(this), {\n      passive: false,\n    })\n    document.addEventListener('touchend', this.handleTouchEnd.bind(this), {\n      passive: false,\n    })\n\n    // Click events\n    this.element.addEventListener('click', this.handleClick.bind(this))\n\n    // Window resize\n    window.addEventListener('resize', this.handleResize.bind(this))\n  }\n\n  private getSnapPositions(): SnapPosition[] {\n    const margin = 20\n    const size = this.getPixelSize(this.options.avatarSize)\n\n    const positions = [\n      { x: margin, y: margin, side: 'left' as const, name: 'top-left' },\n      {\n        x: window.innerWidth - size - margin,\n        y: margin,\n        side: 'right' as const,\n        name: 'top-right',\n      },\n      {\n        x: margin,\n        y: window.innerHeight - size - margin,\n        side: 'left' as const,\n        name: 'bottom-left',\n      },\n      {\n        x: window.innerWidth - size - margin,\n        y: window.innerHeight - size - margin,\n        side: 'right' as const,\n        name: 'bottom-right',\n      },\n    ]\n\n    return positions\n  }\n\n  private findClosestSnapPosition(x: number, y: number): SnapPosition {\n    const positions = this.getSnapPositions()\n    let closest = positions[0]\n    let minDistance = Infinity\n\n    positions.forEach((pos) => {\n      const distance = Math.sqrt(\n        Math.pow(x - pos.x, 2) + Math.pow(y - pos.y, 2)\n      )\n      if (distance < minDistance) {\n        minDistance = distance\n        closest = pos\n      }\n    })\n\n    return closest\n  }\n\n  private setInitialPosition(): void {\n    const positions = this.getSnapPositions()\n    const initialPos =\n      positions.find((p) => p.name === this.options.initialPosition) ||\n      positions[0]\n    this.snapToPosition(initialPos)\n  }\n\n  private snapToPosition(position: SnapPosition, shouldHide = false): void {\n    if (!this.element) return\n\n    this.element.className = 'up-avatar'\n    this.currentPosition = position\n    this.isHidden = shouldHide\n\n    if (shouldHide) {\n      if (position.side === 'left') {\n        this.element.classList.add('hidden-left')\n        this.element.style.left = `-${this.options.hideOffset}px`\n        this.element.style.right = 'auto'\n        this.element.style.top = position.y + 'px'\n        this.options.onHide?.()\n      } else if (position.side === 'right') {\n        this.element.classList.add('hidden-right')\n        this.element.style.right = `-${this.options.hideOffset}px`\n        this.element.style.left = 'auto'\n        this.element.style.top = position.y + 'px'\n        this.options.onHide?.()\n      }\n    } else {\n      this.element.style.left = position.x + 'px'\n      this.element.style.right = 'auto'\n      this.element.style.top = position.y + 'px'\n      if (this.isHidden) {\n        this.options.onShow?.()\n      }\n    }\n\n    this.options.onPositionChange?.(position.name)\n  }\n\n  private showAllSnapPreviews(): void {\n    if (typeof document === 'undefined') return\n\n    const positions = this.getSnapPositions()\n\n    // Create preview for each position if it doesn't exist\n    positions.forEach((pos) => {\n      if (!this.snapPreviews.has(pos.name)) {\n        const preview = document.createElement('div')\n        preview.className = 'up-avatar-preview'\n        preview.style.left = pos.x + 'px'\n        preview.style.top = pos.y + 'px'\n        this.overlay.appendChild(preview)\n        this.snapPreviews.set(pos.name, preview)\n      }\n    })\n  }\n\n  private updateActiveSnapPreview(\n    activePosition: SnapPosition,\n    shouldHide = false\n  ): void {\n    if (typeof document === 'undefined') return\n\n    // Determine the active position key\n    let activeKey = activePosition.name\n\n    // Update all previews\n    this.snapPreviews.forEach((preview, key) => {\n      if (key === activeKey) {\n        // Highlight the active one\n        preview.classList.add('active')\n\n        // Update position for hidden state\n        if (shouldHide) {\n          if (activePosition.side === 'left') {\n            preview.style.left = `-${this.options.hideOffset}px`\n            preview.style.right = 'auto'\n            preview.style.top = activePosition.y + 'px'\n          } else if (activePosition.side === 'right') {\n            preview.style.right = `-${this.options.hideOffset}px`\n            preview.style.left = 'auto'\n            preview.style.top = activePosition.y + 'px'\n          }\n        } else {\n          preview.style.left = activePosition.x + 'px'\n          preview.style.right = 'auto'\n          preview.style.top = activePosition.y + 'px'\n        }\n      } else {\n        // Dim the others\n        preview.classList.remove('active')\n\n        // Reset to normal position (not hidden)\n        const pos = this.getSnapPositions().find((p) => p.name === key)\n        if (pos) {\n          preview.style.left = pos.x + 'px'\n          preview.style.right = 'auto'\n          preview.style.top = pos.y + 'px'\n        }\n      }\n    })\n  }\n\n  private hideAllSnapPreviews(): void {\n    this.snapPreviews.forEach((preview) => {\n      preview.remove()\n    })\n    this.snapPreviews.clear()\n  }\n\n  // Event handlers\n  private handleMouseDown(e: MouseEvent): void {\n    // Only handle left mouse button (button 0)\n    if (e.button !== 0) {\n      return\n    }\n\n    this.isDragging = true\n    this.hasDragged = false // Reset for new interaction\n    this.startX = e.clientX\n    this.startY = e.clientY\n\n    const rect = this.element.getBoundingClientRect()\n    this.initialX = rect.left\n    this.initialY = rect.top\n\n    this.element.classList.add('dragging')\n    this.element.style.transition = 'none'\n\n    // Show all snap previews when drag starts\n    this.showAllSnapPreviews()\n  }\n\n  private handleMouseMove(e: MouseEvent): void {\n    if (!this.isDragging) return\n\n    e.preventDefault()\n\n    const currentX = this.initialX + (e.clientX - this.startX)\n    const currentY = this.initialY + (e.clientY - this.startY)\n\n    // Check if movement exceeds threshold\n    const deltaX = Math.abs(e.clientX - this.startX)\n    const deltaY = Math.abs(e.clientY - this.startY)\n    const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY)\n\n    if (totalMovement > this.dragThreshold) {\n      this.hasDragged = true // Only mark as dragged if we exceed threshold\n    }\n\n    // Always update position while dragging (for visual feedback)\n    this.element.className = 'up-avatar dragging'\n    this.element.style.left = currentX + 'px'\n    this.element.style.right = 'auto'\n    this.element.style.top = currentY + 'px'\n\n    const closestPosition = this.findClosestSnapPosition(currentX, currentY)\n    const shouldHideLeft = currentX < -this.options.hideThreshold\n    const shouldHideRight =\n      currentX >\n      window.innerWidth -\n        this.getPixelSize(this.options.avatarSize) +\n        this.options.hideThreshold\n\n    // Update active preview\n    this.updateActiveSnapPreview(\n      closestPosition,\n      shouldHideLeft || shouldHideRight\n    )\n  }\n\n  private handleMouseUp(): void {\n    if (this.isDragging) {\n      this.isDragging = false\n      this.element.classList.remove('dragging')\n      this.element.style.transition = `all ${this.options.transitionDuration} ${this.options.transitionEasing}`\n\n      // Hide all snap previews\n      this.hideAllSnapPreviews()\n\n      const rect = this.element.getBoundingClientRect()\n      const currentX = rect.left\n      const currentY = rect.top\n\n      const shouldHideLeft = currentX < -this.options.hideThreshold\n      const shouldHideRight =\n        currentX >\n        window.innerWidth -\n          this.getPixelSize(this.options.avatarSize) +\n          this.options.hideThreshold\n\n      const closestPosition = this.findClosestSnapPosition(currentX, currentY)\n      this.snapToPosition(closestPosition, shouldHideLeft || shouldHideRight)\n\n      // Reset hasDragged after click event has had a chance to fire\n      setTimeout(() => {\n        this.hasDragged = false\n      }, 0)\n    }\n  }\n\n  private handleTouchStart(e: TouchEvent): void {\n    e.preventDefault()\n    e.stopPropagation()\n\n    this.isDragging = true\n    this.hasDragged = false // Reset for new interaction\n    const touch = e.touches[0]\n    this.startX = touch.clientX\n    this.startY = touch.clientY\n\n    const rect = this.element.getBoundingClientRect()\n    this.initialX = rect.left\n    this.initialY = rect.top\n\n    this.element.classList.add('dragging')\n    this.element.style.transition = 'none'\n\n    // Show all snap previews when drag starts\n    this.showAllSnapPreviews()\n  }\n\n  private handleTouchMove(e: TouchEvent): void {\n    if (!this.isDragging) return\n\n    e.preventDefault()\n    e.stopPropagation()\n\n    const touch = e.touches[0]\n    const currentX = this.initialX + (touch.clientX - this.startX)\n    const currentY = this.initialY + (touch.clientY - this.startY)\n\n    // Check if movement exceeds threshold\n    const deltaX = Math.abs(touch.clientX - this.startX)\n    const deltaY = Math.abs(touch.clientY - this.startY)\n    const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY)\n\n    if (totalMovement > this.dragThreshold) {\n      this.hasDragged = true // Only mark as dragged if we exceed threshold\n    }\n\n    // Always update position while dragging (for visual feedback)\n    this.element.className = 'up-avatar dragging'\n    this.element.style.left = currentX + 'px'\n    this.element.style.right = 'auto'\n    this.element.style.top = currentY + 'px'\n\n    const closestPosition = this.findClosestSnapPosition(currentX, currentY)\n    const shouldHideLeft = currentX < -this.options.hideThreshold\n    const shouldHideRight =\n      currentX >\n      window.innerWidth -\n        this.getPixelSize(this.options.avatarSize) +\n        this.options.hideThreshold\n\n    // Update active preview\n    this.updateActiveSnapPreview(\n      closestPosition,\n      shouldHideLeft || shouldHideRight\n    )\n  }\n\n  private handleTouchEnd(e: TouchEvent): void {\n    if (this.isDragging) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      this.isDragging = false\n      this.element.classList.remove('dragging')\n      this.element.style.transition = `all ${this.options.transitionDuration} ${this.options.transitionEasing}`\n\n      // Hide all snap previews\n      this.hideAllSnapPreviews()\n\n      const rect = this.element.getBoundingClientRect()\n      const currentX = rect.left\n      const currentY = rect.top\n\n      const shouldHideLeft = currentX < -this.options.hideThreshold\n      const shouldHideRight =\n        currentX >\n        window.innerWidth -\n          this.getPixelSize(this.options.avatarSize) +\n          this.options.hideThreshold\n\n      const closestPosition = this.findClosestSnapPosition(currentX, currentY)\n      this.snapToPosition(closestPosition, shouldHideLeft || shouldHideRight)\n\n      // Reset hasDragged after click event has had a chance to fire\n      setTimeout(() => {\n        this.hasDragged = false\n      }, 0)\n    }\n  }\n\n  private handleClick(e: MouseEvent): void {\n    // Only handle left mouse button (button 0)\n    if (e.button !== 0) {\n      return\n    }\n\n    // Only trigger click if we haven't dragged during this interaction\n    if (!this.hasDragged) {\n      if (this.options.onClick) {\n        // Get resolved data from IconView if available\n        const resolvedData = (this.iconViewElement as any)?.resolved || null\n        this.options.onClick(e, {\n          address: this.options.address,\n          resolved: resolvedData,\n        })\n      }\n    }\n  }\n\n  private handleResize(): void {\n    if (this.currentPosition) {\n      const positions = this.getSnapPositions()\n      const newPosition =\n        positions.find((p) => p.name === this.currentPosition!.name) ||\n        positions[0]\n      this.snapToPosition(newPosition, this.isHidden)\n    }\n  }\n\n  // Public API methods\n  public setPosition(positionName: string): void {\n    const positions = this.getSnapPositions()\n    const position = positions.find((p) => p.name === positionName)\n    if (position) {\n      this.snapToPosition(position)\n    }\n  }\n\n  public hide(): void {\n    if (this.currentPosition) {\n      this.snapToPosition(this.currentPosition, true)\n    }\n  }\n\n  public show(): void {\n    if (this.currentPosition) {\n      this.snapToPosition(this.currentPosition, false)\n    }\n  }\n\n  public setConnected(connected: boolean): void {\n    if (this.element) {\n      if (connected) {\n        this.element.classList.add('connected')\n      } else {\n        this.element.classList.remove('connected')\n      }\n    }\n  }\n\n  public updateAddress(\n    address: string,\n    resolved?: AddressData,\n    chainId?: number\n  ): void {\n    this.options.address = address\n    this.options.resolved = resolved\n    this.options.chainId = chainId\n\n    if (this.iconViewElement) {\n      this.iconViewElement.setAttribute('address', address)\n\n      if (chainId) {\n        this.iconViewElement.setAttribute('chain-id', chainId.toString())\n      }\n\n      if (resolved) {\n        ;(this.iconViewElement as any).resolved = resolved\n      }\n    } else {\n      // Recreate content if switching from fallback to IconView\n      this.createContent()\n    }\n  }\n\n  public updateResolved(resolved: AddressData): void {\n    this.options.resolved = resolved\n    if (this.iconViewElement) {\n      ;(this.iconViewElement as any).resolved = resolved\n    }\n  }\n\n  public updateSize(\n    newSize: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large'\n  ): void {\n    if (this.options.avatarSize === newSize) return\n\n    this.options.avatarSize = newSize\n\n    // Recreate styles with new size\n    this.createStyles()\n\n    // Update element size using pixel conversion\n    const pixelSize = this.getPixelSize(newSize)\n    if (this.element) {\n      this.element.style.width = `${pixelSize}px`\n      this.element.style.height = `${pixelSize}px`\n    }\n\n    // Force IconView to resize if available\n    if (this.iconViewElement) {\n      // Size attribute now matches avatarSize directly\n      this.iconViewElement.setAttribute('size', newSize)\n\n      // Force IconView to re-render with new size\n      const iconView = this.iconViewElement as any\n      if (iconView.requestUpdate) {\n        iconView.requestUpdate()\n      }\n\n      // Remove any inline styles to let CSS handle sizing\n      this.iconViewElement.style.width = ''\n      this.iconViewElement.style.height = ''\n\n      // Update any nested lukso-profile elements\n      const profiles = this.iconViewElement.querySelectorAll('lukso-profile')\n\n      profiles.forEach((profile) => {\n        const element = profile as HTMLElement\n        element.style.width = ''\n        element.style.height = ''\n        // Update the size attribute on lukso-profile\n        element.setAttribute('size', newSize)\n      })\n    }\n\n    // Recreate content to update IconView sizing\n    this.createContent()\n  }\n\n  public getElement(): HTMLElement | null {\n    return this.element || null\n  }\n\n  public getPosition(): { x: number; y: number; name: string } | null {\n    if (!this.element || !this.currentPosition) return null\n\n    const rect = this.element.getBoundingClientRect()\n    return {\n      x: rect.left,\n      y: rect.top,\n      name: this.currentPosition.name,\n    }\n  }\n\n  public startThrob(): void {\n    if (!this.element || this.isThrobbing) return\n\n    this.isThrobbing = true\n    this.element.classList.add('throbbing')\n  }\n\n  public stopThrob(): void {\n    if (!this.element || !this.isThrobbing) return\n\n    this.isThrobbing = false\n    this.element.classList.remove('throbbing')\n  }\n\n  public getAvatarRect(): DOMRect | null {\n    return this.element ? this.element.getBoundingClientRect() : null\n  }\n\n  public destroy(): void {\n    this.stopThrob()\n\n    if (this.overlay) {\n      this.overlay.remove()\n    }\n\n    // Remove styles if this was the last avatar overlay\n    if (\n      typeof document !== 'undefined' &&\n      !document.querySelector('.up-avatar-overlay')\n    ) {\n      const styles = document.querySelector('#up-connector-avatar-styles')\n      styles?.remove()\n    }\n  }\n}\n\n/**\n * Factory function for creating draggable avatars\n */\nexport async function createAvatar(\n  options: AvatarOptions = {}\n): Promise<DraggableAvatar> {\n  const avatar = new DraggableAvatar(options)\n  // The init() call is already handled in the constructor\n  return avatar\n}\n\n// Export the class as default\nexport default DraggableAvatar\n"],"mappings":";AAOA,IAAM,yBAgBF;AAAA;AAAA,EAEF,MAAM;AAAA,EACN,iBAAiB;AAAA;AAAA,EAGjB,eAAe;AAAA,EACf,cAAc;AAAA,EACd,eAAe;AAAA;AAAA,EAGf,YAAY;AAAA;AAAA,EAGZ,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA;AAAA,EAGZ,oBAAoB;AAAA,EACpB,kBAAkB;AAAA;AAAA,EAGlB,WAAW,OAAO,aAAa,cAAc,SAAS,OAAQ;AAChE;AASO,IAAM,kBAAN,MAAsB;AAAA,EA6E3B,YAAY,UAAyB,CAAC,GAAG;AAxEzC,SAAQ,eAAyC,oBAAI,IAAI;AAGzD;AAAA,SAAQ,aAAa;AACrB,SAAQ,aAAa;AACrB,SAAQ,SAAS;AACjB,SAAQ,SAAS;AACjB,SAAQ,WAAW;AACnB,SAAQ,WAAW;AACnB,SAAQ,gBAAgB;AAwDxB,SAAQ,WAAW;AACnB,SAAQ,oBAAoB;AAG5B;AAAA,SAAQ,cAAc;AAIpB,SAAK,UAAU,EAAE,GAAG,wBAAwB,GAAG,QAAQ;AAGvD,QACE,CAAC,KAAK,QAAQ,WACd,CAAC,KAAK,QAAQ,gBACd,CAAC,KAAK,QAAQ,eACd;AACA,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,SAAK,KAAK;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAxEQ,aACN,MACQ;AACR,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,qBACN,aAOQ;AACR,YAAQ,aAAa;AAAA,MACnB,KAAK;AACH,eAAO;AAAA;AAAA,MACT,KAAK;AACH,eAAO;AAAA;AAAA,MACT,KAAK;AACH,eAAO;AAAA;AAAA,MACT,KAAK;AACH,eAAO;AAAA;AAAA,MACT,KAAK;AACH,eAAO;AAAA;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IACX;AAAA,EACF;AAAA,EA4BA,MAAc,OAAsB;AAClC,SAAK,aAAa;AAClB,UAAM,KAAK,0BAA0B;AACrC,SAAK,cAAc;AACnB,SAAK,qBAAqB;AAC1B,SAAK,mBAAmB;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,MAAc,4BAA8C;AAE1D,QACE,OAAO,mBAAmB,eAC1B,eAAe,IAAI,WAAW,GAC9B;AACA,WAAK,oBAAoB;AACzB,aAAO;AAAA,IACT;AAGA,QAAI,KAAK,QAAQ,WAAW,CAAC,KAAK,mBAAmB;AACnD,UAAI;AAEF,YAAI,KAAK,QAAQ,iBAAiB;AAChC,gBAAM,KAAK,QAAQ,gBAAgB;AAAA,QACrC,WAGE,OAAO,WAAW,eACjB,OAAe,+BAChB;AACA,gBAAO,OAAe,8BAA8B;AAAA,QACtD,OAEK;AACH,cAAI;AACF,kBAAM,OAAO,8BAA8B;AAAA,UAC7C,SAAS,aAAa;AACpB,oBAAQ;AAAA,cACN;AAAA,cACA;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAEA,aAAK,oBACH,OAAO,mBAAmB,eAC1B,eAAe,IAAI,WAAW,MAAM;AAAA,MACxC,SAAS,OAAO;AACd,gBAAQ,KAAK,sCAAsC,KAAK;AACxD,aAAK,oBAAoB;AAAA,MAC3B;AAAA,IACF;AAEA,WAAO,KAAK;AAAA,EACd;AAAA,EAEQ,eAAqB;AAC3B,QAAI,OAAO,aAAa,YAAa;AAGrC,UAAM,kBAAkB,KAAK,aAAa,KAAK,QAAQ,UAAU;AACjE,UAAM,WAAW,KAAK,qBAAqB,KAAK,QAAQ,UAAU;AAKlE,UAAM,iBAAiB,SAAS,cAAc,6BAA6B;AAC3E,QAAI,gBAAgB;AAClB,qBAAe,OAAO;AAAA,IACxB;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,KAAK;AACX,UAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcP,eAAe;AAAA,kBACd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAUP,KAAK,QAAQ,kBAAkB,IAAI,KAAK,QAAQ,gBAAgB;AAAA;AAAA;AAAA,sBAGpE,KAAK,QAAQ,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAiC/B,KAAK,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKtB,KAAK,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAwBxB,eAAe;AAAA,kBACd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOZ,eAAe;AAAA,sBACd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA2BhB,KAAK,MAAM,kBAAkB,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAkBrC,eAAe;AAAA,kBACd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2F7B,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AAAA,EAEQ,gBAAsB;AAC5B,QAAI,OAAO,aAAa,YAAa;AAGrC,SAAK,UAAU,SAAS,cAAc,KAAK;AAC3C,SAAK,QAAQ,YAAY;AAGzB,SAAK,UAAU,SAAS,cAAc,KAAK;AAC3C,SAAK,QAAQ,YAAY;AACzB,SAAK,QAAQ,aAAa,QAAQ,QAAQ;AAC1C,SAAK,QAAQ,aAAa,YAAY,GAAG;AACzC,SAAK,QAAQ,aAAa,cAAc,0BAA0B;AAElE,SAAK,cAAc;AAGnB,SAAK,QAAQ,YAAY,KAAK,OAAO;AACrC,SAAK,QAAQ,UAAU,YAAY,KAAK,OAAO;AAAA,EACjD;AAAA,EAEQ,gBAAsB;AAC5B,QAAI,CAAC,KAAK,QAAS;AAGnB,SAAK,QAAQ,YAAY;AAEzB,QAAI,KAAK,QAAQ,WAAW,KAAK,mBAAmB;AAElD,WAAK,kBAAkB,SAAS,cAAc,WAAW;AACzD,WAAK,gBAAgB,aAAa,WAAW,KAAK,QAAQ,OAAO;AAEjE,UAAI,KAAK,QAAQ,SAAS;AACxB,aAAK,gBAAgB;AAAA,UACnB;AAAA,UACA,KAAK,QAAQ,QAAQ,SAAS;AAAA,QAChC;AAAA,MACF;AAEA,UAAI,KAAK,QAAQ,UAAU;AACzB;AAAC,QAAC,KAAK,gBAAwB,WAAW,KAAK,QAAQ;AAAA,MACzD;AAGA,WAAK,gBAAgB,aAAa,QAAQ,KAAK,QAAQ,UAAU;AAIjE,UAAI,KAAK,QAAQ,OAAO;AACtB,aAAK,gBAAgB,aAAa,SAAS,KAAK,QAAQ,KAAK;AAAA,MAC/D;AAEA,UAAI,KAAK,QAAQ,iBAAiB;AAChC,aAAK,gBAAgB,aAAa,oBAAoB,EAAE;AAAA,MAC1D;AAGA,WAAK,gBAAgB,iBAAiB,iBAAiB,CAAC,UAAU;AAChE,cAAM,gBAAgB;AACtB,YAAI,KAAK,QAAQ,gBAAgB;AAC/B,eAAK,QAAQ,eAAe,KAAoB;AAAA,QAClD;AAAA,MACF,CAAC;AAED,WAAK,QAAQ,YAAY,KAAK,eAAe;AAAA,IAC/C,OAAO;AAEL,WAAK,sBAAsB;AAAA,IAC7B;AAAA,EACF;AAAA,EAEQ,wBAA8B;AACpC,QAAI,CAAC,KAAK,QAAS;AAEnB,UAAM,cAAc,SAAS,cAAc,KAAK;AAChD,gBAAY,YAAY;AAExB,QAAI,KAAK,QAAQ,eAAe;AAC9B,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,UAAI,MAAM,KAAK,QAAQ;AACvB,UAAI,MAAM;AACV,UAAI,UAAU,MAAM;AAElB,YAAI,OAAO;AACX,oBAAY,cAAc,KAAK,QAAQ;AAAA,MACzC;AACA,kBAAY,YAAY,GAAG;AAAA,IAC7B,OAAO;AACL,kBAAY,cAAc,KAAK,QAAQ;AAAA,IACzC;AAEA,SAAK,QAAQ,YAAY,WAAW;AAAA,EACtC;AAAA,EAEQ,uBAA6B;AACnC,QAAI,CAAC,KAAK,QAAS;AAGnB,SAAK,QAAQ,iBAAiB,aAAa,KAAK,gBAAgB,KAAK,IAAI,CAAC;AAC1E,aAAS,iBAAiB,aAAa,KAAK,gBAAgB,KAAK,IAAI,CAAC;AACtE,aAAS,iBAAiB,WAAW,KAAK,cAAc,KAAK,IAAI,CAAC;AAGlE,SAAK,QAAQ;AAAA,MACX;AAAA,MACA,KAAK,iBAAiB,KAAK,IAAI;AAAA,MAC/B,EAAE,SAAS,MAAM;AAAA,IACnB;AACA,aAAS,iBAAiB,aAAa,KAAK,gBAAgB,KAAK,IAAI,GAAG;AAAA,MACtE,SAAS;AAAA,IACX,CAAC;AACD,aAAS,iBAAiB,YAAY,KAAK,eAAe,KAAK,IAAI,GAAG;AAAA,MACpE,SAAS;AAAA,IACX,CAAC;AAGD,SAAK,QAAQ,iBAAiB,SAAS,KAAK,YAAY,KAAK,IAAI,CAAC;AAGlE,WAAO,iBAAiB,UAAU,KAAK,aAAa,KAAK,IAAI,CAAC;AAAA,EAChE;AAAA,EAEQ,mBAAmC;AACzC,UAAM,SAAS;AACf,UAAM,OAAO,KAAK,aAAa,KAAK,QAAQ,UAAU;AAEtD,UAAM,YAAY;AAAA,MAChB,EAAE,GAAG,QAAQ,GAAG,QAAQ,MAAM,QAAiB,MAAM,WAAW;AAAA,MAChE;AAAA,QACE,GAAG,OAAO,aAAa,OAAO;AAAA,QAC9B,GAAG;AAAA,QACH,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,GAAG,OAAO,cAAc,OAAO;AAAA,QAC/B,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA;AAAA,QACE,GAAG,OAAO,aAAa,OAAO;AAAA,QAC9B,GAAG,OAAO,cAAc,OAAO;AAAA,QAC/B,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,wBAAwB,GAAW,GAAyB;AAClE,UAAM,YAAY,KAAK,iBAAiB;AACxC,QAAI,UAAU,UAAU,CAAC;AACzB,QAAI,cAAc;AAElB,cAAU,QAAQ,CAAC,QAAQ;AACzB,YAAM,WAAW,KAAK;AAAA,QACpB,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC;AAAA,MAChD;AACA,UAAI,WAAW,aAAa;AAC1B,sBAAc;AACd,kBAAU;AAAA,MACZ;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEQ,qBAA2B;AACjC,UAAM,YAAY,KAAK,iBAAiB;AACxC,UAAM,aACJ,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK,QAAQ,eAAe,KAC7D,UAAU,CAAC;AACb,SAAK,eAAe,UAAU;AAAA,EAChC;AAAA,EAEQ,eAAe,UAAwB,aAAa,OAAa;AACvE,QAAI,CAAC,KAAK,QAAS;AAEnB,SAAK,QAAQ,YAAY;AACzB,SAAK,kBAAkB;AACvB,SAAK,WAAW;AAEhB,QAAI,YAAY;AACd,UAAI,SAAS,SAAS,QAAQ;AAC5B,aAAK,QAAQ,UAAU,IAAI,aAAa;AACxC,aAAK,QAAQ,MAAM,OAAO,IAAI,KAAK,QAAQ,UAAU;AACrD,aAAK,QAAQ,MAAM,QAAQ;AAC3B,aAAK,QAAQ,MAAM,MAAM,SAAS,IAAI;AACtC,aAAK,QAAQ,SAAS;AAAA,MACxB,WAAW,SAAS,SAAS,SAAS;AACpC,aAAK,QAAQ,UAAU,IAAI,cAAc;AACzC,aAAK,QAAQ,MAAM,QAAQ,IAAI,KAAK,QAAQ,UAAU;AACtD,aAAK,QAAQ,MAAM,OAAO;AAC1B,aAAK,QAAQ,MAAM,MAAM,SAAS,IAAI;AACtC,aAAK,QAAQ,SAAS;AAAA,MACxB;AAAA,IACF,OAAO;AACL,WAAK,QAAQ,MAAM,OAAO,SAAS,IAAI;AACvC,WAAK,QAAQ,MAAM,QAAQ;AAC3B,WAAK,QAAQ,MAAM,MAAM,SAAS,IAAI;AACtC,UAAI,KAAK,UAAU;AACjB,aAAK,QAAQ,SAAS;AAAA,MACxB;AAAA,IACF;AAEA,SAAK,QAAQ,mBAAmB,SAAS,IAAI;AAAA,EAC/C;AAAA,EAEQ,sBAA4B;AAClC,QAAI,OAAO,aAAa,YAAa;AAErC,UAAM,YAAY,KAAK,iBAAiB;AAGxC,cAAU,QAAQ,CAAC,QAAQ;AACzB,UAAI,CAAC,KAAK,aAAa,IAAI,IAAI,IAAI,GAAG;AACpC,cAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,gBAAQ,YAAY;AACpB,gBAAQ,MAAM,OAAO,IAAI,IAAI;AAC7B,gBAAQ,MAAM,MAAM,IAAI,IAAI;AAC5B,aAAK,QAAQ,YAAY,OAAO;AAChC,aAAK,aAAa,IAAI,IAAI,MAAM,OAAO;AAAA,MACzC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,wBACN,gBACA,aAAa,OACP;AACN,QAAI,OAAO,aAAa,YAAa;AAGrC,QAAI,YAAY,eAAe;AAG/B,SAAK,aAAa,QAAQ,CAAC,SAAS,QAAQ;AAC1C,UAAI,QAAQ,WAAW;AAErB,gBAAQ,UAAU,IAAI,QAAQ;AAG9B,YAAI,YAAY;AACd,cAAI,eAAe,SAAS,QAAQ;AAClC,oBAAQ,MAAM,OAAO,IAAI,KAAK,QAAQ,UAAU;AAChD,oBAAQ,MAAM,QAAQ;AACtB,oBAAQ,MAAM,MAAM,eAAe,IAAI;AAAA,UACzC,WAAW,eAAe,SAAS,SAAS;AAC1C,oBAAQ,MAAM,QAAQ,IAAI,KAAK,QAAQ,UAAU;AACjD,oBAAQ,MAAM,OAAO;AACrB,oBAAQ,MAAM,MAAM,eAAe,IAAI;AAAA,UACzC;AAAA,QACF,OAAO;AACL,kBAAQ,MAAM,OAAO,eAAe,IAAI;AACxC,kBAAQ,MAAM,QAAQ;AACtB,kBAAQ,MAAM,MAAM,eAAe,IAAI;AAAA,QACzC;AAAA,MACF,OAAO;AAEL,gBAAQ,UAAU,OAAO,QAAQ;AAGjC,cAAM,MAAM,KAAK,iBAAiB,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,GAAG;AAC9D,YAAI,KAAK;AACP,kBAAQ,MAAM,OAAO,IAAI,IAAI;AAC7B,kBAAQ,MAAM,QAAQ;AACtB,kBAAQ,MAAM,MAAM,IAAI,IAAI;AAAA,QAC9B;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,sBAA4B;AAClC,SAAK,aAAa,QAAQ,CAAC,YAAY;AACrC,cAAQ,OAAO;AAAA,IACjB,CAAC;AACD,SAAK,aAAa,MAAM;AAAA,EAC1B;AAAA;AAAA,EAGQ,gBAAgB,GAAqB;AAE3C,QAAI,EAAE,WAAW,GAAG;AAClB;AAAA,IACF;AAEA,SAAK,aAAa;AAClB,SAAK,aAAa;AAClB,SAAK,SAAS,EAAE;AAChB,SAAK,SAAS,EAAE;AAEhB,UAAM,OAAO,KAAK,QAAQ,sBAAsB;AAChD,SAAK,WAAW,KAAK;AACrB,SAAK,WAAW,KAAK;AAErB,SAAK,QAAQ,UAAU,IAAI,UAAU;AACrC,SAAK,QAAQ,MAAM,aAAa;AAGhC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEQ,gBAAgB,GAAqB;AAC3C,QAAI,CAAC,KAAK,WAAY;AAEtB,MAAE,eAAe;AAEjB,UAAM,WAAW,KAAK,YAAY,EAAE,UAAU,KAAK;AACnD,UAAM,WAAW,KAAK,YAAY,EAAE,UAAU,KAAK;AAGnD,UAAM,SAAS,KAAK,IAAI,EAAE,UAAU,KAAK,MAAM;AAC/C,UAAM,SAAS,KAAK,IAAI,EAAE,UAAU,KAAK,MAAM;AAC/C,UAAM,gBAAgB,KAAK,KAAK,SAAS,SAAS,SAAS,MAAM;AAEjE,QAAI,gBAAgB,KAAK,eAAe;AACtC,WAAK,aAAa;AAAA,IACpB;AAGA,SAAK,QAAQ,YAAY;AACzB,SAAK,QAAQ,MAAM,OAAO,WAAW;AACrC,SAAK,QAAQ,MAAM,QAAQ;AAC3B,SAAK,QAAQ,MAAM,MAAM,WAAW;AAEpC,UAAM,kBAAkB,KAAK,wBAAwB,UAAU,QAAQ;AACvE,UAAM,iBAAiB,WAAW,CAAC,KAAK,QAAQ;AAChD,UAAM,kBACJ,WACA,OAAO,aACL,KAAK,aAAa,KAAK,QAAQ,UAAU,IACzC,KAAK,QAAQ;AAGjB,SAAK;AAAA,MACH;AAAA,MACA,kBAAkB;AAAA,IACpB;AAAA,EACF;AAAA,EAEQ,gBAAsB;AAC5B,QAAI,KAAK,YAAY;AACnB,WAAK,aAAa;AAClB,WAAK,QAAQ,UAAU,OAAO,UAAU;AACxC,WAAK,QAAQ,MAAM,aAAa,OAAO,KAAK,QAAQ,kBAAkB,IAAI,KAAK,QAAQ,gBAAgB;AAGvG,WAAK,oBAAoB;AAEzB,YAAM,OAAO,KAAK,QAAQ,sBAAsB;AAChD,YAAM,WAAW,KAAK;AACtB,YAAM,WAAW,KAAK;AAEtB,YAAM,iBAAiB,WAAW,CAAC,KAAK,QAAQ;AAChD,YAAM,kBACJ,WACA,OAAO,aACL,KAAK,aAAa,KAAK,QAAQ,UAAU,IACzC,KAAK,QAAQ;AAEjB,YAAM,kBAAkB,KAAK,wBAAwB,UAAU,QAAQ;AACvE,WAAK,eAAe,iBAAiB,kBAAkB,eAAe;AAGtE,iBAAW,MAAM;AACf,aAAK,aAAa;AAAA,MACpB,GAAG,CAAC;AAAA,IACN;AAAA,EACF;AAAA,EAEQ,iBAAiB,GAAqB;AAC5C,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAElB,SAAK,aAAa;AAClB,SAAK,aAAa;AAClB,UAAM,QAAQ,EAAE,QAAQ,CAAC;AACzB,SAAK,SAAS,MAAM;AACpB,SAAK,SAAS,MAAM;AAEpB,UAAM,OAAO,KAAK,QAAQ,sBAAsB;AAChD,SAAK,WAAW,KAAK;AACrB,SAAK,WAAW,KAAK;AAErB,SAAK,QAAQ,UAAU,IAAI,UAAU;AACrC,SAAK,QAAQ,MAAM,aAAa;AAGhC,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEQ,gBAAgB,GAAqB;AAC3C,QAAI,CAAC,KAAK,WAAY;AAEtB,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAElB,UAAM,QAAQ,EAAE,QAAQ,CAAC;AACzB,UAAM,WAAW,KAAK,YAAY,MAAM,UAAU,KAAK;AACvD,UAAM,WAAW,KAAK,YAAY,MAAM,UAAU,KAAK;AAGvD,UAAM,SAAS,KAAK,IAAI,MAAM,UAAU,KAAK,MAAM;AACnD,UAAM,SAAS,KAAK,IAAI,MAAM,UAAU,KAAK,MAAM;AACnD,UAAM,gBAAgB,KAAK,KAAK,SAAS,SAAS,SAAS,MAAM;AAEjE,QAAI,gBAAgB,KAAK,eAAe;AACtC,WAAK,aAAa;AAAA,IACpB;AAGA,SAAK,QAAQ,YAAY;AACzB,SAAK,QAAQ,MAAM,OAAO,WAAW;AACrC,SAAK,QAAQ,MAAM,QAAQ;AAC3B,SAAK,QAAQ,MAAM,MAAM,WAAW;AAEpC,UAAM,kBAAkB,KAAK,wBAAwB,UAAU,QAAQ;AACvE,UAAM,iBAAiB,WAAW,CAAC,KAAK,QAAQ;AAChD,UAAM,kBACJ,WACA,OAAO,aACL,KAAK,aAAa,KAAK,QAAQ,UAAU,IACzC,KAAK,QAAQ;AAGjB,SAAK;AAAA,MACH;AAAA,MACA,kBAAkB;AAAA,IACpB;AAAA,EACF;AAAA,EAEQ,eAAe,GAAqB;AAC1C,QAAI,KAAK,YAAY;AACnB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAElB,WAAK,aAAa;AAClB,WAAK,QAAQ,UAAU,OAAO,UAAU;AACxC,WAAK,QAAQ,MAAM,aAAa,OAAO,KAAK,QAAQ,kBAAkB,IAAI,KAAK,QAAQ,gBAAgB;AAGvG,WAAK,oBAAoB;AAEzB,YAAM,OAAO,KAAK,QAAQ,sBAAsB;AAChD,YAAM,WAAW,KAAK;AACtB,YAAM,WAAW,KAAK;AAEtB,YAAM,iBAAiB,WAAW,CAAC,KAAK,QAAQ;AAChD,YAAM,kBACJ,WACA,OAAO,aACL,KAAK,aAAa,KAAK,QAAQ,UAAU,IACzC,KAAK,QAAQ;AAEjB,YAAM,kBAAkB,KAAK,wBAAwB,UAAU,QAAQ;AACvE,WAAK,eAAe,iBAAiB,kBAAkB,eAAe;AAGtE,iBAAW,MAAM;AACf,aAAK,aAAa;AAAA,MACpB,GAAG,CAAC;AAAA,IACN;AAAA,EACF;AAAA,EAEQ,YAAY,GAAqB;AAEvC,QAAI,EAAE,WAAW,GAAG;AAClB;AAAA,IACF;AAGA,QAAI,CAAC,KAAK,YAAY;AACpB,UAAI,KAAK,QAAQ,SAAS;AAExB,cAAM,eAAgB,KAAK,iBAAyB,YAAY;AAChE,aAAK,QAAQ,QAAQ,GAAG;AAAA,UACtB,SAAS,KAAK,QAAQ;AAAA,UACtB,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,eAAqB;AAC3B,QAAI,KAAK,iBAAiB;AACxB,YAAM,YAAY,KAAK,iBAAiB;AACxC,YAAM,cACJ,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK,gBAAiB,IAAI,KAC3D,UAAU,CAAC;AACb,WAAK,eAAe,aAAa,KAAK,QAAQ;AAAA,IAChD;AAAA,EACF;AAAA;AAAA,EAGO,YAAY,cAA4B;AAC7C,UAAM,YAAY,KAAK,iBAAiB;AACxC,UAAM,WAAW,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,YAAY;AAC9D,QAAI,UAAU;AACZ,WAAK,eAAe,QAAQ;AAAA,IAC9B;AAAA,EACF;AAAA,EAEO,OAAa;AAClB,QAAI,KAAK,iBAAiB;AACxB,WAAK,eAAe,KAAK,iBAAiB,IAAI;AAAA,IAChD;AAAA,EACF;AAAA,EAEO,OAAa;AAClB,QAAI,KAAK,iBAAiB;AACxB,WAAK,eAAe,KAAK,iBAAiB,KAAK;AAAA,IACjD;AAAA,EACF;AAAA,EAEO,aAAa,WAA0B;AAC5C,QAAI,KAAK,SAAS;AAChB,UAAI,WAAW;AACb,aAAK,QAAQ,UAAU,IAAI,WAAW;AAAA,MACxC,OAAO;AACL,aAAK,QAAQ,UAAU,OAAO,WAAW;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AAAA,EAEO,cACL,SACA,UACA,SACM;AACN,SAAK,QAAQ,UAAU;AACvB,SAAK,QAAQ,WAAW;AACxB,SAAK,QAAQ,UAAU;AAEvB,QAAI,KAAK,iBAAiB;AACxB,WAAK,gBAAgB,aAAa,WAAW,OAAO;AAEpD,UAAI,SAAS;AACX,aAAK,gBAAgB,aAAa,YAAY,QAAQ,SAAS,CAAC;AAAA,MAClE;AAEA,UAAI,UAAU;AACZ;AAAC,QAAC,KAAK,gBAAwB,WAAW;AAAA,MAC5C;AAAA,IACF,OAAO;AAEL,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEO,eAAe,UAA6B;AACjD,SAAK,QAAQ,WAAW;AACxB,QAAI,KAAK,iBAAiB;AACxB;AAAC,MAAC,KAAK,gBAAwB,WAAW;AAAA,IAC5C;AAAA,EACF;AAAA,EAEO,WACL,SACM;AACN,QAAI,KAAK,QAAQ,eAAe,QAAS;AAEzC,SAAK,QAAQ,aAAa;AAG1B,SAAK,aAAa;AAGlB,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,KAAK,SAAS;AAChB,WAAK,QAAQ,MAAM,QAAQ,GAAG,SAAS;AACvC,WAAK,QAAQ,MAAM,SAAS,GAAG,SAAS;AAAA,IAC1C;AAGA,QAAI,KAAK,iBAAiB;AAExB,WAAK,gBAAgB,aAAa,QAAQ,OAAO;AAGjD,YAAM,WAAW,KAAK;AACtB,UAAI,SAAS,eAAe;AAC1B,iBAAS,cAAc;AAAA,MACzB;AAGA,WAAK,gBAAgB,MAAM,QAAQ;AACnC,WAAK,gBAAgB,MAAM,SAAS;AAGpC,YAAM,WAAW,KAAK,gBAAgB,iBAAiB,eAAe;AAEtE,eAAS,QAAQ,CAAC,YAAY;AAC5B,cAAM,UAAU;AAChB,gBAAQ,MAAM,QAAQ;AACtB,gBAAQ,MAAM,SAAS;AAEvB,gBAAQ,aAAa,QAAQ,OAAO;AAAA,MACtC,CAAC;AAAA,IACH;AAGA,SAAK,cAAc;AAAA,EACrB;AAAA,EAEO,aAAiC;AACtC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA,EAEO,cAA6D;AAClE,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,gBAAiB,QAAO;AAEnD,UAAM,OAAO,KAAK,QAAQ,sBAAsB;AAChD,WAAO;AAAA,MACL,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,MAAM,KAAK,gBAAgB;AAAA,IAC7B;AAAA,EACF;AAAA,EAEO,aAAmB;AACxB,QAAI,CAAC,KAAK,WAAW,KAAK,YAAa;AAEvC,SAAK,cAAc;AACnB,SAAK,QAAQ,UAAU,IAAI,WAAW;AAAA,EACxC;AAAA,EAEO,YAAkB;AACvB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,YAAa;AAExC,SAAK,cAAc;AACnB,SAAK,QAAQ,UAAU,OAAO,WAAW;AAAA,EAC3C;AAAA,EAEO,gBAAgC;AACrC,WAAO,KAAK,UAAU,KAAK,QAAQ,sBAAsB,IAAI;AAAA,EAC/D;AAAA,EAEO,UAAgB;AACrB,SAAK,UAAU;AAEf,QAAI,KAAK,SAAS;AAChB,WAAK,QAAQ,OAAO;AAAA,IACtB;AAGA,QACE,OAAO,aAAa,eACpB,CAAC,SAAS,cAAc,oBAAoB,GAC5C;AACA,YAAM,SAAS,SAAS,cAAc,6BAA6B;AACnE,cAAQ,OAAO;AAAA,IACjB;AAAA,EACF;AACF;AAKA,eAAsB,aACpB,UAAyB,CAAC,GACA;AAC1B,QAAM,SAAS,IAAI,gBAAgB,OAAO;AAE1C,SAAO;AACT;AAGA,IAAO,iBAAQ;","names":[]}

package/dist/chunk-7ETKG6KR.cjs

@@ -0,0 +1,387 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkXOKG3KILcjs = require('./chunk-XOKG3KIL.cjs');
+
+
+var _chunkZBDE64SDcjs = require('./chunk-ZBDE64SD.cjs');
+
+// src/backup-modal.ts
+var _passkeyauth = require('@lukso/passkey-auth');
+var _lit = require('lit');
+var _decoratorsjs = require('lit/decorators.js');
+var _zxcvbn = require('zxcvbn'); var _zxcvbn2 = _interopRequireDefault(_zxcvbn);
+require('@lukso/web-components/dist/components/lukso-modal');
+require('@lukso/web-components/dist/components/lukso-button');
+require('@lukso/web-components/dist/components/lukso-input');
+var BackupModal = class extends _chunkXOKG3KILcjs.CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.theme = "auto";
+    this.currentStep = 1 /* CHOICE */;
+    this.useEncryption = true;
+    this.password = "";
+    this.passwordConfirm = "";
+    this.passwordErrors = [];
+    this.isCreatingBackup = false;
+    this.generatedBackup = null;
+  }
+  /**
+   * Public method for parent to set backup result
+   * Called after parent handles the 'create' event
+   */
+  setBackupResult(backupFile, options) {
+    this.isCreatingBackup = false;
+    if (_optionalChain([options, 'optionalAccess', _ => _.error])) {
+      this.passwordErrors = [options.error];
+      this.generatedBackup = null;
+    } else if (backupFile) {
+      this.generatedBackup = backupFile;
+      this.currentStep = 3 /* DOWNLOAD */;
+    }
+  }
+  render() {
+    return _lit.html`
+      <lukso-modal
+        ?is-open=${this.open}
+        size="medium"
+        @on-backdrop-click=${this.close}
+      >
+        <div class="p-6">
+          <!-- Header -->
+          <h2 class="m-0 mb-6 text-neutral-20 dark:text-white heading-inter-21-semi-bold">
+            ${this.getStepTitle()}
+          </h2>
+
+          <!-- Step content -->
+          ${this.renderStep()}
+        </div>
+      </lukso-modal>
+    `;
+  }
+  renderStep() {
+    switch (this.currentStep) {
+      case 1 /* CHOICE */:
+        return this.renderChoiceStep();
+      case 2 /* PASSWORD */:
+        return this.renderPasswordStep();
+      case 3 /* DOWNLOAD */:
+        return this.renderDownloadStep();
+      default:
+        return _lit.nothing;
+    }
+  }
+  renderChoiceStep() {
+    return _lit.html`
+      <div class="flex flex-col gap-3 mb-6">
+        <!-- Encrypted option (recommended) -->
+        <div
+          class="border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60"
+          @click=${() => this.selectBackupType(true)}
+        >
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1">
+              Encrypt backup file
+            </span>
+            <span class="text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide">
+              Recommended
+            </span>
+          </div>
+          <p class="m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
+            Uses password-based encryption to protect the secrets in this file.
+          </p>
+        </div>
+
+        <!-- Unencrypted option -->
+        <div
+          class="border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60"
+          @click=${() => this.selectBackupType(false)}
+        >
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1">
+              Plain text backup
+            </span>
+            <span class="text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide">
+              For development only
+            </span>
+          </div>
+          <p class="m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
+            Secrets will be stored in plain text.
+          </p>
+        </div>
+      </div>
+
+      <div class="flex justify-between gap-3">
+        <lukso-button variant="text" @click=${this.close}>
+          Cancel
+        </lukso-button>
+      </div>
+    `;
+  }
+  renderPasswordStep() {
+    const passwordStrength = this.password ? this.calculatePasswordStrength() : null;
+    const passwordsMatch = this.password && this.passwordConfirm && this.password === this.passwordConfirm;
+    const canProceed = this.password && this.passwordConfirm && passwordsMatch;
+    return _lit.html`
+      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
+        Choose a strong password to encrypt your backup. You'll need this password to restore your wallet.
+      </p>
+
+      <div class="space-y-4">
+        <lukso-input
+          type="password"
+          label="Password"
+          placeholder="Enter a strong password"
+          .value=${this.password}
+          @on-input=${(e) => this.password = e.detail.value}
+          is-full-width
+          autofocus
+        ></lukso-input>
+
+        ${this.passwordErrors.map(
+      (error) => _lit.html`
+          <div class="mt-1 text-red-55 paragraph-inter-13-regular">${error}</div>
+        `
+    )}
+
+        ${passwordStrength ? _lit.html`
+          <div class="mt-3">
+            <div class="flex items-center justify-between mb-1">
+              <span class="paragraph-inter-13-regular text-neutral-40">Password strength:</span>
+              <span class="paragraph-inter-13-semi-bold ${passwordStrength.color}">${passwordStrength.label}</span>
+            </div>
+            <div class="h-1.5 bg-neutral-90 dark:bg-neutral-70 rounded-full overflow-hidden">
+              <div
+                class="h-full ${passwordStrength.bgColor} transition-all duration-300"
+                style="width: ${passwordStrength.width}%"
+              ></div>
+            </div>
+            <p class="mt-1 mb-0 text-neutral-40 paragraph-inter-12-regular">
+              Time to crack: ${passwordStrength.crackTime}
+            </p>
+            ${passwordStrength.feedback ? _lit.html`
+              <p class="mt-2 mb-0 text-neutral-40 paragraph-inter-12-regular">${passwordStrength.feedback}</p>
+            ` : _lit.nothing}
+          </div>
+        ` : _lit.nothing}
+
+        <lukso-input
+          type="password"
+          label="Confirm Password"
+          placeholder="Re-enter your password"
+          .value=${this.passwordConfirm}
+          @on-input=${(e) => this.passwordConfirm = e.detail.value}
+          is-full-width
+        ></lukso-input>
+
+        ${this.passwordConfirm ? _lit.html`
+          <div class="flex items-center justify-between mt-2">
+            <span class="paragraph-inter-13-regular text-neutral-40">Passwords match:</span>
+            <span class="paragraph-inter-13-semi-bold ${passwordsMatch ? "text-green-54" : "text-red-55"}">
+              ${passwordsMatch ? "Yes" : "No"}
+            </span>
+          </div>
+        ` : _lit.nothing}
+      </div>
+
+      <div class="flex justify-between gap-3 mt-6">
+        <div class="flex gap-3">
+          <lukso-button variant="text" @click=${this.close}>
+            Cancel
+          </lukso-button>
+          <lukso-button variant="secondary" @click=${this.goBack}>
+            Back
+          </lukso-button>
+        </div>
+        <lukso-button
+          variant="primary"
+          ?disabled=${!canProceed || this.isCreatingBackup}
+          ?is-loading=${this.isCreatingBackup}
+          @click=${this.createBackup}
+        >
+          Create Backup
+        </lukso-button>
+      </div>
+    `;
+  }
+  renderDownloadStep() {
+    return _lit.html`
+      <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular">
+        Your backup has been created${this.useEncryption ? " and encrypted" : ""}. Download it and keep it in a safe place.
+      </p>
+
+      ${!this.useEncryption ? _lit.html`
+        <p class="mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular">
+          This unencrypted backup is intended for development purposes. Use it when creating dapps that need access to the profile for testing.
+        </p>
+      ` : _lit.nothing}
+
+      <div class="flex justify-end gap-3">
+        <lukso-button variant="primary" @click=${this.handleDownload}>
+          Download Backup
+        </lukso-button>
+      </div>
+    `;
+  }
+  getStepTitle() {
+    switch (this.currentStep) {
+      case 1 /* CHOICE */:
+        return "Backup Wallet";
+      case 2 /* PASSWORD */:
+        return "Set Password";
+      case 3 /* DOWNLOAD */:
+        return "Download Backup";
+      default:
+        return "Backup Wallet";
+    }
+  }
+  selectBackupType(encrypted) {
+    this.useEncryption = encrypted;
+    if (encrypted) {
+      this.currentStep = 2 /* PASSWORD */;
+    } else {
+      this.createBackup();
+    }
+  }
+  async createBackup() {
+    this.isCreatingBackup = true;
+    this.passwordErrors = [];
+    const createEvent = new CustomEvent("create", {
+      detail: {
+        password: this.useEncryption ? this.password : void 0,
+        encrypted: this.useEncryption
+      },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    this.dispatchEvent(createEvent);
+    if (!createEvent.defaultPrevented) {
+      this.passwordErrors = [
+        'No backup handler configured. Please handle the "create" event.'
+      ];
+      this.isCreatingBackup = false;
+    }
+  }
+  handleDownload() {
+    if (this.generatedBackup) {
+      _passkeyauth.downloadBackup.call(void 0, this.generatedBackup);
+      this.dispatchEvent(
+        new CustomEvent("download", {
+          detail: this.generatedBackup,
+          bubbles: true,
+          composed: true
+        })
+      );
+      setTimeout(() => {
+        this.close();
+      }, 100);
+    }
+  }
+  goBack() {
+    if (this.currentStep === 2 /* PASSWORD */) {
+      this.currentStep = 1 /* CHOICE */;
+      this.password = "";
+      this.passwordConfirm = "";
+      this.passwordErrors = [];
+    }
+  }
+  close() {
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent("close", { bubbles: true, composed: true })
+    );
+    setTimeout(() => {
+      this.currentStep = 1 /* CHOICE */;
+      this.useEncryption = true;
+      this.password = "";
+      this.passwordConfirm = "";
+      this.passwordErrors = [];
+      this.isCreatingBackup = false;
+      this.generatedBackup = null;
+    }, 300);
+  }
+  calculatePasswordStrength() {
+    const result = _zxcvbn2.default.call(void 0, this.password);
+    const strengthMap = [
+      {
+        level: "very-weak",
+        label: "Very Weak",
+        color: "text-red-55",
+        bgColor: "bg-red-55",
+        width: 20
+      },
+      {
+        level: "weak",
+        label: "Weak",
+        color: "text-red-65",
+        bgColor: "bg-red-65",
+        width: 40
+      },
+      {
+        level: "fair",
+        label: "Fair",
+        color: "text-yellow-55",
+        bgColor: "bg-yellow-55",
+        width: 60
+      },
+      {
+        level: "good",
+        label: "Good",
+        color: "text-green-54",
+        bgColor: "bg-green-54",
+        width: 80
+      },
+      {
+        level: "strong",
+        label: "Strong",
+        color: "text-green-45",
+        bgColor: "bg-green-45",
+        width: 100
+      }
+    ];
+    const strength = strengthMap[result.score];
+    const feedback = result.feedback.suggestions.join(" ") || result.feedback.warning || "";
+    const crackTime = result.crack_times_display.offline_slow_hashing_1e4_per_second;
+    return {
+      ...strength,
+      feedback,
+      crackTime
+    };
+  }
+};
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.property.call(void 0, { type: Boolean, reflect: true })
+], BackupModal.prototype, "open", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.property.call(void 0, { type: String })
+], BackupModal.prototype, "theme", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.state.call(void 0, )
+], BackupModal.prototype, "currentStep", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.state.call(void 0, )
+], BackupModal.prototype, "useEncryption", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.state.call(void 0, )
+], BackupModal.prototype, "password", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.state.call(void 0, )
+], BackupModal.prototype, "passwordConfirm", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.state.call(void 0, )
+], BackupModal.prototype, "passwordErrors", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.state.call(void 0, )
+], BackupModal.prototype, "isCreatingBackup", 2);
+_chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.state.call(void 0, )
+], BackupModal.prototype, "generatedBackup", 2);
+BackupModal = exports.BackupModal = _chunkZBDE64SDcjs.__decorateClass.call(void 0, [
+  _decoratorsjs.customElement.call(void 0, "backup-modal")
+], BackupModal);
+
+
+
+exports.BackupModal = BackupModal;
+//# sourceMappingURL=chunk-7ETKG6KR.cjs.map

package/dist/chunk-7ETKG6KR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/up-connector/dist/chunk-7ETKG6KR.cjs","../src/backup-modal.ts"],"names":[],"mappings":"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","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/up-connector/dist/chunk-7ETKG6KR.cjs","sourcesContent":[null,"/**\n * Backup Modal - Lit Component\n *\n * Framework-agnostic backup modal for wallet data export.\n * Uses lukso-modal from @lukso/web-components for consistent UI.\n */\n\nimport type { BackupFile } from '@lukso/passkey-auth'\nimport { downloadBackup } from '@lukso/passkey-auth'\nimport { html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport zxcvbn from 'zxcvbn'\nimport { CoreLitElement } from './styles'\n\n// Import lukso web components\nimport '@lukso/web-components/dist/components/lukso-modal'\nimport '@lukso/web-components/dist/components/lukso-button'\nimport '@lukso/web-components/dist/components/lukso-input'\n\nenum Step {\n  CHOICE = 1,\n  PASSWORD = 2,\n  DOWNLOAD = 3,\n}\n\ninterface PasswordStrength {\n  level: string\n  label: string\n  color: string\n  bgColor: string\n  width: number\n  feedback: string\n  crackTime: string | number\n}\n\n@customElement('backup-modal')\nexport class BackupModal extends CoreLitElement {\n  // Public properties\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: String }) theme: 'light' | 'dark' | 'auto' = 'auto'\n\n  // Private state - wizard flow\n  @state() private currentStep: Step = Step.CHOICE\n  @state() private useEncryption = true\n  @state() private password = ''\n  @state() private passwordConfirm = ''\n  @state() private passwordErrors: string[] = []\n  @state() private isCreatingBackup = false\n  @state() private generatedBackup: BackupFile | null = null\n\n  /**\n   * Public method for parent to set backup result\n   * Called after parent handles the 'create' event\n   */\n  public setBackupResult(\n    backupFile: BackupFile | null,\n    options?: {\n      error?: string\n    }\n  ) {\n    this.isCreatingBackup = false\n\n    if (options?.error) {\n      this.passwordErrors = [options.error]\n      this.generatedBackup = null\n    } else if (backupFile) {\n      this.generatedBackup = backupFile\n      this.currentStep = Step.DOWNLOAD\n    }\n  }\n\n  render() {\n    return html`\n      <lukso-modal\n        ?is-open=${this.open}\n        size=\"medium\"\n        @on-backdrop-click=${this.close}\n      >\n        <div class=\"p-6\">\n          <!-- Header -->\n          <h2 class=\"m-0 mb-6 text-neutral-20 dark:text-white heading-inter-21-semi-bold\">\n            ${this.getStepTitle()}\n          </h2>\n\n          <!-- Step content -->\n          ${this.renderStep()}\n        </div>\n      </lukso-modal>\n    `\n  }\n\n  private renderStep() {\n    switch (this.currentStep) {\n      case Step.CHOICE:\n        return this.renderChoiceStep()\n      case Step.PASSWORD:\n        return this.renderPasswordStep()\n      case Step.DOWNLOAD:\n        return this.renderDownloadStep()\n      default:\n        return nothing\n    }\n  }\n\n  private renderChoiceStep() {\n    return html`\n      <div class=\"flex flex-col gap-3 mb-6\">\n        <!-- Encrypted option (recommended) -->\n        <div\n          class=\"border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60\"\n          @click=${() => this.selectBackupType(true)}\n        >\n          <div class=\"flex items-center gap-3 mb-2\">\n            <span class=\"text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1\">\n              Encrypt backup file\n            </span>\n            <span class=\"text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide\">\n              Recommended\n            </span>\n          </div>\n          <p class=\"m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular\">\n            Uses password-based encryption to protect the secrets in this file.\n          </p>\n        </div>\n\n        <!-- Unencrypted option -->\n        <div\n          class=\"border-2 border-neutral-90 dark:border-neutral-70 rounded-lg p-4 cursor-pointer transition-all hover:border-neutral-60 dark:hover:border-neutral-60\"\n          @click=${() => this.selectBackupType(false)}\n        >\n          <div class=\"flex items-center gap-3 mb-2\">\n            <span class=\"text-neutral-10 dark:text-white heading-inter-16-semi-bold flex-1\">\n              Plain text backup\n            </span>\n            <span class=\"text-xs text-neutral-50 dark:text-neutral-60 uppercase tracking-wide\">\n              For development only\n            </span>\n          </div>\n          <p class=\"m-0 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular\">\n            Secrets will be stored in plain text.\n          </p>\n        </div>\n      </div>\n\n      <div class=\"flex justify-between gap-3\">\n        <lukso-button variant=\"text\" @click=${this.close}>\n          Cancel\n        </lukso-button>\n      </div>\n    `\n  }\n\n  private renderPasswordStep() {\n    const passwordStrength = this.password\n      ? this.calculatePasswordStrength()\n      : null\n    const passwordsMatch =\n      this.password &&\n      this.passwordConfirm &&\n      this.password === this.passwordConfirm\n    const canProceed = this.password && this.passwordConfirm && passwordsMatch\n\n    return html`\n      <p class=\"mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular\">\n        Choose a strong password to encrypt your backup. You'll need this password to restore your wallet.\n      </p>\n\n      <div class=\"space-y-4\">\n        <lukso-input\n          type=\"password\"\n          label=\"Password\"\n          placeholder=\"Enter a strong password\"\n          .value=${this.password}\n          @on-input=${(e: CustomEvent) => (this.password = e.detail.value)}\n          is-full-width\n          autofocus\n        ></lukso-input>\n\n        ${this.passwordErrors.map(\n          (error) => html`\n          <div class=\"mt-1 text-red-55 paragraph-inter-13-regular\">${error}</div>\n        `\n        )}\n\n        ${\n          passwordStrength\n            ? html`\n          <div class=\"mt-3\">\n            <div class=\"flex items-center justify-between mb-1\">\n              <span class=\"paragraph-inter-13-regular text-neutral-40\">Password strength:</span>\n              <span class=\"paragraph-inter-13-semi-bold ${passwordStrength.color}\">${passwordStrength.label}</span>\n            </div>\n            <div class=\"h-1.5 bg-neutral-90 dark:bg-neutral-70 rounded-full overflow-hidden\">\n              <div\n                class=\"h-full ${passwordStrength.bgColor} transition-all duration-300\"\n                style=\"width: ${passwordStrength.width}%\"\n              ></div>\n            </div>\n            <p class=\"mt-1 mb-0 text-neutral-40 paragraph-inter-12-regular\">\n              Time to crack: ${passwordStrength.crackTime}\n            </p>\n            ${\n              passwordStrength.feedback\n                ? html`\n              <p class=\"mt-2 mb-0 text-neutral-40 paragraph-inter-12-regular\">${passwordStrength.feedback}</p>\n            `\n                : nothing\n            }\n          </div>\n        `\n            : nothing\n        }\n\n        <lukso-input\n          type=\"password\"\n          label=\"Confirm Password\"\n          placeholder=\"Re-enter your password\"\n          .value=${this.passwordConfirm}\n          @on-input=${(e: CustomEvent) => (this.passwordConfirm = e.detail.value)}\n          is-full-width\n        ></lukso-input>\n\n        ${\n          this.passwordConfirm\n            ? html`\n          <div class=\"flex items-center justify-between mt-2\">\n            <span class=\"paragraph-inter-13-regular text-neutral-40\">Passwords match:</span>\n            <span class=\"paragraph-inter-13-semi-bold ${passwordsMatch ? 'text-green-54' : 'text-red-55'}\">\n              ${passwordsMatch ? 'Yes' : 'No'}\n            </span>\n          </div>\n        `\n            : nothing\n        }\n      </div>\n\n      <div class=\"flex justify-between gap-3 mt-6\">\n        <div class=\"flex gap-3\">\n          <lukso-button variant=\"text\" @click=${this.close}>\n            Cancel\n          </lukso-button>\n          <lukso-button variant=\"secondary\" @click=${this.goBack}>\n            Back\n          </lukso-button>\n        </div>\n        <lukso-button\n          variant=\"primary\"\n          ?disabled=${!canProceed || this.isCreatingBackup}\n          ?is-loading=${this.isCreatingBackup}\n          @click=${this.createBackup}\n        >\n          Create Backup\n        </lukso-button>\n      </div>\n    `\n  }\n\n  private renderDownloadStep() {\n    return html`\n      <p class=\"mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-16-regular\">\n        Your backup has been created${this.useEncryption ? ' and encrypted' : ''}. Download it and keep it in a safe place.\n      </p>\n\n      ${\n        !this.useEncryption\n          ? html`\n        <p class=\"mb-6 text-neutral-40 dark:text-neutral-50 paragraph-inter-14-regular\">\n          This unencrypted backup is intended for development purposes. Use it when creating dapps that need access to the profile for testing.\n        </p>\n      `\n          : nothing\n      }\n\n      <div class=\"flex justify-end gap-3\">\n        <lukso-button variant=\"primary\" @click=${this.handleDownload}>\n          Download Backup\n        </lukso-button>\n      </div>\n    `\n  }\n\n  private getStepTitle(): string {\n    switch (this.currentStep) {\n      case Step.CHOICE:\n        return 'Backup Wallet'\n      case Step.PASSWORD:\n        return 'Set Password'\n      case Step.DOWNLOAD:\n        return 'Download Backup'\n      default:\n        return 'Backup Wallet'\n    }\n  }\n\n  private selectBackupType(encrypted: boolean) {\n    this.useEncryption = encrypted\n    if (encrypted) {\n      this.currentStep = Step.PASSWORD\n    } else {\n      // Unencrypted backup - create immediately\n      this.createBackup()\n    }\n  }\n\n  private async createBackup() {\n    this.isCreatingBackup = true\n    this.passwordErrors = []\n\n    // Emit create event with password (if encrypted)\n    // Parent should handle backup creation\n    const createEvent = new CustomEvent('create', {\n      detail: {\n        password: this.useEncryption ? this.password : undefined,\n        encrypted: this.useEncryption,\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    })\n\n    this.dispatchEvent(createEvent)\n\n    // If parent didn't prevent default, show error\n    if (!createEvent.defaultPrevented) {\n      this.passwordErrors = [\n        'No backup handler configured. Please handle the \"create\" event.',\n      ]\n      this.isCreatingBackup = false\n    }\n    // Otherwise, parent will call setBackupResult()\n  }\n\n  private handleDownload() {\n    if (this.generatedBackup) {\n      downloadBackup(this.generatedBackup)\n\n      // Dispatch download event\n      this.dispatchEvent(\n        new CustomEvent('download', {\n          detail: this.generatedBackup,\n          bubbles: true,\n          composed: true,\n        })\n      )\n\n      // Close modal after download\n      setTimeout(() => {\n        this.close()\n      }, 100)\n    }\n  }\n\n  private goBack() {\n    if (this.currentStep === Step.PASSWORD) {\n      this.currentStep = Step.CHOICE\n      this.password = ''\n      this.passwordConfirm = ''\n      this.passwordErrors = []\n    }\n  }\n\n  private close() {\n    this.open = false\n    this.dispatchEvent(\n      new CustomEvent('close', { bubbles: true, composed: true })\n    )\n\n    // Reset state after animation\n    setTimeout(() => {\n      this.currentStep = Step.CHOICE\n      this.useEncryption = true\n      this.password = ''\n      this.passwordConfirm = ''\n      this.passwordErrors = []\n      this.isCreatingBackup = false\n      this.generatedBackup = null\n    }, 300)\n  }\n\n  private calculatePasswordStrength(): PasswordStrength {\n    const result = zxcvbn(this.password)\n\n    const strengthMap = [\n      {\n        level: 'very-weak',\n        label: 'Very Weak',\n        color: 'text-red-55',\n        bgColor: 'bg-red-55',\n        width: 20,\n      },\n      {\n        level: 'weak',\n        label: 'Weak',\n        color: 'text-red-65',\n        bgColor: 'bg-red-65',\n        width: 40,\n      },\n      {\n        level: 'fair',\n        label: 'Fair',\n        color: 'text-yellow-55',\n        bgColor: 'bg-yellow-55',\n        width: 60,\n      },\n      {\n        level: 'good',\n        label: 'Good',\n        color: 'text-green-54',\n        bgColor: 'bg-green-54',\n        width: 80,\n      },\n      {\n        level: 'strong',\n        label: 'Strong',\n        color: 'text-green-45',\n        bgColor: 'bg-green-45',\n        width: 100,\n      },\n    ]\n\n    const strength = strengthMap[result.score]\n    const feedback =\n      result.feedback.suggestions.join(' ') || result.feedback.warning || ''\n    const crackTime =\n      result.crack_times_display.offline_slow_hashing_1e4_per_second\n\n    return {\n      ...strength,\n      feedback,\n      crackTime,\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'backup-modal': BackupModal\n  }\n}\n"]}

package/dist/chunk-EUXUH3YW.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+export {
+  __decorateClass
+};
+//# sourceMappingURL=chunk-EUXUH3YW.js.map

package/dist/chunk-EUXUH3YW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}