jet_ui 0.2.4

data/app/assets/images/jet_ui/icons/wallet.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12C21 10.7574 19.9926 9.75 18.75 9.75H15C15 11.4069 13.6569 12.75 12 12.75C10.3431 12.75 9 11.4069 9 9.75H5.25C4.00736 9.75 3 10.7574 3 12M21 12V18C21 19.2426 19.9926 20.25 18.75 20.25H5.25C4.00736 20.25 3 19.2426 3 18V12M21 12V9M3 12V9M21 9C21 7.75736 19.9926 6.75 18.75 6.75H5.25C4.00736 6.75 3 7.75736 3 9M21 9V6C21 4.75736 19.9926 3.75 18.75 3.75H5.25C4.00736 3.75 3 4.75736 3 6V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/jet_ui/icons/wifi.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.28767 15.0378C10.3379 12.9875 13.662 12.9875 15.7123 15.0378M5.10569 11.8558C8.9133 8.04815 15.0867 8.04815 18.8943 11.8558M1.92371 8.67373C7.48868 3.10876 16.5113 3.10876 22.0762 8.67373M12.5303 18.2197L12 18.7501L11.4696 18.2197C11.7625 17.9268 12.2374 17.9268 12.5303 18.2197Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/jet_ui/icons/window.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 8.25V18C3 19.2426 4.00736 20.25 5.25 20.25H18.75C19.9926 20.25 21 19.2426 21 18V8.25M3 8.25V6C3 4.75736 4.00736 3.75 5.25 3.75H18.75C19.9926 3.75 21 4.75736 21 6V8.25M3 8.25H21M5.25 6H5.2575V6.0075H5.25V6ZM7.5 6H7.5075V6.0075H7.5V6ZM9.75 6H9.7575V6.0075H9.75V6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/jet_ui/icons/wrench-screwdriver.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4194 15.1694L17.25 21C18.2855 22.0355 19.9645 22.0355 21 21C22.0355 19.9645 22.0355 18.2855 21 17.25L15.1233 11.3733M11.4194 15.1694L13.9155 12.1383C14.2315 11.7546 14.6542 11.5132 15.1233 11.3733M11.4194 15.1694L6.76432 20.8219C6.28037 21.4096 5.55897 21.75 4.79768 21.75C3.39064 21.75 2.25 20.6094 2.25 19.2023C2.25 18.441 2.59044 17.7196 3.1781 17.2357L10.0146 11.6056M15.1233 11.3733C15.6727 11.2094 16.2858 11.1848 16.8659 11.2338C16.9925 11.2445 17.1206 11.25 17.25 11.25C19.7353 11.25 21.75 9.23528 21.75 6.75C21.75 6.08973 21.6078 5.46268 21.3523 4.89779L18.0762 8.17397C16.9605 7.91785 16.0823 7.03963 15.8262 5.92397L19.1024 2.64774C18.5375 2.39223 17.9103 2.25 17.25 2.25C14.7647 2.25 12.75 4.26472 12.75 6.75C12.75 6.87938 12.7555 7.00749 12.7662 7.13411C12.8571 8.20956 12.6948 9.39841 11.8617 10.0845L11.7596 10.1686M10.0146 11.6056L5.90901 7.5H4.5L2.25 3.75L3.75 2.25L7.5 4.5V5.90901L11.7596 10.1686M10.0146 11.6056L11.7596 10.1686M18.375 18.375L15.75 15.75M4.86723 19.125H4.87473V19.1325H4.86723V19.125Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/jet_ui/icons/wrench.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.75 6.75C21.75 9.23528 19.7353 11.25 17.25 11.25C17.1206 11.25 16.9925 11.2445 16.8659 11.2338C15.7904 11.1429 14.6016 11.3052 13.9155 12.1383L6.76432 20.8219C6.28037 21.4096 5.55897 21.75 4.79769 21.75C3.39064 21.75 2.25 20.6094 2.25 19.2023C2.25 18.441 2.59044 17.7196 3.1781 17.2357L11.8617 10.0845C12.6948 9.39841 12.8571 8.20956 12.7662 7.13411C12.7555 7.00749 12.75 6.87938 12.75 6.75C12.75 4.26472 14.7647 2.25 17.25 2.25C17.9103 2.25 18.5375 2.39223 19.1024 2.64774L15.8262 5.92397C16.0823 7.03963 16.9605 7.91785 18.0762 8.17397L21.3524 4.89779C21.6078 5.46268 21.75 6.08973 21.75 6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.86723 19.125H4.87473V19.1325H4.86723V19.125Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/jet_ui/icons/x-circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75 9.75L14.25 14.25M14.25 9.75L9.75 14.25M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/jet_ui/icons/x-mark.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/javascripts/jet_ui/clipboard_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ClipboardController extends Controller {
+  static values = {
+    content: String,
+    sourceId: String,
+    successText: { type: String, default: "Copied!" },
+    timeout: { type: Number, default: 2000 }
+  }
+
+  connect() {
+    this.originalText = this.#hasTooltip
+      ? this.element.dataset.tooltipContentValue
+      : this.element.textContent
+  }
+
+  async copy() {
+    const text = this.#getContent()
+    await navigator.clipboard.writeText(text)
+
+    if (!this.#hasTooltip) {
+      this.element.textContent = this.successTextValue
+    }
+
+    this.dispatch("change", { detail: { content: this.successTextValue } })
+
+    setTimeout(() => {
+      if (!this.#hasTooltip) {
+        this.element.textContent = this.originalText
+      }
+      this.dispatch("change", { detail: { content: this.originalText } })
+    }, this.timeoutValue)
+  }
+
+  get #hasTooltip() {
+    return this.element.dataset.controller?.includes("tooltip")
+  }
+
+  #getContent() {
+    if (this.hasSourceIdValue) {
+      const el = document.getElementById(this.sourceIdValue)
+      return el?.value ?? el?.textContent ?? ""
+    }
+    return this.contentValue
+  }
+}

