unmagic-components 0.3.0 → 0.4.0

data/app/assets/javascripts/unmagic/components/dropzone.js

@@ -0,0 +1,206 @@
+// <unmagic-dropzone input="#files"> — a region that takes dropped and pasted
+// files, rendered by `ai_chat_dropzone`.
+//
+// Dragging files over it shows its overlay (data-dragging); dropping or pasting
+// them attaches them. Dragging is never the only way in: the paired file input is
+// the keyboard's route, and files picked through it are attached the same way.
+//
+//   input="#files"     the file input (required)
+//   url="/uploads"     upload each file on the spot: POST, as `file`, expecting JSON
+//                      back with a `value`, which is then posted with the message
+//                      as a hidden field named by `field`. Without a url, the files
+//                      wait on the input and go with the form.
+//   field="message[attachments][]"
+//   chips="#composer [data-ai-chat-chips]"   where attached files are listed
+//
+// Chips are cloned from the element's own <template data-dropzone-chip>, and a
+// polite live region says what was attached. It fires unmagic-dropzone:attach and
+// unmagic-dropzone:error, clears its chips once the form submits successfully, and
+// drops the overlay before Turbo caches the page. Needs Turbo for that clearing.
+
+class UnmagicDropzone extends HTMLElement {
+  #depth = 0
+  #transfer = new DataTransfer()
+  #input = null
+
+  constructor() {
+    super()
+    this.addEventListener("dragenter", (event) => {
+      if (!hasFiles(event)) return
+      this.#depth++
+      this.setAttribute("data-dragging", "")
+    })
+    this.addEventListener("dragleave", (event) => {
+      if (!hasFiles(event)) return
+      this.#depth = Math.max(0, this.#depth - 1)
+      if (this.#depth === 0) this.removeAttribute("data-dragging")
+    })
+    this.addEventListener("dragover", (event) => {
+      if (!hasFiles(event)) return
+      event.preventDefault()
+      event.dataTransfer.dropEffect = "copy"
+    })
+    this.addEventListener("drop", (event) => {
+      if (!hasFiles(event)) return
+      event.preventDefault()
+      this.#reset()
+      this.attach(event.dataTransfer.files)
+    })
+    this.addEventListener("paste", (event) => {
+      const files = event.clipboardData?.files
+      if (files?.length) this.attach(files)
+    })
+  }
+
+  connectedCallback() {
+    this.#input = document.querySelector(this.getAttribute("input"))
+    this.#input?.addEventListener("change", this.#picked)
+    document.addEventListener("turbo:before-cache", this.#reset)
+    document.addEventListener("turbo:submit-end", this.#submitted)
+  }
+
+  disconnectedCallback() {
+    this.#input?.removeEventListener("change", this.#picked)
+    this.#input = null
+    document.removeEventListener("turbo:before-cache", this.#reset)
+    document.removeEventListener("turbo:submit-end", this.#submitted)
+  }
+
+  attach(files) {
+    for (const file of Array.from(files)) {
+      if (this.hasAttribute("url")) this.#upload(file)
+      else this.#hold(file)
+    }
+  }
+
+  get #chips() {
+    return document.querySelector(this.getAttribute("chips")) ?? this.querySelector("[data-ai-chat-chips]")
+  }
+
+  // The input's own files are replaced by the full set, so a second pick adds to
+  // the first rather than replacing it.
+  #picked = () => {
+    const added = Array.from(this.#input.files).filter((file) => !this.#holds(file))
+    if (this.hasAttribute("url")) {
+      this.#input.value = ""
+      for (const file of added) this.#upload(file)
+    } else {
+      for (const file of added) this.#hold(file)
+    }
+  }
+
+  #holds(file) {
+    return Array.from(this.#transfer.files).some((held) => held === file)
+  }
+
+  #hold(file) {
+    if (!this.#input) return
+    this.#transfer.items.add(file)
+    this.#input.files = this.#transfer.files
+
+    this.#chip(file, () => {
+      const kept = new DataTransfer()
+      for (const held of this.#transfer.files) if (held !== file) kept.items.add(held)
+      this.#transfer = kept
+      this.#input.files = kept.files
+    })
+    this.#attached(file)
+  }
+
+  async #upload(file) {
+    const body = new FormData()
+    body.append("file", file)
+    const token = document.querySelector("meta[name=csrf-token]")?.content
+
+    try {
+      const response = await fetch(this.getAttribute("url"), {
+        method: "POST",
+        body,
+        headers: { Accept: "application/json", ...(token ? { "X-CSRF-Token": token } : {}) },
+        credentials: "same-origin",
+      })
+      if (!response.ok) throw new Error(`${response.status} ${response.statusText}`)
+
+      const { value } = await response.json()
+      const chip = this.#chip(file)
+      const hidden = document.createElement("input")
+      hidden.type = "hidden"
+      hidden.name = this.getAttribute("field")
+      hidden.value = value
+      chip?.append(hidden)
+      this.#attached(file)
+    } catch (error) {
+      this.#say("failed", file)
+      this.dispatchEvent(new CustomEvent("unmagic-dropzone:error", { bubbles: true, detail: { file, error } }))
+    }
+  }
+
+  #chip(file, removed = () => {}) {
+    const template = this.querySelector(":scope > template[data-dropzone-chip]")
+    const chips = this.#chips
+    if (!template || !chips) return null
+
+    const chip = template.content.firstElementChild.cloneNode(true)
+    chip.querySelector("[data-dropzone-name]").textContent = file.name
+    chip.querySelector("[data-dropzone-size]").textContent = humanSize(file.size)
+
+    const remove = chip.querySelector("[data-dropzone-remove]")
+    const label = this.#words("remove", file)
+    remove.setAttribute("aria-label", label)
+    remove.title = label
+    remove.addEventListener("click", () => {
+      chip.remove()
+      removed()
+    })
+
+    chips.append(chip)
+    return chip
+  }
+
+  #attached(file) {
+    this.#say("attached", file)
+    this.dispatchEvent(new CustomEvent("unmagic-dropzone:attach", { bubbles: true, detail: { file } }))
+  }
+
+  #say(key, file) {
+    const status = this.querySelector(":scope > [data-dropzone-status]")
+    if (status) status.textContent = this.#words(key, file)
+  }
+
+  #words(key, file) {
+    return (this.dataset[key] || "").replaceAll("{name}", file.name)
+  }
+
+  // The files went with the message: forget them.
+  #submitted = (event) => {
+    const form = this.#input?.form ?? this.#chips?.closest("form")
+    if (event.target !== form || !event.detail?.success) return
+
+    this.#chips?.replaceChildren()
+    this.#transfer = new DataTransfer()
+    if (this.#input) this.#input.value = ""
+  }
+
+  #reset = () => {
+    this.#depth = 0
+    this.removeAttribute("data-dragging")
+  }
+}
+
+function hasFiles(event) {
+  return Array.from(event.dataTransfer?.types ?? []).includes("Files")
+}
+
+function humanSize(bytes) {
+  if (bytes < 1024) return `${bytes} Bytes`
+  const units = ["KB", "MB", "GB"]
+  let size = bytes / 1024
+  let unit = 0
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024
+    unit++
+  }
+  return `${size < 10 ? size.toFixed(1).replace(/\.0$/, "") : Math.round(size)} ${units[unit]}`
+}
+
+customElements.get("unmagic-dropzone") || customElements.define("unmagic-dropzone", UnmagicDropzone)

