@oxy.so/bloom 7.1.5 → 7.2.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/types.ts

@@ -67,6 +67,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 +132,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 +372,7 @@ export interface AppShellNavigationProps {
   actions?: ReactNode;
   header?: ReactNode;
   children?: ReactNode;
-  contentMaxWidth?: number;
+  contentMaxWidth?: number | 'none';
   overlay?: ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;

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/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.