data/app/assets/javascripts/jet_ui/drawer_controller.js

@@ -0,0 +1,70 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class DrawerController extends Controller {
+  static values = {
+    swipeThreshold: { type: Number, default: 100 }
+  }
+
+  connect() {
+    this.element.addEventListener("click", this.#closeOnBackdropClick.bind(this))
+    this.element.addEventListener("touchstart", this.#onTouchStart.bind(this), { passive: true })
+    this.element.addEventListener("touchmove", this.#onTouchMove.bind(this), { passive: true })
+    this.element.addEventListener("touchend", this.#onTouchEnd.bind(this), { passive: true })
+    this.element.showModal()
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.#closeOnBackdropClick.bind(this))
+    this.element.removeEventListener("touchstart", this.#onTouchStart.bind(this))
+    this.element.removeEventListener("touchmove", this.#onTouchMove.bind(this))
+    this.element.removeEventListener("touchend", this.#onTouchEnd.bind(this))
+    this.close()
+  }
+
+  show() {
+    this.element.showModal()
+  }
+
+  close() {
+    try {
+      this.element.close()
+      DrawerController.turboFrame.src = null
+      this.element.remove()
+    } catch (e) {}
+  }
+
+  #closeOnBackdropClick(event) {
+    if (event.target === this.element) {
+      this.close()
+    }
+  }
+
+  #onTouchStart(event) {
+    this.touchStartX = event.touches[0].clientX
+    this.element.style.transition = "none"
+  }
+
+  #onTouchMove(event) {
+    const currentX = event.touches[0].clientX
+    const diff = Math.max(0, currentX - this.touchStartX)
+    this.element.style.transform = `translateX(${diff}px)`
+  }
+
+  #onTouchEnd(event) {
+    const touchEndX = event.changedTouches[0].clientX
+    const diff = touchEndX - this.touchStartX
+
+    this.element.style.transition = "transform 0.2s ease-out"
+
+    if (diff > this.swipeThresholdValue) {
+      this.element.style.transform = "translateX(100%)"
+      this.element.addEventListener("transitionend", () => this.close(), { once: true })
+    } else {
+      this.element.style.transform = "translateX(0)"
+    }
+  }
+
+  static get turboFrame() {
+    return document.querySelector("turbo-frame[id='drawer']")
+  }
+}

data/app/assets/javascripts/jet_ui/drawers_controller.js

@@ -0,0 +1,83 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class DrawersController extends Controller {
+  static targets = ["dialog"]
+  static values = {
+    swipeThreshold: { type: Number, default: 100 }
+  }
+
+  disconnect() {
+    this.#removeDialogListeners()
+  }
+
+  open(e) {
+    this.openedDialog = this.#getDialog(e)
+    this.#addDialogListeners()
+    this.openedDialog?.showModal()
+  }
+
+  close(e) {
+    this.#removeDialogListeners()
+    this.#getDialog(e)?.close()
+  }
+
+  #getDialog(e) {
+    const id = e.currentTarget.dataset.id
+    return this.dialogTargets.find(dialog => dialog.id === id)
+  }
+
+  #addDialogListeners() {
+    if (!this.openedDialog) return
+    this._backdropClick = this.#closeOnBackdropClick.bind(this)
+    this._touchStart = this.#onTouchStart.bind(this)
+    this._touchMove = this.#onTouchMove.bind(this)
+    this._touchEnd = this.#onTouchEnd.bind(this)
+    this.openedDialog.addEventListener("click", this._backdropClick)
+    this.openedDialog.addEventListener("touchstart", this._touchStart, { passive: true })
+    this.openedDialog.addEventListener("touchmove", this._touchMove, { passive: true })
+    this.openedDialog.addEventListener("touchend", this._touchEnd, { passive: true })
+  }
+
+  #removeDialogListeners() {
+    if (!this.openedDialog || !this._backdropClick) return
+    this.openedDialog.removeEventListener("click", this._backdropClick)
+    this.openedDialog.removeEventListener("touchstart", this._touchStart)
+    this.openedDialog.removeEventListener("touchmove", this._touchMove)
+    this.openedDialog.removeEventListener("touchend", this._touchEnd)
+  }
+
+  #closeOnBackdropClick(e) {
+    if (e.target === this.openedDialog) {
+      this.openedDialog.close()
+    }
+  }
+
+  #onTouchStart(event) {
+    this.touchStartX = event.touches[0].clientX
+    this.openedDialog.style.transition = "none"
+  }
+
+  #onTouchMove(event) {
+    const currentX = event.touches[0].clientX
+    const diff = Math.max(0, currentX - this.touchStartX)
+    this.openedDialog.style.transform = `translateX(${diff}px)`
+  }
+
+  #onTouchEnd(event) {
+    const touchEndX = event.changedTouches[0].clientX
+    const diff = touchEndX - this.touchStartX
+
+    this.openedDialog.style.transition = "transform 0.2s ease-out"
+
+    if (diff > this.swipeThresholdValue) {
+      this.openedDialog.style.transform = "translateX(100%)"
+      this.openedDialog.addEventListener("transitionend", () => {
+        this.openedDialog.close()
+        this.openedDialog.style.transform = ""
+        this.openedDialog.style.transition = ""
+      }, { once: true })
+    } else {
+      this.openedDialog.style.transform = "translateX(0)"
+    }
+  }
+}

