diff --git a/.commitlintrc b/.commitlintrc
new file mode 100644
index 000000000..5731d4d04
--- /dev/null
+++ b/.commitlintrc
@@ -0,0 +1,30 @@
+{
+  "extends": [
+    "@commitlint/config-angular"
+  ],
+  "rules": {
+    "type-enum": [
+      2,
+      "always",
+      [
+        "build",
+        "ci",
+        "docs",
+        "site",
+        "feat",
+        "fix",
+        "perf",
+        "refactor",
+        "revert",
+        "style",
+        "test",
+        "chore"
+      ]
+    ],
+    "header-max-length": [
+      2,
+      "always",
+      100
+    ]
+  }
+}
diff --git a/.eslintignore b/.eslintignore
index 588f8e433..f5dc494b6 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -8,3 +8,4 @@ rollup.config.js
 site
 rust
 __tests__
+scripts
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 000000000..008dbf0ae
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,23 @@
+{
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "globals": { "G": true, "window": true, "document": true, "module": true },
+  "ignorePatterns": ["packages/g-devtool", "packages/g-webgpu-compiler", "packages/site"],
+  "rules": {
+    "no-fallthrough": 0,
+    "no-empty": 0,
+    "no-param-reassign": 0,
+    "no-redeclare": "off",
+    "no-useless-escape": "off",
+    "no-case-declarations": "off",
+    "no-constant-condition": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-shadow": 0,
+    "@typescript-eslint/no-parameter-properties": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-invalid-this": 0,
+    "@typescript-eslint/no-use-before-define": ["error", { "functions": false, "classes": false }],
+    "@typescript-eslint/no-redeclare": ["error"],
+    "@typescript-eslint/no-unused-vars": ["error", { "args": "none", "ignoreRestSiblings": true }]
+  }
+}
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 94358837c..000000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,44 +0,0 @@
-module.exports = {
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
-
-  globals: {
-    G: true,
-    window: true,
-    document: true,
-    module: true,
-  },
-
-  ignorePatterns: [
-    'packages/g-devtool',
-    'packages/g-webgpu-compiler',
-    'packages/site',
-  ],
-
-  rules: {
-    'no-fallthrough': 0,
-    'no-empty': 0,
-    'no-param-reassign': 0,
-    'no-redeclare': 'off',
-    'no-useless-escape': 'off',
-    'no-case-declarations': 'off',
-    'no-constant-condition': 'off',
-    '@typescript-eslint/no-empty-interface': 'off',
-    '@typescript-eslint/no-shadow': 0,
-    '@typescript-eslint/no-parameter-properties': 0,
-    '@typescript-eslint/ban-ts-comment': 0,
-    '@typescript-eslint/no-empty-function': 0,
-    '@typescript-eslint/no-invalid-this': 0,
-    '@typescript-eslint/no-use-before-define': [
-      'error',
-      { functions: false, classes: false },
-    ],
-    '@typescript-eslint/no-redeclare': ['error'],
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      {
-        args: 'none',
-        ignoreRestSiblings: true,
-      },
-    ],
-  },
-};
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 09d0ed8e1..43caf4ab4 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -6,6 +6,8 @@ jobs:
   test:
     name: Test
     runs-on: ubuntu-latest
+    env:
+      CI: true
     steps:
       - uses: actions/checkout@v3
 
diff --git a/.prettierignore b/.prettierignore
index 6dd950c92..61a7da042 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,4 +2,3 @@ esm
 lib
 dist
 build
-tsconfig.json
diff --git a/.prettierrc b/.prettierrc
index 994f89c50..443738842 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,5 +3,7 @@
   "singleQuote": true,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "printWidth": 80,
+  "proseWrap": "never"
 }
