phlex-reactive 0.14.3 → 0.14.4

data/app/javascript/phlex/reactive/features/sortable.js

@@ -0,0 +1,463 @@
+// phlex/reactive/features/sortable — drag rows to reorder a list, or drag a
+// row in from another list, and send ONE declared action with the row and its
+// new position (issue #350). One of the feature modules the core imports on
+// demand (issue #275); in the default client it is part of the one file.
+//
+// The markup is the Ruby helpers' (Phlex::Reactive::Component::Sortable):
+//
+//   data-reactive-sortable="move"          a list; the action a drop calls
+//     -group / -handle / -name / -from / -params / -disabled / -busy / -messages
+//   data-reactive-sortable-source="name"   a list whose rows are COPIED in
+//   data-reactive-sortable-item='7'        a row and its JSON-typed key
+//
+// and what it sets while a drag is on, for the app's CSS:
+//
+//   data-reactive-sortable-active          on the list being dragged from/over
+//   data-reactive-sortable-dragging        on the dragged row (or its clone)
+//   data-reactive-sortable-placeholder     the gap that marks the drop point
+//
+// Input is pointer events, not HTML5 drag and drop: mouse, pen and touch
+// behave the same, the dragged row is the real row under the pointer (no
+// ghost image), and the keyboard gets the same moves. A drag starts after a
+// 4 px move, or on touch after a 200 ms press, so taps, clicks and scrolling
+// still work.
+//
+// A drop moves the row in the DOM at once (a drag-in inserts nothing: the
+// target's action decides and its reply renders the row), then sends the
+// action through the root's own pipeline (core.proceed): the signed token,
+// the request queue, the busy state, the reply. The row goes back to where it
+// was when the request fails, is vetoed, or its reply does not render the
+// list. A reply that does render it (a morph) puts the rows in the server's
+// order: Idiomorph matches them by id.
+//
+// The geometry is every element's own getBoundingClientRect() — nothing is
+// cached across moves — so a test without layout stubs it per element.
+//
+// This module never imports the core: it reaches a controller through the
+// `core` handle (core.owns, core.proceed).
+
+const LIST = "[data-reactive-sortable]"
+const SOURCE = "[data-reactive-sortable-source]"
+const ITEM = "[data-reactive-sortable-item]"
+const ROOT = '[data-controller~="reactive"]'
+const FIELD = "input,textarea,select,[contenteditable]"
+const THRESHOLD = 4 // px a press must move before it is a drag
+const PRESS_MS = 200 // how long a touch is held before it picks a row up
+const EDGE = 40 // px from an edge where auto-scroll starts
+const SPEED = 12 // px auto-scroll moves per frame
+
+// controller -> the removals of what connect() added.
+const wired = new WeakMap()
+// reactive root element -> its core handle: a drop into a list of ANOTHER root
+// (a drag-in, a move between roots of one group) sends through that root.
+const cores = new WeakMap()
+// The one drag on the page, by pointer or keyboard, or null.
+let drag = null
+// The page's live region (re-created after a Turbo visit replaced <body>),
+// and the frame that will write its next words.
+let live
+let speaking
+
+export function connect(controller, core) {
+  const root = controller.element
+  cores.set(root, core)
+  // The live region is on the page, empty, before anything is announced: a
+  // screen reader often ignores a region that arrives already holding words.
+  liveRegion()
+  const press = (event) => pointerDown(event, core)
+  const key = (event) => keyDown(event, core)
+  root.addEventListener("pointerdown", press)
+  root.addEventListener("keydown", key)
+  wired.set(controller, () => {
+    root.removeEventListener("pointerdown", press)
+    root.removeEventListener("keydown", key)
+  })
+}
+
+export function disconnect(controller) {
+  wired.get(controller)?.()
+  wired.delete(controller)
+  cores.delete(controller.element)
+  // A root that leaves mid-drag (a replace, a navigation) ends its drag.
+  if (drag && rootOf(drag.origin) === controller.element) cancel()
+}
+
+const attr = (el, name = "") => el?.getAttribute?.(`data-reactive-sortable${name}`)
+const json = (value, fallback) => {
+  try {
+    return value == null ? fallback : JSON.parse(value)
+  } catch {
+    return fallback
+  }
+}
+const rootOf = (el) => el?.closest?.(ROOT)
+const containerOf = (item) => item.parentElement?.closest(`${LIST},${SOURCE}`)
+// A list's rows: its items whose closest list is this one (a list nested in a
+// row keeps its own rows), minus the one being dragged.
+const itemsOf = (list) =>
+  [...list.querySelectorAll(ITEM)].filter((el) => el !== drag?.row && containerOf(el) === list)
+const keyOf = (item) => json(attr(item, "-item"), null)
+const disabled = (el) => attr(el, "-disabled") === "true"
+const inside = (el, x, y) => {
+  const rect = el.getBoundingClientRect()
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+}
+// The lists a row from `origin` can be dropped into: every enabled sortable of
+// its group whose root has a core, or (no group) the list itself.
+const targetsFor = (origin) => {
+  const group = attr(origin, "-group")
+  if (!group) return origin.matches(LIST) ? [origin] : []
+  return [...document.querySelectorAll(LIST)].filter(
+    (list) => attr(list, "-group") === group && !disabled(list) && cores.has(rootOf(list)),
+  )
+}
+
+// The row a gesture on `target` may pick up, or nothing: a row of a list this
+// root owns (a nested root's rows are its own, issue #15), neither of them
+// disabled, and no request of that root in flight.
+function grab(target, core) {
+  const item = target?.closest?.(ITEM)
+  const list = item && containerOf(item)
+  if (drag || !list || !core.owns(list) || disabled(list) || disabled(item)) return
+  if (rootOf(list)?.getAttribute("aria-busy") === "true") return
+  return { item, list }
+}
+
+// --- Pointer ----------------------------------------------------------------
+function pointerDown(event, core) {
+  if (event.button > 0 || event.isPrimary === false) return
+  const grabbed = grab(event.target, core)
+  if (!grabbed) return
+  const handle = attr(grabbed.list, "-handle")
+  if (handle ? !grabbed.item.contains(event.target.closest(handle)) : event.target.closest(FIELD)) return
+
+  const x0 = event.clientX
+  const y0 = event.clientY
+  // Only the pointer that pressed drives the drag: a second finger is not it.
+  const mine = (e) => e.pointerId === event.pointerId
+  const touch = event.pointerType === "touch"
+  let ready = !touch
+  const timer = touch && setTimeout(() => (ready = true), PRESS_MS)
+  const move = (e) => {
+    if (!mine(e)) return
+    if (drag) return follow(e.clientX, e.clientY)
+    if (Math.abs(e.clientX - x0) <= THRESHOLD && Math.abs(e.clientY - y0) <= THRESHOLD) return
+    // A finger that moves before the press is up is scrolling.
+    if (!ready) return end()
+    start(grabbed, core, e)
+    follow(e.clientX, e.clientY)
+  }
+  // While a touch drag is on, the page must not scroll under it.
+  const hold = (e) => drag && e.cancelable && e.preventDefault()
+  const up = (e) => {
+    if (!mine(e)) return
+    end()
+    if (drag) suppressClick(), drop()
+  }
+  const abort = (e) => {
+    if (e.type === "pointercancel" && !mine(e)) return
+    end()
+    if (drag) cancel()
+  }
+  const escape = (e) => e.key === "Escape" && drag && (e.preventDefault(), abort(e))
+  const on = [
+    ["pointermove", move],
+    ["pointerup", up],
+    ["pointercancel", abort],
+    ["keydown", escape],
+    ["touchmove", hold, { passive: false }],
+  ]
+  for (const [type, fn, options] of on) document.addEventListener(type, fn, options)
+  function end() {
+    clearTimeout(timer)
+    for (const [type, fn] of on) document.removeEventListener(type, fn)
+  }
+}
+
+// The click a pointer drag ends with (over a button in the row) is not one.
+function suppressClick() {
+  const stop = (event) => (event.preventDefault(), event.stopPropagation())
+  window.addEventListener("click", stop, { capture: true, once: true })
+  setTimeout(() => window.removeEventListener("click", stop, { capture: true }))
+}
+
+// Lift the row (a source's row: a clone of it) under the pointer, and leave
+// a placeholder of its height where it was.
+function start({ item, list }, core, event) {
+  const rect = item.getBoundingClientRect()
+  const source = list.matches(SOURCE)
+  const row = source ? item.cloneNode(true) : item
+  if (source) {
+    // A clone must not connect a controller or duplicate an id.
+    for (const el of [row, ...row.querySelectorAll("[id],[data-controller]")]) {
+      el.removeAttribute("id")
+      el.removeAttribute("data-controller")
+    }
+    document.body.append(row)
+  }
+  const placeholder = document.createElement(item.tagName)
+  placeholder.setAttribute("data-reactive-sortable-placeholder", "")
+  placeholder.setAttribute("aria-hidden", "true")
+  placeholder.style.height = `${rect.height}px`
+  drag = begin({ core, item, row, origin: list, source, placeholder, style: row.getAttribute("style") })
+  drag.dx = event.clientX - rect.left
+  drag.dy = event.clientY - rect.top
+  drag.select = document.documentElement.style.userSelect
+  document.documentElement.style.userSelect = "none"
+  if (!source) item.before(placeholder)
+  Object.assign(row.style, {
+    position: "fixed",
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    margin: "0",
+    boxSizing: "border-box",
+    zIndex: "2147483647",
+    pointerEvents: "none",
+  })
+}
+
+// The drag record both inputs share; marks the row and its list.
+function begin(record) {
+  const { row, origin, source } = record
+  record.index = itemsOf(origin).indexOf(record.item)
+  record.target = source ? null : origin
+  row.setAttribute("data-reactive-sortable-dragging", "")
+  activate(origin, true)
+  return record
+}
+
+const activate = (list, on) => list?.toggleAttribute("data-reactive-sortable-active", on)
+
+// Put `el` at `index` among a list's rows (`items`, which leave `el` out):
+// before the row there, or after the last one, or into the empty list.
+function insertAt(list, items, index, el) {
+  if (items[index]) items[index].before(el)
+  else if (items.length) items.at(-1).after(el)
+  else list.append(el)
+}
+
+function follow(x, y) {
+  drag.x = x
+  drag.y = y
+  drag.row.style.left = `${x - drag.dx}px`
+  drag.row.style.top = `${y - drag.dy}px`
+  const list = targetsFor(drag.origin).find((el) => inside(el, x, y))
+  if (list) place(list, x, y)
+  // Off every list, a drag-in has nowhere to land; a move keeps its last spot.
+  else if (drag.source) retarget(null), drag.placeholder.remove()
+  scroll(x, y)
+}
+
+function retarget(list) {
+  if (drag.target !== drag.origin) activate(drag.target, false)
+  drag.target = list
+  activate(list, true)
+}
+
+// The placeholder goes before the first row whose middle is past the pointer.
+// A list whose first two rows share a top is laid out across, not down.
+function place(list, x, y) {
+  retarget(list)
+  const items = itemsOf(list)
+  const [a, b] = items.map((el) => el.getBoundingClientRect())
+  const across = b && a.top === b.top && a.left !== b.left
+  const index = items.findIndex((el) => {
+    const rect = el.getBoundingClientRect()
+    return across ? x < rect.left + rect.width / 2 : y < rect.top + rect.height / 2
+  })
+  insertAt(list, items, index < 0 ? items.length : index, drag.placeholder)
+}
+
+// Near the top or bottom edge of the list being dragged over (when it
+// scrolls) or of the window, scroll one step a frame until the pointer leaves
+// the edge.
+function scroll(x, y) {
+  const list = drag.target ?? drag.origin
+  const rect = list.getBoundingClientRect()
+  const scrolls = list.scrollHeight > list.clientHeight
+  drag.vy = scrolls ? (y < rect.top + EDGE ? -SPEED : y > rect.bottom - EDGE ? SPEED : 0) : 0
+  drag.wy = y < EDGE ? -SPEED : y > window.innerHeight - EDGE ? SPEED : 0
+  if ((drag.vy || drag.wy) && !drag.raf) {
+    const step = () => {
+      if (!drag || !(drag.vy || drag.wy)) return drag && (drag.raf = 0)
+      ;(drag.target ?? drag.origin).scrollTop += drag.vy
+      if (drag.wy) window.scrollBy(0, drag.wy)
+      follow(drag.x, drag.y)
+      drag.raf = requestAnimationFrame(step)
+    }
+    drag.raf = requestAnimationFrame(step)
+  }
+}
+
+// --- Keyboard ----------------------------------------------------------------
+// A focused row: Space/Enter picks it up, the arrows move it (← / → into the
+// previous / next list of its group), Space/Enter drops it, Escape (or Tab)
+// puts it back. Each step is announced in the list's own words.
+function keyDown(event, core) {
+  const key = event.key
+  if (drag?.keyboard) {
+    // (A nested root's row bubbles to every ancestor root: only the root that
+    // picked the row up answers.)
+    if (event.target !== drag.row || drag.core !== core) return
+    const handled = {
+      " ": drop,
+      Enter: drop,
+      Escape: cancel,
+      Tab: cancel,
+      ArrowUp: () => step(-1),
+      ArrowDown: () => step(1),
+      ArrowLeft: () => hop(-1),
+      ArrowRight: () => hop(1),
+    }[key]
+    if (!handled) return
+    if (key !== "Tab") event.preventDefault()
+    return handled()
+  }
+  if (key !== " " && key !== "Enter") return
+  const grabbed = grab(event.target, core)
+  if (!grabbed || grabbed.item !== event.target || grabbed.list.matches(SOURCE)) return
+  event.preventDefault()
+  drag = begin({ core, keyboard: true, item: grabbed.item, row: grabbed.item, origin: grabbed.list, style: grabbed.item.getAttribute("style") })
+  announce("picked")
+}
+
+function step(by) {
+  const items = itemsOf(drag.target)
+  // (itemsOf leaves the dragged row out: it sits before items[index].)
+  const to = position() + by
+  // Past either end the row stays, and where it is is said again.
+  if (to >= 0 && to <= items.length) insertAt(drag.target, items, to, drag.row)
+  moved()
+}
+
+function hop(by) {
+  const lists = targetsFor(drag.origin)
+  const list = lists[lists.indexOf(drag.target) + by]
+  if (list) {
+    const index = position()
+    retarget(list)
+    insertAt(list, itemsOf(list), index, drag.row)
+  }
+  moved()
+}
+
+function moved() {
+  drag.row.focus?.()
+  announce("moved")
+}
+
+// The dragged row's index in its target list (the drop's `position`).
+function position() {
+  const items = itemsOf(drag.target)
+  const row = drag.keyboard ? drag.row : drag.placeholder
+  // (itemsOf leaves the dragged row out: count the rows before it.)
+  return items.filter((el) => el.compareDocumentPosition(row) & 4).length
+}
+
+function liveRegion() {
+  if (!live?.isConnected) {
+    live = document.createElement("div")
+    live.setAttribute("aria-live", "polite")
+    live.setAttribute("data-reactive-sortable-live", "")
+    live.style.cssText = "position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap"
+    document.body.append(live)
+  }
+  return live
+}
+
+// Clear the region now and write the words on the next frame, so a change is
+// heard even when the words are the same as the last ones.
+function announce(name) {
+  const list = drag.target ?? drag.origin
+  const words = (json(attr(list, "-messages"), {})[name] ?? "")
+    .replaceAll("{position}", position() + 1)
+    .replaceAll("{count}", itemsOf(list).length + 1)
+  const region = liveRegion()
+  region.textContent = ""
+  cancelAnimationFrame(speaking)
+  speaking = requestAnimationFrame(() => (region.textContent = words))
+}
+
+// --- Drop / cancel -----------------------------------------------------------
+// Settle the row, then send the target's action: a move that changed nothing
+// sends nothing. Returns before the reply; the row goes back if it fails.
+function drop() {
+  const record = drag
+  const { target, origin, source, row, placeholder } = record
+  const landed = target && (source ? placeholder.isConnected : true)
+  const index = landed ? position() : -1
+  const after = landed ? keyOf(itemsOf(target)[index - 1]) : null
+  if (record.keyboard) announce("dropped")
+  if (!source && placeholder) placeholder.replaceWith(row)
+  settle(record)
+  if (!landed || (target === origin && index === record.index)) return
+
+  const from = target === origin ? "self" : source ? attr(origin, "-source") : (attr(origin, "-name") ?? "list")
+  const action = json(attr(target, "-from"), {})[from] ?? attr(target)
+  const params = { ...json(attr(target, "-params"), {}), item: keyOf(record.item), position: index, after, from }
+  // The list and its ancestors: a reply stream that replaces or updates one
+  // of them (by id, or by a `targets:` selector) rendered the list (read now —
+  // a replace detaches it).
+  const chain = []
+  for (let el = target; el; el = el.parentElement) chain.push(el)
+  const sent = cores.get(rootOf(target))?.proceed(target, action, JSON.stringify(params), json(attr(target, "-busy")))
+  if (source) return
+  Promise.resolve(sent).then((html) => renders(html, chain) || restore(record))
+}
+
+function renders(html, chain) {
+  if (!html) return false
+  const template = document.createElement("template")
+  template.innerHTML = html
+  return [...template.content.querySelectorAll("turbo-stream")].some(
+    (stream) => /^(replace|update)$/.test(stream.getAttribute("action")) && hits(stream, chain),
+  )
+}
+
+function hits(stream, chain) {
+  const target = stream.getAttribute("target")
+  if (target) return chain.some((el) => el.id === target)
+  const selector = stream.getAttribute("targets")
+  try {
+    return Boolean(selector) && chain.some((el) => el.matches(selector))
+  } catch {
+    return false // an invalid selector renders nothing
+  }
+}
+
+function cancel() {
+  const record = drag
+  if (record.keyboard) announce("cancelled")
+  record.placeholder?.remove()
+  settle(record)
+  restore(record)
+}
+
+// Put a moved row back at its original index in its original list.
+function restore({ row, origin, index, source }) {
+  if (source || !row.isConnected) return
+  insertAt(
+    origin,
+    itemsOf(origin).filter((el) => el !== row),
+    index,
+    row,
+  )
+  if (row === document.activeElement) row.focus?.()
+}
+
+// Undo everything the drag set: the row's style and marker, the lists'
+// markers, the clone, the placeholder, the frame loop, the text selection.
+function settle(record) {
+  const { row, origin, target, source, style, placeholder } = record
+  drag = null
+  if (record.raf) cancelAnimationFrame(record.raf)
+  row.removeAttribute("data-reactive-sortable-dragging")
+  if (source) row.remove()
+  else if (!record.keyboard) style == null ? row.removeAttribute("style") : row.setAttribute("style", style)
+  placeholder?.remove()
+  activate(origin, false)
+  activate(target, false)
+  if (!record.keyboard) document.documentElement.style.userSelect = record.select ?? ""
+}