data/app/assets/javascripts/jet_ui/dropdown_controller.js

@@ -0,0 +1,95 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class DropdownController extends Controller {
+  static targets = ["menu", "autofocus"]
+  static values = { open: { type: Boolean, default: false } }
+
+  connect() {
+    this._handleClick = this.#handleClick.bind(this)
+    this._clickOutside = this.#clickOutside.bind(this)
+    this._handleKeydown = this.#handleKeydown.bind(this)
+    this._handleMorph = this.#handleMorph.bind(this)
+    this.element.addEventListener("click", this._handleClick)
+    document.addEventListener("turbo:morph", this._handleMorph)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this._handleClick)
+    document.removeEventListener("click", this._clickOutside)
+    document.removeEventListener("keydown", this._handleKeydown)
+    document.removeEventListener("turbo:morph", this._handleMorph)
+  }
+
+  toggle() { this.openValue = !this.openValue }
+  show()   { this.openValue = true }
+  hide()   { this.openValue = false }
+
+  openValueChanged(isOpen) {
+    isOpen ? this.#showMenu() : this.#hideMenu()
+  }
+
+  #handleClick(event) {
+    if (!this.menuTarget.contains(event.target)) {
+      this.toggle()
+    }
+  }
+
+  #showMenu() {
+    this.menuTarget.classList.remove("hidden")
+    this.menuTarget.classList.add("block")
+    this.#updatePosition()
+    if (this.hasAutofocusTarget) this.autofocusTarget.focus()
+    document.addEventListener("click", this._clickOutside)
+    document.addEventListener("keydown", this._handleKeydown)
+  }
+
+  #hideMenu() {
+    this.menuTarget.classList.remove("block")
+    this.menuTarget.classList.add("hidden")
+    document.removeEventListener("click", this._clickOutside)
+    document.removeEventListener("keydown", this._handleKeydown)
+  }
+
+  #handleKeydown(event) {
+    if (event.key === "Escape") this.hide()
+  }
+
+  #clickOutside(event) {
+    if (!this.element.contains(event.target)) this.hide()
+  }
+
+  #handleMorph() {
+    if (this.openValue) this.#showMenu()
+  }
+
+  #updatePosition() {
+    const ref = this.element
+    const floating = this.menuTarget
+    const refRect = ref.getBoundingClientRect()
+    const floatRect = floating.getBoundingClientRect()
+    const viewport = { w: window.innerWidth, h: window.innerHeight }
+    const gap = 5
+
+    // Coordinates relative to the .dropdown parent (position: relative)
+    let x = 0
+    let y = ref.offsetHeight + gap
+
+    // Flip up if overflows bottom viewport
+    if (refRect.bottom + gap + floatRect.height > viewport.h) {
+      y = -(floatRect.height + gap)
+    }
+
+    // Shift left if overflows right edge
+    if (refRect.left + floatRect.width > viewport.w - 8) {
+      x = ref.offsetWidth - floatRect.width
+    }
+
+    // Clamp so menu doesn't overflow left edge of viewport
+    x = Math.max(-refRect.left + 8, x)
+
+    Object.assign(floating.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    })
+  }
+}

