@botiverse/raft-ui 0.95.2 → 0.95.3

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [0.95.3](https://github.com/botiverse/raft-design/compare/v0.95.2...v0.95.3) (2026-11-12)
+
+### Fixed
+
+- **A label/value list that switches layout on a resize no longer raises a ResizeObserver loop error** ([DescriptionList › Labels go above only when a value doesn't fit](https://raft-design.botiverse.build/components/description-list/#labels-go-above-only-when-a-value-doesnt-fit)). A horizontal `DescriptionList` and `MessageActionCard`'s properties decide whether their labels go above their values (`useLabelValueFit`) in the next animation frame after a resize, instead of inside the ResizeObserver's callback; several resizes before that frame share one decision. The first frame, a label or value changing and a web font arriving are still decided before the paint.
+  - Why: the hook observes the list and every value's children; when a value's notification flipped `data-stacked`, the list's height changed while the observer was still delivering, and the browser fired "ResizeObserver loop completed with undelivered notifications" as a window error. Hosts that surface window errors, such as the Artifact viewer, showed it as a failure (a horizontal DescriptionList in an Artifact page at 1781px).
+  - Affects: a resize that crosses the boundary stacks or unstacks the labels one frame later; nothing else changes.
+  - Docs: https://raft-design.botiverse.build/components/description-list/#labels-go-above-only-when-a-value-doesnt-fit
+
 ## [0.95.2](https://github.com/botiverse/raft-design/compare/v0.95.1...v0.95.2) (2026-11-12)
 
 ### Added

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

@@ -90,11 +90,17 @@ function labelsGoAbove(list, parts) {
 /**
 * 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).
+* beside them again: the list's CSS does the rest. The first frame is
+* decided synchronously, in the layout effect, and so is a label or value
+* changing (the MutationObserver) or a web font arriving: those paint the
+* right layout at once. A resize of the list or a value is decided in the
+* next animation frame, so a resize that crosses the boundary takes effect
+* one frame later: deciding inside the ResizeObserver's callback changed
+* the list's height while the observer was still delivering its children's
+* sizes, and the browser reported "ResizeObserver loop completed with
+* undelivered notifications" as a window error
+* (design/patterns/responsive.md#when-a-row-runs-out-of-room,
+* #the-first-frame-is-the-settled-one).
 */
 function useLabelValueFit(list, enabled, parts) {
 	const { label, value } = parts;
@@ -108,7 +114,14 @@ function useLabelValueFit(list, enabled, parts) {
 			const stacked = labelsGoAbove(list, selectors);
 			if (stacked !== list.hasAttribute("data-stacked")) list.toggleAttribute("data-stacked", stacked);
 		};
-		const resize = new ResizeObserver(fit);
+		let frame = 0;
+		const resize = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				fit();
+			});
+		});
 		const observeAll = () => {
 			resize.disconnect();
 			resize.observe(list);
@@ -128,6 +141,7 @@ function useLabelValueFit(list, enabled, parts) {
 		fonts?.addEventListener("loadingdone", fit);
 		fit();
 		return () => {
+			cancelAnimationFrame(frame);
 			resize.disconnect();
 			mutation.disconnect();
 			fonts?.removeEventListener("loadingdone", fit);

package/package.json

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