diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json
index 072ae50c1..1bc2a30c4 100644
--- a/packages/bits-ui/package.json
+++ b/packages/bits-ui/package.json
@@ -63,6 +63,7 @@
 		"clsx": "^2.1.0",
 		"esm-env": "^1.0.0",
 		"nanoid": "^5.0.5",
+		"runed": "^0.1.0",
 		"scule": "^1.3.0",
 		"style-object-to-css-string": "^1.1.3",
 		"style-to-object": "^1.0.6"
diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
index 1cb98203f..565700e52 100644
--- a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
@@ -1,9 +1,8 @@
-import { getContext, setContext } from "svelte";
+import type { WritableBox } from "runed";
 import {
 	type Box,
-	type BoxedValues,
-	type ReadonlyBox,
-	type ReadonlyBoxedValues,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
 	afterTick,
 	getAriaDisabled,
 	getAriaExpanded,
@@ -13,7 +12,6 @@ import {
 	getDataOrientation,
 	kbd,
 	useNodeById,
-	verifyContextDeps,
 } from "$lib/internal/index.js";
 import { type UseRovingFocusReturn, useRovingFocus } from "$lib/internal/useRovingFocus.svelte.js";
 import type { Orientation } from "$lib/shared/index.js";
@@ -29,7 +27,7 @@ const HEADER_ATTR = "accordion-header";
 // BASE
 //
 
-type AccordionBaseStateProps = ReadonlyBoxedValues<{
+type AccordionBaseStateProps = ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 	orientation: Orientation;
@@ -37,9 +35,9 @@ type AccordionBaseStateProps = ReadonlyBoxedValues<{
 }>;
 
 class AccordionBaseState {
-	id = undefined as unknown as ReadonlyBox<string>;
-	node: Box<HTMLElement | null>;
-	disabled = undefined as unknown as ReadonlyBox<boolean>;
+	id = undefined as unknown as AccordionBaseStateProps["id"];
+	node: WritableBox<HTMLElement | null>;
+	disabled = undefined as unknown as AccordionBaseStateProps["disabled"];
 	#loop = undefined as unknown as AccordionBaseStateProps["loop"];
 	orientation = undefined as unknown as AccordionBaseStateProps["orientation"];
 	rovingFocusGroup = undefined as unknown as UseRovingFocusReturn;
@@ -71,10 +69,10 @@ class AccordionBaseState {
 // SINGLE
 //
 
-type AccordionSingleStateProps = AccordionBaseStateProps & BoxedValues<{ value: string }>;
+type AccordionSingleStateProps = AccordionBaseStateProps & WritableBoxedValues<{ value: string }>;
 
 export class AccordionSingleState extends AccordionBaseState {
-	#value: Box<string>;
+	#value: AccordionSingleStateProps["value"];
 	isMulti = false as const;
 
 	constructor(props: AccordionSingleStateProps) {
@@ -95,10 +93,10 @@ export class AccordionSingleState extends AccordionBaseState {
 // MULTIPLE
 //
 
-type AccordionMultiStateProps = AccordionBaseStateProps & BoxedValues<{ value: string[] }>;
+type AccordionMultiStateProps = AccordionBaseStateProps & WritableBoxedValues<{ value: string[] }>;
 
 export class AccordionMultiState extends AccordionBaseState {
-	#value: Box<string[]>;
+	#value: AccordionMultiStateProps["value"];
 	isMulti = true as const;
 
 	constructor(props: AccordionMultiStateProps) {
@@ -123,7 +121,7 @@ export class AccordionMultiState extends AccordionBaseState {
 // ITEM
 //
 
-type AccordionItemStateProps = ReadonlyBoxedValues<{
+type AccordionItemStateProps = ReadableBoxedValues<{
 	value: string;
 	disabled: boolean;
 }> & {
@@ -131,8 +129,8 @@ type AccordionItemStateProps = ReadonlyBoxedValues<{
 };
 
 export class AccordionItemState {
-	value = undefined as unknown as ReadonlyBox<string>;
-	disabled = undefined as unknown as ReadonlyBox<boolean>;
+	value = undefined as unknown as AccordionItemStateProps["value"];
+	disabled = undefined as unknown as AccordionItemStateProps["disabled"];
 	root = undefined as unknown as AccordionState;
 	isSelected = $derived(this.root.includesItem(this.value.value));
 	isDisabled = $derived(this.disabled.value || this.root.disabled.value);
@@ -170,14 +168,14 @@ export class AccordionItemState {
 // TRIGGER
 //
 
-type AccordionTriggerStateProps = ReadonlyBoxedValues<{
+type AccordionTriggerStateProps = ReadableBoxedValues<{
 	disabled: boolean;
 	id: string;
 }>;
 
 class AccordionTriggerState {
-	#disabled = undefined as unknown as ReadonlyBox<boolean>;
-	#id = undefined as unknown as ReadonlyBox<string>;
+	#disabled = undefined as unknown as AccordionTriggerStateProps["disabled"];
+	#id = undefined as unknown as AccordionTriggerStateProps["id"];
 	#node: Box<HTMLElement | null>;
 	#root = undefined as unknown as AccordionState;
 	#itemState = undefined as unknown as AccordionItemState;
@@ -229,20 +227,20 @@ class AccordionTriggerState {
 // CONTENT
 //
 
-type AccordionContentStateProps = ReadonlyBoxedValues<{
+type AccordionContentStateProps = ReadableBoxedValues<{
 	forceMount: boolean;
 	id: string;
 }>;
 
 class AccordionContentState {
 	item = undefined as unknown as AccordionItemState;
-	node: Box<HTMLElement | null>;
-	#id = undefined as unknown as ReadonlyBox<string>;
+	node: WritableBox<HTMLElement | null>;
+	#id = undefined as unknown as AccordionContentStateProps["id"];
 	#originalStyles: { transitionDuration: string; animationName: string } | undefined = undefined;
 	#isMountAnimationPrevented = false;
 	#width = $state(0);
 	#height = $state(0);
-	#forceMount = undefined as unknown as ReadonlyBox<boolean>;
+	#forceMount = undefined as unknown as AccordionContentStateProps["forceMount"];
 
 	present = $derived(this.#forceMount.value || this.item.isSelected);
 
@@ -309,7 +307,7 @@ class AccordionContentState {
 	} as const);
 }
 
-type AccordionHeaderStateProps = ReadonlyBoxedValues<{
+type AccordionHeaderStateProps = ReadableBoxedValues<{
 	level: 1 | 2 | 3 | 4 | 5 | 6;
 }>;
 
@@ -340,7 +338,7 @@ type AccordionState = AccordionSingleState | AccordionMultiState;
 type InitAccordionProps = {
 	type: "single" | "multiple";
 	value: Box<string> | Box<string[]>;
-} & ReadonlyBoxedValues<{
+} & ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 	orientation: Orientation;
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
index 5343998c5..6b4e583bc 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useAccordionContent } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
 	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 
 	let {
 		child,
@@ -15,8 +16,8 @@
 	}: AccordionContentProps = $props();
 
 	const state = useAccordionContent({
-		forceMount: readonlyBox(() => forceMount),
-		id: readonlyBox(() => id),
+		forceMount: box.with(() => forceMount),
+		id: box.with(() => id),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte
index 52db61597..74719a9ff 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { AccordionHeaderProps } from "../types.js";
 	import { useAccordionHeader } from "../accordion.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 
 	let {
 		asChild,
@@ -14,7 +14,7 @@
 	}: AccordionHeaderProps = $props();
 
 	const state = useAccordionHeader({
-		level: readonlyBox(() => level),
+		level: box.with(() => level),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte
index 0b054801d..dc7833830 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { AccordionItemProps } from "../types.js";
 	import { useAccordionItem } from "../accordion.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	let {
 		asChild,
@@ -14,8 +14,8 @@
 	}: AccordionItemProps = $props();
 
 	const state = useAccordionItem({
-		value: readonlyBox(() => value),
-		disabled: readonlyBox(() => disabled),
+		value: box.with(() => value),
+		disabled: box.with(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte
index 8e2bc52f0..eb931d8fe 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { AccordionTriggerProps } from "../types.js";
 	import { useAccordionTrigger } from "../accordion.svelte.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 
 	let {
 		disabled = false,
@@ -14,8 +15,8 @@
 	}: AccordionTriggerProps = $props();
 
 	const state = useAccordionTrigger({
-		disabled: readonlyBox(() => disabled),
-		id: readonlyBox(() => id),
+		disabled: box.with(() => disabled),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
index 937ffd5dc..0ceafb109 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { type WritableBox, box } from "runed";
 	import { useAccordionRoot } from "../accordion.svelte.js";
 	import type { RootProps } from "../index.js";
-	import { type Box, box, mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
 
 	let {
 		disabled = false,
@@ -22,17 +24,17 @@
 
 	const state = useAccordionRoot({
 		type,
-		value: box(
+		value: box.with(
 			() => value!,
 			(v) => {
 				value = v;
 				onValueChange?.(v as any);
 			}
-		) as Box<string> | Box<string[]>,
-		id: readonlyBox(() => id),
-		disabled: readonlyBox(() => disabled),
-		loop: readonlyBox(() => loop),
-		orientation: readonlyBox(() => orientation),
+		) as WritableBox<string> | WritableBox<string[]>,
+		id: box.with(() => id),
+		disabled: box.with(() => disabled),
+		loop: box.with(() => loop),
+		orientation: box.with(() => orientation),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/avatar/avatar.svelte.ts b/packages/bits-ui/src/lib/bits/avatar/avatar.svelte.ts
index 82caa405f..c871b4079 100644
--- a/packages/bits-ui/src/lib/bits/avatar/avatar.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/avatar/avatar.svelte.ts
@@ -1,14 +1,15 @@
 import { untrack } from "svelte";
+import type { ReadableBox, WritableBox } from "runed";
 import type { AvatarImageLoadingStatus } from "./types.js";
-import type { Box, ReadonlyBox, ReadonlyBoxedValues } from "$lib/internal/box.svelte.js";
 import { createContext } from "$lib/internal/createContext.js";
+import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 
 /**
  * ROOT
  */
 type AvatarRootStateProps = {
-	delayMs: ReadonlyBox<number>;
-	loadingStatus: Box<AvatarImageLoadingStatus>;
+	delayMs: ReadableBox<number>;
+	loadingStatus: WritableBox<AvatarImageLoadingStatus>;
 };
 
 type AvatarImageSrc = string | null | undefined;
@@ -57,7 +58,7 @@ class AvatarRootState {
  * IMAGE
  */
 
-type AvatarImageStateProps = ReadonlyBoxedValues<{
+type AvatarImageStateProps = ReadableBoxedValues<{
 	src: AvatarImageSrc;
 }>;
 
diff --git a/packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte b/packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte
index 5380c1692..3ce84317c 100644
--- a/packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte
+++ b/packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { ImageProps } from "../index.js";
 	import { useAvatarImage } from "../avatar.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let { src, asChild, child, el = $bindable(), ...restProps }: ImageProps = $props();
 
 	const state = useAvatarImage({
-		src: readonlyBox(() => src),
+		src: box.with(() => src),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte b/packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte
index d53d53231..13e4e3b69 100644
--- a/packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte
+++ b/packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useAvatarRoot } from "../avatar.svelte.js";
-	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -16,8 +16,8 @@
 	}: RootProps = $props();
 
 	const state = useAvatarRoot({
-		delayMs: readonlyBox(() => delayMs),
-		loadingStatus: box(
+		delayMs: box.with(() => delayMs),
+		loadingStatus: box.with(
 			() => loadingStatus,
 			(v) => {
 				if (loadingStatus !== v) {
diff --git a/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts b/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts
index b10b4b540..486238c9a 100644
--- a/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts
@@ -1,8 +1,6 @@
 import {
-	type Box,
-	type BoxedValues,
-	type ReadonlyBox,
-	type ReadonlyBoxedValues,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
 	getAriaChecked,
 	getAriaRequired,
 	getDataDisabled,
@@ -10,22 +8,22 @@ import {
 } from "$lib/internal/index.js";
 import { createContext } from "$lib/internal/createContext.js";
 
-type CheckboxRootStateProps = ReadonlyBoxedValues<{
+type CheckboxRootStateProps = ReadableBoxedValues<{
 	disabled: boolean;
 	required: boolean;
 	name: string | undefined;
 	value: string | undefined;
 }> &
-	BoxedValues<{
+	WritableBoxedValues<{
 		checked: boolean | "indeterminate";
 	}>;
 
 class CheckboxRootState {
-	checked = undefined as unknown as Box<boolean | "indeterminate">;
-	disabled = undefined as unknown as ReadonlyBox<boolean>;
-	required = undefined as unknown as ReadonlyBox<boolean>;
-	name: ReadonlyBox<string | undefined>;
-	value: ReadonlyBox<string | undefined>;
+	checked = undefined as unknown as CheckboxRootStateProps["checked"];
+	disabled = undefined as unknown as CheckboxRootStateProps["disabled"];
+	required = undefined as unknown as CheckboxRootStateProps["required"];
+	name: CheckboxRootStateProps["name"];
+	value: CheckboxRootStateProps["value"];
 
 	indicatorprops = $derived({
 		"data-disabled": getDataDisabled(this.disabled.value),
diff --git a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
index 87ddeb283..25a4f25a6 100644
--- a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
+++ b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useCheckboxRoot } from "../checkbox.svelte.js";
 	import CheckboxInput from "./checkbox-input.svelte";
-	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -20,7 +20,7 @@
 	}: RootProps = $props();
 
 	const state = useCheckboxRoot({
-		checked: box(
+		checked: box.with(
 			() => checked,
 			(v) => {
 				if (checked !== v) {
@@ -29,10 +29,10 @@
 				}
 			}
 		),
-		disabled: readonlyBox(() => disabled),
-		required: readonlyBox(() => required),
-		name: readonlyBox(() => name),
-		value: readonlyBox(() => value),
+		disabled: box.with(() => disabled),
+		required: box.with(() => required),
+		name: box.with(() => name),
+		value: box.with(() => value),
 	});
 
 	const mergedProps = $derived(mergeProps({ ...restProps }, state.props));
diff --git a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
index 0955a1e0f..c898b3da1 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
@@ -1,30 +1,27 @@
+import { box } from "runed";
 import {
-	type Box,
-	type BoxedValues,
-	type ReadonlyBox,
-	type ReadonlyBoxedValues,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
 	afterTick,
-	boxedState,
 	getAriaExpanded,
 	getDataDisabled,
 	getDataOpenClosed,
-	readonlyBoxedState,
 	useId,
 	useNodeById,
 } from "$lib/internal/index.js";
 import { createContext } from "$lib/internal/createContext.js";
 
-type CollapsibleRootStateProps = BoxedValues<{
+type CollapsibleRootStateProps = WritableBoxedValues<{
 	open: boolean;
 }> &
-	ReadonlyBoxedValues<{
+	ReadableBoxedValues<{
 		disabled: boolean;
 	}>;
 
 class CollapsibleRootState {
-	open = undefined as unknown as Box<boolean>;
-	disabled = undefined as unknown as ReadonlyBox<boolean>;
-	contentId = readonlyBoxedState(useId());
+	open = undefined as unknown as CollapsibleRootStateProps["open"];
+	disabled = undefined as unknown as CollapsibleRootStateProps["disabled"];
+	contentId = box.with(() => useId());
 	props = $derived({
 		"data-state": getDataOpenClosed(this.open.value),
 		"data-disabled": getDataDisabled(this.disabled.value),
@@ -49,7 +46,7 @@ class CollapsibleRootState {
 	}
 }
 
-type CollapsibleContentStateProps = ReadonlyBoxedValues<{
+type CollapsibleContentStateProps = ReadableBoxedValues<{
 	id: string;
 	forceMount: boolean;
 }>;
@@ -57,11 +54,11 @@ type CollapsibleContentStateProps = ReadonlyBoxedValues<{
 class CollapsibleContentState {
 	root = undefined as unknown as CollapsibleRootState;
 	#originalStyles: { transitionDuration: string; animationName: string } | undefined;
-	node = boxedState<HTMLElement | null>(null);
+	node = box<HTMLElement | null>(null);
 	#isMountAnimationPrevented = $state(false);
 	#width = $state(0);
 	#height = $state(0);
-	#forceMount = undefined as unknown as ReadonlyBox<boolean>;
+	#forceMount = undefined as unknown as CollapsibleContentStateProps["forceMount"];
 	props = $derived({
 		id: this.root.contentId.value,
 		"data-state": getDataOpenClosed(this.root.open.value),
diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte
index 7ebe1d568..6915308e4 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte
+++ b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useCollapsibleContent } from "../collapsible.svelte.js";
 	import type { CollapsibleContentProps } from "../types.js";
 	import { PresenceLayer } from "$lib/bits/utilities/presence-layer/index.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 
 	let {
 		child,
@@ -15,8 +16,8 @@
 	}: CollapsibleContentProps & { forceMount?: boolean } = $props();
 
 	const state = useCollapsibleContent({
-		id: readonlyBox(() => id),
-		forceMount: readonlyBox(() => forceMount),
+		id: box.with(() => id),
+		forceMount: box.with(() => forceMount),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
index e46333d00..b061a7d49 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
+++ b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useCollapsibleRoot } from "../collapsible.svelte.js";
-	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -16,14 +16,14 @@
 	}: RootProps = $props();
 
 	const state = useCollapsibleRoot({
-		open: box(
+		open: box.with(
 			() => open,
 			(v) => {
 				open = v;
 				onOpenChange?.(v);
 			}
 		),
-		disabled: readonlyBox(() => disabled),
+		disabled: box.with(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte
index c3cb77f5d..7b7bfea99 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useDialogContent } from "../dialog.svelte.js";
 	import type { ContentProps } from "../index.js";
 	import DismissableLayer from "$lib/bits/utilities/dismissable-layer/dismissable-layer.svelte";
@@ -6,7 +7,6 @@
 	import FocusScope from "$lib/bits/utilities/focus-scope/focus-scope.svelte";
 	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "$lib/bits/utilities/text-selection-layer/text-selection-layer.svelte";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { noop } from "$lib/internal/callbacks.js";
@@ -26,7 +26,7 @@
 	}: ContentProps = $props();
 
 	const state = useDialogContent({
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-description.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-description.svelte
index 8292df7cd..88bc74b3b 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-description.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-description.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useDialogDescription } from "../dialog.svelte.js";
 	import type { DescriptionProps } from "../index.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 
@@ -15,7 +15,7 @@
 	}: DescriptionProps = $props();
 
 	const state = useDialogDescription({
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte
index e89871ddb..5fe389a48 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-overlay.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useDialogOverlay } from "../dialog.svelte.js";
 	import type { OverlayProps } from "../index.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
@@ -17,7 +17,7 @@
 	}: OverlayProps = $props();
 
 	const state = useDialogOverlay({
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-title.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-title.svelte
index 43ebd2778..b8cbd9ad0 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-title.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-title.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useDialogTitle } from "../dialog.svelte.js";
 	import type { TitleProps } from "../index.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 
@@ -16,8 +16,8 @@
 	}: TitleProps = $props();
 
 	const state = useDialogTitle({
-		id: readonlyBox(() => id),
-		level: readonlyBox(() => level),
+		id: box.with(() => id),
+		level: box.with(() => level),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog-trigger.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog-trigger.svelte
index c26a1291f..7819f4ff2 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useDialogTrigger } from "../dialog.svelte.js";
 	import type { TriggerProps } from "../index.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 
@@ -15,7 +15,7 @@
 	}: TriggerProps = $props();
 
 	const state = useDialogTrigger({
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte b/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte
index 83ad278fa..2704caa90 100644
--- a/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte
+++ b/packages/bits-ui/src/lib/bits/dialog/components/dialog.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useDialogRoot } from "../dialog.svelte.js";
 	import type { RootProps } from "../index.js";
-	import { box } from "$lib/internal/box.svelte.js";
 
 	let { open = $bindable(false), onOpenChange, children }: RootProps = $props();
 
 	useDialogRoot({
-		open: box(
+		open: box.with(
 			() => open,
 			(v) => {
 				if (v !== open) {
diff --git a/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts b/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
index e2aeb4130..79a4f61cf 100644
--- a/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/dialog/dialog.svelte.ts
@@ -1,9 +1,6 @@
+import { box } from "runed";
 import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js";
-import {
-	type BoxedValues,
-	type ReadonlyBoxedValues,
-	boxedState,
-} from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
 import { createContext } from "$lib/internal/createContext.js";
 
@@ -14,19 +11,19 @@ const OVERLAY_ATTR = "data-dialog-overlay";
 const DESCRIPTION_ATTR = "data-dialog-description";
 const CLOSE_ATTR = "data-dialog-close";
 
-type DialogRootStateProps = BoxedValues<{
+type DialogRootStateProps = WritableBoxedValues<{
 	open: boolean;
 }>;
 
 class DialogRootState {
 	open = undefined as unknown as DialogRootStateProps["open"];
-	triggerNode = boxedState<HTMLElement | null>(null);
-	titleNode = boxedState<HTMLElement | null>(null);
-	contentNode = boxedState<HTMLElement | null>(null);
+	triggerNode = box<HTMLElement | null>(null);
+	titleNode = box<HTMLElement | null>(null);
+	contentNode = box<HTMLElement | null>(null);
 	contentId = $derived(this.contentNode.value ? this.contentNode.value.id : undefined);
 	titleId = $derived(this.titleNode.value ? this.titleNode.value.id : undefined);
 	triggerId = $derived(this.triggerNode.value ? this.triggerNode.value.id : undefined);
-	descriptionNode = boxedState<HTMLElement | null>(null);
+	descriptionNode = box<HTMLElement | null>(null);
 	descriptionId = $derived(
 		this.descriptionNode.value ? this.descriptionNode.value.id : undefined
 	);
@@ -74,7 +71,7 @@ class DialogRootState {
 	});
 }
 
-type DialogTriggerStateProps = ReadonlyBoxedValues<{
+type DialogTriggerStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
 
@@ -121,7 +118,7 @@ class DialogCloseState {
 	} as const);
 }
 
-type DialogTitleStateProps = ReadonlyBoxedValues<{
+type DialogTitleStateProps = ReadableBoxedValues<{
 	id: string;
 	level: 1 | 2 | 3 | 4 | 5 | 6;
 }>;
@@ -147,7 +144,7 @@ class DialogTitleState {
 	} as const);
 }
 
-type DialogDescriptionStateProps = ReadonlyBoxedValues<{
+type DialogDescriptionStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
 
@@ -168,7 +165,7 @@ class DialogDescriptionState {
 	} as const);
 }
 
-type DialogContentStateProps = ReadonlyBoxedValues<{
+type DialogContentStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
 
@@ -192,7 +189,7 @@ class DialogContentState {
 	} as const);
 }
 
-type DialogOverlayStateProps = ReadonlyBoxedValues<{
+type DialogOverlayStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
 
diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte
index 8481bf696..b513d9e66 100644
--- a/packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte
+++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination-next-button.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { NextButtonProps } from "../index.js";
 	import { usePaginationButton } from "../pagination.svelte.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 
 	let {
 		id = useId(),
@@ -15,7 +16,7 @@
 
 	const state = usePaginationButton({
 		type: "next",
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte
index 93ccbab83..dff375c4d 100644
--- a/packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte
+++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination-page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { PageProps } from "../index.js";
 	import { usePaginationPage } from "../pagination.svelte.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 
 	let {
 		id = useId(),
@@ -15,8 +16,8 @@
 	}: PageProps = $props();
 
 	const state = usePaginationPage({
-		id: readonlyBox(() => id),
-		page: readonlyBox(() => page),
+		id: box.with(() => id),
+		page: box.with(() => page),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte
index be11d1077..5e71ad48e 100644
--- a/packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte
+++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination-prev-button.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { PrevButtonProps } from "../index.js";
 	import { usePaginationButton } from "../pagination.svelte.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 
 	let {
 		id = useId(),
@@ -15,7 +16,7 @@
 
 	const state = usePaginationButton({
 		type: "prev",
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte b/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte
index 499e99d42..b674b553d 100644
--- a/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte
+++ b/packages/bits-ui/src/lib/bits/pagination/components/pagination.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { usePaginationRoot } from "../pagination.svelte.js";
-	import { box, readonlyBox, styleToString, useId } from "$lib/internal/index.js";
+	import { styleToString, useId } from "$lib/internal/index.js";
 
 	let {
 		id = useId(),
@@ -21,19 +22,19 @@
 	}: RootProps = $props();
 
 	const state = usePaginationRoot({
-		id: readonlyBox(() => id),
-		count: readonlyBox(() => count),
-		perPage: readonlyBox(() => perPage),
-		page: box(
+		id: box.with(() => id),
+		count: box.with(() => count),
+		perPage: box.with(() => perPage),
+		page: box.with(
 			() => page,
 			(v) => {
 				page = v;
 				onPageChange?.(v);
 			}
 		),
-		loop: readonlyBox(() => loop),
-		siblingCount: readonlyBox(() => siblingCount),
-		orientation: readonlyBox(() => orientation),
+		loop: box.with(() => loop),
+		siblingCount: box.with(() => siblingCount),
+		orientation: box.with(() => orientation),
 	});
 
 	const mergedProps = $derived({
diff --git a/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts b/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts
index cf608d82a..3eecd76b4 100644
--- a/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts
@@ -1,8 +1,8 @@
+import { box } from "runed";
 import type { Page, PageItem } from "./types.js";
 import {
-	type BoxedValues,
-	type ReadonlyBoxedValues,
-	boxedState,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
 	getDataOrientation,
 	getDirectionalKeys,
 	getElemDirection,
@@ -12,7 +12,7 @@ import {
 import type { Orientation } from "$lib/shared/index.js";
 import { createContext } from "$lib/internal/createContext.js";
 
-type PaginationRootStateProps = ReadonlyBoxedValues<{
+type PaginationRootStateProps = ReadableBoxedValues<{
 	id: string;
 	count: number;
 	perPage: number;
@@ -20,14 +20,14 @@ type PaginationRootStateProps = ReadonlyBoxedValues<{
 	orientation: Orientation;
 	loop: boolean;
 }> &
-	BoxedValues<{
+	WritableBoxedValues<{
 		page: number;
 	}>;
 
 class PaginationRootState {
 	id = undefined as unknown as PaginationRootStateProps["id"];
 	orientation = undefined as unknown as PaginationRootStateProps["orientation"];
-	node = boxedState<HTMLElement | null>(null);
+	node = box<HTMLElement | null>(null);
 	count = undefined as unknown as PaginationRootStateProps["count"];
 	perPage = undefined as unknown as PaginationRootStateProps["perPage"];
 	siblingCount = undefined as unknown as PaginationRootStateProps["siblingCount"];
@@ -101,7 +101,7 @@ class PaginationRootState {
 // PAGE
 //
 
-type PaginationPageStateProps = ReadonlyBoxedValues<{
+type PaginationPageStateProps = ReadableBoxedValues<{
 	id: string;
 	page: Page;
 }>;
@@ -109,7 +109,7 @@ type PaginationPageStateProps = ReadonlyBoxedValues<{
 class PaginationPage {
 	#id = undefined as unknown as PaginationPageStateProps["id"];
 	#root = undefined as unknown as PaginationRootState;
-	#node = boxedState<HTMLElement | null>(null);
+	#node = box<HTMLElement | null>(null);
 	page = undefined as unknown as PaginationPageStateProps["page"];
 
 	constructor(props: PaginationPageStateProps, root: PaginationRootState) {
@@ -143,7 +143,7 @@ class PaginationPage {
 // NEXT/PREV BUTTON
 //
 
-type PaginationButtonStateProps = ReadonlyBoxedValues<{
+type PaginationButtonStateProps = ReadableBoxedValues<{
 	id: string;
 }> & {
 	type: "prev" | "next";
@@ -152,7 +152,7 @@ type PaginationButtonStateProps = ReadonlyBoxedValues<{
 class PaginationButtonState {
 	id = undefined as unknown as PaginationButtonStateProps["id"];
 	#root = undefined as unknown as PaginationRootState;
-	node = boxedState<HTMLElement | null>(null);
+	node = box<HTMLElement | null>(null);
 	type = $state() as PaginationButtonStateProps["type"];
 
 	constructor(props: PaginationButtonStateProps, root: PaginationRootState) {
diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
index 7c9a84e2c..824ef29e2 100644
--- a/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
+++ b/packages/bits-ui/src/lib/bits/popover/components/popover-content.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { ContentProps } from "../index.js";
 	import { usePopoverContent } from "../popover.svelte.js";
 	import { PopperLayer } from "$lib/bits/utilities/popper-layer/index.js";
-	import { mergeProps, noop, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, noop, useId } from "$lib/internal/index.js";
 
 	let {
 		asChild,
@@ -19,7 +20,7 @@
 	}: ContentProps = $props();
 
 	const state = usePopoverContent({
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover-trigger.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover-trigger.svelte
index b89e8918d..77896f0da 100644
--- a/packages/bits-ui/src/lib/bits/popover/components/popover-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/popover/components/popover-trigger.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { TriggerProps } from "../index.js";
 	import { usePopoverTrigger } from "../popover.svelte.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
 
 	let {
@@ -15,7 +16,7 @@
 	}: TriggerProps = $props();
 
 	const state = usePopoverTrigger({
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/popover/components/popover.svelte b/packages/bits-ui/src/lib/bits/popover/components/popover.svelte
index 1fa718355..df8dfc445 100644
--- a/packages/bits-ui/src/lib/bits/popover/components/popover.svelte
+++ b/packages/bits-ui/src/lib/bits/popover/components/popover.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { usePopoverRoot } from "../popover.svelte.js";
-	import { box } from "$lib/internal/box.svelte.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
 
 	let { open = $bindable(false), children, onOpenChange }: RootProps = $props();
 
 	usePopoverRoot({
-		open: box(
+		open: box.with(
 			() => open,
 			(v) => {
 				if (open !== v) {
diff --git a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
index 427d431b6..5860ea8fe 100644
--- a/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/popover/popover.svelte.ts
@@ -1,22 +1,18 @@
-import {
-	type BoxedValues,
-	type ReadonlyBoxedValues,
-	boxedState,
-	readonlyBoxedState,
-} from "$lib/internal/box.svelte.js";
+import { box } from "runed";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { getAriaExpanded, getDataOpenClosed } from "$lib/internal/attrs.js";
 import { createContext } from "$lib/internal/createContext.js";
 
-type PopoverRootStateProps = BoxedValues<{
+type PopoverRootStateProps = WritableBoxedValues<{
 	open: boolean;
 }>;
 
 class PopoverRootState {
 	open = undefined as unknown as PopoverRootStateProps["open"];
-	contentId = readonlyBoxedState<string | undefined>(undefined);
-	triggerNode = boxedState<HTMLElement | null>(null);
+	contentId = box.with<string | undefined>(() => undefined);
+	triggerNode = box<HTMLElement | null>(null);
 
 	constructor(props: PopoverRootStateProps) {
 		this.open = props.open;
@@ -44,7 +40,7 @@ class PopoverRootState {
 	}
 }
 
-type PopoverTriggerStateProps = ReadonlyBoxedValues<{
+type PopoverTriggerStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
 
@@ -88,10 +84,9 @@ class PopoverTriggerState {
 	} as const);
 }
 
-type PopoverContentStateProps = ReadonlyBoxedValues<{
+type PopoverContentStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
-
 class PopoverContentState {
 	#id = undefined as unknown as PopoverContentStateProps["id"];
 	root = undefined as unknown as PopoverRootState;
diff --git a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
index 1f3da57e4..eaba17f34 100644
--- a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
+++ b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useProgressRootState } from "../progress.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -15,8 +15,8 @@
 	}: RootProps = $props();
 
 	const state = useProgressRootState({
-		value: readonlyBox(() => value),
-		max: readonlyBox(() => max),
+		value: box.with(() => value),
+		max: box.with(() => max),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts b/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts
index 7a1a8bc64..97a89e5d0 100644
--- a/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts
@@ -1,6 +1,6 @@
-import type { ReadonlyBoxedValues } from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 
-type ProgressRootStateProps = ReadonlyBoxedValues<{
+type ProgressRootStateProps = ReadableBoxedValues<{
 	value: number | null;
 	max: number;
 }>;
diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
index b3dcc9d1e..accee1ab9 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
+++ b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { ItemProps } from "../index.js";
 	import { useRadioGroupItem } from "../radio-group.svelte.js";
-	import { readonlyBox, styleToString, useId } from "$lib/internal/index.js";
+	import { styleToString, useId } from "$lib/internal/index.js";
 
 	let {
 		id = useId(),
@@ -18,11 +19,11 @@
 	}: ItemProps = $props();
 
 	const state = useRadioGroupItem({
-		value: readonlyBox(() => value),
-		disabled: readonlyBox(() => disabled),
-		id: readonlyBox(() => id),
-		onclick: readonlyBox(() => onclick),
-		onkeydown: readonlyBox(() => onkeydown),
+		value: box.with(() => value),
+		disabled: box.with(() => disabled),
+		id: box.with(() => id),
+		onclick: box.with(() => onclick),
+		onkeydown: box.with(() => onkeydown),
 	});
 
 	const mergedProps = $derived({
diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
index b5b68868d..35566f35d 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
+++ b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useRadioGroupRoot } from "../radio-group.svelte.js";
 	import RadioGroupInput from "./radio-group-input.svelte";
-	import { box, readonlyBox, styleToString, useId } from "$lib/internal/index.js";
+	import { styleToString, useId } from "$lib/internal/index.js";
 
 	let {
 		disabled = false,
@@ -22,13 +23,13 @@
 	}: RootProps = $props();
 
 	const state = useRadioGroupRoot({
-		orientation: readonlyBox(() => orientation),
-		disabled: readonlyBox(() => disabled),
-		loop: readonlyBox(() => loop),
-		name: readonlyBox(() => name),
-		required: readonlyBox(() => required),
-		id: readonlyBox(() => id),
-		value: box(
+		orientation: box.with(() => orientation),
+		disabled: box.with(() => disabled),
+		loop: box.with(() => loop),
+		name: box.with(() => name),
+		required: box.with(() => required),
+		id: box.with(() => id),
+		value: box.with(
 			() => value,
 			(v) => {
 				value = v;
diff --git a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts
index 7ce79cced..60b6b75a9 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts
@@ -1,8 +1,8 @@
+import type { WritableBox } from "runed";
 import {
-	type Box,
-	type BoxedValues,
 	type EventCallback,
-	type ReadonlyBoxedValues,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
 	getAriaChecked,
 	getAriaRequired,
 	getDataDisabled,
@@ -17,7 +17,7 @@ import { createContext } from "$lib/internal/createContext.js";
 const ROOT_ATTR = "radio-group-root";
 const ITEM_ATTR = "radio-group-item";
 
-type RadioGroupRootStateProps = ReadonlyBoxedValues<{
+type RadioGroupRootStateProps = ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 	required: boolean;
@@ -25,11 +25,11 @@ type RadioGroupRootStateProps = ReadonlyBoxedValues<{
 	orientation: Orientation;
 	name: string | undefined;
 }> &
-	BoxedValues<{ value: string }>;
+	WritableBoxedValues<{ value: string }>;
 
 class RadioGroupRootState {
 	id = undefined as unknown as RadioGroupRootStateProps["id"];
-	node: Box<HTMLElement | null>;
+	node: WritableBox<HTMLElement | null>;
 	disabled = undefined as unknown as RadioGroupRootStateProps["disabled"];
 	required = undefined as unknown as RadioGroupRootStateProps["required"];
 	loop: RadioGroupRootStateProps["loop"];
@@ -85,7 +85,7 @@ class RadioGroupRootState {
 // RADIO GROUP ITEM
 //
 
-type RadioGroupItemStateProps = ReadonlyBoxedValues<{
+type RadioGroupItemStateProps = ReadableBoxedValues<{
 	disabled: boolean;
 	value: string;
 	onclick: EventCallback<MouseEvent>;
@@ -95,7 +95,7 @@ type RadioGroupItemStateProps = ReadonlyBoxedValues<{
 
 class RadioGroupItemState {
 	#id = undefined as unknown as RadioGroupItemStateProps["id"];
-	#node = undefined as unknown as Box<HTMLElement | null>;
+	#node = undefined as unknown as WritableBox<HTMLElement | null>;
 	#root = undefined as unknown as RadioGroupRootState;
 	#disabled = undefined as unknown as RadioGroupItemStateProps["disabled"];
 	#value = undefined as unknown as RadioGroupItemStateProps["value"];
diff --git a/packages/bits-ui/src/lib/bits/separator/components/separator.svelte b/packages/bits-ui/src/lib/bits/separator/components/separator.svelte
index 15689dce3..d16b5fced 100644
--- a/packages/bits-ui/src/lib/bits/separator/components/separator.svelte
+++ b/packages/bits-ui/src/lib/bits/separator/components/separator.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useSeparatorRoot } from "../separator.svelte.js";
 	import type { RootProps } from "../index.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
@@ -16,8 +16,8 @@
 	}: RootProps = $props();
 
 	const state = useSeparatorRoot({
-		decorative: readonlyBox(() => decorative),
-		orientation: readonlyBox(() => orientation),
+		decorative: box.with(() => decorative),
+		orientation: box.with(() => orientation),
 	});
 
 	const mergedProps = $derived({
diff --git a/packages/bits-ui/src/lib/bits/separator/separator.svelte.ts b/packages/bits-ui/src/lib/bits/separator/separator.svelte.ts
index bc75fa9bc..e1d2b8a4c 100644
--- a/packages/bits-ui/src/lib/bits/separator/separator.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/separator/separator.svelte.ts
@@ -1,15 +1,16 @@
 import { getAriaHidden, getAriaOrientation, getDataOrientation } from "$lib/internal/attrs.js";
-import type { ReadonlyBox, ReadonlyBoxedValues } from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { Orientation } from "$lib/shared/index.js";
 
-type SeparatorRootStateProps = ReadonlyBoxedValues<{
+type SeparatorRootStateProps = ReadableBoxedValues<{
 	orientation: Orientation;
 	decorative: boolean;
 }>;
 
 class SeparatorRootState {
-	#orientation = undefined as unknown as ReadonlyBox<Orientation>;
-	#decorative = undefined as unknown as ReadonlyBox<boolean>;
+	#orientation = undefined as unknown as SeparatorRootStateProps["orientation"];
+	#decorative = undefined as unknown as SeparatorRootStateProps["decorative"];
+
 	props = $derived({
 		role: this.#decorative.value ? "none" : "separator",
 		"aria-orientation": getAriaOrientation(this.#orientation.value),
diff --git a/packages/bits-ui/src/lib/bits/switch/components/switch.svelte b/packages/bits-ui/src/lib/bits/switch/components/switch.svelte
index dff23383c..d23c7654a 100644
--- a/packages/bits-ui/src/lib/bits/switch/components/switch.svelte
+++ b/packages/bits-ui/src/lib/bits/switch/components/switch.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useSwitchRoot } from "../switch.svelte.js";
 	import SwitchInput from "./switch-input.svelte";
-	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -21,17 +21,17 @@
 	}: RootProps = $props();
 
 	const state = useSwitchRoot({
-		checked: box(
+		checked: box.with(
 			() => checked,
 			(v) => {
 				checked = v;
 				onCheckedChange?.(v);
 			}
 		),
-		disabled: readonlyBox(() => disabled),
-		required: readonlyBox(() => required),
-		value: readonlyBox(() => value),
-		name: readonlyBox(() => name),
+		disabled: box.with(() => disabled),
+		required: box.with(() => required),
+		value: box.with(() => value),
+		name: box.with(() => name),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/switch/switch.svelte.ts b/packages/bits-ui/src/lib/bits/switch/switch.svelte.ts
index 1eb073df0..e989dfc34 100644
--- a/packages/bits-ui/src/lib/bits/switch/switch.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/switch/switch.svelte.ts
@@ -5,17 +5,17 @@ import {
 	getDataDisabled,
 	getDataRequired,
 } from "$lib/internal/attrs.js";
-import type { BoxedValues, ReadonlyBoxedValues } from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { createContext } from "$lib/internal/createContext.js";
 
-type SwitchRootStateProps = ReadonlyBoxedValues<{
+type SwitchRootStateProps = ReadableBoxedValues<{
 	disabled: boolean;
 	required: boolean;
 	name: string | undefined;
 	value: string;
 }> &
-	BoxedValues<{
+	WritableBoxedValues<{
 		checked: boolean;
 	}>;
 
diff --git a/packages/bits-ui/src/lib/bits/tabs/components/tabs-content.svelte b/packages/bits-ui/src/lib/bits/tabs/components/tabs-content.svelte
index 6695a77c3..4573f03fe 100644
--- a/packages/bits-ui/src/lib/bits/tabs/components/tabs-content.svelte
+++ b/packages/bits-ui/src/lib/bits/tabs/components/tabs-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { ContentProps } from "../index.js";
 	import { useTabsContent } from "../tabs.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -14,7 +14,7 @@
 	}: ContentProps = $props();
 
 	const state = useTabsContent({
-		value: readonlyBox(() => value),
+		value: box.with(() => value),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/tabs/components/tabs-trigger.svelte b/packages/bits-ui/src/lib/bits/tabs/components/tabs-trigger.svelte
index 4035bcdd3..fa9659525 100644
--- a/packages/bits-ui/src/lib/bits/tabs/components/tabs-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/tabs/components/tabs-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { TriggerProps } from "../index.js";
 	import { useTabsTrigger } from "../tabs.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 
@@ -18,9 +18,9 @@
 	}: TriggerProps = $props();
 
 	const state = useTabsTrigger({
-		id: readonlyBox(() => id),
-		disabled: readonlyBox(() => disabled),
-		value: readonlyBox(() => value),
+		id: box.with(() => id),
+		disabled: box.with(() => disabled),
+		value: box.with(() => value),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/tabs/components/tabs.svelte b/packages/bits-ui/src/lib/bits/tabs/components/tabs.svelte
index 4ac165def..8655e4dc8 100644
--- a/packages/bits-ui/src/lib/bits/tabs/components/tabs.svelte
+++ b/packages/bits-ui/src/lib/bits/tabs/components/tabs.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useTabsRoot } from "../tabs.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
-	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -21,8 +21,8 @@
 	}: RootProps = $props();
 
 	const state = useTabsRoot({
-		id: readonlyBox(() => id),
-		value: box(
+		id: box.with(() => id),
+		value: box.with(
 			() => value,
 			(v) => {
 				if (value !== v) {
@@ -31,10 +31,10 @@
 				}
 			}
 		),
-		orientation: readonlyBox(() => orientation),
-		loop: readonlyBox(() => loop),
-		activationMode: readonlyBox(() => activationMode),
-		disabled: readonlyBox(() => disabled),
+		orientation: box.with(() => orientation),
+		loop: box.with(() => loop),
+		activationMode: box.with(() => activationMode),
+		disabled: box.with(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts b/packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts
index 86f05f0bd..0691b54da 100644
--- a/packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts
@@ -1,8 +1,8 @@
+import type { WritableBox } from "runed";
 import type { TabsActivationMode } from "./types.js";
 import {
-	type Box,
-	type BoxedValues,
-	type ReadonlyBoxedValues,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
 	getAriaOrientation,
 	getDataDisabled,
 	getDataOrientation,
@@ -20,20 +20,20 @@ const LIST_ATTR = "tabs-list";
 const TRIGGER_ATTR = "tabs-trigger";
 const CONTENT_ATTR = "tabs-content";
 
-type TabsRootStateProps = ReadonlyBoxedValues<{
+type TabsRootStateProps = ReadableBoxedValues<{
 	id: string;
 	orientation: Orientation;
 	loop: boolean;
 	activationMode: TabsActivationMode;
 	disabled: boolean;
 }> &
-	BoxedValues<{
+	WritableBoxedValues<{
 		value: string;
 	}>;
 
 class TabsRootState {
 	id = undefined as unknown as TabsRootStateProps["id"];
-	node = undefined as unknown as Box<HTMLElement | null>;
+	node = undefined as unknown as WritableBox<HTMLElement | null>;
 	orientation = undefined as unknown as TabsRootStateProps["orientation"];
 	loop = undefined as unknown as TabsRootStateProps["loop"];
 	activationMode = undefined as unknown as TabsRootStateProps["activationMode"];
@@ -105,7 +105,7 @@ class TabsListState {
 // TRIGGER
 //
 
-type TabsTriggerStateProps = ReadonlyBoxedValues<{
+type TabsTriggerStateProps = ReadableBoxedValues<{
 	id: string;
 	value: string;
 	disabled: boolean;
@@ -114,7 +114,7 @@ type TabsTriggerStateProps = ReadonlyBoxedValues<{
 class TabsTriggerState {
 	#root = undefined as unknown as TabsRootState;
 	#id = undefined as unknown as TabsTriggerStateProps["id"];
-	#node = undefined as unknown as Box<HTMLElement | null>;
+	#node = undefined as unknown as WritableBox<HTMLElement | null>;
 	#disabled = undefined as unknown as TabsTriggerStateProps["disabled"];
 	#value = undefined as unknown as TabsTriggerStateProps["value"];
 	#isActive = $derived(this.#root.value.value === this.#value.value);
@@ -179,7 +179,7 @@ class TabsTriggerState {
 // CONTENT
 //
 
-type TabsContentStateProps = ReadonlyBoxedValues<{
+type TabsContentStateProps = ReadableBoxedValues<{
 	value: string;
 }>;
 
diff --git a/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group-item.svelte b/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group-item.svelte
index e33463d11..6e4115426 100644
--- a/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group-item.svelte
+++ b/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { ItemProps } from "../index.js";
 	import { useToggleGroupItem } from "../toggle-group.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
@@ -18,9 +18,9 @@
 	}: ItemProps = $props();
 
 	const state = useToggleGroupItem({
-		id: readonlyBox(() => id),
-		value: readonlyBox(() => value),
-		disabled: readonlyBox(() => disabled),
+		id: box.with(() => id),
+		value: box.with(() => value),
+		disabled: box.with(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group.svelte b/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group.svelte
index df05746cf..35a7fc4ae 100644
--- a/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group.svelte
+++ b/packages/bits-ui/src/lib/bits/toggle-group/components/toggle-group.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { type WritableBox, box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useToggleGroupRoot } from "../toggle-group.svelte.js";
-	import { Box, box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
@@ -24,18 +24,18 @@
 	value === undefined && (value = type === "single" ? "" : []);
 
 	const state = useToggleGroupRoot({
-		id: readonlyBox(() => id),
-		value: box(
+		id: box.with(() => id),
+		value: box.with(
 			() => value!,
 			(v) => {
 				value = v;
 				onValueChange?.(v as any);
 			}
-		) as Box<string> | Box<string[]>,
-		disabled: readonlyBox(() => disabled),
-		loop: readonlyBox(() => loop),
-		orientation: readonlyBox(() => orientation),
-		rovingFocus: readonlyBox(() => rovingFocus),
+		) as WritableBox<string> | WritableBox<string[]>,
+		disabled: box.with(() => disabled),
+		loop: box.with(() => loop),
+		orientation: box.with(() => orientation),
+		rovingFocus: box.with(() => rovingFocus),
 		type,
 	});
 
diff --git a/packages/bits-ui/src/lib/bits/toggle-group/toggle-group.svelte.ts b/packages/bits-ui/src/lib/bits/toggle-group/toggle-group.svelte.ts
index d7e65964f..c4e47623c 100644
--- a/packages/bits-ui/src/lib/bits/toggle-group/toggle-group.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/toggle-group/toggle-group.svelte.ts
@@ -1,3 +1,4 @@
+import { type WritableBox, box } from "runed";
 import {
 	getAriaChecked,
 	getAriaPressed,
@@ -5,12 +6,7 @@ import {
 	getDataOrientation,
 	getDisabledAttr,
 } from "$lib/internal/attrs.js";
-import {
-	type Box,
-	type BoxedValues,
-	type ReadonlyBoxedValues,
-	boxedState,
-} from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
 import type { Orientation } from "$lib/shared/index.js";
@@ -20,7 +16,7 @@ import { createContext } from "$lib/internal/createContext.js";
 const ROOT_ATTR = "toggle-group-root";
 const ITEM_ATTR = "toggle-group-item";
 
-type ToggleGroupBaseStateProps = ReadonlyBoxedValues<{
+type ToggleGroupBaseStateProps = ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 	rovingFocus: boolean;
@@ -30,7 +26,7 @@ type ToggleGroupBaseStateProps = ReadonlyBoxedValues<{
 
 class ToggleGroupBaseState {
 	id = undefined as unknown as ToggleGroupBaseStateProps["id"];
-	node: Box<HTMLElement | null>;
+	node: WritableBox<HTMLElement | null>;
 	disabled = undefined as unknown as ToggleGroupBaseStateProps["disabled"];
 	rovingFocus = undefined as unknown as ToggleGroupBaseStateProps["rovingFocus"];
 	loop = undefined as unknown as ToggleGroupBaseStateProps["loop"];
@@ -66,7 +62,7 @@ class ToggleGroupBaseState {
 //
 
 type ToggleGroupSingleStateProps = ToggleGroupBaseStateProps &
-	BoxedValues<{
+	WritableBoxedValues<{
 		value: string;
 	}>;
 
@@ -99,7 +95,7 @@ class ToggleGroupSingleState extends ToggleGroupBaseState {
 //
 
 type ToggleGroupMultipleStateProps = ToggleGroupBaseStateProps &
-	BoxedValues<{
+	WritableBoxedValues<{
 		value: string[];
 	}>;
 
@@ -133,7 +129,7 @@ type ToggleGroupState = ToggleGroupSingleState | ToggleGroupMultipleState;
 // ITEM
 //
 
-type ToggleGroupItemStateProps = ReadonlyBoxedValues<{
+type ToggleGroupItemStateProps = ReadableBoxedValues<{
 	id: string;
 	value: string;
 	disabled: boolean;
@@ -145,7 +141,7 @@ class ToggleGroupItemState {
 	#id = undefined as unknown as ToggleGroupItemStateProps["id"];
 	#root = undefined as unknown as ToggleGroupItemStateProps["rootState"];
 	#value = undefined as unknown as ToggleGroupItemStateProps["value"];
-	#node = boxedState<HTMLElement | null>(null);
+	#node = box<HTMLElement | null>(null);
 	#disabled = undefined as unknown as ToggleGroupItemStateProps["disabled"];
 	#isDisabled = $derived(this.#disabled.value || this.#root.disabled.value);
 
@@ -229,8 +225,8 @@ const [setToggleGroupRootContext, getToggleGroupRootContext] =
 
 type InitToggleGroupProps = {
 	type: "single" | "multiple";
-	value: Box<string> | Box<string[]>;
-} & ReadonlyBoxedValues<{
+	value: WritableBox<string> | WritableBox<string[]>;
+} & ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 	rovingFocus: boolean;
diff --git a/packages/bits-ui/src/lib/bits/toggle/components/toggle.svelte b/packages/bits-ui/src/lib/bits/toggle/components/toggle.svelte
index b8db0809a..80a88aa89 100644
--- a/packages/bits-ui/src/lib/bits/toggle/components/toggle.svelte
+++ b/packages/bits-ui/src/lib/bits/toggle/components/toggle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useToggleRoot } from "../toggle.svelte.js";
-	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -17,7 +17,7 @@
 	}: RootProps = $props();
 
 	const state = useToggleRoot({
-		pressed: box(
+		pressed: box.with(
 			() => pressed,
 			(v) => {
 				if (pressed !== v) {
@@ -26,7 +26,7 @@
 				}
 			}
 		),
-		disabled: readonlyBox(() => disabled),
+		disabled: box.with(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/toggle/toggle.svelte.ts b/packages/bits-ui/src/lib/bits/toggle/toggle.svelte.ts
index ed9900cfd..db4935888 100644
--- a/packages/bits-ui/src/lib/bits/toggle/toggle.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/toggle/toggle.svelte.ts
@@ -4,15 +4,15 @@ import {
 	getDataDisabled,
 	getDisabledAttr,
 } from "$lib/internal/attrs.js";
-import type { BoxedValues, ReadonlyBoxedValues } from "$lib/internal/box.svelte.js";
+import type { WritableBoxedValues, ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 
 const [ROOT_ATTR] = getAttrAndSelector("toggle-root");
 
-type ToggleRootStateProps = ReadonlyBoxedValues<{
+type ToggleRootStateProps = ReadableBoxedValues<{
 	disabled: boolean;
 }> &
-	BoxedValues<{
+	WritableBoxedValues<{
 		pressed: boolean;
 	}>;
 
diff --git a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-button.svelte b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-button.svelte
index e1f5b347f..e59ed7059 100644
--- a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-button.svelte
+++ b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-button.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { ButtonProps } from "../index.js";
 	import { useToolbarButton } from "../toolbar.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -17,8 +17,8 @@
 	}: ButtonProps = $props();
 
 	const state = useToolbarButton({
-		id: readonlyBox(() => id),
-		disabled: readonlyBox(() => disabled),
+		id: box.with(() => id),
+		disabled: box.with(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group-item.svelte b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group-item.svelte
index 155f549e8..093801225 100644
--- a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group-item.svelte
+++ b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group-item.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { GroupItemProps } from "../index.js";
 	import { useToolbarGroupItem } from "../toolbar.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -18,9 +18,9 @@
 	}: GroupItemProps = $props();
 
 	const state = useToolbarGroupItem({
-		id: readonlyBox(() => id),
-		value: readonlyBox(() => value),
-		disabled: readonlyBox(() => disabled),
+		id: box.with(() => id),
+		value: box.with(() => value),
+		disabled: box.with(() => disabled),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props, { type }));
diff --git a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group.svelte b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group.svelte
index cea32895e..ba37d4ff7 100644
--- a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group.svelte
+++ b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-group.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { type WritableBox, box } from "runed";
 	import type { GroupProps } from "../index.js";
 	import { useToolbarGroup } from "../toolbar.svelte.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
-	import { Box, box, readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let {
@@ -21,16 +21,16 @@
 	value === undefined && (value = type === "single" ? "" : []);
 
 	const state = useToolbarGroup({
-		id: readonlyBox(() => id),
-		disabled: readonlyBox(() => disabled),
+		id: box.with(() => id),
+		disabled: box.with(() => disabled),
 		type,
-		value: box(
+		value: box.with(
 			() => value!,
 			(v) => {
 				value = v;
 				onValueChange?.(v as any);
 			}
-		) as Box<string> | Box<string[]>,
+		) as WritableBox<string> | WritableBox<string[]>,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-link.svelte b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-link.svelte
index d40fbc4c5..9a08ac2ef 100644
--- a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-link.svelte
+++ b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar-link.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useToolbarLink } from "../toolbar.svelte.js";
 	import type { LinkProps } from "../index.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 
@@ -16,7 +16,7 @@
 	}: LinkProps = $props();
 
 	const state = useToolbarLink({
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar.svelte b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar.svelte
index 6aed786cd..047c31738 100644
--- a/packages/bits-ui/src/lib/bits/toolbar/components/toolbar.svelte
+++ b/packages/bits-ui/src/lib/bits/toolbar/components/toolbar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { RootProps } from "../index.js";
 	import { useToolbarRoot } from "../toolbar.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 	import { useId } from "$lib/internal/useId.svelte.js";
 
@@ -17,9 +17,9 @@
 	}: RootProps = $props();
 
 	const state = useToolbarRoot({
-		id: readonlyBox(() => id),
-		orientation: readonlyBox(() => orientation),
-		loop: readonlyBox(() => loop),
+		id: box.with(() => id),
+		orientation: box.with(() => orientation),
+		loop: box.with(() => loop),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/packages/bits-ui/src/lib/bits/toolbar/toolbar.svelte.ts b/packages/bits-ui/src/lib/bits/toolbar/toolbar.svelte.ts
index 9674209d4..be9164be1 100644
--- a/packages/bits-ui/src/lib/bits/toolbar/toolbar.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/toolbar/toolbar.svelte.ts
@@ -1,4 +1,4 @@
-import { getContext, setContext } from "svelte";
+import { type WritableBox, box } from "runed";
 import {
 	getAriaChecked,
 	getAriaPressed,
@@ -6,13 +6,7 @@ import {
 	getDataOrientation,
 	getDisabledAttr,
 } from "$lib/internal/attrs.js";
-import {
-	type Box,
-	type BoxedValues,
-	type ReadonlyBoxedValues,
-	boxedState,
-} from "$lib/internal/box.svelte.js";
-import { verifyContextDeps } from "$lib/internal/context.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
 import { type UseRovingFocusReturn, useRovingFocus } from "$lib/internal/useRovingFocus.svelte.js";
@@ -27,7 +21,7 @@ const GROUP_ITEM_ATTR = "data-toolbar-group-item";
 const LINK_ATTR = "data-toolbar-link";
 const BUTTON_ATTR = "data-toolbar-button";
 
-type ToolbarRootStateProps = ReadonlyBoxedValues<{
+type ToolbarRootStateProps = ReadableBoxedValues<{
 	orientation: Orientation;
 	loop: boolean;
 	id: string;
@@ -37,7 +31,7 @@ class ToolbarRootState {
 	#id = undefined as unknown as ToolbarRootStateProps["id"];
 	orientation = undefined as unknown as ToolbarRootStateProps["orientation"];
 	#loop = undefined as unknown as ToolbarRootStateProps["loop"];
-	#node = boxedState<HTMLElement | null>(null);
+	#node = box<HTMLElement | null>(null);
 	rovingFocusGroup = undefined as unknown as UseRovingFocusReturn;
 
 	constructor(props: ToolbarRootStateProps) {
@@ -78,14 +72,14 @@ class ToolbarRootState {
 	} as const);
 }
 
-type ToolbarGroupBaseStateProps = ReadonlyBoxedValues<{
+type ToolbarGroupBaseStateProps = ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 }>;
 
 class ToolbarGroupBaseState {
 	id = undefined as unknown as ToolbarGroupBaseStateProps["id"];
-	node = boxedState<HTMLElement | null>(null);
+	node = box<HTMLElement | null>(null);
 	disabled = undefined as unknown as ToolbarGroupBaseStateProps["disabled"];
 	root = undefined as unknown as ToolbarRootState;
 
@@ -110,7 +104,7 @@ class ToolbarGroupBaseState {
 //
 
 type ToolbarGroupSingleStateProps = ToolbarGroupBaseStateProps &
-	BoxedValues<{
+	WritableBoxedValues<{
 		value: string;
 	}>;
 
@@ -146,7 +140,7 @@ class ToolbarGroupSingleState extends ToolbarGroupBaseState {
 //
 
 type ToolbarGroupMultipleStateProps = ToolbarGroupBaseStateProps &
-	BoxedValues<{
+	WritableBoxedValues<{
 		value: string[];
 	}>;
 
@@ -183,7 +177,7 @@ type ToolbarGroupState = ToolbarGroupSingleState | ToolbarGroupMultipleState;
 // ITEM
 //
 
-type ToolbarGroupItemStateProps = ReadonlyBoxedValues<{
+type ToolbarGroupItemStateProps = ReadableBoxedValues<{
 	id: string;
 	value: string;
 	disabled: boolean;
@@ -194,7 +188,7 @@ class ToolbarGroupItemState {
 	#group = undefined as unknown as ToolbarGroupState;
 	#root = undefined as unknown as ToolbarRootState;
 	#value = undefined as unknown as ToolbarGroupItemStateProps["value"];
-	#node = boxedState<HTMLElement | null>(null);
+	#node = box<HTMLElement | null>(null);
 	#disabled = undefined as unknown as ToolbarGroupItemStateProps["disabled"];
 	#isDisabled = $derived(this.#disabled.value || this.#group.disabled.value);
 
@@ -262,13 +256,13 @@ class ToolbarGroupItemState {
 	});
 }
 
-type ToolbarLinkStateProps = ReadonlyBoxedValues<{
+type ToolbarLinkStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
 
 class ToolbarLinkState {
 	#id = undefined as unknown as ToolbarLinkStateProps["id"];
-	#node = boxedState<HTMLElement | null>(null);
+	#node = box<HTMLElement | null>(null);
 	#root = undefined as unknown as ToolbarRootState;
 
 	constructor(props: ToolbarLinkStateProps, root: ToolbarRootState) {
@@ -302,7 +296,7 @@ class ToolbarLinkState {
 	});
 }
 
-type ToolbarButtonStateProps = ReadonlyBoxedValues<{
+type ToolbarButtonStateProps = ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 }>;
@@ -310,7 +304,7 @@ type ToolbarButtonStateProps = ReadonlyBoxedValues<{
 class ToolbarButtonState {
 	#id = undefined as unknown as ToolbarButtonStateProps["id"];
 	#root = undefined as unknown as ToolbarRootState;
-	#node = boxedState<HTMLElement | null>(null);
+	#node = box<HTMLElement | null>(null);
 	#disabled = undefined as unknown as ToolbarButtonStateProps["disabled"];
 
 	constructor(props: ToolbarButtonStateProps, root: ToolbarRootState) {
@@ -370,8 +364,8 @@ export function useToolbarRoot(props: ToolbarRootStateProps) {
 
 type InitToolbarGroupProps = {
 	type: "single" | "multiple";
-	value: Box<string> | Box<string[]>;
-} & ReadonlyBoxedValues<{
+	value: WritableBox<string> | WritableBox<string[]>;
+} & ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 }>;
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte
index 3d615c9b1..29e72bcaa 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { DismissableLayerImplProps } from "./types.js";
 	import { useDismissableLayer } from "./useDismissableLayer.svelte.js";
-	import { noop, readonlyBox } from "$lib/internal/index.js";
+	import { noop } from "$lib/internal/index.js";
 
 	let {
 		interactOutsideBehavior = "close",
@@ -13,11 +14,11 @@
 	}: DismissableLayerImplProps = $props();
 
 	useDismissableLayer({
-		id: readonlyBox(() => id),
-		interactOutsideBehavior: readonlyBox(() => interactOutsideBehavior),
-		onInteractOutside: readonlyBox(() => onInteractOutside),
-		onInteractOutsideStart: readonlyBox(() => onInteractOutsideStart),
-		present: readonlyBox(() => present),
+		id: box.with(() => id),
+		interactOutsideBehavior: box.with(() => interactOutsideBehavior),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onInteractOutsideStart: box.with(() => onInteractOutsideStart),
+		present: box.with(() => present),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
index 8375c5327..302f883ba 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/useDismissableLayer.svelte.ts
@@ -1,4 +1,5 @@
 import { untrack } from "svelte";
+import type { ReadableBox } from "runed";
 import type {
 	DismissableLayerImplProps,
 	DismissableLayerProps,
@@ -9,8 +10,7 @@ import type {
 import {
 	type Box,
 	type EventCallback,
-	type ReadonlyBox,
-	type ReadonlyBoxedValues,
+	type ReadableBoxedValues,
 	addEventListener,
 	composeHandlers,
 	debounce,
@@ -22,7 +22,7 @@ import {
 	useNodeById,
 } from "$lib/internal/index.js";
 
-const layers = new Map<DismissableLayerState, ReadonlyBox<InteractOutsideBehaviorType>>();
+const layers = new Map<DismissableLayerState, ReadableBox<InteractOutsideBehaviorType>>();
 
 const interactOutsideStartEvents = [
 	"pointerdown",
@@ -36,14 +36,14 @@ const interactOutsideEndEvents = [
 	"click",
 ] satisfies InteractOutsideInterceptEventType[];
 
-type DismissableLayerStateProps = ReadonlyBoxedValues<
+type DismissableLayerStateProps = ReadableBoxedValues<
 	Required<Omit<DismissableLayerImplProps, "children">>
 >;
 
 export class DismissableLayerState {
-	#interactOutsideStartProp: ReadonlyBox<EventCallback<InteractOutsideEvent>>;
-	#interactOutsideProp: ReadonlyBox<EventCallback<InteractOutsideEvent>>;
-	#behaviorType: ReadonlyBox<InteractOutsideBehaviorType>;
+	#interactOutsideStartProp: ReadableBox<EventCallback<InteractOutsideEvent>>;
+	#interactOutsideProp: ReadableBox<EventCallback<InteractOutsideEvent>>;
+	#behaviorType: ReadableBox<InteractOutsideBehaviorType>;
 	#interceptedEvents: Record<InteractOutsideInterceptEventType, boolean> = {
 		pointerdown: false,
 		pointerup: false,
@@ -57,7 +57,7 @@ export class DismissableLayerState {
 	#isResponsibleLayer = false;
 	node: Box<HTMLElement | null>;
 	#documentObj = undefined as unknown as Document;
-	#present: ReadonlyBox<boolean>;
+	#present: ReadableBox<boolean>;
 
 	constructor(props: DismissableLayerStateProps) {
 		this.node = useNodeById(props.id);
diff --git a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte
index 56cb8c6d8..69e38aad1 100644
--- a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { EscapeLayerImplProps } from "./types.js";
 	import { useEscapeLayer } from "./useEscapeLayer.svelte.js";
-	import { noop, readonlyBox } from "$lib/internal/index.js";
+	import { noop } from "$lib/internal/index.js";
 
 	let {
 		behaviorType = "close",
@@ -11,9 +12,9 @@
 	}: EscapeLayerImplProps = $props();
 
 	useEscapeLayer({
-		behaviorType: readonlyBox(() => behaviorType),
-		onEscapeKeydown: readonlyBox(() => onEscapeKeydown),
-		present: readonlyBox(() => present),
+		behaviorType: box.with(() => behaviorType),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
+		present: box.with(() => present),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/escape-layer/useEscapeLayer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/escape-layer/useEscapeLayer.svelte.ts
index 71395df82..a9511e365 100644
--- a/packages/bits-ui/src/lib/bits/utilities/escape-layer/useEscapeLayer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/escape-layer/useEscapeLayer.svelte.ts
@@ -1,18 +1,19 @@
 import { untrack } from "svelte";
+import type { ReadableBox } from "runed";
 import type { EscapeBehaviorType, EscapeLayerImplProps } from "./types.js";
-import type { ReadonlyBox, ReadonlyBoxedValues } from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 import { type EventCallback, addEventListener } from "$lib/internal/events.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { noop } from "$lib/internal/callbacks.js";
 
-const layers = new Map<EscapeLayerState, ReadonlyBox<EscapeBehaviorType>>();
+const layers = new Map<EscapeLayerState, ReadableBox<EscapeBehaviorType>>();
 
-type EscapeLayerStateProps = ReadonlyBoxedValues<Required<Omit<EscapeLayerImplProps, "children">>>;
+type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children">>>;
 
 export class EscapeLayerState {
-	#onEscapeProp: ReadonlyBox<EventCallback<KeyboardEvent>>;
-	#behaviorType: ReadonlyBox<EscapeBehaviorType>;
-	#present: ReadonlyBox<boolean>;
+	#onEscapeProp: ReadableBox<EventCallback<KeyboardEvent>>;
+	#behaviorType: ReadableBox<EscapeBehaviorType>;
+	#present: ReadableBox<boolean>;
 
 	constructor(props: EscapeLayerStateProps) {
 		this.#behaviorType = props.behaviorType;
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte
index 0f70e1cff..dbae6eed7 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useFloatingAnchorState } from "../useFloatingLayer.svelte.js";
 	import type { AnchorProps } from "./index.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 
 	let { id, children }: AnchorProps = $props();
 
-	useFloatingAnchorState({ id: readonlyBox(() => id) });
+	useFloatingAnchorState({ id: box.with(() => id) });
 </script>
 
 {@render children?.()}
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte
index 21207094e..40a49bdc3 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useFloatingArrowState } from "../useFloatingLayer.svelte.js";
 	import { Arrow, type ArrowProps } from "$lib/bits/utilities/arrow/index.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 
 	let { id = useId(), el = $bindable(), ...restProps }: ArrowProps = $props();
 
 	const state = useFloatingArrowState({
-		id: readonlyBox(() => id),
+		id: box.with(() => id),
 	});
 
 	// explicit any here because the `asChild` and `child` are causing this to never out
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content.svelte b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content.svelte
index e71ccd152..c33ceaf6c 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/components/floating-layer-content.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import { useFloatingContentState } from "../useFloatingLayer.svelte.js";
 	import type { ContentImplProps } from "./index.js";
-	import { mergeProps, readonlyBox, useId } from "$lib/internal/index.js";
+	import { mergeProps, useId } from "$lib/internal/index.js";
 	import { useBodyScrollLock } from "$lib/internal/useBodyScrollLock.svelte.js";
 
 	let {
@@ -28,24 +29,24 @@
 	}: ContentImplProps = $props();
 
 	const state = useFloatingContentState({
-		side: readonlyBox(() => side),
-		sideOffset: readonlyBox(() => sideOffset),
-		align: readonlyBox(() => align),
-		alignOffset: readonlyBox(() => alignOffset),
-		id: readonlyBox(() => id),
-		arrowPadding: readonlyBox(() => arrowPadding),
-		avoidCollisions: readonlyBox(() => avoidCollisions),
-		collisionBoundary: readonlyBox(() => collisionBoundary),
-		collisionPadding: readonlyBox(() => collisionPadding),
-		hideWhenDetached: readonlyBox(() => hideWhenDetached),
-		onPlaced: readonlyBox(() => onPlaced),
-		sticky: readonlyBox(() => sticky),
-		updatePositionStrategy: readonlyBox(() => updatePositionStrategy),
-		strategy: readonlyBox(() => strategy),
-		dir: readonlyBox(() => dir),
-		style: readonlyBox(() => style),
-		present: readonlyBox(() => present),
-		wrapperId: readonlyBox(() => wrapperId),
+		side: box.with(() => side),
+		sideOffset: box.with(() => sideOffset),
+		align: box.with(() => align),
+		alignOffset: box.with(() => alignOffset),
+		id: box.with(() => id),
+		arrowPadding: box.with(() => arrowPadding),
+		avoidCollisions: box.with(() => avoidCollisions),
+		collisionBoundary: box.with(() => collisionBoundary),
+		collisionPadding: box.with(() => collisionPadding),
+		hideWhenDetached: box.with(() => hideWhenDetached),
+		onPlaced: box.with(() => onPlaced),
+		sticky: box.with(() => sticky),
+		updatePositionStrategy: box.with(() => updatePositionStrategy),
+		strategy: box.with(() => strategy),
+		dir: box.with(() => dir),
+		style: box.with(() => style),
+		present: box.with(() => present),
+		wrapperId: box.with(() => wrapperId),
 	});
 
 	const mergedProps = $derived(
diff --git a/packages/bits-ui/src/lib/bits/utilities/floating-layer/useFloatingLayer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/floating-layer/useFloatingLayer.svelte.ts
index 012ad2815..dbdf85ec4 100644
--- a/packages/bits-ui/src/lib/bits/utilities/floating-layer/useFloatingLayer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/floating-layer/useFloatingLayer.svelte.ts
@@ -11,12 +11,11 @@ import {
 	shift,
 	size,
 } from "@floating-ui/dom";
+import { type ReadableBox, type WritableBox, box } from "runed";
 import {
 	type Arrayable,
 	type Box,
-	type ReadonlyBox,
-	type ReadonlyBoxedValues,
-	boxedState,
+	type ReadableBoxedValues,
 	styleToString,
 	useNodeById,
 } from "$lib/internal/index.js";
@@ -42,7 +41,7 @@ export type Align = (typeof ALIGN_OPTIONS)[number];
 export type Boundary = Element | null;
 
 class FloatingRootState {
-	anchorNode = undefined as unknown as Box<HTMLElement | null>;
+	anchorNode = undefined as unknown as WritableBox<HTMLElement | null>;
 
 	createAnchor(props: FloatingAnchorStateProps) {
 		return new FloatingAnchorState(props, this);
@@ -53,7 +52,7 @@ class FloatingRootState {
 	}
 }
 
-export type FloatingContentStateProps = ReadonlyBoxedValues<{
+export type FloatingContentStateProps = ReadableBoxedValues<{
 	id: string;
 	wrapperId: string;
 	side: Side;
@@ -81,10 +80,10 @@ class FloatingContentState {
 	// nodes
 	contentNode = undefined as unknown as Box<HTMLElement | null>;
 	wrapperNode = undefined as unknown as Box<HTMLElement | null>;
-	arrowNode = boxedState<HTMLElement | null>(null);
+	arrowNode = box<HTMLElement | null>(null);
 
 	// ids
-	arrowId = undefined as unknown as ReadonlyBox<string>;
+	arrowId = undefined as unknown as ReadableBox<string>;
 	id = undefined as unknown as FloatingContentStateProps["id"];
 	wrapperId = undefined as unknown as FloatingContentStateProps["wrapperId"];
 
@@ -288,13 +287,13 @@ class FloatingContentState {
 	}
 }
 
-type FloatingArrowStateProps = ReadonlyBoxedValues<{
+type FloatingArrowStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
 
 class FloatingArrowState {
 	#content = undefined as unknown as FloatingContentState;
-	#id = undefined as unknown as ReadonlyBox<string>;
+	#id = undefined as unknown as FloatingArrowStateProps["id"];
 
 	props = $derived({
 		id: this.#id.value,
@@ -308,7 +307,7 @@ class FloatingArrowState {
 	}
 }
 
-type FloatingAnchorStateProps = ReadonlyBoxedValues<{
+type FloatingAnchorStateProps = ReadableBoxedValues<{
 	id: string;
 }>;
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope-stack.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope-stack.svelte.ts
index f06b6aa6c..8d025f8d4 100644
--- a/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope-stack.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope-stack.svelte.ts
@@ -1,4 +1,4 @@
-import { boxedState } from "$lib/internal/box.svelte.js";
+import { box } from "runed";
 
 export type FocusScopeAPI = {
 	paused: boolean;
@@ -6,7 +6,7 @@ export type FocusScopeAPI = {
 	resume: () => void;
 };
 
-const focusStack = boxedState<FocusScopeAPI[]>([]);
+const focusStack = box<FocusScopeAPI[]>([]);
 
 export function createFocusScopeStack() {
 	const stack = focusStack;
diff --git a/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope.svelte b/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope.svelte
index 0dbb1d81e..328592fbc 100644
--- a/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/focus-scope/focus-scope.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { FocusScopeImplProps } from "./types.js";
 	import { useFocusScope } from "./useFocusScope.svelte.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { noop } from "$lib/internal/callbacks.js";
 
 	let {
@@ -14,11 +14,11 @@
 	}: FocusScopeImplProps = $props();
 
 	const state = useFocusScope({
-		trapped: readonlyBox(() => trapped),
-		loop: readonlyBox(() => loop),
-		onDestroyAutoFocus: readonlyBox(() => onDestroyAutoFocus),
-		onMountAutoFocus: readonlyBox(() => onMountAutoFocus),
-		id: readonlyBox(() => id),
+		trapped: box.with(() => trapped),
+		loop: box.with(() => loop),
+		onDestroyAutoFocus: box.with(() => onDestroyAutoFocus),
+		onMountAutoFocus: box.with(() => onMountAutoFocus),
+		id: box.with(() => id),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/focus-scope/useFocusScope.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/focus-scope/useFocusScope.svelte.ts
index f3ba1b416..188e062d4 100644
--- a/packages/bits-ui/src/lib/bits/utilities/focus-scope/useFocusScope.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/focus-scope/useFocusScope.svelte.ts
@@ -13,7 +13,7 @@ import {
 	getTabbableCandidates,
 	getTabbableEdges,
 } from "./utils.js";
-import { type ReadonlyBoxedValues, boxedState } from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues } from "$lib/internal/box.svelte.js";
 import { type EventCallback, addEventListener } from "$lib/internal/events.js";
 import { useNodeById } from "$lib/internal/useNodeById.svelte.js";
 import { isHTMLElement } from "$lib/internal/is.js";
@@ -21,7 +21,7 @@ import { executeCallbacks } from "$lib/internal/callbacks.js";
 import { kbd } from "$lib/internal/kbd.js";
 import { afterTick } from "$lib/internal/after-tick.js";
 
-type UseFocusScopeProps = ReadonlyBoxedValues<{
+type UseFocusScopeProps = ReadableBoxedValues<{
 	/**
 	 * ID of the focus scope container node.
 	 */
diff --git a/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte
index dc39a2be4..2d613da02 100644
--- a/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/presence-layer/presence-layer.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { PresenceLayerImplProps } from "./types.js";
-	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { usePresence } from "$lib/bits/utilities/presence-layer/usePresence.svelte.js";
 
 	let { present, forceMount = false, presence, id }: PresenceLayerImplProps = $props();
 
 	const isPresent = usePresence(
-		readonlyBox(() => present),
-		readonlyBox(() => id)
+		box.with(() => present),
+		box.with(() => id)
 	);
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
index 0ded3a091..f8dcc9e23 100644
--- a/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/presence-layer/usePresence.svelte.ts
@@ -1,10 +1,11 @@
 import { onDestroy } from "svelte";
-import { type Box, type ReadonlyBox, boxedState, watch } from "../../../internal/box.svelte.js";
+import { type ReadableBox, type WritableBox, box } from "runed";
+import { watch } from "$lib/internal/box.svelte.js";
 import { afterTick, useStateMachine } from "$lib/internal/index.js";
 
-export function usePresence(present: ReadonlyBox<boolean>, id: ReadonlyBox<string>) {
-	const styles = boxedState({}) as unknown as Box<CSSStyleDeclaration>;
-	const prevAnimationNameState = boxedState("none");
+export function usePresence(present: ReadableBox<boolean>, id: ReadableBox<string>) {
+	const styles = box({}) as unknown as WritableBox<CSSStyleDeclaration>;
+	const prevAnimationNameState = box("none");
 	const initialState = present.value ? "mounted" : "unmounted";
 	let node = $state<HTMLElement | null>(null);
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/text-selection-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/text-selection-layer.svelte
index 881bfebea..cf75d7fe4 100644
--- a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/text-selection-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/text-selection-layer.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { box } from "runed";
 	import type { TextSelectionLayerImplProps } from "./types.js";
 	import { useTextSelectionLayer } from "./useTextSelectionLayer.svelte.js";
-	import { noop, readonlyBox } from "$lib/internal/index.js";
+	import { noop } from "$lib/internal/index.js";
 
 	let {
 		preventOverflowTextSelection = true,
@@ -13,11 +14,11 @@
 	}: TextSelectionLayerImplProps = $props();
 
 	useTextSelectionLayer({
-		id: readonlyBox(() => id),
-		preventOverflowTextSelection: readonlyBox(() => preventOverflowTextSelection),
-		onPointerDown: readonlyBox(() => onPointerDown),
-		onPointerUp: readonlyBox(() => onPointerUp),
-		present: readonlyBox(() => present),
+		id: box.with(() => id),
+		preventOverflowTextSelection: box.with(() => preventOverflowTextSelection),
+		onPointerDown: box.with(() => onPointerDown),
+		onPointerUp: box.with(() => onPointerUp),
+		present: box.with(() => present),
 	});
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts
index 77494d4fe..6fd334d6c 100644
--- a/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts
@@ -1,10 +1,9 @@
 import { untrack } from "svelte";
+import type { ReadableBox, WritableBox } from "runed";
 import type { TextSelectionLayerImplProps, TextSelectionLayerProps } from "./types.js";
 import {
-	type Box,
 	type EventCallback,
-	type ReadonlyBox,
-	type ReadonlyBoxedValues,
+	type ReadableBoxedValues,
 	addEventListener,
 	composeHandlers,
 	executeCallbacks,
@@ -14,17 +13,17 @@ import {
 	useNodeById,
 } from "$lib/internal/index.js";
 
-type StateProps = ReadonlyBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children">>>;
+type StateProps = ReadableBoxedValues<Required<Omit<TextSelectionLayerImplProps, "children">>>;
 
-const layers = new Map<TextSelectionLayerState, ReadonlyBox<boolean>>();
+const layers = new Map<TextSelectionLayerState, ReadableBox<boolean>>();
 
 export class TextSelectionLayerState {
-	#onPointerDownProp: ReadonlyBox<EventCallback<PointerEvent>>;
-	#onPointerUpProp: ReadonlyBox<EventCallback<PointerEvent>>;
-	#enabled: ReadonlyBox<boolean>;
+	#onPointerDownProp: ReadableBox<EventCallback<PointerEvent>>;
+	#onPointerUpProp: ReadableBox<EventCallback<PointerEvent>>;
+	#enabled: ReadableBox<boolean>;
 	#unsubSelectionLock = noop;
-	#node: Box<HTMLElement | null>;
-	#present: ReadonlyBox<boolean>;
+	#node: WritableBox<HTMLElement | null>;
+	#present: ReadableBox<boolean>;
 
 	constructor(props: StateProps) {
 		this.#node = useNodeById(props.id);
diff --git a/packages/bits-ui/src/lib/internal/box.svelte.ts b/packages/bits-ui/src/lib/internal/box.svelte.ts
index bef7b36b7..fcb8bab31 100644
--- a/packages/bits-ui/src/lib/internal/box.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/box.svelte.ts
@@ -1,4 +1,7 @@
 import { untrack } from "svelte";
+import type { ReadableBox, WritableBox } from "runed";
+
+export type Box<T> = ReadableBox<T> | WritableBox<T>;
 
 export type Setter<T> = (value: T) => void;
 export type Getter<T> = () => T;
@@ -20,41 +23,7 @@ type WatchOptions = {
 	once?: boolean;
 };
 
-export class ReadonlyBox<T> {
-	#get: Getter<T> = $state() as Getter<T>;
-
-	constructor(get: Getter<T>) {
-		this.#get = get;
-	}
-
-	get value() {
-		return this.#get();
-	}
-}
-
-export class Box<T> {
-	#set = $state() as Setter<T>;
-	#get = $state() as Getter<T>;
-
-	constructor(get: Getter<T>, set: Setter<T>) {
-		this.#set = set;
-		this.#get = get;
-	}
-
-	get value() {
-		return this.#get();
-	}
-
-	set value(value: T) {
-		this.#set(value);
-	}
-}
-
-export function watch<T>(
-	box: ReadonlyBox<T> | Box<T>,
-	callback: WatcherCallback<T>,
-	options: WatchOptions = {}
-) {
+export function watch<T>(box: Box<T>, callback: WatcherCallback<T>, options: WatchOptions = {}) {
 	let prev = $state(box.value);
 	let ranOnce = false;
 
@@ -85,31 +54,10 @@ export function watch<T>(
 	return watchEffect;
 }
 
-export function box<T>(get: Getter<T>, set: Setter<T>) {
-	return new Box(get, set);
-}
-
-export function readonlyBox<T>(get: Getter<T>) {
-	return new ReadonlyBox(get);
-}
-
-export function boxedState<T>(initialValue: T) {
-	let state = $state(initialValue);
-	return box(
-		() => state,
-		(value) => (state = value)
-	);
-}
-
-export function readonlyBoxedState<T>(initialValue: T) {
-	let state = $state(initialValue);
-	return readonlyBox(() => state);
-}
-
-export type BoxedValues<T> = {
-	[K in keyof T]: Box<T[K]>;
+export type WritableBoxedValues<T> = {
+	[K in keyof T]: WritableBox<T[K]>;
 };
 
-export type ReadonlyBoxedValues<T> = {
-	[K in keyof T]: ReadonlyBox<T[K]>;
+export type ReadableBoxedValues<T> = {
+	[K in keyof T]: ReadableBox<T[K]>;
 };
diff --git a/packages/bits-ui/src/lib/internal/floating-svelte/arrow.ts b/packages/bits-ui/src/lib/internal/floating-svelte/arrow.ts
index 345988e67..0643dcb72 100644
--- a/packages/bits-ui/src/lib/internal/floating-svelte/arrow.ts
+++ b/packages/bits-ui/src/lib/internal/floating-svelte/arrow.ts
@@ -1,7 +1,7 @@
 import type { Derivable, Middleware, Padding } from "@floating-ui/dom";
 import { arrow as arrowCore } from "@floating-ui/dom";
 import type { MiddlewareState } from "@floating-ui/core";
-import type { Box } from "../box.svelte.js";
+import { type WritableBox, box } from "runed";
 import { isElement } from "../is.js";
 
 export type ArrowOptions = {
@@ -9,7 +9,7 @@ export type ArrowOptions = {
 	 * The arrow element to be positioned.
 	 * @default undefined
 	 */
-	element: Box<Element | null> | Element | null;
+	element: WritableBox<Element | null> | Element | null;
 
 	/**
 	 * The padding between the arrow element and the floating element edges.
@@ -28,17 +28,13 @@ export type ArrowOptions = {
  */
 
 export function arrow(options: ArrowOptions | Derivable<ArrowOptions>): Middleware {
-	function isBox(value: unknown): value is Box<HTMLElement | null> {
-		return {}.hasOwnProperty.call(value, "value");
-	}
-
 	return {
 		name: "arrow",
 		options,
 		fn(state: MiddlewareState) {
 			const { element, padding } = typeof options === "function" ? options(state) : options;
 
-			if (element && isBox(element)) {
+			if (element && box.isBox(element)) {
 				if (element.value !== null) {
 					return arrowCore({ element: element.value, padding }).fn(state);
 				}
diff --git a/packages/bits-ui/src/lib/internal/floating-svelte/types.ts b/packages/bits-ui/src/lib/internal/floating-svelte/types.ts
index b78c4a3a1..918fd6348 100644
--- a/packages/bits-ui/src/lib/internal/floating-svelte/types.ts
+++ b/packages/bits-ui/src/lib/internal/floating-svelte/types.ts
@@ -7,7 +7,7 @@ import type {
 	Strategy,
 } from "@floating-ui/dom";
 import type { VirtualElement } from "@floating-ui/core";
-import type { Box } from "../box.svelte.js";
+import type { WritableBox } from "runed";
 
 type ValueOrGetValue<T> = T | (() => T);
 
@@ -45,7 +45,7 @@ export type UseFloatingOptions = {
 	/**
 	 * Reference / Anchor element to position the floating element relative to
 	 */
-	reference: Box<HTMLElement | null>;
+	reference: WritableBox<HTMLElement | null>;
 
 	/**
 	 * Callback to handle mounting/unmounting of the elements.
@@ -62,11 +62,11 @@ export type UseFloatingReturn = {
 	/**
 	 * The action used to obtain the reference element.
 	 */
-	reference: Box<HTMLElement | null>;
+	reference: WritableBox<HTMLElement | null>;
 	/**
 	 * The action used to obtain the floating element.
 	 */
-	floating: Box<HTMLElement | null>;
+	floating: WritableBox<HTMLElement | null>;
 	/**
 	 * The stateful placement, which can be different from the initial `placement` passed as options.
 	 */
diff --git a/packages/bits-ui/src/lib/internal/floating-svelte/useFloating.svelte.ts b/packages/bits-ui/src/lib/internal/floating-svelte/useFloating.svelte.ts
index 697d95f7a..17df01697 100644
--- a/packages/bits-ui/src/lib/internal/floating-svelte/useFloating.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/floating-svelte/useFloating.svelte.ts
@@ -1,5 +1,5 @@
 import { computePosition } from "@floating-ui/dom";
-import { boxedState } from "../box.svelte.js";
+import { box } from "runed";
 import type { UseFloatingOptions, UseFloatingReturn } from "./types.js";
 import { get, getDPR, roundByDPR } from "./utils.js";
 
@@ -17,7 +17,7 @@ export function useFloating(options: UseFloatingOptions): UseFloatingReturn {
 	let x = $state(0);
 	let y = $state(0);
 
-	const floating = boxedState<HTMLElement | null>(null);
+	const floating = box<HTMLElement | null>(null);
 
 	let strategy = $state(strategyOption);
 	let placement = $state(placementOption);
diff --git a/packages/bits-ui/src/lib/internal/useBodyScrollLock.svelte.ts b/packages/bits-ui/src/lib/internal/useBodyScrollLock.svelte.ts
index 0191ea1e7..51d83917b 100644
--- a/packages/bits-ui/src/lib/internal/useBodyScrollLock.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useBodyScrollLock.svelte.ts
@@ -1,8 +1,9 @@
 import { Map } from "svelte/reactivity";
 import { onDestroy } from "svelte";
+import { box } from "runed";
 import type { Fn } from "./types.js";
 import { isBrowser, isIOS } from "./is.js";
-import { box, readonlyBox, watch } from "./box.svelte.js";
+import { watch } from "./box.svelte.js";
 import { addEventListener } from "./events.js";
 import { afterTick } from "./after-tick.js";
 import { useId } from "./useId.svelte.js";
@@ -39,7 +40,7 @@ const useBodyLockStackCount = createSharedHook(() => {
 	}
 
 	watch(
-		readonlyBox(() => locked),
+		box.with(() => locked),
 		(curr, prev) => {
 			if (!curr) {
 				if (prev) {
@@ -104,7 +105,7 @@ export function useBodyScrollLock(initialState?: boolean | undefined) {
 
 	map.set(id, initialState ?? false);
 
-	const locked = box(
+	const locked = box.with(
 		() => map.get(id) ?? false,
 		(v) => map.set(id, v)
 	);
diff --git a/packages/bits-ui/src/lib/internal/useId.svelte.ts b/packages/bits-ui/src/lib/internal/useId.svelte.ts
index 8619252f3..b3090ac22 100644
--- a/packages/bits-ui/src/lib/internal/useId.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useId.svelte.ts
@@ -1,5 +1,6 @@
 class Counter {
-	value = $state(0);
+	value = 0;
+
 	constructor(initialValue: number = 0) {
 		this.value = initialValue;
 	}
diff --git a/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts b/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
index 27f11d0b9..12ce4b7a3 100644
--- a/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useNodeById.svelte.ts
@@ -1,4 +1,4 @@
-import { type Box, type ReadonlyBox, boxedState } from "./box.svelte.js";
+import { type ReadableBox, type WritableBox, box } from "runed";
 import { afterTick } from "./after-tick.js";
 
 /**
@@ -8,8 +8,8 @@ import { afterTick } from "./after-tick.js";
  *
  * @param id The boxed ID of the node to find.
  */
-export function useNodeById(id: ReadonlyBox<string> | Box<string>) {
-	const node = boxedState<HTMLElement | null>(null);
+export function useNodeById(id: ReadableBox<string> | WritableBox<string>) {
+	const node = box<HTMLElement | null>(null);
 
 	$effect.pre(() => {
 		// eslint-disable-next-line no-unused-expressions
diff --git a/packages/bits-ui/src/lib/internal/useRovingFocus.svelte.ts b/packages/bits-ui/src/lib/internal/useRovingFocus.svelte.ts
index 409d56764..067fb70fa 100644
--- a/packages/bits-ui/src/lib/internal/useRovingFocus.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useRovingFocus.svelte.ts
@@ -1,4 +1,4 @@
-import { type Box, type ReadonlyBox, box, boxedState } from "./box.svelte.js";
+import type { ReadableBox, WritableBox } from "runed";
 import { getElemDirection } from "./locale.js";
 import { getDirectionalKeys } from "./getDirectionalKeys.js";
 import { kbd } from "./kbd.js";
@@ -13,18 +13,18 @@ type UseRovingFocusProps = {
 	/**
 	 * The root node which contains the focusable candidates.
 	 */
-	rootNode: Box<HTMLElement | null>;
+	rootNode: WritableBox<HTMLElement | null>;
 
 	/**
 	 * Whether to loop through the candidates when reaching the end.
 	 */
-	loop: ReadonlyBox<boolean>;
+	loop: ReadableBox<boolean>;
 
 	/**
 	 * The orientation of the roving focus group. Used
 	 * to determine how keyboard navigation should work.
 	 */
-	orientation: ReadonlyBox<Orientation>;
+	orientation: ReadableBox<Orientation>;
 
 	/**
 	 * A callback function called when a candidate is focused.
diff --git a/packages/bits-ui/src/lib/internal/useSize.svelte.ts b/packages/bits-ui/src/lib/internal/useSize.svelte.ts
index 8e8cd720f..03274402b 100644
--- a/packages/bits-ui/src/lib/internal/useSize.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useSize.svelte.ts
@@ -1,10 +1,10 @@
 /// <reference types="resize-observer-browser" />
 
 import { untrack } from "svelte";
-import type { Box } from "./box.svelte.js";
+import type { WritableBox } from "runed";
 import { afterTick } from "./after-tick.js";
 
-export function useSize(node: Box<HTMLElement | null>) {
+export function useSize(node: WritableBox<HTMLElement | null>) {
 	let size = $state<{ width: number; height: number } | undefined>(undefined);
 
 	$effect(() => {
diff --git a/packages/bits-ui/src/lib/internal/useStateMachine.svelte.ts b/packages/bits-ui/src/lib/internal/useStateMachine.svelte.ts
index dfd3351ec..7b7b7083d 100644
--- a/packages/bits-ui/src/lib/internal/useStateMachine.svelte.ts
+++ b/packages/bits-ui/src/lib/internal/useStateMachine.svelte.ts
@@ -1,4 +1,4 @@
-import { boxedState } from "./box.svelte.js";
+import { box } from "runed";
 
 interface Machine<S> {
 	[k: string]: { [k: string]: S };
@@ -30,7 +30,7 @@ export function useStateMachine<M>(
 	initialState: MachineState<M>,
 	machine: M & Machine<MachineState<M>>
 ) {
-	const state = boxedState(initialState);
+	const state = box(initialState);
 
 	function reducer(event: MachineEvent<M>) {
 		// @ts-expect-error  state.value is keyof M
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b2b2af8a..28dd40319 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       nanoid:
         specifier: ^5.0.5
         version: 5.0.6
+      runed:
+        specifier: ^0.1.0
+        version: 0.1.0(svelte@5.0.0-next.113)
       scule:
         specifier: ^1.3.0
         version: 1.3.0
@@ -8392,6 +8395,15 @@ packages:
       queue-microtask: 1.2.3
     dev: true
 
+  /runed@0.1.0(svelte@5.0.0-next.113):
+    resolution: {integrity: sha512-AoTFTD02SDLBic5eHenztQ37RS1/7az9v75N9Eosd8IzWs4aT28E6/fUbfkfGY5FrnzzRMWjCEOqN3AChrZ2xg==}
+    peerDependencies:
+      svelte: ^5.0.0
+    dependencies:
+      nanoid: 5.0.6
+      svelte: 5.0.0-next.113
+    dev: false
+
   /rxjs@7.8.1:
     resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
     dependencies: