sheer-ui 0.4.2 → 0.4.3

package/src/lib/internal/escape-layer/use-escape-layer.svelte.ts

@@ -1,28 +1,21 @@
-import {
-	DOMContext,
-	boxWith,
-	type Box,
-	type Getter,
-	type ReadableBox,
-	type ReadableBoxedValues,
-	type RefAttachment,
-} from '../tools/index.js';
+import { DOMContext, type Getter, type RefAttachment } from '../tools/index.js';
 import { untrack } from 'svelte';
 import { on } from 'svelte/events';
 import { createAttachmentKey } from 'svelte/attachments';
-import type { EscapeBehaviorType, EscapeLayerImplProps } from './types.js';
+import type { EscapeBehaviorType } from './types.js';
 import { kbd } from '../kbd.js';
 import { createLayerStack } from '../layer-stack.js';
 import { globalSingleton } from '../global-singleton.js';
 
 const escapeLayers = globalSingleton('bitsEscapeLayers', () =>
-	createLayerStack<EscapeLayerState, ReadableBox<EscapeBehaviorType>>(
-		(box) => box.current === 'close' || box.current === 'ignore',
-	),
+	createLayerStack<EscapeLayerState, Getter<EscapeBehaviorType>>((behavior) => behavior() === 'close' || behavior() === 'ignore'),
 );
 
-interface EscapeLayerStateOpts extends ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, 'children' | 'ref'>>> {
-	ref: Box<HTMLElement | null>;
+interface EscapeLayerStateOpts {
+	escapeKeydownBehavior: Getter<EscapeBehaviorType>;
+	onEscapeKeydown: Getter<(e: KeyboardEvent) => void>;
+	enabled: Getter<boolean>;
+	ref: Getter<HTMLElement | null>;
 }
 
 export class EscapeLayerState {
@@ -34,10 +27,10 @@ export class EscapeLayerState {
 
 	constructor(opts: EscapeLayerStateOpts) {
 		this.opts = opts;
-		this.domContext = new DOMContext(this.opts.ref);
+		this.domContext = new DOMContext(opts.ref);
 
 		$effect(() => {
-			if (!opts.enabled.current) return;
+			if (!opts.enabled()) return;
 
 			const unsubEvents = untrack(() => {
 				escapeLayers.register(this, opts.escapeKeydownBehavior);
@@ -55,9 +48,9 @@ export class EscapeLayerState {
 		if (e.key !== kbd.ESCAPE || !escapeLayers.isResponsible(this)) return;
 		const clonedEvent = new KeyboardEvent(e.type, e);
 		e.preventDefault();
-		const behaviorType = this.opts.escapeKeydownBehavior.current;
+		const behaviorType = this.opts.escapeKeydownBehavior();
 		if (behaviorType !== 'close' && behaviorType !== 'defer-otherwise-close') return;
-		this.opts.onEscapeKeydown.current(clonedEvent);
+		this.opts.onEscapeKeydown()(clonedEvent);
 	};
 }
 
@@ -76,16 +69,7 @@ export function escapeKeydownAttachment(opts: {
 }): RefAttachment<HTMLElement> {
 	return {
 		[createAttachmentKey()]: (node) => {
-			EscapeLayerState.create({
-				escapeKeydownBehavior: boxWith(opts.escapeKeydownBehavior),
-				onEscapeKeydown: boxWith(opts.onEscapeKeydown),
-				enabled: boxWith(opts.enabled),
-				// The state only reads the ref (to resolve the owner document), so a no-op setter is fine.
-				ref: boxWith(
-					() => node,
-					() => {},
-				),
-			});
+			EscapeLayerState.create({ ...opts, ref: () => node });
 		},
 	};
 }

package/src/lib/internal/group-value.svelte.ts

@@ -1,13 +1,14 @@
 import { untrack } from 'svelte';
-import type { ReadableBox, WritableBox } from './tools/index.js';
 
+/** The group's bindable value, as an accessor on the group's options. */
 interface GroupValue {
-	opts: { value: WritableBox<string[]> };
+	value: string[];
 }
 
+/** The item's `value` and `checked` as accessors over its props. */
 interface GroupItem {
-	value: ReadableBox<string | undefined>;
-	checked: WritableBox<boolean>;
+	readonly value: string | undefined;
+	readonly checked: boolean;
 }
 
 /**
@@ -20,17 +21,17 @@ export function joinGroup(group: GroupValue | null, item: GroupItem): () => bool
 	if (!group) return () => undefined;
 
 	$effect(() => {
-		const checked = item.checked.current;
+		const checked = item.checked;
 		untrack(() => {
-			const value = item.value.current;
-			const values = group.opts.value.current;
+			const value = item.value;
+			const values = group.value;
 			if (!value || checked === values.includes(value)) return;
-			group.opts.value.current = checked ? [...values, value] : values.filter((v) => v !== value);
+			group.value = checked ? [...values, value] : values.filter((v) => v !== value);
 		});
 	});
 
 	return () => {
-		const value = item.value.current;
-		return value ? group.opts.value.current.includes(value) : undefined;
+		const value = item.value;
+		return value ? group.value.includes(value) : undefined;
 	};
 }

package/src/lib/internal/native-popover.svelte.ts

@@ -18,13 +18,13 @@ type NativePopoverAnchor = HTMLElement | string | null | undefined | object;
 interface NativePopoverContentState {
 	readonly root: {
 		readonly opts: {
-			readonly open: { readonly current: boolean };
-			readonly onOpenChangeComplete: { readonly current: (open: boolean) => void };
+			readonly open: boolean;
+			readonly onOpenChangeComplete: (open: boolean) => void;
 		};
 		readonly triggerNode: HTMLElement | null;
 	};
 	readonly opts: {
-		readonly ref: { readonly current: HTMLElement | null };
+		readonly ref: HTMLElement | null;
 	};
 	onEscapeKeydown?: (event: KeyboardEvent) => void;
 	onInteractOutside?: (event: PointerEvent) => void;
@@ -60,8 +60,8 @@ export function useNativePopoverLifecycle(
 	options: { anchor?: Getter<NativePopoverAnchor>; mode?: 'auto' | 'manual' } = {},
 ) {
 	const mode = options.mode ?? 'manual';
-	const ref = () => state.opts.ref.current;
-	const open = () => state.root.opts.open.current;
+	const ref = () => state.opts.ref;
+	const open = () => state.root.opts.open;
 
 	// The surface's own animations gate the deferred hide; a long-running descendant
 	// animation (a chart entry inside a popover) must not hold the top layer.
@@ -131,7 +131,7 @@ export function useNativePopoverLifecycle(
 		});
 	});
 
-	useOpenChangeComplete(open, ref, (isOpen) => state.root.opts.onOpenChangeComplete.current(isOpen));
+	useOpenChangeComplete(open, ref, (isOpen) => state.root.opts.onOpenChangeComplete(isOpen));
 
 	if (mode === 'auto') {
 		// The UA closes the popover itself (light dismiss, Escape, another auto popover opening);