@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/sortable/index.ts

@@ -1,19 +1,61 @@
-import type { Attributes } from '@esportsplus/template';
+import { flush, reactive, read, signal, write, type ReactiveArray, type Signal } from '@esportsplus/reactivity';
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { finished, measure, slides, timing } from '~/shared/animation';
+import press from '~/shared/press';
 import './scss/index.scss';
 
 
-type Options = {
-    // Containers sharing a group name trade items; the container the drag started in receives 'onsort'.
+// One container's list. A dragged item moves through the lists live, standing in its own place; the copy that
+// follows the pointer belongs to the list it was picked up from.
+type List<T> = {
+    container?: HTMLElement;
+    // The item dragged out of this list, shown by its copy until it has landed.
+    dragging: Signal<T | null>;
+    // The copy, in the top layer.
+    ghost?: HTMLElement;
+    // The dragged item while it sits in this list.
+    held: Signal<T | null>;
+    items: ReactiveArray<T>;
+    motion: Motion;
+    press: ReturnType<typeof press>;
+    // Shows the dropped item again, once its copy starts to fade.
+    reveal?: VoidFunction;
+    // The dropped item while it shows again with every transition off.
+    revealing: Signal<T | null>;
+    slot?: { flush(): void };
+};
+
+// Where the copy is drawn: the box it was picked up from, then the pointer's offset from there and the swing.
+type Motion = {
+    angle: number;
+    dropping: boolean;
+    height: number;
+    left: number;
+    origin: string;
+    radius: string;
+    top: number;
+    width: number;
+    x: number;
+    y: number;
+};
+
+type Options<T> = {
+    // Renders the copy that follows the pointer; the item's own template when omitted.
+    drag?: (item: T) => Renderable<unknown>;
+    // Containers sharing a group name trade items; the list the drag started in receives 'onsort'.
     group?: string;
     // Selector for the part of an item that starts a drag; the whole item when omitted.
     handle?: string;
-    onsort?: (item: HTMLElement, from: number, to: number, source: HTMLElement, target: HTMLElement) => void;
+    onsort?: (item: T, from: number, to: number, source: ReactiveArray<T>, target: ReactiveArray<T>) => void;
 };
 
+// 'index' is the item's place in its list.
 type Rect = {
     bottom: number;
-    container: HTMLElement;
+    element: HTMLElement;
+    index: number;
     left: number;
+    list: List<unknown>;
     right: number;
     top: number;
 };
@@ -22,241 +64,190 @@ type Rect = {
 // Touch has to hold still briefly before a drag starts, otherwise swiping across the items could never scroll.
 const DELAY = 180;
 
-const DROP: KeyframeAnimationOptions = { duration: 260, easing: 'cubic-bezier(0.34, 1.3, 0.64, 1)', fill: 'forwards' };
-
 const ENTER = 0.15;
 
 // Treats the item as hanging below the grab point, so a centered grab still swings.
 const HANG = 0.5;
 
-const SHIFT: KeyframeAnimationOptions = { composite: 'add', duration: 220, easing: 'cubic-bezier(0.2, 0, 0, 1)' };
-
 // Seconds; low-pass on pointer velocity so uneven pointer/frame timing doesn't jolt the swing.
 const SMOOTHING = 0.04;
 
-const THRESHOLD = 4;
 
+// Drags carrying an item and not yet dropping it; the root grabs while there are any.
+let carrying = 0;
 
-function child(container: HTMLElement, node: Node | null) {
-    while (node && node.parentNode !== container) {
-        node = node.parentNode;
-    }
+// Connected lists per group name, so a drag reaches every list it can drop into.
+let groups = new Map<string, Set<List<unknown>>>();
 
-    return node instanceof HTMLElement ? node : null;
-}
 
-function drag(container: HTMLElement, item: HTMLElement, e: PointerEvent, { group, onsort }: Options) {
-    let animations = new Map<HTMLElement, Animation>(),
-        baseLeft = 0,
-        baseTop = 0,
-        containers = group
-            ? Array.from(document.querySelectorAll<HTMLElement>(`.sortable[data-sortable-group="${CSS.escape(group)}"]`))
-            : [container],
-        cssText = '',
+function drag(source: List<unknown>, item: HTMLElement, value: unknown, e: PointerEvent, { group, onsort }: Options<unknown>) {
+    // Whether this drag counts toward 'carrying'.
+    let carried = false,
+        // 'current' is the list the item sits in now.
+        current = source,
         frame = 0,
-        from = index(item),
-        layout = new Map<HTMLElement, Rect>(),
+        from = source.items.indexOf(value),
+        hole: Rect | null = null,
+        // The pointer in the hovered list's own coordinates when it was last hit-tested.
+        lastLeft = NaN,
+        lastTop = NaN,
+        layout: Rect[] = [],
+        lists = group ? [...(groups.get(group) ?? [source])] : [source],
+        motion = source.motion,
         originX = e.clientX,
         originY = e.clientY,
-        placeholder: HTMLElement | null = null,
-        pointer = e.pointerId,
         previousX = e.clientX,
         previousY = e.clientY,
-        reduced = matchMedia('(prefers-reduced-motion: reduce)').matches,
+        // From the container's CSS, read on lift; no duration is no slide.
+        shift: KeyframeAnimationOptions | null = null,
         swing: ReturnType<typeof inertia> | null = null,
         time = 0,
-        touch = e.pointerType === 'touch',
-        timer = touch ? setTimeout(activate, DELAY) : undefined,
         x = e.clientX,
         y = e.clientY;
 
     function activate() {
-        clearTimeout(timer);
-
         let rect = item.getBoundingClientRect(),
-            computed = getComputedStyle(item),
-            style = item.style;
-
-        placeholder = document.createElement('div');
-        placeholder.className = 'sortable-placeholder';
-        placeholder.style.cssText = `
-            --radius: ${computed.borderRadius};
-            grid-column: ${computed.gridColumn};
-            grid-row: ${computed.gridRow};
-            height: ${rect.height}px;
-            margin: ${computed.margin};
-            width: ${rect.width}px;
-        `;
+            computed = getComputedStyle(item);
 
-        baseLeft = rect.left;
-        baseTop = rect.top;
-        cssText = style.cssText;
-        swing = reduced ? null : inertia(computed, rect, originX - rect.left, originY - rect.top);
+        shift = timing(computed, 'shift');
+        swing = inertia(computed, rect, originX - rect.left, originY - rect.top);
 
         reflow(() => {
-            item.before(placeholder!);
-
-            style.boxSizing = 'border-box';
-            style.height = `${rect.height}px`;
-            style.left = `${rect.left}px`;
-            style.margin = '0';
-            style.position = 'fixed';
-            style.top = `${rect.top}px`;
-            style.transformOrigin = `${originX - rect.left}px ${originY - rect.top}px`;
-            style.width = `${rect.width}px`;
-
-            // A transformed or filtered ancestor becomes the containing block for 'position: fixed'; correct
-            // by the offset it introduced, measured before the lift/swing transforms apply.
-            let moved = item.getBoundingClientRect();
-
-            style.left = `${rect.left * 2 - moved.left}px`;
-            style.top = `${rect.top * 2 - moved.top}px`;
-
-            for (let i = 0, n = containers.length; i < n; i++) {
-                containers[i].classList.add('--active');
-            }
-
-            item.classList.add('--dragging');
+            motion.angle = 0;
+            motion.dropping = false;
+            motion.height = rect.height;
+            motion.left = rect.left;
+            motion.origin = `${originX - rect.left}px ${originY - rect.top}px`;
+            motion.radius = computed.borderRadius;
+            motion.top = rect.top;
+            motion.width = rect.width;
+            motion.x = 0;
+            motion.y = 0;
+            write(source.dragging, value);
+            write(source.held, value);
         });
 
-        getSelection()?.removeAllRanges();
+        carry(true);
         frame = requestAnimationFrame(tick);
     }
 
-    function cleanup() {
-        cancelAnimationFrame(frame);
-        clearTimeout(timer);
-
-        document.removeEventListener('contextmenu', prevent);
-        document.removeEventListener('dragstart', prevent);
-        document.removeEventListener('pointercancel', release);
-        document.removeEventListener('pointermove', move);
-        document.removeEventListener('pointerup', release);
-        document.removeEventListener('selectstart', prevent);
-        document.removeEventListener('touchmove', scroll);
+    // Marks the root from the lift until the copy starts landing. Not ':root:has(.sortable-drag)' in CSS: that makes
+    // every DOM change anywhere on the page restyle the whole document.
+    function carry(value: boolean) {
+        if (carried === value) {
+            return;
+        }
+
+        carried = value;
+        carrying += value ? 1 : -1;
+        document.documentElement.classList.toggle('sortable-grabbing', carrying > 0);
     }
 
     function drop() {
-        let slot = placeholder!,
-            style = item.style;
-
-        cleanup();
-        animations.get(slot)?.finish();
-
-        let { rotate, scale, translate } = getComputedStyle(item),
-            target = slot.getBoundingClientRect();
-
-        item.classList.add('--dropping');
+        let ghost = source.ghost,
+            slot = hole?.element;
 
-        let animation = item.animate([
-            { rotate, scale, transform: style.transform, translate },
-            { rotate: '0deg', scale: '1', transform: `translate3d(${target.left - baseLeft}px, ${target.top - baseTop}px, 0)`, translate: '0px 0px' }
-        ], DROP);
-
-        animation.onfinish = () => {
-            // Reinserting the item gives it a fresh style, so restoring its inline styles and dropping the
-            // drag classes can't trigger its own transitions (e.g. on 'transform').
-            style.cssText = cssText;
-            slot.replaceWith(item);
-            item.classList.remove('--dragging', '--dropping');
-            animation.cancel();
-
-            for (let i = 0, n = containers.length; i < n; i++) {
-                containers[i].classList.remove('--active');
+        if (ghost && slot) {
+            // Its box where the copy lands, not partway through a shift.
+            for (let animation of slot.getAnimations()) {
+                animation.finish();
             }
 
-            let target = item.parentElement!,
-                to = index(item);
+            let box = slot.getBoundingClientRect();
+
+            // CSS shrinks the copy onto it and fades it out, taking its size too, since another list can lay it out
+            // differently.
+            motion.angle = 0;
+            motion.dropping = true;
+            motion.height = box.height;
+            motion.width = box.width;
+            motion.x = box.left - motion.left;
+            motion.y = box.top - motion.top;
+            flush();
+            carry(false);
+        }
 
-            if (onsort && (to !== from || target !== container)) {
-                onsort(item, from, to, container, target);
+        // The item shows again under the copy as the copy starts to fade, three quarters through landing, so the two
+        // cross; at the latest when the copy goes.
+        let reveal = source.reveal = () => {
+            if (read(current.held) === null) {
+                return;
             }
-        };
 
-        // The pointerup that ended the drag is followed by a click on whatever sits under the pointer.
-        addEventListener('click', swallow, true);
-        setTimeout(() => removeEventListener('click', swallow, true));
-    }
+            write(current.held, null);
+            write(current.revealing, value);
+            flush();
 
-    // Slots the placeholder beside the target's item nearest the pointer, on the side the pointer is on:
-    // left/right when that item shares a row with a sibling, above/below otherwise.
-    function enter(target: HTMLElement) {
-        let distance = Infinity,
-            nearest: Element | null = null;
+            // Restyled with its transitions off, it shows at once; they come back with nothing left to animate.
+            slot?.getBoundingClientRect();
+            write(current.revealing, null);
+            flush();
+        };
 
-        for (let element of target.children) {
-            if (element === item || element === placeholder) {
-                continue;
-            }
+        // Its dropping style turns its animation off, so only the landing's transitions are left to wait for.
+        void (ghost ? finished(ghost) : Promise.resolve()).then(() => {
+            let to = current.items.indexOf(value);
 
-            let rect = element.getBoundingClientRect(),
-                d = Math.hypot(Math.max(rect.left - x, 0, x - rect.right), Math.max(rect.top - y, 0, y - rect.bottom));
+            reveal();
+            source.reveal = undefined;
+            write(source.dragging, null);
+            flush();
+            carry(false);
 
-            if (d < distance) {
-                distance = d;
-                nearest = element;
+            if (onsort && (current !== source || to !== from)) {
+                onsort(value, from, to, source.items, current.items);
             }
-        }
-
-        if (!nearest) {
-            target.append(placeholder!);
-            return;
-        }
-
-        let rect = nearest.getBoundingClientRect(),
-            row = false;
+        });
+    }
 
-        for (let element of target.children) {
-            if (element === item || element === nearest || element === placeholder) {
-                continue;
-            }
+    // Into the list the pointer has crossed into, after its items that come before the pointer in reading order: the
+    // rows above it, then those to its left in its own row.
+    function enter(target: List<unknown>) {
+        // The layout is still the last reflow's, in the list's own coordinates.
+        let bounds = target.container!.getBoundingClientRect(),
+            index = 0,
+            left = x - bounds.left + target.container!.scrollLeft,
+            top = y - bounds.top + target.container!.scrollTop;
 
-            let other = element.getBoundingClientRect();
+        for (let i = 0, n = layout.length; i < n; i++) {
+            let rect = layout[i];
 
-            if (other.top < rect.bottom && other.bottom > rect.top) {
-                row = true;
-                break;
+            if (rect.list === target && (rect.bottom <= top || (rect.top < top && rect.right <= left))) {
+                index++;
             }
         }
 
-        if (row ? x > rect.left + rect.width / 2 : y > rect.top + rect.height / 2) {
-            nearest.after(placeholder!);
-        }
-        else {
-            nearest.before(placeholder!);
-        }
+        relocate(target, index);
     }
 
-    function move(e: PointerEvent) {
-        if (e.pointerId !== pointer) {
+    // A drag lands where it was let go; one whose list went with it just stops.
+    function end(e: PointerEvent | null, started: boolean) {
+        cancelAnimationFrame(frame);
+
+        if (!started) {
             return;
         }
 
-        x = e.clientX;
-        y = e.clientY;
-
-        if (placeholder || Math.hypot(x - originX, y - originY) < THRESHOLD) {
+        if (e) {
+            drop();
             return;
         }
 
-        if (touch) {
-            cleanup();
-        }
-        else {
-            activate();
-        }
+        write(current.held, null);
+        write(source.dragging, null);
+        carry(false);
     }
 
     function over() {
-        if (containers.length === 1) {
-            return container;
+        if (lists.length === 1) {
+            return source;
         }
 
-        for (let i = 0, n = containers.length; i < n; i++) {
-            let rect = containers[i].getBoundingClientRect();
+        for (let i = 0, n = lists.length; i < n; i++) {
+            let rect = lists[i].container?.getBoundingClientRect();
 
-            if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
-                return containers[i];
+            if (rect && x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+                return lists[i];
             }
         }
 
@@ -264,99 +255,126 @@ function drag(container: HTMLElement, item: HTMLElement, e: PointerEvent, { grou
     }
 
     function reflow(mutate: VoidFunction) {
-        let first = new Map<Element, DOMRect>();
-
-        for (let i = 0, n = containers.length; i < n; i++) {
-            for (let element of containers[i].children) {
-                if (element !== item) {
-                    first.set(element, element.getBoundingClientRect());
-                }
-            }
+        for (let i = 0, n = lists.length; i < n; i++) {
+            measure(lists[i].container?.children ?? []);
         }
 
         mutate();
 
-        for (let animation of animations.values()) {
-            animation.cancel();
+        for (let i = 0, n = lists.length; i < n; i++) {
+            lists[i].slot?.flush();
         }
 
-        animations.clear();
-        layout.clear();
+        flush();
+
+        // The held item by its place, since a move between lists renders it afresh.
+        let at = current.items.indexOf(value);
+
+        hole = null;
+        lastLeft = NaN;
+        layout.length = 0;
+
+        let elements: HTMLElement[] = [],
+            places: { index: number, left: number, list: List<unknown>, top: number }[] = [];
 
-        for (let i = 0, n = containers.length; i < n; i++) {
-            let parent = containers[i],
-                bounds = parent.getBoundingClientRect(),
+        for (let i = 0, n = lists.length; i < n; i++) {
+            let list = lists[i],
+                parent = list.container;
+
+            if (!parent) {
+                continue;
+            }
+
+            let bounds = parent.getBoundingClientRect(),
+                index = 0,
                 left = bounds.left - parent.scrollLeft,
                 top = bounds.top - parent.scrollTop;
 
-            for (let element of parent.children) {
-                if (element === item || !(element instanceof HTMLElement)) {
-                    continue;
+            for (let element of parent.children as HTMLCollectionOf<HTMLElement>) {
+                // Only the items: the copy is a child too, out in the top layer.
+                if (!element.classList.contains('sortable-drag')) {
+                    elements.push(element);
+                    places.push({ index: index++, left, list, top });
                 }
+            }
+        }
 
-                let rect = element.getBoundingClientRect(),
-                    start = first.get(element);
+        // Every list's items slide from where they were drawn, laid out where they slide to; one new to a list just is.
+        let rects = slides(elements, shift);
 
-                layout.set(element, {
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let { index, left, list, top } = places[i],
+                rect = rects[i],
+                entry = {
                     bottom: rect.bottom - top,
-                    container: parent,
+                    element: elements[i],
+                    index,
                     left: rect.left - left,
+                    list,
                     right: rect.right - left,
                     top: rect.top - top
-                });
+                };
 
-                if (!start || reduced || (start.left === rect.left && start.top === rect.top)) {
-                    continue;
-                }
-
-                animations.set(element, element.animate([
-                    { translate: `${start.left - rect.left}px ${start.top - rect.top}px` },
-                    { translate: '0px 0px' }
-                ], SHIFT));
+            if (list === current && entry.index === at) {
+                hole = entry;
             }
+
+            layout.push(entry);
         }
     }
 
-    function release(e: PointerEvent) {
-        if (e.pointerId !== pointer) {
-            return;
-        }
+    // Within its list the item is sorted into place, keeping its node and the touch dragging it; into another it is
+    // spliced, rendering afresh there.
+    function relocate(target: List<unknown>, to: number) {
+        if (target === current) {
+            let rest = target.items.filter((v) => v !== value);
 
-        if (placeholder) {
-            drop();
-        }
-        else {
-            cleanup();
-        }
-    }
+            rest.splice(to, 0, value);
+
+            let rank = new Map(rest.map((v, i) => [v, i]));
 
-    function scroll(e: TouchEvent) {
-        if (placeholder) {
-            e.preventDefault();
+            target.items.sort((a, b) => rank.get(a)! - rank.get(b)!);
+            return;
         }
+
+        current.items.splice(current.items.indexOf(value), 1);
+        write(current.held, null);
+        write(target.held, value);
+        target.items.splice(to, 0, value);
+        current = target;
     }
 
     function sort() {
-        let slot = layout.get(placeholder!),
+        let slot = hole,
             target = over();
 
         if (!slot || !target) {
             return;
         }
 
-        if (target !== slot.container) {
+        if (target !== current) {
             reflow(() => enter(target));
             return;
         }
 
-        let bounds = target.getBoundingClientRect(),
-            left = x - bounds.left + target.scrollLeft,
-            top = y - bounds.top + target.scrollTop;
+        let bounds = target.container!.getBoundingClientRect(),
+            left = x - bounds.left + target.container!.scrollLeft,
+            top = y - bounds.top + target.container!.scrollTop;
+
+        // Nothing moved under the pointer: not the pointer, the page or the list's own scroll.
+        if (left === lastLeft && top === lastTop) {
+            return;
+        }
+
+        lastLeft = left;
+        lastTop = top;
+
+        for (let i = 0, n = layout.length; i < n; i++) {
+            let rect = layout[i];
 
-        for (let [element, rect] of layout) {
             if (
-                element === placeholder ||
-                rect.container !== target ||
+                rect === slot ||
+                rect.list !== target ||
                 left < rect.left ||
                 left > rect.right ||
                 top < rect.top ||
@@ -371,18 +389,11 @@ function drag(container: HTMLElement, item: HTMLElement, e: PointerEvent, { grou
                     : (rect.top > slot.top ? top - rect.top : rect.bottom - top),
                 size = row ? rect.right - rect.left : rect.bottom - rect.top;
 
-            // How far the pointer must travel into the hovered item (from the edge facing the placeholder)
-            // before they swap. Same-size items swap almost on entry; a larger item needs half its surplus
-            // over the placeholder, which leaves the pointer short of the swap-back point afterwards.
+            // How far the pointer must travel into the hovered item (from the edge facing the held one) before
+            // they swap. Same-size items swap almost on entry; a larger item needs half its surplus over the held
+            // one, which leaves the pointer short of the swap-back point afterwards.
             if (depth > Math.max(0, (size - (row ? slot.right - slot.left : slot.bottom - slot.top)) / 2) + size * ENTER) {
-                reflow(() => {
-                    if (placeholder!.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING) {
-                        element.after(placeholder!);
-                    }
-                    else {
-                        element.before(placeholder!);
-                    }
-                });
+                reflow(() => relocate(target, rect.index));
             }
 
             return;
@@ -399,22 +410,21 @@ function drag(container: HTMLElement, item: HTMLElement, e: PointerEvent, { grou
         previousX = x;
         previousY = y;
         time = now;
-        item.style.transform = `translate3d(${x - originX}px, ${y - originY}px, 0) rotate(${angle}deg)`;
+        motion.angle = angle;
+        motion.x = x - originX;
+        motion.y = y - originY;
 
         sort();
     }
 
-    document.addEventListener('contextmenu', prevent);
-    document.addEventListener('dragstart', prevent);
-    document.addEventListener('pointercancel', release);
-    document.addEventListener('pointermove', move);
-    document.addEventListener('pointerup', release);
-    document.addEventListener('selectstart', prevent);
-    document.addEventListener('touchmove', scroll, { passive: false });
-}
-
-function index(element: Element) {
-    return Array.prototype.indexOf.call(element.parentElement!.children, element);
+    source.press.begin(e, {
+        end,
+        move: (e) => {
+            x = e.clientX;
+            y = e.clientY;
+        },
+        start: activate
+    });
 }
 
 // Under-damped spring pulling the item's angle toward a lean set by pointer velocity: it swings while
@@ -452,32 +462,130 @@ function inertia(computed: CSSStyleDeclaration, rect: DOMRect, grabX: number, gr
     };
 }
 
-function prevent(e: Event) {
-    e.preventDefault();
-}
 
-function swallow(e: Event) {
-    e.preventDefault();
-    e.stopPropagation();
-}
+// Spread 'attributes' on the container and render the items inside it; each item renders one element, with the
+// attributes its template is handed spread on it. Dropping reorders 'items', or moves an item between the lists of a
+// group. A move between lists splices it out of one array and into the other, so a reactive object moved that way is
+// disposed with its old place.
+export default <T>(
+    items: ReactiveArray<T>,
+    template: (item: T, attributes: Attributes) => Renderable<unknown>,
+    { drag: copy, group, handle, onsort }: Options<T> = {}
+) => {
+    let list: List<T> = {
+            dragging: signal<T | null>(null),
+            held: signal<T | null>(null),
+            items,
+            motion: reactive({ angle: 0, dropping: false, height: 0, left: 0, origin: '', radius: '', top: 0, width: 0, x: 0, y: 0 }),
+            press: press(DELAY),
+            revealing: signal<T | null>(null)
+        };
 
+    // Follows the pointer from the top layer, so no ancestor clips it or becomes its containing block.
+    function ghost(item: T) {
+        let motion = list.motion;
+
+        return html`
+            <div
+                class='sortable-drag'
+                inert
+                popover='manual'
+                ${{
+                    class: () => motion.dropping && 'sortable-drag--dropping',
+                    onconnect: (element: HTMLElement) => {
+                        list.ghost = element;
+                        element.showPopover();
+                    },
+                    // Its own fade, not one bubbling up from the content (the overlay fades too).
+                    ontransitionstart: (e: TransitionEvent) => {
+                        if (e.target === e.currentTarget && e.propertyName === 'opacity') {
+                            list.reveal?.();
+                        }
+                    },
+                    style: [
+                        () => `--sortable-height: ${motion.height}px; --sortable-left: ${motion.left}px; --sortable-origin: ${motion.origin}; --sortable-radius: ${motion.radius}; --sortable-top: ${motion.top}px; --sortable-width: ${motion.width}px;`,
+                        () => `--sortable-angle: ${motion.angle}deg; --sortable-x: ${motion.x}px; --sortable-y: ${motion.y}px;`
+                    ]
+                }}
+            >
+                ${copy ? copy(item) : template(item, {})}
+            </div>
+        `;
+    }
 
-export default ({ group, handle, onsort }: Options = {}): Attributes => ({
-    class: 'sortable',
-    ...(group && { 'data-sortable-group': group }),
-    onpointerdown: (e: PointerEvent) => {
-        let container = e.currentTarget as HTMLElement;
+    // Spread on the item's element. Only the held item reads the selector's true, so lift and drop restyle it alone. A
+    // press goes to the nearest element with a pointerdown handler, so a nested list's item, or a control inside an
+    // item with its own, keeps the press from this one.
+    function hold(item: T): Attributes {
+        return {
+            class: () => signal.selector(list.held, item)
+                ? 'sortable-item--held'
+                : signal.selector(list.revealing, item) && 'sortable-item--revealing',
+            onpointerdown: (e: PointerEvent) => {
+                let element = e.currentTarget as HTMLElement;
+
+                if (e.button !== 0 || !e.isPrimary || list.press.busy() || read(list.dragging) !== null) {
+                    return;
+                }
 
-        if (e.button !== 0 || !e.isPrimary || container.classList.contains('--active')) {
-            return;
-        }
+                if (handle && !element.contains((e.target as Element).closest(handle))) {
+                    return;
+                }
 
-        let item = child(container, e.target as Node);
+                drag(list as List<unknown>, element, item, e, { group, onsort: onsort as Options<unknown>['onsort'] });
+            }
+        };
+    }
 
-        if (!item || (handle && !item.contains((e.target as Element).closest(handle)))) {
-            return;
-        }
+    return {
+        attributes: {
+            ...list.press.attributes,
+            class: 'sortable',
+            onconnect: (element: HTMLElement) => {
+                list.container = element;
 
-        drag(container, item, e, { group, onsort });
-    }
-});
+                if (!group) {
+                    return;
+                }
+
+                let joined = groups.get(group);
+
+                if (!joined) {
+                    joined = new Set();
+                    groups.set(group, joined);
+                }
+
+                joined.add(list as List<unknown>);
+            },
+            ondisconnect: () => {
+                list.press.cancel();
+
+                if (!group) {
+                    return;
+                }
+
+                let joined = groups.get(group);
+
+                joined?.delete(list as List<unknown>);
+
+                if (joined?.size === 0) {
+                    groups.delete(group);
+                }
+            }
+        },
+        // Lands changes made to 'items' this task now, for a caller that measures the list straight after.
+        flush: () => list.slot?.flush(),
+        render: () => {
+            let slot = html.reactive(items, (item) => html`${template(item, hold(item))}`);
+
+            list.slot = slot;
+
+            return html`${slot}${() => {
+                let item = read(list.dragging);
+
+                return item !== null && ghost(item);
+            }}`;
+        }
+    };
+};
+export type { Options as SortableOptions };