@botiverse/raft-ui 0.59.2 → 0.60.0

package/dist/components/scroll-area/use-scroll-area-container.mjs

@@ -0,0 +1,150 @@
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { scrollAreaClassNames } from "./class-names.mjs";
+import { scrollToElement } from "./scroll-to-element.mjs";
+import { effectiveHideDelay, scrollAreaContainerClassName, useScrollbars } from "./use-scrollbars.mjs";
+import { useCallback, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef } from "react";
+//#region src/components/scroll-area/use-scroll-area-container.ts
+const railInsetEdges = [
+	"top",
+	"bottom",
+	"left",
+	"right"
+];
+/**
+* The root's own variables: `railInset`, and the names of its container's scroll timelines, unique
+* to this area, so that an area nested in another's container never takes the outer one's
+* timeline (or makes it ambiguous).
+*/
+function rootStyle(timelines, railInset) {
+	const vars = {
+		"--r-scroll-area-timeline-x": `--r-scroll-area-x-${timelines}`,
+		"--r-scroll-area-timeline-y": `--r-scroll-area-y-${timelines}`
+	};
+	for (const edge of railInsetEdges) {
+		const value = railInset[edge];
+		if (value !== void 0) vars[`--r-scroll-area-rail-inset-${edge}`] = `${value}px`;
+	}
+	return vars;
+}
+function useScrollAreaContainer({ actionsRef, containerRef: ownContainerRef, contentRef, fade = false, fadeRef, frameRef: ownFrameRef, guttersPosition = "sticky", hideDelay = 600, onEdgeChange, orientation = "vertical", overscroll = "none", railInset, size = "medium", trigger = "hover" } = {}) {
+	const sticky = guttersPosition === "sticky";
+	const containerRef = useRef(null);
+	const frameRef = useRef(null);
+	const guttersRef = useRef(null);
+	const [forwardContainer] = useMergedRef(ownContainerRef);
+	const [forwardFrame] = useMergedRef(ownFrameRef);
+	const setContainerRef = useCallback((element) => {
+		containerRef.current = element;
+		forwardContainer(element);
+	}, [forwardContainer]);
+	const setFrameRef = useCallback((element) => {
+		frameRef.current = element;
+		forwardFrame(element);
+	}, [forwardFrame]);
+	const { measure: measureBars, rails, scrollable, setDragging, xThumbRef, yThumbRef } = useScrollbars({
+		containerRef,
+		contentRef,
+		fade,
+		fadeRef,
+		guttersPosition,
+		guttersRef,
+		hideDelay: effectiveHideDelay(trigger, hideDelay),
+		onEdgeChange,
+		orientation,
+		rootRef: sticky ? containerRef : frameRef
+	});
+	const measure = useCallback(() => measureBars(), [measureBars]);
+	const orientationRef = useRef(orientation);
+	useLayoutEffect(() => {
+		orientationRef.current = orientation;
+	}, [orientation]);
+	const scrollToElement$1 = useCallback((element, options) => {
+		const container = containerRef.current;
+		if (container) scrollToElement(container, element, orientationRef.current, options);
+	}, []);
+	useImperativeHandle(actionsRef, () => ({
+		measure,
+		scrollToElement: scrollToElement$1
+	}), [measure, scrollToElement$1]);
+	const timelines = useId().replace(/[^\w-]/g, "");
+	const insetTop = railInset?.top;
+	const insetBottom = railInset?.bottom;
+	const insetLeft = railInset?.left;
+	const insetRight = railInset?.right;
+	const blockStyle = useMemo(() => rootStyle(timelines, {
+		bottom: insetBottom,
+		left: insetLeft,
+		right: insetRight,
+		top: insetTop
+	}), [
+		timelines,
+		insetTop,
+		insetBottom,
+		insetLeft,
+		insetRight
+	]);
+	const blockClassName = scrollAreaClassNames({
+		fade,
+		guttersPosition,
+		orientation,
+		overscroll,
+		rails,
+		size,
+		trigger
+	});
+	const tabIndex = scrollable ? 0 : void 0;
+	const containerProps = useMemo(() => ({
+		className: sticky ? blockClassName : scrollAreaContainerClassName,
+		ref: setContainerRef,
+		style: sticky ? blockStyle : void 0,
+		tabIndex
+	}), [
+		blockClassName,
+		blockStyle,
+		setContainerRef,
+		sticky,
+		tabIndex
+	]);
+	const frameProps = useMemo(() => sticky ? void 0 : {
+		className: blockClassName,
+		ref: setFrameRef,
+		style: blockStyle
+	}, [
+		blockClassName,
+		blockStyle,
+		setFrameRef,
+		sticky
+	]);
+	const guttersProps = useMemo(() => ({ binding: {
+		containerRef,
+		guttersRef,
+		onDraggingChange: setDragging,
+		rails,
+		xThumbRef,
+		yThumbRef
+	} }), [
+		rails,
+		setDragging,
+		xThumbRef,
+		yThumbRef
+	]);
+	return useMemo(() => ({
+		containerProps,
+		frameProps,
+		guttersPosition,
+		guttersProps,
+		measure,
+		scrollToElement: scrollToElement$1,
+		scrollable
+	}), [
+		containerProps,
+		frameProps,
+		guttersPosition,
+		guttersProps,
+		measure,
+		scrollToElement$1,
+		scrollable
+	]);
+}
+//#endregion
+export { useScrollAreaContainer };

