@botiverse/raft-ui 0.55.0 → 0.56.1

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [0.56.1](https://github.com/botiverse/raft-design/compare/v0.56.0...v0.56.1) (2026-10-31)
+
+### Fixed
+
+- **Sidebar section controls hold their place in the row while hidden**, so a long section title truncates before them at rest and its count stays visible; with a mouse they only fade in on hover, focus or with their menu open, and nothing in the row moves. The attention mark sits over that reserved place and hides when the controls show; on a touch screen both show at rest, side by side. ([#931](https://github.com/botiverse/raft-design/pull/931))
+
+## [0.56.0](https://github.com/botiverse/raft-design/compare/v0.55.0...v0.56.0) (2026-10-31)
+
+### Changed
+
+- **Sidebar section header:** its controls rest in the title's hint color and turn body color only on hover, focus or with their menu open; the controls end on the header's line, and the title starts where the rows' content starts (stdrc, 2026-10-31). ([#922](https://github.com/botiverse/raft-design/pull/922))
+
+### Fixed
+
+- **Popups under window controls stay on their trigger.** The frame insets (macOS traffic lights, caption buttons) are now a collision boundary instead of collision padding, so Base UI's shift limiter no longer pushes a popup with an arrow off its trigger: a top-bar tooltip in the installed web app on macOS sat about 69px right of its icon, 38px on Windows and Linux desktop. Popups portaled into a container of their own keep their padding and their clipping ancestors. Tooltip, Popover, PreviewCard, Select, menus, Combobox and NotificationCenter share one hook. ([#927](https://github.com/botiverse/raft-design/pull/927))
+- **MessageItem's Saved marker** is 24px with footnote text, like the reactions and badges beside it, so it no longer reads as a lighter grey. ([#923](https://github.com/botiverse/raft-design/pull/923))
+
+### Design System
+
+- **Window-control insets bound a popup; they don't pad it** (Page Structure › Frame insets). ([#927](https://github.com/botiverse/raft-design/pull/927))
+  - Docs: https://raft-design.botiverse.build/patterns/page-structure/
+- **Panel header actions:** shown buttons, then ⋯, then Close ([#920](https://github.com/botiverse/raft-design/pull/920)); **Navigation:** a listed item opens in the side panel, Raft has no breadcrumbs ([#921](https://github.com/botiverse/raft-design/pull/921)).
+
 ## [0.55.0](https://github.com/botiverse/raft-design/compare/v0.54.0...v0.55.0) (2026-10-31)
 
 ### Added

package/dist/components/combobox/combobox.mjs

@@ -1,7 +1,7 @@
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
-import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { chipRemoveBase } from "../../lib/chip-remove.mjs";
 import { Check, X } from "lucide-react";
@@ -283,10 +283,10 @@ function ComboboxSeparator({ className, ...props }) {
 		...props
 	});
 }
-function ComboboxFramePositioner({ collisionPadding, container, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
+function ComboboxFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
 	return /* @__PURE__ */ jsx(Combobox.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

package/dist/components/combobox-select/combobox-select.mjs

@@ -1,6 +1,6 @@
 import { useTheme } from "../../lib/theme/use-theme.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
-import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { usePhoneMedia } from "../../lib/phone-media.mjs";
 import { roomBelowIsShort } from "./combobox-select.list-side.mjs";
@@ -65,10 +65,10 @@ const PHONE_LIST_COLLISION = {
 	align: "shift",
 	fallbackAxisSide: "none"
 };
-function ComboboxSelectFramePositioner({ collisionPadding, container, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
+function ComboboxSelectFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
 	return /* @__PURE__ */ jsx(Combobox.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

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

@@ -1,6 +1,6 @@
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
-import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { Kbd } from "../kbd/kbd.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ContextMenu } from "@base-ui/react";
@@ -83,10 +83,10 @@ function ContextMenuPortal(props) {
 		...useThemeScopeProps(props)
 	});
 }
-function ContextMenuFramePositioner({ collisionPadding, container, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
+function ContextMenuFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
 	return /* @__PURE__ */ jsx(ContextMenu.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

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

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
 import { Badge } from "../badge/badge.mjs";
-import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { Kbd } from "../kbd/kbd.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
@@ -99,10 +99,10 @@ function DropdownMenuPopup({ className, ...props }) {
 		...props
 	});
 }
-function DropdownMenuFramePositioner({ collisionPadding, container, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, 5, container);
+function DropdownMenuFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
 	return /* @__PURE__ */ jsx(Menu.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

package/dist/components/message-item/message-footer.recipe.mjs

@@ -5,8 +5,8 @@ const messageFooter = tv({
 		savedIndicator: [
 			"inline-flex min-w-0 max-w-full items-center gap-1 overflow-hidden whitespace-nowrap select-none",
 			"[&_svg]:shrink-0",
-			"h-[22px] rounded-chip pr-[6.5px] pl-[5.5px]",
-			"text-caption font-semibold text-foreground-muted",
+			"h-6 rounded-chip pr-[6.5px] pl-[5.5px]",
+			"text-footnote font-bold text-foreground-muted",
 			"bg-fill-muted hover:overlay-medium active:overlay-medium",
 			"outline-none focus-visible:shadow-focus",
 			"[&_svg]:size-3.5 [&_svg]:text-foreground"

package/dist/components/notification-center/notification-center.mjs

@@ -2,7 +2,7 @@ import { headEdgePull } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
-import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { Status } from "../status/status.mjs";
 import { EmptyState } from "../empty-state/empty-state.mjs";
 import { AlertTriangle, Bell, CheckCircle2, Info } from "lucide-react";
@@ -132,10 +132,10 @@ function NotificationCenterTrigger({ className, children, ...props }) {
 function NotificationCenterPortal(props) {
 	return /* @__PURE__ */ jsx(Popover.Portal, { ...useThemeScopeProps(props) });
 }
-function NotificationCenterFramePositioner({ collisionPadding, container, defaultCollisionPadding, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, defaultCollisionPadding, container);
+function NotificationCenterFramePositioner({ collisionBoundary, collisionPadding, container, defaultCollisionPadding, ...props }) {
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, defaultCollisionPadding, container);
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

package/dist/components/popover/popover.mjs

@@ -1,6 +1,6 @@
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
-import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/components/popover/popover.tsx
@@ -60,10 +60,10 @@ function PopoverPopup({ className, ...props }) {
 		...props
 	});
 }
-function PopoverFramePositioner({ collisionPadding, container, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, 5, container);
+function PopoverFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

package/dist/components/preview-card/preview-card.mjs

@@ -1,7 +1,7 @@
 import { tv } from "../../lib/tv.mjs";
 import { useTheme } from "../../lib/theme/use-theme.mjs";
 import { resolveThemeScopeProps, useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
-import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/preview-card/preview-card.tsx
@@ -72,10 +72,10 @@ function PreviewCardPopup({ className, ...props }) {
 		...scopeProps
 	});
 }
-function PreviewCardFramePositioner({ collisionPadding, container, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, 5, container);
+function PreviewCardFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 5, container);
 	return /* @__PURE__ */ jsx(PreviewCard.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

package/dist/components/select/select.mjs

@@ -1,7 +1,7 @@
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
-import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { Check, ChevronDown } from "lucide-react";
 import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -264,10 +264,10 @@ function SelectPopup({ className, ...props }) {
 		...props
 	});
 }
-function SelectFramePositioner({ collisionPadding, container, ...props }) {
-	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
+function SelectFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
+	const collision = usePopupCollision(collisionPadding, collisionBoundary, 8, container);
 	return /* @__PURE__ */ jsx(Select.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

package/dist/components/sidebar/sidebar-section.recipe.mjs

@@ -11,7 +11,8 @@ const sidebarSectionRecipe = tv({ slots: {
 	sidebarSectionHeader: [
 		"flex items-center justify-between",
 		"group/section-header",
-		"my-0 h-auto gap-2 px-5 pt-4 pb-0",
+		"my-0 h-auto gap-2 pt-4 pb-0 pl-5",
+		"pr-[calc(max(0px,calc(8px-var(--scrollbar-size,0px)))+12px)]",
 		"not-pointer-fine:pb-1.5"
 	],
 	sidebarSectionDisclosure: [
@@ -27,6 +28,7 @@ const sidebarSectionRecipe = tv({ slots: {
 	sidebarSectionCount: ["font-mono text-mono-meta font-normal tabular-nums text-foreground-hint"],
 	sidebarSectionAttention: [
 		"inline-flex min-w-4.5 shrink-0 items-center justify-center",
+		"pointer-fine:absolute pointer-fine:top-1/2 pointer-fine:right-0 pointer-fine:-translate-y-1/2",
 		"group-data-open/section:hidden",
 		"group-data-popup-open/section-header:hidden",
 		"group-hover/section-header:hidden"
@@ -34,15 +36,20 @@ const sidebarSectionRecipe = tv({ slots: {
 	sidebarSectionTrailing: ["relative flex min-w-4.5 shrink-0 items-center justify-end"],
 	sidebarSectionControls: [
 		"flex shrink-0 items-center gap-1 not-pointer-fine:gap-5",
-		"pointer-events-none absolute top-1/2 right-0 -translate-y-1/2 opacity-0",
-		"not-pointer-fine:static not-pointer-fine:pointer-events-auto not-pointer-fine:translate-y-0 not-pointer-fine:opacity-100",
+		"pointer-events-none opacity-0",
+		"not-pointer-fine:pointer-events-auto not-pointer-fine:opacity-100",
 		"pointer-fine:group-hover/section-header:pointer-events-auto pointer-fine:group-hover/section-header:opacity-100",
 		"pointer-fine:focus-within:pointer-events-auto pointer-fine:focus-within:opacity-100",
-		"pointer-fine:has-data-popup-open:pointer-events-auto pointer-fine:has-data-popup-open:opacity-100"
+		"pointer-fine:has-data-popup-open:pointer-events-auto pointer-fine:has-data-popup-open:opacity-100",
+		"[&>[data-icon-inset]:last-child]:-mr-icon-inset"
 	],
 	sidebarSectionControl: [
 		"relative flex h-6 w-auto min-w-6 shrink-0 items-center justify-center p-0 -my-1",
 		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+		"[--icon-inset:calc((--spacing(6)-14px)/2)]",
+		"text-foreground-hint",
+		"hover:text-foreground active:text-foreground focus-visible:text-foreground",
+		"data-popup-open:bg-fill-medium data-popup-open:text-foreground",
 		"not-pointer-fine:after:absolute not-pointer-fine:after:inset-[-11px] not-pointer-fine:after:content-['']"
 	]
 } });

package/dist/components/tooltip/tooltip.mjs

@@ -1,7 +1,7 @@
 import { tv } from "../../lib/tv.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
-import { frameCollisionPadding, useFrameInsets } from "../../lib/frame-insets.mjs";
-import { Children, Fragment, isValidElement, useMemo } from "react";
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
+import { Children, Fragment, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/components/tooltip/tooltip.tsx
@@ -153,13 +153,17 @@ const CONTENT_COLLISION_AVOIDANCE = {
 * Inside the portal, so it mounts each time the tooltip opens and reads the
 * frame insets then (lib/frame-insets.ts): a tooltip that would open into
 * one flips away from it, and one that would overlap it along its trigger
-* shifts out of it. Its padding grows to the inset itself, not past it.
+* shifts out of it. It keeps to the inset itself, not past it.
+*
+* The insets are its collision boundary, not its padding (frameCollision):
+* Base UI sizes the shift limiter from the padding, so a padding carrying a
+* window-controls inset pushed every short tooltip off its trigger, its arrow
+* off center, by up to half the left and right insets.
 */
-function TooltipFramePositioner({ collisionPadding, container, ...props }) {
-	const insets = useFrameInsets(container);
-	const padding = useMemo(() => frameCollisionPadding(collisionPadding ?? 5, insets, 0), [collisionPadding, insets]);
+function TooltipFramePositioner({ collisionBoundary, collisionPadding, container, ...props }) {
+	const collision = usePopupCollision(void 0, collisionBoundary, collisionPadding ?? 5, container, 0);
 	return /* @__PURE__ */ jsx(Tooltip.Positioner, {
-		collisionPadding: padding,
+		...collision,
 		...props
 	});
 }

package/dist/lib/frame-insets.mjs

@@ -110,18 +110,102 @@ function useFrameInsets(container) {
 	const [insets] = useState(() => readFrameInsets(container));
 	return insets;
 }
+function hasInset(insets) {
+	return insets.top !== 0 || insets.right !== 0 || insets.bottom !== 0 || insets.left !== 0;
+}
 /**
-* A popup's collision padding (a popover, a menu, a select or combobox list,
-* a preview card): `defaultPadding` where there is no inset, and 8px inside
-* each inset. A `collisionPadding` the caller passes wins as it is.
+* Whether a popup's portal container is the document's own: none, the body or the root.
+* A ref counts as a container of its own whatever it holds now: the caller memoizes on
+* the ref object, which never changes, so reading `.current` here would take an empty
+* ref (a first render, a keepMounted popup) for the body for good. Erring this way only
+* keeps the padding, never clips the popup.
 */
-function usePopupCollisionPadding(collisionPadding, defaultPadding, container) {
+function portalsToBody(container) {
+	if (container && "current" in container) return false;
+	const node = container;
+	const element = node && !(node instanceof Element) && "host" in node ? node.host : node;
+	return element == null || element === document.body || element === document.documentElement;
+}
+/**
+* The window inset by the frame insets, as a collision boundary rect. Its size
+* is read each time Base UI places the popup (it copies the rect's fields), so
+* it follows the window when it resizes while the popup is open.
+*/
+function frameCollisionBoundary(insets) {
+	const root = () => document.documentElement;
+	return {
+		x: insets.left,
+		y: insets.top,
+		get width() {
+			return Math.max(0, root().clientWidth - insets.left - insets.right);
+		},
+		get height() {
+			return Math.max(0, root().clientHeight - insets.top - insets.bottom);
+		}
+	};
+}
+/**
+* How a popup keeps out of the frame insets: `padding` from the window's edge,
+* and on each side with an inset, at least the inset plus `gap`
+* (frameCollisionPadding).
+*
+* The insets bound the collision area (frameCollisionBoundary) and the padding
+* keeps only what is left past them. They are not added to the padding,
+* because Base UI also sizes its shift limiter from the padding (limitShift
+* offset = arrow / 2 + (left + right) / 2, or top + bottom beside the trigger):
+* a padding that carried a 70px window-controls inset pushed a short tooltip
+* with an arrow up to that half-sum off its trigger with nothing in the way.
+* The area the popup is kept in is the same either way.
+*
+* Only a popup portaled to the body (no `container`, or the body or the root
+* element) takes the boundary. One portaled into a container of its own may
+* sit inside an element that clips it (a dialog's scrolling body), and an
+* explicit boundary would replace Base UI's default, the clipping ancestors,
+* so it would flip and size against the window and be cut off.
+*
+* With no inset, a `boundary` of the caller's own (it bounds the popup as it
+* is, so the insets go into the padding), or a container of its own, this is
+* frameCollisionPadding.
+*/
+function frameCollision(padding, boundary, insets, gap, container) {
+	const padded = frameCollisionPadding(padding, insets, gap);
+	if (!hasInset(insets) || boundary !== void 0 || typeof document === "undefined" || !portalsToBody(container)) return {
+		collisionPadding: padded,
+		collisionBoundary: boundary
+	};
+	const full = padded;
+	const side = (key) => Math.max(0, full[key] - insets[key]);
+	return {
+		collisionPadding: {
+			top: side("top"),
+			right: side("right"),
+			bottom: side("bottom"),
+			left: side("left")
+		},
+		collisionBoundary: frameCollisionBoundary(insets)
+	};
+}
+/**
+* A popup's collision padding and boundary (a tooltip, a popover, a menu, a
+* select or combobox list, a preview card): `defaultPadding` where there is no
+* inset, and `gap` (8px) inside each inset, the insets as the boundary
+* (frameCollision). A `collisionPadding` the caller passes wins as it is, and
+* a `collisionBoundary` the caller passes is kept. Call it from a part inside
+* the popup's portal, which mounts each time the popup opens.
+*/
+function usePopupCollision(collisionPadding, collisionBoundary, defaultPadding, container, gap = 8) {
 	const insets = useFrameInsets(container);
-	return useMemo(() => collisionPadding ?? frameCollisionPadding(defaultPadding, insets, 8), [
+	return useMemo(() => collisionPadding === void 0 ? frameCollision(defaultPadding, collisionBoundary, insets, gap, container) : {
+		collisionPadding,
+		collisionBoundary
+	}, [
 		collisionPadding,
+		collisionBoundary,
 		defaultPadding,
-		insets
+		insets,
+		gap,
+		container
 	]);
 }
 //#endregion
-export { NO_FRAME_INSETS, frameCollisionPadding, frameInsetsFrom, readFrameInsets, useFrameInsets, usePopupCollisionPadding };
+export { NO_FRAME_INSETS, frameCollision, frameCollisionBoundary, frameCollisionPadding, frameInsetsFrom, readFrameInsets, useFrameInsets, usePopupCollision };

package/package.json

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