@botiverse/raft-ui 0.74.0 → 0.75.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [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/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.75.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",