@oxyhq/bloom 0.89.0 → 1.0.1

package/lib/module/fab/Fab.web.js

@@ -1,8 +1,10 @@
 "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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
@@ -43,61 +45,51 @@ function resolveSize(size) {
   }
   return SIZE_CONFIG[size];
 }
-const PILL_RADIUS = 999;
-const PRESS_SCALE = 0.94;
 const DEFAULT_OFFSET = 16;
 const DEFAULT_Z_INDEX = 50;
 
 // ---------------------------------------------------------------------------
 //  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-fab` class; per-instance resolved colors stay
-//  inline. The focus-ring color is read from a CSS custom property the
-//  component sets inline (`--bloom-fab-ring`).
+//  Shared recipe — see `styles/interactive-web-css.ts`. Per-instance resolved
+//  colours stay inline and reach the static rules as custom properties
+//  (`--bloom-fab-ring`, `--bloom-fab-shadow-hover`, `--bloom-fab-press-scale`).
 // ---------------------------------------------------------------------------
 
 const STYLE_ID = 'bloom-fab-web-css';
-const BLOOM_FAB_CSS = `
-.bloom-fab {
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-  gap: 8px;
-  margin: 0;
-  border: none;
-  font-family: inherit;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  transition: opacity 120ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease;
-}
-.bloom-fab:disabled,
-.bloom-fab[aria-disabled="true"] {
-  cursor: default;
-  opacity: 0.5;
-}
-.bloom-fab:not(:disabled):not([aria-disabled="true"]):hover {
-  box-shadow: var(--bloom-fab-shadow-hover);
-}
-.bloom-fab:not(:disabled):not([aria-disabled="true"]):active {
-  transform: scale(var(--bloom-fab-press-scale, 1));
-}
-.bloom-fab:focus-visible {
-  outline: 2px solid var(--bloom-fab-ring, currentColor);
-  outline-offset: 3px;
-}
-`;
-function useFabCss() {
-  useEffect(() => {
-    adoptStyleSheet(STYLE_ID, BLOOM_FAB_CSS);
-  }, []);
-}
+const BLOOM_FAB_CSS = interactiveWebCss({
+  selector: '.bloom-fab',
+  varPrefix: 'bloom-fab',
+  // `background-color` and `box-shadow` 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` rule for that property
+  // unreachable. Measured in a real browser: the hover lift below had never once
+  // fired, with the rule present and the variable resolving correctly.
+  // Gate: `interactive-web-css.test.tsx`.
+  base: `
+    flex-direction: row;
+    gap: 8px;
+    border: none;
+    background-color: var(--bloom-fab-bg);
+    box-shadow: var(--bloom-fab-shadow);
+    font-family: inherit;
+  `,
+  transition: 'opacity 120ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease',
+  // A FAB lifts on hover rather than dimming: it floats over the content, so a
+  // deeper shadow is the affordance an opacity dip cannot express.
+  hover: {
+    declarations: 'box-shadow: var(--bloom-fab-shadow-hover);'
+  },
+  // The held state is the same state layer the native fork paints, from the same
+  // resolver. It reads THROUGH the hover lift rather than replacing it (a
+  // pressed FAB is always also hovered), so hover and press stay two distinct
+  // states: deeper shadow, then a darker face.
+  pressDeclarations: 'background-color: var(--bloom-fab-press-bg);',
+  // One px more than a button's: the FAB is a circle on a page it floats above,
+  // so a ring at 2 reads as touching the edge.
+  outlineOffset: 3
+});
 
 /**
  * Positioning for a placement on web.
@@ -200,7 +192,7 @@ const FabWebComponent = ({
   title,
   type = 'button'
 }) => {
-  useFabCss();
+  useInteractiveWebCss(STYLE_ID, BLOOM_FAB_CSS);
   const theme = useTheme();
   const reactId = useId();
   const resolvedId = id ?? `bloom-fab-${reactId}`;
@@ -215,17 +207,20 @@ const FabWebComponent = ({
   const hoverShadow = `0 8px 20px ${theme.colors.shadow}`;
   const containerStyle = useMemo(() => {
     const base = {
-      backgroundColor: variantColors.background,
       color: variantColors.foreground,
-      borderRadius: PILL_RADIUS,
+      borderRadius: borderRadius.full,
       height: sizeConfig.diameter,
       zIndex,
-      boxShadow: restShadow,
       fontSize: sizeConfig.fontSize,
       fontWeight: 600,
       ['--bloom-fab-ring']: variantColors.ring,
+      ['--bloom-fab-bg']: variantColors.background,
+      ['--bloom-fab-shadow']: restShadow,
       ['--bloom-fab-shadow-hover']: hoverShadow,
-      ['--bloom-fab-press-scale']: PRESS_SCALE,
+      // Resolved by the same function the native fork calls, off the same rest
+      // fill, so the two forks land on the identical colour.
+      ['--bloom-fab-press-bg']: pressedSurface(theme.colors, variantColors.background, variantColors.foreground),
+      ['--bloom-fab-press-scale']: animation.pressScale,
       ...placementStyle(placement, offset)
     };
     if (isExtended) {
@@ -236,7 +231,7 @@ const FabWebComponent = ({
       base.width = sizeConfig.diameter;
     }
     return base;
-  }, [variantColors, sizeConfig.diameter, sizeConfig.fontSize, zIndex, restShadow, hoverShadow, placement, offset, isExtended]);
+  }, [variantColors, theme.colors, sizeConfig.diameter, sizeConfig.fontSize, zIndex, restShadow, hoverShadow, placement, offset, isExtended]);
   const handleClick = useCallback(event => {
     if (disabled) {
       event.preventDefault();

package/lib/module/fab/Fab.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useCallback","useEffect","useId","useMemo","useTheme","adoptStyleSheet","flattenWebStyle","jsx","_jsx","jsxs","_jsxs","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","PILL_RADIUS","PRESS_SCALE","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","useFabCss","placementStyle","placement","offset","style","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","secondary","foreground","secondaryForeground","ring","tertiary","tertiaryForeground","card","text","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","id","title","type","theme","reactId","resolvedId","sizeConfig","isExtended","length","content","variantColors","colors","restShadow","shadow","hoverShadow","containerStyle","base","backgroundColor","color","borderRadius","height","boxShadow","fontWeight","pad","paddingLeft","paddingRight","width","handleClick","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","resolvedLabelStyle","undefined","display","alignItems","justifyContent","Fab","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","useCallback","useId","useMemo","useTheme","animation","borderRadius","pressedSurface","interactiveWebCss","useInteractiveWebCss","flattenWebStyle","jsx","_jsx","jsxs","_jsxs","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","selector","varPrefix","base","transition","hover","declarations","pressDeclarations","outlineOffset","placementStyle","placement","offset","style","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","secondary","foreground","secondaryForeground","ring","tertiary","tertiaryForeground","card","text","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","id","title","type","theme","reactId","resolvedId","sizeConfig","isExtended","length","content","variantColors","colors","restShadow","shadow","hoverShadow","containerStyle","color","full","height","fontWeight","pressScale","pad","paddingLeft","paddingRight","width","handleClick","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","resolvedLabelStyle","undefined","display","alignItems","justifyContent","Fab","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/fill/Fill.js

@@ -0,0 +1,26 @@
+"use strict";
+
+import React, { memo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FillComponent = function Fill({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [fillStyles.base, style],
+    children: children
+  });
+};
+export const Fill = /*#__PURE__*/memo(FillComponent);
+Fill.displayName = 'Fill';
+const fillStyles = StyleSheet.create({
+  base: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  }
+});
+//# sourceMappingURL=Fill.js.map

