@oxy.so/bloom 7.1.4 → 7.2.0

package/src/content-panel/ContentPanel.tsx

@@ -11,13 +11,12 @@ import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
  * On NATIVE none of the WEB overlay machinery applies: there is no document
  * scroll, no sticky positioning, and no bleed to mask, so the panel is simply a
  * surface wrapping its content. The `framed` prop still drives whether that
- * surface is rounded + bordered, tri-state and resolved with pure NativeWind
- * (the breakpoint's `min-*:` variant evaluates against the window width on
- * native too — the material follows the same window breakpoint):
+ * surface is rounded + bordered, tri-state with responsive NativeWind borders
+ * (the material and scoped radius follow the same window breakpoint):
  *
  *  - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
  *    breakpoint (default `768` / Tailwind `md`), rounded + bordered at/above it
- *    (e.g. `md:rounded-radius-28 md:border md:border-border`).
+ *    (e.g. `md:border md:border-border`).
  *  - `false` → never framed (plain full-bleed at every size).
  *  - `true` → always rounded + bordered.
  *
@@ -35,7 +34,8 @@ import React, { memo } from 'react';
 import { SurfacePaint } from '../surface/SurfacePaint';
 import { StyleSheet, useWindowDimensions } from 'react-native';
 
-import { useOptionalPanelChrome } from '../styles/panel-chrome';
+import { useOptionalPanelChrome, usePanelShape } from '../styles/panel-chrome';
+import { surfaceStyle as resolveShapeStyle } from '../shapes/surface-style';
 import { StyledView } from '../styles/styled-primitives';
 import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 import {
@@ -63,17 +63,17 @@ export const PANEL_BOTTOM_INSET = 8;
  * value is the only runtime decision.
  */
 const RESPONSIVE_SURFACE: Record<ContentPanelFramedBreakpoint, string> = {
-  500: 'min-[500px]:rounded-radius-28 min-[500px]:border min-[500px]:border-border',
-  640: 'sm:rounded-radius-28 sm:border sm:border-border',
-  768: 'md:rounded-radius-28 md:border md:border-border',
-  1024: 'lg:rounded-radius-28 lg:border lg:border-border',
+  500: 'min-[500px]:border min-[500px]:border-border',
+  640: 'sm:border sm:border-border',
+  768: 'md:border md:border-border',
+  1024: 'lg:border lg:border-border',
 };
 
 const RESPONSIVE_CONTENT: Record<ContentPanelFramedBreakpoint, string> = {
-  500: 'min-[500px]:overflow-hidden min-[500px]:rounded-radius-28',
-  640: 'sm:overflow-hidden sm:rounded-radius-28',
-  768: 'md:overflow-hidden md:rounded-radius-28',
-  1024: 'lg:overflow-hidden lg:rounded-radius-28',
+  500: 'min-[500px]:overflow-hidden',
+  640: 'sm:overflow-hidden',
+  768: 'md:overflow-hidden',
+  1024: 'lg:overflow-hidden',
 };
 
 const ContentPanelComponent: React.FC<ContentPanelProps> = ({
@@ -91,33 +91,38 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
 }) => {
   // Dev-only invariant — a ContentPanel must never be nested inside another.
   useContentPanelNestingGuard();
+  const panelShape = usePanelShape();
   const panelChrome = useOptionalPanelChrome();
   // What the panel tells its subtree it is painted in (`./shared.ts`).
   const rawFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
   const defaultFill = rawFill;
   const { width } = useWindowDimensions();
   const parentFill = useOptionalSurfaceFill();
-  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom);
+  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom) && chrome !== 'none';
   const publishedFill = rawFill && paintsSurface ? resolveSurfaceMaterial({ fill: rawFill, parentFill: parentFill! }).publishedFill : rawFill;
-  const radius = StyleSheet.flatten(surfaceStyle)?.borderRadius ?? 28;
+  const radius = StyleSheet.flatten(surfaceStyle)?.borderRadius ?? panelShape.radius;
+  const isFramed = framed ?? width >= framedFrom;
+  const geometry = { ...resolveShapeStyle({ curve: panelShape.curve }), borderRadius: isFramed ? radius : 0 };
 
   // Tri-state: `undefined` → responsive (breakpoint-gated), `true` → always
   // framed, `false` → never framed (plain full-bleed). Whole literal class
   // strings are selected per mode so the Tailwind content-scan over `src/**`
