@qw-ui/core 0.3.0-next.40 → 0.3.0-next.42

package/dist/reorder/index.js

@@ -0,0 +1,720 @@
+import { createMachine } from "@zag-js/core";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+//#region src/reorder/reorder.ts
+/** Stable DOM parts shared by every adapter. */
+const REORDER_PARTS = [
+	"root",
+	"list",
+	"item",
+	"content",
+	"handle",
+	"instructions",
+	"status"
+];
+/** What started the active drag. */
+const REORDER_SOURCES = ["pointer", "keyboard"];
+/** Pointer travel in CSS pixels before a press on a handle becomes a drag. */
+const REORDER_DEFAULT_THRESHOLD = 8;
+/** Band in CSS pixels at the block edges of the scroll container where a pointer drag auto-scrolls. */
+const REORDER_AUTO_SCROLL_EDGE = 48;
+/** Maximum auto-scroll step in CSS pixels per frame. */
+const REORDER_AUTO_SCROLL_SPEED = 16;
+/** Default texts. Templates replace {text}, {position} (1-based) and {count}. */
+const REORDER_DEFAULT_TEXTS = {
+	label: "排序列表",
+	handleLabel: "拖动排序 {text}",
+	instructions: "按空格键或回车键拿起，按上下方向键移动，再按空格键或回车键放下，按 Esc 键取消。",
+	pickedText: "已拿起 {text}，第 {position} 项，共 {count} 项",
+	movedText: "{text} 移到第 {position} 项，共 {count} 项",
+	droppedText: "已放下 {text}，第 {position} 项，共 {count} 项",
+	rejectedText: "{text} 未移动，仍为第 {position} 项，共 {count} 项",
+	cancelledText: "已取消，{text} 回到第 {position} 项，共 {count} 项"
+};
+const text = (value, fallback) => typeof value === "string" && value.trim() ? value : fallback;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const finite = (value, fallback = 0) => typeof value === "number" && Number.isFinite(value) ? value : fallback;
+const field = (item, name) => item !== null && typeof item === "object" ? item[name] : void 0;
+const accessor = (value) => typeof value === "function" || typeof value === "string" && value.trim() ? value : void 0;
+const primitive = (item) => typeof item === "string" || typeof item === "number";
+const TEXT_NAMES = Object.keys(REORDER_DEFAULT_TEXTS);
+function resolveReorderKey(item, index, itemKey) {
+	const raw = typeof itemKey === "function" ? itemKey(item, index) : typeof itemKey === "string" ? field(item, itemKey) : primitive(item) ? item : field(item, "key");
+	if (typeof raw === "string" && raw.length) return raw;
+	if (typeof raw === "number" && Number.isFinite(raw)) return String(raw);
+	throw new TypeError(`Reorder item ${index} requires a nonempty string or finite number key`);
+}
+function resolveReorderText(item, index, itemText) {
+	const raw = typeof itemText === "function" ? itemText(item, index) : typeof itemText === "string" ? field(item, itemText) : primitive(item) ? item : field(item, "text");
+	return typeof raw === "string" ? raw : typeof raw === "number" && Number.isFinite(raw) ? String(raw) : "";
+}
+function resolveReorderDisabled(item, index, itemDisabled) {
+	return (typeof itemDisabled === "function" ? itemDisabled(item, index) : field(item, typeof itemDisabled === "string" ? itemDisabled : "disabled")) === true;
+}
+/** Missing or duplicate keys throw: a silent fallback would break row identity. */
+function resolveReorderState(props = {}) {
+	const items = Array.isArray(props.items) ? props.items : [], seen = /* @__PURE__ */ new Set(), entries = [];
+	const itemKey = accessor(props.itemKey), itemText = accessor(props.itemText), itemDisabled = accessor(props.itemDisabled);
+	items.forEach((item, index) => {
+		const key = resolveReorderKey(item, index, itemKey);
+		if (seen.has(key)) throw new TypeError(`Reorder item keys must be unique: ${key}`);
+		seen.add(key);
+		entries.push({
+			key,
+			index,
+			item,
+			text: resolveReorderText(item, index, itemText) || key,
+			disabled: resolveReorderDisabled(item, index, itemDisabled)
+		});
+	});
+	const threshold = finite(props.threshold, -1);
+	return {
+		entries,
+		keys: entries.map((entry) => entry.key),
+		disabled: !!props.disabled,
+		threshold: threshold >= 0 ? threshold : 8,
+		texts: Object.fromEntries(TEXT_NAMES.map((name) => [name, text(props[name], REORDER_DEFAULT_TEXTS[name])]))
+	};
+}
+/** Effective order: the known keys of `order` (first occurrence), then the remaining keys in items order. */
+function resolveReorderOrder(keys, order) {
+	if (!Array.isArray(order)) return [...keys];
+	const known = new Set(keys), seen = /* @__PURE__ */ new Set(), result = [];
+	for (const key of order) if (typeof key === "string" && known.has(key) && !seen.has(key)) {
+		seen.add(key);
+		result.push(key);
+	}
+	for (const key of keys) if (!seen.has(key)) result.push(key);
+	return result;
+}
+/** Entries in the effective order, with `index` as the position in that order. */
+function getReorderEntries(state, order) {
+	const byKey = new Map(state.entries.map((entry) => [entry.key, entry]));
+	return resolveReorderOrder(state.keys, order).map((key, index) => ({
+		...byKey.get(key),
+		index
+	}));
+}
+/** Move one key; `to` is the final index (clamped). Never mutates the input. */
+function moveReorderKeys(order, from, to) {
+	const next = [...order];
+	if (!Number.isInteger(from) || from < 0 || from >= next.length) return next;
+	const [key] = next.splice(from, 1);
+	next.splice(clamp(Math.round(finite(to, from)), 0, next.length), 0, key);
+	return next;
+}
+function formatReorderText(template, values) {
+	return template.replace(/\{(text|position|count)\}/g, (_match, name) => String(values[name]));
+}
+/** Distance the other items shift: the dragged item's block size plus the gap to its neighbour. */
+function getReorderPitch(rects, from) {
+	const rect = rects[from];
+	if (!rect) return 0;
+	const next = rects[from + 1], previous = rects[from - 1];
+	const gap = next ? next.top - rect.bottom : previous ? rect.top - previous.bottom : 0;
+	return Math.max(0, rect.bottom - rect.top + Math.max(0, gap));
+}
+/** Keep the dragged item between the first item's top and the last item's bottom. */
+function clampReorderOffset(rects, from, offset) {
+	const rect = rects[from], first = rects[0], last = rects[rects.length - 1];
+	if (!rect || !first || !last || !Number.isFinite(offset)) return 0;
+	return clamp(offset, Math.min(0, first.top - rect.top), Math.max(0, last.bottom - rect.bottom));
+}
+/** Final index of the dragged item: it passes another item once its centre crosses that item's centre. Rects are in DOM order. */
+function getReorderTargetIndex(rects, from, offset) {
+	const rect = rects[from];
+	if (!rect || !Number.isFinite(offset)) return clamp(from, 0, Math.max(0, rects.length - 1));
+	const centre = (rect.top + rect.bottom) / 2 + offset, mid = (index) => (rects[index].top + rects[index].bottom) / 2;
+	let to = from;
+	while (to + 1 < rects.length && mid(to + 1) < centre) to += 1;
+	if (to === from) while (to > 0 && mid(to - 1) > centre) to -= 1;
+	return to;
+}
+/** Offset that places the dragged item exactly in slot `to` (keyboard moves). */
+function getReorderSlotOffset(rects, from, to) {
+	const rect = rects[from], target = rects[to];
+	if (!rect || !target) return 0;
+	return to > from ? target.bottom - rect.bottom : target.top - rect.top;
+}
+/** Preview shift of a non-dragged item at `index` while the dragged item targets `to`. */
+function getReorderShift(index, drag) {
+	if (index > drag.from && index <= drag.to) return -drag.pitch;
+	if (index < drag.from && index >= drag.to) return drag.pitch;
+	return 0;
+}
+/** Keyboard target while picked up: ArrowUp/ArrowDown step, Home/End jump, clamped to [0, count - 1]; null for other keys. */
+function getReorderKeyTarget(key, to, count) {
+	const next = key === "ArrowUp" ? to - 1 : key === "ArrowDown" ? to + 1 : key === "Home" ? 0 : key === "End" ? count - 1 : null;
+	return next === null ? null : clamp(next, 0, Math.max(0, count - 1));
+}
+/** Auto-scroll step for a pointer at `y` within the viewport band [top, bottom]; negative scrolls up, 0 outside the edge bands. */
+function getReorderAutoScroll(y, top, bottom, edge = 48, speed = 16) {
+	const band = Math.min(edge, (bottom - top) / 2);
+	if (!Number.isFinite(y) || !(band > 0)) return 0;
+	if (y < top + band) return -Math.ceil(speed * Math.min(1, (top + band - y) / band));
+	if (y > bottom - band) return Math.ceil(speed * Math.min(1, (y - bottom + band) / band));
+	return 0;
+}
+function createReorderProps(props = {}) {
+	if (props.id !== void 0 && (typeof props.id !== "string" || !props.id.trim())) throw new TypeError("Reorder requires a nonempty instance id when provided");
+	return { ...props };
+}
+const PROP_NAMES = [
+	"items",
+	"itemKey",
+	"itemText",
+	"itemDisabled",
+	"disabled",
+	"threshold",
+	...TEXT_NAMES
+];
+const stateOf = (prop) => resolveReorderState(Object.fromEntries(PROP_NAMES.map((name) => [name, prop(name)])));
+const keysOf = (value) => Array.isArray(value) ? value.filter((key) => typeof key === "string") : [];
+const sameKeys = (a, b) => !!a && !!b && a.length === b.length && a.every((key, index) => key === b[index]);
+/** Live state: props re-resolved on every read; the order reconciled against the current items. */
+function live(prop, context) {
+	const state = stateOf(prop), entries = getReorderEntries(state, context.get("value")), order = entries.map((entry) => entry.key);
+	return {
+		state,
+		entries,
+		order,
+		signature: order.join("\0")
+	};
+}
+const ids = (scope) => {
+	const base = `reorder:${scope.id}`;
+	return {
+		root: base,
+		list: `${base}:list`,
+		instructions: `${base}:instructions`,
+		status: `${base}:status`,
+		item: (key) => `${base}:item:${encodeURIComponent(key)}`,
+		handle: (key) => `${base}:handle:${encodeURIComponent(key)}`
+	};
+};
+function announce(context, template, values) {
+	context.set("announcement", formatReorderText(template, {
+		text: values.text,
+		position: values.index + 1,
+		count: values.count
+	}));
+}
+function setDrag({ context, refs }, drag) {
+	refs.set("drag", drag);
+	context.set("drag", drag);
+}
+/** End the active drag without changing the order. */
+function cancelDrag(params) {
+	const drag = params.refs.get("drag");
+	if (!drag) return;
+	setDrag(params, null);
+	params.refs.get("reset")?.();
+	announce(params.context, stateOf(params.prop).texts.cancelledText, {
+		text: drag.text,
+		index: drag.from,
+		count: drag.count
+	});
+}
+/** An order/data change, a disabled list or a disabled dragged item invalidates the measured drag: cancel it. */
+function reconcileDrag(params) {
+	const drag = params.refs.get("drag");
+	if (!drag) return;
+	const now = live(params.prop, params.context), entry = now.entries[drag.from];
+	if (now.state.disabled || now.signature !== drag.signature || entry?.key !== drag.key || entry.disabled) cancelDrag(params);
+}
+/** The block-scrollable ancestor (the root included), or null for the page viewport. */
+function scrollParent(root) {
+	const doc = root.ownerDocument, win = doc.defaultView;
+	for (let node = root; node && node !== doc.body && node !== doc.documentElement; node = node.parentElement) {
+		const overflow = win?.getComputedStyle(node).overflowY ?? "";
+		if ((overflow === "auto" || overflow === "scroll" || overflow === "overlay") && node.scrollHeight > node.clientHeight) return node;
+	}
+	return null;
+}
+/** Core owns pointer ownership/threshold/capture, insertion math, keyboard moves, announcements, proposals, focus retention and cleanup. */
+const reorderMachine = createMachine({
+	props: ({ props }) => createReorderProps(props),
+	initialState: () => "ready",
+	states: { ready: {} },
+	context: ({ bindable, prop }) => ({
+		value: bindable(() => ({
+			defaultValue: resolveReorderOrder(stateOf(prop).keys, prop("defaultValue")),
+			value: prop("value") === void 0 ? void 0 : keysOf(prop("value")),
+			isEqual: sameKeys,
+			hash: (value) => value.join("\0")
+		})),
+		drag: bindable(() => ({ defaultValue: null })),
+		announcement: bindable(() => ({ defaultValue: "" }))
+	}),
+	refs: () => ({
+		drag: null,
+		pending: null,
+		reset: null,
+		settle: null,
+		restore: null
+	}),
+	watch({ track, prop, context, action }) {
+		track([() => live(prop, context).signature], () => action(["orderChange"]));
+		track([() => !!prop("disabled"), () => stateOf(prop).entries.map((entry) => entry.disabled ? 1 : 0).join("")], () => action(["reconcile"]));
+	},
+	on: {
+		"DRAG.START": { actions: ["start"] },
+		"DRAG.MOVE": { actions: ["move"] },
+		"DRAG.DROP": { actions: ["drop"] },
+		"DRAG.CANCEL": { actions: ["cancel"] },
+		"DROP.SETTLE": { actions: ["settle"] }
+	},
+	effects: ["trackInteraction"],
+	implementations: {
+		actions: {
+			start(params) {
+				const { event, prop, context, refs } = params;
+				if (event.type !== "DRAG.START" || refs.get("drag")) return;
+				const now = live(prop, context), entry = now.entries[event.from];
+				if (now.state.disabled || entry?.key !== event.key || entry.disabled) {
+					refs.get("reset")?.();
+					return;
+				}
+				refs.set("pending", null);
+				setDrag(params, {
+					key: entry.key,
+					text: entry.text,
+					from: entry.index,
+					to: entry.index,
+					count: now.order.length,
+					offset: 0,
+					pitch: Math.max(0, finite(event.pitch)),
+					source: event.source,
+					signature: now.signature
+				});
+				announce(context, now.state.texts.pickedText, {
+					text: entry.text,
+					index: entry.index,
+					count: now.order.length
+				});
+			},
+			move(params) {
+				const { event, prop, context, refs } = params, drag = refs.get("drag");
+				if (event.type !== "DRAG.MOVE" || !drag) return;
+				const to = clamp(Math.round(finite(event.to, drag.to)), 0, drag.count - 1), offset = finite(event.offset);
+				if (to === drag.to && offset === drag.offset) return;
+				setDrag(params, {
+					...drag,
+					to,
+					offset
+				});
+				if (to !== drag.to) announce(context, stateOf(prop).texts.movedText, {
+					text: drag.text,
+					index: to,
+					count: drag.count
+				});
+			},
+			drop(params) {
+				const { prop, context, refs } = params, drag = refs.get("drag");
+				if (!drag) return;
+				const now = live(prop, context);
+				if (now.signature !== drag.signature) {
+					cancelDrag(params);
+					return;
+				}
+				setDrag(params, null);
+				refs.get("reset")?.();
+				if (drag.to === drag.from) {
+					announce(context, now.state.texts.droppedText, {
+						text: drag.text,
+						index: drag.from,
+						count: now.order.length
+					});
+					return;
+				}
+				const value = moveReorderKeys(now.order, drag.from, drag.to);
+				refs.set("pending", {
+					key: drag.key,
+					text: drag.text,
+					signature: now.signature
+				});
+				refs.get("settle")?.();
+				prop("onReorder")?.({
+					key: drag.key,
+					from: drag.from,
+					to: drag.to,
+					value: [...value]
+				});
+				context.set("value", value);
+			},
+			cancel(params) {
+				cancelDrag(params);
+			},
+			reconcile(params) {
+				reconcileDrag(params);
+			},
+			orderChange(params) {
+				const { prop, context, refs } = params;
+				reconcileDrag(params);
+				const pending = refs.get("pending"), now = live(prop, context);
+				if (pending && pending.signature !== now.signature) {
+					refs.set("pending", null);
+					const index = now.order.indexOf(pending.key);
+					if (index !== -1) announce(context, now.state.texts.droppedText, {
+						text: pending.text,
+						index,
+						count: now.order.length
+					});
+				}
+				refs.get("restore")?.();
+			},
+			settle({ prop, context, refs }) {
+				const pending = refs.get("pending"), now = live(prop, context);
+				if (pending && pending.signature === now.signature) announce(context, now.state.texts.rejectedText, {
+					text: pending.text,
+					index: now.order.indexOf(pending.key),
+					count: now.order.length
+				});
+			}
+		},
+		effects: { trackInteraction({ scope, prop, context, refs, send }) {
+			const id = ids(scope), root = scope.getById(id.root), doc = root?.ownerDocument, win = doc?.defaultView;
+			if (!root || !doc || !win) return;
+			let pointer = null, keyboard = null;
+			let scrollFrame = 0, focusKey = null, disposed = false;
+			const frames = /* @__PURE__ */ new Set();
+			const later = (run) => {
+				const handle = win.requestAnimationFrame(() => {
+					frames.delete(handle);
+					if (!disposed) run();
+				});
+				frames.add(handle);
+			};
+			const element = (kind, key) => scope.getById(id[kind](key));
+			/** The handle of this list that contains target; handles of nested lists are ignored. */
+			const handleAt = (target) => {
+				const found = target?.closest?.("[data-scope=\"reorder\"][data-part=\"handle\"]");
+				const key = found?.getAttribute("data-key");
+				return found && key != null && found.closest("[data-scope=\"reorder\"][data-part=\"root\"]") === root ? {
+					element: found,
+					key
+				} : null;
+			};
+			const startable = (key) => {
+				const now = live(prop, context), entry = now.entries.find((item) => item.key === key);
+				return now.state.disabled || !entry || entry.disabled ? null : {
+					now,
+					entry
+				};
+			};
+			const measure = (order) => order.map((key) => {
+				const rect = element("item", key)?.getBoundingClientRect();
+				return {
+					top: rect?.top ?? 0,
+					bottom: rect?.bottom ?? 0
+				};
+			});
+			const listRect = () => scope.getById(id.list)?.getBoundingClientRect();
+			const stopPointer = () => {
+				const gesture = pointer;
+				if (!gesture) return;
+				pointer = null;
+				doc.removeEventListener("pointermove", onMove, true);
+				doc.removeEventListener("pointerup", onUp, true);
+				doc.removeEventListener("pointercancel", onCancel, true);
+				doc.removeEventListener("lostpointercapture", onCancel, true);
+				doc.removeEventListener("scroll", onScroll, true);
+				if (scrollFrame) {
+					win.cancelAnimationFrame(scrollFrame);
+					scrollFrame = 0;
+				}
+				try {
+					if (gesture.handle.hasPointerCapture?.(gesture.pointerId)) gesture.handle.releasePointerCapture(gesture.pointerId);
+				} catch {}
+			};
+			const update = (gesture) => {
+				const raw = gesture.y - gesture.startY + gesture.listTop - (listRect()?.top ?? gesture.listTop);
+				const offset = clampReorderOffset(gesture.rects, gesture.from, raw);
+				const to = getReorderTargetIndex(gesture.rects, gesture.from, raw);
+				if (to === gesture.to && offset === gesture.offset) return;
+				gesture.to = to;
+				gesture.offset = offset;
+				send({
+					type: "DRAG.MOVE",
+					to,
+					offset
+				});
+			};
+			const scrollStep = (gesture) => {
+				const scroller = gesture.scroller, rect = scroller?.getBoundingClientRect(), top = rect ? rect.top + scroller.clientTop : 0;
+				const bottom = scroller ? top + scroller.clientHeight : win.innerHeight, list = listRect(), step = getReorderAutoScroll(gesture.y, top, bottom);
+				return !list || step < 0 && list.top >= top || step > 0 && list.bottom <= bottom ? 0 : step;
+			};
+			const autoScroll = () => {
+				scrollFrame = 0;
+				const gesture = pointer, step = gesture?.active ? scrollStep(gesture) : 0;
+				if (!gesture || !step) return;
+				const position = () => gesture.scroller ? gesture.scroller.scrollTop : win.scrollY, before = position();
+				if (gesture.scroller) gesture.scroller.scrollTop = before + step;
+				else win.scrollBy(0, step);
+				if (position() === before) return;
+				update(gesture);
+				scrollFrame = win.requestAnimationFrame(autoScroll);
+			};
+			const onDown = (event) => {
+				if (pointer || keyboard || event.isPrimary === false || event.button !== 0) return;
+				const hit = handleAt(event.target), found = hit && startable(hit.key);
+				if (!hit || !found) return;
+				event.preventDefault();
+				pointer = {
+					pointerId: event.pointerId,
+					key: found.entry.key,
+					from: found.entry.index,
+					to: found.entry.index,
+					offset: 0,
+					startX: event.clientX,
+					startY: event.clientY,
+					y: event.clientY,
+					active: false,
+					handle: hit.element,
+					rects: [],
+					listTop: 0,
+					scroller: null
+				};
+				try {
+					hit.element.setPointerCapture?.(event.pointerId);
+				} catch {}
+				doc.addEventListener("pointermove", onMove, true);
+				doc.addEventListener("pointerup", onUp, true);
+				doc.addEventListener("pointercancel", onCancel, true);
+				doc.addEventListener("lostpointercapture", onCancel, true);
+				doc.addEventListener("scroll", onScroll, true);
+			};
+			const onMove = (event) => {
+				const gesture = pointer;
+				if (!gesture || event.pointerId !== gesture.pointerId) return;
+				gesture.y = event.clientY;
+				if (!gesture.active) {
+					const found = startable(gesture.key);
+					if (Math.hypot(event.clientX - gesture.startX, event.clientY - gesture.startY) < (found?.now.state.threshold ?? 0)) return;
+					if (!found || keyboard) {
+						stopPointer();
+						return;
+					}
+					gesture.active = true;
+					gesture.from = gesture.to = found.entry.index;
+					gesture.rects = measure(found.now.order);
+					gesture.listTop = listRect()?.top ?? 0;
+					gesture.scroller = scrollParent(root);
+					send({
+						type: "DRAG.START",
+						key: gesture.key,
+						from: gesture.from,
+						source: "pointer",
+						pitch: getReorderPitch(gesture.rects, gesture.from)
+					});
+				}
+				if (event.cancelable) event.preventDefault();
+				update(gesture);
+				if (!scrollFrame && scrollStep(gesture)) scrollFrame = win.requestAnimationFrame(autoScroll);
+			};
+			const onUp = (event) => {
+				const gesture = pointer;
+				if (!gesture || event.pointerId !== gesture.pointerId) return;
+				if (gesture.active) {
+					gesture.y = event.clientY;
+					update(gesture);
+				}
+				stopPointer();
+				if (gesture.active) send({ type: "DRAG.DROP" });
+			};
+			const onCancel = (event) => {
+				const gesture = pointer;
+				if (!gesture || event.pointerId !== gesture.pointerId) return;
+				stopPointer();
+				if (gesture.active) send({ type: "DRAG.CANCEL" });
+			};
+			const onScroll = () => {
+				if (pointer?.active) update(pointer);
+			};
+			const onEscape = (event) => {
+				if (event.defaultPrevented || event.key !== "Escape" || !pointer?.active) return;
+				event.preventDefault();
+				stopPointer();
+				send({ type: "DRAG.CANCEL" });
+			};
+			const onKeyDown = (event) => {
+				if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || pointer?.active) return;
+				const hit = handleAt(event.target), toggle = event.key === " " || event.key === "Enter";
+				if (!hit) return;
+				if (!keyboard) {
+					const found = toggle && !event.repeat && !pointer ? startable(hit.key) : null;
+					if (!found) return;
+					event.preventDefault();
+					focusKey = null;
+					keyboard = {
+						key: found.entry.key,
+						from: found.entry.index,
+						to: found.entry.index,
+						rects: measure(found.now.order)
+					};
+					send({
+						type: "DRAG.START",
+						key: keyboard.key,
+						from: keyboard.from,
+						source: "keyboard",
+						pitch: getReorderPitch(keyboard.rects, keyboard.from)
+					});
+					return;
+				}
+				if (hit.key !== keyboard.key) return;
+				if (toggle || event.key === "Escape") {
+					event.preventDefault();
+					if (toggle && event.repeat) return;
+					keyboard = null;
+					send({ type: toggle ? "DRAG.DROP" : "DRAG.CANCEL" });
+					return;
+				}
+				const to = getReorderKeyTarget(event.key, keyboard.to, keyboard.rects.length);
+				if (to === null) return;
+				event.preventDefault();
+				if (to === keyboard.to) return;
+				keyboard.to = to;
+				send({
+					type: "DRAG.MOVE",
+					to,
+					offset: getReorderSlotOffset(keyboard.rects, keyboard.from, to)
+				});
+				const key = keyboard.key;
+				later(() => element("item", key)?.scrollIntoView?.({ block: "nearest" }));
+			};
+			const onFocusOut = (event) => {
+				if (keyboard && handleAt(event.target)?.key === keyboard.key) {
+					keyboard = null;
+					send({ type: "DRAG.CANCEL" });
+				}
+			};
+			const onFocusIn = (event) => {
+				if (focusKey && handleAt(event.target)?.key !== focusKey) focusKey = null;
+			};
+			refs.set("reset", () => {
+				stopPointer();
+				keyboard = null;
+			});
+			refs.set("settle", () => {
+				const active = doc.activeElement;
+				focusKey = active && root.contains(active) ? handleAt(active)?.key ?? null : null;
+				later(() => send({ type: "DROP.SETTLE" }));
+			});
+			refs.set("restore", () => later(() => {
+				const active = doc.activeElement, key = focusKey;
+				if (!key || active && active !== doc.body) return;
+				element("handle", key)?.focus({ preventScroll: true });
+				element("item", key)?.scrollIntoView?.({ block: "nearest" });
+			}));
+			root.addEventListener("pointerdown", onDown);
+			root.addEventListener("keydown", onKeyDown);
+			root.addEventListener("focusout", onFocusOut);
+			doc.addEventListener("keydown", onEscape, true);
+			doc.addEventListener("focusin", onFocusIn);
+			return () => {
+				disposed = true;
+				stopPointer();
+				keyboard = null;
+				focusKey = null;
+				for (const handle of frames) win.cancelAnimationFrame(handle);
+				frames.clear();
+				refs.set("reset", null);
+				refs.set("settle", null);
+				refs.set("restore", null);
+				refs.set("drag", null);
+				refs.set("pending", null);
+				root.removeEventListener("pointerdown", onDown);
+				root.removeEventListener("keydown", onKeyDown);
+				root.removeEventListener("focusout", onFocusOut);
+				doc.removeEventListener("keydown", onEscape, true);
+				doc.removeEventListener("focusin", onFocusIn);
+			};
+		} }
+	}
+});
+function connectReorder(service, normalize) {
+	const now = live(service.prop, service.context), id = ids(service.scope), { texts, disabled } = now.state, count = now.order.length;
+	const raw = service.context.get("drag");
+	const drag = raw && raw.signature === now.signature && now.order[raw.from] === raw.key ? raw : null;
+	const part = (name) => ({
+		"data-scope": "reorder",
+		"data-part": name
+	});
+	const shiftOf = (entry) => !drag ? 0 : entry.key === drag.key ? drag.offset : getReorderShift(entry.index, drag);
+	return {
+		items: now.entries,
+		value: now.order,
+		count,
+		disabled,
+		dragging: !!drag,
+		activeKey: drag?.key ?? null,
+		source: drag?.source ?? null,
+		label: texts.label,
+		instructions: texts.instructions,
+		announcement: service.context.get("announcement"),
+		getRootProps: () => normalize.element({
+			...part("root"),
+			id: id.root,
+			role: "group",
+			"aria-label": texts.label,
+			"data-disabled": disabled ? "true" : void 0,
+			"data-dragging": drag ? "true" : void 0,
+			"data-source": drag?.source
+		}),
+		getListProps: () => normalize.element({
+			...part("list"),
+			id: id.list,
+			role: "list"
+		}),
+		getItemProps: (entry) => {
+			const active = drag?.key === entry.key, shift = shiftOf(entry);
+			return normalize.element({
+				...part("item"),
+				id: id.item(entry.key),
+				role: "listitem",
+				"data-key": entry.key,
+				"data-index": entry.index,
+				"data-disabled": entry.disabled ? "true" : void 0,
+				"data-dragging": active ? "true" : void 0,
+				"data-shifted": !active && shift ? "true" : void 0,
+				style: shift ? { transform: `translateY(${shift}px)` } : void 0
+			});
+		},
+		getContentProps: (entry) => normalize.element({
+			...part("content"),
+			"data-key": entry.key
+		}),
+		getHandleProps: (entry) => normalize.button({
+			...part("handle"),
+			id: id.handle(entry.key),
+			type: "button",
+			"data-key": entry.key,
+			disabled: disabled || entry.disabled,
+			"aria-label": formatReorderText(texts.handleLabel, {
+				text: entry.text,
+				position: entry.index + 1,
+				count
+			}),
+			"aria-describedby": id.instructions,
+			"aria-pressed": drag?.key === entry.key ? "true" : void 0,
+			"data-dragging": drag?.key === entry.key ? "true" : void 0
+		}),
+		getInstructionsProps: () => normalize.element({
+			...part("instructions"),
+			id: id.instructions,
+			style: visuallyHiddenStyle
+		}),
+		getStatusProps: () => normalize.element({
+			...part("status"),
+			id: id.status,
+			role: "status",
+			"aria-live": "assertive",
+			"aria-atomic": "true",
+			style: visuallyHiddenStyle
+		})
+	};
+}
+//#endregion
+export { REORDER_AUTO_SCROLL_EDGE, REORDER_AUTO_SCROLL_SPEED, REORDER_DEFAULT_TEXTS, REORDER_DEFAULT_THRESHOLD, REORDER_PARTS, REORDER_SOURCES, clampReorderOffset, connectReorder, createReorderProps, formatReorderText, getReorderAutoScroll, getReorderEntries, getReorderKeyTarget, getReorderPitch, getReorderShift, getReorderSlotOffset, getReorderTargetIndex, moveReorderKeys, reorderMachine, resolveReorderDisabled, resolveReorderKey, resolveReorderOrder, resolveReorderState, resolveReorderText };
+
+//# sourceMappingURL=index.js.map