@oxy.so/bloom 7.1.5 → 7.3.0

package/src/agent-creator/__tests__/support/character-runtime-fixture.tsx

@@ -0,0 +1,26 @@
+import type { ContextType, ReactNode } from 'react';
+import {
+  CharacterCapabilitiesContext,
+  CharacterRuntimeContext,
+} from '../../../agent-avatar/context';
+
+/** Supply both internal channels without starting the browser engine in UI tests. */
+export function CharacterRuntimeFixture({
+  value,
+  children,
+}: {
+  value: ContextType<typeof CharacterRuntimeContext> &
+    ContextType<typeof CharacterCapabilitiesContext>;
+  children: ReactNode;
+}) {
+  const { runtimeUrl, reportCapabilities, ...catalog } = value;
+  return (
+    <CharacterRuntimeContext.Provider
+      value={{ runtimeUrl, reportCapabilities }}
+    >
+      <CharacterCapabilitiesContext.Provider value={catalog}>
+        {children}
+      </CharacterCapabilitiesContext.Provider>
+    </CharacterRuntimeContext.Provider>
+  );
+}

package/src/app-shell/AppShell.tsx

@@ -84,7 +84,7 @@ export function createAppShell(BottomBar: ComponentType<BottomBarProps>, Fab: Co
       ) : null}
       <Screen navigationScope="shared" active={active} documentScroll={scroll === 'external'} testID={testID ? `${testID}-screen` : undefined} style={{ minWidth: 0 }} header={header ?? (title ? <PageHeader title={title} subtitle={breadcrumb} actions={actions} sticky={false} /> : null)} bottomBar={bottom} primaryAction={placement !== 'bottom' && primaryAction ? <Fab {...primaryAction} /> : undefined}>
         {scroll === 'auto' ? <ScreenScrollView style={{ flex: 1 }}>
-          <View style={{ width: '100%', maxWidth: contentMaxWidth, alignSelf: 'center', padding: 16, gap: 16 }}>{children}</View>
+          <View testID={testID ? `${testID}-content` : undefined} style={{ width: '100%', maxWidth: contentMaxWidth === 'none' ? undefined : contentMaxWidth, alignSelf: 'center', padding: 16, gap: 16 }}>{children}</View>
         </ScreenScrollView> : children}
         {overlay}
       </Screen>
