intable 0.0.2 → 0.0.4

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

@@ -1,6 +1,7 @@
 import { type Signal } from 'solid-js';
 import { type Many, type MaybeAccessor } from '@solid-primitives/utils';
-interface UseDragOptions {
+interface UseMoveOptions {
+    preventDefault?: boolean;
     start?(e: PointerEvent, move: (cb: MoveCB) => void, end: (cb: EndCb) => void): void;
 }
 type MoveCB = (e: PointerEvent, o: {
@@ -10,7 +11,7 @@ type MoveCB = (e: PointerEvent, o: {
     oy: number;
 }) => void;
 type EndCb = (e: PointerEvent) => void;
-export declare function usePointerDrag(el: MaybeAccessor<HTMLElement | undefined>, options: UseDragOptions): void;
+export declare function usePointerDrag(el: MaybeAccessor<HTMLElement | undefined>, options: UseMoveOptions): void;
 export declare function model(el: any, value: () => [() => string, (v: string) => any]): void;
 export declare function toSignle<T extends Record<string, any>>(state: T, k: keyof T): ((v: any) => any)[];
 export declare function useDark(): [get: import("solid-js").Accessor<boolean>, set: import("solid-js").Setter<boolean>, init: string | Promise<string>];

package/dist/hooks/index.js

@@ -1,181 +1,146 @@
 import { unFn } from "../utils.js";
-import { $PROXY, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, on, onCleanup, untrack } from "solid-js";
+import { $PROXY, 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 } from "@solid-primitives/event-listener";
+import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
 import { createPointerListeners } from "@solid-primitives/pointer";
 import { access } from "@solid-primitives/utils";
 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) {
-	createPointerListeners({
-		target: el,
-		passive: false,
-		onDown(e) {
-			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(m, P) {
+	P = mergeProps({ preventDefault: !0 }, P), createPointerListeners({
+		target: m,
+		passive: !1,
+		onDown(m) {
+			P.preventDefault && m.preventDefault();
+			let [F, I] = [m.x, m.y], L, R;
+			P.start?.(m, (m) => L = m, (m) => R = m), createRoot((P) => {
 				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(m) {
+						let [P, R] = [m.x - F, m.y - I];
+						L?.(m, {
+							sx: F,
+							sy: I,
+							ox: P,
+							oy: R
 						});
 					},
 					onUp() {
-						end?.(e);
-						dispose();
-						move = void 0;
-						end = void 0;
+						R?.(m), P(), L = void 0, R = void 0;
 					}
-				});
+				}), createEventListenerMap(document, { drop: P });
 			});
 		}
 	});
 }
-function model(el, value) {
-	const [field, setField] = value();
-	createRenderEffect(() => el.value = field());
-	el.addEventListener("input", (e) => setField(e.target.value));
+function model(m, P) {
+	let [F, I] = P();
+	createRenderEffect(() => m.value = F()), m.addEventListener("input", (m) => I(m.target.value));
 }
-function toSignle(state, k) {
-	return [() => state[k], (v) => state[k] = v];
+function toSignle(m, P) {
+	return [() => m[P], (F) => m[P] = F];
 }
 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 m = (m) => m == "dark" || F() && !m, P = (m) => m ? "dark" : "light", F = () => window.matchMedia("(prefers-color-scheme: dark)").matches, L = makePersisted(createSignal(F()), {
 		name: "color-schema",
 		storage: localStorage,
 		sync: storageSync,
-		serialize: set,
-		deserialize: get
+		serialize: P,
+		deserialize: m
 	});
-	createEffect(() => document.documentElement.classList[dark[0]() ? "add" : "remove"]("dark"));
-	createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
+	return createEffect(() => document.documentElement.classList[L[0]() ? "add" : "remove"]("dark")), createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
 		key: "color-schema",
-		newValue: set(dark[0]())
-	})));
-	return dark;
+		newValue: P(L[0]())
+	}))), L;
 }
-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(m, P) {
+	let I = Symbol(), [L, R] = createSignal(P);
+	return createComputed(async () => {
+		let P = m(untrack(L)), F = P instanceof Promise ? await new Promise((m) => {
+			P.then(m), onCleanup(() => m(I));
+		}) : P;
+		F == I || R(() => F);
+	}), L;
 }
