@botiverse/raft-ui 0.80.0 → 0.82.0

package/CHANGELOG.md

@@ -1,3 +1,62 @@
+## [0.82.0](https://github.com/botiverse/raft-design/compare/v0.81.0...v0.82.0) (2026-11-09)
+
+### Changed
+
+- **OtterIndicator uses Ottie's approved four poses**: relaxed side-lying, quiet typing, a puzzled head tilt with a question mark, and one celebratory hop. The SVG props and ref remain supported. It pauses outside the viewport and in hidden documents; reduced motion shows a still. The HTML art layer sizes from the SVG box so Safari/WebKit scales it correctly at 40px and larger.
+  - Why: the previous unrelated otter drawing and sleeping wait pose did not match Ottie or the recent-activity card (Artea's approved B study).
+  - Affects: consumers of OtterIndicator, including Raft's recent-activity card. Artwork loads as separate transparent WebP files only for a displayed status; there is no frame timer or per-frame React update.
+  - Docs: https://raft-design.botiverse.build/components/steps/#ottie-illustration
+
+### Breaking
+
+- **`ComposerDropOverlayPrompt` takes its text as `children`, which is required**: the icon cluster stays, and the text under it is what you pass. It no longer falls back to the built-in "Drop files to attach", and children no longer replace the icons.
+  - Why: the component library carried product copy in English that no app could translate (Remy's helper-text sweep, #proj-workspace:#250).
+  - Affects: `<ComposerDropOverlayPrompt />` no longer type-checks; pass the text, e.g. `<ComposerDropOverlayPrompt>{t("dropToAttach")}</ComposerDropOverlayPrompt>`. A caller that passed children for a label without icons uses `ComposerDropOverlayLabel` instead.
+  - Docs: https://raft-design.botiverse.build/components/composer/
+
+### Added
+
+- **Data parts beside the explanation parts**: three additive parts, so data no longer has to sit in a slot meant for a sentence that explains. Nothing existing changes: no prop, part or style is renamed or restyled.
+  - `ListRowSubtitle`: data about a row's subject under its title (an agent's description, a channel's topic, an app's byline), in the title's ink at 400 and `text-footnote`. It follows the row's tone and disabled state with the title. `ListRowDescription` stays the place for a setting's consequence.
+  - ChoiceList items take `meta`: lines of data people compare across rows (a quota, free disk, a count, a status), in `text-footnote` in `foreground-muted` as the description is, after the `description` lines. A row still draws at most two lines in all, the description's first; a meta line has a description line's height, so moving a line from one to the other doesn't move the rows. Radios and checkboxes are described by the description lines, then the meta lines.
+  - `MessageActionCardHeaderMeta`: the time on a resolved card, in Space Mono at the hint tier: a line of its own under the title, or the end of the `MessageActionCardHeaderDescription` line it is placed in ("Approved by Martin · 10:51").
+  - Why: grey text is to mean one of two things, a sentence written to explain or a component's own notes on its data (times, counts, IDs), and data people read as the content uses the body ink. Apps had put data in the explanation parts (`ListRowDescription`, a ChoiceList item's `description`, `MessageActionCardHeaderDescription`) because there was nowhere else for it; these parts give it a place before those parts are kept for explanations (Kirby, Remy's helper-text plan).
+  - Affects: nothing until an app uses them. Data moved into `ListRowSubtitle` gets darker and a size smaller than in `ListRowDescription`; data moved into a ChoiceList item's `meta` looks as it did in `description`; a time moved into `MessageActionCardHeaderMeta` is set in Space Mono at the hint tier.
+  - Docs: https://raft-design.botiverse.build/components/list-row/#data-and-explanation, https://raft-design.botiverse.build/components/choice-list/#content, https://raft-design.botiverse.build/components/message-action-card/#anatomy
+
+### Fixed
+
+- **A Resizable seam's handle no longer covers the scrollbar beside it**: the 12px handle (24px under a coarse pointer) lies over the start of the panel after the boundary instead of straddling it; its hover and focus line stays on the seam.
+  - Why: a panel's scrollbar runs along its end edge, the seam's other side, and the centered handle covered its last 6px, where the thumb is, so dragging the thumb resized the panel instead (Raft app's Activity list, #proj-raft-ui:21bae128).
+  - Affects: the handle now takes the pointer over the first 12px of the next panel (24px by touch) instead of 6px on each side. Nothing else moves.
+  - Docs: https://raft-design.botiverse.build/components/resizable/#behavior
+
+- **ScrollArea measures in the frame after mounting, not while React commits**: where a `ResizeObserver` watches the sizes, the first read of the container's `clientHeight` and `scrollHeight` waits for the next animation frame, as every later one already did. Without a `ResizeObserver` it still measures at once.
+  - Why: the read in the commit forced a layout of the whole page each time an area mounted. Entering a server in the Raft app mounts the sidebar, the message list and the panels at once, and those reads took about 120ms of layout (InNOut's measurement, #proj-frontend:#40).
+  - Affects: the frame runs before the paint that first shows the area, so nothing on screen changes. Until it runs, an overflowing area has no thumb length and no overflow classes, and `onEdgeChange` is first called in it: code that reads them in a layout effect right after mounting finds them unset, and can call `actionsRef.measure` for a measure at once.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+
+## [0.81.0](https://github.com/botiverse/raft-design/compare/v0.80.0...v0.81.0) (2026-11-09)
+
+### Fixed
+
+- **ScrollArea's scrollbars paint over everything inside the area**: the gutters layer is at the highest `z-index`, and the area's root is a stacking context of its own (`isolation: isolate`), so a sticky heading or any other positioned content inside the area, whatever its `z-index`, no longer covers the thumb, with sticky and absolute gutters alike, and the scrollbars still never paint over anything outside the area.
+  - Why: in the Raft app's activity list each day's sticky heading (an opaque background at z-15) painted over the thumb as it slid by, cutting it into pieces, while the gutters were at z-1 (Artea, #proj-raft-ui:21bae128). Starting the scrollbar below the stuck heading (`railInset`) fixed only the heading at the top, not the ones scrolling past.
+  - Affects: content inside a ScrollArea can no longer cover anything outside it, whatever its `z-index`: a popup, a menu or a dragged copy rendered in place inside an area stacks with the area. Render those through a portal (raft-ui's overlays do, and now `DragLift` by default, below). The scrollbars' strip at the edge now takes the pointer over positioned content there too, as it already did over the rest. How the scrollbars look is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/scroll-area/
+- **`DragLift` renders the copy in `document.body` by default**: the lifted copy goes through a portal to the body unless `container` names another element, or `null` keeps it in place; the portal keeps the theme scope it was rendered in. `TaskDragOverlay` follows, as `SortableTabsList` and `SortableComposerAttachments` already did.
+  - Why: in place inside a ScrollArea, now a stacking context, the copy couldn't rise above anything outside the area. On the Raft app's Tasks board a dragged card was cut off by the left rail and covered by the top bar (`TaskDragOverlay` with no `container`).
+  - Affects: a `DragLift` or `TaskDragOverlay` without `container` now renders its copy in the body: CSS that styles the copy through an ancestor of the item (`.board [data-slot=drag-lift]`) no longer reaches it, and neither do CSS variables set on that ancestor; style the copy through its own children. The writing direction (`dir`) is carried over, below. Pass `container={null}` for the old in-place copy. How the copy looks is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/drag/#anatomy
+- **In a right-to-left layout the dragged copy keeps its direction**: `DragLift`'s portal carries the item's computed writing direction (`dir`) to the body, as it carries the theme scope.
+  - Why: in the body, the copy took its direction from `<html>`, so an item dragged out of a right-to-left container came out left-to-right (Jasper's review of #1094).
+  - Affects: a copy of an item in a `dir="rtl"` container now lays out right-to-left. Nothing else around the item reaches the copy (font, colour, a container's custom properties); the docs now say so.
+  - Docs: https://raft-design.botiverse.build/components/drag/#anatomy
+- **ChoiceList's row actions keep clear of the scrollbar**: in a list that scrolls (search on, or `fill`), a row's action sits 12px from the end instead of 4px, and rows with an action keep their text 52px from the end instead of 44px.
+  - Why: the scrollbar's 16px strip at the end of a ScrollArea now paints over and takes the pointer from everything in the area; the last 8px of each 32px action lay under it, so a click there paged the list instead.
+  - Affects: in a scrolling ChoiceList, each action moves 8px toward the start, and a long name or description cuts off 8px sooner. A list that doesn't scroll is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/choice-list/#behavior
+
 ## [0.80.0](https://github.com/botiverse/raft-design/compare/v0.79.0...v0.80.0) (2026-11-09)
 
 ### Changed

package/dist/components/choice-list/choice-list.d.mts

@@ -11,6 +11,14 @@ export type ChoiceListItem = {
    * (null, false or "") is not drawn. Colour inside a line is the caller's.
    */
   description?: ReactNode | readonly ReactNode[];
+  /**
+   * Lines of data under the description: what people compare across rows,
+   * such as a quota, free disk or a count ("120 GB free · 3 agents"), drawn
+   * as the description is (muted), after it. The row still draws at most two
+   * lines under the name, the description's first. An empty line is not
+   * drawn. Colour inside a line is the caller's.
+   */
+  meta?: ReactNode | readonly ReactNode[];
   /** Drawn before the radio's or checkbox's row text: an avatar, an icon. */
   media?: ReactNode;
   /**

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

@@ -18,6 +18,13 @@ function isDrawn(line) {
 function descriptionLines(description) {
 	return (Array.isArray(description) ? description : [description]).filter(isDrawn);
 }
+function rowLines(item) {
+	const description = descriptionLines(item.description).slice(0, MAX_DESCRIPTION_LINES);
+	return {
+		description,
+		meta: descriptionLines(item.meta).slice(0, MAX_DESCRIPTION_LINES - description.length)
+	};
+}
 function CutLine({ id, slot, className, children }) {
 	const ref = useOverflowTitle();
 	return /* @__PURE__ */ jsx("span", {
@@ -133,6 +140,7 @@ function ChoiceList(props) {
 		if (process.env.NODE_ENV === "production") return;
 		if (!ariaLabel && !ariaLabelledBy) console.warn("raft-ui: a ChoiceList has neither aria-label nor aria-labelledby.");
 		if (items.some((item) => descriptionLines(item.description).length > MAX_DESCRIPTION_LINES)) console.warn(`raft-ui: a ChoiceList item has more than ${MAX_DESCRIPTION_LINES} description lines; only the first ${MAX_DESCRIPTION_LINES} are drawn.`);
+		else if (items.some((item) => descriptionLines(item.description).length + descriptionLines(item.meta).length > MAX_DESCRIPTION_LINES)) console.warn(`raft-ui: a ChoiceList item has more than ${MAX_DESCRIPTION_LINES} description and meta lines together; only the first ${MAX_DESCRIPTION_LINES} are drawn, the description's first.`);
 	}, [
 		ariaLabel,
 		ariaLabelledBy,
@@ -166,13 +174,14 @@ function ChoiceList(props) {
 	};
 	const rowElement = (item) => {
 		const id = `${baseId}-${items.indexOf(item)}`;
-		const lines = descriptionLines(item.description).slice(0, MAX_DESCRIPTION_LINES);
+		const { description: lines, meta } = rowLines(item);
 		const rowDisabled = disabled || item.disabled === true;
+		const describedBy = [lines.length > 0 ? `${id}-description` : null, meta.length > 0 ? `${id}-meta` : null].filter(Boolean);
 		const markProps = {
 			value: item.value,
 			disabled: item.disabled,
 			"aria-labelledby": `${id}-label`,
-			"aria-describedby": lines.length > 0 ? `${id}-description` : void 0
+			"aria-describedby": describedBy.length > 0 ? describedBy.join(" ") : void 0
 		};
 		return /* @__PURE__ */ jsxs("label", {
 			"data-slot": "choice-list-item",
@@ -188,20 +197,32 @@ function ChoiceList(props) {
 				/* @__PURE__ */ jsxs("span", {
 					"data-slot": "choice-list-body",
 					className: slots.body(),
-					children: [/* @__PURE__ */ jsx(CutLine, {
-						id: `${id}-label`,
-						slot: "choice-list-label",
-						className: slots.label(),
-						children: item.label
-					}), lines.length > 0 ? /* @__PURE__ */ jsx("span", {
-						id: `${id}-description`,
-						className: "contents",
-						children: lines.map((line, index) => /* @__PURE__ */ jsx(CutLine, {
-							slot: "choice-list-description",
-							className: slots.description(),
-							children: line
-						}, index))
-					}) : null]
+					children: [
+						/* @__PURE__ */ jsx(CutLine, {
+							id: `${id}-label`,
+							slot: "choice-list-label",
+							className: slots.label(),
+							children: item.label
+						}),
+						lines.length > 0 ? /* @__PURE__ */ jsx("span", {
+							id: `${id}-description`,
+							className: "contents",
+							children: lines.map((line, index) => /* @__PURE__ */ jsx(CutLine, {
+								slot: "choice-list-description",
+								className: slots.description(),
+								children: line
+							}, index))
+						}) : null,
+						meta.length > 0 ? /* @__PURE__ */ jsx("span", {
+							id: `${id}-meta`,
+							className: "contents",
+							children: meta.map((line, index) => /* @__PURE__ */ jsx(CutLine, {
+								slot: "choice-list-meta",
+								className: slots.meta(),
+								children: line
+							}, index))
+						}) : null
+					]
 				})
 			]
 		}, item.value);

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

@@ -22,6 +22,7 @@ const choiceList = tv({
 		body: ["grid min-w-0 flex-1 gap-0.5"],
 		label: ["truncate font-semibold text-foreground", "in-data-disabled:text-foreground-disabled"],
 		description: ["block truncate font-sans text-footnote font-normal text-foreground-muted", "in-data-disabled:text-foreground-disabled"],
+		meta: ["block truncate font-sans text-footnote font-normal text-foreground-muted", "in-data-disabled:text-foreground-disabled"],
 		action: [
 			"relative z-10 col-start-2 flex h-lh items-center self-start pr-1",
 			"mt-option-inset pointer-coarse:mt-[calc((--spacing(11)-1lh)/2)]",
@@ -31,14 +32,27 @@ const choiceList = tv({
 		footer: ["shrink-0 border-t border-line-seam p-1"]
 	},
 	variants: {
-		scroll: { true: { scroller: ["max-h-72"] } },
+		scroll: { true: {
+			scroller: ["max-h-72"],
+			action: ["pr-3"]
+		} },
 		fill: { true: {
 			root: ["flex min-h-0 flex-1 flex-col"],
 			frame: ["min-h-0 flex-1"],
-			scroller: ["flex-1"]
+			scroller: ["flex-1"],
+			action: ["pr-3"]
 		} },
 		hasAction: { true: { item: ["pr-11"] } }
-	}
+	},
+	compoundVariants: [{
+		scroll: true,
+		hasAction: true,
+		class: { item: ["pr-13"] }
+	}, {
+		fill: true,
+		hasAction: true,
+		class: { item: ["pr-13"] }
+	}]
 });
 //#endregion
 export { choiceList };

package/dist/components/composer/composer-drop-overlay.d.mts

@@ -1,9 +1,14 @@
+import * as React from "react";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/composer/composer-drop-overlay.d.ts
 export type ComposerDropOverlayProps = useRender.ComponentProps<"div">;
-export declare function ComposerDropOverlay({ className, render, ...props }: ComposerDropOverlayProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ComposerDropOverlay({ className, render, ...props }: ComposerDropOverlayProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export type ComposerDropOverlayLabelProps = useRender.ComponentProps<"span">;
-export declare function ComposerDropOverlayLabel({ className, render, ...props }: ComposerDropOverlayLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type ComposerDropOverlayPromptProps = ComposerDropOverlayLabelProps;
-export declare function ComposerDropOverlayPrompt({ children, ...props }: ComposerDropOverlayPromptProps): import("react").JSX.Element;
+export declare function ComposerDropOverlayLabel({ className, render, ...props }: ComposerDropOverlayLabelProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export type ComposerDropOverlayPromptProps = Omit<ComposerDropOverlayLabelProps, "children"> & {
+  /** What the prompt says, such as "Drop files to attach": the caller's copy, in its locale. */
+  children: React.ReactNode;
+};
+/** The label with the files-and-upload icon cluster above the caller's text. */
+export declare function ComposerDropOverlayPrompt({ children, ...props }: ComposerDropOverlayPromptProps): React.JSX.Element;
 //#endregion

package/dist/components/composer/composer-drop-overlay.mjs

@@ -28,12 +28,9 @@ function ComposerDropOverlayLabel({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
+/** The label with the files-and-upload icon cluster above the caller's text. */
 function ComposerDropOverlayPrompt({ children, ...props }) {
 	const { dropOverlayIcon, dropOverlayIconCluster } = composerDropOverlay();
-	if (children) return /* @__PURE__ */ jsx(ComposerDropOverlayLabel, {
-		...props,
-		children
-	});
 	return /* @__PURE__ */ jsxs(ComposerDropOverlayLabel, {
 		...props,
 		children: [/* @__PURE__ */ jsxs("span", {
@@ -53,7 +50,7 @@ function ComposerDropOverlayPrompt({ children, ...props }) {
 					children: /* @__PURE__ */ jsx(Image, { className: "text-foreground-muted" })
 				})
 			]
-		}), /* @__PURE__ */ jsx("span", { children: "Drop files to attach" })]
+		}), /* @__PURE__ */ jsx("span", { children })]
 	});
 }
 //#endregion

package/dist/components/composer/sortable-composer-attachments.mjs

@@ -1,6 +1,6 @@
 import { ComposerAttachmentsScrollArea } from "./composer-attachments-scroll-area.mjs";
 import { createDragAnnouncements, dragInstructions } from "../drag/drag-announcements.mjs";
-import { DragLift, useDragSiblingTransition, useLiftContainer } from "../drag/drag-lift.mjs";
+import { DragLift, useDragSiblingTransition } from "../drag/drag-lift.mjs";
 import { useDragSensors } from "../drag/drag-sensors.mjs";
 import { DropPlaceholder } from "../drag/drop-placeholder.mjs";
 import { Children, createContext, isValidElement, use, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -87,7 +87,6 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, messages,
 	const draftIdsRef = useRef([]);
 	const lastReorderPointerRef = useRef(null);
 	const sensors = useDragSensors();
-	const liftContainer = useLiftContainer(container);
 	const attachments = useMemo(() => attachmentsById(children), [children]);
 	const itemIds = useMemo(() => items.map(String), [items]);
 	const [announced] = useState(() => ({
@@ -186,7 +185,7 @@ function SortableComposerAttachmentsRoot({ items, onReorder, children, messages,
 			})
 		}), /* @__PURE__ */ jsx(DragLift, {
 			className: "rounded-control",
-			container: liftContainer,
+			container,
 			children: activeId && overlay ? overlay : null
 		})]
 	});

package/dist/components/drag/drag-lift.d.mts

@@ -50,8 +50,8 @@ export declare function keepGrabInside(proxyWidth: number, inset?: number): Modi
 export declare function cancelDrag(win?: Window): void;
 /**
  * Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
- * lightbox 70) and an app's own top layers: the copy in the hand is always on
- * top. dnd-kit's own default.
+ * lightbox 70) and an app's own top layers, among the layers rendered in
+ * `document.body`, where the copy goes by default. dnd-kit's own default.
  */
 export declare const DRAG_LIFT_Z_INDEX = 999;
 export type DragLiftProps = {
@@ -74,10 +74,14 @@ export type DragLiftProps = {
    */
   autoScroll?: boolean;
   /**
-   * Render the copy in another element, such as `document.body` when an
-   * ancestor has a transform (a drawer, a dialog), which would offset a
-   * `position: fixed` copy. It keeps the theme scope it was rendered in
-   * (`light` / `dark`), as raft-ui's portals do. By default it renders in place.
+   * Where the copy renders: `document.body` by default, so no ancestor holds
+   * it in, neither a stacking context (a ScrollArea, an `isolate`) it couldn't
+   * rise out of nor a transform (a drawer, a dialog) that would offset a
+   * `position: fixed` copy. Another element renders it there, and `null` in
+   * place. It keeps the theme scope it was rendered in (`light` / `dark`), as
+   * raft-ui's portals do, and the item's writing direction (`dir`). Nothing
+   * else is inherited from where it was picked up (font, colour, custom
+   * properties a container sets): give the copy its own styles.
    */
   container?: Element | DocumentFragment | null;
   /** @default DRAG_LIFT_Z_INDEX (999) */

package/dist/components/drag/drag-lift.mjs

@@ -110,17 +110,16 @@ function cancelDrag(win = window) {
 }
 /**
 * Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
-* lightbox 70) and an app's own top layers: the copy in the hand is always on
-* top. dnd-kit's own default.
+* lightbox 70) and an app's own top layers, among the layers rendered in
+* `document.body`, where the copy goes by default. dnd-kit's own default.
 */
 const DRAG_LIFT_Z_INDEX = 999;
 const noSubscribe = () => () => {};
 const clientBody = () => document.body;
 const serverBody = () => null;
 /**
-* For a component whose copy goes to `document.body` unless it is told
-* otherwise: `undefined` is the body (once on the client, so hydration
-* matches), `null` is in place, and an element is that element.
+* Where the copy goes: `undefined` is the body (once on the client, so
+* hydration matches), `null` is in place, and an element is that element.
 */
 function useLiftContainer(container) {
 	const body = useSyncExternalStore(noSubscribe, clientBody, serverBody);
@@ -141,8 +140,10 @@ function useLiftContainer(container) {
 function DragLift({ children, className, style, modifiers, autoScroll = true, container, zIndex = 999 }) {
 	const { lift } = drag();
 	const { resolvedMode } = useTheme();
+	const target = useLiftContainer(container);
 	const reduced = useSyncExternalStore(subscribeReducedMotion, reducedMotion, () => false);
-	const { activatorEvent } = useDndContext();
+	const { activatorEvent, activeNode } = useDndContext();
+	const dir = useMemo(() => activeNode ? getComputedStyle(activeNode).direction : void 0, [activeNode]);
 	const liftStyle = useMemo(() => isKeyboardEvent(activatorEvent) ? {
 		translate: KEYBOARD_OFFSET,
 		...style
@@ -162,11 +163,12 @@ function DragLift({ children, className, style, modifiers, autoScroll = true, co
 			})
 		})
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DragSession, { autoScroll }), container ? createPortal(/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DragSession, { autoScroll }), target ? createPortal(/* @__PURE__ */ jsx("div", {
 		"data-slot": "drag-lift-portal",
 		className: cn("contents", resolvedMode),
+		dir,
 		children: overlay
-	}), container) : overlay] });
+	}), target) : overlay] });
 }
 /** Where the pointer is during a drag: auto-scroll and the refusal hint read it. */
 const pointer = {
@@ -273,4 +275,4 @@ function autoScrollAt(x, y) {
 	if (dy) window.scrollBy(0, dy);
 }
 //#endregion
-export { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DragLift, LIFT_CLASS, ORIGIN_OPACITY, autoScrollAt, cancelDrag, dragPointer, keepGrabInside, useDragSiblingTransition, useLiftContainer };
+export { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DragLift, LIFT_CLASS, ORIGIN_OPACITY, autoScrollAt, cancelDrag, dragPointer, keepGrabInside, useDragSiblingTransition };

package/dist/components/list-row/index.d.mts

@@ -1,2 +1,2 @@
-import { ListRow, ListRowBody, ListRowBodyProps, ListRowBottom, ListRowBottomProps, ListRowChevron, ListRowChevronProps, ListRowDescription, ListRowDescriptionProps, ListRowGroup, ListRowGroupProps, ListRowIcon, ListRowIconProps, ListRowMeta, ListRowMetaProps, ListRowProps, ListRowTitle, ListRowTitleProps, ListRowTop, ListRowTopProps, ListRowValue, ListRowValueProps } from "./list-row.mjs";
-export { ListRow, ListRowBody, type ListRowBodyProps, ListRowBottom, type ListRowBottomProps, ListRowChevron, type ListRowChevronProps, ListRowDescription, type ListRowDescriptionProps, ListRowGroup, type ListRowGroupProps, ListRowIcon, type ListRowIconProps, ListRowMeta, type ListRowMetaProps, type ListRowProps, ListRowTitle, type ListRowTitleProps, ListRowTop, type ListRowTopProps, ListRowValue, type ListRowValueProps };
+import { ListRow, ListRowBody, ListRowBodyProps, ListRowBottom, ListRowBottomProps, ListRowChevron, ListRowChevronProps, ListRowDescription, ListRowDescriptionProps, ListRowGroup, ListRowGroupProps, ListRowIcon, ListRowIconProps, ListRowMeta, ListRowMetaProps, ListRowProps, ListRowSubtitle, ListRowSubtitleProps, ListRowTitle, ListRowTitleProps, ListRowTop, ListRowTopProps, ListRowValue, ListRowValueProps } from "./list-row.mjs";
+export { ListRow, ListRowBody, type ListRowBodyProps, ListRowBottom, type ListRowBottomProps, ListRowChevron, type ListRowChevronProps, ListRowDescription, type ListRowDescriptionProps, ListRowGroup, type ListRowGroupProps, ListRowIcon, type ListRowIconProps, ListRowMeta, type ListRowMetaProps, type ListRowProps, ListRowSubtitle, type ListRowSubtitleProps, ListRowTitle, type ListRowTitleProps, ListRowTop, type ListRowTopProps, ListRowValue, type ListRowValueProps };

package/dist/components/list-row/list-row.d.mts

@@ -47,6 +47,15 @@ export declare function ListRowBottom({ className, render, ...props }: ListRowBo
 export type ListRowTitleProps = useRender.ComponentProps<"span">;
 /** 16/24 600 on one line; the row's tone sets its weight and ink. */
 export declare function ListRowTitle({ className, render, ...props }: ListRowTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ListRowSubtitleProps = useRender.ComponentProps<"span">;
+/**
+ * Data about the row's subject on the line under the title: an agent's or a
+ * channel's description, a channel's topic, a person's role, an app's byline.
+ * 400 in the row's ink, a size under the title, cut to one line. A setting's
+ * consequence goes in `ListRowDescription`; a time, a date or a gray count in
+ * `ListRowMeta`.
+ */
+export declare function ListRowSubtitle({ className, render, ...props }: ListRowSubtitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type ListRowDescriptionProps = useRender.ComponentProps<"span"> & {
   /** Let the text run onto more lines instead of truncating: a setting's
    *  consequence. */

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

@@ -109,6 +109,25 @@ function ListRowTitle({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
+/**
+* Data about the row's subject on the line under the title: an agent's or a
+* channel's description, a channel's topic, a person's role, an app's byline.
+* 400 in the row's ink, a size under the title, cut to one line. A setting's
+* consequence goes in `ListRowDescription`; a time, a date or a gray count in
+* `ListRowMeta`.
+*/
+function ListRowSubtitle({ className, render, ...props }) {
+	const { subtitle } = listRow();
+	const defaultProps = {
+		"data-slot": "list-row-subtitle",
+		className: subtitle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
 /** The preview (who spoke first: "Wug: …") or a setting's consequence, 14/20 ink-2. */
 function ListRowDescription({ className, render, wrap = false, ...props }) {
 	const { description } = listRow({ wrap });
@@ -164,4 +183,4 @@ function ListRowChevron({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { ListRow, ListRowBody, ListRowBottom, ListRowChevron, ListRowDescription, ListRowGroup, ListRowIcon, ListRowMeta, ListRowTitle, ListRowTop, ListRowValue };
+export { ListRow, ListRowBody, ListRowBottom, ListRowChevron, ListRowDescription, ListRowGroup, ListRowIcon, ListRowMeta, ListRowSubtitle, ListRowTitle, ListRowTop, ListRowValue };

package/dist/components/list-row/list-row.recipe.d.mts

@@ -36,6 +36,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
   body: string[];
   line: string[];
   title: string[];
+  subtitle: string[];
   description: string[];
   meta: string[];
   value: string[];
@@ -77,6 +78,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
   body: string[];
   line: string[];
   title: string[];
+  subtitle: string[];
   description: string[];
   meta: string[];
   value: string[];
@@ -118,6 +120,7 @@ export declare const listRow: import("tailwind-variants/lite").TVReturnType<{
   body: string[];
   line: string[];
   title: string[];
+  subtitle: string[];
   description: string[];
   meta: string[];
   value: string[];

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

@@ -25,6 +25,7 @@ const listRow = tv({
 			"text-body font-semibold",
 			"group-data-[tone=unread]/list-row:font-bold"
 		],
+		subtitle: ["min-w-0 flex-1 truncate", "text-footnote font-normal text-(--list-row-ink)"],
 		description: ["min-w-0 flex-1 truncate", "text-callout text-(--list-row-ink-2)"],
 		meta: ["min-w-0 truncate", "font-mono text-mono-meta font-normal tabular-nums text-(--list-row-ink-3)"],
 		value: ["max-w-[45%] shrink-0 truncate", "text-subhead text-(--list-row-ink-3)"],

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

@@ -1,2 +1,2 @@
-import { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardActionsNoteProps, MessageActionCardActionsProps, MessageActionCardCollapseTrigger, MessageActionCardCollapseTriggerProps, MessageActionCardCompletion, MessageActionCardCompletionProps, MessageActionCardContent, MessageActionCardContentProps, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderDescriptionProps, MessageActionCardHeaderIcon, MessageActionCardHeaderIconProps, MessageActionCardHeaderProps, MessageActionCardHeaderStatus, MessageActionCardHeaderStatusProps, MessageActionCardHeaderTitle, MessageActionCardHeaderTitleProps, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardHintLabelProps, MessageActionCardHintProps, MessageActionCardNotice, MessageActionCardNoticeProps, MessageActionCardProperties, MessageActionCardPropertiesProps, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyLabelProps, MessageActionCardPropertyProps, MessageActionCardPropertyValue, MessageActionCardPropertyValueProps, MessageActionCardProps, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeDescriptionProps, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListLabelProps, MessageActionCardScopeListProps, MessageActionCardScopeListViewport, MessageActionCardScopeListViewportProps, MessageActionCardScopeName, MessageActionCardScopeNameProps, MessageActionCardScopeProps, MessageActionCardStatus, MessageActionCardStatusProps } from "./message-action-card.mjs";
-export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, type MessageActionCardActionsNoteProps, type MessageActionCardActionsProps, MessageActionCardCollapseTrigger, type MessageActionCardCollapseTriggerProps, MessageActionCardCompletion, type MessageActionCardCompletionProps, MessageActionCardContent, type MessageActionCardContentProps, MessageActionCardHeader, MessageActionCardHeaderDescription, type MessageActionCardHeaderDescriptionProps, MessageActionCardHeaderIcon, type MessageActionCardHeaderIconProps, type MessageActionCardHeaderProps, MessageActionCardHeaderStatus, type MessageActionCardHeaderStatusProps, MessageActionCardHeaderTitle, type MessageActionCardHeaderTitleProps, MessageActionCardHint, MessageActionCardHintLabel, type MessageActionCardHintLabelProps, type MessageActionCardHintProps, MessageActionCardNotice, type MessageActionCardNoticeProps, MessageActionCardProperties, type MessageActionCardPropertiesProps, MessageActionCardProperty, MessageActionCardPropertyLabel, type MessageActionCardPropertyLabelProps, type MessageActionCardPropertyProps, MessageActionCardPropertyValue, type MessageActionCardPropertyValueProps, type MessageActionCardProps, MessageActionCardScope, MessageActionCardScopeDescription, type MessageActionCardScopeDescriptionProps, MessageActionCardScopeList, MessageActionCardScopeListLabel, type MessageActionCardScopeListLabelProps, type MessageActionCardScopeListProps, MessageActionCardScopeListViewport, type MessageActionCardScopeListViewportProps, MessageActionCardScopeName, type MessageActionCardScopeNameProps, type MessageActionCardScopeProps, MessageActionCardStatus, type MessageActionCardStatusProps };
+import { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardActionsNoteProps, MessageActionCardActionsProps, MessageActionCardCollapseTrigger, MessageActionCardCollapseTriggerProps, MessageActionCardCompletion, MessageActionCardCompletionProps, MessageActionCardContent, MessageActionCardContentProps, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderDescriptionProps, MessageActionCardHeaderIcon, MessageActionCardHeaderIconProps, MessageActionCardHeaderMeta, MessageActionCardHeaderMetaProps, MessageActionCardHeaderProps, MessageActionCardHeaderStatus, MessageActionCardHeaderStatusProps, MessageActionCardHeaderTitle, MessageActionCardHeaderTitleProps, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardHintLabelProps, MessageActionCardHintProps, MessageActionCardNotice, MessageActionCardNoticeProps, MessageActionCardProperties, MessageActionCardPropertiesProps, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyLabelProps, MessageActionCardPropertyProps, MessageActionCardPropertyValue, MessageActionCardPropertyValueProps, MessageActionCardProps, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeDescriptionProps, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListLabelProps, MessageActionCardScopeListProps, MessageActionCardScopeListViewport, MessageActionCardScopeListViewportProps, MessageActionCardScopeName, MessageActionCardScopeNameProps, MessageActionCardScopeProps, MessageActionCardStatus, MessageActionCardStatusProps } from "./message-action-card.mjs";
+export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, type MessageActionCardActionsNoteProps, type MessageActionCardActionsProps, MessageActionCardCollapseTrigger, type MessageActionCardCollapseTriggerProps, MessageActionCardCompletion, type MessageActionCardCompletionProps, MessageActionCardContent, type MessageActionCardContentProps, MessageActionCardHeader, MessageActionCardHeaderDescription, type MessageActionCardHeaderDescriptionProps, MessageActionCardHeaderIcon, type MessageActionCardHeaderIconProps, MessageActionCardHeaderMeta, type MessageActionCardHeaderMetaProps, type MessageActionCardHeaderProps, MessageActionCardHeaderStatus, type MessageActionCardHeaderStatusProps, MessageActionCardHeaderTitle, type MessageActionCardHeaderTitleProps, MessageActionCardHint, MessageActionCardHintLabel, type MessageActionCardHintLabelProps, type MessageActionCardHintProps, MessageActionCardNotice, type MessageActionCardNoticeProps, MessageActionCardProperties, type MessageActionCardPropertiesProps, MessageActionCardProperty, MessageActionCardPropertyLabel, type MessageActionCardPropertyLabelProps, type MessageActionCardPropertyProps, MessageActionCardPropertyValue, type MessageActionCardPropertyValueProps, type MessageActionCardProps, MessageActionCardScope, MessageActionCardScopeDescription, type MessageActionCardScopeDescriptionProps, MessageActionCardScopeList, MessageActionCardScopeListLabel, type MessageActionCardScopeListLabelProps, type MessageActionCardScopeListProps, MessageActionCardScopeListViewport, type MessageActionCardScopeListViewportProps, MessageActionCardScopeName, type MessageActionCardScopeNameProps, type MessageActionCardScopeProps, MessageActionCardStatus, type MessageActionCardStatusProps };

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

@@ -23,6 +23,13 @@ export declare function MessageActionCardHeaderTitle({ className, render, ...pro
  * MessageActionCardHeaderTitle; it stays visible while the card is folded.
  */
 export declare function MessageActionCardHeaderDescription({ className, render, ...props }: useRender.ComponentProps<"span">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The time on a resolved card, in Space Mono at the hint tier. Place it
+ * inside MessageActionCardHeaderTitle for a line of its own under the title,
+ * or at the end of MessageActionCardHeaderDescription to close its line:
+ * "Approved by Martin · 10:51". It stays visible while the card is folded.
+ */
+export declare function MessageActionCardHeaderMeta({ className, render, ...props }: MessageActionCardHeaderMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * The card's state label in the header: plain text led by a square pixel in
  * the variant's colour, so a column of "Done" cards does not shout.
@@ -64,6 +71,7 @@ export type MessageActionCardProps = useRender.ComponentProps<"div"> & {
 export type MessageActionCardHeaderIconProps = useRender.ComponentProps<"span">;
 export type MessageActionCardHeaderTitleProps = useRender.ComponentProps<"span">;
 export type MessageActionCardHeaderDescriptionProps = useRender.ComponentProps<"span">;
+export type MessageActionCardHeaderMetaProps = useRender.ComponentProps<"span">;
 export type MessageActionCardStatusProps = BadgeProps;
 export type MessageActionCardCollapseTriggerProps = Omit<ComponentProps<typeof Collapsible.Trigger>, "className"> & {
   className?: string;

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

@@ -79,6 +79,21 @@ function MessageActionCardHeaderDescription({ className, render, ...props }) {
 		state: { slot: "message-action-card-header-description" }
 	});
 }
+/**
+* The time on a resolved card, in Space Mono at the hint tier. Place it
+* inside MessageActionCardHeaderTitle for a line of its own under the title,
+* or at the end of MessageActionCardHeaderDescription to close its line:
+* "Approved by Martin · 10:51". It stays visible while the card is folded.
+*/
+function MessageActionCardHeaderMeta({ className, render, ...props }) {
+	const { headerMeta } = messageActionCard();
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: headerMeta({ className }) }, props),
+		state: { slot: "message-action-card-header-meta" }
+	});
+}
 const STATUS_TONES = {
 	default: "neutral",
 	muted: "neutral",
@@ -292,4 +307,4 @@ function MessageActionCardActionsNote({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardCollapseTrigger, MessageActionCardCompletion, MessageActionCardContent, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderIcon, MessageActionCardHeaderStatus, MessageActionCardHeaderTitle, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardNotice, MessageActionCardProperties, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyValue, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListViewport, MessageActionCardScopeName, MessageActionCardStatus };
+export { MessageActionCard, MessageActionCardActions, MessageActionCardActionsNote, MessageActionCardCollapseTrigger, MessageActionCardCompletion, MessageActionCardContent, MessageActionCardHeader, MessageActionCardHeaderDescription, MessageActionCardHeaderIcon, MessageActionCardHeaderMeta, MessageActionCardHeaderStatus, MessageActionCardHeaderTitle, MessageActionCardHint, MessageActionCardHintLabel, MessageActionCardNotice, MessageActionCardProperties, MessageActionCardProperty, MessageActionCardPropertyLabel, MessageActionCardPropertyValue, MessageActionCardScope, MessageActionCardScopeDescription, MessageActionCardScopeList, MessageActionCardScopeListLabel, MessageActionCardScopeListViewport, MessageActionCardScopeName, MessageActionCardStatus };

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

@@ -16,6 +16,11 @@ const messageActionCard = tv({
 		],
 		headerTitle: ["min-w-0 flex-1", "pt-[calc((27px-1lh)/2)]"],
 		headerDescription: ["block", "mt-0.5 text-footnote font-normal text-foreground-muted"],
+		headerMeta: [
+			"block in-data-[slot=message-action-card-header-description]:inline",
+			"mt-0.5 in-data-[slot=message-action-card-header-description]:mt-0",
+			"font-mono text-mono-meta font-normal tabular-nums text-foreground-hint"
+		],
 		headerStatus: ["ml-auto shrink-0", "mt-[calc((27px-1lh)/2)] text-caption font-semibold text-foreground-muted"],
 		status: [
 			"inline-flex h-auto items-center gap-1.5 rounded-none border-0 bg-transparent p-0 shadow-none",

package/dist/components/resizable/resizable.recipe.mjs

@@ -5,17 +5,17 @@ const resizable = tv({ slots: {
 	panel: ["min-h-0 min-w-0"],
 	handle: [
 		"right-0 z-10 cursor-ew-resize touch-none select-none",
-		"relative -ml-1.5 -mr-1.5 flex w-3 shrink-0 items-center justify-center pointer-coarse:-ml-3 pointer-coarse:-mr-3 pointer-coarse:w-6",
+		"relative -mr-3 flex w-3 shrink-0 items-center justify-center pointer-coarse:-mr-6 pointer-coarse:w-6",
 		"before:pointer-events-none before:absolute before:transition-colors before:content-['']",
 		"focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:outline-offset-2 focus-visible:before:outline-foreground",
-		"data-[orientation=horizontal]:-mt-1.5 data-[orientation=horizontal]:-mb-1.5 data-[orientation=horizontal]:ml-0 data-[orientation=horizontal]:mr-0 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:cursor-ns-resize",
+		"data-[orientation=horizontal]:-mb-3 data-[orientation=horizontal]:mr-0 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:cursor-ns-resize pointer-coarse:data-[orientation=horizontal]:-mb-6 pointer-coarse:data-[orientation=horizontal]:mr-0 pointer-coarse:data-[orientation=horizontal]:h-6",
 		"bg-transparent",
-		"before:top-0 before:left-[5px] pointer-coarse:before:left-[11px] before:h-full before:w-px before:translate-none before:rounded-none",
+		"before:top-0 before:-left-px before:h-full before:w-px before:translate-none before:rounded-none",
 		"before:bg-transparent",
 		"hover:before:bg-foreground-muted",
 		"data-[separator=active]:before:bg-foreground-muted",
 		"focus-visible:keyboard:before:w-0.5 focus-visible:keyboard:before:bg-foreground focus-visible:before:outline-none",
-		"data-[orientation=horizontal]:before:top-[5px] data-[orientation=horizontal]:before:left-0",
+		"data-[orientation=horizontal]:before:-top-px data-[orientation=horizontal]:before:left-0",
 		"data-[orientation=horizontal]:before:h-px data-[orientation=horizontal]:before:w-full",
 		"data-[orientation=horizontal]:focus-visible:keyboard:before:h-0.5"
 	]

package/dist/components/scroll-area/scroll-area.css

@@ -452,11 +452,24 @@
     resize: vertical;
   }
 
-  /* The gutters layer: out of the way of the content, but for each gutter itself. */
+  /*
+   * The scrollbars paint over everything in the area, as native ones do: a
+   * sticky day heading with its own background and `z-index` (z-15 in an
+   * activity list) covered the thumb as it slid by, cutting it into pieces.
+   * The root is a stacking context of its own (`isolation: isolate`), so the
+   * layer's z-index ranks it only among the area's own content and never
+   * lifts it over anything outside the area: a fixed bar, a popup. What
+   * must cover things outside the area portals out of it, as raft-ui's
+   * overlays do.
+   */
+  .r-scroll-area {
+    isolation: isolate;
+  }
+  /* The gutters layer: out of the way of the content, but for each gutter itself; above all of it. */
   .r-scroll-area > .r-scroll-area__gutters {
     pointer-events: none;
     user-select: none;
-    z-index: 1;
+    z-index: 2147483647;
   }
   /*
    * Sticky: a zero-height layer at the top of the viewport, the container's

package/dist/components/scroll-area/use-scrollbars.mjs

@@ -399,7 +399,8 @@ function useScrollbars({ containerRef, contentRef, fadeRef, guttersPosition, roo
 	/** Binds the observers and the scroll listener to `container`; returns what undoes it. */
 	const bind = useCallback((container, content, root) => {
 		container.addEventListener("scroll", handleScroll, { passive: true });
-		measure(true);
+		if (typeof ResizeObserver === "undefined") measure(true);
+		else scheduleFrame(true);
 		const classes = root && typeof MutationObserver !== "undefined" ? new MutationObserver(applyClasses) : null;
 		if (root) classes?.observe(root, {
 			attributeFilter: ["class"],