@oxy.so/bloom 4.4.0 → 4.6.0

package/src/menubar/MenubarBase.tsx

@@ -0,0 +1,170 @@
+/**
+ * The three `Menubar` parts that are the SAME on both platforms.
+ *
+ * A menubar forks in exactly one place — what a menu opens INTO. Native
+ * presents the bottom sheet every Bloom overlay resolves to; web anchors a
+ * `floating/FloatingPanel` under the trigger. The bar itself, the per-menu
+ * state and the trigger are identical, so they live here and each fork
+ * re-exports them rather than keeping a second copy that has to be edited
+ * twice.
+ *
+ * NEUTRAL by construction: everything this module reaches (`floating/*`,
+ * `hooks/*`, `styles/*`, `./context`, `./types`) is fork-free. That is not a
+ * detail — `web-fork-reachability.test.ts` only scans `.web` files, so a
+ * neutral module naming a forked target resolves to NATIVE in every bundler
+ * that is not Metro and no gate would report it.
+ */
+import React, { useMemo, useRef } from 'react';
+import type { View as RNView } from 'react-native';
+
+import {
+  MENUBAR_CLASS,
+  MENUBAR_TRIGGER_CLASS,
+  MENUBAR_TRIGGER_OPEN_CLASS,
+  MENUBAR_TRIGGER_TEXT_CLASS,
+  MENU_TRIGGER_POPUP,
+} from '../floating/constants';
+import { useMenuPalette } from '../floating/menu-palette';
+import { menuType } from '../floating/menu-type';
+import { cx } from '../floating/shared';
+import { TriggerSlot } from '../floating/TriggerSlot';
+import { useMenuFocusIntent, useMenuTriggerKeys } from '../floating/menu-keyboard';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { StyledText, StyledView } from '../styles/styled-primitives';
+import {
+  MenubarMenuProvider,
+  MenubarProvider,
+  useMenubar,
+  useMenubarMenu,
+} from './context';
+import type { MenubarMenuProps, MenubarProps, MenubarTriggerProps } from './types';
+
+export function Menubar({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  label = 'Menu bar',
+  className,
+  style,
+  testID,
+}: MenubarProps) {
+  const [openValue, setValue] = useControllableState<string | undefined>({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+  const context = useMemo(() => ({ value: openValue, setValue }), [openValue, setValue]);
+  const palette = useMenuPalette();
+  const barPaint = {
+    backgroundColor: palette.trigger.background,
+    borderColor: palette.trigger.border,
+    boxShadow: palette.trigger.shadow,
+  };
+
+  return (
+    <MenubarProvider value={context}>
+      {/* `shadow-s` — the bar is a raised control, not an overlay, so it takes
+          the lighter of Bloom's two elevation roles. It reaches WEB through the
+          class and NATIVE through `barPaint`, because `design-tokens/shadows`
+          is platform-forked and its contract is that a multi-layer
+          `box-shadow` is not something to rely on NativeWind translating to an
+          RN elevation. On web the two agree, so whichever wins paints the
+          same thing. */}
+      <StyledView
+        role="menubar"
+        aria-label={label}
+        testID={testID}
+        className={cx(MENUBAR_CLASS, className)}
+        style={[barPaint, style]}>
+        {children}
+      </StyledView>
+    </MenubarProvider>
+  );
+}
+
+export function MenubarMenu({ children, value }: MenubarMenuProps) {
+  const bar = useMenubar();
+  const anchorRef = useRef<RNView | null>(null);
+  const { setValue } = bar;
+  const focusIntent = useMenuFocusIntent();
+
+  const context = useMemo(
+    () => ({
+      open: bar.value === value,
+      setOpen: (next: boolean) => setValue(next ? value : undefined),
+      anchorRef,
+      focusIntent,
+    }),
+    [bar.value, value, setValue, focusIntent],
+  );
+
+  return <MenubarMenuProvider value={context}>{children}</MenubarMenuProvider>;
+}
+
+export function MenubarTrigger({
+  children,
+  asChild,
+  disabled,
+  label,
+  className,
+  style,
+  testID,
+}: MenubarTriggerProps) {
+  const menu = useMenubarMenu();
+  const palette = useMenuPalette();
+  // Web: Enter/Space/ArrowDown open into the first row, ArrowUp into the last,
+  // and focus returns here on close (`floating/menu-keyboard.ts`). Inert on
+  // native, where there is no DOM node to listen on.
+  useMenuTriggerKeys(menu.anchorRef, {
+    open: menu.open,
+    setOpen: menu.setOpen,
+    disabled,
+    intent: menu.focusIntent,
+  });
+
+  // `flex items-center rounded-md px-2 py-1.5`, plus `bg-accent` while its menu
+  // is open, and `text-sm font-medium` for the label. A menubar trigger is a
+  // BUTTON with chrome of its own, not a bare hit box — leaving it unstyled is
+  // why a Bloom menubar read as loose text against a pill-per-menu bar. The
+  // same chrome on both platforms, so the bar reads identically. `asChild`
+  // still hands the whole thing to the caller.
+  const trigger = (
+    <StyledView
+      className={cx(
+        MENUBAR_TRIGGER_CLASS,
+        menu.open && MENUBAR_TRIGGER_OPEN_CLASS,
+        className,
+      )}
+      style={{ backgroundColor: menu.open ? palette.rowHighlight : 'transparent' }}>
+      {typeof children === 'string' ? (
+        <StyledText
+          className={MENUBAR_TRIGGER_TEXT_CLASS}
+          // `text-body-medium text-text-primary`, in Inter.
+          style={[menuType('body-medium'), { color: palette.text }]}>
+          {children}
+        </StyledText>
+      ) : (
+        children
+      )}
+    </StyledView>
+  );
+
+  return (
+    <TriggerSlot
+      asChild={asChild}
+      anchorRef={menu.anchorRef}
+      style={style}
+      testID={testID}
+      handle={{
+        onPress: () => menu.setOpen(!menu.open),
+        disabled,
+        accessibilityLabel: label,
+        accessibilityRole: 'button',
+        'aria-haspopup': MENU_TRIGGER_POPUP,
+        'aria-expanded': menu.open,
+      }}>
+      {asChild ? children : trigger}
+    </TriggerSlot>
+  );
+}

package/src/menubar/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/menubar/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export {
   Menubar,
   MenubarMenu,

package/src/motion/index.web.ts

@@ -1,8 +1,8 @@
-/**
- * Web variant of the `motion` barrel. Only the three layout-animation presets
- * fork — see `motion.web.ts` for why. `ScreenTransition` is universal: it already
- * branches on `Platform.OS` internally.
- */
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/motion/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion.web';
 export { ScreenTransition } from './ScreenTransition';
 export type { ScreenTransitionProps, ScreenTransitionDirection } from './types';

package/src/page-header/PageHeader.tsx

@@ -16,6 +16,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
+import { useHeaderDockContext } from '../layout/header-dock';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useScreenContext } from '../screen/context';
 import { Button } from '../button';
@@ -161,7 +162,16 @@ function PageHeaderComponent({
   // the content reads it back. Measured rather than computed: a second title
   // line, an enlarged font or a notch all move it, and every one of those is a
   // case a constant was written to survive and does not.
-  useClaimTopEdge(overlay ? height : 0);
+  const dock = useHeaderDockContext();
+  const dockProgress = dock?.progress;
+  useClaimTopEdge(overlay || placement === 'overlap' || dock ? height : 0);
+  useEffect(() => {
+    if (!dock) return;
+    dock.headerHeight.value = height;
+    dock.overlay.value = overlay || placement === 'overlap';
+    dock.setOverlaps(overlay || placement === 'overlap');
+    return () => { dock.headerHeight.value = 0; };
+  }, [dock, height, overlay, placement]);
 
   const paint = useMemo(() => {
     return {
@@ -181,8 +191,8 @@ function PageHeaderComponent({
   const screen = useScreenContext();
   const contextScrollY = useScrollOffset();
   const internalScrollY = useSharedValue(0);
-  const scrollY = externalScrollY ?? screen?.scrollY ?? contextScrollY ?? internalScrollY;
-  const followsWindow = !externalScrollY && !screen && !contextScrollY;
+  const scrollY = externalScrollY ?? dock?.scrollY ?? screen?.scrollY ?? contextScrollY ?? internalScrollY;
+  const followsWindow = !externalScrollY && !dock && !screen && !contextScrollY;
 
   useEffect(() => {
     if (!isWeb || !followsWindow || typeof window === 'undefined') return undefined;
@@ -196,12 +206,12 @@ function PageHeaderComponent({
 
   const threshold = Math.max(1, Number.isFinite(scrollThreshold) ? scrollThreshold : DEFAULT_THRESHOLD);
   const revealOffset = Math.max(0, Number.isFinite(titleRevealOffset) ? titleRevealOffset : 0);
-  const [titleHidden, setTitleHidden] = useState(() => titleReveal === 'onScroll' && scrollY.value <= revealOffset);
-  useEffect(() => { setTitleHidden(titleReveal === 'onScroll' && scrollY.value <= revealOffset); }, [titleReveal, scrollY, revealOffset]);
+  const [titleHidden, setTitleHidden] = useState(() => (titleReveal === 'onDock' ? (dockProgress?.value ?? 0) <= 0 : titleReveal === 'onScroll' && scrollY.value <= revealOffset));
+  useEffect(() => { setTitleHidden((titleReveal === 'onDock' ? (dockProgress?.value ?? 0) <= 0 : titleReveal === 'onScroll' && scrollY.value <= revealOffset)); }, [titleReveal, scrollY, revealOffset, dockProgress]);
   useAnimatedReaction(
-    () => titleReveal === 'onScroll' && scrollY.value <= revealOffset,
+    () => (titleReveal === 'onDock' ? (dockProgress?.value ?? 0) <= 0 : titleReveal === 'onScroll' && scrollY.value <= revealOffset),
     (hidden, previous) => { if (hidden !== previous) runOnJS(setTitleHidden)(hidden); },
-    [titleReveal, scrollY, revealOffset, setTitleHidden],
+    [titleReveal, scrollY, revealOffset, setTitleHidden, dockProgress],
   );
 
   const shadowStyle = useAnimatedStyle(() => ({
@@ -215,13 +225,13 @@ function PageHeaderComponent({
   }), [scrollY, threshold, transparent]);
 
   const scrimStyle = useAnimatedStyle(() => ({
-    opacity:
+    opacity: (1 - (dockProgress?.value ?? 0)) * (
       scrim === 'always'
         ? 1
         : scrim === 'none'
           ? 0
-          : interpolate(scrollY.value, [0, threshold], [0, 1], Extrapolation.CLAMP),
-  }), [scrollY, threshold, scrim]);
+          : interpolate(scrollY.value, [0, threshold], [0, 1], Extrapolation.CLAMP)),
+  }), [scrollY, threshold, scrim, dockProgress]);
 
   // Separate from the background's: a header can be transparent and still name
   // its screen, and one over a hero photo can do the opposite.
@@ -229,8 +239,8 @@ function PageHeaderComponent({
     opacity:
       titleReveal === 'always'
         ? 1
-        : Math.min(1, Math.max(0, (scrollY.value - revealOffset) / threshold)),
-  }), [scrollY, threshold, titleReveal, revealOffset]);
+        : titleReveal === 'onDock' ? (dockProgress?.value ?? 0) : Math.min(1, Math.max(0, (scrollY.value - revealOffset) / threshold)),
+  }), [scrollY, threshold, titleReveal, revealOffset, dockProgress]);
 
   const borderStyle = useAnimatedStyle(() => ({
     opacity:
@@ -342,6 +352,7 @@ function PageHeaderComponent({
           transitionProperty: 'top', transitionDuration: 'var(--bloom-panel-inset-duration, 0ms)', transitionTimingFunction: 'ease-in-out' }
       : null;
 
+  const dockFillStyle = useAnimatedStyle(() => ({ opacity: dockProgress?.value ?? 0 }), [dockProgress]);
   const chrome = floating ? (
     <Animated.View
       // A PROP: react-native-web resolves `none` from the prop path only, and
@@ -407,10 +418,13 @@ function PageHeaderComponent({
         { paddingTop: padTop },
         overlay ? [styles.overlay, { zIndex: Z_INDEX.floating }] : null,
         containerWeb,
+        placement === 'overlap' ? { marginBottom: -height, zIndex: Z_INDEX.floating } : null,
         style,
       ]}
     >
       {chrome}
+      {floating && dock ? <Animated.View pointerEvents="none" testID={testID ? `${testID}-docked-fill` : undefined}
+        style={[StyleSheet.absoluteFill, {backgroundColor: surfaceFill}, dockFillStyle]} /> : null}
       <View
         style={[styles.bar, { paddingLeft: sideInset, paddingRight: sideInset }]}
         pointerEvents={floating ? 'box-none' : undefined}

package/src/page-header/types.ts

@@ -30,11 +30,14 @@ export type PageHeaderPresentation = 'floating' | 'bar';
  * at the top of the container and scrolls under the islands. The header then
  * CLAIMS its measured height on `layout/top-edge`, and the content reads it
  * with `useTopEdgeInset()` so its first item is not born underneath. This is
- * the placement the floating presentation was designed for; the two are
- * separate props because a floating header above a fixed panel is also a real
- * arrangement.
+ * placement the floating presentation was designed for.
+ *
+ * `overlap` keeps document stickiness while allowing the following hero to
+ * start behind the measured header; native places it before the list.
+ * Placement and presentation remain independent: a floating header above a
+ * fixed panel is also a supported arrangement.
  */
-export type PageHeaderPlacement = 'inline' | 'overlay';
+export type PageHeaderPlacement = 'inline' | 'overlay' | 'overlap';
 
 /**
  * The bottom separator: `auto` fades it in once the page has scrolled past
@@ -60,13 +63,14 @@ export type PageHeaderScrim = 'auto' | 'always' | 'none';
  *
  * `always` (default) is the ordinary screen header. `onScroll` holds the title
  * back and fades it in with the scrim — the shape a header over a hero photo
- * wants, where the photo already names the screen.
+ * wants, where the photo already names the screen. `onDock` uses the paired
+ * StickySection arrival instead, inside HeaderDockProvider.
  *
  * It is a prop of its own rather than a side effect of the background, because
  * the two are different questions and conflating them is how every header that
  * turned transparent also lost its title.
  */
-export type PageHeaderTitleReveal = 'always' | 'onScroll';
+export type PageHeaderTitleReveal = 'always' | 'onScroll' | 'onDock';
 
 export interface PageHeaderProps {
   /** A string renders as the heading; a node renders as-is (and owns its own semantics). */

package/src/popover/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/popover/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { Popover, PopoverTrigger, PopoverContent } from './Popover.web';
 export {
   PopoverHeader,

package/src/popover/parts.tsx

@@ -6,25 +6,41 @@
  * header/footer `px-2` is measured against — 18px from the panel edge on every
  * side ("panel p-2.5 + row px-2").
  *
- *   PopoverHeader       flex items-center gap-2 px-2 pt-1         (dashboard team menu)
+ *   PopoverHeader       flex items-center gap-2 px-2 pt-1         (sidebar team menu)
  *   PopoverTitle        text-body-medium text-text-primary        (secondary: group label)
  *   PopoverDescription  text-body-regular text-text-secondary
- *   PopoverFooter       flex items-center gap-3 px-2 pb-2         (user menu actions)
+ *   PopoverFooter       flex items-center gap-3 px-2 pb-2         (sidebar user menu actions)
  *   PopoverSeparator    -mx-2.5 my-2.5 h-px bg-border-button-default
  *
  * Popovers have no close button and no arrow, so neither is a part.
  *
- * Colours are resolved inline from `menu-palette.ts`; a text colour default is
- * applied only when the caller passes no `className`, so a `text-*` utility is
- * never outranked (AGENTS.md, "Style and `className`").
+ * ── HOW A CALLER'S CLASS STILL WINS ─────────────────────────────────────────
+ *
+ * Every default here is INLINE, because the colours are ramp stops that exist
+ * as no CSS variable and the geometry has to agree with them. But an inline
+ * style beats ANY class on web, so a naive inline default silently outranks
+ * whatever the caller passes: `<PopoverSeparator className="bg-red-500" />`
+ * painted the palette colour, and `<PopoverHeader className="px-4" />` kept
+ * its 8px.
+ *
+ * So each part omits exactly the properties the caller's utilities NAME, using
+ * the same token scan the panel uses (`classChromeOverrides` in `surface.ts`).
+ * The parts previously used an all-or-nothing guard instead — drop the colour
+ * default if ANY `className` is present — which failed in the other direction:
+ * `<PopoverTitle className="mt-1">` lost its colour entirely.
+ *
+ * The trade-off is real and the panel already made it: on a web build whose
+ * Tailwind/NativeWind pipeline is not wired (`AGENTS.md`, "Consumer web CSS
+ * pipeline"), a named property falls back to NOTHING rather than to the
+ * default. A caller who names it is asking to own it.
  */
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
 
 import { useMenuPalette } from '../floating/menu-palette';
 import { StyledView } from '../styles/styled-primitives';
 import { Text } from '../typography';
-import { POPOVER_PADDING } from './surface';
+import { classChromeOverrides, POPOVER_PADDING, type PopoverChromeKey } from './surface';
 import type {
   PopoverDescriptionProps,
   PopoverFooterProps,
@@ -33,9 +49,47 @@ import type {
   PopoverTitleProps,
 } from './types';
 
+/**
+ * `base` minus the properties the caller's `className` claims.
+ *
+ * It walks BASE, not the map: a property with no chrome key is one no utility
+ * can name, so it is always kept. Walking the map instead would silently drop
+ * whatever was added to a part's stylesheet without being classified — the
+ * failure would be a missing default, with nothing to report it.
+ */
+function kept(base: ViewStyle, owned: ReadonlySet<PopoverChromeKey>): ViewStyle {
+  if (owned.size === 0) return base;
+  const out: ViewStyle = {};
+  for (const [property, value] of Object.entries(base)) {
+    const key = PROPERTY_KEY[property];
+    if (key === undefined || !owned.has(key)) {
+      Object.assign(out, { [property]: value });
+    }
+  }
+  return out;
+}
+
+/** Which chrome key each style property belongs to. */
+const PROPERTY_KEY: Record<string, PopoverChromeKey | undefined> = {
+  flexDirection: 'flexDirection',
+  alignItems: 'alignItems',
+  gap: 'gap',
+  paddingLeft: 'paddingLeft',
+  paddingRight: 'paddingRight',
+  paddingTop: 'paddingTop',
+  paddingBottom: 'paddingBottom',
+  marginLeft: 'marginLeft',
+  marginRight: 'marginRight',
+  marginTop: 'marginTop',
+  marginBottom: 'marginBottom',
+  height: 'height',
+  backgroundColor: 'background',
+};
+
 export function PopoverHeader({ leading, children, className, style, testID }: PopoverHeaderProps) {
+  const owned = classChromeOverrides(className);
   return (
-    <StyledView className={className} style={[styles.header, style]} testID={testID}>
+    <StyledView className={className} style={[kept(styles.header, owned), style]} testID={testID}>
       {leading ? <View style={styles.leading}>{leading}</View> : null}
       <View style={styles.headerText}>{children}</View>
     </StyledView>
@@ -57,7 +111,7 @@ export function PopoverTitle({
       variant="body-medium"
       numberOfLines={numberOfLines}
       className={className}
-      style={[className ? null : { color }, style]}
+      style={[classChromeOverrides(className).has('color') ? null : { color }, style]}
       testID={testID}>
       {children}
     </Text>
@@ -77,7 +131,12 @@ export function PopoverDescription({
       variant="body-regular"
       numberOfLines={numberOfLines}
       className={className}
-      style={[className ? null : { color: palette.textSecondary }, style]}
+      style={[
+        classChromeOverrides(className).has('color')
+          ? null
+          : { color: palette.textSecondary },
+        style,
+      ]}
       testID={testID}>
       {children}
     </Text>
@@ -85,8 +144,9 @@ export function PopoverDescription({
 }
 
 export function PopoverFooter({ children, className, style, testID }: PopoverFooterProps) {
+  const owned = classChromeOverrides(className);
   return (
-    <StyledView className={className} style={[styles.footer, style]} testID={testID}>
+    <StyledView className={className} style={[kept(styles.footer, owned), style]} testID={testID}>
       {children}
     </StyledView>
   );
@@ -94,12 +154,16 @@ export function PopoverFooter({ children, className, style, testID }: PopoverFoo
 
 export function PopoverSeparator({ className, style, testID }: PopoverSeparatorProps) {
   const palette = useMenuPalette();
+  const owned = classChromeOverrides(className);
   return (
     <StyledView
       // Decorative: the sections it divides are announced on their own.
       aria-hidden
       className={className}
-      style={[styles.separator, { backgroundColor: palette.border }, style]}
+      style={[
+        kept({ ...styles.separator, backgroundColor: palette.border }, owned),
+        style,
+      ]}
       testID={testID}
     />
   );

package/src/popover/surface.ts

@@ -1,9 +1,8 @@
 /**
  * The popover PANEL — Bloom's one floating surface, resolved to inline style.
  *
- * Every floating panel (`dropdown/menu-styles.ts`'s `MENU_POPOVER_SURFACE`, the
- * dashboard team/user menus, the calendar inbox menu, the ai-chat menus) spells
- * the same class string:
+ * Every floating panel in the fleet — the sidebar team and user menus, the
+ * calendar inbox menu, the ai-chat menus — spells the same class string:
  *
  *   w-[266px] max-w-[calc(100vw-32px)] overflow-y-auto
  *   rounded-2xl border border-border-button-default
@@ -32,7 +31,7 @@
 import type { MenuPalette } from '../floating/menu-palette';
 import type { WebCssStyle } from '../styles/web-view-style';
 
-/** `w-[266px]` — `MENU_POPOVER_WIDTH`. */
+/** `w-[266px]` — the one panel width every floating surface shares. */
 export const POPOVER_WIDTH = 266;
 /** `rounded-2xl`. */
 export const POPOVER_RADIUS = 16;
@@ -46,36 +45,91 @@ export const POPOVER_SIDE_OFFSET = 8;
 export type PopoverChromeKey =
   | 'width'
   | 'maxWidth'
-  | 'padding'
+  | 'paddingTop'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingRight'
   | 'radius'
   | 'borderWidth'
   | 'borderColor'
   | 'background'
   | 'shadow'
-  | 'overflow';
+  | 'overflow'
+  // The rest are the PANEL PARTS' chrome (`parts.tsx`). The panel itself sets
+  // no default for any of them, so `resolvePopoverSurfaceStyle` ignores them.
+  | 'color'
+  | 'gap'
+  | 'marginTop'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'marginRight'
+  | 'height'
+  | 'flexDirection'
+  | 'alignItems';
 
 const BORDER_WIDTH = /^border(-[xytrblse])?(-\d+(\.\d+)?|-\[[^\]]+px\])?$/;
 
+/**
+ * The sides a spacing utility's axis letter claims. `p-4` has no letter and
+ * claims all four; `px`/`py` are the pairs; `pt`/`pb`/`pl`/`pr` are single
+ * sides. `ps`/`pe` are the LOGICAL start and end — one side each, not the
+ * pair — which react-native-web resolves to left and right in an LTR
+ * document. Treating them as the pair would drop a default the caller never
+ * asked to own.
+ */
+function sidesOf(letter: string | undefined, property: 'padding' | 'margin'): PopoverChromeKey[] {
+  const sides =
+    letter === undefined ? ['Top', 'Bottom', 'Left', 'Right']
+    : letter === 'x' ? ['Left', 'Right']
+    : letter === 'y' ? ['Top', 'Bottom']
+    : letter === 't' ? ['Top']
+    : letter === 'b' ? ['Bottom']
+    : letter === 'l' || letter === 's' ? ['Left']
+    : letter === 'r' || letter === 'e' ? ['Right']
+    : [];
+  return sides.map((side) => `${property}${side}` as PopoverChromeKey);
+}
+
 /**
  * Which chrome properties a caller's utility classes set. Variants (`dark:`,
  * `md:`, `hover:`), the important `!` and a negative `-` are stripped first, so
  * `md:!p-0` counts as padding.
+ *
+ * Padding and margin are claimed PER SIDE, because the utilities are: `px-4`
+ * names left and right and says nothing about the top, so a part that also
+ * sets `paddingTop` must keep it. Treating them as one key dropped a header's
+ * `pt-1` for a caller who only asked for wider sides.
+ *
+ * `text-*` is counted as a COLOUR, including the size steps (`text-sm`). That
+ * is deliberately imprecise: telling `text-sm` from `text-red-500` means
+ * knowing the consumer's palette, and the alternative the parts used before
+ * this — drop the colour default whenever ANY `className` is passed — is
+ * strictly worse, since it loses the colour to an unrelated `mt-1`.
  */
 export function classChromeOverrides(className?: string): ReadonlySet<PopoverChromeKey> {
   const keys = new Set<PopoverChromeKey>();
   if (!className) return keys;
+  let spacing: RegExpExecArray | null;
   for (const raw of className.split(/\s+/)) {
     if (!raw) continue;
     const token = raw.slice(raw.lastIndexOf(':') + 1).replace(/^!/, '').replace(/^-/, '');
     if (/^(w|size)-/.test(token)) keys.add('width');
     else if (/^max-w-/.test(token)) keys.add('maxWidth');
-    else if (/^p[xytrblse]?-/.test(token)) keys.add('padding');
+    else if ((spacing = /^([pm])([xytrbles])?-/.exec(token))) {
+      const property = spacing[1] === 'p' ? 'padding' : 'margin';
+      for (const key of sidesOf(spacing[2], property)) keys.add(key);
+    }
     else if (/^rounded(-|$)/.test(token)) keys.add('radius');
     else if (BORDER_WIDTH.test(token)) keys.add('borderWidth');
     else if (/^border-/.test(token)) keys.add('borderColor');
     else if (/^bg-/.test(token)) keys.add('background');
     else if (/^shadow(-|$)/.test(token)) keys.add('shadow');
     else if (/^overflow-/.test(token)) keys.add('overflow');
+    else if (/^text-/.test(token)) keys.add('color');
+    else if (/^gap(-|$)/.test(token)) keys.add('gap');
+    else if (/^h-/.test(token)) keys.add('height');
+    else if (/^flex-(row|col)/.test(token)) keys.add('flexDirection');
+    else if (/^items-/.test(token)) keys.add('alignItems');
   }
   return keys;
 }
@@ -96,14 +150,13 @@ export function resolvePopoverSurfaceStyle(
   if (!overridden.has('maxWidth') && viewportWidth !== undefined) {
     style.maxWidth = Math.max(0, viewportWidth - POPOVER_VIEWPORT_INSET);
   }
-  if (!overridden.has('padding')) {
-    // Longhands: a caller's `style` override of one side must not lose to a
-    // shorthand react-native-web ranks above it (AGENTS.md, "Style").
-    style.paddingTop = POPOVER_PADDING;
-    style.paddingBottom = POPOVER_PADDING;
-    style.paddingLeft = POPOVER_PADDING;
-    style.paddingRight = POPOVER_PADDING;
-  }
+  // Longhands, one side at a time: a caller's `style` override of one side must
+  // not lose to a shorthand react-native-web ranks above it (AGENTS.md,
+  // "Style"), and a caller who writes `px-4` is claiming the sides, not the top.
+  if (!overridden.has('paddingTop')) style.paddingTop = POPOVER_PADDING;
+  if (!overridden.has('paddingBottom')) style.paddingBottom = POPOVER_PADDING;
+  if (!overridden.has('paddingLeft')) style.paddingLeft = POPOVER_PADDING;
+  if (!overridden.has('paddingRight')) style.paddingRight = POPOVER_PADDING;
   if (!overridden.has('radius')) style.borderRadius = POPOVER_RADIUS;
   if (!overridden.has('borderWidth')) style.borderWidth = 1;
   if (!overridden.has('borderColor')) style.borderColor = palette.border;

package/src/portal/index.web.ts

@@ -1,5 +1,10 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/portal/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export {
-  Portal,
   PortalProvider,
   PortalOutlet,
+  Portal,
 } from './Portal.web';

package/src/progressive-blur/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/progressive-blur/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export type { ProgressiveBlurProps } from './types';
 export {
   ProgressiveBlur,

package/src/scroll/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/scroll/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { ScrollRestorationProvider } from './context';
 export { useScrollRestoration } from './use-scroll-restoration.web';