-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(m, P) {
+	let I = createSignal(isFunction(m) ? void 0 : m), L = (m) => {
+		let F = P?.before?.(m);
+		return isPromise(F) ? F.then((P) => P === void 0 ? m : P) : F ?? m;
+	}, R = useMemoAsync(() => L(I[0]()));
+	if (isFunction(m)) {
+		let P = useMemoAsync(() => L(m()));
+		createComputed(() => I[1](P()));
 	}
-	return [val, state[1]];
+	return [R, I[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(F) {
+	let I = () => unFn(F), L = () => !0, R = (m) => ((m) => typeof m == "function" && $MEMO in m ? m() : m)(I()[m]);
 	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: (m, F, L) => F == $PROXY || F == $RAW ? L : ((m) => typeof m == "function" && $MEMO in m ? m() : m)(I()[F]),
+		set: L,
+		defineProperty: (m, P, F) => Object.defineProperty(I(), P, F),
+		deleteProperty: L,
+		getPrototypeOf: () => Object.getPrototypeOf(I()),
+		has: (m, F) => F == $PROXY || F in I(),
+		ownKeys: (m) => Object.keys(I()),
+		getOwnPropertyDescriptor: (m, P) => ({
+			enumerable: !0,
+			configurable: !0,
 			get() {
-				return get(k);
+				return R(P);
 			},
-			set: trueFn
+			set: L
 		})
 	});
 }
-function useMemo(fn) {
-	const ret = createMemo(fn);
-	ret[$MEMO] = 1;
-	return ret;
+function useMemo(m) {
+	let P = createMemo(m);
+	return P[$MEMO] = 1, P;
 }
-function useHover(el) {
-	const [hover, setHover] = createSignal(false);
-	createEventListener(el, "pointerenter", () => setHover(true));
-	createEventListener(el, "pointerleave", () => setHover(false));
-	return hover;
+function useHover(m) {
+	let [P, F] = createSignal(!1);
+	return createEventListener(m, "pointerenter", () => F(!0)), createEventListener(m, "pointerleave", () => F(!1)), P;
 }
-function useMouseDown(el) {
-	const [down, setDown] = createSignal(false);
-	createEventListener(el, "pointerdown", () => setDown(true));
-	createEventListener(document.body, "pointerup", () => setDown(false));
-	return down;
+function useMouseDown(m) {
+	let [P, F] = createSignal(!1);
+	return createEventListener(m, "pointerdown", () => F(!0)), createEventListener(document.body, "pointerup", () => F(!1)), P;
 }
-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(m) {
+	let [P, F] = createSignal(!1), I = () => castArray(access(m));
+	return createEventListener(() => I().map((m) => m?.getRootNode()), "click", (m) => F(I().some((P) => P?.contains(m.target)))), P;
 }
-function useMutation(initial, options, cb) {
-	const ret = createSignal(cb());
-	createMutationObserver(initial, options, (ms) => ret[1](cb()));
-	return ret[0];
+function useMutation(m, P, F) {
+	let I = createSignal(F());
+	return createMutationObserver(m, P, (m) => I[1](F())), I[0];
 }
-function useTinykeys(el, handlers) {
-	createEventListener(el, "keydown", createKeybindingsHandler({ ...mapValues(handlers, (cb) => (e) => {
-		e.preventDefault();
-		cb(e);
+function useTinykeys(m, P) {
+	createEventListener(m, "keydown", createKeybindingsHandler({ ...mapValues(P, (m) => (P) => {
+		P.preventDefault(), m(P);
 	}) }));
 }
-function useHistory([val, setVal]) {
-	let bool = 1;
-	const state = createMutable({
+function useHistory([m, P]) {
+	let F = 1, I = 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,
+	}), L = () => (I.index = 0, I.history = [m()]), z = () => I.index > 0, B = () => I.index < I.history.length - 1;
+	return createRenderEffect(on(m, (m) => {
+		if (m != null) {
+			if (!F) return F = 1;
+			B() && (I.history = I.history.slice(0, I.index + 1)), I.history[++I.index] = m;
+		}
+	})), {
+		undo: () => z() && ((F = 0) || P(I.history[--I.index])),
+		redo: () => B() && ((F = 0) || P(I.history[++I.index])),
+		clear: L,
 		get index() {
-			return state.index;
+			return I.index;
 		},
 		get history() {
-			return state.history;
+			return I.history;
 		}
 	};
 }

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 };