intable 0.0.3 → 0.0.5

package/dist/components/Split.js

@@ -2,83 +2,71 @@ import { unFn } from "../utils.js";
 import { Portal, createComponent, effect, insert, memo, spread, style, template, use } from "solid-js/web";
 import { For, children, createEffect, mapArray, mergeProps as mergeProps$1, onMount } from "solid-js";
 import { createElementBounds } from "@solid-primitives/bounds";
-var _tmpl$ = /* @__PURE__ */ template(`<div class=relative>`), _tmpl$2 = /* @__PURE__ */ template(`<div class="absolute z-1">`);
-const Split = (props) => {
-	let el;
-	const child = children(() => props.children);
-	onMount(() => {
+var _tmpl$ = /* @__PURE__ */ template("<div class=relative>"), _tmpl$2 = /* @__PURE__ */ template("<div class=\"absolute z-1\">");
+const Split = (e) => {
+	let d, f = children(() => e.children);
+	return onMount(() => {
 		useSplit({
-			...props,
-			container: el,
-			cells: () => props.cells ? props.cells() : child()
+			...e,
+			container: d,
+			cells: () => e.cells ? e.cells() : f()
 		});
-	});
-	return (() => {
-		var _el$ = _tmpl$();
-		var _ref$ = el;
-		typeof _ref$ === "function" ? use(_ref$, _el$) : el = _el$;
-		spread(_el$, props, false, true);
-		insert(_el$, child);
-		return _el$;
+	}), (() => {
+		var p = _tmpl$(), m = d;
+		return typeof m == "function" ? use(m, p) : d = p, spread(p, e, !1, !0), insert(p, f), p;
 	})();
-};
-const useSplit = (props) => {
-	props = mergeProps$1({
+}, useSplit = (h) => {
+	h = mergeProps$1({
 		dir: "x",
 		size: 4
-	}, props);
-	let el;
-	const bounds = mapArray(() => props.cells(), (el$1) => createElementBounds(el$1));
-	const rect = createElementBounds(() => el);
-	createEffect(() => el.style.position = "absolute");
-	const style$1 = (e, bool) => props.dir == "x" ? `transform: translate(${(bool ? e.left + e.width : e.left) - props.size / 2}px, ${e.top}px); width: ${props.size}px; height: ${e.height}px;` : `transform: translate(${e.left}px, ${(bool ? e.top + e.height : e.top) - props.size / 2}px); width: ${e.width}px; height: ${props.size}px;`;
-	const Handle = (e) => (() => {
-		var _el$2 = _tmpl$2();
-		insert(_el$2, () => props.handle?.(e.i));
-		effect((_$p) => style(_el$2, style$1({
+	}, h);
+	let g, _ = mapArray(() => h.cells(), (e) => createElementBounds(e)), v = createElementBounds(() => g);
+	createEffect(() => g.style.position = "absolute");
+	let y = (e, d) => h.dir == "x" ? `transform: translate(${(d ? e.left + e.width : e.left) - h.size / 2}px, ${e.top}px); width: ${h.size}px; height: ${e.height}px;` : `transform: translate(${e.left}px, ${(d ? e.top + e.height : e.top) - h.size / 2}px); width: ${e.width}px; height: ${h.size}px;`, b = (e) => (() => {
+		var d = _tmpl$2();
+		return insert(d, () => h.handle?.(e.i)), effect((f) => style(d, y({
 			...e.e,
-			left: e.e.left - rect.left,
-			top: e.e.top - rect.top
-		}, e.bool), _$p));
-		return _el$2;
+			left: e.e.left - v.left,
+			top: e.e.top - v.top
+		}, e.bool), f)), d;
 	})();
 	createComponent(Portal, {
-		ref(r$) {
-			var _ref$2 = el;
-			typeof _ref$2 === "function" ? _ref$2(r$) : el = r$;
+		ref(e) {
+			var d = g;
+			typeof d == "function" ? d(e) : g = e;
 		},
 		get mount() {
-			return props.container || document.body;
+			return h.container || document.body;
 		},
 		get children() {
 			return [
 				createComponent(For, {
 					get each() {
-						return bounds().slice(0, -1);
+						return _().slice(0, -1);
 					},
-					children: (e, i) => createComponent(Handle, {
+					children: (d, p) => createComponent(b, {
 						get e() {
-							return unFn(e);
+							return unFn(d);
 						},
 						bool: 1,
 						get i() {
-							return unFn(i);
+							return unFn(p);
 						}
 					})
 				}),
-				memo(() => memo(() => !!(!!bounds().length && props.leading))() && createComponent(Handle, {
+				memo(() => memo(() => !!(_().length && h.leading))() && createComponent(b, {
 					get e() {
-						return bounds()[0];
+						return _()[0];
 					},
 					i: -1
 				})),
-				memo(() => memo(() => !!(!!bounds().length && props.trailing))() && createComponent(Handle, {
+				memo(() => memo(() => !!(_().length && h.trailing))() && createComponent(b, {
 					get e() {
-						return bounds()[bounds().length - 1];
+						return _()[_().length - 1];
 					},
 					bool: 1,
 					get i() {
-						return bounds().length - 1;
+						return _().length - 1;
 					}
 				}))
 			];

package/dist/components/Tree.js

@@ -3,46 +3,33 @@ import { Index, createEffect, createMemo, createSignal, onCleanup, splitProps }
 import { combineProps } from "@solid-primitives/props";
 import { castArray } from "es-toolkit/compat";
 import { createLazyMemo } from "@solid-primitives/memo";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function define(that, key) {
-	const signal = createSignal();
-	Object.defineProperty(that, key, {
+var _tmpl$ = /* @__PURE__ */ template("<div>");
+function define(e, d) {
+	let f = createSignal();
+	return Object.defineProperty(e, d, {
 		get() {
-			return signal[0]();
+			return f[0]();
 		},
-		set(v) {
-			signal[1](v);
+		set(e) {
+			f[1](e);
 		}
-	});
-	return signal;
+	}), f;
 }
-function memo$1(that, key, fn) {
-	const signal = createLazyMemo(fn);
-	Object.defineProperty(that, key, { get() {
-		return signal();
-	} });
-	return signal;
+function memo$1(e, d, f) {
+	let p = createLazyMemo(f);
+	return Object.defineProperty(e, d, { get() {
+		return p();
+	} }), p;
 }
 var $Node = class {
-	constructor(data) {
-		this.$children = memo$1(this, "children", () => this.getChildren());
-		this.$parent = define(this, "parent");
-		this.$deep = memo$1(this, "deep", () => this.parent ? this.parent.deep + 1 : 0);
-		this.$index = memo$1(this, "index", () => this.parent?.children?.indexOf(this));
-		this.$prev = memo$1(this, "prev", () => this.parent?.children?.[this.index - 1]);
-		this.$next = memo$1(this, "next", () => this.parent?.children?.[this.index + 1]);
-		this.$root = memo$1(this, "root", () => this.parent ? this.parent.root : this);
-		this.$path = memo$1(this, "path", () => {
-			const ret = [this];
-			let e = this;
-			while (e.parent) ret.push(e = e.parent);
-			return ret.reverse();
-		});
-		this.data = data;
-		createEffect(() => {
-			const children$1 = this.children;
-			children$1?.map((e) => e.parent = this);
-			onCleanup(() => children$1?.map((e) => e.parent = void 0));
+	constructor(e) {
+		this.$children = memo$1(this, "children", () => this.getChildren()), this.$parent = define(this, "parent"), this.$deep = memo$1(this, "deep", () => this.parent ? this.parent.deep + 1 : 0), this.$index = memo$1(this, "index", () => this.parent?.children?.indexOf(this)), this.$prev = memo$1(this, "prev", () => this.parent?.children?.[this.index - 1]), this.$next = memo$1(this, "next", () => this.parent?.children?.[this.index + 1]), this.$root = memo$1(this, "root", () => this.parent ? this.parent.root : this), this.$path = memo$1(this, "path", () => {
+			let e = [this], d = this;
+			for (; d.parent;) e.push(d = d.parent);
+			return e.reverse();
+		}), this.data = e, createEffect(() => {
+			let e = this.children;
+			e?.map((e) => e.parent = this), onCleanup(() => e?.map((e) => e.parent = void 0));
 		});
 	}
 	get label() {
@@ -51,12 +38,11 @@ var $Node = class {
 	get descendants() {
 		return this.children?.flatMap((e) => [e, ...e.descendants]) || [];
 	}
-	contains(node) {
-		return node.path.includes(this);
+	contains(e) {
+		return e.path.includes(this);
 	}
 	remove() {}
-};
-var $TreeItem = class $TreeItem extends $Node {
+}, $TreeItem = class e extends $Node {
 	get is() {
 		return this.data.is;
 	}
@@ -67,35 +53,30 @@ var $TreeItem = class $TreeItem extends $Node {
 		return this.data.id;
 	}
 	getChildren() {
-		return this.data.children?.map((e) => new $TreeItem(e));
+		return this.data.children?.map((d) => new e(d));
 	}
 };
-function Tree(_) {
-	const [props, attrs] = splitProps(_, ["data", "Node"]);
-	const Node = props.Node ?? $TreeItem;
-	const root = createMemo(() => new class extends Node {
+function Tree(h) {
+	let [g, _] = splitProps(h, ["data", "Node"]), v = g.Node ?? $TreeItem, y = createMemo(() => new class extends v {
 		getChildren() {
-			return castArray(this.data || []).map((e) => new Node(e));
+			return castArray(this.data || []).map((e) => new v(e));
 		}
-	}(props.data));
-	const flated = createMemo(() => root().descendants);
+	}(g.data)), b = createMemo(() => y().descendants);
 	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(() => combineProps({ class: "tt-menu" }, attrs)), false, true);
-		insert(_el$, createComponent(Index, {
+		var h = _tmpl$();
+		return spread(h, mergeProps(() => combineProps({ class: "tt-menu" }, _)), !1, !0), insert(h, createComponent(Index, {
 			get each() {
-				return flated();
+				return b();
 			},
-			children: (node, index) => createComponent(Dynamic, mergeProps({ get component() {
-				return node().is ?? "div";
+			children: (f, m) => createComponent(Dynamic, mergeProps({ get component() {
+				return f().is ?? "div";
 			} }, () => combineProps({
 				class: "li py-1 px-4",
-				style: `padding-left: ${node().deep * 16}px`
-			}, node().props), { get children() {
-				return node().label;
+				style: `padding-left: ${f().deep * 16}px`
+			}, f().props), { get children() {
+				return f().label;
 			} }))
-		}));
-		return _el$;
+		})), h;
 	})();
 }
 export { $Node, $TreeItem, Tree };

package/dist/components/utils.js

@@ -1,10 +1,8 @@
 import { createComponent } from "solid-js/web";
-function solidComponent(comp) {
-	comp.__solid = 1;
-	return comp;
+function solidComponent(e) {
+	return e.__solid = 1, e;
 }
-function renderComponent(Comp, props, renderer) {
-	if (!Comp.__solid) Comp = renderer(Comp);
-	return createComponent(Comp, props);
+function renderComponent(t, n, r) {
+	return t.__solid || (t = r(t)), createComponent(t, n);
 }
 export { renderComponent, solidComponent };

package/dist/hooks/index.d.ts

@@ -36,4 +36,5 @@ export declare function useHistory([val, setVal]: [any, any]): {
     readonly index: number;
     readonly history: any[];
 };
+export declare function useMemoState(fn: any): {};
 export {};

package/dist/hooks/index.js

@@ -1,5 +1,5 @@
 import { unFn } from "../utils.js";
-import { $PROXY, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, mergeProps, on, onCleanup, untrack } from "solid-js";
+import { $PROXY, batch, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, mergeProps, on, onCleanup, untrack } from "solid-js";
 import { $RAW, createMutable } from "solid-js/store";
 import { isFunction, isPromise, mapValues } from "es-toolkit";
 import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
@@ -9,176 +9,149 @@ import { makePersisted, storageSync } from "@solid-primitives/storage";
 import { createMutationObserver } from "@solid-primitives/mutation-observer";
 import { castArray } from "es-toolkit/compat";
 import { createKeybindingsHandler } from "tinykeys";
-function usePointerDrag(el, options) {
-	options = mergeProps({ preventDefault: true }, options);
-	createPointerListeners({
-		target: el,
-		passive: false,
-		onDown(e) {
-			options.preventDefault && e.preventDefault();
-			const [sx, sy] = [e.x, e.y];
-			let move;
-			let end;
-			options.start?.(e, (cb) => move = cb, (cb) => end = cb);
-			createRoot((dispose) => {
+function usePointerDrag(h, L) {
+	L = mergeProps({ preventDefault: !0 }, L), createPointerListeners({
+		target: h,
+		passive: !1,
+		onDown(h) {
+			L.preventDefault && h.preventDefault();
+			let [R, z] = [h.x, h.y], B, V;
+			L.start?.(h, (h) => B = h, (h) => V = h), createRoot((L) => {
 				createPointerListeners({
 					target: document,
-					onMove(e$1) {
-						const [ox, oy] = [e$1.x - sx, e$1.y - sy];
-						move?.(e$1, {
-							sx,
-							sy,
-							ox,
-							oy
+					onMove(h) {
+						let [L, V] = [h.x - R, h.y - z];
+						B?.(h, {
+							sx: R,
+							sy: z,
+							ox: L,
+							oy: V
 						});
 					},
 					onUp() {
-						end?.(e);
-						dispose();
-						move = void 0;
-						end = void 0;
+						V?.(h), L(), B = void 0, V = void 0;
 					}
-				});
-				createEventListenerMap(document, { drop: dispose });
+				}), createEventListenerMap(document, { drop: L });
 			});
 		}
 	});
 }
-function model(el, value) {
-	const [field, setField] = value();
-	createRenderEffect(() => el.value = field());
-	el.addEventListener("input", (e) => setField(e.target.value));
+function model(h, L) {
+	let [R, z] = L();
+	createRenderEffect(() => h.value = R()), h.addEventListener("input", (h) => z(h.target.value));
 }
-function toSignle(state, k) {
-	return [() => state[k], (v) => state[k] = v];
+function toSignle(h, L) {
+	return [() => h[L], (R) => h[L] = R];
 }
 function useDark() {
-	const get = (v) => v == "dark" || prefersDark() && !v, set = (v) => v ? "dark" : "light";
-	const prefersDark = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
-	const dark = makePersisted(createSignal(prefersDark()), {
+	let h = (h) => h == "dark" || R() && !h, L = (h) => h ? "dark" : "light", R = () => window.matchMedia("(prefers-color-scheme: dark)").matches, z = makePersisted(createSignal(R()), {
 		name: "color-schema",
 		storage: localStorage,
 		sync: storageSync,
-		serialize: set,
-		deserialize: get
+		serialize: L,
+		deserialize: h
 	});
-	createEffect(() => document.documentElement.classList[dark[0]() ? "add" : "remove"]("dark"));
-	createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
+	return createEffect(() => document.documentElement.classList[z[0]() ? "add" : "remove"]("dark")), createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
 		key: "color-schema",
-		newValue: set(dark[0]())
-	})));
-	return dark;
+		newValue: L(z[0]())
+	}))), z;
 }
-function useMemoAsync(fn, init) {
-	const REJECT = Symbol();
-	const [val, setVal] = createSignal(init);
-	createComputed(async () => {
-		const ret = fn(untrack(val));
-		const v = ret instanceof Promise ? await new Promise((resolve) => {
-			ret.then(resolve);
-			onCleanup(() => resolve(REJECT));
-		}) : ret;
-		v == REJECT || setVal(() => v);
-	});
-	return val;
+function useMemoAsync(h, L) {
+	let R = Symbol(), [B, V] = createSignal(L);
+	return createComputed(async () => {
+		let L = h(untrack(B)), z = L instanceof Promise ? await new Promise((h) => {
+			L.then(h), onCleanup(() => h(R));
+		}) : L;
+		z == R || V(() => z);
+	}), B;
 }
-function useSignle2(v, opt) {
-	const state = createSignal(isFunction(v) ? void 0 : v);
-	const before = (v$1) => {
-		const v2 = opt?.before?.(v$1);
-		return isPromise(v2) ? v2.then((v3) => v3 === void 0 ? v$1 : v3) : v2 ?? v$1;
-	};
-	const val = useMemoAsync(() => before(state[0]()));
-	if (isFunction(v)) {
-		const fned = useMemoAsync(() => before(v()));
-		createComputed(() => state[1](fned()));
+function useSignle2(h, L) {
+	let R = createSignal(isFunction(h) ? void 0 : h), B = (h) => {
+		let R = L?.before?.(h);
+		return isPromise(R) ? R.then((L) => L === void 0 ? h : L) : R ?? h;
+	}, V = useMemoAsync(() => B(R[0]()));
+	if (isFunction(h)) {
+		let L = useMemoAsync(() => B(h()));
+		createComputed(() => R[1](L()));
 	}
-	return [val, state[1]];
+	return [V, R[1]];
 }
 var $MEMO = Symbol();
-function toReactive(fn) {
-	const v = () => unFn(fn);
-	const trueFn = () => true;
-	const get = (k) => ((e) => typeof e == "function" && $MEMO in e ? e() : e)(v()[k]);
+function toReactive(R) {
+	let z = () => unFn(R), B = () => !0, V = (h) => ((h) => typeof h == "function" && $MEMO in h ? h() : h)(z()[h]);
 	return new Proxy(Object.create(null), {
-		get: (o, k, r) => k == $PROXY ? r : k == $RAW ? r : ((v$1) => typeof v$1 == "function" && $MEMO in v$1 ? v$1() : v$1)(v()[k]),
-		set: trueFn,
-		defineProperty: (o, k, attributes) => Object.defineProperty(v(), k, attributes),
-		deleteProperty: trueFn,
-		getPrototypeOf: () => Object.getPrototypeOf(v()),
-		has: (o, p) => p == $PROXY || p in v(),
-		ownKeys: (o) => Object.keys(v()),
-		getOwnPropertyDescriptor: (o, k) => ({
-			enumerable: true,
-			configurable: true,
+		get: (h, R, B) => R == $PROXY || R == $RAW ? B : ((h) => typeof h == "function" && $MEMO in h ? h() : h)(z()[R]),
+		set: B,
+		defineProperty: (h, L, R) => Object.defineProperty(z(), L, R),
+		deleteProperty: B,
+		getPrototypeOf: () => Object.getPrototypeOf(z()),
+		has: (h, R) => R == $PROXY || R in z(),
+		ownKeys: (h) => Object.keys(z()),
+		getOwnPropertyDescriptor: (h, L) => ({
+			enumerable: !0,
+			configurable: !0,
 			get() {
-				return get(k);
+				return V(L);
 			},
-			set: trueFn
+			set: B
 		})
 	});
 }
-function useMemo(fn) {
-	const ret = createMemo(fn);
-	ret[$MEMO] = 1;
-	return ret;
+function useMemo(h) {
+	let L = createMemo(h);
+	return L[$MEMO] = 1, L;
 }
-function useHover(el) {
-	const [hover, setHover] = createSignal(false);
-	createEventListener(el, "pointerenter", () => setHover(true));
-	createEventListener(el, "pointerleave", () => setHover(false));
-	return hover;
+function useHover(h) {
+	let [L, R] = createSignal(!1);
+	return createEventListener(h, "pointerenter", () => R(!0)), createEventListener(h, "pointerleave", () => R(!1)), L;
 }
-function useMouseDown(el) {
-	const [down, setDown] = createSignal(false);
-	createEventListener(el, "pointerdown", () => setDown(true));
-	createEventListener(document.body, "pointerup", () => setDown(false));
-	return down;
+function useMouseDown(h) {
+	let [L, R] = createSignal(!1);
+	return createEventListener(h, "pointerdown", () => R(!0)), createEventListener(document.body, "pointerup", () => R(!1)), L;
 }
-function useClicked(el) {
-	const [clicked, setClicked] = createSignal(false);
-	const els = () => castArray(access(el));
-	createEventListener(() => els().map((e) => e?.getRootNode()), "click", (e) => setClicked(els().some((el$1) => el$1?.contains(e.target))));
-	return clicked;
+function useClicked(h) {
+	let [L, R] = createSignal(!1), z = () => castArray(access(h));
+	return createEventListener(() => z().map((h) => h?.getRootNode()), "click", (h) => R(z().some((L) => L?.contains(h.target)))), L;
 }
-function useMutation(initial, options, cb) {
-	const ret = createSignal(cb());
-	createMutationObserver(initial, options, (ms) => ret[1](cb()));
-	return ret[0];
+function useMutation(h, L, R) {
+	let z = createSignal(R());
+	return createMutationObserver(h, L, (h) => z[1](R())), z[0];
 }
-function useTinykeys(el, handlers) {
-	createEventListener(el, "keydown", createKeybindingsHandler({ ...mapValues(handlers, (cb) => (e) => {
-		e.preventDefault();
-		cb(e);
+function useTinykeys(h, L) {
+	createEventListener(h, "keydown", createKeybindingsHandler({ ...mapValues(L, (h) => (L) => {
+		L.preventDefault(), h(L);
 	}) }));
 }
-function useHistory([val, setVal]) {
-	let bool = 1;
-	const state = createMutable({
+function useHistory([h, L]) {
+	let R = 1, z = createMutable({
 		index: -1,
 		history: []
-	});
-	const clear = () => (state.index = 0, state.history = [val()]);
-	const canUndo = () => state.index > 0;
-	const canRedo = () => state.index < state.history.length - 1;
-	const undo = () => canUndo() && ((bool = 0) || setVal(state.history[--state.index]));
-	const redo = () => canRedo() && ((bool = 0) || setVal(state.history[++state.index]));
-	createRenderEffect(on(val, (ret) => {
-		if (ret == null) return;
-		if (!bool) return bool = 1;
-		if (canRedo()) state.history = state.history.slice(0, state.index + 1);
-		state.history[++state.index] = ret;
-	}));
-	return {
-		undo,
-		redo,
-		clear,
+	}), B = () => (z.index = 0, z.history = [h()]), V = () => z.index > 0, H = () => z.index < z.history.length - 1;
+	return createRenderEffect(on(h, (h) => {
+		if (h != null) {
+			if (!R) return R = 1;
+			H() && (z.history = z.history.slice(0, z.index + 1)), z.history[++z.index] = h;
+		}
+	})), {
+		undo: () => V() && ((R = 0) || L(z.history[--z.index])),
+		redo: () => H() && ((R = 0) || L(z.history[++z.index])),
+		clear: B,
 		get index() {
-			return state.index;
+			return z.index;
 		},
 		get history() {
-			return state.history;
+			return z.history;
 		}
 	};
 }
-export { model, toReactive, toSignle, useClicked, useDark, useHistory, useHover, useMemo, useMemoAsync, useMouseDown, useMutation, usePointerDrag, useSignle2, useTinykeys };
+function useMemoState(h) {
+	let L = createMutable({});
+	return createComputed(() => {
+		let z = h();
+		untrack(() => batch(() => {
+			for (let h in L) h in z || delete L[h];
+			Object.assign(L, z);
+		}));
+	}), L;
+}
+export { model, toReactive, toSignle, useClicked, useDark, useHistory, useHover, useMemo, useMemoAsync, useMemoState, useMouseDown, useMutation, usePointerDrag, useSignle2, useTinykeys };

package/dist/hooks/useDir.js

@@ -2,58 +2,41 @@ import { createEffect, mergeProps } from "solid-js";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { access } from "@solid-primitives/utils";
 import { createMutationObserver } from "@solid-primitives/mutation-observer";
-function useDir(options) {
-	options = mergeProps({ loop: true }, options);
-	const list = () => access(options.list) ?? access(options.ref);
-	const ref = () => access(options.ref) ?? access(options.list);
+function useDir(a) {
+	a = mergeProps({ loop: !0 }, a);
+	let o = () => access(a.list) ?? access(a.ref), s = () => access(a.ref) ?? access(a.list);
 	createEffect(() => {
-		if (ref().tabIndex > -1) return;
-		ref().tabIndex = 0;
-	});
-	createEventListener(ref, "keydown", (e) => {
+		s().tabIndex > -1 || (s().tabIndex = 0);
+	}), createEventListener(s, "keydown", (e) => {
 		if (![
 			"ArrowDown",
 			"ArrowUp",
 			"Enter"
 		].includes(e.key)) return;
-		e.stopPropagation();
-		e.preventDefault();
-		let hover = list()?.querySelector(".hover");
+		e.stopPropagation(), e.preventDefault();
+		let n = o()?.querySelector(".hover");
 		if (e.key == "Enter") {
-			hover?.click();
+			n?.click();
 			return;
 		}
-		let index = e.key == "ArrowDown" ? hover ? +hover?.getAttribute("data-index") + 1 : 0 : e.key == "ArrowUp" ? hover ? +hover?.getAttribute("data-index") - 1 : -1 : 0;
-		const el = list()?.querySelector(`[data-index='${index}']`);
-		if (!el) {
-			if (options.loop) {
-				hover?.classList.remove("hover");
-				index >= 0 ? list()?.querySelector(`[data-index='0']`)?.classList.add("hover") : [...list()?.querySelectorAll(`[data-index]`)].at(-1)?.classList.add("hover");
-			}
-		} else {
-			hover?.classList.remove("hover");
-			el.classList.add("hover");
-		}
-	}, options.options);
-	createEffect(() => {
-		if (!options.defaultFirst) return;
-		const el = list();
-		if (!el) return;
-		const hover = () => {
-			if (el.querySelector(".hover")) return;
-			el.querySelector(`[data-index]`)?.classList.add("hover");
+		let r = e.key == "ArrowDown" ? n ? +n?.getAttribute("data-index") + 1 : 0 : e.key == "ArrowUp" ? n ? n?.getAttribute("data-index") - 1 : -1 : 0, i = o()?.querySelector(`[data-index='${r}']`);
+		i ? (n?.classList.remove("hover"), i.classList.add("hover")) : a.loop && (n?.classList.remove("hover"), r >= 0 ? o()?.querySelector("[data-index='0']")?.classList.add("hover") : [...o()?.querySelectorAll("[data-index]")].at(-1)?.classList.add("hover"));
+	}, a.options), createEffect(() => {
+		if (!a.defaultFirst) return;
+		let e = o();
+		if (!e) return;
+		let n = () => {
+			e.querySelector(".hover") || e.querySelector("[data-index]")?.classList.add("hover");
 		};
-		createMutationObserver(el, { childList: true }, hover);
-		hover();
-	});
-	createEventListener(list, "mouseover", () => {
-		list()?.querySelector(".hover")?.classList.remove("hover");
+		createMutationObserver(e, { childList: !0 }, n), n();
+	}), createEventListener(o, "mouseover", () => {
+		o()?.querySelector(".hover")?.classList.remove("hover");
 	});
 }
-function VDir(el, options) {
+function VDir(e, n) {
 	useDir({
-		...options(),
-		list: el
+		...n(),
+		list: e
 	});
 }
 export { VDir, useDir };