@ankhorage/surface 9.4.10 → 9.4.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ankhorage/surface
 
+## 9.4.11
+
+### Patch Changes
+
+- 45f3725: Keep responsive rendering stable through server hydration before applying browser viewport changes.
+
 ## 9.4.10
 
 ### Patch Changes

package/README.md

@@ -3,7 +3,7 @@
 
 # @ankhorage/surface
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v9.4.10](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![paradox: warnings](././paradox/badges/docs.svg)
+![license: MIT](././paradox/badges/license.svg) ![npm: v9.4.11](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![paradox: warnings](././paradox/badges/docs.svg)
 
 Cross-platform UI foundation for React Native and React Native Web. Provides theming, layout primitives, and core building blocks for modern apps.
 

package/dist/core/responsive/ResponsiveProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveProvider.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/ResponsiveProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAY7E;AAED,wBAAgB,oBAAoB,IAAI,iBAAiB,CAQxD"}
+{"version":3,"file":"ResponsiveProvider.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/ResponsiveProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAKjD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAY7E;AAED,wBAAgB,oBAAoB,IAAI,iBAAiB,CAQxD"}

package/dist/core/responsive/ResponsiveProvider.js

@@ -1,9 +1,9 @@
 import React, { createContext, use, useMemo } from 'react';
-import { useWindowDimensions } from 'react-native';
 import { getBreakpointFromWidth } from './getBreakpointFromWidth';
+import { useResponsiveWidth } from './useResponsiveWidth';
 const ResponsiveContext = createContext(null);
 export function ResponsiveProvider({ children }) {
-    const { width } = useWindowDimensions();
+    const width = useResponsiveWidth();
     const value = useMemo(() => ({
         breakpoint: getBreakpointFromWidth(width),
         width,

package/dist/core/responsive/ResponsiveProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveProvider.js","sourceRoot":"","sources":["../../../src/core/responsive/ResponsiveProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,iBAAiB,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAExE,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAiC;IAC5E,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAExC,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,CAAC,KAAK,CAAC;QACzC,KAAK;KACN,CAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC;AACzE,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,MAAM,OAAO,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC,CAAC;IACnF,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["import React, { createContext, use, useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\n\nimport { getBreakpointFromWidth } from './getBreakpointFromWidth';\nimport type { ResponsiveRuntime } from './types';\n\nconst ResponsiveContext = createContext<ResponsiveRuntime | null>(null);\n\nexport function ResponsiveProvider({ children }: { children: React.ReactNode }) {\n  const { width } = useWindowDimensions();\n\n  const value = useMemo<ResponsiveRuntime>(\n    () => ({\n      breakpoint: getBreakpointFromWidth(width),\n      width,\n    }),\n    [width],\n  );\n\n  return <ResponsiveContext value={value}>{children}</ResponsiveContext>;\n}\n\nexport function useResponsiveRuntime(): ResponsiveRuntime {\n  const runtime = use(ResponsiveContext);\n\n  if (!runtime) {\n    throw new Error('useResponsiveRuntime must be used within a ResponsiveProvider');\n  }\n\n  return runtime;\n}\n"]}
+{"version":3,"file":"ResponsiveProvider.js","sourceRoot":"","sources":["../../../src/core/responsive/ResponsiveProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,iBAAiB,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAExE,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAiC;IAC5E,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,CAAC,KAAK,CAAC;QACzC,KAAK;KACN,CAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC;AACzE,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,MAAM,OAAO,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC,CAAC;IACnF,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["import React, { createContext, use, useMemo } from 'react';\n\nimport { getBreakpointFromWidth } from './getBreakpointFromWidth';\nimport type { ResponsiveRuntime } from './types';\nimport { useResponsiveWidth } from './useResponsiveWidth';\n\nconst ResponsiveContext = createContext<ResponsiveRuntime | null>(null);\n\nexport function ResponsiveProvider({ children }: { children: React.ReactNode }) {\n  const width = useResponsiveWidth();\n\n  const value = useMemo<ResponsiveRuntime>(\n    () => ({\n      breakpoint: getBreakpointFromWidth(width),\n      width,\n    }),\n    [width],\n  );\n\n  return <ResponsiveContext value={value}>{children}</ResponsiveContext>;\n}\n\nexport function useResponsiveRuntime(): ResponsiveRuntime {\n  const runtime = use(ResponsiveContext);\n\n  if (!runtime) {\n    throw new Error('useResponsiveRuntime must be used within a ResponsiveProvider');\n  }\n\n  return runtime;\n}\n"]}

package/dist/core/responsive/useBreakpoint.d.ts

@@ -1,3 +1,4 @@
 import type { Breakpoint } from './types';
+/*** Returns the hydration-stable responsive breakpoint without requiring a provider. */
 export declare function useBreakpoint(): Breakpoint;
 //# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/core/responsive/useBreakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/useBreakpoint.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,aAAa,IAAI,UAAU,CAG1C"}
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/useBreakpoint.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,wFAAwF;AACxF,wBAAgB,aAAa,IAAI,UAAU,CAG1C"}

package/dist/core/responsive/useBreakpoint.js

@@ -1,7 +1,8 @@
-import { useWindowDimensions } from 'react-native';
 import { getBreakpointFromWidth } from './getBreakpointFromWidth';
+import { useResponsiveWidth } from './useResponsiveWidth';
+/*** Returns the hydration-stable responsive breakpoint without requiring a provider. */
 export function useBreakpoint() {
-    const { width } = useWindowDimensions();
+    const width = useResponsiveWidth();
     return getBreakpointFromWidth(width);
 }
 //# sourceMappingURL=useBreakpoint.js.map

package/dist/core/responsive/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/core/responsive/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACxC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC;AACvC,CAAC","sourcesContent":["import { useWindowDimensions } from 'react-native';\n\nimport { getBreakpointFromWidth } from './getBreakpointFromWidth';\nimport type { Breakpoint } from './types';\n\nexport function useBreakpoint(): Breakpoint {\n  const { width } = useWindowDimensions();\n  return getBreakpointFromWidth(width);\n}\n"]}
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/core/responsive/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wFAAwF;AACxF,MAAM,UAAU,aAAa;IAC3B,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAC;IACnC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC;AACvC,CAAC","sourcesContent":["import { getBreakpointFromWidth } from './getBreakpointFromWidth';\nimport type { Breakpoint } from './types';\nimport { useResponsiveWidth } from './useResponsiveWidth';\n\n/*** Returns the hydration-stable responsive breakpoint without requiring a provider. */\nexport function useBreakpoint(): Breakpoint {\n  const width = useResponsiveWidth();\n  return getBreakpointFromWidth(width);\n}\n"]}

package/dist/core/responsive/useResponsiveWidth.d.ts

@@ -0,0 +1,3 @@
+/*** Reads the viewport width without changing the server and hydration render. */
+export declare function useResponsiveWidth(): number;
+//# sourceMappingURL=useResponsiveWidth.d.ts.map

package/dist/core/responsive/useResponsiveWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveWidth.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/useResponsiveWidth.ts"],"names":[],"mappings":"AAKA,kFAAkF;AAClF,wBAAgB,kBAAkB,IAAI,MAAM,CAE3C"}

package/dist/core/responsive/useResponsiveWidth.js

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from 'react';
+import { Dimensions } from 'react-native';
+const serverWidth = 0;
+/*** Reads the viewport width without changing the server and hydration render. */
+export function useResponsiveWidth() {
+    return useSyncExternalStore(subscribeToWindowDimensions, getWindowWidth, getServerWidth);
+}
+/*** Subscribes to viewport changes after hydration. */
+function subscribeToWindowDimensions(onStoreChange) {
+    const subscription = Dimensions.addEventListener('change', onStoreChange);
+    return () => subscription.remove();
+}
+/*** Returns the current native or browser viewport width. */
+function getWindowWidth() {
+    return Dimensions.get('window').width;
+}
+/*** Supplies the deterministic responsive width used by SSR and first hydration. */
+function getServerWidth() {
+    return serverWidth;
+}
+//# sourceMappingURL=useResponsiveWidth.js.map

package/dist/core/responsive/useResponsiveWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveWidth.js","sourceRoot":"","sources":["../../../src/core/responsive/useResponsiveWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,WAAW,GAAG,CAAC,CAAC;AAEtB,kFAAkF;AAClF,MAAM,UAAU,kBAAkB;IAChC,OAAO,oBAAoB,CAAC,2BAA2B,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC;AAC3F,CAAC;AAED,uDAAuD;AACvD,SAAS,2BAA2B,CAAC,aAAyB;IAC5D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IAC1E,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;AACrC,CAAC;AAED,6DAA6D;AAC7D,SAAS,cAAc;IACrB,OAAO,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;AACxC,CAAC;AAED,oFAAoF;AACpF,SAAS,cAAc;IACrB,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["import { useSyncExternalStore } from 'react';\nimport { Dimensions } from 'react-native';\n\nconst serverWidth = 0;\n\n/*** Reads the viewport width without changing the server and hydration render. */\nexport function useResponsiveWidth(): number {\n  return useSyncExternalStore(subscribeToWindowDimensions, getWindowWidth, getServerWidth);\n}\n\n/*** Subscribes to viewport changes after hydration. */\nfunction subscribeToWindowDimensions(onStoreChange: () => void): () => void {\n  const subscription = Dimensions.addEventListener('change', onStoreChange);\n  return () => subscription.remove();\n}\n\n/*** Returns the current native or browser viewport width. */\nfunction getWindowWidth(): number {\n  return Dimensions.get('window').width;\n}\n\n/*** Supplies the deterministic responsive width used by SSR and first hydration. */\nfunction getServerWidth(): number {\n  return serverWidth;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "9.4.10",
+  "version": "9.4.11",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -113,7 +113,7 @@
   },
   "devDependencies": {
     "@ankhorage/capability": "^0.2.2",
-    "@ankhorage/devtools": "^2.3.23",
+    "@ankhorage/devtools": "^2.3.24",
     "@ankhorage/paradox": "^0.3.5",
     "@react-native-vector-icons/fontawesome": "^13.1.5",
     "@react-native-vector-icons/fontawesome5": "^13.1.5",

package/src/core/responsive/ResponsiveProvider.tsx

@@ -1,13 +1,13 @@
 import React, { createContext, use, useMemo } from 'react';
-import { useWindowDimensions } from 'react-native';
 
 import { getBreakpointFromWidth } from './getBreakpointFromWidth';
 import type { ResponsiveRuntime } from './types';
+import { useResponsiveWidth } from './useResponsiveWidth';
 
 const ResponsiveContext = createContext<ResponsiveRuntime | null>(null);
 
 export function ResponsiveProvider({ children }: { children: React.ReactNode }) {
-  const { width } = useWindowDimensions();
+  const width = useResponsiveWidth();
 
   const value = useMemo<ResponsiveRuntime>(
     () => ({

package/src/core/responsive/useBreakpoint.ts

@@ -1,9 +1,9 @@
-import { useWindowDimensions } from 'react-native';
-
 import { getBreakpointFromWidth } from './getBreakpointFromWidth';
 import type { Breakpoint } from './types';
+import { useResponsiveWidth } from './useResponsiveWidth';
 
+/*** Returns the hydration-stable responsive breakpoint without requiring a provider. */
 export function useBreakpoint(): Breakpoint {
-  const { width } = useWindowDimensions();
+  const width = useResponsiveWidth();
   return getBreakpointFromWidth(width);
 }

package/src/core/responsive/useResponsiveWidth.ts

@@ -0,0 +1,25 @@
+import { useSyncExternalStore } from 'react';
+import { Dimensions } from 'react-native';
+
+const serverWidth = 0;
+
+/*** Reads the viewport width without changing the server and hydration render. */
+export function useResponsiveWidth(): number {
+  return useSyncExternalStore(subscribeToWindowDimensions, getWindowWidth, getServerWidth);
+}
+
+/*** Subscribes to viewport changes after hydration. */
+function subscribeToWindowDimensions(onStoreChange: () => void): () => void {
+  const subscription = Dimensions.addEventListener('change', onStoreChange);
+  return () => subscription.remove();
+}
+
+/*** Returns the current native or browser viewport width. */
+function getWindowWidth(): number {
+  return Dimensions.get('window').width;
+}
+
+/*** Supplies the deterministic responsive width used by SSR and first hydration. */
+function getServerWidth(): number {
+  return serverWidth;
+}

package/src/webAcceptance.test.tsx

@@ -2,7 +2,18 @@ import { expect, mock, test } from 'bun:test';
 import { Window } from 'happy-dom';
 import React, { act } from 'react';
 import { renderToString } from 'react-dom/server';
-import * as ReactNativeWeb from 'react-native-web';
+
+const browserWindow = new Window({ url: 'https://surface.test/' });
+Object.assign(globalThis, {
+  IS_REACT_ACT_ENVIRONMENT: true,
+  Node: browserWindow.Node,
+  ShadowRoot: browserWindow.ShadowRoot,
+  document: browserWindow.document,
+  navigator: browserWindow.navigator,
+  window: browserWindow,
+});
+
+const ReactNativeWeb = await import('react-native-web');
 
 await mock.module('react-native', () => ReactNativeWeb);
 
@@ -10,7 +21,7 @@ const scrollContentStyle = { padding: 4 };
 
 const { Grid, ScrollView, View } = await import('./features/layout/public');
 const { KeyboardAvoidingView } = await import('./features/keyboard-avoiding-view/public');
-const { Show } = await import('./core/responsive/Show');
+const { Show, useBreakpoint } = await import('./core/responsive');
 const { OverlayProvider } = await import('./internal/overlay/OverlayProvider');
 const { ThemeProvider } = await import('./features/theme/runtime');
 
@@ -24,34 +35,38 @@ function ResponsiveAcceptanceTree() {
             <ReactNativeWeb.View testID="grid-second" />
           </Grid>
           <Show
-            fallback={<ReactNativeWeb.Text>static-fallback</ReactNativeWeb.Text>}
+            fallback={
+              <ReactNativeWeb.View testID="mobile-branch">
+                <ReactNativeWeb.Text>static-fallback</ReactNativeWeb.Text>
+              </ReactNativeWeb.View>
+            }
             when={{ base: false, md: true }}
           >
-            <ReactNativeWeb.Text>wide-content</ReactNativeWeb.Text>
+            <ReactNativeWeb.Text testID="desktop-branch">wide-content</ReactNativeWeb.Text>
           </Show>
         </ScrollView>
       </View>
+      <BreakpointProbe />
     </ThemeProvider>
   );
 }
 
-test('RN Web 0.21 statically renders and hydrates representative responsive primitives', async () => {
+function BreakpointProbe() {
+  return <ReactNativeWeb.Text testID="breakpoint-probe">{useBreakpoint()}</ReactNativeWeb.Text>;
+}
+
+test('RN Web 0.21 preserves SSR responsive structure during desktop hydration', async () => {
+  act(() => setViewportWidth(0));
   const markup = renderToString(<ResponsiveAcceptanceTree />);
 
   expect(markup).toContain('data-testid="container"');
   expect(markup).toContain('data-testid="scroll-view"');
   expect(markup).toContain('data-testid="grid"');
+  expect(markup).toContain('base');
   expect(markup).toContain('static-fallback');
   expect(markup).not.toContain('wide-content');
 
-  const browserWindow = new Window({ url: 'https://surface.test/' });
-  Object.assign(globalThis, {
-    IS_REACT_ACT_ENVIRONMENT: true,
-    Node: browserWindow.Node,
-    document: browserWindow.document,
-    navigator: browserWindow.navigator,
-    window: browserWindow,
-  });
+  act(() => setViewportWidth(1440));
   const container = browserWindow.document.createElement('div');
   container.innerHTML = markup;
   browserWindow.document.body.append(container);
@@ -64,25 +79,66 @@ test('RN Web 0.21 statically renders and hydrates representative responsive prim
   try {
     const { hydrateRoot } = await import('react-dom/client');
     const root = hydrateRoot(container as unknown as Element, <ResponsiveAcceptanceTree />);
+
+    expect(container.querySelector('[data-testid="mobile-branch"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="desktop-branch"]')).toBeNull();
+    expect(container.querySelector('[data-testid="breakpoint-probe"]')?.textContent).toBe('base');
     await act(async () => Promise.resolve());
 
     expect(container.querySelector('[data-testid="container"]')).not.toBeNull();
     expect(container.querySelector('[data-testid="scroll-view"]')).not.toBeNull();
     expect(container.querySelectorAll('[data-testid^="grid-"]')).toHaveLength(2);
+    expect(container.querySelector('[data-testid="mobile-branch"]')).toBeNull();
+    expect(container.querySelector('[data-testid="desktop-branch"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="breakpoint-probe"]')?.textContent).toBe('xl');
+    expect(hydrationErrors).toEqual([]);
+
+    act(() => root.unmount());
+  } finally {
+    console.error = originalError;
+    container.remove();
+  }
+});
+
+test('RN Web 0.21 keeps the server responsive structure at a narrow viewport', async () => {
+  act(() => setViewportWidth(0));
+  const markup = renderToString(<ResponsiveAcceptanceTree />);
+  act(() => setViewportWidth(375));
+  const container = browserWindow.document.createElement('div');
+  container.innerHTML = markup;
+  browserWindow.document.body.append(container);
+  const hydrationErrors: string[] = [];
+  const originalError = console.error;
+  console.error = (...values: unknown[]) => {
+    hydrationErrors.push(values.map(String).join(' '));
+  };
+
+  try {
+    const { hydrateRoot } = await import('react-dom/client');
+    const root = hydrateRoot(container as unknown as Element, <ResponsiveAcceptanceTree />);
+    await act(async () => Promise.resolve());
+
+    expect(container.querySelector('[data-testid="mobile-branch"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="desktop-branch"]')).toBeNull();
+    expect(container.querySelector('[data-testid="breakpoint-probe"]')?.textContent).toBe('base');
+    expect(container.querySelectorAll('[data-testid^="grid-"]')).toHaveLength(2);
     expect(hydrationErrors).toEqual([]);
 
     act(() => root.unmount());
   } finally {
     console.error = originalError;
-    browserWindow.close();
-    Reflect.deleteProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT');
-    Reflect.deleteProperty(globalThis, 'Node');
-    Reflect.deleteProperty(globalThis, 'document');
-    Reflect.deleteProperty(globalThis, 'navigator');
-    Reflect.deleteProperty(globalThis, 'window');
+    container.remove();
   }
 });
 
+function setViewportWidth(width: number) {
+  Object.defineProperty(browserWindow.document.documentElement, 'clientWidth', {
+    configurable: true,
+    value: width,
+  });
+  browserWindow.dispatchEvent(new browserWindow.Event('resize'));
+}
+
 test('RN Web 0.21 compiles box-none overlay pointer events into a hit-test-safe class', () => {
   const markup = renderToString(
     <OverlayProvider>