@oxy.so/bloom 4.4.0 → 4.6.0

package/src/loading/LoadingBase.tsx

@@ -0,0 +1,170 @@
+/**
+ * Everything `Loading` does that is the SAME on both platforms.
+ *
+ * The family forks for one reason: the `top` variant's motion. Native drives
+ * it with react-native-reanimated, whose worklets Babel plugin has no web
+ * equivalent — a static import of it breaks every web bundler, Vite, webpack
+ * and Metro-web alike — so web drives the same motion with CSS transitions.
+ * That is the whole of the difference. The `spinner` and `inline` variants,
+ * the size table, the variant dispatch and the stylesheet were byte-identical
+ * copies in both forks.
+ *
+ * So the two platform pieces are INJECTED rather than imported: `SpinnerIcon`
+ * (itself forked) and `TopLoading`. `bindLoading` is called once at module
+ * scope by each fork, never per render, so the component identities are
+ * stable — the same discipline as `bindAgentChat` and `bindAiChat`.
+ *
+ * NEUTRAL by construction: nothing this module reaches is platform-forked, so
+ * it resolves the same way in Metro, Vite, webpack, SSR and jest. (jest
+ * resolves no platform extensions at all, so logic that moved into a
+ * `.native.*` file would lose its coverage in silence.)
+ */
+import { normalizeBloomSize } from '../appearance/legacy';
+import { resolveBloomColors } from '../appearance/colors';
+import { useBloomAppearance } from '../appearance';
+import React, { memo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type {
+  LoadingProps,
+  SpinnerLoadingProps,
+  TopLoadingProps,
+  InlineLoadingProps,
+} from './types';
+
+/** Spinner diameter and label size per `size` token. Read by all three variants. */
+export const SIZE_CONFIG = {
+  xs: { spinner: 16, text: 12 },
+  sm: { spinner: 20, text: 13 },
+  md: { spinner: 24, text: 15 },
+  lg: { spinner: 44, text: 16 },
+} as const;
+
+/** The two platform pieces a fork supplies. */
+export interface LoadingPlatform {
+  /** Forked: react-native-svg on native, a DOM `<svg>` on web. */
+  SpinnerIcon: React.ComponentType<{ size?: number; color?: string; className?: string }>;
+  /** Forked: the `top` variant, the only one whose motion differs. */
+  TopLoading: React.FC<TopLoadingProps>;
+}
+
+export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
+  const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
+    size: sizeProp,
+    color,
+    tone: toneProp,
+    className,
+    text,
+    textStyle,
+    style,
+    showText = true,
+    iconSize,
+    spinnerIcon,
+    testID,
+  }) => {
+    const theme = useTheme();
+    const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+    const sizeConfig = SIZE_CONFIG[size];
+    const effectiveIconSize = iconSize ?? sizeConfig.spinner;
+    const spinnerColor = className ? 'currentColor' : (color ?? resolveBloomColors(theme.colors, tone, 'solid').background);
+    const textColor = color ?? theme.colors.textSecondary;
+
+    return (
+      <View style={[styles.container, style]} testID={testID}>
+        {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} className={className} />}
+        {showText && text && (
+          <Text
+            style={[
+              styles.text,
+              { color: textColor, fontSize: sizeConfig.text, marginTop: 8 },
+              textStyle,
+            ]}
+          >
+            {text}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const InlineLoading: React.FC<InlineLoadingProps> = ({
+    size: sizeProp,
+    color,
+    tone: toneProp,
+    text,
+    style,
+    textStyle,
+    spinnerIcon,
+    testID,
+  }) => {
+    const theme = useTheme();
+    const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+    const sizeConfig = SIZE_CONFIG[size];
+    const spinnerColor = color ?? resolveBloomColors(theme.colors, tone, 'solid').background;
+    const textColor = theme.colors.textSecondary;
+
+    return (
+      <View style={[styles.inlineContainer, style]} testID={testID}>
+        {spinnerIcon ?? <SpinnerIcon size={sizeConfig.spinner} color={spinnerColor} />}
+        {text && (
+          <Text
+            style={[
+              { color: textColor, fontSize: sizeConfig.text, marginLeft: 8 },
+              textStyle,
+            ]}
+          >
+            {text}
+          </Text>
+        )}
+      </View>
+    );
+  };
+
+  const LoadingComponent: React.FC<LoadingProps> = (props) => {
+    const variant = props.variant ?? 'spinner';
+
+    switch (variant) {
+      case 'top':
+        return <TopLoading {...(props as TopLoadingProps)} />;
+      case 'inline':
+        return <InlineLoading {...(props as InlineLoadingProps)} />;
+      case 'spinner':
+      default:
+        return <SpinnerLoading {...(props as SpinnerLoadingProps)} />;
+    }
+  };
+
+  const Loading = memo(LoadingComponent);
+  Loading.displayName = 'Loading';
+  return { Loading };
+}
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  text: {
+    textAlign: 'center',
+  },
+  topContainer: {
+    width: '100%',
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  topLoadingView: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  inlineContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/loading/index.web.ts

@@ -1,16 +1,8 @@
-// Web variant of the `./loading` barrel.
-//
-// The default barrel (`./index.ts`) re-exports from `./Loading` and
-// `./SpinnerIcon`, which statically import `react-native-reanimated` and
-// `react-native-svg`. Reanimated has no web build — its worklets Babel plugin
-// is native-only and importing it statically breaks every web bundler (Vite,
-// webpack, Metro-web). The web forks (`./Loading.web`, `./SpinnerIcon.web`)
-// render the same components with CSS keyframes/transitions and no native deps.
-//
-// Web bundlers select this file via the `"browser"` export condition in
-// `package.json`'s `exports['./loading']`; native bundlers fall through to the
-// React Native build above. Types are platform-agnostic, so they come straight
-// from `./types`.
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/loading/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 { Loading } from './Loading.web';
 export { SpinnerIcon } from './SpinnerIcon.web';
 export type {

package/src/media-flight/index.web.ts

@@ -1,12 +1,8 @@
-/**
- * The web barrel, which exists to NAME the `.web` siblings.
- *
- * Export conditions do not apply to relative specifiers, so a bundler that is
- * not Metro reaches `MediaFlightLayer.web.tsx` and `MediaFlightHost.web.tsx`
- * only because this file spells them out. Those two are the whole web fork of
- * this family: the layer that paints each shared media node once, and the host
- * that claims it. Everything else below is the same module on both platforms.
- */
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/media-flight/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 { MediaFlightLayer } from './MediaFlightLayer.web';
 export { MediaFlightHost } from './MediaFlightHost.web';
 export { MediaSurface, MediaPoster, EmptyMediaSurface } from './MediaSurface';

package/src/menubar/Menubar.tsx

@@ -1,160 +1,29 @@
 /**
- * `Menubar` — NATIVE. A row of triggers, each opening the same bottom sheet
- * `DropdownMenu` and `ContextMenu` present.
+ * `Menubar` — NATIVE: each menu opens the same bottom sheet `DropdownMenu` and
+ * `ContextMenu` present, because a phone has no room to hang a panel beside a
+ * control and every Bloom overlay resolving to one sheet is what makes the
+ * native surfaces feel like one system.
  *
- * The one genuinely new family in this port: Bloom had no menu bar. Its rows are
- * `floating/menu-rows`, published here under shadcn's `Menubar*` names, so a
- * ported call site keeps every part it wrote.
+ * The bar, the per-menu state and the trigger are identical on both platforms
+ * and live in `MenubarBase`. What forks is this file: the surface a menu opens
+ * into, and which sub-menu the rows get — INLINE on native, because a flyout
+ * needs a pointer.
+ *
+ * Bloom had no menu bar before this family; its rows are `floating/menu-rows`,
+ * published here under the `Menubar*` names so a call site keeps every part it
+ * wrote.
  */
-import React, { useMemo, useRef } from 'react';
-import type { View as RNView } from 'react-native';
+import React, { useMemo } from 'react';
 
 import { SheetShell } from '../dialog/SheetShell';
-import {
-  MENUBAR_CLASS,
-  MENUBAR_TRIGGER_CLASS,
-  MENUBAR_TRIGGER_OPEN_CLASS,
-  MENUBAR_TRIGGER_TEXT_CLASS,
-  MENU_TRIGGER_POPUP,
-} from '../floating/constants';
 import { MenuSurfaceProvider, type MenuSurfaceContextValue } from '../floating/context';
 import { createMenuRows } from '../floating/menu-rows';
 import { createInlineMenuSub } from '../floating/menu-sub-inline';
-import { cx } from '../floating/shared';
-import { TriggerSlot } from '../floating/TriggerSlot';
 import { useSheetOpenBridge } from '../floating/use-sheet-open-bridge';
-import { useControllableState } from '../hooks/use-controllable-state';
-import { StyledText, StyledView } from '../styles/styled-primitives';
-import { useMenuPalette } from '../floating/menu-palette';
-import { menuType } from '../floating/menu-type';
-import {
-  MenubarMenuProvider,
-  MenubarProvider,
-  useMenubar,
-  useMenubarMenu,
-} from './context';
-import type {
-  MenubarContentProps,
-  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. */}
-      <StyledView
-        role="menubar"
-        aria-label={label}
-        testID={testID}
-        className={cx(MENUBAR_CLASS, className)}
-      // `shadow-s` reaches WEB through the class; NATIVE takes the same role as
-      // an inline style, because `design-tokens/shadows` is platform-forked and
-      // its own contract is that a multi-layer `box-shadow` is not something to
-      // rely on NativeWind translating to RN elevation. On web the two agree, so
-      // whichever wins paints the same thing.
-        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 context = useMemo(
-    () => ({
-      open: bar.value === value,
-      setOpen: (next: boolean) => setValue(next ? value : undefined),
-      anchorRef,
-    }),
-    [bar.value, value, setValue],
-  );
+import { useMenubarMenu } from './context';
+import type { MenubarContentProps } from './types';
 
-  return <MenubarMenuProvider value={context}>{children}</MenubarMenuProvider>;
-}
-
-export function MenubarTrigger({
-  children,
-  asChild,
-  disabled,
-  label,
-  className,
-  style,
-  testID,
-}: MenubarTriggerProps) {
-  const menu = useMenubarMenu();
-  const palette = useMenuPalette();
-
-  // `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 — the same chrome the web
-  // fork draws, so the bar reads identically on both platforms.
-  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>
-  );
-}
+export { Menubar, MenubarMenu, MenubarTrigger } from './MenubarBase';
 
 export function MenubarContent({ children, label = 'Menu', style }: MenubarContentProps) {
   const menu = useMenubarMenu();

package/src/menubar/Menubar.web.tsx

@@ -1,160 +1,34 @@
 /**
- * `Menubar` — WEB. The bar is the same row of triggers; each menu is an anchored
- * panel from `floating/FloatingPanel` rather than a sheet.
+ * `Menubar` — WEB: each menu is an anchored panel from `floating/FloatingPanel`
+ * rather than a sheet.
+ *
+ * The bar, the per-menu state and the trigger are identical on both platforms
+ * and live in `MenubarBase`. What forks is this file: the surface a menu opens
+ * into, and which sub-menu the rows get — a FLYOUT here, which needs a pointer.
  *
  * `align="start"` and the trigger's own width as `minWidth` are what make a
  * menubar menu hang under its trigger the way a desktop menu bar does, rather
  * than centring like a popover.
  */
-import React, { useCallback, useMemo, useRef } from 'react';
-import type { View as RNView } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import type { View } from 'react-native';
 
 import {
   MENUBAR_ALIGN_OFFSET,
-  MENUBAR_CLASS,
   MENUBAR_MENU_MIN_WIDTH_CLASS,
   MENUBAR_SIDE_OFFSET,
-  MENUBAR_TRIGGER_CLASS,
-  MENUBAR_TRIGGER_OPEN_CLASS,
-  MENUBAR_TRIGGER_TEXT_CLASS,
-  MENU_TRIGGER_POPUP,
 } from '../floating/constants';
 import { MenuSurfaceProvider, type MenuSurfaceContextValue } from '../floating/context';
 import { FloatingPanel } from '../floating/FloatingPanel';
+import { hostElement, useMenuPanelKeys } from '../floating/menu-keyboard';
 import { createMenuRows } from '../floating/menu-rows';
 import { createFlyoutMenuSub } from '../floating/menu-sub-flyout';
 import { cx } from '../floating/shared';
-import { TriggerSlot } from '../floating/TriggerSlot';
 import { useAnchorRect } from '../floating/use-anchor-rect';
-import { useControllableState } from '../hooks/use-controllable-state';
-import { StyledText, StyledView } from '../styles/styled-primitives';
-import { useMenuPalette } from '../floating/menu-palette';
-import { menuType } from '../floating/menu-type';
-import {
-  MenubarMenuProvider,
-  MenubarProvider,
-  useMenubar,
-  useMenubarMenu,
-} from './context';
-import type {
-  MenubarContentProps,
-  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. */}
-      <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 context = useMemo(
-    () => ({
-      open: bar.value === value,
-      setOpen: (next: boolean) => setValue(next ? value : undefined),
-      anchorRef,
-    }),
-    [bar.value, value, setValue],
-  );
+import { useMenubarMenu } from './context';
+import type { MenubarContentProps } from './types';
 
-  return <MenubarMenuProvider value={context}>{children}</MenubarMenuProvider>;
-}
-
-export function MenubarTrigger({
-  children,
-  asChild,
-  disabled,
-  label,
-  className,
-  style,
-  testID,
-}: MenubarTriggerProps) {
-  const menu = useMenubarMenu();
-  const palette = useMenuPalette();
-
-  // `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.
-  // `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>
-  );
-}
+export { Menubar, MenubarMenu, MenubarTrigger } from './MenubarBase';
 
 export function MenubarContent({
   children,
@@ -180,9 +54,12 @@ export function MenubarContent({
     () => ({ close, presentation: 'dropdown' }),
     [close],
   );
+  const [panel, setPanel] = useState<View | null>(null);
+  useMenuPanelKeys(hostElement(panel), { open: menu.open, onTab: close, intent: menu.focusIntent });
 
   return (
     <FloatingPanel
+      panelRef={setPanel}
       open={menu.open}
       anchor={anchor}
       role="menu"