@botiverse/raft-ui 0.61.0 → 0.63.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [0.63.0](https://github.com/botiverse/raft-design/compare/v0.62.0...v0.63.0) (2026-11-05)
+
+### Added
+
+- **InboxItemLine**, **InboxItemStatus**, **InboxItemListGroup** and **InboxItemListHeading** (from `@botiverse/raft-ui/wip`): a compact InboxItem row with no trailing column, and a list of rows grouped by day. ([#999](https://github.com/botiverse/raft-design/pull/999), rules in [#998](https://github.com/botiverse/raft-design/pull/998))
+  - Why: the trailing column held the time and task number on their own, wasting the row's width; the time now sits at the end of the first line and the preview takes the full width (stdrc, #proj-raft-ui:e09717fb).
+  - Affects: nothing until a row uses `InboxItemLine`. Rows built with `InboxItemTrailing` render the same DOM and classes as 0.62.0 (a parity test compares them).
+  - Docs: https://raft-design.botiverse.build/components/inbox-item/
+- **InboxItemTimestamp**: `reveal="hover"`, for an older row in a list with `InboxItemLine`: the time is hidden at rest and shows while the row is hovered or holds keyboard focus; never on touch. In a compact row's heading the time can carry a tooltip, and a click on it opens the item.
+- **InboxItemSkeleton** and its list: a `line` prop, so a loading row matches a row with `InboxItemLine`. Off by default.
+
+## [0.62.0](https://github.com/botiverse/raft-design/compare/v0.61.0...v0.62.0) (2026-11-05)
+
+### Changed
+
+- **AppShellSidebarTrigger**: its built-in labels are in sentence case: "Collapse sidebar" and "Expand sidebar", instead of "Collapse Sidebar" and "Expand Sidebar". ([#995](https://github.com/botiverse/raft-design/pull/995))
+  - Why: every clickable label in the Raft Design System now uses sentence case, with capitals only for the first word and for names ([decision 0044](https://raft-design.botiverse.build/decisions/0044-sentence-case-for-labels/), stdrc, #proj-raft-ui:10ce032d). The docs' rules and examples (buttons, menu items, tabs, links, tooltips, accessible names and the task status In progress) change with it.
+  - Affects: the trigger's `aria-label` and `title`. A trigger with your own `aria-label` is unchanged.
+  - Migrate: update tests and selectors that find the trigger by "Collapse Sidebar" or "Expand Sidebar" to the new names.
+  - Docs: https://raft-design.botiverse.build/components/app-shell/
+
+### Fixed
+
+- **useCommentMarginFits**: answers `false` where the browser has no `matchMedia` or `ResizeObserver` (jsdom, some embedded webviews) instead of throwing during render. ([#996](https://github.com/botiverse/raft-design/pull/996))
+  - Why: a viewer that used the hook crashed on its first render in jsdom, which failed every DOM test of slock's Artifact viewer (Remy, slock #12976, #proj-workspace:#176).
+  - Affects: only environments without those APIs; there the margin never fits and the viewer keeps its `CommentMarker`s.
+  - Docs: https://raft-design.botiverse.build/components/comment/
+
 ## [0.61.0](https://github.com/botiverse/raft-design/compare/v0.60.3...v0.61.0) (2026-11-04)
 
 ### Changed

package/dist/components/app-shell/app-shell.mjs

@@ -193,7 +193,7 @@ function AppShellSidebarTrigger(props) {
 	});
 }
 function AppShellSidebarTriggerButton({ sidebar, className, children, onClick, render, ...props }) {
-	const label = sidebar.open ? "Collapse Sidebar" : "Expand Sidebar";
+	const label = sidebar.open ? "Collapse sidebar" : "Expand sidebar";
 	const defaultProps = {
 		className: cn("group/app-shell-sidebar-trigger max-md:hidden", className),
 		"aria-label": label,

package/dist/components/comment/use-comment-margin-fits.mjs

@@ -1,13 +1,14 @@
 import { DESKTOP_MEDIA_QUERY } from "../../lib/desktop-media.mjs";
 import { useLayoutEffect, useState, useSyncExternalStore } from "react";
 //#region src/components/comment/use-comment-margin-fits.ts
+const canMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
 function subscribeDesktop(onChange) {
-	if (typeof window === "undefined") return () => void 0;
+	if (!canMatchMedia()) return () => void 0;
 	const media = window.matchMedia(DESKTOP_MEDIA_QUERY);
 	media.addEventListener("change", onChange);
 	return () => media.removeEventListener("change", onChange);
 }
-const getDesktop = () => typeof window !== "undefined" && window.matchMedia("(width >= 48rem) and (pointer: fine)").matches;
+const getDesktop = () => canMatchMedia() && window.matchMedia("(width >= 48rem) and (pointer: fine)").matches;
 /**
 * Whether a viewer has room for a comment margin beside its document: true
 * only on a desktop (from 768px with a mouse or a trackpad, the query the
@@ -24,6 +25,7 @@ function useCommentMarginFits(element, { minWidth = 784 } = {}) {
 		if (!element) return;
 		const measure = () => setWidth(element.getBoundingClientRect().width);
 		measure();
+		if (typeof ResizeObserver === "undefined") return;
 		const observer = new ResizeObserver(measure);
 		observer.observe(element);
 		return () => observer.disconnect();

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

@@ -3,7 +3,7 @@ import { Announcements, ScreenReaderInstructions, UniqueIdentifier } from "@dnd-
 /** A place in words: the list or area's name, and the item's position in it when it has one. */
 export type DragPlace = {
   /**
-   * The list or area, as people see it: "Pinned", "In Review", "the right
+   * The list or area, as people see it: "Pinned", "In review", "the right
    * column". Empty when it has no name (an unlabelled tab row): then only the
    * position is said.
    */

package/dist/components/ellipsis/ellipsis.d.mts

@@ -49,7 +49,7 @@ export type EllipsisToggleProps = Omit<TextLinkProps, "aria-expanded" | "aria-co
 /**
  * The control that expands an Ellipsis and collapses it again, for its
  * `after`. A real button, with `aria-expanded` and `aria-controls` pointing
- * at the text. The label is the caller's: "Show More" / "Show Less".
+ * at the text. The label is the caller's: "Show more" / "Show less".
  */
 export declare function EllipsisToggle({ onClick, ...props }: EllipsisToggleProps): import("react").JSX.Element;
 //#endregion

package/dist/components/ellipsis/ellipsis.mjs

@@ -299,7 +299,7 @@ function Ellipsis({ children, lines = 1, tooltip = true, after, expanded: expand
 /**
 * The control that expands an Ellipsis and collapses it again, for its
 * `after`. A real button, with `aria-expanded` and `aria-controls` pointing
-* at the text. The label is the caller's: "Show More" / "Show Less".
+* at the text. The label is the caller's: "Show more" / "Show less".
 */
 function EllipsisToggle({ onClick, ...props }) {
 	const context = useContext(EllipsisContext);

package/dist/components/filter-chip/filter-chip.d.mts

@@ -16,7 +16,7 @@ export declare function FilterChipLabel({ className, ...props }: FilterChipLabel
 export type FilterChipRemoveProps = Omit<StyledProps<Button.Props>, "aria-label" | "type"> & DataAttributes & {
   /**
    * What the × does, said in words: the chip shows only a glyph. Name the
-   * result, such as "Clear Filter" or "Show All".
+   * result, such as "Clear filter" or "Show all".
    */
   "aria-label": string;
 };

package/dist/components/inbox-item/inbox-item-skeleton.d.mts

@@ -8,6 +8,11 @@ type InboxItemSkeletonShape = {
   leading?: boolean;
   /** A context line above the title, where the rows have an `InboxItemContext`. */
   context?: boolean;
+  /**
+   * In `density="compact"`, where the rows have an `InboxItemLine`: no trailing
+   * column, the time at the end of the heading.
+   */
+  line?: boolean;
 };
 export type InboxItemSkeletonProps = Omit<InboxItemProps, "active" | "disabled" | "children"> & InboxItemSkeletonShape;
 /**
@@ -16,11 +21,12 @@ export type InboxItemSkeletonProps = Omit<InboxItemProps, "active" | "disabled"
  * leading block, the context line, the title, the excerpt, the timestamp),
  * each holding a bar instead of text. The padding, the divider and every
  * line's height are the loaded row's, so nothing moves when the content
- * arrives. Match `density`, `leading` and `context` to the rows it stands for.
+ * arrives. Match `density`, `leading`, `context` and `line` to the rows it
+ * stands for.
  * Hidden from assistive technology: mark the region that stays while the
  * list loads `aria-busy`.
  */
-export declare function InboxItemSkeleton({ density, leading, context, ...props }: InboxItemSkeletonProps): import("react").JSX.Element;
+export declare function InboxItemSkeleton({ density, leading, context, line, ...props }: InboxItemSkeletonProps): import("react").JSX.Element;
 export type InboxItemSkeletonListProps = useRender.ComponentProps<"div"> & InboxItemSkeletonShape & {
   /** How many rows to show. About a screenful; ignored when there are children. */
   count?: number;
@@ -42,5 +48,5 @@ export type InboxItemSkeletonListProps = useRender.ComponentProps<"div"> & Inbox
  * content arrives, so mark the region that stays, such as the list's panel or
  * viewport, `aria-busy` while it loads.
  */
-export declare function InboxItemSkeletonList({ count, delay, density, leading, context, children, className, render, ...props }: InboxItemSkeletonListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function InboxItemSkeletonList({ count, delay, density, leading, context, line, children, className, render, ...props }: InboxItemSkeletonListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/components/inbox-item/inbox-item-skeleton.mjs

@@ -1,5 +1,5 @@
 import { Skeleton } from "../skeleton/skeleton.mjs";
-import { InboxItem, InboxItemBody, InboxItemContent, InboxItemContext, InboxItemHeading, InboxItemLeading, InboxItemTimestamp, InboxItemTitle, InboxItemTrailing } from "./inbox-item.mjs";
+import { InboxItem, InboxItemBody, InboxItemContent, InboxItemContext, InboxItemHeading, InboxItemLeading, InboxItemLine, InboxItemTimestamp, InboxItemTitle, InboxItemTrailing } from "./inbox-item.mjs";
 import { inboxItemSkeleton } from "./inbox-item-skeleton.recipe.mjs";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,16 +12,20 @@ import { useRender } from "@base-ui/react/use-render";
 * leading block, the context line, the title, the excerpt, the timestamp),
 * each holding a bar instead of text. The padding, the divider and every
 * line's height are the loaded row's, so nothing moves when the content
-* arrives. Match `density`, `leading` and `context` to the rows it stands for.
+* arrives. Match `density`, `leading`, `context` and `line` to the rows it
+* stands for.
 * Hidden from assistive technology: mark the region that stays while the
 * list loads `aria-busy`.
 */
-function InboxItemSkeleton({ density, leading = false, context = false, ...props }) {
+function InboxItemSkeleton({ density, leading = false, context = false, line = false, ...props }) {
 	const slots = inboxItemSkeleton();
 	const bar = (width) => /* @__PURE__ */ jsx(Skeleton, {
 		variant: "line",
 		className: slots.bar({ className: width })
 	});
+	const fullWidth = line && density === "compact";
+	const timestamp = /* @__PURE__ */ jsx(InboxItemTimestamp, { children: bar(slots.timestampBar()) });
+	const body = /* @__PURE__ */ jsx(InboxItemBody, { children: bar(slots.bodyBar()) });
 	return /* @__PURE__ */ jsxs(InboxItem, {
 		"aria-hidden": true,
 		"data-skeleton": "",
@@ -36,13 +40,13 @@ function InboxItemSkeleton({ density, leading = false, context = false, ...props
 					className: slots.line(),
 					children: bar(slots.contextBar())
 				}) }) : null,
-				/* @__PURE__ */ jsx(InboxItemHeading, { children: /* @__PURE__ */ jsx(InboxItemTitle, {
+				/* @__PURE__ */ jsxs(InboxItemHeading, { children: [/* @__PURE__ */ jsx(InboxItemTitle, {
 					className: slots.title(),
 					children: bar(slots.titleBar())
-				}) }),
-				/* @__PURE__ */ jsx(InboxItemBody, { children: bar(slots.bodyBar()) })
+				}), fullWidth ? timestamp : null] }),
+				fullWidth ? /* @__PURE__ */ jsx(InboxItemLine, { children: body }) : body
 			] }),
-			/* @__PURE__ */ jsx(InboxItemTrailing, { children: /* @__PURE__ */ jsx(InboxItemTimestamp, { children: bar(slots.timestampBar()) }) })
+			fullWidth ? null : /* @__PURE__ */ jsx(InboxItemTrailing, { children: timestamp })
 		]
 	});
 }
@@ -56,7 +60,7 @@ function InboxItemSkeleton({ density, leading = false, context = false, ...props
 * content arrives, so mark the region that stays, such as the list's panel or
 * viewport, `aria-busy` while it loads.
 */
-function InboxItemSkeletonList({ count = 6, delay = 1e3, density, leading, context, children, className, render, ...props }) {
+function InboxItemSkeletonList({ count = 6, delay = 1e3, density, leading, context, line, children, className, render, ...props }) {
 	const { list } = inboxItemSkeleton();
 	const shown = useDelayPassed(delay);
 	const defaultProps = {
@@ -66,7 +70,8 @@ function InboxItemSkeletonList({ count = 6, delay = 1e3, density, leading, conte
 		children: shown ? children ?? Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(InboxItemSkeleton, {
 			density,
 			leading,
-			context
+			context,
+			line
 		}, index)) : null
 	};
 	return useRender({

package/dist/components/inbox-item/inbox-item.d.mts

@@ -1,9 +1,12 @@
+import { TaskStatusBadgeProps } from "../tasks/task-status-badge.mjs";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/inbox-item/inbox-item.d.ts
 /**
  * `compact`: one line for the title and one for the excerpt, the row centred
- * on its leading visual, and the trailing column set on the same two 20px
- * lines (a conversation list). Leave it unset for the default two-line rows.
+ * on its leading visual, and the trailing column set on the same two 20px lines
+ * (a conversation list). With `InboxItemLine` in place of the column both lines
+ * run the full width: the time at the end of the heading, the marks at the end
+ * of the line. Leave it unset for the default two-line rows.
  */
 export type InboxItemDensity = "compact";
 export type InboxItemProps = useRender.ComponentProps<"div"> & {
@@ -29,19 +32,77 @@ export declare function InboxItemContext({ className, render, ...props }: InboxI
 export type InboxItemSubtitleProps = useRender.ComponentProps<"div">;
 export declare function InboxItemSubtitle({ className, render, ...props }: InboxItemSubtitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type InboxItemHeadingProps = useRender.ComponentProps<"div">;
-export declare function InboxItemHeading({ className, render, ...props }: InboxItemHeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function InboxItemHeading({ className, render, ...props }: InboxItemHeadingProps): import("react").JSX.Element;
 export type InboxItemTitleProps = useRender.ComponentProps<"div">;
 export declare function InboxItemTitle({ className, render, ...props }: InboxItemTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type InboxItemTrailingProps = useRender.ComponentProps<"div">;
 export declare function InboxItemTrailing({ className, render, ...props }: InboxItemTrailingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type InboxItemTimestampProps = useRender.ComponentProps<"span">;
-export declare function InboxItemTimestamp({ className, render, ...props }: InboxItemTimestampProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
- * Marks at the end of a line: a mention, muted, an unread count. A 20px line
- * of its own in `InboxItemTrailing`, so it sits beside the excerpt.
+ * The time. In the heading of a compact row it takes the pointer, so it can
+ * carry a tooltip, and a click on it still opens the item. A tooltip's trigger
+ * replaces `data-slot`, so the heading finds the time by `data-inbox-item-time`.
+ * In `InboxItemTrailing` it does neither and lets the pointer through.
+ */
+export type InboxItemTimestampProps = useRender.ComponentProps<"span"> & {
+  /**
+   * `hover`, for an older row in a list with `InboxItemLine`: hidden at rest, so
+   * the title takes its room. It shows in the same place, without animation,
+   * while the row is hovered or it or a control in it holds keyboard focus; a
+   * touch screen never hovers, so there it stays hidden. While hidden it isn't
+   * read out: say the time in the trigger's name.
+   */
+  reveal?: "hover";
+};
+export declare function InboxItemTimestamp({ className, onClick, render, reveal, ...props }: InboxItemTimestampProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The excerpt's line in a compact row with no trailing column: `InboxItemBody`
+ * or `InboxItemMessage`, taking the room, then `InboxItemMarks`. Marks with
+ * nothing in them take no room. Its presence is what puts the row in this
+ * layout: both lines run the full width, and `InboxItemActions` with
+ * `reveal="hover"`, last in `InboxItemContent`, centres on the row while both
+ * lines end short of it. A row without it stays as it is.
+ */
+export type InboxItemLineProps = useRender.ComponentProps<"div">;
+export declare function InboxItemLine({ className, render, ...props }: InboxItemLineProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * Marks at the end of a line: a mention, muted, an unread count. At the end of
+ * `InboxItemLine`, or a 20px line of its own in `InboxItemTrailing`, so it sits
+ * beside the excerpt either way.
  */
 export type InboxItemMarksProps = useRender.ComponentProps<"div">;
 export declare function InboxItemMarks({ className, render, ...props }: InboxItemMarksProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A task's status in `InboxItemMarks`: the chip with its word, and in a row with
+ * `InboxItemLine` narrower than 360px only the chip's pixel, with the word in a
+ * tooltip on it. It queries the container that row names, `inbox-item-row`, so
+ * it is the row that is measured, not the window or any other container around it. Pass an `id` to name the word in the trigger's
+ * `aria-labelledby`, as it isn't on screen there. In a row with a trailing
+ * column it stays the chip with its word.
+ */
+export type InboxItemStatusProps = Omit<TaskStatusBadgeProps, "children" | "render" | "size"> & {
+  /** The status's word. The caller owns the copy and its localization. */
+  children: string;
+};
+export declare function InboxItemStatus({ children, className, status, ...props }: InboxItemStatusProps): import("react").JSX.Element;
+/**
+ * One day's or one group's heading and rows, placed straight in the list's
+ * column. A sticky heading stays inside its parent, so with one of these per day
+ * the next day's heading pushes the last one up and out. In one shared column
+ * the headings would pile up at the top instead. Rows of a virtualized list,
+ * placed one by one, can't sit in one: there the list has to do this itself.
+ */
+export type InboxItemListGroupProps = useRender.ComponentProps<"div">;
+export declare function InboxItemListGroup({ className, render, ...props }: InboxItemListGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The heading of an `InboxItemListGroup`: it starts on the rows' content line,
+ * 8px over the first row's shape with the group's gap, and the group holds it
+ * further from the rows above. An `h3`: render another level if the list's title
+ * isn't an `h2`. To keep it in view while its rows scroll, the list makes it
+ * sticky and gives it the list's surface; its box holds the 4px above and below
+ * its words, so no row shows through them. The 2px under the box is a margin.
+ */
+export type InboxItemListHeadingProps = useRender.ComponentProps<"h3">;
+export declare function InboxItemListHeading({ className, render, ...props }: InboxItemListHeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * Takes the pointer inside the content, which otherwise lets it through to
  * the trigger, so a badge's tooltip opens on hover. A click on it still opens
@@ -60,10 +121,14 @@ export declare function InboxItemMetadata({ className, render, ...props }: Inbox
 export type InboxItemActionsProps = useRender.ComponentProps<"div"> & {
   /**
    * `hover`: with a mouse, the actions stay hidden until the row is hovered,
-   * holds focus, is `active` or has a menu open, and then take the place of
-   * the rest of `InboxItemTrailing` (the timestamp, the marks, the attention
-   * dot), which steps aside. On a touch screen (`pointer: coarse`) they show
-   * at rest and the rest of the trailing column moves over to make room.
+   * holds focus, is `active` or has a menu open. Give the button
+   * `variant="ghost"` here. On a touch screen (`pointer: coarse`) they show at
+   * rest. In a compact row without `InboxItemTrailing`, put them last in
+   * `InboxItemContent`: they centre on the row and both lines end short of them,
+   * the time and the marks moving over and staying visible (room for one
+   * 32px button). In `InboxItemTrailing` they take the place of the timestamp,
+   * the marks and the attention dot, which step aside; on a touch screen the
+   * rest of the trailing column moves over to make room.
    */
   reveal?: "hover";
 };

package/dist/components/inbox-item/inbox-item.mjs

@@ -1,11 +1,30 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { TaskStatusIcon } from "../tasks/task-status-icon.mjs";
+import { TaskStatusBadge } from "../tasks/task-status-badge.mjs";
 import { inboxItem } from "./inbox-item.recipe.mjs";
 import { createContext, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/inbox-item/inbox-item.tsx
 const InboxItemDisabledContext = createContext(false);
 const InboxItemDensityContext = createContext(void 0);
+const InboxItemHeadingContext = createContext(false);
+/** The content lets the pointer through to the trigger; a part that takes it hands its click on. */
+function openItemFrom(event) {
+	if (event.defaultPrevented) return;
+	const trigger = event.currentTarget.closest("[data-slot=inbox-item]")?.querySelector("[data-slot=inbox-item-open]");
+	if (!trigger) return;
+	trigger.dispatchEvent(new MouseEvent("click", {
+		bubbles: true,
+		cancelable: true,
+		detail: event.detail,
+		altKey: event.altKey,
+		ctrlKey: event.ctrlKey,
+		metaKey: event.metaKey,
+		shiftKey: event.shiftKey
+	}));
+}
 function InboxItem({ active = false, className, density, disabled = false, render, ...props }) {
 	const { item } = inboxItem({ density });
 	const defaultProps = {
@@ -80,7 +99,8 @@ function InboxItemSelection({ className, render, ...props }) {
 	});
 }
 function InboxItemContent({ className, render, ...props }) {
-	const { itemContent } = inboxItem();
+	const density = useContext(InboxItemDensityContext);
+	const { itemContent } = inboxItem({ density });
 	const defaultProps = {
 		"data-slot": "inbox-item-content",
 		className: itemContent({ className })
@@ -116,16 +136,21 @@ function InboxItemSubtitle({ className, render, ...props }) {
 	});
 }
 function InboxItemHeading({ className, render, ...props }) {
-	const { itemHeading } = inboxItem();
+	const density = useContext(InboxItemDensityContext);
+	const { itemHeading } = inboxItem({ density });
 	const defaultProps = {
 		"data-slot": "inbox-item-heading",
 		className: itemHeading({ className })
 	};
-	return useRender({
+	const element = useRender({
 		defaultTagName: "div",
 		render,
 		props: mergeProps(defaultProps, props)
 	});
+	return /* @__PURE__ */ jsx(InboxItemHeadingContext.Provider, {
+		value: density === "compact",
+		children: element
+	});
 }
 function InboxItemTitle({ className, render, ...props }) {
 	const density = useContext(InboxItemDensityContext);
@@ -153,12 +178,21 @@ function InboxItemTrailing({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
-function InboxItemTimestamp({ className, render, ...props }) {
+function InboxItemTimestamp({ className, onClick, render, reveal, ...props }) {
 	const density = useContext(InboxItemDensityContext);
-	const { itemTimestamp } = inboxItem({ density });
+	const inHeading = useContext(InboxItemHeadingContext);
+	const { itemTimestamp } = inboxItem({
+		density,
+		reveal
+	});
 	const defaultProps = {
+		"data-inbox-item-time": inHeading ? "" : void 0,
 		"data-slot": "inbox-item-timestamp",
-		className: itemTimestamp({ className })
+		className: itemTimestamp({ className }),
+		onClick: inHeading ? (event) => {
+			onClick?.(event);
+			openItemFrom(event);
+		} : onClick
 	};
 	return useRender({
 		defaultTagName: "span",
@@ -166,6 +200,18 @@ function InboxItemTimestamp({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
+function InboxItemLine({ className, render, ...props }) {
+	const { itemLine } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-line",
+		className: itemLine({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
 function InboxItemMarks({ className, render, ...props }) {
 	const { itemMarks } = inboxItem();
 	const defaultProps = {
@@ -178,6 +224,46 @@ function InboxItemMarks({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
+function InboxItemStatus({ children, className, status, ...props }) {
+	const { itemStatusWord, itemStatusPixel } = inboxItem();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TaskStatusBadge, {
+		status,
+		size: "sm",
+		className: itemStatusWord({ className }),
+		...props,
+		children
+	}), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx(InboxItemHoverTarget, { className: itemStatusPixel() }),
+		role: "img",
+		"aria-label": children,
+		"data-slot": "inbox-item-status-pixel",
+		children: /* @__PURE__ */ jsx(TaskStatusIcon, { status })
+	}), /* @__PURE__ */ jsx(TooltipContent, { children })] })] });
+}
+function InboxItemListGroup({ className, render, ...props }) {
+	const { itemListGroup } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-list-group",
+		className: itemListGroup({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function InboxItemListHeading({ className, render, ...props }) {
+	const { itemListHeading } = inboxItem();
+	const defaultProps = {
+		"data-slot": "inbox-item-list-heading",
+		className: itemListHeading({ className })
+	};
+	return useRender({
+		defaultTagName: "h3",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
 function InboxItemHoverTarget({ className, onClick, render, ...props }) {
 	const { itemHoverTarget } = inboxItem();
 	const defaultProps = {
@@ -185,18 +271,7 @@ function InboxItemHoverTarget({ className, onClick, render, ...props }) {
 		className: itemHoverTarget({ className }),
 		onClick: (event) => {
 			onClick?.(event);
-			if (event.defaultPrevented) return;
-			const trigger = event.currentTarget.closest("[data-slot=inbox-item]")?.querySelector("[data-slot=inbox-item-open]");
-			if (!trigger) return;
-			trigger.dispatchEvent(new MouseEvent("click", {
-				bubbles: true,
-				cancelable: true,
-				detail: event.detail,
-				altKey: event.altKey,
-				ctrlKey: event.ctrlKey,
-				metaKey: event.metaKey,
-				shiftKey: event.shiftKey
-			}));
+			openItemFrom(event);
 		}
 	};
 	return useRender({
@@ -273,4 +348,4 @@ function InboxItemActions({ className, render, reveal, ...props }) {
 	});
 }
 //#endregion
-export { InboxItem, InboxItemActions, InboxItemBody, InboxItemContent, InboxItemContext, InboxItemHeading, InboxItemHoverTarget, InboxItemLeading, InboxItemMarks, InboxItemMessage, InboxItemMetadata, InboxItemSelection, InboxItemSender, InboxItemSubtitle, InboxItemTimestamp, InboxItemTitle, InboxItemTrailing, InboxItemTrigger };
+export { InboxItem, InboxItemActions, InboxItemBody, InboxItemContent, InboxItemContext, InboxItemHeading, InboxItemHoverTarget, InboxItemLeading, InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemMarks, InboxItemMessage, InboxItemMetadata, InboxItemSelection, InboxItemSender, InboxItemStatus, InboxItemSubtitle, InboxItemTimestamp, InboxItemTitle, InboxItemTrailing, InboxItemTrigger };

package/dist/components/inbox-item/inbox-item.recipe.mjs

@@ -70,9 +70,18 @@ const inboxItem = tv({
 			"group-data-[active=true]/inbox-item:[--inbox-item-revealed:1] group-data-popup-open/inbox-item:[--inbox-item-revealed:1]",
 			"has-[>[data-reveal=hover]_[data-popup-open]]:[--inbox-item-revealed:1]"
 		],
+		itemStatusWord: ["shrink-0 @max-[320px]/inbox-item-row:hidden"],
+		itemStatusPixel: ["hidden items-center @max-[320px]/inbox-item-row:inline-flex"],
+		itemListGroup: ["flex flex-col gap-0.5", "mt-1.5 first:mt-0"],
+		itemListHeading: ["mb-0.5 px-5 py-1", "font-sans text-footnote font-bold text-foreground-hint"],
 		itemMarks: ["flex h-5 shrink-0 items-center justify-end gap-1.5", "text-foreground-hint"],
 		itemHoverTarget: ["pointer-events-auto"],
 		itemTimestamp: ["shrink-0 whitespace-nowrap text-right tabular-nums", "font-mono text-mono-meta text-foreground-hint"],
+		itemLine: [
+			"flex h-(--text-callout--line-height) min-w-0 items-center gap-2",
+			"*:not-data-[slot=inbox-item-marks]:min-w-0 *:not-data-[slot=inbox-item-marks]:flex-1",
+			"*:data-[slot=inbox-item-marks]:empty:hidden"
+		],
 		itemBody: [
 			"col-span-full nth-[-n+2]:col-[1/2]",
 			"line-clamp-2",
@@ -105,7 +114,16 @@ const inboxItem = tv({
 	},
 	variants: {
 		density: { compact: {
-			item: ["items-center"],
+			item: [
+				"items-center",
+				"has-data-[slot=inbox-item-line]:@container/inbox-item-row",
+				"has-data-[slot=inbox-item-line]:[--inbox-item-content-end:-1]",
+				"has-data-[slot=inbox-item-line]:pointer-fine:[:hover,:focus-within,[data-active=true],[data-popup-open],:has([data-popup-open])]:[--inbox-item-actions-room:--spacing(10)]",
+				"has-data-[slot=inbox-item-line]:pointer-coarse:[--inbox-item-actions-room:--spacing(11)]",
+				"has-data-[slot=inbox-item-line]:hover:[--inbox-item-time-display:inline] has-data-[slot=inbox-item-line]:keyboard:focus-within:[--inbox-item-time-display:inline]"
+			],
+			itemContent: ["has-[>[data-slot=inbox-item-line]]:has-[>[data-reveal=hover]]:pr-(--inbox-item-actions-room,0px)"],
+			itemHeading: ["has-[>[data-inbox-item-time]]:h-(--text-subhead--line-height) has-[>[data-inbox-item-time]]:items-baseline", "*:data-inbox-item-time:pointer-events-auto *:data-inbox-item-time:cursor-default"],
 			itemTitle: ["line-clamp-1", "pl-0 has-[>svg]:pl-[18px]"],
 			itemTrailing: [
 				"gap-0 pt-0",
@@ -116,16 +134,19 @@ const inboxItem = tv({
 			itemBody: ["line-clamp-1", "mt-0"],
 			itemMessage: ["line-clamp-1", "mt-0"]
 		} },
-		reveal: { hover: { itemActions: [
-			"absolute top-0 right-0 z-10",
-			"pointer-events-none opacity-0 transition-opacity",
-			"group-hover/inbox-item:pointer-events-auto group-hover/inbox-item:opacity-100",
-			"group-focus-within/inbox-item:pointer-events-auto group-focus-within/inbox-item:opacity-100",
-			"group-data-[active=true]/inbox-item:pointer-events-auto group-data-[active=true]/inbox-item:opacity-100",
-			"group-data-popup-open/inbox-item:pointer-events-auto group-data-popup-open/inbox-item:opacity-100",
-			"has-data-popup-open:pointer-events-auto has-data-popup-open:opacity-100",
-			"pointer-coarse:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:only:static"
-		] } }
+		reveal: { hover: {
+			itemActions: [
+				"absolute top-0 right-0 z-10",
+				"pointer-events-none opacity-0 transition-opacity",
+				"group-hover/inbox-item:pointer-events-auto group-hover/inbox-item:opacity-100",
+				"group-focus-within/inbox-item:pointer-events-auto group-focus-within/inbox-item:opacity-100",
+				"group-data-[active=true]/inbox-item:pointer-events-auto group-data-[active=true]/inbox-item:opacity-100",
+				"group-data-popup-open/inbox-item:pointer-events-auto group-data-popup-open/inbox-item:opacity-100",
+				"has-data-popup-open:pointer-events-auto has-data-popup-open:opacity-100",
+				"pointer-coarse:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:only:static"
+			],
+			itemTimestamp: ["[display:var(--inbox-item-time-display,none)]"]
+		} }
 	},
 	compoundVariants: [{
 		density: "compact",

package/dist/components/message-list/message-list-jump.d.mts

@@ -14,7 +14,7 @@ export type MessageListJumpPillGroupProps = useRender.ComponentProps<"div">;
 /** A pill and its dismiss button, joined on one shared edge. */
 export declare function MessageListJumpPillGroup({ className, render, ...props }: MessageListJumpPillGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type MessageListJumpPillDismissProps = StyledProps<Button.Props> & DataAttributes & {
-  /** What the button does, in Title Case: the product's words. */
+  /** What the button does, in sentence case: the product's words. */
   "aria-label": string;
 };
 export declare function MessageListJumpPillDismiss({ className, children, render, nativeButton, ...props }: MessageListJumpPillDismissProps): import("react").JSX.Element;

package/dist/components/select/select.d.mts

@@ -60,7 +60,7 @@ export type SelectActionItemProps = StyledProps<Omit<Select.Item.Props, "value"
   onAction?: (event: Event) => void;
   /**
    * Whether pressing the row closes the list. Off by default: a list action
-   * such as Show All changes what the list shows, so the list stays open.
+   * such as Show all changes what the list shows, so the list stays open.
    * @default false
    */
   closeOnAction?: boolean;
@@ -71,7 +71,7 @@ export type SelectActionItemProps = StyledProps<Omit<Select.Item.Props, "value"
 };
 /**
  * An action row inside the list, placed last after a `SelectSeparator`, such as
- * Show All. It is reached by the arrow keys and typeahead like an item, but
+ * Show all. It is reached by the arrow keys and typeahead like an item, but
  * pressing it runs `onAction` instead of choosing a value. It is an option to
  * assistive technology, so it takes no `aria-expanded`: its label says what it
  * does.

package/dist/components/select/select.mjs

@@ -392,7 +392,7 @@ function SelectItemDescription({ className, id, ...props }) {
 }
 /**
 * An action row inside the list, placed last after a `SelectSeparator`, such as
-* Show All. It is reached by the arrow keys and typeahead like an item, but
+* Show all. It is reached by the arrow keys and typeahead like an item, but
 * pressing it runs `onAction` instead of choosing a value. It is an option to
 * assistive technology, so it takes no `aria-expanded`: its label says what it
 * does.

package/dist/components/text-selection-toolbar/text-selection-toolbar.d.mts

@@ -11,7 +11,7 @@ export declare function TextSelectionToolbar({ className, ...props }: TextSelect
 export type TextSelectionToolbarButtonProps = StyledProps<Toolbar.Button.Props>;
 /**
  * One action on the selected text: a 28px button with a 16px icon and a
- * Title Case label that never wraps.
+ * sentence-case label that never wraps.
  */
 export declare function TextSelectionToolbarButton({ className, ...props }: TextSelectionToolbarButtonProps): import("react").JSX.Element;
 export type TextSelectionToolbarSeparatorProps = StyledProps<Toolbar.Separator.Props>;

package/dist/components/text-selection-toolbar/text-selection-toolbar.mjs

@@ -17,7 +17,7 @@ function TextSelectionToolbar({ className, ...props }) {
 }
 /**
 * One action on the selected text: a 28px button with a 16px icon and a
-* Title Case label that never wraps.
+* sentence-case label that never wraps.
 */
 function TextSelectionToolbarButton({ className, ...props }) {
 	const { button } = textSelectionToolbar();

package/dist/wip.d.mts

@@ -25,6 +25,7 @@ import "./components/table/index.mjs";
 import { DEFAULT_DRAG_MESSAGES, DragAnnouncementSource, DragMessages, DragNamed, DragPlace, createDragAnnouncements, dragInstructions, dragMessages } from "./components/drag/drag-announcements.mjs";
 import { PanelSplitAction, PanelSplitActionMain, PanelSplitActionMainProps, PanelSplitActionMenu, PanelSplitActionMenuProps, PanelSplitActionProps, PanelSplitActionToggle, PanelSplitActionToggleProps } from "./components/panel/panel-split-action.mjs";
 import "./components/panel/index.mjs";
+import { InboxItemLine, InboxItemLineProps, InboxItemListGroup, InboxItemListGroupProps, InboxItemListHeading, InboxItemListHeadingProps, InboxItemStatus, InboxItemStatusProps } from "./components/inbox-item/inbox-item.mjs";
 import { ModeBar, ModeBarAction, ModeBarActionProps, ModeBarContent, ModeBarContentProps, ModeBarDescription, ModeBarDescriptionProps, ModeBarProps, ModeBarTitle, ModeBarTitleProps } from "./components/mode-bar/mode-bar.mjs";
 import "./components/mode-bar/index.mjs";
 import { ComboboxSelectGroup, ComboboxSelectMessages, ComboboxSelectOption, ComboboxSelectProps, ComboboxSelectSelection, ComboboxSelectValue } from "./components/combobox-select/combobox-select.types.mjs";
@@ -68,4 +69,4 @@ import { SaveStatus, SaveStatusError, SaveStatusErrorProps, SaveStatusProps, Sav
 import "./components/save-status/index.mjs";
 import { TaskCompletionControl, TaskCompletionControlProps } from "./components/task-completion-control/task-completion-control.mjs";
 import "./components/task-completion-control/index.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, type AvatarGroupButtonProps, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, type KbdKeyName, KbdShortcut, type KbdShortcutProps, type KeyboardPlatform, LIFT_CLASS, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, ModeBar, ModeBarAction, type ModeBarActionProps, ModeBarContent, type ModeBarContentProps, ModeBarDescription, type ModeBarDescriptionProps, type ModeBarProps, ModeBarTitle, type ModeBarTitleProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, type AvatarGroupButtonProps, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemLine, type InboxItemLineProps, InboxItemListGroup, type InboxItemListGroupProps, InboxItemListHeading, type InboxItemListHeadingProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, InboxItemStatus, type InboxItemStatusProps, type KbdKeyName, KbdShortcut, type KbdShortcutProps, type KeyboardPlatform, LIFT_CLASS, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, ModeBar, ModeBarAction, type ModeBarActionProps, ModeBarContent, type ModeBarContentProps, ModeBarDescription, type ModeBarDescriptionProps, type ModeBarProps, ModeBarTitle, type ModeBarTitleProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/dist/wip.mjs

@@ -21,6 +21,7 @@ import { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, D
 import { DRAG_KEYBOARD_CODES, DragRemeasure, MOUSE_DRAG_DISTANCE_PX, listKeyboardCoordinates, useDragAcrossLists, useDragSensors } from "./components/drag/drag-sensors.mjs";
 import { DragRefusalHint, DropPlaceholder } from "./components/drag/drop-placeholder.mjs";
 import { PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle } from "./components/panel/panel-split-action.mjs";
+import { InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemStatus } from "./components/inbox-item/inbox-item.mjs";
 import { ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle } from "./components/mode-bar/mode-bar.mjs";
 import { ComboboxSelect } from "./components/combobox-select/combobox-select.mjs";
 import { AnnouncementDialogAction, AnnouncementDialogBody, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle } from "./components/announcement-dialog/announcement-dialog.mjs";
@@ -45,4 +46,4 @@ import { PullToRefreshIndicator } from "./components/pull-to-refresh/pull-to-ref
 import { ChoiceList } from "./components/choice-list/choice-list.mjs";
 import { SaveStatus, SaveStatusError, SaveStatusSaved } from "./components/save-status/save-status.mjs";
 import { TaskCompletionControl } from "./components/task-completion-control/task-completion-control.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, KbdShortcut, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemSkeleton, InboxItemSkeletonList, InboxItemStatus, KbdShortcut, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.61.0",
+  "version": "0.63.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",