@botiverse/raft-ui 0.60.0 → 0.60.2

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.60.2](https://github.com/botiverse/raft-design/compare/v0.60.1...v0.60.2) (2026-11-04)
+
+### Fixed
+
+- **ScrollArea**: no "ResizeObserver loop completed with undelivered notifications" error over a VirtualList. ([#980](https://github.com/botiverse/raft-design/pull/980))
+  - Why: ScrollArea watched every child of its container, including VirtualList's items element, whose min-height VirtualList sets inside its own ResizeObserver callback. When a row in view grew (an image loaded, a reaction was added), that element resized inside the frame's deepest callback and Chromium logged the loop error.
+  - Affects: over a VirtualList, ScrollArea now watches the rows' box inside the items element. A resize or child change is measured on the next animation frame, coalesced with a pending scroll frame; mounting and `measure()` / `actionsRef.measure()` still measure at once.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+
+## [0.60.1](https://github.com/botiverse/raft-design/compare/v0.60.0...v0.60.1) (2026-11-04)
+
+### Fixed
+
+- **DropdownMenuShortcut** and **ContextMenuShortcut**: a menu shortcut draws no cap line. ([#976](https://github.com/botiverse/raft-design/pull/976))
+  - Why: Kbd draws its border with an inset ring, and the menu shortcuts reset `ring`, which left a 1px inset box around every menu shortcut, light and dark.
+  - Affects: only the two menu shortcut parts; Kbd, KbdShortcut, tooltips and the search trigger keep their caps.
+  - Docs: https://raft-design.botiverse.build/components/kbd/
+
 ## [0.60.0](https://github.com/botiverse/raft-design/compare/v0.59.2...v0.60.0) (2026-11-03)
 
 ### Breaking Changes

package/dist/components/context-menu/context-menu.mjs

@@ -51,7 +51,7 @@ const contextMenu = tv({ slots: {
 	label: ["px-2.5 pt-2 pb-1", "font-sans text-caption font-bold text-foreground-hint"],
 	shortcut: [
 		"ml-auto",
-		"h-auto min-w-0 rounded-none bg-transparent p-0 shadow-none ring-0",
+		"h-auto min-w-0 rounded-none bg-transparent p-0 shadow-none inset-ring-0",
 		"font-mono text-mono-meta font-normal text-foreground-hint"
 	],
 	separator: ["-mx-1 my-1 h-px border-0 bg-line-hairline"],

package/dist/components/dropdown-menu/dropdown-menu.mjs

@@ -53,7 +53,7 @@ const dropdownMenu = tv({ slots: {
 	label: ["px-2.5 pt-2 pb-1", "font-sans text-caption font-bold text-foreground-hint"],
 	shortcut: [
 		"ml-auto",
-		"h-auto min-w-0 rounded-none bg-transparent p-0 shadow-none ring-0",
+		"h-auto min-w-0 rounded-none bg-transparent p-0 shadow-none inset-ring-0",
 		"font-mono text-mono-meta font-normal text-foreground-hint"
 	],
 	itemCount: ["ml-auto inline-flex min-w-5 justify-center gap-0 px-1 tabular-nums"],

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

@@ -90,6 +90,18 @@ function warnStickyLayout(container, style) {
 	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);
 }
+/**
+* What is watched for a child of the container. VirtualList's items element (the list as the
+* container, as in a message timeline) is sized by the list itself, from its own ResizeObserver's
+* notification for a row: watching it there would report a size change the browser can't deliver
+* in that frame ("ResizeObserver loop completed with undelivered notifications"). Its rows' box
+* inside it, which only the rows size, is watched instead; the size the list adds below the rows
+* is the scroll size, which the next scrolled frame reads.
+*/
+function observedFor(child) {
+	if (child.getAttribute("data-slot") !== "virtual-list-items") return child;
+	return child.querySelector(":scope > [data-slot=\"virtual-list-visible-items\"]") ?? child;
+}
 /** `--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. */
@@ -107,11 +119,12 @@ function effectiveHideDelay(trigger, hideDelay) {
 * 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.
+* Two paths. The layout path (mounting, `measure()`, and the animation frame
+* after a ResizeObserver or MutationObserver notification) 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, see `observedFor`) 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
@@ -160,6 +173,8 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 		edges: noEdges,
 		/** The pending animation frame, 0 when none. */
 		frame: 0,
+		/** The pending frame measures the layout (an observer reported a change), not only draws. */
+		frameMeasures: false,
 		idleTimer: void 0,
 		layout: {
 			clientHeight: 0,
@@ -197,7 +212,7 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 		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. */
+	/** `measure(true)`, for `draw` and `scheduleFrame`, which are declared before it. */
 	const remeasure = useRef(() => {});
 	/** Reads the offset once and draws everything that follows from it and the cached sizes. */
 	const draw = useCallback(() => {
@@ -268,20 +283,30 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 		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(() => {
+	/**
+	* At most one frame at a time: however many scroll events and observer notifications come in,
+	* the thumb is drawn once a frame. `layout` (an observer's notification) makes the frame measure
+	* the layout first; a frame already asked for by a scroll is upgraded to it, never dropped.
+	*/
+	const scheduleFrame = useCallback((layout) => {
 		const current = state.current;
+		if (layout) current.frameMeasures = true;
 		if (current.frame !== 0) return;
-		if (typeof requestAnimationFrame !== "function") {
+		const run = () => {
+			current.frame = 0;
+			if (current.frameMeasures) {
+				current.frameMeasures = false;
+				remeasure.current();
+				return;
+			}
 			applyClasses();
 			draw();
+		};
+		if (typeof requestAnimationFrame !== "function") {
+			run();
 			return;
 		}
-		current.frame = requestAnimationFrame(() => {
-			current.frame = 0;
-			applyClasses();
-			draw();
-		});
+		current.frame = requestAnimationFrame(run);
 	}, [applyClasses, draw]);
 	/**
 	* The layout path: reads the container's sizes and the gutters' lengths into the cache, then draws.
@@ -348,13 +373,13 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 	const handleScroll = useCallback(() => {
 		const current = state.current;
 		current.scrolling = true;
-		scheduleDraw();
+		scheduleFrame(false);
 		clearTimeout(current.idleTimer);
 		current.idleTimer = setTimeout(() => {
 			current.scrolling = false;
 			applyClasses();
 		}, latest.current.hideDelay);
-	}, [applyClasses, scheduleDraw]);
+	}, [applyClasses, scheduleFrame]);
 	const setDragging = useCallback((dragging) => {
 		state.current.dragging = dragging;
 		applyClasses();
@@ -373,7 +398,7 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 			classes?.disconnect();
 		};
 		if (typeof ResizeObserver === "undefined") return stopListening;
-		const observer = new ResizeObserver(() => measure(true));
+		const observer = new ResizeObserver(() => scheduleFrame(true));
 		state.current.observer = observer;
 		for (const element of [
 			container,
@@ -387,23 +412,24 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 			if (state.current.observer === observer) state.current.observer = null;
 		};
 		if (content) return disconnect;
-		const observed = /* @__PURE__ */ new Set();
+		const observed = /* @__PURE__ */ new Map();
 		const observeChildElements = () => {
-			for (const child of observed) {
-				if (child.parentNode === container) continue;
+			for (const [child, target] of observed) {
+				if (child.parentNode === container && observedFor(child) === target) continue;
 				observed.delete(child);
-				observer.unobserve(child);
+				observer.unobserve(target);
 			}
 			for (const child of container.children) {
 				if (observed.has(child)) continue;
-				observed.add(child);
-				observer.observe(child);
+				const target = observedFor(child);
+				observed.set(child, target);
+				observer.observe(target);
 			}
 		};
 		observeChildElements();
 		const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
 			observeChildElements();
-			measure(true);
+			scheduleFrame(true);
 		});
 		mutations?.observe(container, { childList: true });
 		return () => {
@@ -413,7 +439,8 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 	}, [
 		applyClasses,
 		handleScroll,
-		measure
+		measure,
+		scheduleFrame
 	]);
 	/** What the observers are bound to now, and how to undo it. */
 	const binding = useRef(null);
@@ -463,6 +490,7 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 			clearTimeout(current.idleTimer);
 			if (current.frame !== 0) cancelAnimationFrame(current.frame);
 			current.frame = 0;
+			current.frameMeasures = false;
 			current.scrolling = false;
 			current.dragging = false;
 		};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.60.0",
+  "version": "0.60.2",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",