data/app/assets/javascripts/jet_ui/flash_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class FlashController extends Controller {
+  static values = {
+    dismissAfter: Number,
+    showDelay: { type: Number, default: 0 }
+  }
+
+  connect() {
+    setTimeout(() => this.#show(), this.showDelayValue)
+
+    if (this.hasDismissAfterValue) {
+      setTimeout(() => this.close(), this.showDelayValue + this.dismissAfterValue)
+    }
+  }
+
+  close() {
+    this.element.classList.remove("flash-item--visible")
+    const fallback = setTimeout(() => this.element.remove(), 400)
+    this.element.addEventListener("transitionend", () => {
+      clearTimeout(fallback)
+      this.element.remove()
+    }, { once: true })
+  }
+
+  #show() {
+    this.element.classList.remove("flash-item--hidden")
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.element.classList.add("flash-item--visible")
+      })
+    })
+  }
+}

data/app/assets/javascripts/jet_ui/modal_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ModalController extends Controller {
+  connect() {
+    this.element.addEventListener("click", this.#closeOnBackdropClick.bind(this))
+    this.element.showModal()
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.#closeOnBackdropClick.bind(this))
+    this.close()
+  }
+
+  show() {
+    this.element.showModal()
+  }
+
+  close() {
+    try {
+      this.element.close()
+      ModalController.turboFrame.src = null
+      this.element.remove()
+    } catch (e) {}
+  }
+
+  #closeOnBackdropClick(event) {
+    if (event.target === this.element) {
+      this.close()
+    }
+  }
+
+  static get turboFrame() {
+    return document.querySelector("turbo-frame[id='modal']")
+  }
+}

data/app/assets/javascripts/jet_ui/modals_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class ModalsController extends Controller {
+  static targets = ["dialog"]
+
+  disconnect() {
+    this.openedDialog?.removeEventListener("click", this.#closeOnBackdropClick.bind(this))
+  }
+
+  open(e) {
+    this.openedDialog = this.#getDialog(e)
+    this.openedDialog?.addEventListener("click", this.#closeOnBackdropClick.bind(this))
+    this.openedDialog?.showModal()
+  }
+
+  close(e) {
+    this.#getDialog(e)?.close()
+  }
+
+  #getDialog(e) {
+    const id = e.currentTarget.dataset.id
+    return this.dialogTargets.find(dialog => dialog.id === id)
+  }
+
+  #closeOnBackdropClick(e) {
+    if (e.target === this.openedDialog) {
+      this.openedDialog.close()
+    }
+  }
+}

