@botiverse/raft-ui 0.81.0 → 0.82.0

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## [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

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)]",

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/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/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"],

package/dist/components/steps/otter-animation-visibility.mjs

@@ -0,0 +1,45 @@
+//#region src/components/steps/otter-animation-visibility.ts
+/** One observer/listener per document, regardless of the number of illustrations. */
+const documents = /* @__PURE__ */ new WeakMap();
+function observeOtterAnimation(node) {
+	const doc = node.ownerDocument;
+	let manager = documents.get(doc);
+	if (!manager) {
+		const visible = /* @__PURE__ */ new Map();
+		const update = (element, intersects) => {
+			element.dataset.animate = String(intersects && !doc.hidden);
+		};
+		const onVisibility = () => {
+			for (const [element, intersects] of visible) update(element, intersects);
+		};
+		const Observer = doc.defaultView?.IntersectionObserver;
+		const observer = Observer ? new Observer((entries) => {
+			for (const entry of entries) {
+				const element = entry.target;
+				if (!visible.has(element)) continue;
+				visible.set(element, entry.isIntersecting);
+				update(element, entry.isIntersecting);
+			}
+		}) : null;
+		doc.addEventListener("visibilitychange", onVisibility);
+		manager = { observe(element) {
+			visible.set(element, !observer);
+			update(element, !observer);
+			observer?.observe(element);
+			return () => {
+				observer?.unobserve(element);
+				visible.delete(element);
+				delete element.dataset.animate;
+				if (visible.size === 0) {
+					observer?.disconnect();
+					doc.removeEventListener("visibilitychange", onVisibility);
+					documents.delete(doc);
+				}
+			};
+		} };
+		documents.set(doc, manager);
+	}
+	return manager.observe(node);
+}
+//#endregion
+export { observeOtterAnimation };