Merge branch 'release_25_0_5' of https://github.com/dbeaver/cloudbeaver into release_25_0_5

dbeaver/dbeaver#37928 Downgrade ClickHouse driver to 0.7.2
dbeaver/pro#5695 Revert "Add Driver for Databend (#3174 )" (#3444 )
2026-10-16 14:50:15 +08:00 · 2025-05-17 05:14:59 +02:00 · 2025-05-17 05:14:51 +02:00 · 2025-05-15 11:12:23 +02:00 · 2025-05-14 00:01:08 +08:00 · 2025-05-13 23:59:39 +08:00
4955 changed files with 144023 additions and 88909 deletions
@@ -1,29 +0,0 @@
---
-name: Bug report
-about: Create a report to help us improve CloudBeaver
-title: ''
-labels: bug, wait for review
-assignees: ''
-
---
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here, e.g. error log.
@@ -0,0 +1,61 @@
+name: 🐛 Bug Report
+description: Create a report to help us improve our product
+labels: [wait for review]
+type: Bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting a bug in CloudBeaver!
+        To ensure we can address the issue as quickly and efficiently as possible, please provide as much detail as you can in the fields below.
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: |
+        A clear and concise description of the issue being addressed.
+         - Describe the actual problematic behavior.
+         - Ensure private information is redacted.
+         - Include console output or log files if relevant.
+         - If applicable, add screenshots or screen recordings to help explain your problem.
+      placeholder: |
+        Please enter a description of the issue. Here you can also attach log files, screenshots or a video
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Describe the steps to reproduce the bug
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected/Desired Behavior
+      description: |
+        A clear and concise description of what happens in the software **after** a fix is created and merged.
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: CloudBeaver Version
+      description: What version of CloudBeaver are you running?
+      placeholder: ex. CloudBeaver Community 25.0.0
+    validations:
+      required: true
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Any additional context about the environment
+      placeholder: |
+        Example:
+        1. OS: [e.g. iOS, Ubuntu, Windows 11]
+        2. Browser: [e.g. Chrome, Safari]
+    validations:
+      required: false
@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Read our documentations
+    url: https://dbeaver.com/docs/cloudbeaver
+    about: Many articles about product deployment and features.
+  - name: Try advanced database management features in DBeaver PRO or CloudBeaver EE
+    url: https://dbeaver.com/download/?utm_source=github&utm_medium=social&utm_campaign=issue
+    about: Download a 14-day free trial on dbeaver.com. No credit card is needed.
+  - name: Learn how to use CloudBeaver effectively with our tutorial videos
+    url: https://www.youtube.com/channel/UC-yOjsQLSaJVEghg6UB3N7A
+    about: Subscribe to our YouTube channel and watch new tutorials every week.
+  - name: Follow us on X (ex. Twitter)
+    url: https://x.com/dbeaver_news
+    about: Get everyday tips, fresh news, and DBeaver/CloudBeaver feature overviews.
@@ -1,8 +1,9 @@
 ---
-name: Feature request
-about: Suggest an idea for CloudBeaver
+name: Feature Request
+about: Provide a description of your feature request for CloudBeaver. Include the problem you are trying to solve, why it is important, and any specific functionality you believe would improve the platform.
 title: ''
-labels: feature request, wait for review
+labels: wait for review
+type: Feature
 assignees: ''

 ---
@@ -12,3 +13,9 @@ A clear and concise description of what the problem is. Ex. I'm always frustrate

 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
@@ -1,8 +1,9 @@
 ---
 name: Question
-about: Is there something unclear?
+about: Is there something unclear? Ask your question.
 title: ''
-labels: question, wait for review
+labels: wait for review
+type: Question
 assignees: ''

 ---
@@ -0,0 +1,42 @@
+name: Backend Build
+
+on:
+  # Allows you to reuse workflows by referencing their YAML files
+  workflow_call:
+
+jobs:
+  build-backend:
+    name: Build
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          path: cloudbeaver
+
+      - name: Clone Deps Repositories
+        uses: dbeaver/github-actions/clone-repositories@devel
+        with:
+          project_deps_path: "./cloudbeaver/project.deps"
+
+      - name: Set up JDK 21
+        uses: actions/setup-java@v4
+        with:
+          distribution: "temurin"
+          java-version: "21"
+          cache: maven
+
+      - uses: dbeaver/github-actions/install-maven@devel
+
+      - name: Run build script
+        run: ./build-backend.sh
+        shell: bash
+        working-directory: ./cloudbeaver/deploy
+
+      # - name: Archive build artifacts
+      #   uses: actions/upload-artifact@v4
+      #   with:
+      #     name: backend-build-artifacts
+      #     path: cloudbeaver/deploy/cloudbeaver
+      #     if-no-files-found: error
@@ -0,0 +1,14 @@
+name: Cleanup
+
+on:
+  pull_request:
+    types: [closed]
+  push:
+    branches:
+      - devel
+
+jobs:
+  delete-caches:
+    name: Cleanup
+    uses: dbeaver/dbeaver-common/.github/workflows/cleanup-caches.yml@devel
+    secrets: inherit
@@ -0,0 +1,93 @@
+name: Build and Push Docker Image
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+  # Allows you to reuse workflows by referencing their YAML files
+  workflow_call:
+
+jobs:
+  build-and-push-docker:
+    name: Build and Push Docker Image
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Download backend artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: backend-build-artifacts
+          path: deploy/cloudbeaver/
+
+      - name: Download frontend artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: frontend-build-artifacts
+          path: deploy/cloudbeaver/web
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Run custom Docker build script
+        run: ./make-docker-container.sh
+        shell: bash
+        working-directory: ./deploy/docker
+
+      - name: Tag Docker Image
+        run: |
+          REPO_NAME=$(basename ${{ github.repository }})
+          IMAGE_NAME=ghcr.io/${{ github.repository_owner }}/$REPO_NAME
+          BRANCH_NAME=${{ github.head_ref || github.ref_name }}
+          TAG_NAME=$(echo $BRANCH_NAME | sed 's/[^a-zA-Z0-9._-]/-/g')
+          docker tag dbeaver/cloudbeaver:dev $IMAGE_NAME:$TAG_NAME
+          echo "image=$IMAGE_NAME:$TAG_NAME" >> $GITHUB_ENV
+
+      # - name: Install Docker Credential Helper
+      #   run: |
+      #     sudo apt-get update
+      #     sudo apt-get install -y gnupg2 pass
+      #     curl -fsSL https://github.com/docker/docker-credential-helpers/releases/download/v0.6.4/docker-credential-pass-v0.6.4-amd64.tar.gz -o docker-credential-pass.tar.gz
+      #     tar xzvf docker-credential-pass.tar.gz
+      #     sudo mv docker-credential-pass /usr/local/bin/docker-credential-pass
+      #     sudo chmod +x /usr/local/bin/docker-credential-pass
+  
+      # - name: Configure Docker to use Credential Helper
+      #   run: |
+      #     mkdir -p ~/.docker
+      #     echo '{"credsStore":"pass"}' > ~/.docker/config.json
+
+      # - name: Initialize Password Store
+      #   run: |
+      #     gpg --batch --gen-key <<EOF
+      #     %no-protection
+      #     Key-Type: default
+      #     Subkey-Type: default
+      #     Name-Real: Docker Credential Helper
+      #     Expire-Date: 0
+      #     %commit
+      #     EOF
+      #     pass init "$(gpg --list-keys --with-colons | grep '^pub' | cut -d: -f5)"
+
+      - name: Log in to GitHub Container Registry
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.repository_owner }} --password-stdin
+
+      - name: Push Docker Image
+        run: docker push ${{ env.image }}
+
+      # - name: Comment on Pull Request
+      #   if: github.event_name == 'pull_request'
+      #   uses: actions/github-script@v6
+      #   with:
+      #     github-token: ${{ secrets.PAT }}
+      #     script: |
+      #       const tag = process.env.TAG_NAME;
+      #       const commentBody = `The Docker image has been built and pushed to Docker Hub.\n\nYou can pull the image using the following command:\n\`\`\`\ndocker pull dbeaver/cloudbeaver:${tag}\n\`\`\``;
+      #       github.rest.issues.createComment({
+      #         owner: context.repo.owner,
+      #         repo: context.repo.repo,
+      #         issue_number: context.issue.number,
+      #         body: commentBody
+      #       });
@@ -0,0 +1,98 @@
+name: Frontend Build
+
+on:
+  # Allows you to reuse workflows by referencing their YAML files
+  workflow_call:
+    outputs:
+      build-status:
+        description: "Build status"
+        value: ${{ jobs.frontend-build.outputs.build-status }}
+      test-status:
+        description: "Test status"
+        value: ${{ jobs.frontend-build.outputs.test-status }}
+    inputs:
+      clean-cache:
+        required: false
+        type: boolean
+
+jobs:
+  frontend-build:
+    name: Build
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      contents: read
+
+    outputs:
+      build-status: ${{ steps.build.outcome }}
+      test-status: ${{ steps.test.outcome }}
+
+    defaults:
+      run:
+        working-directory: ./cloudbeaver/webapp
+
+    steps:
+      - name: Checkout cloudbeaver
+        uses: actions/checkout@v4
+        with:
+          path: cloudbeaver
+
+      - name: Clone Deps Repositories
+        uses: dbeaver/github-actions/clone-repositories@devel
+        with:
+          project_deps_path: "./cloudbeaver/project.deps"
+          token: ${{ secrets.DEVOPS_ISSUE_RO_TOKEN }}
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          cache: "yarn"
+          cache-dependency-path: |
+            cloudbeaver/common-*/yarn.lock
+            cloudbeaver/webapp/yarn.lock
+
+      - name: restore cloudbeaver-common typescript cache
+        uses: actions/cache@v4
+        with:
+          path: "cloudbeaver/common-*/**/*/lib"
+          key: ${{ runner.os }}-common-dist-${{ hashFiles('cloudbeaver/common-*/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-common-dist-
+
+      - name: restore typescript cache
+        uses: actions/cache@v4
+        with:
+          path: "cloudbeaver/webapp/**/packages/*/dist"
+          key: ${{ runner.os }}-dist-${{ hashFiles('cloudbeaver/webapp/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-dist-
+
+      - if: inputs.clean-cache
+        run: yarn clear
+
+      - run: yarn install --immutable
+        working-directory: ./cloudbeaver/common-typescript
+
+      - run: yarn install --immutable
+        working-directory: ./cloudbeaver/common-react
+
+      - run: yarn install --immutable
+
+      - run: yarn bundle
+        working-directory: ./cloudbeaver/webapp/packages/product-default
+
+      - run: yarn test
+        working-directory: ./cloudbeaver/common-typescript
+
+      # - run: yarn test
+      #   working-directory: ./cloudbeaver/common-react
+
+      - run: yarn test
+
+      # - name: Archive build artifacts
+      #   uses: actions/upload-artifact@v4
+      #   with:
+      #     name: frontend-build-artifacts
+      #     path: webapp/packages/product-default/lib
+      #     if-no-files-found: error
@@ -1,76 +0,0 @@
-name: frontend-cache
-
-on:
-  push:
-    branches: ["devel"]
-    paths:
-      - "webapp/**"
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-jobs:
-  build_and_test:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./webapp
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "18"
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-      - name: restore yarn cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: restore node_modules
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node_modules-
-
-      - name: restore typescript cache
-        uses: actions/cache@v3
-        with:
-          path: "**/packages/*/dist"
-          key: ${{ runner.os }}-dist-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-dist-
-
-      - name: yarn install
-        uses: borales/actions-yarn@v4
-        with:
-          dir: webapp
-          cmd: install
-
-      - name: yarn lerna bootstrap
-        uses: borales/actions-yarn@v4
-        with:
-          dir: webapp
-          cmd: lerna bootstrap
-
-      - name: build
-        uses: borales/actions-yarn@v4
-        with:
-          dir: webapp/packages/product-default
-          cmd: build # build tyescript source code
-
-      - name: test
-        uses: borales/actions-yarn@v4
-        with:
-          dir: webapp
-          cmd: lerna run test # build packages that have test script
@@ -1,29 +0,0 @@
-name: cleanup caches by a branch
-on:
-  pull_request:
-    types:
-      - closed
-
-jobs:
-  cleanup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cleanup
-        run: |
-          gh extension install actions/gh-actions-cache
-
-          echo "Fetching list of cache key"
-          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH -L 100 | cut -f 1 )
-
-          ## Setting this to not fail the workflow while deleting cache keys. 
-          set +e
-          echo "Deleting caches..."
-          for cacheKey in $cacheKeysForPR
-          do
-              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
-          done
-          echo "Done"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          REPO: ${{ github.repository }}
-          BRANCH: refs/pull/${{ github.event.pull_request.number }}/merge
@@ -0,0 +1,46 @@
+name: Frontend Lint
+
+on:
+  # Allows you to reuse workflows by referencing their YAML files
+  workflow_call:
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    permissions:
+      contents: read
+
+    defaults:
+      run:
+        working-directory: ./cloudbeaver/webapp
+
+    steps:
+      - name: Checkout cloudbeaver
+        uses: actions/checkout@v4
+        with:
+          path: cloudbeaver
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          cache: "yarn"
+          cache-dependency-path: "./cloudbeaver/webapp/yarn.lock"
+
+      # - run: yarn install --immutable
+      #   working-directory: ./cloudbeaver/common-typescript
+
+      # - run: yarn install --immutable
+      #   working-directory: ./cloudbeaver/common-react
+
+      - run: |
+          yarn install --immutable
+          git fetch origin "${{ github.base_ref }}" --depth=1
+          FILES=$(git diff --name-only 'origin/${{ github.base_ref }}' ${{ github.sha }} -- . | sed 's|^webapp/||')
+          if [ -n "$FILES" ]; then
+            yarn lint --pass-on-no-patterns --no-error-on-unmatched-pattern $FILES
+          else
+            echo "No files to lint"
+          fi
@@ -1,80 +0,0 @@
-name: frontend
-
-on:
-  # Triggers the workflow on push or pull request events but only for the "devel" branch
-  pull_request:
-    branches: ["devel"]
-    paths:
-      - "webapp/**" # monitor for the frontend changes
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-  # Allows you to reuse workflows by referencing their YAML files
-  workflow_call:
-
-jobs:
-  build_and_test:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./webapp
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "18"
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-      - name: restore yarn cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: restore node_modules
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node_modules-
-
-      - name: restore typescript cache
-        uses: actions/cache@v3
-        with:
-          path: "**/packages/*/dist"
-          key: ${{ runner.os }}-dist-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-dist-
-
-      - name: yarn install
-        uses: borales/actions-yarn@v4
-        with:
-          dir: webapp
-          cmd: install
-
-      - name: yarn lerna bootstrap
-        uses: borales/actions-yarn@v4
-        with:
-          dir: webapp
-          cmd: lerna bootstrap
-
-      - name: build
-        uses: borales/actions-yarn@v4
-        with:
-          dir: webapp/packages/product-default
-          cmd: bundle
-
-      - name: test
-        uses: borales/actions-yarn@v4
-        with:
-          dir: webapp
-          cmd: lerna run test
@@ -0,0 +1,64 @@
+name: CI
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+  push:
+    branches: [devel]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.event.pull_request.number || github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  build-server:
+    uses: dbeaver/dbeaver-common/.github/workflows/mvn-package.yml@devel
+    name: Check
+    secrets: inherit
+    with:
+      mvn-args: -Dplain-api-server -Dheadless-platform
+      project-directory: ./cloudbeaver/server/product/aggregate
+      project-deps: ./cloudbeaver/project.deps
+      timeout-minutes: 5
+
+  # build-server:
+  #   name: Server
+  #   uses: ./.github/workflows/backend-build.yml
+  #   secrets: inherit
+
+  build-frontend:
+    name: Frontend
+    uses: ./.github/workflows/frontend-build.yml
+    secrets: inherit
+
+  lint-server:
+    name: Server
+    uses: dbeaver/dbeaver-common/.github/workflows/java-checkstyle.yml@devel
+    secrets: inherit
+
+  lint-frontend:
+    name: Frontend
+    uses: ./.github/workflows/frontend-lint.yml
+    secrets: inherit
+
+  # call-frontend-tests:
+  #   name: Frontend Unit Tests
+  #   needs: call-frontend-build
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Check if tests passed
+  #       if: ${{ needs.call-frontend-build.outputs.test-status != 'success' }}
+  #       run: |
+  #         echo "Tests failed"
+  #         exit 1
+  #     - name: Continue if tests passed
+  #       if: ${{ needs.call-frontend-build.outputs.test-status == 'success' }}
+  #       run: echo "Tests passed"
+
+  # call-docker-build-and-push:
+  #   name: Run
+  #   needs: [call-backend-build, call-frontend-build]
+  #   uses: ./.github/workflows/docker-build-and-push.yml
@@ -1,17 +0,0 @@
-name: validation
-
-on:
-  pull_request:
-    branches:
-      - devel
-    types:
-      - opened
-      - synchronize
-      - reopened
-      - edited
-      - ready_for_review
-      - labeled
-
-jobs:
-  commit-message:
-    uses: dbeaver/dbeaver/.github/workflows/reused-commit-msgs-validator.yml@devel
@@ -26,7 +26,7 @@ dist/

 *.iml
 /idea/
-.idea/
+

 ## Mac OS
 .DS_Store
@@ -40,6 +40,11 @@ server/test/io.cloudbeaver.test.platform/workspace/.data/
 .classpath
 .settings/

+## Eclipse PDE
+*.product.launch
+
+workspace-dev-ce/
 deploy/cloudbeaver
 server/**/target
-apps/**/target
+apps/**/target
+osgi-cache/
@@ -15,11 +15,11 @@
    "streetsidesoftware.code-spell-checker",
    "streetsidesoftware.code-spell-checker-russian",
    "syler.sass-indented",
-    "VisualStudioExptTeam.intellicode-api-usage-examples",
    "VisualStudioExptTeam.vscodeintellicode",
    "yzhang.markdown-all-in-one",
    "GraphQL.vscode-graphql-syntax",
    "mrmlnc.vscode-json5",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "devnaumov.licensify"
  ]
 }
@@ -4,95 +4,73 @@
    {
      "type": "chrome",
      "request": "launch",
-      "name": "Chrome",
+      "name": "CloudBeaver CE",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/..",
+      "outFiles": [
+        "${workspaceFolder}/../cloudbeaver/webapp/packages/**/dist/**/*.{js,jsx}"
+      ],
+      "smartStep": true,
      "sourceMaps": true,
-      "sourceMapPathOverrides": {
-        "webpack:///*": "${workspaceFolder}/../*"
-      },
-      "skipFiles": [
-        "<node_internals>/**",
-        "**/node_modules/**",
-        "${workspaceFolder}/webapp/**/node_modules/**/*.js",
-        "${workspaceFolder}/webapp/**/dist/**/*.js"
-      ]
+      "disableNetworkCache": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"]
    },
    {
      "type": "java",
-      "name": "CloudBeaver CE",
-      "cwd": "${workspaceFolder}/../opt/cbce",
+      "name": "CloudBeaver CE Server",
+      "cwd": "${workspaceFolder}/../dbeaver-workspace/app-workspace/cbce",
      "request": "launch",
-      "mainClass": "org.eclipse.equinox.launcher.Main",
-      "windows": {
-        "type": "java",
-        "name": "CloudBeaver CE",
-        "request": "launch",
-        "mainClass": "org.eclipse.equinox.launcher.Main",
-        "classPaths": [
-          "${workspaceFolder}/../eclipse/eclipse/plugins/org.eclipse.equinox.launcher_1.6.500.v20230717-2134.jar"
-        ],
-        "args": [
-          "-product",
-          "io.cloudbeaver.product.ce.product",
-          "-configuration",
-          "file:${workspaceFolder}/../eclipse/workspace/.metadata/.plugins/org.eclipse.pde.core/CloudbeaverServer.product/",
-          "-dev",
-          "file:${workspaceFolder}/../eclipse/workspace/.metadata/.plugins/org.eclipse.pde.core/CloudbeaverServer.product/dev.properties",
-          "-os",
-          "win32",
-          "-ws",
-          "win32",
-          "-arch",
-          "x86_64",
-          "-nl",
-          "en",
-          "-showsplash",
-          "-web-config",
-          "conf/cloudbeaver.conf"
-        ],
-        "vmArgs": [
-          "-XX:+IgnoreUnrecognizedVMOptions",
-          "--add-modules=ALL-SYSTEM",
-          "-Xms64m",
-          "-Xmx1024m",
-          "-Declipse.pde.launch=true"
-        ]
-      },
-      "osx": {
-        "type": "java",
-        "name": "CloudBeaver CE",
-        "request": "launch",
-        "mainClass": "org.eclipse.equinox.launcher.Main",
-        "classPaths": [
-          "${workspaceFolder}/../eclipse/Eclipse.app/Contents/Eclipse/plugins/org.eclipse.equinox.launcher_1.6.500.v20230717-2134.jar"
-        ],
-        "args": [
-          "-product",
-          "io.cloudbeaver.product.ce.product",
-          "-configuration",
-          "file:${workspaceFolder}/../eclipse/workspace/.metadata/.plugins/org.eclipse.pde.core/CloudbeaverServer.product/",
-          "-dev",
-          "file:${workspaceFolder}/../eclipse/workspace/.metadata/.plugins/org.eclipse.pde.core/CloudbeaverServer.product/dev.properties",
-          "-os",
-          "macosx",
-          "-ws",
-          "cocoa",
-          "-arch",
-          "aarch64",
-          "-nl",
-          "en_US",
-          "-showsplash"
-        ],
-        "vmArgs": [
-          "-XX:+IgnoreUnrecognizedVMOptions",
-          "--add-modules=ALL-SYSTEM",
-          "-Xms64m",
-          "-Xmx1024m",
-          "-Declipse.pde.launch=true",
-          "-XstartOnFirstThread"
-        ]
-      }
+      "mainClass": "org.jkiss.dbeaver.launcher.DBeaverLauncher",
+      "args": [
+        "-product",
+        "io.cloudbeaver.product.ce.product",
+        "-configuration",
+        "file:${workspaceFolder}/../dbeaver-workspace/products/CloudbeaverServer.product/",
+        "-dev",
+        "file:${workspaceFolder}/../dbeaver-workspace/products/CloudbeaverServer.product/dev.properties",
+        "-nl",
+        "en",
+        "-web-config",
+        "conf/cloudbeaver.conf",
+        "-registryMultiLanguage"
+      ],
+      // "windows": {
+      //   "args": ["-os", "win32", "-ws", "win32", "-arch", "x86_64"]
+      // },
+      // "osx": {
+      //   "args": ["-os", "macosx", "-ws", "cocoa", "-arch", "aarch64"]
+      // },
+
+      "vmArgs": [
+        "-XX:+IgnoreUnrecognizedVMOptions",
+        "-Xms64m",
+        "-Xmx1024m",
+        "-Declipse.pde.launch=true",
+        "-XstartOnFirstThread",
+        "-Dfile.encoding=UTF-8",
+        "--add-modules=ALL-SYSTEM",
+        "--add-opens=java.base/java.io=ALL-UNNAMED",
+        "--add-opens=java.base/java.lang=ALL-UNNAMED",
+        "--add-opens=java.base/java.lang.reflect=ALL-UNNAMED",
+        "--add-opens=java.base/java.net=ALL-UNNAMED",
+        "--add-opens=java.base/java.nio=ALL-UNNAMED",
+        "--add-opens=java.base/java.nio.charset=ALL-UNNAMED",
+        "--add-opens=java.base/java.text=ALL-UNNAMED",
+        "--add-opens=java.base/java.time=ALL-UNNAMED",
+        "--add-opens=java.base/java.util=ALL-UNNAMED",
+        "--add-opens=java.base/java.util.concurrent=ALL-UNNAMED",
+        "--add-opens=java.base/java.util.concurrent.atomic=ALL-UNNAMED",
+        "--add-opens=java.base/jdk.internal.vm=ALL-UNNAMED",
+        "--add-opens=java.base/jdk.internal.misc=ALL-UNNAMED",
+        "--add-opens=java.base/sun.nio.ch=ALL-UNNAMED",
+        "--add-opens=java.base/sun.security.ssl=ALL-UNNAMED",
+        "--add-opens=java.base/sun.security.action=ALL-UNNAMED",
+        "--add-opens=java.base/sun.security.util=ALL-UNNAMED",
+        "--add-opens=java.security.jgss/sun.security.jgss=ALL-UNNAMED",
+        "--add-opens=java.security.jgss/sun.security.krb5=ALL-UNNAMED",
+        "--add-opens=java.base/java.util.concurrent.atomic=ALL-UNNAMED",
+        "--add-opens=java.sql/java.sql=ALL-UNNAMED"
+      ]
    }
  ]
 }
@@ -1,17 +0,0 @@
-{
-  "license": {
-    "scope": "typescript,typescriptreact,javascript,javascriptreact",
-    "prefix": "license",
-    "body": [
-      "/*",
-      " * CloudBeaver - Cloud Database Manager",
-      " * Copyright (C) 2020-2023 DBeaver Corp and others",
-      " *",
-      " * Licensed under the Apache License, Version 2.0.",
-      " * you may not use this file except in compliance with the License.",
-      " */",
-      "",
-      ""
-    ]
-  }
-}
@@ -2,19 +2,18 @@
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.linkedEditing": true,
-
  "task.autoDetect": "off",
-
  "java.configuration.updateBuildConfiguration": "automatic",
  "java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx16G -Xms100m -Xlog:disable",
  "java.compile.nullAnalysis.mode": "automatic",
-
  "typescript.preferences.useAliasesForRenames": false,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "typescript.preferences.quoteStyle": "single",
-  "typescript.tsdk": "webapp/node_modules/typescript/lib",
-
+  "typescript.tsdk": "webapp/.yarn/sdks/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "prettier.prettierPath": "webapp/.yarn/sdks/prettier/index.cjs",
+  "eslint.nodePath": "webapp/.yarn/sdks",
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
@@ -22,8 +21,9 @@
    "typescript",
    "typescriptreact"
  ],
