diff --git a/.changeset/spicy-nails-design.md b/.changeset/spicy-nails-design.md
index 0c219fc1..b02c10d8 100644
--- a/.changeset/spicy-nails-design.md
+++ b/.changeset/spicy-nails-design.md
@@ -2,4 +2,4 @@
 "runed": minor
 ---
 
-add `box` and `readonlyBox` utilities
+add `box`  utilities
diff --git a/packages/runed/src/lib/functions/box/box.test.svelte.ts b/packages/runed/src/lib/functions/box/box.test.svelte.ts
index 6d93b77b..9b7374aa 100644
--- a/packages/runed/src/lib/functions/box/box.test.svelte.ts
+++ b/packages/runed/src/lib/functions/box/box.test.svelte.ts
@@ -8,8 +8,6 @@ describe("box", () => {
 		count.value = 1;
 		expect(count.value).toBe(1);
 	});
-
-
 });
 
 describe("box.from", () => {
diff --git a/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts b/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts
index ec21be5f..26441a15 100644
--- a/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts
+++ b/packages/runed/src/lib/functions/useDebounce/useDebounce.svelte.ts
@@ -1,4 +1,4 @@
-import type { FunctionArgs, ValueOrGetter } from "$lib/internal/types.js";
+import type { FunctionArgs, MaybeGetter } from "$lib/internal/types.js";
 
 /**
  * Function that takes a callback, and returns a debounced version of it.
@@ -15,7 +15,7 @@ import type { FunctionArgs, ValueOrGetter } from "$lib/internal/types.js";
  */
 export function useDebounce<Callback extends FunctionArgs>(
 	callback: Callback,
-	wait: ValueOrGetter<number> = 250
+	wait: MaybeGetter<number> = 250
 ) {
 	let timeout: ReturnType<typeof setTimeout> | undefined;
 	let resolve: (value: ReturnType<Callback>) => void;
diff --git a/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts b/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts
index 1598921a..30d97567 100644
--- a/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts
+++ b/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts
@@ -1,5 +1,5 @@
-import type { ValueOrReadonlyBox } from "$lib/index.js";
-import { readonlyBox } from "$lib/index.js";
+import { box } from "../box/box.svelte.js";
+import type { MaybeBoxOrGetter } from "$lib/internal/types.js";
 
 type Options = {
 	initialSize?: {
@@ -19,12 +19,12 @@ type Options = {
  * @returns an object with `width` and `height` properties.
  */
 export function useElementSize(
-	_node: ValueOrReadonlyBox<HTMLElement | undefined>,
+	_node: MaybeBoxOrGetter<HTMLElement | undefined>,
 	options: Options = {
 		box: "border-box",
 	}
 ): { width: number; height: number } {
-	const node = readonlyBox(_node);
+	const node = box.from(_node);
 	const size = $state({
 		width: options.initialSize?.width ?? 0,
 		height: options.initialSize?.height ?? 0,
diff --git a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts
index 350244a5..0f4607a1 100644
--- a/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts
+++ b/packages/runed/src/lib/functions/useEventListener/useEventListener.svelte.ts
@@ -1,15 +1,17 @@
+import { box } from "../box/box.svelte.js";
+import type { MaybeBoxOrGetter } from "$lib/internal/types.js";
 import { addEventListener } from "$lib/internal/utils/event.js";
-import { type ValueOrReadonlyBox, readonlyBox } from "$lib/index.js";
+;
 
 export function useEventListener<TEvent extends keyof WindowEventMap>(
-	target: ValueOrReadonlyBox<Window | null | undefined>,
+	target: MaybeBoxOrGetter<Window | null | undefined>,
 	event: TEvent,
 	handler: (this: Window, event: WindowEventMap[TEvent]) => unknown,
 	options?: boolean | AddEventListenerOptions
 ): void;
 
 export function useEventListener<TEvent extends keyof DocumentEventMap>(
-	target: ValueOrReadonlyBox<Document | null | undefined>,
+	target: MaybeBoxOrGetter<Document | null | undefined>,
 	event: TEvent,
 	handler: (this: Document, event: DocumentEventMap[TEvent]) => unknown,
 	options?: boolean | AddEventListenerOptions
@@ -19,26 +21,26 @@ export function useEventListener<
 	TElement extends HTMLElement,
 	TEvent extends keyof HTMLElementEventMap,
 >(
-	target: ValueOrReadonlyBox<TElement | null | undefined>,
+	target: MaybeBoxOrGetter<TElement | null | undefined>,
 	event: TEvent,
 	handler: (this: TElement, event: HTMLElementEventMap[TEvent]) => unknown,
 	options?: boolean | AddEventListenerOptions
 ): void;
 
 export function useEventListener(
-	target: ValueOrReadonlyBox<EventTarget | null | undefined>,
+	target: MaybeBoxOrGetter<EventTarget | null | undefined>,
 	event: string,
 	handler: EventListenerOrEventListenerObject,
 	options?: boolean | AddEventListenerOptions
 ): void;
 
 export function useEventListener(
-	_target: ValueOrReadonlyBox<EventTarget | null | undefined>,
+	_target: MaybeBoxOrGetter<EventTarget | null | undefined>,
 	event: string,
 	handler: EventListenerOrEventListenerObject,
 	options?: boolean | AddEventListenerOptions
 ) {
-	const target = readonlyBox(_target);
+	const target = box.from(_target);
 
 	$effect(() => {
 		if (target.value === undefined || target.value === null) return;
diff --git a/packages/runed/src/lib/internal/types.ts b/packages/runed/src/lib/internal/types.ts
index 4f86037f..ac78ce65 100644
--- a/packages/runed/src/lib/internal/types.ts
+++ b/packages/runed/src/lib/internal/types.ts
@@ -1,5 +1,9 @@
+import type { ReadableBox } from "$lib/functions/index.js";
+
 // eslint-disable-next-line ts/no-explicit-any
 export type FunctionArgs<Args extends any[] = any[], Return = void> = (...args: Args) => Return;
 
 export type Getter<T> = () => T;
-export type ValueOrGetter<T> = T | (() => T);
+export type MaybeGetter<T> = T | (() => T);
+
+export type MaybeBoxOrGetter<T> = T | Getter<T> | ReadableBox<T>
\ No newline at end of file