sheer-ui 0.4.2 → 0.4.3

package/src/lib/components/link-preview/components/link-preview-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 { LinkPreviewContentProps } from '../types.js';
 	import { LinkPreviewContentState } from '../link-preview.svelte.js';
@@ -25,13 +24,21 @@
 	}: LinkPreviewContentProps = $props();
 
 	const contentState = LinkPreviewContentState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		onInteractOutside: boxWith(() => onInteractOutside),
-		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		get id() {
+			return id;
+		},
+		get onInteractOutside() {
+			return onInteractOutside;
+		},
+		get onEscapeKeydown() {
+			return onEscapeKeydown;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const lifecycleProps = useNativePopoverLifecycle(contentState);

package/src/lib/components/link-preview/components/link-preview-trigger.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { LinkPreviewTriggerProps } from '../types.js';
 	import { LinkPreviewTriggerState } from '../link-preview.svelte.js';
@@ -10,11 +9,15 @@
 	let { ref = $bindable(null), id = createId(uid), child, children, ...restProps }: LinkPreviewTriggerProps = $props();
 
 	const triggerState = LinkPreviewTriggerState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'hover-card-trigger' }, restProps, triggerState.props));

package/src/lib/components/link-preview/components/link-preview.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { OpenCell } from '../../../internal/open-cell.svelte.js';
 	import type { LinkPreviewRootProps } from '../types.js';
 	import { LinkPreviewRootState } from '../link-preview.svelte.js';
@@ -14,20 +13,29 @@
 		children,
 	}: LinkPreviewRootProps = $props();
 
-	// Cell over the source prop; the engine keeps its boxed-open interface (vendored,
-	// ADR 0006) — the box is a bridge over the cell, so the cell owns `open`.
+	// Cell over the source prop; the cell owns `open`, the engine reads and writes it through it.
 	// svelte-ignore state_referenced_locally
 	const cell = givenCell ?? new OpenCell(() => open);
 
 	LinkPreviewRootState.create({
-		disabled: boxWith(() => disabled),
-		open: boxWith(
-			() => cell.open,
-			(v) => (cell.open = v),
-		),
-		openDelay: boxWith(() => openDelay),
-		closeDelay: boxWith(() => closeDelay),
-		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+		get open() {
+			return cell.open;
+		},
+		set open(v) {
+			cell.open = v;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get openDelay() {
+			return openDelay;
+		},
+		get closeDelay() {
+			return closeDelay;
+		},
+		get onOpenChangeComplete() {
+			return onOpenChangeComplete;
+		},
 	});
 </script>
 

package/src/lib/components/link-preview/link-preview.svelte.ts

@@ -1,9 +1,9 @@
-import { attachRef, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef, DOMContext } from '../../internal/tools/index.js';
 import { on } from 'svelte/events';
 import { createContext, onDestroy, untrack } from 'svelte';
 import { createBitsAttrs, boolToStr, getDataOpenClosed } from '../../internal/attrs.js';
 import { isElement } from '../../internal/tools/utils/dom.js';
-import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, RefOpts } from '../../internal/types.js';
 import { getTabbableCandidates } from '../../internal/tabbable.js';
 import { SafePolygon } from '../../internal/safe-polygon.svelte.js';
 import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
@@ -15,17 +15,13 @@ const linkPreviewAttrs = createBitsAttrs({
 
 const [getLinkPreviewRoot, setLinkPreviewRoot] = createContext<LinkPreviewRootState>();
 
-interface LinkPreviewRootStateOpts
-	extends
-		WritableBoxedValues<{
-			open: boolean;
-		}>,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			openDelay: number;
-			closeDelay: number;
-			onOpenChangeComplete: OnChangeFn<boolean>;
-		}> {}
+interface LinkPreviewRootStateOpts {
+	open: boolean;
+	readonly disabled: boolean;
+	readonly openDelay: number;
+	readonly closeDelay: number;
+	readonly onOpenChangeComplete: OnChangeFn<boolean>;
+}
 
 export class LinkPreviewRootState {
 	static create(opts: LinkPreviewRootStateOpts) {
@@ -41,17 +37,17 @@ export class LinkPreviewRootState {
 	triggerNode = $state<HTMLElement | null>(null);
 	domContext: DOMContext = new DOMContext(() => null);
 	#openTimer = createEffectTimeout(() => {
-		this.opts.open.current = true;
-	}, () => this.opts.openDelay.current);
+		this.opts.open = true;
+	}, () => this.opts.openDelay);
 	#closeTimer = createEffectTimeout(() => {
