sheer-ui 0.4.0 → 0.4.3

package/src/lib/components/toggle-group/toggle-group.svelte.ts

@@ -1,16 +1,10 @@
 import { createContext } from 'svelte';
-import { type ReadableBox, type ReadableBoxedValues, type WritableBox, attachRef } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import { createBitsAttrs, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
 import type { Orientation } from '../../internal/index.js';
-import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
-import {
-	type SelectionGroup,
-	type SelectionItemOpts,
-	type SelectionType,
-	SelectionItemState,
-	SelectionValue,
-} from '../../internal/selection.svelte.js';
+import type { RefAttachment } from '../../internal/types.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import { type SelectionGroup, type SelectionItemOpts, SelectionItemState, SelectionValue } from '../../internal/selection.svelte.js';
 
 export const toggleGroupAttrs = createBitsAttrs({
 	component: 'toggle-group',
@@ -19,17 +13,15 @@ export const toggleGroupAttrs = createBitsAttrs({
 
 const [getToggleGroupRoot, setToggleGroupRoot] = createContext<ToggleGroupRootState>();
 
-interface ToggleGroupRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			rovingFocus: boolean;
-			loop: boolean;
-			orientation: Orientation;
-		}> {
-	type: SelectionType;
-	value: WritableBox<string | string[]>;
+/** The root component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
+interface ToggleGroupRootStateOpts {
+	readonly id: string;
+	readonly disabled: boolean;
+	readonly rovingFocus: boolean;
+	readonly loop: boolean;
+	readonly orientation: Orientation;
+	ref: HTMLElement | null;
+	selection: SelectionValue;
 }
 
 export class ToggleGroupRootState implements SelectionGroup {
@@ -38,36 +30,42 @@ export class ToggleGroupRootState implements SelectionGroup {
 	}
 	readonly opts: ToggleGroupRootStateOpts;
 	readonly selection: SelectionValue;
-	readonly disabled: ReadableBox<boolean>;
-	readonly orientation: ReadableBox<Orientation>;
-	readonly rovingFocus: ReadableBox<boolean>;
 	readonly rovingFocusGroup: RovingFocusGroup;
 	readonly selectionTakesTabStop = true;
 	readonly attachment: RefAttachment;
 
 	constructor(opts: ToggleGroupRootStateOpts) {
 		this.opts = opts;
-		this.selection = new SelectionValue(opts.type, opts.value);
-		this.disabled = opts.disabled;
-		this.orientation = opts.orientation;
-		this.rovingFocus = opts.rovingFocus;
-		this.attachment = attachRef(opts.ref);
+		this.selection = opts.selection;
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.rovingFocusGroup = new RovingFocusGroup({
 			candidateAttr: toggleGroupAttrs.item,
-			rootNode: opts.ref,
-			loop: opts.loop,
-			orientation: opts.orientation,
+			rootNode: () => opts.ref,
+			loop: () => opts.loop,
+			orientation: () => opts.orientation,
 		});
 	}
 
+	get disabled() {
+		return this.opts.disabled;
+	}
+
+	get orientation() {
+		return this.opts.orientation;
+	}
+
+	get rovingFocus() {
+		return this.opts.rovingFocus;
+	}
+
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				[toggleGroupAttrs.root]: '',
 				role: 'group',
-				'data-orientation': this.opts.orientation.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+				'data-orientation': this.opts.orientation,
+				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
 				...this.attachment,
 			}) as const,
 	);

package/src/lib/components/toolbar/components/toolbar-group-item.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { ToolbarGroupItemProps } from '../types.js';
 	import { createToolbarGroupItem } from '../toolbar.svelte.js';
@@ -25,13 +24,21 @@
 	} = $props();
 
 	const groupItemState = createToolbarGroupItem({
-		id: boxWith(() => id),
-		value: boxWith(() => value),
-		disabled: boxWith(() => disabled ?? false),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled ?? false;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/toolbar/components/toolbar-group.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
-	import { boxWith, repairBindable } from '../../../internal/tools/index.js';
-	import { emptySelection } from '../../../internal/selection.svelte.js';
+	import { repairBindable } from '../../../internal/tools/index.js';
+	import { SelectionValue, emptySelection } from '../../../internal/selection.svelte.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { ToolbarGroupProps } from '../types.js';
 	import { ToolbarGroupState } from '../toolbar.svelte.js';
@@ -21,10 +20,10 @@
 		...restProps
 	}: ToolbarGroupProps = $props();
 
-	// Mode is construction-static: the selection stays single or multiple for the group's life.
-	const valueType = untrack(() => type);
+	// Mode is fixed at mount: `value` keeps the shape it was declared with.
+	// svelte-ignore state_referenced_locally
+	const valueType = type;
 
-	// The group owns a mode-specific controlled value.
 	repairBindable(
 		() => value,
 		() => {
@@ -33,10 +32,20 @@
 	);
 
 	const groupState = ToolbarGroupState.create({
-		id: boxWith(() => id),
-		disabled: boxWith(() => disabled),
-		type: valueType,
-		value: boxWith(
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+		selection: new SelectionValue(
+			valueType,
 			() => value ?? emptySelection(valueType),
 			(v) => {
 				value = v;
@@ -44,10 +53,6 @@
 				onValueChange(v as any);
 			},
 		),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'toolbar-group', class: 'flex items-center gap-1' }, restProps, groupState.props));

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/components/tooltip-content.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { join } from 'overrule';
 	import type { ClassValue } from 'svelte/elements';
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TooltipContentProps } from '../types.js';
 	import { TooltipContentState } from '../tooltip.svelte.js';
@@ -28,13 +27,21 @@
 	}: TooltipContentProps & { arrowClasses?: ClassValue; portalProps?: unknown } = $props();
 
 	const contentState = TooltipContentState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		onInteractOutside: boxWith(() => onInteractOutside),
-		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+		get onInteractOutside() {
+			return onInteractOutside;
+		},
+		get onEscapeKeydown() {
+			return onEscapeKeydown;
+		},
 	});
 
 	const lifecycleProps = useNativePopoverLifecycle(contentState);

package/src/lib/components/tooltip/components/tooltip-provider.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import type { TooltipProviderProps } from '../types.js';
 	import { TooltipProviderState } from '../tooltip.svelte.js';
 
@@ -14,12 +13,24 @@
 	}: TooltipProviderProps = $props();
 
 	TooltipProviderState.create({
-		delayDuration: boxWith(() => delayDuration),
-		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
-		disableHoverableContent: boxWith(() => disableHoverableContent),
-		disabled: boxWith(() => disabled),
-		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
-		skipDelayDuration: boxWith(() => skipDelayDuration),
+		get delayDuration() {
+			return delayDuration;
+		},
+		get disableCloseOnTriggerClick() {
+			return disableCloseOnTriggerClick;
+		},
+		get disableHoverableContent() {
+			return disableHoverableContent;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get ignoreNonKeyboardFocus() {
+			return ignoreNonKeyboardFocus;
+		},
+		get skipDelayDuration() {
+			return skipDelayDuration;
+		},
 	});
 </script>
 

package/src/lib/components/tooltip/components/tooltip-trigger.svelte

@@ -3,7 +3,6 @@
 </script>
 
 <script lang="ts" generics="T = never">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TooltipTriggerProps } from '../types.js';
 	import { TooltipTriggerState } from '../tooltip.svelte.js';
@@ -25,15 +24,27 @@
 	}: TooltipTriggerProps<T> = $props();
 
 	const triggerState = TooltipTriggerState.create({
-		id: boxWith(() => id),
-		disabled: boxWith(() => disabled ?? false),
-		tabindex: boxWith(() => tabindex ?? 0),
-		payload: boxWith(() => payload),
-		tether: boxWith(() => tether),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return disabled ?? false;
+		},
+		get tabindex() {
+			return tabindex ?? 0;
+		},
+		get payload() {
+			return payload;
+		},
+		get tether() {
+			return tether;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'tooltip-trigger' }, restProps, triggerState.props, { type }));

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

@@ -3,7 +3,6 @@
 </script>
 
 <script lang="ts" generics="T = never">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { OpenCell } from '../../../internal/open-cell.svelte.js';
 	import type { TooltipRootProps } from '../types.js';
 	import { TooltipRootState } from '../tooltip.svelte.js';
@@ -22,34 +21,48 @@
 		children,
 	}: TooltipRootProps<T> = $props();
 
-	// Cell over the source prop; the engine keeps its boxed-open interface (vendored,
-	// ADR 0006) — the box is a bridge over the cell, so the cell owns `open`.
 	// svelte-ignore state_referenced_locally
 	const cell = givenCell ?? new OpenCell(() => open);
 
 	const rootState = TooltipRootState.create({
-		open: boxWith(
-			() => cell.open,
-			(v) => (cell.open = v),
-		),
-		triggerId: boxWith(
-			() => triggerId,
-			(v) => {
-				triggerId = v;
-			},
-		),
-		delayDuration: boxWith(() => delayDuration),
-		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
-		disableHoverableContent: boxWith(() => disableHoverableContent),
-		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
-		disabled: boxWith(() => disabled),
-		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
-		tether: boxWith(() => tether),
+		get open() {
+			return cell.open;
+		},
+		set open(v) {
+			cell.open = v;
+		},
+		get triggerId() {
+			return triggerId;
+		},
+		set triggerId(v) {
+			triggerId = v;
+		},
+		get delayDuration() {
+			return delayDuration;
+		},
+		get disableCloseOnTriggerClick() {
+			return disableCloseOnTriggerClick;
+		},
+		get disableHoverableContent() {
+			return disableHoverableContent;
+		},
+		get ignoreNonKeyboardFocus() {
+			return ignoreNonKeyboardFocus;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get onOpenChangeComplete() {
+			return onOpenChangeComplete;
+		},
+		get tether() {
+			return tether;
+		},
 	});
 </script>
 
 {@render children?.({
-	open: rootState.opts.open.current,
+	open: rootState.opts.open,
 	triggerId: rootState.activeTriggerId,
 	payload: rootState.activePayload as [T] extends [never] ? null : T | null,
 })}