data/app/assets/javascripts/unmagic/components/elapsed.js

@@ -0,0 +1,64 @@
+// <unmagic-elapsed since="…"> — a clock counting up from a moment the server
+// named, rendered by `elapsed_tag`.
+//
+// Work that takes a minute and work that has hung look the same behind a spinner;
+// a number that keeps moving is the difference. The server draws the first reading,
+// so this only keeps it moving, a second at a time.
+//
+//   since="2026-09-16T12:00:00.000Z"   count up from this instant
+//   until="2026-09-16T12:05:00.000Z"   or count down to it, stopping at zero and
+//                                      firing unmagic-elapsed:end
+//
+// The words match Unmagic::Components::Duration in Ruby — 2s, 3m 5s, 1h 4m 2s —
+// in whole seconds, floored going up and ceiled going down. Change both together.
+
+class UnmagicElapsed extends HTMLElement {
+  static observedAttributes = ["since", "until"]
+
+  #timer = null
+  #ended = false
+
+  connectedCallback() {
+    this.#ended = false
+    this.#draw()
+    this.#timer = setInterval(() => this.#draw(), 1000)
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.#timer)
+    this.#timer = null
+  }
+
+  attributeChangedCallback() {
+    if (!this.isConnected) return
+    this.#ended = false
+    this.#draw()
+  }
+
+  #draw() {
+    const until = this.getAttribute("until")
+    const now = Date.now()
+
+    if (until) {
+      const left = Math.max(0, Math.ceil((Date.parse(until) - now) / 1000))
+      this.textContent = reading(left)
+      if (left === 0 && !this.#ended) {
+        this.#ended = true
+        clearInterval(this.#timer)
+        this.dispatchEvent(new CustomEvent("unmagic-elapsed:end", { bubbles: true }))
+      }
+    } else {
+      const since = Date.parse(this.getAttribute("since"))
+      if (Number.isNaN(since)) return
+      this.textContent = reading(Math.max(0, Math.floor((now - since) / 1000)))
+    }
+  }
+}
+
+function reading(seconds) {
+  if (seconds < 60) return `${seconds}s`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`
+  return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m ${seconds % 60}s`
+}
+
+customElements.get("unmagic-elapsed") || customElements.define("unmagic-elapsed", UnmagicElapsed)

