@oxyhq/bloom 0.87.0 → 0.88.0

package/src/dialog/Dialog.stories.tsx

@@ -85,10 +85,47 @@ function ThreeActionDemo() {
   );
 }
 
+/**
+ * The side-sheet placement, which is a DIFFERENT web surface from the centered
+ * card: it resolves `SheetSurface` in `Dialog.web.tsx`, whose entry animation is
+ * a CSS transition handed to the backdrop layers rather than a shared value.
+ *
+ * It needs its own story because that difference is exactly what broke. The
+ * layers used to be reanimated components, and on web reanimated routes a style
+ * carrying `transitionProperty` into its CSS transitions manager, which writes
+ * to `ref.style` — undefined on expo-blur's web `BlurView`, whose ref is a
+ * `setNativeProps`-only handle. Opening the sheet threw before it painted. Only
+ * a real browser sees it: jest mocks both packages, so the whole suite passed.
+ */
+function SideSheetDemo({ placement }: { placement: 'left' | 'right' }) {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Open {placement} sheet</Button>
+      <Dialog control={control} placement={placement} title="Store menu">
+        <View style={{ gap: 12 }}>
+          <Text>An anchored drawer, blurred and dimmed behind.</Text>
+          <Button variant="secondary" onPress={() => control.close()}>
+            Done
+          </Button>
+        </View>
+      </Dialog>
+    </>
+  );
+}
+
 export const Basic: Story = {
   render: () => <DeclarativeDemo />,
 };
 
+export const SideSheetLeft: Story = {
+  render: () => <SideSheetDemo placement="left" />,
+};
+
+export const SideSheetRight: Story = {
+  render: () => <SideSheetDemo placement="right" />,
+};
+
 export const CustomChildren: Story = {
   render: () => <CustomChildrenDemo />,
 };

package/src/dialog/Dialog.web.tsx

@@ -25,6 +25,7 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Backdrop, OverlayRoot } from '../overlay';
 import { Portal } from '../portal/index.web';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
@@ -106,12 +107,7 @@ const DIALOG_STYLE_ID = 'bloom-dialog-web-css';
 
 function useDialogCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(DIALOG_STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = DIALOG_STYLE_ID;
-    style.textContent = BLOOM_DIALOG_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(DIALOG_STYLE_ID, BLOOM_DIALOG_CSS);
   }, []);
 }
 

package/src/fab/Fab.web.tsx

@@ -10,6 +10,7 @@ import React, {
 
 import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
 import type { FabPlacement, FabProps, FabSize, FabVariant } from './types';
 
@@ -103,12 +104,7 @@ const BLOOM_FAB_CSS = `
 
 function useFabCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.textContent = BLOOM_FAB_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(STYLE_ID, BLOOM_FAB_CSS);
   }, []);
 }
 

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

@@ -1,3 +1,4 @@
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import {
   blomusModernusRegular,
   blomusModernusBold,
@@ -14,9 +15,11 @@ const STYLE_ID = 'bloom-fonts';
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
  * 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.
+ * Idempotent: safe to call multiple times; `adoptStyleSheet` keys the sheet by
+ * id, so repeat calls re-parse nothing. SSR-safe via its `typeof document`
+ * guard. `BloomThemeProvider` calls this on every mount by default, which is
+ * why it also has to survive a page whose CSP forbids inline styles — see
+ * `styles/adopt-style-sheet.ts`.
  *
  * The URLs come from `./font-urls.web`, which imports the `.woff2` files so
  * the consuming bundler emits them as separate, cacheable assets. See that
@@ -24,12 +27,9 @@ const STYLE_ID = 'bloom-fonts';
  * provide (Metro needs `woff2` in `assetExts`).
  */
 export function applyFontFaces(): void {
-  if (typeof document === 'undefined') return;
-  if (document.getElementById(STYLE_ID)) return;
-
-  const style = document.createElement('style');
-  style.id = STYLE_ID;
-  style.textContent = `
+  adoptStyleSheet(
+    STYLE_ID,
+    `
     @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; }
@@ -39,6 +39,6 @@ export function applyFontFaces(): void {
       --bloom-font-sans: ${fontFamilies.sans};
       --bloom-font-mono: ${fontFamilies.mono};
     }
-  `;
-  document.head.appendChild(style);
+  `,
+  );
 }

package/src/frosted-icon-button/FrostedIconButton.web.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 
 import { useTheme } from '../theme/use-theme';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { flattenWebStyle } from '../styles/flatten-web-style';
 import {
   applyIconColor,
@@ -74,12 +75,7 @@ const BLOOM_FROSTED_ICON_BUTTON_CSS = `
 
 function useFrostedIconButtonCss(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(STYLE_ID)) return;
-    const style = document.createElement('style');
-    style.id = STYLE_ID;
-    style.textContent = BLOOM_FROSTED_ICON_BUTTON_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(STYLE_ID, BLOOM_FROSTED_ICON_BUTTON_CSS);
   }, []);
 }
 

