@oxy.so/bloom 3.6.0 → 4.0.0

package/src/address/index.ts

@@ -0,0 +1,15 @@
+export { AddressList } from './AddressList';
+export { AddressRow } from './AddressRow';
+export { ADDRESS_GEOMETRY, ADDRESS_KIND_ICON } from './constants';
+export type { AddressGeometry } from './constants';
+export { resolveAddressPaint } from './shared';
+export type { AddressPaint } from './shared';
+export type {
+  AddressDensity,
+  AddressKind,
+  AddressListEntry,
+  AddressListProps,
+  AddressListSection,
+  AddressListVariant,
+  AddressRowProps,
+} from './types';

package/src/address/shared.ts

@@ -0,0 +1,31 @@
+/**
+ * What an address row paints, read RELATIVE to the surface it was dropped on
+ * (`styles/surface-levels.ts`) — a picker list sits in a sheet, a checkout
+ * summary sits in a card, and a search result list sits on the page.
+ *
+ * Pure, so `AddressRow.test.tsx` can walk presets and modes without rendering.
+ */
+import { surfaceFillOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+
+export interface AddressPaint extends SurfaceTextPaint {
+  /** The round tile a glyph sits in — one step off whatever is behind the row. */
+  tile: string;
+}
+
+export function resolveAddressPaint(theme: Theme, surface: string): AddressPaint {
+  return {
+    ...surfaceTextOn(theme, surface),
+    tile: surfaceFillOn(theme, surface),
+  };
+}
+
+/** Joins the non-empty parts of an accessible name. */
+export function joinAddressName(
+  parts: ReadonlyArray<string | false | null | undefined>,
+  separator = ', ',
+): string {
+  return parts
+    .filter((part): part is string => typeof part === 'string' && part !== '')
+    .join(separator);
+}

package/src/address/types.ts

@@ -0,0 +1,105 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+
+/**
+ * WHERE THIS ADDRESS CAME FROM — data, not three components.
+ *
+ * It chooses the default glyph and nothing else: a saved place, one the user
+ * used recently, one a search offered, or a plain place with no provenance. An
+ * app that wants a different glyph passes `icon`; an app whose flavours are not
+ * these three passes `icon` too, rather than asking for a fourth member.
+ */
+export type AddressKind = 'place' | 'saved' | 'recent' | 'suggestion';
+
+export type AddressDensity = 'comfortable' | 'compact';
+
+export interface AddressRowProps {
+  /** The line a reader identifies the place by — "Home", "Carrer de l’Om 14". */
+  title: string;
+  /** The rest of it — "Carrer de l’Om 14, Barcelona", "2nd floor, ring twice". */
+  subtitle?: string;
+  /** Chooses the default glyph. Default `place`. */
+  kind?: AddressKind;
+  /** The glyph, overriding whatever `kind` would have chosen. */
+  icon?: BloomIconComponent;
+  /**
+   * An arbitrary leading node — an `Avatar`, a map thumbnail — instead of the
+   * glyph tile. Read for PRESENCE: `leading={null}` draws NO media at all, for a
+   * row in a list that already has a gutter of its own (`RouteStops`).
+   */
+  leading?: ReactNode;
+  /** A short trailing reading — "1.2 km", "12 min". Drawn before `action`. */
+  meta?: string;
+  /** A node after the title — a `Badge` ("Default"), a `Chip`. */
+  badge?: ReactNode;
+  /** A trailing control — a `GlyphButton`, a `Button`. */
+  action?: ReactNode;
+  /** Highlights the row and announces the selection, for the role it is given. */
+  selected?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  /** Default `comfortable`. */
+  density?: AddressDensity;
+  /**
+   * What the row IS in the tree around it. `AddressList` passes this; a row
+   * placed on its own leaves it alone and gets a plain pressable row.
+   */
+  role?: 'radio' | 'option' | 'listitem';
+  /**
+   * The announced name. Defaults to the title, subtitle and meta joined — the
+   * row's own text, in reading order, as one utterance.
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** One entry of an `AddressList`. */
+export interface AddressListEntry extends Omit<AddressRowProps, 'onPress' | 'selected' | 'role'> {
+  /** Identifies the entry to `onSelect` and `selectedId`. */
+  id: string;
+}
+
+export interface AddressListSection {
+  /** Stable key. Defaults to the index. */
+  id?: string;
+  /** "Saved", "Recent", "Results". A section with no title draws no header. */
+  title?: string;
+  entries: readonly AddressListEntry[];
+}
+
+/**
+ * `list` is a list of places a reader is reading; `picker` is a list they are
+ * choosing ONE of. The difference is the announced tree — a `radiogroup` of
+ * `radio`s against a `list` of `listitem`s — which is why it is a variant and
+ * not a styling prop.
+ */
+export type AddressListVariant = 'list' | 'picker';
+
+export interface AddressListProps {
+  sections: readonly AddressListSection[];
+  /** The chosen entry's `id`. Only meaningful for `variant="picker"`. */
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+  /** Default `list`. */
+  variant?: AddressListVariant;
+  /** Default `comfortable`. */
+  density?: AddressDensity;
+  /** Draws placeholder rows instead of the sections. */
+  loading?: boolean;
+  /** How many placeholder rows. Default 3. */
+  loadingRows?: number;
+  /** Replaces the whole empty block. */
+  empty?: ReactNode;
+  /** Default `"Nothing here yet"`. */
+  emptyTitle?: string;
+  emptyDescription?: string;
+  /** The glyph above the empty text. Default a map pin. */
+  emptyIcon?: BloomIconComponent;
+  /** Names the list. Default `"Addresses"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/admonition/Admonition.tsx

@@ -79,9 +79,9 @@ AdmonitionText.displayName = 'AdmonitionText';
 export function AdmonitionButton({
   children,
   ...props
-}: Omit<ButtonProps, 'size' | 'variant'>) {
+}: Omit<ButtonProps, 'size'>) {
   return (
-    <BaseButton size="small" {...props}>
+    <BaseButton size="sm" {...props}>
       {children}
     </BaseButton>
   );

package/src/agent-chat/AgentChatActionsBase.tsx

@@ -136,7 +136,7 @@ export function AgentChatActionsBase({
             </DropdownMenuItem>
           ) : null}
           {onDelete ? (
-            <DropdownMenuItem className={DENSE_ROW_CLASS} variant="destructive" onPress={onDelete}>
+            <DropdownMenuItem className={DENSE_ROW_CLASS} tone="danger" onPress={onDelete}>
               {l.deleteChat}
             </DropdownMenuItem>
           ) : null}

package/src/agent-chat/AgentChatHistoryBase.tsx

@@ -232,7 +232,7 @@ function RowMenu({
           </DropdownMenuItem>
         ) : null}
         {onDelete ? (
-          <DropdownMenuItem className={DENSE_ROW_CLASS} variant="destructive" onPress={onDelete}>
+          <DropdownMenuItem className={DENSE_ROW_CLASS} tone="danger" onPress={onDelete}>
             {labels.delete}
           </DropdownMenuItem>
         ) : null}

package/src/agent-chat/shared.ts

@@ -2,43 +2,14 @@ import { useEffect, useMemo } from 'react';
 import { Platform } from 'react-native';
 
 import {
-  colorRamp,
-  DANGER_TABLE,
-  mixColor,
   resolveButtonPalette,
-  resolveButtonRamps,
   type ButtonPalette,
 } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 
-/**
- * The palette and geometry every agent-chat part paints from — semantic
- * tokens resolved onto Bloom's ramps (`button/shared`):
- *
- *   Token                                 light            dark
- *   background-secondary-default          neutral-100      neutral-900     chat + rail cards
- *   background-secondary-hover            neutral-200      neutral-800     rail rows
- *   background-tertiary-default           neutral-200      neutral-800     row menu trigger hover
- *   background-primary-default            card             neutral-800     composer pill, bubbles, pills
- *   background-primary-hover  (on card)   neutral-100      neutral-700@60% over neutral-800
- *   background-primary-hover  (on chat)   neutral-100      neutral-700@60% over neutral-900
- *   ai-chat-composer-add-background       neutral-100      neutral-700
- *   ai-chat-composer-add-hover-background neutral-200      neutral-600
- *   text-primary                          text             text
- *   text-secondary                        neutral-500      neutral-500
- *   text-tertiary                         neutral-400      neutral-600
- *   text-error-primary                    red-500          red-400
- *   foreground-icon-primary               neutral-950      neutral-50
- *   foreground-icon-secondary             neutral-500      neutral-500
- *   foreground-icon-tertiary              neutral-400      neutral-600
- *   separator-border                      neutral-200      neutral-800
- *   border-focus-ring                     accent-500       accent-500
- *   shadow-card                           0 1 1 / .05      0 1 1 / .14
- *   shadow-xs                             0 1 2 / .05      0 1 2 / .18
- *   header frost                          white / 20%      black / 20%
- */
+/** Shared semantic surfaces, text and action roles for every agent-chat part. */
 export interface AgentChatPalette {
   isDark: boolean;
   chatSurface: string;
@@ -67,35 +38,34 @@ export interface AgentChatPalette {
 }
 
 export function resolveAgentChatPalette(theme: Theme): AgentChatPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const red = colorRamp(theme.colors.negative, DANGER_TABLE);
+  const c = theme.colors;
   const dark = theme.isDark;
-  const card = dark ? n[800] : theme.colors.card;
-  const chatSurface = dark ? n[900] : n[100];
+  const card = c.card;
+  const chatSurface = c.backgroundSecondary;
   return {
     isDark: dark,
     chatSurface,
-    rowHover: dark ? n[800] : n[200],
-    tertiary: dark ? n[800] : n[200],
+    rowHover: c.backgroundTertiary,
+    tertiary: c.backgroundTertiary,
     card,
-    cardHover: dark ? mixColor(card, n[700], 0.6) : n[100],
-    chatHover: dark ? mixColor(chatSurface, n[700], 0.6) : n[100],
-    addBackground: dark ? n[700] : n[100],
-    addHover: dark ? n[600] : n[200],
+    cardHover: c.backgroundSecondary,
+    chatHover: c.backgroundTertiary,
+    addBackground: c.backgroundSecondary,
+    addHover: c.backgroundTertiary,
     text: theme.colors.text,
-    textSecondary: n[500],
-    textTertiary: dark ? n[600] : n[400],
-    textError: dark ? red[400] : red[500],
-    iconPrimary: dark ? n[50] : n[950],
-    iconSecondary: n[500],
-    iconTertiary: dark ? n[600] : n[400],
-    separator: dark ? n[800] : n[200],
-    ring: accent[500],
-    accent500: accent[500],
+    textSecondary: c.textSecondary,
+    textTertiary: c.textTertiary,
+    textError: c.errorSubtleForeground,
+    iconPrimary: c.text,
+    iconSecondary: c.textSecondary,
+    iconTertiary: c.textTertiary,
+    separator: c.borderLight,
+    ring: c.primary,
+    accent500: c.primarySubtleForeground,
     shadowCard: dark ? '0 1px 1px 0 rgba(0, 0, 0, 0.14)' : '0 1px 1px 0 rgba(0, 0, 0, 0.05)',
     shadowXs: dark ? '0 1px 2px 0 rgba(0, 0, 0, 0.18)' : '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
     frost: dark ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)',
-    primary: resolveButtonPalette('primary', theme),
+    primary: resolveButtonPalette('solid', theme, 'action'),
   };
 }
 

package/src/agent-limits-card/AgentLimitsCard.tsx

@@ -18,7 +18,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { ACCENT_TABLE, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
+import { ACCENT_TABLE, colorRamp, resolveButtonRamps } from '../button/shared';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { RiArrowRightLine } from '../icons/remix/RiArrowRightLine';
 import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
@@ -131,49 +131,16 @@ function chartPalette(accent400: string): string[] {
   });
 }
 
-/**
- * Semantic tokens onto Bloom's ramps (`button/shared`):
- *
- *                              light           dark
- *   background-secondary       neutral-100     neutral-900
- *   background-secondary-hover neutral-200     neutral-800
- *   text-primary               text            text
- *   text-secondary             neutral-500     neutral-500
- *   text-tertiary              neutral-400     neutral-600
- *   separator-border-strong    neutral-200     neutral-700 @60% over the card
- *   chart-track                neutral-200     neutral-800
- *   chart-cursor (deferred)    neutral-300     neutral-700
- *   chart-6 (limit fill)       accent-400      accent-400
- *   border-focus-ring          accent-500      accent-500
- */
+/** Canonical theme surfaces, foregrounds and focus roles. */
 function resolvePalette(theme: Theme): CardPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const shared = {
-    text: theme.colors.text,
-    textSecondary: n[500],
-    limitFill: accent[400],
-    ring: accent[500],
-    chart: chartPalette(colorRamp(theme.colors.primary, ACCENT_TABLE)[400]),
+  const c = theme.colors;
+  return {
+    text: c.text, textSecondary: c.textSecondary, textTertiary: c.textTertiary,
+    limitFill: resolveButtonRamps(theme).accent[400], ring: c.primary,
+    chart: chartPalette(colorRamp(c.primary, ACCENT_TABLE)[400]),
+    surface: c.card, hover: c.backgroundSecondary,
+    separator: c.borderLight, track: c.backgroundTertiary, deferred: c.border,
   };
-  return theme.isDark
-    ? {
-        ...shared,
-        surface: n[900],
-        hover: n[800],
-        textTertiary: n[600],
-        separator: mixColor(n[900], n[700], 0.6),
-        track: n[800],
-        deferred: n[700],
-      }
-    : {
-        ...shared,
-        surface: n[100],
-        hover: n[200],
-        textTertiary: n[400],
-        separator: n[200],
-        track: n[200],
-        deferred: n[300],
-      };
 }
 
 // ---------------------------------------------------------------------------

package/src/agent-log/AgentLog.tsx

@@ -18,7 +18,6 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { AgentThinking } from '../agent-thinking';
-import { resolveButtonRamps } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import type { Theme } from '../theme/types';
@@ -63,17 +62,11 @@ const IS_WEB = Platform.OS === 'web';
 //  Palette
 // ---------------------------------------------------------------------------
 
-/**
- *                          light          dark
- *   foreground-icon-quat.  neutral-300    neutral-700   (the guide)
- *   text-secondary         neutral-500    neutral-500
- *   text-primary           text           text
- */
+/** Canonical theme surfaces, foregrounds and focus roles. */
 function resolveLogPalette(theme: Theme) {
-  const { neutral } = resolveButtonRamps(theme);
   return {
-    guide: theme.isDark ? neutral[700] : neutral[300],
-    textSecondary: neutral[500],
+    guide: theme.colors.border,
+    textSecondary: theme.colors.textSecondary,
     textPrimary: theme.colors.text,
   };
 }

package/src/agent-progress/AgentProgress.tsx

@@ -17,7 +17,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import Svg, { Circle, G, Path, Rect } from 'react-native-svg';
 
-import { BUTTON_SHADOW, mixColor, resolveButtonRamps } from '../button/shared';
+import { BUTTON_SHADOW } from '../button/shared';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -133,28 +133,13 @@ function hex(color: string): string {
   return `#${h(c.r)}${h(c.g)}${h(c.b)}`;
 }
 
-/**
- * Semantic tokens onto Bloom's ramps:
- *
- *                                   light          dark
- *   background-primary-default      card           neutral-800
- *   border-button-default           neutral-200    neutral-700
- *   background-quaternary-default   neutral-300    neutral-700
- *   foreground-icon-secondary       neutral-500    neutral-500
- *   text-secondary                  neutral-500    neutral-500
- *   text-primary                    text           text
- *   agent-progress-ring             neutral-700    white 50% (over the neutral-700 track)
- */
+/** Canonical theme surfaces, foregrounds and focus roles. */
 function resolvePalette(theme: Theme): ProgressPalette {
-  const { neutral: n } = resolveButtonRamps(theme);
+  const c = theme.colors;
   return {
-    surface: theme.isDark ? n[800] : theme.colors.card,
-    border: hex(theme.isDark ? n[700] : n[200]),
-    quaternary: hex(theme.isDark ? n[700] : n[300]),
-    iconSecondary: hex(n[500]),
-    textSecondary: n[500],
-    textPrimary: theme.colors.text,
-    ring: hex(theme.isDark ? mixColor(n[700], '#ffffff', 0.5) : n[700]),
+    surface: c.card, border: hex(c.borderLight), quaternary: hex(c.backgroundTertiary),
+    iconSecondary: hex(c.textSecondary), textSecondary: c.textSecondary,
+    textPrimary: c.text, ring: hex(c.textSecondary),
     shadow: BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'],
   };
 }

package/src/agent-progress/AgentProgressLoadingText.tsx

@@ -2,7 +2,6 @@ import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Platform, Text as RNText } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 
-import { resolveButtonRamps } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { parseRgba } from '../theme/color-utils';
 import { useTheme } from '../theme/use-theme';