-  // picks up every `min-*`/`sm:`/`md:`/`lg:` / `rounded-radius-28` token verbatim
+  // picks up every `min-*`/`sm:`/`md:`/`lg:` token verbatim
   // (the breakpoint bundle lives whole in `RESPONSIVE_SURFACE`; `framed ===
   // true`/`false` ignore `framedFrom` for fixed always/never framing).
   const surfaceBase =
-    framed === undefined
-      ? `flex-1 ${RESPONSIVE_SURFACE[framedFrom]}`
-      : framed
-        ? 'flex-1 rounded-radius-28 border border-border'
-        : 'flex-1';
+    chrome === 'none'
+      ? 'flex-1'
+      : framed === undefined
+        ? `flex-1 ${RESPONSIVE_SURFACE[framedFrom]}`
+        : framed
+          ? 'flex-1 border border-border'
+          : 'flex-1';
   const surfaceClass = [surfaceBase, fill ? 'min-h-0' : '', surfaceClassName ?? (paintsSurface ? 'bg-transparent' : 'bg-card')].filter(Boolean).join(' ');
   // Native has no overlays: the surface itself carries the edge. `none` drops
   // both, `border` keeps the class-drawn hairline, `elevated` adds the lift.
   const chromeStyle =
-    framed === false || chrome === 'none' || chrome === 'border'
+    !isFramed || chrome === 'none' || chrome === 'border'
       ? null
       : shadow || panelChrome
         ? { boxShadow: shadow ?? panelChrome?.shadow }
@@ -127,24 +132,26 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // bottom and a list inside it scrolls within it. What the prop adds here is
   // `min-h-0`, so a tall child cannot push the panel past the box it was given
   // — the same automatic-minimum-size trap as on web.
-  const contentClass = ['flex-1', framed === true ? 'overflow-hidden rounded-radius-28' : framed === undefined ? RESPONSIVE_CONTENT[framedFrom] : '', fill ? 'min-h-0' : '', contentClassName].filter(Boolean).join(' ');
+  const contentClass = ['flex-1', framed === true ? 'overflow-hidden' : framed === undefined ? RESPONSIVE_CONTENT[framedFrom] : '', fill ? 'min-h-0' : '', contentClassName].filter(Boolean).join(' ');
 
   return (
     <ContentPanelNestingContext.Provider value={true}>
       <StyledView
+        testID="content-panel-surface"
         className={surfaceClass}
         style={[
           // The surface variable rides the element that carries the fill, so
           // the two can never disagree. A no-op on native; the provider below
           // is what answers there. (`styles/surface-levels.ts`.)
           surfaceFillVars(publishedFill),
+          geometry,
           chromeStyle,
           surfaceStyle,
           paintsSurface ? { backgroundColor: 'transparent' } : null,
         ]}
       >
-        {paintsSurface ? <SurfacePaint fill={defaultFill!} radius={radius} /> : null}
-        <StyledView className={contentClass} style={[{ borderRadius: (framed ?? width >= framedFrom) ? radius : 0 }, contentStyle]}>
+        {paintsSurface ? <SurfacePaint fill={defaultFill!} radius={radius} shape={{ curve: panelShape.curve }} /> : null}
+        <StyledView testID="content-panel-content" className={contentClass} style={[geometry, contentStyle]}>
           {/* The panel is a surface: everything inside is sitting on rung 1,
               painted in the colour this panel actually paints. */}
           <SurfaceLevelProvider level={1} fill={publishedFill}>

package/src/content-panel/ContentPanel.web.tsx

@@ -83,18 +83,19 @@ import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
  *
  * Styling is NativeWind-className-first; the literal class strings below MUST
  * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
- * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28` /
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-[var(--bloom-panel-radius)]` /
  * `md:` parts — whole class strings are selected per mode instead).
  */
 import React, { memo, useInsertionEffect } from 'react';
 import { useSurfaceMaterial } from '../surface/use-surface-material.web';
-import { useWindowDimensions, type ViewStyle } from 'react-native';
+import { StyleSheet, useWindowDimensions, type ViewStyle } from 'react-native';
 
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { surfaceStyle as resolveShapeStyle } from '../shapes/surface-style';
 import { StyledView } from '../styles/styled-primitives';
 
