@botiverse/raft-ui 0.75.0 → 0.76.1

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [0.76.1](https://github.com/botiverse/raft-design/compare/v0.76.0...v0.76.1) (2026-11-08)
+
+### Fixed
+
+- **Select and Combobox lists never scroll sideways**: a Select list reaches into the popup's 4px inset and pads it back, so a `SelectSeparator` meets the popup's edge and stays inside the list, and Select and Combobox lists set `overflow-x-hidden`. ([#1070](https://github.com/botiverse/raft-design/pull/1070))
+  - Why: the separator reached 4px past each side of the list, which is the scroller, so the list scrolled sideways by 8px, and a classic scrollbar (Windows) drew a horizontal bar under the runtimes list (Artea, #proj-raft-ui:20a421bd). The list also clipped the line 4px short of the popup's edge.
+  - Affects: every Select with a separator, such as the runtime picker's Show installed only row: no sideways scroll, and the line now runs to the popup's border. Options keep their inset. A list action keeps its highlight after it adds items above it, as before.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+
+## [0.76.0](https://github.com/botiverse/raft-design/compare/v0.75.0...v0.76.0) (2026-11-08)
+
+### Changed
+
+- **VirtualList writes no `--virtual-list-width`**: the list no longer writes its width as a CSS variable on its scroller, and `refreshListWidth()` on its imperative API does nothing (deprecated; it will be removed). ([#1068](https://github.com/botiverse/raft-design/pull/1068))
+  - Why: the variable inherits, so a write on the scroller restyled every row under it, on every frame of a window resize, and nothing read it (InNOut's trace of a window drag in the app, #proj-frontend:57f32c96).
+  - Affects: CSS that read `var(--virtual-list-width)` gets nothing; read the width with the list's `onResize` or a ResizeObserver. Neither raft-ui nor the Raft app read it.
+  - Docs: https://raft-design.botiverse.build/components/virtual-list/
+
+### Fixed
+
+- **Resizing a window no longer restyles everything inside a ScrollArea**: the sizes ScrollArea measures are no longer written on the root. With sticky gutters, the viewport's height (`--r-scroll-area-viewport-height`) and the container's padding (`--r-scroll-area-padding-top`, `-left` and `-right`) go on the gutters layer, and with `fade` the viewport's height and width (`--r-scroll-area-viewport-width`) on the content its mask is on; with absolute gutters, which read none of them, nothing is written. They are registered not to inherit (`@property`). A message timeline (`useScrollAreaContainer` on a VirtualList) restyled every message on every frame of a window drag. ([#1068](https://github.com/botiverse/raft-design/pull/1068))
+  - Why: in the app, dragging the window's edge took 61-73ms a frame, 75-85% of it restyling, because the viewport's size changed on the root of each column's message list (InNOut, #proj-frontend:57f32c96).
+  - Affects: dragging the window's edge in the Raft app (a channel with a thread open, 1600 to 900 to 1600px wide): style recalculation 2.7s to 1.5s and the median step 52 to 27ms with this release, 0.3s and 17ms together with the app's own fix. CSS that read those variables inside an area now sees their initial values (100% and 0px); they were internal, and neither raft-ui nor the Raft app read them. How the scrollbars and `fade` look is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+
 ## [0.75.0](https://github.com/botiverse/raft-design/compare/v0.74.0...v0.75.0) (2026-11-08)
 
 ### Changed

package/dist/components/combobox/combobox.mjs

@@ -67,7 +67,7 @@ const combobox = tv({
 		],
 		header: ["flex items-center justify-between px-3", "gap-2 py-1.5 pr-1.5 pl-4"],
 		separator: ["h-px shrink-0 border-0", "bg-line-hairline"],
-		list: ["max-h-64 overflow-y-auto overscroll-contain", "flex flex-col p-1 scroll-py-1"],
+		list: ["max-h-64 overflow-x-hidden overflow-y-auto overscroll-contain", "flex flex-col p-1 scroll-py-1"],
 		item: [
 			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
 			"text-left outline-none transition-colors",

package/dist/components/scroll-area/scroll-area.css

@@ -7,7 +7,7 @@
  *
  *   sticky    the root is the container; the gutters are its first child, a
  *             zero-height layer stuck to the top of the viewport and sized
- *             by --r-scroll-area-viewport-{height,width}.
+ *             by --r-scroll-area-viewport-height.
  *   absolute  the root is a positioned frame holding the container and,
  *             after it, the gutters, laid over the frame (`inset: 0`). For a
  *             container that can't hold children: a textarea.
@@ -49,10 +49,15 @@
  *   --r-scroll-area-timeline-{y,x}   the names of the container's scroll
  *                                    timelines, unique to the ScrollArea
  * What the script writes as inline styles (React never renders them):
- *   --r-scroll-area-viewport-{height,width}   on the root: the container's
+ *   --r-scroll-area-viewport-height           with sticky gutters, on the
+ *                                             gutters layer: the container's
+ *                                             client height (layout path only)
+ *   --r-scroll-area-viewport-{height,width}   with sticky gutters and `fade`,
+ *                                             on the content: the container's
  *                                             client size (layout path only)
- *   --r-scroll-area-padding-{top,left,right}  on a sticky root: its padding,
- *                                             which the gutters layer
+ *   --r-scroll-area-padding-{top,left,right}  with sticky gutters, on the
+ *                                             gutters layer: the container's
+ *                                             padding, which the layer
  *                                             reaches over (layout path only)
  *   --r-scroll-area-thumb-length              on each thumb: its length, px
  *   --r-scroll-area-thumb-travel              on each thumb, with scroll-driven
@@ -67,8 +72,9 @@
  * (sticky) and see it, or the root hoists it (`timeline-scope`, absolute).
  * The script then writes only when a size changes. Elsewhere a scrolled
  * frame changes the thumbs' transforms, and the length with them when the
- * content's size changed. Never the root while scrolling, whose variables
- * everything inside would inherit.
+ * content's size changed. Never the root, whose variables everything inside
+ * would inherit: a write there, on every frame of a window resize, restyled
+ * every row of a long list under it.
  *
  * The thumb is the label colour (`foreground`) made translucent, dark on
  * light pages and light on dark ones, so it sits on any content; there is no
@@ -103,6 +109,41 @@
   initial-value: 0px;
 }
 
+/*
+ * The container's client size and padding, written by the script on each
+ * layout (every frame of a window resize) on the elements that read them,
+ * with sticky gutters only: the height and the padding on the gutters layer,
+ * whose gutters take the height with `inherit`, and with `fade` the size on
+ * the content, whose mask is one viewport large. They don't inherit:
+ * a change restyles those few elements, not the content under them. 100%
+ * until the first measurement, as the gutters and the mask were before it.
+ */
+@property --r-scroll-area-viewport-height {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --r-scroll-area-viewport-width {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --r-scroll-area-padding-top {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --r-scroll-area-padding-left {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --r-scroll-area-padding-right {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
 /*
  * Room kept clear at each end of the scrollbars, such as for a sticky header
  * or footer inside the area (`railInset`). Set on the root itself; they don't
@@ -170,15 +211,6 @@
 
     --r-scroll-area-thumb-size: var(--r-scroll-area-thumb-size-medium);
     --r-scroll-area-thumb-size-hover: var(--r-scroll-area-thumb-size-hover-medium);
-    /*
-     * Until the first measurement, and again for a nested scroll area, which
-     * would otherwise inherit its parent's.
-     */
-    --r-scroll-area-viewport-height: 100%;
-    --r-scroll-area-viewport-width: 100%;
-    --r-scroll-area-padding-top: 0px;
-    --r-scroll-area-padding-left: 0px;
-    --r-scroll-area-padding-right: 0px;
     /* The gutter is as thick as the hovered thumb plus the gap on both sides. */
     --r-scroll-area-rail-size: calc(
       var(--r-scroll-area-thumb-size-hover) + 2 * var(--r-scroll-area-rail-gap)
@@ -492,6 +524,10 @@
     position: absolute;
     transition: opacity var(--r-scroll-area-duration-fade-out) var(--r-scroll-area-easing);
   }
+  /* The viewport's height is written on the layer and doesn't inherit: each sticky gutter takes it. */
+  .r-scroll-area.r-scroll-area--sticky-gutters > .r-scroll-area__gutters > .r-scroll-area__gutter {
+    --r-scroll-area-viewport-height: inherit;
+  }
   .r-scroll-area > .r-scroll-area__gutters > .r-scroll-area__gutter--vertical {
     inline-size: var(--r-scroll-area-rail-size);
     inset-block-start: var(--r-scroll-area-rail-top);

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

@@ -319,15 +319,19 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 		if (!container || !root) return;
 		const current = state.current;
 		const axes = latest.current.orientation;
+		const sticky = latest.current.guttersPosition === "sticky";
+		const gutters = guttersRef.current;
 		if (layout) {
 			const position = latest.current.guttersPosition;
-			current.timeline = timelineDrives(container, root, guttersRef.current, position);
+			current.timeline = timelineDrives(container, root, gutters, 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");
+			if (sticky) {
+				if (gutters) {
+					writeVar(gutters, "--r-scroll-area-padding-top", style.paddingTop || "0px");
+					writeVar(gutters, "--r-scroll-area-padding-left", style.paddingLeft || "0px");
+					writeVar(gutters, "--r-scroll-area-padding-right", style.paddingRight || "0px");
+				}
 				warnStickyLayout(container, style);
 			}
 			const min = Number.parseFloat(getComputedStyle(root).getPropertyValue("--r-scroll-area-thumb-min-length"));
@@ -338,8 +342,15 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 		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));
+		if (sticky) {
+			const height = px(cache.clientHeight);
+			if (gutters) writeVar(gutters, "--r-scroll-area-viewport-height", height);
+			const masked = latest.current.fade ? fadeRef?.current ?? null : null;
+			if (masked) {
+				writeVar(masked, "--r-scroll-area-viewport-height", height);
+				writeVar(masked, "--r-scroll-area-viewport-width", px(cache.clientWidth));
+			}
+		}
 		const sizes = {
 			...cache,
 			scrollLeft: 0,
@@ -363,6 +374,7 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 		applyClasses,
 		containerRef,
 		draw,
+		fadeRef,
 		guttersRef,
 		rootRef
 	]);
@@ -452,7 +464,8 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 			bind,
 			orientation,
 			fade,
-			guttersPosition
+			guttersPosition,
+			guttersRef.current
 		];
 		const current = binding.current;
 		if (current && current.container === container && current.content === content && current.root === root && current.key.every((value, index) => value === key[index])) return;

package/dist/components/select/select.mjs

@@ -44,7 +44,7 @@ const select = tv({
 			"rounded-container bg-layer-popover p-1 text-foreground",
 			"shadow-float ring-1 ring-line-seam"
 		],
-		list: ["max-h-64 overflow-y-auto overscroll-contain scroll-py-6", "flex flex-col"],
+		list: ["max-h-64 overflow-x-hidden overflow-y-auto overscroll-contain scroll-py-6", "-mx-1 flex flex-col px-1"],
 		item: [
 			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
 			"text-left outline-none transition-colors",
@@ -151,7 +151,9 @@ function findActionValue(value) {
 * row, the same position then holds another item while focus stays on the row,
 * and the next arrow key starts from the wrong place. Once the list has
 * re-rendered, focus the list and then the row again: the row's focus handler
-* re-reads its position and moves the highlight back to it.
+* re-reads its position and moves the highlight back to it. The list takes
+* focus only for this: it has no tabindex of its own, and Chrome focuses a
+* scroller without one only while its content overflows it.
 */
 function keepActionHighlighted(event) {
 	const target = event.target;
@@ -160,8 +162,12 @@ function keepActionHighlighted(event) {
 	if (!row) return;
 	requestAnimationFrame(() => {
 		if (!row.isConnected || row.hasAttribute("data-highlighted")) return;
-		row.closest("[role=\"listbox\"]")?.focus({ preventScroll: true });
+		const list = row.closest("[role=\"listbox\"]");
+		const lent = list !== null && !list.hasAttribute("tabindex");
+		if (lent) list.tabIndex = -1;
+		list?.focus({ preventScroll: true });
 		row.focus({ preventScroll: true });
+		if (lent) list.removeAttribute("tabindex");
 	});
 }
 function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }) {

package/dist/components/virtual-list/VirtualList.mjs

@@ -913,10 +913,7 @@ function VirtualList(props) {
 		const index = keyToIndexRef.current.get(key);
 		if (index !== void 0) return fenwickTree.sum(index) + getRowsTop();
 	});
-	const refreshListWidth = useCallback(() => {
-		const listEl = listElRef.current;
-		if (listEl) listEl.style.setProperty("--virtual-list-width", `${listEl.offsetWidth}px`);
-	}, [listElRef]);
+	const refreshListWidth = useCallback(() => {}, []);
 	const imperativeApi = useMemo(() => ({
 		listElRef,
 		itemsElRef,
@@ -1054,15 +1051,15 @@ function VirtualList(props) {
 		compensationYRef
 	});
 	/**
-	* The list's own resize: stores its height and width, sets `--virtual-list-width` and updates
-	* the range. Skipped while the list is hidden with `display: none`.
+	* The list's own resize: stores its height and width and updates the range. Skipped while the
+	* list is hidden with `display: none`. It writes no CSS variable on the list: one would be
+	* inherited by every row, and restyle them all on every frame of a window resize.
 	*/
 	const handleListResize = useEventCallback((listEl, deferRender) => {
 		if (isHiddenByDisplayNone(listEl)) return;
 		const height = listEl.offsetHeight;
 		const width = listEl.offsetWidth;
 		const viewport = viewportRef.current;
-		listEl.style.setProperty("--virtual-list-width", `${width}px`);
 		if (renderCol == null && renderItemWithCols == null) {
 			if (height === viewport.listHeight) return;
 		} else if (height === viewport.listHeight && width === viewport.listWidth) return;

package/dist/components/virtual-list/public-types.d.mts

@@ -103,7 +103,11 @@ export interface VirtualListApi {
    * scroll position of your own that must hold while the rows it depends on are measured.
    */
   submitScrollAdjustingTask: (task: () => void) => void;
-  /** Writes the scroller's width to `--virtual-list-width` again. */
+  /**
+   * Does nothing. It wrote the scroller's width to `--virtual-list-width`, which the list no longer
+   * writes: read the width with `onResize` or a ResizeObserver.
+   * @deprecated The list no longer writes `--virtual-list-width`; this will be removed.
+   */
   refreshListWidth: () => void;
 }
 export type RenderReason = "sessionChanged" | "itemsChanged" | "listScroll" | "batchItemResize" | "listResize";

package/dist/components/virtual-list/styles/virtual-list.css

@@ -12,10 +12,9 @@
  * In the `components` layer, so a utility in the consumer's `className` (`h-*`, `max-h-*`, `overflow-*`)
  * overrides these rules.
  *
- * CSS variable the list writes as an inline style, for sticky children to read:
- *   --virtual-list-width   on `.r-virtual-list`: the list's offsetWidth
- * The rows' element carries no CSS variable: custom properties inherit, so one written there on every
- * scroll would restyle every row. Content that must follow the rows' offset uses `onTransformChange`.
+ * The list writes no CSS variable: custom properties inherit, so one written on the scroller or the rows'
+ * element on every scroll, or every frame of a window resize, would restyle every row. Content that must
+ * follow the rows' offset uses `onTransformChange`.
  */
 @layer components {
   /* VirtualList renders its own scroller (scroll-area.md#native-scrolling): it

package/package.json

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