sheer-ui 0.3.1 → 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/table/table.svelte.ts

@@ -20,13 +20,16 @@ export class DataTable<TData> {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	readonly #defs: () => ColumnDef<TData, any>[];
 	readonly #paginated: boolean;
-	readonly #selection = new SvelteSet<string>();
+	readonly selectedRowIds = new SvelteSet<string>();
 
-	sorting = $state<ColumnSort[]>([]);
-	columnFilters = $state<ColumnFilter[]>([]);
+	// Raw so a change is always a reassignment: the page record below keys on their identity.
+	sorting = $state.raw<ColumnSort[]>([]);
+	columnFilters = $state.raw<ColumnFilter[]>([]);
 	columnVisibility = $state<Record<string, boolean>>({});
-	#pageIndex = $state(0);
 	#pageSize = $state(10);
+	// A page index holds for the sorting and filters it was set under: a sort or filter change reads
+	// as page 0 without a write, while a data refetch underneath keeps the page.
+	#page = $state.raw({ index: 0, sorting: this.sorting, columnFilters: this.columnFilters });
 
 	constructor(options: DataTableOptions<TData>) {
 		this.#data = options.data;
@@ -40,7 +43,7 @@ export class DataTable<TData> {
 	readonly #columns: Column<TData, any>[] = $derived.by(() => this.#defs().map((def) => new Column(this, def)));
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	readonly #columnsById = $derived(new Map<string, Column<TData, any>>(this.#columns.map((column) => [column.id, column])));
-	readonly #coreRows: readonly Row<TData>[] = $derived.by(() => this.#data().map((original, index) => new Row(this, this.#selection, original, index)));
+	readonly #coreRows: readonly Row<TData>[] = $derived.by(() => this.#data().map((original, index) => new Row(this, this.selectedRowIds, original, index)));
 
 	readonly #activeFilters = $derived(
 		this.columnFilters.flatMap((filter) => {
@@ -65,7 +68,9 @@ export class DataTable<TData> {
 
 	readonly pageCount = $derived.by(() => (this.#paginated ? Math.max(1, Math.ceil(this.#sorted.length / this.#pageSize)) : 1));
 	// Clamped on read, never written back: data shrinking under a stale index lands on the last page.
-	readonly #safeIndex = $derived(Math.min(this.#pageIndex, this.pageCount - 1));
+	readonly #safeIndex = $derived(
+		this.#page.sorting === this.sorting && this.#page.columnFilters === this.columnFilters ? Math.min(this.#page.index, this.pageCount - 1) : 0,
+	);
 
 	readonly rows: readonly Row<TData>[] = $derived.by(() =>
 		this.#paginated ? this.#sorted.slice(this.#safeIndex * this.#pageSize, (this.#safeIndex + 1) * this.#pageSize) : this.#sorted,
@@ -79,7 +84,7 @@ export class DataTable<TData> {
 	}
 
 	setPageIndex(index: number) {
-		this.#pageIndex = Math.min(Math.max(index, 0), this.pageCount - 1);
+		this.#page = { index: Math.min(Math.max(index, 0), this.pageCount - 1), sorting: this.sorting, columnFilters: this.columnFilters };
 	}
 	nextPage() {
 		this.setPageIndex(this.#safeIndex + 1);
@@ -90,23 +95,10 @@ export class DataTable<TData> {
 	setPageSize(size: number) {
 		const next = Math.max(1, size);
 		// Keep the current top row visible, matching upstream's paging math.
-		this.#pageIndex = Math.floor((this.#safeIndex * this.#pageSize) / next);
+		this.#page = { index: Math.floor((this.#safeIndex * this.#pageSize) / next), sorting: this.sorting, columnFilters: this.columnFilters };
 		this.#pageSize = next;
 	}
 
-	// User-initiated sort and filter changes restart paging; a data refetch underneath does not.
-	setSorting(sorting: ColumnSort[]) {
-		this.sorting = sorting;
-		this.#pageIndex = 0;
-	}
-	setColumnFilters(filters: ColumnFilter[]) {
-		this.columnFilters = filters;
-		this.#pageIndex = 0;
-	}
-	resetColumnFilters() {
-		this.setColumnFilters([]);
-	}
-
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	get allColumns(): readonly Column<TData, any>[] {
 		return this.#columns;
@@ -122,15 +114,6 @@ export class DataTable<TData> {
 		{ id: '0', headers: this.visibleColumns.map((column) => new Header(this, column)) },
 	]);
 
-	get selectedRowIds(): ReadonlySet<string> {
-		return this.#selection;
-	}
-	setSelectedRowIds(ids: Iterable<string>) {
-		const next = new Set(ids);
-		for (const id of this.#selection) if (!next.has(id)) this.#selection.delete(id);
-		for (const id of next) this.#selection.add(id);
-	}
-
 	readonly selectedRows: readonly Row<TData>[] = $derived(this.#coreRows.filter((row) => row.isSelected));
 	readonly filteredSelectedRows: readonly Row<TData>[] = $derived(this.filteredRows.filter((row) => row.isSelected));
 
@@ -194,26 +177,23 @@ export class Column<TData, TValue = unknown> {
 		const existingIndex = old.findIndex((sort) => sort.id === this.id);
 
 		if (old.length > 0 && this.#canMultiSort && multi) {
-			this.#table.setSorting(
-				existing
-					? !hasManualValue && nextOrder === false
-						? old.filter((sort) => sort.id !== this.id)
-						: old.map((sort) => (sort.id === this.id ? { ...sort, desc: nextDesc } : sort))
-					: [...old, { id: this.id, desc: nextDesc }],
-			);
+			this.#table.sorting = existing
+				? !hasManualValue && nextOrder === false
+					? old.filter((sort) => sort.id !== this.id)
+					: old.map((sort) => (sort.id === this.id ? { ...sort, desc: nextDesc } : sort))
+				: [...old, { id: this.id, desc: nextDesc }];
 			return;
 		}
 
 		// Single mode: only the most recently applied sort toggles through the cycle; anything else replaces.
 		if (existing !== undefined && existingIndex === old.length - 1) {
-			this.#table.setSorting(
+			this.#table.sorting =
 				!hasManualValue && nextOrder === false
 					? old.filter((sort) => sort.id !== this.id)
-					: old.map((sort) => (sort.id === this.id ? { ...sort, desc: nextDesc } : sort)),
-			);
+					: old.map((sort) => (sort.id === this.id ? { ...sort, desc: nextDesc } : sort));
 			return;
 		}
-		this.#table.setSorting([{ id: this.id, desc: nextDesc }]);
+		this.#table.sorting = [{ id: this.id, desc: nextDesc }];
 	}
 
 	get #canMultiSort(): boolean {
@@ -239,9 +219,9 @@ export class Column<TData, TValue = unknown> {
 	get filterValue(): unknown {
 		return this.#table.columnFilters.find((filter) => filter.id === this.id)?.value;
 	}
-	setFilterValue(value: unknown) {
+	set filterValue(value: unknown) {
 		const others = this.#table.columnFilters.filter((filter) => filter.id !== this.id);
-		this.#table.setColumnFilters(shouldAutoRemoveFilter(value) ? others : [...others, { id: this.id, value }]);
+		this.#table.columnFilters = shouldAutoRemoveFilter(value) ? others : [...others, { id: this.id, value }];
 	}
 
 	get facetedUniqueValues(): ReadonlyMap<unknown, number> {

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;
 		}
 	}