data/app/assets/javascripts/jet_ui/popover_controller.js

@@ -0,0 +1,95 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class PopoverController extends Controller {
+  static targets = ["content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    placement: { type: String, default: "bottom" }
+  }
+
+  connect() {
+    this._mouseEnter = () => { this.openValue = true }
+    this._mouseLeave = () => { this.openValue = false }
+    this._handleMorph = this.#handleMorph.bind(this)
+    this.element.addEventListener("mouseenter", this._mouseEnter)
+    this.element.addEventListener("mouseleave", this._mouseLeave)
+    document.addEventListener("turbo:morph", this._handleMorph)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("mouseenter", this._mouseEnter)
+    this.element.removeEventListener("mouseleave", this._mouseLeave)
+    document.removeEventListener("turbo:morph", this._handleMorph)
+  }
+
+  openValueChanged(isOpen) {
+    isOpen ? this.#showContent() : this.#hideContent()
+  }
+
+  #showContent() {
+    this.contentTarget.classList.add("popover--visible")
+    this.#updatePosition()
+  }
+
+  #hideContent() {
+    this.contentTarget.classList.remove("popover--visible")
+  }
+
+  #handleMorph() {
+    if (this.openValue) this.#showContent()
+  }
+
+  #updatePosition() {
+    const ref = this.element
+    const floating = this.contentTarget
+    const refRect = ref.getBoundingClientRect()
+    const floatRect = floating.getBoundingClientRect()
+    const viewport = { w: window.innerWidth, h: window.innerHeight }
+    const gap = 12
+    const placement = this.placementValue
+
+    let x, y, effectivePlacement = placement
+
+    switch (placement) {
+      case "bottom":
+        x = (refRect.width - floatRect.width) / 2
+        y = refRect.height + gap
+        if (refRect.bottom + gap + floatRect.height > viewport.h) {
+          y = -(floatRect.height + gap); effectivePlacement = "top"
+        }
+        break
+      case "top":
+        x = (refRect.width - floatRect.width) / 2
+        y = -(floatRect.height + gap)
+        if (refRect.top - gap - floatRect.height < 0) {
+          y = refRect.height + gap; effectivePlacement = "bottom"
+        }
+        break
+      case "right":
+        x = refRect.width + gap
+        y = (refRect.height - floatRect.height) / 2
+        if (refRect.right + gap + floatRect.width > viewport.w) {
+          x = -(floatRect.width + gap); effectivePlacement = "left"
+        }
+        break
+      case "left":
+        x = -(floatRect.width + gap)
+        y = (refRect.height - floatRect.height) / 2
+        if (refRect.left - gap - floatRect.width < 0) {
+          x = refRect.width + gap; effectivePlacement = "right"
+        }
+        break
+      default:
+        x = (refRect.width - floatRect.width) / 2
+        y = refRect.height + gap
+    }
+
+    // Shift horizontally to stay in viewport
+    const absoluteX = refRect.left + x
+    if (absoluteX < 8) x += (8 - absoluteX)
+    if (absoluteX + floatRect.width > viewport.w - 8) x -= (absoluteX + floatRect.width - viewport.w + 8)
+
+    Object.assign(floating.style, { left: `${x}px`, top: `${y}px` })
+    floating.dataset.placement = effectivePlacement
+  }
+}

