@botiverse/raft-ui 0.54.0 → 0.55.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.55.0](https://github.com/botiverse/raft-design/compare/v0.54.0...v0.55.0) (2026-10-31)
+
+### Added
+
+- **MessageEmbed `interactive`:** a card that opens something as a whole (an Artifact card whose title link covers it) hovers with the subtle tier and presses with the medium tier, like a file card. Off by default, so action cards, forwarded bundles and quoted previews built on `MessageEmbed` don't change. ([#915](https://github.com/botiverse/raft-design/pull/915))
+
+### Fixed
+
+- **Sidebar section controls are 24px with a 14px icon again** (they had grown to 28px with an 18px icon on 2026-10-18), and reach a 44px hit area on a touch screen through a transparent `::after`. ([#916](https://github.com/botiverse/raft-design/pull/916))
+- **SaveStatus** draws its tick as `circle-check` at 12px, the success icon and size the icon rules give. ([#914](https://github.com/botiverse/raft-design/pull/914))
+
+### Design System
+
+- **Expand-type actions (Expand, Focus Mode, Open in New Page) are their own header buttons, left of ⋯, never in it** (stdrc, 2026-10-31). ([#917](https://github.com/botiverse/raft-design/pull/917), [#918](https://github.com/botiverse/raft-design/pull/918))
+  - Docs: https://raft-design.botiverse.build/components/panel/
+- **Raft Chat:** Drafts after Saved in the sidebar and on phone Home ([#904](https://github.com/botiverse/raft-design/pull/904)); Mark Thread as Unread in the thread's menus ([#853](https://github.com/botiverse/raft-design/pull/853)); English fixes and their zh sync ([#910](https://github.com/botiverse/raft-design/pull/910), [#912](https://github.com/botiverse/raft-design/pull/912)).
+
 ## [0.54.0](https://github.com/botiverse/raft-design/compare/v0.53.0...v0.54.0) (2026-10-30)
 
 ### Added

package/dist/components/message-embed/message-embed.d.mts

@@ -1,11 +1,19 @@
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-embed/message-embed.d.ts
 type DivProps = useRender.ComponentProps<"div">;
-export declare function MessageEmbed({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function MessageEmbed({ interactive, className, render, ...props }: MessageEmbedProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedHeader({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedContent({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function MessageEmbedFooter({ className, render, ...props }: DivProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export type MessageEmbedProps = DivProps;
+export type MessageEmbedProps = DivProps & {
+  /**
+   * The whole card opens something (a link or a button in it covers the card):
+   * it hovers with the subtle tier and presses with the medium tier, like a
+   * file card. Off for a card that only shows content.
+   * @default false
+   */
+  interactive?: boolean;
+};
 export type MessageEmbedHeaderProps = DivProps;
 export type MessageEmbedContentProps = DivProps;
 export type MessageEmbedFooterProps = DivProps;

package/dist/components/message-embed/message-embed.mjs

@@ -2,12 +2,16 @@ import { messageEmbed } from "./message-embed.recipe.mjs";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/message-embed/message-embed.tsx
-function MessageEmbed({ className, render, ...props }) {
+function MessageEmbed({ interactive = false, className, render, ...props }) {
 	const { root } = messageEmbed();
+	const defaultProps = {
+		"data-interactive": interactive ? "true" : void 0,
+		className: root({ className })
+	};
 	return useRender({
 		defaultTagName: "div",
 		render,
-		props: mergeProps({ className: root({ className }) }, props),
+		props: mergeProps(defaultProps, props),
 		state: { slot: "message-embed" }
 	});
 }

package/dist/components/message-embed/message-embed.recipe.mjs

@@ -4,7 +4,8 @@ const messageEmbed = tv({ slots: {
 	root: [
 		"group block min-w-0 text-left",
 		"rounded-container border border-line-hairline bg-layer-card",
-		"outline-none focus-visible:shadow-focus"
+		"outline-none focus-visible:shadow-focus",
+		"data-[interactive=true]:hover:overlay-subtle data-[interactive=true]:active:overlay-medium"
 	],
 	header: ["min-w-0", "px-3 py-2"],
 	content: ["min-w-0"],

package/dist/components/save-status/save-status.mjs

@@ -1,5 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
-import { Check } from "lucide-react";
+import { CircleCheck } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/save-status/save-status.tsx
 const saveStatus = tv({ slots: {
@@ -11,7 +11,7 @@ const saveStatus = tv({ slots: {
 	saved: [
 		"flex min-w-0 items-center gap-1",
 		"text-foreground-muted",
-		"[&>svg]:size-3.5 [&>svg]:shrink-0"
+		"[&>svg]:size-3 [&>svg]:shrink-0"
 	],
 	error: ["block wrap-anywhere", "text-danger-strong"]
 } });
@@ -42,7 +42,7 @@ function SaveStatusSaved({ className, children, ...props }) {
 		"aria-live": "polite",
 		className: saved({ className }),
 		...props,
-		children: [hasContent ? /* @__PURE__ */ jsx(Check, {
+		children: [hasContent ? /* @__PURE__ */ jsx(CircleCheck, {
 			"aria-hidden": "true",
 			"data-slot": "save-status-icon"
 		}) : null, children]

package/dist/components/sidebar/sidebar-section.recipe.mjs

@@ -11,7 +11,8 @@ const sidebarSectionRecipe = tv({ slots: {
 	sidebarSectionHeader: [
 		"flex items-center justify-between",
 		"group/section-header",
-		"my-0  h-auto gap-2 px-5 pt-4 pb-0"
+		"my-0 h-auto gap-2 px-5 pt-4 pb-0",
+		"not-pointer-fine:pb-1.5"
 	],
 	sidebarSectionDisclosure: [
 		"flex min-w-0 flex-1 items-center",
@@ -32,14 +33,18 @@ const sidebarSectionRecipe = tv({ slots: {
 	],
 	sidebarSectionTrailing: ["relative flex min-w-4.5 shrink-0 items-center justify-end"],
 	sidebarSectionControls: [
-		"flex shrink-0 items-center gap-1",
+		"flex shrink-0 items-center gap-1 not-pointer-fine:gap-5",
 		"pointer-events-none absolute top-1/2 right-0 -translate-y-1/2 opacity-0",
 		"not-pointer-fine:static not-pointer-fine:pointer-events-auto not-pointer-fine:translate-y-0 not-pointer-fine:opacity-100",
 		"pointer-fine:group-hover/section-header:pointer-events-auto pointer-fine:group-hover/section-header:opacity-100",
 		"pointer-fine:focus-within:pointer-events-auto pointer-fine:focus-within:opacity-100",
 		"pointer-fine:has-data-popup-open:pointer-events-auto pointer-fine:has-data-popup-open:opacity-100"
 	],
-	sidebarSectionControl: ["flex h-7 w-auto min-w-7 shrink-0 items-center justify-center p-0 -my-1.5", "[&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4"]
+	sidebarSectionControl: [
+		"relative flex h-6 w-auto min-w-6 shrink-0 items-center justify-center p-0 -my-1",
+		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+		"not-pointer-fine:after:absolute not-pointer-fine:after:inset-[-11px] not-pointer-fine:after:content-['']"
+	]
 } });
 //#endregion
 export { sidebarSectionRecipe };

package/package.json

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