@botiverse/raft-ui 0.63.1 → 0.65.0

package/CHANGELOG.md

@@ -1,3 +1,54 @@
+## [0.65.0](https://github.com/botiverse/raft-design/compare/v0.64.0...v0.65.0) (2026-11-05)
+
+### Added
+
+- **MessageItemTrailing** (`@botiverse/raft-ui/wip`): a slot that ends a message's last line, the body's last child, such as the faces of the agents that read it. It takes no column: the last line keeps room for it and the text wraps under it only when that line is full; under a code block, a table or an image it has a line of its own.
+  - Why: the read faces kept a 63-77px column beside every message (stdrc, 2026-11-05).
+  - Docs: https://raft-design.botiverse.build/components/message-item/#trailing
+
+### Changed
+
+- **Size chain tokens**: control, row, option and header heights are now one chain of variables in `tokens.json` and `foundation.css`, built on the existing `--control-height`, `--control-hit-inset` and `--control-embedded-size`; components read them instead of fixed sizes. New: `--row-height`, `--option-height`, `--control-air`, `--field-gap`, `--header-air`, `--header-height`, `--header-height-short`, `--bar-button-size`, `--bar-button-radius`, `--frame-item-height`, `--switch-width`, `--switch-height`, `--settings-row-inset`, `--section-gap`, `--page-inset`, `--rail-width`, `--rail-item`.
+  - Why: the desktop sizing review (stdrc, sizing option A, 2026-11-04) set one size per role; a component that hard-coded 32 or 56 drifted from the rest.
+  - Affects: nothing visible on its own; #973 and #974 set the desktop and touch values.
+  - Docs: https://raft-design.botiverse.build/foundations/spacing/
+- **Desktop density** (with a mouse from 768px; touch is unchanged): one 34px control height for buttons, fields, selects, tabs, menu items and rows; 44px heads (34 + 2 × 5); 28px bar buttons with a 44px hit area; content 16px from a surface's edges (`--page-inset`, `--surface-inset`), 12px under a head (`--page-top`); settings cards 20 inside, 16 apart; sidebar rows and titles on two axes (glyphs at 16, text at 40) with a section's chevron at the end of its header; quick reactions a control high; empty states 16 from their sides. Also visible with a mouse: the rail is 49px wide with 36px items (was 57 and 40; `--rail-width-short`, `--rail-item-short`); a Switch is 38 × 22 (was 50 × 30); an IconTile takes its corner by size (27 chip, 35 control, 51 container) and an interactive badge is 20px high with the sticker corner; the hover toolbar is 42px (34px buttons) and floats half its height above the row; the Lightbox head is the header height.
+  - Why: stdrc's sizing review, rounds 3–9 (2026-11-04/05); the rules are in design/foundations/desktop-density.md.
+  - Affects: every desktop surface with a mouse. Apps that pad inside a raft-ui dialog, drawer or panel section with their own `md:` classes should drop them: the surface inset now replaces a caller's `px-*` again.
+  - Migrate: read `--surface-inset` / `--page-inset` instead of `px-5` for a surface's own padding; browser tests that measured 32px controls or 36px toolbars on a desktop now see 34 and 42.
+  - New variables: `--page-top`, `--rail-width-short`, `--rail-item-short` (tokens); `--surface-inset`, `--sidebar-glyph-axis`, `--sidebar-text-axis` (styles.css, next to `--column-margin`).
+  - Docs: https://raft-design.botiverse.build/foundations/desktop-density/
+- **Touch density** (a phone width, and a touch screen at any width): 44px controls with a 10px radius (`--control-radius`; below 768px a mouse gets it too), denser rich rows (56px Activity, Inbox and person rows), a small ComboboxSelect keeps 8; icon tiles by size on touch.
+  - Why: the sizing audit's touch column (stdrc, 2026-11-04).
+  - Affects: phone widths and touch screens; a desktop with a mouse from 768px is unchanged.
+  - Docs: https://raft-design.botiverse.build/foundations/spacing/#hit-targets
+
+### Fixed
+
+- **ScrollArea** and **InboxItem**: hover rules apply only with a pointer that can hover. On a touch screen the last thing tapped stays `:hover`, which left scrollbars shown, the thumb thick, a hidden gutter catching taps, and an Inbox row's action room open. ([#1017](https://github.com/botiverse/raft-design/pull/1017))
+  - Affects: touch screens only; mouse behavior is unchanged.
+- **MessageActionCard**: the agent's reason is an upright quote (Space Grotesk has no italic), and a long permission list caps at 136px so the cut runs through a line of text at either description length. ([#1018](https://github.com/botiverse/raft-design/pull/1018))
+
+## [0.64.0](https://github.com/botiverse/raft-design/compare/v0.63.1...v0.64.0) (2026-11-05)
+
+### Added
+
+- **ButtonSplit**, **ButtonSplitMain** and **ButtonSplitMenu** (from `@botiverse/raft-ui/wip`): a `primary` or `default` Button with its ▾ menu, one shape in two parts. The parts touch and share one `radius-control` outline, the menu part's start border divides them, and each part hovers, presses, focuses and disables on its own; `disabled` on the group disables both. ([#1009](https://github.com/botiverse/raft-design/pull/1009))
+  - Why: Raft Chat's Members header needs Create agent with a ▾ for Take over a local session and Connect an external agent (cindyz, #triage:36bfa2f8; rule in [#1008](https://github.com/botiverse/raft-design/pull/1008)), and raft-ui only had `PanelSplitAction`, the frameless split of a panel header.
+  - Affects: nothing until used.
+  - Docs: https://raft-design.botiverse.build/components/button/#split-buttons
+- **AppLinkCard** and its parts (from `@botiverse/raft-ui/wip`): an app link's card drawn in the message itself, after the link's paragraph, where the app's answer lists one (protocol version 3: a `card` item with `placement: "block"` in `items`). The link is never replaced: it stays a chip when the answer lists `inline`, and the author's plain link when it doesn't. `AppLinkCardHeader` (with `AppLinkCardIcon`, `AppLinkCardName` and `AppLinkCardHost`) is Raft's row naming the app; `AppLinkCardBody`, `AppLinkCardEyebrow`, `AppLinkCardTitle` and `AppLinkCardMeta` are the item, as on the hover card, and the title holds a link that opens the item; `AppLinkCardActions` holds at most two of the app's buttons and ⋯ for the rest, where an Open link goes; `AppLinkCardPlaceholder` is the card's size while a cached answer loads. 400px wide, the message's width in the phone layout. Navigation's App links now say what each item of an answer draws, in the list's order, with nothing inferred. ([#1010](https://github.com/botiverse/raft-design/pull/1010))
+  - Why: a card whose buttons matter, such as a Stamp approval, could be acted on only by hovering its chip on desktop, and not at all on a phone. The app lists every way its link is drawn, a chip, a hover card or a block card, as artin decided in #proj-raft-ui:d3528715 after the prototype (https://app.raft.build/artifacts/Q6r36on3znYNHnSbczSH3S); AppFather defined version 3 (#proj-raft-ui:46e9d07e and 8051e1a8). Tenny asked that Raft always draw the app's name and icon in its own frame.
+  - Affects: nothing until a product draws one. PreviewCard is untouched.
+  - Docs: https://raft-design.botiverse.build/components/app-link-card/ and https://raft-design.botiverse.build/patterns/navigation/#what-an-apps-answer-lists
+
+### Fixed
+
+- **CommentMarginItem**: a `CommentMargin` renders its cards where the browser has no `ResizeObserver` (jsdom, some embedded webviews) instead of throwing. Each card keeps the height it had when placed. ([#1007](https://github.com/botiverse/raft-design/pull/1007))
+  - Why: the same gap #996 closed in `useCommentMarginFits`; slock's Artifact viewer works around it today by not drawing the margin there (Remy, slock #13062).
+  - Affects: only environments without `ResizeObserver`; there a card that grows after it is placed doesn't push the cards below it.
+  - Docs: https://raft-design.botiverse.build/components/comment/
+
 ## [0.63.1](https://github.com/botiverse/raft-design/compare/v0.63.0...v0.63.1) (2026-11-05)
 
 ### Fixed

package/dist/components/activity-inbox/activity-inbox-sidebar.recipe.mjs

@@ -12,7 +12,7 @@ const activityInboxSidebar = tv({ slots: {
 		"py-0",
 		"[&_[data-slot=sidebar-group-label]]:mt-3 [&_[data-slot=sidebar-group-label]]:mb-0",
 		"**:data-[slot=sidebar-group-label]:flex **:data-[slot=sidebar-group-label]:items-center [&_[data-slot=sidebar-group-label]]:gap-2",
-		"[&_[data-slot=sidebar-group-label]]:px-5 [&_[data-slot=sidebar-group-label]]:py-0",
+		"[&_[data-slot=sidebar-group-label]]:px-5 [&_[data-slot=sidebar-group-label]]:py-0 md:pointer-fine:[&_[data-slot=sidebar-group-label]]:px-2",
 		"**:data-[slot=sidebar-group-label]:font-sans **:data-[slot=sidebar-group-label]:text-footnote [&_[data-slot=sidebar-group-label]]:font-bold",
 		"**:data-[slot=sidebar-group-label]:text-foreground-hint **:data-[slot=sidebar-group-label]:normal-case [&_[data-slot=sidebar-group-label]]:tracking-normal",
 		"**:data-activity-inbox-show-all:whitespace-nowrap"

package/dist/components/activity-inbox/activity-inbox-toolbar.recipe.mjs

@@ -1,9 +1,14 @@
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/activity-inbox/activity-inbox-toolbar.recipe.ts
 const activityInboxToolbar = tv({ slots: {
-	controls: ["flex shrink-0 flex-nowrap items-center gap-2", "bg-layer-canvas px-(--column-margin) py-3"],
+	controls: [
+		"flex shrink-0 flex-nowrap items-center gap-2",
+		"bg-layer-canvas px-(--column-margin) py-3",
+		"md:pointer-fine:py-[calc((var(--header-height)-var(--control-height))/2)]"
+	],
 	selectionToolbar: [
 		"flex min-h-11 shrink-0 flex-wrap items-center gap-2 pt-1.5 pb-[5px]",
+		"md:pointer-fine:pt-1 md:pointer-fine:pb-[5px]",
 		"border-b border-line-hairline bg-layer-canvas px-(--column-margin)",
 		"**:data-[activity-inbox-action=sort]:text-foreground-muted",
 		"**:data-[activity-inbox-action=sort]:hover:text-foreground"

package/dist/components/alert-dialog/alert-dialog.mjs

@@ -22,18 +22,18 @@ const alertDialog = tv({
 		],
 		header: [
 			"grid grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0",
-			"gap-2 px-5 pt-5",
+			"gap-2 px-(--surface-inset) pt-(--surface-inset)",
 			headEdgePull
 		],
 		body: [
 			"min-w-0",
-			"px-5 pt-1.5 pb-5 first:pt-5",
+			"px-(--surface-inset) pt-1.5 pb-(--surface-inset) first:pt-(--surface-inset)",
 			"font-sans text-subhead text-foreground-muted"
 		],
 		footer: [
 			"flex min-w-0 items-center justify-end",
 			...stackedActions,
-			"gap-2 px-5 pb-5 first:pt-5 [[data-slot=alert-dialog-header]+&]:pt-5"
+			"gap-2 px-(--surface-inset) pb-(--surface-inset) first:pt-(--surface-inset) [[data-slot=alert-dialog-header]+&]:pt-(--surface-inset)"
 		],
 		title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
 		description: ["m-0", "font-sans text-subhead text-foreground-muted"]

package/dist/components/announcement-dialog/announcement-dialog.mjs

@@ -9,7 +9,7 @@ const announcement = tv({ slots: {
 	body: [
 		"min-h-0 max-h-[70dvh] overflow-y-auto pb-5",
 		"[&_[data-slot=announcement-picture]+[data-slot=announcement-text]]:mt-5",
-		"px-5 pt-5"
+		"px-(--surface-inset) pt-(--surface-inset)"
 	],
 	header: ["flex min-w-0 items-center justify-between gap-3"],
 	label: ["flex min-w-0 items-center gap-2 wrap-break-word", "text-caption text-foreground-muted"],
@@ -21,7 +21,7 @@ const announcement = tv({ slots: {
 		"[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base [&_h1]:font-bold [&_h2]:font-bold [&_h3]:font-bold [&_pre]:max-w-full [&_pre]:overflow-x-auto",
 		"text-subhead text-foreground-muted"
 	],
-	footer: ["flex shrink-0 flex-wrap items-center justify-between gap-3 border-line-hairline py-4 @max-[28rem]/announcement:flex-col", "border-t-0 px-5 pt-0 pb-5"],
+	footer: ["flex shrink-0 flex-wrap items-center justify-between gap-3 border-line-hairline py-4 @max-[28rem]/announcement:flex-col", "border-t-0 px-(--surface-inset) pt-0 pb-(--surface-inset)"],
 	action: ["ml-auto h-auto min-h-8 min-w-0 max-w-full py-1 whitespace-normal text-center font-bold @max-[28rem]/announcement:ml-0 @max-[28rem]/announcement:w-full"],
 	secondary: ["min-w-0 max-w-full whitespace-normal @max-[28rem]/announcement:w-full"]
 } });

package/dist/components/app-link-card/app-link-card.d.mts

@@ -0,0 +1,56 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/app-link-card/app-link-card.d.ts
+export type AppLinkCardProps = ComponentPropsWithRef<"div">;
+/**
+ * An app link's card drawn in the message, after the link's paragraph, where
+ * the app's answer lists one (a `card` item with `placement: "block"`):
+ * Raft's header with the app's identity, the item, and buttons that work by
+ * keyboard and touch. It never replaces the link. A `group`: label it with
+ * `aria-labelledby` pointing at its `AppLinkCardTitle`, so someone who tabs
+ * to one of its buttons hears which item the button acts on.
+ */
+export declare function AppLinkCard({ className, ...props }: AppLinkCardProps): import("react").JSX.Element;
+export type AppLinkCardPlaceholderProps = ComponentPropsWithRef<"div">;
+/**
+ * The card's size while Raft fetches an answer it already knows lists a
+ * block card. Put the `AppLinkCardHeader` in it when the app is known; the item's
+ * lines and a button follow, as gray bars.
+ */
+export declare function AppLinkCardPlaceholder({ className, children, ...props }: AppLinkCardPlaceholderProps): import("react").JSX.Element;
+export type AppLinkCardHeaderProps = ComponentPropsWithRef<"div">;
+/** Raft's row at the top: `AppLinkCardIcon`, `AppLinkCardName`, then `AppLinkCardHost`. */
+export declare function AppLinkCardHeader({ className, ...props }: AppLinkCardHeaderProps): import("react").JSX.Element;
+export type AppLinkCardIconProps = ComponentPropsWithRef<"span">;
+/** The app's registered icon, the image Raft stores and serves: one child at 16px. */
+export declare function AppLinkCardIcon({ className, ...props }: AppLinkCardIconProps): import("react").JSX.Element;
+export type AppLinkCardNameProps = ComponentPropsWithRef<"span">;
+/** The app's name as Raft stores it. One line, truncated. */
+export declare function AppLinkCardName({ className, ...props }: AppLinkCardNameProps): import("react").JSX.Element;
+export type AppLinkCardHostProps = ComponentPropsWithRef<"span">;
+/**
+ * The link's host, after a "·". When it doesn't fit it loses its start, so
+ * the end, which says where the link goes, stays.
+ */
+export declare function AppLinkCardHost({ className, children, ...props }: AppLinkCardHostProps): import("react").JSX.Element;
+export type AppLinkCardBodyProps = ComponentPropsWithRef<"div">;
+/** The item: `AppLinkCardEyebrow`, `AppLinkCardTitle`, `AppLinkCardMeta`, in that order. */
+export declare function AppLinkCardBody({ className, ...props }: AppLinkCardBodyProps): import("react").JSX.Element;
+export type AppLinkCardEyebrowProps = ComponentPropsWithRef<"p">;
+/** The app's id for the item, above the title. One line, truncated. */
+export declare function AppLinkCardEyebrow({ className, ...props }: AppLinkCardEyebrowProps): import("react").JSX.Element;
+export type AppLinkCardTitleProps = ComponentPropsWithRef<"p">;
+/**
+ * The app's title for the item, up to 2 lines, then an ellipsis. Put a link
+ * to the item in it: the title opens the item, in the title's ink.
+ */
+export declare function AppLinkCardTitle({ className, ...props }: AppLinkCardTitleProps): import("react").JSX.Element;
+export type AppLinkCardMetaProps = ComponentPropsWithRef<"div">;
+/** One state in a neutral Badge, then muted details. Wraps when it runs out of room. */
+export declare function AppLinkCardMeta({ className, ...props }: AppLinkCardMetaProps): import("react").JSX.Element;
+export type AppLinkCardActionsProps = ComponentPropsWithRef<"div">;
+/**
+ * The app's buttons at the card's bottom end: at most two, the bordered one
+ * last, with a More menu (⋯) to their left for the rest.
+ */
+export declare function AppLinkCardActions({ className, ...props }: AppLinkCardActionsProps): import("react").JSX.Element;
+//#endregion

package/dist/components/app-link-card/app-link-card.mjs

@@ -0,0 +1,207 @@
+import { tv } from "../../lib/tv.mjs";
+import { messageEmbed } from "../message-embed/message-embed.recipe.mjs";
+import { Skeleton } from "../skeleton/skeleton.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/app-link-card/app-link-card.tsx
+const appLinkCard = tv({ slots: {
+	root: ["flex w-full max-w-[400px] min-w-0 flex-col max-md:max-w-none", "my-2 first:mt-0 last:mb-0"],
+	header: [
+		"flex min-w-0 items-center gap-1.5",
+		"border-b border-line-hairline px-4 py-2",
+		"font-sans text-caption text-foreground-muted"
+	],
+	icon: ["inline-flex size-4 shrink-0 items-center justify-center", "*:size-full *:shrink-0 [&>img]:rounded-[2px] [&>img]:object-cover"],
+	name: ["min-w-0 truncate", "font-semibold text-foreground"],
+	host: ["flex min-w-0 items-baseline", "before:shrink-0 before:pe-1.5 before:content-['·']"],
+	hostText: ["min-w-0 truncate"],
+	body: ["flex min-w-0 flex-col gap-1.5", "px-4 py-3 last:pb-4"],
+	eyebrow: ["m-0 truncate", "font-mono text-mono-meta text-foreground-muted"],
+	title: [
+		"m-0 line-clamp-2",
+		"font-sans text-headline font-bold text-foreground",
+		"[&_a]:rounded-[2px] [&_a]:decoration-[1.5px] [&_a]:underline-offset-[3px] [&_a]:hover:underline",
+		"[&_a]:outline-none [&_a]:focus-visible:shadow-focus"
+	],
+	meta: ["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", "m-0 font-sans text-callout text-foreground-muted"],
+	actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
+	placeholderLine: ["flex h-lh items-center"],
+	placeholderButton: ["h-8 md:pointer-fine:h-control w-28 rounded-control"]
+} });
+function frame(className) {
+	const { root } = appLinkCard();
+	return messageEmbed().root({ className: root({ className }) });
+}
+/**
+* An app link's card drawn in the message, after the link's paragraph, where
+* the app's answer lists one (a `card` item with `placement: "block"`):
+* Raft's header with the app's identity, the item, and buttons that work by
+* keyboard and touch. It never replaces the link. A `group`: label it with
+* `aria-labelledby` pointing at its `AppLinkCardTitle`, so someone who tabs
+* to one of its buttons hears which item the button acts on.
+*/
+function AppLinkCard({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "app-link-card",
+		className: frame(className),
+		...props
+	});
+}
+/**
+* The card's size while Raft fetches an answer it already knows lists a
+* block card. Put the `AppLinkCardHeader` in it when the app is known; the item's
+* lines and a button follow, as gray bars.
+*/
+function AppLinkCardPlaceholder({ className, children, ...props }) {
+	const { body, eyebrow, title, meta, actions, placeholderLine, placeholderButton } = appLinkCard();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "app-link-card-placeholder",
+		"aria-busy": "true",
+		className: frame(className),
+		...props,
+		children: [
+			children,
+			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: body(),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: eyebrow({ className: placeholderLine() }),
+						children: /* @__PURE__ */ jsx(Skeleton, {
+							variant: "line",
+							className: "w-28"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: title({ className: "line-clamp-none" }),
+						children: [/* @__PURE__ */ jsx("div", {
+							className: placeholderLine(),
+							children: /* @__PURE__ */ jsx(Skeleton, {
+								variant: "line",
+								className: "w-full"
+							})
+						}), /* @__PURE__ */ jsx("div", {
+							className: placeholderLine(),
+							children: /* @__PURE__ */ jsx(Skeleton, {
+								variant: "line",
+								className: "w-2/3"
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: meta({ className: placeholderLine() }),
+						children: /* @__PURE__ */ jsx(Skeleton, {
+							variant: "line",
+							className: "w-40"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: actions(),
+				children: /* @__PURE__ */ jsx(Skeleton, { className: placeholderButton() })
+			})
+		]
+	});
+}
+/** Raft's row at the top: `AppLinkCardIcon`, `AppLinkCardName`, then `AppLinkCardHost`. */
+function AppLinkCardHeader({ className, ...props }) {
+	const { header } = appLinkCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-link-card-header",
+		className: header({ className }),
+		...props
+	});
+}
+/** The app's registered icon, the image Raft stores and serves: one child at 16px. */
+function AppLinkCardIcon({ className, ...props }) {
+	const { icon } = appLinkCard();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "app-link-card-icon",
+		className: icon({ className }),
+		...props
+	});
+}
+/** The app's name as Raft stores it. One line, truncated. */
+function AppLinkCardName({ className, ...props }) {
+	const { name } = appLinkCard();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "app-link-card-name",
+		className: name({ className }),
+		...props
+	});
+}
+/**
+* The link's host, after a "·". When it doesn't fit it loses its start, so
+* the end, which says where the link goes, stays.
+*/
+function AppLinkCardHost({ className, children, ...props }) {
+	const { host, hostText } = appLinkCard();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "app-link-card-host",
+		className: host({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			dir: "rtl",
+			className: hostText(),
+			children: /* @__PURE__ */ jsx("span", {
+				dir: "ltr",
+				children
+			})
+		})
+	});
+}
+/** The item: `AppLinkCardEyebrow`, `AppLinkCardTitle`, `AppLinkCardMeta`, in that order. */
+function AppLinkCardBody({ className, ...props }) {
+	const { body } = appLinkCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-link-card-body",
+		className: body({ className }),
+		...props
+	});
+}
+/** The app's id for the item, above the title. One line, truncated. */
+function AppLinkCardEyebrow({ className, ...props }) {
+	const { eyebrow } = appLinkCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "app-link-card-eyebrow",
+		className: eyebrow({ className }),
+		...props
+	});
+}
+/**
+* The app's title for the item, up to 2 lines, then an ellipsis. Put a link
+* to the item in it: the title opens the item, in the title's ink.
+*/
+function AppLinkCardTitle({ className, ...props }) {
+	const { title } = appLinkCard();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "app-link-card-title",
+		className: title({ className }),
+		...props
+	});
+}
+/** One state in a neutral Badge, then muted details. Wraps when it runs out of room. */
+function AppLinkCardMeta({ className, ...props }) {
+	const { meta } = appLinkCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-link-card-meta",
+		className: meta({ className }),
+		...props
+	});
+}
+/**
+* The app's buttons at the card's bottom end: at most two, the bordered one
+* last, with a More menu (⋯) to their left for the rest.
+*/
+function AppLinkCardActions({ className, ...props }) {
+	const { actions } = appLinkCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-link-card-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+//#endregion
+export { AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle };

package/dist/components/app-link-card/index.d.mts

@@ -0,0 +1,2 @@
+import { AppLinkCard, AppLinkCardActions, AppLinkCardActionsProps, AppLinkCardBody, AppLinkCardBodyProps, AppLinkCardEyebrow, AppLinkCardEyebrowProps, AppLinkCardHeader, AppLinkCardHeaderProps, AppLinkCardHost, AppLinkCardHostProps, AppLinkCardIcon, AppLinkCardIconProps, AppLinkCardMeta, AppLinkCardMetaProps, AppLinkCardName, AppLinkCardNameProps, AppLinkCardPlaceholder, AppLinkCardPlaceholderProps, AppLinkCardTitle, AppLinkCardTitleProps } from "./app-link-card.mjs";
+export { AppLinkCard, AppLinkCardActions, type AppLinkCardActionsProps, AppLinkCardBody, type AppLinkCardBodyProps, AppLinkCardEyebrow, type AppLinkCardEyebrowProps, AppLinkCardHeader, type AppLinkCardHeaderProps, AppLinkCardHost, type AppLinkCardHostProps, AppLinkCardIcon, type AppLinkCardIconProps, AppLinkCardMeta, type AppLinkCardMetaProps, AppLinkCardName, type AppLinkCardNameProps, AppLinkCardPlaceholder, type AppLinkCardPlaceholderProps, AppLinkCardTitle, type AppLinkCardTitleProps };

package/dist/components/app-rail/app-rail.recipe.mjs

@@ -3,35 +3,40 @@ import { tv } from "../../lib/tv.mjs";
 const appRail = tv({ slots: {
 	root: [
 		"flex size-full  flex-col items-center select-none",
-		"w-[calc(var(--shell-header-height,56px)+1px)] border-r border-line-seam",
+		"w-(--rail-width) border-r border-line-seam",
 		"bg-layer-frame text-foreground-on-frame",
-		"[@media(max-height:600px)]:w-[49px]"
+		"[@media(max-height:600px)]:w-(--rail-width-short)"
 	],
 	header: [
 		"relative flex w-full shrink-0 items-center justify-center",
-		"h-(--shell-header-height,56px) border-b border-line-seam",
-		"[@media(max-height:600px)]:h-12"
+		"h-(--shell-header-height,var(--header-height)) border-b border-line-seam",
+		"[@media(max-height:600px)]:h-(--header-height-short)"
 	],
 	nav: [
 		"flex w-full flex-1 flex-col items-center py-2",
 		"gap-1.5 pt-2.5 pb-2 first:pt-2",
 		"[@media(max-height:600px)]:pt-1.5 [@media(max-height:600px)]:first:pt-1.5",
+		"md:pointer-fine:gap-1 md:pointer-fine:pt-1.5 md:pointer-fine:first:pt-1.5",
 		"after:mt-auto after:h-28 after:min-h-0 after:w-12 after:shrink after:content-[''] after:frame-decor-rail"
 	],
-	footer: ["flex w-full shrink-0 flex-col items-center justify-center", "h-auto gap-1.5 pb-2 [@media(max-height:600px)]:pb-1.5"],
+	footer: [
+		"flex w-full shrink-0 flex-col items-center justify-center",
+		"h-auto gap-1.5 pb-2 [@media(max-height:600px)]:pb-1.5",
+		"md:pointer-fine:gap-1 md:pointer-fine:pb-1.5"
+	],
 	item: [
 		"relative inline-flex shrink-0 items-center justify-center",
 		"outline-none",
 		"disabled:pointer-events-none disabled:opacity-45",
 		"[&_svg]:shrink-0",
-		"size-10 rounded-control border-[1.5px] border-transparent",
+		"size-(--rail-item) rounded-control border-[1.5px] border-transparent",
 		"text-foreground-on-frame [&_svg]:size-5",
 		"hover:bg-fill-frame-medium active:bg-fill-frame-medium",
 		"data-[selected=true]:border-line-frame-active data-[selected=true]:bg-layer-frame-active",
 		"data-[selected=true]:ring-[1.5px] data-[selected=true]:ring-sticker-edge",
 		"data-[selected=true]:text-foreground-on-frame-active",
 		"focus-visible:shadow-focus",
-		"[@media(max-height:600px)]:size-9"
+		"[@media(max-height:600px)]:size-(--rail-item-short)"
 	],
 	itemIcon: ["relative inline-flex items-center justify-center"],
 	itemLabel: ["sr-only"],

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

@@ -12,7 +12,7 @@ const appShell = tv({
 			"flex min-h-0 w-full overflow-visible md:overflow-clip",
 			"max-md:flex-col max-md:pt-[env(safe-area-inset-top,0px)]",
 			"font-sans",
-			"[--shell-header-height:56px] [@media(max-height:600px)]:[--shell-header-height:48px]",
+			"[--shell-header-height:var(--header-height)] [@media(max-height:600px)]:[--shell-header-height:var(--header-height-short)]",
 			"bg-layer-canvas text-foreground"
 		],
 		railSlot: ["hidden h-full shrink-0 flex-col md:flex"],

package/dist/components/avatar/avatar.mjs

@@ -64,6 +64,7 @@ const avatar = tv({
 		groupButton: [
 			"relative inline-flex shrink-0 cursor-pointer items-center p-1",
 			"rounded-chip border-0 bg-transparent",
+			"md:pointer-fine:h-(--bar-button-size) md:pointer-fine:justify-center md:pointer-fine:rounded-(--bar-button-radius) md:pointer-fine:py-0",
 			"transition-colors enabled:hover:bg-fill-medium enabled:active:bg-fill-medium",
 			"outline-none focus-visible:shadow-focus",
 			"disabled:cursor-default"

package/dist/components/badge/badge.mjs

@@ -24,8 +24,13 @@ const badge = tv({
 				"[&_svg]:size-[13px]",
 				"enabled:hover:overlay-sticker-medium enabled:active:overlay-sticker-medium"
 			] },
-			soft: { root: ["text-foreground", "enabled:hover:overlay-medium enabled:active:overlay-medium"] },
+			soft: { root: [
+				"md:pointer-fine:h-5 md:pointer-fine:rounded-sticker",
+				"text-foreground",
+				"enabled:hover:overlay-medium enabled:active:overlay-medium"
+			] },
 			outline: { root: [
+				"md:pointer-fine:h-5 md:pointer-fine:rounded-sticker",
 				"font-mono text-mono-meta font-normal",
 				"bg-transparent text-foreground-muted inset-ring inset-ring-line-hairline",
 				"enabled:hover:bg-fill-medium enabled:active:bg-fill-medium"

package/dist/components/banner/banner.mjs

@@ -67,7 +67,7 @@ const banner = tv({
 	defaultVariants: { size: "md" },
 	compoundVariants: [{
 		size: "sm",
-		class: { root: "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((--spacing(8)-1lh)/2+--spacing(1))]" }
+		class: { root: ["[--banner-button:--spacing(8)] md:pointer-fine:[--banner-button:var(--control-height)]", "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((var(--banner-button)-1lh)/2+--spacing(1))]"] }
 	}]
 });
 /**

package/dist/components/button/button-split.d.mts

@@ -0,0 +1,38 @@
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { ButtonProps } from "./button.mjs";
+import { ComponentProps } from "react";
+//#region src/components/button/button-split.d.ts
+/** The Button variants a split button takes: the filled ones and the bordered one. */
+export type ButtonSplitVariant = "primary" | "default" | "warning" | "danger";
+/** The Button sizes a split button takes. */
+export type ButtonSplitSize = "md" | "lg";
+export type ButtonSplitProps = ComponentProps<"div"> & DataAttributes & {
+  /** Disables both parts. Either part can also be disabled on its own. */
+  disabled?: boolean;
+};
+/**
+ * A Button with a menu beside it, such as Create agent and its ▾: a
+ * `ButtonSplitMain`, then a `ButtonSplitMenu` as the trigger of a DropdownMenu.
+ * The two parts touch and read as one button. A `role="group"`: name it with
+ * `aria-label`, not with the main part's name. For a frameless split in a
+ * panel header, use `PanelSplitAction`.
+ */
+export declare function ButtonSplit({ disabled, className, ...props }: ButtonSplitProps): import("react").JSX.Element;
+type ButtonSplitPartProps = Omit<ButtonProps, "variant" | "size"> & {
+  /** The Button variant; give both parts the same one. */
+  variant?: ButtonSplitVariant;
+  /** The Button size; give both parts the same one. */
+  size?: ButtonSplitSize;
+};
+export type ButtonSplitMainProps = ButtonSplitPartProps;
+/** The action of a split button: a Button, rounded only on its start side. */
+export declare function ButtonSplitMain({ variant, size, disabled, className, ...props }: ButtonSplitMainProps): import("react").JSX.Element;
+export type ButtonSplitMenuProps = ButtonSplitPartProps;
+/**
+ * The narrow part of a split button that opens its menu, with a chevron by
+ * default; its start border is the divider. Render it as the trigger of a
+ * DropdownMenu:
+ * `<DropdownMenuTrigger render={<ButtonSplitMenu aria-label="More ways to create an agent" />} />`.
+ */
+export declare function ButtonSplitMenu({ variant, size, disabled, className, children, ...props }: ButtonSplitMenuProps): import("react").JSX.Element;
+//#endregion