@tatchi-xyz/sdk 0.21.0 → 0.31.1

package/dist/cjs/react/src/core/WebAuthnManager/LitComponents/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LitElementWithProps","ensureExternalStyles","toMove: Node[]","unit","pct","vv: any","W3A_DRAWER_ID"],"sources":["../../../../../../../../src/core/WebAuthnManager/LitComponents/Drawer/index.ts"],"sourcesContent":["import { html, css } from 'lit';\nimport { LitElementWithProps } from '../LitElementWithProps';\nimport { dispatchLitCancel } from '../lit-events';\nimport { ensureExternalStyles } from '../css/css-loader';\n\nexport type DrawerTheme = 'dark' | 'light';\n\n// Consolidated constants (single source of truth)\nconst SHEET_HEIGHT_VH = 100; // Tall sheet to allow reveal/overpull\nconst DEFAULT_VISIBLE_VH = 50; // Fallback visible height when not provided\nconst FLICK_UP_CLOSE_THRESHOLD = -0.6; // px/ms (~600 px/s upward)\nconst FLICK_DOWN_CLOSE_THRESHOLD = 0.7;  // px/ms (~700 px/s downward)\nconst NEAR_CLOSED_PX = 50; // Close when within 50px of bottom\nconst OVERPULL_SHEET_FACTOR = 0.5;    // Allow at least 50% of sheet height\nconst OVERPULL_VIEWPORT_FACTOR = 0.5; // Or 50% of viewport height\n\nfunction clamp(n: number, min: number, max: number): number { return Math.max(min, Math.min(max, n)); }\n\nexport class DrawerElement extends LitElementWithProps {\n  static properties = {\n    open: { type: Boolean, reflect: true },\n    theme: { type: String, reflect: true },\n    loading: { type: Boolean },\n    errorMessage: { type: String },\n    dragToClose: { type: Boolean, attribute: 'drag-to-close' },\n    showCloseButton: { type: Boolean, attribute: 'show-close-button' },\n    // Optional height cap for the drawer (e.g., '50vh')\n    height: { type: String },\n    // Minimum upward overpull allowance in pixels\n    overpullPx: { type: Number, attribute: 'overpull-px' },\n    // Height is content-driven with an optional cap\n  } as const;\n\n  declare open: boolean;\n  declare theme: DrawerTheme;\n  declare loading: boolean;\n  declare errorMessage?: string;\n  declare dragToClose: boolean;\n  declare showCloseButton: boolean;\n  declare height?: string;\n  declare overpullPx: number;\n\n  // Drag state\n  private isDragging = false;\n  private pendingDrag = false;\n  private startY = 0;\n  private currentY = 0;\n  private dragDistance = 0;\n  private lastDragTime = 0;\n  private velocity = 0;\n  private drawerElement: HTMLElement | null = null;\n  private overlayElement: HTMLElement | null = null;\n  private bodyElement: HTMLElement | null = null;\n  private drawerHeight = 0;\n  private startTranslateYPx = 0; // translateY at gesture start, in px\n  private openRestTranslateYPx = 0; // translateY for the default \"open\" rest position, in px\n  private dragStartTime = 0; // ms\n  private isClosing = false;\n  private aboveFoldResizeObserver?: ResizeObserver;\n  private drawerResizeObserver?: ResizeObserver;\n  private detachViewportSync?: () => void;\n\n  private _syncRAF: number | null = null;\n  private _lastOpenTranslatePct?: string;\n  private _contentAnimRAF: number | null = null;\n  private _activeHeightTransitions = 0;\n  private detachContentAnimSync?: () => void;\n  // Disable transitions during first layout to avoid wrong-direction animation\n  private _initialMount = true;\n  // Suppress transition for the very first programmatic open\n  private _firstOpen = true;\n  // Styles gating to avoid FOUC under strict CSP (no inline styles)\n  private _stylesReady = false;\n  private _stylePromises: Promise<void>[] = [];\n  private _stylesAwaiting: Promise<void> | null = null;\n  // Observe and adopt any children appended after mount (e.g., viewer injected later)\n  private _childObserver: MutationObserver | null = null;\n\n  protected createRenderRoot(): HTMLElement | DocumentFragment {\n    // Light DOM render by design (no Shadow DOM):\n    // - Strict CSP: avoid inline <style> and nonces; rely on external <link> or constructable stylesheets.\n    // - Compatibility: adoptedStyleSheets is not universally available (iOS Safari/WebViews).\n    // - Composition: sharing CSS variables across LitElements is simpler in light DOM; Shadow DOM would\n    //   require pushing CSS vars into every component boundary. We therefore expose a stable `contentRoot`\n    //   and use a slot-like adoption helper instead of <slot> in Shadow DOM.\n    const root = (this as unknown) as HTMLElement;\n    // Ensure drawer structural styles are available on the host/document\n    const p = ensureExternalStyles(root as ShadowRoot | DocumentFragment | HTMLElement, 'drawer.css', 'data-w3a-drawer-css');\n    this._stylePromises.push(p);\n    p.catch(() => {});\n    return root;\n  }\n\n  constructor() {\n    super();\n    this.open = false;\n    this.theme = 'dark';\n    this.loading = false;\n    this.dragToClose = true;\n    this.showCloseButton = true;\n    this.height = undefined;\n    this.overpullPx = 120;\n  }\n\n  protected getComponentPrefix(): string { return 'modal'; }\n\n  // Capture initial light-DOM children so they can be projected into the template\n  private _initialChildren: Node[] | null = null;\n\n  connectedCallback() {\n    // Preserve existing child nodes before Lit's first render\n    if (!this._initialChildren) {\n      this._initialChildren = Array.from(this.childNodes);\n      try {\n        for (const n of this._initialChildren) this.removeChild(n);\n      } catch {}\n    }\n    super.connectedCallback();\n    this.attachViewportSync();\n  }\n\n  // Defer initial render until external styles are adopted to prevent FOUC\n  protected shouldUpdate(_changed: Map<string | number | symbol, unknown>): boolean {\n    if (this._stylesReady) return true;\n    if (!this._stylesAwaiting) {\n      const settle = Promise.all(this._stylePromises)\n        .then(() => new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));\n      this._stylesAwaiting = settle.then(() => { this._stylesReady = true; this.requestUpdate(); });\n    }\n    return false;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeDragListeners();\n    this.drawerElement?.removeEventListener('transitionend', this.handleTransitionEnd as EventListener);\n    this.aboveFoldResizeObserver?.disconnect();\n    this.drawerResizeObserver?.disconnect();\n    if (this.detachViewportSync) { this.detachViewportSync(); this.detachViewportSync = undefined; }\n    if (this.detachContentAnimSync) { this.detachContentAnimSync(); this.detachContentAnimSync = undefined; }\n    if (this._childObserver) { this._childObserver.disconnect(); this._childObserver = null; }\n  }\n\n  // Ensure visual state resets immediately when `open` attribute flips\n  attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {\n    super.attributeChangedCallback?.(name, oldVal, newVal);\n    if (name === 'open' && newVal !== oldVal) {\n      // When opening, rely on CSS; avoid inline style writes for CSP\n      if (newVal !== null) { this.isClosing = false; }\n    }\n  }\n\n  firstUpdated() {\n    const root = this.renderRoot as unknown as ParentNode;\n    this.drawerElement = root.querySelector('.drawer') as HTMLElement;\n    this.overlayElement = root.querySelector('.overlay') as HTMLElement;\n    this.bodyElement = root.querySelector('.body') as HTMLElement;\n    this.syncCssVarsForOpenTranslate();\n    // Seed a safe default for drag translate so if a drag starts before\n    // we have published a pixel value, it falls back to the current open\n    // translate instead of 0px. This prevents any momentary jump to the top.\n    try { this.setCssVars({ '--w3a-drawer__drag-translate': 'var(--w3a-drawer__open-translate)' }); } catch {}\n    // Ensure no transition on first measurement; enable after a frame\n    requestAnimationFrame(() => {\n      this._initialMount = false;\n      this.requestUpdate();\n    });\n    this.drawerElement?.addEventListener('transitionend', this.handleTransitionEnd as EventListener);\n    // Encapsulated: follow inner height transitions so the drawer animates with content\n    this.setupAnimateWithContentSync();\n    // Recalculate when slot content changes or viewport resizes\n    // In light DOM mode, slotchange is not meaningful; rely on ResizeObserver below\n    window.addEventListener('resize', this.syncCssVarsForOpenTranslate.bind(this));\n    // Observe size changes of the above-fold content and drawer container\n    const above = root.querySelector('.above-fold') as HTMLElement | null;\n    if (above && 'ResizeObserver' in window) {\n      this.aboveFoldResizeObserver = new ResizeObserver(() => this.syncCssVarsForOpenTranslate());\n      this.aboveFoldResizeObserver.observe(above);\n    }\n    if (this.drawerElement && 'ResizeObserver' in window) {\n      this.drawerResizeObserver = new ResizeObserver(() => this.syncCssVarsForOpenTranslate());\n      this.drawerResizeObserver.observe(this.drawerElement);\n    }\n    this.setupDragListeners();\n\n    // Slot-like adoption: move any host children appended after mount into the drawer's content area.\n    // We intentionally do not use Shadow DOM + <slot> here because we want to:\n    //  - stay CSP-compatible without nonces (no inline <style>),\n    //  - work on platforms without adoptedStyleSheets (e.g., iOS Safari/WebViews), and\n    //  - make cross-component CSS variable sharing straightforward without punching vars through\n    //    multiple ShadowRoot boundaries.\n    this.adoptContentIntoSlot();\n    this._childObserver = new MutationObserver(() => this.adoptContentIntoSlot());\n    this._childObserver.observe(this as unknown as Node, { childList: true });\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      // When externally toggled open, allow CSS transitions to play naturally.\n      if (this.open) {\n        this.isClosing = false;\n        // No first-open transition suppression; double rAF in the viewer handles settle.\n        this._firstOpen = false;\n        this.dispatchEvent(new CustomEvent('w3a:drawer-open-start', { bubbles: true, composed: true }));\n      } else {\n        this.dispatchEvent(new CustomEvent('w3a:drawer-close-start', { bubbles: true, composed: true }));\n      }\n    }\n\n    // Re-setup drag listeners if dragToClose property changed\n    if (changedProperties.has('dragToClose')) {\n      this.removeDragListeners();\n      this.setupDragListeners();\n    }\n\n    // Map `height` (visible height) to open translate percentage for a 100vh sheet\n    if (changedProperties.has('height') || changedProperties.has('open')) {\n      // Defer to ensure DOM paints before measuring\n      setTimeout(() => this.syncCssVarsForOpenTranslate(), 0);\n    }\n  }\n\n  // Slot-like adoption helper\n  // Moves any host children not part of the drawer shell into the drawer's content slot (`.above-fold`).\n  // Rationale: prefer light DOM composition over Shadow DOM slots so we can keep strict CSP compliance,\n  // support environments without adoptedStyleSheets, and share CSS variables across LitElements without\n  // duplicating style plumbing per component.\n  private adoptContentIntoSlot(): void {\n    const root = this.renderRoot as unknown as ParentNode;\n    const above = root.querySelector('.above-fold') as HTMLElement | null;\n    if (!above) return;\n    const host = this as unknown as HTMLElement;\n    const toMove: Node[] = [];\n    host.childNodes.forEach((n) => {\n      if (n.nodeType !== Node.ELEMENT_NODE) return;\n      const el = n as Element;\n      // Skip elements that are part of the drawer shell\n      if ((el as HTMLElement).classList?.contains('overlay')) return;\n      if ((el as HTMLElement).classList?.contains('drawer')) return;\n      toMove.push(n);\n    });\n    toMove.forEach((n) => above.appendChild(n));\n    // After moving, recompute open translate to fit content\n    this.syncCssVarsForOpenTranslate();\n  }\n\n  // Public: stable container where consumers should append their content.\n  // This plays the role of a \"slot\" in our light-DOM composition model, avoiding Shadow DOM so\n  // we can keep CSP strict and share CSS variables across components without duplicating styles.\n  // When null, the drawer has not mounted yet.\n  public get contentRoot(): HTMLElement | null {\n    const root = this.renderRoot as unknown as ParentNode;\n    return (root && (root.querySelector('.above-fold') as HTMLElement | null)) || null;\n  }\n\n  // ---- Helpers for visible height ↔ translateY% ----\n  private getVisibleVh(): number {\n    const h = (this.height || '').trim();\n    // Accept 0-100 with units: vh, dvh, svh, lvh; \"auto\" (or unset) falls back to content-fit\n    const m = h.match(/^([0-9]+(?:\\.[0-9]+)?)\\s*(d?vh|svh|lvh|vh)$/i);\n    if (m) return clamp(parseFloat(m[1]), 0, 100);\n    return DEFAULT_VISIBLE_VH;\n  }\n\n  private getOpenTranslateRatio(): number {\n    // translateY ratio (0..1) for a 100vh sheet\n    const visible = this.getVisibleVh();\n    return clamp((SHEET_HEIGHT_VH - visible) / SHEET_HEIGHT_VH, 0, 1);\n  }\n\n  private _performSyncCssVarsForOpenTranslate(): void {\n    const drawer = this.drawerElement;\n    if (!drawer) return;\n    // Do not mutate the open rest position while the user is dragging or a drag is queued.\n    // Freezing prevents sudden jumps when content inside (e.g., TxTree) expands/collapses\n    // and height transitions are running.\n    if (this.isDragging || this.pendingDrag) return;\n\n    // Prefer explicit height prop; otherwise fit to content\n    const h = (this.height || '').trim();\n    const m = h.match(/^([0-9]+(?:\\.[0-9]+)?)\\s*(d?vh|svh|lvh|vh)$/i);\n    if (m) {\n      const unit = (m[2] || 'vh').toLowerCase();\n      const visibleVh = clamp(parseFloat(m[1]), 0, 100);\n      const pct = clamp(100 - visibleVh, 0, 100);\n      // Sheet uses same viewport unit as provided height for better alignment\n      this.setCssVars({ '--w3a-drawer__sheet-height': `100${unit}` });\n      // Freeze rest position while open to avoid mid-open jumps\n      if (!this.open) {\n        this.setCssVars({ '--w3a-drawer__open-translate': pct + '%' });\n      }\n      return;\n    }\n\n    // Default: auto-fit to content height (.above-fold)\n    const unit = (typeof CSS !== 'undefined' && CSS.supports && CSS.supports('height', '1dvh')) ? 'dvh' : 'vh';\n    this.setCssVars({ '--w3a-drawer__sheet-height': `${SHEET_HEIGHT_VH}${unit}` });\n\n    // Measure above-fold bottom relative to drawer top to fit content exactly above the fold\n    const root = this.renderRoot as unknown as ParentNode;\n    const above = root.querySelector('.above-fold') as HTMLElement | null;\n    if (!above) return;\n    const drawerRect = drawer.getBoundingClientRect();\n    const aboveRect = above.getBoundingClientRect();\n    const contentBottomPx = Math.max(0, Math.round(aboveRect.bottom - drawerRect.top));\n    const sheetPx = drawer.offsetHeight || (typeof window !== 'undefined' ? window.innerHeight : contentBottomPx);\n    // Compute desired open translate from content.\n    // For auto height (no explicit `height` provided), fully follow the\n    // measured content height so the drawer can both open further (expand)\n    // and close further (collapse) as the TxTree changes size.\n    // This ensures the action buttons remain visible and the drawer slides\n    // down enough on collapse.\n    const measured = clamp(1 - contentBottomPx / Math.max(1, sheetPx), 0, 1);\n    const ratio = measured;\n    const pct = (ratio * 100).toFixed(4) + '%';\n\n    // Avoid thrashing if value hasn't meaningfully changed\n    if (pct === this._lastOpenTranslatePct) return;\n\n    // If we're open, allow transform transitions to run so the drawer\n    // follows content growth in real time.\n    if (this.open) {\n      this.drawerElement?.classList.remove('vv-sync');\n    }\n\n    this.setCssVars({ '--w3a-drawer__open-translate': pct });\n    this._lastOpenTranslatePct = pct;\n  }\n\n  // Coalesce multiple triggers into a single measurement per frame\n  private syncCssVarsForOpenTranslate(): void {\n    if (this._syncRAF != null) return;\n    this._syncRAF = requestAnimationFrame(() => {\n      this._syncRAF = null;\n      this._performSyncCssVarsForOpenTranslate();\n    });\n  }\n\n  private handleTransitionEnd = (e: TransitionEvent) => {\n    if (!this.drawerElement) return;\n    if (e.target !== this.drawerElement) return;\n    if (e.propertyName !== 'transform') return;\n    const type = this.open ? 'w3a:drawer-open-end' : 'w3a:drawer-close-end';\n    this.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true }));\n  };\n\n  // Single entry to wire content-height animation sync (child height transitions → drawer transform)\n  private setupAnimateWithContentSync() {\n    const root = this.renderRoot as unknown as ParentNode;\n    const host = root.querySelector('.drawer') as HTMLElement | null;\n    if (!host) return;\n\n    const ensureLoop = () => {\n      if (this._contentAnimRAF != null) return;\n      const step = () => {\n        this._contentAnimRAF = null;\n        this._performSyncCssVarsForOpenTranslate();\n        this._contentAnimRAF = requestAnimationFrame(step);\n      };\n      this._contentAnimRAF = requestAnimationFrame(step);\n    };\n\n    const stopLoop = () => {\n      if (this._contentAnimRAF != null) { cancelAnimationFrame(this._contentAnimRAF); this._contentAnimRAF = null; }\n      this.syncCssVarsForOpenTranslate();\n    };\n\n    const syncTimingFromElement = (el: Element) => {\n      const cs = getComputedStyle(el);\n      const props = (cs.transitionProperty || '').split(',').map(s => s.trim());\n      const durations = (cs.transitionDuration || '').split(',').map(s => s.trim());\n      const easings = (cs.transitionTimingFunction || '').split(',').map(s => s.trim());\n      let idx = props.findIndex(p => p === 'height');\n      if (idx < 0) idx = props.findIndex(p => p === 'all');\n      if (idx < 0) idx = 0;\n      const dur = durations[Math.min(idx, durations.length - 1)] || '100ms';\n      const ease = easings[Math.min(idx, easings.length - 1)] || 'cubic-bezier(0.2, 0.6, 0.2, 1)';\n      this.setCssVars({ '--w3a-drawer__transition-duration': dur, '--w3a-drawer__transition-easing': ease });\n    };\n\n    const onRun = (ev: Event) => {\n      const e = ev as TransitionEvent;\n      if (!this.open) return;\n      if (e.propertyName !== 'height') return;\n      this._activeHeightTransitions++;\n      ensureLoop();\n    };\n\n    const onStart = (ev: Event) => {\n      const e = ev as TransitionEvent;\n      if (!this.open) return;\n      if (e.propertyName !== 'height') return;\n      if (e.target && e.target instanceof Element) syncTimingFromElement(e.target);\n      this._activeHeightTransitions++;\n      ensureLoop();\n    };\n\n    const onEnd = (ev: Event) => {\n      const e = ev as TransitionEvent;\n      if (e.propertyName !== 'height') return;\n      this._activeHeightTransitions = Math.max(0, this._activeHeightTransitions - 1);\n      if (this._activeHeightTransitions === 0) stopLoop();\n    };\n\n    host.addEventListener('transitionrun', onRun, true);\n    host.addEventListener('transitionstart', onStart, true);\n    host.addEventListener('transitionend', onEnd, true);\n\n    this.detachContentAnimSync = () => {\n      host.removeEventListener('transitionrun', onRun, true);\n      host.removeEventListener('transitionstart', onStart, true);\n      host.removeEventListener('transitionend', onEnd, true);\n      if (this._contentAnimRAF != null) { cancelAnimationFrame(this._contentAnimRAF); this._contentAnimRAF = null; }\n      this._activeHeightTransitions = 0;\n    };\n  }\n\n  private setupDragListeners() {\n    if (!this.dragToClose) return;\n\n    // Use a small delay to ensure the element is rendered\n    setTimeout(() => {\n      const root = this.renderRoot as unknown as ParentNode;\n      const drawerElement = root.querySelector('.drawer') as HTMLElement;\n\n      if (!drawerElement) {\n        console.warn('Drawer element not found for drag listeners');\n        return;\n      }\n\n      // Remove any existing listeners first\n      this.removeDragListeners();\n\n      const supportsPointer = typeof window !== 'undefined' && 'PointerEvent' in window;\n      if (supportsPointer) {\n        // Prefer Pointer Events for unified handling\n        drawerElement.addEventListener('pointerdown', this.handlePointerDown as any, { capture: true } as AddEventListenerOptions);\n        document.addEventListener('pointermove', this.handlePointerMove as any);\n        document.addEventListener('pointerup', this.handlePointerUp as any);\n        document.addEventListener('pointercancel', this.handlePointerCancel as any);\n      } else {\n        // Fallback: mouse + touch\n        drawerElement.addEventListener('mousedown', this.handleMouseDown, { capture: true } as AddEventListenerOptions);\n        document.addEventListener('mousemove', this.handleMouseMove);\n        document.addEventListener('mouseup', this.handleMouseUp);\n\n        drawerElement.addEventListener('touchstart', this.handleTouchStart, { passive: false, capture: true });\n        document.addEventListener('touchmove', this.handleTouchMove, { passive: false });\n        document.addEventListener('touchend', this.handleTouchEnd, { passive: false });\n      }\n    }, 0);\n  }\n\n  private attachViewportSync() {\n    const root = this.renderRoot as unknown as ParentNode;\n    const drawerElement = root.querySelector('.drawer') as HTMLElement | null;\n    if (!drawerElement) return;\n    const vv: any = (typeof window !== 'undefined') ? (window as any).visualViewport : undefined;\n    const schedule = () => this.suppressTransitionForViewportTick();\n\n    window.addEventListener('resize', schedule, { passive: true } as AddEventListenerOptions);\n    window.addEventListener('orientationchange', schedule, { passive: true } as AddEventListenerOptions);\n    vv && vv.addEventListener && vv.addEventListener('resize', schedule);\n    vv && vv.addEventListener && vv.addEventListener('scroll', schedule);\n\n    this.detachViewportSync = () => {\n      window.removeEventListener('resize', schedule as EventListener);\n      window.removeEventListener('orientationchange', schedule as EventListener);\n      vv && vv.removeEventListener && vv.removeEventListener('resize', schedule as EventListener);\n      vv && vv.removeEventListener && vv.removeEventListener('scroll', schedule as EventListener);\n    };\n  }\n\n  private suppressTransitionForViewportTick() {\n    const root = this.renderRoot as unknown as ParentNode;\n    const drawerElement = root.querySelector('.drawer') as HTMLElement | null;\n    if (!drawerElement) return;\n    // Avoid fighting with active drag state; dragging already disables transitions\n    if (!this.isDragging) drawerElement.classList.add('vv-sync');\n  }\n\n  private removeDragListeners() {\n    const root = this.renderRoot as unknown as ParentNode;\n    const drawerElement = root.querySelector('.drawer') as HTMLElement;\n    if (!drawerElement) return;\n\n    // Remove listeners from drawer element\n    drawerElement.removeEventListener('touchstart', this.handleTouchStart as EventListener);\n    drawerElement.removeEventListener('mousedown', this.handleMouseDown as EventListener);\n    drawerElement.removeEventListener('pointerdown', this.handlePointerDown as EventListener);\n\n    // Remove listeners from document\n    document.removeEventListener('touchmove', this.handleTouchMove as EventListener);\n    document.removeEventListener('touchend', this.handleTouchEnd as EventListener);\n    document.removeEventListener('mousemove', this.handleMouseMove as EventListener);\n    document.removeEventListener('mouseup', this.handleMouseUp as EventListener);\n    document.removeEventListener('pointermove', this.handlePointerMove as EventListener);\n    document.removeEventListener('pointerup', this.handlePointerUp as EventListener);\n    document.removeEventListener('pointercancel', this.handlePointerCancel as EventListener);\n  }\n\n  // ===== Pointer Events (preferred) =====\n  private handlePointerDown = (e: PointerEvent) => {\n    if (this.loading || !this.open) return;\n    if (e.pointerType === 'mouse' && e.button !== 0) return;\n    // Defer decision until move for all pointer types to preserve inner clicks/taps\n    this.pendingDrag = true;\n    this.startY = e.clientY;\n    this.currentY = e.clientY;\n    this.dragStartTime = Date.now();\n    // Do not preventDefault here; keep click/tap semantics intact unless we transition into drag\n  };\n\n  private handlePointerMove = (e: PointerEvent) => {\n    if (!this.pendingDrag && !this.isDragging) return;\n    const y = e.clientY;\n    if (this.pendingDrag) {\n      const dy = y - this.startY;\n      const absDy = Math.abs(dy);\n      const ACTIVATE_PX = 8;\n      // For touch/pen, only start dragging when inner body is at top so we don't steal scroll\n      const body = this.bodyElement;\n      const atTop = !body || body.scrollTop <= 0;\n      if (absDy >= ACTIVATE_PX && atTop) {\n        this.pendingDrag = false;\n        this.startDrag(this.startY);\n        (e.target as Element)?.setPointerCapture?.(e.pointerId);\n      } else {\n        return;\n      }\n    }\n    if (this.isDragging) {\n      this.updateDrag(y);\n      e.preventDefault();\n    }\n  };\n\n  private handlePointerUp = (e: PointerEvent) => {\n    if (this.pendingDrag) { this.pendingDrag = false; }\n    if (this.isDragging) {\n      this.endDrag();\n      e.preventDefault();\n    }\n    (e.target as Element)?.releasePointerCapture?.(e.pointerId);\n  };\n\n  private handlePointerCancel = (e: PointerEvent) => {\n    if (this.pendingDrag) this.pendingDrag = false;\n    if (this.isDragging) this.endDrag();\n    (e.target as Element)?.releasePointerCapture?.(e.pointerId);\n  };\n\n  private handleTouchStart = (e: TouchEvent) => {\n    if (this.loading || !this.open) return;\n\n    // Do not initiate a drawer drag when the touch starts on the close button\n    const target = e.target as HTMLElement | null;\n    if (target && target.closest && target.closest('.close-btn')) {\n      return;\n    }\n\n    const touch = e.touches[0];\n    this.pendingDrag = true;\n    this.startY = touch.clientY;\n    this.currentY = touch.clientY;\n    // Do not preventDefault yet; decide on first meaningful move to allow normal scrolling when appropriate\n  };\n\n  private handleTouchMove = (e: TouchEvent) => {\n    const touch = e.touches[0];\n\n    // Decide whether to begin dragging on first significant move\n    if (this.pendingDrag && !this.isDragging) {\n      const dy = touch.clientY - this.startY;\n      const absDy = Math.abs(dy);\n      const ACTIVATE_PX = 8; // small threshold to distinguish from taps\n      // Determine if content can scroll\n      const body = this.bodyElement;\n      const canScroll = !!body && body.scrollHeight > body.clientHeight;\n      const atTop = !body || body.scrollTop <= 0;\n\n      if (absDy >= ACTIVATE_PX) {\n        // Begin drawer drag when the content is at the top boundary, for both\n        // downward (close) and upward (open further) gestures. If the content\n        // is not at the top yet, keep the gesture pending so the user can keep\n        // scrolling the inner content until it reaches top, then transition into\n        // a drawer drag in the same touch sequence.\n        if (atTop) {\n          this.startDrag(this.startY);\n          this.isDragging = true;\n          this.pendingDrag = false;\n        } else {\n          // Allow inner scrolling to proceed; keep pending so we can switch to drag when atTop\n          // no-op\n        }\n      }\n    }\n\n    if (!this.isDragging) return;\n    this.updateDrag(touch.clientY);\n    e.preventDefault();\n  };\n\n  private handleTouchEnd = (e: TouchEvent) => {\n    // Clear any undecided pending drag\n    this.pendingDrag = false;\n    if (!this.isDragging) return;\n    this.endDrag();\n    e.preventDefault();\n  };\n\n  private handleMouseDown = (e: MouseEvent) => {\n    if (this.loading || !this.open) return;\n\n    this.startDrag(e.clientY);\n    e.preventDefault();\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.isDragging) return;\n\n    this.updateDrag(e.clientY);\n    e.preventDefault();\n  };\n\n  private handleMouseUp = (e: MouseEvent) => {\n    if (!this.isDragging) return;\n\n    this.endDrag();\n    e.preventDefault();\n  };\n\n  private startDrag(y: number) {\n    this.isDragging = true;\n    this.startY = y;\n    this.currentY = y;\n    this.dragDistance = 0;\n    this.dragStartTime = Date.now();\n    this.lastDragTime = this.dragStartTime;\n    this.velocity = 0;\n\n    if (this.drawerElement) {\n      this.drawerHeight = this.drawerElement.offsetHeight;\n      // Rest position derived from the same visible height value used for CSS\n      this.openRestTranslateYPx = this.drawerHeight * this.getOpenTranslateRatio();\n\n      // Determine current translateY in px to support starting drags from any snapped position\n      const computed = getComputedStyle(this.drawerElement);\n      const transform = computed.transform || '';\n      const ty = this.parseTranslateY(transform);\n      // If transform is 'none', use the rest position\n      this.startTranslateYPx = Number.isFinite(ty) ? ty : this.openRestTranslateYPx;\n      // Align logical \"rest\" with actual CSS transform (which may include offsets)\n      if (Number.isFinite(ty)) this.openRestTranslateYPx = ty as number;\n\n      // Seed drag translate to current position before enabling .dragging to prevent jumps\n      // Prevent initial flash to top when adding the dragging class by\n      // publishing the current translateY as the drag variable first.\n      this.setCssVars({ '--w3a-drawer__drag-translate': `${this.startTranslateYPx}px` });\n      // Force a layout flush so the newly-applied CSS variable is visible to\n      // the next style recalculation that includes the `.dragging` selector.\n      // Without this, some engines may briefly resolve the var() fallback (0px)\n      // for one frame, causing a jump to the top when starting an upward drag.\n      try { void this.drawerElement.offsetHeight; } catch {}\n      this.drawerElement.classList.add('dragging');\n    }\n  }\n\n  private updateDrag(y: number) {\n    if (!this.isDragging || !this.drawerElement) return;\n\n    const now = Date.now();\n    const deltaTime = now - this.lastDragTime;\n    const deltaY = y - this.currentY;\n\n    if (deltaTime > 0) {\n      this.velocity = deltaY / deltaTime;\n    }\n\n    this.currentY = y;\n    this.dragDistance = y - this.startY; // negative = upward, positive = downward\n\n    // Elastic overdrag only when crossing above the fully-open rest position\n    // Allow at least 50% of sheet or viewport height, or the configured minimum\n    const viewportHalf = (typeof window !== 'undefined' && window.innerHeight)\n      ? window.innerHeight * OVERPULL_VIEWPORT_FACTOR\n      : 0;\n    const maxOverdragUpPx = Math.max(this.drawerHeight * OVERPULL_SHEET_FACTOR, viewportHalf, this.overpullPx);\n\n    const rawTargetTranslateY = this.startTranslateYPx + this.dragDistance;\n    let targetTranslateY = rawTargetTranslateY;\n\n    // openRestTranslateYPx is the minimal (most open) resting translateY.\n    // If the user drags above this (smaller translateY), apply elastic.\n    if (rawTargetTranslateY < this.openRestTranslateYPx) {\n      const overdragUp = this.openRestTranslateYPx - rawTargetTranslateY; // positive px\n      const elasticUp = maxOverdragUpPx * (1 - 1 / (overdragUp / maxOverdragUpPx + 1));\n      targetTranslateY = this.openRestTranslateYPx - elasticUp;\n    }\n    // Disable transitions via class; drive transform via CSS variable for CSP compliance\n    this.setCssVars({ '--w3a-drawer__drag-translate': `${targetTranslateY}px` });\n\n    this.lastDragTime = now;\n  }\n\n  private endDrag() {\n    if (!this.isDragging || !this.drawerElement) return;\n\n    this.isDragging = false;\n    this.pendingDrag = false;\n    this.drawerElement.classList.remove('dragging');\n\n    const drawerHeight = this.drawerHeight || this.drawerElement.offsetHeight;\n    // Preserve 0 as a valid rest position; only fall back if NaN\n    const openRestPx = Number.isFinite(this.openRestTranslateYPx) ? this.openRestTranslateYPx : drawerHeight * 0.20;\n\n    // Compute effective velocities (instantaneous and average over gesture)\n    const now = Date.now();\n    const gestureMs = Math.max(1, now - this.dragStartTime);\n    const totalDeltaPx = this.currentY - this.startY; // positive = down, negative = up\n    const avgVelocity = totalDeltaPx / gestureMs; // px/ms\n    const effectiveDownV = Math.max(this.velocity, avgVelocity);\n    const effectiveUpV = Math.min(this.velocity, avgVelocity);\n\n    // Velocity-based flick-to-close (upward flick)\n    // negative means upward movement\n    if (effectiveUpV <= FLICK_UP_CLOSE_THRESHOLD) {\n      this.closeDrawer();\n      this.resetDragState();\n      return;\n    }\n\n    // Velocity-based flick-to-close (downward flick)\n    if (effectiveDownV >= FLICK_DOWN_CLOSE_THRESHOLD) {\n      this.closeDrawer();\n      this.resetDragState();\n      return;\n    }\n\n    // Evaluate current position for near-closed detection\n    const currentTransformTy = this.parseTranslateY(getComputedStyle(this.drawerElement).transform);\n    const currentTranslatePx = Number.isFinite(currentTransformTy) ? currentTransformTy : openRestPx;\n\n    // If near fully closed (bottom within threshold), close\n    if (currentTranslatePx >= drawerHeight - NEAR_CLOSED_PX) {\n      this.closeDrawer();\n      this.resetDragState();\n      return;\n    }\n\n    // No snapping: let CSS govern final position via [open]; just drop dragging class\n    this.resetDragState();\n  }\n\n  private resetDragState() {\n    this.dragDistance = 0;\n    this.velocity = 0;\n  }\n\n  // Parse translateY value from CSS transform string (matrix or matrix3d)\n  private parseTranslateY(transform: string): number {\n    if (!transform || transform === 'none') return NaN;\n    // matrix(a, b, c, d, tx, ty)\n    if (transform.startsWith('matrix(')) {\n      const values = transform.slice(7, -1).split(',').map(v => parseFloat(v.trim()));\n      return values.length === 6 ? values[5] : NaN;\n    }\n    // matrix3d(a1..a16) -> ty is value 14 (index 13)\n    if (transform.startsWith('matrix3d(')) {\n      const values = transform.slice(9, -1).split(',').map(v => parseFloat(v.trim()));\n      return values.length === 16 ? values[13] : NaN;\n    }\n    // translateY(XXpx/%)\n    const match = transform.match(/translateY\\(([-\\d.]+)px\\)/);\n    if (match) return parseFloat(match[1]);\n    return NaN;\n  }\n\n  private closeDrawer() {\n    if (this.isClosing) return;\n    this.isClosing = true;\n    // Let CSS drive close; avoid inline style writes\n    if (this.drawerElement) { this.drawerElement.classList.remove('dragging'); }\n    // Flip the `open` property so CSS applies the closed transform and overlay state\n    this.open = false;\n    // Notify host after state change\n    dispatchLitCancel(this);\n    // Reset closing guard after a short delay to avoid duplicate cancels\n    setTimeout(() => { this.isClosing = false; }, 300);\n  }\n\n  private onClose = () => {\n    if (this.loading) return;\n    if (this.isClosing) return;\n\n    if (this.drawerElement) { this.drawerElement.classList.remove('dragging'); }\n    // Flip open then notify host (use lit-cancel for host listeners)\n    this.open = false;\n    dispatchLitCancel(this);\n    this.isClosing = true;\n    setTimeout(() => { this.isClosing = false; }, 300);\n  };\n\n  // Click/tap on the handle toggles open/close\n  private onHandleClick = () => {\n    if (!this.open) {\n      this.show();\n    } else {\n      this.hide('handle');\n    }\n  };\n\n  // Imperative API (uncontrolled usage)\n  public show() {\n    if (this.drawerElement) { this.drawerElement.classList.remove('dragging'); }\n    this.open = true;\n  }\n\n  public hide(reason: string = 'programmatic') {\n    if (this.drawerElement) { this.drawerElement.classList.remove('dragging'); }\n    this.open = false;\n    // Dispatch lit-cancel so host listeners can react\n    dispatchLitCancel(this, { reason });\n  }\n\n  public toggle(force?: boolean) {\n    const target = typeof force === 'boolean' ? force : !this.open;\n    if (target) this.show(); else this.hide('toggle');\n  }\n\n  // Public helpers for explicit open/close control\n  public handleOpen() { this.show(); }\n  public handleClose() { this.hide('handleClose'); }\n\n  render() {\n    return html`\n      <div class=\"overlay\" @click=${this.onClose}></div>\n      <section class=\"drawer ${this._initialMount ? 'init' : ''}\" role=\"dialog\" aria-modal=\"true\">\n        <div class=\"relative\">\n          <div class=\"handle\" @click=${this.onHandleClick}></div>\n          ${this.showCloseButton ? html`<button aria-label=\"Close\" title=\"Close\" class=\"close-btn\" @click=${this.onClose} @touchend=${this.onClose}>×</button>` : null}\n        </div>\n        <div class=\"body\">\n          ${this.errorMessage ? html`<div class=\"error\">${this.errorMessage}</div>` : null}\n          <div class=\"above-fold\">${this._initialChildren}</div>\n        </div>\n      </section>\n    `;\n  }\n}\n\nimport { W3A_DRAWER_ID } from '../tags';\nexport default (function ensureDefined() {\n  const TAG = W3A_DRAWER_ID;\n  if (!customElements.get(TAG)) {\n    customElements.define(TAG, DrawerElement);\n  }\n  return DrawerElement;\n})();\n"],"mappings":"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"}

