@youcan/celeste 0.6.101 → 0.7.0

package/dist/es/chunks/scroll-bar.js

@@ -1,9 +1,886 @@
-import { E as Ny, w as Ly } from "./dist.js";
 import { t as clsx } from "./clsx.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as clamp } from "./clamp.js";
+import { t as createContext } from "./createContext.js";
+import { b as watchOnce, o as useResizeObserver, v as useDebounceFn } from "./dist.js";
+import { t as Primitive } from "./Primitive.js";
+import { t as useDirection } from "./useDirection.js";
+import { t as useForwardExpose } from "./useForwardExpose.js";
+import { n as useStateMachine, t as Presence_default } from "./Presence.js";
 import { useDelegatedProps } from "../use-delegated-props.js";
 import "../use-sidebar.js";
-import { createBlock, createVNode, defineComponent, mergeProps, openBlock, unref, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createVNode, defineComponent, mergeProps, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderSlot, toRefs, unref, watch, watchEffect, withCtx } from "vue";
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaRoot.js
+var [injectScrollAreaRootContext, provideScrollAreaRootContext] = /* @__PURE__ */ createContext("ScrollAreaRoot");
+var ScrollAreaRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollAreaRoot",
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: "hover"
+		},
+		dir: {
+			type: String,
+			required: false
+		},
+		scrollHideDelay: {
+			type: Number,
+			required: false,
+			default: 600
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const cornerWidth = ref(0);
+		const cornerHeight = ref(0);
+		const viewport = ref();
+		const content = ref();
+		const scrollbarX = ref();
+		const scrollbarY = ref();
+		const scrollbarXEnabled = ref(false);
+		const scrollbarYEnabled = ref(false);
+		const { type, dir: propDir, scrollHideDelay } = toRefs(props);
+		const dir = useDirection(propDir);
+		function scrollTop() {
+			viewport.value?.scrollTo({ top: 0 });
+		}
+		function scrollTopLeft() {
+			viewport.value?.scrollTo({
+				top: 0,
+				left: 0
+			});
+		}
+		__expose({
+			viewport,
+			scrollTop,
+			scrollTopLeft
+		});
+		const { forwardRef, currentElement: scrollArea } = useForwardExpose();
+		provideScrollAreaRootContext({
+			type,
+			dir,
+			scrollHideDelay,
+			scrollArea,
+			viewport,
+			onViewportChange: (el) => {
+				viewport.value = el || void 0;
+			},
+			content,
+			onContentChange: (el) => {
+				content.value = el;
+			},
+			scrollbarX,
+			scrollbarXEnabled,
+			scrollbarY,
+			scrollbarYEnabled,
+			onScrollbarXChange: (scrollbar) => {
+				scrollbarX.value = scrollbar || void 0;
+			},
+			onScrollbarYChange: (scrollbar) => {
+				scrollbarY.value = scrollbar || void 0;
+			},
+			onScrollbarXEnabledChange: (rendered) => {
+				scrollbarXEnabled.value = rendered;
+			},
+			onScrollbarYEnabledChange: (rendered) => {
+				scrollbarYEnabled.value = rendered;
+			},
+			onCornerWidthChange: (width) => {
+				cornerWidth.value = width;
+			},
+			onCornerHeightChange: (height) => {
+				cornerHeight.value = height;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				ref: unref(forwardRef),
+				"as-child": props.asChild,
+				as: _ctx.as,
+				dir: unref(dir),
+				style: normalizeStyle({
+					position: "relative",
+					["--reka-scroll-area-corner-width"]: `${cornerWidth.value}px`,
+					["--reka-scroll-area-corner-height"]: `${cornerHeight.value}px`
+				})
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"as-child",
+				"as",
+				"dir",
+				"style"
+			]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/utils.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 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 getThumbRatio(viewportSize, contentSize) {
+	const ratio = viewportSize / contentSize;
+	return Number.isNaN(ratio) ? 0 : ratio;
+}
+function addUnlinkedScrollListener(node, handler = () => {}) {
+	let prevPosition = {
+		left: node.scrollLeft,
+		top: node.scrollTop
+	};
+	let rAF = 0;
+	(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 = window.requestAnimationFrame(loop);
+	})();
+	return () => window.cancelAnimationFrame(rAF);
+}
+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]);
+	return linearScale([0, maxScrollPos], [0, maxThumbPos])(scrollWithoutMomentum);
+}
+function toInt(value) {
+	return value ? Number.parseInt(value, 10) : 0;
+}
+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];
+	return linearScale([minPointerPos, maxPointerPos], scrollRange)(pointerPos);
+}
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+	return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbarX.js
+var ScrollAreaScrollbarX_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollAreaScrollbarX",
+	setup(__props) {
+		const rootContext = injectScrollAreaRootContext();
+		const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext();
+		const { forwardRef, currentElement: scrollbarElement } = useForwardExpose();
+		onMounted(() => {
+			if (scrollbarElement.value) rootContext.onScrollbarXChange(scrollbarElement.value);
+		});
+		onUnmounted(() => {
+			rootContext.onScrollbarXChange(null);
+		});
+		const sizes = computed(() => scrollbarVisibleContext.sizes.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScrollAreaScrollbarImpl_default, {
+				ref: unref(forwardRef),
+				"is-horizontal": true,
+				"data-orientation": "horizontal",
+				style: normalizeStyle({
+					bottom: 0,
+					left: unref(rootContext).dir.value === "rtl" ? "var(--reka-scroll-area-corner-width)" : 0,
+					right: unref(rootContext).dir.value === "ltr" ? "var(--reka-scroll-area-corner-width)" : 0,
+					["--reka-scroll-area-thumb-width"]: sizes.value ? `${unref(getThumbSize)(sizes.value)}px` : void 0
+				}),
+				onOnDragScroll: _cache[0] || (_cache[0] = ($event) => unref(scrollbarVisibleContext).onDragScroll($event.x))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["style"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbarY.js
+var ScrollAreaScrollbarY_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollAreaScrollbarY",
+	setup(__props) {
+		const rootContext = injectScrollAreaRootContext();
+		const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext();
+		const { forwardRef, currentElement: scrollbarElement } = useForwardExpose();
+		onMounted(() => {
+			if (scrollbarElement.value) rootContext.onScrollbarYChange(scrollbarElement.value);
+		});
+		onUnmounted(() => {
+			rootContext.onScrollbarYChange(null);
+		});
+		const sizes = computed(() => scrollbarVisibleContext.sizes.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ScrollAreaScrollbarImpl_default, {
+				ref: unref(forwardRef),
+				"is-horizontal": false,
+				"data-orientation": "vertical",
+				style: normalizeStyle({
+					top: 0,
+					right: unref(rootContext).dir.value === "ltr" ? 0 : void 0,
+					left: unref(rootContext).dir.value === "rtl" ? 0 : void 0,
+					bottom: "var(--reka-scroll-area-corner-height)",
+					["--reka-scroll-area-thumb-height"]: sizes.value ? `${unref(getThumbSize)(sizes.value)}px` : void 0
+				}),
+				onOnDragScroll: _cache[0] || (_cache[0] = ($event) => unref(scrollbarVisibleContext).onDragScroll($event.y))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["style"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbarAuto.js
+var ScrollAreaScrollbarAuto_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollAreaScrollbarAuto",
+	props: { forceMount: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const rootContext = injectScrollAreaRootContext();
+		const scrollbarContext = injectScrollAreaScrollbarContext();
+		const { forwardRef } = useForwardExpose();
+		const visible = ref(false);
+		const handleResize = useDebounceFn(() => {
+			if (rootContext.viewport.value) {
+				const isOverflowX = rootContext.viewport.value.offsetWidth < rootContext.viewport.value.scrollWidth;
+				const isOverflowY = rootContext.viewport.value.offsetHeight < rootContext.viewport.value.scrollHeight;
+				visible.value = scrollbarContext.isHorizontal.value ? isOverflowX : isOverflowY;
+			}
+		}, 10);
+		onMounted(() => handleResize());
+		useResizeObserver(rootContext.viewport, handleResize);
+		useResizeObserver(rootContext.content, handleResize);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || visible.value }, {
+				default: withCtx(() => [createVNode(ScrollAreaScrollbarVisible_default, mergeProps(_ctx.$attrs, {
+					ref: unref(forwardRef),
+					"data-state": visible.value ? "visible" : "hidden"
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["data-state"])]),
+				_: 3
+			}, 8, ["present"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbarGlimpse.js
+var ScrollAreaScrollbarGlimpse_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScrollAreaScrollbarGlimpse",
+	props: { forceMount: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const rootContext = injectScrollAreaRootContext();
+		const scrollbarContext = injectScrollAreaScrollbarContext();
+		const { forwardRef } = useForwardExpose();
+		const { state, dispatch } = useStateMachine("hidden", {
+			hidden: {
+				POINTER_ENTER: "glimpse",
+				SCROLL: "scrolling"
+			},
+			glimpse: {
+				HIDE: "hidden",
+				POINTER_LEAVE: "hidden",
+				SCROLL: "scrolling",
+				POINTER_ENTER: "glimpse"
+			},
+			scrolling: {
+				SCROLL_END: "idle",
+				POINTER_ENTER: "interacting"
+			},
+			interacting: {
+				SCROLL: "interacting",
+				POINTER_LEAVE: "idle"
+			},
+			idle: {
+				HIDE: "hidden",
+				SCROLL: "scrolling",
+				POINTER_ENTER: "interacting"
+			}
+		});
+		const visible = computed(() => state.value !== "hidden");
+		function handlePointerEnter() {
+			dispatch("POINTER_ENTER");
+		}
+		function handlePointerLeave() {
+			dispatch("POINTER_LEAVE");
+		}
+		const debounceScrollEnd = useDebounceFn(() => dispatch("SCROLL_END"), 100);
+		watchEffect((onCleanup) => {
+			if (state.value === "glimpse") {
+				const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, "HIDE");
+				onCleanup(() => {
+					window.clearTimeout(timeId);
+				});
+			}
+		});
+		watchEffect((onCleanup) => {
+			if (state.value === "idle") {
+				const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, "HIDE");
+				onCleanup(() => {
+					window.clearTimeout(timeId);
+				});
+			}
+		});
+		watchEffect((onCleanup) => {
+			const viewport = rootContext.viewport.value;
+			const scrollDirection = scrollbarContext.isHorizontal.value ? "scrollLeft" : "scrollTop";
+			if (viewport) {
+				let prevScrollPos = viewport[scrollDirection];
+				const handleScroll = () => {
+					const scrollPos = viewport[scrollDirection];
+					if (prevScrollPos !== scrollPos) {
+						dispatch("SCROLL");
+						debounceScrollEnd();
+					}
+					prevScrollPos = scrollPos;
+				};
+				viewport.addEventListener("scroll", handleScroll);
+				onCleanup(() => {
+					viewport.removeEventListener("scroll", handleScroll);
+				});
+			}
+		});
+		onMounted(() => {
+			const scrollArea = rootContext.scrollArea.value;
+			if (scrollArea) {
+				scrollArea.addEventListener("pointerenter", handlePointerEnter);
+				scrollArea.addEventListener("pointerleave", handlePointerLeave);
+			}
+		});
+		onUnmounted(() => {
+			const scrollArea = rootContext.scrollArea.value;
+			if (scrollArea) {
+				scrollArea.removeEventListener("pointerenter", handlePointerEnter);
+				scrollArea.removeEventListener("pointerleave", handlePointerLeave);
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || visible.value }, {
+				default: withCtx(() => [createVNode(ScrollAreaScrollbarAuto_default, mergeProps(_ctx.$attrs, {
+					ref: unref(forwardRef),
+					"data-state": visible.value ? "visible" : "hidden"
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["data-state"])]),
+				_: 3
+			}, 8, ["present"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbarHover.js
+var ScrollAreaScrollbarHover_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScrollAreaScrollbarHover",
+	props: { forceMount: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const rootContext = injectScrollAreaRootContext();
+		const { forwardRef } = useForwardExpose();
+		let timeout;
+		const visible = ref(false);
+		function handlePointerEnter() {
+			window.clearTimeout(timeout);
+			visible.value = true;
+		}
+		function handlePointerLeave() {
+			timeout = window.setTimeout(() => {
+				visible.value = false;
+			}, rootContext.scrollHideDelay.value);
+		}
+		onMounted(() => {
+			const scrollArea = rootContext.scrollArea.value;
+			if (scrollArea) {
+				scrollArea.addEventListener("pointerenter", handlePointerEnter);
+				scrollArea.addEventListener("pointerleave", handlePointerLeave);
+			}
+		});
+		onUnmounted(() => {
+			const scrollArea = rootContext.scrollArea.value;
+			if (scrollArea) {
+				window.clearTimeout(timeout);
+				scrollArea.removeEventListener("pointerenter", handlePointerEnter);
+				scrollArea.removeEventListener("pointerleave", handlePointerLeave);
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || visible.value }, {
+				default: withCtx(() => [createVNode(ScrollAreaScrollbarAuto_default, mergeProps(_ctx.$attrs, {
+					ref: unref(forwardRef),
+					"data-state": visible.value ? "visible" : "hidden"
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["data-state"])]),
+				_: 3
+			}, 8, ["present"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbarScroll.js
+var ScrollAreaScrollbarScroll_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollAreaScrollbarScroll",
+	props: { forceMount: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props) {
+		const rootContext = injectScrollAreaRootContext();
+		const scrollbarContext = injectScrollAreaScrollbarContext();
+		const { forwardRef } = useForwardExpose();
+		const { state, dispatch } = useStateMachine("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"
+			}
+		});
+		const visible = computed(() => state.value !== "hidden");
+		watchEffect((onCleanup) => {
+			if (state.value === "idle") {
+				const timeId = window.setTimeout(dispatch, rootContext.scrollHideDelay.value, "HIDE");
+				onCleanup(() => {
+					window.clearTimeout(timeId);
+				});
+			}
+		});
+		const debounceScrollEnd = useDebounceFn(() => dispatch("SCROLL_END"), 100);
+		watchEffect((onCleanup) => {
+			const viewport = rootContext.viewport.value;
+			const scrollDirection = scrollbarContext.isHorizontal.value ? "scrollLeft" : "scrollTop";
+			if (viewport) {
+				let prevScrollPos = viewport[scrollDirection];
+				const handleScroll = () => {
+					const scrollPos = viewport[scrollDirection];
+					if (prevScrollPos !== scrollPos) {
+						dispatch("SCROLL");
+						debounceScrollEnd();
+					}
+					prevScrollPos = scrollPos;
+				};
+				viewport.addEventListener("scroll", handleScroll);
+				onCleanup(() => {
+					viewport.removeEventListener("scroll", handleScroll);
+				});
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Presence_default), { present: _ctx.forceMount || visible.value }, {
+				default: withCtx(() => [createVNode(ScrollAreaScrollbarVisible_default, mergeProps(_ctx.$attrs, {
+					ref: unref(forwardRef),
+					"data-state": visible.value ? "visible" : "hidden"
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, ["data-state"])]),
+				_: 3
+			}, 8, ["present"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbar.js
+var [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext] = /* @__PURE__ */ createContext("ScrollAreaScrollbar");
+var ScrollAreaScrollbar_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "ScrollAreaScrollbar",
+	props: {
+		orientation: {
+			type: String,
+			required: false,
+			default: "vertical"
+		},
+		forceMount: {
+			type: Boolean,
+			required: false
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { forwardRef } = useForwardExpose();
+		const rootContext = injectScrollAreaRootContext();
+		const isHorizontal = computed(() => props.orientation === "horizontal");
+		watch(isHorizontal, () => {
+			if (isHorizontal.value) rootContext.onScrollbarXEnabledChange(true);
+			else rootContext.onScrollbarYEnabledChange(true);
+		}, { immediate: true });
+		onUnmounted(() => {
+			rootContext.onScrollbarXEnabledChange(false);
+			rootContext.onScrollbarYEnabledChange(false);
+		});
+		const { orientation, forceMount, asChild, as } = toRefs(props);
+		provideScrollAreaScrollbarContext({
+			orientation,
+			forceMount,
+			isHorizontal,
+			as,
+			asChild
+		});
+		return (_ctx, _cache) => {
+			return unref(rootContext).type.value === "hover" ? (openBlock(), createBlock(ScrollAreaScrollbarHover_default, mergeProps({ key: 0 }, _ctx.$attrs, {
+				ref: unref(forwardRef),
+				"force-mount": unref(forceMount)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["force-mount"])) : unref(rootContext).type.value === "scroll" ? (openBlock(), createBlock(ScrollAreaScrollbarScroll_default, mergeProps({ key: 1 }, _ctx.$attrs, {
+				ref: unref(forwardRef),
+				"force-mount": unref(forceMount)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["force-mount"])) : unref(rootContext).type.value === "glimpse" ? (openBlock(), createBlock(ScrollAreaScrollbarGlimpse_default, mergeProps({ key: 2 }, _ctx.$attrs, {
+				ref: unref(forwardRef),
+				"force-mount": unref(forceMount)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["force-mount"])) : unref(rootContext).type.value === "auto" ? (openBlock(), createBlock(ScrollAreaScrollbarAuto_default, mergeProps({ key: 3 }, _ctx.$attrs, {
+				ref: unref(forwardRef),
+				"force-mount": unref(forceMount)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["force-mount"])) : unref(rootContext).type.value === "always" ? (openBlock(), createBlock(ScrollAreaScrollbarVisible_default, mergeProps({ key: 4 }, _ctx.$attrs, {
+				ref: unref(forwardRef),
+				"data-state": "visible"
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbarVisible.js
+var [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext] = /* @__PURE__ */ createContext("ScrollAreaScrollbarVisible");
+var ScrollAreaScrollbarVisible_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollAreaScrollbarVisible",
+	setup(__props) {
+		const rootContext = injectScrollAreaRootContext();
+		const scrollbarContext = injectScrollAreaScrollbarContext();
+		const { forwardRef } = useForwardExpose();
+		const sizes = ref({
+			content: 0,
+			viewport: 0,
+			scrollbar: {
+				size: 0,
+				paddingStart: 0,
+				paddingEnd: 0
+			}
+		});
+		const hasThumb = computed(() => {
+			const thumbRatio = getThumbRatio(sizes.value.viewport, sizes.value.content);
+			return Boolean(thumbRatio > 0 && thumbRatio < 1);
+		});
+		const thumbRef = ref();
+		const pointerOffset = ref(0);
+		function handleWheelScroll(event, payload) {
+			if (isShowingScrollbarX.value) {
+				const scrollPos = rootContext.viewport.value.scrollLeft + event.deltaY;
+				rootContext.viewport.value.scrollLeft = scrollPos;
+				if (isScrollingWithinScrollbarBounds(scrollPos, payload)) event.preventDefault();
+			} else {
+				const scrollPos = rootContext.viewport.value.scrollTop + event.deltaY;
+				rootContext.viewport.value.scrollTop = scrollPos;
+				if (isScrollingWithinScrollbarBounds(scrollPos, payload)) event.preventDefault();
+			}
+		}
+		function handleThumbDown(event, payload) {
+			if (isShowingScrollbarX.value) pointerOffset.value = payload.x;
+			else pointerOffset.value = payload.y;
+		}
+		function handleThumbUp(event) {
+			pointerOffset.value = 0;
+		}
+		function handleSizeChange(payload) {
+			sizes.value = payload;
+		}
+		function getScrollPosition(pointerPos, dir) {
+			return getScrollPositionFromPointer(pointerPos, pointerOffset.value, sizes.value, dir);
+		}
+		const isShowingScrollbarX = computed(() => scrollbarContext.isHorizontal.value);
+		function onDragScroll(payload) {
+			if (isShowingScrollbarX.value) rootContext.viewport.value.scrollLeft = getScrollPosition(payload, rootContext.dir.value);
+			else rootContext.viewport.value.scrollTop = getScrollPosition(payload);
+		}
+		function onThumbPositionChange() {
+			if (isShowingScrollbarX.value) {
+				if (rootContext.viewport.value && thumbRef.value) {
+					const scrollPos = rootContext.viewport.value.scrollLeft;
+					const offset = getThumbOffsetFromScroll(scrollPos, sizes.value, rootContext.dir.value);
+					thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`;
+				}
+			} else if (rootContext.viewport.value && thumbRef.value) {
+				const scrollPos = rootContext.viewport.value.scrollTop;
+				const offset = getThumbOffsetFromScroll(scrollPos, sizes.value);
+				thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`;
+			}
+		}
+		function onThumbChange(element) {
+			thumbRef.value = element;
+		}
+		provideScrollAreaScrollbarVisibleContext({
+			sizes,
+			hasThumb,
+			handleWheelScroll,
+			handleThumbDown,
+			handleThumbUp,
+			handleSizeChange,
+			onThumbPositionChange,
+			onThumbChange,
+			onDragScroll
+		});
+		return (_ctx, _cache) => {
+			return isShowingScrollbarX.value ? (openBlock(), createBlock(ScrollAreaScrollbarX_default, mergeProps({ key: 0 }, _ctx.$attrs, { ref: unref(forwardRef) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16)) : (openBlock(), createBlock(ScrollAreaScrollbarY_default, mergeProps({ key: 1 }, _ctx.$attrs, { ref: unref(forwardRef) }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaScrollbarImpl.js
+var ScrollAreaScrollbarImpl_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollAreaScrollbarImpl",
+	props: { isHorizontal: {
+		type: Boolean,
+		required: true
+	} },
+	emits: [
+		"onDragScroll",
+		"onWheelScroll",
+		"onThumbPointerDown"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const rootContext = injectScrollAreaRootContext();
+		const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext();
+		const scrollbarContext = injectScrollAreaScrollbarContext();
+		const { forwardRef, currentElement: scrollbar } = useForwardExpose();
+		const prevWebkitUserSelectRef = ref("");
+		const rectRef = ref();
+		function handleDragScroll(event) {
+			if (rectRef.value) emit("onDragScroll", {
+				x: event.clientX - rectRef.value?.left,
+				y: event.clientY - rectRef.value?.top
+			});
+		}
+		function handlePointerDown(event) {
+			if (event.button === 0) {
+				event.target.setPointerCapture(event.pointerId);
+				rectRef.value = scrollbar.value.getBoundingClientRect();
+				prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect;
+				document.body.style.webkitUserSelect = "none";
+				if (rootContext.viewport) rootContext.viewport.value.style.scrollBehavior = "auto";
+				handleDragScroll(event);
+			}
+		}
+		function handlePointerMove(event) {
+			handleDragScroll(event);
+		}
+		function handlePointerUp(event) {
+			const element = event.target;
+			if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId);
+			document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value;
+			if (rootContext.viewport) rootContext.viewport.value.style.scrollBehavior = "";
+			rectRef.value = void 0;
+		}
+		function handleWheel(event) {
+			const element = event.target;
+			const isScrollbarWheel = scrollbar.value?.contains(element);
+			const maxScrollPos = scrollbarVisibleContext.sizes.value.content - scrollbarVisibleContext.sizes.value.viewport;
+			if (isScrollbarWheel) scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos);
+		}
+		onMounted(() => {
+			document.addEventListener("wheel", handleWheel, { passive: false });
+		});
+		onUnmounted(() => {
+			document.removeEventListener("wheel", handleWheel);
+		});
+		function handleSizeChange() {
+			if (!scrollbar.value) return;
+			if (props.isHorizontal) scrollbarVisibleContext.handleSizeChange({
+				content: rootContext.viewport.value?.scrollWidth ?? 0,
+				viewport: rootContext.viewport.value?.offsetWidth ?? 0,
+				scrollbar: {
+					size: scrollbar.value.clientWidth ?? 0,
+					paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),
+					paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight)
+				}
+			});
+			else scrollbarVisibleContext.handleSizeChange({
+				content: rootContext.viewport.value?.scrollHeight ?? 0,
+				viewport: rootContext.viewport.value?.offsetHeight ?? 0,
+				scrollbar: {
+					size: scrollbar.value?.clientHeight ?? 0,
+					paddingStart: toInt(getComputedStyle(scrollbar.value).paddingTop),
+					paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingBottom)
+				}
+			});
+			scrollbarVisibleContext.onThumbPositionChange();
+		}
+		useResizeObserver(scrollbar, handleSizeChange);
+		useResizeObserver(rootContext.content, handleSizeChange);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				ref: unref(forwardRef),
+				style: { "position": "absolute" },
+				"data-scrollbarimpl": "",
+				as: unref(scrollbarContext).as.value,
+				"as-child": unref(scrollbarContext).asChild.value,
+				onPointerdown: handlePointerDown,
+				onPointermove: handlePointerMove,
+				onPointerup: handlePointerUp
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["as", "as-child"]);
+		};
+	}
+});
+//#endregion
+//#region ../../node_modules/.pnpm/reka-ui@2.10.1_vue@3.5.13_typescript@5.9.3_/node_modules/reka-ui/dist/ScrollArea/ScrollAreaThumb.js
+var ScrollAreaThumb_default = /* @__PURE__ */ defineComponent({
+	__name: "ScrollAreaThumb",
+	props: {
+		asChild: {
+			type: Boolean,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const rootContext = injectScrollAreaRootContext();
+		const scrollbarContextVisible = injectScrollAreaScrollbarVisibleContext();
+		function handlePointerDown(event) {
+			const thumbRect = event.target.getBoundingClientRect();
+			const x = event.clientX - thumbRect.left;
+			const y = event.clientY - thumbRect.top;
+			scrollbarContextVisible.handleThumbDown(event, {
+				x,
+				y
+			});
+		}
+		function handlePointerUp(event) {
+			scrollbarContextVisible.handleThumbUp(event);
+		}
+		const { forwardRef, currentElement: thumbElement } = useForwardExpose();
+		const removeUnlinkedScrollListenerRef = ref();
+		const viewport = computed(() => rootContext.viewport.value);
+		function handleScroll() {
+			if (!removeUnlinkedScrollListenerRef.value) {
+				removeUnlinkedScrollListenerRef.value = addUnlinkedScrollListener(viewport.value, scrollbarContextVisible.onThumbPositionChange);
+				scrollbarContextVisible.onThumbPositionChange();
+			}
+		}
+		watchOnce(computed(() => scrollbarContextVisible.sizes.value), () => {
+			scrollbarContextVisible.onThumbChange(thumbElement.value);
+			if (viewport.value) {
+				/**
+				* We only bind to native scroll event so we know when scroll starts and ends.
+				* When scroll starts we start a requestAnimationFrame loop that checks for
+				* changes to scroll position. That rAF loop triggers our thumb position change
+				* when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.
+				* https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
+				*/
+				scrollbarContextVisible.onThumbPositionChange();
+				viewport.value.addEventListener("scroll", handleScroll);
+			}
+		});
+		onUnmounted(() => {
+			viewport.value?.removeEventListener("scroll", handleScroll);
+			removeUnlinkedScrollListenerRef.value?.();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Primitive), {
+				ref: unref(forwardRef),
+				"data-state": unref(scrollbarContextVisible).hasThumb ? "visible" : "hidden",
+				style: {
+					width: "var(--reka-scroll-area-thumb-width)",
+					height: "var(--reka-scroll-area-thumb-height)"
+				},
+				"as-child": props.asChild,
+				as: _ctx.as,
+				onPointerdown: handlePointerDown,
+				onPointerup: handlePointerUp
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"data-state",
+				"as-child",
+				"as"
+			]);
+		};
+	}
+});
 //#endregion
 //#region src/components/scroll-area/scroll-bar.vue
 var scroll_bar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -19,12 +896,12 @@ var scroll_bar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		const props = __props;
 		const delegatedProps = useDelegatedProps(props, "class");
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Ny), mergeProps(unref(delegatedProps), { class: unref(clsx)("celeste-scroll-bar", props.class) }), {
-				default: withCtx(() => [createVNode(unref(Ly), { class: "celeste-scroll-bar-thumb" })]),
+			return openBlock(), createBlock(unref(ScrollAreaScrollbar_default), mergeProps(unref(delegatedProps), { class: unref(clsx)("celeste-scroll-bar", props.class) }), {
+				default: withCtx(() => [createVNode(unref(ScrollAreaThumb_default), { class: "celeste-scroll-bar-thumb" })]),
 				_: 1
 			}, 16, ["class"]);
 		};
 	}
-}), [["__scopeId", "data-v-e2e97649"]]);
+}), [["__scopeId", "data-v-4c845c7c"]]);
 //#endregion
-export { scroll_bar_default as t };
+export { ScrollAreaRoot_default as n, injectScrollAreaRootContext as r, scroll_bar_default as t };