@botiverse/raft-ui 0.36.1 → 0.37.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [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

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-BB6vO4PO.mjs → inbox-item-D7xLTDjD.mjs}

@@ -4245,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)]"
 		],

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-BB6vO4PO.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({
@@ -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: [
@@ -12116,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",
@@ -15298,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.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-BB6vO4PO.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.1",
+  "version": "0.37.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",