-		this.opts.open.current = false;
-	}, () => this.opts.closeDelay.current);
+		this.opts.open = false;
+	}, () => this.opts.closeDelay);
 
 	constructor(opts: LinkPreviewRootStateOpts) {
 		this.opts = opts;
 
 		$effect(() => {
-			const isOpen = this.opts.open.current;
+			const isOpen = this.opts.open;
 			return untrack(() => {
 				if (!isOpen) {
 					this.hasSelection = false;
@@ -99,13 +95,13 @@ export class LinkPreviewRootState {
 
 	handleOpen() {
 		this.clearTimeout();
-		if (this.opts.open.current || this.opts.disabled.current) return;
+		if (this.opts.open || this.opts.disabled) return;
 		this.#openTimer.start();
 	}
 
 	immediateClose() {
 		this.clearTimeout();
-		this.opts.open.current = false;
+		this.opts.open = false;
 	}
 
 	handleClose() {
@@ -117,7 +113,7 @@ export class LinkPreviewRootState {
 	}
 }
 
-interface LinkPreviewTriggerStateOpts extends WithRefOpts {}
+interface LinkPreviewTriggerStateOpts extends RefOpts {}
 
 export class LinkPreviewTriggerState {
 	static create(opts: LinkPreviewTriggerStateOpts) {
@@ -131,8 +127,11 @@ export class LinkPreviewTriggerState {
 	constructor(opts: LinkPreviewTriggerStateOpts, root: LinkPreviewRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
-		this.root.domContext = new DOMContext(opts.ref);
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => (this.root.triggerNode = v),
+		);
+		this.root.domContext = new DOMContext(() => opts.ref);
 		this.onpointerenter = this.onpointerenter.bind(this);
 		this.onpointerleave = this.onpointerleave.bind(this);
 		this.onfocus = this.onfocus.bind(this);
@@ -147,7 +146,7 @@ export class LinkPreviewTriggerState {
 	onpointerleave(e: BitsPointerEvent) {
 		if (e.pointerType === 'touch') return;
 		// The content is always mounted (native popover, display toggled), so open is the only gate.
-		if (!this.root.opts.open.current) {
+		if (!this.root.opts.open) {
 			this.root.immediateClose();
 		}
 	}
@@ -164,10 +163,10 @@ export class LinkPreviewTriggerState {
 	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.root.contentNode?.id,
 				role: 'button',
 				[linkPreviewAttrs.trigger]: '',
@@ -180,13 +179,10 @@ export class LinkPreviewTriggerState {
 	);
 }
 
-interface LinkPreviewContentStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			onInteractOutside: (e: PointerEvent) => void;
-			onEscapeKeydown: (e: KeyboardEvent) => void;
-		}> {}
+interface LinkPreviewContentStateOpts extends RefOpts {
+	readonly onInteractOutside: (e: PointerEvent) => void;
+	readonly onEscapeKeydown: (e: KeyboardEvent) => void;
+}
 
 export class LinkPreviewContentState {
 	static create(opts: LinkPreviewContentStateOpts) {
@@ -200,16 +196,19 @@ export class LinkPreviewContentState {
 	constructor(opts: LinkPreviewContentStateOpts, root: LinkPreviewRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
-		this.root.domContext = new DOMContext(opts.ref);
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => (this.root.contentNode = v),
+		);
+		this.root.domContext = new DOMContext(() => opts.ref);
 		this.onpointerdown = this.onpointerdown.bind(this);
 		this.onpointerenter = this.onpointerenter.bind(this);
 		this.onfocusout = this.onfocusout.bind(this);
 
 		new SafePolygon({
 			triggerNode: () => this.root.triggerNode,
-			contentNode: () => this.opts.ref.current,
-			enabled: () => this.root.opts.open.current,
+			contentNode: () => this.opts.ref,
+			enabled: () => this.root.opts.open,
 			onPointerExit: () => {
 				this.root.handleClose();
 			},
@@ -241,25 +240,25 @@ export class LinkPreviewContentState {
 	}
 
 	onInteractOutside = (e: PointerEvent) => {
-		this.opts.onInteractOutside.current(e);
+		this.opts.onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		this.root.handleClose();
 	};
 
 	onEscapeKeydown = (e: KeyboardEvent) => {
-		this.opts.onEscapeKeydown.current?.(e);
+		this.opts.onEscapeKeydown?.(e);
 		if (e.defaultPrevented) return;
 		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),
 				[linkPreviewAttrs.content]: '',
 				onpointerdown: this.onpointerdown,
 				onpointerenter: this.onpointerenter,

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

@@ -1139,7 +1139,26 @@ export class MenuCheckboxItemState {
 	constructor(opts: MenuItemCombinedProps & MenuCheckboxItemStateOpts, shared: MenuItemSharedState) {
 		this.opts = opts;
 		this.item = new MenuItemState(opts, shared, { closes: false, act: () => this.#toggle() });
-		this.groupChecked = joinGroup(hasMenuCheckboxGroup() ? getMenuCheckboxGroup() : null, opts);
+		// Accessor views over the boxed options until the menu engine converts.
+		const group = hasMenuCheckboxGroup() ? getMenuCheckboxGroup() : null;
+		this.groupChecked = joinGroup(
+			group && {
+				get value() {
+					return group.opts.value.current;
+				},
+				set value(v) {
+					group.opts.value.current = v;
+				},
+			},
+			{
+				get value() {
+					return opts.value.current;
+				},
+				get checked() {
+					return opts.checked.current;
+				},
+			},
+		);
 	}
 
 	#toggle() {

package/src/lib/components/meter/components/meter.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { MeterRootProps } from '../types.js';
 	import { MeterRootState } from '../meter.svelte.js';
@@ -19,14 +18,24 @@
 	}: MeterRootProps = $props();
 
 	const rootState = MeterRootState.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(mergeProps(restProps, rootState.props));

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

@@ -1,5 +1,5 @@
-import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { attachRef } from '../../internal/tools/index.js';
+import type { RefAttachment, RefOpts } from '../../internal/types.js';
 import { createBitsAttrs } from '../../internal/attrs.js';
 
 const meterAttrs = createBitsAttrs({
@@ -7,14 +7,11 @@ const meterAttrs = createBitsAttrs({
 	parts: ['root'],
 });
 
-interface MeterRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: number;
-			max: number;
-			min: number;
-		}> {}
+interface MeterRootStateOpts extends RefOpts {
+	readonly value: number;
+	readonly max: number;
+	readonly min: number;
+}
 
 export class MeterRootState {
 	static create(opts: MeterRootStateOpts) {
@@ -26,20 +23,20 @@ export class MeterRootState {
 
 	constructor(opts: MeterRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
 				role: 'meter',
-				value: this.opts.value.current,
-				'aria-valuemin': this.opts.min.current,
-				'aria-valuemax': this.opts.max.current,
-				'aria-valuenow': this.opts.value.current,
-				'data-value': this.opts.value.current,
-				'data-max': this.opts.max.current,
-				'data-min': this.opts.min.current,
+				value: this.opts.value,
+				'aria-valuemin': this.opts.min,
+				'aria-valuemax': this.opts.max,
+				'aria-valuenow': this.opts.value,
+				'data-value': this.opts.value,
+				'data-max': this.opts.max,
+				'data-min': this.opts.min,
 				[meterAttrs.root]: '',
 				...this.attachment,
 			}) as const,

package/src/lib/components/popover/components/popover-close.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { PopoverCloseProps } from '../types.js';
 	import { PopoverCloseState } from '../popover.svelte.js';
@@ -11,11 +10,15 @@
 	let { child, children, id = createId(uid), ref = $bindable(null), ...restProps }: PopoverCloseProps = $props();
 
 	const closeState = PopoverCloseState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(value) => (ref = value),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/popover/components/popover-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 { PopoverContentProps } from '../types.js';
 	import { PopoverContentState } from '../popover.svelte.js';
@@ -36,12 +35,18 @@
 	}: PopoverContentProps = $props();
 
 	const contentState = PopoverContentState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		customAnchor: boxWith(() => customAnchor),
+		get id() {
+			return id;
+		},
+		get customAnchor() {
+			return customAnchor;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const lifecycleProps = useNativePopoverLifecycle(contentState, { anchor: () => customAnchor, mode: 'auto' });

package/src/lib/components/popover/components/popover-trigger.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { PopoverTriggerProps } from '../types.js';
 	import { PopoverTriggerState } from '../popover.svelte.js';
@@ -21,15 +20,27 @@
 	}: PopoverTriggerProps = $props();
 
 	const triggerState = PopoverTriggerState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		disabled: boxWith(() => Boolean(disabled)),
-		openOnHover: boxWith(() => openOnHover),
-		openDelay: boxWith(() => openDelay),
-		closeDelay: boxWith(() => closeDelay),
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return Boolean(disabled);
+		},
+		get openOnHover() {
+			return openOnHover;
+		},
+		get openDelay() {
+			return openDelay;
+		},
+		get closeDelay() {
+			return closeDelay;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'popover-trigger' }, restProps, triggerState.props, { type }));

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

@@ -2,7 +2,6 @@
 	import type { PopoverRootProps } from '../types.js';
 	import { PopoverRootState } from '../popover.svelte.js';
 	import { OpenCell } from '../../../internal/open-cell.svelte.js';
-	import { boxWith } from '../../../internal/tools/index.js';
 
 	let { open = false, onOpenChangeComplete = () => {}, state, children }: PopoverRootProps = $props();
 
@@ -10,16 +9,18 @@
 	// derivation source, and the children snippet is the only way the cell leaves.
 	// A caller-built `state` cell (with its own source/writer) takes over both roles.
 	// The cell's identity is fixed at mount — swapping `state` later is not supported.
-	// The engine keeps its boxed-open interface (vendored, ADR 0006); the box is a
-	// bridge over the cell, so the cell stays the one owner of `open`.
 	// svelte-ignore state_referenced_locally
 	const popover = state ?? new OpenCell(() => open);
 	PopoverRootState.create({
-		open: boxWith(
-			() => popover.open,
-			(value) => (popover.open = value),
-		),
-		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+		get open() {
+			return popover.open;
+		},
+		set open(value) {
+			popover.open = value;
+		},
+		get onOpenChangeComplete() {
+			return onOpenChangeComplete;
+		},
 	});
 </script>