-  "eslint.workingDirectories": ["webapp"],
-
+  "eslint.workingDirectories": [
+    "webapp"
+  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -40,12 +40,10 @@
  "[java]": {
    "editor.defaultFormatter": "redhat.java"
  },
-
  "files.eol": "\n",
  "files.associations": {
    "*.css": "postcss"
  },
-
-  "java.checkstyle.configuration": "${workspaceFolder}/../dbeaver/dbeaver-checkstyle-config.xml",
+  "java.checkstyle.configuration": "${workspaceFolder}/../dbeaver-common/.github/dbeaver-checkstyle-config.xml",
  "java.checkstyle.version": "10.12.0"
-}
+}
@@ -17,7 +17,7 @@
      "type": "shell",
      "command": "yarn",
      "group": "test",
-      "args": ["lerna", "run", "test", "--no-bail", "--stream", "--"]
+      "args": ["test"]
    },
    {
      "label": "Run DevServer CE",
@@ -33,14 +33,32 @@
        "cwd": "${workspaceFolder}/webapp/packages/product-default"
      }
    },
+    {
+      "label": "Generate Eclipse PDE CloudBeaver",
+      "type": "shell",
+      "osx": {
+        "command": "./generate_workspace.sh"
+      },
+      "windows": {
+        "command": "./generate_workspace.cmd"
+      },
+      "options": {
+        "cwd": "${workspaceFolder}/../cloudbeaver"
+      },
+      "presentation": {
+        "reveal": "silent",
+        "close": true,
+        "clear": false
+      }
+    },
    {
      "label": "Build CE",
      "type": "shell",
      "windows": {
-        "command": "./build-sqlite.bat"
+        "command": "./build.bat"
      },
      "osx": {
-        "command": "./build-sqlite.sh"
+        "command": "./build.sh"
      },
      "options": {
        "cwd": "${workspaceFolder}/deploy"
@@ -50,16 +68,45 @@
        "isDefault": true
      }
    },