data/app/assets/javascripts/unmagic/components/optimistic.js

@@ -0,0 +1,71 @@
+// <unmagic-optimistic container="#entries"> — draws a form's submission before
+// the server has heard of it, rendered by `ai_chat_composer`.
+//
+// On the enclosing form's submit, the element clones its <template> and fills it
+// from the form's fields:
+//
+//   data-optimistic-id="message[client_id]"    the element's id, from that field
+//   data-optimistic-text="message[content]"    the element's text, from that field
+//
+// then places it by id, exactly as the `upsert` stream action does (placement.js):
+// an element with that id already on the page is replaced, otherwise the clone
+// goes into `container`. The server then broadcasts the real element under the
+// same id and the two become one. Pair it with <unmagic-uuid-input> so both sides
+// know the id up front. A required field keeps an empty form from submitting, so
+// there's never a placeholder with no record coming for it.
+//
+//   container="#entries"   where a new element goes (required)
+//   scroll="false"         don't scroll the new element into view
+//
+// It fires unmagic-optimistic:insert with the element. Needs Turbo, for the
+// broadcast that reconciles what it drew.
+import { place } from "unmagic/components/placement"
+
+const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
+
+class UnmagicOptimistic extends HTMLElement {
+  #form = null
+
+  connectedCallback() {
+    this.#form = this.closest("form")
+    this.#form?.addEventListener("submit", this.#insert)
+  }
+
+  disconnectedCallback() {
+    this.#form?.removeEventListener("submit", this.#insert)
+    this.#form = null
+  }
+
+  // Not skipped when the event is already handled: Turbo prevents the native
+  // submit to send it itself, which is exactly the submission to draw.
+  #insert = () => {
+    const template = this.querySelector(":scope > template")
+    if (!template) return
+
+    const clone = template.content.cloneNode(true)
+    for (const node of clone.querySelectorAll("[data-optimistic-id]")) {
+      node.id = this.#field(node.dataset.optimisticId)
+    }
+    for (const node of clone.querySelectorAll("[data-optimistic-text]")) {
+      node.textContent = this.#field(node.dataset.optimisticText)
+    }
+
+    const incoming = clone.firstElementChild
+    if (!incoming) return
+
+    const placed = place(incoming, document.querySelector(this.getAttribute("container")))
+    if (!placed) return
+
+    if (this.getAttribute("scroll") !== "false") {
+      placed.scrollIntoView({ block: "end", behavior: reducedMotion.matches ? "instant" : "smooth" })
+    }
+    this.dispatchEvent(new CustomEvent("unmagic-optimistic:insert", { bubbles: true, detail: { element: placed } }))
+  }
+
+  #field(name) {
+    const field = this.#form?.elements.namedItem(name)
+    return field && "value" in field ? field.value : ""
+  }
+}
+
+customElements.get("unmagic-optimistic") || customElements.define("unmagic-optimistic", UnmagicOptimistic)

data/app/assets/javascripts/unmagic/components/placement.js

