@oxyhq/bloom 0.89.0 → 1.0.1

package/lib/module/frosted-icon-button/FrostedIconButton.web.js

@@ -1,67 +1,66 @@
 "use strict";
 
-import React, { memo, useCallback, useEffect, useId, useMemo } from 'react';
+import React, { memo, useCallback, useId, useMemo } from 'react';
 import { useTheme } from "../theme/use-theme.js";
-import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { animation, borderRadius } from "../styles/tokens.js";
+import { pressedSurface } from "../theme/press-colors.js";
+import { interactiveWebCss, useInteractiveWebCss } from "../styles/interactive-web-css.js";
 import { flattenWebStyle } from "../styles/flatten-web-style.js";
 import { applyIconColor, resolveFrostedPalette, resolveFrostedSize } from "./shared.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const RADIUS = 999;
-const PRESS_SCALE = 0.94;
-
 // ---------------------------------------------------------------------------
 //  Per-state CSS injection
 //
-//  Inline styles cannot express `:hover` / `:focus-visible` / `:active`. We
-//  inject one static stylesheet (keyed by id, once) defining the interaction
-//  behavior for the base `bloom-frosted-icon-btn` class; per-instance resolved
-//  colors are passed in as inline CSS custom properties. Self-injecting the CSS
-//  (rather than exporting a string for consumers to paste) is the Bloom web-fork
-//  convention — an unresolvable rule would fail silently otherwise.
+//  Shared recipe — see `styles/interactive-web-css.ts`. Per-instance resolved
+//  colours stay inline and reach the static rules as custom properties
+//  (`--bloom-frosted-ring`, `--bloom-frosted-hover-bg`,
+//  `--bloom-frosted-hover-ring`, `--bloom-frosted-press-scale`).
 // ---------------------------------------------------------------------------
 
 const STYLE_ID = 'bloom-frosted-icon-button-web-css';
