@botiverse/raft-ui 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+## [0.24.0](https://github.com/botiverse/raft-design/compare/v0.23.1...v0.24.0) (2026-10-23)
+
+### Design System
+
+- **Phone popups 8px from each screen edge**: on a phone, a popup about as wide as the screen is the screen's width less 8px on each side, at most 480px, and stops 8px from the edge it is pushed against, measured from the screen's edge, not the safe area. Its width comes from the positioner's `--available-width`, not `100vw`. It applies to NotificationCenter. ([#737](https://github.com/botiverse/raft-design/pull/737))
+  - Why: popups that open from the same phone top bar sat at different insets and widths, so they didn't line up with each other or sit evenly between the screen's edges; every popup that wide now takes the server list's 8px inset.
+  - Affects: inset 8px from both screen edges; width `min(var(--available-width), 480px)`. The 480px cap only reaches a phone on its side.
+  - Docs: https://raft-design.botiverse.build/foundations/elevation/#popups
+- **Located: focus on the item is the inset ring, and a message is an article**: an item that a keyboard jump focuses draws the 2px inset ring in `foreground`, inside the item and with its corners, only after keyboard input, never the browser's outline. A message is announced as an article named by its sender and its time. It applies to MessageItem. ([#740](https://github.com/botiverse/raft-design/pull/740))
+  - Why: the browser's outline is drawn outside the item with its own rounded corners, so on a message it framed the transparent gap above the row and a scroller cut it off, and a screen reader landing on a message heard its text with no sender or time; the ring now sits inside the item and the row carries its own name.
+  - Affects: focus on a jumped-to item: browser outline → `inset-ring-2 inset-ring-foreground` after keyboard input.
+  - Docs: https://raft-design.botiverse.build/foundations/states/#located
+
+### Breaking Changes
+
+- **MessageItem**: the row is an `article` named by its sender and its time. When it holds a `MessageItemSender` or `MessageItemSenderButton`, a `MessageItemTime` or a `MessageItemContinuationTime`, the row gets `role="article"` and `aria-labelledby` pointing at them, in that order, and those parts get ids raft-ui generates (an `id` you pass is kept and is the one the row points at). A screen reader announces, for example, "Atlas 2:20 PM" before the text; a continuation row is named by its time. A row with none of these parts and no `aria-label` or `aria-labelledby` stays a plain `div`. ([#740](https://github.com/botiverse/raft-design/pull/740))
+  - Why: a screen reader landing on a message, after a jump or with its reading keys, read the text with no sender or time; the row now carries its own role and name.
+  - Affects: every row with a sender or time part, role none (`div`) → `article`, with `aria-labelledby`; the sender and time parts gain an `id`. Your own `role` or `aria-labelledby` on `MessageItem` or its `render` element is left as is; your own `aria-label` drops the generated `aria-labelledby`, and a role that takes no name (`none`, `presentation`, `generic`) gets none.
+  - Migrate: don't render `MessageItem` as an `li` or put rows in a `list`: `role="article"` replaces `listitem`, and a list may hold only list items. Remove the list role from the timeline, or pass `role="listitem"` on `MessageItem` to keep the old semantics. Update tests and selectors that find rows by role or expect no `role` on the row. When `render` is a function, pass `role`, `aria-label` and `aria-labelledby` on `MessageItem`, since a function's props can't be read. Don't give `MessageItemSenderButton` an `aria-label` of its own: the row would read that instead of the visible name.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#accessibility
+
+### Changed
+
+- **MessageItem**: a focused row (`tabIndex={-1}`, set by the caller when a keyboard jump lands on it) shows the 2px inset ring in `foreground`, square like its hover, after keyboard input, and shows its toolbar; it never shows the browser's outline. After a click, nothing shows. raft-ui still doesn't make the row focusable. ([#740](https://github.com/botiverse/raft-design/pull/740))
+  - Why: see Located: focus on the item is the inset ring, above.
+  - Affects: focused row: browser outline → `outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground`. While the toolbar shows, its card covers part of the ring's top edge at the right.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#states
+
+### Fixed
+
+- **NotificationCenterPopup** `viewport="mobile"`: the popup is the screen's width less 8px on each side, at most 480px, and sits 8px from both screen edges, though it hangs from a bell at the right, lined up with the server list under the same top bar. Pass `collisionPadding` to change the inset. On desktop it is unchanged: 380px with Base UI's default collision padding. ([#737](https://github.com/botiverse/raft-design/pull/737))
+  - Why: see Phone popups 8px from each screen edge, above.
+  - Affects: width `min(92vw, 360px)` → `min(var(--available-width), 480px)`; collision padding Base UI's default → 8px with `viewport="mobile"`.
+  - Docs: https://raft-design.botiverse.build/components/notification-center/#behavior
+
+## [0.23.1](https://github.com/botiverse/raft-design/compare/v0.23.0...v0.23.1) (2026-10-22)
+
+### Fixed
+
+- **MessageItemToolbar**: measures its width onto the row (`--mi-toolbar-width`) as the toolbar shows, on the row's `pointerenter` or `focusin`, instead of when the row mounts, so a message row mounts in one commit again and keeps no ResizeObserver of its own. The fade under the toolbar looks the same. ([#738](https://github.com/botiverse/raft-design/pull/738))
+  - Why: 0.23.0 kept the toolbar's element in React state and gave every toolbar its own ResizeObserver, and every message row renders a toolbar, so each row committed twice on mount and a long channel held one observer per message; only the toolbar that shows needs its width, so it is now measured then.
+  - Affects: per row on mount, 2 commits → 1 and 1 ResizeObserver → 0; while a toolbar shows (hover, focus inside the row, an open popup), one ResizeObserver shared by the page watches it; it lets go of a toolbar once the pointer and focus have left its row with no popup open (after a popup closed elsewhere, the next time any toolbar shows) and is disconnected when it watches none. On mount the row gets `--mi-toolbar-width: 164px` (five buttons' width), replaced by the measured width as the toolbar shows, so a toolbar that ever shows without a pointer or focus event on its row fades five buttons' width until it measures itself: too much for a smaller toolbar rather than too little. A row without a `MessageItemToolbar` still gets no width and masks nothing.
+  - Docs: https://raft-design.botiverse.build/components/message-item/#behavior
+
 ## [0.23.0](https://github.com/botiverse/raft-design/compare/v0.22.1...v0.23.0) (2026-10-22)
 
 ### Design System

package/dist/{inbox-item-B-y7PxZ_.mjs → inbox-item-BtxMxgoB.mjs}

@@ -3290,7 +3290,7 @@ const targets = /* @__PURE__ */ new Set();
 const byElement = /* @__PURE__ */ new WeakMap();
 const pending = /* @__PURE__ */ new Set();
 let frame = 0;
-let resizeObserver;
+let resizeObserver$1;
 let mutationObserver;
 let fontsListening = false;
 function flush() {
@@ -3322,7 +3322,7 @@ function ownerOf(node) {
 	}
 }
 function observers(view) {
-	if (!resizeObserver && "ResizeObserver" in view) resizeObserver = new view.ResizeObserver((entries) => {
+	if (!resizeObserver$1 && "ResizeObserver" in view) resizeObserver$1 = new view.ResizeObserver((entries) => {
 		for (const entry of entries) {
 			const target = byElement.get(entry.target);
 			if (target) scheduleMeasure(target);
@@ -3353,7 +3353,7 @@ function observeTruncation(target) {
 	targets.add(target);
 	for (const element of observed) {
 		byElement.set(element, target);
-		resizeObserver?.observe(element);
+		resizeObserver$1?.observe(element);
 	}
 	const watched = target.watch();
 	if (watched) {
@@ -3370,7 +3370,7 @@ function observeTruncation(target) {
 		pending.delete(target);
 		for (const element of observed) {
 			if (byElement.get(element) === target) byElement.delete(element);
-			resizeObserver?.unobserve(element);
+			resizeObserver$1?.unobserve(element);
 		}
 		if (watched && byElement.get(watched) === target) byElement.delete(watched);
 		if (targets.size === 0) {
@@ -3707,6 +3707,117 @@ const searchHit = [
 	"text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge"
 ];
 //#endregion
+//#region src/components/message-item/message-item-label.ts
+const MessageItemLabelContext = createContext(null);
+const MessageItemLabelProvider = MessageItemLabelContext.Provider;
+/**
+* The id of a sender or time part, registered with the MessageItem around it.
+* A consumer's own `id` wins and is the one registered. Outside a MessageItem
+* the part gets no id.
+*/
+function useMessageItemLabelId(part, id) {
+	const registry = useContext(MessageItemLabelContext);
+	const generatedId = useId();
+	const resolvedId = id ?? (registry ? generatedId : void 0);
+	useLayoutEffect(() => {
+		if (!registry || !resolvedId) return void 0;
+		return registry.register(part, resolvedId);
+	}, [
+		registry,
+		part,
+		resolvedId
+	]);
+	return resolvedId;
+}
+/** Roles that can't be named: on them the row writes no `aria-labelledby`. */
+const NAMELESS_ROLES = /* @__PURE__ */ new Set([
+	"none",
+	"presentation",
+	"generic"
+]);
+/**
+* The row's side: a stable registry for its parts and a ref for its element.
+* The row writes `role="article"` and `aria-labelledby` itself, and only once
+* something names it: a sender or time part, or the consumer's `aria-label` or
+* `aria-labelledby`. A row with none of them (a receipt card in the text
+* column, say) stays a plain `div`, not an article with no name.
+*
+* A consumer's `role` or `aria-labelledby` is rendered by React and left
+* alone. A consumer's `aria-label`, or a role that takes no name, turns the
+* parts' `aria-labelledby` off, since it would win over the label.
+*/
+function useMessageItemLabel(consumer) {
+	const consumerRef = useRef(consumer);
+	const [label] = useState(() => {
+		const parts = {
+			sender: [],
+			time: []
+		};
+		let element = null;
+		const write = (name, value) => {
+			if (!element) return;
+			if (!value) element.removeAttribute(name);
+			else if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+		};
+		const sync = () => {
+			const { role, ariaLabel, ariaLabelledBy } = consumerRef.current;
+			const ids = [...parts.sender, ...parts.time].join(" ");
+			if (role === void 0) write("role", ids !== "" || ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? "article" : "");
+			if (ariaLabelledBy === void 0) {
+				const nameable = role === void 0 || !NAMELESS_ROLES.has(role);
+				write("aria-labelledby", ariaLabel === void 0 && nameable ? ids : "");
+			}
+		};
+		const registry = { register(part, id) {
+			parts[part].push(id);
+			sync();
+			return () => {
+				const index = parts[part].indexOf(id);
+				if (index !== -1) parts[part].splice(index, 1);
+				sync();
+			};
+		} };
+		const ref = (node) => {
+			element = node;
+			sync();
+		};
+		return {
+			registry,
+			ref,
+			sync
+		};
+	});
+	const { role, ariaLabel, ariaLabelledBy } = consumer;
+	useLayoutEffect(() => {
+		consumerRef.current = {
+			role,
+			ariaLabel,
+			ariaLabelledBy
+		};
+		label.sync();
+	}, [
+		role,
+		ariaLabel,
+		ariaLabelledBy,
+		label
+	]);
+	return label;
+}
+/**
+* The consumer's role and name, from MessageItem's props and, where `render`
+* is an element, from that element's props, which Base UI merges over them.
+* A `render` function's props can't be read: pass them to MessageItem.
+*/
+function readConsumerLabel(props, render) {
+	const own = isValidElement(render) ? render.props : {};
+	const pick = (key) => key in own ? own[key] : props[key];
+	return {
+		role: pick("role"),
+		ariaLabel: pick("aria-label"),
+		ariaLabelledBy: pick("aria-labelledby")
+	};
+}
+//#endregion
 //#region src/components/message-item/message-item.recipe.ts
 const sender = [
 	"min-w-0 truncate",
@@ -3729,7 +3840,8 @@ const messageItem = tv$1({
 			"data-popup-open:[--mi-row-fill:var(--fill-subtle)] has-data-popup-open:[--mi-row-fill:var(--fill-subtle)]",
 			"has-data-[slot=message-item-search-match]:[--mi-row-fill:var(--info-soft)] has-data-[slot=message-item-search-match]:hover:[--mi-row-fill:var(--info-soft)]",
 			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:[--mi-row-fill:var(--info-soft)]",
-			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:[--mi-row-fill:var(--info-soft)]"
+			"has-[[data-slot=message-multi-select-checkbox][data-checked]]:hover:[--mi-row-fill:var(--info-soft)]",
+			"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
 		],
 		gutter: ["relative shrink-0 self-stretch", "w-[35px]"],
 		avatarSlot: [
@@ -3818,20 +3930,36 @@ const messageItem = tv$1({
 });
 //#endregion
 //#region src/components/message-item/message-item-root.tsx
+/**
+* One message: an `article` named by its sender and its time
+* (`aria-labelledby` pointing at `MessageItemSender` or
+* `MessageItemSenderButton`, then `MessageItemTime` or
+* `MessageItemContinuationTime`). A row with neither, and no `aria-label` or
+* `aria-labelledby`, is a plain `div`. Pass `role`, `aria-label` or
+* `aria-labelledby` on MessageItem or on a `render` element to override
+* either; a `render` function's props can't be read, so pass them on
+* MessageItem then.
+*/
 function MessageItem({ className, compact, located = false, render, ...props }) {
 	const { root } = messageItem({ compact });
+	const label = useMessageItemLabel(readConsumerLabel(props, render));
 	const defaultProps = {
 		"data-message-item": "",
 		"data-compact": compact ? "true" : void 0,
 		"data-located": located ? "" : void 0,
 		className: root({ className })
 	};
-	return useRender({
+	const element = useRender({
 		defaultTagName: "div",
 		render,
+		ref: label.ref,
 		props: mergeProps(defaultProps, props),
 		state: { slot: "message-item" }
 	});
+	return /* @__PURE__ */ jsx(MessageItemLabelProvider, {
+		value: label.registry,
+		children: element
+	});
 }
 //#endregion
 //#region src/components/message-item/message-item-gutter.tsx
@@ -3856,9 +3984,12 @@ function MessageItemAvatarSlot({ className, render, ...props }) {
 	});
 }
 /** Left-gutter hover clock for continuation rows, a `<time>`: pass the moment in `dateTime`. Show the hour and minute only, in the person's 12h/24h format, with no AM/PM (`6:35`, `18:35`). */
-function MessageItemContinuationTime({ className, render, ...props }) {
+function MessageItemContinuationTime({ className, id, render, ...props }) {
 	const { continuationTime } = messageItem();
-	const defaultProps = { className: continuationTime({ className }) };
+	const defaultProps = {
+		id: useMessageItemLabelId("time", id),
+		className: continuationTime({ className })
+	};
 	return useRender({
 		defaultTagName: "time",
 		render,
@@ -3971,9 +4102,12 @@ function MessageItemSenderGroup({ className, render, ...props }) {
 		state: { slot: "message-item-sender-group" }
 	});
 }
-function MessageItemSender({ className, render, ...props }) {
+function MessageItemSender({ className, id, render, ...props }) {
 	const { sender } = messageItem();
-	const defaultProps = { className: sender({ className }) };
+	const defaultProps = {
+		id: useMessageItemLabelId("sender", id),
+		className: sender({ className })
+	};
 	return useRender({
 		defaultTagName: "span",
 		render,
@@ -3981,10 +4115,11 @@ function MessageItemSender({ className, render, ...props }) {
 		state: { slot: "message-item-sender" }
 	});
 }
-function MessageItemSenderButton({ className, render, ...props }) {
+function MessageItemSenderButton({ className, id, render, ...props }) {
 	const { senderButton } = messageItem();
 	const defaultProps = {
 		type: "button",
+		id: useMessageItemLabelId("sender", id),
 		className: senderButton({ className })
 	};
 	return useRender({
@@ -4018,9 +4153,12 @@ function MessageItemMeta({ className, render, ...props }) {
 * The message's time, right after the sender. A `<time>`: pass the moment in
 * `dateTime` (ISO 8601) and the full date and time as its tooltip.
 */
-function MessageItemTime({ className, render, ...props }) {
+function MessageItemTime({ className, id, render, ...props }) {
 	const { time } = messageItem();
-	const defaultProps = { className: time({ className }) };
+	const defaultProps = {
+		id: useMessageItemLabelId("time", id),
+		className: time({ className })
+	};
 	return useRender({
 		defaultTagName: "time",
 		render,
@@ -4106,38 +4244,113 @@ function MessageItemDelegatedAvatar({ className, deleted, ...props }) {
 }
 //#endregion
 //#region src/components/message-item/message-item-toolbar.tsx
+const TOOLBAR_WIDTH = "--mi-toolbar-width";
+/**
+* Five buttons' width (5 × 28px, 4 × 4px apart, 4px from the frame each
+* side): what the row fades until the toolbar has measured itself.
+*/
+const FALLBACK_WIDTH = "164px";
+/**
+* Toolbars watched while their row shows them, each with its row, and the one
+* ResizeObserver that watches them: it exists only while a toolbar shows.
+*/
+const watched = /* @__PURE__ */ new Map();
+let resizeObserver = null;
+function writeWidth(toolbar, row) {
+	row.style.setProperty(TOOLBAR_WIDTH, `${toolbar.offsetWidth}px`);
+}
+/** The recipe's has-data-popup-open / data-popup-open on the row. */
+function hasOpenPopup(row) {
+	return row.hasAttribute("data-popup-open") || row.querySelector("[data-popup-open]") !== null;
+}
+function resized(entries) {
+	for (const entry of entries) {
+		const target = entry.target;
+		const row = watched.get(target);
+		if (row) writeWidth(target, row);
+	}
+}
+function unwatch(toolbar) {
+	if (!watched.delete(toolbar)) return;
+	resizeObserver?.unobserve(toolbar);
+	if (watched.size > 0) return;
+	resizeObserver?.disconnect();
+	resizeObserver = null;
+}
+function watch(toolbar, row) {
+	if (watched.has(toolbar)) return;
+	writeWidth(toolbar, row);
+	if (typeof ResizeObserver === "undefined") return;
+	for (const [other, otherRow] of watched) if (!otherRow.matches(":hover, :focus-within") && !hasOpenPopup(otherRow)) unwatch(other);
+	resizeObserver ??= new ResizeObserver(resized);
+	watched.set(toolbar, row);
+	resizeObserver.observe(toolbar);
+}
 /**
 * Tells the row how wide the toolbar is (`--mi-toolbar-width` on the row), so
 * the header can fade out its end under the toolbar while it shows: the
 * header keeps no room for the toolbar (message-item.md, "The hover
 * toolbar"), and the toolbar's card only reaches part of the sender line.
-* Measured with a ResizeObserver, so a toolbar with more or fewer actions
-* covers exactly its own width; nothing on the row moves.
+* A toolbar with more or fewer actions covers exactly its own width; nothing
+* on the row moves.
+*
+* Measured when the toolbar is about to show, not when it mounts: every row
+* of a timeline renders a toolbar, and the width matters only on the row the
+* pointer or focus is on. So mounting costs no React state (one commit per
+* row) and no ResizeObserver per row. The row's `pointerenter` and `focusin`
+* write the width in the input event's own task, before the frame that
+* applies the row's :hover / :focus-within styles, so the first frame that
+* shows the toolbar already masks its width; the toolbar is laid out at rest
+* (only its opacity is 0), so its `offsetWidth` is right then. A popup opens
+* from the toolbar only after a hover or a focus, so it finds the width
+* written. While the row shows the toolbar, one ResizeObserver shared by all
+* rows watches it, so a button added while it shows re-measures; it lets go
+* when the pointer and focus have left the row and no popup is open, and is
+* disconnected once no toolbar shows.
+*
+* On attach the row gets five buttons' width (164px) as a fallback: a plain
+* DOM write, no commit and no read, so a show that ever came without a
+* pointerenter or focusin (a row that appears under a resting pointer) fades
+* too much rather than leaving letters beside the card. Rows without a
+* toolbar never get the property, so their header's gradient stays invalid
+* and masks nothing.
+*
+* A stable callback ref with a cleanup (React 19), merged with the caller's
+* ref by `useRender`.
 */
-function useToolbarWidthOnRow(element) {
-	useLayoutEffect(() => {
-		const row = element?.closest("[data-message-item]");
-		if (!(element instanceof HTMLElement) || !row) return;
-		const write = () => row.style.setProperty("--mi-toolbar-width", `${element.offsetWidth}px`);
-		write();
-		if (typeof ResizeObserver === "undefined") return () => row.style.removeProperty("--mi-toolbar-width");
-		const resize = new ResizeObserver(write);
-		resize.observe(element);
-		return () => {
-			resize.disconnect();
-			row.style.removeProperty("--mi-toolbar-width");
-		};
-	}, [element]);
+function measureWidthOnShow(toolbar) {
+	const row = toolbar?.closest("[data-message-item]");
+	if (!toolbar || !row) return void 0;
+	const show = () => watch(toolbar, row);
+	const pointerLeft = () => {
+		if (!row.matches(":focus-within") && !hasOpenPopup(row)) unwatch(toolbar);
+	};
+	const focusLeft = (event) => {
+		const next = event.relatedTarget instanceof Node ? event.relatedTarget : null;
+		if (row.contains(next) || row.matches(":hover") || hasOpenPopup(row)) return;
+		unwatch(toolbar);
+	};
+	row.style.setProperty(TOOLBAR_WIDTH, FALLBACK_WIDTH);
+	row.addEventListener("pointerenter", show);
+	row.addEventListener("focusin", show);
+	row.addEventListener("pointerleave", pointerLeft);
+	row.addEventListener("focusout", focusLeft);
+	return () => {
+		row.removeEventListener("pointerenter", show);
+		row.removeEventListener("focusin", show);
+		row.removeEventListener("pointerleave", pointerLeft);
+		row.removeEventListener("focusout", focusLeft);
+		unwatch(toolbar);
+		row.style.removeProperty(TOOLBAR_WIDTH);
+	};
 }
 function MessageItemToolbar({ className, render, ref, ...props }) {
 	const { toolbar } = messageItem();
-	const [element, setElement] = useState(null);
-	useToolbarWidthOnRow(element);
 	const defaultProps = { className: toolbar({ className }) };
 	return useRender({
 		defaultTagName: "div",
 		render,
-		ref: ref ? [ref, setElement] : setElement,
+		ref: ref ? [ref, measureWidthOnShow] : measureWidthOnShow,
 		props: mergeProps(defaultProps, props),
 		state: { slot: "message-item-toolbar" }
 	});

package/dist/{inbox-item-ChGeZBFb.d.mts → inbox-item-CiTYKTly.d.mts}

@@ -1271,7 +1271,17 @@ type MessageItemProps = useRender.ComponentProps<"div"> & Pick<MessageItemVarian
    */
   located?: boolean;
 };
-declare function MessageItem({ className, compact, located, render, ...props }: MessageItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * One message: an `article` named by its sender and its time
+ * (`aria-labelledby` pointing at `MessageItemSender` or
+ * `MessageItemSenderButton`, then `MessageItemTime` or
+ * `MessageItemContinuationTime`). A row with neither, and no `aria-label` or
+ * `aria-labelledby`, is a plain `div`. Pass `role`, `aria-label` or
+ * `aria-labelledby` on MessageItem or on a `render` element to override
+ * either; a `render` function's props can't be read, so pass them on
+ * MessageItem then.
+ */
+declare function MessageItem({ className, compact, located, render, ...props }: MessageItemProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/message-item/message-item-gutter.d.ts
 type MessageItemGutterProps = useRender.ComponentProps<"div">;
@@ -1280,7 +1290,7 @@ type MessageItemAvatarSlotProps = useRender.ComponentProps<"div">;
 declare function MessageItemAvatarSlot({ className, render, ...props }: MessageItemAvatarSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemContinuationTimeProps = useRender.ComponentProps<"time">;
 /** Left-gutter hover clock for continuation rows, a `<time>`: pass the moment in `dateTime`. Show the hour and minute only, in the person's 12h/24h format, with no AM/PM (`6:35`, `18:35`). */
-declare function MessageItemContinuationTime({ className, render, ...props }: MessageItemContinuationTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemContinuationTime({ className, id, render, ...props }: MessageItemContinuationTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
 //#region src/components/message-item/message-item-content.d.ts
 type MessageItemContentProps = useRender.ComponentProps<"div">;
@@ -1315,9 +1325,9 @@ type MessageItemSenderGroupProps = useRender.ComponentProps<"span">;
  */
 declare function MessageItemSenderGroup({ className, render, ...props }: MessageItemSenderGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemSenderProps = useRender.ComponentProps<"span">;
-declare function MessageItemSender({ className, render, ...props }: MessageItemSenderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemSender({ className, id, render, ...props }: MessageItemSenderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemSenderButtonProps = useRender.ComponentProps<"button">;
-declare function MessageItemSenderButton({ className, render, ...props }: MessageItemSenderButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemSenderButton({ className, id, render, ...props }: MessageItemSenderButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemSenderBadgesProps = useRender.ComponentProps<"span">;
 declare function MessageItemSenderBadges({ className, render, ...props }: MessageItemSenderBadgesProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemMetaProps = useRender.ComponentProps<"span">;
@@ -1327,7 +1337,7 @@ type MessageItemTimeProps = useRender.ComponentProps<"time">;
  * The message's time, right after the sender. A `<time>`: pass the moment in
  * `dateTime` (ISO 8601) and the full date and time as its tooltip.
  */
-declare function MessageItemTime({ className, render, ...props }: MessageItemTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function MessageItemTime({ className, id, render, ...props }: MessageItemTimeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type MessageItemInlineStatusProps = useRender.ComponentProps<"span">;
 declare function MessageItemInlineStatus({ className, render, ...props }: MessageItemInlineStatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { $ as MessageListNoticeProps, $a as DropdownMenuCheckboxItemIndicator, $n as MessageItemToolbarButtonProps, $o as ListRowChevron, $r as AvatarGroup, $s as DialogTriggerProps, $t as MessageReferenceLabelProps, A as InboxItemTimestamp, Aa as PopoverHeader, Ai as PreviewCardProps, An as MessageReactionTooltipContent, Ao as DropdownMenuShortcutProps, Ar as MessageItemContentProps, As as DialogContentProps, At as MessageQuotedPreviewUnavailable, Ba as PopoverTitleProps, Bi as TooltipPortal, Bn as MessageReactionTooltipSeparator, Bo as KbdProps, Br as MessageItemAvatarSlotProps, Bs as DialogNavProps, Bt as MessageMultiSelectCheckboxProps, C as InboxItemProps, Ci as PreviewCardHeaderProps, Cn as MessageReactionPickerContentProps, Co as DropdownMenuRadioItem, Cr as MessageItemTime, Ct as MessageQuotedPreviewProps, D as InboxItemSenderProps, Da as PopoverContentProps, Di as PreviewCardPopupProps, Dn as MessageReactionQuickButtonProps, Do as DropdownMenuSeparator, Dr as MessageItemBody, Ds as DialogClose, Dt as MessageQuotedPreviewThreadProps, E as InboxItemSender, Ea as PopoverContent, Ei as PreviewCardPopup, En as MessageReactionQuickButton, Eo as DropdownMenuRadioItemProps, Er as MessageItemAttachmentsProps, Es as DialogBodyProps, Et as MessageQuotedPreviewThread, F as InboxItemTrailingProps, Fa as PopoverPortalProps, Fi as PreviewCardTrigger, Fn as MessageReactionTooltipNameProps, Fo as DropdownMenuTrigger, Fr as MessageItemFooter, Ft as MessageTextSelectionToolbarProps, Ga as MobileNavItem, Gi as TooltipTrigger, Gn as MessageItemBadgeSeparatorProps, Go as Checkbox, Gr as MessageItem, Gs as DialogProps, Gt as MessageMultiSelectToolbarProps, Ha as PopoverTriggerProps, Hi as TooltipProps, Hn as MessageItemBadge, Ho as BadgeProps, Hr as MessageItemContinuationTimeProps, Hs as DialogOverlayProps, Ht as MessageMultiSelectToolbar, I as InboxItemTrigger, Ia as PopoverProps, Ii as PreviewCardTriggerProps, In as MessageReactionTooltipNameText, Io as DropdownMenuTriggerProps, Ir as MessageItemFooterProps, Is as DialogFooterProps, It as MessageTextSelectionToolbarSeparator, J as MessageListEndFade, Ja as MobileNavLabelProps, Jn as MessageItemReadReceiptProps, Jo as ListRow, Jr as AvatarBadge, Js as DialogSurface, K as MessageListDateDivider, Ka as MobileNavItemProps, Ki as TooltipTriggerProps, Kn as MessageItemBadgeStatus, Ko as CheckboxProps, Kr as MessageItemProps, Kt as MessageReferenceChip, L as InboxItemTriggerProps, La as PopoverSeparator, Li as Tooltip, Ln as MessageReactionTooltipNameTextProps, Lo as Kbd, Lr as MessageItemSearchMatch, Ls as DialogHeader, Lt as MessageTextSelectionToolbarSeparatorProps, M as InboxItemTitle, Ma as PopoverPopup, Mi as PreviewCardSeparatorProps, Mn as MessageReactionTooltipMeta, Mo as DropdownMenuSubmenuProps, Mr as MessageItemEditedProps, Ms as DialogDescriptionProps, Mt as MessageTextSelectionToolbar, N as InboxItemTitleProps, Na as PopoverPopupProps, Ni as PreviewCardTitle, Nn as MessageReactionTooltipMetaProps, No as DropdownMenuSubmenuTrigger, Nr as MessageItemEmbedded, Ns as DialogFooter, Nt as MessageTextSelectionToolbarButton, O as InboxItemSubtitle, Oa as PopoverDescription, Oi as PreviewCardPortal, On as MessageReactionQuickRow, Oo as DropdownMenuSeparatorProps, Or as MessageItemBodyProps, Os as DialogCloseProps, Ot as MessageQuotedPreviewTimestamp, P as InboxItemTrailing, Pa as PopoverPortal, Pi as PreviewCardTitleProps, Pn as MessageReactionTooltipName, Po as DropdownMenuSubmenuTriggerProps, Pr as MessageItemEmbeddedProps, Pt as MessageTextSelectionToolbarButtonProps, Q as MessageListNotice, Qa as DropdownMenuCheckboxItem, Qn as MessageItemToolbarButton, Qo as ListRowBottomProps, Qr as AvatarFallbackProps, Qs as DialogTrigger, Qt as MessageReferenceLabel, Ra as PopoverSeparatorProps, Ri as TooltipContent, Rn as MessageReactionTooltipNames, Ro as KbdGroup, Rr as MessageItemSearchMatchProps, Rs as DialogHeaderProps, Rt as MessageMultiSelect, S as InboxItemMetadataProps, Si as PreviewCardHeader, Sn as MessageReactionPickerContent, So as DropdownMenuRadioGroupProps, Sr as MessageItemSenderProps, St as MessageQuotedPreviewLoadingProps, T as InboxItemSelectionProps, Ta as PopoverCloseProps, Tn as MessageReactionPickerStaticProps, To as DropdownMenuRadioItemIndicatorProps, Tr as MessageItemAttachments, Ts as DialogBody, Tt as MessageQuotedPreviewTextProps, Ua as PopoverViewport, Ui as TooltipProvider, Un as MessageItemBadgeProps, Uo as CheckboxIndicator, Ur as MessageItemGutter, Us as DialogPortal, Ut as MessageMultiSelectToolbarActions, Va as PopoverTrigger, Vi as TooltipPortalProps, Vn as MessageReactionTooltipSeparatorProps, Vo as Badge, Vr as MessageItemContinuationTime, Vs as DialogOverlay, Vt as MessageMultiSelectProps, Wa as PopoverViewportProps, Wi as TooltipProviderProps, Wn as MessageItemBadgeSeparator, Wo as CheckboxIndicatorProps, Wr as MessageItemGutterProps, Ws as DialogPortalProps, Wt as MessageMultiSelectToolbarActionsProps, X as MessageListHistoryLimited, Xa as MobileNavRootProps, Xn as MessageItemSavedIndicatorProps, Xo as ListRowBodyProps, Xr as AvatarBadgeProps, Xs as DialogTitle, Xt as MessageReferenceIndicator, Y as MessageListEndFadeProps, Ya as MobileNavRoot, Yn as MessageItemSavedIndicator, Yo as ListRowBody, Yr as AvatarBadgeOffset, Ys as DialogSurfaceProps, Z as MessageListHistoryLimitedProps, Za as DropdownMenu, Zn as MessageItemToolbar, Zo as ListRowBottom, Zr as AvatarFallback, Zs as DialogTitleProps, Zt as MessageReferenceIndicatorProps, _ as InboxItemMarks, _i as PreviewCardDescriptionProps, _n as MessageReactionCountProps, _o as DropdownMenuPopupProps, _r as MessageItemSenderBadgesProps, _s as TextLink, _t as MessageQuotedPreviewContent, a as InboxItemBodyProps, ac as DeprecatedButtonSize, ai as AvatarProps, an as MessageReferenceSuffixProps, ao as DropdownMenuFooterProps, as as ListRowIcon, at as MessageQuotedPreviewAttachments, b as InboxItemMessageProps, ba as PopoverBackdrop, bn as MessageReactionGlyph, bo as DropdownMenuProps, br as MessageItemSenderGroup, bt as MessageQuotedPreviewHeaderProps, c as InboxItemContext, cc as DataAttributes$1, cn as MessageReferenceUnavailable, co as DropdownMenuItemCountProps, cs as ListRowMetaProps, d as InboxItemHeading, di as PreviewCardArrowProps, dn as MessageReferenceTextVariant, do as DropdownMenuItemProps, dr as MessageItemInlineStatus, ds as ListRowTitleProps, dt as MessageQuotedPreviewAuthorMetaProps, ec as PanelAction, ei as AvatarGroupCount, en as MessageReferencePending, eo as DropdownMenuCheckboxItemIndicatorProps, er as MessageItemToolbarProps, es as ListRowChevronProps, et as MessageList, f as InboxItemHeadingProps, fn as MessageReactionAddButton, fo as DropdownMenuLabel, fr as MessageItemInlineStatusProps, fs as ListRowTop, ft as MessageQuotedPreviewAuthorName, g as InboxItemLeadingProps, gi as PreviewCardDescription, gn as MessageReactionCount, go as DropdownMenuPopup, gr as MessageItemSenderBadges, gs as RowTone, gt as MessageQuotedPreviewChannelProps, h as InboxItemLeading, ha as Popover, hi as PreviewCardContentProps, hn as MessageReactionChipProps, hr as MessageItemSender, hs as ListRowValueProps, ht as MessageQuotedPreviewChannel, i as InboxItemBody, ic as ButtonSize, ii as AvatarImageProps, in as MessageReferenceSuffix, io as DropdownMenuFooter, is as ListRowGroupProps, it as MessageQuotedPreviewAttachmentProps, j as InboxItemTimestampProps, ja as PopoverHeaderProps, ji as PreviewCardSeparator, jn as MessageReactionTooltipContentProps, jo as DropdownMenuSubmenu, jr as MessageItemEdited, js as DialogDescription, jt as MessageQuotedPreviewUnavailableProps, k as InboxItemSubtitleProps, ka as PopoverDescriptionProps, ki as PreviewCardPortalProps, kn as MessageReactionQuickRowProps, ko as DropdownMenuShortcut, kr as MessageItemContent, ks as DialogContent, kt as MessageQuotedPreviewTimestampProps, l as InboxItemContextProps, lc as StyledProps, ln as MessageReferenceUnavailableProps, lo as DropdownMenuItemLabel, lr as MessageItemHeader, ls as ListRowProps, m as InboxItemHoverTargetProps, mi as PreviewCardContent, mn as MessageReactionChip, mr as MessageItemMetaProps, ms as ListRowValue, mt as MessageQuotedPreviewAuthorProps, n as InboxItemActions, nc as Button, ni as AvatarGroupProps, no as DropdownMenuContent, ns as ListRowDescriptionProps, nt as MessageQuotedPreview, o as InboxItemContent, oc as buttonVariants, oi as AvatarSize, on as MessageReferenceText, oo as DropdownMenuItem, os as ListRowIconProps, ot as MessageQuotedPreviewAttachmentsProps, p as InboxItemHoverTarget, pn as MessageReactionAddButtonProps, po as DropdownMenuLabelProps, pr as MessageItemMeta, ps as ListRowTopProps, pt as MessageQuotedPreviewAuthorNameProps, q as MessageListDateDividerProps, qa as MobileNavLabel, qn as MessageItemReadReceipt, qo as Presence, qr as Avatar, qt as MessageReferenceChipProps, r as InboxItemActionsProps, rc as ButtonProps, ri as AvatarImage, ro as DropdownMenuContentProps, rs as ListRowGroup, rt as MessageQuotedPreviewAttachment, s as InboxItemContentProps, sc as VariantProps, si as PreviewCard, sn as MessageReferenceTextProps, so as DropdownMenuItemCount, ss as ListRowMeta, st as MessageQuotedPreviewAuthor, t as InboxItem, tc as PanelActionProps, ti as AvatarGroupCountProps, tn as MessageReferencePendingProps, to as DropdownMenuCheckboxItemProps, ts as ListRowDescription, tt as MessageListProps, u as InboxItemDensity, ui as PreviewCardArrow, un as MessageReferenceChipVariant, uo as DropdownMenuItemLabelProps, ur as MessageItemHeaderProps, us as ListRowTitle, ut as MessageQuotedPreviewAuthorMeta, v as InboxItemMarksProps, va as PopoverArrow, vn as MessageReactionErrorIndicator, vo as DropdownMenuPortal, vr as MessageItemSenderButton, vs as TextLinkProps, vt as MessageQuotedPreviewContentProps, w as InboxItemSelection, wa as PopoverClose, wn as MessageReactionPickerStatic, wo as DropdownMenuRadioItemIndicator, wr as MessageItemTimeProps, ws as Dialog, wt as MessageQuotedPreviewText, x as InboxItemMetadata, xa as PopoverBackdropProps, xn as MessageReactionGlyphProps, xo as DropdownMenuRadioGroup, xr as MessageItemSenderGroupProps, xt as MessageQuotedPreviewLoading, y as InboxItemMessage, ya as PopoverArrowProps, yn as MessageReactionErrorIndicatorProps, yo as DropdownMenuPortalProps, yr as MessageItemSenderButtonProps, ys as textLinkVariants, yt as MessageQuotedPreviewHeader, za as PopoverTitle, zi as TooltipContentProps, zn as MessageReactionTooltipNamesProps, zo as KbdGroupProps, zr as MessageItemAvatarSlot, zs as DialogNav, zt as MessageMultiSelectCheckbox } from "./inbox-item-ChGeZBFb.mjs";
+import { $ as MessageListNoticeProps, $a as DropdownMenuCheckboxItemIndicator, $n as MessageItemToolbarButtonProps, $o as ListRowChevron, $r as AvatarGroup, $s as DialogTriggerProps, $t as MessageReferenceLabelProps, A as InboxItemTimestamp, Aa as PopoverHeader, Ai as PreviewCardProps, An as MessageReactionTooltipContent, Ao as DropdownMenuShortcutProps, Ar as MessageItemContentProps, As as DialogContentProps, At as MessageQuotedPreviewUnavailable, Ba as PopoverTitleProps, Bi as TooltipPortal, Bn as MessageReactionTooltipSeparator, Bo as KbdProps, Br as MessageItemAvatarSlotProps, Bs as DialogNavProps, Bt as MessageMultiSelectCheckboxProps, C as InboxItemProps, Ci as PreviewCardHeaderProps, Cn as MessageReactionPickerContentProps, Co as DropdownMenuRadioItem, Cr as MessageItemTime, Ct as MessageQuotedPreviewProps, D as InboxItemSenderProps, Da as PopoverContentProps, Di as PreviewCardPopupProps, Dn as MessageReactionQuickButtonProps, Do as DropdownMenuSeparator, Dr as MessageItemBody, Ds as DialogClose, Dt as MessageQuotedPreviewThreadProps, E as InboxItemSender, Ea as PopoverContent, Ei as PreviewCardPopup, En as MessageReactionQuickButton, Eo as DropdownMenuRadioItemProps, Er as MessageItemAttachmentsProps, Es as DialogBodyProps, Et as MessageQuotedPreviewThread, F as InboxItemTrailingProps, Fa as PopoverPortalProps, Fi as PreviewCardTrigger, Fn as MessageReactionTooltipNameProps, Fo as DropdownMenuTrigger, Fr as MessageItemFooter, Ft as MessageTextSelectionToolbarProps, Ga as MobileNavItem, Gi as TooltipTrigger, Gn as MessageItemBadgeSeparatorProps, Go as Checkbox, Gr as MessageItem, Gs as DialogProps, Gt as MessageMultiSelectToolbarProps, Ha as PopoverTriggerProps, Hi as TooltipProps, Hn as MessageItemBadge, Ho as BadgeProps, Hr as MessageItemContinuationTimeProps, Hs as DialogOverlayProps, Ht as MessageMultiSelectToolbar, I as InboxItemTrigger, Ia as PopoverProps, Ii as PreviewCardTriggerProps, In as MessageReactionTooltipNameText, Io as DropdownMenuTriggerProps, Ir as MessageItemFooterProps, Is as DialogFooterProps, It as MessageTextSelectionToolbarSeparator, J as MessageListEndFade, Ja as MobileNavLabelProps, Jn as MessageItemReadReceiptProps, Jo as ListRow, Jr as AvatarBadge, Js as DialogSurface, K as MessageListDateDivider, Ka as MobileNavItemProps, Ki as TooltipTriggerProps, Kn as MessageItemBadgeStatus, Ko as CheckboxProps, Kr as MessageItemProps, Kt as MessageReferenceChip, L as InboxItemTriggerProps, La as PopoverSeparator, Li as Tooltip, Ln as MessageReactionTooltipNameTextProps, Lo as Kbd, Lr as MessageItemSearchMatch, Ls as DialogHeader, Lt as MessageTextSelectionToolbarSeparatorProps, M as InboxItemTitle, Ma as PopoverPopup, Mi as PreviewCardSeparatorProps, Mn as MessageReactionTooltipMeta, Mo as DropdownMenuSubmenuProps, Mr as MessageItemEditedProps, Ms as DialogDescriptionProps, Mt as MessageTextSelectionToolbar, N as InboxItemTitleProps, Na as PopoverPopupProps, Ni as PreviewCardTitle, Nn as MessageReactionTooltipMetaProps, No as DropdownMenuSubmenuTrigger, Nr as MessageItemEmbedded, Ns as DialogFooter, Nt as MessageTextSelectionToolbarButton, O as InboxItemSubtitle, Oa as PopoverDescription, Oi as PreviewCardPortal, On as MessageReactionQuickRow, Oo as DropdownMenuSeparatorProps, Or as MessageItemBodyProps, Os as DialogCloseProps, Ot as MessageQuotedPreviewTimestamp, P as InboxItemTrailing, Pa as PopoverPortal, Pi as PreviewCardTitleProps, Pn as MessageReactionTooltipName, Po as DropdownMenuSubmenuTriggerProps, Pr as MessageItemEmbeddedProps, Pt as MessageTextSelectionToolbarButtonProps, Q as MessageListNotice, Qa as DropdownMenuCheckboxItem, Qn as MessageItemToolbarButton, Qo as ListRowBottomProps, Qr as AvatarFallbackProps, Qs as DialogTrigger, Qt as MessageReferenceLabel, Ra as PopoverSeparatorProps, Ri as TooltipContent, Rn as MessageReactionTooltipNames, Ro as KbdGroup, Rr as MessageItemSearchMatchProps, Rs as DialogHeaderProps, Rt as MessageMultiSelect, S as InboxItemMetadataProps, Si as PreviewCardHeader, Sn as MessageReactionPickerContent, So as DropdownMenuRadioGroupProps, Sr as MessageItemSenderProps, St as MessageQuotedPreviewLoadingProps, T as InboxItemSelectionProps, Ta as PopoverCloseProps, Tn as MessageReactionPickerStaticProps, To as DropdownMenuRadioItemIndicatorProps, Tr as MessageItemAttachments, Ts as DialogBody, Tt as MessageQuotedPreviewTextProps, Ua as PopoverViewport, Ui as TooltipProvider, Un as MessageItemBadgeProps, Uo as CheckboxIndicator, Ur as MessageItemGutter, Us as DialogPortal, Ut as MessageMultiSelectToolbarActions, Va as PopoverTrigger, Vi as TooltipPortalProps, Vn as MessageReactionTooltipSeparatorProps, Vo as Badge, Vr as MessageItemContinuationTime, Vs as DialogOverlay, Vt as MessageMultiSelectProps, Wa as PopoverViewportProps, Wi as TooltipProviderProps, Wn as MessageItemBadgeSeparator, Wo as CheckboxIndicatorProps, Wr as MessageItemGutterProps, Ws as DialogPortalProps, Wt as MessageMultiSelectToolbarActionsProps, X as MessageListHistoryLimited, Xa as MobileNavRootProps, Xn as MessageItemSavedIndicatorProps, Xo as ListRowBodyProps, Xr as AvatarBadgeProps, Xs as DialogTitle, Xt as MessageReferenceIndicator, Y as MessageListEndFadeProps, Ya as MobileNavRoot, Yn as MessageItemSavedIndicator, Yo as ListRowBody, Yr as AvatarBadgeOffset, Ys as DialogSurfaceProps, Z as MessageListHistoryLimitedProps, Za as DropdownMenu, Zn as MessageItemToolbar, Zo as ListRowBottom, Zr as AvatarFallback, Zs as DialogTitleProps, Zt as MessageReferenceIndicatorProps, _ as InboxItemMarks, _i as PreviewCardDescriptionProps, _n as MessageReactionCountProps, _o as DropdownMenuPopupProps, _r as MessageItemSenderBadgesProps, _s as TextLink, _t as MessageQuotedPreviewContent, a as InboxItemBodyProps, ac as DeprecatedButtonSize, ai as AvatarProps, an as MessageReferenceSuffixProps, ao as DropdownMenuFooterProps, as as ListRowIcon, at as MessageQuotedPreviewAttachments, b as InboxItemMessageProps, ba as PopoverBackdrop, bn as MessageReactionGlyph, bo as DropdownMenuProps, br as MessageItemSenderGroup, bt as MessageQuotedPreviewHeaderProps, c as InboxItemContext, cc as DataAttributes$1, cn as MessageReferenceUnavailable, co as DropdownMenuItemCountProps, cs as ListRowMetaProps, d as InboxItemHeading, di as PreviewCardArrowProps, dn as MessageReferenceTextVariant, do as DropdownMenuItemProps, dr as MessageItemInlineStatus, ds as ListRowTitleProps, dt as MessageQuotedPreviewAuthorMetaProps, ec as PanelAction, ei as AvatarGroupCount, en as MessageReferencePending, eo as DropdownMenuCheckboxItemIndicatorProps, er as MessageItemToolbarProps, es as ListRowChevronProps, et as MessageList, f as InboxItemHeadingProps, fn as MessageReactionAddButton, fo as DropdownMenuLabel, fr as MessageItemInlineStatusProps, fs as ListRowTop, ft as MessageQuotedPreviewAuthorName, g as InboxItemLeadingProps, gi as PreviewCardDescription, gn as MessageReactionCount, go as DropdownMenuPopup, gr as MessageItemSenderBadges, gs as RowTone, gt as MessageQuotedPreviewChannelProps, h as InboxItemLeading, ha as Popover, hi as PreviewCardContentProps, hn as MessageReactionChipProps, hr as MessageItemSender, hs as ListRowValueProps, ht as MessageQuotedPreviewChannel, i as InboxItemBody, ic as ButtonSize, ii as AvatarImageProps, in as MessageReferenceSuffix, io as DropdownMenuFooter, is as ListRowGroupProps, it as MessageQuotedPreviewAttachmentProps, j as InboxItemTimestampProps, ja as PopoverHeaderProps, ji as PreviewCardSeparator, jn as MessageReactionTooltipContentProps, jo as DropdownMenuSubmenu, jr as MessageItemEdited, js as DialogDescription, jt as MessageQuotedPreviewUnavailableProps, k as InboxItemSubtitleProps, ka as PopoverDescriptionProps, ki as PreviewCardPortalProps, kn as MessageReactionQuickRowProps, ko as DropdownMenuShortcut, kr as MessageItemContent, ks as DialogContent, kt as MessageQuotedPreviewTimestampProps, l as InboxItemContextProps, lc as StyledProps, ln as MessageReferenceUnavailableProps, lo as DropdownMenuItemLabel, lr as MessageItemHeader, ls as ListRowProps, m as InboxItemHoverTargetProps, mi as PreviewCardContent, mn as MessageReactionChip, mr as MessageItemMetaProps, ms as ListRowValue, mt as MessageQuotedPreviewAuthorProps, n as InboxItemActions, nc as Button, ni as AvatarGroupProps, no as DropdownMenuContent, ns as ListRowDescriptionProps, nt as MessageQuotedPreview, o as InboxItemContent, oc as buttonVariants, oi as AvatarSize, on as MessageReferenceText, oo as DropdownMenuItem, os as ListRowIconProps, ot as MessageQuotedPreviewAttachmentsProps, p as InboxItemHoverTarget, pn as MessageReactionAddButtonProps, po as DropdownMenuLabelProps, pr as MessageItemMeta, ps as ListRowTopProps, pt as MessageQuotedPreviewAuthorNameProps, q as MessageListDateDividerProps, qa as MobileNavLabel, qn as MessageItemReadReceipt, qo as Presence, qr as Avatar, qt as MessageReferenceChipProps, r as InboxItemActionsProps, rc as ButtonProps, ri as AvatarImage, ro as DropdownMenuContentProps, rs as ListRowGroup, rt as MessageQuotedPreviewAttachment, s as InboxItemContentProps, sc as VariantProps, si as PreviewCard, sn as MessageReferenceTextProps, so as DropdownMenuItemCount, ss as ListRowMeta, st as MessageQuotedPreviewAuthor, t as InboxItem, tc as PanelActionProps, ti as AvatarGroupCountProps, tn as MessageReferencePendingProps, to as DropdownMenuCheckboxItemProps, ts as ListRowDescription, tt as MessageListProps, u as InboxItemDensity, ui as PreviewCardArrow, un as MessageReferenceChipVariant, uo as DropdownMenuItemLabelProps, ur as MessageItemHeaderProps, us as ListRowTitle, ut as MessageQuotedPreviewAuthorMeta, v as InboxItemMarksProps, va as PopoverArrow, vn as MessageReactionErrorIndicator, vo as DropdownMenuPortal, vr as MessageItemSenderButton, vs as TextLinkProps, vt as MessageQuotedPreviewContentProps, w as InboxItemSelection, wa as PopoverClose, wn as MessageReactionPickerStatic, wo as DropdownMenuRadioItemIndicator, wr as MessageItemTimeProps, ws as Dialog, wt as MessageQuotedPreviewText, x as InboxItemMetadata, xa as PopoverBackdropProps, xn as MessageReactionGlyphProps, xo as DropdownMenuRadioGroup, xr as MessageItemSenderGroupProps, xt as MessageQuotedPreviewLoading, y as InboxItemMessage, ya as PopoverArrowProps, yn as MessageReactionErrorIndicatorProps, yo as DropdownMenuPortalProps, yr as MessageItemSenderButtonProps, ys as textLinkVariants, yt as MessageQuotedPreviewHeader, za as PopoverTitle, zi as TooltipContentProps, zn as MessageReactionTooltipNamesProps, zo as KbdGroupProps, zr as MessageItemAvatarSlot, zs as DialogNav, zt as MessageMultiSelectCheckbox } from "./inbox-item-CiTYKTly.mjs";
 import { cn } from "./cn.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, CompositionEventHandler, ElementType, FocusEventHandler, FormEventHandler, HTMLAttributes, KeyboardEventHandler, PointerEvent, ReactElement, ReactNode, Ref, RefObject, SVGProps } from "react";

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageMultiSelect, $n as PopoverTitle, $r as ListRowTitle, $t as MessageItemAvatarSlot, A as MessageQuotedPreview, Ai as DialogSheetReset, Ar as PanelBody, At as MessageItemReadReceipt, B as MessageQuotedPreviewLoading, Bi as ThemeStateContext, Br as ScrollAreaThumb, Bt as MessageItemMeta, Ci as DialogSurface, Cn as PreviewCardHeader, Cr as DropdownMenuShortcut, Ct as MessageReactionTooltipMeta, D as MessageListHistoryLimited, Di as panelToggleAction, Dn as PreviewCardSeparator, Dr as Kbd, Dt as MessageReactionTooltipSeparator, E as MessageListEndFade, Ei as PanelAction, En as PreviewCardPortal, Er as DropdownMenuTrigger, Et as MessageReactionTooltipNames, F as MessageQuotedPreviewAuthorMeta, Fr as PanelSection, G as MessageEmbed, Gi as headEdgePull, Gr as ListRow, Gt as MessageItemTime, H as MessageQuotedPreviewThread, Hi as stackedActions, Hr as Checkbox, Ht as MessageItemSenderBadges, I as MessageQuotedPreviewAuthorName, Ii as useParentOverlayKind, Ir as ScrollArea, J as MessageEmbedHeader, Jn as PopoverDescription, Jr as ListRowChevron, Jt as MessageItemContent, K as MessageEmbedContent, Ki as headEdges, Kn as PopoverClose, Kr as ListRowBody, Kt as MessageItemAttachments, L as MessageQuotedPreviewChannel, Li as withOverlayLayer, Lr as ScrollAreaContent, M as MessageQuotedPreviewAttachments, Mi as buttonVariants, Mr as PanelHeaderRoot, Mt as MessageItemToolbar, N as MessageQuotedPreviewAuthor, Ni as Spinner, Nr as PanelScrollContent, Nt as MessageItemToolbarButton, O as MessageListNotice, Oi as TextLink, On as PreviewCardTitle, Or as KbdGroup, Ot as MessageItemBadge, Pi as defaultNativeButton, Pr as PanelScrollViewport, Q as MessageTextSelectionToolbarSeparator, Qn as PopoverSeparator, Qr as ListRowMeta, Qt as MessageItemSearchMatch, R as MessageQuotedPreviewContent, Ri as useThemeScopeProps, Rr as ScrollAreaCorner, Rt as MessageItemHeader, Sr as DropdownMenuSeparator, St as MessageReactionTooltipContent, T as MessageListDateDivider, Ti as DialogTrigger, Tn as PreviewCardPopup, Tr as DropdownMenuSubmenuTrigger, Tt as MessageReactionTooltipNameText, U as MessageQuotedPreviewTimestamp, Ui as useStackedActions, Un as PopoverArrow, Ur as CheckboxIndicator, Ut as MessageItemSenderButton, V as MessageQuotedPreviewText, Vi as tv, Vn as Popover, Vr as ScrollAreaViewport, Vt as MessageItemSender, W as MessageQuotedPreviewUnavailable, Wi as controlIconInset, Wn as PopoverBackdrop, Wr as PRESENCE_COLOR, Wt as MessageItemSenderGroup, X as MessageTextSelectionToolbar, Xn as PopoverPopup, Xr as ListRowGroup, Xt as MessageItemEmbedded, Y as messageEmbed, Yn as PopoverHeader, Yr as ListRowDescription, Yt as MessageItemEdited, Z as MessageTextSelectionToolbarButton, Zn as PopoverPortal, Zr as ListRowIcon, Zt as MessageItemFooter, _ as InboxItemTrailing, _n as PreviewCardArrow, _r as DropdownMenuPopup, _t as MessageReactionGlyph, a as InboxItemContext, ai as TooltipProvider, an as AvatarBadge, ar as MobileNavLabel, at as MessageReferenceIndicator, b as Skeleton, bi as DialogOverlay, bn as PreviewCardDescription, br as DropdownMenuRadioItem, bt as MessageReactionQuickButton, c as InboxItemLeading, cn as AvatarGroupCount, cr as DropdownMenuCheckboxItem, d as InboxItemMetadata, di as Dialog, dr as DropdownMenuFooter, dt as MessageReferenceUnavailable, ei as ListRowTop, en as MessageItemContinuationTime, er as PopoverTrigger, et as MessageMultiSelectCheckbox, f as InboxItemSelection, fi as DialogBody, fr as DropdownMenuItem, ft as inlineChip, g as InboxItemTitle, gi as DialogFooter, gt as MessageReactionErrorIndicator, h as InboxItemTimestamp, hi as DialogDescription, hn as PreviewCard, hr as DropdownMenuLabel, ht as MessageReactionCount, i as InboxItemContent, ii as TooltipPortal, in as Avatar, ir as MobileNavItem, j as MessageQuotedPreviewAttachment, ji as Button, jr as PanelFooter, jt as MessageItemSavedIndicator, k as MessageList, ki as textLinkVariants, kn as PreviewCardTrigger, kr as Panel, kt as MessageItemBadgeSeparator, l as InboxItemMarks, ln as AvatarImage, lr as DropdownMenuCheckboxItemIndicator, lt as MessageReferenceSuffix, m as InboxItemSubtitle, mi as DialogContent, mr as DropdownMenuItemLabel, mt as MessageReactionChip, n as InboxItemActions, ni as Tooltip, nn as MessageItem, nr as useHoldThenMoveTouchSensor, nt as MessageMultiSelectToolbarActions, o as InboxItemHeading, oi as TooltipTrigger, on as AvatarFallback, or as MobileNavRoot, ot as MessageReferenceLabel, p as InboxItemSender, pi as DialogClose, pr as DropdownMenuItemCount, pt as MessageReactionAddButton, q as MessageEmbedFooter, qi as decisionWidth, qn as PopoverContent, qr as ListRowBottom, qt as MessageItemBody, r as InboxItemBody, ri as TooltipContent, rn as searchHit, rr as useMouseOnlyPointerSensor, rt as MessageReferenceChip, s as InboxItemHoverTarget, si as Badge, sn as AvatarGroup, sr as DropdownMenu, st as MessageReferencePending, t as InboxItem, ti as ListRowValue, tn as MessageItemGutter, tr as PopoverViewport, tt as MessageMultiSelectToolbar, u as InboxItemMessage, ui as useMobileViewport, un as useOverflowTitle, ur as DropdownMenuContent, ut as MessageReferenceText, v as InboxItemTrigger, vi as DialogHeader, vr as DropdownMenuPortal, vt as MessageReactionPickerContent, wi as DialogTitle, wr as DropdownMenuSubmenu, wt as MessageReactionTooltipName, xi as DialogPortal, xr as DropdownMenuRadioItemIndicator, xt as MessageReactionQuickRow, yi as DialogNav, yn as PreviewCardContent, yr as DropdownMenuRadioGroup, yt as MessageReactionPickerStatic, z as MessageQuotedPreviewHeader, zi as useTheme, zr as ScrollAreaScrollbar, zt as MessageItemInlineStatus } from "./inbox-item-B-y7PxZ_.mjs";
+import { $ as MessageMultiSelect, $n as PopoverTitle, $r as ListRowTitle, $t as MessageItemAvatarSlot, A as MessageQuotedPreview, Ai as DialogSheetReset, Ar as PanelBody, At as MessageItemReadReceipt, B as MessageQuotedPreviewLoading, Bi as ThemeStateContext, Br as ScrollAreaThumb, Bt as MessageItemMeta, Ci as DialogSurface, Cn as PreviewCardHeader, Cr as DropdownMenuShortcut, Ct as MessageReactionTooltipMeta, D as MessageListHistoryLimited, Di as panelToggleAction, Dn as PreviewCardSeparator, Dr as Kbd, Dt as MessageReactionTooltipSeparator, E as MessageListEndFade, Ei as PanelAction, En as PreviewCardPortal, Er as DropdownMenuTrigger, Et as MessageReactionTooltipNames, F as MessageQuotedPreviewAuthorMeta, Fr as PanelSection, G as MessageEmbed, Gi as headEdgePull, Gr as ListRow, Gt as MessageItemTime, H as MessageQuotedPreviewThread, Hi as stackedActions, Hr as Checkbox, Ht as MessageItemSenderBadges, I as MessageQuotedPreviewAuthorName, Ii as useParentOverlayKind, Ir as ScrollArea, J as MessageEmbedHeader, Jn as PopoverDescription, Jr as ListRowChevron, Jt as MessageItemContent, K as MessageEmbedContent, Ki as headEdges, Kn as PopoverClose, Kr as ListRowBody, Kt as MessageItemAttachments, L as MessageQuotedPreviewChannel, Li as withOverlayLayer, Lr as ScrollAreaContent, M as MessageQuotedPreviewAttachments, Mi as buttonVariants, Mr as PanelHeaderRoot, Mt as MessageItemToolbar, N as MessageQuotedPreviewAuthor, Ni as Spinner, Nr as PanelScrollContent, Nt as MessageItemToolbarButton, O as MessageListNotice, Oi as TextLink, On as PreviewCardTitle, Or as KbdGroup, Ot as MessageItemBadge, Pi as defaultNativeButton, Pr as PanelScrollViewport, Q as MessageTextSelectionToolbarSeparator, Qn as PopoverSeparator, Qr as ListRowMeta, Qt as MessageItemSearchMatch, R as MessageQuotedPreviewContent, Ri as useThemeScopeProps, Rr as ScrollAreaCorner, Rt as MessageItemHeader, Sr as DropdownMenuSeparator, St as MessageReactionTooltipContent, T as MessageListDateDivider, Ti as DialogTrigger, Tn as PreviewCardPopup, Tr as DropdownMenuSubmenuTrigger, Tt as MessageReactionTooltipNameText, U as MessageQuotedPreviewTimestamp, Ui as useStackedActions, Un as PopoverArrow, Ur as CheckboxIndicator, Ut as MessageItemSenderButton, V as MessageQuotedPreviewText, Vi as tv, Vn as Popover, Vr as ScrollAreaViewport, Vt as MessageItemSender, W as MessageQuotedPreviewUnavailable, Wi as controlIconInset, Wn as PopoverBackdrop, Wr as PRESENCE_COLOR, Wt as MessageItemSenderGroup, X as MessageTextSelectionToolbar, Xn as PopoverPopup, Xr as ListRowGroup, Xt as MessageItemEmbedded, Y as messageEmbed, Yn as PopoverHeader, Yr as ListRowDescription, Yt as MessageItemEdited, Z as MessageTextSelectionToolbarButton, Zn as PopoverPortal, Zr as ListRowIcon, Zt as MessageItemFooter, _ as InboxItemTrailing, _n as PreviewCardArrow, _r as DropdownMenuPopup, _t as MessageReactionGlyph, a as InboxItemContext, ai as TooltipProvider, an as AvatarBadge, ar as MobileNavLabel, at as MessageReferenceIndicator, b as Skeleton, bi as DialogOverlay, bn as PreviewCardDescription, br as DropdownMenuRadioItem, bt as MessageReactionQuickButton, c as InboxItemLeading, cn as AvatarGroupCount, cr as DropdownMenuCheckboxItem, d as InboxItemMetadata, di as Dialog, dr as DropdownMenuFooter, dt as MessageReferenceUnavailable, ei as ListRowTop, en as MessageItemContinuationTime, er as PopoverTrigger, et as MessageMultiSelectCheckbox, f as InboxItemSelection, fi as DialogBody, fr as DropdownMenuItem, ft as inlineChip, g as InboxItemTitle, gi as DialogFooter, gt as MessageReactionErrorIndicator, h as InboxItemTimestamp, hi as DialogDescription, hn as PreviewCard, hr as DropdownMenuLabel, ht as MessageReactionCount, i as InboxItemContent, ii as TooltipPortal, in as Avatar, ir as MobileNavItem, j as MessageQuotedPreviewAttachment, ji as Button, jr as PanelFooter, jt as MessageItemSavedIndicator, k as MessageList, ki as textLinkVariants, kn as PreviewCardTrigger, kr as Panel, kt as MessageItemBadgeSeparator, l as InboxItemMarks, ln as AvatarImage, lr as DropdownMenuCheckboxItemIndicator, lt as MessageReferenceSuffix, m as InboxItemSubtitle, mi as DialogContent, mr as DropdownMenuItemLabel, mt as MessageReactionChip, n as InboxItemActions, ni as Tooltip, nn as MessageItem, nr as useHoldThenMoveTouchSensor, nt as MessageMultiSelectToolbarActions, o as InboxItemHeading, oi as TooltipTrigger, on as AvatarFallback, or as MobileNavRoot, ot as MessageReferenceLabel, p as InboxItemSender, pi as DialogClose, pr as DropdownMenuItemCount, pt as MessageReactionAddButton, q as MessageEmbedFooter, qi as decisionWidth, qn as PopoverContent, qr as ListRowBottom, qt as MessageItemBody, r as InboxItemBody, ri as TooltipContent, rn as searchHit, rr as useMouseOnlyPointerSensor, rt as MessageReferenceChip, s as InboxItemHoverTarget, si as Badge, sn as AvatarGroup, sr as DropdownMenu, st as MessageReferencePending, t as InboxItem, ti as ListRowValue, tn as MessageItemGutter, tr as PopoverViewport, tt as MessageMultiSelectToolbar, u as InboxItemMessage, ui as useMobileViewport, un as useOverflowTitle, ur as DropdownMenuContent, ut as MessageReferenceText, v as InboxItemTrigger, vi as DialogHeader, vr as DropdownMenuPortal, vt as MessageReactionPickerContent, wi as DialogTitle, wr as DropdownMenuSubmenu, wt as MessageReactionTooltipName, xi as DialogPortal, xr as DropdownMenuRadioItemIndicator, xt as MessageReactionQuickRow, yi as DialogNav, yn as PreviewCardContent, yr as DropdownMenuRadioGroup, yt as MessageReactionPickerStatic, z as MessageQuotedPreviewHeader, zi as useTheme, zr as ScrollAreaScrollbar, zt as MessageItemInlineStatus } from "./inbox-item-BtxMxgoB.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, Copy, FileText, Image, Info, TriangleAlert, Upload, X, Zap } from "lucide-react";
 import { Children, cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -9799,7 +9799,7 @@ const notificationCenter = tv({
 	variants: {
 		viewport: {
 			desktop: { popup: "w-[380px]" },
-			mobile: { popup: "w-[min(92vw,360px)]" }
+			mobile: { popup: "w-[min(var(--available-width,calc(100vw-16px)),480px)]" }
 		},
 		size: {
 			sm: { popup: "h-56" },
@@ -9828,6 +9828,13 @@ const notificationCenter = tv({
 		status: "info"
 	}
 });
+/**
+* On a phone the popup is as wide as the screen less 8px on each side, and the
+* collision padding stops it 8px from the edge it is pushed against, so it
+* lines up with the server list under the same top bar
+* (design/foundations/elevation.md#popups).
+*/
+const PHONE_INSET = 8;
 function NotificationCenter({ modal = false, ...props }) {
 	return /* @__PURE__ */ jsx(Popover$1.Root, {
 		modal,
@@ -9876,7 +9883,7 @@ function NotificationCenterPopup({ viewport = "desktop", size = "md", className,
 			arrowPadding,
 			collisionAvoidance,
 			collisionBoundary,
-			collisionPadding,
+			collisionPadding: collisionPadding ?? (viewport === "mobile" ? PHONE_INSET : void 0),
 			disableAnchorTracking,
 			positionMethod,
 			side,

package/dist/wip.d.mts

@@ -1,4 +1,4 @@
-import { $i as MobileNavServerPopoverDestinationProps, As as DialogContentProps, B as MessageListJumpPill, C as InboxItemProps, Ca as PopoverBodyProps, Cs as DialogSheetContentProps, Ds as DialogClose, Fs as DialogFooterNoteProps, G as MessageListJumpPillProps, H as MessageListJumpPillDismissProps, Ji as MobileNavServerItemProps, Jt as MessageReferenceIcon, Ks as DialogSheetBack, Ps as DialogFooterNote, Qi as MobileNavServerPopoverDestination, Qs as DialogTrigger, R as MessageListJumpControls, Sa as PopoverBody, Ss as DialogSheetContent, Ti as PreviewCardMetaProps, U as MessageListJumpPillGroup, V as MessageListJumpPillDismiss, W as MessageListJumpPillGroupProps, Xi as MobileNavServerPopoverContent, Yi as MobileNavServerPopover, Yt as MessageReferenceIconProps, Zi as MobileNavServerPopoverContentProps, Zs as DialogTitleProps, _a as PopoverActionsProps, aa as MobileNavServerPopoverListProps, ar as MessageItemDelegatedByButtonProps, bi as PreviewCardFooter, bs as DialogCommit, ca as MobileNavServerPopoverRowBody, cc as DataAttributes, ci as PreviewCardActions, cr as MessageItemDelegatedByProps, ct as MessageQuotedPreviewAuthorDelegatedBy, da as MobileNavServerPopoverRowDescriptionProps, ea as MobileNavServerPopoverDestinations, fa as MobileNavServerPopoverRowLabel, fi as PreviewCardBody, ga as PopoverActions, ho as DropdownMenuLinkItemProps, ia as MobileNavServerPopoverList, ir as MessageItemDelegatedByButton, la as MobileNavServerPopoverRowBodyProps, lc as StyledProps, li as PreviewCardActionsProps, ls as ListRowProps, lt as MessageQuotedPreviewAuthorDelegatedByProps, ma as MobileNavServerPopoverRowProps, mo as DropdownMenuLinkItem, na as MobileNavServerPopoverGroup, nn as MessageReferenceReadMark, nr as MessageItemDelegatedAvatarProps, oa as MobileNavServerPopoverProps, or as MessageItemDelegatedByName, pa as MobileNavServerPopoverRowLabelProps, pi as PreviewCardBodyProps, qi as MobileNavServerItem, qs as DialogSheetBackProps, ra as MobileNavServerPopoverGroupProps, rc as ButtonProps, rn as MessageReferenceReadMarkProps, rr as MessageItemDelegatedBy, sa as MobileNavServerPopoverRow, sc as VariantProps, sr as MessageItemDelegatedByNameProps, ta as MobileNavServerPopoverDestinationsProps, tr as MessageItemDelegatedAvatar, u as InboxItemDensity, ua as MobileNavServerPopoverRowDescription, vi as PreviewCardEyebrow, vs as TextLinkProps, wi as PreviewCardMeta, ws as Dialog, xi as PreviewCardFooterProps, xs as DialogCommitProps, yi as PreviewCardEyebrowProps, z as MessageListJumpControlsProps } from "./inbox-item-ChGeZBFb.mjs";
+import { $i as MobileNavServerPopoverDestinationProps, As as DialogContentProps, B as MessageListJumpPill, C as InboxItemProps, Ca as PopoverBodyProps, Cs as DialogSheetContentProps, Ds as DialogClose, Fs as DialogFooterNoteProps, G as MessageListJumpPillProps, H as MessageListJumpPillDismissProps, Ji as MobileNavServerItemProps, Jt as MessageReferenceIcon, Ks as DialogSheetBack, Ps as DialogFooterNote, Qi as MobileNavServerPopoverDestination, Qs as DialogTrigger, R as MessageListJumpControls, Sa as PopoverBody, Ss as DialogSheetContent, Ti as PreviewCardMetaProps, U as MessageListJumpPillGroup, V as MessageListJumpPillDismiss, W as MessageListJumpPillGroupProps, Xi as MobileNavServerPopoverContent, Yi as MobileNavServerPopover, Yt as MessageReferenceIconProps, Zi as MobileNavServerPopoverContentProps, Zs as DialogTitleProps, _a as PopoverActionsProps, aa as MobileNavServerPopoverListProps, ar as MessageItemDelegatedByButtonProps, bi as PreviewCardFooter, bs as DialogCommit, ca as MobileNavServerPopoverRowBody, cc as DataAttributes, ci as PreviewCardActions, cr as MessageItemDelegatedByProps, ct as MessageQuotedPreviewAuthorDelegatedBy, da as MobileNavServerPopoverRowDescriptionProps, ea as MobileNavServerPopoverDestinations, fa as MobileNavServerPopoverRowLabel, fi as PreviewCardBody, ga as PopoverActions, ho as DropdownMenuLinkItemProps, ia as MobileNavServerPopoverList, ir as MessageItemDelegatedByButton, la as MobileNavServerPopoverRowBodyProps, lc as StyledProps, li as PreviewCardActionsProps, ls as ListRowProps, lt as MessageQuotedPreviewAuthorDelegatedByProps, ma as MobileNavServerPopoverRowProps, mo as DropdownMenuLinkItem, na as MobileNavServerPopoverGroup, nn as MessageReferenceReadMark, nr as MessageItemDelegatedAvatarProps, oa as MobileNavServerPopoverProps, or as MessageItemDelegatedByName, pa as MobileNavServerPopoverRowLabelProps, pi as PreviewCardBodyProps, qi as MobileNavServerItem, qs as DialogSheetBackProps, ra as MobileNavServerPopoverGroupProps, rc as ButtonProps, rn as MessageReferenceReadMarkProps, rr as MessageItemDelegatedBy, sa as MobileNavServerPopoverRow, sc as VariantProps, sr as MessageItemDelegatedByNameProps, ta as MobileNavServerPopoverDestinationsProps, tr as MessageItemDelegatedAvatar, u as InboxItemDensity, ua as MobileNavServerPopoverRowDescription, vi as PreviewCardEyebrow, vs as TextLinkProps, wi as PreviewCardMeta, ws as Dialog, xi as PreviewCardFooterProps, xs as DialogCommitProps, yi as PreviewCardEyebrowProps, z as MessageListJumpControlsProps } from "./inbox-item-CiTYKTly.mjs";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, PointerEvent, ReactNode, RefObject } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { $r as ListRowTitle, An as MobileNavServerItem, Bn as MobileNavServerPopoverRowLabel, C as MessageListJumpPillDismiss, Fi as OverlayLayerProvider, Fn as MobileNavServerPopoverGroup, Ft as MessageItemDelegatedBy, Gn as PopoverBody, Gr as ListRow, Hn as PopoverActions, Ii as useParentOverlayKind, In as MobileNavServerPopoverList, It as MessageItemDelegatedByButton, Kr as ListRowBody, Ln as MobileNavServerPopoverRow, Lt as MessageItemDelegatedByName, Mn as MobileNavServerPopoverContent, Nn as MobileNavServerPopoverDestination, Oi as TextLink, P as MessageQuotedPreviewAuthorDelegatedBy, Pi as defaultNativeButton, Pn as MobileNavServerPopoverDestinations, Pt as MessageItemDelegatedAvatar, Qr as ListRowMeta, Ri as useThemeScopeProps, Rn as MobileNavServerPopoverRowBody, S as MessageListJumpPill, Si as DialogSheetBack, Sn as PreviewCardFooter, Ti as DialogTrigger, Vi as tv, Yr as ListRowDescription, _ as InboxItemTrailing, _i as DialogFooterNote, a as InboxItemContext, b as Skeleton, c as InboxItemLeading, ci as DialogCommit, ct as MessageReferenceReadMark, di as Dialog, dn as measureContent, ei as ListRowTop, fn as measureElement, g as InboxItemTitle, gn as PreviewCardActions, gr as DropdownMenuLinkItem, h as InboxItemTimestamp, i as InboxItemContent, it as MessageReferenceIcon, ji as Button$1, jn as MobileNavServerPopover, li as DialogSheetContent, mi as DialogContent, mn as readNow, ni as Tooltip, nr as useHoldThenMoveTouchSensor, o as InboxItemHeading, oi as TooltipTrigger, pi as DialogClose, pn as observeTruncation, qr as ListRowBottom, r as InboxItemBody, ri as TooltipContent, t as InboxItem, un as useOverflowTitle, vn as PreviewCardBody, w as MessageListJumpPillGroup, wi as DialogTitle, wn as PreviewCardMeta, x as MessageListJumpControls, xn as PreviewCardEyebrow, y as inboxItem, zi as useTheme, zn as MobileNavServerPopoverRowDescription } from "./inbox-item-B-y7PxZ_.mjs";
+import { $r as ListRowTitle, An as MobileNavServerItem, Bn as MobileNavServerPopoverRowLabel, C as MessageListJumpPillDismiss, Fi as OverlayLayerProvider, Fn as MobileNavServerPopoverGroup, Ft as MessageItemDelegatedBy, Gn as PopoverBody, Gr as ListRow, Hn as PopoverActions, Ii as useParentOverlayKind, In as MobileNavServerPopoverList, It as MessageItemDelegatedByButton, Kr as ListRowBody, Ln as MobileNavServerPopoverRow, Lt as MessageItemDelegatedByName, Mn as MobileNavServerPopoverContent, Nn as MobileNavServerPopoverDestination, Oi as TextLink, P as MessageQuotedPreviewAuthorDelegatedBy, Pi as defaultNativeButton, Pn as MobileNavServerPopoverDestinations, Pt as MessageItemDelegatedAvatar, Qr as ListRowMeta, Ri as useThemeScopeProps, Rn as MobileNavServerPopoverRowBody, S as MessageListJumpPill, Si as DialogSheetBack, Sn as PreviewCardFooter, Ti as DialogTrigger, Vi as tv, Yr as ListRowDescription, _ as InboxItemTrailing, _i as DialogFooterNote, a as InboxItemContext, b as Skeleton, c as InboxItemLeading, ci as DialogCommit, ct as MessageReferenceReadMark, di as Dialog, dn as measureContent, ei as ListRowTop, fn as measureElement, g as InboxItemTitle, gn as PreviewCardActions, gr as DropdownMenuLinkItem, h as InboxItemTimestamp, i as InboxItemContent, it as MessageReferenceIcon, ji as Button$1, jn as MobileNavServerPopover, li as DialogSheetContent, mi as DialogContent, mn as readNow, ni as Tooltip, nr as useHoldThenMoveTouchSensor, o as InboxItemHeading, oi as TooltipTrigger, pi as DialogClose, pn as observeTruncation, qr as ListRowBottom, r as InboxItemBody, ri as TooltipContent, t as InboxItem, un as useOverflowTitle, vn as PreviewCardBody, w as MessageListJumpPillGroup, wi as DialogTitle, wn as PreviewCardMeta, x as MessageListJumpControls, xn as PreviewCardEyebrow, y as inboxItem, zi as useTheme, zn as MobileNavServerPopoverRowDescription } from "./inbox-item-BtxMxgoB.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
 import { createContext, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

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