@oxyhq/bloom 0.6.20 → 0.6.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.6.20",
+  "version": "0.6.22",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -535,6 +535,22 @@
         "default": "./lib/commonjs/fonts/index.js"
       }
     },
+    "./scroll": {
+      "react-native": "./src/scroll/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/scroll/index.web.d.ts",
+        "import": "./lib/module/scroll/index.web.js",
+        "require": "./lib/commonjs/scroll/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/scroll/index.d.ts",
+        "default": "./lib/module/scroll/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/scroll/index.d.ts",
+        "default": "./lib/commonjs/scroll/index.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -615,6 +631,7 @@
     }
   },
   "devDependencies": {
+    "@react-navigation/native": "^7.0.0",
     "@storybook/addon-docs": "^10",
     "@storybook/react-vite": "^10",
     "@testing-library/react-native": "^13.3.3",
@@ -645,6 +662,7 @@
     "vite": "^7"
   },
   "peerDependencies": {
+    "@react-navigation/native": ">=6.0.0",
     "expo": "*",
     "expo-font": "*",
     "react": ">=18.0.0",
@@ -658,6 +676,9 @@
     "sonner-native": ">=0.17.0"
   },
   "peerDependenciesMeta": {
+    "@react-navigation/native": {
+      "optional": true
+    },
     "expo": {
       "optional": true
     },

package/src/__tests__/BloomColorScope.test.tsx

@@ -4,6 +4,7 @@ import { render } from '@testing-library/react-native';
 
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
 import { BloomColorScope } from '../theme/color-scope';
+import { BloomColorScope as BloomColorScopeWeb } from '../theme/color-scope/index.web';
 import { useBloomTheme } from '../theme/use-theme';
 
 function CurrentPreset() {
@@ -86,4 +87,70 @@ describe('BloomColorScope', () => {
     ).toThrow('BloomColorScope must be used within a <BloomThemeProvider>');
     consoleError.mockRestore();
   });
+
+  // Web variant: regression for the production crash on mention.earth profile
+  // screens. On web the `asChild` child is frequently an RNW component whose
+  // `style` is a React Native style ARRAY. The web variant must merge styles as
+  // an array (RNW flattens it) and must NOT spread the array into an object
+  // literal — that copies the array's numeric indices as keys and makes RNW
+  // throw `Failed to set an indexed property [0] on 'CSSStyleDeclaration'`.
+  describe('web variant (index.web)', () => {
+    it('merges an array-valued child style without producing numeric index keys (asChild)', () => {
+      const { getByTestId } = render(
+        <BloomThemeProvider defaultColorPreset="blue" fonts={false}>
+          <BloomColorScopeWeb colorPreset="purple" asChild>
+            <StyledChild style={[{ padding: 8 }, { margin: 4 }]} />
+          </BloomColorScopeWeb>
+        </BloomThemeProvider>,
+      );
+
+      expect(getByTestId('preset').props.children).toBe('purple');
+
+      const mergedStyle = getByTestId('styled-child').props.style;
+      // The merge must be an array (the RNW-safe form), never an object literal
+      // with the array's numeric indices spread in as keys.
+      expect(Array.isArray(mergedStyle)).toBe(true);
+
+      // No numeric index keys must appear anywhere in the merged style. If the
+      // child array had been spread into an object literal, we'd see '0', '1'.
+      const collectKeys = (value: unknown): string[] => {
+        if (Array.isArray(value)) return value.flatMap(collectKeys);
+        if (value && typeof value === 'object') return Object.keys(value);
+        return [];
+      };
+      const keys = collectKeys(mergedStyle);
+      expect(keys).not.toContain('0');
+      expect(keys).not.toContain('1');
+
+      // The child's own array styles must be preserved (and win over scope vars).
+      const flat = (Array.isArray(mergedStyle) ? mergedStyle : [mergedStyle])
+        .flat(Infinity)
+        .filter((entry): entry is Record<string, unknown> => Boolean(entry) && typeof entry === 'object');
+      expect(flat).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({ padding: 8 }),
+          expect.objectContaining({ margin: 4 }),
+        ]),
+      );
+    });
+
+    it('clones the single child and merges scope vars into its style array (asChild)', () => {
+      const { getByTestId } = render(
+        <BloomThemeProvider defaultColorPreset="blue" fonts={false}>
+          <BloomColorScopeWeb colorPreset="purple" asChild>
+            <StyledChild style={{ padding: 8 }} />
+          </BloomColorScopeWeb>
+        </BloomThemeProvider>,
+      );
+
+      const mergedStyle = getByTestId('styled-child').props.style;
+      expect(Array.isArray(mergedStyle)).toBe(true);
+      const flat = (Array.isArray(mergedStyle) ? mergedStyle : [mergedStyle])
+        .flat(Infinity)
+        .filter((entry): entry is Record<string, unknown> => Boolean(entry) && typeof entry === 'object');
+      expect(flat).toEqual(
+        expect.arrayContaining([expect.objectContaining({ padding: 8 })]),
+      );
+    });
+  });
 });

