@johly/bits-ui 2.18.1

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

@@ -0,0 +1,797 @@
+/**
+ * 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 { Context, useDebounce, watch } from "runed";
+import { untrack } from "svelte";
+import { simpleBox, executeCallbacks, attachRef, DOMContext, getWindow, } from "svelte-toolbelt";
+import { mergeProps, useId } from "../../shared/index.js";
+import { clamp } from "../../internal/clamp.js";
+import { on } from "svelte/events";
+import { createBitsAttrs } from "../../internal/attrs.js";
+import { StateMachine } from "../../internal/state-machine.js";
+import { SvelteResizeObserver } from "../../internal/svelte-resize-observer.svelte.js";
+const scrollAreaAttrs = createBitsAttrs({
+    component: "scroll-area",
+    parts: ["root", "viewport", "corner", "thumb", "scrollbar"],
+});
+export const ScrollAreaRootContext = new Context("ScrollArea.Root");
+export const ScrollAreaScrollbarContext = new Context("ScrollArea.Scrollbar");
+export const ScrollAreaScrollbarVisibleContext = new Context("ScrollArea.ScrollbarVisible");
+export const ScrollAreaScrollbarAxisContext = new Context("ScrollArea.ScrollbarAxis");
+export const ScrollAreaScrollbarSharedContext = new Context("ScrollArea.ScrollbarShared");
+export class ScrollAreaRootState {
+    static create(opts) {
+        return ScrollAreaRootContext.set(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, ScrollAreaRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #contentId = simpleBox(useId());
+    #contentRef = simpleBox(null);
+    contentAttachment = attachRef(this.#contentRef, (v) => (this.root.contentNode = v));
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        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.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,
+    }));
+}
+export class ScrollAreaScrollbarState {
+    static create(opts) {
+        return ScrollAreaScrollbarContext.set(new ScrollAreaScrollbarState(opts, ScrollAreaRootContext.get()));
+    }
+    opts;
+    root;
+    isHorizontal = $derived.by(() => this.opts.orientation.current === "horizontal");
+    hasThumb = $state(false);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        watch(() => this.isHorizontal, (isHorizontal) => {
+            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(ScrollAreaScrollbarContext.get());
+    }
+    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 unsubListeners = executeCallbacks(on(scrollAreaNode, "pointerenter", handlePointerEnter), on(scrollAreaNode, "pointerleave", handlePointerLeave));
+            return () => {
+                this.root.domContext.getWindow().clearTimeout(hideTimer);
+                unsubListeners();
+            };
+        });
+    }
+    props = $derived.by(() => ({
+        "data-state": this.isVisible ? "visible" : "hidden",
+    }));
+}
+export class ScrollAreaScrollbarScrollState {
+    static create() {
+        return new ScrollAreaScrollbarScrollState(ScrollAreaScrollbarContext.get());
+    }
+    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.current === "hidden");
+    constructor(scrollbar) {
+        this.scrollbar = scrollbar;
+        this.root = scrollbar.root;
+        const debounceScrollend = useDebounce(() => 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();
+                }
+                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.current === "hidden" ? "hidden" : "visible",
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
+    }));
+}
+export class ScrollAreaScrollbarAutoState {
+    static create() {
+        return new ScrollAreaScrollbarAutoState(ScrollAreaScrollbarContext.get());
+    }
+    scrollbar;
+    root;
+    isVisible = $state(false);
+    constructor(scrollbar) {
+        this.scrollbar = scrollbar;
+        this.root = scrollbar.root;
+        const handleResize = useDebounce(() => {
+            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);
+        new SvelteResizeObserver(() => this.root.viewportNode, handleResize);
+        new SvelteResizeObserver(() => this.root.contentNode, handleResize);
+    }
+    props = $derived.by(() => ({
+        "data-state": this.isVisible ? "visible" : "hidden",
+    }));
+}
+export class ScrollAreaScrollbarVisibleState {
+    static create() {
+        return ScrollAreaScrollbarVisibleContext.set(new ScrollAreaScrollbarVisibleState(ScrollAreaScrollbarContext.get()));
+    }
+    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);
+    }
+}
+export class ScrollAreaScrollbarXState {
+    static create(opts) {
+        return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarXState(opts, ScrollAreaScrollbarVisibleContext.get()));
+    }
+    opts;
+    scrollbarVis;
+    root;
+    scrollbar;
+    attachment;
+    computedStyle = $state();
+    constructor(opts, scrollbarVis) {
+        this.opts = opts;
+        this.scrollbarVis = scrollbarVis;
+        this.root = scrollbarVis.root;
+        this.scrollbar = scrollbarVis.scrollbar;
+        this.attachment = attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarXNode = v));
+        $effect(() => {
+            if (!this.scrollbar.opts.ref.current)
+                return;
+            if (this.opts.mounted.current) {
+                this.computedStyle = getComputedStyle(this.scrollbar.opts.ref.current);
+            }
+        });
+        $effect(() => {
+            // Ensure when a user scrolls down and then the scrollbar is hidden
+            // that when it shows again it will be positioned correctly.
+            this.onResize();
+        });
+    }
+    onThumbPointerDown = (pointerPos) => {
+        this.scrollbarVis.onThumbPointerDown(pointerPos.x);
+    };
+    onDragScroll = (pointerPos) => {
+        this.scrollbarVis.xOnDragScroll(pointerPos.x);
+    };
+    onThumbPointerUp = () => {
+        this.scrollbarVis.onThumbPointerUp();
+    };
+    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),
+            },
+        });
+    };
+    thumbSize = $derived.by(() => {
+        return getThumbSize(this.scrollbarVis.sizes);
+    });
+    props = $derived.by(() => ({
+        id: this.scrollbar.opts.id.current,
+        "data-orientation": "horizontal",
+        style: {
+            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`,
+        },
+        ...this.attachment,
+    }));
+}
+export class ScrollAreaScrollbarYState {
+    static create(opts) {
+        return ScrollAreaScrollbarAxisContext.set(new ScrollAreaScrollbarYState(opts, ScrollAreaScrollbarVisibleContext.get()));
+    }
+    opts;
+    scrollbarVis;
+    root;
+    scrollbar;
+    attachment;
+    computedStyle = $state();
+    constructor(opts, scrollbarVis) {
+        this.opts = opts;
+        this.scrollbarVis = scrollbarVis;
+        this.root = scrollbarVis.root;
+        this.scrollbar = scrollbarVis.scrollbar;
+        this.attachment = attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarYNode = v));
+        $effect(() => {
+            if (!this.scrollbar.opts.ref.current)
+                return;
+            if (this.opts.mounted.current) {
+                this.computedStyle = getComputedStyle(this.scrollbar.opts.ref.current);
+            }
+        });
+        $effect(() => {
+            // Ensure when a user scrolls down and then the scrollbar is hidden
+            // that when it shows again it will be positioned correctly.
+            this.onResize();
+        });
+        this.onThumbPointerDown = this.onThumbPointerDown.bind(this);
+        this.onDragScroll = this.onDragScroll.bind(this);
+        this.onThumbPointerUp = this.onThumbPointerUp.bind(this);
+        this.onThumbPositionChange = this.onThumbPositionChange.bind(this);
+        this.onWheelScroll = this.onWheelScroll.bind(this);
+        this.onResize = this.onResize.bind(this);
+    }
+    onThumbPointerDown(pointerPos) {
+        this.scrollbarVis.onThumbPointerDown(pointerPos.y);
+    }
+    onDragScroll(pointerPos) {
+        this.scrollbarVis.yOnDragScroll(pointerPos.y);
+    }
+    onThumbPointerUp() {
+        this.scrollbarVis.onThumbPointerUp();
+    }
+    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),
+            },
+        });
+    }
+    thumbSize = $derived.by(() => {
+        return getThumbSize(this.scrollbarVis.sizes);
+    });
+    props = $derived.by(() => ({
+        id: this.scrollbar.opts.id.current,
+        "data-orientation": "vertical",
+        style: {
+            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`,
+        },
+        ...this.attachment,
+    }));
+}
+export class ScrollAreaScrollbarSharedState {
+    static create() {
+        return ScrollAreaScrollbarSharedContext.set(new ScrollAreaScrollbarSharedState(ScrollAreaScrollbarAxisContext.get()));
+    }
+    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 = useDebounce(() => this.scrollbarState.onResize(), 10);
+        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();
+        // });
+        new SvelteResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);
+        new SvelteResizeObserver(() => 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, ScrollAreaScrollbarSharedContext.get());
+    }
+    opts;
+    scrollbarState;
+    attachment;
+    #root;
+    #removeUnlinkedScrollListener = $state();
+    #debounceScrollEnd = useDebounce(() => {
+        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();
+                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, ScrollAreaRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #width = $state(0);
+    #height = $state(0);
+    hasSize = $derived(Boolean(this.#width && this.#height));
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        new SvelteResizeObserver(() => this.root.scrollbarXNode, () => {
+            const height = this.root.scrollbarXNode?.offsetHeight || 0;
+            this.root.cornerHeight = height;
+            this.#height = height;
+        });
+        new SvelteResizeObserver(() => this.root.scrollbarYNode, () => {
+            const width = this.root.scrollbarYNode?.offsetWidth || 0;
+            this.root.cornerWidth = width;
+            this.#width = width;
+        });
+    }
+    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,
+    }));
+}
+function toInt(value) {
+    return 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;
+    const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
+    return Math.max(thumbSize, 18);
+}
+function getScrollPositionFromPointer({ pointerPos, pointerOffset, sizes, dir = "ltr", }) {
+    const thumbSizePx = getThumbSize(sizes);
+    const thumbCenter = thumbSizePx / 2;
+    const offset = pointerOffset || thumbCenter;
+    const thumbOffsetFromEnd = thumbSizePx - offset;
+    const minPointerPos = sizes.scrollbar.paddingStart + offset;
+    const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+    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 = clamp(scrollPos, scrollClampRange[0], scrollClampRange[1]);
+    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]);
+    };
+}
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+    return 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);
+}