@@ -151,7 +151,7 @@ export function createAppShell(BottomBar: ComponentType<BottomBarProps>, Fab: Co
       || props.primaryAction !== undefined || props.scroll === 'auto' || props.scroll === 'external';
     if (!adaptive) return <AppShellEngine {...props as AppShellEngineProps} />;
     const scroll = props.scroll ?? (Platform.OS === 'web' ? 'document' : 'auto');
-    const usesLayout = props.panel !== undefined || props.panelColorPreset !== undefined || props.variant !== undefined || props.aside !== undefined || props.list !== undefined || props.info !== undefined
+    const usesLayout = props.safeArea !== undefined || props.panel !== undefined || props.panelColorPreset !== undefined || props.variant !== undefined || props.aside !== undefined || props.list !== undefined || props.info !== undefined
       || props.contentWidth !== undefined || props.navigationAlign !== undefined || props.navigationGap !== undefined || props.drawer !== undefined
       || props.navFrom !== undefined || props.navExpandedFrom !== undefined || props.topBar !== undefined
       || props.bottomBar !== undefined || props.floatingAction !== undefined;

package/src/app-shell/AppShellBars.tsx

@@ -36,13 +36,13 @@ import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { Z_INDEX } from '../styles/z-index';
 
 /** The safe-area insets, or zeros outside a `SafeAreaProvider`. */
-export function useShellInsets(): { top: number; bottom: number } {
+export function useShellInsets(): { top: number; right: number; bottom: number; left: number } {
   // `useContext(SafeAreaInsetsContext)` rather than `useSafeAreaInsets()`: the
   // hook THROWS outside a provider, and `AppShell` is mounted at an app's root,
   // where making a previously-optional provider mandatory would be a breaking
   // change for every consumer that never had a bar to inset.
   const insets = useContext(SafeAreaInsetsContext);
-  return { top: insets?.top ?? 0, bottom: insets?.bottom ?? 0 };
+  return insets ?? { top: 0, right: 0, bottom: 0, left: 0 };
 }
 
 /** Pinned to the bottom of the viewport (document scroll) or of the frame. */
@@ -152,6 +152,8 @@ export const AppShellFloatingAction = memo(AppShellFloatingActionComponent);
 AppShellFloatingAction.displayName = 'AppShellFloatingAction';
 
 export interface AppShellTopBarProps {
+  /** The enclosing safe frame may already own the top inset. */
+  insetTop?: number;
   children: React.ReactNode;
   onHeightChange?: (height: number) => void;
   doc: boolean;
@@ -167,11 +169,11 @@ export interface AppShellTopBarProps {
  * only as far as `top: 0`); in `container`/`fixed` and on native it is simply
  * outside the scroller, which pins it by construction.
  */
-const AppShellTopBarComponent: React.FC<AppShellTopBarProps> = ({ children, doc, testID, onHeightChange }) => {
+const AppShellTopBarComponent: React.FC<AppShellTopBarProps> = ({ children, doc, testID, onHeightChange, insetTop }) => {
   const insets = useShellInsets();
   const pinned: WebCssStyle = doc ? { position: WEB_POSITION_STICKY, top: 0 } : {};
   return (
-    <View testID={testID} onLayout={event => onHeightChange?.(event.nativeEvent.layout.height)} style={[{ zIndex: Z_INDEX.floating, paddingTop: insets.top }, pinned]}>
+    <View testID={testID} onLayout={event => onHeightChange?.(event.nativeEvent.layout.height)} style={[{ zIndex: Z_INDEX.floating, paddingTop: insetTop ?? insets.top }, pinned]}>
       {children}
     </View>
   );

package/src/app-shell/AppShellEngine.tsx

@@ -106,6 +106,7 @@ export function createAppShellEngine(
 ) {
 const AppShellComponent: React.FC<AppShellEngineProps> = ({
   variant = 'dashboard',
+  safeArea = false,
   navigationAlign = 'edge',
   navigationGap,
   asideGap,
@@ -166,6 +167,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   const [asideHeight, setAsideHeight] = useState(0);
   const { width, onLayout } = useShellWidth();
   const insets = useShellInsets();
+  const ownsSafeArea = safeArea && Platform.OS !== 'web';
   const mode = resolveScrollMode(variant, scroll);
   const doc = mode === 'document';
   const fixed = mode === 'fixed';
@@ -175,6 +177,10 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   // for every other shape.
   const gutter = gutterProp ?? (variant === 'dashboard' ? D.dashboardGutter : D.gutter);
   const columnGap = variant === 'dashboard' ? D.dashboardColumnGap : gutter;
+  // Historical reveal geometry stays the default; an explicit gutter owns
+  // every frame edge, including the old extra top gap at wider breakpoints.
+  const revealGutter = gutterProp ?? 12;
+  const revealTopGutter = gutterProp ?? (small ? 24 : 12);
 
   // The nav: `navExpandedFrom` decides which sidebar variant is drawn, and the
   // variant decides how early it can sit in flow (a rail is narrow enough at
@@ -290,6 +296,24 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   const showTopBar = topBar != null && barActive(topBarVisibility);
   const showBottomBar = bottomBar != null && barActive(bottomBarVisibility);
   const showFloatingAction = floatingAction != null;
+  // Preserve the real device insets for fullscreen dialogs and portals. Only
+  // the bounded shell consumes these edges; bottom chrome keeps its own inset.
+  const bottomChrome = showBottomBar || showFloatingAction;
+  const frameBottomInset = ownsSafeArea && !bottomChrome ? insets.bottom : 0;
+  const navigationBottomInset = ownsSafeArea && bottomChrome ? insets.bottom : 0;
+  const safeFrame = (node: React.ReactElement) => ownsSafeArea ? (
+    <View {...dirProps} testID={testID ? `${testID}-safe-area` : undefined} style={{
+      flex: 1, minHeight: 0, minWidth: 0,
+      paddingTop: insets.top,
+      paddingInlineStart: rtl ? insets.right : insets.left,
+      paddingInlineEnd: rtl ? insets.left : insets.right,
+      paddingBottom: frameBottomInset, backgroundColor: background,
+    }}>{node}</View>
+  ) : node;
+
+  const safeNavigation = (node: React.ReactElement) => navigationBottomInset ? (
+    <View style={{ flexShrink: 0, paddingBottom: navigationBottomInset }}>{node}</View>
+  ) : node;
   const [topBarHeight, setTopBarHeight] = useState(0);
   const [bottomBarHeight, setBottomBarHeight] = useState(0);
   const [floatingActionHeight, setFloatingActionHeight] = useState(0);
@@ -328,7 +352,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   );
 
   const topBarNode = showTopBar ? (
-    <AppShellTopBar doc={doc} onHeightChange={setTopBarHeight} testID={testID ? `${testID}-top-bar` : undefined}>
+    <AppShellTopBar insetTop={ownsSafeArea ? 0 : undefined} doc={doc} onHeightChange={setTopBarHeight} testID={testID ? `${testID}-top-bar` : undefined}>
       {topBar}
     </AppShellTopBar>
   ) : null;
@@ -363,7 +387,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
 
   const fill = fixed ? { flex: 1, minHeight: 0 } : null;
   const column = (
-    <View style={[{ width: '100%', maxWidth: contentMaxWidth, alignSelf: 'center', gap: 10 }, fill]}>
+    <View testID={testID ? `${testID}-content` : undefined} style={[{ width: '100%', maxWidth: contentMaxWidth === 'none' ? undefined : contentMaxWidth, alignSelf: 'center', gap: 10 }, fill]}>
       {headerNode}
       <View
         style={[
@@ -432,7 +456,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   const veilStyle = useAnimatedStyle(() => ({ opacity: reveal.value }), [reveal]);
 
   if (drawerStyle === 'reveal' && variant === 'dashboard') {
-    return (
+    return safeFrame(
       <AppShellProvider value={shell}>
         <View
           {...dirProps}
@@ -445,20 +469,21 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
               style={[
                 flowSidebar.surface === 'docked'
                   ? { flexShrink: 0 }
-                  : { paddingTop: 12, paddingBottom: 12, paddingInlineStart: 12, flexShrink: 0 },
+                  : { paddingTop: revealGutter, paddingBottom: revealGutter, paddingInlineStart: revealGutter, flexShrink: 0 },
                 doc ? stickyRail(0) : null,
               ]}
             >
-              <Sidebar {...flowSidebar} />
+              {safeNavigation(<Sidebar {...flowSidebar} />)}
             </View>
           ) : null}
           {drawerAvailable && drawerSidebar ? (
             <View
+              testID={testID ? `${testID}-navigation-drawer` : undefined}
               aria-hidden={!isOpen}
               pointerEvents={isOpen ? 'auto' : 'none'}
               // Fixed on web in document mode: the rail waits beneath the VIEWPORT,
               // wherever the page is scrolled to.
-              style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: 12, paddingBottom: 12, paddingInlineStart: 6 }}
+              style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: revealGutter, paddingBottom: revealGutter + navigationBottomInset, paddingInlineStart: revealGutter / 2 }}
             >
               <Animated.View style={[{ height: '100%', width: 260, transformOrigin: railOrigin }, railStyle]}>
                 <Sidebar {...drawerSidebar} mobile surface="plain" onClose={() => setOpen(false)} />
@@ -487,13 +512,13 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
               // layered over the shorthand, and only when there is one.
               contentStyle={
                 contentReserve
-                  ? { paddingLeft: 12, paddingRight: 12, paddingTop: small ? 24 : 12, paddingBottom: 12 + contentReserve }
-                  : { padding: 12, paddingTop: small ? 24 : 12 }
+                  ? { paddingLeft: revealGutter, paddingRight: revealGutter, paddingTop: revealTopGutter, paddingBottom: revealGutter + contentReserve }
+                  : { padding: revealGutter, paddingTop: revealTopGutter }
               }
             >
               {column}
             </Scroller>
-            {asideColumn({ paddingTop: small ? 24 : 12, paddingBottom: 12, paddingInlineEnd: 12 })}
+            {asideColumn({ paddingTop: revealTopGutter, paddingBottom: revealGutter, paddingInlineEnd: revealGutter })}
             {!wide ? (
               <Animated.View
                 pointerEvents={isOpen ? 'auto' : 'none'}
@@ -758,15 +783,15 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     navInFlow && flowSidebar ? (
       doc ? (
         <View testID={testID ? `${testID}-navigation` : undefined} style={stickyRail(dockedNav || plainFrame ? 0 : gutter)}>
-          <Sidebar {...flowSidebar} />
+          {safeNavigation(<Sidebar {...flowSidebar} />)}
         </View>
       ) : canvas && !dockedNav ? (
         // The canvas row has no padding of its own, so the nav states its.
         <View style={{ paddingTop: gutter, paddingBottom: gutter, paddingInlineStart: gutter, flexShrink: 0 }}>
-          <Sidebar {...flowSidebar} />
+          {safeNavigation(<Sidebar {...flowSidebar} />)}
         </View>
       ) : (
-        <Sidebar {...flowSidebar} />
+        safeNavigation(<Sidebar {...flowSidebar} />)
       )
     ) : null;
 
@@ -783,7 +808,15 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
           <View
             {...dirProps}
             pointerEvents="box-none"
-            style={{ position: 'absolute', top: 0, bottom: 0, insetInlineStart: 0, flexDirection: 'row', padding: 12 }}
+            testID={testID ? `${testID}-navigation-drawer` : undefined}
+            style={{ position: 'absolute', top: 0, bottom: 0, insetInlineStart: 0, flexDirection: 'row',
+              ...(ownsSafeArea ? {
+                paddingTop: 12 + insets.top,
+                paddingBottom: 12 + insets.bottom,
+                paddingInlineStart: 12 + (rtl ? insets.right : insets.left),
+                paddingInlineEnd: 12 + (rtl ? insets.left : insets.right),
+              } : { padding: 12 }),
+            }}
           >
             <View pointerEvents="auto" style={{ height: '100%' }}>
               <Sidebar {...drawerSidebar} mobile onClose={() => setOpen(false)} />
@@ -810,12 +843,12 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   };
 
   if (variant === 'feed' && drawerStyle === 'reveal' && drawerAvailable) {
-    return (
+    return safeFrame(
       <AppShellProvider value={shell}>
         <View {...dirProps} testID={testID} onLayout={onLayout}
           style={[frame, { overflow: doc ? WEB_OVERFLOW_CLIP : 'hidden', backgroundColor: background }, style]}>
-          <View aria-hidden={!isOpen} pointerEvents={isOpen ? 'auto' : 'none'}
-            style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: 12, paddingBottom: 12, paddingInlineStart: 6 }}>
+          <View testID={testID ? `${testID}-navigation-drawer` : undefined} aria-hidden={!isOpen} pointerEvents={isOpen ? 'auto' : 'none'}
+            style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: revealGutter, paddingBottom: revealGutter + navigationBottomInset, paddingInlineStart: revealGutter / 2 }}>
             <Animated.View style={[{ height: '100%', width: 260, transformOrigin: railOrigin }, railStyle]}>
               {drawerSidebar && <Sidebar {...drawerSidebar} mobile surface="plain" onClose={() => setOpen(false)} />}
             </Animated.View>
@@ -850,7 +883,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   // edge without escaping the frame's padding. Without one the root stays the
   // row it has always been, so nothing about an existing shell moves.
   if (topBarNode) {
-    return (
+    return safeFrame(
       <AppShellProvider value={shell}>
         <View
           {...dirProps}
@@ -871,7 +904,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     );
   }
 
-  return (
+  return safeFrame(
     <AppShellProvider value={shell}>
       <View {...dirProps} testID={testID} onLayout={onLayout} style={[frame, rowStyle, style]}>
         {navRegion}

package/src/app-shell/AppShellSplit.tsx

@@ -18,6 +18,8 @@ import React, { memo, useCallback, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 
 import { AiChatResizeHandle } from '../ai-chat/AiChatResizeHandle';
+import { PanelErrorBoundary } from '../error-boundary/PanelErrorBoundary';
+import type { PanelErrorBoundaryOptions } from '../error-boundary/types';
 import { Z_INDEX } from '../styles/z-index';
 import { space } from '../styles/tokens';
 import { useTheme } from '../theme/use-theme';
@@ -31,29 +33,33 @@ import { APP_SHELL_DEFAULTS as D } from './constants';
 function Pane({
   children,
   scroll,
+  errorBoundary,
   style,
   testID,
 }: {
   children: React.ReactNode;
   scroll: boolean;
+  errorBoundary?: false | PanelErrorBoundaryOptions;
   style: React.ComponentProps<typeof View>['style'];
   testID?: string;
 }) {
+  const content = scroll ? (
+    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
+      {children}
+    </ScrollView>
+  ) : <View style={{ flex: 1, minHeight: 0 }}>{children}</View>;
   return (
     <View testID={testID} style={[{ minWidth: 0, alignSelf: 'stretch' }, style]}>
-      {scroll ? (
-        <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-          {children}
-        </ScrollView>
-      ) : (
-        <View style={{ flex: 1, minHeight: 0 }}>{children}</View>
-      )}
+      {errorBoundary === false ? content : <PanelErrorBoundary {...errorBoundary}>{content}</PanelErrorBoundary>}
     </View>
   );
 }
 
 const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
   variant = 'joined',
+  listErrorBoundary,
+  detailErrorBoundary,
+  infoErrorBoundary,
   list,
   detail,
   info,
@@ -120,6 +126,7 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
       {showList ? (
         <Pane
           testID={testID ? `${testID}-pane-list` : undefined}
+          errorBoundary={listErrorBoundary}
           scroll={paneScroll}
           style={solo ? { flexGrow: 1, flexShrink: 1, flexBasis: 0 } : { width, flexShrink: 0 }}
         >
@@ -148,6 +155,7 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
       {showDetail ? (
         <Pane
           testID={testID ? `${testID}-pane-detail` : undefined}
+          errorBoundary={detailErrorBoundary}
           scroll={paneScroll}
           style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}
         >
@@ -158,6 +166,7 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
       {showInfo ? (
         <Pane
           testID={testID ? `${testID}-pane-info` : undefined}
+          errorBoundary={infoErrorBoundary}
           scroll={paneScroll}
           style={solo ? { flexGrow: 1, flexShrink: 1, flexBasis: 0 } : { width: infoWidth, flexShrink: 0 }}
         >

package/src/app-shell/types.ts

@@ -2,6 +2,7 @@ import type { AppColorName } from '../theme/color-presets';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
+import type { PanelErrorBoundaryOptions } from '../error-boundary/types';
 import type { ContentPanelFramedBreakpoint } from '../content-panel/types';
 import type { NotificationCenterItem, NotificationCenterTab } from '../notification-center/types';
 import type { SidebarProps } from '../sidebar/types';
@@ -67,6 +68,14 @@ export type AppShellScroll = 'document' | 'container' | 'fixed';
 export type AppShellBarVisibility = 'compact' | 'always';
 
 export interface AppShellEngineProps {
+  /**
+   * Native: keep the shell, navigation and pages inside the device's safe area.
+   * The bottom-bar slot still owns its bottom inset; without bottom chrome the
+   * frame reserves it. Use `safeArea={false}` on descendant PageHeaders because
+   * the frame already owns their top edge. Device insets remain available to
+   * dialogs and other portaled surfaces. Defaults to false; no effect on web.
+   */
+  safeArea?: boolean;
   /**
    * The layout shape. Defaults to `dashboard` — the behaviour this component
    * had before variants existed, down to the pixel.
@@ -124,8 +133,8 @@ export interface AppShellEngineProps {
    */
   asideCollapse?: 'stack' | 'hidden';
   children?: ReactNode;
-  /** The content column's max width. Defaults to 1300. */
-  contentMaxWidth?: number;
+  /** The content column's max width. Defaults to 1300; `none` fills the available width. */
+  contentMaxWidth?: number | 'none';
   /** Floating extras rendered last, e.g. a `ProOfferCard`. */
   overlay?: ReactNode;
   /** Controlled drawer state (below `lg`). */
@@ -364,7 +373,7 @@ export interface AppShellNavigationProps {
   actions?: ReactNode;
   header?: ReactNode;
   children?: ReactNode;
-  contentMaxWidth?: number;
+  contentMaxWidth?: number | 'none';
   overlay?: ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;
@@ -379,6 +388,10 @@ export type AppShellProps = Omit<AppShellEngineProps, 'scroll'> & AppShellNaviga
 
 /** A bounded list/detail/info layout, independent of navigation or surfaces. */
 export interface AppShellSplitPanesProps {
+  /** Each visible pane isolates render errors by default. false delegates to an outer boundary. */
+  listErrorBoundary?: false | PanelErrorBoundaryOptions;
+  detailErrorBoundary?: false | PanelErrorBoundaryOptions;
+  infoErrorBoundary?: false | PanelErrorBoundaryOptions;
   /** Joined uses hairline dividers (default); separated leaves a 12px gutter for independent panel surfaces. */
   variant?: 'joined' | 'separated';
   list?: ReactNode;

package/src/appearance/BloomScope.tsx

@@ -3,8 +3,11 @@ import { BloomAppearanceContext } from './context';
 import type { BloomScopeProps } from './types';
 
 /** A visual environment only: never inherits actions, selection or disabled state. */
-export function BloomScope({ children, size, tone }: BloomScopeProps) {
+export function BloomScope({ children, size, tone, panelRadius }: BloomScopeProps) {
+  if (panelRadius !== undefined && (!Number.isFinite(panelRadius) || panelRadius < 0)) {
+    throw new RangeError('panelRadius must be a finite, non-negative number.');
+  }
   const parent = useContext(BloomAppearanceContext);
-  const value = useMemo(() => ({ size: size ?? parent.size, tone: tone ?? parent.tone }), [size, tone, parent]);
+  const value = useMemo(() => ({ size: size ?? parent.size, tone: tone ?? parent.tone, panelRadius: panelRadius ?? parent.panelRadius }), [size, tone, panelRadius, parent]);
   return <BloomAppearanceContext.Provider value={value}>{children}</BloomAppearanceContext.Provider>;
 }

package/src/appearance/context.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
-import type { BloomAppearanceProps } from './types';
+import type { BloomAppearanceProps, BloomScopeProps } from './types';
 
-export const BloomAppearanceContext = createContext<BloomAppearanceProps>({});
+export const BloomAppearanceContext = createContext<Omit<BloomScopeProps, 'children'>>({});
 
 /** Explicit props override the nearest scope, then the family's defaults. */
 export function useBloomAppearance(

package/src/appearance/types.ts

@@ -8,4 +8,7 @@ export interface BloomAppearanceProps {
   size?: BloomSize;
   tone?: BloomTone;
 }
-export type BloomScopeProps = PropsWithChildren<BloomAppearanceProps>;
+export type BloomScopeProps = PropsWithChildren<BloomAppearanceProps & {
+  /** Shared corner radius for framed content panels and card sidebars. Defaults to 28. */
+  panelRadius?: number;
+}>;

package/src/chip/Chip.tsx

@@ -84,6 +84,15 @@ const BLOOM_CHIP_CSS = interactiveWebCss({
   hover: { declarations: 'opacity: 0.9;' },
   outlineOffset: 2,
   extraRules: `
+/* The removable pill contains two sibling controls. Draw one exterior focus ring. */
+[data-bloom-chip-group]:has(:focus-visible) {
+  outline: 2px solid var(--bloom-chip-ring);
+  outline-offset: 2px;
+}
+[data-bloom-chip-group] [data-bloom-chip]:focus-visible {
+  outline: none;
+}
+
 /* The rung with a minWidth ("Any", "1", "8+" in a counts row) centres its
    label. The style prop cannot say so: the reset above is an adopted sheet and
    wins over react-native-web's atomic classes, so it has to be said here too. */
@@ -214,7 +223,9 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
   const removeLabel = closeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove');
   const closeButton = onClose ? (
     <Pressable
-      onPress={onClose}
+      onPress={(event) => { event.stopPropagation(); onClose(); }}
+      disabled={disabled}
+      aria-disabled={disabled || undefined}
       hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
       accessibilityLabel={removeLabel}
       accessibilityRole="button"
@@ -235,7 +246,6 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
         children
       )}
       {endIcon != null ? <View style={iconSlotStyle}>{endIcon}</View> : null}
-      {closeButton}
     </>
   );
 
@@ -256,9 +266,9 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
           ? { accessibilityState: { selected, disabled }, 'aria-selected': selected }
           : { accessibilityState: { disabled, selected }, 'aria-pressed': selected };
 
-    return (
+    const button = (
       <StyledPressable
-        className={className}
+        className={onClose ? undefined : className}
         ref={ref}
         // The DOM hook the adopted sheet above hangs off.
         //
@@ -286,7 +296,7 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
               ...(onKeyDown ? { onKeyDown } : null),
             } as Record<string, unknown>)
           : {})}
-        style={[
+        style={onClose ? { flexGrow: 1, flexShrink: 1, alignSelf: 'stretch', flexDirection: 'row', alignItems: 'center', gap: geometry.iconGap, borderWidth: 0, backgroundColor: 'transparent', padding: 0, minWidth: 0 } : [
           containerStyle,
           disabled && { opacity: 0.5 },
           hovered && !disabled && paint.hoveredBorder ? { borderColor: paint.hoveredBorder } : null,
@@ -312,6 +322,16 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
         {content}
       </StyledPressable>
     );
+    if (!onClose) return button;
+    // Selection and removal are sibling controls, never nested buttons.
+    // The shared outer pill owns layout classes and paint; the ref still targets selection.
+    return <StyledView
+      className={className}
+      {...(IS_WEB ? { dataSet: { bloomChipGroup: '' } } : {})}
+      style={[containerStyle, disabled && { opacity: 0.5 },
+        hovered && !disabled && paint.hoveredBorder ? { borderColor: paint.hoveredBorder } : null,
+        pressed && !disabled && { backgroundColor: paint.pressedBackground }, style]}
+    >{button}{closeButton}</StyledView>;
   }
 
   return (
@@ -323,6 +343,7 @@ const ChipComponent = forwardRef<View, ChipProps>(function ChipComponent(
       testID={testID}
     >
       {content}
+      {closeButton}
     </StyledView>
   );
 });