sheer-ui 0.4.0 → 0.4.2

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

@@ -1,17 +1,11 @@
 import { createContext } from 'svelte';
-import { type ReadableBox, type ReadableBoxedValues, type WritableBox, attachRef } from '../../internal/tools/index.js';
+import { type ReadableBox, type ReadableBoxedValues, attachRef } from '../../internal/tools/index.js';
 import { createBitsAttrs, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
 import type { Orientation } from '../../internal/index.js';
 import type { BitsKeyboardEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
-import {
-	type SelectionGroup,
-	type SelectionItemOpts,
-	type SelectionType,
-	SelectionItemState,
-	SelectionValue,
-} from '../../internal/selection.svelte.js';
+import { type SelectionGroup, type SelectionItemOpts, SelectionItemState, SelectionValue } from '../../internal/selection.svelte.js';
 
 export const toolbarAttrs = createBitsAttrs({
 	component: 'toolbar',
@@ -41,9 +35,9 @@ export class ToolbarRootState {
 		this.attachment = attachRef(this.opts.ref);
 
 		this.rovingFocusGroup = new RovingFocusGroup({
-			orientation: this.opts.orientation,
-			loop: this.opts.loop,
-			rootNode: this.opts.ref,
+			orientation: () => this.opts.orientation.current,
+			loop: () => this.opts.loop.current,
+			rootNode: () => this.opts.ref.current,
 			candidateAttr: toolbarAttrs.item,
 		});
 	}
@@ -60,14 +54,12 @@ export class ToolbarRootState {
 	);
 }
 
-interface ToolbarGroupStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-		}> {
-	type: SelectionType;
-	value: WritableBox<string | string[]>;
+/** The group component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
+interface ToolbarGroupStateOpts {
+	readonly id: string;
+	readonly disabled: boolean;
+	ref: HTMLElement | null;
+	selection: SelectionValue;
 }
 
 /** A selection group inside the toolbar: its items rove with the toolbar's other items. */
@@ -78,8 +70,6 @@ export class ToolbarGroupState implements SelectionGroup {
 	readonly opts: ToolbarGroupStateOpts;
 	readonly root: ToolbarRootState;
 	readonly selection: SelectionValue;
-	readonly disabled: ReadableBox<boolean>;
-	readonly orientation: ReadableBox<Orientation>;
 	readonly rovingFocusGroup: RovingFocusGroup;
 	readonly selectionTakesTabStop = false;
 	readonly extraItemAttrs = { [toolbarAttrs['group-item']]: '' } as const;
@@ -88,21 +78,27 @@ export class ToolbarGroupState implements SelectionGroup {
 	constructor(opts: ToolbarGroupStateOpts, root: ToolbarRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.selection = new SelectionValue(opts.type, opts.value);
-		this.disabled = opts.disabled;
-		this.orientation = root.opts.orientation;
+		this.selection = opts.selection;
 		this.rovingFocusGroup = root.rovingFocusGroup;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
+	}
+
+	get disabled() {
+		return this.opts.disabled;
+	}
+
+	get orientation() {
+		return this.root.opts.orientation.current;
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				[toolbarAttrs.group]: '',
 				role: 'group',
 				'data-orientation': this.root.opts.orientation.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
 				...this.attachment,
 			}) as const,
 	);
@@ -127,7 +123,8 @@ export class ToolbarLinkState {
 		this.root = root;
 		this.rovingItem = new RovingFocusItem({
 			group: this.root.rovingFocusGroup,
-			ref: this.opts.ref,
+			ref: () => this.opts.ref.current,
+			setRef: (v) => (this.opts.ref.current = v),
 		});
 
 		this.onkeydown = this.onkeydown.bind(this);
@@ -179,7 +176,8 @@ export class ToolbarButtonState {
 		this.root = root;
 		this.rovingItem = new RovingFocusItem({
 			group: this.root.rovingFocusGroup,
-			ref: this.opts.ref,
+			ref: () => this.opts.ref.current,
+			setRef: (v) => (this.opts.ref.current = v),
 		});
 
 		this.onkeydown = this.onkeydown.bind(this);

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

@@ -1,4 +1,4 @@
-import { attachRef, DOMContext, type WritableBoxedValues, type ReadableBoxedValues, simpleBox } from '../../internal/tools/index.js';
+import { attachRef, DOMContext, type WritableBoxedValues, type ReadableBoxedValues } from '../../internal/tools/index.js';
 import { on } from 'svelte/events';
 import { createContext, onMount, untrack } from 'svelte';
 import { isElement } from '../../internal/tools/utils/dom.js';
@@ -145,7 +145,6 @@ export class TooltipProviderState {
 	}
 	readonly opts: TooltipProviderStateOpts;
 	isOpenDelayed = $state<boolean>(true);
-	isPointerInTransit = simpleBox(false);
 	readonly #timerFn: ReturnType<typeof createEffectTimeout<() => void>>;
 	#openTooltip = $state<TooltipRootState | null>(null);
 
@@ -436,18 +435,9 @@ export class TooltipTriggerState {
 	readonly root: TooltipRootState | null;
 	readonly tether: TooltipTetherState | null;
 	readonly attachment: RefAttachment;
-	#isPointerDown = simpleBox(false);
+	#isPointerDown = false;
 	#hasPointerMoveOpened = $state(false);
 	domContext: DOMContext;
-	// Fired on pointerenter while the pointer is in transit: if still in transit after the delay, the
-	// user is likely staying on this trigger.
-	#transitCheck = createEffectTimeout(() => {
-		const root = this.#getRoot();
-		if (!root || !root.provider.isPointerInTransit.current) return;
-		root.provider.isPointerInTransit.current = false;
-		root.onTriggerEnter(this.opts.id.current);
-		this.#hasPointerMoveOpened = true;
-	}, () => 250);
 	#mounted = false;
 	#lastRegisteredId: string | null = null;
 
@@ -551,17 +541,17 @@ export class TooltipTriggerState {
 	};
 
 	handlePointerUp = () => {
-		this.#isPointerDown.current = false;
+		this.#isPointerDown = false;
 	};
 
 	#onpointerup: PointerEventHandler<HTMLElement> = () => {
 		if (this.#isDisabled()) return;
-		this.#isPointerDown.current = false;
+		this.#isPointerDown = false;
 	};
 
 	#onpointerdown: PointerEventHandler<HTMLElement> = () => {
 		if (this.#isDisabled()) return;
-		this.#isPointerDown.current = true;
+		this.#isPointerDown = true;
 
 		on(
 			this.domContext.getDocument(),
@@ -584,12 +574,6 @@ export class TooltipTriggerState {
 		}
 		if (e.pointerType === 'touch') return;
 
-		// if in transit, wait briefly to see if user is actually heading to old content or staying here
-		if (root.provider.isPointerInTransit.current) {
-			this.#transitCheck.start();
-			return;
-		}
-
 		root.onTriggerEnter(this.opts.id.current);
 		this.#hasPointerMoveOpened = true;
 	};
@@ -606,10 +590,6 @@ export class TooltipTriggerState {
 		if (e.pointerType === 'touch') return;
 		if (this.#hasPointerMoveOpened) return;
 
-		// moving within trigger means we're definitely not in transit anymore
-		this.#transitCheck.stop();
-		root.provider.isPointerInTransit.current = false;
-
 		root.onTriggerEnter(this.opts.id.current);
 		this.#hasPointerMoveOpened = true;
 	};
@@ -618,7 +598,6 @@ export class TooltipTriggerState {
 		const root = this.#getRoot();
 		if (!root) return;
 		if (this.#isDisabled()) return;
-		this.#transitCheck.stop();
 		if (!root.isActiveTrigger(this.opts.id.current)) {
 			this.#hasPointerMoveOpened = false;
 			return;
@@ -649,7 +628,7 @@ export class TooltipTriggerState {
 	#onfocus: FocusEventHandler<HTMLElement> = (e) => {
 		const root = this.#getRoot();
 		if (!root) return;
-		if (this.#isPointerDown.current) return;
+		if (this.#isPointerDown) return;
 		if (this.#isDisabled()) {
 			if (root.opts.open.current) {
 				root.handleClose();

package/src/lib/internal/dismissible-layer/use-dismissable-layer.svelte.ts

@@ -1,5 +1,4 @@
 import {
-	simpleBox,
 	boxWith,
 	attachRef,
 	type Getter,
@@ -219,7 +218,7 @@ export function interactOutsideAttachment(opts: {
 	enabled: Getter<boolean>;
 	isValidEvent?: Getter<((e: PointerEvent, node: HTMLElement) => boolean) | undefined>;
 }): { props: { onfocuscapture: () => void; onblurcapture: () => void }; attachment: RefAttachment<HTMLElement> } {
-	const ref = simpleBox<HTMLElement | null>(null);
+	let node = $state.raw<HTMLElement | null>(null);
 	const state = DismissibleLayerState.create({
 		id: boxWith(opts.id),
 		interactOutsideBehavior: boxWith(opts.interactOutsideBehavior),
@@ -227,9 +226,9 @@ export function interactOutsideAttachment(opts: {
 		enabled: boxWith(opts.enabled),
 		onFocusOutside: boxWith(() => opts.onFocusOutside?.()),
 		isValidEvent: boxWith(() => opts.isValidEvent?.()),
-		ref,
+		ref: boxWith(() => node, (v) => (node = v)),
 	});
-	return { props: state.props, attachment: attachRef(ref) };
+	return { props: state.props, attachment: attachRef((v) => (node = v)) };
 }
 
 function isValidEvent(e: PointerEvent, node: HTMLElement): boolean {

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/{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(