@botiverse/raft-ui 0.22.0 → 0.23.0

package/dist/style.css

@@ -276,7 +276,7 @@
   }
 }
 .r-timeline {
-  --r-timeline-icon-size: var(--r-timeline-custom-icon-size, 9px);
+  --r-timeline-icon-size: var(--r-timeline-custom-icon-size, 10px);
   --r-timeline-title-font-size: var(--text-callout);
   --r-timeline-content-font-size: var(--text-mono-meta);
   --r-timeline-time-font-size: var(--text-mono-meta);
@@ -771,14 +771,14 @@
   }
 }
 
-@media (width >= 40rem) {
-  .r-steps--horizontal {
-    flex-wrap: wrap;
-    row-gap: 8px;
-  }
+.r-steps--horizontal {
+  flex-wrap: wrap;
+  row-gap: 8px;
+  inline-size: 100%;
+  container-type: inline-size;
 }
 
-@media (width < 40rem) {
+@container (width < 40rem) {
   .r-steps--horizontal > .r-step {
     --r-steps-connector-gap: 6px;
     --r-steps-connector-min-width: 8px;

package/dist/styles.css

@@ -225,6 +225,7 @@
   --color-brand-950: var(--brand-950);
   --color-brand-strong: var(--brand-strong);
   --color-brand-soft: var(--brand-soft);
+  --color-selection: var(--selection);
   --color-brand-hover: var(--brand-hover);
   --color-brand-active: var(--brand-active);
 
@@ -561,11 +562,12 @@ textarea:-webkit-autofill:disabled {
    yellow of a highlight and a 2px yellow underline; the passage of the open
    discussion gets the full yellow with ink type, like a search hit, in both
    modes. `--brand-400` is the `brand` role (what `bg-brand` paints):
-   `--color-brand` is an inline theme value and emits no variable. */
+   `--color-brand` is an inline theme value and emits no variable. In dark
+   mode the wash is `--selection` (brand at 22%), kept in one place. */
 ::highlight(raft-comment) {
   background-color: light-dark(
     color-mix(in oklch, var(--brand-400) 35%, transparent),
-    color-mix(in oklch, var(--brand-400) 22%, transparent)
+    var(--selection)
   );
   text-decoration-line: underline;
   text-decoration-color: var(--brand-400);
@@ -578,6 +580,79 @@ textarea:-webkit-autofill:disabled {
   text-decoration-line: none;
 }
 
+/* Located: the item a jump took someone to (a link to a message, Back to the
+   results, a comment's anchor, the rows a bulk change touched) shows
+   `info-soft` at once, holds it 1.2s, fades out over 0.8s and is gone at 2s
+   (design/foundations/states.md#located). The fill is a registered colour so
+   it can animate; it is painted as a layer over the item's own fill, so a
+   row's surface stays underneath and comes back as the cyan fades.
+   - Stronger marks win: an item that is selected, active, current, a search
+     match, checked, or has its popup open isn't painted; its own mark already
+     says where it is.
+   - Unlayered, so it beats the hover utilities (a located item doesn't answer
+     hover: the pointer often rests where the item lands, and a grey would
+     hide the cyan). Not while pressed: :active lets the press tier show.
+   - The app sets data-located through useLocated (lib/located.ts), which
+     drops it after LOCATED_MS. Setting the attribute again while it is on
+     doesn't restart the animation; it restarts only after it was removed
+     for a frame, which useLocated does. Left on, the end state is a
+     transparent layer that still hides hover, so don't set it by hand.
+   - A message row takes the fill as --mi-row-fill instead: its resting
+     fill is var(--located-fill), so its own marks (an open menu, a search
+     match, a checked box) override it like any other state, with no has-selector
+     here, and the delegated face's ring keeps matching the row
+     (message-item.recipe.ts). */
+@property --located-fill {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: transparent;
+}
+
+@keyframes raft-located {
+  0%,
+  60% {
+    --located-fill: var(--info-soft);
+    animation-timing-function: ease-out;
+  }
+  100% {
+    --located-fill: transparent;
+  }
+}
+
+@keyframes raft-located-still {
+  from,
+  to {
+    --located-fill: 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] {
+  animation: var(--located-animation, raft-located) 2s linear;
+}
+
+[data-located]:not(
+  [data-message-item],
+  :active,
+  [data-selected]:not([data-selected="false"]),
+  [data-active="true"],
+  [aria-selected="true"],
+  [aria-current]:not([aria-current="false"]),
+  [data-popup-open]
+) {
+  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] {
+    --located-animation: raft-located-still;
+  }
+}
+
 @utility image-transparency-bg {
   --checker-cell: light-dark(oklch(0.1813 0.00497 17.62 / 0.12), oklch(1 0 0 / 0.1));
   background-color: light-dark(oklch(1 0 0), oklch(0.23 0 0));
@@ -640,8 +715,8 @@ textarea:-webkit-autofill:disabled {
    the mark reads `1lh` from it.
 
    `lead-dot` places a status light the same way, in a box one line tall,
-   and keeps it at its one size beside text, 9px with a 1.5px ink edge
-   (status.md#sizes). It is kept at 9px inside components (Badge,
+   and keeps it at its one size beside text, 10px with a 1.5px ink edge
+   (status.md#sizes). It is kept at 10px inside components (Badge,
    PanelActivity, a panel header); when placing Status yourself, don't pass
    a size. A notice never uses a status light to say what kind of notice
    it is; it leads with its intent's icon (status.md#sizes). */
@@ -651,7 +726,7 @@ textarea:-webkit-autofill:disabled {
   translate: 0 calc(0.5lh - 50%);
 }
 @utility lead-dot {
-  --lead-dot: 9px;
+  --lead-dot: 10px;
   flex-shrink: 0;
   width: var(--lead-dot);
   height: var(--lead-dot);

package/dist/tokens.json

@@ -1261,14 +1261,14 @@
     "link": {
       "$value": {
         "colorSpace": "oklch",
-        "components": [0.4878, 0.2432, 264.4]
+        "components": [0.4327, 0.1282, 256.54]
       },
       "$extensions": {
         "build.botiverse.raft": {
           "modes": {
             "dark": {
               "colorSpace": "oklch",
-              "components": [0.8071, 0.1007, 250.45]
+              "components": [0.717, 0.1183, 253.58]
             }
           }
         }
@@ -2529,6 +2529,19 @@
       }
     }
   },
+  "selection": {
+    "$type": "color",
+    "$value": "{brand.soft}",
+    "$description": "Selected text (::selection). brand-soft in light mode; in dark mode brand over the page at 22%, the wash of a commented passage, because brand-soft left a selection almost the same as the page.",
+    "$extensions": {
+      "build.botiverse.raft": {
+        "css": true,
+        "modes": {
+          "dark": "color-mix(in oklch, var(--brand-400) 22%, transparent)"
+        }
+      }
+    }
+  },
   "field": {
     "font-size": {
       "$value": {

package/dist/wip.d.mts

@@ -1,4 +1,4 @@
-import { $o as VariantProps, Aa as DropdownMenuLinkItemProps, Br as PreviewCardMetaProps, Ci as MobileNavServerPopoverRowBody, Cn as MessageItemDelegatedByProps, Cr as PreviewCardActions, Di as MobileNavServerPopoverRowLabel, Do as DialogFooterNoteProps, Dr as PreviewCardBody, E as MessageQuotedPreviewAuthorDelegatedByProps, Ei as MobileNavServerPopoverRowDescriptionProps, Eo as DialogFooterNote, Fr as PreviewCardFooter, Ir as PreviewCardFooterProps, Li as PopoverBody, Mi as PopoverActionsProps, Nr as PreviewCardEyebrow, Oi as MobileNavServerPopoverRowLabelProps, Or as PreviewCardBodyProps, Pr as PreviewCardEyebrowProps, Ri as PopoverBodyProps, Ro as DialogSheetBack, Si as MobileNavServerPopoverRow, Sn as MessageItemDelegatedByNameProps, So as DialogContentProps, T as MessageQuotedPreviewAuthorDelegatedBy, Ti as MobileNavServerPopoverRowDescription, Uo as DialogTitleProps, Wo as DialogTrigger, Yo as ButtonProps, _i as MobileNavServerPopoverGroup, _n as MessageItemDelegatedAvatarProps, a as MessageListJumpPillDismissProps, bi as MobileNavServerPopoverListProps, bn as MessageItemDelegatedByButtonProps, c as MessageListJumpPillProps, ci as MobileNavServerItem, di as MobileNavServerPopoverContent, dt as MessageReferenceIcon, es as DataAttributes, fi as MobileNavServerPopoverContentProps, fo as DialogCommit, ft as MessageReferenceIconProps, gi as MobileNavServerPopoverDestinationsProps, gn as MessageItemDelegatedAvatar, go as Dialog, hi as MobileNavServerPopoverDestinations, ho as DialogSheetContentProps, i as MessageListJumpPillDismiss, ji as PopoverActions, ka as DropdownMenuLinkItem, ki as MobileNavServerPopoverRowProps, li as MobileNavServerItemProps, mi as MobileNavServerPopoverDestinationProps, mo as DialogSheetContent, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, pi as MobileNavServerPopoverDestination, po as DialogCommitProps, r as MessageListJumpPill, s as MessageListJumpPillGroupProps, t as MessageListJumpControls, ts as StyledProps, ui as MobileNavServerPopover, uo as TextLinkProps, vi as MobileNavServerPopoverGroupProps, vn as MessageItemDelegatedBy, wi as MobileNavServerPopoverRowBodyProps, wr as PreviewCardActionsProps, xi as MobileNavServerPopoverProps, xn as MessageItemDelegatedByName, yi as MobileNavServerPopoverList, yn as MessageItemDelegatedByButton, yo as DialogClose, zo as DialogSheetBackProps, zr as PreviewCardMeta } from "./index-DT1Hg5N-.mjs";
+import { $i as MobileNavServerPopoverDestinationProps, As as DialogContentProps, B as MessageListJumpPill, C as InboxItemProps, Ca as PopoverBodyProps, Cs as DialogSheetContentProps, Ds as DialogClose, Fs as DialogFooterNoteProps, G as MessageListJumpPillProps, H as MessageListJumpPillDismissProps, Ji as MobileNavServerItemProps, Jt as MessageReferenceIcon, Ks as DialogSheetBack, Ps as DialogFooterNote, Qi as MobileNavServerPopoverDestination, Qs as DialogTrigger, R as MessageListJumpControls, Sa as PopoverBody, Ss as DialogSheetContent, Ti as PreviewCardMetaProps, U as MessageListJumpPillGroup, V as MessageListJumpPillDismiss, W as MessageListJumpPillGroupProps, Xi as MobileNavServerPopoverContent, Yi as MobileNavServerPopover, Yt as MessageReferenceIconProps, Zi as MobileNavServerPopoverContentProps, Zs as DialogTitleProps, _a as PopoverActionsProps, aa as MobileNavServerPopoverListProps, ar as MessageItemDelegatedByButtonProps, bi as PreviewCardFooter, bs as DialogCommit, ca as MobileNavServerPopoverRowBody, cc as DataAttributes, ci as PreviewCardActions, cr as MessageItemDelegatedByProps, ct as MessageQuotedPreviewAuthorDelegatedBy, da as MobileNavServerPopoverRowDescriptionProps, ea as MobileNavServerPopoverDestinations, fa as MobileNavServerPopoverRowLabel, fi as PreviewCardBody, ga as PopoverActions, ho as DropdownMenuLinkItemProps, ia as MobileNavServerPopoverList, ir as MessageItemDelegatedByButton, la as MobileNavServerPopoverRowBodyProps, lc as StyledProps, li as PreviewCardActionsProps, ls as ListRowProps, lt as MessageQuotedPreviewAuthorDelegatedByProps, ma as MobileNavServerPopoverRowProps, mo as DropdownMenuLinkItem, na as MobileNavServerPopoverGroup, nn as MessageReferenceReadMark, nr as MessageItemDelegatedAvatarProps, oa as MobileNavServerPopoverProps, or as MessageItemDelegatedByName, pa as MobileNavServerPopoverRowLabelProps, pi as PreviewCardBodyProps, qi as MobileNavServerItem, qs as DialogSheetBackProps, ra as MobileNavServerPopoverGroupProps, rc as ButtonProps, rn as MessageReferenceReadMarkProps, rr as MessageItemDelegatedBy, sa as MobileNavServerPopoverRow, sc as VariantProps, sr as MessageItemDelegatedByNameProps, ta as MobileNavServerPopoverDestinationsProps, tr as MessageItemDelegatedAvatar, u as InboxItemDensity, ua as MobileNavServerPopoverRowDescription, vi as PreviewCardEyebrow, vs as TextLinkProps, wi as PreviewCardMeta, ws as Dialog, xi as PreviewCardFooterProps, xs as DialogCommitProps, yi as PreviewCardEyebrowProps, z as MessageListJumpControlsProps } from "./inbox-item-ChGeZBFb.mjs";
 import { CSSProperties, ComponentProps, ComponentPropsWithRef, PointerEvent, ReactNode, RefObject } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
@@ -392,6 +392,69 @@ type InboxItemLeadingBadgeProps = useRender.ComponentProps<"span">;
  */
 export declare function InboxItemLeadingBadge({ className, render, ...props }: InboxItemLeadingBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
+//#region src/components/inbox-item/inbox-item-skeleton.d.ts
+type InboxItemSkeletonShape = {
+  /** The density of the rows it stands for. */
+  density?: InboxItemDensity;
+  /** A 35px block where the rows have an `InboxItemLeading` avatar or tile. */
+  leading?: boolean;
+  /** A context line above the title, where the rows have an `InboxItemContext`. */
+  context?: boolean;
+};
+type InboxItemSkeletonProps = Omit<InboxItemProps, "active" | "disabled" | "children"> & InboxItemSkeletonShape;
+/**
+ * A placeholder for one `InboxItem` while the list loads. It is an
+ * `InboxItem` itself, with the same parts as the loaded row (an optional
+ * leading block, the context line, the title, the excerpt, the timestamp),
+ * each holding a bar instead of text. The padding, the divider and every
+ * line's height are the loaded row's, so nothing moves when the content
+ * arrives. Match `density`, `leading` and `context` to the rows it stands for.
+ * Hidden from assistive technology: mark the region that stays while the
+ * list loads `aria-busy`.
+ */
+export declare function InboxItemSkeleton({ density, leading, context, ...props }: InboxItemSkeletonProps): import("react").JSX.Element;
+type InboxItemSkeletonListProps = useRender.ComponentProps<"div"> & InboxItemSkeletonShape & {
+  /** How many rows to show. About a screenful; ignored when there are children. */
+  count?: number;
+  /**
+   * Milliseconds to wait before the rows appear, so a fast load doesn't
+   * flash them (Feedback, "Empty, loading and failed"). The list is empty
+   * until then. A list skeleton is only for a slow load, so it waits 1
+   * second by default; pass `0` to show the rows at once.
+   */
+  delay?: number;
+};
+/**
+ * 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
+ * `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
+ * viewport, `aria-busy` while it loads.
+ */
+export declare function InboxItemSkeletonList({ count, delay, density, leading, context, children, className, render, ...props }: InboxItemSkeletonListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/components/list-row/list-row-skeleton.d.ts
+type ListRowSkeletonProps = Omit<ListRowProps, "tone" | "selected" | "interactive" | "children"> & {
+  /**
+   * A leading block: 35px for an avatar or tile in a `default` row, 20px for
+   * a `ListRowIcon` in a `plain` or `entry` row. On by default in a `default`
+   * row.
+   */
+  leading?: boolean;
+  /** A second line, where the rows have a `ListRowDescription`. On by default in a `default` row. */
+  description?: boolean;
+};
+/**
+ * A placeholder for one `ListRow` while the list loads. It is a display-only
+ * `ListRow` of the same `variant`, with a bar in its title, its time and its
+ * description, so it is the loaded row's size and its divider sits in the
+ * same place. Hidden from assistive technology: mark the region that stays
+ * while the list loads, such as its `ListRowGroup`, `aria-busy`.
+ */
+export declare function ListRowSkeleton({ variant, leading, description, className, ...props }: ListRowSkeletonProps): import("react").JSX.Element;
+//#endregion
 //#region src/components/meter/meter.d.ts
 declare const meter: import("tailwind-variants/lite").TVReturnType<{
   level: {
@@ -541,4 +604,4 @@ export declare function OverlayLayerProvider({ kind, modal, children }: OverlayL
  */
 export declare function useParentOverlayKind(): OverlayLayerKind | null;
 //#endregion
-export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, type EllipsisProps, type EllipsisState, type EllipsisToggleProps, type HoldThenMoveOptions, type InboxItemLeadingBadgeProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, type MeterHeaderProps, type MeterIndicatorProps, type MeterLabelProps, type MeterProps, type MeterTrackProps, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, type OverlayLayerKind, type OverlayLayerProviderProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type UseCommentMarginFitsOptions };
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, type CommentCardMetaProps, type CommentCardProps, type CommentCardQuoteProps, type CommentCardTriggerProps, type CommentEntryAuthorProps, type CommentEntryBodyProps, type CommentEntryHeaderProps, type CommentEntryProps, type CommentEntryTimeProps, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, type CommentMarkerProps, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, type EllipsisProps, type EllipsisState, type EllipsisToggleProps, type HoldThenMoveOptions, type InboxItemLeadingBadgeProps, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, type ListRowSkeletonProps, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, type MeterHeaderProps, type MeterIndicatorProps, type MeterLabelProps, type MeterProps, type MeterTrackProps, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, type OverlayLayerKind, type OverlayLayerProviderProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type UseCommentMarginFitsOptions };

package/dist/wip.mjs

@@ -1,4 +1,4 @@
-import { Br as DialogFooterNote, Er as TooltipContent, Gr as DialogSheetBack, Gt as measureContent, In as useHoldThenMoveTouchSensor, Ir as DialogClose, Jr as DialogTrigger, Jt as readNow, Kt as measureElement, Lr as DialogContent, Mr as DialogSheetContent, Pr as Dialog, Qt as PreviewCardBody, Sn as PopoverActions, Tn as PopoverBody, Tr as Tooltip, Wt as useOverflowTitle, Xn as DropdownMenuLinkItem, Xt as PreviewCardActions, Zr as TextLink, _n as MobileNavServerPopoverRow, _t as MessageItemDelegatedByName, a as MessageListJumpPillGroup, ai as useParentOverlayKind, bn as MobileNavServerPopoverRowLabel, ci as useTheme, dn as MobileNavServerPopover, ei as Button$1, fn as MobileNavServerPopoverContent, gn as MobileNavServerPopoverList, gt as MessageItemDelegatedByButton, h as MessageQuotedPreviewAuthorDelegatedBy, hn as MobileNavServerPopoverGroup, ht as MessageItemDelegatedBy, i as MessageListJumpPillDismiss, ii as OverlayLayerProvider, in as PreviewCardMeta, jr as DialogCommit, kr as TooltipTrigger, mn as MobileNavServerPopoverDestinations, mt as MessageItemDelegatedAvatar, n as MessageListJumpControls, nn as PreviewCardFooter, pn as MobileNavServerPopoverDestination, qr as DialogTitle, qt as observeTruncation, r as MessageListJumpPill, ri as defaultNativeButton, si as useThemeScopeProps, t as inboxItem, tn as PreviewCardEyebrow, ui as tv, un as MobileNavServerItem, vn as MobileNavServerPopoverRowBody, yn as MobileNavServerPopoverRowDescription, z as MessageReferenceIcon } from "./inbox-item.recipe-3j4DHKZ2.mjs";
+import { $r as ListRowTitle, An as MobileNavServerItem, Bn as MobileNavServerPopoverRowLabel, C as MessageListJumpPillDismiss, Fi as OverlayLayerProvider, Fn as MobileNavServerPopoverGroup, Ft as MessageItemDelegatedBy, Gn as PopoverBody, Gr as ListRow, Hn as PopoverActions, Ii as useParentOverlayKind, In as MobileNavServerPopoverList, It as MessageItemDelegatedByButton, Kr as ListRowBody, Ln as MobileNavServerPopoverRow, Lt as MessageItemDelegatedByName, Mn as MobileNavServerPopoverContent, Nn as MobileNavServerPopoverDestination, Oi as TextLink, P as MessageQuotedPreviewAuthorDelegatedBy, Pi as defaultNativeButton, Pn as MobileNavServerPopoverDestinations, Pt as MessageItemDelegatedAvatar, Qr as ListRowMeta, Ri as useThemeScopeProps, Rn as MobileNavServerPopoverRowBody, S as MessageListJumpPill, Si as DialogSheetBack, Sn as PreviewCardFooter, Ti as DialogTrigger, Vi as tv, Yr as ListRowDescription, _ as InboxItemTrailing, _i as DialogFooterNote, a as InboxItemContext, b as Skeleton, c as InboxItemLeading, ci as DialogCommit, ct as MessageReferenceReadMark, di as Dialog, dn as measureContent, ei as ListRowTop, fn as measureElement, g as InboxItemTitle, gn as PreviewCardActions, gr as DropdownMenuLinkItem, h as InboxItemTimestamp, i as InboxItemContent, it as MessageReferenceIcon, ji as Button$1, jn as MobileNavServerPopover, li as DialogSheetContent, mi as DialogContent, mn as readNow, ni as Tooltip, nr as useHoldThenMoveTouchSensor, o as InboxItemHeading, oi as TooltipTrigger, pi as DialogClose, pn as observeTruncation, qr as ListRowBottom, r as InboxItemBody, ri as TooltipContent, t as InboxItem, un as useOverflowTitle, vn as PreviewCardBody, w as MessageListJumpPillGroup, wi as DialogTitle, wn as PreviewCardMeta, x as MessageListJumpControls, xn as PreviewCardEyebrow, y as inboxItem, zi as useTheme, zn as MobileNavServerPopoverRowDescription } from "./inbox-item-B-y7PxZ_.mjs";
 import { Check, ChevronDown, LoaderCircle, Plus, 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";
@@ -528,7 +528,7 @@ const announcement = tv({ slots: {
 	],
 	header: ["flex min-w-0 items-center justify-between gap-3"],
 	label: ["flex min-w-0 items-center gap-2 wrap-break-word", "text-caption text-foreground-muted"],
-	dot: ["shrink-0", "size-[9px] rounded-[2px] border-[1.5px] border-sticker-ink bg-attention-400"],
+	dot: ["shrink-0", "size-2.5 rounded-[2px] border-[1.5px] border-sticker-ink bg-attention-400"],
 	title: ["mt-3 wrap-break-word normal-case", "text-headline font-bold tracking-normal"],
 	picture: ["mt-5 h-44 w-full overflow-hidden border border-line-hairline [&_img]:size-full  [&_img]:object-contain", "rounded-container bg-fill-muted"],
 	text: [
@@ -668,7 +668,7 @@ const comment = tv({
 		entryBody: [
 			"wrap-break-word select-text",
 			"text-callout text-foreground",
-			"selection:bg-brand-soft"
+			"selection:bg-selection"
 		],
 		marker: [
 			"relative inline-flex h-6 shrink-0 items-center gap-1 align-top whitespace-nowrap",
@@ -1491,6 +1491,142 @@ 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"],
+	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%]",
+		"nth-[3n]:[--inbox-item-skeleton-context:6rem] nth-[3n]:[--inbox-item-skeleton-title:55%] nth-[3n]:[--inbox-item-skeleton-body:75%]"
+	],
+	leading: ["size-[35px]"],
+	line: ["min-w-0 flex-1"],
+	title: ["pl-0"],
+	bar: ["inline-block h-[0.75em] max-w-full align-middle"],
+	contextBar: ["w-(--inbox-item-skeleton-context)"],
+	titleBar: ["w-(--inbox-item-skeleton-title)"],
+	bodyBar: ["w-(--inbox-item-skeleton-body)"],
+	timestampBar: ["w-9"]
+} });
+//#endregion
+//#region src/components/inbox-item/inbox-item-skeleton.tsx
+/**
+* A placeholder for one `InboxItem` while the list loads. It is an
+* `InboxItem` itself, with the same parts as the loaded row (an optional
+* leading block, the context line, the title, the excerpt, the timestamp),
+* each holding a bar instead of text. The padding, the divider and every
+* line's height are the loaded row's, so nothing moves when the content
+* arrives. Match `density`, `leading` and `context` to the rows it stands for.
+* Hidden from assistive technology: mark the region that stays while the
+* list loads `aria-busy`.
+*/
+function InboxItemSkeleton({ density, leading = false, context = false, ...props }) {
+	const slots = inboxItemSkeleton();
+	const bar = (width) => /* @__PURE__ */ jsx(Skeleton, {
+		variant: "line",
+		className: slots.bar({ className: width })
+	});
+	return /* @__PURE__ */ jsxs(InboxItem, {
+		"aria-hidden": true,
+		"data-skeleton": "",
+		density,
+		disabled: true,
+		...props,
+		className: slots.row({ className: props.className }),
+		children: [
+			leading ? /* @__PURE__ */ jsx(InboxItemLeading, { children: /* @__PURE__ */ jsx(Skeleton, { className: slots.leading() }) }) : null,
+			/* @__PURE__ */ jsxs(InboxItemContent, { children: [
+				context ? /* @__PURE__ */ jsx(InboxItemContext, { children: /* @__PURE__ */ jsx("span", {
+					className: slots.line(),
+					children: bar(slots.contextBar())
+				}) }) : null,
+				/* @__PURE__ */ jsx(InboxItemHeading, { children: /* @__PURE__ */ jsx(InboxItemTitle, {
+					className: slots.title(),
+					children: bar(slots.titleBar())
+				}) }),
+				/* @__PURE__ */ jsx(InboxItemBody, { children: bar(slots.bodyBar()) })
+			] }),
+			/* @__PURE__ */ jsx(InboxItemTrailing, { children: /* @__PURE__ */ jsx(InboxItemTimestamp, { children: bar(slots.timestampBar()) }) })
+		]
+	});
+}
+/**
+* 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
+* `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
+* viewport, `aria-busy` while it loads.
+*/
+function InboxItemSkeletonList({ count = 6, delay = 1e3, density, leading, context, children, className, render, ...props }) {
+	const { list } = inboxItemSkeleton();
+	const shown = useDelayPassed(delay);
+	const defaultProps = {
+		"data-slot": "inbox-item-skeleton-list",
+		"data-waiting": shown ? void 0 : "",
+		className: list({ className }),
+		children: shown ? children ?? Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(InboxItemSkeleton, {
+			density,
+			leading,
+			context
+		}, index)) : null
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** Whether `delay` milliseconds have passed since mount; at once for `0`. */
+function useDelayPassed(delay) {
+	const [passed, setPassed] = useState(false);
+	useEffect(() => {
+		if (delay <= 0) return;
+		const timer = setTimeout(() => setPassed(true), delay);
+		return () => clearTimeout(timer);
+	}, [delay]);
+	return passed || delay <= 0;
+}
+//#endregion
+//#region src/components/list-row/list-row-skeleton.tsx
+const listRowSkeleton = tv({ slots: {
+	row: [
+		"[--list-row-skeleton-title:45%] [--list-row-skeleton-description:75%]",
+		"nth-[3n+2]:[--list-row-skeleton-title:35%] nth-[3n+2]:[--list-row-skeleton-description:60%]",
+		"nth-[3n]:[--list-row-skeleton-title:55%] nth-[3n]:[--list-row-skeleton-description:70%]"
+	],
+	avatar: ["size-[35px] shrink-0"],
+	icon: ["size-5 shrink-0"],
+	bar: ["inline-block h-[0.75em] max-w-full align-middle"],
+	titleBar: ["w-(--list-row-skeleton-title)"],
+	descriptionBar: ["w-(--list-row-skeleton-description)"],
+	metaBar: ["w-9"]
+} });
+/**
+* A placeholder for one `ListRow` while the list loads. It is a display-only
+* `ListRow` of the same `variant`, with a bar in its title, its time and its
+* description, so it is the loaded row's size and its divider sits in the
+* same place. Hidden from assistive technology: mark the region that stays
+* while the list loads, such as its `ListRowGroup`, `aria-busy`.
+*/
+function ListRowSkeleton({ variant = "default", leading = variant === "default", description = variant === "default", className, ...props }) {
+	const slots = listRowSkeleton();
+	const bar = (width) => /* @__PURE__ */ jsx(Skeleton, {
+		variant: "line",
+		className: slots.bar({ className: width })
+	});
+	return /* @__PURE__ */ jsxs(ListRow, {
+		"aria-hidden": true,
+		"data-skeleton": "",
+		interactive: false,
+		variant,
+		...props,
+		className: slots.row({ className }),
+		children: [leading ? /* @__PURE__ */ jsx(Skeleton, { className: variant === "default" ? slots.avatar() : slots.icon() }) : null, /* @__PURE__ */ jsxs(ListRowBody, { children: [/* @__PURE__ */ jsxs(ListRowTop, { children: [/* @__PURE__ */ jsx(ListRowTitle, { children: bar(slots.titleBar()) }), variant === "default" ? /* @__PURE__ */ jsx(ListRowMeta, { children: bar(slots.metaBar()) }) : null] }), description ? /* @__PURE__ */ jsx(ListRowBottom, { children: /* @__PURE__ */ jsx(ListRowDescription, { children: bar(slots.descriptionBar()) }) }) : null] })]
+	});
+}
+//#endregion
 //#region src/components/meter/meter.tsx
 const meter = tv({
 	slots: {
@@ -1614,4 +1750,4 @@ function MeterIndicator({ className, ...props }) {
 	});
 }
 //#endregion
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, InboxItemLeadingBadge, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, OverlayLayerProvider, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useParentOverlayKind, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, ListRowSkeleton, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, OverlayLayerProvider, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, useParentOverlayKind, useTruncated };

package/package.json

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