@botiverse/raft-ui 0.47.1 → 0.49.0

package/dist/styles.css

@@ -136,6 +136,24 @@
   --color-brutal-cream: var(--palette-cream-200);
 }
 
+/* A column's content margin (design/foundations/alignment.md#usage): 16px on a
+   phone, 20px from 768px (`md`). Heads, notices and footers pad by it
+   (lib/head-edges.ts). A column of list cells sets it to 20px at every width
+   (`listColumnMargin`), where its rows' content starts (8px shape inset +
+   12px), so its head, toolbar and rows share one line on a phone too. */
+@layer theme {
+  :root,
+  :host {
+    --column-margin: 16px;
+  }
+  @media (width >= 48rem) {
+    :root,
+    :host {
+      --column-margin: 20px;
+    }
+  }
+}
+
 /* Desktop type: from 768px (Tailwind's `md`, where the desktop layout begins)
    with a mouse or trackpad, the same query as the desktop metrics in
    foundation.css. Feishu's PC scale, 14/22 for reading, 12px for notes (on an
@@ -299,12 +317,16 @@
   --color-fill-subtle: var(--fill-subtle);
   --color-fill-medium: var(--fill-medium);
   --color-fill-frame-medium: var(--fill-frame-medium);
+  --color-fill-cell-hover: var(--fill-cell-hover);
+  --color-fill-cell-press: var(--fill-cell-press);
+  --color-fill-cell-selected: var(--fill-cell-selected);
   --color-layer-code: var(--layer-code);
   --color-foreground-link: var(--foreground-link);
   --color-sticker-ink: var(--sticker-ink);
   --color-sticker-paper: var(--sticker-paper);
   --color-sticker-edge: var(--sticker-edge);
   --color-sticker-medium: var(--sticker-medium);
+  --color-sticker-ink-medium: var(--sticker-ink-medium);
   --color-presence-online: var(--presence-online);
   --color-presence-busy: var(--presence-busy);
   --color-presence-busy-soft: var(--presence-busy-soft);
@@ -624,7 +646,7 @@ textarea:-webkit-autofill:disabled {
 @keyframes raft-located {
   0%,
   60% {
-    --located-fill: var(--info-soft);
+    --located-fill: var(--located-tint, var(--info-soft));
     animation-timing-function: ease-out;
   }
   100% {
@@ -635,20 +657,21 @@ textarea:-webkit-autofill:disabled {
 @keyframes raft-located-still {
   from,
   to {
-    --located-fill: var(--info-soft);
+    --located-fill: var(--located-tint, var(--info-soft));
   }
 }
 
 /* The shorthand replaces any animation of the element's own while it is
    located; no raft-ui row has one. It runs on every located item, marked or
    not, so a mark that comes and goes (a popup opened and closed) doesn't
-   start the highlight over. */
-[data-located] {
+   start the highlight over. A list cell runs it on its shape instead (below). */
+[data-located]:not(.list-cell) {
   animation: var(--located-animation, raft-located) 2s linear;
 }
 
 [data-located]:not(
   [data-message-item],
+  .list-cell,
   :active,
   [data-selected]:not([data-selected="false"]),
   [data-active="true"],
@@ -659,6 +682,28 @@ textarea:-webkit-autofill:disabled {
   background-image: linear-gradient(var(--located-fill), var(--located-fill));
 }
 
+/* A list cell (lib/list-cell.ts, marked with the `list-cell` class, which
+   survives a row rendered through another part's `render`, where its
+   data-slot doesn't) draws its states on its inset ::before shape and leaves
+   the row transparent, so its located fill is painted there too, in the
+   cell's selected tint (fill-cell-selected, stronger in dark). The animation
+   runs on the shape: the registered fill doesn't inherit. */
+.list-cell[data-located]::before {
+  --located-tint: var(--fill-cell-selected);
+  animation: var(--located-animation, raft-located) 2s linear;
+}
+
+.list-cell[data-located]:not(
+    :active,
+    [data-selected]:not([data-selected="false"]),
+    [data-active]:not([data-active="false"]),
+    [aria-selected="true"],
+    [aria-current]:not([aria-current="false"]),
+    [data-popup-open]
+  )::before {
+  background-image: linear-gradient(var(--located-fill), var(--located-fill));
+}
+
 /* Reduced motion: the same 2s, held still, then off without a fade. */
 @media (prefers-reduced-motion: reduce) {
   [data-located] {
@@ -830,6 +875,10 @@ textarea:-webkit-autofill:disabled {
   background-image: linear-gradient(var(--sticker-medium), var(--sticker-medium));
 }
 
+@utility overlay-sticker-ink-medium {
+  background-image: linear-gradient(var(--sticker-ink-medium), var(--sticker-ink-medium));
+}
+
 @utility overlay-frame-medium {
   background-image: linear-gradient(var(--fill-frame-medium), var(--fill-frame-medium));
 }
@@ -885,6 +934,51 @@ textarea:-webkit-autofill:disabled {
   background-image: linear-gradient(var(--fill-subtle), var(--fill-subtle));
 }
 
+/* The marker of a list cell (lib/list-cell.ts), read by the located rules
+   above. */
+@utility list-cell {
+  --list-cell: 1;
+}
+
+/* The scrollbar of a scroller that holds list cells (design/patterns/
+   lists.md): an 8px classic scrollbar with a 4px thumb, so a cell's
+   end inset can come out of the scrollbar's own width and its fill sits 8px
+   from both edges of the list. Styling ::-webkit-scrollbar makes Chromium
+   draw this classic, always-visible 8px bar even where the platform's own
+   scrollbar would overlay (a phone, macOS by default), so the bar takes 8px
+   of room wherever the list scrolls. Pair it with useScrollbarSize, which
+   publishes the width the bar really takes (8px, or 0 where it doesn't
+   show), so the shape stays 8px from both edges either way. scrollbar-width and
+   scrollbar-color stay auto: either one switches Chromium off the
+   ::-webkit-scrollbar styling. Firefox takes its thin scrollbar, 8px. */
+@utility scrollbar-list {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    min-height: 32px;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    background: color-mix(in oklch, var(--foreground) 24%, transparent);
+    background-clip: padding-box;
+  }
+  @media (hover: hover) {
+    &:hover::-webkit-scrollbar-thumb {
+      background-color: color-mix(in oklch, var(--foreground) 36%, transparent);
+    }
+  }
+  @supports not selector(::-webkit-scrollbar) {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklch, var(--foreground) 24%, transparent) transparent;
+  }
+}
+
 /* Space and rules between siblings: stack-y-* / stack-x-* and rule-y / rule-x
    / rule-<colour>. Use these, never Tailwind's space-* and divide-*.
 

package/dist/tokens.json

@@ -1567,6 +1567,51 @@
           }
         }
       }
+    },
+    "cell-hover": {
+      "$description": "A list cell's hover and its menu-open fill (lib/list-cell.ts), drawn on the cell's inset shape. fill-subtle in light. In dark it steps up to 7.5% ink, so the rounded shape reads on a dark surface, where fill-subtle's 3% barely shows. Rows only: the global tiers don't change.",
+      "$value": "{fill.subtle}",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.075
+            }
+          }
+        }
+      }
+    },
+    "cell-press": {
+      "$description": "A list cell's press fill, the same with a mouse and on a touch screen. fill-medium in light. In dark 12% ink, a clear step over the cell's dark hover.",
+      "$value": "{fill.medium}",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.9843, 0.004, 106.47],
+              "alpha": 0.12
+            }
+          }
+        }
+      }
+    },
+    "cell-selected": {
+      "$description": "A list cell that is selected or open beside its list (an active InboxItem, a selected ListRow), and the located highlight on a cell. info-soft in light. In dark the cyan at 38% instead of 18%, so a selected cell stands out from a hovered one.",
+      "$value": "{info.soft}",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "modes": {
+            "dark": {
+              "colorSpace": "oklch",
+              "components": [0.452, 0.0862, 225.67],
+              "alpha": 0.38
+            }
+          }
+        }
+      }
     }
   },
   "line": {
@@ -2849,6 +2894,14 @@
         "components": [0.1813, 0.005, 17.62],
         "alpha": 0.1
       }
+    },
+    "ink-medium": {
+      "$description": "Hover tier medium on an ink sticker (the server tile in the rail or the sidebar header): hover, press and open, 6% paper in both modes, since ink laid over ink doesn't show.",
+      "$value": {
+        "colorSpace": "oklch",
+        "components": [1, 0, 0],
+        "alpha": 0.06
+      }
     }
   },
   "presence": {

package/dist/wip.d.mts

@@ -1,4 +1,4 @@
-import { $ as MessageListJumpPillProps, Ai as PreviewCardFooter, As as TextLinkProps, B as DragMessages, C as InboxItemProps, Ca as MobileNavServerPopoverRowLabelProps, Ci as PreviewCardBodyProps, Da as PopoverActionsProps, Ea as PopoverActions, Fi as PreviewCardMetaProps, Fs as DialogSheetContentProps, G as dragMessages, H as DragPlace, Hs as DialogContentProps, Is as Dialog, J as MessageListJumpPill, K as MessageListJumpControls, Ks as DialogFooterNote, Ma as PopoverBody, Ms as DialogCommit, Na as PopoverBodyProps, Ns as DialogCommitProps, Oi as PreviewCardEyebrow, Pi as PreviewCardMeta, Ps as DialogSheetContent, Q as MessageListJumpPillGroupProps, R as DEFAULT_DRAG_MESSAGES, Sa as MobileNavServerPopoverRowLabel, Si as PreviewCardBody, To as DropdownMenuLinkItemProps, U as createDragAnnouncements, V as DragNamed, W as dragInstructions, X as MessageListJumpPillDismissProps, Y as MessageListJumpPillDismiss, Z as MessageListJumpPillGroup, _a as MobileNavServerPopoverRow, _t as MessageQuotedPreviewAuthorDelegatedByProps, aa as MobileNavServerPopover, ac as DialogSheetBackProps, ba as MobileNavServerPopoverRowDescription, bc as DataAttributes, ca as MobileNavServerPopoverDestination, ci as AvatarGroupButton, da as MobileNavServerPopoverDestinationsProps, dn as MessageReferenceReadMarkProps, dr as MessageItemDelegatedBy, fa as MobileNavServerPopoverGroup, fr as MessageItemDelegatedByButton, ga as MobileNavServerPopoverProps, gr as MessageItemDelegatedByProps, gt as MessageQuotedPreviewAuthorDelegatedBy, ha as MobileNavServerPopoverListProps, hc as ButtonProps, hr as MessageItemDelegatedByNameProps, ia as MobileNavServerItemProps, ic as DialogSheetBack, ji as PreviewCardFooterProps, ki as PreviewCardEyebrowProps, la as MobileNavServerPopoverDestinationProps, lc as DialogTitleProps, li as AvatarGroupButtonProps, lr as MessageItemDelegatedAvatar, ma as MobileNavServerPopoverList, mr as MessageItemDelegatedByName, nn as MessageReferenceIcon, oa as MobileNavServerPopoverContent, pa as MobileNavServerPopoverGroupProps, pr as MessageItemDelegatedByButtonProps, q as MessageListJumpControlsProps, qs as DialogFooterNoteProps, ra as MobileNavServerItem, rn as MessageReferenceIconProps, sa as MobileNavServerPopoverContentProps, u as InboxItemDensity, ua as MobileNavServerPopoverDestinations, uc as DialogTrigger, un as MessageReferenceReadMark, ur as MessageItemDelegatedAvatarProps, va as MobileNavServerPopoverRowBody, vi as PreviewCardActions, wa as MobileNavServerPopoverRowProps, wo as DropdownMenuLinkItem, xa as MobileNavServerPopoverRowDescriptionProps, xc as StyledProps, ya as MobileNavServerPopoverRowBodyProps, yc as VariantProps, yi as PreviewCardActionsProps, ys as ListRowProps, z as DragAnnouncementSource, zs as DialogClose } from "./inbox-item-VkYFHY84.mjs";
+import { $ as MessageListJumpPillProps, Ai as PreviewCardFooter, As as TextLinkProps, B as DragMessages, C as InboxItemProps, Ca as MobileNavServerPopoverRowLabelProps, Ci as PreviewCardBodyProps, Da as PopoverActionsProps, Ea as PopoverActions, Fi as PreviewCardMetaProps, Fs as DialogSheetContentProps, G as dragMessages, H as DragPlace, Hs as DialogContentProps, Is as Dialog, J as MessageListJumpPill, K as MessageListJumpControls, Ks as DialogFooterNote, Ma as PopoverBody, Ms as DialogCommit, Na as PopoverBodyProps, Ns as DialogCommitProps, Oi as PreviewCardEyebrow, Pi as PreviewCardMeta, Ps as DialogSheetContent, Q as MessageListJumpPillGroupProps, R as DEFAULT_DRAG_MESSAGES, Sa as MobileNavServerPopoverRowLabel, Si as PreviewCardBody, To as DropdownMenuLinkItemProps, U as createDragAnnouncements, V as DragNamed, W as dragInstructions, X as MessageListJumpPillDismissProps, Y as MessageListJumpPillDismiss, Z as MessageListJumpPillGroup, _a as MobileNavServerPopoverRow, _t as MessageQuotedPreviewAuthorDelegatedByProps, aa as MobileNavServerPopover, ac as DialogSheetBackProps, ba as MobileNavServerPopoverRowDescription, bc as DataAttributes, ca as MobileNavServerPopoverDestination, ci as AvatarGroupButton, da as MobileNavServerPopoverDestinationsProps, dn as MessageReferenceReadMarkProps, dr as MessageItemDelegatedBy, fa as MobileNavServerPopoverGroup, fr as MessageItemDelegatedByButton, ga as MobileNavServerPopoverProps, gr as MessageItemDelegatedByProps, gt as MessageQuotedPreviewAuthorDelegatedBy, ha as MobileNavServerPopoverListProps, hc as ButtonProps, hr as MessageItemDelegatedByNameProps, ia as MobileNavServerItemProps, ic as DialogSheetBack, ji as PreviewCardFooterProps, ki as PreviewCardEyebrowProps, la as MobileNavServerPopoverDestinationProps, lc as DialogTitleProps, li as AvatarGroupButtonProps, lr as MessageItemDelegatedAvatar, ma as MobileNavServerPopoverList, mr as MessageItemDelegatedByName, nn as MessageReferenceIcon, oa as MobileNavServerPopoverContent, pa as MobileNavServerPopoverGroupProps, pr as MessageItemDelegatedByButtonProps, q as MessageListJumpControlsProps, qs as DialogFooterNoteProps, ra as MobileNavServerItem, rn as MessageReferenceIconProps, sa as MobileNavServerPopoverContentProps, u as InboxItemDensity, ua as MobileNavServerPopoverDestinations, uc as DialogTrigger, un as MessageReferenceReadMark, ur as MessageItemDelegatedAvatarProps, va as MobileNavServerPopoverRowBody, vi as PreviewCardActions, wa as MobileNavServerPopoverRowProps, wo as DropdownMenuLinkItem, xa as MobileNavServerPopoverRowDescriptionProps, xc as StyledProps, ya as MobileNavServerPopoverRowBodyProps, yc as VariantProps, yi as PreviewCardActionsProps, ys as ListRowProps, z as DragAnnouncementSource, zs as DialogClose } from "./inbox-item-B4nNvpp1.mjs";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, ReactNode, RefObject } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
@@ -822,7 +822,8 @@ type InboxItemSkeletonListProps = useRender.ComponentProps<"div"> & InboxItemSke
 /**
  * The list of `InboxItemSkeleton` rows that stands in for a list of
  * `InboxItem` rows while it loads, with nothing between or around the rows
- * that the loaded list doesn't have (no gap, no border, no card). Renders
+ * that the loaded list doesn't have (no border, no card): only the list's
+ * 2px gap, which the loaded list has too (design/patterns/lists.md). Renders
  * `count` rows of the given shape, or its children, once `delay` (1 second by
  * default) has passed. It isn't `aria-busy` itself: it goes away when the
  * content arrives, so mark the region that stays, such as the list's panel or

package/dist/wip.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { $ as MessageListJumpPillGroup, $n as PreviewCardActions, A as useDragSensors, Aa as useThemeScopeProps, Ai as Checkbox, B as keepGrabInside, Bi as ListRowMeta, Bn as RadioGroup, Br as MouseOnlyPointerSensor, C as DragRefusalHint, Ca as Button$1, Cr as MobileNavServerPopoverRowLabel, D as MOUSE_DRAG_DISTANCE_PX, Da as OverlayLayerProvider, E as DragRemeasure, Ea as defaultNativeButton, F as DRAG_SIBLING_TRANSITION, Fi as ListRowBottom, G as DEFAULT_DRAG_MESSAGES, Gi as TooltipContent, Gn as InputGroupAddon, Gr as useMouseOnlyPointerSensor, Hi as ListRowTop, Hn as RadioGroupItem, Hr as TOUCH_DRAG_HOLD_MS, I as DROP_GLIDE, J as dragInstructions, Ji as TooltipTrigger, Jn as measureContent, K as SILENT_DRAG_ANNOUNCEMENTS, Kn as InputGroupInput, L as DragLift, Li as ListRowDescription, Ln as AvatarGroupButton, Lt as MessageReferenceReadMark, M as DRAG_KEYBOARD_OFFSET_PX, N as DRAG_LIFT_Z_INDEX, Na as tv, Ni as ListRow, Nt as MessageReferenceIcon, O as listKeyboardCoordinates, Oa as useParentOverlayKind, Or as PopoverBody, P as DRAG_SETTLE, Pi as ListRowBody, Q as MessageListJumpPillDismiss, Qi as DialogSheetContent, R as ORIGIN_OPACITY, S as Skeleton, Sr as MobileNavServerPopoverRowDescription, T as DRAG_KEYBOARD_CODES, Ta as Spinner, Tr as PopoverActions, U as LIFT_CLASS, Un as chipRemoveBase, Ur as TOUCH_DRAG_TOLERANCE_PX, V as useDragSiblingTransition, Vi as ListRowTitle, Vr as TOUCH_DRAG_DISTANCE_PX, Wi as Tooltip, Wn as InputGroup, Wr as useHoldThenMoveTouchSensor, X as MessageListJumpControls, Xn as observeTruncation, Y as dragMessages, Yi as usePopupCollisionPadding, Yn as measureElement, Z as MessageListJumpPill, Zi as DialogCommit, Zn as readNow, _ as InboxItemTrailing, _r as MobileNavServerPopoverDestinations, a as InboxItemContext, ar as PreviewCardFooter, b as useLatestRef, br as MobileNavServerPopoverRow, c as InboxItemLeading, da as DialogSheetBack, dn as MessageItemDelegatedByButton, ea as Dialog, fn as MessageItemDelegatedByName, g as InboxItemTitle, gr as MobileNavServerPopoverDestination, h as InboxItemTimestamp, hr as MobileNavServerPopoverContent, i as InboxItemContent, ii as DropdownMenuLinkItem, ir as PreviewCardEyebrow, j as DRAG_AUTO_SCROLL_ZONE_PX, ja as useTheme, k as useDragAcrossLists, ln as MessageItemDelegatedAvatar, lt as MessageQuotedPreviewAuthorDelegatedBy, ma as DialogTrigger, mr as MobileNavServerPopover, na as DialogClose, o as InboxItemHeading, oa as DialogFooterNote, pa as DialogTitle, pr as MobileNavServerItem, q as createDragAnnouncements, qn as useOverflowTitle, r as InboxItemBody, ra as DialogContent, sr as PreviewCardMeta, t as InboxItem, tr as PreviewCardBody, un as MessageItemDelegatedBy, vr as MobileNavServerPopoverGroup, w as DropPlaceholder, x as hudTextAction, xr as MobileNavServerPopoverRowBody, y as inboxItem, ya as TextLink, yr as MobileNavServerPopoverList, z as cancelDrag, zr as HoldThenMoveTouchSensor } from "./inbox-item-DbZusMRA.mjs";
+import { $ as MessageListJumpPillGroup, $n as PreviewCardActions, A as useDragSensors, Aa as OverlayLayerProvider, Ai as Checkbox, B as keepGrabInside, Bi as ListRowMeta, Bn as RadioGroup, Br as MouseOnlyPointerSensor, C as DragRefusalHint, Cr as MobileNavServerPopoverRowLabel, D as MOUSE_DRAG_DISTANCE_PX, E as DragRemeasure, Ea as Button$1, F as DRAG_SIBLING_TRANSITION, Fi as ListRowBottom, G as DEFAULT_DRAG_MESSAGES, Gn as InputGroupAddon, Gr as useMouseOnlyPointerSensor, Hi as ListRowTop, Hn as RadioGroupItem, Hr as TOUCH_DRAG_HOLD_MS, I as DROP_GLIDE, Ia as tv, J as dragInstructions, Ji as TooltipContent, Jn as measureContent, K as SILENT_DRAG_ANNOUNCEMENTS, Kn as InputGroupInput, L as DragLift, Li as ListRowDescription, Ln as AvatarGroupButton, Lt as MessageReferenceReadMark, M as DRAG_KEYBOARD_OFFSET_PX, N as DRAG_LIFT_Z_INDEX, Na as useThemeScopeProps, Ni as ListRow, Nt as MessageReferenceIcon, O as listKeyboardCoordinates, Oa as Spinner, Or as PopoverBody, P as DRAG_SETTLE, Pa as useTheme, Pi as ListRowBody, Q as MessageListJumpPillDismiss, Qi as usePopupCollisionPadding, R as ORIGIN_OPACITY, S as Skeleton, Sa as TextLink, Sr as MobileNavServerPopoverRowDescription, T as DRAG_KEYBOARD_CODES, Tr as PopoverActions, U as LIFT_CLASS, Un as chipRemoveBase, Ur as TOUCH_DRAG_TOLERANCE_PX, V as useDragSiblingTransition, Vi as ListRowTitle, Vr as TOUCH_DRAG_DISTANCE_PX, Wn as InputGroup, Wr as useHoldThenMoveTouchSensor, X as MessageListJumpControls, Xn as observeTruncation, Y as dragMessages, Yn as measureElement, Z as MessageListJumpPill, Zi as TooltipTrigger, Zn as readNow, _ as InboxItemTrailing, _a as DialogTrigger, _r as MobileNavServerPopoverDestinations, a as InboxItemContext, aa as DialogClose, ar as PreviewCardFooter, b as useLatestRef, br as MobileNavServerPopoverRow, c as InboxItemLeading, dn as MessageItemDelegatedByButton, ea as DialogCommit, fn as MessageItemDelegatedByName, g as InboxItemTitle, ga as DialogTitle, gr as MobileNavServerPopoverDestination, h as InboxItemTimestamp, hr as MobileNavServerPopoverContent, i as InboxItemContent, ii as DropdownMenuLinkItem, ir as PreviewCardEyebrow, j as DRAG_AUTO_SCROLL_ZONE_PX, ja as useParentOverlayKind, k as useDragAcrossLists, ka as defaultNativeButton, la as DialogFooterNote, ln as MessageItemDelegatedAvatar, lt as MessageQuotedPreviewAuthorDelegatedBy, ma as DialogSheetBack, mr as MobileNavServerPopover, o as InboxItemHeading, oa as DialogContent, pr as MobileNavServerItem, q as createDragAnnouncements, qi as Tooltip, qn as useOverflowTitle, r as InboxItemBody, ra as Dialog, sr as PreviewCardMeta, t as InboxItem, ta as DialogSheetContent, tr as PreviewCardBody, un as MessageItemDelegatedBy, vr as MobileNavServerPopoverGroup, w as DropPlaceholder, x as hudTextAction, xr as MobileNavServerPopoverRowBody, y as inboxItem, yr as MobileNavServerPopoverList, z as cancelDrag, zr as HoldThenMoveTouchSensor } from "./inbox-item-DHJOrxB8.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";
@@ -1867,7 +1867,7 @@ function InboxItemLeadingBadge({ className, render, ...props }) {
 //#endregion
 //#region src/components/inbox-item/inbox-item-skeleton.recipe.ts
 const inboxItemSkeleton = tv({ slots: {
-	list: ["flex min-w-0 flex-col"],
+	list: ["flex min-w-0 flex-col gap-0.5"],
 	row: [
 		"[--inbox-item-skeleton-context:5rem] [--inbox-item-skeleton-title:60%] [--inbox-item-skeleton-body:80%]",
 		"nth-[3n+2]:[--inbox-item-skeleton-context:4rem] nth-[3n+2]:[--inbox-item-skeleton-title:45%] nth-[3n+2]:[--inbox-item-skeleton-body:70%]",
@@ -1927,7 +1927,8 @@ function InboxItemSkeleton({ density, leading = false, context = false, ...props
 /**
 * The list of `InboxItemSkeleton` rows that stands in for a list of
 * `InboxItem` rows while it loads, with nothing between or around the rows
-* that the loaded list doesn't have (no gap, no border, no card). Renders
+* that the loaded list doesn't have (no border, no card): only the list's
+* 2px gap, which the loaded list has too (design/patterns/lists.md). Renders
 * `count` rows of the given shape, or its children, once `delay` (1 second by
 * default) has passed. It isn't `aria-busy` itself: it goes away when the
 * content arrives, so mark the region that stays, such as the list's panel or

package/package.json

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