@ankhorage/surface 9.4.10 → 9.4.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ankhorage/surface
 
+## 9.4.12
+
+### Patch Changes
+
+- 5340e24: Support controlled pull-to-refresh state and callbacks through `ScrollView`.
+
+## 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.12](././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/dist/features/layout/adapters/inbound/ScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAIhE,uFAAuF;AACvF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAwBhD"}
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAIhE,uFAAuF;AACvF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAiChD"}

package/dist/features/layout/adapters/inbound/ScrollView.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView as ReactNativeScrollView } from 'react-native';
+import { RefreshControl, ScrollView as ReactNativeScrollView, } from 'react-native';
 import { useResponsiveRuntime } from '../../../../core/responsive';
 import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
 import { useTheme } from '../../../theme/runtime';
@@ -11,17 +11,23 @@ export function ScrollView(props) {
     const visual = splitVisualProps(spacing.rest);
     const dimensions = splitDimensionProps(visual.rest);
     const layout = splitLayoutProps(dimensions.rest);
-    const { children, contentContainerStyle, style, ...scrollProps } = layout.rest;
+    const { children, contentContainerStyle, style, refreshing, onRefresh, refreshControl: nativeRefreshControl, ...scrollProps } = layout.rest;
     const resolved = resolveViewStyles(theme, breakpoint, {
         ...spacing.styleProps,
         ...visual.styleProps,
         ...dimensions.styleProps,
         ...layout.styleProps,
     });
-    return (<ReactNativeScrollView {...scrollProps} contentContainerStyle={contentContainerStyle} style={[resolved, style]}>
+    return (<ReactNativeScrollView {...scrollProps} contentContainerStyle={contentContainerStyle} refreshControl={resolveRefreshControl({ nativeRefreshControl, onRefresh, refreshing })} style={[resolved, style]}>
       {children}
     </ReactNativeScrollView>);
 }
+/*** Creates the standard controlled React Native refresh control only when Surface refresh props are supplied. */
+function resolveRefreshControl({ nativeRefreshControl, onRefresh, refreshing, }) {
+    if (onRefresh === undefined && refreshing === undefined)
+        return nativeRefreshControl;
+    return <RefreshControl onRefresh={onRefresh} refreshing={refreshing ?? false}/>;
+}
 /*** Splits spacing-aware Surface props from native ScrollView props. */
 function splitSpacingProps(props) {
     const { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap, ...rest } = props;

package/dist/features/layout/adapters/inbound/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/ScrollView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ScrollView as ReactNativeScrollView } from 'react-native';\n\nimport { useResponsiveRuntime } from '../../../../core/responsive';\nimport type { ScrollViewProps } from '../../../../types/layout';\nimport { resolveViewStyles } from '../../../../utils/resolveViewStyles';\nimport { useTheme } from '../../../theme/runtime';\n\n/*** Renders the token-aware responsive Surface adapter for React Native ScrollView. */\nexport function ScrollView(props: ScrollViewProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n  const spacing = splitSpacingProps(props);\n  const visual = splitVisualProps(spacing.rest);\n  const dimensions = splitDimensionProps(visual.rest);\n  const layout = splitLayoutProps(dimensions.rest);\n  const { children, contentContainerStyle, style, ...scrollProps } = layout.rest;\n  const resolved = resolveViewStyles(theme, breakpoint, {\n    ...spacing.styleProps,\n    ...visual.styleProps,\n    ...dimensions.styleProps,\n    ...layout.styleProps,\n  });\n\n  return (\n    <ReactNativeScrollView\n      {...scrollProps}\n      contentContainerStyle={contentContainerStyle}\n      style={[resolved, style]}\n    >\n      {children}\n    </ReactNativeScrollView>\n  );\n}\n\n/*** Splits spacing-aware Surface props from native ScrollView props. */\nfunction splitSpacingProps(props: ScrollViewProps) {\n  const { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap, ...rest } =\n    props;\n  return {\n    rest,\n    styleProps: { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap },\n  };\n}\n\n/*** Splits token-aware visual Surface props from native ScrollView props. */\nfunction splitVisualProps(props: ReturnType<typeof splitSpacingProps>['rest']) {\n  const { bg, radius, borderWidth, borderColor, ...rest } = props;\n  return { rest, styleProps: { bg, radius, borderWidth, borderColor } };\n}\n\n/*** Splits responsive dimension Surface props from native ScrollView props. */\nfunction splitDimensionProps(props: ReturnType<typeof splitVisualProps>['rest']) {\n  const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...rest } = props;\n  return { rest, styleProps: { width, height, minWidth, maxWidth, minHeight, maxHeight } };\n}\n\n/*** Splits responsive flex and positioning Surface props from native ScrollView props. */\nfunction splitLayoutProps(props: ReturnType<typeof splitDimensionProps>['rest']) {\n  const {\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    direction,\n    align,\n    justify,\n    wrap,\n    alignSelf,\n    position,\n    top,\n    bottom,\n    left,\n    right,\n    overflow,\n    zIndex,\n    opacity,\n    ...rest\n  } = props;\n  return {\n    rest,\n    styleProps: {\n      flex,\n      flexGrow,\n      flexShrink,\n      flexBasis,\n      direction,\n      align,\n      justify,\n      wrap,\n      alignSelf,\n      position,\n      top,\n      bottom,\n      left,\n      right,\n      overflow,\n      zIndex,\n      opacity,\n    },\n  };\n}\n"]}
+{"version":3,"file":"ScrollView.js","sourceRoot":"","sources":["../../../../../src/features/layout/adapters/inbound/ScrollView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  RefreshControl,\n  ScrollView as ReactNativeScrollView,\n  type ScrollViewProps as ReactNativeScrollViewProps,\n} from 'react-native';\n\nimport { useResponsiveRuntime } from '../../../../core/responsive';\nimport type { ScrollViewProps } from '../../../../types/layout';\nimport { resolveViewStyles } from '../../../../utils/resolveViewStyles';\nimport { useTheme } from '../../../theme/runtime';\n\n/*** Renders the token-aware responsive Surface adapter for React Native ScrollView. */\nexport function ScrollView(props: ScrollViewProps) {\n  const { theme } = useTheme();\n  const { breakpoint } = useResponsiveRuntime();\n  const spacing = splitSpacingProps(props);\n  const visual = splitVisualProps(spacing.rest);\n  const dimensions = splitDimensionProps(visual.rest);\n  const layout = splitLayoutProps(dimensions.rest);\n  const {\n    children,\n    contentContainerStyle,\n    style,\n    refreshing,\n    onRefresh,\n    refreshControl: nativeRefreshControl,\n    ...scrollProps\n  } = layout.rest;\n  const resolved = resolveViewStyles(theme, breakpoint, {\n    ...spacing.styleProps,\n    ...visual.styleProps,\n    ...dimensions.styleProps,\n    ...layout.styleProps,\n  });\n\n  return (\n    <ReactNativeScrollView\n      {...scrollProps}\n      contentContainerStyle={contentContainerStyle}\n      refreshControl={resolveRefreshControl({ nativeRefreshControl, onRefresh, refreshing })}\n      style={[resolved, style]}\n    >\n      {children}\n    </ReactNativeScrollView>\n  );\n}\n\n/*** Creates the standard controlled React Native refresh control only when Surface refresh props are supplied. */\nfunction resolveRefreshControl({\n  nativeRefreshControl,\n  onRefresh,\n  refreshing,\n}: Pick<ScrollViewProps, 'onRefresh' | 'refreshing'> & {\n  nativeRefreshControl: ReactNativeScrollViewProps['refreshControl'];\n}) {\n  if (onRefresh === undefined && refreshing === undefined) return nativeRefreshControl;\n\n  return <RefreshControl onRefresh={onRefresh} refreshing={refreshing ?? false} />;\n}\n\n/*** Splits spacing-aware Surface props from native ScrollView props. */\nfunction splitSpacingProps(props: ScrollViewProps) {\n  const { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap, ...rest } =\n    props;\n  return {\n    rest,\n    styleProps: { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap },\n  };\n}\n\n/*** Splits token-aware visual Surface props from native ScrollView props. */\nfunction splitVisualProps(props: ReturnType<typeof splitSpacingProps>['rest']) {\n  const { bg, radius, borderWidth, borderColor, ...rest } = props;\n  return { rest, styleProps: { bg, radius, borderWidth, borderColor } };\n}\n\n/*** Splits responsive dimension Surface props from native ScrollView props. */\nfunction splitDimensionProps(props: ReturnType<typeof splitVisualProps>['rest']) {\n  const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...rest } = props;\n  return { rest, styleProps: { width, height, minWidth, maxWidth, minHeight, maxHeight } };\n}\n\n/*** Splits responsive flex and positioning Surface props from native ScrollView props. */\nfunction splitLayoutProps(props: ReturnType<typeof splitDimensionProps>['rest']) {\n  const {\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    direction,\n    align,\n    justify,\n    wrap,\n    alignSelf,\n    position,\n    top,\n    bottom,\n    left,\n    right,\n    overflow,\n    zIndex,\n    opacity,\n    ...rest\n  } = props;\n  return {\n    rest,\n    styleProps: {\n      flex,\n      flexGrow,\n      flexShrink,\n      flexBasis,\n      direction,\n      align,\n      justify,\n      wrap,\n      alignSelf,\n      position,\n      top,\n      bottom,\n      left,\n      right,\n      overflow,\n      zIndex,\n      opacity,\n    },\n  };\n}\n"]}

