@botiverse/raft-ui 0.21.2 → 0.22.1

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);

package/dist/styles.css

@@ -578,6 +578,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));
@@ -625,9 +698,9 @@ textarea:-webkit-autofill:disabled {
   background-image: linear-gradient(var(--fill-medium), var(--fill-medium));
 }
 
-/* A mark that leads a line of text: the icon or status light at the start of
-   a banner, a toast, a panel notice or a chip sits on the first line of its
-   text, centred on it, and stays there when the text wraps
+/* A mark that leads a line of text: the icon at the start of a banner, a
+   toast or a panel notice, or the status light of a chip, sits on the first
+   line of its text, centred on it, and stays there when the text wraps
    (design/foundations/alignment.md#a-mark-that-leads-text). In Space
    Grotesk's metrics the centre of the line box is the centre of the cap
    height (to 0.006em); Chromium's rounding can lift the letters 0.5px, which
@@ -640,17 +713,18 @@ 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 (Banner,
-   PanelNotice, ToastIcon, Badge, PanelActivity); when placing Status
-   yourself, don't pass a size. */
+   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). */
 @utility lead-icon {
   flex-shrink: 0;
   align-self: start;
   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]
             }
           }
         }

package/dist/wip.d.mts

@@ -1,9 +1,9 @@
-import { $i as DialogTitleProps, Ai as Dialog, E as MessageQuotedPreviewAuthorDelegatedByProps, Ii as DialogContentProps, Jr as DropdownMenuLinkItemProps, Ni as DialogClose, Oi as TextLinkProps, T as MessageQuotedPreviewAuthorDelegatedBy, _n as MessageItemDelegatedByButton, a as MessageListJumpPillDismissProps, bn as MessageItemDelegatedByNameProps, c as MessageListJumpPillProps, ca as DataAttributes, ea as DialogTrigger, gn as MessageItemDelegatedBy, hn as MessageItemDelegatedAvatarProps, i as MessageListJumpPillDismiss, la as StyledProps, mn as MessageItemDelegatedAvatar, n as MessageListJumpControlsProps, o as MessageListJumpPillGroup, qr as DropdownMenuLinkItem, r as MessageListJumpPill, ra as ButtonProps, s as MessageListJumpPillGroupProps, sa as VariantProps, t as MessageListJumpControls, vn as MessageItemDelegatedByButtonProps, xn as MessageItemDelegatedByProps, yn as MessageItemDelegatedByName } from "./index-C1FHbVfH.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-ChANmbeB.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";
-import { Combobox } from "@base-ui/react/combobox";
 import { PointerSensor, TouchSensor, TouchSensorOptions } from "@dnd-kit/core";
+import { Combobox } from "@base-ui/react/combobox";
 import { Meter as Meter$1 } from "@base-ui/react/meter";
 //#region src/components/combobox-select/combobox-select.types.d.ts
 type ComboboxSelectValue = string | number;
@@ -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: {
@@ -500,4 +563,45 @@ export declare function MeterTrack({ className, ...props }: MeterTrackProps): im
 type MeterIndicatorProps = StyledProps<Meter$1.Indicator.Props>;
 export declare function MeterIndicator({ className, ...props }: MeterIndicatorProps): import("react").JSX.Element;
 //#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, 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, type MeterHeaderProps, type MeterIndicatorProps, type MeterLabelProps, type MeterProps, type MeterTrackProps, type MeterValueProps, type UseCommentMarginFitsOptions };
+//#region src/lib/overlay-depth.d.ts
+/**
+ * A modal surface: a centred dialog (Dialog, AlertDialog, or an app's own
+ * modal) or a sheet (Drawer).
+ */
+type OverlayLayerKind = "dialog" | "drawer";
+type OverlayLayerProviderProps = {
+  /**
+   * What the surface is. Use `"dialog"` for an app's own modal, whatever it
+   * looks like: `"drawer"` is for a Base UI Drawer, which nests under another
+   * drawer by itself and only draws its own scrim over a `"dialog"`.
+   */
+  kind: OverlayLayerKind;
+  /** Whether it dims what is under it. A non-modal surface adds nothing. */
+  modal: boolean;
+  children?: ReactNode;
+};
+/**
+ * Tells everything under it that a modal surface is open, so a raft-ui
+ * Dialog, AlertDialog or Drawer opened from inside draws the lighter nested
+ * scrim (design/foundations/elevation.md#stacked-overlays). raft-ui's own
+ * roots add one by themselves; an app's own modal (its own backdrop, Esc and
+ * focus) wraps its scrim and its content in one to join the stack, and reads
+ * `useParentOverlayKind` inside it to pick its own scrim. Modal overlays only:
+ * a non-modal one passes `modal={false}`, adds nothing, and must not call
+ * `useParentOverlayKind` (it would read the layer below as its own).
+ */
+export declare function OverlayLayerProvider({ kind, modal, children }: OverlayLayerProviderProps): import("react").JSX.Element;
+/**
+ * The modal surface this overlay's own surface was opened from, or null when
+ * it is the first. Call it inside the surface's own `OverlayLayerProvider`
+ * (for raft-ui's overlays, inside their root): the last entry is the surface
+ * itself and the one before it is its parent. Not null means the surface is
+ * stacked over another and draws `layer-backdrop-nested` instead of
+ * `layer-backdrop`. Modal overlays only: under `modal={false}` nothing is
+ * added, so the last entry is the parent and this returns the wrong layer. It reads React context, so it sees the surfaces whose
+ * tree this one is rendered in, portals included; one opened from outside
+ * that tree is not stacked on it here.
+ */
+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, 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 { $n as DialogTitle, Fn as TooltipContent, Gn as DialogContent, Gt as measureContent, Hn as Dialog, Jt as readNow, Kt as measureElement, Pn as Tooltip, Rn as TooltipTrigger, Wn as DialogClose, Wt as useOverflowTitle, _ as MessageQuotedPreviewAuthorDelegatedBy, _t as MessageItemDelegatedByName, a as MessageListJumpPill, cr as useThemeScopeProps, dr as tv, er as DialogTrigger, gt as MessageItemDelegatedByButton, ht as MessageItemDelegatedBy, i as MessageListJumpControls, in as DropdownMenuLinkItem, ir as defaultNativeButton, lr as useTheme, mt as MessageItemDelegatedAvatar, n as useHoldThenMoveTouchSensor, o as MessageListJumpPillDismiss, qt as observeTruncation, s as MessageListJumpPillGroup, t as inboxItem, tr as Button$1, zn as TextLink } from "./inbox-item.recipe-CuJPcy-3.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-BtvK75T1.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: [
@@ -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, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, InboxItemLeadingBadge, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useHoldThenMoveTouchSensor, 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.21.2",
+  "version": "0.22.1",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",