@@ -94,7 +93,7 @@ function AgentProgressLoadingTextComponent({
 }: AgentProgressLoadingTextProps) {
   const theme = useTheme();
   const reducedMotion = useReducedMotion();
-  const base = resolveButtonRamps(theme).neutral[500];
+  const base = theme.colors.textSecondary;
   const highlight = theme.colors.text;
   const key = shimmerKey(base, highlight);
 

package/src/agent-thinking/AgentThinking.tsx

@@ -14,7 +14,6 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { resolveButtonRamps } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { withAlpha } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
@@ -55,24 +54,17 @@ const VARIANT_TONE: Record<AgentThinkingVariant, AgentThinkingTone> = {
   infinity: 'default',
 };
 
-/**
- *                  light          dark
- *   subtle         neutral-400    neutral-600   (text-tertiary)
- *   default        neutral-500    neutral-500   (text-secondary)
- *   primary        text           text          (text-primary)
- *   accent         accent-500     accent-500    (blue-500)
- */
+/** Canonical theme surfaces, foregrounds and focus roles. */
 function resolveTone(theme: Theme, tone: AgentThinkingTone): string {
-  const { accent, neutral } = resolveButtonRamps(theme);
   switch (tone) {
     case 'subtle':
-      return theme.isDark ? neutral[600] : neutral[400];
+      return theme.colors.textTertiary;
     case 'primary':
       return theme.colors.text;
     case 'accent':
-      return accent[500];
+      return theme.colors.primarySubtleForeground;
     default:
-      return neutral[500];
+      return theme.colors.textSecondary;
   }
 }
 

package/src/ai-chat/AiChatShell.tsx

@@ -249,14 +249,7 @@ export function AiChatMobileHeader({ title, style, testID }: AiChatMobileHeaderP
       ]}>
       <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
         {shell.navCollapsed && shell.hasNav ? (
-          <Button
-            variant="secondary"
-            size="medium"
-            iconOnly
-            icon={RiMenuLine}
-            accessibilityLabel={shell.labels.openNavigation}
-            onPress={shell.openNav}
-          />
+          <Button size="md" icon={RiMenuLine} accessibilityLabel={shell.labels.openNavigation} onPress={shell.openNav} appearance="plain" tone="neutral" />
         ) : null}
         <Text
           variant="headline-medium"