package/dist/types/layout.d.ts

@@ -82,6 +82,10 @@ export interface GridProps extends Omit<ViewProps, 'children'> {
 export interface ScrollViewProps extends ViewStyleProps, Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
     children?: React.ReactNode;
     contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Controlled visibility of the native refresh indicator. */
+    refreshing?: boolean;
+    /** Called by the native refresh control after a pull-to-refresh gesture. */
+    onRefresh?: () => void;
 }
 export {};
 //# sourceMappingURL=layout.d.ts.map

package/dist/types/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"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"}

package/dist/types/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type {\n  ScrollViewProps as ReactNativeScrollViewProps,\n  StyleProp,\n  ViewProps as ReactNativeViewProps,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Responsive } from '../core/responsive';\nimport type { SurfaceTheme } from './theme';\n\ntype SpaceToken = keyof SurfaceTheme['spacing'];\ntype RadiusToken = keyof SurfaceTheme['radii'];\ntype ColorToken = keyof SurfaceTheme['colors'];\ntype RadiusValue = number | RadiusToken;\n\nexport type SpaceValue = number | SpaceToken;\nexport type ColorValue = string | ColorToken;\n\nexport interface ViewStyleProps {\n  p?: Responsive<SpaceValue>;\n  px?: Responsive<SpaceValue>;\n  py?: Responsive<SpaceValue>;\n  pt?: Responsive<SpaceValue>;\n  pb?: Responsive<SpaceValue>;\n  pl?: Responsive<SpaceValue>;\n  pr?: Responsive<SpaceValue>;\n  m?: Responsive<SpaceValue>;\n  mx?: Responsive<SpaceValue>;\n  my?: Responsive<SpaceValue>;\n  mt?: Responsive<SpaceValue>;\n  mb?: Responsive<SpaceValue>;\n  ml?: Responsive<SpaceValue>;\n  mr?: Responsive<SpaceValue>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  columnGap?: Responsive<SpaceValue>;\n  bg?: Responsive<ColorValue>;\n  radius?: Responsive<RadiusValue>;\n  borderWidth?: Responsive<number>;\n  borderColor?: Responsive<ColorValue>;\n  width?: Responsive<number | string>;\n  height?: Responsive<number | string>;\n  minWidth?: Responsive<number | string>;\n  maxWidth?: Responsive<number | string>;\n  minHeight?: Responsive<number | string>;\n  maxHeight?: Responsive<number | string>;\n  flex?: Responsive<number>;\n  flexGrow?: Responsive<number>;\n  flexShrink?: Responsive<number>;\n  flexBasis?: Responsive<number | string>;\n  direction?: Responsive<'row' | 'column'>;\n  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n  justify?: Responsive<\n    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'\n  >;\n  wrap?: Responsive<'nowrap' | 'wrap'>;\n  alignSelf?: Responsive<ViewStyle['alignSelf']>;\n  position?: Responsive<ViewStyle['position']>;\n  top?: Responsive<number>;\n  bottom?: Responsive<number>;\n  left?: Responsive<number>;\n  right?: Responsive<number>;\n  overflow?: Responsive<ViewStyle['overflow']>;\n  zIndex?: Responsive<number>;\n  opacity?: Responsive<number>;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface ViewProps extends ViewStyleProps {\n  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];\n  accessibilityLabelledBy?: ReactNativeViewProps['accessibilityLabelledBy'];\n  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];\n  accessibilityState?: ReactNativeViewProps['accessibilityState'];\n  accessible?: ReactNativeViewProps['accessible'];\n  children?: React.ReactNode;\n  nativeID?: ReactNativeViewProps['nativeID'];\n  pointerEvents?: ReactNativeViewProps['pointerEvents'];\n  testID?: string;\n}\n\nexport interface DividerProps extends Omit<ViewProps, 'bg' | 'height' | 'width'> {\n  orientation?: 'horizontal' | 'vertical';\n  color?: ColorValue;\n  thickness?: number;\n}\n\nexport interface GridProps extends Omit<ViewProps, 'children'> {\n  children?: React.ReactNode;\n  cols?: Responsive<number>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  colGap?: Responsive<SpaceValue>;\n  minItemWidth?: Responsive<number>;\n}\n\nexport interface ScrollViewProps\n  extends\n    ViewStyleProps,\n    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {\n  children?: React.ReactNode;\n  contentContainerStyle?: StyleProp<ViewStyle>;\n}\n"]}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/types/layout.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type {\n  ScrollViewProps as ReactNativeScrollViewProps,\n  StyleProp,\n  ViewProps as ReactNativeViewProps,\n  ViewStyle,\n} from 'react-native';\n\nimport type { Responsive } from '../core/responsive';\nimport type { SurfaceTheme } from './theme';\n\ntype SpaceToken = keyof SurfaceTheme['spacing'];\ntype RadiusToken = keyof SurfaceTheme['radii'];\ntype ColorToken = keyof SurfaceTheme['colors'];\ntype RadiusValue = number | RadiusToken;\n\nexport type SpaceValue = number | SpaceToken;\nexport type ColorValue = string | ColorToken;\n\nexport interface ViewStyleProps {\n  p?: Responsive<SpaceValue>;\n  px?: Responsive<SpaceValue>;\n  py?: Responsive<SpaceValue>;\n  pt?: Responsive<SpaceValue>;\n  pb?: Responsive<SpaceValue>;\n  pl?: Responsive<SpaceValue>;\n  pr?: Responsive<SpaceValue>;\n  m?: Responsive<SpaceValue>;\n  mx?: Responsive<SpaceValue>;\n  my?: Responsive<SpaceValue>;\n  mt?: Responsive<SpaceValue>;\n  mb?: Responsive<SpaceValue>;\n  ml?: Responsive<SpaceValue>;\n  mr?: Responsive<SpaceValue>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  columnGap?: Responsive<SpaceValue>;\n  bg?: Responsive<ColorValue>;\n  radius?: Responsive<RadiusValue>;\n  borderWidth?: Responsive<number>;\n  borderColor?: Responsive<ColorValue>;\n  width?: Responsive<number | string>;\n  height?: Responsive<number | string>;\n  minWidth?: Responsive<number | string>;\n  maxWidth?: Responsive<number | string>;\n  minHeight?: Responsive<number | string>;\n  maxHeight?: Responsive<number | string>;\n  flex?: Responsive<number>;\n  flexGrow?: Responsive<number>;\n  flexShrink?: Responsive<number>;\n  flexBasis?: Responsive<number | string>;\n  direction?: Responsive<'row' | 'column'>;\n  align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n  justify?: Responsive<\n    'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'\n  >;\n  wrap?: Responsive<'nowrap' | 'wrap'>;\n  alignSelf?: Responsive<ViewStyle['alignSelf']>;\n  position?: Responsive<ViewStyle['position']>;\n  top?: Responsive<number>;\n  bottom?: Responsive<number>;\n  left?: Responsive<number>;\n  right?: Responsive<number>;\n  overflow?: Responsive<ViewStyle['overflow']>;\n  zIndex?: Responsive<number>;\n  opacity?: Responsive<number>;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface ViewProps extends ViewStyleProps {\n  accessibilityLabel?: ReactNativeViewProps['accessibilityLabel'];\n  accessibilityLabelledBy?: ReactNativeViewProps['accessibilityLabelledBy'];\n  accessibilityRole?: ReactNativeViewProps['accessibilityRole'];\n  accessibilityState?: ReactNativeViewProps['accessibilityState'];\n  accessible?: ReactNativeViewProps['accessible'];\n  children?: React.ReactNode;\n  nativeID?: ReactNativeViewProps['nativeID'];\n  pointerEvents?: ReactNativeViewProps['pointerEvents'];\n  testID?: string;\n}\n\nexport interface DividerProps extends Omit<ViewProps, 'bg' | 'height' | 'width'> {\n  orientation?: 'horizontal' | 'vertical';\n  color?: ColorValue;\n  thickness?: number;\n}\n\nexport interface GridProps extends Omit<ViewProps, 'children'> {\n  children?: React.ReactNode;\n  cols?: Responsive<number>;\n  gap?: Responsive<SpaceValue>;\n  rowGap?: Responsive<SpaceValue>;\n  colGap?: Responsive<SpaceValue>;\n  minItemWidth?: Responsive<number>;\n}\n\nexport interface ScrollViewProps\n  extends\n    ViewStyleProps,\n    Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {\n  children?: React.ReactNode;\n  contentContainerStyle?: StyleProp<ViewStyle>;\n  /** Controlled visibility of the native refresh indicator. */\n  refreshing?: boolean;\n  /** Called by the native refresh control after a pull-to-refresh gesture. */\n  onRefresh?: () => void;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "9.4.10",
+  "version": "9.4.12",
   "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/features/layout/adapters/inbound/ScrollView.test.tsx

@@ -0,0 +1,60 @@
+import { expect, mock, test } from 'bun:test';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import * as ReactNativeWeb from 'react-native-web';
+
+type RecordedScrollViewProps = Readonly<Record<string, unknown>>;
+
+const recordedScrollViewProps: RecordedScrollViewProps[] = [];
+
+await mock.module('react-native', () => ({
+  ...ReactNativeWeb,
+  RefreshControl: () => null,
+  ScrollView: (props: RecordedScrollViewProps) => {
+    recordedScrollViewProps.push(props);
+    return null;
+  },
+}));
+
+const { ScrollView } = await import('./ScrollView');
+const { ThemeProvider } = await import('../../../theme/runtime');
+
+/*** Renders Surface ScrollView under the production theme boundary and captures native props. */
+function renderScrollView(props: React.ComponentProps<typeof ScrollView>) {
+  recordedScrollViewProps.splice(0);
+  renderToString(
+    <ThemeProvider>
+      <ScrollView {...props} />
+    </ThemeProvider>,
+  );
+
+  const renderedProps = recordedScrollViewProps.at(-1);
+  if (renderedProps === undefined) throw new Error('ScrollView did not render.');
+  return renderedProps;
+}
+
+test('creates a controlled native RefreshControl from Surface refresh props', () => {
+  const onRefresh = () => undefined;
+  const rendered = renderScrollView({ onRefresh, refreshing: true });
+  const refreshControl = rendered.refreshControl as React.ReactElement<{
+    onRefresh?: () => void;
+    refreshing: boolean;
+  }>;
+
+  expect(refreshControl.type).toBeDefined();
+  expect(refreshControl.props).toEqual({ onRefresh, refreshing: true });
+});
+
+test('defaults a requested refresh control to its inactive controlled state', () => {
+  const rendered = renderScrollView({ onRefresh: () => undefined });
+  const refreshControl = rendered.refreshControl as React.ReactElement<{ refreshing: boolean }>;
+
+  expect(refreshControl.props.refreshing).toBe(false);
+});
+
+test('preserves a caller-provided native refresh control when Surface refresh props are absent', () => {
+  const nativeRefreshControl = <ReactNativeWeb.View />;
+  const rendered = renderScrollView({ refreshControl: nativeRefreshControl });
+
+  expect(rendered.refreshControl).toBe(nativeRefreshControl);
+});

package/src/features/layout/adapters/inbound/ScrollView.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { ScrollView as ReactNativeScrollView } from 'react-native';
+import {
+  RefreshControl,
+  ScrollView as ReactNativeScrollView,
+  type ScrollViewProps as ReactNativeScrollViewProps,
+} from 'react-native';
 
 import { useResponsiveRuntime } from '../../../../core/responsive';
 import type { ScrollViewProps } from '../../../../types/layout';
@@ -14,7 +18,15 @@ export function ScrollView(props: ScrollViewProps) {
   const visual = splitVisualProps(spacing.rest);
   const dimensions = splitDimensionProps(visual.rest);
   const layout = splitLayoutProps(dimensions.rest);
-  const { children, contentContainerStyle, style, ...scrollProps } = layout.rest;
+  const {
+    children,
+    contentContainerStyle,
+    style,
+    refreshing,
+    onRefresh,
+    refreshControl: nativeRefreshControl,
+    ...scrollProps
+  } = layout.rest;
   const resolved = resolveViewStyles(theme, breakpoint, {
     ...spacing.styleProps,
     ...visual.styleProps,
@@ -26,6 +38,7 @@ export function ScrollView(props: ScrollViewProps) {
     <ReactNativeScrollView
       {...scrollProps}
       contentContainerStyle={contentContainerStyle}
+      refreshControl={resolveRefreshControl({ nativeRefreshControl, onRefresh, refreshing })}
       style={[resolved, style]}
     >
       {children}
@@ -33,6 +46,19 @@ export function ScrollView(props: ScrollViewProps) {
   );
 }
 
+/*** Creates the standard controlled React Native refresh control only when Surface refresh props are supplied. */
+function resolveRefreshControl({
+  nativeRefreshControl,
+  onRefresh,
+  refreshing,
+}: Pick<ScrollViewProps, 'onRefresh' | 'refreshing'> & {
+  nativeRefreshControl: ReactNativeScrollViewProps['refreshControl'];
+}) {
+  if (onRefresh === undefined && refreshing === undefined) return nativeRefreshControl;
+
+  return <RefreshControl onRefresh={onRefresh} refreshing={refreshing ?? false} />;
+}
+
 /*** Splits spacing-aware Surface props from native ScrollView props. */
 function splitSpacingProps(props: ScrollViewProps) {
   const { p, px, py, pt, pb, pl, pr, m, mx, my, mt, mb, ml, mr, gap, rowGap, columnGap, ...rest } =

package/src/types/layout.ts

@@ -100,4 +100,8 @@ export interface ScrollViewProps
     Omit<ReactNativeScrollViewProps, 'children' | 'contentContainerStyle' | 'style'> {
   children?: React.ReactNode;
   contentContainerStyle?: StyleProp<ViewStyle>;
+  /** Controlled visibility of the native refresh indicator. */
+  refreshing?: boolean;
+  /** Called by the native refresh control after a pull-to-refresh gesture. */
+  onRefresh?: () => void;
 }

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>
@@ -109,3 +165,22 @@ test('RN Web 0.21 renders keyboard-safe content through the Surface layout bound
   expect(markup).toContain('data-testid="keyboard-safe"');
   expect(markup).toContain('Keyboard-safe content');
 });
+
+test('RN Web renders controlled refresh state without simulating a native pull gesture', () => {
+  const refreshSignals: undefined[] = [];
+  const markup = renderToString(
+    <ThemeProvider>
+      <ScrollView
+        onRefresh={() => refreshSignals.push(undefined)}
+        refreshing
+        testID="refreshable-scroll-view"
+      >
+        <ReactNativeWeb.Text>refreshable content</ReactNativeWeb.Text>
+      </ScrollView>
+    </ThemeProvider>,
+  );
+
+  expect(markup).toContain('data-testid="refreshable-scroll-view"');
+  expect(markup).toContain('refreshable content');
+  expect(refreshSignals).toEqual([]);
+});