@oxy.so/bloom 6.3.0 → 7.0.0

package/src/design-tokens/theme.css

@@ -6,6 +6,63 @@
  */
 
 @theme {
+  --color-status-blue-background: var(--info-subtle);
+  --color-status-blue-text: var(--info-text);
+  --color-status-yellow-background: var(--warning-subtle);
+  --color-status-yellow-text: var(--warning-text);
+  --color-status-orange-background: var(--warning-subtle);
+  --color-status-orange-text: var(--warning-text);
+  --color-status-rose-background: var(--error-subtle);
+  --color-status-rose-text: var(--error-text);
+  --color-ticket-detail-surface: var(--card);
+  --color-ticket-detail-favorite: var(--warning);
+  --color-ticket-detail-low-background: var(--info-subtle);
+  --color-ticket-detail-low-text: var(--info-text);
+  --color-ticket-detail-low-hover: var(--info-subtle);
+  --color-ticket-detail-medium-hover: var(--warning-subtle);
+  --color-ticket-detail-high-hover: var(--warning-subtle);
+  --color-ticket-detail-urgent-hover: var(--error-subtle);
+  --color-ticket-detail-resource-background: var(--info-subtle);
+  --color-ticket-detail-resource-text: var(--info-text);
+  --color-project-board-empty-panel: var(--surface);
+  --color-project-board-empty-back: var(--muted);
+  --color-project-board-empty-middle: var(--popover);
+  --color-project-board-empty-front: var(--border);
+  --color-project-board-empty-detail: var(--card);
+  --color-background-full: var(--background);
+  --color-background-primary-default: var(--card);
+  --color-background-primary-hover: var(--surface);
+  --color-background-primary-active: var(--popover);
+  --color-background-secondary-default: var(--surface);
+  --color-background-secondary-hover: var(--popover);
+  --color-background-secondary-active: var(--accent);
+  --color-background-tertiary-default: var(--popover);
+  --color-background-tertiary-hover: var(--accent);
+  --color-background-tertiary-active: var(--muted);
+  --color-text-primary: var(--foreground);
+  --color-text-white: #ffffff;
+  --color-text-destructive: var(--error-text);
+  --color-foreground-icon-primary: var(--foreground);
+  --color-foreground-icon-secondary: var(--muted-foreground);
+  --color-foreground-icon-tertiary: var(--muted-foreground);
+  --color-border-button-default: var(--border);
+  --color-border-button-white: var(--input);
+  --color-border-focus-ring: var(--ring);
+  --color-border-input-default: var(--input);
+  --color-separator-border: var(--border);
+  --color-button-primary: var(--primary);
+  --color-dropdown-item-hover-background: var(--accent);
+  --color-accent-50: var(--primary-subtle);
+  --color-accent-100: var(--primary-subtle);
+  --color-accent-200: var(--primary-subtle);
+  --color-accent-300: var(--primary);
+  --color-accent-400: var(--primary);
+  --color-accent-500: var(--primary);
+  --color-accent-600: var(--primary-text);
+  --color-accent-700: var(--primary-text);
+  --color-accent-800: var(--primary-text);
+  --color-accent-900: var(--primary-text);
+  --color-accent-950: var(--primary-text);
   --color-bg: var(--background);
   --color-fill: var(--card);
   --color-fill-secondary: var(--muted);
@@ -102,6 +159,12 @@
   --color-info-subtle: var(--info-subtle);
   --color-destructive-foreground: #ffffff;
   --color-divider: var(--border);
+  --spacing: 4px;
+  --container-xs: 320px;
+  --container-sm: 384px;
+  --container-md: 448px;
+  --container-lg: 512px;
+  --container-xl: 576px;
   --spacing-space-2: 2px;
   --spacing-space-4: 4px;
   --spacing-space-8: 8px;
@@ -156,6 +219,227 @@
   --text-buttonLarge--line-height: calc(22 / 17);
   --text-buttonLarge--font-weight: 600;
   --font-buttonLarge: var(--bloom-font-sans);
+  --text-large-title-regular: 64px;
+  --text-large-title-regular--line-height: calc(80 / 64);
+  --text-large-title-regular--font-weight: 400;
+  --text-large-title-regular--letter-spacing: 0px;
+  --text-large-title-medium: 64px;
+  --text-large-title-medium--line-height: calc(80 / 64);
+  --text-large-title-medium--font-weight: 500;
+  --text-large-title-medium--letter-spacing: 0px;
+  --text-large-title-semibold: 64px;
+  --text-large-title-semibold--line-height: calc(80 / 64);
+  --text-large-title-semibold--font-weight: 600;
+  --text-large-title-semibold--letter-spacing: 0px;
+  --text-large-title-bold: 64px;
+  --text-large-title-bold--line-height: calc(80 / 64);
+  --text-large-title-bold--font-weight: 700;
+  --text-large-title-bold--letter-spacing: 0px;
+  --text-display-1-regular: 56px;
+  --text-display-1-regular--line-height: calc(72 / 56);
+  --text-display-1-regular--font-weight: 400;
+  --text-display-1-regular--letter-spacing: 0px;
+  --text-display-1-medium: 56px;
+  --text-display-1-medium--line-height: calc(72 / 56);
+  --text-display-1-medium--font-weight: 500;
+  --text-display-1-medium--letter-spacing: 0px;
+  --text-display-1-semibold: 56px;
+  --text-display-1-semibold--line-height: calc(72 / 56);
+  --text-display-1-semibold--font-weight: 600;
+  --text-display-1-semibold--letter-spacing: 0px;
+  --text-display-1-bold: 56px;
+  --text-display-1-bold--line-height: calc(72 / 56);
+  --text-display-1-bold--font-weight: 700;
+  --text-display-1-bold--letter-spacing: 0px;
+  --text-display-2-regular: 48px;
+  --text-display-2-regular--line-height: calc(64 / 48);
+  --text-display-2-regular--font-weight: 400;
+  --text-display-2-regular--letter-spacing: 0px;
+  --text-display-2-medium: 48px;
+  --text-display-2-medium--line-height: calc(64 / 48);
+  --text-display-2-medium--font-weight: 500;
+  --text-display-2-medium--letter-spacing: 0px;
+  --text-display-2-semibold: 48px;
+  --text-display-2-semibold--line-height: calc(64 / 48);
+  --text-display-2-semibold--font-weight: 600;
+  --text-display-2-semibold--letter-spacing: 0px;
+  --text-display-2-bold: 48px;
+  --text-display-2-bold--line-height: calc(64 / 48);
+  --text-display-2-bold--font-weight: 700;
+  --text-display-2-bold--letter-spacing: 0px;
+  --text-display-3-regular: 40px;
+  --text-display-3-regular--line-height: calc(54 / 40);
+  --text-display-3-regular--font-weight: 400;
+  --text-display-3-regular--letter-spacing: 0px;
+  --text-display-3-medium: 40px;
+  --text-display-3-medium--line-height: calc(54 / 40);
+  --text-display-3-medium--font-weight: 500;
+  --text-display-3-medium--letter-spacing: 0px;
+  --text-display-3-semibold: 40px;
+  --text-display-3-semibold--line-height: calc(54 / 40);
+  --text-display-3-semibold--font-weight: 600;
+  --text-display-3-semibold--letter-spacing: 0px;
+  --text-display-3-bold: 40px;
+  --text-display-3-bold--line-height: calc(54 / 40);
+  --text-display-3-bold--font-weight: 700;
+  --text-display-3-bold--letter-spacing: 0px;
+  --text-display-4-regular: 32px;
+  --text-display-4-regular--line-height: calc(44 / 32);
+  --text-display-4-regular--font-weight: 400;
+  --text-display-4-regular--letter-spacing: 0px;
+  --text-display-4-medium: 32px;
+  --text-display-4-medium--line-height: calc(44 / 32);
+  --text-display-4-medium--font-weight: 500;
+  --text-display-4-medium--letter-spacing: 0px;
+  --text-display-4-semibold: 32px;
+  --text-display-4-semibold--line-height: calc(44 / 32);
+  --text-display-4-semibold--font-weight: 600;
+  --text-display-4-semibold--letter-spacing: 0px;
+  --text-display-4-bold: 32px;
+  --text-display-4-bold--line-height: calc(44 / 32);
+  --text-display-4-bold--font-weight: 700;
+  --text-display-4-bold--letter-spacing: 0px;
+  --text-title-1-regular: 24px;
+  --text-title-1-regular--line-height: calc(34 / 24);
+  --text-title-1-regular--font-weight: 400;
+  --text-title-1-regular--letter-spacing: 0px;
+  --text-title-1-medium: 24px;
+  --text-title-1-medium--line-height: calc(34 / 24);
+  --text-title-1-medium--font-weight: 500;
+  --text-title-1-medium--letter-spacing: 0px;
+  --text-title-1-semibold: 24px;
+  --text-title-1-semibold--line-height: calc(34 / 24);
+  --text-title-1-semibold--font-weight: 600;
+  --text-title-1-semibold--letter-spacing: 0px;
+  --text-title-1-bold: 24px;
+  --text-title-1-bold--line-height: calc(34 / 24);
+  --text-title-1-bold--font-weight: 700;
+  --text-title-1-bold--letter-spacing: 0px;
+  --text-title-2-regular: 20px;
+  --text-title-2-regular--line-height: calc(26 / 20);
+  --text-title-2-regular--font-weight: 400;
+  --text-title-2-regular--letter-spacing: 0px;
+  --text-title-2-medium: 20px;
+  --text-title-2-medium--line-height: calc(26 / 20);
+  --text-title-2-medium--font-weight: 500;
+  --text-title-2-medium--letter-spacing: 0px;
+  --text-title-2-semibold: 20px;
+  --text-title-2-semibold--line-height: calc(26 / 20);
+  --text-title-2-semibold--font-weight: 600;
+  --text-title-2-semibold--letter-spacing: 0px;
+  --text-title-2-bold: 20px;
+  --text-title-2-bold--line-height: calc(26 / 20);
+  --text-title-2-bold--font-weight: 700;
+  --text-title-2-bold--letter-spacing: 0px;
+  --text-title-3-regular: 18px;
+  --text-title-3-regular--line-height: calc(24 / 18);
+  --text-title-3-regular--font-weight: 400;
+  --text-title-3-regular--letter-spacing: 0px;
+  --text-title-3-medium: 18px;
+  --text-title-3-medium--line-height: calc(26 / 18);
+  --text-title-3-medium--font-weight: 500;
+  --text-title-3-medium--letter-spacing: 0px;
+  --text-title-3-semibold: 18px;
+  --text-title-3-semibold--line-height: calc(26 / 18);
+  --text-title-3-semibold--font-weight: 600;
+  --text-title-3-semibold--letter-spacing: 0px;
+  --text-title-3-bold: 18px;
+  --text-title-3-bold--line-height: calc(26 / 18);
+  --text-title-3-bold--font-weight: 700;
+  --text-title-3-bold--letter-spacing: 0px;
+  --text-headline-regular: 16px;
+  --text-headline-regular--line-height: calc(22 / 16);
+  --text-headline-regular--font-weight: 400;
+  --text-headline-regular--letter-spacing: 0px;
+  --text-headline-medium: 16px;
+  --text-headline-medium--line-height: calc(22 / 16);
+  --text-headline-medium--font-weight: 500;
+  --text-headline-medium--letter-spacing: 0px;
+  --text-headline-semibold: 16px;
+  --text-headline-semibold--line-height: calc(22 / 16);
+  --text-headline-semibold--font-weight: 600;
+  --text-headline-semibold--letter-spacing: 0px;
+  --text-headline-bold: 16px;
+  --text-headline-bold--line-height: calc(22 / 16);
+  --text-headline-bold--font-weight: 700;
+  --text-headline-bold--letter-spacing: 0px;
+  --text-body-regular: 14px;
+  --text-body-regular--line-height: calc(20 / 14);
+  --text-body-regular--font-weight: 400;
+  --text-body-regular--letter-spacing: 0px;
+  --text-body-medium: 14px;
+  --text-body-medium--line-height: calc(20 / 14);
+  --text-body-medium--font-weight: 500;
+  --text-body-medium--letter-spacing: 0px;
+  --text-body-semibold: 14px;
+  --text-body-semibold--line-height: calc(20 / 14);
+  --text-body-semibold--font-weight: 600;
+  --text-body-semibold--letter-spacing: 0px;
+  --text-body-bold: 14px;
+  --text-body-bold--line-height: calc(20 / 14);
+  --text-body-bold--font-weight: 700;
+  --text-body-bold--letter-spacing: 0px;
+  --text-body-2-regular: 13px;
+  --text-body-2-regular--line-height: calc(18 / 13);
+  --text-body-2-regular--font-weight: 400;
+  --text-body-2-regular--letter-spacing: 0px;
+  --text-body-2-medium: 13px;
+  --text-body-2-medium--line-height: calc(18 / 13);
+  --text-body-2-medium--font-weight: 500;
+  --text-body-2-medium--letter-spacing: 0px;
+  --text-body-2-semibold: 13px;
+  --text-body-2-semibold--line-height: calc(18 / 13);
+  --text-body-2-semibold--font-weight: 600;
+  --text-body-2-semibold--letter-spacing: 0px;
+  --text-body-2-bold: 13px;
+  --text-body-2-bold--line-height: calc(18 / 13);
+  --text-body-2-bold--font-weight: 700;
+  --text-body-2-bold--letter-spacing: 0px;
+  --text-caption-1-regular: 12px;
+  --text-caption-1-regular--line-height: calc(16 / 12);
+  --text-caption-1-regular--font-weight: 400;
+  --text-caption-1-regular--letter-spacing: 0.15px;
+  --text-caption-1-medium: 12px;
+  --text-caption-1-medium--line-height: calc(16 / 12);
+  --text-caption-1-medium--font-weight: 500;
+  --text-caption-1-medium--letter-spacing: 0.15px;
+  --text-caption-1-semibold: 12px;
+  --text-caption-1-semibold--line-height: calc(16 / 12);
+  --text-caption-1-semibold--font-weight: 600;
+  --text-caption-1-semibold--letter-spacing: 0.15px;
+  --text-caption-1-bold: 12px;
+  --text-caption-1-bold--line-height: calc(16 / 12);
+  --text-caption-1-bold--font-weight: 700;
+  --text-caption-1-bold--letter-spacing: 0.15px;
+  --text-caption-2-regular: 11px;
+  --text-caption-2-regular--line-height: calc(15 / 11);
+  --text-caption-2-regular--font-weight: 400;
+  --text-caption-2-regular--letter-spacing: 0.2px;
+  --text-caption-2-medium: 11px;
+  --text-caption-2-medium--line-height: calc(15 / 11);
+  --text-caption-2-medium--font-weight: 500;
+  --text-caption-2-medium--letter-spacing: 0.2px;
+  --text-caption-2-semibold: 11px;
+  --text-caption-2-semibold--line-height: calc(15 / 11);
+  --text-caption-2-semibold--font-weight: 600;
+  --text-caption-2-semibold--letter-spacing: 0.2px;
+  --text-caption-2-bold: 11px;
+  --text-caption-2-bold--line-height: calc(15 / 11);
+  --text-caption-2-bold--font-weight: 700;
+  --text-caption-2-bold--letter-spacing: 0.2px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-4xl: 32px;
+  --radius-2lg: 10px;
+  --radius-2-5xl: 20px;
+  --shadow-sidebar: 0 1px 0 0 rgb(0 0 0 / 0.0196), 0 1px 12px 0 rgb(0 0 0 / 0.0588), 0 0 1px 0 rgb(0 0 0 / 0.3216);
+  --shadow-card: 0 1px 1px 0 rgb(0 0 0 / 0.05);
+  --shadow-dropdown: 0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02);
   --font-bloom-sans: var(--bloom-font-sans);
   --font-bloom-display: var(--bloom-font-display);
   --font-bloom-mono: var(--bloom-font-mono);

