@botiverse/raft-ui 0.36.0 → 0.37.0

package/CHANGELOG.md

@@ -1,3 +1,57 @@
+## [0.37.0](https://github.com/botiverse/raft-design/compare/v0.36.1...v0.37.0) (2026-10-26)
+
+### Design System
+
+- **Edges fade:** content that goes on past an edge fades with a mask, not a colour gradient, so the fade works on any surface (a hovered, selected or located row, a card). Two lengths: 24px at the edge of a scrolling strip, 48px over cut-off content. `MessageListEndFade` is the one exception. ([#816](https://github.com/botiverse/raft-design/pull/816))
+  - Docs: https://raft-design.botiverse.build/foundations/spacing/
+- **Dimmed:** deleted, offline and pending items are `opacity-dimmed` (60%); a drag origin stays 40%. Media hover is an `ink-8` overlay, not a brightness filter. ([#816](https://github.com/botiverse/raft-design/pull/816))
+  - Docs: https://raft-design.botiverse.build/foundations/states/
+- **Tooltip:** a disabled control's reason under its name is a second line in `foreground-on-hud-muted`, 4px below. ([#813](https://github.com/botiverse/raft-design/pull/813))
+- **Drag and drop:** a panel grip's hit area stays clear of a neighbouring resize seam, with its bar inside it. ([#814](https://github.com/botiverse/raft-design/pull/814))
+- **Raft Chat:** the history paywall where a plan cuts a conversation's history. ([#757](https://github.com/botiverse/raft-design/pull/757))
+
+### Added
+
+- Utilities `mask-fade-t`, `mask-fade-b` (48px), `mask-fade-t-edge`, `mask-fade-b-edge` (24px) and `mask-fade-x` (24px on the side named by `data-overflow="start|end|both"`); tokens `fade-edge`, `fade-content`. ([#816](https://github.com/botiverse/raft-design/pull/816))
+- Token `layer-veil` (the page at 80%) for busy and loading covers, `bg-layer-veil`; `opacity-dimmed` (0.6). Both registered with `cn`'s tailwind-merge. ([#816](https://github.com/botiverse/raft-design/pull/816))
+
+### Changed
+
+- **Tabs**: the overflow fade is `mask-fade-x`, 24px (was 32px). ([#816](https://github.com/botiverse/raft-design/pull/816))
+- **MessageForwardedBundle**: the fold fades with `mask-fade-b` (48px, was a 40px card-colour gradient; a tight fold 24px, was 20px). ([#816](https://github.com/botiverse/raft-design/pull/816))
+  - Affects: overrides that targeted the fold's `::after` must drop it.
+- **Composer** upload and failed covers, and the pending **MessageImageGallery** image, use `layer-veil` (were `layer-card/80`, `layer-card/90` and `opacity-70`); the pending spinner uses its default colour. ([#816](https://github.com/botiverse/raft-design/pull/816))
+- **Lightbox** thumbnails dim with `layer-backdrop-nested` (40%, was `black/45`); hover 28% unchanged. ([#816](https://github.com/botiverse/raft-design/pull/816))
+- Task chip and task-card busy states, and the deleted delegated avatar, use `opacity-dimmed` (same 60%). ([#816](https://github.com/botiverse/raft-design/pull/816))
+
+## [0.36.1](https://github.com/botiverse/raft-design/compare/v0.36.0...v0.36.1) (2026-10-26)
+
+### Design System
+
+- **Drag and drop:** a panel of live content (a side section) is lifted by its grip only, so its head keeps its clicks (opening a thread, jumping to the channel). The grip shows while the head is hovered or the grip has focus, always on a device that can't hover, and its hit area is at least 24px tall and wider than the bar. ([#809](https://github.com/botiverse/raft-design/pull/809))
+  - Docs: https://raft-design.botiverse.build/patterns/drag-and-drop/
+- **Motion:** the app's columns change without animation: collapsing or expanding the sidebar, and Focus Mode in or out, by a button or by dragging past the end. ([#811](https://github.com/botiverse/raft-design/pull/811))
+  - Docs: https://raft-design.botiverse.build/foundations/motion/
+- **Field:** an action at the end of a field's label row (Forgot Password) comes after the control in the markup, so Tab and a screen reader reach the field first. ([#808](https://github.com/botiverse/raft-design/pull/808))
+  - Docs: https://raft-design.botiverse.build/components/field/
+
+### Fixed
+
+- **AppShell**: the sidebar collapses and expands at once; the main area no longer slides and the sidebar no longer fades. `data-sliding` is gone. ([#811](https://github.com/botiverse/raft-design/pull/811))
+  - Why: Focus Mode already switched at once while the sidebar slid; a whole column sliding flickers.
+  - Affects: no transition on `AppShellMainSlot` (`left`) or `AppShellSidebarSlot` (opacity); no z-index on the main slot while collapsing.
+  - Docs: https://raft-design.botiverse.build/components/app-shell/
+- **Composer**: its buttons sit 6px apart (`gap-embedded-inset`), the same as their distance from the frame. ([#810](https://github.com/botiverse/raft-design/pull/810))
+  - Why: the buttons were 8px apart but 6px from the edge, against Shape › Inside a frame.
+  - Affects: gap in the toolbar, actions and meta 8px → 6px.
+  - Docs: https://raft-design.botiverse.build/components/composer/
+- **DragRefusalHint**: the chip stays inside the window and off the lifted copy: left of the pointer and the copy at the right edge, above the pointer at the bottom edge, 8px inside on every side. ([#807](https://github.com/botiverse/raft-design/pull/807))
+  - Why: near the window's edge the chip was drawn outside it, or under the copy when flipped.
+  - Docs: https://raft-design.botiverse.build/components/drag/
+- **useDragSensors**: Escape during a drag, however it started, only cancels the drag; the keydown is stopped in the capture phase, so no app Escape handler (closing a panel, a dialog, a popover) hears it. ([#807](https://github.com/botiverse/raft-design/pull/807))
+  - Why: Escape cancelled the drag and also closed the panel around it.
+  - Docs: https://raft-design.botiverse.build/components/drag/
+
 ## [0.36.0](https://github.com/botiverse/raft-design/compare/v0.35.1...v0.36.0) (2026-10-26)
 
 ### Design System

package/dist/cn.mjs

@@ -60,6 +60,14 @@ const twMerge = extendTailwindMerge({ extend: {
 			"control"
 		] }],
 		"font-weight": [{ font: ["field", "card-title"] }],
+		"mask-image": [{ "mask-fade": [
+			"t",
+			"t-edge",
+			"b",
+			"b-edge",
+			"x"
+		] }],
+		opacity: [{ opacity: ["dimmed"] }],
 		"bg-image": [
 			{ overlay: [
 				"subtle",

package/dist/foundation.css

@@ -27,8 +27,9 @@
               selected sticker, with their own value so no theme grays them.
    Washes:    ink-{alpha%} (2..40) — neutral overlays, hairlines, hover fills.
    Opacity rule: layer tokens are opaque in every theme, except the two
-   backdrops (overlays by contract); among fills only the hover tiers
-   (fill-subtle, fill-medium, fill-frame-medium) are translucent.
+   backdrops and the veil (overlays by contract: a scrim under a modal
+   surface, a cover over something busy in place); among fills only the
+   hover tiers (fill-subtle, fill-medium, fill-frame-medium) are translucent.
    Interaction fills: transparent resting → ink-N directly; solid family fill →
    the family's -hover/-active pair; neutral or tinted surface → step up its ladder.
    Escape hatches: ink ramp for one-off washes; inline oklch() literals for
@@ -36,7 +37,8 @@
 
 /* Raw brand ramps (the website palette) — variables only, no utility registration. Consumed by the
    Tailwind aliases in styles.css, the brand ramps, and state families below. Then the
-   mode-independent motion values (design/foundations/motion.md). */
+   mode-independent values: the fade lengths (design/foundations/spacing.md), the dimmed
+   opacity (design/foundations/states.md) and motion (design/foundations/motion.md). */
 :where(:root) {
   --palette-yellow-50: oklch(0.984 0.017 84.56);
   --palette-yellow-100: oklch(0.975 0.027 85.64);
@@ -137,6 +139,9 @@
   --palette-cream-800: oklch(0.396 0.082 95);
   --palette-cream-900: oklch(0.276 0.057 95.1);
   --palette-cream-950: oklch(0.19 0.039 94.7);
+  --fade-edge: 24px;
+  --fade-content: 48px;
+  --opacity-dimmed: 0.6;
   --motion-drag-settle-duration: 160ms;
   --motion-drag-settle-easing: cubic-bezier(0.25, 1, 0.5, 1);
 }
@@ -168,6 +173,11 @@
   --layer-popover: oklch(1 0 0);
   --layer-backdrop: oklch(0 0 0 / 0.651);
   --layer-backdrop-nested: oklch(0 0 0 / 0.4);
+  /* The cover over something busy or loading in place: an image uploading or
+     that failed, a preview being prepared. The page at 80%, so what is under it
+     shows through, dimmed, and a default-colour Spinner on it reads in both
+     modes. Translucent by contract, like the two backdrops. */
+  --layer-veil: oklch(1 0 0 / 0.8);
   --layer-card: oklch(1 0 0);
   --layer-hud: oklch(0.2634 0.0093 294.92);
   --layer-frame: oklch(0.8829 0.1623 91.9);
@@ -381,6 +391,7 @@
   --layer-popover: oklch(0.2802 0.0036 106.63);
   --layer-backdrop: oklch(0 0 0 / 0.6);
   --layer-backdrop-nested: oklch(0 0 0 / 0.4);
+  --layer-veil: oklch(0.2213 0.0038 106.71 / 0.8);
   --layer-card: oklch(0.2596 0.0037 106.65);
   --layer-hud: oklch(0.2802 0.0036 106.63);
   --layer-frame: oklch(0.1582 0.0041 106.86);
@@ -465,6 +476,7 @@
     --layer-popover: oklch(0.2802 0.0036 106.63);
     --layer-backdrop: oklch(0 0 0 / 0.6);
     --layer-backdrop-nested: oklch(0 0 0 / 0.4);
+    --layer-veil: oklch(0.2213 0.0038 106.71 / 0.8);
     --layer-card: oklch(0.2596 0.0037 106.65);
     --layer-hud: oklch(0.2802 0.0036 106.63);
     --layer-frame: oklch(0.1582 0.0041 106.86);

package/dist/{inbox-item-DIUkRiT4.mjs → inbox-item-D7xLTDjD.mjs}

@@ -2541,6 +2541,42 @@ function MobileNavLabel({ className, render, ...props }) {
 	});
 }
 //#endregion
+//#region src/lib/drag-escape.ts
+/** The drags in progress in each window, each with its own cancel. */
+const holds$1 = /* @__PURE__ */ new WeakMap();
+function onKeydown(event) {
+	if (event.key !== "Escape" && event.code !== "Escape") return;
+	const drags = holds$1.get(this);
+	if (!drags || drags.size === 0) return;
+	event.preventDefault();
+	event.stopImmediatePropagation();
+	for (const cancel of drags.values()) cancel(event);
+}
+function guard(win) {
+	let drags = holds$1.get(win);
+	if (!drags) {
+		drags = /* @__PURE__ */ new Map();
+		holds$1.set(win, drags);
+		win.addEventListener("keydown", onKeydown, { capture: true });
+	}
+	return drags;
+}
+if (typeof window !== "undefined") guard(window);
+/** A sensor's drag has started: Escape now cancels it, and only it. */
+function holdEscape(win, sensor, cancel) {
+	if (!win) return;
+	guard(win).set(sensor, cancel);
+}
+/** The sensor's drag is over: Escape behaves as it does everywhere else again. */
+function releaseEscape(win, sensor) {
+	if (!win) return;
+	holds$1.get(win)?.delete(sensor);
+}
+/** The window an event happened in. */
+function eventWindow(event) {
+	return (event?.target)?.ownerDocument?.defaultView ?? (typeof window === "undefined" ? null : window);
+}
+//#endregion
 //#region src/lib/touch-drag.ts
 /**
 * How a finger picks up something that can be dragged
@@ -2577,6 +2613,18 @@ function touchPoint(event) {
 function farther(from, to, limit) {
 	return Math.hypot(to.x - from.x, to.y - from.y) > limit;
 }
+/**
+* Once a pointer sensor's drag has started, Escape cancels it and reaches
+* nothing else (`drag-escape.ts`): no app handler on the window, the document
+* or an element hears it.
+*/
+function holdEscapeOnceActive(sensor) {
+	const self = sensor;
+	if (self.activated) holdEscape(eventWindow(self.props.event), sensor, () => self.handleCancel());
+}
+function releaseEscapeOf(sensor) {
+	releaseEscape(eventWindow(sensor.props.event), sensor);
+}
 var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
 	static activators = TouchSensor.activators;
 	static setup() {
@@ -2595,6 +2643,10 @@ var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
 		};
 		holds.set(this, state);
 	}
+	handleStart() {
+		super.handleStart();
+		holdEscapeOnceActive(this);
+	}
 	handleMove(event) {
 		const self = this;
 		const state = holds.get(this);
@@ -2622,22 +2674,33 @@ var HoldThenMoveTouchSensorImpl = class extends TouchSensor {
 		const state = holds.get(this);
 		if (state) clearTimeout(state.timer);
 		holds.delete(this);
+		releaseEscapeOf(this);
 		super.detach();
 	}
 };
 /** A TouchSensor that starts a drag on the first move after a still hold (see above). */
 const HoldThenMoveTouchSensor = HoldThenMoveTouchSensorImpl;
-/**
-* dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
-* left to `HoldThenMoveTouchSensor`.
-*/
-var MouseOnlyPointerSensor = class extends PointerSensor {
+var MouseOnlyPointerSensorImpl = class extends PointerSensor {
 	static activators = [{
 		eventName: "onPointerDown",
 		handler: (event, options) => event.nativeEvent.pointerType === "touch" ? false : PointerSensor.activators[0].handler(event, options)
 	}];
+	handleStart() {
+		super.handleStart();
+		holdEscapeOnceActive(this);
+	}
+	detach() {
+		releaseEscapeOf(this);
+		super.detach();
+	}
 };
 /**
+* dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
+* left to `HoldThenMoveTouchSensor`. While it holds a drag, Escape puts the
+* item back and reaches nothing else.
+*/
+const MouseOnlyPointerSensor = MouseOnlyPointerSensorImpl;
+/**
 * `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
 * on: no constraint dnd-kit would act on by itself, so only a move after the
 * hold starts the drag.
@@ -4182,7 +4245,7 @@ const messageItem = tv$1({
 			"size-[19px] group-data-[size=md]/avatar:size-[19px]",
 			"rounded-sticker outline-none",
 			"bg-layer-canvas bg-[linear-gradient(var(--mi-row-fill,transparent),var(--mi-row-fill,transparent))]",
-			"data-deleted:*:data-[slot=avatar]:grayscale data-deleted:*:data-[slot=avatar]:opacity-60",
+			"data-deleted:*:data-[slot=avatar]:grayscale data-deleted:*:data-[slot=avatar]:opacity-dimmed",
 			"shadow-[0_0_0_1.5px_var(--mi-row-fill,transparent),0_0_0_1.5px_var(--layer-canvas)]",
 			"dark:shadow-[0_0_0_3px_var(--mi-row-fill,transparent),0_0_0_3px_var(--layer-canvas)]"
 		],
@@ -6181,6 +6244,24 @@ const DRAG_KEYBOARD_CODES = {
 	cancel: ["Escape"],
 	end: ["Space"]
 };
+var DragKeyboardSensorImpl = class extends KeyboardSensor {
+	static activators = KeyboardSensor.activators;
+	attach() {
+		super.attach();
+		holdEscape(eventWindow(this.props.event), this, (event) => this.handleCancel(event));
+	}
+	detach() {
+		releaseEscape(eventWindow(this.props.event), this);
+		super.detach();
+	}
+};
+/**
+* dnd-kit's KeyboardSensor, but Escape during the drag puts the item back and
+* reaches nothing else: no dialog, panel or popover that closes on Escape
+* hears it (`drag-escape.ts`). The pointer sensors of `useDragSensors` do the
+* same.
+*/
+const DragKeyboardSensor = DragKeyboardSensorImpl;
 const NO_TOUCH = {};
 /**
 * The one sensor set for everything that can be dragged
@@ -6191,6 +6272,11 @@ const NO_TOUCH = {};
 * - the keyboard: Space picks up, the arrows move, Space drops, Escape puts
 *   back. Enter never starts a drag.
 *
+* However the drag started, Escape during it only puts the item back: it is
+* taken in the capture phase on the window and stopped, so no app handler
+* (a dialog, a panel, a popover that closes on Escape) hears it. Once the drag
+* is over, Escape reaches the app again.
+*
 * Pass the options, or only the keyboard's `coordinateGetter`.
 */
 function useDragSensors(options = {}) {
@@ -6201,7 +6287,7 @@ function useDragSensors(options = {}) {
 	}), [coordinateGetter]);
 	const mouse = useMouseOnlyPointerSensor(6);
 	const finger = useHoldThenMoveTouchSensor(touch);
-	const keys = useSensor(KeyboardSensor, keyboardOptions);
+	const keys = useSensor(DragKeyboardSensor, keyboardOptions);
 	return useSensors(mouse, finger, keyboard ? keys : null);
 }
 /**
@@ -6323,6 +6409,63 @@ function DropPlaceholder({ opaque = false, className, render, ...props }) {
 		}, props, { "data-slot": "drop-placeholder" })
 	});
 }
+/** The chip sits this far right of and below the pointer. */
+const HINT_OFFSET = {
+	x: 14,
+	y: 16
+};
+/** It stays at least this far inside the window on every side. */
+const HINT_INSET = 8;
+/** Pushed off the lifted copy, it keeps this far from it. */
+const HINT_GAP = 6;
+function overlaps(a, b) {
+	return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
+}
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, Math.max(min, max)));
+}
+/**
+* Where the refusal chip goes (design/patterns/drag-and-drop.md#refused-places):
+* right of and below the pointer; left of it (and of the copy) where the
+* window's right edge would cut it, above it where the bottom edge would; off
+* the lifted copy, which is drawn over it; and always at least 8px inside the
+* window.
+*/
+function placeRefusalHint(point, size, lift, viewport) {
+	const { width, height } = size;
+	const maxX = viewport.width - HINT_INSET - width;
+	const maxY = viewport.height - HINT_INSET - height;
+	const fitsX = (x) => x >= HINT_INSET && x <= maxX;
+	const fitsY = (y) => y >= HINT_INSET && y <= maxY;
+	const right = point.x + HINT_OFFSET.x;
+	const onRight = right <= maxX;
+	let x = onRight ? right : Math.min(point.x, lift?.left ?? point.x) - HINT_OFFSET.x - width;
+	const below = point.y + HINT_OFFSET.y;
+	const onBelow = below <= maxY;
+	let y = onBelow ? below : point.y - HINT_OFFSET.y - height;
+	const box = (bx, by) => ({
+		left: bx,
+		top: by,
+		right: bx + width,
+		bottom: by + height
+	});
+	if (lift && overlaps(box(x, y), lift)) {
+		const clearBelow = lift.bottom + HINT_GAP;
+		const clearAbove = lift.top - HINT_GAP - height;
+		const vertical = (onBelow ? [clearBelow, clearAbove] : [clearAbove, clearBelow]).find(fitsY);
+		if (vertical !== void 0) y = vertical;
+		else {
+			const besideRight = lift.right + HINT_OFFSET.x;
+			const besideLeft = lift.left - HINT_OFFSET.x - width;
+			const beside = (onRight ? [besideRight, besideLeft] : [besideLeft, besideRight]).find(fitsX);
+			if (beside !== void 0) x = beside;
+		}
+	}
+	return {
+		x: Math.round(clamp(x, HINT_INSET, maxX)),
+		y: Math.round(clamp(y, HINT_INSET, maxY))
+	};
+}
 /**
 * Shown while the hand is over a place that refuses the item
 * (design/patterns/drag-and-drop.md#refused-places): the reason, in a HUD
@@ -6330,6 +6473,11 @@ function DropPlaceholder({ opaque = false, className, render, ...props }) {
 * not-allowed cursor. Render it only while the place is refused, inside the
 * `DndContext`, with no placeholder anywhere. Announce the reason as well:
 * the chip is not read out.
+*
+* The chip sits right of and below the pointer. Near the window's right edge
+* it goes left of the pointer and of the lifted copy, near the bottom edge
+* above the pointer; it never sits under the copy, and always stays 8px inside
+* the window. Its size is measured when its content changes, not every frame.
 */
 function DragRefusalHint({ children, container, className, style, ...props }) {
 	const { hint } = drag();
@@ -6341,20 +6489,31 @@ function DragRefusalHint({ children, container, className, style, ...props }) {
 		if (!dragging) return;
 		const root = document.documentElement;
 		root.setAttribute("data-drag-refused", "");
+		const node = ref.current;
+		const size = {
+			width: node?.offsetWidth ?? 0,
+			height: node?.offsetHeight ?? 0
+		};
+		const observer = node && typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+			size.width = node.offsetWidth;
+			size.height = node.offsetHeight;
+		}) : null;
+		if (node) observer?.observe(node);
 		let frame = 0;
 		const tick = () => {
-			const node = ref.current;
 			if (node) {
+				const lift = document.querySelector("[data-slot=drag-lift]")?.getBoundingClientRect();
 				let point = dragPointer();
-				if (viaKeyboard || !point) {
-					const lift = document.querySelector("[data-slot=drag-lift]")?.getBoundingClientRect();
-					if (lift) point = {
-						x: lift.right,
-						y: lift.top + lift.height / 2
-					};
-				}
+				if ((viaKeyboard || !point) && lift) point = {
+					x: lift.right,
+					y: lift.top + lift.height / 2
+				};
 				if (point) {
-					node.style.transform = `translate(${Math.round(point.x + 14)}px, ${Math.round(point.y + 16)}px)`;
+					const at = placeRefusalHint(point, size, lift ?? null, {
+						width: window.innerWidth,
+						height: window.innerHeight
+					});
+					node.style.transform = `translate(${at.x}px, ${at.y}px)`;
 					node.style.visibility = "visible";
 				}
 			}
@@ -6363,6 +6522,7 @@ function DragRefusalHint({ children, container, className, style, ...props }) {
 		tick();
 		return () => {
 			root.removeAttribute("data-drag-refused");
+			observer?.disconnect();
 			cancelAnimationFrame(frame);
 		};
 	}, [dragging, viaKeyboard]);

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageListDateDivider, $i as DialogContent, $n as PreviewCardContent, $r as DropdownMenuItemLabel, $t as MessageReactionTooltipNameText, Aa as controlIconInset, Ai as ListRow, An as MessageItem, Ar as PopoverPopup, At as MessageMultiSelectToolbarActions, B as useDragSiblingTransition, Bi as ListRowValue, Bn as RadioGroupItem, Bt as inlineChip, C as DropPlaceholder, Ca as withOverlayLayer, Ci as ScrollAreaCorner, Cn as MessageItemEdited, Cr as PopoverArrow, Ct as messageEmbed, Da as tv, Di as Checkbox, Dn as MessageItemAvatarSlot, Dr as PopoverContent, Dt as MessageMultiSelect, Ea as ThemeStateContext, Ei as ScrollAreaViewport, En as MessageItemSearchMatch, Er as PopoverClose, Et as MessageTextSelectionToolbarSeparator, Fi as ListRowGroup, Fn as AvatarGroup, Fr as PopoverViewport, Ft as MessageReferencePending, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gr as MobileNavRoot, Gt as MessageReactionGlyph, Hi as TooltipContent, Hn as InputGroupAddon, Ht as MessageReactionChip, I as DragLift, Ii as ListRowIcon, In as AvatarGroupCount, It as MessageReferenceReadMark, Jr as DropdownMenuCheckboxItemIndicator, Jt as MessageReactionQuickButton, K as createDragAnnouncements, Ki as Badge, Kr as DropdownMenu, Kt as MessageReactionPickerContent, Li as ListRowMeta, Ln as AvatarImage, Lt as MessageReferenceSuffix, Ma as headEdges, Mi as ListRowBottom, Mn as Avatar, Mr as PopoverSeparator, Na as decisionWidth, Ni as ListRowChevron, Nn as AvatarBadge, Nr as PopoverTitle, Nt as MessageReferenceIndicator, Oa as stackedActions, Oi as CheckboxIndicator, On as MessageItemContinuationTime, Or as PopoverDescription, Ot as MessageMultiSelectCheckbox, Pi as ListRowDescription, Pn as AvatarFallback, Pr as PopoverTrigger, Pt as MessageReferenceLabel, Qi as DialogClose, Qr as DropdownMenuItemCount, Qt as MessageReactionTooltipName, Ri as ListRowTitle, Rn as RadioGroup, Rt as MessageReferenceText, Sa as useParentOverlayKind, Si as ScrollAreaContent, Sn as MessageItemContent, St as MessageEmbedHeader, Ta as useTheme, Ti as ScrollAreaThumb, Tn as MessageItemFooter, Tt as MessageTextSelectionToolbarButton, U as drag, Ui as TooltipPortal, Un as InputGroupInput, Ur as MobileNavItem, Ut as MessageReactionCount, V as useLiftContainer, Vi as Tooltip, Vn as InputGroup, Vt as MessageReactionAddButton, Wi as TooltipProvider, Wn as useOverflowTitle, Wr as MobileNavLabel, Wt as MessageReactionErrorIndicator, Xi as Dialog, Xr as DropdownMenuFooter, Xt as MessageReactionTooltipContent, Yi as useMobileViewport, Yn as PreviewCard, Yr as DropdownMenuContent, Yt as MessageReactionQuickRow, Zi as DialogBody, Zn as PreviewCardArrow, Zr as DropdownMenuItem, Zt as MessageReactionTooltipMeta, _ as InboxItemTrailing, _a as Button, _i as PanelHeaderRoot, _n as MessageItemSenderButton, _t as MessageQuotedPreviewTimestamp, a as InboxItemContext, aa as DialogOverlay, ai as DropdownMenuRadioItem, an as MessageItemSavedIndicator, ar as PreviewCardPopup, at as MessageQuotedPreviewAttachment, b as useLatestRef, ba as defaultNativeButton, bi as PanelSection, bn as MessageItemAttachments, bt as MessageEmbedContent, c as InboxItemLeading, ca as DialogSurface, ci as DropdownMenuShortcut, cr as PreviewCardTitle, d as InboxItemMetadata, da as PanelAction, di as DropdownMenuTrigger, dt as MessageQuotedPreviewChannel, ea as DialogDescription, ei as DropdownMenuLabel, en as MessageReactionTooltipNames, er as PreviewCardDescription, et as MessageListEndFade, f as InboxItemSelection, fa as panelToggleAction, fi as Kbd, fn as MessageItemHeader, ft as MessageQuotedPreviewContent, g as InboxItemTitle, ga as DialogSheetReset, gi as PanelFooter, gn as MessageItemSenderBadges, gt as MessageQuotedPreviewThread, h as InboxItemTimestamp, ha as textLinkVariants, hi as PanelBody, hn as MessageItemSender, ht as MessageQuotedPreviewText, i as InboxItemContent, ia as DialogNav, ii as DropdownMenuRadioGroup, in as MessageItemReadReceipt, it as MessageQuotedPreview, ja as headEdgePull, ji as ListRowBody, jn as searchHit, jr as PopoverPortal, jt as MessageReferenceChip, k as useDragSensors, ka as useStackedActions, ki as PRESENCE_COLOR, kn as MessageItemGutter, kr as PopoverHeader, kt as MessageMultiSelectToolbar, l as InboxItemMarks, la as DialogTitle, li as DropdownMenuSubmenu, lr as PreviewCardTrigger, lt as MessageQuotedPreviewAuthorMeta, m as InboxItemSubtitle, ma as TextLinkExternalIcon, mi as Panel, mn as MessageItemMeta, mt as MessageQuotedPreviewLoading, n as InboxItemActions, ni as DropdownMenuPopup, nn as MessageItemBadge, nt as MessageListNotice, o as InboxItemHeading, oa as DialogPortal, oi as DropdownMenuRadioItemIndicator, on as MessageItemToolbar, or as PreviewCardPortal, ot as MessageQuotedPreviewAttachments, p as InboxItemSender, pa as TextLink, pi as KbdGroup, pn as MessageItemInlineStatus, pt as MessageQuotedPreviewHeader, q as dragInstructions, qr as DropdownMenuCheckboxItem, qt as MessageReactionPickerStatic, r as InboxItemBody, ra as DialogHeader, ri as DropdownMenuPortal, rn as MessageItemBadgeSeparator, rr as PreviewCardHeader, rt as MessageList, s as InboxItemHoverTarget, si as DropdownMenuSeparator, sn as MessageItemToolbarButton, sr as PreviewCardSeparator, st as MessageQuotedPreviewAuthor, t as InboxItem, ta as DialogFooter, tn as MessageReactionTooltipSeparator, tt as MessageListHistoryLimited, u as InboxItemMessage, ua as DialogTrigger, ui as DropdownMenuSubmenuTrigger, ut as MessageQuotedPreviewAuthorName, v as InboxItemTrigger, va as buttonVariants, vi as PanelScrollContent, vn as MessageItemSenderGroup, vt as MessageQuotedPreviewUnavailable, wa as useThemeScopeProps, wi as ScrollAreaScrollbar, wn as MessageItemEmbedded, wr as PopoverBackdrop, wt as MessageTextSelectionToolbar, x as Skeleton, xi as ScrollArea, xn as MessageItemBody, xr as Popover, xt as MessageEmbedFooter, ya as Spinner, yi as PanelScrollViewport, yn as MessageItemTime, yt as MessageEmbed, zi as ListRowTop, zn as RadioGroupIndicator, zt as MessageReferenceUnavailable } from "./inbox-item-DIUkRiT4.mjs";
+import { $ as MessageListDateDivider, $i as DialogContent, $n as PreviewCardContent, $r as DropdownMenuItemLabel, $t as MessageReactionTooltipNameText, Aa as controlIconInset, Ai as ListRow, An as MessageItem, Ar as PopoverPopup, At as MessageMultiSelectToolbarActions, B as useDragSiblingTransition, Bi as ListRowValue, Bn as RadioGroupItem, Bt as inlineChip, C as DropPlaceholder, Ca as withOverlayLayer, Ci as ScrollAreaCorner, Cn as MessageItemEdited, Cr as PopoverArrow, Ct as messageEmbed, Da as tv, Di as Checkbox, Dn as MessageItemAvatarSlot, Dr as PopoverContent, Dt as MessageMultiSelect, Ea as ThemeStateContext, Ei as ScrollAreaViewport, En as MessageItemSearchMatch, Er as PopoverClose, Et as MessageTextSelectionToolbarSeparator, Fi as ListRowGroup, Fn as AvatarGroup, Fr as PopoverViewport, Ft as MessageReferencePending, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gr as MobileNavRoot, Gt as MessageReactionGlyph, Hi as TooltipContent, Hn as InputGroupAddon, Ht as MessageReactionChip, I as DragLift, Ii as ListRowIcon, In as AvatarGroupCount, It as MessageReferenceReadMark, Jr as DropdownMenuCheckboxItemIndicator, Jt as MessageReactionQuickButton, K as createDragAnnouncements, Ki as Badge, Kr as DropdownMenu, Kt as MessageReactionPickerContent, Li as ListRowMeta, Ln as AvatarImage, Lt as MessageReferenceSuffix, Ma as headEdges, Mi as ListRowBottom, Mn as Avatar, Mr as PopoverSeparator, Na as decisionWidth, Ni as ListRowChevron, Nn as AvatarBadge, Nr as PopoverTitle, Nt as MessageReferenceIndicator, Oa as stackedActions, Oi as CheckboxIndicator, On as MessageItemContinuationTime, Or as PopoverDescription, Ot as MessageMultiSelectCheckbox, Pi as ListRowDescription, Pn as AvatarFallback, Pr as PopoverTrigger, Pt as MessageReferenceLabel, Qi as DialogClose, Qr as DropdownMenuItemCount, Qt as MessageReactionTooltipName, Ri as ListRowTitle, Rn as RadioGroup, Rt as MessageReferenceText, Sa as useParentOverlayKind, Si as ScrollAreaContent, Sn as MessageItemContent, St as MessageEmbedHeader, Ta as useTheme, Ti as ScrollAreaThumb, Tn as MessageItemFooter, Tt as MessageTextSelectionToolbarButton, U as drag, Ui as TooltipPortal, Un as InputGroupInput, Ur as MobileNavItem, Ut as MessageReactionCount, V as useLiftContainer, Vi as Tooltip, Vn as InputGroup, Vt as MessageReactionAddButton, Wi as TooltipProvider, Wn as useOverflowTitle, Wr as MobileNavLabel, Wt as MessageReactionErrorIndicator, Xi as Dialog, Xr as DropdownMenuFooter, Xt as MessageReactionTooltipContent, Yi as useMobileViewport, Yn as PreviewCard, Yr as DropdownMenuContent, Yt as MessageReactionQuickRow, Zi as DialogBody, Zn as PreviewCardArrow, Zr as DropdownMenuItem, Zt as MessageReactionTooltipMeta, _ as InboxItemTrailing, _a as Button, _i as PanelHeaderRoot, _n as MessageItemSenderButton, _t as MessageQuotedPreviewTimestamp, a as InboxItemContext, aa as DialogOverlay, ai as DropdownMenuRadioItem, an as MessageItemSavedIndicator, ar as PreviewCardPopup, at as MessageQuotedPreviewAttachment, b as useLatestRef, ba as defaultNativeButton, bi as PanelSection, bn as MessageItemAttachments, bt as MessageEmbedContent, c as InboxItemLeading, ca as DialogSurface, ci as DropdownMenuShortcut, cr as PreviewCardTitle, d as InboxItemMetadata, da as PanelAction, di as DropdownMenuTrigger, dt as MessageQuotedPreviewChannel, ea as DialogDescription, ei as DropdownMenuLabel, en as MessageReactionTooltipNames, er as PreviewCardDescription, et as MessageListEndFade, f as InboxItemSelection, fa as panelToggleAction, fi as Kbd, fn as MessageItemHeader, ft as MessageQuotedPreviewContent, g as InboxItemTitle, ga as DialogSheetReset, gi as PanelFooter, gn as MessageItemSenderBadges, gt as MessageQuotedPreviewThread, h as InboxItemTimestamp, ha as textLinkVariants, hi as PanelBody, hn as MessageItemSender, ht as MessageQuotedPreviewText, i as InboxItemContent, ia as DialogNav, ii as DropdownMenuRadioGroup, in as MessageItemReadReceipt, it as MessageQuotedPreview, ja as headEdgePull, ji as ListRowBody, jn as searchHit, jr as PopoverPortal, jt as MessageReferenceChip, k as useDragSensors, ka as useStackedActions, ki as PRESENCE_COLOR, kn as MessageItemGutter, kr as PopoverHeader, kt as MessageMultiSelectToolbar, l as InboxItemMarks, la as DialogTitle, li as DropdownMenuSubmenu, lr as PreviewCardTrigger, lt as MessageQuotedPreviewAuthorMeta, m as InboxItemSubtitle, ma as TextLinkExternalIcon, mi as Panel, mn as MessageItemMeta, mt as MessageQuotedPreviewLoading, n as InboxItemActions, ni as DropdownMenuPopup, nn as MessageItemBadge, nt as MessageListNotice, o as InboxItemHeading, oa as DialogPortal, oi as DropdownMenuRadioItemIndicator, on as MessageItemToolbar, or as PreviewCardPortal, ot as MessageQuotedPreviewAttachments, p as InboxItemSender, pa as TextLink, pi as KbdGroup, pn as MessageItemInlineStatus, pt as MessageQuotedPreviewHeader, q as dragInstructions, qr as DropdownMenuCheckboxItem, qt as MessageReactionPickerStatic, r as InboxItemBody, ra as DialogHeader, ri as DropdownMenuPortal, rn as MessageItemBadgeSeparator, rr as PreviewCardHeader, rt as MessageList, s as InboxItemHoverTarget, si as DropdownMenuSeparator, sn as MessageItemToolbarButton, sr as PreviewCardSeparator, st as MessageQuotedPreviewAuthor, t as InboxItem, ta as DialogFooter, tn as MessageReactionTooltipSeparator, tt as MessageListHistoryLimited, u as InboxItemMessage, ua as DialogTrigger, ui as DropdownMenuSubmenuTrigger, ut as MessageQuotedPreviewAuthorName, v as InboxItemTrigger, va as buttonVariants, vi as PanelScrollContent, vn as MessageItemSenderGroup, vt as MessageQuotedPreviewUnavailable, wa as useThemeScopeProps, wi as ScrollAreaScrollbar, wn as MessageItemEmbedded, wr as PopoverBackdrop, wt as MessageTextSelectionToolbar, x as Skeleton, xi as ScrollArea, xn as MessageItemBody, xr as Popover, xt as MessageEmbedFooter, ya as Spinner, yi as PanelScrollViewport, yn as MessageItemTime, yt as MessageEmbed, zi as ListRowTop, zn as RadioGroupIndicator, zt as MessageReferenceUnavailable } from "./inbox-item-D7xLTDjD.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";
@@ -2703,7 +2703,7 @@ const lightbox = tv({ slots: {
 	],
 	thumbnailOverlay: [
 		"pointer-events-none absolute inset-0 block transition-colors duration-150",
-		"bg-black/45 group-hover/lightbox-thumb:bg-black/28",
+		"bg-layer-backdrop-nested group-hover/lightbox-thumb:bg-layer-backdrop-nested/70",
 		"group-data-active/lightbox-thumb:bg-transparent"
 	],
 	close: ["pointer-events-auto"]
@@ -5964,14 +5964,14 @@ const messageImageGallery = tv({
 	slots: {
 		root: ["@container/gallery w-full max-w-[min(360px,100%)] stack-y-1"],
 		row: ["grid", "gap-1"],
-		item: [
-			"group/img relative overflow-hidden text-left",
-			"rounded-control border border-line-hairline bg-fill-muted",
-			"has-data-[slot=message-image-gallery-overlay]:opacity-70"
-		],
+		item: ["group/img relative overflow-hidden text-left", "rounded-control border border-line-hairline bg-fill-muted"],
 		media: "block size-full ",
-		overlay: "absolute inset-0 flex items-center justify-center",
-		preview: ["absolute inset-0", "outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"],
+		overlay: "absolute inset-0 flex items-center justify-center bg-layer-veil",
+		preview: [
+			"absolute inset-0",
+			"transition-colors duration-75 hover:bg-ink-8",
+			"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground"
+		],
 		action: [
 			"absolute z-10 hidden items-center justify-center",
 			"focus:flex",
@@ -6317,12 +6317,7 @@ const messageForwardedBundle = tv({
 	},
 	variants: {
 		fullWidth: { true: { root: "w-full max-w-none" } },
-		collapsed: { true: { items: [
-			"max-h-40 overflow-clip",
-			"after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-10 after:bg-linear-to-t",
-			"data-[tight-fold]:after:h-5",
-			"after:from-layer-card after:via-layer-card/80 after:to-layer-card/0"
-		] } }
+		collapsed: { true: { items: ["max-h-40 overflow-clip", "mask-fade-b data-tight-fold:mask-fade-b-edge"] } }
 	}
 });
 const messageForwardedBundleItem = tv({
@@ -8127,9 +8122,9 @@ const composer = tv({ slots: {
 		"font-sans text-body font-normal text-foreground",
 		"placeholder:text-foreground-hint"
 	],
-	toolbar: ["flex items-center justify-between", "mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-2"],
-	actions: ["flex items-center gap-2"],
-	meta: ["flex items-center", "gap-2"],
+	toolbar: ["flex items-center justify-between", "mx-[calc(var(--control-embedded-inset)-0.75rem-1px)] gap-embedded-inset"],
+	actions: ["flex items-center gap-embedded-inset"],
+	meta: ["flex items-center", "gap-embedded-inset"],
 	iconButton: [
 		"size-8 rounded-chip text-foreground-muted",
 		"disabled:border-transparent disabled:bg-transparent",
@@ -8267,7 +8262,7 @@ const composerAttachment = tv({
 		attachmentUploadingOverlay: [
 			"absolute inset-0 z-10 flex flex-col items-center justify-center px-1",
 			"text-center",
-			"rounded-control bg-layer-card/80",
+			"rounded-control bg-layer-veil",
 			"font-mono text-mono-meta font-bold text-foreground"
 		],
 		attachmentUploadProgressBar: [
@@ -8280,7 +8275,7 @@ const composerAttachment = tv({
 			"absolute inset-0 z-10 flex flex-col items-center justify-center px-1",
 			"[border-width:var(--ca-overlay-border,2px)]",
 			"text-center",
-			"rounded-control border-danger-strong bg-layer-card/90",
+			"rounded-control border-danger-strong bg-layer-veil",
 			"font-sans text-caption font-semibold text-danger-strong"
 		],
 		attachmentRemove: [
@@ -10431,9 +10426,7 @@ const tabs = tv({
 			"relative isolate flex w-max max-w-full",
 			"overscroll-contain whitespace-nowrap",
 			"scrollbar-none [&::-webkit-scrollbar]:hidden",
-			"data-[overflow=end]:mask-[linear-gradient(to_right,black_calc(100%-32px),transparent)]",
-			"data-[overflow=start]:mask-[linear-gradient(to_right,transparent,black_32px)]",
-			"data-[overflow=both]:mask-[linear-gradient(to_right,transparent,black_32px,black_calc(100%-32px),transparent)]"
+			"mask-fade-x"
 		],
 		background: ["", "hidden"],
 		tab: [
@@ -11113,13 +11106,9 @@ function AppShellSidebarSlot({ className, id: idProp, render, ...props }) {
 		id,
 		inert: collapsed ? true : void 0,
 		className: sidebarSlot({ className: cn(className, sidebar?.collapsible && [
-			"will-change-[opacity]",
-			"transition-opacity duration-160 ease-slide",
-			"motion-reduce:transition-none",
 			"group-data-[state=expanded]/app-shell:relative group-data-[state=expanded]/app-shell:z-1",
 			"group-data-[state=collapsed]/app-shell:pointer-events-none",
-			"group-data-[state=collapsed]/app-shell:opacity-0",
-			"group-data-[state=collapsed]/app-shell:duration-120"
+			"group-data-[state=collapsed]/app-shell:opacity-0"
 		]) })
 	};
 	return useRender({
@@ -11155,65 +11144,17 @@ function AppShellOverlaySlot({ className, render, ...props }) {
 }
 function AppShellMainSlot({ className, overlay = false, render, ...props }) {
 	const { mainSlot } = appShell({ overlay });
-	const sidebar = useOptionalAppShellSidebar();
-	const collapsible = sidebar?.collapsible ?? false;
-	const sliding = useSidebarSlide(collapsible, sidebar?.open ?? true);
+	const collapsible = useOptionalAppShellSidebar()?.collapsible ?? false;
 	const defaultProps = {
 		"data-slot": "app-shell-main-slot",
-		"data-sliding": sliding.active ? "" : void 0,
-		className: mainSlot({ className: cn(className, collapsible && [
-			"absolute inset-y-0 right-0 left-0",
-			"data-sliding:z-2",
-			"transition-[left] duration-220 ease-slide",
-			"motion-reduce:transition-none",
-			"group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"
-		]) })
+		className: mainSlot({ className: cn(className, collapsible && ["absolute inset-y-0 right-0 left-0", "group-data-[state=collapsed]/app-shell:-left-(--app-shell-sidebar-width)"]) })
 	};
 	return useRender({
 		defaultTagName: "main",
 		render,
-		ref: sliding.ref,
 		props: mergeProps(defaultProps, props)
 	});
 }
-function useSidebarSlide(collapsible, open) {
-	const elementRef = useRef(null);
-	const [slide, setSlide] = useState({
-		active: false,
-		open
-	});
-	if (slide.open !== open) setSlide({
-		active: collapsible,
-		open
-	});
-	const active = slide.active;
-	const ref = useCallback((element) => {
-		elementRef.current = element;
-	}, []);
-	useEffect(() => {
-		if (!active) return;
-		const transitions = elementRef.current?.getAnimations?.().filter((animation) => "transitionProperty" in animation && animation.transitionProperty === "left" && animation.effect?.getComputedTiming().activeDuration !== 0) ?? [];
-		let current = true;
-		const settle = () => {
-			if (current) setSlide((state) => state.open === open ? {
-				active: false,
-				open
-			} : state);
-		};
-		if (transitions.length === 0) {
-			settle();
-			return;
-		}
-		Promise.allSettled(transitions.map((transition) => transition.finished)).then(settle);
-		return () => {
-			current = false;
-		};
-	}, [active, open]);
-	return {
-		active,
-		ref
-	};
-}
 function AppShellSidebarTrigger(props) {
 	const sidebar = useOptionalAppShellSidebar();
 	if (!sidebar?.collapsible) return null;
@@ -12168,7 +12109,7 @@ const taskStatusStrong = tv({ variants: { status: {
 const taskCardStatus = tv({ base: [
 	"inline-flex min-w-0 shrink-0 touch-manipulation items-center",
 	"transition-[filter,opacity] duration-100 outline-none",
-	"data-[busy=true]:pointer-events-none data-[busy=true]:cursor-wait data-[busy=true]:opacity-60 data-[busy=true]:disabled:opacity-100",
+	"data-[busy=true]:pointer-events-none data-[busy=true]:cursor-wait data-[busy=true]:opacity-dimmed data-[busy=true]:disabled:opacity-100",
 	"h-[22px] gap-1.5 rounded-chip border-0 px-[7px] py-0",
 	"font-sans text-[12px] leading-4 font-semibold text-foreground",
 	"[&:not(:has([data-slot=task-card-status-label]))]:hidden",
@@ -15350,7 +15291,7 @@ function TaskChip({ status, loading = false, variant = "default", size = "defaul
 		"data-slot": "task-chip",
 		"data-inline-reference": "",
 		"data-loading": loading ? "true" : void 0,
-		className: cn(root({ className }), loading && "pointer-events-none opacity-60"),
+		className: cn(root({ className }), loading && "pointer-events-none opacity-dimmed"),
 		children
 	};
 	return useRender({

package/dist/styles.css

@@ -191,6 +191,7 @@
   --color-layer-popover: var(--layer-popover);
   --color-layer-backdrop: var(--layer-backdrop);
   --color-layer-backdrop-nested: var(--layer-backdrop-nested);
+  --color-layer-veil: var(--layer-veil);
   --color-layer-card: var(--layer-card);
   --color-layer-hud: var(--layer-hud);
   --color-foreground-on-hud: var(--foreground-on-hud);
@@ -663,6 +664,56 @@ textarea:-webkit-autofill:disabled {
   }
 }
 
+/* Dimmed: something present but not active, deleted, offline or still
+   pending, at 60% (design/foundations/states.md#dimmed). Lighter than the 40%
+   of a drag origin, which says "it was here", not "it is here, inactive". */
+@utility opacity-dimmed {
+  opacity: var(--opacity-dimmed);
+}
+
+/* Content fades (design/foundations/spacing.md#edges-fade): a mask, never a
+   colour gradient, so whatever is behind the content (a row's hover or
+   located fill, a card, a tint) shows through the fade unchanged.
+   mask-fade-t / mask-fade-b fade the top or bottom edge over fade-content
+   (48px), where content is cut: a fold, a glimpse. mask-fade-x fades the
+   sides of a strip that scrolls sideways over fade-edge (24px), on the side
+   its data-overflow names (start, end or both) and nowhere without it.
+   mask-fade-t-edge / mask-fade-b-edge take the edge length instead, for a
+   fold too short to give 48px to the fade. */
+@utility mask-fade-t {
+  mask-image: linear-gradient(to bottom, transparent, oklch(0 0 0) var(--fade-content));
+}
+
+@utility mask-fade-t-edge {
+  mask-image: linear-gradient(to bottom, transparent, oklch(0 0 0) var(--fade-edge));
+}
+
+@utility mask-fade-b {
+  mask-image: linear-gradient(to top, transparent, oklch(0 0 0) var(--fade-content));
+}
+
+@utility mask-fade-b-edge {
+  mask-image: linear-gradient(to top, transparent, oklch(0 0 0) var(--fade-edge));
+}
+
+@utility mask-fade-x {
+  &[data-overflow="start"] {
+    mask-image: linear-gradient(to right, transparent, oklch(0 0 0) var(--fade-edge));
+  }
+  &[data-overflow="end"] {
+    mask-image: linear-gradient(to left, transparent, oklch(0 0 0) var(--fade-edge));
+  }
+  &[data-overflow="both"] {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      oklch(0 0 0) var(--fade-edge),
+      oklch(0 0 0) calc(100% - var(--fade-edge)),
+      transparent
+    );
+  }
+}
+
 /* Drag and drop (design/patterns/drag-and-drop.md). While something is
    lifted, DragLift sets data-dragging on the root, and DragRefusalHint sets
    data-drag-refused while the place under the hand refuses it: the cursor

package/dist/tokens.json

@@ -1377,6 +1377,25 @@
         }
       }
     },
+    "veil": {
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [1, 0, 0],
+        "alpha": 0.8
+      },
+      "$description": "The cover over something busy or loading in place: an image uploading or that failed, a preview being prepared. The page at 80%, so what is under it shows through, dimmed, and a default-colour Spinner on it reads in both modes. Translucent by contract, like the two backdrops.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.2213, 0.0038, 106.71],
+              "alpha": 0.8
+            }
+          }
+        }
+      }
+    },
     "card": {
       "$value": {
         "colorSpace": "oklch",
@@ -2530,6 +2549,27 @@
       }
     }
   },
+  "fade": {
+    "$type": "dimension",
+    "edge": {
+      "$value": { "value": 24, "unit": "px" },
+      "$description": "The fade at the edge of a strip that scrolls sideways (mask-fade-x): long enough to say more is there, short enough to leave the item under it readable.",
+      "$extensions": { "build.botiverse.raft": { "scope": "root" } }
+    },
+    "content": {
+      "$value": { "value": 48, "unit": "px" },
+      "$description": "The fade where content is cut (mask-fade-t, mask-fade-b): a long message folded, a glimpse of hidden history. About two lines, so the cut reads as a fold, not a clipped line.",
+      "$extensions": { "build.botiverse.raft": { "scope": "root" } }
+    }
+  },
+  "opacity": {
+    "$type": "number",
+    "dimmed": {
+      "$value": 0.6,
+      "$description": "Something present but not active: deleted, offline or still pending (opacity-dimmed). The place a dragged item came from keeps its own 0.4 (data-drag-origin).",
+      "$extensions": { "build.botiverse.raft": { "scope": "root" } }
+    }
+  },
   "motion": {
     "drag-settle-duration": {
       "$type": "duration",

package/dist/wip.d.mts

@@ -1,8 +1,8 @@
 import { $ as MessageListJumpPillProps, Aa as PopoverBody, As as DialogCommit, B as DragMessages, Bs as DialogContentProps, C as InboxItemProps, Co as DropdownMenuLinkItemProps, Di as PreviewCardEyebrowProps, Ei as PreviewCardEyebrow, G as dragMessages, Gs as DialogFooterNoteProps, H as DragPlace, J as MessageListJumpPill, K as MessageListJumpControls, Ls as DialogClose, Mi as PreviewCardMeta, Ms as DialogSheetContent, Ni as PreviewCardMetaProps, Ns as DialogSheetContentProps, Oi as PreviewCardFooter, Os as TextLinkProps, Ps as Dialog, Q as MessageListJumpPillGroupProps, R as DEFAULT_DRAG_MESSAGES, Sa as MobileNavServerPopoverRowProps, So as DropdownMenuLinkItem, Ta as PopoverActionsProps, U as createDragAnnouncements, V as DragNamed, W as dragInstructions, Ws as DialogFooterNote, X as MessageListJumpPillDismissProps, Y as MessageListJumpPillDismiss, Z as MessageListJumpPillGroup, _a as MobileNavServerPopoverRowBodyProps, _c as VariantProps, _i as PreviewCardActionsProps, _s as ListRowProps, _t as MessageQuotedPreviewAuthorDelegatedByProps, aa as MobileNavServerPopoverContentProps, ba as MobileNavServerPopoverRowLabel, bi as PreviewCardBody, ca as MobileNavServerPopoverDestinations, cc as DialogTrigger, da as MobileNavServerPopoverGroupProps, dn as MessageReferenceReadMarkProps, dr as MessageItemDelegatedBy, fa as MobileNavServerPopoverList, fr as MessageItemDelegatedByButton, ga as MobileNavServerPopoverRowBody, gi as PreviewCardActions, gr as MessageItemDelegatedByProps, gt as MessageQuotedPreviewAuthorDelegatedBy, ha as MobileNavServerPopoverRow, hr as MessageItemDelegatedByNameProps, ia as MobileNavServerPopoverContent, ja as PopoverBodyProps, js as DialogCommitProps, ki as PreviewCardFooterProps, la as MobileNavServerPopoverDestinationsProps, lr as MessageItemDelegatedAvatar, ma as MobileNavServerPopoverProps, mr as MessageItemDelegatedByName, na as MobileNavServerItemProps, nc as DialogSheetBack, nn as MessageReferenceIcon, oa as MobileNavServerPopoverDestination, pa as MobileNavServerPopoverListProps, pc as ButtonProps, pr as MessageItemDelegatedByButtonProps, q as MessageListJumpControlsProps, ra as MobileNavServerPopover, rc as DialogSheetBackProps, rn as MessageReferenceIconProps, sa as MobileNavServerPopoverDestinationProps, sc as DialogTitleProps, ta as MobileNavServerItem, u as InboxItemDensity, ua as MobileNavServerPopoverGroup, un as MessageReferenceReadMark, ur as MessageItemDelegatedAvatarProps, va as MobileNavServerPopoverRowDescription, vc as DataAttributes, wa as PopoverActions, xa as MobileNavServerPopoverRowLabelProps, xi as PreviewCardBodyProps, ya as MobileNavServerPopoverRowDescriptionProps, yc as StyledProps, z as DragAnnouncementSource } from "./inbox-item-B8eXIikq.mjs";
-import { CSSProperties, ComponentProps, ComponentPropsWithRef, PointerEvent, ReactNode, RefObject } from "react";
+import { CSSProperties, ComponentProps, ComponentPropsWithRef, ReactNode, RefObject } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import { Announcements, CollisionDetection, DragEndEvent, DragOverEvent, DragStartEvent, DropAnimation, KeyboardCoordinateGetter, KeyboardSensorOptions, Modifier, PointerSensor, PointerSensorOptions, ScreenReaderInstructions, TouchSensor, TouchSensorOptions, UniqueIdentifier } from "@dnd-kit/core";
+import { Announcements, CollisionDetection, DragEndEvent, DragOverEvent, DragStartEvent, DropAnimation, KeyboardCoordinateGetter, KeyboardSensorOptions, Modifier, PointerSensor, ScreenReaderInstructions, TouchSensor, TouchSensorOptions, UniqueIdentifier } from "@dnd-kit/core";
 import { Combobox } from "@base-ui/react/combobox";
 import { SortingStrategy } from "@dnd-kit/sortable";
 import { Meter as Meter$1 } from "@base-ui/react/meter";
@@ -305,14 +305,10 @@ type HoldThenMoveOptions = {
 export declare const HoldThenMoveTouchSensor: typeof TouchSensor;
 /**
  * dnd-kit's PointerSensor for a mouse and a pen only: a finger's pointerdown is
- * left to `HoldThenMoveTouchSensor`.
+ * left to `HoldThenMoveTouchSensor`. While it holds a drag, Escape puts the
+ * item back and reaches nothing else.
  */
-export declare class MouseOnlyPointerSensor extends PointerSensor {
-  static activators: {
-    eventName: "onPointerDown";
-    handler: (event: PointerEvent, options: PointerSensorOptions) => boolean;
-  }[];
-}
+export declare const MouseOnlyPointerSensor: typeof PointerSensor;
 /**
  * `useSensor(HoldThenMoveTouchSensor, …)` with the activation the sensor relies
  * on: no constraint dnd-kit would act on by itself, so only a move after the
@@ -358,6 +354,11 @@ type DragSensorsOptions = {
  * - the keyboard: Space picks up, the arrows move, Space drops, Escape puts
  *   back. Enter never starts a drag.
  *
+ * However the drag started, Escape during it only puts the item back: it is
+ * taken in the capture phase on the window and stopped, so no app handler
+ * (a dialog, a panel, a popover that closes on Escape) hears it. Once the drag
+ * is over, Escape reaches the app again.
+ *
  * Pass the options, or only the keyboard's `coordinateGetter`.
  */
 export declare function useDragSensors(options?: DragSensorsOptions | KeyboardCoordinateGetter): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
@@ -539,6 +540,11 @@ type DragRefusalHintProps = Omit<ComponentPropsWithRef<"div">, "children" | "ref
  * not-allowed cursor. Render it only while the place is refused, inside the
  * `DndContext`, with no placeholder anywhere. Announce the reason as well:
  * the chip is not read out.
+ *
+ * The chip sits right of and below the pointer. Near the window's right edge
+ * it goes left of the pointer and of the lifted copy, near the bottom edge
+ * above the pointer; it never sits under the copy, and always stays 8px inside
+ * the window. Its size is measured when its content changes, not every frame.
  */
 export declare function DragRefusalHint({ children, container, className, style, ...props }: DragRefusalHintProps): import("react").ReactPortal | null;
 //#endregion

package/dist/wip.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $i as DialogContent, A as DRAG_AUTO_SCROLL_ZONE_PX, Ai as ListRow, B as useDragSiblingTransition, Bn as RadioGroupItem, Br as TOUCH_DRAG_TOLERANCE_PX, C as DropPlaceholder, D as listKeyboardCoordinates, Da as tv, Di as Checkbox, E as MOUSE_DRAG_DISTANCE_PX, F as DROP_GLIDE, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gn as measureContent, H as LIFT_CLASS, Hi as TooltipContent, Hn as InputGroupAddon, Hr as useMouseOnlyPointerSensor, I as DragLift, Ir as HoldThenMoveTouchSensor, It as MessageReferenceReadMark, J as dragMessages, Ji as DialogSheetContent, Jn as readNow, K as createDragAnnouncements, Kn as measureElement, L as ORIGIN_OPACITY, Li as ListRowMeta, Lr as MouseOnlyPointerSensor, M as DRAG_LIFT_Z_INDEX, Mi as ListRowBottom, Mt as MessageReferenceIcon, N as DRAG_SETTLE, O as useDragAcrossLists, P as DRAG_SIBLING_TRANSITION, Pi as ListRowDescription, Q as MessageListJumpPillGroup, Qi as DialogClose, Qn as PreviewCardBody, R as cancelDrag, Ri as ListRowTitle, Rn as RadioGroup, Rr as TOUCH_DRAG_DISTANCE_PX, S as DragRefusalHint, Sa as useParentOverlayKind, Sr as PopoverActions, T as DragRemeasure, Ta as useTheme, Tr as PopoverBody, Un as InputGroupInput, Vi as Tooltip, Vn as InputGroup, Vr as useHoldThenMoveTouchSensor, W as DEFAULT_DRAG_MESSAGES, Wn as useOverflowTitle, X as MessageListJumpPill, Xi as Dialog, Xn as PreviewCardActions, Y as MessageListJumpControls, Z as MessageListJumpPillDismiss, _ as InboxItemTrailing, _a as Button$1, _r as MobileNavServerPopoverRow, a as InboxItemContext, b as useLatestRef, ba as defaultNativeButton, br as MobileNavServerPopoverRowLabel, c as InboxItemLeading, cn as MessageItemDelegatedAvatar, ct as MessageQuotedPreviewAuthorDelegatedBy, dn as MessageItemDelegatedByName, dr as MobileNavServerPopover, fr as MobileNavServerPopoverContent, g as InboxItemTitle, gr as MobileNavServerPopoverList, h as InboxItemTimestamp, hr as MobileNavServerPopoverGroup, i as InboxItemContent, ir as PreviewCardMeta, j as DRAG_KEYBOARD_OFFSET_PX, ji as ListRowBody, k as useDragSensors, la as DialogTitle, ln as MessageItemDelegatedBy, mr as MobileNavServerPopoverDestinations, na as DialogFooterNote, nr as PreviewCardFooter, o as InboxItemHeading, pa as TextLink, pr as MobileNavServerPopoverDestination, q as dragInstructions, qi as DialogCommit, qn as observeTruncation, r as InboxItemBody, sa as DialogSheetBack, t as InboxItem, ti as DropdownMenuLinkItem, tr as PreviewCardEyebrow, ua as DialogTrigger, un as MessageItemDelegatedByButton, ur as MobileNavServerItem, vr as MobileNavServerPopoverRowBody, w as DRAG_KEYBOARD_CODES, wa as useThemeScopeProps, x as Skeleton, xa as OverlayLayerProvider, y as inboxItem, ya as Spinner, yr as MobileNavServerPopoverRowDescription, z as keepGrabInside, zi as ListRowTop, zr as TOUCH_DRAG_HOLD_MS } from "./inbox-item-DIUkRiT4.mjs";
+import { $i as DialogContent, A as DRAG_AUTO_SCROLL_ZONE_PX, Ai as ListRow, B as useDragSiblingTransition, Bn as RadioGroupItem, Br as TOUCH_DRAG_TOLERANCE_PX, C as DropPlaceholder, D as listKeyboardCoordinates, Da as tv, Di as Checkbox, E as MOUSE_DRAG_DISTANCE_PX, F as DROP_GLIDE, G as SILENT_DRAG_ANNOUNCEMENTS, Gi as TooltipTrigger, Gn as measureContent, H as LIFT_CLASS, Hi as TooltipContent, Hn as InputGroupAddon, Hr as useMouseOnlyPointerSensor, I as DragLift, Ir as HoldThenMoveTouchSensor, It as MessageReferenceReadMark, J as dragMessages, Ji as DialogSheetContent, Jn as readNow, K as createDragAnnouncements, Kn as measureElement, L as ORIGIN_OPACITY, Li as ListRowMeta, Lr as MouseOnlyPointerSensor, M as DRAG_LIFT_Z_INDEX, Mi as ListRowBottom, Mt as MessageReferenceIcon, N as DRAG_SETTLE, O as useDragAcrossLists, P as DRAG_SIBLING_TRANSITION, Pi as ListRowDescription, Q as MessageListJumpPillGroup, Qi as DialogClose, Qn as PreviewCardBody, R as cancelDrag, Ri as ListRowTitle, Rn as RadioGroup, Rr as TOUCH_DRAG_DISTANCE_PX, S as DragRefusalHint, Sa as useParentOverlayKind, Sr as PopoverActions, T as DragRemeasure, Ta as useTheme, Tr as PopoverBody, Un as InputGroupInput, Vi as Tooltip, Vn as InputGroup, Vr as useHoldThenMoveTouchSensor, W as DEFAULT_DRAG_MESSAGES, Wn as useOverflowTitle, X as MessageListJumpPill, Xi as Dialog, Xn as PreviewCardActions, Y as MessageListJumpControls, Z as MessageListJumpPillDismiss, _ as InboxItemTrailing, _a as Button$1, _r as MobileNavServerPopoverRow, a as InboxItemContext, b as useLatestRef, ba as defaultNativeButton, br as MobileNavServerPopoverRowLabel, c as InboxItemLeading, cn as MessageItemDelegatedAvatar, ct as MessageQuotedPreviewAuthorDelegatedBy, dn as MessageItemDelegatedByName, dr as MobileNavServerPopover, fr as MobileNavServerPopoverContent, g as InboxItemTitle, gr as MobileNavServerPopoverList, h as InboxItemTimestamp, hr as MobileNavServerPopoverGroup, i as InboxItemContent, ir as PreviewCardMeta, j as DRAG_KEYBOARD_OFFSET_PX, ji as ListRowBody, k as useDragSensors, la as DialogTitle, ln as MessageItemDelegatedBy, mr as MobileNavServerPopoverDestinations, na as DialogFooterNote, nr as PreviewCardFooter, o as InboxItemHeading, pa as TextLink, pr as MobileNavServerPopoverDestination, q as dragInstructions, qi as DialogCommit, qn as observeTruncation, r as InboxItemBody, sa as DialogSheetBack, t as InboxItem, ti as DropdownMenuLinkItem, tr as PreviewCardEyebrow, ua as DialogTrigger, un as MessageItemDelegatedByButton, ur as MobileNavServerItem, vr as MobileNavServerPopoverRowBody, w as DRAG_KEYBOARD_CODES, wa as useThemeScopeProps, x as Skeleton, xa as OverlayLayerProvider, y as inboxItem, ya as Spinner, yr as MobileNavServerPopoverRowDescription, z as keepGrabInside, zi as ListRowTop, zr as TOUCH_DRAG_HOLD_MS } from "./inbox-item-D7xLTDjD.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, Search, 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.36.0",
+  "version": "0.37.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",