sheer-ui 0.4.0 → 0.4.3

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

@@ -1,7 +1,7 @@
-import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import { createContext, onDestroy, untrack } from 'svelte';
 import { createBitsAttrs, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
-import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, RefOpts } from '../../internal/types.js';
 import { kbd } from '../../internal/kbd.js';
 import { useOpenChangeComplete } from '../../internal/animations-settled.svelte.js';
 
@@ -19,12 +19,10 @@ const [getDialogRoot, setDialogRoot, hasDialogRoot] = createContext<DialogRootSt
 import { OpenCell as DialogState } from '../../internal/open-cell.svelte.js';
 export { DialogState };
 
-interface DialogRootStateOpts
-	extends ReadableBoxedValues<{
-		variant: DialogVariant;
-		onOpenChangeComplete: OnChangeFn<boolean>;
-	}> {
-	cell: DialogState;
+interface DialogRootStateOpts {
+	readonly variant: DialogVariant;
+	readonly onOpenChangeComplete: OnChangeFn<boolean>;
+	open: boolean;
 }
 
 export class DialogRootState {
@@ -34,7 +32,6 @@ export class DialogRootState {
 	}
 
 	readonly opts: DialogRootStateOpts;
-	readonly cell: DialogState;
 	triggerNode = $state<HTMLElement | null>(null);
 	contentNode = $state<HTMLElement | null>(null);
 	descriptionNode = $state<HTMLElement | null>(null);
@@ -42,33 +39,32 @@ export class DialogRootState {
 	triggerId = $state<string | undefined>(undefined);
 	titleState = $state<DialogTitleState | null>(null);
 	descriptionState = $state<DialogDescriptionState | null>(null);
-	readonly titleId = $derived.by(() => this.titleState?.opts.id.current);
-	readonly descriptionId = $derived.by(() => this.descriptionState?.opts.id.current);
+	readonly titleId = $derived.by(() => this.titleState?.opts.id);
+	readonly descriptionId = $derived.by(() => this.descriptionState?.opts.id);
 	cancelNode = $state<HTMLElement | null>(null);
 	nestedOpenCount = $state(0);
 	readonly depth: number;
 	readonly parent: DialogRootState | null;
 	readonly #completion: { readonly pending: boolean };
 	/** Rendered: open, or closing with the exit still settling — the window the headless content's scroll lock covers. */
-	readonly present = $derived.by(() => this.cell.open || this.#completion.pending);
+	readonly present = $derived.by(() => this.opts.open || this.#completion.pending);
 
 	constructor(opts: DialogRootStateOpts, parent: DialogRootState | null) {
 		this.opts = opts;
-		this.cell = opts.cell;
 		this.parent = parent;
 		this.depth = parent ? parent.depth + 1 : 0;
 		this.handleOpen = this.handleOpen.bind(this);
 		this.handleClose = this.handleClose.bind(this);
 
 		this.#completion = useOpenChangeComplete(
-			() => this.cell.open,
+			() => this.opts.open,
 			() => this.contentNode,
-			(isOpen) => this.opts.onOpenChangeComplete.current(isOpen),
+			(isOpen) => this.opts.onOpenChangeComplete(isOpen),
 		);
 
 		let started = false;
 		$effect(() => {
-			const isOpen = this.cell.open;
+			const isOpen = this.opts.open;
 			if (!started) {
 				started = true;
 				return;
@@ -84,22 +80,22 @@ export class DialogRootState {
 		});
 
 		onDestroy(() => {
-			if (this.cell.open) {
+			if (this.opts.open) {
 				this.parent?.decrementNested();
 			}
 		});
 	}
 
 	handleOpen() {
-		this.cell.open = true;
+		this.opts.open = true;
 	}
 
 	handleClose() {
-		this.cell.open = false;
+		this.opts.open = false;
 	}
 
 	getBitsAttr: typeof dialogAttrs.getAttr = (part) => {
-		return dialogAttrs.getAttr(part, this.opts.variant.current);
+		return dialogAttrs.getAttr(part, this.opts.variant);
 	};
 
 	incrementNested() {
@@ -116,12 +112,14 @@ export class DialogRootState {
 	readonly sharedProps = $derived.by(
 		() =>
 			({
-				'data-state': getDataOpenClosed(this.cell.open),
+				'data-state': getDataOpenClosed(this.opts.open),
 			}) as const,
 	);
 }
 
-interface DialogTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{ disabled: boolean }> {}
+interface DialogTriggerStateOpts extends RefOpts {
+	readonly disabled: boolean;
+}
 
 export class DialogTriggerState {
 	static create(opts: DialogTriggerStateOpts) {
@@ -135,22 +133,25 @@ export class DialogTriggerState {
 	constructor(opts: DialogTriggerStateOpts, root: DialogRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => {
-			this.root.triggerNode = v;
-			this.root.triggerId = v?.id;
-		});
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => {
+				this.root.triggerNode = v;
+				this.root.triggerId = v?.id;
+			},
+		);
 		this.onclick = this.onclick.bind(this);
 		this.onkeydown = this.onkeydown.bind(this);
 	}
 
 	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.button > 0) return;
 		this.root.handleOpen();
 	}
 
 	onkeydown(e: BitsKeyboardEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
 			e.preventDefault();
 			this.root.handleOpen();
@@ -160,21 +161,24 @@ export class DialogTriggerState {
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				'aria-haspopup': 'dialog',
-				'aria-expanded': boolToStr(this.root.cell.open),
+				'aria-expanded': boolToStr(this.root.opts.open),
 				'aria-controls': this.root.contentId,
 				[this.root.getBitsAttr('trigger')]: '',
 				onkeydown: this.onkeydown,
 				onclick: this.onclick,
-				disabled: this.opts.disabled.current ? true : undefined,
+				disabled: this.opts.disabled ? true : undefined,
 				...this.root.sharedProps,
 				...this.attachment,
 			}) as const,
 	);
 }
 
-interface DialogCloseStateOpts extends WithRefOpts, ReadableBoxedValues<{ variant: 'action' | 'cancel' | 'close'; disabled: boolean }> {}
+interface DialogCloseStateOpts extends RefOpts {
+	readonly variant: 'action' | 'cancel' | 'close';
+	readonly disabled: boolean;
+}
 
 export class DialogCloseState {
 	static create(opts: DialogCloseStateOpts) {
@@ -188,19 +192,19 @@ export class DialogCloseState {
 	constructor(opts: DialogCloseStateOpts, root: DialogRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.onclick = this.onclick.bind(this);
 		this.onkeydown = this.onkeydown.bind(this);
 	}
 
 	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.button > 0) return;
 		this.root.handleClose();
 	}
 
 	onkeydown(e: BitsKeyboardEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
 			e.preventDefault();
 			this.root.handleClose();
@@ -210,11 +214,11 @@ export class DialogCloseState {
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				[this.root.getBitsAttr(this.opts.variant.current)]: '',
+				id: this.opts.id,
+				[this.root.getBitsAttr(this.opts.variant)]: '',
 				onclick: this.onclick,
 				onkeydown: this.onkeydown,
-				disabled: this.opts.disabled.current ? true : undefined,
+				disabled: this.opts.disabled ? true : undefined,
 				tabindex: 0,
 				...this.root.sharedProps,
 				...this.attachment,
@@ -222,7 +226,9 @@ export class DialogCloseState {
 	);
 }
 
-interface DialogTitleStateOpts extends WithRefOpts, ReadableBoxedValues<{ level: 1 | 2 | 3 | 4 | 5 | 6 }> {}
+interface DialogTitleStateOpts extends RefOpts {
+	readonly level: 1 | 2 | 3 | 4 | 5 | 6;
+}
 
 export class DialogTitleState {
 	static create(opts: DialogTitleStateOpts) {
@@ -237,15 +243,15 @@ export class DialogTitleState {
 		this.opts = opts;
 		this.root = root;
 		this.root.titleState = this;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				role: 'heading',
-				'aria-level': this.opts.level.current,
+				'aria-level': this.opts.level,
 				[this.root.getBitsAttr('title')]: '',
 				...this.root.sharedProps,
 				...this.attachment,
@@ -253,7 +259,7 @@ export class DialogTitleState {
 	);
 }
 
-interface DialogDescriptionStateOpts extends WithRefOpts {}
+interface DialogDescriptionStateOpts extends RefOpts {}
 
 export class DialogDescriptionState {
 	static create(opts: DialogDescriptionStateOpts) {
@@ -268,15 +274,18 @@ export class DialogDescriptionState {
 		this.opts = opts;
 		this.root = root;
 		this.root.descriptionState = this;
-		this.attachment = attachRef(this.opts.ref, (v) => {
-			this.root.descriptionNode = v;
-		});
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => {
+				this.root.descriptionNode = v;
+			},
+		);
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				[this.root.getBitsAttr('description')]: '',
 				...this.root.sharedProps,
 				...this.attachment,
@@ -284,7 +293,7 @@ export class DialogDescriptionState {
 	);
 }
 
-interface DialogContentStateOpts extends WithRefOpts {}
+interface DialogContentStateOpts extends RefOpts {}
 
 export class DialogContentState {
 	static create(opts: DialogContentStateOpts) {
@@ -298,26 +307,29 @@ export class DialogContentState {
 	constructor(opts: DialogContentStateOpts, root: DialogRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => {
-			this.root.contentNode = v;
-			this.root.contentId = v?.id;
-		});
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => {
+				this.root.contentNode = v;
+				this.root.contentId = v?.id;
+			},
+		);
 	}
 
-	readonly snippetProps = $derived.by(() => ({ open: this.root.cell.open }));
+	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open }));
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				role: this.root.opts.variant.current === 'alert-dialog' ? 'alertdialog' : 'dialog',
+				id: this.opts.id,
+				role: this.root.opts.variant === 'alert-dialog' ? 'alertdialog' : 'dialog',
 				'aria-modal': 'true',
 				'aria-describedby': this.root.descriptionId,
 				'aria-labelledby': this.root.titleId,
 				[this.root.getBitsAttr('content')]: '',
 				style: {
 					pointerEvents: 'auto',
-					outline: this.root.opts.variant.current === 'alert-dialog' ? 'none' : undefined,
+					outline: this.root.opts.variant === 'alert-dialog' ? 'none' : undefined,
 					'--bits-dialog-depth': this.root.depth,
 					'--bits-dialog-nested-count': this.root.nestedOpenCount,
 					// CSS containment isolates style/layout calculations from the rest of the page,
@@ -325,7 +337,7 @@ export class DialogContentState {
 					// Paint is omitted so tooltips/selects can render outside dialog bounds.
 					contain: 'layout style',
 				},
-				tabindex: this.root.opts.variant.current === 'alert-dialog' ? -1 : undefined,
+				tabindex: this.root.opts.variant === 'alert-dialog' ? -1 : undefined,
 				'data-nested-open': boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
 				'data-nested': boolToEmptyStrOrUndef(this.root.parent !== null),
 				...this.root.sharedProps,
@@ -334,7 +346,7 @@ export class DialogContentState {
 	);
 }
 
-interface DialogOverlayStateOpts extends WithRefOpts {}
+interface DialogOverlayStateOpts extends RefOpts {}
 
 export class DialogOverlayState {
 	static create(opts: DialogOverlayStateOpts) {
@@ -347,15 +359,15 @@ export class DialogOverlayState {
 	constructor(opts: DialogOverlayStateOpts, root: DialogRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 	}
 
-	readonly snippetProps = $derived.by(() => ({ open: this.root.cell.open }));
+	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open }));
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				[this.root.getBitsAttr('overlay')]: '',
 				style: {
 					pointerEvents: 'auto',

package/src/lib/components/drawer/drawer.svelte

@@ -118,9 +118,14 @@
 	});
 
 	DialogRootState.create({
-		variant: boxWith(() => 'dialog'),
-		cell: dialogCell,
-		onOpenChangeComplete: boxWith(() => handleOpenChangeComplete),
+		variant: 'dialog',
+		get open() {
+			return dialogCell.open;
+		},
+		set open(v) {
+			dialogCell.open = v;
+		},
+		onOpenChangeComplete: handleOpenChangeComplete,
 	});
 </script>
 

package/src/lib/components/link-preview/components/link-preview-content.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { LinkPreviewContentProps } from '../types.js';
 	import { LinkPreviewContentState } from '../link-preview.svelte.js';
@@ -25,13 +24,21 @@
 	}: LinkPreviewContentProps = $props();
 
 	const contentState = LinkPreviewContentState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
-		onInteractOutside: boxWith(() => onInteractOutside),
-		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		get id() {
+			return id;
+		},
+		get onInteractOutside() {
+			return onInteractOutside;
+		},
+		get onEscapeKeydown() {
+			return onEscapeKeydown;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const lifecycleProps = useNativePopoverLifecycle(contentState);

package/src/lib/components/link-preview/components/link-preview-trigger.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { LinkPreviewTriggerProps } from '../types.js';
 	import { LinkPreviewTriggerState } from '../link-preview.svelte.js';
@@ -10,11 +9,15 @@
 	let { ref = $bindable(null), id = createId(uid), child, children, ...restProps }: LinkPreviewTriggerProps = $props();
 
 	const triggerState = LinkPreviewTriggerState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'hover-card-trigger' }, restProps, triggerState.props));

package/src/lib/components/link-preview/components/link-preview.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { OpenCell } from '../../../internal/open-cell.svelte.js';
 	import type { LinkPreviewRootProps } from '../types.js';
 	import { LinkPreviewRootState } from '../link-preview.svelte.js';
@@ -14,20 +13,29 @@
 		children,
 	}: LinkPreviewRootProps = $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`.
+	// Cell over the source prop; the cell owns `open`, the engine reads and writes it through it.
 	// svelte-ignore state_referenced_locally
 	const cell = givenCell ?? new OpenCell(() => open);
 
 	LinkPreviewRootState.create({
-		disabled: boxWith(() => disabled),
-		open: boxWith(
-			() => cell.open,
-			(v) => (cell.open = v),
-		),
-		openDelay: boxWith(() => openDelay),
-		closeDelay: boxWith(() => closeDelay),
-		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+		get open() {
+			return cell.open;
+		},
+		set open(v) {
+			cell.open = v;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get openDelay() {
+			return openDelay;
+		},
+		get closeDelay() {
+			return closeDelay;
+		},
+		get onOpenChangeComplete() {
+			return onOpenChangeComplete;
+		},
 	});
 </script>
 

package/src/lib/components/link-preview/link-preview.svelte.ts

@@ -1,9 +1,9 @@
-import { attachRef, DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef, DOMContext } from '../../internal/tools/index.js';
 import { on } from 'svelte/events';
 import { createContext, onDestroy, untrack } from 'svelte';
 import { createBitsAttrs, boolToStr, getDataOpenClosed } from '../../internal/attrs.js';
 import { isElement } from '../../internal/tools/utils/dom.js';
-import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, RefOpts } from '../../internal/types.js';
 import { getTabbableCandidates } from '../../internal/tabbable.js';
 import { SafePolygon } from '../../internal/safe-polygon.svelte.js';
 import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
@@ -15,17 +15,13 @@ const linkPreviewAttrs = createBitsAttrs({
 
 const [getLinkPreviewRoot, setLinkPreviewRoot] = createContext<LinkPreviewRootState>();
 
-interface LinkPreviewRootStateOpts
-	extends
-		WritableBoxedValues<{
-			open: boolean;
-		}>,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			openDelay: number;
-			closeDelay: number;
-			onOpenChangeComplete: OnChangeFn<boolean>;
-		}> {}
+interface LinkPreviewRootStateOpts {
+	open: boolean;
+	readonly disabled: boolean;
+	readonly openDelay: number;
+	readonly closeDelay: number;
+	readonly onOpenChangeComplete: OnChangeFn<boolean>;
+}
 
 export class LinkPreviewRootState {
 	static create(opts: LinkPreviewRootStateOpts) {
@@ -41,17 +37,17 @@ export class LinkPreviewRootState {
 	triggerNode = $state<HTMLElement | null>(null);
 	domContext: DOMContext = new DOMContext(() => null);
 	#openTimer = createEffectTimeout(() => {
-		this.opts.open.current = true;
-	}, () => this.opts.openDelay.current);
+		this.opts.open = true;
+	}, () => this.opts.openDelay);
 	#closeTimer = createEffectTimeout(() => {
-		this.opts.open.current = false;
-	}, () => this.opts.closeDelay.current);
+		this.opts.open = false;
+	}, () => this.opts.closeDelay);
 
 	constructor(opts: LinkPreviewRootStateOpts) {
 		this.opts = opts;
 
 		$effect(() => {
-			const isOpen = this.opts.open.current;
+			const isOpen = this.opts.open;
 			return untrack(() => {
 				if (!isOpen) {
 					this.hasSelection = false;
@@ -99,13 +95,13 @@ export class LinkPreviewRootState {
 
 	handleOpen() {
 		this.clearTimeout();
-		if (this.opts.open.current || this.opts.disabled.current) return;
+		if (this.opts.open || this.opts.disabled) return;
 		this.#openTimer.start();
 	}
 
 	immediateClose() {
 		this.clearTimeout();
-		this.opts.open.current = false;
+		this.opts.open = false;
 	}
 
 	handleClose() {
@@ -117,7 +113,7 @@ export class LinkPreviewRootState {
 	}
 }
 
-interface LinkPreviewTriggerStateOpts extends WithRefOpts {}
+interface LinkPreviewTriggerStateOpts extends RefOpts {}
 
 export class LinkPreviewTriggerState {
 	static create(opts: LinkPreviewTriggerStateOpts) {
@@ -131,8 +127,11 @@ export class LinkPreviewTriggerState {
 	constructor(opts: LinkPreviewTriggerStateOpts, root: LinkPreviewRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
-		this.root.domContext = new DOMContext(opts.ref);
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => (this.root.triggerNode = v),
+		);
+		this.root.domContext = new DOMContext(() => opts.ref);
 		this.onpointerenter = this.onpointerenter.bind(this);
 		this.onpointerleave = this.onpointerleave.bind(this);
 		this.onfocus = this.onfocus.bind(this);
@@ -147,7 +146,7 @@ export class LinkPreviewTriggerState {
 	onpointerleave(e: BitsPointerEvent) {
 		if (e.pointerType === 'touch') return;
 		// The content is always mounted (native popover, display toggled), so open is the only gate.
-		if (!this.root.opts.open.current) {
+		if (!this.root.opts.open) {
 			this.root.immediateClose();
 		}
 	}
@@ -164,10 +163,10 @@ export class LinkPreviewTriggerState {
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				'aria-haspopup': 'dialog',
-				'aria-expanded': boolToStr(this.root.opts.open.current),
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
+				'aria-expanded': boolToStr(this.root.opts.open),
+				'data-state': getDataOpenClosed(this.root.opts.open),
 				'aria-controls': this.root.contentNode?.id,
 				role: 'button',
 				[linkPreviewAttrs.trigger]: '',
@@ -180,13 +179,10 @@ export class LinkPreviewTriggerState {
 	);
 }
 
-interface LinkPreviewContentStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			onInteractOutside: (e: PointerEvent) => void;
-			onEscapeKeydown: (e: KeyboardEvent) => void;
-		}> {}
+interface LinkPreviewContentStateOpts extends RefOpts {
+	readonly onInteractOutside: (e: PointerEvent) => void;
+	readonly onEscapeKeydown: (e: KeyboardEvent) => void;
+}
 
 export class LinkPreviewContentState {
 	static create(opts: LinkPreviewContentStateOpts) {
@@ -200,16 +196,19 @@ export class LinkPreviewContentState {
 	constructor(opts: LinkPreviewContentStateOpts, root: LinkPreviewRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
-		this.root.domContext = new DOMContext(opts.ref);
+		this.attachment = attachRef<HTMLElement>(
+			(v) => (opts.ref = v),
+			(v) => (this.root.contentNode = v),
+		);
+		this.root.domContext = new DOMContext(() => opts.ref);
 		this.onpointerdown = this.onpointerdown.bind(this);
 		this.onpointerenter = this.onpointerenter.bind(this);
 		this.onfocusout = this.onfocusout.bind(this);
 
 		new SafePolygon({
 			triggerNode: () => this.root.triggerNode,
-			contentNode: () => this.opts.ref.current,
-			enabled: () => this.root.opts.open.current,
+			contentNode: () => this.opts.ref,
+			enabled: () => this.root.opts.open,
 			onPointerExit: () => {
 				this.root.handleClose();
 			},
@@ -241,25 +240,25 @@ export class LinkPreviewContentState {
 	}
 
 	onInteractOutside = (e: PointerEvent) => {
-		this.opts.onInteractOutside.current(e);
+		this.opts.onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		this.root.handleClose();
 	};
 
 	onEscapeKeydown = (e: KeyboardEvent) => {
-		this.opts.onEscapeKeydown.current?.(e);
+		this.opts.onEscapeKeydown?.(e);
 		if (e.defaultPrevented) return;
 		this.root.handleClose();
 	};
 
-	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open }));
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				tabindex: -1,
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
+				'data-state': getDataOpenClosed(this.root.opts.open),
 				[linkPreviewAttrs.content]: '',
 				onpointerdown: this.onpointerdown,
 				onpointerenter: this.onpointerenter,