package/src/__tests__/scroll-native.test.ts

@@ -0,0 +1,25 @@
+import {
+  ScrollRestorationProvider,
+  useScrollRestoration,
+} from '../scroll/index';
+
+// The native barrel is a deliberate no-op: native-stack already preserves
+// scroll. These tests pin that contract so a future refactor can't silently
+// turn the native path into something that touches the DOM or throws.
+
+describe('native scroll-restoration barrel', () => {
+  it('ScrollRestorationProvider renders its children unchanged', () => {
+    const child = { sentinel: true } as unknown as React.ReactElement;
+    expect(ScrollRestorationProvider({ children: child })).toBe(child);
+  });
+
+  it('useScrollRestoration is a no-op for any target/options', () => {
+    const ref = { current: null };
+    expect(() => useScrollRestoration(ref)).not.toThrow();
+    expect(() => useScrollRestoration('window')).not.toThrow();
+    expect(() =>
+      useScrollRestoration(ref, { key: 'feed', enabled: true }),
+    ).not.toThrow();
+    expect(useScrollRestoration(ref)).toBeUndefined();
+  });
+});

package/src/__tests__/scroll-store.test.ts

@@ -0,0 +1,85 @@
+import { ScrollOffsetStore, deriveScrollKey } from '../scroll/store';
+
+describe('deriveScrollKey', () => {
+  it('returns null when there is no route key', () => {
+    expect(deriveScrollKey(undefined)).toBeNull();
+    expect(deriveScrollKey(undefined, 'feed')).toBeNull();
+  });
+
+  it('returns the route key verbatim when no sub-key is given', () => {
+    expect(deriveScrollKey('Home-abc')).toBe('Home-abc');
+  });
+
+  it('treats an empty sub-key the same as no sub-key', () => {
+    expect(deriveScrollKey('Home-abc', '')).toBe('Home-abc');
+  });
+
+  it('composes route key and sub-key for multiple lists on one route', () => {
+    const a = deriveScrollKey('Profile-xyz', 'posts');
+    const b = deriveScrollKey('Profile-xyz', 'media');
+    expect(a).not.toBe(b);
+    expect(a).toBe('Profile-xyz\0posts');
+  });
+
+  it('does not collide across routes that share a sub-key', () => {
+    expect(deriveScrollKey('A', 'feed')).not.toBe(deriveScrollKey('B', 'feed'));
+  });
+});
+
+describe('ScrollOffsetStore', () => {
+  it('reads 0 for an unseen key so callers can restore unconditionally', () => {
+    const store = new ScrollOffsetStore();
+    expect(store.read('missing')).toBe(0);
+    expect(store.has('missing')).toBe(false);
+  });
+
+  it('saves and reads an offset back', () => {
+    const store = new ScrollOffsetStore();
+    store.save('k', 420);
+    expect(store.read('k')).toBe(420);
+    expect(store.has('k')).toBe(true);
+    expect(store.size).toBe(1);
+  });
+
+  it('keeps offsets independent per key', () => {
+    const store = new ScrollOffsetStore();
+    store.save('a', 100);
+    store.save('b', 250);
+    expect(store.read('a')).toBe(100);
+    expect(store.read('b')).toBe(250);
+    expect(store.size).toBe(2);
+  });
+
+  it('overwrites the offset on subsequent saves', () => {
+    const store = new ScrollOffsetStore();
+    store.save('k', 100);
+    store.save('k', 300);
+    expect(store.read('k')).toBe(300);
+    expect(store.size).toBe(1);
+  });
+
+  it('clamps negative offsets to 0 (e.g. rubber-band overscroll)', () => {
+    const store = new ScrollOffsetStore();
+    store.save('k', -50);
+    expect(store.read('k')).toBe(0);
+  });
+
+  it('forgets a single key', () => {
+    const store = new ScrollOffsetStore();
+    store.save('a', 1);
+    store.save('b', 2);
+    store.forget('a');
+    expect(store.has('a')).toBe(false);
+    expect(store.read('b')).toBe(2);
+    expect(store.size).toBe(1);
+  });
+
+  it('clears every key', () => {
+    const store = new ScrollOffsetStore();
+    store.save('a', 1);
+    store.save('b', 2);
+    store.clear();
+    expect(store.size).toBe(0);
+    expect(store.has('a')).toBe(false);
+  });
+});

