@oxy.so/bloom 3.5.0 → 4.0.0

package/src/chart-cards/palette.ts

@@ -1,43 +1,11 @@
-import { ACCENT_TABLE, BUTTON_SHADOW, DANGER_TABLE, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
-import { oklchToSrgb, srgbToOklch, srgbToRgbString, type Oklch } from '../theme/color-space';
-import { quietText, quietTextOver } from '../styles/color-contrast';
+import { quietTextOver } from '../styles/color-contrast';
 import { AA_TEXT, AA_TEXT_STRONG } from '../styles/surface-levels';
-import { parseRgba } from '../theme/color-utils';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { BUTTON_SHADOW, mixColor } from '../button/shared';
+import { resolveThemeChartColors } from '../theme/chart-colors';
 import type { Theme } from '../theme/types';
 
-/**
- * Chart-card tokens on Bloom's ramps (`button/shared`):
- *
- *                              light           dark
- *   background-secondary       neutral-100     neutral-900     card surface
- *   text-primary               text            text            headline
- *   text-secondary             surfaceTextOn().textSecondary   label, legend
- *   text-tertiary              surfaceTextOn().textTertiary    caption, ticks
- *   chart-neutral              neutral-300     neutral-800     last year
- *   chart-cursor               neutral-300     neutral-700     line hover rule
- *   chart-track                neutral-200     neutral-800     bar hover band
- *   status-lime                200 / 800       950@60% / 500   rising delta
- *   status-rose                200 / 800       950@60% / 500   falling delta
- *   neutral chip               neutral-200/500 neutral-800/500 flat delta
- *   background-inner           card            n-800@60%       stat tiles
- *   background-primary         card            neutral-800     range pill
- *   background-primary-hover   neutral-100     n-700@60%       range pill hover
- *   border-button              neutral-200     neutral-700     range pill border
- *   shadow-xs                  black 5%        black 18%       range pill shadow
- *
- * The series hues, hardcoded and mapped to theme roles:
- *
- *   chart-2 (lime 400 / 500)     Tailwind's lightness, and its chroma ratio and
- *   chart-9 (indigo 400 / 500)   hue distance from `blue-500` re-anchored on
- *                                `primary`: a Tailwind-blue primary reproduces
- *                                lime and indigo, any other preset rotates both
- *                                with the brand
- *
- * A chart hue is DATA, not status, so it does not follow `success` — on the
- * default presets `success` is a deep green whose 400 stop paints a heavy
- * teal line where the chart draws a bright lime. The delta chips ARE status
- * and do follow `success` / `negative`.
- */
+/** Chart surfaces, text and status use the same semantic roles as other cards. */
 export interface ChartCardPalette {
   surface: string;
   text: string;
@@ -62,122 +30,35 @@ export interface ChartSeriesTone {
 }
 
 export function resolveChartCardPalette(theme: Theme): ChartCardPalette {
-  const { neutral: n } = resolveButtonRamps(theme);
-  const lime = colorRamp(theme.colors.success, ACCENT_TABLE);
-  const rose = colorRamp(theme.colors.negative, DANGER_TABLE);
-  const surface = theme.isDark ? n[900] : n[100];
-  // The two quiet text rungs are read off THIS card's fill, not off a ramp stop.
-  // As ramp stops they measured 4.38:1 (light) / 3.78:1 (dark) for the label and
-  // 2.42:1 / 2.29:1 for the axis ticks — a chart whose own captions were below
-  // AA, because `neutral-400` was chosen against the page and the card is not
-  // the page. `surfaceTextOn` floors both against the surface they land on.
-  // The stat tiles (`inner`) are a second fill these labels land on, and in dark
-  // they sit on the OTHER side of the text from the card — so the rungs are
-  // floored over both, not over whichever one happened to be checked.
-  const inner = theme.isDark ? mixColor(surface, n[800], 0.6) : theme.colors.card;
-  const fills = [surface, inner];
-  const quiet = {
-    textSecondary: quietTextOver(fills, theme.colors.text, AA_TEXT_STRONG),
-    textTertiary: quietTextOver(fills, theme.colors.text, AA_TEXT),
+  const c = theme.colors;
+  return {
+    surface: c.card,
+    text: c.text,
+    textSecondary: quietTextOver([c.card, c.backgroundSecondary], c.text, AA_TEXT_STRONG),
+    textTertiary: quietTextOver([c.card, c.backgroundSecondary], c.text, AA_TEXT),
+    neutralSeries: c.textTertiary,
+    cursor: c.border,
+    track: c.contrast50,
+    positive: resolveAccentColors(c, 'success', 'subtle'),
+    negative: resolveAccentColors(c, 'error', 'subtle'),
+    neutral: resolveAccentColors(c, 'default', 'subtle'),
+    inner: c.backgroundSecondary,
+    pill: { background: c.backgroundSecondary, hover: c.contrast50, border: c.borderLight, shadow: BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'] },
   };
-  return theme.isDark
-    ? {
-        surface,
-        text: theme.colors.text,
-        textSecondary: quiet.textSecondary,
-        textTertiary: quiet.textTertiary,
-        neutralSeries: n[800],
-        cursor: n[700],
-        track: n[800],
-        positive: { background: mixColor(surface, lime[950], 0.6), foreground: lime[500] },
-        negative: { background: mixColor(surface, rose[950], 0.6), foreground: rose[500] },
-        neutral: { background: n[800], foreground: quietText(n[800], theme.colors.text, AA_TEXT) },
-        inner,
-        pill: { background: n[800], hover: mixColor(n[800], n[700], 0.6), border: n[700], shadow: BUTTON_SHADOW.dark },
-      }
-    : {
-        surface,
-        text: theme.colors.text,
-        textSecondary: quiet.textSecondary,
-        textTertiary: quiet.textTertiary,
-        neutralSeries: n[300],
-        cursor: n[300],
-        track: n[200],
-        positive: { background: lime[200], foreground: lime[800] },
-        negative: { background: rose[200], foreground: rose[800] },
-        neutral: { background: n[200], foreground: quietText(n[200], theme.colors.text, AA_TEXT) },
-        inner,
-        pill: { background: theme.colors.card, hover: n[100], border: n[200], shadow: BUTTON_SHADOW.light },
-      };
-}
-
-/** Tailwind v4 `blue-500`, the anchor a role-less hue is measured from. */
-const BLUE_500: Oklch = { l: 0.623, c: 0.214, h: 259.815 };
-
-/**
- * `chart-1` … `chart-9` tokens as Tailwind v4's 400 (fill) and 500
- * (`-active`, hover) stops, in OKLCH.
- */
-export const CHART_HUES = {
-  1: [{ l: 0.777, c: 0.152, h: 181.912 }, { l: 0.704, c: 0.14, h: 182.503 }], // teal
-  2: [{ l: 0.841, c: 0.238, h: 128.85 }, { l: 0.768, c: 0.233, h: 130.85 }], // lime
-  3: [{ l: 0.718, c: 0.202, h: 349.761 }, { l: 0.656, c: 0.241, h: 354.308 }], // pink
-  4: [{ l: 0.746, c: 0.16, h: 232.661 }, { l: 0.685, c: 0.169, h: 237.323 }], // sky
-  5: [{ l: 0.714, c: 0.203, h: 305.504 }, { l: 0.627, c: 0.265, h: 303.9 }], // purple
-  6: [{ l: 0.707, c: 0.165, h: 254.624 }, { l: 0.623, c: 0.214, h: 259.815 }], // blue
-  7: [{ l: 0.765, c: 0.177, h: 163.223 }, { l: 0.696, c: 0.17, h: 162.48 }], // emerald
-  8: [{ l: 0.852, c: 0.199, h: 91.936 }, { l: 0.795, c: 0.184, h: 86.047 }], // yellow
-  9: [{ l: 0.673, c: 0.182, h: 276.935 }, { l: 0.585, c: 0.233, h: 277.117 }], // indigo
-} as const satisfies Record<number, readonly [Oklch, Oklch]>;
-
-export type ChartHue = keyof typeof CHART_HUES;
-
-/** OKLCH → `rgb()`, reducing chroma until it fits sRGB (hue-stable). */
-function toRgb({ l, c, h }: Oklch): string {
-  let chroma = c;
-  for (let i = 0; i < 24; i++) {
-    const rgb = oklchToSrgb({ l, c: chroma, h });
-    const back = srgbToOklch(rgb);
-    if (Math.abs(back.l - l) < 0.01 && Math.abs(back.c - chroma) < 0.01) {
-      return srgbToRgbString(rgb);
-    }
-    chroma *= 0.9;
-  }
-  return srgbToRgbString(oklchToSrgb({ l, c: chroma, h }));
 }
 
-function fromPrimary(primary: string, target: Oklch): string {
-  const rgba = parseRgba(primary);
-  if (!rgba) return primary;
-  const base = srgbToOklch(rgba);
-  return toRgb({
-    // Tailwind's own lightness, like `colorRamp`'s absolute stops: a preset whose
-    // primary sits darker than blue-500 would otherwise turn lime into olive.
-    l: target.l,
-    c: base.c * (target.c / BLUE_500.c),
-    h: (((base.h + (target.h - BLUE_500.h)) % 360) + 360) % 360,
-  });
-}
+/** Index into the canonical nine-series palette; independent of a named hue. */
+export type ChartHue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
-/**
- * One `chart-n` token on the theme: Tailwind's lightness, with its chroma ratio
- * and hue distance from `blue-500` re-anchored on `primary`. A Tailwind-blue
- * primary reproduces the hues above exactly; any other preset rotates every
- * hue with the brand, so the series keep their relative spacing.
- */
 export function chartHueTone(theme: Theme, hue: ChartHue): ChartSeriesTone {
-  const [fill, active] = CHART_HUES[hue];
-  return { color: fromPrimary(theme.colors.primary, fill), activeColor: fromPrimary(theme.colors.primary, active) };
+  return resolveThemeChartColors(theme)[hue - 1]!;
 }
 
-/**
- * The default series order, chosen so neighbours stay distinct — lime, blue,
- * purple, pink, yellow, emerald, sky, teal.
- */
-export const CHART_TONE_ORDER: readonly ChartHue[] = [2, 6, 5, 3, 8, 7, 4, 1];
+/** The original five separated hues first, then the four interleaved additions. */
+export const CHART_TONE_ORDER: readonly ChartHue[] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 export function resolveChartTones(theme: Theme): ChartSeriesTone[] {
-  return CHART_TONE_ORDER.map((hue) => chartHueTone(theme, hue));
+  return [...resolveThemeChartColors(theme)];
 }
 
 /**
@@ -195,14 +76,9 @@ export function resolveTone(
   return tones[((index % tones.length) + tones.length) % tones.length]!;
 }
 
-/**
- * The single-ink look: light mode a mid grey (neutral-500, hover 600), dark
- * mode near-white bands (neutral-50 at 84% over the card, hover neutral-50).
- */
+/** A neutral data series and its emphasis, drawn from the text contrast roles. */
 export function resolveMonoTone(theme: Theme): ChartSeriesTone {
-  const { neutral: n } = resolveButtonRamps(theme);
-  if (!theme.isDark) return { color: n[500], activeColor: n[600] };
-  return { color: mixColor(n[900], n[50], 0.84), activeColor: n[50] };
+  return { color: theme.colors.textSecondary, activeColor: theme.colors.text };
 }
 
 /** `chart-2` / `chart-2-active` — the revenue card's series. */

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,
   };
 }