@oxyhq/bloom 0.70.0 → 0.72.0

package/src/fonts/apply-font-faces.web.ts

@@ -3,7 +3,7 @@ import {
   blomusModernusBold,
   interVariable,
   geistMonoVariable,
-} from './font-data.web';
+} from './font-urls.web';
 import { fontFamilies } from './tokens';
 
 const STYLE_ID = 'bloom-fonts';
@@ -12,18 +12,16 @@ const STYLE_ID = 'bloom-fonts';
  * Inject @font-face rules and font CSS variables onto :root.
  *
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
- * stub — Metro cannot parse `.woff2` imports, so the file split keeps
- * the font payload out of the native bundle entirely. Idempotent: safe to
- * call multiple times; subsequent calls early-return after the
- * `<style id="bloom-fonts">` tag has been mounted. SSR-safe via the
- * `typeof document === 'undefined'` guard.
+ * stub — native loads its fonts through `useFonts(FONT_ASSETS)`, so the file
+ * split keeps the web font payload out of the native bundle entirely.
+ * Idempotent: safe to call multiple times; subsequent calls early-return
+ * after the `<style id="bloom-fonts">` tag has been mounted. SSR-safe via
+ * the `typeof document === 'undefined'` guard.
  *
- * The font URLs come from `./font-data.web`, a generated module that
- * embeds the woff2 bytes as base64 data URLs. Inlining (rather than
- * relying on bundler asset loaders for `.woff2`) means consumers do not
- * have to extend Metro's `assetExts` or add a webpack/Vite asset rule —
- * the published JS is self-contained. See `scripts/generate-font-data.mjs`
- * for the rationale and trade-offs.
+ * The URLs come from `./font-urls.web`, which imports the `.woff2` files so
+ * the consuming bundler emits them as separate, cacheable assets. See that
+ * module for the per-bundler details and for the one thing a consumer has to
+ * provide (Metro needs `woff2` in `assetExts`).
  */
 export function applyFontFaces(): void {
   if (typeof document === 'undefined') return;
@@ -32,10 +30,10 @@ export function applyFontFaces(): void {
   const style = document.createElement('style');
   style.id = STYLE_ID;
   style.textContent = `
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusRegular}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Inter'; src: url(${interVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Geist Mono'; src: url(${geistMonoVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url("${blomusModernusRegular}") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url("${blomusModernusBold}") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Inter'; src: url("${interVariable}") format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Geist Mono'; src: url("${geistMonoVariable}") format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
     :root {
       --bloom-font-display: ${fontFamilies.display};
       --bloom-font-sans: ${fontFamilies.sans};

package/src/fonts/font-assets.web.ts

@@ -2,8 +2,9 @@
 //
 // `useFonts()` is native-only — the web `FontLoader` (`FontLoader.tsx`) calls
 // `applyFontFaces()` instead, which injects the same four families as
-// `@font-face` rules from base64 data URLs (`apply-font-faces.web.ts` /
-// `font-data.web.ts`). So the map is empty by design, not by omission.
+// `@font-face` rules pointing at bundler-emitted `.woff2` URLs
+// (`apply-font-faces.web.ts` / `font-urls.web.ts`). So the map is empty by
+// design, not by omission.
 //
 // This file exists so `index.web.ts` can name its font-asset source
 // explicitly, exactly as it already does for `./apply-font-faces.web`. The

package/src/fonts/font-urls.web.ts

@@ -0,0 +1,30 @@
+// Web font URLs, resolved by whatever bundler is building the consuming app.
+//
+// WEB-ONLY. Each import below hands the `.woff2` to the app's asset pipeline,
+// which emits it as a standalone file and gives us back its URL:
+//
+//   - Metro (Expo web) rewrites the import to the exported asset path — its
+//     asset transformer emits a bare string module whenever the platform is
+//     `web`, so the imported value is the URL itself, not an asset id.
+//   - Vite, Rollup and webpack 5 resolve it through their own asset handling
+//     and return a content-hashed URL.
+//
+// Either way the browser fetches the four families alongside the JS and caches
+// them under their own URLs, instead of re-parsing ~310 KB of base64 out of the
+// entry bundle on every cold load. No consumer ever writes an asset filename
+// down, so a font swap here cannot leave a downstream app pointing at a file
+// that no longer exists.
+//
+// Metro does not carry `woff2` in its default `assetExts`, so a consumer
+// bundling for web with Metro has to register it; `@oxyhq/app-preset`'s Metro
+// base already does that for every Oxy app.
+//
+// Native never reaches this module. The default `apply-font-faces.ts` is a
+// no-op stub and `FontLoader.native.tsx` loads the `.ttf` variants through
+// `useFonts` instead, so no web font bytes enter a native bundle.
+import blomusModernusBold from './assets/BlomusModernus-Bold.woff2';
+import blomusModernusRegular from './assets/BlomusModernus-Regular.woff2';
+import geistMonoVariable from './assets/GeistMono-Variable.woff2';
+import interVariable from './assets/InterVariable.woff2';
+
+export { blomusModernusRegular, blomusModernusBold, interVariable, geistMonoVariable };

package/src/fonts/index.web.ts

@@ -6,9 +6,9 @@
 // of the box), so an extensionless specifier here would quietly fall through
 // to the default file.
 //
-// - `./apply-font-faces.web` performs the real `@font-face` injection using
-//   inlined base64 data URLs (see `font-data.web.ts`); the default
-//   `./apply-font-faces` is a no-op stub for native.
+// - `./apply-font-faces.web` performs the real `@font-face` injection against
+//   the `.woff2` URLs the consuming bundler emits (see `font-urls.web.ts`);
+//   the default `./apply-font-faces` is a no-op stub for native.
 // - `./font-assets.web` is an empty map. The native map is built from Metro
 //   asset `require()` calls, and importing it from an ES module throws
 //   `ReferenceError: require is not defined` during module evaluation — which

package/src/select/index.web.tsx

@@ -1,5 +1,14 @@
-import React, { createContext, useContext, useId, useMemo, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -7,6 +16,7 @@ import { Backdrop } from '../overlay';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { resolveDropdownPlacement } from '../overlay/dropdown-placement';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { RadioIndicator } from '../radio-indicator';
 import { useInteractionState } from '../hooks/useInteractionState';
@@ -30,6 +40,8 @@ import type {
 export { useSelectItemContext };
 
 const selectZIndex = createOverlayZIndex();
+const VIEWPORT_GUTTER = 8;
+const SELECT_OFFSET = 6;
 
 // ---------------------------------------------------------------------------
 // Context
@@ -39,6 +51,8 @@ type SelectContextValue = Pick<SelectProps, 'value' | 'onValueChange' | 'disable
   isOpen: boolean;
   open: () => void;
   close: () => void;
+  /** The trigger element, so `SelectContent` can position itself against it. */
+  triggerRef: React.RefObject<unknown>;
 };
 
 const SelectContext = createContext<SelectContextValue | null>(null);
@@ -58,6 +72,7 @@ function useSelectContext(): SelectContextValue {
 
 export function Select({ children, value, onValueChange, disabled }: SelectProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<unknown>(null);
 
   const ctx = useMemo<SelectContextValue>(
     () => ({
@@ -67,6 +82,7 @@ export function Select({ children, value, onValueChange, disabled }: SelectProps
       isOpen,
       open: () => setIsOpen(true),
       close: () => setIsOpen(false),
+      triggerRef,
     }),
     [value, onValueChange, disabled, isOpen],
   );
@@ -103,6 +119,7 @@ export function SelectTrigger({ children, label }: SelectTriggerProps) {
         pressed: false,
       },
       props: {
+        ref: ctx.triggerRef,
         onPress: ctx.open,
         onFocus,
         onBlur,
@@ -113,6 +130,7 @@ export function SelectTrigger({ children, label }: SelectTriggerProps) {
 
   return (
     <Pressable
+      ref={ctx.triggerRef as React.Ref<View>}
       onPress={ctx.open}
       onFocus={onFocus}
       onBlur={onBlur}
@@ -184,6 +202,58 @@ export function SelectContent<T>({
 }: SelectContentProps<T>) {
   const ctx = useSelectContext();
   const theme = useTheme();
+  const [position, setPosition] = useState<ViewStyle | null>(null);
+  // The mounted dropdown node, as STATE rather than a bare ref: positioning has
+  // to measure it, and `Portal` renders null on its first pass (it resolves its
+  // host in its own layout effect), so the node lands one render after `isOpen`
+  // flips. An effect keyed only on `isOpen` would measure nothing.
+  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);
+
+  const attachDropdown = useCallback((node: View | null) => {
+    setDropdownNode(node as unknown as HTMLElement | null);
+  }, []);
+
+  // Anchored to the trigger, left edges aligned, and never off-screen: sit below
+  // when it fits, flip above when it doesn't, clamp when neither. Before this the
+  // dropdown had no `top`/`left` at all, so it rendered at the `Portal` root's
+  // origin — the viewport's top-left corner — however far from its trigger.
+  useLayoutEffect(() => {
+    if (!ctx.isOpen || typeof window === 'undefined') return;
+
+    const triggerNode = ctx.triggerRef.current as HTMLElement | null;
+    if (!triggerNode?.getBoundingClientRect || !dropdownNode) return;
+
+    const updatePosition = () => {
+      const rect = triggerNode.getBoundingClientRect();
+      // Measured BEFORE `minWidth` is applied, so the final surface can only be
+      // wider than this — and a wider surface wraps less, so the measured height
+      // is an upper bound. Erring that way flips early in a tie, never late.
+      const surface = dropdownNode.getBoundingClientRect();
+      const width = Math.max(surface.width, rect.width);
+
+      setPosition({
+        position: WEB_POSITION_FIXED,
+        ...resolveDropdownPlacement({
+          anchor: rect,
+          size: { width, height: surface.height },
+          viewport: { width: window.innerWidth, height: window.innerHeight },
+          offset: SELECT_OFFSET,
+          gutter: VIEWPORT_GUTTER,
+          align: 'start',
+        }),
+        minWidth: width,
+      });
+    };
+
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [ctx.isOpen, ctx.triggerRef, dropdownNode]);
 
   if (!ctx.isOpen) return null;
 
@@ -195,6 +265,7 @@ export function SelectContent<T>({
         accessibilityLabel="Close selection"
       />
       <View
+        ref={attachDropdown}
         accessibilityRole="list"
         accessibilityLabel={label}
         style={[
@@ -206,6 +277,7 @@ export function SelectContent<T>({
             borderColor: theme.colors.borderLight,
             ...bloomShadowStyle('m'),
           },
+          position,
         ]}
       >
         {items.map((item, index) => (
@@ -222,7 +294,7 @@ export function SelectContent<T>({
 // SelectItem
 // ---------------------------------------------------------------------------
 
-export function SelectItem({ ref, value, children, style }: SelectItemProps) {
+export function SelectItem({ ref, value, label, children, style }: SelectItemProps) {
   const theme = useTheme();
   const ctx = useSelectContext();
   const {
@@ -243,6 +315,10 @@ export function SelectItem({ ref, value, children, style }: SelectItemProps) {
     <Pressable
       ref={ref}
       accessibilityRole="radio"
+      // The native fork has always applied this; web declared `label` and then
+      // dropped it, leaving every option a `role="radio"` with no accessible
+      // name for a screen reader to announce.
+      accessibilityLabel={label}
       accessibilityState={{ checked: isSelected }}
       onPress={() => {
         ctx.onValueChange?.(value);
@@ -344,7 +420,14 @@ const styles = StyleSheet.create({
     pointerEvents: 'auto',
   },
   dropdown: {
-    position: 'absolute',
+    // Fixed from the outset, not only once positioned: the `Portal` root is a
+    // block container, so a static child would stretch to the full viewport
+    // width and the pre-position measurement would under-read the height (less
+    // wrapping at a width the surface never actually has). A fixed box
+    // shrink-wraps to the same width it ends up with.
+    position: WEB_POSITION_FIXED,
+    top: 0,
+    left: 0,
     zIndex: selectZIndex.surface,
     borderRadius: 8,
     borderWidth: 1,

package/src/select/types.ts

@@ -23,6 +23,12 @@ export type TriggerChildProps = {
     pressed: boolean;
   };
   props: {
+    /**
+     * Attach this to the element the trigger actually renders. On web the
+     * dropdown is positioned against its measured rect; a trigger that drops
+     * it falls back to the viewport's top-left corner.
+     */
+    ref?: React.Ref<unknown>;
     onPress: () => void;
     onFocus: () => void;
     onBlur: () => void;