package/lib/module/fill/Fill.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","StyleSheet","View","jsx","_jsx","FillComponent","Fill","children","style","fillStyles","base","displayName","create","position","top","right","bottom","left"],"sourceRoot":"../../../src","sources":["fill/Fill.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,UAAU,EAAEC,IAAI,QAAwC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEhF,MAAMC,aAAa,GAAG,SAASC,IAAIA,CAAC;EAClCC,QAAQ;EACRC;AAIF,CAAC,EAAE;EACD,oBACEJ,IAAA,CAACF,IAAI;IAACM,KAAK,EAAE,CAACC,UAAU,CAACC,IAAI,EAAEF,KAAK,CAAE;IAAAD,QAAA,EACnCA;EAAQ,CACL,CAAC;AAEX,CAAC;AAED,OAAO,MAAMD,IAAI,gBAAGN,IAAI,CAACK,aAAa,CAAC;AACvCC,IAAI,CAACK,WAAW,GAAG,MAAM;AAEzB,MAAMF,UAAU,GAAGR,UAAU,CAACW,MAAM,CAAC;EACnCF,IAAI,EAAE;IACJG,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/fill/index.js

@@ -1,26 +1,4 @@
 "use strict";
 
-import React, { memo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-const FillComponent = function Fill({
-  children,
-  style
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [fillStyles.base, style],
-    children: children
-  });
-};
-export const Fill = /*#__PURE__*/memo(FillComponent);
-Fill.displayName = 'Fill';
-const fillStyles = StyleSheet.create({
-  base: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  }
-});
+export { Fill } from "./Fill.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","StyleSheet","View","jsx","_jsx","FillComponent","Fill","children","style","fillStyles","base","displayName","create","position","top","right","bottom","left"],"sourceRoot":"../../../src","sources":["fill/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,UAAU,EAAEC,IAAI,QAAwC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEhF,MAAMC,aAAa,GAAG,SAASC,IAAIA,CAAC;EAClCC,QAAQ;EACRC;AAIF,CAAC,EAAE;EACD,oBACEJ,IAAA,CAACF,IAAI;IAACM,KAAK,EAAE,CAACC,UAAU,CAACC,IAAI,EAAEF,KAAK,CAAE;IAAAD,QAAA,EACnCA;EAAQ,CACL,CAAC;AAEX,CAAC;AAED,OAAO,MAAMD,IAAI,gBAAGN,IAAI,CAACK,aAAa,CAAC;AACvCC,IAAI,CAACK,WAAW,GAAG,MAAM;AAEzB,MAAMF,UAAU,GAAGR,UAAU,CAACW,MAAM,CAAC;EACnCF,IAAI,EAAE;IACJG,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["Fill"],"sourceRoot":"../../../src","sources":["fill/index.ts"],"mappings":";;AAAA,SACEA,IAAI,QACC,WAAQ","ignoreList":[]}

package/lib/module/floating/FloatingPanel.js

@@ -0,0 +1,377 @@
+"use strict";
+
+/**
+ * The anchored surface every WEB fork of `Popover`, `DropdownMenu`,
+ * `ContextMenu`, `Menubar` and `Select` renders. WEB ONLY — imported by
+ * `.web.tsx` files and nothing else, which is why it names `../portal/index.web`
+ * outright rather than relying on a platform extension.
+ *
+ * What it encodes, once, instead of five times:
+ *
+ *  - The portal body sits inside `<OverlayRoot>`, and that `OverlayRoot` is
+ *    inside the visibility guard — so the surface's rank in `overlay/stack.ts` is
+ *    taken on MOUNT and a menu opened from inside a dialog paints above it. No
+ *    surface here carries a `zIndex` of its own.
+ *  - The dismiss layer is the shared `<Backdrop>` with its blur and dim turned
+ *    off: an anchored surface is not modal, so it gets a transparent hit box
+ *    rather than the wash a Dialog or a sheet uses. Routing it through
+ *    `Backdrop` (instead of a bare full-screen `Pressable`) is what keeps the
+ *    `pointer-events` opt-in correct — the web `Portal` root is
+ *    `pointer-events: none` and the property inherits.
+ *  - Placement goes through `overlay/dropdown-placement`, which fits, flips and
+ *    clamps on the axis `side` names and aligns-then-clamps on the other one.
+ *  - The chrome — radius, border, background, inset, elevation — is a class
+ *    string (`PANEL_CLASS`), so a consumer can restyle a surface with utilities.
+ *    Only what is COMPUTED stays inline: the resolved position, the caller's
+ *    numeric `minWidth`/`maxWidth`, the transform origin and the motion.
+ *
+ * `alignOffset` is applied by SHIFTING THE ANCHOR before resolving, not by
+ * nudging the result: the resolver's own clamp then still owns the align axis,
+ * so an offset can never push the surface off the viewport edge. It shifts the
+ * anchor on whichever axis `align` acts on — horizontal under a vertical `side`,
+ * VERTICAL under `'left'`/`'right'`. Nudging the result, or hardcoding the
+ * horizontal pair here, would silently move a submenu along the wrong axis.
+ *
+ * ── MOTION ───────────────────────────────────────────────────────────────────
+ *
+ * Fade + `zoom-95` + an 8px slide from the side it landed on, 200ms on
+ * `--ease-out-quint`, scaling from the corner nearest the trigger — the target's
+ * own enter, and the same shape reversed on the way out.
+ *
+ * Driven IMPERATIVELY from one shared value, which is the only mechanism
+ * available here and is what both platform rules point at:
+ *
+ *  - A reanimated `entering` would have to be a PREDEFINED builder, and no
+ *    predefined builder combines a fade with a scale and a slide. A custom
+ *    `Keyframe` or custom builder additionally schedules a cleanup that PINS the
+ *    element (`position: absolute` + a frozen box) at `duration × 5`.
+ *  - A reanimated `exiting` is not available at all: it animates a CLONE
+ *    appended to the element's parent, and this whole portal subtree unmounts
+ *    together, so there is no surviving parent to hold one. `Dialog.web.tsx`
+ *    reached the same conclusion from the other direction (`removeChild` throws
+ *    on a concurrent unmount) and keeps its own node mounted through the exit,
+ *    which is what the `phase` machine below does.
+ *
+ * `progress` is listed in `useAnimatedStyle`'s deps, and that is what makes it
+ * tick: with no worklets babel plugin — the production reality for every Oxy
+ * RN-Web app — a mapper subscribes to the shared values in its DEPS ARRAY rather
+ * than to the ones it reads, so an omitted value runs the mapper once and
+ * freezes it.
+ */
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Backdrop, OverlayRoot } from "../overlay/index.js";
+import { resolveDropdownPlacement } from "../overlay/dropdown-placement.js";
+import { Portal } from "../portal/index.web.js";
+import { StyledView } from "../styles/styled-primitives.js";
+import { WEB_POSITION_FIXED } from "../styles/web-view-style.js";
+import { DEFAULT_ALIGN_OFFSET, DEFAULT_SIDE_OFFSET, PANEL_CLASS, PANEL_MOTION_DURATION, PANEL_MOTION_EASING, PANEL_MOTION_SCALE_FROM, PANEL_MOTION_SLIDE, VIEWPORT_GUTTER } from "./constants.js";
+import { cx } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The one node: the panel's own chrome, the caller's classes, the computed
+ * position and the motion transform all land on it. Built once at module scope,
+ * because an element type constructed during render remounts its subtree every
+ * time. Same pattern, and the same reason, as `button/Button.tsx`.
+ */
+const AnimatedPanel = Animated.createAnimatedComponent(StyledView);
+
+/** `cubic-bezier(0.22, 1, 0.36, 1)`, the target's `--ease-out-quint`. */
+const EASING = Easing.bezier(...PANEL_MOTION_EASING);
+
+/**
+ * `closed` renders nothing; `closing` keeps the panel mounted and frozen in
+ * place while it animates out, then falls back to `closed`.
+ */
+
+/**
+ * Which side of the anchor the surface ACTUALLY landed on, read back from the
+ * resolved position rather than from the requested `side` — the resolver flips
+ * when the preferred side does not fit, and the slide and the transform origin
+ * both have to describe where the panel is, not where it asked to be.
+ */
+function resolvedSide(requested, placement, anchorStart) {
+  const horizontal = requested === 'left' || requested === 'right';
+  if (horizontal) return placement.left >= anchorStart ? 'right' : 'left';
+  return placement.top >= anchorStart ? 'bottom' : 'top';
+}
+
+/** The corner the panel grows from: the one nearest its trigger. */
+function transformOriginFor(side, align) {
+  const cross = align === 'end' ? 'end' : align === 'center' ? 'center' : 'start';
+  if (side === 'bottom' || side === 'top') {
+    const y = side === 'bottom' ? 'top' : 'bottom';
+    const x = cross === 'end' ? 'right' : cross === 'center' ? 'center' : 'left';
+    return `${x} ${y}`;
+  }
+  const x = side === 'right' ? 'left' : 'right';
+  const y = cross === 'end' ? 'bottom' : cross === 'center' ? 'center' : 'top';
+  return `${x} ${y}`;
+}
+export function FloatingPanel({
+  open,
+  anchor,
+  side = 'bottom',
+  align = 'start',
+  sideOffset = DEFAULT_SIDE_OFFSET,
+  alignOffset = DEFAULT_ALIGN_OFFSET,
+  dismissible = true,
+  modal = true,
+  onDismiss,
+  label,
+  role,
+  minWidth,
+  maxWidth,
+  className,
+  style,
+  testID,
+  children
+}) {
+  // The mounted panel as STATE, not a bare ref: placement 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 the panel mounts. An
+  // effect keyed only on `open` would measure nothing.
+  const [panelNode, setPanelNode] = useState(null);
+  const [placement, setPlacement] = useState(null);
+  const [phase, setPhase] = useState(open ? 'open' : 'closed');
+  const [lastOpen, setLastOpen] = useState(open);
+  const reducedMotion = useReducedMotion();
+  const progress = useSharedValue(0);
+  const attach = useCallback(node => {
+    setPanelNode(node);
+  }, []);
+
+  // `open` drives the phase; a close goes through `closing` so the exit has time
+  // to run before the subtree leaves the tree.
+  //
+  // Adjusted DURING RENDER rather than in an effect, and that is load-bearing.
+  // `useAnchorRect` clears the anchor from a LAYOUT effect, which schedules its
+  // re-render before any passive effect runs — so an effect-driven phase would
+  // leave one committed render where `phase` is still `'open'` and `anchor` is
+  // already `null`. That render resolves the placement to nothing and returns
+  // null, which unmounts the panel and takes the exit animation with it.
+  if (open !== lastOpen) {
+    setLastOpen(open);
+    // A surface that was never open has nothing to animate out — going through
+    // `closing` there would mount an invisible panel for the exit's duration.
+    setPhase(open ? 'open' : phase === 'open' ? 'closing' : 'closed');
+  }
+  useEffect(() => {
+    if (phase !== 'closing') return;
+    // Deliberately the SAME constant the exit animates over, so the unmount can
+    // never land before the animation finishes or long after it.
+    const timer = setTimeout(() => setPhase('closed'), reducedMotion ? 0 : PANEL_MOTION_DURATION);
+    return () => clearTimeout(timer);
+  }, [phase, reducedMotion]);
+  useLayoutEffect(() => {
+    // While closing, the panel holds the position it was last placed at: the
+    // anchor is already gone (`useAnchorRect` clears it on close) and a
+    // re-resolve would snap the surface somewhere else mid-exit.
+    if (phase === 'closing') return;
+    // react-native-web resolves a `View` ref to the DOM element itself. Read
+    // through the one method needed rather than asserting the whole
+    // `HTMLElement` interface, and capture it as a local so the narrowing holds
+    // inside `update` — a property check does not survive into a closure.
+    const element = panelNode;
+    const measure = element?.getBoundingClientRect;
+    if (phase !== 'open' || !anchor || typeof window === 'undefined' || typeof measure !== 'function') {
+      setPlacement(null);
+      return;
+    }
+    const update = () => {
+      const box = measure.call(element);
+      // The LAYOUT box, not the visual one. `getBoundingClientRect` reports the
+      // TRANSFORMED rectangle, and this panel is measured while its own enter is
+      // still at `scale(0.95)` — so the rect is 5% small. `far` placements never
+      // read the extent and looked perfect; the FLIPPED and `align="end"` ones
+      // do, and were out by 5% of the surface. Measured: a 256px sub-panel read
+      // as 243.2 and flipped 12.8px over its parent. `offsetWidth`/`offsetHeight`
+      // are the untransformed border box, integer-rounded, which is the right
+      // precision for a fit/flip decision. The rect is still the fallback for a
+      // non-DOM node (a jsdom stub has neither).
+      const layoutWidth = element?.offsetWidth ?? box.width;
+      const layoutHeight = element?.offsetHeight ?? box.height;
+      // Measured BEFORE `minWidth` is applied, so the laid-out surface can only
+      // be wider than the box read here — and a wider surface wraps less, so the
+      // measured height is an upper bound. Erring that way flips early in a tie,
+      // never late. The panel's own `min-w-*` CLASS is already in the box, since
+      // a stylesheet rule applies before a layout effect can read the node.
+      const width = Math.max(layoutWidth, minWidth ?? 0);
+      // The align axis is the one `side` does not name.
+      const alignsVertically = side === 'left' || side === 'right';
+      const shiftY = alignsVertically ? alignOffset : 0;
+      const shiftX = alignsVertically ? 0 : alignOffset;
+      setPlacement(resolveDropdownPlacement({
+        anchor: {
+          top: anchor.top + shiftY,
+          bottom: anchor.bottom + shiftY,
+          left: anchor.left + shiftX,
+          right: anchor.right + shiftX
+        },
+        size: {
+          width,
+          height: layoutHeight
+        },
+        viewport: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        },
+        offset: sideOffset,
+        gutter: VIEWPORT_GUTTER,
+        align,
+        side
+      }));
+    };
+    update();
+    window.addEventListener('resize', update);
+    window.addEventListener('scroll', update, true);
+    return () => {
+      window.removeEventListener('resize', update);
+      window.removeEventListener('scroll', update, true);
+    };
+  }, [phase, anchor, panelNode, side, align, sideOffset, alignOffset, minWidth]);
+
+  // Where the panel ended up, which is what both the slide and the origin
+  // describe. Held across the exit with the placement itself.
+  const landed = useMemo(() => {
+    if (!placement || !anchor) return null;
+    const horizontal = side === 'left' || side === 'right';
+    const resolved = resolvedSide(side, placement, horizontal ? anchor.right : anchor.bottom);
+    return {
+      side: resolved,
+      origin: transformOriginFor(resolved, align)
+    };
+  }, [placement, anchor, side, align]);
+  const [held, setHeld] = useState(landed);
+  if (landed && landed !== held) setHeld(landed);
+  const geometry = landed ?? held;
+  const slideX = geometry?.side === 'right' ? -PANEL_MOTION_SLIDE : geometry?.side === 'left' ? PANEL_MOTION_SLIDE : 0;
+  const slideY = geometry?.side === 'bottom' ? -PANEL_MOTION_SLIDE : geometry?.side === 'top' ? PANEL_MOTION_SLIDE : 0;
+
+  // The one imperative drive. It only starts once a placement exists, so the
+  // panel never paints a frame at the wrong position — before that `progress` is
+  // 0, which is also fully transparent.
+  useEffect(() => {
+    if (phase === 'open') {
+      if (!placement) return;
+      progress.value = reducedMotion ? 1 : withTiming(1, {
+        duration: PANEL_MOTION_DURATION,
+        easing: EASING
+      });
+      return;
+    }
+    if (phase === 'closing') {
+      progress.value = reducedMotion ? 0 : withTiming(0, {
+        duration: PANEL_MOTION_DURATION,
+        easing: EASING
+      });
+      return;
+    }
+    progress.value = 0;
+  }, [phase, placement, reducedMotion, progress]);
+
+  // `progress`, `slideX` and `slideY` are ALL in the deps: the shared value
+  // because that is what subscribes the mapper to it without the worklets babel
+  // plugin, and the two numbers because the mapper closes over them.
+  const motionStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{
+      translateX: slideX * (1 - progress.value)
+    }, {
+      translateY: slideY * (1 - progress.value)
+    }, {
+      scale: PANEL_MOTION_SCALE_FROM + (1 - PANEL_MOTION_SCALE_FROM) * progress.value
+    }]
+  }), [progress, slideX, slideY]);
+  useEffect(() => {
+    if (phase !== 'open' || !dismissible || typeof document === 'undefined') return;
+    const onKeyDown = event => {
+      if (event.key !== 'Escape') return;
+      // Stop the key reaching a Dialog underneath: the innermost open surface is
+      // the one Escape dismisses.
+      event.stopPropagation();
+      onDismiss();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [phase, dismissible, onDismiss]);
+
+  // The NON-modal outside press. Deliberately `pointerdown` in the CAPTURE
+  // phase and never `preventDefault`: the surface has to be gone before the
+  // click resolves, and the click itself has to carry on to whatever is under
+  // it. The anchor is excluded by GEOMETRY rather than by node, because a
+  // context menu's anchor is a bare point with no element behind it — and
+  // excluding it is what lets a trigger keep toggling its own surface closed
+  // instead of reopening it after this handler shut it.
+  useEffect(() => {
+    if (phase !== 'open' || !dismissible || modal || typeof document === 'undefined') return;
+    const onPointerDown = event => {
+      const node = panelNode;
+      const target = event.target;
+      if (node && target && node.contains(target)) return;
+      if (anchor && event.clientX >= anchor.left && event.clientX <= anchor.right && event.clientY >= anchor.top && event.clientY <= anchor.bottom) {
+        return;
+      }
+      onDismiss();
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [phase, dismissible, modal, onDismiss, panelNode, anchor]);
+  if (phase === 'closed') return null;
+  if (phase === 'open' && !anchor) return null;
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsxs(OverlayRoot, {
+      children: [dismissible && modal && phase === 'open' ? /*#__PURE__*/_jsx(Backdrop, {
+        style: styles.backdrop,
+        onPress: onDismiss
+        // An anchored surface dims nothing: this layer exists only to catch
+        // the outside press. `Backdrop` still owns the pointer-events
+        // contract, which is the whole reason it is not a bare Pressable.
+        ,
+        blurIntensity: 0,
+        dimOpacity: 0,
+        accessibilityLabel: "Dismiss"
+      }) : null, /*#__PURE__*/_jsx(AnimatedPanel, {
+        ref: attach,
+        role: role,
+        "aria-label": label,
+        testID: testID,
+        className: cx(PANEL_CLASS, className),
+        style: [styles.panel, {
+          // Before the first measurement the panel sits at the anchor, on
+          // the side it will end up on — so the box it is measured in is
+          // already the shape it will be laid out at. It is invisible until
+          // then because `progress` is still 0.
+          left: placement?.left ?? (anchor ? side === 'right' ? anchor.right + sideOffset : side === 'left' ? anchor.left - sideOffset : anchor.left : 0),
+          top: placement?.top ?? (anchor ? side === 'left' || side === 'right' ? anchor.top : anchor.bottom + sideOffset : 0),
+          minWidth,
+          maxWidth,
+          transformOrigin: geometry?.origin,
+          // A closing panel is inert: the row under the pointer must not be
+          // pressable while it fades, and the press has to reach the app.
+          pointerEvents: phase === 'open' ? 'auto' : 'none'
+        }, motionStyle, style],
+        children: children
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  backdrop: {
+    position: WEB_POSITION_FIXED,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    // Opt back in from the Portal root's `pointer-events: none`.
+    pointerEvents: 'auto'
+  },
+  // Only what a class cannot say: `position: fixed` has no Tailwind counterpart
+  // react-native-web would honour on a `View`, and it belongs with the `left` /
+  // `top` the resolver computes anyway.
+  panel: {
+    position: WEB_POSITION_FIXED
+  }
+});
+//# sourceMappingURL=FloatingPanel.js.map