package/src/scroll/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Native variant of the scroll-restoration primitive — a deliberate no-op.
+ *
+ * React Navigation's native-stack keeps every screen mounted while it is in the
+ * stack, so a list's scroll position survives a push/pop for free. There is
+ * nothing to save or restore. We still ship the full API surface (provider +
+ * hook) so consumers write one set of call sites that compile and run on every
+ * platform; on native the provider just renders its children and the hook does
+ * nothing.
+ *
+ * Web bundlers select `./index.web` via the `"browser"` export condition in
+ * `package.json`; native bundlers fall through to this file.
+ */
+import type { ReactElement } from 'react';
+import type {
+  ScrollRestorationProviderProps,
+  ScrollRestorationTarget,
+  UseScrollRestorationOptions,
+} from './types';
+
+export type {
+  ScrollableHandle,
+  ScrollRestorationProviderProps,
+  ScrollRestorationTarget,
+  UseScrollRestorationOptions,
+} from './types';
+
+/**
+ * No-op provider. Renders children unchanged — native scroll persistence is
+ * handled by the navigator, so no per-route state is kept.
+ */
+export function ScrollRestorationProvider({
+  children,
+}: ScrollRestorationProviderProps): ReactElement {
+  return children as ReactElement;
+}
+
+/**
+ * No-op hook. Accepts the same arguments as the web implementation so call
+ * sites are identical across platforms.
+ */
+export function useScrollRestoration(
+  _target: ScrollRestorationTarget,
+  _options?: UseScrollRestorationOptions,
+): void {
+  // Intentionally empty: native-stack already preserves scroll position.
+}

package/src/scroll/index.web.tsx