data/app/javascript/phlex/reactive/features/sortable.min.js

@@ -0,0 +1,4 @@
+var R=new WeakMap,v=new WeakMap,o=null,m,F;function it(t,e){let n=t.element;v.set(n,e),j();let r=(s)=>Q(s,e),i=(s)=>nt(s,e);n.addEventListener("pointerdown",r),n.addEventListener("keydown",i),R.set(t,()=>{n.removeEventListener("pointerdown",r),n.removeEventListener("keydown",i)})}function ct(t){if(R.get(t)?.(),R.delete(t),v.delete(t.element),o&&A(o.origin)===t.element)w()}var u=(t,e="")=>t?.getAttribute?.(`data-reactive-sortable${e}`),b=(t,e)=>{try{return t==null?e:JSON.parse(t)}catch{return e}},A=(t)=>t?.closest?.('[data-controller~="reactive"]'),U=(t)=>t.parentElement?.closest("[data-reactive-sortable],[data-reactive-sortable-source]"),p=(t)=>[...t.querySelectorAll("[data-reactive-sortable-item]")].filter((e)=>e!==o?.row&&U(e)===t),q=(t)=>b(u(t,"-item"),null),C=(t)=>u(t,"-disabled")==="true",K=(t,e,n)=>{let r=t.getBoundingClientRect();return e>=r.left&&e<=r.right&&n>=r.top&&n<=r.bottom},X=(t)=>{let e=u(t,"-group");if(!e)return t.matches("[data-reactive-sortable]")?[t]:[];return[...document.querySelectorAll("[data-reactive-sortable]")].filter((n)=>u(n,"-group")===e&&!C(n)&&v.has(A(n)))};function Y(t,e){let n=t?.closest?.("[data-reactive-sortable-item]"),r=n&&U(n);if(o||!r||!e.owns(r)||C(r)||C(n))return;if(A(r)?.getAttribute("aria-busy")==="true")return;return{item:n,list:r}}function Q(t,e){if(t.button>0||t.isPrimary===!1)return;let n=Y(t.target,e);if(!n)return;let r=u(n.list,"-handle");if(r?!n.item.contains(t.target.closest(r)):t.target.closest("input,textarea,select,[contenteditable]"))return;let{clientX:i,clientY:s}=t,a=(c)=>c.pointerId===t.pointerId,l=t.pointerType==="touch",f=!l,d=l&&setTimeout(()=>f=!0,200),k=(c)=>{if(!a(c))return;if(o)return I(c.clientX,c.clientY);if(Math.abs(c.clientX-i)<=4&&Math.abs(c.clientY-s)<=4)return;if(!f)return O();Z(n,e,c),I(c.clientX,c.clientY)},T=(c)=>o&&c.cancelable&&c.preventDefault(),E=(c)=>{if(!a(c))return;if(O(),o)V(),P()},y=(c)=>{if(c.type==="pointercancel"&&!a(c))return;if(O(),o)w()},M=[["pointermove",k],["pointerup",E],["pointercancel",y],["keydown",(c)=>c.key==="Escape"&&o&&(c.preventDefault(),y(c))],["touchmove",T,{passive:!1}]];for(let[c,L,_]of M)document.addEventListener(c,L,_);function O(){clearTimeout(d);for(let[c,L]of M)document.removeEventListener(c,L)}}function V(){let t=(e)=>(e.preventDefault(),e.stopPropagation());window.addEventListener("click",t,{capture:!0,once:!0}),setTimeout(()=>window.removeEventListener("click",t,{capture:!0}))}function Z({item:t,list:e},n,r){let i=t.getBoundingClientRect(),s=e.matches("[data-reactive-sortable-source]"),a=s?t.cloneNode(!0):t;if(s){for(let f of[a,...a.querySelectorAll("[id],[data-controller]")])f.removeAttribute("id"),f.removeAttribute("data-controller");document.body.append(a)}let l=document.createElement(t.tagName);if(l.setAttribute("data-reactive-sortable-placeholder",""),l.setAttribute("aria-hidden","true"),l.style.height=`${i.height}px`,o=N({core:n,item:t,row:a,origin:e,source:s,placeholder:l,style:a.getAttribute("style")}),o.dx=r.clientX-i.left,o.dy=r.clientY-i.top,o.select=document.documentElement.style.userSelect,document.documentElement.style.userSelect="none",!s)t.before(l);Object.assign(a.style,{position:"fixed",left:`${i.left}px`,top:`${i.top}px`,width:`${i.width}px`,height:`${i.height}px`,margin:"0",boxSizing:"border-box",zIndex:"2147483647",pointerEvents:"none"})}function N(t){let{row:e,origin:n,source:r}=t;return t.index=p(n).indexOf(t.item),t.target=r?null:n,e.setAttribute("data-reactive-sortable-dragging",""),h(n,!0),t}var h=(t,e)=>t?.toggleAttribute("data-reactive-sortable-active",e);function S(t,e,n,r){if(e[n])e[n].before(r);else if(e.length)e.at(-1).after(r);else t.append(r)}function I(t,e){o.x=t,o.y=e,o.row.style.left=`${t-o.dx}px`,o.row.style.top=`${e-o.dy}px`;let n=X(o.origin).find((r)=>K(r,t,e));if(n)tt(n,t,e);else if(o.source)H(null),o.placeholder.remove();et(t,e)}function H(t){if(o.target!==o.origin)h(o.target,!1);o.target=t,h(t,!0)}function tt(t,e,n){H(t);let r=p(t),[i,s]=r.map((f)=>f.getBoundingClientRect()),a=s&&i.top===s.top&&i.left!==s.left,l=r.findIndex((f)=>{let d=f.getBoundingClientRect();return a?e<d.left+d.width/2:n<d.top+d.height/2});S(t,r,l<0?r.length:l,o.placeholder)}function et(t,e){let n=o.target??o.origin,r=n.getBoundingClientRect(),i=n.scrollHeight>n.clientHeight;if(o.vy=i?e<r.top+40?-12:e>r.bottom-40?12:0:0,o.wy=e<40?-12:e>window.innerHeight-40?12:0,(o.vy||o.wy)&&!o.raf){let s=()=>{if(!o||!(o.vy||o.wy))return o&&(o.raf=0);if((o.target??o.origin).scrollTop+=o.vy,o.wy)window.scrollBy(0,o.wy);I(o.x,o.y),o.raf=requestAnimationFrame(s)};o.raf=requestAnimationFrame(s)}}function nt(t,e){let n=t.key;if(o?.keyboard){if(t.target!==o.row||o.core!==e)return;let i={" ":P,Enter:P,Escape:w,Tab:w,ArrowUp:()=>B(-1),ArrowDown:()=>B(1),ArrowLeft:()=>G(-1),ArrowRight:()=>G(1)}[n];if(!i)return;if(n!=="Tab")t.preventDefault();return i()}if(n!==" "&&n!=="Enter")return;let r=Y(t.target,e);if(!r||r.item!==t.target||r.list.matches("[data-reactive-sortable-source]"))return;t.preventDefault(),o=N({core:e,keyboard:!0,item:r.item,row:r.item,origin:r.list,style:r.item.getAttribute("style")}),D("picked")}function B(t){let e=p(o.target),n=x()+t;if(n>=0&&n<=e.length)S(o.target,e,n,o.row);W()}function G(t){let e=X(o.origin),n=e[e.indexOf(o.target)+t];if(n){let r=x();H(n),S(n,p(n),r,o.row)}W()}function W(){o.row.focus?.(),D("moved")}function x(){let t=p(o.target),e=o.keyboard?o.row:o.placeholder;return t.filter((n)=>n.compareDocumentPosition(e)&4).length}function j(){if(!m?.isConnected)m=document.createElement("div"),m.setAttribute("aria-live","polite"),m.setAttribute("data-reactive-sortable-live",""),m.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap",document.body.append(m);return m}function D(t){let e=o.target??o.origin,n=(b(u(e,"-messages"),{})[t]??"").replaceAll("{position}",x()+1).replaceAll("{count}",p(e).length+1),r=j();r.textContent="",cancelAnimationFrame(F),F=requestAnimationFrame(()=>r.textContent=n)}function P(){let t=o,{target:e,origin:n,source:r,row:i,placeholder:s}=t,a=e&&(r?s.isConnected:!0),l=a?x():-1,f=a?q(p(e)[l-1]):null;if(t.keyboard)D("dropped");if(!r&&s)s.replaceWith(i);if(J(t),!a||e===n&&l===t.index)return;let d=e===n?"self":r?u(n,"-source"):u(n,"-name")??"list",k=b(u(e,"-from"),{})[d]??u(e),T={...b(u(e,"-params"),{}),item:q(t.item),position:l,after:f,from:d},E=[];for(let g=e;g;g=g.parentElement)E.push(g);let y=v.get(A(e))?.proceed(e,k,JSON.stringify(T),b(u(e,"-busy")));if(r)return;Promise.resolve(y).then((g)=>ot(g,E)||z(t))}function ot(t,e){if(!t)return!1;let n=document.createElement("template");return n.innerHTML=t,[...n.content.querySelectorAll("turbo-stream")].some((r)=>/^(replace|update)$/.test(r.getAttribute("action"))&&rt(r,e))}function rt(t,e){let n=t.getAttribute("target");if(n)return e.some((i)=>i.id===n);let r=t.getAttribute("targets");try{return Boolean(r)&&e.some((i)=>i.matches(r))}catch{return!1}}function w(){let t=o;if(t.keyboard)D("cancelled");t.placeholder?.remove(),J(t),z(t)}function z({row:t,origin:e,index:n,source:r}){if(r||!t.isConnected)return;if(S(e,p(e).filter((i)=>i!==t),n,t),t===document.activeElement)t.focus?.()}function J(t){let{row:e,origin:n,target:r,source:i,style:s,placeholder:a}=t;if(o=null,t.raf)cancelAnimationFrame(t.raf);if(e.removeAttribute("data-reactive-sortable-dragging"),i)e.remove();else if(!t.keyboard)s==null?e.removeAttribute("style"):e.setAttribute("style",s);if(a?.remove(),h(n,!1),h(r,!1),!t.keyboard)document.documentElement.style.userSelect=t.select??""}export{it as connect,ct as disconnect};
+
+//# debugId=2B87FA8B1177915764756E2164756E21
+//# sourceMappingURL=sortable.min.js.map

data/app/javascript/phlex/reactive/features/sortable.min.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["features/sortable.js"],
+  "sourcesContent": [
+    "// phlex/reactive/features/sortable — drag rows to reorder a list, or drag a\n// row in from another list, and send ONE declared action with the row and its\n// new position (issue #350). One of the feature modules the core imports on\n// demand (issue #275); in the default client it is part of the one file.\n//\n// The markup is the Ruby helpers' (Phlex::Reactive::Component::Sortable):\n//\n//   data-reactive-sortable=\"move\"          a list; the action a drop calls\n//     -group / -handle / -name / -from / -params / -disabled / -busy / -messages\n//   data-reactive-sortable-source=\"name\"   a list whose rows are COPIED in\n//   data-reactive-sortable-item='7'        a row and its JSON-typed key\n//\n// and what it sets while a drag is on, for the app's CSS:\n//\n//   data-reactive-sortable-active          on the list being dragged from/over\n//   data-reactive-sortable-dragging        on the dragged row (or its clone)\n//   data-reactive-sortable-placeholder     the gap that marks the drop point\n//\n// Input is pointer events, not HTML5 drag and drop: mouse, pen and touch\n// behave the same, the dragged row is the real row under the pointer (no\n// ghost image), and the keyboard gets the same moves. A drag starts after a\n// 4 px move, or on touch after a 200 ms press, so taps, clicks and scrolling\n// still work.\n//\n// A drop moves the row in the DOM at once (a drag-in inserts nothing: the\n// target's action decides and its reply renders the row), then sends the\n// action through the root's own pipeline (core.proceed): the signed token,\n// the request queue, the busy state, the reply. The row goes back to where it\n// was when the request fails, is vetoed, or its reply does not render the\n// list. A reply that does render it (a morph) puts the rows in the server's\n// order: Idiomorph matches them by id.\n//\n// The geometry is every element's own getBoundingClientRect() — nothing is\n// cached across moves — so a test without layout stubs it per element.\n//\n// This module never imports the core: it reaches a controller through the\n// `core` handle (core.owns, core.proceed).\n\nconst LIST = \"[data-reactive-sortable]\"\nconst SOURCE = \"[data-reactive-sortable-source]\"\nconst ITEM = \"[data-reactive-sortable-item]\"\nconst ROOT = '[data-controller~=\"reactive\"]'\nconst FIELD = \"input,textarea,select,[contenteditable]\"\nconst THRESHOLD = 4 // px a press must move before it is a drag\nconst PRESS_MS = 200 // how long a touch is held before it picks a row up\nconst EDGE = 40 // px from an edge where auto-scroll starts\nconst SPEED = 12 // px auto-scroll moves per frame\n\n// controller -> the removals of what connect() added.\nconst wired = new WeakMap()\n// reactive root element -> its core handle: a drop into a list of ANOTHER root\n// (a drag-in, a move between roots of one group) sends through that root.\nconst cores = new WeakMap()\n// The one drag on the page, by pointer or keyboard, or null.\nlet drag = null\n// The page's live region (re-created after a Turbo visit replaced <body>),\n// and the frame that will write its next words.\nlet live\nlet speaking\n\nexport function connect(controller, core) {\n  const root = controller.element\n  cores.set(root, core)\n  // The live region is on the page, empty, before anything is announced: a\n  // screen reader often ignores a region that arrives already holding words.\n  liveRegion()\n  const press = (event) => pointerDown(event, core)\n  const key = (event) => keyDown(event, core)\n  root.addEventListener(\"pointerdown\", press)\n  root.addEventListener(\"keydown\", key)\n  wired.set(controller, () => {\n    root.removeEventListener(\"pointerdown\", press)\n    root.removeEventListener(\"keydown\", key)\n  })\n}\n\nexport function disconnect(controller) {\n  wired.get(controller)?.()\n  wired.delete(controller)\n  cores.delete(controller.element)\n  // A root that leaves mid-drag (a replace, a navigation) ends its drag.\n  if (drag && rootOf(drag.origin) === controller.element) cancel()\n}\n\nconst attr = (el, name = \"\") => el?.getAttribute?.(`data-reactive-sortable${name}`)\nconst json = (value, fallback) => {\n  try {\n    return value == null ? fallback : JSON.parse(value)\n  } catch {\n    return fallback\n  }\n}\nconst rootOf = (el) => el?.closest?.(ROOT)\nconst containerOf = (item) => item.parentElement?.closest(`${LIST},${SOURCE}`)\n// A list's rows: its items whose closest list is this one (a list nested in a\n// row keeps its own rows), minus the one being dragged.\nconst itemsOf = (list) =>\n  [...list.querySelectorAll(ITEM)].filter((el) => el !== drag?.row && containerOf(el) === list)\nconst keyOf = (item) => json(attr(item, \"-item\"), null)\nconst disabled = (el) => attr(el, \"-disabled\") === \"true\"\nconst inside = (el, x, y) => {\n  const rect = el.getBoundingClientRect()\n  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom\n}\n// The lists a row from `origin` can be dropped into: every enabled sortable of\n// its group whose root has a core, or (no group) the list itself.\nconst targetsFor = (origin) => {\n  const group = attr(origin, \"-group\")\n  if (!group) return origin.matches(LIST) ? [origin] : []\n  return [...document.querySelectorAll(LIST)].filter(\n    (list) => attr(list, \"-group\") === group && !disabled(list) && cores.has(rootOf(list)),\n  )\n}\n\n// The row a gesture on `target` may pick up, or nothing: a row of a list this\n// root owns (a nested root's rows are its own, issue #15), neither of them\n// disabled, and no request of that root in flight.\nfunction grab(target, core) {\n  const item = target?.closest?.(ITEM)\n  const list = item && containerOf(item)\n  if (drag || !list || !core.owns(list) || disabled(list) || disabled(item)) return\n  if (rootOf(list)?.getAttribute(\"aria-busy\") === \"true\") return\n  return { item, list }\n}\n\n// --- Pointer ----------------------------------------------------------------\nfunction pointerDown(event, core) {\n  if (event.button > 0 || event.isPrimary === false) return\n  const grabbed = grab(event.target, core)\n  if (!grabbed) return\n  const handle = attr(grabbed.list, \"-handle\")\n  if (handle ? !grabbed.item.contains(event.target.closest(handle)) : event.target.closest(FIELD)) return\n\n  const x0 = event.clientX\n  const y0 = event.clientY\n  // Only the pointer that pressed drives the drag: a second finger is not it.\n  const mine = (e) => e.pointerId === event.pointerId\n  const touch = event.pointerType === \"touch\"\n  let ready = !touch\n  const timer = touch && setTimeout(() => (ready = true), PRESS_MS)\n  const move = (e) => {\n    if (!mine(e)) return\n    if (drag) return follow(e.clientX, e.clientY)\n    if (Math.abs(e.clientX - x0) <= THRESHOLD && Math.abs(e.clientY - y0) <= THRESHOLD) return\n    // A finger that moves before the press is up is scrolling.\n    if (!ready) return end()\n    start(grabbed, core, e)\n    follow(e.clientX, e.clientY)\n  }\n  // While a touch drag is on, the page must not scroll under it.\n  const hold = (e) => drag && e.cancelable && e.preventDefault()\n  const up = (e) => {\n    if (!mine(e)) return\n    end()\n    if (drag) suppressClick(), drop()\n  }\n  const abort = (e) => {\n    if (e.type === \"pointercancel\" && !mine(e)) return\n    end()\n    if (drag) cancel()\n  }\n  const escape = (e) => e.key === \"Escape\" && drag && (e.preventDefault(), abort(e))\n  const on = [\n    [\"pointermove\", move],\n    [\"pointerup\", up],\n    [\"pointercancel\", abort],\n    [\"keydown\", escape],\n    [\"touchmove\", hold, { passive: false }],\n  ]\n  for (const [type, fn, options] of on) document.addEventListener(type, fn, options)\n  function end() {\n    clearTimeout(timer)\n    for (const [type, fn] of on) document.removeEventListener(type, fn)\n  }\n}\n\n// The click a pointer drag ends with (over a button in the row) is not one.\nfunction suppressClick() {\n  const stop = (event) => (event.preventDefault(), event.stopPropagation())\n  window.addEventListener(\"click\", stop, { capture: true, once: true })\n  setTimeout(() => window.removeEventListener(\"click\", stop, { capture: true }))\n}\n\n// Lift the row (a source's row: a clone of it) under the pointer, and leave\n// a placeholder of its height where it was.\nfunction start({ item, list }, core, event) {\n  const rect = item.getBoundingClientRect()\n  const source = list.matches(SOURCE)\n  const row = source ? item.cloneNode(true) : item\n  if (source) {\n    // A clone must not connect a controller or duplicate an id.\n    for (const el of [row, ...row.querySelectorAll(\"[id],[data-controller]\")]) {\n      el.removeAttribute(\"id\")\n      el.removeAttribute(\"data-controller\")\n    }\n    document.body.append(row)\n  }\n  const placeholder = document.createElement(item.tagName)\n  placeholder.setAttribute(\"data-reactive-sortable-placeholder\", \"\")\n  placeholder.setAttribute(\"aria-hidden\", \"true\")\n  placeholder.style.height = `${rect.height}px`\n  drag = begin({ core, item, row, origin: list, source, placeholder, style: row.getAttribute(\"style\") })\n  drag.dx = event.clientX - rect.left\n  drag.dy = event.clientY - rect.top\n  drag.select = document.documentElement.style.userSelect\n  document.documentElement.style.userSelect = \"none\"\n  if (!source) item.before(placeholder)\n  Object.assign(row.style, {\n    position: \"fixed\",\n    left: `${rect.left}px`,\n    top: `${rect.top}px`,\n    width: `${rect.width}px`,\n    height: `${rect.height}px`,\n    margin: \"0\",\n    boxSizing: \"border-box\",\n    zIndex: \"2147483647\",\n    pointerEvents: \"none\",\n  })\n}\n\n// The drag record both inputs share; marks the row and its list.\nfunction begin(record) {\n  const { row, origin, source } = record\n  record.index = itemsOf(origin).indexOf(record.item)\n  record.target = source ? null : origin\n  row.setAttribute(\"data-reactive-sortable-dragging\", \"\")\n  activate(origin, true)\n  return record\n}\n\nconst activate = (list, on) => list?.toggleAttribute(\"data-reactive-sortable-active\", on)\n\n// Put `el` at `index` among a list's rows (`items`, which leave `el` out):\n// before the row there, or after the last one, or into the empty list.\nfunction insertAt(list, items, index, el) {\n  if (items[index]) items[index].before(el)\n  else if (items.length) items.at(-1).after(el)\n  else list.append(el)\n}\n\nfunction follow(x, y) {\n  drag.x = x\n  drag.y = y\n  drag.row.style.left = `${x - drag.dx}px`\n  drag.row.style.top = `${y - drag.dy}px`\n  const list = targetsFor(drag.origin).find((el) => inside(el, x, y))\n  if (list) place(list, x, y)\n  // Off every list, a drag-in has nowhere to land; a move keeps its last spot.\n  else if (drag.source) retarget(null), drag.placeholder.remove()\n  scroll(x, y)\n}\n\nfunction retarget(list) {\n  if (drag.target !== drag.origin) activate(drag.target, false)\n  drag.target = list\n  activate(list, true)\n}\n\n// The placeholder goes before the first row whose middle is past the pointer.\n// A list whose first two rows share a top is laid out across, not down.\nfunction place(list, x, y) {\n  retarget(list)\n  const items = itemsOf(list)\n  const [a, b] = items.map((el) => el.getBoundingClientRect())\n  const across = b && a.top === b.top && a.left !== b.left\n  const index = items.findIndex((el) => {\n    const rect = el.getBoundingClientRect()\n    return across ? x < rect.left + rect.width / 2 : y < rect.top + rect.height / 2\n  })\n  insertAt(list, items, index < 0 ? items.length : index, drag.placeholder)\n}\n\n// Near the top or bottom edge of the list being dragged over (when it\n// scrolls) or of the window, scroll one step a frame until the pointer leaves\n// the edge.\nfunction scroll(x, y) {\n  const list = drag.target ?? drag.origin\n  const rect = list.getBoundingClientRect()\n  const scrolls = list.scrollHeight > list.clientHeight\n  drag.vy = scrolls ? (y < rect.top + EDGE ? -SPEED : y > rect.bottom - EDGE ? SPEED : 0) : 0\n  drag.wy = y < EDGE ? -SPEED : y > window.innerHeight - EDGE ? SPEED : 0\n  if ((drag.vy || drag.wy) && !drag.raf) {\n    const step = () => {\n      if (!drag || !(drag.vy || drag.wy)) return drag && (drag.raf = 0)\n      ;(drag.target ?? drag.origin).scrollTop += drag.vy\n      if (drag.wy) window.scrollBy(0, drag.wy)\n      follow(drag.x, drag.y)\n      drag.raf = requestAnimationFrame(step)\n    }\n    drag.raf = requestAnimationFrame(step)\n  }\n}\n\n// --- Keyboard ----------------------------------------------------------------\n// A focused row: Space/Enter picks it up, the arrows move it (← / → into the\n// previous / next list of its group), Space/Enter drops it, Escape (or Tab)\n// puts it back. Each step is announced in the list's own words.\nfunction keyDown(event, core) {\n  const key = event.key\n  if (drag?.keyboard) {\n    // (A nested root's row bubbles to every ancestor root: only the root that\n    // picked the row up answers.)\n    if (event.target !== drag.row || drag.core !== core) return\n    const handled = {\n      \" \": drop,\n      Enter: drop,\n      Escape: cancel,\n      Tab: cancel,\n      ArrowUp: () => step(-1),\n      ArrowDown: () => step(1),\n      ArrowLeft: () => hop(-1),\n      ArrowRight: () => hop(1),\n    }[key]\n    if (!handled) return\n    if (key !== \"Tab\") event.preventDefault()\n    return handled()\n  }\n  if (key !== \" \" && key !== \"Enter\") return\n  const grabbed = grab(event.target, core)\n  if (!grabbed || grabbed.item !== event.target || grabbed.list.matches(SOURCE)) return\n  event.preventDefault()\n  drag = begin({ core, keyboard: true, item: grabbed.item, row: grabbed.item, origin: grabbed.list, style: grabbed.item.getAttribute(\"style\") })\n  announce(\"picked\")\n}\n\nfunction step(by) {\n  const items = itemsOf(drag.target)\n  // (itemsOf leaves the dragged row out: it sits before items[index].)\n  const to = position() + by\n  // Past either end the row stays, and where it is is said again.\n  if (to >= 0 && to <= items.length) insertAt(drag.target, items, to, drag.row)\n  moved()\n}\n\nfunction hop(by) {\n  const lists = targetsFor(drag.origin)\n  const list = lists[lists.indexOf(drag.target) + by]\n  if (list) {\n    const index = position()\n    retarget(list)\n    insertAt(list, itemsOf(list), index, drag.row)\n  }\n  moved()\n}\n\nfunction moved() {\n  drag.row.focus?.()\n  announce(\"moved\")\n}\n\n// The dragged row's index in its target list (the drop's `position`).\nfunction position() {\n  const items = itemsOf(drag.target)\n  const row = drag.keyboard ? drag.row : drag.placeholder\n  // (itemsOf leaves the dragged row out: count the rows before it.)\n  return items.filter((el) => el.compareDocumentPosition(row) & 4).length\n}\n\nfunction liveRegion() {\n  if (!live?.isConnected) {\n    live = document.createElement(\"div\")\n    live.setAttribute(\"aria-live\", \"polite\")\n    live.setAttribute(\"data-reactive-sortable-live\", \"\")\n    live.style.cssText = \"position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap\"\n    document.body.append(live)\n  }\n  return live\n}\n\n// Clear the region now and write the words on the next frame, so a change is\n// heard even when the words are the same as the last ones.\nfunction announce(name) {\n  const list = drag.target ?? drag.origin\n  const words = (json(attr(list, \"-messages\"), {})[name] ?? \"\")\n    .replaceAll(\"{position}\", position() + 1)\n    .replaceAll(\"{count}\", itemsOf(list).length + 1)\n  const region = liveRegion()\n  region.textContent = \"\"\n  cancelAnimationFrame(speaking)\n  speaking = requestAnimationFrame(() => (region.textContent = words))\n}\n\n// --- Drop / cancel -----------------------------------------------------------\n// Settle the row, then send the target's action: a move that changed nothing\n// sends nothing. Returns before the reply; the row goes back if it fails.\nfunction drop() {\n  const record = drag\n  const { target, origin, source, row, placeholder } = record\n  const landed = target && (source ? placeholder.isConnected : true)\n  const index = landed ? position() : -1\n  const after = landed ? keyOf(itemsOf(target)[index - 1]) : null\n  if (record.keyboard) announce(\"dropped\")\n  if (!source && placeholder) placeholder.replaceWith(row)\n  settle(record)\n  if (!landed || (target === origin && index === record.index)) return\n\n  const from = target === origin ? \"self\" : source ? attr(origin, \"-source\") : (attr(origin, \"-name\") ?? \"list\")\n  const action = json(attr(target, \"-from\"), {})[from] ?? attr(target)\n  const params = { ...json(attr(target, \"-params\"), {}), item: keyOf(record.item), position: index, after, from }\n  // The list and its ancestors: a reply stream that replaces or updates one\n  // of them (by id, or by a `targets:` selector) rendered the list (read now —\n  // a replace detaches it).\n  const chain = []\n  for (let el = target; el; el = el.parentElement) chain.push(el)\n  const sent = cores.get(rootOf(target))?.proceed(target, action, JSON.stringify(params), json(attr(target, \"-busy\")))\n  if (source) return\n  Promise.resolve(sent).then((html) => renders(html, chain) || restore(record))\n}\n\nfunction renders(html, chain) {\n  if (!html) return false\n  const template = document.createElement(\"template\")\n  template.innerHTML = html\n  return [...template.content.querySelectorAll(\"turbo-stream\")].some(\n    (stream) => /^(replace|update)$/.test(stream.getAttribute(\"action\")) && hits(stream, chain),\n  )\n}\n\nfunction hits(stream, chain) {\n  const target = stream.getAttribute(\"target\")\n  if (target) return chain.some((el) => el.id === target)\n  const selector = stream.getAttribute(\"targets\")\n  try {\n    return Boolean(selector) && chain.some((el) => el.matches(selector))\n  } catch {\n    return false // an invalid selector renders nothing\n  }\n}\n\nfunction cancel() {\n  const record = drag\n  if (record.keyboard) announce(\"cancelled\")\n  record.placeholder?.remove()\n  settle(record)\n  restore(record)\n}\n\n// Put a moved row back at its original index in its original list.\nfunction restore({ row, origin, index, source }) {\n  if (source || !row.isConnected) return\n  insertAt(\n    origin,\n    itemsOf(origin).filter((el) => el !== row),\n    index,\n    row,\n  )\n  if (row === document.activeElement) row.focus?.()\n}\n\n// Undo everything the drag set: the row's style and marker, the lists'\n// markers, the clone, the placeholder, the frame loop, the text selection.\nfunction settle(record) {\n  const { row, origin, target, source, style, placeholder } = record\n  drag = null\n  if (record.raf) cancelAnimationFrame(record.raf)\n  row.removeAttribute(\"data-reactive-sortable-dragging\")\n  if (source) row.remove()\n  else if (!record.keyboard) style == null ? row.removeAttribute(\"style\") : row.setAttribute(\"style\", style)\n  placeholder?.remove()\n  activate(origin, false)\n  activate(target, false)\n  if (!record.keyboard) document.documentElement.style.userSelect = record.select ?? \"\"\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "2B87FA8B1177915764756E2164756E21",
+  "names": []
+}

data/app/javascript/phlex/reactive/reactive_controller.js

@@ -32,6 +32,7 @@ import * as defer from "phlex/reactive/features/defer"
 import * as form from "phlex/reactive/features/form"
 import * as bindings from "phlex/reactive/features/bindings"
 import * as compute from "phlex/reactive/features/compute"
+import * as sortable from "phlex/reactive/features/sortable"
 import * as effects from "phlex/reactive/features/effects"
 import * as hints from "phlex/reactive/features/hints"
 import * as devtools from "phlex/reactive/features/devtools"
@@ -63,6 +64,7 @@ if (__SPLIT__) {
     checkGroup: bindings.checkGroup,
   })
   registerReactiveFeature("compute", { connect: compute.connect, disconnect: compute.disconnect, seed: compute.seed, recompute: compute.recompute })
+  registerReactiveFeature("sortable", { connect: sortable.connect, disconnect: sortable.disconnect })
   registerReactiveFeature("effects", { wrap: effects.wrap, sweep: effects.sweep })
   registerReactiveFeature("hints", { optimistic: hints.optimistic, busy: hints.busy, resurrection: hints.resurrection })
   registerReactiveFeature("devtools", {