data/app/assets/javascripts/jet_ui/tooltip_controller.js

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class TooltipController extends Controller {
+  static values = {
+    content: String,
+    placement: { type: String, default: "top" }
+  }
+
+  connect() {
+    this._mouseEnter = this.#mouseEnter.bind(this)
+    this._mouseLeave = this.#mouseLeave.bind(this)
+    this.element.addEventListener("mouseenter", this._mouseEnter)
+    this.element.addEventListener("mouseleave", this._mouseLeave)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("mouseenter", this._mouseEnter)
+    this.element.removeEventListener("mouseleave", this._mouseLeave)
+    this.tooltip?.remove()
+    this.tooltip = null
+  }
+
+  updateContent(event) {
+    const text = event.detail?.content
+    if (text) this.contentValue = text
+  }
+
+  contentValueChanged(value) {
+    if (this.tooltip) {
+      this.tooltip.innerHTML = value
+      this.#updatePosition()
+    }
+  }
+
+  #mouseEnter() {
+    this.#createTooltip()
+    this.#updatePosition()
+  }
+
+  #mouseLeave() {
+    this.tooltip?.remove()
+    this.tooltip = null
+  }
+
+  #createTooltip() {
+    this.tooltip = document.createElement("div")
+    this.tooltip.className = "tooltip"
+    this.tooltip.role = "tooltip"
+    this.tooltip.innerHTML = this.contentValue
+    const container = this.element.closest("dialog") || document.body
+    container.appendChild(this.tooltip)
+  }
+
+  #updatePosition() {
+    if (!this.tooltip) return
+
+    // Measure tooltip dimensions
+    this.tooltip.style.visibility = "hidden"
+    this.tooltip.style.position = "fixed"
+    this.tooltip.style.left = "-9999px"
+    const floatRect = this.tooltip.getBoundingClientRect()
+    this.tooltip.style.visibility = ""
+    this.tooltip.style.position = ""
+    this.tooltip.style.left = ""
+
+    const ref = this.element
+    const refRect = ref.getBoundingClientRect()
+    const viewport = { w: window.innerWidth, h: window.innerHeight }
+    const gap = 8
+    const placement = this.placementValue
+
+    let x, y, effectivePlacement = placement
+
+    switch (placement) {
+      case "top":
+        x = refRect.left + (refRect.width - floatRect.width) / 2
+        y = refRect.top - floatRect.height - gap
+        if (y < 0) { y = refRect.bottom + gap; effectivePlacement = "bottom" }
+        break
+      case "bottom":
+        x = refRect.left + (refRect.width - floatRect.width) / 2
+        y = refRect.bottom + gap
+        if (y + floatRect.height > viewport.h) { y = refRect.top - floatRect.height - gap; effectivePlacement = "top" }
+        break
+      case "left":
+        x = refRect.left - floatRect.width - gap
+        y = refRect.top + (refRect.height - floatRect.height) / 2
+        if (x < 0) { x = refRect.right + gap; effectivePlacement = "right" }
+        break
+      case "right":
+        x = refRect.right + gap
+        y = refRect.top + (refRect.height - floatRect.height) / 2
+        if (x + floatRect.width > viewport.w) { x = refRect.left - floatRect.width - gap; effectivePlacement = "left" }
+        break
+      default:
+        x = refRect.left + (refRect.width - floatRect.width) / 2
+        y = refRect.top - floatRect.height - gap
+    }
+
+    // Shift to keep within viewport
+    x = Math.max(8, Math.min(x + window.scrollX, viewport.w + window.scrollX - floatRect.width - 8))
+    y = Math.max(8, Math.min(y + window.scrollY, viewport.h + window.scrollY - floatRect.height - 8))
+
+    Object.assign(this.tooltip.style, { left: `${x}px`, top: `${y}px` })
+    this.tooltip.dataset.placement = effectivePlacement
+  }
+}

data/app/assets/javascripts/jet_ui/turbo_confirm_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class TurboConfirmController extends Controller {
+  connect() {
+    window.Turbo.config.forms.confirm = (message) => {
+      const dialog = this.element
+      const messageEl = dialog.querySelector("p")
+      if (messageEl) messageEl.textContent = message
+      dialog.showModal()
+
+      return new Promise((resolve) => {
+        dialog.addEventListener("close", () => {
+          resolve(dialog.returnValue === "confirm")
+        }, { once: true })
+
+        dialog.addEventListener("click", (event) => {
+          if (event.target === dialog) {
+            dialog.returnValue = "cancel"
+            dialog.close()
+          }
+        })
+      })
+    }
+  }
+}