@reause/integrations 0.1.2

package/dist/useSortable.d.ts

@@ -0,0 +1,143 @@
+import SortableJs from "sortablejs";
+//#region useSortable/index.d.ts
+/** Accepted DOM target kinds — mirrors upstream's `MaybeElement`. */
+type MaybeElement = HTMLElement | SVGElement | null | undefined;
+/** A plain element or a React ref-like object (`{ current }`) — upstream `MaybeElementRef`. */
+type MaybeElementRef = MaybeElement | {
+  readonly current: MaybeElement;
+};
+/** Target of the sortable container (upstream `MaybeRefOrGetter<MaybeElement>`). */
+type SortableTarget = MaybeElementRef;
+/**
+ * React return type of `useSortable` — the method bag of upstream
+ * `UseSortableReturn` (issue §2B: an object, not a tuple).
+ */
+export interface UseSortableReturn {
+  /**
+   * Create the sortablejs instance for the current target.
+   *
+   * No-op when an instance already exists (upstream `initSortable`).
+   */
+  start: () => void;
+  /**
+   * Destroy the sortablejs instance.
+   */
+  stop: () => void;
+  /**
+   * Options getter/setter, delegating to the instance's `option()`.
+   *
+   * @param name a `Sortable.Options` property.
+   * @param value a value; omit it to read the current value.
+   */
+  option: (<K extends keyof SortableJs.Options>(name: K, value: SortableJs.Options[K]) => void) & (<K extends keyof SortableJs.Options>(name: K) => SortableJs.Options[K]);
+}
+/**
+ * Options of `useSortable` — upstream `UseSortableOptions`, with `onUpdate`
+ * re-typed for React.
+ *
+ * Upstream's `onUpdate` is the internal handler that mutates the caller's
+ * array; here the hook never mutates `list`, so `onUpdate` receives the
+ * reordered array instead (see `moveArrayElement`).
+ */
+export interface UseSortableOptions<T = unknown> extends Omit<SortableJs.Options, 'onUpdate'> {
+  /**
+   * Watch the resolved element and automatically reinitialize Sortable when it
+   * changes.
+   *
+   * When `false` (default), Sortable is only initialized once on mount. You
+   * must manually call `start()` if the element changes.
+   *
+   * When `true`, the instance is destroyed and re-created whenever the
+   * resolved element identity changes (e.g. conditional rendering).
+   *
+   * @default false
+   */
+  watchElement?: boolean;
+  /**
+   * Document used to resolve a selector-string target.
+   *
+   * @default document
+   */
+  document?: Document;
+  /**
+   * Called after a drag reorder with the NEW array and the sortablejs event.
+   *
+   * React state is immutable, so the hook hands the reordered array to the
+   * caller instead of mutating `list` in place. When no `onUpdate` is passed,
+   * sortablejs still moves the DOM nodes while the array stays as-is — the
+   * component then re-renders from stale data and desyncs from the DOM. Always
+   * store the new array, e.g.
+   * `onUpdate: newList => setList(newList)`.
+   */
+  onUpdate?: (newList: T[], event: SortableJs.SortableEvent | null) => void;
+}
+/**
+ * React port of VueUse's `useSortable` — wrapper for
+ * [`sortablejs`](https://github.com/SortableJS/Sortable).
+ *
+ * Map from @vueuse/integrations `useSortable`
+ * (`source/vueuse/packages/integrations/useSortable/`), a reactive wrapper
+ * around the `sortablejs` package.
+ *
+ * Adjustment for React: the list is **immutable**. Upstream's
+ * `moveArrayElement` mutates the caller's array in place (deferring the splice
+ * through `nextTick` when the list is a ref), which cannot work in React —
+ * an in-place mutation does not re-render. The reause
+ * `moveArrayElement(list, from, to, e)` is pure: it returns a NEW reordered
+ * array (and still performs upstream's DOM fixup when an event is given), and
+ * the hook forwards that array to `options.onUpdate`.
+ *
+ * Adjustment for React: sortablejs manipulates DOM nodes directly, so the
+ * component must be a controlled list that re-renders from `onUpdate` — stable
+ * `key`s recommended — otherwise React and the DOM desync. Upstream's
+ * `onMounted` maps to a mount effect, `onScopeDispose` to the effect cleanup,
+ * and `watchElement` to an effect keyed on the resolved element identity.
+ *
+ * @param el target element, React ref object (`{ current }`), or CSS selector
+ * @param list current list items, in render order (never mutated)
+ * @param options sortablejs options plus `watchElement` / `document` / `onUpdate`
+ *
+ * @__NO_SIDE_EFFECTS__
+ * @see https://github.com/SortableJS/Sortable#options
+ */
+export declare function useSortable<T>(el: SortableTarget | string, list: T[], options?: UseSortableOptions<T>): UseSortableReturn;
+/**
+ * Inserts an element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+export declare function insertNodeAt(parentElement: Element, element: Element, index: number): void;
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+export declare function removeNode(node: Node): void;
+/**
+ * Move an element of `list` from `from` to `to`, returning a NEW array.
+ *
+ * Map from @vueuse/integrations `useSortable`'s `moveArrayElement`, with one
+ * deliberate deviation: upstream mutates the caller's array in place (and
+ * defers the splice with `nextTick` when the list is a ref), which cannot work
+ * in React — an in-place mutation does not re-render. This implementation is
+ * pure: the input array is never mutated and the moved copy is returned. The
+ * move only happens when `to` is in range (`to >= 0 && to < list.length`,
+ * exactly upstream's bounds check); otherwise a copy of `list` is returned
+ * unchanged.
+ *
+ * The DOM fixup of upstream is kept for compatibility: when `e` is given (a
+ * sortablejs event), `e.item` is removed from the DOM and re-inserted at
+ * `from` inside `e.from`. That fixup runs regardless of the bounds check, as
+ * upstream does — note the upstream quirk of inserting at `from` rather than
+ * `to`. Pass `null` (or omit `e`) to only compute the array.
+ *
+ * @param list the current list — never mutated
+ * @param from source index
+ * @param to destination index
+ * @param e the sortablejs event to apply the DOM fixup for, if any
+ * @returns a new array with the element moved
+ */
+export declare function moveArrayElement<T>(list: T[], from: number, to: number, e?: SortableJs.SortableEvent | null): T[];
+//#endregion

