@oxy.so/bloom 3.6.0 → 4.1.0

package/src/chart-cards/primitives/CartesianPlot.tsx

@@ -1,3 +1,4 @@
+import { boundedLabelSlot } from '../svg-text';
 import React, { useCallback, useMemo, useState } from 'react';
 import {
   Platform,
@@ -229,12 +230,11 @@ export function CartesianPlot({
               pointerEvents="none"
               style={{
                 position: 'absolute',
-                left: box.left - TICK_SIZE - Y_TICK_MARGIN - LABEL_SLOT,
+                ...boundedLabelSlot(size.width, box.left - TICK_SIZE - Y_TICK_MARGIN, 'end', LABEL_SLOT),
                 top: tick.y + Y_LABEL_TOP_OFFSET,
-                width: LABEL_SLOT,
                 alignItems: 'flex-end',
               }}>
-              <Text numberOfLines={1} style={[Y_TICK_TYPE, tickColor]}>
+              <Text numberOfLines={1} style={[Y_TICK_TYPE, tickColor, { maxWidth: '100%' }]}>
                 {formatYTick(tick.value)}
               </Text>
             </View>
@@ -258,15 +258,14 @@ export function CartesianPlot({
                 pointerEvents="none"
                 style={{
                   position: 'absolute',
-                  left: (placed?.tickCoord ?? labelX(i, box)) - LABEL_SLOT / 2,
+                  ...boundedLabelSlot(size.width, placed?.tickCoord ?? size.width / 2, 'middle', LABEL_SLOT),
                   top: box.bottom + X_LABEL_TOP_OFFSET,
-                  width: LABEL_SLOT,
-                  alignItems: 'center',
+                    alignItems: 'center',
                   opacity: placed ? 1 : 0,
                 }}>
                 <Text
                   numberOfLines={1}
-                  style={[X_TICK_TYPE, tickColor]}
+                  style={[X_TICK_TYPE, tickColor, { maxWidth: '100%' }]}
                   onLayout={(event) => {
                     const w = event.nativeEvent.layout.width;
                     setLabelWidths((prev) => (prev[key] === w ? prev : { ...prev, [key]: w }));

package/src/chart-cards/primitives/ChartHeader.tsx

@@ -89,7 +89,7 @@ export function ChartHeadline({
               accessibilityElementsHidden={hovering}
               importantForAccessibility={hovering ? 'no-hide-descendants' : 'auto'}>
               <Chip
-                size="medium"
+                size="md"
                 testID={testID ? `${testID}-delta` : undefined}
                 style={{ backgroundColor: chip.background }}
                 textStyle={{ color: chip.foreground }}>

package/src/chart-cards/primitives/MultiAxisPlot.tsx

@@ -1,3 +1,4 @@
+import { boundedLabelSlot } from '../svg-text';
 import React, { useCallback, useMemo, useState } from 'react';
 import {
   Platform,
@@ -214,12 +215,11 @@ export function MultiAxisPlot({
               pointerEvents="none"
               style={{
                 position: 'absolute',
-                left: box.left - TICK_SIZE - Y_TICK_MARGIN - LABEL_SLOT,
+                ...boundedLabelSlot(size.width, box.left - TICK_SIZE - Y_TICK_MARGIN, 'end', LABEL_SLOT),
                 top: tick.y + Y_LABEL_TOP_OFFSET,
-                width: LABEL_SLOT,
                 alignItems: 'flex-end',
               }}>
-              <Text numberOfLines={1} style={[Y_TICK_TYPE, tickColor]}>
+              <Text numberOfLines={1} style={[Y_TICK_TYPE, tickColor, { maxWidth: '100%' }]}>
                 {axis.format(tick.value)}
               </Text>
             </View>
@@ -231,12 +231,11 @@ export function MultiAxisPlot({
                   pointerEvents="none"
                   style={{
                     position: 'absolute',
-                    left: box.right + TICK_SIZE + Y_TICK_MARGIN,
+                    ...boundedLabelSlot(size.width, box.right + TICK_SIZE + Y_TICK_MARGIN, 'start', LABEL_SLOT),
                     top: tick.y + Y_LABEL_TOP_OFFSET,
-                    width: LABEL_SLOT,
-                    alignItems: 'flex-start',
+                        alignItems: 'flex-start',
                   }}>
-                  <Text numberOfLines={1} style={[Y_TICK_TYPE, tickColor]}>
+                  <Text numberOfLines={1} style={[Y_TICK_TYPE, tickColor, { maxWidth: '100%' }]}>
                     {rightAxis.format(tick.value)}
                   </Text>
                 </View>
@@ -251,15 +250,14 @@ export function MultiAxisPlot({
                 pointerEvents="none"
                 style={{
                   position: 'absolute',
-                  left: (placed?.tickCoord ?? labelX(i, box)) - LABEL_SLOT / 2,
+                  ...boundedLabelSlot(size.width, placed?.tickCoord ?? size.width / 2, 'middle', LABEL_SLOT),
                   top: box.bottom + X_LABEL_TOP_OFFSET,
-                  width: LABEL_SLOT,
-                  alignItems: 'center',
+                    alignItems: 'center',
                   opacity: placed ? 1 : 0,
                 }}>
                 <Text
                   numberOfLines={1}
-                  style={[X_TICK_TYPE, tickColor]}
+                  style={[X_TICK_TYPE, tickColor, { maxWidth: '100%' }]}
                   onLayout={(event) => {
                     const w = event.nativeEvent.layout.width;
                     setLabelWidths((prev) => (prev[key] === w ? prev : { ...prev, [key]: w }));

package/src/chart-cards/primitives/PeriodChartHeader.tsx

@@ -51,7 +51,7 @@ export function PeriodChartHeader({
             label={rangesLabel}
             type="radio"
             value={rangeId ?? ranges[0]!.id}
-            onChange={(id) => onRangeChange?.(id)}>
+            onValueChange={(id) => onRangeChange?.(id)}>
             {ranges.map((range) => (
               <SegmentedControlItem
                 key={range.id}

package/src/chart-cards/primitives/use-chart-palette.ts

@@ -15,7 +15,7 @@ export function useChartCardPalette(): ChartCardPalette {
   return useMemo(() => resolveChartCardPalette(theme), [theme]);
 }
 
-/** The eight default series tones, in `CHART_TONES` order, on the current theme. */
+/** The nine canonical series tones, in token order, on the current theme. */
 export function useChartTones(): ChartSeriesTone[] {
   const theme = useTheme();
   return useMemo(() => resolveChartTones(theme), [theme]);

package/src/chart-cards/sankey-layout.ts

@@ -382,6 +382,12 @@ export function sankeyLinkPath(link: SankeyLinkPath): string {
   return `M${link.sourceX},${link.sourceY} C${link.sourceControlX},${link.sourceY} ${link.targetControlX},${link.targetY} ${link.targetX},${link.targetY}`;
 }
 
+/** A closed band: unlike a thick stroke it cannot bulge past the node edges. */
+export function sankeyRibbonPath(link: SankeyLinkPath): string {
+  const half = Math.max(1, link.width) / 2;
+  return `M${link.sourceX},${link.sourceY - half} C${link.sourceControlX},${link.sourceY - half} ${link.targetControlX},${link.targetY - half} ${link.targetX},${link.targetY - half} L${link.targetX},${link.targetY + half} C${link.targetControlX},${link.targetY + half} ${link.sourceControlX},${link.sourceY + half} ${link.sourceX},${link.sourceY + half} Z`;
+}
+
 /**
  * The node outline: rounded (radius ≤ 5) only on its outward side, so a
  * ribbon meets a square edge. Sources round on the left, sinks on the right.
@@ -406,14 +412,15 @@ export function sankeyNodePath(x: number, y: number, w: number, h: number, round
 
 /**
  * What the pointer is over: a node (drawn on top) first, then the topmost
- * link whose stroked ribbon contains the point. Ribbons are hit-tested against
- * the cubic's centre line, with the half-width measured perpendicular to it.
+ * link whose filled ribbon contains the point. Its two cubic edges are vertical
+ * translations of the centre line, so test the vertical half-width, not the
+ * perpendicular stroke width (which incorrectly includes steep-curve bulges).
  */
 export function hitTestSankey(
   layout: SankeyLayout,
   px: number,
   py: number,
-  strokeWidthOf: (link: SankeyLinkPath) => number = (l) => Math.max(1, l.width),
+  bandWidthOf: (link: SankeyLinkPath) => number = (l) => Math.max(1, l.width),
 ): { type: 'node' | 'link'; index: number } | null {
   for (let i = layout.nodes.length - 1; i >= 0; i--) {
     const n = layout.nodes[i]!;
@@ -432,11 +439,29 @@ export function hitTestSankey(
     }
     const t = (lo + hi) / 2;
     const y = cubicValue(l.sourceY, l.sourceY, l.targetY, l.targetY, t);
-    const u = 1 - t;
-    const dx = 3 * u * u * (l.sourceControlX - l.sourceX) + 6 * u * t * (l.targetControlX - l.sourceControlX) + 3 * t * t * (l.targetX - l.targetControlX);
-    const dy = 6 * u * t * (l.targetY - l.sourceY);
-    const slope = dx === 0 ? 0 : dy / dx;
-    if (Math.abs(py - y) <= (strokeWidthOf(l) / 2) * Math.sqrt(1 + slope * slope)) return { type: 'link', index: l.index };
+    if (Math.abs(py - y) <= bandWidthOf(l) / 2) return { type: 'link', index: l.index };
   }
   return null;
 }
+
+/** Pack one column's full labels around node centres without overlap. */
+export function placeSankeyLabels(
+  labels: readonly { index: number; center: number; height: number }[],
+  height: number,
+  gap = 8,
+): Record<number, number> {
+  const ordered = [...labels].sort((a, b) => a.center - b.center);
+  const tops: Record<number, number> = {};
+  let next = 0;
+  for (const label of ordered) {
+    tops[label.index] = Math.max(next, label.center - label.height / 2);
+    next = tops[label.index]! + label.height + gap;
+  }
+  let bottom = height;
+  for (let index = ordered.length - 1; index >= 0; index--) {
+    const label = ordered[index]!;
+    tops[label.index] = Math.min(tops[label.index]!, bottom - label.height);
+    bottom = tops[label.index]! - gap;
+  }
+  return tops;
+}

package/src/chart-cards/svg-text.ts

@@ -23,3 +23,13 @@ export function textTopForBaseline(baseline: number, type: Pick<TextStyle, 'font
 export function svgTextType(variant: TypeScaleVariant): TextStyle {
   return { ...TYPE_SCALE[variant], letterSpacing: 0 };
 }
+
+/** Keep the label's layout box inside its plot without moving its text anchor.
+ * Empty, invisible label slots still contribute to document scroll width on web.
+ */
+export function boundedLabelSlot(plotWidth: number, anchorX: number, anchor: 'start' | 'middle' | 'end', preferredWidth: number): { left: number; width: number } {
+  const x = Math.max(0, Math.min(plotWidth, anchorX));
+  const room = anchor === 'start' ? plotWidth - x : anchor === 'end' ? x : 2 * Math.min(x, plotWidth - x);
+  const width = Math.max(0, Math.min(preferredWidth, room));
+  return { left: anchor === 'start' ? x : anchor === 'end' ? x - width : x - width / 2, width };
+}

package/src/chat-composer/ComposerAttachmentStrip.tsx

@@ -6,7 +6,7 @@
  * helper is how two composers end up with rings that close at different angles.
  */
 import React from 'react';
-import { Image, ScrollView, View } from 'react-native';
+import { Image, Pressable, ScrollView, View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 import { ringPath } from '../composer-panel/shared';
@@ -33,12 +33,16 @@ function Tile({
   size,
   onRemove,
   removeLabel,
+  onOpen,
+  openLabel,
   testID,
 }: {
   attachment: ChatComposerAttachment;
   size: number;
   onRemove?: (id: string) => void;
   removeLabel: (attachment: ChatComposerAttachment) => string;
+  onOpen?: (id: string) => void;
+  openLabel?: (attachment: ChatComposerAttachment) => string;
   testID?: string;
 }) {
   const theme = useTheme();
@@ -60,6 +64,19 @@ function Tile({
         ? attachment.source
         : resolveImage?.(attachment.source, 'thumb');
 
+  // The box is a button only where the caller gave it something to do. A tile
+  // that is `role="button"` with no handler announces an action that is not
+  // there, and one that opens on press without a role is unreachable.
+  const Box = onOpen === undefined ? View : Pressable;
+  const boxProps =
+    onOpen === undefined
+      ? {}
+      : {
+          role: 'button' as const,
+          accessibilityLabel: (openLabel ?? ((a: ChatComposerAttachment) => a.name))(attachment),
+          onPress: () => onOpen(attachment.id),
+        };
+
   return (
     <View style={{ width: size, gap: 4 }} testID={testID}>
       {/* The clipped box and the ring are SIBLINGS, never nested. Inside the
@@ -69,7 +86,8 @@ function Tile({
           photo. The symptom is a ring that stops three quarters of the way
           round while the dash arithmetic says it is complete. */}
       <View style={{ position: 'relative', width: size, height: size }}>
-        <View
+        <Box
+          {...boxProps}
           style={{
             width: size,
             height: size,
@@ -90,7 +108,7 @@ function Tile({
           ) : (
             <Glyph width={22} height={22} fill={palette.iconSecondary} />
           )}
-        </View>
+        </Box>
         {uploading ? (
           <View
             {...dataHook('bloomChatComposerRing')}
@@ -140,8 +158,10 @@ function Tile({
 export function ComposerAttachmentStrip({
   attachments,
   onRemove,
+  onOpen,
   size = TILE,
   removeLabel = defaultRemoveLabel,
+  openLabel,
   style,
   testID,
   accessibilityLabel = 'Attachments',
@@ -173,6 +193,8 @@ export function ComposerAttachmentStrip({
           size={size}
           onRemove={onRemove}
           removeLabel={removeLabel}
+          onOpen={onOpen}
+          openLabel={openLabel}
           testID={testID ? `${testID}-${attachment.id}` : undefined}
         />
       ))}

package/src/chat-composer/shared.ts

@@ -1,3 +1,4 @@
+import { surfaceFillOn, hairlineOn, surfaceTextOn } from '../styles/surface-levels';
 /**
  * What every file of the `chat-composer` family paints from: the palette
  * resolved onto Bloom's ramps, the geometry the parts share, the default data
@@ -100,21 +101,22 @@ export function withAlpha(color: string, alpha: number): string {
 }
 
 export function resolveChatComposerPalette(theme: Theme): ChatComposerPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
-  const surface = dark ? n[800] : theme.colors.card;
+  const surface = theme.colors.card;
+  const textPaint = surfaceTextOn(theme, surface);
   return {
     surface,
     page: theme.colors.background,
-    hover: dark ? mixColor(n[800], n[700], 0.6) : n[100],
-    hoverStrong: dark ? n[700] : n[200],
-    inset: dark ? mixColor(n[800], n[900], 0.6) : n[100],
-    border: dark ? n[700] : n[200],
+    hover: surfaceFillOn(theme, surface),
+    hoverStrong: hairlineOn(theme, surface),
+    inset: theme.colors.backgroundSecondary,
+    border: hairlineOn(theme, surface),
     text: theme.colors.text,
-    textSecondary: n[500],
-    textPlaceholder: dark ? n[600] : n[400],
+    textSecondary: textPaint.textSecondary,
+    textPlaceholder: textPaint.textTertiary,
     iconPrimary: theme.colors.text,
-    iconSecondary: n[500],
+    iconSecondary: textPaint.textSecondary,
     accent: accent[500],
     // A tint of the PAGE toward the accent, so a banner rail's wash keeps its
     // own surface's luminance instead of being an alpha of an unknown backdrop.

package/src/chat-composer/types.ts

@@ -1,10 +1,19 @@
-import type { ComponentType, ReactNode, RefObject } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import type { StyleProp, TextInput, ViewStyle } from 'react-native';
 
-import type { Props as IconProps } from '../icons/shared';
+import type { BloomIconComponent } from '../icons/icon-component';
 
-/** Every glyph slot in this family takes a Bloom icon component. */
-export type ChatComposerIcon = ComponentType<IconProps>;
+/**
+ * Every glyph slot in this family takes a Bloom icon component.
+ *
+ * It is `BloomIconComponent` — width, height, fill — and not the full Remix
+ * prop set: those three are all this family ever passes, and demanding the
+ * whole set made the type reject any icon component written to Bloom's own
+ * published shape. A mail message handing its attachment glyph to this strip
+ * was the case that found it.
+ */
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type ChatComposerIcon = BloomIconComponent;
 
 /** Props shared by every part: a style escape hatch and a test handle. */
 interface PartProps {
@@ -235,9 +244,18 @@ export interface ComposerBannerProps extends PartProps {
 export interface ComposerAttachmentStripProps extends PartProps {
   attachments: ReadonlyArray<ChatComposerAttachment>;
   onRemove?: (id: string) => void;
+  /**
+   * Opens a tile. A composer's attachments are things you are about to send,
+   * so they only need removing; the same strip in a READ-ONLY place — a mail
+   * message's attachments — is a list you open. With this the tile is a named
+   * button; without it the tile stays decoration, as it was.
+   */
+  onOpen?: (id: string) => void;
   /** Tile edge. Default `56`. */
   size?: number;
   removeLabel?: (attachment: ChatComposerAttachment) => string;
+  /** Names an openable tile. Defaults to the attachment's own name. */
+  openLabel?: (attachment: ChatComposerAttachment) => string;
   accessibilityLabel?: string;
 }
 

package/src/chat-indicators/shared.ts

@@ -100,7 +100,7 @@ export interface ChatIndicatorPaint {
 }
 
 export function resolveChatIndicatorPaint(theme: Theme): ChatIndicatorPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const { colors } = theme;
   const dark = theme.isDark;
   const success = colorRamp(colors.success, ACCENT_TABLE);
@@ -108,18 +108,18 @@ export function resolveChatIndicatorPaint(theme: Theme): ChatIndicatorPaint {
     online: dark ? success[400] : success[600],
     idle: colors.warning,
     busy: colors.error,
-    offline: dark ? n[500] : n[400],
+    offline: colors.textTertiary,
     surface: colors.background,
     accent: accent[500],
     onAccent: colors.primaryForeground,
-    mutedFill: dark ? n[700] : n[200],
-    onMuted: dark ? n[100] : n[700],
-    tick: dark ? n[400] : n[500],
+    mutedFill: colors.backgroundTertiary,
+    onMuted: colors.text,
+    tick: colors.textSecondary,
     tickRead: dark ? accent[400] : accent[600],
     failed: colors.error,
     text: colors.text,
     textMuted: colors.textSecondary,
-    ringSeen: dark ? n[700] : n[300],
+    ringSeen: colors.border,
     ringUnseen: [accent[300], accent[500], dark ? accent[800] : accent[700]] as const,
   };
 }

package/src/chat-list/ChatListItem.tsx

@@ -7,11 +7,11 @@ import { RiNotificationOffFill } from '../icons/remix/RiNotificationOffFill';
 import { RiPushpinFill } from '../icons/remix/RiPushpinFill';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { SwipeRow, useSwipeAvailable } from '../swipe-row';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TYPE_SCALE } from '../typography/scale';
 import { ChatAvatar, ChatGlyphButton, RowLink, actionGlyphColor } from './parts';
-import { ChatSwipeRow } from './ChatSwipeRow';
 import {
   CHAT_ATTACHMENT_ICONS,
   CHAT_LIST_CSS,
@@ -47,9 +47,10 @@ import type { ChatAction, ChatListItemProps } from './types';
  * two are mutually exclusive by construction — if their message is the last one,
  * yours has no place in this row — and the badge wins.
  *
- * ACTIONS come from `swipeActions`. On touch a drag uncovers them; on web they
- * appear as icon buttons on hover and keyboard focus, over the right column,
- * because there is no drag gesture to discover there. The buttons are siblings
+ * ACTIONS come from `swipeActions`. On a touch pointer a drag uncovers them
+ * (`SwipeRow`, the library's one drag implementation); on a mouse they appear
+ * as icon buttons on hover and keyboard focus, over the right column, because
+ * there is no drag gesture to discover there. The buttons are siblings
  * of the row's link, never children of it: a button inside an anchor is invalid
  * HTML and every "Archive" click would open the conversation.
  *
@@ -85,7 +86,7 @@ function ChatListItemComponent({
   href,
   swipeActions,
   onAction,
-  swipeEnabled = !IS_WEB,
+  swipeEnabled,
   accessibilityLabel,
   labels,
   style,
@@ -97,6 +98,21 @@ function ChatListItemComponent({
   }, []);
   const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
   const [pressed, setPressed] = useState(false);
+  // The drag belongs to the POINTER, not to the platform: `swipeEnabled`
+  // overrides it, and the panes take this family's own resolved pairs so they
+  // match the rest of the row exactly.
+  const swipeAvailable = useSwipeAvailable();
+  const swipePaint = useMemo(
+    () => ({
+      neutral: paint.neutralAction,
+      onNeutral: paint.onNeutralAction,
+      accent: paint.accent,
+      onAccent: paint.onAccent,
+      negative: paint.negativeFill,
+      onNegative: paint.onAccent,
+    }),
+    [paint],
+  );
 
   const text = useMemo(() => ({ ...DEFAULT_ITEM_LABELS, ...labels }), [labels]);
   const geo = CHAT_ROW_GEOMETRY[density];
@@ -344,17 +360,23 @@ function ChatListItemComponent({
     </View>
   );
 
-  if (swipeActions && swipeEnabled && (swipeActions.left?.length || swipeActions.right?.length)) {
+  if (
+    swipeActions &&
+    (swipeEnabled ?? swipeAvailable) &&
+    (swipeActions.left?.length || swipeActions.right?.length)
+  ) {
     return (
-      <ChatSwipeRow
+      <SwipeRow
         actions={swipeActions}
         onAction={onAction}
         height={geo.height}
-        paint={paint}
+        radius={CHAT_ROW_RADIUS}
+        paint={swipePaint}
+        background={paint.background}
         testID={testID ? `${testID}-swipe` : undefined}
       >
         {row}
-      </ChatSwipeRow>
+      </SwipeRow>
     );
   }
   return row;

package/src/chat-list/parts.tsx

@@ -164,21 +164,6 @@ export function actionGlyphColor(action: ChatAction, paint: ChatListPaint): stri
   }
 }
 
-/** The pane fill an action's tone paints behind a swipe, and the text on it. */
-export function actionPanePaint(
-  action: ChatAction,
-  paint: ChatListPaint,
-): { background: string; foreground: string } {
-  switch (action.tone) {
-    case 'negative':
-      return { background: paint.negativeFill, foreground: paint.onAccent };
-    case 'accent':
-      return { background: paint.accent, foreground: paint.onAccent };
-    default:
-      return { background: paint.neutralAction, foreground: paint.onNeutralAction };
-  }
-}
-
 // ---------------------------------------------------------------------------
 //  The avatar slot
 // ---------------------------------------------------------------------------

package/src/chat-list/shared.ts

@@ -93,12 +93,8 @@ export const CHAT_ROW_GEOMETRY: Record<ChatListDensity, ChatRowGeometry> = {
 /** Corner radius of a row's hover/selected fill. */
 export const CHAT_ROW_RADIUS = 12;
 
-/** How far a row travels before the drag is committed rather than sprung back. */
-export const SWIPE_COMMIT_FRACTION = 0.4;
-/** The widest a swipe pane opens, per action. */
-export const SWIPE_ACTION_WIDTH = 76;
-/** Below this the drag reads as a tap. */
-export const SWIPE_TAP_SLOP = 10;
+// The swipe's thresholds and pane width live in `swipe-row/constants.ts` —
+// this family drags through `SwipeRow` and owns none of that geometry.
 
 // ---------------------------------------------------------------------------
 //  Attachment glyphs
@@ -166,7 +162,7 @@ export interface ChatListPaint {
  * colour. Text, accents and the destructive tone come from the ramps.
  */
 export function resolveChatListPaint(theme: Theme): ChatListPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   const { background, text } = theme.colors;
   const step = (light: number, darkAlpha: number) =>
@@ -183,12 +179,12 @@ export function resolveChatListPaint(theme: Theme): ChatListPaint {
     background,
     hover: step(0.06, 0.09),
     selected: step(0.1, 0.14),
-    heading: dark ? n[400] : n[500],
-    divider: dark ? n[700] : n[200],
+    heading: theme.colors.textSecondary,
+    divider: theme.colors.border,
     negative: dark ? danger[400] : danger[600],
     negativeFill: dark ? danger[700] : danger[500],
-    neutralAction: dark ? n[700] : n[300],
-    onNeutralAction: dark ? n[100] : n[700],
+    neutralAction: theme.colors.backgroundTertiary,
+    onNeutralAction: theme.colors.text,
     ring: accent[500],
     placeholder: step(0.11, 0.16),
   };

package/src/chat-list/types.ts

@@ -128,6 +128,11 @@ export interface ChatPreview {
  */
 export type ChatActionTone = 'neutral' | 'accent' | 'negative';
 
+/**
+ * Structurally `SwipeRowAction` — this family drags through `SwipeRow`, and
+ * `ChatListItem` handing one array to the other is what keeps the two spellings
+ * from drifting. The names stay because they are this family's published API.
+ */
 export interface ChatAction {
   /** Stable identity, and what `onAction` reports. */
   key: string;
@@ -228,8 +233,9 @@ export interface ChatListItemProps {
   /** Called with the action's `key` when one is triggered, from either affordance. */
   onAction?: (key: string) => void;
   /**
-   * Turns the drag gesture off (the hover buttons stay). Default: on wherever
-   * the platform is not web.
+   * Turns the drag gesture on or off explicitly. It defaults to
+   * `useSwipeAvailable()` — on for every touch pointer, off for a mouse, which
+   * keeps the hover buttons instead.
    */
   swipeEnabled?: boolean;
   /**

package/src/chat-people/ContactRow.tsx

@@ -46,6 +46,8 @@ function ContactRowComponent(props: ContactRowProps) {
   const {
     name,
     avatar,
+    avatarSlot,
+    identitySlot,
     avatarVariant,
     subtitle,
     status,
@@ -59,6 +61,7 @@ function ContactRowComponent(props: ContactRowProps) {
     onPress,
     disabled = false,
     size = 'medium',
+    horizontalInset = 10,
     style,
     textStyle,
     testID,
@@ -72,7 +75,7 @@ function ContactRowComponent(props: ContactRowProps) {
 
   const body = (
     <>
-      <AvatarPresence
+      {avatarSlot !== undefined ? avatarSlot : <AvatarPresence
         source={avatar}
         variant={avatarVariant}
         name={name}
@@ -80,8 +83,9 @@ function ContactRowComponent(props: ContactRowProps) {
         status={status}
         presenceRingColor={paint.surface}
         presenceLabel=""
-      />
+      />}
       <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
+        {identitySlot !== undefined ? identitySlot : <>
         <Text
           variant="body-medium"
           numberOfLines={1}
@@ -100,6 +104,7 @@ function ContactRowComponent(props: ContactRowProps) {
             {subtitle}
           </Text>
         )}
+        </>}
       </View>
       {trailingSlot !== undefined ? (
         trailingSlot
@@ -136,9 +141,9 @@ function ContactRowComponent(props: ContactRowProps) {
     backgroundColor:
       (hovered && pressable) || (checkboxRow && selected) ? paint.rowHighlight : 'transparent',
     paddingTop: 8,
-    paddingRight: 10,
+    paddingRight: horizontalInset,
     paddingBottom: 8,
-    paddingLeft: 10,
+    paddingLeft: horizontalInset,
     opacity: disabled ? DISABLED_OPACITY : 1,
   };
 
@@ -200,6 +205,7 @@ function ContactRowComponent(props: ContactRowProps) {
             size="small"
             disabled={disabled}
             onPress={onAction}
+            accessibilityLabel={`${actionLabel} ${name}`}
             testID={testID ? `${testID}-action` : undefined}
           >
             {actionLabel}