@@ -266,14 +259,7 @@ export function AiChatMobileHeader({ title, style, testID }: AiChatMobileHeaderP
         </Text>
       </View>
       {shell.hasPanel ? (
-        <Button
-          variant="secondary"
-          size="medium"
-          iconOnly
-          icon={shell.panelIcon}
-          accessibilityLabel={shell.labels.openPanel(shell.panelLabel)}
-          onPress={shell.openPanel}
-        />
+        <Button size="md" icon={shell.panelIcon} accessibilityLabel={shell.labels.openPanel(shell.panelLabel)} onPress={shell.openPanel} appearance="plain" tone="neutral" />
       ) : null}
     </View>
   );
@@ -708,14 +694,7 @@ export function AiChatShell({
                 <Text variant="headline-medium" style={{ color: palette.text }}>
                   {panelLabel}
                 </Text>
-                <Button
-                  variant="secondary"
-                  size="medium"
-                  iconOnly
-                  icon={RiCloseLine}
-                  accessibilityLabel={l.closePanel(panelLabel)}
-                  onPress={() => setPanelOpen(false)}
-                />
+                <Button size="md" icon={RiCloseLine} accessibilityLabel={l.closePanel(panelLabel)} onPress={() => setPanelOpen(false)} appearance="plain" tone="neutral" />
               </View>
               <View style={{ minHeight: 0, flex: 1 }}>{panel('100%')}</View>
             </Animated.View>

package/src/ai-chat/shared.ts

@@ -2,11 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { Platform } from 'react-native';
 
 import {
-  ACCENT_TABLE,
   BUTTON_SHADOW,
-  colorRamp,
-  DANGER_TABLE,
-  mixColor,
   resolveButtonRamps,
   type Ramp,
 } from '../button/shared';
@@ -14,28 +10,7 @@ import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 
-/**
- * What every `ai-chat` part paints from: semantic tokens resolved onto
- * Bloom's ramps. (Code colours live in the `code` family.)
- *
- *   Token                                 light          dark
- *   background-full                      card           neutral-925 (900→950 @40%)
- *   background-primary-default           card           neutral-800
- *   background-primary-hover             neutral-100    neutral-700 @60% over the surface
- *   background-secondary-default         neutral-100    neutral-900
- *   background-secondary-hover           neutral-200    neutral-800
- *   background-tertiary-default          neutral-200    neutral-800
- *   border-button-default                neutral-200    neutral-700
- *   text-primary                         text           text
- *   text-secondary / icon-secondary      neutral-500    neutral-500
- *   text-tertiary                        neutral-400    neutral-600
- *   foreground-icon-primary              neutral-950    neutral-50
- *   foreground-icon-quaternary           neutral-300    neutral-700
- *   foreground-icon-hover                black          white
- *
- * Hardcoded hues follow the theme (`stat-cards/tones` recipe): emerald →
- * `success`, red → `negative`, indigo → the accent.
- */
+/** Shared semantic surfaces and foreground pairs; code colours belong to `code`. */
 export interface AiChatPalette {
   isDark: boolean;
   full: string;
@@ -53,11 +28,11 @@ export interface AiChatPalette {
   iconHover: string;
   ring: string;
   neutral: Ramp;
-  /** `text-emerald-700` — additions. */
+  /** Semantic success foreground for additions. */
   addition: string;
-  /** `text-red-600` — deletions. */
+  /** Semantic error foreground for deletions. */
   deletion: string;
-  /** `bg-indigo-100` / `text-indigo-500` — the link chip. */
+  /** Paired accent surface and foreground for the link chip. */
   linkChipBackground: string;
   linkChipText: string;
   shadowXs: string;
@@ -66,31 +41,30 @@ export interface AiChatPalette {
 }
 
 export function resolveAiChatPalette(theme: Theme): AiChatPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const success = colorRamp(theme.colors.success, ACCENT_TABLE);
-  const red = colorRamp(theme.colors.negative, DANGER_TABLE);
+  const { neutral: n } = resolveButtonRamps(theme);
+  const c = theme.colors;
   const dark = theme.isDark;
   return {
     isDark: dark,
-    full: dark ? mixColor(n[900], n[950], 0.4) : theme.colors.card,
-    primary: dark ? n[800] : theme.colors.card,
-    secondary: dark ? n[900] : n[100],
-    secondaryHover: dark ? n[800] : n[200],
-    tertiary: dark ? n[800] : n[200],
-    border: dark ? n[700] : n[200],
+    full: c.background,
+    primary: c.card,
+    secondary: c.backgroundSecondary,
+    secondaryHover: c.backgroundTertiary,
+    tertiary: c.backgroundTertiary,
+    border: c.borderLight,
     text: theme.colors.text,
-    textSecondary: n[500],
-    textTertiary: dark ? n[600] : n[400],
-    iconPrimary: dark ? n[50] : n[950],
-    iconSecondary: n[500],
-    iconQuaternary: dark ? n[700] : n[300],
-    iconHover: dark ? '#ffffff' : '#000000',
-    ring: accent[500],
+    textSecondary: c.textSecondary,
+    textTertiary: c.textTertiary,
+    iconPrimary: c.text,
+    iconSecondary: c.textSecondary,
+    iconQuaternary: c.textTertiary,
+    iconHover: c.text,
+    ring: c.primary,
     neutral: n,
-    addition: success[700],
-    deletion: red[600],
-    linkChipBackground: accent[100],
-    linkChipText: accent[500],
+    addition: c.successSubtleForeground,
+    deletion: c.errorSubtleForeground,
+    linkChipBackground: c.primarySubtle,
+    linkChipText: c.primarySubtleForeground,
     shadowXs: dark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
     shadowCard: dark ? '0 1px 1px 0 rgba(0, 0, 0, 0.14)' : '0 1px 1px 0 rgba(0, 0, 0, 0.05)',
     shadowSidebar: dark
@@ -99,9 +73,9 @@ export function resolveAiChatPalette(theme: Theme): AiChatPalette {
   };
 }
 
-/** `background-primary-hover` over a known surface (dark mode's hover is translucent). */
-export function primaryHoverOver(palette: AiChatPalette, surface: string): string {
-  return palette.isDark ? mixColor(surface, palette.neutral[700], 0.6) : palette.neutral[100];
+/** Canonical hover surface, shared across modes. */
+export function primaryHoverOver(palette: AiChatPalette, _surface: string): string {
+  return palette.secondaryHover;
 }
 
 export function useAiChatPalette(): AiChatPalette {
@@ -241,11 +215,15 @@ export const AI_CHAT_WEB_CSS = `
 [data-bloom-ai-chat-dragging="on"] { cursor: col-resize; user-select: none; }
 [data-bloom-ai-chat-chip] {
   display: inline-flex;
+  max-width: calc(100% - 4px);
+  box-sizing: border-box;
   align-items: center;
   justify-content: center;
   gap: 2px;
   vertical-align: middle;
 }
+[data-bloom-ai-chat-chip] > svg { flex-shrink: 0; }
+[data-bloom-ai-chat-chip] > [dir] { min-width: 0; overflow-wrap: anywhere; }
 @media (prefers-reduced-motion: reduce) {
   [data-bloom-ai-chat-control],
   [data-bloom-ai-chat-tile] [data-bloom-ai-chat-scrim],