package/dist/useSortable.iife.js

@@ -0,0 +1,199 @@
+(function(exports, _reause_shared, react, sortablejs) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region \0rolldown/runtime.js
+	var __create = Object.create;
+	var __defProp = Object.defineProperty;
+	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+	var __getOwnPropNames = Object.getOwnPropertyNames;
+	var __getProtoOf = Object.getPrototypeOf;
+	var __hasOwnProp = Object.prototype.hasOwnProperty;
+	var __copyProps = (to, from, except, desc) => {
+		if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+				get: ((k) => from[k]).bind(null, key),
+				enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+			});
+		}
+		return to;
+	};
+	var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+		value: mod,
+		enumerable: true
+	}) : target, mod));
+	//#endregion
+	sortablejs = __toESM(sortablejs, 1);
+	//#region useSortable/index.tsx
+	/**
+	* Resolve a target to a DOM element, or `null` when it cannot be resolved.
+	* Upstream resolves elements with `unrefElement` (`@vueuse/core`); the React
+	* port composes the same unwrapping from `toValue` / `isRefLike`
+	* (`@reause/shared`) — one pass unwraps a ref-like object, a second one
+	* covers a ref-like object holding another ref-like
+	* (`{ current: { current: element } }`).
+	*/
+	function resolveElement(value) {
+		let el = (0, _reause_shared.toValue)(value);
+		if ((0, _reause_shared.isRefLike)(el)) el = (0, _reause_shared.toValue)(el);
+		if (typeof el === "object" && el !== null && (el instanceof HTMLElement || el instanceof SVGElement)) return el;
+		return null;
+	}
+	/**
+	* React port of VueUse's `useSortable` — wrapper for
+	* [`sortablejs`](https://github.com/SortableJS/Sortable).
+	*
+	* Map from @vueuse/integrations `useSortable`
+	* (`source/vueuse/packages/integrations/useSortable/`), a reactive wrapper
+	* around the `sortablejs` package.
+	*
+	* Adjustment for React: the list is **immutable**. Upstream's
+	* `moveArrayElement` mutates the caller's array in place (deferring the splice
+	* through `nextTick` when the list is a ref), which cannot work in React —
+	* an in-place mutation does not re-render. The reause
+	* `moveArrayElement(list, from, to, e)` is pure: it returns a NEW reordered
+	* array (and still performs upstream's DOM fixup when an event is given), and
+	* the hook forwards that array to `options.onUpdate`.
+	*
+	* Adjustment for React: sortablejs manipulates DOM nodes directly, so the
+	* component must be a controlled list that re-renders from `onUpdate` — stable
+	* `key`s recommended — otherwise React and the DOM desync. Upstream's
+	* `onMounted` maps to a mount effect, `onScopeDispose` to the effect cleanup,
+	* and `watchElement` to an effect keyed on the resolved element identity.
+	*
+	* @param el target element, React ref object (`{ current }`), or CSS selector
+	* @param list current list items, in render order (never mutated)
+	* @param options sortablejs options plus `watchElement` / `document` / `onUpdate`
+	*
+	* @__NO_SIDE_EFFECTS__
+	* @see https://github.com/SortableJS/Sortable#options
+	*/
+	function useSortable(el, list, options = {}) {
+		const { document = globalThis.document, watchElement = false, onUpdate, ...resetOptions } = options;
+		const instanceRef = (0, react.useRef)(void 0);
+		const listRef = (0, react.useRef)(list);
+		const onUpdateRef = (0, react.useRef)(onUpdate);
+		const optionsRef = (0, react.useRef)(resetOptions);
+		listRef.current = list;
+		onUpdateRef.current = onUpdate;
+		optionsRef.current = resetOptions;
+		const cleanup = (0, react.useCallback)(() => {
+			var _instanceRef$current;
+			(_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 || _instanceRef$current.destroy();
+			instanceRef.current = void 0;
+		}, []);
+		const initSortable = (0, react.useCallback)((target) => {
+			if (!target || instanceRef.current !== void 0) return;
+			instanceRef.current = new sortablejs.default(target, {
+				onUpdate: (e) => {
+					var _onUpdateRef$current;
+					const newList = moveArrayElement(listRef.current, e.oldIndex, e.newIndex, e);
+					(_onUpdateRef$current = onUpdateRef.current) === null || _onUpdateRef$current === void 0 || _onUpdateRef$current.call(onUpdateRef, newList, e);
+				},
+				...optionsRef.current
+			});
+		}, []);
+		const start = (0, react.useCallback)(() => {
+			const target = typeof el === "string" ? document === null || document === void 0 ? void 0 : document.querySelector(el) : resolveElement(el);
+			if (target) initSortable(target);
+		}, [
+			document,
+			el,
+			initSortable
+		]);
+		const stop = (0, react.useCallback)(() => {
+			cleanup();
+		}, [cleanup]);
+		const option = (0, react.useCallback)((name, value) => {
+			var _instanceRef$current2, _instanceRef$current3;
+			if (value !== void 0) (_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 || _instanceRef$current2.option(name, value);
+			else return (_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 ? void 0 : _instanceRef$current3.option(name);
+		}, []);
+		const resolved = typeof el === "string" ? el : resolveElement(el);
+		(0, react.useEffect)(() => {
+			if (!watchElement || typeof resolved === "string") return;
+			cleanup();
+			if (resolved) initSortable(resolved);
+			return cleanup;
+		}, [
+			cleanup,
+			initSortable,
+			resolved,
+			watchElement
+		]);
+		(0, react.useEffect)(() => {
+			if (watchElement && typeof el !== "string") return;
+			start();
+			return cleanup;
+		}, [
+			cleanup,
+			start,
+			watchElement,
+			el
+		]);
+		return {
+			start,
+			stop,
+			option
+		};
+	}
+	/**
+	* Inserts an element into the DOM at a given index.
+	* @param parentElement
+	* @param element
+	* @param {number} index
+	* @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+	*/
+	function insertNodeAt(parentElement, element, index) {
+		const refElement = parentElement.children[index];
+		parentElement.insertBefore(element, refElement);
+	}
+	/**
+	* Removes a node from the DOM.
+	* @param {Node} node
+	* @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+	*/
+	function removeNode(node) {
+		if (node.parentNode) node.parentNode.removeChild(node);
+	}
+	/**
+	* Move an element of `list` from `from` to `to`, returning a NEW array.
+	*
+	* Map from @vueuse/integrations `useSortable`'s `moveArrayElement`, with one
+	* deliberate deviation: upstream mutates the caller's array in place (and
+	* defers the splice with `nextTick` when the list is a ref), which cannot work
+	* in React — an in-place mutation does not re-render. This implementation is
+	* pure: the input array is never mutated and the moved copy is returned. The
+	* move only happens when `to` is in range (`to >= 0 && to < list.length`,
+	* exactly upstream's bounds check); otherwise a copy of `list` is returned
+	* unchanged.
+	*
+	* The DOM fixup of upstream is kept for compatibility: when `e` is given (a
+	* sortablejs event), `e.item` is removed from the DOM and re-inserted at
+	* `from` inside `e.from`. That fixup runs regardless of the bounds check, as
+	* upstream does — note the upstream quirk of inserting at `from` rather than
+	* `to`. Pass `null` (or omit `e`) to only compute the array.
+	*
+	* @param list the current list — never mutated
+	* @param from source index
+	* @param to destination index
+	* @param e the sortablejs event to apply the DOM fixup for, if any
+	* @returns a new array with the element moved
+	*/
+	function moveArrayElement(list, from, to, e) {
+		if (e != null) {
+			removeNode(e.item);
+			insertNodeAt(e.from, e.item, from);
+		}
+		const array = [...list];
+		if (to >= 0 && to < array.length) {
+			const element = array.splice(from, 1)[0];
+			array.splice(to, 0, element);
+		}
+		return array;
+	}
+	//#endregion
+	exports.insertNodeAt = insertNodeAt;
+	exports.moveArrayElement = moveArrayElement;
+	exports.removeNode = removeNode;
+	exports.useSortable = useSortable;
+})(this.reause = this.reause || {}, reause, React, Sortable);

package/dist/useSortable.iife.min.js

@@ -0,0 +1 @@
+(function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};r=((e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule||!l.call(e,`default`)?a(n,`default`,{value:e,enumerable:!0}):n,e)))(r,1);function d(e){let n=(0,t.toValue)(e);return(0,t.isRefLike)(n)&&(n=(0,t.toValue)(n)),typeof n==`object`&&n&&(n instanceof HTMLElement||n instanceof SVGElement)?n:null}function f(e,t,i={}){let{document:a=globalThis.document,watchElement:o=!1,onUpdate:s,...c}=i,l=(0,n.useRef)(void 0),u=(0,n.useRef)(t),f=(0,n.useRef)(s),p=(0,n.useRef)(c);u.current=t,f.current=s,p.current=c;let m=(0,n.useCallback)(()=>{var e;(e=l.current)==null||e.destroy(),l.current=void 0},[]),g=(0,n.useCallback)(e=>{e&&l.current===void 0&&(l.current=new r.default(e,{onUpdate:e=>{var t;let n=h(u.current,e.oldIndex,e.newIndex,e);(t=f.current)==null||t.call(f,n,e)},...p.current}))},[]),_=(0,n.useCallback)(()=>{let t=typeof e==`string`?a==null?void 0:a.querySelector(e):d(e);t&&g(t)},[a,e,g]),v=(0,n.useCallback)(()=>{m()},[m]),y=(0,n.useCallback)((e,t)=>{var n,r;if(t!==void 0)(n=l.current)==null||n.option(e,t);else return(r=l.current)==null?void 0:r.option(e)},[]),b=typeof e==`string`?e:d(e);return(0,n.useEffect)(()=>{if(o&&typeof b!=`string`)return m(),b&&g(b),m},[m,g,b,o]),(0,n.useEffect)(()=>{if(!(o&&typeof e!=`string`))return _(),m},[m,_,o,e]),{start:_,stop:v,option:y}}function p(e,t,n){let r=e.children[n];e.insertBefore(t,r)}function m(e){e.parentNode&&e.parentNode.removeChild(e)}function h(e,t,n,r){r!=null&&(m(r.item),p(r.from,r.item,t));let i=[...e];if(n>=0&&n<i.length){let e=i.splice(t,1)[0];i.splice(n,0,e)}return i}e.insertNodeAt=p,e.moveArrayElement=h,e.removeNode=m,e.useSortable=f})(this.reause=this.reause||{},reause,React,Sortable);