@@ -0,0 +1,167 @@
+/**
+ * Web variant of the scroll-restoration primitive.
+ *
+ * Mirrors the proven Bluesky pattern (`history.scrollRestoration = 'manual'`
+ * plus an in-memory `Map<routeKey, offset>` saved on blur and restored on focus
+ * inside a single `requestAnimationFrame`) with one deliberate difference:
+ * Bluesky restores the WINDOW scroller, whereas Oxy apps keep multi-column
+ * layouts whose feed scrolls an INNER container. So we restore the offset of a
+ * caller-registered scrollable (a ref to an element / RN scroll component, or
+ * the `'window'` sentinel), keyed by the active navigation route.
+ *
+ * Native bundlers use `./index.ts` (a no-op); web bundlers select this file via
+ * the `"browser"` export condition in `package.json`.
+ */
+import { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+import { useFocusEffect, useRoute } from '@react-navigation/native';
+
+import { createScroller } from './scrollable.web';
+import { ScrollOffsetStore, deriveScrollKey } from './store';
+import type {
+  ScrollRestorationProviderProps,
+  ScrollRestorationTarget,
+  UseScrollRestorationOptions,
+} from './types';
+
+export type {
+  ScrollableHandle,
+  ScrollRestorationProviderProps,
+  ScrollRestorationTarget,
+  UseScrollRestorationOptions,
+} from './types';
+
+const ScrollOffsetContext = createContext<ScrollOffsetStore | null>(null);
+ScrollOffsetContext.displayName = 'BloomScrollOffsetContext';
+
+/**
+ * Switch the browser to manual scroll restoration exactly once per document.
+ *
+ * The browser's default `'auto'` restoration fights our manual restore on
+ * Back/Forward navigations. Doing this at module scope (guarded for SSR) means
+ * it is set before any provider mounts, matching Bluesky's module-level call.
+ */
+if (typeof history !== 'undefined' && 'scrollRestoration' in history) {
+  history.scrollRestoration = 'manual';
+}
+
+/**
+ * Holds the per-route offset map for the subtree. One provider near the app
+ * root is enough; the store lives for the document's lifetime so offsets
+ * survive navigating away and back (including browser Back/Forward).
+ */
+export function ScrollRestorationProvider({
+  children,
+}: ScrollRestorationProviderProps) {
+  const store = useMemo(() => new ScrollOffsetStore(), []);
+  return (
+    <ScrollOffsetContext.Provider value={store}>
+      {children}
+    </ScrollOffsetContext.Provider>
+  );
+}
+
+function useScrollOffsetStore(): ScrollOffsetStore {
+  const store = useContext(ScrollOffsetContext);
+  if (store === null) {
+    throw new Error(
+      'useScrollRestoration must be used within a <ScrollRestorationProvider>.',
+    );
+  }
+  return store;
+}
+
+/**
+ * Preserve and restore the scroll offset of `target` across navigation, keyed
+ * by the active route (plus an optional `options.key` for routes that host
+ * multiple scrollables).
+ *
+ * Behaviour (web):
+ * - On every scroll while the screen is focused, the current offset is saved.
+ * - On focus, the saved offset is applied in a single `requestAnimationFrame`,
+ *   giving a remounted list one frame to lay out its content first (no retry
+ *   loops, no hide/show tricks).
+ * - On blur, the latest offset is captured as a final safety net.
+ */
+export function useScrollRestoration(
+  target: ScrollRestorationTarget,
+  options?: UseScrollRestorationOptions,
+): void {
+  const store = useScrollOffsetStore();
+  const route = useRoute();
+  const subKey = options?.key;
+  const enabled = options?.enabled ?? true;
+
+  const scrollKey = deriveScrollKey(route.key, subKey);
+
+  // Keep the latest target/enabled/key in refs so the focus effect can read
+  // them without being re-subscribed on every render.
+  const targetRef = useRef(target);
+  targetRef.current = target;
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+  const scrollKeyRef = useRef(scrollKey);
+  scrollKeyRef.current = scrollKey;
+
+  useFocusEffect(
+    // The effect identity is intentionally stable across renders: it reads all
+    // varying inputs from refs. React Navigation re-runs it on each focus.
+    useCallback(
+      () => {
+        const key = scrollKeyRef.current;
+        if (!enabledRef.current || key === null) return undefined;
+
+        const scroller = createScroller(targetRef.current);
+        const element =
+          targetRef.current === 'window'
+            ? (typeof window !== 'undefined' ? window : null)
+            : resolveScrollEventTarget(targetRef.current);
+
+        const save = () => {
+          const currentKey = scrollKeyRef.current;
+          if (enabledRef.current && currentKey !== null) {
+            store.save(currentKey, scroller.getOffset());
+          }
+        };
+
+        // Restore on the next frame so a freshly remounted list has rendered
+        // its content (and thus reached its full scroll height) before we move.
+        const frame = requestAnimationFrame(() => {
+          scroller.setOffset(store.read(key));
+        });
+
+        element?.addEventListener('scroll', save, { passive: true });
+
+        return () => {
+          cancelAnimationFrame(frame);
+          element?.removeEventListener('scroll', save);
+          // Final capture on blur, covering navigations that don't fire a
+          // trailing scroll event.
+          save();
+        };
+      },
+      [store],
+    ),
+  );
+}
+
+/**
+ * Resolve the EventTarget to listen for `scroll` on. RNW scroll components
+ * expose `getScrollableNode()`; raw refs may hold the DOM node directly.
+ */
+function resolveScrollEventTarget(
+  target: Exclude<ScrollRestorationTarget, 'window'>,
+): EventTarget | null {
+  const current = (target as { current: unknown }).current;
+  if (current == null) return null;
+  if (typeof EventTarget !== 'undefined' && current instanceof EventTarget) {
+    return current;
+  }
+  const handle = current as { getScrollableNode?: () => unknown };
+  if (typeof handle.getScrollableNode === 'function') {
+    const node = handle.getScrollableNode();
+    if (typeof EventTarget !== 'undefined' && node instanceof EventTarget) {
+      return node;
+    }
+  }
+  return null;
+}

package/src/scroll/scrollable.web.ts

@@ -0,0 +1,75 @@
+import type { ScrollableHandle, ScrollRestorationTarget } from './types';
+
+/**
+ * A normalized read/write interface over whatever the caller registered, so
+ * the hook does not branch on target shape. Both methods are no-ops when the
+ * underlying element is not yet (or no longer) attached.
+ */
+export interface ResolvedScroller {
+  getOffset: () => number;
+  setOffset: (offset: number) => void;
+}
+
+function isElement(value: unknown): value is HTMLElement {
+  return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;
+}
+
+function hasGetScrollableNode(
+  value: unknown,
+): value is Required<Pick<ScrollableHandle, 'getScrollableNode'>> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof (value as ScrollableHandle).getScrollableNode === 'function'
+  );
+}
+
+/**
+ * Resolve the live DOM element a target currently points at, or `null`.
+ *
+ * RNW scroll components expose `getScrollableNode()`; plain refs may hold the
+ * DOM node directly. We never cache the node because RNW can swap it across
+ * renders — we re-resolve on every read/write.
+ */
+function resolveElement(target: ScrollRestorationTarget): HTMLElement | null {
+  if (target === 'window') return null;
+
+  const current = (target as { current: unknown }).current;
+  if (current == null) return null;
+
+  if (isElement(current)) return current;
+
+  if (hasGetScrollableNode(current)) {
+    const node = current.getScrollableNode();
+    if (isElement(node)) return node;
+  }
+
+  return null;
+}
+
+/**
+ * Build a {@link ResolvedScroller} for a target. The window sentinel reads and
+ * writes the document scroller; everything else operates on the resolved
+ * element's `scrollTop`.
+ */
+export function createScroller(target: ScrollRestorationTarget): ResolvedScroller {
+  if (target === 'window') {
+    return {
+      getOffset: () => (typeof window === 'undefined' ? 0 : window.scrollY),
+      setOffset: (offset) => {
+        if (typeof window !== 'undefined') window.scrollTo(0, offset);
+      },
+    };
+  }
+
+  return {
+    getOffset: () => {
+      const element = resolveElement(target);
+      return element ? element.scrollTop : 0;
+    },
+    setOffset: (offset) => {
+      const element = resolveElement(target);
+      if (element) element.scrollTop = offset;
+    },
+  };
+}

