@botiverse/raft-ui 0.74.0 → 0.76.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## [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
+
+- **A horizontal DescriptionList puts its labels above their values only when a value doesn't fit**: the list measures its labels and values and keeps each label beside its value while every value fits on one line there; once one doesn't (but would on a line of its own), or the value column would be narrower than 160px, the whole list stacks. It no longer stacks below a fixed 24rem (384px), and is no longer a size container. MessageActionCard's properties follow the same rule. ([#1065](https://github.com/botiverse/raft-design/pull/1065))
+  - Why: an agent's Role, Computer and Model stacked in a 370px profile though they fit beside their labels; the switch should follow the content, not a width picked for the longest label (Artea, #triage:428e3ce6).
+  - Affects: short facts in panels from about 300px to 384px, and on a phone, now stand beside their labels. A list whose values are wide still stacks, at the width they stop fitting.
+  - Docs: https://raft-design.botiverse.build/components/description-list/#labels-go-above-only-when-a-value-doesnt-fit
+
+### Fixed
+
+- **Chinese text on Linux uses Noto Sans CJK**: the Simplified Chinese fallback lists `Noto Sans CJK SC`, the name Linux distributions install it under, after `Noto Sans SC`, as the Traditional Chinese list already did with `Noto Sans CJK TC`. ([#1063](https://github.com/botiverse/raft-design/pull/1063))
+  - Why: on a Linux machine with only the distribution's CJK font, Chinese and its full-width punctuation fell to the system's last-resort face, whose colon sits centered with space around it (Remy, #proj-raft-ui:0c3f4e06; seen in the read line's screenshots from CI).
+  - Affects: Linux desktops and CI screenshots; Mac and Windows already matched PingFang SC or Microsoft YaHei first.
+  - Docs: https://raft-design.botiverse.build/foundations/typography/
+
 ## [0.74.0](https://github.com/botiverse/raft-design/compare/v0.73.0...v0.74.0) (2026-11-08)
 
 ### Added

package/dist/components/description-list/description-list.d.mts

@@ -49,7 +49,7 @@ declare const descriptionList: import("tailwind-variants/lite").TVReturnType<{
 }>>;
 export type DescriptionListDirection = NonNullable<VariantProps<typeof descriptionList>["direction"]>;
 export type DescriptionListProps = useRender.ComponentProps<"dl"> & Pick<VariantProps<typeof descriptionList>, "direction">;
-export declare function DescriptionList({ direction, className, render, ...props }: DescriptionListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function DescriptionList({ direction, className, render, ref, ...props }: DescriptionListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type DescriptionItemProps = useRender.ComponentProps<"div">;
 export declare function DescriptionItem({ className, render, ...props }: DescriptionItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type DescriptionTermProps = useRender.ComponentProps<"dt">;

package/dist/components/description-list/description-list.mjs

@@ -1,4 +1,6 @@
 import { tv } from "../../lib/tv.mjs";
+import { useLabelValueFit } from "../../lib/label-value-fit.mjs";
+import { useCallback, useState } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/description-list/description-list.tsx
@@ -21,10 +23,10 @@ const descriptionList = tv({
 	variants: { direction: {
 		vertical: {},
 		horizontal: { root: [
-			"@container/description-list w-full grid items-baseline",
-			"[&>[data-slot=description-item]>*]:@max-sm/description-list:col-span-full",
-			"[&>[data-slot=description-item]>[data-slot=description-details]]:@max-sm/description-list:min-h-0",
-			"[&>[data-slot=description-item]+[data-slot=description-item]>[data-slot=description-term]]:@max-sm/description-list:mt-2",
+			"w-full grid items-baseline",
+			"[&[data-stacked]>[data-slot=description-item]>*]:col-span-full",
+			"[&[data-stacked]>[data-slot=description-item]>[data-slot=description-details]]:min-h-0",
+			"[&[data-stacked]>[data-slot=description-item]+[data-slot=description-item]>[data-slot=description-term]]:mt-2",
 			"*:data-[slot=description-item]:contents",
 			"[&>[data-slot=description-item]>[data-slot=description-term]]:mb-0",
 			"[&>[data-slot=description-item]>[data-slot=description-term]]:max-w-40",
@@ -52,12 +54,20 @@ const descriptionList = tv({
 	} },
 	defaultVariants: { direction: "vertical" }
 });
-function DescriptionList({ direction = "vertical", className, render, ...props }) {
+const listParts = {
+	label: ":scope > [data-slot=description-item] > [data-slot=description-term]",
+	value: ":scope > [data-slot=description-item] > [data-slot=description-details]"
+};
+function DescriptionList({ direction = "vertical", className, render, ref, ...props }) {
+	const [list, setList] = useState(null);
+	const listRef = useCallback((element) => setList(element), []);
+	useLabelValueFit(list, direction === "horizontal", listParts);
 	const { root } = descriptionList({ direction });
 	const defaultProps = { className: root({ className }) };
 	return useRender({
 		defaultTagName: "dl",
 		render,
+		ref: ref ? [listRef, ref] : listRef,
 		props: mergeProps(defaultProps, props),
 		state: { slot: "description-list" }
 	});

package/dist/components/message-action-card/message-action-card-content.recipe.mjs

@@ -1,7 +1,7 @@
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/message-action-card/message-action-card-content.recipe.ts
 const messageActionCardContent = tv({ slots: {
-	root: ["p-3", "@container/action-card flex flex-col gap-2 px-3 pt-0 pb-3"],
+	root: ["p-3", "flex flex-col gap-2 px-3 pt-0 pb-3"],
 	panel: [
 		"h-(--collapsible-panel-height) overflow-hidden",
 		"transition-[height] duration-200 ease-out motion-reduce:transition-none",
@@ -9,19 +9,19 @@ const messageActionCardContent = tv({ slots: {
 	],
 	properties: [
 		"m-0 grid",
-		"@max-sm/action-card:grid-cols-1",
+		"data-stacked:grid-cols-1",
 		"grid-cols-[minmax(88px,max-content)_minmax(0,1fr)] items-baseline gap-x-4 gap-y-0.5"
 	],
 	property: ["contents"],
 	propertyLabel: [
 		"max-w-40 min-w-0 wrap-break-word",
 		"text-footnote font-medium text-foreground-hint",
-		"[[data-slot=message-action-card-property]+[data-slot=message-action-card-property]>&]:@max-sm/action-card:mt-2"
+		"[[data-stacked]>[data-slot=message-action-card-property]+[data-slot=message-action-card-property]>&]:mt-2"
 	],
 	propertyValue: [
 		"m-0 min-w-0 wrap-break-word",
 		"min-h-8 py-1.5 text-callout text-foreground",
-		"@max-sm/action-card:min-h-0 @max-sm/action-card:py-0"
+		"[[data-stacked]>[data-slot=message-action-card-property]>&]:min-h-0 [[data-stacked]>[data-slot=message-action-card-property]>&]:py-0"
 	],
 	scopeList: ["mt-0 stack-y-1.5"],
 	scopeListViewport: ["max-h-[136px]"],

package/dist/components/message-action-card/message-action-card.d.mts

@@ -32,7 +32,7 @@ export declare function MessageActionCardStatus({ className, appearance, ...prop
 export declare function MessageActionCardCollapseTrigger({ className, ...props }: MessageActionCardCollapseTriggerProps): import("react").JSX.Element;
 export declare function MessageActionCardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").JSX.Element;
 export declare function MessageActionCardHeaderStatus({ className, render, ...props }: useRender.ComponentProps<"span">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare function MessageActionCardProperties({ className, render, ...props }: useRender.ComponentProps<"dl">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function MessageActionCardProperties({ className, render, ref, ...props }: useRender.ComponentProps<"dl">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardProperty({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardPropertyLabel({ className, render, ...props }: useRender.ComponentProps<"dt">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardPropertyValue({ className, render, ...props }: useRender.ComponentProps<"dd">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/message-action-card/message-action-card.mjs

@@ -1,10 +1,12 @@
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Badge } from "../badge/badge.mjs";
+import { useLabelValueFit } from "../../lib/label-value-fit.mjs";
 import { MessageEmbed, MessageEmbedContent, MessageEmbedHeader } from "../message-embed/message-embed.mjs";
 import { messageActionCard } from "./message-action-card.recipe.mjs";
 import { messageActionCardContent } from "./message-action-card-content.recipe.mjs";
 import { ChevronDown, Info, Zap } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
@@ -127,11 +129,19 @@ function MessageActionCardHeaderStatus({ className, render, ...props }) {
 		state: { slot: "message-action-card-header-status" }
 	});
 }
-function MessageActionCardProperties({ className, render, ...props }) {
+const propertyParts = {
+	label: ":scope > [data-slot=message-action-card-property] > [data-slot=message-action-card-property-label]",
+	value: ":scope > [data-slot=message-action-card-property] > [data-slot=message-action-card-property-value]"
+};
+function MessageActionCardProperties({ className, render, ref, ...props }) {
+	const [list, setList] = useState(null);
+	const listRef = useCallback((element) => setList(element), []);
+	useLabelValueFit(list, true, propertyParts);
 	const { properties } = messageActionCardContent();
 	return useRender({
 		defaultTagName: "dl",
 		render,
+		ref: ref ? [listRef, ref] : listRef,
 		props: mergeProps({ className: properties({ className }) }, props),
 		state: { slot: "message-action-card-properties" }
 	});
@@ -249,7 +259,7 @@ function MessageActionCardNotice({ className, render, icon, children, ...props }
 		render,
 		props: mergeProps({
 			className: notice({ className }),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [icon ?? /* @__PURE__ */ jsx(Info, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children })] })
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [icon ?? /* @__PURE__ */ jsx(Info, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children })] })
 		}, props),
 		state: { slot: "message-action-card-notice" }
 	});

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/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/dist/fonts.css

@@ -11,10 +11,10 @@
 :where(:root) {
   --heading-font:
     "Space Grotesk", Arial, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
-    "Noto Sans SC", system-ui, sans-serif;
+    "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
   --sans-font:
     "Space Grotesk", Arial, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
-    "Noto Sans SC", system-ui, sans-serif;
+    "Noto Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
   --mono-font: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
 }
 

package/dist/lib/label-value-fit.mjs

@@ -0,0 +1,117 @@
+import { useLayoutEffect } from "react";
+//#region src/lib/label-value-fit.ts
+/** The narrowest the label column gets: `minmax(88px, max-content)` in both lists. */
+const minLabelColumn = 88;
+/**
+* The narrowest the value column may be beside its labels: as wide as a label
+* may grow (`max-w-40`). A value column narrower than its label column reads
+* as the label's footnote, not its answer.
+*/
+const minValueColumn = 160;
+/**
+* Reads every element's width with nothing wrapping inside it: all of them
+* go to one-line layout, are read in one pass and get their inline style
+* back, so the list is laid out once for the read, not once per element.
+*/
+function oneLineWidths(els) {
+	const saved = els.map(({ style }) => [
+		style.width,
+		style.maxWidth,
+		style.whiteSpace,
+		style.flexWrap
+	]);
+	for (const { style } of els) {
+		style.width = "max-content";
+		style.maxWidth = "none";
+		style.whiteSpace = "nowrap";
+		style.flexWrap = "nowrap";
+	}
+	const widths = els.map((el) => el.getBoundingClientRect().width);
+	els.forEach(({ style }, i) => {
+		[style.width, style.maxWidth, style.whiteSpace, style.flexWrap] = saved[i];
+	});
+	return widths;
+}
+/**
+* Whether a two-column label/value list has to put its labels above their
+* values: some value doesn't fit on one line beside the label column, but
+* would on a line of its own, or the value column would be narrower than
+* `minValueColumn`. A value too long for a line of its own (a paragraph)
+* wraps either way and doesn't decide. Measured in one-line layout whatever
+* the list shows now, so the answer depends only on the list's width and its
+* content and can't flap at the boundary.
+*/
+function labelsGoAbove(list, parts) {
+	const style = getComputedStyle(list);
+	const width = list.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+	const gap = parseFloat(style.columnGap) || 0;
+	const labels = Array.from(list.querySelectorAll(parts.label));
+	const values = Array.from(list.querySelectorAll(parts.value));
+	const caps = labels.map((label) => parseFloat(getComputedStyle(label).maxWidth));
+	const widths = oneLineWidths([...labels, ...values]);
+	let labelColumn = minLabelColumn;
+	labels.forEach((_, i) => {
+		const natural = widths[i];
+		const cap = caps[i];
+		labelColumn = Math.max(labelColumn, Number.isNaN(cap) ? natural : Math.min(natural, cap));
+	});
+	const valueColumn = width - labelColumn - gap;
+	if (valueColumn < minValueColumn) return true;
+	for (const natural of widths.slice(labels.length)) if (natural - valueColumn > .5 && natural - width <= .5) return true;
+	return false;
+}
+/**
+* Sets `data-stacked` on a two-column label/value list while its labels have
+* to go above their values (`labelsGoAbove`), and takes it off when they fit
+* beside them again: the list's CSS does the rest. The decision is taken
+* synchronously, in the layout effect and the observers' callbacks, so the
+* first frame and every resize paint the right layout; again when the list
+* or a value resizes, a label or value changes, or a web font arrives
+* (design/patterns/responsive.md#when-a-row-runs-out-of-room).
+*/
+function useLabelValueFit(list, enabled, parts) {
+	const { label, value } = parts;
+	useLayoutEffect(() => {
+		if (!list || !enabled || typeof ResizeObserver === "undefined") return void 0;
+		const selectors = {
+			label,
+			value
+		};
+		const fit = () => {
+			const stacked = labelsGoAbove(list, selectors);
+			if (stacked !== list.hasAttribute("data-stacked")) list.toggleAttribute("data-stacked", stacked);
+		};
+		const resize = new ResizeObserver(fit);
+		const observeAll = () => {
+			resize.disconnect();
+			resize.observe(list);
+			for (const el of Array.from(list.querySelectorAll(`${label}, ${value}`))) for (const child of Array.from(el.children)) resize.observe(child);
+		};
+		observeAll();
+		const mutation = new MutationObserver(() => {
+			observeAll();
+			fit();
+		});
+		mutation.observe(list, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.addEventListener("loadingdone", fit);
+		fit();
+		return () => {
+			resize.disconnect();
+			mutation.disconnect();
+			fonts?.removeEventListener("loadingdone", fit);
+			list.removeAttribute("data-stacked");
+		};
+	}, [
+		list,
+		enabled,
+		label,
+		value
+	]);
+}
+//#endregion
+export { labelsGoAbove, useLabelValueFit };

package/package.json

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