@botiverse/raft-ui 0.63.1 → 0.65.0

package/dist/styles.css

@@ -126,14 +126,25 @@
 }
 
 /* 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. */
+   phone, 20px from 768px (`md`) on a touch screen, 16px with a mouse. Heads, notices and footers pad by it
+   (lib/head-edges.ts). A column of list cells sets it to where its rows'
+   content starts (`listColumnMargin`): 20px at every width by touch (8px shape
+   inset + 12px), the 16px page inset with a mouse (8 + 8), so its head,
+   toolbar and rows share one line on a phone too. */
 @layer theme {
   :root,
   :host {
+    /* A surface's own padding (a dialog, a drawer, a panel section): 20px, the
+       page inset (16px) with a mouse on a desktop. One variable, so a caller's
+       `px-0` still replaces it (stdrc, 2026-11-05). */
+    --surface-inset: 20px;
     --column-margin: 16px;
+    /* The sidebar's two axes with a mouse on a desktop (stdrc, 2026-11-05,
+       option B): glyphs (a row's icon or avatar, a section's title) start on
+       the glyph axis, a row's text on the text axis; a row's shape is the
+       box inset from the sidebar's edges, its content 8px inside it. */
+    --sidebar-glyph-axis: var(--page-inset);
+    --sidebar-text-axis: calc(var(--sidebar-glyph-axis) + 24px);
   }
   @media (width >= 48rem) {
     :root,
@@ -141,6 +152,15 @@
       --column-margin: 20px;
     }
   }
+  /* With a mouse on a desktop 16px, the page inset: the compact heads and the
+     content under them share one tighter edge (stdrc, 2026-11-05). */
+  @media (width >= 48rem) and (pointer: fine) {
+    :root,
+    :host {
+      --column-margin: var(--page-inset);
+      --surface-inset: var(--page-inset);
+    }
+  }
 }
 
 /* Desktop type: from 768px (Tailwind's `md`, where the desktop layout begins)
@@ -398,7 +418,7 @@
   --spacing-control-hit: var(--control-hit-inset);
   /* A chip or a button embedded in a frame sits `embedded-inset` (6px) inside
      the frame's outer edge on every side and from its sibling; in a field it
-     is `control-embedded` tall, 20px on a desktop and 32px on a phone, so the
+     is `control-embedded` tall, 22px on a desktop and 32px on a phone, so the
      field keeps the control height (design/foundations/shape.md#inside-a-frame).
      Consumers: `ComboboxChips`, `ComboboxControl`, `ComboboxSelect`,
      InputGroup's end addon, the composer, CodeBlock and the corner actions of
@@ -444,8 +464,8 @@
      Consumers: `SelectItem`, `ComboboxItem`, the menu items of `DropdownMenu`
      and `ContextMenu`, and `.r-combobox-select__option` (which writes the same
      calc in its CSS). */
-  --spacing-option: 2.25rem;
-  --spacing-option-inset: calc((2.25rem - 1lh) / 2);
+  --spacing-option: var(--option-height);
+  --spacing-option-inset: calc((var(--option-height) - 1lh) / 2);
   /* ─── Icon inset ────────────────────────────────────────────────────────────
      How far a frameless icon button's icon box sits inside its edge:
      (button - icon) / 2. 7px for a 32px button with an 18px icon, 11px for a
@@ -730,6 +750,33 @@ textarea:-webkit-autofill:disabled {
   background-color: var(--fill-subtle);
 }
 
+/* MessageItemTrailing (message-item.md#trailing): no column of its own. The
+   slot finds its body's last block itself and stamps it, so every rule ends in
+   an attribute (packages/ui/CLAUDE.md, Selector Cost; no parent-of selector
+   either, #386):
+   - data-trailing-line on the last text block (a paragraph, a heading, a
+     list's last item, a quote's last paragraph): it keeps an inline spacer as
+     wide as the slot (--message-trailing-width, set on the body), so the slot
+     sits at the end of the last line and the text wraps under it only when
+     that line is full;
+   - data-trailing="block" on the body when it ends with any other block (a
+     code block, a table, an image): the body keeps one line under it, where
+     the slot sits.
+   The body is the slot's containing block; the last block's bottom margin
+   still collapses out of it, so the slot stays on the last line. */
+[data-slot="message-item-body"][data-trailing] {
+  position: relative;
+}
+[data-slot="message-item-body"][data-trailing="block"] {
+  padding-block-end: 1lh;
+}
+[data-trailing-line]::after {
+  content: "";
+  display: inline-block;
+  inline-size: var(--message-trailing-width, 0px);
+  block-size: 1px;
+}
+
 @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));

