cleanup

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"

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,17 +27,17 @@ const HEADER_ATTR = "accordion-header";
 // BASE
 //
 
-type AccordionBaseStateProps = ReadonlyBoxedValues<{
+type AccordionBaseStateProps = ReadableBoxedValues<{
 	id: string;
 	disabled: boolean;
 	orientation: Orientation;
 	loop: boolean;
 }>;
 
 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,16 +121,16 @@ export class AccordionMultiState extends AccordionBaseState {
 // ITEM
 //
 
-type AccordionItemStateProps = ReadonlyBoxedValues<{
+type AccordionItemStateProps = ReadableBoxedValues<{
 	value: string;
 	disabled: boolean;
 }> & {
 	rootState: AccordionState;
 };
 
 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;

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>
 

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

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

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

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

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

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

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) {

packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts

@@ -1,31 +1,29 @@
 import {
-	type Box,
-	type BoxedValues,
-	type ReadonlyBox,
-	type ReadonlyBoxedValues,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
 	getAriaChecked,
 	getAriaRequired,
 	getDataDisabled,
 	kbd,
 } 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),