@botiverse/raft-ui 0.72.0 → 0.74.0

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+## [0.74.0](https://github.com/botiverse/raft-design/compare/v0.73.0...v0.74.0) (2026-11-08)
+
+### Added
+
+- **Lint rules for apps**: `@botiverse/raft-ui/lint` is a lint plugin with the design system's rules for app code, in the ESLint plugin format, which Oxlint loads as a JS plugin. Its first rule, `raft-ui/prefer-scroll-area`, reports a class or an inline style that makes an element scroll natively (`overflow-auto`, `overflow-scroll` and their `-x-` and `-y-` forms, with any variant) where an app writes it, unless a `// raft-ui: native-scroll <reason>` comment on the line above says which exception it is. The comment covers the string on the next line only, not the rest of a multi-line `cn(...)`, so a class added to the list later is still checked. Turn on every rule at once by extending `./node_modules/@botiverse/raft-ui/dist/lint/recommended.json` from `.oxlintrc.json` (or `configs.recommended` in an ESLint flat config); a rule added later reaches the app with the upgrade. ([#1058](https://github.com/botiverse/raft-design/pull/1058), [#1059](https://github.com/botiverse/raft-design/pull/1059))
+  - Why: the design system's rules should reach the apps, and the agents working in them, with raft-ui itself rather than through each repository's instructions; every region that scrolls is a ScrollArea, and nothing outside raft-ui checked it (Artea, #proj-raft-ui:#209).
+  - Affects: nothing until an app turns the plugin on. Then each native scroller in its code is reported: make it a ScrollArea (or `PanelScrollViewport` in a Panel), or add the comment with its reason.
+  - Docs: https://raft-design.botiverse.build/about/use-raft-ui/#lint-rules
+
+### Changed
+
+- **useScrollAreaContainer gives its container the overflow**: the classes in `containerProps.className` make the element scroll in the `orientation`, as ScrollArea's own container does (vertical: `overflow-y: auto` and `overflow-x: hidden`; horizontal: the other way round; both: `auto`), so the element needs no overflow class of its own and nothing for `raft-ui/prefer-scroll-area` to report. `ComposerInput` and `ActivityInboxViewport` no longer carry `overflow-y-auto`. ([#1059](https://github.com/botiverse/raft-design/pull/1059))
+  - Why: the hook asked the app to add a native overflow class, which the new lint rule reports (Jasper's review of the lint rule).
+  - Affects: apps can drop the overflow class from a `useScrollAreaContainer` element. One they keep still wins (the hook's rule has no specificity), so nothing breaks. A vertical container that had only `overflow-y-auto` now clips sideways (`overflow-x: hidden`) instead of scrolling sideways with no scrollbar; pass `orientation="both"` for content that scrolls both ways.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/#your-own-container
+
+### Design System
+
+- **A thread's timeline**: conversation.md lists what a thread's timeline shows (the message it started from and every message a person wrote), when it appears, the rail for a mouse, the Timeline entry in the thread's More menu on every device, a half-height sheet on a phone and a popover wider, and how its items are marked. No raft-ui component changed. ([#1057](https://github.com/botiverse/raft-design/pull/1057))
+  - Why: a long thread buries the few messages people wrote under agents' work (Artea, #proj-raft-ui:#206).
+  - Docs: https://raft-design.botiverse.build/patterns/conversation/#a-threads-timeline
+
+## [0.73.0](https://github.com/botiverse/raft-design/compare/v0.72.0...v0.73.0) (2026-11-08)
+
+### Changed
+
+- **Every region that scrolls is a ScrollArea**: `PanelScrollViewport`, `ActivityInboxViewport`, `SearchShellViewport`, `NotificationCenterScroller`, `FilesViewport`, `TasksPanelViewport`, ChoiceList's scroller, `MobileNavServerPopoverList`, `ComposerSuggestionList`, `AnnouncementDialogBody`, `MessageActionCardScopeListViewport` and `DialogNav` show ScrollArea's overlay scrollbar instead of the platform's. Native scrolling stays only in the places scroll-area.md lists, each with its reason, and a test fails on any other. ([#1055](https://github.com/botiverse/raft-design/pull/1055))
+  - Why: one look for scrollbars on every platform and theme, and a scrollbar that takes no room from a list's 8px inset (Artea, #proj-raft-ui:#209).
+  - Affects: **keyboard order**: a `PanelScrollViewport` whose content overflows is now a Tab stop of its own, before the controls inside it (a scrolling region must be reachable by keyboard). Check tests that depend on Tab order when upgrading. `PanelScrollViewport`'s `data-slot` (`panel-scroll-viewport`) replaces ScrollArea's own `scroll-area` on that element, so a selector for `[data-slot=scroll-area]` doesn't match it. On a phone MessageList keeps its native scroller. ChoiceList, DialogNav, the mobile server list and the composer suggestions keep their scroller out of the Tab order (`tabIndex={-1}`), since their rows take focus. `scrollbar-list` and `useScrollbarSize` are now only for a native scroller that can't be a ScrollArea.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+
+### Fixed
+
+- **FilterChipRemove**: on a touch screen its 44px tap area no longer reaches over the chip's label. It grows 10px up and down, 6px toward the label (exactly to its edge) and 14px outward, so a tap on the label's end no longer clears the filter. ([#1054](https://github.com/botiverse/raft-design/pull/1054))
+  - Why: the tap area grew 10px on every side, across the 6px gap and 4px into the label (Remy, #proj-workspace:#221).
+  - Affects: touch screens. Keep the next control 16px from the chip (was 12), since the tap area now reaches 10px past the chip's end.
+  - Docs: https://raft-design.botiverse.build/components/filter-chip/
+- **ArtifactIcon** is pinned to Lucide's `file-code` by a test, so a Lucide upgrade that changes that icon fails instead of letting the rail drift from the Artifact chip. ([#1054](https://github.com/botiverse/raft-design/pull/1054))
+
 ## [0.72.0](https://github.com/botiverse/raft-design/compare/v0.71.0...v0.72.0) (2026-11-07)
 
 ### Changed

package/dist/components/activity-inbox/activity-inbox-shell.d.mts

@@ -4,9 +4,12 @@ import { ComponentPropsWithRef } from "react";
 export type ActivityInboxPanelProps = ComponentPropsWithRef<typeof Panel>;
 export declare function ActivityInboxPanel({ className, ...props }: ActivityInboxPanelProps): import("react").JSX.Element;
 export type ActivityInboxViewportProps = ComponentPropsWithRef<"div">;
-/** The list's scroller. It publishes its scrollbar's width for the item
- *  cells (useScrollbarSize), so their fills sit 8px from both edges. */
-export declare function ActivityInboxViewport({ className, ref, ...props }: ActivityInboxViewportProps): import("react").JSX.Element;
+/** The list's scroller, a ScrollArea container with absolute gutters: the
+ *  overlay scrollbar takes no room, so the item cells' fills sit 8px from both
+ *  edges with or without it (design/patterns/lists.md), and the scroller lays
+ *  out its own column of items. `ref`, `className` and the native props are
+ *  the scrolling element's; a frame around it holds the scrollbar. */
+export declare function ActivityInboxViewport({ children, className, ref, style, ...props }: ActivityInboxViewportProps): import("react").JSX.Element;
 export type ActivityInboxLoadingMoreProps = ComponentPropsWithRef<"div">;
 export declare function ActivityInboxLoadingMore({ className, ...props }: ActivityInboxLoadingMoreProps): import("react").JSX.Element;
 //#endregion

package/dist/components/activity-inbox/activity-inbox-shell.mjs

@@ -1,8 +1,10 @@
-import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { cn } from "../../cn.mjs";
+import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
 import { Panel } from "../panel/panel.mjs";
-import { useScrollbarSize } from "../../lib/use-scrollbar-size.mjs";
 import { activityInboxShell } from "./activity-inbox-shell.recipe.mjs";
-import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/activity-inbox/activity-inbox-shell.tsx
 function ActivityInboxPanel({ className, ...props }) {
 	const { panel } = activityInboxShell();
@@ -14,17 +16,34 @@ function ActivityInboxPanel({ className, ...props }) {
 		...props
 	});
 }
-/** The list's scroller. It publishes its scrollbar's width for the item
-*  cells (useScrollbarSize), so their fills sit 8px from both edges. */
-function ActivityInboxViewport({ className, ref, ...props }) {
-	const { viewport } = activityInboxShell();
-	const scrollbarRef = useScrollbarSize();
-	const [setRef] = useMergedRef(ref, scrollbarRef);
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "activity-inbox-viewport",
-		className: viewport({ className }),
-		...props,
-		ref: setRef
+/** The list's scroller, a ScrollArea container with absolute gutters: the
+*  overlay scrollbar takes no room, so the item cells' fills sit 8px from both
+*  edges with or without it (design/patterns/lists.md), and the scroller lays
+*  out its own column of items. `ref`, `className` and the native props are
+*  the scrolling element's; a frame around it holds the scrollbar. */
+function ActivityInboxViewport({ children, className, ref, style, ...props }) {
+	const { frame, viewport } = activityInboxShell();
+	const { containerProps, frameProps, guttersProps } = useScrollAreaContainer({
+		containerRef: ref,
+		guttersPosition: "absolute",
+		overscroll: "contain"
+	});
+	const ownStyle = useMemo(() => ({
+		...containerProps.style,
+		...style
+	}), [containerProps.style, style]);
+	return /* @__PURE__ */ jsxs("div", {
+		...frameProps,
+		"data-slot": "activity-inbox-viewport-frame",
+		className: frame({ className: frameProps.className }),
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "activity-inbox-viewport",
+			...containerProps,
+			...props,
+			style: ownStyle,
+			className: viewport({ className: cn(containerProps.className, className) }),
+			children
+		}), /* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps })]
 	});
 }
 function ActivityInboxLoadingMore({ className, ...props }) {

package/dist/components/activity-inbox/activity-inbox-shell.recipe.mjs

@@ -7,7 +7,12 @@ const activityInboxShell = tv({ slots: {
 		"bg-layer-canvas font-sans text-foreground",
 		listColumnMargin
 	],
-	viewport: ["relative flex flex-1 flex-col gap-0.5 overflow-y-auto scrollbar-list *:shrink-0", "bg-layer-canvas px-0 pt-2 pb-[calc(8px+env(safe-area-inset-bottom,0px))]"],
+	frame: ["min-h-0 flex-1"],
+	viewport: [
+		"relative flex min-h-0 flex-1 flex-col gap-0.5 *:shrink-0",
+		"outline-none focus-visible:shadow-focus",
+		"bg-layer-canvas px-0 pt-2 pb-[calc(8px+env(safe-area-inset-bottom,0px))]"
+	],
 	loadingMore: ["py-3 text-center", "text-caption text-foreground-hint"]
 } });
 //#endregion

package/dist/components/announcement-dialog/announcement-dialog.d.mts

@@ -1,11 +1,12 @@
 import { ButtonProps } from "../button/button.mjs";
 import "../button/index.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { Dialog, DialogClose, DialogContentProps, DialogTitleProps, DialogTrigger } from "../dialog/dialog.mjs";
 import "../dialog/index.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/announcement-dialog/announcement-dialog.d.ts
 export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;
-export declare function AnnouncementDialogBody({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogBody({ className, ...props }: ScrollAreaProps): import("react").JSX.Element;
 export declare function AnnouncementDialogHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 export declare function AnnouncementDialogLabel({ className, children, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 export declare function AnnouncementDialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;

package/dist/components/announcement-dialog/announcement-dialog.mjs

@@ -1,5 +1,6 @@
 import { tv } from "../../lib/tv.mjs";
 import { Button } from "../button/button.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from "../dialog/dialog.mjs";
 import { useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const announcement = tv({ slots: {
 	content: ["@container/announcement max-w-xl gap-0 overflow-clip p-0"],
 	body: [
-		"min-h-0 max-h-[70dvh] overflow-y-auto pb-5",
+		"min-h-0 max-h-[70dvh] pb-5",
 		"[&_[data-slot=announcement-picture]+[data-slot=announcement-text]]:mt-5",
 		"px-(--surface-inset) pt-(--surface-inset)"
 	],
@@ -43,10 +44,10 @@ function AnnouncementDialogContent({ className, initialFocus, ref, ...props }) {
 }
 function AnnouncementDialogBody({ className, ...props }) {
 	const { body } = announcement();
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "announcement-body",
-		className: body({ className }),
-		...props
+		...props,
+		className: body({ className })
 	});
 }
 function AnnouncementDialogHeader({ className, ...props }) {

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

@@ -1,4 +1,5 @@
 import { Button } from "../button/button.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Checkbox } from "../checkbox/checkbox.mjs";
 import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/input-group.mjs";
@@ -255,8 +256,10 @@ function ChoiceList(props) {
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			"data-slot": "choice-list-frame",
 			className: slots.frame(),
-			children: [/* @__PURE__ */ jsx("div", {
+			children: [/* @__PURE__ */ jsx(ScrollArea, {
 				"data-slot": "choice-list-scroller",
+				overscroll: "contain",
+				tabIndex: -1,
 				className: slots.scroller(),
 				children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
 					"data-slot": "choice-list-note",

package/dist/components/choice-list/choice-list.recipe.mjs

@@ -31,11 +31,11 @@ const choiceList = tv({
 		footer: ["shrink-0 border-t border-line-seam p-1"]
 	},
 	variants: {
-		scroll: { true: { scroller: ["max-h-72 overflow-y-auto overscroll-contain"] } },
+		scroll: { true: { scroller: ["max-h-72"] } },
 		fill: { true: {
 			root: ["flex min-h-0 flex-1 flex-col"],
 			frame: ["min-h-0 flex-1"],
-			scroller: ["flex-1 overflow-y-auto overscroll-contain"]
+			scroller: ["flex-1"]
 		} },
 		hasAction: { true: { item: ["pr-11"] } }
 	}

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

@@ -181,6 +181,8 @@
     var(--elevation-float);
   outline: 0;
 }
+/* Native scroll, an allowed exception (scroll-area.md#native-scrolling): Base UI
+   owns the list element and its children (items can be a function of each item). */
 .r-combobox-select__list {
   box-sizing: border-box;
   max-height: var(--combobox-select-list-max-height, 16rem);

package/dist/components/composer/composer-suggestion-list.d.mts

@@ -1,4 +1,5 @@
 import { VariantProps } from "../../lib/tv.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/composer/composer-suggestion-list.d.ts
 declare const composerSuggestionList: import("tailwind-variants/lite").TVReturnType<{
@@ -113,8 +114,10 @@ declare const composerSuggestionList: import("tailwind-variants/lite").TVReturnT
   aside: string[];
   meta: string[];
 }>>;
-export type ComposerSuggestionListProps = useRender.ComponentProps<"div">;
-export declare function ComposerSuggestionList({ className, render, ...props }: ComposerSuggestionListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ComposerSuggestionListProps = ScrollAreaProps;
+/** The suggestions' popup, a ScrollArea: `ref`, `className`, `render` and
+ *  the native props (the listbox's role and id) are the scrolling element's. */
+export declare function ComposerSuggestionList({ className, ...props }: ComposerSuggestionListProps): import("react").JSX.Element;
 type ComposerSuggestionListVariantProps = VariantProps<typeof composerSuggestionList>;
 export type ComposerSuggestionGroupProps = useRender.ComponentProps<"div"> & Pick<ComposerSuggestionListVariantProps, "separated">;
 export declare function ComposerSuggestionGroup({ separated, className, render, ...props }: ComposerSuggestionGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/composer/composer-suggestion-list.mjs

@@ -1,11 +1,13 @@
 import { tv } from "../../lib/tv.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/composer/composer-suggestion-list.tsx
 const composerSuggestionList = tv({
 	slots: {
 		root: [
-			"absolute inset-x-0 bottom-full w-auto overflow-y-auto",
+			"absolute inset-x-0 bottom-full w-auto",
 			"mb-2 max-h-60 overflow-x-hidden rounded-container p-1",
 			"bg-layer-popover text-foreground ring-1 ring-line-seam shadow-float"
 		],
@@ -47,16 +49,16 @@ const composerSuggestionList = tv({
 		metaVariant: "text"
 	}
 });
-function ComposerSuggestionList({ className, render, ...props }) {
+/** The suggestions' popup, a ScrollArea: `ref`, `className`, `render` and
+*  the native props (the listbox's role and id) are the scrolling element's. */
+function ComposerSuggestionList({ className, ...props }) {
 	const { root } = composerSuggestionList();
-	const defaultProps = {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "composer-suggestion-list",
+		overscroll: "contain",
+		tabIndex: -1,
+		...props,
 		className: root({ className })
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props)
 	});
 }
 function ComposerSuggestionGroup({ separated, className, render, ...props }) {

package/dist/components/composer/composer.recipe.mjs

@@ -12,7 +12,7 @@ const composer = tv({
 		inputFrame: ["w-full min-w-0", "[--r-scroll-area-resize-grip-size:0px]"],
 		input: [
 			"max-h-32 w-full resize-none bg-transparent outline-none",
-			"field-sizing-content overflow-y-auto",
+			"field-sizing-content",
 			"min-h-6 px-0.5",
 			"font-sans text-body font-normal text-foreground",
 			"placeholder:text-foreground-hint"

package/dist/components/dialog/dialog.d.mts

@@ -1,6 +1,7 @@
 import { StyledProps } from "../../lib/styled-props.mjs";
 import { ButtonProps } from "../button/button.mjs";
 import "../button/index.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { PanelActionProps } from "../panel/panel-action.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { ComponentPropsWithRef, ReactNode } from "react";
@@ -78,8 +79,9 @@ export type DialogSurfaceProps = useRender.ComponentProps<"div">;
  * DialogContent draws the same frame for a Base UI dialog.
  */
 export declare function DialogSurface({ className, render, children, ...props }: DialogSurfaceProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type DialogNavProps = useRender.ComponentProps<"nav">;
-/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
-export declare function DialogNav({ className, render, ...props }: DialogNavProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type DialogNavProps = Omit<ScrollAreaProps, "contentClassName">;
+/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body: a
+ *  `<nav>` that is a ScrollArea, its rows in the area's content element. */
+export declare function DialogNav({ className, render, ...props }: DialogNavProps): import("react").JSX.Element;
 //#endregion
 export { Dialog$1 as Dialog };

package/dist/components/dialog/dialog.mjs

@@ -7,6 +7,7 @@ import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
 import { Button } from "../button/button.mjs";
 import { DialogSheetHeadContext, DialogSheetReset, dialogSheet, useDialogSheet, useInDialogSheetHead } from "./dialog-sheet-context.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { TextLink } from "../text-link/text-link.mjs";
 import { PanelAction } from "../panel/panel-action.mjs";
 import { Dialog } from "@base-ui/react/dialog";
@@ -354,17 +355,22 @@ function DialogSurface({ className, render, children, ...props }) {
 		}, props, { children: /* @__PURE__ */ jsx(DialogSheetReset, { children }) })
 	});
 }
-const dialogNav = tv({ slots: { root: ["flex shrink-0 flex-col overflow-y-auto", "w-52 gap-0.5 border-r border-line-seam py-2 max-md:hidden"] } });
-/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
+const dialogNav = tv({ slots: {
+	root: ["shrink-0", "w-52 border-r border-line-seam py-2 max-md:hidden"],
+	content: ["flex flex-col gap-0.5"]
+} });
+/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body: a
+*  `<nav>` that is a ScrollArea, its rows in the area's content element. */
 function DialogNav({ className, render, ...props }) {
-	const { root } = dialogNav();
-	return useRender({
-		defaultTagName: "nav",
-		render,
-		props: mergeProps({
-			"data-slot": "dialog-nav",
-			className: root({ className })
-		}, props)
+	const { root, content } = dialogNav();
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		"data-slot": "dialog-nav",
+		overscroll: "contain",
+		tabIndex: -1,
+		...props,
+		render: render ?? /* @__PURE__ */ jsx("nav", {}),
+		className: root({ className }),
+		contentClassName: content()
 	});
 }
 //#endregion

package/dist/components/files/files.d.mts

@@ -1,4 +1,5 @@
 import { ButtonProps } from "../button/button.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/files/files.d.ts
 type FileTag = "button" | "div" | "img" | "section" | "span";
@@ -6,8 +7,10 @@ type DataAttributes = Record<`data-${string}`, string | undefined>;
 type FileSlotProps<Tag extends FileTag> = useRender.ComponentProps<Tag> & DataAttributes;
 export type FilesPanelProps = FileSlotProps<"section">;
 export declare function FilesPanel(props: FilesPanelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type FilesViewportProps = FileSlotProps<"div">;
-export declare function FilesViewport(props: FilesViewportProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type FilesViewportProps = ScrollAreaProps & DataAttributes;
+/** The files' scroller, a ScrollArea: `ref`, `className`, `render`, `onScroll`
+ *  and the native props are the scrolling element's. */
+export declare function FilesViewport({ className, ...props }: FilesViewportProps): import("react").JSX.Element;
 export type FilesListProps = FileSlotProps<"div">;
 export declare function FilesList(props: FilesListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type FileRowProps = FileSlotProps<"div">;

package/dist/components/files/files.mjs

@@ -1,4 +1,5 @@
 import { Button } from "../button/button.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { files } from "./files.recipe.mjs";
 import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
@@ -19,8 +20,16 @@ function useFileSlot(slotName, dataSlot, defaultTagName, props) {
 function FilesPanel(props) {
 	return useFileSlot("panel", "files-panel", "section", props);
 }
-function FilesViewport(props) {
-	return useFileSlot("viewport", "files-viewport", "div", props);
+/** The files' scroller, a ScrollArea: `ref`, `className`, `render`, `onScroll`
+*  and the native props are the scrolling element's. */
+function FilesViewport({ className, ...props }) {
+	const { viewport } = files();
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		"data-slot": "files-viewport",
+		overscroll: "contain",
+		...props,
+		className: viewport({ className })
+	});
 }
 function FilesList(props) {
 	return useFileSlot("list", "files-list", "div", props);

package/dist/components/files/files.recipe.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/files/files.recipe.ts
 const files = tv({ slots: {
 	panel: ["flex min-h-0 flex-1 flex-col", "bg-layer-canvas text-foreground"],
-	viewport: ["min-h-0 flex-1 overflow-y-auto"],
+	viewport: ["min-h-0 flex-1"],
 	list: ["flex flex-col gap-2 px-(--surface-inset) py-3", "max-md:px-4"],
 	row: [
 		"group/file-row flex w-full min-w-0 gap-3 px-3",

package/dist/components/filter-chip/filter-chip.mjs

@@ -17,7 +17,8 @@ const filterChip = tv({ slots: {
 	remove: [
 		...chipRemoveBase,
 		"relative size-6",
-		"after:absolute after:content-[''] pointer-coarse:after:-inset-2.5"
+		"after:absolute after:content-['']",
+		"pointer-coarse:after:-inset-y-2.5 pointer-coarse:after:-left-1.5 pointer-coarse:after:-right-3.5"
 	]
 } });
 /**

package/dist/components/markdown/markdown-parts.d.mts

@@ -1,8 +1,8 @@
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { CheckboxProps } from "../checkbox/checkbox.mjs";
 import "../checkbox/index.mjs";
 import { InlineCodeProps } from "../inline-code/inline-code.mjs";
 import "../inline-code/index.mjs";
-import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/markdown/markdown-parts.d.ts
 declare const HEADING_TAGS: {

package/dist/components/markdown/markdown-parts.mjs

@@ -1,5 +1,5 @@
-import { Checkbox } from "../checkbox/checkbox.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { Checkbox } from "../checkbox/checkbox.mjs";
 import { InlineCode } from "../inline-code/inline-code.mjs";
 import { markdown } from "./markdown.recipe.mjs";
 import { jsx } from "react/jsx-runtime";

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

@@ -24,7 +24,8 @@ const messageActionCardContent = tv({ slots: {
 		"@max-sm/action-card:min-h-0 @max-sm/action-card:py-0"
 	],
 	scopeList: ["mt-0 stack-y-1.5"],
-	scopeListViewport: ["overflow-y-auto overscroll-contain", "max-h-[136px] stack-y-1.5 pr-1"],
+	scopeListViewport: ["max-h-[136px]"],
+	scopeListViewportContent: ["stack-y-1.5 pr-1"],
 	scopeListLabel: ["text-footnote font-medium text-foreground-hint"],
 	scope: ["min-w-0 border p-1.5", "rounded-control border-line-hairline bg-layer-card px-2.5 py-2"],
 	scopeName: ["break-all font-mono", "text-mono-meta font-normal text-foreground"],

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

@@ -1,3 +1,4 @@
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { BadgeProps } from "../badge/badge.mjs";
 import "../badge/index.mjs";
 import { ComponentProps, ReactNode } from "react";
@@ -38,10 +39,11 @@ export declare function MessageActionCardPropertyValue({ className, render, ...p
 export declare function MessageActionCardScopeList({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardScopeListLabel({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
- * Scrolls a long permission list. It is a Tab stop only while it overflows, so
- * keyboard users can scroll it; a short list adds no empty stop.
+ * Scrolls a long permission list: a ScrollArea, so it is a Tab stop only while
+ * it overflows (keyboard users can scroll it; a short list adds no empty stop),
+ * and its overlay scrollbar takes no room from the rows.
  */
-export declare function MessageActionCardScopeListViewport({ className, render, ...props }: MessageActionCardScopeListViewportProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function MessageActionCardScopeListViewport({ className, ...props }: MessageActionCardScopeListViewportProps): import("react").JSX.Element;
 export declare function MessageActionCardScope({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardScopeName({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageActionCardScopeDescription({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
@@ -67,7 +69,7 @@ export type MessageActionCardCollapseTriggerProps = Omit<ComponentProps<typeof C
   className?: string;
   "aria-label": string;
 };
-export type MessageActionCardScopeListViewportProps = useRender.ComponentProps<"div"> & {
+export type MessageActionCardScopeListViewportProps = Omit<ScrollAreaProps, "contentClassName" | "aria-label"> & {
   /** Names the scroll area for screen readers, e.g. "Permissions". */
   "aria-label": string;
 };

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

@@ -1,10 +1,10 @@
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { Badge } from "../badge/badge.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 { useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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";
@@ -182,31 +182,18 @@ function MessageActionCardScopeListLabel({ className, render, ...props }) {
 	});
 }
 /**
-* Scrolls a long permission list. It is a Tab stop only while it overflows, so
-* keyboard users can scroll it; a short list adds no empty stop.
+* Scrolls a long permission list: a ScrollArea, so it is a Tab stop only while
+* it overflows (keyboard users can scroll it; a short list adds no empty stop),
+* and its overlay scrollbar takes no room from the rows.
 */
-function MessageActionCardScopeListViewport({ className, render, ...props }) {
-	const { scopeListViewport } = messageActionCardContent();
-	const [element, setElement] = useState(null);
-	const [overflows, setOverflows] = useState(false);
-	useEffect(() => {
-		if (element === null) return;
-		const measure = () => setOverflows(element.scrollHeight > element.clientHeight);
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(element);
-		for (const child of element.children) observer.observe(child);
-		return () => observer.disconnect();
-	}, [element]);
-	return useRender({
-		defaultTagName: "div",
-		render,
-		ref: setElement,
-		props: mergeProps({
-			className: scopeListViewport({ className }),
-			tabIndex: overflows ? 0 : void 0
-		}, props),
-		state: { slot: "message-action-card-scope-list-viewport" }
+function MessageActionCardScopeListViewport({ className, ...props }) {
+	const { scopeListViewport, scopeListViewportContent } = messageActionCardContent();
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		"data-slot": "message-action-card-scope-list-viewport",
+		overscroll: "contain",
+		...props,
+		className: scopeListViewport({ className }),
+		contentClassName: scopeListViewportContent()
 	});
 }
 function MessageActionCardScope({ className, render, ...props }) {
@@ -262,7 +249,7 @@ function MessageActionCardNotice({ className, render, icon, children, ...props }
 		render,
 		props: mergeProps({
 			className: notice({ className }),
-			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [icon ?? /* @__PURE__ */ jsx(Info, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children })] })
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [icon ?? /* @__PURE__ */ jsx(Info, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", { children })] })
 		}, props),
 		state: { slot: "message-action-card-notice" }
 	});

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

@@ -1,6 +1,6 @@
-import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
-import { PanelScrollViewport } from "../panel/panel.mjs";
+import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { PanelNativeScrollViewport } from "../panel/panel.mjs";
 import { messageList } from "./message-list.recipe.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -15,7 +15,7 @@ function MessageList({ children, className, render, rootClassName, style, ...pro
 	if (isMobile) return /* @__PURE__ */ jsx("div", {
 		"data-slot": "message-list",
 		className: root({ className: rootClassName }),
-		children: /* @__PURE__ */ jsx(PanelScrollViewport, {
+		children: /* @__PURE__ */ jsx(PanelNativeScrollViewport, {
 			...props,
 			render,
 			"data-slot": "message-list-viewport",

package/dist/components/mobile-nav/mobile-nav-server.d.mts

@@ -1,3 +1,4 @@
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { MobileNavItemProps } from "./mobile-nav.mjs";
 import { PopoverContentProps, PopoverProps } from "../popover/popover.mjs";
 import { ComponentPropsWithRef } from "react";
@@ -27,8 +28,9 @@ export type MobileNavServerPopoverContentProps = PopoverContentProps;
  * destinations and the footer after it stay in view.
  */
 export declare function MobileNavServerPopoverContent({ anchor, side, align, sideOffset, collisionPadding, className, ...props }: MobileNavServerPopoverContentProps): import("react").JSX.Element;
-export type MobileNavServerPopoverListProps = ComponentPropsWithRef<"div">;
-/** The server list: takes the room left in the popover and scrolls inside it. */
+export type MobileNavServerPopoverListProps = ScrollAreaProps;
+/** The server list: takes the room left in the popover and scrolls inside it,
+ *  a ScrollArea (a column with no gap, so its gutters move nothing). */
 export declare function MobileNavServerPopoverList({ className, ...props }: MobileNavServerPopoverListProps): import("react").JSX.Element;
 export type MobileNavServerPopoverGroupProps = ComponentPropsWithRef<"div">;
 /** Rows that always stay in view, such as the footer actions. */