sheer-ui 0.4.2 → 0.5.0

package/dist/components/scroll-area/scroll-area.svelte.js

@@ -0,0 +1,750 @@
+/**
+ * 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 { attachRef, DOMContext, getWindow } from '../../internal/tools/index.js';
+import { 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.svelte.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();
+export const [getScrollAreaScrollbar, setScrollAreaScrollbar] = createContext();
+export const [getScrollAreaScrollbarVisible, setScrollAreaScrollbarVisible] = createContext();
+export const [getScrollAreaScrollbarAxis, setScrollAreaScrollbarAxis] = createContext();
+export const [getScrollAreaScrollbarShared, setScrollAreaScrollbarShared] = createContext();
+export class ScrollAreaRootState {
+    static create(opts) {
+        return setScrollAreaRoot(new ScrollAreaRootState(opts));
+    }
+    opts;
+    attachment;
+    scrollAreaNode = $state(null);
+    viewportNode = $state(null);
+    contentNode = $state(null);
+    scrollbarXNode = $state(null);
+    scrollbarYNode = $state(null);
+    cornerWidth = $state(0);
+    cornerHeight = $state(0);
+    scrollbarXEnabled = $state(false);
+    scrollbarYEnabled = $state(false);
+    domContext;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref, (v) => (this.scrollAreaNode = v));
+        this.domContext = new DOMContext(opts.ref);
+    }
+    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,
+    }));
+}
+export class ScrollAreaViewportState {
+    static create(opts) {
+        return new ScrollAreaViewportState(opts, getScrollAreaRoot());
+    }
+    opts;
+    root;
+    attachment;
+    #contentId;
+    contentAttachment = attachRef((v) => (this.root.contentNode = v));
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.#contentId = createId('content', opts.id.current);
+        this.attachment = attachRef(opts.ref, (v) => (this.root.viewportNode = v));
+    }
+    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,
+    }));
+    contentProps = $derived.by(() => ({
+        id: this.#contentId,
+        '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,
+    }));
+}
+export class ScrollAreaScrollbarState {
+    static create(opts) {
+        return setScrollAreaScrollbar(new ScrollAreaScrollbarState(opts, getScrollAreaRoot()));
+    }
+    opts;
+    root;
+    isHorizontal = $derived.by(() => this.opts.orientation.current === 'horizontal');
+    hasThumb = $state(false);
+    constructor(opts, root) {
+        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());
+    }
+    scrollbar;
+    root;
+    isVisible = $state(false);
+    constructor(scrollbar) {
+        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);
+            };
+        });
+    }
+    props = $derived.by(() => ({
+        'data-state': this.isVisible ? 'visible' : 'hidden',
+    }));
+}
+export class ScrollAreaScrollbarScrollState {
+    static create() {
+        return new ScrollAreaScrollbarScrollState(getScrollAreaScrollbar());
+    }
+    scrollbar;
+    root;
+    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',
+        },
+    });
+    isHidden = $derived.by(() => this.machine.state === 'hidden');
+    constructor(scrollbar) {
+        this.scrollbar = scrollbar;
+        this.root = scrollbar.root;
+        const debounceScrollend = createEffectTimeout(() => this.machine.dispatch('SCROLL_END'), () => 100);
+        $effect(() => {
+            const _state = this.machine.state;
+            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(_) {
+        this.machine.dispatch('POINTER_ENTER');
+    }
+    onpointerleave(_) {
+        this.machine.dispatch('POINTER_LEAVE');
+    }
+    props = $derived.by(() => ({
+        'data-state': this.machine.state === 'hidden' ? 'hidden' : 'visible',
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
+    }));
+}
+export class ScrollAreaScrollbarAutoState {
+    static create() {
+        return new ScrollAreaScrollbarAutoState(getScrollAreaScrollbar());
+    }
+    scrollbar;
+    root;
+    isVisible = $state(false);
+    constructor(scrollbar) {
+        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);
+    }
+    props = $derived.by(() => ({
+        'data-state': this.isVisible ? 'visible' : 'hidden',
+    }));
+}
+export class ScrollAreaScrollbarVisibleState {
+    static create() {
+        return setScrollAreaScrollbarVisible(new ScrollAreaScrollbarVisibleState(getScrollAreaScrollbar()));
+    }
+    scrollbar;
+    root;
+    thumbNode = $state(null);
+    pointerOffset = $state(0);
+    sizes = $state.raw({
+        content: 0,
+        viewport: 0,
+        scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },
+    });
+    thumbRatio = $derived.by(() => getThumbRatio(this.sizes.viewport, this.sizes.content));
+    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) {
+        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) {
+        this.sizes = sizes;
+    }
+    getScrollPosition(pointerPos, dir) {
+        return getScrollPositionFromPointer({
+            pointerPos,
+            pointerOffset: this.pointerOffset,
+            sizes: this.sizes,
+            dir,
+        });
+    }
+    onThumbPointerUp() {
+        this.pointerOffset = 0;
+    }
+    onThumbPointerDown(pointerPos) {
+        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) {
+        if (!this.root.viewportNode)
+            return;
+        this.root.viewportNode.scrollLeft = scrollPos;
+    }
+    xOnDragScroll(pointerPos) {
+        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) {
+        if (!this.root.viewportNode)
+            return;
+        this.root.viewportNode.scrollTop = scrollPos;
+    }
+    yOnDragScroll(pointerPos) {
+        if (!this.root.viewportNode)
+            return;
+        this.root.viewportNode.scrollTop = this.getScrollPosition(pointerPos, this.root.opts.dir.current);
+    }
+}
+class ScrollAreaScrollbarAxisBaseState {
+    opts;
+    scrollbarVis;
+    root;
+    scrollbar;
+    attachment;
+    computedStyle = $state();
+    constructor(opts, scrollbarVis, onAttach) {
+        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();
+    thumbSize = $derived.by(() => getThumbSize(this.scrollbarVis.sizes));
+    props = $derived.by(() => ({
+        id: this.scrollbar.opts.id.current,
+        'data-orientation': this.orientation,
+        style: this.getStyle(),
+        ...this.attachment,
+    }));
+}
+export class ScrollAreaScrollbarXState extends ScrollAreaScrollbarAxisBaseState {
+    static create(opts) {
+        return setScrollAreaScrollbarAxis(new ScrollAreaScrollbarXState(opts, getScrollAreaScrollbarVisible()));
+    }
+    orientation = 'horizontal';
+    constructor(opts, scrollbarVis) {
+        super(opts, scrollbarVis, (node) => (scrollbarVis.root.scrollbarXNode = node));
+    }
+    onThumbPointerDown = (pointerPos) => {
+        this.scrollbarVis.onThumbPointerDown(pointerPos.x);
+    };
+    onDragScroll = (pointerPos) => {
+        this.scrollbarVis.xOnDragScroll(pointerPos.x);
+    };
+    onThumbPositionChange = () => {
+        this.scrollbarVis.xOnThumbPositionChange();
+    };
+    onWheelScroll = (e, maxScrollPos) => {
+        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) {
+        return setScrollAreaScrollbarAxis(new ScrollAreaScrollbarYState(opts, getScrollAreaScrollbarVisible()));
+    }
+    orientation = 'vertical';
+    constructor(opts, scrollbarVis) {
+        super(opts, scrollbarVis, (node) => (scrollbarVis.root.scrollbarYNode = node));
+    }
+    onThumbPointerDown = (pointerPos) => {
+        this.scrollbarVis.onThumbPointerDown(pointerPos.y);
+    };
+    onDragScroll = (pointerPos) => {
+        this.scrollbarVis.yOnDragScroll(pointerPos.y);
+    };
+    onThumbPositionChange = () => {
+        this.scrollbarVis.yOnThumbPositionChange();
+    };
+    onWheelScroll = (e, maxScrollPos) => {
+        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`,
+        };
+    }
+}
+export class ScrollAreaScrollbarSharedState {
+    static create() {
+        return setScrollAreaScrollbarShared(new ScrollAreaScrollbarSharedState(getScrollAreaScrollbarAxis()));
+    }
+    scrollbarState;
+    root;
+    scrollbarVis;
+    scrollbar;
+    rect = $state.raw(null);
+    prevWebkitUserSelect = $state('');
+    handleResize;
+    handleThumbPositionChange;
+    handleWheelScroll;
+    handleThumbPointerDown;
+    handleThumbPointerUp;
+    maxScrollPos = $derived.by(() => this.scrollbarVis.sizes.content - this.scrollbarVis.sizes.viewport);
+    constructor(scrollbarState) {
+        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) => {
+                const node = e.target;
+                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) {
+        if (!this.rect)
+            return;
+        const x = e.clientX - this.rect.left;
+        const y = e.clientY - this.rect.top;
+        this.scrollbarState.onDragScroll({ x, y });
+    }
+    #cleanupPointerState() {
+        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) {
+        if (e.button !== 0)
+            return;
+        const target = e.target;
+        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) {
+        this.handleDragScroll(e);
+    }
+    onpointerup(e) {
+        const target = e.target;
+        if (target.hasPointerCapture(e.pointerId)) {
+            target.releasePointerCapture(e.pointerId);
+        }
+        this.#cleanupPointerState();
+    }
+    onlostpointercapture(_) {
+        this.#cleanupPointerState();
+    }
+    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,
+    }));
+}
+export class ScrollAreaThumbImplState {
+    static create(opts) {
+        return new ScrollAreaThumbImplState(opts, getScrollAreaScrollbarShared());
+    }
+    opts;
+    scrollbarState;
+    attachment;
+    #root;
+    #removeUnlinkedScrollListener = $state();
+    #debounceScrollEnd = createEffectTimeout(() => {
+        if (this.#removeUnlinkedScrollListener) {
+            this.#removeUnlinkedScrollListener();
+            this.#removeUnlinkedScrollListener = undefined;
+        }
+    }, () => 100);
+    constructor(opts, scrollbarState) {
+        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) {
+        const thumb = e.target;
+        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(_) {
+        this.scrollbarState.handleThumbPointerUp();
+    }
+    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,
+    }));
+}
+export class ScrollAreaCornerImplState {
+    static create(opts) {
+        return new ScrollAreaCornerImplState(opts, getScrollAreaRoot());
+    }
+    opts;
+    root;
+    attachment;
+    #width = $state(0);
+    #height = $state(0);
+    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, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        observeResizeMany(() => [this.root.scrollbarXNode, this.root.scrollbarYNode], this.#measureCorner);
+    }
+    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) => value ? Number.parseInt(value, 10) : 0;
+function getThumbRatio(viewportSize, contentSize) {
+    const ratio = viewportSize / contentSize;
+    return Number.isNaN(ratio) ? 0 : ratio;
+}
+function getThumbSize(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);
+}
+function getScrollPositionFromPointer({ pointerPos, pointerOffset, sizes, dir = 'ltr' }) {
+    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);
+    return interpolate(pointerPos);
+}
+function getThumbOffsetFromScroll({ scrollPos, sizes, dir = 'ltr' }) {
+    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, output) {
+    return (value) => {
+        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, maxScrollPos) => scrollPos > 0 && scrollPos < maxScrollPos;
+function addUnlinkedScrollListener(node, handler) {
+    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);
+}