package/dist/components/scroll-area/use-scrollbars.mjs

@@ -0,0 +1,480 @@
+import { overflows, scrollOverflow, thumbLength, thumbOffset, thumbPlacement } from "./scroll-geometry.mjs";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/scroll-area/use-scrollbars.ts
+const noRails = {
+	xRail: false,
+	yRail: false
+};
+const noEdges = {
+	xEnd: false,
+	xStart: false,
+	yEnd: false,
+	yStart: false
+};
+/** `onEdgeChange`'s physical edges: `true` when the area is scrolled all the way to it. */
+function physicalEdges(edges, rtl) {
+	return {
+		bottom: !edges.yEnd,
+		left: !(rtl ? edges.xEnd : edges.xStart),
+		right: !(rtl ? edges.xStart : edges.xEnd),
+		top: !edges.yStart
+	};
+}
+/** Sets a style property unless it already has that value, so an unchanged frame touches no style. */
+function writeVar(element, name, value) {
+	if (element.style.getPropertyValue(name) !== value) element.style.setProperty(name, value);
+}
+const px = (value) => `${value}px`;
+/** Rounds to the device pixel grid, so the thumb's edges are crisp and don't shimmer between frames. */
+function snap(value) {
+	const ratio = typeof window !== "undefined" && window.devicePixelRatio || 1;
+	return Math.round(value * ratio) / ratio;
+}
+/**
+* Scroll-driven animations: all sticky gutters need, as they are inside the container that names
+* the timelines. The same condition gates the sticky `@supports` block in scroll-area.css.
+*/
+const stickyScrollTimelineCondition = "(animation-timeline: scroll())";
+/**
+* Scroll-driven animations, and `timeline-scope` for the frame, whose container is a sibling of
+* the absolute gutters. The same condition gates the absolute `@supports` block in scroll-area.css.
+*/
+const scrollTimelineCondition = "(animation-timeline: scroll()) and (timeline-scope: none)";
+/**
+* Whether the browser moves the thumbs itself, from the scroll (scroll-area.css), so the script
+* only sizes them. Sticky gutters don't need `timeline-scope`, so a browser without it still
+* animates them.
+*/
+function supportsScrollTimeline(position = "absolute") {
+	return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports(position === "sticky" ? "(animation-timeline: scroll())" : "(animation-timeline: scroll()) and (timeline-scope: none)");
+}
+/**
+* With absolute gutters, the class of the container (a direct child of the frame): it hides the
+* native scrollbar, names the scroll timelines and takes `overscroll`. The binding's `className`
+* carries it; with sticky gutters the container is the root and carries the root's classes.
+*/
+const scrollAreaContainerClassName = "r-scroll-area__container";
+/**
+* Whether the CSS animates the thumbs from the container's timeline, so the script only sizes them.
+* With sticky gutters: the container is the root (`--sticky-gutters`) and the gutters its child,
+* so they see the timeline it names. With absolute gutters: the container is a direct child of the
+* root with `scrollAreaContainerClassName`, and the gutters come after it (the CSS selects the
+* thumbs as `.r-scroll-area__container ~ .r-scroll-area__gutters …`, and the root hoists the
+* names with `timeline-scope`). Otherwise the script moves them, so a container bound some other
+* way still gets a working thumb.
+*/
+function timelineDrives(container, root, gutters, position) {
+	if (!supportsScrollTimeline(position) || gutters === null) return false;
+	if (position === "sticky") return container === root && root.classList.contains("r-scroll-area--sticky-gutters") && gutters.parentElement === root;
+	return root.classList.contains("r-scroll-area--absolute-gutters") && container.parentElement === root && container.classList.contains("r-scroll-area__container") && gutters.parentElement === root && (container.compareDocumentPosition(gutters) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+}
+/**
+* Why a sticky container's own layout would count the gutters layer, its first child, as one of
+* its items, or `null` when it lays its children out as a block or a gapless flex column.
+*/
+function stickyLayoutProblem(style) {
+	const display = style.display;
+	if (display === "grid" || display === "inline-grid") return "is a grid, so the gutters layer takes its first cell";
+	if (display !== "flex" && display !== "inline-flex") return null;
+	if (!style.flexDirection.startsWith("column")) return "is a flex row, so the gutters layer is a zero-width item and the gutters collapse";
+	const gap = Number.parseFloat(style.rowGap);
+	if (Number.isFinite(gap) && gap > 0) return "is a flex column with a gap, so the gutters layer adds a gap before the first item";
+	return null;
+}
+/** Each sticky container warned about once, in development. */
+const warnedContainers = /* @__PURE__ */ new WeakSet();
+function warnStickyLayout(container, style) {
+	if (process.env.NODE_ENV === "production" || warnedContainers.has(container)) return;
+	const problem = stickyLayoutProblem(style);
+	if (problem === null) return;
+	warnedContainers.add(container);
+	console.warn(`raft-ui: a ScrollArea container with sticky gutters ${problem}. The gutters layer is the container's first child, in flow: lay the content out in one wrapper inside it (ScrollArea's contentClassName), or bind the container with useScrollAreaContainer({ guttersPosition: "absolute" }).`, container);
+}
+/** `--r-scroll-area-thumb-min-length` when the CSS isn't loaded (or isn't a px length). */
+const defaultMinThumbLength = 24;
+/** With `trigger="scroll"` the scrollbars show only while scrolling, so they stay at least this long (ms) to be seen and grabbed. */
+const minScrollTriggerHideDelay = 100;
+/** The `hideDelay` actually used: at least `minScrollTriggerHideDelay` when `trigger="scroll"`. */
+function effectiveHideDelay(trigger, hideDelay) {
+	return trigger === "scroll" ? Math.max(hideDelay, minScrollTriggerHideDelay) : hideDelay;
+}
+/**
+* Everything the overlay scrollbars need from a native scroll container,
+* the root's container, which the gutters lie over as a sibling.
+*
+* The container is whatever element the root's `containerRef` holds after
+* a commit: the hook listens to its `scroll` events itself (passive), so a
+* container needs no handler wired to the scrollbars, and binds again when
+* a render finds another element there.
+*
+* Two paths. The layout path (mounting, a ResizeObserver or MutationObserver
+* notification, `measure()`) reads the container's client and scroll sizes,
+* the gutters' lengths and the writing direction, caches them and draws.
+* The ResizeObserver watches the container (the viewport), the content
+* (`contentRef`, or each element child of the container) and each gutter.
+* The scroll path only asks for one animation frame, however many scroll
+* events come; that frame reads the offset and the scroll size, right after
+* the offset forced the layout (so it costs nothing more), and draws. The
+* scroll size is read there because the content can grow with nothing
+* observed resizing (a list's rows translated past its spacer), and a stale
+* size leaves the thumb's length behind.
+*
+* Drawing works like a native scrollbar: each thumb's length and place come
+* from the current sizes, every frame, with no transition. The length is
+* written as `--r-scroll-area-thumb-length` (px, rounded to device pixels).
+* Where the browser has scroll-driven animations the thumb is moved by one
+* (scroll-area.css), on the compositor, from the scroll itself, on the
+* container's named timeline: the script writes only
+* `--r-scroll-area-thumb-travel` (gutter minus length), and only when a size
+* changes. Elsewhere the script writes the place as a `translate3d`, in the
+* same frame as the length. With `fade` it also writes the px left past
+* each edge on the container.
+*
+* Scrolling renders nothing: `--scrolling`, `--dragging`, `--rtl` and the
+* `--overflow-*` edge classes are set on the root with `classList` (and set
+* again after each render, which would replace them), and `onEdgeChange` is
+* called from the frame. React renders only when a gutter comes or goes.
+*/
+function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, rootRef, guttersRef, orientation, hideDelay, fade = false, onEdgeChange }) {
+	const [rails, setRails] = useState(noRails);
+	const xThumbRef = useRef(null);
+	const yThumbRef = useRef(null);
+	const latest = useRef({
+		fade,
+		guttersPosition,
+		hideDelay,
+		onEdgeChange,
+		orientation
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			fade,
+			guttersPosition,
+			hideDelay,
+			onEdgeChange,
+			orientation
+		};
+	});
+	const state = useRef({
+		dragging: false,
+		edges: noEdges,
+		/** The pending animation frame, 0 when none. */
+		frame: 0,
+		idleTimer: void 0,
+		layout: {
+			clientHeight: 0,
+			clientWidth: 0,
+			minLength: defaultMinThumbLength,
+			railX: 0,
+			railY: 0,
+			scrollHeight: 0,
+			scrollWidth: 0
+		},
+		observer: null,
+		rails: noRails,
+		rtl: false,
+		scrolling: false,
+		/** `supportsScrollTimeline()`, read with the layout. */
+		timeline: false
+	});
+	/**
+	* The classes that change while scrolling: written here, never rendered. The edges and the
+	* direction on the root (callers style from them); scrolling and dragging on the gutters layer,
+	* so toggling them at each scroll's start and end restyles only the gutters, never the whole
+	* content (a long list) under the root.
+	*/
+	const applyClasses = useCallback(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const { dragging, edges, rtl, scrolling } = state.current;
+		const list = root.classList;
+		list.toggle("r-scroll-area--rtl", rtl);
+		list.toggle("r-scroll-area--overflow-y-start", edges.yStart);
+		list.toggle("r-scroll-area--overflow-y-end", edges.yEnd);
+		list.toggle("r-scroll-area--overflow-x-start", edges.xStart);
+		list.toggle("r-scroll-area--overflow-x-end", edges.xEnd);
+		const gutters = guttersRef.current?.classList;
+		gutters?.toggle("r-scroll-area__gutters--scrolling", scrolling);
+		gutters?.toggle("r-scroll-area__gutters--dragging", dragging);
+	}, [guttersRef, rootRef]);
+	/** `measure`, for `draw`, which is declared before it. */
+	const remeasure = useRef(() => {});
+	/** Reads the offset once and draws everything that follows from it and the cached sizes. */
+	const draw = useCallback(() => {
+		const container = containerRef.current;
+		const root = rootRef.current;
+		if (!container || !root) return;
+		const current = state.current;
+		const { fade: fadeContent, onEdgeChange: notify } = latest.current;
+		const { layout } = current;
+		const scrollTop = container.scrollTop;
+		const scrollLeft = Math.abs(container.scrollLeft);
+		layout.scrollHeight = container.scrollHeight;
+		layout.scrollWidth = container.scrollWidth;
+		const metrics = {
+			...layout,
+			scrollLeft,
+			scrollTop
+		};
+		const { timeline } = current;
+		const axes = latest.current.orientation;
+		if (axes !== "horizontal" && thumbPlacement(metrics, "y") !== null !== current.rails.yRail || axes !== "vertical" && thumbPlacement(metrics, "x") !== null !== current.rails.xRail) {
+			remeasure.current();
+			return;
+		}
+		for (const axis of ["y", "x"]) {
+			const element = axis === "y" ? yThumbRef.current : xThumbRef.current;
+			const placement = current.rails[axis === "y" ? "yRail" : "xRail"] ? thumbPlacement(metrics, axis) : null;
+			if (!element || !placement) continue;
+			const rail = axis === "y" ? layout.railY : layout.railX;
+			const length = snap(thumbLength(placement.ratio, rail, layout.minLength));
+			const sign = axis === "x" && current.rtl ? -1 : 1;
+			writeVar(element, "--r-scroll-area-thumb-length", px(length));
+			if (timeline) {
+				writeVar(element, "--r-scroll-area-thumb-travel", px(sign * Math.max(0, rail - length)));
+				continue;
+			}
+			const at = sign * snap(thumbOffset(placement.progress, rail, length));
+			writeVar(element, "transform", axis === "y" ? `translate3d(0px, ${px(at)}, 0px)` : `translate3d(${px(at)}, 0px, 0px)`);
+		}
+		const overflow = scrollOverflow(metrics, {
+			x: current.rails.xRail && thumbPlacement(metrics, "x") !== null,
+			y: current.rails.yRail && thumbPlacement(metrics, "y") !== null
+		});
+		const masked = !fadeContent ? null : latest.current.guttersPosition === "absolute" ? container : fadeRef?.current ?? null;
+		if (masked) {
+			writeVar(masked, "--r-scroll-area-overflow-y-start", px(overflow.yStart));
+			writeVar(masked, "--r-scroll-area-overflow-y-end", px(overflow.yEnd));
+			writeVar(masked, "--r-scroll-area-overflow-x-start", px(overflow.xStart));
+			writeVar(masked, "--r-scroll-area-overflow-x-end", px(overflow.xEnd));
+		}
+		const next = {
+			xEnd: overflows(overflow.xEnd),
+			xStart: overflows(overflow.xStart),
+			yEnd: overflows(overflow.yEnd),
+			yStart: overflows(overflow.yStart)
+		};
+		const previous = current.edges;
+		if (previous.yStart === next.yStart && previous.yEnd === next.yEnd && previous.xStart === next.xStart && previous.xEnd === next.xEnd) return;
+		current.edges = next;
+		applyClasses();
+		if (!notify) return;
+		const edges = physicalEdges(next, current.rtl);
+		const before = physicalEdges(previous, current.rtl);
+		if (edges.top !== before.top || edges.bottom !== before.bottom || edges.left !== before.left || edges.right !== before.right) notify(edges);
+	}, [
+		applyClasses,
+		containerRef,
+		fadeRef,
+		rootRef
+	]);
+	/** At most one frame at a time: however many scroll events come in, the thumb is drawn once a frame. */
+	const scheduleDraw = useCallback(() => {
+		const current = state.current;
+		if (current.frame !== 0) return;
+		if (typeof requestAnimationFrame !== "function") {
+			applyClasses();
+			draw();
+			return;
+		}
+		current.frame = requestAnimationFrame(() => {
+			current.frame = 0;
+			applyClasses();
+			draw();
+		});
+	}, [applyClasses, draw]);
+	/**
+	* The layout path: reads the container's sizes and the gutters' lengths into the cache, then draws.
+	* `layout` re-reads the writing direction, the minimum thumb length and who moves the thumbs
+	* too, which scrolling can't change.
+	*/
+	const measure = useCallback((layout = false) => {
+		const container = containerRef.current;
+		const root = rootRef.current;
+		if (!container || !root) return;
+		const current = state.current;
+		const axes = latest.current.orientation;
+		if (layout) {
+			const position = latest.current.guttersPosition;
+			current.timeline = timelineDrives(container, root, guttersRef.current, position);
+			const style = getComputedStyle(container);
+			current.rtl = axes !== "vertical" && style.direction === "rtl";
+			if (position === "sticky") {
+				writeVar(root, "--r-scroll-area-padding-top", style.paddingTop || "0px");
+				writeVar(root, "--r-scroll-area-padding-left", style.paddingLeft || "0px");
+				writeVar(root, "--r-scroll-area-padding-right", style.paddingRight || "0px");
+				warnStickyLayout(container, style);
+			}
+			const min = Number.parseFloat(getComputedStyle(root).getPropertyValue("--r-scroll-area-thumb-min-length"));
+			current.layout.minLength = Number.isFinite(min) ? min : defaultMinThumbLength;
+		}
+		const cache = current.layout;
+		cache.clientHeight = container.clientHeight;
+		cache.clientWidth = container.clientWidth;
+		cache.scrollHeight = container.scrollHeight;
+		cache.scrollWidth = container.scrollWidth;
+		writeVar(root, "--r-scroll-area-viewport-height", px(cache.clientHeight));
+		writeVar(root, "--r-scroll-area-viewport-width", px(cache.clientWidth));
+		const sizes = {
+			...cache,
+			scrollLeft: 0,
+			scrollTop: 0
+		};
+		const next = {
+			xRail: axes !== "vertical" && thumbPlacement(sizes, "x") !== null,
+			yRail: axes !== "horizontal" && thumbPlacement(sizes, "y") !== null
+		};
+		const yRail = yThumbRef.current?.parentElement;
+		const xRail = xThumbRef.current?.parentElement;
+		cache.railY = next.yRail && yRail ? yRail.clientHeight : 0;
+		cache.railX = next.xRail && xRail ? xRail.clientWidth : 0;
+		if (next.xRail !== current.rails.xRail || next.yRail !== current.rails.yRail) {
+			current.rails = next;
+			setRails(next);
+		}
+		applyClasses();
+		draw();
+	}, [
+		applyClasses,
+		containerRef,
+		draw,
+		guttersRef,
+		rootRef
+	]);
+	useLayoutEffect(() => {
+		remeasure.current = () => measure(true);
+	}, [measure]);
+	/** The container's `scroll` listener: marks it scrolling until `hideDelay` after the last one, and asks for a frame. */
+	const handleScroll = useCallback(() => {
+		const current = state.current;
+		current.scrolling = true;
+		scheduleDraw();
+		clearTimeout(current.idleTimer);
+		current.idleTimer = setTimeout(() => {
+			current.scrolling = false;
+			applyClasses();
+		}, latest.current.hideDelay);
+	}, [applyClasses, scheduleDraw]);
+	const setDragging = useCallback((dragging) => {
+		state.current.dragging = dragging;
+		applyClasses();
+	}, [applyClasses]);
+	/** Binds the observers and the scroll listener to `container`; returns what undoes it. */
+	const bind = useCallback((container, content, root) => {
+		container.addEventListener("scroll", handleScroll, { passive: true });
+		measure(true);
+		const classes = root && typeof MutationObserver !== "undefined" ? new MutationObserver(applyClasses) : null;
+		if (root) classes?.observe(root, {
+			attributeFilter: ["class"],
+			attributes: true
+		});
+		const stopListening = () => {
+			container.removeEventListener("scroll", handleScroll);
+			classes?.disconnect();
+		};
+		if (typeof ResizeObserver === "undefined") return stopListening;
+		const observer = new ResizeObserver(() => measure(true));
+		state.current.observer = observer;
+		for (const element of [
+			container,
+			content,
+			yThumbRef.current?.parentElement,
+			xThumbRef.current?.parentElement
+		]) if (element) observer.observe(element);
+		const disconnect = () => {
+			stopListening();
+			observer.disconnect();
+			if (state.current.observer === observer) state.current.observer = null;
+		};
+		if (content) return disconnect;
+		const observed = /* @__PURE__ */ new Set();
+		const observeChildElements = () => {
+			for (const child of observed) {
+				if (child.parentNode === container) continue;
+				observed.delete(child);
+				observer.unobserve(child);
+			}
+			for (const child of container.children) {
+				if (observed.has(child)) continue;
+				observed.add(child);
+				observer.observe(child);
+			}
+		};
+		observeChildElements();
+		const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
+			observeChildElements();
+			measure(true);
+		});
+		mutations?.observe(container, { childList: true });
+		return () => {
+			mutations?.disconnect();
+			disconnect();
+		};
+	}, [
+		applyClasses,
+		handleScroll,
+		measure
+	]);
+	/** What the observers are bound to now, and how to undo it. */
+	const binding = useRef(null);
+	useLayoutEffect(() => {
+		const container = containerRef.current;
+		const content = contentRef?.current ?? null;
+		const root = rootRef.current;
+		const key = [
+			bind,
+			orientation,
+			fade,
+			guttersPosition
+		];
+		const current = binding.current;
+		if (current && current.container === container && current.content === content && current.root === root && current.key.every((value, index) => value === key[index])) return;
+		current?.unbind();
+		binding.current = {
+			container,
+			content,
+			key,
+			root,
+			unbind: container ? bind(container, content, root) : () => {}
+		};
+	});
+	useLayoutEffect(() => () => {
+		binding.current?.unbind();
+		binding.current = null;
+	}, []);
+	useLayoutEffect(() => {
+		if (!rails.xRail && !rails.yRail) return void 0;
+		measure(true);
+		const observer = state.current.observer;
+		const elements = [yThumbRef.current?.parentElement, xThumbRef.current?.parentElement].filter((element) => element != null);
+		for (const element of elements) observer?.observe(element);
+		return () => {
+			for (const element of elements) observer?.unobserve(element);
+		};
+	}, [
+		rails.xRail,
+		rails.yRail,
+		measure
+	]);
+	useLayoutEffect(() => applyClasses());
+	useEffect(() => {
+		const current = state.current;
+		return () => {
+			clearTimeout(current.idleTimer);
+			if (current.frame !== 0) cancelAnimationFrame(current.frame);
+			current.frame = 0;
+			current.scrolling = false;
+			current.dragging = false;
+		};
+	}, []);
+	return {
+		measure,
+		rails,
+		scrollable: rails.xRail || rails.yRail,
+		setDragging,
+		xThumbRef,
+		yThumbRef
+	};
+}
+//#endregion
+export { effectiveHideDelay, scrollAreaContainerClassName, scrollTimelineCondition, stickyLayoutProblem, stickyScrollTimelineCondition, supportsScrollTimeline, useScrollbars };

