sheer-ui 0.4.0 → 0.4.3

package/src/lib/components/popover/popover.svelte.ts

@@ -1,11 +1,5 @@
 import { createContext, untrack } from 'svelte';
-import {
-	type ReadableBox,
-	type ReadableBoxedValues,
-	type WritableBoxedValues,
-	attachRef,
-	boxWith,
-} from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import { kbd } from '../../internal/kbd.js';
 import { createBitsAttrs, boolToStr, getDataOpenClosed } from '../../internal/attrs.js';
 import type {
@@ -15,7 +9,7 @@ import type {
 	BitsPointerEvent,
 	OnChangeFn,
 	RefAttachment,
-	WithRefOpts,
+	RefOpts,
 } from '../../internal/types.js';
 import { isElement } from '../../internal/tools/utils/dom.js';
 import type { Measurable } from '../../internal/floating-layer/index.js';
@@ -30,14 +24,10 @@ const popoverAttrs = createBitsAttrs({
 
 const [getPopoverRoot, setPopoverRoot] = createContext<PopoverRootState>();
 
-interface PopoverRootStateOpts
-	extends
-		WritableBoxedValues<{
-			open: boolean;
-		}>,
-		ReadableBoxedValues<{
-			onOpenChangeComplete: OnChangeFn<boolean>;
-		}> {}
+interface PopoverRootStateOpts {
+	open: boolean;
+	readonly onOpenChangeComplete: OnChangeFn<boolean>;
+}
 
 export class PopoverRootState {
 	static create(opts: PopoverRootStateOpts) {
@@ -52,11 +42,11 @@ export class PopoverRootState {
 	openedViaHover = $state(false);
 	hasInteractedWithContent = $state(false);
 	hoverCooldown = $state(false);
-	#closeDelaySource = $state<ReadableBox<number>>(boxWith(() => 0));
-	closeDelay = $derived.by(() => this.#closeDelaySource.current);
+	// The trigger installs its closeDelay here; a getter so the read tracks the trigger's prop.
+	#closeDelaySource: () => number = $state.raw(() => 0);
 	#closeTimer = createEffectTimeout(() => {
 		if (this.openedViaHover && !this.hasInteractedWithContent) {
-			this.opts.open.current = false;
+			this.opts.open = false;
 		}
 	}, () => this.closeDelay);
 
@@ -64,7 +54,7 @@ export class PopoverRootState {
 		this.opts = opts;
 
 		$effect(() => {
-			const isOpen = this.opts.open.current;
+			const isOpen = this.opts.open;
 			untrack(() => {
 				if (!isOpen) {
 					this.openedViaHover = false;
@@ -75,43 +65,47 @@ export class PopoverRootState {
 		});
 	}
 
-	setCloseDelaySource(source: ReadableBox<number>) {
+	get closeDelay() {
+		return this.#closeDelaySource();
+	}
+
+	setCloseDelaySource(source: () => number) {
 		this.#closeDelaySource = source;
 	}
 
 	toggleOpen() {
 		this.#closeTimer.stop();
-		this.opts.open.current = !this.opts.open.current;
+		this.opts.open = !this.opts.open;
 	}
 
 	handleClose() {
 		this.#closeTimer.stop();
-		if (!this.opts.open.current) return;
-		this.opts.open.current = false;
+		if (!this.opts.open) return;
+		this.opts.open = false;
 	}
 
 	handleHoverOpen() {
 		this.#closeTimer.stop();
-		if (this.opts.open.current) return;
+		if (this.opts.open) return;
 		this.openedViaHover = true;
-		this.opts.open.current = true;
+		this.opts.open = true;
 	}
 
 	handleHoverClose() {
-		if (!this.opts.open.current) return;
+		if (!this.opts.open) return;
 		// only close if opened via hover and user hasn't interacted with content
 		if (this.openedViaHover && !this.hasInteractedWithContent) {
-			this.opts.open.current = false;
+			this.opts.open = false;
 		}
 	}
 
 	handleDelayedHoverClose() {
-		if (!this.opts.open.current) return;
+		if (!this.opts.open) return;
 		if (!this.openedViaHover || this.hasInteractedWithContent) return;
 
 		if (this.closeDelay <= 0) {
 			this.#closeTimer.stop();
-			this.opts.open.current = false;
+			this.opts.open = false;
 			return;
 		}
 
@@ -128,15 +122,12 @@ export class PopoverRootState {
 	}
 }
 
-interface PopoverTriggerStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			openOnHover: boolean;
-			openDelay: number;
-			closeDelay: number;
-		}> {}
+interface PopoverTriggerStateOpts extends RefOpts {
+	readonly disabled: boolean;
+	readonly openOnHover: boolean;
+	readonly openDelay: number;
+	readonly closeDelay: number;
+}
 
 export class PopoverTriggerState {
 	static create(opts: PopoverTriggerStateOpts) {
@@ -147,14 +138,17 @@ export class PopoverTriggerState {
 	readonly root: PopoverRootState;
 	readonly attachment: RefAttachment;
 
-	#openTimer = createEffectTimeout(() => this.root.handleHoverOpen(), () => this.opts.openDelay.current);
+	#openTimer = createEffectTimeout(() => this.root.handleHoverOpen(), () => this.opts.openDelay);
 	#isHovering = $state(false);
 	#wasOpenOnPointerDown = false;
 
 	constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => (this.root.triggerNode = v),
+		);
 
 		this.onclick = this.onclick.bind(this);
 		this.onkeydown = this.onkeydown.bind(this);
@@ -162,20 +156,20 @@ export class PopoverTriggerState {
 		this.onpointerenter = this.onpointerenter.bind(this);
 		this.onpointerleave = this.onpointerleave.bind(this);
 
-		this.root.setCloseDelaySource(this.opts.closeDelay);
+		this.root.setCloseDelaySource(() => opts.closeDelay);
 	}
 
 	onpointerenter(e: BitsPointerEvent) {
-		if (this.opts.disabled.current) return;
-		if (!this.opts.openOnHover.current) return;
+		if (this.opts.disabled) return;
+		if (!this.opts.openOnHover) return;
 		if (e.pointerType === 'touch') return;
 
 		this.#isHovering = true;
 		this.root.cancelDelayedClose();
 
-		if (this.root.opts.open.current || this.root.hoverCooldown) return;
+		if (this.root.opts.open || this.root.hoverCooldown) return;
 
-		if (this.opts.openDelay.current <= 0) {
+		if (this.opts.openDelay <= 0) {
 			this.root.handleHoverOpen();
 			return;
 		}
@@ -184,8 +178,8 @@ export class PopoverTriggerState {
 	}
 
 	onpointerleave(e: BitsPointerEvent) {
-		if (this.opts.disabled.current) return;
-		if (!this.opts.openOnHover.current) return;
+		if (this.opts.disabled) return;
+		if (!this.opts.openOnHover) return;
 		if (e.pointerType === 'touch') return;
 
 		this.#isHovering = false;
@@ -197,24 +191,24 @@ export class PopoverTriggerState {
 	}
 
 	onpointerdown(_: BitsPointerEvent) {
-		this.#wasOpenOnPointerDown = this.root.opts.open.current;
+		this.#wasOpenOnPointerDown = this.root.opts.open;
 	}
 
 	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.button !== 0) return;
 
 		this.#openTimer.stop();
 
 		// On engines without showPopover({source})'s invoker exemption, the UA light-dismisses the auto
 		// popover at pointerdown — before this click — and the toggle below would instantly reopen it.
-		if (this.#wasOpenOnPointerDown && !this.root.opts.open.current) {
+		if (this.#wasOpenOnPointerDown && !this.root.opts.open) {
 			this.#wasOpenOnPointerDown = false;
 			return;
 		}
 
 		// if clicked while hovering and popover is open, convert to click-based open
-		if (this.#isHovering && this.root.opts.open.current && this.root.openedViaHover) {
+		if (this.#isHovering && this.root.opts.open && this.root.openedViaHover) {
 			this.root.openedViaHover = false;
 			this.root.hasInteractedWithContent = true;
 			return;
@@ -222,12 +216,12 @@ export class PopoverTriggerState {
 
 		// if closing while hovering with openOnHover enabled, set cooldown to prevent
 		// immediate re-open via hover
-		if (this.#isHovering && this.opts.openOnHover.current && this.root.opts.open.current) {
+		if (this.#isHovering && this.opts.openOnHover && this.root.opts.open) {
 			this.root.hoverCooldown = true;
 		}
 
 		// if clicking to open while in cooldown, reset cooldown (explicit open)
-		if (this.root.hoverCooldown && !this.root.opts.open.current) {
+		if (this.root.hoverCooldown && !this.root.opts.open) {
 			this.root.hoverCooldown = false;
 		}
 
@@ -235,7 +229,7 @@ export class PopoverTriggerState {
 	}
 
 	onkeydown(e: BitsKeyboardEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (!(e.key === kbd.ENTER || e.key === kbd.SPACE)) return;
 		e.preventDefault();
 		this.#openTimer.stop();
@@ -243,7 +237,7 @@ export class PopoverTriggerState {
 	}
 
 	#getAriaControls(): string | undefined {
-		if (this.root.opts.open.current && this.root.contentNode?.id) {
+		if (this.root.opts.open && this.root.contentNode?.id) {
 			return this.root.contentNode?.id;
 		}
 	}
@@ -251,13 +245,13 @@ export class PopoverTriggerState {
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				'aria-haspopup': 'dialog',
-				'aria-expanded': boolToStr(this.root.opts.open.current),
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
+				'aria-expanded': boolToStr(this.root.opts.open),
+				'data-state': getDataOpenClosed(this.root.opts.open),
 				'aria-controls': this.#getAriaControls(),
 				[popoverAttrs.trigger]: '',
-				disabled: this.opts.disabled.current,
+				disabled: this.opts.disabled,
 				//
 				onkeydown: this.onkeydown,
 				onclick: this.onclick,
@@ -269,12 +263,9 @@ export class PopoverTriggerState {
 	);
 }
 
-interface PopoverContentStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			customAnchor: string | HTMLElement | null | Measurable;
-		}> {}
+interface PopoverContentStateOpts extends RefOpts {
+	readonly customAnchor: string | HTMLElement | null | Measurable;
+}
 
 export class PopoverContentState {
 	static create(opts: PopoverContentStateOpts) {
@@ -288,7 +279,10 @@ export class PopoverContentState {
 	constructor(opts: PopoverContentStateOpts, root: PopoverRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => (this.root.contentNode = v),
+		);
 
 		this.onpointerdown = this.onpointerdown.bind(this);
 		this.onfocusin = this.onfocusin.bind(this);
@@ -298,7 +292,7 @@ export class PopoverContentState {
 		new SafePolygon({
 			triggerNode: () => this.root.triggerNode,
 			contentNode: () => this.root.contentNode,
-			enabled: () => this.root.opts.open.current && this.root.openedViaHover && !this.root.hasInteractedWithContent,
+			enabled: () => this.root.opts.open && this.root.openedViaHover && !this.root.hasInteractedWithContent,
 			onPointerExit: () => {
 				this.root.handleDelayedHoverClose();
 			},
@@ -331,14 +325,14 @@ export class PopoverContentState {
 		this.root.handleClose();
 	};
 
-	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open }));
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				tabindex: -1,
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
+				'data-state': getDataOpenClosed(this.root.opts.open),
 				[popoverAttrs.content]: '',
 				onpointerdown: this.onpointerdown,
 				onfocusin: this.onfocusin,
@@ -349,7 +343,7 @@ export class PopoverContentState {
 	);
 }
 
-interface PopoverCloseStateOpts extends WithRefOpts {}
+interface PopoverCloseStateOpts extends RefOpts {}
 
 export class PopoverCloseState {
 	static create(opts: PopoverCloseStateOpts) {
@@ -363,7 +357,7 @@ export class PopoverCloseState {
 	constructor(opts: PopoverCloseStateOpts, root: PopoverRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.onclick = this.onclick.bind(this);
 		this.onkeydown = this.onkeydown.bind(this);
 	}
@@ -381,7 +375,7 @@ export class PopoverCloseState {
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				onclick: this.onclick,
 				onkeydown: this.onkeydown,
 				type: 'button',

package/src/lib/components/progress/components/progress.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { ProgressRootProps } from '../types.js';
 	import { getProgressPercent, ProgressRootState } from '../progress.svelte.js';
@@ -19,14 +18,24 @@
 	}: ProgressRootProps = $props();
 
 	const rootState = ProgressRootState.create({
-		value: boxWith(() => value),
-		max: boxWith(() => max),
-		min: boxWith(() => min),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get value() {
+			return value;
+		},
+		get max() {
+			return max;
+		},
+		get min() {
+			return min;
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/progress/progress.svelte.ts

@@ -1,6 +1,6 @@
-import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import { createBitsAttrs } from '../../internal/attrs.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { RefAttachment, RefOpts } from '../../internal/types.js';
 
 const progressAttrs = createBitsAttrs({
 	component: 'progress',
@@ -14,14 +14,11 @@ export function getProgressPercent(value: number | null, min: number, max: numbe
 	return Math.min(100, Math.max(0, ((value - min) / range) * 100));
 }
 
-interface ProgressRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: number | null;
-			max: number;
-			min: number;
-		}> {}
+interface ProgressRootStateOpts extends RefOpts {
+	readonly value: number | null;
+	readonly max: number;
+	readonly min: number;
+}
 
 export class ProgressRootState {
 	static create(opts: ProgressRootStateOpts) {
@@ -33,23 +30,23 @@ export class ProgressRootState {
 
 	constructor(opts: ProgressRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	readonly props = $derived.by(() => {
-		const value = this.opts.value.current;
-		const percent = getProgressPercent(value, this.opts.min.current, this.opts.max.current);
+		const { value, min, max } = this.opts;
+		const percent = getProgressPercent(value, min, max);
 		const isIndeterminate = value === null;
 		return {
 			role: 'progressbar',
 			value,
-			'aria-valuemin': this.opts.min.current,
-			'aria-valuemax': this.opts.max.current,
+			'aria-valuemin': min,
+			'aria-valuemax': max,
 			'aria-valuenow': isIndeterminate ? undefined : value,
 			'data-value': isIndeterminate ? undefined : value,
 			'data-state': value === null ? 'indeterminate' : percent === 100 ? 'loaded' : 'loading',
-			'data-max': this.opts.max.current,
-			'data-min': this.opts.min.current,
+			'data-max': max,
+			'data-min': min,
 			'data-indeterminate': isIndeterminate ? '' : undefined,
 			[progressAttrs.root]: '',
 			...this.attachment,

package/src/lib/components/scroll-area/scroll-area.svelte.ts

@@ -7,14 +7,14 @@
 
 import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
 import { createContext, getAbortSignal, untrack } from 'svelte';
-import { simpleBox, attachRef, DOMContext, getWindow, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef, DOMContext, getWindow, type ReadableBoxedValues } from '../../internal/tools/index.js';
 import type { ScrollAreaType } from './types.js';
 import type { BitsPointerEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
 import { type Direction, type Orientation, mergeProps } from '../../internal/index.js';
 import { createId } from '../../internal/create-id.js';
 import { on } from 'svelte/events';
 import { createBitsAttrs } from '../../internal/attrs.js';
-import { StateMachine } from '../../internal/state-machine.js';
+import { StateMachine } from '../../internal/state-machine.svelte.js';
 import { observeResizeMany } from '../../internal/svelte-resize-observer.svelte.js';
 
 const scrollAreaAttrs = createBitsAttrs({
@@ -97,14 +97,13 @@ export class ScrollAreaViewportState {
 	readonly opts: ScrollAreaViewportStateOpts;
 	readonly root: ScrollAreaRootState;
 	readonly attachment: RefAttachment;
-	#contentId = simpleBox('');
-	#contentRef = simpleBox<HTMLElement | null>(null);
-	readonly contentAttachment: RefAttachment = attachRef(this.#contentRef, (v) => (this.root.contentNode = v));
+	readonly #contentId: string;
+	readonly contentAttachment: RefAttachment = attachRef((v) => (this.root.contentNode = v));
 
 	constructor(opts: ScrollAreaViewportStateOpts, root: ScrollAreaRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.#contentId.current = createId('content', opts.id.current);
+		this.#contentId = createId('content', opts.id.current);
 		this.attachment = attachRef(opts.ref, (v) => (this.root.viewportNode = v));
 	}
 
@@ -124,7 +123,7 @@ export class ScrollAreaViewportState {
 	readonly contentProps = $derived.by(
 		() =>
 			({
-				id: this.#contentId.current,
+				id: this.#contentId,
 				'data-scroll-area-content': '',
 				/**
 				 * When horizontal scrollbar is visible: this element should be at least
@@ -252,7 +251,7 @@ export class ScrollAreaScrollbarScrollState {
 			POINTER_ENTER: 'interacting',
 		},
 	});
-	readonly isHidden = $derived.by(() => this.machine.state.current === 'hidden');
+	readonly isHidden = $derived.by(() => this.machine.state === 'hidden');
 
 	constructor(scrollbar: ScrollAreaScrollbarState) {
 		this.scrollbar = scrollbar;
@@ -261,7 +260,7 @@ export class ScrollAreaScrollbarScrollState {
 		const debounceScrollend = createEffectTimeout(() => this.machine.dispatch('SCROLL_END'), () => 100);
 
 		$effect(() => {
-			const _state = this.machine.state.current;
+			const _state = this.machine.state;
 			const scrollHideDelay = this.root.opts.scrollHideDelay.current;
 			if (_state === 'idle') {
 				const hideTimer = this.root.domContext.setTimeout(() => this.machine.dispatch('HIDE'), scrollHideDelay);
@@ -304,7 +303,7 @@ export class ScrollAreaScrollbarScrollState {
 	readonly props = $derived.by(
 		() =>
 			({
-				'data-state': this.machine.state.current === 'hidden' ? 'hidden' : 'visible',
+				'data-state': this.machine.state === 'hidden' ? 'hidden' : 'visible',
 				onpointerenter: this.onpointerenter,
 				onpointerleave: this.onpointerleave,
 			}) as const,

package/src/lib/components/separator/components/separator.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import { SeparatorRootState } from '../separator.svelte.js';
 	import type { SeparatorRootProps } from '../types.js';
@@ -18,13 +17,21 @@
 	}: SeparatorRootProps = $props();
 
 	const rootState = SeparatorRootState.create({
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		id: boxWith(() => id),
-		decorative: boxWith(() => decorative),
-		orientation: boxWith(() => orientation),
+		get id() {
+			return id;
+		},
+		get decorative() {
+			return decorative;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/separator/separator.svelte.ts

@@ -1,6 +1,6 @@
-import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import { createBitsAttrs, boolToStrTrueOrUndef } from '../../internal/attrs.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { RefAttachment, RefOpts } from '../../internal/types.js';
 import type { Orientation } from '../../internal/index.js';
 
 const separatorAttrs = createBitsAttrs({
@@ -8,13 +8,10 @@ const separatorAttrs = createBitsAttrs({
 	parts: ['root'],
 });
 
-interface SeparatorRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			orientation: Orientation;
-			decorative: boolean;
-		}> {}
+interface SeparatorRootStateOpts extends RefOpts {
+	readonly orientation: Orientation;
+	readonly decorative: boolean;
+}
 
 export class SeparatorRootState {
 	static create(opts: SeparatorRootStateOpts) {
@@ -25,17 +22,17 @@ export class SeparatorRootState {
 
 	constructor(opts: SeparatorRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				role: this.opts.decorative.current ? 'none' : 'separator',
-				'aria-orientation': this.opts.orientation.current,
-				'aria-hidden': boolToStrTrueOrUndef(this.opts.decorative.current),
-				'data-orientation': this.opts.orientation.current,
+				id: this.opts.id,
+				role: this.opts.decorative ? 'none' : 'separator',
+				'aria-orientation': this.opts.orientation,
+				'aria-hidden': boolToStrTrueOrUndef(this.opts.decorative),
+				'data-orientation': this.opts.orientation,
 				[separatorAttrs.root]: '',
 				...this.attachment,
 			}) as const,

package/src/lib/components/sidebar/sidebar-mobile-surface.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import * as Sheet from '../sheet/index.js';
-	import { boxWith } from '../../internal/tools/index.js';
 	import { DialogRootState, DialogState } from '../dialog/dialog.svelte.js';
 	import { join } from 'overrule';
 	import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
@@ -32,9 +31,14 @@
 	});
 
 	DialogRootState.create({
-		variant: boxWith(() => 'dialog'),
-		cell: sheetCell,
-		onOpenChangeComplete: boxWith(() => () => {}),
+		variant: 'dialog',
+		get open() {
+			return sheetCell.open;
+		},
+		set open(v) {
+			sheetCell.open = v;
+		},
+		onOpenChangeComplete: () => {},
 	});
 </script>
 

package/src/lib/components/slider/components/slider.svelte

@@ -34,7 +34,8 @@
 	}: SliderRootProps = $props();
 
 	// Slider mode is construction-static: the root state chooses a single/multiple class once.
-	const valueType = untrack(() => type);
+	// svelte-ignore state_referenced_locally
+	const valueType = type;
 
 	const min = $derived.by(() => {
 		if (minProp !== undefined) return minProp;

package/src/lib/components/tabs/components/tabs-content.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TabsContentProps } from '../types.js';
 	import { TabsContentState } from '../tabs.svelte.js';
@@ -10,12 +9,18 @@
 	let { children, child, id = createId(uid), ref = $bindable(null), value, ...restProps }: TabsContentProps = $props();
 
 	const contentState = TabsContentState.create({
-		value: boxWith(() => value),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get value() {
+			return value;
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'tabs-content', class: 'flex-1 outline-none' }, restProps, contentState.props));