+    {
+      "label": "Run Backend CE",
+      "type": "shell",
+      "windows": {
+        "command": "./run-server.bat"
+      },
+      "osx": {
+        "command": "./run-server.sh"
+      },
+      "options": {
+        "cwd": "${workspaceFolder}/deploy/cloudbeaver"
+      }
+    },
    {
      "label": "Yarn Install",
      "type": "shell",
-      "command": "yarn install; yarn lerna bootstrap",
+      "command": "yarn install",
      "args": [],
      "presentation": {
        "reveal": "silent",
        "close": true,
        "clear": false
      }
+    },
+    {
+      "label": "Clean CE",
+      "type": "shell",
+      "command": "yarn clear",
+      "options": {
+        "cwd": "${workspaceFolder}/webapp"
+      }
+    },
+    {
+      "label": "Add Custom Plugin",
+      "type": "shell",
+      "command": "yarn run add-plugin",
+      "options": {
+        "cwd": "${workspaceFolder}/webapp/packages"
+      }
    }
  ],
  "inputs": [
@@ -1,89 +1,92 @@
+<img src="https://github.com/dbeaver/cloudbeaver/wiki/images/cloudbeaver-logo.png" align="right" width="250"/>
+
 # CloudBeaver Community

-<img src="https://github.com/dbeaver/cloudbeaver/wiki/images/cloudbeaver-logo.png" width="250"/>
-
 Cloud Database Manager - Community Edition.  
-CloudBeaver is a web server which provides rich web interface. Server itself is a Java application, web part is written on TypeScript and React.  
+CloudBeaver is a web server that provides a rich web interface. The server itself is a Java application, and the web part is written in TypeScript and React.  
 It is free to use and open-source (licensed under [Apache 2](https://github.com/dbeaver/cloudbeaver/blob/devel/LICENSE) license).  
-See out [WIKI](https://github.com/dbeaver/cloudbeaver/wiki) for more details.  
+See our [WIKI](https://github.com/dbeaver/cloudbeaver/wiki) for more details. 

-![](https://github.com/dbeaver/cloudbeaver/wiki/images/demo_screenshot_1.png)
+<a><img src="https://github.com/dbeaver/cloudbeaver/wiki/images/connection-creation-demo.png" width="400"/></a>
+<img src="https://github.com/dbeaver/cloudbeaver/wiki/images/gis-demo.png" width="400"/>
+<img src="https://github.com/dbeaver/cloudbeaver/wiki/images/data-transfer-demo.png" width="400"/>
+<img src="https://github.com/dbeaver/cloudbeaver/wiki/images/sql-editor-demo.png" width="400"/>

 ## Run in Docker

 - [Official Docker repository](https://hub.docker.com/r/dbeaver/cloudbeaver)
- [Running instructions](https://github.com/dbeaver/cloudbeaver/wiki/Run-Docker-Container)
+- [Deployment instructions](https://github.com/dbeaver/cloudbeaver/wiki/CloudBeaver-Deployment)

 ## Demo server

-You can see live demo of CloudBeaver here: https://demo.cloudbeaver.io  
+You can see a live demo of CloudBeaver here: https://demo.cloudbeaver.io  

 [Database access instructions](https://github.com/dbeaver/cloudbeaver/wiki/Demo-Server)

 ## Changelog

-### CloudBeaver 23.2.4 - 2023-11-06
+### 25.0.4 2025-05-05
+- Important:
+  -    Connection templates were removed from the application. You can use the Connection Editor to create new connections.
+- Databases and drivers:
+  -    LibSQL: added the ability to use token authentication for connecting;
+  -    Clickhouse: driver has been updated to version 0.8.5.

- Unauthorized access vulnerability was fixed;
- Updated the version of the Clickhouse driver to 0.4.6;
- Support for using custom delimiters has been added in MySQL;
+### 25.0.3 2025-04-21
+- Administration: log records now capture create, update, and delete actions for users, teams, and connections for improved tracking and transparency;
+- SQL Editor: auto-completion has been improved for aliases and camelCase entities;
+- Users DDL in Oracle is displayed in metadata editor on corresponding tab for users with Oracle administration permissions;
 - Different bug fixes and enhancements have been made.

-
-### CloudBeaver 23.2.3 - 2023-10-23
-
- The SSL option is available for establishing a connection in SQL Server;
- Added the ability to edit binary values in a table;
+### 25.0.2 2025-04-07
+- Data Editor: improved table rendering to scale column width depending on the content.
+- Improved Navigation tree performance: lost connection does not lead to the application freezing anymore.
 - Different bug fixes and enhancements have been made.

-### CloudBeaver 23.2.2 - 2023-10-09
+### 25.0.1 2025-03-24
+- Improved performance of the export/import functionality by optimizing disk memory consumption;
+- Enhanced initial configuration on stage security: if the initial setup time exceeds 1 hour, the server must be restarted.

- The 'Save credentials' checkbox has been removed from a template creating form as credentials are not stored in templates;
- Different bug fixes and enhancements have been made.
-
-### CloudBeaver 23.2.1 - 2023-09-25
-
- The Output tab has been implemented, which includes warnings, info and notices generated by the database when executing user queries;
- Scrollbars have been made theme-independent, resolving interface issues with light theme;
- Fixed an issue in the SQL editor where it was not possible to switch the active schema when working with Oracle databases;
- Different bug fixes and enhancements have been made.
-
-
-23.2.0 - 2023-09-04
-
- Performance:
-   - Pagination has been added to the Navigation tree and metadata viewer, allowing working with more than 1000 database items;
- Access Management:
-   - Access permissions can be specified for pre-configured connections via the configuration file;
-   - Reverse Proxy authentication now includes the option to provide users' First name and Last name;
- Authorization:
-   - The SSL option is now available for establishing connections in MySQL, PostgreSQL, Clickhouse;
- Connections:
-   - Connections are consistently displayed now when they are pre-configured into the workspace in the Global Configuration json file
- Navigation tree:
-   - The filters for the Navigation tree now allow hiding and showing schemas within the interface.
-   - The search request considers file names and excludes the .sql file extension for now;
- Data Editor:
-   - The ability to rearrange columns in the Data Editor has been added;
-   - The ability to use custom functions in the Grouping panel has been added;
+### 25.0 2025-03-03
+### Changes since 24.3.0:
+- General:
+  -    Added transaction log viewing for connections with manual commit mode. This allows users to see all modifying statements before committing;
+  -    Added an ability for all editors to reconnect if a connection has been lost;
+  -    Tooltips for metadata objects and SQL Editor tabs now include additional details about catalogs, schemas, and connections;
+  -    Added Ctrl + Shift + S (Cmd + Shift + S on Mac) shortcut for the "Save As Script" action;
+  -    Updated list of available shortcuts for macOS.
 - Administration:
-   - New Settings panel displays the product configuration settings such as Minimum fetch size, Maximum fetch size, and Default fetch size from the Data Editor;
-   - "Connection Management" tab has been renamed to "Connection Templates" - now only connection templates are displayed;
- SQL Editor:
-   - Users can simultaneously edit resources for now, allowing them to work together;
-   - Support for displaying tables with nested arrays of objects has been added;
-   - The ability to compress export files allowed to increase in download speed, especially for larger files;
-   - UX in the search bar has been improved  - users can delete a query or request by clicking on the cross icon;
- Driver management:
-   - Custom settings have been added to the interface for the following dialogue connections: SQLite, DB2, SQL Server, MySQL, Oracle and PostgreSQL;
-   - Trino driver has been updated;
- Security:
-   - Password autofill functionality was removed;
-   - The "eye" icon for password fields has been removed - the passwords entered into fields will not be displayed in the interface for now;
- Many small bug fixes, enhancements, and improvements have been made
+  -    Added system information data to the Product Information tab in the Administration panel. This provides administrators with quick access to essential system details, such as the server deployment type (e.g., Docker, Kubernetes), install path, Java version, and Java parameters;
+  -    The global access server URL has been added to the console log, making it easier to locate server installation information directly within the logs;
+  -    New environment variables were introduced for theme styling, SQL editor, and log viewer settings. You can use them for quick setup during the initial Docker configuration stage.
+- LDAP authorization:
+  -    Added the ability to match users from LDAP configuration with CloudBeaver users;
+  -    Added an option to specify a user login as an attribute parameter for LDAP providers;
+  -    CloudBeaver now uses EntityID or objectGUID to create new LDAP users in CloudBeaver to ensure uniqueness. This change enhances user identification and prevents conflicts while maintaining backward compatibility for existing users.
+- Deployment:
+  -    CloudBeaver now uses JDK 21 as its base Java image. If you use standard deployment and upgrade scripts, the new Java version will be applied automatically after the product update;
+  -    Changed the permission of the Docker volumes directory to enhance security and prevent any insecure actions by the "root" user. All new deployments will use the "dbeaver" user by default. For existing deployments running as the "root" user, this update will automatically adjust file permissions to ensure they are compatible with the new security model. There will be no manual intervention, and the service will continue to run as expected with the updated permissions.
+- Connections:
+  -    Enabled the possibility of switching a database connection to read-only mode. This mode can be activated in the connection dialog. Administrators can set this mode for any connection, while regular users can set it for their private connections only;
+  -    For Oracle and SQL Server connections, advanced database settings can now be used in the URL connection mode.
+- Data Editor:
+  -    Auto-suggestions for column names in the Data Editor filter field were introduced to avoid typing mistakes;
+  -    Introduced the ability to insert data in tables without unique keys: you can import data from CSV files or insert entire rows directly via UI;
+  -    The collapse of the grouping panel doesn't lead to the complete panel cleaning anymore.
+- Data transfer:
+  -    Added the ability to use default spreadsheet names (e.g. Sheet0, Sheet1) for exporting to XLSX;
+  -    An option to replace line break characters on any custom value was added when exporting to CSV.
+- Navigator tree: 
+  -    An option to show metadata object comments was added. You can enable it in the database navigator settings panel;
+  -    Introduced the ability to create connections not only on the initial level but in folders and sub-folders directly;
+  -    Fixed the display of objects with long names (more than 32 characters) - now, such names will be displayed entirely and not in a cropped format.
+- Drivers:
+  -    The MariaDB driver has been updated to version 3.5.1;
+  -    The SQLite driver has been updated to version 3.48.0.0.

+## Contribution
+As a community-driven open-source project, we warmly welcome contributions through GitHub pull requests. 

-### Old CloudBeaver releases
-
-You can find information about earlier releases on the CloudBeaver wiki https://github.com/dbeaver/cloudbeaver/wiki/Releases.
-
+[We are happy to reward](https://dbeaver.com/help-dbeaver/) our most active contributors every major sprint.
+The most significant contribution to our code for the major release 24.3.0 was made by:
+1. [cashlifei](https://github.com/cashlifei)
@@ -9,9 +9,10 @@ currently being supported with security updates.
 | ------- | --------- |
 | 22.x    | yes       |
 | 23.x    | yes       |
+| 24.x    | yes       |

 ## Reporting a Vulnerability

-Please report (suspected) security vulnerabilities to devops@dbeaver.com.  
-You will receive a response from us within 48 hours.  
-If the issue is confirmed, we will release a patch as soon as possible depending on complexity but historically within a few days.
+Please report (suspected) security vulnerabilities to devops@dbeaver.com.
+You will receive a response from us within 48 hours.
+If the issue is confirmed, we will release a patch as soon as possible, depending on complexity, but historically, within a few days.
@@ -17,7 +17,7 @@
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
-            <version>2.2.220</version>
+            <version>2.1.214</version>
        </dependency>
    </dependencies>
    <build>
@@ -1,6 +1,6 @@
 /*
 * DBeaver - Universal Database Manager
- * Copyright (C) 2010-2023 DBeaver Corp and others
+ * Copyright (C) 2010-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@@ -1,6 +1,6 @@
 /*
 * DBeaver - Universal Database Manager
- * Copyright (C) 2010-2023 DBeaver Corp and others
+ * Copyright (C) 2010-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@@ -1,6 +1,6 @@
 /*
 * DBeaver - Universal Database Manager
- * Copyright (C) 2010-2023 DBeaver Corp and others
+ * Copyright (C) 2010-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@@ -1,6 +1,6 @@
 /*
 * DBeaver - Universal Database Manager
- * Copyright (C) 2010-2023 DBeaver Corp and others
+ * Copyright (C) 2010-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2
@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated
@@ -0,0 +1,21 @@
+# artifacts
+lib
+out
+dist
+node_modules
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+!.yarn/sdks/**
+
+# Swap the comments on the following lines if you wish to use zero-installs
+# In that case, don't forget to run `yarn config set enableGlobalCache false`!
+# Documentation here: https://yarnpkg.com/features/caching#zero-installs
+
+#!.yarn/cache
+.pnp.*
@@ -0,0 +1,10 @@
+import defaultDbeaverConfig from '@dbeaver/prettier-config';
+
+/**
+ * @type {import("prettier").Config}
+ */
+const config = {
+  ...defaultDbeaverConfig,
+};
+
+export default config;
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "arcanis.vscode-zipfs",
+    "esbenp.prettier-vscode"
+  ]
+}
@@ -0,0 +1,9 @@
+{
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "typescript.tsdk": ".yarn/sdks/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs"
+}
@@ -0,0 +1,5 @@
+# This file is automatically generated by @yarnpkg/sdks.
+# Manual changes might be lost!
+
+integrations:
+  - vscode
@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/bin/prettier.cjs
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real prettier/bin/prettier.cjs your application uses
+module.exports = wrapWithUserWrapper(absRequire(`prettier/bin/prettier.cjs`));
@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, register} = require(`module`);
+const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
+
+const relPnpApiPath = "../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
+const absRequire = createRequire(absPnpApiPath);
+
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real prettier your application uses
+module.exports = wrapWithUserWrapper(absRequire(`prettier`));
@@ -0,0 +1,7 @@
+{
+  "name": "prettier",
+  "version": "3.5.3-sdk",
+  "main": "./index.cjs",
+  "type": "commonjs",
+  "bin": "./bin/prettier.cjs"
+}
@@ -0,0 +1,10 @@
+enableTelemetry: false
+preferReuse: true
+
+# pnpIgnorePatterns:
+#   - "**/cloudbeaver/common-typescript/**"
+
+plugins:
+  - checksum: 50414773926286d8c0fc32e9936a799ad23296281046f03674bc33517b597e1ff7856092c3fcf8d5460a29549ef8b3dca3f59a1732b650a02bf523b255d726e7
+    path: .yarn/plugins/@yarnpkg/plugin-ts-project-linker.cjs
+    spec: "https://raw.githubusercontent.com/Wroud/foundation/refs/heads/main/packages/yarn-plugin-ts-project-linker/bundles/%40yarnpkg/plugin-ts-project-linker.js"
@@ -0,0 +1 @@
+# @dbeaver/react-data-grid
@@ -0,0 +1 @@
+!lib
@@ -0,0 +1,490 @@
+import { Context } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import type { Key } from 'react';
+import type { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+declare interface BaseRenderRowProps<TRow, TSummaryRow = unknown> extends Omit_2<React.ComponentProps<'div'>, 'style' | 'children'>, Pick<DataGridProps<TRow, TSummaryRow>, 'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'> {
+    viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
+    rowIdx: number;
+    selectedCellIdx: number | undefined;
+    isRowSelectionDisabled: boolean;
+    isRowSelected: boolean;
+    gridRowStart: number;
+    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+}
+
+export declare interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
+    readonly parent: CalculatedColumnParent<TRow, TSummaryRow> | undefined;
+    readonly idx: number;
+    readonly level: number;
+    readonly width: number | string;
+    readonly minWidth: number;
+    readonly maxWidth: number | undefined;
+    readonly resizable: boolean;
+    readonly sortable: boolean;
+    readonly draggable: boolean;
+    readonly frozen: boolean;
+    readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
+    readonly renderHeaderCell: (props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode;
+}
+
+export declare type CalculatedColumnOrColumnGroup<R, SR> = CalculatedColumnParent<R, SR> | CalculatedColumn<R, SR>;
+
+export declare interface CalculatedColumnParent<R, SR> {
+    readonly name: string | ReactElement;
+    readonly parent: CalculatedColumnParent<R, SR> | undefined;
+    readonly idx: number;
+    readonly colSpan: number;
+    readonly level: number;
+    readonly headerCellClass?: Maybe<string>;
+}
+
+export declare const Cell: <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;
+
+export declare interface CellClickArgs<TRow, TSummaryRow = unknown> {
+    rowIdx: number;
+    row: TRow;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    selectCell: (enableEditor?: boolean) => void;
+}
+
+declare type CellEvent<E extends React.SyntheticEvent<HTMLDivElement>> = E & {
+    preventGridDefault: () => void;
+    isGridDefaultPrevented: () => boolean;
+};
+
+export declare type CellKeyboardEvent = CellEvent<React.KeyboardEvent<HTMLDivElement>>;
+
+export declare type CellKeyDownArgs<TRow, TSummaryRow = unknown> = SelectCellKeyDownArgs<TRow, TSummaryRow> | EditCellKeyDownArgs<TRow, TSummaryRow>;
+
+export declare type CellMouseEvent = CellEvent<React.MouseEvent<HTMLDivElement>>;
+
+export declare interface CellRendererProps<TRow, TSummaryRow> extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>, Omit_2<React.ComponentProps<'div'>, 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    colSpan: number | undefined;
+    isCopied: boolean;
+    isDraggedOver: boolean;
+    isCellSelected: boolean;
+    onClick: RenderRowProps<TRow, TSummaryRow>['onCellClick'];
+    onDoubleClick: RenderRowProps<TRow, TSummaryRow>['onCellDoubleClick'];
+    onContextMenu: RenderRowProps<TRow, TSummaryRow>['onCellContextMenu'];
+    onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, newRow: TRow) => void;
+}
+
+export declare interface CellSelectArgs<TRow, TSummaryRow = unknown> {
+    rowIdx: number;
+    row: TRow | undefined;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+}
+
+export declare type ColSpanArgs<TRow, TSummaryRow> = {
+    type: 'HEADER';
+} | {
+    type: 'ROW';
+    row: TRow;
+} | {
+    type: 'SUMMARY';
+    row: TSummaryRow;
+};
+
+export declare interface Column<TRow, TSummaryRow = unknown> {
+    /** The name of the column. By default it will be displayed in the header cell */
+    readonly name: string | ReactElement;
+    /** A unique key to distinguish each column */
+    readonly key: string;
+    /**
+     * Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns
+     * @default 'auto'
+     */
+    readonly width?: Maybe<number | string>;
+    /**
+     * Minimum column width in px
+     * @default '50px'
+     */
+    readonly minWidth?: Maybe<number>;
+    /** Maximum column width in px. */
+    readonly maxWidth?: Maybe<number>;
+    readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
+    readonly headerCellClass?: Maybe<string>;
+    readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
+    /** Render function used to render the content of cells */
+    readonly renderCell?: Maybe<(props: RenderCellProps<TRow, TSummaryRow>) => ReactNode>;
+    /** Render function used to render the content of the column's header cell */
+    readonly renderHeaderCell?: Maybe<(props: RenderHeaderCellProps<TRow, TSummaryRow>) => ReactNode>;
+    /** Render function used to render the content of summary cells */
+    readonly renderSummaryCell?: Maybe<(props: RenderSummaryCellProps<TSummaryRow, TRow>) => ReactNode>;
+    /** Render function used to render the content of group cells */
+    readonly renderGroupCell?: Maybe<(props: RenderGroupCellProps<TRow, TSummaryRow>) => ReactNode>;
+    /** Render function used to render the content of edit cells. When set, the column is automatically set to be editable */
+    readonly renderEditCell?: Maybe<(props: RenderEditCellProps<TRow, TSummaryRow>) => ReactNode>;
+    /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */
+    readonly editable?: Maybe<boolean | ((row: TRow) => boolean)>;
+    readonly colSpan?: Maybe<(args: ColSpanArgs<TRow, TSummaryRow>) => Maybe<number>>;
+    /** Determines whether column is frozen or not */
+    readonly frozen?: Maybe<boolean>;
+    /** Enable resizing of a column */
+    readonly resizable?: Maybe<boolean>;
+    /** Enable sorting of a column */
+    readonly sortable?: Maybe<boolean>;
+    /** Enable dragging of a column */
+    readonly draggable?: Maybe<boolean>;
+    /** Sets the column sort order to be descending instead of ascending the first time the column is sorted */
+    readonly sortDescendingFirst?: Maybe<boolean>;
+    readonly editorOptions?: Maybe<{
+        /**
+         * Render the cell content in addition to the edit cell.
+         * Enable this option when the editor is rendered outside the grid, like a modal for example.
+         * By default, the cell content is not rendered when the edit cell is open.
+         * @default false
+         */
+        readonly displayCellContent?: Maybe<boolean>;
+        /** @default true */
+        readonly commitOnOutsideClick?: Maybe<boolean>;
+    }>;
+}
+
+export declare interface ColumnGroup<R, SR = unknown> {
+    /** The name of the column group, it will be displayed in the header cell */
+    readonly name: string | ReactElement;
+    readonly headerCellClass?: Maybe<string>;
+    readonly children: readonly ColumnOrColumnGroup<R, SR>[];
+}
+
+export declare type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;
+
+export declare interface CopyEvent<TRow> {
+    sourceColumnKey: string;
+    sourceRow: TRow;
+}
+
+/**
+ * Main API Component to render a data grid of rows and columns
+ *
+ * @example
+ *
+ * <DataGrid columns={columns} rows={rows} />
+ */
+export declare function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridProps<R, SR, K>): JSX.Element;
+
+export declare const DataGridDefaultRenderersContext: Context<Maybe<Renderers<any, any>>>;
+
+export declare interface DataGridHandle {
+    element: HTMLDivElement | null;
+    scrollToCell: (position: PartialPosition) => void;
+    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+}
+
+export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {
+    ref?: Maybe<React.Ref<DataGridHandle>>;
+    /**
+     * Grid and data Props
+     */
+    /** An array of objects representing each column on the grid */
+    columns: readonly ColumnOrColumnGroup<NoInfer<R>, NoInfer<SR>>[];
+    /** A function called for each rendered row that should return a plain key/value pair object */
+    rows: readonly R[];
+    /**
+     * Rows to be pinned at the top of the rows view for summary, the vertical scroll bar will not scroll these rows.
+     */
+    topSummaryRows?: Maybe<readonly SR[]>;
+    /**
+     * Rows to be pinned at the bottom of the rows view for summary, the vertical scroll bar will not scroll these rows.
+     */
+    bottomSummaryRows?: Maybe<readonly SR[]>;
+    /** The getter should return a unique key for each row */
+    rowKeyGetter?: Maybe<(row: NoInfer<R>) => K>;
+    onRowsChange?: Maybe<(rows: NoInfer<R>[], data: RowsChangeData<NoInfer<R>, NoInfer<SR>>) => void>;
+    /**
+     * Dimensions props
+     */
+    /**
+     * The height of each row in pixels
+     * @default 35
+     */
+    rowHeight?: Maybe<number | ((row: NoInfer<R>) => number)>;
+    /**
+     * The height of the header row in pixels
+     * @default 35
+     */
+    headerRowHeight?: Maybe<number>;
+    /**
+     * The height of each summary row in pixels
+     * @default 35
+     */
+    summaryRowHeight?: Maybe<number>;
+    /**
+     * Feature props
+     */
+    /** Set of selected row keys */
+    selectedRows?: Maybe<ReadonlySet<K>>;
+    /** Determines if row selection is disabled, per row */
+    isRowSelectionDisabled?: Maybe<(row: NoInfer<R>) => boolean>;
+    /** Function called whenever row selection is changed */
+    onSelectedRowsChange?: Maybe<(selectedRows: Set<NoInfer<K>>) => void>;
+    /** Used for multi column sorting */
+    sortColumns?: Maybe<readonly SortColumn[]>;
+    onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>;
+    defaultColumnOptions?: Maybe<DefaultColumnOptions<NoInfer<R>, NoInfer<SR>>>;
+    onFill?: Maybe<(event: FillEvent<NoInfer<R>>) => NoInfer<R>>;
+    onCopy?: Maybe<(event: CopyEvent<NoInfer<R>>) => void>;
+    onPaste?: Maybe<(event: PasteEvent<NoInfer<R>>) => NoInfer<R>>;
+    /**
+     * Event props
+     */
+    /** Function called whenever a cell is clicked */
+    onCellClick?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
+    /** Function called whenever a cell is double clicked */
+    onCellDoubleClick?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
+    /** Function called whenever a cell is right clicked */
+    onCellContextMenu?: Maybe<(args: CellClickArgs<NoInfer<R>, NoInfer<SR>>, event: CellMouseEvent) => void>;
+    onCellKeyDown?: Maybe<(args: CellKeyDownArgs<NoInfer<R>, NoInfer<SR>>, event: CellKeyboardEvent) => void>;
+    /** Function called whenever cell selection is changed */
+    onSelectedCellChange?: Maybe<(args: CellSelectArgs<NoInfer<R>, NoInfer<SR>>) => void>;
+    /** Called when the grid is scrolled */
+    onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
+    /** Called when a column is resized */
+    onColumnResize?: Maybe<(column: CalculatedColumn<R, SR>, width: number) => void>;
+    /** Called when a column is reordered */
+    onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>;
+    /**
+     * Toggles and modes
+     */
+    /** @default true */
+    enableVirtualization?: Maybe<boolean>;
+    /**
+     * The minimum number of rows to render when virtualization is enabled
+     */
+    minimumRowsToRender?: Maybe<number>;
+    /**
+     * Miscellaneous
+     */
+    renderers?: Maybe<Renderers<NoInfer<R>, NoInfer<SR>>>;
+    rowClass?: Maybe<(row: NoInfer<R>, rowIdx: number) => Maybe<string>>;
+    /** @default 'ltr' */
+    direction?: Maybe<Direction>;
+    'data-testid'?: Maybe<string>;
+    'data-cy'?: Maybe<string>;
+}
+
+export declare type DefaultColumnOptions<R, SR> = Pick<Column<R, SR>, 'renderCell' | 'renderHeaderCell' | 'width' | 'minWidth' | 'maxWidth' | 'resizable' | 'sortable' | 'draggable'>;
+
+declare type Direction = 'ltr' | 'rtl';
+
+declare interface EditCellKeyDownArgs<TRow, TSummaryRow = unknown> {
+    mode: 'EDIT';
+    row: TRow;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    rowIdx: number;
+    navigate: () => void;
+    onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
+}
+
+export declare interface FillEvent<TRow> {
+    columnKey: string;
+    sourceRow: TRow;
+    targetRow: TRow;
+}
+
+declare interface GroupRow<TRow> {
+    readonly childRows: readonly TRow[];
+    readonly id: string;
+    readonly parentId: unknown;
+    readonly groupKey: unknown;
+    readonly isExpanded: boolean;
+    readonly level: number;
+    readonly posInSet: number;
+    readonly setSize: number;
+    readonly startRowIndex: number;
+}
+
+declare type Maybe<T> = T | undefined | null;
+
+declare type Omit_2<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+declare interface PartialPosition {
+    readonly idx?: number | undefined;
+    readonly rowIdx?: number | undefined;
+}
+
+export declare interface PasteEvent<TRow> {
+    sourceColumnKey: string;
+    sourceRow: TRow;
+    targetColumnKey: string;
+    targetRow: TRow;
+}
+
+declare interface Position {
+    readonly idx: number;
+    readonly rowIdx: number;
+}
+
+export declare interface RenderCellProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TRow;
+    rowIdx: number;
+    isCellEditable: boolean;
+    tabIndex: number;
+    onRowChange: (row: TRow) => void;
+}
+
+export declare function renderCheckbox({ onChange, indeterminate, ...props }: RenderCheckboxProps): JSX.Element;
+
+export declare interface RenderCheckboxProps extends Pick<React.ComponentProps<'input'>, 'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'> {
+    indeterminate?: boolean | undefined;
+    onChange: (checked: boolean, shift: boolean) => void;
+}
+
+export declare interface RenderEditCellProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TRow;
+    rowIdx: number;
+    onRowChange: (row: TRow, commitChanges?: boolean) => void;
+    onClose: (commitChanges?: boolean, shouldFocusCell?: boolean) => void;
+}
+
+export declare interface Renderers<TRow, TSummaryRow> {
+    renderCell?: Maybe<(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;
+    renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
+    renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
+    renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
+    noRowsFallback?: Maybe<ReactNode>;
+}
+
+export declare interface RenderGroupCellProps<TRow, TSummaryRow = unknown> {
+    groupKey: unknown;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: GroupRow<TRow>;
+    childRows: readonly TRow[];
+    isExpanded: boolean;
+    tabIndex: number;
+    toggleGroup: () => void;
+}
+
+export declare function renderHeaderCell<R, SR>({ column, sortDirection, priority }: RenderHeaderCellProps<R, SR>): string | JSX.Element;
+
+export declare interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    sortDirection: SortDirection | undefined;
+    priority: number | undefined;
+    tabIndex: number;
+}
+
+export declare interface RenderRowProps<TRow, TSummaryRow = unknown> extends BaseRenderRowProps<TRow, TSummaryRow> {
+    row: TRow;
+    lastFrozenColumnIndex: number;
+    copiedCellIdx: number | undefined;
+    draggedOverCellIdx: number | undefined;
+    selectedCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;
+    onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void;
+    rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe<string>>;
+    setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;
+}
+
+export declare function renderSortIcon({ sortDirection }: RenderSortIconProps): JSX.Element | null;
+
+export declare interface RenderSortIconProps {
+    sortDirection: SortDirection | undefined;
+}
+
+export declare function renderSortPriority({ priority }: RenderSortPriorityProps): number | undefined;
+
+export declare interface RenderSortPriorityProps {
+    priority: number | undefined;
+}
+
+export declare interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPriorityProps {
+}
+
+export declare interface RenderSummaryCellProps<TSummaryRow, TRow = unknown> {
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    row: TSummaryRow;
+    tabIndex: number;
+}
+
+export declare function renderToggleGroup<R, SR>(props: RenderGroupCellProps<R, SR>): JSX.Element;
+
+export declare function renderValue<R, SR>(props: RenderCellProps<R, SR>): ReactNode;
+
+export declare const Row: <R, SR>(props: RenderRowProps<R, SR>) => React.JSX.Element;
+
+export declare type RowHeightArgs<TRow> = {
+    type: 'ROW';
+    row: TRow;
+} | {
+    type: 'GROUP';
+    row: GroupRow<TRow>;
+};
+
+export declare interface RowsChangeData<R, SR = unknown> {
+    indexes: number[];
+    column: CalculatedColumn<R, SR>;
+}
+
+export declare const SELECT_COLUMN_KEY = "rdg-select-column";
+
+export declare function SelectCellFormatter({ value, tabIndex, indeterminate, disabled, onChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: SelectCellFormatterProps): ReactNode;
+
+declare interface SelectCellFormatterProps extends SharedInputProps {
+    value: boolean;
+}
+
+declare interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
+    mode: 'SELECT';
+    row: TRow;
+    column: CalculatedColumn<TRow, TSummaryRow>;
+    rowIdx: number;
+    selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
+}
+
+export declare const SelectColumn: Column<any, any>;
+
+export declare interface SelectHeaderRowEvent {
+    checked: boolean;
+}
+
+export declare interface SelectRowEvent<TRow> {
+    row: TRow;
+    checked: boolean;
+    isShiftClick: boolean;
+}
+
+declare type SharedDivProps = Pick<React.ComponentProps<'div'>, 'role' | 'aria-label' | 'aria-labelledby' | 'aria-description' | 'aria-describedby' | 'aria-rowcount' | 'className' | 'style'>;
+
+declare type SharedInputProps = Pick<RenderCheckboxProps, 'disabled' | 'tabIndex' | 'aria-label' | 'aria-labelledby' | 'indeterminate' | 'onChange'>;
+
+export declare interface SortColumn {
+    readonly columnKey: string;
+    readonly direction: SortDirection;
+}
+
+export declare type SortDirection = 'ASC' | 'DESC';
+
+export declare function textEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose }: RenderEditCellProps<TRow, TSummaryRow>): JSX.Element;
+
+export declare function ToggleGroup<R, SR>({ groupKey, isExpanded, tabIndex, toggleGroup }: RenderGroupCellProps<R, SR>): JSX.Element;
+
+export declare function TreeDataGrid<R, SR = unknown, K extends Key = Key>({ columns: rawColumns, rows: rawRows, rowHeight: rawRowHeight, rowKeyGetter: rawRowKeyGetter, onCellKeyDown: rawOnCellKeyDown, onRowsChange, selectedRows: rawSelectedRows, onSelectedRowsChange: rawOnSelectedRowsChange, renderers, groupBy: rawGroupBy, rowGrouper, expandedGroupIds, onExpandedGroupIdsChange, ...props }: TreeDataGridProps<R, SR, K>): JSX.Element;
+
+export declare interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit_2<DataGridProps<R, SR, K>, 'columns' | 'role' | 'aria-rowcount' | 'rowHeight' | 'onFill' | 'isRowSelectionDisabled'> {
+    columns: readonly Column<NoInfer<R>, NoInfer<SR>>[];
+    rowHeight?: Maybe<number | ((args: RowHeightArgs<NoInfer<R>>) => number)>;
+    groupBy: readonly string[];
+    rowGrouper: (rows: readonly NoInfer<R>[], columnKey: string) => Record<string, readonly NoInfer<R>[]>;
+    expandedGroupIds: ReadonlySet<unknown>;
+    onExpandedGroupIdsChange: (expandedGroupIds: Set<unknown>) => void;
+}
+
+export declare function useHeaderRowSelection(): {
+    isIndeterminate: boolean;
+    isRowSelected: boolean;
+    onRowSelectionChange: (selectRowEvent: SelectHeaderRowEvent) => void;
+};
+
+export declare function useRowSelection(): {
+    isRowSelectionDisabled: boolean;
+    isRowSelected: boolean;
+    onRowSelectionChange: (selectRowEvent: SelectRowEvent<any>) => void;
+};
+
+export { }
@@ -0,0 +1,451 @@
+@layer rdg {
+  @layer Defaults,
+    FocusSink,
+    CheckboxInput,
+    CheckboxIcon,
+    CheckboxLabel,
+    Cell,
+    HeaderCell,
+    SummaryCell,
+    EditCell,
+    Row,
+    HeaderRow,
+    SummaryRow,
+    GroupedRow,
+    Root;
+}
+
+.mlln6zg7-0-0-beta-50 {
+  @layer rdg.MeasuringCell {
+    contain: strict;
+    grid-row: 1;
+    visibility: hidden;
+  }
+}
+
+
+.cj343x07-0-0-beta-50 {
+  @layer rdg.Cell {
+    /* max-content does not work with size containment
+     * dynamically switching between different containment styles incurs a heavy relayout penalty
+     * Chromium bug: at odd zoom levels or subpixel positioning,
+     * layout/paint/style containment can make cell borders disappear
+     *   https://issues.chromium.org/issues/40840864
+     */
+    position: relative; /* needed for absolute positioning to work */
+    padding-block: 0;
+    padding-inline: 8px;
+    border-inline-end: 1px solid var(--rdg-border-color);
+    border-block-end: 1px solid var(--rdg-border-color);
+    grid-row-start: var(--rdg-grid-row-start);
+    align-content: center;
+    background-color: inherit;
+
+    white-space: nowrap;
+    overflow: clip;
+    text-overflow: ellipsis;
+    outline: none;
+
+    &[aria-selected='true'] {
+      outline: 2px solid var(--rdg-selection-color);
+      outline-offset: -2px;
+    }
+  }
+}
+
+.csofj7r7-0-0-beta-50 {
+  @layer rdg.Cell {
+    position: sticky;
+    /* Should have a higher value than 0 to show up above unfrozen cells */
+    z-index: 1;
+
+    /* Add box-shadow on the last frozen cell */
+    &:nth-last-child(1 of &) {
+      box-shadow: var(--rdg-cell-frozen-box-shadow);
+    }
+  }
+}
+
+
+.c1bn88vv7-0-0-beta-50 {
+  @layer rdg.CheckboxInput {
+    display: block;
+    margin: auto;
+    inline-size: 20px;
+    block-size: 20px;
+
+    &:focus-visible {
+      outline: 2px solid var(--rdg-checkbox-focus-color);
+      outline-offset: -3px;
+    }
+
+    &:enabled {
+      cursor: pointer;
+    }
+  }
+}
+
+
+.g1s9ylgp7-0-0-beta-50 {
+  @layer rdg.GroupCellContent {
+    outline: none;
+  }
+}
+
+.cz54e4y7-0-0-beta-50 {
+  @layer rdg.GroupCellCaret {
+    margin-inline-start: 4px;
+    stroke: currentColor;
+    stroke-width: 1.5px;
+    fill: transparent;
+    vertical-align: middle;
+
+    > path {
+      transition: d 0.1s;
+    }
+  }
+}
+
+
+.h44jtk67-0-0-beta-50 {
+  @layer rdg.SortableHeaderCell {
+    display: flex;
+  }
+}
+
+.hcgkhxz7-0-0-beta-50 {
+  @layer rdg.SortableHeaderCellName {
+    flex-grow: 1;
+    overflow: clip;
+    text-overflow: ellipsis;
+  }
+}
+
+
+.c6ra8a37-0-0-beta-50 {
+  @layer rdg.Cell {
+    background-color: #ccccff;
+  }
+}
+
+.cq910m07-0-0-beta-50 {
+  @layer rdg.Cell {
+    background-color: #ccccff;
+
+    &.c6ra8a37-0-0-beta-50 {
+      background-color: #9999ff;
+    }
+  }
+}
+
+
+.c1w9bbhr7-0-0-beta-50 {
+  @layer rdg.DragHandle {
+    --rdg-drag-handle-size: 8px;
+    z-index: 0;
+    cursor: move;
+    inline-size: var(--rdg-drag-handle-size);
+    block-size: var(--rdg-drag-handle-size);
+    background-color: var(--rdg-selection-color);
+    place-self: end;
+
+    &:hover {
+      --rdg-drag-handle-size: 16px;
+      border: 2px solid var(--rdg-selection-color);
+      background-color: var(--rdg-background-color);
+    }
+  }
+}
+
+.c1creorc7-0-0-beta-50 {
+  @layer rdg.DragHandle {
+    z-index: 1;
+    position: sticky;
+  }
+}
+
+
+.cis5rrm7-0-0-beta-50 {
+  @layer rdg.EditCell {
+    padding: 0;
+  }
+}
+
+
+.c6l2wv17-0-0-beta-50 {
+  @layer rdg.HeaderCell {
+    cursor: pointer;
+  }
+}
+
+.c1kqdw7y7-0-0-beta-50 {
+  @layer rdg.HeaderCell {
+    touch-action: none;
+  }
+}
+
+.r1y6ywlx7-0-0-beta-50 {
+  @layer rdg.HeaderCell {
+    cursor: col-resize;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inline-size: 10px;
+  }
+}
+
+.c1bezg5o7-0-0-beta-50 {
+  opacity: 0.5;
+}
+
+.c1vc96037-0-0-beta-50 {
+  background-color: var(--rdg-header-draggable-background-color);
+}
+
+
+.r1upfr807-0-0-beta-50 {
+  @layer rdg.Row {
+    display: contents;
+    background-color: var(--rdg-background-color);
+
+    &:hover {
+      background-color: var(--rdg-row-hover-background-color);
+    }
+
+    &[aria-selected='true'] {
+      background-color: var(--rdg-row-selected-background-color);
+
+      &:hover {
+        background-color: var(--rdg-row-selected-hover-background-color);
+      }
+    }
+  }
+}
+
+.r190mhd37-0-0-beta-50 {
+  @layer rdg.FocusSink {
+    outline: 2px solid var(--rdg-selection-color);
+    outline-offset: -2px;
+  }
+}
+
+.r139qu9m7-0-0-beta-50 {
+  @layer rdg.FocusSink {
+    &::before {
+      content: '';
+      display: inline-block;
+      block-size: 100%;
+      position: sticky;
+      inset-inline-start: 0;
+      border-inline-start: 2px solid var(--rdg-selection-color);
+    }
+  }
+}
+
+
+.h10tskcx7-0-0-beta-50 {
+  @layer rdg.HeaderRow {
+    display: contents;
+    background-color: var(--rdg-header-background-color);
+    font-weight: bold;
+
+    & > .cj343x07-0-0-beta-50 {
+      /* Should have a higher value than 1 to show up above regular cells and the focus sink */
+      z-index: 2;
+      position: sticky;
+    }
+
+    & > .csofj7r7-0-0-beta-50 {
+      z-index: 3;
+    }
+  }
+}
+
+
+.a3ejtar7-0-0-beta-50 {
+  @layer rdg.SortIcon {
+    fill: currentColor;
+
+    > path {
+      transition: d 0.1s;
+    }
+  }
+}
+
+
+.rnvodz57-0-0-beta-50 {
+  @layer rdg.Defaults {
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  }
+
+  @layer rdg.Root {
+    --rdg-color: #000;   --rdg-border-color: #ddd;   --rdg-summary-border-color: #aaa;   --rdg-background-color: hsl(0deg 0% 100%);   --rdg-header-background-color: hsl(0deg 0% 97.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 96%);   --rdg-row-selected-background-color: hsl(207deg 76% 92%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
+    --rdg-selection-color: #66afe9;
+    --rdg-font-size: 14px;
+    --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
+
+    &:dir(rtl) {
+      --rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
+    }
+
+    display: grid;
+
+    color-scheme: var(--rdg-color-scheme, light dark);
+    accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%));
+
+    /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
+    /* We set a stacking context so internal elements don't render on top of external elements. */
+    /* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */
+    contain: content;
+    content-visibility: auto;
+    block-size: 350px;
+    border: 1px solid var(--rdg-border-color);
+    box-sizing: border-box;
+    overflow: auto;
+    background-color: var(--rdg-background-color);
+    color: var(--rdg-color);
+    font-size: var(--rdg-font-size);
+
+    /* needed on Firefox to fix scrollbars */
+    &::before {
+      content: '';
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+    }
+
+    &.rdg-dark {
+      --rdg-color-scheme: dark;
+      --rdg-color: #ddd;   --rdg-border-color: #444;   --rdg-summary-border-color: #555;   --rdg-background-color: hsl(0deg 0% 13%);   --rdg-header-background-color: hsl(0deg 0% 10.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 9%);   --rdg-row-selected-background-color: hsl(207deg 76% 42%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);
+    }
+
+    &.rdg-light {
+      --rdg-color-scheme: light;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      &:not(.rdg-light) {
+        --rdg-color: #ddd;   --rdg-border-color: #444;   --rdg-summary-border-color: #555;   --rdg-background-color: hsl(0deg 0% 13%);   --rdg-header-background-color: hsl(0deg 0% 10.5%);   --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);   --rdg-row-hover-background-color: hsl(0deg 0% 9%);   --rdg-row-selected-background-color: hsl(207deg 76% 42%);   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);
+      }
+    }
+
+    > :nth-last-child(1 of .rdg-top-summary-row) {
+      > .cj343x07-0-0-beta-50 {
+        border-block-end: 2px solid var(--rdg-summary-border-color);
+      }
+    }
+
+    > :nth-child(1 of .rdg-bottom-summary-row) {
+      > .cj343x07-0-0-beta-50 {
+        border-block-start: 2px solid var(--rdg-summary-border-color);
+      }
+    }
+  }
+}
+
+.vlqv91k7-0-0-beta-50 {
+  @layer rdg.Root {
+    user-select: none;
+
+    & .r1upfr807-0-0-beta-50 {
+      cursor: move;
+    }
+  }
+}
+
+.f1lsfrzw7-0-0-beta-50 {
+  @layer rdg.FocusSink {
+    grid-column: 1/-1;
+    pointer-events: none;
+    /* Should have a higher value than 1 to show up above regular frozen cells */
+    z-index: 1;
+  }
+}
+
+.f1cte0lg7-0-0-beta-50 {
+  @layer rdg.FocusSink {
+    /* Should have a higher value than 3 to show up above header and summary rows */
+    z-index: 3;
+  }
+}
+
+
+.s8wc6fl7-0-0-beta-50 {
+  @layer rdg.SummaryCell {
+    inset-block-start: var(--rdg-summary-row-top);
+    inset-block-end: var(--rdg-summary-row-bottom);
+  }
+}
+
+
+.skuhp557-0-0-beta-50 {
+  @layer rdg.SummaryRow {
+    > .cj343x07-0-0-beta-50 {
+      position: sticky;
+    }
+  }
+}
+
+.tf8l5ub7-0-0-beta-50 {
+  @layer rdg.SummaryRow {
+    > .cj343x07-0-0-beta-50 {
+      z-index: 2;
+    }
+
+    > .csofj7r7-0-0-beta-50 {
+      z-index: 3;
+    }
+  }
+}
+
+
+.g1yxluv37-0-0-beta-50 {
+  @layer rdg.GroupedRow {
+    &:not([aria-selected='true']) {
+      background-color: var(--rdg-header-background-color);
+    }
+
+    > .cj343x07-0-0-beta-50:not(:last-child, .csofj7r7-0-0-beta-50),
+    > :nth-last-child(n + 2 of .csofj7r7-0-0-beta-50) {
+      border-inline-end: none;
+    }
+  }
+}
+
+
+.t7vyx3i7-0-0-beta-50 {
+  @layer rdg.TextEditor {
+    appearance: none;
+
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    padding-block: 0;
+    padding-inline: 6px;
+    border: 2px solid #ccc;
+    vertical-align: top;
+    color: var(--rdg-color);
+    background-color: var(--rdg-background-color);
+
+    font-family: inherit;
+    font-size: var(--rdg-font-size);
+
+    &:focus {
+      border-color: var(--rdg-selection-color);
+      outline: none;
+    }
+
+    &::placeholder {
+      color: #999;
+      opacity: 1;
+    }
+  }
+}
+
+
+
+/*# sourceMappingURL=styles.css.map*/
@@ -0,0 +1,29 @@
+{
+  "name": "react-data-grid",
+  "version": "7.0.0-beta.50",
+  "type": "module",
+  "exports": {
+    "./lib/styles.css": "./lib/styles.css",
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/bundle.js"
+    }
+  },
+  "browser": "./lib/bundle.js",
+  "main": "./lib/bundle.js",
+  "module": "./lib/bundle.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "clsx": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0",
+    "react-dom": "^19.0"
+  }
+}
@@ -0,0 +1,41 @@
+{
+  "name": "@dbeaver/react-data-grid",
+  "type": "module",
+  "sideEffects": [],
+  "exports": {
+    ".": "./lib/index.js",
+    "./*.css": "./src/*.css",
+    "./*": "./lib/*.js"
+  },
+  "scripts": {
+    "clear": "rimraf lib"
+  },
+  "files": [
+    "package.json",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "lib",
+    "!lib/**/*.d.ts.map",
+    "!lib/**/*.test.js",
+    "!lib/**/*.test.d.ts",
+    "!lib/**/*.test.d.ts.map",
+    "!lib/**/*.test.js.map",
+    "!lib/tests",
+    "!.tsbuildinfo"
+  ],
+  "packageManager": "yarn@4.6.0",
+  "devDependencies": {
+    "@dbeaver/tsconfig": "workspace:^",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "rimraf": "^6",
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@dbeaver/ui-kit": "workspace:^",
+    "react": "^19",
+    "react-data-grid": "file:./artifacts",
+    "react-dom": "^19"
+  }
+}
@@ -0,0 +1,81 @@
+import { memo, use, useMemo } from 'react';
+import { Cell, type CellRendererProps } from 'react-data-grid';
+import { DataGridCellContext, type IDataGridCellRenderer } from './DataGridCellContext.js';
+import { createCellMouseEvent } from './eventUtils.js';
+import { DataGridCellInnerContext, type IDataGridCellInnerContext } from './DataGridCellInnerContext.js';
+import { useGridReactiveValue } from './useGridReactiveValue.js';
+
+export const BaseCell = memo(function BaseCell<TRow, TSummaryRow>(props: CellRendererProps<TRow, TSummaryRow>) {
+  const cellContext = use(DataGridCellContext);
+  const tooltip = useGridReactiveValue(cellContext?.cellTooltip, props.rowIdx, props.column.idx);
+
+  function handleClick(event: React.MouseEvent<HTMLDivElement>) {
+    props.onClick?.(
+      {
+        rowIdx: props.rowIdx,
+        row: props.row,
+        column: props.column,
+        selectCell(enableEditor) {
+          props.selectCell({ rowIdx: props.rowIdx, idx: props.column.idx }, enableEditor);
+        },
+      },
+      createCellMouseEvent(event),
+    );
+  }
+
+  function handleDoubleClick(event: React.MouseEvent<HTMLDivElement>) {
+    props.onDoubleClick?.(
+      {
+        rowIdx: props.rowIdx,
+        row: props.row,
+        column: props.column,
+        selectCell(enableEditor) {
+          props.selectCell({ rowIdx: props.rowIdx, idx: props.column.idx }, enableEditor);
+        },
+      },
+      createCellMouseEvent(event),
+    );
+  }
+
+  function handleContextMenu(event: React.MouseEvent<HTMLDivElement>) {
+    props.onContextMenu?.(
+      {
+        rowIdx: props.rowIdx,
+        row: props.row,
+        column: props.column,
+        selectCell(enableEditor) {
+          props.selectCell({ rowIdx: props.rowIdx, idx: props.column.idx }, enableEditor);
+        },
+      },
+      createCellMouseEvent(event),
+    );
+  }
+
+  const mappedProps = useMemo(
+    () => ({ ...props, isFocused: props.isCellSelected, onClick: handleClick, onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu }),
+    Object.values(props),
+  );
+
+  const renderDefaultCell = useMemo<IDataGridCellRenderer>(
+    () =>
+      ({ onClick, onDoubleClick, onContextMenu, ...rest }) => {
+        return (
+          <Cell
+            {...props}
+            title={tooltip}
+            onClick={(_, event) => onClick?.(event)}
+            onDoubleClick={(_, event) => onDoubleClick?.(event)}
+            onContextMenu={(_, event) => onContextMenu?.(event)}
+            {...rest}
+            isCellSelected={props.isCellSelected || rest.isFocused || false}
+          />
+        );
+      },
+    [...Object.values(props), tooltip],
+  );
+
+  const cellElement = useGridReactiveValue(cellContext?.cellElement, props.rowIdx, props.column.idx, mappedProps, renderDefaultCell);
+
+  const innerCellContext = useMemo<IDataGridCellInnerContext>(() => ({ isFocused: props.isCellSelected }), [props.isCellSelected]);
+  return <DataGridCellInnerContext value={innerCellContext}>{cellElement ?? <Cell title={tooltip} {...props} />}</DataGridCellInnerContext>;
+}) as <TRow, TSummaryRow>(props: CellRendererProps<TRow, TSummaryRow>) => React.ReactNode;
@@ -0,0 +1,16 @@
+import { Row, type RenderRowProps } from 'react-data-grid';
+import { DataGridRowContext } from './DataGridRowContext.js';
+import { memo, use, useEffect } from 'react';
+import { useGridReactiveValue } from './useGridReactiveValue.js';
+
+export const BaseRow = memo(function BaseRow<TRow, TSummaryRow>(props: RenderRowProps<TRow, TSummaryRow>) {
+  const rowContext = use(DataGridRowContext);
+  const rowsCount = useGridReactiveValue(rowContext?.onScrollToBottom ? rowContext?.rowCount : undefined);
+
+  useEffect(() => {
+    if (rowsCount === props.rowIdx + 1) {
+      rowContext?.onScrollToBottom?.();
+    }
+  }, [rowsCount]);
+  return <Row {...props} />;
+}) as <TRow, TSummaryRow>(props: RenderRowProps<TRow, TSummaryRow>) => React.ReactNode;
@@ -0,0 +1,29 @@
+@import url('@dbeaver/ui-kit/index.css');
+@import url('react-data-grid/lib/styles.css') layer(components);
+
+@layer components.rdg.MeasuringCell {
+  [data-measuring-cell] {
+    max-width: var(--rdg-max-auto-size, 350px);
+  }
+}
+
+@layer components.rdg.Cell {
+  @media (prefers-color-scheme: dark) {
+    .rdg-cell-frozen {
+      &:nth-last-child(1 of &) {
+        box-shadow: none;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: -1;
+          background-color: rgba(255, 255, 255, 0.02);
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,157 @@
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { DataGrid as DataGridBase, type ColumnOrColumnGroup, type CellSelectArgs, type DataGridHandle } from 'react-data-grid';
+import { rowRenderer } from './renderers/rowRenderer.js';
+import { cellRenderer } from './renderers/cellRenderer.js';
+import { DataGridCellHeaderContext, type IDataGridHeaderCellContext } from './DataGridHeaderCellContext.js';
+import { DataGridCellContext, type IDataGridCellContext } from './DataGridCellContext.js';
+import type { IInnerRow } from './IInnerRow.js';
+import type { IGridReactiveValue } from './IGridReactiveValue.js';
+import { useGridReactiveValue } from './useGridReactiveValue.js';
+import { mapCellContentRenderer } from './mapCellContentRenderer.js';
+import { mapRenderHeaderCell } from './mapRenderHeaderCell.js';
+import { mapEditCellRenderer } from './mapEditCellRenderer.js';
+import { DataGridRowContext, type IDataGridRowContext } from './DataGridRowContext.js';
+import './DataGrid.css';
+
+export interface ICellPosition {
+  rowIdx: number;
+  colIdx: number;
+}
+
+export interface DataGridCellKeyboardEvent extends React.KeyboardEvent<HTMLDivElement> {
+  preventGridDefault: () => void;
+  isGridDefaultPrevented: () => boolean;
+}
+
+export interface DataGridProps extends IDataGridCellContext, IDataGridRowContext, IDataGridHeaderCellContext, React.PropsWithChildren {
+  getRowHeight?: (rowIdx: number) => number;
+  getRowId?: (rowIdx: number) => React.Key;
+  columnCount: IGridReactiveValue<number, []>;
+  getColumnKey?: (colIdx: number) => string;
+  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+  onFocus?: (position: ICellPosition) => void;
+  onEditorOpen?: (position: ICellPosition) => void;
+  onCellKeyDown?: (position: ICellPosition, event: DataGridCellKeyboardEvent) => void;
+  className?: string;
+}
+
+export interface DataGridRef {
+  selectCell: (position: ICellPosition) => void;
+  scrollToCell: (position: Partial<ICellPosition>) => void;
+  openEditor: (position: ICellPosition) => void;
+}
+
+export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid(
+  {
+    headerElement,
+    getHeaderWidth,
+    headerText,
+    getHeaderResizable,
+    getHeaderHeight,
+    getHeaderPinned,
+    cell,
+    cellText,
+    cellElement,
+    cellTooltip,
+    getCellEditable,
+    columnCount,
+    getColumnKey,
+    rowCount,
+    getRowId,
+    getRowHeight,
+    onScroll,
+    onScrollToBottom,
+    onFocus,
+    onCellChange,
+    children,
+    className,
+    onCellKeyDown,
+  },
+  ref,
+) {
+  const rowsCount = useGridReactiveValue(rowCount);
+  const columnsCount = useGridReactiveValue(columnCount);
+
+  const gridKey = useRef(0);
+  const rowsCountRef = useRef(rowsCount);
+  const innerGridRef = useRef<DataGridHandle>(null);
+  const columns = new Array<ColumnOrColumnGroup<IInnerRow, unknown>>(columnsCount)
+    .fill(null as any)
+    .map((_, i): ColumnOrColumnGroup<IInnerRow, unknown> => {
+      const width = getHeaderWidth?.(i) ?? 'max-content';
+      return {
+        key: getColumnKey?.(i) ?? String(i),
+        name: '',
+        resizable: getHeaderResizable?.(i) ?? true,
+        width,
+        minWidth: 26,
+        editable: row => getCellEditable?.(row.idx, i) ?? false,
+        frozen: getHeaderPinned?.(i),
+        renderHeaderCell: mapRenderHeaderCell,
+        renderCell: mapCellContentRenderer,
+        renderEditCell: mapEditCellRenderer,
+      };
+    });
+
+  useImperativeHandle(ref, () => ({
+    selectCell: (position: ICellPosition) => {
+      innerGridRef.current?.selectCell({ idx: position.colIdx, rowIdx: position.rowIdx });
+    },
+    scrollToCell: (position: Partial<ICellPosition>) => {
+      innerGridRef.current?.scrollToCell({ idx: position.colIdx, rowIdx: position.rowIdx });
+    },
+    openEditor: (position: ICellPosition) => {
+      innerGridRef.current?.selectCell({ idx: position.colIdx, rowIdx: position.rowIdx }, true);
+    },
+  }));
+
+  if (rowsCountRef.current !== rowsCount) {
+    const previousRowCount = rowsCountRef.current;
+    rowsCountRef.current = rowsCount;
+
+    if (previousRowCount === 0) {
+      // we trigger columns size recalculation when rows are added
+      gridKey.current++;
+    }
+  }
+
+  const rows = useMemo(
+    () =>
+      new Array<IInnerRow>(rowsCount).fill({ idx: 0 }).map((_, i) => ({
+        idx: i,
+      })),
+    [rowsCount],
+  );
+
+  function handleCellFocus(args: CellSelectArgs<IInnerRow, unknown>) {
+    onFocus?.({ colIdx: args.column.idx, rowIdx: args.rowIdx });
+  }
+
+  return (
+    <DataGridRowContext value={{ rowCount, onScrollToBottom }}>
+      <DataGridCellContext value={{ cell, cellText, cellElement, cellTooltip, onCellChange }}>
+        <DataGridCellHeaderContext value={{ headerElement, headerText }}>
+          <DataGridBase
+            key={gridKey.current}
+            ref={innerGridRef}
+            columns={columns}
+            rows={rows}
+            className={className}
+            headerRowHeight={getHeaderHeight?.()}
+            onScroll={onScroll}
+            rowHeight={getRowHeight ? row => getRowHeight(row.idx) : undefined}
+            rowKeyGetter={getRowId ? row => getRowId(row.idx) : undefined}
+            onSelectedCellChange={handleCellFocus}
+            onCellKeyDown={onCellKeyDown ? (args, event) => onCellKeyDown({ rowIdx: args.rowIdx, colIdx: args.column.idx }, event) : undefined}
+            renderers={{
+              renderRow: rowRenderer,
+              renderCell: cellRenderer,
+              noRowsFallback: children,
+            }}
+            minimumRowsToRender={100}
+          />
+        </DataGridCellHeaderContext>
+      </DataGridCellContext>
+    </DataGridRowContext>
+  );
+});
@@ -0,0 +1,24 @@
+import { createContext } from 'react';
+import type { IGridReactiveValue } from './IGridReactiveValue.js';
+
+export interface IDataGridCellProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  isFocused: boolean;
+}
+
+export interface IDataGridCellRenderer {
+  (propsOverride: Partial<IDataGridCellProps> & { [key: string]: any }): React.ReactNode;
+}
+
+export interface IDataGridCellContext {
+  cellElement?: IGridReactiveValue<
+    React.ReactNode,
+    [rowIdx: number, colIdx: number, props: IDataGridCellProps, renderDefaultCell: IDataGridCellRenderer]
+  >;
+  cell?: IGridReactiveValue<React.ReactNode, [rowIdx: number, colIdx: number]>;
+  cellText?: IGridReactiveValue<string, [rowIdx: number, colIdx: number]>;
+  cellTooltip?: IGridReactiveValue<string, [rowIdx: number, colIdx: number]>;
+  getCellEditable?: (rowIdx: number, colIdx: number) => boolean;
+  onCellChange?: (rowIdx: number, colIdx: number, value: any) => void;
+}
+
+export const DataGridCellContext = createContext<IDataGridCellContext | null>(null);
@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export interface IDataGridCellInnerContext {
+  isFocused: boolean;
+}
+
+export const DataGridCellInnerContext = createContext<IDataGridCellInnerContext | null>(null);
@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { IGridReactiveValue } from './IGridReactiveValue.js';
+
+export interface IDataGridHeaderCellContext {
+  headerElement?: IGridReactiveValue<React.ReactNode, [colIdx: number]>;
+  headerText?: IGridReactiveValue<string, [colIdx: number]>;
+  getHeaderWidth?: (colIdx: number) => number | string | null;
+  getHeaderResizable?: (colIdx: number) => boolean;
+  getHeaderHeight?: () => number;
+  getHeaderPinned?: (colIdx: number) => boolean;
+}
+
+export const DataGridCellHeaderContext = createContext<IDataGridHeaderCellContext | null>(null);
@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import type { IGridReactiveValue } from './IGridReactiveValue.js';
+
+export interface IDataGridRowContext {
+  rowCount: IGridReactiveValue<number, []>;
+  onScrollToBottom?: () => void;
+}
+
+export const DataGridRowContext = createContext<IDataGridRowContext | null>(null);
@@ -0,0 +1,6 @@
+export type IGridReactiveValueSubscribe<TArgs extends any[]> = (onValueChange: () => void, ...args: TArgs) => () => void;
+
+export interface IGridReactiveValue<T, TArgs extends any[]> {
+  get(...args: TArgs): T;
+  subscribe: IGridReactiveValueSubscribe<TArgs>;
+}
@@ -0,0 +1,3 @@
+export interface IInnerRow {
+  idx: number;
+}
@@ -0,0 +1,33 @@
+:global(.rdg-cell) .editor {
+  appearance: none;
+
+  box-sizing: border-box;
+  min-height: initial;
+  inline-size: 100%;
+  block-size: 100%;
+  padding-block: 0;
+  padding-inline: 6px;
+  border: 2px solid #ccc;
+  vertical-align: top;
+  color: var(--rdg-color);
+  background-color: var(--rdg-background-color);
+
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-transform: inherit;
+
+  &:focus {
+    border-color: var(--rdg-selection-color);
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #999;
+    opacity: 1;
+  }
+}
@@ -0,0 +1,39 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { use } from 'react';
+import classes from './TextEditor.module.css';
+import { DataGridCellContext } from '../DataGridCellContext.js';
+import { useGridReactiveValue } from '../useGridReactiveValue.js';
+
+function autoFocusAndSelect(input: HTMLInputElement | null) {
+  input?.focus();
+  input?.select();
+}
+
+export interface IProps {
+  rowIdx: number;
+  colIdx: number;
+  onClose: () => void;
+}
+
+export function TextEditor({ rowIdx, colIdx, onClose }: IProps) {
+  const cellContext = use(DataGridCellContext);
+
+  const value = useGridReactiveValue(cellContext?.cellText, rowIdx, colIdx) ?? '';
+
+  return (
+    <input
+      className={classes['editor']}
+      ref={autoFocusAndSelect}
+      value={value}
+      onChange={event => cellContext?.onCellChange?.(rowIdx, colIdx, event.target.value)}
+      onBlur={() => onClose()}
+    />
+  );
+}
@@ -0,0 +1,25 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import type { CellMouseEvent } from 'react-data-grid';
+
+export function createCellMouseEvent<E extends React.MouseEvent<HTMLDivElement>>(event: E): CellMouseEvent {
+  let defaultPrevented = false;
+  const cellEvent = {
+    ...event,
+    preventGridDefault() {
+      defaultPrevented = true;
+    },
+    isGridDefaultPrevented() {
+      return defaultPrevented;
+    },
+  };
+
+  Object.setPrototypeOf(cellEvent, Object.getPrototypeOf(event));
+
+  return cellEvent;
+}
@@ -0,0 +1,14 @@
+import { clsx } from '@dbeaver/ui-kit';
+
+interface Props {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function BlobFormatter({ className, onClick }: Props) {
+  return (
+    <span className={clsx('tw:uppercase', className)} onClick={onClick}>
+      [blob]
+    </span>
+  );
+}
@@ -0,0 +1,27 @@
+import { NullFormatter } from './NullFormatter.js';
+import { Checkbox, clsx, Focusable } from '@dbeaver/ui-kit';
+
+interface Props {
+  value: boolean | null;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+}
+
+export function BooleanFormatter({ value, className, onClick, onKeyDown }: Props) {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      event.preventDefault();
+      onKeyDown?.(event);
+    }
+  };
+  return (
+    <Focusable
+      className={clsx('tw:flex tw:items-center tw:outline-none tw:hover:cursor-pointer', className)}
+      onKeyDown={handleKeyDown}
+      onClick={onClick}
+    >
+      {value === null ? <NullFormatter /> : <Checkbox className="tw:data-disabled:opacity-100" disabled size="small" checked={value} />}
+    </Focusable>
+  );
+}
@@ -0,0 +1,21 @@
+import { NullFormatter } from './NullFormatter.js';
+
+interface Props {
+  value: Date | null;
+  type?: 'time' | 'date' | 'datetime';
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function DateFormatter({ value, type = 'datetime', onClick }: Props) {
+  if (value === null) {
+    return <NullFormatter />;
+  }
+  return (
+    <div onClick={onClick}>
+      {value.toLocaleString(undefined, {
+        dateStyle: type === 'date' ? 'long' : undefined,
+        timeStyle: type === 'time' ? 'long' : undefined,
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,14 @@
+import { clsx } from '@dbeaver/ui-kit';
+
+interface Props {
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function NullFormatter({ className, onClick }: Props) {
+  return (
+    <span className={clsx('tw:uppercase', 'tw:opacity-65', className)} onClick={onClick}>
+      [NULL]
+    </span>
+  );
+}
@@ -0,0 +1,18 @@
+import { NullFormatter } from './NullFormatter.js';
+
+interface Props {
+  value: number | null;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function NumberFormatter({ value, className, onClick }: Props) {
+  if (value === null) {
+    return <NullFormatter className={className} onClick={onClick} />;
+  }
+  return (
+    <div style={{ textAlign: 'right' }} className={className} onClick={onClick}>
+      {value.toLocaleString()}
+    </div>
+  );
+}
@@ -0,0 +1,12 @@
+export * from './DataGrid.js';
+export * from './DataGridCellContext.js';
+export * from './DataGridCellInnerContext.js';
+export * from './IGridReactiveValue.js';
+export * from './useCreateGridReactiveValue.js';
+export * from './useGridReactiveValue.js';
+
+export * from './formatters/NullFormatter.js';
+export * from './formatters/BooleanFormatter.js';
+export * from './formatters/NumberFormatter.js';
+export * from './formatters/DateFormatter.js';
+export * from './formatters/BlobFormatter.js';
@@ -0,0 +1,7 @@
+import type { RenderCellProps } from 'react-data-grid';
+import type { IInnerRow } from './IInnerRow.js';
+import { CellContentRenderer } from './renderers/CellContentRenderer.js';
+
+export function mapCellContentRenderer({ rowIdx, column }: RenderCellProps<IInnerRow, unknown>) {
+  return <CellContentRenderer rowIdx={rowIdx} colIdx={column.idx} />;
+}
@@ -0,0 +1,7 @@
+import type { RenderEditCellProps } from 'react-data-grid';
+import type { IInnerRow } from './IInnerRow.js';
+import { TextEditor } from './editors/TextEditor.js';
+
+export function mapEditCellRenderer({ rowIdx, column, onClose }: RenderEditCellProps<IInnerRow, unknown>) {
+  return <TextEditor rowIdx={rowIdx} colIdx={column.idx} onClose={() => onClose()} />;
+}
@@ -0,0 +1,7 @@
+import type { RenderHeaderCellProps } from 'react-data-grid';
+import type { IInnerRow } from './IInnerRow.js';
+import { HeaderCellContentRenderer } from './renderers/HeaderCellContentRenderer.js';
+
+export function mapRenderHeaderCell({ column }: RenderHeaderCellProps<IInnerRow, unknown>) {
+  return <HeaderCellContentRenderer colIdx={column.idx} />;
+}
@@ -0,0 +1,13 @@
+import { use } from 'react';
+import { DataGridCellContext } from '../DataGridCellContext.js';
+import { useGridReactiveValue } from '../useGridReactiveValue.js';
+
+export interface Props {
+  rowIdx: number;
+  colIdx: number;
+}
+
+export function CellContentRenderer({ rowIdx, colIdx }: Props) {
+  const cellContext = use(DataGridCellContext);
+  return useGridReactiveValue(cellContext?.cell, rowIdx, colIdx);
+}
@@ -0,0 +1,13 @@
+import { use } from 'react';
+import { DataGridCellHeaderContext } from '../DataGridHeaderCellContext.js';
+import { useGridReactiveValue } from '../useGridReactiveValue.js';
+
+interface Props {
+  colIdx: number;
+}
+export function HeaderCellContentRenderer({ colIdx }: Props) {
+  const cellHeaderContext = use(DataGridCellHeaderContext);
+  const headerElement = useGridReactiveValue(cellHeaderContext?.headerElement, colIdx);
+  const getHeaderText = useGridReactiveValue(headerElement ? undefined : cellHeaderContext?.headerText, colIdx);
+  return headerElement ?? getHeaderText ?? '';
+}
@@ -0,0 +1,6 @@
+import type { CellRendererProps } from 'react-data-grid';
+import { BaseCell } from '../BaseCell.js';
+
+export function cellRenderer<TRow, TSummaryRow>(key: React.Key, props: CellRendererProps<TRow, TSummaryRow>) {
+  return <BaseCell key={key} {...props} />;
+}
@@ -0,0 +1,6 @@
+import type { RenderRowProps } from 'react-data-grid';
+import { BaseRow } from '../BaseRow.js';
+
+export function rowRenderer<TRow, TSummaryRow>(key: React.Key, props: RenderRowProps<TRow, TSummaryRow>) {
+  return <BaseRow key={key} {...props} />;
+}
@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import type { IGridReactiveValue, IGridReactiveValueSubscribe } from './IGridReactiveValue.js';
+
+type NoInfer<T> = intrinsic;
+export function useCreateGridReactiveValue<T, TArgs extends any[]>(
+  get: (...args: TArgs) => T,
+  subscribe: NoInfer<IGridReactiveValueSubscribe<TArgs>> | null,
+  deps: React.DependencyList,
+): IGridReactiveValue<T, TArgs> {
+  const value = useMemo<IGridReactiveValue<T, TArgs>>(
+    () => ({
+      get,
+      subscribe: subscribe ?? (() => () => {}),
+    }),
+    deps,
+  );
+
+  return value;
+}
@@ -0,0 +1,36 @@
+import { useMemo, useSyncExternalStore } from 'react';
+import type { IGridReactiveValue } from './IGridReactiveValue.js';
+
+export function useGridReactiveValue<P extends IGridReactiveValue<any, any[]> | undefined>(
+  value: P,
+  ...args: P extends IGridReactiveValue<any, infer T> ? T : never[]
+): P extends IGridReactiveValue<infer T, any[]> ? T : undefined {
+  const mappedValue = useMemo(
+    () => ({
+      cache: null as any,
+      cacheInvalidated: true,
+      subscribe: (onValueChange: () => void) => {
+        if (value) {
+          return value.subscribe(
+            () => {
+              mappedValue.cacheInvalidated = true;
+              return onValueChange();
+            },
+            ...args,
+          );
+        }
+
+        return () => {};
+      },
+      get: () => {
+        if (mappedValue.cacheInvalidated) {
+          mappedValue.cache = value?.get(...args);
+          mappedValue.cacheInvalidated = false;
+        }
+        return mappedValue.cache;
+      },
+    }),
+    [value, ...args],
+  );
+  return useSyncExternalStore(mappedValue.subscribe, mappedValue.get);
+}
@@ -0,0 +1,21 @@
+{
+  "extends": "@dbeaver/tsconfig/tsconfig.webview.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "rootDirs": [
+      "src"
+    ],
+    "outDir": "lib",
+    "incremental": true,
+    "composite": true
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../ui-kit"
+    }
+  ]
+}
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/lib
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+tsconfig.tsbuildinfo
@@ -0,0 +1,2 @@
+import '../src/index.css';
+import './global.css';
@@ -0,0 +1,8 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  addons: {
+    a11y: {
+      enabled: true,
+    },
+  },
+};
@@ -0,0 +1,131 @@
+@import 'tailwindcss' prefix(tw);
+
+@layer theme {
+  main {
+    color: var(--dbv-kit-color-foreground);
+    background-color: var(--tw-color-gray-50);
+  }
+
+  a {
+    color: var(--tw-color-blue-600);
+    text-decoration: underline;
+
+    &:hover {
+      color: var(--tw-color-blue-700);
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  code {
+    color: var(--tw-color-orange-700);
+  }
+
+  h1,
+  h2,
+  h3,
+  h3,
+  h5 {
+    font-weight: var(--tw-font-weight-semibold);
+    margin-block-start: 1em;
+    margin-block-end: 0.5em;
+  }
+
+  h1 {
+    font-size: var(--tw-text-2xl);
+  }
+
+  h2 {
+    font-size: var(--tw-text-xl);
+  }
+
+  h3 {
+    font-size: var(--tw-text-lg);
+  }
+
+  p {
+    font-size: var(--tw-text-base);
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+  }
+
+  kbd {
+    background-color: #eee;
+    border-radius: 3px;
+    border: 1px solid #b4b4b4;
+    box-shadow:
+      0 1px 1px rgba(0, 0, 0, 0.2),
+      0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+    color: #333;
+    display: inline-block;
+    font-size: 0.85em;
+    font-weight: 700;
+    line-height: 1;
+    padding: 2px 4px;
+    white-space: nowrap;
+  }
+
+  .codeblock {
+    background-color: var(--tw-color-gray-100);
+    padding: 1em;
+    border-radius: 0.25em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+  }
+
+  .comment {
+    color: var(--tw-color-gray-500);
+  }
+
+  .color-sample {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border-radius: 0.25em;
+  }
+}
+
+:root[data-theme='dark'] {
+  --dbv-kit-color-foreground: var(--tw-color-gray-200);
+  --dbv-kit-btn-loader-base-color: var(--tw-color-gray-900);
+
+  /* Primary Button */
+  --dbv-kit-btn-primary-foreground: var(--tw-color-gray-100);
+  --dbv-kit-btn-primary-background: var(--dbv-kit-color-primary-700);
+  --dbv-kit-btn-primary-background-hover: var(--dbv-kit-color-primary-600);
+  --dbv-kit-btn-primary-background-active: var(--dbv-kit-color-primary-500);
+
+  /* Secondary Button */
+  --dbv-kit-btn-secondary-foreground: var(--tw-color-gray-100);
+  --dbv-kit-btn-secondary-background: transparent;
+  --dbv-kit-btn-secondary-background-hover: var(--tw-color-gray-800);
+  --dbv-kit-btn-secondary-background-active: var(--tw-color-gray-700);
+  --dbv-kit-btn-secondary-border-color: var(--tw-color-gray-200);
+
+  /* Danger Button */
+  --dbv-kit-btn-danger-foreground: var(--tw-color-gray-100);
+  --dbv-kit-btn-danger-background: var(--tw-color-red-700);
+  --dbv-kit-btn-danger-background-hover: var(--tw-color-red-600);
+  --dbv-kit-btn-danger-background-active: var(--tw-color-red-500);
+
+  /* Input */
+  --dbv-kit-input-background: var(--tw-color-gray-800);
+  --dbv-kit-input-border-color: var(--tw-color-gray-700);
+  --dbv-kit-input-color: var(--tw-color-gray-100);
+  --dbv-kit-input-placeholder-foreground: var(--tw-color-gray-400);
+
+  main {
+    background-color: var(--tw-color-gray-900);
+  }
+
+  code {
+    color: var(--tw-color-orange-400);
+  }
+
+  a {
+    color: var(--tw-color-blue-300);
+  }
+
+  .codeblock {
+    background-color: var(--tw-color-gray-800);
+  }
+}
@@ -0,0 +1,63 @@
+# DBeaver UI Kit
+
+#### The DBeaver UI Kit is a collection of reusable React components designed to help developers build consistent and visually appealing user interfaces.
+
+## Using Ladle for Component Development
+
+[Ladle](https://ladle.dev/) is a tool that allows you to develop, test, and document your React components in isolation. We use it to create a sandbox environment where you can interact with your components and ensure they work as expected.
+
+To get started with Ladle in the DBeaver UI Kit, write in terminal:
+
+```bash
+yarn docs
+```
+
+Then open the provided URL to see components.
+
+## How to Customize
+
+DBeaver UI Kit components have basic styles and use some defaults from Tailwind CSS. To change styling, you can use different approaches.
+
+### Global CSS Tokens
+
+The UI kit uses several global CSS tokens described on the Global Tokens page. These tokens help maintain consistency across the UI components. All DBeaver UI tokens are prefixed with `--dbv-kit-`. You can use these tokens to customize the UI kit to fit your application's design. For example, changing the `--dbv-kit-font-size-base` token will change the base font size for text in the UI kit. Changing the `--dbv-kit-control-height-base` token will change all control heights. If you don't want to change all controls, you can change `--dbv-kit-control-height-small`, `--dbv-kit-control-height-medium`, or other tokens separately. They will affect only specific components.
+
+### Component CSS Tokens
+
+Some components have their own tokens. For example, the Button component has tokens for button sizes, padding, and colors. You can change these tokens to customize the Button component. To see the list of tokens, go to sources or start Ladle.
+
+### Component CSS Classes
+
+Each component in the UI kit has a default CSS class name following the `dbv-kit-[component name(in lowercase)]` naming convention that you can use to customize the component. You can find the default class name in the component's documentation.
+
+For button:
+
+```css
+.dbv-kit-button {
+  /* Your custom styles */
+}
+```
+
+For input:
+
+```css
+.dbv-kit-input {
+  /* Your custom styles */
+}
+```
+
+Some components have additional classes for different states or sizes. For example, the Button component has classes for different sizes: `.dbv-kit-button--small`, `.dbv-kit-button--large`. We use the BEM convention for class names. If a component has a modifier, it will be separated by two dashes. If a component has a child element, it will be separated by two underscores, for example:
+
+- `.dbv-kit-button__icon` - icon is a child element of the button
+- `.dbv-kit-button--large` - large is a size modifier
+- `.dbv-kit-button__icon--start` - icon is a child element of the button and has a start placement
+
+Each component accepts the standard `className` and `style` props which enable using vanilla CSS, utility classes (e.g., Tailwind), CSS-in-JS (e.g., Styled Components), etc. A custom `className` can be specified and will be appended to a class list of a component:
+
+```jsx
+<Button className="my-custom-button">Button</Button>
+```
+
+```jsx
+<Button style={{ background: 'red' }}>Button</Button>
+```
@@ -0,0 +1,37 @@
+{
+  "name": "@dbeaver/ui-kit",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": "./lib/index.js",
+    "./*.css": "./src/*.css",
+    "./*": "./lib/*.js"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "docs": "ladle serve",
+    "clean": "rimraf --glob lib"
+  },
+  "packageManager": "yarn@4.6.0",
+  "devDependencies": {
+    "@dbeaver/tsconfig": "workspace:^",
+    "@ladle/react": "^5",
+    "@tailwindcss/vite": "^4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@wroud/vite-plugin-asset-resolver": "^0",
+    "@wroud/vite-plugin-tsc": "^0.11.6",
+    "rimraf": "^6",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "vite": "^6"
+  },
+  "dependencies": {
+    "@ariakit/react": "^0",
+    "clsx": "^2",
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}
@@ -0,0 +1,166 @@
+@import './_base.css';
+@import './_sizes.css';
+@import './_variants.css';
+
+@layer base {
+  .dbv-kit-button {
+    display: inline-flex;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+
+    height: var(--dbv-kit-btn-height);
+    padding-inline: var(--dbv-kit-btn-padding-inline);
+    gap: var(--dbv-kit-btn-gap);
+
+    background-color: var(--dbv-kit-btn-background);
+    color: var(--dbv-kit-btn-foreground);
+
+    border-radius: var(--dbv-kit-btn-border-radius);
+    border-width: var(--dbv-kit-btn-border-width);
+    border-color: var(--dbv-kit-btn-border-color);
+    border-style: var(--dbv-kit-btn-border-style);
+
+    font-size: var(--dbv-kit-btn-font-size);
+    font-weight: var(--dbv-kit-btn-font-weight);
+
+    &:focus-visible,
+    &[data-focus-visible] {
+      outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-btn-outline-color);
+      outline-offset: var(--dbv-kit-btn-outline-offset);
+    }
+
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--dbv-kit-btn-background-hover);
+      }
+    }
+
+    &:active,
+    &[data-active] {
+      background-color: var(--dbv-kit-btn-background-active);
+    }
+
+    &:disabled {
+      opacity: var(--dbv-kit-control-disabled-opacity);
+    }
+  }
+
+  /* ---------------------------- */
+  /* Sizes */
+
+  .dbv-kit-button--small {
+    --dbv-kit-btn-padding-inline: var(--dbv-kit-btn-small-padding-inline);
+    --dbv-kit-btn-font-size: var(--dbv-kit-btn-small-font-size);
+    --dbv-kit-btn-height: var(--dbv-kit-btn-small-height);
+    --dbv-kit-btn-gap: var(--dbv-kit-btn-small-gap);
+
+    --dbv-kit-btn-icon-margin-inline: calc(var(--dbv-kit-btn-small-padding-inline) * -0.25);
+  }
+
+  .dbv-kit-button--medium {
+    --dbv-kit-btn-padding-inline: var(--dbv-kit-btn-medium-padding-inline);
+    --dbv-kit-btn-font-size: var(--dbv-kit-btn-medium-font-size);
+    --dbv-kit-btn-height: var(--dbv-kit-btn-medium-height);
+    --dbv-kit-btn-gap: var(--dbv-kit-btn-medium-gap);
+
+    --dbv-kit-btn-icon-margin-inline: calc(var(--dbv-kit-btn-medium-padding-inline) * -0.25);
+  }
+
+  .dbv-kit-button--large {
+    --dbv-kit-btn-padding-inline: var(--dbv-kit-btn-large-padding-inline);
+    --dbv-kit-btn-font-size: var(--dbv-kit-btn-large-font-size);
+    --dbv-kit-btn-height: var(--dbv-kit-btn-large-height);
+    --dbv-kit-btn-gap: var(--dbv-kit-btn-large-gap);
+
+    --dbv-kit-btn-icon-margin-inline: calc(var(--dbv-kit-btn-large-padding-inline) * -0.25);
+  }
+
+  .dbv-kit-button--xlarge {
+    --dbv-kit-btn-padding-inline: var(--dbv-kit-btn-xlarge-padding-inline);
+    --dbv-kit-btn-font-size: var(--dbv-kit-btn-xlarge-font-size);
+    --dbv-kit-btn-height: var(--dbv-kit-btn-xlarge-height);
+    --dbv-kit-btn-gap: var(--dbv-kit-btn-xlarge-gap);
+
+    --dbv-kit-btn-icon-margin-inline: calc(var(--dbv-kit-btn-xlarge-padding-inline) * -0.25);
+  }
+
+  /* ---------------------------- */
+  /* Variants */
+
+  .dbv-kit-button--primary {
+    --dbv-kit-btn-background: var(--dbv-kit-btn-primary-background);
+    --dbv-kit-btn-foreground: var(--dbv-kit-btn-primary-foreground);
+    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-primary-background-hover);
+    --dbv-kit-btn-background-active: var(--dbv-kit-btn-primary-background-active);
+
+    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-background-hover);
+  }
+
+  .dbv-kit-button--secondary {
+    --dbv-kit-btn-background: var(--dbv-kit-btn-secondary-background);
+    --dbv-kit-btn-foreground: var(--dbv-kit-btn-secondary-foreground);
+    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-secondary-background-hover);
+    --dbv-kit-btn-background-active: var(--dbv-kit-btn-secondary-background-active);
+    --dbv-kit-btn-border-color: var(--dbv-kit-btn-secondary-border-color);
+
+    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-secondary-foreground);
+  }
+
+  .dbv-kit-button--danger {
+    --dbv-kit-btn-background: var(--dbv-kit-btn-danger-background);
+    --dbv-kit-btn-foreground: var(--dbv-kit-btn-danger-foreground);
+    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-danger-background-hover);
+    --dbv-kit-btn-background-active: var(--dbv-kit-btn-danger-background-active);
+
+    --dbv-kit-btn-loader-color: var(--dbv-kit-btn-danger-background);
+    --dbv-kit-btn-outline-color: var(--dbv-kit-btn-danger-color-outline);
+  }
+
+  /* ---------------------------- */
+  /* Loader */
+
+  .dbv-kit-button[data-loading='true'] {
+    opacity: 0.75;
+    color: color-mix(in oklch, var(--dbv-kit-btn-foreground) 25%, var(--dbv-kit-btn-loader-base-color));
+    background-color: color-mix(in oklch, var(--dbv-kit-btn-loader-base-color) 75%, var(--dbv-kit-btn-background));
+
+    &:hover,
+    &:active,
+    &[data-active] {
+      background-color: color-mix(in oklch, var(--dbv-kit-btn-loader-base-color) 85%, var(--dbv-kit-btn-background));
+    }
+  }
+
+  .dbv-kit-button__loader {
+    --dbv-kit-spinner-stroke-color: var(--dbv-kit-btn-loader-color);
+    --dbv-kit-spinner-height: calc(var(--dbv-kit-btn-height) * 0.6);
+    --dbv-kit-spinner-stroke-width: 3px;
+
+    position: absolute;
+  }
+
+  /* ---------------------------- */
+  /* Icon */
+
+  .dbv-kit-button__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    fill: currentColor;
+  }
+
+  .dbv-kit-button__icon--start {
+    margin-inline-start: var(--dbv-kit-btn-icon-margin-inline);
+  }
+
+  .dbv-kit-button__icon--end {
+    margin-inline-end: var(--dbv-kit-btn-icon-margin-inline);
+  }
+}
@@ -0,0 +1,51 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { Button as AriaButton, type ButtonProps as AriaKitButtonProps } from '@ariakit/react';
+import clsx from 'clsx';
+import './Button.css';
+import type { ControlSize } from '../types/controls.js';
+import { componentProviderWrapper } from '../componentProviderWrapper.js';
+import { Spinner } from '../Spinner/Spinner.js';
+
+export interface ButtonProps extends Omit<AriaKitButtonProps, 'clickOnEnter' | 'clickOnSpace'> {
+  variant?: 'primary' | 'secondary' | 'danger';
+  size?: ControlSize;
+  loading?: boolean;
+  loader?: React.ReactNode;
+}
+
+export function ButtonBase({ className, variant = 'primary', size = 'medium', loading, loader, children, onClick, ...props }: ButtonProps) {
+  const classToApply = clsx('dbv-kit-button', `dbv-kit-button--${variant}`, `dbv-kit-button--${size}`, className);
+
+  if (loading) {
+    props['aria-busy'] = true;
+    props['data-loading'] = true;
+  }
+
+  return (
+    <AriaButton onClick={loading ? () => null : onClick} className={classToApply} {...props}>
+      {loading && (loader ? loader : <Spinner className="dbv-kit-button__loader" />)}
+      {children}
+    </AriaButton>
+  );
+}
+export interface ButtonIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  placement?: 'start' | 'end';
+}
+
+/**
+ *  Button Icon component - used to place an icon inside a button, renders span element.;
+ *
+ * @param props.placement This property is needed to adjust icon placement inside a button. The icon with placement="start" will cut the inline-start padding. placement="end" will affect the padding-inline-end accordingly. This property supports RTL and LTR, so you don't need to think about it.
+ */
+ButtonBase.Icon = function ButtonBaseIcon({ className, children, placement }: ButtonIconProps) {
+  const classToApply = clsx('dbv-kit-button__icon', placement && `dbv-kit-button__icon--${placement}`, className);
+  return <span className={classToApply}>{children}</span>;
+};
+
+export const Button = componentProviderWrapper('Button', ButtonBase);
@@ -0,0 +1,25 @@
+@layer base {
+  :root {
+    --dbv-kit-btn-height: var(--dbv-kit-control-height-medium);
+    --dbv-kit-btn-padding-inline: calc(var(--tw-spacing) * 2.5);
+    --dbv-kit-btn-gap: calc(var(--dbv-kit-btn-padding-inline) / 4);
+    --dbv-kit-btn-outline-offset: var(--dbv-kit-control-outline-offset);
+
+    --dbv-kit-btn-foreground: var(--tw-color-white);
+    --dbv-kit-btn-background: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-background-hover: var(--dbv-kit-color-primary-700);
+    --dbv-kit-btn-background-active: var(--dbv-kit-color-primary-800);
+    --dbv-kit-btn-outline-color: var(--dbv-kit-control-outline-color);
+
+    --dbv-kit-btn-border-width: var(--dbv-kit-control-border-width);
+    --dbv-kit-btn-border-color: transparent;
+    --dbv-kit-btn-border-style: solid;
+    --dbv-kit-btn-border-radius: var(--dbv-kit-control-border-radius);
+
+    --dbv-kit-btn-font-weight: var(--tw-font-weight-normal);
+    --dbv-kit-btn-font-size: calc(var(--dbv-kit-font-size-base) * 0.875);
+
+    --dbv-kit-btn-loader-base-color: var(--dbv-kit-btn-foreground);
+    --dbv-kit-btn-loader-height: calc(var(--dbv-kit-btn-height) * 0.6);
+  }
+}
@@ -0,0 +1,27 @@
+@layer base {
+  :root {
+    /*Small button*/
+    --dbv-kit-btn-small-padding-inline: calc(var(--dbv-kit-btn-padding-inline) * 0.5);
+    --dbv-kit-btn-small-font-size: calc(var(--dbv-kit-btn-font-size) * 0.875);
+    --dbv-kit-btn-small-height: var(--dbv-kit-control-height-small);
+    --dbv-kit-btn-small-gap: calc(var(--dbv-kit-btn-gap) * 0.5);
+
+    /*Medium button*/
+    --dbv-kit-btn-medium-padding-inline: var(--dbv-kit-btn-padding-inline);
+    --dbv-kit-btn-medium-font-size: var(--dbv-kit-btn-font-size);
+    --dbv-kit-btn-medium-height: var(--dbv-kit-control-height-medium);
+    --dbv-kit-btn-medium-gap: var(--dbv-kit-btn-gap);
+
+    /*Large button*/
+    --dbv-kit-btn-large-padding-inline: calc(var(--dbv-kit-btn-padding-inline) * 1.25);
+    --dbv-kit-btn-large-font-size: calc(var(--dbv-kit-btn-font-size) * 1.125);
+    --dbv-kit-btn-large-height: var(--dbv-kit-control-height-large);
+    --dbv-kit-btn-large-gap: calc(var(--dbv-kit-btn-gap) * 1.25);
+
+    /*Extra large button*/
+    --dbv-kit-btn-xlarge-padding-inline: calc(var(--dbv-kit-btn-padding-inline) * 1.5);
+    --dbv-kit-btn-xlarge-font-size: calc(var(--dbv-kit-btn-font-size) * 1.25);
+    --dbv-kit-btn-xlarge-height: var(--dbv-kit-control-height-xlarge);
+    --dbv-kit-btn-xlarge-gap: calc(var(--dbv-kit-btn-gap) * 1.5);
+  }
+}
@@ -0,0 +1,23 @@
+@layer base {
+  :root {
+    /* Primary Button */
+    --dbv-kit-btn-primary-foreground: var(--tw-color-white);
+    --dbv-kit-btn-primary-background: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-primary-background-hover: var(--dbv-kit-color-primary-700);
+    --dbv-kit-btn-primary-background-active: var(--dbv-kit-color-primary-800);
+
+    /* Secondary Button */
+    --dbv-kit-btn-secondary-foreground: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-secondary-background: transparent;
+    --dbv-kit-btn-secondary-background-hover: var(--dbv-kit-color-primary-50);
+    --dbv-kit-btn-secondary-background-active: var(--dbv-kit-color-primary-100);
+    --dbv-kit-btn-secondary-border-color: var(--dbv-kit-color-primary-600);
+
+    /* Danger Button */
+    --dbv-kit-btn-danger-foreground: var(--tw-color-white);
+    --dbv-kit-btn-danger-background: var(--tw-color-red-600);
+    --dbv-kit-btn-danger-background-hover: var(--tw-color-red-700);
+    --dbv-kit-btn-danger-background-active: var(--tw-color-red-800);
+    --dbv-kit-btn-danger-color-outline: var(--tw-color-red-300);
+  }
+}
@@ -0,0 +1,94 @@
+@import './_base.css';
+@import './_sizes.css';
+
+@layer base {
+  .dbv-kit-checkbox {
+    display: inline-flex;
+    user-select: none;
+    align-items: start;
+    min-height: var(--dbv-kit-checkbox-height);
+    gap: var(--dbv-kit-checkbox-gap);
+    line-height: var(--dbv-kit-checkbox-height);
+    font-size: var(--dbv-kit-checkbox-font-size);
+    color: var(--dbv-kit-checkbox-foreground);
+    outline: var(--dbv-kit-control-outline-color);
+
+    &:hover {
+      cursor: pointer;
+
+      .dbv-kit-checkbox__check {
+        box-shadow: 0 0 0 2px var(--dbv-kit-checkbox-hover-shadow-color);
+      }
+    }
+
+    &[data-checked='true'] {
+      border-color: var(--dbv-kit-checkbox-border-color-checked);
+    }
+
+    &[data-disabled='true'] {
+      pointer-events: none;
+      opacity: var(--dbv-kit-control-disabled-opacity);
+    }
+  }
+
+  .dbv-kit-checkbox__check {
+    --check-size: round(calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size)), 2px);
+    margin-top: calc(var(--dbv-kit-checkbox-height) * (calc(1 - var(--dbv-kit-checkbox-check-size)) / 2));
+    height: var(--check-size);
+    line-height: var(--check-size);
+    width: var(--check-size);
+    min-width: var(--check-size);
+    border-radius: var(--dbv-kit-checkbox-border-radius);
+    background-color: var(--dbv-kit-checkbox-background);
+    border-color: var(--dbv-kit-checkbox-border-color);
+    border-width: var(--dbv-kit-checkbox-border-width);
+    border-style: var(--dbv-kit-checkbox-border-style);
+    color: var(--dbv-kit-checkbox-icon-color);
+    outline-offset: var(--dbv-kit-control-outline-offset);
+    outline-width: var(--dbv-kit-control-outline-width);
+    outline-color: var(--dbv-kit-control-outline-color);
+    transition-property: stroke-dashoffset;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    stroke-dasharray: 20;
+    stroke-dashoffset: 20;
+
+    &[data-focus-visible] {
+      outline-style: solid;
+    }
+
+    &[data-checked='true'],
+    &[data-indeterminate='true'] {
+      background-color: var(--dbv-kit-checkbox-background-checked);
+      border-color: var(--dbv-kit-checkbox-border-color-checked);
+      stroke-dashoffset: 0;
+    }
+  }
+
+  /* ---------------------------- */
+  /* Sizes */
+
+  .dbv-kit-checkbox--small {
+    --dbv-kit-checkbox-font-size: var(--dbv-kit-checkbox-small-font-size);
+    --dbv-kit-checkbox-height: var(--dbv-kit-checkbox-small-height);
+    --dbv-kit-checkbox-gap: var(--dbv-kit-checkbox-small-gap);
+  }
+
+  .dbv-kit-checkbox--medium {
+    --dbv-kit-checkbox-font-size: var(--dbv-kit-checkbox-medium-font-size);
+    --dbv-kit-checkbox-height: var(--dbv-kit-checkbox-medium-height);
+    --dbv-kit-checkbox-gap: var(--dbv-kit-checkbox-medium-gap);
+  }
+
+  .dbv-kit-checkbox--large {
+    --dbv-kit-checkbox-font-size: var(--dbv-kit-checkbox-large-font-size);
+    --dbv-kit-checkbox-height: var(--dbv-kit-checkbox-large-height);
+    --dbv-kit-checkbox-gap: var(--dbv-kit-checkbox-large-gap);
+  }
+
+  .dbv-kit-checkbox--xlarge {
+    --dbv-kit-checkbox-font-size: var(--dbv-kit-checkbox-xlarge-font-size);
+    --dbv-kit-checkbox-height: var(--dbv-kit-checkbox-xlarge-height);
+    --dbv-kit-checkbox-gap: var(--dbv-kit-checkbox-xlarge-gap);
+  }
+}
@@ -0,0 +1,75 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { Checkbox as AriaCheckbox, VisuallyHidden, type CheckboxProps as AriaKitCheckboxProps } from '@ariakit/react';
+import { useState } from 'react';
+import clsx from 'clsx';
+import './Checkbox.css';
+import type { ControlSize } from '../types/controls.js';
+import { componentProviderWrapper } from '../componentProviderWrapper.js';
+
+export interface CheckboxProps extends Omit<AriaKitCheckboxProps, 'render' | 'size'> {
+  size?: ControlSize;
+  icon?: React.ReactNode;
+  indeterminate?: boolean;
+  indeterminateIcon?: React.ReactNode;
+}
+
+export function CheckboxBase({ children, className, icon, indeterminate, indeterminateIcon, size = 'medium', ...props }: CheckboxProps) {
+  const [innerChecked, setInnerChecked] = useState(props.defaultChecked ?? false);
+  const checked = props.checked ?? innerChecked;
+
+  const [focusVisible, setFocusVisible] = useState(false);
+  return (
+    <label
+      className={clsx('dbv-kit-checkbox', `dbv-kit-checkbox--${size}`, className)}
+      data-disabled={props.disabled || undefined}
+      data-checked={checked}
+      data-focus-visible={focusVisible || undefined}
+    >
+      <VisuallyHidden>
+        <AriaCheckbox
+          {...props}
+          className="dbv-kit-checkbox__input"
+          clickOnEnter
+          onFocusVisible={() => setFocusVisible(true)}
+          onBlur={() => setFocusVisible(false)}
+          onChange={event => {
+            setInnerChecked(event.target.checked);
+            props.onChange?.(event);
+          }}
+        />
+      </VisuallyHidden>
+
+      <div
+        className="dbv-kit-checkbox__check"
+        data-indeterminate={indeterminate}
+        data-checked={checked}
+        data-focus-visible={focusVisible || undefined}
+      >
+        {checked &&
+          (icon ?? (
+            <svg fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 16 16">
+              <polyline points="3,7 7,11 13,4" />
+            </svg>
+          ))}
+        {indeterminate &&
+          !checked &&
+          (indeterminateIcon ?? (
+            <svg fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 16 16">
+              <line x1="3" y1="8" x2="13" y2="8" />
+            </svg>
+          ))}
+      </div>
+
+      <span className="dbv-kit-checkbox__text">{children}</span>
+    </label>
+  );
+}
+
+export const Checkbox = componentProviderWrapper('Checkbox', CheckboxBase);
@@ -0,0 +1,27 @@
+@layer base {
+  :root {
+    /* Checkbox sizes */
+    --dbv-kit-checkbox-height: var(--dbv-kit-control-height-medium);
+    --dbv-kit-checkbox-gap: calc(var(--tw-spacing) * 1.25);
+    --dbv-kit-checkbox-check-size: 0.5625;
+
+    /* Checkbox colors */
+    --dbv-kit-checkbox-foreground: var(--tw-color-black);
+    --dbv-kit-checkbox-background: transparent;
+    --dbv-kit-checkbox-background-checked: var(--dbv-kit-color-primary-600);
+
+    --dbv-kit-checkbox-hover-shadow-color: var(--dbv-kit-color-primary-200);
+    --dbv-kit-checkbox-icon-color: var(--tw-color-white);
+
+    /* Checkbox border */
+    --dbv-kit-checkbox-border-width: calc(var(--dbv-kit-control-border-width) * 2);
+    --dbv-kit-checkbox-border-radius: var(--dbv-kit-control-border-radius);
+    --dbv-kit-checkbox-border-style: solid;
+    --dbv-kit-checkbox-border-color: var(--dbv-kit-color-control-inactive);
+    --dbv-kit-checkbox-border-color-checked: var(--dbv-kit-color-primary-600);
+
+    /* Checkbox label font */
+    --dbv-kit-checkbox-font-weight: var(--tw-font-weight-normal);
+    --dbv-kit-checkbox-font-size: var(--dbv-kit-font-size-base);
+  }
+}
@@ -0,0 +1,23 @@
+@layer base {
+  :root {
+    /* Small checkbox */
+    --dbv-kit-checkbox-small-font-size: calc(var(--dbv-kit-checkbox-font-size) * 0.875);
+    --dbv-kit-checkbox-small-height: var(--dbv-kit-control-height-small);
+    --dbv-kit-checkbox-small-gap: calc(var(--dbv-kit-checkbox-gap) * 0.5);
+
+    /* Medium checkbox */
+    --dbv-kit-checkbox-medium-font-size: var(--dbv-kit-checkbox-font-size);
+    --dbv-kit-checkbox-medium-height: var(--dbv-kit-control-height-medium);
+    --dbv-kit-checkbox-medium-gap: var(--dbv-kit-checkbox-gap);
+
+    /* Large checkbox */
+    --dbv-kit-checkbox-large-font-size: calc(var(--dbv-kit-checkbox-font-size) * 1.125);
+    --dbv-kit-checkbox-large-height: var(--dbv-kit-control-height-large);
+    --dbv-kit-checkbox-large-gap: calc(var(--dbv-kit-checkbox-gap) * 1.25);
+
+    /* Extra large checkbox */
+    --dbv-kit-checkbox-xlarge-font-size: calc(var(--dbv-kit-checkbox-font-size) * 1.25);
+    --dbv-kit-checkbox-xlarge-height: var(--dbv-kit-control-height-xlarge);
+    --dbv-kit-checkbox-xlarge-gap: calc(var(--dbv-kit-checkbox-gap) * 1.5);
+  }
+}
@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+import type { ButtonBase } from './Button/Button.js';
+import type { CheckboxBase } from './Checkbox/Checkbox.js';
+import type { Radio } from './Radio/Radio.js';
+import type { InputBase } from './Input/Input.js';
+import type { RadioGroup } from './Radio/RadioGroup.js';
+import type { Select } from './Select/Select.js';
+import type { SelectField } from './Select/SelectField.js';
+
+export interface IComponentProvider {
+  Button?: typeof ButtonBase;
+  Input?: typeof InputBase;
+  Checkbox?: typeof CheckboxBase;
+  Radio?: typeof Radio;
+  RadioGroup?: typeof RadioGroup;
+  Select?: typeof Select;
+  SelectField?: typeof SelectField;
+}
+export const ComponentProvider = createContext<IComponentProvider>({});
@@ -0,0 +1,77 @@
+@import './_base.css';
+@import './_sizes.css';
+@import './_variants.css';
+
+@layer base {
+  .dbv-kit-input-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dbv-kit-input {
+    background: var(--dbv-kit-input-background);
+    border-radius: var(--dbv-kit-input-radius);
+    border-color: var(--dbv-kit-input-border-color);
+    border-width: var(--dbv-kit-input-border-width);
+    border-style: var(--dbv-kit-input-border-style);
+    color: var(--dbv-kit-input-foreground);
+    padding-inline: var(--dbv-kit-input-padding);
+    font-size: var(--dbv-kit-input-font-size);
+    height: var(--dbv-kit-input-height);
+
+    &:not(:disabled):hover {
+      border-color: var(--dbv-kit-color-control-hover);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: var(--dbv-kit-control-disabled-opacity);
+    }
+
+    &::placeholder {
+      color: var(--dbv-kit-input-placeholder-foreground);
+    }
+
+    &:focus-visible,
+    &[data-focus-visible] {
+      outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-control-outline-color);
+      outline-offset: var(--dbv-kit-control-outline-offset);
+    }
+  }
+
+  .dbv-kit-input__title {
+    color: var(--dbv-kit-input-label-foreground);
+    padding-inline-start: var(--dbv-kit-input-label-padding);
+    margin-block-end: var(--tw-spacing);
+  }
+
+  .dbv-kit-input__title--required {
+    &:after {
+      content: '*';
+      color: var(--dbv-kit-color-control-required);
+      margin-inline-start: 0.125rem;
+    }
+  }
+
+  /* ---------------------------- */
+  /* Sizes */
+
+  .dbv-kit-input--small {
+    --dbv-kit-input-height: var(--dbv-kit-input-small-height);
+    --dbv-kit-input-padding: var(--dbv-kit-input-small-padding);
+    --dbv-kit-input-font-size: var(--dbv-kit-input-small-font-size);
+  }
+
+  .dbv-kit-input--large {
+    --dbv-kit-input-height: var(--dbv-kit-input-large-height);
+    --dbv-kit-input-padding: var(--dbv-kit-input-large-padding);
+    --dbv-kit-input-font-size: var(--dbv-kit-input-large-font-size);
+  }
+
+  .dbv-kit-input--xlarge {
+    --dbv-kit-input-height: var(--dbv-kit-input-xlarge-height);
+    --dbv-kit-input-padding: var(--dbv-kit-input-xlarge-padding);
+    --dbv-kit-input-font-size: var(--dbv-kit-input-xlarge-font-size);
+  }
+}
@@ -0,0 +1,29 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { type ComponentPropsWithRef } from 'react';
+import './Input.css';
+import clsx from 'clsx';
+import { componentProviderWrapper } from '../componentProviderWrapper.js';
+
+export interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  label?: React.ReactNode;
+}
+
+export const InputBase: React.FC<InputProps> = function Input({ size, className, ...props }) {
+  const classNameToApply = clsx(`dbv-kit-input`, `dbv-kit-input--${size ?? 'medium'}`, className);
+  return (
+    <label className="dbv-kit-input-wrapper">
+      {props.label && <div className={clsx('dbv-kit-input__title', props.required && 'dbv-kit-input__title--required')}>{props.label}</div>}
+      <input className={classNameToApply} {...props} />
+    </label>
+  );
+};
+
+export const Input = componentProviderWrapper('Input', InputBase);
@@ -0,0 +1,22 @@
+@layer base {
+  :root {
+    --dbv-kit-input-radius: var(--dbv-kit-control-border-radius);
+    --dbv-kit-input-font-size: calc(var(--dbv-kit-font-size-base) * 0.875);
+    --dbv-kit-input-background: var(--dbv-kit-color-background);
+    --dbv-kit-input-border-color: var(--dbv-kit-color-control-inactive);
+    --dbv-kit-input-border-width: var(--dbv-kit-control-border-width);
+    --dbv-kit-input-border-style: solid;
+    --dbv-kit-input-foreground: var(--dbv-kit-color-foreground);
+
+    --dbv-kit-input-label-foreground: var(--dbv-kit-color-control-label);
+    --dbv-kit-input-label-padding: var(--tw-spacing);
+
+    --dbv-kit-input-height: var(--dbv-kit-control-height-medium);
+    --dbv-kit-input-padding: calc(var(--tw-spacing) * 2.5);
+    --dbv-kit-input-placeholder-foreground: var(--tw-color-gray-500);
+    --dbv-kit-input-option-active-background: var(--dbv-kit-color-primary-200);
+    --dbv-kit-input-option-active-border: var(--dbv-kit-color-primary-500);
+    --dbv-kit-input-option-active-foreground: var(--dbv-kit-color-foreground);
+    --dbv-kit-input-option-hover-background: var(--dbv-kit-color-primary-100);
+  }
+}
@@ -0,0 +1,23 @@
+@layer base {
+  :root {
+    /* Small input */
+    --dbv-kit-input-small-padding: calc(var(--dbv-kit-input-padding) * 0.5);
+    --dbv-kit-input-small-font-size: calc(var(--dbv-kit-input-font-size) * 0.875);
+    --dbv-kit-input-small-height: var(--dbv-kit-control-height-small);
+
+    /* Medium input */
+    --dbv-kit-input-medium-padding: var(--dbv-kit-input-padding);
+    --dbv-kit-input-medium-font-size: var(--dbv-kit-input-font-size);
+    --dbv-kit-input-medium-height: var(--dbv-kit-control-height-medium);
+
+    /* Large input */
+    --dbv-kit-input-large-padding: calc(var(--dbv-kit-input-padding) * 1.25);
+    --dbv-kit-input-large-font-size: calc(var(--dbv-kit-input-font-size) * 1.125);
+    --dbv-kit-input-large-height: var(--dbv-kit-control-height-large);
+
+    /* Extra large input */
+    --dbv-kit-input-xlarge-padding: calc(var(--dbv-kit-input-padding) * 1.5);
+    --dbv-kit-input-xlarge-font-size: calc(var(--dbv-kit-input-font-size) * 1.25);
+    --dbv-kit-input-xlarge-height: var(--dbv-kit-control-height-xlarge);
+  }
+}
@@ -0,0 +1,15 @@
+@layer base {
+  :root {
+    --dbv-kit-input-validation-error-background: var(--dbv-kit-color-error-background);
+    --dbv-kit-input-validation-error-foreground: var(--dbv-kit-color-error-text);
+    --dbv-kit-input-validation-error-border: var(--dbv-kit-color-error-border);
+
+    --dbv-kit-input-validation-info-background: var(--dbv-kit-color-info-background);
+    --dbv-kit-input-validation-info-foreground: var(--dbv-kit-color-info-text);
+    --dbv-kit-input-validation-info-order: var(--dbv-kit-color-info-border);
+
+    --dbv-kit-input-validation-warning-background: var(--dbv-kit-color-warning-background);
+    --dbv-kit-input-validation-warning-foreground: var(--dbv-kit-color-warning-text);
+    --dbv-kit-input-validation-warning-border: var(--dbv-kit-color-warning-border);
+  }
+}
@@ -0,0 +1,115 @@
+@import './_base.css';
+@import './_sizes.css';
+
+@layer base {
+  .dbv-kit-radio {
+    display: inline-flex;
+    align-items: start;
+    gap: var(--dbv-kit-radio-gap);
+    cursor: pointer;
+    height: var(--dbv-kit-radio-height);
+
+    &:hover .dbv-kit-radio__input:not([aria-disabled='true']) ~ .dbv-kit-radio__control {
+      background-color: var(--dbv-kit-radio-inactive-hover-background);
+      box-shadow: 0 0 0 var(--dbv-kit-control-outline-offset) var(--dbv-kit-radio-hover-shadow-color);
+    }
+  }
+
+  .dbv-kit-radio--small {
+    --dbv-kit-radio-font-size: var(--dbv-kit-radio-small-font-size);
+    --dbv-kit-radio-gap: var(--dbv-kit-radio-small-gap);
+    --dbv-kit-radio-height: var(--dbv-kit-radio-small-height);
+    --dbv-kit-radio-dot-size: var(--dbv-kit-radio-small-dot-size);
+  }
+
+  .dbv-kit-radio--medium {
+    --dbv-kit-radio-font-size: var(--dbv-kit-radio-medium-font-size);
+    --dbv-kit-radio-gap: var(--dbv-kit-radio-medium-gap);
+    --dbv-kit-radio-height: var(--dbv-kit-radio-medium-height);
+    --dbv-kit-radio-dot-size: var(--dbv-kit-radio-medium-dot-size);
+  }
+
+  .dbv-kit-radio--large {
+    --dbv-kit-radio-font-size: var(--dbv-kit-radio-large-font-size);
+    --dbv-kit-radio-gap: var(--dbv-kit-radio-large-gap);
+    --dbv-kit-radio-height: var(--dbv-kit-radio-large-height);
+    --dbv-kit-radio-dot-size: var(--dbv-kit-radio-large-dot-size);
+  }
+
+  .dbv-kit-radio--xlarge {
+    --dbv-kit-radio-font-size: var(--dbv-kit-radio-xlarge-font-size);
+    --dbv-kit-radio-gap: var(--dbv-kit-radio-xlarge-gap);
+    --dbv-kit-radio-height: var(--dbv-kit-radio-xlarge-height);
+    --dbv-kit-radio-dot-size: var(--dbv-kit-radio-xlarge-dot-size);
+  }
+
+  .dbv-kit-radio__input {
+    border: 0px;
+    clip: rect(0px, 0px, 0px, 0px);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0px;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+
+    &[aria-checked='true'] + .dbv-kit-radio__control {
+      border-color: var(--dbv-kit-radio-active-border);
+      background-color: var(--dbv-kit-radio-active-background);
+
+      &::after {
+        scale: 1;
+      }
+    }
+
+    &[data-focus-visible='true'] ~ .dbv-kit-radio__control {
+      outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-control-outline-color);
+      outline-offset: var(--dbv-kit-control-outline-offset);
+      box-shadow: 0 0 0 var(--dbv-kit-control-outline-offset) var(--dbv-kit-radio-hover-shadow-color);
+    }
+
+    &[aria-disabled='true'] ~ .dbv-kit-radio__text,
+    &[aria-disabled='true'] ~ .dbv-kit-radio__control {
+      opacity: var(--dbv-kit-control-disabled-opacity);
+    }
+  }
+
+  .dbv-kit-radio__control {
+    --ring-size: round(calc(var(--dbv-kit-radio-height) * var(--dbv-kit-radio-ring-size)), 2px);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--ring-size);
+    height: var(--ring-size);
+    margin-top: calc((var(--dbv-kit-radio-height) - (var(--ring-size))) * 0.5);
+    border-radius: 50%;
+    border: 2px solid var(--dbv-kit-radio-inactive-border);
+    background-color: var(--dbv-kit-radio-inactive-background);
+    transition:
+      background-color 0.3s,
+      border-color 0.3s;
+
+    &::after {
+      content: '';
+      width: round(calc(var(--dbv-kit-radio-height) * var(--dbv-kit-radio-dot-size)), 2px);
+      height: round(calc(var(--dbv-kit-radio-height) * var(--dbv-kit-radio-dot-size)), 2px);
+      border-radius: 50%;
+      background-color: var(--dbv-kit-radio-active-foreground);
+      scale: 0;
+
+      transition-property: scale;
+      transition-timing-function: var(--tw-ease-in-out);
+      transition-duration: 0.2s;
+    }
+  }
+
+  .dbv-kit-radio__title {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: var(--dbv-kit-radio-height);
+    font-size: var(--dbv-kit-radio-font-size);
+  }
+}
--- a/Show More
+++ b/Show More