package/dist/components/search/search-trigger.d.mts

@@ -9,7 +9,7 @@ export declare function SearchTrigger({ className, render, ...props }: SearchTri
 export type SearchTriggerLabelProps = useRender.ComponentProps<"span">;
 /** The placeholder ("Search Raft"), truncated before the shortcut gives way. */
 export declare function SearchTriggerLabel({ className, render, ...props }: SearchTriggerLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type SearchTriggerShortcutProps = KbdProps;
+export type SearchTriggerShortcutProps = Omit<KbdProps, "size">;
 /** The shortcut that opens search, at the right end. */
 export declare function SearchTriggerShortcut({ className, ...props }: SearchTriggerShortcutProps): import("react").JSX.Element;
 //#endregion

package/dist/components/sidebar/sidebar.d.mts

@@ -11,5 +11,5 @@ export declare function SidebarGroupLabel({ className, render, ...props }: Sideb
 export type SidebarBodyProps = useRender.ComponentProps<"div">;
 export declare function SidebarBody({ className, render, ...props }: SidebarBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type SidebarContentProps = useRender.ComponentProps<"div">;
-export declare function SidebarContent({ children, className, render, ...props }: SidebarContentProps): import("react").JSX.Element;
+export declare function SidebarContent({ children, className, ...props }: SidebarContentProps): import("react").JSX.Element;
 //#endregion