sheer-ui 0.4.0 → 0.4.3

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

@@ -5,10 +5,7 @@ import {
 	getWindow,
 	styleToString,
 	type ReadableBoxedValues,
-	type ReadableBox,
 	type RefAttachment,
-	simpleBox,
-	boxWith,
 } from '../tools/index.js';
 import type { WithRefOpts } from '../types.js';
 import type { Direction, StyleProperties } from '../index.js';
@@ -60,10 +57,16 @@ export class FloatingRootState {
 		return tooltip ? setFloatingTooltipRoot(root) : setFloatingRoot(root);
 	}
 	readonly anchorName: string;
-	#customAnchorSource = $state<ReadableBox<CustomAnchorNode>>(simpleBox(null));
-	triggerSource = $state<ReadableBox<AnchorNode>>(simpleBox(null));
-	anchorNode: ReadableBox<AnchorNode> = boxWith(() => {
-		const customAnchor = this.#customAnchorSource.current;
+	// Getters over whoever owns the anchor (trigger attachment, customAnchor, pointer rect): a derived reading through them tracks the owner.
+	#customAnchorSource: () => CustomAnchorNode = $state.raw(() => null);
+	triggerSource: () => AnchorNode = $state.raw(() => null);
+
+	constructor(anchorName: string) {
+		this.anchorName = anchorName;
+	}
+
+	get anchorNode(): AnchorNode {
+		const customAnchor = this.#customAnchorSource();
 
 		if (customAnchor) {
 			if (typeof customAnchor === 'string') {
@@ -73,18 +76,14 @@ export class FloatingRootState {
 			return customAnchor;
 		}
 
-		return this.triggerSource.current;
-	});
-
-	constructor(anchorName: string) {
-		this.anchorName = anchorName;
+		return this.triggerSource();
 	}
 
-	get triggerNode() {
-		return this.triggerSource;
+	get triggerNode(): AnchorNode {
+		return this.triggerSource();
 	}
 
-	setCustomAnchorSource(source: ReadableBox<CustomAnchorNode>) {
+	setCustomAnchorSource(source: () => CustomAnchorNode) {
 		this.#customAnchorSource = source;
 	}
 }
@@ -134,12 +133,9 @@ export class FloatingContentState {
 	#arrowWidth = $state(0);
 	#arrowHeight = $state(0);
 
-	// nodes
-	contentRef = simpleBox<HTMLElement | null>(null);
-	arrowRef = simpleBox<HTMLElement | null>(null);
-	readonly contentAttachment = attachRef(this.contentRef);
+	contentRef = $state.raw<HTMLElement | null>(null);
+	readonly contentAttachment = attachRef<HTMLElement>((v) => (this.contentRef = v));
 	readonly arrowAttachment = {
-		...attachRef(this.arrowRef),
 		[createAttachmentKey()]: ((node) => this.#measureArrow(node)) satisfies Attachment<HTMLElement>,
 	};
 
@@ -244,7 +240,7 @@ export class FloatingContentState {
 	/** A virtual anchor (a rect, no element) is rendered as a zero-size fixed box carrying the anchor name. */
 	virtualAnchorStyle = $derived.by(() => {
 		if (!this.opts.present.current) return null;
-		const anchor = this.root.anchorNode.current;
+		const anchor = this.root.anchorNode;
 		// SSR-safe: on the server there is no HTMLElement (and no virtual anchor either)
 		if (!anchor || typeof HTMLElement === 'undefined' || anchor instanceof HTMLElement) return null;
 		const rect = anchor.getBoundingClientRect();
@@ -300,12 +296,12 @@ export class FloatingContentState {
 	constructor(opts: FloatingContentStateOpts, root: FloatingRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.root.setCustomAnchorSource(opts.customAnchor);
+		this.root.setCustomAnchorSource(() => opts.customAnchor.current);
 
 		// An element anchor that is not the trigger (a `customAnchor`) needs the anchor name too.
 		$effect(() => {
-			const anchor = this.root.anchorNode.current;
-			if (!(anchor instanceof HTMLElement) || anchor === this.root.triggerNode.current) return;
+			const anchor = this.root.anchorNode;
+			if (!(anchor instanceof HTMLElement) || anchor === this.root.triggerNode) return;
 			const previous = anchor.style.anchorName;
 			anchor.style.anchorName = this.root.anchorName;
 			return () => {
@@ -326,7 +322,7 @@ export class FloatingContentState {
 				this.#measuredPlacement = null;
 				return;
 			}
-			const content = this.contentRef.current;
+			const content = this.contentRef;
 			if (!content) return;
 			const win = getWindow(content);
 			let raf = win.requestAnimationFrame(() => this.#measurePlacement());
@@ -345,8 +341,8 @@ export class FloatingContentState {
 	}
 
 	#measurePlacement() {
-		const content = this.contentRef.current;
-		const anchor = this.root.anchorNode.current;
+		const content = this.contentRef;
+		const anchor = this.root.anchorNode;
 		if (!content || !anchor) return;
 		const c = content.getBoundingClientRect();
 		const a = anchor.getBoundingClientRect();
@@ -444,7 +440,7 @@ export class FloatingArrowState {
  * tracking the pointer, which the content renders as a zero-size anchor element. Reads the
  * floating-root context, so call it during component init.
  */
-export function setFloatingAnchor(source: ReadableBox<AnchorNode>, tooltip = false) {
+export function setFloatingAnchor(source: () => AnchorNode, tooltip = false) {
 	const root = tooltip ? getFloatingTooltipRoot() : getFloatingRoot();
 	root.triggerSource = source;
 }
@@ -460,11 +456,11 @@ export function floatingAnchor(tooltip = false): RefAttachment {
 	return {
 		[createAttachmentKey()]: (node) => {
 			const el = node as HTMLElement;
-			root.triggerSource = simpleBox(el);
+			root.triggerSource = () => el;
 			el.style.anchorName = root.anchorName;
 			return () => {
 				el.style.removeProperty('anchor-name');
-				root.triggerSource = simpleBox(null);
+				root.triggerSource = () => null;
 			};
 		},
 	};

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

package/src/lib/internal/{roving-focus-group.ts → roving-focus-group.svelte.ts}

@@ -1,4 +1,4 @@
-import { type Box, type ReadableBox, simpleBox } from './tools/index.js';
+import type { Getter } from './tools/index.js';
 import { getDirectionalKeys, kbd } from './kbd.js';
 import type { Direction, Orientation } from './index.js';
 import { isHTMLElement } from './tools/utils/dom.js';
@@ -30,21 +30,19 @@ type RovingFocusGroupOptions = (
 			candidateSelector?: undefined;
 	  }
 ) & {
-	/**
-	 * The id of the root node
-	 */
-	rootNode: Box<HTMLElement | null>;
+	/** The node the candidates live under. */
+	rootNode: Getter<HTMLElement | null>;
 
 	/**
 	 * Whether to loop through the candidates when reaching the end.
 	 */
-	loop: ReadableBox<boolean>;
+	loop: Getter<boolean>;
 
 	/**
 	 * The orientation of the roving focus group. Used
 	 * to determine how keyboard navigation should work.
 	 */
-	orientation: ReadableBox<Orientation>;
+	orientation: Getter<Orientation>;
 
 	/**
 	 * A callback function called when a candidate is focused.
@@ -54,7 +52,7 @@ type RovingFocusGroupOptions = (
 
 export class RovingFocusGroup {
 	readonly #opts: RovingFocusGroupOptions;
-	readonly #currentTabStopId = simpleBox<string | null>(null);
+	#currentTabStopId = $state.raw<string | null>(null);
 	/** What a candidate of an attribute-marked group stamps on itself; empty for the other kinds. */
 	readonly candidateAttrs: Record<string, ''>;
 
@@ -64,7 +62,7 @@ export class RovingFocusGroup {
 	}
 
 	getCandidateNodes() {
-		const rootNode = this.#opts.rootNode.current;
+		const rootNode = this.#opts.rootNode();
 		if (!BROWSER || !rootNode) return [];
 		if (this.#opts.candidateNodes) return this.#opts.candidateNodes(rootNode);
 
@@ -79,7 +77,7 @@ export class RovingFocusGroup {
 	}
 
 	handleKeydown(node: HTMLElement | null | undefined, e: KeyboardEvent, both: boolean = false) {
-		const rootNode = this.#opts.rootNode.current;
+		const rootNode = this.#opts.rootNode();
 		if (!rootNode || !node) return;
 
 		const items = this.getCandidateNodes();
@@ -87,8 +85,8 @@ export class RovingFocusGroup {
 
 		const currentIndex = items.indexOf(node);
 		const dir = (rootNode.ownerDocument.defaultView ?? window).getComputedStyle(rootNode).direction as Direction;
-		const { nextKey, prevKey } = getDirectionalKeys(dir, this.#opts.orientation.current);
-		const loop = this.#opts.loop.current;
+		const { nextKey, prevKey } = getDirectionalKeys(dir, this.#opts.orientation());
+		const loop = this.#opts.loop();
 
 		const keyToIndex = {
 			[nextKey]: currentIndex + 1,
@@ -117,19 +115,19 @@ export class RovingFocusGroup {
 		const itemToFocus = items[itemIndex];
 		if (!itemToFocus) return;
 		itemToFocus.focus();
-		this.#currentTabStopId.current = itemToFocus.id;
+		this.#currentTabStopId = itemToFocus.id;
 		this.#opts.onCandidateFocus?.(itemToFocus);
 		return itemToFocus;
 	}
 
 	getTabIndex(node: HTMLElement | null | undefined) {
 		const items = this.getCandidateNodes();
-		const anyActive = this.#currentTabStopId.current !== null;
+		const anyActive = this.#currentTabStopId !== null;
 
 		if (node && !anyActive && items[0] === node) {
-			this.#currentTabStopId.current = node.id;
+			this.#currentTabStopId = node.id;
 			return 0;
-		} else if (node?.id === this.#currentTabStopId.current) {
+		} else if (node?.id === this.#currentTabStopId) {
 			return 0;
 		}
 
@@ -137,13 +135,13 @@ export class RovingFocusGroup {
 	}
 
 	setCurrentTabStopId(id: string) {
-		this.#currentTabStopId.current = id;
+		this.#currentTabStopId = id;
 	}
 
 	focusCurrentTabStop() {
-		const currentTabStopId = this.#currentTabStopId.current;
+		const currentTabStopId = this.#currentTabStopId;
 		if (!currentTabStopId) return;
-		const currentTabStop = this.#opts.rootNode.current?.querySelector(`#${currentTabStopId}`);
+		const currentTabStop = this.#opts.rootNode()?.querySelector(`#${currentTabStopId}`);
 		if (!currentTabStop || !isHTMLElement(currentTabStop)) return;
 		currentTabStop.focus();
 	}

package/src/lib/internal/roving-focus-item.svelte.ts

@@ -1,21 +1,16 @@
-import { type ReadableBox, type RefAttachment, type WritableBox, attachRef } from './tools/index.js';
-import type { RovingFocusGroup } from './roving-focus-group.js';
-
-type MaybeReadableBoolean = boolean | ReadableBox<boolean>;
+import { type Getter, type RefAttachment, attachRef } from './tools/index.js';
+import type { RovingFocusGroup } from './roving-focus-group.svelte.js';
 
 type RovingFocusItemOptions<T extends HTMLElement = HTMLElement> = {
 	group: RovingFocusGroup;
-	ref: WritableBox<T | null>;
-	enabled?: MaybeReadableBoolean;
-	both?: MaybeReadableBoolean;
+	ref: Getter<T | null>;
+	/** Receives the node from the attachment; the owner keeps it wherever its `ref` reads from. */
+	setRef: (node: T | null) => void;
+	/** Whether arrow keys move from this item; absent means always. */
+	enabled?: Getter<boolean>;
 	onRefChange?: (node: T | null) => void;
 };
 
-function readBoolean(value: MaybeReadableBoolean | undefined, fallback: boolean) {
-	if (value === undefined) return fallback;
-	return typeof value === 'boolean' ? value : value.current;
-}
-
 export class RovingFocusItem<T extends HTMLElement = HTMLElement> {
 	readonly #opts: RovingFocusItemOptions<T>;
 	readonly attachment: RefAttachment<T>;
@@ -23,22 +18,22 @@ export class RovingFocusItem<T extends HTMLElement = HTMLElement> {
 
 	constructor(opts: RovingFocusItemOptions<T>) {
 		this.#opts = opts;
-		this.attachment = attachRef(opts.ref, opts.onRefChange);
+		this.attachment = attachRef<T>(opts.setRef, opts.onRefChange);
 		this.handleKeydown = this.handleKeydown.bind(this);
 
 		$effect(() => {
-			if (!readBoolean(this.#opts.enabled, true)) {
+			if (!(this.#opts.enabled?.() ?? true)) {
 				this.#tabIndex = 0;
 				return;
 			}
 
-			this.#tabIndex = this.#opts.group.getTabIndex(this.#opts.ref.current);
+			this.#tabIndex = this.#opts.group.getTabIndex(this.#opts.ref());
 		});
 	}
 
 	handleKeydown(e: KeyboardEvent) {
-		if (!readBoolean(this.#opts.enabled, true)) return;
-		return this.#opts.group.handleKeydown(this.#opts.ref.current, e, readBoolean(this.#opts.both, false));
+		if (!(this.#opts.enabled?.() ?? true)) return;
+		return this.#opts.group.handleKeydown(this.#opts.ref(), e);
 	}
 
 	readonly props = $derived.by(

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