perf: improve runtime performance

.changeset/twenty-zebras-kick.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Improve runtime performance with optimized internal `mergeProps` and `boxWith` implementations, less reactive work in Select/Tooltip/Menu, and smarter body scroll locking when a dialog overlay handles pointer blocking.

eslint.config.js

@@ -29,6 +29,7 @@ export default tseslint.config(
 		},
 		rules: {
 			"svelte/no-navigation-without-resolve": "off",
+			"svelte/no-unused-svelte-ignore": "off",
 		},
 	},
 	{

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

@@ -1,11 +1,11 @@
 import {
 	afterTick,
 	attachRef,
-	boxWith,
 	type Box,
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
 } from "svelte-toolbelt";
+import { boxWith } from "$lib/internal/box.svelte.js";
 import { Context, watch } from "runed";
 import type {
 	BitsKeyboardEvent,

packages/bits-ui/src/lib/bits/accordion/components/accordion-content.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { mergeProps, boxWith } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { AccordionContentState } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/accordion/components/accordion-header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AccordionHeaderProps } from "../types.js";
 	import { AccordionHeaderState } from "../accordion.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/accordion/components/accordion-item.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AccordionItemProps } from "../types.js";
 	import { AccordionItemState } from "../accordion.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/accordion/components/accordion-trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AccordionTriggerProps } from "../types.js";
 	import { AccordionTriggerState } from "../accordion.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/accordion/components/accordion.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { type WritableBox, boxWith, mergeProps } from "svelte-toolbelt";
+	import { type WritableBox } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { AccordionRootState } from "../accordion.svelte.js";
 	import type { AccordionRootProps } from "../types.js";
 	import { noop } from "$lib/internal/noop.js";
@@ -38,6 +40,7 @@
 	);
 
 	const rootState = AccordionRootState.create({
+		// svelte-ignore state_referenced_locally
 		type,
 		value: boxWith(
 			() => value!,

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AlertDialogActionProps } from "../types.js";
 	import { DialogActionState } from "$lib/bits/dialog/dialog.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AlertDialogCancelProps } from "../types.js";
 	import { AlertDialogCancelState } from "$lib/bits/dialog/dialog.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { afterSleep, boxWith, mergeProps } from "svelte-toolbelt";
+	import { afterSleep } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AlertDialogContentProps } from "../types.js";
 	import DismissibleLayer from "$lib/bits/utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
@@ -38,6 +40,10 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+
+	function shouldBlockPointerEvents() {
+		return contentState.root.overlayNode === null;
+	}
 </script>
 
 {#if contentState.shouldRender || forceMount}
@@ -83,14 +89,18 @@
 					>
 						{#if child}
 							{#if contentState.root.opts.open.current}
-								<ScrollLock {preventScroll} {restoreScrollDelay} />
+								<ScrollLock
+									{preventScroll}
+									{restoreScrollDelay}
+									{shouldBlockPointerEvents}
+								/>
 							{/if}
 							{@render child({
 								props: mergeProps(mergedProps, focusScopeProps),
 								...contentState.snippetProps,
 							})}
 						{:else}
-							<ScrollLock {preventScroll} />
+							<ScrollLock {preventScroll} {shouldBlockPointerEvents} />
 							<div {...mergeProps(mergedProps, focusScopeProps)}>
 								{@render children?.()}
 							</div>

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { boxWith } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
 	import type { AlertDialogRootProps } from "../types.js";
 	import { noop } from "$lib/internal/noop.js";
 	import { DialogRootState } from "$lib/bits/dialog/dialog.svelte.js";

packages/bits-ui/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AspectRatioRootProps } from "../types.js";
 	import { AspectRatioRootState } from "../aspect-ratio.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/avatar/components/avatar-fallback.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AvatarFallbackProps } from "../types.js";
 	import { AvatarFallbackState } from "../avatar.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/avatar/components/avatar-image.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AvatarImageProps } from "../types.js";
 	import { AvatarImageState } from "../avatar.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/avatar/components/avatar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { AvatarRootProps } from "../types.js";
 	import { AvatarRootState } from "../avatar.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-cell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CalendarCellState } from "../calendar.svelte.js";
 	import type { CalendarCellProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-day.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CalendarDayState } from "../calendar.svelte.js";
 	import type { CalendarDayProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-grid-body.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CalendarGridBodyProps } from "../types.js";
 	import { CalendarGridBodyState } from "../calendar.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-grid-head.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CalendarGridHeadState } from "../calendar.svelte.js";
 	import type { CalendarGridHeadProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-grid-row.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CalendarGridRowState } from "../calendar.svelte.js";
 	import type { CalendarGridRowProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-grid.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CalendarGridState } from "../calendar.svelte.js";
 	import type { CalendarGridProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-head-cell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CalendarHeadCellState } from "../calendar.svelte.js";
 	import type { CalendarHeadCellProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-header.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CalendarHeaderState } from "../calendar.svelte.js";
 	import type { CalendarHeaderProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-heading.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CalendarHeadingProps } from "../types.js";
 	import { CalendarHeadingState } from "../calendar.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-month-select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CalendarMonthSelectProps } from "../types.js";
 	import { CalendarMonthSelectState } from "../calendar.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-next-button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CalendarNextButtonState } from "../calendar.svelte.js";
 	import type { CalendarNextButtonProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-prev-button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CalendarPrevButtonProps } from "../types.js";
 	import { CalendarPrevButtonState } from "../calendar.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar-year-select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CalendarYearSelectProps } from "../types.js";
 	import { CalendarYearSelectState } from "../calendar.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/calendar/components/calendar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { watch } from "runed";
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { type DateValue } from "@internationalized/date";
 	import { CalendarRootState } from "../calendar.svelte.js";
 	import type { CalendarRootProps } from "../types.js";
@@ -41,6 +42,7 @@
 		...restProps
 	}: CalendarRootProps = $props();
 
+	// svelte-ignore state_referenced_locally
 	const defaultPlaceholder = getDefaultDate({
 		defaultValue: value,
 		minValue,

packages/bits-ui/src/lib/bits/checkbox/components/checkbox-group-label.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CheckboxGroupLabelProps } from "../types.js";
 	import { CheckboxGroupLabelState } from "../checkbox.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/checkbox/components/checkbox-group.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CheckboxGroupProps } from "../types.js";
 	import { CheckboxGroupState } from "../checkbox.svelte.js";
 	import { noop } from "$lib/internal/noop.js";

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CheckboxRootProps } from "../types.js";
 	import { CheckboxGroupContext, CheckboxRootState } from "../checkbox.svelte.js";
 	import CheckboxInput from "./checkbox-input.svelte";
@@ -28,6 +29,7 @@
 
 	const group = CheckboxGroupContext.getOr(null);
 
+	// svelte-ignore state_referenced_locally
 	if (group && value) {
 		if (group.opts.value.current.includes(value)) {
 			checked = true;

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

@@ -1,10 +1,10 @@
 import {
 	afterTick,
 	attachRef,
-	boxWith,
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
 } from "svelte-toolbelt";
+import { boxWith } from "$lib/internal/box.svelte.js";
 import { Context, watch } from "runed";
 import {
 	createBitsAttrs,

packages/bits-ui/src/lib/bits/collapsible/components/collapsible-content.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import { CollapsibleContentState } from "../collapsible.svelte.js";
 	import type { CollapsibleContentProps } from "../types.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/collapsible/components/collapsible-trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CollapsibleTriggerProps } from "../types.js";
 	import { CollapsibleTriggerState } from "../collapsible.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/collapsible/components/collapsible.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { CollapsibleRootProps } from "../types.js";
 	import { CollapsibleRootState } from "../collapsible.svelte.js";
 	import { createId } from "$lib/internal/create-id.js";

packages/bits-ui/src/lib/bits/combobox/components/combobox-input.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { ComboboxInputProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
@@ -23,6 +24,7 @@
 		clearOnDeselect: boxWith(() => clearOnDeselect),
 	});
 
+	// svelte-ignore state_referenced_locally
 	if (defaultValue) {
 		inputState.root.opts.inputValue.current = defaultValue;
 	}

packages/bits-ui/src/lib/bits/combobox/components/combobox-trigger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
+	import { mergeProps } from "$lib/internal/merge-props.js";
 	import type { ComboboxTriggerProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import { SelectComboTriggerState } from "$lib/bits/select/select.svelte.js";

packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { type WritableBox, boxWith } from "svelte-toolbelt";
+	import { type WritableBox } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
 	import type { ComboboxRootProps } from "../types.js";
 	import { noop } from "$lib/internal/noop.js";
 	import FloatingLayer from "$lib/bits/utilities/floating-layer/components/floating-layer.svelte";

packages/bits-ui/src/lib/bits/command/components/_command-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { boxWith } from "svelte-toolbelt";
+	import { boxWith } from "$lib/internal/box.svelte.js";
 	import { CommandLabelState } from "../command.svelte.js";
 
 	import type { WithChildren } from "$lib/internal/types.js";