package/src/loading/SpinnerIcon.web.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 
 interface SpinnerIconProps {
@@ -72,12 +73,7 @@ const SPIN_STYLE: WebCssStyle = {
 
 function useKeyframes(): void {
   useEffect(() => {
-    if (typeof document === 'undefined') return;
-    if (document.getElementById(KEYFRAMES_ID)) return;
-    const style = document.createElement('style');
-    style.id = KEYFRAMES_ID;
-    style.textContent = BLOOM_SPINNER_CSS;
-    document.head.appendChild(style);
+    adoptStyleSheet(KEYFRAMES_ID, BLOOM_SPINNER_CSS);
   }, []);
 }
 

package/src/overlay/index.tsx

@@ -225,6 +225,111 @@ export interface BackdropProps {
   testID?: string;
 }
 
+interface BackdropLayerProps {
+  blurIntensity: number;
+  blurTint: 'light' | 'dark' | 'default';
+  dimColor: string;
+  dimOpacity: number;
+  /** Opacity the caller asked for, already lifted off the press target. */
+  staticOpacity: number;
+  layerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Layers fading under a shared value. Reanimated owns the opacity on both, so
+ * the fade runs off the JS thread and the caller never has to animate an
+ * ancestor (which would erase the blur — see `BackdropProps['style']`).
+ */
+function AnimatedBackdropLayers({
+  progress,
+  blurIntensity,
+  blurTint,
+  dimColor,
+  dimOpacity,
+  staticOpacity,
+  layerStyle,
+}: BackdropLayerProps & { progress: SharedValue<number> }) {
+  // The fade lives on each LAYER, never on their shared ancestor.
+  const blurFade = useAnimatedStyle(
+    () => ({ opacity: progress.value * staticOpacity }),
+    [progress, staticOpacity],
+  );
+  const dimFade = useAnimatedStyle(
+    () => ({ opacity: progress.value * staticOpacity * dimOpacity }),
+    [progress, staticOpacity, dimOpacity],
+  );
+
+  return (
+    <>
+      {blurIntensity > 0 ? (
+        <AnimatedBlurView
+          intensity={blurIntensity}
+          tint={blurTint}
+          // Android's default blur is a no-op on many devices; this is the
+          // implementation that actually renders there.
+          experimentalBlurMethod="dimezisBlurView"
+          pointerEvents="none"
+          style={[StyleSheet.absoluteFill, layerStyle, blurFade]}
+        />
+      ) : null}
+      <Animated.View
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, { backgroundColor: dimColor }, layerStyle, dimFade]}
+      />
+    </>
+  );
+}
+
+/**
+ * Layers with no shared value driving them: the opacity is whatever the caller
+ * asked for, and a caller that still wants movement hands a CSS transition down
+ * through `layerStyle` — which is exactly what the web side sheet does, flipping
+ * its own `opacity` between 0 and 1 and letting the browser interpolate.
+ *
+ * These MUST stay plain, non-reanimated components. On web, an animated
+ * component whose style carries `transitionProperty` is routed through
+ * reanimated's CSS transitions manager, which assigns straight into
+ * `element.style` — where `element` is whatever ref the wrapped component
+ * exposes. expo-blur's web `BlurView` exposes a `useImperativeHandle` object
+ * carrying only `setNativeProps`, so there is no `.style` on it and opening the
+ * surface throws `Cannot set properties of undefined (setting
+ * 'transitionProperty')`. A plain layer puts the transition on the DOM node
+ * itself, which is both where it belongs and the only place it works.
+ */
+function StaticBackdropLayers({
+  blurIntensity,
+  blurTint,
+  dimColor,
+  dimOpacity,
+  staticOpacity,
+  layerStyle,
+}: BackdropLayerProps) {
+  return (
+    <>
+      {blurIntensity > 0 ? (
+        <BlurView
+          intensity={blurIntensity}
+          tint={blurTint}
+          experimentalBlurMethod="dimezisBlurView"
+          pointerEvents="none"
+          // Opacity last, as in the animated pair: the level this component
+          // resolved wins over anything `layerStyle` happens to carry.
+          style={[StyleSheet.absoluteFill, layerStyle, { opacity: staticOpacity }]}
+        />
+      ) : null}
+      <View
+        pointerEvents="none"
+        style={[
+          StyleSheet.absoluteFill,
+          { backgroundColor: dimColor },
+          layerStyle,
+          { opacity: staticOpacity * dimOpacity },
+        ]}
+      />
+    </>
+  );
+}
+
 /**
  * Full-bleed blur + dim that dismisses the surface when pressed.
  *
@@ -271,15 +376,14 @@ export const Backdrop = memo(function Backdrop({
   const staticOpacity = typeof styleOpacity === 'number' ? styleOpacity : 1;
   const resolvedDimColor = typeof styleBackground === 'string' ? styleBackground : dimColor;
 
-  // The fade lives on each LAYER, never on their shared ancestor.
-  const blurFade = useAnimatedStyle(
-    () => ({ opacity: (progress ? progress.value : 1) * staticOpacity }),
-    [progress, staticOpacity],
-  );
-  const dimFade = useAnimatedStyle(
-    () => ({ opacity: (progress ? progress.value : 1) * staticOpacity * dimOpacity }),
-    [progress, staticOpacity, dimOpacity],
-  );
+  const layerProps: BackdropLayerProps = {
+    blurIntensity,
+    blurTint,
+    dimColor: resolvedDimColor,
+    dimOpacity,
+    staticOpacity,
+    layerStyle,
+  };
 
   return (
     // `box-none` so this box never takes a press itself: the hit box below and
@@ -298,21 +402,16 @@ export const Backdrop = memo(function Backdrop({
         testID={testID}
         style={StyleSheet.absoluteFill}
       >
-        {blurIntensity > 0 ? (
-          <AnimatedBlurView
-            intensity={blurIntensity}
-            tint={blurTint}
-            // Android's default blur is a no-op on many devices; this is the
-            // implementation that actually renders there.
-            experimentalBlurMethod="dimezisBlurView"
-            pointerEvents="none"
-            style={[StyleSheet.absoluteFill, layerStyle, blurFade]}
-          />
-        ) : null}
-        <Animated.View
-          pointerEvents="none"
-          style={[StyleSheet.absoluteFill, { backgroundColor: resolvedDimColor }, layerStyle, dimFade]}
-        />
+        {/* Split into two components rather than branching inside one, so the
+            reanimated hooks stay unconditional AND a caller without a shared
+            value gets layers reanimated never touches. Which branch a call site
+            takes is fixed by whether it passes `progress` at all, so this never
+            swaps mid-life. */}
+        {progress ? (
+          <AnimatedBackdropLayers progress={progress} {...layerProps} />
+        ) : (
+          <StaticBackdropLayers {...layerProps} />
+        )}
       </Pressable>
       {children}
     </View>