package/dist/cjs/react/src/core/WebAuthnManager/LitComponents/ExportPrivateKey/iframe-host.js

@@ -0,0 +1,222 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.js');
+const require_validation = require('../../../../utils/validation.js');
+const require_tags = require('../tags.js');
+const require_LitElementWithProps = require('../LitElementWithProps.js');
+const require_lit_events = require('../lit-events.js');
+const require_asset_base = require('../asset-base.js');
+const require_css_loader = require('../css/css-loader.js');
+let lit = require("lit");
+lit = require_rolldown_runtime.__toESM(lit);
+let lit_directives_ref_js = require("lit/directives/ref.js");
+lit_directives_ref_js = require_rolldown_runtime.__toESM(lit_directives_ref_js);
+
+//#region src/core/WebAuthnManager/LitComponents/ExportPrivateKey/iframe-host.ts
+var IframeExportHost = class extends require_LitElementWithProps.LitElementWithProps {
+	static properties = {
+		theme: { type: String },
+		variant: { type: String },
+		accountId: {
+			type: String,
+			attribute: "account-id"
+		},
+		publicKey: {
+			type: String,
+			attribute: "public-key"
+		},
+		privateKey: {
+			type: String,
+			attribute: "private-key"
+		},
+		loading: { type: Boolean },
+		errorMessage: { type: String }
+	};
+	iframeRef = (0, lit_directives_ref_js.createRef)();
+	messageHandler;
+	iframeInitialized = false;
+	_bootstrapTimer = null;
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	constructor() {
+		super();
+		this.theme = "dark";
+		this.variant = "drawer";
+		this.accountId = "";
+		this.publicKey = "";
+		this.privateKey = void 0;
+		this.loading = false;
+	}
+	createRenderRoot() {
+		const root = super.createRenderRoot();
+		const p = require_css_loader.ensureExternalStyles(root, "export-iframe.css", "data-w3a-export-iframe-css");
+		this._stylePromises.push(p);
+		p.catch(() => {});
+		return root;
+	}
+	getComponentPrefix() {
+		return "export-iframe";
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const settle = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = settle.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (!this.iframeInitialized) {
+			this.initializeIframe();
+			this.iframeInitialized = true;
+			return;
+		}
+		this.postToIframe("SET_EXPORT_DATA", {
+			theme: this.theme,
+			variant: this.variant,
+			accountId: this.accountId,
+			publicKey: this.publicKey
+		});
+		if (changed.has("loading")) this.postToIframe("SET_LOADING", !!this.loading);
+		if (changed.has("errorMessage") && typeof this.errorMessage === "string") this.postToIframe("SET_ERROR", this.errorMessage);
+		if (changed.has("privateKey") && this.privateKey) this.postToIframe("SET_PRIVATE_KEY", { privateKey: this.privateKey });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.messageHandler) {
+			window.removeEventListener("message", this.messageHandler);
+			this.messageHandler = void 0;
+		}
+	}
+	generateIframeHtml() {
+		const base = require_asset_base.resolveEmbeddedBase();
+		const isAbsoluteBase = /^https?:/i.test(base);
+		if (!isAbsoluteBase) try {
+			console.warn("[W3A][IframeExportHost] Embedded SDK base is not absolute. Skipping CSS preloads. Configure an absolute base so assets resolve: React → set TatchiPasskeyProvider config { iframeWallet: { walletOrigin: \"https://wallet.example.com\", sdkBasePath: \"/sdk\" } }, ");
+		} catch {}
+		const viewerBundle = require_tags.EXPORT_VIEWER_BUNDLE;
+		const bootstrap = require_tags.IFRAME_EXPORT_BOOTSTRAP_MODULE;
+		return `<!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+          ${isAbsoluteBase ? `<link rel="preload" href="${base}export-viewer.css" as="style" />` : ""}
+          ${isAbsoluteBase ? `<link rel="preload" href="${base}export-iframe.css" as="style" />` : ""}
+          <link rel="stylesheet" href="${base}wallet-service.css" />
+          <!-- Component palette/tokens for host elements (e.g., <w3a-drawer>) -->
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}w3a-components.css" />` : ""}
+          <!-- Ensure critical component styles (strict CSP: external only, no inline) -->
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}drawer.css" data-w3a-drawer-css />` : ""}
+          ${isAbsoluteBase ? `<link rel="stylesheet" href="${base}export-viewer.css" data-w3a-export-viewer-css />` : ""}
+          <script type="module" crossorigin="anonymous" src="${base}${viewerBundle}"><\/script>
+          <script type="module" crossorigin="anonymous" src="${base}${bootstrap}"><\/script>
+        </head>
+        <body>
+          <w3a-drawer id="exp" theme="dark"></w3a-drawer>
+        </body>
+      </html>`;
+	}
+	initializeIframe() {
+		const iframeEl = this.iframeRef.value;
+		if (!iframeEl) return;
+		this.setupMessageHandling();
+		iframeEl.srcdoc = this.generateIframeHtml();
+	}
+	postToIframe(type, payload) {
+		const win = this.iframeRef.value?.contentWindow;
+		if (!win) return;
+		win.postMessage({
+			type,
+			payload
+		}, "*");
+	}
+	setupMessageHandling() {
+		const onMessage = async (event) => {
+			const data = event?.data;
+			if (!require_validation.isObject(data) || !require_validation.isString(data.type)) return;
+			const type = data.type;
+			const payload = data.payload;
+			switch (type) {
+				case "READY":
+					this.iframeInitialized = true;
+					this.postToIframe("SET_INIT", { targetOrigin: window.location.origin });
+					this.postToIframe("SET_EXPORT_DATA", {
+						theme: this.theme,
+						variant: this.variant,
+						accountId: this.accountId,
+						publicKey: this.publicKey
+					});
+					this.postToIframe("SET_LOADING", !!this.loading);
+					if (this.errorMessage) this.postToIframe("SET_ERROR", this.errorMessage);
+					if (this.privateKey) this.postToIframe("SET_PRIVATE_KEY", { privateKey: this.privateKey });
+					return;
+				case "IFRAME_ERROR":
+				case "IFRAME_UNHANDLED_REJECTION":
+					console.error("[IframeExportHost] iframe error:", payload);
+					return;
+				case "CONFIRM":
+					require_lit_events.dispatchLitConfirm(this);
+					this.remove();
+					window.parent?.postMessage({ type: "WALLET_UI_CLOSED" }, "*");
+					return;
+				case "CANCEL":
+					require_lit_events.dispatchLitCancel(this);
+					this.remove();
+					window.parent?.postMessage({ type: "WALLET_UI_CLOSED" }, "*");
+					return;
+				case "COPY":
+					if (require_validation.isObject(payload)) {
+						const { type: type$1, value } = payload;
+						if (require_validation.isString(type$1) && (type$1 === "publicKey" || type$1 === "privateKey") && require_validation.isString(value)) require_lit_events.dispatchLitCopy(this, {
+							type: type$1,
+							value
+						});
+						else console.warn("[IframeExportHost] Ignoring COPY message with invalid payload", payload);
+					}
+					return;
+				default: return;
+			}
+		};
+		if (this.messageHandler) window.removeEventListener("message", this.messageHandler);
+		this.messageHandler = onMessage;
+		window.addEventListener("message", onMessage);
+	}
+	render() {
+		return lit.html`
+      <div class="iframe-host">
+        <!--
+          About this ExportPrivateKey iframe:
+          - sandbox="allow-scripts allow-same-origin":
+            Allows module scripts to run while preserving the wallet origin inside
+            the iframe (no opaque origin). Keeping same-origin is required so the
+            document matches the parent Permissions-Policy allowlist (e.g.,
+            clipboard-read/write and WebAuthn) rather than being blocked as a
+            null/opaque origin.
+          - allow="clipboard-read; clipboard-write":
+            Opts in to the clipboard features at the frame level. This must be
+            used in combination with a Permissions-Policy header on the parent
+            page that allows clipboard for the wallet origin.
+          - srcdoc (set in initializeIframe):
+            Loads wallet-service.css, component tokens (w3a-components.css),
+            preloads drawer + export-viewer CSS, and imports the viewer +
+            bootstrap modules; no inline scripts/styles to satisfy strict CSP.
+        -->
+        <iframe ${(0, lit_directives_ref_js.ref)(this.iframeRef)}
+          sandbox="allow-scripts allow-same-origin"
+          allow="clipboard-read; clipboard-write"
+          ></iframe>
+      </div>
+    `;
+	}
+};
+customElements.define(require_tags.W3A_EXPORT_VIEWER_IFRAME_ID, IframeExportHost);
+var iframe_host_default = IframeExportHost;
+
+//#endregion
+exports.IframeExportHost = IframeExportHost;
+exports.default = iframe_host_default;
+//# sourceMappingURL=iframe-host.js.map

package/dist/cjs/react/src/core/WebAuthnManager/LitComponents/ExportPrivateKey/iframe-host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframe-host.js","names":["LitElementWithProps","ensureExternalStyles","resolveEmbeddedBase","EXPORT_VIEWER_BUNDLE","IFRAME_EXPORT_BOOTSTRAP_MODULE","isObject","isString","type","W3A_EXPORT_VIEWER_IFRAME_ID"],"sources":["../../../../../../../../src/core/WebAuthnManager/LitComponents/ExportPrivateKey/iframe-host.ts"],"sourcesContent":["// Iframe host for the Export Private Key viewer (drawer or modal variant)\nimport { html, type PropertyValues } from 'lit';\nimport { ref, createRef, Ref } from 'lit/directives/ref.js';\nimport { LitElementWithProps } from '../LitElementWithProps';\nimport { IFRAME_EXPORT_BOOTSTRAP_MODULE, EXPORT_VIEWER_BUNDLE } from '../tags';\nimport { resolveEmbeddedBase } from '../asset-base';\nimport { OFFLINE_EXPORT_FALLBACK } from '../../../OfflineExport/messages';\nimport type { ExportViewerVariant, ExportViewerTheme } from './viewer';\nimport { isObject, isString, isBoolean } from '@/utils/validation';\nimport { dispatchLitCancel, dispatchLitConfirm, dispatchLitCopy } from '../lit-events';\nimport { ensureExternalStyles } from '../css/css-loader';\n\ntype MessageType =\n  | 'READY'\n  | 'ETX_DEFINED'\n  | 'SET_INIT'\n  | 'SET_EXPORT_DATA'\n  | 'SET_LOADING'\n  | 'SET_ERROR'\n  | 'SET_PRIVATE_KEY'\n  | 'CONFIRM'\n  | 'CANCEL'\n  | 'COPY'\n  | 'IFRAME_ERROR'\n  | 'IFRAME_UNHANDLED_REJECTION';\n\ntype MessagePayloads = {\n  READY: undefined;\n  ETX_DEFINED: undefined;\n  SET_INIT: { targetOrigin: string };\n  SET_EXPORT_DATA: {\n    theme?: 'dark' | 'light';\n    variant?: 'drawer' | 'modal';\n    accountId: string;\n    publicKey: string;\n  };\n  SET_LOADING: boolean;\n  SET_ERROR: string;\n  SET_PRIVATE_KEY: { privateKey: string };\n  CONFIRM: undefined;\n  CANCEL: undefined;\n  COPY: { type: 'publicKey' | 'privateKey'; value: string };\n  IFRAME_ERROR: string;\n  IFRAME_UNHANDLED_REJECTION: string;\n};\n\nexport class IframeExportHost extends LitElementWithProps {\n  static properties = {\n    theme: { type: String },\n    variant: { type: String },\n    accountId: { type: String, attribute: 'account-id' },\n    publicKey: { type: String, attribute: 'public-key' },\n    privateKey: { type: String, attribute: 'private-key' },\n    loading: { type: Boolean },\n    errorMessage: { type: String },\n  } as const;\n\n  declare theme: 'dark' | 'light';\n  declare variant: 'drawer' | 'modal';\n  declare accountId: string;\n  declare publicKey: string;\n  declare privateKey?: string;\n  declare loading: boolean;\n  declare errorMessage?: string;\n\n  private iframeRef: Ref<HTMLIFrameElement> = createRef();\n  private messageHandler?: (event: MessageEvent) => void | Promise<void>;\n  private iframeInitialized = false;\n  private _bootstrapTimer: number | null = null;\n  // Styles gating to avoid FOUC: wait for export-iframe.css before first render\n  private _stylesReady = false;\n  private _stylePromises: Promise<void>[] = [];\n  private _stylesAwaiting: Promise<void> | null = null;\n\n  constructor() {\n    super();\n    this.theme = 'dark';\n    this.variant = 'drawer';\n    this.accountId = '';\n    this.publicKey = '';\n    this.privateKey = undefined;\n    this.loading = false;\n  }\n\n  protected createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    const p = ensureExternalStyles(root as ShadowRoot | DocumentFragment | HTMLElement, 'export-iframe.css', 'data-w3a-export-iframe-css');\n    this._stylePromises.push(p);\n    p.catch(() => {});\n    return root;\n  }\n\n  protected getComponentPrefix(): string { return 'export-iframe'; }\n\n  // Avoid FOUC: block first paint until external styles are applied\n  protected shouldUpdate(_changed: Map<string | number | symbol, unknown>): boolean {\n    if (this._stylesReady) return true;\n    if (!this._stylesAwaiting) {\n      const settle = Promise.all(this._stylePromises)\n        .then(() => new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));\n      this._stylesAwaiting = settle.then(() => { this._stylesReady = true; this.requestUpdate(); });\n    }\n    return false;\n  }\n\n  updated(changed: PropertyValues) {\n    super.updated(changed);\n    // Initialize iframe once; contentWindow can exist for about:blank, so use a flag\n    if (!this.iframeInitialized) {\n      this.initializeIframe();\n      this.iframeInitialized = true;\n      return;\n    }\n    // Push data on update\n    this.postToIframe('SET_EXPORT_DATA', {\n      theme: this.theme,\n      variant: this.variant,\n      accountId: this.accountId,\n      publicKey: this.publicKey,\n    });\n    if (changed.has('loading')) {\n      this.postToIframe('SET_LOADING', !!this.loading);\n    }\n    if (changed.has('errorMessage') && typeof this.errorMessage === 'string') {\n      this.postToIframe('SET_ERROR', this.errorMessage);\n    }\n    if (changed.has('privateKey') && this.privateKey) {\n      this.postToIframe('SET_PRIVATE_KEY', { privateKey: this.privateKey });\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.messageHandler) {\n      window.removeEventListener('message', this.messageHandler);\n      this.messageHandler = undefined;\n    }\n  }\n\n  private generateIframeHtml(): string {\n    const base = resolveEmbeddedBase();\n    const isAbsoluteBase = /^https?:/i.test(base);\n    if (!isAbsoluteBase) {\n      try {\n        console.warn(\n          '[W3A][IframeExportHost] Embedded SDK base is not absolute. Skipping CSS preloads. ' +\n          'Configure an absolute base so assets resolve: React → set TatchiPasskeyProvider config ' +\n          '{ iframeWallet: { walletOrigin: \"https://wallet.example.com\", sdkBasePath: \"/sdk\" } }, '\n        );\n      } catch {}\n    }\n    const viewerBundle = EXPORT_VIEWER_BUNDLE;\n    const bootstrap = IFRAME_EXPORT_BOOTSTRAP_MODULE;\n    return `<!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\" />\n          ${isAbsoluteBase ? `<link rel=\"preload\" href=\"${base}export-viewer.css\" as=\"style\" />` : ''}\n          ${isAbsoluteBase ? `<link rel=\"preload\" href=\"${base}export-iframe.css\" as=\"style\" />` : ''}\n          <link rel=\"stylesheet\" href=\"${base}wallet-service.css\" />\n          <!-- Component palette/tokens for host elements (e.g., <w3a-drawer>) -->\n          ${isAbsoluteBase ? `<link rel=\"stylesheet\" href=\"${base}w3a-components.css\" />` : ''}\n          <!-- Ensure critical component styles (strict CSP: external only, no inline) -->\n          ${isAbsoluteBase ? `<link rel=\"stylesheet\" href=\"${base}drawer.css\" data-w3a-drawer-css />` : ''}\n          ${isAbsoluteBase ? `<link rel=\"stylesheet\" href=\"${base}export-viewer.css\" data-w3a-export-viewer-css />` : ''}\n          <script type=\"module\" crossorigin=\"anonymous\" src=\"${base}${viewerBundle}\"></script>\n          <script type=\"module\" crossorigin=\"anonymous\" src=\"${base}${bootstrap}\"></script>\n        </head>\n        <body>\n          <w3a-drawer id=\"exp\" theme=\"dark\"></w3a-drawer>\n        </body>\n      </html>`;\n  }\n\n  private initializeIframe() {\n    const iframeEl = this.iframeRef.value;\n    if (!iframeEl) return;\n    this.setupMessageHandling();\n    iframeEl.srcdoc = this.generateIframeHtml();\n  }\n\n  private postToIframe<T extends MessageType>(type: T, payload?: MessagePayloads[T]) {\n    const win = this.iframeRef.value?.contentWindow;\n    if (!win) return;\n    win.postMessage({ type, payload }, '*');\n  }\n\n  private setupMessageHandling() {\n    const onMessage = async (event: MessageEvent) => {\n      const data = event?.data;\n      if (!isObject(data) || !isString((data as { type?: unknown }).type)) return;\n      const type = (data as { type?: string }).type as MessageType;\n      const payload = (data as { payload?: unknown }).payload;\n      switch (type) {\n        case 'READY': {\n          // Mark initialized in case parent missed initial flag set\n          this.iframeInitialized = true;\n          // Push init and initial data\n          this.postToIframe('SET_INIT', { targetOrigin: window.location.origin });\n          this.postToIframe('SET_EXPORT_DATA', {\n            theme: this.theme,\n            variant: this.variant,\n            accountId: this.accountId,\n            publicKey: this.publicKey,\n          });\n          this.postToIframe('SET_LOADING', !!this.loading);\n          if (this.errorMessage) this.postToIframe('SET_ERROR', this.errorMessage);\n          if (this.privateKey) this.postToIframe('SET_PRIVATE_KEY', { privateKey: this.privateKey });\n          return;\n        }\n        case 'IFRAME_ERROR':\n        case 'IFRAME_UNHANDLED_REJECTION': {\n          console.error('[IframeExportHost] iframe error:', payload);\n          return;\n        }\n        case 'CONFIRM': {\n          dispatchLitConfirm(this);\n          // Close viewer and notify parent to contract overlay\n          this.remove();\n          window.parent?.postMessage({ type: 'WALLET_UI_CLOSED' }, '*');\n          return;\n        }\n        case 'CANCEL': {\n          dispatchLitCancel(this);\n          // Child waits for transitionend before posting CANCEL, so it's safe to remove immediately\n          this.remove();\n          // Notify parent app (outside wallet iframe) to contract overlay\n          window.parent?.postMessage({ type: 'WALLET_UI_CLOSED' }, '*');\n          return;\n        }\n        case 'COPY': {\n          if (isObject(payload)) {\n            const { type, value } = payload as Partial<{ type: unknown; value: unknown }>;\n            if (isString(type) && (type === 'publicKey' || type === 'privateKey') && isString(value)) {\n              dispatchLitCopy(this, { type, value });\n            } else {\n              console.warn('[IframeExportHost] Ignoring COPY message with invalid payload', payload);\n            }\n          }\n          return;\n        }\n        default:\n          return;\n      }\n    };\n\n    if (this.messageHandler) window.removeEventListener('message', this.messageHandler);\n    this.messageHandler = onMessage;\n    window.addEventListener('message', onMessage);\n  }\n\n  render() {\n    return html`\n      <div class=\"iframe-host\">\n        <!--\n          About this ExportPrivateKey iframe:\n          - sandbox=\"allow-scripts allow-same-origin\":\n            Allows module scripts to run while preserving the wallet origin inside\n            the iframe (no opaque origin). Keeping same-origin is required so the\n            document matches the parent Permissions-Policy allowlist (e.g.,\n            clipboard-read/write and WebAuthn) rather than being blocked as a\n            null/opaque origin.\n          - allow=\"clipboard-read; clipboard-write\":\n            Opts in to the clipboard features at the frame level. This must be\n            used in combination with a Permissions-Policy header on the parent\n            page that allows clipboard for the wallet origin.\n          - srcdoc (set in initializeIframe):\n            Loads wallet-service.css, component tokens (w3a-components.css),\n            preloads drawer + export-viewer CSS, and imports the viewer +\n            bootstrap modules; no inline scripts/styles to satisfy strict CSP.\n        -->\n        <iframe ${ref(this.iframeRef)}\n          sandbox=\"allow-scripts allow-same-origin\"\n          allow=\"clipboard-read; clipboard-write\"\n          ></iframe>\n      </div>\n    `;\n  }\n}\n\n// Strongly-typed element shape for 'w3a-export-viewer-iframe'\nexport type ExportViewerIframeElement = HTMLElement & {\n  theme?: ExportViewerTheme;\n  variant?: ExportViewerVariant;\n  accountId?: string;\n  publicKey?: string;\n  privateKey?: string;\n  loading?: boolean;\n  errorMessage?: string;\n};\n\nimport { W3A_EXPORT_VIEWER_IFRAME_ID } from '../tags';\ncustomElements.define(W3A_EXPORT_VIEWER_IFRAME_ID, IframeExportHost);\n\nexport default IframeExportHost;\n"],"mappings":";;;;;;;;;;;;;AA8CA,IAAa,mBAAb,cAAsCA,gDAAoB;CACxD,OAAO,aAAa;EAClB,OAAO,EAAE,MAAM;EACf,SAAS,EAAE,MAAM;EACjB,WAAW;GAAE,MAAM;GAAQ,WAAW;;EACtC,WAAW;GAAE,MAAM;GAAQ,WAAW;;EACtC,YAAY;GAAE,MAAM;GAAQ,WAAW;;EACvC,SAAS,EAAE,MAAM;EACjB,cAAc,EAAE,MAAM;;CAWxB,AAAQ;CACR,AAAQ;CACR,AAAQ,oBAAoB;CAC5B,AAAQ,kBAAiC;CAEzC,AAAQ,eAAe;CACvB,AAAQ,iBAAkC;CAC1C,AAAQ,kBAAwC;CAEhD,cAAc;AACZ;AACA,OAAK,QAAQ;AACb,OAAK,UAAU;AACf,OAAK,YAAY;AACjB,OAAK,YAAY;AACjB,OAAK,aAAa;AAClB,OAAK,UAAU;;CAGjB,AAAU,mBAAmD;EAC3D,MAAM,OAAO,MAAM;EACnB,MAAM,IAAIC,wCAAqB,MAAqD,qBAAqB;AACzG,OAAK,eAAe,KAAK;AACzB,IAAE,YAAY;AACd,SAAO;;CAGT,AAAU,qBAA6B;AAAE,SAAO;;CAGhD,AAAU,aAAa,UAA2D;AAChF,MAAI,KAAK,aAAc,QAAO;AAC9B,MAAI,CAAC,KAAK,iBAAiB;GACzB,MAAM,SAAS,QAAQ,IAAI,KAAK,gBAC7B,WAAW,IAAI,SAAe,MAAM,4BAA4B,4BAA4B;AAC/F,QAAK,kBAAkB,OAAO,WAAW;AAAE,SAAK,eAAe;AAAM,SAAK;;;AAE5E,SAAO;;CAGT,QAAQ,SAAyB;AAC/B,QAAM,QAAQ;AAEd,MAAI,CAAC,KAAK,mBAAmB;AAC3B,QAAK;AACL,QAAK,oBAAoB;AACzB;;AAGF,OAAK,aAAa,mBAAmB;GACnC,OAAO,KAAK;GACZ,SAAS,KAAK;GACd,WAAW,KAAK;GAChB,WAAW,KAAK;;AAElB,MAAI,QAAQ,IAAI,WACd,MAAK,aAAa,eAAe,CAAC,CAAC,KAAK;AAE1C,MAAI,QAAQ,IAAI,mBAAmB,OAAO,KAAK,iBAAiB,SAC9D,MAAK,aAAa,aAAa,KAAK;AAEtC,MAAI,QAAQ,IAAI,iBAAiB,KAAK,WACpC,MAAK,aAAa,mBAAmB,EAAE,YAAY,KAAK;;CAI5D,uBAAuB;AACrB,QAAM;AACN,MAAI,KAAK,gBAAgB;AACvB,UAAO,oBAAoB,WAAW,KAAK;AAC3C,QAAK,iBAAiB;;;CAI1B,AAAQ,qBAA6B;EACnC,MAAM,OAAOC;EACb,MAAM,iBAAiB,YAAY,KAAK;AACxC,MAAI,CAAC,eACH,KAAI;AACF,WAAQ,KACN;UAII;EAEV,MAAM,eAAeC;EACrB,MAAM,YAAYC;AAClB,SAAO;;;;;YAKC,iBAAiB,6BAA6B,KAAK,oCAAoC,GAAG;YAC1F,iBAAiB,6BAA6B,KAAK,oCAAoC,GAAG;yCAC7D,KAAK;;YAElC,iBAAiB,gCAAgC,KAAK,0BAA0B,GAAG;;YAEnF,iBAAiB,gCAAgC,KAAK,sCAAsC,GAAG;YAC/F,iBAAiB,gCAAgC,KAAK,oDAAoD,GAAG;+DAC1D,OAAO,aAAa;+DACpB,OAAO,UAAU;;;;;;;CAQ9E,AAAQ,mBAAmB;EACzB,MAAM,WAAW,KAAK,UAAU;AAChC,MAAI,CAAC,SAAU;AACf,OAAK;AACL,WAAS,SAAS,KAAK;;CAGzB,AAAQ,aAAoC,MAAS,SAA8B;EACjF,MAAM,MAAM,KAAK,UAAU,OAAO;AAClC,MAAI,CAAC,IAAK;AACV,MAAI,YAAY;GAAE;GAAM;KAAW;;CAGrC,AAAQ,uBAAuB;EAC7B,MAAM,YAAY,OAAO,UAAwB;GAC/C,MAAM,OAAO,OAAO;AACpB,OAAI,CAACC,4BAAS,SAAS,CAACC,4BAAU,KAA4B,MAAO;GACrE,MAAM,OAAQ,KAA2B;GACzC,MAAM,UAAW,KAA+B;AAChD,WAAQ,MAAR;IACE,KAAK;AAEH,UAAK,oBAAoB;AAEzB,UAAK,aAAa,YAAY,EAAE,cAAc,OAAO,SAAS;AAC9D,UAAK,aAAa,mBAAmB;MACnC,OAAO,KAAK;MACZ,SAAS,KAAK;MACd,WAAW,KAAK;MAChB,WAAW,KAAK;;AAElB,UAAK,aAAa,eAAe,CAAC,CAAC,KAAK;AACxC,SAAI,KAAK,aAAc,MAAK,aAAa,aAAa,KAAK;AAC3D,SAAI,KAAK,WAAY,MAAK,aAAa,mBAAmB,EAAE,YAAY,KAAK;AAC7E;IAEF,KAAK;IACL,KAAK;AACH,aAAQ,MAAM,oCAAoC;AAClD;IAEF,KAAK;AACH,2CAAmB;AAEnB,UAAK;AACL,YAAO,QAAQ,YAAY,EAAE,MAAM,sBAAsB;AACzD;IAEF,KAAK;AACH,0CAAkB;AAElB,UAAK;AAEL,YAAO,QAAQ,YAAY,EAAE,MAAM,sBAAsB;AACzD;IAEF,KAAK;AACH,SAAID,4BAAS,UAAU;MACrB,MAAM,EAAE,cAAM,UAAU;AACxB,UAAIC,4BAASC,YAAUA,WAAS,eAAeA,WAAS,iBAAiBD,4BAAS,OAChF,oCAAgB,MAAM;OAAE;OAAM;;UAE9B,SAAQ,KAAK,iEAAiE;;AAGlF;IAEF,QACE;;;AAIN,MAAI,KAAK,eAAgB,QAAO,oBAAoB,WAAW,KAAK;AACpE,OAAK,iBAAiB;AACtB,SAAO,iBAAiB,WAAW;;CAGrC,SAAS;AACP,SAAO,QAAI;;;;;;;;;;;;;;;;;;;iDAmBO,KAAK,WAAW;;;;;;;;AAqBtC,eAAe,OAAOE,0CAA6B;AAEnD,0BAAe"}