@@ -0,0 +1,30 @@
+// Places an element by its id: the reconcile-by-id contract the `upsert` stream
+// action and <unmagic-optimistic> both keep, so the two can never disagree about
+// where something lands.
+//
+// If an element with the incoming one's id is already in the document —
+// server-rendered, streamed in earlier, or an optimistic placeholder the server is
+// now confirming — it is replaced where it stands. Otherwise the incoming element
+// is inserted into the container at the position its id sorts to, so
+// out-of-order delivery still lands in id order. That ordering assumes
+// time-ordered ids (UUIDv7, ULID); with random ids the position is stable but
+// arbitrary. An element without an id goes last.
+
+export function place(incoming, container, { descending = false } = {}) {
+  const existing = incoming.id ? document.getElementById(incoming.id) : null
+  if (existing) {
+    existing.replaceWith(incoming)
+    return incoming
+  }
+
+  if (!container) return null
+
+  const successor = incoming.id
+    ? Array.from(container.children).find(
+        (child) => child.id && (descending ? child.id < incoming.id : child.id > incoming.id),
+      )
+    : null
+
+  container.insertBefore(incoming, successor ?? null)
+  return incoming
+}

data/app/assets/javascripts/unmagic/components/slash_menu.js

@@ -0,0 +1,186 @@
+// <unmagic-slash-menu trigger="/"> — commands offered on a slash in a text field,
+// rendered by `ai_chat_slash_menu`.
+//
+// Type the trigger where a word starts and the menu opens on every command; keep
+// typing to narrow it by prefix. Up and Down move (wrapping), Home and End jump,
+// Enter or Tab takes the selected one, Escape closes and leaves the text. While
+// it's open those keys are the menu's alone, so Enter can't send a half-typed
+// message out from under it. Picking writes "/name " where the token was.
+//
+// The server renders every item, so what can be offered is only ever what exists.
+// Focus stays in the field throughout: it is the WAI-ARIA combobox pattern, with
+// aria-expanded and aria-activedescendant kept true on the field.
+//
+//   for="message_content"   the field's id; otherwise the composer's field, or the
+//                           first textarea in the enclosing form
+//   trigger="/"             the character that opens it
+//   insert="%{trigger}%{name} "   what a pick writes
+//
+// Items are its [role=option] elements, named by data-name. It fires
+// unmagic-slash-menu:pick with the name, and closes before Turbo caches the page.
+
+class UnmagicSlashMenu extends HTMLElement {
+  #field = null
+
+  constructor() {
+    super()
+    // mousedown fires before the field blurs, so the cursor is still where the
+    // name has to go.
+    this.addEventListener("mousedown", (event) => {
+      const option = event.target instanceof Element && event.target.closest("[role=option]")
+      if (!option) return
+      event.preventDefault()
+      this.#write(option.dataset.name)
+    })
+  }
+
+  connectedCallback() {
+    this.#field = this.#resolveField()
+    const field = this.#field
+    if (field) {
+      field.setAttribute("role", "combobox")
+      field.setAttribute("aria-autocomplete", "list")
+      field.setAttribute("aria-expanded", "false")
+      if (this.#listbox) field.setAttribute("aria-controls", this.#listbox.id)
+      field.addEventListener("input", this.#search)
+      field.addEventListener("keydown", this.#navigate)
+      field.addEventListener("blur", this.close)
+    }
+    document.addEventListener("turbo:before-cache", this.close)
+    this.close()
+  }
+
+  disconnectedCallback() {
+    const field = this.#field
+    field?.removeEventListener("input", this.#search)
+    field?.removeEventListener("keydown", this.#navigate)
+    field?.removeEventListener("blur", this.close)
+    document.removeEventListener("turbo:before-cache", this.close)
+    this.#field = null
+  }
+
+  get open() {
+    return !this.hidden
+  }
+
+  close = () => {
+    this.hidden = true
+    this.#field?.setAttribute("aria-expanded", "false")
+    this.#field?.removeAttribute("aria-activedescendant")
+  }
+
+  get #listbox() {
+    return this.querySelector("[role=listbox]")
+  }
+
+  get #options() {
+    return Array.from(this.querySelectorAll("[role=option]"))
+  }
+
+  get #offered() {
+    return this.#options.filter((option) => !option.hidden)
+  }
+
+  get #selected() {
+    const offered = this.#offered
+    return offered.find((option) => option.getAttribute("aria-selected") === "true") ?? offered[0]
+  }
+
+  #resolveField() {
+    const id = this.getAttribute("for")
+    if (id) return document.getElementById(id)
+
+    const scope = this.closest(".UnmagicAIChatComposer") ?? this.closest("form")
+    return scope?.querySelector("[data-ai-chat-composer-field]") ?? scope?.querySelector("textarea")
+  }
+
+  // A trigger starting a word, and what has been typed since, anchored to the
+  // cursor: a slash in a path written further back isn't a command.
+  #token() {
+    const field = this.#field
+    const trigger = escape(this.getAttribute("trigger") || "/")
+    return field.value.slice(0, field.selectionStart).match(new RegExp(`(?:^|\\s)${trigger}([\\w-]*)$`))
+  }
+
+  #search = () => {
+    const token = this.#token()
+    if (!token) return this.close()
+
+    const typed = token[1].toLowerCase()
+    for (const option of this.#options) option.hidden = !option.dataset.name.toLowerCase().startsWith(typed)
+
+    const offered = this.#offered
+    if (offered.length === 0) return this.close()
+
+    this.hidden = false
+    this.#field.setAttribute("aria-expanded", "true")
+    this.#select(offered[0])
+  }
+
+  #navigate = (event) => {
+    if (!this.open || event.isComposing) return
+
+    const offered = this.#offered
+    const index = offered.indexOf(this.#selected)
+
+    switch (event.key) {
+      case "ArrowDown":
+        this.#select(offered[(index + 1) % offered.length])
+        break
+      case "ArrowUp":
+        this.#select(offered[(index - 1 + offered.length) % offered.length])
+        break
+      case "Home":
+        this.#select(offered[0])
+        break
+      case "End":
+        this.#select(offered[offered.length - 1])
+        break
+      case "Enter":
+      case "Tab":
+        if (event.shiftKey && event.key === "Enter") return
+        this.#write(this.#selected?.dataset.name)
+        break
+      case "Escape":
+        this.close()
+        break
+      default:
+        return
+    }
+
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+
+  #select(option) {
+    for (const other of this.#options) other.setAttribute("aria-selected", other === option ? "true" : "false")
+    if (!option) return
+    this.#field.setAttribute("aria-activedescendant", option.id)
+    option.scrollIntoView({ block: "nearest" })
+  }
+
+  #write(name) {
+    const token = name && this.#token()
+    if (!token) return this.close()
+
+    const field = this.#field
+    const trigger = this.getAttribute("trigger") || "/"
+    const template = this.getAttribute("insert") || "%{trigger}%{name} "
+    const written = template.replaceAll("%{trigger}", trigger).replaceAll("%{name}", name)
+    const cursor = field.selectionStart
+    const start = cursor - token[1].length - trigger.length
+
+    field.value = field.value.slice(0, start) + written + field.value.slice(cursor)
+    field.selectionStart = field.selectionEnd = start + written.length
+    this.close()
+    field.focus()
+    field.dispatchEvent(new Event("input", { bubbles: true }))
+    this.dispatchEvent(new CustomEvent("unmagic-slash-menu:pick", { bubbles: true, detail: { name } }))
+  }
+}
+
+function escape(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
+
+customElements.get("unmagic-slash-menu") || customElements.define("unmagic-slash-menu", UnmagicSlashMenu)

data/app/assets/javascripts/unmagic/components/sortable.js

@@ -0,0 +1,6 @@
+// Drag-and-drop ordering: `sortable_list` and `board` need this one import.
+//
+//   import "unmagic/components/sortable"
+import "unmagic/components/sortable_param"
+import "unmagic/components/sortable_list"
+import "unmagic/components/sortable_item"

data/app/assets/javascripts/unmagic/components/sortable_item.js

@@ -0,0 +1,122 @@
+// <unmagic-sortable-item key="…" data-sortable-rank="…"> — one item in an
+// <unmagic-sortable-list>, rendered by `sortable_list`'s item and `board`.
+//
+//   key                   names the record to the server
+//   data-sortable-rank    its rank, read as a neighbour's when another item drops
+//   data-sortable-label   what announcements call it; its text otherwise
+//
+// With a [data-sortable-handle] of its own inside (not one belonging to an item
+// nested in it), only a press on a handle drags it, straight away, and the
+// handle's own buttons and links stay clickable. Without one, the whole item
+// drags once the pointer has moved a few pixels, so a click on a link in it still
+// follows the link; a press in a text field never starts a drag. On a touch
+// screen an item without a handle lifts after a long press, so a swipe still
+// scrolls and a tap still taps. A handle with touch-action: none (the
+// sortable_handle grip) drags at once; any other handle waits for the long press
+// too, so it doesn't stop the page scrolling.
+//
+// The keyboard stop is its first focusable handle, or the item itself (given a
+// tabindex) when it has none. Space or Enter there picks it up; see
+// sortable_session.js for the rest.
+import { beginPointerDrag, beginKeyboardDrag, dragging, keyboardDragOf } from "unmagic/components/sortable_session"
+
+const TYPING = "input, textarea, select, [contenteditable]:not([contenteditable=false])"
+const INTERACTIVE = `a[href], button, summary, label, [role=button], ${TYPING}`
+
+class UnmagicSortableItem extends HTMLElement {
+  constructor() {
+    super()
+    this.addEventListener("pointerdown", this.#pointerdown)
+    this.addEventListener("keydown", this.#keydown)
+  }
+
+  // A drag moves the element, and a morph refresh may too, so this runs again each
+  // time; everything it does is safe to repeat. A morph also resets attributes to
+  // the server's markup without reconnecting, so it runs after every morph too.
+  connectedCallback() {
+    this.setUp()
+  }
+
+  setUp() {
+    const stop = this.keyboardStop
+    if (stop === this && !this.hasAttribute("tabindex")) this.tabIndex = 0
+
+    const list = this.list
+    if (list && !this.hasAttribute(DRAGGING_COPY)) {
+      const described = new Set((stop.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean))
+      described.add(list.instructionsId)
+      stop.setAttribute("aria-describedby", [...described].join(" "))
+    }
+  }
+
+  get key() {
+    return this.getAttribute("key")
+  }
+
+  get rank() {
+    return this.getAttribute("data-sortable-rank")
+  }
+
+  get label() {
+    return this.getAttribute("data-sortable-label") || this.textContent.replace(/\s+/g, " ").trim().slice(0, 80)
+  }
+
+  get list() {
+    return this.closest("unmagic-sortable-list")
+  }
+
+  get handles() {
+    return [...this.querySelectorAll("[data-sortable-handle]")].filter(
+      (handle) => handle.closest("unmagic-sortable-item") === this,
+    )
+  }
+
+  get keyboardStop() {
+    return this.handles.find((handle) => handle.matches("button, a[href], [tabindex]")) ?? this
+  }
+
+  #pointerdown = (event) => {
+    if (event.button !== 0 || dragging()) return
+    if (event.target.closest("unmagic-sortable-item") !== this) return
+
+    const handles = this.handles
+    const handle = event.target.closest("[data-sortable-handle]")
+    const own = handle && handles.includes(handle) ? handle : null
+    if (handles.length > 0 && !own) return
+
+    const control = event.target.closest(own ? INTERACTIVE : TYPING)
+    if (control && control !== own && this.contains(control)) return
+
+    // A handle drags at once, except by a finger on one that still lets the page
+    // scroll (touch-action other than none), which waits for a long press.
+    const scrolls = event.pointerType === "touch" && own && getComputedStyle(own).touchAction !== "none"
+    beginPointerDrag(this, event, { immediate: Boolean(own) && !scrolls })
+  }
+
+  #keydown = (event) => {
+    const drag = keyboardDragOf(this)
+    if (drag) return drag.key(event)
+    if (dragging() || (event.key !== " " && event.key !== "Enter")) return
+
+    const stop = this.keyboardStop
+    if (event.target !== stop) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    beginKeyboardDrag(this, stop)
+  }
+}
+
+const DRAGGING_COPY = "data-sortable-dragging"
+
+const INSTALLED = Symbol.for("unmagic.components.sortable_item")
+if (!document[INSTALLED]) {
+  document[INSTALLED] = true
+  document.addEventListener("turbo:morph", () => {
+    for (const item of document.querySelectorAll("unmagic-sortable-item")) item.setUp?.()
+  })
+}
+
+customElements.get("unmagic-sortable-item") || customElements.define("unmagic-sortable-item", UnmagicSortableItem)
+
+export { UnmagicSortableItem }