package/src/styles/adopt-style-sheet.ts

@@ -0,0 +1,131 @@
+// ---------------------------------------------------------------------------
+//  adoptStyleSheet — the ONE way a Bloom web fork puts CSS on the page.
+//
+//  Bloom's `.web.tsx` forks self-inject the CSS they need (`@keyframes`,
+//  pseudo-classes, `::-webkit-scrollbar`) rather than asking consumers to paste
+//  it into a global stylesheet — see AGENTS.md, "Web Fork CSS & Style
+//  Conventions". The mechanism used to be a `<style>` element carrying the CSS
+//  as text content. That is exactly the shape a Content-Security-Policy of
+//  `style-src 'self'` blocks: the check runs when a style element's text
+//  content is parsed into a sheet, so the rules are dropped, the component
+//  renders with none of its CSS, and NOTHING is thrown — the fork's own
+//  "already injected?" guard even finds its element in the DOM and reports
+//  success. Astro's `astro://` WebUI pages ship that CSP, and every other Oxy
+//  surface behind one would fail the same silent way.
+//
+//  A constructed stylesheet is not subject to `style-src` at all — CSSOM is
+//  outside CSP's inline hooks — so `new CSSStyleSheet()` + `replaceSync()` +
+//  `document.adoptedStyleSheets` applies the same CSS under a strict policy
+//  with no nonce, no hash, and no consumer-side wiring. (This is also why
+//  react-native-web is unaffected: it appends an EMPTY style element and fills
+//  it through `sheet.insertRule`, never through text content.)
+//
+//  The `<style>` path survives only as the fallback for a document without
+//  constructed-stylesheet support — jsdom 26 has the `CSSStyleSheet`
+//  constructor but neither `replaceSync` nor `adoptedStyleSheets`, so the whole
+//  jest suite takes it, and so do browsers older than Chrome 73 / Safari 16.4 /
+//  Firefox 101. There it behaves exactly as Bloom did before, CSP included:
+//  the fallback cannot make anything worse, and cannot make a strict policy
+//  work either.
+// ---------------------------------------------------------------------------
+
+interface AdoptedSheet {
+  sheet: CSSStyleSheet;
+  /** The CSS currently in `sheet`, so a re-render re-parses nothing. */
+  css: string;
+}
+
+/**
+ * The sheets Bloom has constructed, per document. Keyed by document rather than
+ * held in one flat map because a constructed sheet belongs to the realm that
+ * created it — adopting one into a different document throws — and Bloom runs
+ * in more than one when a consumer opens a popout window.
+ */
+const adoptedByDocument = new WeakMap<Document, Map<string, AdoptedSheet>>();
+
+function sheetsFor(doc: Document): Map<string, AdoptedSheet> {
+  const existing = adoptedByDocument.get(doc);
+  if (existing) return existing;
+  const created = new Map<string, AdoptedSheet>();
+  adoptedByDocument.set(doc, created);
+  return created;
+}
+
+/**
+ * Whether `doc` can take a constructed stylesheet. Evaluated per call, not once
+ * at module scope: a test installs the API on its window after this module has
+ * already been imported, and a module-scope constant would freeze the answer
+ * from before that.
+ */
+function supportsAdoption(doc: Document): boolean {
+  return (
+    'adoptedStyleSheets' in doc &&
+    typeof CSSStyleSheet === 'function' &&
+    typeof CSSStyleSheet.prototype.replaceSync === 'function'
+  );
+}
+
+/**
+ * Make `css` apply to the document, under the identity `id`.
+ *
+ * Idempotent in both directions: calling it again with the same CSS re-parses
+ * nothing and adopts nothing twice (the usual case — every mount of every
+ * instance of a component calls it), and calling it with DIFFERENT CSS under
+ * the same id replaces the previous content in place (the theme-dependent case,
+ * `BottomSheetBase`'s scrollbar colours).
+ *
+ * No-op off the web, so a platform-neutral component can call it unguarded.
+ */
+export function adoptStyleSheet(id: string, css: string): void {
+  if (typeof document === 'undefined') return;
+
+  if (supportsAdoption(document)) {
+    const sheets = sheetsFor(document);
+    let entry = sheets.get(id);
+    if (!entry) {
+      entry = { sheet: new CSSStyleSheet(), css: '' };
+      sheets.set(id, entry);
+    }
+    if (entry.css !== css) {
+      entry.sheet.replaceSync(css);
+      entry.css = css;
+    }
+    // Re-adoption after a consumer (or a test) has reset the list. `includes`
+    // is what makes the common repeat call free.
+    if (!document.adoptedStyleSheets.includes(entry.sheet)) {
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, entry.sheet];
+    }
+    return;
+  }
+
+  const existing = document.getElementById(id);
+  if (existing instanceof HTMLStyleElement) {
+    if (existing.textContent !== css) existing.textContent = css;
+    return;
+  }
+  const element = document.createElement('style');
+  element.id = id;
+  element.textContent = css;
+  document.head.appendChild(element);
+}
+
+/**
+ * Detach the stylesheet `id`, whichever path installed it.
+ *
+ * Only for CSS whose lifetime is a component's — `BottomSheetBase` removes its
+ * scrollbar rules when the last sheet unmounts. The static per-component CSS is
+ * never dropped: it is the same bytes for the life of the page, and removing it
+ * on unmount would make a re-mount re-parse it.
+ */
+export function dropStyleSheet(id: string): void {
+  if (typeof document === 'undefined') return;
+
+  const entry = adoptedByDocument.get(document)?.get(id);
+  if (entry) {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (sheet) => sheet !== entry.sheet,
+    );
+    adoptedByDocument.get(document)?.delete(id);
+  }
+  document.getElementById(id)?.remove();
+}