package/src/scroll/store.ts

@@ -0,0 +1,84 @@
+/**
+ * Pure, platform-agnostic core of the scroll-restoration primitive.
+ *
+ * This file deliberately contains NO React and NO DOM/native imports so the
+ * logic can be unit-tested in isolation and shared verbatim by the web and
+ * native barrels. The web barrel drives it with real scroll offsets; the
+ * native barrel never instantiates it (native-stack already restores scroll).
+ */
+
+/**
+ * Separator between the navigation route key and an optional caller-supplied
+ * sub-key. A route may host more than one independently-scrolling list (e.g.
+ * a tabbed profile screen), so each list contributes its own sub-key.
+ *
+ * `\0` (NUL) can never appear in a React Navigation route key or in a
+ * developer-authored sub-key, so it is collision-free as a delimiter. It is
+ * written as an escape sequence (not a literal byte) so the source stays
+ * text-diffable.
+ */
+const COMPOSITE_KEY_SEPARATOR = '\0';
+
+/**
+ * Derive the storage key for a scrollable from its owning route key and an
+ * optional caller sub-key.
+ *
+ * - `routeKey` is React Navigation's stable per-route `route.key`.
+ * - `subKey` distinguishes multiple scrollables that share a single route.
+ *
+ * Returns `null` when there is no route key to anchor against (the scrollable
+ * is not inside a navigator), which the caller treats as "do not persist".
+ */
+export function deriveScrollKey(
+  routeKey: string | undefined,
+  subKey?: string,
+): string | null {
+  if (!routeKey) return null;
+  if (subKey === undefined || subKey === '') return routeKey;
+  return `${routeKey}${COMPOSITE_KEY_SEPARATOR}${subKey}`;
+}
+
+/**
+ * In-memory map of `scrollKey -> last-known scroll offset`.
+ *
+ * Mirrors the semantics of Bluesky's `Map<screenKey, scrollY>`: offsets live
+ * only for the lifetime of the document/session. We never persist them — a
+ * full reload should start at the top — and we never auto-evict, because a
+ * route can be revisited via browser Forward/Back long after it blurred.
+ */
+export class ScrollOffsetStore {
+  private readonly offsets = new Map<string, number>();
+
+  /** Persist the offset for a key. A negative offset is clamped to 0. */
+  save(key: string, offset: number): void {
+    this.offsets.set(key, offset > 0 ? offset : 0);
+  }
+
+  /**
+   * Read the saved offset for a key. Returns `0` when nothing was saved, so
+   * callers can restore unconditionally (an unseen list restores to the top).
+   */
+  read(key: string): number {
+    return this.offsets.get(key) ?? 0;
+  }
+
+  /** Whether an offset was ever saved for this key. */
+  has(key: string): boolean {
+    return this.offsets.has(key);
+  }
+
+  /** Drop a saved offset (e.g. when a route is permanently removed). */
+  forget(key: string): void {
+    this.offsets.delete(key);
+  }
+
+  /** Clear every saved offset. Primarily for tests and full resets. */
+  clear(): void {
+    this.offsets.clear();
+  }
+
+  /** Number of distinct keys currently tracked. */
+  get size(): number {
+    return this.offsets.size;
+  }
+}

