sheer-ui 0.4.0 → 0.4.3

package/src/lib/components/pagination/components/pagination-next-button.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { PaginationNextButtonProps } from '../types.js';
 	import { PaginationButtonState } from '../pagination.svelte.js';
@@ -21,12 +20,18 @@
 
 	const nextButtonState = PaginationButtonState.create({
 		type: 'next',
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		disabled: boxWith(() => Boolean(disabled)),
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return Boolean(disabled);
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/pagination/components/pagination-page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { PaginationPageProps } from '../types.js';
 	import { PaginationPageState } from '../pagination.svelte.js';
@@ -25,13 +24,21 @@
 		} = $props();
 
 	const pageState = PaginationPageState.create({
-		id: boxWith(() => id),
-		page: boxWith(() => page),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		disabled: boxWith(() => Boolean(disabled)),
+		get id() {
+			return id;
+		},
+		get page() {
+			return page;
+		},
+		get disabled() {
+			return Boolean(disabled);
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/pagination/components/pagination-prev-button.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { PaginationPrevButtonProps } from '../types.js';
 	import { PaginationButtonState } from '../pagination.svelte.js';
@@ -21,12 +20,18 @@
 
 	const prevButtonState = PaginationButtonState.create({
 		type: 'prev',
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		disabled: boxWith(() => Boolean(disabled)),
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return Boolean(disabled);
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/pagination/components/pagination.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { PaginationRootProps } from '../types.js';
 	import { PaginationRootState } from '../pagination.svelte.js';
@@ -23,23 +22,37 @@
 	}: PaginationRootProps = $props();
 
 	const rootState = PaginationRootState.create({
-		id: boxWith(() => id),
-		count: boxWith(() => count),
-		perPage: boxWith(() => perPage),
-		page: boxWith(
-			() => page,
-			(v) => {
-				page = v;
-				onPageChange?.(v);
-			},
-		),
-		loop: boxWith(() => loop),
-		siblingCount: boxWith(() => siblingCount),
-		orientation: boxWith(() => orientation),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get count() {
+			return count;
+		},
+		get perPage() {
+			return perPage;
+		},
+		get page() {
+			return page;
+		},
+		set page(v) {
+			page = v;
+			onPageChange?.(v);
+		},
+		get loop() {
+			return loop;
+		},
+		get siblingCount() {
+			return siblingCount;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

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

@@ -1,10 +1,10 @@
 import { createContext } from 'svelte';
-import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import type { Page, PageItem } from './types.js';
-import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, RefOpts } from '../../internal/types.js';
 import { createBitsAttrs } from '../../internal/attrs.js';
 import { kbd } from '../../internal/kbd.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 import { type Orientation } from '../../internal/index.js';
 
 const paginationAttrs = createBitsAttrs({
@@ -14,19 +14,14 @@ const paginationAttrs = createBitsAttrs({
 
 const [getPaginationRoot, setPaginationRoot] = createContext<PaginationRootState>();
 
-interface PaginationRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			count: number;
-			perPage: number;
-			siblingCount: number;
-			orientation: Orientation;
-			loop: boolean;
-		}>,
-		WritableBoxedValues<{
-			page: number;
-		}> {}
+interface PaginationRootStateOpts extends RefOpts {
+	readonly count: number;
+	readonly perPage: number;
+	readonly siblingCount: number;
+	readonly orientation: Orientation;
+	readonly loop: boolean;
+	page: number;
+}
 
 export class PaginationRootState {
 	static create(opts: PaginationRootStateOpts) {
@@ -35,73 +30,66 @@ export class PaginationRootState {
 	readonly opts: PaginationRootStateOpts;
 	readonly attachment: RefAttachment;
 	readonly totalPages = $derived.by(() => {
-		if (this.opts.count.current === 0) return 1;
-		return Math.ceil(this.opts.count.current / this.opts.perPage.current);
+		if (this.opts.count === 0) return 1;
+		return Math.ceil(this.opts.count / this.opts.perPage);
 	});
 	readonly range = $derived.by(() => {
-		const start = (this.opts.page.current - 1) * this.opts.perPage.current;
-		const end = Math.min(start + this.opts.perPage.current, this.opts.count.current);
+		const start = (this.opts.page - 1) * this.opts.perPage;
+		const end = Math.min(start + this.opts.perPage, this.opts.count);
 		return { start: start + 1, end };
 	});
 	readonly pages = $derived.by(() =>
 		getPageItems({
-			page: this.opts.page.current,
+			page: this.opts.page,
 			totalPages: this.totalPages,
-			siblingCount: this.opts.siblingCount.current,
+			siblingCount: this.opts.siblingCount,
 		}),
 	);
-	readonly hasPrevPage = $derived.by(() => this.opts.page.current > 1);
-	readonly hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
+	readonly hasPrevPage = $derived.by(() => this.opts.page > 1);
+	readonly hasNextPage = $derived.by(() => this.opts.page < this.totalPages);
 
 	readonly rovingFocusGroup: RovingFocusGroup;
 
 	constructor(opts: PaginationRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.rovingFocusGroup = new RovingFocusGroup({
 			candidateSelector: [paginationAttrs.selector('prev'), paginationAttrs.selector('page'), paginationAttrs.selector('next')].join(', '),
-			rootNode: this.opts.ref,
-			loop: this.opts.loop,
-			orientation: this.opts.orientation,
+			rootNode: () => opts.ref,
+			loop: () => opts.loop,
+			orientation: () => opts.orientation,
 		});
 	}
 
-	setPage(page: number) {
-		this.opts.page.current = page;
-	}
-
 	prevPage() {
-		this.opts.page.current = Math.max(this.opts.page.current - 1, 1);
+		this.opts.page = Math.max(this.opts.page - 1, 1);
 	}
 
 	nextPage() {
-		this.opts.page.current = Math.min(this.opts.page.current + 1, this.totalPages);
+		this.opts.page = Math.min(this.opts.page + 1, this.totalPages);
 	}
 
 	readonly snippetProps = $derived.by(() => ({
 		pages: this.pages,
 		range: this.range,
-		currentPage: this.opts.page.current,
+		currentPage: this.opts.page,
 	}));
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				'data-orientation': this.opts.orientation.current,
+				id: this.opts.id,
+				'data-orientation': this.opts.orientation,
 				[paginationAttrs.root]: '',
 				...this.attachment,
 			}) as const,
 	);
 }
 
-interface PaginationPageStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			page: Page;
-			disabled: boolean;
-		}> {}
+interface PaginationPageStateOpts extends RefOpts {
+	readonly page: Page;
+	readonly disabled: boolean;
+}
 
 export class PaginationPageState {
 	static create(opts: PaginationPageStateOpts) {
@@ -110,38 +98,38 @@ export class PaginationPageState {
 	readonly opts: PaginationPageStateOpts;
 	readonly root: PaginationRootState;
 	readonly attachment: RefAttachment;
-	readonly #isSelected = $derived.by(() => this.opts.page.current.value === this.root.opts.page.current);
+	readonly #isSelected = $derived.by(() => this.opts.page.value === this.root.opts.page);
 
 	constructor(opts: PaginationPageStateOpts, root: PaginationRootState) {
 		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);
 	}
 
 	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.button !== 0) return;
-		this.root.setPage(this.opts.page.current.value);
+		this.root.opts.page = this.opts.page.value;
 	}
 
 	onkeydown(e: BitsKeyboardEvent) {
 		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
 			e.preventDefault();
-			this.root.setPage(this.opts.page.current.value);
+			this.root.opts.page = this.opts.page.value;
 		} else {
-			this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+			this.root.rovingFocusGroup.handleKeydown(this.opts.ref, e);
 		}
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				'aria-label': `Page ${this.opts.page.current.value}`,
-				'data-value': `${this.opts.page.current.value}`,
+				id: this.opts.id,
+				'aria-label': `Page ${this.opts.page.value}`,
+				'data-value': `${this.opts.page.value}`,
 				'data-selected': this.#isSelected ? '' : undefined,
 				[paginationAttrs.page]: '',
 				//
@@ -156,12 +144,8 @@ export class PaginationPageState {
 // NEXT/PREV BUTTON
 //
 
-interface PaginationButtonStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-		}> {
+interface PaginationButtonStateOpts extends RefOpts {
+	readonly disabled: boolean;
 	type: 'prev' | 'next';
 }
 
@@ -176,7 +160,7 @@ export class PaginationButtonState {
 	constructor(opts: PaginationButtonStateOpts, root: PaginationRootState) {
 		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);
@@ -187,14 +171,14 @@ export class PaginationButtonState {
 	}
 
 	readonly #isDisabled = $derived.by(() => {
-		if (this.opts.disabled.current) return true;
+		if (this.opts.disabled) return true;
 		if (this.opts.type === 'prev') return !this.root.hasPrevPage;
 		if (this.opts.type === 'next') return !this.root.hasNextPage;
 		return false;
 	});
 
 	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.button !== 0) return;
 		this.#action();
 	}
@@ -204,14 +188,14 @@ export class PaginationButtonState {
 			e.preventDefault();
 			this.#action();
 		} else {
-			this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+			this.root.rovingFocusGroup.handleKeydown(this.opts.ref, e);
 		}
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				[paginationAttrs[this.opts.type]]: '',
 				disabled: this.#isDisabled,
 				//

package/src/lib/components/pin-input/pin-input.svelte.ts

@@ -5,7 +5,6 @@ import {
 	DOMContext,
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
-	simpleBox,
 } from '../../internal/tools/index.js';
 import { usePasswordManagerBadge } from './usePasswordManager.svelte.js';
 import type { PinInputCell, PinInputRootProps as RootComponentProps } from './types.js';
@@ -80,7 +79,7 @@ export class PinInputRootState {
 	readonly attachment: RefAttachment;
 	readonly inputAttachment: RefAttachment<HTMLInputElement>;
 	#isHoveringInput = $state(false);
-	#isFocused = simpleBox(false);
+	isFocused = $state(false);
 	#mirrorSelectionStart = $state<number | null>(null);
 	#mirrorSelectionEnd = $state<number | null>(null);
 
@@ -129,7 +128,7 @@ export class PinInputRootState {
 		this.#pwmb = usePasswordManagerBadge({
 			containerRef: this.opts.ref,
 			inputRef: this.opts.inputRef,
-			isFocused: this.#isFocused,
+			isFocused: () => this.isFocused,
 			pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
 			domContext: this.domContext,
 		});
@@ -152,7 +151,7 @@ export class PinInputRootState {
 
 			this.#onDocumentSelectionChange();
 			if (this.domContext.getActiveElement() === input) {
-				this.#isFocused.current = true;
+				this.isFocused = true;
 			}
 
 			if (!this.domContext.getElementById('pin-input-style')) {
@@ -386,7 +385,7 @@ export class PinInputRootState {
 			this.#mirrorSelectionStart = start;
 			this.#mirrorSelectionEnd = end;
 		}
-		this.#isFocused.current = true;
+		this.isFocused = true;
 	};
 
 	onpaste = (e: BitsEvent<ClipboardEvent>) => {
@@ -440,7 +439,7 @@ export class PinInputRootState {
 			this.#prevInputMetadata.willSyntheticBlur = false;
 			return;
 		}
-		this.#isFocused.current = false;
+		this.isFocused = false;
 	};
 
 	readonly inputProps = $derived.by(() => ({
@@ -469,7 +468,7 @@ export class PinInputRootState {
 	readonly #cells = $derived.by(() =>
 		Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
 			const isActive =
-				this.#isFocused.current &&
+				this.isFocused &&
 				this.#mirrorSelectionStart !== null &&
 				this.#mirrorSelectionEnd !== null &&
 				((this.#mirrorSelectionStart === this.#mirrorSelectionEnd && idx === this.#mirrorSelectionStart) ||
@@ -487,7 +486,7 @@ export class PinInputRootState {
 
 	readonly snippetProps = $derived.by(() => ({
 		cells: this.#cells,
-		isFocused: this.#isFocused.current,
+		isFocused: this.isFocused,
 		isHovering: this.#isHoveringInput,
 	}));
 }

package/src/lib/components/pin-input/usePasswordManager.svelte.ts

@@ -16,7 +16,7 @@ type UsePasswordManagerBadgeProps = {
 	containerRef: WritableBox<HTMLElement | null>;
 	inputRef: WritableBox<HTMLInputElement | null>;
 	pushPasswordManagerStrategy: ReadableBox<PinInputRootPropsWithoutHTML['pushPasswordManagerStrategy']>;
-	isFocused: ReadableBox<boolean>;
+	isFocused: () => boolean;
 	domContext: DOMContext;
 };
 
@@ -91,7 +91,7 @@ export function usePasswordManagerBadge({
 	});
 
 	$effect(() => {
-		const focused = isFocused.current || domContext.getActiveElement() === inputRef.current;
+		const focused = isFocused() || domContext.getActiveElement() === inputRef.current;
 
 		if (pushPasswordManagerStrategy.current === 'none' || !focused) return;
 

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>