package/dist/tokens.json

@@ -2708,6 +2708,11 @@
           }
         }
       }
+    },
+    "gap": {
+      "$value": "calc(2 * var(--control-air))",
+      "$type": "dimension",
+      "$description": "Between two fields of a form, and between the parts of a form section: two airs."
     }
   },
   "card-title": {
@@ -2753,11 +2758,11 @@
         "value": 44,
         "unit": "px"
       },
-      "$description": "A default control: a field, a Button at lg, an icon button at icon-lg. A finger's 44px on a phone, Feishu's 32px on a desktop.",
+      "$description": "A default control: a field, a select, a Button, a tab, a selected segment, a menu option, a sidebar row. A finger's 44px on a phone; 34px on a desktop, the one desktop size for all of them (stdrc, 2026-11-04; Feishu's 32px before).",
       "$extensions": {
         "build.botiverse.raft": {
           "desktop": {
-            "value": 32,
+            "value": 34,
             "unit": "px"
           }
         }
@@ -2802,7 +2807,7 @@
       "$extensions": {
         "build.botiverse.raft": {
           "desktop": {
-            "value": 6,
+            "value": 5,
             "unit": "px"
           }
         }
@@ -2824,11 +2829,262 @@
       "$extensions": {
         "build.botiverse.raft": {
           "desktop": {
-            "value": 20,
+            "value": 22,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "air": {
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
+      "$description": "The air of the size chain: between a label, its control and its help, around a control in a bar, and half of the gap between two fields. Every step below is the control height plus or minus a number of airs."
+    },
+    "radius": {
+      "$value": {
+        "value": 10,
+        "unit": "px"
+      },
+      "$description": "The corner of a control at the control height (a field, a Select, a Button at lg and icon-lg), about a quarter of its height: 10px at 44 on a phone and a touch screen, 8px at 32 on a desktop.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 8,
+            "unit": "px"
+          }
+        }
+      }
+    }
+  },
+  "header": {
+    "$type": "dimension",
+    "height": {
+      "$value": "calc(var(--control-height) + 2 * var(--header-air))",
+      "$description": "Every header: a panel, a sidebar or a thread head, a dialog's bar, a drawer's head, a rail head. The control height with the header air above and below, so the seams of a screen line up."
+    },
+    "air": {
+      "$value": "var(--control-air)",
+      "$description": "The air above and below the control in a header: one control air on a phone and a touch screen (44 + 12 = 56); 5px on a desktop, so a 34px control and its head make 44 (34 + 10).",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 5,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "height-short": {
+      "$value": {
+        "value": 48,
+        "unit": "px"
+      },
+      "$description": "Every header in a window shorter than 600px. On a desktop, a bar button with one air above and below (28 + 12 = 40).",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": "calc(var(--bar-button-size) + 2 * var(--control-air))"
+        }
+      }
+    }
+  },
+  "bar-button": {
+    "$type": "dimension",
+    "size": {
+      "$value": "var(--control-height)",
+      "$description": "An icon button in a bar: a head's actions and its x, the composer's icons, a row's actions. The control height on a phone and a touch screen; 28px on a desktop, the size of the header's icon tile, so a head's tile and buttons share one size and one centre line. Its hit area still reaches 44px.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 28,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "radius": {
+      "$value": {
+        "value": 10,
+        "unit": "px"
+      },
+      "$description": "The corner of a bar button, about a quarter of its height: 10px at 44 on a phone and a touch screen, 6px at the 28px bar button with a mouse on a desktop.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 6,
+            "unit": "px"
+          }
+        }
+      }
+    }
+  },
+  "frame-item": {
+    "$type": "dimension",
+    "height": {
+      "$value": {
+        "value": 36,
+        "unit": "px"
+      },
+      "$description": "An item on the frame: the top bar's and the title bar's buttons, the workspace button and the search box. 36px on a phone and a touch screen; the control height on a desktop, so the top bar is a header (34 + 2 x 5 = 44 with a mouse).",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": "var(--control-height)"
+        }
+      }
+    }
+  },
+  "switch": {
+    "$type": "dimension",
+    "width": {
+      "$value": {
+        "value": 50,
+        "unit": "px"
+      },
+      "$description": "The switch's track: 50 x 30 on a phone and a touch screen, macOS's regular 38 x 22 on a desktop. Its knob is the track height less 8px (a 1.5px border and 2.5px of padding each side, so the 1px of track between the knob's ring and the border stays) and travels the width less the height.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 38,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "height": {
+      "$value": {
+        "value": 30,
+        "unit": "px"
+      },
+      "$description": "The switch's track height.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 22,
+            "unit": "px"
+          }
+        }
+      }
+    }
+  },
+  "row": {
+    "$type": "dimension",
+    "height": {
+      "$value": {
+        "value": 38,
+        "unit": "px"
+      },
+      "$description": "A sidebar row from 768px, 2px apart; its highlight fills the row. On a desktop the control height (34px): one size for a sidebar item, a menu option, a compact list row, a field, a select, a Button, a tab and a selected segment (stdrc, 2026-11-04). A phone list of places keeps 44px.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": "var(--control-height)"
+        }
+      }
+    }
+  },
+  "option": {
+    "$type": "dimension",
+    "height": {
+      "$value": "2.25rem",
+      "$description": "An option of a popup list or a menu item with one line: 36px on a phone and a touch screen, the row height (34px, the control height) on a desktop.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": "var(--row-height)"
+        }
+      }
+    }
+  },
+  "settings-row": {
+    "$type": "dimension",
+    "inset": {
+      "$value": "calc(2 * var(--control-air))",
+      "$description": "Above and below the tallest part of a settings row (ListRow plain): two airs."
+    }
+  },
+  "section": {
+    "$type": "dimension",
+    "gap": {
+      "$value": {
+        "value": 32,
+        "unit": "px"
+      },
+      "$description": "Between two sections of a form (FormSection), half above and half below the hairline between them: 32px on a phone and a touch screen, two field gaps (24px) on a desktop.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": "calc(2 * var(--field-gap))"
+        }
+      }
+    }
+  },
+  "page": {
+    "$type": "dimension",
+    "top": {
+      "$value": "var(--page-inset)",
+      "$description": "From a head's seam to the first thing of the content under it: the page inset on a phone and a touch screen; 12px on a desktop, so the content sits close under its compact head (stdrc, 2026-11-05).",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 12,
             "unit": "px"
           }
         }
       }
