@botiverse/raft-ui 0.62.0 → 0.63.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [0.63.1](https://github.com/botiverse/raft-design/compare/v0.63.0...v0.63.1) (2026-11-05)
+
+### Fixed
+
+- **Fonts**: Cyrillic text no longer shows with its letters spaced apart. The sans and heading stacks try Arial and Helvetica Neue before the CJK faces. ([#994](https://github.com/botiverse/raft-design/pull/994))
+  - Why: Space Grotesk has no Cyrillic, so Russian and Ukrainian fell through to the CJK faces, whose Cyrillic glyphs are fullwidth (Hands #155, artin, #triage:83068786).
+  - Affects: only characters Space Grotesk lacks (Cyrillic, Greek and a few symbols such as arrows), on every page language. Latin and CJK text keeps its faces.
+  - Docs: https://raft-design.botiverse.build/foundations/typography/
+
+## [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

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/fonts.css

@@ -1,43 +1,46 @@
 @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap");
 
 /* Raft Design System: Space Grotesk is what people say, Space Mono is what
-   machines write. CJK falls back to PingFang / Source Han Sans; a Traditional
+   machines write. Arial / Helvetica Neue cover Cyrillic before the CJK faces,
+   whose Cyrillic glyphs can have wide advances. Keep system-ui after the CJK
+   families so it does not override their language-specific glyph shapes.
+   CJK falls back to PingFang / Source Han Sans; a Traditional
    Chinese, Japanese or Korean page (<html lang="zh-TW|ja|ko">) falls back to its
    own faces first, so characters keep Traditional or Japanese glyph shapes and
    Hangul a Korean face. */
 :where(:root) {
   --heading-font:
-    "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
-    system-ui, sans-serif;
+    "Space Grotesk", Arial, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans SC", system-ui, sans-serif;
   --sans-font:
-    "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
-    system-ui, sans-serif;
+    "Space Grotesk", Arial, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans SC", system-ui, sans-serif;
   --mono-font: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
 }
 
 :where(:root:lang(zh-TW), :root:lang(zh-HK), :root:lang(zh-MO), :root:lang(zh-Hant)) {
   --heading-font:
-    "Space Grotesk", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC",
-    "Noto Sans CJK TC", system-ui, sans-serif;
+    "Space Grotesk", Arial, "Helvetica Neue", "PingFang TC", "Microsoft JhengHei UI",
+    "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
   --sans-font:
-    "Space Grotesk", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC",
-    "Noto Sans CJK TC", system-ui, sans-serif;
+    "Space Grotesk", Arial, "Helvetica Neue", "PingFang TC", "Microsoft JhengHei UI",
+    "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
 }
 
 :where(:root:lang(ja)) {
   --heading-font:
-    "Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
-    "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
+    "Space Grotesk", Arial, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
+    "Yu Gothic UI", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
   --sans-font:
-    "Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
-    "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
+    "Space Grotesk", Arial, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
+    "Yu Gothic UI", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
 }
 
 :where(:root:lang(ko)) {
   --heading-font:
-    "Space Grotesk", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR",
-    system-ui, sans-serif;
+    "Space Grotesk", Arial, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic",
+    "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
   --sans-font:
-    "Space Grotesk", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR",
-    system-ui, sans-serif;
+    "Space Grotesk", Arial, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic",
+    "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif;
 }

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.62.0",
+  "version": "0.63.1",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",