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 3283183fc..a63d2d08d 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
@@ -9,17 +9,18 @@
 		child,
 		asChild,
 		el = $bindable(),
-		id: idProp = generateId(),
-		forceMount: forceMountProp = false,
+		id = generateId(),
+		forceMount = false,
 		children,
-		style: styleProp = {},
+		style = {},
 		...restProps
 	}: AccordionContentProps = $props();
 
-	const id = readonlyBox(() => idProp);
-	const style = readonlyBox(() => styleProp);
-	const forceMount = readonlyBox(() => forceMountProp);
-	const content = getAccordionContentState({ forceMount, id, style });
+	const content = getAccordionContentState({
+		forceMount: readonlyBox(() => forceMount),
+		id: readonlyBox(() => id),
+		style: readonlyBox(() => style),
+	});
 </script>
 
 <Presence forceMount={true} present={content.present} node={content.node}>
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 f96ae2a0c..51812a1db 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
@@ -5,8 +5,8 @@
 	import { styleToString } from "$lib/internal/style.js";
 	let {
 		asChild,
-		disabled: disabledProp = false,
-		value: valueProp,
+		disabled = false,
+		value,
 		children,
 		child,
 		el = $bindable(),
@@ -14,18 +14,16 @@
 		...restProps
 	}: AccordionItemProps = $props();
 
-	const disabled = readonlyBox(() => disabledProp);
-	const value = readonlyBox(() => valueProp);
-
-	const item = setAccordionItemState({ value, disabled });
-
-	const isDisabled = $derived(disabled || item.root.disabled);
+	const item = setAccordionItemState({
+		value: readonlyBox(() => value),
+		disabled: readonlyBox(() => disabled),
+	});
 
 	const mergedProps = $derived({
 		...restProps,
 		...item.props,
 		"data-state": item.isSelected ? "open" : "closed",
-		"data-disabled": isDisabled ? "" : undefined,
+		"data-disabled": item.isDisabled ? "" : undefined,
 		style: styleToString(style),
 	});
 </script>
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 6c9e8f80a..52168a351 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
@@ -6,28 +6,23 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		disabled: disabledProp = false,
+		disabled = false,
 		asChild,
 		el,
-		id: idProp = generateId(),
-		onkeydown: onkeydownProp = () => {},
-		onclick: onclickProp = () => {},
+		id = generateId(),
+		onkeydown = () => {},
+		onclick = () => {},
 		children,
 		child,
 		style,
 		...restProps
 	}: AccordionTriggerProps = $props();
 
