@plexui/vue 0.2.0 → 0.4.0

package/dist/es/components/Sortable/Sortable.js

@@ -6,7 +6,7 @@ import s from "@plexui/styles/components/Sortable/Sortable.module.css";
 // Vue port of packages/ui/src/components/Sortable/Sortable.tsx.
 //
 // - `value` binds with `v-model:value`; `change` fires with it.
-// - React's `Sortable.Handle` is the flat `SortableHandle` here.
+// - React's `Sortable.Handle` and `Sortable.Target` are the flat `SortableHandle` and `SortableTarget` here.
 // - Attributes reach the rendered element, as React's rest props do.
 const preventNativeDrag = (event) => event.preventDefault();
 const SortableComponent = defineComponent({
@@ -23,10 +23,18 @@ const SortableComponent = defineComponent({
         disabled: { type: Boolean, default: false },
         /** Shows the grips of `SortableHandle`. A hidden grip still takes the keyboard, and the item drags from anywhere but a control. @default true in a table, otherwise false */
         handles: { type: Boolean, default: undefined },
+        /** Lists of one group trade items, and a `SortableTarget` of that group takes them. Give each list a `name`. */
+        group: { type: String, default: undefined },
+        /** Names the list in `move`. */
+        name: { type: String, default: undefined },
     },
     emits: {
         "update:value": (_value) => true,
         "change": (_value) => true,
+        /** An item moved, inside this list or out of it. Out of it the app updates both lists: `update:value` is for a move inside one. */
+        "move": (_move) => true,
+        /** A drag rests on a `SortableTarget` of the group: open what it stands for or go there. */
+        "hold": (_name) => true,
     },
     slots: Object,
     setup(props, { attrs, emit, slots }) {
@@ -34,16 +42,24 @@ const SortableComponent = defineComponent({
             const next = moveItem(props.value, from, to);
             emit("update:value", next);
             emit("change", next);
+            emit("move", { item: props.value[from], from: props.name, fromIndex: from, to: props.name, toIndex: to });
             await nextTick();
         };
+        const link = {
+            move: async (fromIndex, to, toIndex) => {
+                emit("move", { item: props.value[fromIndex], from: props.name, fromIndex, to, toIndex });
+                await nextTick();
+            },
+            hold: (name) => emit("hold", name),
+        };
         const onPointerdown = (event) => {
             if (!props.disabled) {
-                sortablePointerDown(event, event.currentTarget, props.layout, commit);
+                sortablePointerDown(event, event.currentTarget, props.layout, commit, link);
             }
         };
         const onKeydown = (event) => {
             if (!props.disabled)
-                void sortableKeyDown(event, event.currentTarget, commit);
+                void sortableKeyDown(event, event.currentTarget, commit, link);
         };
         return () => {
             const { class: className, ...rest } = attrs;
@@ -55,6 +71,8 @@ const SortableComponent = defineComponent({
                 "data-layout": props.layout,
                 "data-disabled": props.disabled ? "" : undefined,
                 "data-handles": props.handles?.toString(),
+                "data-group": props.group,
+                "data-name": props.name,
                 onPointerdown,
                 onKeydown,
                 "onDragstart": preventNativeDrag,
@@ -83,8 +101,35 @@ const SortableHandleComponent = defineComponent({
         };
     },
 });
+const SortableTargetComponent = defineComponent({
+    name: "SortableTarget",
+    inheritAttrs: false,
+    props: {
+        /** The `group` of the lists whose items it takes */
+        group: { type: String, required: true },
+        /** Names the target in `move` and `hold` on the list */
+        name: { type: String, required: true },
+        /** Element to render. @default "div" */
+        as: { type: [String, Object], default: "div" },
+    },
+    slots: Object,
+    setup(props, { attrs, slots }) {
+        return () => {
+            const { class: className, ...rest } = attrs;
+            const isElement = typeof props.as === "string";
+            return h(props.as, {
+                ...rest,
+                "class": clsx(s.Target, className),
+                "data-sortable-target": props.group,
+                "data-name": props.name,
+            }, isElement ? slots.default?.() : { default: () => slots.default?.() });
+        };
+    },
+});
 /** Reorders its direct children by dragging, from anywhere but a control, or by a `SortableHandle` where grips are shown. */
 export const Sortable = SortableComponent;
 /** The grip of an item. Arrow keys move the item while the handle has focus. */
 export const SortableHandle = SortableHandleComponent;
+/** A place outside the lists that takes an item whole: a folder, a category in a side list. */
+export const SortableTarget = SortableTargetComponent;
 //# sourceMappingURL=Sortable.js.map

package/dist/es/components/Sortable/Sortable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.js","sourceRoot":"","sources":["../../../../src/components/Sortable/Sortable.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport {\n  defineComponent,\n  h,\n  nextTick,\n  type Component,\n  type PropType,\n  type SlotsType,\n  type VNodeArrayChildren,\n  type VNodeChild,\n} from \"vue\"\nimport { moveItem, sortableKeyDown, sortablePointerDown, type SortableLayout } from \"../../lib/sortable.js\"\nimport { GripVertical } from \"../Icon/index.js\"\nimport s from \"@plexui/styles/components/Sortable/Sortable.module.css\"\n\n// Vue port of packages/ui/src/components/Sortable/Sortable.tsx.\n//\n// - `value` binds with `v-model:value`; `change` fires with it.\n// - React's `Sortable.Handle` is the flat `SortableHandle` here.\n// - Attributes reach the rendered element, as React's rest props do.\n\nconst preventNativeDrag = (event: Event) => event.preventDefault()\n\nconst SortableComponent = defineComponent({\n  name: \"Sortable\",\n  inheritAttrs: false,\n  props: {\n    /** The list, in the order of the children. Bind with `v-model:value`. */\n    value: { type: Array as PropType<readonly unknown[]>, required: true },\n    /** `list` for rows one under another, `grid` for items that stand side by side. @default \"list\" */\n    layout: { type: String as PropType<SortableLayout>, default: \"list\" },\n    /** Element to render, such as `TableBody` for table rows. @default \"div\" */\n    as: { type: [String, Object] as PropType<string | Component>, default: \"div\" },\n    /** Turns dragging off. @default false */\n    disabled: { type: Boolean, default: false },\n    /** Shows the grips of `SortableHandle`. A hidden grip still takes the keyboard, and the item drags from anywhere but a control. @default true in a table, otherwise false */\n    handles: { type: Boolean, default: undefined },\n  },\n  emits: {\n    \"update:value\": (_value: unknown[]) => true,\n    \"change\": (_value: unknown[]) => true,\n  },\n  slots: Object as SlotsType<{\n    /** The items, one direct child per entry of `value`, keyed by the entry and not by its index */\n    default?: () => VNodeChild\n  }>,\n  setup(props, { attrs, emit, slots }) {\n    const commit = async (from: number, to: number) => {\n      const next = moveItem(props.value, from, to)\n      emit(\"update:value\", next)\n      emit(\"change\", next)\n      await nextTick()\n    }\n\n    const onPointerdown = (event: PointerEvent) => {\n      if (!props.disabled) {\n        sortablePointerDown(event, event.currentTarget as HTMLElement, props.layout, commit)\n      }\n    }\n\n    const onKeydown = (event: KeyboardEvent) => {\n      if (!props.disabled) void sortableKeyDown(event, event.currentTarget as HTMLElement, commit)\n    }\n\n    return () => {\n      const { class: className, ...rest } = attrs\n      const isElement = typeof props.as === \"string\"\n      return h(\n        props.as as string,\n        {\n          ...rest,\n          \"class\": clsx(s.Sortable, className as ClassValue),\n          \"data-sortable\": \"\",\n          \"data-layout\": props.layout,\n          \"data-disabled\": props.disabled ? \"\" : undefined,\n          \"data-handles\": props.handles?.toString(),\n          onPointerdown,\n          onKeydown,\n          \"onDragstart\": preventNativeDrag,\n        },\n        isElement ? (slots.default?.() as VNodeArrayChildren) : { default: () => slots.default?.() },\n      )\n    }\n  },\n})\n\nconst SortableHandleComponent = defineComponent({\n  name: \"SortableHandle\",\n  inheritAttrs: false,\n  props: {\n    /** Name of the handle for assistive technology. @default \"Reorder\" */\n    ariaLabel: { type: String, default: \"Reorder\" },\n  },\n  slots: Object as SlotsType<{\n    /** The grip */\n    default?: () => VNodeChild\n  }>,\n  setup(props, { attrs, slots }) {\n    return () => {\n      const { class: className, ...rest } = attrs\n      return h(\n        \"button\",\n        {\n          ...rest,\n          \"type\": \"button\",\n          \"class\": clsx(s.Handle, className as ClassValue),\n          \"data-sortable-handle\": \"\",\n          \"aria-label\": props.ariaLabel,\n        },\n        (slots.default ? slots.default() : [h(GripVertical, { \"aria-hidden\": true })]) as VNodeArrayChildren,\n      )\n    }\n  },\n})\n\n/** Reorders its direct children by dragging, from anywhere but a control, or by a `SortableHandle` where grips are shown. */\nexport const Sortable = SortableComponent\n/** The grip of an item. Arrow keys move the item while the handle has focus. */\nexport const SortableHandle = SortableHandleComponent\nexport type { SortableLayout }\n"]}
+{"version":3,"file":"Sortable.js","sourceRoot":"","sources":["../../../../src/components/Sortable/Sortable.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx, { type ClassValue } from \"clsx\"\nimport {\n  defineComponent,\n  h,\n  nextTick,\n  type Component,\n  type PropType,\n  type SlotsType,\n  type VNodeArrayChildren,\n  type VNodeChild,\n} from \"vue\"\nimport { moveItem, sortableKeyDown, sortablePointerDown, type SortableLayout, type SortableMove } from \"../../lib/sortable.js\"\nimport { GripVertical } from \"../Icon/index.js\"\nimport s from \"@plexui/styles/components/Sortable/Sortable.module.css\"\n\n// Vue port of packages/ui/src/components/Sortable/Sortable.tsx.\n//\n// - `value` binds with `v-model:value`; `change` fires with it.\n// - React's `Sortable.Handle` and `Sortable.Target` are the flat `SortableHandle` and `SortableTarget` here.\n// - Attributes reach the rendered element, as React's rest props do.\n\nconst preventNativeDrag = (event: Event) => event.preventDefault()\n\nconst SortableComponent = defineComponent({\n  name: \"Sortable\",\n  inheritAttrs: false,\n  props: {\n    /** The list, in the order of the children. Bind with `v-model:value`. */\n    value: { type: Array as PropType<readonly unknown[]>, required: true },\n    /** `list` for rows one under another, `grid` for items that stand side by side. @default \"list\" */\n    layout: { type: String as PropType<SortableLayout>, default: \"list\" },\n    /** Element to render, such as `TableBody` for table rows. @default \"div\" */\n    as: { type: [String, Object] as PropType<string | Component>, default: \"div\" },\n    /** Turns dragging off. @default false */\n    disabled: { type: Boolean, default: false },\n    /** Shows the grips of `SortableHandle`. A hidden grip still takes the keyboard, and the item drags from anywhere but a control. @default true in a table, otherwise false */\n    handles: { type: Boolean, default: undefined },\n    /** Lists of one group trade items, and a `SortableTarget` of that group takes them. Give each list a `name`. */\n    group: { type: String, default: undefined },\n    /** Names the list in `move`. */\n    name: { type: String, default: undefined },\n  },\n  emits: {\n    \"update:value\": (_value: unknown[]) => true,\n    \"change\": (_value: unknown[]) => true,\n    /** An item moved, inside this list or out of it. Out of it the app updates both lists: `update:value` is for a move inside one. */\n    \"move\": (_move: SortableMove) => true,\n    /** A drag rests on a `SortableTarget` of the group: open what it stands for or go there. */\n    \"hold\": (_name: string) => true,\n  },\n  slots: Object as SlotsType<{\n    /** The items, one direct child per entry of `value`, keyed by the entry and not by its index */\n    default?: () => VNodeChild\n  }>,\n  setup(props, { attrs, emit, slots }) {\n    const commit = async (from: number, to: number) => {\n      const next = moveItem(props.value, from, to)\n      emit(\"update:value\", next)\n      emit(\"change\", next)\n      emit(\"move\", { item: props.value[from], from: props.name as string, fromIndex: from, to: props.name as string, toIndex: to })\n      await nextTick()\n    }\n\n    const link = {\n      move: async (fromIndex: number, to: string, toIndex?: number) => {\n        emit(\"move\", { item: props.value[fromIndex], from: props.name as string, fromIndex, to, toIndex })\n        await nextTick()\n      },\n      hold: (name: string) => emit(\"hold\", name),\n    }\n\n    const onPointerdown = (event: PointerEvent) => {\n      if (!props.disabled) {\n        sortablePointerDown(event, event.currentTarget as HTMLElement, props.layout, commit, link)\n      }\n    }\n\n    const onKeydown = (event: KeyboardEvent) => {\n      if (!props.disabled) void sortableKeyDown(event, event.currentTarget as HTMLElement, commit, link)\n    }\n\n    return () => {\n      const { class: className, ...rest } = attrs\n      const isElement = typeof props.as === \"string\"\n      return h(\n        props.as as string,\n        {\n          ...rest,\n          \"class\": clsx(s.Sortable, className as ClassValue),\n          \"data-sortable\": \"\",\n          \"data-layout\": props.layout,\n          \"data-disabled\": props.disabled ? \"\" : undefined,\n          \"data-handles\": props.handles?.toString(),\n          \"data-group\": props.group,\n          \"data-name\": props.name,\n          onPointerdown,\n          onKeydown,\n          \"onDragstart\": preventNativeDrag,\n        },\n        isElement ? (slots.default?.() as VNodeArrayChildren) : { default: () => slots.default?.() },\n      )\n    }\n  },\n})\n\nconst SortableHandleComponent = defineComponent({\n  name: \"SortableHandle\",\n  inheritAttrs: false,\n  props: {\n    /** Name of the handle for assistive technology. @default \"Reorder\" */\n    ariaLabel: { type: String, default: \"Reorder\" },\n  },\n  slots: Object as SlotsType<{\n    /** The grip */\n    default?: () => VNodeChild\n  }>,\n  setup(props, { attrs, slots }) {\n    return () => {\n      const { class: className, ...rest } = attrs\n      return h(\n        \"button\",\n        {\n          ...rest,\n          \"type\": \"button\",\n          \"class\": clsx(s.Handle, className as ClassValue),\n          \"data-sortable-handle\": \"\",\n          \"aria-label\": props.ariaLabel,\n        },\n        (slots.default ? slots.default() : [h(GripVertical, { \"aria-hidden\": true })]) as VNodeArrayChildren,\n      )\n    }\n  },\n})\n\nconst SortableTargetComponent = defineComponent({\n  name: \"SortableTarget\",\n  inheritAttrs: false,\n  props: {\n    /** The `group` of the lists whose items it takes */\n    group: { type: String, required: true },\n    /** Names the target in `move` and `hold` on the list */\n    name: { type: String, required: true },\n    /** Element to render. @default \"div\" */\n    as: { type: [String, Object] as PropType<string | Component>, default: \"div\" },\n  },\n  slots: Object as SlotsType<{\n    /** What the target shows */\n    default?: () => VNodeChild\n  }>,\n  setup(props, { attrs, slots }) {\n    return () => {\n      const { class: className, ...rest } = attrs\n      const isElement = typeof props.as === \"string\"\n      return h(\n        props.as as string,\n        {\n          ...rest,\n          \"class\": clsx(s.Target, className as ClassValue),\n          \"data-sortable-target\": props.group,\n          \"data-name\": props.name,\n        },\n        isElement ? (slots.default?.() as VNodeArrayChildren) : { default: () => slots.default?.() },\n      )\n    }\n  },\n})\n\n/** Reorders its direct children by dragging, from anywhere but a control, or by a `SortableHandle` where grips are shown. */\nexport const Sortable = SortableComponent\n/** The grip of an item. Arrow keys move the item while the handle has focus. */\nexport const SortableHandle = SortableHandleComponent\n/** A place outside the lists that takes an item whole: a folder, a category in a side list. */\nexport const SortableTarget = SortableTargetComponent\nexport type { SortableLayout, SortableMove }\n"]}

package/dist/es/components/Sortable/index.js

@@ -1,2 +1,2 @@
-export { Sortable, SortableHandle } from "./Sortable.js";
+export { Sortable, SortableHandle, SortableTarget } from "./Sortable.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Sortable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAuB,MAAM,eAAe,CAAA","sourcesContent":["export { Sortable, SortableHandle, type SortableLayout } from \"./Sortable.js\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAA0C,MAAM,eAAe,CAAA","sourcesContent":["export { Sortable, SortableHandle, SortableTarget, type SortableLayout, type SortableMove } from \"./Sortable.js\"\n"]}

package/dist/es/lib/sortable.js

@@ -1,6 +1,8 @@
 import s from "@plexui/styles/components/Sortable/Sortable.module.css";
 const START_DISTANCE = 4;
 const TOUCH_HOLD = 200;
+// Long enough to pass over a target on the way to another
+const TARGET_HOLD = 500;
 const SCROLL_EDGE = 80;
 const SCROLL_SLOW = 4;
 const SCROLL_FAST = 30;
@@ -10,6 +12,8 @@ const PART = 4;
 // --cubic-enter: an animation here cannot read a CSS variable
 const EASING = "cubic-bezier(.19,1,.22,1)";
 const HANDLE = "[data-sortable-handle]";
+const GRAB = "[data-sortable-grab]";
+const STATIC = "data-sortable-static";
 const INTERACTIVE = [
     "a[href]",
     "button",
@@ -29,7 +33,20 @@ const INTERACTIVE = [
 ].join(",");
 // Read at the moment of use: the setting can change while the page is open
 const reduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-const itemsOf = (list) => [...list.children];
+/** How far the line stands in from the sides of the list */
+const lineInset = (list) => {
+    const inset = parseFloat(getComputedStyle(list).getPropertyValue("--sortable-line-inset"));
+    return Number.isNaN(inset) ? LINE_INSET : inset;
+};
+/** A head row or an empty message stands among the items and is not one of them */
+const itemsOf = (list) => [...list.children].filter((item) => !item.hasAttribute(STATIC));
+/** The lists a drag from this one can reach, in the order of the page */
+const listsOf = (list) => {
+    const { group } = list.dataset;
+    if (!group)
+        return [list];
+    return [...document.querySelectorAll(`[data-sortable][data-group="${CSS.escape(group)}"]:not([data-disabled])`)];
+};
 /** Grips stand in a table, elsewhere only when the list asks for them */
 const showsHandles = (list) => (list.dataset.handles ?? String(list.tagName === "TBODY")) === "true";
 /** The direct child of the list that holds `target` */
@@ -62,14 +79,21 @@ const nameOf = (item) => labelOf(item) || item.querySelector("img")?.alt || "";
 function makeChip(item) {
     const chip = document.createElement("div");
     chip.className = s.Chip;
-    const image = item.querySelector("img");
-    if (image) {
+    const image = item.querySelector("[data-sortable-image], img");
+    if (image instanceof HTMLImageElement) {
         const picture = document.createElement("img");
         picture.className = s.ChipImage;
         picture.src = image.currentSrc || image.src;
         picture.alt = "";
         chip.append(picture);
     }
+    else if (image) {
+        // A cropped background: the chip takes the element as it stands, at the chip's size
+        const picture = image.cloneNode(false);
+        picture.className = s.ChipImage;
+        picture.hidden = false;
+        chip.append(picture);
+    }
     const text = labelOf(item);
     if (text) {
         const label = document.createElement("span");
@@ -91,8 +115,8 @@ function announce(text) {
     }
     region.textContent = text;
 }
-const scrollParent = (list) => {
-    for (let node = list.parentElement; node && node !== document.body; node = node.parentElement) {
+const scrollParent = (start) => {
+    for (let node = start; node && node !== document.body; node = node.parentElement) {
         if (/auto|scroll/.test(getComputedStyle(node).overflowY) && node.scrollHeight > node.clientHeight)
             return node;
     }
@@ -102,6 +126,12 @@ const scrollParent = (list) => {
 const scrollStep = (depth) => SCROLL_SLOW + (SCROLL_FAST - SCROLL_SLOW) * Math.min(depth / SCROLL_EDGE, 1);
 function listSlots(list, items) {
     const box = list.getBoundingClientRect();
+    const inset = lineInset(list);
+    if (!items.length) {
+        // Above a message or an empty row: the line must not cross its text
+        const rest = (list.lastElementChild ?? list).getBoundingClientRect();
+        return [{ gap: 0, x: inset, y: rest.top - box.top, length: box.width - inset * 2 }];
+    }
     const rects = items.map((item) => item.getBoundingClientRect());
     return Array.from({ length: items.length + 1 }, (_, gap) => {
         const above = rects[gap - 1];
@@ -109,9 +139,9 @@ function listSlots(list, items) {
         const y = above && below ? (above.bottom + below.top) / 2 : (below?.top ?? above.bottom);
         return {
             gap,
-            x: LINE_INSET,
+            x: inset,
             y: y - box.top,
-            length: box.width - LINE_INSET * 2,
+            length: box.width - inset * 2,
             before: items[gap - 1],
             after: items[gap],
         };
@@ -120,6 +150,8 @@ function listSlots(list, items) {
 // One slot per gap, and two where a line wraps: the end of one line and the start of the next
 function gridSlots(list, items) {
     const box = list.getBoundingClientRect();
+    if (!items.length)
+        return [{ gap: 0, x: 0, y: 0, length: box.height }];
     const half = (parseFloat(getComputedStyle(list).columnGap) || 8) / 2;
     const rects = items.map((item) => item.getBoundingClientRect());
     const slots = [];
@@ -153,9 +185,9 @@ function flyChip(chip, to, layout) {
     ], { duration: 200, easing: EASING, fill: "forwards" }).onfinish = () => chip.remove();
 }
 /** The items that changed place slide there from where they stood */
-async function commitWithFlip(items, from, to, commit, skip) {
+async function flip(items, work, skip) {
     const before = new Map(items.map((item) => [item, item.getBoundingClientRect()]));
-    await commit(from, to);
+    await work();
     if (reduced())
         return;
     items
@@ -173,7 +205,7 @@ const swallow = (event) => {
     event.stopPropagation();
     event.preventDefault();
 };
-function startDrag(event, list, source, layout, immediate, commit) {
+function startDrag(event, list, source, layout, immediate, commit, link) {
     const touch = event.pointerType === "touch" && !immediate;
     const origin = { x: event.clientX, y: event.clientY };
     const pointer = { ...origin };
@@ -181,6 +213,8 @@ function startDrag(event, list, source, layout, immediate, commit) {
     const style = getComputedStyle(list);
     const part = parseFloat(layout === "grid" ? style.columnGap : style.rowGap) ? PART : 0;
     const scroller = scrollParent(list);
+    const { group } = list.dataset;
+    const targets = group ? `[data-sortable-target="${CSS.escape(group)}"]` : undefined;
     let drag;
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", onUp);
@@ -219,12 +253,17 @@ function startDrag(event, list, source, layout, immediate, commit) {
         window.removeEventListener("keydown", onKey, true);
         window.removeEventListener("touchmove", blockScroll);
     }
+    function measure() {
+        return listsOf(list).map((entry) => {
+            const items = itemsOf(entry);
+            entry.setAttribute("data-dragging", "");
+            return { list: entry, items, slots: layout === "grid" ? gridSlots(entry, items) : listSlots(entry, items) };
+        });
+    }
     function begin() {
-        const items = itemsOf(list);
-        const slots = layout === "grid" ? gridSlots(list, items) : listSlots(list, items);
+        const areas = measure();
         window.getSelection()?.removeAllRanges();
         document.documentElement.classList.add(s.Dragging);
-        list.setAttribute("data-dragging", "");
         source.setAttribute("data-sortable-source", "");
         window.addEventListener("keydown", onKey, true);
         window.addEventListener("touchmove", blockScroll, { passive: false });
@@ -234,25 +273,32 @@ function startDrag(event, list, source, layout, immediate, commit) {
         line.hidden = true;
         document.body.append(line);
         const { width, height } = chip.getBoundingClientRect();
-        drag = { chip, line, width, height, items, slots };
+        drag = { chip, line, width, height, areas };
         tick();
     }
     function tick() {
         if (!drag)
             return;
+        drag.under = targets ? document.elementFromPoint(pointer.x, pointer.y) : undefined;
         autoScroll();
         update();
         drag.frame = requestAnimationFrame(tick);
     }
+    /** A column of targets with a scroll of its own scrolls alone, the page stays */
+    function panelUnder() {
+        const panel = targets && drag?.under ? scrollParent(drag.under) : undefined;
+        return panel && panel !== scroller && panel.querySelector(targets) ? panel : undefined;
+    }
     function autoScroll() {
-        const box = scroller?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight };
+        const area = panelUnder() ?? scroller;
+        const box = area?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight };
         const above = box.top + SCROLL_EDGE - pointer.y;
         const below = pointer.y - box.bottom + SCROLL_EDGE;
         const step = above > 0 ? -scrollStep(above) : below > 0 ? scrollStep(below) : 0;
         if (!step)
             return;
-        if (scroller)
-            scroller.scrollTop += step;
+        if (area)
+            area.scrollTop += step;
         else
             window.scrollBy(0, step);
     }
@@ -260,93 +306,145 @@ function startDrag(event, list, source, layout, immediate, commit) {
         if (!drag)
             return;
         drag.chip.style.transform = `translate(${pointer.x - drag.width / 2}px, ${pointer.y - drag.height / 2}px)`;
+        const target = (targets && drag.under?.closest(targets)) || undefined;
+        if (target !== drag.target)
+            pointAt(target);
         const box = source.getBoundingClientRect();
         const overSource = pointer.x >= box.left && pointer.x <= box.right && pointer.y >= box.top && pointer.y <= box.bottom;
         source.toggleAttribute("data-sortable-away", !overSource);
-        showGap(overSource ? undefined : nearestSlot());
+        showGap(target || overSource ? undefined : nearestSlot());
+    }
+    function pointAt(target) {
+        if (!drag)
+            return;
+        clearTimeout(drag.rest);
+        drag.target?.removeAttribute("data-over");
+        drag.target = target;
+        if (!target)
+            return;
+        target.setAttribute("data-over", "");
+        drag.rest = setTimeout(() => {
+            link?.hold?.(target.dataset.name);
+            // What the hold changed is drawn two frames on: a list opened, the page jumped
+            requestAnimationFrame(() => requestAnimationFrame(() => drag && (drag.areas = measure())));
+        }, TARGET_HOLD);
+    }
+    function distance(slot, box) {
+        if (layout === "list")
+            return Math.abs(pointer.y - (box.top + slot.y));
+        const top = box.top + slot.y;
+        return Math.hypot(pointer.x - (box.left + slot.x), Math.max(top - pointer.y, 0, pointer.y - top - slot.length));
     }
     function nearestSlot() {
         if (!drag)
             return undefined;
-        const box = list.getBoundingClientRect();
-        const near = pointer.x >= box.left - NEAR_LIST &&
-            pointer.x <= box.right + NEAR_LIST &&
-            pointer.y >= box.top - NEAR_LIST &&
-            pointer.y <= box.bottom + NEAR_LIST;
-        if (!near)
+        let best;
+        let closest = Infinity;
+        for (const area of drag.areas) {
+            const box = area.list.getBoundingClientRect();
+            const near = pointer.x >= box.left - NEAR_LIST &&
+                pointer.x <= box.right + NEAR_LIST &&
+                pointer.y >= box.top - NEAR_LIST &&
+                pointer.y <= box.bottom + NEAR_LIST;
+            if (!near)
+                continue;
+            for (const slot of area.slots) {
+                const away = distance(slot, box);
+                if (away < closest) {
+                    closest = away;
+                    best = { area, slot };
+                }
+            }
+        }
+        if (!best)
             return undefined;
-        const distance = (slot) => {
-            if (layout === "list")
-                return Math.abs(pointer.y - (box.top + slot.y));
-            const top = box.top + slot.y;
-            return Math.hypot(pointer.x - (box.left + slot.x), Math.max(top - pointer.y, 0, pointer.y - top - slot.length));
-        };
-        const best = drag.slots.reduce((nearest, slot) => (distance(slot) < distance(nearest) ? slot : nearest));
-        const index = drag.items.indexOf(source);
-        return best.gap === index || best.gap === index + 1 ? undefined : best;
+        const index = best.area.items.indexOf(source);
+        return index >= 0 && (best.slot.gap === index || best.slot.gap === index + 1) ? undefined : best;
     }
-    function shift(slot, distance) {
-        const move = (item, by) => {
+    function shift(slot, by) {
+        const move = (item, offset) => {
             if (!item || !part)
                 return;
-            item.style.transform = distance
+            item.style.transform = by
                 ? layout === "grid"
-                    ? `translateX(${by}px)`
-                    : `translateY(${by}px)`
+                    ? `translateX(${offset}px)`
+                    : `translateY(${offset}px)`
                 : "";
         };
-        move(slot?.before, -distance);
-        move(slot?.after, distance);
+        move(slot?.before, -by);
+        move(slot?.after, by);
     }
     function showGap(found) {
         if (!drag)
             return;
-        if (found !== drag.found) {
-            shift(drag.found, 0);
-            shift(found, part);
+        if (found?.slot !== drag.found?.slot) {
+            shift(drag.found?.slot, 0);
+            shift(found?.slot, part);
         }
         drag.found = found;
         drag.line.hidden = !found;
         if (!found)
             return;
-        const box = list.getBoundingClientRect();
+        const box = found.area.list.getBoundingClientRect();
         if (layout === "grid") {
-            drag.line.style.transform = `translate(${box.left + found.x - 1}px, ${box.top + found.y}px)`;
-            drag.line.style.height = `${found.length}px`;
+            drag.line.style.transform = `translate(${box.left + found.slot.x - 1}px, ${box.top + found.slot.y}px)`;
+            drag.line.style.height = `${found.slot.length}px`;
         }
         else {
-            drag.line.style.transform = `translate(${box.left + found.x}px, ${box.top + found.y - 1}px)`;
-            drag.line.style.width = `${found.length}px`;
+            drag.line.style.transform = `translate(${box.left + found.slot.x}px, ${box.top + found.slot.y - 1}px)`;
+            drag.line.style.width = `${found.slot.length}px`;
         }
     }
     function restoreSource() {
         source.removeAttribute("data-sortable-source");
         source.removeAttribute("data-sortable-away");
     }
-    function settle(chip) {
-        flyChip(chip, source.isConnected ? source.getBoundingClientRect() : undefined, layout);
-        if (!reduced() && source.isConnected)
-            source.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, easing: EASING });
+    function settle(chip, item = source) {
+        const shown = item?.isConnected ? item : undefined;
+        flyChip(chip, shown?.getBoundingClientRect(), layout);
+        if (!reduced() && shown)
+            shown.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, easing: EASING });
     }
-    async function land(chip, items, { gap }, clear) {
-        const from = items.indexOf(source);
-        const to = gap > from ? gap - 1 : gap;
+    async function land(chip, areas, { area, slot: { gap } }, clear) {
+        const from = itemsOf(list).indexOf(source);
         restoreSource();
-        const clearAndCommit = (moved, place) => {
+        if (area.list === list) {
+            const to = gap > from ? gap - 1 : gap;
+            await flip(area.items, () => {
+                clear();
+                return commit(from, to);
+            }, source);
+            announce(`${nameOf(source)}, ${to + 1} / ${area.items.length}`);
+            settle(chip);
+            return;
+        }
+        const name = nameOf(source);
+        await flip(areas.flatMap(({ items }) => items), () => {
             clear();
-            return commit(moved, place);
-        };
-        await commitWithFlip(items, from, to, clearAndCommit, source);
-        announce(`${nameOf(source)}, ${to + 1} / ${items.length}`);
-        settle(chip);
+            return link?.move(from, area.list.dataset.name, gap);
+        }, source);
+        announce(`${name}, ${gap + 1} / ${area.items.length + 1}`);
+        // A framework builds the row anew under its new parent
+        settle(chip, source.isConnected ? source : itemsOf(area.list)[gap]);
+    }
+    async function dropOn(chip, areas, name, clear) {
+        const from = itemsOf(list).indexOf(source);
+        restoreSource();
+        await flip(areas.flatMap(({ items }) => items), () => {
+            clear();
+            return link?.move(from, name);
+        }, source);
+        flyChip(chip, undefined, layout);
     }
     function finish(drop) {
         stopListening();
         if (!drag)
             return;
-        const { chip, line, found, items, frame } = drag;
+        const { chip, line, found, areas, frame, target, rest } = drag;
         if (frame)
             cancelAnimationFrame(frame);
+        clearTimeout(rest);
+        target?.removeAttribute("data-over");
         // The pointer lifts over a row: that click must not act on it
         window.addEventListener("click", swallow, { capture: true, once: true });
         setTimeout(() => window.removeEventListener("click", swallow, { capture: true }));
@@ -354,12 +452,17 @@ function startDrag(event, list, source, layout, immediate, commit) {
         drag = undefined;
         // On a drop this waits for the flip to read where the parted items stand
         const clear = () => {
-            list.removeAttribute("data-dragging");
+            areas.forEach((area) => area.list.removeAttribute("data-dragging"));
             document.documentElement.classList.remove(s.Dragging);
-            shift(found, 0);
+            shift(found?.slot, 0);
         };
-        if (drop && found) {
-            void land(chip, items, found, clear);
+        const targetName = target?.dataset.name;
+        if (drop && targetName && targetName !== list.dataset.name) {
+            void dropOn(chip, areas, targetName, clear);
+            return;
+        }
+        if (drop && found && !target) {
+            void land(chip, areas, found, clear);
             return;
         }
         clear();
@@ -368,22 +471,24 @@ function startDrag(event, list, source, layout, immediate, commit) {
     }
 }
 /** Starts a drag from a press inside the list. Goes on the list's `pointerdown`. */
-export function sortablePointerDown(event, list, layout, commit) {
+export function sortablePointerDown(event, list, layout, commit, link) {
     const target = event.target;
     if (event.button || target.closest("[data-sortable]") !== list)
         return;
     const source = itemOf(list, target);
-    if (!source)
+    if (!source || source.hasAttribute(STATIC))
         return;
     const handle = target.closest(HANDLE);
-    // A grip in sight is the only way to drag, otherwise anything but a control starts it
-    if (source.querySelector(HANDLE) && showsHandles(list) ? !handle : target.closest(INTERACTIVE))
+    const control = target.closest(INTERACTIVE);
+    // A grip in sight is the only way to drag, otherwise anything but a control
+    // starts it, and a control that opens its row on a click may let a pull through
+    if (source.querySelector(HANDLE) && showsHandles(list) ? !handle : control && !control.closest(GRAB))
         return;
-    startDrag(event, list, source, layout, !!handle, commit);
+    startDrag(event, list, source, layout, !!handle, commit, link);
 }
 const KEY_STEPS = { ArrowUp: -1, ArrowLeft: -1, ArrowDown: 1, ArrowRight: 1 };
 /** Moves the focused handle's item with the arrow keys. Goes on the list's `keydown`. */
-export async function sortableKeyDown(event, list, commit) {
+export async function sortableKeyDown(event, list, commit, link) {
     const step = KEY_STEPS[event.key];
     const target = event.target;
     if (!step || target.closest("[data-sortable]") !== list)
@@ -394,10 +499,23 @@ export async function sortableKeyDown(event, list, commit) {
     const items = itemsOf(list);
     const from = items.indexOf(source);
     const to = from + step;
-    if (to < 0 || to >= items.length)
+    if (to < 0 || to >= items.length) {
+        // Past the end of the list: on to the next list of the group
+        const lists = listsOf(list);
+        const next = lists[lists.indexOf(list) + step];
+        if (!next || !link)
+            return;
+        event.preventDefault();
+        const place = step > 0 ? 0 : itemsOf(next).length;
+        const name = nameOf(source);
+        await flip(lists.flatMap(itemsOf), () => link.move(from, next.dataset.name, place));
+        const landed = itemsOf(next)[place];
+        (landed?.querySelector(HANDLE) ?? landed)?.focus();
+        announce(`${name}, ${place + 1} / ${itemsOf(next).length}`);
         return;
+    }
     event.preventDefault();
-    await commitWithFlip(items, from, to, commit);
+    await flip(items, () => commit(from, to));
     // Moving an element in the document drops its focus
     if (target.isConnected && document.activeElement !== target)
         target.focus();