-import { useOptionalPanelChrome } from '../styles/panel-chrome';
+import { useOptionalPanelChrome, usePanelShape } from '../styles/panel-chrome';
 import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import {
@@ -130,23 +131,23 @@ const RESPONSIVE_WEB: Record<
   { surface: string; content: string; overlayHidden: string }
 > = {
   500: {
-    surface: 'min-[500px]:rounded-radius-28',
-    content: 'min-[500px]:rounded-radius-28 web:min-[500px]:overflow-x-clip',
+    surface: 'min-[500px]:rounded-[var(--bloom-panel-radius)]',
+    content: 'min-[500px]:rounded-[var(--bloom-panel-radius)] web:min-[500px]:overflow-x-clip',
     overlayHidden: 'max-[500px]:hidden',
   },
   640: {
-    surface: 'sm:rounded-radius-28',
-    content: 'sm:rounded-radius-28 web:sm:overflow-x-clip',
+    surface: 'sm:rounded-[var(--bloom-panel-radius)]',
+    content: 'sm:rounded-[var(--bloom-panel-radius)] web:sm:overflow-x-clip',
     overlayHidden: 'max-sm:hidden',
   },
   768: {
-    surface: 'md:rounded-radius-28',
-    content: 'md:rounded-radius-28 web:md:overflow-x-clip',
+    surface: 'md:rounded-[var(--bloom-panel-radius)]',
+    content: 'md:rounded-[var(--bloom-panel-radius)] web:md:overflow-x-clip',
     overlayHidden: 'max-md:hidden',
   },
   1024: {
-    surface: 'lg:rounded-radius-28',
-    content: 'lg:rounded-radius-28 web:lg:overflow-x-clip',
+    surface: 'lg:rounded-[var(--bloom-panel-radius)]',
+    content: 'lg:rounded-[var(--bloom-panel-radius)] web:lg:overflow-x-clip',
     overlayHidden: 'max-lg:hidden',
   },
 };
@@ -197,13 +198,18 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // The floating-panel edge the `Sidebar` wears. Optional: the panel drew its
   // own surface long before it had a shadow, so it must not start throwing
   // outside a provider.
+  const panelShape = usePanelShape();
+  const radius = StyleSheet.flatten(surfaceStyle)?.borderRadius ?? panelShape.radius;
+  const curveStyle = resolveShapeStyle({ curve: panelShape.curve });
+  const panelStyle = { ...curveStyle, borderRadius: radius };
+  const panelVars: WebCssStyle = { '--bloom-panel-radius': typeof radius === 'string' ? radius : `${typeof radius === 'number' ? radius : panelShape.radius}px` };
   const panelChrome = useOptionalPanelChrome();
   // What the panel tells its subtree it is painted in (`./shared.ts`).
   const rawFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
   const defaultFill = rawFill;
   const { width } = useWindowDimensions();
   const parentFill = useOptionalSurfaceFill();
-  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom);
+  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom) && chrome !== 'none';
   const publishedFill = rawFill && paintsSurface ? resolveSurfaceMaterial({ fill: rawFill, parentFill: parentFill! }).publishedFill : rawFill;
   const materialStyle = useSurfaceMaterial('[data-bloom-panel-material]', 'bloom-content-panel-material', defaultFill ?? 'transparent');
 
@@ -223,12 +229,12 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   const surfaceBase = responsive
     ? `flex-1 ${bp.surface}`
     : framed
-      ? 'flex-1 rounded-radius-28'
+      ? 'flex-1 rounded-[var(--bloom-panel-radius)]'
       : 'flex-1';
   const contentBase = responsive
     ? `flex-1 ${bp.content}`
     : framed
-      ? 'flex-1 rounded-radius-28 web:overflow-x-clip'
+      ? 'flex-1 rounded-[var(--bloom-panel-radius)] web:overflow-x-clip'
       : 'flex-1';
   // `fill`: the panel takes the height its parent gives it and the CONTENT
   // scrolls inside. `min-h-0` on both boxes is the whole trick — a flex child's
@@ -300,6 +306,9 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
           // disagree about what the panel painted.
           surfaceFillVars(publishedFill),
           insetVars,
+          panelVars,
+          curveStyle,
+          framed === true ? { borderRadius: radius } : framed === false ? { borderRadius: 0 } : null,
           surfaceStyle,
           paintsSurface ? materialStyle : null,
         ]}
@@ -315,12 +324,12 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             pointerEvents="none"
             className={
               boundToPanel
-                ? `web:[grid-area:1/1] z-30 h-full w-full rounded-radius-28 ${responsive ? bp.overlayHidden : ''} web:[clip-path:inset(0)]`
+                ? `web:[grid-area:1/1] z-30 h-full w-full rounded-[var(--bloom-panel-radius)] ${responsive ? bp.overlayHidden : ''} web:[clip-path:inset(0)]`
                 : responsive
-                  ? `web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
-                  : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)]'
+                  ? `web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-[var(--bloom-panel-radius)] ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
+                  : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-[var(--bloom-panel-radius)] web:[margin-bottom:calc(-100dvh+16px)]'
             }