-const BLOOM_FROSTED_ICON_BUTTON_CSS = `
-.bloom-frosted-icon-btn {
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-  border-style: solid;
-  border-width: 1px;
-  font-family: inherit;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  transition: background-color 140ms ease, border-color 140ms ease,
-    box-shadow 160ms ease, transform 120ms ease;
-}
-.bloom-frosted-icon-btn:disabled,
-.bloom-frosted-icon-btn[aria-disabled="true"] {
-  cursor: default;
-  opacity: 0.5;
-}
-.bloom-frosted-icon-btn:not(:disabled):not([aria-disabled="true"]):not([data-active="true"]):hover {
-  background-color: var(--bloom-frosted-hover-bg);
-  border-color: var(--bloom-frosted-hover-ring);
-}
-.bloom-frosted-icon-btn:not(:disabled):not([aria-disabled="true"]):active {
-  transform: scale(var(--bloom-frosted-press-scale, 1));
-}
-.bloom-frosted-icon-btn:focus-visible {
-  outline: 2px solid var(--bloom-frosted-ring-focus, currentColor);
-  outline-offset: 2px;
-}
-`;
-function useFrostedIconButtonCss() {
-  useEffect(() => {
-    adoptStyleSheet(STYLE_ID, BLOOM_FROSTED_ICON_BUTTON_CSS);
-  }, []);
-}
+const BLOOM_FROSTED_ICON_BUTTON_CSS = interactiveWebCss({
+  selector: '.bloom-frosted-icon-btn',
+  varPrefix: 'bloom-frosted',
+  // `background-color` and `border-color` arrive as custom properties rather than
+  // in the inline style, and that is NOT a stylistic choice. An inline
+  // declaration outranks EVERY rule in an adopted stylesheet, so a fork that
+  // writes either one inline makes its own `:hover` rules for that property
+  // unreachable. Measured in a real browser: the hover pair below had never once
+  // fired, with the rules present and the variables resolving correctly.
+  // Gate: `interactive-web-css.test.tsx`.
+  base: `
+    padding: 0;
+    border-style: solid;
+    border-width: 1px;
+    background-color: var(--bloom-frosted-bg);
+    border-color: var(--bloom-frosted-border);
+    font-family: inherit;
+  `,
+  transition: 'background-color 140ms ease, border-color 140ms ease, box-shadow 160ms ease, transform 120ms ease',
+  hover: {
+    // The ACTIVE (solid) state is its own colour and already at full strength,
+    // so hover must not repaint it or a selected control looks unselected. That
+    // is expressed in the VALUE — `--bloom-frosted-hover-*` resolve to the rest
+    // pair when `active` — and NOT as a `:not([data-active="true"])` filter,
+    // which is how it used to be written.
+    //
+    // The filter was not a neutral spelling of the same thing, and moving it
+    // became REQUIRED the moment the press below gained a background. `:not()`
+    // carries its argument's specificity, so the filter made this selector
+    // (0,5,0) against the `:active` rule's (0,4,0) — and a HELD control is
+    // always also a HOVERED one, so hover would have outranked press and the
+    // press would have done nothing at all. Equal specificity plus source order
+    // is what puts press on top.
+    declarations: `
+      background-color: var(--bloom-frosted-hover-bg);
+      border-color: var(--bloom-frosted-hover-ring);
+    `
+  },
+  // Resolved per state — an active chip steps its solid fill, a frosted one
+  // steps its tint — so this needs no filter to avoid unselecting anything.
+  pressDeclarations: 'background-color: var(--bloom-frosted-press-bg);',
+  outlineOffset: 2
+});
 const FrostedIconButtonWebComponent = ({
   onPress,
   onClick,
@@ -80,7 +79,7 @@ const FrostedIconButtonWebComponent = ({
   title,
   type = 'button'
 }) => {
-  useFrostedIconButtonCss();
+  useInteractiveWebCss(STYLE_ID, BLOOM_FROSTED_ICON_BUTTON_CSS);
   const theme = useTheme();
   const reactId = useId();
   const resolvedId = id ?? `bloom-frosted-icon-btn-${reactId}`;
@@ -92,9 +91,9 @@ const FrostedIconButtonWebComponent = ({
     return {
       width: geo.diameter,
       height: geo.diameter,
-      borderRadius: RADIUS,
-      backgroundColor: active ? palette.activeSurface : palette.surface,
-      borderColor: palette.ring,
+      borderRadius: borderRadius.full,
+      ['--bloom-frosted-bg']: active ? palette.activeSurface : palette.surface,
+      ['--bloom-frosted-border']: palette.ring,
       color: iconColor,
       // Real CSS backdrop blur so the chip frosts over content behind it. The
       // solid `active` state drops the blur. Both prefixed forms for Safari.
@@ -102,12 +101,17 @@ const FrostedIconButtonWebComponent = ({
       WebkitBackdropFilter: active ? 'none' : blur,
       // Soft shadow kept in BOTH modes so the chip has an edge on a solid bg.
       boxShadow: `0 2px 8px ${palette.shadow}`,
-      ['--bloom-frosted-hover-bg']: palette.surfaceHover,
-      ['--bloom-frosted-hover-ring']: palette.ringHover,
-      ['--bloom-frosted-ring-focus']: palette.focusRing,
-      ['--bloom-frosted-press-scale']: PRESS_SCALE
+      // An ACTIVE chip's hover pair IS its rest pair — the "hover does not repaint
+      // the solid on-state" rule, moved from the selector into the value.
+      ['--bloom-frosted-hover-bg']: active ? palette.activeSurface : palette.surfaceHover,
+      ['--bloom-frosted-hover-ring']: active ? palette.ring : palette.ringHover,
+      // Stepped from `surfaceHover`, because a press on web is always also a
+      // hover — see the note in `FrostedIconButton.tsx`.
+      ['--bloom-frosted-press-bg']: active ? pressedSurface(theme.colors, palette.activeSurface, palette.activeIcon) : pressedSurface(theme.colors, palette.surfaceHover, theme.colors.text),
+      ['--bloom-frosted-ring']: palette.focusRing,
+      ['--bloom-frosted-press-scale']: animation.pressScale
     };
-  }, [geo.diameter, active, palette.activeSurface, palette.surface, palette.ring, palette.surfaceHover, palette.ringHover, palette.focusRing, palette.shadow, iconColor, blur]);
+  }, [geo.diameter, active, theme.colors, palette.activeIcon, palette.activeSurface, palette.surface, palette.ring, palette.surfaceHover, palette.ringHover, palette.focusRing, palette.shadow, iconColor, blur]);
   const handleClick = useCallback(event => {
     if (disabled) {
       event.preventDefault();

package/lib/module/frosted-icon-button/FrostedIconButton.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useCallback","useEffect","useId","useMemo","useTheme","adoptStyleSheet","flattenWebStyle","applyIconColor","resolveFrostedPalette","resolveFrostedSize","jsx","_jsx","RADIUS","PRESS_SCALE","STYLE_ID","BLOOM_FROSTED_ICON_BUTTON_CSS","useFrostedIconButtonCss","FrostedIconButtonWebComponent","onPress","onClick","icon","children","active","disabled","size","accessibilityLabel","ariaLabelProp","accessibilityHint","style","className","testID","id","title","type","theme","reactId","resolvedId","geo","palette","colors","isDark","iconColor","activeIcon","blur","containerStyle","width","diameter","height","borderRadius","backgroundColor","activeSurface","surface","borderColor","ring","color","backdropFilter","WebkitBackdropFilter","boxShadow","shadow","surfaceHover","ringHover","focusRing","handleClick","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","content","undefined","display","alignItems","justifyContent","iconBox","FrostedIconButton","displayName"],"sourceRoot":"../../../src","sources":["frosted-icon-button/FrostedIconButton.web.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","useCallback","useId","useMemo","useTheme","animation","borderRadius","pressedSurface","interactiveWebCss","useInteractiveWebCss","flattenWebStyle","applyIconColor","resolveFrostedPalette","resolveFrostedSize","jsx","_jsx","STYLE_ID","BLOOM_FROSTED_ICON_BUTTON_CSS","selector","varPrefix","base","transition","hover","declarations","pressDeclarations","outlineOffset","FrostedIconButtonWebComponent","onPress","onClick","icon","children","active","disabled","size","accessibilityLabel","ariaLabelProp","accessibilityHint","style","className","testID","id","title","type","theme","reactId","resolvedId","geo","palette","colors","isDark","iconColor","activeIcon","blur","containerStyle","width","diameter","height","full","activeSurface","surface","ring","color","backdropFilter","WebkitBackdropFilter","boxShadow","shadow","surfaceHover","ringHover","text","focusRing","pressScale","handleClick","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","content","undefined","display","alignItems","justifyContent","iconBox","FrostedIconButton","displayName"],"sourceRoot":"../../../src","sources":["frosted-icon-button/FrostedIconButton.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/glass/GlassSurface.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { BlurView } from 'expo-blur';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { useTheme } from "../theme/use-theme.js";
+import { GLASS_BLUR_INTENSITY, GLASS_RIM_HIGHLIGHT, GLASS_SHEEN, resolveGlassColors } from "../theme/glass-colors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The layered pane every glass surface in Bloom is built from.
+ *
+ * ── ONE COMPONENT, NOT A FORK ───────────────────────────────────────────────
+ *
+ * There is no `.web.tsx` beside this file, and there should not be one. Each of
+ * the three layers has a mechanism that is genuinely universal, which was
+ * checked rather than assumed:
+ *
+ *  - **The blur** is `expo-blur`'s `BlurView`. Its `BlurView.web.js` is a real
+ *    web implementation, not a stub — it computes `backdrop-filter:
+ *    saturate(180%) blur(intensity * 0.2px)` and renders a react-native-web
+ *    `View`. Same component, same props, both platforms. It is already a
+ *    REQUIRED peer and `frosted-icon-button` already depends on it, so this
+ *    costs nothing new.
+ *  - **The tint** is a plain `View` with a `backgroundColor`.
+ *  - **The sheen** is `react-native-svg`, which is ALSO already a required peer
+ *    and already renders gradients in this library (`avatar/AvatarRing.tsx`
+ *    uses the same four primitives). A `linear-gradient` needs a gradient
+ *    primitive and a bare `View` cannot express one, but the primitive Bloom
+ *    needs is already installed — `expo-linear-gradient` would have been a new
+ *    peer for a capability the tree already has.
+ *
+ * The two things that are NOT layers here — the hairline border and the
+ * `glass` box-shadow — belong on the CALLER's own box, and that is not a
+ * stylistic preference. This view clips (`overflow: 'hidden'`), and a shadow
+ * drawn on a clipping node is clipped away on iOS; the border has to be on the
+ * node that owns the geometry so it traces the real edge. `frosted-icon-button`
+ * learned the same thing and splits the same way.
+ *
+ * ── WHAT THE CALLER OWES IT ─────────────────────────────────────────────────
+ *
+ * A positioned box with `overflow` of its own is NOT required — this fills the
+ * caller absolutely and clips itself — but `radius` must match the caller's, and
+ * the caller must render this FIRST so it paints under its own content.
+ */
+
+let glassSheenIdCounter = 0;
+const GlassSurfaceComponent = ({
+  fill,
+  radius,
+  sheen = true,
+  style,
+  testID
+}) => {
+  const theme = useTheme();
+  const glass = useMemo(() => resolveGlassColors(fill), [fill]);
+  // Per instance, because two panes in one document would otherwise share an id
+  // and the survivor of an unmount would reference a gradient that is gone. Same
+  // counter shape as `AvatarRing`.
+  const sheenId = useMemo(() => `bloom-glass-sheen${glassSheenIdCounter++}`, []);
+  return /*#__PURE__*/_jsxs(View
+  // A PROP, never a style entry: react-native-web resolves the RN-only
+  // values from the prop path only. `'none'` does survive as a style, which
+  // is what makes the mistake easy — but this file follows the rule rather
+  // than the exception, and the surface must never eat a press meant for the
+  // control it fills.
+  , {
+    pointerEvents: "none",
+    style: [StyleSheet.absoluteFill, {
+      borderRadius: radius
+    }, styles.clip, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(BlurView, {
+      intensity: GLASS_BLUR_INTENSITY
+      // The material follows the SCHEME, not the tone: a light pane in dark
+      // mode would be a bright card, which is the failure `frosted-icon-button`
+      // documents at length.
+      ,
+      tint: theme.isDark ? 'dark' : 'light'
+      // No blur METHOD is requested on Android, and that is the honest state
+      // rather than an oversight — see the `dimezisBlurView` note in
+      // `docs/button.mdx`. `expo-blur` needs a `blurTarget` ref to a
+      // `BlurTargetView` wrapping the content to blur, and a `BlurView` that
+      // is a DESCENDANT of the view it points at takes the process down with
+      // SIGSEGV (unbounded `RenderNode::prepareTreeImpl` recursion, measured
+      // on API 37). A glass surface fills its caller, which sits inside the
+      // content it would need to blur, so the only topology available here is
+      // the one that crashes. Asking for the method anyway bought nothing: the
+      // native side falls back to "none" and every instance logged TWO
+      // warnings per mount.
+      ,
+      style: StyleSheet.absoluteFill
+    }), /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: glass.fill
+      }]
+    }), sheen ? /*#__PURE__*/_jsxs(Svg, {
+      style: StyleSheet.absoluteFill,
+      testID: testID ? `${testID}-sheen` : undefined,
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsxs(LinearGradient, {
+          id: sheenId,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [/*#__PURE__*/_jsx(Stop, {
+            offset: "0",
+            stopColor: GLASS_SHEEN.top.color,
+            stopOpacity: GLASS_SHEEN.top.opacity
+          }), /*#__PURE__*/_jsx(Stop, {
+            offset: String(GLASS_SHEEN.middleStop),
+            stopColor: GLASS_SHEEN.middle.color,
+            stopOpacity: GLASS_SHEEN.middle.opacity
+          }), /*#__PURE__*/_jsx(Stop, {
+            offset: "1",
+            stopColor: GLASS_SHEEN.bottom.color,
+            stopOpacity: GLASS_SHEEN.bottom.opacity
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: "0",
+        y: "0",
+        width: "100%",
+        height: "100%",
+        fill: `url(#${sheenId})`
+      })]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, styles.rim]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  clip: {
+    overflow: 'hidden'
+  },
+  rim: {
+    boxShadow: GLASS_RIM_HIGHLIGHT
+  }
+});
+export const GlassSurface = /*#__PURE__*/memo(GlassSurfaceComponent);
+GlassSurface.displayName = 'GlassSurface';
+//# sourceMappingURL=GlassSurface.js.map

package/lib/module/glass/GlassSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","StyleSheet","View","BlurView","Svg","Defs","LinearGradient","Rect","Stop","useTheme","GLASS_BLUR_INTENSITY","GLASS_RIM_HIGHLIGHT","GLASS_SHEEN","resolveGlassColors","jsx","_jsx","jsxs","_jsxs","glassSheenIdCounter","GlassSurfaceComponent","fill","radius","sheen","style","testID","theme","glass","sheenId","pointerEvents","absoluteFill","borderRadius","styles","clip","children","intensity","tint","isDark","backgroundColor","undefined","id","x1","y1","x2","y2","offset","stopColor","top","color","stopOpacity","opacity","String","middleStop","middle","bottom","x","y","width","height","rim","create","overflow","boxShadow","GlassSurface","displayName"],"sourceRoot":"../../../src","sources":["glass/GlassSurface.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/glass/blur-target.js

@@ -0,0 +1,165 @@
+"use strict";
+
+import React, { createContext, memo, useContext, useMemo, useRef, useState } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { BlurTargetView } from 'expo-blur';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Who gets to blur what, on Android.
+ *
+ * ── THE CONSTRAINT THIS EXISTS TO ENCODE ────────────────────────────────────
+ *
+ * `expo-blur` blurs nothing on Android without a `blurTarget` — a ref to a
+ * `BlurTargetView` wrapping the content to blur. The obvious way to supply one
+ * is to wrap the app and hand the ref down, and that is a NATIVE CRASH: a
+ * `BlurView` that is a DESCENDANT of the view it points at makes the render
+ * tree recurse into itself, `RenderNode::prepareTreeImpl` past 500 frames,
+ * SIGSEGV in `RenderThread`. Measured on API 37 and reproduced with a single
+ * target and a single pane.
+ *
+ * Measured, the three topologies are:
+ *
+ *   descendant of its own target       CRASH
+ *   sibling of the target              blurs
+ *   inside a `Modal`, target at root   blurs (RN's `Modal` is its own native
+ *                                      window, and the target is reachable
+ *                                      across that boundary)
+ *
+ * So a blur target is only ever safe for a surface in a DIFFERENT native window
+ * from the content it blurs. In Bloom that is exactly one thing: a surface
+ * inside an RN `<Modal>`.
+ *
+ * ── WHY THE TARGET IS NOT SIMPLY HANDED TO EVERY CONSUMER ───────────────────
+ *
+ * `Backdrop` is public API and is rendered in BOTH positions: `Dialog`'s centre
+ * and side placements portal into the SAME window (Bloom's `Portal` is a
+ * context + outlet, not a `Modal`), while `BottomSheet` renders a real `<Modal>`.
+ * One of those two crashes. A rule in a doc would not be enough — the same
+ * component, with the same props, is safe in one caller and fatal in the other.
+ *
+ * So the target is published in two hops. {@link GlassBlurTargetProvider} holds
+ * it at the app root, and nothing reads it directly; only
+ * {@link GlassBlurWindow} — which Bloom renders INSIDE its own `<Modal>`s, and
+ * nowhere else — re-publishes it to descendants. A `Backdrop` that has not
+ * crossed a declared window boundary sees `undefined` and paints the tint-only
+ * surface it painted before. The crashing topology is not reachable by writing
+ * the wrong thing; it is unreachable because the value is absent there.
+ *
+ * `expo-blur` is a REQUIRED peer that `GlassSurface` already imports statically,
+ * so importing `BlurTargetView` here adds no package to any graph and needs no
+ * optional-`require` boundary.
+ *
+ * ── ONE FILE, NOT A FORK ────────────────────────────────────────────────────
+ *
+ * The whole mechanism is Android-only — iOS blurs through `UIVisualEffectView`
+ * and web through CSS `backdrop-filter`, neither of which takes a target — so
+ * everything here is gated on {@link isAndroid} rather than split into a `.web`
+ * sibling. A fork would have to be named explicitly by a generated web barrel
+ * (export conditions do not apply to relative specifiers), which is a lot of
+ * machinery for a file whose other platforms want NO behaviour at all.
+ * `Platform.OS` cannot change during a run, so the branches below are constant
+ * per process and never reshape the tree.
+ */
+
+/**
+ * Read per call rather than captured at module load. It is the same value every
+ * time, and it keeps the platform branch REACHABLE from a test: a module-level
+ * constant can only be re-evaluated by resetting the module registry, which
+ * loads a second copy of React and breaks every hook in the tree.
+ */
+const isAndroid = () => Platform.OS === 'android';
+
+/**
+ * The app-root target. Deliberately NOT exported as a hook — reading this
+ * without crossing a window boundary is the crash.
+ */
+const RootBlurTargetContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * True only inside a declared separate native window. Default `false` is what
+ * makes the unsafe position the DEFAULT position.
+ */
+const SeparateWindowContext = /*#__PURE__*/createContext(false);
+
+/**
+ * Wraps the app content so a portaled surface can blur it.
+ *
+ * Composed by `BloomProvider`, and exported for consumers that do not mount it
+ * (a Vite/SPA root, or a native app that is not on expo-router). Mounting it
+ * twice duplicates no surface — it renders a transparent container and nothing
+ * else — so unlike an outlet it is safe at any depth; the nearest one simply
+ * becomes the target for its subtree.
+ */
+export const GlassBlurTargetProvider = /*#__PURE__*/memo(function GlassBlurTargetProvider({
+  children,
+  style
+}) {
+  const ref = useRef(null);
+  // `BlurView` resolves `findNodeHandle(blurTarget.current)` in
+  // `componentDidMount` and re-resolves only when `blurTarget.current` DIFFERS
+  // from the previous render's — a comparison a stable ref object can never
+  // trip, because both sides read the same object. So the published value is a
+  // fresh wrapper minted once the node exists. `onLayout` is the signal because
+  // it is typed (`BlurTargetView`'s `ref` prop is a `RefObject`, not a callback
+  // ref, so the node cannot be captured through `setState` directly) and it
+  // cannot run before the ref is attached.
+  const [attached, setAttached] = useState(false);
+  const target = useMemo(() => ({
+    current: attached ? ref.current : null
+  }), [attached]);
+
+  // Off Android there is nothing to target and nothing to publish, so the
+  // provider is a pass-through rather than an extra layout node at every app
+  // root in the fleet.
+  if (!isAndroid()) return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+  return /*#__PURE__*/_jsx(RootBlurTargetContext.Provider, {
+    value: target,
+    children: /*#__PURE__*/_jsx(BlurTargetView, {
+      ref: ref,
+      style: style ?? styles.fill,
+      onLayout: attached ? undefined : () => setAttached(true),
+      children: children
+    })
+  });
+});
+
+/**
+ * Declares that its children render in a SEPARATE native window from the app
+ * content — an RN `<Modal>`, and nothing else.
+ *
+ * Bloom renders this inside its own `<Modal>`s. It is the only thing that makes
+ * the root target visible to {@link useWindowedBlurTarget}, so putting it
+ * anywhere that is not a real window boundary re-arms the crash it exists to
+ * prevent.
+ */
+export const GlassBlurWindow = /*#__PURE__*/memo(function GlassBlurWindow({
+  children
+}) {
+  return /*#__PURE__*/_jsx(SeparateWindowContext.Provider, {
+    value: true,
+    children: children
+  });
+});
+
+/**
+ * The blur target for a surface, or `undefined` when there is none it may
+ * safely use — either because no provider is mounted, or because this surface
+ * shares a window with the content and would crash.
+ *
+ * `undefined` is a normal answer, not a failure: the caller paints its
+ * tint-only material, exactly as it did before any of this existed.
+ */
+export function useWindowedBlurTarget() {
+  const target = useContext(RootBlurTargetContext);
+  const inSeparateWindow = useContext(SeparateWindowContext);
+  if (!isAndroid()) return undefined;
+  return inSeparateWindow ? target : undefined;
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=blur-target.js.map

package/lib/module/glass/blur-target.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","memo","useContext","useMemo","useRef","useState","Platform","StyleSheet","BlurTargetView","Fragment","_Fragment","jsx","_jsx","isAndroid","OS","RootBlurTargetContext","undefined","SeparateWindowContext","GlassBlurTargetProvider","children","style","ref","attached","setAttached","target","current","Provider","value","styles","fill","onLayout","GlassBlurWindow","useWindowedBlurTarget","inSeparateWindow","create","flex"],"sourceRoot":"../../../src","sources":["glass/blur-target.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/glass/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { GlassSurface } from "./GlassSurface.js";
+export { GlassBlurTargetProvider, GlassBlurWindow, useWindowedBlurTarget } from "./blur-target.js";
+//# sourceMappingURL=index.js.map

package/lib/module/glass/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GlassSurface","GlassBlurTargetProvider","GlassBlurWindow","useWindowedBlurTarget"],"sourceRoot":"../../../src","sources":["glass/index.ts"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,mBAAgB;AAC7C,SACEC,uBAAuB,EACvBC,eAAe,EACfC,qBAAqB,QAChB,kBAAe","ignoreList":[]}

package/lib/module/glass/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/glass/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["glass/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/grid/Grid.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import React, { createContext, memo, useContext, useMemo } from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridContext = /*#__PURE__*/createContext({
+  gap: 0
+});
+GridContext.displayName = 'GridContext';
+const RowComponent = function Row({
+  children,
+  gap = 0,
+  style
+}) {
+  return /*#__PURE__*/_jsx(GridContext.Provider, {
+    value: useMemo(() => ({
+      gap
+    }), [gap]),
+    children: /*#__PURE__*/_jsx(View, {
+      style: [{
+        flexDirection: 'row',
+        flex: 1,
+        marginLeft: -gap / 2,
+        marginRight: -gap / 2
+      }, style],
+      children: children
+    })
+  });
+};
+export const Row = /*#__PURE__*/memo(RowComponent);
+Row.displayName = 'Row';
+const ColComponent = function Col({
+  children,
+  width = 1,
+  style
+}) {
+  const {
+    gap
+  } = useContext(GridContext);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      flexDirection: 'column',
+      paddingLeft: gap / 2,
+      paddingRight: gap / 2,
+      width: `${width * 100}%`
+    }, style],
+    children: children
+  });
+};
+export const Col = /*#__PURE__*/memo(ColComponent);
+Col.displayName = 'Col';
+//# sourceMappingURL=Grid.js.map

package/lib/module/grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","memo","useContext","useMemo","View","jsx","_jsx","GridContext","gap","displayName","RowComponent","Row","children","style","Provider","value","flexDirection","flex","marginLeft","marginRight","ColComponent","Col","width","paddingLeft","paddingRight"],"sourceRoot":"../../../src","sources":["grid/Grid.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,IAAI,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AACvE,SAASC,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpD,MAAMC,WAAW,gBAAGP,aAAa,CAAC;EAAEQ,GAAG,EAAE;AAAE,CAAC,CAAC;AAC7CD,WAAW,CAACE,WAAW,GAAG,aAAa;AAEvC,MAAMC,YAAY,GAAG,SAASC,GAAGA,CAAC;EAChCC,QAAQ;EACRJ,GAAG,GAAG,CAAC;EACPK;AAKF,CAAC,EAAE;EACD,oBACEP,IAAA,CAACC,WAAW,CAACO,QAAQ;IAACC,KAAK,EAAEZ,OAAO,CAAC,OAAO;MAAEK;IAAI,CAAC,CAAC,EAAE,CAACA,GAAG,CAAC,CAAE;IAAAI,QAAA,eAC3DN,IAAA,CAACF,IAAI;MACHS,KAAK,EAAE,CACL;QACEG,aAAa,EAAE,KAAK;QACpBC,IAAI,EAAE,CAAC;QACPC,UAAU,EAAE,CAACV,GAAG,GAAG,CAAC;QACpBW,WAAW,EAAE,CAACX,GAAG,GAAG;MACtB,CAAC,EACDK,KAAK,CACL;MAAAD,QAAA,EACDA;IAAQ,CACL;EAAC,CACa,CAAC;AAE3B,CAAC;AAED,OAAO,MAAMD,GAAG,gBAAGV,IAAI,CAACS,YAAY,CAAC;AACrCC,GAAG,CAACF,WAAW,GAAG,KAAK;AAEvB,MAAMW,YAAY,GAAG,SAASC,GAAGA,CAAC;EAChCT,QAAQ;EACRU,KAAK,GAAG,CAAC;EACTT;AAKF,CAAC,EAAE;EACD,MAAM;IAAEL;EAAI,CAAC,GAAGN,UAAU,CAACK,WAAW,CAAC;EACvC,oBACED,IAAA,CAACF,IAAI;IACHS,KAAK,EAAE,CACL;MACEG,aAAa,EAAE,QAAQ;MACvBO,WAAW,EAAEf,GAAG,GAAG,CAAC;MACpBgB,YAAY,EAAEhB,GAAG,GAAG,CAAC;MACrBc,KAAK,EAAE,GAAGA,KAAK,GAAG,GAAG;IACvB,CAAC,EACDT,KAAK,CACL;IAAAD,QAAA,EACDA;EAAQ,CACL,CAAC;AAEX,CAAC;AAED,OAAO,MAAMS,GAAG,gBAAGpB,IAAI,CAACmB,YAAY,CAAC;AACrCC,GAAG,CAACZ,WAAW,GAAG,KAAK","ignoreList":[]}