+    },
+    "inset": {
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      },
+      "$description": "The inset of a column's content, a settings page, a drawer's body and a dialog's form: 16px on a phone and a touch screen; 16px with a mouse on a desktop too (20 before 2026-11-05), where the column margin, the list cells' content and the heads follow it, one edge.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": {
+            "value": 16,
+            "unit": "px"
+          }
+        }
+      }
+    }
+  },
+  "rail": {
+    "$type": "dimension",
+    "width": {
+      "$value": {
+        "value": 57,
+        "unit": "px"
+      },
+      "$description": "The rail, its 1px seam included: 57px on a touch screen, 49px on a desktop (48 + 1, the short window's rail). Its own size, not the header's.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": "var(--rail-width-short)"
+        }
+      }
+    },
+    "item": {
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      },
+      "$description": "A rail item: 40px on a touch screen, 36px on a desktop.",
+      "$extensions": {
+        "build.botiverse.raft": {
+          "desktop": "var(--rail-item-short)"
+        }
+      }
+    },
+    "width-short": {
+      "$value": {
+        "value": 49,
+        "unit": "px"
+      },
+      "$description": "The rail in a window shorter than 600px, its 1px seam included; with a mouse the rail is always this width (48 + 1)."
+    },
+    "item-short": {
+      "$value": {
+        "value": 36,
+        "unit": "px"
+      },
+      "$description": "A rail item in a window shorter than 600px; with a mouse rail items are always this size."
     }
   },
   "timeline": {

package/dist/wip.d.mts

@@ -1,3 +1,5 @@
+import { ButtonSplit, ButtonSplitMain, ButtonSplitMainProps, ButtonSplitMenu, ButtonSplitMenuProps, ButtonSplitProps, ButtonSplitSize, ButtonSplitVariant } from "./components/button/button-split.mjs";
+import "./components/button/index.mjs";
 import { Dialog, DialogClose, DialogFooterNote, DialogFooterNoteProps, DialogSheetBack, DialogSheetBackProps, DialogTrigger } from "./components/dialog/dialog.mjs";
 import { DialogCommit, DialogCommitProps, DialogSheetContent, DialogSheetContentProps } from "./components/dialog/dialog-sheet.mjs";
 import "./components/dialog/index.mjs";
@@ -13,6 +15,7 @@ import { PreviewCardActions, PreviewCardActionsProps, PreviewCardBody, PreviewCa
 import "./components/preview-card/index.mjs";
 import { AvatarGroupButton, AvatarGroupButtonProps } from "./components/avatar/avatar.mjs";
 import "./components/avatar/index.mjs";
+import { MessageItemTrailing, MessageItemTrailingProps } from "./components/message-item/message-item-content.mjs";
 import { MessageItemDelegatedAvatar, MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, MessageItemDelegatedByNameProps, MessageItemDelegatedByProps } from "./components/message-item/message-item-delegated.mjs";
 import { MessageReferenceIcon, MessageReferenceIconProps, MessageReferenceReadMark, MessageReferenceReadMarkProps } from "./components/message-item/message-reference.mjs";
 import "./components/message-item/index.mjs";
@@ -59,6 +62,8 @@ import "./components/meter/index.mjs";
 import { FilterChip, FilterChipLabel, FilterChipLabelProps, FilterChipProps, FilterChipRemove, FilterChipRemoveProps } from "./components/filter-chip/filter-chip.mjs";
 import "./components/filter-chip/index.mjs";
 import { OverlayLayerKind, OverlayLayerProvider, OverlayLayerProviderProps, useParentOverlayKind } from "./lib/overlay-depth.mjs";
+import { AppLinkCard, AppLinkCardActions, AppLinkCardActionsProps, AppLinkCardBody, AppLinkCardBodyProps, AppLinkCardEyebrow, AppLinkCardEyebrowProps, AppLinkCardHeader, AppLinkCardHeaderProps, AppLinkCardHost, AppLinkCardHostProps, AppLinkCardIcon, AppLinkCardIconProps, AppLinkCardMeta, AppLinkCardMetaProps, AppLinkCardName, AppLinkCardNameProps, AppLinkCardPlaceholder, AppLinkCardPlaceholderProps, AppLinkCardTitle, AppLinkCardTitleProps } from "./components/app-link-card/app-link-card.mjs";
+import "./components/app-link-card/index.mjs";
 import { PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PullToRefreshState } from "./components/pull-to-refresh/pull-to-refresh-gesture.mjs";
 import { PULL_TO_REFRESH_POINTER_QUERY, PullToRefresh, PullToRefreshPlatform, UsePullToRefreshOptions, usePullToRefresh } from "./components/pull-to-refresh/use-pull-to-refresh.mjs";
 import { PullToRefreshIndicator, PullToRefreshIndicatorProps } from "./components/pull-to-refresh/pull-to-refresh-indicator.mjs";
@@ -69,4 +74,4 @@ import { SaveStatus, SaveStatusError, SaveStatusErrorProps, SaveStatusProps, Sav
 import "./components/save-status/index.mjs";
 import { TaskCompletionControl, TaskCompletionControlProps } from "./components/task-completion-control/task-completion-control.mjs";
 import "./components/task-completion-control/index.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, type AvatarGroupButtonProps, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemLine, type InboxItemLineProps, InboxItemListGroup, type InboxItemListGroupProps, InboxItemListHeading, type InboxItemListHeadingProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, InboxItemStatus, type InboxItemStatusProps, type KbdKeyName, KbdShortcut, type KbdShortcutProps, type KeyboardPlatform, LIFT_CLASS, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, 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, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, 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, ModeBar, ModeBarAction, type ModeBarActionProps, ModeBarContent, type ModeBarContentProps, ModeBarDescription, type ModeBarDescriptionProps, type ModeBarProps, ModeBarTitle, type ModeBarTitleProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, type AppLinkCardActionsProps, AppLinkCardBody, type AppLinkCardBodyProps, AppLinkCardEyebrow, type AppLinkCardEyebrowProps, AppLinkCardHeader, type AppLinkCardHeaderProps, AppLinkCardHost, type AppLinkCardHostProps, AppLinkCardIcon, type AppLinkCardIconProps, AppLinkCardMeta, type AppLinkCardMetaProps, AppLinkCardName, type AppLinkCardNameProps, AppLinkCardPlaceholder, type AppLinkCardPlaceholderProps, AppLinkCardTitle, type AppLinkCardTitleProps, AvatarGroupButton, type AvatarGroupButtonProps, ButtonSplit, ButtonSplitMain, type ButtonSplitMainProps, ButtonSplitMenu, type ButtonSplitMenuProps, type ButtonSplitProps, type ButtonSplitSize, type ButtonSplitVariant, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemLine, type InboxItemLineProps, InboxItemListGroup, type InboxItemListGroupProps, InboxItemListHeading, type InboxItemListHeadingProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, InboxItemStatus, type InboxItemStatusProps, type KbdKeyName, KbdShortcut, type KbdShortcutProps, type KeyboardPlatform, LIFT_CLASS, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageItemTrailing, type MessageItemTrailingProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, 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, ModeBar, ModeBarAction, type ModeBarActionProps, ModeBarContent, type ModeBarContentProps, ModeBarDescription, type ModeBarDescriptionProps, type ModeBarProps, ModeBarTitle, type ModeBarTitleProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/dist/wip.mjs

@@ -1,5 +1,6 @@
 import "./lib/drag-escape.mjs";
 import { OverlayLayerProvider, useParentOverlayKind } from "./lib/overlay-depth.mjs";
+import { ButtonSplit, ButtonSplitMain, ButtonSplitMenu } from "./components/button/button-split.mjs";
 import { Dialog, DialogClose, DialogFooterNote, DialogSheetBack, DialogTrigger } from "./components/dialog/dialog.mjs";
 import { DialogCommit, DialogSheetContent } from "./components/dialog/dialog-sheet.mjs";
 import { useKeyboardPlatform } from "./lib/use-platform.mjs";
@@ -10,6 +11,7 @@ import { PopoverActions, PopoverBody } from "./components/popover/popover.mjs";
 import { MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel } from "./components/mobile-nav/mobile-nav-server.mjs";
 import { PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta } from "./components/preview-card/preview-card.mjs";
 import { AvatarGroupButton } from "./components/avatar/avatar.mjs";
+import { MessageItemTrailing } from "./components/message-item/message-item-content.mjs";
 import { MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName } from "./components/message-item/message-item-delegated.mjs";
 import { MessageReferenceIcon, MessageReferenceReadMark } from "./components/message-item/message-reference.mjs";
 import { MessageQuotedPreviewAuthorDelegatedBy } from "./components/message-quoted-preview/message-quoted-preview.mjs";
@@ -40,10 +42,11 @@ import { InboxItemSkeleton, InboxItemSkeletonList } from "./components/inbox-ite
 import { ListRowSkeleton } from "./components/list-row/list-row-skeleton.mjs";
 import { Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "./components/meter/meter.mjs";
 import { FilterChip, FilterChipLabel, FilterChipRemove } from "./components/filter-chip/filter-chip.mjs";
+import { AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle } from "./components/app-link-card/app-link-card.mjs";
 import { PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD } from "./components/pull-to-refresh/pull-to-refresh-gesture.mjs";
 import { PULL_TO_REFRESH_POINTER_QUERY, usePullToRefresh } from "./components/pull-to-refresh/use-pull-to-refresh.mjs";
 import { PullToRefreshIndicator } from "./components/pull-to-refresh/pull-to-refresh-indicator.mjs";
 import { ChoiceList } from "./components/choice-list/choice-list.mjs";
 import { SaveStatus, SaveStatusError, SaveStatusSaved } from "./components/save-status/save-status.mjs";
 import { TaskCompletionControl } from "./components/task-completion-control/task-completion-control.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemSkeleton, InboxItemSkeletonList, InboxItemStatus, KbdShortcut, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, 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, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle, AvatarGroupButton, ButtonSplit, ButtonSplitMain, ButtonSplitMenu, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemLine, InboxItemListGroup, InboxItemListHeading, InboxItemSkeleton, InboxItemSkeletonList, InboxItemStatus, KbdShortcut, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageItemTrailing, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useKeyboardPlatform, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/package.json

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