-            style={{ ...insetStyle, boxShadow: `0 0 0 ${maskSpread}px ${maskColor ?? colors.background}` }}
+            style={{ ...panelStyle, ...insetStyle, boxShadow: `0 0 0 ${maskSpread}px ${maskColor ?? colors.background}` }}
           />
         )}
         {/* (2) Border-frame overlay — one continuous rounded border, above all.
@@ -333,15 +342,15 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             // The shadow rides the SAME element as the hairline, so the lift and
             // the edge can never disagree about where the panel ends. It paints
             // outward, into the gutter the page background shows.
-            style={[insetStyle, chrome === 'elevated' && (shadow || panelChrome)
+            style={[panelStyle, insetStyle, chrome === 'elevated' && (shadow || panelChrome)
                 ? { boxShadow: shadow ?? panelChrome?.shadow }
                 : null]}
             className={
               boundToPanel
-                ? `web:[grid-area:1/1] z-[120] h-full w-full rounded-radius-28 border border-border ${responsive ? bp.overlayHidden : ''}`
+                ? `web:[grid-area:1/1] z-[120] h-full w-full rounded-[var(--bloom-panel-radius)] border border-border ${responsive ? bp.overlayHidden : ''}`
                 : responsive
-                  ? `web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
-                  : 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border web:[margin-bottom:calc(-100dvh+16px)]'
+                  ? `web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-[var(--bloom-panel-radius)] border border-border ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
+                  : 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-[var(--bloom-panel-radius)] border border-border web:[margin-bottom:calc(-100dvh+16px)]'
             }
           />
         )}
@@ -349,7 +358,7 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             in place instead of remounting `{children}` (which would reset feed
             scroll/virtualizer + refetch on a breakpoint cross). Clipped to the
             rounded panel shape on web when framed. */}
-        <StyledView key="content" testID="content-panel-content" className={contentClass} style={contentStyle}>
+        <StyledView key="content" testID="content-panel-content" className={contentClass} style={[curveStyle, framed === true ? { borderRadius: radius } : framed === false ? { borderRadius: 0 } : null, contentStyle]}>
           {/* The panel is a surface: everything inside is sitting on rung 1,
               painted in the colour this panel actually paints. */}
           <SurfaceLevelProvider level={1} fill={publishedFill}>

package/src/content-panel/types.ts