package/src/dialog/Dialog.tsx

@@ -101,7 +101,7 @@ export function Dialog({
   if (resolvedPlacement === 'bottom') {
     return <DialogBottomSheet {...rest} />;
   }
-  return <CenteredOrSideDialog {...rest} placement={resolvedPlacement} />;
+  return <CenteredOrSideDialog {...rest} placement={rest.presentation === 'custom' ? 'end' : resolvedPlacement} />;
 }
 
 /**
@@ -114,6 +114,9 @@ export function Dialog({
 function CenteredOrSideDialog({
   control,
   open: controlledOpen,
+  startOpen,
+  presentation = 'default',
+  exitDuration,
   onClose,
   testID,
   title,
@@ -155,7 +158,7 @@ function CenteredOrSideDialog({
 
   // Imperative open state for the side placement (the BottomSheet path owns its
   // own visibility via its ref instead).
-  const [sideOpen, setSideOpen] = useState(false);
+  const [sideOpen, setSideOpen] = useState(() => controlledOpen ?? startOpen ?? false);
 
   const theme = useTheme();
   const ref = useRef<BottomSheetRef>(null);
@@ -240,8 +243,8 @@ function CenteredOrSideDialog({
   );
 
   const context = useMemo(
-    () => ({ close, isWithinDialog: true }),
-    [close],
+    () => ({ close, isWithinDialog: true, isClosing: !sideOpen }),
+    [close, sideOpen],
   );
 
   // The array composes the plain surface styles with the morph's reanimated
@@ -299,6 +302,8 @@ function CenteredOrSideDialog({
     return (
       <Context.Provider value={context}>
         <SideSheet
+          presentation={presentation}
+          exitDuration={exitDuration}
           open={sideOpen}
           onDismiss={handleDismiss}
           side={placement}
@@ -394,6 +399,8 @@ function CenteredOrSideDialog({
  * exit animations are safe (the web `removeChild` crash does not apply).
  */
 function SideSheet({
+  presentation,
+  exitDuration,
   open,
   onDismiss,
   side,
@@ -417,6 +424,8 @@ function SideSheet({
   style,
   children,
 }: {
+  presentation?: DialogProps['presentation'];
+  exitDuration?: number;
   open: boolean;
   onDismiss: () => void;
   side: DialogSidePlacement;
@@ -481,7 +490,7 @@ function SideSheet({
 
   useEffect(() => {
     cancelAnimation(progress);
-    const timing = { ...MOTION_RECIPES[open ? 'present' : 'dismiss'], duration: ANIMATION_DURATION, easing: Easing.out(Easing.cubic) };
+    const timing = { ...MOTION_RECIPES[open ? 'present' : 'dismiss'], duration: presentation === 'custom' ? exitDuration ?? 0 : ANIMATION_DURATION, easing: Easing.out(Easing.cubic) };
     if (open) {
       setMounted(true);
       progress.value = withTiming(1, timing);
@@ -491,20 +500,20 @@ function SideSheet({
     progress.value = withTiming(0, timing, (finished) => {
       if (finished) runOnJS(finishClose)();
     });
-  }, [open, mounted, progress, finishClose]);
+  }, [open, mounted, progress, finishClose, presentation, exitDuration]);
 
   const handleBackdropPress = useCallback(() => {
-    if (dismissOnBackdrop) onDismiss();
-  }, [dismissOnBackdrop, onDismiss]);
+    if (dismissOnBackdrop) onHeaderDismiss();
+  }, [dismissOnBackdrop, onHeaderDismiss]);
 
   const hiddenSign = edge === 'left' ? -1 : 1;
   const panelAnimatedStyle = useAnimatedStyle(() => {
     const hidden = 1 - progress.value;
     return {
-      opacity: progress.value,
-      transform: [{ translateX: hidden * travel.value * hiddenSign }],
+      opacity: presentation === 'custom' ? 1 : progress.value,
+      transform: [{ translateX: presentation === 'custom' ? 0 : hidden * travel.value * hiddenSign }],
     };
-  }, [hiddenSign, progress, travel]);
+  }, [hiddenSign, progress, travel, presentation]);
 
   const measurePanel = useCallback(
     (e: { nativeEvent: { layout: { width: number } } }) => {
@@ -557,6 +566,8 @@ function SideSheet({
         onPress={handleBackdropPress}
         disabled={!dismissOnBackdrop}
         progress={progress}
+        dimOpacity={presentation === 'custom' ? 0 : undefined}
+        blurIntensity={presentation === 'custom' ? 0 : undefined}
         style={sideStyles.backdrop}
       />
 
@@ -569,7 +580,7 @@ function SideSheet({
         onLayout={measurePanel}
         className={panelClassName}
         style={[
-          sideStyles.panel,
+          presentation === 'custom' ? {position: 'absolute'} : sideStyles.panel,
           // `shadowColor` is a valid RN style prop on native (Dialog.tsx is the
           // native variant); the web `shadow*` deprecation is handled in Dialog.web.tsx.
           { backgroundColor: 'transparent', pointerEvents: 'auto', ...material.vars },
@@ -580,7 +591,7 @@ function SideSheet({
           { backgroundColor: 'transparent' },
         ]}
       >
-        <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={panelRadius} />
+        {presentation !== 'custom' && <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={panelRadius} />}
         <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
         {header ? (
           // Nav-header mode on a side drawer: a static titled bar (the drawer body
@@ -597,7 +608,7 @@ function SideSheet({
             <DialogHeaderProvider controller={headerController}>{surfaceChildren}</DialogHeaderProvider>
           </View>
         ) : (
-          <View style={{ padding: contentPadding, borderRadius: panelRadius, overflow: 'hidden' }}>{surfaceChildren}</View>
+          <View style={{ padding: contentPadding, flex: presentation === 'custom' ? 1 : undefined, minHeight: 0, borderRadius: panelRadius, overflow: presentation === 'custom' ? 'visible' : 'hidden' }}>{surfaceChildren}</View>
         )}
         </SurfaceLevelProvider>
       </AnimatedStyledView>

package/src/dialog/Dialog.web.tsx

@@ -178,6 +178,8 @@ function CenterOrSideDialog({
   control,
   open: controlledOpen,
   startOpen,
+  presentation = 'default',
+  exitDuration: customExitDuration,
   onClose,
   testID,
   title,
@@ -267,7 +269,7 @@ function CenterOrSideDialog({
   }, [isControlled, controlledOpen]);
 
   const exitDuration =
-    resolvedPlacement === 'center' ? FADE_OUT_DURATION : ANIMATION_DURATION;
+    presentation === 'custom' ? customExitDuration ?? 0 : resolvedPlacement === 'center' ? FADE_OUT_DURATION : ANIMATION_DURATION;
 
   useEffect(() => {
     if (!isClosing) return;
@@ -323,8 +325,8 @@ function CenterOrSideDialog({
   );
 
   const context = useMemo(
-    () => ({ close, isWithinDialog: true }),
-    [close],
+    () => ({ close, isWithinDialog: true, isClosing }),
+    [close, isClosing],
   );
 
   if (!isOpen) return null;
@@ -342,7 +344,7 @@ function CenterOrSideDialog({
                 the app's lifetime. `modal` makes the app's
                 `OverlayInertBoundary` take the page out of the tab order and
                 the accessibility tree while it is open. */}
-            <OverlayRoot modal>
+            <OverlayRoot modal style={containerStyle} className={containerClassName}>
               <ModalKeyboard
                 panelRef={panelRef}
                 closing={isClosing}
@@ -362,14 +364,17 @@ function CenterOrSideDialog({
                 // opacity animation on the blur's ancestor composites the group in
                 // isolation and leaves `backdrop-filter` nothing to sample.
                 progress={backdropFade}
-                style={{
+                dimOpacity={presentation === 'custom' ? 0 : undefined}
+                blurIntensity={presentation === 'custom' ? 0 : undefined}
+                style={[{
                   position: WEB_POSITION_FIXED,
                   alignItems: 'center',
                   justifyContent: 'center',
-                  paddingHorizontal: 20,
-                }}
+                  paddingHorizontal: presentation === 'custom' ? undefined : 20,
+                }, containerStyle]}
               >
                 <DialogPanel
+                  presentation={presentation}
                   panelRef={panelRef}
                   testID={testID}
                   label={label}
@@ -377,7 +382,7 @@ function CenterOrSideDialog({
                   description={description}
                   actions={actions}
                   header={header}
-                  style={style}
+                  style={[panelStyle, style]}
                   maxWidth={maxWidth}
                   contentPadding={contentPadding}
                   maxHeightRatio={maxHeightRatio}
@@ -431,6 +436,7 @@ function CenterOrSideDialog({
 }
 
 function DialogPanel({
+  presentation,
   panelRef,
   testID,
   label,
@@ -447,6 +453,7 @@ function DialogPanel({
   isClosing,
   children,
 }: {
+  presentation?: DialogProps['presentation'];
   panelRef: React.RefObject<View | null>;
   testID?: string;
   label?: string;
@@ -478,7 +485,7 @@ function DialogPanel({
   // The card's own `maxHeight` (the ratio percentage below) does the exact
   // capping — the viewport is just the bound the reshape may not exceed.
   const morphState = useDialogMorph({
-    enabled: morph !== false,
+    enabled: presentation !== 'custom' && morph !== false,
     measurable: scrollable !== false,
     maxHeight: viewportHeight,
     maxWidth,
@@ -518,7 +525,7 @@ function DialogPanel({
       style={[
         {
           position: 'relative',
-          ...surfaceStyle(SURFACE_SHAPES.panel),
+          ...(presentation === 'custom' ? {} : surfaceStyle(SURFACE_SHAPES.panel)),
           width: '100%',
           maxWidth,
           // The Dialog OWNS the size cap + scroll boundary (its content renders
@@ -526,18 +533,18 @@ function DialogPanel({
           // capped at `maxHeightRatio` of the viewport and scrolls inside the
           // rounded card (via the ScrollView below) — consumers never add their
           // own height cap / ScrollView. `overflow: hidden` clips to the radius.
-          maxHeight: `${Math.round(heightRatio * 100)}%`,
-          overflow: 'hidden',
+          maxHeight: presentation === 'custom' ? undefined : `${Math.round(heightRatio * 100)}%`,
+          overflow: presentation === 'custom' ? 'visible' : 'hidden',
           backgroundColor: 'transparent',
           // `--bloom-surface` on the element that carries the fill, so web CSS
           // inside the dialog reads the dialog's colour and not the colour of
           // whatever surface it was opened over.
           ...material.vars,
-          borderWidth: 1,
+          borderWidth: presentation === 'custom' ? 0 : 1,
           borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
           // Design-system overlay elevation (`shadow-m`) as a `boxShadow` — RN-Web
           // deprecated the `shadow*` style props.
-          ...bloomShadowStyle('m'),
+          ...(presentation === 'custom' ? {} : bloomShadowStyle('m')),
           // Above this surface's OWN backdrop, and nothing more: `OverlayRoot`
           // sets a z-index and a fixed position, so it is a stacking context and
           // this value is scoped inside it. Where this dialog sits relative to
@@ -545,7 +552,7 @@ function DialogPanel({
           // `OverlayRoot` (see `src/overlay/stack.ts`) — never a number here.
           zIndex: Z_INDEX.raised,
         },
-        isClosing ? ZOOM_FADE_OUT : ZOOM_FADE_IN,
+        presentation === 'custom' ? undefined : isClosing ? ZOOM_FADE_OUT : ZOOM_FADE_IN,
         // Drives `height` (and `maxWidth`) only while a morph is in flight; at
         // rest it resolves to `height: 'auto'` — the natural sizing above. Placed
         // before `style` so a consumer's explicit size still wins.
@@ -554,7 +561,7 @@ function DialogPanel({
         { backgroundColor: 'transparent' },
       ]}
     >
-      <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten(style)?.borderRadius ?? 20} />
+      {presentation !== 'custom' && <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten(style)?.borderRadius ?? 20} />}
       <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
       {header ? (
         // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large

package/src/dialog/DialogHeader.tsx

@@ -466,7 +466,7 @@ function HeaderProgressBar({
       // The NAME, which the value props do not supply and which `progressbar`
       // never computes from contents: unnamed, the bar announced a bare "2 of
       // 5" with no subject. This one Bloom can answer itself — the bar always
-      // means the same thing — so unlike `Slider` and `DotGridMeter` it takes
+      // means the same thing — so unlike `Slider` it takes
       // no prop. `aria-valuetext` carries the reading, since the raw number is
       // announced as a percentage otherwise.
       accessibilityLabel={common.progress}

package/src/dialog/types.ts

@@ -170,6 +170,8 @@ export type DialogControlProps = DialogControlRefProps & {
 export type DialogContextProps = {
   close: DialogControlProps['close'];
   isWithinDialog: boolean;
+  /** Remains true until the imperative exit completes. */
+  isClosing?: boolean;
 };
 
 /**
@@ -229,6 +231,10 @@ export type DialogAction = {
  * be a responsive map that collapses to a bottom-sheet on narrow viewports.
  */
 export type DialogProps = React.PropsWithChildren<{
+  /** Content owns paint and motion; shared overlay, focus and dismissal remain. */
+  presentation?: 'default' | 'custom';
+  /** Custom presentation exit lifetime, in milliseconds. */
+  exitDuration?: number;
   /**
    * Imperative open/close handle from `useDialogControl()`. Optional — omit it
    * when driving the dialog with the controlled `open` prop instead.

package/src/hooks/use-accessible-name-warning.ts

@@ -3,8 +3,8 @@
  *
  * Most Bloom controls take their accessible name from what they render: a
  * `Button` reads its label, a menu row reads its title, a tab reads its text.
- * Three do not, because they draw a shape and no words — `Switch` (track and
- * thumb), `Slider` (track and knob) and `DotGridMeter` (dots). For those, the
+ * Two do not, because they draw a shape and no words — `Switch` (track and
+ * thumb), `Slider` (track and knob). For those, the
  * caller's `accessibilityLabel` is the ONLY route to a name, on either
  * platform: a caption sitting beside the control is a sibling element, and
  * neither React Native nor react-native-web associates the two.

package/src/index.ts

@@ -1969,8 +1969,6 @@ export type { LinkPreviewCardProps } from './link-preview';
 // Stat / profile widgets
 export { CompositionBar } from './composition-bar';
 export type { CompositionBarProps, CompositionCategory } from './composition-bar';
-export { DotGridMeter } from './dot-grid-meter';
-export type { DotGridMeterProps } from './dot-grid-meter';
 export { Meter, MeterRing, StatBar, meterFraction, meterValue, resolveMeterColors } from './stat-bar';
 export type {
   AnyMeterProps,
@@ -2132,3 +2130,8 @@ export * from './note-card';
 export * from './note-editor';
 export * from './outline-nav';
 export * from './tag-field';
+
+export * from './agent-avatar';
+export * from './agent-creator';
+export * from './project-board';
+export * from './multi-agent-chat';

package/src/index.web.ts

@@ -1974,8 +1974,6 @@ export type { LinkPreviewCardProps } from './link-preview';
 // Stat / profile widgets
 export { CompositionBar } from './composition-bar';
 export type { CompositionBarProps, CompositionCategory } from './composition-bar';
-export { DotGridMeter } from './dot-grid-meter';
-export type { DotGridMeterProps } from './dot-grid-meter';
 export { Meter, MeterRing, StatBar, meterFraction, meterValue, resolveMeterColors } from './stat-bar';
 export type {
   AnyMeterProps,
@@ -2137,3 +2135,8 @@ export * from './note-card';
 export * from './note-editor';
 export * from './outline-nav';
 export * from './tag-field';
+
+export * from './agent-avatar';
+export * from './agent-creator/index.web';
+export * from './project-board/index.web';
+export * from './multi-agent-chat/index.web';