package/dist/cjs/react/src/core/WebAuthnManager/LitComponents/HaloBorder/index.js

@@ -0,0 +1,135 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.js');
+const require_tags = require('../tags.js');
+const require_LitElementWithProps = require('../LitElementWithProps.js');
+const require_css_loader = require('../css/css-loader.js');
+let lit = require("lit");
+lit = require_rolldown_runtime.__toESM(lit);
+
+//#region src/core/WebAuthnManager/LitComponents/HaloBorder/index.ts
+var HaloBorderElement = class extends require_LitElementWithProps.LitElementWithProps {
+	static properties = {
+		animated: { type: Boolean },
+		theme: { type: String },
+		durationMs: {
+			type: Number,
+			attribute: "duration-ms"
+		},
+		ringGap: {
+			type: Number,
+			attribute: "ring-gap"
+		},
+		ringWidth: {
+			type: Number,
+			attribute: "ring-width"
+		},
+		ringBorderRadius: {
+			type: String,
+			attribute: "ring-border-radius"
+		},
+		ringBorderShadow: {
+			type: String,
+			attribute: "ring-border-shadow"
+		},
+		ringBackground: {
+			type: String,
+			attribute: "ring-background"
+		},
+		padding: { type: String },
+		innerPadding: {
+			type: String,
+			attribute: "inner-padding"
+		},
+		innerBackground: {
+			type: String,
+			attribute: "inner-background"
+		}
+	};
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	createRenderRoot() {
+		const root = super.createRenderRoot();
+		const p = require_css_loader.ensureExternalStyles(root, "halo-border.css", "data-w3a-halo-border-css");
+		this._stylePromises.push(p);
+		p.catch(() => {});
+		return root;
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const settle = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = settle.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	_rafId = null;
+	_startTs = 0;
+	_running = false;
+	updated(changed) {
+		const vars = {};
+		if (typeof this.ringGap === "number") vars["--ring-gap"] = `${this.ringGap}px`;
+		if (typeof this.ringWidth === "number") vars["--ring-width"] = `${this.ringWidth}px`;
+		if (this.ringBorderRadius) vars["--ring-border-radius"] = this.ringBorderRadius;
+		if (this.innerPadding) vars["--inner-padding"] = this.innerPadding;
+		if (this.innerBackground) vars["--inner-background"] = this.innerBackground;
+		if (this.ringBackground) vars["--ring-stops"] = this.ringBackground;
+		if (this.ringBorderShadow) vars["--halo-box-shadow"] = this.ringBorderShadow;
+		vars["--halo-angle"] = vars["--halo-angle"] || "0deg";
+		this.setCssVars(vars);
+		if (!changed) return;
+		if (changed.has("animated") || changed.has("durationMs")) if (this.animated) this.start();
+		else this.stop();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.animated) this.start();
+	}
+	disconnectedCallback() {
+		this.stop();
+		super.disconnectedCallback();
+	}
+	tick = (ts) => {
+		if (!this._running) return;
+		if (!this._startTs) this._startTs = ts;
+		const dur = typeof this.durationMs === "number" && this.durationMs > 0 ? this.durationMs : 1150;
+		const delta = (ts - this._startTs) % dur;
+		const angle = delta / dur * 360;
+		this.setCssVars({ "--halo-angle": `${angle}deg` });
+		this._rafId = requestAnimationFrame(this.tick);
+	};
+	start() {
+		if (this._running) return;
+		this._running = true;
+		this._startTs = 0;
+		this._rafId = requestAnimationFrame(this.tick);
+	}
+	stop() {
+		this._running = false;
+		if (this._rafId) {
+			cancelAnimationFrame(this._rafId);
+			this._rafId = null;
+		}
+		this.setCssVars({ "--halo-angle": `0deg` });
+	}
+	render() {
+		return lit.html`
+      <div class="halo-root ${this.theme ?? "light"} ${this.animated ? "animated" : ""}">
+        <div class="halo-inner">
+          <div class="halo-outer">
+            ${this.animated ? lit.html`<div class="halo-ring"></div>` : ""}
+            <div class="halo-content"><slot></slot></div>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+if (!customElements.get(require_tags.W3A_HALO_BORDER_ID)) customElements.define(require_tags.W3A_HALO_BORDER_ID, HaloBorderElement);
+var HaloBorder_default = HaloBorderElement;
+
+//#endregion
+exports.default = HaloBorder_default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/react/src/core/WebAuthnManager/LitComponents/HaloBorder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["LitElementWithProps","ensureExternalStyles","vars: Record<string, string>","W3A_HALO_BORDER_ID"],"sources":["../../../../../../../../src/core/WebAuthnManager/LitComponents/HaloBorder/index.ts"],"sourcesContent":["import { html, type PropertyValues } from 'lit';\nimport { LitElementWithProps } from '../LitElementWithProps';\nimport { ensureExternalStyles } from '../css/css-loader';\n\nexport type HaloTheme = 'dark' | 'light';\n\nexport class HaloBorderElement extends LitElementWithProps {\n  static properties = {\n    animated: { type: Boolean },\n    theme: { type: String },\n    durationMs: { type: Number, attribute: 'duration-ms' },\n    ringGap: { type: Number, attribute: 'ring-gap' },\n    ringWidth: { type: Number, attribute: 'ring-width' },\n    ringBorderRadius: { type: String, attribute: 'ring-border-radius' },\n    ringBorderShadow: { type: String, attribute: 'ring-border-shadow' },\n    ringBackground: { type: String, attribute: 'ring-background' },\n    padding: { type: String },\n    innerPadding: { type: String, attribute: 'inner-padding' },\n    innerBackground: { type: String, attribute: 'inner-background' },\n  } as const;\n\n  declare animated?: boolean;\n  declare theme?: HaloTheme;\n  declare durationMs?: number;\n  declare ringGap?: number;\n  declare ringWidth?: number;\n  declare ringBorderRadius?: string;\n  declare ringBorderShadow?: string;\n  declare ringBackground?: string;\n  declare padding?: string;\n  declare innerPadding?: string;\n  declare innerBackground?: string;\n\n  private _stylesReady = false;\n  private _stylePromises: Promise<void>[] = [];\n  private _stylesAwaiting: Promise<void> | null = null;\n\n  protected createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    const p = ensureExternalStyles(root as ShadowRoot | DocumentFragment | HTMLElement, 'halo-border.css', 'data-w3a-halo-border-css');\n    this._stylePromises.push(p);\n    p.catch(() => {});\n    return root;\n  }\n\n  // Defer first render until external styles are adopted to avoid FOUC\n  protected shouldUpdate(_changed: Map<string | number | symbol, unknown>): boolean {\n    if (this._stylesReady) return true;\n    if (!this._stylesAwaiting) {\n      const settle = Promise.all(this._stylePromises)\n        .then(() => new Promise<void>((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));\n      this._stylesAwaiting = settle.then(() => { this._stylesReady = true; this.requestUpdate(); });\n    }\n    return false;\n  }\n  private _rafId: number | null = null;\n  private _startTs: number = 0;\n  private _running: boolean = false;\n\n  protected updated(changed?: PropertyValues): void {\n    // Bridge prop values into CSS variables (no inline style attributes)\n    const vars: Record<string, string> = {};\n    if (typeof this.ringGap === 'number') vars['--ring-gap'] = `${this.ringGap}px`;\n    if (typeof this.ringWidth === 'number') vars['--ring-width'] = `${this.ringWidth}px`;\n    if (this.ringBorderRadius) vars['--ring-border-radius'] = this.ringBorderRadius;\n    if (this.innerPadding) vars['--inner-padding'] = this.innerPadding;\n    if (this.innerBackground) vars['--inner-background'] = this.innerBackground;\n    if (this.ringBackground) vars['--ring-stops'] = this.ringBackground;\n    if (this.ringBorderShadow) vars['--halo-box-shadow'] = this.ringBorderShadow;\n    // Ensure an initial angle is present\n    vars['--halo-angle'] = vars['--halo-angle'] || '0deg';\n    this.setCssVars(vars);\n\n    // Start/stop animation based on \"animated\" or duration changes\n    if (!changed) return;\n    if (changed.has('animated') || changed.has('durationMs')) {\n      if (this.animated) this.start(); else this.stop();\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (this.animated) this.start();\n  }\n\n  disconnectedCallback(): void {\n    this.stop();\n    super.disconnectedCallback();\n  }\n\n  private tick = (ts: number) => {\n    if (!this._running) return;\n    if (!this._startTs) this._startTs = ts;\n    const dur = (typeof this.durationMs === 'number' && this.durationMs > 0) ? this.durationMs : 1150;\n    const delta = (ts - this._startTs) % dur;\n    const angle = (delta / dur) * 360;\n    // Update only the angle var via adoptedStyleSheet (no style attribute writes)\n    this.setCssVars({ '--halo-angle': `${angle}deg` });\n    this._rafId = requestAnimationFrame(this.tick);\n  };\n\n  private start() {\n    if (this._running) return;\n    this._running = true;\n    this._startTs = 0;\n    this._rafId = requestAnimationFrame(this.tick);\n  }\n\n  private stop() {\n    this._running = false;\n    if (this._rafId) {\n      cancelAnimationFrame(this._rafId);\n      this._rafId = null;\n    }\n    // Reset angle\n    this.setCssVars({ '--halo-angle': `0deg` });\n  }\n\n  render() {\n    return html`\n      <div class=\"halo-root ${this.theme ?? 'light'} ${this.animated ? 'animated' : ''}\">\n        <div class=\"halo-inner\">\n          <div class=\"halo-outer\">\n            ${this.animated ? html`<div class=\"halo-ring\"></div>` : ''}\n            <div class=\"halo-content\"><slot></slot></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nimport { W3A_HALO_BORDER_ID } from '../tags';\n\nif (!customElements.get(W3A_HALO_BORDER_ID)) {\n  customElements.define(W3A_HALO_BORDER_ID, HaloBorderElement);\n}\n\nexport default HaloBorderElement;\n"],"mappings":"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"}