@@ -18,7 +18,7 @@ export type ContentPanelChrome = 'elevated' | 'border' | 'none';
 export interface ContentPanelProps {
   children: React.ReactNode;
   /**
-   * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
+   * Framing mode. Tri-state, managed by Bloom — no consumer
    * breakpoint hook needed:
    * - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
    *   breakpoint, rounded + bordered at/above it.
@@ -41,7 +41,7 @@ export interface ContentPanelProps {
    *   surface lifted off the page rather than a box drawn on it.
    * - `'border'` — the hairline alone, which is what this panel drew before.
    * - `'none'` — no edge at all: a flat surface that still clips and rounds,
-   *   for an app whose page background already separates the two.
+   *   without material rim or sheen, for an app whose page background separates the two.
    *
    * Ignored while the panel is full-bleed (below `framedFrom`, or
    * `framed={false}`) — there is no edge to draw.

package/src/design-tokens/shapes.ts

@@ -4,7 +4,7 @@ import { RADIUS } from './scales';
 /** Component policies. Geometry and renderers never import these tokens. */
 export const SURFACE_SHAPES = {
   card: { radius: RADIUS['radius-12'], curve: 'smooth' },
-  sidebar: { radius: RADIUS['radius-24'], curve: 'smooth' },
+  sidebar: { radius: RADIUS['radius-28'], curve: 'round' },
   panel: { radius: RADIUS['radius-20'], curve: 'smooth' },
   menu: { radius: RADIUS['radius-16'], curve: 'smooth' },
   sheet: { radius: { topStart: RADIUS['radius-24'], topEnd: RADIUS['radius-24'] }, curve: 'smooth' },

package/src/design-tokens/tokens.json

@@ -28596,12 +28596,12 @@
     "sidebar": {
       "$extensions": {
         "so.oxy.bloom": {
-          "curve": "smooth"
+          "curve": "round"
         }
       },
       "radius": {
         "$type": "dimension",
-        "$value": "24px"
+        "$value": "28px"
       }
     },
     "panel": {

package/src/index.ts

@@ -204,6 +204,7 @@ export * from './patient-info-card';
 export * from './sidebar';
 export * from './app-shell';
 export * from './page-header';
+export * from './page-footer';
 export * from './notification-center';
 export * from './theme-toggle';
 export * from './settings-modal';

package/src/index.web.ts

@@ -209,6 +209,7 @@ export * from './patient-info-card';
 export * from './sidebar';
 export * from './app-shell/index.web';
 export * from './page-header';
+export * from './page-footer';
 export * from './notification-center';
 export * from './theme-toggle';
 export * from './settings-modal';

package/src/locale/translations/ar.ts

@@ -34,7 +34,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "نمط العيون",
   eyewear: "نظارات",
   accessory: "إكسسوار",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "عين واحدة" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "محرر الوكيل",
   newBot: "روبوت جديد",
   closeEditor: "إغلاق محرر الوكيل",

package/src/locale/translations/bn.ts

@@ -24,7 +24,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "চোখের ধরন",
   eyewear: "চশমা",
   accessory: "অনুষঙ্গ",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "একটি চোখ" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "এজেন্ট সম্পাদক",
   newBot: "নতুন বট",
   closeEditor: "এজেন্ট সম্পাদক বন্ধ করুন",

package/src/locale/translations/ca.ts

@@ -31,7 +31,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Estil dels ulls",
   eyewear: "Ulleres",
   accessory: "Accessori",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Un sol ull" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Editor de l’agent",
   newBot: "Bot nou",
   closeEditor: "Tanca l’editor de l’agent",

package/src/locale/translations/de.ts

@@ -26,7 +26,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Augenstil",
   eyewear: "Brille",
   accessory: "Accessoire",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Einzelnes Auge" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Agenten-Editor",
   newBot: "Neuer Bot",
   closeEditor: "Agenten-Editor schließen",

package/src/locale/translations/es.ts

@@ -31,7 +31,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Estilo de ojos",
   eyewear: "Gafas",
   accessory: "Accesorio",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Un solo ojo" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Editor del agente",
   newBot: "Nuevo bot",
   closeEditor: "Cerrar editor del agente",

package/src/locale/translations/fr.ts

@@ -31,7 +31,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Style des yeux",
   eyewear: "Lunettes",
   accessory: "Accessoire",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Œil unique" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Éditeur de l’agent",
   newBot: "Nouveau bot",
   closeEditor: "Fermer l’éditeur de l’agent",

package/src/locale/translations/hi.ts

@@ -24,7 +24,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "आँखों की शैली",
   eyewear: "चश्मा",
   accessory: "सहायक वस्तु",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "एक आँख" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "एजेंट संपादक",
   newBot: "नया बॉट",
   closeEditor: "एजेंट संपादक बंद करें",

package/src/locale/translations/id.ts

@@ -24,7 +24,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Gaya mata",
   eyewear: "Kacamata",
   accessory: "Aksesori",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Satu mata" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Editor agen",
   newBot: "Bot baru",
   closeEditor: "Tutup editor agen",

package/src/locale/translations/it.ts

@@ -31,7 +31,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Stile degli occhi",
   eyewear: "Occhiali",
   accessory: "Accessorio",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Occhio singolo" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Editor dell’agente",
   newBot: "Nuovo bot",
   closeEditor: "Chiudi l’editor dell’agente",

package/src/locale/translations/ja.ts

@@ -24,7 +24,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "目のスタイル",
   eyewear: "眼鏡",
   accessory: "アクセサリー",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "一つ目" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "エージェント編集",
   newBot: "新しいボット",
   closeEditor: "エージェント編集を閉じる",

package/src/locale/translations/pt.ts

@@ -31,7 +31,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Estilo dos olhos",
   eyewear: "Óculos",
   accessory: "Acessório",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Olho único" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Editor do agente",
   newBot: "Novo bot",
   closeEditor: "Fechar editor do agente",

package/src/locale/translations/ru.ts

@@ -27,7 +27,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Стиль глаз",
   eyewear: "Очки",
   accessory: "Аксессуар",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Один глаз" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Редактор агента",
   newBot: "Новый бот",
   closeEditor: "Закрыть редактор агента",

package/src/locale/translations/tr.ts

@@ -24,7 +24,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "Göz stili",
   eyewear: "Gözlük",
   accessory: "Aksesuar",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "Tek göz" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "Ajan düzenleyici",
   newBot: "Yeni bot",
   closeEditor: "Ajan düzenleyiciyi kapat",

package/src/locale/translations/zh.ts

@@ -24,7 +24,7 @@ const AGENT_CREATOR_MESSAGES: Translations['AGENT_CREATOR_MESSAGES'] = {
   betaEyes: "眼睛风格",
   eyewear: "眼镜",
   accessory: "配饰",
-  characterOption: (category, id, title) => category === "eyes" && id === "cyclops" ? "单眼" : String(title),
+  characterOption: (_category, _id, title) => String(title),
   editor: "智能体编辑器",
   newBot: "新机器人",
   closeEditor: "关闭智能体编辑器",

package/src/mail-thread/MailMessage.tsx

@@ -131,22 +131,20 @@ export function MailMessage({
       : { key: 'forward', label: text.forward, icon: RiShareForwardLine, onPress: onForward },
   ].filter((entry): entry is NonNullable<typeof entry> => entry !== null);
 
-  // An OPEN message is a surface, and Bloom's surface is a `Card` — the card
-  // fill, the hairline, the radius scale — not a grey wash painted by hand. A
-  // COLLAPSED one paints nothing, so a thread reads as one list with a card
-  // opened inside it rather than as a column of blocks.
+  // Opening changes the content, not its surface or host. Keeping the Card
+  // mounted also preserves keyboard focus on the disclosure while it expands.
   // Three labelled actions need about 320 of the message's own width; under
   // that the group keeps the glyphs and drops the words, which is what
   // `ButtonGroupItem` is built for — the accessible name is the label either
   // way, so nothing is lost by the labels going.
   const compactReplies = !replyLabelsFit(width);
-  const Shell = open ? Card : View;
-  const shellProps = open
-    ? { variant: 'outlined' as const, radius: 'radius-16' as const, testID }
-    : { testID };
   return (
-    <Shell
-      {...shellProps}
+    <Card
+      appearance="solid"
+      border="none"
+      elevation="s"
+      radius="radius-16"
+      testID={testID}
       style={[open ? { paddingBottom: geo.paddingVertical } : null, style]}
     >
       <View
@@ -316,6 +314,6 @@ export function MailMessage({
           ) : null}
         </View>
       ) : null}
-    </Shell>
+    </Card>
   );
 }

package/src/mail-thread/MailThread.tsx

@@ -8,6 +8,7 @@ import { MailLabelChips, MailStar } from '../mail-list/parts';
 import { mailStrings, resolveMailPaint, visibleLabels } from '../mail-list/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { useSurfaceFill } from '../styles/surface-levels';
+import { space } from '../styles/tokens';
 
 
 import { useTheme } from '../theme/use-theme';
@@ -55,6 +56,7 @@ export function MailThread({
   expandedIds,
   onExpandedIdsChange,
   collapseAfter = 4,
+  messageGap = space.md,
   quickReply,
   header,
   strings,
@@ -144,7 +146,7 @@ export function MailThread({
         </View>
       ) : null}
       <Divider />
-      <View style={{ paddingTop: 4, paddingBottom: 4 }}>
+      <View testID={testID ? `${testID}-messages` : undefined} style={{ paddingTop: space.xs, paddingBottom: space.xs, gap: messageGap }}>
         {entries.map((entry) =>
           entry.kind === 'message' ? (
             <MailMessage

package/src/mail-thread/shared.ts

@@ -1,4 +1,5 @@
 import { Platform } from 'react-native';
+import { RADIUS } from '../design-tokens/scales';
 
 import { MAIL_THREAD_MESSAGES } from './messages';
 import type { MailThreadMessage, MailAddress, MailThreadStrings } from './types';
@@ -44,7 +45,7 @@ export const MAIL_THREAD_GEOMETRY = {
   /** The star and the overflow trigger. A touch target, so 44. */
   action: 44,
   /** Radius of a message's own surface. */
-  radius: 12,
+  radius: RADIUS['radius-16'],
 } as const;
 
 /**

package/src/mail-thread/types.ts

@@ -128,6 +128,8 @@ export interface MailThreadProps {
    * Default 4; `0` never collapses.
    */
   collapseAfter?: number;
+  /** Space between message cards and the earlier-messages control. Default space.md (12). */
+  messageGap?: number;
   /** A slot under the stack — the quick-reply box, or a row of reply buttons. */
   quickReply?: ReactNode;
   /** A slot above the subject — a back button, the mailbox chrome. */