package/dist/useSortable.js

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useRef } from "react";
+import { isRefLike, toValue } from "@reause/shared";
+import SortableJs from "sortablejs";
+//#region useSortable/index.tsx
+/**
+* Resolve a target to a DOM element, or `null` when it cannot be resolved.
+* Upstream resolves elements with `unrefElement` (`@vueuse/core`); the React
+* port composes the same unwrapping from `toValue` / `isRefLike`
+* (`@reause/shared`) — one pass unwraps a ref-like object, a second one
+* covers a ref-like object holding another ref-like
+* (`{ current: { current: element } }`).
+*/
+function resolveElement(value) {
+	let el = toValue(value);
+	if (isRefLike(el)) el = toValue(el);
+	if (typeof el === "object" && el !== null && (el instanceof HTMLElement || el instanceof SVGElement)) return el;
+	return null;
+}
+/**
+* React port of VueUse's `useSortable` — wrapper for
+* [`sortablejs`](https://github.com/SortableJS/Sortable).
+*
+* Map from @vueuse/integrations `useSortable`
+* (`source/vueuse/packages/integrations/useSortable/`), a reactive wrapper
+* around the `sortablejs` package.
+*
+* Adjustment for React: the list is **immutable**. Upstream's
+* `moveArrayElement` mutates the caller's array in place (deferring the splice
+* through `nextTick` when the list is a ref), which cannot work in React —
+* an in-place mutation does not re-render. The reause
+* `moveArrayElement(list, from, to, e)` is pure: it returns a NEW reordered
+* array (and still performs upstream's DOM fixup when an event is given), and
+* the hook forwards that array to `options.onUpdate`.
+*
+* Adjustment for React: sortablejs manipulates DOM nodes directly, so the
+* component must be a controlled list that re-renders from `onUpdate` — stable
+* `key`s recommended — otherwise React and the DOM desync. Upstream's
+* `onMounted` maps to a mount effect, `onScopeDispose` to the effect cleanup,
+* and `watchElement` to an effect keyed on the resolved element identity.
+*
+* @param el target element, React ref object (`{ current }`), or CSS selector
+* @param list current list items, in render order (never mutated)
+* @param options sortablejs options plus `watchElement` / `document` / `onUpdate`
+*
+* @__NO_SIDE_EFFECTS__
+* @see https://github.com/SortableJS/Sortable#options
+*/
+function useSortable(el, list, options = {}) {
+	const { document = globalThis.document, watchElement = false, onUpdate, ...resetOptions } = options;
+	const instanceRef = useRef(void 0);
+	const listRef = useRef(list);
+	const onUpdateRef = useRef(onUpdate);
+	const optionsRef = useRef(resetOptions);
+	listRef.current = list;
+	onUpdateRef.current = onUpdate;
+	optionsRef.current = resetOptions;
+	const cleanup = useCallback(() => {
+		var _instanceRef$current;
+		(_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 || _instanceRef$current.destroy();
+		instanceRef.current = void 0;
+	}, []);
+	const initSortable = useCallback((target) => {
+		if (!target || instanceRef.current !== void 0) return;
+		instanceRef.current = new SortableJs(target, {
+			onUpdate: (e) => {
+				var _onUpdateRef$current;
+				const newList = moveArrayElement(listRef.current, e.oldIndex, e.newIndex, e);
+				(_onUpdateRef$current = onUpdateRef.current) === null || _onUpdateRef$current === void 0 || _onUpdateRef$current.call(onUpdateRef, newList, e);
+			},
+			...optionsRef.current
+		});
+	}, []);
+	const start = useCallback(() => {
+		const target = typeof el === "string" ? document === null || document === void 0 ? void 0 : document.querySelector(el) : resolveElement(el);
+		if (target) initSortable(target);
+	}, [
+		document,
+		el,
+		initSortable
+	]);
+	const stop = useCallback(() => {
+		cleanup();
+	}, [cleanup]);
+	const option = useCallback((name, value) => {
+		var _instanceRef$current2, _instanceRef$current3;
+		if (value !== void 0) (_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 || _instanceRef$current2.option(name, value);
+		else return (_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 ? void 0 : _instanceRef$current3.option(name);
+	}, []);
+	const resolved = typeof el === "string" ? el : resolveElement(el);
+	useEffect(() => {
+		if (!watchElement || typeof resolved === "string") return;
+		cleanup();
+		if (resolved) initSortable(resolved);
+		return cleanup;
+	}, [
+		cleanup,
+		initSortable,
+		resolved,
+		watchElement
+	]);
+	useEffect(() => {
+		if (watchElement && typeof el !== "string") return;
+		start();
+		return cleanup;
+	}, [
+		cleanup,
+		start,
+		watchElement,
+		el
+	]);
+	return {
+		start,
+		stop,
+		option
+	};
+}
+/**
+* Inserts an element into the DOM at a given index.
+* @param parentElement
+* @param element
+* @param {number} index
+* @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+*/
+function insertNodeAt(parentElement, element, index) {
+	const refElement = parentElement.children[index];
+	parentElement.insertBefore(element, refElement);
+}
+/**
+* Removes a node from the DOM.
+* @param {Node} node
+* @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+*/
+function removeNode(node) {
+	if (node.parentNode) node.parentNode.removeChild(node);
+}
+/**
+* Move an element of `list` from `from` to `to`, returning a NEW array.
+*
+* Map from @vueuse/integrations `useSortable`'s `moveArrayElement`, with one
+* deliberate deviation: upstream mutates the caller's array in place (and
+* defers the splice with `nextTick` when the list is a ref), which cannot work
+* in React — an in-place mutation does not re-render. This implementation is
+* pure: the input array is never mutated and the moved copy is returned. The
+* move only happens when `to` is in range (`to >= 0 && to < list.length`,
+* exactly upstream's bounds check); otherwise a copy of `list` is returned
+* unchanged.
+*
+* The DOM fixup of upstream is kept for compatibility: when `e` is given (a
+* sortablejs event), `e.item` is removed from the DOM and re-inserted at
+* `from` inside `e.from`. That fixup runs regardless of the bounds check, as
+* upstream does — note the upstream quirk of inserting at `from` rather than
+* `to`. Pass `null` (or omit `e`) to only compute the array.
+*
+* @param list the current list — never mutated
+* @param from source index
+* @param to destination index
+* @param e the sortablejs event to apply the DOM fixup for, if any
+* @returns a new array with the element moved
+*/
+function moveArrayElement(list, from, to, e) {
+	if (e != null) {
+		removeNode(e.item);
+		insertNodeAt(e.from, e.item, from);
+	}
+	const array = [...list];
+	if (to >= 0 && to < array.length) {
+		const element = array.splice(from, 1)[0];
+		array.splice(to, 0, element);
+	}
+	return array;
+}
+//#endregion
+export { insertNodeAt, moveArrayElement, removeNode, useSortable };

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@reause/integrations",
+  "type": "module",
+  "version": "0.1.2",
+  "description": "Integrations with third-party services — React port of @vueuse/integrations (experimental, AI-mapped)",
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./dist/*",
+    "./useAsyncValidator": "./dist/useAsyncValidator.js",
+    "./useAxios": "./dist/useAxios.js",
+    "./useChangeCase": "./dist/useChangeCase.js",
+    "./useCookies": "./dist/useCookies.js",
+    "./useDrauu": "./dist/useDrauu.js",
+    "./useFocusTrap": "./dist/useFocusTrap.js",
+    "./useFuse": "./dist/useFuse.js",
+    "./useIDBKeyval": "./dist/useIDBKeyval.js",
+    "./useJwt": "./dist/useJwt.js",
+    "./useNProgress": "./dist/useNProgress.js",
+    "./useQRCode": "./dist/useQRCode.js",
+    "./useSortable": "./dist/useSortable.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "unpkg": "./dist/index.iife.min.js",
+  "jsdelivr": "./dist/index.iife.min.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "async-validator": "^4",
+    "axios": "^1",
+    "change-case": "^5",
+    "drauu": "^1",
+    "focus-trap": "^7 || ^8",
+    "fuse.js": "^7",
+    "idb-keyval": "^6",
+    "jwt-decode": "^4",
+    "nprogress": "^0.2",
+    "qrcode": "^1.5",
+    "react": ">=18",
+    "sortablejs": "^1",
+    "universal-cookie": "^7 || ^8"
+  },
+  "peerDependenciesMeta": {
+    "async-validator": {
+      "optional": true
+    },
+    "axios": {
+      "optional": true
+    },
+    "change-case": {
+      "optional": true
+    },
+    "drauu": {
+      "optional": true
+    },
+    "focus-trap": {
+      "optional": true
+    },
+    "fuse.js": {
+      "optional": true
+    },
+    "idb-keyval": {
+      "optional": true
+    },
+    "jwt-decode": {
+      "optional": true
+    },
+    "nprogress": {
+      "optional": true
+    },
+    "qrcode": {
+      "optional": true
+    },
+    "sortablejs": {
+      "optional": true
+    },
+    "universal-cookie": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@reause/shared": "0.1.2"
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
+}