diff --git a/__tests__/demos/2d/circle.ts b/__tests__/demos/2d/circle.ts
index 3cc270c47..45c291150 100644
--- a/__tests__/demos/2d/circle.ts
+++ b/__tests__/demos/2d/circle.ts
@@ -1,4 +1,4 @@
-import { Circle } from '../../../packages/g';
+import { Circle } from '@antv/g';
 
 export async function circle(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/clippath.ts b/__tests__/demos/2d/clippath.ts
index 267aa5336..9aa03f60f 100644
--- a/__tests__/demos/2d/clippath.ts
+++ b/__tests__/demos/2d/clippath.ts
@@ -1,5 +1,5 @@
-import { Circle, Rect, Path, Group } from '../../../packages/g';
-import { Sector } from '../../../packages/g-components';
+import { Circle, Rect, Path, Group } from '@antv/g';
+import { Sector } from '@antv/g-components';
 
 export async function clipPath(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/custom-element.ts b/__tests__/demos/2d/custom-element.ts
index 4924d2b92..afaca90d9 100644
--- a/__tests__/demos/2d/custom-element.ts
+++ b/__tests__/demos/2d/custom-element.ts
@@ -1,5 +1,5 @@
-import { Path, Polyline, Line } from '../../../packages/g';
-import { Arrow } from '../../../packages/g-components';
+import { Path, Polyline, Line } from '@antv/g';
+import { Arrow } from '@antv/g-components';
 
 export async function customElement(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/ellipse.ts b/__tests__/demos/2d/ellipse.ts
index 6637d127c..218d51fd2 100644
--- a/__tests__/demos/2d/ellipse.ts
+++ b/__tests__/demos/2d/ellipse.ts
@@ -1,4 +1,4 @@
-import { Ellipse } from '../../../packages/g';
+import { Ellipse } from '@antv/g';
 
 export async function ellipse(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/get-point.ts b/__tests__/demos/2d/get-point.ts
index 0812993c7..aa00c126d 100644
--- a/__tests__/demos/2d/get-point.ts
+++ b/__tests__/demos/2d/get-point.ts
@@ -1,4 +1,4 @@
-import { Path, Polyline, Circle } from '../../../packages/g';
+import { Path, Polyline, Circle } from '@antv/g';
 
 export async function getPoint(context) {
   const { canvas, gui } = context;
diff --git a/__tests__/demos/2d/gradient.ts b/__tests__/demos/2d/gradient.ts
index dde079a9e..65d5768de 100644
--- a/__tests__/demos/2d/gradient.ts
+++ b/__tests__/demos/2d/gradient.ts
@@ -1,4 +1,4 @@
-import { Rect, HTML, Line } from '../../../packages/g';
+import { Rect, HTML, Line } from '@antv/g';
 
 export async function gradient(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/html.ts b/__tests__/demos/2d/html.ts
index 84161a49a..a9d984203 100644
--- a/__tests__/demos/2d/html.ts
+++ b/__tests__/demos/2d/html.ts
@@ -1,4 +1,4 @@
-import { HTML, Line, Rect, Text, CustomElement } from '../../../packages/g';
+import { HTML, Line, Rect, Text, CustomElement } from '@antv/g';
 
 export async function html(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/image.ts b/__tests__/demos/2d/image.ts
index 4ac828b53..6fb8ba4b9 100644
--- a/__tests__/demos/2d/image.ts
+++ b/__tests__/demos/2d/image.ts
@@ -1,4 +1,4 @@
-import { Image } from '../../../packages/g';
+import { Image } from '@antv/g';
 
 export async function image(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/line.ts b/__tests__/demos/2d/line.ts
index 11404cd35..3f3fa4c92 100644
--- a/__tests__/demos/2d/line.ts
+++ b/__tests__/demos/2d/line.ts
@@ -1,4 +1,4 @@
-import { Line } from '../../../packages/g';
+import { Line } from '@antv/g';
 
 export async function line(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/marker.ts b/__tests__/demos/2d/marker.ts
index 733190ff6..39439a9e4 100644
--- a/__tests__/demos/2d/marker.ts
+++ b/__tests__/demos/2d/marker.ts
@@ -1,4 +1,4 @@
-import { Path, Circle, Line, Rect, Image } from '../../../packages/g';
+import { Path, Circle, Line } from '@antv/g';
 
 export async function marker(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/path.ts b/__tests__/demos/2d/path.ts
index e01523608..846bc0020 100644
--- a/__tests__/demos/2d/path.ts
+++ b/__tests__/demos/2d/path.ts
@@ -1,4 +1,4 @@
-import { Path, Rect, Group } from '../../../packages/g';
+import { Path } from '@antv/g';
 
 export async function path(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/pattern.ts b/__tests__/demos/2d/pattern.ts
index 9153efe35..7cbe9d86a 100644
--- a/__tests__/demos/2d/pattern.ts
+++ b/__tests__/demos/2d/pattern.ts
@@ -1,4 +1,4 @@
-import { Rect, HTML } from '../../../packages/g';
+import { Rect, HTML } from '@antv/g';
 import SimplexNoise from 'simplex-noise';
 
 /**
diff --git a/__tests__/demos/2d/pattern2.ts b/__tests__/demos/2d/pattern2.ts
index 00f52d5ef..635dfcdb2 100644
--- a/__tests__/demos/2d/pattern2.ts
+++ b/__tests__/demos/2d/pattern2.ts
@@ -1,5 +1,5 @@
-import { Circle, Rect } from '../../../packages/g';
-import { dots, lines } from '../../../packages/g-pattern';
+import { Circle, Rect } from '@antv/g';
+import { dots, lines } from '@antv/g-pattern';
 import * as d3 from 'd3';
 
 export async function pattern2(context) {
diff --git a/__tests__/demos/2d/polygon.ts b/__tests__/demos/2d/polygon.ts
index 990d2d9e8..729fef555 100644
--- a/__tests__/demos/2d/polygon.ts
+++ b/__tests__/demos/2d/polygon.ts
@@ -1,4 +1,4 @@
-import { Polygon } from '../../../packages/g';
+import { Polygon } from '@antv/g';
 
 export async function polygon(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/polyline.ts b/__tests__/demos/2d/polyline.ts
index 836bb9cc3..3792e4195 100644
--- a/__tests__/demos/2d/polyline.ts
+++ b/__tests__/demos/2d/polyline.ts
@@ -1,4 +1,4 @@
-import { Polyline } from '../../../packages/g';
+import { Polyline } from '@antv/g';
 
 export async function polyline(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/rect.ts b/__tests__/demos/2d/rect.ts
index dbd54ff93..776fb2c85 100644
--- a/__tests__/demos/2d/rect.ts
+++ b/__tests__/demos/2d/rect.ts
@@ -1,4 +1,4 @@
-import { Rect } from '../../../packages/g';
+import { Rect } from '@antv/g';
 
 export async function rect(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/text.ts b/__tests__/demos/2d/text.ts
index c13b0f3ad..02989307b 100644
--- a/__tests__/demos/2d/text.ts
+++ b/__tests__/demos/2d/text.ts
@@ -1,4 +1,4 @@
-import { Text, Group } from '../../../packages/g';
+import { Text } from '@antv/g';
 
 export async function text(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/transform-group.ts b/__tests__/demos/2d/transform-group.ts
index 1bfdb18a8..22a3d2940 100644
--- a/__tests__/demos/2d/transform-group.ts
+++ b/__tests__/demos/2d/transform-group.ts
@@ -1,4 +1,4 @@
-import { CanvasEvent, Circle, Rect, Path, Group } from '../../../packages/g';
+import { CanvasEvent, Circle, Rect, Group } from '@antv/g';
 
 export async function transformGroup(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/transform-origin.ts b/__tests__/demos/2d/transform-origin.ts
index 742c81d9d..5b0f3eb80 100644
--- a/__tests__/demos/2d/transform-origin.ts
+++ b/__tests__/demos/2d/transform-origin.ts
@@ -1,4 +1,4 @@
-import { Circle, Line, Group } from '../../../packages/g';
+import { Circle, Line, Group } from '@antv/g';
 
 /**
  * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin
diff --git a/__tests__/demos/2d/transform-skew.ts b/__tests__/demos/2d/transform-skew.ts
index d9734691b..04ff61586 100644
--- a/__tests__/demos/2d/transform-skew.ts
+++ b/__tests__/demos/2d/transform-skew.ts
@@ -1,4 +1,4 @@
-import { Rect } from '../../../packages/g';
+import { Rect } from '@antv/g';
 
 /**
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
diff --git a/__tests__/demos/2d/transform-text.ts b/__tests__/demos/2d/transform-text.ts
index 046cc1462..6f9b89598 100644
--- a/__tests__/demos/2d/transform-text.ts
+++ b/__tests__/demos/2d/transform-text.ts
@@ -1,4 +1,4 @@
-import { Circle, Text } from '../../../packages/g';
+import { Circle, Text } from '@antv/g';
 
 export async function transformText(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/transform.ts b/__tests__/demos/2d/transform.ts
index aa023ae3e..1183f2285 100644
--- a/__tests__/demos/2d/transform.ts
+++ b/__tests__/demos/2d/transform.ts
@@ -1,4 +1,4 @@
-import { CanvasEvent, Circle, Rect, Path, Group } from '../../../packages/g';
+import { Circle, Rect, Group } from '@antv/g';
 
 export async function transform(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/2d/z-index.ts b/__tests__/demos/2d/z-index.ts
index 534078e7c..2aa07cc74 100644
--- a/__tests__/demos/2d/z-index.ts
+++ b/__tests__/demos/2d/z-index.ts
@@ -1,4 +1,4 @@
-import { Rect, Text } from '../../../packages/g';
+import { Rect, Text } from '@antv/g';
 
 export async function zIndex(context) {
   const { canvas, gui } = context;
diff --git a/__tests__/demos/3d/cube.ts b/__tests__/demos/3d/cube.ts
index 292c9a01c..42900e3f9 100644
--- a/__tests__/demos/3d/cube.ts
+++ b/__tests__/demos/3d/cube.ts
@@ -3,8 +3,8 @@ import {
   CubeGeometry,
   Mesh,
   Plugin as Plugin3D,
-} from '../../../packages/g-plugin-3d';
-import { Plugin as PluginControl } from '../../../packages/g-plugin-control';
+} from '@antv/g-plugin-3d';
+import { Plugin as PluginControl } from '@antv/g-plugin-control';
 
 export async function cube(context) {
   const { canvas, renderer } = context;
diff --git a/__tests__/demos/3d/cylinder.ts b/__tests__/demos/3d/cylinder.ts
index 000a0ff53..fc24a9ba4 100644
--- a/__tests__/demos/3d/cylinder.ts
+++ b/__tests__/demos/3d/cylinder.ts
@@ -4,8 +4,8 @@ import {
   DirectionalLight,
   Mesh,
   Plugin as Plugin3D,
-} from '../../../packages/g-plugin-3d';
-import { Plugin as PluginControl } from '../../../packages/g-plugin-control';
+} from '@antv/g-plugin-3d';
+import { Plugin as PluginControl } from '@antv/g-plugin-control';
 
 export async function cylinder(context) {
   const { canvas, renderer } = context;
diff --git a/__tests__/demos/3d/force.ts b/__tests__/demos/3d/force.ts
index a8a8ac275..dba94b9ae 100644
--- a/__tests__/demos/3d/force.ts
+++ b/__tests__/demos/3d/force.ts
@@ -4,23 +4,16 @@ import {
   forceManyBody,
   forceCenter,
 } from 'd3-force-3d';
-import {
-  Line,
-  Text,
-  Rect,
-  Image,
-  Circle,
-  CanvasEvent,
-} from '../../../packages/g';
+import { Line, Text, CanvasEvent } from '@antv/g';
 import {
   SphereGeometry,
   MeshPhongMaterial,
   DirectionalLight,
   Mesh,
   Plugin as Plugin3D,
-} from '../../../packages/g-plugin-3d';
-import { Plugin as PluginControl } from '../../../packages/g-plugin-control';
-import { ARButton, DeviceRenderer } from '../../../packages/g-webgl';
+} from '@antv/g-plugin-3d';
+import { Plugin as PluginControl } from '@antv/g-plugin-control';
+import { ARButton } from '@antv/g-webgl';
 
 // https://bl.ocks.org/vasturiano/f59675656258d3f490e9faa40828c0e7
 const dataset = {
diff --git a/__tests__/demos/3d/hit-test.ts b/__tests__/demos/3d/hit-test.ts
index e200caa35..043ab4511 100644
--- a/__tests__/demos/3d/hit-test.ts
+++ b/__tests__/demos/3d/hit-test.ts
@@ -1,4 +1,4 @@
-import { CanvasEvent, Canvas } from '../../../packages/g';
+import { CanvasEvent, Canvas } from '@antv/g';
 import {
   CubeGeometry,
   CylinderGeometry,
@@ -7,8 +7,8 @@ import {
   DirectionalLight,
   Mesh,
   Plugin as Plugin3D,
-} from '../../../packages/g-plugin-3d';
-import { ARButton, Renderer } from '../../../packages/g-webgl';
+} from '@antv/g-plugin-3d';
+import { ARButton, Renderer } from '@antv/g-webgl';
 
 /**
  * @see https://github.com/immersive-web/webxr-samples/blob/main/hit-test.html
diff --git a/__tests__/demos/3d/sphere.ts b/__tests__/demos/3d/sphere.ts
index 2648859c5..b0c18baa9 100644
--- a/__tests__/demos/3d/sphere.ts
+++ b/__tests__/demos/3d/sphere.ts
@@ -1,4 +1,4 @@
-import { CanvasEvent } from '../../../packages/g';
+import { CanvasEvent } from '@antv/g';
 import {
   MeshPhongMaterial,
   SphereGeometry,
@@ -6,8 +6,8 @@ import {
   Plugin as Plugin3D,
   DirectionalLight,
   AmbientLight,
-} from '../../../packages/g-plugin-3d';
-import { Plugin as PluginControl } from '../../../packages/g-plugin-control';
+} from '@antv/g-plugin-3d';
+import { Plugin as PluginControl } from '@antv/g-plugin-control';
 
 export async function sphere(context) {
   const { canvas, renderer } = context;
diff --git a/__tests__/demos/3d/torus.ts b/__tests__/demos/3d/torus.ts
index 85de0157f..2e0e4eb86 100644
--- a/__tests__/demos/3d/torus.ts
+++ b/__tests__/demos/3d/torus.ts
@@ -4,8 +4,8 @@ import {
   DirectionalLight,
   Mesh,
   Plugin as Plugin3D,
-} from '../../../packages/g-plugin-3d';
-import { Plugin as PluginControl } from '../../../packages/g-plugin-control';
+} from '@antv/g-plugin-3d';
+import { Plugin as PluginControl } from '@antv/g-plugin-control';
 
 export async function torus(context) {
   const { canvas, renderer } = context;
diff --git a/__tests__/demos/3d/webar.ts b/__tests__/demos/3d/webar.ts
index c543fe659..7758a26a4 100644
--- a/__tests__/demos/3d/webar.ts
+++ b/__tests__/demos/3d/webar.ts
@@ -1,12 +1,12 @@
-import { CanvasEvent } from '../../../packages/g';
+import { CanvasEvent } from '@antv/g';
 import {
   MeshBasicMaterial,
   CubeGeometry,
   Mesh,
   Plugin as Plugin3D,
-} from '../../../packages/g-plugin-3d';
-import { Plugin as PluginControl } from '../../../packages/g-plugin-control';
-import { ARButton, DeviceRenderer } from '../../../packages/g-webgl';
+} from '@antv/g-plugin-3d';
+import { Plugin as PluginControl } from '@antv/g-plugin-control';
+import { ARButton, DeviceRenderer } from '@antv/g-webgl';
 
 export async function ar(context) {
   const { canvas, renderer, container } = context;
diff --git a/__tests__/demos/animation/convert-to-path.ts b/__tests__/demos/animation/convert-to-path.ts
index 12064a853..62dbd731f 100644
--- a/__tests__/demos/animation/convert-to-path.ts
+++ b/__tests__/demos/animation/convert-to-path.ts
@@ -7,7 +7,7 @@ import {
   Polygon,
   Rect,
   convertToPath,
-} from '../../../packages/g';
+} from '@antv/g';
 
 export async function convert2Path(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/animation/effect.ts b/__tests__/demos/animation/effect.ts
index 188532401..b4c55cbcc 100644
--- a/__tests__/demos/animation/effect.ts
+++ b/__tests__/demos/animation/effect.ts
@@ -1,4 +1,4 @@
-import { Circle, Group, Text } from '../../../packages/g';
+import { Circle, Group, Text } from '@antv/g';
 
 /**
  * ported from https://github.com/wellyshen/use-web-animations/tree/master/src/animations
diff --git a/__tests__/demos/animation/line-dash.ts b/__tests__/demos/animation/line-dash.ts
index 3f89174f5..d04dae4e3 100644
--- a/__tests__/demos/animation/line-dash.ts
+++ b/__tests__/demos/animation/line-dash.ts
@@ -1,4 +1,4 @@
-import { Path } from '../../../packages/g';
+import { Path } from '@antv/g';
 
 export async function lineDash(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/animation/marching-ants.ts b/__tests__/demos/animation/marching-ants.ts
index 21b547d94..f88ebf4d6 100644
--- a/__tests__/demos/animation/marching-ants.ts
+++ b/__tests__/demos/animation/marching-ants.ts
@@ -1,4 +1,4 @@
-import { Circle, Rect } from '../../../packages/g';
+import { Circle, Rect } from '@antv/g';
 
 export async function marchingAnts(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/animation/morph.ts b/__tests__/demos/animation/morph.ts
index 8fa922521..ce65467c8 100644
--- a/__tests__/demos/animation/morph.ts
+++ b/__tests__/demos/animation/morph.ts
@@ -6,7 +6,7 @@ import {
   Polygon,
   Rect,
   convertToPath,
-} from '../../../packages/g';
+} from '@antv/g';
 
 export async function morph(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/animation/multiple-animations-per-element.ts b/__tests__/demos/animation/multiple-animations-per-element.ts
index ac8baff7b..86436ea0b 100644
--- a/__tests__/demos/animation/multiple-animations-per-element.ts
+++ b/__tests__/demos/animation/multiple-animations-per-element.ts
@@ -1,4 +1,4 @@
-import { Rect } from '../../../packages/g';
+import { Rect } from '@antv/g';
 
 export async function multipleAnimationsPerElement(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/animation/offset-path.ts b/__tests__/demos/animation/offset-path.ts
index 1f88cc136..945ef5e4f 100644
--- a/__tests__/demos/animation/offset-path.ts
+++ b/__tests__/demos/animation/offset-path.ts
@@ -1,4 +1,4 @@
-import { Circle, Path, Line, Polyline } from '../../../packages/g';
+import { Circle, Path, Line, Polyline } from '@antv/g';
 
 export async function offsetPath(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/animation/rotate.ts b/__tests__/demos/animation/rotate.ts
index eabbd8250..5863b8b6a 100644
--- a/__tests__/demos/animation/rotate.ts
+++ b/__tests__/demos/animation/rotate.ts
@@ -1,4 +1,4 @@
-import { Rect } from '../../../packages/g';
+import { Rect } from '@antv/g';
 
 export async function rotate(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/bugfix/1572.ts b/__tests__/demos/bugfix/1572.ts
index 97023a465..e1ac527ff 100644
--- a/__tests__/demos/bugfix/1572.ts
+++ b/__tests__/demos/bugfix/1572.ts
@@ -1,4 +1,4 @@
-import { Text, Rect } from '../../../packages/g';
+import { Text, Rect } from '@antv/g';
 
 export async function gradient_text(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/bugfix/1610.ts b/__tests__/demos/bugfix/1610.ts
index c04244b52..00aa6b0a4 100644
--- a/__tests__/demos/bugfix/1610.ts
+++ b/__tests__/demos/bugfix/1610.ts
@@ -1,5 +1,5 @@
-import { Canvas, Circle, HTML } from '../../../packages/g';
-import { Renderer as CanvasRenderer } from '../../../packages/g-canvas';
+import { Canvas, Circle, HTML } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 
 export async function html(context) {
   const { canvas, container } = context;
diff --git a/__tests__/demos/bugfix/1624.ts b/__tests__/demos/bugfix/1624.ts
index 2068f0052..e7f78ccce 100644
--- a/__tests__/demos/bugfix/1624.ts
+++ b/__tests__/demos/bugfix/1624.ts
@@ -1,4 +1,4 @@
-import { Canvas, Path } from '../../../packages/g';
+import { Path } from '@antv/g';
 
 export async function transform_path(context) {
   const { canvas, container } = context;
diff --git a/__tests__/demos/bugfix/1636.ts b/__tests__/demos/bugfix/1636.ts
index ffab9c534..f1d7a87fd 100644
--- a/__tests__/demos/bugfix/1636.ts
+++ b/__tests__/demos/bugfix/1636.ts
@@ -1,4 +1,4 @@
-import { Image, Group, Rect } from '../../../packages/g';
+import { Image, Group, Rect } from '@antv/g';
 
 export async function image(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/bugfix/1667.ts b/__tests__/demos/bugfix/1667.ts
index 46589065c..436567721 100644
--- a/__tests__/demos/bugfix/1667.ts
+++ b/__tests__/demos/bugfix/1667.ts
@@ -1,4 +1,4 @@
-import { Image, Line, Polyline, Rect, Path } from '../../../packages/g';
+import { Image, Line, Polyline, Rect, Path } from '@antv/g';
 
 export async function zoom(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/bugfix/1677.ts b/__tests__/demos/bugfix/1677.ts
index e735e6697..fceeea2bd 100644
--- a/__tests__/demos/bugfix/1677.ts
+++ b/__tests__/demos/bugfix/1677.ts
@@ -1,5 +1,5 @@
-import { Canvas, Circle } from '../../../packages/g';
-import { Renderer } from '../../../packages/g-canvas';
+import { Canvas, Circle } from '@antv/g';
+import { Renderer } from '@antv/g-canvas';
 
 export async function shadowroot_offset(context) {
   const { container } = context;
diff --git a/__tests__/demos/bugfix/1747.ts b/__tests__/demos/bugfix/1747.ts
new file mode 100644
index 000000000..b5f9b0c0c
--- /dev/null
+++ b/__tests__/demos/bugfix/1747.ts
@@ -0,0 +1,58 @@
+import { Text, Path, Rect } from '@antv/g';
+
+export async function test_pick(context) {
+  const { canvas } = context;
+  await canvas.ready;
+
+  const test = (shape, property) => {
+    shape.addEventListener('pointerenter', () => {
+      shape.style[property] = 'red';
+    });
+    shape.addEventListener('pointerleave', () => {
+      shape.style[property] = 'black';
+    });
+  };
+
+  const text = new Text({
+    style: {
+      text: 'test123213',
+      fontSize: 20,
+      x: 300,
+      y: 300,
+      cursor: 'pointer',
+      // transform: 'rotate(45)',
+    },
+  });
+  console.log(text.getBounds());
+
+  const path = new Path({
+    style: {
+      d: 'M 100,100 L 150,100 L 150,150 Z',
+      fill: 'black',
+      // transform: 'rotate(45)',
+      cursor: 'pointer',
+    },
+  });
+
+  test(text, 'fill');
+  test(path, 'fill');
+
+  canvas.appendChild(text);
+  // canvas.appendChild(path);
+
+  const { x, y, width, height } = text.getBBox();
+  const rect = new Rect({
+    style: {
+      x,
+      y,
+      width,
+      height,
+      stroke: 'black',
+      // transform: 'rotate(45)',
+      cursor: 'pointer',
+    },
+  });
+  test(rect, 'stroke');
+
+  // canvas.appendChild(rect);
+}
diff --git a/__tests__/demos/bugfix/dirty.ts b/__tests__/demos/bugfix/dirty.ts
index 86c0fe6ce..4dc32c927 100644
--- a/__tests__/demos/bugfix/dirty.ts
+++ b/__tests__/demos/bugfix/dirty.ts
@@ -1,4 +1,4 @@
-import { Circle } from '../../../packages/g';
+import { Circle } from '@antv/g';
 
 export async function dirty(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/bugfix/index.ts b/__tests__/demos/bugfix/index.ts
index 7f256967c..f48122b8c 100644
--- a/__tests__/demos/bugfix/index.ts
+++ b/__tests__/demos/bugfix/index.ts
@@ -6,3 +6,4 @@ export { image } from './1636';
 export { shadowroot_offset } from './1677';
 export { gradient_text } from './1572';
 export { zoom } from './1667';
+export { test_pick } from './1747';
diff --git a/__tests__/demos/bugfix/scale0.ts b/__tests__/demos/bugfix/scale0.ts
index 808a3abbd..813313691 100644
--- a/__tests__/demos/bugfix/scale0.ts
+++ b/__tests__/demos/bugfix/scale0.ts
@@ -1,4 +1,4 @@
-import { Circle } from '../../../packages/g';
+import { Circle } from '@antv/g';
 
 export async function scale0(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/camera/set-zoom-by-viewport-point.ts b/__tests__/demos/camera/set-zoom-by-viewport-point.ts
index e73b39bcc..9f0545d52 100644
--- a/__tests__/demos/camera/set-zoom-by-viewport-point.ts
+++ b/__tests__/demos/camera/set-zoom-by-viewport-point.ts
@@ -1,5 +1,5 @@
-import { Circle } from '../../../packages/g';
-import type { Camera, FederatedWheelEvent } from '../../../packages/g';
+import { Circle } from '@antv/g';
+import type { Camera, FederatedWheelEvent } from '@antv/g';
 
 export async function setZoomByViewportPoint(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/canvas/switch-renderer.ts b/__tests__/demos/canvas/switch-renderer.ts
index 8aefdf6cb..5944bd3a0 100644
--- a/__tests__/demos/canvas/switch-renderer.ts
+++ b/__tests__/demos/canvas/switch-renderer.ts
@@ -1,7 +1,7 @@
-import { Circle } from '../../../packages/g';
-import { Renderer as CanvasRenderer } from '../../../packages/g-canvas';
-import { Renderer as SVGRenderer } from '../../../packages/g-svg';
-import { Renderer as WebGLRenderer } from '../../../packages/g-webgl';
+import { Circle } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
 
 export async function switchRenderer(context) {
   const { canvas, gui } = context;
diff --git a/__tests__/demos/event/circle.ts b/__tests__/demos/event/circle.ts
index e29d738b2..6ca41bb64 100644
--- a/__tests__/demos/event/circle.ts
+++ b/__tests__/demos/event/circle.ts
@@ -1,4 +1,4 @@
-import { Circle, Group } from '../../../packages/g';
+import { Circle, Group } from '@antv/g';
 
 export async function circle(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/event/dblClick.ts b/__tests__/demos/event/dblClick.ts
index 02f771962..afdbd314e 100644
--- a/__tests__/demos/event/dblClick.ts
+++ b/__tests__/demos/event/dblClick.ts
@@ -1,4 +1,4 @@
-import { Circle, Text } from '../../../packages/g';
+import { Circle, Text } from '@antv/g';
 
 export async function dblClick(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/event/ellipse.ts b/__tests__/demos/event/ellipse.ts
index 7eadb10ee..cdfb2dc40 100644
--- a/__tests__/demos/event/ellipse.ts
+++ b/__tests__/demos/event/ellipse.ts
@@ -1,4 +1,4 @@
-import { Ellipse } from '../../../packages/g';
+import { Ellipse } from '@antv/g';
 
 export async function ellipse(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/event/hierarchy.ts b/__tests__/demos/event/hierarchy.ts
index 1f9f44ffa..64fad4238 100644
--- a/__tests__/demos/event/hierarchy.ts
+++ b/__tests__/demos/event/hierarchy.ts
@@ -1,4 +1,4 @@
-import { Circle, Path } from '../../../packages/g';
+import { Circle, Path } from '@antv/g';
 
 export async function hierarchy(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/event/image-non-transparent-pixel.ts b/__tests__/demos/event/image-non-transparent-pixel.ts
index 7a1e0f594..9541ec6fc 100644
--- a/__tests__/demos/event/image-non-transparent-pixel.ts
+++ b/__tests__/demos/event/image-non-transparent-pixel.ts
@@ -1,4 +1,4 @@
-import { Image } from '../../../packages/g';
+import { Image } from '@antv/g';
 
 export async function imageNonTransparentPixel(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/hammerjs/gesture.ts b/__tests__/demos/hammerjs/gesture.ts
index 1a2009948..4cad8c5ff 100644
--- a/__tests__/demos/hammerjs/gesture.ts
+++ b/__tests__/demos/hammerjs/gesture.ts
@@ -1,4 +1,4 @@
-import { Circle, Text } from '../../../packages/g';
+import { Circle, Text } from '@antv/g';
 import Hammer from 'hammerjs';
 
 export async function gesture(context) {
@@ -51,4 +51,4 @@ export async function gesture(context) {
   hammer.on('panleft panright tap press', (ev) => {
     text.attr('text', `${ev.type} gesture detected.`);
   });
-}
\ No newline at end of file
+}
diff --git a/__tests__/demos/lottie/assets.ts b/__tests__/demos/lottie/assets.ts
index c01a52b42..cb2acf0ec 100644
--- a/__tests__/demos/lottie/assets.ts
+++ b/__tests__/demos/lottie/assets.ts
@@ -1,4 +1,4 @@
-import { loadAnimation } from '../../../packages/g-lottie-player';
+import { loadAnimation } from '@antv/g-lottie-player';
 import * as d3 from 'd3';
 
 export async function assets(context) {
diff --git a/__tests__/demos/lottie/spring.ts b/__tests__/demos/lottie/spring.ts
index 7df732636..93d3fa04a 100644
--- a/__tests__/demos/lottie/spring.ts
+++ b/__tests__/demos/lottie/spring.ts
@@ -1,4 +1,4 @@
-import { loadAnimation } from '../../../packages/g-lottie-player';
+import { loadAnimation } from '@antv/g-lottie-player';
 import * as d3 from 'd3';
 
 export async function spring(context) {
diff --git a/__tests__/demos/perf/circles.ts b/__tests__/demos/perf/circles.ts
index eb5cfcabf..5b265cde4 100644
--- a/__tests__/demos/perf/circles.ts
+++ b/__tests__/demos/perf/circles.ts
@@ -1,4 +1,4 @@
-import { runtime, Circle } from '../../../packages/g';
+import { Circle } from '@antv/g';
 
 export async function circles(context) {
   const { canvas, container } = context;
diff --git a/__tests__/demos/plugin/a11y.ts b/__tests__/demos/plugin/a11y.ts
index 4c90b4332..ee44f1314 100644
--- a/__tests__/demos/plugin/a11y.ts
+++ b/__tests__/demos/plugin/a11y.ts
@@ -1,4 +1,4 @@
-import { Plugin } from '../../../packages/g-plugin-a11y';
+import { Plugin } from '@antv/g-plugin-a11y';
 import * as d3 from 'd3';
 
 export async function a11y(context) {
diff --git a/__tests__/demos/plugin/annotation.ts b/__tests__/demos/plugin/annotation.ts
index 0d8c56d7d..dbfd52987 100644
--- a/__tests__/demos/plugin/annotation.ts
+++ b/__tests__/demos/plugin/annotation.ts
@@ -7,8 +7,8 @@ import {
   Polyline,
   Polygon,
   runtime,
-} from '../../../packages/g';
-import { Plugin as PluginAnnotation } from '../../../packages/g-plugin-annotation';
+} from '@antv/g';
+import { Plugin as PluginAnnotation } from '@antv/g-plugin-annotation';
 
 let annotationPlugin;
 
diff --git a/__tests__/demos/plugin/camera.ts b/__tests__/demos/plugin/camera.ts
index 135663c50..8472e3f0b 100644
--- a/__tests__/demos/plugin/camera.ts
+++ b/__tests__/demos/plugin/camera.ts
@@ -1,4 +1,4 @@
-import { Circle } from '../../../packages/g';
+import { Circle } from '@antv/g';
 
 export async function camera(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/plugin/dragndrop-perf.ts b/__tests__/demos/plugin/dragndrop-perf.ts
index 13e3272f6..75492fdee 100644
--- a/__tests__/demos/plugin/dragndrop-perf.ts
+++ b/__tests__/demos/plugin/dragndrop-perf.ts
@@ -1,5 +1,5 @@
-import { Circle } from '../../../packages/g';
-import { Plugin as PluginDragndrop } from '../../../packages/g-plugin-dragndrop';
+import { Circle } from '@antv/g';
+import { Plugin as PluginDragndrop } from '@antv/g-plugin-dragndrop';
 export async function dragndropPerf(context) {
   const { canvas, renderer } = context;
 
diff --git a/__tests__/demos/plugin/dragndrop.ts b/__tests__/demos/plugin/dragndrop.ts
index b633440a1..cb16d9471 100644
--- a/__tests__/demos/plugin/dragndrop.ts
+++ b/__tests__/demos/plugin/dragndrop.ts
@@ -1,5 +1,5 @@
-import { Image, Text } from '../../../packages/g';
-import { Plugin as PluginDragndrop } from '../../../packages/g-plugin-dragndrop';
+import { Image, Text } from '@antv/g';
+import { Plugin as PluginDragndrop } from '@antv/g-plugin-dragndrop';
 export async function dragndrop(context) {
   const { canvas, renderer } = context;
 
diff --git a/__tests__/demos/plugin/exporter.ts b/__tests__/demos/plugin/exporter.ts
index 06449162d..748533d8e 100644
--- a/__tests__/demos/plugin/exporter.ts
+++ b/__tests__/demos/plugin/exporter.ts
@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
-import { HTML, Rectangle, runtime } from '../../../packages/g';
-import { ImageExporter } from '../../../packages/g-image-exporter';
+import { HTML, Rectangle } from '@antv/g';
+import { ImageExporter } from '@antv/g-image-exporter';
 
 export async function exporter(context) {
   const { canvas, gui } = context;
@@ -13,9 +13,7 @@ export async function exporter(context) {
 
   const drawBars = async () => {
     // 1. Access data
-    const dataset = await d3.json(
-      'https://gw.alipayobjects.com/os/bmw-prod/8e7cfeb6-28e5-4e78-8d16-c08468360f5f.json',
-    );
+    const dataset = await d3.json('https://gw.alipayobjects.com/os/bmw-prod/8e7cfeb6-28e5-4e78-8d16-c08468360f5f.json');
     const metricAccessor = (d) => d.humidity;
     const yAccessor = (d) => d.length;
 
@@ -33,10 +31,8 @@ export async function exporter(context) {
       boundedWidth: 0,
       boundedHeight: 0,
     };
-    dimensions.boundedWidth =
-      dimensions.width - dimensions.margin.left - dimensions.margin.right;
-    dimensions.boundedHeight =
-      dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
+    dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right;
+    dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
 
     // 3. Draw canvas
     const wrapper = d3.select(
@@ -45,10 +41,7 @@ export async function exporter(context) {
 
     const bounds = wrapper
       .append('g')
-      .style(
-        'transform',
-        `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`,
-      );
+      .style('transform', `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`);
 
     // 4. Create scales
 
@@ -58,11 +51,7 @@ export async function exporter(context) {
       .range([0, dimensions.boundedWidth])
       .nice();
 
-    const binsGenerator = d3
-      .bin()
-      .domain(xScale.domain())
-      .value(metricAccessor)
-      .thresholds(12);
+    const binsGenerator = d3.bin().domain(xScale.domain()).value(metricAccessor).thresholds(12);
 
     const bins = binsGenerator(dataset);
 
@@ -74,20 +63,14 @@ export async function exporter(context) {
 
     // 5. Draw data
     const binsGroup = bounds.append('g');
-    const binGroups = binsGroup
-      .selectAll('g')
-      .data(bins)
-      .join('g')
-      .attr('class', 'bin');
+    const binGroups = binsGroup.selectAll('g').data(bins).join('g').attr('class', 'bin');
 
     const barPadding = 1;
     const barRects = binGroups
       .append('rect')
       .attr('x', (d) => xScale(d.x0) + barPadding / 2)
       .attr('y', (d) => yScale(yAccessor(d)))
-      .attr('width', (d) =>
-        d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding]),
-      )
+      .attr('width', (d) => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding]))
       .attr('height', (d) => dimensions.boundedHeight - yScale(yAccessor(d)))
       .attr('fill', 'cornflowerblue')
       .on('mouseenter', function (e) {
@@ -191,12 +174,7 @@ export async function exporter(context) {
         ignoreElements: (element) => {
           return [gui.domElement].indexOf(element) > -1;
         },
-        clippingRegion: new Rectangle(
-          clippingRegionX,
-          clippingRegionY,
-          clippingRegionWidth,
-          clippingRegionHeight,
-        ),
+        clippingRegion: new Rectangle(clippingRegionX, clippingRegionY, clippingRegionWidth, clippingRegionHeight),
         beforeDrawImage: (context) => {
           if (enableBackgroundColor) {
             context.fillStyle = backgroundColor;
@@ -229,12 +207,7 @@ export async function exporter(context) {
         ignoreElements: (element) => {
           return [gui.domElement].indexOf(element) > -1;
         },
-        clippingRegion: new Rectangle(
-          clippingRegionX,
-          clippingRegionY,
-          clippingRegionWidth,
-          clippingRegionHeight,
-        ),
+        clippingRegion: new Rectangle(clippingRegionX, clippingRegionY, clippingRegionWidth, clippingRegionHeight),
         beforeDrawImage: (context) => {
           if (enableBackgroundColor) {
             context.fillStyle = backgroundColor;
@@ -282,12 +255,7 @@ export async function exporter(context) {
   exporterFolder.add(exporterConfig, 'enableBackgroundColor');
   exporterFolder.addColor(exporterConfig, 'backgroundColor');
   exporterFolder.add(exporterConfig, 'enableWatermark');
-  exporterFolder.add(exporterConfig, 'type', [
-    'image/png',
-    'image/jpeg',
-    'image/webp',
-    'image/bmp',
-  ]);
+  exporterFolder.add(exporterConfig, 'type', ['image/png', 'image/jpeg', 'image/webp', 'image/bmp']);
   exporterFolder.add(exporterConfig, 'encoderOptions', 0, 1);
   exporterFolder.add(exporterConfig, 'toDataURL');
   exporterFolder.add(exporterConfig, 'downloadImage');
diff --git a/__tests__/demos/plugin/matterjs.ts b/__tests__/demos/plugin/matterjs.ts
index 63297b1db..ea04e1850 100644
--- a/__tests__/demos/plugin/matterjs.ts
+++ b/__tests__/demos/plugin/matterjs.ts
@@ -1,5 +1,5 @@
-import { Circle, Image, Line, Polygon, Rect } from '../../../packages/g';
-import { Plugin as PluginMatterjs } from '../../../packages/g-plugin-matterjs';
+import { Circle, Image, Line, Polygon, Rect } from '@antv/g';
+import { Plugin as PluginMatterjs } from '@antv/g-plugin-matterjs';
 
 export async function matterjs(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/plugin/rough-barchart.ts b/__tests__/demos/plugin/rough-barchart.ts
index 1106caf2c..69b46bd19 100644
--- a/__tests__/demos/plugin/rough-barchart.ts
+++ b/__tests__/demos/plugin/rough-barchart.ts
@@ -1,7 +1,6 @@
-import { runtime } from '../../../packages/g';
-import { Plugin as PluginRoughCanvasRenderer } from '../../../packages/g-plugin-rough-canvas-renderer';
-import { Plugin as PluginRoughSVGRenderer } from '../../../packages/g-plugin-rough-svg-renderer';
-import { Plugin as PluginCSSSelect } from '../../../packages/g-plugin-css-select';
+import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
+import { Plugin as PluginRoughSVGRenderer } from '@antv/g-plugin-rough-svg-renderer';
+import { Plugin as PluginCSSSelect } from '@antv/g-plugin-css-select';
 import WebFont from 'webfontloader';
 import weatherDataset from '../../integration/data/weather.json';
 import * as d3 from 'd3';
@@ -37,10 +36,8 @@ export async function roughBarchart(context) {
         left: 50,
       },
     };
-    dimensions.boundedWidth =
-      dimensions.width - dimensions.margin.left - dimensions.margin.right;
-    dimensions.boundedHeight =
-      dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
+    dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right;
+    dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom;
 
     // 3. Draw canvas
     const wrapper = d3.select(
@@ -49,10 +46,7 @@ export async function roughBarchart(context) {
 
     const bounds = wrapper
       .append('g')
-      .style(
-        'transform',
-        `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`,
-      );
+      .style('transform', `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`);
 
     // 4. Create scales
 
@@ -62,11 +56,7 @@ export async function roughBarchart(context) {
       .range([0, dimensions.boundedWidth])
       .nice();
 
-    const binsGenerator = d3
-      .bin()
-      .domain(xScale.domain())
-      .value(metricAccessor)
-      .thresholds(12);
+    const binsGenerator = d3.bin().domain(xScale.domain()).value(metricAccessor).thresholds(12);
 
     const bins = binsGenerator(dataset);
 
@@ -78,20 +68,14 @@ export async function roughBarchart(context) {
 
     // 5. Draw data
     const binsGroup = bounds.append('g');
-    const binGroups = binsGroup
-      .selectAll('g')
-      .data(bins)
-      .join('g')
-      .attr('class', 'bin');
+    const binGroups = binsGroup.selectAll('g').data(bins).join('g').attr('class', 'bin');
 
     const barPadding = 1;
     const barRects = binGroups
       .append('rect')
       .attr('x', (d) => xScale(d.x0) + barPadding / 2)
       .attr('y', (d) => yScale(yAccessor(d)))
-      .attr('width', (d) =>
-        d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding]),
-      )
+      .attr('width', (d) => d3.max([0, xScale(d.x1) - xScale(d.x0) - barPadding]))
       .attr('height', (d) => dimensions.boundedHeight - yScale(yAccessor(d)))
       .attr('fill', 'cornflowerblue')
       .on('mouseenter', function (e) {
diff --git a/__tests__/demos/plugin/rough-params.ts b/__tests__/demos/plugin/rough-params.ts
index 85dc24ec0..c68425800 100644
--- a/__tests__/demos/plugin/rough-params.ts
+++ b/__tests__/demos/plugin/rough-params.ts
@@ -1,6 +1,6 @@
-import { Circle } from '../../../packages/g';
-import { Plugin as PluginRoughCanvasRenderer } from '../../../packages/g-plugin-rough-canvas-renderer';
-import { Plugin as PluginRoughSVGRenderer } from '../../../packages/g-plugin-rough-svg-renderer';
+import { Circle } from '@antv/g';
+import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
+import { Plugin as PluginRoughSVGRenderer } from '@antv/g-plugin-rough-svg-renderer';
 export async function roughParams(context) {
   const { canvas, gui } = context;
   await canvas.ready;
diff --git a/__tests__/demos/plugin/rough-shapes.ts b/__tests__/demos/plugin/rough-shapes.ts
index ec763e92f..e0824a74f 100644
--- a/__tests__/demos/plugin/rough-shapes.ts
+++ b/__tests__/demos/plugin/rough-shapes.ts
@@ -11,9 +11,9 @@ import {
   Polyline,
   Rect,
   Text,
-} from '../../../packages/g';
-import { Plugin as PluginRoughCanvasRenderer } from '../../../packages/g-plugin-rough-canvas-renderer';
-import { Plugin as PluginRoughSVGRenderer } from '../../../packages/g-plugin-rough-svg-renderer';
+} from '@antv/g';
+import { Plugin as PluginRoughCanvasRenderer } from '@antv/g-plugin-rough-canvas-renderer';
+import { Plugin as PluginRoughSVGRenderer } from '@antv/g-plugin-rough-svg-renderer';
 import WebFont from 'webfontloader';
 export async function roughShapes(context) {
   const { canvas } = context;
diff --git a/__tests__/demos/plugin/yoga-text.ts b/__tests__/demos/plugin/yoga-text.ts
index 534c8c4f9..0c3fbde86 100644
--- a/__tests__/demos/plugin/yoga-text.ts
+++ b/__tests__/demos/plugin/yoga-text.ts
@@ -1,5 +1,5 @@
-import { runtime, Circle, Group, Rect, Text } from '../../../packages/g';
-import { Plugin as PluginYoga } from '../../../packages/g-plugin-yoga';
+import { runtime, Circle, Group, Rect, Text } from '@antv/g';
+import { Plugin as PluginYoga } from '@antv/g-plugin-yoga';
 
 export async function yogaText(context) {
   runtime.enableCSSParsing = true;
diff --git a/__tests__/main.ts b/__tests__/main.ts
index 1964d72ff..ff06418c8 100644
--- a/__tests__/main.ts
+++ b/__tests__/main.ts
@@ -1,12 +1,12 @@
 import * as lil from 'lil-gui';
-import { Canvas, CanvasEvent, runtime } from '../packages/g';
-import { Renderer as CanvasRenderer } from '../packages/g-canvas';
-import { Renderer as CanvaskitRenderer } from '../packages/g-canvaskit';
-import { Renderer as SVGRenderer } from '../packages/g-svg';
+import { Canvas, CanvasEvent, runtime } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Renderer as CanvaskitRenderer } from '@antv/g-canvaskit';
+import { Renderer as SVGRenderer } from '@antv/g-svg';
 // WebGL & WebGPU renderer need to be built with rollup first.
-import { Renderer as WebGLRenderer } from '../packages/g-webgl';
-import { Renderer as WebGPURenderer } from '../packages/g-webgpu';
-import { Plugin as DragAndDropPlugin } from '../packages/g-plugin-dragndrop';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Renderer as WebGPURenderer } from '@antv/g-webgpu';
+import { Plugin as DragAndDropPlugin } from '@antv/g-plugin-dragndrop';
 import * as basic2d from './demos/2d';
 import * as basic3d from './demos/3d';
 import * as animation from './demos/animation';
@@ -61,11 +61,7 @@ selectChart.style.margin = '1em';
 renderOptions();
 selectChart.onchange = () => {
   const { value } = selectChart;
-  history.pushState(
-    { value },
-    '',
-    `?name=${value}&renderer=${selectRenderer.value}`,
-  );
+  history.pushState({ value }, '', `?name=${value}&renderer=${selectRenderer.value}`);
   plot();
 };
 document.onkeydown = (event) => {
@@ -100,11 +96,7 @@ selectRenderer.style.margin = '1em';
 selectRenderer.append(...Object.keys(renderers).map(createOption));
 selectRenderer.onchange = () => {
   const { value } = selectRenderer;
-  history.pushState(
-    { value },
-    '',
-    `?name=${selectChart.value}&renderer=${value}`,
-  );
+  history.pushState({ value }, '', `?name=${selectChart.value}&renderer=${value}`);
   plot();
 };
 
@@ -131,9 +123,7 @@ addEventListener('popstate', (event) => {
 // @ts-ignore
 const initialValue = new URL(location).searchParams.get('name') as string;
 // @ts-ignore
-const initialRenderer = new URL(location).searchParams.get(
-  'renderer',
-) as string;
+const initialRenderer = new URL(location).searchParams.get('renderer') as string;
 if (tests[initialValue]) selectChart.value = initialValue;
 if (renderers[initialRenderer]) selectRenderer.value = initialRenderer;
 app.append(selectChart);
@@ -151,7 +141,7 @@ async function plot() {
   currentContainer = document.createElement('div');
   app.append(currentContainer);
   const render = tests[selectChart.value];
-  render(currentContainer);
+  render?.(currentContainer);
 }
 
 function createOption(key) {
@@ -165,9 +155,7 @@ function createOption(key) {
 }
 
 function namespace(object, name) {
-  return Object.fromEntries(
-    Object.entries(object).map(([key, value]) => [`${name}-${key}`, value]),
-  );
+  return Object.fromEntries(Object.entries(object).map(([key, value]) => [`${name}-${key}`, value]));
 }
 
 function createSpecRender(object) {
@@ -202,9 +190,7 @@ function createSpecRender(object) {
         generate.initRenderer(renderer, selectRenderer.value);
       }
 
-      renderer.registerPlugin(
-        new DragAndDropPlugin({ dragstartDistanceThreshold: 1 }),
-      );
+      renderer.registerPlugin(new DragAndDropPlugin({ dragstartDistanceThreshold: 1 }));
 
       const $div = document.createElement('div');
       canvas = new Canvas({
@@ -251,7 +237,5 @@ function createSpecRender(object) {
       container.append($div);
     };
   };
-  return Object.fromEntries(
-    Object.entries(object).map(([key, value]) => [key, specRender(value)]),
-  );
+  return Object.fromEntries(Object.entries(object).map(([key, value]) => [key, specRender(value)]));
 }
diff --git a/commitlint.config.js b/commitlint.config.js
deleted file mode 100644
index 478195d8e..000000000
--- a/commitlint.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-angular'],
-  rules: {
-    'type-enum': [
-      2,
-      'always',
-      ['build', 'ci', 'docs', 'site', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'chore'],
-    ],
-    'header-max-length': [2, 'always', 100],
-  },
-};
diff --git a/package.json b/package.json
index 5a636a0a4..dae7eafb1 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "prettier": "^2.8.8",
     "rimraf": "^4.4.1",
     "rollup": "^3.29.4",
+    "rollup-plugin-glslify": "^1.2.1",
     "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-visualizer": "^5.9.2",
diff --git a/packages/g-canvas/CHANGELOG.md b/packages/g-canvas/CHANGELOG.md
index 079201e61..e9ae4397e 100644
--- a/packages/g-canvas/CHANGELOG.md
+++ b/packages/g-canvas/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-canvas
 
+## 2.0.14
+
+### Patch Changes
+
+-   update version
+-   Updated dependencies
+    -   @antv/g-lite@2.0.10
+    -   @antv/g-plugin-canvas-renderer@2.0.11
+
 ## 2.0.13
 
 ### Patch Changes
diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
index 7b316e7d2..0b3d3c7fb 100644
--- a/packages/g-canvas/package.json
+++ b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",
diff --git a/packages/g-lite/CHANGELOG.md b/packages/g-lite/CHANGELOG.md
index 829ec7dc8..82e94b68d 100644
--- a/packages/g-lite/CHANGELOG.md
+++ b/packages/g-lite/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-lite
 
+## 2.0.10
+
+### Patch Changes
+
+-   update version
+
 ## 2.0.9
 
 ### Patch Changes
diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json
index aadee02dd..caa0c3023 100644
--- a/packages/g-lite/package.json
+++ b/packages/g-lite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-webgl/CHANGELOG.md b/packages/g-mobile-webgl/CHANGELOG.md
index 5c662615c..39fb8bc0d 100644
--- a/packages/g-mobile-webgl/CHANGELOG.md
+++ b/packages/g-mobile-webgl/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-mobile-webgl
 
+## 1.0.18
+
+### Patch Changes
+
+-   Updated dependencies [2ae661cb]
+    -   @antv/g-plugin-device-renderer@2.0.16
+
 ## 1.0.17
 
 ### Patch Changes
diff --git a/packages/g-mobile-webgl/package.json b/packages/g-mobile-webgl/package.json
index dd8bcb16f..e29f45e51 100644
--- a/packages/g-mobile-webgl/package.json
+++ b/packages/g-mobile-webgl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-webgl",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A renderer implemented by WebGL1/2 in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-3d/CHANGELOG.md b/packages/g-plugin-3d/CHANGELOG.md
index 7920b98e4..44a0c25e3 100644
--- a/packages/g-plugin-3d/CHANGELOG.md
+++ b/packages/g-plugin-3d/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-plugin-3d
 
+## 2.0.16
+
+### Patch Changes
+
+-   Updated dependencies [2ae661cb]
+    -   @antv/g-plugin-device-renderer@2.0.16
+
 ## 2.0.15
 
 ### Patch Changes
diff --git a/packages/g-plugin-3d/package.json b/packages/g-plugin-3d/package.json
index 3ac28f0b1..5f1376cbe 100644
--- a/packages/g-plugin-3d/package.json
+++ b/packages/g-plugin-3d/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-3d",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "Provide 3D extension for G",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvas-renderer/CHANGELOG.md b/packages/g-plugin-canvas-renderer/CHANGELOG.md
index f0703e51e..5806cc33a 100644
--- a/packages/g-plugin-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-canvas-renderer
 
+## 2.0.11
+
+### Patch Changes
+
+-   update version
+-   Updated dependencies
+    -   @antv/g-lite@2.0.10
+
 ## 2.0.10
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvas-renderer/package.json b/packages/g-plugin-canvas-renderer/package.json
index e8979239d..ebd1e267a 100644
--- a/packages/g-plugin-canvas-renderer/package.json
+++ b/packages/g-plugin-canvas-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvas-renderer",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "A G plugin of renderer implementation with Canvas2D API",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-device-renderer/CHANGELOG.md b/packages/g-plugin-device-renderer/CHANGELOG.md
index 3c95e58e7..9bdc31be2 100644
--- a/packages/g-plugin-device-renderer/CHANGELOG.md
+++ b/packages/g-plugin-device-renderer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-plugin-device-renderer
 
+## 2.0.16
+
+### Patch Changes
+
+-   2ae661cb: fix: wrong y coordinate when picking with webgl (#1747)
+
 ## 2.0.15
 
 ### Patch Changes
diff --git a/packages/g-plugin-device-renderer/package.json b/packages/g-plugin-device-renderer/package.json
index b94e74ce0..2e9b0c2a9 100644
--- a/packages/g-plugin-device-renderer/package.json
+++ b/packages/g-plugin-device-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-device-renderer",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "A G plugin of renderer implementation with GPUDevice",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-device-renderer/src/PickingPlugin.ts b/packages/g-plugin-device-renderer/src/PickingPlugin.ts
index c1c541652..2a446418d 100644
--- a/packages/g-plugin-device-renderer/src/PickingPlugin.ts
+++ b/packages/g-plugin-device-renderer/src/PickingPlugin.ts
@@ -338,7 +338,8 @@ export class PickingPlugin implements RenderingPlugin {
       canvasWidth * dpr,
       canvasHeight * dpr,
       x,
-      y,
+      // fix https://github.com/antvis/G/issues/1747
+      canvasHeight * dpr - y,
       width,
       height,
     );
diff --git a/packages/g-plugin-svg-renderer/CHANGELOG.md b/packages/g-plugin-svg-renderer/CHANGELOG.md
index 409d89007..58bc86d85 100644
--- a/packages/g-plugin-svg-renderer/CHANGELOG.md
+++ b/packages/g-plugin-svg-renderer/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-plugin-svg-renderer
 
+## 2.0.12
+
+### Patch Changes
+
+-   update version
+-   Updated dependencies
+    -   @antv/g-lite@2.0.10
+
 ## 2.0.11
 
 ### Patch Changes
diff --git a/packages/g-plugin-svg-renderer/package.json b/packages/g-plugin-svg-renderer/package.json
index d23e2f04e..bbed8bf13 100644
--- a/packages/g-plugin-svg-renderer/package.json
+++ b/packages/g-plugin-svg-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-svg-renderer",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "A G plugin of renderer implementation with SVG",
   "keywords": [
     "antv",
diff --git a/packages/g-web-components/CHANGELOG.md b/packages/g-web-components/CHANGELOG.md
index 877edf957..6fd3526a6 100644
--- a/packages/g-web-components/CHANGELOG.md
+++ b/packages/g-web-components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/g-web-components
 
+## 2.0.19
+
+### Patch Changes
+
+-   @antv/g-webgl@2.0.18
+
 ## 2.0.18
 
 ### Patch Changes
diff --git a/packages/g-web-components/package.json b/packages/g-web-components/package.json
index 452a911ea..206fb0bd6 100644
--- a/packages/g-web-components/package.json
+++ b/packages/g-web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-web-components",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "description": "A declarative usage for G implemented with WebComponents",
   "keywords": [
     "antv",
diff --git a/packages/g-webgl/CHANGELOG.md b/packages/g-webgl/CHANGELOG.md
index 34423f441..c0805af3d 100644
--- a/packages/g-webgl/CHANGELOG.md
+++ b/packages/g-webgl/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-webgl
 
+## 2.0.18
+
+### Patch Changes
+
+-   Updated dependencies [2ae661cb]
+    -   @antv/g-plugin-device-renderer@2.0.16
+
 ## 2.0.17
 
 ### Patch Changes
diff --git a/packages/g-webgl/package.json b/packages/g-webgl/package.json
index 9ec3691f6..a911205f4 100644
--- a/packages/g-webgl/package.json
+++ b/packages/g-webgl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-webgl",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "A renderer implemented by WebGL1/2",
   "keywords": [
     "antv",
diff --git a/packages/g-webgpu/CHANGELOG.md b/packages/g-webgpu/CHANGELOG.md
index 4beff9f81..b0abe3420 100644
--- a/packages/g-webgpu/CHANGELOG.md
+++ b/packages/g-webgpu/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @antv/g-webgpu
 
+## 2.0.18
+
+### Patch Changes
+
+-   Updated dependencies [2ae661cb]
+    -   @antv/g-plugin-device-renderer@2.0.16
+
 ## 2.0.17
 
 ### Patch Changes
diff --git a/packages/g-webgpu/package.json b/packages/g-webgpu/package.json
index 56f6f66b3..ebbad90df 100644
--- a/packages/g-webgpu/package.json
+++ b/packages/g-webgpu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-webgpu",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "A renderer implemented by WebGPU",
   "keywords": [
     "antv",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 930a39cb6..881566f4d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -130,7 +130,7 @@ importers:
         version: 5.3.0
       playwright:
         specifier: latest
-        version: 1.47.0
+        version: 1.47.2
       pngjs:
         specifier: ^6.0.0
         version: 6.0.0
@@ -146,6 +146,9 @@ importers:
       rollup:
         specifier: ^3.29.4
         version: 3.29.4
+      rollup-plugin-glslify:
+        specifier: ^1.2.1
+        version: 1.2.1
       rollup-plugin-polyfill-node:
         specifier: ^0.8.0
         version: 0.8.0(rollup@3.29.4)
@@ -1710,17 +1713,8 @@ packages:
     peerDependencies:
       rollup: ^1.20.0||^2.0.0
 
-  '@rollup/pluginutils@5.0.2':
-    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
-  '@rollup/pluginutils@5.0.5':
-    resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
+  '@rollup/pluginutils@5.1.0':
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -1780,9 +1774,6 @@ packages:
   '@types/estree@0.0.39':
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
 
-  '@types/estree@1.0.1':
-    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
-
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -4540,13 +4531,13 @@ packages:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
-  playwright-core@1.47.0:
-    resolution: {integrity: sha512-1DyHT8OqkcfCkYUD9zzUTfg7EfTd+6a8MkD/NWOvjo0u/SCNd5YmY/lJwFvUZOxJbWNds+ei7ic2+R/cRz/PDg==}
+  playwright-core@1.47.2:
+    resolution: {integrity: sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.47.0:
-    resolution: {integrity: sha512-jOWiRq2pdNAX/mwLiwFYnPHpEZ4rM+fRSQpRHwEwZlP2PUANvL3+aJOF/bvISMhFD30rqMxUB4RJx9aQbfh4Ww==}
+  playwright@1.47.2:
+    resolution: {integrity: sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -6366,7 +6357,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.23.3
       '@babel/helper-module-imports': 7.22.15
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
     optionalDependencies:
       '@types/babel__core': 7.20.5
       rollup: 3.29.4
@@ -6391,13 +6382,13 @@ snapshots:
 
   '@rollup/plugin-json@6.0.0(rollup@3.29.4)':
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
     optionalDependencies:
       rollup: 3.29.4
 
   '@rollup/plugin-node-resolve@15.2.3(rollup@3.29.4)':
     dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-builtin-module: 3.2.1
@@ -6416,7 +6407,7 @@ snapshots:
 
   '@rollup/plugin-typescript@11.1.5(rollup@3.29.4)(tslib@2.6.2)(typescript@5.6.2)':
     dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
       resolve: 1.22.8
       typescript: 5.6.2
     optionalDependencies:
@@ -6434,15 +6425,7 @@ snapshots:
       picomatch: 2.3.1
       rollup: 3.29.4
 
-  '@rollup/pluginutils@5.0.2(rollup@3.29.4)':
-    dependencies:
-      '@types/estree': 1.0.1
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    optionalDependencies:
-      rollup: 3.29.4
-
-  '@rollup/pluginutils@5.0.5(rollup@3.29.4)':
+  '@rollup/pluginutils@5.1.0(rollup@3.29.4)':
     dependencies:
       '@types/estree': 1.0.5
       estree-walker: 2.0.2
@@ -6511,8 +6494,6 @@ snapshots:
 
   '@types/estree@0.0.39': {}
 
-  '@types/estree@1.0.1': {}
-
   '@types/estree@1.0.5': {}
 
   '@types/fs-extra@11.0.4':
@@ -9662,11 +9643,11 @@ snapshots:
     dependencies:
       find-up: 4.1.0
 
-  playwright-core@1.47.0: {}
+  playwright-core@1.47.2: {}
 
-  playwright@1.47.0:
+  playwright@1.47.2:
     dependencies:
-      playwright-core: 1.47.0
+      playwright-core: 1.47.2
     optionalDependencies:
       fsevents: 2.3.2
 
diff --git a/scripts/jest/setup.js b/scripts/jest/setup.js
index f227bd22f..956927504 100644
--- a/scripts/jest/setup.js
+++ b/scripts/jest/setup.js
@@ -8,7 +8,7 @@ module.exports = async function (_globalConfig, _projectConfig) {
   const port = await portfinder.getPortPromise();
   // @see https://vitejs.dev/guide/api-javascript.html#createserver
   const server = await createServer({
-    configFile: './vite.config.js',
+    configFile: './vite.config.mjs',
     server: {
       port,
       open: false,
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..194583f66
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,63 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "types": ["node"],
+    "paths": {
+      "@antv/g": ["./packages/g/src"],
+      "@antv/g-mobile-webgl": ["./packages/g-mobile-webgl/src"],
+      "@antv/g-plugin-matterjs": ["./packages/g-plugin-matterjs/src"],
+      "@antv/g-camera-api": ["./packages/g-camera-api/src"],
+      "@antv/g-pattern": ["./packages/g-pattern/src"],
+      "@antv/g-plugin-mobile-interaction": ["./packages/g-plugin-mobile-interaction/src"],
+      "@antv/g-canvas": ["./packages/g-canvas/src"],
+      "@antv/g-plugin-3d": ["./packages/g-plugin-3d/src"],
+      "@antv/g-plugin-physx": ["./packages/g-plugin-physx/src"],
+      "@antv/g-canvaskit": ["./packages/g-canvaskit/src"],
+      "@antv/g-plugin-a11y": ["./packages/g-plugin-a11y/src"],
+      "@antv/g-plugin-rough-canvas-renderer": ["./packages/g-plugin-rough-canvas-renderer/src"],
+      "@antv/g-components": ["./packages/g-components/src"],
+      "@antv/g-plugin-annotation": ["./packages/g-plugin-annotation/src"],
+      "@antv/g-plugin-rough-svg-renderer": ["./packages/g-plugin-rough-svg-renderer/src"],
+      "@antv/g-css-layout-api": ["./packages/g-css-layout-api/src"],
+      "@antv/g-plugin-box2d": ["./packages/g-plugin-box2d/src"],
+      "@antv/g-plugin-svg-picker": ["./packages/g-plugin-svg-picker/src"],
+      "@antv/g-css-typed-om-api": ["./packages/g-css-typed-om-api/src"],
+      "@antv/g-plugin-canvas-path-generator": ["./packages/g-plugin-canvas-path-generator/src"],
+      "@antv/g-plugin-svg-renderer": ["./packages/g-plugin-svg-renderer/src"],
+      "@antv/g-devtool": ["./packages/g-devtool/src"],
+      "@antv/g-plugin-canvas-picker": ["./packages/g-plugin-canvas-picker/src"],
+      "@antv/g-plugin-yoga": ["./packages/g-plugin-yoga/src"],
+      "@antv/g-dom-mutation-observer-api": ["./packages/g-dom-mutation-observer-api/src"],
+      "@antv/g-plugin-canvas-renderer": ["./packages/g-plugin-canvas-renderer/src"],
+      "@antv/g-plugin-zdog-canvas-renderer": ["./packages/g-plugin-zdog-canvas-renderer/src"],
+      "@antv/g-gesture": ["./packages/g-gesture/src"],
+      "@antv/g-plugin-canvaskit-renderer": ["./packages/g-plugin-canvaskit-renderer/src"],
+      "@antv/g-plugin-zdog-svg-renderer": ["./packages/g-plugin-zdog-svg-renderer/src"],
+      "@antv/g-image-exporter": ["./packages/g-image-exporter/src"],
+      "@antv/g-plugin-control": ["./packages/g-plugin-control/src"],
+      "@antv/g-shader-components": ["./packages/g-shader-components/src"],
+      "@antv/g-layout-blocklike": ["./packages/g-layout-blocklike/src"],
+      "@antv/g-plugin-css-select": ["./packages/g-plugin-css-select/src"],
+      "@antv/g-svg": ["./packages/g-svg/src"],
+      "@antv/g-lite": ["./packages/g-lite/src"],
+      "@antv/g-plugin-device-renderer": ["./packages/g-plugin-device-renderer/src"],
+      "@antv/g-web-animations-api": ["./packages/g-web-animations-api/src"],
+      "@antv/g-lottie-player": ["./packages/g-lottie-player/src"],
+      "@antv/g-plugin-dom-interaction": ["./packages/g-plugin-dom-interaction/src"],
+      "@antv/g-web-components": ["./packages/g-web-components/src"],
+      "@antv/g-math": ["./packages/g-math/src"],
+      "@antv/g-plugin-dragndrop": ["./packages/g-plugin-dragndrop/src"],
+      "@antv/g-webgl": ["./packages/g-webgl/src"],
+      "@antv/g-mobile-canvas": ["./packages/g-mobile-canvas/src"],
+      "@antv/g-plugin-gesture": ["./packages/g-plugin-gesture/src"],
+      "@antv/g-webgpu": ["./packages/g-webgpu/src"],
+      "@antv/g-mobile-canvas-element": ["./packages/g-mobile-canvas-element/src"],
+      "@antv/g-plugin-html-renderer": ["./packages/g-plugin-html-renderer/src"],
+      "@antv/react-g": ["./packages/react-g/src"],
+      "@antv/g-mobile-svg": ["./packages/g-mobile-svg/src"],
+      "@antv/g-plugin-image-loader": ["./packages/g-plugin-image-loader/src"]
+    }
+  }
+}
diff --git a/vite.config.js b/vite.config.js
deleted file mode 100644
index 0b9a971a3..000000000
--- a/vite.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  root: './__tests__/',
-  server: {
-    port: 8080,
-    open: '/',
-  },
-  publicDir: 'static',
-});
diff --git a/vite.config.mjs b/vite.config.mjs
new file mode 100644
index 000000000..53d6b38f0
--- /dev/null
+++ b/vite.config.mjs
@@ -0,0 +1,98 @@
+import path from 'path';
+import process from 'process';
+import { fileURLToPath, URL } from 'url';
+import { defineConfig } from 'vite';
+import glslify from 'rollup-plugin-glslify';
+import commonjs from '@rollup/plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import sourcemaps from 'rollup-plugin-sourcemaps';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+const resolve = (packageName) => {
+  return path.resolve(__dirname, path.join('./packages/', packageName, process.env.CI ? 'dist/index.esm.js' : 'src'));
+};
+
+export default defineConfig({
+  root: './__tests__/',
+  server: {
+    port: 8080,
+    open: '/',
+  },
+  publicDir: 'static',
+  plugins: process.env.CI
+    ? []
+    : [
+        // ! keep same to rollup config
+        glslify({
+          // disable compressing shader
+          // @see https://github.com/antvis/g/issues/832
+          compress: false,
+        }),
+        nodeResolve({
+          mainFields: ['module', 'browser', 'main'],
+          extensions: ['.js', '.jsx', '.ts', '.tsx', '.es6', '.es', '.mjs'],
+        }),
+        commonjs({ sourceMap: true }),
+        typescript({ sourceMap: true }),
+        sourcemaps(),
+      ],
+  resolve: {
+    alias: {
+      '@antv/g': resolve('g'),
+      '@antv/g-mobile-webgl': resolve('g-mobile-webgl'),
+      '@antv/g-plugin-matterjs': resolve('g-plugin-matterjs'),
+      '@antv/g-camera-api': resolve('g-camera-api'),
+      '@antv/g-pattern': resolve('g-pattern'),
+      '@antv/g-plugin-mobile-interaction': resolve('g-plugin-mobile-interaction'),
+      '@antv/g-canvas': resolve('g-canvas'),
+      '@antv/g-plugin-3d': resolve('g-plugin-3d'),
+      '@antv/g-plugin-physx': resolve('g-plugin-physx'),
+      '@antv/g-canvaskit': resolve('g-canvaskit'),
+      '@antv/g-plugin-a11y': resolve('g-plugin-a11y'),
+      '@antv/g-plugin-rough-canvas-renderer': resolve('g-plugin-rough-canvas-renderer'),
+      '@antv/g-components': resolve('g-components'),
+      '@antv/g-plugin-annotation': resolve('g-plugin-annotation'),
+      '@antv/g-plugin-rough-svg-renderer': resolve('g-plugin-rough-svg-renderer'),
+      '@antv/g-css-layout-api': resolve('g-css-layout-api'),
+      '@antv/g-plugin-box2d': resolve('g-plugin-box2d'),
+      '@antv/g-plugin-svg-picker': resolve('g-plugin-svg-picker'),
+      '@antv/g-css-typed-om-api': resolve('g-css-typed-om-api'),
+      '@antv/g-plugin-canvas-path-generator': resolve('g-plugin-canvas-path-generator'),
+      '@antv/g-plugin-svg-renderer': resolve('g-plugin-svg-renderer'),
+      '@antv/g-devtool': resolve('g-devtool'),
+      '@antv/g-plugin-canvas-picker': resolve('g-plugin-canvas-picker'),
+      '@antv/g-plugin-yoga': resolve('g-plugin-yoga'),
+      '@antv/g-dom-mutation-observer-api': resolve('g-dom-mutation-observer-api'),
+      '@antv/g-plugin-canvas-renderer': resolve('g-plugin-canvas-renderer'),
+      '@antv/g-plugin-zdog-canvas-renderer': resolve('g-plugin-zdog-canvas-renderer'),
+      '@antv/g-gesture': resolve('g-gesture'),
+      '@antv/g-plugin-canvaskit-renderer': resolve('g-plugin-canvaskit-renderer'),
+      '@antv/g-plugin-zdog-svg-renderer': resolve('g-plugin-zdog-svg-renderer'),
+      '@antv/g-image-exporter': resolve('g-image-exporter'),
+      '@antv/g-plugin-control': resolve('g-plugin-control'),
+      '@antv/g-shader-components': resolve('g-shader-components'),
+      '@antv/g-layout-blocklike': resolve('g-layout-blocklike'),
+      '@antv/g-plugin-css-select': resolve('g-plugin-css-select'),
+      '@antv/g-svg': resolve('g-svg'),
+      '@antv/g-lite': resolve('g-lite'),
+      '@antv/g-plugin-device-renderer': resolve('g-plugin-device-renderer'),
+      '@antv/g-web-animations-api': resolve('g-web-animations-api'),
+      '@antv/g-lottie-player': resolve('g-lottie-player'),
+      '@antv/g-plugin-dom-interaction': resolve('g-plugin-dom-interaction'),
+      '@antv/g-web-components': resolve('g-web-components'),
+      '@antv/g-math': resolve('g-math'),
+      '@antv/g-plugin-dragndrop': resolve('g-plugin-dragndrop'),
+      '@antv/g-webgl': resolve('g-webgl'),
+      '@antv/g-mobile-canvas': resolve('g-mobile-canvas'),
+      '@antv/g-plugin-gesture': resolve('g-plugin-gesture'),
+      '@antv/g-webgpu': resolve('g-webgpu'),
+      '@antv/g-mobile-canvas-element': resolve('g-mobile-canvas-element'),
+      '@antv/g-plugin-html-renderer': resolve('g-plugin-html-renderer'),
+      '@antv/react-g': resolve('react-g'),
+      '@antv/g-mobile-svg': resolve('g-mobile-svg'),
+      '@antv/g-plugin-image-loader': resolve('g-plugin-image-loader'),
+    },
+  },
+});