sheer-ui 0.0.0

package/src/lib/components/scroll-area/scroll-area.svelte.ts

@@ -0,0 +1,946 @@
+/**
+ * This logic is adapted from Radix UI ScrollArea component.
+ * https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/ScrollArea.tsx
+ * Credit to Jenna Smith (@jjenzz) for the original implementation.
+ * Incredible thought must have went into solving all the intricacies of this component.
+ */
+
+import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
+import { createContext, getAbortSignal, untrack } from 'svelte';
+import { simpleBox, attachRef, DOMContext, getWindow, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import type { ScrollAreaType } from './types.js';
+import type { BitsPointerEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { type Direction, type Orientation, mergeProps } from '../../internal/index.js';
+import { createId } from '../../internal/create-id.js';
+import { on } from 'svelte/events';
+import { createBitsAttrs } from '../../internal/attrs.js';
+import { StateMachine } from '../../internal/state-machine.js';
+import { observeResizeMany } from '../../internal/svelte-resize-observer.svelte.js';
+
+const scrollAreaAttrs = createBitsAttrs({
+	component: 'scroll-area',
+	parts: ['root', 'viewport', 'corner', 'thumb', 'scrollbar'],
+});
+
+export const [getScrollAreaRoot, setScrollAreaRoot] = createContext<ScrollAreaRootState>();
+export const [getScrollAreaScrollbar, setScrollAreaScrollbar] = createContext<ScrollAreaScrollbarState>();
+export const [getScrollAreaScrollbarVisible, setScrollAreaScrollbarVisible] = createContext<ScrollAreaScrollbarVisibleState>();
+export const [getScrollAreaScrollbarAxis, setScrollAreaScrollbarAxis] = createContext<ScrollbarAxis>();
+export const [getScrollAreaScrollbarShared, setScrollAreaScrollbarShared] = createContext<ScrollAreaScrollbarSharedState>();
+
+interface Sizes {
+	content: number;
+	viewport: number;
+	scrollbar: {
+		size: number;
+		paddingStart: number;
+		paddingEnd: number;
+	};
+}
+
+interface ScrollAreaRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			dir: Direction;
+			type: ScrollAreaType;
+			scrollHideDelay: number;
+		}> {}
+
+export class ScrollAreaRootState {
+	static create(opts: ScrollAreaRootStateOpts) {
+		return setScrollAreaRoot(new ScrollAreaRootState(opts));
+	}
+
+	readonly opts: ScrollAreaRootStateOpts;
+	readonly attachment: RefAttachment;
+	scrollAreaNode = $state<HTMLElement | null>(null);
+	viewportNode = $state<HTMLElement | null>(null);
+	contentNode = $state<HTMLElement | null>(null);
+	scrollbarXNode = $state<HTMLElement | null>(null);
+	scrollbarYNode = $state<HTMLElement | null>(null);
+	cornerWidth = $state<number>(0);
+	cornerHeight = $state<number>(0);
+	scrollbarXEnabled = $state(false);
+	scrollbarYEnabled = $state(false);
+	domContext: DOMContext;
+
+	constructor(opts: ScrollAreaRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(opts.ref, (v) => (this.scrollAreaNode = v));
+		this.domContext = new DOMContext(opts.ref);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				dir: this.opts.dir.current,
+				style: {
+					position: 'relative',
+					'--bits-scroll-area-corner-height': `${this.cornerHeight}px`,
+					'--bits-scroll-area-corner-width': `${this.cornerWidth}px`,
+				},
+				[scrollAreaAttrs.root]: '',
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface ScrollAreaViewportStateOpts extends WithRefOpts {}
+
+export class ScrollAreaViewportState {
+	static create(opts: ScrollAreaViewportStateOpts) {
+		return new ScrollAreaViewportState(opts, getScrollAreaRoot());
+	}
+
+	readonly opts: ScrollAreaViewportStateOpts;
+	readonly root: ScrollAreaRootState;
+	readonly attachment: RefAttachment;
+	#contentId = simpleBox('');
+	#contentRef = simpleBox<HTMLElement | null>(null);
+	readonly contentAttachment: RefAttachment = attachRef(this.#contentRef, (v) => (this.root.contentNode = v));
+
+	constructor(opts: ScrollAreaViewportStateOpts, root: ScrollAreaRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.#contentId.current = createId('content', opts.id.current);
+		this.attachment = attachRef(opts.ref, (v) => (this.root.viewportNode = v));
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				style: {
+					overflowX: this.root.scrollbarXEnabled ? 'scroll' : 'hidden',
+					overflowY: this.root.scrollbarYEnabled ? 'scroll' : 'hidden',
+				},
+				[scrollAreaAttrs.viewport]: '',
+				...this.attachment,
+			}) as const,
+	);
+
+	readonly contentProps = $derived.by(
+		() =>
+			({
+				id: this.#contentId.current,
+				'data-scroll-area-content': '',
+				/**
+				 * When horizontal scrollbar is visible: this element should be at least
+				 * as wide as its children for size calculations to work correctly.
+				 *
+				 * When horizontal scrollbar is NOT visible: this element's width should
+				 * be constrained by the parent container to enable `text-overflow: ellipsis`
+				 */
+				style: { minWidth: this.root.scrollbarXEnabled ? 'fit-content' : undefined },
+				...this.contentAttachment,
+			}) as const,
+	);
+}
+
+interface ScrollAreaScrollbarStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			orientation: Orientation;
+		}> {}
+
+export class ScrollAreaScrollbarState {
+	static create(opts: ScrollAreaScrollbarStateOpts) {
+		return setScrollAreaScrollbar(new ScrollAreaScrollbarState(opts, getScrollAreaRoot()));
+	}
+	readonly opts: ScrollAreaScrollbarStateOpts;
+	readonly root: ScrollAreaRootState;
+	readonly isHorizontal = $derived.by(() => this.opts.orientation.current === 'horizontal');
+	hasThumb = $state(false);
+
+	constructor(opts: ScrollAreaScrollbarStateOpts, root: ScrollAreaRootState) {
+		this.opts = opts;
+		this.root = root;
+
+		$effect(() => {
+			const isHorizontal = this.isHorizontal;
+			return untrack(() => {
+				if (isHorizontal) {
+					this.root.scrollbarXEnabled = true;
+					return () => {
+						this.root.scrollbarXEnabled = false;
+					};
+				} else {
+					this.root.scrollbarYEnabled = true;
+					return () => {
+						this.root.scrollbarYEnabled = false;
+					};
+				}
+			});
+		});
+	}
+}
+
+export class ScrollAreaScrollbarHoverState {
+	static create() {
+		return new ScrollAreaScrollbarHoverState(getScrollAreaScrollbar());
+	}
+	readonly scrollbar: ScrollAreaScrollbarState;
+	root: ScrollAreaRootState;
+	isVisible = $state(false);
+
+	constructor(scrollbar: ScrollAreaScrollbarState) {
+		this.scrollbar = scrollbar;
+		this.root = scrollbar.root;
+
+		$effect(() => {
+			const scrollAreaNode = this.root.scrollAreaNode;
+			const hideDelay = this.root.opts.scrollHideDelay.current;
+			let hideTimer = 0;
+			if (!scrollAreaNode) return;
+			const handlePointerEnter = () => {
+				this.root.domContext.clearTimeout(hideTimer);
+				untrack(() => (this.isVisible = true));
+			};
+
+			const handlePointerLeave = () => {
+				if (hideTimer) this.root.domContext.clearTimeout(hideTimer);
+				hideTimer = this.root.domContext.setTimeout(() => {
+					untrack(() => {
+						this.scrollbar.hasThumb = false;
+						this.isVisible = false;
+					});
+				}, hideDelay);
+			};
+
+			const signal = getAbortSignal();
+			on(scrollAreaNode, 'pointerenter', handlePointerEnter, { signal });
+			on(scrollAreaNode, 'pointerleave', handlePointerLeave, { signal });
+
+			return () => {
+				this.root.domContext.getWindow().clearTimeout(hideTimer);
+			};
+		});
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				'data-state': this.isVisible ? 'visible' : 'hidden',
+			}) as const,
+	);
+}
+
+export class ScrollAreaScrollbarScrollState {
+	static create() {
+		return new ScrollAreaScrollbarScrollState(getScrollAreaScrollbar());
+	}
+	readonly scrollbar: ScrollAreaScrollbarState;
+	readonly root: ScrollAreaRootState;
+	readonly machine = new StateMachine('hidden', {
+		hidden: {
+			SCROLL: 'scrolling',
+		},
+		scrolling: {
+			SCROLL_END: 'idle',
+			POINTER_ENTER: 'interacting',
+		},
+		interacting: {
+			SCROLL: 'interacting',
+			POINTER_LEAVE: 'idle',
+		},
+		idle: {
+			HIDE: 'hidden',
+			SCROLL: 'scrolling',
+			POINTER_ENTER: 'interacting',
+		},
+	});
+	readonly isHidden = $derived.by(() => this.machine.state.current === 'hidden');
+
+	constructor(scrollbar: ScrollAreaScrollbarState) {
+		this.scrollbar = scrollbar;
+		this.root = scrollbar.root;
+
+		const debounceScrollend = createEffectTimeout(() => this.machine.dispatch('SCROLL_END'), () => 100);
+
+		$effect(() => {
+			const _state = this.machine.state.current;
+			const scrollHideDelay = this.root.opts.scrollHideDelay.current;
+			if (_state === 'idle') {
+				const hideTimer = this.root.domContext.setTimeout(() => this.machine.dispatch('HIDE'), scrollHideDelay);
+				return () => this.root.domContext.clearTimeout(hideTimer);
+			}
+		});
+
+		$effect(() => {
+			const viewportNode = this.root.viewportNode;
+			if (!viewportNode) return;
+			const scrollDirection = this.scrollbar.isHorizontal ? 'scrollLeft' : 'scrollTop';
+
+			let prevScrollPos = viewportNode[scrollDirection];
+			const handleScroll = () => {
+				const scrollPos = viewportNode[scrollDirection];
+				const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
+				if (hasScrollInDirectionChanged) {
+					this.machine.dispatch('SCROLL');
+					debounceScrollend.start();
+				}
+				prevScrollPos = scrollPos;
+			};
+
+			const unsubListener = on(viewportNode, 'scroll', handleScroll);
+			return unsubListener;
+		});
+
+		this.onpointerenter = this.onpointerenter.bind(this);
+		this.onpointerleave = this.onpointerleave.bind(this);
+	}
+
+	onpointerenter(_: BitsPointerEvent) {
+		this.machine.dispatch('POINTER_ENTER');
+	}
+
+	onpointerleave(_: BitsPointerEvent) {
+		this.machine.dispatch('POINTER_LEAVE');
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				'data-state': this.machine.state.current === 'hidden' ? 'hidden' : 'visible',
+				onpointerenter: this.onpointerenter,
+				onpointerleave: this.onpointerleave,
+			}) as const,
+	);
+}
+
+export class ScrollAreaScrollbarAutoState {
+	static create() {
+		return new ScrollAreaScrollbarAutoState(getScrollAreaScrollbar());
+	}
+	readonly scrollbar: ScrollAreaScrollbarState;
+	readonly root: ScrollAreaRootState;
+	isVisible = $state(false);
+
+	constructor(scrollbar: ScrollAreaScrollbarState) {
+		this.scrollbar = scrollbar;
+		this.root = scrollbar.root;
+
+		const handleResize = createEffectTimeout(() => {
+			const viewportNode = this.root.viewportNode;
+			if (!viewportNode) return;
+			const isOverflowX = viewportNode.offsetWidth < viewportNode.scrollWidth;
+			const isOverflowY = viewportNode.offsetHeight < viewportNode.scrollHeight;
+			this.isVisible = this.scrollbar.isHorizontal ? isOverflowX : isOverflowY;
+		}, () => 10);
+
+		observeResizeMany(() => [this.root.viewportNode, this.root.contentNode], handleResize.start);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				'data-state': this.isVisible ? 'visible' : 'hidden',
+			}) as const,
+	);
+}
+
+export class ScrollAreaScrollbarVisibleState {
+	static create() {
+		return setScrollAreaScrollbarVisible(new ScrollAreaScrollbarVisibleState(getScrollAreaScrollbar()));
+	}
+	readonly scrollbar: ScrollAreaScrollbarState;
+	readonly root: ScrollAreaRootState;
+	thumbNode = $state<HTMLElement | null>(null);
+	pointerOffset = $state(0);
+	sizes = $state.raw<Sizes>({
+		content: 0,
+		viewport: 0,
+		scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },
+	});
+	readonly thumbRatio = $derived.by(() => getThumbRatio(this.sizes.viewport, this.sizes.content));
+	readonly hasThumb = $derived.by(() => Boolean(this.thumbRatio > 0 && this.thumbRatio < 1));
+	// this needs to be a $state to properly restore the transform style when the scrollbar
+	// goes from a hidden to visible state, otherwise it will start at the beginning of the
+	// scrollbar and flicker to the correct position after
+	prevTransformStyle = $state('');
+
+	constructor(scrollbar: ScrollAreaScrollbarState) {
+		this.scrollbar = scrollbar;
+		this.root = scrollbar.root;
+
+		$effect(() => {
+			this.scrollbar.hasThumb = this.hasThumb;
+		});
+
+		$effect(() => {
+			if (!this.scrollbar.hasThumb && this.thumbNode) {
+				this.prevTransformStyle = this.thumbNode.style.transform;
+			}
+		});
+	}
+
+	setSizes(sizes: Sizes) {
+		this.sizes = sizes;
+	}
+
+	getScrollPosition(pointerPos: number, dir?: Direction) {
+		return getScrollPositionFromPointer({
+			pointerPos,
+			pointerOffset: this.pointerOffset,
+			sizes: this.sizes,
+			dir,
+		});
+	}
+
+	onThumbPointerUp() {
+		this.pointerOffset = 0;
+	}
+
+	onThumbPointerDown(pointerPos: number) {
+		this.pointerOffset = pointerPos;
+	}
+
+	xOnThumbPositionChange() {
+		if (!(this.root.viewportNode && this.thumbNode)) return;
+		const scrollPos = this.root.viewportNode.scrollLeft;
+		const offset = getThumbOffsetFromScroll({
+			scrollPos,
+			sizes: this.sizes,
+			dir: this.root.opts.dir.current,
+		});
+		const transformStyle = `translate3d(${offset}px, 0, 0)`;
+		this.thumbNode.style.transform = transformStyle;
+		this.prevTransformStyle = transformStyle;
+	}
+
+	xOnWheelScroll(scrollPos: number) {
+		if (!this.root.viewportNode) return;
+		this.root.viewportNode.scrollLeft = scrollPos;
+	}
+
+	xOnDragScroll(pointerPos: number) {
+		if (!this.root.viewportNode) return;
+		this.root.viewportNode.scrollLeft = this.getScrollPosition(pointerPos, this.root.opts.dir.current);
+	}
+
+	yOnThumbPositionChange() {
+		if (!(this.root.viewportNode && this.thumbNode)) return;
+		const scrollPos = this.root.viewportNode.scrollTop;
+		const offset = getThumbOffsetFromScroll({ scrollPos, sizes: this.sizes });
+		const transformStyle = `translate3d(0, ${offset}px, 0)`;
+		this.thumbNode.style.transform = transformStyle;
+		this.prevTransformStyle = transformStyle;
+	}
+
+	yOnWheelScroll(scrollPos: number) {
+		if (!this.root.viewportNode) return;
+		this.root.viewportNode.scrollTop = scrollPos;
+	}
+
+	yOnDragScroll(pointerPos: number) {
+		if (!this.root.viewportNode) return;
+		this.root.viewportNode.scrollTop = this.getScrollPosition(pointerPos, this.root.opts.dir.current);
+	}
+}
+
+interface ScrollbarAxisStateOpts extends ReadableBoxedValues<{ mounted: boolean }> {}
+
+interface ScrollbarAxisState {
+	onThumbPointerDown: (pointerPos: { x: number; y: number }) => void;
+	onDragScroll: (pointerPos: { x: number; y: number }) => void;
+	onWheelScroll: (e: WheelEvent, maxScrollPos: number) => void;
+	onResize: () => void;
+	onThumbPositionChange: () => void;
+	onThumbPointerUp: () => void;
+	props: {
+		id: string;
+		'data-orientation': 'horizontal' | 'vertical';
+		style: Record<string, string | number | undefined>;
+	};
+}
+
+abstract class ScrollAreaScrollbarAxisBaseState implements ScrollbarAxisState {
+	readonly opts: ScrollbarAxisStateOpts;
+	readonly scrollbarVis: ScrollAreaScrollbarVisibleState;
+	readonly root: ScrollAreaRootState;
+	readonly scrollbar: ScrollAreaScrollbarState;
+	readonly attachment: RefAttachment;
+	computedStyle = $state<CSSStyleDeclaration>();
+	abstract readonly orientation: 'horizontal' | 'vertical';
+	abstract onThumbPointerDown: (pointerPos: { x: number; y: number }) => void;
+	abstract onDragScroll: (pointerPos: { x: number; y: number }) => void;
+	abstract onWheelScroll: (event: WheelEvent, maxScrollPos: number) => void;
+	abstract onResize: () => void;
+	abstract onThumbPositionChange: () => void;
+	abstract getStyle(): Record<string, string | number | undefined>;
+
+	constructor(
+		opts: ScrollbarAxisStateOpts,
+		scrollbarVis: ScrollAreaScrollbarVisibleState,
+		onAttach: (node: HTMLElement | null) => void,
+	) {
+		this.opts = opts;
+		this.scrollbarVis = scrollbarVis;
+		this.root = scrollbarVis.root;
+		this.scrollbar = scrollbarVis.scrollbar;
+		this.attachment = attachRef(this.scrollbar.opts.ref, onAttach);
+
+		$effect(() => {
+			if (this.scrollbar.opts.ref.current && this.opts.mounted.current) {
+				this.computedStyle = getComputedStyle(this.scrollbar.opts.ref.current);
+			}
+		});
+
+		$effect(() => this.onResize());
+	}
+
+	onThumbPointerUp = () => this.scrollbarVis.onThumbPointerUp();
+	readonly thumbSize = $derived.by(() => getThumbSize(this.scrollbarVis.sizes));
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.scrollbar.opts.id.current,
+				'data-orientation': this.orientation,
+				style: this.getStyle(),
+				...this.attachment,
+			}) as const,
+	);
+}
+
+export class ScrollAreaScrollbarXState extends ScrollAreaScrollbarAxisBaseState {
+	static create(opts: ScrollbarAxisStateOpts) {
+		return setScrollAreaScrollbarAxis(new ScrollAreaScrollbarXState(opts, getScrollAreaScrollbarVisible()));
+	}
+	readonly orientation = 'horizontal' as const;
+
+	constructor(opts: ScrollbarAxisStateOpts, scrollbarVis: ScrollAreaScrollbarVisibleState) {
+		super(opts, scrollbarVis, (node) => (scrollbarVis.root.scrollbarXNode = node));
+	}
+
+	onThumbPointerDown = (pointerPos: { x: number; y: number }) => {
+		this.scrollbarVis.onThumbPointerDown(pointerPos.x);
+	};
+
+	onDragScroll = (pointerPos: { x: number; y: number }) => {
+		this.scrollbarVis.xOnDragScroll(pointerPos.x);
+	};
+
+	onThumbPositionChange = () => {
+		this.scrollbarVis.xOnThumbPositionChange();
+	};
+
+	onWheelScroll = (e: WheelEvent, maxScrollPos: number) => {
+		if (!this.root.viewportNode) return;
+		const scrollPos = this.root.viewportNode.scrollLeft + e.deltaX;
+		this.scrollbarVis.xOnWheelScroll(scrollPos);
+		// prevent window scroll when wheeling scrollbar
+		if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+			e.preventDefault();
+		}
+	};
+
+	onResize = () => {
+		if (!(this.scrollbar.opts.ref.current && this.root.viewportNode && this.computedStyle)) return;
+		this.scrollbarVis.setSizes({
+			content: this.root.viewportNode.scrollWidth,
+			viewport: this.root.viewportNode.offsetWidth,
+			scrollbar: {
+				size: this.scrollbar.opts.ref.current.clientWidth,
+				paddingStart: toInt(this.computedStyle.paddingLeft),
+				paddingEnd: toInt(this.computedStyle.paddingRight),
+			},
+		});
+	};
+
+	getStyle() {
+		return {
+			bottom: 0,
+			left: this.root.opts.dir.current === 'rtl' ? 'var(--bits-scroll-area-corner-width)' : 0,
+			right: this.root.opts.dir.current === 'ltr' ? 'var(--bits-scroll-area-corner-width)' : 0,
+			'--bits-scroll-area-thumb-width': `${this.thumbSize}px`,
+		};
+	}
+}
+
+export class ScrollAreaScrollbarYState extends ScrollAreaScrollbarAxisBaseState {
+	static create(opts: ScrollbarAxisStateOpts) {
+		return setScrollAreaScrollbarAxis(new ScrollAreaScrollbarYState(opts, getScrollAreaScrollbarVisible()));
+	}
+	readonly orientation = 'vertical' as const;
+
+	constructor(opts: ScrollbarAxisStateOpts, scrollbarVis: ScrollAreaScrollbarVisibleState) {
+		super(opts, scrollbarVis, (node) => (scrollbarVis.root.scrollbarYNode = node));
+	}
+
+	onThumbPointerDown = (pointerPos: { x: number; y: number }) => {
+		this.scrollbarVis.onThumbPointerDown(pointerPos.y);
+	};
+
+	onDragScroll = (pointerPos: { x: number; y: number }) => {
+		this.scrollbarVis.yOnDragScroll(pointerPos.y);
+	};
+
+	onThumbPositionChange = () => {
+		this.scrollbarVis.yOnThumbPositionChange();
+	};
+
+	onWheelScroll = (e: WheelEvent, maxScrollPos: number) => {
+		if (!this.root.viewportNode) return;
+		const scrollPos = this.root.viewportNode.scrollTop + e.deltaY;
+		this.scrollbarVis.yOnWheelScroll(scrollPos);
+		// prevent window scroll when wheeling scrollbar
+		if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+			e.preventDefault();
+		}
+	};
+
+	onResize = () => {
+		if (!(this.scrollbar.opts.ref.current && this.root.viewportNode && this.computedStyle)) return;
+		this.scrollbarVis.setSizes({
+			content: this.root.viewportNode.scrollHeight,
+			viewport: this.root.viewportNode.offsetHeight,
+			scrollbar: {
+				size: this.scrollbar.opts.ref.current.clientHeight,
+				paddingStart: toInt(this.computedStyle.paddingTop),
+				paddingEnd: toInt(this.computedStyle.paddingBottom),
+			},
+		});
+	};
+
+	getStyle() {
+		return {
+			top: 0,
+			right: this.root.opts.dir.current === 'ltr' ? 0 : undefined,
+			left: this.root.opts.dir.current === 'rtl' ? 0 : undefined,
+			bottom: 'var(--bits-scroll-area-corner-height)',
+			'--bits-scroll-area-thumb-height': `${this.thumbSize}px`,
+		};
+	}
+}
+
+type ScrollbarAxis = ScrollAreaScrollbarXState | ScrollAreaScrollbarYState;
+
+export class ScrollAreaScrollbarSharedState {
+	static create() {
+		return setScrollAreaScrollbarShared(new ScrollAreaScrollbarSharedState(getScrollAreaScrollbarAxis()));
+	}
+	readonly scrollbarState: ScrollbarAxis;
+	readonly root: ScrollAreaRootState;
+	readonly scrollbarVis: ScrollAreaScrollbarVisibleState;
+	readonly scrollbar: ScrollAreaScrollbarState;
+	rect = $state.raw<DOMRect | null>(null);
+	prevWebkitUserSelect = $state<string>('');
+	handleResize: () => void;
+	handleThumbPositionChange: () => void;
+	handleWheelScroll: (e: WheelEvent, maxScrollPos: number) => void;
+	handleThumbPointerDown: (pointerPos: { x: number; y: number }) => void;
+	handleThumbPointerUp: () => void;
+	readonly maxScrollPos = $derived.by(() => this.scrollbarVis.sizes.content - this.scrollbarVis.sizes.viewport);
+
+	constructor(scrollbarState: ScrollbarAxis) {
+		this.scrollbarState = scrollbarState;
+		this.root = scrollbarState.root;
+		this.scrollbarVis = scrollbarState.scrollbarVis;
+		this.scrollbar = scrollbarState.scrollbarVis.scrollbar;
+		this.handleResize = createEffectTimeout(() => this.scrollbarState.onResize(), () => 10).start;
+		this.handleThumbPositionChange = this.scrollbarState.onThumbPositionChange;
+		this.handleWheelScroll = this.scrollbarState.onWheelScroll;
+		this.handleThumbPointerDown = this.scrollbarState.onThumbPointerDown;
+		this.handleThumbPointerUp = this.scrollbarState.onThumbPointerUp;
+
+		$effect(() => {
+			const maxScrollPos = this.maxScrollPos;
+			const scrollbarNode = this.scrollbar.opts.ref.current;
+			// we want to react to the viewport node changing so we leave this here
+			this.root.viewportNode;
+			const handleWheel = (e: WheelEvent) => {
+				const node = e.target as HTMLElement;
+				const isScrollbarWheel = scrollbarNode?.contains(node);
+				if (isScrollbarWheel) this.handleWheelScroll(e, maxScrollPos);
+			};
+
+			const unsubListener = on(this.root.domContext.getDocument(), 'wheel', handleWheel, {
+				passive: false,
+			});
+
+			return unsubListener;
+		});
+
+		$effect.pre(() => {
+			// react to changes to this:
+			this.scrollbarVis.sizes;
+			untrack(() => this.handleThumbPositionChange());
+		});
+
+		// $effect.pre(() => {
+		// 	this.handleThumbPositionChange();
+		// });
+
+		observeResizeMany(() => [this.scrollbar.opts.ref.current, this.root.viewportNode, this.root.contentNode], this.handleResize);
+
+		this.onpointerdown = this.onpointerdown.bind(this);
+		this.onpointermove = this.onpointermove.bind(this);
+		this.onpointerup = this.onpointerup.bind(this);
+		this.onlostpointercapture = this.onlostpointercapture.bind(this);
+	}
+
+	handleDragScroll(e: PointerEvent) {
+		if (!this.rect) return;
+		const x = e.clientX - this.rect.left;
+		const y = e.clientY - this.rect.top;
+		this.scrollbarState.onDragScroll({ x, y });
+	}
+
+	#cleanupPointerState(): void {
+		if (this.rect === null) return;
+		this.root.domContext.getDocument().body.style.webkitUserSelect = this.prevWebkitUserSelect;
+		if (this.root.viewportNode) this.root.viewportNode.style.scrollBehavior = '';
+		this.rect = null;
+	}
+
+	onpointerdown(e: BitsPointerEvent) {
+		if (e.button !== 0) return;
+		const target = e.target as HTMLElement;
+		target.setPointerCapture(e.pointerId);
+		this.rect = this.scrollbar.opts.ref.current?.getBoundingClientRect() ?? null;
+		// pointer capture doesn't prevent text selection in Safari
+		// so we remove text selection manually when scrolling
+		this.prevWebkitUserSelect = this.root.domContext.getDocument().body.style.webkitUserSelect;
+		this.root.domContext.getDocument().body.style.webkitUserSelect = 'none';
+		if (this.root.viewportNode) this.root.viewportNode.style.scrollBehavior = 'auto';
+		this.handleDragScroll(e);
+	}
+
+	onpointermove(e: BitsPointerEvent) {
+		this.handleDragScroll(e);
+	}
+
+	onpointerup(e: BitsPointerEvent) {
+		const target = e.target as HTMLElement;
+		if (target.hasPointerCapture(e.pointerId)) {
+			target.releasePointerCapture(e.pointerId);
+		}
+		this.#cleanupPointerState();
+	}
+
+	onlostpointercapture(_: BitsPointerEvent) {
+		this.#cleanupPointerState();
+	}
+
+	readonly props = $derived.by(() =>
+		mergeProps({
+			...this.scrollbarState.props,
+			style: {
+				position: 'absolute',
+				...this.scrollbarState.props.style,
+			},
+			[scrollAreaAttrs.scrollbar]: '',
+			onpointerdown: this.onpointerdown,
+			onpointermove: this.onpointermove,
+			onpointerup: this.onpointerup,
+			onlostpointercapture: this.onlostpointercapture,
+		}),
+	);
+}
+
+interface ScrollAreaThumbImplStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			mounted: boolean;
+		}> {}
+
+export class ScrollAreaThumbImplState {
+	static create(opts: ScrollAreaThumbImplStateOpts) {
+		return new ScrollAreaThumbImplState(opts, getScrollAreaScrollbarShared());
+	}
+	readonly opts: ScrollAreaThumbImplStateOpts;
+	readonly scrollbarState: ScrollAreaScrollbarSharedState;
+	readonly attachment: RefAttachment;
+	readonly #root: ScrollAreaRootState;
+	#removeUnlinkedScrollListener = $state<() => void>();
+	readonly #debounceScrollEnd = createEffectTimeout(() => {
+		if (this.#removeUnlinkedScrollListener) {
+			this.#removeUnlinkedScrollListener();
+			this.#removeUnlinkedScrollListener = undefined;
+		}
+	}, () => 100);
+
+	constructor(opts: ScrollAreaThumbImplStateOpts, scrollbarState: ScrollAreaScrollbarSharedState) {
+		this.opts = opts;
+		this.scrollbarState = scrollbarState;
+		this.#root = scrollbarState.root;
+		this.attachment = attachRef(this.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v));
+
+		$effect(() => {
+			const viewportNode = this.#root.viewportNode;
+			if (!viewportNode) return;
+			const handleScroll = () => {
+				this.#debounceScrollEnd.start();
+				if (!this.#removeUnlinkedScrollListener) {
+					const listener = addUnlinkedScrollListener(viewportNode, this.scrollbarState.handleThumbPositionChange);
+					this.#removeUnlinkedScrollListener = listener;
+					this.scrollbarState.handleThumbPositionChange();
+				}
+			};
+			untrack(() => this.scrollbarState.handleThumbPositionChange());
+			const unsubListener = on(viewportNode, 'scroll', handleScroll);
+			return unsubListener;
+		});
+
+		this.onpointerdowncapture = this.onpointerdowncapture.bind(this);
+		this.onpointerup = this.onpointerup.bind(this);
+	}
+
+	onpointerdowncapture(e: BitsPointerEvent) {
+		const thumb = e.target as HTMLElement;
+		if (!thumb) return;
+		const thumbRect = thumb.getBoundingClientRect();
+		const x = e.clientX - thumbRect.left;
+		const y = e.clientY - thumbRect.top;
+		this.scrollbarState.handleThumbPointerDown({ x, y });
+	}
+
+	onpointerup(_: BitsPointerEvent) {
+		this.scrollbarState.handleThumbPointerUp();
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'data-state': this.scrollbarState.scrollbarVis.hasThumb ? 'visible' : 'hidden',
+				style: {
+					width: 'var(--bits-scroll-area-thumb-width)',
+					height: 'var(--bits-scroll-area-thumb-height)',
+					transform: this.scrollbarState.scrollbarVis.prevTransformStyle,
+				},
+				onpointerdowncapture: this.onpointerdowncapture,
+				onpointerup: this.onpointerup,
+				[scrollAreaAttrs.thumb]: '',
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface ScrollAreaCornerImplStateOpts extends WithRefOpts {}
+
+export class ScrollAreaCornerImplState {
+	static create(opts: ScrollAreaCornerImplStateOpts) {
+		return new ScrollAreaCornerImplState(opts, getScrollAreaRoot());
+	}
+
+	readonly opts: ScrollAreaCornerImplStateOpts;
+	readonly root: ScrollAreaRootState;
+	readonly attachment: RefAttachment;
+	#width = $state(0);
+	#height = $state(0);
+	readonly hasSize = $derived(Boolean(this.#width && this.#height));
+
+	#measureCorner = () => {
+		const height = this.root.scrollbarXNode?.offsetHeight || 0;
+		const width = this.root.scrollbarYNode?.offsetWidth || 0;
+
+		this.root.cornerHeight = height;
+		this.root.cornerWidth = width;
+		this.#height = height;
+		this.#width = width;
+	};
+
+	constructor(opts: ScrollAreaCornerImplStateOpts, root: ScrollAreaRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref);
+
+		observeResizeMany(() => [this.root.scrollbarXNode, this.root.scrollbarYNode], this.#measureCorner);
+	}
+
+	readonly props = $derived.by(() => ({
+		id: this.opts.id.current,
+		style: {
+			width: this.#width,
+			height: this.#height,
+			position: 'absolute',
+			right: this.root.opts.dir.current === 'ltr' ? 0 : undefined,
+			left: this.root.opts.dir.current === 'rtl' ? 0 : undefined,
+			bottom: 0,
+		},
+		[scrollAreaAttrs.corner]: '',
+		...this.attachment,
+	}));
+}
+
+const toInt = (value?: string) => value ? Number.parseInt(value, 10) : 0;
+
+function getThumbRatio(viewportSize: number, contentSize: number) {
+	const ratio = viewportSize / contentSize;
+	return Number.isNaN(ratio) ? 0 : ratio;
+}
+
+function getThumbSize(sizes: Sizes) {
+	const ratio = getThumbRatio(sizes.viewport, sizes.content);
+	const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+	return Math.max((sizes.scrollbar.size - scrollbarPadding) * ratio, 18);
+}
+
+type GetScrollPositionFromPointerProps = {
+	pointerPos: number;
+	pointerOffset: number;
+	sizes: Sizes;
+	dir?: Direction;
+};
+
+function getScrollPositionFromPointer({ pointerPos, pointerOffset, sizes, dir = 'ltr' }: GetScrollPositionFromPointerProps) {
+	const thumbSizePx = getThumbSize(sizes);
+	const offset = pointerOffset || thumbSizePx / 2;
+	const minPointerPos = sizes.scrollbar.paddingStart + offset;
+	const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbSizePx - offset;
+	const maxScrollPos = sizes.content - sizes.viewport;
+	const scrollRange = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+	const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange as [number, number]);
+	return interpolate(pointerPos);
+}
+
+type GetThumbOffsetFromScrollProps = {
+	scrollPos: number;
+	sizes: Sizes;
+	dir?: Direction;
+};
+
+function getThumbOffsetFromScroll({ scrollPos, sizes, dir = 'ltr' }: GetThumbOffsetFromScrollProps) {
+	const thumbSizePx = getThumbSize(sizes);
+	const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+	const scrollbar = sizes.scrollbar.size - scrollbarPadding;
+	const maxScrollPos = sizes.content - sizes.viewport;
+	const maxThumbPos = scrollbar - thumbSizePx;
+	const scrollClampRange = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+	const scrollWithoutMomentum = Math.min(scrollClampRange[1]!, Math.max(scrollClampRange[0]!, scrollPos));
+	const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
+	return interpolate(scrollWithoutMomentum);
+}
+
+// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
+function linearScale(input: readonly [number, number], output: readonly [number, number]) {
+	return (value: number) => {
+		if (input[0] === input[1] || output[0] === output[1]) return output[0];
+		const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+		return output[0] + ratio * (value - input[0]);
+	};
+}
+
+const isScrollingWithinScrollbarBounds = (scrollPos: number, maxScrollPos: number) => scrollPos > 0 && scrollPos < maxScrollPos;
+
+function addUnlinkedScrollListener(node: HTMLElement, handler: () => void) {
+	let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
+	let rAF = 0;
+	const win = getWindow(node);
+
+	(function loop() {
+		const position = { left: node.scrollLeft, top: node.scrollTop };
+		const isHorizontalScroll = prevPosition.left !== position.left;
+		const isVerticalScroll = prevPosition.top !== position.top;
+		if (isHorizontalScroll || isVerticalScroll) handler();
+		prevPosition = position;
+		rAF = win.requestAnimationFrame(loop);
+	})();
+
+	return () => win.cancelAnimationFrame(rAF);
+}