-	const disabled = readonlyBox(() => disabledProp);
-	const id = readonlyBox(() => idProp);
-	const onkeydown = readonlyBox(() => onkeydownProp);
-	const onclick = readonlyBox(() => onclickProp);
-
 	const trigger = getAccordionTriggerState({
-		disabled,
-		onkeydown,
-		onclick,
-		id,
+		disabled: readonlyBox(() => disabled),
+		onkeydown: readonlyBox(() => onkeydown),
+		onclick: readonlyBox(() => onclick),
+		id: readonlyBox(() => id),
 	});
 
 	const mergedProps = $derived({
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 1a7b94c38..f4be29c48 100644
--- a/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
+++ b/packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte
@@ -6,14 +6,14 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		disabled: disabledProp = false,
+		disabled = false,
 		asChild,
 		children,
 		child,
 		type,
 		value: valueProp = $bindable(),
 		el = $bindable(),
-		id: idProp = generateId(),
+		id = generateId(),
 		style,
 		onValueChange,
 		...restProps
@@ -21,18 +21,18 @@
 
 	valueProp === undefined && (valueProp = type === "single" ? "" : []);
 
-	const value = box(
-		() => valueProp!,
-		(v) => {
-			valueProp = v;
-			onValueChange?.(v as any);
-		}
-	) as Box<string> | Box<string[]>;
-
-	const id = readonlyBox(() => idProp);
-	const disabled = readonlyBox(() => disabledProp);
-
-	const rootState = setAccordionRootState({ type, value, id, disabled });
+	const rootState = setAccordionRootState({
+		type,
+		value: box(
+			() => valueProp!,
+			(v) => {
+				valueProp = v;
+				onValueChange?.(v as any);
+			}
+		) as Box<string> | Box<string[]>,
+		id: readonlyBox(() => id),
+		disabled: readonlyBox(() => disabled),
+	});
 
 	const mergedProps = {
 		...rootState.props,
diff --git a/packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte b/packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte
index ed406b036..8a9a7924c 100644
--- a/packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte
+++ b/packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte
@@ -8,13 +8,11 @@
 		children,
 		child,
 		el = $bindable(),
-		style: styleProp = {},
+		style = {},
 		...restProps
 	}: FallbackProps = $props();
 
-	const style = readonlyBox(() => styleProp);
-
-	const fallbackState = getAvatarFallbackState({ style });
+	const fallbackState = getAvatarFallbackState({ style: readonlyBox(() => style) });
 
 	const mergedProps = {
 		...fallbackState.props,
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 516156bd2..f8724641b 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
@@ -3,19 +3,12 @@
 	import { getAvatarImageState } from "../avatar.svelte.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
 
-	let {
-		src: srcProp,
-		asChild,
-		child,
-		el = $bindable(),
-		style: styleProp = {},
-		...restProps
-	}: ImageProps = $props();
+	let { src, asChild, child, el = $bindable(), style = {}, ...restProps }: ImageProps = $props();
 
-	const src = readonlyBox(() => srcProp);
-	const style = readonlyBox(() => styleProp);
-
-	const imageState = getAvatarImageState({ style, src });
+	const imageState = getAvatarImageState({
+		style: readonlyBox(() => style),
+		src: readonlyBox(() => src),
+	});
 
 	const mergedProps = {
 		...imageState.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 8c729a80f..a52af0774 100644
--- a/packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte
+++ b/packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte
@@ -4,33 +4,27 @@
 	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
 
 	let {
-		delayMs: delayMsProp = 0,
-		loadingStatus: loadingStatusProp = $bindable("loading"),
+		delayMs = 0,
+		loadingStatus = $bindable("loading"),
 		onLoadingStatusChange,
 		asChild,
 		child,
 		children,
 		el = $bindable(),
-		style: styleProp = {},
+		style = {},
 		...restProps
 	}: RootProps = $props();
 
-	const loadingStatus = box(
-		() => loadingStatusProp,
-		(v) => {
-			loadingStatusProp = v;
-			onLoadingStatusChange?.(v);
-		}
-	);
-
-	const style = readonlyBox(() => styleProp);
-
-	const delayMs = readonlyBox(() => delayMsProp);
-
 	const rootState = setAvatarRootState({
-		delayMs,
-		loadingStatus,
-		style,
+		delayMs: readonlyBox(() => delayMs),
+		loadingStatus: box(
+			() => loadingStatus,
+			(v) => {
+				loadingStatus = v;
+				onLoadingStatusChange?.(v);
+			}
+		),
+		style: readonlyBox(() => style),
 	});
 
 	const mergedProps = {
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 06e09c274..f392eded8 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
@@ -9,18 +9,18 @@
 		child,
 		asChild,
 		el = $bindable(),
-		forceMount: forceMountProp = false,
+		forceMount = false,
 		children,
-		id: idProp = generateId(),
-		style: styleProp = {},
+		id = generateId(),
+		style = {},
 		...restProps
 	}: CollapsibleContentProps & { forceMount?: boolean } = $props();
 
-	const id = readonlyBox(() => idProp);
-	const forceMount = readonlyBox(() => forceMountProp);
-
-	const style = readonlyBox(() => styleProp);
-	const content = getCollapsibleContentState({ id, style, forceMount });
+	const content = getCollapsibleContentState({
+		id: readonlyBox(() => id),
+		style: readonlyBox(() => style),
+		forceMount: readonlyBox(() => forceMount),
+	});
 </script>
 
 <Presence forceMount={true} present={content.present} node={content.node}>
diff --git a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte
index 8332eaa62..57465d1d9 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte
@@ -9,14 +9,12 @@
 		children,
 		child,
 		el = $bindable(),
-		onclick: onclickProp = () => {},
+		onclick = () => {},
 		style = {},
 		...restProps
 	}: TriggerProps = $props();
 
-	const onclick = readonlyBox(() => onclickProp);
-
-	const triggerState = getCollapsibleTriggerState({ onclick });
+	const triggerState = getCollapsibleTriggerState({ onclick: readonlyBox(() => onclick) });
 
 	const mergedProps = $derived({
 		...triggerState.props,
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 098b8e0af..60de35333 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
+++ b/packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte
@@ -8,25 +8,21 @@
 		children,
 		child,
 		el = $bindable(),
-		open: openProp = $bindable(false),
-		disabled: disabledProp = false,
+		open = $bindable(false),
+		disabled = false,
 		onOpenChange,
 		...restProps
 	}: RootProps = $props();
 
-	const open = box(
-		() => openProp,
-		(v) => {
-			openProp = v;
-			onOpenChange?.(v);
-		}
-	);
-
-	const disabled = readonlyBox(() => disabledProp);
-
 	const rootState = setCollapsibleRootState({
-		open,
-		disabled,
+		open: box(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange?.(v);
+			}
+		),
+		disabled: readonlyBox(() => disabled),
 	});
 
 	const mergedProps = $derived({
diff --git a/packages/bits-ui/src/lib/bits/label/components/label.svelte b/packages/bits-ui/src/lib/bits/label/components/label.svelte
index ff157c81b..7728b62b1 100644
--- a/packages/bits-ui/src/lib/bits/label/components/label.svelte
+++ b/packages/bits-ui/src/lib/bits/label/components/label.svelte
@@ -5,7 +5,7 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		onmousedown: onmousedownProp = () => {},
+		onmousedown = () => {},
 		asChild,
 		children,
 		child,
@@ -15,9 +15,7 @@
 		...restProps
 	}: RootProps = $props();
 
-	const onmousedown = readonlyBox(() => onmousedownProp);
-
-	const rootState = setLabelRootState({ onmousedown });
+	const rootState = setLabelRootState({ onmousedown: readonlyBox(() => onmousedown) });
 	const mergedProps = $derived({
 		...restProps,
 		...rootState.props,
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 b90534a78..d50626c68 100644
--- a/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
+++ b/packages/bits-ui/src/lib/bits/progress/components/progress.svelte
@@ -8,17 +8,17 @@
 		asChild,
 		child,
 		children,
-		value: valueProp = 0,
-		max: maxProp = 100,
+		value = 0,
+		max = 100,
 		el = $bindable(),
 		style = {},
 		...restProps
 	}: RootProps = $props();
 
-	const value = readonlyBox(() => valueProp);
-	const max = readonlyBox(() => maxProp);
-
-	const progress = setProgressRootState({ value, max });
+	const progress = setProgressRootState({
+		value: readonlyBox(() => value),
+		max: readonlyBox(() => max),
+	});
 
 	const mergedProps = {
 		...restProps,
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 5761ecf83..96fa9901a 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
@@ -6,27 +6,27 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		id: idProp = generateId(),
+		id = generateId(),
 		asChild,
 		children,
 		indicator,
 		child,
-		value: valueProp,
-		disabled: disabledProp = false,
-		onclick: onclickProp = () => {},
-		onkeydown: onkeydownProp = () => {},
+		value,
+		disabled = false,
+		onclick = () => {},
+		onkeydown = () => {},
 		el = $bindable(),
 		style = {},
 		...restProps
 	}: ItemProps = $props();
 
-	const value = readonlyBox(() => valueProp);
-	const disabled = readonlyBox(() => disabledProp);
-	const id = readonlyBox(() => idProp);
-	const onclick = readonlyBox(() => onclickProp);
-	const onkeydown = readonlyBox(() => onkeydownProp);
-
-	const item = setRadioGroupItemState({ value, disabled, id, onclick, onkeydown });
+	const item = setRadioGroupItemState({
+		value: readonlyBox(() => value),
+		disabled: readonlyBox(() => disabled),
+		id: readonlyBox(() => id),
+		onclick: readonlyBox(() => onclick),
+		onkeydown: readonlyBox(() => onkeydown),
+	});
 
 	const mergedProps = $derived({
 		...restProps,
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 a7d5982b6..3aea99ce3 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
@@ -7,37 +7,37 @@
 	import { styleToString } from "$lib/internal/style.js";
 
 	let {
-		disabled: disabledProp = false,
+		disabled = false,
 		asChild,
 		children,
 		child,
 		style,
-		value: valueProp = $bindable(""),
+		value = $bindable(""),
 		el = $bindable(),
-		orientation: orientationProp = "vertical",
-		loop: loopProp = true,
-		name: nameProp = undefined,
-		required: requiredProp = false,
-		id: idProp = generateId(),
+		orientation = "vertical",
+		loop = true,
+		name = undefined,
+		required = false,
+		id = generateId(),
 		onValueChange,
 		...restProps
 	}: RootProps = $props();
 
-	const value = box(
-		() => valueProp,
-		(v) => {
-			valueProp = v;
-			onValueChange?.(v);
-		}
-	);
-	const disabled = readonlyBox(() => disabledProp);
-	const orientation = readonlyBox(() => orientationProp);
-	const loop = readonlyBox(() => loopProp);
-	const name = readonlyBox(() => nameProp);
-	const required = readonlyBox(() => requiredProp);
-	const id = readonlyBox(() => idProp);
-
-	const root = setRadioGroupRootState({ orientation, disabled, loop, name, required, id, value });
+	const root = setRadioGroupRootState({
+		orientation: readonlyBox(() => orientation),
+		disabled: readonlyBox(() => disabled),
+		loop: readonlyBox(() => loop),
+		name: readonlyBox(() => name),
+		required: readonlyBox(() => required),
+		id: readonlyBox(() => id),
+		value: box(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange?.(v);
+			}
+		),
+	});
 
 	const mergedProps = $derived({
 		...restProps,
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 b925bad4c..50924acbc 100644
--- a/packages/bits-ui/src/lib/bits/separator/components/separator.svelte
+++ b/packages/bits-ui/src/lib/bits/separator/components/separator.svelte
@@ -8,17 +8,17 @@
 		asChild,
 		child,
 		children,
-		decorative: decorativeProp = false,
-		orientation: orientationProp = "horizontal",
+		decorative = false,
+		orientation = "horizontal",
 		el = $bindable(),
 		style = {},
 		...restProps
 	}: RootProps = $props();
 
-	const decorative = readonlyBox(() => decorativeProp);
-	const orientation = readonlyBox(() => orientationProp);
-
-	const separator = setSeparatorRootState({ decorative, orientation });
+	const separator = setSeparatorRootState({
+		decorative: readonlyBox(() => decorative),
+		orientation: readonlyBox(() => orientation),
+	});
 
 	const mergedProps = $derived({
 		...restProps,
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 de66f1c46..764751175 100644
--- a/packages/bits-ui/src/lib/bits/switch/components/switch.svelte
+++ b/packages/bits-ui/src/lib/bits/switch/components/switch.svelte
@@ -10,41 +10,32 @@
 		asChild,
 		children,
 		el = $bindable(),
-		disabled: disabledProp = false,
-		required: requiredProp = false,
-		checked: checkedProp = false,
-		value: valueProp = "",
-		name: nameProp = undefined,
-		onclick: onclickProp = () => {},
-		onkeydown: onkeydownProp = () => {},
+		disabled = false,
+		required = false,
+		checked = false,
+		value = "",
+		name = undefined,
+		onclick = () => {},
+		onkeydown = () => {},
 		onCheckedChange,
 		style = {},
 		...restProps
 	}: RootProps = $props();
 
-	const checked = box(
-		() => checkedProp,
-		(v) => {
-			checkedProp = v;
-			onCheckedChange?.(v);
-		}
-	);
-
-	const disabled = readonlyBox(() => disabledProp);
-	const required = readonlyBox(() => requiredProp);
-	const value = readonlyBox(() => valueProp);
-	const name = readonlyBox(() => nameProp);
-	const onclick = readonlyBox(() => onclickProp);
-	const onkeydown = readonlyBox(() => onkeydownProp);
-
 	const rootState = setSwitchRootState({
-		checked,
-		disabled,
-		required,
-		value,
-		name,
-		onclick,
-		onkeydown,
+		checked: box(
+			() => checked,
+			(v) => {
+				checked = v;
+				onCheckedChange?.(v);
+			}
+		),
+		disabled: readonlyBox(() => disabled),
+		required: readonlyBox(() => required),
+		value: readonlyBox(() => value),
+		name: readonlyBox(() => name),
+		onclick: readonlyBox(() => onclick),
+		onkeydown: readonlyBox(() => onkeydown),
 	});
 
 	const mergedProps = $derived({
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 a44607aca..98ccde9a1 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,6 +1,6 @@
 <script lang="ts">
 	import type { DismissableLayerProps } from "./types.js";
-	import { dismissableLayerState } from "./dismissable-layer.svelte.js";
+	import { useDismissableLayer } from "./dismissable-layer.svelte.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { noop } from "$lib/index.js";
 
@@ -12,7 +12,7 @@
 		children,
 	}: DismissableLayerProps = $props();
 
-	dismissableLayerState({
+	useDismissableLayer({
 		id: readonlyBox(() => id),
 		behaviorType: readonlyBox(() => behaviorType),
 		onInteractOutside: readonlyBox(() => onInteractOutside),
diff --git a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts
index 52ad205d6..036ee18b0 100644
--- a/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/dismissable-layer/dismissable-layer.svelte.ts
@@ -165,7 +165,7 @@ export class DismissableLayerState {
 	}
 }
 
-export function dismissableLayerState(props: DismissableLayerStateProps) {
+export function useDismissableLayer(props: DismissableLayerStateProps) {
 	return new DismissableLayerState(props);
 }
 
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 baba6f377..c7f15a0ac 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,12 +1,12 @@
 <script lang="ts">
 	import type { EscapeLayerProps } from "./types.js";
-	import { escapeLayerState } from "./escape-layer.svelte.js";
+	import { useEscapeLayer } from "./escape-layer.svelte.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { noop } from "$lib/index.js";
 
 	let { behaviorType = "close", onEscape = noop, children }: EscapeLayerProps = $props();
 
-	escapeLayerState({
+	useEscapeLayer({
 		behaviorType: readonlyBox(() => behaviorType),
 		onEscape: readonlyBox(() => onEscape),
 	});
diff --git a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts
index fdd30553c..d43438562 100644
--- a/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/escape-layer/escape-layer.svelte.ts
@@ -36,7 +36,7 @@ export class EscapeLayerState {
 	};
 }
 
-export function escapeLayerState(props: EscapeLayerStateProps) {
+export function useEscapeLayer(props: EscapeLayerStateProps) {
 	return new EscapeLayerState(props);
 }
 
diff --git a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte
index 195e3198f..950df38a5 100644
--- a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte
+++ b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { PreventTextSelectionOverflowLayerProps } from "./types.js";
-	import { preventTextSelectionOverflowLayerState } from "./prevent-text-selection-overflow-layer.svelte.js";
+	import { usePreventTextSelectionOverflowLayer } from "./prevent-text-selection-overflow-layer.svelte.js";
 	import { readonlyBox } from "$lib/internal/box.svelte.js";
 	import { noop } from "$lib/index.js";
 
@@ -12,7 +12,7 @@
 		children,
 	}: PreventTextSelectionOverflowLayerProps = $props();
 
-	preventTextSelectionOverflowLayerState({
+	usePreventTextSelectionOverflowLayer({
 		id: readonlyBox(() => id),
 		enabled: readonlyBox(() => enabled),
 		onPointerDown: readonlyBox(() => onPointerDown),
diff --git a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts
index fcfb8b102..88d359bb6 100644
--- a/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/utilities/prevent-text-selection-overflow-layer/prevent-text-selection-overflow-layer.svelte.ts
@@ -68,7 +68,7 @@ export class PreventTextSelectionOverflowLayerState {
 	};
 }
 
-export function preventTextSelectionOverflowLayerState(props: StateProps) {
+export function usePreventTextSelectionOverflowLayer(props: StateProps) {
 	return new PreventTextSelectionOverflowLayerState(props);
 }