sheer-ui 0.4.0 → 0.4.2

package/src/lib/internal/selection.svelte.ts

@@ -1,83 +1,95 @@
-import type { ReadableBox, ReadableBoxedValues, WritableBox } from './tools/index.js';
 import { boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, getAriaChecked } from './attrs.js';
 import { kbd } from './kbd.js';
 import type { Orientation } from './index.js';
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from './types.js';
-import type { RovingFocusGroup } from './roving-focus-group.js';
+import type { BitsKeyboardEvent, BitsMouseEvent } from './types.js';
+import type { RovingFocusGroup } from './roving-focus-group.svelte.js';
 import { RovingFocusItem } from './roving-focus-item.svelte.js';
 
 export type SelectionType = 'single' | 'multiple';
 
-export const emptySelection = (type: SelectionType): string | string[] => (type === 'single' ? '' : []);
+export type Selection = string | string[];
+
+export const emptySelection = (type: SelectionType): Selection => (type === 'single' ? '' : []);
 
 /**
- * Membership over a bindable that is a string in single mode and a string array in multiple
- * mode. The mode is fixed at construction, so a write always keeps the shape the consumer's
- * prop was declared with.
+ * Membership over a consumer's bindable that is a string in single mode and a string array
+ * in multiple mode. `value` reads and writes the root's prop through the closures it was
+ * built with; the mode is fixed at construction, so `with` always keeps the declared shape.
  */
 export class SelectionValue {
 	readonly isMulti: boolean;
-	readonly #value: WritableBox<string | string[]>;
+	readonly #read: () => Selection;
+	readonly #write: (value: Selection) => void;
 
-	constructor(type: SelectionType, value: WritableBox<string | string[]>) {
+	constructor(type: SelectionType, read: () => Selection, write: (value: Selection) => void) {
 		this.isMulti = type === 'multiple';
-		this.#value = value;
+		this.#read = read;
+		this.#write = write;
+	}
+
+	get value(): Selection {
+		return this.#read();
+	}
+
+	set value(next: Selection) {
+		this.#write(next);
 	}
 
 	includes(item: string): boolean {
-		const value = this.#value.current;
+		const value = this.#read();
 		return this.isMulti ? (value as string[]).includes(item) : value === item;
 	}
 
-	/** Flips membership and returns whether the item is selected afterwards. */
-	toggle(item: string): boolean {
-		const selected = !this.includes(item);
-		if (this.isMulti) {
-			const value = this.#value.current as string[];
-			this.#value.current = selected ? [...value, item] : value.filter((v) => v !== item);
-		} else {
-			this.#value.current = selected ? item : '';
-		}
-		return selected;
+	/** The value with `item` present or absent; the same reference when it already is. */
+	with(item: string, selected: boolean): Selection {
+		const value = this.#read();
+		const present = this.isMulti ? (value as string[]).includes(item) : value === item;
+		if (present === selected) return value;
+		if (!this.isMulti) return selected ? item : '';
+		return selected ? [...(value as string[]), item] : (value as string[]).filter((v) => v !== item);
 	}
 }
 
-/** What a selection item needs from the group that owns it. */
+/**
+ * What a selection item needs from the group that owns it. Reactive members are accessors on the
+ * implementing class, read at use, never copied out.
+ */
 export interface SelectionGroup {
 	readonly selection: SelectionValue;
-	readonly disabled: ReadableBox<boolean>;
-	readonly orientation: ReadableBox<Orientation>;
+	readonly disabled: boolean;
+	readonly orientation: Orientation;
 	readonly rovingFocusGroup: RovingFocusGroup;
 	/** Whether arrow keys move between the items; absent means always. */
-	readonly rovingFocus?: ReadableBox<boolean>;
+	readonly rovingFocus?: boolean;
 	/** A selection takes the roving tab stop in a toggle group; a toolbar's stays where it is. */
 	readonly selectionTakesTabStop: boolean;
 	/** Beyond the roving group's candidate attribute, which every item carries. */
 	readonly extraItemAttrs?: Record<string, ''>;
 }
 
-export interface SelectionItemOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: string;
-			disabled: boolean;
-		}> {}
+/** The item component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
+export interface SelectionItemOpts {
+	readonly id: string;
+	readonly value: string;
+	readonly disabled: boolean;
+	ref: HTMLElement | null;
+}
 
 export class SelectionItemState {
 	readonly opts: SelectionItemOpts;
 	readonly group: SelectionGroup;
 	readonly rovingItem: RovingFocusItem;
-	readonly #isDisabled = $derived.by(() => this.opts.disabled.current || this.group.disabled.current);
-	readonly isPressed = $derived.by(() => this.group.selection.includes(this.opts.value.current));
+	readonly #isDisabled = $derived.by(() => this.opts.disabled || this.group.disabled);
+	readonly isPressed = $derived.by(() => this.group.selection.includes(this.opts.value));
 
 	constructor(opts: SelectionItemOpts, group: SelectionGroup) {
 		this.opts = opts;
 		this.group = group;
 		this.rovingItem = new RovingFocusItem({
 			group: group.rovingFocusGroup,
-			ref: opts.ref,
-			enabled: group.rovingFocus,
+			ref: () => opts.ref,
+			setRef: (v) => (opts.ref = v),
+			enabled: () => group.rovingFocus ?? true,
 		});
 
 		this.onclick = this.onclick.bind(this);
@@ -86,8 +98,10 @@ export class SelectionItemState {
 
 	#activate() {
 		if (this.#isDisabled) return;
-		const selected = this.group.selection.toggle(this.opts.value.current);
-		if (selected && this.group.selectionTakesTabStop) this.group.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
+		const item = this.opts.value;
+		const selected = !this.group.selection.includes(item);
+		this.group.selection.value = this.group.selection.with(item, selected);
+		if (selected && this.group.selectionTakesTabStop) this.group.rovingFocusGroup.setCurrentTabStopId(this.opts.id);
 	}
 
 	onclick(_: BitsMouseEvent) {
@@ -109,12 +123,12 @@ export class SelectionItemState {
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				role: this.group.selection.isMulti ? undefined : 'radio',
-				'data-orientation': this.group.orientation.current,
+				'data-orientation': this.group.orientation,
 				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
 				'data-state': this.isPressed ? 'on' : 'off',
-				'data-value': this.opts.value.current,
+				'data-value': this.opts.value,
 				'aria-pressed': this.group.selection.isMulti ? boolToStr(this.isPressed) : undefined,
 				'aria-checked': this.group.selection.isMulti ? undefined : getAriaChecked(this.isPressed, false),
 				disabled: boolToTrueOrUndef(this.#isDisabled),

package/src/lib/internal/{state-machine.ts → state-machine.svelte.ts}

@@ -1,5 +1,3 @@
-import { simpleBox, type WritableBox } from './tools/index.js';
-
 interface Machine<S> {
 	[k: string]: { [k: string]: S };
 }
@@ -11,22 +9,22 @@ type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;
 type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
 
 export class StateMachine<M> {
-	readonly state: WritableBox<MachineState<M>>;
+	state: MachineState<M>;
 	readonly #machine: M & Machine<MachineState<M>>;
 
 	constructor(initialState: MachineState<M>, machine: M & Machine<MachineState<M>>) {
-		this.state = simpleBox(initialState);
+		this.state = $state.raw(initialState);
 		this.#machine = machine;
 		this.dispatch = this.dispatch.bind(this);
 	}
 
 	#reducer(event: MachineEvent<M>) {
-		// @ts-expect-error  state.current is keyof M
-		const nextState = this.#machine[this.state.current][event];
-		return nextState ?? this.state.current;
+		// @ts-expect-error  state is keyof M
+		const nextState = this.#machine[this.state][event];
+		return nextState ?? this.state;
 	}
 
 	dispatch(event: MachineEvent<M>) {
-		this.state.current = this.#reducer(event);
+		this.state = this.#reducer(event);
 	}
 }

package/src/lib/internal/timeout-fn.svelte.ts

@@ -4,20 +4,22 @@ import type { AnyFn } from './types.js';
  * A self-cancelling timeout. `start()` (re)schedules `cb` after `getInterval()` ms,
  * `stop()` clears it; auto-stops when the owning component/effect is destroyed.
  */
-export function createEffectTimeout<T extends AnyFn>(cb: T, getDelay: () => number) {
+export function createEffectTimeout<T extends AnyFn>(cb: T, getDelay: () => number, getWindow: () => typeof globalThis = () => globalThis) {
 	let timer: ReturnType<typeof setTimeout> | undefined;
+	let timerWindow: typeof globalThis;
 
 	const stop = () => {
 		if (timer === undefined) return;
 
-		clearTimeout(timer);
+		timerWindow.clearTimeout(timer);
 		timer = undefined;
 	};
 
 	const start = (...args: Parameters<T>) => {
 		stop();
 
-		timer = setTimeout(() => {
+		timerWindow = getWindow();
+		timer = timerWindow.setTimeout(() => {
 			timer = undefined;
 			cb(...args);
 		}, getDelay());
@@ -33,4 +35,4 @@ export function createEffectTimeout<T extends AnyFn>(cb: T, getDelay: () => numb
 			return timer !== undefined;
 		},
 	};
-}
+}

package/src/lib/internal/tools/box.svelte.ts

@@ -1,57 +1,19 @@
 import { untrack } from 'svelte';
 
-const BoxSymbol = Symbol('box');
-const isWritableSymbol = Symbol('is-writable');
-
+/** What a vendored engine reads a reactive option through. Any object with a `current` qualifies. */
 export type ReadableBox<T> = {
-	readonly [BoxSymbol]: true;
 	readonly current: T;
 };
 
-export type WritableBox<T> = ReadableBox<T> & {
-	readonly [isWritableSymbol]: true;
+export type WritableBox<T> = {
 	current: T;
 };
 
-function createWritableBox<T>(): WritableBox<T | undefined>;
-function createWritableBox<T>(initialValue: T): WritableBox<T>;
-function createWritableBox(initialValue?: unknown) {
-	let current = $state(initialValue);
-
-	return {
-		[BoxSymbol]: true,
-		[isWritableSymbol]: true,
-		get current() {
-			return current as unknown;
-		},
-		set current(v: unknown) {
-			current = v;
-		},
-	};
-}
-
-/**
- * Creates a readonly box.
- *
- * @param getter Function to get the value of the box.
- * @returns A box with a `current` property whose value is the result of the getter.
- */
-function boxWith<T>(getter: () => T): ReadableBox<T>;
-
-/**
- * Creates a writable box.
- *
- * @param getter Function to get the value of the box.
- * @param setter Function to set the value of the box.
- * @returns A box with a `current` property which can be set to a new value.
- */
-function boxWith<T>(getter: () => T, setter: (v: T) => void): WritableBox<T>;
-
-function boxWith<T>(getter: () => T, setter?: (v: T) => void) {
+export function boxWith<T>(getter: () => T): ReadableBox<T>;
+export function boxWith<T>(getter: () => T, setter: (v: T) => void): WritableBox<T>;
+export function boxWith<T>(getter: () => T, setter?: (v: T) => void) {
 	if (setter) {
 		return {
-			[BoxSymbol]: true,
-			[isWritableSymbol]: true,
 			get current() {
 				return getter();
 			},
@@ -62,32 +24,12 @@ function boxWith<T>(getter: () => T, setter?: (v: T) => void) {
 	}
 
 	return {
-		[BoxSymbol]: true,
 		get current() {
 			return getter();
 		},
 	};
 }
 
-/**
- * The one bridge for a stateful `$bindable` prop: write the prop, then notify.
- *
- * `set` must write unconditionally — equality/idempotence guards belong to the
- * caller (the *State class), so a write through this box always means a real
- * change and `notify` fires exactly once per change. Pass `notify` as a closure
- * (`(v) => onValueChange?.(v)`) so the latest callback prop is read at call
- * time; a bare reference freezes the prop's value at bundle creation.
- *
- * Convention: writable bridges (value/open/checked/ref/...) use `bindableWith`;
- * `boxWith` is for read-only views. A two-argument `boxWith` is legacy.
- */
-export function bindableWith<T>(get: () => T, set: (v: T) => void, notify?: (v: T) => void): WritableBox<T> {
-	return boxWith(get, (v) => {
-		set(v);
-		notify?.(v);
-	});
-}
-
 /**
  * Repair a bindable value synchronously for setup/SSR, then repair it again
  * before DOM updates whenever the tracked source changes.
@@ -100,54 +42,3 @@ export function repairBindable(track: () => unknown, repair: () => void) {
 		untrack(repair);
 	});
 }
-
-export const simpleBox = createWritableBox;
-
-export { boxWith };
-
-type BoxAutoResetOptions<T> = {
-	afterMs?: number;
-	onChange?: (value: T) => void;
-	getWindow: () => Window & typeof globalThis;
-};
-
-const defaultBoxAutoResetOptions: Partial<BoxAutoResetOptions<unknown>> = {
-	afterMs: 10000,
-	onChange: () => {},
-};
-
-/**
- * Creates a box which will be reset to the default value after some time.
- *
- * @param defaultValue The value which will be set.
- * @param afterMs      A zero-or-greater delay in milliseconds.
- */
-export function boxAutoReset<T>(defaultValue: T, options: BoxAutoResetOptions<T>): WritableBox<T> {
-	const { afterMs, onChange, getWindow } = { ...defaultBoxAutoResetOptions, ...options };
-
-	let timeout: number | null = null;
-	let value = $state(defaultValue);
-
-	function resetAfter() {
-		return getWindow().setTimeout(() => {
-			value = defaultValue;
-			onChange?.(defaultValue);
-		}, afterMs);
-	}
-
-	$effect(() => {
-		return () => {
-			if (timeout) getWindow().clearTimeout(timeout);
-		};
-	});
-
-	return boxWith(
-		() => value,
-		(v) => {
-			value = v;
-			onChange?.(v);
-			if (timeout) getWindow().clearTimeout(timeout);
-			timeout = resetAfter();
-		},
-	);
-}

package/src/lib/internal/tools/index.ts

@@ -1,19 +1,9 @@
-export {
-	bindableWith,
-	boxWith,
-	boxAutoReset,
-	repairBindable,
-	simpleBox,
-	type WritableBox,
-	type ReadableBox,
-} from './box.svelte.js';
-export { get } from './types.js';
+export { boxWith, repairBindable, type WritableBox, type ReadableBox } from './box.svelte.js';
 export type {
 	AnyFn,
 	Box,
 	Expand,
 	Getter,
-	MaybeGetter,
 	ReadableBoxedValues,
 	WithChildren,
 	WithRefProps,

package/src/lib/internal/tools/types.ts

@@ -4,9 +4,6 @@ import type { ReadableBox, WritableBox } from './box.svelte.js';
 import { BROWSER } from 'esm-env';
 
 export type Getter<T> = () => T;
-export type MaybeGetter<T> = T | Getter<T>;
-
-export const get = <T>(value: MaybeGetter<T>): T => (typeof value === 'function' ? (value as Getter<T>)() : value);
 
 export type Box<T> = ReadableBox<T> | WritableBox<T>;
 

package/src/lib/internal/typeahead.svelte.ts

@@ -1,4 +1,4 @@
-import { boxAutoReset, type WritableBox } from './tools/index.js';
+import { createEffectTimeout } from './timeout-fn.svelte.js';
 import { getNextMatch } from './arrays.js';
 
 export const textContentOf = (node: HTMLElement) => node.textContent?.trim() ?? '';
@@ -12,37 +12,33 @@ type TypeaheadOpts<T> = {
 
 export class Typeahead<T> {
 	readonly #opts: TypeaheadOpts<T>;
-	readonly #search: WritableBox<string>;
+	search = $state.raw('');
+	readonly #resetTimer: ReturnType<typeof createEffectTimeout<() => void>>;
 
 	constructor(opts: TypeaheadOpts<T>) {
 		this.#opts = opts;
-		this.#search = boxAutoReset('', {
-			afterMs: 1000,
-			getWindow: opts.getWindow,
-		});
-	}
-
-	get search() {
-		return this.#search.current;
+		this.#resetTimer = createEffectTimeout(() => this.reset(), () => 1000, opts.getWindow);
 	}
 
 	handleKey(key: string, candidates: T[]) {
 		if (!candidates.length) return;
 
-		this.#search.current = this.#search.current + key;
+		this.search += key;
+		this.#resetTimer.start();
 
 		const currentCandidate = this.#opts.getCurrentCandidate();
 		const current = candidates.find((candidate) => candidate === currentCandidate);
 		const currentMatch = current === undefined ? '' : this.#opts.getSearchText(current);
 
 		const values = candidates.map((candidate) => this.#opts.getSearchText(candidate));
-		const nextMatch = getNextMatch(values, this.#search.current, currentMatch);
+		const nextMatch = getNextMatch(values, this.search, currentMatch);
 		const newCandidate = candidates.find((candidate) => this.#opts.getSearchText(candidate) === nextMatch);
 		if (newCandidate) this.#opts.onMatch(newCandidate);
 		return newCandidate;
 	}
 
 	reset() {
-		this.#search.current = '';
+		this.search = '';
+		this.#resetTimer.stop();
 	}
 }

package/src/lib/internal/types.ts

@@ -79,6 +79,12 @@ export type AnyFn = (...args: any[]) => any;
 
 export type WithRefOpts<T = {}> = T & ReadableBoxedValues<{ id: string }> & WritableBoxedValues<{ ref: HTMLElement | null }>;
 
+/** A part's `id` and bindable `ref` as accessors over its `$props()`; engines read them, the attachment writes `ref`. */
+export type RefOpts = {
+	readonly id: string;
+	ref: HTMLElement | null;
+};
+
 export type BitsEvent<T extends Event = Event, U extends HTMLElement = HTMLElement> = T & {
 	currentTarget: U;
 };

package/src/lib/internal/vaul/use-drawer-content.svelte.ts

@@ -144,8 +144,8 @@ export function useDrawerContent(opts: UseDrawerContentProps) {
 			return;
 		}
 
-		if (ctx.keyboardIsOpen.current) {
-			ctx.keyboardIsOpen.current = false;
+		if (ctx.keyboardIsOpen) {
+			ctx.keyboardIsOpen = false;
 		}
 	}
 

package/src/lib/internal/vaul/use-drawer-root.svelte.ts

@@ -1,4 +1,4 @@
-import { simpleBox, type ReadableBoxedValues, type WritableBoxedValues } from '../tools/index.js';
+import type { ReadableBoxedValues, WritableBoxedValues } from '../tools/index.js';
 import type { DrawerDirection } from './types.js';
 import { useSnapPoints } from './use-snap-points.svelte.js';
 import { isInput, usePreventScroll } from './use-prevent-scroll.svelte.js';
@@ -64,7 +64,7 @@ export function useDrawerRoot(opts: UseDrawerRootProps) {
 	let isAllowedToDrag = false;
 	let nestedTransitionCleanup: (() => void) | null = null;
 	let pointerStart = 0;
-	let keyboardIsOpen = simpleBox(false);
+	let keyboardIsOpen = $state.raw(false);
 	let shouldAnimate = $state(!opts.open.current);
 	let previousDiffFromInitial = 0;
 	let drawerHeight = 0;
@@ -307,7 +307,7 @@ export function useDrawerRoot(opts: UseDrawerRootProps) {
 		if (!drawerNode || !opts.repositionInputs.current) return;
 
 		const focusedElement = document.activeElement as HTMLElement;
-		if (isInput(focusedElement) || keyboardIsOpen.current) {
+		if (isInput(focusedElement) || keyboardIsOpen) {
 			const visualViewportHeight = window.visualViewport?.height || 0;
 			const totalHeight = window.innerHeight;
 			// This is the height of the keyboard
@@ -323,7 +323,7 @@ export function useDrawerRoot(opts: UseDrawerRootProps) {
 
 			// visualViewport height may change due to some subtle changes to the keyboard. Checking if the height changed by 60 or more will make sure that they keyboard really changed its open state.
 			if (Math.abs(previousDiffFromInitial - diffFromInitial) > 60) {
-				keyboardIsOpen.current = !keyboardIsOpen.current;
+				keyboardIsOpen = !keyboardIsOpen;
 			}
 
 			if (
@@ -337,7 +337,7 @@ export function useDrawerRoot(opts: UseDrawerRootProps) {
 			}
 			previousDiffFromInitial = diffFromInitial;
 			// We don't have to change the height if the input is in view, when we are here we are in the opened keyboard state so we can correctly check if the input is in view
-			if (drawerHeight > visualViewportHeight || keyboardIsOpen.current) {
+			if (drawerHeight > visualViewportHeight || keyboardIsOpen) {
 				const height = drawerNode.getBoundingClientRect().height;
 				let newDrawerHeight = height;
 
@@ -354,7 +354,7 @@ export function useDrawerRoot(opts: UseDrawerRootProps) {
 				drawerNode.style.height = `${initialDrawerHeight}px`;
 			}
 
-			if (opts.snapPoints.current && opts.snapPoints.current.length > 0 && !keyboardIsOpen.current) {
+			if (opts.snapPoints.current && opts.snapPoints.current.length > 0 && !keyboardIsOpen) {
 				drawerNode.style.bottom = `0px`;
 			} else {
 				// Negative bottom value would never make sense
@@ -653,7 +653,12 @@ export function useDrawerRoot(opts: UseDrawerRootProps) {
 		handleOnly: opts.handleOnly,
 		container: opts.container,
 		autoFocus: opts.autoFocus,
-		keyboardIsOpen,
+		get keyboardIsOpen() {
+			return keyboardIsOpen;
+		},
+		set keyboardIsOpen(v: boolean) {
+			keyboardIsOpen = v;
+		},
 		setDrawerNode,
 		setOverlayNode,
 		onPress,

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

@@ -1,43 +0,0 @@
-import { createContext } from 'svelte';
-
-export type AccordionType = 'single' | 'multiple';
-
-type AccordionStateProps = {
-	type: () => AccordionType;
-	value: () => string | string[];
-	setValue: (value: string | string[]) => void;
-};
-
-/**
- * Each item is a `<details>`; this state owns the open set (bindable `value`) and
- * single-type exclusivity — not the native `name` attribute, which would unrender a
- * force-closed sibling before its closing transition can play. Items intercept summary
- * clicks and report intent here; the grid-track animation lives in ui.css.
- */
-export class AccordionState {
-	readonly props: AccordionStateProps;
-
-	constructor(props: AccordionStateProps) {
-		this.props = props;
-	}
-
-	includes(item: string): boolean {
-		const value = this.props.value();
-		return Array.isArray(value) ? value.includes(item) : value === item;
-	}
-
-	/** Open/close intent from an item — intercepted summary clicks and native force-opens alike. */
-	report(item: string, open: boolean): void {
-		const value = this.props.value();
-		if (Array.isArray(value)) {
-			if (open && !value.includes(item)) this.props.setValue([...value, item]);
-			else if (!open && value.includes(item)) this.props.setValue(value.filter((v) => v !== item));
-		} else if (open) {
-			if (value !== item) this.props.setValue(item);
-		} else if (value === item) {
-			this.props.setValue('');
-		}
-	}
-}
-
-export const [useAccordion, setAccordion] = createContext<AccordionState>();