@oxy.so/bloom 4.34.3 → 4.34.5

package/src/ai-chat/AiChatContainer.tsx

@@ -21,6 +21,7 @@ import {
 } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill, useSurfaceLevelValue } from '../styles/surface-levels';
 import { AgentThinking } from '../agent-thinking';
 import { Breadcrumb, BreadcrumbItem } from '../breadcrumb';
 import { RiFolderLine } from '../icons/remix/RiFolderLine';
@@ -138,6 +139,13 @@ export function AiChatContainerBase({
   const l = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
   const documentScroll = useAiChatShell()?.documentScroll ?? false;
   const gutterColor = useContext(AiChatDocumentGutterContext);
+  const parentFill = useSurfaceFill();
+  const parentLevel = useSurfaceLevelValue();
+  const styleFill = StyleSheet.flatten(style)?.backgroundColor;
+  const ownFill = typeof styleFill === 'string' && styleFill !== 'transparent'
+    ? styleFill
+    : surface && styleFill !== 'transparent' ? palette.secondary : parentFill;
+  const surfaceLevel = surface ? 1 : parentLevel;
 
   const hasCrumbRow = title != null || project != null || onShare || onMore || actions != null;
   const crumbRow = hasCrumbRow ? (
@@ -194,6 +202,7 @@ export function AiChatContainerBase({
       overflow: 'hidden',
       borderRadius: CONTAINER_RADIUS,
       backgroundColor: surface ? palette.secondary : 'transparent',
+      ...surfaceFillVars(ownFill),
     },
     style,
   ];
@@ -224,6 +233,7 @@ export function AiChatContainerBase({
 
   if (floatingChrome) {
     return (
+      <SurfaceLevelProvider level={surfaceLevel} fill={ownFill}>
       <FloatingChrome
         testID={testID}
         rootStyle={rootStyle}
@@ -234,10 +244,12 @@ export function AiChatContainerBase({
         fadeColor={surface ? palette.secondary : null}>
         {children}
       </FloatingChrome>
+      </SurfaceLevelProvider>
     );
   }
 
   return (
+    <SurfaceLevelProvider level={surfaceLevel} fill={ownFill}>
     <View testID={testID} style={rootStyle}>
       {backgroundLayer}
       {header}
@@ -249,6 +261,7 @@ export function AiChatContainerBase({
         {footerBody}
       </View>
     </View>
+    </SurfaceLevelProvider>
   );
 }
 

package/src/ai-chat/AiChatShell.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
   PanResponder,
   Platform,
@@ -18,6 +18,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { BottomBarSlotContext } from '../layout/bottom-bar-slot';
 import { Button } from '../button';
 import { usePanelInteraction } from './use-panel-interaction';
 import { useControllableState } from '../hooks/use-controllable-state';
@@ -39,6 +41,8 @@ import {
 } from './shared';
 import type { AiChatMobileHeaderProps, AiChatResizeHandleProps, AiChatShellProps } from './types';
 
+const NO_SAFE_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+
 const REVEAL_EASE = Easing.bezier(0.42, 0, 0.58, 1);
 const REVEAL_MS = 325;
 const REVEAL_OFFSET = 272;
@@ -335,6 +339,7 @@ export function AiChatShell({
   onPanelOpenChange,
   background,
   surface = true,
+  safeArea = false,
   scroll = 'container',
   labels,
   style,
@@ -342,6 +347,10 @@ export function AiChatShell({
 }: AiChatShellProps) {
   useAiChatWebCss();
   const palette = useAiChatPalette();
+  const deviceInsets = useContext(SafeAreaInsetsContext);
+  const inheritedBottomInset = useContext(BottomBarSlotContext);
+  const ownsSafeArea = safeArea && Platform.OS !== 'web';
+  const safeInsets = ownsSafeArea ? deviceInsets ?? NO_SAFE_INSETS : NO_SAFE_INSETS;
   const reducedMotion = useReducedMotion();
   const l = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
   const { width: windowWidth } = useWindowDimensions();
@@ -534,7 +543,7 @@ export function AiChatShell({
     drawer.value = reducedMotion ? target : withTiming(target, { duration: DRAWER_MS, easing: DRAWER_EASE });
   }, [panelOpen, reducedMotion, drawer]);
   const [shellWidth, setShellWidth] = useState(windowWidth);
-  const drawerWidth = Math.min(410, shellWidth - 12);
+  const drawerWidth = Math.min(410, shellWidth - safeInsets.left - safeInsets.right - 12);
   const backdropStyle = useAnimatedStyle(() => ({ opacity: drawer.value }), [drawer]);
   const drawerStyle = useAnimatedStyle(
     () => ({ transform: [{ translateX: drawerWidth * 1.1 * (1 - drawer.value) }] }),
@@ -591,12 +600,19 @@ export function AiChatShell({
     flexDirection: 'row',
     gap: 16,
     padding: SHELL_GUTTER,
+    ...(ownsSafeArea ? {
+      paddingTop: SHELL_GUTTER + safeInsets.top,
+      paddingRight: SHELL_GUTTER + safeInsets.right,
+      paddingBottom: SHELL_GUTTER + safeInsets.bottom,
+      paddingLeft: SHELL_GUTTER + safeInsets.left,
+    } : null),
     backgroundColor: surface ? palette.full : 'transparent',
   };
 
   const veil = palette.isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.1)';
 
   return (
+    <BottomBarSlotContext.Provider value={ownsSafeArea ? safeInsets.bottom : inheritedBottomInset}>
     <AiChatShellContext.Provider value={shellState}>
       <AiChatDocumentGutterContext.Provider value={documentScroll && surface ? palette.full : null}>
       <View
@@ -615,7 +631,7 @@ export function AiChatShell({
             ref={navRef}
             {...(navOpen ? null : CLOSED_LAYER)}
             pointerEvents={navOpen ? 'box-none' : 'none'}
-            style={{ position: overlayPosition, top: 0, bottom: 0, left: 0, zIndex: 10, width: 272, paddingTop: 12, paddingBottom: 12, paddingLeft: 6 }}>
+            style={{ position: overlayPosition, top: 0, bottom: 0, left: safeInsets.left, zIndex: 10, width: 272, paddingTop: 12 + safeInsets.top, paddingBottom: 12 + safeInsets.bottom, paddingLeft: 6 }}>
             <Animated.View
               pointerEvents={navOpen ? 'auto' : 'none'}
               style={[{ height: '100%', width: 260, transformOrigin: 'left' }, railStyle]}>
@@ -727,11 +743,13 @@ export function AiChatShell({
                   position: 'absolute',
                   top: 0,
                   bottom: 0,
-                  right: 0,
+                  right: safeInsets.right,
                   width: drawerWidth,
                   flexDirection: 'column',
                   backgroundColor: palette.full,
                   padding: 12,
+                  paddingTop: 12 + safeInsets.top,
+                  paddingBottom: 12 + safeInsets.bottom,
                   boxShadow: palette.shadowSidebar,
                 },
                 drawerStyle,
@@ -758,6 +776,7 @@ export function AiChatShell({
       </View>
       </AiChatDocumentGutterContext.Provider>
     </AiChatShellContext.Provider>
+    </BottomBarSlotContext.Provider>
   );
 }
 

package/src/ai-chat/types.ts

@@ -525,6 +525,13 @@ export interface AiChatShellProps {
    * Default `true`; `false` leaves both transparent.
    */
   surface?: boolean;
+  /**
+   * Own all four native device safe-area edges in the shell frame and drawers.
+   * Default false; web is unchanged. Use PageHeader safeArea={false} inside
+   * this shell. BottomBar automatically excludes the bottom inset supplied
+   * here; modal descendants retain the original device inset context.
+   */
+  safeArea?: boolean;
   /**
    * What scrolls the page — `AppShell`'s contract.
    *

package/src/app-shell/AppShellSplit.tsx

@@ -19,6 +19,7 @@ import { ScrollView, View } from 'react-native';
 
 import { AiChatResizeHandle } from '../ai-chat/AiChatShell';
 import { Z_INDEX } from '../styles/z-index';
+import { space } from '../styles/tokens';
 import { useTheme } from '../theme/use-theme';
 
 import type { AppShellSplitPanesProps } from './types';
@@ -50,6 +51,7 @@ function Pane({
 }
 
 const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
+  variant = 'joined',
   list,
   detail,
   info,
@@ -98,11 +100,13 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
    * hit test at the divider's centre returned the pane, and the drag never
    * started. Raising the DIVIDER lifts the whole context over both panes.
    */
+  const separated = variant === 'separated';
   const divider = {
-    width: 1,
+    width: separated ? space.md : 1,
+    flexShrink: 0,
     alignSelf: 'stretch' as const,
     zIndex: Z_INDEX.floating,
-    backgroundColor: theme.colors.border,
+    backgroundColor: separated ? 'transparent' : theme.colors.border,
   };
   // Only the panes that are actually drawn count: alone, a pane fills the row.
   const solo = [showList, showDetail, showInfo].filter(Boolean).length === 1;
@@ -119,15 +123,21 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
         </Pane>
       ) : null}
       {showList && !solo ? (
-        <View style={divider}>
+        <View style={divider} testID={testID ? `${testID}-list-gap` : undefined}>
           {resizable ? (
-            <AiChatResizeHandle
-              label={resizeLabel}
-              onResizeStart={onResizeStart}
-              onResize={onResize}
-              onNudge={onNudge}
-              testID={testID ? `${testID}-divider` : undefined}
-            />
+            <View
+              pointerEvents="box-none"
+              testID={testID ? `${testID}-resize-anchor` : undefined}
+              style={separated ? { position: 'absolute', top: 0, bottom: 0, left: '50%', width: 0 } : { flex: 1 }}
+            >
+              <AiChatResizeHandle
+                label={resizeLabel}
+                onResizeStart={onResizeStart}
+                onResize={onResize}
+                onNudge={onNudge}
+                testID={testID ? `${testID}-divider` : undefined}
+              />
+            </View>
           ) : null}
         </View>
       ) : null}
@@ -140,7 +150,7 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
           {detail}
         </Pane>
       ) : null}
-      {showInfo && !solo ? <View style={divider} /> : null}
+      {showInfo && showDetail && !solo ? <View style={divider} testID={testID ? `${testID}-info-gap` : undefined} /> : null}
       {showInfo ? (
         <Pane
           testID={testID ? `${testID}-pane-info` : undefined}

package/src/app-shell/types.ts

@@ -380,6 +380,8 @@ export type AppShellProps = Omit<AppShellEngineProps, 'scroll'> & AppShellNaviga
 
 /** A bounded list/detail/info layout, independent of navigation or surfaces. */
 export interface AppShellSplitPanesProps {
+  /** Joined uses hairline dividers (default); separated leaves a 12px gutter for independent panel surfaces. */
+  variant?: 'joined' | 'separated';
   list?: ReactNode;
   detail?: ReactNode;
   info?: ReactNode;

package/src/icons/remix/RiFormatClear.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `format-clear` (Editor). */
+export const RiFormatClear = createSinglePathSVG({
+  path: "M12.6512 14.0654L11.6047 20H9.57389L10.9247 12.339L3.51465 4.92892L4.92886 3.51471L20.4852 19.0711L19.071 20.4853L12.6512 14.0654ZM11.7727 7.53009L12.0425 5.99999H10.2426L8.24257 3.99999H19.9999V5.99999H14.0733L13.4991 9.25652L11.7727 7.53009Z",
+});

package/src/icons/remix/RiListOrdered.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `list-ordered` (Editor). */
+export const RiListOrdered = createSinglePathSVG({
+  path: "M8 4H21V6H8V4ZM5 3V6H6V7H3V6H4V4H3V3H5ZM3 14V11.5H5V11H3V10H6V12.5H4V13H6V14H3ZM5 19.5H3V18.5H5V18H3V17H6V21H3V20H5V19.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z",
+});

package/src/icons/remix/RiStrikethrough.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `strikethrough` (Editor). */
+export const RiStrikethrough = createSinglePathSVG({
+  path: "M17.1538 14C17.3846 14.5161 17.5 15.0893 17.5 15.7196C17.5 17.0625 16.9762 18.1116 15.9286 18.867C14.8809 19.6223 13.4335 20 11.5862 20C9.94674 20 8.32335 19.6185 6.71592 18.8555V16.6009C8.23538 17.4783 9.7908 17.917 11.3822 17.917C13.9333 17.917 15.2128 17.1846 15.2208 15.7196C15.2208 15.0939 15.0049 14.5598 14.5731 14.1173C14.5339 14.0772 14.4939 14.0381 14.4531 14H3V12H21V14H17.1538ZM13.076 11H7.62908C7.4566 10.8433 7.29616 10.6692 7.14776 10.4778C6.71592 9.92084 6.5 9.24559 6.5 8.45207C6.5 7.21602 6.96583 6.165 7.89749 5.299C8.82916 4.43299 10.2706 4 12.2219 4C13.6934 4 15.1009 4.32808 16.4444 4.98426V7.13591C15.2448 6.44921 13.9293 6.10587 12.4978 6.10587C10.0187 6.10587 8.77917 6.88793 8.77917 8.45207C8.77917 8.87172 8.99709 9.23796 9.43293 9.55079C9.86878 9.86362 10.4066 10.1135 11.0463 10.3004C11.6665 10.4816 12.3431 10.7148 13.076 11H13.076Z",
+});

package/src/icons/remix/RiUnderline.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `underline` (Editor). */
+export const RiUnderline = createSinglePathSVG({
+  path: "M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z",
+});

package/src/icons/remix/index.ts

@@ -197,6 +197,7 @@ export { RiFolderOpenLine } from './RiFolderOpenLine';
 export { RiFontSize } from './RiFontSize';
 export { RiFontSize2 } from './RiFontSize2';
 export { RiForbidLine } from './RiForbidLine';
+export { RiFormatClear } from './RiFormatClear';
 export { RiForward10Line } from './RiForward10Line';
 export { RiForward15Line } from './RiForward15Line';
 export { RiForward30Line } from './RiForward30Line';
@@ -259,6 +260,7 @@ export { RiLink } from './RiLink';
 export { RiLinkM } from './RiLinkM';
 export { RiLinkedinBoxFill } from './RiLinkedinBoxFill';
 export { RiListCheck3 } from './RiListCheck3';
+export { RiListOrdered } from './RiListOrdered';
 export { RiListUnordered } from './RiListUnordered';
 export { RiListView } from './RiListView';
 export { RiLiveLine } from './RiLiveLine';
@@ -417,6 +419,7 @@ export { RiStethoscopeLine } from './RiStethoscopeLine';
 export { RiStockLine } from './RiStockLine';
 export { RiStopFill } from './RiStopFill';
 export { RiStore2Line } from './RiStore2Line';
+export { RiStrikethrough } from './RiStrikethrough';
 export { RiSubtractLine } from './RiSubtractLine';
 export { RiSubwayLine } from './RiSubwayLine';
 export { RiSuitcaseLine } from './RiSuitcaseLine';
@@ -446,6 +449,7 @@ export { RiTreeLine } from './RiTreeLine';
 export { RiTv2Line } from './RiTv2Line';
 export { RiTvLine } from './RiTvLine';
 export { RiTwitterXFill } from './RiTwitterXFill';
+export { RiUnderline } from './RiUnderline';
 export { RiUnpinLine } from './RiUnpinLine';
 export { RiUpload2Line } from './RiUpload2Line';
 export { RiUploadCloud2Line } from './RiUploadCloud2Line';