@botiverse/raft-ui 0.71.0 → 0.73.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+## [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
+
+- **ArtifactIcon** is Lucide's `file-code`, a page with a folded corner and `< >`: the same icon as an HTML Artifact's link chip in messages, so the rail and the chips use one icon. **FollowArtifactIcon** and **UnfollowArtifactIcon** draw that page with the plus or minus at the bottom-right, at least 1.6 units clear of the page. ([#1052](https://github.com/botiverse/raft-design/pull/1052))
+  - Why: xxchan found the old page-with-lines icon plain and hard to tell apart, and after several rounds of proposals chose the chip's icon (#proj-workspace:#222).
+  - Affects: every place that shows these three icons (the Artifacts rail item, Artifact menus, the mobile server popover). Names, props and the small heavier minus are unchanged.
+  - Docs: https://raft-design.botiverse.build/components/icons/
+
+### Design System
+
+- **A toast holds its page height while it shows**, so content above it moves up only; the keyboard isn't held. ([#1051](https://github.com/botiverse/raft-design/pull/1051))
+  - Docs: https://raft-design.botiverse.build/components/toast/
+
 ## [0.71.0](https://github.com/botiverse/raft-design/compare/v0.70.0...v0.71.0) (2026-11-06)
 
 ### Design System

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 overflow-y-auto *: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/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/icons/action-icons.d.mts

@@ -17,12 +17,16 @@ export declare function LeavePrivateChannelIcon(props: ActionIconProps): import(
 export declare function JoinJointChannelIcon(props: ActionIconProps): import("react").JSX.Element;
 /** Leave a joint channel: Lucide's git-branch, with a minus. */
 export declare function LeaveJointChannelIcon(props: ActionIconProps): import("react").JSX.Element;
-/** Follow an Artifact: a plus inside ArtifactIcon's page, where its two lines of text were. */
+/**
+ * Follow an Artifact: ArtifactIcon's page with a plus in the bottom-right corner. The page's
+ * right and bottom edges stop 1.6 short of the plus, and the `< >` sits 1.5 higher so its
+ * point clears it by as much.
+ */
 export declare function FollowArtifactIcon(props: ActionIconProps): import("react").JSX.Element;
 /**
- * Unfollow an Artifact: a minus inside ArtifactIcon's page. Below 18px the minus is drawn
- * heavier and a little longer (stroke 3, 6 long, on whole pixels at 16px), so it reads as a
- * mark rather than one more line of the page's text; at 20 and 24 it is the plain minus.
+ * Unfollow an Artifact: the same cut page, with a minus. Below 18px the minus is drawn
+ * heavier (stroke 3, on whole pixels at 16px), so it reads as a mark beside the page's cut
+ * edges rather than one more piece of the outline; at 20 and 24 it is the plain minus.
  */
 export declare function UnfollowArtifactIcon(props: ActionIconProps): import("react").JSX.Element;
 /** Add a comment: CommentIcon at 24, its bubble cut short of a plus in the bottom-right corner. */

package/dist/components/icons/action-icons.mjs

@@ -242,7 +242,11 @@ function LeaveJointChannelIcon(props) {
 		]
 	});
 }
-/** Follow an Artifact: a plus inside ArtifactIcon's page, where its two lines of text were. */
+/**
+* Follow an Artifact: ArtifactIcon's page with a plus in the bottom-right corner. The page's
+* right and bottom edges stop 1.6 short of the plus, and the `< >` sits 1.5 higher so its
+* point clears it by as much.
+*/
 function FollowArtifactIcon(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
@@ -258,17 +262,19 @@ function FollowArtifactIcon(props) {
 		strokeWidth: 2,
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("path", { d: "M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M9 6h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M12 13.5v5" }),
-			/* @__PURE__ */ jsx("path", { d: "M9.5 16h5" })
+			/* @__PURE__ */ jsx("path", { d: "M20 12.5V8a2.4 2.4 0 0 0-.706-1.704l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8" }),
+			/* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+			/* @__PURE__ */ jsx("path", { d: "M10 11 8 13.5l2 2.5" }),
+			/* @__PURE__ */ jsx("path", { d: "m14 11 2 2.5-2 2.5" }),
+			/* @__PURE__ */ jsx("path", { d: "M19 16v6" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 19h6" })
 		]
 	});
 }
 /**
-* Unfollow an Artifact: a minus inside ArtifactIcon's page. Below 18px the minus is drawn
-* heavier and a little longer (stroke 3, 6 long, on whole pixels at 16px), so it reads as a
-* mark rather than one more line of the page's text; at 20 and 24 it is the plain minus.
+* Unfollow an Artifact: the same cut page, with a minus. Below 18px the minus is drawn
+* heavier (stroke 3, on whole pixels at 16px), so it reads as a mark beside the page's cut
+* edges rather than one more piece of the outline; at 20 and 24 it is the plain minus.
 */
 function UnfollowArtifactIcon(props) {
 	return /* @__PURE__ */ jsxs("svg", {
@@ -286,17 +292,19 @@ function UnfollowArtifactIcon(props) {
 		strokeWidth: 2,
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("path", { d: "M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M9 6h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M20 12.5V8a2.4 2.4 0 0 0-.706-1.704l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8" }),
+			/* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+			/* @__PURE__ */ jsx("path", { d: "M10 11 8 13.5l2 2.5" }),
+			/* @__PURE__ */ jsx("path", { d: "m14 11 2 2.5-2 2.5" }),
 			/* @__PURE__ */ jsx("path", {
 				"data-icon-mark": "default",
-				d: "M9.5 16h5"
+				d: "M16 19h6"
 			}),
 			/* @__PURE__ */ jsx("path", {
 				"data-icon-mark": "small",
 				display: "none",
 				strokeWidth: 3,
-				d: "M9 16.5h6"
+				d: "M17.5 19.5h4"
 			})
 		]
 	});

package/dist/components/icons/object-icons.d.mts

@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 //#region src/components/icons/object-icons.d.ts
 export type ObjectIconProps = SVGProps<SVGSVGElement>;
-/** An Artifact, a page someone made: a page with no dog-ear, a header block and two lines of text. */
+/**
+ * An Artifact: Lucide's file-code, drawn here unchanged, so the icon for Artifacts is the
+ * one an HTML Artifact's chip shows in a message (a page with a folded corner and a `< >`).
+ */
 export declare function ArtifactIcon(props: ObjectIconProps): import("react").JSX.Element;
 //#endregion

package/dist/components/icons/object-icons.mjs

@@ -1,6 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icons/object-icons.tsx
-/** An Artifact, a page someone made: a page with no dog-ear, a header block and two lines of text. */
+/**
+* An Artifact: Lucide's file-code, drawn here unchanged, so the icon for Artifacts is the
+* one an HTML Artifact's chip shows in a message (a page with a folded corner and a `< >`).
+*/
 function ArtifactIcon(props) {
 	return /* @__PURE__ */ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
@@ -16,10 +19,10 @@ function ArtifactIcon(props) {
 		strokeWidth: 2,
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("path", { d: "M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M9 6h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M8 14h8" }),
-			/* @__PURE__ */ jsx("path", { d: "M8 18h4" })
+			/* @__PURE__ */ jsx("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+			/* @__PURE__ */ jsx("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+			/* @__PURE__ */ jsx("path", { d: "M10 12.5 8 15l2 2.5" }),
+			/* @__PURE__ */ jsx("path", { d: "m14 12.5 2 2.5-2 2.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;
 };