@botiverse/raft-ui 0.55.0 → 0.56.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [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: [
@@ -38,11 +39,16 @@ const sidebarSectionRecipe = tv({ slots: {
 		"not-pointer-fine:static not-pointer-fine:pointer-events-auto not-pointer-fine:translate-y-0 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.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",