@oxyhq/bloom 0.72.2 → 0.73.0

package/src/menu/index.web.tsx

@@ -15,8 +15,9 @@ import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'rea
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { DialogControlProps } from '../dialog/types';
+import { OverlayRoot } from '../overlay';
 import { Portal } from '../portal/index.web';
-import { createDropdownZIndex } from '../styles/z-index';
+import { Z_INDEX } 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';
@@ -37,7 +38,6 @@ import type {
 
 export { useMenuContext };
 
-const menuZIndex = createDropdownZIndex();
 const VIEWPORT_GUTTER = 8;
 const MENU_OFFSET = 6;
 
@@ -266,24 +266,33 @@ export function MenuContent({
 
   return (
     <Portal>
-      <View
-        ref={attachDropdown}
-        style={[
-          styles.dropdown,
-          {
-            backgroundColor: theme.isDark
-              ? theme.colors.backgroundSecondary
-              : theme.colors.background,
-            borderColor: theme.colors.borderLight,
-            ...bloomShadowStyle('m'),
-          },
-          style,
-          styles.portaledDropdown,
-          position,
-        ]}
-      >
-        {children}
-      </View>
+      {/* `OverlayRoot` takes this menu's place in the open-order overlay stack.
+          The dropdown used to carry a fixed `zIndex` on the `dropdown` rung
+          (41), below the `overlay` rung a Dialog sits on (50/60) — so a menu
+          opened from inside a dialog rendered behind that dialog, whichever
+          opened last. It is `box-none`, so the area around the dropdown stays
+          click-through and the existing outside-press dismissal still sees the
+          press. */}
+      <OverlayRoot>
+        <View
+          ref={attachDropdown}
+          style={[
+            styles.dropdown,
+            {
+              backgroundColor: theme.isDark
+                ? theme.colors.backgroundSecondary
+                : theme.colors.background,
+              borderColor: theme.colors.borderLight,
+              ...bloomShadowStyle('m'),
+            },
+            style,
+            styles.portaledDropdown,
+            position,
+          ]}
+        >
+          {children}
+        </View>
+      </OverlayRoot>
     </Portal>
   );
 }
@@ -405,7 +414,10 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   openRoot: {
-    zIndex: menuZIndex.root,
+    // The INLINE trigger wrapper, still in the app's own document flow — this
+    // only lifts it over adjacent in-flow content while the menu is open. The
+    // portaled dropdown's depth is the overlay stack's business, not this.
+    zIndex: Z_INDEX.dropdown,
   },
   dropdown: {
     // Fixed from the outset, not only once positioned: the `Portal` root is a
@@ -420,7 +432,6 @@ const styles = StyleSheet.create({
     padding: 4,
     borderWidth: 1,
     overflow: 'hidden',
-    zIndex: menuZIndex.surface,
     // Overlay elevation applied at the usage site via `bloomShadowStyle('m')`.
     minWidth: 180,
   },

package/src/overlay/OverlayStacking.stories.tsx

@@ -0,0 +1,207 @@
+/**
+ * Stacked-overlay stories.
+ *
+ * These exist because overlay stacking used to be decided by hand-picked
+ * `zIndex` constants, so the answer to "which surface is on top" depended on
+ * WHICH KIND of surface each one was rather than on which one the user opened
+ * last. The failure was silent and total: the later surface rendered perfectly,
+ * fully interactive, entirely behind the earlier one — unreachable and
+ * undismissable.
+ *
+ * Every story opens a second surface from INSIDE a first one and puts a button
+ * in the second surface that writes into a result line. That makes the check a
+ * real one: drive it with actual input at the button's coordinates and the
+ * result only changes if the second surface genuinely received the press. A
+ * geometry read (`zIndex`, bounding boxes) would pass on a surface the user
+ * cannot touch. `src/__tests__/overlay-stack-order.test.ts` covers the ordering
+ * rule itself; `scripts/verify-overlay-stacking.mjs` drives these stories in a
+ * real browser.
+ */
+import React, { useRef, useState } from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { Button } from '../button';
+import { Dialog } from '../dialog/Dialog';
+import { useDialogControl } from '../dialog/context';
+import { Menu, MenuContent, MenuItem, MenuTrigger } from '../menu';
+
+const meta: Meta = {
+  title: 'Components/Overlay stacking',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+/** The line the harness reads. Starts at `idle`; the top surface writes to it. */
+function Result({ value }: { value: string }) {
+  return <Text testID="result">result: {value}</Text>;
+}
+
+/**
+ * The reported bug: a confirm dialog opened from a control inside an open bottom
+ * sheet. The dialog opens LAST, so it must be the surface that takes the press.
+ */
+function DialogOverSheet() {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const dialogControl = useDialogControl();
+  const [result, setResult] = useState('idle');
+
+  return (
+    <>
+      <Button testID="open-first" onPress={() => sheetRef.current?.present()}>
+        Open sheet
+      </Button>
+      <Result value={result} />
+
+      <BottomSheet ref={sheetRef}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Post options</Text>
+          <Button
+            testID="open-second"
+            variant="secondary"
+            onPress={() => dialogControl.open()}
+          >
+            Delete post
+          </Button>
+        </View>
+      </BottomSheet>
+
+      <Dialog
+        control={dialogControl}
+        testID="confirm-dialog"
+        title="Delete post?"
+        description="This cannot be undone."
+        actions={[
+          {
+            label: 'Delete',
+            color: 'destructive',
+            testID: 'top-action',
+            onPress: () => setResult('dialog'),
+          },
+          { label: 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </>
+  );
+}
+
+/** The mirror image: a sheet opened from inside an already-open dialog. */
+function SheetOverDialog() {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const dialogControl = useDialogControl();
+  const [result, setResult] = useState('idle');
+
+  return (
+    <>
+      <Button testID="open-first" onPress={() => dialogControl.open()}>
+        Open dialog
+      </Button>
+      <Result value={result} />
+
+      <Dialog control={dialogControl} testID="outer-dialog" title="Settings">
+        <Button
+          testID="open-second"
+          variant="secondary"
+          onPress={() => sheetRef.current?.present()}
+        >
+          Pick an option
+        </Button>
+      </Dialog>
+
+      <BottomSheet ref={sheetRef}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Options</Text>
+          <Button testID="top-action" variant="secondary" onPress={() => setResult('sheet')}>
+            Choose this
+          </Button>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+/** Two dialogs. The second must sit above the first. */
+function DialogOverDialog() {
+  const first = useDialogControl();
+  const second = useDialogControl();
+  const [result, setResult] = useState('idle');
+
+  return (
+    <>
+      <Button testID="open-first" onPress={() => first.open()}>
+        Open first dialog
+      </Button>
+      <Result value={result} />
+
+      <Dialog control={first} testID="first-dialog" title="First">
+        <Button testID="open-second" variant="secondary" onPress={() => second.open()}>
+          Open second dialog
+        </Button>
+      </Dialog>
+
+      <Dialog control={second} testID="second-dialog" title="Second">
+        <Button testID="top-action" variant="secondary" onPress={() => setResult('second')}>
+          Act
+        </Button>
+      </Dialog>
+    </>
+  );
+}
+
+/**
+ * A menu opened from inside a dialog. `Menu` sat on the `dropdown` rung of the
+ * scale (40/41) and the dialog on `overlay` (50/60), so the menu opened behind
+ * the dialog that launched it no matter what order they opened in.
+ */
+function MenuOverDialog() {
+  const control = useDialogControl();
+  const [result, setResult] = useState('idle');
+
+  return (
+    <>
+      <Button testID="open-first" onPress={() => control.open()}>
+        Open dialog
+      </Button>
+      <Result value={result} />
+
+      <Dialog control={control} testID="menu-host-dialog" title="Filters">
+        <Menu>
+          <MenuTrigger label="Sort by">
+            {({ props }) => (
+              <Button {...props} testID="open-second" variant="secondary">
+                Sort by
+              </Button>
+            )}
+          </MenuTrigger>
+          <MenuContent>
+            <MenuItem testID="top-action" label="Newest" onPress={() => setResult('menu')} />
+            <MenuItem label="Oldest" onPress={() => setResult('menu-oldest')} />
+          </MenuContent>
+        </Menu>
+      </Dialog>
+    </>
+  );
+}
+
+export const DialogOverSheetStory: Story = {
+  name: 'Dialog over sheet',
+  render: () => <DialogOverSheet />,
+};
+
+export const SheetOverDialogStory: Story = {
+  name: 'Sheet over dialog',
+  render: () => <SheetOverDialog />,
+};
+
+export const DialogOverDialogStory: Story = {
+  name: 'Dialog over dialog',
+  render: () => <DialogOverDialog />,
+};
+
+export const MenuOverDialogStory: Story = {
+  name: 'Menu over dialog',
+  render: () => <MenuOverDialog />,
+};

package/src/overlay/index.tsx

@@ -39,7 +39,7 @@
  * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
  * dimming layer; do not re-implement either with raw `View`s.
  */
-import { memo, type ReactNode } from 'react';
+import { createContext, memo, useContext, useMemo, type ReactNode } from 'react';
 import { BlurView } from 'expo-blur';
 import {
   Platform,
@@ -52,9 +52,28 @@ import {
 import Animated, { useAnimatedStyle, type SharedValue } from 'react-native-reanimated';
 
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { layerForRank, type OverlayLayer } from './stack';
+import { useOverlayLayer } from './use-overlay-layer';
 
 const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
 
+/**
+ * The z-indices of the nearest enclosing `OverlayRoot`. Descendants that order
+ * themselves within a surface (a dialog's panel above its own backdrop) read
+ * this instead of picking their own numbers.
+ *
+ * The default is the first rank rather than 0, so a surface part rendered
+ * outside any `OverlayRoot` still lands in the overlay band instead of behind
+ * the app.
+ */
+const OverlayLayerContext = createContext<OverlayLayer>(layerForRank(1));
+OverlayLayerContext.displayName = 'BloomOverlayLayerContext';
+
+/** Z-indices of the enclosing overlay surface. See `OverlayRoot`. */
+export function useOverlayLayerContext(): OverlayLayer {
+  return useContext(OverlayLayerContext);
+}
+
 /**
  * One blur radius for every Bloom overlay. Surfaces differ in what they show,
  * not in how the app behind them recedes.
@@ -74,19 +93,92 @@ export interface OverlayRootProps {
   children?: ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  /**
+   * Opt OUT of the open-order stack and pin to a fixed depth. Only the toast
+   * layer does this — a notification has to stay visible over whatever is open,
+   * including a surface opened after it. Everything else must leave this unset
+   * so it stacks by open order; a hand-picked number here is precisely the bug
+   * `./stack.ts` exists to remove.
+   */
+  zIndex?: number;
 }
 
 /**
- * Outermost node of a portaled surface. Fills the viewport and re-enables
- * pointer events for its own children while empty gaps stay click-through
- * (`box-none`), so a surface that only covers part of the screen never steals
- * clicks from the app behind it.
+ * Outermost node of a portaled surface. Three jobs:
+ *
+ *  - Fills the viewport.
+ *  - Re-enables pointer events for its own children while empty gaps stay
+ *    click-through (`box-none`), so a surface that only covers part of the
+ *    screen never steals clicks from the app behind it.
+ *  - Takes this surface's place in the overlay stack, so a surface opened later
+ *    paints above one opened earlier (see `./stack.ts`).
+ *
+ * Because the rank is taken on MOUNT, this must be rendered inside whatever
+ * guard makes the surface appear (`if (!isOpen) return null`), which is where
+ * every Bloom surface already puts it. Descendants that need to order
+ * themselves within the surface read `useOverlayLayerContext()`.
  */
-export function OverlayRoot({ children, style, testID }: OverlayRootProps) {
+export function OverlayRoot({ children, style, testID, zIndex }: OverlayRootProps) {
+  // Split into two components rather than branching on the hook: a pinned root
+  // must not CONSUME a rank either. The toast host is pinned and mounts for the
+  // whole life of the app, so holding a rank would keep the live set permanently
+  // non-empty — the counter would never reset and depths would climb for the
+  // rest of the session.
+  return zIndex === undefined ? (
+    <StackedOverlayRoot style={style} testID={testID}>
+      {children}
+    </StackedOverlayRoot>
+  ) : (
+    <PinnedOverlayRoot zIndex={zIndex} style={style} testID={testID}>
+      {children}
+    </PinnedOverlayRoot>
+  );
+}
+
+function StackedOverlayRoot({ children, style, testID }: Omit<OverlayRootProps, 'zIndex'>) {
+  const layer = useOverlayLayer();
   return (
-    <View pointerEvents="box-none" style={[styles.root, style]} testID={testID}>
+    <OverlayRootView layer={layer} style={style} testID={testID}>
       {children}
-    </View>
+    </OverlayRootView>
+  );
+}
+
+function PinnedOverlayRoot({
+  children,
+  style,
+  testID,
+  zIndex,
+}: OverlayRootProps & { zIndex: number }) {
+  // Outside the stack, so descendants must not read stack depths from it
+  // either — every slot is the pinned depth.
+  const layer = useMemo(
+    () => ({ root: zIndex, backdrop: zIndex, surface: zIndex }),
+    [zIndex],
+  );
+  return (
+    <OverlayRootView layer={layer} style={style} testID={testID}>
+      {children}
+    </OverlayRootView>
+  );
+}
+
+function OverlayRootView({
+  children,
+  style,
+  testID,
+  layer,
+}: Omit<OverlayRootProps, 'zIndex'> & { layer: OverlayLayer }) {
+  return (
+    <OverlayLayerContext.Provider value={layer}>
+      <View
+        pointerEvents="box-none"
+        style={[styles.root, { zIndex: layer.root }, style]}
+        testID={testID}
+      >
+        {children}
+      </View>
+    </OverlayLayerContext.Provider>
   );
 }
 
@@ -112,7 +204,10 @@ export interface BackdropProps {
   /** Dim opacity, 0–1. */
   dimOpacity?: number;
   /**
-   * Geometry for the press target: insets, z-index, layout. NOT opacity —
+   * Geometry for the press target: insets, layout. NOT a z-index — where this
+   * surface sits relative to others is `OverlayRoot`'s call (see `./stack.ts`),
+   * and within the surface the panel is simply rendered after this. NOT opacity
+   * either —
    * `backdrop-filter` samples nothing under an ancestor with `opacity < 1`
    * (the group composites in isolation), so a fade applied here silently kills
    * the blur. An `opacity` found in this style is redirected onto the layers;
@@ -240,3 +335,13 @@ const styles = StyleSheet.create({
     bottom: 0,
   },
 });
+
+export {
+  layerForRank,
+  OVERLAY_STACK_BAND,
+  OVERLAY_STACK_BASE,
+  OVERLAY_STACK_MAX_RANK,
+  TOAST_LAYER_Z,
+  type OverlayLayer,
+} from './stack';
+export { useOverlayLayer } from './use-overlay-layer';

package/src/overlay/stack.ts

@@ -0,0 +1,166 @@
+/**
+ * The overlay stacking authority.
+ *
+ * ## The rule
+ *
+ * An overlay opened LATER paints above one opened earlier. That is the whole
+ * contract, and it is decided here, once, for every Bloom overlay surface —
+ * never by a per-component constant.
+ *
+ * ## Why this module exists
+ *
+ * Stacking used to be a set of hand-picked rungs on a shared scale: menus at
+ * 40, dialogs at 50/60, tooltips at 70, sheets at 999999. Because those numbers
+ * are fixed per COMPONENT KIND, the answer to "which surface is on top" was
+ * decided by what each surface WAS rather than by when the user opened it — so
+ * some pairings were permanently inverted no matter the order:
+ *
+ *   - A confirm dialog (50/60) opened from inside an open bottom sheet (999999)
+ *     rendered fully, interactively, and completely underneath the sheet. It
+ *     could be neither pressed nor dismissed.
+ *   - A menu (40/41) opened from inside a dialog (50/60) landed behind the very
+ *     dialog that launched it.
+ *
+ * Both failed silently: correct markup, correct styles, nothing in the console.
+ * Only a hit test in a real browser tells the difference, which is why
+ * `scripts/verify-overlay-stacking.mjs` exists alongside the unit tests here.
+ *
+ * ## How a rank is acquired
+ *
+ * `useOverlayLayer()` takes a rank on MOUNT and releases it on unmount, so the
+ * caller must be a component that mounts when the surface OPENS — which is how
+ * every Bloom surface is already built (`Dialog.web` returns null while closed;
+ * `BottomSheetBase` returns null until `rendered`). Acquiring per mount, in a
+ * `useState` initializer, is what makes the rank correct on the surface's FIRST
+ * paint: an effect-assigned z would leave one frame at the wrong depth, which
+ * on a 200ms fade-in is a visible flash of the surface behind its neighbour.
+ *
+ * It also keeps the acquisition out of any position the React Compiler may
+ * memoize. A counter read during render is exactly the external-mutable-state
+ * hazard the compiler mangles; a state initializer is not memoizable that way.
+ * (React StrictMode double-invokes initializers in development, so a rank can
+ * be consumed and dropped. That is harmless: only the ORDER of the numbers
+ * matters, never their density.)
+ *
+ * ## Toasts are deliberately not in this stack
+ *
+ * A toast is a notification, not a modal surface: it must stay visible over
+ * whatever is open, including a surface opened after it. It is pinned above the
+ * whole stack at `TOAST_LAYER_Z` instead of taking a rank. (Under the old
+ * scale a toast at 80 was already lost behind any open bottom sheet at 999999.)
+ */
+
+/**
+ * First z-index handed to an overlay. Comfortably above app content while
+ * staying far below `TOAST_LAYER_Z`.
+ */
+export const OVERLAY_STACK_BASE = 1000;
+
+/**
+ * Z-index distance between consecutive overlays. A surface owns its whole band,
+ * so it can order its own parts (backdrop, panel, a floating control) without
+ * ever reaching the next surface's floor.
+ */
+export const OVERLAY_STACK_BAND = 10;
+
+/**
+ * Ceiling on simultaneously open overlays. Beyond this, ranks saturate and the
+ * topmost surfaces tie (falling back to DOM order) rather than climbing into
+ * the toast layer. Nothing in the ecosystem stacks remotely this deep; the
+ * clamp exists so a runaway caller degrades instead of breaking the toast
+ * layer's guarantee.
+ */
+export const OVERLAY_STACK_MAX_RANK = 500;
+
+/**
+ * The toast layer, pinned above every overlay rank (see the note above on why
+ * toasts are not part of the stack).
+ */
+export const TOAST_LAYER_Z =
+  OVERLAY_STACK_BASE + OVERLAY_STACK_BAND * (OVERLAY_STACK_MAX_RANK + 1);
+
+/** The z-indices one overlay surface may use, all within its own band. */
+export interface OverlayLayer {
+  /** The surface's outermost node — everything it renders is inside this. */
+  root: number;
+  /** Its dimming layer. */
+  backdrop: number;
+  /** Its panel, above its own backdrop. */
+  surface: number;
+}
+
+/**
+ * Registry state.
+ *
+ * `sequence` only ever moves forward while anything is open, which is what
+ * guarantees the ordering. It resets once the last overlay closes so the
+ * numbers stay small over a long session.
+ */
+interface Registry {
+  sequence: number;
+  live: Set<number>;
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __oxyhq_bloom_overlay_stack__: Registry | undefined;
+}
+
+/**
+ * `globalThis`-anchored, for the same reason as the portal group and the theme
+ * context: `exports` ships a `react-native` → `src` condition beside the
+ * `lib/module` and `lib/commonjs` forks, and overlay surfaces are imported
+ * cross-subpath (`./dialog`, `./bottom-sheet`, `./menu`, `./select`, …). A
+ * bundler can resolve those through different conditions, and two physical
+ * copies of this module would each run their own counter — handing out
+ * colliding ranks and reintroducing exactly the bug this module removes.
+ */
+function registry(): Registry {
+  globalThis.__oxyhq_bloom_overlay_stack__ ??= { sequence: 0, live: new Set() };
+  return globalThis.__oxyhq_bloom_overlay_stack__;
+}
+
+/** Z-indices for a given rank. Exported for tests and for the native surfaces. */
+export function layerForRank(rank: number): OverlayLayer {
+  const clamped = Math.min(Math.max(rank, 1), OVERLAY_STACK_MAX_RANK);
+  const root = OVERLAY_STACK_BASE + OVERLAY_STACK_BAND * clamped;
+  return { root, backdrop: root, surface: root + 1 };
+}
+
+/**
+ * Take the next rank. Exported for tests; components use `useOverlayLayer`.
+ */
+export function acquireOverlayRank(): number {
+  const reg = registry();
+  reg.sequence += 1;
+  return reg.sequence;
+}
+
+/**
+ * Mark a rank as live. Called from an effect, which React balances against
+ * `releaseOverlayRank` even under StrictMode's mount/unmount/remount.
+ *
+ * It also re-floors `sequence` to at least this rank. That closes the only race
+ * the reset below could otherwise open: a surface takes rank N during render,
+ * and before its effect runs, the last previously-open surface unmounts and
+ * resets the counter to 0 — the next surface would then take rank 1 and sit
+ * BELOW the one still coming up at N. Re-flooring on register makes the reset
+ * unable to lose a rank that has been handed out.
+ */
+export function registerOverlayRank(rank: number): void {
+  const reg = registry();
+  reg.live.add(rank);
+  if (rank > reg.sequence) reg.sequence = rank;
+}
+
+/** Release a rank; resets the counter once nothing is open. */
+export function releaseOverlayRank(rank: number): void {
+  const reg = registry();
+  reg.live.delete(rank);
+  if (reg.live.size === 0) reg.sequence = 0;
+}
+
+/** Test seam — drops all registry state. */
+export function resetOverlayStack(): void {
+  globalThis.__oxyhq_bloom_overlay_stack__ = { sequence: 0, live: new Set() };
+}

package/src/overlay/use-overlay-layer.ts

@@ -0,0 +1,39 @@
+/**
+ * `useOverlayLayer` — the hook every Bloom overlay surface stacks with.
+ *
+ * See `./stack.ts` for the rule and the reasoning. The contract for callers is
+ * one line: **call this from a component that mounts when the surface OPENS**,
+ * not from one that stays mounted while it is closed. Every Bloom surface is
+ * already shaped that way (`Dialog.web` returns null while closed;
+ * `BottomSheetBase` returns null until `rendered`), and `OverlayRoot` — which
+ * lives inside those guards — is where the call actually sits for most of them.
+ */
+import { useEffect, useState } from 'react';
+
+import {
+  acquireOverlayRank,
+  layerForRank,
+  registerOverlayRank,
+  releaseOverlayRank,
+  type OverlayLayer,
+} from './stack';
+
+/**
+ * Reserve this surface's place in the overlay stack for as long as it is
+ * mounted. Returns the z-indices it should paint with.
+ */
+export function useOverlayLayer(): OverlayLayer {
+  // A state initializer, not a render-body call: it runs once per mount, so the
+  // rank is fixed before the first paint (an effect would leave one frame at
+  // the wrong depth) and it is not a position the React Compiler can memoize
+  // into a stale read.
+  const [rank] = useState(acquireOverlayRank);
+
+  useEffect(() => {
+    registerOverlayRank(rank);
+    return () => releaseOverlayRank(rank);
+  }, [rank]);
+
+  const [layer] = useState(() => layerForRank(rank));
+  return layer;
+}