package/src/scroll/types.ts

@@ -0,0 +1,48 @@
+import type { ReactNode, RefObject } from 'react';
+
+/**
+ * Anything `useScrollRestoration` knows how to read/write a vertical scroll
+ * offset from. The hook accepts a ref to one of these:
+ *
+ * - a React Native `ScrollView` / `FlatList` ref (which on web is backed by a
+ *   DOM node and exposes `getScrollableNode()`),
+ * - a raw DOM element ref (when a component renders its own scroll container),
+ * - the literal `'window'` sentinel, for the rare layout where the list IS the
+ *   window scroller (matches Bluesky's default).
+ *
+ * Native never reads any of these — the native hook is a no-op — so the type is
+ * intentionally permissive rather than coupled to a specific RN class.
+ */
+export interface ScrollableHandle {
+  /** Imperative scroll API exposed by RN scrollables. */
+  scrollTo?: (options: { x?: number; y?: number; animated?: boolean }) => void;
+  /** Web/RNW path: returns the underlying DOM node. */
+  getScrollableNode?: () => unknown;
+}
+
+/**
+ * The accepted ref shapes. `'window'` is a sentinel for the document scroller.
+ */
+export type ScrollRestorationTarget =
+  | RefObject<ScrollableHandle | null>
+  | RefObject<unknown>
+  | 'window';
+
+export interface UseScrollRestorationOptions {
+  /**
+   * Sub-key to disambiguate multiple scrollables that live on the same route
+   * (e.g. the tabs of a profile screen). Combined with the active route key to
+   * form the storage key. Omit when a route has a single scrollable.
+   */
+  key?: string;
+  /**
+   * When `false`, the hook is inert (saves and restores are skipped). Useful to
+   * gate restoration behind a feature flag without changing call sites.
+   * Defaults to `true`.
+   */
+  enabled?: boolean;
+}
+
+export interface ScrollRestorationProviderProps {
+  children: ReactNode;
+}